/* Page shell. Layout modes are classes on #stage set by RP.ui.setMode (js/engine/ui.js).
   The @font-face rules live inline in index.html so their url()s resolve relative to the page:
   Firefox only lets a file:// page load fonts from its own folder or below. */

:root {
  --ink: #34495e;
  --cream: #fdf8e8;
  --text: #1d2b3a;
  /* Secondary text; about 8:1 on --cream (WCAG AA needs 4.5:1). */
  --muted: #3e4c5c;
  --accent: #ff9900;
  --hover: #e67e22;
  --ok: #27ae60;
  --ok-bg: #eefaf1;
  /* Green and orange for text: at least 4.5:1 on --cream and --ok-bg (the --ok fill is for shapes). */
  --ok-text: #1a7a43;
  --note-text: #9c5516;
  --bad: #c0392b;
  --bad-bg: #fdecea;
  --key-bg: #e6dcc0;
  --page: #16202a;
  --stage: #2b3a4a;
  --stage-text: #e8edf4;
  --gutter: 12px;
  --content-width: 1240px;
  --font-pixel: 'Pixelify Sans', monospace;
  --font-text: 'Nunito', sans-serif;
  /* Chrome (Pixelify Sans) legibility: sentences at least 16px, labels and key hints at least
     14px, medium weight, a little tracking. Questions, options and answers stay Nunito. */
  --chrome-weight: 500;
  --chrome-weight-heading: 600;
  --chrome-tracking: 0.03em;
  --chrome-word-spacing: 0.12em;
  --chrome-line: 1.4;
  --chrome-label: 14px;
  --chrome-sentence: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--page); }

body {
  margin: 0;
  min-height: 100vh;
  padding: var(--gutter) 16px;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 30%, #22303e 0%, var(--page) 70%);
  color: var(--stage-text);
  font-family: var(--font-pixel);
  font-weight: var(--chrome-weight);
  letter-spacing: var(--chrome-tracking);
  word-spacing: var(--chrome-word-spacing);
  line-height: var(--chrome-line);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Pixelify Sans's "fi"/"fl" ligatures read like an "A"; canvas text breaks them in RP.ui.drawText. */
  font-variant-ligatures: none;
}

/* Reading text (Nunito) keeps its own metrics: no chrome tracking or weight inherited. */
#panel, #under, .sns-text, .end-q-text, .end-pick-text, .end-explain, .end-empty, .end-full {
  letter-spacing: normal;
  word-spacing: normal;
  font-weight: 400;
}
/* Chrome inside those reading containers gets the chrome treatment back. */
.battle-meta, .battle-prompt, .battle-keys, .battle-continue, .battle-why-label, #panel kbd,
#under .under-hint, #under .under-line, .duck-timeup, .duck-cue b, .duck-btn {
  font-weight: var(--chrome-weight);
  letter-spacing: var(--chrome-tracking);
  word-spacing: var(--chrome-word-spacing);
  line-height: var(--chrome-line);
}

/* margin:auto centres the stage in both axes and, unlike align-items:center, never pushes
   the top of a too-tall stage out of reach. */
#stage {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-start;
  width: var(--content-width);
  margin: auto;
  background: var(--stage);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  /* Shrinks the whole stage on a small window (RP.notices.fit sets --fit; never above 1). */
  zoom: var(--fit, 1);
}

canvas {
  display: block;
  image-rendering: pixelated;
}

#screen, #sidebar, #battle-left, #panel { display: none; }

#screen { position: relative; flex: none; width: 960px; height: 640px; }

/* A DOM layer over the #world canvas for menus and popups; hidden while empty. */
#overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
#overlay:not(:empty) { display: flex; }

/* World: 960x640 canvas + 280px HUD sidebar = 1240px. */
.mode-world #screen { display: block; }
.mode-world #sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 280px;
  align-self: stretch;
  padding: 16px;
  background: var(--cream);
  color: var(--text);
  border-left: 4px solid var(--ink);
}

/* Overworld HUD (built by js/scenes/overworld.js): area, weekday, experts done, readiness. */
#sidebar .hud-label { font-size: var(--chrome-label); color: var(--muted); }
#sidebar .hud-place-name { font-size: 22px; font-weight: var(--chrome-weight-heading); line-height: 1.2; }
#sidebar .hud-place { padding-bottom: 10px; border-bottom: 2px dashed var(--key-bg); }
#sidebar .hud-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
/* Numbers in Nunito: Pixelify's 2 reads as an 8 ("12 / 12"). No chrome tracking on Nunito. */
#sidebar .hud-value { font-size: 18px; font-family: var(--font-text); font-weight: 800; letter-spacing: 0; word-spacing: 0; }
#sidebar .hud-dots { display: grid; grid-template-columns: repeat(6, 18px); gap: 6px; }
#sidebar .hud-dot {
  width: 18px;
  height: 18px;
  background: var(--key-bg);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
#sidebar .hud-dot.right { background: var(--ok); }
#sidebar .hud-dot.wrong { background: var(--bad); }
#sidebar .hud-bar {
  position: relative;
  height: 18px;
  background: var(--key-bg);
  border: 3px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
}
#sidebar .hud-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
#sidebar .hud-keys { margin-top: auto; display: flex; flex-direction: column; gap: 6px; font-size: var(--chrome-sentence); }
#sidebar .hud-key { display: flex; align-items: center; gap: 8px; }
/* The cap keeps its width when the description wraps; flex would squeeze it under the label. */
#sidebar .hud-key kbd { flex: none; }
/* The boards' keys: one cap column as wide as the widest label, so every cap is the same size.
   14 px and tight rows: six keys stay above the sidebar's bottom under Sunny's ten-line brief. */
#sidebar .bd-keys { display: grid; grid-template-columns: max-content 1fr; gap: 4px 8px; align-items: center; font-size: var(--chrome-label); line-height: 1.3; }
#sidebar .bd-keys kbd { padding: 0 6px; }
#sidebar .bd-keys .hud-label { grid-column: 1 / -1; }
#sidebar .bd-keys .hud-key { display: contents; }
/* Grid puzzle sidebar (js/scenes/grid-puzzle.js): the hint line, the legend, the keys. */
#sidebar .gp-hint {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--text);
}
#sidebar .gp-legend { display: flex; flex-direction: column; gap: 6px; font-size: var(--chrome-sentence); }
#sidebar .gp-legend-row { display: flex; align-items: center; gap: 10px; }
#sidebar .gp-swatch {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  image-rendering: pixelated;
  border: 2px solid var(--ink);
}
/* The panel's board sidebar (js/scenes/board.js): the category tag, the brief (the only Nunito
   paragraph), the mode box, then after the hand-in the score and the check rows (the next key is on
   the overlay's card or bar). */
#sidebar.bd-side { max-height: 640px; overflow: hidden; gap: 8px; }
#sidebar.bd-side .hud-place { padding-bottom: 6px; }
#sidebar .bd-tag { font-size: var(--chrome-label); }
#sidebar .bd-brief {
  margin: 0;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0;
  word-spacing: 0;
}
/* Nunito like the brief: the hints spell rule cards, and Pixelify's 5 reads as an S. */
#sidebar .bd-mode {
  padding: 4px 8px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0;
  word-spacing: 0;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 8px;
}
#sidebar .bd-mode .bd-why { margin-top: 4px; color: var(--bad); }
/* Scores in Nunito: Pixelify's 5 reads as an S ("2.5 / 3"). */
#sidebar .bd-score {
  padding: 2px 4px 3px;
  text-align: center;
  font-family: var(--font-text);
  letter-spacing: 0;
  word-spacing: 0;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 8px;
}
#sidebar .bd-score-value { font-size: 24px; font-weight: 800; line-height: 1.15; }
#sidebar .bd-score small { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--muted); }
#sidebar .bd-checks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0;
  word-spacing: 0;
}
#sidebar .bd-check {
  display: flex;
  flex: none;
  gap: 6px;
  padding: 2px 6px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 6px;
}
#sidebar .bd-check::before { flex: none; font-weight: 800; }
#sidebar .bd-check.ok { background: var(--ok-bg); border-color: var(--ok); }
#sidebar .bd-check.ok::before { content: '\2713'; color: var(--ok-text); }
#sidebar .bd-check.no { background: var(--bad-bg); border-color: var(--bad); }
#sidebar .bd-check.no::before { content: '\2717'; color: var(--bad); }
#sidebar .bd-check.bonus { border-style: dashed; }
#sidebar .bd-check.bonus:not(.ok) { color: var(--muted); }
#sidebar .bd-check.bonus:not(.ok)::before { content: '\2717'; }
/* A stopped check that held but waits on the app's own traffic: neutral, neither red nor green. */
#sidebar .bd-check.wait { background: #f1f1f1; border-color: #c8c8c8; color: var(--muted); }
#sidebar .bd-check.wait::before { content: '\00B7'; }
#sidebar .bd-check-text { flex: 1 1 auto; }
#sidebar .bd-weight { flex: none; color: var(--muted); }
#sidebar .bd-scroll { margin: 0; font-size: var(--chrome-label); color: var(--muted); }
/* The caption before the board takes keys (spec 11.3), in #overlay over the board canvas. */
.bd-caption-shade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  background: rgba(253, 248, 232, 0.55);
}
.bd-caption-card {
  max-width: 620px;
  padding: 18px 28px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  font-family: var(--font-text);
  font-weight: 700;
  color: var(--text);
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 10px;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
}
.bd-caption { font-size: 22px; line-height: 1.4; }
.bd-caption-key { font-size: 16px; color: var(--muted); }
/* The opening card (caption, step label, brief), the confirm card and the result card share the
   caption card (Roey's picks, 2026-10-24). Text sizes keep the longest brief inside 960x640. */
.bd-caption-card .bd-caption { text-align: center; }
.bd-card-label { font-family: var(--font-pixel); font-size: var(--chrome-label); color: var(--muted); }
.bd-card-brief { margin: 0; font-size: 18px; line-height: 1.45; text-align: left; letter-spacing: 0; word-spacing: 0; }
.bd-card-sub { font-size: 16px; color: var(--muted); }
/* The opening card's quiet second key line (H), and the how-to card's lines (board instructions). */
.bd-card-reopen { font-size: 14px; margin-top: -6px; }
.bd-card-howto { min-width: 420px; }
.bd-card-howto .bd-card-brief { width: 100%; }
.bd-card-points { font-size: 44px; font-weight: 800; line-height: 1.1; }
.bd-card-verdict { font-size: 18px; }
/* The interviewer's version: a bar across the board's bottom strip, no shade over the board. */
.bd-model-bar {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  font-family: var(--font-text);
  font-weight: 800;
  font-size: 20px;
  color: var(--text);
  background: var(--cream);
  border-top: 4px solid var(--ink);
}
.bd-model-bar .bd-caption-key { font-size: 18px; color: var(--note-text); }
#sidebar .bd-mode:empty { visibility: hidden; }
#sidebar kbd {
  min-width: 64px;
  padding: 2px 6px;
  text-align: center;
  font-family: var(--font-pixel);
  background: var(--key-bg);
  border: 2px solid var(--ink);
  border-radius: 4px;
}

/* Menu: the 960x640 canvas centred in the 1240px stage. */
#stage.mode-menu { justify-content: center; }
.mode-menu #screen { display: block; }

/* Battle: 600x400 scene (never stretches) with #under below it, question panel on the right.
   The stage never outgrows the viewport, so on short screens only #panel (and #under) scroll. */
#stage.mode-battle {
  align-items: stretch;
  /* Divided by the zoom so the shrunk stage still fills the viewport's height. */
  max-height: calc((100vh - 2 * var(--gutter)) / var(--fit, 1));
}
.mode-battle #battle-left {
  display: flex;
  flex-direction: column;
  flex: 0 0 600px;
  min-height: 0;
}
.mode-battle #scene { flex: none; }
#under {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px;
  font-family: var(--font-text);
  background: var(--cream);
  color: var(--text);
  border-top: 3px solid var(--ink);
}
#under:empty { padding: 0; }
.mode-battle #panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 640px;
  min-width: 380px;
  max-width: 640px;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px;
  background: var(--cream);
  color: var(--text);
  border-left: 4px solid var(--ink);
  font-family: var(--font-text);
}

/* Battle panel and explanation (built by js/scenes/battle.js). Pixel font for game chrome,
   Nunito for the question, options and explanations. */
.battle-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-pixel);
  font-size: 15px;
  color: var(--muted);
}
.battle-tag {
  padding: 1px 8px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 4px;
}
.battle-question p {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
}
.battle-question p:last-child { margin-bottom: 0; }
.battle-options { display: flex; flex-direction: column; gap: 8px; }
.battle-options .opt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 9px 12px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 2px 2px 0 rgba(52, 73, 94, 0.25);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
  user-select: none;
}
.battle-options .opt kbd {
  flex: none;
  margin-top: 1px;
  padding: 0 7px;
  font-family: var(--font-pixel);
  font-size: var(--chrome-label);
  background: var(--key-bg);
  border-radius: 4px;
}
.battle-options .opt-text { flex: 1 1 auto; }
.battle-options .opt.live { cursor: pointer; }
.battle-options .opt.live:hover { background: #fbf1d6; }
.battle-options .opt.picked { border-color: var(--hover); background: #fff4e0; box-shadow: 0 0 0 2px var(--accent); }
.battle-options .opt.right { border-color: var(--ok); background: var(--ok-bg); }
.battle-options .opt.wrong { border-color: var(--bad); background: var(--bad-bg); }
.battle-options .opt.dim { opacity: 0.55; }
#under .under-hint { font-family: var(--font-pixel); font-size: var(--chrome-sentence); color: var(--muted); }
/* Battle and duck round (js/scenes/battle.js, js/scenes/duck.js; mockup states A-D).
   Tag fills keep cream text at 4.6:1 or better. */
.battle-tag.tag-runtime { background: #875abe; }
.battle-tag.tag-git { background: #c84228; }
.battle-tag.tag-docker { background: #1b75b4; }
.battle-tag.tag-cicd { background: #b65419; }
.battle-tag.tag-aws { background: #a26100; }
.battle-tag.tag-netsec { background: #2e7d5b; }
.battle-tag.tag-iac { background: #6a4fc0; }
.battle-tag.tag-k8s { background: #316ae0; }
.battle-tag.tag-gitops { background: #c2407a; }
.battle-tag.tag-logging { background: #8a6a12; }
.battle-tag.tag-troubleshooting { background: #b0302a; }
.battle-tag.tag-general { background: #167d78; }
.battle-prompt { font-family: var(--font-pixel); font-size: var(--chrome-sentence); color: var(--muted); }
.battle-options .opt-text p { margin: 0; }
.battle-options .opt-mark:empty { display: none; }
.battle-options .opt-mark { flex: none; font-weight: 800; }
.battle-options .opt.right .opt-mark { color: var(--ok-text); }
.battle-options .opt.wrong .opt-mark { color: var(--bad); }
/* A quick question's why line (quick-battles spec 3 step 5, mockup B): under the options after the
   pick, Nunito like the options, its left border ok or bad by the pick. */
.battle-why-slot:empty { display: none; }
.battle-why {
  padding: 9px 12px;
  background: #fff;
  border-left: 5px solid var(--ink);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  line-height: 1.5;
}
.battle-why p { margin: 0; }
.battle-why.why-ok { border-left-color: var(--ok); }
.battle-why.why-bad { border-left-color: var(--bad); }
.battle-why-label {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-pixel);
  font-size: var(--chrome-label);
  color: var(--muted);
}
#panel code {
  font-family: ui-monospace, 'DejaVu Sans Mono', monospace;
  font-size: 0.88em;
  padding: 0 3px;
  background: #efe8d4;
  border-radius: 3px;
  overflow-wrap: anywhere;
}
.battle-keys {
  display: flex;
  min-height: 35px; /* measured at checkpoint 2 (k8s-19, 1280x800): the Continue row's height, so the panel keeps still at the pick */
  flex-wrap: wrap;
  gap: 14px;
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--font-pixel);
  font-size: var(--chrome-label);
  color: var(--muted);
}
#panel kbd {
  font-family: var(--font-pixel);
  font-size: var(--chrome-label);
  padding: 0 7px;
  background: var(--key-bg);
  border-radius: 4px;
}
.battle-keys .clickable,
.battle-continue { cursor: pointer; user-select: none; }
.battle-continue {
  padding: 4px 12px;
  font-size: 15px;
  color: var(--muted);
  border: 2px dashed var(--muted);
  border-radius: 6px;
}
.battle-continue.ready { color: var(--cream); background: var(--ink); border: 2px solid var(--ink); }
.battle-continue.ready kbd { color: var(--text); }
#under .under-line { font-family: var(--font-pixel); font-size: var(--chrome-sentence); }
#under .under-line.ok { color: var(--ok-text); }
#under .under-line.bad { color: var(--bad); }
#under .under-line + .under-line { margin-top: 4px; }

.duck-clock { font-variant-numeric: tabular-nums; }
.duck-timer {
  flex: none;
  height: 14px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 7px;
  overflow: hidden;
}
.duck-timer i { display: block; height: 100%; background: #f1c40f; }
.duck-timeup { display: none; font-family: var(--font-pixel); font-size: var(--chrome-sentence); color: #a8500a; }
.duck-timeup.show { display: block; }
.duck-house-rule { font-family: var(--font-text); font-size: 15px; font-weight: 700; color: #a8500a; }
.duck-struck { display: grid; gap: 4px; padding: 8px 10px; border: 2px dashed var(--muted); border-radius: 4px; }
.duck-struck-heading { font-family: var(--font-pixel); font-size: var(--chrome-label); color: var(--muted); }
.duck-struck .struck { color: var(--muted); text-decoration: line-through; }
.duck-struck .struck p { margin: 0; }
.duck-cue { display: flex; gap: 10px; align-items: center; font-size: 16px; font-weight: 700; }
.duck-cue b {
  flex: none;
  padding: 0 8px;
  font-family: var(--font-pixel);
  font-size: var(--chrome-label);
  background: var(--gold, #ffd36b);
  border: 2px solid var(--ink);
  border-radius: 6px;
}
.duck-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.duck-btn {
  padding: 8px 12px;
  font-family: var(--font-pixel);
  font-size: 16px;
  text-align: center;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}
.duck-btn:hover { background: #fbf1d6; }
.duck-btn.main { background: #ffd36b; }
.duck-btn.main:hover { background: #ffc94a; }
.duck-btn.chosen { background: #ffd36b; box-shadow: 0 0 0 2px var(--ink); }
.duck-btn.dim { opacity: 0.45; cursor: default; }
/* The answer box takes whatever height is left and is the only part that scrolls. */
.duck-answer {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  padding: 4px 14px;
  font-size: 15px;
  line-height: 1.55;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 8px;
}
.duck-answer p { margin: 10px 0; }
.duck-answer ul, .duck-answer ol { margin: 8px 0; padding-left: 22px; }
.duck-answer li { margin: 3px 0; }
.duck-answer pre {
  margin: 8px 0;
  padding: 8px 10px;
  overflow-x: auto;
  background: #f6f1e2;
  border-radius: 6px;
}
#panel pre code { padding: 0; background: none; border-radius: 0; overflow-wrap: normal; font-size: 13px; }
.duck-answer .opener {
  margin: 10px -6px;
  padding: 6px 8px;
  font-weight: 700;
  background: #fff4c2;
  border-left: 4px solid #f1c40f;
  border-radius: 4px;
}
.duck-answer .opener-chip {
  display: block;
  width: fit-content;
  margin-bottom: 4px;
  padding: 0 8px;
  font-family: var(--font-pixel);
  font-size: var(--chrome-label);
  font-weight: var(--chrome-weight);
  letter-spacing: var(--chrome-tracking);
  word-spacing: var(--chrome-word-spacing);
  color: var(--text);
  background: #ffd36b;
  border: 2px solid var(--ink);
  border-radius: 6px;
}
.duck-rate { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

#toast {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  padding: 6px 12px;
  background: var(--cream);
  color: var(--text);
  border: 3px solid var(--ink);
  border-radius: 8px;
  font-size: var(--chrome-sentence);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: none; }
#hud-toast {
  display: none;
  margin-top: 6px;
  padding: 6px 10px;
  background: #ffd36b;
  color: var(--text);
  border: 3px solid var(--ink);
  border-radius: 8px;
  font-size: var(--chrome-sentence);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
}
#hud-toast.show { display: block; }

/* The sound bar (js/engine/volume-bar.js), bottom centre over any screen. */
#volume {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 11;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  transform: translateX(-50%);
  background: var(--cream);
  color: var(--text);
  border: 3px solid var(--ink);
  border-radius: 8px;
  font-size: var(--chrome-sentence);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  pointer-events: none;
}
#volume.show { display: flex; }
#volume .vol-bar { display: flex; gap: 3px; }
#volume .vol-bar i { width: 10px; height: 18px; border: 2px solid var(--ink); border-radius: 2px; background: var(--cream); }
#volume .vol-bar i.on { background: #ffd36b; }
#volume .vol-value { min-width: 3.2em; text-align: right; }
#volume .vol-keys { display: flex; gap: 10px; }
#volume kbd { padding: 0 6px; background: var(--key-bg); border-radius: 4px; font-family: inherit; }

.noscript {
  margin: auto;
  padding: 24px;
  background: var(--cream);
  color: var(--text);
  border: 3px solid var(--ink);
  border-radius: 8px;
}

/* SNS invitation popup (js/scenes/sns.js), DOM in #overlay over the dimmed world. */
.sns-card {
  width: 580px;
  background: #ffffff;
  color: var(--text);
  border: 4px solid var(--ink);
  border-radius: 10px;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.sns-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--ink);
  color: #ffffff;
}
.sns-icon { flex: none; }
.sns-kind { font-size: var(--chrome-label); letter-spacing: 0.06em; text-transform: uppercase; color: #ffd9a0; }
.sns-topic { font-size: 22px; font-weight: var(--chrome-weight-heading); }
.sns-body { padding: 16px 22px 4px; }
.sns-subject { font-size: 22px; font-weight: var(--chrome-weight-heading); margin-bottom: 8px; }
.sns-text { margin: 0 0 10px; font-family: var(--font-text); font-size: 16px; line-height: 1.45; }
.sns-link {
  display: block;
  margin: 6px 22px 16px;
  padding: 10px 16px;
  font: var(--chrome-weight-heading) 22px var(--font-pixel);
  color: var(--text);
  background: var(--accent);
  border: 3px solid var(--ink);
  border-radius: 6px;
  cursor: pointer;
}
.sns-link:hover { background: var(--hover); }
.sns-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 22px;
  font-size: 14px;
  color: var(--muted);
  background: var(--cream);
  border-top: 2px dashed var(--key-bg);
}

/* End screen (js/scenes/end.js): banner canvas over a DOM page that scrolls with the window.
   Pixel font for game chrome, Nunito for question text, answers and explanations. */
#endpage { display: none; }
#stage.mode-end { flex-direction: column; }
.mode-end #endpage { display: flex; flex-direction: column; width: 100%; }
#banner { flex: none; width: 1240px; height: 200px; }
#review {
  padding: 22px 40px 40px;
  background: var(--cream);
  color: var(--text);
  border-top: 4px solid var(--ink);
}
.end-head { margin-bottom: 16px; }
.end-headline { font-size: 28px; font-weight: var(--chrome-weight-heading); line-height: 1.2; }
.end-headline.ok { color: var(--ok-text); }
.end-headline.bad { color: var(--bad); }
.end-meta { margin-top: 6px; font-size: 17px; color: var(--muted); }
.end-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 2px dashed var(--key-bg);
}
.end-action,
.end-toggle {
  font-family: var(--font-pixel);
  color: var(--text);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 rgba(52, 73, 94, 0.25);
  cursor: pointer;
  user-select: none;
}
.end-action { padding: 8px 16px; font-size: 20px; font-weight: var(--chrome-weight-heading); }
.end-action:hover,
.end-toggle:hover { background: #fbf1d6; }
.end-action.cursor,
.end-toggle.cursor {
  color: var(--text);
  background: var(--accent);
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink), 3px 3px 0 3px rgba(52, 73, 94, 0.35);
}
.end-action.cursor::before,
.end-toggle.cursor::before { content: '> '; }
.end-keys { margin-left: auto; font-size: 14px; color: var(--muted); }
.end-loot { display: flex; gap: 16px; margin: 18px 0 8px; }
.end-box {
  flex: 1 1 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  padding: 12px 14px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 8px;
}
.end-box-title { flex: 0 0 100%; margin: 0 0 2px; font-size: 18px; }
.end-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  font-size: 16px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 6px;
}
.end-icon { image-rendering: pixelated; }
.end-empty { margin: 0; font-family: var(--font-text); font-size: 15px; color: var(--muted); }
.end-review-title { margin: 22px 0 12px; font-size: 24px; }
.end-q {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
  padding: 16px 20px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(52, 73, 94, 0.2);
}
.end-q-meta { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--muted); }
.end-q-meta .battle-tag { font-size: var(--chrome-label); }
.end-q-text p,
.end-pick-text,
.end-explain {
  margin: 0 0 8px;
  font-family: var(--font-text);
  line-height: 1.55;
}
.end-q-text p { font-size: 16.5px; font-weight: 600; }
.end-q-text p:last-child,
.end-pick-text:last-child,
.end-explain:last-child { margin-bottom: 0; }
.end-pick { padding: 8px 12px; border-left: 5px solid; border-radius: 4px; }
.end-pick.bad { background: var(--bad-bg); border-color: var(--bad); }
.end-pick.ok { background: var(--ok-bg); border-color: var(--ok); }
.end-pick-label { margin-bottom: 4px; font-size: 14px; }
.end-pick.bad .end-pick-label,
.end-pick-text.bad { color: var(--bad); }
.end-pick.ok .end-pick-label,
.end-pick-text.ok { color: var(--ok-text); }
.end-pick-text { font-size: 15.5px; font-weight: 700; }
.end-explain { font-size: 15.5px; font-weight: 600; }
.end-note {
  padding: 8px 10px;
  background: var(--cream);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
}
.end-note-label { font-size: 14px; color: var(--note-text); }
.end-toggle { align-self: flex-start; padding: 5px 12px; font-size: 16px; }
.end-full {
  padding: 12px 14px;
  background: var(--cream);
  border: 2px dashed var(--key-bg);
  border-radius: 6px;
}

/* ==========================================================================================
   Run flow (Task 9): title, intro cards, name entry, invite, the laptop bag, end placeholder.
   DOM in #overlay over the 960x640 world canvas (menu mode). Kept in one block so other
   tasks' edits above never collide with it.
   ========================================================================================== */

.rp-shade {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 20, 0.45);
}
/* The name card sits low, its top below y 200, so the bed in the bedroom (y 142-190) shows above it. */
.rp-shade.low { align-items: flex-end; padding-bottom: 60px; box-sizing: border-box; }

/* ---- title ---- */
.rp-title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 56px 64px;
  color: var(--text);
}
.rp-title-logo {
  margin: 0;
  font-size: 76px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow: 4px 4px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink);
  white-space: nowrap;
}
.rp-letter { display: inline-block; }
.rp-letter.space { width: 0.35em; }
.rp-title-tagline { margin-top: 10px; font-size: 20px; color: var(--ink); }
.rp-title-friday {
  margin-top: 14px;
  padding: 6px 12px;
  font-size: 16px;
  color: #ffffff;
  background: var(--bad);
  border: 3px solid var(--ink);
  border-radius: 6px;
}
.rp-title-dropped {
  max-width: 520px;
  margin-top: 14px;
  padding: 6px 12px;
  font-size: var(--chrome-label);
  text-align: center;
  color: var(--text);
  background: var(--cream);
  border: 3px solid var(--accent);
  border-radius: 6px;
}
.rp-title-menu { display: flex; flex-direction: column; gap: 10px; margin-top: 40px; min-width: 300px; }
.rp-title-note {
  max-width: 460px;
  padding: 6px 12px;
  font-size: var(--chrome-label);
  color: var(--text);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 4px;
}
.rp-title-confirm {
  max-width: 460px;
  padding: 10px 14px;
  font-size: 16px;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 6px;
}
.rp-title-item {
  padding: 8px 18px;
  font-size: 26px;
  font-weight: var(--chrome-weight-heading);
  color: var(--text);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 rgba(52, 73, 94, 0.3);
  cursor: pointer;
  user-select: none;
}
.rp-title-item.cursor { color: var(--text); background: var(--accent); }
.rp-title-item.cursor::before { content: '> '; }
.rp-title-egg {
  min-height: 28px;
  margin-top: 18px;
  font-size: 18px;
  color: var(--ink);
  opacity: 0;
  transition: opacity 300ms;
}
.rp-title-egg.show { opacity: 1; }
.rp-title-keys {
  margin-top: auto;
  padding: 3px 10px;
  font-size: var(--chrome-label);
  color: var(--text);
  white-space: pre;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 4px;
}
.rp-title-legal {
  max-width: 600px;
  margin-top: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1d3a24;
}
.rp-title-version {
  position: absolute;
  right: 14px;
  bottom: 10px;
  padding: 3px 10px;
  font-size: var(--chrome-label);
  color: var(--text);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 4px;
}
/* Rewards spec 6.3: the career rank, above the version string in its style, with the accent fill. */
.rp-title-rank {
  position: absolute;
  right: 14px;
  bottom: 46px;
  padding: 3px 10px;
  font-size: var(--chrome-label);
  color: var(--text);
  text-align: right;
  background: var(--accent);
  border: 2px solid var(--ink);
  border-radius: 4px;
}
.rp-title-rank-name { font-size: 16px; font-weight: var(--chrome-weight-heading); }

/* ---- invite and intro cards ---- */
.rp-invite-icon {
  flex: none;
  width: 34px;
  height: 34px;
  background: #ffffff;
  border: 3px solid #ffffff;
  border-top: 10px solid var(--bad);
  border-radius: 4px;
}
.rp-invite-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0 0 12px;
  font-size: 17px;
}
.rp-invite-facts dt { color: var(--muted); }
.rp-invite-facts dd { margin: 0; font-weight: var(--chrome-weight-heading); }
.rp-invite-reply {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--cream);
  border-left: 5px solid var(--accent);
  border-radius: 4px;
}
.rp-invite-reply-label { font-size: var(--chrome-label); color: var(--muted); }
.rp-invite-reply-text { font-family: var(--font-text); font-size: 20px; font-weight: 700; }
.rp-invite-reply-note { font-family: var(--font-text); font-size: 15px; color: var(--muted); font-style: italic; }
.rp-invite-kay, .rp-invite-reply + .rp-invite-reply { margin-top: 6px; }
.rp-invite-kay .rp-invite-reply-note { font-style: normal; }

.rp-name {
  width: 520px;
  padding: 22px 26px;
  color: var(--text);
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 10px;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
}
.rp-name-prompt { font-size: 24px; font-weight: var(--chrome-weight-heading); }
.rp-name-field {
  display: flex;
  align-items: center;
  margin: 14px 0 10px;
  padding: 8px 12px;
  font-size: 30px;
  background: #ffffff;
  border: 3px solid var(--ink);
  border-radius: 6px;
}
.rp-name-text.placeholder { color: #9aa5b1; }
.rp-name-caret {
  width: 3px;
  height: 30px;
  margin-left: 3px;
  background: var(--ink);
  animation: rp-blink 1s steps(1) infinite;
}
@keyframes rp-blink { 50% { opacity: 0; } }
.rp-name-keys { font-size: var(--chrome-label); color: var(--muted); white-space: pre; }
/* Player gender spec 5: Male/Female under the name, Left/Right to choose. */
.rp-name-looks { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 12px; font-size: 22px; }
.rp-name-arrow { color: var(--muted); font-size: 20px; }
.rp-name-look { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; color: #8a96a3; border: 3px solid transparent; border-radius: 8px; }
.rp-name-look.on { color: var(--text); background: #ffffff; border-color: #e0533d; box-shadow: 2px 2px 0 rgba(52, 73, 94, 0.25); }
.rp-name-look canvas { image-rendering: pixelated; }

/* ---- the laptop ---- */
.rp-laptop {
  display: flex;
  gap: 0;
  width: 932px;
  height: 612px;
  color: var(--text);
  border: 4px solid var(--ink);
  border-radius: 14px;
  overflow: clip;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
}
.rp-lid {
  flex: 0 0 360px;
  min-width: 0;
  padding: 14px 14px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #4f6074;
  border-right: 4px solid var(--ink);
}
.rp-lid-title { margin: 0 0 10px; font-size: 20px; color: #ffffff; text-shadow: 2px 2px 0 var(--ink); }
.rp-lid-empty { margin: 0 0 10px; font-size: var(--chrome-label); color: #ffffff; }
.rp-stickers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rp-sticker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 84px;
  padding: 4px 2px;
  text-align: center;
  overflow-wrap: normal;
  word-break: keep-all;
}
.rp-sticker.empty { justify-content: center; border: 2px dashed rgba(255, 255, 255, 0.45); border-radius: 8px; }
.rp-sticker-goal { max-width: 100%; font-size: 13px; line-height: 1.15; color: #e4ebf2; overflow-wrap: break-word; }
.rp-lid-group + .rp-lid-group { margin-top: 12px; }
.rp-lid-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 6px;
  padding-bottom: 3px;
  font-size: 16px;
  color: #ffffff;
  text-shadow: 1px 1px 0 var(--ink);
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
}
.rp-lid-group-count { font-size: var(--chrome-label); }
.rp-sticker-art { image-rendering: pixelated; }
.rp-sticker-name { max-width: 100%; font-size: 14px; line-height: 1.1; letter-spacing: 0; word-spacing: 0; color: #ffffff; text-shadow: 1px 1px 0 var(--ink); }
.rp-screen {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: clip;
  background: var(--cream);
}
.rp-tabs { display: flex; gap: 6px; padding: 10px 12px 0; background: var(--ink); }
.rp-tab {
  padding: 6px 12px;
  font-size: 16px;
  color: #ffffff;
  background: #4a6078;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  user-select: none;
}
.rp-tab.active { color: var(--text); background: var(--cream); }
.rp-tab-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 18px; }
.rp-bag-keys {
  padding: 6px 12px;
  font-size: 14px;
  color: var(--muted);
  border-top: 2px dashed var(--key-bg);
  white-space: pre-wrap;
}
.rp-empty { margin: 8px 0; font-family: var(--font-text); font-size: 16px; color: var(--muted); }
.rp-item {
  margin-bottom: 10px;
  padding: 10px 12px;
  background: #ffffff;
  border: 3px solid var(--ink);
  border-radius: 6px;
}
.rp-item-name { font-size: 18px; font-weight: var(--chrome-weight-heading); }
.rp-item-text { margin: 4px 0 6px; font-family: var(--font-text); font-size: 15.5px; line-height: 1.45; }
.rp-btn {
  display: inline-block;
  padding: 5px 12px;
  font-size: 16px;
  color: var(--text);
  background: #ffffff;
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 rgba(52, 73, 94, 0.25);
  cursor: pointer;
  user-select: none;
}
.rp-btn.main { background: #ffd36b; }
.rp-btn.cursor { color: var(--text); background: var(--accent); }
.rp-btn.cursor::before { content: '> '; }
.rp-notebook-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.rp-download-status { font-size: var(--chrome-label); }
.rp-download-link { color: var(--ink); }
.rp-note-category { margin: 16px 0 8px; font-size: 20px; }
.rp-note {
  margin-bottom: 12px;
  padding: 10px 12px;
  font-family: var(--font-text);
  background: #ffffff;
  border: 2px solid var(--key-bg);
  border-radius: 6px;
}
.rp-note p { margin: 6px 0; }
.rp-note-question { font-size: 16.5px; font-weight: 700; }
.rp-note-opener { margin: 6px 0 8px; padding: 6px 10px; background: var(--ok-bg); border-left: 5px solid var(--ok); border-radius: 4px; }
.rp-note-label { font-family: var(--font-pixel); font-size: 14px; color: #1a7a43; }
.rp-note-text { font-size: 15.5px; font-weight: 600; }
.rp-note-board { margin: 6px 0 8px; padding: 6px 10px; background: var(--bad-bg); border-left: 5px solid var(--bad); border-radius: 4px; }
.rp-note-board .rp-note-label { color: var(--bad); }
.rp-note-answer {
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 15px;
  line-height: 1.5;
  background: var(--cream);
  border: 2px dashed var(--key-bg);
  border-radius: 6px;
}
.rp-note-answer[hidden] { display: none; }
.rp-note-answer pre { overflow-x: auto; font-size: 13px; }
.rp-note code, .rp-note-answer code { font-size: 0.92em; }
.rp-duck-head { display: flex; gap: 16px; align-items: center; }
.rp-duck-art { flex: none; image-rendering: pixelated; }
/* Postmortem Dex (spec 5.5): one card per monster, the 64x64 art drawn at 2x. */
.rp-dex-count { margin: 0 0 10px; font-size: var(--chrome-sentence); font-weight: var(--chrome-weight-heading); }
.rp-dex { display: flex; flex-direction: column; gap: 8px; }
.rp-dex-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 6px 6px;
  background: #ffffff;
  border: 3px solid var(--ink);
  border-radius: 6px;
}
.rp-dex-entry.unknown { border-color: var(--key-bg); }
.rp-dex-art { flex: none; width: 128px; height: 128px; image-rendering: pixelated; }
.rp-dex-about { min-width: 0; }
.rp-dex-about .rp-item-text { font-size: 16px; }
.rp-dex-hint { color: var(--muted); }
.rp-dex-times { font-size: var(--chrome-label); color: var(--muted); }
/* Quick battles spec 7 (mockup D): lesson pips, the cursor on a met entry, the card per monster. */
.rp-dex-entry:not(.unknown) { cursor: pointer; }
.rp-dex-entry.cursor { border-color: var(--hover); box-shadow: 0 0 0 2px var(--accent); background: #fff4e0; }
.rp-pips { margin-top: 4px; line-height: 0; }
.rp-pip { display: inline-block; width: 10px; height: 10px; margin-right: 3px; border: 2px solid var(--ink); border-radius: 2px; }
.rp-pip.right { background: var(--ok); }
.rp-pip.missed { background: var(--bad); }
.rp-dex-card { display: flex; flex-direction: column; gap: 10px; font-family: var(--font-text); }
.rp-dex-card-head { display: flex; gap: 12px; align-items: center; }
.rp-dex-card-name { font-family: var(--font-pixel); font-size: 22px; font-weight: 600; }
.rp-dex-flavour { margin: 2px 0; font-style: italic; color: var(--muted); }
.rp-lesson { padding: 8px 12px; font-size: 15px; line-height: 1.5; background: #ffffff; border: 2px solid var(--ink); border-radius: 8px; }
.rp-lesson p { margin: 0 0 4px; }
.rp-lesson p:last-child { margin-bottom: 0; }
.rp-lesson-stem { font-weight: 700; }
.rp-lesson-answer { color: var(--ok-text); font-weight: 700; }
.rp-lesson-missed { float: right; margin-left: 8px; font-family: var(--font-pixel); font-size: 13px; color: var(--bad); }
.rp-lesson.unmet { color: var(--muted); border-style: dashed; font-family: var(--font-pixel); }
.rp-lesson code {
  font-family: ui-monospace, 'DejaVu Sans Mono', monospace;
  font-size: 0.88em;
  padding: 0 3px;
  background: #efe8d4;
  border-radius: 3px;
  overflow-wrap: anywhere;
}
.rp-dex-back { align-self: flex-start; }
.rp-dex-back kbd { padding: 0 6px; font-family: var(--font-pixel); background: var(--key-bg); border-radius: 4px; }
.rp-duck-counts { border-collapse: collapse; font-size: 15px; }
.rp-duck-counts th, .rp-duck-counts td { padding: 4px 12px; text-align: left; border-bottom: 2px solid var(--key-bg); }
.rp-duck-counts td { font-family: var(--font-text); }
.rp-duck-counts td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Rewards spec 6.3: the rank chip under the duck, and the Right last time bar. */
.rp-career-line { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.rp-career-line .rp-item-text { margin: 0; }
.rp-career-chip {
  flex: none;
  padding: 2px 10px;
  font-size: var(--chrome-label);
  color: var(--text);
  background: var(--accent);
  border: 2px solid var(--ink);
  border-radius: 4px;
}
.rp-bar {
  display: inline-block;
  width: 70px;
  height: 10px;
  margin-left: 8px;
  vertical-align: -1px;
  overflow: hidden;
  background: #ffffff;
  border: 2px solid var(--ink);
  border-radius: 5px;
}
.rp-bar i { display: block; height: 100%; background: var(--ok); }

/* ==========================================================================================
   End screen (Task 10, js/scenes/end.js). Builds on the .end-* rules above (forked from SAA):
   the verdict card over the banner canvas, the actions, the category table, the panel rows
   and the review rows. Pixelify for chrome (sentences >= 16px, labels >= 14px), Nunito for
   bank text.
   ========================================================================================== */

.mode-end #endpage { position: relative; }
/* In flow, pulled up over the 200px banner canvas: its top sits 14px below the banner's top
   (#review's content starts at 200 + 4px border + 22px padding = 226px, so -212px), and at its
   172px minimum the 40px bottom margin puts the actions where #review's padding would. A taller
   card (the perfect-panel caption) pushes the actions down instead of covering them. */
.end-banner-card {
  position: relative;
  width: 600px;
  min-height: 172px;
  margin: -212px 0 40px;
  padding: 12px 18px;
  color: var(--text);
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
}
.end-banner-verdict { font-size: 40px; font-weight: 700; line-height: 1.05; }
.end-banner-card.offer .end-banner-verdict { color: var(--ok-text); }
.end-banner-card.retry .end-banner-verdict { color: var(--note-text); }
.end-banner-score { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; }
.end-banner-label { font-size: 18px; color: var(--muted); }
.end-banner-percent { font-size: 34px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.end-duck-totals { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 6px; }
.end-duck-totals .end-banner-label { font-size: var(--chrome-label); }
.end-duck-count { font-size: 15px; font-variant-numeric: tabular-nums; }
.end-banner-detail { font-size: var(--chrome-sentence); color: var(--muted); }
.end-banner-caption { margin-top: 2px; font-size: var(--chrome-sentence); line-height: 1.3; }
.end-banner-caption.perfect { color: var(--note-text); }

.end-action.main { background: #ffd36b; }
.end-actions .end-keys { white-space: pre; }
.end-download-status { font-size: var(--chrome-label); }
.end-new-week { font-size: var(--chrome-label); color: var(--muted); }
.end-download-link { color: var(--ink); }

.end-summary { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.end-section-title { margin: 0 0 10px; font-size: 22px; font-weight: var(--chrome-weight-heading); }
.end-section {
  padding: 14px 16px;
  background: #ffffff;
  border: 3px solid var(--ink);
  border-radius: 8px;
}
.end-new { margin-top: 22px; }
.end-new .end-loot { margin: 0; }
.end-new .end-box { border-width: 2px; }
.end-rank {
  margin: 0 0 12px;
  padding: 6px 12px;
  font-size: 16px;
  color: var(--text);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-left: 6px solid var(--accent);
  border-radius: 6px;
}
.end-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.end-table th { font-size: var(--chrome-label); color: var(--muted); font-weight: var(--chrome-weight); text-align: left; }
.end-table th, .end-table td { padding: 4px 8px; border-bottom: 2px solid var(--key-bg); }
.end-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.end-table td.zero { color: var(--muted); }
.end-panel-row { padding: 8px 0; border-bottom: 2px dashed var(--key-bg); }
.end-panel-row:last-child { border-bottom: 0; padding-bottom: 0; }
.end-panel-who { font-size: var(--chrome-label); color: var(--muted); }
.end-panel-q {
  margin: 2px 0 6px;
  font-family: var(--font-text);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: normal;
  word-spacing: normal;
}
.end-panel-result { display: flex; flex-wrap: wrap; gap: 8px; }
.end-panel-floor { margin-top: 4px; font-size: var(--chrome-label); color: var(--muted); }
.end-tag {
  display: inline-block;
  padding: 1px 8px;
  font-size: var(--chrome-label);
  color: var(--text);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 4px;
}
.end-tag.ok { color: var(--ok-text); background: var(--ok-bg); border-color: var(--ok); }
.end-tag.bad { color: var(--bad); background: var(--bad-bg); border-color: var(--bad); }
.end-tag.rating { color: var(--note-text); }
/* Panel scores in Nunito: Pixelify's 5 reads as an S ("build 5 / 5"). */
.end-panel .end-tag,
.end-panel-floor {
  font-family: var(--font-text);
  font-weight: 700;
  letter-spacing: 0;
  word-spacing: 0;
}
.end-review-count { margin: -4px 0 12px; font-size: var(--chrome-sentence); color: var(--muted); }
.end-review .end-empty { margin-bottom: 12px; }
.end-q-rating { display: flex; align-items: center; gap: 8px; }
.end-q-rating-label { font-size: var(--chrome-label); color: var(--muted); }
.end-q-board { padding: 6px 10px; background: var(--bad-bg); border-left: 5px solid var(--bad); border-radius: 4px; }
.end-q-failed-list,
.rp-note-failed { margin: 4px 0 0; padding-left: 22px; font-family: var(--font-text); font-size: 15px; line-height: 1.45; }
.end-q-failed { color: var(--bad); }
.end-full {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
}
.end-full p { margin: 6px 0; }
.end-full pre { overflow-x: auto; font-size: 13px; }
.end-full code, .end-q-text code, .end-panel-q code { font-size: 0.92em; }

/* ==========================================================================================
   The Old Line (Task 13b): a station's destination list, DOM in #overlay over the world canvas.
   Chrome tokens: Pixelify Sans at weight 500, labels 14px, sentences 16px and up.
   ========================================================================================== */
.rp-travel { width: 460px; }
.rp-travel-body { display: flex; flex-direction: column; gap: 6px; max-height: 470px; overflow-y: auto; padding-bottom: 14px; }
.rp-travel-jenks {
  padding: 8px 12px;
  background: var(--cream);
  border: 2px dashed var(--ink);
  border-radius: 6px;
}
.rp-travel-by { font-size: var(--chrome-label); color: var(--muted); }
.rp-travel-line { margin: 4px 0 0; font-size: 18px; color: var(--text); }
.rp-travel-line::before { content: '"'; }
.rp-travel-line::after { content: '"'; }
.rp-travel-stop {
  flex: none;
  padding: 5px 14px;
  font-size: 20px;
  font-weight: var(--chrome-weight);
  color: var(--text);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 rgba(52, 73, 94, 0.3);
  cursor: pointer;
  user-select: none;
}
.rp-travel-stop.cursor { background: var(--accent); }
.rp-travel-stop.cursor::before { content: '> '; }
.rp-travel-empty { font-family: var(--font-pixel); font-size: var(--chrome-sentence); }
.rp-bell-line:empty { display: none; }
.rp-travel .sns-foot span { white-space: pre-wrap; }
/* ==========================================================================================
   Rehearsal Room (Task 15, spec 6.9): the topic menu, the Old Line station menu's card with the
   twelve topics in two columns filled top to bottom (the cursor walks the list in that order).
   ========================================================================================== */
/* Rewards spec 5.2: 850px for the coverage on each topic row. The card never outgrows the 640px
   screen: past that the body scrolls (the menu cursor keeps its row in view). */
.rp-rehearsal { width: 850px; max-height: 632px; display: flex; flex-direction: column; }
.rp-rehearsal .sns-head, .rp-rehearsal .sns-foot { flex: none; }
.rp-rehearsal-body { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; min-height: 0; overflow-y: auto; }
.rp-rehearsal-body > * { flex: none; }
.rp-rehearsal-intro { margin: 0; font-size: var(--chrome-sentence); color: var(--text); }
.rp-rehearsal-note { margin: 0; font-size: var(--chrome-sentence); color: var(--note-text); }
.rp-rehearsal-note:empty { display: none; }
/* Rewards spec 5.1: the Notebook and Mixed rows, full width above the topics. */
.rp-rehearsal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  color: var(--text);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 rgba(52, 73, 94, 0.3);
  cursor: pointer;
  user-select: none;
}
.rp-rehearsal-row.cursor { background: var(--accent); }
.rp-rehearsal-row.cursor::before { content: '>'; }
.rp-rehearsal-row .rp-rehearsal-name { flex: 1 1 auto; min-width: 0; }
.rp-rehearsal-count { flex: none; font-size: var(--chrome-label); font-weight: normal; color: var(--note-text); white-space: nowrap; }
.rp-rehearsal-row.cursor .rp-rehearsal-count { color: var(--text); }
.rp-rehearsal-row.empty { opacity: 0.55; box-shadow: none; }
.rp-rehearsal-row.empty .rp-rehearsal-count { color: var(--muted); }
.rp-rehearsal-row.spent .rp-rehearsal-name { text-decoration: line-through; }
.rp-rehearsal-sub { margin: -4px 0 2px 12px; font-size: var(--chrome-label); color: var(--muted); }
.rp-rehearsal-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  gap: 6px 10px;
}
.rp-rehearsal-cat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-size: 18px;
  color: var(--text);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 rgba(52, 73, 94, 0.3);
  cursor: pointer;
  user-select: none;
}
.rp-rehearsal-cat.cursor { background: var(--accent); }
.rp-rehearsal-cat.cursor::before { content: '>'; }
.rp-rehearsal-chip { flex: none; width: 14px; height: 14px; padding: 0; border: 2px solid var(--ink); border-radius: 3px; }
.rp-rehearsal-name { flex: 1 1 auto; }
.rp-rehearsal-spent { flex: none; font-size: var(--chrome-label); color: var(--muted); }
/* A long name wraps first; the coverage drops under it, still right-aligned, only when even the
   name's longest word leaves no room (no card fits every name beside its full Notebook count). */
.rp-rehearsal-cat .rp-rehearsal-name { flex: 1 1 0; min-width: min-content; }
.rp-cov { flex: none; margin-left: auto; font-size: var(--chrome-label); color: var(--note-text); white-space: nowrap; }
.rp-rehearsal-cat.cursor .rp-cov { color: var(--text); }
.rp-rehearsal-cat.spent .rp-rehearsal-name { text-decoration: line-through; }
.rp-rehearsal-cat.cursor .rp-rehearsal-spent { color: var(--text); }
.rp-rehearsal .sns-foot span { white-space: pre-wrap; }

/* The Dockerfile bench (js/scenes/config-bench.js; mockups/dockerfile-bench.html): the file as
   monospace rows in #panel, the meters under it, the build's error in #under. */
#panel .cb-tier { font-size: var(--chrome-label); }
#panel .cb-brief { margin: 0; font-size: 15px; line-height: 1.45; }
#panel .cb-file {
  padding: 4px 0;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 8px;
  font-family: ui-monospace, 'DejaVu Sans Mono', monospace;
  font-size: 13.5px;
}
#panel .cb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 8px;
  border-left: 4px solid transparent;
  white-space: pre;
}
#panel .cb-row.cb-stage { border-top: 2px dashed var(--key-bg); }
#panel .cb-row.cur { background: #fbf1d6; border-left-color: var(--hover); }
#panel .cb-row.carry { background: #ffe2b0; border-left-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
#panel .cb-row.fail { background: var(--bad-bg); }
#panel .cb-n { flex: none; width: 20px; text-align: right; color: var(--muted); }
#panel .cb-t { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
#panel .cb-chip {
  flex: none;
  padding: 0 5px;
  font-family: var(--font-pixel);
  font-size: 12px;
  color: #fff;
  background: var(--bad);
  border-radius: 3px;
}
#panel .cb-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 14px; }
#panel .cb-meter { display: flex; gap: 6px; align-items: baseline; }
#panel .cb-dot {
  position: relative;
  top: 1px;
  flex: none;
  width: 11px;
  height: 11px;
  background: var(--key-bg);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
#panel .cb-dot.g { background: var(--ok); }
#panel .cb-dot.r { background: var(--bad); }
#panel .cb-meter-name { color: var(--muted); }
#under .cb-error code {
  font-family: ui-monospace, 'DejaVu Sans Mono', monospace;
  font-size: 14px;
  overflow-wrap: anywhere;
}
/* The Packing List card in the laptop's Items tab. */
.rp-pack-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
/* display: flex above would beat the hidden attribute's own display: none. */
.rp-pack-list[hidden] { display: none; }
.rp-pack-line { padding: 2px 0 4px; border-bottom: 1px dashed var(--key-bg); }
.rp-pack-code { font-family: ui-monospace, 'DejaVu Sans Mono', monospace; font-size: 13px; white-space: pre-wrap; }
.rp-pack-note { margin: 2px 0 0; font-family: var(--font-text); font-size: 14px; color: var(--muted); }

/* ---- Dad's map (js/scenes/map.js, paper map spec) ----
   The sheet is one pixel-art canvas at RP.valleyMap.PAPER's logical size shown at its scale; the
   words sit over it. Each .rp-landmark is a zero-size anchor at its drawing's centre. */
.rp-paper-shade { background: rgba(10, 14, 20, 0.6); }
.rp-paper {
  position: relative;
  flex: none;
  background: #f1e4c2;
  color: #2b2114;
  font-family: var(--font-pixel);
  image-rendering: pixelated;
  box-shadow: 6px 8px 0 rgba(0, 0, 0, 0.35);
}
.rp-paper-art { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.rp-landmark { position: absolute; width: 0; height: 0; pointer-events: none; }
.rp-landmark-label {
  position: absolute;
  top: 34px;
  width: 150px;
  text-align: center;
  line-height: 1.05;
}
.rp-landmark-name,
.rp-landmark-note {
  display: table;
  margin: 0 auto;
  padding: 0 4px;
  background: rgba(241, 228, 194, 0.9);
}
.rp-landmark-name { font-size: 14px; }
.rp-landmark-note { font-size: 13px; color: #7a6a52; }
.rp-landmark-note[data-state="done"] { color: #2f6b3a; }
.rp-landmark-note[data-state="done"]::before { content: "\2713  "; }
.rp-paper-here {
  position: absolute;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  color: #b3261e;
}
.rp-paper-here[data-side="left"] { transform: translateX(-100%); }
.rp-paper-hq {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  color: #7a6a52;
}
.rp-paper-hq[data-state="open"] { color: #2b2114; }
.rp-paper-cartouche {
  position: absolute;
  left: 228px;
  top: 22px;
  padding: 6px 14px;
  text-align: center;
  background: #f1e4c2;
  border: 6px double #2b2114;
}
.rp-paper-title { font-size: 22px; letter-spacing: 1px; }
.rp-paper-subtitle, .rp-paper-byline { font-size: 13px; color: #7a6a52; }
.rp-paper-footer { margin-top: 4px; font-size: 14px; }
.rp-paper-keys {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  text-align: center;
  font-size: 14px;
  color: #7a6a52;
}

/* Page-level notices (js/engine/notices.js): outside #stage, so the stage's zoom never shrinks them. */
.rp-notice {
  position: fixed;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  font-size: var(--chrome-sentence);
  color: var(--text);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--ink);
}
.rp-notice p { margin: 0; }
.rp-notice-phone {
  inset: 16px;
  justify-content: center;
  font-size: 22px;
}
.rp-notice-crash {
  left: 50%;
  bottom: 24px;
  width: min(560px, calc(100vw - 32px));
  transform: translateX(-50%);
  border-color: var(--bad);
  box-shadow: 4px 4px 0 var(--bad);
}
.rp-notice-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.rp-notice-btn {
  font: inherit;
  font-size: var(--chrome-sentence);
  padding: 8px 14px;
  color: var(--text);
  background: var(--accent);
  border: 2px solid var(--ink);
  border-radius: 6px;
  cursor: pointer;
}
.rp-notice-btn:hover { background: var(--hover); }
.rp-notice-btn-quiet { background: var(--key-bg); }
.rp-notice-btn-quiet:hover { background: #d8cca8; }
.rp-notice-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }