:root{--track: #c0512e;--lane: #d6633e;--grass: #2f7a44;--sky: #1b2433;--ink: #f4f1e8;--accent: #ffd24d;--good: #5bd667;--bad: #ff5d5d}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--sky);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;min-height:100%;padding:12px;gap:10px}header h1{margin:0;font-size:26px;letter-spacing:2px;color:var(--accent);text-transform:uppercase}header .sub{text-align:center;font-size:13px;opacity:.8}.hud{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:14px}.hud b{color:var(--accent)}canvas{background:var(--grass);border:3px solid #0008;border-radius:6px;image-rendering:pixelated;max-width:100%;touch-action:none}.controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}button{background:var(--accent);color:#1b2433;border:none;border-radius:6px;padding:10px 16px;font-size:15px;font-weight:700;cursor:pointer}button.ghost{background:#3a475c;color:var(--ink)}button:active{transform:translateY(1px)}.pad{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.pad button{min-width:90px;padding:16px 18px;font-size:16px}.help{max-width:560px;font-size:13px;line-height:1.5;opacity:.85}.help h3{margin:6px 0 2px;color:var(--accent);font-size:14px}select{background:#3a475c;color:var(--ink);border:none;border-radius:6px;padding:8px;font-size:14px}.msg{font-size:16px;text-align:center;min-height:22px}.msg.good{color:var(--good)}.msg.bad{color:var(--bad)}