:root{color-scheme:dark;--bg:#101b20;--panel:#17272d;--panel2:#1b2e34;--line:#ffffff12;--text:#f3eee2;--muted:#95a9ab;--gold:#e4b978;--mint:#8fcab7;--red:#f39180}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 38% 30%,#1d3339 0,#101b20 62%);font:14px/1.5 'Segoe UI',Arial,sans-serif;color:var(--text);min-height:100vh}button,input,select{font:inherit}button,a,select,input{touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button{transition:background .16s,transform .16s,border-color .16s}button:active:not(:disabled){transform:translateY(1px)}a{color:var(--mint)}.topbar{height:92px;padding:0 5.2%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:13px;align-items:center;color:var(--text);text-decoration:none;letter-spacing:4px;font-size:24px;font-weight:650;line-height:1.1}.brand small{display:block;font-size:8px;letter-spacing:3.3px;margin-top:7px;color:var(--muted)}.brand-ball{display:grid;place-items:center;background:#ece6d6;color:#18252a;border-radius:50%;width:42px;height:42px;font:700 23px Georgia;box-shadow:inset -4px -4px 0 #b8b5ab}.local-badge{font-size:10px;letter-spacing:1.7px;color:var(--muted);display:flex;gap:9px;align-items:center}.local-badge i,.table-footer i{display:inline-block;background:#86c9a9;width:6px;height:6px;border-radius:50%;box-shadow:0 0 12px #86c9a94f}.text-button{background:none;border:0;padding:6px 0;color:var(--muted);font-size:12px}.text-button:hover:not(:disabled){color:var(--text)}#help-open span{display:inline-grid;place-items:center;border:1px solid #ffffff30;border-radius:50%;width:19px;height:19px;margin-left:10px}main{max-width:1720px;margin:auto;padding:42px 5.2% 0}.heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}.eyebrow{font-size:9px;font-weight:650;letter-spacing:2px;color:var(--gold);margin:0 0 10px}.heading h1{font:400 clamp(28px,3.2vw,46px)/1.1 Georgia,'Times New Roman',serif;letter-spacing:-1px;margin:0}.subheading{color:var(--muted);font-size:13px;margin:13px 0 0}.mode-switch{display:flex;flex-shrink:0;padding:5px;background:#0c15194d;border:1px solid var(--line);border-radius:8px}.mode-switch button{border:0;background:none;border-radius:5px;padding:11px 19px;color:var(--muted);font-size:12px}.mode-switch button.selected{background:#31454a;color:#f3eee2;box-shadow:0 2px 6px #0002}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:26px;align-items:start}.table-column{min-width:0}.scoreboard{display:grid;grid-template-columns:1fr 80px 1fr;gap:12px;align-items:center;padding:14px 20px 20px}.player{display:flex;align-items:center;gap:12px;color:var(--muted);min-width:0}.player:last-child{justify-content:flex-end;text-align:right}.player strong{font-weight:550;font-size:13px;white-space:nowrap}.player small{display:block;font-size:10px;color:var(--muted);margin-top:2px}.player.active strong{color:var(--text)}.player-initial{display:grid;place-items:center;flex-shrink:0;height:32px;width:32px;border:1px solid #ffffff18;border-radius:50%;font-size:9px;letter-spacing:1px}.player.active .player-initial{border-color:#e4b97870;color:var(--gold);box-shadow:0 0 20px #e4b9780b}.score-center{text-align:center}.score-center span{display:block;font-size:8px;letter-spacing:2px;color:var(--gold)}.score-center strong{display:block;font:27px/1.05 Georgia;margin:5px 0 3px}.score-center small{font-size:7px;color:var(--muted);letter-spacing:2px}.mini-balls{display:flex;max-width:85px;flex-wrap:wrap;gap:3px}.mini-ball{width:13px;height:13px;border-radius:50%;box-shadow:inset -2px -2px 2px #0006;display:inline-block}.mini-ball.gone{opacity:.16}.table-shell{position:relative;border-radius:15px;overflow:hidden;background:radial-gradient(ellipse,#1c4141,#112c30 75%);box-shadow:0 25px 70px #0003,0 1px 0 #ffffff0a inset;border:1px solid #ffffff08}canvas{display:block;width:100%;height:auto;aspect-ratio:1500/850;touch-action:none;outline:none}.table-footer{display:flex;justify-content:space-between;padding:0 27px 20px;color:#94b2b1;font-size:8px;letter-spacing:1.8px}.table-footer i{width:4px;height:4px;margin-right:7px}.table-banner{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);padding:17px 26px;max-width:90%;text-align:center;background:#10252dea;border:1px solid #e4b97870;box-shadow:0 6px 40px #0006;border-radius:8px;font:24px Georgia;color:var(--text);pointer-events:none}.status-panel{display:flex;gap:13px;align-items:center;padding:22px 5px;border-bottom:1px solid var(--line);min-height:94px}.status-mark{width:32px;height:32px;display:grid;place-items:center;background:#ffffff08;border:1px solid #ffffff10;border-radius:50%;color:var(--gold);font-size:18px;flex-shrink:0}.status-panel strong{font-size:13px;font-weight:500}.status-panel p{margin:3px 0 0;font-size:11px;color:var(--muted)}.status-panel>button{margin-left:auto;white-space:nowrap}.practice-bar{display:flex;align-items:center;gap:15px;padding:19px 4px;flex-wrap:wrap}.practice-bar label{font-size:8px;letter-spacing:1.8px;color:var(--muted)}select{background:#1c2b31;border:1px solid #ffffff18;border-radius:5px;padding:8px 28px 8px 10px;color:#dedfd7;font-size:11px;max-width:100%}.practice-bar>button:last-child{margin-left:auto}.training-note{margin-top:8px;padding:18px 20px;background:#ffffff03;border:1px solid var(--line);border-radius:7px}.training-note>span{font-size:8px;letter-spacing:1.6px;color:var(--gold)}.training-note p{font-size:11px;color:var(--muted);margin:8px 0 0}.training-note b{color:#b9ccc6;font-weight:500}.controls{background:linear-gradient(150deg,#22363b,#192a30);border:1px solid #ffffff0e;border-radius:11px;padding:24px;box-shadow:0 18px 45px #0001}.control-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:17px;margin-bottom:19px}.control-heading .eyebrow{margin:0;font-size:8px}.step-dot{font:16px Georgia;color:#b0c4c1}.aim-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px;gap:10px}.aim-row strong,.label-row strong,.label-row label{font-size:12px;font-weight:500}.aim-row small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.outline-button{background:#ffffff03;border:1px solid #ffffff25;border-radius:5px;font-size:10px;padding:8px 10px;white-space:nowrap}.outline-button:hover{background:#ffffff09}.outline-button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}.label-row{display:flex;justify-content:space-between;align-items:center;gap:10px}output{font:30px Georgia;color:var(--gold)}output span{font:11px 'Segoe UI';margin-left:3px;color:#b6bcae}input[type=range]{width:100%;margin:18px 0 10px;accent-color:var(--gold);height:5px;cursor:pointer}.scale{display:flex;justify-content:space-between;color:#7f979a;font-size:7px;letter-spacing:1.4px}.power-presets{display:flex;gap:7px;margin:19px 0 25px}.power-presets button{flex:1;background:none;border:1px solid #ffffff16;padding:7px 0;border-radius:5px;font-size:10px;color:var(--muted)}.power-presets button.selected{color:var(--gold);border-color:#e4b97860;background:#e4b9780a}.spin-control{padding-top:21px;border-top:1px solid var(--line)}.spin-control .text-button{font-size:10px}.spin-layout{display:flex;align-items:center;gap:23px;margin:20px 0 25px}.spin-widget{position:relative;text-align:center;padding:17px 0;width:88px;flex-shrink:0}.spin-north,.spin-south{position:absolute;left:0;right:0;color:#8aa3a4;font-size:6px;letter-spacing:1.3px}.spin-north{top:0}.spin-south{bottom:0}.spin-ball{display:block;position:relative;width:86px;height:86px;border:0;border-radius:50%;background:radial-gradient(circle at 33% 25%,#fff 0,#f4f3e9 35%,#c6c6bd 75%,#767e7a 100%);box-shadow:0 7px 15px #0006,inset -3px -5px 7px #5d676433;touch-action:none}.cross{position:absolute;background:#53635a22;pointer-events:none}.cross-h{left:17%;width:66%;height:1px;top:50%}.cross-v{top:17%;height:66%;width:1px;left:50%}#spin-dot{position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:#b8523f;box-shadow:0 0 0 3px #b8523f22;z-index:2}.spin-readout strong{display:block;font-size:12px;font-weight:500}.spin-readout small{color:var(--muted);font-size:9px;display:block;margin-top:4px;min-height:26px}.spin-directions{display:flex;gap:4px;margin-top:9px}.spin-directions button{height:23px;width:23px;border:1px solid #ffffff17;background:none;color:var(--muted);border-radius:4px;font-size:12px}.shoot-button{width:100%;padding:15px 15px;background:var(--gold);border:1px solid #f6cc8f;border-radius:6px;color:#283132;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:650;box-shadow:0 4px 15px #e4b97814}.shoot-button:hover:not(:disabled){background:#efc78a}.shoot-button:disabled{opacity:.48}kbd{font:7px 'Segoe UI';letter-spacing:1px;border:1px solid #28313235;border-radius:3px;padding:3px 5px}.gesture-tip{font-size:9px;text-align:center;color:var(--muted);margin:12px 0 20px}.control-bottom{display:flex;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--line);gap:8px}.control-bottom button{font-size:9px}.control-bottom button[aria-pressed=true]{color:var(--mint)}.shot-stat{padding-top:19px}.shot-stat>span{font-size:7px;letter-spacing:1.7px;color:var(--muted)}.shot-stat>div{display:flex;justify-content:space-between;align-items:center;margin-top:11px}.shot-stat strong{font-size:12px;font-weight:400}.shot-stat small{color:var(--muted);font-size:9px}.page-footer{display:flex;justify-content:space-between;padding:30px 0 25px;gap:20px;font-size:9px;color:#6d868b}.page-footer .text-button{font-size:9px}#pocket-call{margin-bottom:18px}#pocket-call label{display:block;color:var(--gold);font-size:11px;margin-bottom:8px}#called-pocket{width:100%}dialog{border:1px solid #66847a55;border-radius:12px;padding:40px;color:var(--text);background:#1a2d33;width:min(770px,94vw);max-height:90vh;box-shadow:0 30px 120px #0008}dialog::backdrop{background:#071318cf;backdrop-filter:blur(6px)}dialog h2{font:34px Georgia;margin:10px 0 30px}dialog p,dialog li{font-size:13px;color:#adbfbe;line-height:1.8}dialog h3{font-size:14px;font-weight:500}.dialog-close{position:absolute;right:20px;top:15px;background:none;border:0;font-size:25px;color:var(--muted)}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.help-grid b{color:var(--gold);font-size:10px}.help-grid h3{margin:8px 0}.help-grid p{font-size:12px;margin:0}.shortcut-row{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:30px;padding-top:20px;color:var(--muted);font-size:10px}.shortcut-row kbd{border-color:#ffffff30;margin-right:5px}body.is-moving canvas{cursor:default}body.is-placing canvas{cursor:crosshair}body:not(.is-moving):not(.is-placing) canvas{cursor:crosshair}
@media(min-width:1600px){main{padding-top:48px}.play-layout{grid-template-columns:minmax(0,1fr) 310px;gap:34px}.controls{padding:28px}.scoreboard{padding-bottom:25px}.heading{margin-bottom:40px}}
@media(max-width:1150px){main{padding:30px 3% 0}.topbar{padding:0 3%;height:78px}.play-layout{grid-template-columns:minmax(0,1fr) 255px;gap:17px}.controls{padding:18px}.mini-balls{display:none}.scoreboard{padding-left:8px;padding-right:8px}.spin-layout{gap:14px}.heading h1{font-size:33px}}
@media(max-width:850px){.local-badge{display:none}.heading{align-items:flex-start}.mode-switch button{padding:9px 12px}.play-layout{grid-template-columns:1fr}.controls{display:grid;grid-template-columns:1fr 1fr;gap:16px 25px;padding:22px}.control-heading{grid-column:1/-1;margin:0;padding-bottom:10px}.aim-row{margin:0;grid-column:1/-1}.power-control{grid-column:1}.spin-control{grid-column:2;grid-row:3/5;border-top:0;padding:0}.power-presets{margin-bottom:0}.spin-layout{justify-content:center;gap:15px;margin-bottom:0}.shoot-button{grid-column:1}.gesture-tip{grid-column:1/-1;margin:0}.control-bottom{grid-column:1/-1;padding-bottom:10px}.shot-stat{display:none}.training-note{display:none}#pocket-call{grid-column:1/-1}.page-footer{padding-top:22px}}
@media(max-width:520px){.topbar{height:72px;padding:0 5%}.brand{font-size:20px}.brand-ball{width:35px;height:35px}main{padding:25px 3% 0}.heading{display:block;margin:0 10px 18px}.heading h1{font-size:30px}.eyebrow{font-size:7px}.subheading{font-size:11px}.mode-switch{margin-top:22px;width:max-content}.scoreboard{grid-template-columns:1fr 42px 1fr;padding:10px 4px 15px;gap:3px}.player{gap:7px}.player-initial{height:24px;width:24px;font-size:7px}.player strong{font-size:11px}.player small{font-size:8px}.score-center strong{font-size:22px}.score-center span{font-size:6px;letter-spacing:1px}.score-center small{font-size:5px}.table-footer{font-size:6px;letter-spacing:1px;padding:0 12px 12px}.table-banner{font-size:17px;padding:12px}.status-panel{padding:16px 8px;gap:9px}.status-panel strong{font-size:11px}.status-panel p{font-size:10px}.status-panel>button{font-size:10px}.practice-bar{gap:10px;padding:15px 7px}.practice-bar select{max-width:180px}.practice-bar>button{font-size:10px}.practice-bar label{font-size:7px}.controls{padding:19px;gap:17px}.spin-layout{gap:10px}.spin-widget{width:70px}.spin-ball{width:68px;height:68px}.spin-readout strong{font-size:10px}.spin-directions{gap:2px}.spin-directions button{width:20px;height:23px}.shoot-button{font-size:10px;padding:12px}.shoot-button kbd{display:none}.power-presets button{font-size:9px}.label-row label,.label-row strong{font-size:10px}.spin-control .text-button{font-size:8px}.page-footer{font-size:8px;gap:10px}.help-grid{grid-template-columns:1fr}dialog{padding:28px}dialog h2{font-size:29px}.shortcut-row{gap:12px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}