:root{--bg: #0a0a14;--panel: #141426;--ink: #e8e8f0;--accent: #22d3ee;--dim: #6a6a88}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}#app{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:12px;padding:12px}.title{font-size:28px;font-weight:800;letter-spacing:4px;color:var(--accent);text-shadow:0 0 12px rgba(34,211,238,.4)}.hud{display:flex;gap:18px;font-variant-numeric:tabular-nums;font-size:15px}.hud b{color:var(--accent)}.stage{position:relative;border:2px solid #2a2a44;border-radius:6px;box-shadow:0 0 40px #22d3ee26;background:#05050d}canvas{display:block;border-radius:4px}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#05050dd1;text-align:center;border-radius:4px}.overlay.hidden{display:none}.overlay h2{margin:0;font-size:24px;letter-spacing:2px}.overlay p{margin:0;color:var(--dim);max-width:320px;line-height:1.5}button.play{font:inherit;font-weight:700;letter-spacing:1px;padding:10px 22px;border-radius:8px;border:1px solid var(--accent);background:linear-gradient(180deg,#1a3a44,#0e2630);color:var(--ink);cursor:pointer}button.play:hover{background:#1f4956}.legend{display:grid;grid-template-columns:repeat(2,auto);gap:4px 16px;font-size:12px;color:var(--dim)}.legend b{color:var(--accent)}.hint{font-size:12px;color:var(--dim)}