:root{--bg:#0b0b10;--fg:#eaeaf0;--muted:#9aa0a6;--accent:#5eead4}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1500px 700px at 80% -10%,#1b1f2a,transparent),var(--bg);color:var(--fg);font:500 16px/1.4 system-ui,Segoe UI,Roboto,Arial,sans-serif;display:grid;grid-template-rows:auto 1fr auto}
header{padding:16px 20px;border-bottom:1px solid #1e2230;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
header h1{font-size:18px;margin:0;letter-spacing:.3px}
.panel{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
label{opacity:.85}
input[type=number]{width:84px;padding:8px 10px;border-radius:10px;border:1px solid #2a2f40;background:#0e111a;color:var(--fg)}
input[type=range]{width:160px}
button{padding:10px 14px;border-radius:12px;border:1px solid #2a2f40;background:#111626;color:var(--fg);cursor:pointer;transition:.15s}
button:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.28)}
button.primary{background:#13222b;border-color:#1d3b46}
button.danger{background:#24161c;border-color:#3b202b}
main{display:grid;place-items:center;padding:14px}
#stageWrap{position:relative;isolation:isolate}
#hud{position:absolute;inset:10px auto auto 10px;z-index:10;font-size:12px;color:var(--muted);background:rgba(0,0,0,.3);padding:6px 8px;border-radius:8px;border:1px solid #2a2f40;backdrop-filter:blur(4px)}
#winner{position:absolute;inset:0;display:none;place-items:center;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);font-weight:700;font-size:28px}
footer{padding:10px 16px;border-top:1px solid #1e2230;color:var(--muted)}