.fp-esports-gaming-cpu-load-gauge-ui {
    /* ━━━━━━━━━━━━━━━━━━
       LAYOUT & SIZING
       ━━━━━━━━━━━━━━━━━━ */
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    /* ━━━━━━━━━━━━━━━━━━
       COLOR SYSTEM (Magenta Industrial)
       ━━━━━━━━━━━━━━━━━━ */
    --fp-primary-color: #FFFAFA; /* Putih Salju */
    --fp-secondary-color: #E0E0E0;
    --fp-muted-color: #888888;
    --fp-soft-color: #333333; /* Hitam Arang */
    --fp-background-color: transparent;

    --fp-info-color: #FF00FF; /* Magenta */
    --fp-warning-color: #FF00FF;
    --fp-danger-color: #FF00FF;
    --fp-accent-color: #FF00FF;

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    position: relative;
    background-color: var(--fp-background-color);
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--fp-soft-color);
}

.fp-esports-gaming-cpu-load-gauge-ui * {
    box-sizing: border-box;
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 1: BREATHING STAGE
   ━━━━━━━━━━━━━━━━━━ */
.fp-esports-gaming-cpu-load-gauge-ui-stage {
    position: relative;
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background-color: var(--fp-primary-color);
    border: 1px solid var(--fp-secondary-color);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fp-esports-gaming-cpu-load-gauge-ui-breathing 4s ease-in-out infinite;
}

@keyframes fp-esports-gaming-cpu-load-gauge-ui-breathing {
    0%, 100% { box-shadow: inset 0 0 20px rgba(0,0,0,0.02); }
    50% { box-shadow: inset 0 0 40px rgba(255, 0, 255, 0.05); }
}

/* ━━━━━━━━━━━━━━━━━━
   INDUSTRIAL FRAME & HUD
   ━━━━━━━━━━━━━━━━━━ */
.fp-esports-gaming-cpu-load-gauge-ui-industrial-frame {
    position: relative;
    width: 80%;
    height: 80%;
    border: 2px solid var(--fp-soft-color);
    background: linear-gradient(145deg, var(--fp-primary-color), var(--fp-secondary-color));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 20px;
    z-index: 2;
    clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
}

.fp-esports-gaming-cpu-load-gauge-ui-header {
    text-align: center;
    width: 100%;
}

.fp-esports-gaming-cpu-load-gauge-ui-label {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--fp-muted-color);
    margin-bottom: 4px;
}

.fp-esports-gaming-cpu-load-gauge-ui-value-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.fp-esports-gaming-cpu-load-gauge-ui-number {
    font-size: clamp(32px, 8cqi, 48px);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.fp-esports-gaming-cpu-load-gauge-ui-unit {
    font-size: 14px;
    font-weight: 700;
    color: var(--fp-accent-color);
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 2: EQUALIZER & ROTATION
   ━━━━━━━━━━━━━━━━━━ */
.fp-esports-gaming-cpu-load-gauge-ui-equalizer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 60px;
    width: 100%;
}

.fp-esports-gaming-cpu-load-gauge-ui-bar {
    width: 6px;
    height: 20%;
    background-color: var(--fp-soft-color);
    transition: height 0.1s ease, background-color 0.3s ease;
}

.fp-esports-gaming-cpu-load-gauge-ui-bar.active {
    background-color: var(--fp-accent-color);
    box-shadow: 0 0 10px var(--fp-accent-color);
}

.fp-esports-gaming-cpu-load-gauge-ui-ring-outer {
    position: absolute;
    width: 110%;
    height: 110%;
    border: 1px dashed var(--fp-secondary-color);
    border-radius: 50%;
    animation: fp-esports-gaming-cpu-load-gauge-ui-rotate 20s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes fp-esports-gaming-cpu-load-gauge-ui-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 3: REACTIVE SPIKE
   ━━━━━━━━━━━━━━━━━━ */
.fp-esports-gaming-cpu-load-gauge-ui-spike {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 8px;
    padding: 2px 6px;
    background: var(--fp-soft-color);
    color: var(--fp-primary-color);
    opacity: 0;
    transition: opacity 0.1s;
}

.fp-esports-gaming-cpu-load-gauge-ui-spike.active {
    opacity: 1;
    background: var(--fp-accent-color);
    animation: fp-esports-gaming-cpu-load-gauge-ui-flash 0.2s steps(2) infinite;
}

@keyframes fp-esports-gaming-cpu-load-gauge-ui-flash {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.5); }
}

@media (max-width: 400px) {
    .fp-esports-gaming-cpu-load-gauge-ui-equalizer { height: 40px; }
    .fp-esports-gaming-cpu-load-gauge-ui-bar { width: 4px; }
}

/**
 * GLV-120: Gaming CPU Gauge - Magenta Industrial
 * Animation Engine: Smooth Interpolation + Equalizer Logic
 */
(function() {
    const instances = document.querySelectorAll('.fp-esports-gaming-cpu-load-gauge-ui');

    instances.forEach(root => {
        if (root.dataset.fpInitialized) return;
        root.dataset.fpInitialized = 'true';

        const equalizer = root.querySelector('.fp-esports-gaming-cpu-load-gauge-ui-equalizer');
        const numDisplay = root.querySelector('.fp-esports-gaming-cpu-load-gauge-ui-number');
        const spikeNote = root.querySelector('.fp-esports-gaming-cpu-load-gauge-ui-spike');
        const barCount = 12;
        const bars = [];

        // Dynamic Bar Initialization
        for (let i = 0; i < barCount; i++) {
            const bar = document.createElement('div');
            bar.className = 'fp-esports-gaming-cpu-load-gauge-ui-bar';
            equalizer.appendChild(bar);
            bars.push(bar);
        }

        let state = {
            load: 45,
            targetLoad: 45,
            lastUpdate: 0,
            rafId: null
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    state.rafId = requestAnimationFrame(fp_esports_gaming_cpu_load_gauge_ui_loop);
                } else {
                    cancelAnimationFrame(state.rafId);
                }
            });
        }, { threshold: 0.1 });

        observer.observe(root);

        function fp_esports_gaming_cpu_load_gauge_ui_loop(timestamp) {
            // Memory Leak Guard
            if (!document.body.contains(root)) {
                observer.disconnect();
                cancelAnimationFrame(state.rafId);
                return;
            }

            if (document.visibilityState === 'hidden') {
                state.rafId = requestAnimationFrame(fp_esports_gaming_cpu_load_gauge_ui_loop);
                return;
            }

            // Update Throttle (~10FPS for performance stability)
            if (timestamp - state.lastUpdate > 100) {
                // Stochastic Load Simulation
                if (Math.random() > 0.85) {
                    // Bias towards higher load for gaming feel
                    state.targetLoad = Math.floor(40 + Math.random() * 60);
                } else if (Math.random() > 0.95) {
                    state.targetLoad = Math.floor(Math.random() * 30);
                }
                
                // Linear Interpolation for Smooth Numbers
                state.load += (state.targetLoad - state.load) * 0.15;
                const displayVal = Math.round(state.load);
                numDisplay.textContent = displayVal.toString().padStart(2, '0');

                // Equalizer Bounce Engine
                bars.forEach((bar, idx) => {
                    const baseThreshold = (idx / barCount) * 100;
                    const randomOscillation = Math.sin(timestamp / 200 + idx) * 15;
                    const calculatedHeight = Math.min(100, Math.max(15, (state.load) + randomOscillation - baseThreshold));
                    
                    bar.style.height = `${calculatedHeight}%`;
                    
                    // Signal Color Logic
                    if (displayVal > baseThreshold) {
                        bar.classList.add('active');
                    } else {
                        bar.classList.remove('active');
                    }
                });

                // Layer 3 Spike Trigger
                if (displayVal > 88) {
                    spikeNote.classList.add('active');
                } else {
                    spikeNote.classList.remove('active');
                }

                state.lastUpdate = timestamp;
            }

            state.rafId = requestAnimationFrame(fp_esports_gaming_cpu_load_gauge_ui_loop);
        }
    });
})();