:root{--bg: #0b0712;--panel: #1a1226;--ink: #ffd23f;--accent: #e83b3b}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:#f4f4f4;font-family:"Press Start 2P",Courier New,monospace;-webkit-font-smoothing:none}#app{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;min-height:100%}h1{font-size:28px;letter-spacing:2px;margin:4px 0;color:var(--ink);text-shadow:3px 3px 0 var(--accent)}h1 span{color:var(--accent);text-shadow:3px 3px 0 #2a1a0a}.hud{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;font-size:12px;letter-spacing:1px;background:var(--panel);padding:10px 18px;border-radius:6px;border:2px solid #33224a}.hud b{color:var(--ink)}.perkbar{font-size:10px;letter-spacing:1px;color:#9bd0a0;text-align:center;max-width:96vw;min-height:14px}.stagewrap{position:relative;display:inline-block}canvas{background:#0b0712;border:3px solid #33224a;border-radius:4px;image-rendering:pixelated;max-width:96vw;touch-action:none}.draft{position:absolute;inset:0;background:#0b0712eb;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:12px}.draft[hidden]{display:none}.draft h2{font-size:13px;color:var(--ink);margin:0;text-align:center;letter-spacing:1px}.draft .cards{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.draft .card{font-family:inherit;cursor:pointer;background:var(--panel);color:#f4f4f4;border:2px solid #4a7a4f;border-radius:6px;padding:14px 12px;width:150px;min-height:110px;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;text-align:center}.draft .card:hover{border-color:var(--ink);filter:brightness(1.12)}.draft .card strong{font-size:11px;color:var(--ink);letter-spacing:1px}.draft .card span{font-size:9px;color:#c9bce0;line-height:1.5}.draft .skip{font-family:inherit;font-size:10px;cursor:pointer;background:transparent;color:#9a8ab8;border:1px solid #33224a;border-radius:4px;padding:8px 14px}.draft .skip:hover{color:#f4f4f4}.controls{font-size:11px;color:#9a8ab8;text-align:center;line-height:1.6}.btn{font-family:inherit;font-size:13px;cursor:pointer;background:var(--accent);color:#fff;border:none;padding:10px 20px;border-radius:4px;letter-spacing:1px}.btn:hover{filter:brightness(1.15)}.pads{display:none;gap:8px}@media(pointer:coarse){.pads{display:flex;flex-wrap:wrap;justify-content:center;max-width:96vw}}.pad{font-family:inherit;font-size:18px;width:64px;height:56px;background:var(--panel);color:var(--ink);border:2px solid #33224a;border-radius:6px;user-select:none}.standing{min-height:1.2em;margin:8px 0;font-size:15px;font-weight:700;color:#ffd23f;text-align:center}