/* Shared geometry and components for the cabinet, collection and game navigation. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
  --font-sans: Manrope, Inter, system-ui, sans-serif;
  --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 16px;
  --font-size-h3: 18px; --font-size-h2: 24px; --font-size-h1: 32px;
  --font-weight-normal: 400; --font-weight-medium: 600; --font-weight-bold: 700;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --radius-sm: 10px; --radius-md: 16px;
  --color-canvas: var(--mist); --color-text-subtle: var(--muted);
  --color-border-strong: var(--canopy); --color-primary-active: var(--canopy);
  --color-warning: #94600c; --color-danger-hover: #873333;
  --focus-ring: var(--focus);
}
body { font-family: var(--font-sans); }
.ui-icon { display: block; width: 20px; height: 20px; flex: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.workspace { align-self: start; min-width: 0; margin: 0 auto; max-width: 1210px; padding: 40px 48px; }
.app-header, .collection-heading { min-height: 92px; padding: 0 0 24px; margin: 0 0 28px; border-bottom: 1px solid var(--birch); align-items: start; }
.app-header h2, .collection-heading h1 { margin: 0; font-size: var(--font-size-h1); line-height: 1.25; letter-spacing: -.035em; color: var(--ink); }
.collection-shell { width: 100%; }
.collection-heading .badge { margin-top: 22px; }
.collection-heading .muted { margin: 8px 0 0; font-size: var(--font-size-sm); }
.nav-button { gap: 10px; font-size: 15px; font-weight: 700; }
.nav-button span { display: flex; margin: 0; color: inherit; }
.nav-button .ui-icon { color: inherit; }
.sidebar-logout { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.session-wallet-button { min-height: 44px; padding: 8px 0 !important; }
.session-wallet-button:hover { box-shadow: none; }
.collection-tabs { margin: 0 0 24px; gap: 8px; }
.collection-tabs button { font-size: 14px; font-weight: 700; }
#collectionStatus { margin: 0 0 20px; color: var(--muted); font-size: var(--font-size-sm); line-height: 1.6; }
#gachaPanel details { padding: 12px 0; margin: 12px 0; border-top: 1px solid var(--birch); }
#gachaPanel summary { min-height: 44px; display: list-item; padding: 10px 0; cursor: pointer; font-weight: 600; }
.gacha-stage { grid-template-columns: 1.15fr 1fr; padding: 28px; border-radius: var(--radius-md); }
.gacha-stage h2 { font-size: var(--font-size-h2); margin: 8px 0 12px; }
.gacha-stage p { color: var(--muted); }
.gacha-stage #spinStatus { font-size: 14px; }
.gacha-stage #pityStatus { font-size: 13px; }
#profileCollectionPreview.profile-identity-preview { width: 76px; height: 76px; margin: 0; flex: none; }
.profile-identity-preview .collection-profile-card { width: 100%; min-height: 76px; height: 76px; margin: 0; padding: 10px; border-radius: 14px; box-shadow: none; display: grid; place-content: center; gap: 4px; }
.profile-identity-preview .collection-profile-card h3, .profile-identity-preview .collection-profile-card p { display: none; }
.profile-identity-preview .collection-profile-mark { font-size: 25px; }
.profile-identity-preview .collection-profile-decoration { font-size: 11px; }
.profile-identity-preview .collection-star-map { height: 20px; }
.profile-overview { padding: 24px; border: 1px solid var(--birch); background: var(--color-surface); }
.profile-page { gap: 20px; }
.profile-current-settings { padding: 24px; border-radius: var(--radius-md); }
.profile-current-settings h3 { font-size: var(--font-size-h3); margin: 0 0 6px; }
.profile-setting-copy > span, .profile-setting-copy > small { font-size: var(--font-size-sm); }
.profile-setting-row { gap: 16px; padding: 16px 0; }
.profile-collection-hint { font-size: var(--font-size-sm); }
.appearance-shop-link { display: inline-flex; min-height: 44px; align-items: center; font-size: 14px; }
.profile-customization-layout { grid-template-columns: minmax(220px,.8fr) minmax(0,1.2fr); gap: 24px; align-items: start; }
.profile-customization-preview { border-radius: var(--radius-md); padding: 20px; }
.profile-customization-controls { gap: 16px; }
.profile-customization-controls label { font-size: 14px; }
.profile-customization-controls .appearance-description { margin: -4px 0 0; font-size: var(--font-size-sm); }
.profile-owned-colors h3 { font-size: var(--font-size-h3); margin: 4px 0 16px; }
.profile-color-channel { margin: 0 0 16px; }
.appearance-preview-note, .appearance-empty-note { font-size: var(--font-size-sm); margin: 12px 0 0; line-height: 1.6; }
.profile-loadout-actions { align-items: center; justify-content: space-between; padding-top: 8px; }
.profile-motion-controls { margin: 16px 0 0; }
.profile-motion-controls button[aria-pressed=true] { background: var(--oak); color: var(--color-text-on-primary); }
.workshop-target-bar { display: flex; align-items: end; gap: 24px; margin: 0 0 24px; }
.workshop-target-bar > label:first-child { width: 260px; }
.workshop-owned-toggle { margin: 0; align-self: center; font-size: 14px; }
.workshop-editor { padding: 24px; border: 1px solid var(--birch); border-radius: var(--radius-md); background: var(--color-surface); }
.workshop-save-bar { position: sticky; bottom: 16px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 16px 20px; background: var(--color-surface); border: 1px solid var(--birch); border-radius: var(--radius-md); box-shadow: 0 4px 24px #00000014; }
.workshop-save-bar p { margin: 0; font-size: var(--font-size-sm); }
.workshop-actions { flex-wrap: nowrap; flex: none; gap: 10px; }
.collection-grid { grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 16px; }
.reward-card { padding: 16px; gap: 8px; font-size: 14px; font-weight: 600; border-radius: var(--radius-md); }
.reward-card strong { font-size: 15px; }
.reward-card .reward-art { height: 120px; }
.reward-state { margin-top: auto; font-size: var(--font-size-sm); font-weight: 700; }
.reward-card small { font-size: var(--font-size-sm); }
.learning-note { padding: 0; margin-bottom: 24px; background: transparent; border: 0; font-size: 14px; }
.learning-note summary { display: list-item; padding: 10px 0; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--oak); }
.learning-note p { margin: 8px 0 0; max-width: 760px; }
.learning-art { position: relative; height: 180px; min-height: 180px; overflow: hidden; background: var(--dew); color: var(--oak); }
.learning-landscape { position: absolute; inset: 0; width: 100%; height: 100%; }
.learning-hero { height: 170px; width: 140px; position: absolute; bottom: -4px; right: 22px; }
.learning-hero svg { height: 100%; width: 100%; }
.learning-dinosaurs { position: absolute; bottom: 18px; right: 22px; left: 40%; display: flex; align-items: end; gap: 18px; }
.learning-dinosaurs svg { width: 60%; height: 100px; }
.learning-dinosaurs svg:not(:first-child) { width: 25%; height: 65px; }
.learning-art-label { position: absolute; left: 24px; bottom: 26px; max-width: 40%; font-size: 15px; font-weight: 800; line-height: 1.5; }
.learning-card-body h3 { font-size: 20px; }
.learning-card-body p { font-size: 14px; }
.learning-card-body .learning-access-count { font-size: var(--font-size-sm); }
.learning-card-body .learning-skills { font-size: var(--font-size-sm); }
.learning-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.learning-actions .learning-play { grid-column: 1 / -1; }
.learning-actions > button, .learning-actions > a { min-width: 0; font-size: 14px; text-align: center; padding-inline: 12px; }
/* Game artwork retains its palette; navigation shares one composition. */
.game-page { font-family: var(--font-sans); }
.game-page .game-shell, .game-page .run-shell { width: 100%; max-width: 1320px; margin: 0 auto; padding: 24px 32px 32px; }
.game-page .app-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 0 0 20px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.game-page .brand { display: flex; align-items: center; gap: 10px; min-height: 44px; font: 800 16px var(--font-sans); color: var(--text); letter-spacing: -.02em; }
.game-page .brand small { margin: 4px 0 0; font: 600 11px var(--font-sans); letter-spacing: .08em; color: var(--muted); }
.game-page .brand-symbol { display: grid; place-items: center; }
.game-page .brand .ui-icon { width: 28px; height: 28px; }
.game-page .app-bar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.game-page .app-bar .quiet, .game-page .collection-game-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; font: 600 14px var(--font-sans); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); background: transparent; text-decoration: none; }
.game-page .app-bar .quiet:hover, .game-page .collection-game-link:hover { background: var(--panel); }
.platform-game-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.game-page .text-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; font: 600 14px var(--font-sans); color: var(--muted); text-decoration: none; }
.game-page .practice-modes { margin: 0; gap: 8px; }
.game-page .practice-modes a { min-height: 44px; padding: 10px 16px; font: 700 14px var(--font-sans); border-radius: var(--radius-sm); }
.game-page .title-row h1 { font: 800 32px/1.25 var(--font-sans); letter-spacing: -.035em; }
.game-page .title-row .eyebrow { font: 700 12px var(--font-sans); letter-spacing: .08em; }
.game-page .title-row .subtitle { font: 400 14px/1.6 var(--font-sans); }
@media(max-width:1100px) and (min-width:801px) {
  .app-shell { grid-template-columns: 240px 1fr; }
  .sidebar { width: 240px; padding-inline: 20px; }
  .workspace { padding: 32px 24px; }
  .profile-overview { align-items: start; flex-direction: column; gap: 16px; }
}
@media(max-width:800px) {
  .app-shell { display: block; }
  .sidebar { position: static; display: flex; width: 100%; height: auto; padding: 16px 20px; gap: 8px; }
  .sidebar-brand { display: none; }
  .nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nav-button { padding: 10px 12px; }
  .sidebar-footer { display: flex; align-items: center; justify-content: space-between; margin: 0; padding-top: 8px; gap: 12px; }
  .profile-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 0 !important; background: transparent !important; border: 0 !important; }
  .profile-summary strong { font-size: 13px; max-width: 160px; overflow-wrap: anywhere; }
  .profile-summary #sessionRole { display: none; }
  .sidebar-logout { width: auto; }
  .workspace { padding: 24px 20px; }
  .app-header, .collection-heading { min-height: 76px; margin-bottom: 24px; padding-bottom: 20px; }
  .app-header h2, .collection-heading h1 { font-size: 28px; }
  .profile-customization-layout { grid-template-columns: 1fr; }
  .profile-customization-preview { position: static; padding: 16px; }
  .profile-loadout-art { min-height: 140px; }
  .profile-loadout-art > .traveler-art { height: 190px; }
  .profile-loadout-art .collection-profile-card { min-height: 140px; padding: 16px; }
  .profile-loadout-art .collection-profile-card p { display: none; }
  .workshop-target-bar { align-items: stretch; flex-direction: column; gap: 12px; }
  .workshop-target-bar > label:first-child { width: 100%; }
  .workshop-owned-toggle { align-self: start; }
  .workshop-editor { padding: 20px; }
  .workshop-save-bar { flex-direction: column; align-items: stretch; gap: 10px; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); margin-inline: -20px; border-radius: 0; border-inline: 0; }
  .workshop-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .workshop-actions button { width: 100%; font-size: 13px; padding-inline: 12px; }
  .gacha-stage { grid-template-columns: 1fr; padding: 24px; }
  .game-page .game-shell, .game-page .run-shell { padding: 20px; }
  .game-page .app-bar { align-items: start; flex-direction: column; gap: 16px; }
  .game-page .app-bar-actions { width: 100%; }
  .game-page .app-bar-actions > * { flex: 1; }
  .game-page .app-bar .quiet, .game-page .collection-game-link { font-size: 13px; padding-inline: 10px; }
}
@media(max-width:520px) {
  .workspace { padding: 24px 16px; }
  .sidebar { padding-inline: 16px; }
  .profile-overview { padding: 20px; gap: 16px; }
  .profile-current-settings { padding: 20px; }
  .profile-wallet-button { width: 100%; min-height: 60px; }
  .profile-wallet-button .wallet-open { margin-left: auto; }
  .profile-account-heading { gap: 12px; }
  #profileCollectionPreview.profile-identity-preview { width: 60px; height: 60px; }
  .profile-identity-preview .collection-profile-card { min-height: 60px; height: 60px; padding: 6px; }
  .profile-account-meta { font-size: 12px; }
  .collection-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .collection-tabs button { font-size: 13px; padding: 10px; }
  .profile-motion-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .profile-motion-controls button { font-size: 12px; padding: 8px 4px; }
  .collection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .reward-card { padding: 12px; }
  .reward-card .reward-art { height: 95px; }
  .reward-card strong { font-size: 14px; }
  .workshop-save-bar { margin-inline: -16px; }
  .game-page .game-shell, .game-page .run-shell { padding: 16px; }
  .platform-game-nav { align-items: stretch; gap: 8px; }
  .game-page .practice-modes { width: 100%; }
  .game-page .practice-modes a { flex: 1; justify-content: center; }
  .game-page .title-row h1 { font-size: 28px; }
}
@media(prefers-reduced-motion:reduce) {
  .nav-button, .collection-tabs button, .profile-color-option { transition: none; }
}

.game-page .title-row > div:first-child { min-width: 0; }
.game-page .record { flex: 0 1 45%; min-width: 0; }
.game-page .record small { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }

.game-page .app-bar .compact-label { font: inherit; }

/* Student journeys: compact lists, visible states and one action hierarchy. */
.workspace { padding-top: 32px; }
.app-header, .collection-heading { min-height: 76px; margin-bottom: 20px; padding-bottom: 20px; }
.app-header h2:focus { outline: none; }
.section-heading { margin-bottom: 16px; }
.section-description { margin: 0 0 20px; }
.student-list-tools { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,.45fr); gap: 16px; margin-bottom: 20px; }
.student-list-tools label { font-size: 13px; }
.student-status { display: inline-flex; align-items: center; align-self: start; width: fit-content; padding: 5px 10px; border-radius: 6px; background: var(--color-surface-subtle); color: var(--ink); font-size: 12px; font-weight: 700; }
.student-status[data-state="active"], .student-status[data-state="available"], .student-status[data-state="published"] { color: var(--oak); background: var(--dew); }
.student-status[data-state="pending"] { border: 1px solid var(--birch); }
.student-status[data-state="exhausted"] { color: var(--muted); }
.student-test-card { gap: 12px; padding: 20px; border-top: 1px solid var(--birch); }
.student-test-card::before { display: none; }
.student-test-card h3, .student-test-card p { margin: 0; }
.student-test-card > .student-test-info { background: transparent; padding: 0; margin: 0; gap: 6px 12px; font-size: 13px; }
.student-test-card > button { width: 100%; margin-top: auto; }
.student-attempts { font-size: 13px; }
.student-results-list { display: grid; gap: 24px; }
.student-result-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.student-result-group > h3 { grid-column: 1 / -1; font-size: 18px; margin: 0; }
.student-result-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--birch); border-radius: var(--radius-md); background: var(--color-surface); }
.student-result-card h4, .student-result-card p { margin: 0; }
.student-result-card h4 { font-size: 16px; }
.student-result-card .result-score { font-size: 24px; font-weight: 800; color: var(--ink); }
.student-result-card > button { margin-top: auto; }
.student-result-card > .error:empty, #resultsStatus:empty, #attemptMessage:empty { display: none; }
.start-test-dialog { width: min(640px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 28px; border: 1px solid var(--birch); border-radius: var(--radius-md); background: var(--color-surface); color: var(--ink); }
.start-test-dialog::backdrop { background: #152e1f99; }
.start-test-dialog h2 { margin: 8px 0 12px; font-size: 24px; }
.start-test-dialog h3 { font-size: 18px; }
.start-test-rules { padding-left: 20px; line-height: 1.6; }
.start-test-rules li + li { margin-top: 8px; }
.start-test-dialog .modal-actions { padding-top: 16px; justify-content: flex-end; }
.runner-save-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; min-height: 44px; }
.runner-save-status p { margin: 0; font-size: 14px; }
.test-runner .runner-navigation { display: flex; justify-content: flex-end; }
.runner-finish-actions { justify-content: flex-end; }
.learning-note { margin-bottom: 12px; }
.learning-daily { padding: 20px; margin-bottom: 20px; border-radius: var(--radius-md); }
.learning-daily h3 { margin: 8px 0; font-size: 18px; }
.learning-daily p { margin: 8px 0; font-size: 14px; }
.learning-daily .daily-help { font-size: 12px; }
.learning-daily progress { height: 8px; max-width: 480px; }
.daily-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.daily-actions:empty { display: none; }
.daily-actions a { width: auto; font-size: 13px; padding: 10px 14px; }
.learning-art { height: 120px; min-height: 120px; }
.learning-hero { height: 120px; width: 100px; }
.learning-dinosaurs svg { height: 80px; }
.learning-dinosaurs svg:not(:first-child) { height: 45px; }
.learning-art-label { bottom: 18px; left: 20px; font-size: 13px; }
.learning-card-body { padding: 20px; gap: 12px; }
.learning-card-body h3, .learning-card-body p { margin: 0; }
.learning-card-body .learning-skills { display: none; }
.learning-reward-note { font-size: 12px !important; color: var(--oak); }
.learning-reward-note[data-state="demo"] { color: var(--muted); }
.profile-overview { border-width: 1px !important; box-shadow: none; }
.profile-current-settings { padding-top: 20px; }
.profile-learning-card { padding: 20px; }
.profile-learning-card h3 { margin: 0 0 8px; }
.profile-learning-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-setting-row { padding: 12px 0; }
.profile-setting-copy > small { display: none; }
.profile-collection-hint { margin: 12px 0 0; }
.collection-empty { display: grid; justify-items: start; gap: 12px; padding: 24px; border: 1px solid var(--birch); border-radius: var(--radius-md); background: var(--color-surface); }
.collection-empty p { margin: 0; }
.workshop-save-bar { position: static; box-shadow: none; }

/* Games share the account theme; scene artwork keeps its own colors. */
.game-page { --bg: #fcf9f4; --panel: #fffefb; --soft: #e7f6ef; --line: #c2dac5; --text: #193326; --muted: #5f7165; --gold: #2d6f3f; --green: #2d6f3f; --red: #a13f3f; --game-primary: #2d6f3f; --game-on-primary: #fff; color-scheme: light; color: var(--text); background: var(--bg); }
:root:has(.game-page) { color-scheme: light; background: #fcf9f4; }
:root[data-color-scheme="ocean"] .game-page { --bg: #f4f8fc; --panel: #fcfeff; --soft: #e6f3fb; --text: #183449; --muted: #526c7d; --line: #bfd5e5; --gold: #1c638c; --green: #1c638c; --game-primary: #1c638c; }
:root[data-color-scheme="violet"] .game-page { --bg: #faf7fd; --panel: #fffcff; --soft: #f0eafa; --text: #352847; --muted: #72617f; --line: #d4c4e5; --gold: #7142a0; --green: #7142a0; --game-primary: #7142a0; }
:root[data-color-scheme="sunset"] .game-page { --bg: #fff9f0; --panel: #fffdf8; --soft: #fff0da; --text: #493024; --muted: #7b6655; --line: #e5c9a7; --gold: #9a491e; --green: #9a491e; --game-primary: #9a491e; }
:root[data-color-scheme="rose"] .game-page { --bg: #fff7fb; --panel: #fffafd; --soft: #fce8f1; --text: #482437; --muted: #7c5c6c; --line: #e3bfd0; --gold: #a13267; --green: #a13267; --game-primary: #a13267; }
:root[data-color-scheme="dark"] .game-page, :root[data-color-scheme="aurora"] .game-page, :root[data-color-scheme="observatory"] .game-page { --bg: #131c29; --panel: #1c2738; --soft: #23354b; --line: #43516a; --text: #e4ecf7; --muted: #abbad0; --gold: #94c5ff; --green: #94c5ff; --red: #ffaaaa; --game-primary: #94c5ff; --game-on-primary: #172a44; color-scheme: dark; }
:root[data-color-scheme="aurora"] .game-page { --bg: #122126; --panel: #1c3035; --soft: #263c42; --line: #466269; --text: #e0f6f1; --muted: #b0cbc8; --gold: #81edc4; --green: #81edc4; --game-primary: #81edc4; --game-on-primary: #123529; }
.game-page .game-shell, .game-page .run-shell { max-width: 1210px; padding: 24px; }
.game-page .app-bar { min-height: 56px; padding-bottom: 12px; margin-bottom: 12px; }
.game-page .platform-game-nav { margin-bottom: 8px; }
.game-page .title-row { padding: 8px 0 16px; margin-bottom: 0; }
.game-page h1, .game-page .intro-heading, .game-page .result-summary h2, .game-page .dialog-heading h2 { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.03em; }
.game-page .title-pixel { display: none; }
.game-page .demo-strip { background: var(--soft); color: var(--muted); border-color: var(--line); }
.game-page .practice-modes a { color: var(--muted); border-color: var(--line); background: transparent; }
.game-page .practice-modes a[aria-current="page"] { background: var(--game-primary); border-color: var(--game-primary); color: var(--game-on-primary); }
.game-page button { border-radius: var(--radius-sm); background: var(--panel); color: var(--text); border-color: var(--line); }
.game-page button:hover:not(:disabled) { background: var(--soft); }
.game-page .primary, .game-page #startButton { background: var(--game-primary); color: var(--game-on-primary); border-color: var(--game-primary); box-shadow: none; }
.game-page .primary:hover:not(:disabled), .game-page #startButton:hover:not(:disabled) { filter: brightness(.94); background: var(--game-primary); }
.game-page .player-hud, .game-page .challenge-panel, .game-page .result-area, .game-page .review-item, .game-page dialog { background: var(--panel); border-color: var(--line); }
.game-page .intro-copy, .game-page .intro-goals span, .game-page .question-title, .game-page .feedback p, .game-page .review-content p, .game-page label { color: var(--text); }
.game-page .intro-goals, .game-page .rule-summary, .game-page .answer-letter, .game-page .topic-chip, .game-page .portrait { background: var(--soft); color: var(--text); border-color: var(--line); }
.game-page select, .game-page input { background: var(--panel); color: var(--text); border-color: var(--line); }
.game-page .answer-option { background: var(--panel); border-color: var(--line); }
.game-page .answer-option:hover:not(:disabled) { background: var(--soft); border-color: var(--green); }
.game-page .answer-option.selected-good, .game-page .condition { background: var(--soft); color: var(--text); border-color: var(--green); }
.game-page .answer-option.selected-bad, .game-page .condition.failed { background: var(--panel); color: var(--red); border-color: var(--red); }
.game-page .answer-option.selected-good .answer-letter, .game-page .review-content .right { color: var(--green); }
.game-page .answer-option.selected-bad .answer-letter, .game-page .review-content .chosen { color: var(--red); }
.game-page .reward-chip strong, .game-page .cost { color: var(--gold); }
.game-page .reward-orb { background: var(--soft); border-color: var(--line); }
.game-page .reward-orb small, .game-page .text-button, .game-page .practice-note { color: var(--text); }
.game-page .meter { background: var(--soft); }
.game-page { --danger: var(--red); }
.game-page .track-panel, .game-page .track-caption, .game-page .track-overlay, .game-page .bonus-card, .game-page .bonus-card i, .game-page .answer-number, .game-page .mistake-explanation { background: var(--soft); border-color: var(--line); }
.game-page .answer { background: var(--panel); }
.game-page .answer.good { background: var(--soft); }
.game-page .answer.bad { background: var(--panel); color: var(--red); }
.game-page .world-panel, .game-page .world-toolbar, .game-page .scene-bottom, .game-page .journey { background: var(--soft); border-color: var(--line); }
.game-page .scene-bottom strong { color: var(--text); }
.game-page .scene-bottom p, .game-page .journey-title { color: var(--muted); }
.game-page-guard[data-view="intro"] .player-hud, .game-page-guard[data-view="intro"] .journey, .game-page-guard[data-view="intro"] .scene-bottom { display: none; }
.game-page-guard[data-view="intro"] .intro-heading { font-size: 26px; margin-bottom: 12px; }
.game-page-guard[data-view="intro"] .intro-copy { line-height: 1.6; margin-bottom: 12px; }
.game-page-guard[data-view="intro"] .intro-goals { padding: 12px; gap: 6px; margin-bottom: 0; }
.game-page-guard[data-view="intro"] .challenge-footer { padding-top: 12px; }
.game-page-runner .run-shell { display: flex; flex-direction: column; }
.game-page-runner .run-shell > .intro-layout { order: 1; }
.game-page-runner .run-hud, .game-page-runner .run-milestones { order: 2; }
.game-page-runner .track-panel { order: 3; }
.game-page-runner .challenge, .game-page-runner .result { order: 4; }
.game-page-runner footer { order: 5; }
.game-page-runner:not([data-view="game"]):not([data-view="result"]):not([data-view="training"]) .run-hud, .game-page-runner:not([data-view="game"]):not([data-view="result"]):not([data-view="training"]) .run-milestones { display: none; }
.game-page-runner .intro-layout { grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; }
.game-page-runner .intro-card { padding: 20px; }
.game-page-runner .intro-card h2 { margin-bottom: 8px; }
.game-page-runner .intro-card > p:not(.eyebrow) { margin-bottom: 12px; }
.game-page-runner .difficulty-options label { padding: 12px; }
.game-page-runner .bonus-card { padding: 12px 20px; }
.game-page-runner .bonus-card summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.game-page-runner .bonus-card summary::before { content: '+ '; margin-right: 8px; }
.game-page-runner .bonus-card[open] summary::before { content: '− '; }
.game-page-runner .distance-note { font-size: 13px; }
@media(max-width:800px) {
  .nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sidebar-footer { padding-top: 4px; }
  .student-result-group { grid-template-columns: 1fr; }
  .game-page-guard[data-view="intro"] .adventure-layout { display: flex; flex-direction: column; }
  .game-page-guard[data-view="intro"] .challenge-panel { order: -1; border-left: 0; border-bottom: 1px solid var(--line); }
}
@media(max-width:520px) {
  .student-list-tools { grid-template-columns: 1fr; gap: 12px; }
  .student-test-card .student-test-info, .start-test-dialog .student-test-info { grid-template-columns: minmax(0,1fr) auto; }
  .student-test-card .student-test-info dd, .start-test-dialog .student-test-info dd { text-align: right; }
  .start-test-dialog { padding: 20px; }
  .start-test-dialog .modal-actions { flex-direction: column-reverse; }
  .start-test-dialog .modal-actions button { width: 100%; }
  .test-runner .runner-navigation { width: 100% !important; }
  .runner-navigation button { width: 100%; }
  .workshop-save-bar { position: sticky; }
  .game-page .game-shell, .game-page .run-shell { padding: 16px; }
  .game-page .app-bar { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .game-page .app-bar .brand small { display: none; }
  .game-page .app-bar-actions { width: auto; }
  .game-page .app-bar-actions #settingsButton { width: auto; padding: 10px 12px; font-size: 13px; }
  .game-page .app-bar .quiet span { margin-left: 0; }
  .game-page .title-row { padding-top: 4px; }
}