:root{--ui-scene-1: #3a2718;--ui-scene-2: #1c130c;--ui-scene-3: #0b0806;--ui-leather-1: #4a2a1e;--ui-leather-2: #2e1811;--ui-leather-deep: #1a0e09;--ui-brass-light: #c9a668;--ui-brass: #8a6a38;--ui-brass-dark: #5c4622;--ui-accent: #e0c27a;--ui-text: #f5e8cc;--ui-text-muted: #cdb892;--ui-danger: #b24e59;--ui-danger-strong: #7f2935;--ui-felt: #2c7f4e;--ui-felt-dark: #123f25;--ui-ivory: #f2e6cd;--ui-ivory-shade: #bda87f;--ui-spin-dot: #d8433c;--ui-font-display: "Playfair Display", Georgia, "Times New Roman", serif;--ui-font-text: "PT Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--ui-radius-s: 6px;--ui-radius-m: 10px;--ui-radius-l: 16px;--ui-radius-pill: 999px;--ui-space-1: 4px;--ui-space-2: 8px;--ui-space-3: 12px;--ui-space-4: 20px;--ui-space-5: 32px;--ui-tap: 44px;--ui-avatar: 56px;--ui-avatar-compact: 36px;--ui-ball-cell: 26px;--ui-ball-cell-compact: 18px;--ui-spin-size: 168px;--ui-spin-size-compact: 104px;--ui-power-length: 260px;--ui-border: 1px solid var(--ui-brass);--ui-shadow-panel: 0 6px 18px rgba(0, 0, 0, .45);--ui-shadow-inset: inset 0 1px 0 rgba(245, 232, 204, .18);--ui-glow-active: 0 0 0 2px var(--ui-accent), 0 0 14px rgba(224, 194, 122, .55);--ui-safe-top: env(safe-area-inset-top, 0px);--ui-safe-right: env(safe-area-inset-right, 0px);--ui-safe-bottom: env(safe-area-inset-bottom, 0px);--ui-safe-left: env(safe-area-inset-left, 0px)}.ui-panel,.ui-panel *,.ui-button,.layout,.layout *,.layout *:before,.layout *:after{box-sizing:border-box}.ui-panel{background:linear-gradient(180deg,var(--ui-leather-1),var(--ui-leather-2));border:var(--ui-border);border-radius:var(--ui-radius-l);box-shadow:var(--ui-shadow-inset),var(--ui-shadow-panel);color:var(--ui-text);font-family:var(--ui-font-text)}.ui-brass-surface{background:linear-gradient(180deg,var(--ui-brass-light) 0%,var(--ui-brass) 42%,var(--ui-brass-dark) 52%,var(--ui-brass) 78%,var(--ui-brass-light) 100%)}.ui-caption{font-family:var(--ui-font-text);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ui-text-muted)}.ui-button{min-height:var(--ui-tap);min-width:var(--ui-tap);padding:0 var(--ui-space-4);border:var(--ui-border);border-radius:var(--ui-radius-m);background:linear-gradient(180deg,#5a3626,var(--ui-leather-2));box-shadow:var(--ui-shadow-inset);color:var(--ui-text);font-family:var(--ui-font-text);font-size:15px;cursor:pointer;touch-action:manipulation}.ui-button:hover{border-color:var(--ui-accent);color:var(--ui-accent)}.ui-button:active{box-shadow:inset 0 2px 6px #0000008c}.ui-button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}.ui-button--accent{border-color:var(--ui-accent);color:var(--ui-accent)}.ui-button--accent:hover{background:linear-gradient(180deg,#6b4229,#4a2b1d)}.ui-button--danger{border-color:var(--ui-danger);color:#f0c9ce}.ui-button--danger:hover{border-color:var(--ui-danger);background:linear-gradient(180deg,var(--ui-danger),var(--ui-danger-strong));color:var(--ui-text)}.player{display:flex;flex-direction:column;gap:var(--ui-space-2);padding:var(--ui-space-3);min-width:0;overflow:hidden}.player__head{display:flex;align-items:center;gap:var(--ui-space-3);min-width:0}.player__avatar{flex:none;width:var(--ui-avatar);height:var(--ui-avatar);border-radius:var(--ui-radius-pill);display:grid;place-items:center;background:radial-gradient(circle at 34% 28%,#6b4430,var(--ui-leather-deep));border:2px solid var(--ui-brass);box-shadow:var(--ui-shadow-inset);color:var(--ui-accent)}.player--active .player__avatar{border-color:var(--ui-accent);box-shadow:var(--ui-glow-active)}.player__initials{font-family:var(--ui-font-display);font-size:20px;letter-spacing:.04em}.player__robot{width:62%;height:62%;fill:var(--ui-accent)}.player__robot-eye{fill:var(--ui-leather-deep)}.player__about{min-width:0;display:flex;flex-direction:column;gap:var(--ui-space-1)}.player__name{font-family:var(--ui-font-display);font-size:19px;line-height:1.1;color:var(--ui-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ui-space-2)}.player__badge{padding:2px var(--ui-space-2);border-radius:var(--ui-radius-s);border:1px solid var(--ui-brass);background:linear-gradient(180deg,#e0c27a38,#8a6a381f);font-size:10px;letter-spacing:.12em;color:var(--ui-accent);white-space:nowrap}.player__rating{font-size:13px;color:var(--ui-text-muted);white-space:nowrap}.player__balls{display:flex;gap:var(--ui-space-1);margin:0;padding:0;list-style:none}.player__ball{width:var(--ui-ball-cell);height:var(--ui-ball-cell);border-radius:var(--ui-radius-pill);display:grid;place-items:center;font-family:var(--ui-font-display);font-size:12px;background:var(--ui-leather-deep);box-shadow:inset 0 2px 3px #0009;border:1px solid rgba(138,106,56,.45);color:transparent}.player__ball--filled{background:radial-gradient(circle at 34% 28%,#fffaf0,var(--ui-ivory) 45%,var(--ui-ivory-shade));box-shadow:0 1px 3px #00000080;border-color:var(--ui-brass);color:#3a2718}.player__timer{height:4px;border-radius:var(--ui-radius-pill);background:transparent}.player__timer--on{background:#00000073;box-shadow:inset 0 1px 2px #0009}.player__timer-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ui-brass),var(--ui-accent));transition:width .25s linear}.player__timer-fill--alarm{background:linear-gradient(90deg,var(--ui-danger-strong),var(--ui-danger))}.player--compact{padding:var(--ui-space-2);gap:var(--ui-space-1);border-radius:var(--ui-radius-m)}.player--compact .player__avatar{width:var(--ui-avatar-compact);height:var(--ui-avatar-compact)}.player--compact .player__initials{font-size:13px}.player--compact .player__head{gap:var(--ui-space-2)}.player--compact .player__name{font-size:14px}.player--compact .player__meta{display:none}.player--compact .player__balls{width:100%}.player--compact .player__ball{flex:1 1 0;width:auto;height:auto;max-width:var(--ui-ball-cell-compact);aspect-ratio:1;font-size:9px}.score{display:flex;flex-direction:column;align-items:center;gap:var(--ui-space-2);flex:none}.score__plate{padding:var(--ui-space-2) var(--ui-space-5);border-radius:var(--ui-radius-m);border:1px solid var(--ui-brass-dark);box-shadow:inset 0 1px #fff5dc8c,inset 0 -1px #00000059,0 6px 16px #00000080}.score__value{display:flex;align-items:baseline;gap:var(--ui-space-3);font-family:var(--ui-font-display);font-size:38px;line-height:1;color:#2b1d0c;text-shadow:0 1px 0 rgba(255,244,214,.45)}.score__colon{font-size:30px;opacity:.7}.score__mode{font-family:var(--ui-font-text);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ui-text-muted);text-align:center}.score--compact{gap:var(--ui-space-1)}.score--compact .score__plate{padding:var(--ui-space-1) var(--ui-space-3);border-radius:var(--ui-radius-s)}.score--compact .score__value{font-size:22px;gap:var(--ui-space-2)}.score--compact .score__colon{font-size:18px}.score--compact .score__mode{font-size:9px;letter-spacing:.1em}.spin{display:flex;flex-direction:column;align-items:center;gap:var(--ui-space-2);width:fit-content}.spin__ball{position:relative;width:var(--ui-spin-size);height:var(--ui-spin-size);min-width:var(--ui-tap);min-height:var(--ui-tap);border-radius:var(--ui-radius-pill);background:radial-gradient(circle at 32% 26%,#fffdf6 0%,var(--ui-ivory) 42%,var(--ui-ivory-shade) 88%,#8f7a55 100%);border:2px solid var(--ui-brass);box-shadow:0 8px 20px #0000008c;cursor:crosshair;touch-action:none;user-select:none}.spin__ball:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}.spin__cross{position:absolute;background:#3a271859}.spin__cross--h{left:8%;right:8%;top:50%;height:1px}.spin__cross--v{top:8%;bottom:8%;left:50%;width:1px}.spin__limit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px dashed rgba(58,39,24,.4);border-radius:var(--ui-radius-pill);pointer-events:none}.spin__dot{position:absolute;width:14%;height:14%;border-radius:var(--ui-radius-pill);transform:translate(-50%,-50%);background:radial-gradient(circle at 34% 30%,#ff7c6e,var(--ui-spin-dot) 60%,#7d1f19);box-shadow:0 1px 3px #00000080;pointer-events:none}.spin__label{text-align:center;color:var(--ui-accent)}.power{display:flex;align-items:center;gap:var(--ui-space-2);font-family:var(--ui-font-text);--ui-power-thickness: 18px}.power__title{flex:none}.power__track{position:relative;border-radius:var(--ui-radius-pill);background:linear-gradient(180deg,var(--ui-leather-deep),#241309);border:1px solid var(--ui-brass-dark);box-shadow:inset 0 2px 5px #000000b3;touch-action:none;user-select:none;cursor:pointer}.power__track:before{content:"";position:absolute}.power__track:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}.power__fill{position:absolute;border-radius:var(--ui-radius-pill)}.power__thumb{position:absolute;border-radius:var(--ui-radius-pill);background:linear-gradient(180deg,var(--ui-brass-light),var(--ui-brass-dark));border:1px solid var(--ui-accent);box-shadow:0 2px 6px #0009;pointer-events:none}.power__value{flex:none;font-family:var(--ui-font-display);font-size:18px;color:var(--ui-accent);min-width:3.2em;text-align:center}.power--vertical{flex-direction:column;height:100%}.power--vertical .power__track{width:var(--ui-power-thickness);flex:1;min-height:120px;max-height:var(--ui-power-length)}.power--vertical .power__track:before{inset:0 calc((var(--ui-power-thickness) - var(--ui-tap)) / 2)}.power--vertical .power__fill{left:0;right:0;bottom:0;background:linear-gradient(0deg,var(--ui-brass),var(--ui-accent) 70%,#e8836a)}.power--vertical .power__thumb{left:-5px;right:-5px;height:16px;margin-bottom:-8px}.power--horizontal{flex-direction:row;width:100%}.power--horizontal .power__track{height:var(--ui-power-thickness);flex:1;min-width:120px}.power--horizontal .power__track:before{inset:calc((var(--ui-power-thickness) - var(--ui-tap)) / 2) 0}.power--horizontal .power__fill{top:0;bottom:0;left:0;background:linear-gradient(90deg,var(--ui-brass),var(--ui-accent) 70%,#e8836a)}.power--horizontal .power__thumb{top:-5px;bottom:-5px;width:16px;margin-left:-8px}.shot-panel{display:flex;flex-direction:column;align-items:center;gap:var(--ui-space-2);padding:var(--ui-space-3);border-radius:var(--ui-radius-l);border:1px solid rgba(138,106,56,.55);background:linear-gradient(180deg,#26180fd1,#100a06e0);box-shadow:inset 0 1px #f5e8cc1f,0 10px 26px #0000008c;backdrop-filter:blur(6px)}.shot-panel__row{display:flex;align-items:stretch;gap:var(--ui-space-3)}.shot-panel .power--vertical{height:auto;gap:var(--ui-space-1)}.shot-panel .power--vertical .power__track{min-height:0;height:96px;width:14px}.shot-panel--compact .power--vertical .power__track{height:88px}.shot-panel .power__title{font-size:9px}.shot-panel .power__value{font-size:15px;min-width:0}.shot-panel__shoot{width:100%;min-height:44px;border-radius:var(--ui-radius-m);border:1px solid var(--ui-brass-light);background:linear-gradient(180deg,var(--ui-accent),var(--ui-brass) 62%,var(--ui-brass-dark));box-shadow:inset 0 1px #fff6de8c,0 5px 12px #00000073;color:#2b1d0c;font-family:var(--ui-font-display);font-size:18px;letter-spacing:.08em;cursor:pointer;touch-action:manipulation}.shot-panel__shoot:active{box-shadow:inset 0 3px 8px #0000008c}.shot-panel__shoot:disabled{filter:grayscale(.7) brightness(.6);cursor:default}.shot-panel__shoot:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}.shot-panel--compact{flex-direction:row;align-items:center;gap:var(--ui-space-3);padding:var(--ui-space-2) var(--ui-space-3)}.shot-panel--compact .shot-panel__shoot{flex:1;min-height:56px;font-size:22px}.status{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--ui-space-3);padding:var(--ui-space-2) var(--ui-space-4)}.status__line{display:flex;align-items:baseline;gap:var(--ui-space-1);min-width:0;font-size:15px}.status__text{color:var(--ui-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status__timer{font-family:var(--ui-font-display);color:var(--ui-accent);white-space:nowrap}.status__actions{display:flex;align-items:center;justify-content:center;gap:var(--ui-space-2);flex-wrap:wrap}.status__ask{font-size:14px;color:var(--ui-text-muted)}.status__note{text-align:right;font-size:13px;color:var(--ui-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status--compact{grid-template-columns:minmax(0,1fr) auto;gap:var(--ui-space-2);padding:var(--ui-space-2) var(--ui-space-3);border-radius:var(--ui-radius-m)}.status--compact .status__line{grid-area:1 / 1;font-size:14px}.status--compact .status__note{grid-area:1 / 2;font-size:11px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:520px){.status--compact{grid-template-columns:minmax(0,1fr)}.status--compact .status__note{display:none}.status--compact .status__actions{grid-area:2 / 1 / 3 / 2}}.status--compact .status__actions{grid-area:2 / 1 / 3 / 3;justify-content:space-between;flex-wrap:nowrap}.status--compact .ui-button{flex:1 1 auto;padding:0 var(--ui-space-2);font-size:14px}.status--compact .status__ask{flex:1 1 auto;font-size:13px}.layout{height:100%;display:flex;flex-direction:column;gap:var(--ui-space-3);padding:calc(var(--ui-space-3) + var(--ui-safe-top)) calc(var(--ui-space-3) + var(--ui-safe-right)) calc(var(--ui-space-3) + var(--ui-safe-bottom)) calc(var(--ui-space-3) + var(--ui-safe-left));font-family:var(--ui-font-text);color:var(--ui-text);background:radial-gradient(ellipse at 50% 38%,var(--ui-scene-1),var(--ui-scene-2) 45%,var(--ui-scene-3))}.layout__table{flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}.layout__top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:var(--ui-space-4)}.layout__middle{position:relative;flex:1;min-height:0;display:flex;align-items:stretch}.layout__shot-panel{position:absolute;left:0;bottom:0;z-index:2}.layout__bottom{flex:none}.layout--compact{gap:var(--ui-space-2);padding:calc(var(--ui-space-2) + var(--ui-safe-top)) calc(var(--ui-space-2) + var(--ui-safe-right)) calc(var(--ui-space-2) + var(--ui-safe-bottom)) calc(var(--ui-space-2) + var(--ui-safe-left))}.layout__bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--ui-space-2)}.layout__controls{flex:none;display:flex;flex-direction:column;gap:var(--ui-space-2)}.demo-table{aspect-ratio:2 / 1;height:100%;width:auto;max-width:100%;max-height:100%;border-radius:var(--ui-radius-m);background:radial-gradient(ellipse at 50% 45%,var(--ui-felt),var(--ui-felt-dark));border:10px solid #4a3220;box-shadow:0 14px 34px #0009}@media(max-width:899px){.demo-table{aspect-ratio:1 / 2}}.invite{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--ui-space-3);background:#0b08068c;z-index:20}.invite__card{width:min(420px,100%);padding:var(--ui-space-4, 20px);display:grid;gap:var(--ui-space-2);text-align:center}.invite__title{margin:0;font-family:var(--ui-font-display);font-size:20px;color:var(--ui-accent)}.invite__hint{margin:0;font-size:13px;color:var(--ui-text-muted)}.invite__code{display:grid;gap:2px;padding:var(--ui-space-2);border:1px solid var(--ui-brass);border-radius:var(--ui-radius-m);background:#00000040}.invite__code-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ui-text-muted)}.invite__code-value{font-family:var(--ui-font-display);font-size:30px;letter-spacing:.18em;color:var(--ui-text)}.invite__link{display:grid;gap:4px;text-align:left}.invite__link-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ui-text-muted)}.invite__link-input{width:100%;min-height:var(--ui-tap);padding:0 var(--ui-space-2);border:1px solid var(--ui-line, #3a2d22);border-radius:var(--ui-radius-m);background:#0000004d;color:var(--ui-text);font:inherit;font-size:13px}.invite__actions{display:flex;gap:var(--ui-space-2);justify-content:center;flex-wrap:wrap}.invite__waiting{margin:0;font-size:12px;color:var(--ui-text-muted)}*{box-sizing:border-box}html,body{height:100%;margin:0}body{overflow:hidden;color:#f5e8cc;font-family:PT Sans,system-ui,sans-serif;background:radial-gradient(ellipse at 50% 40%,#3a2718,#1c130c 45%,#0b0806)}#app{height:100%}.table-slot,.table-host{width:100%;height:100%;min-height:0}canvas{display:block}