/* ═══════════ SPRINT QUEST — Pixel design system (restored) ═══════════ */

/* ── 1. TOKENS — old yellow/gold pixel palette, new layout + animations ── */
:root{
  --cdx-bg:        #0a0c16;
  --cdx-surface:   #11142a;
  --cdx-surface-2: #1d2242;
  --cdx-border:    #2c3260;
  --cdx-border-soft:#222933;
  --cdx-ink:       #eef1ff;
  --cdx-ink-2:     #8b93c4;
  --cdx-ink-3:     #6a6f8e;
  --cdx-accent:    #ffb038;   /* old yellow */
  --cdx-accent-2:  #ff7a3d;   /* old orange */
  --cdx-good:      #3ee089;
  --cdx-bad:       #ff5d6a;
  --cdx-warn:      #d29922;
  --cdx-gold:      #ffd028;   /* old gold */
  --cdx-code-bg:   #0b0e1d;
  --cdx-code-ink:  #d7e4ff;
  --cdx-pink:      #f778ba;
  --cdx-radius:    4px;
  --cdx-radius-sm: 3px;
  --cdx-shadow-sm: 2px 2px 0 #05060d;
  --cdx-shadow:    4px 4px 0 #05060d;
  --cdx-shadow-lg: 8px 8px 0 #05060d;
  --cdx-font-mono: "VT323",monospace;
  --cdx-font-sans: "VT323",monospace;
  --cdx-font-display: "Press Start 2P",monospace;
  --cdx-space-1: 4px; --cdx-space-2: 8px; --cdx-space-3: 12px;
  --cdx-space-4: 16px; --cdx-space-5: 24px; --cdx-space-6: 32px; --cdx-space-7: 48px;

  /* ── 2. ALIAS old tokens → new ── */
  --bg:var(--cdx-bg); --bg2:var(--cdx-surface); --panel:var(--cdx-surface);
  --panel2:var(--cdx-surface-2); --ink:var(--cdx-ink); --muted:var(--cdx-ink-2);
  --line:var(--cdx-border); --accent:var(--cdx-accent); --accent2:var(--cdx-accent-2);
  --gold:var(--cdx-gold); --good:var(--cdx-good); --bad:var(--cdx-bad);
  --hp:#ff4d5e; --code-bg:var(--cdx-code-bg); --code-ink:var(--cdx-code-ink);
  --shadow:#05060d;
}
:root[data-theme="light"]{
  --cdx-bg:#efe6d2; --cdx-surface:#fdf6e6; --cdx-surface-2:#f3ead4;
  --cdx-border:#c9bfa4; --cdx-ink:#1d2033; --cdx-ink-2:#6a6f8e; --cdx-ink-3:#8c959f;
  --cdx-code-bg:#141830; --cdx-code-ink:#d7e4ff; --shadow:#b8ad91;
}

/* ── 3. BASE ── */
*{box-sizing:border-box; margin:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; image-rendering:pixelated}
body{
  background:var(--cdx-bg); color:var(--cdx-ink);
  font-family:"VT323",monospace; font-size:22px; line-height:1.45;
  height:100vh; overflow:hidden;
  -webkit-font-smoothing:none;
  text-rendering:optimizeSpeed;
}
.press{font-family:"Press Start 2P",monospace; font-weight:400; letter-spacing:0; line-height:1.6; text-transform:none}
.small{font-size:.65em}
.muted{color:var(--cdx-ink-2)}
.center{text-align:center}

/* pixel atmosphere RESTORED */
.stars{position:fixed; inset:0; z-index:-2; background:
  radial-gradient(1px 1px at 12% 22%, #fff8 0 1px, transparent 1px),
  radial-gradient(1px 1px at 68% 8%,  #fff6 0 1px, transparent 1px),
  radial-gradient(2px 2px at 84% 34%, #ffd02866 0 2px, transparent 2px),
  radial-gradient(1px 1px at 35% 64%, #fff5 0 1px, transparent 1px),
  radial-gradient(1px 1px at 92% 78%, #fff7 0 1px, transparent 1px),
  radial-gradient(2px 2px at 22% 88%, #8bc4ff44 0 2px, transparent 2px),
  radial-gradient(1px 1px at 51% 41%, #fff4 0 1px, transparent 1px),
  var(--cdx-bg);
  animation:twinkle 4s steps(2) infinite;
}
:root[data-theme="light"] .stars{opacity:.25}
@keyframes twinkle{50%{opacity:.75}}
.scanlines{position:fixed; inset:0; z-index:50; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent 0 2px, #00000014 2px 4px);
  mix-blend-mode:multiply;
}

/* ── PREMIUM AMBIENT BACKGROUND: hidden in pixel mode (starfield is the atmosphere) ── */
.cdx-atmosphere{display:none !important}

/* ── accessibility: focus rings ── */
.cdx-btn:focus-visible, .pixelbtn:focus-visible, .iconbtn:focus-visible,
.zone:focus-visible, .opt:focus-visible, .rm-cell:focus-visible,
.ld-row.clickable:focus-visible, .hud-day:focus-visible, .flash:focus-visible{
  outline:2px solid var(--cdx-accent); outline-offset:2px;
}

/* ── PREMIUM TRANSITIONS: spring-like cubic-bezier ── */
:root{
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-power3: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.15s; --t-med: 0.3s; --t-slow: 0.5s;
}

/* ── 4. PRIMITIVES (.cdx-*) — never collide with existing classes ── */
.cdx-btn{
  font-family:"Press Start 2P",monospace; font-weight:400; font-size:12px;
  background:var(--cdx-accent); color:#1a1204; border:0; border-radius:0;
  padding:14px 20px; cursor:pointer; transition:all var(--t-fast);
  box-shadow:0 6px 0 var(--cdx-accent-2), 0 10px 0 var(--shadow);
}
.cdx-btn:hover{filter:brightness(1.08)}
.cdx-btn:active{transform:translateY(6px); box-shadow:0 0 0 var(--cdx-accent-2), 0 4px 0 var(--shadow)}
.cdx-btn--ghost{background:transparent; color:var(--cdx-ink); border:1px solid var(--cdx-border)}
.cdx-btn--ghost:hover{background:var(--cdx-surface-2); border-color:var(--cdx-accent)}
.cdx-btn--good{background:var(--cdx-good); color:#0e1116}
.cdx-btn--sm{font-size:12px; padding:6px 12px}
.cdx-btn:disabled{opacity:.45; cursor:default}
.cdx-card{
  background:var(--cdx-surface); border:1px solid var(--cdx-border);
  border-radius:var(--cdx-radius); padding:var(--cdx-space-5);
  box-shadow:var(--cdx-shadow-sm);
}
.cdx-tag{
  display:inline-block; font-family:"Press Start 2P",monospace; font-size:11px; font-weight:400;
  padding:6px 8px; border:3px solid var(--cdx-accent); border-radius:0;
  color:var(--cdx-accent); background:var(--cdx-bg); letter-spacing:0;
  animation:none;
}
.cdx-badge{
  display:inline-block; font-family:var(--cdx-font-mono); font-size:11px; font-weight:600;
  padding:3px 8px; border-radius:var(--cdx-radius-sm); background:var(--cdx-surface-2);
  color:var(--cdx-ink-2); border:1px solid var(--cdx-border);
}
.cdx-input, .cdx-textarea{
  width:100%; background:var(--cdx-bg); color:var(--cdx-ink);
  border:1px solid var(--cdx-border); border-radius:var(--cdx-radius-sm);
  padding:10px 12px; font-family:var(--cdx-font-mono); font-size:14px;
}
.cdx-input:focus, .cdx-textarea:focus{outline:none; border-color:var(--cdx-accent)}
.cdx-code{
  background:var(--cdx-code-bg); color:var(--cdx-code-ink);
  border:1px solid var(--cdx-border); border-radius:var(--cdx-radius-sm);
  padding:14px 16px; font-family:var(--cdx-font-mono); font-size:14px; line-height:1.6;
  overflow-x:auto;
}
.cdx-progress{height:6px; background:var(--cdx-surface-2); border-radius:99px; overflow:hidden}
.cdx-progress > span{display:block; height:100%; background:var(--cdx-accent); border-radius:99px; transition:width .4s}
.cdx-kbd{
  font-family:var(--cdx-font-mono); font-size:11px; background:var(--cdx-surface-2);
  border:1px solid var(--cdx-border); border-bottom-width:2px; border-radius:4px;
  padding:1px 6px; color:var(--cdx-ink-2);
}
.cdx-divider{height:1px; background:var(--cdx-border); border:0; margin:var(--cdx-space-4) 0}

/* ═══════════ EXISTING RULES — kept, now using aliased tokens ═══════════ */

/* ── HUD ── */
.hud{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px;
  background:var(--cdx-surface); border-bottom:4px solid var(--shadow);
  padding:10px 16px; flex-wrap:wrap;
  transition:border-color var(--t-med) var(--ease-power3);
}
.hud-day{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"Press Start 2P",monospace; font-size:11px; color:var(--cdx-accent);
  border:3px solid var(--cdx-accent); padding:4px 10px; background:var(--cdx-bg);
  cursor:pointer; letter-spacing:0; border-radius:0;
  transition:all var(--t-med) var(--ease-spring);
}
.coin-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg, #ffd700 0%, #ffaa00 40%, #ff8800 100%);
  border:2px solid #b8860b; box-shadow: 0 2px 4px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.4);
  animation:coin-shine 2s ease-in-out infinite;
}
.coin-inner{
  font-family:"Press Start 2P",monospace; font-size:10px; font-weight:bold;
  color:#8B4513; text-shadow:0 1px 0 rgba(255,255,255,.4);
  line-height:1;
}
@keyframes coin-shine{
  0%,100%{ box-shadow:0 2px 4px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.4); }
  50%{ box-shadow:0 2px 8px rgba(255,215,0,.6), inset 0 1px 2px rgba(255,255,255,.5); }
}
.hud-day:hover{background:rgba(255,176,56,.2); box-shadow:0 0 12px rgba(255,176,56,.4)}
.hud-day:active{transform:translate(2px,2px)}
.hearts{display:flex; gap:10px; min-width:132px; align-items:center}
.heart{display:inline-block; transform:scale(4); transform-origin:top left; margin-right:18px; margin-top:6px; color:var(--cdx-bad); transition:opacity .2s}
.heart svg{width:7px; height:6px; display:block}
.heart.lost{animation:heartpop .55s steps(5)}
@keyframes heartpop{0%{filter:brightness(4); transform:scale(4)}60%{transform:scale(3) rotate(-20deg)}100%{transform:scale(4)}}
.xpwrap{flex:1; min-width:160px; display:flex; align-items:center; gap:10px}
.xptrack{flex:1; height:16px; background:var(--cdx-bg); border:3px solid var(--cdx-border); position:relative; border-radius:0}
.xpfill{height:100%; width:0%; background:linear-gradient(90deg,var(--cdx-accent-2),var(--cdx-gold));
  transition:width .5s steps(8); box-shadow:0 0 12px var(--cdx-gold); border-radius:0}
.xpfill::after{display:none}
.xplabel{font-family:"Press Start 2P",monospace; font-size:9px; white-space:nowrap; color:var(--cdx-gold)}
.streak{font-family:"Press Start 2P",monospace; font-size:11px; font-weight:400}
.combo{font-family:"Press Start 2P",monospace; font-size:10px; color:var(--cdx-good); animation:pulse .5s steps(2) infinite}
@keyframes pulse{50%{transform:scale(1.15)}}
.iconbtn{
  background:var(--cdx-surface-2); border:3px solid var(--cdx-border); color:var(--cdx-ink);
  font-size:18px; padding:4px 9px; cursor:pointer; border-radius:0;
  transition:all var(--t-med) var(--ease-spring);
}
.iconbtn:hover{border-color:var(--cdx-accent); box-shadow:0 0 10px rgba(255,176,56,.3)}
.iconbtn:active{transform:translate(2px,2px)}
.voicesel{max-width:150px; font-family:"VT323",monospace; font-size:17px;
  background:var(--cdx-surface-2); color:var(--cdx-ink); border:3px solid var(--cdx-border);
  border-radius:0; padding:4px 8px}
.voicesel:hover{border-color:var(--cdx-accent)}

/* ── screens ── */
.screen{
  width:100%; margin:0 auto; padding:28px 18px 20px;
  height:calc(100vh - 70px - var(--hb)); overflow:hidden;
  animation:wipe .3s ease;
}
#scr-title{height:100vh; display:flex; align-items:center; justify-content:center}
#scr-story,#scr-arena,#scr-bugs,#scr-shrine{
  display:flex; flex-direction:column; justify-content:flex-start;
  width:100%; height:calc(100vh - 70px - var(--hb)); overflow:hidden;
}
@keyframes wipe{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ── Codédex split-view: lesson | practice ── */
#scr-story, #scr-arena{
  width:100%; margin:0 auto; padding:28px 18px 20px; height:calc(100vh - 70px - var(--hb));
  justify-content:flex-start; overflow:hidden;
}
.cdx-split{display:grid; grid-template-columns:1.3fr 0.7fr; grid-template-rows:minmax(0,1fr); gap:20px; width:100%; align-items:stretch; flex:1 1 auto; min-height:0}
.cdx-lesson, .cdx-practice{
  background:var(--cdx-surface); border:4px solid var(--cdx-border); border-radius:0;
  padding:20px 18px; box-shadow:8px 8px 0 var(--shadow); min-width:0;
  transition:transform var(--t-med) var(--ease-spring);
  min-height:0; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--cdx-border) transparent;
  display:flex; flex-direction:column;
  position:relative;
}
.cdx-practice{min-height:0; overflow-y:auto}
/* scrolling flex-columns: children keep full content height (don't shrink) so code/tables show completely */
.cdx-lesson > *, .cdx-practice > *{flex-shrink:0}
.cdx-lesson:hover, .cdx-practice:hover{transform:translate(-2px,-2px); box-shadow:10px 10px 0 var(--shadow)}
.cdx-lesson::-webkit-scrollbar, .cdx-practice::-webkit-scrollbar{width:6px}
.cdx-lesson::-webkit-scrollbar-thumb, .cdx-practice::-webkit-scrollbar-thumb{background:var(--cdx-border); border-radius:0}
.cdx-section-title{font-family:"Press Start 2P",monospace; font-size:11px; color:var(--cdx-accent); margin:18px 0 8px; text-shadow:2px 2px 0 var(--shadow); letter-spacing:.02em}
.cdx-lesson > .stagetitle + .cdx-fullview-btn + .muted{margin-top:-6px}
.cdx-teach{font-size:21px; line-height:1.45; margin:10px 0; color:var(--cdx-ink); font-family:"VT323",monospace}
.cdx-teach code{font-family:"VT323",monospace; font-size:21px; background:var(--cdx-surface-2); padding:1px 5px; border-radius:0; color:var(--cdx-gold)}
@media(max-width:900px){
  .cdx-split{grid-template-columns:1fr; min-height:auto}
  #scr-story, #scr-arena{height:calc(100vh - 70px - var(--hb)); overflow:hidden}
  .cdx-lesson, .cdx-practice{height:auto; max-height:none; overflow:visible}
}

/* ── phone: READ | SOLVE switch ──────────────────────────────────────────
   Stacked, the task pane sits ~1900px below the lesson — two screens of
   scrolling to answer a question. On a phone we show ONE pane at a time and
   switch with a sticky segmented control (same state the \ key drives). */
.pane-tabs{display:none}
@media(max-width:900px){
  .pane-tabs{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    position:sticky; top:0; z-index:30; padding:8px 0 10px;
    background:linear-gradient(180deg,var(--cdx-bg) 70%,transparent);
  }
  .pane-tab{
    min-height:46px; padding:10px 8px; cursor:pointer; border-radius:4px;
    font-family:"Press Start 2P",monospace; font-size:10px;
    background:var(--cdx-surface-2); color:var(--cdx-ink-2);
    border:3px solid var(--cdx-border);
  }
  .pane-tab.on{border-color:var(--cdx-accent); color:var(--cdx-accent); background:var(--cdx-surface)}
  .cdx-split[data-pane="lesson"] .cdx-practice{display:none}
  .cdx-split[data-pane="practice"] .cdx-lesson{display:none}
  /* one pane at a time means it owns the screen — let it scroll on its own */
  #scr-story, #scr-arena{height:auto; overflow:visible}
  .cdx-lesson:hover, .cdx-practice:hover{transform:none; box-shadow:6px 6px 0 var(--shadow)}
}

/* touch ergonomics live at the END of this file — a later .iconbtn rule
   (min-height:40px) would otherwise win on equal specificity. */

/* full-view lesson overlay (Notion-style center peek) */
.cdx-fullview-btn{
  position:absolute; top:10px; right:10px; z-index:2;
}
/* toolbar of small pane controls: full view / swap pane / code lab */
.cdx-pane-tools{display:flex; gap:6px}
.cdx-tool{
  background:var(--cdx-surface-2); border:3px solid var(--cdx-border);
  color:var(--cdx-ink-2); font-family:"Press Start 2P",monospace; font-size:8px;
  padding:6px 8px; cursor:pointer; border-radius:0; white-space:nowrap;
  transition:all var(--t-fast);
}
.cdx-tool:hover{border-color:var(--cdx-accent); color:var(--cdx-accent)}
/* which pane the arrow keys are scrolling right now */
.cdx-pane-active{box-shadow:inset 0 0 0 2px var(--cdx-accent), 8px 8px 0 var(--shadow)}
.cdx-fullview-overlay{
  position:fixed; inset:0; z-index:80; background:#05060de6;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.cdx-fullview-box{
  background:var(--cdx-surface); border:4px solid var(--cdx-border); border-radius:0;
  box-shadow:14px 14px 0 var(--shadow);
  width:min(1180px, 96vw); height:min(94vh, 980px);
  display:flex; flex-direction:column; overflow:hidden;
}
.cdx-fullview-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; background:var(--cdx-surface-2);
  border-bottom:3px solid var(--cdx-border);
  font-family:"Press Start 2P",monospace; font-size:12px; color:var(--cdx-accent);
}
.cdx-fullview-content{
  flex:1; overflow-y:auto; padding:26px 30px;
  font-family:"VT323",monospace; font-size:24px; line-height:1.55;
}
.cdx-fullview-content .cdx-section-title{
  font-family:"Press Start 2P",monospace; font-size:13px; color:var(--cdx-accent);
  margin:22px 0 8px; text-shadow:2px 2px 0 var(--shadow);
}
.cdx-fullview-content .narr{font-size:25px; line-height:1.55}
.cdx-fullview-content .cdx-teach{font-size:24px; line-height:1.55}
.cdx-fullview-content pre.codebox{font-size:20px; padding:18px}
.cdx-fullview-content .defbox, .cdx-fullview-content .aiwhy{font-size:23px}
@media(max-width:760px){
  .cdx-fullview-box{width:98vw; height:96vh; padding:0}
  .cdx-fullview-content{padding:18px; font-size:20px}
  .cdx-fullview-content pre.codebox{font-size:16px}
}

/* title */
#scr-title{display:flex; min-height:92vh; align-items:center; justify-content:center; text-align:center; flex-direction:column; gap:8px}
.cdx-title-box{display:flex; flex-direction:column; align-items:center; gap:6px; max-width:600px; padding:0 20px}
.cdx-copyright{font-family:"Press Start 2P",monospace; font-size:11px; color:var(--cdx-ink-3); margin-bottom:8px; animation:blink 1.2s steps(1) infinite}
.title{
  font-family:"Press Start 2P",monospace; font-weight:400;
  font-size:clamp(34px,9vw,72px); color:var(--cdx-accent);
  letter-spacing:0; line-height:1.2; margin:20px 0;
  text-shadow:4px 4px 0 var(--cdx-accent-2), 8px 8px 0 var(--shadow);
  background:none; -webkit-text-fill-color:initial;
  filter:none; animation:none;
}
.cdx-subtitle{font-size:26px; color:var(--cdx-ink-2); margin:6px 0 22px; font-family:"VT323",monospace}
.cdx-tagline-small{font-size:18px; color:var(--cdx-ink-3); margin:0 0 20px; font-family:"VT323",monospace}
.cdx-start-btn{
  font-family:"Press Start 2P",monospace; font-size:16px; padding:18px 30px; margin:8px 0;
  background:var(--cdx-accent); color:#1a1204; border:0;
  box-shadow:0 6px 0 var(--cdx-accent-2), 0 10px 0 var(--shadow);
  border-radius:0; text-transform:none; font-weight:400;
  animation:blink 1.2s steps(1) infinite;
}
.cdx-start-btn:hover{animation:none; filter:brightness(1.1)}
.cdx-start-btn:active{transform:translateY(6px); box-shadow:0 0 0 var(--cdx-accent-2), 0 4px 0 var(--shadow)}
.cdx-start-btn::after{display:none}
.cdx-title-hint{font-size:16px; color:var(--cdx-ink-3); margin-top:12px; line-height:1.45; font-family:"VT323",monospace}
.blink{animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sword{display:none}
.blink{animation:blink 1.4s ease infinite}
@keyframes blink{50%{opacity:.4}}
.sword{display:none}

/* map / zones */
.worldname{
  font-family:"Press Start 2P",monospace; font-weight:400;
  font-size:clamp(16px,4vw,26px); color:var(--cdx-accent); text-align:center;
  margin:24px 0 4px; text-shadow:3px 3px 0 var(--shadow);
}
#scr-map .tagline{text-align:center}

/* ── top day wheel (coverflow-style 5-day picker) ── */
.wheel-status{position:fixed; top:74px; left:50%; transform:translateX(-50%); width:calc(100% - 32px); max-width:520px; margin:0; padding:6px 10px; background:var(--cdx-gold); color:#1a1204; border:3px solid var(--cdx-accent); box-shadow:4px 4px 0 var(--shadow); font-family:"Press Start 2P",monospace; font-size:10px; text-align:center; line-height:1.3; z-index:30; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.day-timeline-wrap{display:flex; align-items:center; gap:10px; padding:190px 0 16px; width:100%; user-select:none}
.day-timeline{flex:1; display:flex; justify-content:center; align-items:center; gap:0; overflow-x:hidden; overflow-y:visible; padding:24px 0 14px; min-height:88px; position:relative; cursor:grab}
@media(max-width:760px){
  .wheel-status{font-size:9px; padding:5px 8px; top:68px}
  .day-timeline-wrap{padding:170px 0 12px}
}
.day-timeline:active{cursor:grabbing}
.day-timeline::-webkit-scrollbar{display:none}
.timeline-arrow{background:var(--cdx-surface-2); border:3px solid var(--cdx-border); color:var(--cdx-accent); font-family:"Press Start 2P",monospace; font-size:10px; padding:10px 12px; cursor:pointer; border-radius:0; flex-shrink:0; transition:all var(--t-fast)}
.timeline-arrow:hover{border-color:var(--cdx-accent)}
.timeline-arrow:active{transform:translateY(2px)}
.tl-cell{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:all .25s var(--ease-spring); border:3px solid var(--cdx-border); background:var(--cdx-surface); color:var(--cdx-ink-2); font-family:"Press Start 2P",monospace; border-radius:0}
.tl-cell .tl-num{font-size:10px}
.tl-cell .tl-dot{width:6px; height:6px; background:var(--cdx-border); margin-top:4px; border-radius:50%}
.tl-cell.p1{background:#131d22; border-color:#1d3a30}
.tl-cell.p2{background:#141a2a; border-color:#24304d}
.tl-cell.p3{background:#1a1626; border-color:#382744}
.tl-cell.open{color:var(--cdx-gold); border-color:var(--cdx-gold); box-shadow:0 0 8px rgba(255,208,40,.25)}
.tl-cell.done{color:#0d1024; background:var(--cdx-good); border-color:var(--cdx-good)}
.tl-cell.boss::after{content:"☠"; position:absolute; top:-9px; right:-5px; font-size:10px; color:var(--cdx-bad); text-shadow:0 0 3px #000}
.tl-cell.here{outline:3px solid var(--cdx-accent); outline-offset:2px; z-index:1}
.tl-cell.tl-hide{display:none}
/* wheel depth */
.tl-cell.tl-far{width:52px; height:54px; transform:scale(.82); opacity:.5; filter:blur(1.4px); margin:0 -6px; z-index:1; font-size:9px}
.tl-cell.tl-near{width:66px; height:64px; transform:scale(.95); opacity:.85; margin:0 -3px; z-index:2; font-size:10px}
.tl-cell.tl-center{width:88px; height:78px; transform:scale(1.18); opacity:1; border-color:var(--cdx-accent); color:var(--cdx-accent); box-shadow:0 0 20px rgba(255,176,56,.6); z-index:3; font-size:13px}
.tl-cell.tl-center .tl-dot{background:var(--cdx-accent); width:8px; height:8px}
.tl-cell.tl-center .tl-num{font-size:13px}
.tl-cell.tl-far .tl-num{font-size:9px}
 @media(max-width:760px){
  .wheel-status{font-size:9px; padding:5px 8px; top:68px}
  .day-timeline-wrap{padding:170px 0 12px}
  .day-timeline{min-height:72px}
  .tl-cell.tl-far{width:42px; height:46px; font-size:8px}
  .tl-cell.tl-near{width:54px; height:54px; font-size:9px}
  .tl-cell.tl-center{width:70px; height:62px; font-size:11px}
  .tl-cell.tl-center .tl-num{font-size:11px}
}

/* day preview card under the wheel */
.day-preview{
  max-width: 560px;
  margin: 16px auto 22px;
  padding: 16px 18px;
  background: var(--cdx-surface);
  border: 4px solid var(--cdx-accent);
  box-shadow: 0 0 22px rgba(255,176,56,.35);
  text-align: center;
  position: relative;
  z-index: 5;
}
.day-preview .dp-head{
  font-family: "Press Start 2P", monospace;
  font-size: 12px;
  color: var(--cdx-accent);
  margin-bottom: 10px;
  line-height: 1.5;
}
.day-preview .dp-world{
  font-family: "Press Start 2P", monospace;
  font-size: 14px;
  color: var(--cdx-gold);
  margin-bottom: 8px;
  text-shadow: 2px 2px 0 var(--shadow);
}
.day-preview .dp-tagline{
  font-family: "VT323", monospace;
  font-size: 20px;
  color: var(--cdx-ink-2);
  margin-bottom: 12px;
  line-height: 1.4;
}
.day-preview .dp-intro{
  font-family: "VT323", monospace;
  font-size: 19px;
  color: var(--cdx-ink);
  line-height: 1.5;
  text-align: left;
  margin-bottom: 14px;
}
.day-preview .dp-stages{
  text-align: left;
  margin: 10px 0 14px;
  padding-left: 0;
  list-style: none;
}
.day-preview .dp-stages li{
  font-family: "VT323", monospace;
  font-size: 18px;
  color: var(--cdx-ink-2);
  padding: 4px 0;
  border-bottom: 1px dashed var(--cdx-border);
}
.day-preview .dp-stages li:last-child{border-bottom:0}
.day-preview .dp-stages li::before{content:"⚡ "; color:var(--cdx-accent)}
.day-preview .dp-locked{
  font-family: "VT323", monospace;
  font-size: 18px;
  color: var(--cdx-ink-2);
}
.day-preview .dp-btn{
  margin-top: 12px;
  width: 100%;
  max-width: 260px;
}
@media(max-width:760px){
  .day-preview{max-width: 94vw; margin: 12px auto 18px; padding: 14px}
  .day-preview .dp-world{font-size: 12px}
  .day-preview .dp-intro, .day-preview .dp-tagline, .day-preview .dp-stages li, .day-preview .dp-locked{font-size: 17px}
}

/* ── Codédex map layout: main + rail ── */
.cdx-map-layout{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:24px; width:100%; max-width:1560px; margin:0 auto; align-items:stretch; min-height:calc(100vh - 108px)}
.cdx-map-main{min-width:0; display:flex; flex-direction:column}
.cdx-map-rail{display:flex; flex-direction:column; gap:12px; min-height:0; overflow:visible}
@media(max-width:900px){
  .cdx-map-layout{grid-template-columns:1fr; gap:16px; min-height:0}
  .cdx-map-rail{position:static; height:auto; max-height:calc(100vh - 180px); overflow-y:auto; padding-bottom:20px}
}
.cdx-today-hero{
  background:var(--cdx-surface); border:4px solid var(--cdx-border); border-radius:0;
  padding:24px 22px; margin-bottom:18px; box-shadow:8px 8px 0 var(--shadow);
  display:flex; flex-direction:column; gap:10px; position:relative;
  transition:transform var(--t-med) var(--ease-spring);
}
.cdx-today-hero::before{display:none}
.cdx-today-hero:hover{transform:translate(-2px,-2px); box-shadow:10px 10px 0 var(--shadow)}
.cdx-today-title{
  font-family:"Press Start 2P",monospace; font-weight:400; font-size:clamp(16px,4vw,26px);
  color:var(--cdx-accent); margin:4px 0 2px; letter-spacing:0; line-height:1.4;
  text-shadow:3px 3px 0 var(--shadow);
  background:none; -webkit-text-fill-color:initial;
}
.cdx-today-tag{font-size:23px; color:var(--cdx-ink-2); line-height:1.45; margin:0; font-family:"VT323",monospace}
.cdx-continue-btn{
  align-self:flex-start; margin-top:8px; font-family:"Press Start 2P",monospace; font-size:12px;
  padding:14px 20px; background:var(--cdx-accent); color:#1a1204; border:0;
  box-shadow:0 6px 0 var(--cdx-accent-2), 0 10px 0 var(--shadow); border-radius:0;
  text-transform:none; font-weight:400; transition:all var(--t-fast);
}
.cdx-continue-btn:hover{filter:brightness(1.1)}
.cdx-continue-btn:active{transform:translateY(6px); box-shadow:0 0 0 var(--cdx-accent-2), 0 4px 0 var(--shadow)}
.cdx-continue-btn::after{display:none}

/* Code editor quick button on map hero */
.cdx-lab-btn{
  align-self:flex-start; margin-top:4px; font-family:"Press Start 2P",monospace; font-size:11px;
  padding:10px 18px; background:var(--cdx-surface-2); color:var(--cdx-accent); border:3px solid var(--cdx-accent);
  box-shadow:0 4px 0 var(--shadow); border-radius:0; text-transform:none; font-weight:400;
  transition:all var(--t-fast);
}
.cdx-lab-btn:hover{background:rgba(255,176,56,.15); box-shadow:0 6px 0 var(--shadow)}
.cdx-lab-btn:active{transform:translateY(4px); box-shadow:0 0 0 var(--shadow)}

/* ── Code Lab / full editor ── */
.cdx-lab-editor{min-height:320px !important; font-size:18px !important; line-height:1.5 !important}
.cdx-lab-controls{justify-content:flex-start}
.cdx-lab-output{min-height:80px; font-family:"VT323",monospace; font-size:20px; white-space:pre-wrap; max-height:300px; overflow-y:auto}
.cdx-lab-errors{min-height:60px; font-family:"VT323",monospace; font-size:18px; white-space:pre-wrap; max-height:200px; overflow-y:auto}
.cdx-term-label{font-family:"Press Start 2P",monospace; font-size:9px; color:var(--cdx-good); margin-top:14px; margin-bottom:6px}
.cdx-err-label{font-family:"Press Start 2P",monospace; font-size:9px; color:var(--cdx-bad); margin-top:14px; margin-bottom:6px}
.cdx-examples{border:3px solid var(--cdx-border); background:var(--cdx-surface-2); padding:10px; margin:10px 0}
.cdx-examples button{display:block; margin:4px 0}

/* rough code tester popup inside practice pane */
.cdx-test-code-btn{margin-top: 16px; display: block; width: 100%}
.cdx-mini-editor{min-height:200px !important; font-size:18px !important; line-height:1.5 !important; width:100%}
.cdx-mini-output{min-height:60px; font-family:"VT323",monospace; font-size:18px; white-space:pre-wrap; max-height:180px; overflow-y:auto}
.cdx-mini-error{min-height:40px; font-family:"VT323",monospace; font-size:16px; white-space:pre-wrap; max-height:120px; overflow-y:auto}

.zones{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); grid-auto-rows:1fr; gap:14px; margin-top:0; flex:1 1 auto}
.zone{
  background:var(--cdx-surface); border:4px solid var(--cdx-border); color:var(--cdx-ink); cursor:pointer;
  padding:22px 18px; text-align:left; display:flex; flex-direction:column; gap:10px;
  border-radius:0; transition:all var(--t-med) var(--ease-spring);
  font-family:inherit; font-size:inherit; box-shadow:6px 6px 0 var(--shadow);
  position:relative; overflow:hidden;
}
.zone::before{
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transition:none; pointer-events:none;
}
.zone:hover::before, body.kb-on .zone:focus::before{animation:zone-shimmer .6s ease-out forwards}
@keyframes zone-shimmer{0%{left:-100%}100%{left:120%}}
.zone:hover, body.kb-on .zone:focus{
  border-color:var(--cdx-accent); transform:translate(-2px,-2px);
  box-shadow:8px 8px 0 var(--shadow), 0 0 20px rgba(255,176,56,.15);
  background:var(--cdx-surface-2);
}
.zone:active{transform:translate(4px,4px); box-shadow:2px 2px 0 var(--shadow)}
.zicon{font-size:34px; transition:transform var(--t-slow) var(--ease-spring)}
.zone:hover .zicon, body.kb-on .zone:focus .zicon{transform:scale(1.2) rotate(-8deg) translateY(-2px)}
.zname{font-size:12px; color:var(--cdx-accent); font-family:"Press Start 2P",monospace}
.zdesc{color:var(--cdx-ink-2); font-size:19px; font-family:"VT323",monospace}
.zprog{font-family:"Press Start 2P",monospace; font-size:9px; color:var(--cdx-good)}
.zicon{font-size:28px}
.zname{font-family:var(--cdx-font-mono); font-weight:700; font-size:13px; color:var(--cdx-accent); letter-spacing:.04em; text-transform:uppercase}
.zdesc{color:var(--cdx-ink-2); font-size:14px; line-height:1.5}
.zprog{font-family:var(--cdx-font-mono); font-size:11px; color:var(--cdx-good); font-weight:600}
/* pin progress to card bottom so tall cards read as intentional, not empty */
.zone .zprog{margin-top:auto; padding-top:6px}
.zone .zdesc{flex:0 0 auto}

/* shrine/lab/library — single-panel screens */
#scr-shrine .panel, #scr-lab .panel, #scr-library .panel{width:100%; margin:0 auto}
#scr-shrine .stagetitle, #scr-lab .stagetitle, #scr-library .stagetitle{
  font-size:18px; border-bottom:1px solid var(--cdx-border); padding-bottom:12px; margin-bottom:18px;
}
.libviewer{border-radius:var(--cdx-radius)}
.panel{
  background:var(--cdx-surface); border:4px solid var(--cdx-border); border-radius:0;
  padding:24px 22px; margin-top:18px; position:relative; box-shadow:8px 8px 0 var(--shadow);
}
.stagebar{display:flex; gap:8px; justify-content:center; margin:10px 0 16px}
.stagedot{width:18px; height:18px; border:3px solid var(--cdx-border); background:var(--cdx-bg); border-radius:0}
.stagedot.done{background:var(--cdx-good); border-color:var(--cdx-good)}
.stagedot.on{background:var(--cdx-accent); border-color:var(--cdx-accent); animation:pulse 1s steps(2) infinite}

h3.stagetitle{
  font-family:"Press Start 2P",monospace; font-weight:400; font-size:15px;
  color:var(--cdx-accent); margin:4px 0 14px; letter-spacing:0; text-transform:none;
}
.narr{
  border-left:6px solid var(--cdx-accent); background:var(--cdx-surface-2);
  padding:12px 16px; margin:14px 0; font-size:23px; line-height:1.45;
  border-radius:0; font-family:"VT323",monospace;
  transition:border-color var(--t-slow);
}
.narr::before{display:none}
.liblist{display:flex; flex-direction:column; gap:8px; margin:14px 0}
.libviewer{width:100%; height:78vh; border:4px solid var(--cdx-gold); background:#fff; margin-top:14px; border-radius:0}
.resbox{border:4px solid var(--cdx-gold); background:var(--cdx-bg); padding:10px 14px; margin:16px 0; border-radius:0}
.resbox summary{font-size:9px; color:var(--cdx-gold); font-family:"Press Start 2P",monospace; cursor:pointer}
.resgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin-top:12px}
.rescard{display:flex; flex-direction:column; gap:4px; text-align:left; cursor:pointer; text-decoration:none;
  border:3px solid rgba(255,255,255,.18); background:var(--cdx-code-bg); padding:10px 12px; border-radius:0; font:inherit}
.rescard:hover,.rescard:focus-visible{border-color:var(--cdx-gold); transform:translateY(-2px)}
.rescard-case{border-left:6px solid var(--cdx-good)}
.rescard-link{border-left:6px solid #7aa2f7}
.reskind{font-size:8px; font-family:"Press Start 2P",monospace; color:var(--cdx-gold)}
.restitle{font-size:19px; font-family:"VT323",monospace; color:var(--cdx-ink); line-height:1.15}
.reshint{font-size:15px; font-family:"VT323",monospace; color:var(--cdx-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
a.rescard{color:var(--cdx-ink)}
a.rescard .reshint{color:#8fb0ff}
pre.resread{font-family:"VT323",monospace; font-size:20px; line-height:1.45; white-space:pre-wrap; margin:0}
/* Library: a reading room — day rail on the left, that day's whole shelf on the right.
   The old single column left most of a desktop screen empty. */
.libwrap{display:grid; grid-template-columns:minmax(190px,220px) 1fr; gap:18px; margin-top:16px; align-items:start}
.librail{display:flex; flex-direction:column; gap:6px; position:sticky; top:8px}
.libtab{display:grid; grid-template-columns:1fr auto; gap:2px 8px; cursor:pointer; font:inherit; text-align:left;
  border:3px solid rgba(255,255,255,.14); border-left-width:6px; background:transparent; padding:8px 10px; border-radius:0}
.libtab:hover,.libtab:focus-visible{border-color:rgba(255,215,0,.5)}
.libtab.on{border-color:var(--cdx-gold); background:rgba(255,215,0,.1)}
.libtabday{font-size:9px; font-family:"Press Start 2P",monospace; color:var(--cdx-gold)}
.libtabname{grid-column:1; font-size:17px; font-family:"VT323",monospace; color:var(--cdx-ink-2); line-height:1.1}
.libtab.on .libtabname{color:var(--cdx-ink)}
.libtabcount{grid-row:1/3; grid-column:2; align-self:center; font-size:16px; font-family:"VT323",monospace; color:var(--cdx-ink-3)}
.libhead{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; padding-bottom:10px; margin-bottom:14px;
  border-bottom:3px solid rgba(255,215,0,.35)}
.libday{font-size:12px; font-family:"Press Start 2P",monospace; color:var(--cdx-gold)}
.libworld{font-size:22px; font-family:"VT323",monospace; color:var(--cdx-ink)}
.libtag{flex-basis:100%; font-size:16px; font-family:"VT323",monospace; color:var(--cdx-ink-2)}
.libgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.libcard{display:flex; flex-direction:column; gap:5px; cursor:pointer; font:inherit; text-align:left; text-decoration:none;
  border:3px solid rgba(255,255,255,.18); border-left-width:6px; background:var(--cdx-code-bg); padding:12px 14px; border-radius:0}
.libcard:hover,.libcard:focus-visible{border-color:var(--cdx-gold); transform:translateY(-2px)}
.libcard-pdf{border-left-color:var(--cdx-gold)}
.libcard-case{border-left-color:var(--cdx-good)}
.libcard-link{border-left-color:#7aa2f7}
.libkind{font-size:8px; font-family:"Press Start 2P",monospace; color:var(--cdx-gold)}
.libtitle{font-size:20px; font-family:"VT323",monospace; line-height:1.15; color:var(--cdx-ink)}
.libhint{font-size:15px; font-family:"VT323",monospace; color:var(--cdx-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
a.libcard{color:var(--cdx-ink)}
a.libcard .libhint{color:#8fb0ff}
/* PDF reader: page only, on a narrower sheet so the app blurs away behind it */
.pdfview{position:fixed; inset:0; z-index:800; display:flex; justify-content:center; padding:24px 16px;
  background:rgba(6,8,18,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.pdfsheet{display:flex; flex-direction:column; width:min(1080px,100%); height:100%;
  border:4px solid var(--cdx-gold); background:var(--cdx-bg); box-shadow:0 18px 60px rgba(0,0,0,.55)}
.pdfbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px;
  border-bottom:3px solid var(--cdx-gold); flex:0 0 auto}
.pdfnow{font-size:10px; font-family:"Press Start 2P",monospace; color:var(--cdx-gold)}
.pdfkeys{margin-left:auto; margin-right:12px; font-size:16px; font-family:"VT323",monospace; color:var(--cdx-ink-2)}
@media (max-width:620px){ .pdfkeys{display:none} }
.pdfpage{flex:1 1 auto; width:100%; border:0; background:#fff}
@media (max-width:760px){ .pdfview{padding:0} .pdfsheet{border-width:0 0 0 0} }
@media (max-width:760px){
  .libwrap{grid-template-columns:1fr; gap:12px}
  .librail{flex-direction:row; overflow-x:auto; position:static; padding-bottom:4px}
  .libtab{flex:0 0 auto; min-width:140px}
}
.vizbox{border:4px dashed var(--cdx-good, #34d399); background:var(--cdx-code-bg); padding:10px 14px; margin:10px 0; border-radius:0}
.vizbox .press{font-size:9px; color:var(--cdx-good, #34d399); font-family:"Press Start 2P",monospace}
pre.vizart{font-family:monospace; font-size:15px; line-height:1.35; color:var(--cdx-code-ink); overflow-x:auto; margin:6px 0 0; white-space:pre}
.vizcap{font-size:14px; opacity:.8; margin-top:6px; font-family:"VT323",monospace}
.defbox{border:4px solid var(--cdx-gold); background:var(--cdx-bg); padding:12px 16px; margin:16px 0; border-radius:0}
.defbox .press{font-size:9px; color:var(--cdx-gold); font-family:"Press Start 2P",monospace}
.defbox p{font-size:21px; margin-top:6px; font-family:"VT323",monospace}
.aiwhy{border:3px dashed var(--cdx-good); padding:10px 14px; margin:14px 0; color:var(--cdx-good); font-size:20px; border-radius:0; font-family:"VT323",monospace}
.aiwhy::before{content:"🎯 AI ENGINEER KYUN: "; font-family:"Press Start 2P",monospace; font-size:9px}

pre.codebox{
  background:var(--cdx-code-bg); color:var(--cdx-code-ink); border:4px solid var(--cdx-border);
  padding:14px 16px; margin:14px 0; overflow-x:auto; overflow-y:visible; min-height:52px;
  font-family:"VT323",monospace; font-size:21px; line-height:1.4; border-radius:0;
  transition:border-color var(--t-slow);
}
pre.codebox:hover{border-color:var(--cdx-accent)}
pre.codebox.err{border-color:var(--cdx-bad); color:#ffb9be}
pre.codebox.err:hover{border-color:var(--cdx-bad)}

/* challenge / editor */
.challenge{
  border:4px solid var(--cdx-accent-2); background:var(--cdx-bg); padding:16px;
  margin-top:20px; border-radius:0; box-shadow:none;
}
.challenge::before{display:none}
.challenge .press{font-size:10px; color:var(--cdx-accent-2); font-family:"Press Start 2P",monospace}
.prompt{margin:10px 0; font-size:22px; font-family:"VT323",monospace}
.prompt-task{white-space:pre-wrap; margin:0 0 10px; line-height:1.35}
.prompt-task:last-child{margin-bottom:0}
/* the target output is a spec, not prose — give it its own labelled block */
.prompt-want-label{
  font-family:"Press Start 2P",monospace; font-size:9px; color:var(--cdx-accent);
  margin:14px 0 6px; letter-spacing:.03em;
}
.prompt-want{
  margin:0; padding:8px 12px; white-space:pre-wrap;
  background:var(--cdx-code-bg); color:var(--cdx-good);
  border-left:4px solid var(--cdx-good); font-family:"VT323",monospace; font-size:21px;
}
textarea.editor{
  width:100%; min-height:130px; background:var(--cdx-code-bg); color:var(--cdx-code-ink);
  border:4px solid var(--cdx-border); padding:12px; font-family:"VT323",monospace; font-size:22px;
  line-height:1.4; resize:vertical; caret-color:var(--cdx-accent); border-radius:0;
  transition:border-color var(--t-med);
}
textarea.editor:focus{outline:none; border-color:var(--cdx-accent)}
.runrow{display:flex; gap:12px; margin-top:12px; align-items:center; flex-wrap:wrap}
.term{
  background:#07130a; color:#66ff8d; border:4px solid var(--cdx-border); padding:10px 14px;
  font-family:"VT323",monospace; font-size:20px; min-height:46px;
  white-space:pre-wrap; margin-top:12px; border-radius:0; line-height:1.4;
}
.term.bad{color:#ff8d96}

.pixelbtn{
  font-family:"Press Start 2P",monospace; font-weight:400; font-size:12px; cursor:pointer;
  background:var(--cdx-accent); color:#1a1204; border:0; padding:14px 20px;
  border-radius:0; transition:all var(--t-fast);
  box-shadow:0 6px 0 var(--cdx-accent-2), 0 10px 0 var(--shadow);
}
.pixelbtn:hover{filter:brightness(1.08)}
.pixelbtn:active{transform:translateY(6px); box-shadow:0 0 0 var(--cdx-accent-2), 0 4px 0 var(--shadow)}
.pixelbtn.big{font-size:16px; padding:18px 30px}
.pixelbtn.ghost{background:var(--cdx-surface-2); color:var(--cdx-ink); box-shadow:0 6px 0 var(--shadow)}
.pixelbtn.ghost:hover{border-color:var(--cdx-accent)}
.pixelbtn.good{background:var(--cdx-good); box-shadow:0 6px 0 #1d9457, 0 10px 0 var(--shadow)}
.pixelbtn:disabled{opacity:.45; cursor:default; transform:none; box-shadow:none}

/* quiz */
.opt{
  display:block; width:100%; text-align:left; background:var(--cdx-surface-2); color:var(--cdx-ink);
  border:3px solid var(--cdx-border); padding:12px 14px; margin:9px 0; cursor:pointer;
  font-family:"VT323",monospace; font-size:22px; border-radius:0;
  transition:all var(--t-fast); line-height:1.4;
}
.opt:hover{border-color:var(--cdx-accent)}
.opt.right{border-color:var(--cdx-good); background:#12301f; color:#c9ffdd; animation:optRight .4s steps(2)}
.opt.wrong{border-color:var(--cdx-bad); background:#331318; color:#ffccd1; animation:shake .3s steps(4)}
@keyframes optRight{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* battlefield */
.battlefield{display:flex; flex-direction:column; gap:18px}
.monster-card{background:var(--cdx-surface); border:4px solid var(--cdx-border); border-radius:0; padding:22px; box-shadow:8px 8px 0 var(--shadow)}
.monster-stage{display:flex; align-items:center; gap:26px; min-height:120px; flex-wrap:wrap}
.sprite{width:10px; height:10px; transform:scale(7); transform-origin:center; margin:34px}
.sprite.idle{animation:bounce 1.2s ease infinite}
@keyframes bounce{50%{transform:scale(7) translateY(-2px)}}
.sprite.hit{animation:hitflash .35s steps(3)}
@keyframes hitflash{0%,66%{filter:brightness(3) saturate(0)}33%,100%{filter:none}}
.sprite.dead{animation:die .6s ease forwards}
@keyframes die{to{transform:scale(7) rotate(90deg); opacity:0}}
.mname{font-family:"Press Start 2P",monospace; font-weight:400; font-size:13px; color:var(--cdx-bad)}
.mhp{display:flex; gap:5px; margin-top:8px}
.mhp span{width:14px; height:8px; background:var(--cdx-bad); border-radius:2px}
.mhp span.off{background:var(--cdx-surface-2); opacity:.5}
.victory{color:var(--cdx-gold); font-family:var(--cdx-font-mono); font-weight:700; font-size:14px; animation:pulse .8s ease 3}

/* flashcards + shrine */
/* a <button> so it is keyboard-focusable — strip the browser chrome, keep the card */
.flash{perspective:900px; height:230px; cursor:pointer; margin:16px auto; max-width:500px;
  display:block; width:100%; background:none; border:0; padding:0; font:inherit; color:inherit; text-align:inherit}
.shrine-stats{display:flex; gap:12px; justify-content:center; margin:12px 0; font-family:var(--cdx-font-mono); font-size:13px}
.shrine-stats span{opacity:.85}
.shrine-timer{font-family:var(--cdx-font-mono); font-size:12px; color:var(--cdx-accent); text-align:center; margin:8px 0}
.overlay-inner.ambush{border-color:var(--cdx-bad)}
.overlay-inner.ambush .bigword{color:var(--cdx-bad)}
.overlay-inner.teachback{border-color:var(--cdx-accent)}
.flash .inner{position:relative; width:100%; height:100%; transition:transform .45s steps(8); transform-style:preserve-3d}
.flash.flipped .inner{transform:rotateY(180deg)}
.flash .face{position:absolute; inset:0; backface-visibility:hidden; display:flex; align-items:center;
  justify-content:center; padding:20px; text-align:center; font-size:24px; line-height:1.45;
  border:4px solid var(--cdx-border); border-radius:0; box-shadow:8px 8px 0 var(--shadow);
  transition:none; font-family:"VT323",monospace}
.flash:hover .face, body.kb-on .flash:focus .face{box-shadow:10px 10px 0 var(--shadow)}
.flash .front{background:var(--cdx-surface-2); color:var(--cdx-ink)}
.flash .front::after{content:"tap to flip"; position:absolute; bottom:10px; right:14px;
  font-family:"Press Start 2P",monospace; font-size:8px; color:var(--cdx-ink-3)}
.flash .back{background:var(--cdx-bg); border-color:var(--cdx-gold); transform:rotateY(180deg); font-size:21px; color:var(--cdx-ink-2)}
.flash .back{background:var(--cdx-bg); border-color:var(--cdx-gold); transform:rotateY(180deg); font-size:15px; color:var(--cdx-ink-2)}

/* mentor */
.mentorbox{position:fixed; right:16px; bottom:calc(var(--hb) + 12px); width:min(420px,92vw); z-index:40;
  background:var(--cdx-surface); border:4px solid var(--cdx-accent); border-radius:0;
  box-shadow:10px 10px 0 var(--shadow); overflow:hidden}
.mentorbox, .mentorbox *{animation:none !important}
.mentorhead{display:flex; justify-content:space-between; align-items:center; padding:10px 12px;
  background:var(--cdx-surface-2); border-bottom:3px solid var(--cdx-border)}
.mentorhead .press{font-size:11px; color:var(--cdx-accent); font-family:"Press Start 2P",monospace}
.mentorlog{max-height:280px; overflow-y:auto; padding:12px; font-size:20px; font-family:"VT323",monospace}
.mentorlog .q{color:var(--cdx-accent); margin:8px 0 2px}
.mentorlog .a{border-left:4px solid var(--cdx-good); padding-left:10px; margin:4px 0 10px; white-space:pre-wrap}
.mentorlog .waiting{color:var(--cdx-ink-2); font-style:italic; animation:blink 1.4s steps(1) infinite}
.mentorask{display:flex; gap:8px; padding:10px; border-top:3px solid var(--cdx-border)}
.mentorask textarea{flex:1; background:var(--cdx-bg); color:var(--cdx-ink); border:3px solid var(--cdx-border);
  font-family:"VT323",monospace; font-size:20px; padding:8px; resize:none; border-radius:0}
.mentorask .pixelbtn{font-size:9px; padding:10px 12px}

/* notes */
.notebox{right:auto; left:16px; border-color:var(--cdx-gold)}
.notebox .mentorhead .press{color:var(--cdx-gold)}
.notectx{padding:8px 12px; border-bottom:3px solid var(--cdx-border); color:var(--cdx-gold);
  font-family:"Press Start 2P",monospace; font-size:9px; line-height:1.7}
.noteitem{border:3px solid var(--cdx-border); background:var(--cdx-surface-2); padding:10px 14px; margin:10px 0; border-radius:0}
.noteitem .tag{font-family:"Press Start 2P",monospace; font-size:8px; color:var(--cdx-accent); display:block; margin-bottom:6px}
.noteitem p{margin:4px 0; font-family:"VT323",monospace; font-size:20px}
.notesearch{width:100%; background:var(--cdx-bg); color:var(--cdx-ink); border:3px solid var(--cdx-border);
  font-family:"VT323",monospace; font-size:20px; padding:8px 12px; margin:10px 0; border-radius:0}
.notesearch:focus{outline:none; border-color:var(--cdx-gold)}

/* overlays */
.overlay{position:fixed; inset:0; z-index:60; background:#05060dd8; display:flex;
  align-items:center; justify-content:center; animation:wipe .3s steps(5)}
.overlay-inner{background:var(--cdx-surface); border:5px solid var(--cdx-border); border-radius:0;
  box-shadow:12px 12px 0 var(--shadow); max-width:600px; width:92vw; padding:30px; text-align:center; max-height:86vh; overflow-y:auto}
.overlay-inner.down{border-color:var(--cdx-bad)}
.overlay-inner.clear{border-color:var(--cdx-gold)}
.bigword{font-family:"Press Start 2P",monospace; font-size:clamp(20px,6vw,36px); margin:10px 0}
.down .bigword{color:var(--cdx-bad)}
.clear .bigword{color:var(--cdx-gold); text-shadow:3px 3px 0 var(--cdx-accent-2)}
.altbox{text-align:left; border:3px dashed var(--cdx-accent); padding:14px; margin:16px 0; font-size:22px; border-radius:0; font-family:"VT323",monospace}
.altbox::before{content:"🔁 NAYA APPROACH"; font-family:"Press Start 2P",monospace; font-size:9px; color:var(--cdx-accent); display:block; margin-bottom:8px}

/* toast + confetti */
.toast{position:fixed; top:74px; left:50%; transform:translateX(-50%); z-index:70;
  background:var(--cdx-gold); color:#1a1204; font-family:"Press Start 2P",monospace; font-size:12px;
  padding:12px 18px; border-radius:0; box-shadow:4px 4px 0 var(--shadow);
  animation:toastin .25s steps(3); white-space:pre-line; max-width:92vw; text-align:center; line-height:1.5;
  pointer-events:none}
/* on the roadmap screen, never let toast overlap the wheel — push it to the bottom */
#scr-roadmap:not([hidden]) ~ #toast{top:auto; bottom:20px}
@keyframes toastin{from{transform:translateX(-50%) translateY(-30px); opacity:0}}
.confetti{position:fixed; width:8px; height:8px; z-index:65; pointer-events:none;
  animation:fall 1s steps(10) forwards}
@keyframes fall{to{transform:translateY(70vh) rotate(200deg); opacity:0}}

/* ── damage feel ── */
.dmgflash{position:fixed; inset:0; z-index:55; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 35%, #f8514977 100%);
  animation:dmgfade .45s ease forwards}
@keyframes dmgfade{from{opacity:1}to{opacity:0}}
#app.shake{animation:dmgshake .4s ease}
@keyframes dmgshake{10%{transform:translate(-10px,4px)}30%{transform:translate(8px,-5px)}50%{transform:translate(-6px,3px)}70%{transform:translate(4px,-2px)}90%{transform:translate(-2px,1px)}}
.floatdmg{position:fixed; top:38%; left:50%; transform:translateX(-50%); z-index:70;
  color:var(--cdx-bad); font-size:22px; font-family:var(--cdx-font-mono); font-weight:700;
  text-shadow:0 2px 8px #000; animation:floatup .9s ease forwards; pointer-events:none}
@keyframes floatup{to{transform:translateX(-50%) translateY(-80px); opacity:0}}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* ═══════════ sidebar cards (profile / today / badges) ═══════════ */
.side-card{
  border:2px solid #2a3050; background:#0d1024; border-radius:4px;
  padding:12px 14px; margin:0; flex:none; box-shadow:4px 4px 0 var(--shadow);
}
.sc-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:8px; padding-bottom:6px; border-bottom:2px solid #2a3050}
.sc-title{font-size:11px; color:var(--cdx-gold); letter-spacing:1px}
.sc-count{font-family:"VT323",monospace; font-size:17px; color:var(--cdx-ink-2)}
.sc-hint{font-family:"VT323",monospace; font-size:16px; color:#6b739a; margin:0 0 8px; line-height:1.3}
/* profile */
.sc-profile{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.sc-avatar{
  font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none; background:#151a33; border:2px solid #2a3050; border-radius:3px;
}
.sc-profile-info{display:flex; flex-direction:column; gap:3px; min-width:0}
.sc-name{font-size:10px; color:var(--cdx-ink)}
.sc-role{font-family:"VT323",monospace; font-size:16px; color:var(--cdx-ink-2); line-height:1.2}
.sc-level{margin-left:auto; font-size:10px; color:#0d1024; background:var(--cdx-gold); padding:5px 7px; border-radius:3px; box-shadow:2px 2px 0 var(--shadow)}
/* bars */
.sc-bar-row{display:flex; flex-direction:column; gap:4px; margin-bottom:8px}
.sc-bar-row:last-child{margin-bottom:0}
.sc-bar-label{font-family:"VT323",monospace; font-size:16px; color:var(--cdx-ink-2); display:flex; justify-content:space-between; gap:8px; line-height:1.2}
.sc-bar-label b{color:var(--cdx-ink); font-weight:400}
.sc-bar{height:10px; background:#151a33; border:1px solid #262d4d; border-radius:2px; overflow:hidden}
.sc-bar-fill{height:100%; width:0; background:var(--cdx-good); transition:width .5s var(--ease-spring, ease)}
.sc-bar-fill.gold{background:linear-gradient(90deg,var(--cdx-accent),var(--cdx-gold))}
.sc-bar-fill.red{background:var(--cdx-bad)}
/* badges */
.sc-badges{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.sc-badge{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 2px 6px;
  background:#151a33; border:1px solid #262d4d; border-radius:3px; text-align:center;
}
.sc-badge .bicon{font-size:20px; line-height:1; filter:grayscale(1); opacity:.35}
.sc-badge .bname{font-family:"VT323",monospace; font-size:13px; color:#5a6288; line-height:1.1}
.sc-badge.earned{border-color:var(--cdx-gold); box-shadow:0 0 8px rgba(255,208,40,.25)}
.sc-badge.earned .bicon{filter:none; opacity:1}
.sc-badge.earned .bname{color:var(--cdx-gold)}
@media(max-width:900px){ .side-card{margin-bottom:10px} }

/* ═══════════ 45-day roadmap strip ═══════════ */
.roadmap{
  border:2px solid #2a3050; background:#0d1024; border-radius:4px; padding:14px 14px 12px;
  margin:0; display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
  box-shadow:4px 4px 0 var(--shadow);
}
.rm-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; padding-bottom:8px; border-bottom:2px solid #2a3050}
.rm-title{font-family:"Press Start 2P",monospace; font-size:11px; color:var(--cdx-gold); letter-spacing:1px}
.rm-stats{font-family:"Press Start 2P",monospace; font-size:9px; color:#0d1024; background:var(--cdx-good); padding:5px 7px; border-radius:3px; box-shadow:2px 2px 0 var(--shadow); white-space:nowrap}
/* phase legend chips */
.rm-phases{display:flex; gap:6px; margin-bottom:9px}
.rm-phase-chip{flex:1; font-family:"VT323",monospace; font-size:13px; text-align:center; padding:3px 2px; border-radius:2px; color:#0d1024; line-height:1.1; opacity:.9}
.rm-phase-chip.p1{background:var(--cdx-good)} .rm-phase-chip.p2{background:#8bc4ff} .rm-phase-chip.p3{background:#c9a1ff}
.rm-track{display:grid; grid-template-columns:repeat(9,1fr); gap:6px; flex:1 1 auto; align-content:start; padding:2px 0; overflow-y:auto; scrollbar-width:thin; min-height:0; overscroll-behavior:contain}
.rm-cell{
  position:relative; font:700 13px/1 "Courier New",monospace; color:#6b739a; background:#151a33;
  border:2px solid #262d4d; border-radius:3px; padding:0; cursor:pointer; aspect-ratio:1/1;
  transition:transform var(--t-fast) var(--ease-spring), border-color var(--t-fast), box-shadow var(--t-fast);
  display:flex; align-items:center; justify-content:center; min-height:34px;
}
.rm-cell.sel{outline:3px dashed var(--cdx-accent); outline-offset:3px; z-index:3}
/* phase tint on locked cells so the road reads as 3 stages */
.rm-cell.p1{background:#131d22} .rm-cell.p2{background:#141a2a} .rm-cell.p3{background:#1a1626}
.rm-cell.locked{opacity:.5; color:#4a5178}
/* open = playable, not yet cleared: gold, inviting */
.rm-cell.open{color:var(--cdx-gold); background:#22283f; border-color:var(--cdx-gold); box-shadow:0 0 8px rgba(255,208,40,.3); animation:openBob 2.4s ease-in-out infinite}
@keyframes openBob{50%{box-shadow:0 0 13px rgba(255,208,40,.55)}}
/* done = cleared: solid green with tick */
.rm-cell.done{color:#0d1024; background:var(--cdx-good); border-color:var(--cdx-good); font-size:0}
.rm-cell.done::before{content:"\2714"; font-size:14px; color:#0d1024}
.rm-cell.weak-warm{box-shadow:0 0 8px rgba(248,81,73,.35)}
.rm-cell.weak-hot{box-shadow:0 0 12px rgba(248,81,73,.55); animation:weakPulse 2s ease-in-out infinite}
@keyframes weakPulse{0%,100%{box-shadow:0 0 8px rgba(248,81,73,.35)}50%{box-shadow:0 0 16px rgba(248,81,73,.7)}}
.rm-cell.here{outline:3px solid var(--cdx-accent); outline-offset:2px; z-index:1; animation:herePulse 1.6s steps(2) infinite}
@keyframes herePulse{0%,100%{outline-color:var(--cdx-accent)}50%{outline-color:var(--cdx-gold)}}
/* boss day: red crown marker top-right */
.rm-cell.boss{border-color:var(--cdx-bad)}
.rm-cell.boss::after{content:"\2620"; position:absolute; top:-7px; right:-5px; font-size:11px; color:var(--cdx-bad); text-shadow:0 0 3px #000}
.rm-cell:not(:disabled):hover, body.kb-on .rm-cell:focus{transform:translateY(-3px) scale(1.05); border-color:var(--cdx-accent); box-shadow:0 5px 10px rgba(255,176,56,.3); z-index:2}
.rm-legend{margin-top:10px; padding-top:8px; border-top:2px solid #2a3050; font-family:"VT323",monospace; font-size:15px; color:#6b739a; line-height:1.35}
@media(max-width:640px){ .rm-track{grid-template-columns:repeat(9,1fr); gap:5px} .rm-cell{min-height:30px; font-size:12px} }

/* ═══════════ full 45-day ladder ═══════════ */
.pixelbtn.small{font-size:11px; padding:7px 12px; margin-top:9px}
.ladder{margin-top:14px}
.ld-phase{
  position:sticky; top:0; z-index:1; font:400 9px/1.6 "Press Start 2P","Courier New",monospace;
  letter-spacing:.5px; color:#0d1024; background:var(--cdx-good);
  padding:6px 8px; margin:10px 0 6px; border-radius:3px;
}
.ld-phase:first-child{margin-top:0}
.ld-phase.p2{background:#8bc4ff}
.ld-phase.p3{background:#c9a1ff}
.ld-row{padding:11px 12px; margin-bottom:7px; border:3px solid var(--cdx-border); background:var(--cdx-surface);
  border-radius:4px; color:var(--cdx-ink); transition:all var(--t-fast); font-family:"VT323",monospace}
.ld-head{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:5px}
.ld-row.locked{opacity:.55; border-style:dashed}
.ld-row.done{border-color:var(--cdx-good)}
.ld-row.done .ld-topic{color:var(--cdx-good)}
.ld-row.open{border-color:var(--cdx-good); box-shadow:4px 4px 0 var(--shadow)}
.ld-row.here{outline:3px solid var(--cdx-gold); outline-offset:2px}
.ld-row.clickable{cursor:pointer}
.ld-row.clickable:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--shadow); border-color:var(--cdx-accent)}
.ld-row.sel{outline:3px dashed var(--cdx-accent); outline-offset:2px; z-index:1; box-shadow:0 0 14px rgba(255,176,56,.35)}
.ld-day{font-family:"Press Start 2P",monospace; font-size:10px; color:var(--cdx-accent)}
.ld-st{font-family:"Press Start 2P",monospace; font-size:8px; color:var(--cdx-ink-2)}
.ld-topic{font-size:21px; line-height:1.3; font-family:"VT323",monospace}
.ld-detail{font-size:18px; color:var(--cdx-ink-2); line-height:1.35; margin-top:3px; font-family:"VT323",monospace}
.ld-boss{font-family:"Press Start 2P",monospace; font-size:8px; color:#0d1024; background:var(--cdx-bad);
  padding:4px 6px; border-radius:3px}
@media(max-width:760px){
  .ladder{max-height:none; overflow:visible}
  .ld-topic{font-size:15px}
  .ld-detail{font-size:12px}
}

/* ═══════════ MOBILE ═══════════ */
textarea, input, select { font-size: max(16px, 1em); }

@media (max-width: 760px) {
  body { overflow-x: hidden; font-size:15px }
  .screen { padding: 18px 12px 100px; }

  .cdx-map-layout { grid-template-columns: 1fr; gap: 16px; }
  .cdx-map-rail { position: static; }
  .cdx-today-hero { padding: 20px 18px; }

  .hud { gap: 8px; padding: 8px 10px; }
  .hud-day { font-size: 10px; padding: 4px 8px; gap: 4px; }
  .coin-icon { width: 18px; height: 18px; }
  .coin-inner { font-size: 8px; }
  .hearts { gap: 4px; min-width: 70px; }
  .heart { width: 14px; height: 12px; }
  .xpwrap { min-width: 90px; gap: 6px; }
  .xplabel { font-size: 10px; white-space: normal; }
  .voicesel { max-width: 92px; }
  .iconbtn { min-width: 44px; min-height: 40px; display: inline-flex;
             align-items: center; justify-content: center; padding: 4px 6px; }

  .title { margin-bottom: 6px; }
  .zones { grid-template-columns: 1fr; gap: 10px; }
  .zone { padding: 14px; }
  .panel { padding: 16px 14px; }
  pre.codebox { font-size: 13px; padding: 11px 12px; }
  textarea.editor { min-height: 150px; }
  .pixelbtn { font-size: 12px; padding: 11px 14px; }

  .mentorbox, .notebox {
    left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 82vh; display: flex; flex-direction: column;
    border-width: 1px 0 0 0; border-radius: var(--cdx-radius) var(--cdx-radius) 0 0;
    box-shadow: 0 -6px 20px #00000060;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mentorlog { max-height: 44vh; flex: 1; font-size: 13px; }
  .mentorask { padding: 8px; gap: 6px; }
  .mentorask textarea { min-height: 44px; }

  .toast { top: auto; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); font-size: 11px; }

  .cdx-map-rail { position: static; height: auto; max-height: calc(100vh - 180px); overflow-y: auto; padding-bottom: 20px; }
  .roadmap { height: auto; }
  .rm-track { height: auto; }
}

/* ═══════════ keyboard focus ring — bold + game-like, only once keyboard is used ═══════════ */
body.kb-on button:focus, body.kb-on .zone:focus, body.kb-on .build-proj-card:focus,
body.kb-on .rm-cell:focus, body.kb-on .tl-cell:focus, body.kb-on .flash:focus,
body.kb-on a:focus, body.kb-on [tabindex]:focus{
  outline:3px solid var(--cdx-gold); outline-offset:3px;
  box-shadow:0 0 0 3px rgba(255,208,40,.25), 0 0 14px rgba(255,208,40,.5) !important;
  position:relative; z-index:5;
}
/* The title screen's START carries focus from the very first paint, but the ring
   only appears once body.kb-on is set — so it read as "not selected" and people
   pressed an arrow key just to light it up. Show it unconditionally here. */
#startBtn:focus{
  outline:3px solid var(--cdx-gold); outline-offset:3px;
  box-shadow:0 0 0 3px rgba(255,208,40,.25), 0 0 14px rgba(255,208,40,.5);
}

/* the position:relative above is only so z-index applies to STATIC elements.
   Already-positioned controls must keep their own position or they drop into
   flow on focus — that's what threw FULL VIEW across the lesson header. */
body.kb-on .cdx-fullview-btn:focus{position:absolute}
body.kb-on .mentor-launcher:focus{position:fixed}
body.kb-on textarea:focus, body.kb-on input:focus, body.kb-on select:focus{
  outline:3px solid var(--cdx-accent); outline-offset:2px;
}
/* keyboard help overlay */
.kb-help{background:var(--cdx-surface); border:4px solid var(--cdx-gold); box-shadow:8px 8px 0 var(--shadow); padding:24px 26px; max-width:440px; margin:0 auto}
.kb-help h2{font-size:16px; color:var(--cdx-gold); margin-bottom:16px; text-align:center}
.kb-help table{width:100%; border-collapse:collapse; font-family:"VT323",monospace; font-size:20px}
.kb-help td{padding:6px 8px; border-bottom:1px solid var(--cdx-border)}
.kb-help td:first-child{color:var(--cdx-accent); white-space:nowrap; font-weight:700}
.kb-help td:last-child{color:var(--cdx-ink-2); text-align:right}
.kb-help-close{display:block; width:100%; margin-top:18px; text-align:center}

/* ---- build zone ---- */
/* browse mode: project list fills the whole screen, editor pane hidden */
.cdx-split.build-browse{grid-template-columns:1fr}
.cdx-split.build-browse #buildPractice{display:none}

/* project archive grid */
.build-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:16px}
.build-proj-card{
  display:flex; flex-direction:column; gap:6px; text-align:left; cursor:pointer;
  background:var(--cdx-surface-2); border:3px solid var(--cdx-border); border-radius:4px;
  padding:14px 15px; font-family:inherit; box-shadow:4px 4px 0 var(--shadow);
  transition:transform var(--t-fast) var(--ease-spring), border-color var(--t-fast), box-shadow var(--t-fast);
}
.build-proj-card:hover, body.kb-on .build-proj-card:focus{transform:translate(-2px,-2px); border-color:var(--cdx-accent); box-shadow:6px 6px 0 var(--shadow)}
.build-proj-card.done{border-color:var(--cdx-good)}

/* today glows, its neighbours stay readable, the rest recede — hover/focus
   always restores full clarity so every project is still reachable */
.build-proj-card.today{
  border-color:var(--cdx-accent);
  box-shadow:0 0 0 1px var(--cdx-accent), 0 0 18px -2px var(--cdx-accent), 4px 4px 0 var(--shadow);
  animation:bp-glow 2.4s ease-in-out infinite;
}
.build-proj-card:not(.today):not(.near){filter:blur(1.2px); opacity:.5}
.build-proj-card.near{opacity:.82}
.build-proj-card:hover, .build-proj-card:focus,
body.kb-on .build-proj-card:focus{filter:none; opacity:1}
@keyframes bp-glow{
  0%,100%{box-shadow:0 0 0 1px var(--cdx-accent), 0 0 14px -3px var(--cdx-accent), 4px 4px 0 var(--shadow)}
  50%    {box-shadow:0 0 0 1px var(--cdx-accent), 0 0 24px 0 var(--cdx-accent), 4px 4px 0 var(--shadow)}
}
@media (prefers-reduced-motion:reduce){.build-proj-card.today{animation:none}}
.bp-head{display:flex; justify-content:space-between; align-items:center; gap:8px}
.bp-day{font-size:10px; color:var(--cdx-accent)}
.bp-status{font-family:"VT323",monospace; font-size:15px; color:var(--cdx-ink-2)}
.build-proj-card.done .bp-status{color:var(--cdx-good)}
.bp-title{font-family:"VT323",monospace; font-size:23px; color:var(--cdx-ink); line-height:1.15; font-weight:700}
.bp-tag{font-family:"VT323",monospace; font-size:17px; color:var(--cdx-ink-2); line-height:1.3}
.bp-meta{font-family:"VT323",monospace; font-size:15px; color:#6b739a; margin-top:2px}

/* preview sections */
.build-daytag{color:var(--cdx-gold); margin:12px 0 4px}
.build-tagline{font-size:21px; margin-bottom:10px}
.build-sec{color:var(--cdx-accent); margin:18px 0 6px; letter-spacing:1px}
.build-skills{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0}
.build-reqs{background:var(--cdx-code-bg); border:2px solid var(--cdx-border); border-radius:4px; padding:12px 14px; margin:8px 0}
.build-reqs p{margin:4px 0}

/* START gate in the practice pane */
.build-start-box{
  display:flex; flex-direction:column; gap:14px; align-items:flex-start;
  border:3px dashed var(--cdx-gold); border-radius:4px; padding:20px 18px; margin-top:8px;
  background:rgba(255,208,40,.05);
}
.build-start-label{font-size:12px}
.build-start-btn{align-self:stretch; text-align:center; font-size:13px; margin-top:4px}

@media (max-width: 900px) and (orientation: landscape) {
  .mentorlog { max-height: 30vh; }
  .mentorbox, .notebox { max-height: 88vh; }
}
/* ═══════════════════ STEAM CONSOLE LAYER: hint bar + field manual ═══════════════════ */
:root{ --hb: 34px; }

/* --- persistent Steam-Deck style context hint bar --- */
.hintbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40; height:var(--hb);
  display:flex; align-items:center; justify-content:center; gap:0;
  background:linear-gradient(180deg,#11142a,#0b0e1d); border-top:2px solid var(--cdx-border);
  box-shadow:0 -3px 0 rgba(0,0,0,.35);
  font-family:"VT323",monospace; font-size:17px; letter-spacing:.5px;
  color:var(--cdx-ink-2); white-space:nowrap; overflow-x:auto; padding:0 14px;
  scrollbar-width:none;
}
.hintbar::-webkit-scrollbar{display:none}
@media(max-width:640px){ .hintbar{font-size:14px; --hb:30px} }

/* reserve space so nothing hides behind the bar (overrides the base 100vh calcs, no source edits) */
.cdx-map-layout{ min-height:calc(100vh - 108px - var(--hb)) }
.cdx-map-rail{ min-height:calc(100vh - 100px - var(--hb)) }
.cdx-split{ flex:1 1 auto; min-height:0 }
.cdx-lesson, .cdx-practice{ min-height:0 }
#scr-story, #scr-arena{ height:calc(100vh - 70px - var(--hb)) }

/* --- FIELD MANUAL screen --- */
#scr-guide{ height:calc(100vh - 70px - var(--hb)); overflow:hidden }
.guide-wrap{
  max-width:1100px; margin:0 auto; height:100%; overflow-y:auto;
  padding:22px 20px 40px; scrollbar-width:thin;
}
.guide-head{ text-align:center; margin-bottom:20px }
.guide-head h2{ font-size:20px; color:var(--cdx-accent); text-shadow:3px 3px 0 var(--shadow); margin-bottom:8px }
.guide-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px }
@media(max-width:760px){ .guide-grid{ grid-template-columns:1fr } }
.guide-card{
  background:var(--cdx-surface); border:3px solid var(--cdx-border); border-radius:4px;
  padding:16px 18px; margin-bottom:16px; box-shadow:6px 6px 0 var(--shadow);
}
.guide-grid > .guide-card{ margin-bottom:0 }
.guide-sec{ font-size:12px; color:var(--cdx-gold); margin-bottom:12px; letter-spacing:1px }
/* keyboard table */
.guide-keys{ width:100%; border-collapse:collapse }
.guide-keys td{ padding:6px 4px; border-bottom:1px solid var(--cdx-border); vertical-align:middle }
.gk-keys{ white-space:nowrap; width:52% }
.gk-or{ font-family:"VT323",monospace; color:var(--cdx-ink-3); font-size:15px }
.gk-desc{ font-family:"VT323",monospace; font-size:19px; color:var(--cdx-ink-2) }
.kbd{
  display:inline-block; font-family:"Press Start 2P",monospace; font-size:9px; color:var(--cdx-ink);
  background:var(--cdx-surface-2); border:2px solid var(--cdx-border); border-bottom-width:4px;
  border-radius:4px; padding:5px 7px; margin:1px 0; line-height:1;
}
/* loop + tips lists */
.guide-loop, .guide-tips{ font-family:"VT323",monospace; font-size:20px; color:var(--cdx-ink-2); padding-left:24px; line-height:1.5 }
.guide-loop li, .guide-tips li{ margin:6px 0 }
.guide-loop b{ color:var(--cdx-accent) }
.guide-note{ margin-top:10px; font-size:16px }
/* zones */
.guide-zones{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media(max-width:760px){ .guide-zones{ grid-template-columns:1fr } }
.guide-zone{ display:flex; gap:12px; align-items:flex-start; background:var(--cdx-surface-2); border:2px solid var(--cdx-border); border-radius:4px; padding:12px 14px }
.gz-icon{ font-size:26px; line-height:1; flex:none }
.gz-name{ font-size:11px; color:var(--cdx-accent); display:block; margin-bottom:5px }
.gz-desc{ font-family:"VT323",monospace; font-size:18px; color:var(--cdx-ink-2); line-height:1.4; margin:0 }
/* rules */
.guide-rules{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media(max-width:760px){ .guide-rules{ grid-template-columns:1fr } }
.guide-rule{ display:flex; gap:12px; align-items:flex-start; background:var(--cdx-code-bg); border:2px solid var(--cdx-border); border-radius:4px; padding:12px 14px }
.gr-icon{ font-size:22px; flex:none }
.gr-name{ color:var(--cdx-gold); font-family:"VT323",monospace; font-size:20px }
.gr-desc{ font-family:"VT323",monospace; font-size:17px; color:var(--cdx-ink-2); line-height:1.4; margin:4px 0 0 }
.guide-back{ display:block; margin:20px auto 0; text-align:center }

/* guide scroll container is focusable for scrolling — but don't paint the big focus ring on it */
/* kbFocusFirst() focuses this panel so ↑↓ scroll the manual — a full gold ring
   round the whole page is too loud, but zero feedback left the user blind. */
body.kb-on #guidePanel:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--cdx-accent) !important }

/* ═══════════ ROADMAP: fit-on-screen + per-day pixel scenes ═══════════ */
/* ladder is hidden now, so pull the wheel up and keep the whole roadmap visible */
.day-timeline-wrap{ padding-top:104px; padding-bottom:8px }
#scr-roadmap{ height:calc(100vh - 70px - var(--hb)); overflow-y:auto; overflow-x:hidden }
.day-preview{ margin:14px auto 20px }
@media(max-width:760px){ .day-timeline-wrap{ padding-top:92px } }

/* each wheel cell shows a tiny pixel-art scene (set inline per day in renderTimeline) */
.tl-cell{ image-rendering:pixelated; background-repeat:no-repeat; background-position:center; background-size:cover; overflow:hidden }
.tl-cell::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05) 55%,rgba(0,0,0,.55)); z-index:1; pointer-events:none }
.tl-cell .tl-num{ color:#fff; text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000; position:relative; z-index:2 }
.tl-cell .tl-dot{ position:relative; z-index:2; box-shadow:0 0 0 1px #000a }
/* status stays legible via the border/outline, not the fill */
.tl-cell.open{ border-color:var(--cdx-gold) }
.tl-cell.done{ border-color:var(--cdx-good) }

/* ═══════════ ROADMAP: no page scroll + responsive fit ═══════════ */
/* the whole roadmap lives in one non-scrolling box; only the preview may scroll
   internally, and only on a genuinely short screen (invisible when it fits) */
#scr-roadmap{
  height:calc(100vh - 70px - var(--hb)); overflow:hidden;
  display:flex; flex-direction:column; align-items:center; padding:0 12px;
}
.wheel-status{ width:min(94vw, 520px) }
.day-timeline-wrap{ padding-top:clamp(84px, 11vh, 112px); padding-bottom:6px; flex:0 0 auto }
.day-preview{
  flex:0 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin;
  width:min(94vw, 560px); max-width:none; margin:12px auto 14px; padding:14px 16px;
}
/* compact so it fits without scrolling on normal screens */
.day-preview .dp-intro{ font-size:17px; line-height:1.42; margin-bottom:10px }
.day-preview .dp-stages li{ font-size:16px; padding:3px 0 }
.day-preview .dp-tagline{ font-size:18px; margin-bottom:10px }
@media(max-height:820px){
  .day-timeline-wrap{ padding-top:78px }
  .day-preview .dp-intro{ font-size:15px }
  .day-preview .dp-stages li{ font-size:15px }
}
@media(max-width:760px){
  .day-preview .dp-world{ font-size:12px }
  .day-preview .dp-head{ font-size:10px }
}

/* ═══════════ single-panel screens: center short content, fit tall content ═══════════ */
/* shrine + library empty states were pinned to the top with a huge void below */
#scr-shrine, #scr-library{
  min-height:calc(100vh - 70px - var(--hb));
  display:flex; flex-direction:column; justify-content:safe center;
}
/* code lab: editor was so tall it pushed RUN + output off the bottom */
#scr-lab{ height:calc(100vh - 70px - var(--hb)); overflow:hidden; display:flex; flex-direction:column }
#scr-lab .panel{ display:flex; flex-direction:column; flex:1; min-height:0; margin-top:12px; overflow:hidden }
#scr-lab .cdx-lab-editor{ flex:1 1 auto; min-height:120px !important; height:auto !important }

/* bug hunt: the monster sprite is scale(7) on a 10px box, so it visually
   overflowed into the description text — reserve room around it */
.monster-stage{ gap:44px; padding-left:30px }
.monster-stage .sprite{ flex:0 0 auto }

/* ═══════════ MOBILE: enable page scrolling (desktop stays fit/no-scroll) ═══════════ */
/* the base body is height:100vh + overflow:hidden, and several screens are
   overflow:hidden — great on desktop, but on a phone the content is taller than
   the viewport and became unreachable. On small screens let the page scroll. */
@media(max-width:760px){
  html, body{ height:auto; min-height:100vh; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch }
  .screen{ min-height:auto }
  #scr-map, #scr-roadmap, #scr-story, #scr-arena, #scr-build, #scr-lab, #scr-shrine, #scr-library, #scr-guide, #scr-picker{
    height:auto !important; min-height:0; overflow:visible !important; justify-content:flex-start;
  }
  .cdx-map-layout{ min-height:0 }
  .cdx-map-rail{ height:auto !important; position:static; overflow:visible }
  .cdx-split{ height:auto !important }
  .cdx-lesson, .cdx-practice{ height:auto !important; max-height:none !important; overflow:visible }
  .guide-wrap{ height:auto; overflow:visible }
  .day-preview{ overflow:visible; max-height:none }
  /* wheel status is position:fixed — on a scrolling page let it flow with content */
  .wheel-status{ position:static; transform:none; left:auto; width:auto; margin:8px auto 0 }
  .day-timeline-wrap{ padding-top:14px }
  /* keep content clear of the fixed hint bar at the bottom */
  #app{ padding-bottom:calc(var(--hb) + 12px) }
}

/* ═══════════ mentor: full-screen chat mode ═══════════ */
.mentor-head-btns{ display:flex; gap:6px; align-items:center }
.mentorbox.mentor-full{
  position:fixed; top:6vh; bottom:6vh; left:50%; right:auto; transform:translateX(-50%);
  width:min(820px,94vw); max-height:none; display:flex; flex-direction:column; z-index:60;
}
.mentorbox.mentor-full .mentorlog{ flex:1 1 auto; max-height:none; font-size:22px }
.mentorbox.mentor-full .mentorask{ flex:0 0 auto }
.mentorbox.mentor-full #mentorInput{ min-height:60px }
@media(max-width:760px){ .mentorbox.mentor-full{ top:2vh; bottom:2vh; width:96vw } }

/* ═══════════ HUD hearts: fix alignment + make them solid red ═══════════ */
/* the scale(4) + transform-origin:top-left hack pushed the hearts out of their
   box so they sat high and off-center; size the SVG directly and center instead */
.hearts{ min-width:auto; gap:5px; align-items:center }
.heart{ transform:none !important; margin:0; display:inline-flex; align-items:center; color:#ff3b52 }
.heart svg{ width:22px; height:20px; display:block }
.heart.lost{ animation:heartpop .5s steps(5); transform-origin:center }
@keyframes heartpop{ 0%{ filter:brightness(4); transform:scale(1) } 55%{ transform:scale(1.35) } 100%{ transform:scale(1) } }
@media(max-width:760px){ .heart svg{ width:18px; height:16px } }

/* ============ FLOATING NEURO-MENTOR WIDGET ============ */
.mentor-launcher{
  position:fixed; right:20px; bottom:calc(var(--hb) + 16px); z-index:39;
  width:58px; height:58px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--cdx-surface-2), var(--cdx-surface));
  border:3px solid var(--cdx-accent); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.5), 0 0 0 4px rgba(255,176,56,.12);
  animation:mentor-float 3.4s ease-in-out infinite;
}
.mentor-launcher:hover{ transform:scale(1.08); box-shadow:0 8px 26px rgba(0,0,0,.6), 0 0 18px var(--cdx-accent); }
.mentor-launcher .ml-face{ font-size:28px; line-height:1; }
.mentor-launcher .ml-dot{
  position:absolute; top:4px; right:4px; width:14px; height:14px; border-radius:50%;
  background:var(--cdx-accent-2); border:2px solid var(--cdx-bg); box-shadow:0 0 8px var(--cdx-accent-2);
}
.mentor-launcher.pulsing{ animation:mentor-pulse 1.1s ease-out 3, mentor-float 3.4s ease-in-out infinite; }
@keyframes mentor-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
@keyframes mentor-pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,176,56,.6) } 100%{ box-shadow:0 0 0 22px rgba(255,176,56,0) } }

/* context chip — shows the mentor KNOWS your screen */
.mentor-chip{
  flex:1; margin:0 10px; min-width:0;
  font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.3px;
  color:var(--cdx-accent); opacity:.85;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#mentorMute{ font-size:12px; }

/* ChatGPT/Gemini-feel: rounded panel + soft rendering of markdown answers */
.mentorbox{ border-radius:14px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.55); }
.mentorlog .a{ white-space:normal; }
.mentorlog .a .md-code{
  display:block; margin:8px 0; padding:10px 12px; border-radius:8px;
  background:#05070f; border:1px solid var(--cdx-border);
  font-family:"JetBrains Mono",monospace; font-size:13px; line-height:1.5;
  color:#cfe3ff; overflow-x:auto; white-space:pre;
}
.mentorlog .a code{
  background:rgba(255,176,56,.12); color:var(--cdx-accent);
  padding:1px 5px; border-radius:4px; font-family:"JetBrains Mono",monospace; font-size:.85em;
}
.mentorlog .a strong{ color:var(--cdx-accent); }
@media(max-width:760px){ .mentor-launcher{ right:14px; bottom:calc(var(--hb) + 10px); width:52px; height:52px } }

/* minimize-to-circle animation */
.mentorbox.collapsing{
  transform-origin:bottom right;
  animation:mentor-collapse .16s ease-in forwards;
}
@keyframes mentor-collapse{ from{ transform:scale(1); opacity:1 } to{ transform:scale(.4); opacity:0 } }
.mentor-launcher.from-panel{ animation:mentor-pop .22s ease-out, mentor-float 3.4s ease-in-out infinite .22s; }
@keyframes mentor-pop{ 0%{ transform:scale(.5) } 60%{ transform:scale(1.12) } 100%{ transform:scale(1) } }

/* Google Sign-In area on the profile picker */
.google-signin{ margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:8px }
.gsi-host{ display:flex; justify-content:center; min-height:40px }

/* ══════════ PHONE: touch ergonomics — MUST STAY LAST ══════════
   These override earlier mobile rules (e.g. .iconbtn min-height:40px at the
   width-based breakpoints) purely by source order, so do not move this block. */
@media(hover:none) and (pointer:coarse){
  /* 44px is the minimum reliable tap target; several controls shipped at 28-40px */
  .iconbtn, .pixelbtn, .cdx-btn, .hud-day, .cdx-tool, .pinpad button{min-height:44px}
  .iconbtn{min-width:44px; min-height:44px}
  .side-card .cdx-btn, .zone{min-height:46px}
  /* the hint bar lists keyboard shortcuts that do not exist on a phone */
  .hintbar{display:none !important}
  :root{--hb:0px}
  /* notch / home-indicator safe areas (needs viewport-fit=cover) */
  .hud{padding-top:calc(8px + env(safe-area-inset-top))}
  main#app{
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  .mentor-launcher{bottom:calc(16px + env(safe-area-inset-bottom))}
  /* kill the 300ms double-tap-zoom delay on every control */
  button, .zone, .pane-tab, [role="button"]{touch-action:manipulation}
  /* hover transforms stick on touch — they read as stuck/broken cards */
  .zone:hover, .build-proj-card:hover, .cdx-lesson:hover, .cdx-practice:hover{transform:none}
}

/* ══════════ smooth scrolling + card focus reel ══════════ */
html{scroll-behavior:smooth}
/* momentum scrolling inside the panes that own their own scrollbar */
.cdx-lesson, .cdx-practice, #guidePanel, #scr-roadmap, .cdx-map-rail{
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
/* the archive scrolls like a reel: each card settles at the centre */
.build-grid{scroll-snap-type:y proximity}
.build-proj-card{scroll-snap-align:center}
.build-proj-card.in-focus{
  transform:scale(1.03); border-color:var(--cdx-accent); filter:none; opacity:1;
  box-shadow:6px 6px 0 var(--shadow), 0 0 20px -6px var(--cdx-accent);
  transition:transform .22s var(--ease-spring), box-shadow .22s, filter .22s, opacity .22s;
}
@media(hover:none) and (pointer:coarse){
  /* on a phone the reel is the primary way to browse — snap harder */
  .build-grid{scroll-snap-type:y mandatory}
  .build-proj-card.in-focus{transform:scale(1.04)}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .build-proj-card.in-focus{transform:none; transition:none}
}