:root{--bg:#080b12;--panel:#111726;--line:#27324b;--accent:#ff4d2e;--text:#f7f8fb;--muted:#9aa4b6}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;color:var(--text)}
button{font:inherit;color:inherit;border:1px solid var(--line);background:#151b2a;border-radius:14px;padding:14px 18px;font-weight:800;letter-spacing:.04em;cursor:pointer}
button:active{transform:scale(.97)} button.primary{background:linear-gradient(135deg,#ff4d2e,#ff8c32);border:0;color:#fff;box-shadow:0 10px 30px #ff4d2e33}
.screen{position:absolute;inset:0;display:none}.screen.active{display:flex}
#menu,#select,#result{align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle at 20% 20%,#1b2440 0,#090b12 45%,#05070b 100%)}
.logo{font-size:clamp(34px,7vw,90px);font-weight:1000;letter-spacing:-.05em;text-shadow:0 8px 30px #000}.logo span{display:block;color:#ff5838;transform:skewX(-8deg)}
.tag{color:var(--muted);margin:8px 0 24px}.menuCard{display:grid;gap:12px;width:min(420px,84vw)}.version{position:absolute;right:18px;bottom:14px;color:#65708a;font-size:12px}
.topline{position:absolute;top:18px;left:18px;right:18px;display:flex;align-items:center;gap:14px}.topline h2{margin:0}.backBtn{padding:10px 14px}
.fighters{display:grid;grid-template-columns:repeat(3,minmax(120px,220px));gap:18px;max-width:760px;padding:80px 20px 100px}.fighterCard{position:relative;aspect-ratio:3/4;border-radius:24px;background:linear-gradient(180deg,#202b48,#101522);overflow:hidden;border:2px solid transparent;box-shadow:0 16px 40px #0008}.fighterCard.selected{border-color:#ff6a45;transform:translateY(-4px)}.fighterArt{position:absolute;inset:0;display:grid;place-items:center;font-size:80px}.fighterMeta{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(transparent,#070a10 45%)}.fighterMeta strong{font-size:20px}.fighterMeta small{display:block;color:#c4cada;margin-top:4px}.selectFooter{position:absolute;bottom:18px}
#fight{background:#05070b;align-items:center;justify-content:center}.screen#fight.active{display:flex}#gameCanvas{width:100vw;height:100vh;object-fit:cover;background:#0c1625}
#hud{position:absolute;z-index:3;top:14px;left:4%;right:4%;display:grid;grid-template-columns:1fr 100px 1fr;gap:18px;align-items:start}.hudSide.right{text-align:right}.name{font-weight:1000;font-size:clamp(14px,2vw,26px);text-shadow:0 2px 8px #000}.bar{height:24px;background:#20151b;border:2px solid #f2f4f8;border-radius:999px;overflow:hidden}.fill{height:100%;width:100%;background:linear-gradient(90deg,#e84444,#ffc447);transition:width .12s}.right .fill{margin-left:auto}.roundDots{margin-top:6px;font-size:18px;color:#ffd258;min-height:20px}#timer{text-align:center;font-size:clamp(26px,4vw,46px);font-weight:1000;text-shadow:0 3px 10px #000}
#banner{position:absolute;z-index:4;inset:0;display:grid;place-items:center;pointer-events:none;font-size:clamp(42px,10vw,120px);font-weight:1000;font-style:italic;text-shadow:0 8px 25px #000;opacity:0;transition:.2s}.showBanner{opacity:1!important}
#pauseBtn{position:absolute;z-index:7;right:12px;top:12px;padding:8px 12px;opacity:.6}
.touch{position:absolute;z-index:6;bottom:max(12px,env(safe-area-inset-bottom));display:flex;gap:16px;align-items:flex-end}.touch-left{left:14px}.touch-right{right:14px}.touch button{width:56px;height:56px;border-radius:50%;padding:0;background:#111827bb;border-color:#ffffff35;backdrop-filter:blur(6px)}.dpad{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,56px);gap:4px}.dpad button:nth-child(1){grid-area:2/1}.dpad button:nth-child(2){grid-area:1/2}.dpad button:nth-child(3){grid-area:2/3}.dpad button:nth-child(4){grid-area:2/2}.actions{display:grid;grid-template-columns:repeat(2,56px);gap:6px}.actions button{background:#7b2136cc}.hidden{display:none!important}
.resultCard{width:min(480px,88vw);text-align:center;background:#111726dd;padding:30px;border-radius:26px;border:1px solid #ffffff18;box-shadow:0 25px 70px #0009}.resultCard h1{font-size:52px;margin:0 0 8px}.resultCard button{display:block;width:100%;margin-top:10px}
.modal{position:absolute;z-index:20;inset:0;background:#000b;display:grid;place-items:center}.modalCard{position:relative;width:min(580px,90vw);background:#121827;border:1px solid #ffffff20;border-radius:24px;padding:28px;line-height:1.55}.modalCard #closeModal{position:absolute;right:12px;top:12px;padding:7px 11px}
#rotateHint{display:none;position:fixed;z-index:99;inset:0;background:#070910;color:#fff;align-items:center;justify-content:center;font-size:24px;font-weight:900;text-align:center;padding:20px}
@media (max-width:900px){.fighters{gap:10px}.fighterArt{font-size:58px}.fighterMeta strong{font-size:16px}.touch{transform:scale(.86);transform-origin:bottom left}.touch-right{transform-origin:bottom right}}
@media (orientation:portrait) and (max-width:900px){#rotateHint{display:flex}#app{display:none}}
@media (hover:hover) and (pointer:fine){.touch{opacity:.42}.touch:hover{opacity:1}}