/* ===== GLOBAL BACKGROUND THEME CSS ===== */
#globalThemeLayer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.5s;
}

/* When a theme is active, make body transparent so theme layer shows through */
body.theme-active,
html[data-theme="dark"] body.theme-active {
    background-color: transparent !important;
}

/* Synthwave Banner */
.theme-synthwave {
    background: linear-gradient(180deg, #1e1b4b 0%, #312e81 30%, #a855f7 60%, #f472b6 100%);
    overflow: hidden;
}

.theme-synthwave::before {
    content: '';
    position: absolute;
    bottom: 40%;
    left: 50%;
    transform: translateX(-50%);
    width: 60vw;
    height: 60vw;
    max-width: 600px;
    max-height: 600px;
    background: linear-gradient(180deg, #fde047 0%, #f97316 40%, #ec4899 100%);
    border-radius: 50%;
    box-shadow: 0 0 100px rgba(236, 72, 153, 0.8);
    mask-image: repeating-linear-gradient(180deg, #000 0, #000 10px, transparent 10px, transparent 15px);
    -webkit-mask-image: repeating-linear-gradient(180deg, #000 0, #000 15px, transparent 15px, transparent 20px);
}

.theme-synthwave::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -50%;
    right: -50%;
    height: 40%;
    background-image:
        linear-gradient(90deg, rgba(236, 72, 153, 0.8) 1px, transparent 1px),
        linear-gradient(180deg, rgba(236, 72, 153, 0.8) 1px, transparent 1px);
    background-size: 4vw 40px;
    transform: perspective(500px) rotateX(60deg) translateY(-20px);
    animation: synth-grid 2s linear infinite;
}

@keyframes synth-grid {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 40px;
    }
}

/* Matrix Banner */
.theme-matrix {
    background: #000;
    overflow: hidden;
}

.theme-matrix::before {
    content: '';
    position: absolute;
    top: -100vh;
    left: 0;
    right: 0;
    height: 200vh;
    background-image:
        repeating-linear-gradient(180deg, rgba(34, 197, 94, 0) 0%, rgba(34, 197, 94, 0.8) 50%, rgba(34, 197, 94, 0) 100%),
        repeating-linear-gradient(90deg, transparent 0, transparent 20px, rgba(34, 197, 94, 0.1) 20px, rgba(34, 197, 94, 0.1) 21px);
    background-size: 100vw 20vh, 21px 100vh;
    animation: matrix-rain 2s linear infinite;
}

.theme-matrix::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0, transparent 2px, transparent 4px, rgba(0, 0, 0, 0.8) 4px);
    pointer-events: none;
}

@keyframes matrix-rain {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 0 20vh, 0 0;
    }
}

/* Nebula Banner */
.theme-nebula {
    background: radial-gradient(circle at 50% 100%, #1e1b4b 0%, #0f172a 100%);
    overflow: hidden;
}

.theme-nebula::before {
    content: '';
    position: absolute;
    width: 300vw;
    height: 300vh;
    top: -100vh;
    left: -100vw;
    background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle fill="%23FFFFFF" cx="20" cy="20" r="1.5" opacity="0.8"/><circle fill="%23c084fc" cx="80" cy="50" r="1" opacity="0.6"/><circle fill="%23FFFFFF" cx="150" cy="120" r="2" opacity="0.9"/><circle fill="%2338bdf8" cx="40" cy="160" r="1" opacity="0.5"/><circle fill="%23FFFFFF" cx="180" cy="30" r="1.5" opacity="0.7"/></svg>');
    background-size: 200px 200px;
    animation: nebula-rotate 120s linear infinite;
    transform-origin: center center;
}

.theme-nebula::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background:
        radial-gradient(circle at 20% 30%, rgba(168, 85, 247, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(56, 189, 248, 0.2) 0%, transparent 50%);
    animation: nebula-pulse 8s ease-in-out infinite alternate;
}

@keyframes nebula-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes nebula-pulse {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Cyberpunk City */
.theme-cyberpunk {
    background: #09090e;
    overflow: hidden;
}

.theme-cyberpunk::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background: repeating-linear-gradient(90deg, rgba(236, 72, 153, 0.05) 0, rgba(236, 72, 153, 0.05) 1px, transparent 1px, transparent 40px),
        repeating-linear-gradient(0deg, rgba(6, 182, 212, 0.05) 0, rgba(6, 182, 212, 0.05) 1px, transparent 1px, transparent 40px);
    background-size: 40px 40px;
    animation: cyber-grid 10s linear infinite;
    transform: perspective(600px) rotateX(45deg);
    transform-origin: bottom;
}

.theme-cyberpunk::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50vh;
    background: linear-gradient(0deg, rgba(139, 92, 246, 0.3) 0%, transparent 100%);
    box-shadow: 0 -15vh 100px rgba(236, 72, 153, 0.1) inset;
}

@keyframes cyber-grid {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 40px 40px;
    }
}

/* Ocean Depths */
.theme-ocean {
    background: linear-gradient(180deg, #0284c7 0%, #0369a1 40%, #082f49 80%, #020617 100%);
    overflow: hidden;
}

.theme-ocean::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200vw;
    height: 100vh;
    background-image:
        repeating-radial-gradient(circle at 20% 0, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 100px, transparent 100px, transparent 200px),
        repeating-radial-gradient(circle at 80% 0, rgba(56, 189, 248, 0.1) 0, rgba(56, 189, 248, 0.1) 150px, transparent 150px, transparent 300px);
    /* For caustics on top, no vertical scrolling is needed, just horizontal, so size doesn't cut vertically */
    animation: ocean-caustics 20s linear infinite alternate;
}

.theme-ocean::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Height is 200vh so it can scroll seamlessly 100vh */
    background-image:
        radial-gradient(circle at 10% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 5%),
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 8%),
        radial-gradient(circle at 60% 10%, rgba(255, 255, 255, 0.15) 0%, transparent 4%),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 7%),
        /* Duplicates offset by +50% vertically for seamless loop on a 200vh background */
        radial-gradient(circle at 10% 75%, rgba(255, 255, 255, 0.1) 0%, transparent 5%),
        radial-gradient(circle at 30% 90%, rgba(255, 255, 255, 0.05) 0%, transparent 8%),
        radial-gradient(circle at 60% 60%, rgba(255, 255, 255, 0.15) 0%, transparent 4%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 7%);
    background-size: 100vw 200vh;
    animation: bubbles-rise 15s linear infinite;
}

@keyframes ocean-caustics {
    0% {
        transform: translateX(0) scale(1.1);
    }

    100% {
        transform: translateX(-50vw) scale(1.3);
    }
}

@keyframes bubbles-rise {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 -100vh;
    }
}

/* Lava Core */
.theme-lava {
    background: #450a0a;
    overflow: hidden;
}

.theme-lava::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(ellipse at 50% 10%, #991b1b 0%, transparent 30%),
        radial-gradient(ellipse at 20% 30%, #b91c1c 0%, transparent 40%),
        radial-gradient(ellipse at 80% 40%, #7f1d1d 0%, transparent 35%),
        /* Duplicates at +50% for 200vh background */
        radial-gradient(ellipse at 50% 60%, #991b1b 0%, transparent 30%),
        radial-gradient(ellipse at 20% 80%, #b91c1c 0%, transparent 40%),
        radial-gradient(ellipse at 80% 90%, #7f1d1d 0%, transparent 35%);
    background-size: 100vw 200vh;
    animation: lava-flow 12s linear infinite;
    mix-blend-mode: screen;
}

.theme-lava::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(ellipse at 30% 15%, #f97316 0%, transparent 20%),
        radial-gradient(ellipse at 70% 35%, #ef4444 0%, transparent 25%),
        radial-gradient(ellipse at 60% 5%, #fbbf24 0%, transparent 15%),
        /* Duplicates at +50% for 200vh background */
        radial-gradient(ellipse at 30% 65%, #f97316 0%, transparent 20%),
        radial-gradient(ellipse at 70% 85%, #ef4444 0%, transparent 25%),
        radial-gradient(ellipse at 60% 55%, #fbbf24 0%, transparent 15%);
    background-size: 100vw 200vh;
    filter: blur(20px);
    mix-blend-mode: color-dodge;
    animation: lava-flow-fast 8s linear infinite;
}

@keyframes lava-flow {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 -100vh;
    }
}

@keyframes lava-flow-fast {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 -100vh;
    }
}

/* ===== AVATAR FRAMES CSS ===== */
.avatar-frame {
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
}

.frame-rookie {
    border: 4px solid #4ade80;
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.6), inset 0 0 15px rgba(74, 222, 128, 0.6);
    animation: rotateFrame 10s linear infinite;
    border-top-color: #22c55e;
    border-bottom-color: #16a34a;
}

.frame-cyberpunk {
    border: 5px dashed #d946ef;
    box-shadow: 0 0 20px rgba(217, 70, 239, 0.6), inset 0 0 20px rgba(217, 70, 239, 0.6);
    animation: neonPulse 1.5s ease-in-out infinite alternate, rotateFrame 8s linear infinite reverse;
    border-right-color: #06b6d4;
    border-left-color: #06b6d4;
}

.frame-grandmaster {
    border: 6px double #fbbf24;
    box-shadow: 0 0 25px rgba(251, 191, 36, 0.8), inset 0 0 15px rgba(251, 191, 36, 0.5);
    background: radial-gradient(circle at top right, rgba(251, 191, 36, 0.3) 0%, transparent 60%);
    animation: rotateFrame 15s linear infinite, glowGold 2s ease-in-out infinite alternate;
}

.frame-grandmaster::after {
    content: '✨';
    position: absolute;
    top: -5px;
    right: 5px;
    font-size: 1.5rem;
}

@keyframes rotateFrame {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes neonPulse {
    from {
        box-shadow: 0 0 10px #d946ef, 0 0 20px #d946ef;
    }

    to {
        box-shadow: 0 0 20px #06b6d4, 0 0 30px #06b6d4;
    }
}

@keyframes glowGold {
    from {
        filter: drop-shadow(0 0 5px #f59e0b);
    }

    to {
        filter: drop-shadow(0 0 15px #fef08a);
    }
}

/* NEW PREMIUM FRAMES */
.frame-galactic {
    border: 4px dotted #c084fc;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.6), inset 0 0 20px rgba(168, 85, 247, 0.6);
    animation: rotateFrame 15s linear infinite;
    border-left-color: #312e81;
    border-right-color: #312e81;
}

.frame-frostbite {
    border: 5px solid rgba(186, 230, 253, 0.6);
    box-shadow: 0 0 25px rgba(186, 230, 253, 0.6), inset 0 0 15px rgba(186, 230, 253, 0.8);
    border-radius: 50%;
    animation: frostPulse 3s ease-in-out infinite alternate;
}

@keyframes frostPulse {
    from {
        border-color: rgba(186, 230, 253, 0.4);
        box-shadow: 0 0 15px rgba(186, 230, 253, 0.4);
    }

    to {
        border-color: rgba(186, 230, 253, 1);
        box-shadow: 0 0 30px rgba(186, 230, 253, 0.8);
    }
}

.frame-ethereal {
    border: 3px solid #fef08a;
    box-shadow: 0 0 25px rgba(254, 240, 138, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.8);
    animation: rotateFrame 20s linear infinite;
}

.frame-ethereal::after {
    content: '✨';
    position: absolute;
    bottom: -5px;
    left: -5px;
    font-size: 1.5rem;
    animation: frostPulse 2s infinite alternate;
}

.frame-neon-kat {
    border: 3px solid #f472b6;
    border-radius: 20px;
    box-shadow: 0 0 15px #db2777, inset 0 0 15px #06b6d4;
    animation: rotateFrame 8s linear infinite, neonFlicker 1.5s infinite alternate;
    border-left-color: transparent;
    border-right-color: transparent;
}

@keyframes neonFlicker {
    0% {
        filter: brightness(1);
    }

    5% {
        filter: brightness(1.5);
    }

    10% {
        filter: brightness(0.8);
    }

    15% {
        filter: brightness(1.2);
    }

    100% {
        filter: brightness(1);
    }
}

.frame-plasma {
    border: 4px dashed #3b82f6;
    box-shadow: 0 0 20px #60a5fa, inset 0 0 15px #93c5fd;
    animation: rotateFrame 2s linear infinite reverse, frostPulse 0.5s infinite alternate;
    border-radius: 50%;
}

.frame-monarch {
    border: 6px solid #b91c1c;
    box-shadow: 0 0 25px rgba(185, 28, 28, 0.8), inset 0 0 20px rgba(185, 28, 28, 0.6);
    border-top-color: #f59e0b;
    animation: frostPulse 3s infinite alternate;
}

.frame-monarch::before {
    content: '👑';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    filter: drop-shadow(0 0 5px #f59e0b);
}

.frame-diamond {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.4) 100%);
    backdrop-filter: blur(2px);
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.4);
    animation: rotateFrame 6s linear infinite;
}

.frame-magma {
    border: 5px dotted #ea580c;
    box-shadow: 0 0 20px #dc2626, inset 0 0 20px #f97316;
    background: radial-gradient(circle, transparent 70%, rgba(220, 38, 38, 0.3) 100%);
    animation: rotateFrame 12s linear infinite, glowGold 2s infinite alternate;
    border-top-color: #fde047;
}

.frame-anime {
    border: 4px solid #fbbf24;
    box-shadow: 0 0 10px #fbbf24, 0 0 20px #ef4444, inset 0 0 15px #f59e0b;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-radius: 50%;
    animation: rotateFrame 0.5s linear infinite;
}

.frame-arcade {
    border: 6px solid #fbbf24;
    border-radius: 8px;
    box-shadow: 4px 4px 0 #b45309, -4px -4px 0 #f59e0b;
    animation: arcadeBlink 1s step-end infinite;
}

@keyframes arcadeBlink {

    0%,
    100% {
        border-color: #fbbf24;
    }

    50% {
        border-color: #ef4444;
    }
}

/* ===== CURSOR TRAILS CSS ===== */
.cursor-particle {
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    z-index: 99999;
    transform: translate(-50%, -50%);
    animation: fadeOut 1s forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
}

.cursor-sakura {
    animation: sakuraFall 1.2s forwards;
}

@keyframes sakuraFall {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx)), 50px) rotate(var(--r)) scale(0.5);
    }
}

.cursor-autumn {
    animation: leafTumble 1.2s forwards;
}

@keyframes leafTumble {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx)), 80px) rotate(var(--r)) scale(0.7);
    }
}

.cursor-snow {
    animation: snowFall 1.2s forwards;
}

@keyframes snowFall {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx)), 60px) rotate(var(--r)) scale(0.3);
    }
}

.cursor-matrix {
    animation: matrixDrop 1s forwards;
}

@keyframes matrixDrop {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, 80px) scale(0.6);
    }
}

.cursor-hearts {
    animation: heartFloat 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes heartFloat {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -80px) scale(1.5);
    }
}

.cursor-confetti {
    animation: confettiPop 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes confettiPop {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(0);
    }
}

.cursor-toxic {
    animation: toxicDrip 1.2s forwards;
}

@keyframes toxicDrip {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, 60px) scaleX(0.2) scaleY(2);
    }
}

/* Profile Container Glassmorphism Overrides */
/* Making sure the main containers let the global background shine through via glass layer */
[data-theme="dark"] .main-container .profile-card,
[data-theme="dark"] .welcome-card,
[data-theme="dark"] .games-grid .game-card {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.main-container .profile-card,
.welcome-card,
.games-grid .game-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Light Theme Gamification Compat: Force headers, navbar and footer to flow better with dark themes */
html:not([data-theme="dark"]) body.theme-active .course-card-image {
    background: #e2e8f0 !important;
    /* Darker slate so white flags like Japan are visible */
}

html:not([data-theme="dark"]) body.theme-active nav,
html:not([data-theme="dark"]) body.theme-active .navbar,
html:not([data-theme="dark"]) body.theme-active footer {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    color: white !important;
}

html:not([data-theme="dark"]) body.theme-active footer * {
    color: white !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

html:not([data-theme="dark"]) body.theme-active .nav-link,
html:not([data-theme="dark"]) body.theme-active .brand h1,
html:not([data-theme="dark"]) body.theme-active .main-container>div:first-child p,
html:not([data-theme="dark"]) body.theme-active .welcome-header p {
    color: white !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}