/* ============================================================
   The setup screen the classroom games open on
   ------------------------------------------------------------
   Shared by every classroom game page, and loaded before each
   game's own stylesheet. It styles the part that is
   the same in all of them — grade, theme, teams — and nothing
   that belongs to a board.

   These rules were written inside assets/tug-of-war.css when
   there was one game. They moved here rather than being copied
   when there were two: a chip that looks one way on one game's
   setup screen and another way on the next is exactly the drift
   a shared stylesheet exists to prevent.

   The chips are built to the filter bar on games.html — same
   padding, same 8px corner, same pressed colours — so a teacher
   meets one control on the page they came from and the page
   they arrived at.
   ============================================================ */

/* ---------- the team palette ----------
   Two teams that are equals. site.css owns one blue and one orange, and
   borrowing the brand accent for one side would make the other look like the
   loser before a question was asked — so both games get their own blue and red,
   defined once, here. Rebuilt for dark mode rather than dimmed. */
.cg {
  --cg-blue: #1f6fd0;
  --cg-blue-deep: #14508f;
  --cg-blue-soft: #e8f1fd;
  --cg-blue-ink: #0f3f74;

  --cg-red: #d0392f;
  --cg-red-deep: #9b2820;
  --cg-red-soft: #fdecea;
  --cg-red-ink: #7e2019;

  /* Teams three to six, for Bomb and the Points Board. Chosen to stay apart
     from each other on a washed-out projector, and never shown without the
     team's name beside them, so colour is not the only thing telling a class
     which team is which. The green is yellower than --cg-good on purpose: a
     green team answering correctly should still read as an answer, not a team. */
  --cg-green: #3f8f1c;
  --cg-green-deep: #2c6612;
  --cg-green-soft: #ebf6e3;
  --cg-green-ink: #265a0f;

  --cg-gold: #c28a00;
  --cg-gold-deep: #8c6300;
  --cg-gold-soft: #fdf4dc;
  --cg-gold-ink: #6b4c00;

  --cg-purple: #7b45c9;
  --cg-purple-deep: #56309a;
  --cg-purple-soft: #f1ebfb;
  --cg-purple-ink: #4a2785;

  --cg-pink: #c93686;
  --cg-pink-deep: #962360;
  --cg-pink-soft: #fce9f3;
  --cg-pink-ink: #7d1d50;

  --cg-stage: #f4f7fb;
  --cg-panel: #ffffff;
  --cg-ink: #14283c;
  --cg-dim: #5e7085;
  --cg-line: #dce5ef;
  --cg-good: #17845a;
}

[data-theme="dark"] .cg {
  --cg-blue: #5a9df0;
  --cg-blue-deep: #2d6cb5;
  --cg-blue-soft: #16273d;
  --cg-blue-ink: #a8cdf7;

  --cg-red: #ef6a5e;
  --cg-red-deep: #b8443a;
  --cg-red-soft: #33201d;
  --cg-red-ink: #f6a89f;

  --cg-green: #7fc95a;
  --cg-green-deep: #4f9a2c;
  --cg-green-soft: #1b2b14;
  --cg-green-ink: #bfe6a8;

  --cg-gold: #f0bf3c;
  --cg-gold-deep: #b98a12;
  --cg-gold-soft: #2e2512;
  --cg-gold-ink: #f7dc8e;

  --cg-purple: #a987f0;
  --cg-purple-deep: #7657c4;
  --cg-purple-soft: #221a36;
  --cg-purple-ink: #d4c3f8;

  --cg-pink: #ef7ab8;
  --cg-pink-deep: #bd4b88;
  --cg-pink-soft: #33182a;
  --cg-pink-ink: #f7b9da;

  --cg-stage: #0d1721;
  --cg-panel: #16222f;
  --cg-ink: #e7eef6;
  --cg-dim: #9bacbe;
  --cg-line: #26374a;
  --cg-good: #45c396;
}

/* One team's colours under one set of names, so a game with a team count can
   style "this team" without a rule per team. Setting custom properties is all
   these do, which is why it is safe on every element that carries the class —
   Four in a Row's discs included. */
.cg .is-blue   { --team: var(--cg-blue);   --team-deep: var(--cg-blue-deep);   --team-soft: var(--cg-blue-soft);   --team-ink: var(--cg-blue-ink); }
.cg .is-red    { --team: var(--cg-red);    --team-deep: var(--cg-red-deep);    --team-soft: var(--cg-red-soft);    --team-ink: var(--cg-red-ink); }
.cg .is-green  { --team: var(--cg-green);  --team-deep: var(--cg-green-deep);  --team-soft: var(--cg-green-soft);  --team-ink: var(--cg-green-ink); }
.cg .is-gold   { --team: var(--cg-gold);   --team-deep: var(--cg-gold-deep);   --team-soft: var(--cg-gold-soft);   --team-ink: var(--cg-gold-ink); }
.cg .is-purple { --team: var(--cg-purple); --team-deep: var(--cg-purple-deep); --team-soft: var(--cg-purple-soft); --team-ink: var(--cg-purple-ink); }
.cg .is-pink   { --team: var(--cg-pink);   --team-deep: var(--cg-pink-deep);   --team-soft: var(--cg-pink-soft);   --team-ink: var(--cg-pink-ink); }

/* The setup screen is an ordinary page — site chrome and all — until a game
   starts, at which point the board takes the screen and this is hidden rather
   than replaced. Leaving a game puts the teacher back exactly where they were,
   with their choices still made. Both games work this way. */
.cg-setup { display: block; }
body.is-playing .cg-setup,
body.is-playing .topbar,
body.is-playing .site-footer { display: none; }

.cg-field { margin-bottom: 22px; }
.cg-field > h2 {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 8px;
  font-weight: 600;
}

.cg-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Built to the filter bar on games.html rather than to its own taste: same
   padding, same 8px corner, same pressed colours. These started as 15px pills
   on a 999px radius, which on a chip carrying a second line of text reads as a
   fat lozenge — and made a setup screen look nothing like the page the teacher
   reached it from. */
.cg-chip {
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  padding: 7px 13px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.cg-chip:hover { border-color: var(--border-hover); color: var(--navy); }
.cg-chip[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--sky);
  color: var(--blue);
}
.cg-chip small { display: block; font-weight: 500; font-size: 11px; opacity: .75; }

/* A team name is a word or two. Left to share the full page width it became a
   field wide enough for a sentence, on a row with nothing else on it. */
.cg-names { display: flex; gap: 14px; flex-wrap: wrap; max-width: 680px; }
.cg-name-field { flex: 1 1 220px; }
.cg-name-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.cg-name-field label { color: var(--team-ink, inherit); }
.cg-name-field input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}
.cg-name-field input:focus { outline: 2px solid var(--team, var(--blue)); border-color: var(--team, var(--blue)); }

.cg-start { font-size: 17px; padding: 15px 34px; }

.cg-empty {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 18px;
  color: var(--muted);
}

/* The key printed on an answer button. Both games put their options on the
   number row, because a board at the front of a room is often driven from a
   laptop with no touch screen and two children cannot share one mouse. */
.cg-key {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 1.9em;
  padding: .1em .3em;
  border-radius: 7px;
  font-size: .72em;
  font-weight: 700;
  background: var(--cg-stage);
  color: var(--cg-dim);
}

/* The install and update bar from assets/pwa.js is pinned to the bottom of the
   window, which while a game is on is the bottom of the board. A teacher
   mid-lesson should not be offered a Refresh over the top of a class's game,
   and a child reaching for the last column should not find it. It waits until
   they leave; assets/pwa.js will still be holding the update. */
body.is-playing .pwa-bar { display: none; }