/* Poker table: felt, seats (positioned by script for 2–10 players), cards, controls and live odds. */
/* Table colours come from the chosen design (see shared/designs.js); these are the house defaults. */
:root { --tfelt-hi: #8a2a3b; --tfelt: #6e2130; --tfelt-deep: #3f0f19; --trail-hi: #5b3526; --trail-lo: #2a1610; --tline: #d4ab5e3a; --tpattern: none; }
.table-layout { display: grid; gap: 18px; align-items: start; }
@media (min-width: 1180px) { .table-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.table-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.table-head h1 { font-size: clamp(20px, 2.4vw, 26px); }
.table-head .sub { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

.table-wrap { container: table / inline-size; padding-block: 22px 8px; }
.stage { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; }
.stage.portrait { aspect-ratio: 3 / 4.4; }
.rail {
  position: absolute; inset: 7% 2.5%; border-radius: var(--r-pill);
  background: var(--trail-pattern, none), radial-gradient(ellipse at 50% 0%, var(--trail-hi), var(--trail-lo) 72%);
  box-shadow: 0 30px 70px -20px #000, inset 0 1px 0 #ffffff1f, inset 0 -2px 0 #0006;
}
.portrait .rail { inset: 5% 4%; }
.felt {
  position: absolute; inset: clamp(10px, 2.2cqw, 24px); border-radius: var(--r-pill); overflow: hidden;
  background: var(--tpattern), radial-gradient(ellipse 70% 62% at 50% 42%, var(--tfelt-hi), var(--tfelt) 52%, var(--tfelt-deep) 100%);
  box-shadow: inset 0 0 0 2px var(--tline), inset 0 12px 44px #0008;
}
.felt::before {
  content: ""; position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.felt::after { content: ""; position: absolute; border: 1px solid var(--tline); border-radius: var(--r-pill); }
.felt-mark {
  position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%); text-align: center; pointer-events: none;
  font-family: var(--display); color: #f5efe2; opacity: .16; line-height: 1.1; white-space: nowrap; font-size: clamp(14px, 2.6cqw, 28px);
}
.felt-mark small { display: block; font-family: var(--sans); font-size: .42em; letter-spacing: .32em; margin-top: 4px; }
/* The site's address under the mark, small */
.felt-mark em { display: block; font-family: var(--sans); font-style: normal; font-size: .4em; letter-spacing: .2em; margin-top: 3px; opacity: .8; }
/* During a hand: the words go, the logo and the address stay as a faint watermark under the board */
/* (just under the board, above the bottom seat's cards; the stage's own top for the mark is overridden) */
.stage .felt-mark.playing { opacity: .13; top: 58%; }
.felt-mark.playing span, .felt-mark.playing small { display: none; }
.felt-mark.playing img { height: clamp(18px, 4.2cqw, 40px); margin: 0 auto 1px; }
.felt-mark.playing em { font-size: .5em; letter-spacing: .28em; }
/* The game's code and version, smallest of all, under the address (between hands and during them) */
.felt-mark i { display: block; font-family: var(--sans); font-style: normal; font-size: .36em; letter-spacing: .12em; margin-top: 3px; opacity: .85; }
.felt-mark i:empty { display: none; }
.felt-mark.playing i { font-size: .42em; }
.stage.portrait .felt-mark.playing { top: 60%; }
/* After a hand: Share and Bookmark stacked to the left of your own seat (left of the avatar), on the stage */
.after-hand { position: absolute; left: 0; top: 86%; transform: translate(-100%, -50%); z-index: 4; display: grid; gap: 5px; justify-items: end; }
.after-hand > .muted { font-size: clamp(10px, 1.3cqw, 12px); letter-spacing: .08em; text-transform: uppercase; }
.after-hand .btn { padding: 5px 10px; font-size: clamp(11px, 1.4cqw, 13px); gap: 5px; background: #140d0bcc; }
.after-hand .btn svg { width: 13px; height: 13px; }
.after-hand .btn.on { border-color: var(--brass); color: var(--brass); }
.after-hand[hidden] { display: none; }
@media (max-width: 599px) { .after-hand .btn span { display: none; } .after-hand .btn { padding: 7px; } .after-hand > .muted { display: none; } }
.felt-mark img { display: block; height: clamp(26px, 6cqw, 62px); width: auto; margin: 0 auto 4px; }
.portrait .felt-mark { top: 69%; }

/* Cards */
.card { position: relative; flex: none; overflow: hidden; isolation: isolate; width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: var(--card-radius, calc(var(--cw) * .09)); background: var(--card-tex, linear-gradient(transparent, transparent)), linear-gradient(160deg, color-mix(in srgb, color-mix(in srgb, var(--suit-now) 80%, white) var(--inv), var(--face-hi)),
    color-mix(in srgb, var(--suit-now) var(--inv), var(--face)) 60%, color-mix(in srgb, color-mix(in srgb, var(--suit-now) 75%, black) var(--inv), var(--face-lo))); color: var(--ink-now); box-shadow: 0 2px 7px #0008, var(--card-frame, inset 0 0 0 1px var(--edge-line, var(--face-edge))); font-family: var(--card-font, var(--serif)); animation: flip .38s cubic-bezier(.2,.7,.3,1) both; transition: translate .25s ease, filter .25s ease, box-shadow .25s ease; }
.card.s1 { --suit-now: var(--suit-h); }
.card.s2 { --suit-now: var(--suit-d); }
.card.s3 { --suit-now: var(--suit-c); }
.card .ix { position: absolute; left: 8%; top: 3%; display: flex; flex-direction: column; align-items: center; line-height: .95; }
.card .ix b { font-size: calc(var(--cw) * .38); font-weight: 700; letter-spacing: -.05em; }
.card .ix i, .card .pip { font-style: normal; font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; }
.card .ix i { font-size: calc(var(--cw) * .27); }
.card.joker .ix i { font-weight: 700; font-size: calc(var(--cw) * .15); letter-spacing: .04em; margin-top: 1px; }
.card .pip { position: absolute; right: 8%; bottom: 3%; font-size: calc(var(--cw) * .6); line-height: 1; }
/* A card back's thin inner outline is drawn in its line colour (the face's comes from the deck). */
/* Image backs and the Gilded Emblem's tree, in the line colour: their picture as a mask over a layer of that colour. */
.card.back::before, .card.turned::before, .card.river-drama::before { content: var(--back-overlay, none); position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: var(--back-line); -webkit-mask: var(--back-mask) center / var(--back-mask-size) no-repeat; mask: var(--back-mask) center / var(--back-mask-size) no-repeat; }
.card.turned::before { animation: turned-back .75s linear var(--dd, 0s) both; }
.card.river-drama::before { animation: drama-back 2.4s linear var(--dd, 0s) both; }
.card:not(.back):not(.turned):not(.river-drama)::before { content: none; }
/* Back patterns are sized in em (designs.js): a tenth of the card's width, whatever its size. */
/* (Never below 5px: on tiny previews finer lines would blur into a moiré.) */
.card.back, .card.turned::after, .card.river-drama::after { font-size: max(5px, calc(var(--cw) / 10)); }
.card.back { --edge-line: var(--face-edge); background: var(--back-pattern),
    radial-gradient(circle at 50% 50%, var(--back-1), var(--back-2)); border: calc(var(--cw) * .07) solid var(--back-edge); animation-name: deal; }
.card.win { translate: 0 -5px; box-shadow: 0 0 0 2px var(--win), 0 0 20px #ecc874aa; }
.dim .card:not(.win) { filter: brightness(.55) saturate(.7); }
/* Live odds: the cards that make your current hand */
.card.live { box-shadow: 0 0 0 2px #7cc495, 0 0 14px #7cc49577; }
@keyframes deal { from { opacity: 0; transform: translateY(-18px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes flip { from { opacity: 0; transform: rotateY(80deg) scale(.95); } to { opacity: 1; transform: none; } }

.board { position: absolute; left: 50%; top: 49%; transform: translate(-50%, -50%); display: flex; gap: calc(var(--cw) * .13); --cw: clamp(30px, 6.8cqw, 78px); z-index: 1; }
.portrait .board { --cw: clamp(28px, 12.4cqw, 62px); top: 51%; }
.slot { width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: calc(var(--cw) * .09); border: 1px dashed #f5efe226; display: grid; }
.pot {
  position: absolute; left: 50%; top: 31%; transform: translate(-50%, -50%); z-index: 1;
  display: flex; align-items: center; gap: 8px; padding: 4px 13px 4px 5px; border-radius: var(--r-pill);
  background: #0000004d; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: clamp(12px, 1.6cqw, 16px);
}
.portrait .pot { top: 34%; }
.pot .lbl { color: var(--muted); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: .75em; }
.result { position: absolute; left: 50%; transform: translate(-50%, -50%); z-index: 4; text-align: center; width: max-content; }
.result .main { color: var(--win); font-weight: 600; }
.result .sub { color: var(--ivory-2); font-size: .9em; }
.waiting { position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%); z-index: 3; color: var(--ivory-2); font-weight: 600; text-align: center; font-size: clamp(13px, 1.6cqw, 16px); }

/* Seats */
.seat {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; --cw: clamp(24px, 4.8cqw, 54px); transition: opacity .3s ease;
}
.many .seat { --cw: clamp(22px, 4.2cqw, 46px); }
.portrait .seat { --cw: clamp(22px, 9cqw, 42px); }
.seat.me { --cw: clamp(42px, 7.4cqw, 84px); z-index: 3; }
.portrait .seat.me { --cw: clamp(38px, 14cqw, 70px); }
.hole { display: flex; position: relative; z-index: 0; min-height: calc(var(--cw) * 1.4); margin-bottom: calc(var(--cw) * -.6); transition: opacity .3s ease; }
.seat.me .hole { margin-bottom: calc(var(--cw) * -.22); }
.hole .card + .card { margin-left: calc(var(--cw) * -.36); }
.hole .card:first-child { rotate: -5deg; }
.hole .card:last-child { rotate: 5deg; }
.hole[data-n="4"] .card + .card, .hole[data-n="5"] .card + .card { margin-left: calc(var(--cw) * -.56); }
.seat.me .hole[data-n="4"] .card + .card, .seat.me .hole[data-n="5"] .card + .card { margin-left: calc(var(--cw) * -.5); }
.hole[data-n="4"] .card:nth-child(1) { rotate: -8deg; }
.hole[data-n="4"] .card:nth-child(2) { rotate: -3deg; }
.hole[data-n="4"] .card:nth-child(3) { rotate: 3deg; }
.hole[data-n="4"] .card:nth-child(4) { rotate: 8deg; }
.hole[data-n="5"] .card:nth-child(1) { rotate: -9deg; }
.hole[data-n="5"] .card:nth-child(2) { rotate: -4.5deg; }
.hole[data-n="5"] .card:nth-child(3) { rotate: 0deg; }
.hole[data-n="5"] .card:nth-child(4) { rotate: 4.5deg; }
.hole[data-n="5"] .card:nth-child(5) { rotate: 9deg; }
/* Avatar busts: above other players' cards, beside your own so they never cover your bet or the board */
.table-wrap.with-busts { padding-top: clamp(56px, 8.5cqw, 104px); }
.seat .bust {
  position: absolute; left: 50%; bottom: calc(100% - var(--cw) * .12); transform: translateX(-50%);
  width: calc(var(--cw) * 2); height: auto; pointer-events: none; filter: drop-shadow(0 6px 8px #0009);
}
.seat.me .bust { left: auto; right: calc(100% + 4px); bottom: 0; transform: none; width: calc(var(--cw) * 1.45); }
/* (your own bust opens the emotes: play.js) */
.with-emotes .seat.me .bust { pointer-events: auto; cursor: pointer; }
.portrait .seat.me .bust { width: calc(var(--cw) * 1.15); }
.seat.folded .bust, .seat.away .bust { opacity: .45; filter: grayscale(.6) drop-shadow(0 6px 8px #0009); }
.seat.acting .bust { filter: drop-shadow(0 0 10px #d4ab5e88) drop-shadow(0 6px 8px #0009); }
.plate { position: relative; z-index: 1; text-align: center; padding: 6px 12px 8px; border-radius: var(--r-md); background: linear-gradient(#2d1e19, #190f0c); border: 1px solid #ffffff17; box-shadow: 0 10px 22px -8px #000d; transition: border-color .2s ease, box-shadow .2s ease, opacity .3s ease; }
.many .plate { min-width: clamp(74px, 11cqw, 128px); padding: 5px 9px 7px; }
.portrait .plate { min-width: clamp(70px, 23cqw, 116px); padding: 5px 8px 7px; }
.row1 { display: flex; gap: 6px; align-items: center; justify-content: center; white-space: nowrap; }
.row1 .avatar { --s: 18px; font-size: 10px; }
.seat .name { font-weight: 600; font-size: clamp(12px, 1.4cqw, 15px); overflow: hidden; text-overflow: ellipsis; }
.seat .tag { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.seat .stack { color: var(--brass); font-weight: 600; font-variant-numeric: tabular-nums; font-size: clamp(12px, 1.55cqw, 16px); }
.dbtn {
  position: absolute; right: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ivory); color: var(--ink); font: 700 11px/22px var(--sans); text-align: center; box-shadow: 0 2px 4px #000a, inset 0 0 0 2px #00000014;
}
.badge {
  position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); white-space: nowrap;
  padding: 2px 9px; border-radius: var(--r-pill); background: #0d0807; border: 1px solid #ffffff2a;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.badge.allin { background: var(--chip-red); border-color: transparent; color: #fff; }
.badge.win { background: var(--win); border-color: transparent; color: var(--ink); }
.badge.thinking { display: flex; gap: 3px; padding: 5px 9px; }
.badge.thinking i { width: 4px; height: 4px; border-radius: 50%; background: var(--brass); animation: blink 1s infinite both; }
.badge.thinking i:nth-child(2) { animation-delay: .15s; }
.badge.thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* All-in equity shown on each player whose cards are face up */
.equity {
  position: absolute; top: -8px; left: -10px; z-index: 6; padding: 2px 7px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 700;
  font-variant-numeric: tabular-nums; background: #0d0807; border: 1px solid #7cc49599; color: var(--good);
}
.seat.acting .plate { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass), 0 0 26px #d4ab5e55, 0 10px 22px -8px #000d; }
.seat.folded .plate { background: linear-gradient(#2d1e1999, #190f0c99); border-color: #ffffff0d; }
.seat.folded .plate > :not(.chipstack), .seat.folded .chipstack .piles { opacity: .55; }
.seat.folded .hole { opacity: .3; }
.seat.away .plate > :not(.chipstack) { opacity: .5; }
.seat.winner .plate { border-color: var(--win); box-shadow: 0 0 0 2px var(--win), 0 0 40px #ecc87466; }
.clock-bar { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 3px; border-radius: 3px; background: #ffffff1a; overflow: hidden; }
.clock-bar i { position: absolute; inset: 0; background: var(--brass); transform-origin: left center; transition: transform .1s linear; }
.clock-bar.low i { background: #e0565b; }
.empty-seat {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 2;
  width: clamp(54px, 8cqw, 76px); aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed #d4ab5e66; background: #0000004d;
  color: var(--ivory-2); font-size: clamp(9px, 1.1cqw, 11px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.empty-seat:hover:not(:disabled) { border-color: var(--brass); color: var(--brass); background: #d4ab5e14; }
.empty-seat:disabled { cursor: default; opacity: .35; }
.portrait .empty-seat { width: clamp(48px, 15cqw, 64px); }

.bet { position: absolute; left: var(--bx); top: var(--by); transform: translate(-50%, -50%); z-index: 1; display: flex; align-items: center; border-radius: var(--r-pill); background: #00000047; font-weight: 600; font-variant-numeric: tabular-nums; font-size: clamp(11px, 1.3cqw, 14px); white-space: nowrap; animation: slide .3s ease both; }
@keyframes slide { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
.chip {
  --c: var(--chip-red); flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0 40%, #f5efe2 41% 46%, var(--c) 47% 62%, transparent 63%), repeating-conic-gradient(#f5efe2 0 14deg, var(--c) 14deg 45deg);
  box-shadow: 0 0 0 1px #0009, 0 2px 3px #0009;
}
.chip.blue { --c: var(--chip-blue); }
.chip.black { --c: var(--chip-black); }
.chip.brass { --c: #a8822f; }

.overlay { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: #0d0807b8; backdrop-filter: blur(3px); border-radius: 28px; }
.overlay .panel { text-align: center; max-width: 360px; display: grid; gap: 10px; justify-items: center; }
.overlay h2 { font-family: var(--display); font-weight: 400; font-size: var(--fs-3xl); color: var(--brass); }

/* Controls */
.controls { display: grid; gap: 12px; padding: 14px 16px; margin-top: 6px; border-radius: var(--r-lg); background: linear-gradient(#24171380, #1a110ecc); border: 1px solid var(--line); }
.status { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 14px; min-height: 1.5em; color: var(--muted); }
.status b { color: var(--text); font-weight: 600; }
.clock { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.clock.low { color: #ff7a7e; animation: blink 1s infinite; }
.actions { display: grid; grid-template-columns: 1fr 1.25fr 1.45fr; gap: 10px; }
.actions .btn { min-height: 50px; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.actions .fold { background: transparent; border-color: #ffffff33; color: var(--text); }
kbd { font: 600 10px/1 var(--sans); padding: 3px 5px; border: 1px solid currentColor; border-radius: var(--r-xs); opacity: .5; }
@media (hover: none) { kbd { display: none; } }
.sizing { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets button { background: #ffffff0d; border: 1px solid #ffffff21; border-radius: var(--r-pill); padding: 6px 11px; font-size: var(--fs-xs); cursor: pointer; }
.presets button:hover:not(:disabled) { border-color: var(--brass-dim); }
.presets button:disabled { opacity: .35; cursor: not-allowed; }
.slider-row { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 0; }
.slider-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--brass); }
.slider-row input[type="number"] { width: 110px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid #ffffff2a; background: #0d0807; font-weight: 600; font-variant-numeric: tabular-nums; }
.table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 520px) {
  .actions { grid-template-columns: 1fr 1fr; }
  .actions .raise { grid-column: 1 / -1; order: -1; }
}

/* Live odds panel */
.odds-panel { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid #7cc49540; background: linear-gradient(#162019cc, #111612cc); }
.odds-panel .hand-now { font-size: var(--fs-lg); font-weight: 700; }
.odds-meter { position: relative; height: 10px; border-radius: var(--r-pill); background: #ffffff14; overflow: hidden; }
.odds-meter i { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill); background: linear-gradient(90deg, #4f8f66, #7cc495); transition: width .4s ease; }
.odds-meter .avg { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ivory-2); opacity: .6; }
.odds-figs { display: flex; flex-wrap: wrap; gap: 6px 18px; font-variant-numeric: tabular-nums; color: var(--ivory-2); font-size: var(--fs-md); }
.odds-figs b { color: var(--text); font-size: var(--fs-xl); }
.outs { display: flex; flex-wrap: wrap; gap: 6px; }
.odds-panel .eyebrow + .outlook { margin-top: -4px; }
/* After-the-hand review */
.outlook { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.outlook li { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(40px, 1fr) 3.2em; align-items: center; gap: 4px 10px; }
.outlook li:has(.sub) { grid-template-columns: minmax(0, 7.6em) minmax(44px, 1fr) 2.9em 4.9em; gap: 4px 8px; }
.outlook .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.outlook .bar { position: relative; height: 6px; border-radius: var(--r-pill); background: #ffffff12; overflow: hidden; }
.outlook .bar i { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill); background: #7cc495; }
.outlook .pc { text-align: right; font-weight: 600; color: var(--text); }
.outlook .sub { color: var(--muted); font-size: var(--fs-xs); }
.outlook .other .nm, .outlook .other .pc { color: var(--muted); font-weight: 400; }
.outlook .other .bar i { background: #ffffff40; }
.outs .pill { color: var(--good); border-color: #7cc49555; }

/* Side column: hand history and table chat */
.side-col { display: grid; gap: 14px; }
@media (min-width: 1180px) { .side-col { position: sticky; top: calc(var(--top-h) + 16px); } }
.history { display: flex; flex-direction: column; max-height: 360px; padding: 14px 14px 10px; border-radius: var(--r-lg); background: #00000030; border: 1px solid var(--line); }
@media (min-width: 1180px) { .history { max-height: 44vh; } }
.history ol { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; flex: 1; font-size: var(--fs-sm); line-height: 1.5; }
.history li.hand { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--brass); font-weight: 600; }
.history li.hand:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.history li.street { margin-top: 4px; color: var(--muted); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; }
.history li.win { color: var(--win); }
.history li.note { color: var(--muted); font-style: italic; }
.table-chat { display: flex; flex-direction: column; max-height: 300px; padding: 12px; border-radius: var(--r-lg); background: #00000030; border: 1px solid var(--line); }
.table-chat ol { list-style: none; margin: 0 0 8px; padding: 0; overflow-y: auto; flex: 1; font-size: var(--fs-sm); display: grid; gap: 4px; align-content: start; min-height: 60px; }
.table-chat li b { color: var(--brass); margin-right: 6px; }
.table-chat form { display: flex; gap: 6px; }
.table-chat .input { padding: 8px 10px; font-size: var(--fs-md); }

/* Speech bubbles for table chat */
.say {
  position: absolute; left: 50%; bottom: calc(100% - var(--cw) * .75); transform: translateX(-50%); z-index: 8;
  width: max-content; max-width: 190px; padding: 6px 11px; border-radius: var(--r-md); background: var(--ivory); color: var(--ink);
  font: 600 13px/1.3 var(--sans); text-align: center; overflow-wrap: anywhere; box-shadow: 0 8px 18px -6px #000c; pointer-events: none;
}
.say::after { content: ""; position: absolute; left: 50%; top: calc(100% - 1px); transform: translateX(-50%); width: 14px; height: 8px;
  background: var(--ivory); clip-path: polygon(0 0, 100% 0, 50% 100%); } /* overlaps the bubble by a pixel, so no seam shows */
.seat.me .say { bottom: calc(100% + 8px); }
.say.pop { animation: say-pop .3s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes say-pop { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.7); } to { opacity: 1; transform: translateX(-50%); } }

/* Side column: chat and hand history tabs */
.side-tabs { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-lg); background: #00000030; border: 1px solid var(--line); }
.side-tabs .tabs { justify-self: start; }
.side-tabs .count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: var(--r-pill); background: var(--chip-red); color: #fff; font-size: var(--fs-2xs); font-weight: 700; }
.side-tabs .pane { min-height: 0; }
.history-pane ol { list-style: none; margin: 0; padding: 0 4px 0 0; max-height: 340px; overflow-y: auto; font-size: var(--fs-sm); line-height: 1.4; }
@media (min-width: 1180px) { .history-pane ol, .gchat-list { max-height: 38vh; } }
/* The hand history as a timeline: each hand a header (its number, the game and blinds), then its lines along a thin
   line, every move with a dot in its colour (fold grey, check light, call blue, bet or raise brass, all in red), each
   street with its board as small cards (the new ones bright), hands shown on cards too, and the pot's winner in a
   box with a trophy (appendLog in table-view.js) */
.history-pane li { position: relative; margin-left: 5px; padding: 4px 4px 4px 16px; border-left: 2px solid #ffffff14; color: var(--text); }
.history-pane li::before { content: ''; position: absolute; left: -6px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: #3a2c27; }
.history-pane li.hand { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 16px 0 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: #ffffff08; }
.history-pane li.hand:first-child { margin-top: 0; }
.history-pane li.hand::before { display: none; }
.history-pane .lh-no { color: var(--brass); font-size: var(--fs-md); font-weight: 700; }
.history-pane .lh-sub { color: var(--muted); font-size: var(--fs-2xs); }
.history-pane li.note { color: var(--muted); font-size: var(--fs-xs); }
.history-pane li.note::before { top: 10px; left: -4px; width: 6px; height: 6px; background: #ffffff22; }
.history-pane li.lg-fold { color: var(--muted); }
.history-pane li.lg-fold::before { background: #6b5f58; }
.history-pane li.lg-check::before { background: var(--ivory-2); }
.history-pane li.lg-call::before { background: #5b9bd5; }
.history-pane li.lg-raise::before { background: var(--brass); }
.history-pane li.lg-allin { font-weight: 600; }
.history-pane li.lg-allin::before { background: var(--chip-red); box-shadow: 0 0 8px var(--chip-red); }
.history-pane li.street { padding-top: 10px; padding-bottom: 6px; color: var(--muted); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.history-pane li.street::before { top: 17px; left: -7px; width: 12px; height: 12px; border-radius: 3px; background: #1a110e; border: 2px solid var(--muted); box-sizing: border-box; }
/* (cards as Analyze's mini tiles, .mc in app.css) */
.history-pane .mcs { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; letter-spacing: 0; text-transform: none; }
.history-pane .mc.old { opacity: .45; }
.history-pane li.show { color: var(--text); font-size: var(--fs-sm); }
.history-pane li.show::before { top: 13px; left: -6px; width: 10px; height: 10px; background: var(--ivory); }
.history-pane li.win { margin: 6px 0 2px 5px; padding: 8px 10px 8px 34px; border-left: 0; border-radius: var(--r-md); background: linear-gradient(90deg, #ecc8742e, #ecc87410); color: var(--win); font-weight: 600; }
.history-pane li.win::before { display: none; }
.history-pane li.win svg { position: absolute; left: 10px; top: 9px; width: 16px; height: 16px; }
.gchat { display: grid; gap: 8px; }
.gchat-list { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 8px; align-content: start; max-height: 320px; min-height: 120px; overflow-y: auto; font-size: var(--fs-sm); }
.gchat-list li { display: flex; gap: 8px; align-items: flex-start; }
.gchat-list li > div { display: grid; min-width: 0; }
.gchat-list li b { font-size: var(--fs-xs); color: var(--brass); }
.gchat-list li span { overflow-wrap: anywhere; }
.gchat-list li.mine b { color: var(--good); }
.gchat-list li.sys { color: var(--muted); font-style: italic; font-size: var(--fs-xs); }
.gchat-list .gchat-empty { color: var(--muted); font-size: var(--fs-sm); }
.gchat-quick { display: flex; flex-wrap: wrap; gap: 5px; }
.gchat-quick button { padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid #ffffff21; background: #ffffff0d; font-size: var(--fs-xs); cursor: pointer; }
.gchat-quick button:hover { border-color: var(--brass-dim); }
.gchat-form { display: flex; gap: 6px; }
.gchat-form .input { padding: 8px 10px; font-size: var(--fs-md); }

/* ---------- Game lobby, standings and results ---------- */
.lobby-layout { display: grid; gap: 18px; align-items: start; }
@media (min-width: 1100px) { .lobby-layout { grid-template-columns: minmax(0, 1fr) 340px; } }
.lobby-layout > .panel:first-child { display: grid; gap: 16px; }
.lobby-layout > .panel:first-child .panel-head { margin-bottom: 0; }
.lobby-layout p { margin: 0; }
.lobby-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: var(--fs-sm); }
.lobby-facts b { color: var(--ivory-2); font-weight: 600; }
.lobby-default { align-items: end; }
.chip-input { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-sm); }
.chip-input .input { width: 112px; padding: 7px 10px; text-align: right; font-variant-numeric: tabular-nums; }
.lobby-actions { padding-top: 6px; border-top: 1px solid var(--line); }
.standings .panel-head { margin-bottom: 8px; }
.standings-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); }
.standings-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 44px; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--r-sm); }
.standings-list li.me { background: #d4ab5e14; }
.standings-list li.out { opacity: .55; }
.standings-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standings-list small { display: block; font-size: var(--fs-2xs); color: var(--muted); }
.standings-list .ch { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.standings-list .ch small.good { color: var(--good); }
.standings-list .ch small.bad { color: var(--bad); }
.standings-list .elo { text-align: right; color: var(--brass); font-variant-numeric: tabular-nums; }
.place-badge { display: inline-grid; place-items: center; min-width: 40px; padding: 3px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; border: 1px solid var(--line-2); color: var(--ivory-2); }
.place-badge.p1 { background: var(--brass); border-color: transparent; color: #1f1613; }
.place-badge.p2 { border-color: #d9d4ca88; }
.place-badge.p3 { border-color: #c48a5a88; }
.result-line { margin: 0 0 14px; font-size: var(--fs-base); }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.data-table th { text-align: left; font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.data-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tr.me td { background: #d4ab5e10; }
.hand-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); max-height: 360px; overflow-y: auto; }
.hand-list b { color: var(--brass); min-width: 34px; }
/* Live odds without Poncler Pro */
.seg label.locked { opacity: .6; cursor: pointer; }
.seg label.locked b { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.seg label.locked svg { width: 12px; height: 12px; }

/* ---------- Pro HUD on opponents ---------- */
.hud-read { --hud-c: var(--muted); }
.t-aggressive { --hud-c: #e0565b; }
.t-wild { --hud-c: #ff8a3d; }
.t-passive { --hud-c: #6fa8dc; }
.hud-read { display: grid; gap: 4px; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--r-md); background: #ffffff08; border-left: 3px solid var(--hud-c); }
.hud-read b { color: var(--hud-c); font-size: var(--fs-lg); }
.hud-table th small { display: block; font-size: 10.5px; letter-spacing: 0; text-transform: none; font-weight: 400; }
.hud-table tr.grp td { padding-top: 14px; font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); border-bottom-color: var(--line-2); }
.locked-btn { opacity: .7; }
.locked-btn svg { width: 13px; height: 13px; }

/* ---------- Paused by the host ---------- */
.waiting.paused { padding: 10px 18px; border-radius: var(--r-md); background: #0d0807d9; border: 1px solid var(--brass); color: var(--brass); font-size: clamp(14px, 1.9cqw, 19px); letter-spacing: .04em; }
.table-wrap:has(.waiting.paused) .seat { filter: saturate(.6); }

/* ---------- Minimized game while you browse other pages ---------- */
.mini-games { position: fixed; z-index: 150; right: 24px; bottom: 24px; display: grid; gap: 10px; align-content: end; width: min(300px, calc(100vw - 32px)); }
/* Toasts move aside so they never cover a game window. */
@media (min-width: 960px) { body:has(.mini-games:not([hidden])) #toasts { right: 340px; } }
@media (max-width: 959px) { body:has(.mini-games:not([hidden])) #toasts { bottom: auto; top: calc(var(--top-h) + 8px); } }
.mini-games[hidden] { display: none; }
.mini-game {
  display: grid; gap: 10px; padding: 12px 12px 14px; border-radius: var(--r-lg); background: linear-gradient(#2d1e19f7, #190f0cf7);
  border: 1px solid #d4ab5e55; box-shadow: 0 18px 40px -12px #000; backdrop-filter: blur(6px);
  animation: mg-in .25s ease both;
}
@keyframes mg-in { from { opacity: 0; transform: translateY(-8px); } }
.mg-head { display: flex; align-items: center; gap: 8px; }
.mg-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
button.mg-title { background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.mg-title svg { flex: none; width: 18px; height: 18px; color: var(--brass); }
.mg-title > span { display: grid; min-width: 0; }
.mg-title b { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-title small { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-collapse { font-size: var(--fs-lg); line-height: 1; } /* (the small icon button's size: small-icon) */
.mini-game.collapsed { padding-block: 8px; }
.mini-game.collapsed .mg-body { display: none; }
.mg-body { display: grid; gap: 9px; }
.mg-cards { display: flex; align-items: center; gap: 10px; --cw: 30px; }
.mg-cards .card { animation: none; }
.mg-hole, .mg-board { display: flex; gap: 3px; }
.mg-hole .card + .card { margin-left: -6px; }
.mg-board { --cw: 24px; }
.mg-board i { width: 24px; height: 33.6px; border-radius: 3px; border: 1px dashed #ffffff22; }
.mg-status { font-size: var(--fs-sm); color: var(--ivory-2); }
.mg-clock { position: relative; height: 4px; border-radius: var(--r-xs); background: #ffffff1a; overflow: hidden; }
.mg-clock i { position: absolute; inset: 0; background: var(--brass); transform-origin: left center; transition: transform .2s linear; }
.mg-clock.low i { background: #e0565b; }
.mg-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mg-actions .btn { flex: 1; justify-content: center; }
.mini-game.paused .mg-status { color: var(--brass); }
/* Your turn: a pulsing brass glow you can't miss */
.mini-game.turn { border-color: var(--brass); animation: mg-in .25s ease both, mg-flash 1.1s ease-in-out infinite; }
.mini-game.turn .mg-status { color: var(--brass); font-weight: 700; font-size: var(--fs-base); }
.mini-game.turn .mg-title svg { animation: blink .9s infinite both; }
@keyframes mg-flash {
  0%, 100% { box-shadow: 0 0 0 2px var(--brass), 0 0 22px #d4ab5e55, 0 18px 40px -12px #000; transform: scale(1); }
  50% { box-shadow: 0 0 0 4px #ecc874, 0 0 46px #ecc874aa, 0 18px 40px -12px #000; transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .mini-game.turn { animation: none; box-shadow: 0 0 0 3px var(--brass), 0 18px 40px -12px #000; }
  .mini-game.turn .mg-title svg { animation: none; }
}
@media (max-width: 959px) { .mini-games { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); right: 12px; width: min(300px, calc(100vw - 24px)); } }
.mini-games, .mini-game .card { -webkit-user-select: none; user-select: none; }

/* ---------- Live odds after the hand ---------- */
.odds-panel.stale { border-color: #ffffff22; background: linear-gradient(#1b1a17cc, #121110cc); }
.odds-panel.stale .odds-meter i { background: linear-gradient(90deg, #6d7f72, #9fb5a6); }

/* ---------- After-hand review carousel ---------- */
.odds-panel.reviewing { gap: 8px; }
.rv-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--r-lg); }
.rv-track::-webkit-scrollbar { display: none; }
.rv-track:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rv-slide {
  flex: 0 0 100%; scroll-snap-align: start; display: grid; gap: 9px; align-content: start; padding: 12px 14px 14px; border-radius: var(--r-lg);
  background: #00000030; border: 1px solid #ffffff14; border-top: 3px solid #ffffff2a; min-width: 0;
}
.rv-slide.good { border-top-color: #7cc495; }
.rv-slide.bad { border-top-color: #ef7b80; }
.rv-slide.warn { border-top-color: #e8b04f; }
.rv-slide.final { border-top-color: var(--brass); }
.rv-cards { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; --cw: 34px; }
.rv-cards .card { animation: none; }
.rv-hole, .rv-board { display: flex; gap: 3px; }
.rv-hole .card + .card { margin-left: -8px; }
.rv-board { --cw: 28px; }
.rv-note { font-size: var(--fs-xs); margin: -4px 0 0; }
.odds-meter.short i { background: linear-gradient(90deg, #a5454a, #ef7b80); }
.rv-verdict { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid #ffffff14; font-size: var(--fs-sm); }
.rv-verdict p { margin: 0; color: var(--ivory-2); }
.rv-slide.good .rv-verdict b { color: var(--good); }
.rv-slide.bad .rv-verdict b { color: var(--bad); }
.rv-slide.warn .rv-verdict b { color: var(--warn); }
.rv-nav { display: flex; align-items: center; justify-content: center; gap: 10px; }
.rv-nav .icon-btn { width: 32px; height: 32px; font-size: var(--fs-xl); line-height: 1; } /* (the small icon button's size) */
.rv-nav .icon-btn:disabled { opacity: .35; cursor: default; }
.rv-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.rv-dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: #ffffff33; cursor: pointer; transition: width .2s ease, background .2s ease; }
.rv-dots button[aria-current] { width: 20px; border-radius: var(--r-xs); background: var(--brass); }
@media (prefers-reduced-motion: reduce) { .rv-track { scroll-behavior: auto; } }

/* HUD figures: blue for tight or passive, ivory in between, red for loose or aggressive */
.n-lo { color: #7fb6e8; }
.n-mid { color: var(--ivory-2); }
.n-hi { color: #ff8a80; }
.n-none { color: var(--muted); }

/* ---------- Seat extras: flag and lifetime Elo in competitive games ---------- */
.seat-elo { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: var(--r-sm); color: var(--brass); border: 1px solid #d4ab5e55; font-variant-numeric: tabular-nums; }
.standings-list .flag { width: 13px; height: 10px; }

/* ---------- Replays ---------- */
.replay-layout { display: grid; gap: 18px; align-items: start; }
@media (min-width: 1100px) { .replay-layout { grid-template-columns: 340px minmax(0, 1fr); } .replay-list { position: sticky; top: calc(var(--top-h) + 16px); } }
.replay-list { display: grid; gap: 12px; }
.rp-items { display: grid; gap: 4px; max-height: 64vh; overflow-y: auto; margin: 0 -8px; padding: 0 8px; }
.rp-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--r-md);
  border: 1px solid transparent; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.rp-item:hover { background: #ffffff08; }
.rp-item.on { background: #d4ab5e14; border-color: #d4ab5e55; }
.rp-cards { font-size: var(--fs-base); white-space: nowrap; }
.rp-main { display: grid; min-width: 0; }
.rp-main b { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-main small { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-main .rp-board { color: var(--ivory-2); }
.replay-view { display: grid; gap: 12px; min-width: 0; }
.rp-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: var(--r-lg); background: #ffffff06; border: 1px solid var(--line); }
.rp-controls .icon-btn { font-size: var(--fs-md); }
.rp-streets { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-streets .pill { cursor: pointer; background: none; font: inherit; font-size: var(--fs-xs); font-weight: 600; }
.rp-streets .pill.on { background: var(--brass); color: var(--ink); border-color: transparent; }
.rp-bottom { display: grid; gap: 12px; align-items: start; }
@media (min-width: 1280px) { .rp-bottom { grid-template-columns: minmax(0, 1fr) 320px; } }
.rp-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 260px; overflow-y: auto; border-radius: var(--r-md); border: 1px solid var(--line); padding: 6px; }
.rp-steps button { width: 100%; text-align: left; padding: 6px 10px; border-radius: var(--r-sm); border: 0; background: none; color: var(--ivory-2); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.rp-steps button:hover { background: #ffffff08; }
.rp-steps li.on button { background: #d4ab5e1f; color: var(--text); }
.rp-steps .muted { display: inline-block; min-width: 56px; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; }
.rp-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); margin-left: auto; white-space: nowrap; }
.rp-link svg { width: 14px; height: 14px; }

/* ---------- HUD inside the name plate (Pro) ---------- */
/* Left: VPIP, right: aggression. Blue tight/passive, green normal, yellow loose/aggressive, red maniac. */
.plate .plate-hud[hidden] { display: none; }
.plate .plate-hud { display: flex; justify-content: center; }
.hud-seg { flex: 1; display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0;
  font: 800 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: #10120f; background: #ffffff1f; }
.hud-seg:first-child { border-radius: 6px 0 0 6px; }
.hud-seg:last-child { border-radius: 0 6px 6px 0; }
.hud-seg small { font-size: 7.5px; font-weight: 800; letter-spacing: .06em; opacity: .7; }
.hud-seg.b0 { background: #5b9bd5; }
.hud-seg.b1 { background: #5fb878; }
.hud-seg.b2 { background: #e8c547; }
.hud-seg.b3 { background: #e0565b; color: #fff; }
.hud-seg.bx { color: var(--muted); }
.hud.few .hud-seg { opacity: .7; background-image: repeating-linear-gradient(135deg, #ffffff22 0 4px, transparent 4px 8px); }
/* The run icon: a round badge sitting on the seam between the two halves */
.hud.has-run .hud-seg:first-child { justify-content: flex-start; padding: 0 15px 0 6px; }
.hud.has-run .hud-seg:last-child { justify-content: flex-end; padding: 0 6px 0 15px; }
.hud.has-run .hud-seg small { display: none; }
.hud-run { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: grid; place-items: center;
  width: 25px; height: 25px; border-radius: 50%; background: #0d0807; box-shadow: 0 0 0 2px #2d1e19, 0 2px 6px #000a; }
.hud-run svg { width: 15px; height: 15px; }
.run-cold { color: #9fd4ff; }
.run-hot { color: #ff8a3d; }
.run-blaze { color: #ffd23f; }
.hud-run.run-blaze, .hud-run.run-hot { box-shadow: 0 0 0 2px #2d1e19, 0 0 10px currentColor; }
.hud-run.run-cold { box-shadow: 0 0 0 2px #2d1e19, 0 0 8px #9fd4ff88; }
.many .hud-seg small, .portrait .hud-seg small { display: none; }
.plate.clickable { cursor: pointer; }
.plate.clickable:hover { border-color: #d4ab5e88; }
.plate.clickable:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Player card pop-up (compact, tabbed) ---------- */
.pc-modal .modal-body { gap: 12px; }
.player-card { display: grid; gap: 12px; }
.pc-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pc-facts div { display: grid; padding: 5px 10px; border-radius: var(--r-sm); background: #ffffff08; border: 1px solid var(--line); }
.pc-facts small { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pc-facts b { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.pc-style { display: grid; gap: 10px; }
.pc-bands { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.band { display: grid; gap: 1px; padding: 8px 12px; border-radius: var(--r-md); color: #10120f; background: #ffffff1f; }
.band small { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.band b { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.band em { font-style: normal; font-weight: 700; font-size: var(--fs-xs); }
.band.b0 { background: #5b9bd5; } .band.b1 { background: #5fb878; } .band.b2 { background: #e8c547; } .band.b3 { background: #e0565b; color: #fff; }
.band.bx { color: var(--muted); }
.run-line { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-md); }
.run-line svg { width: 18px; height: 18px; }
.pc-foot { margin: 0; font-size: var(--fs-xs); }
.pc-upsell { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: #d4ab5e12; border: 1px solid #d4ab5e44; font-size: var(--fs-sm); }
.pc-upsell svg { flex: none; width: 16px; height: 16px; color: var(--brass); margin-top: 2px; }

/* ---------- Hand rankings ---------- */
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rank-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm); }
.rank-list li:nth-child(odd) { background: #ffffff06; }
.rank-list .n { color: var(--brass); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.rank-list .t { display: grid; min-width: 0; }
.rank-list .t small { color: var(--muted); font-size: var(--fs-xs); }
.rank-list .ex { font-size: var(--fs-base); }
.rank-tips { display: grid; gap: 6px; margin-top: 12px; font-size: var(--fs-sm); color: var(--ivory-2); }
.rank-tips p { margin: 0; }

/* Hand rankings with real cards */
.rank-list .ex { white-space: nowrap; display: flex; gap: 3px; --cw: 30px; letter-spacing: 0; }
.rank-list .ex .card { animation: none; }
@media (max-width: 560px) {
  .rank-list li { grid-template-columns: 24px minmax(0, 1fr); }
  .rank-list .ex { grid-column: 2; --cw: 26px; }
}
@media (min-width: 900px) { .rank-list { display: block; columns: 2; column-gap: 16px; } .rank-list li { break-inside: avoid; margin-bottom: 4px; } }

/* ---------- Show my cards, and a player's hands in this game ---------- */
.ph-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ph-no { color: var(--brass); font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.ph-cards { display: flex; --cw: 24px; }
.ph-cards .card { animation: none; }
.ph-cards .card + .card { margin-left: -6px; }
.ph-what { display: grid; min-width: 0; font-size: var(--fs-sm); }
.ph-what small { color: var(--muted); font-size: var(--fs-xs); }
.ph-what .ph-showed { color: var(--brass); }

/* ---------- Best possible hands on the river (live odds and review) ---------- */
.best-hands { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-md); background: #00000038; border: 1px solid #d4ab5e44; }
.best-hands ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.best-hands li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: var(--fs-sm); padding: 2px 4px; border-radius: var(--r-sm); }
.best-hands li.mine { background: #7cc4951f; }
.best-hands .bh-rank { font-size: var(--fs-2xs); font-weight: 700; color: var(--muted); }
.best-hands li:first-child .bh-rank { color: var(--brass); }
.best-hands .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.best-hands .nm .pill { padding: 0 6px; }
.best-hands .bar { height: 6px; border-radius: var(--r-sm); background: #ffffff14; overflow: hidden; }
.best-hands .bar i { display: block; height: 100%; background: linear-gradient(90deg, #a5454a, #ef7b80); }
.best-hands .bh-who { grid-column: 3 / -1; text-align: right; font-size: var(--fs-xs); color: var(--ivory-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.best-hands .bh-yours { margin: 2px 0 0; font-size: var(--fs-xs); }

/* ---------- Player card carousel: Overview · Hands · Style ---------- */
.pc-nav { display: flex; align-items: center; gap: 8px; }
.pc-nav .icon-btn { width: 32px; height: 32px; font-size: var(--fs-lg); flex: none; }
.pc-nav .icon-btn:disabled { opacity: .35; cursor: default; }
.pc-pos { flex: 1; display: flex; gap: 4px; padding: 3px; border-radius: var(--r-md); background: #00000033; }
.pc-pos button { flex: 1; padding: 6px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font: 600 13px var(--sans); cursor: pointer; }
.pc-pos button[aria-selected="true"] { background: var(--panel-2); color: var(--brass); box-shadow: inset 0 0 0 1px #d4ab5e33; }
.pc-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; height: min(300px, 42vh); }
.pc-track::-webkit-scrollbar { display: none; }
.pc-track:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-md); }
.pc-slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; gap: 10px; align-content: start; overflow-y: auto; min-width: 0; padding: 2px; }
.pc-slide .hud-read { margin: 0; padding: 9px 12px; }
.pc-slide .hud-read b { font-size: var(--fs-lg); }
.pc-latest { display: grid; gap: 6px; width: 100%; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid #d4ab5e44; background: #d4ab5e0d; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pc-latest:hover { border-color: var(--brass); }
.pc-more { font-size: var(--fs-xs); color: var(--brass); font-weight: 600; }
.ph-row { display: grid; grid-template-columns: 38px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ph-list li.ph-row { padding: 7px 10px; border-radius: var(--r-md); background: #ffffff06; }
.pc-streets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pc-street { padding: 10px 12px; border-radius: var(--r-md); background: #ffffff08; border: 1px solid var(--line); }
.pc-street h4 { margin: 0 0 6px; font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.pc-street ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.pc-street li { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); }
.pc-street b { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .pc-streets { grid-template-columns: 1fr; } }

/* Show my cards: beside your own name plate once the hand is over */

/* Player card header: centred avatar, name and the HUD bar */
.pc-head { display: grid; justify-items: center; gap: 3px; text-align: center; }
.pc-head > .avatar { margin-bottom: 4px; box-shadow: 0 0 0 2px #d4ab5e55, 0 10px 24px -10px #000; }
.pc-name { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; font-size: var(--fs-xl); }
.pc-bio { margin: 2px 0 0; max-width: 46ch; font-size: var(--fs-sm); color: var(--ivory-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-hud { display: flex; align-items: stretch; gap: 2px; position: relative; width: min(280px, 100%); height: 26px; margin-top: 8px; }
.pc-hud .hud-seg { font-size: var(--fs-md); }
.pc-hud .hud-seg small { font-size: 9px; }
.pc-hud .hud-run { width: 30px; height: 30px; }
.pc-hud .hud-run svg { width: 18px; height: 18px; }
.pc-slide .run-line { margin-top: -2px; }

/* Each player's chips: piles sorted by colour, with the amount, to the right of the name plate */
.chipstack { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 6px; display: grid; justify-items: center; gap: 2px; pointer-events: none; z-index: 2; cursor: default; }
.piles { display: flex; align-items: flex-end; gap: 3px; padding-bottom: 4px; }
.pile { display: flex; flex-direction: column-reverse; align-items: center; }
/* Each chip is a small cylinder: a striped edge (::after) under a top face with white edge spots.
   Every chip is its own stacking layer, so the one above covers the one below and only its edge shows. */
.c3 { position: relative; z-index: 0; display: block; width: var(--w); height: var(--h); border-radius: 50%; }
.c3::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; }
/* Each value's colour, changeable on the Design page */
.c3.v5000 { --face: var(--chip-5000, #e07a2e); }
.c3.v1000 { --face: var(--chip-1000, #d4ab5e); }
.c3.v500 { --face: var(--chip-500, #6b3fa0); }
.c3.v100 { --face: var(--chip-100, #2a2a2a); }
.c3.v25 { --face: var(--chip-25, #2e8b57); }
.c3.v5 { --face: var(--chip-5, #b4232c); }
/* Seats on the right half of the table keep their chips on the felt side, to the left of the plate */
.seat.right .chipstack { left: auto; right: 100%; margin: 0 6px 0 0; }
.chipstack .stack { font-size: clamp(11px, 1.35cqw, 14px); padding: 1px 6px; border-radius: var(--r-sm); background: #0d0807cc; white-space: nowrap; }
.plate-stack { display: none; }
/* Your own chips: "Your stack" over the piles and the amount, side by side as in the other plates, and on phones
   the Chat button to their right (`meTools`). Others' chips have no label. */
.seat.me .chipstack { margin-left: 8px; grid-template-columns: auto auto auto; grid-template-areas: "lbl lbl tools" "piles stack tools"; align-items: center; column-gap: 6px; row-gap: 1px; }
.stack-lbl { display: none; }
.seat.me .stack-lbl { display: block; grid-area: lbl; justify-self: start; font-size: var(--fs-2xs); color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
.seat.me .chipstack .piles { grid-area: piles; padding-bottom: 0; }
.seat.me .chipstack .stack, .seat.me .chipstack > .ps-net { grid-area: stack; justify-self: start; }
.seat-tools { grid-area: tools; pointer-events: auto; }
.seat-tools:empty { display: none; }
.seat-tools .seat-chat { position: relative; }
/* (Chat, History and Live odds side by side) */
.seat-tools:not(:empty) { display: inline-flex; gap: 6px; }
/* Your seat: Show my cards and the hand name move out past the chips */
/* Phones (narrow tables): the old look, with the amount inside the plate and no piles */
.portrait .seat:not(.me) .chipstack { display: none; }
.pc-hud.has-run .hud-seg small { display: inline; }

/* Show: a closed eye until your cards are face up, then an open one */
.seat .show-btn { display: inline-flex; align-items: center; gap: 6px; }
.seat .show-btn svg { width: 16px; height: 16px; }
.seat .show-btn.shown, .seat .show-btn.shown:disabled { opacity: 1; background: #0d0807e6; color: var(--good); border-color: #7cc49588; cursor: default; }

/* Show: just above your chip pile, outside the dimming of a folded seat */
.chipstack .show-btn { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; pointer-events: auto; z-index: 6;
  white-space: nowrap; padding: 5px 11px; border-radius: var(--r-pill); font-size: var(--fs-xs); animation: show-in .25s ease both; }
@keyframes show-in { from { opacity: 0; transform: translate(-50%, -8px); } } /* (mg-in would drop the centring while it runs and slide in from the right) */
.chipstack .show-btn:active:not(:disabled) { transform: translate(-50%, 1px); } /* (pressed, it stays centred: the buttons' own press would drop the centring) */

/* Bets and the pot use the same 3D chips as the stacks, a little smaller */
.bet { gap: 5px; padding: 2px 9px 2px 5px; }
.bet .piles, .pot .piles { padding-bottom: 3px; gap: 2px; }
.bet .c3 { --w: clamp(12px, 1.55cqw, 17px); }
.pot .c3 { --w: clamp(13px, 1.75cqw, 19px); }
.pot { padding-left: 8px; }

/* The HUD's run badge stays underneath the plate's action badge (Fold, Call, Raise…), the dealer button and the clock */
.plate .hud-run { z-index: 1; }
.plate .badge, .plate .dbtn, .plate .clock-bar { z-index: 3; }

/* Opponents keep their chips inside the name plate: a compact row of small piles with the amount.
   Your own pile stays beside your plate (with Show above it). */
.seat:not(.me) .chipstack { position: static; transform: none; margin: 3px 0 0; display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
.seat:not(.me) .chipstack .piles { padding-bottom: 2px; gap: 2px; }
.seat:not(.me) .chipstack .c3 { --w: clamp(11px, 1.35cqw, 14px); }
.seat:not(.me) .chipstack .stack { padding: 0; background: none; font-size: clamp(12px, 1.5cqw, 15px); }
.seat.folded:not(.me) .chipstack { opacity: .55; }

/* Design page: chip colours */

/* ---------- History: games, each opening into its hands ---------- */
.replay-list { align-content: start; }
.rp-games { display: grid; gap: 6px; max-height: 70vh; overflow-y: auto; margin: 0 -8px; padding: 0 8px; }
.rp-game { border-radius: var(--r-md); border: 1px solid var(--line); background: #ffffff05; }
.rp-game.open { border-color: #d4ab5e55; }
.rp-game-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 14px; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-md); }
.rp-game-head:hover { background: #ffffff08; }
.rp-result { display: grid; justify-items: end; }
.rp-result small { font-size: var(--fs-xs); }
.rp-chev { color: var(--muted); font-size: var(--fs-lg); transition: transform .2s ease; }
.rp-game.open .rp-chev { transform: rotate(90deg); }
.rp-hands { display: grid; gap: 2px; padding: 0 6px 8px; border-top: 1px solid var(--line); }
.rp-loading { margin: 8px 6px; font-size: var(--fs-sm); }
.rp-locked { display: flex; align-items: center; gap: 8px; margin: 8px 6px 2px; font-size: var(--fs-sm); color: var(--ivory-2); }
.rp-locked svg { width: 15px; height: 15px; color: var(--brass); flex: none; }
.rp-locked .btn { margin-left: auto; }

/* No cards in front of an opponent (folded, or not dealt in): their bust drops down onto the plate instead of floating */
.seat:not(.me):has(> .hole:empty) .bust { bottom: calc(100% - var(--cw) * .8); }

/* ---------- Play page: start cards ---------- */
.start-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.start-cards .table-card h3 { display: flex; align-items: center; gap: 8px; }
.start-cards .table-card h3 svg { width: 20px; height: 20px; color: var(--brass); }
.quick-card { background: radial-gradient(ellipse 90% 100% at 0% 0%, #3a2a10, #1a110e 70%); border-color: #d4ab5e55; }
.quick-card.highlight { box-shadow: 0 0 0 2px var(--brass), 0 0 30px #d4ab5e44; }
.empty-inline { color: var(--muted); font-size: var(--fs-md); }

/* ---------- New game dialog: two columns on desktop ---------- */
.new-game { gap: 14px; }
@media (min-width: 860px) { .new-game { grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; } }
.ng-col { display: grid; gap: 12px; align-content: start; }
.new-game .seg label { padding-block: 7px; }
.ng-friends { display: grid; gap: 6px; max-height: 130px; overflow-y: auto; }

/* Design page: chip colours as swatches */
.chip-rows { display: grid; gap: 8px; }
.chip-row { display: grid; grid-template-columns: 40px 64px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-md); background: #ffffff06; border: 1px solid var(--line); }
.chip-row .c3 { --w: 28px; }
.chip-row b { font-variant-numeric: tabular-nums; }
.chip-sw { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 10px; }
.chip-sw small { font-size: var(--fs-xs); }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #0008; background: var(--s); cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 2px #ffffff40; transition: transform .12s ease; }
.swatch:hover { transform: scale(1.12); }
.swatch.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--brass); }
.swatch:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Stats card designs: a small card for the Design page and the shop */
.sc-preview { position: relative; display: grid; align-content: start; gap: 2px; aspect-ratio: 16 / 9; width: 100%; padding: 10% 9%; border-radius: var(--r-md); overflow: hidden;
  background: radial-gradient(ellipse 120% 110% at 30% 25%, var(--sc-1), var(--sc-2) 50%, var(--sc-3)); color: var(--sc-ink);
  box-shadow: inset 0 0 0 1px #0004, 0 8px 18px -10px #000; text-align: left; }
.sc-preview::before { content: ""; position: absolute; inset: 6%; border: 1px solid color-mix(in srgb, var(--sc-accent) 55%, transparent); border-radius: var(--r-sm); pointer-events: none; }
.sc-preview .sc-brand { font-family: Limelight, serif; font-size: var(--fs-sm); color: var(--sc-accent); }
.sc-preview .sc-label { font-size: 7px; letter-spacing: .18em; opacity: .7; margin-top: 4px; }
.sc-preview .sc-elo { font-size: var(--fs-2xl); line-height: 1; }
.sc-preview .sc-line { height: 2px; margin-top: 6px; width: 70%; background: linear-gradient(90deg, transparent, var(--sc-accent)); border-radius: 2px; }
.sc-preview .sc-figs { display: flex; gap: 6px; margin-top: 6px; }
.sc-preview .sc-figs i { width: 18%; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--sc-ink) 30%, transparent); }
.sc-preview.orn-foil::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, #ffe9a855 45%, transparent 60%); pointer-events: none; }
.sc-preview.orn-deco::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 0 100%, color-mix(in srgb, var(--sc-accent) 40%, transparent) 0 3deg, transparent 3deg 10deg) left bottom / 32% 52% no-repeat,
    repeating-conic-gradient(from 270deg at 100% 100%, color-mix(in srgb, var(--sc-accent) 40%, transparent) 0 3deg, transparent 3deg 10deg) right bottom / 32% 52% no-repeat; }
.sc-preview.orn-marble::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(28deg, transparent 0 18px, #0000000f 18px 19px, transparent 19px 34px), repeating-linear-gradient(-52deg, transparent 0 26px, #00000012 26px 27px, transparent 27px 44px); }
.sc-preview.orn-stars::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0 1px, transparent 1.5px) 0 0 / 23px 19px, radial-gradient(circle, #ffffffaa 0 1px, transparent 1.5px) 11px 9px / 31px 27px; opacity: .7; }
.sc-preview.orn-corners::before { inset: 6%; border-width: 1px; }
.sc-preview.orn-corners::after { content: ""; position: absolute; inset: 10%; pointer-events: none;
  background: linear-gradient(var(--sc-accent), var(--sc-accent)) 0 0 / 14% 2px no-repeat, linear-gradient(var(--sc-accent), var(--sc-accent)) 0 0 / 2px 22% no-repeat,
    linear-gradient(var(--sc-accent), var(--sc-accent)) 100% 0 / 14% 2px no-repeat, linear-gradient(var(--sc-accent), var(--sc-accent)) 100% 0 / 2px 22% no-repeat,
    linear-gradient(var(--sc-accent), var(--sc-accent)) 0 100% / 14% 2px no-repeat, linear-gradient(var(--sc-accent), var(--sc-accent)) 0 100% / 2px 22% no-repeat,
    linear-gradient(var(--sc-accent), var(--sc-accent)) 100% 100% / 14% 2px no-repeat, linear-gradient(var(--sc-accent), var(--sc-accent)) 100% 100% / 2px 22% no-repeat; }
.shop-item .sc-preview { margin-bottom: 4px; }

/* ---------- My stats: the card with its design picker beside it ---------- */
.stats-card-row { display: grid; gap: 18px; align-items: start; }
@media (min-width: 1100px) { .stats-card-row { grid-template-columns: minmax(0, 1fr) 300px; } }
.card-side { display: grid; gap: 10px; }
.card-designs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 640px) and (max-width: 1099px) { .card-designs { grid-template-columns: repeat(4, 1fr); } }
.card-design { display: grid; gap: 4px; padding: 4px; border-radius: var(--r-md); border: 1px solid var(--line); background: none; color: inherit; font: 600 12px var(--sans); cursor: pointer; text-align: left; }
.card-design span { align-items: center; gap: 4px; padding: 0 2px 2px; }
.card-design span svg { width: 11px; height: 11px; }
.card-design.on { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
.card-design.locked { opacity: .75; }
.card-design .sc-preview { border-radius: var(--r-sm); padding: 8% 8%; }
.card-design .sc-preview .sc-brand { font-size: 9px; }
.card-design .sc-preview .sc-elo { font-size: var(--fs-sm); }
.card-design .sc-preview .sc-label, .card-design .sc-preview .sc-figs { display: none; }
.invite-list { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.invite-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-md); cursor: pointer; }
.invite-row:hover { background: #ffffff08; }
.invite-row .grow { display: grid; flex: 1; min-width: 0; }
.invite-row small { font-size: var(--fs-xs); }

.card-design .cd-name { padding: 0 2px; }
.card-design .cd-price { font-size: var(--fs-2xs); font-weight: 600; color: var(--brass); padding: 0 2px 3px; }
.card-design span { display: block; }
.card-design .cd-price svg { width: 10px; height: 10px; vertical-align: -1px; }

/* ---------- Quick match: searching for players ---------- */
.search-box { display: grid; justify-items: center; gap: 10px; padding: 18px 8px 8px; text-align: center; }
.search-box h2 { margin: 0; font-size: var(--fs-2xl); }
.search-box p { margin: 0; }
.search-radar { position: relative; width: 120px; height: 120px; display: grid; place-items: center; margin-bottom: 6px; }
.search-radar svg { width: 34px; height: 34px; color: var(--brass); position: relative; z-index: 1; }
.search-radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brass); opacity: 0; animation: radar 2.4s ease-out infinite; }
.search-radar i:nth-child(2) { animation-delay: .8s; }
.search-radar i:nth-child(3) { animation-delay: 1.6s; }
@keyframes radar { 0% { transform: scale(.25); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .search-radar i { animation: none; opacity: .35; } .search-radar i:nth-child(2) { transform: scale(.66); } .search-radar i:nth-child(3) { transform: scale(.33); } }
.search-seats { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 6px; }
.search-seat { display: grid; justify-items: center; gap: 4px; width: 64px; }
.search-seat small { font-size: var(--fs-xs); color: var(--muted); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-seat.found small { color: var(--text); }
.search-empty { width: 44px; height: 44px; border-radius: 50%; border: 2px dashed #d4ab5e66; animation: blink 1.6s infinite both; }
.search-count { font-size: var(--fs-base); }


.pc-avatar { flex: none; display: block; line-height: 0; border-radius: 50%; }
.pc-avatar .avatar { box-shadow: 0 0 0 2px #d4ab5e66; transition: box-shadow .15s ease; }
.pc-avatar:hover .avatar { box-shadow: 0 0 0 2px var(--brass); }


.pc-head .pc-name a { display: inline-flex; align-items: center; gap: 7px; color: var(--text); text-decoration: none; }
.pc-head .pc-name a:hover b { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }
.pc-head > .pc-avatar { margin-bottom: 4px; }
.pc-head > .pc-avatar .avatar { box-shadow: 0 0 0 2px #d4ab5e55, 0 10px 24px -10px #000; }

.pc-head > a.pc-avatar { display: block; line-height: 0; border-radius: 50%; margin-bottom: 4px; }
.pc-elo { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 12px; border-radius: var(--r-pill); border: 1px solid #d4ab5e55; color: var(--ivory-2); font-size: var(--fs-sm); }
.pc-elo svg { width: 15px; height: 15px; color: var(--brass); }
.pc-elo b { color: var(--brass); font-size: var(--fs-base); font-variant-numeric: tabular-nums; }

/* ---------- Votes ---------- */
.vote-panel { border-color: #d4ab5e66; box-shadow: 0 0 0 1px #d4ab5e22 inset; }
.vote-panel h2 { display: inline-flex; align-items: center; gap: 8px; }
.vote-panel h2 svg { width: 18px; height: 18px; color: var(--brass); }
.vote-q { margin: 0 0 10px; }
.vote-bar { position: relative; display: flex; height: 10px; border-radius: var(--r-sm); background: #ffffff10; overflow: visible; }
.vote-bar i { display: block; height: 100%; transition: width .25s ease; }
.vote-bar i.y { background: var(--good, #5fb27c); border-radius: 6px 0 0 6px; }
.vote-bar i.n { background: var(--bad, #d0605a); margin-left: auto; border-radius: 0 6px 6px 0; }
.vote-bar .need { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; }
.vote-count { font-size: var(--fs-sm); margin: 8px 0 10px; }
.vote-btns .btn { flex: 1; justify-content: center; }
.vote-fields { margin-top: 12px; }

.seat-elo { display: inline-flex; align-items: center; gap: 3px; }
.seat-elo .rank-ic { filter: none; }

/* Rank member cards: metal sheen and the rank's shield */
.sc-preview.orn-rank::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 25%, #ffffff3d 46%, transparent 62%); }
.sc-preview .sc-shield { position: absolute; right: 7%; top: 50%; transform: translateY(-50%); width: 42%; opacity: .32; pointer-events: none; }
.sc-preview .sc-shield svg { width: 100%; height: auto; filter: none; }

/* Player pop-up: the friend icon beside the name */
.pc-friend { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--muted); background: transparent; }
.pc-friend svg { width: 16px; height: 16px; }
.pc-friend.on { color: var(--good); border-color: #7cc49555; }
.pc-friend.add { cursor: pointer; color: var(--brass); border-color: #d4ab5e66; }
.pc-friend.add:hover { background: #d4ab5e1a; }
.pc-street b small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); text-align: right; }

/* Side column: chat and hand history, minimized to the message box by default */
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-toggle { position: relative; flex: none; }
.side-toggle .count { position: absolute; top: -6px; right: -6px; margin: 0; }
.side-tabs.collapsed { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 8px; }
.side-tabs.collapsed .side-head { order: 2; }
.side-tabs.collapsed .tabs, .side-tabs.collapsed .gchat-list, .side-tabs.collapsed .gchat-quick, .side-tabs.collapsed [data-pane="history"] { display: none; }
.side-tabs.collapsed [data-pane="chat"] { order: 1; min-width: 0; }
.side-tabs.collapsed .gchat { gap: 0; }
/* The side column scrolls inside the window, so an open chat never runs into the odds */
@media (min-width: 1180px) { .side-col { max-height: calc(100vh - var(--top-h) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } }

/* Desktop: a running game fits the window. The table scales to the space left by the header and the
   controls; the side column scrolls inside itself. Phones and narrow windows keep the scrolling layout. */
@media (min-width: 1180px) and (min-height: 600px) {
  .game-page:has(.table-layout) { height: calc(100vh - var(--top-h)); padding-block: 14px 14px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; overflow: hidden; }
  .game-page > [data-body]:has(.table-layout) { min-height: 0; height: 100%; }
  .game-page .table-layout { height: 100%; min-height: 0; align-items: stretch; }
  .game-page .table-layout > [data-table] { display: flex; flex-direction: column; min-height: 0; }
  .game-page .table-wrap { flex: 1 1 auto; min-height: 0; container: fit / size; padding-block: 8px 4px; display: grid; place-items: center; }
  .game-page .table-wrap.with-busts { padding-top: clamp(40px, 6vh, 90px); }
  .game-page .stage { container: table / inline-size; width: min(100cqw, calc(100cqh * 16 / 9)); }
  .game-page .controls { flex: none; }
  .game-page .side-col { position: static; max-height: 100%; min-height: 0; overflow-y: auto; }
}
.best-hands .pc { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.best-hands li:has(.bh-who) { grid-template-columns: 36px minmax(0, 1fr) auto; }

/* Desktop: the side column fills the height; an open chat takes the space left and only its messages scroll */
@media (min-width: 1180px) and (min-height: 600px) {
  .game-page .side-col { display: flex; flex-direction: column; gap: 12px; height: 100%; max-height: none; overflow: hidden; }
  .game-page .side-col > * { flex: none; }
  .game-page .side-col > .odds-panel, .game-page .side-col > .standings, .game-page .side-col > .vote-panel { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
  .game-page .side-col > .standings { min-height: 90px; }
  .game-page .side-col > .side-tabs { margin-top: auto; }
  .game-page .side-col > .side-tabs:not(.collapsed) { flex: 1 1 0; min-height: 230px; display: flex; flex-direction: column; }
  .game-page .side-tabs:not(.collapsed) > .pane:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .game-page .side-tabs:not(.collapsed) .gchat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .game-page .side-tabs:not(.collapsed) .gchat-list, .game-page .side-tabs:not(.collapsed) .history-pane ol { flex: 1; min-height: 0; max-height: none; }
}
/* Sheets and their buttons exist for phones only */
.m-only, .sheet-head, .odds-empty { display: none; }

/* Phones and small tablets: during a game there's no header or bottom menu; the game fits the screen, and
   Chat, Hand history and Odds open as sheets */
@media (max-width: 959px) {
  .m-only { display: inline-flex; }
  .m-only .count { position: absolute; top: -6px; right: -6px; }
  .tool-btn.m-only { position: relative; }
  body.in-game .top, body.in-game .tabbar { display: none; }
  body.in-game #view { min-height: 0; }
  .game-page:has(.table-layout) { height: var(--game-h, 100dvh); padding: calc(10px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px));
    display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; overflow: hidden; }
  .game-page > [data-body]:has(.table-layout) { min-height: 0; height: 100%; }
  .game-page:has(.table-layout) .table-head { flex-wrap: nowrap; gap: 8px; }
  .game-page:has(.table-layout) .table-head > .row { min-width: 0; gap: 8px !important; }
  .game-page:has(.table-layout) .table-head h1 { font-size: var(--fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .game-page:has(.table-layout) .table-head .sub { display: none; }
  .game-page:has(.table-layout) .table-head [data-back] span, .game-page:has(.table-layout) .table-head a.btn span { display: none; }
  /* The toolbar keeps to one row whatever appears in it (Rebuy, Join…): it scrolls sideways instead of wrapping, so
     the head's height, and with it the table's size, never changes mid-game. */
  .game-page:has(.table-layout) .table-head { height: 40px; min-height: 40px; overflow: hidden; }
  .game-page:has(.table-layout) .table-tools { flex-wrap: nowrap; gap: 5px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .game-page:has(.table-layout) .table-tools::-webkit-scrollbar { display: none; }
  .game-page:has(.table-layout) .table-tools .tool-btn { flex: none; }
  .game-page:has(.table-layout) .status { flex-wrap: nowrap; height: 1.5em; overflow: hidden; }
  .game-page:has(.table-layout) .status > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .game-page:has(.table-layout) .status-side { flex: none; white-space: nowrap; }
  /* (the time bank shows as its icon and a count, so the line never grows) */
  .game-page:has(.table-layout) .status-side .bank span { display: none; }
  .game-page:has(.table-layout) .status-side .bank::after { content: attr(data-n); font-size: var(--fs-xs); font-weight: 700; }
  .game-page:has(.table-layout) .table-tools .tool-btn span:not(.count) { display: none; }
  .game-page:has(.table-layout) .table-tools .tool-btn { padding-inline: 9px; }
  .game-page .table-layout { height: 100%; min-height: 0; display: flex; flex-direction: column; }
  .game-page .table-layout > [data-table] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .game-page .table-wrap { flex: 1 1 auto; min-height: 0; container: fit / size; padding-block: 6px 2px; display: grid; place-items: center; }
  .game-page .table-wrap.with-busts { padding-top: clamp(30px, calc(var(--gvh) * 5), 60px); }
  .game-page .stage { container: table / inline-size; width: min(100cqw, calc(100cqh * 16 / 9)); }
  .game-page .stage.portrait { width: min(100cqw, calc(100cqh * 3 / 4.4)); }
  .game-page .controls { flex: none; padding: 10px 12px; gap: 8px; }
  .game-page .side-col { display: none; }
  /* The sheet: the side column, full screen, showing one thing */
  .game-page[data-sheet] .side-col { display: flex; flex-direction: column; gap: 12px; position: fixed; inset: 0; z-index: 70; padding: calc(12px + env(safe-area-inset-top, 0px)) 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--room, #170f0c); overflow: hidden; }
  .game-page[data-sheet] .side-col > * { display: none; }
  .game-page[data-sheet] .side-col > .sheet-head { display: flex; align-items: center; justify-content: space-between; flex: none; }
  .sheet-head b { font-size: var(--fs-lg); }
  .game-page[data-sheet="odds"] .side-col, .game-page[data-sheet="standings"] .side-col { overflow-y: auto; }
  .game-page[data-sheet="odds"] .side-col > .odds-panel:not([hidden]) { display: grid; flex: none; }
  .game-page[data-sheet="standings"] .side-col > .standings, .game-page[data-sheet="standings"] .side-col > .vote-panel:not([hidden]) { display: grid; flex: none; }
  /* The odds sheet has its own button, so it shows a title instead of the chat tabs. */
  .sheet-head .sheet-title { display: none; }
  .game-page[data-sheet="odds"] .sheet-head .sheet-tabs { display: none; }
  .game-page[data-sheet="odds"] .sheet-head .sheet-title { display: block; }
  /* In person the odds have their own button on the table. */
  .live-mode .odds-sheet-btn { display: none; }
  .game-page[data-sheet="odds"] .side-col > .odds-panel[hidden] + .odds-empty { display: block; }
  .game-page[data-sheet="chat"] .side-col > .side-tabs, .game-page[data-sheet="history"] .side-col > .side-tabs { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0; border: 0; background: none; }
  .game-page[data-sheet] .side-tabs .side-head { display: none; }
  .game-page[data-sheet] .side-tabs > .pane:not([hidden]) { display: flex !important; flex-direction: column; flex: 1; min-height: 0; order: 0; }
  .game-page[data-sheet] .side-tabs .gchat { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 8px; }
  .game-page[data-sheet] .side-tabs .gchat-list { display: grid; flex: 1; min-height: 0; max-height: none; }
  .game-page[data-sheet] .side-tabs .gchat-quick { display: flex; }
  .game-page[data-sheet="history"] .side-tabs [data-pane="history"]:not([hidden]) { display: flex !important; }
  .game-page[data-sheet] .side-tabs .history-pane ol { flex: 1; min-height: 0; max-height: none; }
}

@media (max-width: 959px) {
  /* The table column keeps the full width (it used to shrink to its content once a game ended). */
  .game-page .table-layout { align-items: stretch; }
  .game-page .table-layout > [data-table] { width: 100%; }
  /* Two lines: back and title, then the toolbar. */
  .game-page:has(.table-layout) .table-head { flex-wrap: wrap; row-gap: 6px; }
  .game-page:has(.table-layout) .table-head > .row { flex: 1 1 100%; flex-wrap: nowrap; }
  .game-page:has(.table-layout) .table-head > .row > div { min-width: 0; }
  .game-page:has(.table-layout) .table-tools { width: 100%; justify-content: flex-end; }
}

/* Desktop: an open chat gets at least about half the side column; the odds and standings scroll in the rest */
@media (min-width: 1180px) and (min-height: 600px) {
  .game-page .side-col > .side-tabs:not(.collapsed) { min-height: max(230px, 48%); }
  .game-page .side-col:has(> .side-tabs:not(.collapsed)) > .standings { max-height: 22%; }
}

/* Phones: no keyboard hints on the action buttons */
@media (max-width: 959px) { .controls kbd, .actions kbd, .sizes kbd, [data-p] kbd { display: none; } }
[data-p] kbd { font-size: 10px; opacity: .55; margin-left: 2px; }

/* Quick match: how long the search has been running */
.search-time { display: inline-flex; align-items: center; gap: 7px; margin: -2px 0 0; padding: 4px 12px; border-radius: var(--r-pill); background: #ffffff0a; border: 1px solid var(--line);
  font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.search-time svg { width: 16px; height: 16px; color: var(--brass); }

/* Practice, between hands: "Deal next hand" over the (invisible) betting buttons, same height as during a hand */
.controls { grid-template-columns: minmax(0, 1fr); }
.controls.show-next .actions, .controls.show-next .sizing { visibility: hidden; }
.controls.show-next [data-next-row] { grid-row: 2 / span 2; grid-column: 1; align-self: center; z-index: 1; }
.controls > .status { grid-row: 1; grid-column: 1; }
.controls > .actions { grid-row: 2; grid-column: 1; }
.controls > .sizing { grid-row: 3; grid-column: 1; }

/* Mini window for a lobby or a competitive search */
.mg-faces { display: flex; flex-wrap: wrap; gap: 4px; }
.mg-faces > i { width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed #d4ab5e66; }
.mini-game.lobby [data-mg-search] { font-variant-numeric: tabular-nums; }
.mg-title small [data-mg-search] { display: inline; }

/* Phones in a game: the table area fills the space between the header and the controls; the felt is smaller
   and the seats sit out toward the edges, using the room around the table. */
@media (max-width: 959px) {
  .game-page .stage.portrait.roomy { width: 100cqw; height: 100cqh; aspect-ratio: auto; }
  .stage.roomy .rail { inset: 12% 13%; }
  .stage.roomy .board { --cw: clamp(24px, 9.6cqw, 52px); }
  .stage.roomy .pot { top: 37%; }
  .stage.roomy .result { top: 64%; max-width: 70%; }
  .stage.roomy .felt-mark { top: 64%; }
  .stage.roomy .seat:not(.me) .plate { min-width: clamp(66px, 21cqw, 108px); }
}
/* Phones in a game: seats are sized by the table area's width or height, whichever is tighter, so short
   screens don't overcrowd. */
@media (max-width: 959px) {
  .game-page .stage.portrait.roomy { container: table / size; }
  .stage.roomy .seat { --cw: clamp(20px, min(9cqw, 7.2cqh), 42px); }
  .stage.roomy .seat.me { --cw: clamp(32px, min(14cqw, 10.5cqh), 70px); }
  .stage.roomy .seat:not(.me) .plate { min-width: clamp(60px, min(21cqw, 17cqh), 108px); }
}

/* Phones: Fold, Call and Raise in one row (shorter), leaving more room for the table */
@media (max-width: 959px) {
  .game-page .actions { grid-template-columns: 1fr 1fr 1.25fr; gap: 8px; }
  .game-page .actions .raise { grid-column: auto; order: 0; }
  .game-page .actions .btn { min-height: 44px; font-size: var(--fs-base); padding-inline: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .game-page .controls { gap: 8px; padding: 8px 10px; }
  .game-page .sizing { gap: 6px 10px; }
  .game-page .presets button { padding: 5px 9px; }
  .game-page .slider-row input[type="number"] { width: 90px; padding: 6px 8px; }
}
/* Phones in a game: smaller avatars, to leave more room for the table */
@media (max-width: 959px) {
  .stage.roomy .seat .bust { width: calc(var(--cw) * 1.4); }
  .stage.roomy .seat.me .bust { width: calc(var(--cw) * .82); }
  .game-page .table-wrap.with-busts { padding-top: clamp(20px, calc(var(--gvh) * 3.5), 40px); }
}
/* Speech bubbles sit above the player's avatar (the avatar's width, kept in --bw, is also its height) */
.seat { --bw: calc(var(--cw) * 2); }
@media (max-width: 959px) { .stage.roomy .seat { --bw: calc(var(--cw) * 1.4); } }
.seat:not(.me) .bust { width: var(--bw); }
.seat:not(.me):has(> .bust:not([hidden])) .say { bottom: calc(100% - var(--cw) * .12 + var(--bw) + 2px); }
.seat:not(.me):has(> .hole:empty):has(> .bust:not([hidden])) .say { bottom: calc(100% - var(--cw) * .8 + var(--bw) + 2px); }
/* Smaller avatars on wider screens too (phones have their own size above) */
@media (min-width: 960px) {
  .seat { --bw: calc(var(--cw) * 1.5); }
  .seat.me .bust { width: calc(var(--cw) * 1.15); }
  .table-wrap.with-busts { padding-top: clamp(40px, 6.5cqw, 80px); }
  .game-page .table-wrap.with-busts { padding-top: clamp(30px, 4.5vh, 64px); }
}
/* A seat with a speech bubble showing comes to the front, so the bubble is never hidden behind a neighbour's plate */
.seat:has(> .say:not([hidden])) { z-index: 6; }

/* ---------- Live odds carousel and the GTO guide (Poncler Pro) ---------- */
.os-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: var(--r-md); background: #00000040; }
.os-tabs button { padding: 5px 4px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font: 600 12px/1.2 var(--sans); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-tabs button:hover { color: var(--text); }
.os-tabs button[aria-selected="true"] { background: #7cc49526; color: var(--text); }
.os-tabs button:last-child[aria-selected="true"] { background: #d4ab5e2e; }
.os-slide { display: grid; gap: 10px; min-height: 120px; touch-action: pan-y; }
.os-slide:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }
.os-foot, .gto-foot { font-size: var(--fs-xs); margin: 0; }
.bh-start { margin: 0; font-size: var(--fs-md); }
.gto-mix { display: flex; height: 12px; border-radius: var(--r-pill); overflow: hidden; background: #ffffff14; gap: 2px; }
.gto-mix i { min-width: 3px; }
.a-raise { background: var(--gto-raise); } .a-allin { background: var(--gto-allin); } .a-call { background: var(--gto-call); }
.a-check { background: var(--gto-check); } .a-fold { background: var(--gto-fold); }
.gto-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.gto-acts li { display: grid; grid-template-columns: 10px minmax(0, 1fr) 42px 64px auto; align-items: center; gap: 8px; padding: 3px 6px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.gto-acts li.best { background: #ffffff0d; }
.gto-acts li.best .nm { font-weight: 700; }
.gto-acts li.mine { box-shadow: inset 0 0 0 1px #d4ab5e88; }
.gto-acts .dot, .gto-legend .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.gto-acts .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gto-acts .nm .pill { padding: 0 6px; margin-left: 4px; }
.gto-acts b { text-align: right; }
.gto-acts .ev { text-align: right; color: var(--muted); font-size: var(--fs-xs); }
.gto-acts .ev.pos { color: var(--good); } .gto-acts .ev.neg { color: var(--bad); }
.gto-spot { font-weight: 700; font-size: var(--fs-md); }
.gto-line { margin: 0; font-size: var(--fs-sm); color: var(--ivory-2); }
.gto-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gto-tags .tier-5, .gto-tags .tier-4 { color: var(--good); border-color: #7cc49566; }
.gto-tags .tier-3 { color: var(--brass); border-color: #d4ab5e66; }
.gto-tags .tier-1 { color: #9fd4ff; border-color: #9fd4ff55; }
.gto-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gto-facts span { display: grid; gap: 1px; padding: 6px 8px; border-radius: var(--r-sm); background: #00000030; }
.gto-facts small { color: var(--muted); font-size: var(--fs-2xs); }
.gto-facts b { font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.gto-vs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; font-size: var(--fs-xs); }
.gto-vs > span:first-child { color: var(--muted); }
.gto-vs .bar { display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden; gap: 2px; }
.gto-vs .bar i { background: var(--good); } .gto-vs .bar i.them { background: var(--gto-fold); }
.gto-vs .nums { grid-column: 2; color: var(--muted); font-variant-numeric: tabular-nums; }
.gto-vs .nums b { color: var(--text); }
.gto-notes { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: var(--fs-xs); color: var(--ivory-2); }
.gto-chart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.gto-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--ivory-2); font-variant-numeric: tabular-nums; }
.gto-legend span { display: inline-flex; align-items: center; gap: 5px; }
/* The 13×13 range grid */
.gto-grid { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 1px; background: #00000066; border-radius: var(--r-sm); overflow: hidden; }
.gto-grid .gc { display: grid; place-items: center; aspect-ratio: 1; background: var(--gto-fold); color: #fff; font: 600 clamp(7px, 1.05vw, 12px)/1 var(--sans); text-shadow: 0 1px 1px #0009; border: 0; padding: 0; overflow: hidden; }
.gto-grid.xs { max-width: 260px; justify-self: center; width: 100%; }
.gto-grid.xs .gc { font-size: 0; }
.gto-grid .gc.hl { outline: 2px solid var(--win); outline-offset: -2px; position: relative; z-index: 1; }
.gto-grid button.gc { cursor: pointer; }
.gto-grid button.gc:hover { filter: brightness(1.15); }
/* Review */
.gto-review { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid #ffffff14; }
.gto-judge { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.gto-judge p { margin: 0; font-size: var(--fs-sm); color: var(--ivory-2); }
.gto-score { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; border: 2px solid var(--line-2); }
.gto-judge.good .gto-score { border-color: var(--good); color: var(--good); }
.gto-judge.warn .gto-score { border-color: var(--warn); color: var(--warn); }
.gto-judge.bad .gto-score { border-color: var(--bad); color: var(--bad); }
.gto-pill { color: var(--brass); }

/* A slim HUD bar, the same on phones and computers, so name plates stay compact. */
.plate .hud { height: 12px; margin-top: 3px; gap: 1px; }
.plate .hud-seg { font-size: 9px; gap: 2px; }
.plate .hud-seg:first-child { border-radius: 4px 0 0 4px; }
.plate .hud-seg:last-child { border-radius: 0 4px 4px 0; }
.plate .hud.has-run .hud-seg:first-child { padding: 0 10px 0 4px; }
.plate .hud.has-run .hud-seg:last-child { padding: 0 4px 0 10px; }
.plate .hud-run { width: 16px; height: 16px; box-shadow: 0 0 0 1.5px #2d1e19, 0 1px 3px #000a; }
.plate .hud-run svg { width: 10px; height: 10px; }

/* ---------- In person (each phone holds its owner's hand) and the middle screen ---------- */
.live-view { display: grid; gap: 12px; align-content: start; width: 100%; max-width: 560px; margin: 0 auto; padding-bottom: 8px; }
.live-view .card { animation: none; }
.live-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--fs-sm); color: var(--ivory-2); }
.live-top .lt-pot { margin-left: auto; font-size: var(--fs-base); }
.live-top .lt-pot b { color: var(--brass); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.live-board { display: flex; justify-content: center; gap: 6px; border-radius: var(--r-xl); background: radial-gradient(ellipse 80% 90% at 50% 35%, var(--felt-hi), var(--felt) 58%, var(--felt-deep)); box-shadow: inset 0 0 0 2px #d4ab5e33, 0 10px 24px -14px #000; }
.card-slot { flex: none; width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: calc(var(--cw) * .09); border: 1px dashed #ffffff30; }
.live-result { display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--r-lg); background: #ecc87414; border: 1px solid #ecc87455; text-align: center; font-size: var(--fs-sm); }
.live-result b { color: var(--win); font-size: var(--fs-base); }
.live-result span { color: var(--ivory-2); }
/* The other players, as a strip of tiles (phones) */
.live-players { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.live-players::-webkit-scrollbar { display: none; }
.lp { position: relative; flex: none; min-width: 96px; display: grid; gap: 2px; padding: 8px 10px 9px; border-radius: var(--r-md); background: linear-gradient(#2d1e19, #1b110e); border: 1px solid #ffffff17; transition: border-color .2s ease, opacity .2s ease; }
.lp.acting { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass), 0 0 18px #d4ab5e44; }
.lp.folded, .lp.out { opacity: .45; }
.lp.won { border-color: var(--win); box-shadow: 0 0 0 1px var(--win), 0 0 18px #ecc87455; }
.lp-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.lp-pos { flex: none; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-sm); font-size: 10px; font-weight: 800; background: #ffffff1f; color: var(--ivory-2); }
.lp-pos.dealer { background: var(--ivory); color: var(--ink); }
.lp-stack { font-variant-numeric: tabular-nums; color: var(--brass); font-weight: 700; font-size: var(--fs-md); }
.lp-foot { display: flex; flex-wrap: wrap; min-height: 18px; }
.lp-foot > span { padding: 0 6px; border-radius: var(--r-sm); font-size: var(--fs-2xs); line-height: 18px; background: #00000040; color: var(--ivory-2); }
.lp-foot .lp-bet { color: var(--text); background: #d4ab5e2e; font-variant-numeric: tabular-nums; }
.lp-foot .lp-won { color: var(--win); }
.lp-clock { position: absolute; left: 8px; right: 8px; bottom: 3px; height: 3px; border-radius: 2px; background: #ffffff14; overflow: hidden; }
.lp-clock i { display: block; height: 100%; background: var(--brass); transform-origin: left; }
.lp-clock.low i { background: var(--bad); }
.lp-say { position: absolute; left: 6px; right: 6px; bottom: calc(100% + 4px); padding: 5px 8px; border-radius: var(--r-md); background: var(--ivory); color: var(--ink); font-size: var(--fs-xs); z-index: 2; box-shadow: 0 6px 14px -6px #000c; }
.lp-cards { display: flex; gap: 3px; --cw: 30px; min-height: 42px; }
/* Your hand in the middle: face down, held to look */
.live-mine { display: grid; justify-items: center; gap: 8px; padding: 16px 10px 12px; border-radius: var(--r-xl); border: 1px solid #ffffff12; background: #00000026; }
.live-mine.turn { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass), 0 0 34px #d4ab5e40; }
.live-cards { display: flex; justify-content: center; }
.live-cards:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: var(--r-md); }
.live-cards .lh-card { margin: 0 calc(var(--cw) * -.16); transform: rotate(var(--rot)) translateY(var(--dy)); transition: transform .2s ease; }
.live-mine.peeking .lh-card { transform: rotate(calc(var(--rot) / 2)); }
.live-cards .card { box-shadow: 0 10px 24px -8px #000d, inset 0 0 0 1px var(--edge-line, var(--face-edge)); pointer-events: none; }
.live-mine.folded .live-cards { filter: grayscale(.7) brightness(.6); }
.live-hint { margin: 0; display: flex; align-items: center; gap: 6px; min-height: 22px; font-size: var(--fs-md); color: var(--muted); }
.live-hint svg { width: 16px; height: 16px; }
.live-hint b { color: var(--text); font-size: var(--fs-lg); }
.live-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font-size: var(--fs-md); }
.live-status .ls-stack { color: var(--muted); font-variant-numeric: tabular-nums; }
.live-status .ls-stack b { color: var(--text); }
.live-clock { padding: 2px 8px; border-radius: var(--r-sm); background: #00000040; font-weight: 800; font-variant-numeric: tabular-nums; }
.live-clock.low { color: var(--bad); }
.live-actions { display: grid; grid-template-columns: 1fr 1.25fr 1.25fr; gap: 8px; }
.live-actions:empty { display: none; }
.live-actions .btn { min-height: 56px; font-size: var(--fs-lg); }
.live-actions .btn.block { grid-column: 1 / -1; }
.live-raise { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-lg); background: #00000030; border: 1px solid #d4ab5e44; }
.live-raise[hidden] { display: none; }
.lr-amount { display: flex; align-items: center; gap: 10px; }
.lr-amount b { flex: 1; text-align: center; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.lr-amount .icon-btn { font-size: var(--fs-2xl); }
.live-raise input[type=range] { width: 100%; accent-color: var(--brass); }
.lr-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lr-presets .btn { padding-inline: 4px; }
/* The game page around it: on a phone the hand view is the whole screen; the odds panel isn't used here. */
.live-mode .odds-panel, .live-mode .odds-empty { display: none !important; }
.view-seg { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.view-seg label { text-align: left; padding: 10px 12px; }
@media (max-width: 959px) {
  /* Never shrink below the content (rows would slide over each other); the area scrolls instead. */
  .live-mode .live-view { min-height: 100%; flex: none; }
}
/* While choosing an amount, the cards make room for the raise panel. */
.live-hand:has(.live-raise:not([hidden])) .live-mine:not(.edge) .live-cards { --cw: clamp(64px, 22vw, 104px); }
/* The middle screen: large board and pot, everyone around it */
.live-screen { max-width: 1200px; gap: 18px; }
.live-screen .live-top { font-size: var(--fs-base); }
.live-screen .live-top .lt-pot b { font-size: clamp(22px, 3vw, 34px); }
.live-screen .live-board { --cw: clamp(56px, 9vw, 120px); padding: clamp(16px, 3vw, 34px); gap: clamp(6px, 1vw, 14px); }
.live-screen .live-result { font-size: var(--fs-base); }
.live-screen .live-result b { font-size: var(--fs-lg); }
.live-screen .live-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); overflow: visible; }
.live-screen .lp { min-width: 0; padding: 12px 14px 14px; }
.live-screen .lp-name { font-size: var(--fs-base); }
.live-screen .lp-stack { font-size: var(--fs-lg); }
.live-screen .lp-cards { --cw: clamp(30px, 3vw, 44px); }
.live-screen-mode .table-layout { grid-template-columns: minmax(0, 1fr); }
.live-screen-mode .side-col { display: none; }
/* Rows keep their height when the raise panel opens; the view scrolls instead of squeezing the player strip. */
.live-view > * { min-height: fit-content; }
@media (max-width: 959px) { .live-mode .table-layout > [data-table] { overflow-y: auto; overscroll-behavior: contain; } }

/* In person: cards sized by the screen's width and height and by how many there are, so nothing spills off the
   bottom of short phones or the side with four Omaha cards; and the live odds panel, held to read. */
.live-board { --cw: clamp(32px, min(15vw, 7.5dvh), 70px); padding: min(14px, 1.6dvh) 10px; }
.live-cards { position: relative; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; outline: none; --cw: clamp(64px, min(34vw, 19dvh, calc(86vw / (var(--n, 2) * .7 + .3))), 150px); min-height: calc(var(--cw) * 1.4 + 12px); padding-bottom: 8px; }
.live-mine { transition: box-shadow .25s ease, border-color .25s ease; padding-block: min(16px, 2dvh) min(12px, 1.5dvh); }
.live-top .lt-odds { margin-left: 4px; }
.live-top .lt-odds svg { width: 15px; height: 15px; }
.live-top .lt-odds[aria-pressed="true"] { border-color: #7cc49577; color: var(--good); }
.live-odds { gap: 8px; }
.lo-hold { min-height: 64px; display: grid; align-items: center; border-radius: var(--r-md); padding: 8px 10px; background: #00000030; cursor: pointer; outline: none;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.lo-hold:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lo-hold.peeking { background: #00000045; }
.lo-hold .os-slide { min-height: 0; pointer-events: none; }
.lo-title { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-md); }
.lo-title span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.lo-title svg { width: 16px; height: 16px; }
/* Player tiles open the profile pop-up; the HUD sits in them like on the name plates. */
.lp[data-player] { cursor: pointer; }
.lp[data-player]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lp .lp-hud { position: relative; display: flex; align-items: stretch; gap: 1px; height: 13px; margin: 2px 0 1px; }
.lp .lp-hud .hud-seg { font-size: 9px; }
.lp .lp-hud .hud-run { width: 16px; height: 16px; }
.lp .lp-hud .hud-run svg { width: 10px; height: 10px; }
.live-screen .lp .lp-hud { height: 18px; }
.live-screen .lp .lp-hud .hud-seg { font-size: var(--fs-2xs); }
/* Short phones: tighter spacing so the whole view fits without scrolling. */
@media (max-height: 720px) and (max-width: 959px) {
  .live-view { gap: 8px; }
  .live-hand .live-board { --cw: clamp(30px, min(13vw, 6.5dvh), 60px); padding: 8px; border-radius: var(--r-lg); }
  .live-hand .lp { padding: 6px 8px 7px; min-width: 88px; }
  .live-hand .live-actions .btn { min-height: 48px; }
  .live-hand .live-cards { --cw: clamp(60px, min(32vw, 17dvh, calc(86vw / (var(--n, 2) * .7 + .3))), 140px); }
  .live-odds { padding: 8px; gap: 6px; }
  .lo-hold { min-height: 48px; }
}
/* Narrow phones: the blinds are in the game's header already, so the top bar keeps to one row with the Odds button. */
@media (max-width: 420px) {
  .live-hand .live-top .lt-blinds { display: none; }
  .live-hand .live-top { flex-wrap: nowrap; gap: 8px; }
  .live-hand .live-top .lt-hand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .live-hand .live-top .lt-pot { white-space: nowrap; }
}
/* Compact player tiles on phones: the stack and the bet share a row. */
@media (max-width: 959px) {
  .live-hand .lp { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
  .live-hand .lp-head, .live-hand .lp .lp-hud { grid-column: 1 / -1; }
  .live-hand .lp-foot { min-height: 0; align-self: center; }
}
@media (max-height: 860px) and (max-width: 959px) {
  .live-hand .live-mine { gap: 4px; padding-block: 8px 6px; }
  .live-hand .live-cards { padding-bottom: 4px; min-height: calc(var(--cw) * 1.4 + 6px); }
  .live-hand .live-odds { padding: 6px 8px; gap: 6px; }
  .live-hand .lo-hold { min-height: 40px; padding: 6px 10px; }
  .live-hand .os-tabs button { padding: 4px; }
}

/* In person: nothing may widen the page (the player strip scrolls inside itself, long result lines wrap). */
.live-view { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.live-view > * { min-width: 0; }
.live-result, .live-status { overflow-wrap: anywhere; }
/* Shown cards on a tile: tiny ones instead of the hand's name. */
.lp-cards.tiny { --cw: 20px; min-height: 0; gap: 2px; }
.lp-cards.tiny .card { box-shadow: 0 1px 3px #0008, inset 0 0 0 1px var(--edge-line, var(--face-edge)); }
/* The HUD on the in-person tiles: a short pill with the two numbers. */
.lp-hudpill { display: inline-flex; justify-self: start; gap: 1px; border-radius: var(--r-pill); overflow: hidden; height: 16px; font: 800 10px/16px var(--sans); font-variant-numeric: tabular-nums; }
.lp-hudpill .hud-seg { display: block; min-width: 22px; padding: 0 5px; text-align: center; font-style: normal; border-radius: 0; }
.lp-hudpill.few .hud-seg { opacity: .7; }
/* Live odds as a pop-up over the in-person view. */
.live-odds { position: fixed; inset: 0; display: grid; padding: 16px; background: none; border: 0; border-radius: 0; }
.live-odds[hidden] { display: none; }
.lo-backdrop { position: absolute; inset: 0; background: #0d0807c4; backdrop-filter: blur(3px); }
.lo-sheet { position: relative; display: grid; gap: 10px; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 14px; border-radius: var(--r-lg);
  border: 1px solid #7cc49555; background: linear-gradient(#162019f7, #111612f7); box-shadow: 0 24px 60px -18px #000; }
.lo-sheet .lo-hold { min-height: 140px; align-items: start; }
.lo-sheet .lo-title { min-height: 120px; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.lo-note { margin: 0; font-size: var(--fs-xs); }
/* The pop-up doesn't push the cards around any more. */
.live-odds { place-items: center; z-index: 200; }
.lp-hudpill .lp-run { display: grid; place-items: center; width: 18px; background: #0d0807; font-style: normal; }
.lp-hudpill .lp-run svg { width: 11px; height: 11px; }

/* In person, phones: the tile reads top to bottom: name, HUD pill, chips, bet or last action, shown cards. */
@media (max-width: 959px) {
  .live-hand .lp { grid-template-columns: minmax(0, 1fr); }
  .live-hand .lp-head, .live-hand .lp .lp-hud, .live-hand .lp-hudpill { grid-column: auto; }
}
/* Folded players who show their cards: the cards are bright, the tile stays dimmed. */
.lp.folded:has(.lp-cards.tiny) { opacity: .8; }
/* The odds pop-up: tabs tall enough to tap; while you hold the box they step aside for the content. */
.lo-sheet .os-tabs button { min-height: 40px; font-size: var(--fs-sm); }
.lo-sheet:has(.lo-hold.peeking) .os-tabs { display: none; }
/* Phones: extra toolbar buttons (Rebuy, I'm back) wrap onto a second row instead of widening the page. */
@media (max-width: 959px) {
  .game-page:has(.table-layout) .table-tools { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; min-width: 0; max-width: 100%; }
  .game-page .table-head { min-width: 0; max-width: 100%; }
  .game-page .table-head > .row { min-width: 0; }
}

/* Phones, while you play a game: other games' mini windows sit at the top, under the game's toolbar, and grow
   downwards, so they never cover this game's Fold, Call and Raise buttons at the bottom. */
@media (max-width: 959px) {
  body.in-game .mini-games { top: calc(env(safe-area-inset-top, 0px) + 104px); bottom: auto; align-content: start; max-height: calc(100dvh - 300px); overflow-y: auto; }
}
/* The Poncler tree in the middle of the search radar. */
.search-radar .search-logo { position: relative; z-index: 1; width: auto; height: 46px; filter: drop-shadow(0 2px 6px #0009); }

/* Replays: the odds at each step stand out. Next to the table on wide screens (and stay in view while you
   scroll), right under the replay controls on narrow ones. */
.rp-stage { display: contents; }
.replay-view > .rp-controls { order: 2; }
.replay-view .rp-stage > [data-rp-table] { order: 1; }
.replay-view .rp-odds { order: 3; }
.replay-view > .rp-bottom { order: 4; }
.replay-view > .rp-head, .replay-view > .rp-idle { order: 0; }
.rp-odds { border-color: #d4ab5e66; box-shadow: 0 0 0 1px #d4ab5e33, 0 16px 34px -18px #000; }
.rp-odds .hand-now { font-size: var(--fs-xl); }
.rp-odds .odds-figs b { font-size: var(--fs-2xl); }
.replay-view.idle .rp-odds { display: none; }
/* Side by side only with room for both: otherwise the table would turn tall and narrow. */
@media (min-width: 1680px) {
  .rp-stage { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; order: 1; }
  .rp-stage .rp-odds { position: sticky; top: calc(var(--top-h) + 16px); max-height: calc(100vh - var(--top-h) - 32px); overflow-y: auto; }
  .rp-bottom { grid-template-columns: minmax(0, 1fr); }
}
/* Below that, the odds run full width under the controls, with the win chance and the hand side by side. */
@media (min-width: 760px) and (max-width: 1679px) {
  .replay-view .rp-odds { padding: 16px 20px; }
}
.replay-list > .rp-odds { margin: -4px -4px 14px; }

/* In person (phones): the felt in your table design, the board on the left, the hand, pot and Odds on the right. */
.live-hand .live-board { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px;
  background: var(--tpattern, none), radial-gradient(ellipse 85% 100% at 35% 40%, var(--tfelt-hi), var(--tfelt) 58%, var(--tfelt-deep));
  border: 5px solid var(--trail-lo); box-shadow: inset 0 0 0 1px var(--tline), inset 0 6px 18px #0007, 0 0 0 1px var(--trail-hi), 0 10px 24px -14px #000; border-radius: var(--r-xl); }
.live-hand .lb-cards { display: flex; gap: 4px; --cw: clamp(28px, min(10.5vw, 5.8dvh), 52px); min-width: 0; }
/* (cards already down stay still; a card turning over animates exactly as on the online table) */
.live-hand .lb-cards .card:not(.turned):not(.river-drama) { animation: none; }
.live-hand .lb-info { display: grid; justify-items: end; gap: 3px; text-align: right; flex: none; }
.lb-hand { font-size: var(--fs-2xs); color: #ffffffb3; white-space: nowrap; }
.lb-pot { display: flex; align-items: baseline; gap: 5px; }
.lb-pot small { font-size: var(--fs-xs); color: #ffffffb3; }
.lb-pot b { font-size: var(--fs-xl); color: var(--brass); font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #0008; }
.lb-info .lt-odds { padding: 4px 10px; min-height: 30px; background: #00000040; }
.lb-info .lt-odds svg { width: 14px; height: 14px; }
@media (max-height: 720px) and (max-width: 959px) {
  .live-hand .live-board { padding: 7px 10px; }
  .live-hand .lb-cards { --cw: clamp(26px, min(9.5vw, 5.4dvh), 46px); }
}
/* In person on phones: no game name in the header; the back button and the tools share one row
   ("Sit out" is in Settings). */
@media (max-width: 959px) {
  .live-mode:not(.live-screen-mode) .table-head { flex-wrap: nowrap; gap: 6px; }
  .live-mode:not(.live-screen-mode) .table-head [data-name], .live-mode:not(.live-screen-mode) .table-head [data-sub] { display: none; }
  .live-mode:not(.live-screen-mode) .table-head > .row { flex: none; gap: 0; }
  .live-mode:not(.live-screen-mode) .table-head .table-tools { flex: 1; width: auto; justify-content: flex-end; flex-wrap: wrap; }
  .live-mode:not(.live-screen-mode) .table-head [data-sit-out] { display: none; }
}

/* In person (phones): Fold and Check/Call on the left, your cards on the right; Raise below.
   While you hold your cards they show large in a pop-up. */
.live-hand .live-mine { grid-template-columns: minmax(104px, .85fr) minmax(0, 1.15fr); align-items: center; justify-items: stretch; column-gap: 10px; padding-inline: 10px; }
.live-hand .live-mine.no-side { grid-template-columns: minmax(0, 1fr); }
.live-hand .live-mine.no-side .lm-side { display: none; }
.lm-side { display: grid; gap: 8px; }
.lm-side .btn { min-height: 58px; font-size: var(--fs-lg); padding-inline: 8px; }
.lm-side .btn:disabled { opacity: .35; }
.lm-hand { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.live-hand .live-mine .live-cards { --cw: clamp(54px, min(23vw, 17dvh, calc(50vw / (var(--n, 2) * .7 + .3))), 128px); }
.live-hand .live-mine.no-side .live-cards { --cw: clamp(64px, min(34vw, 19dvh, calc(86vw / (var(--n, 2) * .7 + .3))), 150px); }
.live-hand .live-actions { grid-template-columns: minmax(0, 1fr); }
.lh-pop { position: fixed; inset: 0; z-index: 210; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 20px;
  background: #0d0807e0; backdrop-filter: blur(4px); pointer-events: none; animation: lh-pop-in .12s ease-out both; }
.lh-pop[hidden] { display: none; }
.lp-pop-cards { display: flex; gap: 10px; --cw: min(40vw, 30dvh, calc(88vw / (var(--n, 2) * 1.08)), 220px); }
.lp-pop-cards .card { animation: none; box-shadow: 0 18px 40px -10px #000, inset 0 0 0 1px var(--edge-line, var(--face-edge)); }
.lp-pop-name { font-size: var(--fs-xl); color: var(--text); text-align: center; }
@keyframes lh-pop-in { from { opacity: 0; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { .lh-pop { animation: none; } }
/* In person (phones): no box around your cards and the Fold / Call buttons, just the cards and the buttons. */
.live-hand .live-mine, .live-hand .live-mine.turn { border: 0; background: none; box-shadow: none; padding-inline: 0; }
/* In person: Fold / Check sit at the bottom of the card row, right above Raise; folding only dims the cards a little. */
.live-hand .live-mine .lm-side { align-self: end; }
.live-hand .live-mine.folded .live-cards { filter: grayscale(.45) brightness(.78); }
.live-hand .live-mine .live-cards > p { align-self: center; text-align: center; margin: 0; }
/* In person: the "Hold to look" hint sits on the card backs instead of taking its own row. */
.live-hand .lm-hand { position: relative; }
.live-hand .lm-hand .live-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; min-height: 0; padding: 4px 10px;
  border-radius: var(--r-pill); background: #120b09d9; border: 1px solid #ffffff1f; font-size: var(--fs-sm); white-space: nowrap; pointer-events: none; }
.live-hand .lm-hand .live-hint:empty { display: none; }
.live-hand .lm-hand .live-hint b { font-size: var(--fs-md); }
/* In person: Rebuy sits with your buttons, not in the toolbar; two buttons there share the row. */
.game-page:has(.live-hand) .table-tools [data-rebuy] { display: none; }
.live-hand .live-actions:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; }
.live-hand .live-actions:has(> :nth-child(2)) .btn.block { grid-column: auto; }
/* Votes: a line under the question saying who decides; on phones a vote waiting for your answer floats over the game. */
.vote-sub { margin: -4px 0 0; font-size: var(--fs-sm); }
.vote-float { display: none; }
@media (max-width: 959px) {
  .vote-float:not([hidden]) { display: grid; gap: 10px; position: fixed; left: 12px; right: 12px; top: var(--float-top, calc(10px + env(safe-area-inset-top, 0px))); z-index: 160; /* (over the minimized games: a vote is now) */
    padding: 12px 14px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid #d4ab5e88; box-shadow: 0 16px 40px -12px #000; animation: lh-pop-in .15s ease-out both; }
  .vote-float p { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-md); overflow-wrap: anywhere; }
  .vote-float p svg { width: 18px; height: 18px; color: var(--brass); flex: none; margin-top: 2px; }
  .vote-float .vote-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .vote-float .btn { min-height: 44px; }
}
/* The in-person version of New game: a short note on what's set for you. */
.ng-note { margin: 0 0 14px; font-size: var(--fs-md); }
/* In person: your decision clock runs down as a bar above your cards (other players' tiles have a thinner one). */
.live-hand .live-mine { position: relative; }
.live-timebar { position: absolute; left: 0; right: 0; top: -6px; height: 5px; border-radius: 3px; background: #ffffff14; overflow: hidden; }
.live-timebar[hidden] { display: none; }
.live-timebar i { display: block; height: 100%; background: var(--brass); transform-origin: left; transition: transform .2s linear; }
.live-timebar.low i { background: var(--bad); }
.live-hand .lp-clock { height: 4px; }
/* Phones, online too: no game name in the header; the back button and the tools share the row. */
@media (max-width: 959px) {
  .game-page:has(.table-layout):not(.live-screen-mode) .table-head [data-name], .game-page:has(.table-layout):not(.live-screen-mode) .table-head [data-sub] { display: none; }
  .game-page:has(.table-layout):not(.live-screen-mode) .table-head > .row { flex: none; gap: 0 !important; }
  .game-page:has(.table-layout):not(.live-screen-mode) .table-head .table-tools { flex: 1; width: auto; justify-content: flex-end; }
  /* The sheet: one Chat button, tabs for chat, history and standings; it stays in the visible area above the keyboard. */
  .game-page[data-sheet] .side-col { inset: var(--vv-top, 0px) 0 auto 0; height: var(--vv-h, 100dvh); }
  .sheet-head { gap: 10px; }
  .sheet-head .sheet-tabs { flex: 1; min-width: 0; display: flex; gap: 4px; }
  .sheet-head .sheet-tabs button { flex: 1 1 auto; min-height: 40px; padding-inline: 8px; white-space: nowrap; }
}
/* The Vote button: a dot while a vote is going on. The menu lists what can be voted on. */
.vote-btn { position: relative; }
.vote-btn .count.dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; min-width: 0; padding: 0; border-radius: 50%; background: var(--brass); font-size: 0; }
.vote-menu { display: grid; gap: 8px; }
.vote-menu .btn { display: grid; justify-items: start; justify-content: start; gap: 2px; min-height: 56px; text-align: left; padding: 10px 14px; }
.vote-menu .btn small { color: var(--muted); font-weight: 500; }
/* In person: the bar shows the time left, so the status line keeps to one row without the seconds. */
.live-hand .live-status .live-clock { display: none; }
/* Phones zoom in on text fields under 16px (and the page then scrolls sideways): the chat boxes stay at 16px on touch screens. */
@media (pointer: coarse), (max-width: 959px) {
  .gchat-form .input, .table-chat .input, .input.mono { font-size: var(--fs-lg); }
}
/* Phone sheet: the chat and the hand history use the whole width (the avatar sits by the name, the message runs below it). */
@media (max-width: 959px) {
  .game-page[data-sheet] .side-tabs > .pane { padding-inline: 0; margin-inline: 0; align-self: stretch; width: 100%; }
  .game-page[data-sheet] .gchat, .game-page[data-sheet] .gchat-list, .game-page[data-sheet] .history-pane ol { width: 100%; }
  .game-page[data-sheet] .gchat-list, .game-page[data-sheet] .history-pane ol { padding: 0; }
  .game-page[data-sheet] .gchat-list li:not(.sys):not(.gchat-empty) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; row-gap: 2px; }
  .game-page[data-sheet] .gchat-list li > div { display: contents; }
  .game-page[data-sheet] .gchat-list li > div > span { grid-column: 1 / -1; font-size: var(--fs-md); }
}
/* Phones: the lobby chat uses the panel's full width too. */
@media (max-width: 959px) { .lobby-chat { padding-inline: 12px; } }
/* Your own avatar, beside your cards, is shown large (other players' stay as they are), most of all on phones. */
.seat.me .bust, .portrait .seat.me .bust { width: calc(var(--cw) * 2.5); }
@media (min-width: 960px) { .seat.me .bust { width: calc(var(--cw) * 2.5); } }
@media (max-width: 959px) { .stage.roomy .seat.me .bust, .stage.roomy.portrait .seat.me .bust { width: calc(var(--cw) * 2.2); } }
/* Acting ahead: while it isn't your turn the action buttons offer choices to lock in (dashed), and a chosen one shows pressed. */
.actions.pre .btn, .btn.pre { border-style: dashed; opacity: .9; }
.actions.pre .btn.pre-on, .btn.pre.pre-on { opacity: 1; border-style: solid; box-shadow: 0 0 0 2px var(--brass), 0 0 18px #d4ab5e44; }
.actions.pre .btn.pre-on::before, .btn.pre.pre-on::before { content: "✓ "; }
/* Run it twice: the second board under the first, both a little smaller; a tag while the board runs out.
   Show one card: your own cards can be tapped after the hand (house rule). */
.stage.two-runs .board { top: 41%; --cw: clamp(26px, 5.6cqw, 64px); }
.board2 { top: 59%; }
.board2[hidden] { display: none; }
.board2::before { content: "2"; position: absolute; left: calc(var(--cw) * -.55); top: 50%; transform: translateY(-50%); font-size: var(--fs-xs); font-weight: 700; color: var(--brass); }
.portrait.two-runs .board { top: 43%; --cw: clamp(24px, 10.4cqw, 54px); }
.portrait .board2 { top: 60%; --cw: clamp(24px, 10.4cqw, 54px); }
.run2-tag { position: absolute; left: 50%; top: calc(49% + 9cqw); transform: translateX(-50%); z-index: 2; padding: 3px 10px; border-radius: var(--r-pill); background: #d4ab5e26; border: 1px solid #d4ab5e66; color: var(--brass); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.run2-tag[hidden] { display: none; }
.hole.pick-one .card { cursor: pointer; } .hole.pick-one .card:hover { transform: translateY(-4px); }
/* Watching a friendly game: the hand before, with everyone's cards. */
.delayed-hand { display: grid; gap: 8px; }
.delayed-hand .panel-head { margin: 0; }
.dl-board { display: flex; align-items: center; gap: 4px; --cw: 30px; }
.dl-board small { color: var(--brass); font-size: var(--fs-2xs); font-weight: 700; margin-right: 4px; }
.dl-players { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dl-players li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.dl-players li.won b:first-child { color: var(--brass); }
.dl-players .grow { min-width: 0; display: grid; }
.dl-players small { color: var(--muted); font-size: var(--fs-2xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-cards { display: flex; gap: 2px; --cw: 24px; flex: none; }
.dl-board .card, .dl-cards .card { animation: none; position: relative; }
/* "Run it twice?": the question over the felt while everyone still in the hand answers. */
.run-vote { position: absolute; left: 50%; top: calc(49% + 9cqw); transform: translateX(-50%); z-index: 6; display: grid; justify-items: center; gap: 6px; padding: 10px 14px;
  border-radius: var(--r-lg); background: #140d0bee; border: 1px solid #d4ab5e88; box-shadow: 0 12px 28px -10px #000; text-align: center; font-size: var(--fs-sm); }
.run-vote[hidden] { display: none; }
.run-vote b { color: var(--brass); font-size: var(--fs-base); }
.run-vote span { color: var(--ivory-2); }

/* Dealing: hole cards fly in from the middle in deal order, board cards turn over one by one: each lands face
   down, turns over its edge (the back until it's edge-on, then the face).
   Only the start state is held (backwards), so .win and the fan's rotation apply as usual afterwards. */
.card.dealt { animation: dealt .4s cubic-bezier(.25, .75, .3, 1) var(--dd, 0s) backwards; }
.card.turned { animation: turned .75s ease-in-out var(--dd, 0s) backwards; }
.card.turned::after { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--face-edge);
  background: var(--back-pattern), radial-gradient(circle at 50% 50%, var(--back-1), var(--back-2));
  border: calc(var(--cw) * .07) solid var(--back-edge); animation: turned-back .75s linear var(--dd, 0s) both; }
@keyframes turned-back { 0%, 59% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes dealt { from { opacity: 0; translate: var(--dx, 0) var(--dy, 0); scale: .55; } 25% { opacity: 1; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes turned { 0% { opacity: 0; scale: 1 1; translate: 0 -10px; } 14% { opacity: 1; scale: 1 1; translate: 0 -6px; } 36% { scale: 1 1; translate: 0 -6px; } 60% { scale: .04 1.06; translate: 0 -5px; } 100% { opacity: 1; scale: 1 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .card.dealt, .card.turned { animation: none; } .card.turned::after { content: none; } }
.card.still { animation: none; }
/* Practice without an account: the public header (Log in, Sign up) makes way for the table on phones, like the app's header. */
@media (max-width: 959px) {
  body.in-game .public-top { display: none; }
}
/* Swipe to fold: on your turn your cards can be dragged (the page doesn't scroll under the finger); a flick sends them up and away. */
.seat.me .hole.swipe-on { touch-action: none; cursor: grab; transition: transform .2s ease, opacity .2s ease; }
.seat.me .hole.swiping { transition: none; cursor: grabbing; }
.seat.me .hole.swiped { transition: transform .4s cubic-bezier(.3, .6, .4, 1), opacity .4s ease; transform: translateY(-160%) scale(.8) !important; opacity: 0 !important; }
/* In person: Fold, Check/Call and Bet/Raise in one row under your cards; Rebuy and Show take the whole row. */
.live-hand .live-actions, .live-hand .live-actions:has(> :nth-child(2)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.live-hand .live-actions .btn { min-height: 56px; padding-inline: 6px; font-size: var(--fs-base); }
.live-hand .live-actions .btn.block, .live-hand .live-actions:has(> :nth-child(2)) .btn.block { grid-column: 1 / -1; }
.live-hand .live-actions .btn:disabled { opacity: .35; }
/* In person, hold to look with "small in the corner": the cards show small at the bottom of the screen, without dimming it. */
.lh-pop.corner { inset: auto 10px calc(12px + env(safe-area-inset-bottom, 0px)) auto; place-content: end; justify-items: end; gap: 4px; padding: 6px 8px;
  border-radius: var(--r-md); background: #0d0807d9; backdrop-filter: none; }
.lh-pop.corner .lp-pop-cards { --cw: 40px; gap: 3px; }
.lh-pop.corner .lp-pop-cards .card { box-shadow: 0 6px 14px -6px #000, inset 0 0 0 1px var(--edge-line, var(--face-edge)); }
.lh-pop.corner .lp-pop-name { font-size: var(--fs-xs); }
/* In person, peel: dragging turns over a corner of each card's back, uncovering the face underneath. */
.live-cards.peel-mode { touch-action: none; }
.lh-card.peel { position: relative; --a: calc(var(--peel, 0) * var(--cw) * .98); }
/* Peel: the top-left corner of the back folds over along a diagonal, so the rank and suit in that corner show first.
   The folded flap is the back's pale underside, shaded toward the fold; the face lies underneath. */
.lh-card.peel .lh-back { position: absolute; inset: 0; clip-path: polygon(var(--a) 0, 100% 0, 100% 100%, 0 100%, 0 var(--a)); }
.lh-card.peel .lh-back .card { margin: 0; }
.lh-flap { position: absolute; left: 0; top: 0; width: var(--a); height: var(--a); pointer-events: none; z-index: 2;
  clip-path: polygon(100% 0, 0 100%, 100% 100%); border-bottom-right-radius: calc(var(--cw) * .08);
  background: linear-gradient(315deg, #fbf6ea 0%, #ece3cf 45%, #c9bc9f 85%, #9c8f73 100%); }
/* A soft shadow just under the fold, on the uncovered face. */
.lh-card.peel::after { content: ""; position: absolute; left: 0; top: 0; width: calc(var(--a) * 1.12); height: calc(var(--a) * 1.12); pointer-events: none; z-index: 1;
  clip-path: polygon(0 0, 100% 0, 0 100%); opacity: min(1, calc(var(--peel, 0) * 4));
  background: linear-gradient(135deg, transparent 0%, transparent 82%, #00000055 89%, transparent 100%); }
.live-cards.peel-mode .lh-card { transition: none; }
.live-mine.lifting .live-hint { opacity: 0; }
/* Votes: the note under the tally (who decides, how you voted). On phones the floating vote keeps the tally in view;
   once there's nothing to answer it shrinks to the question, the bar and the numbers. */
.vote-note { margin: 0; font-size: var(--fs-sm); }
@media (max-width: 959px) {
  .vote-float:not([hidden]) { gap: 8px; }
  .vote-float p > [data-vote-left] { margin-left: auto; flex: none; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
  .vote-float .vote-count { margin: 0; font-size: var(--fs-sm); }
  .vote-float .vote-bar { height: 8px; }
  .vote-float.compact { padding: 9px 12px; gap: 6px; }
  .vote-float.compact p { font-size: var(--fs-sm); }
  .vote-float.compact .vote-note { display: none; }
}
/* All in, every card to come: it rises face down above its slot, glowing, turns slowly over its edge (the back
   until it's edge-on, then the face) and lands with a flash, while the rest of the felt dims. About two and a half
   seconds, the face up from 1.34 s (DRAMA_FACE_AT in table-view.js); the showdown waits for it. */
.card.river-drama { animation: river-drama 2.4s cubic-bezier(.3, .6, .25, 1) var(--dd, 0s) backwards; position: relative; z-index: 3; }
.card.river-drama::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--face-edge);
  background: var(--back-pattern), radial-gradient(circle at 50% 50%, var(--back-1), var(--back-2));
  border: calc(var(--cw) * .07) solid var(--back-edge); animation: drama-back 2.4s linear var(--dd, 0s) both; }
@keyframes river-drama {
  0% { opacity: 0; scale: 1 1; translate: 0 -30px; filter: none; box-shadow: 0 0 0 0 #d4ab5e00; }
  12% { opacity: 1; scale: 1.04 1.04; translate: 0 -22px; }
  34% { scale: 1.08 1.08; translate: 0 -20px; box-shadow: 0 0 26px 6px #d4ab5e99; }
  50% { scale: .05 1.18; translate: 0 -18px; }
  56% { scale: .06 1.18; translate: 0 -17px; filter: brightness(1.3); }
  64% { scale: .3 1.17; translate: 0 -14px; }
  78% { scale: 1.16 1.16; translate: 0 -6px; filter: brightness(1.6); box-shadow: 0 0 40px 12px #d4ab5ecc; }
  100% { opacity: 1; scale: 1 1; translate: 0 0; filter: none; box-shadow: 0 0 0 0 #d4ab5e00; }
}
@keyframes drama-back { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.stage.drama .rail, .stage.drama .seat, .stage.drama .board .card:not(.river-drama), .live-board.drama .card:not(.river-drama) { animation: felt-dim 3.2s ease both; }
@keyframes felt-dim { 0% { filter: none; } 20%, 70% { filter: brightness(.55) saturate(.8); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .card.river-drama, .card.river-drama::after, .stage.drama .rail, .stage.drama .seat, .stage.drama .board .card, .live-board.drama .card { animation: none; } }
/* Real cards: no cards on the phone or the middle screen, just what to deal now; at the showdown the table picks who won. */
.lb-real { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 10px 8px; width: 100%; }
.lb-real .lbr-street { font-family: var(--display, Limelight, serif); font-size: clamp(22px, 6vw, 40px); color: var(--brass); letter-spacing: .02em; }
.lb-real small { color: var(--muted); font-size: var(--fs-md); }
.live-screen .lb-real .lbr-street { font-size: clamp(36px, 7vw, 84px); }
.live-screen .lb-real small { font-size: clamp(15px, 2vw, 22px); }
.live-hand.real-cards .live-board .lb-cards { flex: 1; }
.live-pick, .live-screen .live-result:has(.lpk-seats) { display: grid; gap: 10px; justify-items: stretch; grid-column: 1 / -1; padding: 12px; border-radius: var(--r-lg);
  border: 1px solid #d4ab5e88; background: var(--panel); }
.live-pick > b, .live-result:has(.lpk-seats) > b { font-size: var(--fs-lg); text-align: center; }
.lpk-amt { text-align: center; color: var(--brass); font-weight: 700; font-size: var(--fs-xl); }
.lpk-seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.lpk-seats .btn { min-height: 52px; font-size: var(--fs-lg); }
.live-pick small, .live-result:has(.lpk-seats) small { text-align: center; }
/* In person on a phone: while the bet panel is open, your cards shrink so the panel and the Fold / Check / Bet row
   fit on the screen without scrolling. */
.live-hand:has(.live-raise:not([hidden])) .live-mine.no-side:not(.edge) .live-cards { --cw: clamp(40px, min(24vw, 10.5dvh, calc(60vw / (var(--n, 2) * .7 + .3))), 104px); }
.live-hand:has(.live-raise:not([hidden])) .live-mine:not(.edge) { padding-block: 4px 2px; }
.live-hand .live-raise { gap: 8px; padding: 10px 12px; }
.live-hand .live-raise .lr-presets .btn { min-height: 36px; }
/* Short phones (or browser bars showing): smaller still, and the hint under the cards steps aside while betting. */
@media (max-height: 720px) {
  .live-hand:has(.live-raise:not([hidden])) .live-mine.no-side:not(.edge) .live-cards { --cw: clamp(36px, min(20vw, 7.5dvh), 80px); }
  .live-hand:has(.live-raise:not([hidden])) .live-mine:not(.edge) .live-hint { display: none; }
  .live-hand:has(.live-raise:not([hidden])) { gap: 6px; }
}
/* Very short screens: while the bet panel is open your cards step aside (they come back when you bet or cancel). */
@media (max-height: 600px) {
  .live-hand:has(.live-raise:not([hidden])) .live-mine:not(.edge) { display: none; }
}
/* The line on the felt runs parallel to the rail everywhere: the same gap on every side (a percentage of the felt's
   height and width made it wider at the ends than along the sides on tall phone tables). */
.felt::after { inset: clamp(8px, 4.2cqw, 40px); }
.portrait .felt::after { inset: clamp(8px, 5.5cqw, 32px); }
/* The hand's result sits where the pot was (the pot is gone by then), as compact as the pot: it never covers the board
   or anyone's cards. Winner, what they won, the hand's name and the five cards that made it. */
.result { top: 31%; max-width: 92%; padding: 4px 12px; border-radius: var(--r-pill); background: #140a0be6; box-shadow: 0 0 0 1px #d4ab5e55, 0 8px 22px -10px #000; font-size: clamp(11.5px, 1.45cqw, 15px); line-height: 1.3; display: grid; gap: 2px; justify-items: center; }
.portrait .result { top: 34%; max-width: 94%; border-radius: var(--r-lg); }
.stage.roomy .result { top: 37%; max-width: 94%; }
.stage.two-runs .result { top: 24%; }
.rs-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 7px; row-gap: 1px; }
.rs-line svg { width: 1.1em; height: 1.1em; color: var(--brass); }
.rs-name { color: var(--text); font-weight: 700; }
.rs-amt { color: var(--win); font-weight: 700; font-variant-numeric: tabular-nums; }
.rs-hand { color: var(--ivory-2); }
.rs-cards { display: inline-flex; gap: 3px; padding: 1px 6px; border-radius: var(--r-sm); background: #f5efe2; font-weight: 700; letter-spacing: -.01em; }
.rs-cards .lc.s0, .rs-cards .lc.s3 { color: #1b1416; }
.rs-line + .rs-line { font-size: .92em; }
.rs-cards .lc.s1, .rs-cards .lc.s2 { color: #c2262e; }
/* (four colours on: the pill's diamonds and clubs too, the Classic deck's blue and green) */
body[data-small="4"] .rs-cards .lc.s2 { color: #1f5fb4; } body[data-small="4"] .rs-cards .lc.s3 { color: #1c7a3a; }
/* Real cards: no cards of yours on the phone (they're on the table) and no chips drawn large: the chips are beside
   Stack and Pot. */
.real-cards .live-cards { min-height: 0; cursor: default; padding-bottom: 0; }
/* Narrow desktops and laptops (960–1179px, e.g. 1366 or 1920 screens at 125–150% scaling): a running game fits the
   window too, with a slimmer side column, instead of the page scrolling down to the chat. */
@media (min-width: 960px) and (max-width: 1179px) and (min-height: 560px) {
  .table-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .game-page:has(.table-layout) { height: calc(100vh - var(--top-h)); padding-block: 12px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; overflow: hidden; }
  .game-page > [data-body]:has(.table-layout) { min-height: 0; height: 100%; }
  .game-page .table-layout { height: 100%; min-height: 0; align-items: stretch; }
  .game-page .table-layout > [data-table] { display: flex; flex-direction: column; min-height: 0; }
  .game-page .table-wrap { flex: 1 1 auto; min-height: 0; container: fit / size; padding-block: 6px 4px; display: grid; place-items: center; }
  .game-page .table-wrap.with-busts { padding-top: clamp(30px, 5vh, 70px); }
  .game-page .stage { container: table / inline-size; width: min(100cqw, calc(100cqh * 16 / 9)); }
  .game-page .stage.portrait { width: min(100cqw, calc(100cqh * 3 / 4.4)); }
  .game-page .controls { flex: none; }
  .game-page .side-col { position: static; display: flex; flex-direction: column; gap: 10px; height: 100%; max-height: none; min-height: 0; overflow: hidden; }
  .game-page .side-col > * { flex: none; }
  .game-page .side-col > .odds-panel, .game-page .side-col > .standings, .game-page .side-col > .vote-panel { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
  .game-page .side-col > .standings { min-height: 80px; max-height: 26%; }
  .game-page .side-col > .side-tabs { margin-top: auto; }
  .game-page .side-col > .side-tabs:not(.collapsed) { flex: 1 1 0; min-height: 200px; display: flex; flex-direction: column; }
  .game-page .side-tabs:not(.collapsed) > .pane:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
}
@media (min-width: 1180px) and (min-height: 600px) { .game-page .stage.portrait { width: min(100cqw, calc(100cqh * 3 / 4.4)); } }
/* In person, "from the bottom" (the phone default): your cards sit at the bottom edge of the screen with only their tops
   showing; holding them lifts them up face up. Everything else keeps clear of them. */
.live-hand .live-mine.edge { --cw: clamp(84px, 30vw, 140px); position: fixed; bottom: 0; z-index: 45; height: calc(var(--peek) + env(safe-area-inset-bottom, 0px)); padding: 0; margin: 0; display: block; border: 0; background: none; box-shadow: none; pointer-events: none; }
.live-hand .live-mine.edge .lm-hand { position: absolute; left: 0; right: 0; top: 0; display: grid; justify-items: center; pointer-events: none; }
.live-hand .live-mine.edge .live-cards { --cw: inherit; pointer-events: auto; min-height: 0; padding: 0; transform: translateY(0); transition: transform .22s cubic-bezier(.3, .7, .3, 1); touch-action: none; }
.live-hand .live-mine.edge.lifted .live-cards { transform: translateY(calc(var(--cw) * -1.4 * .72)); }
.live-hand .live-mine.edge .lh-card { margin: 0 calc(var(--cw) * -.1); }
.live-hand .live-mine.edge .live-hint { position: absolute; left: 50%; top: auto; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.live-hand .live-mine.edge.lifted .live-hint { bottom: calc(100% + var(--cw) * 1.4 * .72 + 6px); }
.live-hand .live-mine.edge .live-timebar { top: -8px; left: 20%; right: 20%; }
.live-hand.edge-mode { padding-bottom: calc(var(--edge-peek, 72px) + 34px + env(safe-area-inset-bottom, 0px)); }
.live-hand.edge-mode { --edge-peek: calc(clamp(84px, 30vw, 140px) * 1.4 * .34); }
/* From the bottom: the status line and the buttons sit just above the cards, within reach of a thumb. */
.live-hand.edge-mode { display: flex; flex-direction: column; min-height: 100%; }
.live-hand.edge-mode > * { flex: none; width: 100%; min-width: 0; max-width: 100%; }
.live-hand.edge-mode > .live-status { margin-top: auto; }
.live-hand.edge-mode { min-width: 0; contain: inline-size; }
/* Hold, small on wider screens: the small cards show in the bottom corner of the game column, not of the window. */
@media (min-width: 960px) {
  .live-hand { position: relative; }
  .live-hand .live-mine > .lh-pop.corner { position: absolute; inset: auto 6px 50% auto; transform: translateY(50%); }
}
.pick-modal .lpk-amt { margin: -6px 0 0; } .pick-modal .lpk-note { text-align: center; }
/* Real cards, entering the cards: the board and each hand as rows of slots, and the deck to tap them from. */
.ce-rows { display: grid; gap: 8px; --cw: 34px; }
.ce-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ce-who { width: 84px; flex: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-slots { display: flex; gap: 4px; flex-wrap: wrap; }
.ce-slot { width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: var(--r-xs); border: 1px dashed var(--line-2, #ffffff33); display: grid; place-items: center; padding: 0; background: none; }
.ce-slot.full { border: 0; cursor: pointer; }
.ce-slot .card, .ce-card .card { --cw: inherit; animation: none; }
.ce-deck { display: grid; gap: 4px; --cw: clamp(22px, 5.6vw, 34px); overflow-x: auto; }
.ce-suit { display: flex; gap: 3px; }
.ce-card { padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-xs); }
.ce-card:disabled { opacity: .2; cursor: default; }
.lpk-seats .btn small { display: block; font-size: var(--fs-2xs); font-weight: 500; opacity: .8; }
.lb-real.lbr-board { display: flex; justify-content: center; gap: 6px; }
/* Chips, redrawn to read as casino chips: a top face with six chunky edge spots around the rim and a lighter inlay
   ringed in the middle, over an edge striped in the same spots and shaded round. Each chip in a pile shows its edge. */
.pile .c3:not(:first-child) { margin-bottom: calc(var(--t) - var(--h)); }
.c3.v1 { --face: var(--chip-1, #e8e2d6); --spot: #2f6db5; }
/* Seen a little from above: more of the face, a thin edge, and a fine line between chips in a pile. */
.c3 { --w: clamp(16px, 2.1cqw, 22px); --hi: color-mix(in srgb, var(--face) 55%, white); --rim: color-mix(in srgb, var(--face) 70%, black); --side: color-mix(in srgb, var(--face) 78%, black); --spot: #f4ede0; background: radial-gradient(closest-side, var(--hi) 0 44%, var(--rim) 46% 50%, transparent 52%),
    repeating-conic-gradient(from -11deg, var(--spot) 0 22deg, var(--face) 22deg 60deg); box-shadow: inset 0 0 0 1px #00000059, inset 0 -1px 0 1px #0000002e; --h: calc(var(--w) * .52); --t: max(2px, calc(var(--w) * .12)); }
.c3::after { top: 50%; height: calc(var(--h) / 2 + var(--t)); background: linear-gradient(90deg, #0000008c, #0000 30%, #ffffff26 50%, #0000 70%, #0000008c),
    repeating-linear-gradient(90deg, var(--side) 0 calc(var(--w) * .2), var(--spot) calc(var(--w) * .2) calc(var(--w) * .3)); box-shadow: 0 1px 2px #0009; border-bottom: 1px solid #0000004d; border-radius: 0 0 50% 50% / 0 0 calc(var(--h) / 2) calc(var(--h) / 2); }
/* Real cards on a phone: the view is the screen. The empty space where your cards would be takes what's left and gives
   it up when the raise panel opens, so the view never grows past the screen. */
.live-hand.real-cards { display: flex; flex-direction: column; height: 100%; min-height: 0; contain: inline-size; }
.live-hand.real-cards > * { flex: none; width: 100%; min-width: 0; }
.live-hand.real-cards .live-mine { flex: 1 1 0; min-height: 0; display: grid; align-content: center; overflow: hidden; }
.live-hand.real-cards .lb-real { padding-block: 6px; }
@media (max-height: 640px) {
  .live-hand.real-cards .lb-real .lbr-street { font-size: clamp(20px, 5vw, 30px); }
  .live-hand.real-cards .lb-real small { font-size: var(--fs-xs); }
}
/* From the bottom on short phones: smaller card tops and less room around them. */
@media (max-height: 640px) {
  .live-hand .live-mine.edge { --cw: clamp(70px, 26vw, 120px); }
  .live-hand.edge-mode { --edge-peek: calc(clamp(70px, 26vw, 120px) * 1.4 * .34); padding-bottom: calc(var(--edge-peek) + 26px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-height: 600px) { .live-hand .live-mine.no-side:not(.edge) .live-cards { --cw: clamp(56px, min(30vw, 15dvh), 130px); } }
/* Chips are SVG now (see chips.js): one picture per pile, as wide as the chip size; the old CSS drawing is switched off. */
svg.c3::after { content: none; display: none; }
/* The pile's picture has a little room either side for chips that sit off-centre; the chips keep their size. */
svg.c3 { display: block; height: auto; background: none; box-shadow: none; border-radius: 0; border: 0; overflow: visible; margin: 0 !important; width: calc(var(--w) * 1.08); margin-inline: calc(var(--w) * -.04) !important; }

/* A vote's result, shown for a few seconds after it ends */
.vote-result p { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vote-result p + p { margin-top: 6px; display: block; }
.vote-result svg { width: 16px; height: 16px; flex: none; }
.vote-result.passed b { color: var(--good); }
.vote-result.failed b { color: var(--bad); }

/* Name plates: one fixed size per layout, whatever the name's length (long names end in …); empty parts of the
   first row (no flag, no tag) take no room, so the name stays centred. */
.plate { width: clamp(80px, 13cqw, 148px); }
.many .plate { width: clamp(74px, 11cqw, 128px); }
.portrait .plate { width: clamp(70px, 23cqw, 116px); }
@media (max-width: 959px) {
  .stage.roomy .seat:not(.me) .plate { width: clamp(66px, 21cqw, 108px); }
}
@media (max-width: 959px) {
  .stage.roomy .seat:not(.me) .plate { width: clamp(60px, min(21cqw, 17cqh), 108px); }
}
.row1 { min-width: 0; }
.row1 > :empty, .row1 > [hidden] { display: none; }
.seat .name { min-width: 0; max-width: none; flex: 0 1 auto; }

/* A group's search: which group */
.search-group { display: inline-flex; align-items: center; gap: 6px; color: var(--brass); }
.search-group svg { width: 16px; height: 16px; }

/* Play page cards: contents from the top (a taller neighbour in the row no longer spreads them out), the button
   at the bottom, and the title's pill beside it even when the title wraps. */
.start-cards .table-card { display: flex; flex-direction: column; gap: 12px; }
.start-cards .table-card > .row.end:last-child { margin-top: auto; }
.start-cards .table-card > .row.between:first-child { flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
.start-cards .table-card > .row.between:first-child .pill { flex: none; margin-top: 2px; }
.start-cards .table-card h3 svg { flex: none; }

/* Phones: opponents' plates a little wider, their chips with a chip beside the amount */
@media (max-width: 959px) {
  .stage.roomy .seat:not(.me) .plate { width: clamp(68px, min(24cqw, 19cqh), 120px); }
}
/* (your own plate too: your stack is its second row, as in the others', with Chat beside the plate) */
.portrait .seat .plate-stack { display: flex; align-items: center; justify-content: center; gap: 4px; }
.portrait .seat.me .chipstack :is(.stack-lbl, .piles, .stack), .portrait .seat.me .chipstack > .ps-net { display: none; }
.plate-stack .ps-chip { display: inline-flex; align-items: flex-end; gap: 2px; line-height: 0; }
.plate-stack .ps-chip .c3 { --w: 11px; width: var(--w); height: auto; }
.plate-stack .ps-chip .pile { display: inline-flex; }

/* The competitive card: the Poncler tree inside a chip (img/chip-logo.svg; its edge spots turn and a sheen passes by
   themselves), too big for the card and cut off in its lower right corner, so about two thirds of it show. It stays put. */
.quick-card { position: relative; overflow: hidden; isolation: isolate; }
.quick-card::before { content: ''; position: absolute; pointer-events: none; z-index: -1; right: 0; bottom: -70px; width: 340px; aspect-ratio: 1;
  background: url('/img/chip-logo.svg?v=2') center / contain no-repeat; translate: 24% 0; filter: drop-shadow(0 0 22px #d4ab5e33); }
/* A vignette over the chip: darker towards the card's edges and in a soft pool behind the Search button, so the
   button stands out from the chip's brass. */
.quick-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; border-radius: inherit;
  background: radial-gradient(ellipse 46% 30% at 86% 90%, #0d0807f0, #0d0807b0 45%, transparent 100%),
    radial-gradient(ellipse 90% 80% at 40% 30%, transparent 50%, #0000009e 100%); }
.quick-card .btn.primary { box-shadow: 0 0 0 1px #0d080766, 0 8px 26px #000000b3; }
@media (max-width: 959px) { .quick-card::after { content: none; } }
@media (max-width: 959px) { .quick-card::before { display: none; } }

/* Phones at a table (or watching a replay): your other games tuck into one small button at the top left instead of
   covering the players; it opens them. A game where it's your turn still shows. */
.mg-tuck { display: none; }
@media (max-width: 959px) {
  body.in-game .mini-games, body:has(.hist-viewing) .mini-games { top: calc(env(safe-area-inset-top, 0px) + 58px); bottom: auto; left: 12px; right: auto; justify-items: start; }
  body:has(.hist-viewing) .mini-games { top: auto; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); left: auto; right: 12px; justify-items: end; align-content: end; }
  body.in-game .mg-tuck, body:has(.hist-viewing) .mg-tuck { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid #d4ab5e66;
    background: #1a110ee6; color: var(--brass); font: 600 13px/1 inherit; cursor: pointer; box-shadow: 0 6px 16px -6px #000c; }
  .mg-tuck svg { width: 15px; height: 15px; }
  body.in-game .mini-games:not(.open) > .mini-game:not(.turn), body:has(.hist-viewing) .mini-games:not(.open) > .mini-game:not(.turn) { display: none; }
  body.in-game .mini-games > .mini-game, body:has(.hist-viewing) .mini-games > .mini-game { width: 100%; }
}

/* Phones, History: a replay's table laid out as at the game (the same roomy seats and felt), filling its area. */
@media (max-width: 959px) {
  .hist-viewing .rp-play .stage.portrait.roomy { width: 100cqw; height: 100cqh; aspect-ratio: auto; container: table / size; }
}

/* After a hand: each player's change below the plate, losses in the same bubble in red; the pot's total in the middle */
.badge.lose { background: var(--bad); border-color: transparent; color: #fff; }
.result .rs-amt { display: inline-flex; align-items: center; gap: 4px; }
.result .rs-amt .c3 { --w: 13px; }

/* Phones: opponents' plates wider still, and their chip amount kept whole (a smaller font for long amounts) */
@media (max-width: 959px) {
  .stage.roomy .seat:not(.me) .plate { width: clamp(76px, min(27cqw, 21cqh), 132px); }
}
.plate-stack span[data-len="mid"] { font-size: .92em; letter-spacing: -.01em; }
.plate-stack span[data-len="long"] { font-size: .82em; letter-spacing: -.02em; }

/* A finished game's hands: number, what happened, then its links, always in the same column at the right */
.hand-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
.hand-list .hl-links { display: inline-flex; gap: 12px; justify-content: flex-end; min-width: 132px; }
.hand-list .hl-links .rp-link { margin-left: 0; }
@media (max-width: 600px) { .hand-list .hl-links { min-width: 0; } .hand-list li { grid-template-columns: 30px minmax(0, 1fr) auto; } }

/* Play page: open games as a compact list in the top row of cards (about five fit, then it scrolls) */
.open-card .open-list { display: grid; gap: 6px; max-height: 330px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.open-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: #ffffff05; }
.open-row:hover { border-color: #d4ab5e55; }
.open-row .grow { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; } /* (it takes the row, so Details and Join sit at the right) */
.open-row b { font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.open-row small { color: var(--muted); font-size: var(--fs-2xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.open-row .open-seats { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.open-row .open-seats svg { width: 12px; height: 12px; vertical-align: -2px; }
.open-row .btn { flex: none; padding-inline: 10px; }
.open-row .btn svg { width: 14px; height: 14px; }
/* Member card previews: the real card's background on a canvas underneath (it has its own frame and ornament) */
.sc-preview.has-bg { background: none; }
.sc-preview.has-bg::before, .sc-preview.has-bg::after { content: none; }
.sc-preview .sc-bg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
.sc-preview.has-bg > :not(.sc-bg) { position: relative; }
.sc-preview.has-bg > .sc-shield { position: absolute; }

/* Several lobbies fold into one bar: a list of them, each with its own Leave. */
.mg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mg-list li { display: flex; align-items: center; gap: 6px; }
.mg-list a { flex: 1; min-width: 0; display: grid; color: inherit; text-decoration: none; padding: 4px 8px; border-radius: var(--r-sm); }
.mg-list a:hover { background: #ffffff0f; }
.mg-list b { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-list small { font-size: var(--fs-xs); color: var(--muted); }

/* Time bank (competitive tables): how many you have, and the clock turning brass while one runs */
.status-side .bank { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; font-size: var(--fs-xs); color: var(--brass); white-space: nowrap; }
.status-side .bank svg { width: 14px; height: 14px; }
.status-side .clock.bank { color: var(--brass); }

/* Results page: game stats, with the HUD bar and the read as the style (Pro) */
.game-stats td { white-space: nowrap; }
.gs-read { --hud-c: var(--muted); color: var(--hud-c); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.gs-read.t-aggressive { --hud-c: #e0565b; } .gs-read.t-wild { --hud-c: #ff8a3d; } .gs-read.t-passive { --hud-c: #6fa8dc; }
/* The player pop-up's Elo line is the pill: the rank inside it is just the chip and its name */
.pc-elo .rank-badge { padding: 0; border: 0; background: none; }
/* Your own time on phones (online table): a bar across the top of the controls instead of on your plate. It sits
   in the panel's padding, so the panel keeps its height. Red in the last ten seconds, like every clock bar. */
.turn-bar { display: none; }
@media (max-width: 959px) {
  .game-page .controls { position: relative; }
  .game-page .controls .turn-bar:not([hidden]) { display: block; position: absolute; left: 14px; right: 14px; top: 4px; height: 4px; border-radius: 3px; background: #ffffff1a; overflow: hidden; }
  .game-page .turn-bar i { position: absolute; inset: 0; background: var(--brass); transform-origin: left center; transition: transform .1s linear; }
  .game-page .turn-bar.low i { background: #e0565b; }
  .game-page .seat.me .clock-bar { display: none; }
}
/* On phones opponents' plates take the width of what's in them (chips and the amount beside the name), so a long amount
   or four piles never run past the edge; on computers every plate at the table is one fixed width (--plate-w), wide
   enough for four piles and a six-figure amount, whatever is in it (long names end in …). */
.seat:not(.me) .plate { width: max-content; }
.stage { --plate-w: clamp(132px, 16cqw, 164px); }
.stage.many { --plate-w: clamp(120px, 13.5cqw, 148px); }
.stage:not(.portrait) .seat .plate { width: var(--plate-w); min-width: 0; }
.stage:not(.portrait) .seat:not(.me) .chipstack { min-width: 0; }
/* In person, wide windows that aren't tall: the hand's cards follow the height too, and the column scrolls inside
   itself (as on phones) rather than cutting off Fold, Call and Raise at the bottom. */
@media (min-width: 960px) {
  .live-mode .table-layout > [data-table] { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .live-hand .live-mine .live-cards { --cw: clamp(54px, min(23vw, 14dvh, calc(50vw / (var(--n, 2) * .7 + .3))), 128px); }
  .live-hand .live-mine.no-side .live-cards { --cw: clamp(64px, min(34vw, 15dvh, calc(86vw / (var(--n, 2) * .7 + .3))), 150px); }
}
/* Phones and tablets: with other games open, their tucked button gets a row of its own above the board instead of
   covering the first board card or the hand's line. */
@media (max-width: 959px) {
  body.in-game:has(.mini-games:not([hidden]) .mg-tuck) .live-view { padding-top: 44px; }
}
/* The middle screen on an upright tablet: the board and the players grow into the height instead of leaving it empty. */
@media (orientation: portrait) and (min-width: 600px) {
  .live-screen .live-board { --cw: clamp(56px, 14vw, 140px); }
  .live-screen .lp-cards { --cw: clamp(30px, 6vw, 56px); }
  .live-screen .live-players { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
/* In person and the middle screen: the game's code and version, faint in the felt's bottom corner. */
.live-board { position: relative; }
.lb-stamp { position: absolute; right: 14px; bottom: 5px; font: 500 9.5px/1 var(--sans); font-style: normal; letter-spacing: .1em; color: #f5efe2; opacity: .32; pointer-events: none; white-space: nowrap; }
.live-screen .lb-stamp { font-size: var(--fs-2xs); right: 22px; bottom: 9px; }
/* Spectate (/spectate): the tables playing now, each with its board, pot and players */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.spec-card { display: grid; gap: 12px; align-content: start; }
.spec-card.with-friend { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.spec-title { display: grid; min-width: 0; }
.spec-title b, .spec-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spec-felt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--r-lg);
  background: radial-gradient(ellipse 85% 100% at 35% 40%, var(--felt-hi, #2f7a4f), var(--felt, #1f5a3a) 58%, var(--felt-deep, #133d27)); box-shadow: inset 0 0 0 1px #d4ab5e33, inset 0 6px 18px #0007; }
.spec-board { display: flex; gap: 3px; --cw: 32px; }
.spec-board .card { animation: none; }
.spec-board .card-slot { width: var(--cw); height: calc(var(--cw) * 1.4); }
.spec-pot { display: grid; justify-items: end; text-align: right; }
.spec-pot small { font-size: var(--fs-2xs); color: #ffffffb3; }
.spec-pot b { color: var(--brass); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.spec-players { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.spec-players li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); min-width: 0; }
.spec-players li .name-with-flag { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spec-players li b { font-variant-numeric: tabular-nums; color: var(--brass); }
.spec-players li.friend .name-with-flag { color: var(--good); }
.open-watch { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: var(--fs-md); }
.open-watch svg { width: 15px; height: 15px; }
/* Name plates: a smaller flag, a little less room above the name, and the HUD as a pill of one fixed width, just wide
   enough for 100 on both sides with the run icon between (the plate no longer stretches it). */
.row1 .flag { width: 12px; height: 9px; }
.many .plate, .portrait .plate { padding-top: 3px; }
.stage { --hud-w: 64px; } /* (the phone's pill on computers too) */
.plate .hud { width: var(--hud-w); margin: 3px 0 0 50%; transform: translateX(-50%); } /* (centred even on a plate narrower than the pill) */
.plate .hud-seg { flex: 1 1 0; }
/* (a plate is never narrower than its HUD pill and the padding around it, HUD or not) */
.plate { padding-top: 4px; min-width: calc(var(--hud-w) + 20px); }
/* The HUD's run circle when there's no run: a grey dot */
.hud-run.run-none i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #8a7f78; }
@media (max-width: 959px) { .hud-run.run-none i { width: 4px; height: 4px; } }
.lp-run.run-none > i { display: block; width: 4px; height: 4px; border-radius: 50%; background: #8a7f78; }
/* The flag sits centred on the name (its wrapper would otherwise put it on the text baseline) */
.row1 [data-flag] { display: flex; align-items: center; }
.row1 [data-flag]:empty { display: none; }
.row1 [data-flag] .flag { vertical-align: 0; }
/* After a hand, the result pill (+ won, − lost) takes the place of the chip total (on the plate on upright tables,
   beside the chips on wide ones), until the next deal; the result badge under the plate steps aside so it shows once. */
.ps-net { display: none; }
.seat.netting .plate-stack > span, .seat.netting .chipstack > .stack { display: none; }
.seat.netting .ps-net:not([hidden]) { display: inline-block; padding: 1px 7px; border-radius: var(--r-pill); font: 800 12px/1.35 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.seat.netting .ps-net.win { background: var(--win); color: var(--ink, #1a0f0c); }
.seat.netting .ps-net.lose { background: var(--bad); color: #fff; }
.seat.netting .badge.win, .seat.netting .badge.lose, .seat.netting .badge.allin { display: none; }
/* All-in takes the chip total's place too, in the all-in red */
.seat.netting .ps-net.allin { background: var(--chip-red); color: #fff; letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; }
/* (wide tables: the size of the chip total it replaces) */
.stage:not(.portrait) .seat.netting .chipstack > .ps-net:not([hidden]) { font-size: clamp(11px, 1.35cqw, 14px); }
.stage:not(.portrait) .seat.netting .chipstack > .ps-net.allin:not([hidden]) { font-size: clamp(9.5px, 1.1cqw, 12px); }
/* Every plate keeps the HUD's row, with Poncler Pro or without, so it's always the same size: the HUD sits there (Pro), a
   new action (Fold, Check, Call…) shows there for a moment, and otherwise the row stays empty */
.plate-act { display: flex; visibility: hidden; align-items: center; justify-content: center; width: var(--hud-w); height: 19px; margin: 5px auto 0;
  border-radius: var(--r-pill); background: #0d0807; border: 1px solid #ffffff2a; color: var(--text);
  font: 800 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.seat.has-hud:not(.just-acted) .plate-act { display: none; }
.seat.just-acted .hud { display: none; }
.seat.just-acted .plate-act { visibility: visible; animation: act-in .18s ease-out; }
.seat .plate-act.fold { color: var(--muted); }
/* (upright tables show actions only there; wide ones keep the last action under the plate, once the moment is over) */
.portrait .seat .badge:not(.thinking) { display: none; }
.seat.just-acted .badge:not(.thinking):not(.win):not(.lose) { visibility: hidden; }
/* (phones: as tall as the HUD's run circle, centred where the HUD bar sits and taking no more room than it) */
@media (max-width: 959px) { .plate-act { height: 16px; margin: 1px auto -2px; font-size: 9px; letter-spacing: .08em; } }
/* Phones: without a HUD the row shows the action pill empty until something happens, so the plate doesn't look bare
   under the chips; and the result pill (+ won, − lost) is thinner */
@media (max-width: 959px) {
  .seat:not(.just-acted) .plate-act { visibility: visible; color: transparent; }
  .portrait .seat.netting .ps-net:not([hidden]) { padding: 0 6px; line-height: 1.2; }
}
@keyframes act-in { from { opacity: 0; transform: scale(.85); } }
/* A GTO verdict (Analyze, replays): spot on and good in green, standard grey, a small slip yellow, a mistake or blunder red */
.gr { display: inline-grid; place-items: center; }
.gr svg { width: 18px; height: 18px; }
.gr.perfect, .gr.good { color: var(--good); } .gr.standard { color: var(--muted); } .gr.slip { color: var(--warn); } .gr.mistake, .gr.blunder { color: var(--bad); }
/* Replays: the verdict on the decision just made, a filled circle on the plate's top corner, like a chess move's */
.plate-mark[hidden] { display: none; }
.plate-mark { position: absolute; left: -11px; top: -11px; z-index: 4; display: grid; width: 24px; height: 24px; cursor: pointer; animation: mark-in .28s cubic-bezier(.3, 1.6, .5, 1); }
.plate-mark .gr { width: 100%; height: 100%; border-radius: 50%; color: #fff; box-shadow: 0 0 0 2px #1a0f0c, 0 3px 8px #000b; }
.plate-mark .gr svg { width: 15px; height: 15px; stroke-width: 2.6; }
.plate-mark .gr.perfect { background: #3daa6a; } .plate-mark .gr.good { background: #6f9f7f; } .plate-mark .gr.standard { background: #8a7f72; }
.plate-mark .gr.slip { background: var(--warn); color: #1a0f0c; }
.plate-mark .gr.mistake { background: #e0705a; } .plate-mark .gr.blunder { background: #c8323a; }
@media (max-width: 959px) { .plate-mark { width: 19px; height: 19px; left: -8px; top: -8px; } .plate-mark .gr svg { width: 12px; height: 12px; } }
@keyframes mark-in { from { transform: scale(.3); opacity: 0; } }
/* The chips on a plate are drawn once on their own layer: otherwise the plate's glow changing as players act
   redraws them a fraction of a pixel off each time, and they seem to wobble */
.plate-stack .ps-chip, .chipstack .piles { will-change: transform; }
/* ---------- The table tutorial (/learn/table): Joncler's card and the spot on what he explains ---------- */
.tut-spot { position: fixed; z-index: 180; border-radius: var(--r-lg); pointer-events: none; box-shadow: 0 0 0 2px var(--brass), 0 0 22px #d4ab5e66, 0 0 0 200vmax #0a0605a8;
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.tut-spot[hidden] { display: none; }
.tut-card { position: fixed; z-index: 181; left: 50%; top: 50%; width: min(400px, calc(100vw - 24px)); max-height: min(70vh, 520px); overflow: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: start; padding: 16px 18px 14px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid #d4ab5e55; border-radius: var(--r-lg); box-shadow: 0 18px 50px -12px #000e, 0 0 0 1px #0006;
  transition: left .25s ease, top .25s ease; }
.tut-card[hidden] { display: none; }
.tut-face { filter: drop-shadow(0 4px 8px #0007); line-height: 0; }
.tut-body { display: grid; gap: 7px; min-width: 0; }
.tut-body .eyebrow { margin: 0; }
.tut-body h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--fs-xl); color: var(--brass); letter-spacing: .02em; }
.tut-body p { margin: 0; font-size: var(--fs-md); line-height: 1.5; color: var(--ivory-2); }
.tut-cards { display: flex; gap: 6px; padding: 2px 0; }
.tut-cards .card { --cw: 34px; width: 34px; height: 48px; font-size: var(--fs-sm); }
.tut-do { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 5px 12px; border-radius: var(--r-pill); background: #d4ab5e22; color: var(--brass) !important; font-weight: 700; }
.tut-do svg { width: 15px; height: 15px; }
.tut-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line); }
.tut-card.nudge { animation: tut-nudge .4s ease; }
@keyframes tut-nudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* The button Joncler asks for pulses (the spot leaves it bright; the card and the spot sit above the mini games, under toasts) */
.tut-target { position: relative; animation: tut-pulse 1.4s ease-in-out infinite; }
@keyframes tut-pulse { 50% { box-shadow: 0 0 0 4px #d4ab5e88, 0 0 18px #d4ab5e88; } }
@media (max-width: 959px) {
  .tut-card { grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; padding: 12px 14px 10px; max-height: 46vh; }
  .tut-body h3 { font-size: var(--fs-lg); }
  .tut-body p { font-size: var(--fs-sm); line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) { .tut-spot, .tut-card { transition: none; } .tut-target, .tut-card.nudge { animation: none; } }
/* A big win: the hand's name over the felt and a burst of chips (celebrate in table-view.js) */
.celebrate { position: absolute; left: 50%; top: 44%; z-index: 30; display: grid; justify-items: center; gap: 4px; pointer-events: none;
  transform: translate(-50%, -50%); opacity: 0; animation: cel-in 2.9s cubic-bezier(.2, .9, .3, 1) both; }
.celebrate > b { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 6cqw, 64px); line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  color: var(--win); text-shadow: 0 0 22px #ecc87499, 0 4px 0 #6b4a12, 0 10px 26px #000c; white-space: nowrap; }
.celebrate > span { padding: 3px 14px; border-radius: var(--r-pill); background: var(--win); color: var(--ink); font: 800 clamp(15px, 2cqw, 22px)/1.3 var(--sans); box-shadow: 0 6px 18px #000a; }
.celebrate.c-royal > b, .celebrate.c-five > b { color: #fff3c8; text-shadow: 0 0 30px #ffd76aee, 0 4px 0 #6b4a12, 0 10px 26px #000c; }
.c-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.c-burst > i { position: absolute; left: -12px; top: -12px; width: 24px; opacity: 0; animation: cel-chip 1.5s cubic-bezier(.15, .8, .3, 1) var(--t) both; }
.c-burst > i svg { width: 24px; height: auto; display: block; }
@keyframes cel-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  20% { transform: translate(-50%, -50%) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -58%) scale(1); } }
@keyframes cel-chip { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) rotate(calc(-1 * var(--a))); } 15% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-170px * var(--d))) rotate(calc(-1 * var(--a))) rotate(200deg); } }
@media (prefers-reduced-motion: reduce) { .celebrate { display: none; } }
/* Joncler's tips in practice: a small card over the table's top left corner (the top on phones) */
.table-layout:has(> .jtip) { position: relative; }
.jtip { position: absolute; z-index: 25; top: 10px; left: 10px; width: min(330px, 44%); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 12px 34px 12px 12px; border-radius: var(--r-lg); border: 1px solid #d4ab5e55; background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: 0 14px 34px -10px #000d;
  animation: jtip-in .25s ease-out; }
.jtip[hidden] { display: none; }
.jtip-face { line-height: 0; filter: drop-shadow(0 3px 6px #0008); }
.jtip-body { display: grid; gap: 4px; min-width: 0; }
.jtip-title { font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.jtip-hand { font-size: var(--fs-base); }
.jtip-body p { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ivory-2); }
.jtip-off { justify-self: start; font-size: var(--fs-xs); color: var(--muted); }
.jtip-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; }
.jtip-x svg { width: 15px; height: 15px; }
@keyframes jtip-in { from { opacity: 0; transform: translateY(-6px); } }
/* (phones: a small button in the top right corner until tapped, so it never hides the players) */
@media (max-width: 959px) {
  .jtip { top: 4px; left: 6px; right: 6px; width: auto; padding: 9px 32px 9px 9px; gap: 8px; z-index: 160; }
  .jtip-face svg { width: 34px; height: auto; }
  .jtip-body p { font-size: var(--fs-xs); }
  .jtip:not(.open) { left: auto; right: 6px; padding: 4px 12px 4px 4px; align-items: center; border-radius: var(--r-pill); cursor: pointer; }
  .jtip:not(.open) .jtip-face svg { width: 26px; }
  .jtip:not(.open) .jtip-body > :not(.jtip-title), .jtip:not(.open) .jtip-x { display: none; }
}
@media (prefers-reduced-motion: reduce) { .jtip { animation: none; } }
/* In person (phones): the hand and the game's code and version sit on the left of the felt, with the board */
.live-hand .lb-left { display: grid; justify-items: start; gap: 5px; min-width: 0; }
.live-hand .lb-left .lb-stamp { position: static; font-size: 9px; }
.live-hand.real-cards .live-board .lb-left { flex: 1; }
/* The results' Game stats: the HUD as two plain halves, label and figure (no run circle) */
.gs-hud { display: inline-flex; align-items: stretch; gap: 2px; width: 132px; height: 22px; margin: 0; position: static; }
.gs-hud .hud-seg { flex: 1 1 0; gap: 5px; font-size: var(--fs-xs); padding: 0 8px; justify-content: space-between; }
.gs-hud .hud-seg small { display: inline; font-size: 8.5px; letter-spacing: .06em; opacity: .75; }
.gs-hud .hud-seg:first-child { border-radius: 6px 0 0 6px; } .gs-hud .hud-seg:last-child { border-radius: 0 6px 6px 0; }
.gs-style { display: flex; align-items: center; gap: 10px; }
/* Play poker: Open games takes two columns, beside Practice */
@media (min-width: 700px) { .start-cards .open-card.wide { grid-column: span 2; } }
/* New game: where it's played, picked first, as three large choices */
.ng-where { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 16px; }
.ng-where-opt { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 4px; align-items: center; padding: 14px 16px; border-radius: var(--r-lg);
  border: 1.5px solid var(--line-2); background: #ffffff06; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.ng-where-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ng-where-opt:hover { border-color: #d4ab5e77; }
.ng-where-opt.on { border-color: var(--brass); background: linear-gradient(160deg, #d4ab5e22, #d4ab5e08); box-shadow: 0 0 0 1px var(--brass), 0 10px 26px -14px #d4ab5e88; }
.ng-where-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.ng-where-ic { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-md); color: var(--brass); background: #d4ab5e1a; }
.ng-where-ic svg { width: 22px; height: 22px; }
.ng-where-opt b { font-size: var(--fs-lg); }
.ng-where-opt small { grid-column: 2; color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
.ng-where-opt.on .ng-where-ic { color: var(--ink, #1a0f0c); background: var(--brass); }
/* Empty seats: a dashed "Open seat" where nobody sits, so a 6-max or 9-max table keeps its shape */
.seat.open-seat { z-index: 1; pointer-events: none; }
.seat.open-seat > :not(.open-ph) { display: none !important; }
.seat.open-seat .open-ph { font-size: clamp(9px, 1.05cqw, 11px); font-weight: 700; }
/* Other players: the avatar right above the plate, small face-down cards beside it (towards the middle of the table),
   which saves the height the cards took above the plate; cards face up (the showdown, or shown) grow over the avatar. */
.seat:not(.me) { --hcw: calc(var(--cw) * .62); --bigcw: calc(var(--cw) * 1.08); }
/* (the cards tuck behind the plate's top edge, as they always have; the plate stays in front) */
.seat:not(.me) .hole { position: absolute; bottom: calc(100% - var(--cw) * .55); left: calc(50% + var(--bw) * .16); margin: 0; min-height: 0; z-index: 0; --cw: var(--hcw); }
.seat.right:not(.me) .hole { left: auto; right: calc(50% + var(--bw) * .16); }
.seat:not(.me) .bust, .seat:not(.me):has(> .hole:empty) .bust { bottom: calc(100% - 2px); left: 50%; transform: translateX(-66%); }
.seat.right:not(.me) .bust, .seat.right:not(.me):has(> .hole:empty) .bust { transform: translateX(-34%); }
.seat:not(.me):has(> .hole:empty) .bust { transform: translateX(-50%); }
.seat:not(.me):has(> .bust[hidden]) .hole { left: 50%; right: auto; transform: translateX(-50%); }
.seat:not(.me).cards-up .hole { left: 50%; right: auto; transform: translateX(-50%); --cw: var(--bigcw); bottom: calc(100% - var(--cw) * .45); z-index: 0; }
/* (the speech bubble sits on top of the avatar) */
.seat:not(.me):has(> .bust:not([hidden])) .say, .seat:not(.me):has(> .hole:empty):has(> .bust:not([hidden])) .say { bottom: calc(100% + var(--bw) - 4px); }
.seat:not(.me) .bust { transition: opacity .25s ease; }
.seat:not(.me).cards-up .bust { transform: translateX(-50%); opacity: 0; }
/* 9-max: smaller plates and avatars, so nine seats fit round the table (phones most of all) */
.stage.nine .seat:not(.me) { scale: .86; }
.stage.nine.portrait .seat:not(.me) { scale: .77; }
.stage.nine.portrait .seat:not(.me) .plate { padding: 4px 8px 6px; }
.stage.nine.portrait .seat:not(.me) .name { max-width: 9ch; }
/* 9-max on phones: smaller bet pills, so nine bets fit round the board without touching */
.stage.nine.portrait .bet { gap: 3px; padding: 1px 6px 1px 3px; font-size: 10.5px; }
.stage.nine.portrait .bet .c3 { --w: 10px; }
.stage.nine.portrait .bet .piles { padding-bottom: 2px; gap: 1px; }
/* (an open seat you can invite someone to: tap it) */
.open-ph { display: none; font: inherit; }
.seat.open-seat.invitable { pointer-events: auto; }
.seat.open-seat .open-ph { display: grid; place-items: center; min-width: clamp(64px, 9cqw, 112px); padding: 7px 10px; border-radius: var(--r-md); border: 1px dashed #f5efe233; background: #0d080759; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; cursor: default; }
.seat.open-seat.invitable .open-ph { cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.seat.open-seat.invitable .open-ph:hover, .seat.open-seat.invitable .open-ph:focus-visible { border-color: var(--brass); color: var(--brass); }
/* Play poker: Host a game comes first and stands out: an oxblood card with a brass edge and glow */
.start-cards .host-card h3 { color: #fff; }
/* (like the competitive card's chip: fanned cards and the dealer button, img/host-cards.svg, cut off in the lower right) */
.start-cards .host-card { border: 1px solid #d4ab5ebf; background: radial-gradient(ellipse 110% 90% at 0% 0%, #d4ab5e40, transparent 58%), linear-gradient(150deg, #6b1a2b, #3a0f19 55%, #1f0f10); box-shadow: 0 0 0 1px #d4ab5e40, 0 0 34px -6px #d4ab5e59, 0 22px 48px -24px #000; position: relative; overflow: hidden; isolation: isolate; }
.start-cards .host-card::before { content: ''; position: absolute; pointer-events: none; z-index: -1; right: 0; bottom: -60px; width: 320px; aspect-ratio: 1;
  background: url('/img/host-cards.svg?v=3') center / contain no-repeat; translate: 22% 0; filter: drop-shadow(0 0 22px #d4ab5e33); }
.start-cards .host-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; border-radius: inherit;
  background: radial-gradient(ellipse 46% 30% at 86% 90%, #2a0b12e6, #2a0b12a0 45%, transparent 100%); }
@media (max-width: 959px) { .start-cards .host-card::before { width: 220px; bottom: -40px; opacity: .8; } .start-cards .host-card::after { content: none; } }
.start-cards .host-card h3 svg { width: 22px; height: 22px; }
.start-cards .host-card .meta { color: #f5efe2d9; }
.start-cards .host-card .btn.primary { box-shadow: 0 8px 22px -10px #d4ab5e99; }
/* Phones: the result in three short rows (trophy, name and chips won; the hand; its five cards), narrow enough to
   keep clear of the side seats' cards */
@media (max-width: 959px) {
  /* (no wider than about half the table: clear of the middle side seats' cards on 9-max) */
  .stage.portrait .result, .stage.roomy.portrait .result { width: max-content; max-width: min(50%, 210px); padding: 6px 12px; border-radius: var(--r-lg); font-size: var(--fs-xs); }
  .portrait .result .rs-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 6px; row-gap: 1px; text-align: center; }
  /* (the hand takes a row of its own, so its five cards wrap onto the next) */
  .portrait .result .rs-line > .rs-hand { flex-basis: 100%; }
  .portrait .result .rs-line + .rs-line { margin-top: 4px; padding-top: 4px; border-top: 1px solid #d4ab5e2e; }
}
/* Phones in a game: the back button keeps its place at the left, and the toolbar stays one row (the header is one row
   high): when Rebuy, Sit out and the tools don't all fit, the row scrolls sideways (Rebuy and Sit out first) */
@media (max-width: 959px) {
  .game-page:has(.table-layout):not(.live-screen-mode) .table-head { align-items: center; flex-wrap: nowrap; }
  .game-page:has(.table-layout):not(.live-screen-mode) .table-head > .row { flex: none; align-self: center; }
  .game-page:has(.table-layout):not(.live-screen-mode) .table-head .table-tools { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .game-page:has(.table-layout):not(.live-screen-mode) .table-head .table-tools > :first-child { margin-left: auto; }
  .game-page:has(.table-layout):not(.live-screen-mode) .table-head .table-tools > * { flex: none; }
  .game-page:has(.table-layout):not(.live-screen-mode) .table-head .table-tools .btn.small { padding-inline: 11px; }
}
/* Run it twice: the second board below the first (the two-runs rule for .board matches it too, as it's a .board) */
.stage.two-runs .board.board2 { top: 59%; }
/* (phones: both boards a little smaller and closer, clear of the side seats' cards) */
.stage.portrait.two-runs .board { top: 43%; --cw: clamp(22px, 9cqw, 48px); }
.stage.portrait.two-runs .board.board2 { top: 58.5%; }
/* Run it twice: each run's line in the result starts with its number */
.rs-run-no { display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; border: 1px solid #d4ab5e88; color: var(--brass); font-size: .8em; font-weight: 800; line-height: 1; }
.result .rs-run + .rs-run { margin-top: 3px; padding-top: 3px; border-top: 1px solid #d4ab5e2e; }
/* Run it twice after the flop or the turn: the shared cards show once, halfway between the rows (the first board's
   move down, the second's make room), and each row's own cards follow them; the rows are numbered at their right end */
.stage.two-runs .board:not(.board2) .slot.shared { transform: translateY(var(--run-shift, 0px)); position: relative; z-index: 2; }
.stage.two-runs .board2 .slot.shared { visibility: hidden; }
.stage.two-runs .board2::before { left: auto; right: calc(var(--cw) * -.55); }
.stage.two-runs .board:not(.board2)::after { content: "1"; position: absolute; right: calc(var(--cw) * -.55); top: 50%; transform: translateY(-50%); font-size: var(--fs-xs); font-weight: 700; color: var(--brass); }
/* (while the board is still turning over, Rebuy waits too: it would tell who lost) */
.game-page:has(.holding-result) .table-tools [data-rebuy] { display: none; }
/* (run twice: the result's line for the run whose winning hand is lit stands out; the other fades a little) */
.result.flipping .rs-run { transition: opacity .5s ease; }
.result.flipping .rs-run:not(.on) { opacity: .5; }
.board .card { transition: filter .5s ease, opacity .5s ease, box-shadow .5s ease; }

/* The run-it-twice vote: its time left as a thin bar, and how it ended, for a moment, once the last answer is in. */
.run-vote .rv-time { display: block; justify-self: stretch; height: 4px; border-radius: 2px; background: #ffffff1a; overflow: hidden; }
.run-vote .rv-time[hidden] { display: none; }
.run-vote .rv-time > i { display: block; height: 100%; background: var(--brass); transform-origin: left; transition: transform .1s linear; }
.run-vote .rv-time.low > i { background: var(--bad); }
.run-vote.said { animation: rv-said 2.8s ease both; }
@keyframes rv-said { 0% { opacity: 0; } 8%, 85% { opacity: 1; } 100% { opacity: 0; } }
/* (the pot stays over the boards should they ever meet) */
.stage.two-runs .pot { z-index: 4; }

/* Play page: the host card's fanned cards and the competitive card's chip at one size (each image fills its box),
   bigger, floating gently (out of step with each other); on phones too, a little smaller. */
.start-cards .host-card::before, .start-cards .quick-card::before { width: 360px; bottom: -112px; translate: 26% 0; display: block;
  animation: card-art-float 9s ease-in-out infinite; }
.start-cards .quick-card::before { animation-delay: -4.5s; }
@keyframes card-art-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(2.5deg); } }
@media (max-width: 959px) { .start-cards .host-card::before, .start-cards .quick-card::before { width: 260px; bottom: -60px; opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .start-cards .host-card::before, .start-cards .quick-card::before, .dash-start-card::before { animation: none; } }

/* Side pots: beside the main pot in the same pill, each after a thin line. */
.pot-sides { display: contents; }
.pot-side { display: inline-flex; align-items: center; gap: 6px; padding-left: 9px; border-left: 1px solid #f5efe233; }
.pot-sides:empty { display: none; }
.portrait .pot-side, .stage.nine .pot-side { gap: 4px; padding-left: 6px; }
/* (upright tables: the side pots on a second line under the main pot, so the pill stays as narrow as the board) */
.portrait .pot:has(.pot-side) { flex-wrap: wrap; justify-content: center; row-gap: 2px; border-radius: var(--r-lg); padding: 4px 12px; max-width: 72%; }
.portrait .pot-side:first-child { border-left: 0; padding-left: 0; }
/* (two side pots or more: they wrap in rows under the main pot, so the pill never runs off the felt) */
.pot:has(.pot-side ~ .pot-side) { flex-wrap: wrap; justify-content: center; row-gap: 2px; border-radius: var(--r-lg); padding: 4px 12px; max-width: min(56%, 480px); }
.pot:has(.pot-side ~ .pot-side) .pot-sides { display: flex; flex-wrap: wrap; flex-basis: 100%; justify-content: center; column-gap: 12px; row-gap: 1px; font-size: .88em; }
.pot:has(.pot-side ~ .pot-side) .pot-side { border-left: 0; padding-left: 0; }
.portrait .pot-sides { display: flex; flex-basis: 100%; justify-content: center; gap: 8px; font-size: .9em; flex-wrap: wrap; column-gap: 10px; row-gap: 1px; }
.portrait .pot:has(.pot-side ~ .pot-side) { max-width: 74%; }
/* (wide tables: the main pot on the first line with the side pots, smaller, so two lines hold them all) */
.pot-main { display: contents; }
.pot:has(.pot-side ~ .pot-side) .pot-main { display: inline-flex; align-items: center; gap: 8px; }
.stage:not(.portrait) .pot:has(.pot-side ~ .pot-side) { max-width: min(70%, 640px); font-size: clamp(11px, 1.35cqw, 14px); column-gap: 12px; }
.stage:not(.portrait) .pot:has(.pot-side ~ .pot-side) .pot-sides { display: contents; }
/* 9-max phones, two runs: each run's line without its five cards (the boards light them up in turn), so the result
   fits between the top seats and the boards */
.stage.portrait.nine.two-runs .result .rs-run .rs-cards { display: none; }
.stage.portrait.nine.two-runs .result .rs-line + .rs-line { margin-top: 3px; padding-top: 3px; }

/* In person: chip amounts (stacks, bets, the pot, wins) carry a chip in front, as on the online table. */
.lv-amt { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
.lv-amt svg.c3 { --w: .9em; flex: none; }
/* In person, the board: each card in its place (a wrapper that takes no room of its own), the winning hand lit once
   the hand is over, the rest dimmed. */
.lb-slot { display: contents; }
.live-board .card { transition: filter .5s ease, box-shadow .5s ease, translate .5s ease; }
/* Run it twice in person, as online: two rows from the moment it's agreed, the shared cards once beside them (between
   the rows), each row's own cards and its number at the end; the run whose winning hand is lit has its number filled.
   The middle screen's rows together are as tall as one board, so nothing below moves. */
.live-board { --cw2: calc(var(--cw) * .7); }
.live-screen .live-board { --cw2: calc((var(--cw) * 1.4 - 8px) / 2.8); }
.live-hand .lb-cards { --cw2: calc(var(--cw) * .7); }
.lb-two { --cw: var(--cw2); display: flex; align-items: center; justify-content: center; gap: 6px; }
.lb-shared, .lb-own { display: flex; gap: inherit; }
.live-screen .lb-two { gap: clamp(5px, .7vw, 10px); }
.lb-runs { display: grid; gap: 8px; }
.live-hand .lb-runs { gap: 4px; }
.lb-run { display: flex; align-items: center; gap: 6px; }
.lb-run-no { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #d4ab5e88; color: var(--brass);
  font: 800 11px/1 var(--sans); font-style: normal; transition: background .5s ease, color .5s ease; }
.lb-run.on .lb-run-no { background: var(--brass); color: var(--ink); }
.live-hand .lb-run-no { width: 15px; height: 15px; font-size: 9.5px; }
/* The middle screen's line under the board keeps its place while empty; the run-it-twice question sits in it with its
   time left, then how the vote ended, then each run's winner (the lit run's line stands out). */
.live-screen .live-result { min-height: 92px; align-content: center; }
.live-screen .live-result.empty { visibility: hidden; }
.lv-vote { display: grid; justify-items: center; gap: 5px; }
.lv-vote b { color: var(--brass); }
.lv-vote.said { animation: rv-said 2.8s ease both; }
.lv-vote .rv-time, .live-status .rv-time { display: block; height: 4px; border-radius: 2px; background: #ffffff1a; overflow: hidden; }
.lv-vote .rv-time { justify-self: stretch; width: min(280px, 80%); margin: 2px auto 0; }
.lv-vote .rv-time[hidden], .live-status .rv-time[hidden] { display: none; }
.lv-vote .rv-time > i, .live-status .rv-time > i { display: block; height: 100%; background: var(--brass); transform-origin: left; transition: transform .1s linear; }
.lv-vote .rv-time.low > i, .live-status .rv-time.low > i { background: var(--bad); }
.live-status { position: relative; }
.live-status .rv-time { position: absolute; left: 0; right: 0; bottom: -5px; height: 3px; }
.live-result.runs { gap: 6px; }
.lr-run { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; transition: opacity .5s ease; }
.live-result.runs .lr-run:not(.on) { opacity: .5; }
.lr-run > svg { width: 17px; height: 17px; color: var(--win); }
.live-result .lr-run b.lr-name { color: var(--text); }
.lr-run .lv-amt { color: var(--win); font-weight: 700; font-variant-numeric: tabular-nums; }
.lr-hand { color: var(--ivory-2); }
/* In person, the player tiles: every tile the same size, with the same rows (name, HUD, chips, cards on the middle
   screen, bet or last action, hand), each of a fixed height, so no tile grows, shrinks or moves during a hand. */
.lp { scroll-snap-align: start; align-content: start; }
.lp-head { height: 18px; }
.live-screen .lp-head { height: 22px; }
.lp-gap { visibility: hidden; }
.lp-stack { display: flex; align-items: center; height: 20px; white-space: nowrap; overflow: hidden; }
.live-screen .lp-stack { height: 24px; }
.lp-foot, .live-hand .lp-foot { display: flex; flex-wrap: nowrap; align-items: center; align-self: stretch; height: 26px; min-height: 0; overflow: hidden; }
.live-screen .lp-foot { height: 22px; }
.lp-foot > span { flex: none; }
.lp-foot .lp-cards.tiny { display: flex; gap: 2px; --cw: 17px; padding: 0; background: none; }
.lp-foot .lp-cards.tiny:has(.card:nth-child(3)) { --cw: 13px; }
.lp-foot .lp-cards.tiny:has(.card:nth-child(5)) { --cw: 10px; }
.lp-foot .lp-cards.tiny ~ .lp-won { flex: 0 1 auto; min-width: 0; padding: 0 4px; font-size: var(--fs-2xs); overflow: hidden; text-overflow: ellipsis; }
.lp-foot { gap: 4px; }
.live-screen .lp-cards { height: calc(var(--cw) * 1.4); min-height: 0; }
.lp-label { height: 18px; overflow: hidden; white-space: nowrap; }
.lp-label span { display: inline-block; padding: 0 6px; border-radius: var(--r-sm); font-size: var(--fs-2xs); line-height: 18px; background: #00000040; color: var(--ivory-2); }
/* (phones: three tiles across, whatever the names; more scroll sideways) */
.live-hand .lp { flex: none; width: max(100px, calc((100% - 16px) / 3)); min-width: 0; max-width: none; }
/* In person on wider screens: the toolbar has a row of its own under the game's name, so a button coming or going
   (Rebuy or Sit out between hands) never moves the table below. */
@media (min-width: 960px) {
  .game-page.live-mode .table-head { flex-wrap: wrap; align-items: flex-start; }
  .game-page.live-mode .table-head .table-tools { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; }
}
/* In person on a phone: the players' row snaps to its tiles; when it doesn't fit, dots under it say so (lit for the
   tiles in view, the one deciding in brass) and its edges fade where there's more. */
.live-hand .live-players { position: relative; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; overscroll-behavior-x: contain; }
.live-hand .live-players.more-r { mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
.live-hand .live-players.more-l { mask-image: linear-gradient(90deg, transparent, #000 30px); }
.live-hand .live-players.more-l.more-r { mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent); }
.lp-dots { display: flex; justify-content: center; align-items: center; gap: 6px; height: 6px; margin-top: -1px; }
.lp-dots[hidden] { display: none; }
.lp-dots i { width: 6px; height: 6px; border-radius: 3px; background: #ffffff2b; transition: background-color .2s ease, width .2s ease; }
.lp-dots i.on { background: var(--ivory-2); }
.lp-dots i.acting { width: 14px; background: var(--brass); }
/* Heads-up: the one opponent's tile is half the row, in the middle. */
.live-hand .live-players.hu { justify-content: center; }
.live-hand .live-players.hu > .lp { flex: 0 0 50%; max-width: none; }
/* An open seat: a dashed tile to tap to invite someone. */
.lp.open { font: inherit; color: var(--muted); text-align: left; cursor: pointer; background: none; border: 1px dashed #ffffff38; box-shadow: none; }
.lp.open:hover, .lp.open:focus-visible { border-color: var(--brass); color: var(--text); }
.lp.open .lp-name { font-weight: 600; }
.lp .lp-invite { display: flex; align-items: center; gap: 5px; color: inherit; font-size: var(--fs-sm); }
.lp-invite svg { width: 14px; height: 14px; flex: none; }
/* In person, a pot or a stack: short piles of its chips in front of the amount (as on the online table's plates). */
.lv-amt.piled .lv-piles { display: inline-flex; align-items: flex-end; gap: 2px; line-height: 0; }
.lv-amt.piled .lv-piles:empty { display: none; }
.lv-amt.piled .pile { display: inline-flex; }
.lv-amt.piled .c3 { --w: 14px; }
.lp-stack .lv-amt.piled .c3 { --w: 16px; }
.lb-pot .lv-amt.piled .c3, .lt-pot .lv-amt.piled .c3 { --w: 21px; }
/* Your cards always lie at the bottom edge, under the game column (also on wider screens). Peeling, they rise with the
   finger and the hint rises with them. */
.live-hand .live-mine.edge { --peek: calc(var(--cw) * 1.4 * .34); left: var(--edge-l, 0); right: auto; width: var(--edge-w, 100%); }
.live-hand .live-mine.edge.lifting .live-cards { transform: translateY(calc(var(--cw) * -1.4 * .72 * var(--peel, 0))); transition: none; }
.live-hand .live-mine.edge.lifting .live-hint { opacity: 1; bottom: calc(100% + var(--cw) * 1.4 * .72 * var(--peel, 0) + 6px); }
/* Small in the left corner: as on the right, mirrored. */
.lh-pop.corner.left { inset: auto auto calc(12px + env(safe-area-inset-bottom, 0px)) 10px; place-content: end start; justify-items: start; }
/* On wider screens, beside your cards in the game column, standing on the bottom edge so they're seen whole. */
@media (min-width: 960px) {
  .live-hand .live-mine > .lh-pop.corner { inset: auto 6px calc(8px + env(safe-area-inset-bottom, 0px)) auto; transform: none; }
  .live-hand .live-mine > .lh-pop.corner.left { inset: auto auto calc(8px + env(safe-area-inset-bottom, 0px)) 6px; }
}
/* (the middle screen is read from across the table: larger piles) */
.live-screen .lp-stack .lv-amt.piled .c3 { --w: 20px; }
.live-screen .lt-pot .lv-amt.piled .c3 { --w: 26px; }
/* The lobby's players: a long name (and username) is cut with "…" so the chips field keeps its place on one line. */
.lobby-players .title { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.lobby-players .title > * { flex: none; }
.lobby-players .title .lp-nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lobby-players .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lobby-players .chip-input { flex: none; }
.lobby-players .chip-input .input { width: 84px; }
@media (max-width: 520px) { .lobby-players .chip-input .input { width: 70px; padding-inline: 8px; } }
/* In person, the bet panel open: your cards at the bottom edge keep their size and still lift when held (the panel
   takes its room above them; the page scrolls on a short screen rather than the cards stepping aside). */
.live-hand.edge-mode:has(.live-raise:not([hidden])) .live-mine.edge .live-cards { --cw: inherit; }
/* A phone: who won sits in the space between the players and your buttons, in the middle of it. */
.live-hand .live-result { display: grid; justify-items: center; gap: 4px; margin-block: auto; padding: 10px 14px; text-align: center; border-radius: var(--r-lg);
  background: #00000033; border: 1px solid #d4ab5e33; animation: act-in .25s ease-out both; }
.live-hand .live-result[hidden] { display: none; }
.live-hand .live-result > b { font-size: var(--fs-lg); }
.live-hand .live-result > span { font-size: var(--fs-sm); color: var(--ivory-2); }
.live-hand .live-result .rs-cards { font-size: var(--fs-base); letter-spacing: .04em; }
.live-hand .live-result.runs { justify-items: stretch; }
/* A phone's tile with its cards shown: the cards cover all of it but the name, as large as they fit. */
.lp.cards-up .lp-show { position: absolute; left: 0; right: 0; top: 28px; bottom: 0; container-type: size; display: grid; place-items: center; padding: 2px 6px 6px;
  border-radius: 0 0 12px 12px; background: linear-gradient(#24170f, #1b110e); z-index: 1; }
.lp.cards-up .lp-show .lp-cards { --cw: min(calc((100cqw - 12px) / var(--n, 2) - 3px), calc((100cqh - 6px) / 1.4)); display: flex; gap: 3px; min-height: 0; }
.lp.cards-up .lp-show .card { animation: none; }
.lp.cards-up .lp-won { padding: 0 6px; border-radius: var(--r-sm); font-size: var(--fs-2xs); line-height: 18px; background: #00000040; color: var(--win); margin-left: auto; font-variant-numeric: tabular-nums; }
.lp.folded.cards-up { opacity: .85; }
/* The winning hand's cards stand out in the players' hands and yours too, the rest dims. */
.lp-cards.dim .card:not(.win), .live-cards.dim .card:not(.win), .lp-pop-cards.dim .card:not(.win) { filter: brightness(.55) saturate(.7); }
.live-cards .card.win, .lp-pop-cards .card.win { translate: 0 -6px; }
/* All in, the board running out: the tiles dim with the felt, as the seats do online. */
.live-players.drama .lp { animation: felt-dim 3.2s ease both; }
@media (prefers-reduced-motion: reduce) { .live-players.drama .lp { animation: none; } }
/* A big win in person: the banner and its chips over the felt, as online. */
.live-view { position: relative; }
.live-view > .celebrate { position: absolute; top: 30%; }
.live-hand > .celebrate { top: max(120px, 17%); } /* (over the felt, clear of the result below the players) */
.live-hand > .celebrate > b { font-size: clamp(30px, 10vw, 56px); }
/* The middle screen on a phone: as in person, the header is the back button and the tools in one row (no game name),
   so the view button is there to switch back to In person. */
@media (max-width: 959px) {
  .game-page.live-screen-mode .table-head { flex-wrap: nowrap; gap: 6px; }
  .game-page.live-screen-mode .table-head [data-name], .game-page.live-screen-mode .table-head [data-sub] { display: none; }
  .game-page.live-screen-mode .table-head > .row { flex: none; gap: 0; }
  /* (laid out as the In person view's: the tools start right after the back button, in one row that scrolls sideways,
     and Sit out is in Settings) */
  .game-page.live-screen-mode .table-head .table-tools { flex: 1 1 auto; width: auto; min-width: 0; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .game-page.live-screen-mode .table-head .table-tools > * { flex: none; }
  .game-page.live-screen-mode .table-head [data-sit-out] { display: none; }
}
/* A tile with its cards up: the rows under the cards (HUD, chips, bet) keep their room but don't show through. */
.lp.cards-up > .lp-hudpill, .lp.cards-up > .lp-hud, .lp.cards-up > .lp-stack, .lp.cards-up > .lp-foot { visibility: hidden; }
/* The phone's felt, a quarter taller. */
.live-hand .live-board { padding-block: 26px; }
@media (max-height: 720px) and (max-width: 959px) { .live-hand .live-board { padding-block: 21px; } }
/* A phone: the space between the players and your buttons holds a faded Poncler mark, and who won over it at the end. */
.live-hand .lv-middle { display: grid; place-items: center; margin-block: 6px; }
.live-hand .lv-middle > * { grid-area: 1 / 1; }
.lv-mark { display: grid; justify-items: center; gap: 8px; pointer-events: none; user-select: none; transition: opacity .3s ease; }
/* (engraved: cut into the dark surface, a shade darker than it, with a fine light edge below and a dark one above) */
.lv-mark img { width: clamp(46px, 15vw, 80px); height: auto; opacity: .55;
  filter: brightness(0) drop-shadow(0 1px 0 #ffffff1c) drop-shadow(0 -1px 0 #00000080); }
.lv-mark span { font: 400 clamp(14px, 4.2vw, 19px)/1 var(--display); letter-spacing: .1em; color: #0a0504; opacity: .8;
  text-shadow: 0 1px 0 #ffffff1f, 0 -1px 0 #000000a0; }
.lv-middle:has(.live-result:not([hidden])) .lv-mark { opacity: 0; }
@media (max-height: 640px) { .lv-mark img { width: 40px; } .lv-mark { gap: 5px; } }
/* Real cards: the middle takes the room (the engraved mark in it, as with the app's cards) and your empty card spot
   none, so the status line sits right above your buttons. */
.live-hand.real-cards .lv-middle { flex: 1 1 0; }
.live-hand.real-cards .live-mine:not(:has(.live-cards > *)) { display: none; }
/* All in with live odds: each player's chance to win, on their shown cards (a phone), beside their name (the middle
   screen) and beside your hand's name. */
.lv-eq { display: inline-block; padding: 0 7px; border-radius: var(--r-pill); background: #0d0807e6; border: 1px solid #d4ab5e88; color: var(--brass);
  font: 800 12px/18px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-show > .lv-eq { position: absolute; right: 5px; top: 3px; z-index: 2; }
.lp-head .lv-eq { margin-left: auto; }
.live-screen .lp-head .lv-eq { font-size: var(--fs-base); line-height: 22px; padding: 0 9px; }
.live-hint .lv-eq { margin-left: 6px; vertical-align: 1px; }
/* A phone: the view is the screen's height, so the bet panel opening takes room from the space in the middle (the
   Poncler mark steps aside) instead of making the page longer. */
.live-hand.edge-mode { height: 100%; }
.live-hand .lv-middle { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.live-hand:has(.live-raise:not([hidden])) .lv-mark { opacity: 0; }
.live-hand:has(.live-raise:not([hidden])) .lv-middle { margin-block: 0; }
/* The middle screen's felt: the hand and blinds at the top left, the pot and full screen at the top right, the board
   large in the middle under them. */
.live-screen .live-board { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head info" "cards cards"; align-items: start; row-gap: clamp(8px, 1.4vw, 18px); }
.live-screen .live-board > .lb-head { grid-area: head; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: clamp(14px, 1.5vw, 19px); color: #ffffffc7; }
.live-screen .live-board > .lb-info { grid-area: info; display: flex; align-items: center; gap: 12px; }
.live-screen .live-board > .lb-info .lb-pot b { font-size: clamp(22px, 3vw, 36px); }
.live-screen .live-board > .lb-info .lb-pot small { font-size: clamp(13px, 1.4vw, 17px); }
.live-screen .live-board > .lb-info .icon-btn { background: #00000040; }
.live-screen .live-board > .lb-cards { grid-area: cards; display: flex; justify-content: center; gap: clamp(6px, 1vw, 14px); min-width: 0; }
.live-screen .live-board > .lb-head .lb-hand { font-size: inherit; color: inherit; }
/* (the bet panel open: the dots and the hint step aside so the buttons keep clear of your cards; held, the hand's name still shows) */
.live-hand:has(.live-raise:not([hidden])) .lp-dots { display: none; }
.live-hand:has(.live-raise:not([hidden])) .live-mine.edge:not(.lifted):not(.lifting) .live-hint { opacity: 0; }
.live-hand.edge-mode:has(.live-raise:not([hidden])) .live-raise { padding-block: 8px; gap: 6px; }
/* In person, out of chips in a cash game: Rebuy, Sit out and Leave game side by side (Rebuy and Leave once sitting out). */
.live-hand .live-out { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 8px; }
.live-hand .live-out.chosen { grid-template-columns: 1.6fr 1fr; }
.live-hand .live-out .btn { min-height: 52px; padding-inline: 8px; }
/* A phone: Share and Bookmark under the result, for a hand you were in. */
.live-hand .lv-after { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.live-hand .lv-after .btn svg { width: 15px; height: 15px; }
.live-hand .lv-after [data-bookmark-hand].on { color: var(--brass); border-color: #d4ab5e88; }
/* Pixel Art (--card-pix: 1): the suits are drawn as blocky pixel masks (--pix-s/h/d/c from designs.js) in the ink's
   colour, over the text glyph, which steps aside. Other decks keep the glyph (the mask layer is see-through). */
.card .ix i { display: block; position: relative; }
.card .ix i, .card .pip { color: color-mix(in srgb, transparent calc(var(--card-pix, 0) * 100%), var(--ink-now)); }
.card { --suit-now: var(--suit-s); --inv: calc(var(--card-inv, 0) * 100%); --ink-now: color-mix(in srgb, #fbf7ef var(--inv), var(--suit-now)); text-shadow: var(--card-glow, none); --pix-mask: var(--pix-s, none); }
.card.s1 { --pix-mask: var(--pix-h, none); } .card.s2 { --pix-mask: var(--pix-d, none); } .card.s3 { --pix-mask: var(--pix-c, none); }
.card .ix i::after, .card .pip::after { content: ''; position: absolute; inset: 4% 2%; opacity: var(--card-pix, 0); background: var(--ink-now);
  -webkit-mask: var(--pix-mask) center / contain no-repeat; mask: var(--pix-mask) center / contain no-repeat; pointer-events: none; }
/* (the joker: its star a pixel star too, on the pip and in the corner; its JKR stays text, in the deck's bitmap font) */
.card.joker { --suit-now: var(--suit-j); --pix-mask: var(--pix-j, none); }
.card.joker .ix i { color: var(--ink-now); font-family: var(--card-jfont, var(--sans)); }
.card.joker .ix i::after { content: none; }
.card.joker .ix b { position: relative; color: color-mix(in srgb, transparent calc(var(--card-pix, 0) * 100%), var(--ink-now)); }
.card.joker .ix b::after { content: ''; position: absolute; inset: 6% 0; opacity: var(--card-pix, 0); background: var(--ink-now);
  -webkit-mask: var(--pix-mask) center / contain no-repeat; mask: var(--pix-mask) center / contain no-repeat; pointer-events: none; }
.card.back .ix i::after, .card.back .pip::after { content: none; }
/* In person, live odds: a sheet that slides up from the bottom while Odds is held (your finger stays on the button, so
   the sheet itself can't be touched), and goes when it's let go. */
.live-hand .live-odds { position: fixed; inset: auto 0 0 0; z-index: 80; display: block; padding: 0; pointer-events: none; place-items: initial; }
.live-hand .live-odds[hidden] { display: none; }
.live-hand .live-odds .lo-sheet { width: min(520px, 100%); margin: 0 auto; max-height: min(72dvh, 620px); overflow: hidden; border-radius: 22px 22px 0 0;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -18px 40px -12px #000d; animation: lo-up .22s cubic-bezier(.2, .8, .3, 1) both;
  background: linear-gradient(#17211a, #111612); }
.lo-grip { display: block; width: 42px; height: 4px; margin: 0 auto 2px; border-radius: 2px; background: #ffffff2e; }
@keyframes lo-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .live-hand .live-odds .lo-sheet { animation: none; } }
.lo-all { display: grid; gap: 10px; }
.lo-outs { display: flex; flex-wrap: wrap; gap: 3px; --cw: 24px; }
.lo-outs .card { animation: none; }
.lo-hist { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--fs-sm); color: var(--muted); }
.lo-hist b { color: var(--text); font-variant-numeric: tabular-nums; }
.lo-hist i svg { width: 12px; height: 12px; vertical-align: -1px; opacity: .6; }
.lo-gto { border-top: 1px solid var(--line); padding-top: 8px; }
.lo-gto h4 { margin: 0 0 4px; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* Your turn with live odds: your chance beside what calling needs. */
.live-status .lo-eq { color: var(--brass); }
.live-status .lo-eq.good { color: var(--good); }
.live-status .lo-eq.bad { color: var(--bad); }
/* A bet or win's four chips beside its amount (fourChips): as tall as the text. */
.lv-amt .pile { display: inline-flex; flex: none; line-height: 0; }
.lv-amt .pile svg.c3 { --w: 1.15em; }
/* Entering the cards when running it twice: the board as at the table (shared cards, then two numbered rows). */
.ce-two { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ce-two .ce-shared { flex-wrap: nowrap; }
.ce-runs { display: grid; gap: 6px; }
.ce-run { display: flex; align-items: center; gap: 6px; }
.ce-run .ce-slots { flex-wrap: nowrap; }
.ce-run .lb-run-no { flex: none; }
/* History: each game's ID beside its name, faded (the ID Analyze and the felt show). */
.rp-gid { font: 600 .78em/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); opacity: .7; letter-spacing: .02em; }
/* The lobby's host: who can join (anyone, the invite link, a group). */
.lobby-access { display: grid; gap: 8px; margin: 4px 0 2px; }
.lobby-access .seg { display: flex; flex-wrap: wrap; }
.lobby-access .seg-btn { flex: 1 1 140px; display: grid; gap: 2px; text-align: left; padding: 9px 12px; border: 0; border-radius: var(--r-md); background: none; color: var(--text); font: inherit; cursor: pointer; }
.lobby-access .seg-btn small { color: var(--muted); font-size: var(--fs-xs); }
.lobby-access .seg-btn.on { background: #d4ab5e22; box-shadow: inset 0 0 0 1px var(--brass); }
.lobby-access .seg-btn.on b { color: var(--brass); }
.lobby-access .seg-btn:disabled { opacity: .45; cursor: default; }
.lobby-access .seg-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
/* What the host changed, in the pop-up for the others. */
.rule-changes { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
/* The live odds: the button to their guide, and the guide's parts with their samples (odds-help.js). */
.os-head-r { gap: 6px; align-items: center; flex: none; }
.odds-panel .os-help { width: 26px; height: 26px; }
.odds-panel .os-help svg { width: 15px; height: 15px; }
.odds-help { display: grid; gap: 18px; }
.oh-part { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 8px 22px; align-items: start; }
.oh-part h3 { grid-column: 1 / -1; margin: 0; }
.oh-part ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--fs-md); line-height: 1.5; }
.oh-part:not(:has(.oh-sample)) ul { grid-column: 1 / -1; }
.oh-sample.odds-panel { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--panel); pointer-events: none; }
@media (max-width: 720px) { .oh-part { grid-template-columns: minmax(0, 1fr); } }
/* Play poker's Open tables: sitting at a 6-max or 9-max cash table, one line. */
.open-sit { align-items: center; gap: 8px; flex-wrap: nowrap; }
.open-sit .muted { margin-right: auto; font-size: var(--fs-sm); }

/* Phones, History: the line under a replay's table keeps one height (two lines at most), so the table doesn't
   shrink and grow as the steps' texts get longer or shorter. */
@media (max-width: 959px) {
  .hist-viewing .rp-play .controls { flex: none; height: 64px; overflow: hidden; }
  .hist-viewing .rp-play .controls .status { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}

/* Your plate on a computer: as wide as the HUD and a tag (Away, All-in) need beside your name, and your chips in it
   under your name, the piles left of the amount, as in every other plate; Show my cards just right of the plate. */
/* (its width: --plate-w, as every plate's) */
.stage:not(.portrait) .seat.me .name { flex: 0 0 auto; }
.stage:not(.portrait) .seat.me .chipstack { position: relative; left: auto; top: auto; transform: none; margin: 3px 0 0; display: flex; align-items: flex-end; justify-content: center; gap: 6px; min-width: 0; }
.stage:not(.portrait) .seat.me .chipstack .piles { padding-bottom: 2px; gap: 2px; }
.stage:not(.portrait) .seat.me .chipstack .c3 { --w: clamp(11px, 1.35cqw, 14px); }
.stage:not(.portrait) .seat.me .chipstack .stack { padding: 0; background: none; font-size: clamp(12px, 1.5cqw, 15px); }
.stage:not(.portrait) .seat.me .stack-lbl { display: none; }
.stage:not(.portrait) .seat.me .chipstack .show-btn { left: 100%; bottom: 50%; transform: translate(16px, 50%); margin: 0; }
.stage:not(.portrait) .seat.me .chipstack .show-btn:active:not(:disabled) { transform: translate(16px, calc(50% + 1px)); }

/* Phones, History: a replay's table never squeezed below what its seats need (a 9-max table most of all); on a short
   screen the page scrolls instead. */
@media (max-width: 959px) {
  .hist-viewing .rp-play { min-height: calc(112vw + 210px); }
  .hist-viewing .rp-play:has(.stage.nine) { min-height: calc(140vw + 210px); }
}

/* Computers: the same slim pill as on phones, a little bigger. */
@media (min-width: 960px) {
  .stage { --hud-w: 78px; }
  .plate .hud { height: 15px; }
  .plate .hud-seg { font-size: 10.5px; }
  .plate .hud.has-run .hud-seg:first-child { padding: 0 12px 0 5px; }
  .plate .hud.has-run .hud-seg:last-child { padding: 0 5px 0 12px; }
  .plate .hud-run { width: 19px; height: 19px; }
  .plate .hud-run svg { width: 12px; height: 12px; }
}

/* Play poker: Open tables with a blue accent (its icon, pill and table art; a blue tint in the corner, the rest dark like
   the competitive card) and a poker table floating in its corner (like Host a game's cards and the competitive card's chip). */
.start-cards .open-tables { position: relative; overflow: hidden; isolation: isolate; border-color: #5b8ff04d;
  background: radial-gradient(ellipse 90% 100% at 0% 0%, #1c2a4a, #1a110e 70%); }
.start-cards .open-tables h3 svg { color: #8fb2f5; }
.start-cards .open-tables .meta { color: #e6ecf8d9; }
.start-cards .open-tables::before { content: ''; position: absolute; pointer-events: none; z-index: -1; right: 0; bottom: -112px; width: 360px; aspect-ratio: 1;
  background: url('/img/open-table.svg?v=2') center / contain no-repeat; translate: 26% 0; filter: drop-shadow(0 0 22px #5b8ff033);
  animation: card-art-float 9s ease-in-out infinite; animation-delay: -2.2s; opacity: .55; }
.start-cards .open-tables::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; border-radius: inherit;
  background: radial-gradient(ellipse 46% 30% at 86% 90%, #1a110ef0, #1a110eb0 45%, transparent 100%); }
@media (max-width: 959px) { .start-cards .open-tables::before { width: 260px; bottom: -60px; opacity: .45; } .start-cards .open-tables::after { content: none; } }
@media (prefers-reduced-motion: reduce) { .start-cards .open-tables::before { animation: none; } }

/* Open games (/play/open-games): the filters in a row, the games as a table */
.og-filters { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: start; }
.og-filters .field { margin: 0; }
.og-filters .og-q { flex: 1 1 220px; }
.og-table td { vertical-align: middle; }
.og-table .og-act { text-align: right; white-space: nowrap; }
.og-table .og-act > * + * { margin-left: 6px; }
.og-table .og-act > * { vertical-align: middle; }
.og-table .og-rules .pill { vertical-align: 1px; }
.og-count { margin: 10px 0 0; font-size: var(--fs-sm); }
.og-table .open-seats { display: inline-flex; align-items: center; gap: 4px; }
.og-table .open-seats svg { width: 14px; height: 14px; }
/* Open games on Play poker: beside Find a game the list takes the room the row leaves it (its own height doesn't count,
   so the row is as tall as Find a game) and shows the games that fit whole; More sits at the bottom. */
.open-card .open-list.fit { flex: 1 1 0; min-height: calc(3 * 54px + 2 * 6px + 2px); max-height: none; overflow: hidden; contain: size; padding-bottom: 2px; }
.open-card .open-more { margin-top: auto; align-items: center; }
/* Open games on Play poker: every row one height (name, a line under it, small buttons), and room for three at least. */
.open-card .open-row { box-sizing: border-box; height: 54px; padding: 0 10px; flex: none; }

/* The scorekeeper's screen (keeper-view.js): the hand and the board on top, what to enter now beside the players */
.keeper-view { display: grid; gap: 14px; align-content: start; height: 100%; overflow: auto; padding-bottom: 12px; }
.kv-top { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: var(--fs-sm); color: var(--muted); }
.kv-top b { color: var(--text); }
.kv-hand { font-weight: 700; color: var(--text); margin-right: auto; }
.kv-board { --cw: 54px; display: flex; gap: 8px; justify-content: center; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: radial-gradient(ellipse at center, var(--felt-hi), var(--felt-deep)); }
.kv-main { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.kv-task { display: grid; gap: 10px; }
.kv-q { margin: 0; font-size: var(--fs-lg); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kv-line { margin: 0; }
.kv-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kv-acts .btn { min-height: 52px; }
.kv-raise { display: grid; gap: 8px; }
.kv-raise .link-btn { justify-self: start; }
.kv-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.kv-pick { justify-content: flex-start; }
.kv-rows { margin: 0; }
.kv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kv-p { display: grid; grid-template-columns: 30px auto auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-md); }
.kv-p.acting { background: #d4ab5e1a; box-shadow: inset 0 0 0 1px var(--brass); }
.kv-p.out { opacity: .55; }
.kv-pos { font-size: var(--fs-2xs); font-weight: 700; color: var(--brass); text-align: center; }
.kv-nm { display: grid; min-width: 0; }
.kv-nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-nm small { color: var(--muted); font-size: var(--fs-xs); }
.kv-bet { color: var(--brass); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.kv-stack { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 959px) {
  .kv-main { grid-template-columns: minmax(0, 1fr); }
  .kv-board { --cw: 44px; padding: 12px; gap: 6px; }
}
/* A member a scorekeeper added: is that player them? */
.claim-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; border-color: var(--brass); }
.claim-bar > svg { color: var(--brass); flex: none; width: 22px; height: 22px; }
.claim-bar p { flex: 1; margin: 0; min-width: 220px; }
/* The scorekeeper's lobby: adding players by name */
.kl-add { gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0; }
.ng-keeper { margin-bottom: 16px; }
.keeper-lobby { grid-template-columns: minmax(0, var(--read-w, 980px)); }
/* (the claim bar is a row of the game page only while it shows: the table keeps the rest of the height) */
.game-page > [data-claim]:empty { display: none; }
.game-page:has(.table-layout):has(> [data-claim]:not(:empty)) { grid-template-rows: auto auto minmax(0, 1fr); }
.game-page > [data-claim] .claim-bar { margin-bottom: 0; }
.kv-left-h { margin: 14px 8px 6px; }
.kv-rebuy { gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.kv-standings td, .kv-standings th { font-size: var(--fs-md); }
.kv-standings tr.out { opacity: .6; }
/* The scorekeeper's add field: a name, with members suggested under it (the Friends page's search) */
.kl-add { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 4px; }
.kl-add .user-search { width: auto; flex: 1; }
.kl-h { margin: 14px 0 0; }
.kl-help { margin: 0 0 12px; }
.kl-sugg { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.kl-sugg.on, .kl-sugg:hover { background: #ffffff0d; }
/* In person: holding your cards never selects the words around them (the hint went blue on a long press) */
.live-mine, .live-mine * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* In person: each player's tile has its rows centred */
.lp { justify-items: center; text-align: center; }
.lp-head, .lp-stack, .lp-foot, .live-hand .lp-foot { justify-content: center; }
.lp-head { max-width: 100%; }
/* The scorekeeper's lobby: a long name or note shortens, never pushing the chips aside */
.keeper-lobby .kl-who { min-width: 0; }
.keeper-lobby .kl-who .title, .keeper-lobby .kl-who .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The HUD's rectangle: centred on a tile, a little room on either side of the run's mark */
.lp-hudpill { justify-self: center; }
.lp-hudpill .hud-seg { min-width: 26px; padding: 0 7px; }
/* In person: the dealer and blind tag sits in the tile's top right corner, the name centred */
.lp .lp-pos { position: absolute; top: 5px; right: 5px; }
.lp-head { padding-inline: 20px; box-sizing: border-box; width: 100%; }
/* (the numbers sit in the middle of the rectangle, whatever line height the plate around it has) */
.lp-hudpill .hud-seg { display: flex; align-items: center; justify-content: center; height: 100%; line-height: 1; }
.lp-hudpill .lp-run { height: 100%; }
/* The online table on a phone: a lower rectangle for the smaller plates */
@media (max-width: 959px) {
  .plate .lp-hudpill { height: 13px; }
  .plate .lp-hudpill .hud-seg { min-width: 22px; padding: 0 5px; font-size: 9px; }
  .plate .lp-hudpill .lp-run { width: 15px; }
  .plate .lp-hudpill .lp-run svg { width: 9px; height: 9px; }
}
/* The HUD's rectangle sits in the same box as the action pill (Fold, Check, Call…), which takes its place for a moment
   after an action, so the plate never changes size */
.seat.just-acted .plate-hud { display: none; }
.plate .plate-hud { align-items: center; height: 19px; margin-top: 5px; }
@media (max-width: 959px) { .plate .plate-hud { height: 16px; margin: 1px 0 -2px; } }

/* GTO 2.0 in the odds widget (gto2SlideHTML): the classic mix under the adjusted one, each player's answer */
.g2-classic { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 6px; font-size: var(--fs-2xs); }
.g2-classic .gto-mix { height: 6px; opacity: .75; }
.g2-head { margin: 8px 0 2px; font-size: var(--fs-xs); }
.g2-players { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.g2-players li { display: grid; gap: 4px; padding: 6px 8px; border-radius: var(--r-sm); background: #ffffff08; border: 1px solid var(--line); }
.g2-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--fs-xs); }
.g2-who .pill { font-size: var(--fs-2xs); padding: 1px 6px; }
.g2-ans { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; font-size: var(--fs-2xs); color: var(--ivory-2); }
.g2-ans .gto-mix { height: 6px; }
.g2-ans b { color: var(--text); }
.g2-none { margin: 0; font-size: var(--fs-2xs); }

/* Phones: with Chat beside your stack, the toolbar's Chat goes */
@media (max-width: 959px) {
  .game-page:has(.seat.me .seat-chat) .table-tools [data-sheet-open="chat"] { display: none; }
  .game-page:has(.seat.me .seat-odds) .table-tools .odds-sheet-btn { display: none; }
}

/* Your hand in a word (Pair, Flush…) while you play, on your cards, resting on the top edge of your nameplate, slim so the
   cards' suits still show (handPill in table-view.js) */
.hand-pill { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 30%); z-index: 4; padding: 0 8px; line-height: 1.45; border-radius: var(--r-pill);
  background: #0d0807e6; border: 1px solid var(--good); box-shadow: 0 0 10px #7cc49566; color: var(--good); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; white-space: nowrap; pointer-events: none; } /* (the green of the cards that make your hand: .card.live) */

/* The emotes: tap your own avatar and pick something to say at the table (play.js) */
.emote-pop { position: fixed; z-index: 95; display: grid; gap: 6px; padding: 8px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid #d4ab5e88; box-shadow: 0 16px 40px -12px #000; animation: lh-pop-in .15s ease-out both; }
.emote-pop .btn { justify-content: flex-start; }
.emote-pop .emote-edit { justify-self: end; padding: 2px 4px; }
/* Your seat on the action bar (seatOnBar in table-view.js): in a game the table sits at the bottom of its space, just
   above the bar, and your seat moves by what's left (--me-dy) so your plate stays --bar-gap above the bar; your avatar
   reaches down past it, behind the bar. */
.game-page .table-wrap { place-items: end center; }
.stage { --bar-gap: 6px; }
.stage.on-bar .seat.me { translate: 0 var(--me-dy, 0px); }
.stage.on-bar .seat.me .bust { bottom: calc(-1 * var(--bar-gap) - 2px); }
/* (the bar's background lets light through: the avatar and its glow end at the bar's top edge) */
.stage.on-bar .seat.me .bust { clip-path: inset(-80px -80px 2px -80px); }
.game-page .controls { position: relative; z-index: 1; }
/* The HUD (Pro) as a strip across the top of the name plate, edge to edge inside its rounded corners: VPIP on the left,
   the run's mark in a dark cell between, aggression on the right; the name and chips below it as on every plate, and
   the action row (Fold, Check…) at the bottom stays, so a plate with the HUD is only the strip taller. */
.stage { --strip-h: 18px; }
@media (max-width: 959px) { .stage { --strip-h: 14px; } }
.plate > .plate-hud { position: absolute; top: 0; left: 0; right: 0; height: var(--strip-h); margin: 0; border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0; overflow: hidden; }
.seat.just-acted .plate > .plate-hud:not([hidden]) { display: flex; }
.seat.has-hud .plate { padding-top: calc(var(--strip-h) + 4px); }
.plate > .plate-hud .lp-hudpill { display: flex; width: 100%; height: 100%; margin: 0; gap: 0; border-radius: 0; transform: none; }
.plate > .plate-hud .hud-seg { flex: 1 1 0; min-width: 0; padding: 0; border-radius: 0; font-size: 11px; }
.plate > .plate-hud .hud-seg.bx { background: #ffffff14; }
.plate > .plate-hud .lp-run { flex: none; width: 22px; height: 100%; background: #1c1614; }
.plate > .plate-hud .lp-run svg { width: 12px; height: 12px; }
@media (max-width: 959px) {
  .plate > .plate-hud .hud-seg { font-size: 9px; }
  .plate > .plate-hud .lp-run { width: 16px; }
  .plate > .plate-hud .lp-run svg { width: 9px; height: 9px; }
}
/* A new action (Call, Raise…) shows for a moment in the strip's middle cell, widened, instead of the run's mark; plates
   with the HUD have no action row at the bottom */
.seat.has-hud .plate-act { display: none !important; }
.plate > .plate-hud .lp-run { transition: width .18s ease-out; }
.plate > .plate-hud .run-act { display: none; font: 800 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.plate > .plate-hud .run-act.fold { color: var(--muted); }
.seat.just-acted .plate > .plate-hud .lp-run { width: 60px; }
.seat.just-acted .plate > .plate-hud .lp-run > :not(.run-act) { display: none; }
.seat.just-acted .plate > .plate-hud .run-act { display: block; animation: act-in .18s ease-out; }
@media (max-width: 959px) {
  .seat.just-acted .plate > .plate-hud .lp-run { width: 44px; }
  .plate > .plate-hud .run-act { font-size: 8px; letter-spacing: .04em; }
}
/* (with the HUD strip the hand pill sits just above the plate, clear of the strip) */
.seat.has-hud .hand-pill { transform: translate(-50%, -3px); }
/* All in, or the hand's result: the chip number gives way to its pill but keeps its line, at no width and unseen, so
   the plate keeps its height */
.seat.netting .plate-stack > span, .seat.netting .chipstack > .stack { display: block; width: 0; padding: 0; margin: 0 -2px; overflow: hidden; visibility: hidden; }
/* While a player decides: three dots where a move shows (the HUD strip's middle cell, widened, or the action row of a
   plate without the HUD), never under the plate; nor does any move or All-in (only the hand's result) */
.seat .badge:not(.win):not(.lose) { display: none; }
.plate > .plate-hud .run-think { display: none; gap: 3px; align-items: center; }
.plate-think { display: none; }
.plate > .plate-hud .run-think i, .plate-think i { width: 4px; height: 4px; border-radius: 50%; background: var(--brass); animation: blink 1s infinite both; }
.plate > .plate-hud .run-think i:nth-child(2), .plate-think i:nth-child(2) { animation-delay: .15s; }
.plate > .plate-hud .run-think i:nth-child(3), .plate-think i:nth-child(3) { animation-delay: .3s; }
.seat.deciding .plate > .plate-hud .lp-run { width: 60px; }
.seat.deciding .plate > .plate-hud .lp-run > :not(.run-think) { display: none; }
.seat.deciding .plate > .plate-hud .run-think { display: flex; }
.seat.deciding:not(.has-hud) .plate-act { display: none; }
.seat.deciding:not(.has-hud) .plate-think { display: flex; align-items: center; justify-content: center; gap: 4px; width: var(--hud-w); height: 19px; margin: 5px auto 0;
  border-radius: var(--r-pill); background: #0d0807; border: 1px solid #ffffff2a; }
@media (max-width: 959px) {
  .seat.deciding .plate > .plate-hud .lp-run { width: 44px; }
  .plate > .plate-hud .run-think i { width: 3px; height: 3px; }
  .seat.deciding:not(.has-hud) .plate-think { height: 16px; margin: 1px auto -2px; }
}
/* In a game the toolbar's buttons sit at the right, the back button alone at the left (a spacer takes the room
   between, and none once the buttons need it all, so the toolbar still scrolls sideways) */
.game-page .table-tools::before { content: ''; flex: 1 0 0; }
/* Phones: a practice player's type (Rock, Maniac…) sits on its own small line under the name, so the name keeps
   the plate's width */
@media (max-width: 959px) {
  .seat .row1:has(> .tag:not(:empty)) { flex-wrap: wrap; row-gap: 0; }
  .seat .row1 > .tag:not(:empty) { flex-basis: 100%; font-size: 8px; line-height: 1.15; letter-spacing: .12em; text-align: center; }
}
/* (a hundredth of the game page's held height, for sizes that would otherwise follow the window's height (vh) and so
   change when the keyboard opens: holdHeight in ui.js) */
.game-page { --gvh: calc(var(--game-h, 100vh) / 100); }
/* Real cards: your stack (and what you've put in this round) large in the middle of your phone, in the Poncler mark's
   place; the hand's result and the raise panel take it over as they do the mark (renderHand in live-view.js) */
.lv-middle:has(.rc-mid:not([hidden])) .lv-mark { opacity: 0; }
.lv-middle:has(.live-result:not([hidden])) .rc-mid, .live-hand:has(.live-raise:not([hidden])) .rc-mid { opacity: 0; }
.rc-mid { transition: opacity .3s ease; }
.rc-chips { display: flex; align-items: flex-end; justify-content: center; gap: clamp(20px, 8vw, 48px); padding: 6px 0; }
.rc-stack, .rc-bet { display: grid; justify-items: center; gap: 4px; }
.rc-chips small { font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rc-amt { display: inline-flex; align-items: flex-end; gap: 8px; }
.rc-amt .c3 { --w: clamp(26px, min(9vw, 5dvh), 40px); }
.rc-piles { display: inline-flex; align-items: flex-end; gap: 3px; line-height: 0; }
.rc-stack b { font-size: clamp(24px, min(8vw, 4.6dvh), 36px); font-variant-numeric: tabular-nums; line-height: 1; }
.rc-bet .c3 { --w: clamp(20px, min(7vw, 4dvh), 30px); }
.rc-bet b { font-size: clamp(18px, min(6vw, 3.4dvh), 26px); color: var(--brass); font-variant-numeric: tabular-nums; line-height: 1; }
/* Name plates, finished (the same colours, sizes and places, one style for every plate): a soft sheen across the
   top, an edge lit from above (a warm hairline, a highlight along the top, a shade along the bottom), a softer and
   deeper shadow and crisper names; the plate whose turn it is breathes its brass glow */
.plate {
  background: radial-gradient(120% 70% at 50% -10%, #ffffff12, transparent 60%), linear-gradient(#2d1e19, #190f0c);
  border-color: #e8c99a26;
  box-shadow: inset 0 1px 0 #ffffff1c, inset 0 -1px 0 #0000005c, 0 1px 2px #000a, 0 14px 26px -12px #000e;
}
.seat.folded .plate { background: linear-gradient(#2d1e1999, #190f0c99); border-color: #ffffff0d; box-shadow: inset 0 1px 0 #ffffff0d, 0 10px 20px -12px #000a; }
.seat .name { color: #f4ecdc; letter-spacing: .01em; text-shadow: 0 1px 1px #000c; }
.seat.acting .plate { box-shadow: inset 0 1px 0 #ffffff24, 0 0 0 1px var(--brass), 0 0 26px #d4ab5e55, 0 14px 26px -12px #000e; animation: plate-breathe 2.4s ease-in-out infinite; }
@keyframes plate-breathe { 50% { box-shadow: inset 0 1px 0 #ffffff24, 0 0 0 1px var(--brass), 0 0 36px #d4ab5e80, 0 14px 26px -12px #000e; } }
.seat.winner .plate { box-shadow: inset 0 1px 0 #ffffff24, 0 0 0 2px var(--win), 0 0 40px #ecc87466, 0 14px 26px -12px #000e; }
@media (prefers-reduced-motion: reduce) { .seat.acting .plate { animation: none; } }
/* The HUD strip, glassy: its place and shape as before (edge to edge across the plate's top), its cells keeping their
   colours under a gloss (light above the middle, a shade below it), the middle cell smoky glass, a glint along the
   top and a shade along the bottom */
.plate > .plate-hud::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(#ffffff38, #ffffff0a 48%, transparent 52%, #0000001f); box-shadow: inset 0 1px 0 #ffffff5c, inset 0 -1px 0 #0000004d; }
.plate > .plate-hud .hud-seg { text-shadow: 0 1px 0 #ffffff33; }
.plate > .plate-hud .hud-seg.b3 { text-shadow: 0 1px 1px #0006; }
.plate > .plate-hud .lp-run { background: #140d0bd9; }

/* The HUD in a player's pop-up as a glass pill, the plates' glass: the two halves rounded at the ends under the same
   gloss (light above the middle, a shade below it), a glint along their top and a shade along their bottom, and the
   run's badge a glass bead between them */
.pc-hud { filter: drop-shadow(0 1px 3px #0009); }
.pc-hud .hud-seg { background-image: linear-gradient(#ffffff38, #ffffff0a 48%, transparent 52%, #0000001f); box-shadow: inset 0 1px 0 #ffffff5c, inset 0 -1px 0 #0000004d; text-shadow: 0 1px 0 #ffffff33; }
.pc-hud .hud-seg.b3 { text-shadow: 0 1px 1px #0006; }
.pc-hud .hud-seg:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.pc-hud .hud-seg:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.pc-hud.few .hud-seg { background-image: linear-gradient(#ffffff38, #ffffff0a 48%, transparent 52%, #0000001f), repeating-linear-gradient(135deg, #ffffff22 0 4px, transparent 4px 8px); }
/* (the run's mark in a square glass cell of its own between the halves, as in the plates' strip, not a round badge
   over them; a hot or cold run tints it from inside) */
.pc-hud { gap: 0; }
.pc-hud .hud-run { position: static; transform: none; flex: none; width: 34px; height: 100%; border-radius: 0;
  background: linear-gradient(#ffffff38, #ffffff0a 48%, transparent 52%, #0000001f) #140d0bd9; box-shadow: inset 0 1px 0 #ffffff5c, inset 0 -1px 0 #0000004d; }
.pc-hud .hud-run svg { width: 16px; height: 16px; }
.pc-hud .hud-run.run-blaze, .pc-hud .hud-run.run-hot { box-shadow: inset 0 1px 0 #ffffff5c, inset 0 -1px 0 #0000004d, inset 0 0 10px currentColor; }
.pc-hud .hud-run.run-cold { box-shadow: inset 0 1px 0 #ffffff5c, inset 0 -1px 0 #0000004d, inset 0 0 8px #9fd4ff66; }
.pc-hud.has-run .hud-seg:first-child { padding: 0 10px; }
.pc-hud.has-run .hud-seg:last-child { padding: 0 10px; }
.pc-hud .hud-seg.bx, .plate > .plate-hud .hud-seg.bx { text-shadow: none; }

/* The felt's mark (logo, name, address, game code) engraved into the cloth: the felt's own colour much darker, a
   light edge below and a dark one above as if pressed in. The words in solid colours mixed from the felt (a see-through
   fill would let its own edges show through); the logo black at half strength over the felt, its edges first. */
.felt-mark { opacity: 1; color: color-mix(in srgb, var(--tfelt) 42%, #000);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--tfelt) 62%, #fff), 0 -1px 0 color-mix(in srgb, var(--tfelt) 15%, #000); }
.felt-mark img { filter: brightness(0) drop-shadow(0 1.5px 0 #ffffffb3) drop-shadow(0 -1px 0 #000) opacity(.6); }
.felt-mark em, .felt-mark i { opacity: 1; }
.stage .felt-mark.playing { opacity: .85; }

/* Play poker → Open games: the rows always sit together at the top; with too few games to fill the card the room is
   left empty below them (the list's grid stretched its rows apart to fill the card's height) */
.open-card .open-list { align-content: start; }