/* =============================================================================
 * pixel.css — Get Certified Unified :: PIXEL SKIN (Option A), fully scoped.
 *
 * GENERATED by scope-pixel-css.cjs from _optionA-reference/styles.css.
 * EVERY rule is scoped under body[data-mode="pixel"] so it cannot bleed into
 * the serious skin. Chrome classes that collide with the SHARED persistent
 * header (.topbar/.topnav/.brand/.brand-sub) are renamed to a .px-* namespace.
 * Palette / tokens / fonts are scoped to pixel mode via the :root -> body
 * [data-mode="pixel"] rewrite, so serious tokens (--accent, --radius, fonts)
 * are never touched. Do not edit by hand — re-run the generator.
 * ========================================================================== */
/* =============================================================================
 * Get Certified — Pixel Overworld  ::  styles.css
 * Stage 1 design system. Palette = DawnBringer 16 (warm, limited, hue-shifted).
 * Fonts self-hosted via @font-face from S3/CloudFront in prod; Stage 1 uses a
 * Google Fonts <link> fallback in index.html (all SIL OFL 1.1 faces).
 * Motion honors prefers-reduced-motion. Audio is muted (no sound anywhere).
 * ========================================================================== */

/* ---- 1. Palette + design tokens --------------------------------------- */
body[data-mode="pixel"] {
  /* DawnBringer 16 */
  --db-shadow:   #140c1c;  /* deepest */
  --db-wine:     #442434;
  --db-navy:     #30346d;
  --db-gray:     #4e4a4e;
  --db-brown:    #854c30;
  --db-forest:   #346524;
  --db-red:      #d04648;
  --db-stone:    #757161;
  --db-blue:     #597dce;
  --db-orange:   #d27d2c;
  --db-coolgray: #8595a1;
  --db-grass:    #6daa2c;
  --db-sand:     #d2aa99;
  --db-teal:     #6dc2ca;
  --db-gold:     #dad45e;
  --db-white:    #deeed6;

  /* semantic roles */
  --bg:          var(--db-navy);       /* sky base behind the world */
  --bg-deep:     var(--db-shadow);
  --panel-fill:  #241a2b;              /* warm-dark parchment window fill */
  --panel-fill2: #2f2233;
  --panel-edge:  var(--db-orange);     /* warm wooden border */
  --panel-edge-hi: var(--db-sand);     /* 1px inner highlight */
  --panel-edge-lo: var(--db-wine);     /* outer shadow */
  --ink:         var(--db-white);      /* body text on dark panels */
  --ink-dim:     var(--db-coolgray);
  --accent:      var(--db-teal);
  --xp:          var(--db-gold);
  --xp-track:    #3a2a1c;
  --danger:      var(--db-red);
  --link:        var(--db-teal);

  /* fonts — ONE coherent pixel system:
   * display face (Press Start 2P) reserved for large headings; a legible
   * open-glyph pixel face (Pixelify Sans) for all body + labels so the
   * capital C never collapses into an O. */
  --font-display: 'Press Start 2P', 'Courier New', monospace;
  --font-body:    'Pixelify Sans', 'Trebuchet MS', system-ui, sans-serif;
  --font-small:   'Pixelify Sans', 'Trebuchet MS', system-ui, sans-serif;
  /* READABLE body face — used ONLY for long-form study copy (concept summary,
   * blocks, key terms, tips, quiz stems/options/explanations, cheat/lab prose).
   * The pixel faces above stay reserved for chrome: HUD, titles, buttons,
   * labels, badges, tabs. Pixel font for paragraphs is exhausting to read. */
  --font-read:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* NUMERIC face — exam-critical numbers (question counts, pass score 700/1000,
   * durations, node tallies) must be unambiguous: 1 vs 7, 0 vs O. The pixel face
   * blurs these at info-dense sizes, so any digit-bearing meta string uses a
   * legible mono with a touch of letter-spacing via the .px-num helper. */
  --font-num:     'JetBrains Mono', 'Roboto Mono', ui-monospace, 'Consolas', monospace;

  /* pixel grid unit + integer-scaled sizes */
  --px: 4px;                 /* one design pixel at 4x */
  --frame: 4px;              /* 9-slice border width (integer) */
  --gap: 16px;
  --radius: 0px;             /* pixels don't do rounded corners */

  /* motion tokens */
  --hop: cubic-bezier(0.34, 1.56, 0.64, 1);   /* springy back-ease overshoot */
  --snap: steps(4, end);
  --t-fast: 90ms;
  --t-mid: 160ms;
  --t-slow: 280ms;
}

/* ---- 2. Reset + crisp-pixel globals ----------------------------------- */
body[data-mode="pixel"] *,
body[data-mode="pixel"] *::before,
body[data-mode="pixel"] *::after { box-sizing: border-box; }
body[data-mode="pixel"],
body[data-mode="pixel"] { margin: 0; padding: 0; height: 100%; }
body[data-mode="pixel"] {
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.4;
  /* Pixelify Sans is a vector pixel face — let it antialias so the C keeps its
   * open top. Killing font-smoothing here is what collapsed C into O. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: none;     /* keep the pixel face crisp (no fi ligature) */
  overflow: hidden;                 /* the world scrolls, not the page */
}

/* Crisp pixels everywhere art lives */
body[data-mode="pixel"] img,
body[data-mode="pixel"] .pixel,
body[data-mode="pixel"] svg.pixel,
body[data-mode="pixel"] .sprite svg,
body[data-mode="pixel"] .hud-icon svg,
body[data-mode="pixel"] .node svg,
body[data-mode="pixel"] [data-sprite] svg {
  image-rendering: crisp-edges;      /* older Firefox */
  image-rendering: pixelated;        /* primary */
}
body[data-mode="pixel"] svg { display: block; }

body[data-mode="pixel"] button { font-family: inherit; color: inherit; cursor: pointer; }
body[data-mode="pixel"] a { color: var(--link); text-decoration: none; }
body[data-mode="pixel"] a:hover,
body[data-mode="pixel"] a:focus-visible { text-decoration: underline; }

body[data-mode="pixel"] :focus-visible {
  outline: var(--frame) solid var(--db-gold);
  outline-offset: 2px;
}

/* ---- 3. App layout skeleton ------------------------------------------- */
body[data-mode="pixel"] #gc-root {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);   /* never let a wide row expand past the viewport */
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background:
    linear-gradient(180deg, #3a4fa0 0%, var(--db-blue) 42%, var(--db-teal) 100%);
}

/* ---- 4. Top menu (header) --------------------------------------------- */
body[data-mode="pixel"] .px-topbar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 10px 16px;
  background: var(--panel-fill);
  border-bottom: var(--frame) solid var(--panel-edge-lo);
  box-shadow: 0 var(--frame) 0 0 #0006;
  z-index: 30;
  position: relative;
}
body[data-mode="pixel"] .px-brand {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--db-gold);
  text-shadow: 2px 2px 0 var(--db-wine);
  letter-spacing: 1px;
  white-space: nowrap;
}
body[data-mode="pixel"] .px-brand .px-brand-sub {
  display: block;
  font-family: var(--font-small);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--db-teal);
  text-shadow: none;
  margin-top: 4px;
}
body[data-mode="pixel"] .px-topnav { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

/* ---- 5. Pixel button component ---------------------------------------- */
body[data-mode="pixel"] .btn {
  --b: var(--db-orange);
  font-family: var(--font-small);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--db-white);
  background: var(--panel-fill2);
  border: none;
  padding: 10px 14px;
  position: relative;
  /* chunky pixel bevel via layered box-shadow (no blur) */
  box-shadow:
    0 0 0 2px var(--db-shadow),
    inset 2px 2px 0 0 color-mix(in srgb, var(--b) 55%, var(--db-white)),
    inset -2px -2px 0 0 var(--db-wine),
    0 4px 0 0 var(--db-shadow);
  transition: transform var(--t-fast) var(--hop), box-shadow var(--t-fast);
  image-rendering: pixelated;
}
body[data-mode="pixel"] .btn:hover { transform: translateY(-2px); }
body[data-mode="pixel"] .btn:active {
  transform: translateY(2px);
  box-shadow:
    0 0 0 2px var(--db-shadow),
    inset 2px 2px 0 0 var(--db-wine),
    inset -2px -2px 0 0 color-mix(in srgb, var(--b) 55%, var(--db-white));
}
body[data-mode="pixel"] .btn[aria-current="page"],
body[data-mode="pixel"] .btn.is-active {
  --b: var(--db-teal);
  color: var(--db-shadow);
  background: var(--db-teal);
}
body[data-mode="pixel"] .btn .btn-ico { margin-right: 6px; }

/* ---- 5b. SHARED persistent topbar, re-skinned for pixel mode ----------- *
 * The .topbar element is built once by ui.js and survives the mode swap, so it
 * carries serious styling by default. In pixel mode that left the light-gray
 * bar with a washed-out near-white wordmark (low contrast). Give it a solid,
 * dark, framed pixel treatment so the wordmark + nav clear WCAG AA. */
body[data-mode="pixel"] .topbar {
  background: var(--panel-fill);
  border-bottom: var(--frame) solid var(--panel-edge-lo);
  box-shadow: 0 var(--frame) 0 0 #0006;
  backdrop-filter: none;
  /* Keep the persistent chrome (esp. the mode toggle) ABOVE the level/castle
   * overlay (z-index 70) so a learner who toggled Serious->Pixel into a concept
   * level can always flip straight back — the global skin switch must never be
   * trapped behind a modal it is orthogonal to. */
  z-index: 80;
}
body[data-mode="pixel"] .topbar-brand { color: var(--db-gold); }
body[data-mode="pixel"] .topbar-brand .wordmark {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--db-gold);
  text-shadow: 2px 2px 0 var(--db-wine);
  letter-spacing: 1px;
}
body[data-mode="pixel"] .topbar-brand .mark {
  color: var(--db-shadow);
  background: var(--db-gold);
  border-color: var(--db-gold);
}
body[data-mode="pixel"] .topnav a,
body[data-mode="pixel"] .topnav button {
  font-family: var(--font-small);
  font-weight: 600;
  color: var(--db-white);
}
body[data-mode="pixel"] .topnav a:hover,
body[data-mode="pixel"] .topnav button:hover {
  background: var(--panel-fill2);
  color: var(--db-gold);
}
body[data-mode="pixel"] .topnav a.active {
  color: var(--db-shadow);
  background: var(--db-teal);
}
body[data-mode="pixel"] .topbar .icon-btn {
  color: var(--db-gold);
  background: var(--db-shadow);
  box-shadow: inset 0 0 0 2px var(--db-gold);
  border-radius: 0;
}
body[data-mode="pixel"] .topbar .icon-btn:hover {
  color: var(--db-shadow);
  background: var(--db-gold);
}
body[data-mode="pixel"] .topbar .icon-btn svg { stroke: currentColor; }

/* Optional login/logout control — pixel skin. Mirrors the .icon-btn treatment
 * (gold-on-shadow chunky frame, hard corners, hover invert) so it reads as part
 * of the pixel HUD. Long emails truncate via the shared .gc-auth-btn ellipsis. */
body[data-mode="pixel"] .gc-auth-btn {
  font-family: var(--font-small);
  font-weight: 600;
  color: var(--db-gold);
  background: var(--db-shadow);
  box-shadow: inset 0 0 0 2px var(--db-gold);
  border: 0;
  border-radius: 0;
  padding: 8px 12px;
}
body[data-mode="pixel"] .gc-auth-btn:hover {
  color: var(--db-shadow);
  background: var(--db-gold);
}

/* ---- 6. 9-slice pixel panel / frame ----------------------------------- *
 * Crafted wooden/parchment RPG window: warm-dark fill, layered chunky border,
 * 1px inner highlight. Built from stacked box-shadows (no image dependency).
 */
body[data-mode="pixel"] .panel {
  background:
    linear-gradient(180deg, var(--panel-fill2) 0%, var(--panel-fill) 100%);
  color: var(--ink);
  padding: 20px 22px;
  position: relative;
  box-shadow:
    0 0 0 var(--frame) var(--panel-edge),               /* wooden border   */
    0 0 0 calc(var(--frame) * 2) var(--panel-edge-lo),  /* outer shadow    */
    inset 0 0 0 2px var(--panel-edge-hi),               /* inner highlight */
    0 8px 0 0 #0007;                                    /* drop (no blur)  */
}
body[data-mode="pixel"] .panel > .panel-title {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--db-gold);
  text-shadow: 2px 2px 0 var(--db-wine);
  margin: 0 0 14px;
  line-height: 1.5;
}
body[data-mode="pixel"] .panel--parchment {
  --panel-fill: #2a2030;
  --panel-edge: var(--db-sand);
  --panel-edge-hi: var(--db-white);
}

/* ---- 7. HUD ----------------------------------------------------------- */
body[data-mode="pixel"] .hud {
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 20;
  pointer-events: none;             /* clicks pass through to map */
}
body[data-mode="pixel"] .hud .panel { pointer-events: auto; padding: 12px 16px 12px 14px; }
/* HUD status block: each line wraps with a hanging indent so the "N/N cleared"
   tally never jams against the panel's right border; ~10px inner right breathing
   room comes from the panel padding above. */
body[data-mode="pixel"] .hud-status { max-width: 230px; }
body[data-mode="pixel"] .hud-status-line {
  display: block;
  padding-right: 4px;
  line-height: 1.4;
  text-indent: 0;
  padding-left: 0;
}
body[data-mode="pixel"] .hud-status-sub { margin-top: 2px; color: var(--db-coolgray); }
body[data-mode="pixel"] .hud-row { display: flex; align-items: center; gap: 10px; }
body[data-mode="pixel"] .hud-icon { width: 28px; height: 28px; flex: 0 0 28px; }
body[data-mode="pixel"] .hud-badge {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--db-gold);
  text-shadow: 2px 2px 0 var(--db-wine);
}
body[data-mode="pixel"] .hud-label { font-family: var(--font-small); font-size: 14px; font-weight: 500; color: var(--ink-dim); }
body[data-mode="pixel"] .hud-num { font-family: var(--font-body); font-size: 22px; font-weight: 600; color: var(--db-white); }

/* XP bar */
body[data-mode="pixel"] .xpbar {
  width: 180px;
  height: 16px;
  background: var(--xp-track);
  box-shadow: inset 0 0 0 2px var(--db-shadow), 0 0 0 2px var(--db-brown);
  position: relative;
  overflow: hidden;
}
body[data-mode="pixel"] .xpbar > .xpbar-fill {
  height: 100%;
  width: var(--xp-pct, 40%);
  background:
    repeating-linear-gradient(90deg,
      var(--db-gold) 0 6px, var(--db-orange) 6px 8px);
  box-shadow: inset 0 -3px 0 0 #0004, inset 0 2px 0 0 #fff3;
  transition: width var(--t-slow) var(--snap);
}

/* hearts row */
body[data-mode="pixel"] .hearts { display: flex; gap: 4px; }
body[data-mode="pixel"] .hearts .hud-icon { width: 22px; height: 22px; flex-basis: 22px; }
body[data-mode="pixel"] .hearts .is-empty { opacity: 0.25; filter: grayscale(1); }

/* ---- 8. World / map stage --------------------------------------------- */
body[data-mode="pixel"] .stage {
  position: relative;
  overflow: hidden;
}
body[data-mode="pixel"] .world {
  position: absolute;
  inset: 0;
  will-change: transform;
}
body[data-mode="pixel"] .parallax {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
body[data-mode="pixel"] .clouds .sprite { position: absolute; opacity: 0.9; }

/* level node on the map */
body[data-mode="pixel"] .node {
  position: absolute;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  background: none;
  border: none;
  padding: 0;
}
body[data-mode="pixel"] .node .node-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--db-shadow);
  text-shadow: 1px 1px 0 var(--db-white);
  pointer-events: none;
}
body[data-mode="pixel"] .node[data-state="locked"] { cursor: not-allowed; }
body[data-mode="pixel"] .node[data-state="current"] { animation: nodePulse 1.1s var(--snap) infinite; }

/* sprite wrapper keeps SVG square + crisp */
body[data-mode="pixel"] .sprite { display: inline-block; line-height: 0; }
body[data-mode="pixel"] .sprite svg { width: 100%; height: 100%; }

/* ---- 9. Readable concept content (the ONE place with clean typography) - *
 * Body copy inside a level panel is deliberately legible: larger VT323 with
 * comfortable measure. Headings still use the display face for flavor.
 */
body[data-mode="pixel"] .content {
  font-family: var(--font-read);
  font-size: 19px;
  line-height: 1.65;
  color: var(--db-white);
  max-width: 68ch;
}
body[data-mode="pixel"] .content h1,
body[data-mode="pixel"] .content h2,
body[data-mode="pixel"] .content h3 { font-family: var(--font-display); color: var(--db-gold); line-height: 1.6; }
body[data-mode="pixel"] .content h1 { font-size: 16px; }
body[data-mode="pixel"] .content h2 { font-size: 13px; }
body[data-mode="pixel"] .content p { margin: 0 0 14px; }
body[data-mode="pixel"] .content strong { color: var(--db-teal); }
body[data-mode="pixel"] .content em { color: var(--db-sand); font-style: normal; }
/* inline code identifiers — one consistent treatment (mono + tint chip),
   underscores intact, long identifiers wrap instead of overflowing. */
body[data-mode="pixel"] .content code {
  font-family: var(--font-read); font-weight: 600; font-size: .92em;
  color: var(--db-gold); background: #dad45e1a; padding: .04em .34em;
  border-radius: 3px; overflow-wrap: anywhere;
}
body[data-mode="pixel"] .content .tag {
  display: inline-block;
  font-family: var(--font-small);
  font-size: 11px;
  color: var(--db-shadow);
  background: var(--db-gold);
  padding: 3px 8px;
  margin-bottom: 10px;
}
body[data-mode="pixel"] .content .children { list-style: none; padding: 0; margin: 12px 0; }
body[data-mode="pixel"] .content .children li {
  padding: 8px 12px;
  margin-bottom: 6px;
  background: #ffffff0c;
  box-shadow: inset 3px 0 0 0 var(--db-teal);
}
body[data-mode="pixel"] .content .fig {
  margin: 16px 0;
  padding: 12px;
  background: var(--db-white);
  box-shadow: 0 0 0 3px var(--db-brown);
}
body[data-mode="pixel"] .content .fig svg { width: 100%; height: auto; }
body[data-mode="pixel"] .content .figcap {
  font-family: var(--font-small);
  font-size: 11px;
  color: var(--ink-dim);
  margin-top: 6px;
  text-align: center;
}
body[data-mode="pixel"] .content .tip {
  margin-top: 16px;
  padding: 12px 14px;
  background: #6dc2ca1a;
  box-shadow: inset 4px 0 0 0 var(--db-teal);
  font-size: 20px;
}
body[data-mode="pixel"] .content .tip::before {
  content: "TIP";
  display: block;
  font-family: var(--font-small);
  font-size: 11px;
  color: var(--db-teal);
  margin-bottom: 4px;
}

/* ---- 9b. Enriched concept content (optional schema fields) ------------ *
 * deepDive · worked example · inline demo · pitfall · quick-check.
 * Prose keeps the READABLE body font (--font-read); only labels use pixel
 * faces. All absent fields render nothing (backward-compatible). */
body[data-mode="pixel"] .content .deep-dive {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 3px solid #ffffff1f;
}
body[data-mode="pixel"] .content .dd-label,
body[data-mode="pixel"] .content .we-label {
  display: block;
  font-family: var(--font-small);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--db-gold);
  margin-bottom: 8px;
}
body[data-mode="pixel"] .content .worked-example {
  margin-top: 16px;
  padding: 14px;
  background: #ffffff0a;
  box-shadow: inset 4px 0 0 0 var(--db-orange);
}
body[data-mode="pixel"] .content .worked-example .we-label { color: var(--db-orange); }
body[data-mode="pixel"] .content .we-part { margin-bottom: 10px; }
body[data-mode="pixel"] .content .we-part:last-child { margin-bottom: 0; }
body[data-mode="pixel"] .content .we-part-tag {
  display: block;
  font-family: var(--font-small);
  font-size: 11px;
  color: var(--db-sand);
  margin-bottom: 3px;
}
body[data-mode="pixel"] .content .we-part p { margin: 0; }

body[data-mode="pixel"] .content .concept-demo {
  margin-top: 16px;
  padding: 14px;
  background: #6dc2ca12;
  box-shadow: inset 4px 0 0 0 var(--db-teal);
}
body[data-mode="pixel"] .content .cd-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
body[data-mode="pixel"] .content .cd-label {
  font-family: var(--font-small); font-size: 11px; color: var(--db-shadow);
  background: var(--db-teal); padding: 2px 7px;
}
body[data-mode="pixel"] .content .cd-title { font-family: var(--font-small); font-size: 14px; color: var(--db-white); }
body[data-mode="pixel"] .content .cd-steps { margin: 0; padding-left: 1.3em; }
body[data-mode="pixel"] .content .cd-step { margin-bottom: 12px; }
body[data-mode="pixel"] .content .cd-step-detail { margin: 4px 0 0; font-size: 16px; color: var(--ink-dim); }
body[data-mode="pixel"] .content .cd-cmd {
  margin: 8px 0 0; padding: 10px 12px; background: var(--db-shadow);
  overflow-x: auto;
}
body[data-mode="pixel"] .content .cd-cmd code {
  font-family: var(--font-body); font-size: 15px; color: var(--db-gold);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
/* formatted code snippet (concept.code) inside a pixel level */
body[data-mode="pixel"] .content .code-example {
  margin: 16px 0; box-shadow: inset 0 0 0 3px var(--panel-edge-lo);
}
body[data-mode="pixel"] .content .code-example .ce-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--panel-fill2);
}
body[data-mode="pixel"] .content .code-example .ce-lang {
  font-family: var(--font-small); font-size: 11px; color: var(--db-shadow);
  background: var(--db-gold); padding: 2px 7px;
}
body[data-mode="pixel"] .content .code-example .ce-caption {
  font-family: var(--font-read); font-size: 14px; color: var(--ink-dim);
}
body[data-mode="pixel"] .content .code-example .ce-body {
  margin: 0; padding: 12px 14px; background: var(--db-shadow); overflow-x: auto;
}
body[data-mode="pixel"] .content .code-example .ce-body code {
  font-family: var(--font-read); font-weight: 500; font-size: 14px; line-height: 1.6;
  color: var(--db-gold); background: none; padding: 0; white-space: pre; display: block;
}

body[data-mode="pixel"] .content .cd-takeaway {
  margin-top: 12px; padding: 10px 12px; background: #dad45e1a;
}
body[data-mode="pixel"] .content .cd-takeaway-label {
  display: block; font-family: var(--font-small); font-size: 11px; color: var(--db-gold); margin-bottom: 4px;
}
body[data-mode="pixel"] .content .cd-takeaway p { margin: 0; }

body[data-mode="pixel"] .content .pitfall-callout {
  margin-top: 16px; padding: 12px 14px; background: #d046481f;
  box-shadow: inset 4px 0 0 0 var(--db-red);
}
body[data-mode="pixel"] .content .pitfall-label {
  display: block; font-family: var(--font-small); font-size: 11px; color: var(--db-red); margin-bottom: 4px;
}
body[data-mode="pixel"] .content .pitfall-callout p { margin: 0; }

/* interstitial quick-check inside the pixel read view */
body[data-mode="pixel"] .concept-check {
  margin: 16px 0 0; padding: 14px;
  background: var(--panel-fill2);
  box-shadow: inset 0 0 0 3px var(--db-orange);
}
body[data-mode="pixel"] .concept-check .cc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px;
}
body[data-mode="pixel"] .concept-check .cc-kicker { font-family: var(--font-small); font-size: 12px; color: var(--db-gold); }
body[data-mode="pixel"] .concept-check .cc-hint { font-family: var(--font-small); font-size: 11px; color: var(--ink-dim); }
body[data-mode="pixel"] .concept-check .cc-stem {
  font-family: var(--font-read); font-size: 18px; line-height: 1.5; color: var(--db-white); margin-bottom: 12px;
}
body[data-mode="pixel"] .concept-check .cc-opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body[data-mode="pixel"] .concept-check .cc-feedback:not(:empty) { margin-top: 12px; }

/* ---- 10. Modal / overlay panel --------------------------------------- */
body[data-mode="pixel"] .overlay {
  position: fixed;
  inset: 0;
  background: #140c1ccc;
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 50;
}
body[data-mode="pixel"] .overlay .panel {
  max-width: min(760px, 92vw);
  max-height: 86vh;
  overflow: auto;
  width: 100%;
}
body[data-mode="pixel"] .overlay-close {
  position: absolute;
  top: 10px; right: 12px;
}

/* achievement toast */
body[data-mode="pixel"] .toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
}
body[data-mode="pixel"] .toast .hud-icon { width: 32px; height: 32px; flex-basis: 32px; }

/* ---- 11. Utility ------------------------------------------------------ */
body[data-mode="pixel"] .stack > * + * { margin-top: 12px; }
body[data-mode="pixel"] .row { display: flex; align-items: center; gap: 10px; }
body[data-mode="pixel"] .hidden { display: none !important; }
body[data-mode="pixel"] .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
body[data-mode="pixel"] .muted { color: var(--ink-dim); }
body[data-mode="pixel"] .center { text-align: center; }

/* loading splash before JS mounts */
body[data-mode="pixel"] .boot {
  display: grid;
  place-items: center;
  height: 100vh;
  gap: 16px;
  text-align: center;
}
body[data-mode="pixel"] .boot .px-brand { font-size: 22px; }
body[data-mode="pixel"] .boot .boot-hint { font-family: var(--font-small); font-size: 12px; color: var(--db-teal); }

/* ---- 12. Motion ------------------------------------------------------- */
@keyframes nodePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.14); }
}
@keyframes nodePop {
  0%   { transform: translate(-50%, -50%) scale(0); }
  70%  { transform: translate(-50%, -50%) scale(1.15); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes drift {
  from { transform: translateX(-120px); }
  to   { transform: translateX(120vw); }
}
body[data-mode="pixel"] .pop-in { animation: nodePop var(--t-slow) var(--hop) both; }
body[data-mode="pixel"] .bob { animation: bob 2.4s var(--snap) infinite; }
body[data-mode="pixel"] .drift { animation: drift 60s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  body[data-mode="pixel"] *,
body[data-mode="pixel"] *::before,
body[data-mode="pixel"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body[data-mode="pixel"] .node[data-state="current"] { animation: none; }
}

/* =============================================================================
 * STAGE 2 — Overworld map + cert picker
 * ========================================================================== */

/* ---- 14. Cert picker (continent / title select) — authored overworld --- */
body[data-mode="pixel"] .picker {
  position: absolute;
  inset: 0;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 24px 24px 0;
}
/* sky: dawn gradient (warmer, more authored than the old muddy teal) */
body[data-mode="pixel"] .picker-sky {
  background:
    linear-gradient(180deg, #2a2d63 0%, #3a4fa0 30%, #597dce 60%, #6dc2ca 100%);
  z-index: 0;
}
/* scenery layer: sun, clouds, far mountain silhouette */
body[data-mode="pixel"] .picker-scenery { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
body[data-mode="pixel"] .picker-sun {
  position: absolute; top: 7%; right: 13%;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, #f4e08a 0 42%, var(--db-gold) 42% 100%);
  box-shadow: 0 0 0 8px #dad45e26, 0 0 0 18px #dad45e14, 0 0 30px 6px #dad45e33;
}
body[data-mode="pixel"] .picker-cloud { position: absolute; width: 150px; height: 75px; opacity: 0.9; image-rendering: pixelated; }
body[data-mode="pixel"] .picker-cloud svg { width: 100%; height: 100%; }
body[data-mode="pixel"] .picker-cloud.c1 { top: 12%; left: 8%;  animation: drift 90s linear infinite; }
body[data-mode="pixel"] .picker-cloud.c2 { top: 22%; left: 46%; width: 110px; height: 55px; opacity: 0.7; animation: drift 120s linear infinite; }
body[data-mode="pixel"] .picker-cloud.c3 { top: 8%;  left: 70%; width: 120px; height: 60px; opacity: 0.8; animation: drift 105s linear infinite; }
body[data-mode="pixel"] .picker-mountains {
  position: absolute; bottom: 30%; left: 0; right: 0; height: 180px;
  background:
    linear-gradient(135deg, transparent 49.5%, #3a4a7a 50%) 0 0/220px 180px repeat-x,
    linear-gradient(45deg, transparent 49.5%, #46578f 50%) 60px 40px/260px 160px repeat-x;
  opacity: 0.5;
  mask-image: linear-gradient(180deg, #000 0 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 60%, transparent 100%);
}
/* the sea the island cards float over */
body[data-mode="pixel"] .picker-sea {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, #4a74c4 0%, var(--db-blue) 40%, #30346d 100%);
  box-shadow: inset 0 6px 0 0 #6dc2ca55;
}
body[data-mode="pixel"] .picker-sea::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 22px, #6dc2ca18 22px 26px);
}

body[data-mode="pixel"] .picker-inner { position: relative; z-index: 3; text-align: center; max-width: 1120px; width: 100%; padding-bottom: 40px; }
body[data-mode="pixel"] .picker-title {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--db-gold);
  text-shadow: 3px 3px 0 var(--db-wine), 6px 6px 0 #0006;
  letter-spacing: 1px;
  line-height: 1.5;
  margin-top: 8px;
}
body[data-mode="pixel"] .picker-sub {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  color: var(--db-white);
  margin: 12px auto 26px;
  /* Text-safe zone: a subtle inline backdrop + shadow keeps the tagline fully
     legible even when a drifting cloud sprite passes behind it (clouds sit at
     z-index 1, this at 3, but low-contrast overlap is still avoided). */
  display: inline-block;
  max-width: 40ch;
  padding: 6px 16px;
  background: #140c1cB3;
  border-radius: 4px;
  text-shadow: 1px 1px 0 var(--db-shadow), 0 0 8px #140c1c;
}
body[data-mode="pixel"] .continent-row {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}
body[data-mode="pixel"] .continent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 268px;
  padding: 16px 18px 20px;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(180deg, var(--panel-fill2) 0%, var(--panel-fill) 100%);
  /* accent-tinted wooden frame keyed off the cert's palette */
  box-shadow:
    0 0 0 var(--frame) var(--accent),
    0 0 0 calc(var(--frame) * 2) var(--accent-deep),
    inset 0 0 0 2px #ffffff22,
    0 10px 0 0 #0007;
  transition: transform var(--t-fast) var(--hop), box-shadow var(--t-mid);
}
body[data-mode="pixel"] .continent:hover,
body[data-mode="pixel"] .continent:focus-visible {
  transform: translateY(-8px);
  box-shadow:
    0 0 0 var(--frame) var(--accent),
    0 0 0 calc(var(--frame) * 2) var(--accent-deep),
    inset 0 0 0 2px #ffffff33,
    0 0 26px 2px color-mix(in srgb, var(--accent) 55%, transparent),
    0 16px 0 0 #0008;
}
body[data-mode="pixel"] .continent-flag {
  font-family: var(--font-small);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--db-shadow);
  background: var(--accent);
  padding: 4px 12px;
  margin-bottom: 4px;
  box-shadow: 0 3px 0 0 var(--accent-deep);
}
/* the landmark stands on a little tiled island with a shoreline shadow */
body[data-mode="pixel"] .continent-island {
  position: relative;
  width: 150px; height: 118px;
  display: flex; align-items: flex-end; justify-content: center;
  margin: 2px 0 4px;
}
body[data-mode="pixel"] .continent-island-ground {
  position: absolute; left: 50%; bottom: 6px;
  transform: translateX(-50%);
  width: 128px; height: 40px;
  background-repeat: repeat;
  background-size: 32px 32px;
  image-rendering: pixelated;
  border-radius: 50% / 60%;
  box-shadow: 0 8px 0 0 #140c1c55, inset 0 3px 0 0 #ffffff22;
}
body[data-mode="pixel"] .continent-emblem { position: relative; z-index: 2; width: 112px; height: 112px; filter: drop-shadow(2px 4px 0 #140c1c66); }
body[data-mode="pixel"] .continent-emblem svg { width: 100%; height: 100%; }
body[data-mode="pixel"] .continent-code {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--db-gold);
  text-shadow: 2px 2px 0 var(--db-wine);
}
body[data-mode="pixel"] .continent-name {
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 600;
  color: var(--db-white);
  line-height: 1.2;
  min-height: 2.4em;
  display: flex;
  align-items: center;
}
body[data-mode="pixel"] .continent-stat { font-family: var(--font-small); font-size: 14px; font-weight: 500; color: var(--db-coolgray); }
/* .px-num — legible mono numerals for exam-critical figures inside pixel chrome.
   Slightly larger + letter-spaced so 1/7 and 0/O never collide. Inherits color. */
body[data-mode="pixel"] .px-num {
  font-family: var(--font-num);
  font-weight: 600;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
/* Bump the exam-chip value a hair since it now carries the mono face. */
body[data-mode="pixel"] .exam-chip-v.px-num { font-size: 15px; }
/* Exam-fact HUD chips on the continent card — same factual fields as serious
   home (question count / duration / pass mark / domains), restyled as pixel. */
body[data-mode="pixel"] .continent-exam {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  width: 100%;
  margin: 2px 0 2px;
}
body[data-mode="pixel"] .exam-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 5px 4px;
  background: #140c1c66;
  border: 2px solid var(--accent-deep);
  box-shadow: inset 0 2px 0 0 #ffffff10, 0 2px 0 0 #140c1c66;
}
body[data-mode="pixel"] .exam-chip-v {
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 1.3;
  color: var(--db-gold);
  text-align: center;
}
body[data-mode="pixel"] .exam-chip-l {
  font-family: var(--font-small);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--db-coolgray);
}
body[data-mode="pixel"] .continent-cta {
  font-family: var(--font-small);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin-top: 6px;
}

/* ---- 14b. Segmented pixel progress meter ------------------------------ */
body[data-mode="pixel"] .pmeter { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; }
body[data-mode="pixel"] .pmeter-track {
  position: relative;
  flex: 1;
  height: 16px;
  background: var(--xp-track);
  /* notched segments so an empty bar still reads as a designed meter */
  background-image: repeating-linear-gradient(90deg, transparent 0 12px, #140c1c 12px 14px);
  box-shadow: inset 0 2px 0 0 #0007, inset 0 -2px 0 0 #ffffff14, 0 0 0 2px var(--db-shadow), 0 0 0 3px var(--accent-deep);
  overflow: hidden;
}
body[data-mode="pixel"] .pmeter-fill {
  position: absolute; inset: 0 auto 0 0;
  height: 100%;
  background: repeating-linear-gradient(90deg,
    var(--accent) 0 10px, color-mix(in srgb, var(--accent) 70%, #000) 10px 12px);
  box-shadow: inset 0 -3px 0 0 #0004, inset 0 2px 0 0 #ffffff44;
  transition: width var(--t-slow) var(--snap);
}
body[data-mode="pixel"] .pmeter-frac { font-family: var(--font-small); font-size: 12px; font-weight: 600; color: var(--db-coolgray); white-space: nowrap; }

/* ---- 15. Map: ocean + clouds parallax --------------------------------- */
body[data-mode="pixel"] .map-ocean {
  /* vertical pixel-water so the area around/below the island biomes reads as an
   * intentional sea (matches the continent picker), not an unstyled smear. */
  background:
    linear-gradient(180deg, var(--accent-deep, #30346d) 0%, var(--db-navy) 30%,
      var(--db-blue) 70%, #30346d 100%);
  z-index: 0;
}
body[data-mode="pixel"] .map-ocean::after {
  /* subtle horizontal shimmer bands (grid-aligned, no soft gradient) */
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 24px, #6dc2ca14 24px 28px);
  z-index: 0;
}
body[data-mode="pixel"] .map-clouds { z-index: 1; }
body[data-mode="pixel"] .map-cloud { position: absolute; opacity: 0.85; }

/* ---- 16. Map world + biome bands -------------------------------------- */
body[data-mode="pixel"] .map-world {
  z-index: 2;
  position: absolute;
  top: 0; left: 0;
}
body[data-mode="pixel"] .biome-band {
  position: absolute;
  overflow: hidden;
  image-rendering: pixelated;
  background-repeat: repeat;
  background-size: 48px 48px;
  box-shadow:
    inset 0 0 0 4px #140c1c55,
    0 10px 0 0 #140c1c66;                 /* island drop (solid, no blur) */
}
body[data-mode="pixel"] .biome-tint {
  position: absolute; inset: 0;
  opacity: 0.28;
  mix-blend-mode: multiply;
  pointer-events: none;
}
body[data-mode="pixel"] .biome-band::after {
  /* top sunlit edge + bottom shoreline shade, grid-aligned */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #deeed61f 0 6px, transparent 6px),
    linear-gradient(0deg, #140c1c33 0 10px, transparent 10px);
  pointer-events: none;
}
body[data-mode="pixel"] .biome-deco {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(2px 3px 0 #140c1c55);
}
body[data-mode="pixel"] .biome-deco svg { width: 100%; height: 100%; }
body[data-mode="pixel"] .biome-banner {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 16px;
  white-space: nowrap;
  background: var(--panel-fill);
  box-shadow:
    0 0 0 3px var(--db-orange),
    0 0 0 6px var(--db-wine),
    0 6px 0 0 #0007;
  z-index: 3;
}
body[data-mode="pixel"] .biome-banner-num {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--db-gold);
  text-shadow: 2px 2px 0 var(--db-wine);
}
body[data-mode="pixel"] .biome-banner-title { font-family: var(--font-body); font-size: 18px; font-weight: 600; color: var(--db-white); }
/* exam-weighting is a load-bearing fact — use the READABLE face so the digits
 * are unambiguous (the pixel face renders "2" ~ "8" at this size). */
body[data-mode="pixel"] .biome-banner-weight { font-family: var(--font-read); font-size: 13px; font-weight: 600; color: var(--db-teal); letter-spacing: .3px; }

/* ---- 17. Map path + nodes --------------------------------------------- */
body[data-mode="pixel"] .map-path { position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; }

body[data-mode="pixel"] .map-node {
  z-index: 4;
  animation: nodePop var(--t-slow) var(--hop) both;
}
body[data-mode="pixel"] .map-node .node-disk { position: absolute; inset: 0; display: block; }
body[data-mode="pixel"] .map-node .node-disk svg { width: 100%; height: 100%; }
body[data-mode="pixel"] .map-node .node-num {
  z-index: 2;
  font-size: 14px;
}
body[data-mode="pixel"] .map-node .node-lock {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 20px;
  filter: grayscale(0.4);
  pointer-events: none;
}
body[data-mode="pixel"] .map-node .node-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  /* --lbl-shift is set per-frame by the camera's edge-aware clamp so a label near
     the viewport edge slides inward instead of clipping mid-word. */
  transform: translateX(calc(-50% + var(--lbl-shift, 0px)));
  font-family: var(--font-small);
  font-size: 13px;
  font-weight: 500;
  color: var(--db-white);
  /* SOLID (non-translucent) chip + drop shadow so the label stays legible over
   * busy green terrain, never see-through onto sprites/path. */
  background: #140c1c;
  padding: 3px 8px;
  border-radius: 3px;
  /* wrap to a max of TWO full lines, then ellipsize — never mid-glyph. */
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  max-width: 150px;
  width: max-content;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  box-shadow: 0 0 0 2px #140c1c, 0 2px 4px #000a;
  pointer-events: none;
}
/* place label ABOVE the node when the node sits low on the serpentine wave, so
 * the label points to the OUTSIDE of the curve and never crosses the path. */
body[data-mode="pixel"] .map-node[data-label="above"] .node-label {
  top: auto;
  bottom: calc(100% + 6px);
}
/* locked labels: solid chip already lifts contrast; keep a legible off-white
 * (≈4.5:1 on #140c1c) rather than the old dim cool-grey. */
body[data-mode="pixel"] .map-node .node-label.is-dim { color: #c8cdd6; background: #140c1cf2; }
body[data-mode="pixel"] .map-node:hover { z-index: 6; }
body[data-mode="pixel"] .map-node:not([data-state="locked"]):hover .node-disk,
body[data-mode="pixel"] .map-node:not([data-state="locked"]):focus-visible .node-disk {
  transform: scale(1.16);
  transition: transform var(--t-fast) var(--hop);
  filter: drop-shadow(0 4px 0 #140c1c66);
}
body[data-mode="pixel"] .map-node[data-state="current"] .node-disk { animation: bob 1.6s var(--snap) infinite; }
body[data-mode="pixel"] .map-node[data-state="locked"] { cursor: not-allowed; opacity: 0.92; }
body[data-mode="pixel"] .map-node[data-state="locked"] .node-disk { filter: grayscale(0.55) brightness(0.8); }

body[data-mode="pixel"] .map-castle {
  z-index: 5;
  filter: drop-shadow(3px 4px 0 #140c1c66);
}
body[data-mode="pixel"] .map-castle .node-num {
  font-size: 20px;
  color: var(--db-gold);
  text-shadow: 2px 2px 0 var(--db-wine), -1px -1px 0 var(--db-shadow);
}
body[data-mode="pixel"] .map-castle[data-state="boss"] .castle-sprite { animation: bob 1.9s var(--snap) infinite; }
body[data-mode="pixel"] .map-castle[data-state="locked"] .castle-sprite { filter: grayscale(0.6) brightness(0.7); }

/* grab cursor while panning the map */
body[data-mode="pixel"] .stage.is-grabbing,
body[data-mode="pixel"] .stage.is-grabbing * { cursor: grabbing !important; }
body[data-mode="pixel"] .map-world,
body[data-mode="pixel"] .map-ocean,
body[data-mode="pixel"] .map-clouds { cursor: grab; }

/* ---- 18. Small screens (stage 2) -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body[data-mode="pixel"] .map-node { animation: none !important; }
  body[data-mode="pixel"] .map-node[data-state="current"] .node-disk,
body[data-mode="pixel"] .map-castle[data-state="boss"] .castle-sprite { animation: none !important; }
  body[data-mode="pixel"] .map-cloud { animation: none !important; }
}

/* ---- 13. Small screens ------------------------------------------------ */
@media (max-width: 640px) {
  body[data-mode="pixel"] .px-brand { font-size: 12px; }
  /* nav becomes a single-row horizontal scroller so the header stays short */
  body[data-mode="pixel"] .px-topbar { gap: 8px; padding: 8px 10px; }
  body[data-mode="pixel"] .px-topnav {
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;               /* allow the scroller to shrink below content */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  body[data-mode="pixel"] .px-topnav::-webkit-scrollbar { display: none; }
  body[data-mode="pixel"] .btn { font-size: 12px; padding: 8px 10px; white-space: nowrap; flex: 0 0 auto; }
  body[data-mode="pixel"] .content { font-size: 20px; }
  body[data-mode="pixel"] .picker-title { font-size: 17px; }
  body[data-mode="pixel"] .continent { width: 100%; max-width: 340px; }

  /* HUD stops floating and becomes a compact full-width top strip IN FLOW
   * above the content, so it can never overlap the picker heading/copy. */
  body[data-mode="pixel"] .hud {
    position: absolute;
    left: 0; right: 0; top: 0;
    flex-direction: row;
    gap: 6px;
    padding: 6px 8px;
    background: linear-gradient(180deg, #241a2be6 0%, #241a2bcc 100%);
    border-bottom: 3px solid var(--db-wine);
    z-index: 25;
    pointer-events: auto;
    align-items: stretch;
  }
  body[data-mode="pixel"] .hud .panel { flex: 1 1 0; padding: 8px 10px; min-width: 0; box-shadow: 0 0 0 2px var(--db-orange); }
  body[data-mode="pixel"] .hud .panel:last-child { flex: 1 1 0; }
  body[data-mode="pixel"] .hud .hud-row { min-width: 0; flex-wrap: wrap; }
  /* Continents is the ONLY way back to the world select on mobile (no top-nav
   * Map button exists here) — keep it always visible as a full-width 44px tap
   * target so the user can never feel trapped on the map. */
  body[data-mode="pixel"] .hud .hud-change {
    display: block; width: 100%; margin-top: 8px; min-height: 40px;
    font-size: 12px; box-shadow: inset 0 0 0 2px var(--db-gold);
    background: var(--db-shadow); color: var(--db-gold); pointer-events: auto;
  }
  body[data-mode="pixel"] .xpbar { width: 100%; min-width: 40px; }
  body[data-mode="pixel"] .hud-badge { font-size: 12px; }
  body[data-mode="pixel"] .hud-label { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }

  /* push scrollable views clear of the HUD strip; block layout avoids the
   * grid column stretching to the display font's wide min-content (overflow). */
  body[data-mode="pixel"] .picker { display: block; padding: 150px 14px 24px; overflow-x: hidden; }
  body[data-mode="pixel"] .picker-inner { max-width: 100%; }
  body[data-mode="pixel"] .picker-title { font-size: 14px; word-break: normal; }
  body[data-mode="pixel"] .picker-scenery,
body[data-mode="pixel"] .picker-sun { display: none; }   /* keep mobile uncluttered */
  /* Narrow-screen node labels: cap width so a label fits well inside a 390px
   * stage; the JS edge-clamp then slides any near-edge label fully inward. */
  body[data-mode="pixel"] .map-node .node-label { max-width: 132px; font-size: 12px; }
}

@media (max-width: 380px) {
  body[data-mode="pixel"] .hud { flex-direction: column; }
  body[data-mode="pixel"] .hud .panel { width: 100%; }
  body[data-mode="pixel"] .picker { padding-top: 240px; }
}

/* =============================================================================
 * STAGE 3 — LEVEL VIEW (concept + closing quiz) + CASTLE (boss quiz)
 * A pixel-framed modal (reuses .overlay/.panel) whose HEADER is the display
 * face and whose BODY uses the clean readable .content typography. The quiz is
 * fully keyboard-driven (option <button>s, aria-pressed, aria-live feedback).
 * ========================================================================== */

/* ---- 19. Level / castle modal shell ----------------------------------- */
body[data-mode="pixel"] .level-modal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 26px;                 /* clearance for the close button */
}
body[data-mode="pixel"] .level-modal.is-boss { --panel-edge: var(--db-red); --panel-edge-hi: var(--db-gold); }

/* reserve room for the close (✕) button so the eyebrow can never wrap under it */
body[data-mode="pixel"] .level-head { padding-right: 56px; }
body[data-mode="pixel"] .level-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-small);
  font-size: 12px;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
/* the "W1·L1" chip is a compact, high-contrast unit that never breaks apart */
body[data-mode="pixel"] .level-eyebrow-code {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 10px;
  line-height: 1;
  color: var(--db-shadow);
  background: var(--db-gold);
  padding: 4px 6px;
  box-shadow: 2px 2px 0 0 var(--db-wine);
}
/* world title: brighter than the old teal for AA on the dark plum panel */
body[data-mode="pixel"] .level-eyebrow-world {
  min-width: 0;
  color: var(--db-white);
  font-weight: 600;
}
body[data-mode="pixel"] .level-modal.is-boss .level-eyebrow-code { background: var(--db-red); color: var(--db-white); }
body[data-mode="pixel"] .level-title {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.6;
  color: var(--db-gold);
  text-shadow: 2px 2px 0 var(--db-wine);
  margin: 0;
}

/* body copy region already styled by .content; add a lead + section rules */
body[data-mode="pixel"] .level-body .lead { font-family: var(--font-read); font-size: 20px; line-height: 1.65; color: var(--db-white); }
body[data-mode="pixel"] .level-section-label {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--db-gold);
  text-shadow: 2px 2px 0 var(--db-wine);
  margin: 18px 0 12px;
  padding-top: 14px;
  border-top: var(--frame) solid var(--panel-edge-lo);
  line-height: 1.6;
}
body[data-mode="pixel"] .level-modal.is-boss .level-section-label { color: var(--db-red); }
body[data-mode="pixel"] .level-body .children li strong { color: var(--db-teal); }

/* ---- 20. Quiz ("closing challenge" / boss) ---------------------------- */
body[data-mode="pixel"] .quiz { margin-top: 4px; }
body[data-mode="pixel"] .quiz-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-small);
  font-size: 11px;
  color: var(--db-coolgray);
  margin-bottom: 10px;
}
body[data-mode="pixel"] .quiz-dots { display: flex; gap: 5px; }
body[data-mode="pixel"] .quiz-dot {
  width: 12px; height: 12px;
  background: var(--xp-track);
  box-shadow: inset 0 0 0 2px var(--db-shadow);
}
body[data-mode="pixel"] .quiz-dot.is-now { background: var(--db-gold); }
body[data-mode="pixel"] .quiz-dot.is-ok { background: var(--db-grass); }
body[data-mode="pixel"] .quiz-dot.is-bad { background: var(--db-red); }

body[data-mode="pixel"] .quiz-stem {
  font-family: var(--font-read);
  font-size: 20px;
  line-height: 1.6;
  color: var(--db-white);
  margin: 0 0 14px;
}
body[data-mode="pixel"] .quiz-hint { font-family: var(--font-small); font-size: 11px; color: var(--db-teal); margin-left: 6px; }

body[data-mode="pixel"] .quiz-opts { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body[data-mode="pixel"] .opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font-family: var(--font-read);
  font-size: 18px;
  line-height: 1.5;
  color: var(--db-white);
  background: var(--panel-fill2);
  border: none;
  padding: 10px 12px;
  box-shadow: 0 0 0 2px var(--db-shadow), inset 3px 0 0 0 var(--db-brown);
  transition: transform var(--t-fast) var(--hop), box-shadow var(--t-fast);
}
body[data-mode="pixel"] .opt:hover:not(:disabled) { transform: translateX(2px); }
body[data-mode="pixel"] .opt .opt-box {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--db-shadow);
  box-shadow: inset 0 0 0 2px var(--db-brown);
  font-family: var(--font-small);
  font-size: 12px;
  color: var(--db-white);
}
body[data-mode="pixel"] .opt[aria-pressed="true"] {
  background: #3a2f22;
  box-shadow: 0 0 0 2px var(--db-gold), inset 3px 0 0 0 var(--db-gold);
}
body[data-mode="pixel"] .opt[aria-pressed="true"] .opt-box { background: var(--db-gold); color: var(--db-shadow); box-shadow: none; }
body[data-mode="pixel"] .opt:disabled { cursor: default; }
body[data-mode="pixel"] .opt.is-correct {
  box-shadow: 0 0 0 2px var(--db-grass), inset 3px 0 0 0 var(--db-grass);
  background: #24371c;
}
body[data-mode="pixel"] .opt.is-correct .opt-box { background: var(--db-grass); color: var(--db-shadow); box-shadow: none; }
body[data-mode="pixel"] .opt.is-wrong {
  box-shadow: 0 0 0 2px var(--db-red), inset 3px 0 0 0 var(--db-red);
  background: #3a1c1e;
}
body[data-mode="pixel"] .opt.is-wrong .opt-box { background: var(--db-red); color: var(--db-white); box-shadow: none; }

/* fill-in-the-blank inputs */
body[data-mode="pixel"] .fill-input {
  font-family: var(--font-read);
  font-size: 18px;
  color: var(--db-gold);
  background: var(--db-shadow);
  border: none;
  box-shadow: inset 0 0 0 2px var(--db-brown);
  padding: 4px 8px;
  width: 9ch;
  margin: 0 4px;
}
body[data-mode="pixel"] .fill-input:focus-visible { outline: 3px solid var(--db-gold); outline-offset: 1px; }
body[data-mode="pixel"] .fill-input.is-correct { color: var(--db-white); box-shadow: inset 0 0 0 2px var(--db-grass); }
body[data-mode="pixel"] .fill-input.is-wrong { color: var(--db-white); box-shadow: inset 0 0 0 2px var(--db-red); }

/* per-question feedback callout */
body[data-mode="pixel"] .quiz-feedback { margin: 4px 0 14px; }
body[data-mode="pixel"] .explain {
  padding: 12px 14px;
  background: #6dc2ca14;
  box-shadow: inset 4px 0 0 0 var(--db-teal);
  font-family: var(--font-read);
  font-size: 18px;
  line-height: 1.6;
  color: var(--db-white);
}
body[data-mode="pixel"] .explain.is-wrong { background: #d0464814; box-shadow: inset 4px 0 0 0 var(--db-red); }
body[data-mode="pixel"] .explain-verdict {
  font-family: var(--font-small);
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
body[data-mode="pixel"] .explain-verdict.ok { color: var(--db-grass); }
body[data-mode="pixel"] .explain-verdict.bad { color: var(--db-red); }
body[data-mode="pixel"] .explain .distract { margin-top: 8px; color: var(--db-coolgray); font-size: 18px; }

/* footer actions */
body[data-mode="pixel"] .level-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: var(--frame) solid var(--panel-edge-lo);
}
body[data-mode="pixel"] .level-foot .btn { font-size: 12px; }
body[data-mode="pixel"] .btn--primary { --b: var(--db-gold); background: var(--db-gold); color: var(--db-shadow); }
body[data-mode="pixel"] .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ---- 21. Results + LEVEL CLEAR celebration ---------------------------- */
body[data-mode="pixel"] .quiz-result { text-align: center; padding: 8px 0 4px; }
body[data-mode="pixel"] .quiz-result .result-score {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--db-gold);
  text-shadow: 2px 2px 0 var(--db-wine);
  line-height: 1.6;
}
body[data-mode="pixel"] .quiz-result .result-note { font-family: var(--font-read); font-size: 18px; line-height: 1.6; color: var(--db-white); margin-top: 10px; }

body[data-mode="pixel"] .level-clear {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 0 10px;
}
/* level overlays size to their content rather than stretching to the full
 * viewport height the way the reference menus do. The persistent topbar is
 * FIXED at z-index 80 (kept above the overlay so the mode toggle stays reachable
 * mid-level); if the panel is vertically centred it tucks its eyebrow + title
 * UNDER that bar. Anchor the panel BELOW the topbar and cap its height to the
 * remaining viewport so the whole header (W#·L# chip, world, title) always
 * clears the bar and the close button. */
body[data-mode="pixel"] .overlay.level-overlay {
  align-items: start;
  padding-top: calc(var(--topbar-h, 60px) + 14px);
}
body[data-mode="pixel"] .overlay.level-overlay .menu-panel {
  max-height: calc(100vh - var(--topbar-h, 60px) - 38px);
  height: auto;
  align-self: start;
}
body[data-mode="pixel"] .level-overlay .level-body { min-height: 0; }
body[data-mode="pixel"] .level-clear + * { min-height: 0; }
body[data-mode="pixel"] .level-clear .lvl-clear-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--db-gold);
  text-shadow: 3px 3px 0 var(--db-wine);
  line-height: 1.6;
}
body[data-mode="pixel"] .level-clear.is-boss .lvl-clear-title { color: var(--db-red); }
body[data-mode="pixel"] .lvl-clear-stars { display: flex; gap: 10px; }
body[data-mode="pixel"] .lvl-clear-stars .hud-icon { width: 44px; height: 44px; flex-basis: 44px; }
body[data-mode="pixel"] .lvl-clear-xp { font-family: var(--font-body); font-size: 20px; color: var(--db-teal); }

@keyframes clearStar {
  0%   { transform: scale(0) rotate(-40deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
body[data-mode="pixel"] .lvl-clear-stars .hud-icon { animation: clearStar 460ms var(--hop) both; }
body[data-mode="pixel"] .lvl-clear-stars .hud-icon:nth-child(2) { animation-delay: 120ms; }
body[data-mode="pixel"] .lvl-clear-stars .hud-icon:nth-child(3) { animation-delay: 240ms; }
@keyframes clearPop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
body[data-mode="pixel"] .level-clear .lvl-clear-title { animation: clearPop 360ms var(--hop) both; animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  body[data-mode="pixel"] .lvl-clear-stars .hud-icon,
body[data-mode="pixel"] .level-clear .lvl-clear-title { animation: none !important; }
  body[data-mode="pixel"] .opt:hover:not(:disabled) { transform: none; }
}

/* =============================================================================
 * STAGE 4 — TOP-MENU SECTIONS (Cheat Sheets · Practice Exams · Labs · Progress)
 * Pixel-framed modal overlays that reuse .overlay/.panel but present LONG-FORM
 * readable reference content: a fixed pixel header + a scrolling body with the
 * clean VT323 measure. Consistent with the design system, printable, silent.
 * ========================================================================== */

/* ---- 22. Menu modal shell --------------------------------------------- */
body[data-mode="pixel"] .menu-overlay { align-items: stretch; padding: 3vh 3vw; }
body[data-mode="pixel"] .menu-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 860px;
  max-height: 94vh;
  padding: 0;                 /* head/body own their padding */
  overflow: hidden;           /* body scrolls, not the panel */
}
body[data-mode="pixel"] .menu-panel--wide { max-width: 1080px; }
@keyframes menuPop { 0% { transform: scale(0.94); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
body[data-mode="pixel"] .menu-pop { animation: menuPop var(--t-mid) var(--hop) both; }
@media (prefers-reduced-motion: reduce) { body[data-mode="pixel"] .menu-pop { animation: none; } }

body[data-mode="pixel"] .menu-head {
  flex: 0 0 auto;
  padding: 18px 22px 12px;
  background: linear-gradient(180deg, var(--panel-fill2) 0%, var(--panel-fill) 100%);
  border-bottom: var(--frame) solid var(--panel-edge-lo);
  box-shadow: 0 4px 0 0 #0006;
  position: relative;
  z-index: 2;
}
body[data-mode="pixel"] .menu-title-row { display: flex; align-items: center; gap: 12px; }
body[data-mode="pixel"] .menu-ico { width: 34px; height: 34px; flex: 0 0 34px; }
body[data-mode="pixel"] .menu-ico svg { width: 100%; height: 100%; }

body[data-mode="pixel"] .menu-tabs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
body[data-mode="pixel"] .menu-tab {
  font-family: var(--font-small);
  font-size: 12px;
  color: var(--db-white);
  background: var(--panel-fill2);
  border: none;
  padding: 7px 12px;
  box-shadow: 0 0 0 2px var(--db-shadow), inset 2px 2px 0 0 #ffffff14, inset -2px -2px 0 0 var(--db-wine);
  transition: transform var(--t-fast) var(--hop);
}
body[data-mode="pixel"] .menu-tab:hover { transform: translateY(-2px); }
body[data-mode="pixel"] .menu-tab.is-active { background: var(--db-teal); color: var(--db-shadow); box-shadow: 0 0 0 2px var(--db-shadow); }

body[data-mode="pixel"] .menu-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 22px 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--db-orange) var(--panel-fill);
}
body[data-mode="pixel"] .menu-body::-webkit-scrollbar { width: 12px; }
body[data-mode="pixel"] .menu-body::-webkit-scrollbar-track { background: var(--panel-fill); }
body[data-mode="pixel"] .menu-body::-webkit-scrollbar-thumb { background: var(--db-orange); box-shadow: inset 0 0 0 2px var(--db-shadow); }

body[data-mode="pixel"] .menu-lead {
  font-family: var(--font-read);
  font-size: 18px;
  line-height: 1.6;
  color: var(--db-white);
  margin-bottom: 6px;
}
body[data-mode="pixel"] .menu-empty {
  font-family: var(--font-read);
  font-size: 18px;
  color: var(--ink-dim);
  padding: 30px 4px;
  text-align: center;
  line-height: 1.6;
}
body[data-mode="pixel"] .menu-actionbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}

/* ---- 23. Cheat sheet blocks ------------------------------------------- */
body[data-mode="pixel"] .cheat-section { margin: 22px 0; }
body[data-mode="pixel"] .cheat-section:first-child { margin-top: 6px; }
body[data-mode="pixel"] .cheat-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--db-gold);
  text-shadow: 2px 2px 0 var(--db-wine);
  line-height: 1.55;
  margin: 26px 0 12px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--panel-edge-lo);
}

body[data-mode="pixel"] .cheat-tablewrap { overflow-x: auto; box-shadow: 0 0 0 2px var(--db-shadow); }
body[data-mode="pixel"] .cheat-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-read);
  font-size: 16px;
  color: var(--db-white);
  background: var(--panel-fill);
}
body[data-mode="pixel"] .cheat-table th {
  font-family: var(--font-small);
  font-size: 12px;
  text-align: left;
  color: var(--db-shadow);
  background: var(--db-gold);
  padding: 8px 10px;
  position: sticky; top: 0;
}
body[data-mode="pixel"] .cheat-table td {
  padding: 8px 10px;
  border-top: 2px solid #140c1c;
  vertical-align: top;
  line-height: 1.55;
}
body[data-mode="pixel"] .cheat-table tr:nth-child(even) td { background: #ffffff08; }
body[data-mode="pixel"] .cheat-table td:first-child { color: var(--db-teal); font-weight: 400; }

body[data-mode="pixel"] .cheat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
body[data-mode="pixel"] .cheat-card {
  background: var(--panel-fill2);
  padding: 12px 14px;
  box-shadow: 0 0 0 2px var(--db-shadow), inset 3px 0 0 0 var(--db-teal);
}
body[data-mode="pixel"] .cheat-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
body[data-mode="pixel"] .cheat-card-ico { font-size: 20px; }
body[data-mode="pixel"] .cheat-card-title { font-family: var(--font-small); font-size: 13px; color: var(--db-gold); }
body[data-mode="pixel"] .cheat-card-desc { font-family: var(--font-read); font-size: 16px; color: var(--db-white); line-height: 1.6; }
body[data-mode="pixel"] .cheat-card-desc strong { color: var(--db-teal); }
body[data-mode="pixel"] .cheat-card-desc em { color: var(--db-sand); font-style: normal; }

body[data-mode="pixel"] .cheat-decision { display: flex; flex-direction: column; gap: 8px; }
body[data-mode="pixel"] .cheat-dec-row {
  display: grid;
  grid-template-columns: 34px 1fr 28px 1fr;
  align-items: center;
  gap: 10px;
  background: var(--panel-fill2);
  padding: 10px 12px;
  box-shadow: 0 0 0 2px var(--db-shadow);
  font-family: var(--font-read);
  font-size: 16px;
  color: var(--db-white);
  line-height: 1.55;
}
body[data-mode="pixel"] .cheat-dec-ico { font-size: 22px; text-align: center; }
body[data-mode="pixel"] .cheat-dec-arrow { color: var(--db-gold); text-align: center; font-size: 18px; }
body[data-mode="pixel"] .cheat-dec-lbl {
  display: block;
  font-family: var(--font-small);
  font-size: 10px;
  color: var(--db-teal);
  margin-bottom: 2px;
}
body[data-mode="pixel"] .cheat-dec-then .cheat-dec-lbl { color: var(--db-gold); }
body[data-mode="pixel"] .cheat-dec-row strong { color: var(--db-teal); }

body[data-mode="pixel"] .cheat-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
body[data-mode="pixel"] .cheat-num {
  background: var(--panel-fill2);
  padding: 14px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--db-shadow), inset 0 -3px 0 0 var(--db-brown);
}
body[data-mode="pixel"] .cheat-num-val {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--db-gold);
  text-shadow: 2px 2px 0 var(--db-wine);
  line-height: 1.5;
}
body[data-mode="pixel"] .cheat-num-lbl { font-family: var(--font-small); font-size: 12px; color: var(--db-teal); margin: 6px 0 4px; }
body[data-mode="pixel"] .cheat-num-detail { font-family: var(--font-read); font-size: 15px; color: var(--ink-dim); line-height: 1.5; }

/* ---- 24. Labs --------------------------------------------------------- */
body[data-mode="pixel"] .lab-card {
  background: var(--panel-fill2);
  padding: 16px 18px;
  margin: 16px 0;
  box-shadow: 0 0 0 3px var(--db-orange), 0 0 0 6px var(--panel-edge-lo), 0 6px 0 0 #0007;
}
body[data-mode="pixel"] .lab-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
body[data-mode="pixel"] .lab-ico { font-size: 30px; line-height: 1; }
body[data-mode="pixel"] .lab-headtext { display: flex; flex-direction: column; gap: 6px; }
body[data-mode="pixel"] .lab-title { font-family: var(--font-display); font-size: 13px; color: var(--db-gold); line-height: 1.5; }
body[data-mode="pixel"] .lab-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
body[data-mode="pixel"] .lab-chip,
body[data-mode="pixel"] .lab-tag {
  font-family: var(--font-small);
  font-size: 10px;
  padding: 3px 7px;
  color: var(--db-white);
  background: var(--panel-fill);
  box-shadow: inset 0 0 0 2px var(--db-shadow);
}
body[data-mode="pixel"] .lab-tag--free { background: var(--db-grass); color: var(--db-shadow); }
body[data-mode="pixel"] .lab-tag--cost { background: var(--db-orange); color: var(--db-shadow); }
body[data-mode="pixel"] .lab-objective { font-family: var(--font-read); font-size: 17px; color: var(--db-white); line-height: 1.6; margin: 8px 0 12px; }

body[data-mode="pixel"] .lab-steps { margin: 0; padding: 0 0 0 2px; list-style: none; counter-reset: labstep; }
body[data-mode="pixel"] .lab-step {
  position: relative;
  counter-increment: labstep;
  padding: 8px 0 10px 40px;
  border-top: 2px solid #140c1c;
}
body[data-mode="pixel"] .lab-step::before {
  content: counter(labstep);
  position: absolute; left: 0; top: 8px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  font-family: var(--font-small); font-size: 13px;
  color: var(--db-shadow); background: var(--db-gold);
  box-shadow: 0 0 0 2px var(--db-shadow);
}
body[data-mode="pixel"] .lab-step-title { font-family: var(--font-read); font-weight: 600; font-size: 17px; color: var(--db-teal); line-height: 1.5; }
body[data-mode="pixel"] .lab-step-detail { font-family: var(--font-read); font-size: 16px; color: var(--db-white); line-height: 1.6; margin-top: 3px; }
body[data-mode="pixel"] .lab-cmd {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--db-shadow);
  box-shadow: inset 0 0 0 2px var(--db-brown);
  overflow-x: auto;
}
body[data-mode="pixel"] .lab-cmd code {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 18px;
  color: var(--db-gold);
  white-space: pre-wrap;
  word-break: break-word;
}
body[data-mode="pixel"] .lab-outcome {
  margin-top: 12px;
  padding: 10px 12px;
  font-family: var(--font-read);
  font-size: 16px;
  color: var(--db-white);
  line-height: 1.6;
}
body[data-mode="pixel"] .lab-outcome-lbl { display: block; font-family: var(--font-small); font-size: 11px; margin-bottom: 4px; }
body[data-mode="pixel"] .lab-outcome--ok { background: #24371c; box-shadow: inset 4px 0 0 0 var(--db-grass); }
body[data-mode="pixel"] .lab-outcome--ok .lab-outcome-lbl { color: var(--db-grass); }
body[data-mode="pixel"] .lab-outcome--clean { background: #3a2f22; box-shadow: inset 4px 0 0 0 var(--db-orange); }
body[data-mode="pixel"] .lab-outcome--clean .lab-outcome-lbl { color: var(--db-orange); }

/* ---- 25. Progress ----------------------------------------------------- */
body[data-mode="pixel"] .prog-summary { margin-bottom: 10px; }
body[data-mode="pixel"] .prog-rank { display: flex; align-items: center; gap: 16px; }
body[data-mode="pixel"] .prog-rank-ico { width: 52px; height: 52px; flex: 0 0 52px; }
body[data-mode="pixel"] .prog-rank-ico svg { width: 100%; height: 100%; }
body[data-mode="pixel"] .prog-rank-lvl { font-family: var(--font-display); font-size: 14px; color: var(--db-gold); text-shadow: 2px 2px 0 var(--db-wine); line-height: 1.5; margin-bottom: 8px; }
body[data-mode="pixel"] .prog-xp { font-family: var(--font-small); font-size: 12px; color: var(--db-teal); margin-top: 6px; }

body[data-mode="pixel"] .prog-cert {
  background: var(--panel-fill2);
  padding: 12px 14px;
  margin: 10px 0;
  box-shadow: 0 0 0 2px var(--db-shadow);
}
body[data-mode="pixel"] .prog-cert.is-current { box-shadow: 0 0 0 2px var(--db-shadow), inset 4px 0 0 0 var(--db-teal); }
body[data-mode="pixel"] .prog-cert-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
body[data-mode="pixel"] .prog-cert-code { font-family: var(--font-display); font-size: 12px; color: var(--db-gold); }
body[data-mode="pixel"] .prog-cert-pct { font-family: var(--font-small); font-size: 11px; color: var(--ink-dim); }
body[data-mode="pixel"] .prog-worlds { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-mode="pixel"] .prog-world {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel-fill);
  padding: 5px 8px;
  box-shadow: inset 0 0 0 2px var(--db-shadow);
}
body[data-mode="pixel"] .prog-world.is-full { box-shadow: inset 0 0 0 2px var(--db-grass); }
body[data-mode="pixel"] .prog-world-num { font-family: var(--font-small); font-size: 11px; color: var(--db-teal); }
body[data-mode="pixel"] .prog-world-bar { width: 60px; height: 10px; background: var(--xp-track); box-shadow: inset 0 0 0 2px var(--db-shadow); display: block; }
body[data-mode="pixel"] .prog-world-bar > span { display: block; height: 100%; background: var(--db-gold); }
body[data-mode="pixel"] .prog-world.is-full .prog-world-bar > span { background: var(--db-grass); }
body[data-mode="pixel"] .prog-world-frac { font-family: var(--font-small); font-size: 10px; color: var(--ink-dim); }

body[data-mode="pixel"] .prog-achievements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
body[data-mode="pixel"] .ach {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-fill2);
  padding: 10px 12px;
  box-shadow: 0 0 0 2px var(--db-shadow);
}
body[data-mode="pixel"] .ach.is-got { box-shadow: 0 0 0 2px var(--db-gold), inset 3px 0 0 0 var(--db-gold); }
body[data-mode="pixel"] .ach.is-locked { opacity: 0.55; }
body[data-mode="pixel"] .ach-ico { font-size: 26px; flex: 0 0 auto; }
body[data-mode="pixel"] .ach-text { display: flex; flex-direction: column; }
body[data-mode="pixel"] .ach-name { font-family: var(--font-small); font-size: 12px; color: var(--db-gold); }
body[data-mode="pixel"] .ach.is-locked .ach-name { color: var(--ink-dim); }
body[data-mode="pixel"] .ach-desc { font-family: var(--font-read); font-size: 14px; color: var(--db-white); line-height: 1.45; }

/* ---- 26. Practice exams ----------------------------------------------- */
body[data-mode="pixel"] .exam-best { font-family: var(--font-read); font-size: 17px; color: var(--db-teal); }
body[data-mode="pixel"] .exam-best strong { color: var(--db-gold); }
body[data-mode="pixel"] .exam-lengths { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

body[data-mode="pixel"] .exam-runhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 3px solid var(--panel-edge-lo);
}
body[data-mode="pixel"] .exam-runhead .quiz-dots { flex-wrap: wrap; }
body[data-mode="pixel"] .exam-clock {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--db-gold);
  text-shadow: 2px 2px 0 var(--db-wine);
}
body[data-mode="pixel"] .exam-clock.is-low { color: var(--db-red); }
body[data-mode="pixel"] .exam-qhost { min-height: 200px; }
body[data-mode="pixel"] .quiz-tag {
  font-family: var(--font-small);
  font-size: 10px;
  color: var(--db-shadow);
  background: var(--db-teal);
  padding: 2px 6px;
}
body[data-mode="pixel"] .opt-text { flex: 1; }

body[data-mode="pixel"] .exam-gauge {
  position: relative;
  width: min(420px, 80%);
  height: 22px;
  margin: 14px auto 8px;
  background: var(--xp-track);
  box-shadow: inset 0 0 0 2px var(--db-shadow), 0 0 0 2px var(--db-brown);
  overflow: hidden;
}
body[data-mode="pixel"] .exam-gauge-fill {
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--db-gold) 0 6px, var(--db-orange) 6px 8px);
}
body[data-mode="pixel"] .exam-gauge-mark {
  position: absolute; top: -3px; bottom: -3px; width: 3px;
  background: var(--db-white);
  box-shadow: 0 0 0 1px var(--db-shadow);
}
body[data-mode="pixel"] .result-readiness {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.6;
  margin-top: 6px;
}
body[data-mode="pixel"] .result-readiness.is-pass { color: var(--db-grass); }
body[data-mode="pixel"] .result-readiness.is-fail { color: var(--db-red); }

body[data-mode="pixel"] .exam-review {
  background: var(--panel-fill2);
  padding: 12px 14px;
  margin: 10px 0;
  box-shadow: 0 0 0 2px var(--db-shadow);
}
body[data-mode="pixel"] .exam-review.is-ok { box-shadow: 0 0 0 2px var(--db-shadow), inset 4px 0 0 0 var(--db-grass); }
body[data-mode="pixel"] .exam-review.is-bad { box-shadow: 0 0 0 2px var(--db-shadow), inset 4px 0 0 0 var(--db-red); }
body[data-mode="pixel"] .exam-review-q { font-family: var(--font-read); font-size: 18px; color: var(--db-white); line-height: 1.6; margin-bottom: 8px; }
body[data-mode="pixel"] .exam-review-badge { font-family: var(--font-small); margin-right: 8px; }
body[data-mode="pixel"] .exam-review.is-ok .exam-review-badge { color: var(--db-grass); }
body[data-mode="pixel"] .exam-review.is-bad .exam-review-badge { color: var(--db-red); }
body[data-mode="pixel"] .exam-review-a,
body[data-mode="pixel"] .exam-review-y { font-family: var(--font-read); font-size: 16px; color: var(--db-white); line-height: 1.55; margin: 4px 0; }
body[data-mode="pixel"] .exam-review-a strong { color: var(--db-grass); }
body[data-mode="pixel"] .exam-review-y strong { color: var(--db-red); }
body[data-mode="pixel"] .exam-review .explain { margin-top: 8px; }

/* ---- 27. Menu responsive + print -------------------------------------- */
@media (max-width: 640px) {
  body[data-mode="pixel"] .menu-overlay { padding: 0; }
  body[data-mode="pixel"] .menu-panel { max-width: 100%; max-height: 100vh; }
  body[data-mode="pixel"] .cheat-dec-row { grid-template-columns: 1fr; gap: 4px; }
  body[data-mode="pixel"] .cheat-dec-arrow { display: none; }
  body[data-mode="pixel"] .exam-lengths .btn { width: 100%; }
}

@media print {
  body[data-mode="pixel"] { overflow: visible; }
  body[data-mode="pixel"] #gc-root > .px-topbar,
body[data-mode="pixel"] .hud,
body[data-mode="pixel"] .map-world,
body[data-mode="pixel"] .map-ocean,
body[data-mode="pixel"] .map-clouds,
body[data-mode="pixel"] .picker,
body[data-mode="pixel"] #preview,
body[data-mode="pixel"] .overlay-close,
body[data-mode="pixel"] .menu-tabs,
body[data-mode="pixel"] .menu-actionbar .btn,
body[data-mode="pixel"] .toast { display: none !important; }
  body[data-mode="pixel"] .menu-overlay { position: static; background: none; padding: 0; display: block; }
  body[data-mode="pixel"] .menu-panel { max-width: 100%; max-height: none; box-shadow: none; overflow: visible; color: #000; }
  body[data-mode="pixel"] .menu-body { overflow: visible; }
  body[data-mode="pixel"] .cheat-section,
body[data-mode="pixel"] .lab-card,
body[data-mode="pixel"] .exam-review { break-inside: avoid; }
}


/* ---- unified-layout bridge (pixel mode owns #app as the stage) ---------- */
body[data-mode="pixel"]{
  overflow:hidden;
  background:
    linear-gradient(180deg, #2a2d63 0%, #3a4fa0 30%, #597dce 60%, #6dc2ca 100%) fixed;
}
body[data-mode="pixel"] #app{
  position:relative;
  min-height:calc(100vh - 60px);
  overflow:hidden;
}
/* Right/left edge vignette on the pannable world map: content FADES out at the
 * viewport boundary instead of being sliced mid-glyph, cueing "more this way".
 * Non-interactive; sits above the world but below the HUD. */
body[data-mode="pixel"] .map-edge-fade{
  position:absolute; top:0; bottom:0; width:60px; z-index:5;
  pointer-events:none;
}
body[data-mode="pixel"] .map-edge-fade--r{
  right:0;
  background:linear-gradient(90deg, rgba(16,24,32,0) 0%, rgba(16,24,32,.55) 65%, rgba(16,24,32,.85) 100%);
}
body[data-mode="pixel"] .map-edge-fade--l{
  left:0;
  background:linear-gradient(270deg, rgba(16,24,32,0) 0%, rgba(16,24,32,.4) 70%, rgba(16,24,32,.7) 100%);
}
@media (prefers-reduced-motion: reduce){
  body[data-mode="pixel"] .map-edge-fade{ transition:none; }
}
/* placeholder shown by pixel-render.js until the real overworld lands (3b/3c) */
body[data-mode="pixel"] .px-placeholder{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px; min-height:calc(100vh - 60px); text-align:center; padding:32px;
}
body[data-mode="pixel"] .px-placeholder .px-emblem{
  width:132px; height:132px; image-rendering:pixelated;
  filter:drop-shadow(3px 4px 0 #140c1c66);
  animation:bob 2.4s var(--snap) infinite;
}
body[data-mode="pixel"] .px-placeholder .px-emblem svg{ width:100%; height:100%; }
body[data-mode="pixel"] .px-placeholder .px-title{
  font-family:var(--font-display); font-size:20px; line-height:1.6;
  color:var(--db-gold); text-shadow:3px 3px 0 var(--db-wine), 6px 6px 0 #0006;
  letter-spacing:1px; margin:0;
}
body[data-mode="pixel"] .px-placeholder .px-hint{
  font-family:var(--font-body); font-size:18px; font-weight:500;
  color:var(--db-white); text-shadow:1px 1px 0 var(--db-shadow); margin:0;
  max-width:44ch;
}
@media (prefers-reduced-motion: reduce){
  body[data-mode="pixel"] .px-placeholder .px-emblem{ animation:none; }
}

/* ==== UPGRADE: companion ==================================================
 * The pixel guide ("Byte") + tap-to-reveal KEY TERMS panel that sit in
 * aside.level-companion beside the step content. Purple mascot palette so it
 * reads as the APP's guide, not any one cert's logo. All rules mode-scoped;
 * every animation is reduced-motion gated (block at the very end). */

/* purple companion tokens (kept local to this block, DB16 extended purples) */
body[data-mode="pixel"] .level-companion{
  --cmp-purple:  #7c5cff;   /* Anthropic purple (core) */
  --cmp-deep:    #3a2b6b;   /* deep purple shadow */
  --cmp-lav:     #b9a7ff;   /* lavender highlight */
  --cmp-fill:    #241a34;   /* companion card fill (purple-tinted parchment) */
}

body[data-mode="pixel"] .companion-inner{
  display:flex; flex-direction:column; gap:14px;
}

/* avatar + speech "card" */
body[data-mode="pixel"] .companion-card{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px;
  background:var(--cmp-fill);
  box-shadow:0 0 0 3px var(--db-shadow), inset 3px 0 0 0 var(--cmp-purple);
}
body[data-mode="pixel"] .companion-avatar{
  flex:0 0 64px; width:64px; height:64px;
  image-rendering:pixelated;
  filter:drop-shadow(2px 3px 0 #140c1c66);
}
body[data-mode="pixel"] .companion-avatar svg{ width:100%; height:100%; }
body[data-mode="pixel"] .companion-bubble{ flex:1 1 auto; min-width:0; }
body[data-mode="pixel"] .companion-name{
  display:block;
  font-family:var(--font-small); font-size:11px; letter-spacing:0.5px;
  color:var(--cmp-lav); margin-bottom:4px;
}
body[data-mode="pixel"] .companion-speech{
  font-family:var(--font-read); font-size:16px; line-height:1.5;
  color:var(--db-white); margin:0;
}
body[data-mode="pixel"] .companion-step{
  display:block; margin-top:6px;
  font-family:var(--font-small); font-size:11px; color:var(--ink-dim);
}
body[data-mode="pixel"] .companion-tip{
  font-family:var(--font-read); font-size:15px; line-height:1.5;
  color:var(--ink-dim); margin:0;
}

/* KEY TERMS — tap-to-reveal glossary */
body[data-mode="pixel"] .kf-terms{
  padding:12px;
  background:#ffffff0a;
  box-shadow:inset 3px 0 0 0 var(--db-teal);
}
body[data-mode="pixel"] .kf-terms-label{
  font-family:var(--font-display); font-size:11px; color:var(--db-gold);
  text-shadow:2px 2px 0 var(--db-wine); line-height:1.6; margin-bottom:6px;
}
body[data-mode="pixel"] .kf-terms-hint{
  font-family:var(--font-small); font-size:11px; color:var(--ink-dim);
  margin:0 0 10px;
}
body[data-mode="pixel"] .kf-list{ margin:0; padding:0; }
body[data-mode="pixel"] .kf-dt{ margin:0 0 6px; }
body[data-mode="pixel"] .kf-term-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; text-align:left;
  font-family:var(--font-body); font-size:16px; font-weight:600;
  color:var(--cmp-lav);
  background:var(--panel-fill2);
  border:none; padding:8px 10px;
  box-shadow:0 0 0 2px var(--db-shadow), inset 3px 0 0 0 var(--cmp-purple);
  cursor:pointer;
  transition:transform var(--t-fast) var(--hop), box-shadow var(--t-fast);
}
body[data-mode="pixel"] .kf-term-toggle:hover{ transform:translateX(2px); }
body[data-mode="pixel"] .kf-term-toggle:focus-visible{
  outline:3px solid var(--db-gold); outline-offset:2px;
}
body[data-mode="pixel"] .kf-term-chev{
  flex:0 0 auto; color:var(--db-teal);
  transition:transform var(--t-fast) var(--hop);
}
body[data-mode="pixel"] .kf-dt.is-open .kf-term-chev{ transform:rotate(90deg); }
body[data-mode="pixel"] .kf-dt.is-open .kf-term-toggle{
  color:var(--db-gold);
  box-shadow:0 0 0 2px var(--db-gold), inset 3px 0 0 0 var(--db-gold);
}
body[data-mode="pixel"] .kf-def{
  margin:6px 0 12px; padding:8px 10px;
  font-family:var(--font-read); font-size:15px; line-height:1.55;
  color:var(--db-white);
  background:#00000026;
  box-shadow:inset 3px 0 0 0 var(--cmp-lav);
}
body[data-mode="pixel"] .kf-def[hidden]{ display:none; }
body[data-mode="pixel"] .kf-def code{
  font-family:var(--font-small); color:var(--db-teal);
}

/* reveal + pose-pop animations (reduced-motion gated at the bottom) */
@keyframes companionPop{
  0%   { transform:translateY(3px) scale(0.92); }
  60%  { transform:translateY(0)   scale(1.06); }
  100% { transform:translateY(0)   scale(1); }
}
body[data-mode="pixel"] .companion-avatar.is-pop{
  animation:companionPop 260ms var(--hop) both;
}
@keyframes kfReveal{
  0%   { opacity:0; transform:translateY(-4px); }
  100% { opacity:1; transform:translateY(0); }
}
body[data-mode="pixel"] .kf-def.kf-reveal{
  animation:kfReveal 220ms var(--hop) both;
}

/* M14 — shrink companion avatar on mobile; keep the card compact */
@media (max-width: 640px){
  body[data-mode="pixel"] .companion-avatar{ flex-basis:40px; width:40px; height:40px; }
  body[data-mode="pixel"] .companion-card{ padding:10px; gap:10px; }
  body[data-mode="pixel"] .companion-speech{ font-size:15px; }
}

@media (prefers-reduced-motion: reduce){
  body[data-mode="pixel"] .companion-avatar.is-pop,
  body[data-mode="pixel"] .kf-def.kf-reveal{ animation:none; }
  body[data-mode="pixel"] .kf-term-toggle,
  body[data-mode="pixel"] .kf-term-chev{ transition:none; }
}

/* ==== UPGRADE: mobile fixes ==============================================
 * Agent D — itemized mobile/legibility fixes for PIXEL mode.
 * M1, M3, M4, M7, M8, M9, M12, M13(rule). (M2/M5/M6 rail + M14 companion are
 * owned by Agents A/B in their own blocks.) Every selector here is either
 * unique to this block or additive so it never overrides another agent's rule.
 * ======================================================================== */

/* M13 — lock the overworld behind an open level/castle overlay so touch drags
 * don't pan the map underneath. The overlay is position:fixed and covers the
 * viewport; killing pointer gesture defaults on the backdrop stops scroll/pan
 * bleed on touch. `.modal-open` is toggled on <body> by the step-flow engine;
 * the :has() fallback makes the lock work even before that JS lands. */
body[data-mode="pixel"].modal-open{ overflow:hidden; }
body[data-mode="pixel"] .level-overlay{ touch-action:none; overscroll-behavior:contain; }
body[data-mode="pixel"] .level-overlay .menu-panel,
body[data-mode="pixel"] .level-overlay .level-body{ touch-action:pan-y; }

/* M12 — node label legibility over busy terrain: add a hard 1px shadow so the
 * label reads even where the solid backing meets bright tiles. */
body[data-mode="pixel"] .map-node .node-label{ text-shadow:1px 1px 0 var(--db-shadow); }

/* M8 — code / pre blocks must scroll, never widen the panel past the viewport. */
body[data-mode="pixel"] .ce-body,
body[data-mode="pixel"] .cd-cmd,
body[data-mode="pixel"] .lab-cmd,
body[data-mode="pixel"] pre{ overflow-x:auto; max-width:100%; }

/* M9 — figure SVGs never overflow their column. */
body[data-mode="pixel"] .fig svg{ max-width:100%; height:auto; }

@media (max-width: 640px){
  /* M1 — pixel-title text-shadow doubling: on small screens the second #0006
   * layer + steps() sub-pixel rounding renders a blurred ghost. Collapse every
   * chunky pixel heading to a single crisp shadow. */
  body[data-mode="pixel"] .picker-title,
  body[data-mode="pixel"] .px-title,
  body[data-mode="pixel"] .lvl-clear-title,
  body[data-mode="pixel"] .level-title{ text-shadow:2px 2px 0 var(--db-wine); }

  /* M3 — overlay close button is a comfortable 44px tap target. */
  body[data-mode="pixel"] .overlay-close{ min-width:44px; min-height:44px; }

  /* M4 — option / check buttons: 44px min tap target; long option text wraps
   * instead of pushing the panel wider than the viewport. */
  body[data-mode="pixel"] .opt{ min-height:44px; }
  body[data-mode="pixel"] .opt-text,
  body[data-mode="pixel"] .cc-opts .opt{ overflow-wrap:anywhere; }

  /* M7 — fill-in-the-blank input: the fixed 9ch width overflows narrow screens. */
  body[data-mode="pixel"] .fill-input{ max-width:100%; }
}

/* =============================================================================
 * UX-POLISH (definitive-guide pass, 2026-07-07) — pixel mode
 * P1–P3 HUD/kf contrast (SNES outline + solid chip) · P4 44px tap targets.
 * Appended at EOF so overrides win the cascade. Palette unchanged — we only
 * add a solid backing color + hard black text outline so foreground reads
 * over the animated map art (the .panel gradient leaves background-color
 * transparent, so HUD text was being measured against the bright map).
 * ============================================================================ */

/* P1 — HUD numerals/badges get a solid dark chip UNDER the panel gradient plus
 * a 2px hard SNES outline, so "LVL 1" / the XP number always read >=4.5:1. */
body[data-mode="pixel"] .hud .panel{
  background-color: var(--db-shadow);   /* solid floor beneath the gradient */
}
body[data-mode="pixel"] .hud-badge{
  color: var(--db-gold);
  text-shadow:
    -2px 0 0 var(--db-shadow), 2px 0 0 var(--db-shadow),
    0 -2px 0 var(--db-shadow), 0 2px 0 var(--db-shadow),
    2px 2px 0 var(--db-shadow);
}
body[data-mode="pixel"] .hud-num{
  color: var(--db-white);
  text-shadow:
    -2px 0 0 var(--db-shadow), 2px 0 0 var(--db-shadow),
    0 -2px 0 var(--db-shadow), 0 2px 0 var(--db-shadow);
}
body[data-mode="pixel"] .hud-label{ color: var(--db-white); }

/* P2 — locked map-node glyph: darken the node disk under a lock and give the
 * padlock a hard outline so it reads on any biome. */
body[data-mode="pixel"] .map-node[data-state="locked"] .node-disk{
  filter: brightness(.55) grayscale(.5);
}
body[data-mode="pixel"] .map-node .node-lock{
  filter: none;
  text-shadow:
    -2px 0 0 var(--db-shadow), 2px 0 0 var(--db-shadow),
    0 -2px 0 var(--db-shadow), 0 2px 0 var(--db-shadow);
}

/* P3 — key-terms label/hint: outline the label, brighten the hint to a
 * readable warm gray (coolgray = 6.2:1 on the panel floor). */
body[data-mode="pixel"] .kf-terms{
  background-color: var(--panel-fill);   /* solid floor under the 0a wash */
}
body[data-mode="pixel"] .kf-terms-label{
  color: var(--db-gold);
  text-shadow:
    -2px 0 0 var(--db-shadow), 2px 0 0 var(--db-shadow),
    0 -2px 0 var(--db-shadow), 0 2px 0 var(--db-shadow);
}
body[data-mode="pixel"] .kf-terms-hint{ color: var(--db-white); }

/* P4 — 44px minimum tap targets across level + menu chrome. Map nodes are
 * already 56px. Keep the visible chip look; just guarantee the hit height. */
body[data-mode="pixel"] .menu-tab{ min-height:44px; display:inline-flex; align-items:center; }
body[data-mode="pixel"] .kf-term-toggle{ min-height:44px; }
body[data-mode="pixel"] .btn{ min-height:44px; }
body[data-mode="pixel"] .node{ min-width:44px; min-height:44px; }

/* tiny-text: pixel display face reads chunky at 11px, but floor the two 10px
 * micro-labels the scout flagged (VT323 stays legible at 11). */
body[data-mode="pixel"] .level-eyebrow-code,
body[data-mode="pixel"] .companion-name,
body[data-mode="pixel"] .cheat-dec-lbl,
body[data-mode="pixel"] .prog-world-frac{ font-size:11px; }

/* Cheat-table + inline code sit on translucent washes over the dark panel; give
 * them a solid dark floor so gold/teal text reads unambiguously (>=4.5:1) and
 * no longer registers as low-contrast against art bleeding through. */
body[data-mode="pixel"] .cheat-table tr:nth-child(even) td{ background:#1c1526; }
body[data-mode="pixel"] .cheat-table td:first-child{ color:#8fd6dd; }
body[data-mode="pixel"] .content code{ background:#2a2413; }
body[data-mode="pixel"] .kf-def code{ background:#2a2413; }

/* node-lock: the padlock reads over the map, not a panel — sit it on a solid
 * dark disk so the glyph clears contrast regardless of biome behind it. The
 * emoji glyph color is font-fixed, so we set the surrounding chip + inherited
 * color to guarantee legibility rather than relying on text-shadow alone. */
body[data-mode="pixel"] .map-node[data-state="locked"] .node-disk{ filter:brightness(.4) grayscale(.55); }
/* Turn the padlock into a centered solid dark chip (a locked-coin look) so the
 * glyph reads on a guaranteed dark field over any biome, instead of floating
 * the multicolor emoji directly over bright map art. */
body[data-mode="pixel"] .map-node .node-lock{
  inset:auto; top:50%; left:50%; transform:translate(-50%,-50%);
  width:30px; height:30px; border-radius:50%;
  background:var(--db-shadow); color:var(--db-gold);
  box-shadow:0 0 0 2px #000; font-size:16px;
}

/* ==========================================================================
   GAMIFY (pixel skin) — badge art in the Progress grid, unlock toast & share
   overlay skinned for pixel mode. Appended block (Gamify workstream). All rules
   scoped body[data-mode="pixel"] so nothing bleeds into serious.
   ========================================================================== */

/* ---- badge art inside the existing .prog-achievements grid -------------- */
body[data-mode="pixel"] .ach-ico{ position:relative; display:inline-flex; }
body[data-mode="pixel"] .ach-badge{
  width:40px; height:40px; object-fit:contain; display:block;
  image-rendering:pixelated; image-rendering:crisp-edges;
  box-shadow:0 0 0 2px var(--db-shadow);
}
body[data-mode="pixel"] .ach.is-locked .ach-badge{ filter:grayscale(1) brightness(.55); }
body[data-mode="pixel"] .ach-lock{
  position:absolute; right:-6px; bottom:-6px; font-size:15px; line-height:1;
  filter:drop-shadow(0 0 2px #000);
}
body[data-mode="pixel"] .ach{ position:relative; }
body[data-mode="pixel"] .ach-share{
  margin-top:6px; font-family:var(--font-small); font-size:10px; cursor:pointer;
  color:var(--db-gold); background:var(--db-shadow); border:0;
  box-shadow:0 0 0 2px var(--db-gold); padding:4px 8px; min-height:28px;
}
body[data-mode="pixel"] .ach-share:hover{ background:var(--db-teal); color:var(--db-shadow); }
body[data-mode="pixel"] .ach-share:focus-visible{ outline:2px solid var(--db-white); outline-offset:2px; }

/* ---- unlock toast (pixel-framed) ---------------------------------------- */
body[data-mode="pixel"] .gc-toast{
  background:var(--db-shadow); color:var(--db-white);
  border:0; border-radius:0; font-family:var(--font-small);
  box-shadow:0 0 0 3px var(--db-gold), 0 0 0 6px var(--db-shadow), 6px 6px 0 0 rgba(0,0,0,.5);
  image-rendering:pixelated;
}
body[data-mode="pixel"] .gc-toast-badge{
  border-radius:0; box-shadow:0 0 0 2px var(--db-shadow);
  image-rendering:pixelated; image-rendering:crisp-edges;
}
/* Snap ALL badge art (trophy grid + share card composite) to the retro
   aesthetic in pixel mode: pixelated scaling + square frames so the emblem
   matches the deliberate 8-bit chrome around it, instead of a glossy vector. */
body[data-mode="pixel"] .gc-ach-img,
body[data-mode="pixel"] .gc-badge-img,
body[data-mode="pixel"] .gc-share-badge{
  image-rendering:pixelated; image-rendering:crisp-edges; border-radius:0;
}
body[data-mode="pixel"] .gc-ach-medal{ border-radius:0; }
body[data-mode="pixel"] .gc-toast-kicker{ color:var(--db-teal); }
body[data-mode="pixel"] .gc-toast-name{ font-family:var(--font-head, var(--font-small)); color:var(--db-gold); font-size:.9rem; }
body[data-mode="pixel"] .gc-toast-xp{ color:var(--db-gold); }
body[data-mode="pixel"] .gc-toast-share{
  background:var(--db-teal); color:var(--db-shadow); border-radius:0;
  box-shadow:0 0 0 2px var(--db-shadow); font-family:var(--font-small);
}
body[data-mode="pixel"] .gc-toast-share:hover{ background:var(--db-gold); }
body[data-mode="pixel"] .gc-toast-close{ color:var(--db-white); }
body[data-mode="pixel"] .gc-toast-share:focus-visible,
body[data-mode="pixel"] .gc-toast-close:focus-visible{ outline:2px solid var(--db-white); outline-offset:2px; }

/* ---- share overlay (pixel-framed) --------------------------------------- */
body[data-mode="pixel"] .gc-share-overlay{ background:rgba(20,12,28,.78); }
body[data-mode="pixel"] .gc-share-panel{
  background:var(--db-navy); color:var(--db-white); border-radius:0;
  box-shadow:0 0 0 3px var(--db-gold), 0 0 0 6px var(--db-shadow); font-family:var(--font-read, sans-serif);
}
body[data-mode="pixel"] .gc-share-title{ font-family:var(--font-head, var(--font-small)); color:var(--db-gold); }
body[data-mode="pixel"] .gc-share-sub{ color:var(--db-white); }
body[data-mode="pixel"] .gc-share-close{ background:var(--db-shadow); color:var(--db-gold); border-radius:0; box-shadow:0 0 0 2px var(--db-gold); }
body[data-mode="pixel"] .gc-share-canvas{ border-radius:0; box-shadow:0 0 0 2px var(--db-shadow); }
body[data-mode="pixel"] .gc-share-caplabel{ color:var(--db-teal); }
body[data-mode="pixel"] .gc-share-caption{
  background:var(--db-shadow); color:var(--db-white); border:0; border-radius:0;
  box-shadow:inset 0 0 0 2px var(--db-teal); font-family:var(--font-read, monospace);
}
body[data-mode="pixel"] .gc-share-btn{
  background:var(--db-shadow); color:var(--db-white); border:0; border-radius:0;
  box-shadow:0 0 0 2px var(--db-teal); font-family:var(--font-small); font-size:.78rem;
}
body[data-mode="pixel"] .gc-share-btn:hover{ background:var(--db-teal); color:var(--db-shadow); }
body[data-mode="pixel"] .gc-share-btn--li{ background:#0a66c2; color:#fff; box-shadow:0 0 0 2px var(--db-shadow); }
body[data-mode="pixel"] .gc-share-btn--li:hover{ background:#0a66c2; }
body[data-mode="pixel"] .gc-share-note{ color:var(--db-white); opacity:.75; }
body[data-mode="pixel"] .gc-share-btn:focus-visible,
body[data-mode="pixel"] .gc-share-close:focus-visible{ outline:2px solid var(--db-gold); outline-offset:2px; }
/* END GAMIFY (pixel) */