/* FullMoon MMO - Stat Bar Component */

.stat-bar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.stat-bar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
}

.stat-bar__label {
    font-weight: 500;
}

.stat-bar__value {
    color: var(--color-text-muted);
}

.stat-bar__track {
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--border-radius-full);
    overflow: hidden;
}

.stat-bar__fill {
    height: 100%;
    border-radius: var(--border-radius-full);
    transition: width var(--transition-normal);
}

/* HP Bar */
.stat-bar--hp .stat-bar__fill {
    background: linear-gradient(90deg, #F44336, #E91E63);
}

/* Low HP warning */
.stat-bar--hp.stat-bar--low .stat-bar__fill {
    animation: pulse-danger 1s ease-in-out infinite;
}

@keyframes pulse-danger {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* XP Bar */
.stat-bar--xp .stat-bar__fill {
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
}

/* Blood Bar */
.stat-bar--blood .stat-bar__fill {
    background: linear-gradient(90deg, #8a0303, #d32f2f);
}

/* Energy Bar */
.stat-bar--energy .stat-bar__fill {
    background: linear-gradient(90deg, #f4b400, #ffca28);
}

/* Mission Timer Bar */
.stat-bar--timer .stat-bar__fill {
    background: linear-gradient(90deg, #2196F3, #03A9F4);
}

/* Honor Bar */
.stat-bar--honor .stat-bar__fill {
    background: linear-gradient(90deg, #9C27B0, #E91E63);
}

/* Generic Bar */
.stat-bar--default .stat-bar__fill {
    background: var(--theme-primary);
}

/* Size Variants */
.stat-bar--sm .stat-bar__track {
    height: 4px;
}

.stat-bar--lg .stat-bar__track {
    height: 12px;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius-md);
}

.stat-item__value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--theme-accent);
}

.stat-item__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Inline Stats */
.stats-inline {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.stat-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.stat-inline__icon {
    font-size: var(--font-size-lg);
}

.stat-inline__value {
    font-weight: 500;
}