/* Layout: full-bleed WebGL arena; UI as slanted neon bars anchored bottom-left, HUD pinned to top edge. Single dark arcade look; palette tokens are rewritten live by the game as phases change. */
:root{
  color-scheme: dark;
  --wall:#3df2ff;
  --bgA:#071a2b;
  --bgB:#0b2740;
  --ink:#f2fbff;
  --ink-dim:rgba(242,251,255,.62);
  --shade:rgba(2,6,12,.74);
  --danger:#ff3b4f;
  --font-display:'Chakra Petch','Arial Narrow',system-ui,sans-serif;
  --font-num:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}
/* Base reset (the standalone page has no host reset) */
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none!important;}
body{margin:0;}
html,body{height:100%;}
body{background:#03060b;color:var(--ink);font-family:var(--font-display);overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
#app{position:fixed;inset:0;overflow:hidden;background:var(--bgA);}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;}
#flash{position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0;}
#vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0 0 auto 0;pointer-events:none;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding-top:calc(env(safe-area-inset-top,0px) + 14px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));}
.hud-left,.hud-right{display:flex;flex-direction:column;gap:6px;}
.hud-right{align-items:flex-end;}
.tag{display:inline-flex;align-items:center;gap:8px;background:var(--shade);padding:4px 14px 4px 10px;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);font-weight:700;letter-spacing:.14em;font-size:13px;}
.tag b{color:var(--wall);}
.phasebar{width:160px;height:4px;background:rgba(255,255,255,.12);}
.phasebar i{display:block;height:100%;width:0;background:var(--wall);}
.timebox{background:var(--shade);padding:2px 12px 4px 26px;clip-path:polygon(16px 0,100% 0,100% 100%,0 100%);
  font-family:var(--font-num);font-weight:700;font-size:clamp(34px,7vw,56px);line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.timebox small{font-size:.38em;color:var(--ink-dim);margin-left:4px;}
.best{font-family:var(--font-num);font-size:13px;color:var(--ink-dim);letter-spacing:.06em;font-variant-numeric:tabular-nums;background:var(--shade);padding:2px 10px;}
#btn-pause{pointer-events:auto;width:40px;height:40px;border:0;background:var(--shade);color:var(--ink);font:700 15px var(--font-display);cursor:pointer;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);}
#banner{position:absolute;left:0;right:0;top:24%;text-align:center;pointer-events:none;opacity:0;
  font-weight:700;font-style:italic;font-size:clamp(28px,7vw,64px);letter-spacing:.08em;color:var(--ink);
  text-shadow:4px 4px 0 var(--bgA),0 0 24px var(--wall);transition:opacity .25s, transform .25s;transform:scale(.92);}
#banner.show{opacity:1;transform:scale(1);}
#banner small{display:block;font-size:.3em;letter-spacing:.3em;font-style:normal;color:var(--wall);}
#touchhint{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;pointer-events:none;opacity:0;transition:opacity .6s;}
#touchhint.show{opacity:1;}
#touchhint div{display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 28px);
  font-weight:700;letter-spacing:.2em;font-size:13px;color:var(--ink-dim);}
#touchhint div:first-child{border-right:1px dashed rgba(255,255,255,.18);}

/* ---------- Screens ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;gap:24px;overflow-y:auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:calc(env(safe-area-inset-top,0px) + 28px) calc(env(safe-area-inset-bottom,0px) + 28px);}
.screen.dim{background:linear-gradient(90deg,rgba(2,5,10,.82) 0%,rgba(2,5,10,.55) 55%,rgba(2,5,10,.15) 100%);}
.brand .kicker{margin:0 0 6px;font-size:13px;letter-spacing:.32em;color:var(--wall);font-weight:700;text-transform:uppercase;}
.logo{margin:0;font-weight:700;font-style:italic;line-height:.82;font-size:clamp(64px,15vw,168px);letter-spacing:-.02em;
  display:flex;flex-direction:column;text-wrap:balance;}
.logo span{color:var(--ink);text-shadow:5px 5px 0 var(--bgB),10px 10px 0 rgba(0,0,0,.35);}
.logo span:last-child{color:var(--wall);margin-left:.42em;}
.title2{margin:0;font-weight:700;font-style:italic;font-size:clamp(40px,8vw,76px);line-height:.9;letter-spacing:.01em;text-shadow:4px 4px 0 var(--bgB);}
.title2 em{color:var(--wall);font-style:italic;}
.menu{display:flex;flex-direction:column;gap:10px;width:min(520px,100%);}
.item{appearance:none;border:0;cursor:pointer;color:var(--ink);background:var(--shade);text-align:left;
  font:700 clamp(20px,4.2vw,28px)/1 var(--font-display);letter-spacing:.1em;padding:14px 22px 14px 20px;
  transform:skewX(-14deg);border-left:6px solid var(--wall);display:flex;justify-content:space-between;align-items:center;gap:12px;
  transition:background .12s,color .12s,padding .12s;}
.item > *{transform:skewX(14deg);}
.item .meta{font:500 12px var(--font-num);letter-spacing:.04em;color:var(--ink-dim);text-align:right;}
.item:hover,.item:focus-visible{background:var(--wall);color:#03060b;outline:none;padding-left:30px;}
.item:hover .meta,.item:focus-visible .meta{color:rgba(3,6,11,.75);}
.item.small{font-size:18px;padding:11px 18px;}
.item.ghost{background:transparent;border-left-color:rgba(255,255,255,.35);}
.keys{font:500 12px var(--font-num);color:var(--ink-dim);letter-spacing:.06em;display:flex;flex-wrap:wrap;gap:6px 18px;}
.keys kbd{font:700 11px var(--font-num);border:1px solid rgba(255,255,255,.3);padding:1px 6px;color:var(--ink);}
.mode-desc{font:500 12px var(--font-num);color:var(--ink-dim);letter-spacing:.02em;text-transform:none;display:block;margin-top:6px;}
.stack{display:flex;flex-direction:column;gap:18px;}
.field{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--shade);padding:10px 16px;width:min(520px,100%);flex-wrap:wrap;}
.field label{font-weight:700;letter-spacing:.12em;font-size:15px;}
.field input[type=range]{width:min(220px,50vw);accent-color:var(--wall);}
.field select{font:500 14px var(--font-num);background:#0a0f18;color:var(--ink);border:1px solid var(--wall);padding:6px 8px;max-width:100%;}
.toggle{appearance:none;border:2px solid var(--wall);background:transparent;color:var(--ink);font:700 13px var(--font-num);letter-spacing:.1em;
  padding:6px 12px;min-width:74px;cursor:pointer;}
.toggle[aria-pressed="true"]{background:var(--wall);color:#03060b;}
.toggle:focus-visible,.field select:focus-visible,.field input:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.note{font:500 12px var(--font-num);color:var(--ink-dim);max-width:60ch;line-height:1.5;}
.rec-wrap{overflow-x:auto;width:min(640px,100%);}
table.rec{border-collapse:collapse;width:100%;font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:14px;}
table.rec th{text-align:left;font:700 12px var(--font-display);letter-spacing:.16em;color:var(--wall);padding:8px 10px;border-bottom:2px solid var(--wall);}
table.rec td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.1);background:var(--shade);}
table.rec td:first-child{font-family:var(--font-display);font-weight:700;letter-spacing:.1em;}
table.rec td.num{text-align:right;}
table.rec th.num{text-align:right;}
.deaths{display:flex;flex-wrap:wrap;gap:8px;}
.chip{font:500 12px var(--font-num);background:var(--shade);border:1px solid rgba(255,255,255,.2);padding:4px 10px;}
.chip b{color:var(--wall);}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}

/* results */
.res-time{font:700 clamp(64px,16vw,150px)/.9 var(--font-num);letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  text-shadow:6px 6px 0 var(--bgB);}
.res-time small{font-size:.3em;color:var(--ink-dim);letter-spacing:0;}
.badge{display:inline-block;background:var(--wall);color:#03060b;font-weight:700;letter-spacing:.2em;font-size:15px;padding:6px 14px;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);animation:blink .7s steps(2) infinite;}
.badge[hidden]{display:none!important;}
@keyframes blink{50%{opacity:.55}}
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;width:min(620px,100%);}
.res-grid div{background:var(--shade);padding:10px 14px;display:flex;flex-direction:column;gap:4px;min-width:0;}
.res-grid span{font:700 11px var(--font-display);letter-spacing:.18em;color:var(--wall);}
.res-grid b{font:700 17px var(--font-num);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
#err{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font:500 15px var(--font-num);}
@media (prefers-reduced-motion: reduce){ .badge{animation:none} #banner{transition:none} }
@media (max-width:520px){ .phasebar{width:110px} .tag{font-size:11px} }