:root{--bg: #0b1020;--panel: #151c33;--ink: #e8ecf8;--muted: #8a93b2;--blue: #3aa0ff;--orange: #ff8a3a;--green: #46d66f;--purple: #b06bff;--accent: #ffd24a}*{box-sizing:border-box}html,body{margin:0;height:100%;background:radial-gradient(1200px 800px at 50% -10%,#1a2447,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;gap:10px;padding:12px}h1{margin:4px 0 0;font-size:24px;letter-spacing:2px;color:var(--accent);text-shadow:0 2px 8px rgba(0,0,0,.5)}.hud{display:flex;gap:18px;flex-wrap:wrap;align-items:center;background:var(--panel);border:1px solid #243056;border-radius:10px;padding:8px 16px;font-variant-numeric:tabular-nums}.hud .stat{display:flex;flex-direction:column;align-items:center;min-width:64px}.hud .label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.hud .value{font-size:20px;font-weight:700}.hud .value.orange{color:var(--orange)}canvas{background:linear-gradient(#0c1430,#0a0f24);border:2px solid #2a376a;border-radius:12px;box-shadow:0 12px 40px #00000080;touch-action:none;max-width:96vw;height:auto}.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}button{background:#28366b;color:var(--ink);border:1px solid #3a4c8f;border-radius:8px;padding:8px 14px;font-size:14px;font-weight:600;cursor:pointer}button:hover{background:#33458a}button:disabled{opacity:.45;cursor:default}select{background:#28366b;color:var(--ink);border:1px solid #3a4c8f;border-radius:8px;padding:7px 10px;font-size:14px}.hint{color:var(--muted);font-size:12px;text-align:center;max-width:760px}.banner{font-size:18px;font-weight:700;padding:6px 14px;border-radius:8px}.banner.won{color:#062;background:var(--green)}.banner.lost{color:#fff;background:#c0392b}.standing{margin:2px 0 0;min-height:18px;font-size:15px;font-weight:700;color:var(--accent);text-align:center}