:root{
  color-scheme:dark;
  --felt-light:#0ca951;--felt:#05783a;--felt-dark:#013c1d;
  --ink:#050806;--ivory:#fff5df;--muted:#b6c9bb;
  --brass:#e6ad47;--brass-light:#ffd779;--danger:#ff6964;
  --noise: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='.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{min-height:100%;background:#03140a}
body{
  margin:0;min-height:100dvh;position:relative;isolation:isolate;overflow-x:hidden;color:var(--ivory);
  background:
    radial-gradient(circle at 50% 15%,rgba(39,219,105,.6) 0,rgba(8,151,72,.24) 31%,transparent 55%),
    linear-gradient(145deg,var(--felt-light) 0,var(--felt) 42%,var(--felt-dark) 100%);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:var(--noise);
  opacity:.14;mix-blend-mode:soft-light;filter:contrast(125%);
}
button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--brass-light);outline-offset:3px}
.device-shell{position:relative;z-index:1;width:min(100%,480px);min-height:100dvh;margin:auto;padding:70px 14px 30px}
#app{position:relative}
.preview-switch{
  position:fixed;z-index:80;top:16px;left:50%;transform:translateX(-50%);display:flex;padding:4px;
  border:1px solid #ffffff24;border-radius:999px;background:#050806ed;box-shadow:0 12px 40px #0009,inset 0 1px #ffffff12;
}
.preview-switch button{border:0;background:transparent;color:#b7c1ba;padding:8px 16px;border-radius:999px}
.preview-switch button.active{background:linear-gradient(#ffd978,#d79b35);color:#1b1204;font-weight:800;box-shadow:0 3px 12px #0008}
.topline{display:flex;align-items:center;justify-content:space-between;margin:0 4px 14px}
.brand{font-size:12px;letter-spacing:.2em;color:var(--brass-light);font-weight:900;text-shadow:0 1px 8px #0008}
.sync-state{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--ivory);opacity:.72}
.connection{display:inline-block;width:7px;height:7px;border-radius:50%;background:#50f183;box-shadow:0 0 0 3px #50f127,0 0 8px #50f1a0}
.connection.off{background:#ffb54f;box-shadow:0 0 0 3px #ffb54f24}

.hero{text-align:center;padding:8px 0 22px}.hero h1{font-size:36px;line-height:1;letter-spacing:.12em;margin:5px 0 6px;font-weight:950;text-shadow:0 4px 18px #001b0f}
.muted{color:var(--muted)}.lobby-help{text-align:center;font-size:12px;text-shadow:0 1px 4px #002714}
.lobby-hero{padding-top:18px}.lobby-menu{display:grid;gap:12px}.lobby-menu button{min-height:56px;font-size:18px}.lobby-step-screen{display:grid;place-items:center;min-height:calc(100dvh - 100px)}.lobby-step{width:100%;margin:0}.lobby-step h2{font-size:17px;text-align:center;color:var(--ivory)}.lobby-step h2 strong{color:var(--brass-light);font-variant-numeric:tabular-nums;letter-spacing:.1em}.lobby-step button{min-height:50px;font-size:16px}.lobby-cancel{width:100%}
.logo-balls{position:relative;width:158px;height:104px;margin:0 auto 8px;filter:drop-shadow(0 13px 11px #002312a8)}
.logo-ball{position:absolute;width:66px;height:66px;border-radius:50%;border:1px solid #ffffff65}
.logo-ball.black{left:11px;bottom:2px}.logo-ball.red{left:47px;top:0}.logo-ball.cue{right:9px;bottom:2px}

.panel,.player-card,.options-sheet,.option-card,.final-card,.player-choice{
  background:linear-gradient(180deg,#253028f2 0,#0c110eef 20%,#030504f7 100%);
  border:1px solid #ffffff21;box-shadow:inset 0 1px #ffffff1e,inset 0 -1px #000,0 13px 30px #00221170;
}
.panel{border-radius:22px;padding:18px;margin-bottom:14px}.panel h2,.options-sheet h2{font-size:12px;letter-spacing:.14em;color:var(--brass-light);margin:0 0 13px;font-weight:900}
.fields{display:grid;gap:10px}
input{width:100%;border:1px solid #ffffff20;background:#00000062;color:var(--ivory);border-radius:13px;padding:14px;outline:none;box-shadow:inset 0 2px 8px #0008}
input::placeholder{color:#cfdbd1a8}input:focus{border-color:var(--brass-light);box-shadow:0 0 0 3px #e6ad4724,inset 0 2px 8px #0008}
.primary,.secondary,.danger{border:0;border-radius:13px;padding:13px 16px;font-weight:800}
.primary{background:linear-gradient(180deg,#ffda7c,#d89b34);color:#191002;box-shadow:inset 0 1px #fff5b5,0 5px 15px #0006}
.primary:active{transform:translateY(1px);filter:brightness(.94)}
.secondary{background:#ffffff12;color:var(--ivory);border:1px solid #ffffff16}
.danger{background:#d72c2b25;color:#ff8d88;border:1px solid #ff65532b}.wide{width:100%}
.join-row{display:grid;grid-template-columns:1fr auto;gap:9px}.join-row h2{grid-column:1/-1}
.history-card{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;color:inherit;border-radius:14px;padding:13px;margin-top:8px}
.history-card strong,.history-card small{display:block}.history-card small{color:var(--muted);margin-top:3px}.history-card b{font-size:24px;color:var(--brass-light)}

.score-row{display:grid;grid-template-columns:minmax(0,1fr) 66px minmax(0,1fr);gap:7px;align-items:start;margin-bottom:12px}
.player-column{position:relative;min-width:0;display:grid;gap:7px}.player-card{position:relative;width:100%;min-height:112px;border-radius:18px;padding:9px 10px;color:var(--ivory);text-align:center;box-shadow:inset 0 1px #ffffff1e,inset 0 -1px #000,0 4px 13px #00221152;transition:border-color .18s,box-shadow .18s,transform .15s}
.player-card::after{content:"";position:absolute;inset:3px;border:1px solid #ffffff10;border-radius:14px;pointer-events:none}
.player-card.selected{border:2px solid var(--brass-light);box-shadow:inset 0 1px #ffffff22,0 0 12px #efbb5040,0 5px 16px #00221162,0 13px 34px #00221130}
.player-card:active{transform:scale(.98)}
.player-card .name{display:block;padding:0 24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;font-size:17px;font-weight:800;color:#dfe9e1}
.player-card.selected .name{color:var(--brass-light)}
.score{display:block;font-size:52px;font-weight:950;line-height:1.12;font-variant-numeric:tabular-nums;letter-spacing:-.04em;text-shadow:0 3px 5px #000}
.frame-corner{position:absolute;right:6px;bottom:5px;z-index:1;color:var(--brass-light);font-size:18px;font-weight:950;text-shadow:0 2px 4px #000}.player-column:first-child .frame-corner{left:6px;right:auto}
.score-marker{display:none}
.table-card{display:grid;place-items:center;align-content:center;gap:2px;min-height:112px;padding:8px 3px;border-radius:16px;background:#0000004d;border:1px solid #ffffff20;box-shadow:inset 0 1px #ffffff12,0 9px 22px #0025125e;color:var(--muted)}
.table-label{display:flex;align-items:center;gap:4px;font-size:9px;font-weight:950;letter-spacing:.1em;color:var(--brass-light)}
.table-card>strong{font-size:25px;color:var(--ivory);font-weight:950;font-variant-numeric:tabular-nums;text-shadow:0 2px 4px #000}
.table-card>small{display:flex;align-items:center;gap:3px;font-size:10px;font-weight:800;color:#d1ded4}
.table-column{display:grid;gap:7px}.break-mode{width:100%;min-height:50px;border:0;border-radius:12px;background:linear-gradient(#ffda7c,#d89b34);color:#191002;font-size:23px;line-height:1;font-weight:950;letter-spacing:.08em;box-shadow:inset 0 1px #fff5b5,0 5px 12px #0005}.break-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px;width:100%;min-height:50px;border:1px solid #ffffff17;border-radius:12px;padding:7px;background:#00000042;color:var(--ivory);box-shadow:inset 0 1px #ffffff0d}.break-summary>strong{font-size:14px;font-variant-numeric:tabular-nums}.break-summary.empty{display:flex;justify-content:center;min-height:50px;padding:3px}.break-summary.empty .mini-balls{font-size:16px}
.break-roll-layer{position:absolute;z-index:20;overflow:hidden;border-radius:12px;pointer-events:none;perspective:220px}.break-roll-pane{position:absolute;inset:0;width:100%;height:100%;margin:0;will-change:transform,opacity;backface-visibility:hidden}.roll-up .break-roll-old{animation:break-old-up .4s cubic-bezier(.32,.02,.2,1) both}.roll-up .break-roll-new{animation:break-new-up .4s cubic-bezier(.32,.02,.2,1) both}.roll-down .break-roll-old{animation:break-old-down .4s cubic-bezier(.32,.02,.2,1) both}.roll-down .break-roll-new{animation:break-new-down .4s cubic-bezier(.32,.02,.2,1) both}
@keyframes break-old-up{to{transform:translateY(-108%) rotateX(28deg);opacity:.45}}@keyframes break-new-up{from{transform:translateY(108%) rotateX(-28deg);opacity:.45}to{transform:none;opacity:1}}@keyframes break-old-down{to{transform:translateY(108%) rotateX(-28deg);opacity:.45}}@keyframes break-new-down{from{transform:translateY(-108%) rotateX(28deg);opacity:.45}to{transform:none;opacity:1}}
.mini-balls{min-height:16px;display:flex;justify-content:center;align-items:center;gap:2px;color:var(--muted);min-width:0}.mini-balls.wrapped,.mini-balls.long,.mini-balls.marathon{--break-ball-size:9px;display:grid;grid-auto-flow:row;grid-template-columns:repeat(var(--break-columns),var(--break-ball-size));grid-template-rows:repeat(2,var(--break-ball-size));justify-content:center;align-content:center;gap:1px}.mini-balls.long{--break-ball-size:7px;gap:.8px}.mini-balls.marathon{--break-ball-size:5.8px;gap:.7px}.mini-balls.wrapped .mini-ball,.mini-balls.long .mini-ball,.mini-balls.marathon .mini-ball{width:var(--break-ball-size);height:var(--break-ball-size)}.mini-balls.marathon .mini-ball{border-width:.5px}
.break-numbers{display:flex;justify-content:center;align-items:baseline;gap:5px}.break-numbers em{font-style:normal;font-size:8px;letter-spacing:.04em;font-weight:950;color:var(--brass-light)}.break-numbers strong{font-size:12px;font-variant-numeric:tabular-nums}
.mini-ball{display:inline-block;width:12px;height:12px;flex:0 0 auto;border-radius:50%;border:1px solid #ffffff69;box-shadow:inset -2px -2px 3px #0006,0 2px 3px #0008}

.shot-hint{display:flex;align-items:center;justify-content:center;gap:6px;min-height:34px;margin:0 8px 7px;padding:5px 10px;border:1px solid #ffffff17;border-radius:999px;background:#0000004f;font-size:11px;color:#dce8de;white-space:nowrap;overflow:hidden;box-shadow:inset 0 1px #ffffff0c}
.shot-hint i{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--brass-light);box-shadow:0 0 7px var(--brass)}.shot-hint strong{overflow:hidden;text-overflow:ellipsis}.shot-hint span{opacity:.38}
.ball-grid{display:grid;gap:3px}.ball-row{display:grid;gap:3px}.ball-row-four{grid-template-columns:repeat(4,minmax(0,1fr))}.ball-row-three{grid-template-columns:repeat(3,minmax(0,1fr));padding-inline:43px}
.ball-button{border:0;background:transparent;color:var(--ivory);padding:5px 1px 4px;min-width:0;min-height:82px;transition:opacity .2s,filter .2s,transform .12s}
.ball-button:active:not(:disabled){transform:scale(.82)}.ball-button.hit .ball-sphere{animation:ball-pot .42s cubic-bezier(.22,.72,.24,1)}.ball-button.undo-hit .ball-sphere{animation:ball-unpot .58s cubic-bezier(.2,.78,.22,1)}.ball-button.unavailable{opacity:.24;filter:saturate(.55)}.ball-button:disabled{cursor:default}
.ball-tap-ripple{position:fixed;z-index:120;width:38px;height:38px;translate:-50% -50%;border:4px solid var(--mid);border-radius:50%;pointer-events:none;background:color-mix(in srgb,var(--mid) 20%,transparent);box-shadow:none;animation:ball-wave .72s ease-out both}.ball-tap-ripple::after{content:"";position:absolute;inset:10%;border:2px solid color-mix(in srgb,var(--mid) 58%,transparent);border-radius:50%}
.ball-tap-ripple.reverse{animation:ball-wave-reverse .82s ease-in both}
.ball-sphere{position:relative;display:grid;place-items:center;width:58px;height:58px;margin:auto;border-radius:50%;border:1px solid #ffffff78;box-shadow:inset -9px -11px 13px #0007,0 8px 9px #00281499,0 2px 2px #000b;background:radial-gradient(circle at 31% 24%,var(--light) 0,var(--mid) 46%,var(--dark) 100%)}
.ball-sphere::before,.logo-ball::before{content:"";position:absolute;left:17%;top:12%;width:36%;height:22%;border-radius:50%;transform:rotate(-28deg);background:linear-gradient(135deg,#fffffff2,#ffffff18);filter:blur(.2px)}
.ball-sphere::after,.logo-ball::after{content:"";position:absolute;left:17%;top:31%;width:8%;height:8%;border-radius:50%;background:#ffffff9e}
.ball-sphere b{position:relative;z-index:2;font-size:25px;font-weight:950;color:var(--ball-ink,#fff);text-shadow:0 1px 2px #0009}.ball-button small{display:block;margin-top:5px;font-size:9px;font-weight:750;color:#e3ede5;overflow:hidden;text-overflow:ellipsis}
.red-count{position:absolute;z-index:3;right:-5px;bottom:-3px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:linear-gradient(#ffda7c,#d89b34);color:#1b1002;font-size:10px;font-style:normal;font-weight:950;box-shadow:inset 0 1px #fff5b5,0 2px 5px #0009}
.red{--light:#ff4b58;--mid:#e40017;--dark:#570007}.yellow{--light:#fff27a;--mid:#f2bd00;--dark:#805000;--ball-ink:#211700}.green{--light:#42dd6b;--mid:#078c31;--dark:#003711}.brown{--light:#bf7040;--mid:#71300f;--dark:#210a02}.blue{--light:#46a8ff;--mid:#075bda;--dark:#001b62}.pink{--light:#ff90a7;--mid:#f32f66;--dark:#740725}.black{--light:#626c67;--mid:#101512;--dark:#000}.cue,.foul{--light:#fff;--mid:#f5ead2;--dark:#978d77;--ball-ink:#201a12}
.logo-ball,.mini-ball{background:radial-gradient(circle at 31% 24%,var(--light) 0,var(--mid) 48%,var(--dark) 100%)}
.foul-sphere b{font-size:17px;letter-spacing:-.06em;text-shadow:0 1px #fff8}

.main-actions{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch;isolation:isolate;margin-top:8px;border-radius:16px;overflow:hidden;background:transparent url('/assets/lower-panel-background.png') center/100% 100% no-repeat;box-shadow:none;transform:translateZ(0);will-change:transform;backface-visibility:hidden}.main-actions button{display:grid;place-items:center;min-height:72px;border:0;background:transparent;color:#191002;transition:transform .13s ease,background .13s ease,filter .13s ease}.main-actions button img{display:block;width:48px;height:48px;object-fit:contain}.main-actions button:first-child img{width:25.6px;height:25.6px}.main-actions button:last-child img{width:43.2px;height:43.2px}.main-actions button:disabled{opacity:.3}.main-actions button:active:not(:disabled),.main-actions button.action-hit{background:#70481266;filter:brightness(.76);animation:action-press .54s cubic-bezier(.2,.8,.2,1)}
.game-code{text-align:center;padding:8px 0 15px;color:var(--brass-light);font-size:42px;font-weight:950;letter-spacing:.2em;font-variant-numeric:tabular-nums}

.options-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin-top:9px;border:1px solid #ffffff22;border-radius:999px;background:#00000058;color:var(--ivory);font-weight:800;box-shadow:inset 0 1px #ffffff10}.options-toggle b{letter-spacing:.12em;color:var(--brass-light)}
.options-scrim{position:fixed;z-index:100;inset:0;display:grid;align-items:end;background:#0009;backdrop-filter:blur(5px);animation:fade-in .18s ease-out}
.options-sheet{position:relative;width:min(100%,480px);margin:0 auto;padding:17px 17px max(20px,env(safe-area-inset-bottom));border-radius:28px 28px 0 0;border-bottom:0;animation:sheet-up .24s cubic-bezier(.2,.8,.2,1)}
.sheet-handle{display:block;width:38px;height:5px;margin:0 auto 13px;border-radius:5px;background:#ffffff55}.sheet-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#ffffff12;color:var(--ivory);font-size:22px}.options-sheet h2{text-align:center;color:var(--muted);margin-bottom:15px}
.option-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.option-card{display:grid;place-items:center;gap:6px;min-height:78px;border-radius:16px;color:var(--ivory)}.option-card b{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:linear-gradient(#ffdb7c,#d49732);color:#1a1002;font-size:19px}.option-card span{font-size:11px;font-weight:800}.option-card:disabled{opacity:.3}
.code-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;padding:14px 16px;border:1px solid #ffffff1b;border-radius:17px;background:#00000057;box-shadow:inset 0 1px #ffffff0e}.code-row span{display:grid;gap:2px}.code-row small{font-size:9px;letter-spacing:.16em;color:#a9bcae;font-weight:800}.code-row strong{font-size:30px;letter-spacing:.2em;color:var(--brass-light);font-variant-numeric:tabular-nums}.share-button{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:linear-gradient(#ffda79,#d39631);color:#1a1002;font-size:23px;font-weight:900}

.final-card{text-align:center;border:2px solid var(--brass-light);border-radius:24px;padding:20px 18px;box-shadow:inset 0 1px #ffffff22,0 0 20px #e7b44c36,0 18px 38px #0022118c}.final-card h2{font-size:14px;letter-spacing:.1em;margin:0;color:var(--brass-light)}.winner{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 17px;font-size:32px;font-weight:950}.winner span{color:var(--brass-light);font-size:.72em}.final-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.final-actions button{font-size:15px;padding:14px 8px}

.history-mode{height:calc(100dvh - 100px);display:flex;flex-direction:column;overflow:hidden}.history-mode .topline,.history-mode .score-row{flex:0 0 auto}.history-expanded{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.history-best-divider{display:grid;grid-template-columns:minmax(0,1fr) 66px minmax(0,1fr);align-items:center;flex:0 0 auto;margin:0 0 5px}.history-best-divider::before,.history-best-divider::after{content:"";height:1px;background:#ffe08a8c}.history-best-divider span{text-align:center;color:var(--brass-light);font-size:22px;text-shadow:0 2px 5px #000}.history-column-feed{flex:1;min-height:0;display:flex;flex-direction:column;gap:7px;padding:3px 0 8px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-y}.history-column-feed::-webkit-scrollbar{display:none}.history-column-row{display:grid;grid-template-columns:minmax(0,1fr) 66px minmax(0,1fr);gap:7px;flex:0 0 auto}.history-column-row.left .history-summary{grid-column:1}.history-column-row.right .history-summary{grid-column:3}.history-summary{min-width:0;margin:0}.history-summary>strong{font-size:18px}.history-none{margin:auto;color:#dceadeaa}.history-empty{margin:auto;color:#dceade88;font-size:18px}
.history-best-divider::before{grid-column:1}.history-best-divider::after{grid-column:3}.history-back{flex:0 0 auto;align-self:center;width:min(56%,190px);min-height:44px;margin:10px auto 4px;font-weight:850}
.history-record-section{flex:0 0 auto;margin-top:10px}.history-record-section h3{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:9px;margin:0 0 7px;color:var(--brass-light);font-size:10px;letter-spacing:.11em;text-align:center}.history-record-section h3::before,.history-record-section h3::after{content:"";height:1px;background:#ffe08a72}.history-record-row{display:grid;grid-template-columns:minmax(0,1fr) 66px minmax(0,1fr);gap:7px}.history-record-row>i{grid-column:2}.history-record-cell{min-width:0}.history-record-cell:nth-of-type(2){grid-column:3}.history-record-cell>strong{font-size:18px}

.history-summary .mini-balls,.history-record-cell .mini-balls{min-height:20px;gap:3px}.history-summary .mini-ball,.history-record-cell .mini-ball{width:18px;height:18px}.history-summary .mini-balls.wrapped,.history-record-cell .mini-balls.wrapped{--break-ball-size:15px;gap:2px}.history-summary .mini-balls.long,.history-record-cell .mini-balls.long{--break-ball-size:12px;gap:1.5px}.history-summary .mini-balls.marathon,.history-record-cell .mini-balls.marathon{--break-ball-size:8.5px;gap:1px}.history-summary .mini-balls.marathon .mini-ball,.history-record-cell .mini-balls.marathon .mini-ball{border-width:.5px}

.phone-inline-history{height:calc(100dvh - 100px);min-height:0;display:flex;flex-direction:column;overflow:hidden}.phone-inline-history .topline{flex:0 0 auto;margin-bottom:8px}.phone-inline-history .score-row{flex:0 0 auto;margin-bottom:7px}.phone-inline-history .history-inline{flex:1 1 auto;min-height:0;margin-bottom:7px;border:0}.phone-inline-history .history-column-feed{padding:7px 0}.phone-inline-history .history-column-row{position:relative}.phone-inline-history .history-column-row.switched-player{margin-top:-28px}.phone-game-controls{flex:0 0 auto;margin-top:auto}

dialog{width:min(90%,390px);border:1px solid #ffffff2d;border-radius:22px;background:linear-gradient(#1c2921,#050806);color:var(--ivory);padding:0;box-shadow:0 25px 80px #000c}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}dialog form{padding:20px}dialog h2{margin:0 0 15px;font-size:19px}#dialog-actions{display:grid;gap:8px;margin-bottom:9px}#dialog-actions button{width:100%}dialog form>button[value="cancel"]{display:block;width:100%;min-height:48px;font-weight:800}
#dialog-actions.foul-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.foul-points{min-height:62px;border:1px solid #ffffff4a;border-radius:13px;color:var(--ball-ink,#fff);font-size:inherit;font-weight:800;text-shadow:0 1px 2px #0005;background:radial-gradient(circle at 35% 22%,var(--light),var(--mid) 55%,var(--dark));box-shadow:inset 0 1px #fff8,0 6px 12px #0006}.foul-points:focus,.foul-points:focus-visible{outline:0}.foul-points.black{color:#fff;text-shadow:0 1px 2px #000}
#dialog-actions.alert-message{margin-bottom:0}#dialog-actions.alert-message+button[value="cancel"]{display:none}
.loading{display:grid;place-items:center;min-height:65dvh;color:var(--ivory);font-size:20px;font-weight:800;text-shadow:0 3px 10px #002412}
#toast{position:fixed;left:50%;bottom:24px;z-index:130;transform:translate(-50%,20px);opacity:0;background:#070c09ed;color:var(--ivory);border:1px solid #ffffff2a;padding:11px 16px;border-radius:12px;transition:.2s;pointer-events:none;max-width:90%;text-align:center;box-shadow:0 8px 30px #0009}#toast.show{opacity:1;transform:translate(-50%,0)}

body.watch-mode{background:#030403}body.watch-mode::before{opacity:.04}.watch-mode .preview-switch{top:8px}
.watch-mode .device-shell{width:260px;min-height:318px;height:318px;margin:62px auto 0;padding:12px 8px;border-radius:64px;background:radial-gradient(circle at 50% 18%,#0f9d4f,#04672f 55%,#01381b);border:6px solid #272827;overflow:hidden;box-shadow:inset 0 0 0 2px #000,0 30px 80px #000}
.watch-mode .device-shell::before{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.13;mix-blend-mode:soft-light;pointer-events:none}.watch-mode #app{height:100%;overflow:auto;scrollbar-width:none}.watch-mode #app::-webkit-scrollbar{display:none}.watch-mode .game-screen{min-height:100%;display:flex;flex-direction:column;justify-content:safe center}
.watch-mode .topline{display:none}.watch-mode .hero{padding:0}.watch-mode .hero h1{font-size:23px}.watch-mode .hero .muted,.watch-mode .brand{display:none}.watch-mode .logo-balls{transform:scale(.68);transform-origin:center;height:72px;margin-bottom:0}
.watch-mode .panel{padding:12px;border-radius:17px;margin-bottom:9px}.watch-mode .panel h2{font-size:10px}.watch-mode input{padding:10px}.watch-mode .history,.watch-mode .lobby-help{display:none}
.watch-mode .lobby-hero{padding-top:2px}.watch-mode .lobby-menu{gap:8px}.watch-mode .lobby-menu button{min-height:45px;font-size:13px}.watch-mode .lobby-step-screen{height:100%;min-height:0;overflow:hidden}.watch-mode .lobby-step{margin:0;padding:12px}.watch-mode .lobby-step h2{font-size:13px}.watch-mode .lobby-step button{min-height:36px;font-size:12px}
.watch-mode .score-row{grid-template-columns:minmax(0,1fr) 45px minmax(0,1fr);gap:4px;margin-bottom:7px}.watch-mode .player-column{gap:4px}.watch-mode .player-card{padding:5px;min-height:72px;border-radius:12px}.watch-mode .player-card::after{inset:2px;border-radius:9px}.watch-mode .player-card .name{padding:0 15px;font-size:12px;text-align:center}.watch-mode .score{font-size:34px}.watch-mode .frame-corner{right:3px;bottom:2px;font-size:13px}.watch-mode .player-column:first-child .frame-corner{left:3px;right:auto}.watch-mode .table-card{min-height:72px;border-radius:11px;padding:3px}.watch-mode .table-label{font-size:8px}.watch-mode .table-card>strong{font-size:20px}
.watch-mode .table-column{gap:4px}.watch-mode .break-mode{min-height:32px;border-radius:8px;font-size:16px}.watch-mode .break-summary{padding:3px;min-height:32px;border-radius:8px;gap:2px}.watch-mode .break-summary>strong{font-size:12px}.watch-mode .break-summary.empty{min-height:32px}.watch-mode .break-summary.empty .mini-balls{font-size:13px}.watch-mode .mini-balls{min-height:11px;gap:1px}.watch-mode .mini-balls .mini-ball{width:9px;height:9px}.watch-mode .mini-balls.wrapped{--break-ball-size:7px;gap:1px}.watch-mode .mini-balls.long{--break-ball-size:5.2px;gap:.6px}.watch-mode .mini-balls.marathon{--break-ball-size:3.2px;gap:.4px}.watch-mode .mini-balls.marathon .mini-ball{border-width:.3px}
.watch-mode #app:has(.history-mode){overflow:hidden}.watch-mode .history-mode{height:100%;min-height:100%;justify-content:flex-start}.watch-mode .history-best-divider,.watch-mode .history-column-row{grid-template-columns:minmax(0,1fr) 45px minmax(0,1fr);gap:4px}.watch-mode .history-best-divider{margin-bottom:3px}.watch-mode .history-best-divider span{font-size:15px}.watch-mode .history-column-feed{gap:4px;padding:1px 0 3px}.watch-mode .history-summary{min-height:30px;padding:3px}.watch-mode .history-summary>strong{font-size:12px}.watch-mode .history-empty{font-size:13px}
.watch-mode .history-mode{padding-top:var(--history-top,0)}.watch-mode .history-summary{min-height:32px}.watch-mode .history-back{min-height:34px;margin-top:7px;padding:6px;font-size:11px}
.watch-mode .history-record-section{margin-top:7px}.watch-mode .history-record-section h3{gap:5px;margin-bottom:4px;font-size:8px}.watch-mode .history-record-row{grid-template-columns:minmax(0,1fr) 45px minmax(0,1fr);gap:4px}.watch-mode .history-record-cell{min-height:30px;padding:3px}.watch-mode .history-record-cell>strong{font-size:12px}
.watch-mode .shot-hint{min-height:20px;margin:0 2px 3px;padding:3px 6px;gap:4px;font-size:8px}.watch-mode .shot-hint i{width:5px;height:5px}.watch-mode .shot-hint strong{max-width:105px}.watch-mode .ball-grid{gap:1px}.watch-mode .ball-row{gap:2px}.watch-mode .ball-row-three{padding-inline:45px}.watch-mode .ball-button{min-height:48px;padding:2px 0}.watch-mode .ball-sphere{width:40px;height:40px;box-shadow:inset -7px -8px 10px #0007,0 6px 7px #00281499}.watch-mode .ball-sphere b{font-size:20px}.watch-mode .ball-button small{display:none}
.watch-mode .foul-sphere b{font-size:13px}.watch-mode .red-count{min-width:18px;height:18px;right:-4px;bottom:-2px;font-size:9px}.watch-mode .main-actions{grid-template-columns:repeat(4,1fr);margin-top:5px;border-radius:11px}.watch-mode .main-actions button{min-height:43px}.watch-mode .main-actions button img{width:31px;height:31px}.watch-mode .main-actions button:first-child img{width:16.6px;height:16.6px}.watch-mode .main-actions button:last-child img{width:27.9px;height:27.9px}
.watch-mode .options-scrim{position:absolute;border-radius:56px;overflow:hidden}.watch-mode .options-sheet{padding:12px 14px 24px;border-radius:24px 24px 48px 48px}.watch-mode .sheet-handle{margin-bottom:8px}.watch-mode .options-sheet h2{font-size:9px;margin-bottom:8px}.watch-mode .sheet-close{width:28px;height:28px;font-size:18px}.watch-mode .option-buttons{gap:6px}.watch-mode .option-card{min-height:58px;border-radius:12px}.watch-mode .option-card b{width:25px;height:25px;font-size:15px}.watch-mode .option-card span{font-size:8px}.watch-mode .option-card .end-frame-label{font-size:0}.watch-mode .option-card .end-frame-label::after{content:"Фрейм";font-size:8px}.watch-mode .code-row{margin:8px 0;padding:7px 10px}.watch-mode .code-row strong{font-size:20px}.watch-mode .share-button{width:35px;height:35px;font-size:17px}.watch-mode .options-sheet>.danger{padding:8px;font-size:9px}
.watch-mode .final-card{padding:12px 10px;border-radius:16px}.watch-mode .final-card h2{font-size:11px}.watch-mode .winner{gap:5px;margin:9px 0 11px;font-size:22px}.watch-mode .final-actions{grid-template-columns:1fr 1fr;gap:6px}.watch-mode .final-actions button{min-height:40px;padding:8px 3px;font-size:12px}
.watch-mode dialog{position:fixed;inset:221px auto auto 50%;transform:translate(-50%,-50%);width:218px;max-height:270px;margin:0;border-radius:20px;overflow:auto}.watch-mode dialog form{padding:14px}.watch-mode dialog h2{font-size:15px;text-align:center;margin-bottom:10px}.watch-mode #dialog-actions{gap:6px;margin-bottom:6px}.watch-mode dialog button{padding:9px;font-size:11px}.watch-mode .foul-points{min-height:48px;border-radius:10px;padding:6px 3px}.watch-mode dialog form>button[value="cancel"]{min-height:38px;font-size:11px}.watch-mode .game-code{font-size:34px;padding:4px 0 10px}

@media(max-width:520px){
  .preview-switch{display:none}.device-shell{padding-top:max(15px,env(safe-area-inset-top));padding-bottom:max(26px,env(safe-area-inset-bottom))}.phone-inline-history{height:calc(100dvh - max(15px,env(safe-area-inset-top)) - max(26px,env(safe-area-inset-bottom)))}.panel{border-radius:19px}.options-sheet{width:100%}
}
@media(max-width:350px){
  .device-shell{padding-inline:9px}.score-row{grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);gap:4px}.score{font-size:43px}.player-card{min-height:103px}.table-card{min-height:103px}.ball-sphere{width:52px;height:52px}.ball-row-three{padding-inline:34px}.shot-hint{font-size:10px}
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes sheet-up{from{transform:translateY(35px);opacity:.7}to{transform:translateY(0);opacity:1}}
@keyframes ball-pot{0%{transform:scale(1)}42%{transform:scale(.74)}76%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes ball-wave{0%{width:38px;height:38px;border-width:4px;opacity:1}65%{opacity:.42}100%{width:var(--wave-diameter);height:var(--wave-diameter);border-width:1px;opacity:0}}
@keyframes ball-unpot{0%{transform:scale(1)}35%{transform:scale(1.16)}72%{transform:scale(.84)}100%{transform:scale(1)}}
@keyframes ball-wave-reverse{0%{width:var(--wave-diameter);height:var(--wave-diameter);border-width:1px;opacity:.72}72%{opacity:.9}82%{width:38px;height:38px;border-width:4px;opacity:1}100%{width:38px;height:38px;border-width:4px;opacity:0}}
@keyframes action-press{0%{transform:scale(1)}30%{transform:scale(.82)}62%{transform:scale(.82)}82%{transform:scale(1.04)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}