:root{color-scheme:dark}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#0b1016}#battlefield{position:fixed;inset:0}#battlefield canvas{display:block}.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:#0b1016d1;color:#e6edf3;font-family:system-ui,sans-serif;overflow-y:auto}.overlay[hidden]{display:none}.overlay-panel{max-width:44rem;text-align:center}.overlay-logo{width:clamp(56px,12vw,96px);height:clamp(56px,12vw,96px);margin:0 0 1rem}.overlay-panel h1{margin:0 0 1rem;font-size:clamp(1.6rem,4vw,2.6rem)}.overlay-panel p{margin:.25rem 0;color:#b7c2cd;line-height:1.5}.overlay-choices{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:1.75rem}.overlay-choices button{padding:.7rem 1.4rem;border:1px solid #2b3947;border-radius:8px;background:#16202b;color:#e6edf3;font:inherit;font-size:1.05rem;cursor:pointer}.overlay-choices button:hover{background:#1e2b39}.overlay-choices button:focus-visible{outline:2px solid #f0e442;outline-offset:2px}.overlay-choices button:disabled{opacity:.45;cursor:not-allowed}.setup-panel{width:min(44rem,100%)}.setup-panel h2{margin:1.5rem 0 .5rem;font-size:1.1rem;color:#e6edf3}.setup-seats{margin:0;padding:0;list-style:none}.setup-seat{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-bottom:1px solid #2b3947;text-align:left}.setup-seat-name{min-width:9rem;font-weight:600}.setup-fixed{flex:1;color:#b7c2cd}.setup-radios{display:flex;flex:1;flex-wrap:wrap;gap:4px 16px;justify-content:center;margin:0;padding:0;border:0}.setup-seat .setup-radios{justify-content:flex-start}.setup-radios label{cursor:pointer;white-space:nowrap}.setup-radios label:has(input:disabled){color:#6b7885;cursor:not-allowed}.setup-radios input:focus-visible{outline:2px solid #f0e442;outline-offset:2px}.setup-note{font-size:.9em}.setup-remove,.setup-add{padding:.35rem .8rem;border:1px solid #2b3947;border-radius:6px;background:transparent;color:#b7c2cd;font:inherit;cursor:pointer}.setup-add{margin-top:.75rem}.setup-remove:hover:not(:disabled),.setup-add:hover:not(:disabled){background:#1e2b39}.setup-remove:focus-visible,.setup-add:focus-visible{outline:2px solid #f0e442;outline-offset:2px}.setup-remove:disabled,.setup-add:disabled{opacity:.4;cursor:not-allowed}.overlay-panel .setup-status{min-height:1.5em;margin-top:1rem;color:#f0e442}.lobby-link{flex:1;min-width:12rem;padding:.35rem .5rem;border:1px solid #2b3947;border-radius:6px;background:#0d1520;color:#e6edf3;font:inherit;font-size:.85em}.lobby-link:focus-visible{outline:2px solid #f0e442;outline-offset:2px}.lobby-seat .setup-add{margin-top:0}.lobby-seat .setup-seat-name{min-width:0}.lobby-status{min-width:5rem;text-align:right}.lobby-waiting{color:#b7c2cd}.lobby-joined{color:#7ee787;font-weight:600}.setup-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.settings{position:fixed;inset:0;display:grid;place-items:start center;overflow-y:auto;padding:24px;background:#0b1016eb;color:#e6edf3;font-family:system-ui,sans-serif}.settings[hidden]{display:none}.settings-panel{width:min(40rem,100%)}.settings-panel h1{margin:0 0 1.5rem;font-size:clamp(1.4rem,3vw,2rem)}.settings-panel h2{margin:1.75rem 0 .5rem;color:#b7c2cd;font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.settings-hint{margin:0 0 .75rem;color:#8b98a5;font-size:.9rem;line-height:1.5}.settings-row{display:flex;gap:12px;align-items:center;padding:.4rem 0}.settings-label{flex:1 1 auto;min-width:0}.settings-row input[type=range]{flex:0 1 16rem;accent-color:#f0e442}.settings-readout{flex:0 0 3.5rem;color:#b7c2cd;font-variant-numeric:tabular-nums;text-align:right}.settings-keys{display:flex;flex:0 0 auto;gap:8px}.settings-key{min-width:6.5rem;padding:.4rem .6rem;border:1px solid #2b3947;border-radius:6px;background:#16202b;color:#e6edf3;font:inherit;font-size:.9rem;cursor:pointer}.settings-key:hover{background:#1e2b39}.settings-key.is-listening{border-color:#f0e442;background:#2a2a16;color:#f0e442}.settings-clear{padding:.4rem .6rem;border:1px solid transparent;border-radius:6px;background:none;color:#8b98a5;font:inherit;font-size:.85rem;cursor:pointer}.settings-clear:hover:not(:disabled){color:#e6edf3}.settings-clear:disabled{opacity:.35;cursor:default}.settings-status{min-height:1.4rem;margin:.5rem 0 0;color:#f0e442;font-size:.9rem}.settings-reset{margin-top:.75rem;padding:.4rem .8rem;border:1px solid #2b3947;border-radius:6px;background:none;color:#b7c2cd;font:inherit;font-size:.85rem;cursor:pointer}.settings-reset:hover{color:#e6edf3}.settings-seats{display:flex;flex-wrap:wrap;gap:12px 24px;margin:0;padding:0;list-style:none}.settings-seats li{display:flex;gap:8px;align-items:center}.settings-swatch{font-size:1.1rem;line-height:1}.settings-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:2rem}.settings-actions button{padding:.6rem 1.4rem;border:1px solid #2b3947;border-radius:8px;background:#16202b;color:#e6edf3;font:inherit;font-size:1rem;cursor:pointer}.settings-actions button:hover{background:#1e2b39}.settings :focus-visible{outline:2px solid #f0e442;outline-offset:2px}@media(width<=34rem){.settings-row{flex-wrap:wrap}.settings-label{flex:1 0 100%}}