/* app/frontend/css/gaming.css */

.gaming-belts-container {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-4);
    padding: var(--size-4-4);
    background: var(--background-secondary);
    border-radius: var(--radius-l);
    margin: var(--size-4-4) 0;
    border: var(--divider-width) solid var(--divider-color);
    box-shadow: var(--shadow-s);
}

.belt-row {
    display: flex;
    align-items: center;
    gap: var(--size-4-3);
}

.belt-label {
    min-width: var(--size-4-23);
    font-size: var(--font-ui-medium);
    font-weight: var(--font-weight-semibold);
    color: var(--text-normal);
}

.belt-progress-wrapper {
    flex: 1;
    height: var(--gaming-progress-height);
    background: var(--gaming-progress-bg);
    border-radius: var(--gaming-progress-radius);
    overflow: hidden;
    position: relative;
    border: var(--divider-width) solid var(--divider-color);
}

.belt-progress-bar {
    height: 100%;
    transition: width var(--anim-speed) cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--size-4-2);
    min-width: var(--size-4-1);
}

.belt-percent {
    font-size: var(--font-ui-smaller);
    font-weight: var(--font-weight-bold);
    color: var(--always-white);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.belt-percent-outer {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    min-width: var(--size-4-9);
}

/* Belt Colors (Linear Gradients) */
.bg-yellow {
    background: linear-gradient(90deg, #facc15, #f59e0b);
}

.bg-orange {
    background: linear-gradient(90deg, #fb923c, #f97316);
}

.bg-green {
    background: linear-gradient(90deg, #4ade80, #22c55e);
}

/* Dark Theme Adjustments are handled via tokens in themes.css */