/* app.css
 *
 * The game itself is drawn on a full-screen canvas. Everything here styles the
 * thin HTML overlay. The old black top bar is gone: its controls now float over
 * the game as transparent, thin-bordered, icon-only buttons in the corners, with
 * "Crooked"-style level navigation (edge chevrons) and a "Level N" readout in
 * the top-left corner.
 */

#game-canvas-el {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* The game's ink colour (matches the tutorial ring / dashed arc), for chrome
   that floats over the light outdoor scene. */
:root {
  --ink: #2f2922;
  --ink-line: rgba(47, 41, 34, 0.45);
  --brand-teal: #45beb9;
  --brand-yellow: #fbd86e;
  --brand-plum: #7f546e;
  /* The mathboard's gap to the bottom edge, and its live height — published by
     mathwindow.js (0 while the board is slid away) so the win banner can sit
     clear above it. */
  --mathboard-bottom: 44px;
  --mathboard-h: 0px;
  /* The one width of the win's Explain and Next buttons (and the full board's
     Next, which stands in for the banner while the board is up). */
  --win-btn-w: clamp(90px, 22vw, 116px);
  /* Chalkboard material, shared by the small mathboard and the full board: a
     wooden frame around a dark slate, written in chalk. */
  --wood: #7a4a24;
  --slate: #2f3a33;
  --chalk: #f3f0e6;
  --chalk-dim: rgba(243, 240, 230, 0.66);
  --chalk-font: "Chalkboard SE", "Chalkboard", "ui-rounded", "SF Pro Rounded",
    "Nunito", system-ui, sans-serif;
  --math-font: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* The full board's handwritten chalk face: Patrick Hand (SIL OFL 1.1), vendored
   as a Latin subset under vendor/fonts/ so it works offline (no CDN). One
   weight only, so the board's text sets font-synthesis: none rather than let
   the browser smear a fake bold. Its × and ÷ are small, faint marks (a `× c`
   step read as `x c`, with x the unknown), so unicode-range leaves those two
   to the next face in the stack, which draws them full size. */
@font-face {
  font-family: "Patrick Hand";
  src: url("vendor/fonts/patrick-hand/PatrickHand-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-00D6, U+00D8-00F6, U+00F8-00FF, U+2010-2014,
    U+2018-201D, U+2026, U+2212;
}

/* ── Floating corner chrome ──────────────────────────────────────────────── */

.corner {
  position: fixed;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 8px;
}

.corner-tl {
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
}

.corner-tr {
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
}

/* Transparent background, a thin visible border, icon only. */
.chrome-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease,
    border-color 0.12s ease, opacity 0.12s ease;
}

.chrome-btn:hover {
  background: rgba(47, 41, 34, 0.08);
}

.chrome-btn:active {
  transform: scale(0.94);
}

.chrome-btn.active {
  border-color: var(--ink);
}

/* Top-left readout: the level group's technique descriptor (the hero line) with
   a small, dim "Level N" beneath it for navigation. Matched to the floating ink
   chrome. */
.level-readout {
  padding: 6px 4px;
  pointer-events: none;
}

.level-label {
  font-family: "ui-rounded", "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--ink);
  line-height: 1.05;
  white-space: nowrap;
}

.level-number {
  font-family: "ui-rounded", "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--ink);
  opacity: 0.5;
  line-height: 1;
  margin-top: 3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.chrome-btn-icon {
  font-size: 20px;
  line-height: 1;
}

/* A drawn icon (restart): a fixed size, since the button sets no font size. */
.chrome-btn-svg {
  flex: none;
  width: 22px;
  height: 22px;
}

/* The mathboard toggle floats at the bottom-right, above the build badge. */
.mathboard-toggle {
  position: fixed;
  z-index: 13;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
}

/* ── Moves remaining (top-right, beside reset): count + pips, faithful to
   LimitMoves ─────────────────────────────────────────────────────────────── */

/* A readout, not a button: unbordered ink text sat in the top-right cluster,
   as tall as the reset button so the two line up. */
.moves {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 4px;
  font-family: "ui-rounded", "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  color: var(--ink);
  pointer-events: none;
}

.moves-count {
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.moves-pips {
  display: flex;
  gap: 4px;
}

.moves-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}

.moves-pip.spent {
  opacity: 0.25;
}

.moves--fail .moves-count {
  color: #b4402f;
}

.moves-check {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: #2f8f5b;
}

/* ── "Crooked"-style level navigation ────────────────────────────────────── */

/* Wide, low-opacity chevrons pinned to the screen edges at the vertical middle:
   decoration that invites, not a loud button. */
.edge-chevron {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 10px;
  border: none;
  background: transparent;
  color: var(--ink);
  opacity: 0.28;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.edge-chevron:hover {
  opacity: 0.6;
}

.edge-chevron:active {
  transform: translateY(-50%) scale(0.92);
}

.edge-chevron-left {
  left: max(6px, env(safe-area-inset-left));
}

.edge-chevron-right {
  right: max(6px, env(safe-area-inset-right));
}

.edge-chevron-glyph {
  font-size: clamp(48px, 8vw, 84px);
  font-weight: 200;
  line-height: 0.7;
}

/* ── Student picker (top-left, minimal) ──────────────────────────────────── */

.players .select-player {
  max-width: 40vw;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.players .select-player option {
  color: #14102a;
}

/* Inside Game Lab's frame, while one of its cards holds the game (app.js
   setPaused): no tap or drag reaches the canvas or a button underneath, not
   even the buttons that take pointer events back (pointer-events: auto). */
body.gl-paused,
body.gl-paused * {
  pointer-events: none !important;
}

/* ── CBSE explanatory layer (per-move note, technique card) ────────────────── */

/* The per-move note: one calm line, appearing near the top of the board and
   fading itself out. Never intercepts taps, so it can't block play. */
.move-note {
  position: fixed;
  top: calc(96px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  max-width: min(92vw, 620px);
  padding: 8px 16px;
  border-radius: 12px;
  background: rgba(20, 16, 42, 0.9);
  border: 1px solid rgba(255, 233, 168, 0.4);
  color: #f6f0dc;
  font-size: clamp(12px, 2.7vw, 16px);
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  animation: note-in 0.2s ease-out;
}

@keyframes note-in {
  from {
    opacity: 0;
    transform: translate(-50%, -6px);
  }
}

/* The new-technique card: a dismissible overlay in the game's dark style, below
   the intro video but above everything else. */
.technique-card {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 8, 24, 0.55);
}

.technique-card-inner {
  max-width: min(90vw, 460px);
  padding: 22px 24px 20px;
  border-radius: 16px;
  background: rgba(20, 16, 42, 0.98);
  border: 1px solid rgba(255, 233, 168, 0.35);
  color: #f3eeff;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  animation: board-rise 0.25s ease-out;
}

.technique-card-title {
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 700;
  color: #ffe9a8;
  margin-bottom: 10px;
}

.technique-card-body {
  font-size: clamp(13px, 3.2vw, 16px);
  line-height: 1.5;
  color: rgba(243, 238, 255, 0.92);
}

.technique-card-dismiss {
  display: block;
  margin: 18px auto 0;
  padding: 10px 24px;
  font: inherit;
  font-weight: 700;
  color: #14102a;
  background: #ffe9a8;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}

.technique-card-dismiss:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

/* ── Chalkboard material ─────────────────────────────────────────────────── */

/* The wooden frame: a warm brown with a faint horizontal grain and a bevel,
   its bottom rail a touch deeper, like the chalk ledge. */
.chalkboard {
  padding: 7px 7px 10px;
  border-radius: 10px;
  background:
    linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0) 35%,
    rgba(0, 0, 0, 0.2)
  ),
    repeating-linear-gradient(
    178deg,
    rgba(0, 0, 0, 0) 0 5px,
    rgba(0, 0, 0, 0.09) 5px 6px,
    rgba(0, 0, 0, 0) 6px 12px,
    rgba(255, 255, 255, 0.06) 12px 13px
  ),
    var(--wood);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.28);
}

/* The slate: a chalkboard texture image (dark matte slate, a faint haze),
   written in chalk. The same texture on the small mathboard, the opened full
   board and the win board, with the flat slate colour while it loads. */
.chalkboard-slate {
  border-radius: 4px;
  background: var(--slate) url("assets/chalkboard-texture.jpg") center / cover
    no-repeat;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  color: var(--chalk);
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.4),
    0 0 8px rgba(255, 255, 255, 0.08);
}

/* ── Math-window chalkboard ──────────────────────────────────────────────── */

/* Sits centred near the bottom, showing only the current step. Toggling it
   adds/removes .mathboard--hidden, which slides it below the edge — the CSS
   analogue of the C# speedOfMathBoard MoveTowards (an eased translate). */
.mathboard {
  position: fixed;
  left: 50%;
  bottom: var(--mathboard-bottom);
  transform: translateX(-50%) translateY(0);
  z-index: 11;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.mathboard-slate {
  padding: 12px 28px;
  font-family: var(--math-font);
  font-size: clamp(18px, 4vw, 30px);
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
}

.mathboard--hidden {
  transform: translateX(-50%) translateY(160%);
  opacity: 0;
  pointer-events: none;
}

/* While the full board is up, the small one fades out under it rather than
   peeking out below with a second copy of the equation. */
.fullboard-open .mathboard {
  opacity: 0;
  pointer-events: none;
}

/* The ↗ "open the full board" badge, pinned to the frame's top-right corner so
   it never crowds the equation. A wider invisible hit area keeps it tappable. */
.chalk-expand {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--chalk);
  background: var(--wood);
  color: var(--chalk);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease;
}

.chalk-expand::before {
  content: "";
  position: absolute;
  inset: -7px;
}

.chalk-expand:hover {
  transform: scale(1.08);
}

.chalk-expand:active {
  transform: scale(0.92);
}

@keyframes board-rise {
  from {
    transform: translate(-50%, 40px);
    opacity: 0;
  }
}

/* Typeset equation inside the chalkboard: stacked fractions, brackets, · . */
.mw-eqn {
  display: inline-flex;
  align-items: center;
  letter-spacing: 0;
}

.mw-rel {
  margin: 0 0.45em;
}

.mw-op {
  margin: 0 0.28em;
}

.mw-op.mw-dot {
  margin: 0 0.16em;
}

.mw-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  margin: 0 0.12em;
}

.mw-num {
  padding: 0 0.4em 0.06em;
  border-bottom: 0.07em solid currentColor;
}

.mw-den {
  padding: 0.08em 0.4em 0;
}

.mw-paren {
  padding: 0 0.03em;
}

.mw-exp {
  font-size: 0.7em;
  align-self: flex-start;
}

/* ── Full chalkboard (every step, read only) ─────────────────────────────── */

/* A light scrim, so the win celebration (confetti, digger, the sleeping x)
   stays visible around the board. Above the corner chrome and the win banner,
   below the technique card and the intro. */
.fullboard {
  /* The opened board writes in the handwritten chalk face, equations too (the
     small everyday mathboard keeps its plain faces). */
  --board-font: "Patrick Hand", "Chalkboard SE", "Chalkboard", "ui-rounded",
    system-ui, sans-serif;
  --chalk-font: var(--board-font);
  --math-font: var(--board-font);
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px
    max(12px, env(safe-area-inset-bottom));
  background: rgba(24, 16, 8, 0.34);
  animation: fb-fade 0.2s ease-out;
}

.fullboard-board {
  display: flex;
  width: min(100%, 720px);
  max-height: 100%;
  animation: fb-rise 0.28s ease-out;
}

/* The wooden frame is the shared .chalkboard, the textured slate the shared
   .chalkboard-slate. */
.fullboard-slate {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 18px 18px;
  font-synthesis: none;
}

.fullboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fullboard-title {
  margin: 0;
  font-family: var(--chalk-font);
  font-size: clamp(23px, 5.4vw, 34px);
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.fullboard-close {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--chalk-dim);
  border-radius: 50%;
  background: transparent;
  color: var(--chalk);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.fullboard-close:hover {
  background: rgba(243, 240, 230, 0.1);
}

/* The steps, top to bottom, scrolling when a solution runs tall. */
.fullboard-steps {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 10px 0 0;
  padding: 6px 6px 10px;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--math-font);
  font-size: clamp(22px, 4.6vw, 34px);
  font-weight: 400;
  letter-spacing: 1px;
  /* The page itself is touch-action: none, so let this list scroll by touch. */
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.fb-step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The operation between two steps (↓ ÷ a): smaller, dimmer chalk. */
.fb-op {
  margin: 6px 0 6px;
  font-family: var(--chalk-font);
  font-size: clamp(17px, 3.4vw, 22px);
  font-weight: 400;
  color: var(--chalk-dim);
  white-space: nowrap;
}

.fb-arrow {
  margin-right: 0.2em;
}

.fb-eq {
  padding: 4px 16px;
  white-space: nowrap;
}

/* The final x = ... on a solved board, boxed in chalk. */
.fb-step--answer .fb-eq {
  margin-top: 2px;
  padding: 6px 18px;
  border: 3px solid var(--chalk);
  border-radius: 12px 7px 13px 8px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.12);
}

.fullboard-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.fb-btn {
  padding: 10px 22px;
  font-size: clamp(15px, 3.6vw, 19px);
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
}

.fb-btn--quiet {
  border: 2px solid var(--chalk-dim);
  background: transparent;
  color: var(--chalk);
}

/* A button label with an inline-SVG icon beside it (Replay, Try again): the
   icon is drawn, not a text glyph like the old ↺, so it shows whatever fonts
   the tablet has. */
.with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
}

.btn-icon {
  flex: none;
  width: 1.2em;
  height: 1.2em;
}

/* Next on the board: the banner's Next while the board is up, so the same
   fixed width (--win-btn-w), never stretched. */
.fb-btn--go {
  width: var(--win-btn-w);
  padding-inline: 0;
  white-space: nowrap;
  border: none;
  background: #ffe9a8;
  color: #14102a;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
}

.fb-btn--go:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

/* Win: the steps write on one by one in chalk (a left-to-right wipe), the
   operation first, then its equation. --i is the line's index (set inline by
   fullboard.js), so Replay is just a re-render. The answer's box is drawn
   last. */
.fullboard--win .fb-op {
  animation: chalk-fade 0.3s ease-out both;
  animation-delay: calc(var(--i) * 0.75s + 0.15s);
}

.fullboard--win .fb-eq {
  animation: chalk-write 0.55s ease-in-out both;
  animation-delay: calc(var(--i) * 0.75s + 0.35s);
}

.fullboard--win .fb-step--answer .fb-eq {
  animation: chalk-write 0.55s ease-in-out both,
    chalk-box 0.4s ease-out both;
  animation-delay: calc(var(--i) * 0.75s + 0.35s),
    calc(var(--i) * 0.75s + 0.9s);
}

@keyframes chalk-write {
  from {
    clip-path: inset(-30% 100% -30% 0);
    opacity: 0.35;
  }
  to {
    clip-path: inset(-30% 0 -30% 0);
    opacity: 1;
  }
}

@keyframes chalk-fade {
  from {
    opacity: 0;
  }
}

@keyframes chalk-box {
  from {
    border-color: transparent;
    box-shadow: none;
  }
}

@keyframes fb-fade {
  from {
    opacity: 0;
  }
}

@keyframes fb-rise {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
}

/* Short screens (a phone on its side): tighten the chrome around the steps so
   more of the working fits before it has to scroll. */
@media (max-height: 520px) {
  .fullboard-slate {
    padding: 8px 14px 10px;
  }

  .fullboard-title {
    font-size: 21px;
  }

  .fullboard-close {
    width: 34px;
    height: 34px;
    font-size: 22px;
  }

  .fullboard-steps {
    margin-top: 2px;
    padding: 2px 6px 4px;
    font-size: 20px;
  }

  .fb-op {
    margin: 2px 0;
    font-size: 15px;
  }

  .fullboard-actions {
    margin-top: 8px;
  }

  .fb-btn {
    padding: 7px 18px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fullboard,
  .fullboard-board,
  .fullboard--win .fb-op,
  .fullboard--win .fb-eq,
  .fullboard--win .fb-step--answer .fb-eq {
    animation: none;
  }
}

/* ── Win banner ──────────────────────────────────────────────────────────── */

/* Stacked ABOVE the mathboard with a clear gap (the board's height varies with
   the equation — a stacked fraction is two lines tall), never over its top edge.
   The gap tightens on short screens so Next stays clear of the characters too.
   With the board hidden, or on a tall screen, it keeps its 12% spot. */
.win-banner {
  position: fixed;
  left: 50%;
  bottom: max(
    12%,
    calc(
      var(--mathboard-bottom) + var(--mathboard-h) + clamp(12px, 3vh, 22px)
    )
  );
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}

.win-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Both win buttons share one size: the same font size, line height,
   vertical padding and border width, so Next lines up with Explain, and one
   fixed width (--win-btn-w), so Next is exactly as wide as Explain. */
.win-explain,
.win-next {
  pointer-events: auto;
  width: var(--win-btn-w);
  padding-block: 9px;
  padding-inline: 0;
  white-space: nowrap;
  font-size: clamp(14px, 3.4vw, 18px);
  font-weight: 700;
  line-height: 1.2;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
}

.win-explain:active,
.win-next:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22);
}

/* Explain: the quiet one, a small slate chip in the chalkboard's colours. */
.win-explain {
  color: var(--chalk);
  background: var(--slate);
  border-color: var(--wood);
}

/* Next: the way forward, the same size as Explain, set apart by its colour. */
.win-next {
  color: #14102a;
  background: #ffe9a8;
}

/* ── Out-of-moves banner ─────────────────────────────────────────────────── */

.lose-banner {
  position: fixed;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}

.lose-banner-text {
  font-size: clamp(26px, 7vw, 56px);
  font-weight: 800;
  color: #ffd7d0;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.25), 0 0 24px rgba(255, 138, 120, 0.55);
}

.lose-retry {
  pointer-events: auto;
  padding: 12px 28px;
  font-size: clamp(16px, 4vw, 22px);
  font-weight: 700;
  color: #14102a;
  background: #ffd7d0;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
}

.lose-retry:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}

/* ── Intro splash + video ────────────────────────────────────────────────── */

.intro {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #14102a;
  transition: opacity 0.4s ease;
}

.intro.fade-out {
  opacity: 0;
}

.intro-video {
  max-width: 100%;
  max-height: 100%;
}

/* The splash sits over the video's first frame, which is drawn as a full-bleed
   backdrop (the poster image) with a dark scrim gradient on top so the title and
   Play stay readable over the bright animatic scene. The NAB icon is pinned to
   the top-left corner; the mascot, wordmark and Play are centred. */
.intro-splash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(20, 16, 42, 0.62),
    rgba(20, 16, 42, 0.78)
  ),
    url("assets/intro-poster.jpg") center / cover no-repeat;
}

/* Not a Bot maker mark: the square robot-face icon, small, top-left corner. */
.splash-brand {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  width: clamp(36px, 9vw, 48px);
  height: auto;
  display: block;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
}

/* The centred stack: mascot, wordmark, Play. */
.splash-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vh, 40px);
  padding: 24px;
  text-align: center;
}

/* The little-x mascot: a small accent above the title, not the hero. */
.splash-mascot {
  width: clamp(64px, 15vw, 112px);
  height: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

/* "Equations" wordmark — PLACEHOLDER (no dedicated logo asset), typeset in
   the brand palette with a rounded display face. Swap for the real logo. */
.game-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.game-logo-word {
  font-family: "ui-rounded", "SF Pro Rounded", "Nunito", "Quicksand",
    system-ui, sans-serif;
  font-size: clamp(46px, 13vw, 112px);
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
}

.game-logo-word .gl-1 {
  color: var(--brand-teal);
}

.game-logo-word .gl-2 {
  color: var(--brand-yellow);
}

.game-logo-word .gl-3 {
  color: var(--brand-plum);
}

.intro-btn {
  border: none;
  border-radius: 999px;
  background: #ffe9a8;
  color: #14102a;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
}

.intro-play {
  padding: 16px 46px;
  font-size: clamp(20px, 5vw, 30px);
}

.intro-play:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}

.intro-skip {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 10px 22px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.85);
}

/* ── The end of the game (game/ending.js) ────────────────────────────────── */

/* From the final solve on, the level chrome steps aside: no level readout,
   moves, restart, chevrons, small board (whose full board carries a Next) or
   win banner. Only the ending is the way on. */
body.game-end .corner,
body.game-end .edge-chevron,
body.game-end .mathboard,
body.game-end .mathboard-toggle,
body.game-end .win-banner,
body.game-end .fullboard,
body.game-end .move-note {
  display: none;
}

/* Over the summit the canvas draws: the card at the top over the sky, Play
   again at the foot over the sea of cloud, little x on the peak between. */
.ending {
  position: fixed;
  inset: 0;
  z-index: 26;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: max(26px, env(safe-area-inset-top)) 18px
    max(30px, env(safe-area-inset-bottom));
  text-align: center;
  pointer-events: none;
}

.ending-card {
  max-width: min(94vw, 1000px);
  animation: ending-drop 0.6s ease-out 0.35s both;
}

/* The intro's title card, answered: the splash's rounded display face. */
.ending-title {
  font-family: "ui-rounded", "SF Pro Rounded", "Nunito", "Quicksand",
    system-ui, sans-serif;
  font-size: clamp(34px, 8.6vw, 76px);
  font-weight: 800;
  line-height: 1.05;
  text-wrap: balance;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 4px 0 var(--brand-plum), 0 8px 18px rgba(20, 16, 42, 0.35);
}

.ending-line {
  display: inline-block;
  margin-top: clamp(10px, 2vh, 16px);
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-size: clamp(16px, 4.2vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
  box-shadow: 0 4px 14px rgba(20, 16, 42, 0.12);
}

.ending-play {
  pointer-events: auto;
  padding: 16px 44px;
  font-size: clamp(20px, 5vw, 28px);
  animation: ending-rise 0.5s ease-out 1s both;
}

.ending-play:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}

@keyframes ending-drop {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ending-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Chrome over a dark scene ─────────────────────────────────────────────── */

/* Each level group has its own background (faithful/scenes.js). Where it is
   dark under the chrome, the chrome takes light ink: the top corners sit on the
   sky band (the Forest's tree line, the Night sky), the edge chevrons, board
   toggle and build badge on the grass (Night). A soft shadow keeps it legible
   where the band mixes dark trees with light sky. The student picker keeps its
   own light field and dark ink. */
body[data-sky-ink="light"] .level-readout,
body[data-sky-ink="light"] .corner-tr,
body[data-grass-ink="light"] .edge-chevron,
body[data-grass-ink="light"] .mathboard-toggle,
body[data-grass-ink="light"] .version-display {
  --ink: var(--chalk);
  --ink-line: rgba(243, 240, 230, 0.6);
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.4));
}

body[data-grass-ink="light"] .version-display {
  color: rgba(243, 240, 230, 0.6);
}

/* ── Build badge / debug ─────────────────────────────────────────────────── */

/* The date; a tap shows the commit, hover the details (Game Lab's shared
   https://notabot.ai/nb-version.js fills it; the game places and styles it).
   It takes taps, so it stays small, in the corner, under every other overlay. */
.version-display {
  position: fixed;
  bottom: 4px;
  left: 8px;
  z-index: 10;
  font-size: 11px;
  color: rgba(47, 41, 34, 0.5);
  font-variant-numeric: tabular-nums;
}

#debug-info-el {
  position: fixed;
  left: 6px;
  bottom: 22px;
  z-index: 30;
  max-width: 60vw;
  max-height: 40vh;
  overflow: auto;
  color: #7cfc00;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 8px;
  border-radius: 6px;
  white-space: pre-wrap;
}