:root{--void:#020302;--casing:#10120f;--phosphor:#a8c59c;--phosphor-hot:#d7e4c9;--amber:#a7835b;--bone:#c7c1a9;--rust:#7b4632;--danger:#b13b32;--ink:#c9d0c2}
*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 6px),radial-gradient(circle at 50% 35%,#181a15 0,#080906 46%,#010201 100%);color:var(--ink);font-family:Orbitron,Russo One,Impact,sans-serif;user-select:none}body{padding:clamp(15px,2.6vw,38px)}
#stage{--quake:0;position:relative;width:100%;height:100%;overflow:hidden;border:clamp(15px,2.2vw,34px) solid var(--casing);border-radius:clamp(22px,4vw,58px);background:#020402;box-shadow:0 0 0 2px #34372e,0 0 0 7px #070806,0 26px 60px rgba(0,0,0,.88),inset 0 0 0 3px #000,inset 0 0 48px rgba(0,0,0,.9);isolation:isolate}
#stage::before{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:clamp(7px,2vw,29px);box-shadow:inset 0 0 34px 16px #000,inset 0 0 7px 2px rgba(184,198,165,.18)}#stage::after{content:"SIGNAL: NIGHT // 57.4 kHz";position:absolute;z-index:9;left:18px;bottom:7px;color:#686a5b;font:700 7px/1 Orbitron,sans-serif;letter-spacing:.18em}
#game{display:block;width:100%;height:100%}.game-render-surface{filter:contrast(1.08) saturate(.78) brightness(1.12)}#game-webgl{position:absolute;z-index:1;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.damage-video-layer{position:absolute;inset:0;z-index:15;display:none;align-items:center;justify-content:center;pointer-events:none;background:#000;opacity:0;transition:opacity .15s ease-out}
.damage-video-layer.active{display:flex;opacity:1}
#damage-video{display:block;width:100%;height:100%;object-fit:cover;box-shadow:inset 0 0 40px rgba(255,0,0,.4),inset 0 0 100px rgba(0,0,0,.8);filter:contrast(1.15) saturate(1.1)}
.damage-transition-flash{position:absolute;inset:0;z-index:16;pointer-events:none;background:#fff;opacity:0}
.damage-transition-flash.flash{animation:damage-white-flash .55s cubic-bezier(.1,.9,.2,1) forwards}
@keyframes damage-white-flash{0%{opacity:1;filter:brightness(2.2) contrast(1.6)}20%{opacity:.92}100%{opacity:0;filter:none}}
#phosphor-mask,#scanlines,#tracking-noise,#crt-glass,#quake-glow,#rgb-split{pointer-events:none;position:absolute;inset:0;border-radius:inherit}
#phosphor-mask{z-index:6;opacity:.25;mix-blend-mode:multiply;background:repeating-linear-gradient(90deg,rgba(92,126,86,.18) 0 1px,rgba(86,52,41,.13) 1px 2px,rgba(77,88,100,.12) 2px 3px,transparent 3px 4px)}
#scanlines{z-index:6;opacity:.52;mix-blend-mode:multiply;overflow:hidden;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.03) 0 1px,rgba(0,0,0,.58) 1px 2px,transparent 2px 4px)}#scanlines::after{content:"";position:absolute;left:0;right:0;top:-15%;height:13%;background:linear-gradient(to bottom,transparent,rgba(181,205,166,.045),rgba(0,0,0,.22),transparent);animation:crt-sweep 5.8s linear infinite;will-change:transform}
/* Oversized by 40px a side and clipped by #stage's overflow:hidden, so the
   jitter can be a compositor transform instead of an animated
   background-position, which repainted the whole gradient every step. The
   second layer's tile keeps its original width via the calc(). */
#tracking-noise{z-index:6;inset:-40px;opacity:.14;mix-blend-mode:screen;background-image:repeating-radial-gradient(circle at 19% 31%,rgba(221,230,210,.12) 0 1px,transparent 1px 5px),repeating-linear-gradient(173deg,transparent 0 11px,rgba(255,255,255,.025) 12px,transparent 13px 27px);background-size:41px 37px,calc(100% - 80px) 29px;animation:static-jump .19s steps(2,end) infinite;will-change:transform}
#stage.quake #scanlines{opacity:calc(.52 + var(--quake) * .28);animation:quake-lines .065s steps(2,end) infinite;filter:brightness(calc(1 + var(--quake) * 1.8))}
/* Alpha inside the gradient was driven by var(--quake), so every change
   re-rasterised a full-screen gradient. Fixed alpha, scaled via opacity. */
#stage.quake #scanlines::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 18px,#fffff5 19px,transparent 21px 47px);mix-blend-mode:screen;animation:quake-white .11s steps(2,end) infinite}
#stage.quake #tracking-noise{opacity:calc(.2 + var(--quake) * .42);animation-duration:.045s}
#stage.quake #quake-glow::before{animation:quake-glass-wide .13s steps(2,end) infinite}
#stage.quake #quake-glow::after{animation:quake-glass-tight .13s steps(2,end) infinite}
#stage.quake #rgb-split{opacity:calc(.25 + var(--quake) * .75);animation:quake-split .075s steps(2,end) infinite}
#stage.quake #phosphor-mask{opacity:calc(.25 + var(--quake) * .4);animation:quake-phosphor .055s steps(2,end) infinite}
/* #vignette was a separate full-screen layer stacked directly on #crt-glass:
   same z-index, no blend mode, no animation. Folding its gradient in as the
   topmost background image is pixel-identical and drops a compositor layer. */
#crt-glass{z-index:7;background:radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.38) 76%,#000 112%),linear-gradient(115deg,rgba(255,255,255,.055),transparent 18%,transparent 74%,rgba(152,170,145,.025)),radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.48) 88%,rgba(0,0,0,.9) 100%)}
/* Carries the quake glass flash. Each shadow is rasterised once at full alpha
   and only opacity animates, instead of animating a 90px-blur inset shadow
   directly. The strength constant lives in the opacity rather than the colour
   so the clamp at 1 lands where the original's alpha clamp did — folding it
   into a fixed alpha instead would halve the flash whenever --quake > 1, which
   is most of a line clear. Two pseudo-elements because the original strobes
   the wide and tight shadows on separate keyframes. */
#quake-glow{z-index:7}
#quake-glow::before,#quake-glow::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0}
#quake-glow::before{box-shadow:inset 0 0 90px #fffff5}
#quake-glow::after{box-shadow:inset 0 0 24px #fff}
#rgb-split{z-index:7;opacity:0;box-shadow:inset 5px 0 18px rgba(96,155,121,.18),inset -5px 0 18px rgba(130,64,48,.2)}#stage.impact #rgb-split,#stage.final-round #rgb-split{opacity:.7}
#crt-id{position:absolute;z-index:9;right:47px;bottom:6px;color:#9aa393;font:700 8px/1 Orbitron,sans-serif;letter-spacing:.2em;text-shadow:0 0 6px rgba(154,163,147,.4)}#power-led{position:absolute;z-index:9;right:22px;bottom:4px;width:8px;height:8px;border-radius:50%;background:#759764;box-shadow:0 0 8px #8eb379}
#character-portrait-layer{position:absolute;inset:0;z-index:18;display:none;pointer-events:none}#stage.playing #character-portrait-layer,#stage.damage-video-active #character-portrait-layer,.damage-video-layer.active ~ #character-portrait-layer{display:block}
.live-portrait{--portrait-accent:#adc7a3;position:absolute;bottom:clamp(20px,3vh,36px);width:clamp(119px,12.6vw,165px);aspect-ratio:1;background:#020302;border:2.5px solid var(--portrait-accent);box-shadow:0 0 0 3px rgba(0,0,0,.88),0 0 16px color-mix(in srgb,var(--portrait-accent) 38%,transparent);opacity:0;overflow:hidden;z-index:18}.live-portrait.available{opacity:1}.live-portrait.player-one{left:clamp(16px,2vw,30px)}.live-portrait.player-two{--portrait-accent:#bc9670;right:clamp(16px,2vw,30px)}
.live-portrait img{display:block;width:100%;height:100%;object-fit:cover;opacity:1;filter:none}.live-portrait figcaption{position:absolute;left:0;right:0;bottom:0;height:24px;padding-top:6px;color:var(--portrait-accent);background:rgba(0,0,0,.82);font:800 clamp(8px,.85vw,11px)/1 Orbitron,sans-serif;letter-spacing:.06em;text-align:center}.live-portrait.hit{animation:portrait-hit .14s steps(2,end) 2}.live-portrait.hit figcaption{color:#f0d8cd;background:rgba(94,22,16,.86)}.live-portrait.danger{border-color:#e55b50;box-shadow:0 0 0 3px rgba(0,0,0,.88),0 0 22px rgba(229,91,80,.75);animation:portrait-danger .42s steps(2,end) infinite}.live-portrait.danger figcaption{color:#ff8c81}
#stage.danger-p1{box-shadow:0 0 0 2px #34372e,0 0 0 7px #070806,0 26px 60px #000,inset 65px 0 90px rgba(130,25,19,.25)}#stage.danger-p2{box-shadow:0 0 0 2px #34372e,0 0 0 7px #070806,0 26px 60px #000,inset -65px 0 90px rgba(130,25,19,.25)}#stage.final-round{box-shadow:0 0 0 2px #4b4035,0 0 0 7px #070806,0 26px 60px #000,inset 0 0 100px rgba(113,38,27,.2)}
.overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;z-index:5;background:linear-gradient(180deg,rgba(2,5,3,.67),rgba(1,2,1,.84))}.overlay.visible{display:flex}.overlay.dim{background:rgba(1,2,1,.83)}.noise{position:absolute;inset:0;pointer-events:none;opacity:.55;background:repeating-linear-gradient(97deg,transparent 0 19px,rgba(178,197,165,.025) 20px 21px)}
.logo{font-family:"Black Ops One",Impact,sans-serif;font-size:clamp(52px,10.5vw,122px);line-height:.86;letter-spacing:-.005em;color:#b7b49e;text-shadow:0 2px 0 #4a4b3f,0 5px 0 #161713,3px 0 0 rgba(89,119,81,.4),-2px 0 0 rgba(104,57,42,.4),0 0 18px rgba(143,173,131,.18);animation:logo-signal 2.7s steps(1,end) infinite}.logo.small{font-size:clamp(30px,5.5vw,62px)}.brand-logo{max-width:92vw;font-size:clamp(44px,8.2vw,104px)}.glitch{position:relative}.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden;opacity:0}.glitch::before{color:#899c7f;animation:glitch-a 3.1s steps(1,end) infinite}.glitch::after{color:#714735;animation:glitch-b 4.7s steps(1,end) infinite}
.eyebrow,.hint,.tagline,.blurb{position:relative;z-index:1}.eyebrow{color:var(--amber);letter-spacing:.28em;font-size:11px;margin-bottom:18px}.tagline,.blurb{max-width:760px;margin:21px 0 30px;font-size:13px;letter-spacing:.16em;color:rgba(198,206,192,.68)}.tagline{color:var(--phosphor);text-shadow:0 0 9px rgba(126,163,113,.28)}.hint{margin-top:24px;font-size:9px;letter-spacing:.2em;color:rgba(174,181,166,.36)}.btn-row{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;position:relative;z-index:2}
.arcade-btn,.ghost-btn{font-family:Orbitron,sans-serif;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#aeb7a8;background:linear-gradient(#20231e,#0b0d0a);border:1px solid #5c6153;border-left-color:#777d6c;border-top-color:#777d6c;padding:13px 22px;cursor:pointer;box-shadow:inset 0 0 0 2px #10120f,0 3px 0 #020302;transition:color 70ms,border-color 70ms,background 70ms}.arcade-btn:hover,.ghost-btn:hover,.arcade-btn:focus-visible{color:var(--phosphor-hot);border-color:#9aac91;background:#1c211a;outline:none}.arcade-btn.primary{color:#d1d9cb;border-color:#75816c;background:linear-gradient(180deg,#394334,#151913);box-shadow:inset 0 0 0 2px #11140f,0 3px 0 #020302,0 0 13px rgba(128,160,115,.15)}.mute{position:absolute;top:15px;right:17px;z-index:8;font-size:9px;padding:7px 9px}
.controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;width:min(760px,100%);margin:18px 0 24px}.controls-grid article{border:1px solid #41463c;padding:18px;background:rgba(4,7,4,.76);text-align:left;box-shadow:inset 0 0 22px #000}.controls-grid h3{color:var(--amber);margin-bottom:12px;font-size:13px}.controls-grid li{list-style:none;margin:8px 0;letter-spacing:.08em;font-size:12px}kbd{display:inline-block;min-width:28px;padding:3px 6px;margin-right:6px;border:1px solid #5d6255;color:var(--phosphor);background:#11140f}.scoreline{font-size:clamp(36px,8vw,80px);color:var(--phosphor);text-shadow:0 0 15px rgba(128,167,116,.3);animation:signal-hit .32s steps(2,end)}.insult{margin:10px 0 28px;font-size:clamp(20px,4vw,36px);color:#a55243;letter-spacing:.08em;animation:signal-hit .35s steps(2,end)}.flicker{animation:flicker 3.7s steps(1,end) infinite}.idle-blocks{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(148,176,136,.05),transparent) 0 23%/45% 2px no-repeat,linear-gradient(90deg,transparent,rgba(157,112,77,.045),transparent) 100% 72%/38% 2px no-repeat}
#screen-round,#screen-win{overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(25,31,23,.32),rgba(2,3,2,.68) 58%,rgba(0,0,0,.88))}
/* Only #screen-win stays translucent; #screen-round's background is overridden
   to opaque further down, so its blurred backdrop was painted and then fully
   covered. */
#screen-win{backdrop-filter:blur(1px)}
#screen-round>* ,#screen-win>*{position:relative;z-index:2}
#screen-round::before,#screen-win::before{content:"";position:absolute;z-index:1;inset:-35%;pointer-events:none;opacity:0;background:conic-gradient(from 0deg,transparent 0 9deg,rgba(238,245,226,.34) 10deg 12deg,transparent 13deg 28deg,rgba(138,44,34,.28) 29deg 31deg,transparent 32deg);mix-blend-mode:screen}
#screen-round.visible::before,#screen-win.visible::before{animation:result-burst 1.35s steps(9,end)}
#screen-round.visible .logo,#screen-win.visible .logo{animation:result-title-in .7s steps(4,end),logo-signal 2.7s steps(1,end) .7s infinite}
#screen-round.visible .scoreline,#screen-win.visible .insult{animation:result-score-in .85s steps(5,end)}
@keyframes logo-signal{0%,96%,100%{filter:brightness(.92) contrast(1.08)}97%{filter:brightness(1.32) contrast(1.6);letter-spacing:.008em}98%{filter:brightness(.55)}}@keyframes glitch-a{0%,94%,100%{opacity:0;clip-path:inset(0)}95%{opacity:.65;clip-path:inset(18% 0 56% 0);left:-5px}96%{opacity:0}}@keyframes glitch-b{0%,97%,100%{opacity:0;clip-path:inset(0)}98%{opacity:.55;clip-path:inset(63% 0 12% 0);left:7px}99%{opacity:0}}/* Was animating top from -15% to 110%, which forces layout every frame and
   never stops — it runs on menus and gameplay alike. The element is 13% of the
   stage tall and has to travel 125% of the stage, so the equivalent transform
   is 125/13 = 961.5% of its own height. */
@keyframes crt-sweep{from{transform:translateY(0)}to{transform:translateY(961.5%)}}@keyframes static-jump{0%{transform:translate(0,0)}50%{transform:translate(17px,-11px)}100%{transform:translate(-9px,13px)}}@keyframes flicker{0%,18%,20%,72%,74%,100%{opacity:1}19%{opacity:.32}73%{opacity:.62}}@keyframes signal-hit{0%{filter:blur(5px);opacity:.25;letter-spacing:.3em}45%{filter:none;opacity:1;letter-spacing:.08em}70%{filter:brightness(1.7)}100%{filter:none}}
/* background-position-y folded into the translate: the pattern shift it
   produced is visually equivalent here, but no longer forces a repaint. */
@keyframes quake-lines{0%{transform:translate(0,0)}25%{transform:translate(calc(var(--quake) * 7px),calc(var(--quake) * -3px + 3px))}50%{transform:translate(calc(var(--quake) * -9px),calc(var(--quake) * 2px - 2px))}75%{transform:translate(calc(var(--quake) * 5px),calc(var(--quake) * 4px + 5px))}100%{transform:translate(0,0)}}
/* The gradient's alpha is now fixed at 1, so the original .34 is folded into
   these opacities alongside --quake. Keeps the clamp point identical. */
@keyframes quake-white{0%,58%,100%{opacity:calc(var(--quake) * .0272)}60%{opacity:calc(var(--quake) * .34)}66%{opacity:calc(var(--quake) * .0748)}}
/* Strobes the pre-rasterised glows on #quake-glow rather than animating the
   inset shadows themselves, which repainted a 90px blur over the full stage. */
@keyframes quake-glass-wide{0%,72%,100%{opacity:0}74%{opacity:calc(var(--quake) * .5)}82%{opacity:0}}
@keyframes quake-glass-tight{0%,80%,100%{opacity:0}82%{opacity:calc(var(--quake) * .16)}}
@keyframes quake-split{0%{transform:translateX(calc(var(--quake) * -9px));filter:brightness(1)}50%{transform:translateX(calc(var(--quake) * 12px));filter:brightness(calc(1 + var(--quake) * 2.5))}100%{transform:translateX(calc(var(--quake) * -4px));filter:brightness(1)}}
@keyframes quake-phosphor{0%{transform:translateX(0)}33%{transform:translateX(calc(var(--quake) * 6px))}66%{transform:translateX(calc(var(--quake) * -8px))}100%{transform:translateX(0)}}
@keyframes portrait-hit{0%,100%{transform:translate(0) scale(1)}33%{transform:translate(-3px,2px) scale(1.06)}66%{transform:translate(3px,-1px) scale(.98)}}
@keyframes portrait-danger{0%,100%{filter:brightness(.9)}50%{filter:brightness(1.2)}}
@keyframes result-burst{0%{opacity:1;transform:scale(.15) rotate(0)}35%{opacity:.82;transform:scale(1.05) rotate(16deg)}100%{opacity:0;transform:scale(1.8) rotate(34deg)}}
@keyframes result-title-in{0%{opacity:0;filter:brightness(4) blur(14px);transform:scale(1.7)}28%{opacity:1;filter:brightness(2.8);transform:scale(.86) skewX(-8deg)}58%{filter:brightness(1.5);transform:scale(1.08) skewX(5deg)}100%{filter:none;transform:none}}
@keyframes result-score-in{0%,34%{opacity:0;transform:translateY(36px) scale(.7)}55%{opacity:1;filter:brightness(2.4);transform:translateY(-8px) scale(1.18)}100%{filter:none;transform:none}}
@media(max-width:720px){body{padding:8px}#stage{border-width:10px;border-radius:22px}.logo{font-size:44px}.arcade-btn{width:100%}#crt-id,#stage::after{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}}

/* Live visual laboratory. Backquote toggles this layer without interrupting the match. */
#stage.wake-active .mute{opacity:0;pointer-events:none}
.thunder-flash{position:absolute;inset:0;pointer-events:none;z-index:12;background:rgba(215,238,218,.75);mix-blend-mode:screen;opacity:0;transition:opacity 40ms ease-out}
.thunder-flash.flash-high{opacity:.82}
.thunder-flash.flash-mid{opacity:.48}
.thunder-flash.flash-low{opacity:.22}
#screen-wake{z-index:10;background:#010201;isolation:isolate}
.wake-rain-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;image-rendering:pixelated;image-rendering:crisp-edges;opacity:.42}
#screen-wake::before{content:"";position:absolute;inset:0;z-index:0;opacity:.28;background:linear-gradient(90deg,transparent 49.8%,rgba(157,181,146,.18) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(157,181,146,.12) 50%,transparent 50.2%),repeating-radial-gradient(circle at 50% 50%,transparent 0 42px,rgba(128,153,119,.06) 43px 44px);animation:wake-grid 4s steps(8,end) infinite}
#screen-wake::after{content:"STANDBY // SIGNAL REQUIRED";position:absolute;z-index:1;bottom:8%;left:50%;transform:translateX(-50%);color:rgba(138,151,130,.34);font:700 7px/1 Orbitron,sans-serif;letter-spacing:.28em;white-space:nowrap}
.wake-kicker{position:absolute;z-index:3;left:50%;top:calc(50% - clamp(64px,8.5vh,92px));transform:translateX(-50%);color:#6f7e69;font-size:8px;letter-spacing:.28em;white-space:nowrap;margin:0}
.wake-command{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);padding:24px 38px;border:1px solid #72806b;background:linear-gradient(180deg,#20271e,#080b08);color:#d5ddce;box-shadow:inset 0 0 0 2px #0b0e0a,0 5px 0 #000,0 0 32px rgba(130,167,117,.18);font:900 clamp(28px,6vw,72px)/.9 "Black Ops One",Impact,sans-serif;letter-spacing:.06em;cursor:pointer;text-transform:uppercase;animation:wake-command-pulse 1.7s steps(2,end) infinite;white-space:nowrap}
.wake-command:hover,.wake-command:focus-visible{color:#f5faef;border-color:#c9d8c0;filter:brightness(1.35);outline:none;box-shadow:inset 0 0 0 2px #131a12,0 5px 0 #000,0 0 55px rgba(159,202,143,.48)}
.wake-command:active{transform:translate(-50%,calc(-50% + 4px));box-shadow:inset 0 0 22px rgba(218,242,207,.25),0 1px 0 #000,0 0 65px rgba(190,229,174,.7)}
.wake-command.awakened{animation:wake-release .36s steps(4,end) forwards}
.wake-hint{position:absolute;z-index:3;left:50%;top:calc(50% + clamp(64px,8.5vh,92px));transform:translateX(-50%);color:rgba(176,189,168,.48);font-size:8px;letter-spacing:.2em;white-space:nowrap;margin:0}
#screen-characters{justify-content:flex-start;gap:8px;padding:18px clamp(18px,3vw,46px) 14px;background:#010201;overflow:auto}
#screen-characters .character-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;pointer-events:none;filter:none;transition:opacity .25s ease-out}
#screen-characters.visible .character-bg-video{opacity:1}
.character-kicker{position:relative;z-index:2;color:#8d795f;font-size:8px;letter-spacing:.26em}
.character-heading{position:relative;z-index:2;color:#d1d8ca;font:900 clamp(20px,3vw,34px)/1 "Black Ops One",Impact,sans-serif;letter-spacing:.08em;text-shadow:0 0 16px rgba(151,180,139,.22)}
.character-mode-bar{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:6px 0 2px}
.mode-chip{padding:6px 14px;font-size:9px;letter-spacing:.14em;border:1px solid #4a5444;background:#10150f;color:#c0cbba;cursor:pointer}
.mode-chip:hover{border-color:#97ae8e;color:#fff;background:#1a2219}
.diff-chips-group{display:flex;gap:6px}
.diff-btn{padding:5px 10px;font-size:8px;letter-spacing:.12em;border:1px solid #3c4538;background:#0d110d;color:#8f9a8a;cursor:pointer;transition:all .12s ease}
.diff-btn:hover{border-color:#7f9776;color:#e1e9dd;background:#182017}
.diff-btn.active{border-color:#adc7a3;background:#1e2a1d;color:#adc7a3;box-shadow:0 0 12px rgba(173,199,163,.25);font-weight:bold}
.diff-desc{position:relative;z-index:2;color:#9cad96;font-size:8px;letter-spacing:.14em;text-align:center;margin:2px 0 6px;text-transform:uppercase}
.character-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.2vw,32px);width:min(1120px,100%);margin:auto 0}
.character-panel{min-width:0;padding:10px;border:1px solid #455040;background:rgba(4,7,4,.82);box-shadow:inset 0 0 30px #000,0 10px 34px rgba(0,0,0,.65);transition:border-color .12s,box-shadow .12s,filter .12s,transform .12s}
.character-panel.player-one{--character-accent:#adc7a3}.character-panel.player-two{--character-accent:#bc9670}
.character-panel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:var(--character-accent);font-size:9px;letter-spacing:.18em}.character-panel header strong{color:#788071;font-size:7px}
.character-card-shell{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid #4a5043;background:#000;box-shadow:inset 0 0 18px #000}
.character-card-shell img{display:block;width:100%;height:100%;object-fit:contain;filter:contrast(1.08) brightness(.86) saturate(.78);transition:filter .12s,transform .12s}
.character-card-shell img.flicking{animation:character-flick .22s steps(3,end)}
.character-lock-stamp{position:absolute;inset:auto 7% 9%;padding:7px;border:2px solid var(--character-accent);color:var(--character-accent);background:rgba(2,5,2,.82);font:900 clamp(15px,2.4vw,28px)/1 "Black Ops One",Impact,sans-serif;letter-spacing:.14em;opacity:0;transform:scale(1.5) rotate(-4deg);text-shadow:0 0 10px currentColor}
.character-selector{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:7px;margin-top:8px}.character-selector strong{overflow:hidden;color:#d5dccf;font-size:clamp(9px,1.25vw,14px);letter-spacing:.1em;white-space:nowrap;text-overflow:ellipsis}.character-arrow,.character-confirm{border:1px solid #54604e;background:#121711;color:#aebaA7;cursor:pointer;font:900 10px Orbitron,sans-serif}.character-arrow{height:32px}.character-confirm{width:100%;min-height:30px;margin-top:7px;color:var(--character-accent);letter-spacing:.12em}.character-arrow:hover,.character-confirm:hover{color:#fff;border-color:var(--character-accent);filter:brightness(1.35)}.character-panel>p{margin-top:7px;color:#626b5f;font-size:7px;letter-spacing:.12em}
.character-panel.locked{border-color:var(--character-accent);box-shadow:inset 0 0 38px #000,0 0 28px color-mix(in srgb,var(--character-accent) 32%,transparent);transform:translateY(-3px)}.character-panel.locked header strong{color:var(--character-accent)}.character-panel.locked .character-card-shell img{filter:contrast(1.15) brightness(1.04) saturate(.88)}.character-panel.locked .character-lock-stamp{opacity:1;transform:scale(1) rotate(-2deg);animation:character-lock .3s steps(3,end)}.character-panel.locked .character-arrow{opacity:.22;pointer-events:none}.character-panel.locked .character-confirm{color:#0a0d09;background:var(--character-accent)}
#screen-characters.all-locked{animation:character-release .65s steps(5,end)}.character-exit{position:relative;z-index:2;color:#555e52;font-size:7px;letter-spacing:.18em}
#screen-title{justify-content:center;align-items:flex-start;padding:32px;background:#010201;isolation:isolate}
#screen-title::before{content:"";position:absolute;inset:0;z-index:0;background:#010201 url("../art/introScreen.jpg") center center/contain no-repeat;filter:contrast(1.06) saturate(.9) brightness(.92)}
#screen-title::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 44%,rgba(0,0,0,.08) 61%,rgba(0,0,0,.82) 100%),linear-gradient(90deg,rgba(0,0,0,.08),transparent 24%,transparent 78%,rgba(0,0,0,.08))}
#screen-title>.eyebrow,#screen-title>.brand-logo{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#screen-title .noise{z-index:2;opacity:.22}
#screen-title .tagline{position:absolute;z-index:3;left:50%;top:55%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 44px);margin:0;padding:9px 16px;color:#d0d6c9;background:rgba(4,7,4,.8);border:1px solid rgba(133,147,124,.4);box-shadow:0 8px 28px rgba(0,0,0,.72);font-size:11px;letter-spacing:.2em;text-align:center}
#screen-title .btn-row{position:absolute;z-index:3;left:50%;top:64%;transform:translateX(-50%);justify-content:center;width:max-content;max-width:calc(100% - 44px)}
#screen-title .arcade-btn{position:relative;overflow:hidden;isolation:isolate;min-width:148px;transition:color 80ms,background 80ms,border-color 80ms,box-shadow 80ms,filter 80ms,transform 80ms}
#screen-title .arcade-btn::after{content:"";position:absolute;z-index:-1;inset:-35% -70%;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 34%,rgba(226,255,214,.62) 48%,rgba(255,255,255,.88) 50%,rgba(170,212,157,.34) 54%,transparent 68%);transform:translateX(-52%)}
#screen-title .arcade-btn:hover,#screen-title .arcade-btn:focus-visible{color:#f4faee;border-color:#c7d8bd;background:linear-gradient(180deg,#52604b,#1b2119);box-shadow:inset 0 0 0 2px #151a13,inset 0 0 22px rgba(190,225,175,.16),0 4px 0 #020302,0 0 24px rgba(152,195,137,.52);filter:brightness(1.32) contrast(1.08);transform:translateY(-2px)}
#screen-title .arcade-btn:hover::after,#screen-title .arcade-btn:focus-visible::after{opacity:1;animation:title-button-scan .55s steps(7,end) infinite}
#screen-title .arcade-btn:active,#screen-title .arcade-btn.ui-hit{color:#fff;border-color:#eef9e8;background:#66785d;box-shadow:inset 0 0 20px rgba(255,255,255,.42),0 1px 0 #020302,0 0 34px rgba(198,240,181,.88);filter:brightness(1.8) contrast(1.24);animation:title-button-hit .16s ease-out}
#screen-title .hint{position:absolute;z-index:3;left:50%;top:84%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 44px);margin:0;color:rgba(205,213,197,.62);text-align:center;text-shadow:0 2px 4px #000}
#screen-title .title-version,#screen-wake .wake-version{position:absolute;z-index:15;right:24px;bottom:18px;margin:0;padding:5px 10px;color:#d5e2cf;background:rgba(6,12,6,.92);border:1.5px solid rgba(168,197,156,.65);box-shadow:0 4px 18px rgba(0,0,0,.9),0 0 12px rgba(168,197,156,.28);font:900 10px/1 Orbitron,sans-serif;letter-spacing:.18em;pointer-events:none;user-select:none;text-shadow:0 1px 3px #000;border-radius:3px}
.wake-updater-container{position:absolute;z-index:16;right:24px;bottom:50px}
.wake-update-btn{font-family:Orbitron,sans-serif;font-weight:900;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#a8c59c;background:rgba(12,18,11,.92);border:1.5px solid #4a6344;padding:6px 12px;cursor:pointer;box-shadow:0 0 10px rgba(0,0,0,.9),0 2px 0 #000;border-radius:3px;transition:all 100ms ease}
.wake-update-btn:hover,.wake-update-btn:focus-visible{color:#dcfadc;border-color:#7da174;background:#1b291a;box-shadow:0 0 16px rgba(125,161,116,.4),0 3px 0 #000;outline:none}
.wake-update-btn.has-update{color:#0b0e0a;background:linear-gradient(180deg,#dcfadc,#9ad48f);border-color:#c8ecc0;box-shadow:0 0 16px rgba(154,212,143,.65),0 3px 0 #000;animation:update-badge-pulse 1.4s infinite ease-in-out}
.wake-update-btn.has-update:hover,.wake-update-btn.has-update:focus-visible{filter:brightness(1.25);transform:translateY(-2px);box-shadow:0 0 24px rgba(180,245,170,.9),0 5px 0 #000}
.wake-update-btn:active{transform:translateY(1px);box-shadow:0 0 8px rgba(0,0,0,.8),0 1px 0 #000}
@keyframes update-badge-pulse{0%,100%{box-shadow:0 0 12px rgba(154,212,143,.45),0 3px 0 #000;filter:brightness(1)}50%{box-shadow:0 0 22px rgba(180,245,170,.85),0 3px 0 #000;filter:brightness(1.2)}}
.patch-modal{z-index:25;background:rgba(1,3,1,.92);backdrop-filter:blur(4px)}
.patch-modal-card{position:relative;z-index:2;width:min(540px,92vw);background:#060906;border:2px solid #5a7550;box-shadow:0 0 40px rgba(0,0,0,.95),inset 0 0 20px rgba(0,0,0,.8),0 0 20px rgba(110,160,95,.2);padding:24px;text-align:left;border-radius:4px}
.patch-modal-kicker{color:#7e9475;font-size:9px;letter-spacing:.24em;margin-bottom:8px}
.patch-modal-title{color:#d8e6d2;font-family:"Black Ops One",Impact,sans-serif;font-size:clamp(16px,2.5vw,24px);letter-spacing:.08em;margin-bottom:16px;text-shadow:0 0 10px rgba(160,205,145,.4)}
.patch-spinner{width:28px;height:28px;border:3px solid rgba(130,170,115,.2);border-top-color:#a8d59c;border-radius:50%;animation:patch-spin .8s linear infinite;margin:12px 0}
@keyframes patch-spin{to{transform:rotate(360deg)}}
.patch-log{max-height:160px;overflow-y:auto;background:#020302;border:1px solid #2b3827;padding:10px;font-family:monospace,Orbitron,sans-serif;font-size:11px;color:#9eb894;line-height:1.5;margin-bottom:16px;box-shadow:inset 0 0 10px #000}
.patch-log-line{margin:3px 0;word-break:break-all}
.patch-modal-actions{display:flex;justify-content:flex-end}
#screen-title .idle-blocks{display:none}
@media(max-width:720px){#screen-title{padding:18px}#screen-title::before{background-position:center center}#screen-title .tagline{left:50%;top:53%;font-size:9px;letter-spacing:.1em}#screen-title .btn-row{left:50%;top:64%;width:calc(100% - 44px)}#screen-title .hint{left:50%;top:84%;font-size:7px;letter-spacing:.1em}#screen-title .title-version,#screen-wake .wake-version{right:12px;bottom:10px;font-size:8px;letter-spacing:.12em;padding:3px 7px}.wake-updater-container{right:12px;bottom:38px}.wake-update-btn{font-size:7.5px;padding:4px 8px}}
@keyframes title-button-scan{from{transform:translateX(-52%)}to{transform:translateX(52%)}}
@keyframes title-button-hit{0%{filter:brightness(2.2) contrast(1.3);box-shadow:inset 0 0 24px rgba(255,255,255,.6),0 0 40px rgba(198,240,181,1)}50%{filter:brightness(1.6) contrast(1.15);box-shadow:inset 0 0 16px rgba(255,255,255,.3),0 0 25px rgba(198,240,181,.7)}100%{filter:none;box-shadow:none}}
#screen-round,#screen-win{z-index:8;background:#010201}
#screen-round .round-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;pointer-events:none;mix-blend-mode:normal;filter:none;transition:opacity .25s ease-out}
#screen-round.visible .round-video{opacity:1}
#screen-win .win-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;pointer-events:none;mix-blend-mode:normal;filter:none;transition:opacity .6s ease-out}
#screen-win.visible .win-video{opacity:1}
.round-content{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
#screen-round .round-content .eyebrow{color:#f0cf85;text-shadow:0 0 12px #000,0 0 4px #000,0 2px 4px #000;letter-spacing:.32em;font-weight:900}
#screen-round .round-content .logo{color:#ffffff;text-shadow:0 3px 0 #181c15,0 6px 0 #000,0 0 30px rgba(0,0,0,.95),0 0 16px rgba(180,225,160,.6);filter:drop-shadow(0 4px 12px rgba(0,0,0,.9))}
#screen-round .round-content .scoreline{color:#c7f3b2;text-shadow:0 0 24px #000,0 0 12px rgba(0,0,0,.9),0 0 20px rgba(160,225,145,.75);filter:drop-shadow(0 4px 16px rgba(0,0,0,.95))}
@keyframes wake-grid{0%,100%{filter:brightness(.72);transform:scale(1)}50%{filter:brightness(1.2);transform:scale(1.015)}}
@keyframes wake-command-pulse{0%,100%{filter:brightness(.82)}50%{filter:brightness(1.12);text-shadow:0 0 13px rgba(198,220,187,.44)}}
@keyframes wake-release{0%{opacity:1;filter:brightness(1);transform:translate(-50%,-50%) scale(1)}24%{filter:brightness(4);transform:translate(-50%,-50%) scale(.94)}52%{opacity:1;filter:brightness(2);transform:translate(-50%,-50%) scale(1.18);clip-path:inset(34% 0 28% 0)}100%{opacity:0;filter:brightness(5);transform:translate(-50%,-50%) scale(2.2);clip-path:inset(48% 0 48% 0)}}
@keyframes character-flick{0%{opacity:.2;transform:translateX(9%);filter:brightness(2) contrast(1.7)}45%{opacity:1;transform:translateX(-3%)}100%{transform:none}}
@keyframes character-lock{0%{opacity:0;transform:scale(2) rotate(-8deg)}55%{opacity:1;transform:scale(.88) rotate(1deg)}100%{transform:scale(1) rotate(-2deg)}}
@keyframes character-release{0%,100%{filter:none}20%{filter:brightness(2.8) contrast(1.5);transform:translateX(-5px)}45%{filter:brightness(.6);transform:translateX(7px)}70%{filter:brightness(1.8);transform:translateX(-2px)}}
@media(max-width:760px){#screen-characters{padding:12px;justify-content:flex-start}.character-heading{font-size:18px}.character-grid{grid-template-columns:1fr;max-width:560px;margin:8px 0}.character-panel>p,.character-exit{display:none}}
#stage{--scanline-opacity:.52;--noise-opacity:.14;--phosphor-opacity:.25}
#scanlines{opacity:var(--scanline-opacity)}
#tracking-noise{opacity:var(--noise-opacity)}
#phosphor-mask{opacity:var(--phosphor-opacity)}
#stage.quake #scanlines{opacity:calc(var(--scanline-opacity) + var(--quake) * .28)}
#stage.quake #tracking-noise{opacity:calc(var(--noise-opacity) + var(--quake) * .42)}
#stage.quake #phosphor-mask{opacity:calc(var(--phosphor-opacity) + var(--quake) * .4)}
#visual-dev-panel{position:fixed;z-index:100;top:18px;right:18px;width:min(430px,calc(100vw - 36px));max-height:calc(100vh - 36px);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateX(28px);transition:opacity .12s ease,transform .12s ease,visibility .12s;background:rgba(7,9,7,.97);border:1px solid #66705f;box-shadow:0 24px 80px #000,0 0 0 1px #151a14 inset;color:#c7cebf;font:700 10px/1.3 Orbitron,sans-serif;user-select:none}
#visual-dev-panel.open{opacity:1;visibility:visible;transform:none}
.dev-head{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid #30372d;background:linear-gradient(135deg,#171c15,#090b09)}
.dev-head h2{margin-top:4px;color:#d7dfcf;font:900 22px/1 Orbitron,sans-serif;letter-spacing:.08em}.dev-kicker{color:#7f9177;font-size:8px;letter-spacing:.18em}.dev-icon{width:30px;height:30px;border:1px solid #4c5647;background:#111510;color:#9fab97;cursor:pointer;font:900 11px Orbitron,sans-serif}
.dev-intro{padding:10px 16px;color:#687264;font-size:8px;letter-spacing:.12em;border-bottom:1px solid #252b23}.dev-intro kbd{min-width:auto;margin:0 3px;padding:1px 4px;font-size:8px}
.dev-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px 16px;border-bottom:1px solid #30372d}.dev-preview button,.dev-actions button{min-height:30px;border:1px solid #485241;background:#131812;color:#9ead98;font:800 8px Orbitron,sans-serif;letter-spacing:.06em;cursor:pointer}.dev-preview button:hover,.dev-actions button:hover{color:#eef4e8;border-color:#94a88b;background:#222a20}
.dev-controls{overflow:auto;padding:4px 16px 12px;scrollbar-color:#505d49 #0a0c09}.dev-controls h3{margin:14px 0 6px;color:#9a7c5e;font-size:8px;letter-spacing:.2em}.dev-control{display:grid;grid-template-columns:136px 1fr 46px;align-items:center;gap:9px;min-height:31px;border-top:1px solid rgba(91,101,85,.16)}.dev-control>span{color:#929d8c;font-size:8px;letter-spacing:.04em}.dev-control output{text-align:right;color:#d2dacb;font-variant-numeric:tabular-nums;font-size:8px}
.dev-control input[type=range]{width:100%;height:3px;appearance:none;background:#30382d;outline:none}.dev-control input[type=range]::-webkit-slider-thumb{appearance:none;width:9px;height:17px;border:1px solid #a3b29a;background:#6f8068;cursor:ew-resize}.dev-control input[type=range]::-moz-range-thumb{width:9px;height:17px;border:1px solid #a3b29a;border-radius:0;background:#6f8068;cursor:ew-resize}
.dev-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:12px 16px;border-top:1px solid #394035;background:#0b0e0a}.dev-actions .dev-copy{color:#e0e7d8;border-color:#74836d;background:#263022}.dev-status{grid-column:1/-1;min-height:11px;color:#71806c;font-size:7px;letter-spacing:.12em}
@media(max-width:600px){#visual-dev-panel{top:8px;right:8px;width:calc(100vw - 16px);max-height:calc(100vh - 16px)}.dev-control{grid-template-columns:116px 1fr 42px}.dev-preview{grid-template-columns:repeat(2,1fr)}}

/* Visual Settings Overlay & Performance Modes */
#screen-visuals{justify-content:center;gap:12px;padding:24px clamp(16px,3vw,40px);background:#010201;overflow:auto}
#screen-controls{justify-content:center;background:#010201;overflow:auto}
#screen-visuals>*,#screen-controls>*{position:relative;z-index:2}
#screen-visuals .options-bg-video,#screen-controls .options-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;pointer-events:none;filter:none;transition:opacity .25s ease-out}
#screen-visuals.visible .options-bg-video,#screen-controls.visible .options-bg-video{opacity:1}
.visual-profile-panel{width:min(860px,100%);margin-bottom:6px}
.profile-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.profile-badge{font-size:8px;letter-spacing:.18em;padding:3px 8px;background:#182216;color:#adc7a3;border:1px solid #4a5c44}
.profile-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.profile-select-wrapper{flex:1 1 220px;min-width:180px}
.arcade-select{width:100%;padding:8px 12px;background:#0d110c;color:#e2ecd9;border:1px solid #4a5444;font:800 10px Orbitron,sans-serif;letter-spacing:.08em;cursor:pointer}
.arcade-select:focus{border-color:#adc7a3;outline:none}
.arcade-select option{background:#0d110c;color:#e2ecd9}
.profile-btn{padding:8px 12px;font-size:9px;letter-spacing:.1em;border:1px solid #485444;background:#121811;color:#b4c3ae;cursor:pointer}
.profile-btn:hover{color:#fff;border-color:#adc7a3;background:#1e271c}
.profile-btn.danger{border-color:#753d3d;color:#d88e8e;background:#1a0f0f}
.profile-btn.danger:hover{border-color:#bf5454;color:#fff;background:#2e1515}
.profile-save-drawer{display:flex;gap:8px;align-items:center;margin-top:10px;padding:10px;background:#10150f;border:1px dashed #4a5a43}
.arcade-text-input{flex:1;padding:8px 12px;background:#060905;color:#e2ecd9;border:1px solid #4a5444;font:800 10px Orbitron,sans-serif;letter-spacing:.12em}
.arcade-text-input:focus{border-color:#adc7a3;outline:none}
.profile-status-msg{min-height:14px;color:#94aa8c;font-size:8px;letter-spacing:.12em;margin-top:8px}
.visual-lab-panel{width:min(860px,100%);margin-bottom:12px;background:rgba(6,9,6,.92)}
.lab-preview-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;background:#0d120c;border:1px solid #323d2f;margin-bottom:12px}
.lab-preview-label{color:#a4b79c;font:800 9px Orbitron,sans-serif;letter-spacing:.12em}
.lab-preview-btn{padding:6px 10px;font-size:8px;letter-spacing:.08em;background:#141b12;border-color:#3f4d3c;color:#c0ceb9}
.lab-preview-btn:hover{background:#233020;border-color:#adc7a3;color:#fff}
.visual-lab-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;max-height:340px;overflow-y:auto;padding-right:6px;scrollbar-color:#505d49 #0a0c09;margin-bottom:12px}
.lab-category-group{background:rgba(10,14,10,.6);border:1px solid rgba(74,84,68,.35);padding:10px}
.lab-category-title{color:var(--amber);font-size:9px;letter-spacing:.16em;margin-bottom:8px;border-bottom:1px solid rgba(74,84,68,.3);padding-bottom:4px}
.lab-control-row{display:grid;grid-template-columns:130px 1fr 44px;align-items:center;gap:8px;min-height:26px;border-top:1px solid rgba(74,84,68,.15)}
.lab-control-label{color:#94a18e;font-size:8px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-control-slider{width:100%;height:3px;appearance:none;background:#2a3327;outline:none}
.lab-control-slider::-webkit-slider-thumb{appearance:none;width:9px;height:15px;border:1px solid #adc7a3;background:#5e7256;cursor:ew-resize}
.lab-control-slider::-moz-range-thumb{width:9px;height:15px;border:1px solid #adc7a3;border-radius:0;background:#5e7256;cursor:ew-resize}
.lab-control-output{text-align:right;color:#d5decb;font-variant-numeric:tabular-nums;font-size:8px;font-weight:700}
.lab-footer-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.visual-settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;width:min(860px,100%);margin:8px 0 16px}
.setting-group{border:1px solid #414b3d;padding:16px;background:rgba(4,7,4,.82);box-shadow:inset 0 0 26px #000;text-align:left;display:flex;flex-direction:column}
.setting-group h3{color:var(--amber);font-size:12px;letter-spacing:.14em;margin-bottom:6px}
.setting-desc{color:rgba(180,192,174,.65);font-size:9px;line-height:1.4;letter-spacing:.06em;margin-bottom:14px;flex-grow:1}
.setting-options{display:flex;flex-direction:column;gap:8px}
.setting-chip{width:100%;padding:10px 14px;font-size:10px;letter-spacing:.12em;text-align:left;position:relative;border-color:#3f493b;background:#0d110c;color:#8f9b8a;transition:all 90ms ease}
.setting-chip:hover{color:#e2ecd9;border-color:#7f9376;background:#182016}
.setting-chip.active{color:#070a06;background:linear-gradient(180deg,#adc7a3,#809d75);border-color:#d5e5cf;box-shadow:inset 0 0 0 1px #fff,0 0 16px rgba(173,199,163,.45);font-weight:900}
.setting-chip.active::after{content:"ACTIVE";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:7px;letter-spacing:.18em;padding:2px 5px;background:#070a06;color:#adc7a3;border:1px solid #adc7a3}

/* Performance Mode Low-GPU & Pixelated Scaling */
#stage.crt-lite #scanlines,
#stage.crt-lite #phosphor-mask,
#stage.crt-lite #tracking-noise{display:none!important}

/* CRT OFF: everything the cabinet paints over the picture.
   Lite only drops the three blend layers — it leaves the colour grade on both
   canvases (two full-screen filter passes, always on, scaling with screen
   pixels), the glass and vignette gradients, the quake flash and the inner
   bezel shadow. This removes all of it, so the canvas composites straight to
   the screen with no post-processing layers above it.
   The outer casing (#stage's own border and shadow) stays: it is painted once
   and never animates, and without it the picture has no frame at all. */
#stage.crt-off #scanlines,
#stage.crt-off #phosphor-mask,
#stage.crt-off #tracking-noise,
#stage.crt-off #crt-glass,
#stage.crt-off #quake-glow,
#stage.crt-off #rgb-split{display:none!important}
#stage.crt-off::before{display:none}
#stage.crt-off .game-render-surface{filter:none}
.game-render-surface.res-pixelated{image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}

/* 3-Line Streak Celebration Animated GIF */
/* Above the portrait layer (18), not down with the CRT effects.
   The streak blob slides in bottom-left for P1 and bottom-right for P2 — the exact
   spots the live portraits occupy — and a portrait is fully opaque, so at z-index 8
   the whole animation played out behind one and was never seen. The portrait layer
   was raised to 18 to sit above the CRT glass and damage videos; this needs to
   clear it, being a brief flourish that should read over everything on the stage. */
#streak-layer{position:absolute;inset:0;z-index:19;pointer-events:none;overflow:hidden}
.streak-blob{position:absolute;bottom:clamp(28px,6vh,68px);display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(96px,11vw,144px);opacity:0;pointer-events:none;filter:drop-shadow(0 0 18px rgba(168,197,156,.7))}
/* will-change only while animating; otherwise these hold GPU layers for the
   entire session for an effect that fires a few times a match. */
.streak-blob.slide-in-left,.streak-blob.slide-in-right{will-change:transform,opacity}
.streak-blob img{display:block;width:100%;height:auto;object-fit:contain}
.streak-badge{margin-top:-8px;padding:4px 10px;background:rgba(2,5,2,.9);border:1px solid var(--phosphor);border-radius:4px;color:var(--phosphor-hot);font:900 clamp(9px,1vw,12px)/1 "Black Ops One",Orbitron,sans-serif;letter-spacing:.12em;text-shadow:0 0 8px rgba(168,197,156,.8);box-shadow:0 0 12px rgba(168,197,156,.35),inset 0 0 6px rgba(0,0,0,.8);white-space:nowrap}
.streak-blob.slide-in-left{left:clamp(20px,3.5vw,55px);right:auto;animation:streak-slide-left 3.2s cubic-bezier(.42,0,.58,1) forwards}
.streak-blob.slide-in-right{right:clamp(20px,3.5vw,55px);left:auto;animation:streak-slide-right 3.2s cubic-bezier(.42,0,.58,1) forwards}

@keyframes streak-slide-left{
  0%{transform:translateX(calc(-100% - 60px)) scale(.65);opacity:0}
  14%{transform:translateX(0) scale(1.04);opacity:1}
  20%{transform:translateX(0) scale(1);opacity:1}
  80%{transform:translateX(0) scale(1);opacity:1}
  86%{transform:translateX(8px) scale(1.02);opacity:1}
  100%{transform:translateX(calc(-100% - 60px)) scale(.7);opacity:0}
}

@keyframes streak-slide-right{
  0%{transform:translateX(calc(100% + 60px)) scale(.65);opacity:0}
  14%{transform:translateX(0) scale(1.04);opacity:1}
  20%{transform:translateX(0) scale(1);opacity:1}
  80%{transform:translateX(0) scale(1);opacity:1}
  86%{transform:translateX(-8px) scale(1.02);opacity:1}
  100%{transform:translateX(calc(100% + 60px)) scale(.7);opacity:0}
}

/* 5-Line Streak Clawing Hand */
.streak-claw{
  --streak-border: #ff2222;
  --streak-text: #ff5555;
  --streak-glow: rgba(255, 34, 34, 0.22);
  --streak-drop: rgba(220, 32, 32, 0.22);
  --hand-dir: 1;
  position: absolute;
  bottom: clamp(55px,9vh,110px);
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: clamp(150px,19vw,280px);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(0 0 7px var(--streak-drop)) drop-shadow(0 0 14px var(--streak-glow));
}
.streak-claw-hand{
  display: block;
  width: 75%;
  height: auto;
  transform-origin: center bottom;
  transform: scaleX(var(--hand-dir, 1));
}
.streak-claw-hand img{display:block;width:100%;height:auto;object-fit:contain;filter:contrast(1.08) saturate(1.08) brightness(1.0)}
.streak-claw-badge{
  margin-top: -28px;
  margin-bottom: 8px;
  padding: 12px 34px;
  background: rgba(10,2,2,.97);
  border: 2.5px solid var(--streak-border);
  border-radius: 8px;
  color: var(--streak-text);
  font: 900 clamp(16px,2.2vw,30px)/1 "Black Ops One",Orbitron,sans-serif;
  letter-spacing: .2em;
  text-shadow: 0 0 6px var(--streak-border), 0 0 3px #000;
  box-shadow: 0 0 10px var(--streak-glow), inset 0 0 6px #000;
  white-space: nowrap;
  transform: scale(0) rotate(0deg);
  opacity: 0;
}

.streak-claw.emerge,
.streak-claw.emerge .streak-claw-hand,
.streak-claw.emerge .streak-claw-badge{will-change:transform,opacity}

.streak-claw.emerge{animation:streak-claw-container 3.3s cubic-bezier(.22,1,.4,1) forwards}
.streak-claw.emerge .streak-claw-hand{animation:streak-claw-shake 3.3s cubic-bezier(.36,0,.66,1) forwards}
.streak-claw.emerge .streak-claw-badge{animation:streak-badge-scale 3.3s cubic-bezier(.34,1.25,.64,1) forwards}

@keyframes streak-claw-container{
  0%{transform:translateX(-50%) translateY(140%);opacity:0}
  14%{transform:translateX(-50%) translateY(0%);opacity:1}
  82%{transform:translateX(-50%) translateY(0%);opacity:1}
  100%{transform:translateX(-50%) translateY(150%);opacity:0}
}

@keyframes streak-claw-shake{
  0%{transform:scaleX(var(--hand-dir, 1)) translateY(0px) rotate(0deg)}
  14%{transform:scaleX(var(--hand-dir, 1)) translateY(0px) rotate(0deg)}
  20%{transform:scaleX(var(--hand-dir, 1)) translateY(-16px) rotate(-4deg)}
  27%{transform:scaleX(var(--hand-dir, 1)) translateY(4px) rotate(3deg)}
  34%{transform:scaleX(var(--hand-dir, 1)) translateY(-20px) rotate(-5deg)}
  41%{transform:scaleX(var(--hand-dir, 1)) translateY(4px) rotate(2deg)}
  48%{transform:scaleX(var(--hand-dir, 1)) translateY(-21px) rotate(-4deg)}
  55%{transform:scaleX(var(--hand-dir, 1)) translateY(4px) rotate(3deg)}
  62%{transform:scaleX(var(--hand-dir, 1)) translateY(-18px) rotate(-5deg)}
  69%{transform:scaleX(var(--hand-dir, 1)) translateY(3px) rotate(2deg)}
  76%{transform:scaleX(var(--hand-dir, 1)) translateY(-12px) rotate(-3deg)}
  83%{transform:scaleX(var(--hand-dir, 1)) translateY(0px) rotate(0deg)}
  100%{transform:scaleX(var(--hand-dir, 1)) translateY(0px) rotate(0deg)}
}

@keyframes streak-badge-scale{
  0%{transform:scale(0) rotate(-12deg);opacity:0}
  12%{transform:scale(1.36) rotate(6deg);opacity:1}
  22%{transform:scale(0.86) rotate(-5deg);opacity:1}
  34%{transform:scale(1.24) rotate(5deg);opacity:1}
  46%{transform:scale(0.9) rotate(-4deg);opacity:1}
  58%{transform:scale(1.3) rotate(6deg);opacity:1}
  70%{transform:scale(0.92) rotate(-4deg);opacity:1}
  82%{transform:scale(1.18) rotate(3deg);opacity:1}
  92%{transform:scale(0.8) rotate(-3deg);opacity:1}
  100%{transform:scale(0) rotate(14deg);opacity:0}
}

/* --- rebindable controls screen --- */
.controls-grid{align-items:start}
.controls-profile{display:flex;flex-direction:column;gap:10px;cursor:pointer;outline:none;
  transition:opacity .18s ease,border-color .18s ease,box-shadow .18s ease}
/* Dimming tracks which panel is being edited, not which one the game mode uses.
   Every profile stays editable, so none of them should read as disabled. */
.controls-profile.dimmed{opacity:.52}
.controls-profile.dimmed:hover{opacity:.78}
.controls-profile.focused{opacity:1;border-color:var(--amber);
  box-shadow:inset 0 0 22px #000,0 0 16px rgba(170,137,100,.26)}
.controls-badge{margin-left:8px;padding:2px 6px;font-size:8px;letter-spacing:.14em;
  color:#0d0f0b;background:var(--phosphor);vertical-align:middle}
.controls-hint{margin:-6px 0 4px;font-size:9px;letter-spacing:.14em;color:rgba(174,181,166,.44)}
.controls-list{margin:0;padding:0}
/* Fixed row height and a nowrap label: a long binding like ENTER / NUM ENTER
   used to wrap its button to two lines, which dragged the action label onto two
   lines as well and knocked every column out of alignment with its neighbours. */
.controls-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  list-style:none;margin:0;min-height:34px}
.control-action{flex:0 0 auto;white-space:nowrap;font-size:10px;letter-spacing:.14em;
  color:rgba(198,206,192,.72)}
.control-key{flex:0 0 108px;max-width:108px;padding:5px 6px;border:1px solid #5d6255;
  background:#11140f;color:var(--phosphor);font:inherit;font-size:10px;letter-spacing:.06em;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;transition:border-color .12s ease,color .12s ease}
.control-key:hover{border-color:var(--amber);color:var(--amber)}
.control-key.listening{border-color:var(--amber);color:var(--amber);
  animation:flicker 1.1s steps(1,end) infinite}
.controls-status{min-height:16px;margin:4px 0 0;font-size:10px;letter-spacing:.16em;color:var(--amber)}
.controls-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;position:relative;z-index:2}
.arcade-btn.tiny{align-self:flex-start;padding:4px 10px;font-size:9px;letter-spacing:.14em}
.arcade-btn.tiny[disabled]{opacity:.34;cursor:default}
/* ONLINE MULTIPLAYER TERMINAL */
#screen-online {
  justify-content: flex-start;
  gap: 12px;
  padding: 24px clamp(18px, 4vw, 54px) 18px;
  background: radial-gradient(circle at 50% 30%, rgba(20, 26, 18, 0.94), rgba(2, 4, 2, 0.98) 75%);
  overflow-y: auto;
}

.online-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  width: min(960px, 100%);
  margin: 12px 0;
}

.online-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  background: rgba(4, 8, 4, 0.85);
  border: 1px solid #3d4a38;
  box-shadow: inset 0 0 24px #000, 0 10px 30px rgba(0, 0, 0, 0.7);
}

.room-code-display-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 16px 0;
  padding: 14px 28px;
  background: #080d07;
  border: 2px dashed #6f8a62;
  box-shadow: 0 0 20px rgba(111, 138, 98, 0.2);
  width: 100%;
}

.room-code-label {
  font-size: 9px;
  color: #7b8e73;
  letter-spacing: 0.2em;
}

.room-code-text {
  font-family: "Black Ops One", Impact, sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  color: var(--phosphor-hot);
  letter-spacing: 0.18em;
  text-shadow: 0 0 12px rgba(168, 197, 156, 0.6);
}

.room-join-input-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 16px 0;
}

.room-input {
  font-family: "Black Ops One", Impact, sans-serif;
  font-size: 18px;
  letter-spacing: 0.16em;
  text-align: center;
  padding: 12px;
  color: var(--phosphor-hot);
  background: #080d07;
  border: 1px solid #5a6b52;
  text-transform: uppercase;
}

.room-input:focus {
  border-color: var(--phosphor);
  box-shadow: 0 0 16px rgba(168, 197, 156, 0.4);
  outline: none;
}

.online-btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin-bottom: 12px;
}

.online-status-pulse {
  font-size: 10px;
  color: var(--phosphor);
  letter-spacing: 0.16em;
  animation: flicker 1.8s steps(2, end) infinite;
}

.online-status-msg {
  font-size: 10px;
  color: #a8b89e;
  letter-spacing: 0.14em;
}

.online-footer-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.online-hint {
  font-size: 8px;
  color: #6a7862;
  letter-spacing: 0.18em;
}

/* In-game Online HUD badge */
.online-hud {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(4, 8, 4, 0.88);
  border: 1px solid #4a5c43;
  border-radius: 4px;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--phosphor);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.8), inset 0 0 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.online-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ff66;
  box-shadow: 0 0 6px #00ff66;
  animation: pulse-dot 1.2s ease-in-out infinite alternate;
}

@keyframes pulse-dot {
  from { opacity: 0.4; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1.15); }
}

/* A pile of bones behind the two lobby panels. Waiting for an opponent left you
   staring at a flat gradient; this gives the wait something to look at without
   competing with the panels, which keep their own near-opaque background.
   Masked to an ellipse so it sits in the scene rather than reading as a pasted
   rectangle, and it only loads when the overlay is shown (.overlay is
   display:none until then). */
/* `.setting-desc` carries flex-grow:1, which earns it space inside a card but
   makes a 13px paragraph swallow every spare pixel of this column-flex screen —
   leaving a large empty band under the header and shoving both panels to the
   bottom of the display. */
#screen-online > .setting-desc { flex: 0 0 auto; }

.online-grid {
  position: relative;
  /* Auto block margins hand the leftover height to the panels themselves, so
     they sit centred between the header and the footer bar instead of the slack
     collecting at one end. */
  margin-block: auto;
}
.online-grid::before {
  content: "";
  position: absolute;
  /* Bleeds well past the panels so the art fills the space around them rather
     than sitting in a box behind them. */
  inset: -56% -16%;
  /* Behind every sibling on the screen. The screen itself is a stacking context
     (.overlay sets z-index), so this still paints above its background but can
     never creep over the heading or the footer. */
  z-index: -1;
  pointer-events: none;
  background: url("../art/frames/pileObones.png") center 58% / cover no-repeat;
  /* The source art is very dark (median luminance 10/255) and the screen behind
     it is near-black. The brightening is baked into the asset; dimming it here
     as well is what made it invisible. */
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse at 50% 52%, #000 34%, transparent 76%);
  mask-image: radial-gradient(ellipse at 50% 52%, #000 34%, transparent 76%);
  animation: bones-settle 11s ease-in-out infinite;
}
/* Panels and their contents sit above the backdrop. */
.online-card { position: relative; z-index: 1; }

@keyframes bones-settle {
  0%, 100% { opacity: 0.44; transform: scale(1); }
  50%      { opacity: 0.58; transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .online-grid::before { animation: none; }
}

/* --- difficulty selector ---
   The skill chips were 8px text tucked beside the mode toggle and read as a
   status line rather than a choice. Given a label, room, and an active state
   that is unmistakable. */
.character-mode-bar { gap: 14px; margin: 10px 0 4px; }
.diff-chips-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #3c4538;
  background: rgba(8, 12, 8, 0.72);
}
.diff-label {
  align-self: center;
  margin-right: 4px;
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--amber);
}
.diff-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 104px;
  padding: 8px 14px;
  border: 1px solid #3c4538;
  background: #0d110d;
  color: #8f9a8a;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease, box-shadow .12s ease;
}
.diff-tier { font-size: 12px; font-weight: 900; letter-spacing: .16em; }
.diff-name { font-size: 8px; letter-spacing: .18em; opacity: .72; }
.diff-btn:hover { border-color: #7f9776; color: #e1e9dd; background: #182017; }
.diff-btn.active {
  border-color: var(--phosphor);
  background: #22301f;
  color: #dfeada;
  box-shadow: inset 0 0 0 1px rgba(173,199,163,.35), 0 0 16px rgba(173,199,163,.3);
}
.diff-btn.active .diff-name { opacity: 1; color: var(--phosphor); }
.diff-desc { font-size: 9px; margin: 4px 0 8px; color: #a9bba2; }

/* Keyboard focus on the menu screens. */
.menu-focus,
.arcade-btn:focus-visible {
  outline: none;
  border-color: var(--amber);
  color: var(--phosphor-hot);
  box-shadow: inset 0 0 0 2px #11140f, 0 0 14px rgba(170,137,100,.4);
}

/* --- animated title backdrop ---
   Replaces the still introScreen.jpg. The image stays as ::before underneath as
   a poster: if the video fails to decode or is slow to start, the screen still
   looks finished rather than black. Same 1280x720 framing, so `contain` keeps
   the composition the still was designed around, and the existing ::after
   vignette continues to sit over the top. */
#screen-title .title-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background: #010201;
  filter: contrast(1.06) saturate(.9) brightness(.92);
  transition: opacity .45s ease-out;
}
#screen-title.visible .title-bg-video { opacity: 1; }