/**
 * Arena Panels - Panel Layout and Positioning
 *
 * Layout:
 * - Stats panel: Bottom-left overlay (info display)
 * - Action panel: Bottom-right overlay (controls)
 * - Hand history: Right column (full height)
 *
 * Stats + Action panels are positioned absolutely within .table-wrapper
 * Hand history column is a flex sibling of .table-wrapper in .game-container
 *
 * Related modules:
 * - arena-sizing.css: Bet sizing controls, slider, buttons, overbet UI
 * - arena-settings.css: Settings panel form controls
 * - arena-level-select.css: Level selection overlay and run panel
 * - battle-log.css: Battle log overlay + hand history entry styles
 */

/* ============================================
   STATS PANEL - Bottom-Left (Info Only)
   ============================================ */

#stats-panel {
    position: absolute;
    bottom: var(--space-5);
    left: var(--space-5);
    right: auto;
    top: auto;
    width: 160px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: rgba(10, 28, 20, 0.95);
    border-radius: var(--radius-md);
    border: 1px solid rgba(74, 157, 122, 0.12);
    z-index: var(--z-popover);
    box-shadow:
        0 4px 20px var(--alpha-black-40),
        inset 0 1px 0 var(--alpha-white-3);
    max-height: calc(100% - 140px);
    overflow-y: auto;
}

/* Fallback class selector */
.stats-panel {
    position: absolute;
    bottom: var(--space-5);
    left: var(--space-5);
    right: auto;
    top: auto;
    width: 160px;
}

#stats-panel::-webkit-scrollbar {
    width: 4px;
}

#stats-panel::-webkit-scrollbar-track {
    background: transparent;
}

#stats-panel::-webkit-scrollbar-thumb {
    background: var(--alpha-white-10);
    border-radius: 2px;
}

/* Calm mode: remove persistent side stats from the table view. */
body.calm-mode #stats-panel,
body.calm-mode .stats-panel {
    display: none;
}

/* ============================================
   ACTION PANEL - Bottom-Right (Controls)
   Horizontal layout with all actions in a row
   ============================================ */

#action-area {
    position: absolute;
    bottom: var(--space-5);
    right: var(--space-5);
    left: auto;
    top: auto;
    width: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(10, 28, 20, 0.95);
    border-radius: var(--radius-md);
    border: 1px solid rgba(74, 157, 122, 0.12);
    z-index: var(--z-popover);
    box-shadow:
        0 4px 20px var(--alpha-black-40),
        inset 0 1px 0 var(--alpha-white-3);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    max-width: calc(100% - 200px);
}

/* ============================================
   YOUR TURN SPOTLIGHT EFFECT
   Compositor-only: static glow on pseudo, animate opacity
   ============================================ */

@keyframes yourTurnPulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

#action-area.your-turn {
    border-color: rgba(74, 157, 122, 0.4);
}

/* Glow pseudo — avoids paint-triggering box-shadow animation */
#action-area.your-turn::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    box-shadow:
        0 0 24px rgba(74, 157, 122, 0.28),
        inset 0 1px 0 var(--alpha-white-4);
    pointer-events: none;
    animation: yourTurnPulse 2.5s ease-in-out infinite;
}

/* Hero seat glow when it's their turn */
@keyframes heroTurnGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.player-seat.seat-0.your-turn .player-portrait::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        0 0 25px rgba(74, 157, 122, 0.5),
        0 0 50px rgba(74, 157, 122, 0.25);
    pointer-events: none;
    animation: heroTurnGlow 2s ease-in-out infinite;
}

/* Fallback class selector */
.action-panel-right {
    position: absolute;
    bottom: var(--space-5);
    right: var(--space-5);
    left: auto;
    top: auto;
    width: auto;
}

/* Primary Actions Row */
.action-buttons-primary {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}

.action-buttons-primary .action-btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-base);
}

/* Game Controls in Right Panel */
.action-panel-right .game-controls {
    display: flex;
    gap: var(--space-2);
    padding-left: var(--space-3);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    margin-left: auto;
    flex-shrink: 0;
}

.action-panel-right .game-btn {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-md);
}

/* ============================================
   HAND HISTORY - Right Column
   ============================================ */

.arena-hand-history {
    display: flex;
    flex-direction: column;
    width: 280px;
    flex-shrink: 0;
    min-height: 0;
    position: relative;
    z-index: var(--z-dropdown);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(14, 18, 22, 0.95) 0%, rgba(8, 12, 16, 0.98) 100%);
    border-left: 2px solid rgba(74, 157, 122, 0.2);
    border-radius: 0 12px 12px 0;
}

/* Inset shadow as a non-scrolling overlay — avoids expensive repaint during scroll */
.arena-hand-history::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 1;
}

/* Calm mode: hide side hand history in Arena to keep table-first focus. */
body.calm-mode .arena-hand-history {
    display: none;
}

/* Responsive: narrow hand history column */
@media (max-width: 1200px) {
    .arena-hand-history {
        width: 240px;
    }
}

/* Responsive: hide hand history on small screens */
@media (max-width: 900px) {
    .arena-hand-history {
        display: none;
    }
}