:root {
  color-scheme:dark; --page:#101c24; --header:#0c171f; --panel:#183d50; --panel-deep:#122d3b;
  --panel-active:#22556c; --line:#4c7181; --line-soft:#c5dbe41f; --text:#f5f5ed; --muted:#cfdee5;
  --dim:#a5beca; --accent:#edc775; --accent-soft:#edc77526; --danger:#ffd1b5;
  --gold:#eac06a; --gold-bright:#ffe2a0; --border:var(--line-soft); --border-strong:var(--line); --radius:10px;
  font-family:"Segoe UI",Arial,sans-serif; font-synthesis:none;
}
*{box-sizing:border-box}
html{min-width:320px}
body{margin:0;background:radial-gradient(ellipse at 20% 0%,#25404b66,transparent 65%),var(--page);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased}
button,input,select,a{-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit}
button{color:inherit;border:0;background:none;cursor:pointer}
button:disabled{cursor:default;opacity:.42}
button:not(:disabled){transition:background .12s,border-color .12s,color .12s,box-shadow .12s}
button:not(:disabled):active{transform:translateY(1px)}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
a{color:inherit}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
[hidden]{display:none!important}
.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
button svg{pointer-events:none}
kbd{font-family:inherit;font-size:10px;font-weight:400;border:1px solid #b3d6e36b;border-radius:4px;padding:1px 4px;line-height:1.4;color:#d6eaf2;background:#082d405c}

.game-header{display:flex;align-items:center;gap:24px;height:48px;padding:0 16px;border-bottom:1px solid #9d865f44;background:linear-gradient(180deg,#192a33,var(--header));box-shadow:0 2px 15px #0003}
.game-title{display:flex;align-items:center;gap:9px;margin:0;font-size:16px;font-weight:650;white-space:nowrap}
.title-ball{display:inline-grid;place-items:center;width:26px;height:26px;border:5px solid #17252d;border-radius:50%;background:#f1f5ef;color:#17252d;box-shadow:0 0 0 1px #7598a6;font-size:13px;font-weight:750}
.mode-tabs{display:flex;align-items:center;gap:4px;height:100%}
.mode-tabs button{min-height:34px;padding:0 15px;border:1px solid transparent;border-radius:6px;color:#c4dae5;font-size:13px;font-weight:600}
.mode-tabs button:hover{background:#1b5067;color:#fff}
.mode-tabs button.active,.mode-tabs button[aria-pressed="true"]{border-color:#91bed14d;background:#22566e;color:#fff}
.session-status{margin-left:auto;display:flex;align-items:center;gap:18px}
#match-type{color:var(--dim);font-size:10px;letter-spacing:1px}
.clock{display:flex;align-items:baseline;gap:5px;min-width:58px;font-variant-numeric:tabular-nums}
.clock strong{font-size:22px;font-weight:600}.clock>span:last-child{color:var(--dim);font-size:9px}
.clock-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);align-self:center;margin-right:2px}
.clock.urgent{color:var(--danger)}.clock.urgent .clock-dot{background:var(--danger);animation:blink 1s infinite}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(306px,26%);gap:10px;width:min(100%,calc((100dvh - 166px)*2.4));height:calc(100dvh - 48px);min-height:560px;margin:0 auto;padding:10px}
.arena{display:flex;flex-direction:column;min-width:0;min-height:0}
.table-shell{position:relative;flex:0 0 auto;width:100%;aspect-ratio:16/9;overflow:hidden;isolation:isolate;border:1px solid #6f8073;border-radius:10px;background:#102b2a;box-shadow:0 12px 32px #0005,0 0 0 1px #050b1099}
#table-view{position:absolute;inset:0;touch-action:none;cursor:grab}
#table-view:active{cursor:grabbing}#table-view.placing{cursor:crosshair}#table-view.stroking{cursor:ns-resize}
#table-view canvas{display:block;width:100%;height:100%}
.table-tag{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:9px;padding:8px 11px 8px 8px;border:1px solid #d9c89b50;border-radius:7px;background:linear-gradient(135deg,#152b27ed,#0a1919ed);box-shadow:0 3px 12px #0003;pointer-events:none}
.status-ball{width:29px;height:29px;display:grid;place-items:center;border:6px solid #19282b;border-radius:50%;color:#17232a;background:#f4f5ec;box-shadow:0 1px 4px #0005;font-size:13px;font-weight:750}
.table-tag-label{display:block;margin-bottom:3px;color:#ddcc9f;font-size:9px;letter-spacing:.8px}
.table-tag strong{display:block;font-size:12px;font-weight:650;letter-spacing:.3px}
.shot-indicator{position:absolute;right:12px;top:13px;display:flex;align-items:center;gap:7px;padding:9px 11px;background:#092d2be6;border:1px solid #b4d8ce44;border-radius:6px;pointer-events:none}
.shot-indicator>span{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:blink 1s infinite}
.shot-indicator strong{font-size:12px;font-weight:550;color:#e0efe8}
.table-message{position:absolute;left:50%;bottom:66px;transform:translateX(-50%);display:flex;align-items:center;gap:11px;width:max-content;max-width:min(84%,560px);padding:12px 16px;border:1px solid #b8ded1;border-radius:7px;background:#e7f1e9f2;color:#16372d;box-shadow:0 3px 12px #0003;pointer-events:none;transition:opacity .18s}
.table-message>svg{width:22px;height:22px;color:#286848}.table-message strong{display:block;font-size:14px;font-weight:650;line-height:1.4}
.table-message span{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:#375d4e}
.table-message.subtle{opacity:0}.table-message.foul{background:#f7e4d7f2;border-color:#e0a185}.table-message.foul>svg{color:#a45539}
.table-bottom-actions{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px}
.table-bottom-actions .icon-button{background:#092d2be6;border-color:#9dcbb466;color:#e1eee4}
.view-caption{padding-left:5px;pointer-events:none}.view-caption strong{display:block;color:#d4e4dd;font-size:10px;font-weight:600;letter-spacing:.8px}.view-caption>span{display:none}
.icon-button{width:38px;height:38px;display:inline-grid;place-items:center;padding:0;border:1px solid #6d9caa66;border-radius:7px;color:var(--text)}
.icon-button svg{width:21px;height:21px}.icon-button:not(:disabled):hover{color:#fff;background:#397c95;border-color:#b2dbe9}
.move-cue{position:absolute;right:11px;bottom:11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 14px;border:1px solid #ffe091;border-radius:7px;color:#332a12;background:var(--gold);box-shadow:0 2px 6px #0003;font-size:13px;font-weight:700}
.move-cue svg{width:18px;height:18px}.move-cue:hover{background:var(--gold-bright)}.move-cue[aria-pressed="true"]{box-shadow:0 0 0 2px #fff0bd88,0 3px 9px #0005;background:#ffe2a0}
.table-toolbar{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:12px;min-height:36px;padding:4px 2px;color:#c1d7e0}
.match-log{display:flex;flex-direction:column;flex:1;min-height:54px;overflow:hidden;margin-top:5px;border:1px solid #47657577;border-radius:8px;background:linear-gradient(135deg,#132e3c,#112732);box-shadow:inset 0 1px 0 #ffffff06}
.match-log h2{flex-shrink:0;margin:0;padding:8px 12px 6px;border-bottom:1px solid #a4d0e021;color:#cee3ee;font-size:12px;font-weight:600}
#match-log-entries{flex:1;min-height:0;overflow:auto;padding:4px 12px 8px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#5c94ad transparent;color:#c3dce8;font-size:13px;line-height:1.65;overflow-wrap:anywhere}
#match-log-entries>*{margin:0;padding:2px 0}#match-log-entries strong{color:#f1f7fa;font-weight:600}#match-log-entries .foul{color:#ffd2b9}
.control-hint{display:flex;align-items:center;gap:8px;min-width:0;font-size:11px;line-height:1.5}.control-hint b{color:#f4f9fb;font-weight:600}.control-hint i{font-style:normal;padding:0 5px;color:#8db4c5}.control-hint kbd{font-size:10px}
.mouse-icon{position:relative;display:inline-block;width:13px;height:17px;border:1.5px solid #b0d0dd;border-radius:6px;flex-shrink:0}.mouse-icon::after{content:"";position:absolute;height:4px;left:4px;top:2px;border-left:1.5px solid currentColor}
.text-button{display:inline-flex;align-items:center;gap:6px;padding:6px 0;color:#d0e5ef;font-size:11px;white-space:nowrap}.text-button svg{width:16px;height:16px}.text-button:hover{color:var(--gold-bright)}

.control-sidebar{display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#75a9bc transparent;padding:1px}
.players{display:grid;gap:8px}
.player-card{position:relative;min-height:98px;overflow:hidden;padding:9px 13px;border:1px solid #57758580;border-radius:var(--radius);background:linear-gradient(140deg,#1c3e4f,var(--panel-deep));box-shadow:inset 0 1px 0 #ffffff0c,0 3px 9px #0002}
.player-card.active{border-color:#d8ba77;background:linear-gradient(135deg,#2b6278,#1a4256);box-shadow:inset 3px 0 0 #eac777,inset 0 1px 0 #ffffff25,0 3px 12px #0003}
.player-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px}.player-heading>strong{font-size:17px;font-weight:700;white-space:nowrap}
.player-role{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:3px 8px 3px 5px;border:1px solid #bdc9cd50;border-radius:5px;background:#0a222ecc;color:#eef3ef;font-size:14px;font-weight:700;white-space:nowrap}
.player-role::before{content:"";display:block;width:18px;height:18px;flex:0 0 auto;border:1px solid #cad9da66;border-radius:50%;background:radial-gradient(circle at 33% 27%,#f8fbf2 0%,#c2d1cc 45%,#607c7e 100%);box-shadow:0 1px 3px #0005}
.player-card[data-group="solids"] .player-role{border-color:#edc77580;color:#ffe8ad;background:#342a164f}
.player-card[data-group="solids"] .player-role::before{border-color:#ffdb7a;background:radial-gradient(circle at 30% 25%,#ffe8a0,#d79a21 70%,#86601e)}
.player-card[data-group="stripes"] .player-role{border-color:#dce8ec99;background:#dce8ec;color:#183a4a}
.player-card[data-group="stripes"] .player-role::before{border-color:#b3aa7d;background:linear-gradient(to bottom,#f7f7e9 0 24%,#d59d2b 24% 76%,#f7f7e9 76% 100%);box-shadow:inset -2px -2px 3px #0003,0 1px 2px #0002}
.player-card[data-group="open"] .player-role::before{background:linear-gradient(90deg,#ddae4c 48%,#eff2e7 49%);border-color:#cdd4c7}
.player-state{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:29px;margin:4px 0 6px}
.your-turn{padding:3px 6px;border:1px solid #f6dc9344;border-radius:4px;color:#fbe5a9;background:#162d31;font-size:10px;font-weight:750;letter-spacing:.7px;visibility:hidden;white-space:nowrap}.active .your-turn{visibility:visible}
.player-tally{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:5px;white-space:nowrap}.player-tally>span{font-size:10px;color:#bad0d9}
.player-score{font-size:22px;line-height:1;font-weight:650;color:#bfd5dd;font-variant-numeric:tabular-nums}.active .player-score{color:#fff6dc}
.ball-track{display:flex;align-items:center;justify-content:center;gap:7px;height:23px}
.mini-ball{position:relative;width:21px;height:21px;display:inline-grid;place-items:center;flex-shrink:0;border-radius:50%;background:var(--ball-color,#365c70);box-shadow:inset -2px -3px 4px #0006,inset 1px 1px 2px #fff6,0 1px 2px #0004}
.mini-ball span{position:relative;z-index:1;display:grid;place-items:center;width:12px;height:12px;border-radius:50%;background:#f3f3ea;color:#17313e;font-size:8px;line-height:1;font-weight:750}
.mini-ball.striped{background:linear-gradient(to bottom,#f3f3ea 0 24%,var(--ball-color) 24% 76%,#f3f3ea 76% 100%)}.mini-ball.potted{opacity:.25;filter:grayscale(.6)}.mini-ball.empty{width:20px;height:20px;box-shadow:none;border:1px solid #8ab8c98c;background:#092e4480}
.control-card{padding:10px 12px;border:1px solid #597c8a8c;border-radius:var(--radius);background:linear-gradient(135deg,#214d60,var(--panel));box-shadow:inset 0 1px 0 #ffffff12,0 3px 10px #0002}
.card-heading{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:23px;margin-bottom:7px}.card-heading h2{margin:0;font-size:16px;font-weight:700;color:#f3fbff}.mode-badge{display:none}.card-note{position:absolute;right:0;font-size:10px;color:#d0e6f0;white-space:nowrap}.card-note b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.view-controls .card-note{display:none}.table-controls .card-heading{justify-content:space-between}.table-controls .card-heading h2{font-size:15px}
.cue-modes{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px}
.cue-mode{display:flex;align-items:center;gap:9px;min-height:40px;padding:5px 7px;border:1px solid transparent;border-radius:6px;color:#f2f9fc;font-size:16px;font-weight:550;text-align:left;white-space:nowrap}
.cue-mode kbd{margin-left:auto;font-size:9px;padding:0 3px;color:#d2e6ee;border-color:#a2c8d84d}
.mode-dot{width:18px;height:18px;border:2px solid #7bb5cb;border-radius:50%;background:#0b3850;box-shadow:inset 0 1px 3px #0004;flex-shrink:0}
.cue-mode:not(:disabled):hover{color:#fff;background:#4a9abc4a}
.cue-mode.active,.cue-mode[aria-pressed="true"]{color:#fff7dd;border-color:#ffda772e;background:#062e4166}
.cue-mode.active .mode-dot,.cue-mode[aria-pressed="true"] .mode-dot{border-color:#ffdc7c;background:linear-gradient(#ffe7a5,#e9ab31);box-shadow:0 1px 3px #0005}
.mode-note{display:flex;align-items:center;gap:6px;padding-left:7px;font-size:10px;color:#d1e6ef;white-space:normal;line-height:1.3}.mode-note .mouse-icon{width:11px;height:15px}.mode-note .mouse-icon::after{left:3px;height:3px;top:2px}
.mode-help{margin:8px 2px 7px;min-height:34px;color:#d4e8f1;font-size:12px;line-height:1.45}
.stroke-feedback{display:flex;align-items:center;gap:8px;padding:8px 2px 1px;border-top:1px solid var(--line-soft);color:#cce3ee;font-size:11px}
.stroke-meter{--stroke:0%;flex:1;min-width:20px;height:6px;overflow:hidden;border-radius:4px;background:#092d41}.stroke-meter>span{display:block;width:var(--stroke);height:100%;background:linear-gradient(90deg,#d79c32,#ffe08a);border-radius:inherit}
#stroke-value{min-width:55px;color:#fff0c4;font-size:11px;text-align:right;font-variant-numeric:tabular-nums}.last-stroke{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 0;padding-top:7px;border-top:1px solid var(--line-soft);color:#d2e8f0;font-size:12px}.last-stroke output{color:#ffe092;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}

.tool-panel{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.section-label{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#e6f1f6;font-size:12px}.micro-button{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:2px 5px;color:#ffe097;font-size:12px}.micro-button svg{width:15px;height:15px}.micro-button:hover{color:#fff1cd}
.spin-adjustment{display:flex;justify-content:center;align-items:center;gap:18px}.spin-stage{position:relative;display:flex;align-items:center;justify-content:center;width:128px;height:126px;flex-shrink:0}
.spin-ball{position:relative;width:88px;height:88px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fffffc 0%,#e9f1ed 36%,#b3cacb 73%,#748f9d 100%);box-shadow:inset -6px -7px 13px #33586a2b,0 4px 9px #0004;touch-action:none;cursor:crosshair}
.spin-ring{position:absolute;inset:15%;border:1px dashed #507c8852;border-radius:50%;pointer-events:none}.spin-cross{position:absolute;background:#4e7b8a2b;pointer-events:none}.spin-cross.x{height:1px;left:12%;right:12%;top:50%}.spin-cross.y{width:1px;top:12%;bottom:12%;left:50%}
.spin-marker{position:absolute;left:50%;top:50%;width:11px;height:11px;border:1.5px solid #fff9;border-radius:50%;background:#d63f2c;box-shadow:0 0 0 2px #c4614224,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}
.table-spin-preview{position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:8px;border:1px solid #c3ddd522;border-radius:9px;background:#0b272bb3;pointer-events:none}
.table-spin-preview .spin-ball{width:52px;height:52px;box-shadow:inset -4px -5px 9px #33586a2b,0 2px 5px #0004}
.table-spin-preview .spin-marker{width:8px;height:8px;background:#2388c8;border-color:#e3f6ffb3;box-shadow:0 1px 3px #123b5580}
.table-shell>.spin-control{position:absolute;top:10px;left:50%;transform:translateX(-50%);margin:0;padding:8px;border:1px solid #c3ddd544;border-radius:9px;background:#0b272be6}
.table-shell>.spin-control .spin-adjustment{display:block}
.table-shell>.spin-control .spin-stage,.table-shell>.spin-control .spin-ball{width:52px;height:52px}
.table-shell>.spin-control .spin-label,.table-shell>.spin-control .spin-readout,.table-shell>.spin-control .section-label>span{display:none}
.table-shell>.spin-control .spin-marker{width:8px;height:8px;background:#2388c8;border-color:#e3f6ffb3;box-shadow:0 1px 3px #123b5580}
.table-shell>.spin-control .section-label{position:absolute;left:calc(100% + 5px);top:18px}
.table-shell>.spin-control .micro-button{display:grid;place-items:center;width:32px;height:32px;min-height:32px;padding:0;border:1px solid #f8db8d;border-radius:50%;color:#3b3016;background:#f1c364;font-size:0}
.table-shell>.spin-control .micro-button svg{width:17px;height:17px}
.spin-label{position:absolute;color:#d1e5ee;font-size:9px;letter-spacing:.5px;pointer-events:none}.spin-top{top:3px}.spin-bottom{bottom:3px}.spin-left{left:4px}.spin-right{right:4px}
.spin-readout{min-width:0;font-size:12px;line-height:1.6}.spin-readout strong{display:block;color:#f2f8fb;font-size:13px;font-weight:600}.spin-readout>span{display:block;color:#d3e8f1;font-size:12px;font-variant-numeric:tabular-nums}.spin-readout small{display:block;margin-top:8px;color:#c2dce7;font-size:11px;line-height:1.5}
.elevation-value{color:#ffe098;font-size:15px}.elevation-value b{font-weight:650}.elevation-row{display:flex;align-items:center;gap:14px;margin-top:9px}.elevation-diagram{width:58px;height:29px;color:#bbdfe9;stroke-width:1.5}#elevation-cue-line{color:#ffe098;stroke-width:2.5}
input[type="range"]{appearance:none;-webkit-appearance:none;height:6px;border-radius:4px;background:#082f47;accent-color:var(--gold);cursor:pointer}input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid #ffe69a;border-radius:50%;background:#e9b444}input[type="range"]::-moz-range-thumb{width:16px;height:16px;border:2px solid #ffe69a;border-radius:50%;background:#e9b444}#elevation{flex:1;width:0;margin:10px 1px}
.view-adjustments{display:flex;align-items:center;justify-content:space-between;gap:8px}.view-mode{flex:1;min-width:80px;padding-right:5px}.view-mode kbd{display:none}.view-buttons{display:flex;align-items:center;gap:5px}
.view-buttons .icon-button,.utility-controls .icon-button{width:37px;height:37px;color:#4b3611;background:linear-gradient(#ffdc83,#edb340);border:1px solid #ffe29b;border-radius:50%;box-shadow:0 2px 3px #052c4466}.view-buttons .icon-button svg{width:21px;height:21px}.view-buttons .icon-button:hover,.utility-controls .icon-button:hover{background:#ffe5a3;color:#33260f;border-color:#fff2cb}
.camera-controls{display:grid;grid-template-columns:1fr 1fr 1fr 36px;gap:5px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft)}.camera-controls button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;border:1px solid #70abc166;border-radius:6px;color:#e4f1f6;background:#0d405c;font-size:13px;font-weight:600}.camera-controls svg{width:17px;height:17px}.camera-controls button:hover{color:#fff;background:#286e8a}.camera-controls button.active,.camera-controls button[aria-pressed="true"]{color:#392d11;background:#f0c365;border-color:#ffe3a2}
.table-control-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.table-control-buttons:has(#undo-button:not([hidden])){grid-template-columns:repeat(3,minmax(0,1fr))}
.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:37px;padding:5px 6px;border:1px solid #ffe099;border-radius:7px;background:linear-gradient(#ffda80,#e9b446);color:#362b12;font-size:12px;font-weight:700;white-space:nowrap}.secondary-button svg{width:16px;height:16px}.secondary-button:not(:disabled):hover{color:#221b0b;border-color:#fff1bd;background:#ffe49a}.secondary-button:disabled{color:#bfd4de;background:#164967;border-color:#6b9bb34d;opacity:.56}
.turn-summary{margin:8px 1px 0;color:#d4e8f2;font-size:12px;line-height:1.4}.sidebar-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding:2px 4px 0;min-height:42px}#footer-status{max-width:58%;color:#c0d9e5;font-size:11px;line-height:1.5}.utility-controls{display:flex;gap:6px}.utility-controls .icon-button svg{width:20px;height:20px}

.loading-screen{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#0a2431;transition:opacity .25s}
.loading-ball{display:grid;place-items:center;width:48px;height:48px;margin-bottom:7px;border:11px solid #152b35;border-radius:50%;background:#e8f1ef;color:#183140;box-shadow:0 0 0 1px #355362,0 6px 16px #0003;font-size:23px;font-weight:600;animation:float 2s ease-in-out infinite}
.loading-screen strong{font-size:13px;font-weight:500}
.loading-screen>span:last-child{color:#7ea5b6;font-size:11px}
.paused-overlay{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:#061b27d9;backdrop-filter:blur(7px);text-align:center}
.pause-symbol{display:grid;place-items:center;width:46px;height:46px;border:1px solid #6dbed354;border-radius:50%;color:#9de1e9;background:#2d64792e}
.pause-symbol svg{width:22px;height:22px}
.paused-overlay h2{margin:16px 0 0;font-size:25px;font-weight:550;letter-spacing:-.4px}
.paused-overlay p{margin:9px 0 23px;color:#9bbac8;font-size:12px}
.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:10px 18px;border:1px solid #8cdae2a3;border-radius:6px;background:#1d7890;color:#f0fcff;font-size:12px;font-weight:550}
.primary-button svg{width:16px;height:16px}
.primary-button:not(:disabled):hover{background:#238aa1;border-color:#b3f1f5}
.toast{position:fixed;left:50%;bottom:25px;z-index:100;width:max-content;max-width:calc(100vw - 32px);padding:11px 17px;border:1px solid #6bb5c26e;border-radius:7px;background:#163e50f5;color:#e2f4f8;box-shadow:0 5px 24px #0004;transform:translateX(-50%);font-size:12px;line-height:1.5;text-align:center}
.toast.error{border-color:#d597727a;background:#463c37f5;color:#f9e1d1}
dialog{position:fixed;width:min(540px,calc(100vw - 32px));max-height:calc(100dvh - 36px);padding:31px;overflow-y:auto;border:1px solid #48788d;border-radius:12px;background:#102f40;color:var(--text);box-shadow:0 18px 90px #0008;scrollbar-width:thin;scrollbar-color:#47788d transparent}
dialog::backdrop{background:#03131ca6;backdrop-filter:blur(5px)}
.dialog-close{position:absolute;top:10px;right:10px}
.dialog-eyebrow{display:block;margin-right:20px;color:#7bc5d4;font-size:9px;font-weight:500;letter-spacing:1.3px}
.dialog-title{margin:12px 0;color:#edf8fb;font-family:inherit;font-size:27px;font-weight:550;line-height:1.2;letter-spacing:-.6px}
.dialog-description{margin:0 0 22px;color:#a7c3d0;font-size:12px;line-height:1.75}
.dialog-section-title{margin:24px 0 11px;color:#9ad8e4;font-size:10px;font-weight:550;letter-spacing:.8px}
.control-table{width:100%;border-collapse:collapse;font-size:11px}
.control-table tr+tr{border-top:1px solid var(--line-soft)}
.control-table th{width:33%;padding:10px 12px 10px 0;color:#d1e5ed;font-weight:500;text-align:left;vertical-align:top;line-height:1.6}
.control-table td{padding:10px 0;color:#9cbcca;line-height:1.65}
.rule-notes{margin:0;padding-left:18px;color:#a5c2cf;font-size:11px;line-height:1.8}
.rule-notes li{padding:3px 0}
.dialog-action-row{display:flex;align-items:stretch;gap:9px;margin-top:24px}
.dialog-secondary{min-height:40px;padding:10px 15px;border:1px solid #4d7e9278;border-radius:6px;color:#c1dce7;background:#0b293bc4;font-size:12px}
.dialog-secondary:hover{background:#1b465b;border-color:#6aa7bd}
.mode-choice{display:flex;align-items:center;gap:14px;width:100%;padding:17px 15px;border:1px solid #4572867d;border-radius:7px;margin-top:11px;text-align:left;background:#17394a}
.mode-choice:hover{border-color:#73c7d5;background:#1b475b}
.mode-choice .choice-symbol{display:grid;place-items:center;width:34px;height:34px;color:#a3e2eb;font-size:26px;flex-shrink:0}
.mode-choice strong{display:block;margin-bottom:5px;font-size:13px;font-weight:550;color:#e1f3f8}
.mode-choice small{display:block;color:#9abcca;font-size:10px;line-height:1.6}
.mode-choice>svg{width:18px;margin-left:auto;color:#8ad5e1}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.setting-row strong{display:block;font-size:12px;font-weight:500}
.setting-row small{display:block;margin-top:5px;color:#88adbe;font-size:10px;line-height:1.6}
.toggle{position:relative;appearance:none;-webkit-appearance:none;width:34px;height:19px;border:1px solid #537b8b;border-radius:20px;background:#153d51;cursor:pointer;flex-shrink:0}
.toggle::after{content:"";position:absolute;width:13px;height:13px;top:2px;left:2px;border-radius:50%;background:#8fb4c2;transition:transform .15s,background .15s}
.toggle:checked{border-color:#6dcedd;background:#31738a}
.toggle:checked::after{transform:translateX(15px);background:#b3f2f4}
.setting-select{padding:7px;border:1px solid #4d7c8f;border-radius:5px;background:#0e2b3d;color:#cee6ef;font-size:11px}
.choice-buttons{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.choice-buttons button{min-height:42px}
.winner-ball{display:grid;place-items:center;width:57px;height:57px;margin-bottom:22px;border:11px solid #182d37;border-radius:50%;background:#e1eef0;color:#183341;box-shadow:0 0 0 1px #456a7d;font-size:29px;font-weight:600}
.match-stats{display:flex;gap:34px;padding:18px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.match-stats strong{display:block;color:#c4e5ed;font-size:25px;font-weight:500;font-variant-numeric:tabular-nums}
.match-stats span{display:block;margin-top:5px;color:#84aebf;font-size:9px;letter-spacing:.4px}
@keyframes blink{50%{opacity:.3}}
@keyframes float{50%{transform:translateY(-3px)}}

.primary-button{background:#f1c05b;border-color:#ffe299;color:#302811;font-size:14px;font-weight:700}.primary-button:not(:disabled):hover{background:#ffe298;border-color:#fff0c4}
.dialog-description,.control-table,.rule-notes{font-size:14px}.control-table td,.rule-notes,.dialog-description{color:#c4dde8}.dialog-section-title,.dialog-eyebrow{font-size:11px;color:#ffe099}.setting-row strong{font-size:14px}.setting-row small{font-size:12px;color:#bdd9e5}.dialog-secondary,.setting-select{font-size:13px}.mode-choice strong{font-size:15px}.mode-choice small{font-size:12px}.paused-overlay p{font-size:14px;color:#c9e0e9}.dialog-close{width:38px;height:38px}

.call-tag{position:absolute;top:62px;left:12px;display:flex;align-items:center;gap:8px;padding:6px 11px 6px 8px;border:1px solid #ffc83d;border-radius:7px;background:linear-gradient(135deg,#3a2c0bf0,#1b1606f0);box-shadow:0 0 0 1px #0006,0 3px 14px #ffc83d33;pointer-events:none}
.call-tag-label{color:#ffd56b;font-size:10px;font-weight:750;letter-spacing:1px}
.call-ball{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;color:#fff;font-size:11px;font-weight:800;text-shadow:0 1px 1px #0008;box-shadow:inset 0 -2px 3px #0005,0 0 0 2px #ffc83d}
.call-ball.stripe{background-image:linear-gradient(#f4f1e6 0 22%,transparent 22% 78%,#f4f1e6 78%)!important;color:#17232a;text-shadow:none}
.call-tag strong{color:#fff3cf;font-size:12px;font-weight:700;letter-spacing:.3px}
@media(max-width:899px) and (orientation:portrait){.call-tag{top:48px;left:8px;padding:5px 8px 5px 6px;gap:6px}.call-ball{width:20px;height:20px;font-size:9px}.call-tag strong{font-size:10px}.call-tag-label{font-size:8px}}
@media(max-height:560px) and (orientation:landscape){.call-tag{top:50px;left:8px;padding:4px 8px 4px 6px}.call-ball{width:19px;height:19px;font-size:9px}.call-tag strong{font-size:10px}}

.game-tabs{display:flex;align-items:center;gap:4px}
.game-tabs a{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border:1px solid transparent;border-radius:16px;color:#c4dae5;font-size:12px;font-weight:650;text-decoration:none;white-space:nowrap}
.game-tabs a:hover{background:#1b5067;color:#fff}
.game-tabs a.active{border-color:#91bed14d;background:#22566e;color:#fff}
.rule-action{background:#f2efe4;border-color:#fff}
.rule-action:hover{background:#fff}
.rule-action[aria-pressed="true"]{background:var(--gold);border-color:#ffe091}
#move-cue:not([hidden])~.rule-action{bottom:56px}
@media(max-width:1120px){.game-tabs a{padding:0 8px;font-size:11px}}
@media(max-width:560px){.game-tabs{gap:2px}.game-tabs a{min-height:26px;padding:0 6px;font-size:10px}}
@media(max-width:899px) and (orientation:portrait){#move-cue:not([hidden])~.rule-action{bottom:50px}}

.mini-ball.plain span{display:none}
html[data-game="snooker"] .title-ball,html[data-game="quick"] .title-ball{background:#c0262d;color:#fff}
html[data-game="snooker"] .status-ball,html[data-game="quick"] .status-ball{background:#c0262d;color:#fff}
@media(max-width:430px){.game-tabs a{padding:0 5px;font-size:9.5px}}
@media(max-width:560px){.game-title{font-size:0;gap:0}.game-title .title-ball{font-size:12px}.mode-tabs button{white-space:nowrap}.game-header{gap:6px}}

:root{
  --page:#141618;--header:rgba(20,22,25,.9);--panel:rgba(24,27,31,.82);--panel-deep:rgba(24,27,31,.82);
  --panel-active:rgba(47,111,208,.28);--line:rgba(255,255,255,.16);--line-soft:rgba(255,255,255,.09);
  --text:#f1efe6;--muted:#d8d5cb;--dim:#a9a69d;--accent:#c9a96c;--accent-soft:#c9a96c26;--danger:#ff9e80;
  --gold:#c9a96c;--gold-bright:#dcc08a;--blue:#3f86e8;--blue-deep:#2f6fd0;--blue-soft:rgba(47,111,208,.3);--link:#8fbcf4;
  --glass:rgba(24,27,31,.82);--glass-head:rgba(40,43,48,.6);--neutral:rgba(52,56,62,.88);--radius:6px;
  font-family:"Source Sans 3","Segoe UI",Arial,sans-serif;
}
body{background:linear-gradient(180deg,rgba(14,16,18,.76),rgba(14,16,18,.58) 45%,rgba(14,16,18,.82)),url("./assets/bg-room-8ball.jpg") center/cover fixed,#141618;font-size:15px}
html[data-game="9ball"] body{background-image:linear-gradient(180deg,rgba(14,16,18,.76),rgba(14,16,18,.58) 45%,rgba(14,16,18,.82)),url("./assets/bg-room-9ball.jpg")}
html[data-game="snooker"] body{background-image:linear-gradient(180deg,rgba(14,16,18,.76),rgba(14,16,18,.58) 45%,rgba(14,16,18,.82)),url("./assets/bg-room-snooker.jpg")}
html[data-game="quick"] body{background-image:linear-gradient(180deg,rgba(14,16,18,.76),rgba(14,16,18,.58) 45%,rgba(14,16,18,.82)),url("./assets/bg-room-quick.jpg")}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline-color:var(--blue)}
kbd{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#e3e0d6}

.game-header{height:54px;gap:20px;padding:0 16px 0 14px;background:var(--header);border-bottom:1px solid var(--line-soft);box-shadow:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;flex-shrink:0}.brand img{display:block}.brand .brand-wide{height:42px;width:auto}.brand .brand-icon{display:none;height:30px;width:auto}
.lobby-link{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 8px;border:1px solid var(--line-soft);border-radius:4px;background:var(--neutral);color:var(--text);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.lobby-link svg{width:16px;height:16px}.lobby-link:hover{border-color:var(--blue);background:var(--blue-soft)}
.game-title{font-size:16px;font-weight:700;color:var(--text)}
.title-ball{border-color:#202326;box-shadow:0 0 0 1px #5d6168;color:#1b1d20}
.game-tabs{align-self:stretch;gap:0}
.game-tabs a{min-height:0;height:100%;padding:0 13px;border:0;border-radius:0;color:#e3e0d6;font-size:15px;font-weight:600;box-shadow:inset 0 -3px 0 transparent}
.game-tabs a:hover{background:rgba(255,255,255,.05);color:#fff}
.game-tabs a.active{border:0;background:none;color:#fff;box-shadow:inset 0 -3px 0 var(--blue)}
.mode-tabs button{min-height:32px;border-radius:4px;color:#e3e0d6;font-size:14px;background:var(--neutral);border:1px solid var(--line-soft)}
.mode-tabs button:hover{background:rgba(255,255,255,.1)}
.mode-tabs button.active,.mode-tabs button[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-deep);color:#fff}
#match-type{color:var(--dim);font-size:11px;font-weight:600;letter-spacing:1.2px}
.clock strong{font-size:23px;font-weight:700}.clock>span:last-child{color:var(--dim)}

.table-shell{border:1px solid rgba(255,255,255,.12);border-radius:6px;background:#0e1012;box-shadow:0 16px 40px rgba(0,0,0,.55)}
.table-tag,.shot-indicator,.table-spin-preview,.table-shell>.spin-control{background:rgba(20,22,25,.86);border:1px solid var(--line-soft);border-radius:5px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.table-tag-label{color:var(--gold)}.status-ball{border-color:#202326}.shot-indicator strong{color:#e3e0d6}
.table-message{border:0;border-radius:5px;background:rgba(241,239,230,.96);color:#1b1d20;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.table-message>svg{color:var(--blue-deep)}.table-message span{color:#4a4c50}
.table-message.foul{background:#f6e3da;border:0}.table-message.foul>svg{color:#b4532f}
.table-bottom-actions .icon-button{background:rgba(20,22,25,.86);border-color:var(--line-soft);color:var(--text)}
.icon-button{border-color:var(--line-soft);border-radius:4px}
.icon-button:not(:disabled):hover{background:var(--blue-soft);border-color:var(--blue);color:#fff}
.view-caption strong{color:#e3e0d6}
.move-cue{border:1px solid var(--gold-bright);border-radius:4px;background:var(--gold);color:#1b1712;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.move-cue:hover{background:var(--gold-bright)}.move-cue[aria-pressed="true"]{background:var(--gold-bright);box-shadow:0 0 0 2px rgba(241,239,230,.6),0 4px 12px rgba(0,0,0,.4)}
.rule-action{background:#f1efe6;border-color:#fff;color:#1b1d20}.rule-action[aria-pressed="true"]{background:var(--gold);border-color:var(--gold-bright)}
.table-toolbar{color:#e3e0d6}.control-hint b{color:#fff}.control-hint i{color:var(--dim)}.mouse-icon{border-color:#cfccc2}
.text-button{color:var(--link);font-size:13px;font-weight:600}.text-button:hover{color:#fff}

.match-log,.player-card,.control-card{border:1px solid var(--line-soft);border-radius:6px;background:var(--glass);box-shadow:none;backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1)}
.match-log h2{padding:9px 14px 8px;background:var(--glass-head);border-bottom:1px solid var(--line-soft);color:var(--text);font-size:15px;font-weight:700}
#match-log-entries{color:var(--muted);font-size:14px;scrollbar-color:#5d6168 transparent}#match-log-entries strong{color:#fff}#match-log-entries .foul{color:var(--danger)}
.player-card.active{border-color:var(--blue);background:rgba(36,62,104,.62);box-shadow:inset 3px 0 0 var(--blue)}
.player-heading>strong{color:var(--text)}
.your-turn{border:0;border-radius:3px;background:var(--blue-deep);color:#fff}
.player-role{border-color:var(--line-soft);border-radius:4px;background:rgba(255,255,255,.07);color:var(--text)}
.player-card[data-group="solids"] .player-role{border-color:#c9a96c88;color:#f2dfb4;background:rgba(201,169,108,.14)}
.player-card[data-group="stripes"] .player-role{border-color:#f1efe6;background:#e9e6dc;color:#1b1d20}
.player-tally>span{color:var(--dim)}.player-score{color:#cfccc2;font-weight:700}.active .player-score{color:#fff}
.mini-ball.empty{border-color:rgba(255,255,255,.18);background:rgba(0,0,0,.25)}
.card-heading h2{color:var(--text);font-weight:700}.card-note{color:var(--dim)}.card-note b{color:#fff}
.cue-mode{border-radius:4px;color:var(--text)}.cue-mode kbd{color:#cfccc2;border-color:rgba(255,255,255,.18)}
.cue-mode:not(:disabled):hover{background:rgba(255,255,255,.06)}
.cue-mode.active,.cue-mode[aria-pressed="true"]{color:#fff;border-color:var(--blue);background:var(--blue-soft)}
.mode-dot{border-color:#6d717a;background:#121417}
.cue-mode.active .mode-dot,.cue-mode[aria-pressed="true"] .mode-dot{border-color:#8fbcf4;background:var(--blue);box-shadow:0 0 0 2px rgba(63,134,232,.25)}
.mode-note{color:var(--dim)}.mode-help{color:var(--muted)}
.stroke-feedback,.last-stroke,.turn-summary,#footer-status{color:var(--muted)}
.stroke-meter{background:rgba(255,255,255,.08)}.stroke-meter>span{background:linear-gradient(90deg,#9c7f48,var(--gold-bright))}
#stroke-value,.last-stroke output,.elevation-value,#elevation-cue-line{color:var(--gold-bright)}
.section-label{color:var(--text)}.micro-button{color:var(--gold-bright)}.spin-label{color:var(--dim)}
.spin-readout strong{color:#fff}.spin-readout>span,.spin-readout small{color:var(--muted)}.elevation-diagram{color:#cfccc2}
.spin-ball{background:radial-gradient(circle at 32% 26%,#fffffc 0%,#efede4 38%,#c9c6bb 74%,#86847c 100%)}
.spin-marker{background:#d63f2c}.table-spin-preview .spin-marker,.table-shell>.spin-control .spin-marker{background:var(--blue)}
.table-shell>.spin-control .micro-button{border-color:var(--gold-bright);background:var(--gold);color:#1b1712}
input[type="range"]{background:rgba(255,255,255,.12)}
input[type="range"]::-webkit-slider-thumb{border-color:var(--gold-bright);background:var(--gold)}
input[type="range"]::-moz-range-thumb{border-color:var(--gold-bright);background:var(--gold)}
.view-buttons .icon-button,.utility-controls .icon-button{border:1px solid var(--line-soft);border-radius:4px;background:var(--neutral);color:var(--text);box-shadow:none}
.view-buttons .icon-button:hover,.utility-controls .icon-button:hover{background:var(--blue-soft);border-color:var(--blue);color:#fff}
.camera-controls button{border:1px solid var(--line-soft);border-radius:4px;background:var(--neutral);color:var(--text)}
.camera-controls button:hover{background:rgba(255,255,255,.1);color:#fff}
.camera-controls button.active,.camera-controls button[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-deep);color:#fff}
.secondary-button{border:1px solid var(--gold-bright);border-radius:4px;background:var(--gold);color:#1b1712;font-size:13px}
.secondary-button:not(:disabled):hover{background:var(--gold-bright);border-color:#f0dcb0;color:#120f0a}
.secondary-button:disabled{background:var(--neutral);border-color:var(--line-soft);color:#cfccc2;opacity:.55}

.loading-screen{background:#141618}.loading-ball{border-color:#202326;background:#f1efe6;color:#1b1d20;box-shadow:0 0 0 1px #5d6168,0 6px 16px rgba(0,0,0,.4)}.loading-screen>span:last-child{color:var(--dim)}
.paused-overlay{background:rgba(14,16,18,.84)}.pause-symbol{border-color:var(--line);color:var(--gold-bright);background:rgba(201,169,108,.12)}.paused-overlay p{color:var(--muted)}
.primary-button{border:1px solid var(--gold-bright);border-radius:4px;background:var(--gold);color:#1b1712;font-weight:700}
.primary-button:not(:disabled):hover{background:var(--gold-bright);border-color:#f0dcb0}
.toast{border-color:var(--line-soft);border-radius:5px;background:rgba(28,31,35,.97);color:var(--text)}
dialog{border:1px solid var(--line-soft);border-radius:8px;background:#1c1f23;color:var(--text);box-shadow:0 24px 80px rgba(0,0,0,.7);scrollbar-color:#5d6168 transparent}
dialog::backdrop{background:rgba(8,9,10,.66);backdrop-filter:blur(5px)}
.dialog-eyebrow,.dialog-section-title{color:var(--gold);font-weight:700;letter-spacing:1.4px}
.dialog-title{color:#fff;font-weight:700;letter-spacing:-.3px}
.dialog-description,.control-table td,.rule-notes{color:var(--muted)}.control-table th{color:#fff}
.dialog-secondary{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-soft);border-radius:4px;background:var(--neutral);color:var(--text);text-decoration:none;font-weight:600}
.dialog-secondary:hover{background:rgba(255,255,255,.12);border-color:var(--line)}
.mode-choice{border:1px solid var(--line-soft);border-radius:5px;background:rgba(255,255,255,.05);color:var(--text)}
.mode-choice:hover{border-color:var(--blue);background:var(--blue-soft)}
.mode-choice .choice-symbol,.mode-choice>svg{color:var(--gold-bright)}.mode-choice strong{color:#fff}.mode-choice small{color:var(--muted)}
.setting-row small{color:var(--dim)}
.toggle{border-color:rgba(255,255,255,.2);background:#2a2d32}.toggle::after{background:#9a978f}
.toggle:checked{border-color:var(--blue);background:var(--blue-deep)}.toggle:checked::after{background:#fff}
.setting-select{border-color:var(--line);border-radius:4px;background:#121417;color:var(--text)}
.winner-ball{border-color:#202326;background:#f1efe6;color:#1b1d20;box-shadow:0 0 0 1px var(--gold)}
.match-stats strong{color:#fff;font-weight:700}.match-stats span{color:var(--dim)}
@media(max-width:1120px){.brand .brand-wide{height:36px}.game-tabs a{padding:0 9px;font-size:14px}.game-title{display:none}}
@media(max-width:899px) and (orientation:portrait){.game-header{height:50px;gap:8px}.brand .brand-wide{display:none}.brand .brand-icon{display:block}.game-tabs a{font-size:13px;padding:0 8px}.lobby-link span{display:none}.lobby-link{padding:0 7px}}
@media(max-width:560px){.brand{display:none}.game-tabs a{padding:0 6px;font-size:12px}.mode-tabs button{padding:0 7px;font-size:12px}}
@media(max-width:430px){.game-header{padding:0 6px;gap:5px}.game-tabs a{padding:0 4px;font-size:11px}.mode-tabs button{padding:0 5px;font-size:11px}.lobby-link{height:30px;padding:0 5px}}
@media(max-height:560px) and (orientation:landscape){.game-header{height:42px;gap:10px}.brand .brand-wide{display:none}.brand .brand-icon{display:block;width:auto;height:26px}.lobby-link span,#match-type{display:none}.lobby-link{height:30px;padding:0 6px}.mode-tabs button{white-space:nowrap;min-height:30px;padding:0 9px}.game-tabs a{padding:0 8px;font-size:13px}}

.table-control-buttons:has(#concede-button:not([hidden])){grid-template-columns:repeat(3,minmax(0,1fr))}
.secondary-button.concede-button{border-color:var(--line-soft);background:var(--neutral);color:var(--text)}
.secondary-button.concede-button:not(:disabled):hover{border-color:#e0796b;background:rgba(224,121,107,.18);color:#fff}

:root{--sidebar:clamp(296px,22vw,360px);--chat-h:148px;--gap:10px;--ease:cubic-bezier(.2,.8,.2,1)}
html,body{height:100%}
body{overflow:hidden}
.game-header .session-status{gap:14px}
.utility-controls{display:flex;align-items:center;gap:4px;padding-left:12px;border-left:1px solid var(--line-soft)}
.utility-controls .icon-button{width:34px;height:34px;border:1px solid transparent;background:transparent;color:#d8d5cb}
.utility-controls .icon-button svg{width:19px;height:19px}
.utility-controls .icon-button:hover{background:rgba(255,255,255,.08);border-color:var(--line-soft);color:#fff}

.game-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar);gap:var(--gap);width:100%;
  max-width:calc((100dvh - 54px - 22px - var(--chat-h) - 34px) * 2.05 + var(--sidebar) + 36px);
  height:calc(100dvh - 54px);margin:0 auto;padding:10px 12px 12px;overflow:hidden}
.arena{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0}
.table-shell{flex:1 1 auto;min-height:200px;aspect-ratio:auto;width:100%}

.table-toolbar{min-height:28px;padding:0 2px}
.toolbar-links{display:flex;align-items:center;gap:16px}
.table-toolbar .text-button{gap:6px;font-size:13px}
.table-toolbar .text-button svg{width:16px;height:16px}
#log-latest{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-anchor{position:relative}
.match-log{position:absolute;right:0;bottom:calc(100% + 8px);z-index:30;width:min(380px,80vw);max-height:300px;margin:0;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:10px;background:rgba(22,24,27,.97);box-shadow:0 18px 50px rgba(0,0,0,.6);
  transform-origin:bottom right;animation:pop .16s var(--ease)}
.match-log[hidden]{display:none!important}
.match-log h2{padding:10px 14px;font-size:13px;letter-spacing:.3px;border-radius:10px 10px 0 0}
#match-log-entries{flex:1;min-height:0;overflow-y:auto;padding:8px 14px 12px;font-size:13px;line-height:1.5;scrollbar-width:none}
#match-log-entries::-webkit-scrollbar{display:none}
#match-log-entries>*{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05)}
#match-log-entries>*:last-child{border-bottom:0}

.chat{flex:0 0 var(--chat-h);display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;overflow:hidden;
  border:1px solid var(--line-soft);border-radius:8px;background:var(--glass);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1)}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;border-bottom:1px solid var(--line-soft);background:var(--glass-head)}
.chat-head h2{display:flex;align-items:center;gap:7px;margin:0;font-size:14px;font-weight:700}
.chat-head h2 svg{width:16px;height:16px;color:var(--gold-bright)}
.chat-note{color:var(--dim);font-size:11px;letter-spacing:.4px}
.chat-feed{min-height:0;overflow-y:auto;padding:6px 12px;font-size:13.5px;line-height:1.45;scrollbar-width:none;overscroll-behavior:contain}
.chat-feed::-webkit-scrollbar{display:none}
.chat-feed p{margin:0;padding:2px 0;color:var(--muted)}
.chat-feed .chat-empty{color:var(--dim);font-style:italic}
.chat-feed b{color:var(--gold-bright);font-weight:700;margin-right:6px}
.chat-feed .p1 b{color:#8fbcf4}
.chat-feed time{float:right;margin-left:8px;color:#6f6d66;font-size:11px}
.chat-form{display:flex;gap:6px;padding:6px 8px 8px}
.chat-form input{flex:1;min-width:0;height:34px;padding:0 12px;border:1px solid var(--line-soft);border-radius:6px;background:rgba(0,0,0,.28);color:var(--text);font:inherit;font-size:14px;outline:none;transition:border-color .12s,background .12s}
.chat-form input:focus{border-color:var(--blue);background:rgba(0,0,0,.4)}
.chat-form input::placeholder{color:#8a877f}
.chat-send{display:grid;place-items:center;width:38px;height:34px;border:1px solid var(--gold-bright);border-radius:6px;background:var(--gold);color:#1b1712}
.chat-send:hover{background:var(--gold-bright)}
.chat-send svg{width:17px;height:17px}

.control-sidebar{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden;padding:0}
.players{display:grid;gap:6px}
.player-card{min-height:0;padding:9px 12px 10px}
.player-heading{display:flex;align-items:center;gap:8px;min-height:24px}
.player-heading>strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
.player-card:not(.active) .your-turn{display:none}
.your-turn{flex:none;padding:3px 6px;font-size:10px;letter-spacing:.6px}
.player-tally{margin-left:auto;align-items:baseline}
.player-score{font-size:24px}
.player-state{display:flex;align-items:center;gap:8px;height:auto;min-height:24px;margin:6px 0 0}
.player-role{flex:none;min-height:24px;padding:2px 8px 2px 4px;gap:6px;font-size:12px;white-space:nowrap}
.player-role::before{display:none}
.role-ball{width:18px;height:18px;flex:none;border-radius:50%}
.ball-track{flex:1;min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:center;gap:3px;height:auto}
.mini-ball{width:19px;height:19px}
img.mini-ball{display:block;flex:none;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.45);background:none}
img.mini-ball.potted{opacity:.22;filter:grayscale(.6)}
.mini-ball.empty{width:17px;height:17px}

.control-card{padding:10px 12px}
.card-heading{justify-content:space-between;min-height:20px;margin-bottom:8px}
.card-heading h2{font-size:14px;letter-spacing:.3px;text-transform:uppercase;color:#d8d5cb}
.view-controls .card-note{display:inline;font-size:11px}
.mode-badge{padding:2px 8px;border-radius:999px;background:var(--blue-soft);color:#cfe1fb;font-size:11px;font-weight:700;letter-spacing:.4px}
.cue-modes{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.cue-mode{min-height:36px;gap:6px;padding:4px 8px;border:1px solid var(--line-soft);background:rgba(255,255,255,.035);font-size:14px;font-weight:600;white-space:nowrap}
.cue-mode .mode-dot{display:none}
.cue-mode kbd{margin-left:auto;padding:0 4px;font-size:10px}
.cue-mode.active,.cue-mode[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-deep);color:#fff;box-shadow:0 0 0 1px rgba(63,134,232,.35),0 4px 14px rgba(47,111,208,.35)}
.cue-mode.active kbd{border-color:rgba(255,255,255,.45);color:#fff}
.cue-mode.held{transform:translateY(1px)}
.mode-help{min-height:34px;margin:8px 1px 6px;font-size:12.5px;line-height:1.4}
.stroke-feedback{padding-top:6px;font-size:12px}

.camera-controls{grid-template-columns:repeat(3,minmax(0,1fr)) 36px;gap:4px;margin:0 0 6px;padding:0;border:0}
.camera-controls button{min-height:34px;font-size:14px}
.view-adjustments{display:flex;align-items:center;gap:4px}
.view-mode{flex:1;min-width:0}
.view-mode kbd{display:inline-block}
.view-buttons{display:flex;gap:4px}
.view-buttons .icon-button{width:34px;height:34px}
.view-buttons .icon-button.held,.camera-controls button.held{border-color:var(--blue);background:var(--blue-soft);color:#fff}

.table-controls{margin-top:auto}
.table-controls .card-heading h2{font-size:14px}
.table-control-buttons{gap:5px}
.secondary-button{min-height:36px;font-weight:700}
.table-status{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.turn-summary{flex:1;min-width:0;margin:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.last-stroke{display:inline-flex;gap:5px;align-items:baseline;margin:0;padding:0;border:0;font-size:12px;color:var(--dim);white-space:nowrap}
.last-stroke output{font-weight:700}

.table-tag{padding:7px 12px 7px 7px;gap:10px;border-radius:8px}
img.status-ball{display:block;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;box-shadow:0 2px 6px rgba(0,0,0,.5)}
html[data-game] img.status-ball{background:none}
img.status-ball:not([hidden])+.status-ball-fallback{display:none}
.call-ball img{display:block;width:100%;height:100%;border-radius:50%}
.call-ball.has-img{background:none!important;box-shadow:none}
.move-cue kbd{margin-left:4px;border-color:rgba(27,23,18,.3);background:rgba(27,23,18,.1);color:#3b2f1a}

.table-shell>.table-elevation{position:absolute;top:10px;left:50%;z-index:6;width:250px;margin:0;padding:10px 14px;transform:translateX(-50%);
  border:1px solid var(--line-soft);border-radius:8px;background:rgba(20,22,25,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.table-shell>.table-elevation .elevation-row{margin-top:6px}

.loading-screen{gap:16px;background:radial-gradient(ellipse at 50% 40%,#22262b,#121416 70%)}
.loading-logo{width:190px;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.loading-bar{position:relative;width:160px;height:3px;overflow:hidden;border-radius:3px;background:rgba(255,255,255,.1)}
.loading-bar i{position:absolute;inset:0;width:40%;border-radius:3px;background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);animation:loadbar 1.1s ease-in-out infinite}
.loading-screen>span:last-child{color:var(--dim);font-size:12px;letter-spacing:.4px}
@keyframes loadbar{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

.paused-overlay{background:rgba(10,11,13,.62);backdrop-filter:blur(6px) saturate(.9);-webkit-backdrop-filter:blur(6px) saturate(.9);animation:fade .14s ease-out}
.pause-card{display:flex;flex-direction:column;align-items:center;text-align:center;animation:pop .18s var(--ease)}
.pause-play{display:grid;place-items:center;width:78px;height:78px;border:1px solid var(--gold-bright);border-radius:50%;background:var(--gold);color:#1b1712;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 8px rgba(201,169,108,.14);transition:transform .12s var(--ease),background .12s}
.pause-play:hover{background:var(--gold-bright);transform:scale(1.05)}
.pause-play svg{width:30px;height:30px;margin-left:4px;fill:currentColor;stroke-width:1.2}
.pause-card h2{margin:18px 0 4px;font-size:28px;font-weight:700;letter-spacing:-.3px}
.pause-card p{margin:0 0 20px;color:var(--muted);font-size:13px}
.pause-actions{display:flex;gap:8px}
.ghost-button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.06);color:var(--text);font-size:13px;font-weight:600;text-decoration:none}
.ghost-button:hover{border-color:var(--blue);background:var(--blue-soft);color:#fff}
.ghost-button svg{width:16px;height:16px}

.toast{bottom:auto;top:66px;border-radius:8px;font-weight:600;box-shadow:0 12px 34px rgba(0,0,0,.5);animation:pop .16s var(--ease)}

dialog{width:min(460px,calc(100vw - 28px));padding:26px 26px 22px;border:1px solid rgba(255,255,255,.12);border-radius:14px;
  background:linear-gradient(180deg,#24272c,#1a1c20);box-shadow:0 30px 90px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden auto;scrollbar-width:none}
dialog::-webkit-scrollbar{display:none}
dialog[open]{animation:sheet .18s var(--ease)}
dialog::backdrop{background:rgba(6,7,8,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .18s ease-out}
dialog.wide{width:min(640px,calc(100vw - 28px))}
.dialog-close{top:12px;right:12px;width:32px;height:32px;border-color:transparent;background:rgba(255,255,255,.05)}
.dialog-close svg{width:17px;height:17px}
.dialog-eyebrow{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--gold-bright);font-size:11px;letter-spacing:1.6px}
.dialog-title{margin:8px 36px 6px 0;font-size:26px;line-height:1.15}
.dialog-description{margin:0 0 18px;font-size:14px;line-height:1.55}
.dialog-action-row{display:flex;gap:8px;margin-top:20px}
.dialog-action-row>*{flex:1}
.primary-button,.dialog-secondary,.danger-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:8px;font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}
.dialog-secondary{font-size:14px;font-weight:600}
.danger-button{border:1px solid #f08a77;background:#c9533f;color:#fff}
.danger-button:hover{background:#dc6450}
.primary-button kbd,.dialog-secondary kbd,.danger-button kbd{margin-left:4px;font-size:10px;opacity:.75;border-color:currentColor;background:transparent;color:inherit}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:150px;padding:16px;border:1px solid var(--line-soft);border-radius:12px;
  background:rgba(255,255,255,.04);color:var(--text);text-align:left;transition:transform .12s var(--ease),border-color .12s,background .12s}
.choice-tile:hover,.choice-tile:focus-visible{border-color:var(--blue);background:var(--blue-soft);transform:translateY(-2px)}
.choice-tile.recommended{border-color:rgba(201,169,108,.7);background:linear-gradient(180deg,rgba(201,169,108,.16),rgba(201,169,108,.05))}
.choice-tile img,.choice-tile .tile-icon{width:46px;height:46px;border-radius:50%;margin-bottom:4px}
.choice-tile .tile-icon{display:grid;place-items:center;border:1px solid var(--line);color:var(--gold-bright);font-size:26px;font-weight:700}
.choice-tile strong{font-size:16px}
.choice-tile small{color:var(--muted);font-size:12.5px;line-height:1.45}
.choice-tile kbd{position:absolute;top:12px;right:12px}
.winner-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 0 2px}
.winner-hero img{width:92px;height:92px;border-radius:50%;filter:drop-shadow(0 10px 24px rgba(0,0,0,.6));animation:drop .5s var(--ease)}
.winner-hero .dialog-title{margin:14px 0 4px}
.winner-hero .dialog-description{margin-bottom:0}
.match-stats{justify-content:space-around;gap:10px;margin-top:18px;padding:14px 0;border-color:var(--line-soft)}
.match-stats>div{text-align:center}
.match-stats strong{font-size:26px}
.setting-row{padding:12px 0}
.setting-row strong{font-size:14px;font-weight:600}
.setting-row small{font-size:12px;line-height:1.45}
.help-tabs{display:flex;gap:4px;margin:4px 0 14px;padding:3px;border-radius:8px;background:rgba(0,0,0,.25)}
.help-tabs button{flex:1;min-height:34px;border-radius:6px;color:var(--muted);font-weight:700;font-size:13px}
.help-tabs button[aria-selected="true"]{background:var(--blue-deep);color:#fff}
.key-grid{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13.5px;line-height:1.45}
.key-grid dt{color:#fff;font-weight:700;white-space:nowrap}
.key-grid dd{margin:0;color:var(--muted)}
.rule-notes{font-size:13.5px;line-height:1.6}
@keyframes sheet{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes drop{from{transform:translateY(-18px) scale(.8);opacity:0}to{transform:none;opacity:1}}

@media (min-width:900px) and (max-height:820px){
  :root{--chat-h:118px}
  .control-sidebar{gap:6px}.control-card{padding:8px 10px}.card-heading{margin-bottom:6px}
  .player-card{padding:7px 11px 8px}.player-state{margin-top:4px}.player-score{font-size:21px}
  .cue-mode,.camera-controls button,.secondary-button{min-height:32px}.view-buttons .icon-button{width:32px;height:32px}
  .mode-help{min-height:0;margin:6px 1px 4px;font-size:12px}
}
@media (min-width:900px) and (max-height:700px){
  :root{--chat-h:96px}
  .card-heading{display:none}.mode-help{display:none}.table-status{margin-top:6px}
  .chat-head{padding:4px 12px}.chat-form{padding:4px 6px 6px}.chat-form input,.chat-send{height:30px}
}
@media (min-width:900px) and (max-height:600px){
  :root{--chat-h:42px}
  .chat-head,.chat-feed{display:none}.stroke-feedback{display:none}.players{gap:4px}.player-heading>strong{font-size:14px}
}
@media (max-width:1120px) and (min-width:900px){
  :root{--sidebar:286px}.cue-mode kbd{display:none}.control-hint{display:none}
}

@media (max-width:899px) and (orientation:portrait){
  body{overflow:auto;scrollbar-width:none}body::-webkit-scrollbar{display:none}
  .game-layout{display:flex;flex-direction:column;height:auto;max-width:none;padding:8px;gap:8px;overflow:visible}
  .arena{display:contents}
  .table-shell{order:1;flex:none;aspect-ratio:4/3;min-height:0}
  .table-toolbar{order:2}.control-hint{display:none}.toolbar-links{width:100%;justify-content:space-between}
  .control-sidebar{order:3;display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:visible}
  .players{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:6px}
  .cue-controls,.view-controls,.table-controls{grid-column:1/-1}
  .chat{order:4;flex:none;height:180px}
  .player-card{padding:8px 10px}.player-heading>strong{font-size:14px}.player-score{font-size:20px}
  .player-state{flex-wrap:wrap}.ball-track{justify-content:flex-start;flex-basis:100%}
  .cue-mode{min-height:42px;font-size:15px}.cue-mode kbd{display:none}
  .utility-controls{padding-left:6px;gap:0}.utility-controls .icon-button{width:30px;height:30px}
  #match-type{display:none}
  .match-log{position:fixed;left:8px;right:8px;bottom:12px;width:auto}
}
@media (max-height:560px) and (orientation:landscape){
  :root{--sidebar:280px;--chat-h:40px}
  .game-layout{height:calc(100dvh - 42px);padding:6px;gap:6px}
  .chat-head,.chat-feed,.mode-help,.card-heading,.stroke-feedback,.control-hint{display:none}
  .cue-mode,.camera-controls button,.secondary-button{min-height:30px;font-size:13px}.view-buttons .icon-button{width:30px;height:30px}
  .player-card{padding:5px 9px}.player-score{font-size:18px}.player-heading>strong{font-size:13px}.player-state{margin-top:2px}
  .control-card{padding:6px 8px}.control-sidebar{gap:5px}
  .utility-controls{display:none}
}

.title-ball.has-img{width:28px;height:28px;padding:0;border:0;background:none;box-shadow:none;overflow:visible}
.title-ball img{display:block;width:100%;height:100%;border-radius:50%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.mobile-utility{display:none}
@media (max-width:899px) and (orientation:portrait){
  .game-header .utility-controls{display:none}
  .mobile-utility{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}
  .mobile-utility .icon-button{width:40px;height:40px;background:var(--neutral)}
  .player-tally>span{display:none}.your-turn{font-size:9px;padding:2px 5px}
}
@media (max-height:560px) and (orientation:landscape){.utility-controls{display:flex;gap:0;padding-left:4px}.utility-controls .icon-button{width:28px;height:28px}}

@media (min-width:900px) and (min-height:880px){
  :root{--chat-h:160px}
  .control-sidebar{gap:10px}.players{gap:8px}
  .player-card{padding:12px 14px}.player-heading>strong{font-size:18px}.player-score{font-size:28px}.player-state{margin-top:8px}
  .mini-ball,img.mini-ball{width:22px;height:22px}.role-ball{width:20px;height:20px}
  .control-card{padding:13px 14px}.card-heading{margin-bottom:10px}
  .cue-mode{min-height:44px;font-size:15px}.cue-modes{gap:6px}
  .camera-controls button,.secondary-button{min-height:42px}.camera-controls{grid-template-columns:repeat(3,minmax(0,1fr)) 42px;gap:6px;margin-bottom:8px}
  .view-buttons .icon-button{width:40px;height:40px}.view-adjustments,.view-buttons{gap:6px}
  .mode-help{font-size:13px;min-height:38px}.table-status{margin-top:10px}
}
@media (max-width:899px) and (orientation:portrait){.game-header{overflow:hidden}.session-status{flex:none}.clock{min-width:0}.clock-dot,#clock-unit{display:none}}
@media (max-width:430px){.game-header{gap:4px}.mode-tabs button{padding:0 6px;font-size:11px;min-height:30px}.game-tabs a{padding:0 4px}.clock strong{font-size:19px}}

.pill-toggle{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border:1px solid var(--line-soft);border-radius:999px;background:rgba(255,255,255,.05);color:#d8d5cb;font-size:11.5px;font-weight:700;letter-spacing:.2px}
.pill-toggle svg{width:14px;height:14px}
.pill-toggle:hover{border-color:var(--blue);background:var(--blue-soft);color:#fff}
.env-toggle[aria-pressed="true"]{border-color:var(--gold-bright);color:var(--gold-bright)}
.table-bottom-actions .env-toggle[aria-pressed="true"]{background:rgba(201,169,108,.18)}
.loading-bar i{will-change:transform;transform:translate3d(-100%,0,0);animation:loadbar 1.2s cubic-bezier(.45,0,.55,1) infinite}
@keyframes loadbar{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(250%,0,0)}}
@media (min-width:900px) and (max-height:700px){.view-controls .card-heading{display:none}}

html{--cloth-glow:31,122,67;--cloth-glow-2:18,74,42}
html[data-game="9ball"]{--cloth-glow:42,99,184;--cloth-glow-2:22,52,104}
html[data-game="snooker"],html[data-game="quick"]{--cloth-glow:29,107,58;--cloth-glow-2:16,62,34}
html[data-game] body,html[data-game="9ball"] body,html[data-game="snooker"] body,html[data-game="quick"] body{background:transparent}

html[data-game]{min-height:100%;
  background:
    radial-gradient(ellipse 62% 52% at 50% -10%,rgba(255,212,150,.26),rgba(255,196,120,.08) 52%,transparent 76%),
    radial-gradient(ellipse 75% 48% at 50% 115%,rgba(var(--cloth-glow),.42),rgba(var(--cloth-glow-2),.16) 46%,transparent 74%),
    radial-gradient(ellipse 34% 70% at 0% 55%,rgba(201,169,108,.10),transparent 70%),
    radial-gradient(ellipse 34% 70% at 100% 55%,rgba(201,169,108,.10),transparent 70%),
    linear-gradient(180deg,#121417 0%,#0d0e10 55%,#0a0b0c 100%);
  background-color:#0b0c0e;background-attachment:fixed}
body::before,body::after{content:"";position:fixed;left:0;right:0;pointer-events:none;z-index:-1}

body::before{top:0;bottom:0;
  background:
    radial-gradient(ellipse 120% 95% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
  opacity:.9;mix-blend-mode:normal}

body::after{top:0;height:calc(100% + 640px);opacity:.4;will-change:transform;
  background:
    radial-gradient(1.4px 1.4px at 12% 18%,rgba(255,236,205,.55),transparent 70%),
    radial-gradient(1px 1px at 37% 64%,rgba(255,236,205,.45),transparent 70%),
    radial-gradient(1.8px 1.8px at 58% 32%,rgba(225,235,255,.35),transparent 70%),
    radial-gradient(1.1px 1.1px at 74% 82%,rgba(255,236,205,.45),transparent 70%),
    radial-gradient(1.5px 1.5px at 88% 46%,rgba(255,236,205,.4),transparent 70%),
    radial-gradient(1px 1px at 24% 90%,rgba(225,235,255,.35),transparent 70%);
  background-size:640px 640px;
  animation:dust 140s linear infinite}
@keyframes dust{from{transform:translate3d(0,0,0)}to{transform:translate3d(-60px,-640px,0)}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}

.game-header{background:rgba(12,13,15,.72)}

.ambience{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ambience i{position:absolute;display:block;border-radius:50%;will-change:transform,opacity;
  background:radial-gradient(circle,rgba(var(--c),.55) 0%,rgba(var(--c),.18) 38%,rgba(var(--c),0) 68%);animation:orb var(--t) ease-in-out infinite alternate}
.ambience .o1{--c:255,196,120;--t:38s;width:520px;height:520px;left:-140px;top:8%;opacity:.32}
.ambience .o2{--c:201,169,108;--t:52s;width:300px;height:300px;left:18%;top:62%;opacity:.22;animation-delay:-12s}
.ambience .o3{--c:var(--cloth-glow);--t:46s;width:680px;height:680px;left:34%;bottom:-420px;opacity:.5;animation-delay:-20s}
.ambience .o4{--c:255,214,160;--t:60s;width:240px;height:240px;right:22%;top:14%;opacity:.2;animation-delay:-30s}
.ambience .o5{--c:255,186,110;--t:44s;width:460px;height:460px;right:-120px;top:40%;opacity:.28;animation-delay:-8s}
.ambience .o6{--c:150,180,230;--t:70s;width:180px;height:180px;left:46%;top:24%;opacity:.12;animation-delay:-40s}
.ambience .o7{--c:var(--cloth-glow);--t:56s;width:360px;height:360px;right:6%;bottom:-120px;opacity:.3;animation-delay:-25s}
.ambience .beam{position:absolute;top:-20%;width:46vw;height:150%;opacity:.5;will-change:opacity;
  background:linear-gradient(90deg,rgba(255,214,160,0),rgba(255,214,160,.07) 45%,rgba(255,214,160,.11) 50%,rgba(255,214,160,.07) 55%,rgba(255,214,160,0));animation:beam 16s ease-in-out infinite alternate}
.ambience .beam-l{left:-6vw;transform:rotate(18deg);transform-origin:top center}
.ambience .beam-r{right:-6vw;transform:rotate(-18deg);transform-origin:top center;animation-delay:-8s}
@keyframes orb{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(40px,-30px,0) scale(1.12)}}
@keyframes beam{from{opacity:.35}to{opacity:.6}}
@media (prefers-reduced-motion:reduce){.ambience i,.ambience .beam{animation:none}}
@media (max-width:899px){.ambience .o1,.ambience .o5{width:300px;height:300px}.ambience .o3{width:420px;height:420px;bottom:-260px}.ambience .beam{width:70vw}}

.acct{position:relative;display:flex;align-items:center}
.acct-signin{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#f1efe6;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s}
.acct-signin:hover{border-color:#c9a96c;background:rgba(201,169,108,.12)}
.acct-chip{display:inline-flex;align-items:center;gap:8px;height:36px;max-width:220px;padding:0 10px 0 3px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.05);color:#f1efe6;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:border-color .15s,background .15s}
.acct-chip:hover,.acct-chip[aria-expanded="true"]{border-color:#c9a96c;background:rgba(201,169,108,.1)}
.acct-avatar{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#f3dfae,#c9a96c 55%,#8a6c37);color:#1b1712;font-size:14px;font-weight:800;box-shadow:inset 0 -2px 4px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.35)}
.acct-chip.guest .acct-avatar,.acct-menu-head .acct-avatar.guest{background:radial-gradient(circle at 32% 28%,#e7e5df,#a9a69d 55%,#5f5d58)}
.acct-avatar.big{width:42px;height:42px;font-size:19px}
.acct-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-caret{width:14px!important;height:14px!important;opacity:.7}
.acct-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:260px;padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:linear-gradient(180deg,#24272c,#1a1c20);box-shadow:0 24px 60px rgba(0,0,0,.6);animation:acct-pop .16s cubic-bezier(.2,.8,.2,1);transform-origin:top right}
.acct-menu[hidden]{display:none}
.acct-menu-head{display:flex;align-items:center;gap:12px;padding:8px 8px 12px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)}
.acct-menu-head strong{display:block;font-size:15px;color:#fff;word-break:break-all}
.acct-menu-head small{display:block;margin-top:2px;font-size:12px;color:#a9a69d}
.acct-item{display:flex;align-items:center;width:100%;min-height:38px;padding:0 10px;border:0;border-radius:8px;background:none;color:#e3e0d6;font:inherit;font-size:14px;font-weight:600;text-align:left;text-decoration:none;cursor:pointer}
.acct-item:hover{background:rgba(255,255,255,.07);color:#fff}
.acct-item.accent{color:#dcc08a}
@keyframes acct-pop{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
.game-header .acct{margin-left:4px}
@media (max-width:1280px){.game-header .acct-name{display:none}.game-header .acct-chip{padding-right:6px}.game-header .acct-caret{display:none}}
@media (max-width:899px) and (orientation:portrait){.game-header .acct{display:none}}
.game-header{position:relative;z-index:40}

.seat-av{flex:none;width:24px;height:24px;border-radius:50%;object-fit:cover;background:#1b3a2f;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 1px 4px rgba(0,0,0,.4)}
.lvl{--c:#ebe7dc;--t:#26241f;position:relative;display:inline-grid;place-items:center;flex:none;min-width:22px;height:18px;padding:0 5px;border-radius:5px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 55%,#fff) 0%,var(--c) 42%,color-mix(in srgb,var(--c) 72%,#000) 100%);
  color:var(--t);font-size:11px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.22),0 1px 3px rgba(0,0,0,.45)}
.lvl[hidden]{display:none}
.lvl::before{content:"";position:absolute;top:2px;left:50%;width:8px;height:3px;margin-left:-4px;border-radius:0 0 4px 4px;background:rgba(0,0,0,.16)}
.lvl[data-tier="1"]{--c:#3fa45e;--t:#fff}.lvl[data-tier="2"]{--c:#3f86e8;--t:#fff}.lvl[data-tier="3"]{--c:#8a5cd6;--t:#fff}
.lvl[data-tier="4"]{--c:#d0473c;--t:#fff}.lvl[data-tier="5"]{--c:#e58a2e;--t:#fff}.lvl[data-tier="6"]{--c:#1fa59d;--t:#fff}
.lvl[data-tier="7"]{--c:#d95c98;--t:#fff}.lvl[data-tier="8"]{--c:#c9ced6;--t:#23262a}.lvl[data-tier="9"]{--c:#e2b955;--t:#2a1f08}
.lvl[data-tier="10"]{--c:#202226;--t:#f0c75a;box-shadow:inset 0 0 0 1px #c9a96c,0 0 10px rgba(240,199,90,.35)}
.xp-gain{display:flex;align-items:center;gap:14px;margin-top:14px;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.04);text-align:left;animation:xp-in .35s cubic-bezier(.2,.8,.2,1)}
.xp-gain .lvl{min-width:38px;height:32px;border-radius:8px;font-size:17px}
.xp-gain>div{flex:1;min-width:0}.xp-gain strong{display:block;font-size:15px;color:#fff}
.xp-gain small{display:block;margin-top:5px;font-size:12px;color:var(--dim)}
.xp-bar{display:block;height:6px;margin-top:7px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}.xp-bar i{display:block;height:100%;background:linear-gradient(90deg,#8fbcf4,#3f86e8);border-radius:inherit}
.xp-gain.up{border-color:rgba(240,199,90,.5);background:linear-gradient(90deg,rgba(240,199,90,.14),rgba(255,255,255,.03))}.xp-gain.up strong{color:#f0d48a}
@keyframes xp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:700px){.seat-av{width:20px;height:20px}.player-heading .lvl{display:none}}

html.online .mode-tabs,html.online #pause-button,html.online #undo-button{display:none!important}
.seat-rank{flex:none;width:16px;height:16px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.seat-rank[hidden]{display:none}
.online-panel{position:absolute;inset:0;z-index:12;display:grid;place-items:center;padding:20px;background:rgba(10,12,14,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.online-panel[hidden]{display:none}
.online-card{position:relative;width:min(460px,100%);padding:26px 24px 22px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:linear-gradient(180deg,#24272c,#18191d);box-shadow:0 24px 70px rgba(0,0,0,.6);text-align:center;animation:xp-in .3s cubic-bezier(.2,.8,.2,1)}
.online-card h2{margin:8px 0 6px;font-size:23px;color:#fff}
.online-card p{margin:0 auto 16px;max-width:360px;color:var(--muted);font-size:14px;line-height:1.5}
.online-ball{width:64px;height:64px;margin:-58px auto 4px;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.ol-seats{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:6px 0 18px}
.ol-vs{font-weight:800;font-size:12px;letter-spacing:.14em;color:var(--dim)}
.ol-seat{display:flex;align-items:center;gap:10px;min-width:0;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.04);text-align:left}
.ol-seat.empty{border-style:dashed;opacity:.8}
.ol-seat strong{display:flex;align-items:center;gap:5px;overflow:hidden;font-size:14px;color:#fff;white-space:nowrap;text-overflow:ellipsis}
.ol-seat small{display:block;margin-top:2px;font-size:12px;color:var(--dim)}
.ol-av{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.ol-seat.empty .ol-av{border:2px dashed rgba(255,255,255,.25);background:none;box-shadow:none}
.online-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.online-actions>*{flex:1 1 150px}
.online-spinner{display:block;width:26px;height:26px;margin:16px auto 0;border:3px solid rgba(255,255,255,.15);border-top-color:#f1c05b;border-radius:50%;animation:ol-spin .9s linear infinite}
.online-card>.online-spinner:first-child{margin:4px auto 10px}
@keyframes ol-spin{to{transform:rotate(360deg)}}
.online-bar{position:absolute;top:10px;left:50%;z-index:11;max-width:min(560px,calc(100% - 24px));padding:8px 14px;transform:translateX(-50%);border:1px solid rgba(241,192,91,.45);border-radius:18px;background:rgba(30,26,16,.92);color:#f6dfa3;font-size:13px;font-weight:600;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.online-bar.warn{border-color:rgba(224,71,60,.5);background:rgba(40,16,14,.92);color:#f6b0a8}
.online-bar[hidden]{display:none}
.online-result{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.online-result>span,.online-result .ol-note{grid-column:1/-1;margin:0;font-size:13px;color:var(--dim);text-align:center}
.ol-saving{animation:pc-dot 1.2s infinite}
@keyframes pc-dot{0%,100%{opacity:.4}50%{opacity:1}}
.ol-res{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 10px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.04)}
.ol-res.me{border-color:rgba(241,192,91,.45);background:rgba(241,192,91,.07)}
.ol-res strong{max-width:100%;overflow:hidden;font-size:13px;color:#fff;text-overflow:ellipsis;white-space:nowrap}
.ol-res b{font-size:22px;font-variant-numeric:tabular-nums}.ol-res b.up{color:#86dba0}.ol-res b.down{color:#f2928a}
.ol-res span{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.ol-res small{font-size:12px;color:#9ec4f2}
.chat-feed p.spec b{color:var(--dim)}
@media(max-width:700px){.online-card{padding:22px 16px 18px}.online-card h2{font-size:20px}.ol-seats{grid-template-columns:1fr;gap:6px}.ol-vs{display:none}}
@media(max-width:700px){
  .online-panel{position:fixed;inset:0;z-index:80;align-items:start;overflow-y:auto;padding:76px 14px max(20px,env(safe-area-inset-bottom))}
  .online-ball{margin-top:-52px}
  .online-bar{top:6px;font-size:12px}
}
@media(max-width:430px){.player-heading .seat-rank{display:none}}
.seat-avw{flex:none}.seat-avw .avf{position:absolute;left:-22%;top:-22%;width:144%;height:144%;max-width:none;pointer-events:none}.seat-avw .seat-av{box-shadow:none}
.ns{background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}
.ns-silver{background-image:linear-gradient(180deg,#ffffff,#b9c0c9 55%,#eef1f4)}.ns-gold{background-image:linear-gradient(180deg,#fff2c2,#e2b44f 52%,#ffe08a)}
.ns-emerald{background-image:linear-gradient(180deg,#b6ffd9,#1fbf73 55%,#7ef0b3)}.ns-ruby{background-image:linear-gradient(180deg,#ffc2c8,#ef3348 55%,#ff8a96)}
.ns-sapphire{background-image:linear-gradient(180deg,#cfe0ff,#3d7cf0 55%,#9cc0ff)}.ns-chrome{background-image:linear-gradient(180deg,#fff 0%,#9aa3ad 45%,#3c434b 50%,#c9d0d8 75%,#fff 100%)}
.ns-sunset{background-image:linear-gradient(90deg,#ffb347,#ff5e62 55%,#ff3cac)}.ns-aurora{background-image:linear-gradient(90deg,#43e97b,#38f9d7 40%,#8a7cff 75%,#d36cff)}
.ns-neon{color:#ffe9fb!important;-webkit-text-fill-color:#ffe9fb;background:none;text-shadow:0 0 6px #ff2bd6,0 0 14px #ff2bd6}
.ns-champion{background-image:linear-gradient(180deg,#fff6d6,#f0c24d 48%,#b8811c 52%,#ffe39a)}
.avw{position:relative;display:inline-block;line-height:0;vertical-align:middle}
.prog{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.prog-ach,.prog-item{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:15px;font-size:14px;font-weight:700;text-decoration:none}
.prog-ach{border:1px solid rgba(201,169,108,.55);background:linear-gradient(180deg,rgba(201,169,108,.26),rgba(201,169,108,.08));color:#ffe6ae}.prog-ach svg{width:16px;height:16px}
.prog-item{border:1px solid rgba(127,224,165,.5);background:rgba(127,224,165,.12);color:#bff3d3}

.ns-chalk{background-image:linear-gradient(180deg,#d9f2ff,#3f9ad0 55%,#9fd6f5)}
.ns-mint{background-image:linear-gradient(180deg,#e6fff4,#3fd19a 55%,#a8f0d2)}
.ns-rose{background-image:linear-gradient(180deg,#ffe3ec,#e27aa8 55%,#ffc2d8)}
.ns-violet{background-image:linear-gradient(180deg,#efe0ff,#8a4fe0 55%,#c9a6ff)}
.ns-street{color:#fff!important;-webkit-text-fill-color:#fff;background:none;-webkit-text-stroke:.6px #000;text-shadow:2px 2px 0 #000,0 0 1px #000;letter-spacing:.02em}
.ns-ocean{background-image:linear-gradient(90deg,#0f4a6b,#2ea3c7 45%,#bfe9f2)}
.ns-candy{background-image:repeating-linear-gradient(115deg,#ff5f8f 0 6px,#ffffff 6px 10px,#2ad1b0 10px 16px,#ffffff 16px 20px)}
.ns-ice{background-image:linear-gradient(180deg,#ffffff,#9fd6f5 50%,#ffffff 52%,#5fb6e6);filter:drop-shadow(0 0 4px rgba(159,214,245,.45))}
.ns-racing{background-image:linear-gradient(180deg,#ff8a8a,#d4202c 50%,#7d0f17 52%,#ff4b55)}
.ns-toxic{background-image:linear-gradient(180deg,#e6ff9a,#9dff2e 55%,#4a8a0a);filter:drop-shadow(0 0 5px rgba(157,255,46,.55))}
.ns-made{background-image:linear-gradient(180deg,#fff2c2,#d2b273 50%,#8a6a2a 52%,#e9cf8a);font-family:Georgia,"Times New Roman",serif;letter-spacing:.03em}
.ns-retro{background-image:linear-gradient(180deg,#18e0ff 0%,#ffffff 45%,#ff2bd6 52%,#ff8a00 100%);filter:drop-shadow(0 0 4px rgba(255,43,214,.5))}
@keyframes ns-sweep{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes ns-flow{0%{background-position:0 0}100%{background-position:200% 0}}
@keyframes ns-flicker{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.35}}
@keyframes ns-glitch{0%,86%,100%{transform:none;text-shadow:none}88%{transform:translateX(1px);text-shadow:-2px 0 #ff2bd6}90%{transform:translateX(-1px);text-shadow:2px 0 #18e0ff}92%{transform:none}}
@keyframes ns-glow{0%,100%{filter:drop-shadow(0 0 3px var(--g))}50%{filter:drop-shadow(0 0 9px var(--g))}}
.ns-neon{animation:ns-flicker 4.5s infinite}
.ns-dragon,.ns-royal,.ns-midnight,.ns-jackpot,.ns-diamond{background-size:200% 100%;animation:ns-sweep 3.4s linear infinite}
.ns-dragon{background-image:linear-gradient(100deg,#e8b84a 0%,#b3141c 30%,#ff6a3a 45%,#fff2c2 50%,#ff6a3a 55%,#b3141c 70%,#e8b84a 100%)}
.ns-royal{background-image:linear-gradient(100deg,#c58bff 0%,#6b2fa6 30%,#e9cf8a 45%,#fff6d6 50%,#e9cf8a 55%,#6b2fa6 70%,#c58bff 100%)}
.ns-midnight{background-image:linear-gradient(100deg,#8a6a2a 0%,#d9b56a 30%,#fff6d6 50%,#d9b56a 70%,#8a6a2a 100%);text-shadow:none}
.ns-jackpot{background-image:linear-gradient(100deg,#e2bb63 0%,#ff2a3a 25%,#ffe08a 45%,#ffffff 50%,#ffe08a 55%,#ff2a3a 75%,#e2bb63 100%)}
.ns-glitch{background-image:linear-gradient(180deg,#d6ffe6,#38ff7a 55%,#0f8a3a);animation:ns-glitch 3s infinite;filter:drop-shadow(0 0 4px rgba(56,255,122,.5))}
.ns-inferno{background-image:linear-gradient(90deg,#ff3d00,#ffd54f 25%,#ff6a1a 50%,#ffd54f 75%,#ff3d00);background-size:200% 100%;--g:rgba(255,106,26,.75);animation:ns-flow 1.6s linear infinite,ns-glow 1.4s ease-in-out infinite}
.ns-cosmic{background-image:linear-gradient(90deg,#7b2ff7,#18c8ff 25%,#ff6ad5 50%,#18c8ff 75%,#7b2ff7);background-size:200% 100%;--g:rgba(123,47,247,.7);animation:ns-flow 5s linear infinite,ns-glow 2.6s ease-in-out infinite}
.ns-storm{background-image:linear-gradient(180deg,#ffffff,#bfe8ff 50%,#7fd4ff);--g:rgba(127,212,255,.9);animation:ns-flicker 2.7s infinite,ns-glow 2.7s infinite}
.ns-borealis{background-image:linear-gradient(90deg,#2dffb3,#3bc9ff 25%,#b46bff 50%,#3bc9ff 75%,#2dffb3);background-size:200% 100%;--g:rgba(45,255,179,.6);animation:ns-flow 6s linear infinite,ns-glow 3s ease-in-out infinite}
.ns-diamond{background-image:linear-gradient(100deg,#aeb6c2 0%,#ffffff 20%,#cfd8e6 40%,#ffffff 48%,#e9f6ff 50%,#ffffff 52%,#cfd8e6 60%,#ffffff 80%,#aeb6c2 100%);--g:rgba(220,236,255,.8);animation:ns-sweep 2.6s linear infinite,ns-glow 2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.ns{animation:none!important}}

.lvl{--hx:.62em;isolation:isolate;min-width:2.35em;height:1.72em;padding:0 .62em;border-radius:0;box-shadow:none;
  clip-path:polygon(var(--hx) 0,calc(100% - var(--hx)) 0,100% 50%,calc(100% - var(--hx)) 100%,var(--hx) 100%,0 50%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 40%,#fff) 0%,var(--c) 50%,color-mix(in srgb,var(--c) 55%,#000) 100%);
  font-family:"Barlow Condensed","Source Sans 3",sans-serif;font-style:italic;font-weight:800;letter-spacing:0;padding-right:.7em}
.lvl::before{content:"";position:absolute;inset:.12em;z-index:-1;width:auto;height:auto;margin:0;border-radius:0;
  clip-path:polygon(calc(var(--hx) - .05em) 0,calc(100% - var(--hx) + .05em) 0,100% 50%,calc(100% - var(--hx) + .05em) 100%,calc(var(--hx) - .05em) 100%,0 50%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 82%,#fff) 0%,var(--c) 38%,color-mix(in srgb,var(--c) 78%,#000) 100%)}
.lvl::after{content:"";position:absolute;left:.4em;right:.4em;top:.12em;height:38%;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));clip-path:polygon(calc(var(--hx) - .3em) 0,calc(100% - var(--hx) + .3em) 0,100% 100%,0 100%)}
.lvl[data-tier="0"]{--c:#8f949b;--t:#fff}
.lvl[data-tier="10"]{--c:#e2b955;--t:#f6d77a;box-shadow:none;filter:drop-shadow(0 0 4px rgba(240,199,90,.55))}
.lvl[data-tier="10"]::before{background:linear-gradient(180deg,#3a3d44,#141518 70%)}
.lvl[data-tier="8"],.lvl[data-tier="9"]{text-shadow:0 1px 0 rgba(255,255,255,.35)}
.lvl:not([data-tier="8"]):not([data-tier="9"]):not([data-tier="10"]){text-shadow:0 1px 1px rgba(0,0,0,.45)}
.lvl.big{min-width:2.4em;height:1.75em;border-radius:0}.lvl.big::before{inset:.1em;width:auto;height:auto;margin:0;top:.1em}
.lvl.huge{min-width:2.3em;height:1.8em;border-radius:0}.lvl.huge::before{inset:.09em;width:auto;height:auto;margin:0;top:.09em;border-radius:0}
.acct-coins{display:flex!important;justify-content:space-between;align-items:center;gap:10px}.acct-coins b{display:inline-flex;align-items:center;gap:6px;color:#ffe6ae;font-variant-numeric:tabular-nums}.acct-coins b img{width:18px!important;height:18px!important;max-width:none;flex:none;border-radius:50%;box-shadow:none}

.m-menu-btn,.m-sheet{display:none}
.m-sheet[hidden]{display:none!important}
@media (max-width:899px) and (orientation:portrait),(max-height:560px) and (orientation:landscape){
  html,body{height:100%;overflow:hidden!important;overscroll-behavior:none}
  body{position:fixed;inset:0;width:100%;touch-action:manipulation}
  .game-header{--hh:48px;height:calc(var(--hh) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));gap:8px;overflow:visible}
  .game-header .brand{display:none}
  .lobby-link{height:34px;padding:0 8px;flex:none}.lobby-link span{display:none}
  .game-title{display:flex!important;flex:1 1 auto;min-width:0;gap:8px;font-size:16px!important;overflow:hidden;text-overflow:ellipsis}
  .game-title .title-ball{font-size:12px}
  .game-header .session-status{flex:none;gap:8px;margin-left:auto}
  #match-type{display:inline-flex!important;align-items:center;height:22px;padding:0 8px;border:1px solid var(--line-soft);border-radius:11px;background:rgba(255,255,255,.05);color:var(--dim);font-size:10.5px;font-weight:700;letter-spacing:.5px;white-space:nowrap}
  .game-header .acct,.game-header .utility-controls{display:none!important}
  .clock{min-width:0}.clock-dot,#clock-unit{display:none}.clock strong{font-size:20px}
  .m-menu-btn{position:relative;display:inline-grid;flex:none;width:40px;height:36px;background:var(--neutral)}
  .m-dot{position:absolute;top:5px;right:6px;width:8px;height:8px;border-radius:50%;background:#f1c05b;box-shadow:0 0 0 2px var(--header)}
  .m-dot[hidden]{display:none}

  .game-layout{height:calc(100dvh - 48px - env(safe-area-inset-top));max-width:none;min-height:0;overflow:hidden}

  .m-sheet{position:fixed;inset:0;z-index:70;display:block}
  .m-sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);animation:m-fade .18s ease}
  .m-sheet-card{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;max-height:min(86dvh,720px);border:1px solid var(--line-soft);border-bottom:0;border-radius:16px 16px 0 0;background:#17191c;box-shadow:0 -20px 60px rgba(0,0,0,.6);animation:m-up .24s var(--ease)}
  .m-sheet-head{display:flex;align-items:center;gap:10px;padding:12px 12px 10px 16px;border-bottom:1px solid var(--line-soft)}
  .m-sheet-head strong{font-size:17px;margin-right:auto}
  .m-sheet-lobby{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 8px;border:1px solid var(--line-soft);border-radius:6px;background:var(--neutral);color:var(--text);font-weight:600;text-decoration:none}.m-sheet-lobby svg{width:16px;height:16px}
  .m-sheet-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px calc(14px + env(safe-area-inset-bottom))}
  .m-sheet-games{display:flex;flex-direction:column;gap:8px}
  .m-sheet .game-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;height:auto}
  .m-sheet .game-tabs a{justify-content:center;height:40px;padding:0 4px;border:1px solid var(--line-soft);border-radius:6px;background:var(--neutral);font-size:13.5px;box-shadow:none}
  .m-sheet .game-tabs a.active{border-color:var(--blue);background:var(--blue-deep)}
  .m-sheet .mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;height:auto}
  .m-sheet .mode-tabs button{min-height:40px;padding:0 8px;font-size:14px}
  .m-sheet .control-card{flex:none}
  .m-sheet .table-toolbar{display:flex;flex:none;min-height:0;padding:0}
  .m-sheet .control-hint{display:none}
  .m-sheet .toolbar-links{width:100%;justify-content:space-between}
  .m-sheet .log-anchor{position:static}
  .m-sheet .match-log{position:fixed;left:10px;right:10px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:75;width:auto;max-height:50dvh}
  .m-sheet .chat{flex:none;height:250px}
  .m-sheet .mobile-utility{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}
  .m-sheet .mobile-utility .icon-button{width:40px;height:40px;background:var(--neutral)}
  @keyframes m-up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
  @keyframes m-fade{from{opacity:0}}
}

@media (max-width:899px) and (orientation:portrait){
  .game-layout{display:flex;flex-direction:column;gap:6px;padding:6px 6px max(6px,env(safe-area-inset-bottom))}
  .arena,.control-sidebar{display:contents}
  .players{order:1;flex:none;display:grid;grid-template-columns:1fr 1fr;gap:6px;grid-column:auto}
  .table-shell{order:2;flex:1 1 0;min-height:0;height:auto;aspect-ratio:auto}
  .cue-controls{order:3;flex:none;padding:5px;grid-column:auto}
  .cue-controls .card-heading,.cue-controls .mode-help,.cue-controls .stroke-feedback{display:none}
  .cue-modes{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
  .cue-mode{flex-direction:column;justify-content:center;gap:0;min-height:50px;padding:0 1px;font-size:12.5px;line-height:1.1;text-align:center;white-space:normal}
  .cue-mode>span:not(.mode-dot){display:block}
  .cue-mode kbd{display:none}
  .player-card{padding:5px 8px 6px}
  .player-heading{gap:5px;min-height:20px}
  .player-heading>strong{font-size:13.5px}
  .seat-avw,.seat-av{width:20px;height:20px}
  .player-score{font-size:18px;line-height:1}
  .player-tally>span{display:none}
  .your-turn{font-size:8.5px;padding:2px 4px;letter-spacing:.4px}
  .player-state{flex-wrap:nowrap;gap:5px;min-height:15px;margin-top:4px}
  .player-role{min-height:0;padding:0;border:0;background:none}
  .player-role>span{display:none}
  .role-ball{width:15px;height:15px}
  .ball-track{flex:1 1 auto;flex-basis:auto;justify-content:flex-start;gap:2px}
  .mini-ball,img.mini-ball{width:14px;height:14px}.mini-ball.empty{width:12px;height:12px}
  .ball-track:has(>:nth-child(9)) .mini-ball,.ball-track:has(>:nth-child(9)) img.mini-ball{width:11px;height:11px}
  .table-tag{top:8px;left:8px;padding:5px 9px 5px 5px;gap:7px}
  .table-tag .status-ball{width:24px;height:24px}
  .table-tag strong{font-size:11px}
  .table-message{bottom:58px;max-width:calc(100% - 20px);padding:9px 12px}
  .table-message strong{font-size:13px}.table-message span{font-size:11.5px}
  .table-bottom-actions{left:8px;bottom:8px}
  .table-bottom-actions .icon-button{width:36px;height:36px}
  .view-caption{display:none}
  .move-cue{right:8px;bottom:8px;min-height:36px;padding:0 11px}
  .move-cue kbd{display:none}
}
@media (max-width:899px) and (orientation:portrait) and (max-height:700px){
  .cue-mode{min-height:44px;font-size:12px}
  .player-card{padding:4px 7px 5px}.player-state{margin-top:2px}
}

@media (max-height:560px) and (orientation:landscape){
  .game-header{--hh:42px;height:calc(42px + env(safe-area-inset-top))}
  .game-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(176px,24vw,220px);gap:6px;height:calc(100dvh - 42px - env(safe-area-inset-top));padding:5px max(6px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
  .arena{display:flex;flex-direction:column;min-height:0}
  .table-shell{flex:1 1 0;min-height:0;aspect-ratio:auto}
  .control-sidebar{display:flex;flex-direction:column;gap:5px;min-height:0;overflow:hidden}
  .players{display:grid;grid-template-columns:1fr;gap:4px}
  .player-card{padding:4px 8px}
  .player-heading{gap:5px;min-height:18px}.player-heading>strong{font-size:12.5px}.player-score{font-size:16px}
  .seat-avw,.seat-av{width:18px;height:18px}
  .player-tally>span,.your-turn{display:none}
  .player-state{margin-top:2px;min-height:13px;gap:4px}
  .player-role{min-height:0;padding:0;border:0;background:none}.player-role>span{display:none}.role-ball{width:13px;height:13px}
  .ball-track{justify-content:flex-start;gap:2px}
  .mini-ball,img.mini-ball{width:12px;height:12px}.mini-ball.empty{width:10px;height:10px}
  .ball-track:has(>:nth-child(9)) .mini-ball,.ball-track:has(>:nth-child(9)) img.mini-ball{width:10px;height:10px}
  .cue-controls{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding:5px}
  .cue-controls .card-heading,.cue-controls .mode-help,.cue-controls .stroke-feedback{display:none}
  .cue-modes{flex:1 1 auto;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(30px,1fr);gap:4px}
  .cue-mode{min-height:0;justify-content:center;padding:0 4px;font-size:13px}
  .cue-mode kbd{display:none}
  .table-tag{top:6px;left:6px;padding:4px 8px 4px 4px;gap:6px}.table-tag .status-ball{width:22px;height:22px}.table-tag strong{font-size:10.5px}
  .view-caption{display:none}
  .table-bottom-actions{left:6px;bottom:6px}.table-bottom-actions .icon-button{width:32px;height:32px}
  .move-cue{right:6px;bottom:6px;min-height:32px;padding:0 10px}.move-cue kbd{display:none}
  .table-message{bottom:46px;padding:7px 11px}.table-message strong{font-size:12.5px}.table-message span{font-size:11px}
  .m-sheet-card{left:auto;top:0;width:min(420px,70vw);max-height:none;border-radius:14px 0 0 14px;border-bottom:1px solid var(--line-soft);animation:none}
}
.staff-tag{display:inline-flex;align-items:center;height:15px;margin-left:5px;padding:0 5px;border-radius:4px;font-size:9.5px;font-style:normal;font-weight:800;letter-spacing:.08em;text-transform:uppercase;vertical-align:1px}
.staff-tag.admin{background:linear-gradient(180deg,#f2d389,#c99a3b);color:#2a1d05}.staff-tag.mod{background:linear-gradient(180deg,#7fb8ff,#3f74d6);color:#071a3a}
.acct-item.staff{color:#f2d389}

.no-fs #fullscreen-button{display:none!important}
.m-quick{display:none}
@media (max-width:899px) and (orientation:portrait),(max-height:560px) and (orientation:landscape){
  #fullscreen-button,.table-bottom-actions .env-toggle,.table-bottom-actions .view-caption{display:none!important}
  .table-bottom-actions{gap:6px;align-items:stretch}
  .m-quick{display:flex;gap:2px;padding:2px;border:1px solid var(--line-soft);border-radius:10px;background:rgba(14,16,18,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .m-quick button{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:42px;height:38px;min-height:0;padding:0 6px;border:0;border-radius:8px;background:none;color:#d8d5cb;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;box-shadow:none;white-space:nowrap}
  .m-quick button svg{width:17px;height:17px}
  .m-quick button[aria-pressed="true"]{background:var(--blue-deep);color:#fff}
  .m-quick .m-call{margin-left:4px;border-left:0}
  .m-quick .m-call:disabled{opacity:.35}
  .m-quick .m-call[aria-pressed="true"]{background:var(--gold);color:#1b1712}
  .m-quick .m-call .mode-dot,.m-quick .m-call kbd{display:none}
  .table-bottom-actions #pause-button{width:42px;height:auto;border-radius:10px}
  .cue-controls [data-cue-mode="call"]{display:none}
  .cue-modes{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-height:560px) and (orientation:landscape){
  .cue-modes{grid-template-columns:1fr 1fr}
  .m-quick button{height:32px;min-width:38px}.m-quick button svg{width:15px;height:15px}
}
@media (max-width:899px) and (orientation:portrait){
  .move-cue{bottom:56px}
  .rule-action{bottom:56px}
  #move-cue:not([hidden])~.rule-action{bottom:104px}
  .table-message{bottom:104px}
}
@media (max-height:560px) and (orientation:landscape){.cue-modes [data-cue-mode="elevate"]{grid-column:1/-1}}

@media (max-width:899px) and (orientation:portrait),(max-height:560px) and (orientation:landscape),(pointer:coarse){
  .ambience,body::after,body::before{display:none!important}
  body{background:#0d0e10!important;background-attachment:scroll!important}
  .game-header,.table-shell *,.m-sheet-card,.chat,.control-card,.player-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .game-header{background:#121417}
  .table-tag,.shot-indicator,.table-spin-preview,.m-quick,.table-bottom-actions .icon-button{background:rgba(16,18,21,.9)}
}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.dialog-action-row,.pause-actions,.online-actions{flex-wrap:wrap}
.dialog-action-row>*,.pause-actions>*{flex:1 1 auto;min-width:0}
.cue-mode{min-width:0}
.cue-mode>span:not(.mode-dot){min-width:0;overflow:hidden;text-overflow:ellipsis}

/* best of 3 / 5: the frame score in the winner card, and the countdown to the next frame */
.series-score{display:flex;align-items:center;justify-content:center;gap:14px;margin:12px 0 4px;font-weight:700}
.series-score span{flex:1;min-width:0;overflow:hidden;color:var(--muted,#d8d5cb);font-size:15px;text-overflow:ellipsis;white-space:nowrap}
.series-score span:first-child{text-align:right}
.series-score b{display:grid;place-items:center;min-width:46px;height:46px;border-radius:12px;background:rgba(201,169,108,.14);color:#f3dca6;font-size:26px;font-variant-numeric:tabular-nums}
.series-score i{color:var(--dim,#a9a69d);font-style:normal}
.series-next{margin:6px 0 12px;text-align:center;font-size:14px;color:var(--muted,#d8d5cb)}
.series-next b{color:#f3dca6;font-variant-numeric:tabular-nums}