/* ================================================================
   Adventure Quest Game — Visual Overlay Animations (v2)
   All overlays are pure CSS — no images needed.
   ================================================================ */

/* Common overlay base */
.aqg-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    transition: opacity .8s ease;
    overflow: hidden;
    will-change: opacity;
    contain: strict;
}
.aqg-overlay.aqg-overlay-active {
    opacity: 1;
}

/* GPU-accelerate animated children */
.aqg-overlay::before,
.aqg-overlay::after {
    will-change: transform;
    backface-visibility: hidden;
}

/* ================================================================
   1. FOG OVERLAY
   ================================================================ */
.aqg-overlay-fog {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(180,180,200,.35) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, rgba(180,180,200,.25) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 80%, rgba(180,180,200,.3) 0%, transparent 50%);
    animation: aqg-fog-drift 12s ease-in-out infinite alternate;
}
.aqg-overlay-fog::before,
.aqg-overlay-fog::after {
    content: '';
    position: absolute;
    inset: -50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,200,220,.2), transparent 70%);
    animation: aqg-fog-swirl 20s linear infinite;
}
.aqg-overlay-fog::after {
    animation-duration: 15s;
    animation-direction: reverse;
    opacity: .6;
}

@keyframes aqg-fog-drift {
    0%   { transform: translateX(-3%) translateY(2%); }
    100% { transform: translateX(3%) translateY(-2%); }
}
@keyframes aqg-fog-swirl {
    0%   { transform: translate(-20%, -10%) rotate(0deg); }
    100% { transform: translate(-20%, -10%) rotate(360deg); }
}

/* ================================================================
   2. RAIN OVERLAY (visual)
   ================================================================ */
.aqg-overlay-rain {
    background: linear-gradient(transparent 0%, rgba(100,150,200,.03) 100%);
}
.aqg-overlay-rain::before,
.aqg-overlay-rain::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 200%;
    background-image:
        linear-gradient(transparent 96%, rgba(174,194,224,.35) 96%, rgba(174,194,224,.35) 100%);
    background-size: 2px 20px;
    animation: aqg-rain-fall .4s linear infinite;
}
.aqg-overlay-rain::after {
    left: 50%;
    animation-delay: -.2s;
    opacity: .6;
    background-size: 3px 24px;
}

@keyframes aqg-rain-fall {
    0%   { transform: translateY(0); }
    100% { transform: translateY(20px); }
}

/* ================================================================
   3. SNOW OVERLAY
   ================================================================ */
.aqg-overlay-snow {
    background: transparent;
}
.aqg-overlay-snow::before,
.aqg-overlay-snow::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 300%;
    background-image:
        radial-gradient(3px 3px at 20% 10%, rgba(255,255,255,.9) 50%, transparent 51%),
        radial-gradient(2px 2px at 40% 30%, rgba(255,255,255,.7) 50%, transparent 51%),
        radial-gradient(4px 4px at 60% 50%, rgba(255,255,255,.85) 50%, transparent 51%),
        radial-gradient(2px 2px at 80% 70%, rgba(255,255,255,.6) 50%, transparent 51%),
        radial-gradient(3px 3px at 10% 90%, rgba(255,255,255,.8) 50%, transparent 51%),
        radial-gradient(2px 2px at 50% 15%, rgba(255,255,255,.7) 50%, transparent 51%),
        radial-gradient(3px 3px at 70% 45%, rgba(255,255,255,.75) 50%, transparent 51%),
        radial-gradient(2px 2px at 30% 80%, rgba(255,255,255,.65) 50%, transparent 51%);
    background-size: 200px 300px;
    animation: aqg-snow-fall 6s linear infinite;
}
.aqg-overlay-snow::after {
    animation-delay: -3s;
    animation-duration: 8s;
    opacity: .7;
    background-size: 160px 260px;
}

@keyframes aqg-snow-fall {
    0%   { transform: translateY(0) translateX(0); }
    50%  { transform: translateY(150px) translateX(15px); }
    100% { transform: translateY(300px) translateX(0); }
}

/* ================================================================
   4. DARK VIGNETTE
   ================================================================ */
.aqg-overlay-vignette_dark {
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.7) 100%);
}

/* ================================================================
   5. RED VIGNETTE (danger)
   ================================================================ */
.aqg-overlay-vignette_red {
    background: radial-gradient(ellipse at center, transparent 30%, rgba(180,0,0,.5) 100%);
    animation: aqg-vignette-pulse 2s ease-in-out infinite;
}

@keyframes aqg-vignette-pulse {
    0%, 100% { opacity: .6; }
    50%      { opacity: 1; }
}

/* ================================================================
   6. SPARKLE PARTICLES (kids theme)
   ================================================================ */
.aqg-overlay-sparkle {
    background: transparent;
}
.aqg-overlay-sparkle::before,
.aqg-overlay-sparkle::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 15% 20%, rgba(255,215,0,.9) 50%, transparent 51%),
        radial-gradient(3px 3px at 35% 45%, rgba(255,182,193,.8) 50%, transparent 51%),
        radial-gradient(2px 2px at 55% 15%, rgba(135,206,235,.85) 50%, transparent 51%),
        radial-gradient(2px 2px at 75% 65%, rgba(255,215,0,.7) 50%, transparent 51%),
        radial-gradient(3px 3px at 25% 80%, rgba(152,251,152,.8) 50%, transparent 51%),
        radial-gradient(2px 2px at 85% 35%, rgba(255,182,193,.75) 50%, transparent 51%),
        radial-gradient(2px 2px at 45% 90%, rgba(135,206,235,.7) 50%, transparent 51%),
        radial-gradient(3px 3px at 65% 10%, rgba(255,215,0,.85) 50%, transparent 51%);
    background-size: 300px 300px;
    animation: aqg-sparkle-twinkle 3s ease-in-out infinite alternate;
}
.aqg-overlay-sparkle::after {
    animation-delay: -1.5s;
    transform: scale(-1, 1);
    opacity: .7;
}

@keyframes aqg-sparkle-twinkle {
    0%   { opacity: .3; transform: scale(1); }
    50%  { opacity: 1; transform: scale(1.02); }
    100% { opacity: .5; transform: scale(.98); }
}

/* ================================================================
   7. FIREFLIES
   ================================================================ */
.aqg-overlay-fireflies {
    background: transparent;
}
.aqg-overlay-fireflies::before,
.aqg-overlay-fireflies::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(200,255,100,.9);
    box-shadow:
        0 0 8px rgba(200,255,100,.6),
        80px 120px 0 rgba(200,255,100,.7),
        -60px 200px 0 rgba(200,255,100,.5),
        150px 80px 0 rgba(200,255,100,.8),
        -120px 50px 0 rgba(200,255,100,.6),
        200px 250px 0 rgba(200,255,100,.7),
        -30px 300px 0 rgba(200,255,100,.5),
        250px 150px 0 rgba(200,255,100,.65);
    animation: aqg-firefly-float 8s ease-in-out infinite;
    top: 20%;
    left: 30%;
}
.aqg-overlay-fireflies::after {
    top: 50%;
    left: 60%;
    animation-delay: -4s;
    animation-duration: 10s;
    box-shadow:
        0 0 8px rgba(200,255,100,.6),
        -50px 80px 0 rgba(200,255,100,.6),
        70px -30px 0 rgba(200,255,100,.7),
        -100px -60px 0 rgba(200,255,100,.5),
        130px 100px 0 rgba(200,255,100,.75),
        -80px 180px 0 rgba(200,255,100,.6);
}

@keyframes aqg-firefly-float {
    0%, 100% { transform: translate(0, 0); opacity: .6; }
    25%      { transform: translate(20px, -30px); opacity: 1; }
    50%      { transform: translate(-15px, -10px); opacity: .4; }
    75%      { transform: translate(10px, 20px); opacity: .9; }
}

/* ================================================================
   8. GHOST / SHADOWS
   ================================================================ */
.aqg-overlay-ghost {
    background: transparent;
}
.aqg-overlay-ghost::before,
.aqg-overlay-ghost::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 120px;
    border-radius: 40px 40px 20px 20px;
    background: radial-gradient(ellipse at center, rgba(100,80,140,.25), transparent 70%);
    filter: blur(10px);
    animation: aqg-ghost-drift 10s ease-in-out infinite;
}
.aqg-overlay-ghost::before {
    top: 10%;
    left: 15%;
}
.aqg-overlay-ghost::after {
    top: 40%;
    right: 10%;
    animation-delay: -5s;
    animation-duration: 12s;
    opacity: .6;
    width: 60px;
    height: 90px;
}

@keyframes aqg-ghost-drift {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: .3; }
    25%      { transform: translate(40px, -20px) scale(1.1); opacity: .6; }
    50%      { transform: translate(-20px, -40px) scale(.95); opacity: .2; }
    75%      { transform: translate(30px, 10px) scale(1.05); opacity: .5; }
}

/* ================================================================
   9. CONFETTI (celebration)
   ================================================================ */
.aqg-overlay-confetti {
    background: transparent;
}
.aqg-overlay-confetti::before,
.aqg-overlay-confetti::after {
    content: '';
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    background-image:
        linear-gradient(135deg, #ff6b6b 25%, transparent 25%),
        linear-gradient(225deg, #4ecdc4 25%, transparent 25%),
        linear-gradient(315deg, #ffe66d 25%, transparent 25%),
        linear-gradient(45deg, #a55eea 25%, transparent 25%);
    background-size: 8px 8px, 12px 10px, 6px 12px, 10px 6px;
    background-position: 10% 0, 30% 10%, 60% 5%, 80% 15%;
    animation: aqg-confetti-fall 3s linear infinite;
}
.aqg-overlay-confetti::after {
    animation-delay: -1.5s;
    opacity: .7;
    background-size: 10px 6px, 6px 10px, 12px 8px, 8px 12px;
}

@keyframes aqg-confetti-fall {
    0%   { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(140%) rotate(20deg); }
}

/* ================================================================
   10. PULSE SCREEN
   ================================================================ */
.aqg-overlay-pulse_screen {
    background: radial-gradient(ellipse at center, transparent 0%, rgba(100,100,255,.08) 100%);
    animation: aqg-screen-pulse 2s ease-in-out infinite;
}

@keyframes aqg-screen-pulse {
    0%, 100% { opacity: .3; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.01); }
}

/* ================================================================
   SCREEN FLASH (action: screen_flash)
   One-shot flash effect, triggered via JS adding/removing class
   ================================================================ */
.aqg-flash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    transition: opacity .05s ease;
}
.aqg-flash.aqg-flash-active {
    opacity: 1;
    animation: aqg-flash-anim .3s ease-out forwards;
}

@keyframes aqg-flash-anim {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* ================================================================
   MESSAGE TOAST (action: show_message)
   ================================================================ */
.aqg-message-toast {
    position: absolute;
    left: 50%;
    top: 60px;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(15,23,42,.95);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 14px;
    padding: 14px 24px;
    color: #e2e8f0;
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
    max-width: 80%;
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
    box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.aqg-message-toast.aqg-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Theme overrides for toast */
.aqg-theme-kids .aqg-message-toast {
    background: rgba(255,251,235,.96);
    border-color: rgba(249,115,22,.2);
    color: #1c1917;
}