:root{ --ink:#f4e4c1; --amber:#e8a020; --danger:#e03c3c; --ok:#5ec25e; }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;
    touch-action:manipulation;-webkit-touch-callout:none;}
  html,body{min-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation;user-select:none;-webkit-user-select:none;}
  body{
    font-family:'Press Start 2P',monospace;color:var(--ink);
    background:
      radial-gradient(ellipse at 50% 30%, rgba(90,50,20,.35), transparent 60%),
      repeating-linear-gradient(90deg,#150c06 0 46px,#1a0f08 46px 92px),
      #0d0805;
  }
  #wrap{
    width:min(100vw, calc((100vh - 116px) * 16 / 9), 960px);
    width:min(100vw, calc((100dvh - 116px) * 16 / 9), 960px);
    max-width:960px;max-height:100vh;max-height:100dvh;
    padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
    display:flex;flex-direction:column;position:relative;margin:0 auto;
    background:repeating-linear-gradient(90deg,#150c06 0 46px,#1a0f08 46px 92px);
    box-shadow:0 0 80px rgba(0,0,0,.85);
  }
  /* landscape phone: fill the screen vertically */
  @media (max-height:480px) and (orientation:landscape){
    /* keep the 16:9 derivation — width:100vw here squashed the canvas to 2.6:1 */
    #wrap{width:min(100vw, calc((100vh - 62px) * 16 / 9));
          width:min(100vw, calc((100dvh - 62px) * 16 / 9));max-width:none;box-shadow:none;}
    #caption{font-size:10px;line-height:1.6;padding:4px 10px 2px;}
    #titleBar{font-size:11px;padding:2px 0 3px;}
  }
  .grow{flex:1;}
  /* ---------- title hugs the scene ---------- */
  #titleBar{
    text-align:center;font-size:13px;color:var(--amber);letter-spacing:3px;
    text-shadow:2px 2px 0 #5a2400;padding:4px 0 6px;
  }
  #titleBar span{color:var(--danger);}
  /* ---------- THE GAME IS THE SCREEN (locked 16:9 — never stretches, never letterboxed) ---------- */
  #sceneBox{
    position:relative;margin:0 auto;max-width:calc(100% - 16px);width:100%;
    aspect-ratio:16/9;border:3px solid #4a2e18;box-shadow:0 0 0 3px #120a05;overflow:hidden;
  }
  #scene{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;background:#1c1008;cursor:pointer;
    touch-action:none;}   /* a game canvas owns every gesture on it */
  /* ---------- caption: one line + faint keys ---------- */
  #caption{text-align:center;font-size:12px;line-height:2.2;opacity:.95;padding:8px 10px 4px;}
  #caption .keys{display:block;opacity:.5;font-size:7px;}
@keyframes blink{50%{opacity:.25}}
  /* ---------- OVERLAYS (opaque — no HUD ghosts bleeding through) ---------- */
  .overlay{
    position:absolute;inset:0;background:rgba(8,4,2,.965);z-index:10;
    display:block;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .ovInner{
    min-height:100%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
    padding:20px max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
    text-align:center;
  }
  .ovInner>*{flex:0 0 auto;}          /* nothing gets crushed to 0px to absorb overflow */
  .titleBig{font-size:clamp(20px,7vw,32px);color:var(--amber);text-shadow:3px 3px 0 #5a2400;line-height:1.5;}
  .titleSub{font-size:8px;opacity:.75;line-height:2;letter-spacing:2px;}
  .btn{
    font-family:inherit;font-size:11px;background:var(--amber);color:#241408;
    border:none;padding:13px 20px;cursor:pointer;box-shadow:0 4px 0 #7a4a10;
  }
  .btn:active{transform:translateY(3px);box-shadow:0 1px 0 #7a4a10;}
  .btn.ghost{background:none;color:var(--ink);border:2px solid var(--ink);box-shadow:none;font-size:8px;padding:10px 12px;}
  #goCause{color:var(--danger);font-size:10px;line-height:2;}
  #goScore{font-size:18px;color:var(--amber);}
  #newBest{color:var(--ok);font-size:9px;display:none;animation:blink .5s steps(2) infinite;}
  .credit{font-size:7px;opacity:.4;margin-top:4px;}
  #crt{position:absolute;inset:0;pointer-events:none;z-index:50;
    background:repeating-linear-gradient(0deg,rgba(0,0,0,.13) 0 1px,transparent 1px 3px);
    mix-blend-mode:multiply;}
  .hidden{display:none!important;}

/* welcome/menu — the room remains visible, with the same story-first vertical
   hierarchy as the native portrait shell */
#ovTitle{
  background:
    linear-gradient(to bottom,rgba(6,3,1,.28),rgba(6,3,1,.62) 46%,rgba(6,3,1,.96)),
    linear-gradient(to right,rgba(6,3,1,.35),transparent 30%,transparent 70%,rgba(6,3,1,.35));
}
#ovTitle .ovInner{gap:9px;padding-top:max(18px,env(safe-area-inset-top));}
.welcomeEyebrow{
  color:var(--amber);font-size:7px;letter-spacing:2px;line-height:1;
  padding:8px 11px;border:1px solid rgba(232,160,32,.8);background:rgba(6,3,1,.72);
}
#ovTitle .titleBig{font-size:clamp(25px,6.5vw,38px);line-height:1.42;}
#ovTitle .titleSub{color:var(--ink);opacity:.88;line-height:1.9;letter-spacing:1px;}
.welcomePrimary{display:grid;gap:8px;width:min(310px,82vw);}
.welcomePrimary .btn{width:100%;min-height:43px;}
.welcomePrimary .daily{color:var(--amber);border-color:var(--amber);background:rgba(6,3,1,.55);}
.welcomeUtilities{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:min(310px,82vw);}
.welcomeLink,.welcomeBack{
  min-height:36px;padding:7px 6px;border:1px solid rgba(244,228,193,.48);
  background:rgba(6,3,1,.58);color:var(--ink);font:6px/1.4 'Press Start 2P',monospace;cursor:pointer;
}
.welcomeLink:focus-visible,.welcomeBack:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
.welcomeDetail{
  width:min(360px,88vw);padding:11px 13px;background:rgba(6,3,1,.9);
  border:1px solid var(--amber);font-size:7px;line-height:1.8;text-align:left;
}
#welcomeDetailTitle{color:var(--amber);margin-bottom:7px;}
.welcomeBack{display:block;margin:10px auto 0;min-width:100px;color:var(--amber);border-color:var(--amber);}
.welcomeStations{font-size:5px;letter-spacing:1px;color:rgba(244,228,193,.6);}

/* leaderboard */
#goDaily{color:var(--amber);font-size:8px;letter-spacing:1px;}
#lbSubmit{display:flex;gap:8px;align-items:center;}
#lbName{touch-action:auto;width:88px;min-height:44px;background:#1a0f06;border:2px solid var(--amber);color:var(--ink);
  font-family:'Press Start 2P',monospace;font-size:16px;text-align:center;text-transform:uppercase;
  padding:6px 4px;border-radius:4px;outline:none;}
#lbTabs{display:flex;gap:6px;font-size:7px;opacity:.9;}
.lbTab{cursor:pointer;opacity:.45;letter-spacing:1px;
  min-height:44px;display:flex;align-items:center;padding:0 12px;}
.lbTab.on{opacity:1;color:var(--amber);border-bottom:2px solid var(--amber);padding-bottom:2px;}
#lbBoard{font-size:7px;line-height:2.1;min-height:70px;text-align:left;min-width:210px;}
#lbBoard .me{color:var(--ok);}
#lbBoard .rk{color:var(--amber);display:inline-block;width:22px;}
#lbBoard .nm{display:inline-block;width:52px;}

/* game-over screen carries more content now — compress it */
#ovOver .ovInner{gap:8px;}
#ovOver .titleBig{font-size:clamp(14px,4.5vw,20px);}
#ovOver #goCause{font-size:8px;line-height:1.7;}
#ovOver #goScore{font-size:14px;}
#ovOver .btn{padding:9px 16px;font-size:9px;min-height:44px;}
#ovOver .btn.ghost{padding:7px 14px;font-size:7px;min-height:44px;}
/* the card itself scrolls now — the board no longer needs its own clipped window */
#lbBoard{min-height:0;max-height:none;overflow:visible;}

/* run stats + leaderboard rank on the game-over card */
#goStats{font-size:7px;opacity:.75;letter-spacing:1px;line-height:1.8;}
#lbRank{font-size:8px;color:var(--ok);letter-spacing:1px;min-height:10px;}
#lbRank.miss{color:var(--ink);opacity:.55;}

/* retry is the primary action on the game-over card */
#ovOver #btnRetry{font-size:12px;padding:12px 26px;}
#retryHint{font-size:7px;opacity:.9;color:var(--ink);letter-spacing:1px;margin-top:-2px;text-shadow:1px 1px 0 #000;}
#btnRename{font-size:6px!important;padding:5px 12px!important;opacity:.6;min-height:44px;}

/* Safari <15 has no aspect-ratio: without this the scene box collapses to 0 height */
@supports not (aspect-ratio: 16/9){
  #sceneBox{height:0;padding-bottom:56.25%;}
}
/* there is no scrollbar on touch, so say the card scrolls */
.overlay{scrollbar-width:thin;}
/* pinned to the visible bottom edge — a cue that scrolls away with the content is useless */
/* sticky and opaque, so it must never swallow a tap meant for the button underneath it */
#scrollCue{position:sticky;bottom:0;align-self:stretch;font-size:6px;opacity:.75;letter-spacing:1px;
  padding:6px 0 4px;margin:0 -20px -12px;color:var(--amber);pointer-events:none;
  background:linear-gradient(to top,rgba(8,4,2,.98) 55%,rgba(8,4,2,0));display:none;}

/* phone portrait: the wrap is only ~330px tall, so the title card must not need scrolling
   to reach START, and the game-over card must show ONE MORE above the fold */
@media (max-width:560px){
  .ovInner{gap:9px;padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));}
  .titleBig{font-size:clamp(17px,5.6vw,24px);line-height:1.3;}
  .titleSub{font-size:7px;line-height:1.7;letter-spacing:1px;}
  #ovTitle .btn{padding:11px 18px;font-size:10px;}
  #ovTitle .btn.ghost{padding:9px 12px;font-size:7px;}
  .credit{display:none;}
  #ovOver .ovInner{gap:6px;}
  #ovOver #goCause{font-size:7px;line-height:1.6;}
  #goStats{font-size:6px;}
}

/* a default focus ring on a pixel-art button reads as a rendering glitch —
   show a house-style one, and only for keyboard users */
.btn:focus{outline:none;}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.lbTab:focus{outline:none;}
.lbTab:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

/* so a stale cached copy can be identified on sight */
#buildTag{font-size:5px;opacity:.35;letter-spacing:1px;margin-top:2px;}
@media (max-width:560px){ #buildTag{display:block;} }

/* near-miss: the single strongest "one more go" lever — show exactly how short you fell */
#nearMiss{font-size:8px;color:var(--amber);letter-spacing:1px;line-height:1.6;}
#nearMiss.win{color:var(--ok);}
#nearBar{width:190px;max-width:70%;height:7px;background:#2a1a0c;border:1px solid rgba(244,228,193,.3);display:none;}
#nearBar i{display:block;height:100%;background:var(--amber);}
#nearBar.win i{background:var(--ok);}
#streakTitle{font-size:7px;color:var(--amber);letter-spacing:1px;}
#lbRival{font-size:7px;opacity:.8;letter-spacing:1px;min-height:9px;}

#stage{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;}
#about{user-select:text;-webkit-user-select:text;}
/* crawlable about section, below the game */
#about{max-width:640px;margin:28px auto 40px;padding:0 16px;font:12px/1.8 Georgia,serif;color:#c9b79c;}
#about h2{font-family:'Press Start 2P',monospace;font-size:10px;color:#f2c14e;margin:22px 0 8px;}
#about ul{padding-left:18px;}
#about li{margin:4px 0;}
#about .dedication{opacity:.6;font-style:italic;margin-top:18px;}
#sceneBox{touch-action:none;} /* page now scrolls to #about; keep play-area drags from scrolling */
/* phone portrait: the 16:9 frame is ~200px tall, so the overlays take the whole screen instead of
   clipping inside the frame (game-over card was cut off at the initials box) */
@media (max-width:560px) and (orientation:portrait){
  .overlay{position:fixed;inset:0;z-index:50;}
  #ovTitle .ovInner{justify-content:flex-end;padding-bottom:max(18px,env(safe-area-inset-bottom));}
  #ovTitle .titleBig{font-size:28px;}
  #ovTitle .credit,#ovTitle #buildTag{display:none;}
  #ovOver .ovInner{gap:10px;padding-top:max(16px,env(safe-area-inset-top));}
  #ovOver #goCause{font-size:8px;}
  #goStats{font-size:7px;}
}