@charset "UTF-8";
:root{color-scheme:dark;--bg:#101a18;--panel:#1b2925;--cream:#f4ecd8;--muted:#a3b4a9;--gold:#d7b875;--line:#35463d;--green:#b4cf99}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 30% 25%,#23362c 0,transparent 55%),var(--bg);color:var(--cream);font-family:Arial,Helvetica,sans-serif;line-height:1.5}
button,input,select{font:inherit}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}
button,select{min-height:44px;border:1px solid var(--line);border-radius:5px;color:var(--cream);background:#24352d}
button{cursor:pointer;padding:10px 14px}button:hover:not(:disabled){border-color:var(--gold);background:#304438}button:disabled{opacity:.4;cursor:default}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
select{width:100%;padding:10px 30px 10px 12px;cursor:pointer}
input[type=range]{width:100%;accent-color:var(--gold);min-height:36px;margin:4px 0 0;cursor:pointer}
label{display:block;color:#c1cdc0;font-size:13px;margin:15px 0 6px}
button.primary{background:var(--gold);color:#17261d;border-color:var(--gold);font-weight:700}button.primary:hover:not(:disabled){background:#edcf8e}
kbd{font-size:10px;border:1px solid #60705f;border-radius:3px;padding:1px 4px;margin-left:4px}
.skip{position:absolute;top:-80px;left:10px;z-index:10;background:var(--cream);color:var(--bg);padding:12px}.skip:focus{top:5px}
[hidden]{display:none!important}
.masthead,main{width:min(1320px,calc(100% - 80px));margin:auto}
.masthead{padding:26px 0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);font-size:12px}
.masthead a{font-weight:700}.masthead>span{font-size:10px;letter-spacing:1.8px;color:var(--muted)}.masthead i{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin:0 12px}
.hero{display:flex;align-items:center;justify-content:space-between;padding:34px 0 28px;gap:20px}
.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--gold);margin:0 0 9px}
h1{font:clamp(42px,5.5vw,72px)/1 Georgia,serif;letter-spacing:-3px;margin:0}h1 em{color:var(--gold);font-weight:400}
.hero>p{font-family:Georgia,serif;color:var(--muted);font-size:17px;line-height:1.6;margin:0}
.hero>.game-intro{max-width:480px;font-family:Arial,Helvetica,sans-serif;font-size:14px}
.game{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:26px}.table-column{min-width:0}
.scoreboard{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);gap:16px;align-items:center;margin-bottom:18px}
.player{padding:12px 15px;border:1px solid var(--line);border-radius:6px;background:#15221d}.player.active{border-color:#90aa78;background:#223428}
.player-heading{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.player h2{font-size:14px;margin:0}
.turn-dot{width:6px;height:6px;border-radius:50%;background:#56665b}.active .turn-dot{background:var(--green);box-shadow:0 0 8px #b4cf9960}
.group{font-size:10px;margin-left:auto;color:var(--muted)}
.versus{display:grid;place-items:center;width:32px;height:32px;background:var(--cream);border:8px solid #0b100d;border-radius:50%;color:#101a18;font-weight:700;font-size:12px}
.ball-tray{display:flex;align-items:center;gap:5px;min-height:25px;margin-top:8px}
.mini-ball{display:inline-grid;place-items:center;flex:none;width:21px;height:21px;border-radius:50%;font:bold 10px Arial;color:#16211b;background:var(--ball,#f4ecd8);border:1px solid #ffffff55;box-shadow:inset -2px -3px 3px #0005}
.mini-ball>span{background:#f8f4e4;border-radius:50%;width:13px;height:13px;text-align:center;line-height:13px}
.mini-ball.stripe{background:linear-gradient(#f8f4e4 22%,var(--ball) 22% 78%,#f8f4e4 78%)}.mini-ball.potted{opacity:.17}
.open-tray{font-size:11px;letter-spacing:1px;color:#82998a}
.table-wrap{position:relative;border-radius:16px;box-shadow:0 22px 35px #0005;overflow:hidden}
canvas{display:block;width:100%;height:auto;aspect-ratio:1000/560;background:#246047;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:crosshair}
canvas:focus-visible{outline-offset:-5px}
.table-overlay{position:absolute;inset:0;background:#0d1914e8;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:16px}
.table-overlay h2{font:36px Georgia;margin:0}.table-overlay>p:not(.eyebrow){margin:8px 0 18px;color:var(--muted);max-width:430px}
.table-caption{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.8px;color:#8aa18e;padding:14px 4px}
.status-box{border-top:1px solid var(--line);display:flex;gap:13px;padding:17px 4px 0}.status-symbol{font:26px Georgia;color:var(--gold)}
.status-box h2{font-size:16px;margin:0 0 4px}.status-box p{font-size:13px;color:var(--muted);margin:0;min-height:40px}
.control-panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:19px;align-self:start}
.panel-heading{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding-bottom:13px}
.panel-heading .eyebrow{font-size:9px;margin:0;letter-spacing:1.3px}.panel-heading>span{font-size:9px;color:var(--muted);white-space:nowrap}
.setting-note{font-size:10px;line-height:1.5;color:var(--muted);margin:8px 0 18px}
.shot-controls{border-top:1px solid var(--line);padding-top:1px}
.label-row{display:flex;align-items:end;justify-content:space-between}.label-row output{font-size:17px;color:var(--gold)}
.power-scale{display:flex;justify-content:space-between;color:#8ea18f;font-size:8px;letter-spacing:1px}
.fine-aim{display:flex;align-items:center;justify-content:space-between;margin:14px 0 12px}.fine-aim button{font-size:24px;line-height:1;padding:2px;width:48px}.fine-aim span{font-size:11px;color:var(--muted)}
.shoot{width:100%;display:flex;justify-content:space-between;text-align:left;padding:13px 16px}
#place-cue{width:100%;margin-top:8px}
#shot-help{font-size:11px;color:var(--muted);line-height:1.6;margin:12px 0 16px}
.utility{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding-top:15px;border-top:1px solid var(--line)}.utility button{font-size:11px;padding:7px 5px}
.field-notes{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin:48px 0 30px;padding:30px 0;border-top:1px solid var(--line)}
.field-notes h2{font:29px/1.2 Georgia;margin:10px 0 12px}.field-notes>div>p:last-child{max-width:380px;color:var(--muted);font-size:13px}
details{align-self:start;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:18px 0;font-size:13px;font-weight:700;list-style:none;display:flex;justify-content:space-between}
summary::-webkit-details-marker{display:none}summary span{color:var(--gold)}
.rules-copy{font-size:12px;color:var(--muted);line-height:1.7;padding-bottom:10px}.rules-copy strong{color:var(--cream)}
.questions{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin:0 0 30px;padding:30px 0;border-top:1px solid var(--line)}
.questions h2{font:29px/1.2 Georgia;margin:10px 0 12px}.questions>div>p:last-child{max-width:380px;color:var(--muted);font-size:13px}
.faq-list{min-width:0}.faq-list details{border-bottom:0}.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{gap:15px;align-items:baseline}.faq-list summary::after{content:'+';color:var(--gold);flex:none}.faq-list details[open] summary::after{content:'−'}
.faq-list details>p{font-size:13px;color:var(--muted);line-height:1.7;margin:0;padding:0 0 18px}
footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:24px 0 32px;font-size:11px}footer>span{color:#79917e;letter-spacing:1.8px;font-size:9px}
.no-script{padding:20px;border:1px solid var(--gold)}
@media(min-width:1500px){.hero{padding-top:45px;padding-bottom:36px}}
@media(max-width:1000px){
 .masthead,main{width:calc(100% - 40px)}.game{grid-template-columns:minmax(0,1fr) 220px;gap:18px}.control-panel{padding:14px}
 .scoreboard{gap:7px;grid-template-columns:minmax(0,1fr) 27px minmax(0,1fr)}.versus{width:26px;height:26px;border-width:6px}.player{padding:10px}
 .group{width:100%;margin-left:13px}.mini-ball{width:18px;height:18px;font-size:9px}.ball-tray{gap:3px}
}
@media(max-width:760px){
 .masthead,main{width:calc(100% - 28px)}.masthead{padding:19px 0}.masthead>span{font-size:8px;letter-spacing:1px}
 .hero{padding:26px 0 23px}.hero>p{font-size:13px}.hero .eyebrow{font-size:8px}h1{font-size:46px}
 .game{grid-template-columns:1fr;gap:20px}.scoreboard{margin-bottom:14px;gap:10px}
 .player-heading{flex-wrap:nowrap}.group{width:auto;margin-left:auto}.player h2{font-size:13px}
 .mini-ball{width:21px;height:21px}.ball-tray{gap:5px}.control-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;padding:18px}
 .panel-heading{grid-column:1/-1}.control-panel>label,.control-panel>select,.control-panel>#difficulty-field,.setting-note{grid-column:1}
 .shot-controls{grid-column:2;grid-row:2/7;border-top:0;padding:0}
 .utility{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}#shot-help{margin-bottom:10px}
 .field-notes{gap:25px;margin-top:30px}.status-box p{min-height:20px}.table-wrap{border-radius:10px}
 .questions{grid-template-columns:1fr;gap:14px;padding-top:25px}.questions h2{font-size:26px}
}
@media(max-width:520px){
 .player-heading{flex-wrap:wrap}.group{width:100%;margin-left:13px}
 .ball-tray{display:grid;grid-template-columns:repeat(4,21px);gap:5px;min-height:47px;align-content:center}.open-tray{grid-column:1/-1}
}
@media(max-width:440px){
 .masthead>span{font-size:7px}.masthead i{margin:0 5px}.hero>p{display:none}h1{font-size:50px}
 .hero{display:block;padding:22px 0}.hero>.game-intro{display:block;font-size:13px;margin-top:12px}
 .player{padding:9px;min-width:0}.group{font-size:9px;width:100%;margin-left:11px}.player-heading{gap:5px;flex-wrap:wrap}.player h2{font-size:12px}
 .ball-tray{display:grid;grid-template-columns:repeat(4,18px);gap:4px;min-height:40px;align-content:center}.open-tray{grid-column:1/-1}.mini-ball{width:18px;height:18px;font-size:9px}
 .control-panel{padding:14px;gap:0 13px}.control-panel select{font-size:12px;padding-left:8px}
 .table-overlay h2{font-size:26px}.table-overlay>p:not(.eyebrow){font-size:11px;margin:3px 0 9px}.table-overlay .eyebrow{font-size:8px;margin-bottom:3px}
 .table-overlay button{font-size:12px;min-height:36px;padding:6px 14px}.field-notes{grid-template-columns:1fr;gap:15px}.field-notes h2{font-size:26px}
 .table-caption{font-size:8px;letter-spacing:1px}footer>span{display:none}.utility{gap:5px}.utility button{font-size:10px}.utility kbd{display:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}