/*
    The web replayer, drawn to match the application's own (HandReplayer.xaml): a felt of 780 by 460
    with a rounded table in the middle, the board and the pot on it, and each seat a plate of name,
    position and stack under its cards, with the wager as a pill and what it last did beneath.
*/

.shared-hands { display: grid; grid-template-columns: 180px minmax(0, 1fr) 240px; gap: var(--space-4); align-items: start; }
.hand-list { display: flex; flex-direction: column; gap: 2px; max-height: 80vh; overflow-y: auto; }
.notes-carried .card { gap: 6px; }

.felt-frame { width: 100%; }
.felt { position: relative; width: 100%; aspect-ratio: 780 / 460; background: var(--bg-canvas); border-radius: var(--radius-lg); overflow: hidden; }
.felt__table {
    position: absolute; left: 14%; right: 14%; top: 22%; bottom: 22%;
    border-radius: 999px; background: var(--bg-felt); border: 2px solid var(--border-strong);
}
.felt__middle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.felt__pot { color: var(--text-primary); font-weight: 600; font-size: 12px; }

.cards { display: flex; gap: 3px; justify-content: center; min-height: 26px; }
.playing-card {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 28px; padding: 0 4px;
    border-radius: 3px; background: var(--card-face); color: var(--card-pip-black); font-weight: 600; font-size: 12px;
}
.playing-card--red { color: var(--card-pip-red); }
.playing-card--back { background: var(--card-back); border: 1px solid var(--border-strong); }

.seat { position: absolute; width: 130px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.seat--folded { opacity: 0.38; }
.seat__plate {
    width: 100%; display: flex; flex-direction: column; align-items: center; padding: 4px 6px;
    border-radius: 7px; background: var(--bg-raised); border: 1px solid var(--border-subtle);
}
.seat--hero .seat__plate { border-color: var(--accent-primary); }
.seat--acting .seat__plate { border-color: var(--accent-blue); box-shadow: 0 0 0 1px var(--accent-blue); }
.seat__name { font-weight: 600; font-size: 12px; color: var(--text-primary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat__line { font-size: 11px; color: var(--text-secondary); }

/*
    Chips. A wager is a pile on the table's edge in front of its seat, the middle's pile sits under the
    pot, and each pile is a stack of like chips per denomination, seen edge on, with the amount beside
    it (and on hover, from its title). A pile arriving slides out of its seat; a pile gathered slides
    into the middle and is gone. Both run once, as the reader steps forward onto the step.
*/
.pile { position: absolute; transform: translate(-50%, -50%); z-index: 0; }
.pile__body { display: inline-flex; align-items: flex-end; gap: 4px; cursor: default; }
.pile__chips { display: inline-flex; align-items: flex-end; gap: 2px; }
.pile__amount { font-size: 11px; font-weight: 600; color: var(--text-primary); line-height: 1; }
.chips { display: inline-flex; flex-direction: column; }
.pile__chip { display: block; width: 16px; height: 5px; margin-top: -1.5px; border-radius: 2.5px; border-bottom: 1px solid var(--chip-rim); }
.pile__chip--0-5 { background: var(--chip-half); }
.pile__chip--1 { background: var(--chip-one); }
.pile__chip--5 { background: var(--chip-five); }
.pile__chip--25 { background: var(--chip-twenty-five); }
.pile__chip--100 { background: var(--chip-hundred); }
.pile__chip--500 { background: var(--chip-five-hundred); }
.felt__gathered { display: flex; align-items: flex-end; gap: 6px; font-size: 11px; }

.pile--arrives { animation: pile-arrives 380ms ease-out; }
.pile--gathers { animation: pile-gathers 380ms ease-in forwards; }
@keyframes pile-arrives { from { left: var(--there-left); top: var(--there-top); } }
@keyframes pile-gathers { to { left: var(--there-left); top: var(--there-top); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .pile--arrives { animation: none; }
    .pile--gathers { display: none; }
}
.seat__did { font-size: 11px; font-weight: 600; color: var(--accent-primary); }

.streets { align-self: center; }
.tab--unreached { opacity: 0.4; cursor: default; }
.tab--unreached:hover { color: var(--text-secondary); }

.transport { display: flex; align-items: center; gap: var(--space-2); }
.what-happened { text-align: center; }

.shared-link form.row { align-items: flex-end; }

@media (max-width: 980px) {
    .shared-hands { grid-template-columns: 1fr; }
    .hand-list { flex-direction: row; flex-wrap: wrap; max-height: none; }
}