.fp-gaming-esports-otp-2fa-input-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    --fp-primary-color: #f5f6f8;
    --fp-secondary-color: #e2e8f0;
    --fp-muted-color: #0f172a;
    --fp-soft-color: rgba(0, 255, 255, 0.1);
    --fp-background-color: transparent;

    --fp-info-color: #475569;
    --fp-warning-color: #06b6d4;
    --fp-danger-color: #0891b2;
    --fp-accent-color: #00ffff;

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    position: relative;
    font-family: "Courier New", Courier, monospace, sans-serif;
    color: var(--fp-muted-color);
    background-color: var(--fp-background-color);
    box-sizing: border-box;
}

.fp-gaming-esports-otp-2fa-input-ui-stage {
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background: var(--fp-primary-color);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    border: 2px solid var(--fp-secondary-color);
    border-radius: 8px; 
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
}

.fp-gaming-esports-otp-2fa-input-ui-matrix-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.fp-gaming-esports-otp-2fa-input-ui-matrix-drop {
    position: absolute;
    font-weight: 900;
    font-size: 14px;
    color: var(--fp-info-color);
    opacity: 0.15;
    text-align: center;
    line-height: 1;
    transition: color 0.3s ease, opacity 0.3s ease, text-shadow 0.3s ease;
    will-change: transform;
}

.fp-gaming-esports-otp-2fa-input-ui-terminal {
    position: relative;
    z-index: 10;
    width: 85%;
    max-width: 380px;
    background: var(--fp-primary-color);
    border: 3px solid var(--fp-muted-color);
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 8px 8px 0px var(--fp-warning-color);
    animation: fp-gaming-esports-otp-2fa-input-ui-breathe 4s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.fp-gaming-esports-otp-2fa-input-ui-terminal::before,
.fp-gaming-esports-otp-2fa-input-ui-terminal::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 3px solid var(--fp-accent-color);
    z-index: 12;
    transition: all 0.3s ease;
}

.fp-gaming-esports-otp-2fa-input-ui-terminal::before {
    top: -3px; left: -3px;
    border-right: none; border-bottom: none;
}

.fp-gaming-esports-otp-2fa-input-ui-terminal::after {
    bottom: -3px; right: -3px;
    border-left: none; border-top: none;
}

.fp-gaming-esports-otp-2fa-input-ui-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px dashed var(--fp-muted-color);
    padding-bottom: 12px;
}

.fp-gaming-esports-otp-2fa-input-ui-title-wrap {
    display: flex;
    flex-direction: column;
}

.fp-gaming-esports-otp-2fa-input-ui-title {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.fp-gaming-esports-otp-2fa-input-ui-subtitle {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--fp-danger-color);
    letter-spacing: 0.2em;
}

.fp-gaming-esports-otp-2fa-input-ui-status-badge {
    font-size: 0.65rem;
    font-weight: 800;
    background: var(--fp-muted-color);
    color: var(--fp-primary-color);
    padding: 4px 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.fp-gaming-esports-otp-2fa-input-ui-otp-wrap {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.fp-gaming-esports-otp-2fa-input-ui-otp-box {
    flex: 1;
    aspect-ratio: 1 / 1.2;
    border: 2px solid var(--fp-muted-color);
    background: var(--fp-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    color: var(--fp-muted-color);
    position: relative;
    transition: all 0.2s ease;
}

.fp-gaming-esports-otp-2fa-input-ui-otp-box.fp-filled {
    background: var(--fp-muted-color);
    color: var(--fp-primary-color);
    border-color: var(--fp-muted-color);
}

.fp-gaming-esports-otp-2fa-input-ui-otp-box.fp-active::after {
    content: '';
    position: absolute;
    bottom: 10%;
    left: 20%;
    right: 20%;
    height: 3px;
    background: var(--fp-accent-color);
    animation: fp-gaming-esports-otp-2fa-input-ui-blink 1s step-end infinite;
}

.fp-gaming-esports-otp-2fa-input-ui-progress-container {
    width: 100%;
    height: 8px;
    background: var(--fp-secondary-color);
    border: 1px solid var(--fp-muted-color);
    position: relative;
    overflow: hidden;
}

.fp-gaming-esports-otp-2fa-input-ui-progress-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    background: var(--fp-muted-color);
    transition: width 0.1s linear, background-color 0.3s ease;
}

.fp-gaming-esports-otp-2fa-input-ui-progress-fill::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 10px;
    background: var(--fp-accent-color);
}

.fp-gaming-esports-otp-2fa-input-ui.fp-is-validating .fp-gaming-esports-otp-2fa-input-ui-terminal {
    border-color: var(--fp-accent-color);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4), inset 0 0 15px rgba(0, 255, 255, 0.1);
    transform: scale(0.98);
    animation: none; 
}

.fp-gaming-esports-otp-2fa-input-ui.fp-is-validating .fp-gaming-esports-otp-2fa-input-ui-terminal::before,
.fp-gaming-esports-otp-2fa-input-ui.fp-is-validating .fp-gaming-esports-otp-2fa-input-ui-terminal::after {
    width: 20px;
    height: 20px;
    border-width: 4px;
    box-shadow: 0 0 10px var(--fp-accent-color);
}

.fp-gaming-esports-otp-2fa-input-ui.fp-is-validating .fp-gaming-esports-otp-2fa-input-ui-status-badge {
    background: var(--fp-accent-color);
    color: var(--fp-muted-color);
    box-shadow: 0 0 15px var(--fp-accent-color);
}

.fp-gaming-esports-otp-2fa-input-ui.fp-is-validating .fp-gaming-esports-otp-2fa-input-ui-otp-box.fp-filled {
    background: var(--fp-accent-color);
    color: var(--fp-muted-color);
    border-color: var(--fp-accent-color);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

.fp-gaming-esports-otp-2fa-input-ui.fp-is-validating .fp-gaming-esports-otp-2fa-input-ui-progress-fill {
    background: var(--fp-accent-color);
}

.fp-gaming-esports-otp-2fa-input-ui.fp-is-validating .fp-gaming-esports-otp-2fa-input-ui-matrix-drop {
    color: var(--fp-accent-color);
    opacity: 0.8;
    text-shadow: 0 0 8px var(--fp-accent-color);
}

@keyframes fp-gaming-esports-otp-2fa-input-ui-breathe {
    0%, 100% { transform: translateY(0); box-shadow: 8px 8px 0px var(--fp-warning-color); }
    50% { transform: translateY(-4px); box-shadow: 12px 12px 0px var(--fp-warning-color); }
}

@keyframes fp-gaming-esports-otp-2fa-input-ui-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@media (max-width: 480px) {
    .fp-gaming-esports-otp-2fa-input-ui-stage { padding: 16px; }
    .fp-gaming-esports-otp-2fa-input-ui-terminal { width: 100%; padding: 20px 16px; gap: 20px;}
    .fp-gaming-esports-otp-2fa-input-ui-otp-box { font-size: 1.5rem; }
    .fp-gaming-esports-otp-2fa-input-ui-title { font-size: 1rem; }
}

document.querySelectorAll('.fp-gaming-esports-otp-2fa-input-ui').forEach(root => {
    const matrixContainer = root.querySelector('#fp-gaming-esports-otp-2fa-input-ui-matrix');
    const boxes = root.querySelectorAll('.fp-gaming-esports-otp-2fa-input-ui-otp-box');
    const statusEl = root.querySelector('#fp-gaming-esports-otp-2fa-input-ui-status');
    const progressEl = root.querySelector('#fp-gaming-esports-otp-2fa-input-ui-progress');

    const matrixChars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ@#$%&*';
    const drops = [];
    const numDrops = 25; 

    if (matrixContainer) {
        for (let i = 0; i < numDrops; i++) {
            let el = document.createElement('div');
            el.className = 'fp-gaming-esports-otp-2fa-input-ui-matrix-drop';
            el.style.left = `${(i / numDrops) * 100}%`;
            matrixContainer.appendChild(el);
            
            drops.push({
                el: el,
                y: Math.random() * 100,
                speed: 0.5 + Math.random() * 1.5,
                charUpdateTimer: 0
            });
        }
    }

    let phase = 'idle'; 
    let timer = 0;
    let lastTime = performance.now();
    let animationFrameId;
    let currentBox = 0;
    let progressPct = 0;
    let typeTimer = 0;

    function fp_gaming_esports_otp_2fa_input_ui_loop(time) {
        if (document.visibilityState === "hidden") {
            lastTime = time;
            animationFrameId = requestAnimationFrame(fp_gaming_esports_otp_2fa_input_ui_loop);
            return;
        }

        let dt = time - lastTime;
        lastTime = time;
        timer += dt;

        let speedMultiplier = (phase === 'validating') ? 4 : 1;
        
        drops.forEach(drop => {
            drop.y += drop.speed * speedMultiplier * (dt/16);
            if (drop.y > 105) {
                drop.y = -5;
                drop.speed = 0.5 + Math.random() * 1.5;
            }
            drop.el.style.transform = `translateY(${drop.y * 3}px)`; 
            
            drop.charUpdateTimer += dt;
            if (drop.charUpdateTimer > 100) {
                if (Math.random() < 0.3) {
                    drop.el.textContent = matrixChars[Math.floor(Math.random() * matrixChars.length)];
                }
                drop.charUpdateTimer = 0;
            }
        });

        if (phase === 'idle') {
            if (timer > 1000) {
                phase = 'typing';
                timer = 0;
                currentBox = 0;
                typeTimer = 0;
            }
        } 
        else if (phase === 'typing') {
            typeTimer += dt;
            if (typeTimer > 300) { 
                typeTimer = 0;
                
                if (currentBox < boxes.length) {
                    boxes[currentBox].textContent = Math.floor(Math.random() * 10);
                    boxes[currentBox].classList.remove('fp-active');
                    boxes[currentBox].classList.add('fp-filled');
                    
                    currentBox++;
                    if (currentBox < boxes.length) {
                        boxes[currentBox].classList.add('fp-active');
                    }
                } else {
                    phase = 'validating';
                    timer = 0;
                    progressPct = 0;
                    
                    root.classList.add('fp-is-validating');
                    if (statusEl) statusEl.textContent = "VALIDATING";
                }
            }
        }
        else if (phase === 'validating') {
            progressPct += 1.5 * (dt/16);
            if (progressEl) progressEl.style.width = `${Math.min(100, progressPct)}%`;

            if (timer > 2000 || progressPct >= 100) {
                phase = 'verified';
                timer = 0;
                
                if (statusEl) statusEl.textContent = "ACCESS GRANTED";
            }
        }
        else if (phase === 'verified') {
            if (timer > 1500) {
                phase = 'idle';
                timer = 0;
                root.classList.remove('fp-is-validating');
                if (statusEl) statusEl.textContent = "AWAITING";
                if (progressEl) progressEl.style.width = "0%";
                
                boxes.forEach(box => {
                    box.textContent = '';
                    box.classList.remove('fp-filled', 'fp-active');
                });
                boxes[0].classList.add('fp-active');
            }
        }

        animationFrameId = requestAnimationFrame(fp_gaming_esports_otp_2fa_input_ui_loop);
    }

    animationFrameId = requestAnimationFrame(fp_gaming_esports_otp_2fa_input_ui_loop);

    const observer = new MutationObserver(() => {
        if (!document.body.contains(root)) {
            cancelAnimationFrame(animationFrameId);
            observer.disconnect();
        }
    });
    observer.observe(document.body, { childList: true, subtree: true });
});