/*
 * The replayer page's stage: the noted hand at the replayer's table, played a street every four
 * seconds over sixteen, or held on the street a reader presses.
 *
 * Every piece that changes is drawn once for each moment it shows at and named for it: on--{street}
 * shows on that street alone, from--{street} from that street on, on--showdown when the cards are
 * turned over. Nothing named so is seen - or read out by a screen reader, since it is hidden and not
 * only see-through - until the street pressed, or under Play the film's clock, says so.
 * The table's sizes are in em off a share of its width, so it scales like a picture.
 */

.replay-shown { container: replay / inline-size; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 1000px; }
.replay-shown__frame {
    position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; font-size: 1.4cqw; border-radius: 22px;
    background: radial-gradient(ellipse at 50% 30%, var(--bg-raised), var(--bg-canvas) 75%);
    box-shadow: 0 0 0 1px var(--border-strong), 0 40px 90px -30px rgba(37, 198, 133, 0.3), 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.replay-shown__felt {
    position: absolute; left: 11%; right: 11%; top: 16%; bottom: 20%; border-radius: 50%;
    background: radial-gradient(ellipse at 50% 40%, #1d6b51 0%, var(--bg-felt) 55%, #0a2a20 100%);
    box-shadow: 0 0 0 1.1em #1a2029, 0 0 0 1.25em var(--border-strong), inset 0 0 4em rgba(0, 0, 0, 0.55);
}

.replay-shown__middle { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.7em; }
.replay-shown__board { display: flex; gap: 0.35em; }
.replay-shown__slot { width: 2.6em; height: 3.6em; border-radius: 0.4em; border: 1px dashed rgba(233, 238, 245, 0.16); }
.replay-shown__pot { padding: 0.3em 0.9em; border-radius: 1em; background: rgba(13, 17, 23, 0.75); font-size: 1.05em; font-weight: 700; color: #fff; }
.replay-shown__swap { display: grid; justify-items: center; }
.replay-shown__swap > * { grid-area: 1 / 1; white-space: nowrap; }

.replay-shown__card {
    display: inline-flex; align-items: center; justify-content: center; width: 2.6em; height: 3.6em; border-radius: 0.4em;
    background: var(--card-face); color: var(--card-pip-black); font-size: 1em; font-weight: 700;
    box-shadow: 0 0.3em 0.8em rgba(0, 0, 0, 0.45);
}
.replay-shown__card--red { color: var(--card-pip-red); }
.replay-shown__card--back { background: repeating-linear-gradient(45deg, var(--card-back) 0 0.3em, #24498a 0.3em 0.6em); border: 0.15em solid #e9eef5; }

.replay-shown__seat { position: absolute; z-index: 1; width: 12em; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.35em; }
.replay-shown__seat--villain { left: 80%; top: 24%; }
.replay-shown__seat--right-low { left: 85%; top: 62%; }
.replay-shown__seat--top { left: 50%; top: 11%; }
.replay-shown__seat--left-high { left: 20%; top: 24%; }
.replay-shown__seat--left-low { left: 15%; top: 62%; }
.replay-shown__seat--hero { left: 50%; top: 81%; }
.replay-shown__hole { position: relative; display: flex; gap: 0.2em; min-height: 3.6em; }
.replay-shown__shown { position: absolute; inset: 0; display: flex; gap: 0.2em; }
.replay-shown__plate {
    display: flex; flex-direction: column; align-items: center; min-width: 9em; padding: 0.35em 0.8em; border-radius: 0.6em;
    background: rgba(20, 20, 20, 0.92); border: 1px solid #3a3a3a; box-shadow: 0 0.5em 1.4em rgba(0, 0, 0, 0.45);
}
.replay-shown__plate b { font-size: 1em; color: #e9eef5; }
.replay-shown__plate .replay-shown__swap { font-size: 0.85em; font-weight: 600; color: #8a8a8a; }
.replay-shown__seat--hero .replay-shown__plate { border-color: var(--accent-primary); }
.replay-shown__seat--folded .replay-shown__plate { opacity: 0.4; }
.replay-shown__did { min-height: 1.3em; font-size: 0.9em; font-weight: 700; color: var(--accent-primary); }
.replay-shown__won { position: absolute; inset: -0.5em; border-radius: 1em; pointer-events: none; box-shadow: 0 0 0 0.15em var(--accent-primary), 0 0 2.5em rgba(37, 198, 133, 0.55); }

.replay-shown__wager {
    position: absolute; z-index: 1; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.2em 0.7em 0.2em 0.3em; border-radius: 1em; background: rgba(13, 17, 23, 0.8); font-size: 0.95em; font-weight: 700; color: #fff;
}
.replay-shown__wager::before {
    content: ""; width: 1.2em; height: 1.2em; border-radius: 50%;
    background: repeating-conic-gradient(var(--chip-five) 0 30deg, var(--chip-one) 30deg 45deg); box-shadow: inset 0 0 0 0.22em var(--chip-five);
}
.replay-shown__wager--villain { left: 68%; top: 34%; }
.replay-shown__wager--right-low { left: 73%; top: 56%; }
.replay-shown__wager--hero { left: 50%; top: 66%; }

.replay-shown__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(233, 238, 245, 0.12); opacity: 0; }
.replay-shown__progress span { display: block; width: 0; height: 100%; background: var(--accent-primary); }
.replay-shown__said { min-height: 1.6em; font-size: 17px; font-weight: 600; color: var(--text-primary); }

.replay-shown__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 5px; border-radius: 14px; background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.replay-shown__tab {
    position: relative; padding: 8px 16px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-secondary);
    transition: background 150ms ease, color 150ms ease;
}
.replay-shown__tab input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.replay-shown__tab:hover { color: var(--text-primary); }
.replay-shown__tab:has(input:checked) { background: rgba(37, 198, 133, 0.16); color: var(--accent-primary); }
.replay-shown__tab:has(input:focus-visible) { outline: 2px solid var(--accent-primary); }
.replay-shown__ladder { width: 100%; max-width: 640px; font-size: 13px; }
.replay-shown__ladder .film-hand__street { padding: 4px 6px; border-radius: 5px; transition: background 200ms ease; }

/* ── Which moment is seen: the street pressed ─────────────────────────────────── */

[class*="replay-shown__on--"], [class*="replay-shown__from--"] { opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 250ms; }
.replay-shown:has(input[value="preflop"]:checked) .replay-shown__on--preflop,
.replay-shown:has(input[value="flop"]:checked) :is(.replay-shown__on--flop, .replay-shown__from--flop),
.replay-shown:has(input[value="turn"]:checked) :is(.replay-shown__on--turn, .replay-shown__from--flop, .replay-shown__from--turn),
.replay-shown:has(input[value="river"]:checked) :is(.replay-shown__on--river, .replay-shown__on--showdown, .replay-shown__from--flop, .replay-shown__from--turn, .replay-shown__from--river) { opacity: 1; visibility: visible; }
.replay-shown:has(input[value="preflop"]:checked) .replay-shown__ladder .replay-shown__lit--preflop,
.replay-shown:has(input[value="flop"]:checked) .replay-shown__ladder .replay-shown__lit--flop,
.replay-shown:has(input[value="turn"]:checked) .replay-shown__ladder .replay-shown__lit--turn,
.replay-shown:has(input[value="river"]:checked) .replay-shown__ladder .replay-shown__lit--river { background: rgba(37, 198, 133, 0.14); }

/* ── Or the film's clock, under Play ──────────────────────────────────────────── */

.replay-shown:has(input[value="play"]:checked) :is([class*="replay-shown__on--"], [class*="replay-shown__from--"], [class*="replay-shown__lit--"]) { transition: none; animation: 16s linear infinite; }
.replay-shown:has(input[value="play"]:checked) .replay-shown__on--preflop { animation-name: replay-shown-0; }
.replay-shown:has(input[value="play"]:checked) .replay-shown__on--flop { animation-name: replay-shown-1; }
.replay-shown:has(input[value="play"]:checked) .replay-shown__on--turn { animation-name: replay-shown-2; }
.replay-shown:has(input[value="play"]:checked) .replay-shown__on--river { animation-name: replay-shown-3; }
.replay-shown:has(input[value="play"]:checked) .replay-shown__on--river-call { animation-name: replay-shown-call; }
.replay-shown:has(input[value="play"]:checked) .replay-shown__on--showdown { animation-name: replay-shown-showdown; }
.replay-shown:has(input[value="play"]:checked) .replay-shown__from--flop { animation-name: replay-shown-from-1; }
.replay-shown:has(input[value="play"]:checked) .replay-shown__from--turn { animation-name: replay-shown-from-2; }
.replay-shown:has(input[value="play"]:checked) .replay-shown__from--river { animation-name: replay-shown-from-3; }
.replay-shown:has(input[value="play"]:checked) .replay-shown__lit--preflop { animation-name: replay-shown-lit-0; }
.replay-shown:has(input[value="play"]:checked) .replay-shown__lit--flop { animation-name: replay-shown-lit-1; }
.replay-shown:has(input[value="play"]:checked) .replay-shown__lit--turn { animation-name: replay-shown-lit-2; }
.replay-shown:has(input[value="play"]:checked) .replay-shown__lit--river { animation-name: replay-shown-lit-3; }
.replay-shown:has(input[value="play"]:checked) .replay-shown__progress { opacity: 1; }
.replay-shown:has(input[value="play"]:checked) .replay-shown__progress span { animation: replay-shown-progress 16s linear infinite; }
.replay-shown:has(.replay-shown__frame:hover) * { animation-play-state: paused; }

@keyframes replay-shown-0 { 0%, 23% { opacity: 1; visibility: visible; } 25%, 100% { opacity: 0; visibility: hidden; } }
@keyframes replay-shown-1 { 0%, 24% { opacity: 0; visibility: hidden; } 26%, 48% { opacity: 1; visibility: visible; } 50%, 100% { opacity: 0; visibility: hidden; } }
@keyframes replay-shown-2 { 0%, 49% { opacity: 0; visibility: hidden; } 51%, 73% { opacity: 1; visibility: visible; } 75%, 100% { opacity: 0; visibility: hidden; } }
@keyframes replay-shown-3 { 0%, 74% { opacity: 0; visibility: hidden; } 76%, 98% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes replay-shown-call { 0%, 74% { opacity: 0; visibility: hidden; } 76%, 84% { opacity: 1; visibility: visible; } 86%, 100% { opacity: 0; visibility: hidden; } }
@keyframes replay-shown-showdown { 0%, 84% { opacity: 0; visibility: hidden; } 86%, 98% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes replay-shown-from-1 { 0%, 24% { opacity: 0; visibility: hidden; } 26%, 98% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes replay-shown-from-2 { 0%, 49% { opacity: 0; visibility: hidden; } 51%, 98% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes replay-shown-from-3 { 0%, 74% { opacity: 0; visibility: hidden; } 76%, 98% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes replay-shown-lit-0 { 0%, 24% { background: rgba(37, 198, 133, 0.14); color: var(--accent-primary); } 25%, 100% { background: transparent; } }
@keyframes replay-shown-lit-1 { 0%, 24% { background: transparent; } 25%, 49% { background: rgba(37, 198, 133, 0.14); color: var(--accent-primary); } 50%, 100% { background: transparent; } }
@keyframes replay-shown-lit-2 { 0%, 49% { background: transparent; } 50%, 74% { background: rgba(37, 198, 133, 0.14); color: var(--accent-primary); } 75%, 100% { background: transparent; } }
@keyframes replay-shown-lit-3 { 0%, 74% { background: transparent; } 75%, 100% { background: rgba(37, 198, 133, 0.14); color: var(--accent-primary); } }
@keyframes replay-shown-progress { to { width: 100%; } }

/* ── Phones: the table stands taller and its seats close in ──────────────────── */

@container replay (max-width: 560px) {
    .replay-shown__frame { aspect-ratio: 4 / 5; font-size: 2.6cqw; }
    .replay-shown__felt { left: 6%; right: 6%; top: 20%; bottom: 24%; }
    .replay-shown__seat { width: 10em; }
    .replay-shown__seat--villain { left: 74%; top: 22%; }
    .replay-shown__seat--right-low { left: 78%; top: 60%; }
    .replay-shown__seat--top { left: 50%; top: 9%; }
    .replay-shown__seat--left-high { left: 26%; top: 22%; }
    .replay-shown__seat--left-low { left: 22%; top: 60%; }
    .replay-shown__seat--hero { left: 50%; top: 85%; }
    .replay-shown__plate { min-width: 7.5em; }
    .replay-shown__wager--villain { left: 64%; top: 33%; }
    .replay-shown__wager--right-low { left: 70%; top: 51%; }
    .replay-shown__wager--hero { left: 50%; top: 70%; }
    .replay-shown__said { font-size: 15px; }
    .replay-shown__tab { padding: 7px 10px; font-size: 12.5px; }
}

/* ── For a reader who asks for less motion: the river, turned over, standing still ── */

@media (prefers-reduced-motion: reduce) {
    .replay-shown * { animation: none !important; transition: none !important; }
    .replay-shown:has(input[value="play"]:checked) :is(.replay-shown__on--river, .replay-shown__on--showdown, .replay-shown__from--flop, .replay-shown__from--turn, .replay-shown__from--river) { opacity: 1; visibility: visible; }
    .replay-shown__progress { display: none; }
}