/* tvlogo.monster: colours leaned toward the site's palette, keeping WUBBOTRON's neon-rave character. Before -> after:
   cyan #33ffcc -> #67e8f9 (the site's cyan), pink #ff33ff -> #ff4fd0 (a touch warmer), gold #ffcc33 -> #ffc14a
   (warmer), grey #999999 -> #aaa1ab (the site's muted grey), page black #000000 -> #0d0b10 (the site's dark);
   the touch sticks' cyan and pink to match. lars's layout unchanged */
@font-face{font-family:'Whorl Arcade';src:url('./core/fonts/whorl-arcade.ttf') format('truetype');font-display:block}
/* FLOE STATE's pixel grid: --px is one UI pixel in CSS pixels (set from the window size by main.js); UI type is Whorl
   Arcade at --s (small) and --m (one UI pixel per font pixel). Square edges, soft Minter-style glow on the type. */
:root{color-scheme:dark;--px:4px;--fp:calc(var(--px) / 2);--s:calc(var(--px) * 4);--m:calc(var(--px) * 8);
  --ink:#0d0b10;--white:#ffffff;--cyan:#67e8f9;--pink:#ff4fd0;--gold:#ffc14a;--grey:#aaa1ab;
  --glow:0 0 var(--fp) rgb(0 0 0 / .9),0 0 calc(var(--px) * 1.5) color-mix(in srgb,currentColor 50%,transparent)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--white);overflow:hidden;font-family:'Whorl Arcade',monospace;font-size:var(--s);line-height:1.5;user-select:none;-webkit-user-select:none;touch-action:none}
#stage canvas{display:block}
.hud{position:fixed;left:16px;right:16px;top:calc(12px + env(safe-area-inset-top, 0px));display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none;color:var(--cyan);text-shadow:var(--glow)}
#score{font-size:var(--m);line-height:1;color:var(--gold)}
/* the bit meter: 2 4 8 16 32, the current tier lit, the multiplier beside it and the fuse burning underneath */
#bits{margin-top:var(--px);display:flex;gap:calc(var(--px) * 2);align-items:baseline}
#bits span{color:var(--grey);opacity:.5}
#bits span.on{color:var(--pink);opacity:1}
#bits b{font-weight:400;margin-left:var(--px);color:var(--white)}
#fuse{height:calc(var(--px) * 2);margin-top:var(--px);width:calc(var(--px) * 40);border:var(--fp) solid var(--pink)}
#fuse i{display:block;height:100%;width:0;background:var(--pink)}
#wave{text-align:center;flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* gives way on a narrow phone; the marquee announces the wave anyway */
#lives{text-align:right}
/* the party meter: under the lives, a cell for each step of the party, lit as the crowd reaches it, the next filling */
#party{margin-top:var(--px);text-align:right;color:var(--gold)}
#partyName,#lives{white-space:nowrap}
#partyCells{display:flex;gap:var(--fp);justify-content:flex-end;margin-top:var(--px)}
#partyCells span{position:relative;width:calc(var(--px) * 2.5);height:calc(var(--px) * 2);border:var(--fp) solid var(--gold);opacity:.5}
#partyCells span.on{opacity:1;background:var(--gold)}
#partyCells span i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold)}
/* the gun (main.js hudGun): bottom left, a chip each for the active gun and what's stacked on it, in their own colours
   and in the order a shot goes through them; the active gun bigger, a recipe pulsing in front, a bar draining under
   anything on a timer */
#gun{position:fixed;left:16px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));color:var(--cyan);text-shadow:var(--glow);pointer-events:none;transition:opacity .3s;
  display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--px) * 1.5) var(--px);max-width:min(72vw, calc(var(--px) * 220))}
#gun .it{display:flex;align-items:center;gap:var(--px)}
#gun b{font-weight:400;color:var(--grey)}
#gun .chip{position:relative;color:var(--c);border:var(--fp) solid var(--c);padding:0 var(--px);line-height:1.6;background:rgb(0 0 0 / .45);white-space:nowrap}
#gun .chip.osc{font-size:calc(var(--s) * 1.5);border-width:var(--px);padding:0 calc(var(--px) * 1.5)}
#gun .chip.pedal{border-style:dashed}
#gun .chip.hint{opacity:.6;border-style:dotted}
#gun .chip.fusion{animation:fusion .47s ease-in-out infinite}
@keyframes fusion{50%{background:color-mix(in srgb, var(--c) 35%, transparent)}}
#gun .chip i{position:absolute;left:0;bottom:calc(var(--fp) * -3);height:var(--fp);width:100%;background:var(--c)}
/* the SUB CANNON's shells: pixel art with depth, each shell a block with a darker side under it, a spent one dark; the
   chip breathes while the cannon loads (the HUD carries the intensity, Erik, 14 October 2026) */
#gun .chip s{display:inline-flex;gap:var(--px);margin-left:calc(var(--px) * 1.5);text-decoration:none;vertical-align:middle}
#gun .chip u{display:inline-block;width:calc(var(--px) * 2);height:calc(var(--px) * 3);background:var(--c);box-shadow:var(--fp) var(--fp) 0 color-mix(in srgb,var(--c) 40%,#000);text-decoration:none}
#gun .chip u.spent{background:#2a2c36;box-shadow:var(--fp) var(--fp) 0 #0c0c10}
#gun .chip.loading{animation:cannonload .43s ease-in-out infinite alternate}
@keyframes cannonload{to{box-shadow:0 0 calc(var(--px) * 3) var(--c);filter:brightness(1.5)}}
body.title #gun{opacity:0}
/* the arms (Erik, 20 October 2026: the gun as pixel glyphs, one stacked emblem like the drop's, beside the drop rack):
   the gun's emblem (main.js hudGun, gunglyphs.js) and the drop rack's (hudRack), side by side over the chips, each
   scaled up by whole pixels (resize) with its name under it; the gun's name its pieces in their colours, a bar
   draining under anything on a timer */
#arms{position:fixed;left:16px;bottom:calc(12px + env(safe-area-inset-bottom, 0px) + var(--s) * 2.6);display:flex;align-items:flex-end;gap:calc(var(--px) * 4);pointer-events:none;transition:opacity .3s}
#arms>div{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--px) * 1.5)}
#arms canvas{image-rendering:pixelated;background:rgb(0 0 0 / .45)}
#gunglyph b span.hint{opacity:.55;animation:hintBlink .47s ease-in-out infinite}
@keyframes hintBlink{50%{opacity:.2}}
#rack.kept canvas{animation:rackKept 1.2s ease-in-out}
@keyframes rackKept{0%,33%,66%{box-shadow:0 0 0 var(--px) #fff}17%,50%,83%{box-shadow:none}}
#arms b{font-weight:400;color:var(--grey);text-shadow:var(--glow);max-width:36vw;line-height:1.5}
#gunglyph b span{position:relative;color:var(--c);white-space:nowrap}
#gunglyph b span i{position:absolute;left:0;bottom:calc(var(--fp) * -2);height:var(--fp);width:100%;background:var(--c)}
#gunglyph b span.fusion{animation:fusionText .47s ease-in-out infinite}
@keyframes fusionText{50%{color:#fff}}
#rack{opacity:0;transition:opacity .3s}
#rack.on{opacity:1}
#rack b.named{color:#ffb020}
body.title #arms,body.demo #arms,body.paused #arms,body.scores #arms{opacity:0}
/* the title (pixeltitle.js): the pixel-art night over the game's own canvas, scaled up crisp; it fades as a game starts */
#pixeltitle{position:fixed;inset:0;width:100%;height:100%;image-rendering:crisp-edges;image-rendering:pixelated;transition:opacity .6s ease-out}
#pixeltitle.gone{opacity:0;pointer-events:none}
/* the attract mode's tag (main.js startDemo): over the demo's play, blinking */
#demoTag{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom, 0px));display:none;color:var(--gold);font-size:calc(var(--s) * 1.5);white-space:nowrap;text-shadow:var(--glow);pointer-events:none;z-index:3}
body.demo #demoTag{display:block}
body.demo #gun{opacity:0}
/* on a touch screen the gun and its glyphs go up under the score, out from under the left thumb (the phones pass,
   22 October 2026: the move ring sat over them); and every pulse above is smooth, never stepped (Erik: text flows) */
@media (pointer: coarse){#gun{bottom:auto;top:calc(12px + env(safe-area-inset-top, 0px) + var(--m) + var(--s) * 1.5 + var(--px) * 7)}#arms{bottom:auto;top:calc(12px + env(safe-area-inset-top, 0px) + var(--m) + var(--s) * 4.3 + var(--px) * 9)}}
/* the title: no HUD, and the Whorl mark with the word WHORL in the bottom-right corner, turning */
.hud{transition:opacity .3s}
body.title .hud{opacity:0}
.corner{position:fixed;right:16px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));display:none;align-items:center;gap:calc(var(--px) * 3);color:#ff7f62;pointer-events:none}
body.title .corner{display:flex}
/* the controls, under the title's prompt from the first frame */
#controls{position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));display:none;flex-direction:column;align-items:center;gap:var(--px);text-align:center;color:var(--grey);text-shadow:var(--glow);pointer-events:none}
#controls b{font-weight:400;color:var(--cyan)}
body.title #controls{display:flex;left:calc(24px + var(--corner, 0px));right:calc(24px + var(--corner, 0px))}   /* clear of the WHORL corner (main.js sets --corner, its width), both sides so it stays centred: the play stats line ran under it */
#controls .tc{display:none}
@media (pointer: coarse){#controls .kb{display:none}#controls .tc{display:block}}
/* the volume slider: top left on the title (no HUD there), bottom left while paused (where the gun line is in play) */
#volume{position:fixed;left:16px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));display:none}
body.title #volume,body.paused #volume{display:inline-flex}
body.paused #gun{opacity:0}
body.title #volume{bottom:auto;top:calc(12px + env(safe-area-inset-top, 0px))}
/* on the title the corner's settings sit back, there when you want them (full on hover or keyboard focus) */
body.title #volume,body.title #historyBtn{opacity:.45;transition:opacity .2s}
body.title #volume:hover,body.title #volume:focus-within,body.title #historyBtn:hover,body.title #historyBtn:focus-visible{opacity:1}
/* edge arrows (main.js): what's off the screen on a strip, an arrow pointing at it: gold the Waddle, cyan a generator */
.edge{position:fixed;left:0;top:0;width:0;height:0;display:none;pointer-events:none;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:16px solid var(--gold);filter:drop-shadow(0 0 4px var(--gold));transform-origin:8px 9px}
/* the blizzard (main.js snowStep): the HUD on a dark backing while the snow is thick, so its pale type reads */
body.snowing .hud>div,body.snowing #gun,body.snowing #arms b{background:rgb(0 0 0 / .6);box-shadow:0 0 0 calc(var(--px) * 2) rgb(0 0 0 / .6)}
/* the play stats' line on the title (main.js showStats): its switch is a button the controls' block lets through */
.stats-btn{font:inherit;color:var(--cyan);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:.3em;pointer-events:auto;text-shadow:inherit}
.stats-btn.off{color:var(--grey)}
/* the version (the changelog's newest release, main.js): under the volume slider on the title; it opens the version
   history, a page of what changed in each release */
#historyBtn{position:fixed;left:16px;top:calc(12px + var(--px) * 9 + env(safe-area-inset-top, 0px));display:none;font:inherit;color:var(--grey);background:none;border:0;padding:0;cursor:pointer;text-shadow:var(--glow)}
body.title #historyBtn{display:block}
#history{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;gap:var(--m);padding:calc(24px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));background:rgb(0 0 0 / .96);z-index:5;text-shadow:var(--glow)}
#history.show{display:flex}
#history h1{font-size:var(--m);font-weight:400;margin:0;color:var(--gold)}
.hist-list{width:min(100%, calc(var(--px) * 180));flex:1 1 auto;min-height:0;overflow-y:auto;text-align:left;display:flex;flex-direction:column;gap:var(--m);padding-right:var(--px)}
.hist-list h2{font-size:var(--s);font-weight:400;margin:0 0 var(--px);color:var(--white)}
.hist-list .hv{color:var(--gold)}.hist-list .hd{color:var(--grey)}
.hist-list ul{margin:0;padding-left:calc(var(--px) * 4);color:var(--cyan);display:flex;flex-direction:column;gap:var(--fp)}
.hist-close{font:inherit;color:var(--cyan);background:var(--ink);border:var(--px) solid var(--cyan);padding:var(--px) calc(var(--px) * 3);cursor:pointer}
#history .kb{color:var(--grey)}
@media (pointer: coarse){#history .kb{display:none}}
/* the pause screen (main.js setPaused) over the frozen game: PAUSED, RESUME, and QUIT TO TITLE (the Whorl standard:
   it asks once, QUIT? PRESS AGAIN, armed for 3 s); and for touch, where there's no P key, a pause button top middle */
#pause{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:var(--m);background:rgb(0 0 0 / .55);text-shadow:var(--glow);z-index:4}
body.paused #pause{display:flex}
#pause h1{font-size:var(--m);font-weight:400;margin:0;color:var(--gold)}
#pause .keys{color:var(--grey);margin:0}
.pause-btn{font:inherit;color:var(--cyan);background:var(--ink);border:var(--px) solid var(--cyan);padding:var(--px) calc(var(--px) * 3);min-width:calc(var(--px) * 60);cursor:pointer}
#quitBtn.armed{color:var(--pink);border-color:var(--pink)}
#pauseBtn{position:fixed;left:50%;transform:translateX(-50%);top:calc(12px + var(--px) * 7 + env(safe-area-inset-top, 0px));display:none;font:inherit;color:var(--cyan);background:rgb(0 0 0 / .4);border:var(--fp) solid var(--cyan);padding:0 calc(var(--px) * 2);cursor:pointer}
/* the recipe book on the pause screen (main.js showBook): each recipe found in its colour with what it needs, one not
   found yet as ??? with its last ingredient given away */
#book{display:grid;grid-template-columns:auto auto auto auto;gap:calc(var(--px) * .5) calc(var(--px) * 3);margin-top:var(--px);padding:var(--px) calc(var(--px) * 3);background:rgb(0 0 0 / .7)}
#book h2{grid-column:1/-1;font-size:var(--s);font-weight:400;color:var(--grey);margin:0 0 var(--px);text-align:center}
#book .n{color:var(--c, var(--grey));text-align:right}
#book .k{color:var(--white)}
@media (pointer: coarse){#pause .keys{display:none}body:not(.title):not(.paused):not(.scores) #pauseBtn{display:block}}
/* the world table's pages after a game (main.js overPages): the HUD out of the way; on touch, the keys for initials */
body.scores .hud,body.scores #gun{opacity:0}
body.title.tablepage #controls{opacity:0;transition:opacity .3s}   /* the title's table turn: the controls step aside */
#entryKeys{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom, 0px));display:none;gap:calc(var(--px) * 2);z-index:20}
#entryKeys button{font:inherit;font-size:calc(var(--px) * 5);color:var(--cyan);background:rgb(0 0 0 / .6);border:var(--fp) solid var(--cyan);min-width:calc(var(--px) * 13);min-height:calc(var(--px) * 11);cursor:pointer;touch-action:manipulation}
#entryKeys button[data-k="ok"]{color:var(--pink);border-color:var(--pink)}
@media (pointer: coarse){body.entry #entryKeys{display:flex}}
.edge.gen{border-bottom-color:var(--cyan);filter:drop-shadow(0 0 4px var(--cyan))}
.edge.boss{border-bottom-color:#ff3b4a;filter:drop-shadow(0 0 4px #ff3b4a);border-left-width:11px;border-right-width:11px;border-bottom-width:22px}