:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#edf2e9;background:#091518;--gold:#edc979;--muted:#90a8a8}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 30%,#19373766,transparent 65%);min-height:100dvh}.app{max-width:1150px;margin:auto;padding:20px 26px 28px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff14;padding-bottom:18px}button,a,select,input{font:inherit}button,select{color:inherit;background:#14292d;border:1px solid #ffffff20;border-radius:12px;padding:11px 16px;min-height:44px;cursor:pointer}button:hover{border-color:var(--gold)}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button:disabled{opacity:.4;cursor:default}a{color:#cbd8d5;text-decoration:none;font-size:13px}.brand{letter-spacing:4px;font-size:13px;font-weight:750;color:var(--gold)}.brand span{display:block;font-size:8px;letter-spacing:3px;color:var(--muted);text-align:center;margin-top:4px}#help{border-radius:50%;width:42px;padding:0}.intro{display:flex;justify-content:space-between;align-items:center;padding:24px 0}.eyebrow{font-size:9px;letter-spacing:2.8px;color:var(--gold);font-weight:700;margin:0 0 8px}h1{font-size:48px;letter-spacing:-2px;line-height:1;margin:0;font-weight:600}h1 span{display:inline-grid;place-items:center;border:1px solid #edc97970;border-radius:50%;width:32px;height:32px;font-size:20px;margin-left:12px;vertical-align:middle;letter-spacing:0}.setup{display:flex;align-items:end;gap:12px}.setup label{display:grid;gap:5px;color:var(--muted);font-size:11px}select{max-width:290px;font-size:12px}.setup button{font-size:12px;color:var(--gold)}.scoreboard{display:grid;grid-template-columns:1fr 36px 1fr;align-items:center;gap:12px;margin-bottom:20px}.player{display:flex;gap:12px;align-items:center;border:1px solid #ffffff12;border-radius:16px;background:#14272b;padding:14px 18px;min-height:68px}.player.active{border-color:#edc97980;background:linear-gradient(100deg,#edc97912,#14272b)}.turn-light{height:7px;width:7px;border-radius:50%;background:#425554;flex-shrink:0}.active .turn-light{background:var(--gold);box-shadow:0 0 12px #edc97977}.player strong{display:block;font-size:14px}.player small{color:var(--muted);font-size:10px}.versus{text-align:center;font-size:10px;letter-spacing:2px;color:#66807f}.mini-balls{margin-left:auto;display:flex;flex-wrap:wrap;gap:3px;max-width:155px}.mini{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;font-size:8px;background:var(--ball);color:#101010;border:1px solid #ffffff40;font-weight:800}.mini.stripe{background:linear-gradient(#faf0d7 25%,var(--ball) 25%,var(--ball) 75%,#faf0d7 75%)}.mini.down{opacity:.15}.table-wrap{position:relative;filter:drop-shadow(0 24px 24px #0007)}canvas{display:block;width:100%;height:auto;touch-action:none;border-radius:25px}.table-mark{position:absolute;bottom:3.5%;left:50%;transform:translateX(-50%);font-size:7px;letter-spacing:4px;color:#d6b88799;pointer-events:none;white-space:nowrap}.status-row{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:56px;padding:5px 10px}.status-row p{margin:0;font-size:13px;color:#e5cf9b}#shotCount{font-size:11px;color:var(--muted);white-space:nowrap}.controls{display:flex;align-items:center;gap:28px;max-width:770px;margin:10px auto 0;background:#12282c;border:1px solid #ffffff12;border-radius:20px;padding:16px 22px}.aim>span,.power{font-size:9px;letter-spacing:1.8px;color:var(--muted)}.aim>div{display:flex;gap:5px;margin-top:5px}.aim button{font-size:21px;min-width:47px;padding:3px 12px}.power{flex:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}.power output{color:var(--gold);letter-spacing:0;font-size:13px}input[type=range]{width:100%;accent-color:var(--gold);height:26px;margin:0;cursor:pointer}#shoot,.primary{background:var(--gold);color:#172423;border:0;font-weight:750}#shoot{font-size:18px;min-width:145px;padding:18px 24px}#shoot span{margin-left:18px}.hint{font-size:11px;color:#789492;text-align:center;margin:17px 0}dialog{max-width:510px;width:calc(100% - 32px);background:#132a2e;color:#e8f0e8;border:1px solid #d5bc7966;border-radius:24px;padding:30px;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#020b10bd;backdrop-filter:blur(5px)}dialog h2{font-size:28px;letter-spacing:-1px}dialog p,dialog li{font-size:14px;line-height:1.7;color:#b9cccb}dialog ol{padding-left:18px}dialog li{margin-bottom:12px}dialog .close{float:right;font-size:22px;background:none;border:0;padding:0;min-width:40px}dialog>button{margin-top:10px;margin-right:5px}@media(max-width:650px){.app{padding:14px 10px}.intro{padding:20px 5px;gap:12px}h1{font-size:35px}.eyebrow{font-size:7px;letter-spacing:1.5px}.setup{display:grid;gap:6px}.setup select{max-width:180px;font-size:10px;padding:8px}.setup button{min-height:32px;padding:6px}.player{padding:10px;gap:7px;flex-wrap:wrap}.mini-balls{width:100%;max-width:none;margin-left:14px}.scoreboard{gap:4px;grid-template-columns:1fr 20px 1fr;margin-bottom:8px}.player strong{font-size:12px}.controls{gap:12px;padding:12px}.aim button{min-width:35px;padding:3px 8px}#shoot{min-width:86px;padding:16px 12px;font-size:15px}#shoot span{margin-left:3px}.status-row{padding:10px 4px}.status-row p{font-size:12px}.table-mark{display:none}}@media(max-height:550px) and (orientation:landscape){.app{max-width:900px;padding:8px 18px}header{padding-bottom:8px}.intro{padding:8px 0}h1{font-size:25px}.eyebrow,.brand span,.hint{display:none}.scoreboard{margin-bottom:4px}.player{padding:6px 14px;min-height:40px}.table-wrap{max-width:650px;margin:auto}.controls{margin-top:0;padding:5px 15px;max-width:650px}#shoot{padding:8px 20px}.status-row{min-height:35px}canvas{max-height:calc(100dvh - 220px);width:auto;max-width:100%;margin:auto}}

@media(min-width:651px) and (min-height:551px){header{padding-bottom:10px}.intro{padding:16px 0}h1{font-size:40px}.scoreboard{margin-bottom:12px}.table-wrap{max-width:min(100%,max(480px,calc((100dvh - 420px)*1.724)));margin:auto}.status-row{min-height:40px}.controls{padding:10px 20px}.hint{margin:8px 0}}
/* The entire play surface uses landscape space, including portrait phones. */
/* Keep the exit in the landscape header, with a clear label and touch target. */
.app header #exit{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:78px;min-height:44px;padding:0 12px;border:1px solid #e69c99;border-radius:10px;background:#49282c;color:#fff;font-size:14px;font-weight:750;text-decoration:none;box-sizing:border-box}
.app header #exit:hover{background:#69353b}.app header #exit:focus-visible{outline:3px solid #ffdd7c;outline-offset:2px}
html,body{width:100%;height:100%;overflow:hidden}
.app{position:fixed;inset:0;width:100dvw;height:100dvh;max-width:none;margin:0;padding:8px 12px;display:grid;grid-template-columns:minmax(0,1fr) 184px;grid-template-rows:48px minmax(0,1fr) 28px;gap:6px 12px;overflow:hidden}
body.portrait-table .app{inset:auto;left:100%;top:0;width:100dvh;height:100dvw;transform-origin:0 0;transform:rotate(90deg)}
.app header{grid-column:1 / -1;grid-row:1;padding:0 0 4px;min-width:0;gap:12px}
.app header .brand{margin:auto}.app header button{min-height:30px;width:34px;height:30px;padding:0;font-size:19px}.app header a{font-size:12px}
.app .table-wrap{grid-column:1;grid-row:2;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;width:100%;height:100%;max-width:none;margin:0;filter:drop-shadow(0 12px 12px #0005)}
.app canvas{max-height:none;max-width:none;flex:none;object-fit:contain;margin:0;border-radius:12px}
.app .table-mark{display:none}
.app .status-row{grid-column:1;grid-row:3;min-height:0;padding:0 4px;gap:6px}.app .status-row p{font-size:11px;line-height:1.2}.app #shotCount{font-size:10px}
.side-panel{grid-column:2;grid-row:2 / 4;display:flex;flex-direction:column;gap:7px;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:0 1px}
.side-panel .intro{display:block;padding:0}.side-panel .intro>.eyebrow,.side-panel .intro .eyebrow{display:none}.side-panel h1{font-size:24px;line-height:1;letter-spacing:-1px;margin-bottom:7px}.side-panel h1 span{width:23px;height:23px;font-size:15px;margin-left:8px}
.side-panel .setup{display:grid;grid-template-columns:1fr;gap:4px}.side-panel .setup label{font-size:0;gap:0}.side-panel select{width:100%;max-width:none;min-height:28px;height:28px;font-size:10px;padding:3px 6px;border-radius:8px}.side-panel .setup button{min-height:26px;font-size:10px;padding:4px 6px;border-radius:8px}
.side-panel .scoreboard{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0}.side-panel .versus{display:none}.side-panel .player{min-height:34px;padding:5px 7px;border-radius:9px;gap:7px;flex-wrap:wrap}.side-panel .player strong{font-size:11px}.side-panel .player small{font-size:9px}.side-panel .mini-balls{margin:0 0 0 14px;width:100%;gap:2px;max-width:none}.side-panel .mini{width:13px;height:13px;font-size:7px}.side-panel .mini-balls:empty{display:none}
.side-panel .controls{display:grid;grid-template-columns:1fr 65px;width:100%;gap:6px;margin:auto 0 0;padding:8px;border-radius:12px;max-width:none}.side-panel .aim{grid-column:1;grid-row:1}.side-panel .aim>span{font-size:7px;letter-spacing:1px}.side-panel .aim>div{margin-top:3px;gap:4px}.side-panel .aim button{padding:0;min-width:30px;min-height:30px;width:30px;height:30px;font-size:18px}.side-panel .power{grid-column:1 / -1;grid-row:2;font-size:8px;gap:0;letter-spacing:1px}.side-panel input[type=range]{height:24px}.side-panel #shoot{grid-column:2;grid-row:1;min-width:0;min-height:44px;height:44px;padding:0 5px;font-size:13px;border-radius:9px}.side-panel #shoot span{margin-left:2px}.side-panel .hint{display:block;font-size:9px;line-height:1.3;margin:0;text-align:center}
@media(max-width:950px),(max-height:500px){.app{grid-template-columns:minmax(0,1fr) 160px;gap:4px 8px;padding:6px 8px;grid-template-rows:32px minmax(0,1fr) 26px}.app .brand span{display:none}.side-panel{gap:4px}.side-panel .hint{display:none}.side-panel .controls{padding:6px}}
@media(max-height:360px), (orientation:portrait) and (max-width:360px){.side-panel h1{display:none}.side-panel .mini-balls{width:auto;margin-left:auto}.side-panel .mini{width:10px;height:10px;font-size:6px}.side-panel .player{min-height:30px}.side-panel .controls{margin-top:auto}}

/* Compact mobile sidebar: the turn strip already identifies the game context. */
@media(max-width:950px),(max-height:500px){.side-panel .intro>div:first-child{display:none}}

/* Image-based entry choices, shared with keyboard and touch navigation. */
#billiardsMode{box-sizing:border-box;width:min(850px,96vw);max-width:96vw;max-height:96dvh;padding:24px 32px;border:1px solid #d9b45a66;background:radial-gradient(ellipse at top,#173b43,#071018 75%);text-align:center;overflow:auto}
#billiardsMode::backdrop{background:#03090ff5}
#billiardsMode .billiards-mode-choice{display:block;width:100%;padding:0;margin:12px auto;border:0;background:transparent;box-shadow:none;transition:transform .2s,filter .2s;cursor:pointer}
.billiards-mode-choice img{display:block;width:100%;max-height:30dvh;object-fit:contain}
#billiardsMode .billiards-mode-choice:focus-visible{outline:2px solid #ffe08a;outline-offset:4px;transform:scale(1.04)}
@media(hover:hover){#billiardsMode .billiards-mode-choice:hover{transform:scale(1.04);filter:drop-shadow(0 0 12px #eabb4666)}}
#billiardsMode .billiards-mode-choice:active{transform:scale(.98)}
#modeExit{display:inline-block;padding:10px 24px;color:#ffe08a;text-decoration:none}
@media(prefers-reduced-motion:reduce){#billiardsMode .billiards-mode-choice{transition:none}}