:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#f4f6f8;--surface:#fff;--surface-2:#eef1f4;--text:#1f2a30;--text-muted:#5d6b75;--border:#d8dee4;--focus:#f0a020;--left:#1f9d55;--left-soft:#1f9d5529;--right:#2b72d6;--right-soft:#2b72d629;--danger:#d33f49;--cell-a:#e3e8ec;--cell-b:#d3dadf;--outline:#9aa6af;--ball-common:#262c31;--ball-key:#e5484d;--ball-add:#2fae62;--ball-del:#f2c230;--ball-flip:#3b8ae6;--ball-outline:#00000040;--ball-symbol:#fff;--ball-symbol-dark:#3a2f05;--radius:12px;--shadow:0 1px 2px #0000000f, 0 4px 16px #0000000f;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,PingFang SC,Microsoft YaHei,sans-serif;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#14181d;--surface:#1d232a;--surface-2:#252c34;--text:#e6ebef;--text-muted:#9aa7b1;--border:#333c46;--left:#34c173;--left-soft:#34c1732e;--right:#4c8ff0;--right-soft:#4c8ff033;--cell-a:#2a323b;--cell-b:#232a32;--outline:#56626d;--ball-common:#0b0e11;--ball-outline:#ffffff38;--shadow:0 1px 2px #0000004d, 0 4px 16px #0000004d}}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{-webkit-tap-highlight-color:transparent}h1,h2{margin:0;line-height:1.2}button,input,select{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.btn{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;padding:.65rem 1.1rem;font-weight:600;transition:transform 80ms,background .15s,border-color .15s}.btn:hover:not(:disabled){border-color:var(--outline)}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.5;cursor:default}.btn-primary{background:var(--text);border-color:var(--text);color:var(--bg)}.btn-primary:hover:not(:disabled){border-color:var(--text);opacity:.9}.btn-ghost{color:var(--text-muted);background:0 0;border-color:#0000}.btn-ghost:hover:not(:disabled){color:var(--text);background:var(--surface-2);border-color:#0000}.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.field{gap:.35rem;display:grid}.field>span{font-size:.9rem;font-weight:600}.field input,.field select{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);width:100%;padding:.6rem .8rem}.field small{color:var(--text-muted)}.custom-ai{gap:1rem;margin-bottom:1rem;display:grid}.field .field-error{color:var(--danger)}.checkbox{cursor:pointer;align-items:flex-start;gap:.7rem;display:flex}.checkbox input{width:1.2rem;height:1.2rem;accent-color:var(--text);margin-top:.15rem}.checkbox small{color:var(--text-muted);display:block}.segmented{border:0;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem;padding:0;display:flex}.segmented legend{margin-bottom:.4rem;font-weight:600}.segmented label{flex:1}.segmented input{opacity:0;position:absolute}.segmented span{text-align:center;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;padding:.5rem;display:block}.segmented input:checked+span{background:var(--text);color:var(--bg);border-color:var(--text)}.segmented input:focus-visible+span{outline:3px solid var(--focus)}.dialog{background:var(--surface);color:var(--text);border:0;border-radius:18px;width:min(92vw,440px);padding:0;box-shadow:0 20px 60px #0000004d}.dialog::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0a0e1273}.dialog[open]{animation:.25s cubic-bezier(.2,1.4,.4,1) pop}@keyframes pop{0%{opacity:0;transform:scale(.9)}}.dialog-body{gap:1rem;padding:1.5rem;display:grid}.dialog-body p{color:var(--text-muted);margin:0}.dialog-actions{flex-wrap:wrap;justify-content:flex-end;gap:.5rem;display:flex}.choice-row{grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}.result{gap:1rem;display:grid}.result h2{font-size:1.8rem}.result-left h2{color:var(--left)}.result-right h2{color:var(--right)}.home{align-content:center;justify-items:center;gap:2rem;min-height:100%;padding:2rem 1rem;display:grid}.home-hero{text-align:center}.home-balls{justify-content:center;gap:.4rem;margin-bottom:.5rem;display:flex}.logo{letter-spacing:-.03em;font-size:clamp(3rem,12vw,4.5rem);font-weight:800}.tagline{color:var(--text-muted);margin:.25rem 0 0;font-size:1.1rem}.home-main{gap:1.25rem;width:min(100%,420px);display:grid}.menu{gap:.6rem;display:grid}.menu .btn{padding:.85rem;font-size:1.05rem}.menu-secondary{flex-wrap:wrap;justify-content:center;gap:.25rem;display:flex}.banner{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem}.banner p{margin:0 0 .75rem}.banner-actions{justify-content:flex-end;gap:.5rem;display:flex}.page{max-width:720px;margin:0 auto;padding:1rem}.page-header{align-items:center;gap:.5rem;margin-bottom:1.5rem;display:flex}.page-header h1{font-size:1.6rem}.settings{gap:1.5rem;max-width:480px;display:grid}.about p{color:var(--text-muted)}.rules h2{margin:1.75rem 0 .5rem;font-size:1.15rem}.rules p,.rules li{color:var(--text)}.ball-list{gap:.6rem;padding:0;list-style:none;display:grid}.ball-list li{align-items:center;gap:.75rem;display:flex}.ball-list svg{flex:none}.game{--next-ball-height:52px;--win-bar-height:0px;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) 340px;height:100%;display:grid}.game.has-win-bar{--win-bar-height:22px}.game-main,.game-panel{grid-row:2}.game-main{grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;display:grid}.win-bar{height:var(--win-bar-height);font-size:.75rem;font-weight:700;line-height:var(--win-bar-height);color:#fff;font-variant-numeric:tabular-nums;grid-column:1/-1;display:flex}.win-bar-left{background:var(--left);white-space:nowrap;padding-left:8px;transition:width .6s}.win-bar-right{background:var(--right);text-align:right;white-space:nowrap;flex:1;padding-right:8px}.game-board{place-items:center;min-width:0;min-height:0;padding:16px;display:grid}.game-panel{background:var(--surface);border-left:1px solid var(--border);flex-direction:column;gap:1rem;padding:1rem;display:flex;overflow-y:auto}.panel-top{align-items:center;gap:.5rem;display:flex}.panel-title{font-weight:700}.panel-bottom{margin-top:auto;display:flex}.players{gap:.5rem;display:grid}.player{border-radius:var(--radius);background:var(--surface-2);border:2px solid #0000;align-items:center;gap:.75rem;padding:.7rem .8rem;transition:border-color .2s,background .2s;display:flex}.player-left.is-turn{border-color:var(--left);background:var(--left-soft)}.player-right.is-turn{border-color:var(--right);background:var(--right-soft)}.player-dot{border-radius:3px;flex:none;width:14px;height:14px;transform:rotate(45deg)}.player-left .player-dot{background:var(--left)}.player-right .player-dot{background:var(--right)}.player-text{flex:1;min-width:0;display:grid}.player-text strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.player-status{color:var(--text-muted);font-size:.85rem}.pips{gap:4px;display:flex}.pip{background:var(--border);border-radius:50%;width:8px;height:8px}.player-left .pip.is-on{background:var(--left)}.player-right .pip.is-on{background:var(--right)}.next-ball{height:var(--next-ball-height);justify-content:center;align-items:center;gap:.75rem;padding:8px 16px 0;font-weight:600;display:flex}.next-ball-slot{place-items:center;width:40px;height:40px;display:grid}.next-ball svg{animation:.3s ease-out drop-in}@keyframes drop-in{0%{opacity:0;transform:translateY(-10px)}}.countdown{font-variant-numeric:tabular-nums;min-width:3ch;color:var(--text-muted)}.countdown.is-low{color:var(--danger);font-weight:700}.hint,.tutorial-progress,.motd,.time-limits{color:var(--text-muted);margin:0;font-size:.9rem}.tutorial{gap:.75rem;display:grid}.tutorial p{margin:0}.status{margin:0;font-weight:600}.status-busy:after{content:"";vertical-align:-.1em;border:2px solid;border-right-color:#0000;border-radius:50%;width:.8em;height:.8em;margin-left:.5em;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.status-error{color:var(--danger);gap:.75rem;display:grid}.status-error p{margin:0}.online{flex:1;grid-template-rows:auto auto 1fr;gap:.75rem;min-height:0;display:grid}.chat{grid-template-rows:1fr auto;gap:.5rem;min-height:160px;display:grid}.chat-log{background:var(--surface-2);border-radius:var(--radius);overflow-wrap:anywhere;margin:0;padding:.5rem;font-size:.9rem;list-style:none;overflow-y:auto}.chat-me strong{color:var(--left)}.chat-opponent strong{color:var(--right)}.chat-form{gap:.5rem;display:flex}.chat-form input{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);flex:1;min-width:0;padding:.5rem .7rem}.board{width:min(100%, calc(100dvh - 32px - var(--next-ball-height) - var(--win-bar-height)));aspect-ratio:1;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overflow:visible}.cell-a{fill:var(--cell-a)}.cell-b{fill:var(--cell-b)}.board-outline{fill:none;stroke:var(--outline);stroke-width:2px;pointer-events:none}.ejector{opacity:.45;outline:none;transition:opacity .2s}.ejector.is-lit{opacity:1}.ejector.is-active{cursor:pointer}.ejector-cell,.timer-cell{fill:var(--surface-2);stroke:var(--outline);stroke-width:2px}.ejector-water{opacity:.85}.ejector-left .ejector-water{fill:var(--left)}.ejector-right .ejector-water{fill:var(--right)}.ejector.is-active:hover .ejector-water,.timer.is-active:hover .timer-cell{filter:brightness(1.12)}.ejector:focus-visible .ejector-cell,.timer:focus-visible .timer-cell{stroke:var(--focus);stroke-width:8px}.ejector-arrow{fill:none;stroke-width:7px;stroke-linecap:round;stroke-linejoin:round}.ejector-left .ejector-arrow{stroke:var(--left)}.ejector-right .ejector-arrow{stroke:var(--right)}.ejector .ejector-arrow.is-under-water{stroke:#fff}.next-preview{opacity:.45}.line-highlight{pointer-events:none}.line-left{fill:var(--left-soft)}.line-right{fill:var(--right-soft)}.timer{outline:none}.timer.is-active{cursor:pointer}.timer-end{fill:none;stroke:var(--text);stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.timer-fill{opacity:.7}.timer-left{fill:var(--left)}.timer-right{fill:var(--right)}.ball circle:first-child{stroke:var(--ball-outline);stroke-width:1.5px}@media (width<=820px),(orientation:portrait){.game{grid-template-rows:auto auto 1fr;grid-template-columns:1fr;height:auto;min-height:100%}.game-panel{grid-row:3}.game-board{padding:8px}.board{width:min(100%,70dvh)}.game-panel{border-left:0;border-top:1px solid var(--border)}}@media (prefers-reduced-motion:reduce){.dialog[open],.next-ball svg{animation:none}}.fatal{text-align:center;max-width:32rem;margin:20vh auto 0;padding:0 1rem}.fatal p{color:var(--text-muted)}.link{color:inherit;cursor:pointer;background:0 0;border:0;padding:0;font-weight:600;text-decoration:underline}.field input[aria-invalid=true]{border-color:var(--danger)}