:root {
    --gg-color: #ff4fd8;
    --gg-color-rgb: 255, 79, 216;
    --gg-secondary: #ff3864;
    --gg-secondary-rgb: 255, 56, 100;
    --gg-gold: #d4af37;
    --gg-gold-rgb: 212, 175, 55;
    --gg-opacity: 0.18;
    --gg-speed: 1;
}

body.gg-on {
    position: relative;
}

body.gg-on #wrapper {
    position: relative;
    z-index: 1;
}

body.gg-on .gg-overlay,
body.gg-on .gg-fog,
body.gg-on .gg-particles,
body.gg-on .gg-effects {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

body.gg-on .gg-overlay {
    opacity: var(--gg-opacity);
    background:
        radial-gradient(60vmax 40vmax at 20% 15%, rgba(var(--gg-color-rgb), 0.35) 0%, transparent 60%),
        radial-gradient(40vmax 30vmax at 80% 25%, rgba(var(--gg-secondary-rgb), 0.20) 0%, transparent 65%),
        radial-gradient(55vmax 35vmax at 55% 85%, rgba(var(--gg-gold-rgb), 0.12) 0%, transparent 70%);
    filter: blur(0.2px);
}

body.gg-on .gg-fog {
    opacity: calc(var(--gg-opacity) * 0.45);
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.04), transparent 36%),
        linear-gradient(180deg, rgba(10, 4, 18, 0.18), rgba(5, 2, 10, 0.02) 34%, rgba(0, 0, 0, 0.08));
    mix-blend-mode: screen;
    filter: blur(10px);
}

body.gg-on .gg-particles {
    overflow: hidden;
}

body.gg-on .gg-particle {
    position: absolute;
    width: var(--gg-size, 4px);
    height: var(--gg-size, 4px);
    left: var(--gg-left, 50%);
    top: var(--gg-top, 50%);
    border-radius: 999px;
    opacity: var(--gg-alpha, 0.35);
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9), rgba(var(--gg-color-rgb), 0.55) 45%, transparent 72%);
    box-shadow: 0 0 8px rgba(var(--gg-color-rgb), 0.24);
    animation: gg-particle-drift var(--gg-dur, 18s) linear infinite;
}

body.gg-on .gg-teacup {
    position: absolute;
    width: var(--gg-size, 56px);
    height: var(--gg-size, 56px);
    left: var(--gg-left, 50%);
    top: var(--gg-top, 50%);
    opacity: var(--gg-a, 0.55);
    transform: translate3d(-50%, -50%, 0) rotate(var(--gg-r, 0deg));
    animation: gg-float var(--gg-dur, 22s) linear infinite;
    will-change: transform, opacity;
    filter: drop-shadow(0 0 10px var(--gg-color)) drop-shadow(0 0 20px rgba(var(--gg-color-rgb), 0.28));
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 48h68c0 28-16 50-34 50S30 76 30 48Z'/%3E%3Cpath d='M98 56h9c10 0 18 8 18 18s-8 18-18 18h-9'/%3E%3Cpath d='M36 104h56'/%3E%3Cpath d='M44 112h40'/%3E%3Cpath d='M38 38c6 4 10 8 10 14'/%3E%3Cpath d='M58 32c6 4 10 8 10 14'/%3E%3Cpath d='M78 36c6 4 10 8 10 14'/%3E%3C/g%3E%3C/svg%3E");
    mix-blend-mode: screen;
}

body.gg-on .gg-attn {
    position: relative;
    animation: gg-pulse calc(2.4s / var(--gg-speed)) ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(var(--gg-color-rgb), 0.25);
}

body.gg-on .gg-attn::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    background: radial-gradient(circle at 30% 30%, rgba(var(--gg-color-rgb), 0.30), transparent 60%);
    filter: blur(10px);
    opacity: 0.7;
    pointer-events: none;
    mix-blend-mode: screen;
}

body.gg-on .gg-ripple {
    position: fixed;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    margin-top: -6px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(var(--gg-color-rgb), 0.55) 42%, transparent 72%);
    transform: scale(0.1);
    transform-origin: center center;
    opacity: 0.9;
    z-index: 6;
    pointer-events: none;
    animation: gg-ripple-expand 0.75s ease forwards;
}

body.gg-on.gg-viral-active::before,
body.gg-on.gg-gift-active::before,
body.gg-on.gg-drama-active::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

body.gg-on.gg-viral-active::before {
    background: radial-gradient(circle at center, rgba(var(--gg-color-rgb), 0.10), rgba(var(--gg-gold-rgb), 0.03) 36%, transparent 62%);
    animation: gg-screen-pulse 0.8s ease;
}

body.gg-on.gg-gift-active::before {
    background: radial-gradient(circle at center, rgba(var(--gg-gold-rgb), 0.16), rgba(var(--gg-color-rgb), 0.04) 42%, transparent 72%);
    animation: gg-screen-pulse 0.6s ease;
}

body.gg-on.gg-drama-active::before {
    background: linear-gradient(180deg, rgba(255, 36, 74, 0.08), transparent 26%, rgba(255, 36, 74, 0.06) 76%, transparent);
    animation: gg-drama-flicker 0.6s linear;
}

body.gg-on .gg-receipt {
    position: fixed;
    top: -90px;
    width: 60px;
    height: 84px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.22);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248, 237, 230, 0.94)),
        repeating-linear-gradient(180deg, transparent 0 10px, rgba(0,0,0,0.06) 10px 12px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.18), 0 0 10px rgba(var(--gg-gold-rgb), 0.12);
    opacity: 0.88;
    transform: rotate(var(--gg-rot, 0deg));
    z-index: 5;
    pointer-events: none;
    animation: gg-receipt-fall var(--gg-fall, 4.5s) linear forwards;
}

@keyframes gg-float {
    0% {
        transform: translate3d(-50%, -50%, 0) rotate(var(--gg-r, 0deg));
    }
    50% {
        transform: translate3d(calc(-50% + var(--gg-dx, 28px)), calc(-50% - var(--gg-dy, 80px)), 0) rotate(calc(var(--gg-r, 0deg) + 12deg));
        opacity: calc(var(--gg-a, 0.55) * 0.85);
    }
    100% {
        transform: translate3d(-50%, -50%, 0) rotate(var(--gg-r, 0deg));
    }
}

@keyframes gg-particle-drift {
    0% {
        transform: translate3d(0, 0, 0) scale(0.9);
    }
    100% {
        transform: translate3d(var(--gg-dx, 16px), var(--gg-dy, -80px), 0) scale(0.8);
        opacity: 0;
    }
}

@keyframes gg-pulse {
    0% {
        transform: translateZ(0) scale(1);
        filter: drop-shadow(0 0 0 rgba(var(--gg-color-rgb), 0));
    }
    50% {
        transform: translateZ(0) scale(1.02);
        filter: drop-shadow(0 0 14px rgba(var(--gg-color-rgb), 0.35));
    }
    100% {
        transform: translateZ(0) scale(1);
        filter: drop-shadow(0 0 0 rgba(var(--gg-color-rgb), 0));
    }
}

@keyframes gg-ripple-expand {
    0% {
        transform: scale(0.1);
        opacity: 0.9;
    }
    100% {
        transform: scale(18);
        opacity: 0;
    }
}

@keyframes gg-screen-pulse {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes gg-drama-flicker {
    0%, 100% {
        opacity: 0;
    }
    30%, 60% {
        opacity: 1;
    }
}

@keyframes gg-receipt-fall {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--gg-rot, 0deg));
        opacity: 0;
    }
    10% {
        opacity: 0.9;
    }
    100% {
        transform: translate3d(var(--gg-dx, 0px), 120vh, 0) rotate(calc(var(--gg-rot, 0deg) + 18deg));
        opacity: 0;
    }
}

html[data-theme*="dark"] body.gg-on .gg-overlay,
body.dark.gg-on .gg-overlay {
    opacity: calc(var(--gg-opacity) * 1.15);
}