:root{--bg: #0e1116;--panel: #1a212b;--panel2: #232c38;--ink: #e7eef7;--muted: #8b9bb0;--accent: #6cc24a;--accent2: #4aa3ff;--danger: #ff5d5d;--gold: #ffcf4a;--line: #2c3744}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}#app{max-width:1000px;margin:0 auto;padding:14px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}.title{font-size:22px;font-weight:800;letter-spacing:.5px}.title small{color:var(--muted);font-weight:500;font-size:13px;margin-left:8px}.hud{display:flex;gap:16px;flex-wrap:wrap;font-variant-numeric:tabular-nums}.hud .stat{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:14px}.hud .stat b{color:var(--accent)}.hud .stat.warn b{color:var(--gold)}.stage{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px;overflow:auto}canvas{display:block;image-rendering:pixelated;background:#0a0d12;border-radius:6px;width:100%;height:auto;cursor:crosshair;touch-action:none}.toolbar{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.skill{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:78px;text-align:center;cursor:pointer;user-select:none;transition:transform .05s ease,border-color .1s ease}.skill:hover{border-color:var(--accent2)}.skill.sel{border-color:var(--accent);background:#28361f;box-shadow:0 0 0 1px var(--accent) inset}.skill.empty{opacity:.4;cursor:not-allowed}.skill .name{font-weight:700;font-size:13px}.skill .count{font-size:18px;font-weight:800;color:var(--accent)}.skill.empty .count{color:var(--muted)}.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}button.btn{background:var(--accent2);color:#04121f;border:none;border-radius:8px;padding:8px 14px;font-weight:700;cursor:pointer;font-size:14px}button.btn.ghost{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}button.btn:hover{filter:brightness(1.08)}.controls .speed{display:flex;gap:4px;align-items:center;color:var(--muted);font-size:13px}.controls .speed button{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px 9px;cursor:pointer}.controls .speed button.on{border-color:var(--accent);color:var(--accent)}.banner{margin-top:10px;padding:12px 14px;border-radius:8px;font-weight:700;display:none}.banner.show{display:block}.banner.win{background:#1d3318;border:1px solid var(--accent);color:var(--accent)}.banner.lose{background:#3a1a1a;border:1px solid var(--danger);color:var(--danger)}.hint{color:var(--muted);font-size:12px;margin-top:8px;line-height:1.5}