/**
 * Arena Action Panel
 *
 * Action buttons, bet controls, decision context, session stats, and game controls
 * for the Training Arena. Includes turn indicator and collapsible panel mechanics.
 *
 * Base button styles (.action-btn, .turn-indicator) are in:
 *   css/shared/action-buttons.css
 *
 * This file adds Arena-specific layout and additional button types.
 */

/* ============================================
   ARENA BUTTON EXTENSIONS
   ============================================ */

/* Common base for Arena-specific button types */
.game-btn, .size-btn, .quick-btn,
.bust-btn-primary, .bust-btn-secondary, .item-btn {
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: var(--btn-transition);
}
.game-btn:focus-visible, .size-btn:focus-visible,
.quick-btn:focus-visible, .bust-btn-primary:focus-visible,
.bust-btn-secondary:focus-visible, .item-btn:focus-visible {
    outline: var(--btn-focus-outline);
    outline-offset: var(--btn-focus-offset);
}

/* ============================================
   ACTION BUTTONS - Arena Layout
   Base styles in css/shared/action-buttons.css
   ============================================ */

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Arena-specific: full width buttons */
.action-btn {
    width: 100%;
}

/* Arena loading indicator */
.turn-indicator.loading {
    color: var(--accent);
    animation: pulseSeat 1s ease-in-out infinite;
}

/* ============================================
   GAME CONTROL BUTTONS
   ============================================ */

.game-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
}

.game-btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-normal), transform var(--transition-normal);
    width: 100%;
}

.game-btn.primary {
    background: var(--accent);
    color: #000;
}

.game-btn.primary:hover {
    background: var(--accent-light);
    transform: var(--btn-hover-lift-sm);
    box-shadow: 0 4px 12px rgba(74, 157, 122, 0.3);
}

.game-btn.primary:active {
    transform: var(--btn-active-press);
    box-shadow: inset 0 2px 4px var(--alpha-black-30);
}

.game-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.game-btn.secondary {
    background: rgba(74, 48, 48, 0.9);
    color: var(--text-light);
}

.game-btn.secondary:hover {
    background: #5a4040;
    transform: var(--btn-hover-lift-sm);
}

.game-btn.secondary:active {
    transform: var(--btn-active-press);
    background: rgba(74, 48, 48, 0.95);
}

/* ============================================
   SESSION STATS PANEL
   ============================================ */

.session-stats {
    background: rgba(0,0,0,0.4);
    border-radius: var(--panel-radius-compact);
    padding: var(--panel-padding-compact);
    margin-bottom: var(--space-sm);
    border: 1px solid var(--panel-border-muted);
}

.session-stats-title {
    font-size: var(--panel-title-size);
    font-weight: var(--panel-title-weight);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--panel-title-spacing);
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1);
}

.stat-box {
    text-align: center;
    padding: var(--space-1);
    background: rgba(0,0,0,0.3);
    border-radius: var(--radius-sm);
}

.stat-box-label {
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 1px;
}

.stat-box-value {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-light);
}

.stat-box-value.positive {
    color: var(--color-win);
}

.stat-box-value.negative {
    color: var(--color-loss);
}

/* ============================================
   COLLAPSIBLE PANELS
   ============================================ */

.collapsible .collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: var(--space-2) 0;
    margin: calc(-1 * var(--space-2)) 0 0 0;
    user-select: none;
    transition: opacity var(--duration-quick) var(--ease-in-out);
}

.collapsible .collapsible-header:hover {
    opacity: 0.8;
}

.collapsible .collapsed-summary {
    display: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-light);
}

.collapsible .collapsed-summary .highlight {
    color: var(--accent-light);
    margin-left: var(--space-1);
}

.collapsible .expanded-title {
    font-size: var(--panel-title-size);
    font-weight: var(--panel-title-weight);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--panel-title-spacing);
}

.collapsible .collapse-icon {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.collapsible .collapsible-content {
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s var(--ease-out),
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
}

/* Collapsed state */
.collapsible.collapsed .collapsed-summary {
    display: block;
}

.collapsible.collapsed .expanded-title {
    display: none;
}

.collapsible.collapsed .collapse-icon {
    transform: rotate(-90deg);
}

.collapsible.collapsed .collapsible-content {
    max-height: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s var(--ease-out),
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Adjust padding for collapsible panels */
.session-stats.collapsible {
    padding: var(--space-2) var(--space-3);
}

.session-stats.collapsible.collapsed {
    padding: var(--space-2) var(--space-3);
}

/* Hide the old titles when using collapsible */
.collapsible .session-stats-title {
    display: none;
}