:root{--bg: #0b0d12;--fg: #f4f6fb;--muted: #9aa3b5;--card: #161a24;--accent: #ff6b35;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:18px;overscroll-behavior:none;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}#app{min-height:100%;display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column;gap:20px;padding:calc(24px + var(--safe-top)) 20px calc(24px + var(--safe-bottom));user-select:none;-webkit-user-select:none;touch-action:manipulation}h1{font-size:28px;margin:0}label{display:flex;flex-direction:column;gap:8px;font-size:16px;color:var(--muted)}input{font:inherit;font-size:20px;color:var(--fg);background:var(--card);border:2px solid transparent;border-radius:12px;padding:14px 16px;min-height:52px;outline:none}input:focus{border-color:var(--accent)}input.room{letter-spacing:.4em;text-transform:uppercase;font-weight:700;font-size:28px;text-align:center}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.swatch{height:56px;border-radius:14px;border:3px solid transparent;cursor:pointer}.swatch.selected{border-color:var(--fg);transform:scale(1.06)}button{font:inherit;color:var(--fg);border:none;cursor:pointer}button.primary{min-height:60px;border-radius:16px;font-size:22px;font-weight:700;color:#0b0d12;background:var(--accent);margin-top:auto}button.primary:disabled{opacity:.4;cursor:default}.hint{color:var(--muted);font-size:15px;margin:0}.button-screen{touch-action:none}.button-screen header,.button-screen footer{display:flex;justify-content:space-between;color:var(--muted);font-size:15px;font-variant-numeric:tabular-nums}button.big{flex:1;width:100%;border-radius:32px;font-size:40px;font-weight:800;color:#0b0d12;box-shadow:0 12px #00000059;transition:transform 60ms ease,box-shadow 60ms ease;touch-action:none}button.big.pressed{transform:translateY(8px);box-shadow:0 4px #00000059}.generic pre{background:var(--card);border-radius:12px;padding:16px;font-size:14px;overflow:auto;white-space:pre-wrap;word-break:break-word}.banner{position:fixed;top:var(--safe-top);left:0;right:0;padding:10px 16px;background:#e0a800;color:#0b0d12;font-weight:600;text-align:center;z-index:10}.flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .12s ease-out;z-index:20}.flash.on{opacity:.6;transition:none}.card{background:var(--card);border-radius:18px;border-left:6px solid var(--accent);padding:16px 18px}.card h1{display:flex;align-items:center;gap:10px}.eyebrow{display:block;color:var(--muted);font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}.dot{display:inline-block;width:14px;height:14px;border-radius:50%;flex:none}.players,.scores{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.players li,.scores li{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:12px;padding:10px 14px;min-height:48px}.players li.away{opacity:.45}.players .name,.scores .name{flex:1}.players small{color:var(--muted);margin-left:6px}.badge{font-size:13px;color:var(--muted);border:1px solid var(--muted);border-radius:999px;padding:3px 10px}.badge.ready{color:#0b0d12;background:#3bceac;border-color:#3bceac}.games{display:grid;grid-template-columns:1fr 1fr;gap:10px}.game{display:flex;flex-direction:column;gap:4px;align-items:flex-start;background:var(--card);border:2px solid transparent;border-radius:14px;padding:12px 14px;min-height:64px;text-align:left}.game small{color:var(--muted)}.game.selected{border-color:var(--accent)}button.primary.ready-toggle{background:#3bceac;margin-top:auto}button.primary.ready-toggle.on{background:#1f8f76;color:#f4f6fb}button.primary.start{background:var(--accent);margin-top:0}button.secondary{min-height:52px;border-radius:14px;font-size:18px;background:var(--card);color:var(--fg)}.scores li.you{outline:2px solid var(--accent)}.scores .rank{width:24px;color:var(--muted);font-variant-numeric:tabular-nums}.scores .score{font-weight:700;font-variant-numeric:tabular-nums}.scores li.empty{color:var(--muted);justify-content:center}.choices{display:flex;flex-direction:column;gap:12px}.choice{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--card);border-radius:16px;padding:18px;min-height:72px;text-align:left;border-left:6px solid #3bceac}.choice strong{font-size:24px;text-transform:capitalize}.choice small{color:var(--muted)}.choice.medium{border-left-color:#ffd166}.choice.hard{border-left-color:#e63946}.draw-canvas{padding:calc(8px + var(--safe-top)) 8px calc(8px + var(--safe-bottom));gap:8px;touch-action:none}.draw-canvas header,.guess header{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:15px;padding:0 4px}.draw-canvas header strong{color:var(--fg);text-transform:capitalize}.draw-canvas canvas{flex:1;width:100%;min-height:0;border-radius:14px;background:#fbf8f1;touch-action:none;cursor:crosshair}.tools{display:flex;flex-direction:column;gap:8px}.swatches.small{grid-template-columns:repeat(8,1fr);gap:6px}.swatches.small .swatch{height:36px;border-radius:10px}.toolrow{display:flex;gap:6px;flex-wrap:wrap}.tool{flex:1;min-height:44px;min-width:44px;border-radius:10px;background:var(--card);color:var(--fg);border:2px solid transparent;display:inline-flex;align-items:center;justify-content:center;font-size:15px}.tool.selected{border-color:var(--accent)}button.link{background:none;color:var(--muted);font-size:14px;text-decoration:underline;min-height:32px}h1.mask{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;font-family:ui-monospace,Menlo,monospace;font-size:26px}.mask .word{display:inline-flex;gap:4px}.mask .letter{display:inline-block;width:16px;text-align:center}.mask small{font:inherit;font-size:14px;color:var(--muted);width:100%;font-family:system-ui,sans-serif;text-transform:capitalize}.feed{list-style:none;margin:0;padding:0;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:4px;font-size:16px}.feed li{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;background:var(--card)}.feed li.got{background:#1f8f76;font-weight:600}.feed li.system{color:var(--muted);background:none;font-size:14px}.guess-form{display:flex;flex-direction:column;gap:8px}.guess-form .primary{margin-top:0;min-height:52px}.hint.close{color:#ffd166;font-weight:700;margin:0}.card.got{border-left-color:#3bceac}.card.got h2{margin:0 0 6px}h1.answer{font-size:40px;text-transform:capitalize}.option .toolrow{margin-top:4px}.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.lab-grid div{background:var(--card);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}.lab-grid small{color:var(--muted);font-size:13px}.lab-grid strong{font-size:20px;font-variant-numeric:tabular-nums}.lab.swing-now{background:#ff6b35}.swing-word{font-size:72px;text-align:center;color:#0b0d12}.steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;color:var(--muted)}a.button-link{display:flex;align-items:center;justify-content:center;text-decoration:none}.card.notice{border-left-color:#ffd166}.card.notice h2{margin:0 0 6px;font-size:20px}.card.notice p{margin:0 0 10px;color:var(--muted)}.card.notice .primary{margin-top:10px}.tennis{touch-action:none;transition:background 80ms ease}.tennis.hit-now{background:#1f8f76}.scoreline{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;background:var(--card);border-radius:14px;padding:10px 14px}.scoreline div{display:flex;flex-direction:column;align-items:center}.scoreline small{color:var(--muted);font-size:13px;text-align:center}.scoreline strong{font-size:28px;font-variant-numeric:tabular-nums}.scoreline .points strong{font-size:22px}.racket-stage{position:relative;flex:1;min-height:180px;display:flex;align-items:center;justify-content:center}.racket{display:flex;flex-direction:column;align-items:center;transform:rotate(-20deg)}.tennis.left .racket{transform:rotate(20deg) scaleX(-1)}.racket .head{width:130px;height:170px;border-radius:50%;border:10px solid #ff6b35;background:repeating-linear-gradient(0deg,transparent 0 12px,rgb(255 255 255 / 25%) 12px 14px),repeating-linear-gradient(90deg,transparent 0 12px,rgb(255 255 255 / 25%) 12px 14px)}.racket .handle{width:22px;height:110px;border-radius:8px;background:#3a3f4d;margin-top:-4px}.ring{position:absolute;left:50%;top:50%;width:220px;height:220px;border-radius:50%;border:6px solid #ffd166;pointer-events:none}.call{font-size:22px;font-weight:700;color:#ffd166;margin:0}.feedback{margin:0;font-size:18px}button.big-swing{min-height:110px;font-size:34px;margin-top:0}a.button-link{min-height:60px;border-radius:16px;font-size:20px;font-weight:700;color:#0b0d12;background:var(--accent)}a.button-link.secondary{background:var(--card);color:var(--fg);border:1px solid #2a3142;font-weight:600}a.button-link.disabled{opacity:.4;pointer-events:none}.screen.home,.screen.place{max-width:520px;width:100%;margin:0 auto}.screen.home h1{font-size:44px}.screen.home .card{display:flex;flex-direction:column;gap:14px}.screen.home .card h2{margin:0;font-size:22px}.screen.place button.primary{margin-top:8px}.tv-wait{flex:1;display:grid;place-items:center;font-size:28px;color:var(--muted)}.tv{position:relative;flex:1;display:flex;flex-direction:column;min-height:100vh;font-size:clamp(16px,1.6vw,28px);overflow:hidden}.tv-bar{display:flex;align-items:center;gap:1.2em;padding:.6em 1.2em;background:#0f131b;border-bottom:1px solid #1f2533}.tv-bar .room strong{font-size:1.4em;letter-spacing:.12em;color:var(--accent);margin-left:.3em}.tv-bar .title{font-weight:700}.tv-bar .voices{margin-left:auto;display:flex;gap:.5em;flex-wrap:wrap}.voice{padding:.2em .7em;border-radius:999px;background:var(--card);font-size:.8em;border:1px solid transparent}.voice.live{border-color:#3bceac;color:#3bceac}.voice.muted{color:var(--muted)}.voice.you{font-weight:700}button.mic{display:flex;align-items:center;gap:.4em;padding:.45em .9em;border-radius:999px;background:var(--card);font-size:.85em}button.mic.live{background:#3bceac;color:#0b0d12}button.mic.denied{color:#ee4266}.tv-body{flex:1;display:flex;min-height:0}.tv-lobby{flex:1;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:3em;padding:2em 3em;align-items:center}.join-card{background:var(--card);border-radius:1.2em;padding:1.5em;text-align:center}.join-card p{margin:.2em 0}.qr{background:#fff;border-radius:.6em;padding:.4em;width:min(100%,14em);margin:0 auto .8em}.qr svg{display:block;width:100%;height:auto}.join-card .scan,.join-card .code-label{color:var(--muted)}.join-card .url{font-weight:700;font-size:1.1em;word-break:break-all}.join-card .code{font-size:3.2em;font-weight:800;letter-spacing:.15em;color:var(--accent)}.roster h2{margin:0 0 .6em}.roster ul,.tv-results ol{list-style:none;margin:0;padding:0;display:grid;gap:.5em}.roster li,.tv-results li{display:flex;align-items:center;gap:.8em;background:var(--card);border-radius:.8em;padding:.5em .8em}.roster li.away{opacity:.45}.avatar{width:2em;height:2em;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#0b0d12;flex:none}.roster .name{flex:1;display:flex;flex-direction:column}.roster .name small{color:var(--muted);font-size:.65em}.roster .ready{color:var(--muted)}.roster .ready.yes{color:#3bceac;font-weight:700}.roster .next{color:var(--muted);margin-top:1em}.roster .next strong{color:var(--fg)}.tv-demo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em}.tv-demo .cube{width:10em;height:10em;border-radius:1.2em;animation:pop .25s ease-out;box-shadow:0 1em 3em #00000080}@keyframes pop{0%{transform:scale(1.15) rotate(6deg)}to{transform:none}}.tv-demo .presses{font-size:2.4em;font-weight:800;margin:0}.tv-demo .last{color:var(--muted);margin:0}.tv-results{flex:1;max-width:40em;margin:0 auto;padding:2em}.tv-results .rank{width:1.5em;font-weight:800;color:var(--accent)}.tv-results .name{flex:1}.tv-results .score{font-weight:800;font-size:1.3em}.tv-generic{flex:1;display:grid;place-items:center;font-size:2em}.toasts{position:absolute;left:1.2em;bottom:1.2em;display:flex;flex-direction:column;gap:.4em;pointer-events:none}.toast{background:#161a24eb;border-left:4px solid var(--accent);padding:.4em .9em;border-radius:.5em;animation:toast-in .2s ease-out}@keyframes toast-in{0%{opacity:0;transform:translateY(.5em)}}.tv-status{position:absolute;top:3.6em;left:50%;transform:translate(-50%);background:#ffd166;color:#0b0d12;padding:.4em 1em;border-radius:.5em;font-weight:700}@media(max-width:760px){.tv-lobby{grid-template-columns:1fr;padding:1em;gap:1.5em}.tv-bar{flex-wrap:wrap;gap:.6em;padding:.6em 16px}}.tv-draw{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 16em;gap:1.5em;padding:1.5em;min-height:0}.tv-draw .stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}.tv-draw canvas.ink{max-width:100%;max-height:100%;aspect-ratio:16 / 9;width:100%;height:auto;border-radius:.8em;box-shadow:0 .6em 2em #00000073;background:#fbf8f1}.tv-draw .voided{position:absolute;inset:auto 0 1em;text-align:center;font-size:1.6em;font-weight:800;color:#0b0d12}.tv-draw aside{display:flex;flex-direction:column;gap:.6em;min-height:0}.tv-draw aside p{margin:0}.tv-draw .turn,.tv-draw .guessed{color:var(--muted)}.tv-draw .drawer{display:flex;align-items:center;gap:.5em;font-weight:700}.tv-draw .dot{width:.8em;height:.8em;border-radius:50%;display:inline-block;flex:none}.tv-draw .word{font-size:1.8em;font-weight:800}.tv-draw .word.mask{display:flex;flex-wrap:wrap;gap:.2em}.tv-draw .word.mask .blank{width:.8em;height:1.2em;border-bottom:.12em solid var(--fg)}.tv-draw .word.mask .gap{width:.5em}.tv-draw .word.waiting{font-size:1.1em;color:var(--muted);font-weight:600}.tv-draw .word.revealed{color:var(--accent)}.tv-draw .difficulty{text-transform:capitalize;color:var(--muted)}.tv-draw .difficulty.medium{color:#ffd166}.tv-draw .difficulty.hard{color:#ee4266}.tv-draw .timer{font-size:3em;font-weight:800;font-variant-numeric:tabular-nums}.tv-draw .timer.low{color:#ee4266}.tv-draw ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35em;overflow:hidden}.tv-draw .feed li{font-size:.9em}.tv-draw .feed li.got{color:#3bceac;font-weight:700}.tv-draw .feed li.system{color:var(--muted)}.tv-draw .points li{display:flex;align-items:center;gap:.5em}.tv-draw .points strong{margin-left:auto;color:#3bceac}@media(max-width:760px){.tv-draw{grid-template-columns:1fr;padding:.8em}}.tv-tennis{position:relative;flex:1;min-height:0;overflow:hidden}.tv-tennis .court3d{position:absolute;inset:0}.tv-tennis .court3d canvas{display:block;width:100%;height:100%}.tv-tennis .scoreboard{position:absolute;top:.8em;left:50%;transform:translate(-50%);display:flex;align-items:stretch;background:#0b0d12d1;border-radius:.6em;overflow:hidden;font-weight:700}.tv-tennis .team{display:flex;align-items:center;gap:.7em;padding:.4em .9em}.tv-tennis .team strong{font-size:1.4em;color:#d9f23a}.tv-tennis .team.won span{color:#d9f23a}.tv-tennis .points{padding:.4em 1em;background:#f4f6fb;color:#0b0d12;display:grid;place-items:center;min-width:5em;font-variant-numeric:tabular-nums}.tv-tennis .server{position:absolute;top:3.6em;left:50%;transform:translate(-50%);margin:0;font-size:.8em;color:#0b0d12;background:#f4f6fbd9;padding:.15em .7em;border-radius:999px}.tv-tennis .callout{position:absolute;left:50%;bottom:1.2em;transform:translate(-50%);text-align:center;display:flex;flex-direction:column;gap:.3em;align-items:center;pointer-events:none}.tv-tennis .callout p{margin:0;background:#0b0d12c7;padding:.25em .9em;border-radius:.5em}.tv-tennis .call{font-size:1.6em;font-weight:800;color:#ffd166}.tv-tennis .shot{font-size:.85em;color:var(--muted)}