/* Trey Poker — the card room of a stern-wheel riverboat at night, lit by one oil lamp hanging over the table (the key
   light is above the table's centre: the felt is brightest under it, the cards' paper is brightest at their top edges,
   the chips' top faces catch it, the rail's top edge carries a highlight). The admin's background is the saloon wall
   with mouldings, a bevelled wainscot, arched windows on the night river and two brass lamps (skin.js scene); a half-
   moon card table — the dealer's straight side on top, the curved side toward the player — with a mahogany rail, a
   routed groove and a brass inlay round red velvet felt (or card-room baize); ivory cards with velvet backs; clay chip
   stacks on the Pair Bonus diamond and the Ante and Play circles; a clay chip for the main button and a mahogany rail
   along the HUD. Printing on the felt is gilt or cream in the display face, sentence case (>= 4.6:1, skin.js themeMap
   checks the lamp-lit and the shaded felt); text off the table takes its colours from themeMap (>= 4.6:1 on every
   ground it sits on). Motion: transform and opacity only; no filters on anything that moves. */
:root{
  --display:"Gravitas One",Georgia,serif; --ui:"Fira Sans",system-ui,sans-serif;
  --wood:#3B2116; --wood-hi:#6B3F27; --wood-lo:#1F0F08; --brass:#C9A04E;
  --felt:var(--velvet,#6E1530); --felt-lo:color-mix(in srgb,var(--felt) 70%,#000); --felt-lit:color-mix(in srgb,var(--felt) 85%,#FFD9A0);
  --prim-radius:999px; --radius:10px; --radius-sm:8px;
  --plaque:linear-gradient(180deg,#F6E1A6,#DDB866 46%,#B48A3A 54%,#E2C47E);--plaque-ink:#2A1408;
}
/* derived felt tokens resolve where they are declared: the variant declares them again from its own felt */
body[data-variant="baize"]{--felt:var(--baize,#1C5A3B);--felt-ink:var(--felt-ink-b);
  --felt-lo:color-mix(in srgb,var(--felt) 70%,#000);--felt-lit:color-mix(in srgb,var(--felt) 85%,#FFD9A0)}
.tp-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* ---- the scene (skin.js): wall, lamplight, wainscot, mouldings, windows on the river, the paddle wheel, lamps;
   one static grain layer over it (never on the cards) ---- */
.scene{background:var(--wall,var(--bg))}
.scene::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-size:160px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.scene .tp-scene{width:100%;height:100%}
.tps-wt{stop-color:var(--wall-top,var(--wall))}.tps-w{stop-color:var(--wall)}.tps-wl{stop-color:var(--wall-lo,var(--wall))}
.tps-n{stop-color:var(--wain)}.tps-nl{stop-color:var(--wain-lo,var(--wain))}
.tps-mh{stop-color:var(--mould-hi,var(--mould))}.tps-m{stop-color:var(--mould)}.tps-ml{stop-color:var(--mould-lo,var(--mould))}
.tps-f{stop-color:var(--flame,#FFD98A)}.tps-st{stop-color:var(--sky-top,var(--sky))}.tps-s{stop-color:var(--sky)}.tps-mo{stop-color:var(--moon)}
.tps-rh{stop-color:var(--river-hi,var(--river))}.tps-r{stop-color:var(--river)}
.tp-bev-l{fill:none;stroke:var(--mould-hi,var(--mould));stroke-width:2;opacity:.32}
.tp-bev-d{fill:none;stroke:#000;stroke-width:3;opacity:.3}
.tp-mould-sh{fill:none;stroke:#000;stroke-width:4;opacity:.22}
.tp-moon{fill:var(--moon)}.tp-bank{fill:var(--bank)}.tp-bankf{fill:var(--bank-far,var(--bank))}
.tp-glint{stroke:var(--moon);stroke-width:2.5;stroke-linecap:round;opacity:.42;fill:none}
.tp-frame{fill:none;stroke:var(--mould);stroke-width:6}
.tp-frame-sh{fill:none;stroke:#000;stroke-width:13;opacity:.3}
.tp-wheel{color:var(--paddle);animation:tp-turn 60s linear infinite}
@keyframes tp-turn{to{transform:rotate(360deg)}}
.tp-sconce{fill:var(--mould-lo,var(--mould));stroke:var(--mould);stroke-width:1.5}
.tp-sconce-hi{fill:none;stroke:var(--mould-hi,var(--mould));stroke-width:1.5;opacity:.8}
.tp-chimney{stroke:var(--mould-hi,var(--mould));stroke-width:1;stroke-opacity:.5}
.tp-flame{fill:var(--flame,#FFD98A)}.tp-core{fill:#FFF8E6}
body.bg-plain .scene .tp-windows,body.bg-plain .scene .tp-lamp{display:none}
body.still .tp-wheel{animation:none}

/* ---- header, HUD (a mahogany rail with a brass inlay), the main button (a clay chip) ---- */
.logo h1{font-family:var(--display);font-weight:400;color:var(--gilt);letter-spacing:.04em;text-shadow:var(--title-shadow,0 1px 0 rgb(0 0 0 / .4),0 3px 14px rgb(0 0 0 / .35))}
.ibtn,.pm{width:44px;height:44px}
.ibtn{border-color:color-mix(in srgb,var(--gilt) 50%,transparent)}
.hud{position:relative;border:0;border-radius:6px 6px 14px 14px;background:var(--hud-bg);box-shadow:0 14px 28px -6px rgb(0 0 0 / .5);padding-top:17px}
.hud::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;border-radius:6px 6px 0 0;pointer-events:none;
  background:linear-gradient(180deg,var(--wood-hi),var(--wood) 42%,var(--wood-lo));box-shadow:0 1px 0 color-mix(in srgb,var(--brass) 70%,transparent),0 2px 0 rgb(0 0 0 / .3)}
.meter b.num{font-family:var(--ui);font-weight:700}
.pm{border-radius:50%}
.spin.tprim{color:var(--chip-ink);border:4px dashed color-mix(in srgb,var(--chip-edge) 80%,transparent);outline:1.5px solid color-mix(in srgb,var(--chip-edge) 45%,transparent);outline-offset:-10px;
  background:radial-gradient(130% 100% at 50% 0%,var(--chip-hi,var(--chip)),var(--chip) 55%,color-mix(in srgb,var(--chip) 84%,#000));
  font-family:var(--display);font-weight:400;letter-spacing:.03em;font-size:clamp(17px,1.7vw,21px);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .28),0 3px 0 -1px color-mix(in srgb,var(--chip) 58%,#000),0 6px 0 -2px color-mix(in srgb,var(--chip) 44%,#000),0 9px 0 -3px color-mix(in srgb,var(--chip) 32%,#000),0 16px 18px -6px rgb(0 0 0 / .55);
  margin-bottom:9px}
/* the chip's printed inner ring is an outline: keyboard focus replaces it with the shell's ring */
.spin.tprim:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.spin.tprim:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 2px 4px rgb(0 0 0 / .3),0 2px 0 -1px color-mix(in srgb,var(--chip) 58%,#000),0 4px 0 -2px color-mix(in srgb,var(--chip) 44%,#000),0 8px 12px -4px rgb(0 0 0 / .5)}
.tact{border-radius:999px;font-family:var(--ui);font-weight:700;letter-spacing:.01em;border-width:1.5px}
/* the result pill sits just below the table: positioned above it, so the table's drop shadow does not dim its ground */
.table-game .message:not(:empty){position:relative;z-index:1;background:var(--msg-bg);border-radius:999px;padding:3px 16px;box-shadow:inset 0 0 0 1px var(--line)}
.table-game .message b{color:var(--gilt)}
.tstrip li{font-family:var(--ui)}

/* ---- the board fills the stage ---- */
.table-game .frame{max-width:1120px}
.table-game .board.tboard{flex:1 1 0;align-items:stretch;min-height:0}
.tp{position:relative;width:100%;height:100%;min-height:0;display:flex;justify-content:center;color:var(--felt-text)}
/* the half-moon table: a straight dealer's side, a curved players' side; the mahogany rail is its border (lit along its
   top edge by the lamp), a routed groove runs along the rail, a brass inlay and a dark seam separate rail and felt */
.tp-table{position:relative;flex:1 1 auto;max-width:1080px;min-width:0;display:flex;
  border:calc(var(--rail) * .55) solid transparent;border-top-width:8px;border-radius:16px 16px 50% 50%/16px 16px var(--curve,30%) var(--curve,30%);
  background:linear-gradient(180deg,rgb(255 226 184 / .2),transparent 7px) border-box,radial-gradient(ellipse 70% 55% at 50% 0%,var(--wood-hi),transparent 75%) border-box,linear-gradient(180deg,var(--wood),var(--wood-lo)) border-box;
  box-shadow:0 22px 34px -8px rgb(0 0 0 / .6),0 0 0 1px rgb(0 0 0 / .45)}
.tp-table::after{content:"";position:absolute;inset:calc(var(--rail) * -.3);border:1px solid rgb(0 0 0 / .4);border-top:0;border-radius:inherit;pointer-events:none;box-shadow:0 1px 0 rgb(255 226 184 / .12)}
.tp-felt{position:relative;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:space-evenly;gap:var(--g);padding:var(--pad) 10px var(--bottom);
  border-radius:10px 10px 50% 50%/10px 10px var(--curve,30%) var(--curve,30%);background-color:var(--felt);overflow:hidden;
  background-image:radial-gradient(ellipse 58% 62% at 50% 24%,var(--felt-lit),transparent 75%),radial-gradient(ellipse 110% 95% at 50% 32%,transparent 58%,rgb(0 0 0 / .3)),
    repeating-linear-gradient(0deg,rgb(255 255 255 / .02) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgb(0 0 0 / .045) 0 1px,transparent 1px 3px);
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--brass) 75%,transparent),0 0 0 3px rgb(0 0 0 / .4),inset 0 12px 22px rgb(0 0 0 / .32),inset 0 -6px 16px rgb(0 0 0 / .22)}

/* a hand: its label (left), its three cards (centre), the deck or its tag (right) */
.tp-hand{display:grid;grid-template-columns:var(--side) auto var(--side);grid-template-areas:"label cards side";align-items:center;justify-content:center;column-gap:var(--g)}
.tp-lcell{grid-area:label}.tp-cards{grid-area:cards}.tp-side{grid-area:side}
.tp-label{min-width:0;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.tp-label h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(14px,1.55vw,19px);letter-spacing:.02em;color:var(--felt-ink);line-height:1.1}
.tp-name{margin:0;font-weight:700;font-size:clamp(12px,1.45vw,17px);line-height:1.2;color:var(--felt-text);overflow-wrap:anywhere}
.tp-side{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.tp-tag{margin:0;max-width:100%;padding:3px 10px;border-radius:999px;font-size:clamp(11px,1.2vw,14px);font-weight:700;line-height:1.2;border:1px solid color-mix(in srgb,currentColor 70%,transparent);color:var(--felt-text);background:rgb(0 0 0 / .3)}
.tp-tag.advice.play,.tp-tag.q{border-color:var(--glow)}
.tp-tag.nq{border-style:dashed}
.tp-cards{display:flex;gap:var(--g)}
/* the card boxes printed on the felt */
.tp-slot{position:relative;display:block;width:var(--cw);height:calc(var(--cw) * 1.4);border-radius:calc(var(--cw) * .075);border:1px solid color-mix(in srgb,var(--felt-ink) 34%,transparent);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--felt-ink) 7%,transparent)}
/* a card: the shadow is on each face (it turns with the card in the flip and hides with its face), no filter */
.tp-card{position:absolute;inset:-1px;perspective:700px;transition:transform var(--t-slow,360ms) var(--ease-out,ease-out)}
.tp-flip{position:absolute;inset:0;transform-style:preserve-3d}
.tp-flip.up{transform:rotateY(180deg)}
.tp-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:calc(var(--cw) * .075);
  box-shadow:0 1px 1.5px rgb(0 0 0 / .4),0 5px 12px -3px rgb(0 0 0 / .5);transition:box-shadow var(--t-slow,360ms) var(--ease-std,ease)}
.tp-face::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#1A0610;opacity:0;pointer-events:none;transition:opacity var(--t-slow,360ms) var(--ease-std,ease)}
.tp-front{transform:rotateY(180deg)}
.tp-face svg{display:block;width:100%;height:100%}
/* the winning hand rises a little into the lamplight with a gilt edge; a losing or folded hand falls into shadow */
.tp-hand.won .tp-card{transform:translateY(calc(var(--cw) * -.04))}
.tp-hand.won .tp-face{box-shadow:0 0 0 1.5px var(--glow),0 0 18px 1px color-mix(in srgb,var(--glow) 50%,transparent),0 8px 16px -4px rgb(0 0 0 / .55)}
.tp-hand.won .tp-name{color:var(--felt-ink)}
.tp-hand.lost .tp-face::after,.tp-hand.folded .tp-face::after{opacity:.36}
/* the dealer's deck (right of the dealer's cards) and the chip rack (wide tables) */
.tp-deck{position:relative;width:calc(var(--cw) * .62);height:calc(var(--cw) * .87);min-width:28px;min-height:39px}
.tp-deck i{position:absolute;inset:0;border-radius:calc(var(--cw) * .05);background:#E8DCC2;box-shadow:0 1px 2px rgb(0 0 0 / .45)}
.tp-deck i:nth-child(1){transform:translate(3px,3px)}.tp-deck i:nth-child(2){transform:translate(1.5px,1.5px);background:#F1E7D2}
.tp-deck i svg{display:block;width:100%;height:100%}
.tp-rack{display:none;gap:2px;align-items:flex-end}
.tp-rack i{display:block;width:calc(var(--cw) * .36)}
.tp-rack svg{display:block;width:100%;height:auto}
.tp[data-wide="1"] .tp-rack{display:flex}

/* the printed line across the felt (between two short gilt rules), then the verdict on a gilt plaque */
.tp-verdict{flex:none;height:var(--verdict);display:flex;align-items:center;justify-content:center;text-align:center;min-width:0}
.tp-verdict .short{display:none}
.tp[data-print="short"] .tp-verdict .long{display:none}.tp[data-print="short"] .tp-verdict .short{display:inline}
.tp-verdict span{font-family:var(--display);font-size:clamp(12px,1.45vw,17px);letter-spacing:.02em;color:var(--felt-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.5;padding:0 clamp(30px,4vw,52px);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--felt-ink) 70%,transparent)) left center/clamp(22px,3vw,40px) 1px no-repeat,linear-gradient(90deg,color-mix(in srgb,var(--felt-ink) 70%,transparent),transparent) right center/clamp(22px,3vw,40px) 1px no-repeat}
.tp-verdict b{font-family:var(--display);font-weight:400;font-size:clamp(14px,1.9vw,22px);letter-spacing:.03em;padding:3px 20px;border-radius:999px;white-space:nowrap}
.tp-verdict.won b{background:var(--plaque);color:var(--plaque-ink);box-shadow:inset 0 1px 0 rgb(255 255 255 / .55),inset 0 -1px 0 rgb(0 0 0 / .25),0 3px 8px -2px rgb(0 0 0 / .55)}
.tp-verdict.lost b,.tp-verdict.fold b{background:rgb(0 0 0 / .5);color:var(--felt-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--felt-text) 45%,transparent)}
.tp-verdict.tie b{color:var(--felt-ink);box-shadow:inset 0 0 0 1.5px var(--felt-ink);background:rgb(0 0 0 / .32)}

/* the betting spots: Pair Bonus (a diamond), Ante (a circle), Play (a double circle), printed in gilt; pay tables beside */
.tp-row{flex:none;display:flex;justify-content:center;align-items:flex-end}
.tp-lcell{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:12px}
.tp-rcell{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px}
.tp-rcell .tp-paysR{margin-left:auto}
.tp-paysL,.tp-paysR{display:none;flex:none}
.tp[data-wide="1"] .tp-paysL,.tp[data-wide="1"] .tp-paysR{display:block}
.tp[data-wide="1"] .tp-player .tp-lcell{justify-content:space-between}
.tp-pays{border:1px solid color-mix(in srgb,var(--felt-ink) 55%,transparent);border-radius:6px;padding:6px 12px 7px;color:var(--felt-text);background:rgb(0 0 0 / .2);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--felt-ink) 9%,transparent)}
.tp-pays h3{margin:0 0 3px;font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:.02em;color:var(--felt-ink);text-align:center}
.tp-pays dl{margin:0;display:grid;grid-template-columns:auto auto;column-gap:14px;font-size:13px;line-height:1.45}
.tp-pays dt{font-weight:600}.tp-pays dd{margin:0;text-align:right;font-weight:700;color:var(--felt-ink);font-variant-numeric:tabular-nums}
.tp-spots{display:flex;gap:calc(var(--g) * 2 + 6px);justify-content:center;align-items:flex-end}
.tp-spot{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;margin:0;border:0;background:none;color:var(--felt-ink);font:inherit;min-width:44px}
button.tp-spot{cursor:pointer}
button.tp-spot[aria-disabled="true"]{cursor:default}
.tp-ring{position:relative;display:block;width:var(--sp);height:var(--sp)}
.tp-ring::before{content:"";position:absolute;inset:0;border:2px solid color-mix(in srgb,var(--felt-ink) 88%,transparent);border-radius:50%;background:rgb(0 0 0 / .14);
  box-shadow:inset 0 0 0 4px rgb(0 0 0 / .06),inset 0 0 0 5px color-mix(in srgb,var(--felt-ink) 28%,transparent);transition:border-color var(--t-fast,140ms) var(--ease-std,ease)}
.tp-spot[data-spot="pairBonus"] .tp-ring::before{inset:13%;border-radius:6px;transform:rotate(45deg)}
.tp-spot[data-spot="play"] .tp-ring::before{box-shadow:inset 0 0 0 4px var(--felt),inset 0 0 0 5.5px var(--felt-ink)}
.tp-spot.on .tp-ring::before{border-color:var(--felt-text)}
button.tp-spot:not([aria-disabled="true"]):hover .tp-ring::before{border-color:var(--glow)}
.tp-stack{position:absolute;left:50%;bottom:12%;width:72%;transform:translateX(-50%);display:flex;justify-content:center;align-items:flex-end}
.tp-stack svg{display:block;width:100%;height:auto}
.tp-stack>svg{flex:none}
.tp-pay{position:absolute;left:62%;bottom:0;width:86%}
.tp-pay svg{width:100%;height:auto}
.tp-sname{font-family:var(--display);font-size:clamp(12px,1.15vw,14px);letter-spacing:.02em;line-height:1;white-space:nowrap;color:var(--felt-ink)}
.tp-amt{position:absolute;top:6%;left:50%;transform:translateX(-50%);min-width:22px;padding:1px 6px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.3;text-align:center;font-variant-numeric:tabular-nums;background:var(--felt-lo);color:var(--felt-text);box-shadow:0 0 0 1px color-mix(in srgb,var(--felt-ink) 60%,transparent)}
.tp-amt:empty{display:none}
.tp-spot.marked .tp-amt{display:none}
.tp-mark{position:absolute;top:calc(var(--sp) * .04);left:50%;transform:translateX(-50%);padding:2px 10px;border-radius:999px;font-size:13px;font-weight:700;line-height:1.25;white-space:nowrap;text-align:center;font-variant-numeric:tabular-nums;background:rgb(0 0 0 / .6);color:var(--felt-text);z-index:2}
.tp-mark small{display:block;font-size:11px;font-weight:700}
.tp-spot.won .tp-mark{background:var(--plaque);color:var(--plaque-ink);box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),0 2px 6px -1px rgb(0 0 0 / .5)}
/* a lost bet is struck through; an Ante bonus paid beside it (its <small> badge) is not */
.tp-spot.lost .tp-mark>span{text-decoration:line-through;opacity:.85}

/* the Pair Bonus − / + beside its spot (hidden during a hand) */
.tp-pbgrp{display:flex;align-items:flex-start;gap:4px}
.tp-step{flex:none;width:44px;height:44px;margin-top:calc((var(--sp) - 44px) / 2);border-radius:50%;border:1px solid color-mix(in srgb,var(--felt-ink) 65%,transparent);background:rgb(0 0 0 / .3);color:var(--felt-text);font-size:22px;font-weight:700;line-height:1;display:grid;place-items:center;padding:0;
  transition:border-color var(--t-fast,140ms) var(--ease-std,ease),transform var(--t-press,90ms) var(--ease-out,ease-out)}
.tp-step:disabled{opacity:.4}
.tp-step:hover:not(:disabled){border-color:var(--glow)}
.tp-step:active:not(:disabled){transform:translateY(1px)}
.tp.busy .tp-step{visibility:hidden}
.tp[data-narrow="1"] .tp-step{display:none}

/* rules panel */
.tp-rt{width:100%;border-collapse:collapse;margin:8px 0;font-size:14px}
.tp-rt caption{text-align:left;font-family:var(--display);font-weight:400;font-size:16px;padding:4px 0;color:var(--gilt)}
.tp-rt th,.tp-rt td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left}
.tp-rt td{font-weight:700;font-variant-numeric:tabular-nums}
.tp-rt2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 16px}

/* big wins: clay chips thrown up from the table */
#tpChips{position:fixed;inset:0;pointer-events:none;z-index:45;overflow:hidden;perspective:800px}
.tp-flychip{position:absolute;left:0;top:0;display:block;will-change:transform}
.tp-flychip svg{display:block;width:100%;height:100%}

/* narrow tables: compact labels (the UI face below 14 px: the display face's hairlines vanish when small) */
.tp[data-narrow="1"] .tp-felt{padding-left:6px;padding-right:6px}
.tp[data-narrow="1"] .tp-label h2{font-size:14px}
.tp[data-narrow="1"][data-arr="side"] .tp-label h2{font-family:var(--ui);font-weight:600;font-size:clamp(11px,3.2vw,12px);letter-spacing:.01em}
.tp[data-narrow="1"] .tp-name{font-size:12px}
.tp[data-narrow="1"] .tp-tag{font-size:11px;padding:2px 7px}
/* small phones, labels beside the cards: the tags are plain lines with an accent rule (no room for a pill) */
.tp[data-narrow="1"][data-arr="side"] .tp-tag{border:0;border-left:2px solid currentColor;border-radius:0;background:none;padding:0 0 0 5px;line-height:1.25}
.tp[data-narrow="1"][data-arr="side"] .tp-tag.advice.play,.tp[data-narrow="1"][data-arr="side"] .tp-tag.q{border-left-color:var(--glow)}
.tp[data-narrow="1"] .tp-mark{font-size:12px;padding:1px 7px}
.tp[data-narrow="1"] .tp-amt{font-size:11px}
.tp[data-narrow="1"] .tp-sname{font-size:12px}
.tp-deckrow{display:flex;align-items:flex-end;gap:10px}

/* stack (tall phones): a label row above the dealer's cards and below the player's; duo (phones on their side): the two
   hands side by side, each with its label row on top, and the printed line and the spots between them */
.tp[data-arr="stack"] .tp-hand,.tp[data-arr="duo"] .tp-hand{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label side" "cards cards";row-gap:4px;
  width:calc(var(--cw) * 3 + var(--g) * 2);margin:0 auto;justify-content:stretch}
.tp[data-arr="stack"] .tp-player{grid-template-areas:"cards cards" "label side"}
.tp[data-arr="stack"] .tp-lcell,.tp[data-arr="duo"] .tp-lcell{justify-content:flex-start;min-height:26px}
.tp[data-arr="stack"] .tp-label,.tp[data-arr="duo"] .tp-label{align-items:flex-start;gap:0;text-align:left;min-width:0;max-width:100%}
.tp[data-arr="stack"] .tp-label h2,.tp[data-arr="duo"] .tp-label h2{font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.01em}
.tp[data-arr="stack"] .tp-name,.tp[data-arr="duo"] .tp-name{font-size:13px;max-width:100%}
.tp[data-arr="stack"] .tp-name,.tp[data-arr="duo"] .tp-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp[data-arr="stack"] .tp-side,.tp[data-arr="duo"] .tp-side{flex-direction:row;align-items:center;justify-content:flex-end;gap:6px}
.tp[data-arr="stack"] .tp-deck,.tp[data-arr="duo"] .tp-deck{width:22px;height:31px;min-width:0;min-height:0}
.tp[data-arr="stack"] .tp-deckrow,.tp[data-arr="duo"] .tp-deckrow{order:2}
.tp[data-arr="duo"] .tp-felt{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;grid-template-areas:"dealer verdict player" "dealer row player";align-content:center;column-gap:calc(var(--g) * 2)}
.tp[data-arr="duo"] .tp-dealer{grid-area:dealer}.tp[data-arr="duo"] .tp-player{grid-area:player}
.tp[data-arr="duo"] .tp-verdict{grid-area:verdict;align-self:end}.tp[data-arr="duo"] .tp-row{grid-area:row;margin-top:0;align-self:start}

/* the round's buttons never add a row to the HUD, so the table keeps its size through a hand: on wide screens they sit
   in the HUD's one row beside the main button; on phones they take the stake's place while a hand is open (the spots
   on the felt show the stakes) */
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .hud.thud{grid-template-columns:1fr auto 1fr auto auto;grid-template-areas:"bal bet win acts spin"}
  body.lefty .hud.thud{grid-template-columns:auto auto 1fr auto 1fr;grid-template-areas:"spin acts bal bet win"}
}
@media (max-width:860px),(max-aspect-ratio:4/5){
  body.in-round .hud.thud{grid-template-areas:"bal win" "acts spin"}
  body.in-round.lefty .hud.thud{grid-template-areas:"win bal" "spin acts"}
  body.in-round .thud>.betctl{display:none}
  body.in-round .thud>.tacts{justify-content:flex-start;align-self:center}
  body.in-round.lefty .thud>.tacts{justify-content:flex-end}
}
/* phones on their side: the HUD in one row (the round's buttons beside the main one), no results strip */
@media (max-height:500px) and (min-aspect-ratio:3/2){
  .hud.thud,body.in-round .hud.thud{grid-template-columns:auto auto auto 1fr auto;grid-template-areas:"bal bet win acts spin";row-gap:0;padding-top:12px;padding-bottom:6px}
  body.lefty .hud.thud,body.in-round.lefty .hud.thud{grid-template-columns:auto 1fr auto auto auto;grid-template-areas:"spin acts bal bet win"}
  body.in-round .thud>.betctl{display:flex}
  .thud>.tacts{justify-content:flex-end}
  .thud>.win{text-align:left}
  .table-game .tstrip{display:none}
  .spin.tprim{height:50px;margin-bottom:8px}
}
/* reduced motion: no turning wheel, no rising hand */
@media (prefers-reduced-motion:reduce){.tp-wheel{animation:none}.tp-card,.tp-face,.tp-face::after{transition:none}}
body.still .tp-card,body.still .tp-face,body.still .tp-face::after{transition:none}