html,body{color:#f2f2f2;background:#111;min-height:100%;margin:0;font-family:system-ui,sans-serif}.layout{box-sizing:border-box;justify-content:center;align-items:flex-start;gap:20px;min-height:100vh;padding:20px 16px;display:flex}.stage{width:100%;max-width:640px;position:relative}canvas{border-radius:4px;width:100%;height:auto;display:block}.join-panel{box-sizing:border-box;background:#111111f0;border:1px solid #444;border-radius:8px;flex-direction:column;gap:8px;width:min(320px,100% - 32px);padding:20px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.join-panel[hidden]{display:none}.join-panel h2{margin:0 0 4px;font-size:20px}.join-panel label,.join-panel .label{color:#bbb;font-size:13px}.join-panel input{color:inherit;background:#1d1d1d;border:1px solid #555;border-radius:4px;padding:8px;font-size:16px}.swatches{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.swatch{aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:50%;position:relative}.swatch[aria-pressed=true]{border-color:#fff;box-shadow:inset 0 0 0 2px #111}.swatch.taken{opacity:.45;filter:saturate(.4);cursor:not-allowed}.swatch.taken:before,.swatch.taken:after{content:"";background:#fff;border-radius:2px;width:80%;height:3px;margin-top:-1.5px;position:absolute;top:50%;left:10%;box-shadow:0 0 2px #000}.swatch.taken:before{transform:rotate(45deg)}.swatch.taken:after{transform:rotate(-45deg)}.join-error{color:#ff8080;min-height:1.2em;margin:0;font-size:13px}.join-panel button[type=submit]{color:#111;cursor:pointer;background:gold;border:none;border-radius:4px;padding:10px;font-size:16px;font-weight:600}.join-panel button[type=submit]:disabled{cursor:not-allowed;background:#555}.hint{color:#999;margin:4px 0 0;font-size:12px}.scoreboard{box-sizing:border-box;background:#232323;border-radius:4px;width:220px;padding:12px 16px}.scoreboard h2{margin:0 0 8px;font-size:16px}.scoreboard ol{margin:0;padding:0;list-style:none}.scoreboard li{border-radius:4px;align-items:center;gap:8px;padding:4px 6px;display:flex}.scoreboard li.self{background:#3a3a3a;font-weight:600}.scoreboard li.empty{color:#888}.scoreboard .dot{border-radius:50%;flex:none;width:12px;height:12px}.scoreboard .name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}@media (width<=900px){.layout{flex-direction:column;justify-content:flex-start;align-items:center}.scoreboard{width:100%;max-width:640px}.join-panel{top:8px;transform:translate(-50%)}}.theme-ninja{--paper:#f6ecd2;--ink:#3e2a1a;--muted:#6b5640;--wood:#3e2a1a;--wood-dark:#2a1c11;--wood-row:#5a3e28;--cream:#f3e6c4;--seal-red:#b5321f;color:var(--cream);background:#1e140c}.theme-ninja.joining:before{content:"";z-index:1;background:#1a120b73;position:fixed;inset:0}.theme-ninja .join-panel{z-index:3;background:var(--paper);max-height:calc(100vh - 32px);color:var(--ink);border:3px solid #5a3a1a;border-top:14px solid var(--seal-red);border-radius:2px;overflow-y:auto}.theme-ninja .join-panel h2{text-align:center;color:var(--ink);font-family:Georgia,Times New Roman,serif;font-weight:800}.theme-ninja .join-panel label,.theme-ninja .join-panel .label,.theme-ninja .hint{color:var(--muted)}.theme-ninja .hint{text-align:center}.theme-ninja .join-panel input{color:var(--ink);background:#fffaf0;border:1.5px solid #5a3a1a;border-radius:3px}.theme-ninja .swatch[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--paper) inset}.theme-ninja .join-error{color:var(--seal-red)}.theme-ninja .join-panel button[type=submit]{background:var(--seal-red);color:var(--paper);border:2px solid #5a1a10;border-radius:3px;font-weight:800}.theme-ninja .join-panel button[type=submit]:disabled{background:#9c8a72;border-color:#6b5640}.theme-ninja .scoreboard{background:var(--wood);color:var(--cream);border-radius:6px}.theme-ninja .scoreboard h2{letter-spacing:1px;text-transform:uppercase;font-family:Georgia,Times New Roman,serif;font-weight:800}.theme-ninja .scoreboard li.self{background:var(--wood-row)}.theme-ninja .scoreboard li.empty{color:#a8906f}.theme-picker{flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;display:flex}.scoreboard .theme-picker{border-top:1px solid #ffffff1f;margin-top:12px;padding-top:10px}.theme-select{flex:1;min-width:6em}.theme-select,.sound-toggle{color:inherit;background:#1d1d1d;border:1px solid #555;border-radius:4px;padding:4px 6px;font-size:14px}.sound-toggle{cursor:pointer;white-space:nowrap}.theme-ninja .join-panel .theme-select,.theme-ninja .join-panel .sound-toggle{color:var(--ink);background:#fffaf0;border-color:#5a3a1a}.theme-ninja .scoreboard .theme-select,.theme-ninja .scoreboard .sound-toggle{background:var(--wood-dark);color:var(--cream);border-color:#6b4a30}.theme-flat{--slate:#20242c;--card:#1b1e25;--row:#343a46;--text:#e6e8ee;--muted:#9aa3b2;--gold:#fc3;background:var(--slate);color:var(--text)}.theme-flat.joining:before{content:"";z-index:1;background:#14161c8c;position:fixed;inset:0}.theme-flat .join-panel{z-index:3;background:var(--card);border:none;border-radius:12px;max-height:calc(100vh - 32px);overflow-y:auto;box-shadow:0 8px 30px #0006}.theme-flat .join-panel h2{text-align:center;letter-spacing:1px}.theme-flat .join-panel label,.theme-flat .join-panel .label,.theme-flat .hint{color:var(--muted)}.theme-flat .hint{text-align:center}.theme-flat .join-panel input,.theme-flat .theme-select,.theme-flat .sound-toggle{background:var(--row);color:var(--text);border:none;border-radius:6px}.theme-flat .join-panel button[type=submit]{background:var(--gold);color:var(--card);border-radius:6px;font-weight:700}.theme-flat .swatch[aria-pressed=true]{border-color:var(--text);box-shadow:0 0 0 2px var(--card) inset}.theme-flat .scoreboard{background:var(--card);border-radius:12px}.theme-flat .scoreboard h2{letter-spacing:1px;text-transform:uppercase;font-size:14px}.theme-flat .scoreboard li.self{background:var(--row)}.best-runs{border-top:1px solid #ffffff1f;margin-top:14px;padding-top:10px}.best-runs h2{margin:0 0 8px;font-size:16px}.segmented{background:#00000040;border-radius:6px;gap:2px;margin-bottom:6px;padding:2px;display:flex}.segmented button{white-space:nowrap;font:inherit;color:inherit;cursor:pointer;opacity:.7;background:0 0;border:none;border-radius:4px;flex:1;padding:4px 2px;font-size:12px}.segmented button[aria-pressed=true]{opacity:1;background:#ffffff29;font-weight:700}.best-runs-rank{opacity:.8;margin:4px 0;font-size:12px}.best-runs-list{margin:0;padding:0;font-size:13px;list-style:none}.best-runs-list li{border-radius:4px;gap:8px;padding:3px 6px;display:flex}.best-runs-list li.self{background:#ffffff1f;font-weight:700}.best-runs-list li.empty{opacity:.6}.best-runs-list .lead{opacity:.75;min-width:26px}.best-runs-list .name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.theme-ninja .best-runs h2{letter-spacing:1px;text-transform:uppercase;font-family:Georgia,Times New Roman,serif;font-size:14px;font-weight:800}.theme-ninja .segmented button[aria-pressed=true]{background:var(--wood-row);color:var(--cream)}.theme-flat .best-runs h2{letter-spacing:1px;text-transform:uppercase;font-size:14px}.theme-flat .segmented{background:var(--slate)}.theme-flat .segmented button[aria-pressed=true]{background:var(--row)}.joining .scoreboard{z-index:2;position:relative}.join-panel{z-index:3}#game-window{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}@media (orientation:landscape) and (height<=560px){.layout{padding:8px 16px}.stage{max-width:min(640px,133.333dvh - 21.3333px)}}.join-panel{max-height:calc(100dvh - 16px);overflow-y:auto}