*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --bg: #050510;
  --shadow-black: #000;
  --neon-red: #ff2222;
  --neon-blue: #2244ff;
  --gold: #ffd700;
  --white: #fff;
  --font-title: 'Cinzel Decorative', serif;
  --font-game: 'Orbitron', monospace;
  --font-ui: system-ui, sans-serif;
}
html, body { touch-action: none;  width:100%; height:100%; overflow:hidden; font-family:var(--font-ui); background:var(--bg); color:var(--white); touch-action:none; }
#game-container { position:relative; width:100%; height:100%; overflow:hidden; }
#gameCanvas { position:absolute; top:0; left:0; display:block; }

/* SCREENS */
.screen { position:absolute; top:0;left:0;width:100%;height:100%; display:none; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#050510,#0d0d2e); z-index:100; padding:20px; gap:12px; }
.screen.active { display:flex; }

/* START */
.game-thumbnail {
  border-radius: 10px;
  border: 2px solid rgba(255,34,34,0.5);
  box-shadow: 0 8px 15px rgba(0,0,0,0.1);
  max-width: 300px;
  width: 90%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.game-title { font-family:var(--font-title); font-size:clamp(2rem,10vw,3.5rem); color:var(--neon-red);
  text-shadow: 1px 2px 0px rgba(0,0,0,0.1); letter-spacing:3px; }
.game-sub { color:rgba(255,255,255,0.5); font-size:0.9rem; letter-spacing:3px; text-transform:uppercase; }

.fighter-roster { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:480px; margin:8px 0; }
.roster-item { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 10px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:8px;
  min-width:50px; }
.roster-item.defeated { border-color:var(--gold); background:rgba(255,215,0,0.08); }
.roster-item.locked { opacity:0.3; }
.roster-item .ri-name { font-size:0.6rem; color: #666; }
.roster-item .ri-dot { width:8px; height:8px; border-radius:50%; background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); margin:2px auto; }
.roster-item.defeated .ri-dot { background:var(--gold); }

.high-score-row { display:flex; align-items:center; gap:8px; }
.hs-label { font-family:var(--font-game); font-size:0.7rem; color:#888; letter-spacing:2px; }
.hs-val { font-family:var(--font-game); font-size:1.5rem; color:var(--gold); font-weight:700; }

/* BUTTONS */
.btn-fight { padding:16px 48px; background:linear-gradient(135deg,#cc0000,#880000);
  border:2px solid var(--neon-red); border-radius:4px; font-family:var(--font-game);
  font-size:1rem; color: #333; cursor:pointer; letter-spacing:3px;
  box-shadow: 0 8px 15px rgba(0,0,0,0.1);
  transition:all 0.15s; }
.btn-fight:hover { transform:translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
.btn-fight:active { transform:translateY(1px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
.btn-secondary-fight { padding:10px 28px; background:transparent; border:1px solid rgba(255,255,255,0.2);
  border-radius:4px; font-family:var(--font-game); font-size:0.75rem; color:rgba(255,255,255,0.6);
  cursor:pointer; letter-spacing:2px; transition:all 0.15s; }
.btn-secondary-fight:hover { border-color:rgba(255,255,255,0.5); color: #333; }

/* VS SCREEN */
.vs-display { display:flex; align-items:center; gap:40px; margin-bottom:20px; }
.fighter-intro { display:flex; flex-direction:column; align-items:center; gap:8px; }
.fighter-preview { border:2px solid rgba(255,255,255,0.1); border-radius:6px; background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); }
.fighter-name { font-family:var(--font-game); font-size:0.75rem; letter-spacing:2px; color: #555; }
.vs-text { font-family:var(--font-title); font-size:3rem; color:var(--neon-red);
  text-shadow: 1px 2px 0px rgba(0,0,0,0.1); animation:vs-flash 0.5s infinite; }
@keyframes vs-flash { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ROUND/RESULT */
.round-text { font-family:var(--font-title); font-size:2.5rem; color:var(--gold);
  text-shadow: 1px 2px 0px rgba(0,0,0,0.1); animation:bounce-in 0.4s ease; }
@keyframes bounce-in { 0%{transform:scale(0.3)} 70%{transform:scale(1.2)} 100%{transform:scale(1)} }
.result-text { font-family:var(--font-title); font-size:3rem; }
.result-text.victory { color:var(--gold); text-shadow: 1px 2px 0px rgba(0,0,0,0.1); }
.result-text.defeat { color:var(--neon-red); text-shadow: 1px 2px 0px rgba(0,0,0,0.1); }
.result-stats { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:8px; padding:16px 32px; min-width:220px; display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.stat-line { display:flex; justify-content:space-between; font-size:0.9rem; color: #555; }
.stat-line span:last-child { color:var(--gold); font-weight:700; }

/* COMPLETE */
.complete-title { font-family:var(--font-title); font-size:clamp(2rem,8vw,3.5rem); color:var(--gold);
  text-shadow: 1px 2px 0px rgba(0,0,0,0.1); animation:spin-win 1s ease; }
@keyframes spin-win { 0%{transform:rotateY(90deg)} 100%{transform:rotateY(0)} }
.complete-sub { color: #555; font-size:1rem; margin-bottom:16px; }

/* HUD */
#hud { position:absolute; top:0;left:0;right:0; z-index:50; pointer-events:none; }
.hud-inner { display:flex; justify-content:space-between; align-items:flex-start; padding:10px 16px;
  background:linear-gradient(180deg,rgba(0,0,0,0.8),transparent); }
.fighter-hud { display:flex; flex-direction:column; gap:4px; flex:1; max-width:40%; }
.fighter-hud.right { align-items:flex-end; }
.fighter-hud-name { font-family:var(--font-game); font-size:0.7rem; color: #666; letter-spacing:2px; }
.hp-bar-wrap { width:100%; height:10px; background:#220000; border-radius:5px; overflow:hidden; border:1px solid #440000; }
.hp-bar-wrap.right-align { direction:rtl; }
.hp-bar { height:100%; background:linear-gradient(90deg,#cc0000,#ff4444); border-radius:5px; transition:width 0.2s; }
.hp-bar.enemy { background:linear-gradient(90deg,#0044cc,#4488ff); }
.energy-bar-wrap { width:100%; height:6px; background:#001122; border-radius:3px; overflow:hidden; border:1px solid #003355; }
.energy-bar { height:100%; background:linear-gradient(90deg,#0066cc,#00aaff); border-radius:3px; transition:width 0.1s; }
.round-dots { display:flex; gap:4px; }
.round-dots .rdot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.4); }
.round-dots .rdot.won { background:var(--gold); border-color:var(--gold); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
.hud-center { display:flex; flex-direction:column; align-items:center; padding:0 12px; }
.round-label { font-family:var(--font-game); font-size:0.65rem; color:#888; letter-spacing:2px; }
.fight-timer { font-family:var(--font-game); font-size:1.6rem; font-weight:700; color: #333; }
.fight-timer.warning { color:#ff4444; animation:warn 0.5s infinite; }
@keyframes warn { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* MOBILE CONTROLS */
#mobile-controls { position:absolute; bottom:0;left:0;right:0; display:flex; justify-content:space-between;
  padding:10px 16px 16px; pointer-events:none; z-index:60; }
.ctrl-left, .ctrl-right { display:flex; flex-wrap:wrap; gap:6px; max-width:180px; pointer-events:auto; }
.ctrl-btn { width:52px; height:52px; background:rgba(255,255,255,0.12); border:2px solid rgba(255,255,255,0.2);
  border-radius:50%; color: #333; font-size:1rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; user-select:none;
  -webkit-user-select:none; transition:all 0.1s; }
.ctrl-btn:active, .ctrl-btn.pressed { background:rgba(255,255,255,0.25); border-color: #333; transform:scale(0.92); }
.ctrl-btn.attack { background:rgba(200,0,0,0.25); border-color:rgba(255,50,50,0.6); }
.ctrl-btn.special { background:rgba(100,0,200,0.25); border-color:rgba(150,50,255,0.6); font-size:1.2rem; }

/* SOUND */
.sound-btn { position:fixed;bottom:16px;right:16px;z-index:200;font-size:1.2rem;
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);border:1px solid rgba(255,255,255,0.2);border-radius:50%;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer; }

.hidden { display:none!important; }
@media(max-width:480px) { .vs-display { gap:20px; } .game-title { font-size:2rem; } }