:root{
  color-scheme:dark;
  --bg:#070b16;
  --panel:#10182b;
  --panel2:#151f36;
  --text:#f4f7ff;
  --muted:#aeb8d3;
  --line:#2a3654;
  --accent:#8b7bff;
  --accent2:#4fe0c1;
  --danger:#ff5d7a;
  --gold:#ffd166;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:
  radial-gradient(circle at 20% 10%,rgba(95,72,180,.18),transparent 34rem),
  radial-gradient(circle at 90% 10%,rgba(40,180,170,.10),transparent 28rem),
  var(--bg);color:var(--text)}
body{min-height:100vh}
button{font:inherit}
button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.site-shell{width:min(1500px,100%);margin:0 auto;padding:20px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.brand{display:flex;align-items:center;gap:12px}.brand-mark{font-size:34px;color:var(--accent2);filter:drop-shadow(0 0 14px rgba(79,224,193,.45))}
.brand h1{margin:0;font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:.05em;text-transform:uppercase}.brand p{margin:2px 0 0;color:var(--muted)}
.top-actions{display:flex;gap:10px}
.screen{display:none}.screen.active{display:block}
#menuScreen{background:linear-gradient(160deg,rgba(16,24,43,.95),rgba(8,13,27,.95));border:1px solid var(--line);border-radius:24px;padding:clamp(20px,4vw,44px);box-shadow:0 30px 80px rgba(0,0,0,.28)}
.hero{text-align:center;max-width:820px;margin:0 auto 28px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--accent2);font-weight:800;font-size:.76rem;margin:0 0 8px}
.hero h2,.modal h2{font-size:clamp(2rem,5vw,4rem);line-height:1;margin:0}.hero-copy{color:var(--muted);font-size:1.05rem;line-height:1.6}
.fighter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fighter-card{position:relative;min-height:310px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,var(--fighter-bg,#1b2440),#0c1222 70%);overflow:hidden;padding:0;text-align:left;color:var(--text);cursor:pointer;transition:.2s transform,.2s border-color,.2s box-shadow}
.fighter-card:hover{transform:translateY(-4px);border-color:#5b6990}.fighter-card.selected{border-color:var(--fighter,#8b7bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--fighter,#8b7bff) 70%,transparent),0 18px 40px rgba(0,0,0,.35)}
.fighter-portrait{height:190px;display:flex;align-items:flex-end;justify-content:center;position:relative;background:
  radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--fighter,#8b7bff) 24%,transparent),transparent 44%),
  linear-gradient(transparent,rgba(0,0,0,.22))}
.fighter-silhouette{width:76px;height:150px;position:relative;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5))}
.fighter-silhouette::before{content:"";position:absolute;left:23px;top:0;width:30px;height:30px;border-radius:50%;background:var(--fighter)}
.fighter-silhouette::after{content:"";position:absolute;left:13px;top:28px;width:50px;height:84px;border-radius:18px 18px 12px 12px;background:linear-gradient(var(--fighter),color-mix(in srgb,var(--fighter) 55%,#111))}
.fighter-limb{position:absolute;background:var(--fighter);border-radius:14px;transform-origin:top center}.arm1{width:15px;height:75px;left:3px;top:38px;transform:rotate(17deg)}.arm2{width:15px;height:75px;right:3px;top:38px;transform:rotate(-17deg)}.leg1{width:17px;height:70px;left:18px;top:95px;transform:rotate(8deg)}.leg2{width:17px;height:70px;right:18px;top:95px;transform:rotate(-8deg)}
.fighter-info{padding:16px}.fighter-info h3{margin:0;font-size:1.3rem}.fighter-info p{margin:7px 0;color:var(--muted);line-height:1.4;font-size:.92rem}.fighter-tag{display:inline-block;border:1px solid color-mix(in srgb,var(--fighter) 55%,#ffffff20);border-radius:999px;padding:5px 9px;color:#fff;font-size:.75rem}
.difficulty-card{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:26px;padding:20px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025)}.difficulty-card h3{margin:0;font-size:1.5rem}
.difficulty-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:1;max-width:850px}.difficulty-btn{padding:14px;border:1px solid var(--line);border-radius:14px;background:#0c1426;color:var(--text);cursor:pointer;text-align:left}.difficulty-btn strong,.difficulty-btn span{display:block}.difficulty-btn span{color:var(--muted);font-size:.78rem;margin-top:5px;line-height:1.35}.difficulty-btn.selected{border-color:var(--accent2);box-shadow:inset 0 0 0 1px var(--accent2)}
.menu-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px}.controls-card{display:flex;flex-wrap:wrap;gap:9px 14px;color:var(--muted);font-size:.82rem}.controls-card span{display:flex;align-items:center;gap:4px}kbd{background:#080d18;border:1px solid #3b4869;border-bottom-width:3px;border-radius:6px;padding:3px 6px;color:#fff}
.primary-btn,.ghost-btn{border:0;border-radius:12px;padding:12px 17px;color:white;cursor:pointer;font-weight:800}.primary-btn{background:linear-gradient(135deg,var(--accent),#5e4bd3);box-shadow:0 10px 28px rgba(106,86,220,.3);font-size:1rem}.ghost-btn{background:#10192d;border:1px solid var(--line)}.ghost-btn.wide,.primary-btn.wide{width:100%}
#gameScreen{position:relative}
body.game-active{overflow:hidden}
body.game-active .site-shell{width:100%;max-width:none;height:100dvh;padding:8px 12px;display:block}
body.game-active .topbar,body.game-active footer{display:none}
body.game-active #gameScreen.active{display:grid;height:calc(100dvh - 16px);grid-template-rows:auto minmax(0,1fr) auto;gap:6px}
body.game-active .arena-wrap{height:100%;min-height:0;border-radius:12px}
body.game-active #gameCanvas{width:100%;height:100%;aspect-ratio:auto}
body.game-active .game-help{padding:3px 4px;min-height:22px}
.hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin-bottom:4px}.fighter-hud{min-width:0}.hud-name-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.enemy-hud .hud-name-row{text-align:right}.round-pips{display:flex;gap:5px}.round-pips i{display:block;width:14px;height:14px;border-radius:50%;border:2px solid #697594}.round-pips i.win{background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(255,209,102,.5)}
.bar{height:16px;border-radius:999px;background:#202a43;overflow:hidden;border:1px solid #35415e;margin-bottom:5px}.bar i{display:block;height:100%;width:100%;transition:width .16s linear}.health i{background:linear-gradient(90deg,#48df8b,#9ee493)}.energy{height:8px}.energy i{background:linear-gradient(90deg,#56a7ff,#9b75ff)}
.enemy-hud .bar i{margin-left:auto}.timer-block{text-align:center;min-width:92px}.timer-block span{display:block;color:var(--muted);font-size:.68rem;letter-spacing:.16em}.timer-block strong{font-size:2.2rem}
.arena-wrap{position:relative;border:1px solid #2d3a5a;border-radius:18px;overflow:hidden;background:#050815;box-shadow:0 30px 80px rgba(0,0,0,.35)}#gameCanvas{display:block;width:100%;height:auto;aspect-ratio:16/9;touch-action:none}
.announcement{position:absolute;left:50%;top:20%;transform:translate(-50%,-50%);font-size:clamp(2rem,7vw,5rem);font-weight:1000;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 8px 35px #000;pointer-events:none;opacity:0;transition:.2s}
.announcement.show{opacity:1}.overlay-panel{position:absolute;inset:0;display:grid;place-items:center;background:rgba(3,5,12,.72);backdrop-filter:blur(8px);z-index:10}.overlay-panel[hidden]{display:none}.modal{width:min(430px,calc(100% - 36px));background:linear-gradient(160deg,#17213a,#0d1426);border:1px solid #425071;border-radius:20px;padding:30px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.5)}.modal p:not(.eyebrow){color:var(--muted);line-height:1.55}.modal button{margin-top:10px}
.game-help{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem;padding:9px 4px}
.touch-controls{display:none;justify-content:space-between;gap:15px;margin-top:8px}.touch-cluster{display:flex;gap:8px;flex-wrap:wrap}.touch-controls button{min-width:56px;min-height:48px;border:1px solid #394766;border-radius:12px;background:#111a2d;color:#fff;font-weight:900}.guard-touch{min-width:80px!important}
footer{display:flex;justify-content:space-between;gap:20px;color:#75819f;font-size:.75rem;padding:18px 4px}
@media (max-width:1050px){.fighter-grid{grid-template-columns:repeat(2,1fr)}.difficulty-card{display:block}.difficulty-options{margin-top:14px;max-width:none}.menu-footer{display:block}.primary-btn#startBtn{margin-top:18px;width:100%}}
@media (max-width:700px){.site-shell{padding:10px}.topbar{align-items:flex-start}.top-actions{flex-direction:column}.fighter-grid{grid-template-columns:1fr 1fr}.fighter-card{min-height:255px}.fighter-portrait{height:145px}.fighter-silhouette{transform:scale(.78);transform-origin:bottom}.difficulty-options{grid-template-columns:1fr}.hud{gap:6px}.hud-name-row strong{font-size:.78rem}.timer-block{min-width:62px}.timer-block strong{font-size:1.55rem}.bar{height:11px}.game-help{font-size:.68rem}.touch-controls{display:flex}footer{display:block;line-height:1.6}}
@media (max-width:440px){.fighter-grid{grid-template-columns:1fr}.controls-card{display:none}.hero-copy{font-size:.95rem}.brand p{font-size:.8rem}.ghost-btn{font-size:.75rem;padding:9px 10px}}

@media (max-width:700px){
  body.game-active .site-shell{padding:5px}
  body.game-active #gameScreen.active{height:calc(100dvh - 10px);grid-template-rows:auto minmax(0,1fr) auto auto}
  body.game-active .game-help{display:none}
  body.game-active .touch-controls{margin-top:2px}
}