/* UNIK AudioFlux Engine — Neon Black & Yellow Theme
   Premium black + neon yellow glitz with site-wide animations
   Extracted from inline styles in index.html and refactored here.
*/

:root{
    --bg:#000000; /* deep black */
    --panel:#0b0b0b; /* slight off-black for panels */
    --glass: rgba(255,255,255,0.02);
    --neon:#ffd400; /* primary neon yellow */
    --neon-2:#ffe600; /* softer neon */
    --accent:#ffe36b;
    --muted:#9ca3af; /* gray */
    --text:#f8f9fb; /* near-white */
    --shadow: 0 6px 20px rgba(0,0,0,0.7);
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}

body{
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, 'Audiowide', sans-serif;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(255,212,0,0.06), transparent 8%),
                radial-gradient(900px 500px at 90% 90%, rgba(255,212,0,0.03), transparent 8%),
                var(--bg);
    color:var(--text);
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{
    width:100%; max-width:980px; border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    /* glassmorphism core */
    background-color: rgba(6,6,6,0.45);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(255,212,0,0.12);
    box-shadow: 0 8px 40px rgba(0,0,0,0.7), 0 0 24px rgba(255,212,0,0.03) inset;
    transform: translateY(0);
    animation: panelEntrance 800ms cubic-bezier(.2,.9,.3,1);
}

@keyframes panelEntrance{
    from{opacity:0; transform: translateY(22px) scale(.995)}
    to{opacity:1; transform: translateY(0) scale(1)}
}

.header{
    padding:60px 36px; text-align:center; position:relative; overflow:hidden;
    background: linear-gradient(90deg, rgba(0,0,0,0.45), rgba(0,0,0,0.28));
    border-bottom: 1px solid rgba(255,212,0,0.06);
    backdrop-filter: blur(8px);
}

.header h1{font-size:4rem;font-weight:900;letter-spacing: -1px;display:flex;align-items:center;justify-content:center;margin:20px 0;}

/* UNIK AudioFlux Engine title with smoke effect */
.animated-title{
    font-family: 'Audiowide', 'Inter', sans-serif; font-size:4rem; font-weight:900; color:var(--neon);
    text-transform:none; position:relative; z-index:2;
    background: linear-gradient(90deg, var(--neon), var(--neon-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow: 0 0 40px rgba(0, 0, 0, 0.8),
                 0 0 80px rgb(255, 238, 0),
                 0 0 120px rgba(0, 0, 0, 0.76);
    letter-spacing: 2px;
}

/* Cinematic text reveal effect - REMOVED */
/* @keyframes cinematicReveal{
    0%{
        opacity: 0;
        transform: scaleX(0.3) translateX(-40px);
        clip-path: inset(0 100% 0 0);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        transform: scaleX(1) translateX(0);
        clip-path: inset(0 0 0 0);
    }
} */

/* Magical multi-layer glow effect - REMOVED */
/* @keyframes magicalGlowPulse{
    0%{
        filter: drop-shadow(0 3px 8px rgba(255,212,0,0.15))
                drop-shadow(0 0 20px rgba(255,212,0,0.1))
                drop-shadow(0 0 40px rgba(255,168,0,0.05));
        text-shadow: 0 0 10px rgba(255,212,0,0.3),
                     0 0 20px rgba(255,212,0,0.15);
    }
    50%{
        filter: drop-shadow(0 6px 20px rgba(255,212,0,0.35))
                drop-shadow(0 0 40px rgba(255,212,0,0.2))
                drop-shadow(0 0 80px rgba(255,168,0,0.15));
        text-shadow: 0 0 20px rgba(255,212,0,0.6),
                     0 0 40px rgba(255,212,0,0.3),
                     0 0 60px rgba(255,168,0,0.2);
    }
    100%{
        filter: drop-shadow(0 3px 8px rgba(255,212,0,0.15))
                drop-shadow(0 0 20px rgba(255,212,0,0.1))
                drop-shadow(0 0 40px rgba(255,168,0,0.05));
        text-shadow: 0 0 10px rgba(255,212,0,0.3),
                     0 0 20px rgba(255,212,0,0.15);
    }
} */

/* Shimmering magical effect overlay - REMOVED */
/* @keyframes textShimmerEffect{
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
} */

/* Electric Flux Blink Glow - REMOVED */
/* @keyframes electricFluxBlink{
    0%{
        text-shadow: 0 0 20px rgba(255,212,0,0.5),
                     0 0 40px rgba(255,168,0,0.3),
                     0 0 60px rgba(255,100,0,0.1);
        filter: drop-shadow(0 0 10px rgba(255,212,0,0.3))
                drop-shadow(0 0 20px rgba(255,168,0,0.15));
    }
    25%{
        text-shadow: 0 0 30px rgba(255,212,0,0.8),
                     0 0 60px rgba(255,168,0,0.5),
                     0 0 90px rgba(255,100,0,0.3),
                     0 0 120px rgba(255,212,0,0.2);
        filter: drop-shadow(0 0 15px rgba(255,212,0,0.6))
                drop-shadow(0 0 35px rgba(255,168,0,0.35))
                drop-shadow(0 0 60px rgba(255,100,0,0.15));
    }
    50%{
        text-shadow: 0 0 50px rgba(255,212,0,1),
                     0 0 80px rgba(255,168,0,0.7),
                     0 0 120px rgba(255,100,0,0.5),
                     0 0 160px rgba(255,212,0,0.4);
        filter: drop-shadow(0 0 20px rgba(255,212,0,0.8))
                drop-shadow(0 0 45px rgba(255,168,0,0.5))
                drop-shadow(0 0 80px rgba(255,100,0,0.25));
    }
    75%{
        text-shadow: 0 0 30px rgba(255,212,0,0.8),
                     0 0 60px rgba(255,168,0,0.5),
                     0 0 90px rgba(255,100,0,0.3),
                     0 0 120px rgba(255,212,0,0.2);
        filter: drop-shadow(0 0 15px rgba(255,212,0,0.6))
                drop-shadow(0 0 35px rgba(255,168,0,0.35))
                drop-shadow(0 0 60px rgba(255,100,0,0.15));
    }
    100%{
        text-shadow: 0 0 20px rgba(255,212,0,0.5),
                     0 0 40px rgba(255,168,0,0.3),
                     0 0 60px rgba(255,100,0,0.1);
        filter: drop-shadow(0 0 10px rgba(255,212,0,0.3))
                drop-shadow(0 0 20px rgba(255,168,0,0.15));
    }
} */

.header p{margin-top:15px;font-size:1.15rem;color:var(--muted)}

.content{padding:34px 36px}
.section{margin-bottom:26px}
.section-title{font-size:0.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;margin-bottom:12px;letter-spacing:0.6px}

/* Upload zone: glass panel with neon accent */
.upload-zone{
    border-radius:12px;padding:38px 18px;text-align:center;cursor:pointer;position:relative;overflow:hidden;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border: 1px solid rgba(255,212,0,0.12);
    box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 18px rgba(255,212,0,0.03) inset;
    transition:transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s ease;
}
.upload-zone:hover{transform:translateY(-6px); box-shadow: 0 18px 48px rgba(0,0,0,0.7), 0 0 32px rgba(255,212,0,0.08) inset}
.upload-zone.drag-over{transform:scale(1.02); border-color: rgba(255,212,0,0.32); box-shadow:0 18px 48px rgba(0,0,0,0.7), 0 0 38px rgba(255,212,0,0.12) inset}

.upload-icon{font-size:2.6rem;margin-bottom:14px;opacity:0.95}
.upload-text h3{font-size:1.06rem; color:var(--text); margin-bottom:6px}
.upload-text p{color:var(--muted)}
.upload-text small{color:rgba(255,255,255,0.55)}

.file-info{display:none;background:rgba(0,0,0,0.48);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:12px;padding:14px;margin-top:14px;align-items:center;gap:12px;border:1px solid rgba(255,212,0,0.08);box-shadow:0 8px 30px rgba(0,0,0,0.55)}
.file-info.show{display:flex}
.file-icon{font-size:1.6rem;opacity:0.9}
.file-name{font-weight:700;color:var(--text);font-size:0.95rem}
.file-size{font-size:0.85rem;color:var(--muted)}
.file-clear{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:1.15rem;padding:6px;border-radius:8px}
.file-clear:hover{color:var(--neon)}

.format-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:12px}
.format-label{display:flex;align-items:center;justify-content:center;padding:12px;border-radius:10px;cursor:pointer;font-weight:700;background:rgba(255,255,255,0.01);color:var(--text);border:1px solid rgba(255,255,255,0.03);text-transform:uppercase}
.format-option input[type="radio"]:checked + .format-label{background:linear-gradient(90deg, rgba(255,212,0,0.12), rgba(255,212,0,0.06));box-shadow:0 6px 24px rgba(255,212,0,0.08);border-color:rgba(255,212,0,0.18);color:var(--neon)}
.format-label:hover{transform:translateY(-4px)}

.advanced-options{background:rgba(0,0,0,0.44);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:12px;padding:18px;margin-top:12px;border:1px solid rgba(255,212,0,0.06);box-shadow:0 8px 30px rgba(0,0,0,0.5)}
.advanced-options-title{font-weight:700;color:var(--text);cursor:pointer}
.advanced-options-title::before{content:'⚙️';margin-right:8px}
.advanced-content{display:none}
.advanced-content.show{display:block}

.option-group label{display:block;font-size:0.9rem;color:var(--text);margin-bottom:8px}
.option-group select, .option-group input[type="range"]{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:rgba(0,0,0,0.25);color:var(--text)}

.button-group{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
button{padding:12px 18px;border-radius:10px;font-weight:800;cursor:pointer;text-transform:uppercase;letter-spacing:0.8px}

.btn-primary{background:linear-gradient(90deg,var(--neon),var(--neon-2));color:#111;border:none;box-shadow:0 10px 30px rgba(255,212,0,0.12)}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(255,212,0,0.18)}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed}

.btn-secondary{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
.btn-success{background:linear-gradient(90deg,#00c853,#00e676);color:#071;grid-column:1 / -1}
.btn-download{background:linear-gradient(90deg,var(--neon),#ffecb3);color:#111;width:100%}

.status-box{display:none;padding:14px;border-radius:10px;margin:18px 0;background:rgba(0,0,0,0.46);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-left:4px solid rgba(255,212,0,0.18);border:1px solid rgba(255,212,0,0.04);box-shadow:0 8px 28px rgba(0,0,0,0.55)}
.status-box.show{display:block}
.status-message{font-weight:700;color:var(--text);margin-bottom:6px}
.status-subtext{color:var(--muted)}

.progress-container{margin-top:12px}
.progress-bar{width:100%;height:8px;background:rgba(255,255,255,0.03);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--neon),#ffd36b);transition:width .25s ease;border-radius:999px}

.download-section{display:none;background:rgba(0,0,0,0.46);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:18px;border-radius:12px;text-align:center;border:1px solid rgba(255,212,0,0.06);box-shadow:0 8px 36px rgba(0,0,0,0.55)}
.download-section.show{display:block}
.download-icon{font-size:2.2rem;margin-bottom:10px}
.download-text{color:var(--muted);margin-bottom:10px}
.download-text strong{color:var(--neon);display:block}

.footer{padding:16px 20px;text-align:center;font-size:0.9rem;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02);background:linear-gradient(180deg, transparent, rgba(0,0,0,0.02))}
.footer a{color:var(--neon);text-decoration:none;font-weight:700}

.ffmpeg-badge{display:inline-block;background:linear-gradient(90deg,var(--neon),var(--neon-2));color:#111;padding:6px 12px;border-radius:999px;font-weight:700;animation: badgePulse 2s infinite;border:1px solid rgba(255,212,0,0.18);box-shadow:0 6px 18px rgba(255,212,0,0.06)}
.ffmpeg-badge.ready{background:linear-gradient(90deg,#00e676,#00c853);color:#011;animation:none;border-color:rgba(16,185,129,0.2)}

@keyframes badgePulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}

.loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,0.18);border-top-color:var(--neon);border-radius:50%;animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* batch list and responsive tweaks */
.batch-list{max-height:300px;overflow:auto;border-radius:8px;border:1px solid rgba(255,255,255,0.02);margin-top:10px}
.batch-item{display:flex;align-items:center;padding:10px;border-bottom:1px solid rgba(255,255,255,0.02);gap:10px}
.batch-status{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center}

@media (max-width:640px){
    .container{border-radius:12px}
    .header{padding:40px 20px}
    .content{padding:22px}
    .button-group{grid-template-columns:1fr}
    .header h1{font-size:2.5rem}
    .animated-title{font-size:2.2rem}
}

/* small decorative animated scanline */
.container::after{
    content:'';position:absolute;left:-40%;top:0;height:100%;width:60%;pointer-events:none;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.02), transparent);transform:skewX(-18deg);animation: scan 8s linear infinite;opacity:0.6
}
@keyframes scan{0%{left:-40%}100%{left:140%}}

/* subtle neon flicker effect for header text occasionally */
@keyframes flicker{
  0%{opacity:1}
  7%{opacity:.85}
  8%{opacity:1}
  10%{opacity:.9}
  100%{opacity:1}
}

/* accessibility: focus outlines */
.format-label:focus, .btn-primary:focus, .btn-secondary:focus{outline:3px solid rgba(255,212,0,0.14);outline-offset:3px}

/* ============================================
   ANIMATED LAVA LOADER - Futuristic Audio Processing Animation
   ============================================ */

.loader-modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeInLoader 0.4s ease-out;
}

.loader-modal.show{
    display: flex;
}

@keyframes fadeInLoader{
    from{ opacity: 0; }
    to{ opacity: 1; }
}

.loader-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0,0,0,0.75), rgba(0,0,0,0.95));
    backdrop-filter: blur(4px);
}

.loader-container{
    position: relative;
    z-index: 10000;
    text-align: center;
    animation: loaderPulse 3s ease-in-out infinite;
}

@keyframes loaderPulse{
    0%, 100%{ transform: scale(1); }
    50%{ transform: scale(1.08); }
}

/* Main lava core container */
.lava-core{
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 32px;
}

/* Liquid lava blob - main spinning animation */
.lava-liquid{
    position: absolute;
    width: 140px;
    height: 140px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50% 45% 55% 48% / 48% 52% 45% 55%;
    background: linear-gradient(45deg, #ffd400, #ffaa00, #ff8800);
    animation: lavaSpinAndShapeShift 6s ease-in-out infinite, lavaPulseGlow 2s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255, 212, 0, 0.6)) 
            drop-shadow(0 0 50px rgba(255, 136, 0, 0.4));
    box-shadow: 
        inset -10px -10px 30px rgba(0, 0, 0, 0.3),
        inset 10px 10px 20px rgba(255, 255, 255, 0.1),
        0 0 60px rgba(255, 212, 0, 0.5);
}

@keyframes lavaSpinAndShapeShift{
    0%{
        transform: translate(-50%, -50%) rotateZ(0deg);
        border-radius: 50% 45% 55% 48% / 48% 52% 45% 55%;
    }
    25%{
        border-radius: 45% 55% 50% 45% / 52% 48% 55% 45%;
    }
    50%{
        transform: translate(-50%, -50%) rotateZ(180deg);
        border-radius: 55% 48% 45% 52% / 45% 55% 48% 50%;
    }
    75%{
        border-radius: 48% 50% 52% 55% / 55% 45% 52% 48%;
    }
    100%{
        transform: translate(-50%, -50%) rotateZ(360deg);
        border-radius: 50% 45% 55% 48% / 48% 52% 45% 55%;
    }
}

@keyframes lavaPulseGlow{
    0%, 100%{
        filter: drop-shadow(0 0 30px rgba(255, 212, 0, 0.6)) 
                drop-shadow(0 0 50px rgba(255, 136, 0, 0.4));
    }
    50%{
        filter: drop-shadow(0 0 50px rgba(255, 212, 0, 0.8)) 
                drop-shadow(0 0 80px rgba(255, 136, 0, 0.6));
    }
}

/* Expanding waveform rings - audio data visualization */
.waveform-ring{
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid rgba(255, 212, 0, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px rgba(255, 212, 0, 0.3);
}

.ring-1{
    width: 100px;
    height: 100px;
    animation: expandRing1 2s ease-out infinite;
}

.ring-2{
    width: 80px;
    height: 80px;
    animation: expandRing2 2s ease-out 0.4s infinite;
}

.ring-3{
    width: 60px;
    height: 60px;
    animation: expandRing3 2s ease-out 0.8s infinite;
}

@keyframes expandRing1{
    0%{
        width: 100px;
        height: 100px;
        opacity: 1;
    }
    100%{
        width: 200px;
        height: 200px;
        opacity: 0;
    }
}

@keyframes expandRing2{
    0%{
        width: 80px;
        height: 80px;
        opacity: 1;
    }
    100%{
        width: 160px;
        height: 160px;
        opacity: 0;
    }
}

@keyframes expandRing3{
    0%{
        width: 60px;
        height: 60px;
        opacity: 1;
    }
    100%{
        width: 120px;
        height: 120px;
        opacity: 0;
    }
}

/* Orbiting particles around the core */
.orbit{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.orbit-1{
    width: 160px;
    height: 160px;
    animation: orbitSpin1 8s linear infinite;
}

.orbit-2{
    width: 140px;
    height: 140px;
    animation: orbitSpin2 10s linear infinite reverse;
}

.orbit-3{
    width: 120px;
    height: 120px;
    animation: orbitSpin3 12s linear infinite;
}

.particle{
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.particle-1{
    background: radial-gradient(circle, #ffff99, #ffd400);
    box-shadow: 0 0 15px rgba(255, 212, 0, 0.8), 0 0 30px rgba(255, 168, 0, 0.5);
}

.particle-2{
    background: radial-gradient(circle, #ffff99, #ffaa00);
    box-shadow: 0 0 12px rgba(255, 170, 0, 0.7), 0 0 25px rgba(255, 136, 0, 0.4);
}

.particle-3{
    background: radial-gradient(circle, #ffff99, #ff8800);
    box-shadow: 0 0 10px rgba(255, 136, 0, 0.6), 0 0 20px rgba(255, 100, 0, 0.3);
}

@keyframes orbitSpin1{
    from{ transform: translate(-50%, -50%) rotateZ(0deg); }
    to{ transform: translate(-50%, -50%) rotateZ(360deg); }
}

@keyframes orbitSpin2{
    from{ transform: translate(-50%, -50%) rotateZ(0deg); }
    to{ transform: translate(-50%, -50%) rotateZ(-360deg); }
}

@keyframes orbitSpin3{
    from{ transform: translate(-50%, -50%) rotateZ(0deg); }
    to{ transform: translate(-50%, -50%) rotateZ(360deg); }
}

/* Pulsing glowing center core */
.core-glow{
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 200, 0.4), rgba(255, 212, 0, 0.1));
    animation: coreGlowPulse 2s ease-in-out infinite;
    filter: blur(20px);
}

@keyframes coreGlowPulse{
    0%, 100%{
        box-shadow: 0 0 30px rgba(255, 212, 0, 0.4), 
                    0 0 60px rgba(255, 168, 0, 0.2);
    }
    50%{
        box-shadow: 0 0 60px rgba(255, 212, 0, 0.7), 
                    0 0 100px rgba(255, 168, 0, 0.4);
    }
}

/* Loader text */
.loader-text{
    color: var(--neon);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: textShimmer 2s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(255, 212, 0, 0.5);
}

@keyframes textShimmer{
    0%, 100%{
        opacity: 1;
        text-shadow: 0 0 20px rgba(255, 212, 0, 0.5);
    }
    50%{
        opacity: 0.7;
        text-shadow: 0 0 40px rgba(255, 212, 0, 0.8);
    }
}

/* ============================================
   THUNDER STARS CURSOR EFFECT - Interactive Yellow Glitz
   ============================================ */

/* Spark particle animations with thunder effect */
.spark {
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    will-change: transform, opacity;
    font-size: 1.3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spark.spark {
    animation: sparkBurst 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

.spark.thunder {
    animation: thunderBurst 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.spark.star {
    animation: starBurst 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes sparkBurst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        filter: drop-shadow(0 0 12px rgba(255, 212, 0, 1))
                drop-shadow(0 0 24px rgba(255, 168, 0, 0.8));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(255, 212, 0, 0.9))
                drop-shadow(0 0 16px rgba(255, 168, 0, 0.5));
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.1);
        filter: drop-shadow(0 0 2px rgba(255, 212, 0, 0));
    }
}

@keyframes thunderBurst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1.2) rotateZ(0deg);
        filter: drop-shadow(0 0 15px rgba(255, 212, 0, 1))
                drop-shadow(0 0 30px rgba(255, 168, 0, 0.9));
        text-shadow: 0 0 20px rgba(255, 255, 150, 1),
                     0 0 40px rgba(255, 212, 0, 0.9);
    }
    40% {
        opacity: 0.8;
        transform: translate(var(--tx), var(--ty)) scale(0.8) rotateZ(45deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.05) rotateZ(180deg);
        filter: drop-shadow(0 0 0px rgba(255, 212, 0, 0));
    }
}

@keyframes starBurst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotateZ(0deg);
        filter: drop-shadow(0 0 10px rgba(255, 212, 0, 1))
                drop-shadow(0 0 20px rgba(255, 168, 0, 0.8));
        text-shadow: 0 0 12px rgba(255, 212, 0, 1),
                     0 0 25px rgba(255, 168, 0, 0.7);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(1.1) rotateZ(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.1) rotateZ(360deg);
        filter: drop-shadow(0 0 1px rgba(255, 212, 0, 0));
    }
}

/* Glow ring effect on click */
.glow-ring {
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    border: 2px solid rgba(255, 212, 0, 0.6);
    border-radius: 50%;
    animation: ringExpand 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes ringExpand {
    0% {
        width: 20px;
        height: 20px;
        opacity: 1;
        box-shadow: 0 0 20px rgba(255, 212, 0, 0.8),
                    inset 0 0 20px rgba(255, 212, 0, 0.4);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 40px rgba(255, 212, 0, 0.5),
                    inset 0 0 40px rgba(255, 212, 0, 0.2);
    }
    100% {
        width: 80px;
        height: 80px;
        opacity: 0;
        box-shadow: 0 0 60px rgba(255, 212, 0, 0),
                    inset 0 0 60px rgba(255, 212, 0, 0);
        transform: translate(-50%, -50%) scale(1);
    }
}

/* end of styles.css */