/* mek-FPS: neon on #07050f, mek's style.css voice (monospace, letterspaced
   uppercase, text-shadow glow). The SHELL stream owns this file. Layers: the
   WebGL canvas, the HUD (DOM, pointer-events none), the overlays (one .on at a
   time, src/ui/overlay.ts). No inline styles anywhere: CSP forbids them. */
html,body{margin:0;padding:0;height:100%;background:#07050f;overflow:hidden;}
body{font-family:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Roboto Mono","Courier New",monospace;color:#cfe9f5;-webkit-user-select:none;user-select:none;}
canvas{display:block;width:100vw;height:100vh;height:100dvh;touch-action:none;}
#c{position:fixed;top:0;left:0;cursor:none;}
body.title #c{cursor:default;}
button{-webkit-tap-highlight-color:transparent;}
/* ---- the HUD ---- */
#hud{position:fixed;inset:0;pointer-events:none;display:none;z-index:2;}
body.play #hud{display:block;}
/* the cockpit frame (hud.ts: --edge on #hud is the episode's edge colour; #hud.noframe hides it, the arms stay;
   #frame.dmg1 / .dmg2 crack it, #hud.shdown dims it). The HUD below sits on its lines. */
#hud{--edge:#22e3ff;}
#frame{position:fixed;inset:0;width:100%;height:100%;overflow:visible;transition:opacity .3s;}
#hud.noframe #frame{display:none;}
#frame stop{stop-color:var(--edge);}
#frame .sill{fill:#07050f;fill-opacity:.42;}
#frame .edge{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px var(--edge));}
#frame .inner{fill:none;stroke-width:1;opacity:.35;vector-effect:non-scaling-stroke;}
#frame .crack{fill:none;stroke:#fff;stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .25s;filter:drop-shadow(0 0 5px var(--edge));}
#frame.dmg1 .c1,#frame.dmg2 .crack{opacity:.85;}
#frame.dmg2 .crack{animation:lowPulse 1s ease-in-out infinite;}
#hud.shdown #frame{opacity:.45;}
/* level name + time, top centre; the name fades 3 s after it changes (hud.ts) */
#top{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);text-align:center;}
#lvl{font-size:22px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:#eaf9ff;
  text-shadow:0 0 18px rgba(34,227,255,.6),0 0 40px rgba(34,227,255,.25);transition:opacity .6s,transform .6s;}
#time{margin-top:4px;font-size:13px;letter-spacing:.22em;color:#eaf9ff;opacity:.75;text-shadow:0 0 12px rgba(34,227,255,.4);transition:opacity .6s;}
#top.fade #lvl{opacity:0;transform:translateY(-6px);}
#top.fade #time{opacity:.45;}
/* the target bar (queue 60): an emitter under fire, its hull in OR, magenta in its last third; fades 0.6 s */
#tbar{position:fixed;top:calc(64px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:160px;text-align:center;opacity:0;transition:opacity .6s;pointer-events:none;}
#tbar.on{opacity:1;transition:opacity .1s;}
#tbarName{display:block;white-space:nowrap;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#ff8a2a;text-shadow:0 0 8px rgba(255,138,42,.6);margin-bottom:4px;}
#tbarBar{height:6px;border:1px solid rgba(255,138,42,.5);}
#tbarFill{height:100%;width:100%;background:#ff8a2a;box-shadow:0 0 10px rgba(255,138,42,.55);transition:width .12s linear;}
#tbar.low #tbarFill{background:#ff3df0;box-shadow:0 0 10px rgba(255,61,240,.6);}
#tbar.low #tbarBar{border-color:rgba(255,61,240,.6);}
/* kills / secrets, top right */
#ticks{position:fixed;top:calc(3.4vh + 6px + env(safe-area-inset-top,0px));right:calc(9vw + env(safe-area-inset-right,0px));
  text-align:right;white-space:nowrap;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#eaf9ff;}
#ticks .lbl{opacity:.45;margin-left:14px;margin-right:8px;}
#ticks .lbl:first-child{margin-left:0;}
#ticks #kills,#ticks #secrets,#ticks #salv{text-shadow:0 0 10px rgba(34,227,255,.45);}
#ticks .full{color:#F0CE7A;text-shadow:0 0 12px rgba(240,206,122,.6);}
/* the three keycard chips, bottom left: dim until held */
/* the level id (queue 27): the ticks' type, dimmer, over the keycards in the bottom-left corner */
#lvlid{position:fixed;bottom:calc(16.5vh + 44px + env(safe-area-inset-bottom,0px));left:calc(1.6vw + 4px + env(safe-area-inset-left,0px));
  font-size:11px;letter-spacing:.22em;color:#eaf9ff;opacity:.4;white-space:nowrap;}
#keys{position:fixed;bottom:calc(16.5vh + 8px + env(safe-area-inset-bottom,0px));left:calc(1.6vw + 4px + env(safe-area-inset-left,0px));display:flex;gap:8px;}
#keys .key{--col:#22e3ff;width:18px;height:26px;border:1px solid var(--col);opacity:.18;position:relative;transition:opacity .25s,box-shadow .25s;}
#keys .key:after{content:'';position:absolute;left:4px;right:4px;top:5px;height:3px;background:var(--col);}
#keys .key.cy{--col:#22e3ff;}#keys .key.mg{--col:#ff3df0;}#keys .key.br{--col:#F0CE7A;}
#keys .key.held{opacity:1;background:rgba(7,5,15,.6);box-shadow:0 0 12px var(--col),inset 0 0 8px rgba(255,255,255,.08);}
/* the bars, bottom centre: shield (CY, thin) over hull (BR) */
#bars{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:180px;}
/* the bars' sill: a bracket of the frame's edge under them (part of the frame: hidden with it) */
#bars:before{content:'';position:absolute;left:-14px;right:-14px;top:-7px;bottom:-9px;border:1px solid var(--edge);border-top:0;opacity:.45;
  box-shadow:0 4px 10px -6px var(--edge);transition:opacity .3s;}
#hud.noframe #bars:before{display:none;}
#hud.shdown #bars:before{opacity:.2;}
#sh{height:4px;border:1px solid rgba(34,227,255,.4);margin-bottom:5px;transition:border-color .2s;}
#shFill{height:100%;width:100%;background:#22e3ff;box-shadow:0 0 10px rgba(34,227,255,.6);transition:width .1s linear;}
#sh.down{border-color:rgba(255,61,240,.5);}
#hp{height:8px;border:1px solid rgba(240,206,122,.45);transition:border-color .2s;}
#hpFill{height:100%;width:100%;background:#F0CE7A;box-shadow:0 0 10px rgba(240,206,122,.55);transition:width .12s linear;}
#hp.low{border-color:rgba(255,61,240,.7);}
/* the boost meter (w4-dash-boost): a hairline under the hull, quiet while full, lit while boosting, dim while it refills */
#bo{height:2px;margin-top:4px;background:rgba(234,249,255,.08);opacity:.35;transition:opacity .25s;}
#boFill{height:100%;width:100%;background:#eaf9ff;box-shadow:0 0 8px rgba(234,249,255,.6);}
#bo.on{opacity:1;transition:opacity .05s;}
#bo.low{opacity:.75;}
#bo.low #boFill{background:#ff3df0;box-shadow:0 0 8px rgba(255,61,240,.6);}
#hp.low #hpFill{background:#ff3df0;box-shadow:0 0 12px rgba(255,61,240,.7);animation:lowPulse 1s ease-in-out infinite;}
@keyframes lowPulse{0%,100%{opacity:1;}50%{opacity:.55;}}
/* the gun and its ammo, bottom right, in the gun's colour */
#gun{--col:#22e3ff;position:fixed;bottom:calc(16.5vh + 8px + env(safe-area-inset-bottom,0px));right:calc(1.6vw + 4px + env(safe-area-inset-right,0px));text-align:right;}
#gunName{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--col);opacity:.85;text-shadow:0 0 10px var(--col);}
#ammo{display:block;margin-top:2px;font-size:30px;line-height:1;letter-spacing:.1em;color:#eaf9ff;text-shadow:0 0 14px var(--col);}
#ammo.lowammo{color:#F0CE7A;}
#ammo.dry{color:#ff3df0;text-shadow:0 0 14px rgba(255,61,240,.7);}
/* the centre message: holds by length, fades out over .6s (hud.ts flashMessage) */
#message{position:fixed;top:38%;left:0;right:0;text-align:center;pointer-events:none;
  font-size:15px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:#eaf9ff;opacity:0;
  text-shadow:0 0 18px rgba(34,227,255,.6);transition:opacity .6s;}
#message.show{opacity:1;transition:opacity .15s;}
/* the interact prompt under the reticle (hud.ts): a key cap and a verb, a quick fade */
#prompt{position:fixed;top:calc(50% + 30px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  pointer-events:none;opacity:0;transition:opacity .12s;white-space:nowrap;}
#prompt.show{opacity:1;}
#promptKey{font-family:inherit;font-size:12px;line-height:1;color:#eaf9ff;border:1px solid rgba(34,227,255,.7);padding:3px 6px;
  background:rgba(7,5,15,.55);box-shadow:0 0 10px rgba(34,227,255,.45);text-shadow:0 0 8px rgba(34,227,255,.8);}
#promptVerb{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#22e3ff;text-shadow:0 0 10px rgba(34,227,255,.6);}
/* the ?dev line */
#dev{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:calc(14px + env(safe-area-inset-left,0px));display:none;
  font-size:10px;letter-spacing:.1em;color:#cfe9f5;opacity:.6;white-space:pre;}
#dev.on{display:block;}
/* a red-less low hull edge: a magenta vignette while the hull is low */
body.lowhull #hud:before{content:'';position:fixed;inset:0;pointer-events:none;
  box-shadow:inset 0 0 120px rgba(255,61,240,.22);animation:lowPulse 1s ease-in-out infinite;}
/* standing on a hazard floor: a hot red-orange edge from the bottom (the floor is burning you, not a drone) */
body.hazard #hud:after{content:'';position:fixed;inset:0;pointer-events:none;
  box-shadow:inset 0 -90px 110px -40px rgba(255,43,28,.38),inset 0 0 60px rgba(255,43,28,.12);}
/* a pickup taken (hud.ts pickupFx, queue 26): its target lights 0.4 s, a tick drifts up 20 px over
   0.8 s, the screen edge tints 0.3 s in the item's colour (--pk) */
#sh.pk,#hp.pk,#ammo.pk,#gun.pk,#salv.pk,#keys .key.pk{animation:pkLit .4s ease-out;}
@keyframes pkLit{0%{filter:brightness(2.4) drop-shadow(0 0 8px var(--pk,#fff));}100%{filter:none;}}
/* a key chip's flash lights it for the flash only (queue 69): a resting .pk opacity kept a chip lit after a
   respawn took the key away; held/not held is .held, painted from the runtime */
#keys .key.pk{animation-name:pkKeyLit;}
@keyframes pkKeyLit{0%{opacity:1;filter:brightness(2.4) drop-shadow(0 0 8px var(--pk,#fff));}100%{filter:none;}}
.ptick{position:fixed;opacity:0;pointer-events:none;white-space:nowrap;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  text-shadow:0 0 10px currentColor;}
.ptick.go{animation:pkTick .8s ease-out forwards;}
@keyframes pkTick{0%{opacity:0;transform:translateY(0);}12%{opacity:1;}100%{opacity:0;transform:translateY(-20px);}}
#ptint{position:fixed;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 110px 10px var(--pk,transparent);}
#ptint.go{animation:pkTint .3s ease-out forwards;}
@keyframes pkTint{0%{opacity:0;}25%{opacity:1;}100%{opacity:0;}}
/* ---- overlays ---- */
.overlay{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(7,5,15,.78);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);text-align:center;z-index:5;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);}
.overlay.on{display:flex;animation:fadeIn .18s ease-out;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
/* the box every menu sits in (mek's title box) */
.box{min-width:250px;max-width:min(360px,calc(100vw - 40px));max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto;box-sizing:border-box;
  padding:26px 32px 24px;border:1px solid rgba(34,227,255,.35);background:rgba(7,5,15,.6);
  box-shadow:0 0 40px rgba(255,61,240,.14) inset,0 0 26px rgba(34,227,255,.14);}
.box.wide{max-width:min(1100px,calc(100vw - 40px));width:min(1100px,calc(100vw - 40px));text-align:left;}
.box h1{font-size:44px;line-height:1;letter-spacing:.12em;margin:0 0 12px;font-weight:700;color:#eaf9ff;
  text-shadow:0 0 18px rgba(34,227,255,.55),0 0 42px rgba(255,61,240,.25);}
.box h2{margin:0 0 16px;font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:#eaf9ff;text-shadow:0 0 14px rgba(34,227,255,.45);}
.box .tag{font-size:13px;line-height:1.7;margin:0;opacity:.78;}
.row{margin-top:20px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.overlay button{background:transparent;color:#cfe9f5;border:1px solid rgba(34,227,255,.4);
  padding:10px 18px;font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  transition:border-color .15s,color .15s,box-shadow .15s;}
.overlay button:hover,.overlay button:focus-visible,.overlay button.pad{border-color:#ff8df5;color:#ff8df5;outline:none;}
.overlay button.pad{box-shadow:0 0 16px rgba(255,61,240,.3);}
#btnPlay{border-color:rgba(34,227,255,.8);color:#eaf9ff;box-shadow:0 0 14px rgba(34,227,255,.2);}
#btnPlay.cont{border-color:rgba(240,206,122,.8);box-shadow:0 0 14px rgba(240,206,122,.25);}
.box .note{min-height:16px;margin:14px 0 0;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#ff8df5;opacity:0;transition:opacity .2s;}
.box .note.show{opacity:.85;}
.box .hint{margin-top:14px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.45;text-align:center;}
.box .gh{font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.5;margin:0 0 8px;}
/* the title (src/ui/title.ts): mek's title box (mek public/style.css #title/#titleBox, w5-title-layout):
   its darker scrim, the 554 px box (480 px inside, 28/36/26 padding) and the one action row,
   PLAY / EPISODES / OPTIONS left to right; the note 12 px under it. 16 px gutters on a phone. */
#title{background:rgba(7,5,15,.86);}
#titleBox{width:min(554px,calc(100vw - 32px));max-width:none;padding:28px 36px 26px;}
#titleBox .note{margin-top:12px;}
/* the games ribbon (w5-title-ribbon), mek's "games strip" rules as they are: a quiet footer under the
   PLAY row, four tiles in a row, 2x2 on a phone, a thin rule above; no box at rest, only the
   hover/focus pink and the .here cyan (static on the fps tile). */
#titleBox .games{margin-top:18px;padding-top:12px;border-top:1px solid rgba(34,227,255,.14);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
#titleBox .game{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-height:44px;
  padding:8px 6px 7px;border:1px solid transparent;color:rgba(207,233,245,.72);text-decoration:none;box-sizing:border-box;
  transition:border-color .15s,color .15s;}
#titleBox .game .gn{font-size:11px;letter-spacing:.2em;text-transform:uppercase;}
#titleBox .game .gd{font-size:9px;line-height:1.45;letter-spacing:.06em;opacity:.45;}
#titleBox a.game:hover,#titleBox a.game:focus-visible{border-color:rgba(255,141,245,.6);color:#ff8df5;outline:none;}
#titleBox .game.here{border-color:rgba(34,227,255,.4);color:#cfe9f5;}
@media (max-width:440px){
  #titleBox{padding:24px 22px 22px;}
  #titleBox .games{grid-template-columns:repeat(2,minmax(0,1fr));}
}
#footnav{position:fixed;left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);
  bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;}
#footnav a,#footnav button{color:#cfe9f5;opacity:.6;text-decoration:none;padding:10px 8px;
  background:none;border:none;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;}
#footnav a:hover,#footnav a:focus-visible,#footnav button:hover,#footnav button:focus-visible{opacity:1;color:#22e3ff;outline:none;}
/* the share fallback (ui/share.ts): no share sheet, the link is copied and this says so */
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(64px + env(safe-area-inset-bottom,0px));
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#eaf9ff;
  background:rgba(7,5,15,.92);border:1px solid rgba(34,227,255,.4);padding:8px 16px;
  pointer-events:none;z-index:40;opacity:0;transition:opacity .15s;}
#toast.show{opacity:1;}
#footnav .version{flex-basis:100%;text-align:center;font-size:9px;letter-spacing:.2em;opacity:.35;}
/* ---- episodes: four columns in their colours ---- */
.eps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.ep{--col:#22e3ff;border:1px solid rgba(34,227,255,.16);border-top:2px solid var(--col);padding:10px 10px 8px;background:rgba(7,5,15,.45);min-width:0;}
.ep .eh{display:flex;align-items:baseline;gap:10px;margin:0 2px 8px;}
.ep .eh .num{font-size:18px;color:var(--col);text-shadow:0 0 12px var(--col);}
.ep .eh .nm{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#eaf9ff;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ep .eh .done{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#F0CE7A;text-shadow:0 0 10px rgba(240,206,122,.6);}
.overlay button.lv{display:grid;grid-template-columns:16px 1fr;grid-template-rows:auto auto;column-gap:8px;row-gap:1px;align-items:baseline;width:100%;box-sizing:border-box;text-align:left;
  margin-top:4px;padding:6px 8px;border-color:rgba(34,227,255,.16);letter-spacing:.14em;}
.overlay button.lv .n{grid-row:1 / span 2;font-size:11px;color:var(--col);opacity:.8;}
.overlay button.lv .nm{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.overlay button.lv .rec{grid-column:2;font-size:9px;letter-spacing:.14em;opacity:.5;min-height:12px;display:flex;gap:10px;text-transform:none;}
.overlay button.lv .rec b{font-weight:400;}
.overlay button.lv .rec .t{color:#eaf9ff;}
.overlay button.lv.cleared{border-color:rgba(34,227,255,.4);}
.overlay button.lv.cleared .nm{color:#eaf9ff;}
.overlay button.lv.locked{opacity:.3;cursor:default;}
.overlay button.lv.locked:hover{border-color:rgba(34,227,255,.16);color:#cfe9f5;}
.overlay button.lv:hover .n,.overlay button.lv.pad .n{text-shadow:0 0 10px var(--col);}
@media (max-width:900px){.eps{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:480px){.eps{grid-template-columns:1fr;}}
/* ---- options: rows, a value a tap flips or steps ---- */
.orows{text-align:left;}
.orow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 4px;border-bottom:1px solid rgba(34,227,255,.12);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;outline:none;border-left:1px solid transparent;transition:border-color .15s,background .15s;}
.orow:hover,.orow.pad{background:rgba(34,227,255,.05);}
.orow.pad{border-left-color:#ff8df5;border-bottom-color:rgba(255,141,245,.4);}
.orow .on{opacity:.65;}
.orow.pad .on{opacity:1;}
.orow .oc{display:flex;align-items:center;gap:4px;}
.orow .ov{min-width:54px;text-align:center;color:#22e3ff;text-shadow:0 0 10px rgba(34,227,255,.4);}
.orow.isOff .ov{color:#cfe9f5;opacity:.55;text-shadow:none;}
.overlay button.arr{padding:2px 8px;font-size:14px;line-height:1;letter-spacing:0;border-color:rgba(34,227,255,.2);}
.orow.toggle .oc{padding-right:26px;}
.onote{font-size:9px;letter-spacing:.12em;opacity:.4;padding:4px 4px 8px;text-align:left;border-bottom:1px solid rgba(34,227,255,.12);line-height:1.5;}
/* ---- how to play: three columns of key + what ---- */
.hcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);gap:22px;}
.hrow{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:5px 0;font-size:11px;line-height:1.5;letter-spacing:.06em;opacity:.85;}
.hrow kbd{font-family:inherit;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#eaf9ff;border:1px solid rgba(34,227,255,.4);padding:1px 7px;white-space:nowrap;line-height:1.5;}
.hcol.r .hrow kbd{color:#ff8df5;border-color:rgba(255,141,245,.45);}
@media (max-width:760px){.hcols{grid-template-columns:1fr;}}
/* ---- pause ---- */
#pause{background:rgba(7,5,15,.72);}
#pause .big,#clickplay .big{font-size:26px;letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:#eaf9ff;text-shadow:0 0 20px rgba(34,227,255,.55);}
#pause .sm,#clickplay .sm{margin-top:12px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;opacity:.5;}
#clickplay{cursor:pointer;background:rgba(7,5,15,.5);z-index:4;}
/* ---- the cards: results, episode, final ---- */
#card,#end{cursor:pointer;}
.cardbox{--col:#22e3ff;min-width:300px;max-width:min(460px,calc(100vw - 40px));padding:24px 34px 22px;box-sizing:border-box;
  border:1px solid rgba(34,227,255,.3);border-top:2px solid var(--col);background:rgba(7,5,15,.72);
  box-shadow:0 0 40px rgba(255,61,240,.12) inset,0 0 26px rgba(34,227,255,.12);color:#eaf9ff;}
.cardbox .small{font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.5;}
.cardbox .big{margin-top:8px;font-size:34px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:#eaf9ff;
  text-shadow:0 0 26px rgba(34,227,255,.75),0 0 60px rgba(34,227,255,.35);}
.cardbox .story{margin-top:12px;font-size:12px;line-height:1.6;letter-spacing:.06em;color:#cfe9f5;opacity:.75;}
.stats{margin:20px auto 0;max-width:300px;text-align:left;}
.st{display:flex;justify-content:space-between;gap:16px;padding:6px 2px;border-bottom:1px solid rgba(34,227,255,.12);font-size:12px;letter-spacing:.16em;text-transform:uppercase;}
.st .k{opacity:.55;}
.st .v{color:#eaf9ff;text-shadow:0 0 10px rgba(34,227,255,.35);white-space:nowrap;}
.st.full .v{color:#F0CE7A;text-shadow:0 0 12px rgba(240,206,122,.6);}
.st.over .v{color:#ff8df5;}
.cardbox .hint{margin-top:20px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;opacity:.6;animation:blink 1.6s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:.35;}50%{opacity:.85;}}
.cardbox .nextep{margin-top:18px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--col);text-shadow:0 0 12px var(--col);}
.cardbox.final{border-top-color:#F0CE7A;}
.cardbox.final .big{color:#fff3cf;text-shadow:0 0 26px rgba(240,206,122,.8),0 0 70px rgba(240,206,122,.4);}
.cardbox .credits{margin-top:18px;font-size:10px;line-height:1.7;letter-spacing:.14em;text-transform:uppercase;opacity:.5;}
.cardbox .credits a{color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:underline;text-underline-offset:2px;}
/* ---- the perk pick (mek's choice overlay) ---- */
#perkpick{gap:22px;background:rgba(7,5,15,.72);}
#perkpick .ch{font-size:15px;letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:#eaf9ff;text-shadow:0 0 20px rgba(34,227,255,.55);}
#perkpick .cards{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;padding:0 16px;}
.overlay button.card{--col:#22e3ff;position:relative;width:224px;min-height:120px;padding:20px 22px 16px;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;gap:10px;letter-spacing:normal;text-transform:none;
  background:rgba(7,5,15,.8);border:1px solid rgba(34,227,255,.3);border-top:3px solid var(--col);
  box-shadow:0 0 22px rgba(34,227,255,.1);color:#cfe9f5;transition:border-color .15s,box-shadow .15s,transform .15s;}
.overlay button.card:hover,.overlay button.card:focus-visible,.overlay button.card.pad{border-color:#ff8df5;border-top-color:var(--col);box-shadow:0 0 26px rgba(255,61,240,.22);transform:translateY(-2px);color:#cfe9f5;}
.overlay button.card.pad .key{opacity:1;color:#ff8df5;border-color:#ff8df5;}
.overlay button.card .key{position:absolute;top:6px;left:8px;font-size:10px;letter-spacing:.1em;opacity:.5;width:16px;height:16px;line-height:16px;border:1px solid rgba(207,233,245,.4);}
.overlay button.card .nm{font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:#eaf9ff;text-shadow:0 0 12px var(--col);}
.overlay button.card .bl{font-size:11px;line-height:1.5;letter-spacing:.06em;opacity:.78;}
#perkpick .hint{font-size:10px;letter-spacing:.26em;text-transform:uppercase;opacity:.45;}
/* ---- the ?sfx board (demo.ts) ---- */
.sfxgrid{display:grid;grid-template-columns:repeat(4,auto 1fr);gap:6px 10px;align-items:center;font-size:10px;}
.sfxgrid .bl{opacity:.5;letter-spacing:.06em;}
.sfxgrid button{padding:5px 10px;font-size:10px;}
/* ---- phones ---- */
@media (max-width:560px),(max-height:500px){
  #lvl{font-size:16px;}
  /* the ticks would print through the level name on a phone: they go under the time */
  #ticks{top:calc(64px + env(safe-area-inset-top,0px));right:50%;transform:translateX(50%);font-size:10px;}
  #bars{width:132px;bottom:calc(60px + env(safe-area-inset-bottom,0px));}
  #ammo{font-size:22px;}
  .box{padding:18px 18px 16px;}
  .box h1{font-size:34px;}
  .cardbox{padding:18px 18px 16px;min-width:0;}
  .cardbox .big{font-size:24px;}
}
/* ---- comfort ---- */
@media (prefers-reduced-motion:reduce){
  .overlay.on{animation:none;}
  .cardbox .hint{animation:none;opacity:.6;}
  #hp.low #hpFill,body.lowhull #hud:before{animation:none;}
  #top.fade #lvl{transform:none;}
  .ptick.go{animation-name:pkFade;}
  .overlay button.card:hover,.overlay button.card.pad{transform:none;}
}
@keyframes pkFade{0%{opacity:0;}12%{opacity:1;}100%{opacity:0;}}
/* ---- the tilde console (src/ui/console.ts): top third, over everything ---- */
#console{position:fixed;left:0;right:0;top:0;height:34vh;min-height:160px;display:none;flex-direction:column;z-index:20;
  background:rgba(7,5,15,.88);border-bottom:1px solid rgba(34,227,255,.55);box-shadow:0 0 22px rgba(34,227,255,.22);
  font-size:12px;line-height:1.5;-webkit-user-select:text;user-select:text;}
#console.on{display:flex;}
#conLog{flex:1;overflow-y:auto;padding:8px 14px 4px;white-space:pre-wrap;word-break:break-word;color:#cfe9f5;}
#conLog .in{color:#22e3ff;text-shadow:0 0 8px rgba(34,227,255,.45);}
#conLog .ok{color:#F0CE7A;}
#conLog .err{color:#ff3df0;}
#conLog .dim{opacity:.5;}
#conLog .fix{color:#22e3ff;text-shadow:0 0 8px rgba(34,227,255,.55);}
#conLog .open{color:#d9a441;opacity:.6;}
#conRow{display:flex;align-items:center;gap:8px;padding:4px 14px 6px;border-top:1px solid rgba(34,227,255,.22);}
#conRow .pr{color:#ff3df0;text-shadow:0 0 8px rgba(255,61,240,.6);}
#conIn{flex:1;background:transparent;border:0;outline:none;color:#eaf9ff;font:inherit;caret-color:#22e3ff;padding:2px 0;}