: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;border-radius:10px;padding:.65rem 1.1rem;font-weight:600;transition:transform .12s,background .12s,border-color .12s}.btn:hover:not(:disabled){border-color:var(--muted);transform:translateY(-1px)}.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}.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{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.interactive.dot-free:hover .dot-body{fill:#fff3;stroke:var(--text)}.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{grid-template-columns:1fr}.board-wrap{order:-1}}@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){.goal{margin:0 16px 1rem}}
