:root{ --bg:#0a0a0a; --fg:#e5e7eb; --accent:#34d399; --muted:#9ca3af; --panel:#0b0f15; --border:#1f2937; }
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; background:var(--bg); color:var(--fg); font-family: system-ui, Inter, Roboto, Arial, sans-serif; overflow:hidden; }
#stage{ position:fixed; inset:0; }
#ui{ position:fixed; inset:0; pointer-events:none; }
.hud{ position:fixed; left:12px; top:12px; display:flex; gap:10px; font-size:14px; background:rgba(0,0,0,.35); padding:8px 10px; border:1px solid #27272a; border-radius:12px; }
.badge{ padding:2px 8px; border-radius:9999px; background:#111827; border:1px solid #374151; color:#e5e7eb; }
.badge .v{ color:var(--accent); font-weight:800; }
.topright{ position:fixed; right:12px; top:12px; display:flex; gap:8px; pointer-events:auto; }
.small{ padding:8px 10px; border-radius:12px; font-weight:800; }
.field{ background:#0a0f14; border:1px solid #1f2937; color:#e5e7eb; border-radius:12px; padding:10px 12px; min-width:140px; }
.playbtn{ background:var(--accent); color:#0a0a0a; border:none; font-weight:900; padding:14px 18px; border-radius:14px; cursor:pointer; }
.secondary{ background:#111827; color:#e5e7eb; border:1px solid #374151; }

.hero{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:auto; }
.card{ width:min(920px,94vw); background:linear-gradient(180deg, rgba(18,25,35,.86), rgba(8,10,14,.78)); border:1px solid #1f2937; backdrop-filter: blur(10px); border-radius:22px; padding:26px; box-shadow: 0 40px 120px rgba(0,0,0,.55); }
.title{ font-size:28px; font-weight:900; color:var(--accent); margin:0 0 6px 0; }
.sub{ color:#9ca3af; margin:0 0 12px; }

#charSelect{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); align-items:center; justify-content:center; pointer-events:auto; }
.selbox{ width:min(920px,94vw); background:#0b0f15; border:1px solid #1f2937; border-radius:20px; padding:18px; }
.grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.option{ border:1px solid #1f2937; border-radius:14px; background:#0a0f14; padding:10px; cursor:pointer; text-align:center; }
.option:hover{ border-color:#34d399; }
.option canvas{ width:100%; height:auto; display:block; }

.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); pointer-events:auto; }
.modal .box{ width:min(720px,92vw); background:radial-gradient(1200px 500px at 50% -20%, rgba(52,211,153,.25), rgba(0,0,0,0)), #0b0f15; border:1px solid #1f2937; border-radius:20px; padding:18px; text-align:center; animation:pop .25s ease-out; }
.modal h2{ margin:8px 0; font-size:28px; }
.grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.reward{ background:#0a0f14; border:1px solid #1f2937; border-radius:12px; padding:10px; }
@keyframes pop{ from{ transform:scale(.96); opacity:.01 } to{ transform:scale(1); opacity:1 } }

.killfeed{ position:fixed; left:12px; bottom:12px; display:flex; gap:8px; background:rgba(0,0,0,.35); border:1px solid #27272a; padding:8px 10px; border-radius:12px; font-size:12px; pointer-events:none;}
.score{ position:fixed; right:12px; bottom:12px; background:rgba(0,0,0,.35); border:1px solid #27272a; padding:8px 10px; border-radius:12px; font-size:12px; pointer-events:none; }
.toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:16px; background:rgba(17,24,39,.9); border:1px solid #374151; color:#e5e7eb; padding:10px 14px; border-radius:12px; font-size:14px; display:none; }

.mini{ position:fixed; right:12px; top:12px; width:140px; height:140px; border:1px solid #27272a; border-radius:12px; background:rgba(0,0,0,.35); }

.touchHud{ position:fixed; inset:0; pointer-events:none; }
.joy{ position:absolute; left:18px; bottom:22px; width:120px; height:120px; border-radius:9999px; background:rgba(255,255,255,.02); border:1px solid #1f2937; pointer-events:auto; touch-action:none; }
.joy .knob{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:9999px; background:rgba(52,211,153,.35); border:1px solid #34d399; }
.fire{ position:absolute; right:20px; bottom:34px; width:86px; height:86px; border-radius:9999px; background:rgba(244,63,94,.3); border:1px solid #ef4444; pointer-events:auto; touch-action:none; }
.pick{ position:absolute; right:120px; bottom:120px; padding:10px 12px; border-radius:12px; background:#111827; color:#e5e7eb; border:1px solid #374151; pointer-events:auto; }