/* Journey presentation only. Load after style.css and alphatype-brand.css.
 * Shared light/dark learning chrome; the Canvas worlds and their geometry retain
 * their original CSS/renderer. The existing theme control/runtime is unchanged.
 * html:root body beats the older html[data-flowkeys-theme] chrome overrides
 * without !important except where the original instructions use !important.
 */
html:root body {
  color-scheme: var(--at-scheme);
  --ink: var(--at-ink);
  --paper: var(--at-panel);
  --cream: var(--at-bg);
  --muted: var(--at-muted);
  --line: var(--at-border);
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html:root body .topbar {
  background: var(--at-navy);
  color: #fff;
  border-color: var(--ink);
  border-radius: 12px;
  padding-inline: 20px;
}
html:root body .brand { color: #fff; }
html:root body .brand b,
html:root body .lab-label { color: var(--at-yellow); }
html:root body .lab-label > span { background: var(--at-yellow); }
html:root body .brand .brand-mark {
  background: transparent url('/alphatype-mark.png') center / contain no-repeat;
  box-shadow: 0 0 0 1px var(--at-yellow);
}
html:root body .settings-button {
  background: var(--at-blue);
  color: #fff;
  border-color: var(--at-accent);
  border-radius: 6px;
}
html:root body .settings-button:hover,
html:root body .settings-button[aria-expanded='true'] {
  --ink: var(--at-navy);
  background: var(--at-yellow);
  border-color: var(--at-yellow);
  color: var(--ink);
}
html:root body .choose-heading h1 { color: var(--ink); }
html:root body .choose-heading > span { color: var(--muted); }
html:root body .world-card {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--line);
  border-radius: 12px;
}
html:root body .world-card small { color: var(--muted); }
html:root body .world-card:hover { border-color: var(--at-blue); }
html:root body .world-card.active {
  --ink: var(--at-navy); --muted: #405b79;
  background: var(--at-yellow);
  border-color: var(--ink);
  box-shadow: 0 2px 0 var(--at-navy);
}
html:root body .world-card .select-dot { border-color: var(--ink); }
html:root body .world-card.active .select-dot {
  background: var(--at-yellow);
  border-color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--at-navy);
}
html:root body .settings {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--line);
  border-radius: 12px;
}
html:root body .sound-grid { border-color: var(--line); }
html:root body .settings-grid > label,
html:root body .check,
html:root body .range-label,
html:root body .settings-note { color: var(--muted); }
html:root body .settings input { accent-color: var(--at-blue); }
html:root body .game {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 34px #04387317;
}

/* Paint-only scene-adjacent labels: no position, size, font, or art changes. */
html:root body .game .world-heading,
html:root body .game .journey,
html:root body .game .world-status {
  background: var(--at-navy);
  color: #fff;
  border-color: var(--at-accent);
  text-shadow: none;
}
html:root body .game .world-heading p,
html:root body .game .journey > span:last-child { color: #fff; }
html:root body .game .hud {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--ink);
  border-radius: 12px;
}
html:root body .game .stage-button {
  background: var(--at-blue);
  color: #fff;
  border-color: var(--at-blue);
  border-radius: 6px;
}
html:root body .world-progress > span,
html:root body .status-dot { background: var(--at-yellow); }
html:root body .stage-overlay {
  background: #043873e8;
  color: #fff;
}
html:root body .stage-overlay > span { color: var(--at-yellow); }

html:root body .mission-panel,
html:root body .route-panel {
  background: var(--at-navy);
  color: #fff;
  border-color: var(--at-accent);
}
html:root body .mission-panel span,
html:root body .route-eyebrow,
html:root body .route-stop { color: #fff; }
html:root body .route-stop:before {
  background: var(--at-navy);
  border-color: var(--at-accent);
}
html:root body .route-stop.reached { color: var(--at-yellow); }
html:root body .route-stop.reached:before {
  background: var(--at-yellow);
  border-color: var(--at-yellow);
}
html:root body .route-milestones:before { border-color: var(--at-accent); }
html:root body .game .word-dock {
  background: var(--cream);
  color: var(--ink);
  border-top-color: var(--at-yellow);
}
html:root body .mode-switch,
html:root body .manifest-row,
html:root body .curriculum-track span {
  background: var(--paper);
  color: var(--muted);
  border-color: var(--line);
}
html:root body .manifest-row,
html:root body .passage-panel { border-radius: 12px; }
html:root body .mode-switch button,
html:root body .secondary,
html:root body .repeat {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
  border-radius: 6px;
}
html:root body .mode-switch button[aria-pressed='true'],
html:root body .primary,
html:root body .submit {
  background: var(--at-blue);
  color: #fff;
  border-color: var(--at-blue);
  border-radius: 6px;
  box-shadow: none;
}
html:root body .primary:hover,
html:root body .submit:hover,
html:root body .primary:active {
  background: var(--at-navy);
  border-color: var(--ink);
  box-shadow: none;
}
html:root body .curriculum-track span.active {
  background: var(--at-yellow);
  color: var(--at-navy) !important;
  border-color: var(--ink);
}
html:root body .curriculum-track span.done {
  background: var(--at-blue);
  color: #fff !important;
  border-color: var(--at-blue);
}
html:root body .settings select,
html:root body .level-label select,
html:root body .mission-mode-label select,
html:root body #word-input,
html:root body .next-character {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--line);
  border-radius: 6px;
}
html:root body #word-input::placeholder { color: var(--muted); }
html:root body #word-input:disabled { background: var(--paper); }
html:root body .target { color: var(--ink); }
html:root body .target .pending { color: var(--muted); }
html:root body .target .correct { color: var(--at-success); }
html:root body .target .wrong {
  background: #ffe0cb;
  color: #9b3019;
}
html:root body .target .current {
  --ink: var(--at-navy);
  background: var(--at-yellow);
  border-color: var(--ink);
  color: var(--ink);
}
html:root body .target .space { color: var(--muted); }
html:root body #word-input.error { background: #fff7ef; border-color: #a73316; }
html:root body #feedback.error,
html:root body .outcome.miss { color: var(--at-error); }
html:root body #feedback.success,
html:root body .outcome { color: var(--at-success); }
html:root body .mode-note,
html:root body .assisted-note {
  --ink: var(--at-navy);
  background: var(--at-yellow);
  border-color: var(--line);
  color: var(--ink);
}
html:root body .outcome.assisted { color: var(--at-accent); }
html:root body .ready h3,
html:root body .results h3,
html:root body .result-stats strong,
html:root body .page-checkpoint h3,
html:root body .passage-panel,
html:root body .speech-fallback h3,
html:root body .mission-mode-label { color: var(--ink); }
html:root body .result-eyebrow { color: var(--at-accent); }
html:root body .ready p,
html:root body .results p,
html:root body .results .result-detail,
html:root body .result-stats span,
html:root body .page-checkpoint p,
html:root body .speech-fallback p,
html:root body .mission-rules,
html:root body .prompt-meta,
html:root body .prompt-meta #case-note,
html:root body .prompt-meta #page-count,
html:root body .under-game,
html:root body .under-game strong,
html:root body .under-game button,
html:root body .scoring-guide,
html:root body .scoring-guide summary,
html:root body footer,
html:root body footer a { color: var(--muted); }
/* Narrowly defeat the inherited dark instruction rules, which use !important. */
html:root body .level-label,
html:root body #word-step,
html:root body .timer,
html:root body .content-count,
html:root body .under-game #save-note,
html:root body .prompt-label,
html:root body .manifest-copy > span,
html:root body .manifest-copy > strong,
html:root body .input-bottom p,
html:root body #input-hint { color: var(--muted) !important; }
html:root body .game .word-dock :is(.level-label, .timer, .content-count),
html:root body .game .word-dock .curriculum-track span:not(.active):not(.done) { color: var(--muted) !important; }
html:root body .skip { background: var(--at-yellow); color: var(--at-navy); }
html:root body button:focus-visible,
html:root body a:focus-visible,
html:root body input:focus-visible,
html:root body select:focus-visible,
html:root body textarea:focus-visible {
  outline: 3px solid var(--at-focus);
  outline-offset: 4px;
}
html:root body #word-input:focus,
html:root body #word-input:focus-visible {
  outline: 3px solid var(--at-focus);
  outline-offset: 2px;
}
html:root body .topbar button:focus-visible,
html:root body .topbar a:focus-visible,
html:root body .stage-overlay button:focus-visible {
  outline-color: var(--at-yellow);
}
@media (prefers-reduced-motion: reduce) {
  html:root body .world-card:hover,
  html:root body .primary:hover { transform: none; }
}
body.reduced-motion .world-card:hover,
body.reduced-motion .primary:hover { transform: none; }

/* ==========================================================================
 * Alphabet-trainer reference skin (public/alphabet-trainer is the visual
 * reference and stays unchanged). Presentation only: the same contract as
 * above applies — every selector is scoped to html:root body, scene-adjacent
 * chrome is paint-only, and no keyframes, hidden controls or input handling
 * are added. The Canvas worlds, game rules, timers and audio are untouched.
 * Tokens follow the reference: blue bar, pale-blue page, white cards, gold
 * call-to-action, green/red character feedback. light-dark() follows the
 * page's existing theme toggle through color-scheme; browsers without it keep
 * the previous AlphaType palette above.
 * ========================================================================== */
@supports (color: light-dark(#000, #fff)) {
  html:root body {
    --at-navy: light-dark(#2583d8, #1e293b);
    --at-blue: light-dark(#1f74c4, #2583d8);
    --at-yellow: light-dark(#f6c343, #f6c343);
    --at-bg: light-dark(#ffffff, #1e293b);
    --at-panel: light-dark(#eef6fb, #0f172a);
    --at-soft: light-dark(#e0f2fe, #16233a);
    --at-ink: light-dark(#2d3748, #f8fafc);
    --at-muted: light-dark(#55657a, #a3b1c4);
    --at-border: light-dark(#8193a8, #64748b);
    --at-accent: light-dark(#1f74c4, #38bdf8);
    --at-success: light-dark(#2f855a, #68d391);
    --at-error: light-dark(#c53030, #fc8181);
    --at-focus: light-dark(#c98a0b, #f6c343);
    --ref-card-line: light-dark(#dbe4ee, #334155);
    --ref-card-shadow: light-dark(0 8px 22px -4px #2583d814, 0 8px 22px -4px #0006);
    --ref-scene-label: light-dark(#1e293be6, #0f172ae6);
    --ref-gold-edge: #c2880e;
    --ref-correct-bg: light-dark(#48bb782e, #48bb7833);
    --ref-wrong-bg: light-dark(#f565654d, #f5656559);
  }
}

/* Top navigation: the reference's blue bar with translucent pill controls. */
html:root body .topbar {
  background: var(--at-navy);
  border-color: transparent;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 2px 10px #0000001f;
}
html:root body .lab-label { color: #fff; }
html:root body .lab-label > span { background: var(--at-yellow); }
html:root body .brand b { color: #fff; font-weight: 500; }
html:root body .brand .brand-mark { box-shadow: none; }
html:root body .topbar .settings-button,
html:root body .topbar .game-language-control select {
  background: #ffffff24;
  color: #fff;
  border: 1px solid #ffffff3d;
  border-radius: 8px;
  font-weight: 700;
  transition: background-color 0.15s ease;
}
html:root body .topbar .game-language-control select option { background: var(--at-bg); color: var(--at-ink); }
html:root body .topbar .game-language-control { color: #fff; }
html:root body .topbar .settings-button:hover,
html:root body .topbar .game-language-control select:hover { background: #ffffff42; color: #fff; }
html:root body .topbar .settings-button[aria-expanded='true'] {
  background: #fff;
  color: #1f5f9e;
  border-color: #fff;
}

/* Headings and section framing (reference tier banner). */
html:root body .choose-heading {
  border-left: 5px solid var(--at-accent);
  border-radius: 12px;
  background: linear-gradient(90deg, #2583d81a 0%, #2583d805 100%);
  padding: 14px 20px;
  margin-top: 22px;
}
html:root body .choose-heading h1 { font-weight: 800; letter-spacing: -0.5px; }
html:root body .game-category-title { font-weight: 800; }

/* Adventure cards follow the reference lesson cards. */
html:root body .world-card,
html:root body .viper-card {
  background: var(--at-bg);
  color: var(--ink);
  border: 1px solid var(--ref-card-line);
  border-radius: 8px;
  box-shadow: 0 3px 8px #0000000a;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
html:root body .world-card:hover,
html:root body .viper-card:hover {
  transform: translateY(-4px);
  border-color: var(--at-accent);
  box-shadow: 0 12px 24px #2583d824;
}
html:root body .world-card.active,
html:root body .viper-card[aria-pressed='true'] {
  --ink: #1e293b;
  --muted: #4a3a12;
  background: var(--at-yellow);
  border-color: #d99b16;
  box-shadow: 0 3px 0 var(--ref-gold-edge);
  color: #1e293b;
}
html:root body .world-card.active .select-dot,
html:root body .viper-card[aria-pressed='true'] .select-dot {
  background: var(--at-yellow);
  border-color: #1e293b;
  box-shadow: inset 0 0 0 3px #1e293b;
}
html:root body .shortcut-games,
html:root body .settings,
html:root body .game-instruments,
html:root body .viper-panel {
  background: var(--at-bg);
  border-color: var(--ref-card-line);
  border-radius: 18px;
  box-shadow: var(--ref-card-shadow);
}

/* Game window: one reference card holding the scene and the typing dock. */
html:root body .game {
  border: 2px solid var(--ref-card-line);
  border-radius: 18px;
  box-shadow: var(--ref-card-shadow);
}
html:root body .game .world-heading,
html:root body .game .journey,
html:root body .game .world-status {
  background: var(--ref-scene-label);
  border-color: #ffffff2e;
  border-radius: 12px;
}
html:root body .game .hud {
  background: var(--at-bg);
  border-color: var(--ref-card-line);
  border-radius: 12px;
  box-shadow: var(--ref-card-shadow);
}
html:root body .game .stage-button { border-radius: 9px; }
html:root body .stage-overlay { background: var(--ref-scene-label); }
html:root body .game .word-dock {
  background: var(--at-bg);
  border-top-color: var(--ref-card-line);
}

/* Pills: learning mode, curriculum steps (reference level tabs/segments). */
html:root body .mode-switch {
  background: var(--at-panel);
  border-color: var(--ref-card-line);
  border-radius: 999px;
}
html:root body .mode-switch button {
  background: transparent;
  border-color: transparent;
  border-radius: 999px;
  color: var(--at-muted);
  font-weight: 700;
}
html:root body .mode-switch button[aria-pressed='true'] {
  background: var(--at-blue);
  border-color: var(--at-blue);
  color: #fff;
  box-shadow: 0 4px 12px #2583d840;
}
html:root body .curriculum-track span {
  background: var(--at-panel);
  border-color: var(--ref-card-line);
  border-radius: 999px;
}
html:root body .curriculum-track span.done { background: var(--at-blue); border-color: var(--at-blue); }
html:root body .curriculum-track span.active {
  background: var(--at-yellow);
  border-color: #d99b16;
  color: #1e293b !important;
}
html:root body .manifest-row { background: var(--at-panel); border-color: var(--ref-card-line); }

/* Buttons: blue secondary actions, gold call-to-action like "Start Typing". */
html:root body .primary,
html:root body .submit { border-radius: 9px; font-weight: 800; }
html:root body .secondary,
html:root body .repeat,
html:root body .under-game button {
  background: transparent;
  border: 2px solid var(--ref-card-line);
  border-radius: 9px;
  color: var(--at-muted);
  font-weight: 700;
}
html:root body .secondary:hover,
html:root body .repeat:hover,
html:root body .under-game button:hover { border-color: var(--at-ink); color: var(--at-ink); }
html:root body :is(#start, #continue-page, #play-again, #overlay-action, #fallback-copy) {
  background: linear-gradient(180deg, #f8d353 0%, #f0b823 100%);
  border: 1px solid #d99b16;
  border-radius: 9px;
  box-shadow: 0 3px 0 var(--ref-gold-edge);
  color: #1e293b;
  font-weight: 800;
  transition: transform 0.15s ease, filter 0.15s ease;
}
html:root body :is(#start, #continue-page, #play-again, #overlay-action, #fallback-copy):hover {
  background: linear-gradient(180deg, #f8d353 0%, #f0b823 100%);
  border-color: #d99b16;
  box-shadow: 0 3px 0 var(--ref-gold-edge);
  filter: brightness(1.04);
  transform: translateY(-1px);
}
html:root body :is(#start, #continue-page, #play-again, #overlay-action, #fallback-copy):active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ref-gold-edge);
}

/* Prompt text: reference character chips (correct, wrong, current). */
html:root body .target .correct {
  background: var(--ref-correct-bg);
  border-radius: 6px;
  color: var(--at-success);
  text-decoration: none;
}
html:root body .target .wrong {
  background: var(--ref-wrong-bg);
  border-radius: 6px;
  color: var(--at-error);
}
html:root body .target .current {
  --ink: #fff;
  background: var(--at-blue);
  border-color: #1e40af;
  border-radius: 6px;
  box-shadow: 0 4px 12px #2583d859;
  color: #fff;
}
html:root body .next-character {
  background: var(--at-bg);
  border: 2px solid #94a3b8;
  border-radius: 10px;
  box-shadow: 0 4px 0 #cbd5e1;
  color: var(--at-ink);
}
html:root body #word-input {
  border: 2px solid var(--ref-card-line);
  border-radius: 12px;
}
html:root body #word-input.error { background: var(--ref-wrong-bg); border-color: var(--at-error); }

/* Completion: the reference celebration card treatment. The game's own
 * celebration renderer and sounds remain the only completion effects. */
html:root body .results,
html:root body .page-checkpoint,
html:root body .speech-fallback {
  background: var(--at-bg);
  border: 1px solid var(--ref-card-line);
  border-radius: 20px;
  box-shadow: var(--ref-card-shadow);
}
html:root body .result-eyebrow { color: var(--at-accent); }
html:root body .result-stats strong { color: var(--at-success); }

@media (prefers-reduced-motion: reduce) {
  html:root body .world-card:hover,
  html:root body .viper-card:hover,
  html:root body :is(#start, #continue-page, #play-again, #overlay-action, #fallback-copy):hover,
  html:root body :is(#start, #continue-page, #play-again, #overlay-action, #fallback-copy):active { transform: none; }
}
body.reduced-motion .viper-card:hover,
body.reduced-motion :is(#start, #continue-page, #play-again, #overlay-action, #fallback-copy):hover,
body.reduced-motion :is(#start, #continue-page, #play-again, #overlay-action, #fallback-copy):active { transform: none; }

/* Small or short screens: before a run starts, the fixed-height game card
 * clipped its own start controls (pre-existing). Let only the ready state grow
 * to fit; the in-play compact layout keeps scene and input together. */
@media (max-width: 700px), (max-height: 760px) {
  html:root body .game[data-phase='ready'] {
    height: auto;
    grid-template-rows: minmax(220px, 42svh) auto;
  }
}