/**
 * Shared Action Buttons - Core styles for poker action buttons
 *
 * Used by both Arena and Drill modes.
 * These are the foundational button styles; mode-specific layouts
 * are in arena-action-panel.css and drill-controls.css respectively.
 */

/* ============================================
   BASE ACTION BUTTON
   ============================================ */

.action-btn {
    font-family: inherit;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

/* Subtle top highlight */
.action-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 40%);
    pointer-events: none;
}

/* Disabled state */
.action-btn:disabled {
    background: var(--btn-disabled-bg, rgba(30, 30, 40, 0.8));
    border-color: rgba(37, 37, 48, 0.8);
    color: rgba(96, 96, 112, 0.9);
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
    opacity: var(--btn-disabled-opacity, 0.6);
    box-shadow: none;
    transition: opacity var(--duration-slow) var(--ease-in-out);
}

.action-btn:disabled::after {
    display: none;
}

/* Enable animation (JS adds .just-enabled class) */
.action-btn.just-enabled {
    animation: btnActivate 0.4s ease-out;
}

@keyframes btnActivate {
    0% { opacity: 0.7; transform: scale(0.97); }
    50% { opacity: 1; transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}

/* Focus state */
.action-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Hover state */
.action-btn:not(:disabled):hover {
    transform: var(--btn-hover-lift) scale(1.02);
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

/* Active/pressed state */
.action-btn:not(:disabled):active {
    transform: var(--btn-active-press);
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.4),
        inset 0 -2px 4px rgba(255,255,255,0.1);
    transition: transform 0.08s var(--ease-spring), box-shadow 0.08s linear;
}

/* ============================================
   BUTTON COLOR VARIANTS
   ============================================ */

/* FOLD - Bronze metallic */
.action-btn.fold {
    background: linear-gradient(180deg,
        rgba(80, 70, 50, 0.9) 0%,
        rgba(50, 45, 35, 0.95) 50%,
        rgba(60, 55, 40, 0.9) 100%);
    border-color: rgba(180, 160, 100, 0.3);
    color: rgba(220, 200, 140, 0.85);
    box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 var(--alpha-white-6);
}

.action-btn.fold:not(:disabled):hover {
    background: linear-gradient(180deg,
        rgba(95, 85, 60, 0.9) 0%,
        rgba(65, 58, 45, 0.95) 50%,
        rgba(75, 68, 50, 0.9) 100%);
    color: rgba(240, 220, 160, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 var(--alpha-white-12);
}

/* CHECK/CALL - Blue metallic */
.action-btn.check,
.action-btn.call {
    background: linear-gradient(180deg,
        rgba(40, 60, 80, 0.9) 0%,
        rgba(25, 40, 60, 0.95) 50%,
        rgba(35, 55, 75, 0.9) 100%);
    border-color: rgba(100, 160, 220, 0.3);
    color: rgba(180, 220, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 var(--alpha-white-6);
}

.action-btn.check:not(:disabled):hover,
.action-btn.call:not(:disabled):hover {
    background: linear-gradient(180deg,
        rgba(50, 75, 100, 0.9) 0%,
        rgba(35, 55, 80, 0.95) 50%,
        rgba(45, 70, 95, 0.9) 100%);
    color: rgba(200, 235, 255, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 15px rgba(100, 160, 220, 0.2), inset 0 1px 0 var(--alpha-white-12);
}

/* BET/RAISE - Green metallic (primary CTA) */
.action-btn.bet,
.action-btn.raise {
    background: linear-gradient(180deg,
        rgba(40, 70, 45, 0.92) 0%,
        rgba(25, 50, 30, 0.96) 50%,
        rgba(35, 60, 40, 0.92) 100%);
    border-color: rgba(100, 180, 120, 0.4);
    color: rgba(150, 220, 160, 0.95);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 10px rgba(74, 157, 122, 0.1), inset 0 1px 0 var(--alpha-white-8);
}

.action-btn.bet:not(:disabled):hover,
.action-btn.raise:not(:disabled):hover {
    background: linear-gradient(180deg,
        rgba(50, 85, 55, 0.9) 0%,
        rgba(35, 65, 40, 0.95) 50%,
        rgba(45, 75, 50, 0.9) 100%);
    color: rgba(170, 240, 180, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 15px rgba(100, 180, 120, 0.25), inset 0 1px 0 var(--alpha-white-12);
}

/* ALL-IN - Teal with glow */
.action-btn.allin {
    background: linear-gradient(180deg, #00d4aa 0%, #00b894 50%, #009978 100%);
    border-color: rgba(0, 212, 170, 0.45);
    color: #003d2d;
    box-shadow: 0 2px 8px rgba(0, 212, 170, 0.3), 0 0 14px rgba(0, 212, 170, 0.12), inset 0 1px 0 var(--alpha-white-12);
    overflow: visible; /* Allow glow pseudo to extend beyond */
}

/* Glow pseudo — compositor-only opacity pulse */
.action-btn.allin::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 2px 10px rgba(0, 212, 170, 0.45), 0 0 20px rgba(0, 212, 170, 0.2);
    pointer-events: none;
    opacity: 0;
}

.action-btn.allin:not(:disabled)::before {
    animation: allInButtonPulse 2s ease-in-out infinite;
}

.action-btn.allin:not(:disabled):hover {
    background: linear-gradient(180deg, #00e4b8 0%, #00d4aa 50%, #00b894 100%);
    box-shadow: 0 4px 16px rgba(0, 212, 170, 0.6), 0 0 30px rgba(0, 212, 170, 0.4), inset 0 1px 0 var(--alpha-white-20);
    transform: var(--btn-hover-lift) scale(1.02);
}

.action-btn.allin:not(:disabled):hover::before {
    animation: none;
    opacity: 0;
}

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

/* ============================================
   KEYBOARD SHORTCUT HINT
   ============================================ */

.kbd {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

/* ============================================
   TURN INDICATOR
   ============================================ */

.turn-indicator {
    background: rgba(180, 170, 150, 0.15);
    border: 1px solid rgba(180, 170, 150, 0.3);
    color: rgba(220, 210, 190, 0.9);
    text-align: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
}

.turn-indicator.waiting {
    background: rgba(60, 60, 70, 0.3);
    border-color: rgba(100, 100, 110, 0.2);
    color: rgba(120, 120, 130, 0.6);
}

.turn-indicator.your-turn {
    background: rgba(74, 157, 122, 0.2);
    border-color: rgba(74, 157, 122, 0.4);
    color: var(--accent-light);
}

.turn-indicator.complete {
    background: rgba(100, 100, 110, 0.2);
    border-color: rgba(100, 100, 110, 0.3);
    color: rgba(160, 160, 170, 0.8);
}