/* NÉON CLASH — visual shell. Gameplay is drawn on <canvas>; menus are DOM. */
:root{
  --bg:#070912;
  --neon:#00e5ff;
  --neon2:#ff2bd6;
  --neon3:#ffe600;
  --p1:#ff5a1f;
  --p2:#3aa0ff;
  --ink:#e8f0ff;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden;
  font-family:"Trebuchet MS","Arial Narrow",Arial,system-ui,sans-serif;
  color:var(--ink);-webkit-user-select:none;user-select:none;touch-action:none}

#game-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%, #131a36 0%, #070912 60%, #02030a 100%)}

/* Canvas scaled to fit while keeping 16:9; pixelated off for smooth neon glow */
#game{display:block;width:100%;height:100%;max-width:100vw;max-height:100vh;
  aspect-ratio:16/9;object-fit:contain;background:#05060f;
  box-shadow:0 0 60px rgba(0,229,255,.15), inset 0 0 120px rgba(0,0,0,.6)}

/* ---- Overlay / menus ---- */
#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:5vh 4vw;pointer-events:auto;
  text-align:center;animation:fade .25s ease}
.screen[hidden]{display:none}
.overlay-dim{background:rgba(4,6,14,.78);backdrop-filter:blur(2px)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.logo{font-size:clamp(48px,9vw,120px);font-weight:900;letter-spacing:.04em;line-height:.9;
  color:#fff;text-shadow:0 0 18px var(--neon),0 0 40px var(--neon),0 0 80px var(--neon)}
.logo span{display:block;color:var(--neon2);
  text-shadow:0 0 18px var(--neon2),0 0 40px var(--neon2),0 0 80px var(--neon2)}
.tagline{letter-spacing:.5em;text-transform:uppercase;font-size:clamp(11px,1.6vw,16px);
  opacity:.8;color:var(--neon3)}
h2{font-size:clamp(26px,4.5vw,54px);font-weight:900;text-transform:uppercase;letter-spacing:.05em;
  text-shadow:0 0 20px var(--neon),0 0 50px rgba(0,229,255,.4)}
h3{color:var(--neon3);text-transform:uppercase;letter-spacing:.12em;font-size:clamp(14px,2vw,20px);margin-bottom:6px}
h4{opacity:.8;font-weight:600;margin:8px 0 4px;font-size:13px}
.hint{opacity:.6;font-size:clamp(11px,1.5vw,14px);max-width:680px}
.pulse{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}

.menu-list{display:flex;flex-direction:column;gap:12px;width:min(420px,80vw)}
.menu-btn{font:inherit;cursor:pointer;border:2px solid var(--neon);background:rgba(0,229,255,.06);
  color:#fff;padding:14px 22px;font-size:clamp(16px,2.4vw,22px);font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;border-radius:10px;transition:.12s;
  text-shadow:0 0 12px rgba(0,229,255,.6)}
.menu-btn:hover,.menu-btn.focused{background:var(--neon);color:#04121a;
  box-shadow:0 0 24px var(--neon),0 0 60px rgba(0,229,255,.5);transform:translateY(-1px)}
.menu-btn.ghost{border-color:rgba(232,240,255,.3);color:rgba(232,240,255,.7);background:none;text-shadow:none}
.menu-btn.ghost:hover{border-color:var(--neon2);color:#fff;box-shadow:0 0 18px var(--neon2)}

/* ---- Character select ---- */
.select-grid{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.char-card{width:130px;height:170px;border:2px solid rgba(255,255,255,.18);border-radius:12px;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:10px;position:relative;overflow:hidden;transition:.12s;background:rgba(255,255,255,.03)}
.char-card .cc-name{font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:15px;z-index:2}
.char-card .cc-art{position:absolute;inset:0;opacity:.9}
.char-card:hover,.char-card.focused{transform:translateY(-4px) scale(1.03)}
.char-card.p1{border-color:var(--p1);box-shadow:0 0 22px var(--p1)}
.char-card.p2{border-color:var(--p2);box-shadow:0 0 22px var(--p2)}
.char-card.both{border-image:linear-gradient(120deg,var(--p1),var(--p2)) 1}
.select-info{display:flex;gap:20px;align-items:center;min-height:90px}
.select-portrait{width:80px;height:80px;border-radius:50%;border:2px solid var(--neon);
  box-shadow:0 0 20px var(--neon)}
.select-stats{text-align:left;font-size:14px;line-height:1.5;min-width:220px}
.statbar{display:inline-block;height:8px;border-radius:4px;background:var(--neon);
  box-shadow:0 0 8px var(--neon);vertical-align:middle;margin-left:6px}
.select-prompts{display:flex;gap:30px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#select-p1{color:var(--p1)} #select-p2{color:var(--p2)}

/* ---- Options ---- */
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:min(460px,84vw);font-size:16px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
input[type=range]{width:200px;accent-color:var(--neon)}
input[type=checkbox]{width:22px;height:22px;accent-color:var(--neon)}
select{font:inherit;background:#0c1226;color:#fff;border:1px solid var(--neon);border-radius:6px;padding:6px 10px}

/* ---- How to play ---- */
.howto-cols{display:flex;gap:50px;flex-wrap:wrap;justify-content:center;text-align:left}
.keys{list-style:none;line-height:1.9;font-size:15px}
.keys b{display:inline-block;min-width:64px;color:var(--neon3);text-shadow:0 0 10px rgba(255,230,0,.5)}

/* ---- Online ---- */
.online-cols{display:flex;gap:40px;flex-wrap:wrap;justify-content:center;text-align:left;max-width:900px}
.online-cols>div{flex:1;min-width:280px}
textarea{width:100%;height:74px;background:#0a0f22;color:var(--neon);border:1px solid rgba(0,229,255,.4);
  border-radius:8px;padding:8px;font-family:monospace;font-size:11px;resize:none;margin:6px 0}
.net-status{font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--neon3)}
.net-status.ok{color:#39ff88} .net-status.err{color:#ff4d6d}

/* ---- Touch controls ---- */
#touch-controls{position:absolute;inset:0;pointer-events:none;z-index:5}
#touch-controls[hidden]{display:none}
.pad-left,.pad-right{position:absolute;bottom:4vh;display:flex;gap:10px;pointer-events:auto}
.pad-left{left:3vw;align-items:flex-end}
.pad-right{right:3vw;align-items:flex-end;flex-wrap:wrap;width:230px;justify-content:flex-end}
.tbtn{pointer-events:auto;width:62px;height:62px;border-radius:50%;border:2px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.08);color:#fff;font-size:20px;font-weight:800;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.tbtn:active{background:var(--neon);color:#000}
.tbtn.tjump{align-self:flex-start}
.tbtn.atk{border-color:var(--p1);color:#ffd}
.tbtn.atk.sp{border-color:var(--neon2);box-shadow:0 0 14px var(--neon2)}
.tbtn.tpause{position:absolute;top:2vh;right:3vw;width:46px;height:46px;font-size:22px}

#rotate-hint{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:#04060f;font-size:20px;z-index:50;text-align:center;padding:20px}

/* Portrait phones: ask for landscape, show touch pads when in-fight (toggled by JS body class) */
@media (max-width:920px) and (orientation:portrait){
  body.in-fight #rotate-hint{display:flex}
}