:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#f2f4f3;--muted:#9aa8a2;--backdrop:#0e1211;--raised:#182220;--line:#2a3835;--accent:#38e0c8;--red:#ff4055;--blue:#2387ff;--tap:44px}*{box-sizing:border-box}html,body{background:var(--backdrop);min-height:100%;color:var(--ink);margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;overflow-x:hidden}.app{flex-direction:column;gap:.6rem;max-width:1200px;margin:0 auto;padding:clamp(.5rem,2vw,1.25rem);display:flex}.header{flex-direction:column;gap:.25rem;display:flex}.header-row{justify-content:space-between;align-items:center;gap:.6rem;display:flex}.title{letter-spacing:-.04em;margin:0;font-size:clamp(1.55rem,4vw,2.4rem);line-height:1}.eyebrow{color:var(--accent);letter-spacing:.16em;margin:0 0 .22rem;font-size:.63rem;font-weight:800}.subtitle,.note,.readout{color:var(--muted);margin:0;font-size:clamp(.8rem,2vw,.95rem);line-height:1.5}.readout{overflow-wrap:anywhere;font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-size:clamp(.65rem,1.6vw,.8rem)}.banner{background:var(--raised);border:1px solid var(--line);border-radius:.5rem;margin:0;padding:.6rem .8rem;font-size:.9rem}.panel{background:var(--raised);border:1px solid var(--line);border-radius:.75rem;flex-direction:column;gap:.9rem;padding:clamp(.8rem,2vw,1.2rem);display:flex}.row{flex-wrap:wrap;align-items:end;gap:.6rem;display:flex}.field{color:var(--muted);flex-direction:column;gap:.3rem;min-width:0;font-size:.85rem;display:flex}input{border:1px solid var(--line);background:var(--backdrop);color:var(--ink);font:inherit;min-height:var(--tap);border-radius:.5rem;max-width:100%;padding:.55rem .7rem;font-size:1rem}button{min-height:var(--tap);min-width:var(--tap);border:1px solid var(--line);background:var(--raised);color:var(--ink);font:inherit;cursor:pointer;border-radius:.5rem;padding:.55rem .9rem}button.ghost{color:var(--muted);background:0 0;font-size:.85rem}button:hover:not(:disabled){border-color:var(--accent);color:var(--ink)}button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 18%, var(--raised))}button[data-team=red]{border-color:color-mix(in srgb, var(--red) 55%, var(--line))}button[data-team=red][aria-pressed=true]{border-color:var(--red);background:color-mix(in srgb, var(--red) 23%, var(--raised))}button[data-team=blue]{border-color:color-mix(in srgb, var(--blue) 55%, var(--line))}button[data-team=blue][aria-pressed=true]{border-color:var(--blue);background:color-mix(in srgb, var(--blue) 23%, var(--raised))}button:disabled{opacity:.45;cursor:not-allowed}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.roomCode{justify-content:space-between;align-items:center}.roomCode p{color:var(--muted);margin:0}.roomCode strong{color:var(--ink);letter-spacing:.2em;font-size:1.4rem}.players{flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.players li{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.swatch{border-radius:50%;flex:none;width:.9rem;height:.9rem;display:inline-block;box-shadow:0 0 0 1px #0000008c}.tag{color:var(--muted);border:1px solid var(--line);white-space:nowrap;border-radius:999px;padding:.1rem .5rem;font-size:.75rem}.tag-ready{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 50%, var(--line))}.table-screen{grid-template-areas:"hud""table""controls""readout";gap:.6rem;min-width:0;display:grid}.hud{flex-direction:column;grid-area:hud;gap:.5rem;min-width:0;display:flex}.match-heading{justify-content:space-between;align-items:stretch;gap:.5rem;display:flex}.match-heading>div:first-child{flex-direction:column;justify-content:center;gap:.15rem;padding:.35rem 0;display:flex}.ready-summary{min-width:0;color:var(--muted);text-align:right;flex-direction:column;justify-content:center;align-items:flex-end;gap:.1rem;font-size:.72rem;display:flex}.ready-summary strong{color:var(--accent);font-size:.78rem}.ready-summary span{text-overflow:ellipsis;white-space:nowrap;max-width:18rem;overflow:hidden}button.change-shot{border-color:color-mix(in srgb, var(--accent) 45%, var(--line));min-height:1.8rem;color:var(--accent);padding:.15rem .55rem;font-size:.7rem}.match-round-short{display:none}.hud-row{flex-wrap:wrap;gap:.5rem;display:flex}.hud-team{background:var(--raised);border:1px solid var(--line);border-radius:.5rem;flex-direction:column;flex:8rem;gap:.1rem;min-width:0;padding:.4rem .7rem;display:flex}.score-row{flex-wrap:nowrap;align-items:stretch}.hud-team{border-width:2px;padding:clamp(.55rem,2vw,.85rem)}.hud-team.team-red{border-color:color-mix(in srgb, var(--red) 74%, var(--line));background:linear-gradient(135deg, color-mix(in srgb, var(--red) 15%, var(--raised)), var(--raised))}.hud-team.team-blue{border-color:color-mix(in srgb, var(--blue) 74%, var(--line));background:linear-gradient(225deg, color-mix(in srgb, var(--blue) 15%, var(--raised)), var(--raised))}.hud-team[data-scored=true]{animation:.52s ease-out score-bump}@keyframes score-bump{0%{transform:scale(1)}38%{filter:brightness(1.35);transform:scale(1.045)}to{transform:scale(1)}}.score-divider{color:var(--muted);letter-spacing:.1em;align-self:center;font-size:.62rem;font-weight:900}.round-wins{gap:.28rem;padding:.2rem 0;display:flex}.win-pip{background:#ffffff21;border-radius:999px;width:clamp(1.1rem,4vw,1.8rem);height:.32rem}.team-red .win-pip.won{background:var(--red);box-shadow:0 0 .7rem color-mix(in srgb, var(--red) 45%, transparent)}.team-blue .win-pip.won{background:var(--blue);box-shadow:0 0 .7rem color-mix(in srgb, var(--blue) 45%, transparent)}.hud-value strong{font-size:1.28rem}.hud-team[data-eligible=true]{border-color:color-mix(in srgb, var(--accent) 55%, var(--line))}.hud-label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.7rem}.hud-value{font-size:.95rem}.hud-players{flex-wrap:wrap;gap:.4rem .8rem;margin:0;padding:0;list-style:none;display:flex}.hud-player{align-items:center;gap:.35rem;min-width:0;display:flex}.hud-player[data-locked=true] .hud-name{color:var(--accent)}.hud-player[data-fouled=true] .hud-name{color:#ffb36b;text-decoration:line-through;text-decoration-thickness:1px}.foul-indicator{color:#ffb36b;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex:none;font-size:.68rem;font-weight:850}.ready-indicator{color:var(--accent);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex:none;align-items:center;gap:.24rem;font-size:.7rem;font-weight:850;display:inline-flex}.ready-check{background:var(--accent);width:1.05rem;height:1.05rem;color:var(--backdrop);box-shadow:0 0 .55rem color-mix(in srgb, var(--accent) 38%, transparent);border-radius:50%;place-items:center;font-size:.72rem;line-height:1;display:inline-grid}.hud-name{white-space:nowrap;text-overflow:ellipsis;max-width:9rem;font-size:.85rem;overflow:hidden}.tableFrame{filter:drop-shadow(0 1rem 1.4rem #00000052);grid-area:table;width:100%;min-width:0;max-width:100%;margin-inline:auto;position:relative}.replay-callout{z-index:2;border:1px solid color-mix(in srgb, var(--accent) 52%, var(--line));max-width:calc(100% - 1.2rem);color:var(--ink);letter-spacing:.02em;text-align:center;white-space:nowrap;opacity:0;pointer-events:none;background:#070f0ce0;border-radius:999px;padding:.42rem .8rem;font-size:clamp(.72rem,2vw,.92rem);font-weight:850;line-height:1.15;transition:opacity .12s,transform .18s;position:absolute;top:clamp(.45rem,2vw,.85rem);left:50%;transform:translate(-50%,-.4rem)scale(.96);box-shadow:0 .5rem 1.2rem #00000059}.replay-callout[data-active=true]{opacity:1;transform:translate(-50%)scale(1)}.replay-callout[data-kind=goal],.replay-callout[data-kind=round-win]{border-color:color-mix(in srgb, #ffd66b 72%, var(--line));box-shadow:0 .5rem 1.2rem #00000059,0 0 1.2rem #ffd66b38}.replay-callout[data-kind=unclaimed],.replay-callout[data-kind=scratch]{border-color:color-mix(in srgb, #ffad66 70%, var(--line));color:#ffe0c2}.result-callout{border:1px solid color-mix(in srgb, #ffd66b 68%, var(--line));color:#ffe39a;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;align-self:flex-start;margin:0;padding:.35rem .7rem;font-size:.8rem;font-weight:850}.final-score{border:1px solid var(--line);background:color-mix(in srgb, var(--backdrop) 55%, var(--raised));border-radius:.75rem;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(.8rem,4vw,2rem);padding:clamp(.8rem,3vw,1.4rem);display:grid}.final-team{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;flex-direction:column;align-items:center;gap:.15rem;font-size:.72rem;font-weight:800;display:flex}.final-team strong{color:var(--ink);font-size:clamp(2.4rem,11vw,4.8rem);line-height:.95}.final-team[data-winner=true] span{color:#ffe39a}.final-score-divider{color:var(--muted);font-size:1.6rem}.round-recap{color:var(--muted);text-align:center;margin:-.3rem 0 0;font-size:.82rem}.result-scorers{flex-wrap:wrap;justify-content:center;gap:.35rem .8rem;display:flex}.result-scorers span+span:before{content:"·";margin-right:.8rem}.table{touch-action:none;border-radius:.75rem;width:100%;height:100%;display:block}.controls{grid-area:controls;align-items:center}.readout{grid-area:readout}.sandbox-match-controls{display:none}@media (orientation:landscape) and (height<=700px){.app{width:100%;max-width:none;padding:max(.35rem, env(safe-area-inset-top)) max(.35rem, env(safe-area-inset-right)) max(.35rem, env(safe-area-inset-bottom)) max(.35rem, env(safe-area-inset-left));gap:.35rem}.app:has(.table-screen){height:100dvh;overflow:hidden}.app:has(.table-screen)>.header{display:none}.sandbox.app:has(.table-screen){height:auto;min-height:100dvh;overflow-y:auto}.sandbox:has(.table-screen)>[data-testid=seats]{display:flex}.sandbox:has(.table-screen)>.table-screen{flex:0 0 calc(100dvh - .7rem);height:calc(100dvh - .7rem)}.sandbox:has(.table-screen) .sandbox-match-controls{z-index:4;left:max(.35rem, env(safe-area-inset-left));bottom:calc(max(.35rem, env(safe-area-inset-bottom)) + 4.2rem);gap:.25rem;width:clamp(9.5rem,23vw,13rem);display:flex;position:fixed}.sandbox-match-controls select,.sandbox-match-controls button{min-width:0;min-height:var(--tap);border:1px solid var(--line);background:var(--raised);color:var(--ink);font:inherit;border-radius:.45rem;font-size:.72rem}.sandbox-match-controls select{flex:1;padding:.35rem}.sandbox-match-controls button{flex:none;padding:.35rem .55rem}.table-screen{flex:1;grid-template:"hud table"minmax(0,1fr)"controls table"/clamp(9.5rem,23vw,13rem) minmax(0,1fr);align-items:center;gap:.4rem;height:100%;min-height:0;overflow:hidden}.tableFrame{filter:drop-shadow(0 .45rem .75rem #0006);place-self:center;width:min(100%,168dvh - 1.176rem)}.replay-callout{max-width:calc(100% - .7rem);padding:.32rem .58rem;font-size:.68rem;top:.35rem}.hud{align-self:stretch;gap:.3rem;min-height:0;overflow:hidden}.match-heading{gap:.3rem}.match-heading>div:first-child{gap:0;padding:.1rem 0}.match-heading strong{font-size:.84rem;line-height:1.15}.ready-summary{align-items:flex-end;max-width:6.7rem;font-size:.58rem}.ready-summary strong{font-size:.65rem}button.change-shot{min-height:1.5rem;padding:.08rem .38rem;font-size:.58rem}.match-round-long{display:none}.match-round-short{white-space:nowrap;display:block}.hud-row{flex-direction:column;gap:.28rem}.score-divider{display:none}.hud-team{border-radius:.42rem;flex:none;gap:.05rem;padding:.28rem .48rem}.hud-label{letter-spacing:.07em;font-size:.58rem}.round-wins{gap:.2rem;padding:.08rem 0}.win-pip{width:1.1rem;height:.22rem}.hud-value{font-size:.74rem;line-height:1.15}.hud-value strong{font-size:1rem}.hud-players{flex-flow:column;gap:.08rem;min-height:0;overflow:hidden}.hud-player{gap:.25rem;min-height:1rem}.hud-player .swatch{width:.62rem;height:.62rem}.hud-player .tag{display:none}.ready-indicator{margin-left:auto}.ready-check{width:.82rem;height:.82rem;font-size:.58rem}.ready-text{display:none}.foul-indicator{margin-left:auto;font-size:.56rem}.hud-name{max-width:none;font-size:.68rem;line-height:1.15}.controls{align-self:end;gap:.25rem}.controls [data-testid=round],.controls [data-testid=turn]{display:none}.controls .tag{padding-inline:.38rem;font-size:.65rem}.controls button{padding:.35rem .65rem}.readout{display:none}}@media (orientation:portrait){.tableFrame{max-height:55vh}}@media (orientation:landscape) and (height>=701px){.tableFrame{max-width:114.24vh;max-height:68vh}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}