:root{--bg:#0b1020;--bg-2:#131a33;--panel:#161e3b;--line:#2a3566;--text:#e8ecff;--muted:#8f9acb;--x:#22d3ee;--o:#fb7185;--warn:#fbbf24;--radius:14px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{min-height:100vh;color:var(--text);background:radial-gradient(900px 500px at 15% -10%, #24306a55, transparent), radial-gradient(800px 500px at 100% 110%, #5b1f4a44, transparent), var(--bg);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}h1,h2,h3{margin:0}.btn{font:inherit;color:var(--text);background:var(--bg-2);border:1px solid var(--line);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:10px;padding:.65rem 1.1rem;font-weight:600;transition:transform .12s,background .12s,border-color .12s}@media (hover:hover){.btn:hover:not(:disabled){border-color:var(--muted);transform:translateY(-1px)}.dot.interactive.dot-free:hover .dot-body{fill:#fff3;stroke:var(--text)}}@media (pointer:coarse){.btn{min-height:44px}}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-color:#0000}.btn.small{padding:.4rem .8rem;font-size:.9rem}.btn:focus-visible,.dot:focus-visible{outline:2px solid var(--warn);outline-offset:2px}.error{color:#fecaca;background:#7f1d1d66;border:1px solid #b91c1c;border-radius:8px;margin:.5rem 0 0;padding:.5rem .75rem}.muted,.hint,.tagline{color:var(--muted)}.home{text-align:center;max-width:640px;margin:0 auto;padding:3rem 16px}.home h1{background:linear-gradient(90deg, var(--x), var(--o));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:clamp(2rem,6vw,3rem)}.home-actions{flex-wrap:wrap;justify-content:center;gap:.75rem;margin:1.5rem 0 2rem;display:flex}.rules{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.5rem}.rules ol{padding-left:1.2rem;line-height:1.55}.app{max-width:1100px;margin:0 auto;padding:16px}.top{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.top h1{font-size:1.3rem}.top-actions{gap:.5rem;display:flex}.layout{grid-template-columns:300px 1fr;align-items:start;gap:1.25rem;display:grid}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:.6rem;padding:1rem;display:flex}.scoreboard,.controls,.history-box{flex-direction:column;gap:.6rem;display:flex}.panel h3{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:.5rem;font-size:.85rem}.player{background:var(--bg-2);border:1px solid #0000;border-radius:10px;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.6rem;padding:.6rem .75rem;display:grid}.player.active{border-color:currentColor;box-shadow:0 0 18px -6px}.p-X{--mark:var(--x);color:var(--x)}.p-O{--mark:var(--o);color:var(--o)}.player .badge{width:28px;height:28px;color:var(--bg);background:var(--mark);border-radius:8px;place-items:center;font-weight:800;display:grid}.player span:nth-child(2){color:var(--text)}.player .count{color:var(--muted);font-size:.85rem}.player .actions-left{color:var(--warn);font-size:.85rem;font-weight:700}.die{color:#111a44;background:linear-gradient(145deg,#fff,#cdd5ff);border-radius:20px;align-self:center;place-items:center;width:96px;height:96px;margin:.4rem 0;font-size:3rem;font-weight:800;display:grid;box-shadow:0 10px 24px -8px #000,inset 0 -6px #aab4f0}.die-rolling{animation:.45s linear infinite tumble}@keyframes tumble{0%{transform:rotate(0)scale(1)}25%{transform:rotate(14deg)scale(1.08)translateY(-6px)}50%{transform:rotate(-10deg)scale(1)}75%{transform:rotate(8deg)scale(1.06)translateY(-4px)}to{transform:rotate(0)scale(1)}}.status{text-align:center;margin:0;font-weight:600}.counter{text-align:center;color:var(--warn);margin:0;font-weight:700}.action-note{text-align:center;color:var(--warn);margin:0;font-size:.9rem}.actions{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.history{flex-direction:column;gap:.3rem;margin:0;padding:0;font-size:.9rem;list-style:none;display:flex}.board-wrap{border:1px solid var(--line);background:linear-gradient(160deg,#1a2350,#121936);border-radius:22px;padding:10px;box-shadow:0 24px 60px -30px #000}.board{touch-action:manipulation;-webkit-tap-highlight-color:transparent;width:100%;height:auto;max-height:80vh;margin:0 auto;display:block}.tile{fill:#0f1630;stroke:var(--line);stroke-width:2px}.progress{fill:none;stroke:var(--muted);stroke-width:4px;stroke-linecap:round;transition:stroke-dasharray .35s}.progress-label{fill:var(--muted);text-anchor:middle;font-size:22px;font-weight:600}.cell.hot .tile{stroke:var(--warn);animation:1.2s ease-in-out infinite glow}.cell.hot .progress{stroke:var(--warn)}.cell.will-close .tile{stroke:#4ade80;stroke-width:4px}.cell.will-close .progress{stroke:#4ade80}@keyframes glow{50%{stroke-opacity:.35}}.cell.owned-X .tile{stroke:var(--x);fill:#0e2a3a}.cell.owned-O .tile{stroke:var(--o);fill:#35132a}.mark{fill:none;stroke-width:12px;stroke-linecap:round}.mark-X{stroke:var(--x)}.mark-O{stroke:var(--o)}.draw{stroke-dasharray:1;stroke-dashoffset:1px;animation:.5s ease-out forwards draw}.draw-late{animation-delay:.25s}@keyframes draw{to{stroke-dashoffset:0}}.win-line{stroke:#fde047;stroke-width:10px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1px;filter:drop-shadow(0 0 8px #fde047);animation:.8s ease-out .3s forwards draw}.dot-body{fill:#0000;stroke:var(--muted);stroke-width:3px;transition:fill .15s,r .15s}.hit{fill:#0000}.dot.interactive{cursor:pointer}.dot-X .dot-body{fill:var(--x);stroke:var(--x)}.dot-O .dot-body{fill:var(--o);stroke:var(--o)}.dot-pending .dot-body{stroke:#fff;stroke-dasharray:5 4;animation:.9s ease-in-out infinite pulse}@keyframes pulse{50%{r:19}}.modal{z-index:10;background:#060a18cc;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal-card{background:var(--panel);border:1px solid var(--line);text-align:center;z-index:2;border-radius:18px;width:100%;max-width:520px;padding:1.75rem;position:relative}.modal-card h2{margin-bottom:1rem;font-size:2rem}.modal-actions{flex-wrap:wrap;justify-content:center;gap:.6rem;display:flex}.confetti{pointer-events:none;position:absolute;inset:0;overflow:hidden}.confetti span{background:var(--x);width:10px;height:16px;animation:2.6s linear infinite fall;position:absolute;top:-20px}.confetti span:nth-child(3n){background:var(--o)}.confetti span:nth-child(3n+1){background:#fde047}@keyframes fall{to{transform:translateY(110vh)rotate(540deg)}}@media (width<=800px){.layout{flex-direction:column;align-items:stretch;gap:.75rem;display:flex}.panel{display:contents}.scoreboard{order:1;grid-template-columns:1fr 1fr;gap:.5rem;display:grid}.scoreboard .board-info{text-align:center;grid-column:1/-1;margin:0;font-size:.8rem}.player{grid-template-columns:auto minmax(0,1fr) auto;gap:0 .5rem;padding:.4rem .6rem}.player .badge{grid-row:span 2}.player span:nth-child(2){text-overflow:ellipsis;white-space:nowrap;grid-column:2/-1;overflow:hidden}.player .actions-left,.player .count{font-size:.78rem}.board-wrap{border-radius:16px;order:2;padding:4px}.board{max-height:62svh}.controls{z-index:5;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));background:var(--panel);border:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;order:3;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.25rem .75rem;display:grid;position:sticky;bottom:0;box-shadow:0 -14px 30px -16px #000}.controls>*{text-align:left;grid-column:2}.controls .die{border-radius:14px;grid-area:1/1/span 4;width:56px;height:56px;margin:0;font-size:1.8rem}.controls .actions,.controls .error{grid-column:1/-1}.controls .actions .btn{flex:auto}.history-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);order:4;padding:1rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}.stats{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:1.25rem;padding:1.25rem 1.5rem}.stats h3{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:1.25rem 0 .5rem;font-size:.85rem}.tiles{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:.6rem;margin:.9rem 0 1rem;display:grid}.tile-stat{background:var(--bg-2);border-radius:10px;flex-direction:column;gap:.15rem;padding:.7rem .85rem;display:flex}.tile-label{color:var(--muted);font-size:.8rem}.tile-value{font-size:1.75rem;font-weight:700;line-height:1.1}.part-win{--state:#4ade80}.part-loss{--state:#ef4444}.part-draw{--state:#94a3b8}.result-bar{gap:2px;height:28px;display:flex}.result-bar .part{background:var(--state);color:#0b1020;border-radius:4px;align-items:center;min-width:4px;padding-left:8px;font-size:.8rem;font-weight:700;display:flex;overflow:hidden}.legend{color:var(--muted);gap:1rem;margin:.6rem 0 0;padding:0;font-size:.85rem;list-style:none;display:flex}.legend li{align-items:center;gap:.4rem;display:flex}.swatch{background:var(--state);color:#0b1020;border-radius:4px;place-items:center;width:18px;height:18px;font-size:.75rem;font-weight:800;display:inline-grid}.streaks{color:var(--muted);flex-wrap:wrap;gap:1.5rem;margin:1rem 0 0;display:flex}.streaks strong{color:var(--text)}.matches{flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.matches li{background:var(--bg-2);border-radius:10px;grid-template-columns:5.5rem 3.5rem 1fr;align-items:center;gap:.6rem;padding:.55rem .75rem;font-size:.92rem;display:grid}.result-tag{color:var(--state);font-weight:700;display:inline-block}.match-score{font-variant-numeric:tabular-nums;font-weight:700}@media (width<=560px){.matches li{grid-template-columns:5rem 3rem}.matches li .muted{grid-column:1/-1}}.levels{border:0;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:1.25rem 0 0;padding:0;display:flex}.levels legend{color:var(--muted);margin:0 auto .5rem;padding:0;font-size:.85rem}.levels label{text-align:left;background:var(--bg-2);border:1px solid var(--line);cursor:pointer;border-radius:10px;grid-template-columns:auto 1fr;align-items:center;column-gap:.5rem;min-width:230px;padding:.6rem .9rem;display:grid}.levels label.selected{border-color:var(--x);box-shadow:0 0 14px -6px var(--x)}.levels label:has(input:focus-visible){outline:2px solid var(--warn);outline-offset:2px}.level-name{font-weight:700}.levels .muted{grid-column:2;font-size:.82rem}.progress-chart{--series-1:#3987e5;--surface:#161e3b;margin:1.25rem 0 0}.progress-chart figcaption{flex-wrap:wrap;align-items:baseline;gap:.6rem;display:flex}.progress-chart h3{margin:0}.chart-box{border-radius:10px;margin-top:.4rem;position:relative}.chart-box:focus-visible{outline:2px solid var(--warn);outline-offset:2px}.chart-box svg{width:100%;height:auto;display:block}.chart-box .grid{stroke:var(--line);stroke-width:1px}.chart-box .axis{fill:var(--muted);font-size:12px}.chart-box .crosshair{stroke:var(--muted);stroke-width:1px;stroke-dasharray:3 3}.chart-box .series-line{fill:none;stroke:var(--series-1);stroke-width:2px;stroke-linejoin:round;stroke-linecap:round}.chart-box .series-point{fill:var(--series-1);stroke:var(--surface);stroke-width:2px}.chart-box .series-point.active{stroke:var(--text)}.chart-box .latest-label{fill:var(--text);font-size:14px;font-weight:700}.chart-box .hit-area{fill:#0000;cursor:crosshair}.readout{background:var(--bg-2);border:1px solid var(--line);color:var(--muted);pointer-events:none;white-space:nowrap;z-index:1;border-radius:8px;flex-direction:column;align-items:center;padding:.25rem .6rem;font-size:.8rem;line-height:1.2;display:flex;position:absolute;top:0;transform:translate(-50%)}.readout strong{color:var(--text);font-size:1rem}.table-view{color:var(--muted);margin-top:.5rem;font-size:.85rem}.table-view summary{cursor:pointer}.table-view table{border-collapse:collapse;width:100%;margin-top:.4rem}.table-view caption{text-align:left;padding-bottom:.3rem}.table-view th,.table-view td{text-align:left;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;padding:.25rem .5rem}.levels.sizes label{flex:1 1 0;min-width:120px}.board-info{text-align:center;color:var(--muted);margin:0;font-size:.9rem}.part-local{--state:var(--text)}.tabs{flex-wrap:wrap;justify-content:center;gap:.4rem;margin:1.5rem 0 .5rem;display:flex}.tabs [role=tab]{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;padding:.45rem 1.1rem;font-weight:700}.tabs [role=tab]:hover{color:var(--text)}.tabs [role=tab].selected{color:var(--text);background:var(--bg-2);border-color:var(--line)}.tabs [role=tab]:focus-visible{outline:2px solid var(--warn);outline-offset:2px}.tab-panel{padding-top:.5rem}.tab-panel>.muted{margin-top:1.5rem}.names{border:0;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:1.25rem 0 0;padding:0;display:flex}.names legend{color:var(--muted);margin:0 auto .5rem;padding:0;font-size:.85rem}.name-field{background:var(--bg-2);border:1px solid var(--line);text-align:left;border-radius:10px;align-items:center;gap:.6rem;min-width:230px;padding:.5rem .75rem;display:flex}.name-field:focus-within{border-color:var(--mark,var(--x));box-shadow:0 0 14px -6px var(--mark,var(--x))}.name-field .badge{width:26px;height:26px;color:var(--bg);background:var(--mark);border-radius:7px;place-items:center;font-weight:800;display:grid}.name-field:not([class*=p-]) .name-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.name-field .name-label{color:var(--muted);white-space:nowrap;font-size:.85rem}.name-field input{min-width:0;font:inherit;color:var(--text);background:0 0;border:0;outline:0;flex:1;padding:.2rem 0;font-weight:700}.name-field input::placeholder{color:var(--muted);font-weight:400}.name-hint{margin-top:-1rem;margin-bottom:1.5rem}.tiles.versus{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles.versus .tile-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.leaderboard h2+.muted{margin-bottom:1.25rem}.table-wrap{margin:.75rem 0 1.5rem;overflow-x:auto}.standings{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}.standings th,.standings td{border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;padding:.5rem .6rem}.standings th:first-child{text-align:left}.standings tbody th{color:var(--text);text-overflow:ellipsis;max-width:12rem;font-weight:700;overflow:hidden}.standings thead th{text-transform:uppercase;letter-spacing:.06em;font-size:.78rem}.standings thead button{font:inherit;color:var(--muted);cursor:pointer;text-transform:inherit;letter-spacing:inherit;background:0 0;border:0;padding:0}.standings thead th[aria-sort] button,.standings thead button:hover{color:var(--text)}.standings thead button:focus-visible{outline:2px solid var(--warn);outline-offset:2px}.standings tbody tr:last-child th,.standings tbody tr:last-child td{border-bottom:0}@media (width<=560px){.stats{padding:1rem}.standings th,.standings td{padding:.45rem .25rem;font-size:.9rem}.standings thead th{letter-spacing:0;white-space:normal;vertical-align:bottom;font-size:.66rem}.standings tbody th{max-width:6.5rem}}.goal{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--warn);text-align:center;border-radius:10px;flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;max-width:1100px;margin:0 auto 1rem;padding:.6rem 1rem;display:flex}.goal strong{color:var(--text)}.goal-hint{color:var(--muted)}.goal-cells{gap:4px;display:inline-flex}.goal-cell{background:linear-gradient(135deg, var(--x), var(--o));border-radius:4px;width:14px;height:14px}@media (width<=560px){.app{padding:8px}.goal-hint{display:none}.levels label{flex:100%;min-width:0}.top{gap:.5rem;margin-bottom:.6rem}.top h1{font-size:1.05rem}.goal{gap:.5rem;margin:0 0 .6rem;padding:.4rem .6rem;font-size:.85rem}.modal-card{padding:1.25rem}}.clock{font-variant-numeric:tabular-nums;color:var(--muted);margin:.25rem 0;font-weight:600}.clock.urgent{color:var(--o)}.invite-code{letter-spacing:.3em;font-variant-numeric:tabular-nums;margin:.75rem 0 .25rem;font-size:2rem;font-weight:700}.invite-link{overflow-wrap:anywhere;color:var(--x);margin:0 0 .75rem}.public-toggle{align-items:center;gap:.5rem;margin:.5rem 0 1rem;display:flex}.lobby{margin:0;padding:0;list-style:none}.lobby li{border-bottom:1px solid var(--line);align-items:center;gap:.75rem;padding:.5rem 0;display:flex}.lobby-host{font-weight:600}.lobby li .btn{margin-left:auto}.lang-switch{align-items:center;gap:.35rem;display:inline-flex}.home>.lang-switch{justify-content:flex-end;margin-bottom:.5rem;display:flex}.lang-btn{cursor:pointer;opacity:.55;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:1px solid #0000;border-radius:8px;place-items:center;min-width:40px;min-height:34px;padding:4px;transition:opacity .12s,border-color .12s;display:grid}.lang-btn.selected{opacity:1;border-color:var(--line);background:var(--bg-2)}.lang-btn:focus-visible{outline:2px solid var(--warn);outline-offset:2px}.flag{border-radius:3px;width:28px;height:20px;display:block;box-shadow:0 0 0 1px #0006}@media (hover:hover){.lang-btn:hover{opacity:1}}@media (pointer:coarse){.lang-btn{min-width:44px;min-height:44px}}.line-beam{fill:#fde047;opacity:0;filter:drop-shadow(0 0 14px #fde047)drop-shadow(0 0 28px #fde04788);transform-box:fill-box;transform-origin:50%;pointer-events:none;animation:1.7s ease-out forwards beam-sweep}.line-beam.axis-col{animation-name:beam-sweep-col}@keyframes beam-sweep{0%{opacity:.9;transform:scale(0,.5)}25%{opacity:.75;transform:scale(1)}40%{opacity:.45}55%{opacity:.7}to{opacity:0;transform:scaleY(.2)}}@keyframes beam-sweep-col{0%{opacity:.9;transform:scale(.5,0)}25%{opacity:.75;transform:scale(1)}40%{opacity:.45}55%{opacity:.7}to{opacity:0;transform:scaleX(.2)}}.dot-clearing .dot-body{animation:.6s ease-in forwards dot-dissolve;animation-delay:calc(.4s + var(--i,0) * 80ms)}@keyframes dot-dissolve{30%{fill:#fff;stroke:#fff;r:21;filter:drop-shadow(0 0 10px #fff)}to{fill:#0000;stroke:var(--muted);r:15;filter:none}}.shockwave{fill:none;stroke:#fff;stroke-width:3px;opacity:0;pointer-events:none;animation:.6s ease-out forwards dot-shockwave;animation-delay:calc(.4s + var(--i,0) * 80ms)}@keyframes dot-shockwave{0%{opacity:.9;r:15}to{opacity:0;r:48}}.cell-reopening .mark{transform-box:fill-box;transform-origin:50%;animation:.5s ease-in 1.1s forwards mark-vanish}@keyframes mark-vanish{to{opacity:0;scale:.3}}.dot-X{--intense:#00f0ff}.dot-O{--intense:#ff2d55}.dot-fading .dot-body{animation:1.1s ease-in-out forwards dot-fade-out;animation-delay:calc(var(--i,0) * 90ms)}@keyframes dot-fade-out{18%{fill:var(--intense);stroke:#fff;r:20;filter:drop-shadow(0 0 10px var(--intense)) drop-shadow(0 0 18px var(--intense))}45%{fill:var(--intense);stroke:var(--intense);r:19;filter:drop-shadow(0 0 8px var(--intense))}to{fill:#0000;stroke:var(--muted);r:15;filter:none}}@keyframes plain-fade{to{opacity:0}}@media (prefers-reduced-motion:reduce){.line-beam,.shockwave{display:none}.dot-leaving .dot-body,.cell-reopening .mark{animation-name:plain-fade!important;animation-duration:.3s!important;animation-delay:0s!important}}