@font-face{font-family:ArcadePixel;src:url('assets/fonts/PressStart2P-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:ArcadeBrush;src:url('assets/fonts/Bangers-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--bg:#050820;--panel:#101945;--line:#294692;--muted:#a0b7db;--cream:#fff1cf;--gold:#ffce45;--red:#fa5435;--blue:#4dd7ff;font-family:ArcadePixel,monospace}
body{background:#050820;background-image:radial-gradient(ellipse at top,#122e6b80,transparent 75%);color:var(--cream)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:20;background:repeating-linear-gradient(transparent 0 3px,#00000018 3px 4px);opacity:.4}
.site-header{border-bottom:2px solid #244d9e}.brand-mark{color:#ffcf45;filter:drop-shadow(2px 2px #b13222)}.brand-copy{font:7px ArcadePixel,monospace;letter-spacing:0;line-height:1.8;color:#fff5ce}.brand-copy>span{font:30px ArcadeBrush,sans-serif;letter-spacing:2px;line-height:1;color:#ffd852;text-shadow:2px 2px #b13326;transform:skew(-7deg)}.location{font:8px ArcadePixel,monospace;line-height:1.7;letter-spacing:0;color:#97b7ed}.nav-button{border:1px solid #4371bf;background:#102459;color:#d1e4ff;font-family:ArcadePixel;font-size:8px;border-radius:0;box-shadow:inset 1px 1px #5e86c766}.nav-button:hover{background:#173b80;color:#fff3bd}.nav-button.square{box-shadow:none}.live-dot,.status-dot{background:#59c9ff;border-radius:0;box-shadow:0 0 8px #2294ff77}.arena-heading{font:8px ArcadePixel,monospace;letter-spacing:0}.heading-muted{color:#8aabe1}.version{font-size:7px;color:#8aabe1}.version b{color:#f6c64b}.arena{border:3px solid #d6bf72;border-radius:0;box-shadow:0 0 0 2px #111d49,0 0 0 4px #315993,0 20px 70px #0009}.arena.playing{border-color:#e4d49e}.vignette{background:linear-gradient(#0d17452b,transparent 25%,transparent 80%,#090b2333);box-shadow:inset 0 0 45px #0003}.intro{background:linear-gradient(90deg,#06112a33,#07112ce8 34%,#07112ce8 66%,#06112a33),linear-gradient(0deg,#040c23c0,transparent);gap:0;padding:16px}.intro-top{font:8px ArcadePixel,monospace;letter-spacing:0;line-height:1.6;color:#ffc348;text-shadow:2px 2px #30151f;margin:0}.intro .game-logo{width:min(52%,630px);height:clamp(150px,18vw,260px);margin:0;line-height:1;transform:rotate(-4deg);filter:drop-shadow(4px 6px 0 #04102b)}.game-logo img{width:100%;height:100%;object-fit:contain}.intro-tagline{font:9px ArcadePixel,monospace;letter-spacing:0;color:#f5f4de;text-shadow:2px 2px #15224b;margin:4px 0 0}.matchup{font:15px ArcadePixel,monospace;letter-spacing:0;gap:20px;margin:23px 0 20px;text-shadow:2px 2px #112966,3px 3px #020714}.matchup span:first-child,.matchup span:last-child{color:#fff1bb}.matchup em{font:36px ArcadeBrush,sans-serif;color:#ff8038;line-height:1;text-shadow:2px 2px #9b2c29,4px 4px #050c2c;transform:skew(-8deg)}.mode-picker{gap:10px;margin-bottom:17px}.mode{font:8px ArcadePixel,monospace;border:2px solid #3f5b9b;background:#071837;color:#bed1f0;border-radius:0;line-height:1.4;box-shadow:inset 2px 2px #112951;padding:12px}.mode span{color:#ffcf45;font-family:inherit;margin-right:8px}.mode.active{color:#fff5ce;border-color:#ffce45;background:#123a7c;box-shadow:inset 2px 2px #5b79a2,2px 2px #111835}.mode:hover{background:#1c458b}.start-button{font:12px ArcadePixel,monospace;letter-spacing:0;background:linear-gradient(#fff087 0 8%,#ffd84d 8% 52%,#efa22a 52% 100%);color:#321d2b;border:3px solid #fff4ad;border-radius:0;box-shadow:3px 3px #9a3d24,6px 6px #051332;min-width:310px;justify-content:center;line-height:1.5;padding:15px 22px;text-shadow:1px 1px #fff8bd}.start-button>span:last-child{display:none}.start-button:hover{background:linear-gradient(#fff5a7,#ffca3d);transform:translateY(-1px);color:#5d1628}.start-button:active{transform:translate(2px,2px);box-shadow:1px 1px #9a3d24,4px 4px #051332}.start-hint{font:7px ArcadePixel,monospace;line-height:1.6;letter-spacing:0;color:#bdccea;margin-top:20px}.intro-footer{font:7px ArcadePixel,monospace;letter-spacing:0;color:#a4bce3}.hud{top:4%;left:3%;right:3%;grid-template-columns:1fr 88px 1fr;gap:12px;filter:drop-shadow(2px 2px #0a1234)}.player-label{font:8px ArcadePixel,monospace;letter-spacing:0;color:#f6e9bb;line-height:1.5}.player-label b{font:18px ArcadePixel,monospace;letter-spacing:0;color:#fff4d0;text-shadow:2px 2px #d24e32,4px 4px #081232;margin:0 7px}.player-label>span:first-child,.player-label>span:last-child{color:#f9d661}.health-track,.player-two .health-track{height:25px;border:3px solid #f6f1de;transform:none;background:#672d35;margin-top:9px;box-shadow:3px 3px #08132d}.health-fill,.player-two .health-fill{background:linear-gradient(#fff4a7 0 18%,#f9d540 18% 72%,#dc9e1e 72%)}.health-trail{background:#ed503b}.hud-bottom{font:6px ArcadePixel,monospace;letter-spacing:0;gap:8px;margin-top:11px;color:#fff4c9;text-shadow:2px 2px #112965}.power-track{height:7px;max-width:115px;border:1px solid #a9dfff;background:#122441}.power-track>div,.player-two .power-track>div{background:linear-gradient(#ddfaff 0 25%,#48c6ef 25%)}.round-dots i{width:9px;height:9px;border-color:#ffd749;border-radius:0;background:#23346c}.round-dots i.won,.player-two .round-dots i.won{background:#ffcf45;box-shadow:2px 2px #823328}.round-label{font:7px ArcadePixel,monospace;letter-spacing:0;color:#fff4cf}.timer-wrap strong{font:35px ArcadePixel,monospace;color:#ffd542;line-height:1.45;text-shadow:2px 2px #bf382b,4px 4px #08132b}.timer-wrap strong.urgent{color:#ff6946}.timer-wrap button{font:9px ArcadePixel,monospace;background:#061839d9;border:1px solid #93afde;border-radius:0;padding:4px 7px;margin-top:2px}.announcement{top:35%;filter:drop-shadow(4px 4px #051134)}.announcement span{font:11px ArcadePixel,monospace;line-height:1.7;letter-spacing:0;color:#fff6d9;text-shadow:2px 2px #af3a2e}.announcement strong{font:clamp(20px,3.8vw,58px) ArcadePixel,monospace;letter-spacing:1px;line-height:1.5;color:#ffd848;text-shadow:3px 3px #cd5e2a,6px 6px #080b32}.announcement.brush-announcement strong{font:clamp(64px,13vw,190px) ArcadeBrush,sans-serif;font-style:italic;letter-spacing:3px;line-height:1.1;background:linear-gradient(#fff990 0 18%,#ffd82a 32%,#ff7128 65%,#e5322c 90%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:2px #110e1a;paint-order:stroke fill;filter:drop-shadow(2px 2px #fff4db) drop-shadow(4px 4px #09113c);text-shadow:none;display:inline-block;transform:rotate(-8deg) skew(-7deg)}.result,.pause{background:linear-gradient(135deg,#041039ed,#0b1c56e8);backdrop-filter:none;gap:24px}.result::before,.pause::before{content:"";position:absolute;inset:10px;border:2px solid #4664a4;pointer-events:none;box-shadow:inset 0 0 0 2px #05112f}.eyebrow{font:9px ArcadePixel,monospace;letter-spacing:0;line-height:1.7;color:#d7eaff;text-shadow:2px 2px #d44a34}.result h2,.pause h2{font:clamp(18px,3.1vw,48px) ArcadePixel,monospace;letter-spacing:0;color:#ffd84e;text-shadow:3px 3px #c3572d,6px 6px #020c2e;line-height:1.6;max-width:95%}.result p{font:9px ArcadePixel,monospace;line-height:1.8;color:#c8dcfc}.secondary-button{font:8px ArcadePixel,monospace;letter-spacing:0;line-height:1.7;color:#f3eacc;padding:10px 14px;position:relative}.secondary-button::before{content:"▶";position:absolute;left:-9px;color:#ffd141;opacity:0}.secondary-button:hover::before,.secondary-button:focus-visible::before{opacity:1}.stage-caption{font:7px ArcadePixel,monospace;letter-spacing:0;text-shadow:2px 2px #183150}.under-arena{font:7px ArcadePixel,monospace;line-height:1.7;letter-spacing:0;color:#a3bce2;height:52px}.keyboard-note{font-size:6px;color:#8fabe0}.control-card{background:linear-gradient(140deg,#10295c,#0a1739);border:2px solid #365c9c;border-radius:0;box-shadow:inset 2px 2px #5376ae33}.control-card h2{font:14px ArcadePixel,monospace;letter-spacing:0;color:#fff1b5;text-shadow:2px 2px #a63b2e}.control-card p{font:7px ArcadePixel,monospace;line-height:1.7;color:#a9c3ed;margin-top:8px}.player-number{font:10px ArcadePixel,monospace;border:2px solid #ae944e;background:#08183d;color:#ffdd67}.abelardo-card .player-number{border-color:#5299ba;color:#a8e3ff}.control-keys{border-color:#385588;font:7px ArcadePixel,monospace;line-height:1.8;gap:12px;color:#bdcbe7}.control-keys>span{gap:5px}kbd{font:8px ArcadePixel,monospace;height:23px;min-width:22px;background:#112b59;border:1px solid #5b80bb;border-bottom-width:3px;border-radius:0;color:#f5f0d2}.special-key kbd{border-color:#c3a150}.abelardo-card .special-key kbd{border-color:#5eabc6}.power-icon{filter:drop-shadow(2px 2px #081438)}footer{font:6px ArcadePixel,monospace;line-height:1.9;letter-spacing:0;color:#819cca}.footer-title{letter-spacing:0;color:#b8c9e6}.made-in{font-size:6px}.touch-controls button{font:8px ArcadePixel,monospace;background:#102751;border:2px solid #4779bd;border-radius:0;color:#fff0c7;box-shadow:inset 2px 2px #5b81bb33}.touch-controls button.pressed{background:#2a5a9b}.touch-move{flex-wrap:wrap}dialog{background:#0b1b46;border:3px solid #d8bd67;border-radius:0;box-shadow:0 0 0 3px #2e5095,0 25px 100px #0009}dialog h2{font:20px ArcadePixel,monospace;color:#ffd24e;line-height:1.6;letter-spacing:0;text-shadow:2px 2px #bf482c}dialog p{font-family:Arial,Helvetica,sans-serif;color:#c6d6ee}.help-columns h3{font:9px ArcadePixel,monospace;color:#ffdf76;line-height:1.7}.help-columns{border-color:#3b5d94}.help-note{color:#a7bbdf!important}.dialog-close{font-family:Arial;color:#f4d060}.load-error{background:#071c43}.load-error button{font-family:ArcadePixel;font-size:10px}
@media(max-width:1050px){.intro .game-logo{height:clamp(115px,18vw,195px);width:54%}.intro-top{font-size:7px}.intro-tagline{font-size:8px}.matchup{font-size:12px;margin:16px 0}.mode{font-size:7px;padding:9px}.start-button{font-size:10px;min-width:285px;padding:12px 18px}.start-hint{font-size:6px;margin-top:16px}.player-label b{font-size:14px}.hud{grid-template-columns:1fr 70px 1fr}.timer-wrap strong{font-size:29px}.hud-bottom{font-size:5px}.control-card h2{font-size:12px}.control-keys{font-size:6px;gap:9px}.health-track,.player-two .health-track{height:20px}.result h2,.pause h2{font-size:clamp(17px,3.2vw,34px)}.result p{font-size:8px}.secondary-button{font-size:7px}}
@media(max-width:700px){.brand-copy{font-size:6px}.brand-copy>span{font-size:25px}.brand-mark{width:30px}.nav-button{padding:7px}.arena-heading{font-size:6px;height:42px}.version{font-size:5px}.version b{margin-left:4px}.heading-muted{font-size:5px}.arena{aspect-ratio:16/11}.intro{padding:10px}.intro-top{font-size:5px;margin:0}.intro .game-logo{width:67%;height:clamp(90px,26vw,157px);margin:0}.intro-tagline{font-size:6px;margin:0}.matchup{font-size:9px;margin:12px 0;gap:14px}.matchup em{font-size:26px}.mode{font-size:5px;padding:9px 6px;line-height:1.5;max-width:160px;border-width:1px}.mode-picker{gap:7px;margin-bottom:13px}.start-button{font-size:9px;padding:11px 14px;min-width:245px;border-width:2px;box-shadow:2px 2px #9a3d24,4px 4px #051332}.start-hint{font-size:5px;margin-top:15px;line-height:1.8;max-width:90%}.hud{grid-template-columns:1fr 45px 1fr;gap:7px;top:5%;left:3%;right:3%}.player-label b{font-size:9px;line-height:1.4;margin:0 3px;text-shadow:1px 1px #d24e32,2px 2px #081232}.player-label{font-size:5px}.health-track,.player-two .health-track{height:14px;border-width:2px;margin-top:5px;box-shadow:2px 2px #08132d}.timer-wrap strong{font-size:22px;line-height:1.4;text-shadow:1px 1px #bf382b,2px 2px #08132b}.round-label{font-size:5px}.timer-wrap button{font-size:7px;padding:2px 6px}.hud-bottom{margin-top:6px}.round-dots i{width:6px;height:6px}.stage-caption{font-size:5px;left:10px;right:10px;bottom:10px;line-height:1.5}.announcement span{font-size:7px;line-height:1.8}.announcement strong{font-size:23px;letter-spacing:0;text-shadow:2px 2px #cd5e2a,4px 4px #080b32}.announcement.brush-announcement strong{font-size:78px;-webkit-text-stroke:1px #110e1a}.announcement{top:35%}.result,.pause{gap:18px}.result h2,.pause h2{font-size:18px;text-shadow:2px 2px #c3572d,4px 4px #020c2e;line-height:1.7}.result .eyebrow,.pause .eyebrow{font-size:6px}.result p{font-size:6px;line-height:1.9;max-width:90%}.result-buttons{gap:16px}.secondary-button{font-size:6px}.under-arena{font-size:5px;height:42px;line-height:1.8}.control-card{padding:14px}.control-card h2{font-size:12px}.control-card p{font-size:6px;margin-top:7px}.control-keys{font-size:6px;gap:9px;line-height:1.9}kbd{font-size:7px;min-width:20px;height:22px}.player-number{font-size:8px}.control-grid{gap:12px}footer{font-size:5px;line-height:1.9}.made-in{font-size:5px}.touch-controls{gap:10px}.touch-controls button{min-width:39px;font-size:7px}.touch-move,.touch-attack{gap:4px}.touch-attack{flex-wrap:wrap;justify-content:flex-end}.touch-controls .touch-special{min-width:95px}dialog h2{font-size:17px}.help-columns h3{font-size:8px}}
@media(max-width:390px){.intro .game-logo{height:100px}.intro-tagline{display:none}.intro .matchup{font-size:8px;margin:9px 0}.mode{font-size:4px;padding:8px 5px}.start-button{min-width:220px;font-size:8px}.intro-top{font-size:4px}.start-hint{font-size:4px;margin-top:13px}.result h2{font-size:15px}.under-arena{font-size:4px}.heading-muted{display:none}}