:root{color-scheme:light;--bg: #f7f7f5;--surface: #ffffff;--surface-2: #f0f0ed;--ink: #1c1e21;--ink-soft: #686c72;--line: #e3e3df;--frame: #dce2e7;--well: #f7f7f5;--column-hover: rgb(64 89 112 / 8%);--disc-blue: #4089e2;--disc-yellow: #efb13d;--blue-text: #2469ba;--danger: #d64533;--yellow-text: #a4751c;--shadow: 0 1px 2px rgba(20, 20, 18, .06);--ease-out: cubic-bezier(.23, 1, .32, 1);--ease-drop: cubic-bezier(.55, 0, .75, 1.12);--font-ui: "Barlow", "Helvetica Neue", Arial, sans-serif}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg: #121416;--surface: #1b1e21;--surface-2: #17191c;--ink: #ecedee;--ink-soft: #8f9398;--line: #2a2e32;--frame: #596773;--well: #1b2127;--column-hover: rgb(226 238 249 / 10%);--disc-blue: #69a8f5;--disc-yellow: #e6b24a;--blue-text: #83b8f8;--danger: #dd5240;--yellow-text: #d7a93f;--shadow: 0 1px 2px rgba(0, 0, 0, .4)}}:root[data-theme=dark]{color-scheme:dark;--bg: #121416;--surface: #1b1e21;--surface-2: #17191c;--ink: #ecedee;--ink-soft: #8f9398;--line: #2a2e32;--frame: #596773;--well: #1b2127;--column-hover: rgb(226 238 249 / 10%);--disc-blue: #69a8f5;--disc-yellow: #e6b24a;--blue-text: #83b8f8;--danger: #dd5240;--yellow-text: #d7a93f;--shadow: 0 1px 2px rgba(0, 0, 0, .4)}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:15px;line-height:1.45;-webkit-tap-highlight-color:transparent}#root{min-height:100%;box-sizing:border-box;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--ink-soft);outline-offset:4px;border-radius:6px}input{min-width:0;font:inherit;color:var(--ink)}.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:8px;color:var(--ink-soft);transition:transform .14s var(--ease-out),color .2s ease}.icon-btn:active{transform:scale(.92)}.ghost-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;box-sizing:border-box;border-radius:8px;padding:8px 12px;font-size:14px;font-weight:500;color:var(--ink);background:var(--surface-2);white-space:nowrap;transition:transform .14s var(--ease-out),color .2s ease}.ghost-btn:active{transform:scale(.96)}@media(hover:hover)and (pointer:fine){.icon-btn:hover,.ghost-btn:hover{color:var(--ink)}}.primary-btn,.secondary-btn{background:var(--ink);color:var(--bg);min-height:46px;border-radius:8px;padding:12px 20px;font-weight:600;font-size:15px;transition:transform .14s var(--ease-out),opacity .2s ease}.secondary-btn{background:var(--surface-2);color:var(--ink)}.primary-btn:disabled,.secondary-btn:disabled{opacity:.35}.primary-btn:not(:disabled):active,.secondary-btn:not(:disabled):active{transform:scale(.96)}.switch-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;font-size:14px;font-weight:500;cursor:pointer;text-align:left}.switch-row small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-soft)}.timer-detail{margin:0;text-align:left;color:var(--ink-soft);font-size:13px}.switch{appearance:none;width:40px;height:24px;border-radius:12px;background:var(--line);position:relative;cursor:pointer;transition:background .2s ease;flex:none;margin:0}.switch:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow);transition:transform .2s var(--ease-out)}.switch:checked{background:var(--ink)}.switch:checked:after{transform:translate(16px)}.home{min-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:32px;width:min(360px,100%);margin-inline:auto;padding-block:48px;box-sizing:border-box;text-align:center}.hero{display:flex;flex-direction:column;align-items:center;gap:12px}.hero h1{margin:0;font-size:clamp(30px,6vw,36px);font-weight:600;letter-spacing:-.035em;line-height:1.1;display:flex;align-items:center;gap:10px}.title-mark{display:inline-flex;gap:5px}.dot{width:.25em;height:.25em;border-radius:50%;display:inline-block}.dot.red{background:var(--disc-blue)}.dot.yellow{background:var(--disc-yellow)}.tagline{margin:0;color:var(--ink-soft);font-size:15px}.name-row{display:flex;flex-direction:column;align-items:stretch;gap:8px;font-size:14px;color:var(--ink-soft);text-align:left}.name-input{background:transparent;border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:16px}.game-options{display:flex;flex-direction:column;gap:28px}.create-game{display:flex;flex-direction:column;gap:14px}.join-game{border-top:1px solid var(--line);padding-top:24px;text-align:left}.join-label{display:block;margin-bottom:12px;font-size:14px;color:var(--ink-soft)}.join-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.code-input{width:100%;box-sizing:border-box;background:transparent;border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-weight:500;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}.code-input::placeholder{color:var(--ink-soft);letter-spacing:normal;text-transform:none;font-weight:400}.home-foot{display:flex;justify-content:center}.game{--board-chrome: 234px;min-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));box-sizing:border-box;display:flex;flex-direction:column;align-items:center;padding-block:16px;width:min(760px,100%);margin-inline:auto}.game[data-phase=waiting]{--board-chrome: 364px}.game[data-phase=over]{--board-chrome: 319px}.game-head{width:100%;display:flex;align-items:center;gap:12px;min-height:44px}.wordmark{font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;padding-block:12px;white-space:nowrap}.code-chip{font-size:13px;font-weight:600;letter-spacing:.18em;color:var(--ink-soft)}.head-actions{margin-left:auto;display:flex;align-items:center;gap:2px}.connection-status{font-size:12px;color:var(--ink-soft)}.connecting{margin:auto;color:var(--ink-soft)}.game-table{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding-block:24px 12px}.chips{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(10px,3vw,24px);width:min(480px,100%)}.chip:first-child{justify-content:flex-end}.room-score{text-align:center}.score-values{display:flex;justify-content:center;gap:10px;font-size:26px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}.score-blue{color:var(--blue-text)}.score-yellow{color:var(--yellow-text)}.score-divider{color:var(--ink-soft);font-weight:400;font-size:20px}.score-caption,.score-reset{font-size:11px;color:var(--ink-soft);white-space:nowrap}.score-reset{font-size:10px}.chip{display:flex;align-items:center;gap:6px;min-width:0;padding:8px 0;border-bottom:2px solid transparent;color:var(--ink-soft);transition:border-color .3s ease}.chip.active{color:var(--ink)}.chip.active.red{border-bottom-color:var(--disc-blue)}.chip.active.yellow{border-bottom-color:var(--disc-yellow)}.chip-disc{width:12px;height:12px;border-radius:50%;flex:none}.chip-disc.red{background:var(--disc-blue)}.chip-disc.yellow{background:var(--disc-yellow)}.chip-name{font-weight:500;font-size:15px;max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip-you{font-weight:400;font-size:11.5px;color:var(--ink-soft)}.chip-off{font-size:11px;color:var(--ink-soft)}.countdown{font-weight:700;font-size:15px;min-width:1.5ch;text-align:center;color:var(--bg);background:var(--ink);border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums;animation:pop .18s var(--ease-out)}.countdown[data-urgent]{background:var(--danger);color:#fff}@keyframes pop{0%{transform:scale(.82)}to{transform:scale(1)}}.board-zone{position:relative;width:100%;display:flex;align-items:center;justify-content:center}.board{--gap: clamp(4px, 1vw, 8px);--pad: clamp(10px, 1.6vw, 16px);--cell: min( calc( ( min( 100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px), 680px ) - 6 * var(--gap) - 2 * var(--pad) ) / 7 ), max( 28px, calc( ( 100dvh - var(--board-chrome) - var(--pad) * 2 - 5 * var(--gap) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) ) / 6.9 ) ), 84px );position:relative;margin-top:calc(var(--cell) * .9);padding:var(--pad);background:var(--frame);border-radius:12px}.well,.discs,.victory-discs{border-radius:7px}.well{position:absolute;inset:var(--pad);background:var(--well)}.discs,.victory-discs{position:relative;display:grid;grid-template-columns:repeat(7,var(--cell));grid-template-rows:repeat(6,var(--cell));gap:var(--gap)}.discs{position:absolute;inset:var(--pad)}.frame{position:relative;width:calc(7 * var(--cell) + 6 * var(--gap));height:calc(6 * var(--cell) + 5 * var(--gap));background:var(--frame);mask-image:radial-gradient(circle at calc(var(--cell) / 2) calc(var(--cell) / 2),transparent calc(var(--cell) * .45 - .5px),#000 calc(var(--cell) * .45 + .5px));mask-size:calc(var(--cell) + var(--gap)) calc(var(--cell) + var(--gap));mask-repeat:repeat}.disc{border-radius:50%;margin:5%;animation:drop .42s var(--ease-drop);transition:opacity .4s ease,box-shadow .4s ease}.disc.still{animation:none}.disc.red{background:var(--disc-blue)}.disc.yellow{background:var(--disc-yellow)}.disc.win{box-shadow:inset 0 0 0 3px #ffffffd9}.disc.dim{opacity:.4}@keyframes drop{0%{transform:translateY(calc(-1 * var(--drop-cells) * (var(--cell) + var(--gap)) - var(--cell) * .6))}to{transform:translateY(0)}}.cols{position:absolute;left:var(--pad);right:var(--pad);top:calc(-.9 * var(--cell));bottom:var(--pad);display:grid;grid-template-columns:repeat(7,var(--cell));gap:var(--gap)}.col-btn{position:relative;border-radius:8px}.col-btn:focus-visible{outline-color:var(--ink-soft);outline-offset:2px}.col-btn:not(:disabled):focus-visible:before{opacity:.8}.col-btn:after{content:"";position:absolute;top:calc(var(--cell) * .9);bottom:calc(-1 * var(--pad) / 2);left:calc(-1 * var(--gap) / 2);right:calc(-1 * var(--gap) / 2);background:var(--column-hover);border-radius:8px;opacity:0;transition:opacity .16s ease;pointer-events:none}.col-btn:not(:disabled):focus-visible:after{opacity:1}.col-btn:before{content:"";position:absolute;top:0;left:50%;width:calc(var(--cell) * .82);height:calc(var(--cell) * .82);transform:translate(-50%);border-radius:50%;opacity:0;transition:opacity .15s ease;pointer-events:none}.board[data-me=red] .col-btn:before{background:var(--disc-blue)}.board[data-me=yellow] .col-btn:before{background:var(--disc-yellow)}@media(hover:hover)and (pointer:fine){.col-btn:not(:disabled):hover:before{opacity:.8}.col-btn:not(:disabled):hover:after{opacity:1}}.victory-discs{position:absolute;inset:var(--pad);pointer-events:none;z-index:2}.victory-disc{margin:5%;border-radius:50%;box-shadow:inset 0 0 0 3px #ffffffd9;animation:victory-wave .76s ease-in-out calc(.43s + var(--wave-delay)) 3 backwards}.victory-disc.red,.winner-disc.red{background:var(--disc-blue)}.victory-disc.yellow,.winner-disc.yellow{background:var(--disc-yellow)}@keyframes victory-wave{0%,to{transform:translateY(0) rotate(0) scale(1)}28%{transform:translateY(calc(var(--cell) * -.4)) rotate(-12deg) scale(1.13)}60%{transform:translateY(calc(var(--cell) * -.08)) rotate(8deg) scale(1.04)}}.checker-burst{position:absolute;top:calc(var(--cell) * -.35);left:50%;pointer-events:none;z-index:3;color:var(--disc-yellow)}.checker-burst.red{color:var(--disc-blue)}.checker-spark{position:absolute;width:clamp(7px,1.2vw,12px);aspect-ratio:1;border-radius:50%;background:currentColor;box-shadow:inset 0 0 0 1px #ffffff7f;animation:checker-scatter 1.1s ease-out calc(.6s + var(--spark-delay)) both}@keyframes checker-scatter{0%{opacity:0;transform:translate(0) scale(.4)}15%{opacity:1}to{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) rotate(var(--spark-rotation)) scale(.6)}}.result{width:min(400px,100%);display:flex;align-items:center;justify-content:space-between;gap:12px}.result>div{min-width:0;overflow-wrap:anywhere}.result .primary-btn{flex:none}.result .headline{display:flex;align-items:center;gap:9px;font-weight:700;font-size:clamp(24px,5vw,32px);letter-spacing:-.035em;line-height:1.2;margin-bottom:4px}.result .headline.red{color:var(--blue-text)}.result .headline.yellow{color:var(--yellow-text)}.winner-disc{width:.7em;height:.7em;border-radius:50%;box-shadow:inset 0 0 0 2px #ffffffa6;flex:none}.draw-mark{display:inline-flex;gap:3px;flex:none}.result[data-celebrating] .headline{animation:winner-arrive .6s var(--ease-out) both}@keyframes winner-arrive{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}.result .detail{font-size:12.5px;color:var(--ink-soft)}.status-line{margin:0;min-height:1.4em;font-size:13.5px;color:var(--ink-soft);text-align:center}.share-card{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(360px,100%);padding-block:8px;box-sizing:border-box}.share-invite{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}.share-label{font-size:12px;color:var(--ink-soft)}.share-code{font-weight:600;font-size:clamp(22px,5vw,28px);letter-spacing:.14em;line-height:1.3;user-select:all;overflow-wrap:anywhere}.share-invite>div{min-width:0}.share-fallback{width:100%;font-size:12px;color:var(--ink-soft)}.share-link{box-sizing:border-box;width:100%;margin-top:6px;padding:10px;border:1px solid var(--line);border-radius:6px;background:transparent;font-size:12.5px}.share-timed{font-size:12px;color:var(--ink-soft);text-align:center}@media(max-width:420px){.game-head{gap:8px;flex-wrap:wrap}.code-chip{font-size:12px;letter-spacing:.1em}.chip-name{font-size:14px}.countdown{padding-inline:6px}}@media(max-height:700px){.home{gap:20px;padding-block:24px}.hero{gap:8px}.game-options{gap:20px}.join-game{padding-top:16px}}@media(prefers-reduced-motion:reduce){.victory-discs,.checker-burst{display:none}.result[data-celebrating] .headline,.disc,.countdown,.icon-btn,.ghost-btn,.primary-btn,.secondary-btn,.switch,.switch:after,.chip,.col-btn:before,.col-btn:after{animation:none;transition:none}}