/* Anchor heads to the rail, independently of the height of names/actions. */
html .table-wrap .felt{inset:20% 12% 16%;border-radius:50%}
html .table-wrap .seat:not(.hero-seat){--portrait:56px;transform:translate(-50%,calc(var(--portrait) * -.5 - 5px));width:100px}
html .table-wrap .seat:not(.hero-seat) .seat-avatar>svg{width:var(--portrait);height:var(--portrait)}
html .table-wrap .seat:not(.hero-seat) .seat-name{max-width:100%;margin:3px auto 0;position:relative;z-index:1}
html .table-wrap .seat-hole{top:30px;left:calc(50% + 50px);transform:translateX(-50%);z-index:0}
html .table-wrap .seat[data-seat-side=left] .seat-hole{left:calc(50% + 50px);top:30px}
html .table-wrap .seat[data-seat-side=right] .seat-hole{left:calc(50% - 50px);top:30px}
html .table-wrap .hero-seat{top:85%!important}
html .table-wrap .table-badge{bottom:7px}
/* Shapes, position and text all communicate the action; colour is supplementary. */
html .action-row{grid-template-columns:1fr 1.3fr 1.15fr;gap:10px}
html .action-row .poker-action{display:flex;align-items:center;justify-content:center;gap:10px;min-height:66px;padding:9px 10px;border:1.5px solid;border-radius:13px;transition:transform .1s,filter .1s}
html .action-row .poker-action:active:not(:disabled){transform:translateY(2px);box-shadow:none}
html .poker-action .action-copy{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
html .poker-action strong{font:700 19px/1.1 Outfit,sans-serif;white-space:nowrap}
html .poker-action .action-copy small{font:500 10px/1.1 'DM Sans',sans-serif;opacity:1;white-space:nowrap}
html .poker-action .action-symbol{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border:1.5px solid currentColor;border-radius:50%;font:600 24px/1 sans-serif;opacity:.85}
html .action-row .action-fold{background:#faeee6;color:#8b493d;border-color:#d9b4a5;box-shadow:0 3px 0 #d9b4a5}
html .action-row .action-match{background:#286b4b;color:#fff9e8;border-color:#1e533a;box-shadow:0 3px 0 #173e2c}
html .action-row .action-raise{background:#f4d594;color:#624618;border-color:#c6a365;box-shadow:0 3px 0 #c6a365}
html[data-appearance=dark] .action-row .action-fold{background:#422f2b;color:#f1c5b9;border-color:#8f6559;box-shadow:0 3px 0 #5e443b}
html[data-appearance=dark] .action-row .action-match{background:#a6d4a0;color:#183b29;border-color:#6ca476;box-shadow:0 3px 0 #557e53}
html[data-appearance=dark] .action-row .action-raise{background:#c5a35e;color:#251e12;border-color:#9b7b3f;box-shadow:0 3px 0 #746031}
html[data-layout=phone] .table-wrap .seat:not(.hero-seat){--portrait:clamp(30px,calc(var(--app-height,700px) * .055),42px);width:76px}
html[data-layout=phone] .table-wrap .seat-hole{top:25px;left:calc(50% + 35px)}
html[data-layout=phone] .table-wrap .seat[data-seat-side=left] .seat-hole{left:calc(50% + 35px);top:25px}
html[data-layout=phone] .table-wrap .seat[data-seat-side=right] .seat-hole{left:calc(50% - 35px);top:25px}
html[data-layout=phone] .table-wrap .seat-action{font-size:7px;padding:2px 4px;margin-top:2px}
html[data-layout=phone] .action-row{gap:6px}
html[data-layout=phone] .action-row .poker-action{min-height:49px;padding:5px 6px;gap:6px;border-radius:10px}
html[data-layout=phone] .poker-action strong{font-size:16px}
html[data-layout=phone] .poker-action .action-symbol{width:23px;height:23px;font-size:19px}
html[data-layout=phone] .poker-action .action-copy small{font-size:8px}
html[data-layout=phone][data-phone-narrow=true] .poker-action .action-symbol{width:18px;height:18px;font-size:16px}
html[data-layout=phone][data-phone-narrow=true] .poker-action strong{font-size:14px}
@media(prefers-reduced-motion:reduce){html .action-row .poker-action{transition:none}}

/* Keep wager piles separate from portrait/stack labels; align amount beside chips. */
html .table-wrap .table-bet{flex-direction:row;gap:4px;margin-top:0}
html .table-wrap .table-bet strong{margin-top:0;white-space:nowrap}
html .table-wrap .table-bet .chip-piles{flex-wrap:wrap;max-width:58px}
html[data-layout=phone] .table-wrap .table-bet{gap:3px}
html[data-layout=phone] .table-wrap .table-bet .chip-piles{max-width:40px}

/* Portrait phone: use the empty upper area, retaining the lower hero/action anchor.
 * The old ellipse (centre 52, radius 32) maps to centre 46, radius 38.
 * Seat and wager coordinates share this mapping so chips follow their owners. */
html[data-layout=phone] .table-wrap .felt{inset:8% 12% 16%}
/* Tournament information needs a small dedicated band above the top portrait. */

/* Upper seats: remaining stack above the portrait, wager directly below it. */
html .table-wrap .seat[data-upper=true]>.seat-stack{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);margin:0;white-space:nowrap}
html .table-wrap .table-bet[data-upper=true]{flex-direction:column;gap:3px;}
html .table-wrap .table-bet[data-upper=true] strong{margin:0}
html[data-layout=phone] .table-wrap .seat[data-upper=true]>.seat-stack{bottom:calc(100% + 7px)}
/* Fun Soft Drop: portrait + remaining balance share one continuous shell. */
html[data-visual-style] .table-wrap .soft-avatar{display:inline-flex;flex-direction:column;align-items:center;width:calc(var(--portrait) + 10px);height:calc(var(--portrait) + 27px);padding:4px 3px 5px;border:1.5px solid #527d60;border-radius:50% 50% 43% 43% / 49% 49% 30% 30%;background:#fff9ee;line-height:1;vertical-align:top;box-shadow:0 2px 0 #214a3215}
html[data-visual-style] .table-wrap .soft-avatar>svg{width:var(--portrait);height:var(--portrait);flex-shrink:0}
html[data-visual-style] .soft-avatar>svg>circle:first-child{fill:transparent}
html[data-visual-style] .avatar-balance{font:800 16px/18px Outfit,sans-serif;color:#173d31;white-space:nowrap;max-width:100%;letter-spacing:-.5px}
html[data-visual-style] .soft-avatar .avatar-timer{inset:-5px}
html[data-visual-style] .soft-avatar .avatar-timer>svg{transform:none}
.soft-avatar .avatar-timer path{fill:none;stroke-width:3;vector-effect:non-scaling-stroke}
html[data-visual-style] .soft-avatar .dealer-chip{left:-5px;right:auto;bottom:10px}
html[data-visual-style] .table-wrap .seat-name{margin-top:5px}
html[data-visual-style] .table-wrap .hero-seat .soft-avatar{flex-shrink:0}
html[data-visual-style] .table-wrap .hero-seat .hero-info{max-width:100px}
html[data-visual-style][data-appearance=dark] .table-wrap .soft-avatar{background:#20382f;border-color:#93bc8c}
html[data-visual-style][data-appearance=dark] .avatar-balance{color:#f6efd9}
html[data-layout=phone][data-visual-style] .table-wrap .soft-avatar{height:calc(var(--portrait) + 23px);width:calc(var(--portrait) + 9px);padding:3px 2px 4px}
html[data-layout=phone][data-visual-style] .avatar-balance{font-size:13px;line-height:16px}
/* Mix denominations vertically into up to three adjacent piles; never wrap. */
html .table-wrap .mixed-piles{display:inline-flex;flex-wrap:nowrap;gap:2px;width:max-content;max-width:none;align-items:flex-end}
html .table-wrap .table-bet .mixed-piles{flex-wrap:nowrap;max-width:none}
html .mixed-piles .chip-stack{margin-top:0;height:26px}
html[data-layout=phone] .mixed-piles .chip-stack{height:22px}

/* Round badge: one circular avatar/balance, with a quiet name underneath. */
html[data-visual-style] .table-wrap .seat .soft-avatar{position:relative;width:calc(var(--portrait) + 18px);height:calc(var(--portrait) + 18px);padding:0;border-radius:50%;display:inline-block;box-shadow:none}
html[data-visual-style] .table-wrap .seat .soft-avatar>svg{position:absolute;top:3px;left:50%;transform:translateX(-50%);width:calc(var(--portrait) * .8);height:calc(var(--portrait) * .8)}
html[data-visual-style] .soft-avatar .avatar-balance{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);font-size:15px;line-height:17px;max-width:94%;letter-spacing:-.5px}
html[data-visual-style] .soft-avatar .avatar-timer>svg{transform:rotate(-90deg)}
html[data-visual-style] .table-wrap .seat:not(.hero-seat) .seat-name{font-size:10px;line-height:1.2;margin:4px auto 0;padding:0;background:transparent;max-width:96px}
html[data-layout=phone][data-visual-style] .soft-avatar .avatar-balance{font-size:12px;line-height:14px;bottom:4px}
html[data-layout=phone][data-visual-style] .table-wrap .seat:not(.hero-seat) .seat-name{font-size:8px;max-width:76px;margin-top:4px}
/* Status labels participate in layout below the name, never over hole cards. */
html .table-wrap .seat .allin-marker{position:static;display:table;margin:3px auto 0;width:auto;height:auto;clip-path:none;filter:none;padding:3px 7px;border-radius:5px;font:800 9px/1 Outfit;white-space:nowrap;background:#edbb5c;color:#5b3616}
html .table-wrap .hero-seat .allin-marker{margin-left:0}
html .table-wrap .seat:not(.hero-seat) .seat-hole{left:calc(50% + 66px);top:16px;z-index:5;gap:3px}
html .table-wrap .seat[data-seat-side=right] .seat-hole{left:calc(50% - 66px)}
html[data-layout=phone] .table-wrap .seat:not(.hero-seat) .seat-hole{left:calc(50% + 52px);top:14px;gap:3px}
html[data-layout=phone] .table-wrap .seat[data-seat-side=right] .seat-hole{left:calc(50% - 52px)}
html[data-layout=phone] .table-wrap .seat .allin-marker{font-size:8px;padding:3px 6px}
/* Canonical rail geometry. One outer ellipse and one concentric wager ellipse.
   No per-seat top clamps or upper-player offsets. */
html .table-wrap{--rail-cy:52%;--rail-ry:32%;--rail-rx:38%}
html[data-layout=phone] .table-wrap{--rail-cy:46%;--rail-ry:38%}
html[data-layout=phone] .table-wrap:has(.sng-hud){--rail-cy:50%;--rail-ry:34%}
html .table-wrap .felt{inset:calc(var(--rail-cy) - var(--rail-ry)) calc(50% - var(--rail-rx)) calc(100% - var(--rail-cy) - var(--rail-ry));border-radius:50%}
html .table-wrap .seat:not(.hero-seat){--portrait:56px;--badge-size:calc((var(--portrait) + 18px) * .8660254);left:calc(50% + var(--rail-rx) * var(--rail-x))!important;top:calc(var(--rail-cy) + var(--rail-ry) * var(--rail-y))!important;transform:translate(-50%,calc(var(--badge-size) * -.5))!important}
html[data-layout=phone] .table-wrap .seat:not(.hero-seat){--portrait:clamp(30px,calc(var(--app-height,700px) * .055),42px)}
html .table-wrap .table-bet{left:calc(50% + var(--rail-rx) * .69 * var(--rail-x))!important;top:calc(var(--rail-cy) + var(--rail-ry) * .69 * var(--rail-y))!important;flex-direction:column;gap:2px;margin-top:0}
/* Diameter sqrt(.75) gives exactly 75% of the previous round badge area. */
html[data-visual-style] .table-wrap .seat .soft-avatar{--portrait:inherit;--badge-size:calc((var(--portrait) + 18px) * .8660254);width:var(--badge-size);height:var(--badge-size)}
html[data-visual-style] .table-wrap .seat .soft-avatar>svg{top:2px;width:calc(var(--portrait) * .8 * .8660254);height:calc(var(--portrait) * .8 * .8660254)}
html[data-visual-style] .table-wrap .hero-seat{--portrait:40px}
html[data-layout=phone][data-visual-style] .table-wrap .hero-seat{--portrait:34px}
html[data-visual-style] .table-wrap .seat .soft-avatar .avatar-balance{font-size:13px;line-height:15px;bottom:4px}
html[data-layout=phone][data-visual-style] .table-wrap .seat .soft-avatar .avatar-balance{font-size:10.4px;line-height:12px;bottom:3px}
html[data-visual-style] .table-wrap .seat .avatar-wins{font-size:7.8px;padding:2px 3px}
html[data-visual-style] .table-wrap .seat .avatar-wins b{font-size:7.8px}
html[data-layout=phone][data-visual-style] .table-wrap .seat .avatar-wins,html[data-layout=phone][data-visual-style] .table-wrap .seat .avatar-wins b{font-size:6.5px}
/* Give the timer its own contrasting track, equally visible for humans and bots. */
html .table-wrap .avatar-timer{inset:-5px;z-index:3}
html .table-wrap .avatar-timer .timer-track{stroke:#b7c5be;opacity:1}
html .table-wrap .avatar-timer .timer-ring{stroke:#2388ba;stroke-width:4}
html .table-wrap .avatar-timer[data-banking=true] .timer-ring{stroke:#dd9b25}
html .table-wrap .avatar-timer[data-urgent=true] .timer-ring{stroke:#da624d}
.own-turn-clock{font:600 11px/1.2 'DM Sans',sans-serif;white-space:nowrap;margin-left:auto;padding:3px 7px;border:1px solid currentColor;border-radius:6px}
.own-turn-clock b[data-banking=true]{color:#ffe1a0}
html[data-layout=phone] .own-turn-clock{font-size:10px;padding:3px 5px}
html[data-layout=phone] .turn-bar.your-turn .your-turn-arrow{margin-left:2px}
html[data-layout=phone] .table-wrap .felt{inset:calc(var(--rail-cy) - var(--rail-ry)) calc(50% - var(--rail-rx)) calc(100% - var(--rail-cy) - var(--rail-ry))}
html[data-layout=phone] .table-wrap .seat:not(.hero-seat){left:calc(50% + var(--rail-rx) * var(--rail-x))!important;top:calc(var(--rail-cy) + var(--rail-ry) * var(--rail-y))!important;transform:translate(-50%,calc(var(--badge-size) * -.5))!important}


/* Hero uses the same rail seat and circular timer as everyone else.
   Hole cards occupy their own reserved space to the right of the badge. */
html[data-visual-style] .table-wrap .hero-seat{--portrait:56px;--badge-size:calc((var(--portrait) + 18px) * .8660254);display:block;width:100px;height:auto;padding:0!important;left:50%!important;top:calc(var(--rail-cy) + var(--rail-ry))!important;transform:translate(-50%,calc(var(--badge-size) * -.5));background:transparent!important;border:0!important;border-radius:0;outline:0!important;box-shadow:none!important;text-align:center}
html[data-layout=phone][data-visual-style] .table-wrap .hero-seat{--portrait:clamp(30px,calc(var(--app-height,700px) * .055),42px);width:76px}
html[data-visual-style] .table-wrap .hero-seat .hero-info{max-width:none;width:100%;margin:0}
html[data-visual-style] .table-wrap .hero-seat .seat-name{font-size:10px;line-height:1.2;margin:4px auto 0;white-space:nowrap;max-width:100%}
html[data-layout=phone][data-visual-style] .table-wrap .hero-seat .seat-name{font-size:8px}
html[data-visual-style] .table-wrap .hero-seat .hero-hand{position:absolute;left:calc(50% + 48px);top:3px;display:flex;gap:5px;transform:none!important;margin:0;z-index:5}
html[data-layout=phone][data-visual-style] .table-wrap .hero-seat .hero-hand{left:calc(50% + 37px);top:2px;gap:4px}
html[data-layout=phone][data-visual-style] .table-wrap .hero-seat .hero-hand .card{width:34px;height:48px;padding:4px}
html[data-layout=phone][data-visual-style] .table-wrap .hero-seat .hero-hand .rank{font-size:15px}
html[data-layout=phone][data-visual-style] .table-wrap .hero-seat .hero-hand .suit{font-size:20px}
html[data-visual-style] .table-wrap .hero-seat .allin-marker{margin:3px auto 0}

html[data-visual-style=classy] .table-wrap .hero-seat .seat-avatar{padding:3px;border:2px solid transparent}

html[data-visual-style] .table-wrap .hero-seat.acting .seat-avatar{box-shadow:0 0 0 3px #f9f3df99}
/* Preserve a visibly different bank phase, including the last fifth of a bank. */
html .table-wrap .avatar-timer[data-banking=true][data-urgent=true] .timer-ring{stroke:#e97435}
html[data-visual-style] .table-wrap .hero-seat .hero-info{text-align:center}
/* Paint the remaining angle directly. SVG dash lengths with non-scaling strokes
   can retain an apparently full circle at these small mobile avatar sizes. */
html .table-wrap .avatar-timer{--timer-color:#2388ba;--turn-progress:360deg;border-radius:50%}
html .table-wrap .avatar-timer>.timer-track,html .table-wrap .avatar-timer>.timer-ring{position:absolute;inset:0;display:block;border-radius:50%;opacity:1;transform:none;pointer-events:none}
html .table-wrap .avatar-timer>.timer-track{border:4px solid #b7c5be;background:transparent}
html .table-wrap .avatar-timer>.timer-ring{background:conic-gradient(from 0deg,var(--timer-color) 0deg var(--turn-progress),transparent var(--turn-progress) 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))}
html .table-wrap .avatar-timer[data-banking=true]{--timer-color:#dd9b25}
html[data-appearance=dark] .table-wrap .avatar-timer>.timer-track{border-color:#52685f}

/* Classy shares round badges and geometry, with its own surfaces and portrait art. */
html[data-visual-style=classy] .table-wrap .seat .soft-avatar{padding:0;border:1.5px solid #9c8b60;background:#172725}
html[data-visual-style=classy] .table-wrap .avatar-balance{color:#eadbb9}
html[data-visual-style=classy][data-appearance=light] .table-wrap .seat .soft-avatar{background:#fffcef;border-color:#9b8b62}
html[data-visual-style=classy][data-appearance=light] .table-wrap .avatar-balance{color:#304931}
html[data-visual-style=classy] .table-wrap .seat:not(.hero-seat) .seat-name{background:transparent;padding:0}