@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@500&display=swap');
#break-help-tip{position:absolute;z-index:40;left:50%;bottom:28px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 300px);padding:11px 16px;border:1px solid #c6e5ff22;border-radius:12px;background:#10253666;backdrop-filter:blur(15px);color:#e4edf3;font-size:12px;line-height:1.8;text-align:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
#break-help-tip.visible{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s}
#break-help-tip .tip-keys{display:inline-flex;gap:4px;vertical-align:middle;white-space:nowrap}
#break-help-tip kbd{display:inline-grid;place-items:center;width:25px;height:25px;border:1px solid #ffffff40;border-radius:6px;background:#ffffff10;font:inherit;font-weight:600;line-height:1;color:white}
#help-tips,#power-bar{position:relative;width:36px;height:21px;flex:none;padding:0;border:0;border-radius:12px;background:#41515d;cursor:pointer}
#help-tips:after,#power-bar:after{content:'';position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:#e5f2fa;transition:transform .15s}
#help-tips[aria-checked="true"],#power-bar[aria-checked="true"]{background:#3387be}
#help-tips[aria-checked="true"]:after,#power-bar[aria-checked="true"]:after{transform:translateX(15px)}
#help-tips:hover,#power-bar:hover{filter:brightness(1.2)}
#power-bar-display[hidden]{display:none}
@media(max-width:650px){#break-help-tip{bottom:120px;max-width:calc(100vw - 36px)}}
@media(prefers-reduced-motion:reduce){#break-help-tip,#break-help-tip.visible{transition:none}}
:root{color-scheme:dark;font-family:'DM Sans',Arial,sans-serif;color:#f4f6f8;background:#202326}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;cursor:pointer}button:focus-visible,[tabindex]:focus-visible{outline:2px solid #68bcff;outline-offset:5px}#game{height:100dvh;min-height:400px;position:relative;overflow:hidden}#table{display:block;width:100%;height:100%;outline:none;touch-action:none}.bottom-panel{position:absolute;left:32px;right:32px;bottom:28px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.shot-control{order:0;width:270px;background:#141b23c7;border:1px solid #ffffff17;border-radius:9px;padding:16px 18px;backdrop-filter:blur(10px)}.power-row{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:1px;color:#d2dce5}.power-track{flex:1;height:6px;background:#ffffff24;border-radius:4px;overflow:hidden}#power-fill{height:100%;width:0;background:linear-gradient(90deg,#329cee,#9ddfff);border-radius:4px}#power-value{width:34px;text-align:right;font-variant-numeric:tabular-nums}.spin-control{order:1;width:118px;pointer-events:auto;text-align:center}.spin-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.eyebrow{font-size:10px;letter-spacing:1.5px;color:#c2cbd3;text-shadow:0 1px 6px #000}.spin-heading button{font-size:10px;letter-spacing:.7px;color:#c4d0d8;background:#141b23a6;border:1px solid #ffffff1a;padding:4px 6px;border-radius:4px}#spin{position:relative;width:92px;height:92px;margin:auto;border-radius:50%;background:radial-gradient(circle at 37% 28%,#fff 5%,#f1f3f4 44%,#c4cbd1 76%,#929ea9);box-shadow:0 4px 22px #0006,inset 0 0 1px 1px #fff;touch-action:none;cursor:crosshair}.spin-axis{position:absolute;background:#34455421}.spin-axis.horizontal{width:78%;height:1px;left:11%;top:50%}.spin-axis.vertical{height:78%;width:1px;left:50%;top:11%}#spin-dot{position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;background:#e95759;border:2px solid #fb9a9a;transform:translate(-50%,-50%);box-shadow:0 1px 4px #77282e44}#spin-label{display:block;font-size:11px;color:#c3cdd5;margin-top:10px;text-shadow:0 1px 7px #000}#toast{position:absolute;left:50%;top:12%;transform:translate(-50%,-10px);padding:12px 20px;background:#10171de8;border:1px solid #ffffff24;border-radius:8px;font-size:14px;opacity:0;transition:.3s;pointer-events:none;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}#touch-shoot{display:none}#webgl-error{position:absolute;inset:0;background:#202326;align-content:center;text-align:center;padding:30px}#webgl-error[hidden]{display:none}@media(pointer:coarse){#touch-shoot{display:block;position:absolute;right:28px;bottom:205px;background:#62bafa;color:#102233;border:0;border-radius:30px;padding:13px 30px;touch-action:none}}@media(max-width:600px){.bottom-panel{left:18px;right:18px;bottom:20px}.shot-control{width:min(52vw,250px);padding:13px}.power-row{gap:8px;font-size:10px}.spin-control{width:104px}#spin{width:78px;height:78px}}@media(max-height:550px){.bottom-panel{bottom:16px}.spin-heading{margin-bottom:7px}#spin{width:72px;height:72px}#spin-label{margin-top:6px}}

/* Minimal right-hand shot controls. */
.bottom-panel{left:auto;right:28px;bottom:26px;width:100px;display:flex;flex-direction:column;align-items:center;gap:18px}.shot-control{order:0;width:auto;padding:0;background:none;border:0;border-radius:0;backdrop-filter:none}.power-row{display:flex;flex-direction:column;gap:10px;font-size:13px;letter-spacing:0}.power-track{flex:none;display:flex;align-items:flex-end;width:7px;height:134px;background:#ffffff27;border-radius:4px;box-shadow:0 0 0 1px #10192333}#power-fill{width:100%;height:0;background:linear-gradient(0deg,#369eeb,#a6e1ff)}#power-value{width:auto;text-align:center;text-shadow:0 1px 8px #000}.spin-control{width:100px}#spin{width:88px;height:88px}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}#table.aiming{cursor:none}#settings{position:absolute;left:28px;bottom:26px;width:42px;height:42px;border:1px solid #ffffff25;border-radius:50%;background:#171f27b8;color:#d1dce4;font-family:'Segoe UI Symbol',sans-serif;font-size:25px;line-height:1}#settings:hover{background:#263947}#settings-panel{position:absolute;left:28px;bottom:82px;width:286px;padding:22px;background:#17212aef;border:1px solid #ffffff22;border-radius:12px;backdrop-filter:blur(14px)}#settings-panel[hidden]{display:none}#settings-title{font-size:16px;font-weight:500;margin:0 0 24px}.setting-value{display:flex;justify-content:space-between;font-size:14px;color:#c5d4df;margin-bottom:10px}#sensitivity-value{color:#8dcfff}#sensitivity{width:100%;accent-color:#74c4ff;margin:0}#settings-panel p{font-size:12px;line-height:1.6;color:#9bafbd;margin:18px 0 0}#touch-shoot{left:26px;right:auto;bottom:87px}@media(max-width:600px){.bottom-panel{left:auto;right:16px;bottom:20px;width:82px;gap:14px}.shot-control{width:auto;padding:0}.spin-control{width:82px}#spin{width:72px;height:72px}.power-track{height:108px}.power-row{font-size:12px}#settings{left:18px;bottom:20px}#settings-panel{left:18px;bottom:76px;width:min(286px,calc(100vw - 36px))}}@media(max-height:550px){.bottom-panel{bottom:16px;gap:12px}.power-track{height:92px}#spin{width:64px;height:64px}}

/* Fixed control geometry: changing digits and fill never reflows the meter. */
.bottom-panel{position:fixed;contain:layout style}.shot-control{width:64px;flex:none}.power-row{width:64px}.power-track{position:relative}#power-fill{position:absolute;inset:0;width:100%;height:100%;transform:scaleY(0);transform-origin:center bottom}#power-value{display:block;width:64px;height:20px;line-height:20px;font-variant-numeric:tabular-nums;white-space:nowrap;contain:layout paint}

#settings{display:grid;place-items:center;padding:0}#settings svg{display:block}#settings-panel{padding-top:22px}

/* Segmented yellow-to-red power gauge, filled downward like the reference. */
.power-track{width:16px;border:2px solid #68717b;background:linear-gradient(180deg,#756d274d,#68191a55);border-radius:4px;box-shadow:0 0 0 2px #18222ad9,inset 0 0 3px #000}
#power-fill{transform:none;clip-path:inset(0 0 100% 0);background:linear-gradient(180deg,#f9e443 0%,#ffc42c 30%,#f8871d 58%,#e72619 84%,#cb1016 100%);border-radius:1px}
.power-track::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0,transparent calc(10% - 1px),#30251270 calc(10% - 1px),#30251270 10%);pointer-events:none;box-shadow:inset 0 0 3px #0008}
#settings{position:absolute;display:flex;align-items:center;justify-content:center;padding:0;line-height:0;appearance:none}
#settings svg{position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%);flex:none}

#power-fill{clip-path:inset(100% 0 0 0);background:linear-gradient(0deg,#f9e443 0%,#ffc42c 30%,#f8871d 58%,#e72619 84%,#cb1016 100%)}
.power-track{background:linear-gradient(0deg,#756d274d,#68191a55)}
.toggle-setting{display:flex;align-items:center;justify-content:space-between;margin-top:22px;padding-top:18px;border-top:1px solid #ffffff18;font-size:14px;color:#c5d4df;cursor:pointer}
 .guideline-setting{margin-top:22px;padding-top:18px;border-top:1px solid #ffffff18}
#guideline-value{color:#8dcfff}
#guideline{display:block;width:100%;margin:0;accent-color:#74c4ff;cursor:pointer}
#guideline:focus-visible{outline:2px solid #8ed4ff;outline-offset:3px}
.guideline-ticks{display:flex;justify-content:space-between;margin:3px 7px 0;font-size:11px;color:#9bafbd}
.guideline-ticks span{position:relative;padding-top:10px;width:0;display:flex;justify-content:center}
.guideline-ticks span::before{content:'';position:absolute;top:0;width:1px;height:5px;background:#91a9ba80}
.guideline-ticks span:first-child{justify-content:flex-start}.guideline-ticks span:last-child{justify-content:flex-end}
.mode-button{display:block;width:100%;margin-top:18px;padding:11px 8px;border:1px solid #7398b044;border-radius:7px;background:#2b465a;color:#eef7ff;font-size:13px}.mode-button:hover{background:#345873}.mode-button.secondary{margin-top:8px;background:transparent;color:#b8cbd8}







/* Free Mode: a compact ball tray above a horizontal overhead table. */
#free-editor{position:absolute;z-index:5;top:20px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:14px 18px 10px;border:1px solid #ffffff18;border-radius:16px;background:#17212a80;box-shadow:0 8px 28px #0003;backdrop-filter:blur(18px)}
#free-editor[hidden],#free-ghost[hidden]{display:none}
.free-heading{font-size:10px;font-weight:700;letter-spacing:2px;color:#93a9b9;margin-bottom:12px}
.free-toolbar{display:flex;align-items:center;gap:20px}
#free-balls{display:flex;flex-wrap:wrap;gap:7px;max-width:620px;align-items:center}
.free-ball{flex:none;position:relative;display:grid;place-items:center;width:31px;height:31px;padding:0;border:0;border-radius:50%;color:#17202a;cursor:grab;touch-action:none;background:radial-gradient(circle at 30% 20%,#ffffff88,transparent 42%),var(--ball-color);box-shadow:inset -3px -4px 6px #0005,inset 1px 1px 2px #fff9,0 2px 3px #0007;transition:opacity .15s,outline-color .15s}
.free-ball.striped{background:radial-gradient(circle at 30% 20%,#ffffff88,transparent 42%),linear-gradient(0deg,#f8f7ee 0 24%,var(--ball-color) 24% 76%,#f8f7ee 76%)}
.free-ball span{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#fff;font-family:Arial,sans-serif;font-size:10px;font-weight:700;line-height:1}
.free-ball:hover,.free-ball.selected{outline:2px solid #8bd1ff;outline-offset:3px;opacity:1}
.free-ball.placed{opacity:.32}.free-ball.placed:hover{opacity:.8}
#free-ready{display:flex;align-items:center;gap:14px;padding:12px 18px;border:1px solid #a8d9fb44;border-radius:9px;background:#a4d8fc;color:#15232e;font-size:12px;font-weight:700;letter-spacing:1px;white-space:nowrap}
#free-ready:hover:not(:disabled){background:#c5e7ff}#free-ready:disabled{opacity:.3;cursor:default}
#free-hint{margin:12px 0 0;color:#a8b8c3;font-size:11px;line-height:1.4}
#free-ghost{position:fixed;z-index:20;pointer-events:none;transform:translate(-50%,-50%);outline:2px solid #b2e2bd;outline-offset:3px;cursor:grabbing}
#free-ghost.invalid{outline-color:#f07272;opacity:.65}
.free-setup .bottom-panel,.free-setup #touch-shoot{display:none}.free-setup #table{cursor:crosshair}
#settings-panel{z-index:8}#settings{z-index:9}
@media(max-width:820px){#free-editor{top:12px;padding:12px}.free-toolbar{gap:14px}#free-balls{max-width:300px;gap:6px}.free-ball{width:29px;height:29px}#free-ready{padding:12px;gap:8px}}
@media(max-width:430px){#free-balls{max-width:214px;gap:5px}.free-ball{width:26px;height:26px}.free-ball span{width:13px;height:13px;font-size:9px}#free-editor{max-width:calc(100% - 16px)}.free-toolbar{gap:10px}#free-ready{font-size:11px;padding:10px}}

.free-actions{display:flex;align-items:stretch;gap:8px;flex:none}
#free-reset{--hold-progress:0;position:relative;isolation:isolate;overflow:hidden;width:42px;min-height:42px;flex:none;padding:0;display:grid;place-items:center;border:1px solid #a8d9fb44;border-radius:9px;background:#a4d8fc;color:#15232e;touch-action:none;user-select:none}
#free-reset::before{content:'';position:absolute;inset:0;background:#5aafe9;transform:scaleY(var(--hold-progress));transform-origin:bottom;z-index:-1}
#free-reset:hover{background:#c5e7ff}#free-reset svg{display:block;pointer-events:none}
@media(max-width:430px){#free-balls{max-width:181px}.free-actions{gap:6px}#free-ready{gap:6px;padding:10px 8px}#free-reset{width:38px;min-height:38px}}

#settings-backdrop{position:absolute;inset:0;z-index:7;background:transparent}#settings-backdrop[hidden]{display:none}

#settings-panel{max-height:calc(100dvh - 106px);overflow-y:auto}
.background-setting{border-top:1px solid #ffffff18;margin-top:18px;padding-top:18px}
.background-actions{display:flex;gap:8px}.background-actions .mode-button{margin-top:0;flex:1;width:auto}
.background-setting small,#background-status{display:block;font-size:11px;line-height:1.5;color:#9bafbd;margin-top:10px}
.background-actions button:disabled{opacity:.45;cursor:wait}

.table-rotation-setting{margin-top:18px;padding-top:16px;border-top:1px solid #ffffff18}
.rotation-input{display:inline-flex;align-items:center;color:#8dcfff}
#table-rotation-value{width:76px;padding:3px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:#8dcfff;font:inherit;text-align:right;font-variant-numeric:tabular-nums;appearance:textfield}
#table-rotation-value::-webkit-inner-spin-button,#table-rotation-value::-webkit-outer-spin-button{appearance:none;margin:0}
#table-rotation-value:hover{border-color:#ffffff25}#table-rotation-value:focus{outline:1px solid #68bcff;background:#243641}
.rotation-actions{display:flex;gap:8px}.rotation-actions button{flex:1;padding:9px 5px;border:1px solid #ffffff25;border-radius:7px;background:#243641;color:#d8e8f2;font-size:13px}
.rotation-actions button:hover{background:#304956}

/* Background picker, anchored beside the settings wheel. */
#themes{position:absolute;z-index:9;left:80px;bottom:26px;width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid #ffffff25;border-radius:50%;background:#171f27b8;color:#d1dce4;line-height:0;appearance:none}
#themes svg{display:block}#themes:hover,#themes[aria-expanded="true"]{background:#263947}
#themes-backdrop{position:absolute;inset:0;z-index:7;background:transparent}
#themes-panel{position:absolute;z-index:8;left:28px;bottom:82px;width:min(702px,calc(100vw - 56px));display:grid;grid-template-columns:minmax(0,352fr) minmax(0,228fr) minmax(0,102fr);gap:10px;align-items:stretch}
#themes-panel[hidden],#themes-backdrop[hidden]{display:none}
.theme-window{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid #ffffff30;border-radius:14px;background:#26313b;box-shadow:0 12px 36px #0004}
#theme-preview,#theme-preview-old{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;user-select:none;will-change:transform}#theme-preview-old[hidden]{display:none}
.theme-caption{position:absolute;inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:28px 12px 10px;background:linear-gradient(transparent,#0a111bc9);pointer-events:none}
#theme-name{font-size:16px;font-weight:600;color:#fff;text-shadow:0 1px 4px #0008}
.theme-arrow{position:absolute;top:46%;transform:translateY(-50%);display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid #ffffff40;border-radius:50%;background:#15212b80;color:#fff;backdrop-filter:blur(10px)}
.theme-arrow:hover{background:#203c51b0}.theme-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}#theme-prev{left:10px}#theme-next{right:10px}
#theme-status{position:absolute;top:8px;left:8px;right:8px;font-size:11px;line-height:1.4;color:#fff;text-shadow:0 1px 3px #000;background:#1826319c;border-radius:6px;padding:6px 8px;backdrop-filter:blur(10px);pointer-events:none}#theme-status:empty{display:none}
#theme-select{pointer-events:auto;padding:8px 17px;border:1px solid #ffffff45;border-radius:9px;background:#ffffff20;backdrop-filter:blur(14px);color:#fff;font-weight:600;font-size:13px;box-shadow:0 2px 10px #0002}#theme-select:hover{background:#ffffff38}#theme-select:disabled{opacity:.5;cursor:wait}
#cloth-palette{display:flex;flex-direction:column;justify-content:space-between;padding:11px;border:1px solid #ffffff30;border-radius:14px;background:#17212a80;backdrop-filter:blur(18px);box-shadow:0 12px 36px #0003}
.cloth-row{display:flex;align-items:center;gap:7px}
.cloth-swatch{flex:none;width:23px;height:23px;border-radius:50%;padding:0;border:1px solid #ffffff40;background:var(--swatch);box-shadow:inset 0 1px 2px #ffffff15,0 1px 3px #0004;position:relative}
.cloth-swatch:hover{outline:1px solid #ffffffa0;outline-offset:2px}.cloth-swatch[aria-pressed="true"]{outline:1px solid #fff;outline-offset:0}
@media(max-width:650px){#themes{left:70px;bottom:20px}#themes-panel{left:18px;bottom:76px;width:calc(100vw - 36px);gap:8px}#cloth-palette{padding:clamp(5px,1.7vw,11px)}.cloth-row{gap:clamp(3px,1vw,7px)}.cloth-swatch{width:clamp(11px,3.5vw,23px);height:clamp(11px,3.5vw,23px)}#theme-name{font-size:13px}#theme-select{font-size:11px;padding:6px 9px}.theme-caption{padding:22px 8px 8px}.theme-arrow{width:27px;height:27px}#theme-prev{left:6px}#theme-next{right:6px}}

#cue-picker{min-height:0;display:flex;flex-direction:column;align-items:center;padding:9px 7px;border:1px solid #ffffff30;border-radius:14px;background:#17212a80;backdrop-filter:blur(18px);box-shadow:0 12px 36px #0003}
#cue-design-name{font-size:12px;color:#e4eef5;line-height:16px;font-variant-numeric:tabular-nums}
.cue-preview-stage{position:relative;flex:1;min-height:0;width:100%}#cue-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#cue-prev,#cue-next{position:absolute;top:50%;transform:translateY(-50%);width:22px;height:28px;display:grid;place-items:center;padding:0;border:1px solid #ffffff22;border-radius:8px;background:#15212b70;color:#fff;font-size:22px;line-height:1}#cue-prev{left:0}#cue-next{right:0}
#cue-select{margin-top:5px;width:100%;padding:6px 2px;border:1px solid #ffffff45;border-radius:8px;background:#ffffff20;backdrop-filter:blur(14px);color:#fff;font-size:11px}#cue-select:hover,#cue-prev:hover,#cue-next:hover{background:#ffffff38}
@media(min-width:651px) and (max-width:760px){.cloth-swatch{width:20px;height:20px}.cloth-row{gap:5px}#cloth-palette{padding:9px}}
@media(max-width:650px){#themes-panel{grid-template-columns:minmax(0,352fr) minmax(0,228fr) minmax(0,102fr);gap:6px}.cloth-swatch{width:clamp(9px,2.7vw,18px);height:clamp(9px,2.7vw,18px)}.cloth-row{gap:clamp(2px,.75vw,5px)}#cloth-palette{padding:clamp(4px,1.2vw,8px)}#cue-picker{padding:4px}#cue-prev,#cue-next{width:15px;height:22px;font-size:18px}#cue-select{font-size:9px;padding:4px 0}#cue-design-name{font-size:10px;line-height:12px}#theme-select{padding:5px 7px}#theme-name{font-size:11px}.theme-arrow{width:23px;height:23px}.theme-caption{padding:18px 6px 6px}}

/* Five compact color-family rows leave room for larger swatches. */
#cloth-palette{padding:12px}.cloth-swatch{width:27px;height:27px}.cloth-row{gap:8px}
#cue-picker{padding-bottom:10px}.cue-preview-stage{margin-top:4px}
@media(min-width:651px) and (max-width:760px){.cloth-swatch{width:25px;height:25px}.cloth-row{gap:7px}#cloth-palette{padding:10px}}
@media(max-width:650px){.cloth-swatch{width:clamp(12px,3.3vw,24px);height:clamp(12px,3.3vw,24px)}.cloth-row{gap:clamp(3px,.9vw,7px)}#cloth-palette{padding:clamp(4px,1.2vw,8px)}}

/* Six color rows, three shades each, in a narrower companion panel. */
#themes-panel{width:min(602px,calc(100vw - 56px));grid-template-columns:minmax(0,352fr) minmax(0,128fr) minmax(0,102fr)}
#cloth-palette{padding:10px}.cloth-row{justify-content:space-between;gap:0}
@media(max-width:650px){#themes-panel{width:calc(100vw - 36px)}#cloth-palette{padding:clamp(4px,1vw,8px)}.cloth-swatch{width:clamp(11px,3.5vw,25px);height:clamp(11px,3.5vw,25px)}}

/* Cloth circles are 5% smaller; table finishes form a separate six-choice column. */
.cloth-swatch{width:25.65px;height:25.65px}
#themes-panel{width:min(656px,calc(100vw - 56px));grid-template-columns:minmax(0,352fr) minmax(0,128fr) minmax(0,44fr) minmax(0,102fr)}
#table-finishes{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 7px;border:1px solid #ffffff30;border-radius:14px;background:#17212a80;backdrop-filter:blur(18px);box-shadow:0 12px 36px #0003}
.table-finish{flex:none;width:25.65px;height:25.65px;border:1px solid #ffffff40;border-radius:50%;padding:0;background:var(--finish);background-size:cover;box-shadow:inset 0 1px 2px #ffffff15,0 1px 3px #0004}
.table-finish:hover{outline:1px solid #ffffffa0;outline-offset:2px}.table-finish[aria-pressed="true"]{outline:1px solid #fff;outline-offset:0}
@media(min-width:651px) and (max-width:760px){.cloth-swatch,.table-finish{width:23.75px;height:23.75px}}
@media(max-width:650px){#themes-panel{width:calc(100vw - 36px);grid-template-columns:minmax(0,352fr) minmax(0,128fr) minmax(0,44fr) minmax(0,102fr)}.cloth-swatch,.table-finish{width:clamp(10.45px,3.325vw,23.75px);height:clamp(10.45px,3.325vw,23.75px)}#table-finishes{padding:clamp(4px,1vw,8px) 2px}}

#themes-panel{width:min(692px,calc(100vw - 56px));grid-template-columns:minmax(0,352fr) minmax(0,128fr) minmax(0,80fr) minmax(0,102fr)}
#table-finishes{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}.finish-column{display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-width:0}
#settings-panel{width:min(550px,calc(100vw - 56px));display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px}
.settings-gameplay{min-width:0}.graphics-settings{min-width:0;padding-left:20px;border-left:1px solid #ffffff20}.graphics-settings h2{font-size:14px;font-weight:500;color:#c5d4df;margin:0 0 24px}
.graphics-settings label{display:block;font-size:12px;color:#b8cbd8;margin:0 0 9px}.graphics-settings select{width:100%;padding:9px;border:1px solid #ffffff25;border-radius:7px;background:#253540;color:#e1edf5;font:inherit;font-size:12px;margin:0 0 24px}.graphics-settings select:focus-visible{outline:2px solid #68bcff}
.graphics-brightness{display:flex;justify-content:space-between;gap:6px}.graphics-brightness output{color:#8dcfff;font-size:12px}#graphics-brightness{width:100%;accent-color:#74c4ff;margin:0 0 14px}.graphics-settings small{display:block;color:#9bafbd;font-size:11px;line-height:1.5;margin-top:16px}
@media(max-width:650px){#themes-panel{width:calc(100vw - 36px)}#table-finishes{gap:4px}.table-finish{width:clamp(9px,2.9vw,21px);height:clamp(9px,2.9vw,21px)}#settings-panel{width:calc(100vw - 36px);gap:14px}.graphics-settings{padding-left:12px}}

/* Audio controls share the regular settings panel. */
#sounds-panel{padding-top:18px;margin-top:18px;border-top:1px solid #ffffff20}
.sound-volume{display:flex;align-items:center;gap:10px;padding:11px 0}.sound-volume label{flex:0 0 91px;color:#b8cbd8;font-size:12px}.sound-volume input{min-width:0;flex:1;accent-color:#75c5fc;height:16px;margin:0}.sound-volume output{font-size:11px;color:#8dcfff;width:32px;text-align:right;font-variant-numeric:tabular-nums}#sounds-panel>.sound-volume{border-bottom:1px solid #ffffff15}
#reset-audio{width:100%;margin-top:14px;padding:9px 14px;border:1px solid #ffffff26;border-radius:8px;background:#ffffff0c;color:#d5e3ed;font-size:12px}#reset-audio:hover{background:#ffffff18}

#fps-display{position:absolute;left:186px;bottom:26px;height:42px;display:flex;align-items:center;color:#d5e4ef;font-size:12px;font-variant-numeric:tabular-nums;text-shadow:0 1px 4px #000;pointer-events:none}#fps-display[hidden]{display:none}
.graphics-settings .toggle-setting{display:flex;align-items:center;justify-content:space-between;margin:0 0 20px}:is(#show-fps,#graphics-cue-shadow){appearance:none;position:relative;width:36px;height:21px;border-radius:12px;background:#41515d;margin:0;cursor:pointer}:is(#show-fps,#graphics-cue-shadow):after{content:'';position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:#e5f2fa;transition:transform .15s}:is(#show-fps,#graphics-cue-shadow):checked{background:#3387be}:is(#show-fps,#graphics-cue-shadow):checked:after{transform:translateX(15px)}
@media(max-width:650px){#fps-display{left:176px;bottom:20px}}

#sound-effects-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 0 2px;border:0;background:none;color:#d5e3ed;font-size:13px;text-align:left}
#sound-effects-toggle svg{transition:transform .26s ease}
#sound-effects-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
#sound-effects{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .26s ease,opacity .2s ease,visibility 0s .26s}
#sound-effects.expanded{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .26s ease,opacity .2s ease,visibility 0s}
.sound-effects-inner{min-height:0;overflow:hidden}
@media(prefers-reduced-motion:reduce){#sound-effects,#sound-effects.expanded,#sound-effects-toggle svg{transition:none}}

#sound-effects-toggle[aria-expanded="true"] span{visibility:hidden}

/* Match the table-skin panels' translucent glass finish. */
#settings-panel{background:#17212a80;border-color:#ffffff30;backdrop-filter:blur(18px);box-shadow:0 12px 36px #0003}

/* Billiards volume sliders with white-ball handles. */
.sound-volume output{font-size:14px;width:38px;flex-shrink:0}
.pool-volume-slider{position:relative;min-width:0;flex:1;height:32px;--volume:50%}
.pool-volume-visual{position:absolute;left:12px;right:12px;top:0;height:32px;pointer-events:none}
.pool-volume-track{position:absolute;left:0;right:0;top:12px;height:8px;border-radius:6px;background:#0c151b99;box-shadow:inset 0 1px 3px #0009,0 0 0 1px #ffffff45}
.pool-volume-fill{height:100%;width:var(--volume);border-radius:6px;background:linear-gradient(#9cdcff,#64b9ed);box-shadow:inset 0 1px 1px #fff7}
.pool-volume-thumb{position:absolute;left:var(--volume);top:4px;width:24px;height:24px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 33% 25%,#fff 0%,#fffced 25%,#e0ded2 59%,#8e9e9a 100%);box-shadow:0 3px 5px #0008,inset 0 0 1px #fff}
.sound-volume .pool-volume-slider input{position:absolute;inset:0;width:100%;height:32px;margin:0;opacity:0;cursor:ew-resize;appearance:none;touch-action:pan-y}
.pool-volume-slider input::-webkit-slider-thumb{appearance:none;width:24px;height:24px}
.pool-volume-slider input::-moz-range-thumb{width:24px;height:24px;border:0}
.pool-volume-slider:focus-within{outline:none}
.master-volume-slider .pool-volume-fill{width:max(0px,calc(var(--volume) - 16px));overflow:hidden;height:10px;position:relative;top:-1px;background-image:var(--volume-cue);background-size:100% 100%;clip-path:polygon(0 0,100% 22%,100% 78%,0 100%);border-radius:3px;box-shadow:none}
/* Keep a readable ferrule and blue tip immediately to the left of the handle. */
.master-volume-slider .pool-volume-fill:after{content:'';position:absolute;right:0;top:2px;width:10px;height:6px;background:linear-gradient(90deg,#f1e4bf 0 62%,#3e8ca4 62% 100%);border-radius:0 2px 2px 0}

/* Match the audio sliders while preserving each setting's own numeric range. */
.settings-ball-slider{width:100%;margin:0 0 14px}
#settings-panel .settings-ball-slider input{position:absolute;inset:0;width:100%;height:32px;margin:0;opacity:0;appearance:none;cursor:ew-resize;touch-action:pan-y}
.guideline-connector{position:absolute;left:0;width:var(--volume);top:15.5px;height:1px;background:#ffffffed}
.guideline-dot{position:absolute;top:11px;width:10px;height:10px;transform:translateX(-50%);border:1px solid #ffffffb0;border-radius:50%;background:transparent}
.guideline-dot.reached{background:#b8cbd8}
.guideline-dot.unavailable{border-color:#ffffff45;background:transparent}
.guideline-dot.unavailable::before,.guideline-dot.unavailable::after{content:'';position:absolute;left:3px;top:-2px;width:2px;height:12px;border-radius:1px;background:#f27980;transform:rotate(45deg);box-shadow:0 0 3px #18232c}
.guideline-dot.unavailable::after{transform:rotate(-45deg)}
.guideline-eight{background:radial-gradient(circle at 32% 22%,#707a80,#252b30 24%,#090c0f 62%,#020405);box-shadow:0 3px 6px #000a,inset 0 0 1px #a5b8c1;font-size:0;transition:left .12s ease}
.guideline-eight:after{content:'8';position:absolute;left:6px;top:5px;width:13px;height:13px;border-radius:50%;background:#f6f0d9;color:#111;font:bold 11px/13px Arial;text-align:center}
.guideline-dots{margin-bottom:0}
#settings-panel .guideline-dots input{cursor:pointer}
.guideline-ticks{margin:3px 12px 0}
.guideline-ticks span{padding-top:0}
.guideline-ticks span:before{display:none}
.guideline-ticks span:first-child,.guideline-ticks span:last-child{justify-content:center}
@media(prefers-reduced-motion:reduce){.guideline-eight{transition:none}}

/* Title screen uses the game's panorama and shares the glass treatment. */
.menu-loading #table{opacity:0;}
body.menu-loading{background:#111b24;}
#table{transition:opacity .5s ease;}

.main-menu-open #game>*:not(#table):not(#webgl-error){visibility:hidden;pointer-events:none;}
#main-menu{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:28px;background:#07111b18;backdrop-filter:blur(14px);opacity:1;outline:none;transition:opacity .45s ease,backdrop-filter .45s ease;}
#main-menu[hidden]{display:none;}
#main-menu.leaving{opacity:0;backdrop-filter:blur(0);pointer-events:none;}
.main-menu-card{width:min(400px,100%);text-align:center;transform:translateY(-4vh);}
#pool-title{position:relative;width:112%;margin:0 -6% 25px;aspect-ratio:2.04;line-height:1;opacity:1;transition:opacity .18s ease;}
#pool-title.menu-logo-loading{opacity:0;}
#menu-logo-balls{position:absolute;display:block;width:100%;aspect-ratio:2;left:0;top:-12%;pointer-events:none;z-index:0;}
.menu-logo-ball{position:absolute;display:block;width:32.277778%;height:auto;aspect-ratio:1;top:58.148148%;transform:translate(-50%,-50%);object-fit:cover;}
.menu-logo-ball[hidden]{display:none;}
#menu-logo-outer-left,#menu-logo-outer-right{width:28.14945%;top:58.30713%;}
#menu-logo-outer-left{left:15.7343%;object-position:left center;}
#menu-logo-outer-right{left:84.2657%;object-position:right center;}
#menu-logo-left{left:30.555556%;object-position:left center;}
#menu-logo-right{left:69.444444%;object-position:right center;}
#menu-logo-white{width:35.369444%;left:50%;top:54.144444%;z-index:1;}
@media(prefers-reduced-motion:reduce){#pool-title{transition:none;}}
.menu-logo-wordmark{position:absolute;display:block;width:110%;height:auto;left:-5%;bottom:-2%;overflow:visible;z-index:1;}
@media(max-height:500px){#pool-title{width:88%;margin-inline:6%;margin-bottom:14px}.main-menu-card{transform:none;}}
.main-menu-actions{display:grid;gap:12px;}
.main-menu-secondary{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.main-menu-actions button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 16px;border:1px solid #67bcdf66;border-radius:999px;background:linear-gradient(180deg,#082d43cc,#041b2ed9);backdrop-filter:blur(18px);color:#d6eafa;font-family:"Bahnschrift","Segoe UI Variable Display","Segoe UI",sans-serif;font-size:14px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;box-shadow:inset 0 1px 1px #c1ecff12,0 4px 18px #0002;transition:background .2s,border-color .2s,box-shadow .2s;}
.menu-button-icon{width:22px;height:22px;flex:0 0 22px;filter:drop-shadow(0 0 4px #b8e5ff24)}
.main-menu-actions button span{padding-top:2px}
.main-menu-actions .daily-button span{font-size:1.2em}
.main-menu-actions .daily-button .menu-button-icon{width:25px;height:25px;flex-basis:25px}
@media(max-width:420px){.main-menu-actions button{font-size:12px;letter-spacing:.07em;gap:7px;padding-inline:10px}.menu-button-icon{width:19px;height:19px;flex-basis:19px}}
.main-menu-actions button:hover{background:linear-gradient(180deg,#10415ad9,#072c43e6);border-color:#8ddaff99;}
.main-menu-actions button:focus-visible{outline:2px solid #c0e6ff;outline-offset:4px;}
.main-menu-actions .daily-button{min-height:60px;background:linear-gradient(165deg,#00b8f5 0%,#0086e8 42%,#0062cc 100%);border-color:#60deff;color:#effaff;box-shadow:inset 0 1px 5px #c4f7ff55,inset 0 -2px 6px #004cb94d,0 0 7px #00baff80,0 0 22px #008cff45;text-shadow:0 1px 5px #00498d66;}
.main-menu-actions .daily-button:hover{background:linear-gradient(165deg,#20c5ff 0%,#1099f3 42%,#0874dc 100%);box-shadow:inset 0 1px 5px #c4f7ff66,inset 0 -2px 6px #004cb94d,0 0 9px #00baff99,0 0 26px #008cff55;}
.main-menu-actions button:disabled{cursor:wait;opacity:.65;transform:none;}
#menu-result{margin:-18px 0 26px;color:#e2eef8;font-size:15px;line-height:1.6;}
#menu-status{min-height:20px;font-size:13px;color:#e1edf6;margin:14px 0 0;}



/* One consistent bottom-left row: back, settings, appearance. */
#back-menu{position:absolute;z-index:9;left:28px;bottom:26px;width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid #ffffff25;border-radius:50%;background:#171f27b8;color:#d1dce4;line-height:0;appearance:none}
#back-menu:hover{background:#263947}
#settings{left:80px}#themes{left:132px}#fps-display{left:184px}
@media(max-width:650px){#back-menu{left:18px;bottom:20px}#settings{left:70px;bottom:20px}#themes{left:122px}#fps-display{left:174px}}

/* Free Mode's expandable collection: balls remain unique, props are reusable. */
#free-editor{width:min(1440px,calc(100% - 40px));max-width:calc(100% - 32px)}
.free-toolbar{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:start;gap:20px}
.free-section-heading{line-height:14px;font-size:11px;color:#b8cbd8;font-weight:600;margin:0 0 10px;letter-spacing:.4px}
.free-experimental{color:#dc9393;font-weight:500;letter-spacing:0;margin-left:4px}
.free-item-section{border-left:1px solid #b0d1e333;padding-left:20px}
#free-balls{max-width:none;gap:8px;min-height:43px}
#free-items{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.free-item{display:grid;place-items:center;width:35px;height:43px;border:1px solid #c4dce51a;border-radius:7px;background:#ffffff06;padding:2px;cursor:grab;touch-action:none;color:#d1e3eb}
.free-item svg{width:30px;height:36px;pointer-events:none}
.free-item:hover,.free-item.selected{background:#b1d9f220;border-color:#8bd1ff}
.free-actions{align-self:start;margin-top:24px}#free-ready,#free-reset{height:43px;min-height:43px}
@media(max-width:1000px){.free-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:14px}.free-item-section{padding-left:14px}.free-ball{width:28px;height:28px}#free-balls{gap:6px}.free-item{width:30px;height:36px}.free-item svg{width:26px;height:31px}#free-balls{min-height:36px}#free-reset{width:36px}#free-ready,#free-reset{height:36px;min-height:36px}#free-ready{padding:8px 10px}}
@media(max-width:600px){#free-editor{top:10px;padding:10px;width:calc(100% - 20px);max-width:none}.free-heading{margin-bottom:9px}.free-toolbar{grid-template-columns:1fr 1fr;gap:10px}.free-actions{grid-column:1/-1;flex-direction:row;justify-content:flex-end;margin-top:0}#free-balls{min-height:31px}.free-actions #free-reset{width:38px}.free-section-heading{margin-bottom:6px}.free-item-section{padding-left:10px}.free-item{width:27px;height:31px}.free-item svg{width:23px;height:27px}#free-hint{margin-top:7px;font-size:10px}#free-balls{gap:5px}.free-ball{width:25px;height:25px}}
/* Direct cue contact control. */
/* Compact public settings with an independently hidden developer window. */
#settings-windows{position:absolute;z-index:8;left:28px;bottom:82px;display:flex;align-items:flex-end;gap:12px;max-width:calc(100vw - 56px);pointer-events:none}
#settings-windows>section{pointer-events:auto}
#settings-windows #settings-panel{position:relative;left:auto;bottom:auto;width:310px;display:block;flex:none}
#settings-windows #settings-panel[hidden],#dev-settings-panel[hidden]{display:none}
#settings-panel .graphics-settings{padding:18px 0 0;margin-top:20px;border-left:0;border-top:1px solid #ffffff20}
.graphics-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.graphics-settings .graphics-row label{margin:0;font-size:13px}
.graphics-settings .graphics-row select{width:112px;flex:none;margin:0;padding:7px 9px;background:#ffffff08;backdrop-filter:blur(12px)}
.graphics-settings .graphics-row select:hover{background:#ffffff12}
.graphics-settings .graphics-row select option{background:#253540;color:#e1edf5}
#dev-settings-panel{position:relative;flex:none;width:310px;max-height:calc(100dvh - 106px);overflow-y:auto;padding:22px;background:#17212a80;border:1px solid #ffffff30;border-radius:12px;backdrop-filter:blur(18px);box-shadow:0 12px 36px #0003}
#dev-settings-panel h2{font-size:14px;font-weight:500;margin:0 0 20px;color:#c5d4df}
#dev-settings-panel .background-setting{border:0;margin:0;padding:0}
#close-dev-settings{position:absolute;right:12px;top:8px;background:none;border:0;color:#aebfcb;font-size:25px}
@media(max-width:680px){#settings-windows{left:18px;bottom:76px;max-width:calc(100vw - 36px);max-height:calc(100dvh - 96px);overflow-y:auto;flex-direction:column;align-items:flex-start}#settings-windows #settings-panel,#dev-settings-panel{width:min(310px,calc(100vw - 36px));max-height:none}#dev-settings-panel{order:-1}}
.cue-control-label{display:block;margin-top:10px;white-space:nowrap;font-size:10px;color:#d5e5ee;text-shadow:0 1px 5px #000}#spin.adjusting{box-shadow:0 0 0 2px #96d6ff,0 4px 22px #0006}#cue-control-help{position:absolute;right:112px;bottom:0;width:246px;padding:12px 14px;border:1px solid #ffffff25;border-radius:10px;background:#17212a99;backdrop-filter:blur(16px);color:#e4edf3;font-size:12px;line-height:1.8;text-align:left;pointer-events:none}#cue-control-help[hidden]{display:none}

/* Daily completion: the same translucent glass as the settings panels. */
#daily-results{width:min(352px,calc(100vw - 32px));max-height:calc(100dvh - 40px);margin:auto;padding:30px 22px 24px;text-align:center;color:#f1f5fb;border:1px solid #bdd7ee55;border-radius:22px;background:linear-gradient(155deg,#26374aeb 0%,#192437ed 54%,#202638d9 100%);backdrop-filter:blur(22px);box-shadow:0 20px 60px #0007,inset 0 1px 0 #ffffff14;overflow:auto;outline:none}
#daily-results::backdrop{background:#07111b40}
#daily-results[open],#daily-results[open]::backdrop{animation:daily-result-in 1s ease-in-out both}
#daily-result-title{display:flex;align-items:center;justify-content:center;gap:14px;font-size:16px;font-weight:600;line-height:1.4;margin:0;white-space:nowrap}
#daily-result-title::before,#daily-result-title::after{content:'';height:1px;flex:1;min-width:8px;background:linear-gradient(90deg,transparent,#b8d1e75c)}
#daily-result-title::after{transform:scaleX(-1)}
#daily-result-summary{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:22px 0 6px}
#daily-result-shots,#daily-result-shot-label{font-size:clamp(42px,13vw,52px);line-height:1.12;font-weight:700;letter-spacing:-.035em;color:#f5f7fc}
#daily-result-shots{font-variant-numeric:tabular-nums}
#daily-result-guide{font-size:14px;font-weight:500;line-height:1.4;color:#b0c8dc;margin:0 0 22px}
.daily-result-actions{display:grid;gap:12px}
.daily-result-actions button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:12px;border:1px solid #acc9e15c;background:linear-gradient(180deg,#53647d42,#29374f66);color:#f0f5fc;font-size:16px;font-weight:600;box-shadow:inset 0 1px 0 #ffffff0d;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.daily-result-actions button:hover{background:linear-gradient(180deg,#63789266,#394c687a);border-color:#c5def28c}
.daily-result-actions button:focus-visible{outline:2px solid #a2dfff;outline-offset:3px}
.daily-result-actions button:disabled{opacity:.55;cursor:wait}
.daily-result-actions button svg{display:block;flex:none}
.daily-result-actions #daily-share{background:linear-gradient(155deg,#20caff 0%,#009dff 42%,#0060ed 100%);border-color:#78d8ff8c;color:#fff;box-shadow:0 4px 22px #009cff40,inset 0 1px 0 #e2faff40;text-shadow:none}
.daily-result-actions #daily-share:hover{background:linear-gradient(155deg,#40d5ff 0%,#16adff 42%,#1274f8 100%);box-shadow:0 4px 25px #009cff60,inset 0 1px 0 #e2faff50}
.daily-result-secondary{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.daily-result-secondary button{min-height:58px;font-size:13px;font-weight:500;gap:9px;padding:0 8px}
#daily-share-status{font-size:12px;color:#b8ddec;min-height:16px;margin:10px 0 0}
#daily-share-status:empty{display:none}
#daily-share-fallback[hidden]{display:none}
#daily-share-text{width:100%;margin-top:10px;padding:9px;resize:none;border:1px solid #ffffff30;border-radius:8px;background:#07111b66;color:#eaf5fc;font-family:inherit;font-size:12px;line-height:1.6}
@keyframes daily-result-in{from{opacity:0}to{opacity:1}}
.menu-information{position:absolute;left:0;right:0;bottom:max(24px,env(safe-area-inset-bottom));display:flex;justify-content:center;flex-wrap:wrap;gap:9px 19.2px;padding:0 18px;font-size:12px}
.main-menu-card[hidden]~.menu-information{display:none}
.menu-information a{color:#d6e5ef;text-decoration:none;text-shadow:0 1px 3px #0008}
.menu-information a:hover{text-decoration:underline;color:#fff}
.menu-information a:focus-visible{outline:2px solid #83d5ff;outline-offset:4px;border-radius:2px}

/* Free cosmetics are separate from the covered collection, so blur never reaches them. */
#cloth-palette,#table-finishes,#cue-picker{position:relative;min-width:0}
#cue-picker{overflow:hidden}
.cloth-swatch:disabled,.table-finish:disabled{cursor:default}
.cloth-swatch:disabled:hover,.table-finish:disabled:hover{outline:none}
.cosmetic-lock{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;padding:5px;background:radial-gradient(ellipse at 0 0,#9be8dc25,transparent 55%),radial-gradient(ellipse at 100% 10%,#e0b6fa28,transparent 60%),linear-gradient(145deg,#243044a9,#131c2bb9);backdrop-filter:blur(2px);border-radius:inherit;color:#f2f7fb;text-align:center;font-size:11px;font-weight:600;line-height:1.3;text-shadow:0 1px 3px #0008;pointer-events:none}
.cosmetic-lock svg{width:18px;height:18px;flex:none}
.cosmetic-lock[hidden]{display:none}
.cosmetic-lock-action{appearance:none;border:0;width:100%;height:100%;pointer-events:auto;cursor:pointer}
.cosmetic-lock-action:hover{filter:brightness(1.08)}
.cosmetic-lock-action:focus-visible{outline:1px solid #ffffff40;outline-offset:-3px}
.free-items-tray{position:relative;border-radius:10px;min-height:59px;padding:8px 0}
#cue-design-name{position:relative;z-index:3}
#cue-prev,#cue-next{z-index:3}
#themes-panel.cosmetics-free-layout{width:min(724px,calc(100vw - 56px));grid-template-columns:minmax(0,352fr) minmax(0,48fr) minmax(0,192fr) minmax(0,102fr)}
.free-cosmetics-stack{display:grid;grid-template-rows:1fr 1fr;gap:8px;min-width:0}
.free-cosmetics-card,.pro-colors-card{border:1px solid #ffffff30;border-radius:14px;background:#17212a80;backdrop-filter:blur(18px);box-shadow:0 12px 36px #0003}
.free-cosmetics-card{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:5px}
.pro-colors-card{position:relative;display:grid;grid-template-columns:3fr 2fr;gap:10px;padding:10px;overflow:hidden;min-width:0}
.pro-cloth-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:space-between;justify-items:center;gap:5px}
.pro-finish-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:space-between;justify-items:center;gap:5px;padding-left:8px;border-left:1px solid #ffffff20}
@media(max-width:650px){#themes-panel.cosmetics-free-layout{width:calc(100vw - 36px)}.free-cosmetics-stack{gap:6px}.free-cosmetics-card{padding:4px 2px}.pro-colors-card{gap:5px;padding:6px 4px}.pro-cloth-grid,.pro-finish-grid{gap:3px}.pro-finish-grid{padding-left:4px}.cosmetic-lock{font-size:9px}.cosmetic-lock svg{width:16px;height:16px}}


/* Cue-ball finishes: a single column alongside the cue when unlocked. */
#themes-panel:not(.cosmetics-free-layout){width:min(750px,calc(100vw - 56px));grid-template-columns:minmax(0,352fr) minmax(0,128fr) minmax(0,80fr) minmax(0,102fr) minmax(40px,48fr)}
#themes-panel.cosmetics-free-layout{width:min(782px,calc(100vw - 56px));grid-template-columns:minmax(0,352fr) minmax(38px,48fr) minmax(0,240fr) minmax(0,102fr)}
.pro-colors-card{grid-template-columns:3fr 2fr 1fr}
.cue-ball-picker{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:10px 7px;border:1px solid #ffffff30;border-radius:14px;background:#17212a80;backdrop-filter:blur(18px);box-shadow:0 12px 36px #0003}
.pro-colors-card .cue-ball-picker{border:0;border-left:1px solid #ffffff20;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;padding:0 0 0 8px}
.cue-ball-swatch{position:relative;display:block;flex:none;width:26px;height:26px;border:1px solid #ffffff65;border-radius:50%;padding:0;box-shadow:inset -3px -4px 5px #0006,0 2px 3px #0005;cursor:pointer;background:radial-gradient(circle at 30% 22%,#fff 0%,#f8f7ee 35%,#c2c3c3 83%,#616a73 100%)}
.cue-ball-swatch[aria-pressed="true"]{outline:1px solid #fff;outline-offset:2px}.cue-ball-swatch:disabled{cursor:default}
.ball-skin-red-dots{background:radial-gradient(circle at 27% 30%,#d41525 0 9%,transparent 11%),radial-gradient(circle at 77% 36%,#d41525 0 8%,transparent 10%),radial-gradient(circle at 48% 78%,#d41525 0 9%,transparent 11%),radial-gradient(circle at 30% 22%,#fff,#f8f7ee 40%,#bcbab0)}
.ball-skin-chrome{background:radial-gradient(ellipse at 30% 18%,#fff 0 5%,transparent 24%),linear-gradient(165deg,#dce8f1 5%,#fff 28%,#394656 43%,#07121a 49%,#9da8ad 52%,#f4f8ff 73%,#525a60 95%)}
.ball-skin-gold{background:radial-gradient(ellipse at 30% 18%,#fff4cd,transparent 28%),linear-gradient(165deg,#fff0a9,#e7ac32 32%,#805010 48%,#edb735 55%,#fff0a1 75%,#a56212)}
@media(max-width:650px){.cue-ball-picker{padding:7px 4px;gap:6px}.cue-ball-swatch{width:clamp(15px,3.5vw,24px);height:clamp(15px,3.5vw,24px)}.pro-colors-card .cue-ball-picker{padding-left:5px}.pro-colors-card{gap:5px}}
/* Keep the existing background and cosmetics anchored; add skins to the right. */
#themes-panel>.theme-window{min-width:0;width:100%}
#themes-panel:not(.cosmetics-free-layout){grid-template-columns:352px 128px 80px 102px 48px}
#themes-panel.cosmetics-free-layout{width:min(772px,calc(100vw - 56px));grid-template-columns:352px 48px 240px 102px}
.cue-ball-picker{gap:4px}
@media(max-width:827px){#themes-panel:not(.cosmetics-free-layout){grid-template-columns:minmax(0,352fr) minmax(0,128fr) minmax(0,80fr) minmax(0,102fr) minmax(0,48fr)}#themes-panel.cosmetics-free-layout{grid-template-columns:minmax(0,352fr) minmax(0,48fr) minmax(0,240fr) minmax(0,102fr)}}

/* Small Practice-only mode picker, beside the cosmetic controls. */
#practice-options{position:absolute;z-index:9;left:184px;bottom:26px;width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid #ffffff25;border-radius:50%;background:#171f27b8;color:#d1dce4}
#practice-options:hover,#practice-options[aria-expanded="true"]{background:#263947}
#practice-panel{position:absolute;z-index:16;left:184px;bottom:82px;display:flex;align-items:center;gap:18px;padding:12px 16px;border:1px solid #ffffff30;border-radius:12px;background:#17212a99;backdrop-filter:blur(18px);box-shadow:0 10px 28px #0003;font-size:14px;color:#d5e4ef}
#practice-mode,#practice-view{font:inherit;color:inherit;background:#ffffff0a;border:1px solid #ffffff30;border-radius:7px;padding:7px 25px 7px 10px;cursor:pointer}
#practice-mode:focus,#practice-view:focus{outline:none;box-shadow:none}
#practice-mode:focus-visible,#practice-view:focus-visible{border-color:#ffffff65}
#practice-mode option,#practice-view option{background:#1c2b37;color:#e8f3fc}
#practice-backdrop{position:absolute;inset:0;z-index:8}
#practice-options[hidden],#practice-panel[hidden],#practice-backdrop[hidden],body.main-menu-open #practice-options{display:none}
body:has(#practice-options:not([hidden])) #fps-display{left:238px}
@media(max-width:650px){#practice-options{left:174px;bottom:20px}#practice-panel{left:18px;bottom:76px}body:has(#practice-options:not([hidden])) #fps-display{left:228px}}
/* Local practice opponent: compact turn and group readout. */
#ai-practice-hud[hidden],.main-menu-open #ai-practice-hud{display:none;}
#ai-rematch{pointer-events:auto;border:1px solid #c6e5ff40;border-radius:12px;background:#10253666;backdrop-filter:blur(18px);color:white;padding:12px 29px;font-size:15.6px;min-height:49px;min-width:151px;margin:0;box-shadow:0 6px 22px #0002;}
#ai-rematch[hidden]{display:none;}
#practice-panel select{max-width:180px;}
.ai-match-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100vw - 32px);text-align:center;color:#e9f5fc;font-size:12px;line-height:1.5;}
#ai-practice-status{padding:6px 12px;border-radius:12px;background:#10253666;backdrop-filter:blur(15px);}
body:has(#ai-practice-hud:not([hidden])):not(.main-menu-open) #player-account{top:auto;bottom:25px;}
body:has(#ai-practice-hud:not([hidden])):not(.main-menu-open) #player-menu{top:auto;bottom:57px;}

#ai-rematch:hover{background:#25465780}
:is(#settings,#back-menu,#themes,#practice-options){background:#10253666;backdrop-filter:blur(15px);border-color:#c6e5ff33;color:#edf7ff}
:is(#settings,#back-menu,#themes,#practice-options):is(:hover,[aria-expanded="true"]){background:#25465780}

#practice-panel{max-width:calc(100vw - 36px);flex-wrap:wrap;gap:12px}
#practice-mode{min-width:0;max-width:100%}

/* Match the cue sensitivity label-to-slider spacing. */
#sounds-panel>.setting-value{margin-bottom:10px}
#sounds-panel>.sound-volume{padding-top:0;padding-bottom:14px;margin-bottom:12px}

#menu-music-controls{position:fixed;right:25px;bottom:22px;z-index:115;display:flex;align-items:center;gap:10px;box-sizing:border-box;width:var(--profile-height,54px);height:var(--profile-height,54px);padding:7px 12px 7px 7px;border:1px solid #c6e5ff33;border-radius:99px;background:#10253666;color:#edf7ff;backdrop-filter:blur(15px);font:600 13px "Segoe UI",sans-serif;overflow:hidden;transition:height .38s cubic-bezier(.22,1,.36,1)}
body:not(.main-menu-open) #menu-music-controls,body:has(.main-menu-card[hidden]) #menu-music-controls,body:has(#pro-panel:not([hidden])) #menu-music-controls{display:none}
#menu-music-controls[hidden]{display:none}
#menu-music-controls:is(:hover,:has(:focus-visible)){height:var(--profile-width,140px)}
#menu-music-mute{position:absolute;right:0;bottom:0;display:grid;place-items:center;width:calc(var(--profile-height,54px) - 2px);height:calc(var(--profile-height,54px) - 2px);box-sizing:border-box;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
#menu-music-mute:hover{background:#ffffff10}#menu-music-mute svg{display:block;width:24.2px;height:24.2px;justify-self:center;align-self:center}
#menu-music-mute .music-muted-cross,#menu-music-mute[aria-pressed="true"] .music-sound-waves{display:none}
#menu-music-mute[aria-pressed="true"] .music-muted-cross{display:block}
#menu-music-volume{--music-volume:50%;appearance:none;position:absolute;left:50%;bottom:calc(var(--profile-height,54px) + 10px);transform:translate(-50%,10px);width:7px;height:calc(var(--profile-width,140px) - var(--profile-height,54px) - 24px);writing-mode:vertical-lr;direction:rtl;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s linear .16s;margin:0;border-radius:4px;cursor:pointer;background:linear-gradient(to top,#9bdcff var(--music-volume),#ffffff35 var(--music-volume));accent-color:#eaf7ff}
#menu-music-volume::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border:0;border-radius:50%;background:#edf8ff;box-shadow:0 1px 3px #0005}
#menu-music-volume::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:#edf8ff}
#menu-music-controls :focus-visible{outline:2px solid #b2e3ff;outline-offset:4px}
@media(max-width:600px){#menu-music-controls{right:15px;bottom:18px}}

#menu-music-controls:is(:hover,:has(:focus-visible)) #menu-music-volume{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .24s ease .08s,transform .38s cubic-bezier(.22,1,.36,1),visibility 0s}
@media(prefers-reduced-motion:reduce){#menu-music-controls{transition:height .16s ease}#menu-music-volume,#menu-music-controls:is(:hover,:has(:focus-visible)) #menu-music-volume{transform:translate(-50%,0);transition:opacity .12s ease,visibility 0s}}