/* Use the same surfaces and controls as training, session history and ranges. */
.hr-view {
  --hr-border: #e1e1e0; --hr-paper: #fcfcfa; --hr-soft: #fafaf9;
  --hr-ink: #45474b; --hr-muted: #85878a; --hr-accent: #55575b;
  --hr-accent-soft: #e9e9e8; --hr-stage: #f3f3ef;
  --hr-seat: #ffffff; --hr-felt: #fafaf9;
  --hr-rail: #dededd; --hr-felt-ink: #45474b; --hr-felt-muted: #85878a;
  --hr-play: #626468; --hr-play-ink: #f4f4f2; --hr-focus: #a7a8aa;
  color: var(--hr-ink);
}
body[data-theme="dark"] .hr-view {
  --hr-border: #414247; --hr-paper: #303135; --hr-soft: #292a2d;
  --hr-ink: #e0e0de; --hr-muted: #b7b7b5; --hr-accent: #d0d0ce;
  --hr-accent-soft: #414247; --hr-stage: #252629;
  --hr-seat: #292a2d; --hr-felt: #303135;
  --hr-rail: #414247; --hr-felt-ink: #e0e0de; --hr-felt-muted: #b7b7b5;
  --hr-focus: #a8a9ac;
}
.hr-view[hidden], .hr-view [hidden] { display: none !important; }
.hr-view button, .hr-view select, .hr-view input, .hr-view textarea { font-family: inherit; }
.hr-view button { cursor: pointer; }
.hr-view button:disabled { cursor: default; }
.hr-view :is(button, input, textarea, select, .hr-stage):focus-visible { outline: 2px solid var(--hr-focus); outline-offset: 4px; }
.hr-heading { align-items: center; margin-bottom: 21px; }
.hr-heading .eyebrow { margin-bottom: 1px; }
.hr-heading-mark { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--hr-border); border-radius: 13px; color: var(--hr-accent); background: var(--hr-paper); font-size: 24px; }
.hr-loaded .hr-heading { display: none; }
.hr-import-panel { min-width: 0; padding: 20px; margin-bottom: 18px; border: 1px solid var(--hr-border); border-radius: 14px; background: var(--hr-paper); }
.hr-import-heading { display: flex; align-items: center; gap: 11px; }
.hr-import-heading h2 { margin: 4px 0 0; color: var(--hr-ink); font-size: 15px; font-weight: 650; }
.hr-import-icon { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 10px; color: var(--hr-accent); background: var(--hr-accent-soft); font-size: 20px; }
.hr-file-button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 13px; margin-left: auto; border: 1px solid var(--hr-border); border-radius: 8px; color: var(--hr-ink); background: var(--hr-paper); font-size: 11px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.hr-file-button:hover { border-color: var(--hr-focus); background: var(--hr-soft); }
.hr-file-name { margin: 10px 0 12px 47px; color: var(--hr-muted); font-size: 11px; line-height: 1.5; }
.hr-history-input { display: block; width: 100%; min-height: 140px; padding: 12px 14px; resize: vertical; border: 1px solid var(--hr-border); border-radius: 8px; color: var(--hr-ink); background: var(--hr-soft); font: 11px/1.7 'DM Mono', ui-monospace, monospace !important; tab-size: 2; }
.hr-history-input::placeholder { color: var(--hr-muted); }
.hr-import-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 13px; }
.hr-import-footer > span { color: var(--hr-muted); font-size: 11px; line-height: 1.5; }
.hr-import-footer > span.is-error { color: #ce7770; }
.hr-import-footer .new-task-button { height: 38px; padding: 0 15px; font-size: 11px; }
.hr-workspace { min-width: 0; }
.hr-table-panel { container: replayer / inline-size; min-width: 0; overflow: hidden; border: 1px solid var(--hr-border); border-radius: 18px; background: var(--hr-paper); box-shadow: 0 12px 36px #1011140b; }
.hr-table-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 19px 24px 17px; border-bottom: 1px solid var(--hr-border); }
.hr-table-heading > div:first-child { flex: 1; min-width: 0; }
.hr-replay-label { display: flex; align-items: center; gap: 6px; color: var(--hr-accent); font: 600 9px/1.4 ui-monospace, monospace; letter-spacing: .14em; }
.hr-replay-label i { width: 5px; height: 5px; border-radius: 50%; background: #85878a; }
.hr-table-heading h2 { overflow: hidden; margin: 5px 0 0; color: var(--hr-ink); font-size: 16px; font-weight: 650; line-height: 1.4; letter-spacing: -.025em; white-space: nowrap; text-overflow: ellipsis; }
.hr-table-heading p { overflow: hidden; margin: 5px 0 0; color: var(--hr-muted); font-size: 10px; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; }
.hr-table-tools { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: 10px; }
.hr-table-tools .hr-file-button { margin: 0; white-space: nowrap; }
.hr-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 24px; border-bottom: 1px solid var(--hr-border); }
.hr-share-url { flex: 1 1 200px; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--hr-border); border-radius: 8px; color: var(--hr-muted); background: var(--hr-soft); font-size: 11px; text-overflow: ellipsis; }
.hr-share .hr-file-button { margin: 0; }
.hr-share .hr-file-button:disabled { opacity: .5; }
.hr-share-message { flex: 1 0 100%; margin: 0; color: var(--hr-muted); font-size: 11px; line-height: 1.5; }
.hr-share-message.is-error { color: #ce7770; }
@media (max-width: 540px) { .hr-share { padding: 12px; } .hr-share-url { flex-basis: 100%; } }
.hr-hand-picker-wrap, .hr-setting, .hr-speed { display: grid; gap: 5px; color: var(--hr-muted); font: 8px/1.4 ui-monospace, monospace; letter-spacing: .1em; }
.hr-hand-picker-wrap select, .hr-setting select, .hr-speed select { max-width: 170px; height: 36px; padding: 0 8px; border: 1px solid var(--hr-border); border-radius: 8px; color: var(--hr-ink); background: var(--hr-soft); font-size: 11px; letter-spacing: 0; }
.hr-setting { flex: 0 0 auto; }
.hr-view .hr-setting select:focus { outline: none; box-shadow: none; }
.hr-view .hr-setting select:focus-visible { border-color: var(--hr-focus); }

/* Each seat owns its cards, action label and adjacent wager. */
.hr-stage { overflow-x: auto; padding: 14px 24px 0; background: var(--hr-stage); scrollbar-width: thin; }
.hr-replay-table { --hr-card-width: clamp(40px, 4.8cqw, 48px); position: relative; isolation: isolate; width: 100%; min-width: 360px; max-width: 1000px; height: clamp(525px, 63cqw, 625px); margin: 0 auto; }
.hr-felt { position: absolute; inset: 18% 8% 15%; border: 10px solid var(--hr-rail); border-radius: 50%; background: var(--hr-felt); box-shadow: var(--hr-felt-shadow, 0 5px 0 #00000014, 0 12px 24px #00000014); }
.hr-felt-line { position: absolute; inset: 13px; border: 1px solid var(--hr-felt-line, var(--hr-border)); border-radius: inherit; }

/* Table finishes also paint the small previews in the context picker. */
.hr-view [data-felt="preflop"] { --hr-felt: radial-gradient(ellipse at 50% 30%, #edf1e7 0%, #dde7d8 90%); --hr-rail: #d6dcd2; --hr-felt-line: #adbaa44f; --hr-felt-ink: #53634b; --hr-felt-muted: #7e8d75; --hr-felt-shadow: 0 0 0 1px #c6cfc2, 0 10px 18px #2835260a, inset 0 2px 10px #3747350d; }
body[data-theme="dark"] .hr-view [data-felt="preflop"] { --hr-felt: radial-gradient(ellipse at 50% 30%, #39443a 0%, #303b33 90%); --hr-rail: #414743; --hr-felt-line: #859b7740; --hr-felt-ink: #d5dfc6; --hr-felt-muted: #9dad95; --hr-felt-shadow: 0 0 0 1px #525851, 0 14px 26px #0002, inset 0 2px 14px #14211744; }
.hr-view :is([data-felt="green"], [data-felt="blue"], [data-felt="burgundy"], [data-felt="violet"]) { --hr-rail: #34373b; --hr-felt-line: #ffffff20; --hr-felt-ink: #f1f1ed; --hr-felt-muted: #d0d3d0; --hr-felt-shadow: 0 5px 0 #00000020, 0 12px 24px #00000020, inset 0 2px 14px #00000018; }
.hr-view [data-felt="green"] { --hr-felt: radial-gradient(ellipse at 50% 30%, #325d46, #234431 90%); }
.hr-view [data-felt="blue"] { --hr-felt: radial-gradient(ellipse at 50% 30%, #345570, #253e54 90%); }
.hr-view [data-felt="burgundy"] { --hr-felt: radial-gradient(ellipse at 50% 30%, #6a3c4c, #4b2b38 90%); }
.hr-view [data-felt="violet"] { --hr-felt: radial-gradient(ellipse at 50% 30%, #554565, #3d324b 90%); }
.hr-view [data-felt="custom"] { --hr-felt: var(--hr-custom-felt); --hr-rail: var(--hr-custom-rail); --hr-felt-line: var(--hr-custom-line); --hr-felt-ink: var(--hr-custom-ink); --hr-felt-muted: var(--hr-custom-muted); }
.hr-felt-menu { position: fixed; inset: auto; margin: 0; width: min(280px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 12px; border: 1px solid var(--hr-border); border-radius: 13px; color: var(--hr-ink); background: var(--hr-paper); box-shadow: 0 12px 36px #00000038; }
.hr-felt-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; padding-left: 3px; }
.hr-felt-menu-heading strong { font-size: 12px; font-weight: 600; }
.hr-felt-menu-heading button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; color: var(--hr-muted); background: transparent; font-size: 20px; }
.hr-felt-menu-heading button:hover { color: var(--hr-ink); background: var(--hr-soft); }
.hr-felt-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hr-felt-option { display: flex; align-items: center; gap: 7px; min-height: 43px; padding: 7px; border: 1px solid transparent; border-radius: 8px; color: var(--hr-muted); background: var(--hr-soft); font-size: 10px; text-align: left; }
.hr-felt-option:hover { border-color: var(--hr-border); color: var(--hr-ink); }
.hr-felt-option[aria-pressed="true"] { border-color: var(--hr-focus); color: var(--hr-ink); }
.hr-felt-swatch { display: grid; place-items: center; flex: 0 0 30px; height: 23px; border: 3px solid var(--hr-rail); border-radius: 50%; background: var(--hr-felt); }
.hr-felt-option[aria-pressed="true"] .hr-felt-swatch::after { content: '✓'; color: var(--hr-felt-ink); font: 600 10px/1 system-ui, sans-serif; }
.hr-felt-custom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 3px 0; border-top: 1px solid var(--hr-border); color: var(--hr-muted); font-size: 11px; cursor: pointer; }
.hr-felt-custom.is-selected { color: var(--hr-ink); }
.hr-felt-custom input { width: 40px; height: 28px; padding: 3px; border: 1px solid var(--hr-border); border-radius: 6px; background: var(--hr-soft); cursor: pointer; }
.hr-felt-custom input::-webkit-color-swatch-wrapper { padding: 0; }
.hr-felt-custom input::-webkit-color-swatch { border: 0; border-radius: 3px; }
.hr-felt-custom input::-moz-color-swatch { border: 0; border-radius: 3px; }
.hr-table-center { position: absolute; z-index: 1; top: 46.5%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 15px; }
.hr-pot { display: flex; align-items: center; justify-content: center; min-height: 24px; color: var(--hr-felt-ink); white-space: nowrap; }
.hr-pot > div { display: flex; align-items: baseline; gap: 8px; }
.hr-pot > div > span { color: var(--hr-felt-muted); font: 500 9px/1.4 ui-monospace, monospace; letter-spacing: .06em; }
.hr-pot strong { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hr-board { display: flex; gap: 5px; }
/* Classic deck matches the preflop trainer, scaled to the replayer's card width. */
.hr-card { --card-w: var(--hr-card-width); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--card-w); height: calc(var(--card-w) * 1.34); overflow: hidden; border: 1px solid #dddeda; border-radius: 6px; color: #3e474a; background: #fffffc; box-shadow: 0 3px 0 #00000022, 0 5px 12px #0000000d; }
.hr-card b { font: 750 calc(var(--card-w) * .54545)/1.1 system-ui, sans-serif; letter-spacing: -.06em; }
.hr-card > span { font-size: calc(var(--card-w) * .45455); line-height: 1.1; }
.hr-suit-h { color: #bb5956; }.hr-suit-d { color: #6289ad; }.hr-suit-c { color: #538568; }
.hr-card-empty { border: 1px solid var(--hr-felt-line, var(--hr-border)); background: transparent; box-shadow: none; }
/* Clip the tucked card bottoms so they cannot show through or beyond a plaque. */
.hr-hole-cards { position: absolute; z-index: 0; bottom: calc(100% - 1px); left: 50%; display: flex; align-items: flex-start; gap: 1px; height: var(--hole-clearance); overflow: hidden; transform: translateX(-50%); }
.hr-card-back { display: block; flex: 0 0 auto; width: var(--hr-card-width); height: calc(var(--hr-card-width) * 1.4); position: relative; border: 2px solid #e0e0de; border-radius: 5px; background: repeating-linear-gradient(45deg, #a45459 0 2px, #8f3c43 2px 5px); box-shadow: 0 2px 3px #00000026; }
.hr-card-back::after { content: '♠'; position: absolute; inset: 3px; padding-top: 2px; border: 1px solid #ffffff40; border-radius: 2px; color: #f4f4f2; text-align: center; font: 18px/1.2 system-ui, sans-serif; }
.hr-view[data-deck-style="classic"] .hr-card-back { height: calc(var(--hr-card-width) * 1.34); border-color: #e0e3dd; border-radius: 4px; background: repeating-linear-gradient(45deg, #808b7b 0 2px, #939e8d 2px 4px); box-shadow: 0 2px 4px #0002; }
.hr-view[data-deck-style="classic"] .hr-card-back::after { display: none; }
.hr-cards-gone { visibility: hidden; }
.hr-seat { --hole-clearance: calc(var(--hr-card-width) * 1.34); position: absolute; z-index: 2; left: clamp(56px, var(--seat-x), calc(100% - 56px)); width: clamp(110px, 19.5cqw, 170px); transform: translate(-50%, -50%); }
.hr-view:is([data-deck-style="four-color"], [data-deck-style="four-color-faceted"]) .hr-seat[data-cards="open"] { --hole-clearance: calc(var(--hr-card-width) * 1.62); }
.hr-view[data-deck-style="four-color-matte"] .hr-seat[data-cards="open"] { --hole-clearance: calc(var(--hr-card-width) * 1.8); }
.hr-seat[data-cards="closed"] { --hole-clearance: calc(var(--hr-card-width) * .46); }
.hr-seat[data-cards="hidden"] { --hole-clearance: 0px; }
.hr-player { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; height: 62px; padding: 10px 12px; border: 1px solid var(--hr-border); border-radius: 12px; background: var(--hr-seat); box-shadow: 0 3px 8px #0000001a; }
.hr-player-copy { flex: 1; min-width: 0; }
.hr-player-name { display: block; overflow: hidden; color: var(--hr-muted); font-size: clamp(10px, 1.35cqw, 12px); line-height: 1.4; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.hr-stack { display: block; margin-top: 2px; color: var(--hr-ink); font-size: clamp(14px, 2cqw, 18px); font-weight: 650; line-height: 1.3; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.hr-position { display: grid; place-items: center; flex: 0 0 33px; height: 33px; border: 1px solid var(--hr-border); border-radius: 50%; background: var(--hr-soft); color: var(--hr-muted); font: 700 10px ui-monospace, monospace; }
.hr-long-position { font-size: 7px; text-align: center; }
.hr-hero .hr-player { border-color: var(--hr-focus); }
.hr-hero .hr-position { background: var(--hr-accent-soft); color: var(--hr-accent); }
.hr-you { position: absolute; top: 8px; right: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--hr-accent); }
.hr-active .hr-player { border-color: var(--hr-accent); box-shadow: 0 0 0 2px var(--hr-border), 0 3px 8px #0000001a; }
.hr-active .hr-player-name { color: var(--hr-ink); }
.hr-folded .hr-player { opacity: .52; box-shadow: none; }
.hr-winner .hr-player { border-color: #c5b17e; box-shadow: 0 0 0 3px #cbb58222, 0 5px 16px #14192130; }
.hr-dealer { position: absolute; right: -10px; top: -11px; display: grid; place-items: center; width: 25px; height: 25px; border: 2px solid #e2d9bd; border-radius: 50%; color: #61533b; background: #f6f0de; box-shadow: 0 2px 3px #10131936, inset 0 0 0 2px #fff9; font: 750 11px system-ui, sans-serif; }
.hr-seat-status { position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); max-width: 185px; padding: 3px 9px; border: 1px solid var(--hr-border); border-radius: 5px; background: var(--hr-paper); color: var(--hr-muted); font-size: 10px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.hr-status-raise { color: var(--hr-accent); background: var(--hr-accent-soft); border-color: var(--hr-border); }
.hr-status-call { color: #597d9b; background: #e6edf2; border-color: #7a9bb44d; }
.hr-status-win { color: #76603c; background: #f3ecd9; border-color: #c0a46580; }
.hr-status-fold { color: var(--hr-muted); border-color: transparent; background: transparent; }
body[data-theme="dark"] .hr-status-call { color: #b3cadd; background: #303f4a; }
body[data-theme="dark"] .hr-status-win { color: #dfcca0; background: #4b4430; }
.hr-wager { position: absolute; z-index: 3; display: flex; align-items: center; gap: 7px; width: max-content; white-space: nowrap; }
.hr-seat[data-wager-side="right"] .hr-wager { left: calc(100% + 10px); top: 50%; transform: translateY(-50%); }
.hr-seat[data-wager-side="left"] .hr-wager { right: calc(100% + 10px); top: 50%; transform: translateY(-50%); flex-direction: row-reverse; }
.hr-seat[data-wager-side="bottom"] .hr-wager { top: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
.hr-seat[data-wager-side="top"] .hr-wager { bottom: calc(100% + var(--hole-clearance) + 8px); left: 50%; transform: translateX(-50%); }
.hr-seat[data-wager-side="bottom"].hr-has-wager .hr-seat-status { top: calc(100% + 48px); }
.hr-wager > strong { padding: 4px 7px; border: 1px solid var(--hr-border); border-radius: 6px; color: var(--hr-ink); background: var(--hr-soft); font-size: 14px; font-weight: 650; line-height: 1.3; font-variant-numeric: tabular-nums; }
.hr-chip-stack {
  --chip-face: #4b91d8;
  --chip-rim: #367bc2;
  --chip-edge: #24568d;
  --chip-inlay: #e2f0ff;
  --chip-side-inlay: #abc6df;
  position: relative;
  display: inline-block;
  flex: 0 0 24px;
  width: 24px;
  height: calc(18px + (var(--chip-count) - 1) * 2px);
  vertical-align: middle;
  filter: drop-shadow(0 1px 1.5px #0005);
}
.hr-chip-stack[data-chip-color="gold"] {
  --chip-face: #e6b95e;
  --chip-rim: #d7a146;
  --chip-edge: #946a2e;
  --chip-inlay: #fff4d9;
  --chip-side-inlay: #d9c39b;
}
.hr-chip-stack[data-chip-color="green"] {
  --chip-face: #58ac73;
  --chip-rim: #3a975c;
  --chip-edge: #28603e;
  --chip-inlay: #e1f4df;
  --chip-side-inlay: #a2c8ac;
}
.hr-chip-stack i {
  position: absolute;
  left: 0;
  bottom: calc(var(--chip-level) * 2px);
  width: 24px;
  height: 18px;
}
.hr-chip-stack i::before {
  content: '';
  position: absolute;
  inset: 3px 0 0;
  border-radius: 50%;
  background:
    linear-gradient(90deg, #0004, transparent 24%, transparent 68%, #0004),
    repeating-linear-gradient(90deg, var(--chip-edge) 0 4px, var(--chip-side-inlay) 4px 7px, var(--chip-edge) 7px 13px);
  box-shadow: inset 0 -1px 0 #0006, 0 1px 0 #0003;
}
.hr-chip-stack i::after {
  content: '';
  position: absolute;
  inset: 0 0 3px;
  border: 1px solid var(--chip-rim);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, var(--chip-face) 0 55%, var(--chip-rim) 56% 61%, transparent 62%),
    repeating-conic-gradient(from 12deg, var(--chip-inlay) 0deg 18deg, var(--chip-rim) 18deg 60deg);
  box-shadow: inset 0 -1px 0 #0002, 0 1px 0 #0003;
}
.hr-dense-table { --hr-card-width: 40px; min-width: 900px; height: 660px; }
.hr-dense-table .hr-seat { width: 138px; }
.hr-dense-table .hr-player { height: 58px; padding-inline: 9px; gap: 7px; }
.hr-table-message { min-height: 42px; overflow: hidden; padding: 3px 24px 17px; color: var(--hr-muted); background: var(--hr-stage); font-size: 12px; line-height: 1.7; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.hr-transport { padding: 16px 24px 13px; border-top: 1px solid var(--hr-border); background: var(--hr-paper); }
.hr-progress-row { display: grid; grid-template-columns: 68px minmax(40px, 1fr) 48px; align-items: center; gap: 15px; margin-bottom: 17px; color: var(--hr-muted); font: 10px/1.4 ui-monospace, monospace; }
.hr-progress-row > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.hr-progress-row input { --progress: 0%; width: 100%; min-width: 0; height: 5px; margin: 0; border: 0; border-radius: 5px; appearance: none; background: linear-gradient(to right, var(--hr-focus) 0 var(--progress), var(--hr-border) var(--progress) 100%); cursor: pointer; }
.hr-progress-row input::-webkit-slider-thumb { width: 13px; height: 13px; appearance: none; border: 2px solid var(--hr-paper); border-radius: 50%; background: var(--hr-focus); box-shadow: 0 0 0 1px var(--hr-border); }
.hr-progress-row input::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid var(--hr-paper); border-radius: 50%; background: var(--hr-focus); }
.hr-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px; }
.hr-streets { display: flex; flex-wrap: wrap; gap: 3px; }
.hr-street { min-height: 33px; padding: 6px 9px; border: 1px solid transparent; border-radius: 7px; color: var(--hr-muted); background: transparent; font-size: 11px; font-weight: 550; transition: color .15s, background .15s; }
.hr-street:hover:not(:disabled) { background: var(--hr-soft); color: var(--hr-ink); }
.hr-street.is-current { border-color: var(--hr-play); color: var(--hr-play-ink); background: var(--hr-play); }
.hr-street:disabled { opacity: .32; }
.hr-playback-buttons { display: flex; align-items: center; justify-content: center; gap: 7px; }
.hr-control-button, .hr-play-button { display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid var(--hr-border); color: var(--hr-ink); background: var(--hr-paper); transition: background .15s, transform .15s, border-color .15s; }
.hr-control-button { width: 34px; height: 36px; border-radius: 9px; }
.hr-control-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hr-skip-button { width: 27px; border-color: transparent; background: transparent; color: var(--hr-muted); }
.hr-control-button:hover:not(:disabled) { border-color: var(--hr-focus); background: var(--hr-soft); transform: translateY(-1px); }
.hr-control-button:disabled { opacity: .28; }
.hr-play-button { width: 50px; height: 50px; border: 1px solid var(--hr-play); border-radius: 50%; color: var(--hr-play-ink); background: var(--hr-play); box-shadow: 0 3px 8px #0000001a; }
.hr-play-button svg { width: 24px; height: 24px; fill: currentColor; }
.hr-play-button:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.hr-play-button.is-playing { box-shadow: 0 0 0 4px var(--hr-accent-soft); }
.hr-speed { justify-items: end; }
.hr-speed select { width: 62px; height: 31px; font-size: 12px; }
.hr-shortcuts { display: flex; justify-content: center; gap: 17px; margin-top: 12px; color: var(--hr-muted); opacity: .65; font-size: 9px; }
.hr-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
@container replayer (max-width: 720px) {
  .hr-table-heading { flex-wrap: wrap; gap: 14px; padding: 16px 18px; }
  .hr-table-heading > div:first-child { flex-basis: 100%; }
  .hr-table-heading h2 { font-size: 14px; }
  .hr-table-tools { width: 100%; justify-content: flex-start; }
  .hr-table-tools .hr-file-button { margin-left: auto; }
  .hr-stage { padding-inline: 12px; }
  .hr-player { gap: 7px; padding-inline: 9px; }
  .hr-position { flex-basis: 29px; height: 29px; font-size: 9px; }
  .hr-long-position { font-size: 7px; }
  .hr-controls { grid-template-columns: 1fr auto; gap: 14px; }
  .hr-streets { grid-column: 1 / -1; justify-content: center; }
  .hr-playback-buttons { justify-self: center; padding-left: 65px; }
  .hr-transport { padding-inline: 18px; }
}
@container replayer (max-width: 600px) {
  .hr-replay-table:not(.hr-dense-table) { --hr-card-width: 36px; height: 580px; }
  .hr-replay-table:not(.hr-dense-table) .hr-table-center { top: 45%; }
  .hr-replay-table:not(.hr-dense-table) .hr-seat:is([data-wager-side="left"], [data-wager-side="right"]) .hr-wager { top: calc(100% + 7px); left: 50%; right: auto; transform: translateX(-50%); flex-direction: row; }
  .hr-replay-table:not(.hr-dense-table) .hr-seat:is([data-wager-side="left"], [data-wager-side="right"]).hr-has-wager .hr-seat-status { top: calc(100% + 45px); }
}
@container replayer (max-width: 480px) {
  .hr-table-heading { flex-wrap: wrap; gap: 12px; padding: 15px 12px; }
  .hr-table-heading > div:first-child { flex-basis: 100%; }
  .hr-table-tools { width: 100%; max-width: none; flex-wrap: wrap; justify-content: space-between; }
  .hr-stage { padding: 12px 2px 0; }
  .hr-seat { width: 110px; }
  .hr-player { gap: 5px; height: 54px; padding: 7px; border-radius: 10px; }
  .hr-position { flex-basis: 25px; height: 25px; font-size: 8px; }
  .hr-long-position { font-size: 6px; }
  .hr-stack { font-size: 14px; }
  .hr-player-name { font-size: 9px; }
  .hr-hero[data-slot="0"] { top: 87% !important; }
  .hr-wager { gap: 4px; }.hr-wager > strong { font-size: 11px; padding: 3px 5px; }
  .hr-chip-stack { transform: scale(.85); margin-inline: -2px; }
  .hr-board { gap: 3px; }
  .hr-table-center { gap: 12px; }.hr-pot strong { font-size: 16px; }
  .hr-dealer { width: 22px; height: 22px; right: -5px; top: -12px; }
  .hr-seat-status { font-size: 9px; }
  .hr-table-message { padding-inline: 12px; font-size: 10px; }
  .hr-transport { padding: 15px 12px 17px; }
  .hr-progress-row { grid-template-columns: 56px minmax(30px, 1fr) 42px; gap: 8px; font-size: 9px; }
  .hr-street { padding-inline: 8px; font-size: 10px; }
  .hr-playback-buttons { gap: 5px; padding-left: 0; }
  .hr-control-button { width: 31px; }.hr-skip-button { width: 24px; }
  .hr-shortcuts { display: none; }
}
@media (max-width: 680px) {
  .hr-heading { align-items: flex-start; }.hr-heading-mark { display: none; }
  .hr-import-panel { padding: 15px 12px; }.hr-import-heading { gap: 8px; }.hr-import-heading h2 { font-size: 13px; }
  .hr-import-icon { flex-basis: 30px; height: 30px; }.hr-import-heading .hr-file-button { padding: 0 8px; font-size: 10px; }
  .hr-file-name { margin-left: 38px; font-size: 10px; }.hr-import-footer { align-items: flex-start; }.hr-import-footer > span { max-width: 50%; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .hr-view *, .hr-view *::before, .hr-view *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* The table finish picker is intentionally scoped to the hand replayer. */
.hr-avatar { display: none; }
.hr-view[data-table-theme="club"] {
  --hr-border: #51402d; --hr-paper: #211c17; --hr-soft: #2b241c;
  --hr-ink: #eee2cc; --hr-muted: #b7a88e; --hr-accent: #e0b866;
  --hr-accent-soft: #48391f; --hr-stage: #1a1511; --hr-seat: #29231c;
  --hr-felt: #15452e; --hr-rail: #4a301d; --hr-felt-ink: #f1e8d6;
  --hr-felt-muted: #c4b89f; --hr-play: #a47c3d; --hr-play-ink: #fff8e9;
  --hr-focus: #e0b866;
}
.hr-view[data-table-theme="club"] .hr-table-panel { border-color: #443424; background: #211c17; box-shadow: 0 16px 44px #0005; }
.hr-view[data-table-theme="club"] .hr-table-heading { border-color: #493a29; }
.hr-view[data-table-theme="club"] .hr-replay-label { color: #d9b36e; }
.hr-view[data-table-theme="club"] .hr-replay-label i { background: #d9b36e; box-shadow: 0 0 8px #e4bd70a6; }
.hr-view[data-table-theme="club"] .hr-stage {
  padding-top: 24px; padding-bottom: 14px;
  background: radial-gradient(ellipse at 50% 2%, #91683b55 0, #50371f24 23%, transparent 58%), radial-gradient(ellipse at 50% 55%, #44301f 0, #281d15 63%, #17120f 100%);
}
.hr-view[data-table-theme="club"] #hrTable[data-felt="standard"] {
  --hr-felt: radial-gradient(ellipse at 50% 32%, #20583b 0%, #17472f 58%, #103923 100%);
  --hr-felt-ink: #f1e8d6; --hr-felt-muted: #c4b89f;
}
.hr-view[data-table-theme="club"] .hr-replay-table { height: clamp(540px, 63cqw, 640px); }
.hr-view[data-table-theme="club"] .hr-felt {
  inset: 10% 4% 10%; border: 18px solid transparent; border-radius: 50%;
  background: var(--hr-felt) padding-box, repeating-linear-gradient(94deg, #56371d 0 7px, #79502b 7px 11px, #694522 11px 17px, #4e311b 17px 23px) border-box;
  box-shadow: 0 0 0 3px #17110d, 0 10px 0 #28190f, 0 23px 32px #0009, inset 0 2px 14px #d7c09118;
}
.hr-view[data-table-theme="club"] .hr-felt-line { inset: 15px; border-color: #d7bd8050; }
.hr-view[data-table-theme="club"] .hr-table-center { top: 47%; gap: 12px; }
.hr-view[data-table-theme="club"] .hr-pot > div { flex-direction: column; align-items: center; gap: 0; }
.hr-view[data-table-theme="club"] .hr-pot > div > span { color: #d6c5a5; font-size: 10px; letter-spacing: .09em; }
.hr-view[data-table-theme="club"] .hr-pot strong { color: #fff4df; font: 500 22px/1.2 Georgia, 'Times New Roman', serif; }
.hr-view[data-table-theme="club"] .hr-board { gap: 6px; }
.hr-view[data-table-theme="club"] .hr-card { border-color: #eee9dd; border-radius: 5px; box-shadow: 0 3px 0 #0005, 0 8px 14px #0005; }
.hr-view[data-table-theme="club"] .hr-seat { width: clamp(118px, 20cqw, 176px); }
.hr-view[data-table-theme="club"] .hr-player {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 9px;
  height: 68px; padding: 8px 10px; border: 1px solid #806743; border-radius: 17px;
  color: #f3ead9; background: linear-gradient(110deg, #171512ed, #211e1ae8 68%, #171512ed);
  box-shadow: inset 0 1px #ffffff18, 0 5px 14px #0009;
}
.hr-view[data-table-theme="club"] .hr-avatar {
  position: relative; display: grid; place-items: center; grid-column: 1; grid-row: 1;
  width: 38px; height: 38px; overflow: hidden; border: 1px solid #b79861;
  border-radius: 50%; color: transparent; font-size: 0;
  background: radial-gradient(ellipse at 52% 40%, #766044 0 20%, transparent 21%), radial-gradient(ellipse at 50% 98%, #544436 0 42%, transparent 43%), radial-gradient(circle at 42% 34%, #584b3d 0 25%, #24211d 62%);
  box-shadow: 0 0 0 2px #1b1712, inset 0 0 0 1px #ffffff20;
}
.hr-view[data-table-theme="club"] .hr-avatar::before {
  position: absolute; top: 7px; left: 13px; width: 11px; height: 13px; border-radius: 48% 48% 42% 42%;
  background: linear-gradient(90deg, #b98e66, #dfb78d 52%, #ad805c); box-shadow: 0 -4px 0 -1px #211a16; content: "";
}
.hr-view[data-table-theme="club"] .hr-avatar::after {
  position: absolute; bottom: -4px; left: 6px; width: 26px; height: 21px; border-radius: 55% 55% 0 0;
  background: linear-gradient(110deg, #29333a, #66716a 50%, #242a2c); box-shadow: inset 0 3px 4px #f3d8b22b; content: "";
}
.hr-view[data-table-theme="club"] .hr-position {
  position: absolute; z-index: 2; top: -7px; left: 8px; display: block; width: auto; height: auto;
  padding: 2px 6px; border: 1px solid #66543a; border-radius: 10px; color: #d6c5a5; background: #211c17;
  font: 600 8px/1.2 ui-monospace, monospace; white-space: nowrap;
}
.hr-view[data-table-theme="club"] .hr-long-position { font-size: 7px; }
.hr-view[data-table-theme="club"] .hr-player-copy { grid-column: 2; grid-row: 1; align-self: center; }
.hr-view[data-table-theme="club"] .hr-player-name { color: #d8cbb5; font: 500 clamp(9px, 1.1cqw, 11px)/1.3 Georgia, 'Times New Roman', serif; }
.hr-view[data-table-theme="club"] .hr-stack { margin-top: 1px; color: #fff3de; font: 500 clamp(13px, 1.7cqw, 16px)/1.25 Georgia, 'Times New Roman', serif; }
.hr-view[data-table-theme="club"] .hr-hero .hr-player,
.hr-view[data-table-theme="club"] .hr-active .hr-player { border-color: #e0ba6d; box-shadow: 0 0 0 1px #e0ba6d70, 0 0 18px #d4a74c55, inset 0 1px #fff1cf29, 0 5px 18px #000a; }
.hr-view[data-table-theme="club"] .hr-hero .hr-player-name { color: #e7c87e; }
.hr-view[data-table-theme="club"] .hr-active .hr-player-name { color: #fff0cf; }
.hr-view[data-table-theme="club"] .hr-hero .hr-position { color: #f0d48f; border-color: #9e7c42; }
.hr-view[data-table-theme="club"] .hr-folded .hr-player { opacity: .65; }
.hr-view[data-table-theme="club"] .hr-dealer { border-color: #e8cf93; color: #43351f; background: #e7d5aa; }
.hr-view[data-table-theme="club"] .hr-seat-status { border-color: #604f37; color: #d2c2a6; background: #211c17; box-shadow: 0 3px 8px #0006; }
.hr-view[data-table-theme="club"] .hr-status-raise { color: #f0c978; border-color: #99723c; background: #3d2c19; }
.hr-view[data-table-theme="club"] .hr-status-call { color: #d1decb; border-color: #526349; background: #283527; }
.hr-view[data-table-theme="club"] .hr-status-win { color: #f0d48f; border-color: #b18d4e; background: #46371f; }
.hr-view[data-table-theme="club"] .hr-status-fold { color: #c4b89f; border-color: transparent; background: transparent; box-shadow: none; }
.hr-view[data-table-theme="club"] .hr-wager > strong { border-color: #725c3b; color: #fff0d4; background: #231e17ed; box-shadow: 0 3px 8px #0006; }
.hr-view[data-table-theme="club"] .hr-table-message { color: #c5b493; background: #1a1511; }
.hr-view[data-table-theme="club"] .hr-transport { border-color: #493a29; background: #211c17; }
.hr-view[data-table-theme="club"] .hr-control-button { border-color: #564630; background: #29231b; }
.hr-view[data-table-theme="club"] .hr-control-button:hover:not(:disabled) { border-color: #b39154; background: #352c20; }
.hr-view[data-table-theme="club"] .hr-play-button { border-color: #d2ad64; background: #a47c3d; }
.hr-view[data-table-theme="club"] .hr-speed select,
.hr-view[data-table-theme="club"] .hr-setting select,
.hr-view[data-table-theme="club"] .hr-hand-picker-wrap select { border-color: #51402d; color: #eadfc9; background: #2b241c; }
@container replayer (max-width: 600px) {
  .hr-view[data-table-theme="club"] .hr-seat { width: 116px; }
  .hr-view[data-table-theme="club"] .hr-player { grid-template-columns: 31px minmax(0, 1fr); gap: 6px; height: 59px; padding: 7px; }
  .hr-view[data-table-theme="club"] .hr-avatar { width: 31px; height: 31px; }
  .hr-view[data-table-theme="club"] .hr-avatar::before { top: 5px; left: 10px; width: 9px; height: 11px; }
  .hr-view[data-table-theme="club"] .hr-avatar::after { left: 4px; width: 22px; height: 17px; }
  .hr-view[data-table-theme="club"] .hr-stack { font-size: 13px; }
}