:root{--ground:#f2f4f7;--panel:#fff;--ink:#161a21;--muted:#626c7e;--rule:#dbe0e9;--board-face:#e7eaf0;--board-line:#c3cad6;--board-edge:#98a2b3;--start-mark:#7d8798;--blue:#2f7fd4;--yellow:#e0a91b;--red:#dd4a3b;--green:#26a05d;--sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ground:#0f1218;--panel:#161b23;--ink:#e6eaf1;--muted:#8c96a8;--rule:#242c39;--board-face:#1c222c;--board-line:#2e3745;--board-edge:#47526333;--start-mark:#6d798c;--blue:#4b95e4;--yellow:#efb32a;--red:#ef5f50;--green:#34b96d}}*{box-sizing:border-box}body{background:var(--ground);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app{flex-direction:column;height:100vh;display:flex;overflow:hidden}.state{text-align:center;min-height:100vh;color:var(--muted);place-content:center;gap:.5rem;padding:2rem;display:grid}.state-error h1{color:var(--ink);font-size:1.2rem}.state-error p{max-width:55ch;font-family:var(--mono);font-size:.82rem;line-height:1.6}.topbar{border-bottom:1px solid var(--rule);background:var(--panel);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;padding:1rem clamp(1rem,3vw,1.75rem);display:flex}.title h1{letter-spacing:-.01em;margin:0;font-size:1.05rem;font-weight:600}.title p{font-family:var(--mono);color:var(--muted);margin:.15rem 0 0;font-size:.72rem}.controls{align-items:center;gap:1.25rem;display:flex}.colors{gap:.4rem;display:flex}.swatch{cursor:pointer;opacity:.45;border:2px solid #0000;border-radius:5px;width:1.6rem;height:1.6rem;padding:0;transition:opacity .12s,transform .12s}.swatch:hover{opacity:.8}.swatch.is-active{opacity:1;border-color:var(--ink)}.swatch:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.swatch-blue{background:var(--blue)}.swatch-yellow{background:var(--yellow)}.swatch-red{background:var(--red)}.swatch-green{background:var(--green)}.actions{gap:.4rem;display:flex}.actions button{font:inherit;color:var(--ink);background:var(--ground);border:1px solid var(--rule);cursor:pointer;border-radius:6px;align-items:center;gap:.4rem;padding:.32rem .65rem;font-size:.8rem;display:inline-flex}.actions button:hover:not(:disabled){border-color:var(--muted)}.actions button:disabled{opacity:.4;cursor:default}.actions kbd{font-family:var(--mono);color:var(--muted);border:1px solid var(--rule);border-radius:3px;padding:0 .25rem;font-size:.68rem}.board-pane.is-holding .board-hit path{cursor:crosshair}.toggle{color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.4rem;font-size:.82rem;display:flex}.layout{background:var(--rule);flex:1;grid-template-columns:minmax(0,1fr);gap:1px;min-height:0;display:grid}@media (width>=900px){.layout{grid-template-columns:minmax(0,1fr) 320px}}.board-pane{background:var(--ground);place-items:center;min-height:0;padding:clamp(.75rem,2.5vw,2rem);display:grid}.board{width:100%;height:100%;max-height:100%;display:block}.board-surface{fill:var(--board-face);stroke:var(--board-edge);stroke-width:2px;stroke-linejoin:round;vector-effect:non-scaling-stroke}.board-grid{fill:none;stroke:var(--board-line);stroke-width:.7px;stroke-linejoin:round;vector-effect:non-scaling-stroke}.board-start{fill:var(--start-mark);fill-opacity:.5;stroke:var(--start-mark);stroke-width:.04px;stroke-linejoin:round}.board-highlight{fill:var(--board-edge);fill-opacity:.5}.board-hit path{fill:#0000;stroke:none;cursor:pointer}.piece-blue{--piece-fill:var(--blue)}.piece-yellow{--piece-fill:var(--yellow)}.piece-red{--piece-fill:var(--red)}.piece-green{--piece-fill:var(--green)}.piece-body{fill:var(--piece-fill);stroke:color-mix(in srgb, var(--piece-fill) 55%, white);stroke-width:1px;stroke-linejoin:round;vector-effect:non-scaling-stroke}.piece-edge{fill:none;stroke:color-mix(in srgb, var(--piece-fill) 62%, black);stroke-width:1.75px;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.piece.is-ghost{opacity:.5}.tray-pane{background:var(--panel);min-height:0;padding:1.1rem clamp(.9rem,2vw,1.25rem) 2rem;overflow-y:auto}.tray-head{justify-content:space-between;align-items:baseline;gap:.75rem;margin-bottom:.9rem;display:flex}.hint{font-family:var(--mono);color:var(--muted);text-align:right;margin:0;font-size:.68rem}.tray-pane h2{letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0;font-size:.7rem;font-weight:600}.tray{flex-direction:column;gap:1.1rem;display:flex}.tray-row h3{font-family:var(--mono);color:var(--muted);margin:0 0 .45rem;font-size:.68rem;font-weight:500}.tray-row h3 span{opacity:.7}.tray-pieces{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:.4rem;display:grid}.tray-piece{color:inherit;aspect-ratio:1;background:var(--ground);border:1px solid var(--rule);cursor:pointer;border-radius:6px;place-items:center;padding:4px;transition:border-color .12s,background .12s,transform .12s;display:grid}.tray-piece:hover:not(:disabled){border-color:var(--muted);transform:translateY(-1px)}.tray-piece:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.tray-piece.is-held{border-color:var(--ink);background:color-mix(in srgb, var(--ground) 70%, var(--ink))}.tray-piece.is-used{cursor:default;opacity:.22}.tray-piece svg{width:100%;height:100%;display:block}.scoreboard{flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.scoreboard>li{display:flex}.player{--dot:var(--muted);font:inherit;color:inherit;text-align:left;cursor:pointer;border:1px solid var(--rule);background:var(--ground);border-radius:7px;grid-template-rows:auto auto;grid-template-columns:auto auto;align-items:center;gap:0 .45rem;min-width:6.6rem;padding:.3rem .65rem .35rem;transition:border-color .12s;display:grid}.player:hover{border-color:var(--muted)}.player:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.player.is-viewing{box-shadow:inset 0 0 0 1px var(--dot)}.player-blue{--dot:var(--blue)}.player-yellow{--dot:var(--yellow)}.player-red{--dot:var(--red)}.player-green{--dot:var(--green)}.player-dot{background:var(--dot);border-radius:2px;grid-row:1/span 2;width:.72rem;height:.72rem}.player-name{text-transform:capitalize;font-size:.82rem;font-weight:600;line-height:1.2}.player-score{font-family:var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;grid-column:2;font-size:.72rem}.player-note{display:none}.player.is-current{border-color:var(--dot);background:color-mix(in srgb, var(--dot) 12%, var(--ground))}.player.is-current .player-score{color:var(--ink)}.player.is-out{opacity:.45}.player.is-out .player-note,.player.is-viewing .player-note,.player.is-current .player-note{color:var(--muted);grid-column:2;font-size:.66rem;display:block}.player.is-winner{border-color:var(--dot);box-shadow:0 0 0 1px var(--dot);opacity:1}.banner{background:color-mix(in srgb, var(--red) 16%, var(--panel));border-bottom:1px solid var(--rule);justify-content:space-between;align-items:center;gap:1rem;padding:.55rem clamp(1rem,3vw,1.75rem);font-size:.86rem;display:flex}.banner button{font:inherit;color:inherit;border:1px solid var(--rule);background:var(--ground);border-radius:6px;padding:.2rem .6rem;font-size:.82rem}.banner button[aria-label=Dismiss]{color:inherit;cursor:pointer;background:0 0;border:0;padding:0 .3rem;font-size:1.1rem;line-height:1}.board.ghost-illegal .piece.is-ghost .piece-body,.board.ghost-illegal .piece:last-of-type .piece-body{fill:none;stroke:var(--muted);stroke-dasharray:3 3}.board.ghost-illegal .piece:last-of-type .piece-edge{stroke:var(--muted);stroke-dasharray:3 3}.board-pane{position:relative}.verdict{inset-inline:0;text-align:center;background:color-mix(in srgb, var(--panel) 92%, transparent);border:1px solid var(--rule);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:10px;width:max-content;max-width:90%;margin-inline:auto;padding:.9rem 1.6rem;position:absolute;bottom:clamp(1rem,4vh,2.5rem)}.verdict h2{text-transform:capitalize;margin:0;font-size:1.05rem}.verdict p{color:var(--muted);margin:.2rem 0 0;font-size:.82rem}.tray-piece.is-stuck{cursor:default;opacity:.3;filter:saturate(.25)}.seats{flex-direction:column;align-items:flex-start;gap:.3rem;display:flex}.seats-row{gap:.3rem;display:flex}.seat{--dot:var(--muted);min-width:0;font:inherit;color:var(--muted);background:var(--ground);border:1px solid var(--rule);cursor:pointer;border-radius:6px;align-items:center;gap:.35rem;padding:.22rem .45rem;font-size:.7rem;display:flex}.seat-blue{--dot:var(--blue)}.seat-yellow{--dot:var(--yellow)}.seat-red{--dot:var(--red)}.seat-green{--dot:var(--green)}.seat-dot{background:var(--dot);opacity:.5;border-radius:2px;width:.6rem;height:.6rem}.seat:hover:not(:disabled){border-color:var(--muted)}.seat:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.seat.is-mine{border-color:var(--dot);color:var(--ink)}.seat.is-mine .seat-dot{opacity:1}.seat.is-theirs{opacity:.45;cursor:default}.conn{font-family:var(--mono);color:var(--muted);align-items:center;gap:.35rem;margin:0;font-size:.64rem;display:flex}.conn-dot{background:currentColor;border-radius:50%;width:.4rem;height:.4rem}.conn-live{color:var(--green)}.conn-connecting,.conn-reconnecting{color:var(--yellow)}.conn-failed,.conn-gone{color:var(--red)}@media (prefers-reduced-motion:no-preference){.conn-connecting .conn-dot,.conn-reconnecting .conn-dot{animation:1.1s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.25}}}.variant-pick select{font:inherit;color:var(--ink);background:var(--ground);border:1px solid var(--rule);cursor:pointer;border-radius:6px;padding:.3rem .5rem;font-size:.8rem}.variant-pick select:disabled{opacity:.5;cursor:default}.player-side{color:var(--muted)}.history-pane{border-top:1px solid var(--rule);margin-top:1.4rem;padding-top:1rem}.history-pane h2{letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem;font-size:.7rem;font-weight:600}.history-empty{color:var(--muted);margin:0;font-size:.8rem}.history{flex-direction:column;gap:1px;max-height:12rem;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.history-move{--dot:var(--muted);font-family:var(--mono);border-radius:4px;grid-template-columns:1.8rem .6rem 1fr auto;align-items:center;gap:.5rem;padding:.22rem .35rem;font-size:.7rem;display:grid}.history-move:nth-child(odd){background:var(--ground)}.history-blue{--dot:var(--blue)}.history-yellow{--dot:var(--yellow)}.history-red{--dot:var(--red)}.history-green{--dot:var(--green)}.history-n{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}.history-dot{background:var(--dot);border-radius:2px;width:.5rem;height:.5rem}.history-size{color:var(--muted)}.history-size abbr{margin-left:.15rem;text-decoration:none}@media (prefers-reduced-motion:no-preference){.piece.is-latest{transform-box:fill-box;transform-origin:50%;animation:.26s cubic-bezier(.2,.9,.3,1.2) both drop}@keyframes drop{0%{opacity:0;transform:scale(1.35)}to{opacity:1;transform:none}}}.lobby{place-items:center;min-height:100vh;padding:2rem 1.25rem;display:grid}.lobby-card{background:var(--panel);border:1px solid var(--rule);border-radius:14px;flex-direction:column;gap:1.35rem;width:min(30rem,100%);padding:clamp(1.4rem,4vw,2rem);display:flex}.lobby-head h1{letter-spacing:-.015em;margin:0;font-size:1.3rem;font-weight:600}.lobby-head p{color:var(--muted);margin:.25rem 0 0;font-size:.85rem}.lobby-name{flex-direction:column;gap:.35rem;display:flex}.lobby-name span{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:.7rem;font-weight:600}.lobby-name input{font:inherit;color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:8px;padding:.5rem .7rem;font-size:.92rem}.lobby-name input:focus-visible{outline:2px solid var(--ink);outline-offset:1px}.lobby-seats{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.lobby-seat{--dot:var(--muted);text-align:left;width:100%;font:inherit;color:var(--ink);background:var(--ground);border:1px solid var(--rule);cursor:pointer;border-radius:10px;grid-template-rows:auto auto;grid-template-columns:1.1rem 1fr;align-items:center;gap:0 .6rem;padding:.6rem .75rem;transition:border-color .12s,transform .12s;display:grid}.lobby-seat-blue{--dot:var(--blue)}.lobby-seat-yellow{--dot:var(--yellow)}.lobby-seat-red{--dot:var(--red)}.lobby-seat-green{--dot:var(--green)}.lobby-swatch{background:var(--dot);opacity:.55;border-radius:4px;grid-row:1/span 2;width:1.1rem;height:1.1rem}.lobby-seat-name{text-transform:capitalize;font-size:.92rem;font-weight:600;line-height:1.25}.lobby-seat-who{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;line-height:1.2;overflow:hidden}.lobby-seat:hover:not(:disabled){border-color:var(--muted);transform:translateY(-1px)}.lobby-seat:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.lobby-seat.is-mine{border-color:var(--dot)}.lobby-seat.is-mine .lobby-swatch{opacity:1}.lobby-seat.is-mine .lobby-seat-who{color:var(--ink)}.lobby-seat.is-theirs{opacity:.5;cursor:default}.lobby-actions{flex-wrap:wrap;gap:.5rem;display:flex}.lobby-actions button{font:inherit;color:var(--ink);background:var(--ground);border:1px solid var(--rule);cursor:pointer;border-radius:8px;padding:.5rem .8rem;font-size:.85rem}.lobby-actions button:hover:not(:disabled){border-color:var(--muted)}.lobby-actions button:disabled{opacity:.45;cursor:default}.lobby-start{flex:1;min-width:11rem;font-weight:600}.lobby-start:not(:disabled){background:var(--ink);color:var(--panel);border-color:var(--ink)}.lobby-foot{border-top:1px solid var(--rule);flex-direction:column;gap:.6rem;padding-top:1rem;display:flex}.lobby-foot select{font:inherit;color:var(--ink);background:var(--ground);border:1px solid var(--rule);cursor:pointer;border-radius:7px;padding:.35rem .55rem;font-size:.82rem}.lobby-foot p{color:var(--muted);margin:0;font-size:.76rem;line-height:1.5}.seat:disabled{cursor:default;opacity:1}.seat.is-theirs{opacity:.75}.seat-label{text-overflow:ellipsis;white-space:nowrap;max-width:4.5rem;overflow:hidden}.seats-row{flex-wrap:wrap}.tray-piece.is-readonly{cursor:default}.tray-piece.is-readonly:hover{border-color:var(--rule);transform:none}.tray-piece.is-readonly.is-idle{opacity:1}.tray-owner{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}.tray-pane h2{text-transform:capitalize;font-size:.78rem}