/* ═══════════════════════════════════════════════════════════════════
   Inglizi Play — responsive game shell
   Loaded AFTER each game's own <style>, so it wins on equal specificity.

   The rule it enforces: while a game is being played, the student can
   see the instruction, the play area and the action button AT THE SAME
   TIME, with no scrolling — on a phone, on a laptop, and on a
   classroom board. Nothing on the page scrolls; only designated panes
   scroll inside themselves.

   Applied when <body> carries `.in-game` (added by game-shell.js on
   start, removed when the setup screen returns) so the setup screen is
   still a normal, scrollable page.
   ═══════════════════════════════════════════════════════════════════ */

html { height: 100%; }

body.in-game {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* dvh keeps the layout honest when mobile browser chrome slides away */
@supports (height: 100dvh) { body.in-game { height: 100dvh; } }

body.in-game .topbar { flex: 0 0 auto; padding: 8px 14px; }
body.in-game .topbar .back-link { padding: 8px 14px; font-size: 14px; }
body.in-game .topbar .game-title { font-size: 14px; }
body.in-game .topbar .mode-pill { font-size: 10px; padding: 6px 12px; }

body.in-game .page {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

body.in-game .game-area.is-shown {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) clamp(290px, 23vw, 380px);
  align-items: stretch;
}

/* Grid and flex items default to min-width:auto, which means a wide row
   of cards can inflate the whole page instead of scrolling inside its own
   box. Every box between the page and a scrolling row must be allowed to
   shrink below its content. */
body.in-game .game-area.is-shown > div { min-width: 0; }
body.in-game .game-area.is-shown > div:first-child {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  gap: 10px;
}
body.in-game .statbar,
body.in-game .map-wrap, body.in-game .room-wrap,
body.in-game .scene-wrap, body.in-game .board,
body.in-game .side, body.in-game .side > * { min-width: 0; }
body.in-game .scene, body.in-game .timeline { min-width: 0; }

body.in-game .statbar { flex: 0 0 auto; padding: 9px 14px; margin-bottom: 0; }
body.in-game .stat { font-size: 9px; }
body.in-game .stat b { font-size: 13px; }

/* the four play surfaces */
body.in-game .map-wrap,
body.in-game .room-wrap,
body.in-game .scene-wrap,
body.in-game .board {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

/* A "stage" is a box that holds ONLY the fitted surface, so the fitter
   measures space no sibling is using. .map-inner is the directions one. */
body.in-game .map-inner,
body.in-game .stage {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: none;
  display: grid; place-items: center;
}
body.in-game .map  { max-width: 100%; max-height: 100%; }
body.in-game .room { aspect-ratio: auto; max-width: 100%; max-height: 100%; }
body.in-game .scene     { flex: 1 1 auto; min-height: 0; overflow: auto; }
body.in-game .timeline  { flex: 1 1 auto; min-height: 0; overflow: auto; align-content: start; }

/* trays and palettes never grow past their content */
/* min-width:0 matters: as flex items these default to min-width:auto, so a
   no-wrap row of cards would widen the whole page instead of scrolling. */
body.in-game .tray,
body.in-game .palette { flex: 0 0 auto; min-width: 0; margin-top: 0; max-height: 34%; overflow: auto; }
body.in-game .tray-items,
body.in-game .acts,
body.in-game .cards { min-width: 0; }

/* right column */
body.in-game .side {
  min-height: 0;
  display: grid;
  /* The instruction is the thing being learned, so it gets a floor. If the
     column runs out of room the deck scrolls rather than crushing it. */
  grid-template-rows: auto minmax(130px, 1fr) auto auto;
  gap: 10px;
  overflow-y: auto;
}
body.in-game .side > :nth-child(2) { min-height: 0; overflow: auto; }   /* instructions */
body.in-game .side > :nth-child(3) { flex: 0 0 auto; }                  /* the action */
body.in-game .feedback { min-height: 0; }

/* ── phone, and any short window ─────────────────────────────────── */
@media (max-width: 1023px), (max-height: 719px) {
  body.in-game .page { padding: 8px; }

  body.in-game .game-area.is-shown {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
  }

  /* The side becomes a bottom deck: instructions scroll inside it, the
     action button is pinned and can never be scrolled out of reach. */
  /* The bottom deck takes only what it needs so the stage keeps the
     rest — on a phone the play surface is the scarce resource. */
  body.in-game .side {
    max-height: min(36vh, 312px);
    grid-template-rows: auto minmax(76px, 1fr) auto;
    gap: 8px;
  }
  body.in-game .side > :nth-child(4) { display: none; }  /* feedback line */
  body.in-game .side .panel,
  body.in-game .side .instr { padding: 10px 12px; }
  body.in-game .panel-h,
  body.in-game .instr-h { font-size: 8px; margin-bottom: 7px; }

  /* Score becomes a single thin strip — on a phone the header and the
     "0 arrived" line cost more height than they are worth, and that
     height is what the action button needs. */
  body.in-game .side > :nth-child(1) { padding: 6px 8px; }
  body.in-game .side > :nth-child(1) .panel-h { display: none; }
  body.in-game .players { gap: 6px; }
  body.in-game .pcard {
    padding: 5px 8px; display: flex; align-items: center;
    justify-content: center; gap: 8px; border-width: 2px;
  }
  body.in-game .pcard-name { font-size: 8.5px; margin-bottom: 0; }
  body.in-game .pcard-score { font-size: 14px; }
  body.in-game .pcard-sub { display: none; }

  body.in-game .instr-list li { font-size: 13.5px; padding: 8px 10px; }
  body.in-game .audio-row { margin-top: 8px; }
  body.in-game .mini-btn { padding: 9px 8px; font-size: 11.5px; min-width: 96px; }
  body.in-game .btn { padding: 12px 18px; font-size: 15px; }
  body.in-game .btn.is-wide + .btn.is-wide { margin-top: 6px !important; }

  /* Directions: 4 across, then a full-width ARRIVE — two rows, no more */
  body.in-game .controls { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  body.in-game .ctrl { padding: 9px 3px; gap: 3px; }
  body.in-game .ctrl.go { grid-column: auto; }
  body.in-game .ctrl.arrive { grid-column: 1 / -1; }
  body.in-game .ctrl .c-ico { font-size: 18px; }
  body.in-game .ctrl .c-lab { font-size: 7.5px; }
  body.in-game .kbd-hint { display: none; }

  /* One scrollable row of cards instead of a wrapping block */
  body.in-game .tray, body.in-game .palette { max-height: 96px; padding: 8px; }
  body.in-game .tray-items, body.in-game .acts, body.in-game .cards {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    min-width: 0; min-height: 0; padding-bottom: 4px; scrollbar-width: thin;
  }
  body.in-game .titem, body.in-game .act, body.in-game .card { flex: 0 0 auto; }
  body.in-game .card { width: 104px; min-height: 74px; }
  body.in-game .tray-h, body.in-game .palette-h { font-size: 7.5px; margin-bottom: 7px; }

  /* Everyone on stage has to be visible at once — a student should never
     scroll the scene to find the person the sentence is about. */
  body.in-game .scene {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px; padding: 12px 10px;
  }
  body.in-game .actor { padding: 8px 5px; gap: 4px; }
  body.in-game .actor .a-person { font-size: 26px; }
  body.in-game .actor .a-label { font-size: 10.5px; }
  body.in-game .actor .a-doing { min-height: 34px; }
  body.in-game .actor .a-doing .d-ico { font-size: 15px; }
  body.in-game .actor .a-doing .d-txt { font-size: 8.5px; }

  /* Same for the timeline: the whole story fits without scrolling */
  body.in-game .timeline {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 7px; padding: 10px 8px;
  }
  body.in-game .tl-slot { min-height: 84px; padding: 6px 4px; gap: 3px; }
  body.in-game .tl-slot .ev-ico { font-size: 22px; }
  body.in-game .tl-slot .ev-txt { font-size: 9.5px; }
  body.in-game .tl-num { font-size: 8px; top: 4px; left: 5px; }
}

/* ── phone landscape: very little height, plenty of width ────────── */
@media (max-height: 500px) and (orientation: landscape) {
  body.in-game .game-area.is-shown {
    grid-template-columns: minmax(0, 1fr) clamp(240px, 34vw, 340px);
    grid-template-rows: minmax(0, 1fr);
  }
  body.in-game .side { max-height: none; }
  body.in-game .statbar { padding: 5px 10px; }
  body.in-game .topbar { padding: 4px 10px; }
  body.in-game .topbar .game-title span,
  body.in-game .topbar .mode-pill { display: none; }

  /* One row of five: in landscape height is the scarce thing, and a
     second row of controls is what pushes the action button off. */
  body.in-game .controls { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  body.in-game .ctrl.go,
  body.in-game .ctrl.arrive { grid-column: auto; }
  body.in-game .ctrl { padding: 7px 2px; }
  body.in-game .ctrl .c-ico { font-size: 15px; }
  body.in-game .ctrl .c-lab { font-size: 6.5px; }
  body.in-game .side > :nth-child(1) { padding: 4px 6px; }
  body.in-game .side .panel, body.in-game .side .instr { padding: 8px 10px; }
}

/* ── classroom board: scale everything up for distance + touch ───── */
@media (min-width: 1600px) and (min-height: 900px) {
  body.in-game { font-size: 18px; }
  body.in-game .stat { font-size: 12px; }
  body.in-game .stat b { font-size: 19px; }
  body.in-game .instr-list li { font-size: 19px; padding: 14px 16px; }
  body.in-game .panel-h, body.in-game .instr-h { font-size: 12px; }
  body.in-game .btn { font-size: 20px; padding: 20px 30px; }
  body.in-game .mini-btn { font-size: 15px; padding: 15px 12px; }
  body.in-game .ctrl { padding: 22px 8px; min-height: 96px; }
  body.in-game .ctrl .c-ico { font-size: 32px; }
  body.in-game .ctrl .c-lab { font-size: 11px; }
  body.in-game .pcard-score { font-size: 28px; }
  body.in-game .titem, body.in-game .act, body.in-game .card { min-height: 96px; }
  body.in-game .game-area.is-shown { grid-template-columns: minmax(0, 1fr) clamp(360px, 22vw, 480px); }
}
@media (min-width: 2400px) { body.in-game { font-size: 22px; } }

/* Laptop-height windows: the control pad gives way, the instruction stays. */
@media (min-width: 1024px) and (max-height: 900px) {
  body.in-game .ctrl { padding: 12px 6px; gap: 4px; }
  body.in-game .ctrl .c-ico { font-size: 20px; }
  body.in-game .ctrl .c-lab { font-size: 8px; }
  body.in-game .kbd-hint { font-size: 10px; margin-top: 6px; }
  body.in-game .side .panel { padding: 12px 14px; }
}

/* Touch targets never drop below the comfortable minimum */
@media (pointer: coarse) {
  body.in-game .ctrl, body.in-game .titem, body.in-game .act,
  body.in-game .card, body.in-game .mini-btn { min-height: 48px; }
  body.in-game .slot { min-width: 42px; min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  body.in-game * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
