/**
 * Poker Table Layout
 *
 * Shared component CSS for the poker table, seats, cards, actions, and dealer button.
 * Canonical source of truth. Imported by:
 *   - E:\Apps\poker-tool (base.html)
 *   - E:\Apps\video-engine (via Vite alias for hand-recap feature)
 *
 * Variables use CSS custom properties with fallback defaults so the file
 * can render standalone even when variables.css is not loaded.
 */

/* =====================================================================
   POKER TABLE CONTAINER
   ===================================================================== */

.poker-table-container {
    position: relative;
    flex: 1;
    min-width: 280px;
    max-width: 360px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}

.poker-table {
    position: absolute;
    top: 7%;
    left: 3%;
    right: 3%;
    bottom: 7%;
    background: linear-gradient(145deg, #181822 0%, #252535 50%, #181822 100%);
    border-radius: 50% / 50%;
    border: 8px solid #3a3a5a;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
}

.poker-table::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50% / 50%;
}

/* =====================================================================
   POT & COMMUNITY CARDS
   ===================================================================== */

.table-pot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.3);
    padding: 7px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    color: var(--action-call, #00e676);
    font-weight: 600;
    z-index: 6;
    white-space: nowrap;
}

.community-cards-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-45px);
    display: flex;
    gap: 4px;
    z-index: 3;
}

.community-cards-center .playing-card {
    --card-width: 51px;
    --card-height: 66px;
    --card-font: 20px;
}

/* =====================================================================
   SEAT WRAPPERS
   ===================================================================== */

.seat-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 11;
}

.seat-wrapper:has(.villain-cards-revealed-on-seat) {
    z-index: 20;
}

.seat-wrapper:has(.seat-action) {
    z-index: 25;
}

.seat-wrapper:has(.seat-action.villain-action) {
    z-index: 26;
}

/* =====================================================================
   SEAT CIRCLES
   ===================================================================== */

.table-seat {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-tooltip, #161636);
    border: 2px solid rgba(255, 255, 255, 0.14);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    transition: all 0.2s;
}

.table-seat.hero {
    border-color: var(--action-call, #00e676);
    background: var(--bg-tooltip, #161636);
}

.table-seat.villain {
    border-color: var(--accent, #ff1a5e);
    background: var(--bg-tooltip, #161636);
    box-shadow: 0 0 8px rgba(var(--accent-rgb, 255, 26, 94), 0.5);
    animation: pulse-villain 1.5s infinite;
}

@keyframes pulse-villain {
    0%, 100% { box-shadow: 0 0 8px rgba(var(--accent-rgb, 255, 26, 94), 0.5); }
    50%       { box-shadow: 0 0 16px rgba(var(--accent-rgb, 255, 26, 94), 0.8), 0 0 24px rgba(var(--accent-rgb, 255, 26, 94), 0.3); }
}

.table-seat.active {
    border-color: var(--action-raise, #aa00ff);
    box-shadow: 0 0 0 3px rgba(var(--action-raise-rgb, 170, 0, 255), 0.3);
    animation: pulse-seat 1.5s infinite;
}

@keyframes pulse-seat {
    0%, 100% { box-shadow: 0 0 0 3px rgba(var(--action-raise-rgb, 170, 0, 255), 0.3); }
    50%       { box-shadow: 0 0 0 6px rgba(var(--action-raise-rgb, 170, 0, 255), 0.15); }
}

.table-seat.folded {
    opacity: 1;
    animation: none;
}

.table-seat.villain.folded {
    animation: none;
    box-shadow: none;
}

.table-seat.allin-persisted {
    border-color: #ff1744;
    animation: pulse-allin 2s ease-in-out infinite;
}

@keyframes pulse-allin {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 23, 68, 0.5); }
    50%       { box-shadow: 0 0 16px rgba(255, 23, 68, 0.8), 0 0 24px rgba(255, 23, 68, 0.3); }
}

.table-seat.seat-empty {
    border: 2px dashed rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

.seat-position {
    color: var(--text-muted, #8080a8);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.table-seat.hero .seat-position,
.table-seat.villain .seat-position {
    color: inherit;
}

.seat-label {
    font-size: 0.55rem;
    color: var(--text, #f0f0f0);
    margin-top: 1px;
}

.table-seat.hero .seat-label {
    color: var(--action-call, #00e676);
}

.table-seat.villain .seat-label {
    color: var(--accent, #ff1a5e);
}

/* =====================================================================
   DEALER BUTTON
   ===================================================================== */

.dealer-button {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #e0e0e0);
    border: 2px solid #888;
    color: #333;
    font-size: 0.7rem;
    font-family: 'Arial Black', 'Arial Bold', Arial, sans-serif;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding-bottom: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 30;
}

/* =====================================================================
   SEAT ACTION FILLS
   Replaces pill overlays. The seat circle itself becomes the action indicator.
   Intensity hierarchy: check (grey) → call (green) → bet (amber) → raise (bright amber) → all-in (red)
   All border colors sourced from existing variables.css tokens.
   ===================================================================== */

/* Base fill: same dimensions as .table-seat (44px default) */
.seat-action {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #303050;
    background: #2a2a3c;
    color: #8080a0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 4px;
    text-align: center;
    line-height: 1.15;
    z-index: 12;
}

/* Check — muted grey, passive, no money moved */
.seat-action.action-check {
    --action-color: #9090b8;
    background: #1e1e30;
    border-color: #9090b8;
    color: rgba(220,220,240,0.75);
}

/* Call — green, --action-call / --winner-green */
.seat-action.action-call {
    --action-color: #00e676;
    background: #0a2818;
    border-color: #00e676;
    color: white;
    box-shadow: 0 0 12px rgba(0,230,118,0.55), 0 0 22px rgba(0,230,118,0.2);
}

/* Bet — amber, --warning-alt #ffa000 */
.seat-action.action-bet {
    --action-color: #ffa000;
    background: #2e1800;
    border-color: #ffa000;
    color: white;
    box-shadow: 0 0 12px rgba(255,160,0,0.65), 0 0 24px rgba(255,160,0,0.25);
}

.seat-action.action-bet.action-current {
    animation: pulse-bet 1.6s infinite;
}

@keyframes pulse-bet {
    0%, 100% { box-shadow: 0 0 12px rgba(255,160,0,0.65), 0 0 24px rgba(255,160,0,0.25); }
    50%       { box-shadow: 0 0 20px rgba(255,160,0,0.9),  0 0 38px rgba(255,160,0,0.4); }
}

/* Raise — same amber as bet */
.seat-action.action-raise {
    --action-color: #ffa000;
    background: #2e1800;
    border-color: #ffa000;
    color: white;
    box-shadow: 0 0 12px rgba(255,160,0,0.65), 0 0 24px rgba(255,160,0,0.25);
}

.seat-action.action-raise.action-current {
    animation: pulse-raise 1.4s infinite;
}

@keyframes pulse-raise {
    0%, 100% { box-shadow: 0 0 12px rgba(255,160,0,0.65), 0 0 24px rgba(255,160,0,0.25); }
    50%       { box-shadow: 0 0 22px rgba(255,160,0,0.9),  0 0 40px rgba(255,160,0,0.4); }
}

/* All-in — red, --loser-red / --error #ff1744 */
.seat-action.action-allin {
    --action-color: #ff1744;
    background: #2e0a10;
    border-color: #ff1744;
    color: white;
    box-shadow: 0 0 12px rgba(255,23,68,0.7), 0 0 24px rgba(255,23,68,0.3);
    animation: pulse-allin 1.3s infinite;
}

.seat-action.action-allin.action-current {
    animation: pulse-allin 1.3s infinite;
}

@keyframes pulse-allin {
    0%, 100% { box-shadow: 0 0 12px rgba(255,23,68,0.7),  0 0 24px rgba(255,23,68,0.3); }
    50%       { box-shadow: 0 0 22px rgba(255,23,68,0.95), 0 0 42px rgba(255,23,68,0.5); }
}

/* Ripple ring: fires once on the current action seat when a step advances.
   --action-color is set per action type and inherited by ::before. */
@keyframes action-enter-ripple {
    0%   { transform: scale(1);   opacity: 0.85; }
    100% { transform: scale(1.8); opacity: 0; }
}

.seat-action.action-current::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--action-color, #ffa000);
    pointer-events: none;
    animation: action-enter-ripple 0.9s ease-out forwards;
}

/* Fold — dark grey, uses --action-fold #646464 border */
.seat-action.fold,
.seat-action.action-fold {
    --action-color: #646464;
    background: #111118;
    border-color: #646464;
    color: rgba(150,150,165,0.75);
    animation: none;
}

/* In step-by-step replay, suppress glow on previous (non-current) actions.
   All-in is excluded — it always glows to signal a player is committed. */
.playback-card .seat-action.action-call:not(.action-current),
.playback-card .seat-action.action-bet:not(.action-current),
.playback-card .seat-action.action-raise:not(.action-current) {
    box-shadow: none;
}
.playback-card .layout-full-table .hero-action-above.call:not(.action-current),
.playback-card .layout-full-table .hero-action-above.action-call:not(.action-current),
.playback-card .layout-full-table .hero-action-above.bet:not(.action-current),
.playback-card .layout-full-table .hero-action-above.action-bet:not(.action-current),
.playback-card .layout-full-table .hero-action-above.raise:not(.action-current),
.playback-card .layout-full-table .hero-action-above.action-raise:not(.action-current) {
    box-shadow: none;
}

/* Fallback: villain-action without a recognised action-type class (excludes fold) */
.seat-action.villain-action:not(.action-check):not(.action-call):not(.action-bet):not(.action-raise):not(.action-allin):not(.fold):not(.action-fold) {
    background: #2e1800;
    border-color: #ffca28;
    color: white;
}

/* Hero action: no separate color rule — hero fills use action-type colors.
   Hero identity is signaled by the green border on .table-seat.hero, not the fill. */

/* Suppress the villain ring glow when an action fill is covering the seat.
   The fill itself provides the color signal — the red ring underneath is noise. */
.seat-wrapper:has(.seat-action:not(.fold)) .table-seat.villain {
    animation: none;
    border-color: transparent;
    box-shadow: none;
}

/* Suppress hero seat border when hero-action-above provides its own colored border */
.seat-wrapper:has(.hero-action-above) .table-seat.hero {
    border-color: transparent;
}

/* =====================================================================
   ACTION TEXT — two-line layout (verb stacked above amount)
   ===================================================================== */

.action-verb {
    font-size: 0.48rem;
    font-weight: 700;
    opacity: 0.85;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: block;
}

.action-amount {
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.1;
    display: block;
}

/* Folded villain seat — blends into table background */
.table-seat.folded:not(.hero) {
    background: #111118;
    border-color: #1c1c28;
    box-shadow: none;
}

.table-seat.folded:not(.hero) .seat-position,
.table-seat.folded:not(.hero) .seat-label {
    visibility: hidden;
}

/* =====================================================================
   9-SEAT POSITION LAYOUT (default)
   Arc-length equalized on the table border ellipse
   rx=46.8% ry=41.9% measured from the brown border ring midpoint
   ===================================================================== */

.seat-wrapper-btn  { top: 91.9%; left: 50%;   transform: translate(-50%, -50%); }
.seat-wrapper-sb   { top: 85.5%; left: 25.1%; transform: translate(-50%, -50%); }
.seat-wrapper-bb   { top: 60.8%; left: 4.8%;  transform: translate(-50%, -50%); }
.seat-wrapper-utg  { top: 23.6%; left: 13.6%; transform: translate(-50%, -50%); }
.seat-wrapper-utg1 { top: 9.6%;  left: 37.5%; transform: translate(-50%, -50%); }
.seat-wrapper-mp   { top: 9.6%;  left: 62.6%; transform: translate(-50%, -50%); }
.seat-wrapper-lj   { top: 23.6%; left: 86.4%; transform: translate(-50%, -50%); }
.seat-wrapper-hj   { top: 60.8%; left: 95.2%; transform: translate(-50%, -50%); }
.seat-wrapper-co   { top: 85.5%; left: 74.9%; transform: translate(-50%, -50%); }

.btn-dealer-btn  { top: 81.4%; left: 57%;   transform: translate(-50%, -50%); }
.btn-dealer-sb   { top: 76.6%; left: 31.3%; transform: translate(-50%, -50%); }
.btn-dealer-bb   { top: 58.1%; left: 16.1%; transform: translate(-50%, -50%); }
.btn-dealer-utg  { top: 30.2%; left: 22.7%; transform: translate(-50%, -50%); }
.btn-dealer-utg1 { top: 19.7%; left: 40.6%; transform: translate(-50%, -50%); }
.btn-dealer-mp   { top: 19.7%; left: 59.5%; transform: translate(-50%, -50%); }
.btn-dealer-lj   { top: 30.2%; left: 77.3%; transform: translate(-50%, -50%); }
.btn-dealer-hj   { top: 58.1%; left: 83.9%; transform: translate(-50%, -50%); }
.btn-dealer-co   { top: 76.6%; left: 68.7%; transform: translate(-50%, -50%); }

/* =====================================================================
   6-SEAT LAYOUT
   ===================================================================== */

/* 6-seat ellipse: rx=46.8% ry=41.9% center=(50%,50%). SB/CO pulled toward hero (~222°/318°), BB/MP pulled toward UTG (~138°/42°) */
.poker-table-container[data-seats="6"] .seat-wrapper-btn { top: 91.9%; left: 50%;   }
.poker-table-container[data-seats="6"] .seat-wrapper-sb  { top: 78.0%; left: 15.2%; }
.poker-table-container[data-seats="6"] .seat-wrapper-bb  { top: 22.0%; left: 15.2%; }
.poker-table-container[data-seats="6"] .seat-wrapper-utg { top: 8.1%;  left: 50%;   }
.poker-table-container[data-seats="6"] .seat-wrapper-mp  { top: 22.0%; left: 84.8%; }
.poker-table-container[data-seats="6"] .seat-wrapper-co  { top: 78.0%; left: 84.8%; }

.poker-table-container[data-seats="6"] .btn-dealer-btn { top: 83%;  left: 57%;   }
.poker-table-container[data-seats="6"] .btn-dealer-sb  { top: 72%;  left: 23%;   }
.poker-table-container[data-seats="6"] .btn-dealer-bb  { top: 28%;  left: 23%;   }
.poker-table-container[data-seats="6"] .btn-dealer-utg { top: 17%;  left: 43%;   }
.poker-table-container[data-seats="6"] .btn-dealer-mp  { top: 28%;  left: 77%;   }
.poker-table-container[data-seats="6"] .btn-dealer-co  { top: 72%;  left: 77%;   }

/* =====================================================================
   2-SEAT LAYOUT
   ===================================================================== */

.poker-table-container[data-seats="2"] .seat-wrapper-btn { top: 90%; left: 50%; }
.poker-table-container[data-seats="2"] .seat-wrapper-bb  { top: 10%; left: 50%; }
.poker-table-container[data-seats="2"] .btn-dealer-btn   { top: 82%; left: 57%; }
.poker-table-container[data-seats="2"] .btn-dealer-bb    { top: 18%; left: 43%; }

/* =====================================================================
   3-SEAT LAYOUT
   ===================================================================== */

/* 3-seat ellipse: rx=46.8% ry=41.9% center=(50%,50%), 120° intervals from hero at bottom */
.poker-table-container[data-seats="3"] .seat-wrapper-btn { top: 91.9%; left: 50.0%; }
.poker-table-container[data-seats="3"] .seat-wrapper-sb  { top: 29.1%; left: 9.5%;  }
.poker-table-container[data-seats="3"] .seat-wrapper-bb  { top: 29.1%; left: 90.5%; }

.poker-table-container[data-seats="3"] .btn-dealer-btn { top: 83.0%; left: 57.0%; }
.poker-table-container[data-seats="3"] .btn-dealer-sb  { top: 33.7%; left: 18.4%; }
.poker-table-container[data-seats="3"] .btn-dealer-bb  { top: 33.7%; left: 81.6%; }

/* =====================================================================
   4-SEAT LAYOUT
   ===================================================================== */

/* 4-seat ellipse: rx=46.8% ry=41.9% center=(50%,50%), 90° intervals from hero at bottom */
.poker-table-container[data-seats="4"] .seat-wrapper-btn { top: 91.9%; left: 50.0%; }
.poker-table-container[data-seats="4"] .seat-wrapper-sb  { top: 50.0%; left: 3.2%;  }
.poker-table-container[data-seats="4"] .seat-wrapper-bb  { top:  8.1%; left: 50.0%; }
.poker-table-container[data-seats="4"] .seat-wrapper-co  { top: 50.0%; left: 96.8%; }

.poker-table-container[data-seats="4"] .btn-dealer-btn { top: 83.0%; left: 57.0%; }
.poker-table-container[data-seats="4"] .btn-dealer-sb  { top: 50.0%; left: 13.5%; }
.poker-table-container[data-seats="4"] .btn-dealer-bb  { top: 17.3%; left: 43.0%; }
.poker-table-container[data-seats="4"] .btn-dealer-co  { top: 50.0%; left: 86.5%; }

/* =====================================================================
   5-SEAT LAYOUT
   ===================================================================== */

/* 5-seat ellipse: rx=46.8% ry=41.9% center=(50%,50%), 72° intervals from hero at bottom */
.poker-table-container[data-seats="5"] .seat-wrapper-btn { top: 91.9%; left: 50.0%; }
.poker-table-container[data-seats="5"] .seat-wrapper-sb  { top: 62.9%; left:  5.5%; }
.poker-table-container[data-seats="5"] .seat-wrapper-bb  { top: 16.1%; left: 22.5%; }
.poker-table-container[data-seats="5"] .seat-wrapper-utg { top: 16.1%; left: 77.5%; }
.poker-table-container[data-seats="5"] .seat-wrapper-co  { top: 62.9%; left: 94.5%; }

.poker-table-container[data-seats="5"] .btn-dealer-btn { top: 83.0%; left: 57.0%; }
.poker-table-container[data-seats="5"] .btn-dealer-sb  { top: 60.1%; left: 15.3%; }
.poker-table-container[data-seats="5"] .btn-dealer-bb  { top: 23.6%; left: 28.6%; }
.poker-table-container[data-seats="5"] .btn-dealer-utg { top: 23.6%; left: 71.4%; }
.poker-table-container[data-seats="5"] .btn-dealer-co  { top: 60.1%; left: 84.7%; }

/* =====================================================================
   7-SEAT LAYOUT
   ===================================================================== */

/* 7-seat ellipse: rx=46.8% ry=41.9% center=(50%,50%), ~51.4° intervals from hero at bottom */
.poker-table-container[data-seats="7"] .seat-wrapper-btn { top: 91.9%; left: 50.0%; }
.poker-table-container[data-seats="7"] .seat-wrapper-sb  { top: 76.1%; left: 13.4%; }
.poker-table-container[data-seats="7"] .seat-wrapper-bb  { top: 40.7%; left:  4.4%; }
.poker-table-container[data-seats="7"] .seat-wrapper-utg { top: 12.2%; left: 29.7%; }
.poker-table-container[data-seats="7"] .seat-wrapper-mp  { top: 12.2%; left: 70.3%; }
.poker-table-container[data-seats="7"] .seat-wrapper-hj  { top: 40.7%; left: 95.6%; }
.poker-table-container[data-seats="7"] .seat-wrapper-co  { top: 76.1%; left: 86.6%; }

.poker-table-container[data-seats="7"] .btn-dealer-btn { top: 83.0%; left: 57.0%; }
.poker-table-container[data-seats="7"] .btn-dealer-sb  { top: 70.4%; left: 21.5%; }
.poker-table-container[data-seats="7"] .btn-dealer-bb  { top: 42.7%; left: 14.4%; }
.poker-table-container[data-seats="7"] .btn-dealer-utg { top: 20.5%; left: 34.2%; }
.poker-table-container[data-seats="7"] .btn-dealer-mp  { top: 20.5%; left: 65.8%; }
.poker-table-container[data-seats="7"] .btn-dealer-hj  { top: 42.7%; left: 85.6%; }
.poker-table-container[data-seats="7"] .btn-dealer-co  { top: 70.4%; left: 78.5%; }

/* =====================================================================
   FULL-TABLE LAYOUT (layout-full-table)
   Used by quiz and video recap for larger table with hero cards on seat
   ===================================================================== */

.layout-full-table .table-seat {
    width: clamp(48px, 10vw, 76px);
    height: clamp(48px, 10vw, 76px);
    font-size: clamp(0.55rem, 1.5vw, 0.75rem);
    position: relative;
    z-index: 10; /* above villain-cards (z-index: 1) and hero-cards-on-seat (z-index: 4) */
}

/* Scale fill circle and text to match seat clamp size */
.layout-full-table .seat-action {
    width: clamp(48px, 10vw, 76px);
    height: clamp(48px, 10vw, 76px);
}

.layout-full-table .action-verb {
    font-size: clamp(0.44rem, 1.1vw, 0.6rem);
}

.layout-full-table .action-amount {
    font-size: clamp(0.6rem, 1.6vw, 0.85rem);
}

/* On mobile the vw preferred value is too small — the circle is 48px but text shrinks
   to the clamp floor. Use the rem maxima directly so text fills the available space. */
@media (max-width: 768px) {
    .layout-full-table .action-verb   { font-size: 0.5rem; }
    .layout-full-table .action-amount { font-size: 0.72rem; }
}

/* Hero fill uses the same clamp font sizes as villain fills.
   "Raises" is the longest verb — the clamp is sized so it fits at minimum seat width. */

.layout-full-table .table-seat.hero {
    width: 125px;
    height: 50px;
    border-radius: 12px;
    background: var(--bg-tooltip, #161636);
    border-width: 2px;
    border-style: solid;
    /* border-color inherits from .table-seat.hero base rule */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    z-index: 15;
}

.layout-full-table .table-seat.hero .hero-action-inside {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(var(--action-call-rgb, 0, 230, 118), 0.9);
    color: white;
}

.layout-full-table .seat-label {
    font-size: clamp(0.42rem, 1.2vw, 0.6rem);
    letter-spacing: -0.2px;
    color: var(--text-muted, #8080a8);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: clamp(38px, 8vw, 56px);
    white-space: nowrap;
}

.layout-full-table .table-seat.hero .seat-label {
    font-size: 0.65rem;
    max-width: none;
}

/* Hero action: fills the hero rectangle on desktop, circle on mobile.
   Width/height match .table-seat.hero (125px × 50px) explicitly — calc(100%) would
   reference the seat-wrapper height which includes the hero cards above. */
.layout-full-table .hero-action-above {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 125px;
    height: 50px;
    border-radius: 10px;
    border: 2px solid #9090b8;
    background: #1e1e30;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 4px;
    z-index: 16;
}

.layout-full-table .hero-action-above.check,
.layout-full-table .hero-action-above.action-check {
    --action-color: #9090b8;
    background: #1e1e30;
    border-color: #9090b8;
    color: rgba(220,220,240,0.75);
    box-shadow: none;
}

.layout-full-table .hero-action-above.call,
.layout-full-table .hero-action-above.action-call {
    --action-color: #00e676;
    background: #0a2818;
    border-color: #00e676;
    box-shadow: 0 0 8px rgba(0,230,118,0.4);
}

.layout-full-table .hero-action-above.bet,
.layout-full-table .hero-action-above.action-bet {
    --action-color: #ffa000;
    background: #2e1800;
    border-color: #ffa000;
    box-shadow: 0 0 8px rgba(255,160,0,0.4);
}

.layout-full-table .hero-action-above.raise,
.layout-full-table .hero-action-above.action-raise {
    --action-color: #ffa000;
    background: #2e1800;
    border-color: #ffa000;
    box-shadow: 0 0 8px rgba(255,160,0,0.4);
}

.layout-full-table .hero-action-above.allin,
.layout-full-table .hero-action-above.action-allin {
    --action-color: #ff1744;
    background: #2e0a10;
    border-color: #ff1744;
    box-shadow: 0 0 12px rgba(255,23,68,0.7), 0 0 24px rgba(255,23,68,0.3);
    animation: pulse-allin 1.3s infinite;
}

.layout-full-table .hero-action-above.fold,
.layout-full-table .hero-action-above.action-fold {
    --action-color: #646464;
    background: #111118;
    border-color: #646464;
    color: rgba(150,150,165,0.75);
    box-shadow: none;
}

/* Ripple ring on current hero action — matches the rectangle shape on desktop,
   inherits --action-color set on each .hero-action-above.action-* rule above. */
.layout-full-table .hero-action-above.action-current::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    border: 2px solid var(--action-color, #ffa000);
    pointer-events: none;
    animation: action-enter-ripple 0.9s ease-out forwards;
}

@media (max-width: 768px) {
    .layout-full-table .hero-action-above.action-current::before {
        border-radius: 50%;
    }
}

/*
   BACKUP — previous hero card layout (flat, above seat):
   .layout-full-table .seat-wrapper-btn .hero-cards-on-seat {
       position: absolute;
       top: auto;
       bottom: calc(100% - 5px);
       left: 50%;
       transform: translateX(-50%);
       display: flex;
       align-items: flex-start;
       height: 66px;
       gap: 6px;
       z-index: 4;
   }
   .layout-full-table .hero-cards-on-seat .playing-card {
       --card-width: 51px;
       --card-height: 66px;
       --card-font: 20px;
   }
*/

/* Hero cards — centered group anchored to seat center (approach C).
   --card-width drives all sizing; left offsets are proportional fractions so the
   pair stays centered at every card size without mobile-specific overrides. */
.layout-full-table .seat-wrapper-btn .hero-cards-on-seat {
    position: absolute;
    top: auto; /* cancels top: 65% bleed from ranges.css */
    bottom: 44px;
    left: 50%;
    transform: none;
    display: block;
    width: 0;
    height: 0;
    z-index: 4;
    --card-width: 51px;
}

.layout-full-table .hero-cards-on-seat .cards-group {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(var(--card-width) * 1.667);
    height: calc(var(--card-width) * 1.294);
    transform: translateX(-50%);
}

.layout-full-table .hero-cards-on-seat .cards-group .playing-card {
    --card-height: calc(var(--card-width) * 1.294);
    --card-font: calc(var(--card-width) * 0.39);
    position: absolute;
    bottom: 0;
    transform-origin: bottom center;
}

.layout-full-table .hero-cards-on-seat .cards-group .playing-card:nth-child(1) {
    left: 0;
    transform: rotate(-8deg);
    z-index: 1;
}

.layout-full-table .hero-cards-on-seat .cards-group .playing-card:nth-child(2) {
    left: calc(var(--card-width) * 0.667);
    transform: rotate(5deg);
    z-index: 2;
    filter: drop-shadow(-1px 1px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.4));
}


/* Hero cards go muted when hero folds -- add .folded to .hero-cards-on-seat.
   Use grayscale + brightness to dim the cards while keeping them fully opaque --
   transparency caused overlap artifacts between the two cards. */
.layout-full-table .hero-cards-on-seat.folded .playing-card {
    filter: grayscale(1) brightness(0.5);
    opacity: 1;
}

.layout-full-table .community-cards-center {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(clamp(-15px, calc(12px - 2.5vw), 8px));
    display: flex;
    gap: 4px;
    z-index: 5;
}

.layout-full-table .community-cards-center .playing-card {
    --card-width: clamp(24px, min(51px, calc(100vw * 0.07)), 51px);
    --card-height: calc(var(--card-width) * 1.294);
    --card-font: calc(var(--card-width) * 0.392);
}

/* Preflop: no community cards — raise pot above hero's cards */
.layout-full-table .table-pot {
    top: 37%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
}

/* Flop+: community cards present — pot moves above them.
   translateY matches community-cards-center so both shift together at all viewport widths */
.layout-full-table .poker-table:has(.community-cards-center) .table-pot {
    top: 25%;
    transform: translate(-50%, -50%) translateY(clamp(-15px, calc(12px - 2.5vw), 8px));
}

/* 9-seat positions for full-table layout */
.layout-full-table .seat-wrapper-btn  { top: 91.9%; left: 50%;   transform: translate(-50%, -50%); }
.layout-full-table .seat-wrapper-sb   { top: 85.5%; left: 25.1%; transform: translate(-50%, -50%); }
.layout-full-table .seat-wrapper-bb   { top: 60.8%; left: 4.8%;  transform: translate(-50%, -50%); }
.layout-full-table .seat-wrapper-utg  { top: 23.6%; left: 13.6%; transform: translate(-50%, -50%); }
.layout-full-table .seat-wrapper-utg1 { top: 9.6%;  left: 37.5%; transform: translate(-50%, -50%); }
.layout-full-table .seat-wrapper-mp   { top: 9.6%;  left: 62.6%; transform: translate(-50%, -50%); }
.layout-full-table .seat-wrapper-lj   { top: 23.6%; left: 86.4%; transform: translate(-50%, -50%); }
.layout-full-table .seat-wrapper-hj   { top: 60.8%; left: 95.2%; transform: translate(-50%, -50%); }
.layout-full-table .seat-wrapper-co   { top: 85.5%; left: 74.9%; transform: translate(-50%, -50%); }

/* =====================================================================
   VILLAIN CARD BACKS
   Two face-down cards peeking from behind active villain seats.
   The anchor point (bottom: 70%) sits inside the seat circle so the
   seat's opaque background occludes the lower portion of the cards.
   Only the rotated tops are visible above the rim.

   Toggle off: add class "no-villain-cards" to the .layout-full-table element.
   ===================================================================== */

.layout-full-table .villain-cards {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    bottom: 70%;
    z-index: 1;
    --card-width: 32px;
}

.layout-full-table .villain-cards .cards-group {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(var(--card-width) * 1.667);
    height: calc(var(--card-width) * 1.294);
    transform: translateX(-50%);
}

.layout-full-table .villain-cards .cards-group .card-back {
    position: absolute;
    bottom: 0;
    transform-origin: bottom center;
    width: var(--card-width);
    height: calc(var(--card-width) * 1.294);
    min-width: unset;
    border-radius: 3px;
    overflow: hidden;
}

.layout-full-table .villain-cards .cards-group .card-back:nth-child(1) {
    left: 0;
    transform: rotate(-8deg);
}

.layout-full-table .villain-cards .cards-group .card-back:nth-child(2) {
    left: calc(var(--card-width) * 0.667);
    transform: rotate(5deg);
    box-shadow: -2px 5px 14px rgba(0, 0, 0, 0.6);
}

/* Toggle: add "no-villain-cards" to the .layout-full-table element to hide */
.layout-full-table.no-villain-cards .villain-cards {
    display: none;
}

/*
   Blue-edge style: dark blue card back with a 1px light-blue border.
   Overrides background/border from practice.css .card-back.
*/
.card-back.card-back-blue-edge {
    background: #a8c4e0;
    border: none;
}

/* Dark interior inset 1px — leaves 1px of light-blue background visible as the edge */
.card-back.card-back-blue-edge::before {
    content: '';
    position: absolute;
    top: 1px; left: 1px; right: 1px; bottom: 1px;
    background: linear-gradient(135deg, #1a365d 0%, #2d4a6f 50%, #1a365d 100%);
    border-radius: 2px;
    border: none;
}

/* Diagonal crosshatch pattern layered over the dark interior */
.card-back.card-back-blue-edge::after {
    content: '';
    position: absolute;
    top: 1px; left: 1px; right: 1px; bottom: 1px;
    background-image:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 6px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 6px);
    pointer-events: none;
}

/* =====================================================================
   END VILLAIN CARD BACKS
   ===================================================================== */

/* Villain revealed cards at showdown — same centered-group pattern as hero */
.layout-full-table .villain-cards-revealed-on-seat {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    bottom: calc(75% + 5px);
    z-index: 2;
    --card-width: 51px;
}

.layout-full-table .villain-cards-revealed-on-seat .cards-group {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(var(--card-width) * 1.667);
    height: calc(var(--card-width) * 1.294);
    transform: translateX(-50%);
}

.layout-full-table .villain-cards-revealed-on-seat .cards-group .playing-card {
    --card-height: calc(var(--card-width) * 1.294);
    --card-font: calc(var(--card-width) * 0.39);
    position: absolute;
    bottom: 0;
    transform-origin: bottom center;
}

.layout-full-table .villain-cards-revealed-on-seat .cards-group .playing-card:nth-child(1) {
    left: 0;
    transform: rotate(-8deg);
    z-index: 1;
}

.layout-full-table .villain-cards-revealed-on-seat .cards-group .playing-card:nth-child(2) {
    left: calc(var(--card-width) * 0.667);
    transform: rotate(5deg);
    z-index: 2;
    filter: drop-shadow(-1px 1px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.4));
}

/* Fluid sizing -- fills the parent container up to 750px.
   Each context (sessions-table-outer, quiz-left-column) provides its own cap via max-width. */
.layout-full-table .poker-table-container {
    width: 100%;
    max-width: 750px;
    min-width: 280px;
    margin: 0 auto;
}

/* Dealer button: sit beside the BTN seat (not above it, where hero cards peek).
   Desktop hero is a 125x50 box. Match the 1200px-specific rule so position is
   consistent regardless of whether the Q&A column is stacked or side-by-side. */
@media (min-width: 769px) {
    .layout-full-table .btn-dealer-btn { top: 80%; left: 60%; }
}

/* Mobile: ≤768px */
@media (max-width: 768px) {
    .layout-full-table .poker-table-container {
        width: 100%;
        margin: 0 auto;
    }

    /* Hero cards mobile: override --card-width on the anchor; the cards-group and
       card offsets (all calc-based) scale automatically. No per-card overrides needed. */
    .layout-full-table .seat-wrapper-btn .hero-cards-on-seat {
        display: block;
        bottom: calc(clamp(38px, 8.5vw, 68px) + 5px);
        left: 50%;
        --card-width: clamp(30px, 7vw, 40px);
    }

    /* Villain backs: smaller than hero cards */
    .layout-full-table .villain-cards {
        --card-width: clamp(20px, 4.5vw, 32px);
    }

    /* Villain revealed: match hero card size */
    .layout-full-table .villain-cards-revealed-on-seat {
        --card-width: clamp(30px, 7vw, 40px);
    }
}


@media (max-width: 768px) {
    /* Hero action becomes a circle fill to match villain seats on mobile */
    .layout-full-table .hero-action-above {
        width: clamp(48px, 10vw, 76px);
        height: clamp(48px, 10vw, 76px);
        border-radius: 50%;
    }
    .layout-full-table .table-seat.hero {
        width: clamp(48px, 10vw, 76px);
        height: clamp(48px, 10vw, 76px);
        border-radius: 50%;
        /* border-color inherits from .table-seat.hero base rule */
    }

    /* Dealer button beside the BTN seat on mobile, matching desktop approach */
    .layout-full-table .btn-dealer-btn {
        top: 77%;
        left: 63%;
    }
}

@media (max-width: 1199px) {
    .btn-dealer-btn {
        top: 77%;
        left: 56%;
    }
}

@media (min-width: 769px) {
    .layout-full-table .table-pot { font-size: 1.05rem; }
}

/* Tablet/mid: tighten pot padding */
@media (max-width: 768px) and (min-width: 481px) {
    .table-pot {
        padding: 4px 10px;
    }
}

/* Small mobile: reduce pot size; seat fills and text use clamp so no override needed */
@media (max-width: 480px) {
    .table-pot {
        padding: 3px 8px;
        font-size: 0.72rem;
    }
    /* With community cards: pot was crowding the cards — push it higher */
    .layout-full-table .poker-table:has(.community-cards-center) .table-pot {
        top: 23%;
        font-size: 0.68rem;
        transform: translate(-50%, -50%);
    }
    .layout-full-table .community-cards-center .playing-card {
        --card-width: clamp(22px, 8vw, 38px);
    }
    /* Pull dealer button further into the table so it doesn't overlap the BTN seat */
    .btn-dealer-btn {
        top: 70%;
    }
    /* Taller table on smallest phones — gives hero cards and community cards more breathing room */
    .layout-full-table .poker-table-container {
        aspect-ratio: 3 / 2;
    }
}

@media (min-width: 1200px) {
    .quiz-hand-card.layout-full-table .btn-dealer-btn { top: 80%; left: 62%; }
}

/* On desktop the leftmost seats (BB at left:4.8%, UTG at left:13.6%) extend slightly
   past the container edge and crowd the quiz card's padding boundary. Shrink the
   container by 40px and let margin:auto re-centre it so every seat has ~20px of
   clearance from the column edge without breaking the percentage-based positions. */
@media (min-width: 769px) {
    .quiz-hand-card.layout-full-table .poker-table-container {
        width: calc(100% - 40px);
    }
}

/* Session table outer wrapper -- centres the table in all session contexts */
.sessions-table-outer {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Cap sessions table at the same effective width as the quiz left column (660px)
   so seat-to-ring proportions look identical in both contexts. */
@media (min-width: 769px) {
    .sessions-table-outer .poker-table-container {
        max-width: 660px;
    }
}

/* Hide community cards in non-full-table quiz layout (they live in the mobile card row instead) */
.quiz-hand-card:not(.layout-full-table) .community-cards-center {
    display: none;
}

/* =====================================================================
   SHARED MOBILE CARD GROUPS
   ===================================================================== */

.hand-cards-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 10px 14px;
    border-radius: 8px;
}

.hand-cards-group--hero {
    background: rgba(var(--action-call-rgb, 0, 230, 118), 0.1);
    border: 1px solid rgba(var(--action-call-rgb, 0, 230, 118), 0.35);
    display: none;
}

.hand-cards-group--board {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.hand-cards-group__label {
    font-size: 0.55rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted, #8080a8);
    margin-bottom: 2px;
}

.hand-cards-group--hero .hand-cards-group__label {
    color: var(--action-call, #00e676);
}

.hand-cards-group__cards {
    display: flex;
    gap: 4px;
    justify-content: center;
}