/* ============================================================
   Four in a Row — the board
   ------------------------------------------------------------
   The setup screen is assets/classroom-setup.css; this is only
   what happens after Start. Sized for a display at the front of
   a room, like Tug of War, and it borrows that game's team
   palette from the shared file rather than picking its own.

   The screen is in two halves: the grid on the left, the
   question on the right. Only one team is answering at a time —
   which is the difference from Tug of War, where both race — so
   there is one question panel, and it takes the colour of
   whoever's turn it is.
   ============================================================ */

.fir-stage {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--cg-stage);
  color: var(--cg-ink);
  grid-template-rows: auto 1fr;
  gap: clamp(8px, 1.2vh, 16px);
  padding: clamp(10px, 1.6vh, 20px);
}
body.is-playing .fir-stage { display: grid; }

/* ---------- score strip ---------- */

.fir-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.fir-team {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
  padding: 8px 16px;
  border-radius: 14px;
  font-weight: 700;
  border: 2px solid transparent;
  transition: border-color .15s, opacity .15s;
}
.fir-team.is-blue { background: var(--cg-blue-soft); color: var(--cg-blue-ink); }
.fir-team.is-red  { background: var(--cg-red-soft);  color: var(--cg-red-ink); justify-self: end; flex-direction: row-reverse; }

/* Whose turn it is, said on the strip rather than only in the question panel.
   A class looks at the scores first. */
.fir-team[data-turn="false"] { opacity: .5; }
.fir-team.is-blue[data-turn="true"] { border-color: var(--cg-blue); }
.fir-team.is-red[data-turn="true"]  { border-color: var(--cg-red); }

.fir-team-name {
  font-size: clamp(16px, 2.4vh, 26px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fir-team-count {
  font-size: clamp(20px, 3.2vh, 36px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fir-tools { display: flex; align-items: center; gap: clamp(6px, 1vw, 12px); }
.fir-tool {
  width: clamp(34px, 5vh, 44px);
  height: clamp(34px, 5vh, 44px);
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1.5px solid var(--cg-line);
  background: var(--cg-panel);
  color: var(--cg-dim);
  cursor: pointer;
}
.fir-tool:hover { color: var(--cg-ink); border-color: var(--cg-dim); }
.fir-tool[aria-pressed="true"] { color: var(--cg-ink); border-color: var(--cg-ink); }
.fir-tool svg[hidden] { display: none; }

/* ---------- the two halves ---------- */

.fir-play {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(10px, 1.6vw, 24px);
  min-height: 0;
}

/* ---------- the grid ---------- */

/* The column numbers are positioned into the board's own bottom padding rather
   than given a row of their own. Two earlier attempts are worth recording:
   inside the column as a seventh grid row, they made every column taller than
   the aspect ratio allowed and pushed the bottom row off the screen; in a
   sibling strip under the board, the grid column had to measure a box whose
   width comes from its own height and settled on 109px, so the board overlapped
   the question. Out of flow, there is nothing left to measure wrongly. */
.fir-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(4px, .8vh, 10px);
  padding: clamp(6px, 1.2vh, 14px);
  padding-bottom: clamp(24px, 3.4vh, 36px);
  border-radius: 18px;
  background: var(--cg-panel);
  border: 1px solid var(--cg-line);
  /* aspect-ratio keeps the discs round at any screen shape without the script
     measuring anything. Bounded by both the half it is given and the row it
     sits in, so it fits whichever runs out first. */
  /* Height first, width from the ratio. The row this sits in has a definite
     height, so `height: 100%` is a real number and the width the ratio derives
     from it is one too — which is what lets the grid column beside it be
     `auto` and still measure correctly. Sized the other way about, with
     max-width and max-height and no definite side at all, the box has nothing
     to resolve against and collapses to its content, which here is nothing. */
  aspect-ratio: 7 / 6;
  height: 100%;
  min-height: 0;
}

/* A whole column is the target, not a single square. A child at a board is
   pressing with a finger, from the side, in front of the class — asking them to
   hit one circle of forty-two is asking them to miss. */
.fir-column {
  position: relative;
  display: grid;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: clamp(4px, .8vh, 10px);
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  background: none;
  cursor: default;
  min-height: 0;
}
.fir-stage[data-phase="placing"] .fir-column:not([disabled]) { cursor: pointer; }
.fir-stage[data-phase="placing"] .fir-column:not([disabled]):hover,
.fir-stage[data-phase="placing"] .fir-column:not([disabled]):focus-visible {
  background: var(--cg-stage);
  outline: none;
}
.fir-stage[data-phase="placing"] .fir-column.is-blue:not([disabled]):hover { border-color: var(--cg-blue); }
.fir-stage[data-phase="placing"] .fir-column.is-red:not([disabled]):hover  { border-color: var(--cg-red); }

/* Rows are written top-first, because that is the order they are read on a
   screen; the model counts from the bottom, and the script does the flip. */
.fir-cell {
  border-radius: 50%;
  background: var(--cg-stage);
  border: 1px solid var(--cg-line);
  min-height: 0;
  transition: background .18s, border-color .18s, transform .18s;
}
.fir-cell.is-blue { background: var(--cg-blue); border-color: var(--cg-blue-deep); }
.fir-cell.is-red  { background: var(--cg-red);  border-color: var(--cg-red-deep); }

/* The disc that just landed, and then the four that won. The winning line is
   the thing that settles the argument, so it is the loudest thing on the
   board. */
.fir-cell.is-new { animation: fir-land .28s cubic-bezier(.3, 1.4, .6, 1); }
@keyframes fir-land {
  from { transform: translateY(-40%) scale(.85); }
}
.fir-cell.is-won {
  box-shadow: 0 0 0 4px var(--cg-good), 0 0 18px rgba(0, 0, 0, .25);
  transform: scale(1.06);
}

/* Where a disc would land, shown under the finger before it commits. */
.fir-cell.is-ghost.is-blue { background: color-mix(in srgb, var(--cg-blue) 32%, var(--cg-stage)); }
.fir-cell.is-ghost.is-red  { background: color-mix(in srgb, var(--cg-red) 32%, var(--cg-stage)); }

.fir-key {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(-30px, -2.8vh, -20px);
  text-align: center;
  font-size: clamp(10px, 1.5vh, 13px);
  font-weight: 700;
  color: var(--cg-dim);
  line-height: 1.6;
}

/* ---------- the question ---------- */

.fir-ask {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 16px);
  min-height: 0;
  padding: clamp(12px, 2vh, 24px);
  border-radius: 18px;
  background: var(--cg-panel);
  border: 3px solid transparent;
}
.fir-ask.is-blue { border-color: color-mix(in srgb, var(--cg-blue) 34%, transparent); }
.fir-ask.is-red  { border-color: color-mix(in srgb, var(--cg-red) 34%, transparent); }

.fir-ask-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  font-size: clamp(11px, 1.6vh, 15px);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.fir-ask.is-blue .fir-ask-head { color: var(--cg-blue-ink); }
.fir-ask.is-red  .fir-ask-head { color: var(--cg-red-ink); }
.fir-ask-skill { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .72; }

.fir-prompt {
  flex: 1;
  display: grid;
  align-content: center;
  min-height: 0;
  margin: 0;
  font-size: clamp(19px, 3.2vh, 38px);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.fir-options {
  display: grid;
  gap: clamp(6px, 1vh, 12px);
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(clamp(52px, 8vh, 96px), auto);
  flex: 0 0 auto;
  min-height: 0;
}
@media (max-aspect-ratio: 5/4) { .fir-options { grid-template-columns: 1fr; } }

.fir-option {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.4vh, 14px);
  text-align: left;
  font: inherit;
  font-size: clamp(16px, 2.4vh, 28px);
  font-weight: 600;
  line-height: 1.2;
  padding: clamp(9px, 1.5vh, 18px) clamp(11px, 1.5vh, 20px);
  border-radius: 13px;
  border: 2.5px solid var(--cg-line);
  background: var(--cg-panel);
  color: var(--cg-ink);
  cursor: pointer;
  transition: transform .08s, border-color .12s, background .12s;
}
.fir-option:active { transform: scale(.985); }
.fir-ask.is-blue .fir-option:hover:not(:disabled) { border-color: var(--cg-blue); background: var(--cg-blue-soft); }
.fir-ask.is-red  .fir-option:hover:not(:disabled) { border-color: var(--cg-red);  background: var(--cg-red-soft); }
.fir-option.is-right { border-color: var(--cg-good); background: color-mix(in srgb, var(--cg-good) 14%, var(--cg-panel)); }
.fir-option.is-wrong { border-color: var(--cg-red);  background: color-mix(in srgb, var(--cg-red) 14%, var(--cg-panel)); }
.fir-option:disabled { cursor: default; }

.fir-hint {
  font-size: clamp(13px, 1.9vh, 19px);
  font-weight: 600;
  text-align: center;
  min-height: 1.4em;
}
.fir-ask.is-blue .fir-hint { color: var(--cg-blue-ink); }
.fir-ask.is-red  .fir-hint { color: var(--cg-red-ink); }

/* While a team is choosing a column the question is answered and done with, so
   it steps back and the board is the only thing worth looking at. */
.fir-stage[data-phase="placing"] .fir-options { opacity: .45; }

/* ---------- result ---------- */

.fir-over {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--cg-stage) 88%, transparent);
  backdrop-filter: blur(3px);
}
.fir-over[data-open] { display: grid; }
.fir-over-card {
  width: min(680px, 100%);
  text-align: center;
  padding: clamp(24px, 5vh, 52px);
  border-radius: 22px;
  background: var(--cg-panel);
  border: 1px solid var(--cg-line);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .18);
}
.fir-over-crest { font-size: clamp(40px, 9vh, 76px); line-height: 1; }
.fir-over-card h2 { font-size: clamp(26px, 5vh, 46px); margin: 12px 0 6px; color: var(--cg-ink); }
.fir-over-card h2.is-blue { color: var(--cg-blue); }
.fir-over-card h2.is-red  { color: var(--cg-red); }
.fir-over-line { font-size: clamp(15px, 2.2vh, 20px); color: var(--cg-dim); margin: 0 0 22px; }
.fir-over-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- narrow screens ----------
   Same reasoning as Tug of War: the board belongs at the front of a room, but a
   teacher will open it on a phone before the lesson and it must not be
   unusable. The grid goes on top, the question under it, and the whole thing
   scrolls rather than being squeezed. */
@media (max-width: 860px), (max-height: 460px) {
  body.is-playing .fir-stage {
    grid-template-rows: auto auto;
    align-content: start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .fir-play { grid-template-columns: 1fr; min-height: auto; }
  .fir-board { width: min(100%, 60vh); max-height: none; }
  .fir-ask { min-height: auto; }
  .fir-prompt { flex: 0 0 auto; font-size: 20px; }
  .fir-options { grid-template-columns: 1fr; grid-auto-rows: minmax(52px, auto); min-height: auto; }
  .fir-option { font-size: 17px; }
  .fir-score .fir-team-name { display: none; }
  .fir-ask-skill { display: none; }
  .fir-key { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fir-cell { transition: none; }
  .fir-cell.is-new { animation: none; }
}