:root{--bg:#070b14;--panel:#111827;--text:#f8fafc;--muted:#94a3b8;--gold:#fbbf24;--orange:#f97316;--red:#ef4444;--blue:#38bdf8;--cyan:#22d3ee;--purple:#a855f7;--green:#34d399}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:#050812;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overscroll-behavior:none}
body{min-height:100%;touch-action:manipulation}.screen{display:none;min-height:100vh;position:relative;overflow:hidden}.screen.active{display:flex}
button{font:inherit;color:inherit;border:0;cursor:pointer}.menu-screen{align-items:center;justify-content:center;padding:max(24px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom));background:#070b14}
.menu-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 18%,rgba(56,189,248,.24),transparent 34%),linear-gradient(145deg,#101827,#090d17 60%,#1b1024);overflow:hidden}.menu-bg:before{content:"";position:absolute;left:8%;right:8%;bottom:12%;height:44%;background:linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px),linear-gradient(rgba(148,163,184,.06) 1px,transparent 1px);background-size:56px 56px;transform:perspective(400px) rotateX(62deg);transform-origin:bottom;mask-image:linear-gradient(to top,#000,transparent)}
.menu-content{position:relative;width:min(760px,100%);text-align:center;z-index:2}.kicker{font-weight:900;letter-spacing:.18em;font-size:12px;color:#fde68a;margin-bottom:6px}.menu-content h1{margin:0;line-height:.82;font-weight:1000;letter-spacing:-.05em}.menu-content h1 span{display:block;font-size:clamp(42px,10vw,86px);color:#fff;text-shadow:0 7px 25px rgba(0,0,0,.6)}.menu-content h1 strong{display:block;font-size:clamp(72px,17vw,142px);color:#ef4444;font-style:italic;text-shadow:0 6px 0 #7f1d1d,0 18px 45px rgba(239,68,68,.35)}.sub{margin:16px 0 20px;font-weight:800;letter-spacing:.08em;color:#cbd5e1}.fighter-strip{display:flex;align-items:stretch;gap:10px;justify-content:center;margin:22px auto;max-width:690px}.fighter-card{flex:1;min-width:0;background:rgba(15,23,42,.82);border:1px solid rgba(148,163,184,.18);border-radius:18px;padding:10px;box-shadow:0 16px 40px rgba(0,0,0,.22)}.fighter-card b{display:block;font-size:13px}.fighter-card small{color:var(--muted);font-size:10px;font-weight:800}.hero-card{border-color:rgba(34,211,238,.35)}.versus{align-self:center;font-weight:1000;font-size:19px;color:#fbbf24}.avatar{height:78px;border-radius:14px;margin-bottom:8px;background:#1e293b;position:relative;overflow:hidden}.avatar:before{content:"";position:absolute;left:50%;top:15%;width:34px;height:34px;border-radius:50%;transform:translateX(-50%);background:#c08457}.avatar:after{content:"";position:absolute;left:50%;bottom:-12px;width:64px;height:52px;border-radius:28px 28px 8px 8px;transform:translateX(-50%);background:#e5e7eb}.hero-avatar{background:linear-gradient(145deg,#083344,#164e63)}.hero-avatar:after{background:#f8fafc}.as-avatar{background:linear-gradient(145deg,#4c0519,#881337)}.as-avatar:after{background:#db2777}.bs-avatar{background:linear-gradient(145deg,#292524,#44403c)}.bs-avatar:before{background:#d6a77a;box-shadow:-16px -10px 0 1px #cbd5e1,16px -10px 0 1px #cbd5e1}.bs-avatar:after{background:#292524}.menu-actions{display:grid;gap:10px;max-width:430px;margin:0 auto}.big-btn{min-height:54px;border-radius:15px;padding:0 18px;font-weight:950;letter-spacing:.02em;border:1px solid transparent}.big-btn.primary{background:linear-gradient(#fbbf24,#f59e0b);color:#1c1917;box-shadow:0 8px 0 #92400e}.big-btn.secondary{background:linear-gradient(#7c3aed,#5b21b6);box-shadow:0 7px 0 #3b0764}.big-btn.ghost{background:rgba(15,23,42,.85);border-color:rgba(148,163,184,.25)}.big-btn:active{transform:translateY(3px);box-shadow:none}.disclaimer{font-size:11px;color:#64748b;margin-top:18px}
.fight-screen{background:#050812;flex-direction:column;min-height:100vh}.hud{height:92px;position:absolute;z-index:5;top:0;left:0;right:0;display:grid;grid-template-columns:1fr 160px 1fr;gap:12px;padding:10px 54px 8px;background:linear-gradient(180deg,rgba(3,7,18,.92),rgba(3,7,18,.35),transparent);pointer-events:none}.hud-side{min-width:0}.name-row{display:flex;justify-content:space-between;align-items:center;font-weight:1000;font-size:13px;letter-spacing:.05em;text-shadow:0 2px 5px #000}.name-row b{background:#fbbf24;color:#111827;width:24px;height:24px;border-radius:50%;display:grid;place-items:center}.health{height:19px;border:3px solid #e2e8f0;background:#450a0a;border-radius:4px;overflow:hidden;box-shadow:0 2px 0 #000}.health i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#22c55e,#84cc16,#facc15);transition:width .16s}.health.reverse{direction:rtl}.meter-row{display:flex;gap:7px;align-items:center;margin-top:5px}.meter-row.reverse{justify-content:flex-end}.meter-row small{font-weight:900;color:#cbd5e1}.rage-mini{height:7px;flex:1;max-width:180px;background:#1e293b;border-radius:10px;overflow:hidden}.rage-mini i{display:block;width:0;height:100%;background:linear-gradient(90deg,#f97316,#ef4444,#facc15);transition:width .2s}.round-box{text-align:center;align-self:start;background:rgba(15,23,42,.9);border:1px solid rgba(148,163,184,.3);border-radius:12px;padding:6px 10px;box-shadow:0 8px 30px rgba(0,0,0,.3)}.round-box small,.round-box span{display:block;color:#cbd5e1;font-size:9px;font-weight:900;letter-spacing:.08em}.round-box b{font-size:28px;line-height:1}.top-icon{position:absolute;right:8px;top:8px;width:40px;height:40px;border-radius:10px;background:rgba(15,23,42,.9);border:1px solid rgba(148,163,184,.3);pointer-events:auto;font-weight:1000}.canvas-wrap{position:absolute;inset:0;overflow:hidden}.canvas-wrap canvas{width:100%;height:100%;display:block;touch-action:none}.announcer{position:absolute;left:0;right:0;top:39%;text-align:center;font-size:clamp(42px,8vw,88px);font-style:italic;font-weight:1000;letter-spacing:-.06em;text-shadow:0 6px 0 #7f1d1d,0 14px 35px #000;color:#f8fafc;opacity:0;transform:scale(.7);pointer-events:none}.announcer.show{animation:announce .85s ease forwards}.combo{position:absolute;left:22px;top:112px;font-size:28px;font-weight:1000;font-style:italic;color:#fde68a;text-shadow:0 3px 0 #9a3412,0 8px 20px #000;opacity:0;transform:rotate(-5deg)}.combo.show{animation:combo .55s ease forwards}.controls{position:absolute;z-index:7;left:0;right:0;bottom:max(8px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:end;padding:0 15px;pointer-events:none}.move-pad,.attack-pad{display:flex;gap:8px;align-items:end;pointer-events:auto}.ctrl{width:68px;height:68px;border-radius:50%;background:rgba(15,23,42,.72);border:2px solid rgba(226,232,240,.38);box-shadow:inset 0 0 0 3px rgba(255,255,255,.03),0 7px 22px rgba(0,0,0,.35);font-size:13px;font-weight:1000;backdrop-filter:blur(8px);touch-action:none;user-select:none}.ctrl:active,.ctrl.pressed{transform:scale(.92);filter:brightness(1.3)}.move{font-size:24px}.jump{transform:translateY(-36px)}.jump:active,.jump.pressed{transform:translateY(-36px) scale(.92)}.punch{background:rgba(37,99,235,.82)}.kick{background:rgba(220,38,38,.84)}.block{background:rgba(71,85,105,.86)}.special{background:linear-gradient(145deg,rgba(249,115,22,.94),rgba(190,24,93,.94));box-shadow:0 0 25px rgba(249,115,22,.28)}.special.ready{animation:pulse 1s infinite;border-color:#fde68a;box-shadow:0 0 30px rgba(251,191,36,.6)}.overlay{position:absolute;z-index:20;inset:0;display:grid;place-items:center;background:rgba(2,6,23,.76);backdrop-filter:blur(5px)}.hidden{display:none!important}.panel{width:min(390px,calc(100% - 40px));background:#0f172a;border:1px solid rgba(148,163,184,.25);border-radius:22px;padding:24px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.55)}.panel h2{font-size:42px;margin:0 0 20px;font-style:italic}.panel .big-btn{width:100%;margin-top:10px}.result-tag{font-size:64px;font-weight:1000;color:#ef4444;font-style:italic;text-shadow:0 5px 0 #7f1d1d}.result-panel p{color:#cbd5e1}.rotate-note{display:none;position:absolute;z-index:30;inset:auto 10px 10px;background:#0f172a;border:1px solid #334155;border-radius:12px;padding:10px 14px;text-align:center;font-size:12px;color:#cbd5e1}
.info-screen{align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 50% 0,#172554,#050812 58%)}.info-card{position:relative;width:min(650px,100%);background:rgba(15,23,42,.93);border:1px solid #334155;border-radius:24px;padding:28px}.info-card h2{font-size:34px;margin:0 0 18px}.back-btn{position:absolute;right:16px;top:16px;width:44px;height:44px;border-radius:50%;background:#1e293b;font-size:32px}.control-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.control-grid div{background:#111827;border:1px solid #334155;border-radius:14px;padding:15px;text-align:center}.control-grid b,.control-grid span{display:block}.control-grid b{font-size:18px;color:#fde68a}.control-grid span{font-size:12px;color:#cbd5e1;margin-top:5px}.info-card p,.keyboard-help{color:#cbd5e1;line-height:1.55}.keyboard-help{font-size:13px;background:#020617;border-radius:12px;padding:12px;margin-top:14px}
@keyframes announce{0%{opacity:0;transform:scale(.7)}25%{opacity:1;transform:scale(1.12)}55%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}@keyframes combo{0%{opacity:0;transform:translateY(12px) rotate(-5deg) scale(.8)}35%{opacity:1;transform:translateY(0) rotate(-5deg) scale(1.12)}100%{opacity:0;transform:translateY(-25px) rotate(-5deg) scale(1)}}@keyframes pulse{50%{filter:brightness(1.45);transform:scale(1.05)}}
@media(max-width:680px) and (orientation:portrait){.rotate-note{display:block}.hud{height:82px;grid-template-columns:1fr 78px 1fr;padding:8px 46px 8px 7px;gap:5px}.round-box{padding:5px}.round-box small{display:none}.round-box b{font-size:23px}.name-row{font-size:10px}.health{height:14px;border-width:2px}.ctrl{width:58px;height:58px;font-size:10px}.move{font-size:20px}.controls{padding:0 7px}.move-pad,.attack-pad{gap:5px}.fighter-strip{gap:6px}.fighter-card{padding:6px}.avatar{height:60px}.menu-content h1 span{font-size:38px}.menu-content h1 strong{font-size:66px}.control-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-height:520px){.hud{height:76px;padding-top:6px}.health{height:15px}.round-box b{font-size:24px}.controls{bottom:4px}.ctrl{width:60px;height:60px}.jump{transform:translateY(-28px)}.jump:active,.jump.pressed{transform:translateY(-28px) scale(.92)}}
@media(min-width:900px){.mobile-controls{padding:0 40px 18px}.ctrl{width:76px;height:76px}.menu-content{transform:scale(.96)}}