:root{--bg:#0f1613;--bg-2:#16201b;--panel:#1b2721;--panel-2:#22302a;--line:#ffffff17;--text:#eef2ee;--muted:#9fb0a6;--accent:#3fb27f;--accent-2:#2e8f63;--warn:#f2b134;--bad:#ef5d5d;--gold:#f2c230;--radius:12px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);-webkit-tap-highlight-color:transparent;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;margin:0}body{overscroll-behavior:none}button,input,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--line);background:var(--panel-2);touch-action:manipulation;border-radius:8px;padding:8px 12px;transition:background .15s,transform 50ms}button:hover:not(:disabled){background:#2a3a33}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible,svg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.primary{background:linear-gradient(180deg, var(--accent), var(--accent-2));color:#fff;border-color:#0000;font-weight:600}button.primary:hover:not(:disabled){background:linear-gradient(#4cc28d,#33996b)}button.ghost{background:0 0}button.small{padding:5px 10px;font-size:13px}button.big{padding:12px 22px;font-size:17px}button.link{color:var(--accent);background:0 0;border:none;padding:0;font-size:12px}button[aria-pressed=true]{border-color:var(--accent)}.muted{color:var(--muted)}.small{font-size:12px}.setup{background:radial-gradient(ellipse at top, #1d3a2b 0%, var(--bg) 60%);place-items:center;min-height:100%;padding:24px 16px;display:grid}.setup-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;width:min(560px,100%);padding:28px;box-shadow:0 20px 60px #00000073}.setup-hero svg{width:160px;margin:0 auto 8px;display:block}.setup-card h1{text-align:center;letter-spacing:.3px;margin:4px 0;font-size:28px}.setup-card>p{text-align:center;margin:0 0 20px}.setup-card>.field{margin-bottom:14px}.field input:disabled{opacity:.6}.field-row{grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;display:grid}.field{color:var(--muted);flex-direction:column;gap:6px;font-size:13px;display:flex}.field>span{align-items:center;gap:6px;display:flex}.field input,.field select{background:var(--bg-2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:10px;font-size:15px}.setup-actions{justify-content:space-between;align-items:center;margin-top:22px;display:flex}@media (width<=480px){.field-row{grid-template-columns:1fr}.setup-card{padding:20px}}.game{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.topbar{border-bottom:1px solid var(--line);background:var(--bg-2);align-items:center;gap:12px;padding:8px 12px;display:flex;position:relative}.menu{flex-shrink:0;gap:4px;display:flex}.main{flex:1;min-height:0;display:flex}.table-area{flex:1;min-width:0;min-height:0;position:relative}.table-wrap{position:absolute;inset:8px}.table-canvas{touch-action:none;cursor:crosshair;display:block}.panel{border-left:1px solid var(--line);background:var(--bg-2);flex-direction:column;flex-shrink:0;gap:12px;width:280px;padding:12px;display:flex;overflow-y:auto}.panel-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.scoreboard{flex:1;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;min-width:0;display:grid}.player-card{border:1px solid var(--line);background:var(--panel);border-radius:10px;align-items:center;gap:10px;min-width:0;padding:6px 10px;transition:border-color .2s,box-shadow .2s;display:flex}.player-card.right{text-align:right;flex-direction:row-reverse}.player-card.right .player-status{justify-content:flex-end}.player-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 0 18px #3fb27f40}.ball-swatch{border-radius:50%;flex-shrink:0;width:22px;height:22px;display:inline-block;box-shadow:inset -3px -4px 6px #00000059,0 1px 2px #00000080}.ball-swatch.small{width:12px;height:12px}.player-info{flex:1;min-width:0}.player-name{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.player-status{flex-wrap:wrap;align-items:center;gap:4px;min-height:18px;display:flex}.chip{white-space:nowrap;color:#8fe0b8;background:#3fb27f2e;border-radius:999px;padding:1px 7px;font-size:11px}.chip.warn{color:var(--warn);background:#f2b1342e}.sets{gap:3px;display:inline-flex}.set-dot{border:1px solid var(--muted);border-radius:50%;width:8px;height:8px}.set-dot.won{background:var(--gold);border-color:var(--gold)}.progress{background:#ffffff14;border-radius:2px;height:4px;margin-top:4px;overflow:hidden}.progress>div{background:var(--accent);height:100%;transition:width .4s}.player-card.right .progress>div{margin-left:auto}.score{font-variant-numeric:tabular-nums;text-align:center;min-width:2ch;font-size:30px;font-weight:700}.set-info{text-align:center;font-size:14px;font-weight:600}.set-info .muted{font-size:12px;font-weight:400}.control{flex-direction:column;gap:6px;display:flex}.control-head{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;justify-content:space-between;align-items:baseline;font-size:12px;display:flex}.control-head .value{color:var(--text);font-variant-numeric:tabular-nums;text-transform:none}.spin-svg,.elev-svg{touch-action:none;cursor:pointer;background:var(--panel);border:1px solid var(--line);border-radius:10px;width:100%}.spin-svg{aspect-ratio:1}.elev-svg{aspect-ratio:140/90}.spin-svg.disabled,.elev-svg.disabled{opacity:.5;cursor:default}.row-buttons{gap:6px;display:flex}.row-buttons>button{flex:1;padding:6px 4px}input.power{appearance:none;background:linear-gradient(90deg, #3fb27f, #f2c230 55%, #ef5d5d) 0 / var(--pct) 100% no-repeat, var(--panel);border:1px solid var(--line);touch-action:none;border-radius:13px;width:100%;height:26px}input.power::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border-radius:50%;width:26px;height:26px;box-shadow:0 1px 4px #0009}input.power::-moz-range-thumb{background:#fff;border:none;border-radius:50%;width:24px;height:24px}button.shoot{letter-spacing:.5px;padding:14px;font-size:18px}.history{border-top:1px solid var(--line);padding-top:8px}.history summary{cursor:pointer;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-size:12px}.history ol{flex-direction:column;gap:6px;margin:8px 0 0;padding:0;font-size:13px;list-style:none;display:flex}.history li{border-left:3px solid var(--line);padding-left:8px}.history li.good{border-left-color:var(--accent)}.history li.bad{border-left-color:var(--bad)}.history li small{color:var(--muted);display:block}.history .who{color:var(--muted)}.keys{margin:0}.announce{border:1px solid var(--line);text-align:center;pointer-events:none;background:#0e1612eb;border-radius:12px;flex-direction:column;align-items:center;gap:2px;max-width:min(90%,560px);padding:10px 18px;animation:.25s ease-out pop;display:flex;position:absolute;top:16px;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #00000080}.announce span{color:var(--muted);font-size:13px}.announce.good{border-color:var(--accent)}.announce.bad{border-color:var(--bad)}.announce.bad strong{color:#ff9b9b}.announce.good strong{color:#9be8c2}@keyframes pop{0%{opacity:0;transform:translate(-50%,-8px)}}.hint{color:var(--muted);pointer-events:none;white-space:nowrap;text-overflow:ellipsis;background:#0e1612bf;border-radius:999px;max-width:94%;padding:4px 12px;font-size:13px;position:absolute;bottom:14px;left:50%;overflow:hidden;transform:translate(-50%)}.hint.thinking{color:var(--text);border:1px solid var(--line);animation:1.4s ease-in-out infinite pulse}.hint.error{color:#ff9b9b;white-space:normal}@keyframes pulse{50%{opacity:.55}}.overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#00000073;place-items:center;display:grid;position:absolute;inset:0}.overlay-card{background:var(--panel);border:1px solid var(--line);text-align:center;border-radius:16px;padding:24px 32px;animation:.3s ease-out pop2;box-shadow:0 20px 60px #00000080}@keyframes pop2{0%{opacity:0;transform:scale(.95)}}.overlay-card h2{margin:0 0 6px}.trophy{font-size:44px}.final-score{font-variant-numeric:tabular-nums;margin:6px 0 16px;font-size:28px;font-weight:700}.dialog{background:var(--panel);max-width:min(640px,100vw - 32px);max-height:calc(100dvh - 32px);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:20px 24px}.dialog::backdrop{background:#0000008c}.dialog h2{margin-top:0}.rules h3,.dialog h3{color:#9be8c2;margin:16px 0 6px;font-size:15px}.rules p,.rules li{font-size:14px;line-height:1.5}.rules ul{padding-left:20px}.dialog-actions{justify-content:flex-end;gap:8px;margin-top:12px;display:flex}.overlay-card .dialog-actions{justify-content:center}.menu-toggle{display:none!important}@media (height<=560px) and (orientation:landscape){.topbar{padding:4px 8px}.score{font-size:22px}.player-card{padding:3px 8px}.set-info .muted,.keys,.history,.hint{display:none}.panel{gap:8px;width:220px;padding:8px}button.shoot{padding:10px}}@media (orientation:portrait),(width<=760px){.main{flex-direction:column}.panel{border-left:none;border-top:1px solid var(--line);width:auto;padding:8px 10px calc(8px + env(safe-area-inset-bottom));grid-template-columns:.8fr 1fr 1.25fr;grid-template-areas:"spin elev power""spin elev aim""spot spot spot""shoot shoot shoot";gap:8px 10px;display:grid;overflow:visible}.panel-grid{display:contents}.panel-grid>:first-child{grid-area:spin}.panel-grid>:last-child{grid-area:elev}.c-power{grid-area:power}.c-aim{grid-area:aim}.c-spot{grid-area:spot}.c-shoot{grid-area:shoot}.panel-grid .row-buttons,.history,.keys{display:none}.control-head{font-size:10px}.c-aim .row-buttons>button{padding:4px 0}button.shoot{padding:10px;font-size:16px}.hint{font-size:11px;bottom:4px}.announce{font-size:13px;top:6px}.topbar{gap:4px;padding:6px 8px}.menu{z-index:10;background:var(--panel);border:1px solid var(--line);border-radius:10px;flex-direction:column;padding:6px;display:none;position:absolute;top:calc(100% - 4px);right:8px;box-shadow:0 10px 30px #00000080}.menu.open{display:flex}.scoreboard{gap:6px}.player-card{gap:6px;padding:4px 6px}.ball-swatch{width:16px;height:16px}.score{font-size:22px}.set-info{font-size:12px}.menu-toggle{display:inline-flex!important}}