/**
 * Arena Stats Bar - Minimal horizontal HUD
 *
 * Layout: Level badge + progress bar + bank
 * Gear icon pinned top-right (separate from bar)
 *
 * Specificity: Uses direct class selectors (0,1,0) - no !important needed
 */

/* ============================================
   ARENA STATS BAR - Main Container
   ============================================ */

.arena-stats-bar {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-hud);
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    background: linear-gradient(180deg, rgba(14, 22, 28, 0.95) 0%, rgba(8, 14, 18, 0.98) 100%);
    border: 1px solid rgba(var(--teal-rgb), 0.15);
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-3-5);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.35),
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 var(--alpha-white-4);
}

.arena-stats-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--alpha-white-3) 0%, transparent 40%);
    border-radius: var(--radius-lg);
    pointer-events: none;
}

/* ============================================
   LEVEL BADGE + PROGRESS
   ============================================ */

.arena-level-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    padding: var(--space-1-5) var(--space-2-5);
    flex-shrink: 0;
}

.level-diamond {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    text-shadow: none;
}

.level-text {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-alpha-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.level-number {
    font-family: var(--font-family-mono);
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    color: rgba(255, 255, 255, 0.92);
    text-shadow: none;
}

/* ============================================
   PROGRESS BAR - Full Width with Glow
   ============================================ */

.arena-progress-container {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 220px;
}

.arena-progress-bar {
    position: relative;
    width: 200px;
    height: 8px;
    background: var(--alpha-white-8);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow:
        inset 0 2px 4px var(--alpha-black-30),
        inset 0 0 0 1px var(--alpha-white-5);
}

.arena-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #C9A227 0%, #E9C46A 50%, #F4D774 100%);
    border-radius: var(--radius-md);
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.4s var(--ease-in-out);
    box-shadow: 0 0 6px rgba(233, 196, 106, 0.28);
    overflow: hidden;
}

.arena-progress-fill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
    animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

.arena-progress-glow {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, transparent 60%, rgba(255, 255, 255, 0.4) 100%);
    border-radius: var(--radius-md);
    pointer-events: none;
    transition: width 0.6s var(--ease-out-smooth);
}

.arena-progress-text {
    font-family: var(--font-family-mono);
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.03em;
    white-space: nowrap;
    max-width: 160px;
    opacity: 1;
    transition: max-width 0.25s ease, opacity 0.25s ease;
}

/* ============================================
   STATS DISPLAY
   ============================================ */

.arena-stat {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.arena-stat-label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: rgba(255, 255, 255, 0.34);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.arena-stat-value {
    font-family: var(--font-family-mono);
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: rgba(255, 255, 255, 0.68);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: color 0.3s var(--ease-in-out), text-shadow 0.3s ease-out;
}

.arena-stat.primary-metric .arena-stat-value {
    color: #f7f9ff;
    font-weight: var(--font-weight-bold);
}

/* ============================================
   PINNED GEAR BUTTON - Top right corner
   ============================================ */

.arena-gear-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: var(--z-hud);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--teal-rgb), 0.2);
    background: rgba(12, 28, 20, 0.8);
    color: rgba(var(--teal-rgb), 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s ease-out;
}

.arena-gear-btn:hover {
    background: rgba(12, 28, 20, 0.95);
    border-color: rgba(var(--teal-rgb), 0.45);
    color: rgba(var(--teal-rgb), 0.9);
    box-shadow: 0 0 8px rgba(var(--teal-rgb), 0.1);
}

.arena-gear-btn:active {
    transform: scale(0.92);
    background: rgba(var(--teal-rgb), 0.2);
}

.arena-gear-btn:focus-visible {
    outline: 2px solid rgba(var(--teal-rgb), 0.5);
    outline-offset: 2px;
}

.arena-gear-btn.is-open {
    background: rgba(var(--teal-rgb), 0.12);
    border-color: rgba(var(--teal-rgb), 0.45);
    color: rgba(var(--teal-rgb), 1);
    box-shadow: 0 0 10px rgba(var(--teal-rgb), 0.12);
}

.arena-gear-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ============================================
   PINNED BACK BUTTON - Top left corner
   (mirrors gear button)
   ============================================ */

.arena-back-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: var(--z-hud);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--teal-rgb), 0.2);
    background: rgba(12, 28, 20, 0.8);
    color: rgba(var(--teal-rgb), 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s ease-out;
}

.arena-back-btn:hover {
    background: rgba(12, 28, 20, 0.95);
    border-color: rgba(var(--teal-rgb), 0.45);
    color: rgba(var(--teal-rgb), 0.9);
    box-shadow: 0 0 8px rgba(var(--teal-rgb), 0.1);
}

.arena-back-btn:active {
    transform: scale(0.92);
    background: rgba(var(--teal-rgb), 0.2);
}

.arena-back-btn:focus-visible {
    outline: 2px solid rgba(var(--teal-rgb), 0.5);
    outline-offset: 2px;
}

.arena-back-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ============================================
   CALM MODE
   ============================================ */

body.calm-mode .arena-stats-bar {
    background: linear-gradient(180deg, rgba(14, 22, 28, 0.72) 0%, rgba(8, 14, 18, 0.8) 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

body.calm-mode .arena-gear-btn,
body.calm-mode .arena-back-btn {
    opacity: 0.7;
}

body.calm-mode .arena-gear-btn:hover,
body.calm-mode .arena-back-btn:hover {
    opacity: 1;
}