@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--gold:#e8b65a;--paper:#f4f1e9;--muted:#9da4ac;--panel:rgba(8,13,20,.88);--line:rgba(255,255,255,.14)}
*{box-sizing:border-box}body{margin:0;background:#080d14;color:var(--paper);font-family:Inter,Arial,sans-serif;overflow:hidden}#game{position:fixed;inset:0;z-index:0}#game canvas{width:100%;height:100%;display:block}.grain{position:fixed;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,rgba(3,7,12,.9),rgba(3,7,12,.3) 55%,rgba(3,7,12,.55)),radial-gradient(ellipse at 70% 30%,transparent,rgba(0,0,0,.4));}
.topbar{position:fixed;z-index:3;top:0;left:0;right:0;height:82px;padding:18px 4vw;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.08)}.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:2px;font-size:15px}.brand small{display:block;font-size:8px;letter-spacing:3px;color:var(--muted);margin-top:4px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--gold);color:var(--gold);font-family:'Barlow Condensed';font-size:22px}.online{font-size:10px;letter-spacing:2px;color:#c9d2d8}.online i{display:inline-block;width:7px;height:7px;background:#65dc9b;border-radius:50%;margin-right:8px;box-shadow:0 0 12px #65dc9b}
.screen{position:relative;z-index:2;height:100vh;padding:120px 7vw 55px;display:grid;grid-template-columns:1fr minmax(360px,470px);gap:6vw;align-items:center}.hero{max-width:580px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:3px;color:var(--gold)}h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(80px,11vw,156px);line-height:.78;letter-spacing:-3px;margin:22px 0;text-shadow:0 8px 45px #000}h1 em{font-style:normal;color:var(--gold)}.hero p{max-width:380px;line-height:1.8;color:#b3bbc2;font-size:13px}.hero-actions{display:flex;gap:12px;margin-top:32px}.primary,.secondary{height:48px;padding:0 24px;border:1px solid var(--gold);font-weight:800;font-size:10px;letter-spacing:1.8px;cursor:pointer;transition:.2s}.primary{background:var(--gold);color:#111820}.primary:hover{background:#ffd17c;transform:translateY(-2px)}.primary span{font-size:18px;margin-left:22px}.secondary{background:rgba(10,17,25,.55);color:var(--paper);border-color:rgba(255,255,255,.3)}.secondary:hover{border-color:var(--gold);color:var(--gold)}.mini-stats{display:flex;gap:32px;margin-top:58px;font-size:8px;letter-spacing:2px;color:#9ba4ad}.mini-stats b{display:block;font-family:'Barlow Condensed';font-size:23px;color:var(--paper);margin-bottom:4px}
.panel{background:var(--panel);backdrop-filter:blur(18px);border:1px solid var(--line);padding:25px;box-shadow:0 25px 80px #0008}.panel-head{display:flex;justify-content:space-between;align-items:end}.panel h2,.modal h2{font:700 31px 'Barlow Condensed';margin:7px 0 0;text-transform:uppercase}.counter{font-size:10px;color:var(--gold);letter-spacing:2px}.fighters{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:20px 0}.fighter-card{border:1px solid var(--line);background:#111923;padding:9px 4px;text-align:center;cursor:pointer;transition:.2s}.fighter-card.active{border-color:var(--gold);background:#292316}.fighter-avatar{height:55px;display:grid;place-items:center;font:900 30px 'Barlow Condensed';color:var(--gold);background:linear-gradient(145deg,#263442,#101720);margin-bottom:8px}.fighter-card b{font-size:8px;letter-spacing:1px}.fighter-detail{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;min-height:105px}.detail-top{display:flex;justify-content:space-between;align-items:center}.detail-top strong{font:700 24px 'Barlow Condensed';letter-spacing:1px}.detail-top span{font-size:9px;color:var(--gold);letter-spacing:1px}.stat{display:grid;grid-template-columns:55px 1fr 25px;gap:8px;align-items:center;margin-top:8px;font-size:8px;color:#aeb6be}.stat-track{height:4px;background:#303a44}.stat-track i{display:block;height:100%;background:var(--gold)}.room-controls{display:grid;grid-template-columns:1fr 105px;gap:8px;margin-top:17px}.room-controls input{min-width:0;background:#101720;border:1px solid var(--line);padding:12px;color:white;font-size:10px;outline:none}.room-controls input:focus{border-color:var(--gold)}#join{grid-column:1/-1;height:38px}.hint{font-size:9px;line-height:1.6;color:#7e8993;margin-top:12px}
.overlay{position:fixed;z-index:5;inset:0;background:#05090edb;display:grid;place-items:center;backdrop-filter:blur(12px)}.hidden{display:none!important}.modal{width:min(480px,92vw);padding:32px;background:#0c131c;border:1px solid #39434b;text-align:center;box-shadow:0 30px 100px #000}.modal h2{font-size:44px}.room-code{margin:20px 0;padding:13px;background:#141f2a;font-size:9px;letter-spacing:2px;color:#aab2bb}.room-code b{font:700 22px 'Barlow Condensed';color:var(--gold);margin:0 12px}.room-code button{background:none;border:0;color:white;font-size:9px;cursor:pointer}.player-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.slot{padding:18px 8px;border:1px solid var(--line);background:#111a24}.slot b{display:block;font:700 22px 'Barlow Condensed';margin:8px}.slot small{font-size:8px;color:#98a3ad;letter-spacing:1px}.modal p{font-size:11px;color:#aab2bb;margin:18px}.wide{width:100%}.text-button{background:none;border:0;color:#9ca5ae;font-size:9px;letter-spacing:2px;margin-top:18px;cursor:pointer}
#hud{position:fixed;inset:0;z-index:4;pointer-events:none}.fight-hud{position:absolute;top:25px;left:5vw;right:5vw;display:grid;grid-template-columns:1fr 120px 1fr;gap:25px;align-items:center}.fighter-hud strong{font:700 19px 'Barlow Condensed';letter-spacing:2px}.fighter-hud.right{text-align:right}.bar{height:10px;background:#29313a;margin-top:7px;border:1px solid #68717a}.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#c48a38,#f1cb77);transition:width .2s}.right .bar i{margin-left:auto;background:linear-gradient(90deg,#c45b4b,#ed9a75)}.stamina{height:4px;background:#29313a;margin-top:5px}.stamina i{display:block;width:100%;height:100%;background:#72c8bd;transition:width .2s}.round-info{text-align:center;background:#080e16d9;border:1px solid #ffffff25;padding:10px}.round-info b{display:block;color:var(--gold);font-size:9px;letter-spacing:2px}.round-info strong{display:block;font:700 27px 'Barlow Condensed';margin:2px}.round-info small{font-size:8px;color:#aab2bb;letter-spacing:2px}.controls-hint{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:1px;color:#e7e9eb;text-shadow:0 2px 8px #000}.controls-hint span{color:var(--gold);padding:0 6px}.result{pointer-events:auto;position:absolute;inset:0;background:#05090edb;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;backdrop-filter:blur(8px)}.result h2{font:900 clamp(65px,12vw,120px) 'Barlow Condensed';margin:8px;color:var(--gold)}.result p{color:#b7c0c8;font-size:12px;margin-bottom:25px}.toast{position:fixed;z-index:10;bottom:55px;left:50%;transform:translateX(-50%);background:#111c27;border:1px solid var(--gold);padding:12px 20px;font-size:11px;opacity:0;transition:.2s;pointer-events:none}.toast.show{opacity:1}
@media(max-width:900px){.screen{grid-template-columns:1fr;padding:105px 6vw 30px;overflow:auto;display:block}.hero{margin-bottom:25px}.hero h1{font-size:75px}.hero p,.mini-stats{display:none}.panel{max-width:520px;margin:auto}.topbar{height:65px}.fight-hud{grid-template-columns:1fr 85px 1fr;gap:8px;top:12px}.fighter-hud strong{font-size:14px}.controls-hint{font-size:7px;bottom:9px}.room-controls{grid-template-columns:1fr 95px}}