:root{
  --bg:#0b0e1a; --bg2:#141a33; --card:#1a2140; --accent:#ff2d55; --accent2:#00e5ff;
  --gold:#ffd166; --text:#eef1ff; --muted:#9aa3c7; --green:#3ddc84; --radius:16px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
body{margin:0; font-family:'Segoe UI',system-ui,Roboto,Arial,sans-serif; background:radial-gradient(1200px 600px at 50% -10%,#232c5e 0%,var(--bg) 55%); color:var(--text); min-height:100vh; display:flex; justify-content:center; overflow-x:hidden}
#bg-stars{position:fixed; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(2px 2px at 70% 15%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 60%,#fff,transparent),radial-gradient(2px 2px at 85% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 10% 80%,#fff,transparent);}
.screen{display:none; width:100%; max-width:1060px; padding:32px 20px 60px; text-align:center; animation:fade .3s ease}
.screen.active{display:block}
.screen.wide{max-width:1100px}
.no-pad{padding-left:8px; padding-right:8px}
@keyframes fade{from{opacity:0; transform:translateY(8px)} to{opacity:1}}
.logo{font-size:clamp(44px,9vw,92px); margin:24px 0 0; letter-spacing:2px; font-weight:900;
  background:linear-gradient(90deg,#ff2d55,#ff9f1c,#ffd166,#00e5ff); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 24px rgba(255,45,85,.35)); animation:pulse 2.4s ease-in-out infinite}
.logo span{color:transparent}
@keyframes pulse{50%{transform:scale(1.02)}}
.tagline{font-size:clamp(16px,3vw,26px); color:var(--gold); margin:6px 0 26px; font-weight:700}
h2{font-size:clamp(24px,4vw,38px); margin:14px 0 18px}
.menu-buttons{display:flex; flex-direction:column; gap:12px; max-width:420px; margin:0 auto}
.menu-buttons.row{flex-direction:row; justify-content:center; flex-wrap:wrap; max-width:none; margin-top:18px}
.btn{font-size:18px; font-weight:800; letter-spacing:.5px; padding:14px 22px; border-radius:var(--radius);
  border:2px solid transparent; background:var(--card); color:var(--text); cursor:pointer; transition:.15s}
.btn:hover{transform:translateY(-2px); border-color:var(--accent2); box-shadow:0 8px 30px rgba(0,229,255,.25)}
.btn.primary{background:linear-gradient(135deg,#ff2d55,#ff6b35); box-shadow:0 8px 30px rgba(255,45,85,.4)}
.btn.ghost{background:transparent; border-color:#2c3766; color:var(--muted)}
.btn.small{font-size:14px; padding:8px 14px}
.hint{color:var(--muted); font-size:14px; margin-top:18px}
.foot{color:#59628f; font-size:12px}
.hidden{display:none!important}
.join-row{display:flex; gap:8px; max-width:420px; margin:14px auto 0}
.join-row input{flex:1; padding:12px; border-radius:12px; border:2px solid #2c3766; background:#0e1330; color:#fff; font-size:16px; text-transform:uppercase; text-align:center}
/* personajes */
.char-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:10px 0 20px}
.char-card{background:linear-gradient(180deg,#1c2447,#12172e); border:2px solid #2c3766; border-radius:var(--radius); padding:16px; transition:.15s}
.char-card:hover{border-color:var(--accent2); transform:translateY(-3px)}
.char-card.selected{border-color:var(--green); box-shadow:0 0 0 2px var(--green), 0 10px 30px rgba(61,220,132,.25)}
.char-card h3{margin:0 0 4px; font-size:20px}
.char-emoji{font-size:56px; line-height:1; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.char-card .special{color:var(--gold); font-size:13px; min-height:34px}
.stat{display:flex; align-items:center; gap:8px; font-size:13px; margin:5px 0}
.stat .sbar{flex:1; height:9px; background:#0c1128; border-radius:6px; overflow:hidden}
.stat .sbar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent2),var(--accent)); border-radius:6px; transition:width .4s}
.desc{font-size:12.5px; color:var(--muted); min-height:36px}
/* sala */
.room-code{font-size:22px; background:#0e1330; border:2px dashed var(--accent2); display:inline-block; padding:10px 18px; border-radius:12px; margin-bottom:10px}
.room-code span{color:var(--gold); font-weight:900; letter-spacing:3px}
/* arenas */
.arena-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:8px}
.arena-btn{border:3px solid #2c3766; border-radius:14px; padding:10px 18px; font-size:16px; font-weight:800; cursor:pointer; color:#fff}
.arena-btn.ciudad{background:linear-gradient(180deg,#1b1040,#ff2d55 160%)}
.arena-btn.playa{background:linear-gradient(180deg,#0a4d6e,#ffd166 170%)}
.arena-btn.futurista{background:linear-gradient(180deg,#041a2e,#00e5ff 170%)}
.arena-btn.selected{border-color:var(--green)}
/* combate */
#hud{display:flex; gap:10px; align-items:stretch; margin:6px 0 10px}
.hud-side{flex:1; text-align:left}
.hud-side.right{text-align:right}
.hud-name{font-weight:900; font-size:15px; margin-bottom:4px}
.bar{position:relative; height:22px; background:#0c1128; border-radius:11px; overflow:hidden; border:1px solid #2c3766; margin-bottom:6px}
.bar.hp{height:26px}
.bar div{height:100%; width:100%; border-radius:11px; transition:width .18s ease}
.bar.hp div{background:linear-gradient(90deg,#3ddc84,#ffe14d 60%,#ff2d55 100%); background-size:200% 100%}
.bar.en div{background:linear-gradient(90deg,#00e5ff,#7b61ff)}
.bar span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; text-shadow:0 1px 3px #000}
#timer{font-size:30px; font-weight:900; background:#0e1330; border:2px solid #2c3766; border-radius:12px; padding:2px 16px; align-self:center; min-width:110px}
#arena{position:relative; border-radius:18px; overflow:hidden; border:2px solid #2c3766; box-shadow:0 20px 60px rgba(0,0,0,.5)}
#arena canvas{width:100%; height:auto; display:block}
#arena.ciudad{background:linear-gradient(180deg,#0d0b2a 0%,#3b1d5e 45%,#ff2d55 78%,#1a0f2e 79%,#0b0e1a 100%)}
#arena.playa{background:linear-gradient(180deg,#7ed6ff 0%,#ffe29a 55%,#f4a259 70%,#2e86ab 71%,#0b3d5c 100%)}
#arena.futurista{background:linear-gradient(180deg,#020d1f 0%,#0a3d62 50%,#00e5ff 75%,#071a33 76%,#04070f 100%)}
#countdown{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:clamp(60px,12vw,120px); font-weight:900; text-shadow:0 6px 30px #000; pointer-events:none}
#fx-layer{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.fx{position:absolute; font-size:38px; animation:boom .5s ease forwards}
@keyframes boom{0%{transform:scale(.4); opacity:1}100%{transform:scale(1.6) translateY(-20px); opacity:0}}
.dmg-num{position:absolute; font-weight:900; font-size:22px; color:#ffd166; text-shadow:0 2px 4px #000; animation:boom .7s ease forwards}
/* táctil */
#touch{display:none; justify-content:space-between; gap:10px; margin-top:12px}
#touch button{font-size:22px; padding:14px 18px; border-radius:14px; border:2px solid #2c3766; background:#1a2140; color:#fff; touch-action:none; user-select:none; -webkit-user-select:none}
#touch button:active{background:var(--accent); transform:scale(0.92)}
#touch .t-left{display:flex; gap:8px}
#touch .t-right{display:flex; gap:8px}
@media (pointer:coarse){#touch{display:flex} #controls-hint{display:none}}
/* gamepad indicator */
.gamepad-indicator{position:fixed; bottom:8px; left:8px; background:rgba(0,229,255,.2); border:1px solid rgba(0,229,255,.4); border-radius:8px; padding:4px 10px; font-size:12px; color:var(--accent2); display:none; z-index:100}
.gamepad-indicator.connected{display:block}
/* ranking / config */
#ranking-table{margin:0 auto 16px; border-collapse:collapse; min-width:min(92vw,560px)}
#ranking-table th,#ranking-table td{border:1px solid #2c3766; padding:8px 12px}
#ranking-table th{background:#1a2140}
.cfg{display:block; margin:12px auto; font-size:17px; max-width:480px; background:var(--card); padding:12px; border-radius:12px}
.bindings{display:grid; gap:8px; max-width:480px; margin:0 auto 10px}
.bind-row{display:flex; gap:8px; align-items:center; justify-content:center}
.bind-row button{min-width:130px}
#result-title.win{color:var(--gold); font-size:clamp(34px,7vw,64px)}
#result-title.lose{color:var(--accent)}
#result-sub{font-size:20px}