/* style.css
   Layout: single-screen canvas game, HUD overlaid, tactics-style parchment panels for
   briefing / results / shop / leaderboard. One committed visual world (dusk field), explicit colors. */
:root{
  --ink:#1d2a24;
  --panel:#f2ead6;
  --panel-edge:#8a6f4d;
  --panel-deep:#e2d5b8;
  --gold:#c9a227;
  --teal:#1f7a6d;
  --teal-bright:#2fa392;
  --sky:#17222b;
  --warn:#b4552f;
  /* type: Archivo Black for display, JetBrains Mono for short labels, and one sans for all body and UI text (Apollo,
     Oct 23: the Bitter serif read small and soft on phones). Archivo, the text cut of NatureJAB's own display family
     (Nina: match naturejab.com), self-hosted, system fallback */
  --font-ui:"Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display:"Archivo Black", "Arial Black", Impact, sans-serif;
  --font-game:"Chakra Petch", "Archivo Black", "Arial Black", sans-serif;   /* game titles: a bit digital (Nina, Oct 20) */
  --font-mono:"JetBrains Mono", "SF Mono", Menlo, monospace;
}
html,body{height:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--sky);color:var(--ink);font-family:var(--font-ui);overflow:hidden;
  -webkit-user-select:none;user-select:none;touch-action:none}
#stage{position:fixed;inset:0}
canvas{display:block;width:100%;height:100%}

/* ---- HUD ---- */
/* HUD: one tidy centred bar (Nina: "this could be more organized"); chips share a width so numbers line up */
#hud{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;display:flex;justify-content:center;
  padding:10px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));
  pointer-events:none;gap:8px;z-index:5}
.chip{background:rgba(23,34,43,.84);border:1px solid rgba(201,162,39,.55);border-radius:6px;
  color:#f2ead6;padding:6px 10px;font-size:13px;line-height:1.2;min-width:112px;text-align:center;
  font-variant-numeric:tabular-nums;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.chip b{display:block;font-size:17px;letter-spacing:.5px}
.chip small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;opacity:.75;white-space:nowrap}
.chip.hot{border-color:#7fe8d4}.chip.hot b{color:#7fe8d4}
.chip.low b{color:#ff8a65}
#combo{position:fixed;left:50%;transform:translateX(-50%) scale(.6);top:calc(74px + env(safe-area-inset-top,0px));text-align:center;
  color:#ffd96b;font-weight:900;font-size:22px;text-shadow:0 2px 0 #17222b,0 0 12px rgba(255,217,107,.6);
  pointer-events:none;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s;z-index:5;
  font-variant-numeric:tabular-nums}
#combo.on{opacity:1;transform:translateX(-50%) scale(1)}
#combo small{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#f2ead6;text-align:center}
#buffs{position:fixed;left:max(16px,env(safe-area-inset-left,0px));top:calc(78px + env(safe-area-inset-top,0px));
  display:flex;flex-direction:column;gap:6px;pointer-events:none;z-index:5}
.buff{background:rgba(23,34,43,.84);border:1px solid #2fa392;border-radius:6px;color:#f2ead6;padding:4px 8px;
  font-size:11px;font-weight:700;display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.buff i{display:inline-block;width:40px;height:4px;background:#0e1619;border-radius:2px;overflow:hidden}
.buff i b{display:block;height:100%;background:#2fa392}
#bagbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(64px + env(safe-area-inset-bottom,0px));
  width:min(62vw,260px);pointer-events:none;z-index:5}
#bagbar .track{height:14px;border:2px solid #0e1619;border-radius:7px;background:rgba(23,34,43,.8);overflow:hidden;
  box-shadow:0 2px 0 rgba(0,0,0,.4)}
#bagbar .fill{height:100%;width:0%;background:linear-gradient(180deg,#2fa392,#1f7a6d);transition:width .15s}
#bagbar.full .fill{background:linear-gradient(180deg,#e0b23a,#c9a227)}
#bagbar.bad .fill{background:linear-gradient(180deg,#e07a55,#b4552f)}
#bagbar.full .track{animation:pulse .7s infinite alternate}
@keyframes pulse{from{box-shadow:0 2px 0 rgba(0,0,0,.4)}to{box-shadow:0 0 14px #ffd96b}}
#bagbar .lab{color:#f2ead6;text-align:center;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  margin-top:4px;text-shadow:0 1px 2px #000}
#mute{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));
  width:38px;height:38px;border-radius:8px;border:2px solid #0e1619;background:rgba(23,34,43,.84);color:#f2ead6;
  font-size:16px;z-index:6;box-shadow:0 2px 0 #0e1619}
#pauseBtn{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));
  width:38px;height:38px;border-radius:8px;border:2px solid #0e1619;background:rgba(23,34,43,.84);color:#f2ead6;
  font-size:13px;letter-spacing:-2px;z-index:6;box-shadow:0 2px 0 #0e1619}
.x{position:absolute;right:10px;top:8px;width:32px;height:32px;border-radius:8px;border:2px solid var(--panel-edge);
  background:var(--panel-deep);color:#2a2118;font-size:22px;line-height:1;z-index:2;box-shadow:0 2px 0 #2a2118}
.x:active{transform:translateY(2px);box-shadow:none}
.panel.narrow{width:min(360px,100%)}
/* dash sits above the thumb zone; the cooldown is a thin ring around it, nothing behind it */
#dashBtn{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(150px + env(safe-area-inset-bottom,0px));
  width:64px;height:64px;border-radius:50%;border:3px solid #0e1619;background:rgba(23,34,43,.92);color:#f2ead6;z-index:6;
  box-shadow:0 3px 0 #0e1619;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;--cd:0%;touch-action:none}
#dashBtn::after{content:"";position:absolute;inset:-7px;border-radius:50%;padding:3px;
  background:conic-gradient(#ffd96b calc(100% - var(--cd)), rgba(255,255,255,.12) 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
#dashBtn span{font-size:22px;line-height:1}#dashBtn small{font-size:11px;letter-spacing:2px;font-weight:700}
#dashBtn.ready{border-color:#ffd96b;box-shadow:0 3px 0 #0e1619,0 0 12px rgba(255,217,107,.5)}
#dashBtn.on{background:#ffd96b;color:#17222b}
/* left-handed layout mirrors the thumb controls */
body.lefty #dashBtn{right:auto;left:max(14px,env(safe-area-inset-left,0px))}
body.lefty #pauseBtn{left:auto;right:max(16px,env(safe-area-inset-right,0px))}
body.lefty #mute{right:auto;left:max(16px,env(safe-area-inset-left,0px))}
/* final ten seconds: big centre countdown */
/* countdown: off centre and dimmer (Apollo, Oct 19 call), sits under the time chip at the top left */
#count{position:fixed;left:calc(14px + env(safe-area-inset-left,0px));top:calc(64px + env(safe-area-inset-top,0px));transform:none;font-size:56px;font-weight:900;color:rgba(255,217,107,.75);
  text-shadow:0 3px 0 #17222b;pointer-events:none;z-index:7;opacity:0;font-variant-numeric:tabular-nums}
#count.tick{animation:countpop .9s ease-out}
@keyframes countpop{0%{opacity:.9;transform:scale(1.25)}60%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}
#dashBtn:active{transform:translateY(2px);box-shadow:0 1px 0 #0e1619}
.charrow{margin:10px 0 0}.charrow small{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#6b5a40}
.namerow{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.namerow label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#6b5a40;flex:0 0 100%}
.namerow input{flex:1;min-width:120px;font:inherit;font-size:14px;padding:7px 10px;border:2px solid var(--panel-edge);border-radius:7px;background:#f2ead6;color:#2a2118}
.namerow .alt{flex:0 0 auto;padding:7px 10px;font-size:11px}
.charpick{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;padding-bottom:2px}
.charbtn{flex:1 0 56px;min-width:56px;max-width:72px;padding:6px 4px;font-size:11px;font-weight:700;color:#2a2118;background:var(--panel-deep);
  border:2px solid var(--panel-edge);border-radius:8px;box-shadow:0 2px 0 #2a2118;display:flex;flex-direction:column;align-items:center;gap:4px}
.charbtn canvas{width:44px;height:44px;border-radius:6px;border:2px solid #0e1619;image-rendering:pixelated}
.charbtn span{font-size:11px;line-height:1}
.say .face.julian{width:44px;height:44px;flex:0 0 44px;border-radius:6px;border:2px solid #0e1619;background:var(--teal);padding:0}
#toast{display:flex;align-items:center;gap:8px;white-space:normal;max-width:min(92vw,460px);text-align:left}
#toast.jb{background:var(--panel);color:#2a2118;border:3px solid var(--panel-edge);box-shadow:0 0 0 3px #2a2118;font-weight:600;padding:8px 12px}
#toast canvas.julian{width:36px;height:36px;border-radius:6px;border:2px solid #0e1619;flex:0 0 36px}
.hudbtn{position:fixed;left:50%;transform:translateX(-50%);top:calc(70px + env(safe-area-inset-top,0px));padding:6px 12px;font-size:11px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:#f2ead6;background:rgba(23,34,43,.88);border:2px solid #7fe8d4;border-radius:14px;z-index:6;box-shadow:0 2px 0 #0e1619}
.hudbtn.trucks{border-color:#ffd96b;color:#ffd96b}
.charbtn.on{background:linear-gradient(180deg,#7fe8d4,#2fa392);color:#17222b;border-color:#0e1619}
.howrp{display:flex;flex-direction:column;gap:6px;margin:0 0 8px}
.howrp div{display:grid;grid-template-columns:24px auto 1fr;gap:8px;align-items:baseline;background:var(--panel-deep);border:2px solid var(--panel-edge);border-radius:8px;padding:7px 10px;font-size:12px;line-height:1.4}
.howrp span{font-size:16px;line-height:1}.howrp b{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--teal)}
.support{display:flex;gap:10px;align-items:center;background:linear-gradient(180deg,#e2f5f0,#e2d5b8);border:2px solid var(--teal);border-radius:8px;padding:10px;margin:12px 0 0}
.support b{display:block;font-size:13px}.support small{font-size:11px;color:#6b5a40;line-height:1.35}.support .buy{text-decoration:none;display:inline-block}
.wheelwrap{position:relative;width:280px;max-width:100%;margin:12px auto 0}
.wheelwrap canvas{width:100%;height:auto;display:block}
.wheelpin{position:absolute;left:50%;top:-6px;transform:translateX(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:22px solid #2a2118}
.wheelpin::after{content:"";position:absolute;left:-9px;top:-21px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:16px solid #ffd96b}
.reward{display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;background:var(--panel-deep);border:2px solid var(--panel-edge);border-radius:8px;padding:8px 10px;margin:6px 0;font-size:12px}
.reward span{font-size:20px}.reward b{display:block;font-size:13px}.reward i{display:block;height:6px;background:#0e1619;border-radius:3px;overflow:hidden;margin-top:4px}
.reward i b{display:block;height:100%;background:linear-gradient(90deg,#2fa392,#7fe8d4)}.reward small{font-variant-numeric:tabular-nums;color:#6b5a40}
.reward.done{border-color:var(--gold)}.reward.done small{color:var(--teal);font-weight:700}
.unlock{display:flex;gap:10px;align-items:center;background:linear-gradient(180deg,#fff3c4,#f2ead6);border:2px solid var(--gold);
  border-radius:8px;padding:8px 10px;margin:8px 0 0}
.unlock span{font-size:22px}.unlock b{display:block;font-size:15px;color:#141a12}.unlock small{font-size:13px;color:#3d3426;line-height:1.35}
.unlock div{min-width:0}
#flash{position:fixed;inset:0;pointer-events:none;background:#ffd96b;opacity:0;z-index:4}
#tut{position:fixed;left:50%;transform:translateX(-50%);top:calc(84px + env(safe-area-inset-top,0px));width:min(92vw,420px);
  display:flex;gap:10px;align-items:flex-start;background:var(--panel);border:3px solid var(--panel-edge);border-radius:10px;
  box-shadow:0 0 0 3px #2a2118,0 10px 30px rgba(0,0,0,.5);padding:10px 12px;z-index:7}
.tutface{flex:0 0 36px;width:36px;height:36px;border-radius:6px;background:var(--teal);border:2px solid #0e1619;color:#f2ead6;
  font-weight:700;display:flex;align-items:center;justify-content:center}
.tutbody{flex:1;min-width:0}
.tutbody small{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--teal)}
.tutbody p{margin:2px 0 0;font-size:13px;line-height:1.4;color:#2a2118}
.tutskip{flex:0 0 auto;align-self:center;padding:6px 8px;font-size:11px;font-weight:700;color:#2a2118;background:var(--panel-deep);
  border:2px solid var(--panel-edge);border-radius:7px;box-shadow:0 2px 0 #2a2118}
.howto{display:flex;flex-direction:column;gap:6px;margin:10px 0 0}
.howto div{display:grid;grid-template-columns:28px auto 1fr;gap:8px;align-items:baseline;background:var(--panel-deep);
  border:2px solid var(--panel-edge);border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.4}
.howto span{font-size:18px;line-height:1}
.howto b{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--teal)}
.row2{flex-wrap:wrap}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(72px + env(safe-area-inset-bottom,0px));
  background:rgba(23,34,43,.92);color:#ffd96b;border:1px solid var(--gold);padding:8px 14px;border-radius:6px;
  font-size:13px;font-weight:700;letter-spacing:.5px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:9;
  white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}

/* ---- tactics-style panels ---- */
.veil{position:fixed;inset:0;background:rgba(10,16,20,.66);display:flex;align-items:safe center;justify-content:center;
  padding:max(12px,env(safe-area-inset-left,0px));padding-top:max(12px,env(safe-area-inset-top,0px));
  padding-bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:10;overflow:hidden}
/* a panel never outgrows the screen: it scrolls inside itself, the X stays pinned */
.panel{box-sizing:border-box;width:min(440px,100%);max-height:calc(100vh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--panel);border-radius:10px;
  border:3px solid var(--panel-edge);box-shadow:0 0 0 3px #2a2118, 0 14px 40px rgba(0,0,0,.6);
  padding:18px 20px 20px;position:relative}
.panel .x{position:sticky;top:0;float:right;margin:-6px -8px 0 8px;box-shadow:0 2px 0 #2a2118,0 0 0 4px var(--panel)}
@media (max-width:480px){
  #hud{gap:4px;padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
  .chip{min-width:0;flex:1 1 0;padding:5px 5px;font-size:12px}
  .chip b{font-size:15px}.chip small{font-size:11px;letter-spacing:.8px;white-space:nowrap;line-height:1.1}
  .hudbtn{top:calc(66px + env(safe-area-inset-top,0px));font-size:11px;padding:5px 10px}
  #tut{top:calc(100px + env(safe-area-inset-top,0px))}
}
.panel :is(h1,h2:where(.h1)){margin:0 0 2px;font-size:24px;letter-spacing:.5px;color:#2a2118;text-wrap:balance}
.panel h2:where(:not(.h1)){margin:0 0 10px;font-size:13px;font-weight:600;color:var(--teal);text-transform:uppercase;letter-spacing:2px}
.fuelpill{float:right;color:#2a2118;background:var(--panel-deep);border:1px solid var(--panel-edge);border-radius:12px;padding:1px 8px;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.roundtag{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:10px 0 0;font-size:12px;
  text-transform:uppercase;letter-spacing:1.5px;color:#6b5a40}
.roundtag strong{color:#2a2118;font-size:14px;letter-spacing:.5px;text-transform:none}
.rank{position:absolute;right:52px;top:12px;width:56px;height:56px;border-radius:50%;border:3px solid #2a2118;
  background:linear-gradient(180deg,#e0b23a,#c9a227);color:#2a2118;font-size:34px;font-weight:900;display:flex;
  align-items:center;justify-content:center;box-shadow:0 3px 0 #2a2118;transform:rotate(-8deg)}
.rank.S{background:linear-gradient(180deg,#7fe8d4,#2fa392)}
.rank.D{background:linear-gradient(180deg,#cfc4ac,#a89a7d)}
.say{display:flex;gap:12px;align-items:flex-start;background:var(--panel-deep);border:2px solid var(--panel-edge);
  border-radius:8px;padding:12px;margin:12px 0}
.say .face{flex:0 0 44px;width:44px;height:44px;border-radius:6px;background:var(--teal);
  border:2px solid #0e1619;display:flex;align-items:center;justify-content:center;color:#f2ead6;font-weight:700;font-size:18px}
.say p{margin:0;font-size:14px;line-height:1.5}
.say .who{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--teal);display:block;margin-bottom:2px}
.fact{margin:0;font-size:12px;line-height:1.5;color:#6b5a40;border-left:3px solid var(--gold);padding-left:10px}
.gear{margin:12px 0 0;background:var(--panel-deep);border:2px solid var(--panel-edge);border-radius:8px;padding:10px}
.gearstats{display:flex;gap:6px;text-align:center}
.gearstats div{flex:1;min-width:0}
.gearstats b{display:block;font-size:18px;font-variant-numeric:tabular-nums}
.gearstats small{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:#6b5a40}
.gearlist{margin:8px 0 0;font-size:12px;line-height:1.4;color:#2a2118}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.stat{background:var(--panel-deep);border:2px solid var(--panel-edge);border-radius:8px;padding:8px 10px;text-align:center}
.stat b{display:block;font-size:20px;font-variant-numeric:tabular-nums}
.stat small{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:#6b5a40}
button{font-family:inherit;cursor:pointer}
.go{display:block;width:100%;margin-top:14px;padding:13px;font-size:16px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:#f2ead6;background:linear-gradient(180deg,#2fa392,#1f7a6d);
  border:2px solid #0e1619;border-radius:8px;box-shadow:0 3px 0 #0e1619}
.go:active{transform:translateY(2px);box-shadow:0 1px 0 #0e1619}
.row2{display:flex;gap:8px;margin-top:8px}
.alt{flex:1;padding:10px;font-size:13px;font-weight:700;letter-spacing:.5px;color:#2a2118;background:var(--panel-deep);
  border:2px solid var(--panel-edge);border-radius:8px;box-shadow:0 2px 0 #2a2118}
.alt:active{transform:translateY(2px);box-shadow:none}
.link{background:none;border:0;padding:0;color:var(--teal);font-size:11px;text-decoration:underline}
.shoprow{display:flex;align-items:center;gap:10px;background:var(--panel-deep);border:2px solid var(--panel-edge);
  border-radius:8px;padding:8px 10px;margin:6px 0}
.shoprow .ic{flex:0 0 36px;height:36px;border-radius:6px;border:2px solid #0e1619;display:flex;align-items:center;
  justify-content:center;font-size:18px;background:#f2ead6}
.shoprow .tx{flex:1;min-width:0}
.shoprow .tx b{display:block;font-size:14px}
.shoprow .tx small{font-size:11px;color:#6b5a40}
.buy{flex:0 0 auto;padding:8px 10px;font-weight:700;font-size:13px;color:#2a2118;background:linear-gradient(180deg,#e0b23a,#c9a227);
  border:2px solid #0e1619;border-radius:7px;box-shadow:0 2px 0 #0e1619;font-variant-numeric:tabular-nums;min-width:64px}
.buy:disabled{opacity:.45;box-shadow:none}
.pips{letter-spacing:2px;color:var(--teal);font-size:11px}
.note{font-size:11px;color:#6b5a40;text-align:center;margin:10px 0 0}
.post{margin:12px 0 0;background:var(--panel-deep);border:2px solid var(--panel-edge);border-radius:8px;padding:10px}
.post label{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:#6b5a40}
.postrow{display:flex;gap:8px;margin-top:6px}
.postrow input{flex:1;min-width:0;font:inherit;font-size:15px;padding:8px 10px;border:2px solid var(--panel-edge);border-radius:7px;background:#f2ead6;color:#2a2118}
.postrow input:focus{outline:2px solid var(--teal-bright);outline-offset:1px}
.post small{display:block;margin-top:6px;font-size:11px;color:var(--teal);min-height:14px}
.lbrow{display:grid;grid-template-columns:28px 1fr auto auto;gap:8px;align-items:center;background:var(--panel-deep);
  border:2px solid var(--panel-edge);border-radius:8px;padding:8px 10px;margin:6px 0;font-size:14px;font-variant-numeric:tabular-nums}
.lbrow b{font-size:16px;color:#6b5a40}.lbrow.top b{color:var(--gold)}
.lbrow small{font-size:11px;color:#6b5a40}.lbrow em{font-style:normal;font-weight:900;font-size:16px}
@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }

canvas.julian{image-rendering:auto}

a.alt{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;text-align:center}

a.go{display:flex;align-items:center;justify-content:center;text-decoration:none}

/* shop header: keep the RP pill clear of the sticky close button */
#shopV h2:where(:not(.h1)){padding-right:44px}

/* type roles from the NatureJAB site */
.panel :is(h1,h2:where(.h1)),#rRank,.rank{font-family:var(--font-display);font-weight:400;letter-spacing:.2px}
.panel h2:where(:not(.h1)),.chip small,.who,.charrow small,.namerow label,.gearstats small,.stat small,.post label,.roundtag,.tutbody small,#combo small,.fuelpill{font-family:var(--font-mono);font-weight:500}
.go,.buy,.alt,.tutskip,.hudbtn{font-family:var(--font-display);font-weight:400;letter-spacing:.3px}
.chip b,.gearstats b,.stat b,#count{font-family:var(--font-mono);font-weight:700}

/* ---------- NatureJAB theme (Nina, Oct 20: "use NatureJAB colours, buttons need to be sharper") ----------
   Palette from naturejab.com: near-black ground, cream text, orange #ff5b1f primary, green #5dba63 success,
   slate greys. 3 px radii, flat fills, 1 px edges, no soft drop shadows. Overrides the parchment rules above. */
:root{--panel:#111417;--panel-deep:#1a1f24;--panel-edge:#3a4149;--ink:#fafafa;--gold:#ff5b1f;--teal:#5dba63;--teal-bright:#7fd486;--nj-orange:#ff5b1f;--nj-green:#5dba63;--nj-grey:#aab1b8;--nj-line:#58606a}
.panel{color:#fafafa;border-radius:3px;border:1px solid var(--panel-edge);box-shadow:0 24px 60px rgba(0,0,0,.65)}
.panel :is(h1,h2:where(.h1)){color:#fafafa}.panel h2:where(:not(.h1)){color:var(--nj-orange)}
.say,.gear,.stat,.post,.shoprow,.reward,.howto div,.support,.charbtn,.fuelpill{background:var(--panel-deep);border:1px solid var(--panel-edge);border-radius:3px;color:#fafafa}
.say .who{color:var(--nj-green)}.say .face{border-radius:3px;border-color:var(--panel-edge)}
.shoprow .tx small,.note,.fact,.gearstats small,.stat small,.reward small,.post small,.charrow small,.namerow label,.howto div{color:var(--nj-grey)}
.howto b{color:var(--nj-orange)}.howto div b,.shoprow .tx b,.reward b,.gearstats b,.stat b,.roundtag strong,.support b{color:#fafafa}
.fact{border-left:2px solid var(--nj-orange)}
.go{background:var(--nj-orange);color:#0b0e11;border:0;border-radius:3px;box-shadow:none;letter-spacing:1.2px}
.go:active{transform:none;filter:brightness(.88);box-shadow:none}
.alt{background:transparent;color:#fafafa;border:1px solid var(--nj-line);border-radius:3px;box-shadow:none}
.alt:active{transform:none;background:#22282e;box-shadow:none}
.buy{background:var(--nj-green);color:#0b0e11;border:0;border-radius:3px;box-shadow:none}
.buy:disabled{background:#2a3036;color:#7d858d;opacity:1}
.charbtn{color:#fafafa}.charbtn canvas{border-radius:3px;border:1px solid var(--panel-edge)}
.charbtn.on{background:var(--nj-orange);color:#0b0e11;border-color:var(--nj-orange)}.charbtn.on canvas{border-color:#0b0e11}
.namerow input,#lbName{background:#0b0e11;color:#fafafa;border:1px solid var(--nj-line);border-radius:3px}
.link{color:var(--nj-orange)}.pips{color:var(--nj-green)}
.shoprow .ic{background:#0b0e11;border:1px solid var(--panel-edge);border-radius:3px}
.panel .x{background:var(--panel-deep);color:#fafafa;border:1px solid var(--nj-line);border-radius:3px;box-shadow:0 0 0 4px var(--panel)}
.chip{border-radius:3px;border:1px solid var(--panel-edge);box-shadow:none}
.rank{border-color:#fafafa}.rank.S{background:var(--nj-orange)}.rank.A{background:var(--nj-green)}
.support{border:1px solid var(--nj-green)}
.reward i{background:#0b0e11}.reward i b{background:var(--nj-green)}
.hudbtn,.tutskip{border-radius:3px;box-shadow:none}
#toast{border-radius:3px}
.wheelpin{border-top-color:var(--nj-orange)}
.gearlist,.gear p{color:var(--nj-grey)}
#wheelNote,.wheelwrap+.go+.note{color:var(--nj-grey)}

/* ---------- Buttons exactly as naturejab.com (.nj-btn-primary / .nj-btn-outline), Nina Oct 20 ---------- */
:root{--panel:#1a1b15;--panel-deep:#22231c;--panel-edge:#2a2b24;--nj-grey:#a8a393;--nj-line:#2a2b24}
.panel,.chip,.say,.gear,.stat,.post,.shoprow,.reward,.howto div,.support,.charbtn,.fuelpill,.shoprow .ic,.namerow input,#lbName,.panel .x,.hudbtn,.tutskip,#toast,.say .face,.charbtn canvas,.rank{border-radius:0}
.go,.buy,.alt,.tutskip,.hudbtn,.link{font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:1.2px;border-radius:0}
.go{font-size:13px;padding:15px 30px;background:#5dba63;color:#1a1b15;border:none;box-shadow:none;display:flex;align-items:center;justify-content:center;gap:8px}
.go:hover{opacity:.88}.go:active{opacity:.8;transform:none}
.alt{font-size:12px;font-weight:400;padding:15px 12px;border:1px solid #2a2b24;background:transparent;color:#a8a393;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.25}
.alt:hover,.alt:active{border-color:#5dba63;color:#5dba63;background:transparent;transform:none}
#donateFromBrief,#donateFromPause{border-color:#ff5b1f;color:#ff5b1f;box-shadow:0 0 18px rgba(255,91,31,.35)}
#donateFromBrief:hover,#donateFromPause:hover{color:#ff8a5c;box-shadow:0 0 26px rgba(255,91,31,.55)}
.buy{font-size:12px;padding:10px 12px;background:#5dba63;color:#1a1b15;border:none;box-shadow:none;min-width:64px}
.buy:disabled{background:transparent;color:#5f5c52;border:1px solid #2a2b24}
.link{font-size:11px;letter-spacing:1.5px;text-decoration:none;color:#a8a393;border-bottom:1px solid #2a2b24;padding-bottom:1px}
.link:hover{color:#5dba63;border-color:#5dba63}
.panel h2:where(:not(.h1)),.chip small,.who,.charrow small,.namerow label,.gearstats small,.stat small,.post label,.roundtag,.tutbody small,#combo small,.fuelpill,.howto b{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:400;color:#a8a393}
.panel h2:where(:not(.h1)){color:#ff5b1f}.say .who{color:#5dba63}.howto b{color:#ff5b1f}
.panel :is(h1,h2:where(.h1)){font-family:var(--font-display);font-size:26px;letter-spacing:0}
.charbtn.on{background:transparent;border:1px solid #5dba63;color:#5dba63}
.rank{border-width:2px}
.row2{gap:8px}.row2 .alt{flex:1 1 calc(50% - 8px);min-width:0}

/* QA pass Oct 20 (Sonnet playthrough): rank badge clear of the close button, RP pill clear of it too,
   donate button inside its card, toast inside the phone screen */
.rank{right:auto;left:20px;top:14px}
#resultV h2:where(:not(.h1)),#resultV :is(h1,h2:where(.h1)){padding-left:70px}
.fuelpill{margin-right:44px}
.go{box-sizing:border-box;width:100%}
@media (max-width:480px){ #toast{max-width:calc(100vw - 24px)} #dashBtn{bottom:calc(120px + env(safe-area-inset-bottom,0px))} }

/* gear chips on the start screen */
.gearlist{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;line-height:1.2}
.gchip{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border:1px solid #2a2b24;background:#1a1b15;color:#fafafa;font-family:var(--font-mono);font-size:11px;letter-spacing:.8px;text-transform:uppercase;border-radius:0;white-space:nowrap}
.gchip.mark{border-color:#ff5b1f;color:#ff5b1f}
.gchip.boost{border-color:#5dba63;color:#5dba63}
.gchip.base{color:#a8a393}
.gchip.next{border-style:dashed;color:#a8a393;white-space:normal}
.gchip.power{color:#ffd96b;border-color:#5a4a1a}
.activity{margin:2px 0 0;font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#5dba63}
/* donate reads like every other secondary button (Apollo, Oct 20: not the most highlighted thing) */
#donateFromBrief,#donateFromPause{border-color:#2a2b24;color:#a8a393;box-shadow:none}
#donateFromBrief:hover,#donateFromPause:hover{border-color:#5dba63;color:#5dba63;box-shadow:none}
/* Reactor shop is the highlighted secondary (Apollo, Oct 20 91:15) */
#shopFromBrief,#shopFromResult,#pauseShop{border-color:#ff5b1f;color:#ff5b1f;box-shadow:0 0 18px rgba(255,91,31,.35)}
#shopFromBrief:hover,#shopFromResult:hover,#pauseShop:hover{color:#ff8a5c;box-shadow:0 0 26px rgba(255,91,31,.55)}
/* training banner on the dark theme */
#tut{background:#1a1b15;border:1px solid #2a2b24;color:#fafafa}
.tutbody p,#tutText{color:#fafafa}
.tutbody small{color:#5dba63}
.tutface{background:#5dba63;color:#1a1b15;border-color:#2a2b24}

/* toast and bag label on the dark theme (Nina: "can't see the font") */
#toast{background:#1a1b15;border:1px solid #2a2b24;color:#fafafa;box-shadow:0 10px 30px rgba(0,0,0,.5)}
#toast span,#toastText{color:#fafafa}
#bagbar .lab{color:#fafafa;text-shadow:0 1px 0 #000}
#shopHudBtn{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:6;padding:9px 14px;font-size:11px;background:#1a1b15;border:1px solid #ff5b1f;color:#ff5b1f}
/* fixes Oct 20: shop button was stretched top to bottom by the .hudbtn top rule; secondary text was too dim */
#shopHudBtn{top:auto;height:auto;width:auto;writing-mode:horizontal-tb}
:root{--nj-grey:#c9c3b2}
.support small,.shoprow .tx small,.note,.fact,.howto div,.reward small,.post small{color:#c9c3b2}
/* Reactor Shop button under the HUD bar, top centre (Nina) */
#shopHudBtn{bottom:auto;top:calc(66px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%)}
@media (max-width:480px){ #shopHudBtn{top:calc(74px + env(safe-area-inset-top,0px));font-size:11px;padding:7px 10px} #combo{top:calc(112px + env(safe-area-inset-top,0px))} }
#combo{top:calc(104px + env(safe-area-inset-top,0px))}
/* Reactor Shop button: top left, in line with the HUD bar (Nina) */
#shopHudBtn{left:max(14px,env(safe-area-inset-left,0px));transform:none;top:calc(12px + env(safe-area-inset-top,0px));height:52px;display:inline-flex;align-items:center}
#combo{top:calc(78px + env(safe-area-inset-top,0px))}
@media (max-width:480px){ #shopHudBtn{top:auto;bottom:calc(120px + env(safe-area-inset-bottom,0px));left:max(14px,env(safe-area-inset-left,0px));height:auto} body.lefty #shopHudBtn{left:auto;right:max(14px,env(safe-area-inset-right,0px))} }

/* Reactor Shop button lives inside the HUD bar: same height as the chips (Nina: "should be same size") */
#shopHudBtn{position:static;transform:none;top:auto;left:auto;bottom:auto;height:auto;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;
  padding:6px 14px;min-width:0;font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#ff5b1f;background:#1a1b15;border:1px solid #ff5b1f;border-radius:0;box-shadow:none;order:-1}
#shopHudBtn:active{opacity:.85}
@media (max-width:480px){ #shopHudBtn{position:static;bottom:auto;left:auto;padding:5px 8px;font-size:11px;letter-spacing:.8px} }

/* hero stat: plastic destroyed, the number the whole game is about (Nina: make it more prominent, add notes) */
.herostat{margin:12px 0 0;padding:14px 12px 10px;background:var(--panel-deep);border:1px solid #5dba63;text-align:center}
.herostat small{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#5dba63}
.herostat b{display:block;font-family:var(--font-mono);font-weight:700;font-size:40px;line-height:1.05;color:#fafafa;margin-top:4px;font-variant-numeric:tabular-nums}
.herostat span{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#c9c3b2;margin-top:2px}
.herostat .note{margin:8px 0 0;font-size:12px;line-height:1.45;color:#c9c3b2;text-align:center}
.gearstats{margin-top:8px}

/* gear chips grouped under labels */
.gearlist{display:block}
.ggroup{margin-top:10px}.ggroup:first-child{margin-top:6px}
.ggroup small{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#7d858d;margin:0 0 5px}
.grow{display:flex;flex-wrap:wrap;gap:6px}
.ghelp{margin:0 0 6px;font-size:11px;line-height:1.4;color:#c9c3b2}
/* notes under buttons: brighter and a touch larger (Nina: font could be more visible) */
.note,#wheelNote,.herostat .note,.ghelp,.support small{color:#e8e3d4;font-size:13px;line-height:1.5}
.ghelp,.support small{font-size:12px}

/* wheel polish */
.wheelwrap{overflow:visible}
.wheelpin{transform-origin:50% 0;z-index:2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.wheelpin.tick{animation:pinwob .12s ease-out}
@keyframes pinwob{0%{transform:translateX(-50%) rotate(0)}40%{transform:translateX(-50%) rotate(-16deg)}100%{transform:translateX(-50%) rotate(0)}}
.panel.wflash{animation:wflash .6s ease-out}
@keyframes wflash{0%{box-shadow:0 0 0 0 rgba(255,91,31,.9)}100%{box-shadow:0 0 0 24px rgba(255,91,31,0)}}
#skipBtn[hidden]{display:none}

/* leaderboard tabs, weekly badge, own-row highlight */
.boardtabs{display:flex;gap:8px;margin:0 0 8px}
.btab{flex:1;font-family:var(--font-mono);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:1.2px;border-radius:0;
  background:transparent;color:var(--ink);border:2px solid var(--panel-edge);padding:8px 6px;cursor:pointer}
.btab.on{border-color:#ff5b1f;color:#ff5b1f;box-shadow:inset 0 0 0 1px #ff5b1f}
.top5{display:inline-block;font-style:normal;font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:1px;
  background:#ff5b1f;color:#fff;padding:1px 5px;margin-left:4px;vertical-align:middle;border-radius:0}
.lbrow.me{border-color:#ff5b1f;box-shadow:inset 0 0 0 1px #ff5b1f}
.boardme{margin:0 0 6px;font-family:var(--font-mono);font-size:12px;letter-spacing:.5px}
.boardme b{display:block;font-weight:700}
.boardme span{display:block;color:#ff5b1f;font-weight:700;margin-top:2px}

/* power-up bank: tappable slots on the right side above the dash button */
#bank{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(228px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px;z-index:6}
body.lefty #bank{right:auto;left:max(14px,env(safe-area-inset-left,0px))}
.bankslot{width:56px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#1a1b15;border:1px solid #2a2b24;color:#5f5c52;border-radius:0;padding:0;font-family:var(--font-mono)}
.bankslot span{font-size:20px;line-height:1}.bankslot small{font-size:11px;letter-spacing:.8px;text-transform:uppercase}
.bankslot.on{border-color:var(--c,#5dba63);color:#fafafa;box-shadow:0 0 12px color-mix(in srgb,var(--c,#5dba63) 45%,transparent);cursor:pointer}
.bankslot.on:active{transform:translateY(1px)}
@media (max-width:480px){ #bank{bottom:calc(196px + env(safe-area-inset-bottom,0px))} .bankslot{width:48px;height:46px} .bankslot span{font-size:17px} }

/* refinery panel */
.reflab{display:block;margin:14px 0 6px;font-family:var(--font-mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#d8d3c4}
.reflab span{color:#5dba63;font-size:16px;font-weight:700}
#refAmt{width:100%;accent-color:#5dba63;margin:0}
.refauto{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;font-size:14px;line-height:1.45;color:#fafafa}
#refineryV .note{font-size:14px;line-height:1.5;color:#d8d3c4}
.refauto input{accent-color:#5dba63;margin-top:2px}

/* Reactor Shop pulses when something is affordable (Nina, Oct 20 call) */
#shopHudBtn.can{animation:shopcan 1.1s ease-in-out infinite alternate}
@keyframes shopcan{from{box-shadow:0 0 0 rgba(255,91,31,0);background:#1a1b15}to{box-shadow:0 0 16px #ff5b1f;background:#2a1a12}}

/* Round-complete header: rank badge and title with some swagger (Nina, Oct 20 call: "Fortnite level") */
.rhead{display:flex;align-items:center;gap:16px;margin:4px 0 14px;padding-right:40px}
.rhead .rtext{min-width:0}
.rhead h2:where(:not(.h1)){margin:0 0 2px}
.rhead :is(h1,h2:where(.h1)){margin:0;padding:2px 10px 4px 0;font-family:var(--font-game);font-weight:700;font-style:italic;font-size:clamp(26px,7vw,38px);line-height:1;text-transform:uppercase;letter-spacing:.5px;text-wrap:balance;overflow:visible;
  color:#fff3c4;text-shadow:0 3px 0 #141a12,0 0 14px rgba(255,217,107,.35),0 0 2px #fff}
#resultV .rank{position:static;width:96px;height:96px;flex:0 0 96px;border:0;border-radius:0;display:grid;place-items:center;align-content:center;
  clip-path:polygon(50% 0,100% 12%,96% 70%,50% 100%,4% 70%,0 12%);transform:rotate(-6deg);
  box-shadow:none;animation:rankpop .6s cubic-bezier(.2,1.4,.4,1) both;position:relative}
#resultV .rank::before{content:'';position:absolute;inset:5px;clip-path:polygon(50% 0,100% 12%,96% 70%,50% 100%,4% 70%,0 12%);background:rgba(10,14,12,.28)}
#resultV .rank i{position:relative;font-style:normal;font-family:var(--font-display);font-size:52px;line-height:1;color:#fff;
  text-shadow:0 3px 0 #141a12,0 0 14px rgba(255,255,255,.35)}
#resultV .rank em{position:relative;font-style:normal;font-family:var(--font-mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.85);margin-top:2px}
#resultV .rank.S{background:linear-gradient(160deg,#ffe08a 0%,#ff8a3d 45%,#ff5b1f 100%);filter:drop-shadow(0 0 18px rgba(255,140,61,.65))}
#resultV .rank.A{background:linear-gradient(160deg,#9ff0e0 0%,#2fa392 55%,#1f7a6d 100%);filter:drop-shadow(0 0 16px rgba(47,163,146,.6))}
#resultV .rank.B{background:linear-gradient(160deg,#b6f0a8 0%,#5dba63 55%,#2f7a3a 100%);filter:drop-shadow(0 0 12px rgba(93,186,99,.5))}
#resultV .rank.C{background:linear-gradient(160deg,#fff3c4 0%,#e0b23a 60%,#a67c1c 100%);filter:drop-shadow(0 0 10px rgba(224,178,58,.45))}
#resultV .rank.D{background:linear-gradient(160deg,#d9d2c2 0%,#a89a7d 60%,#6b5f4a 100%)}
#resultV .rank.S::after{content:'';position:absolute;inset:-8px;pointer-events:none;background:
  radial-gradient(circle at 20% 30%,rgba(255,255,255,.9) 0 2px,transparent 3px),
  radial-gradient(circle at 80% 25%,rgba(255,255,255,.8) 0 1.5px,transparent 2.5px),
  radial-gradient(circle at 70% 85%,rgba(255,255,255,.8) 0 2px,transparent 3px);animation:sparkle 1.6s ease-in-out infinite alternate}
@keyframes rankpop{0%{transform:scale(.2) rotate(-40deg);opacity:0}60%{transform:scale(1.12) rotate(-2deg);opacity:1}100%{transform:scale(1) rotate(-6deg)}}
@keyframes sparkle{from{opacity:.35}to{opacity:1}}
@media (max-width:480px){ #resultV .rank{width:78px;height:78px;flex-basis:78px} #resultV .rank i{font-size:42px} .rhead{gap:12px} }

/* game titles in the digital face: start screen and brief (Nina: "can be a bit digital") */
#startV .panel>:is(h1,h2:where(.h1)),#briefV .panel>:is(h1,h2:where(.h1)){font-family:var(--font-game);font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:1px;font-size:clamp(30px,8vw,46px);line-height:1;
  color:#fff3c4;text-shadow:0 3px 0 #141a12,0 0 16px rgba(93,186,99,.35)}
#resultV .rank i{font-family:var(--font-game);font-weight:700}

/* bag bar bottom-left, out of the way of the thumb (Nina, Oct 20: move it to the left) */
#bagbar{left:max(14px,env(safe-area-inset-left,0px));transform:none;width:min(46vw,240px);text-align:left}
#bagbar .lab{text-align:left}

/* rank reveal after posting (Nina, Oct 20: we need to see a long ranking thing) */
.boardme.reveal{border:1px solid #5dba63;padding:12px 12px 10px;margin-bottom:10px;background:#141a12}
.rankbig{text-align:center;margin-bottom:8px}
.rankbig small{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#d8d3c4}
.rankbig b{display:block;font-family:var(--font-game);font-style:italic;font-weight:700;font-size:64px;line-height:1;color:#fff3c4;text-shadow:0 4px 0 #141a12,0 0 18px rgba(93,186,99,.45);margin:4px 0}
.rankbig b.done{animation:rankpop .5s cubic-bezier(.2,1.4,.4,1) both;color:#ffd96b}

/* board rows with a second line (Nina: not informative enough) */
.lbrow{grid-template-columns:28px 1fr auto;align-items:center}
.lbrow span small{display:block;font-size:11px;color:#a8a393;margin-top:2px;letter-spacing:.2px}
.lbrow em{text-align:right}.lbrow em small{display:block;font-size:11px;color:#a8a393;letter-spacing:1.5px;text-transform:uppercase;font-weight:400}
/* medallion: extruded plate with a bevel so it pops (Nina: popped out and 3D) */
#resultV .rank{filter:none}
#resultV .rank::after{content:'';position:absolute;inset:0;clip-path:polygon(50% 0,100% 12%,96% 70%,50% 100%,4% 70%,0 12%);
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 38%,rgba(0,0,0,0) 50%,rgba(0,0,0,.28) 100%);pointer-events:none;animation:none}
.rankwrap{position:relative;flex:0 0 auto;filter:drop-shadow(0 10px 10px rgba(0,0,0,.55))}
.rankwrap::before{content:'';position:absolute;left:6px;top:10px;width:96px;height:96px;clip-path:polygon(50% 0,100% 12%,96% 70%,50% 100%,4% 70%,0 12%);background:#2a1a0c;transform:rotate(-6deg)}
.rankwrap.S::before{background:#8a3a10}.rankwrap.A::before{background:#14524a}.rankwrap.B::before{background:#1f4f26}.rankwrap.C::before{background:#6b4a10}.rankwrap.D::before{background:#4a4036}
@media (max-width:480px){ .rankwrap::before{width:78px;height:78px} }

/* Mark ladder in the shop (Apollo: show me what Mark 5 looks like) */
.marklad{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:-2px 0 10px}
.markcell{text-align:center;background:#141a12;border:1px solid #2a3326;padding:4px 2px 6px}
.markcell canvas{width:100%;max-width:72px;height:auto;image-rendering:pixelated;opacity:.28;filter:grayscale(1)}
.markcell.on canvas{opacity:1;filter:none}.markcell.cur{border-color:#5dba63;box-shadow:0 0 0 1px #5dba63 inset}
.markcell small{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#a8a393;margin-top:2px}
.markcell.on small{color:#fafafa}

/* combo countdown bar (Apollo: a counter that tells people how long they have) */
#combo{min-width:64px}
#comboBar{display:block;height:4px;margin:3px auto 0;width:100%;background:#ffd96b;box-shadow:0 0 6px #ffd96b;transition:width .08s linear}

/* =====================================================================================================
   Refinement pass (Nina: "can this be tighter?", text too small, labels overlapping).
   One spacing scale for every overlay: 4 / 8 / 12. Labels are 12 px mono caps (HUD chips 11 px, they
   share one row). Body text is #e8e3d4 or #c9c3b2 on #22231c or darker, at least 9:1.
   ===================================================================================================== */
:root{--sp1:4px;--sp2:8px;--sp3:12px;--lab:12px;--muted:#c9c3b2}
.panel{padding:14px 14px 16px}
.panel :is(h1,h2:where(.h1)){font-size:24px;line-height:1.1;margin:0 0 var(--sp1)}
.panel h2:where(:not(.h1)){font-size:var(--lab);letter-spacing:1.2px;margin:0 0 var(--sp2);line-height:1.3}
/* every small label: same size, same tracking, readable grey */
.chip small,.who,.charrow small,.namerow label,.gearstats small,.stat small,.post label,.tutbody small,.fuelpill,.herostat small,
.ggroup small,.activity,.markcell small,.rankbig small,.lbrow em small,.lbrow span small,.reward small,.gchip,.reflab,.boardme,.roundtag{font-size:var(--lab)}
.who,.charrow small,.namerow label,.gearstats small,.stat small,.post label,.herostat small,.ggroup small,.markcell small,.lbrow em small,.reward small{letter-spacing:.8px}
.ggroup small,.markcell small,.lbrow em small,.lbrow span small,.reward small{color:var(--muted)}
.gchip{letter-spacing:.4px;padding:4px 7px}
.top5{font-size:11px;padding:1px 5px}
.link{font-size:var(--lab);letter-spacing:.8px}
.note,.ghelp,.fact,.support small,.herostat .note,#wheelNote{font-size:var(--lab);line-height:1.4;color:#e8e3d4}
.note{margin:var(--sp2) 0 0}
.fact{margin:var(--sp2) 0 0}
.howto div,.howrp div{font-size:13px;line-height:1.4;padding:var(--sp2) var(--sp3)}
.howto{gap:var(--sp2);margin-top:var(--sp2)}.howrp{gap:var(--sp2)}
.howto b,.howrp b{font-size:var(--lab)}
.go{font-size:13px;padding:12px 16px;margin-top:var(--sp3)}
.alt{font-size:var(--lab);padding:11px 8px}
.row2{gap:var(--sp2);margin-top:var(--sp2)}
.buy{font-size:var(--lab);padding:9px 12px;min-height:40px}
.say{padding:var(--sp2) var(--sp3);margin:var(--sp2) 0;gap:10px}
.say p{font-size:14px;line-height:1.4}
.say .who{margin-bottom:var(--sp1)}
.say .face.julian,.say .face{width:40px;height:40px;flex-basis:40px}
.gear{margin:var(--sp2) 0 0;padding:var(--sp2) var(--sp3)}
.gearstats{margin-top:var(--sp2)}
.gearstats b{font-size:18px}
.gearlist{margin:var(--sp2) 0 0}
.ggroup{margin-top:var(--sp2)}
.ghelp{margin:0 0 var(--sp1)}
.herostat{margin:var(--sp2) 0 0;padding:var(--sp2) var(--sp3)}
.herostat b{font-size:34px;margin-top:2px}
.herostat .note{margin:var(--sp1) 0 0}
.stats{gap:var(--sp2);margin:var(--sp2) 0}
.stat{padding:var(--sp2) 6px}.stat b{font-size:19px}
.charrow{margin:var(--sp2) 0 0}
.charpick{gap:var(--sp1);margin-top:var(--sp1)}
.charbtn{flex:1 0 56px;padding:var(--sp1) 2px;gap:2px}
.charbtn canvas{width:40px;height:40px}.charbtn span{font-size:var(--lab)}
.namerow{margin-top:var(--sp2);gap:var(--sp1) var(--sp2)}
.namerow input{font-size:16px;padding:8px 10px}   /* 16 px stops iOS zooming the page on focus */
.namerow .alt{font-size:var(--lab);padding:9px 10px}
.roundtag{margin:var(--sp2) 0 0}.roundtag strong{font-size:14px}
.shoprow{padding:var(--sp2) var(--sp3);margin:var(--sp1) 0;gap:var(--sp3)}
.shoprow .tx b{font-size:14px}.shoprow .tx small{font-size:var(--lab);line-height:1.35}
.reward{padding:var(--sp2) var(--sp3);margin:var(--sp1) 0;font-size:13px}
.lbrow{padding:var(--sp2) var(--sp3);margin:var(--sp1) 0}
.boardtabs{margin:0 0 var(--sp2)}.btab{font-size:var(--lab);padding:10px 6px}
.unlock{padding:var(--sp2) var(--sp3);margin:var(--sp2) 0 0}.unlock small{font-size:var(--lab)}
.post{margin:var(--sp2) 0 0;padding:var(--sp2) var(--sp3)}
.postrow{margin-top:var(--sp1)}
.postrow input{font-size:16px;padding:8px 10px}
.post small{font-size:var(--lab);color:#e8e3d4;margin-top:var(--sp1);min-height:0}.post small:empty{display:none}
.refauto{font-size:14px;margin:var(--sp3) 0 0}
#refineryV .note{font-size:14px;margin-top:var(--sp2)!important}
.wheelwrap{margin:var(--sp3) auto 0}
.panel .x{width:36px;height:36px}

/* round complete: one phone screen */
.rhead{gap:var(--sp3);margin:0 0 var(--sp1);padding-right:44px}
#resultV h2:where(:not(.h1)),#resultV :is(h1,h2:where(.h1)){padding-left:0}
.rhead :is(h1,h2:where(.h1)){font-size:clamp(24px,7vw,32px);padding:0 4px 3px 0}
.rhead h2:where(:not(.h1)){margin:0 0 var(--sp1)}
#resultV .rank{width:68px;height:68px;flex-basis:68px;left:0;top:0}#resultV .rank i{font-size:36px}#resultV .rank em{font-size:11px;letter-spacing:2px;margin-top:0}
.rankwrap::before{width:68px;height:68px;left:4px;top:7px}
#resultV .say{margin:var(--sp2) 0}
#resultV .support{display:grid;grid-template-columns:1fr auto;gap:var(--sp2) var(--sp3);padding:var(--sp2) var(--sp3);margin:var(--sp2) 0 0}
.support b{font-size:14px}.support small{display:block;line-height:1.35}
#resultV .stats{grid-template-columns:repeat(3,1fr);margin:var(--sp2) 0 0}
#resultV .stat{padding:var(--sp2) 4px}#resultV .stat b{font-size:18px}#resultV .stat small{display:block;letter-spacing:.3px;line-height:1.2}
#resultV .go{margin-top:var(--sp2)}
#resultV #rUnlocks .note{margin:var(--sp1) 0 0;text-align:left}
@media (max-width:480px){
  .veil{padding:8px}
  .panel{max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
  .chip small{font-size:11px;letter-spacing:.3px}
}

/* refinement pass, part 2: list cards, sticky panel header, shop header, mark ladder, brief */
.howto div,.howrp div{display:block;position:relative;padding:var(--sp2) var(--sp3) var(--sp2) 44px;grid-template-columns:none}
.howto span,.howrp span{position:absolute;left:var(--sp3);top:var(--sp2);width:24px;text-align:center}
.howto b,.howrp b{display:block;margin:0 0 2px;font-size:var(--lab);letter-spacing:1px}
/* header band stays put while the panel scrolls, so the close button never sits on top of a price */
.panel:has(>.x){padding-top:0}
.panel:has(>.x)>h2:where(:not(.h1)){position:sticky;top:0;z-index:2;background:var(--panel);margin:0 -14px var(--sp2);padding:14px 56px var(--sp2) 14px}
.panel>.x{position:sticky;top:var(--sp2);z-index:3;margin:var(--sp2) 0 -44px 0;box-shadow:none}
#shopV h2:where(:not(.h1)){display:flex;justify-content:space-between;align-items:center;gap:var(--sp2);padding-right:56px}
#shopV .fuelpill{float:none;margin:0;font-size:14px;font-weight:700;padding:3px 10px;color:#fafafa;border-color:var(--nj-green)}
#shopV .panel>:is(h1,h2:where(.h1)),#shopV :is(h1,h2:where(.h1)){font-size:18px;margin:var(--sp3) 0 var(--sp2)}
#shopV #boostNote{margin:0 0 var(--sp2)!important}
.marklad{gap:4px;margin:var(--sp1) 0 var(--sp2)}
.markcell{padding:var(--sp1) 2px var(--sp1);min-width:0}
.markcell small{letter-spacing:0;line-height:1.25;color:var(--muted);margin-top:2px}
.markcell.on small{color:#fafafa}
.lbrow b{color:var(--muted)}.lbrow.top b{color:#ff8a5c}
.lbrow span small{font-size:var(--lab);line-height:1.3}
.bankslot{color:#8a867a}
.refauto input{width:22px;height:22px;flex:0 0 22px;margin:0}
.reflab span{font-size:16px}
/* start screen: Start round stays in reach while the long panel scrolls */
#startBtn{position:sticky;bottom:0;z-index:3;box-shadow:0 0 0 var(--sp2) var(--panel)}
/* the lobby opens this panel at the character row, about 1,400 px below Start: Start pins to the top once scrolled past (first-session findings, Nov 2) */
body.lobby #briefV #startBtn{top:-14px}
body.lobby #briefV .panel :is(input,select){scroll-margin-top:64px}
/* openCharacters() scrolls by this row's top edge: the extra padding, cancelled by the margin, lands the row just below the pinned Start */
body.lobby #briefV .charrow{margin-top:-60px;padding-top:60px;pointer-events:none}
body.lobby #briefV .charrow>*{pointer-events:auto}
.herostat b{font-size:34px}
#shopV h2:where(:not(.h1)),#shopV .panel>h2:where(:not(.h1)){padding-right:68px}
.marklad{grid-template-columns:repeat(5,minmax(0,1fr))}
.markcell small{white-space:nowrap;letter-spacing:-.3px}.markcell{padding-left:0;padding-right:0}

/* HUD at phone width: five chips on one row, labels at 10 px (the one place below 12 px, they share 375 px with the numbers),
   units set small beside the numbers, everything under the bar pushed clear of it */
.chip .u{font-style:normal;font-size:11px;font-weight:400;letter-spacing:0;opacity:.85}
@media (max-width:480px){
  #hud{align-items:stretch}
  .chip{padding:5px 3px;line-height:1.15}
  .chip b{font-size:15px;white-space:nowrap}
  .chip small{font-size:11px;letter-spacing:.2px;line-height:1.15}
  #goalChip b{font-size:13px;white-space:nowrap;line-height:1.1}
  #shopHudBtn{font-size:11px;letter-spacing:.4px;padding:5px 6px;line-height:1.15;text-align:center}
  #combo{top:calc(100px + env(safe-area-inset-top,0px))}
  #buffs{top:calc(100px + env(safe-area-inset-top,0px))}
  #count{top:calc(96px + env(safe-area-inset-top,0px))}
  #tut{top:calc(104px + env(safe-area-inset-top,0px))}
  #toast{bottom:calc(100px + env(safe-area-inset-bottom,0px))}
  .bankslot small{font-size:11px;letter-spacing:.2px}
  #bagbar .lab{font-size:11px;letter-spacing:.8px}
  #dashBtn small{font-size:11px}
}
.buff{font-size:12px}
.tutbody small{font-size:var(--lab)}.tutbody p{font-size:14px}.tutskip{font-size:var(--lab)}
#resultV .panel{padding-top:14px}
#resultV .panel>.x{margin-bottom:-36px}
.say .who{font-size:var(--lab)}
.pips{font-size:var(--lab)}
#resultV .rank em{font-size:var(--lab);letter-spacing:1.5px}
.herostat span{font-size:var(--lab)}

/* save by email (Nina, Oct 20): optional, no password */
.saverow{display:flex;gap:6px;align-items:center;margin-top:10px;flex-wrap:wrap}
.saverow label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#a8a393;flex:0 0 100%}
.saverow input{flex:1;min-width:150px;font:inherit;font-size:14px;padding:7px 10px;border:2px solid var(--panel-edge);background:#f2ead6;color:#2a2118}
.saverow .alt{flex:0 0 auto;padding:7px 12px;font-size:11px}
.saverow small{flex:0 0 100%;font-size:11px;line-height:1.4;color:#a8a393}
.saverow .link{flex:0 0 100%;background:none;border:0;padding:4px 0 0;text-align:left;font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;color:#5dba63;text-decoration:underline;cursor:pointer}
.restorerow{flex:0 0 100%;display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px}
.restorerow input{flex:1;min-width:150px}
.restorerow .buy{flex:0 0 auto;padding:8px 12px;font-size:11px}

/* Julian's voice with prominence (Nina, Oct 20): the sustainability fact and the teaching get his portrait and a card */
.voice{display:flex;gap:12px;align-items:flex-start;margin:10px 0 0;padding:12px 14px;background:#141a12;border:1px solid #2fa392;border-left:4px solid #2fa392}
.voice .face{width:44px;height:44px;flex:0 0 44px;border-radius:0;border:2px solid #2fa392}
.voice>div{min-width:0;flex:1}
.voice small{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#5dba63;margin-bottom:4px}
.voice .fact{margin:0;border:0;padding:0;font-size:15px;line-height:1.45;color:#fafafa;font-weight:400}
.voice.teach{border-color:#e0b23a;border-left-color:#e0b23a;background:#1a1812}
.voice.teach small{color:#e0b23a}
.voice.teach .fact{font-family:var(--font-body,inherit);font-style:italic;font-size:16px}

/* now-playing credit (Kemar, Oct 20) */
.credit{margin:6px 0 0;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#a8a393}
.credit::before{content:'\266B  ';color:#5dba63}

/* =====================================================================================================
   Apollo QA pass (Oct 20): HUD that never looks stuck, two rows on phones, nothing wraps, notices in the
   upper third, bag bar zone reserved, labelled controls, power-up counts.
   ===================================================================================================== */
#hud{flex-wrap:wrap;align-items:stretch;row-gap:4px}
.hudrow{display:contents}
.chip,.chip b,.chip small,.hudbtn,.bankslot,.bankslot small,#bagbar .lab,#dashBtn small,#pauseBtn small,#mute small{white-space:nowrap;font-variant-numeric:tabular-nums}
.chip{display:flex;flex-direction:column;justify-content:center;min-width:0}
.chip b{min-width:3ch}
.chip small.sub{text-transform:none;letter-spacing:0;opacity:.95;color:#7fe8d4;font-size:11px;margin-top:0;min-height:0;line-height:1.1}
.chip small.sub:empty{display:none}
.chip small .ls{display:none}
#timeChip{min-width:64px}#scoreChip{min-width:84px}#fuelChip{min-width:110px}#roundChip{min-width:120px}#goalChip{min-width:124px}
#roundChip b{font-size:13px;letter-spacing:.2px}
#goalChip b{font-size:13px;letter-spacing:.2px}
#goalChip.here b{color:#ffd96b;animation:herepulse .8s ease-in-out infinite alternate}
@keyframes herepulse{from{opacity:.55}to{opacity:1}}
#hFuel.bump{animation:rpbump .5s ease-out}
@keyframes rpbump{0%{transform:scale(1.25);color:#7fe8d4}100%{transform:scale(1);color:inherit}}
@media (max-width:480px){
  #hud{gap:4px;row-gap:4px;padding-top:8px}
  .hudrow{display:flex;gap:4px;width:100%;justify-content:center;align-items:stretch}
  .hudrow .chip{flex:1 1 0;min-width:0;padding:5px 4px}
  .chip small .lw{display:none}.chip small .ls{display:inline}
  #hCity{display:none}
  #shopHudBtn{flex:0 0 auto}
  #timeChip{flex:0 0 64px}#fuelChip{flex:1 1 0}#scoreChip{flex:1 1 0}
  #roundChip b,#goalChip b{font-size:12px}
  /* everything under the two-row bar starts lower */
  #combo{top:calc(142px + env(safe-area-inset-top,0px))}
  #count{top:calc(132px + env(safe-area-inset-top,0px))}
  #buffs{top:calc(204px + env(safe-area-inset-top,0px))}
  #tut{top:calc(134px + env(safe-area-inset-top,0px))}
}
/* power-up timers sit under the countdown number, never on it (desktop: HUD is one row) */
@media (min-width:481px){ #buffs{top:calc(150px + env(safe-area-inset-top,0px))} #count{top:calc(98px + env(safe-area-inset-top,0px))} #combo{top:calc(96px + env(safe-area-inset-top,0px))} }
/* toasts and Julian pop-ups: upper third of the screen, above the collector, one at a time */
#toast{bottom:auto;top:max(210px,27vh);white-space:normal;max-width:min(92vw,460px);text-align:center;overflow:visible;text-overflow:clip}
#toast.jb{text-align:left}
body.tuton #toast{top:max(236px,30vh)}
body.tuton #buffs{top:calc(236px + env(safe-area-inset-top,0px))}
/* bag bar: a reserved zone bottom left; label on one line, free to run past the bar */
#bagbar .lab{white-space:nowrap;overflow:visible;width:max-content}
#bagbar.full .lab{color:#ffd96b}
/* labelled corner buttons */
#pauseBtn,#mute{width:46px;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;letter-spacing:0;border-radius:0}
#pauseBtn span{font-size:12px;letter-spacing:-2px;line-height:1}#mute span{font-size:15px;line-height:1}
#pauseBtn small,#mute small{font-family:var(--font-mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:#c9c3b2;line-height:1}
/* power-up bank: one button per kind with a held count; greyed at 0 */
#bankWrap{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(228px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-end;gap:4px;z-index:6}
body.lefty #bankWrap{right:auto;left:max(14px,env(safe-area-inset-left,0px));align-items:flex-start}
#bank{position:static;right:auto;bottom:auto;gap:4px}
.banklab{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#c9c3b2;text-shadow:0 1px 0 #000;padding-right:2px}
.bankslot{position:relative;width:58px;height:46px;gap:1px;color:#6f6c62}
.bankslot span{font-size:18px;line-height:1;filter:grayscale(1);opacity:.45}
.bankslot small{font-size:11px;letter-spacing:.4px}
.bankslot .n{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:11px;background:#2a2b24;color:#8a867a;border:1px solid #3a3b32}
.bankslot.on span{filter:none;opacity:1}
.bankslot.on .n{background:var(--c,#5dba63);color:#1a1b15;border-color:#1a1b15}
.bankslot.on:active{transform:translateY(1px)}
@media (max-width:480px){ #bankWrap{bottom:calc(196px + env(safe-area-inset-bottom,0px))} .bankslot{width:52px;height:42px} .bankslot span{font-size:16px} .bankslot small{font-size:11px} }
/* reset progress: first tap arms the button in red, second tap wipes */
.link.armed{background:#b4552f;color:#fff;border:1px solid #ff8a65;padding:4px 8px}

/* results card voice rules (Apollo approved, Oct 20): one Julian voice per card, verbatim quotes carry a source tag,
   sourced facts carry theirs, round facts are a neutral list */
.voice .src{display:block;margin-top:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#a8a393}
.voice .src:empty{display:none}
.voice.why{border-color:#2fa392;border-left-color:#2fa392;background:#141a12}
.rnotes{text-align:left;margin:var(--sp2) 0 0;color:#e8e3d4;line-height:1.5}
.rnotes span{display:block}

/* radio row (Apollo, Oct 20): track skip + volume beside the now-playing credit */
.radio{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 0}
.radio .credit{margin:0;flex:1 1 160px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio .rbtn{background:#17222b;color:#f2ead6;border:1px solid #2f3f44;border-radius:6px;padding:2px 8px;font-size:12px;line-height:18px;cursor:pointer}
.radio .rbtn:active{background:#2fa392;color:#0f1a1e}
.radio .vol{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#a8a393}
.radio .vol input{width:90px;accent-color:#5dba63}

/* in-game radio card above the Radio button */
.radiohud{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:40;background:rgba(14,22,25,.94);border:1px solid #2f3f44;border-radius:10px;padding:10px 12px;width:min(320px,calc(100vw - 32px));display:flex;flex-direction:column;gap:8px;color:#f2ead6}
.radiohud b{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#5dba63}
.radiohud .radio{margin:0}
body.lefty .radiohud{right:auto;left:max(16px,env(safe-area-inset-left,0px))}

/* ===== Apollo QA pass 3 (Oct 20): HUD band, progress cards, reward ladder, slot labels ===== */
/* the HUD sits on a dark band so the blimp, labels and building tops never show through or clip against the chips */
#hud{background:linear-gradient(180deg,rgba(10,14,12,.94) 0%,rgba(10,14,12,.88) 70%,rgba(10,14,12,0) 100%);padding-bottom:18px}
.chip{background:rgba(17,20,23,.97)}
#shopHudBtn{background:#111417}
/* next unlock: a progress card in the house style */
.progcard{display:block;background:var(--panel-deep);border:1px solid var(--panel-edge);padding:var(--sp2) var(--sp3);margin:var(--sp2) 0 0;text-align:left}
.progcard .lab,.ladderbox .lab{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#5dba63;margin-bottom:4px}
.progcard .name{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#fafafa}
.progcard .name span{font-size:18px;line-height:1}
.pbar{position:relative;height:16px;background:#0b0e11;border:1px solid #2a2b24;margin:6px 0 4px;overflow:hidden}
.pbar i{position:absolute;left:0;top:0;bottom:0;background:#5dba63;transition:width .3s}
.pbar b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:700;color:#fafafa;letter-spacing:.5px;text-shadow:0 1px 0 #000;font-variant-numeric:tabular-nums;white-space:nowrap}
.progcard .togo{font-family:var(--font-mono);font-size:11px;color:#fafafa;font-variant-numeric:tabular-nums}
.progcard .sub{display:block;font-size:11px;color:#a8a393;margin-top:2px}
/* real-reward ladder on lifetime RP: one row per item, a bar on the next one, Earned on the ones reached */
.ladderbox{background:var(--panel-deep);border:1px solid var(--panel-edge);padding:var(--sp2) var(--sp3);margin:var(--sp2) 0 0}
.ladder{display:flex;flex-direction:column;gap:2px}
.lrow{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;padding:5px 0;border-top:1px solid #2a2b24;font-size:12px;color:#fafafa}
.lrow:first-child{border-top:0}
.lrow .ic{font-size:18px;line-height:1;text-align:center}
.lrow .nm{min-width:0}
.lrow .nm b{display:block;font-size:12px;line-height:1.3}
.lrow .nm small{display:block;font-size:11px;color:#a8a393;line-height:1.3}
.lrow .at{font-family:var(--font-mono);font-size:11px;color:#a8a393;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.lrow.done .at{color:#5dba63}
.lrow.locked .ic{filter:grayscale(1);opacity:.6}
.lrow.next .at{color:#ffd96b}
.lrow .pbar{grid-column:1/-1;margin:2px 0 0;height:14px}
.ladderbox .claims{text-align:left;margin:var(--sp2) 0 0;font-size:11px;color:#a8a393}
#rewards .ladderbox{margin:0 0 var(--sp2)}
.herostat .alltime{margin:var(--sp1) 0 0;font-size:12px;color:#c9c3b2}
.herostat .alltime b{color:#fafafa;font-variant-numeric:tabular-nums}
.bankslot small{letter-spacing:.3px}
.buff em{font-style:normal;font-variant-numeric:tabular-nums;color:#c9c3b2;font-weight:400}
#wheelNote .odds{display:block;margin-top:4px;font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;color:#c9c3b2;font-variant-numeric:tabular-nums}
.lrow.pending .at{color:#7fe8d4}
.herostat .alltime b{display:inline;font-size:inherit;line-height:inherit;margin:0;font-family:var(--font-mono)}
/* phones: buff timers on one row under the countdown; toasts start under them, so the two never meet */
@media (max-width:480px){
  #buffs{flex-direction:row;flex-wrap:wrap;gap:4px;max-width:calc(100vw - 32px)}
  .buff{padding:3px 7px;font-size:11px}.buff i{width:28px}
  #toast{top:max(258px,32vh)}
  body.tuton #toast{top:max(276px,34vh)}
}

/* corner buttons (Apollo screenshot: the pause icon read as a stop square and the label spilled out of the box).
   Pause and Radio share one size and style; the pause icon is two drawn bars; the bag bar sits above with a clear gap */
#pauseBtn,#mute{width:64px;height:48px;box-sizing:border-box;padding:4px 4px 5px;gap:3px;overflow:hidden;border:1px solid #2a2b24;background:#111417;color:#fafafa}
#pauseBtn small,#mute small{font-size:11px;letter-spacing:.8px;white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:100%}
#pauseBtn .pbars{display:flex;gap:4px;align-items:center;justify-content:center;height:16px;letter-spacing:0}
#pauseBtn .pbars i{display:block;width:5px;height:16px;background:#fafafa}
#mute span{font-size:16px;line-height:16px;height:16px}
#bagbar{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
@media (max-width:480px){ #bagbar{bottom:calc(92px + env(safe-area-inset-bottom,0px))} #pauseBtn,#mute{width:60px;height:46px} }

/* radio: mute on every row; DASH steps aside while the in-game radio card is open */
.radio .rmute{margin-left:auto}
body.radioopen #dashBtn{visibility:hidden}
/* round milestones (Kemar, Apollo): a celebration card on the results card every 20 rounds, bigger every 100 */
.milestone{position:relative;overflow:hidden;margin:var(--sp2) 0 0;padding:var(--sp3);background:linear-gradient(180deg,#1f2a1a,#141a12);border:1px solid #5dba63;text-align:center}
.milestone small{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#5dba63}
.milestone b{display:block;font-family:var(--font-game);font-style:italic;font-weight:700;font-size:34px;line-height:1.05;color:#fff3c4;text-shadow:0 3px 0 #141a12,0 0 14px rgba(93,186,99,.45);margin:4px 0 6px;animation:rankpop .6s cubic-bezier(.2,1.4,.4,1) both}
.milestone p{margin:0;font-size:14px;line-height:1.45;color:#fafafa}
.milestone .soon{margin-top:6px;color:#a8a393;letter-spacing:1px}
.milestone.big{border-color:#ff5b1f;background:linear-gradient(180deg,#2a1a12,#1a1812);box-shadow:0 0 24px rgba(255,91,31,.35)}
.milestone.big small{color:#ff5b1f}.milestone.big b{font-size:44px;color:#ffe08a;text-shadow:0 3px 0 #141a12,0 0 18px rgba(255,140,61,.6)}
.milestone .conf{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 12% 30%,#ffd96b 0 2px,transparent 3px),radial-gradient(circle at 28% 70%,#5dba63 0 2px,transparent 3px),
  radial-gradient(circle at 45% 20%,#ff5b1f 0 2px,transparent 3px),radial-gradient(circle at 62% 80%,#7fe8d4 0 2px,transparent 3px),
  radial-gradient(circle at 78% 35%,#ffd96b 0 2px,transparent 3px),radial-gradient(circle at 90% 65%,#ff5b1f 0 2px,transparent 3px);animation:confdrift 2.4s ease-in-out infinite alternate}
@keyframes confdrift{from{transform:translateY(-4px);opacity:.6}to{transform:translateY(4px);opacity:1}}
/* the now-playing credit wraps to a second line rather than clipping the artist name (Kemar: the credit is the promotion) */
.radio .credit{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3;flex:1 1 180px}

/* boot cover (art session finding, Oct 20): the scene painted round 1 before the cloud save arrived, then jumped to the
   player's round, which read as the weather changing on load. A neutral cover sits over everything until LB.boot
   settles or 1.5 s pass, whichever is first, then fades. */
#bootCover{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:#111417;color:#fafafa;transition:opacity .3s ease-out;pointer-events:auto}
#bootCover b{font-family:var(--font-game);font-style:italic;font-weight:700;font-size:clamp(28px,8vw,44px);text-transform:uppercase;letter-spacing:1px;color:#fff3c4}
#bootCover small{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#a8a393}
#bootCover.gone{opacity:0;pointer-events:none}
/* the pack's title line under the name (Kemar's Master Build Pack v1.1: "Featuring Julian Brown, creator of Plastolene"
   underneath, prominent): cream, not white, and wrapping inside the phone's width */
#bootCover .bootfeat{font-family:var(--font-ui);font-weight:700;font-size:clamp(15px,4.4vw,20px);line-height:1.3;color:#d4bb85;text-align:center;max-width:min(92vw,560px);padding:0 16px;box-sizing:border-box;text-wrap:balance}

/* training: the bank button the card is talking about pulses until it is tapped */
.bankslot.pulse{animation:slotpulse .8s ease-in-out infinite alternate}
@keyframes slotpulse{from{box-shadow:0 0 0 0 rgba(255,217,107,.0)}to{box-shadow:0 0 0 4px rgba(255,217,107,.85),0 0 18px rgba(255,217,107,.6)}}
/* training Skip button: readable on the dark banner (launch QA, Oct 21: dark text on a dark box) */
#tut .tutskip{background:transparent;color:#fafafa;border:1px solid #5dba63;padding:8px 12px;min-height:36px}
#tut .tutskip:active{background:#22281e}

/* a refused pickup shakes the bag bar (full bag) */
#bagbar.nope{animation:bagnope .45s ease-in-out}
@keyframes bagnope{0%,100%{translate:0 0}20%{translate:-6px 0}40%{translate:6px 0}60%{translate:-4px 0}80%{translate:4px 0}}

/* full bag, unmissable (Kemar, call 42:02: players do not notice the bag is full). The meter turns red and pulses, a
   banner stays up while you walk over plastic you cannot take, and an arrow points to the nearest reactor. */
#bagbar.full .fill{background:linear-gradient(180deg,#ff6a4a,#d8361c)!important}
#bagbar.full .track{border-color:#ff5b1f;animation:bagfull .7s ease-in-out infinite alternate}
@keyframes bagfull{from{box-shadow:0 0 0 0 rgba(255,91,31,.0)}to{box-shadow:0 0 0 3px rgba(255,91,31,.75),0 0 16px rgba(255,91,31,.7)}}
#bagbar.full .lab{color:#ff8a65}
#reactorArrow{position:fixed;left:0;top:0;z-index:7;pointer-events:none;width:0;height:0}
#reactorArrow i{position:absolute;left:-14px;top:-14px;width:28px;height:28px;background:#ff5b1f;clip-path:polygon(50% 0,100% 100%,50% 75%,0 100%);
  transform:rotate(var(--a,0deg));filter:drop-shadow(0 0 4px rgba(0,0,0,.6));animation:arrowbob .6s ease-in-out infinite alternate}
#reactorArrow small{position:absolute;left:50%;top:18px;transform:translateX(-50%);font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:#fff;background:#d8361c;padding:1px 5px;white-space:nowrap}
@keyframes arrowbob{from{scale:1}to{scale:1.18}}
#reactorArrow[data-side="l"] small{left:-14px;transform:none}
#reactorArrow[data-side="r"] small{left:auto;right:-14px;transform:none}

/* Bigger bag hint (SGW, call 3): Julian card under the HUD with a button into the shop */
#bagTip{position:fixed;left:50%;transform:translateX(-50%);top:100px;z-index:9;box-sizing:border-box;width:min(calc(100vw - 24px),420px);display:flex;align-items:center;gap:10px;
  padding:10px 38px 10px 10px;background:#1a1b15;border:2px solid #ff5b1f;color:#fafafa;box-shadow:0 10px 30px rgba(0,0,0,.55);pointer-events:auto}
#bagTip canvas{width:44px;height:44px;flex:none;image-rendering:pixelated}
#bagTip p{margin:0;flex:1;font-size:13px;line-height:1.3}
#bagTip #bagTipGo{flex:none;padding:8px 10px;font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;
  background:#ff5b1f;color:#1a1b15;border:0;border-radius:0;cursor:pointer}
#bagTip .x{position:absolute;right:4px;top:4px;width:28px;height:28px;padding:0;background:none;border:0;color:#fafafa;font-size:20px;line-height:1;cursor:pointer}
@media (max-width:480px){ #bagTip{flex-wrap:wrap} #bagTip p{flex:1 1 calc(100% - 60px);font-size:12px} #bagTip #bagTipGo{width:100%} }
/* opened from the hint: the Bigger bag row is lit for a few seconds */
.shoprow.focus{border-color:#ff5b1f!important;animation:rowfocus .5s ease-in-out 6 alternate}
@keyframes rowfocus{from{box-shadow:0 0 0 0 rgba(255,91,31,0)}to{box-shadow:0 0 0 3px rgba(255,91,31,.8),0 0 18px rgba(255,91,31,.6)}}
/* any Reactor Shop button: filled with a pulse and an RP dot when something is affordable now */
#shopHudBtn.can,#pauseShop.can,#shopFromBrief.can,#shopFromResult.can{position:relative;background:#ff5b1f;color:#1a1b15;border-color:#ff5b1f;animation:shopcan 1.1s ease-in-out infinite alternate}
#shopHudBtn.can::after,#pauseShop.can::after,#shopFromBrief.can::after,#shopFromResult.can::after{content:'RP';position:absolute;top:-7px;right:3px;
  padding:1px 4px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.5px;line-height:1.3;background:#fff3c4;color:#1a1b15;border:1px solid #1a1b15}
@keyframes shopcan{from{box-shadow:0 0 0 0 rgba(255,91,31,0)}to{box-shadow:0 0 0 3px rgba(255,91,31,.45),0 0 12px rgba(255,91,31,.55)}}
/* toasts step below the hint while it is up */
body.bagtipon #toast{top:max(252px,32vh)}

/* bag label: bold system sans on a solid backing so it reads over any ground (Apollo DM 22:50) */
#bagbar .lab{display:inline-block;margin-top:4px;padding:2px 7px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:800;font-size:12px;letter-spacing:.6px;line-height:1.35;color:#fff;background:rgba(14,15,11,.88);border:1px solid rgba(255,255,255,.18);text-shadow:none}
#bagbar.full .lab{color:#fff;background:#b8301a;border-color:#ff8a65}
@media (max-width:480px){ #bagbar .lab{font-size:11.5px;letter-spacing:.4px} }
/* results header: the title column takes all the room beside the rank badge, and a word that still does not fit breaks
   instead of running under the close button (Apollo DM 22:49, "RO / RO") */
.rhead .rtext{flex:1 1 0;min-width:0}
.rhead :is(h1,h2:where(.h1)),.rhead h2:where(:not(.h1)),.panel :is(h1,h2:where(.h1)),.panel h2:where(:not(.h1)){overflow-wrap:anywhere}
/* narrow phones (320 to 360): the second HUD row fits. The chip minimums give way, the shop label goes to two lines,
   and long values wrap instead of running off screen (Apollo DM 22:49 sweep) */
@media (max-width:360px){
  #hud #roundChip,#hud #goalChip,#hud #timeChip,#hud #scoreChip,#hud #fuelChip{min-width:0}
  #hud #timeChip{flex:0 0 52px}
  #hud #shopHudBtn{white-space:normal;line-height:1.15;text-align:center;max-width:72px;padding:4px 6px}
  #hud #roundChip b,#hud #goalChip b{font-size:11px;letter-spacing:0;white-space:normal;line-height:1.15}
  #hud .chip small{letter-spacing:.4px}
}
@media (max-width:480px){ #hud #roundChip,#hud #goalChip{min-width:0} }

/* wheel depth: the pin casts a little shadow onto the rim */
.wheelwrap{filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}

/* in-round notices: a compact strip under the HUD, not a card over the field (Nina, "random view obstructions").
   Semi-transparent, the screen width minus the gutters, three lines at most, tap to clear. */
#toast.strip{top:120px;bottom:auto;left:50%;transform:translateX(-50%);box-sizing:border-box;width:min(calc(100vw - 32px),520px);max-width:none;
  display:flex;align-items:center;gap:8px;padding:6px 10px;text-align:left;pointer-events:none;
  background:rgba(14,15,11,.72);border:1px solid rgba(255,255,255,.14);box-shadow:0 4px 14px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#toast.strip.live{pointer-events:auto;cursor:pointer}
#toast.strip.jb{background:rgba(14,15,11,.72);border:1px solid rgba(255,217,107,.35);box-shadow:0 4px 14px rgba(0,0,0,.3);padding:6px 10px;font-weight:600}
#toast.strip canvas.julian{width:28px;height:28px;flex:0 0 28px;border-width:1px}
#toast.strip #toastText{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:13px;line-height:1.3;color:#fafafa}
body.bagtipon #toast.strip,body.tuton #toast.strip{bottom:auto}
/* power-up bank: an empty bank is one small pill; slots appear only for what you hold, smaller on phones */
#bankWrap.empty .banklab{font-size:11px;letter-spacing:.8px;padding:3px 8px;background:rgba(14,15,11,.6);border:1px solid rgba(255,255,255,.14);color:#c9c3b2;text-shadow:none}
#bankWrap.empty #bank{display:none}
@media (max-width:480px){
  .bankslot{width:44px;height:44px}
  .bankslot span{font-size:15px}
  .bankslot small{font-size:11px;letter-spacing:.1px;max-width:42px;overflow:hidden;text-overflow:clip}
  /* DASH: smaller and see-through at rest so the van and plastic behind it stay visible; solid while pressed or dashing */
  #dashBtn{width:56px;height:56px;opacity:.6;background:rgba(23,34,43,.55)}
  #dashBtn.on,#dashBtn:active{opacity:1;background:rgba(23,34,43,.92)}
  #dashBtn span{font-size:18px}
  #dashBtn small{font-size:11px;letter-spacing:1px}
}

/* wheel odds: a clean list, left aligned, body font, no monospace */
#wheelNote{text-align:left}
#wheelNote .wfree{display:block;font-family:var(--font-ui);font-size:17px;line-height:1.3;color:#fafafa;font-weight:700;margin:4px 0 8px}
#wheelNote .wodds{list-style:none;margin:0;padding:0;border-top:1px solid #3a3b32}
#wheelNote .wodds li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px solid #2a2b24;font-family:var(--font-ui);font-size:16px;line-height:1.2;color:#fafafa;white-space:nowrap}
#wheelNote .wodds b{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
#wheelNote .wweighted{display:block;margin-top:6px;font-family:var(--font-ui);font-size:12px;line-height:1.3;color:#c9c3b2}
/* start countdown: 3, 2, 1, Go over the field, the clock held until it ends; a tap anywhere skips it */
#ready{position:fixed;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:auto;cursor:pointer;background:rgba(10,12,9,.18)}
#ready[hidden]{display:none}
#ready b{font-family:var(--font-game);font-style:italic;font-weight:700;font-size:min(30vw,150px);line-height:1;color:#fff3c4;text-shadow:0 5px 0 #141a12,0 0 26px rgba(255,217,107,.55)}
#ready b.go{color:#7fe8d4;text-shadow:0 5px 0 #0e2a26,0 0 26px rgba(127,232,212,.6)}
#ready b.pop{animation:readypop .5s ease-out}
#ready small{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.75)}
@keyframes readypop{from{transform:scale(1.5);opacity:.2}to{transform:scale(1);opacity:1}}
/* game-written lines (wheel hint, results coaching) carry the NatureJAB seal and a "Reactor crew" label; Julian's name and
   face stay on his own verbatim quotes (Apollo QA batch 7) */
.say img.face.seal{width:44px;height:44px;flex:0 0 44px;object-fit:contain;background:#1a1b15;border:1px solid var(--panel-edge);padding:3px;box-sizing:border-box}
/* power-up bank: says "full" when it is, and flashes when a pickup on a full bank fires at once (Apollo, call 106:12) */
#bankWrap.full .banklab{color:#ffd96b}
#bankWrap.flash .banklab{animation:bankflash .45s ease-out 3}
@keyframes bankflash{0%{background:rgba(255,217,107,.85);color:#1a1b15}100%{background:rgba(14,15,11,.6)}}
/* milestone confetti stays in two side strips behind the copy, and the copy is padded clear of them, so no dot lands on
   a word (Apollo DM 23:36, "Round 60" card: a dot on "keep" and on "OPEN") */
.milestone{padding-left:34px;padding-right:34px}
.milestone .conf{z-index:0;background:
  radial-gradient(circle at 10px 22%,#ffd96b 0 2px,transparent 3px),radial-gradient(circle at 20px 58%,#5dba63 0 2px,transparent 3px),
  radial-gradient(circle at 9px 86%,#ff5b1f 0 2px,transparent 3px),radial-gradient(circle at calc(100% - 10px) 30%,#7fe8d4 0 2px,transparent 3px),
  radial-gradient(circle at calc(100% - 20px) 64%,#ffd96b 0 2px,transparent 3px),radial-gradient(circle at calc(100% - 9px) 88%,#ff5b1f 0 2px,transparent 3px)}
.milestone > :not(.conf){position:relative;z-index:1}

/* ---------- results card as a payoff (Apollo DM 00:02): one hero score, a stat grid, the rank and board line, then the
   actions, all above the fold on a phone; the story, notes and ladders follow below ---------- */
#resultV .rhead{margin-bottom:6px}
.rhero{position:relative;text-align:center;padding:10px 12px 12px;margin:0 0 8px;background:linear-gradient(180deg,#1f2a1a,#141a12);border:1px solid #2f3a26}
.rhero small{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#a8a393}
.rhero b{display:block;font-family:var(--font-game);font-style:italic;font-weight:700;font-size:clamp(48px,15vw,68px);line-height:1;margin:2px 0 4px;color:#fff3c4;
  text-shadow:0 4px 0 #141a12,0 0 18px rgba(255,217,107,.35);font-variant-numeric:tabular-nums}
.rbest{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--font-mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#c9c3b2}
.rbest em{font-style:normal;font-weight:700;font-size:12px;letter-spacing:1.5px;padding:3px 9px;background:linear-gradient(160deg,#ffe08a,#ff8a3d);color:#1a1b15;animation:nbpulse 1s ease-in-out infinite alternate}
@keyframes nbpulse{from{box-shadow:0 0 0 0 rgba(255,179,0,.0)}to{box-shadow:0 0 0 4px rgba(255,179,0,.35),0 0 16px rgba(255,140,61,.6)}}
.rhero.newbest{border-color:#ffb300;box-shadow:0 0 22px rgba(255,179,0,.25)}
.rhero.newbest b{color:#ffe08a}
.rver{position:absolute;top:8px;right:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#5dba63;border:1px solid #5dba63;padding:1px 5px}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 8px}
.rcell{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:8px 10px;background:var(--panel-deep,#141510);border:1px solid #2a2b24;min-width:0}
.rcell.wide{grid-column:1 / -1}
.rcell .ric{grid-row:1 / span 3;font-size:22px;line-height:1}
.rcell b{font-family:var(--font-mono);font-weight:700;font-size:22px;line-height:1.1;color:#fafafa;font-variant-numeric:tabular-nums}
.rcell.wide b{font-size:26px;color:#7fe8d4}
.rcell small{font-family:var(--font-mono);font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:#a8a393;line-height:1.25;overflow-wrap:anywhere}
.rcell em{grid-column:2;font-style:normal;font-size:11px;color:#7fe8d4;line-height:1.3;overflow-wrap:anywhere}
.rrankline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;margin:0 0 8px;padding:6px 2px;border-top:1px solid #2a2b24;border-bottom:1px solid #2a2b24;font-family:var(--font-mono);font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:#c9c3b2}
.rrankline b{color:#ffd96b;font-weight:700}
#resultV .post{margin-top:0}
@media (max-width:360px){ .rcell{padding:7px 8px} .rcell b{font-size:19px} .rcell.wide b{font-size:22px} .rcell .ric{font-size:18px} }
/* short phones (SE class, 640 to 700 px tall): the card tightens so Next round still sits above the fold */
@media (max-height:700px){
  #resultV .panel{padding-top:10px}
  #resultV .rhead{margin:0 0 4px} #resultV .rhead :is(h1,h2:where(.h1)){font-size:clamp(20px,6vw,26px)}
  #resultV .rank{width:56px;height:56px;flex-basis:56px} #resultV .rank i{font-size:30px} .rankwrap::before{width:56px;height:56px}
  .rhero{padding:6px 10px 8px;margin-bottom:6px} .rhero b{font-size:clamp(38px,12vw,48px);margin:0 0 2px}
  .rgrid{gap:4px;margin-bottom:6px} .rcell{padding:5px 8px} .rcell b{font-size:18px} .rcell.wide b{font-size:20px} .rcell .ric{font-size:16px}
  .rcell em{font-size:11px}
  .rrankline{padding:4px 2px;margin-bottom:6px}
  #resultV .post{padding:8px 10px} #resultV .post label{margin-bottom:4px}
}

/* ---------- iPhone HUD pass (Apollo, QA batch 8): every HUD edge respects the safe area, and nothing overlaps at 375,
   390 or 430 wide. The insets go through variables so they can be simulated in a desktop browser (set --sat etc.) ---------- */
:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
/* the shop button sits in the HUD row: no leftover offsets from its old fixed position (they shifted it 14 px off the edge) */
#hud #shopHudBtn{left:auto!important;right:auto!important;top:auto!important;bottom:auto!important}
@media (max-width:480px){
  #hud{top:0;padding-top:calc(8px + var(--sat));padding-left:max(8px,var(--sal));padding-right:max(8px,var(--sar))}
  /* bottom corners: pause and radio, then the bag bar and DASH above them, then the power-up row above the bag bar */
  #pauseBtn{bottom:calc(18px + var(--sab));left:max(16px,var(--sal))} #mute{bottom:calc(18px + var(--sab));right:max(16px,var(--sar))}
  body.lefty #pauseBtn{left:auto;right:max(16px,var(--sar))} body.lefty #mute{right:auto;left:max(16px,var(--sal))}
  #bagbar{bottom:calc(84px + var(--sab));left:max(14px,var(--sal));right:auto;transform:none;width:min(52vw,220px)}
  body.lefty #bagbar{left:auto;right:max(14px,var(--sar));text-align:right} body.lefty #bagbar .lab{text-align:right}
  #dashBtn{bottom:calc(84px + var(--sab));right:max(14px,var(--sar));left:auto}
  body.lefty #dashBtn{right:auto;left:max(14px,var(--sal))}
  /* power-ups: a row of icon-only slots right above the bag bar, so the right edge (the convoy lane) stays clear */
  #bankWrap{bottom:calc(136px + var(--sab));left:max(14px,var(--sal));right:auto;flex-direction:row;align-items:center;gap:6px;flex-wrap:wrap;max-width:calc(100vw - 110px)}
  body.lefty #bankWrap{left:auto;right:max(14px,var(--sar));flex-direction:row-reverse}
  #bank{flex-direction:row;gap:6px}
  .bankslot{width:40px;height:40px}
  .bankslot small{display:none}
  .bankslot span{font-size:18px}
  /* combo: beside DASH, off the field's top where the city title is painted */
  #combo{top:auto;bottom:calc(148px + var(--sab));left:auto;right:max(10px,var(--sar));transform:scale(.6);transform-origin:100% 100%}
  body.lefty #combo{right:auto;left:max(10px,var(--sal));transform-origin:0 100%}
  #buffs{top:calc(130px + var(--sat))} #count{top:calc(124px + var(--sat))} #tut{top:calc(126px + var(--sat))}
}
@media (max-width:480px){
  #combo.on{transform:scale(1)}
  /* power-up timers sit below the deepest a three-line notice strip can reach */
  #buffs{top:calc(196px + var(--sat))}
}
/* desktop: the combo sits above the bag bar on the left, clear of the notice strip under the HUD */
@media (min-width:481px){
  #combo{top:auto;bottom:calc(128px + var(--sab));left:max(14px,var(--sal));right:auto;transform:scale(.6);transform-origin:0 100%}
  #combo.on{transform:scale(1)}
  body.lefty #combo{left:auto;right:max(14px,var(--sar));transform-origin:100% 100%}
}

/* start screen: jobs, streak, season and orders as one strip of chips under the round line (Apollo DM 00:46) */
.metachips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.metachips[hidden]{display:none}
.metachip{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 6px;background:var(--panel-deep,#141510);border:1px solid #2a2b24;
  color:#fafafa;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.4px;cursor:pointer;border-radius:0;white-space:nowrap}
.metachip span{font-size:14px;line-height:1}
.metachip b{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.metachip.done b{color:#5dba63}
.metachip.on{border-color:#ffd96b;background:#24261c;box-shadow:inset 0 -2px 0 #ffd96b}
.metapanel{margin:6px 0 0}
.metapanel[hidden]{display:none}
.metapanel .lo-card,.metapanel .or-card{margin:0}
#briefV #startBtn{margin-top:10px}
@media (max-width:360px){ .metachip{font-size:11px;padding:6px 4px;gap:3px} .metachip span{font-size:12px} }
/* chips read in full in every language (Parent QA: "0/3 …", "Seas…" cut on live): icon and number on top, the word as
   a small second line that wraps instead of being cut */
.metachip{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;justify-content:center;align-items:center;column-gap:5px;row-gap:1px;
  white-space:normal;padding:6px 4px;text-align:center}
.metachip .mci{grid-row:1;grid-column:1;font-size:15px;line-height:1}
.metachip b{grid-row:1;grid-column:2;font-size:14px;line-height:1.1;overflow:visible;text-overflow:clip;white-space:nowrap}
.metachip small{grid-row:2;grid-column:1 / -1;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:#a8a393;line-height:1.15;overflow-wrap:anywhere;hyphens:auto}
.metachip.on small{color:#ffd96b}
@media (max-width:360px){ .metachip{padding:5px 3px;column-gap:3px} .metachip b{font-size:13px} .metachip .mci{font-size:13px} .metachip small{font-size:11px;letter-spacing:.2px} }
/* chips v3: icon on top, the full translated label under it, wrapping onto a second line when a language runs long */
.metachip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;white-space:normal}
.metachip .mci{font-size:15px;line-height:1}
.metachip b{font-size:11px;line-height:1.2;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;text-align:center}
@media (max-width:360px){ .metachip b{font-size:11px} .metachip .mci{font-size:13px} }
/* phones: the chips go two by two, icon and label on one line, so a long word ("commandes") never splits mid-word */
.metachip b{overflow-wrap:normal;word-break:normal;hyphens:none}
@media (max-width:430px){
  .metachips{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .metachip{flex-direction:row;justify-content:center;gap:6px;padding:7px 6px}
  .metachip b{font-size:12px;text-align:left}
  .metachip .mci{font-size:15px}
}
/* How to play: every keyboard control in one row (call 3 item 15) */
.howto .keysrow{display:block}
.howto .keysrow .keys{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.howto .keysrow .keys>span{display:block;line-height:1.5}
.howto kbd{display:inline-block;min-width:18px;padding:0 5px;margin:0 2px 0 0;font-family:var(--font-mono);font-size:11px;line-height:18px;text-align:center;color:#fafafa;background:#24261c;border:1px solid #4a4c3f;border-bottom-width:2px;border-radius:3px}
/* truck journey pill under the HUD (call 3 item 10) */
#journey{position:fixed;left:50%;transform:translateX(-50%);top:110px;z-index:7;max-width:calc(100vw - 32px);box-sizing:border-box;display:flex;align-items:center;gap:6px;
  padding:4px 10px;background:rgba(14,15,11,.78);border:1px solid rgba(255,217,107,.4);color:#fafafa;font-family:var(--font-mono);font-size:11px;letter-spacing:.4px;pointer-events:none}
#journey[hidden]{display:none}
#journey span{font-size:14px;line-height:1}
#journey b{font-weight:700;white-space:normal;overflow-wrap:anywhere}
#journey{width:max-content}
/* the key lines are spans too: undo the row-icon rule (absolute, 24 px, 18 px font) for them */
.howto .keysrow .keys,.howto .keysrow .keys span{position:static;width:auto;left:auto;top:auto;font-size:13px;line-height:1.5;text-align:left}
.howto .keysrow .keys{display:flex;flex-direction:column;gap:3px;margin-top:2px}
/* start screen footer links: spaced apart, no tap delay, and an armed reset that reads as armed at once */
#briefV p.note:has(#resetBtn){display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px}
#briefV .link{touch-action:manipulation}
#resetBtn.armed{background:#b4552f;color:#fff;border:1px solid #ff8a65;padding:4px 10px;text-decoration:none}
/* HUD rows hold still (Apollo QA batch 9): the RP card keeps its second line's height when "deposit to earn" clears, and
   the bar keeps a little air above it even where the browser reports no safe-area inset */
@media (max-width:480px){
  #hud{padding-top:calc(10px + var(--sat))}
  .chip small.sub{display:block;min-height:1.1em}
  .chip small.sub:empty{display:block;visibility:hidden}
  .chip small.sub:empty::before{content:"\00a0"}
}
/* "Feed Pyro" over the bowl when the collector is near (live call, Jaus 7:48) */
#pyroTag{position:fixed;left:0;top:0;z-index:6;pointer-events:none;padding:3px 8px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:#1a1b15;background:#ffd96b;border:1px solid #1a1b15;box-shadow:0 2px 0 rgba(0,0,0,.4);white-space:nowrap;animation:pyrotag .7s ease-in-out infinite alternate}
#pyroTag[hidden]{display:none}
#pyroTag.full{color:#fafafa;background:rgba(14,15,11,.8);border-color:rgba(255,255,255,.2);animation:none}
@keyframes pyrotag{from{margin-top:0}to{margin-top:-3px}}
/* start screen explained for new players (Apollo DM 01:06): a help line under each chip, the round's twist, and a label
   on the live count */
.metachip{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:6px;row-gap:2px;align-items:center;text-align:left;padding:7px 8px}
.metachip .mci{grid-row:1 / span 2;align-self:start;margin-top:1px}
.metachip b{grid-column:2;text-align:left}
.metachip small.mch{grid-column:2;display:block;font-family:var(--font-ui);font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.25;color:#c9c3b2;white-space:normal;overflow-wrap:normal}
.metachip.on small.mch{color:#ffd96b}
.roundtwist{margin:4px 0 0;font-size:12px;line-height:1.35;color:#c9c3b2}
.activity .actlab{display:block;font-size:11px;letter-spacing:1.5px;color:#a8a393;margin-bottom:1px}
@media (min-width:431px){ .metachips{display:grid;grid-template-columns:1fr 1fr;gap:6px} }
.rmute,.radio .rbtn,#mute{touch-action:manipulation}
/* first rounds: a one-line explanation under the bag bar */
#bagbar .baghint{display:block;margin-top:3px;padding:2px 6px;font-family:var(--font-ui);font-size:11px;line-height:1.3;color:#fafafa;background:rgba(14,15,11,.72);border-left:2px solid #7fe8d4;max-width:100%;box-sizing:border-box}
#bagbar .baghint[hidden]{display:none}
@media (max-width:480px){ body.baghinton #bankWrap{bottom:calc(176px + var(--sab))} body.baghinton #combo{bottom:calc(188px + var(--sab))} }
/* save confirmation (Nina): a calm pill between Pause and Radio, and a one-time card with the restore code */
.savepill{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(30px + var(--sab,0px));z-index:12;padding:5px 12px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.5px;
  color:#fafafa;background:rgba(14,15,11,.86);border:1px solid #5dba63;pointer-events:none;white-space:nowrap}
.savepill[hidden]{display:none}
.savepill.ok{color:#9be59f}
.savepill.warn{border-color:#ffb300;color:#ffd96b}
#codeCard{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;box-sizing:border-box;width:min(calc(100vw - 32px),340px);padding:16px;text-align:center;
  background:#1a1b15;border:2px solid #5dba63;box-shadow:0 12px 40px rgba(0,0,0,.6);color:#fafafa}
#codeCard[hidden]{display:none}
#codeCard p{margin:6px 0;font-size:14px;line-height:1.4}
#codeCard .code b{display:inline-block;font-family:var(--font-mono);font-size:28px;letter-spacing:5px;color:#ffd96b;padding:6px 12px;border:1px dashed #5dba63;margin:4px 0}
.saverow .savecode{display:block;margin:4px 0;color:#9be59f}
.saverow .savecode b{font-family:var(--font-mono);letter-spacing:2px;color:#ffd96b}
#boardList .boardload{opacity:.8;animation:boardpulse 1s ease-in-out infinite alternate}
@keyframes boardpulse{from{opacity:.45}to{opacity:.9}}
#boardList .lbgap{text-align:center;color:#a8a393;letter-spacing:4px;padding:2px 0}

/* item help: the "?" by the power-up bank and the item guide in How to play (Apollo, Oct 20) */
.itemq{width:24px;height:24px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(14,15,11,.72);color:#ffd96b;font:700 14px/22px var(--font-mono,monospace);text-align:center;cursor:pointer;flex:none;touch-action:manipulation}
.itemq:active{transform:scale(.92)}
@media (min-width:481px){ #bankWrap{padding-top:0} #bankWrap .itemq{position:absolute;top:-6px;right:calc(100% + 6px)} body.lefty #bankWrap .itemq{right:auto;left:calc(100% + 6px)} }
#bankWrap.empty .itemq{display:none}
.itemguide{display:flex;flex-direction:column;gap:6px;margin:2px 0 6px;padding:0;border:0}
.itemguide h3{margin:8px 0 2px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#ffd96b}
.itemguide .ig{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;padding:6px 8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px}
.itemguide .ig .tok{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:24px}
.itemguide .ig canvas{width:44px;height:44px}
.itemguide .ig b{display:block;font-size:14px;margin:0 0 1px}
.itemguide .ig span.d{display:block;font-size:13px;line-height:1.35;color:#d9d4c4}
#helpV .howto .itemguide{display:flex;padding:0;background:none;border:0;flex:none;height:auto}
.itemguide p.ig,.itemguide h3{margin:0;color:#fafafa;flex:none}
.itemguide h3{color:#ffd96b;margin-top:8px}
#helpV .howto .itemguide p.ig > span,#helpV .howto .itemguide p.ig span{position:static;left:auto;top:auto;transform:none}
#helpV .howto .itemguide p.ig span{width:auto;text-align:left;font-size:13px;line-height:1.35}
#helpV .howto .itemguide p.ig span.tok{width:44px;height:44px;font-size:24px;line-height:1;text-align:center}
#helpV .howto .itemguide p.ig b{color:#fafafa}


/* open-world lobby (Nina, Oct 20): slim top bar, reactor sheet docked to the bottom, tip bubble over a building */
body.lobby #hud,body.lobby #bagbar,body.lobby #pauseBtn,body.lobby #dashBtn,body.lobby #bankWrap,body.lobby #mute,body.lobby #radioHud,body.lobby #routeBtn,body.lobby #combo,body.lobby #buffs,body.lobby #journey,body.lobby #pyroTag,body.lobby #count,body.lobby #tut{display:none}
.lobbybar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;
  padding:calc(6px + var(--sat,0px)) max(8px,var(--sar,0px)) 6px max(8px,var(--sal,0px));background:linear-gradient(rgba(10,14,16,.82),rgba(10,14,16,.55));pointer-events:none}
.lobbybar[hidden]{display:none}
.lobbybar > *{pointer-events:auto}
.lobbybar .lbtn{height:32px;padding:0 10px;border:1px solid rgba(255,255,255,.2);background:rgba(14,15,11,.78);color:#f2ead6;font:700 11px/30px var(--font-mono,monospace);letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;cursor:pointer;border-radius:0}
.lobbybar .lbtn:active{transform:scale(.96)}
.lobbybar .lbtn[hidden]{display:none}
.lobbybar .langslot{position:static;margin:0}
@media (max-width:480px){ .lobbybar .lbtn span{display:none} .lobbybar .lbtn{padding:0 10px;font-size:14px} .lobbybar .rmute{font-size:11px} }
.lobbytip{position:fixed;z-index:31;max-width:min(280px,calc(100vw - 16px));padding:8px 11px;background:rgba(14,15,11,.92);border:1px solid #7fe8d4;color:#f2ead6;pointer-events:none}
.lobbytip[hidden]{display:none}
.lobbytip b{display:block;font:700 12px var(--font-mono,monospace);letter-spacing:.6px;text-transform:uppercase;color:#7fe8d4;margin-bottom:2px}
.lobbytip span{display:block;font-size:13px;line-height:1.35}
.lobbysheet{position:fixed;left:0;right:0;bottom:0;z-index:32;display:flex;justify-content:center;pointer-events:none}
.lobbysheet[hidden]{display:none}
.lobbysheet .homepanel{pointer-events:auto;position:relative;width:min(420px,100vw);box-sizing:border-box;max-height:min(72vh,560px);overflow:auto;text-align:center;margin:0;
  padding:18px 16px calc(16px + var(--sab,0px));box-shadow:0 -10px 30px rgba(0,0,0,.45);animation:sheetup .22s ease-out}
@keyframes sheetup{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.lobbysheet h2:where(:not(.h1)){margin:0}.lobbysheet :is(h1,h2:where(.h1)){margin:2px 0 8px;font-size:26px}
.lobbysheet .homerow{display:flex;align-items:center;justify-content:center;gap:12px;text-align:left}
.lobbysheet .homeface{width:64px;height:64px;flex:none;border:1px solid var(--panel-edge,#2a2b24)}
.lobbysheet .homeface[hidden]{display:none}
.lobbysheet .homerow .homeface[hidden] + .homeline{text-align:center}
.lobbysheet .homeline{margin:0;font-size:14px;line-height:1.45;color:#d9d4c4;white-space:pre-line}
.lobbysheet .hometwist{margin:8px 0 0;font-size:12px;line-height:1.4;color:#c9c3b2;white-space:pre-line}
.lobbysheet .go{font-size:16px;padding:15px;margin-top:12px}
.lobbysheet .alt{display:block;width:100%;margin-top:8px;padding:11px}
.lobbysheet .link{display:block;margin:10px auto 0}
.lobbysheet .link[hidden]{display:none}
.lobbysheet .x{position:absolute;top:8px;right:8px}
.lobbysheet .homefeat{margin:-4px 0 10px;font-size:13px;line-height:1.35;font-weight:700;color:#d4bb85}
.lobbysheet .credlink{display:block;width:100%;min-height:44px;margin-top:8px;background:transparent;border:0;color:#d4bb85;font:700 12px/44px var(--font-mono);letter-spacing:1.2px;text-transform:uppercase;text-decoration:underline;cursor:pointer}
/* the credits sheet (pack page 2): the lobby sheet's panel over a dimmed map; a tap on the dim, X or Esc closes it */
.lobbysheet.credsheet{top:0;z-index:34;align-items:flex-end;pointer-events:auto;background:rgba(8,10,12,.55)}
.credsheet .homepanel{max-height:min(86vh,640px);padding-top:22px}
.credsheet .x{width:44px;height:44px;font-size:22px}
.credsheet .credname{margin:4px 48px 2px;font-size:clamp(20px,6.2vw,26px)}   /* one line at 375: 23.3 px font, 238 px with its letter-spacing, in a 247 px box */
.credsheet .credset{margin:0;font-size:14px;color:#c9c3b2}
.credsheet .credfeat{margin:6px 0 14px;font-size:15px;line-height:1.35;font-weight:700;color:#d4bb85;text-wrap:balance}
.credsheet .credline{margin:0 0 9px;font-size:14px;line-height:1.45;color:#d9d4c4}
.credsheet .credlegal{margin:12px 0 0;font-size:11px;line-height:1.45;color:#a8a393}
.credsheet .credlegal + .credlegal{margin-top:4px}
#briefV .backmap{display:none;margin:0 0 8px;font-size:13px}
body.lobby #briefV .backmap{display:block}
.lobbysheet .homerow{flex-wrap:wrap}
.lobbysheet .homerow > .fc-card{flex:1 0 100%;text-align:left;margin-top:6px}
@media (max-height:700px){ .lobbysheet h2:where(:not(.h1)){display:none} .lobbysheet :is(h1,h2:where(.h1)){font-size:22px;margin:0 0 6px} .lobbysheet .homepanel{padding-top:12px} }

/* QA batch 10 (Apollo, phones): the HUD sat straight on the world art (van, reactor), so the combo, the power-up row and
   its label get a subtle dark backing that keeps them readable over anything the camera puts under them */
#combo.on{background:rgba(14,15,11,.78);border:1px solid rgba(255,255,255,.14);padding:4px 10px 5px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
#bankWrap:not(.empty){box-sizing:border-box;background:rgba(14,15,11,.66);border:1px solid rgba(255,255,255,.12);padding:4px 6px;box-shadow:0 2px 10px rgba(0,0,0,.3)}
#bankWrap:not(.empty) .banklab{text-shadow:none;color:#d9d4c4}
/* Apollo DM 02:18, new players: chip explainers read whole words (no "every-one's" or "or-ders" splits), a touch bigger */
.metachip small.mch{font-size:11px;hyphens:none;-webkit-hyphens:none;overflow-wrap:break-word;word-break:normal}
/* the full brief opened from the lobby is its own screen with its own Back, language and radio: the slim bar stays off it */
body.lobby:has(#briefV:not([hidden])) .lobbybar{display:none}
.roundtag{flex-wrap:wrap;row-gap:2px}.roundtag > span,.roundtag > strong{white-space:nowrap}
/* iPhone with the Safari toolbar showing (Apollo DM 02:18: "the bottom is cluttered"): on short phone screens
   (SE 375x548, 13/14 390x664, 15 Pro 393x659, Pro Max 430x739) the bag bar moves into the Pause / Radio row, so the
   bottom stack loses a whole band: row 1 Pause, bag, Radio; row 2 power-ups on the left, DASH on the right; the combo
   above DASH. Every offset still adds env(safe-area-inset-bottom) for when the toolbar hides. */
@media (max-width:480px) and (max-height:760px){
  #pauseBtn,#mute{width:52px;height:42px;bottom:calc(12px + var(--sab))}
  #bagbar{bottom:calc(12px + var(--sab));left:calc(max(16px,var(--sal)) + 60px);right:auto;width:auto;max-width:none;
    width:calc(100vw - 2 * max(16px,var(--sal),var(--sar)) - 120px)}
  body.lefty #bagbar{left:calc(max(16px,var(--sal)) + 60px);right:auto;text-align:left} body.lefty #bagbar .lab{text-align:left}
  #bagbar .lab{margin-top:3px}
  #dashBtn{bottom:calc(66px + var(--sab))}
  #bankWrap{bottom:calc(68px + var(--sab));max-width:calc(100vw - 120px)}
  body.baghinton #bankWrap{bottom:calc(98px + var(--sab))}
  #combo,body.baghinton #combo{bottom:calc(130px + var(--sab))}
  #toast{bottom:calc(130px + var(--sab))}
  .radiohud{bottom:calc(62px + var(--sab))}
}
@media (max-width:360px) and (max-height:760px){ #bankWrap:not(.empty) .banklab{display:none} #bankWrap{flex-wrap:nowrap} }
@media (min-width:481px){ #combo{bottom:calc(144px + var(--sab))} }
/* short phone screens, continued (parent QA): Pause and Radio as icons only, and the notice strip as one line (game.js
   toastPages cuts pages to one line there; the two-line clamp is only a safety net) */
@media (max-width:480px) and (max-height:760px){
  #pauseBtn,#mute{width:44px;height:40px;padding:0;gap:0}
  #pauseBtn small,#mute small{display:none}
  #bagbar{left:calc(max(16px,var(--sal)) + 52px);width:calc(100vw - 2 * max(16px,var(--sal),var(--sar)) - 104px)}
  body.lefty #bagbar{left:calc(max(16px,var(--sal)) + 52px)}
  #toast.strip #toastText{font-size:12.5px;-webkit-line-clamp:2}
  #toast.strip canvas.julian{width:22px;height:22px;flex-basis:22px}
  #toast.strip.jb{padding:4px 8px}
}
/* lobby zoom: a small + / - pair under the slim bar's right end (the bar itself is full at 375) */
.lobbyzoom{position:absolute;top:calc(100% + 8px);right:max(12px,var(--sar));display:flex;flex-direction:column;gap:4px}
.lobbyzoom[hidden]{display:none}
.lobbybar .lobbyzoom .lbtn{width:36px;height:36px;padding:0;font:700 20px/34px var(--font-ui,sans-serif);text-align:center;touch-action:manipulation}
/* in-round zoom (Jaus, call 121:37): a small + / - pair on the right edge above the combo and DASH, clear of the bag bar */
.zoomhud{position:fixed;right:max(12px,var(--sar));bottom:calc(214px + var(--sab));z-index:7;display:flex;flex-direction:column;gap:4px}
.zoomhud[hidden]{display:none}
.zoomhud button{width:34px;height:34px;padding:0;border:1px solid rgba(255,255,255,.22);background:rgba(14,15,11,.72);color:#f2ead6;font:700 19px/32px var(--font-ui,sans-serif);text-align:center;border-radius:0;touch-action:manipulation;cursor:pointer}
.zoomhud button:active{transform:scale(.94)}
body.lefty .zoomhud{right:auto;left:max(12px,var(--sal))}
@media (max-width:480px) and (max-height:760px){ .zoomhud{bottom:calc(196px + var(--sab))} }
@media (min-width:481px){ .zoomhud{right:auto;left:max(14px,var(--sal));bottom:calc(224px + var(--sab))} body.lefty .zoomhud{left:auto;right:max(14px,var(--sar))} }   /* desktop: the power-up bank owns the right edge */
/* lobby bar, one button style (Apollo 03:03): every button, the language picker included, is the same height, border,
   font and padding; an icon slot (.lic) holds the painted PNG from assets/icons/ or the emoji until it lands */
.lobbybar{gap:6px}
.lobbybar .lbtn,.lobbybar .langpick .langbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;height:36px;min-height:36px;min-width:36px;
  padding:0 10px;margin:0;border:1px solid rgba(255,255,255,.2);border-radius:0;background:rgba(14,15,11,.78);color:#f2ead6;
  font:700 11px/1 var(--font-mono,monospace);letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.lobbybar .langpick .langbtn:hover,.lobbybar .langpick.open .langbtn{border-color:rgba(255,255,255,.45)}
.lobbybar .lbtn:focus-visible,.lobbybar .langpick .langbtn:focus-visible{outline:2px solid #ffd96b;outline-offset:2px}
.lobbybar .lic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-style:normal;font-size:15px;line-height:1;flex:none}
.lobbybar .lic img{width:18px;height:18px;object-fit:contain;image-rendering:auto}
.lobbybar .langpick .globe{font-size:15px}
.lobbybar .langpick .cur{max-width:9em;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){
  .lobbybar .lbtn,.lobbybar .langpick .langbtn{width:40px;min-width:40px;height:40px;min-height:40px;padding:0}
  .lobbybar .lbtn span,.lobbybar .langpick .cur{display:none}
  .lobbybar .lic,.lobbybar .lic img{width:20px;height:20px;font-size:17px}
}
/* the reactor sheet fits the visible screen under the slim bar: it never runs past the bottom, and scrolls inside only if
   it must (Apollo 03:07); the unlock card sits under the buttons */
.lobbysheet .homepanel{max-height:calc(100vh - 60px - var(--sat,0px));max-height:calc(100dvh - 60px - var(--sat,0px));padding-bottom:max(14px,var(--sab,0px))}
.lobbysheet .homepanel > .fc-card{margin-top:12px;text-align:left}
@media (min-width:481px) and (min-height:701px){ .lobbysheet{bottom:max(24px,4vh)} .lobbysheet .homepanel{max-height:calc(100dvh - 60px - max(24px,4vh))} }
/* lobby notices leave the + / - pair on the right uncovered (parent QA: the zoom hint sat under the buttons it names) */
@media (max-width:620px){ body.lobby:has(#lobbyZoom:not([hidden])) #toast.strip{width:calc(100vw - 32px - 50px);transform:translateX(calc(-50% - 25px))} }
/* the in-round + / - pair uses the same painted icons */
.zoomhud .lic{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-style:normal;line-height:1}
.zoomhud .lic img{width:20px;height:20px;object-fit:contain}
/* ---------- pre-launch audit, OUT B ---------- */
/* #8: any panel opened from the lobby (How to play, shop, board) is its own screen: the slim bar steps aside */
body.lobby:has(.veil:not([hidden])) .lobbybar{display:none}
/* #19: the HUD's second row at 361 to 480 px: chip text wraps to two short lines instead of running off the screen,
   and the shop button wraps its label (French, Italian, Russian... and English "rolling to Birmingham") */
@media (max-width:480px){
  #hud #roundChip b,#hud #goalChip b{white-space:normal;line-height:1.15;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  #hud #roundChip,#hud #goalChip{overflow:hidden}
  #hud #shopHudBtn{max-width:84px;white-space:normal;line-height:1.15;text-align:center}
}
/* #20: on short phones the bag label stays inside the bag bar (it ran under Radio when the bag was full in fr, es, it,
   ru...): it clips with an ellipsis */
@media (max-width:480px) and (max-height:760px){
  #bagbar .lab{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;width:auto}
}
/* #21: on short phones the save pill sits above the power-up row on the left, not on the bag bar */
@media (max-width:480px) and (max-height:760px){
  .savepill{left:max(14px,var(--sal,0px));right:auto;transform:none;bottom:calc(124px + var(--sab,0px));max-width:calc(100vw - 110px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* round notes as stat cells under the main grid (Apollo 03:41), three across when there are three */
.rnotes{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));margin:0 0 8px;text-align:left}
.rnotes[hidden]{display:none}
.rnotes .rcell b{font-size:18px}
.rnotes .rcell .ric{font-size:18px}
/* Apollo QA batch 12: the power-up row reads as HUD, not as part of the art under it (convoy trucks on desktop, the
   reactor on phones): a firmer dark backing and edge in both the empty and the filled state */
#bankWrap:not(.empty){background:rgba(14,15,11,.86);border-color:rgba(255,255,255,.22)}
#bankWrap.empty .banklab{background:rgba(14,15,11,.82);border-color:rgba(255,255,255,.2)}
/* Apollo QA batch 13, no-clutter rule: on phones the right edge and the bottom-left stay clear of the reactor, the trucks
   and the player. The in-round zoom pair goes (pinch zooms; the lobby keeps its buttons), the combo shows only while a
   combo is running, and the power-up row only once it holds a power-up (its first pickup explains it) */
@media (max-width:480px){
  #combo:not(.on){visibility:hidden}
  #bankWrap.empty{display:none}
}
/* the phone zoom pair lives in HUD space, never over the field (parent, after QA batch 13: Kemar and Jaus need visible
   zoom controls): tall phones put it in the empty middle of the bottom row between Pause and Radio; short phones
   (Safari toolbar) put it in the bag row beside Radio, and the bag bar gives up that width */
@media (max-width:480px){
  .zoomhud{flex-direction:row;gap:6px;top:auto;right:auto;left:50%;transform:translateX(-50%);bottom:calc(24px + var(--sab))}
  body.lefty .zoomhud{right:auto;left:50%}
}
@media (max-width:480px) and (max-height:760px){
  .zoomhud{left:auto;transform:none;right:calc(max(16px,var(--sar)) + 50px);bottom:calc(18px + var(--sab));gap:4px}
  .zoomhud button{width:30px;height:30px;line-height:28px}
  .zoomhud .lic,.zoomhud .lic img{width:18px;height:18px}
  #bagbar{width:calc(100vw - 2 * max(16px,var(--sal),var(--sar)) - 104px - 68px)}
  body.lefty .zoomhud{right:auto;left:calc(max(16px,var(--sal)) + 50px)}
  body.lefty #bagbar{left:calc(max(16px,var(--sal)) + 52px + 68px)}
}
/* the in-round notice inside the HUD on phones: it covers the round and convoy chips while it shows, two short lines at
   most, opaque, above the HUD; the city backdrop and the field stay clear (Apollo DM 04:55) */
#toast.strip.inhud{transform:none;max-width:none;box-sizing:border-box;z-index:7;padding:2px 8px;gap:6px;align-items:center;
  background:rgba(14,15,11,.97);border:1px solid rgba(255,217,107,.55);border-radius:3px;box-shadow:none}
#toast.strip.inhud #toastText{font-size:11.5px;line-height:1.2;-webkit-line-clamp:2}
#toast.strip.inhud canvas.julian{width:22px;height:22px;flex:0 0 22px}
/* the HUD's second row on iPhone (Apollo DM 04:55: ROUND and CONVOY labels cut in half, REACTOR SHOP cut off): no
   clipping box or line clamp; long city or challenge names wrap and the row grows to fit */
@media (max-width:480px){
  #hud #roundChip,#hud #goalChip{overflow:visible}
  #hud #roundChip b,#hud #goalChip b{display:block;-webkit-line-clamp:unset;overflow:visible;white-space:normal;overflow-wrap:anywhere}
  #hud #shopHudBtn{height:auto;min-height:100%;overflow:visible}
}
/* Apollo QA batch 14, phones in a round: one slim notice line under the HUD (the round and convoy chips stay readable),
   the combo as a small badge on the SCORE chip instead of a box on the field, and the power-up row as slots only */
@media (max-width:480px){
  #toast.strip.slim{left:12px;right:12px;width:auto;transform:none;max-width:none;box-sizing:border-box;padding:3px 8px;gap:6px;
    background:rgba(14,15,11,.88);border:1px solid rgba(255,217,107,.4);border-radius:3px;box-shadow:none}
  #toast.strip.slim #toastText{font-size:12px;line-height:1.25;-webkit-line-clamp:3;line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;white-space:normal;overflow:hidden}   /* up to three lines: a sentence is never split across toasts (QA M1) */
  #toast.strip.slim canvas.julian{width:18px;height:18px;flex:0 0 18px}
  #combo{display:none!important}
  #hud #scoreChip{position:relative}
  #hud #scoreChip.combo::after{content:attr(data-combo);position:absolute;top:3px;right:4px;padding:1px 5px;font:700 11px/1.2 var(--font-mono);color:#1a1b15;background:#ffd96b;border-radius:2px}
  #bankWrap:not(.empty) .banklab{display:none}
}
/* the home portrait is a button to the character row, with a small "Change" caption under it (Kemar via Apollo) */
.lobbysheet .homefacebtn{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none;padding:0;margin:0;border:0;background:none;cursor:pointer;touch-action:manipulation}
.lobbysheet .homefacebtn[hidden]{display:none}
.lobbysheet .homefacebtn span{font:700 11px/1.1 var(--font-mono,monospace);letter-spacing:.6px;text-transform:uppercase;color:#a8a393}
.lobbysheet .homefacebtn:focus-visible{outline:2px solid #ffd96b;outline-offset:2px}
.lobbysheet .homerow .homefacebtn[hidden] + .homeline{text-align:center}
.lobbysheet .homerow .homefacebtn:not([hidden]) + .homeline{flex:1 1 0;min-width:0}
/* Apollo QA batch 15: on short phones the power-up panel takes the least room it can over the field: 34 px slots, no
   "?" (item help is in the pause menu), a tight backing */
@media (max-width:480px) and (max-height:760px){
  #bankWrap:not(.empty){padding:3px 4px;gap:4px}
  #bankWrap .itemq{display:none}
  #bank{gap:4px}
  .bankslot{width:34px;height:34px}
  .bankslot span{font-size:15px}
  .bankslot canvas{max-width:26px;max-height:26px}
}
/* the bag-full card on short phones: one compact row (no portrait, the shop button inline), about 44 px instead of 110
   (Apollo QA batch 17) */
@media (max-width:480px) and (max-height:760px){
  #bagTip{flex-wrap:nowrap;gap:8px;padding:6px 32px 6px 10px}
  #bagTip canvas{display:none}
  #bagTip p{flex:1 1 auto;min-width:0;font-size:12px;line-height:1.25}
  #bagTip #bagTipGo{width:auto;flex:none;padding:6px 8px;font-size:11px}
}
/* the power-up timers sit in the stack under the HUD (game.js layoutTopStack sets their top), centred like the other
   notices, never down on the field over plates and floats (Apollo QA batch 18) */
@media (max-width:480px){ #buffs{left:50%;transform:translateX(-50%);justify-content:center;max-width:calc(100vw - 24px)} body.lefty #buffs{left:50%} }
/* public build: no donate entries until Apollo and Julian approve (main.js PUBLIC_BUILD); the button rows are flex rows,
   so the remaining buttons close the gap on their own */
body.publicbuild #donateFromPause,body.publicbuild #donateFromBrief,body.publicbuild #resultV .support,body.publicbuild #donateV{display:none!important}
/* one big number (Apollo DM 14:07): SCORE is the number to watch; TIME and RP stay readable but small, and the row
   keeps its height, so the stack under the HUD does not move */
@media (max-width:480px){
  #hud #timeChip{flex:0 0 60px}
  #hud #scoreChip{flex:1.6 1 0}
  #hud #fuelChip{flex:1 1 0}
  #hud #scoreChip b{font-size:24px;line-height:1.05;letter-spacing:0}
  #hud #timeChip b,#hud #fuelChip b{font-size:13px}
}
@media (min-width:481px){ #hud #scoreChip b{font-size:1.35em} }

/* country picker and board privacy (Oct 21). Flags are emoji; Windows has none, so the flag-only Twemoji font
   covers just the regional-indicator code points and every other glyph falls through to the UI font. */
@font-face{font-family:"Twemoji Country Flags";src:url(../fonts/twemoji-flags.woff2) format("woff2");unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E0063,U+E0065,U+E0067,U+E006C,U+E006E,U+E0073-E0074,U+E0077,U+E007F;font-display:swap}
.countryrow{display:flex;flex-wrap:wrap;gap:var(--sp1,4px) var(--sp2,8px);align-items:center;margin-top:var(--sp2,8px)}
.countryrow > label:first-child{flex:0 0 100%;font-family:var(--font-mono);font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--nj-grey,#6b5a40)}
.countryrow input[type=text],#countryField{flex:1 1 100%;min-width:0;box-sizing:border-box;font-family:"Twemoji Country Flags",var(--font-ui);font-size:16px;padding:8px 10px;background:#0b0e11;color:#fafafa;border:1px solid var(--nj-line,#444);border-radius:0}
.countryrow .tog{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.3;cursor:pointer;flex:1 1 200px;min-width:0}
.countryrow .tog input{width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:var(--nj-green,#3a7)}
i.flag{font-style:normal;font-family:"Twemoji Country Flags","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;display:inline-block;line-height:1;vertical-align:-1px}
/* version tag (Kemar, Oct 21): the last item in the lobby bar on phones, so it can never sit over a button; from
   1000 px the bar's buttons are centred well clear of the corner and the tag moves to the top-right corner */
.lobbybar .vertag{order:99;align-self:center;font:500 11px/1 var(--font-mono,monospace);letter-spacing:.5px;color:#f2ead6;opacity:.75;white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.lobbybar .vertag:empty{display:none}
@media (min-width:1000px){ .lobbybar .vertag{position:absolute;top:8px;right:max(12px,var(--sar,0px))} }
/* short labels under the icons on phones (Apollo, Oct 22: icon-only buttons were a guess). Hidden on wider screens,
   where each button already carries its full name. Each button stays at least 48 x 48 px. */
.lobbybar .sl{display:none}
.lobbybar .langwrap{position:relative;display:inline-flex}
@media (max-width:480px){
  .lobbybar{gap:4px}
  .lobbybar .lbtn,.lobbybar .langpick .langbtn{width:auto;min-width:48px;max-width:68px;height:48px;min-height:48px;padding:0 4px 13px;position:relative}
  .lobbybar .sl{display:block;position:absolute;left:1px;right:1px;bottom:4px;font:600 11px/1 var(--font-mono,monospace);letter-spacing:0;
    text-transform:uppercase;color:#f2ead6;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
  .lobbybar .lobbyzoom .lbtn{width:44px;min-width:44px;height:44px;min-height:44px;padding:0}
  .lobbybar .vertag{font-size:11px;opacity:.85}
}
@media (max-width:370px){ .lobbybar .lbtn,.lobbybar .langpick .langbtn{min-width:46px;max-width:58px} .lobbybar{gap:3px} }
@media (max-width:480px){ .lobbybar .langwrap .sl{z-index:10;bottom:6px} }
/* lobby toasts sit at the foot of the screen (lead QA Oct 22: the first-visit JB tip at 120 px covered the start pill
   over the reactor at Mark III); the round HUD that lives down there is hidden in the lobby */
body.lobby:not(.inround) #toast.strip{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
/* the strip is never taller than its lines: in a round it hangs from its top (placeToastStrip sets it), so its bottom is
   free, and it never passes 30 % of the screen. body.inround is kept by main.js's frame loop from S.running (lead's
   release QA, Oct 26: with body.lobby left on mid-round, top 4px plus the lobby's bottom 14px stretched it to 826 px) */
#toast.strip{max-height:30vh}
body.inround #toast.strip{bottom:auto}

/* tap areas reach 44 pt without changing what is drawn (Free Game lesson 8): the close X and buy buttons get an invisible margin that takes the tap.
   The margin never reaches past the right edge: fitText() read that as overflowing text and shrank the prices to 9 px (Oct 24) */
.x::after{content:"";position:absolute;inset:-6px 0 -6px -12px}
.buy{position:relative}
.buy::after{content:"";position:absolute;inset:-3px 0 -3px -4px}
sup.reg{font-size:.5em;vertical-align:.8em;line-height:0;margin-left:.04em}

/* Touch targets (UI/UX QA M2 and M3, Oct 23, measured at 390x844): every control a thumb uses is at least 44 px tall, and
   neighbours sit far enough apart that their 44 px areas no longer overlap. Phones and touch screens only. */
@media (max-width: 760px), (pointer: coarse){
  html body :is(#startBtn, #nextBtn, #postBtn, #boardClose, #shopClose, #emailSaveBtn, #handBtn, #lbName, #shopHudBtn,
    #shopFromResult, #boardFromResult, #donateLink, .langbtn, .btab, .buy){ min-height:44px }
  html body :is(#shopX, #helpX, #boardX, #resultClose, .panel .x){ width:44px; height:44px; min-width:44px }
  html body #briefMap{ display:inline-flex; align-items:center; min-height:44px }
  html body .radio{ gap:8px } html body .radio .rbtn{ min-width:44px; min-height:44px; line-height:1.2 }
  html body :is(#nameField, #countryField, #emailField, #restoreEmail){ min-height:44px }
  html body .countryrow{ row-gap:4px } html body .countryrow .tog{ min-height:44px }
  html body .countryrow .tog input{ width:22px; height:22px }
  html body .pguide .g-toc a{ min-height:48px } html body .pguide :is(.g-all, .g-top){ min-height:44px }
}
/* iOS zooms the page on a focused field under 16 px (QA M4): the save and restore email fields were 14 px */
html body :is(#emailField, #restoreEmail){ font-size:16px }

/* Home, Exit and the exit card (Nina, Oct 23). On phones the version tag moves from the crowded top bar to the foot of
   the home sheet, and the Language label gets the width it needs at the 11 px floor */
.homepanel .homever{display:block;margin-top:10px;text-align:center;font:500 11px/1 var(--font-mono,monospace);letter-spacing:.5px;color:#a8a393}
.exitcard .panel{text-align:center;max-width:360px}
.exitcard .panel p{margin:10px 0 18px}
@media (max-width:480px){ .lobbybar .vertag{display:none} .lobbybar .langpick .langbtn{min-width:64px;max-width:72px} }
/* the rest of the brief's small controls (lead check at 375x667 after the QA fixes): restore and reset links, the shop and
   board buttons, and the volume slider get 44 px rows; the Volume label (an em size, 9.2 px) meets the 11 px floor */
@media (max-width: 760px), (pointer: coarse){
  html body :is(#restoreToggle, #resetBtn, #shopFromBrief, #boardFromBrief, #homeMore){ min-height:44px; display:inline-flex; align-items:center; justify-content:center }
  html body .vol input[type=range]{ height:44px }
}
html body .vol small{ font-size:11px }
/* Body text on phones and tablets (Apollo, Oct 23, from his iPhone shots: the body copy read small and soft): running text
   is 16 px with a comfortable line height; the short captions inside the small two-column cards are 14 px. Labels in the
   mono face keep their own sizes. The :is() list carries an id, so these win over the per-panel sizes above. */
@media (max-width: 760px), (pointer: coarse){
  html body :is(#homeTwist, #bTwist, #homeLine, #bSay, #wSay, #bFact, #saveNote, #saveCode, #gearPlasticNote, #wheelNote,
    #boostNote, #boardWeekNote, #codeCard p, #bagTip p, .say p span, .panel > p.note, .ghelp, .restorerow small,
    .countryrow .tog span, .or-order p, .or-note, .refauto, .howrp > div, .support small){ font-size:16px; line-height:1.45 }
  html body :is(#metaChips .mch, .or-pay, .charbtn span, .support b){ font-size:14px; line-height:1.35 }
}

/* Hit areas, part two (UI/UX report item 2, Oct 24): the controls the first pass missed (the pause and wheel buttons,
   Got it, Tap to play, the HUD shop chip, the in-round zoom, Radio and Pause, the team lock in the bar) and every size
   above 760 px with a mouse, where the lobby bar, zoom, radio and form buttons were 24 to 42 px. The drawing keeps its
   size: a transparent box on the control takes the tap and is at least 44 x 44. It grows up, down and to the left, never
   past the right edge, because fitText() reads any overflow to the right as text that does not fit and shrinks it.
   ::before, because ::after already carries the RP dot on the shop buttons and the close X's own margin. :where()
   keeps the list at no weight, so the narrower rules below can change the box. */
:where(:is(button, a):is(.go, .alt, .btab, .rbtn, .link), .lobbybar .lbtn, .langbtn, .zoomhud button, .itemq, .tutskip){ position:relative }
html body :where(:is(button, a):is(.go, .alt, .btab, .rbtn, .link), .lobbybar .lbtn, .langbtn, .zoomhud button, .itemq, .tutskip,
  #mute, #pauseBtn, #shopHudBtn)::before{ content:""; position:absolute; right:0; top:50%; width:max(100%, 44px);
  height:max(100% + 4px, 44px); transform:translateY(-50%); background:none; border:0 }
/* the lock is the last thing in the bar and sits flush against Language: its 44 px grows to the right only */
html body #gmLock.inbar::after{ content:""; position:absolute; left:0; top:0; width:44px; height:100% }
html body #bagTip .x::after{ inset:-8px 0 -8px -16px }
@media (max-width:480px){ html body #shopHudBtn{ position:relative } }
/* Radio and Pause clip their labels at the box edge, which also clipped the tap box: the label clips itself instead */
html body :is(#pauseBtn, #mute){ overflow:visible }
html body :is(#pauseBtn, #mute) small{ overflow:hidden; max-width:100% }
/* the zoom pairs sat 4 to 6 px apart, so two 44 px boxes overlapped: the buttons step 10 px apart (same size) */
html body .zoomhud{ gap:10px } html body .lobbyzoom{ gap:8px }
/* short phones keep the pair in the bag row between the bag bar and Radio. Two 44 x 44 boxes need 92 px there with a 2 px
   gap each side, so the bag bar gives up 18 px more (86 in all; hudOverlapTest, Oct 25: the boxes were 37 x 44). The
   buttons keep their 30 px drawing, centred in their boxes, 16 px apart */
@media (max-width:480px) and (max-height:760px){
  html body .zoomhud{ gap:16px; right:calc(max(16px,var(--sar)) + 53px) }
  html body.lefty .zoomhud{ right:auto; left:calc(max(16px,var(--sal)) + 53px) }
  html body .zoomhud button::before{ width:44px; height:44px; right:-7px; transform:translateY(-50%) }
  html body #bagbar{ width:calc(100vw - 2 * max(16px,var(--sal),var(--sar)) - 104px - 86px) }
  html body.lefty #bagbar{ left:calc(max(16px,var(--sal)) + 52px + 86px) }
}
/* the small text links stacked between buttons (Back to the map, Have a save, Reset, Start over) get a 44 px row
   instead of a box that would reach into their neighbours */
html body :is(#briefMap, #restoreToggle, #resetBtn, #homeDrop, #resumeDrop):not([hidden]){ display:inline-flex; align-items:center; justify-content:center; min-height:44px }
/* fields, toggles and the volume slider: a 44 px row at every size (the field and box drawn inside keep their look) */
html body :is(#nameField, #countryField, #emailField, #restoreEmail, #lbName){ min-height:44px }
html body .countryrow .tog{ min-height:44px }
html body .vol input[type=range]{ height:44px }

/* Labels at 12 px (UI/UX report item 4): the form labels (name, country, save, post) and the labels that carry a number
   (the jobs count on the brief chips, the RP ladder amounts and its progress bar). The rest of the text keeps the 11 px
   floor; the Inter scale waits for Apollo. */
html body :is(.namerow label, .countryrow > label:first-child, .saverow label, .restorerow label, .post label){ font-size:12px }
html body :is(.pbar b, .lrow .at, .metachip b){ font-size:12px }

/* RP badge on the HUD shop chip (visual research batch item 3, Oct 24): on phones "REACTOR" fills the chip and the badge
   sat on its last R, with 4 to 6 px to the next chip, so there is no room for it outside. There it becomes a dot on the
   corner, in the badge's own cream and ink; the filled orange chip and its pulse still say something is affordable.
   Desktop and the sheet buttons keep the RP badge, which is clear of their text. */
@media (max-width:480px){
  html body #shopHudBtn.can::after{ content:""; top:-4px; right:-4px; width:10px; height:10px; padding:0; border-radius:50%; box-sizing:border-box }
}

/* Beta notice (Nina, Oct 24): the home sheet says plainly that the game is a beta, as a small calm tag under the title,
   inside the panel and never over the map. The version line at the foot of the sheet is below the fold on short phones,
   so the tag sits with the title instead. Same outline style as the version tag on the results card. */
.homepanel .betatag{display:table;margin:2px auto 6px;padding:2px 8px;font:500 12px/1.4 var(--font-mono,monospace);letter-spacing:1.5px;
  text-transform:uppercase;color:#5dba63;border:1px solid rgba(93,186,99,.7)}
/* right-to-left languages set the sheet's text to the right, title included: the tag sits under the title there too */
:root[dir="rtl"] .homepanel .betatag{margin-right:0;margin-left:auto}