:root{--bg:#070912;--panel:#0d1120;--line:#263149;--text:#f5f7fb;--muted:#9ca9bd;--pink:#ff3da6;--cyan:#4ef2f5;--yellow:#ffd85a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--text);background:radial-gradient(circle at 50% 25%,#151939 0,#070912 48%);min-height:100vh;margin:0;font-family:Arial,Helvetica,sans-serif}button,a{font:inherit}button{cursor:pointer}.topbar{border-bottom:1px solid #7aacd326;justify-content:space-between;align-items:center;max-width:1480px;height:70px;margin:auto;padding:0 34px;display:flex}.brand{color:#fff;letter-spacing:2px;align-items:center;gap:13px;font-size:15px;font-weight:800;text-decoration:none;display:flex}.brand b{color:var(--cyan)}.brandMark{clip-path:polygon(50% 0,100% 25%,90% 84%,50% 100%,10% 84%,0 25%);background:linear-gradient(140deg,var(--pink),#7129f3);place-items:center;width:38px;height:38px;font-size:11px;font-weight:900;display:grid}.headerActions{align-items:center;gap:9px;display:flex}.textBtn,.iconBtn{color:#d5dbea;background:#111627;border:1px solid #29324a;border-radius:6px;height:36px}.textBtn{text-transform:uppercase;letter-spacing:1.5px;padding:0 18px;font-size:11px;font-weight:800}.iconBtn{width:40px;font-weight:800}.textBtn:hover,.iconBtn:hover,.textBtn:focus-visible,.iconBtn:focus-visible{border-color:var(--cyan);outline:none}.arenaShell{max-width:1380px;margin:22px auto 0;padding:0 28px}.hud{z-index:3;background:linear-gradient(#11172a,#0b0f1d);border:1px solid #263149;border-bottom:0;grid-template-columns:1fr 150px 1fr;align-items:center;height:112px;padding:16px 28px;display:grid;position:relative}.fighterHud.right{text-align:right}.hudName{align-items:center;gap:12px;margin-bottom:8px;display:flex}.right .hudName{flex-direction:row-reverse}.hudName span{color:#c8d3e6;background:#222b40;padding:5px 7px;font-size:10px;font-weight:900}.hudName b{letter-spacing:2px;font-size:16px}.bar{clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,8px 100%);background:#252b3a;height:14px;padding:3px;position:relative}.bar i{height:100%;transition:width .16s;display:block}.health i{background:linear-gradient(90deg,#ff3d75,var(--pink))}.right .health i{background:linear-gradient(90deg,var(--cyan),#1ca9de);margin-left:auto}.energy{background:#151a29;width:68%;height:9px;margin-top:6px;overflow:visible}.right .energy{margin-left:auto}.energy i{background:var(--yellow)}.energy small{letter-spacing:1px;color:#8f9aaf;font-size:8px;position:absolute;top:11px;left:7px}.right .energy small{left:auto;right:7px}.timer{text-align:center;align-self:start}.timer small{color:#98a4b7;letter-spacing:2px;font-size:9px;font-weight:800;display:block}.timer strong{text-shadow:3px 3px #3b1d70;font-size:47px;font-style:italic;line-height:1.05}.canvasWrap{aspect-ratio:16/7.45;background:#090d1a;border:1px solid #28334d;position:relative;overflow:hidden;box-shadow:0 20px 65px #0008}.canvasWrap canvas{outline:none;width:100%;height:100%;display:block}.scanlines{pointer-events:none;mix-blend-mode:multiply;background:repeating-linear-gradient(0deg,#0000 0 3px,#00000017 4px);position:absolute;inset:0}.quickControls{letter-spacing:.7px;background:#0c1120;border:1px solid #253149;justify-content:space-between;align-items:center;min-height:60px;padding:10px 24px;font-size:10px;display:flex}.quickControls>div{align-items:center;gap:8px;display:flex}.quickControls p{color:#96a4b8;margin:0}.quickControls p span{color:#3d4b65;margin:0 8px}.quickControls em{color:#7d8da5;margin-left:10px;font-style:normal}.pDot{border-radius:50%;width:8px;height:8px;display:inline-block;box-shadow:0 0 10px}.pink{background:var(--pink);color:var(--pink)}.cyan{background:var(--cyan);color:var(--cyan)}kbd{color:#fff;text-align:center;letter-spacing:.7px;background:#222a3c;border:1px solid #3a4761;border-bottom-width:3px;border-radius:4px;min-width:24px;padding:4px 7px;font:700 9px Arial;display:inline-block}.koOverlay{z-index:5;background:radial-gradient(circle,#29083c80,#03050cc7);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.koOverlay>span{color:#fff;text-shadow:7px 7px 0 var(--pink),-4px -2px 0 var(--cyan);font-size:100px;font-style:italic;font-weight:1000;line-height:.8}.koOverlay h2{letter-spacing:7px;margin:28px 0 3px;font-size:25px}.koOverlay p{color:#a8b5c7;margin:0 0 22px}.primary{color:#fff;letter-spacing:2px;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);background:linear-gradient(90deg,#e82892,#7f36e8);border:0;padding:14px 28px;font-size:12px;font-weight:900;box-shadow:0 8px 30px #ec26864d}.primary:hover,.primary:focus-visible{filter:brightness(1.2);outline-offset:3px;outline:2px solid #fff}.primary small{border:1px solid #ffffff73;margin-left:10px;padding:2px 4px}.howTo{grid-template-columns:.9fr 1.4fr;align-items:end;gap:70px;max-width:1320px;margin:52px auto 65px;padding:0 28px;display:grid}.eyebrow{font-weight:900;color:var(--cyan)!important;letter-spacing:3px!important;font-size:9px!important}.howTo h1{letter-spacing:-2px;margin:13px 0 15px;font-size:46px;line-height:.95}.howTo h1 i{color:var(--pink);font-style:normal}.howTo>div>p{color:#8f9db2;max-width:460px;font-size:13px;line-height:1.6}.tipCards{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.tipCards article{background:linear-gradient(145deg,#111629,#0b0f1d);border:1px solid #252f46;min-height:135px;padding:17px;position:relative}.tipCards article:after{content:"";background:var(--pink);width:35px;height:2px;position:absolute;top:0;left:0}.tipCards span{color:#44516c;margin-bottom:15px;font-size:11px;font-weight:900;display:block}.tipCards b{letter-spacing:1.4px;font-size:11px}.tipCards p{color:#8290a6;margin-bottom:0;font-size:11px;line-height:1.5}footer{color:#55627a;letter-spacing:1.5px;border-top:1px solid #1d2538;justify-content:space-between;align-items:center;min-height:76px;padding:0 max(34px,50vw - 660px);font-size:9px;display:flex}footer button{color:#8d9ab0;letter-spacing:1.5px;background:0 0;border:0;font-size:9px;font-weight:800}.modalBackdrop{z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#03050cdb;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.controlsModal{background:linear-gradient(145deg,#151b30,#0b0f1d);border:1px solid #34415d;width:min(760px,100%);padding:38px;position:relative;box-shadow:0 30px 100px #000}.controlsModal h2{letter-spacing:-1px;margin:7px 0 28px;font-size:35px}.close{color:#fff;background:#1b2235;border:1px solid #34415d;width:38px;height:38px;font-size:22px;position:absolute;top:15px;right:18px}.controlGrid{grid-template-columns:1fr 1fr;gap:34px;display:grid}.controlList h3{letter-spacing:2px;border-bottom:1px solid #2b354c;padding-bottom:12px;font-size:11px}.controlList h3 .pDot{margin-right:9px}.controlList>div{color:#9ca9bc;border-bottom:1px solid #20283a;justify-content:space-between;align-items:center;min-height:43px;font-size:11px;display:flex}.guardNote{border-left:3px solid var(--yellow);color:#9ca9bc;background:#0a0f1d;gap:22px;margin:27px 0;padding:15px;font-size:11px;line-height:1.8;display:flex}.guardNote b{color:var(--yellow);letter-spacing:1px}.wide{width:100%}@media (max-width:800px){.topbar{height:58px;padding:0 15px}.brand{font-size:12px}.arenaShell{margin-top:10px;padding:0 8px}.hud{grid-template-columns:1fr 66px 1fr;height:82px;padding:8px 10px}.hudName b{font-size:10px}.hudName span{display:none}.timer strong{font-size:34px}.canvasWrap{aspect-ratio:16/9}.quickControls{display:none}.howTo{grid-template-columns:1fr;gap:25px;margin-top:35px}.tipCards{grid-template-columns:1fr}.howTo h1{font-size:38px}.controlGrid{grid-template-columns:1fr;gap:15px}.controlsModal{padding:25px}.koOverlay>span{font-size:62px}.koOverlay h2{margin-top:20px;font-size:18px}footer span{display:none}footer{justify-content:center}.textBtn{display:none}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}