/* Styling for generated seats */
.seat {
    isolation: isolate !important;
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50 !important;
}

.seat:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

.seat.occupied {
    cursor: default;
}

/* Empty Seat Design */
.seat.empty .empty-seat-content {
    background: rgba(10, 10, 10, 0.7);
    border: 1px dashed rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    padding: 8px 16px;
    color: #aaa;
    font-size: 12px !important;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 90px !important;
    min-height: 55px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.seat.empty .empty-seat-content:hover {
    background: rgba(30, 30, 30, 0.9);
    border-color: rgba(255, 255, 255, 0.8);
    color: #fff;
}

/* Main Unified Container (The Plaque) */
.player-plaque,
.player-info,
.seat-info {
    display: flex;
    align-items: stretch;
    background: linear-gradient(to bottom, #2a2a2a, #0a0a0a);
    border: 2px solid #444;
    border-radius: 8px;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        0 6px 12px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    position: relative !important;
    z-index: 9999 !important;
}

/* Visual order adjustment for right-side seats */
.player-plaque.right-side {
    flex-direction: row-reverse;
}

/* Internal Sections - No individual borders or shadows */
.plaque-avatar-section {
    width: 65px !important;
    height: 65px !important;
    background-color: #222;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-right: 1px solid rgba(0, 0, 0, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Adjust internal borders based on side */
.player-plaque.right-side .plaque-avatar-section {
    border-right: none;
    border-left: 1px solid rgba(0, 0, 0, 0.5);
}

.plaque-info-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 15px !important;
    min-width: 110px !important;
    text-align: center;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
}

.player-name {
    color: #fff;
    font-size: 13px !important;
    font-weight: bold;
    margin-bottom: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100px !important;
}

.player-balance {
    color: #4ade80;
    font-size: 16px !important;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.waiting-next-hand-badge {
    color: #f8d36b;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.15;
    margin-top: 3px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Folded state styling */
.seat.folded .player-plaque,
.seat.folded .player-cards {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* The Timebank Ring container */
.timebank-ring {
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 12px;
    z-index: 9990 !important;
    --timer-pct: 100%;
    --timer-color: #00d2ff;
    background: conic-gradient(var(--timer-color) var(--timer-pct),
            transparent 0);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* State Classes */
.timebank-ring.active {
    opacity: 1;
}

.timebank-ring.warning {
    --timer-color: #ffa500;
}

.timebank-ring.danger {
    --timer-color: #ff3333;
    animation: timebank-pulse 0.5s infinite alternate;
}

@keyframes timebank-pulse {
    from {
        box-shadow: 0 0 5px #ff3333;
    }

    to {
        box-shadow: 0 0 20px #ff3333;
    }
}

/* Seat Alignment Overrides */
/* Adjustment for visual symmetry between top seats.
   Scoped to 9-seat tables only : in 9-seat, seat slot 5 sits at the top
   row (angle 290°) and benefits from the explicit 4% top offset to
   sync with seat slot 4. In 6-seat, seat slot 5 is at angle 30° (bottom-
   right, mirror of bottom-left seat slot 1) and the top:4% rule would
   push it to the top-right corner — exact bug reported on
   table_5 / table_7 / etc. (the 6-seat demo tables). */
body[data-max-seats="9"] .visual-5 {
    bottom: auto !important;
    margin-top: 0 !important;
    top: 4% !important;
}

body[data-max-seats="3"] .seat {
    left: var(--seat-left) !important;
    top: var(--seat-top) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
}

body[data-max-seats="3"] .seat:hover {
    transform: translate(-50%, -50%) scale(1.05) !important;
}

body[data-max-seats="3"] .seat>div {
    transform: none !important;
}

body[data-max-seats="3"] .visual-bet-0,
body[data-max-seats="3"] .visual-bet-1,
body[data-max-seats="3"] .visual-bet-2 {
    margin-left: 0 !important;
}

body[data-max-seats="3"] .visual-bet-1 {
    margin-left: 14px !important;
}

body[data-max-seats="3"] .visual-0 .player-plaque-wrapper .pucks-container,
body[data-max-seats="3"] .visual-1 .player-plaque-wrapper .pucks-container,
body[data-max-seats="3"] .visual-2 .player-plaque-wrapper .pucks-container {
    margin-left: 0 !important;
}

body[data-max-seats="3"] .visual-1 .player-plaque-wrapper .pucks-container,
body[data-max-seats="3"] .visual-2 .player-plaque-wrapper .pucks-container {
    top: calc(100% + 6px) !important;
    bottom: auto !important;
    transform: none !important;
}

body[data-max-seats="3"] .visual-1 .player-plaque-wrapper .pucks-container {
    right: 0 !important;
    left: auto !important;
}

body[data-max-seats="3"] .visual-2 .player-plaque-wrapper .pucks-container {
    left: 0 !important;
    right: auto !important;
}

/* Desktop Positioning Layer (Large Viewports) */
@media (min-width: 951px) {

    /* Right-side seat alignment (Vertical sync with Seat 4) */
    .visual-6 {
        bottom: auto !important;
        margin-top: 0 !important;
        margin-right: 0 !important;
        top: 25% !important;
        left: auto !important;
        right: calc(-0.5% - 5px) !important;
        transform: translateY(-50%) !important;
    }

    .visual-6>div {
        transform: none !important;
    }

    /* Lower right-side seat alignment (Vertical sync with Seat 3) */
    .visual-7 {
        bottom: auto !important;
        margin-top: 0 !important;
        left: auto !important;
        top: 58.682% !important;
        right: calc(-0.5% - 5px) !important;
        transform: translateY(-50%) !important;
    }

    .visual-7>div {
        transform: translate(0, 20px) !important;
    }

    /* Left-side lower seat adjustment */
    .visual-2 {
        right: auto !important;
        left: calc(6.698% - 85px) !important;
        transform: translateY(-50%) !important;
    }

    .visual-2>div {
        transform: translate(0, 20px) !important;
    }

    /* Seat 8: Chips move inward relative to the plaque */
    .visual-bet-7,
    .visual-7 .player-plaque-wrapper .pucks-container {
        margin-left: -120px !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Seat 3: Symmetry mirror */
    .visual-bet-2,
    .visual-2 .player-plaque-wrapper .pucks-container {
        margin-left: 120px !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Adjust chip positioning for Seats 6 and 7 */
    .visual-bet-5,
    .visual-bet-6 {
        margin-left: -35px !important;
    }

    #main-pot-stack,
    #main-pot-stack *,
    #main-pot-stack .puck,
    #main-pot-stack .chip {
        z-index: 9999 !important;
    }
}

/* Dynamic Visual Positioning (Radial Offsets) */

/* Top Seats: Offset Upwards.
   Scoped to 9-seat tables : in 9-seat layout seat slots 5 + 6 are
   at the top row, so the upward translate refines the visual sync.
   In 6-seat, seat slot 5 is at angle 30° (bottom-right) and there is no
   seat slot 6 element, so the rule is a no-op. The scope is defensive :
   ensures any future seat-count addition (5, 7, 8) doesn't pick up a
   stale upward shift on a non-top seat. */
body[data-max-seats="9"] .visual-5>div,
body[data-max-seats="9"] .visual-6>div {
    transform: translateY(-25px);
}

/* Bottom Seats: Offset Downwards */
.visual-0>div,
.visual-1>div,
.visual-8>div {
    transform: translateY(25px);
}

/* Side Seat Individual Adjustments */
.visual-3>div {
    transform: translateX(-40px);
}

.visual-4>div {
    transform: translate(-30px, -20px);
}

.visual-7>div {
    transform: translate(30px, -20px);
}

.visual-2>div {
    transform: translate(-30px, 20px);
}

.visual-9>div {
    transform: translate(30px, 20px);
}

/* Speech Bubble Interface */
.speech-bubble {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(-10px);
    background: rgba(25, 25, 25, 0.95);
    color: #ffffff;
    border: 1px solid #444;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.8);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    white-space: normal;
    max-width: 220px;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
    margin-top: 15px;
}

/* Upward pointing triangle (Default) */
.speech-bubble::after {
    content: "";
    position: absolute;
    bottom: 100%;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent rgba(25, 25, 25, 0.95) transparent;
    left: 32px;
    margin-left: -6px;
}

/* Visibility state */
.speech-bubble.show {
    opacity: 1;
    transform: translateY(0px);
}

/* Table reaction bubble (S4b) — distinct pop/float, larger glyph than a
   chat line. Animates the independent `scale`/`translate` properties (not
   `transform`) so it composes with — and never fights — the per-seat
   `transform` positional overrides that carry `!important`. Text chat
   bubbles are untouched (no `--reaction` class). */
.speech-bubble--reaction {
    font-size: 22px;
    line-height: 1;
    font-weight: normal;
    padding: 6px 11px;
}

@media (prefers-reduced-motion: no-preference) {
    .speech-bubble--reaction.show {
        animation: reactionPop 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }
}

@keyframes reactionPop {
    0% {
        opacity: 0;
        scale: 0.4;
        translate: 0 10px;
    }

    55% {
        opacity: 1;
        scale: 1.18;
        translate: 0 -3px;
    }

    100% {
        opacity: 1;
        scale: 1;
        translate: 0 0;
    }
}

/* Bottom Seats Positioning (Inverted Bubbles) */
.visual-0 .speech-bubble,
.visual-1 .speech-bubble,
.visual-8 .speech-bubble {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    transform: translateY(10px) !important;
}

.visual-0 .speech-bubble.show,
.visual-1 .speech-bubble.show,
.visual-8 .speech-bubble.show {
    transform: translateY(0px) !important;
}

/* Downward pointing triangle for inverted bubbles */
.visual-0 .speech-bubble::after,
.visual-1 .speech-bubble::after,
.visual-8 .speech-bubble::after {
    top: 100% !important;
    bottom: auto !important;
    border-color: rgba(25, 25, 25, 0.95) transparent transparent transparent !important;
}

/* Right-Side Seats Alignment Overrides */
.visual-5 .speech-bubble,
.visual-6 .speech-bubble,
.visual-7 .speech-bubble,
.visual-8 .speech-bubble {
    left: auto;
    right: 0;
    text-align: right;
}

.visual-5 .speech-bubble::after,
.visual-6 .speech-bubble::after,
.visual-7 .speech-bubble::after,
.visual-8 .speech-bubble::after {
    left: auto;
    right: 32px;
    margin-left: 0;
    margin-right: -6px;
}

/* Specific positional adjustments */
.visual-7 .speech-bubble {
    margin-top: -30px !important;
}

/* Avatar Picker Styles */
.avatar-option {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50%;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    border: 3px solid transparent;
    transition: all 0.2s;
    background-color: #222;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.avatar-option:hover {
    transform: scale(1.1);
    border-color: #00d2ff;
    box-shadow: 0 8px 20px rgba(0, 210, 255, 0.4);
}

.avatar-option.selected {
    border-color: #4ade80;
    box-shadow: 0 0 20px #4ade80;
    transform: scale(1.05);
}

.hero-seat .plaque-avatar-section {
    cursor: pointer;
    transition: filter 0.2s;
}

.hero-seat .plaque-avatar-section:hover {
    filter: brightness(1.3);
}

/* Avatar Grid Scrollbar Adjustment */
#avatar-grid::-webkit-scrollbar {
    width: 6px;
}

#avatar-grid::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}