/* ==========================================================================
   Game shell — the chrome every activity shares.
   ========================================================================== */

body.playing {
  overflow: hidden;
  background-image: none;
  background: var(--bg-deep);
}

/* Flex, not grid: a game without a timer hides .game-timebar entirely, and
   with fixed grid rows the stage then fell into an `auto` row and collapsed. */
.game-shell {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
  background-image:
    radial-gradient(1000px 560px at 50% -10%, color-mix(in srgb, var(--game-color, var(--lapis)) 14%, transparent), transparent 62%);
}

/* ---------------- HUD ---------------- */

.game-hud {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem max(.75rem, env(safe-area-inset-left)) .5rem .5rem;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--border-soft);
  min-height: 56px; flex: none;
}
.game-title {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.game-stats {
  display: flex; align-items: center; gap: .55rem; margin-left: auto;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  flex-wrap: nowrap; overflow: hidden;
}
.game-score b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.game-combo {
  color: var(--coral); font-weight: 800;
  animation: combo-pop .3s cubic-bezier(.2,.9,.3,1.6);
}
@keyframes combo-pop { from { transform: scale(1.5); } }
.game-lives { letter-spacing: -2px; font-size: .9rem; }
.game-round { color: var(--ink-2); font-size: .88rem; font-variant-numeric: tabular-nums; }

.game-timebar { height: 6px; background: var(--surface-3); flex: none; }
.game-timebar > i { display: block; height: 100%; width: 100%; background: var(--game-color, var(--lapis)); transition: width .12s linear, background .4s; }

/* A fullscreened shell is its own top-layer box; inside an embed it is
   `position:absolute` against the article, which must not follow it there. */
.game-shell:fullscreen { position: fixed; inset: 0; width: 100%; height: 100%; }

/* ---------------- stage ---------------- */

.game-stage {
  position: relative; overflow: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* `safe` keeps tall content from being clipped past the top edge when it
     overflows a centered flex container */
  align-items: safe center; justify-content: safe center;
  padding: 1rem; gap: 1rem;
  flex: 1; min-height: 0;
}
.game-canvas-wrap { flex: 1; width: 100%; display: grid; place-items: center; min-height: 0; }

/* ---------------- square boards that must fit the stage ----------------
   Sizing a board in `vh` is guesswork: the viewport also holds the HUD, the
   hint bar and whatever controls share the column, so each game ended up
   picking its own magic constant (46vh, 62vh, 68vh…) and each one broke at a
   different screen size. Instead `.fit-box` claims the leftover space and
   becomes a size container; the board measures *that box* in `cq` units, so it
   is right at every size and there is no constant left to tune.
   Boards are square by construction (equal grid gap and padding), so a single
   width driven by the smaller of the two axes fits both. */
.stage-fill { display: flex; flex-direction: column; align-items: center; flex: 1 1 auto; min-height: 0; width: 100%; }
.fit-box {
  flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%;
  display: grid; place-items: center;
  container-type: size;
}
/* `--fit-min` is a floor, not a suggestion: a board that fits perfectly but is
   too small to read is no use to a child. If the floor cannot fit, the stage
   scrolls — one scrollbar, in one place, which is the acceptable failure. */
.fit-square { width: clamp(var(--fit-min, 0px), min(100cqw, 100cqh), var(--fit-max, 560px)); }

/* Boards that are not square pass their own width/height ratio as `--ar`. */
.fit-rect { width: clamp(var(--fit-min, 0px), min(100cqw, calc(100cqh * var(--ar, 1))), var(--fit-max, 560px)); }

/* Pre-2023 browsers: fall back to the old viewport guess rather than no cap. */
@supports not (container-type: size) {
  .fit-square { width: clamp(var(--fit-min, 0px), min(88vw, 52vh), var(--fit-max, 560px)); }
  .fit-rect { width: clamp(var(--fit-min, 0px), min(88vw, calc(52vh * var(--ar, 1))), var(--fit-max, 560px)); }
}
.game-canvas-wrap canvas { border-radius: var(--r-lg); box-shadow: var(--shadow-2); touch-action: none; background: var(--surface); }

.game-hint {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: var(--ink-2); background: var(--surface-2);
  border: 1.5px solid var(--border-soft); border-radius: var(--r-full);
  padding: .4rem 1rem; text-align: center;
}

/* ---------------- question board ---------------- */

.qboard {
  width: min(760px, 100%); display: flex; flex-direction: column;
  align-items: center; gap: 1.5rem;
}
.qprompt {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 8vw, 4.4rem); line-height: 1.1; text-align: center;
  letter-spacing: -.02em;
  animation: q-in .32s cubic-bezier(.2,.9,.3,1.3);
}
.qprompt.small { font-size: clamp(1.3rem, 3.6vw, 2rem); font-weight: 700; line-height: 1.3; }
.qprompt.words { font-size: clamp(1.6rem, 5vw, 2.6rem); }
@keyframes q-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } }

.qchoices { display: grid; gap: .75rem; width: 100%; }
.qchoice {
  font: inherit; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.2rem, 3.4vw, 1.8rem);
  min-height: 76px; padding: .8rem 1rem;
  border-radius: var(--r-lg); border: 2.5px solid var(--border);
  background: var(--surface); color: var(--ink); cursor: pointer;
  box-shadow: var(--shadow-1);
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  transition: transform .14s cubic-bezier(.2,.9,.3,1.4), box-shadow .14s, border-color .14s, background .14s;
  animation: q-in .3s backwards cubic-bezier(.2,.9,.3,1.3);
  word-break: break-word;
}
.qchoice:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--game-color, var(--lapis)); box-shadow: var(--shadow-2); }
.qchoice:active:not(:disabled) { transform: translateY(0) scale(.97); }
.qchoice:disabled { cursor: default; }
.qchoice.is-right {
  background: var(--ok-soft); border-color: var(--ok); color: var(--ok);
  animation: pulse-ok .42s;
}
.qchoice.is-wrong {
  background: var(--bad-soft); border-color: var(--bad); color: var(--bad);
  animation: shake .4s;
}
@keyframes pulse-ok { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes shake { 10%,90% { transform: translateX(-3px); } 30%,70% { transform: translateX(5px); } 50% { transform: translateX(-6px); } }

/* number pad for typed numeric answers */
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; width: min(320px, 100%); }
.numpad button {
  font: inherit; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  min-height: 62px; border-radius: var(--r); border: 2px solid var(--border);
  background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-1);
  transition: transform .1s, background .1s;
}
.numpad button:active { transform: scale(.94); background: var(--surface-3); }
.numpad button.wide { grid-column: span 2; }

.answer-slot {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 6vw, 3rem);
  min-width: 3.5ch; min-height: 68px; padding: .2rem 1rem;
  border-radius: var(--r); border: 3px dashed var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); font-variant-numeric: tabular-nums;
}
.answer-slot.filled { border-style: solid; border-color: var(--game-color, var(--lapis)); }

/* ---------------- overlay (pause / summary) ---------------- */

.game-overlay {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center; padding: 1rem;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(8px);
  animation: fade-in .22s;
}
@keyframes fade-in { from { opacity: 0; } }

.game-card {
  width: min(480px, 100%); background: var(--surface);
  border: 1.5px solid var(--border); border-radius: var(--r-xl);
  padding: 1.75rem; box-shadow: var(--shadow-3); text-align: center;
  animation: card-in .32s cubic-bezier(.2,.9,.3,1.35);
  max-height: 92vh; overflow: auto;
}
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.95); } }
.game-card h2 { margin-bottom: .35rem; }

.game-stars { font-size: 2.6rem; line-height: 1; color: var(--gold); margin-bottom: .35rem; letter-spacing: .1em; }
.game-stars span { color: var(--border); display: inline-block; }
.game-stars span.on { color: var(--gold); animation: star-pop .5s backwards cubic-bezier(.2,.9,.3,1.7); }
@keyframes star-pop { from { opacity: 0; transform: scale(0) rotate(-90deg); } }

.game-badges { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.game-badges .badge-item { min-width: 92px; animation: card-in .4s backwards; border-color: var(--gold); background: var(--gold-soft); }

/* ---------------- start screen ---------------- */

.start-wrap { position: fixed; inset: 0; overflow: auto; display: grid; place-items: center; padding: 1.5rem 1rem 3rem; }
.start-card {
  width: min(520px, 100%); background: var(--surface);
  border: 1.5px solid var(--border-soft); border-radius: var(--r-xl);
  padding: 1.6rem; box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; gap: .9rem;
  animation: card-in .35s cubic-bezier(.2,.9,.3,1.3);
}
.start-card h1 { text-align: center; margin: 0; font-size: 1.9rem; }
.start-hero {
  height: 120px; border-radius: var(--r-lg); display: grid; place-items: center; font-size: 60px;
  background:
    radial-gradient(120% 120% at 30% 15%, color-mix(in srgb, var(--tile-color) 32%, transparent), transparent 65%),
    linear-gradient(160deg, color-mix(in srgb, var(--tile-color) 18%, var(--surface-2)), var(--surface-2));
  border: 1.5px solid var(--border-soft);
}
.start-hero span { filter: drop-shadow(0 4px 8px rgba(0,0,0,.2)); animation: bob 3.5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-7px); } }

.pickgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; }
.pickbtn {
  font: inherit; font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  min-height: 62px; padding: .5rem;
  border-radius: var(--r); border: 2px solid var(--border); background: var(--surface);
  color: var(--ink); cursor: pointer; transition: all .15s;
}
.pickbtn:hover { border-color: var(--lapis); }
.pickbtn[aria-pressed='true'] { background: var(--lapis); border-color: var(--lapis-deep); color: #fff; }
.pickbtn[aria-pressed='true'] small { color: rgba(255,255,255,.8); }
.pickbtn-ico { font-size: 22px; }

.howto { border: 1.5px solid var(--border-soft); border-radius: var(--r); padding: .5rem .9rem; background: var(--surface-2); }
.howto summary { font-family: var(--font-display); font-weight: 700; cursor: pointer; }
.howto ul { margin: .6rem 0 .2rem; padding-left: 1.2rem; font-size: .92rem; color: var(--ink-2); }
.howto li { margin-bottom: .3rem; }

/* ---------------- shared game widgets ---------------- */

/* draggable tiles (word builder, sorting, tangram trays) */
.tile-piece {
  font-family: var(--font-display); font-weight: 800;
  display: inline-grid; place-items: center;
  min-width: 58px; min-height: 68px; padding: .3rem .6rem;
  font-size: 2rem; border-radius: var(--r);
  background: var(--surface); border: 2.5px solid var(--border);
  box-shadow: var(--shadow-1); cursor: grab; user-select: none;
  transition: transform .14s, box-shadow .14s, border-color .14s;
  touch-action: none;
}
.tile-piece:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.tile-piece.dragging { opacity: .5; cursor: grabbing; }
.tile-piece.locked { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); cursor: default; }

.slot-row { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.drop-slot {
  min-width: 58px; min-height: 68px; border-radius: var(--r);
  border: 3px dashed var(--border); background: var(--surface-2);
  display: grid; place-items: center; transition: all .15s;
}
.drop-slot.over { border-color: var(--game-color, var(--lapis)); background: var(--lapis-soft); transform: scale(1.06); }
.drop-slot.filled { border-style: solid; }

/* bins for sorting games */
.bin-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; width: 100%; }
.bin {
  min-height: 130px; border-radius: var(--r-lg); border: 3px dashed var(--border);
  background: var(--surface-2); padding: .6rem; display: flex; flex-direction: column; gap: .35rem;
  transition: all .15s;
}
.bin.over { border-color: var(--game-color); background: var(--lapis-soft); }
.bin-label { font-family: var(--font-display); font-weight: 800; font-size: .95rem; text-align: center; }
.bin-items { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }

/* keyboard on screen */
.kbd-row { display: flex; gap: 4px; justify-content: center; }
.kbd-key {
  flex: 1 1 0; min-width: 0; max-width: 62px; aspect-ratio: 1 / .92;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(.7rem, 1.8vw, 1rem);
  border-radius: 9px; background: var(--surface-2); border: 1.5px solid var(--border);
  color: var(--ink-2); transition: all .1s; user-select: none;
}
.kbd-key.next { background: var(--game-color, var(--lapis)); border-color: var(--game-color); color: #fff; transform: translateY(-2px) scale(1.06); box-shadow: var(--shadow-2); }
.kbd-key.down { background: var(--surface-3); transform: translateY(2px); }
.kbd-key.home { border-bottom-width: 4px; border-bottom-color: var(--gold); }
.kbd-key.wide { flex: 2 1 0; max-width: 130px; }
.kbd-key.xwide { flex: 6 1 0; max-width: 340px; }

@media (max-width: 720px) {
  .game-title span:last-child { display: none; }
  .qchoice { min-height: 62px; }
  .game-stage { padding: .6rem; }
  .game-card { padding: 1.25rem; }
}
/* Short screens — laptops, Chromebooks, anything in landscape.
   The chrome (HUD, hint, controls, buttons) is a fixed ~335px whatever the
   screen height, so on a 540px laptop the board was left with under a third
   of the column and in landscape there was nothing left at all. Give the
   space back to the board, which is the part children actually play on. */
@media (max-height: 640px) {
  .qprompt { font-size: clamp(1.8rem, 6vw, 2.6rem); }
  .qchoice { min-height: 54px; font-size: 1.1rem; }
  .qboard { gap: .9rem; }
  .game-hud { min-height: 46px; padding-top: .3rem; padding-bottom: .3rem; }
  .game-stage { padding: .5rem; gap: .5rem; }
  /* the hint is a one-off instruction, not state — first to go */
  .game-hint { display: none; }
  .numpad button { min-height: 46px; font-size: 1.2rem; }
  .answer-slot { min-height: 48px; font-size: clamp(1.4rem, 4vw, 2rem); }
}

@media (max-height: 430px) {
  .game-hud { min-height: 38px; }
  .game-title { font-size: .95rem; }
  .game-stage { padding: .3rem; gap: .3rem; }
  .numpad button { min-height: 38px; font-size: 1.05rem; }
}

/* A phone held sideways leaves roughly 320px of height. Even with the chrome
   fully compressed a grid board lands around 80px, i.e. 7px cells — it
   technically fits and is still unplayable. Ask for the turn instead of
   pretending. Purely CSS, so it clears itself the moment the phone rotates. */
.rotate-nudge { display: none; }
@media (orientation: landscape) and (max-height: 430px) and (pointer: coarse) {
  .rotate-nudge {
    position: fixed; inset: 0; z-index: 90;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; padding: 1.5rem; text-align: center;
    background: var(--bg); color: var(--ink);
  }
  .rotate-nudge .rotate-icon { font-size: 2.6rem; animation: rotate-tip 2.2s ease-in-out infinite; }
  .rotate-nudge b { font-family: var(--font-display); font-size: 1.15rem; }
  .rotate-nudge span { color: var(--ink-2); font-size: .95rem; }
}
@keyframes rotate-tip { 0%, 60%, 100% { transform: rotate(0); } 30% { transform: rotate(-90deg); } }