/**
 * Arena Table - Central Table Elements
 *
 * Dealer button, table center logo, street indicator, community cards, pot display,
 * and board cards for the Training Arena poker table.
 *
 * Specificity: Uses direct class selectors (0,1,0) - no !important needed
 */

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

.dealer-button {
    position: absolute;
    width: 56px;
    height: 38px;
    background: url('/static/assets/logo/dealer_button.webp') center/contain no-repeat;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    /* Must be higher than hero seat z-index (--z-modal = 100) to stay visible */
    z-index: calc(var(--z-modal) + 5);
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-in-out),
                left 0.5s var(--ease-out), right 0.5s var(--ease-out),
                top 0.5s var(--ease-out), bottom 0.5s var(--ease-out);
    pointer-events: none;
    image-rendering: -webkit-optimize-contrast;
}

.dealer-button.visible {
    opacity: 1;
}

/* Dealer button seat positions — along the betting line (just outside chip oval) */
.dealer-button.btn-seat-0 {
    bottom: 10%;
    left: 42%;
}

.dealer-button.btn-seat-1 {
    bottom: 16%;
    left: 8%;
}

.dealer-button.btn-seat-2 {
    top: 16%;
    left: 8%;
}

.dealer-button.btn-seat-3 {
    top: 10%;
    left: 42%;
}

.dealer-button.btn-seat-4 {
    top: 16%;
    right: 8%;
    left: auto;
}

.dealer-button.btn-seat-5 {
    bottom: 16%;
    right: 8%;
    left: auto;
}

/* 9-max additional dealer button positions (seats 6-8) */
.dealer-button.btn-seat-6 {
    top: 32%;
    right: 6%;
    left: auto;
}

.dealer-button.btn-seat-7 {
    top: 32%;
    left: 6%;
}

.dealer-button.btn-seat-8 {
    top: 10%;
    left: 60%;
}

/* ============================================
   TABLE CENTER LOGO
   ============================================ */

.table-center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: auto;
    opacity: 0.15;
    pointer-events: none;
    z-index: var(--z-base);
}

/* ============================================
   STREET INDICATOR
   ============================================ */

.street-indicator {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 18%;
    padding: var(--space-1) 14px;
    border-radius: var(--radius-pill);
    background: transparent;
    border: none;
    font-size: var(--font-size-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
    text-shadow: 0 1px 3px var(--alpha-black-80);
    font-weight: var(--font-weight-semibold);
    z-index: var(--z-bet-chips);
    backface-visibility: hidden;
}

.street-indicator.street-transition {
    animation: streetIndicatorPulse 200ms var(--ease-out);
}

@keyframes streetIndicatorPulse {
    0%   { opacity: 1; transform: translateX(-50%) scale(1); }
    50%  { opacity: 0.4; transform: translateX(-50%) scale(0.95); }
    100% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

/* ============================================
   COMMUNITY CARDS GROUPING
   ============================================ */

.community-cards {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: var(--space-3);
    pointer-events: auto;
    z-index: var(--z-modal);
}

.community-cards .flop-group {
    display: flex;
    gap: var(--space-2);
    margin-right: 6px;
}

.community-cards .turn-card {
    margin-right: 6px;
}

/* ============================================
   POT DISPLAY
   ============================================ */

.pot-display {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: #ffd966;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.9),
        0 3px 8px rgba(0, 0, 0, 0.6),
        0 0 10px rgba(255, 217, 102, 0.15);
    letter-spacing: 0.02em;
    backface-visibility: hidden;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* Pot ticker glow pulse — brief gold flash when pot value changes */
.pot-display .pot-amount.ticking {
    animation: potTickerPulse 450ms var(--ease-out) forwards;
}

@keyframes potTickerPulse {
    0%   { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85); transform: scale(1); }
    35%  { text-shadow: 0 0 18px rgba(255, 217, 102, 0.7), 0 1px 4px rgba(0, 0, 0, 0.85); transform: scale(1.08); color: #fff; }
    100% { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85); transform: scale(1); color: #ffd966; }
}

.pot-display .pot-label {
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-shadow: 0 1px 3px var(--alpha-black-80);
}

/* ============================================
   BOARD CARDS
   ============================================ */

.board-cards {
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: var(--z-bet-chips);
    transform: translateZ(50px);
    transform-style: preserve-3d;
}

.board-cards .flop-group {
    display: flex;
    gap: 6px;
    padding-right: var(--space-3);
    border-right: 2px solid var(--alpha-white-15);
    margin-right: 6px;
}

.board-cards .turn-card {
    padding-right: var(--space-3);
    border-right: 2px solid var(--alpha-white-15);
    margin-right: 6px;
}

/* Note: .board-cards .card styling is in components/cards.css */