/**
 * Seat Layout Styles
 * Seat positioning, nameplate, player-box, element ordering,
 * player name/stack/position badges, and responsive scaling.
 *
 * Previously also contained card protector badge, turn/bot states, and card styling.
 * Those have been extracted to:
 * - features/hero-card-protector.css (card protector badge)
 * - components/turn-states.css (active turn, bot thinking, tank timer, mood)
 * - components/cards.css (card styling, colors, community cards)
 *
 * NOTE: Portrait base styles, hover effects, and reveal animations have been
 * consolidated into villain-system.css as part of the villain seat refactoring.
 *
 * @see villain-system.css for the authoritative portrait/avatar styles
 */

/* Portrait active states and tier borders are in villain-system.css */

/* ============ MINIMAL NAMEPLATE ============ */
/* Slim info bar below portrait */

.player-nameplate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 6px 14px;
    background: linear-gradient(180deg, rgba(20, 25, 35, 0.92) 0%, rgba(12, 16, 24, 0.95) 100%);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--alpha-white-12);
    box-shadow:
        0 2px 8px var(--alpha-black-40),
        inset 0 1px 0 var(--alpha-white-5);
    min-width: 100px;
    max-width: 160px;
    margin-top: 6px;
    transition: background 0.2s var(--ease-in-out), border-color 0.2s var(--ease-in-out), box-shadow 0.2s var(--ease-in-out);
}

.player-nameplate .player-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-alpha-secondary);
    letter-spacing: 0.02em;
    white-space: nowrap;
    /* No truncation - show full name, stack is now compact ($80k) */
}

.player-nameplate .player-stack {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: #fff;
}

/* Hero nameplate - name color (border/bg styling combined below with player-box) */
.player-seat.hero .player-nameplate .player-name {
    color: var(--accent);
}

/* Active glow is in turn-states.css (.player-seat .player-box.active) */

/* Position badge - compact inline */
.player-nameplate .player-position-badge {
    display: inline-flex;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    background: var(--alpha-white-10);
    border-radius: var(--radius-sm);
    color: var(--text-alpha-tertiary);
    letter-spacing: 0.05em;
}


/* Game container, table wrapper, poker table felt, and board area
 * are in arena/arena-felt.css */

/* Player Positions - Outside the table with perspective adjustment */
.player-seat {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: calc(var(--z-seat-base, 5) + 5);
    /* Enable 3D transforms for portrait pop-out effect */
    transform-style: preserve-3d;
    transition: opacity var(--transition-normal), filter var(--transition-normal), transform 0.5s var(--ease-out);
}

/* ============ PORTRAIT-CENTRIC SEAT LAYOUT ============ */
/* All seats: Portrait on top, nameplate below, cards below that */

/* Seat 0: Hero (BTN) - 6 o'clock position (bottom center) */
/* NOTE: .hero class kept here since hero is always seat 0.
   Unlike .opponent, hero position is fixed, not variable. */
.player-seat.seat-0,
.player-seat.hero {
    bottom: clamp(-245px, -23vh, -195px);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-modal);
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Hero portrait is largest - star of the show */
.player-seat.hero .player-portrait {
    order: 1;
}

/* Hero nameplate below portrait */
.player-seat.hero .player-nameplate {
    order: 2;
}

/* Hero cards below nameplate */
.player-seat.hero .cards-container {
    order: 3;
    flex-direction: row;
    gap: 0;
    margin-top: var(--space-1);
}

.player-seat.hero .cards-container .card + .card {
    margin-left: -8px;
}

.player-seat.hero .hand-name-label {
    order: 4;
    margin-top: 2px;
}

/* Seat 1: Main Bot (SB) - 8 o'clock position (bottom-left) */
/* NOTE: .opponent class removed from positioning - it should only affect styling, not position.
   Villains can be at any seat, so position must come from seat-N class only. */
.player-seat.seat-1 {
    bottom: 8%;
    left: -2%;
    transform: scale(0.9);
    z-index: var(--z-hud);
}

/* Seat 2: CPU 1 (BB) - 10 o'clock position (top-left) */
.player-seat.seat-2 {
    top: 8%;
    left: -2%;
    transform: scale(0.85);
    z-index: calc(var(--z-hud) - 5);
}

/* Seat 3: CPU 2 (UTG) - 12 o'clock position (top center) */
.player-seat.seat-3 {
    top: clamp(-155px, -13vh, -110px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    z-index: var(--z-hud);
}

/* Seat 4: CPU 3 (HJ) - 2 o'clock position (top-right) */
.player-seat.seat-4 {
    top: 8%;
    right: -2%;
    left: auto;
    transform: scale(0.85);
    z-index: calc(var(--z-hud) - 5);
}

/* Seat 5: CPU 4 (CO) - 4 o'clock position (bottom-right) */
.player-seat.seat-5 {
    bottom: 8%;
    right: -2%;
    left: auto;
    top: auto;
    transform: scale(0.9);
    z-index: var(--z-hud);
}

/* Villain/CPU seats - portrait first, then cards, then nameplate */
.player-seat.opponent .player-portrait,
.player-seat.cpu-seat .player-portrait {
    order: 1;
}

.player-seat.opponent .cards-container,
.player-seat.cpu-seat .cards-container {
    order: 2;
    margin-top: var(--space-1);
}

.player-seat.opponent .player-nameplate,
.player-seat.cpu-seat .player-nameplate {
    order: 3;
}

/* Tank timer is absolutely positioned above portrait - no order needed */

/* CPU seat compact styling */
.player-seat.cpu-seat .player-box {
    min-width: 120px;
    padding: var(--space-sm) var(--space-md);
}

.player-seat.cpu-seat .player-stack {
    font-size: 0.9em;
}

.player-seat.cpu-seat .cards-container {
    gap: 3px;
}

/* Non-hero hole cards - scaled 20% larger (38x53px) */
.player-seat.cpu-seat .card {
    width: 38px;
    height: 53px;
}

/* Opponent cards - scaled 20% larger (46x62px) */
.player-seat.opponent .card {
    width: 46px;
    height: 62px;
}

/* Player Info Box - LEGACY: keeping for backward compatibility */
/* New designs should use .player-nameplate instead */
.player-box {
    text-align: center;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
    position: relative;
    min-width: 100px;
    padding: 6px 14px;
    border-radius: var(--radius-2xl);
    overflow: visible;
    background: linear-gradient(180deg, rgba(20, 25, 35, 0.92) 0%, rgba(12, 16, 24, 0.95) 100%);
    border: 1px solid var(--alpha-white-12);
    box-shadow: 0 2px 8px var(--alpha-black-40);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

/* Hero seat nameplate styling */
.player-seat.hero .player-box,
.player-seat.hero .player-nameplate {
    border: 2px solid rgba(var(--hero-nameplate-gold-rgb), 0.85);
    background: linear-gradient(135deg, rgba(20, 25, 35, 0.95) 0%, rgba(12, 16, 24, 0.98) 100%);
    box-shadow:
        0 0 12px rgba(var(--hero-nameplate-gold-rgb), 0.25),
        0 4px 16px var(--alpha-black-50),
        inset 0 1px 0 var(--alpha-white-8);
}

.player-seat.hero .player-name {
    color: var(--accent);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
}

.player-seat.hero .player-stack {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: #fff;
}

/* Villain/opponent seat */
.player-seat.opponent .player-box,
.player-seat.opponent .player-nameplate {
    border-color: rgba(80, 90, 110, 0.4);
    /* Removed opacity: 0.95 - was causing faintness on villain cards at showdown */
}

.player-name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: #e8eaec;
    letter-spacing: 0.03em;
}

.player-stack {
    font-family: var(--font-family-mono);
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: #ffffff;
}

/* Position badges - compact, only show SB/BB (forced bets matter) */
/* BTN is redundant (dealer button on table), other positions shown as names */
.player-position-badge {
    display: none; /* Hidden by default */
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: none;
    margin-left: var(--space-1);
}

/* Only show Small Blind and Big Blind badges for main villain (seat 1) */
/* CPU seats already show position as their name, so no badge needed */
.player-seat.opponent .player-position-badge.sb,
.player-seat.opponent .player-position-badge.bb {
    display: inline-block;
}

/* Small Blind - compact light chip */
.player-position-badge.sb {
    background: rgba(255, 255, 255, 0.85);
    color: #1e3a5f;
}

/* Big Blind - compact dark chip */
.player-position-badge.bb {
    background: rgba(30, 58, 95, 0.9);
    color: #fff;
}

/* ============ 9-MAX SEAT POSITIONS (for Live Poker replay) ============ */
/* Seats 6-8 extend the oval layout for 7-9 player tables */

/* Seat 6: LJ - 1 o'clock position (upper-right, between seat 4 and seat 5) */
.player-seat.seat-6 {
    top: 28%;
    right: -4%;
    left: auto;
    transform: scale(0.8);
    z-index: calc(var(--z-hud) - 5);
}

/* Seat 7: HJ - 11 o'clock position (upper-left, between seat 2 and seat 3) */
.player-seat.seat-7 {
    top: 28%;
    left: -4%;
    transform: scale(0.8);
    z-index: calc(var(--z-hud) - 5);
}

/* Seat 8: CO - 12:30 position (top, offset right from center) */
.player-seat.seat-8 {
    top: clamp(-155px, -13vh, -110px);
    left: 68%;
    transform: translateX(-50%) scale(0.8);
    z-index: calc(var(--z-hud) - 6);
}

/* ============ RESPONSIVE PORTRAIT SCALING ============ */
/* Proportional scaling at different breakpoints */

@media (max-width: 1400px) {
    .player-nameplate {
        min-width: 90px;
        max-width: 140px;
        padding: 5px var(--space-3);
    }
    .player-nameplate .player-name {
        font-size: var(--font-size-xs);
    }
    .player-nameplate .player-stack {
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 992px) {
    .player-nameplate {
        min-width: 80px;
        max-width: 120px;
        padding: var(--space-1) 10px;
        gap: 6px;
    }
    .player-nameplate .player-name {
        font-size: var(--font-size-2xs);
    }
    .player-nameplate .player-stack {
        font-size: var(--font-size-xs);
    }
    /* seat-0 and seat-3 use fluid clamp() — no per-breakpoint overrides needed */
}

@media (max-width: 768px) {
    .player-nameplate {
        min-width: 70px;
        max-width: 110px;
        padding: 3px var(--space-2);
        gap: var(--space-1);
        border-radius: var(--radius-xl);
    }
    .player-nameplate .player-name {
        font-size: 9px;
    }
    .player-nameplate .player-stack {
        font-size: var(--font-size-2xs);
    }
    /* seat-0 and seat-3 use fluid clamp() — no per-breakpoint overrides needed */
    /* Scale down side seats more on mobile */
    .player-seat.seat-1,
    .player-seat.seat-5 {
        transform: scale(0.85);
    }
    .player-seat.seat-2,
    .player-seat.seat-4 {
        transform: scale(0.8);
    }
}