/* game.css — Vault > Play (speed review game). Juicy Premium: gold/ink + game juice. */
/* width:100% is required for the same reason as .review-view (§213): as a flex
   child of the body (a flex column), `margin: … auto` disables align-items:stretch,
   so without an explicit width the view shrink-wraps to its content — making the
   Play hub narrower than the Review hub. Both hubs are max-width:560px, so a
   definite width makes them render at the same width. */
.game-view { width: 100%; max-width: 600px; margin: 28px auto; padding: 0 18px; text-align: center; }

/* Theme-aware game-juice colors. The mockup was tuned for dark, so the bright
   golds/pinks washed out on the light theme. Light = default below; dark is
   restored via the explicit [data-theme="dark"] toggle and the system-preference
   fallback, mirroring how design-tokens.css flips. Scoped to .game-view so every
   .game-* descendant inherits them. */
.game-view {
  --game-gold:        #9a6f1e;                                  /* readable on cream */
  --game-glow:        none;
  --game-speed-fg:    #4f57c4;
  --game-correct-bg:  linear-gradient(180deg, #fbf3dd, #f2e4be);
  --game-correct-fg:  #6b531a;
  --game-wrong-fg:    #b0322f;
}
:root[data-theme="dark"] .game-view {
  --game-gold:        #ffd76b;
  --game-glow:        0 0 12px rgba(201,168,74,.7);
  --game-speed-fg:    #a6b0ff;
  --game-correct-bg:  linear-gradient(180deg, #2a2410, #1d1908);
  --game-correct-fg:  #ffe49a;
  --game-wrong-fg:    #ffb3b3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .game-view {
    --game-gold:        #ffd76b;
    --game-glow:        0 0 12px rgba(201,168,74,.7);
    --game-speed-fg:    #a6b0ff;
    --game-correct-bg:  linear-gradient(180deg, #2a2410, #1d1908);
    --game-correct-fg:  #ffe49a;
    --game-wrong-fg:    #ffb3b3;
  }
}

/* background-music speaker toggle (mirrors .canvas-sound), right-aligned above the cards */
.game-toolbar { display: flex; justify-content: flex-end; max-width: 560px; margin: 0 auto 8px; }
.game-sound { width: 34px; height: 34px; padding: 0; border: 1px solid var(--vb-border, #E5DDD0);
  border-radius: 8px; background: var(--vb-surface, #fff); color: var(--vb-text-primary, #1A1F2E);
  cursor: pointer; font-size: 16px; line-height: 1; }
.game-sound:hover { background: var(--vb-bg-tint, rgba(127,127,127,.12)); }
.game-sound[hidden] { display: none; }
/* display:flex above overrides the [hidden] attr — re-assert so the toolbar
   stays hidden on the intro hub (revealed only once a round starts). */
.game-toolbar[hidden] { display: none; }

/* intro hub — matches the Review hub exactly (same recipe, same aubergine accent,
   same width/position) so the Review/Play toggle reads as one consistent launcher.
   The in-game stage keeps the gold "juice" — only the hub mirrors Review. */
.game-hub {
  max-width: 560px; margin: 0 auto; padding: 36px 32px 40px;
  background: var(--vb-surface, #FFFFFF); border: 1px solid var(--vb-border, #E5DDD0);
  border-radius: 20px; box-shadow: 0 10px 36px rgba(23,32,42,.10);
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.game-hub__title { font-family: 'Newsreader', Georgia, serif; font-weight: 700;
  font-size: 1.5rem; color: var(--vb-text-primary, #1A1F2E); margin: 0; }
.game-stats { display: flex; gap: 14px; width: 100%; }
.game-stats[hidden] { display: none; }
.game-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 16px 8px; border-radius: 14px; background: var(--vb-bg-tint, #EFE9DD); }
.game-stat__num { font-family: 'Newsreader', Georgia, serif; font-weight: 700;
  font-size: 2rem; line-height: 1; color: var(--vb-text-primary, #1A1F2E);
  font-variant-numeric: tabular-nums; }
.game-stat--due .game-stat__num { color: var(--vb-aubergine, #5D4276); }   /* match Review hub accent */
.game-stat__label { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; color: var(--vb-text-secondary, #4A4F5C); }

.game-intro .game-badge { color: var(--vb-text-secondary, #4A4F5C); font-size: 15px; }
.game-badge[hidden] { display: none; }
/* primary CTA — identical to Review's .review-start (aubergine, not gold) */
.game-start, .game-again {
  margin-top: 16px; padding: 13px 34px; border: none; border-radius: 999px;
  font-weight: 600; font-size: 1.05rem; cursor: pointer;
  background: var(--vb-aubergine, #5D4276); color: var(--vb-text-on-accent, #fff);
  box-shadow: 0 4px 14px var(--vb-aubergine-medium, rgba(93,66,118,.16));
  transition: transform .12s ease, box-shadow .12s ease;
}
.game-start:hover, .game-again:hover { transform: translateY(-1px);
  box-shadow: 0 7px 20px var(--vb-aubergine-medium, rgba(93,66,118,.22)); }
.game-hub .game-start { margin-top: 0; }    /* hub gap handles the spacing */
.game-empty { color: var(--vb-text-tertiary, #8B8D94); margin-top: 14px; }

/* loading pane: spinner while the round is fetched/built */
.game-loading { display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 40px 0; }
/* the explicit display:flex above overrides the [hidden] attribute's display:none,
   so re-assert it — without this the spinner bleeds through the intro and stage
   panes (feedback_hidden_attr_display_override). */
.game-loading[hidden] { display: none; }
.game-loading .game-badge { color: var(--vb-text-secondary, #4A4F5C); font-size: 15px; }
.game-spinner { width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--vb-border, #E5DDD0);
  border-top-color: var(--vb-ember, #c9a84a); animation: game-spin .8s linear infinite; }
@keyframes game-spin { to { transform: rotate(360deg); } }

/* stage card — same surface as the Review flashcard. NO overflow:hidden: the
   floating +points (.game-pop rises -22px) and the speed badge must spill past
   the card edge for the correct-answer juice to read. */
.game-card {
  padding: 22px 26px 26px;
  /* same parchment + engraving-grid + aubergine vignette as the Canvas stage
     (.canvas-stage), so Play and Canvas read as one environment. Token-based →
     auto-themes. White option tiles still pop against the textured surface. */
  background:
    radial-gradient(130% 100% at 50% -12%, color-mix(in srgb, var(--vb-aubergine) 7%, transparent), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--vb-text-primary) 5%, transparent) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in srgb, var(--vb-text-primary) 5%, transparent) 23px 24px),
    var(--vb-bg-page, #F8F4ED);
  border: 1px solid var(--vb-border, #E5DDD0);
  border-radius: 20px; box-shadow: 0 10px 36px rgba(23,32,42,.10);
}

/* HUD: progress dots + combo + score */
.game-hud { display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; margin-bottom: 8px; }
/* one dot per due card → a long session would overflow the card width on
   mobile (no overflow:hidden here, so it spilled and caused horizontal page
   scroll, clipping the whole stage). Let the row wrap and shrink to fit. */
.game-progress-dots { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; row-gap: 4px; }
.game-dot { width: 16px; height: 6px; border-radius: 3px; background: var(--vb-border, #E5DDD0); }
.game-dot.done { background: var(--vb-ember, #c9a84a); }
.game-combo { font-weight: 800; color: var(--game-gold); text-shadow: var(--game-glow);
  opacity: 0; transition: opacity .2s; }
.game-combo.show { opacity: 1; }
.game-score { color: var(--vb-text-primary, #1A1F2E); font-weight: 700;
  font-variant-numeric: tabular-nums; }

/* soft timer bar (visual pressure only; never auto-fails) */
.game-timer { height: 8px; border-radius: 6px; background: var(--vb-border, #E5DDD0);
  overflow: hidden; margin-bottom: 18px; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.game-timer-fill { height: 100%; width: 100%;
  background: linear-gradient(90deg, #e9c45f, #c9a84a); box-shadow: 0 0 10px rgba(201,168,74,.7); }
.game-timer-fill.run { animation: game-timer-drain var(--game-timer-ms, 12000ms) linear forwards; }
@keyframes game-timer-drain { from { width: 100%; } to { width: 0%; } }

.game-ptype { font-size: 10px; letter-spacing: 2px; font-weight: 800;
  color: var(--vb-text-tertiary, #8B8D94); text-transform: uppercase; }
.game-prompt { font-size: 17px; line-height: 1.5; color: var(--vb-text-primary, #1A1F2E);
  margin: 8px 0 20px; padding: 0 6px; min-height: 52px; }
.game-prompt.italic { font-style: italic; }
.game-prompt .blank { color: var(--vb-ember, #c9a84a); font-weight: 800; }

/* options */
.game-options { display: grid; gap: 10px; }
.game-opt { padding: 13px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--vb-border, #E5DDD0); background: var(--vb-surface, #FFFFFF);
  color: var(--vb-text-primary, #1A1F2E); font-weight: 700; text-align: center;
  transition: transform .06s, box-shadow .15s, border-color .15s; position: relative; }
.game-opt:hover:not(.locked) { transform: translateY(-1px); border-color: var(--vb-ember, #c9a84a); }
.game-options.locked .game-opt { cursor: default; pointer-events: none; }
.game-opt.correct { border-color: var(--vb-ember, #c9a84a); color: var(--game-correct-fg);
  background: var(--game-correct-bg);
  box-shadow: 0 0 18px rgba(201,168,74,.5); }
.game-opt.wrong { border-color: #b04a4a; color: var(--game-wrong-fg); opacity: .85; }

/* floating +points */
.game-pop { position: absolute; top: -16px; right: 8px; font-weight: 800; font-size: 14px;
  color: var(--game-gold); animation: game-pop-rise .8s ease-out forwards; pointer-events: none; }
@keyframes game-pop-rise { from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-22px); } }

/* speed bonus badge */
.game-speed { display: inline-block; margin-bottom: 12px; font-size: 11px; font-weight: 700;
  color: var(--game-speed-fg); background: rgba(138,150,255,.12); padding: 3px 10px; border-radius: 20px;
  opacity: 0; transition: opacity .2s; }
.game-speed.show { opacity: 1; }

/* end screen */
.game-done h3 { font-size: 22px; margin-bottom: 4px; }
.game-done .game-stats { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
  font-size: 13px; margin: 14px 0; color: var(--vb-text-secondary, #4A4F5C); }
.game-done .game-stats b { color: var(--vb-text-primary, #1A1F2E); }

/* mobile — mirror the Review @480px tightening so the two hubs stay siblings */
@media (max-width: 480px) {
  .game-view { margin: 10px auto 18px; }
  .game-hub { padding: 26px 18px 30px; gap: 18px; border-radius: 16px; }
  .game-hub__title { font-size: 1.3rem; }
  .game-stats { gap: 10px; }
  .game-stat { padding: 13px 4px; }
  .game-stat__num { font-size: 1.7rem; }
  .game-stat__label { font-size: .66rem; white-space: normal; }
  /* §215: the stage bottom (last option row) fell below the fold on phones —
     the sticky two-row nav + two tab rows already eat ~190px, so tighten every
     vertical gap inside the stage. index.html tightens the tab-row margins. */
  .game-toolbar { margin-bottom: 4px; }
  .game-card { padding: 14px 14px 16px; border-radius: 16px; }
  .game-hud { margin-bottom: 6px; }
  .game-timer { margin-bottom: 10px; }
  .game-prompt { font-size: 16px; margin: 6px 0 12px; min-height: 44px; }
  .game-speed { margin-bottom: 6px; }
  .game-options { gap: 8px; }
  .game-opt { padding: 12px; }
}