/**
 * QUIZTREFF COSMETICS CSS
 * =======================
 * Frames, Themes, Banners, Fallbacks
 */

/* ========== Avatar Frames ========== */
.cos-frame-neon-pink {
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(255, 0, 200, 0.55), 0 0 18px rgba(255, 0, 200, 0.35);
}

.cos-frame-gold {
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.55), 0 0 18px rgba(255, 215, 0, 0.25);
}

.cos-frame-neon-blue {
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(0, 180, 255, 0.55), 0 0 18px rgba(0, 180, 255, 0.30);
}

.cos-frame-plasma-purple {
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(180, 0, 255, 0.55), 0 0 20px rgba(180, 0, 255, 0.32);
}

.cos-frame-glitch {
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 0 18px rgba(255, 0, 200, 0.18);
    filter: contrast(1.05);
}

.cos-frame-obsidian {
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), 0 0 18px rgba(140, 140, 160, 0.20);
}

.cos-frame-royal {
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(255, 0, 200, 0.30), 0 0 22px rgba(255, 215, 0, 0.28), 0 0 32px rgba(160, 0, 255, 0.22);
}

/* ========== Theme System (CSS Variables) ========== */
:root {
    --qt-accent: rgba(255, 0, 200, 0.8);
    --qt-accent-soft: rgba(255, 0, 200, 0.25);
    --qt-glow: rgba(255, 0, 200, 0.18);
}

body.theme-magenta {
    --qt-accent: rgba(255, 0, 200, 0.85);
    --qt-accent-soft: rgba(255, 0, 200, 0.25);
    --qt-glow: rgba(255, 0, 200, 0.18);
}

body.theme-neon_blue {
    --qt-accent: rgba(0, 180, 255, 0.85);
    --qt-accent-soft: rgba(0, 180, 255, 0.22);
    --qt-glow: rgba(0, 180, 255, 0.16);
}

body.theme-midnight {
    --qt-accent: rgba(180, 180, 220, 0.75);
    --qt-accent-soft: rgba(180, 180, 220, 0.18);
    --qt-glow: rgba(180, 180, 220, 0.10);
}

body.theme-gold {
    --qt-accent: rgba(255, 215, 0, 0.85);
    --qt-accent-soft: rgba(255, 215, 0, 0.20);
    --qt-glow: rgba(255, 215, 0, 0.14);
}

body.theme-glitch {
    --qt-accent: rgba(255, 0, 200, 0.75);
    --qt-accent-soft: rgba(255, 255, 255, 0.16);
    --qt-glow: rgba(255, 0, 200, 0.12);
}

body.theme-royal_purple {
    --qt-accent: rgba(160, 0, 255, 0.85);
    --qt-accent-soft: rgba(160, 0, 255, 0.22);
    --qt-glow: rgba(160, 0, 255, 0.16);
}

/* ========== Tablet Theme Styling ========== */
/* Default: Kein sichtbarer Effekt ohne Theme */
.tablet-root {
    position: relative;
    transition: box-shadow 0.3s ease;
}

/* NUR wenn ein Theme aktiv ist - INNERER Glow-Rahmen */
body[class*="theme-"] .tablet-root {
    box-shadow: inset 0 0 80px 20px var(--qt-glow),
                inset 0 0 150px 40px rgba(0, 0, 0, 0.3);
}

/* Farbiger Rand-Overlay an den Kanten */
body[class*="theme-"] .tablet-root::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid var(--qt-accent);
    pointer-events: none;
    z-index: 10;
    opacity: 0.5;
}

/* Ecken-Highlights */
body[class*="theme-"] .tablet-root::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top left, var(--qt-glow) 0%, transparent 25%),
        radial-gradient(ellipse at top right, var(--qt-glow) 0%, transparent 25%),
        radial-gradient(ellipse at bottom left, var(--qt-glow) 0%, transparent 25%),
        radial-gradient(ellipse at bottom right, var(--qt-glow) 0%, transparent 25%);
    pointer-events: none;
    z-index: 9;
    opacity: 0.7;
}

/* Theme-specific tablet styles - INNERE Glows */
body.theme-magenta .tablet-root {
    box-shadow: inset 0 0 100px 30px rgba(255, 0, 200, 0.15),
                inset 0 0 200px 50px rgba(255, 0, 200, 0.08);
}

body.theme-neon_blue .tablet-root {
    box-shadow: inset 0 0 100px 30px rgba(0, 180, 255, 0.15),
                inset 0 0 200px 50px rgba(0, 180, 255, 0.08);
}

body.theme-midnight .tablet-root {
    box-shadow: inset 0 0 100px 30px rgba(100, 100, 140, 0.12),
                inset 0 0 200px 50px rgba(100, 100, 140, 0.06);
}

body.theme-gold .tablet-root {
    box-shadow: inset 0 0 100px 30px rgba(255, 215, 0, 0.12),
                inset 0 0 200px 50px rgba(255, 215, 0, 0.06);
}

body.theme-glitch .tablet-root {
    animation: glitch-glow 2s ease-in-out infinite alternate;
}

@keyframes glitch-glow {
    0% {
        box-shadow: inset 0 0 100px 30px rgba(255, 0, 200, 0.15),
                    inset 0 0 200px 50px rgba(0, 255, 200, 0.08);
    }
    100% {
        box-shadow: inset 0 0 100px 30px rgba(0, 255, 200, 0.15),
                    inset 0 0 200px 50px rgba(255, 0, 200, 0.08);
    }
}

body.theme-royal_purple .tablet-root {
    box-shadow: inset 0 0 100px 30px rgba(160, 0, 255, 0.15),
                inset 0 0 200px 50px rgba(160, 0, 255, 0.08),
                inset 0 0 300px 80px rgba(255, 215, 0, 0.03);
}

/* ========== Tablet Glow (Tablet-Rahmen leuchtet) ========== */
/* Das #tablet-layer Element bekommt den Glow */
#tablet-layer.tablet-glow-active {
    filter: drop-shadow(0 0 15px var(--tablet-glow-color, rgba(255, 0, 200, 0.6)))
            drop-shadow(0 0 30px var(--tablet-glow-color, rgba(255, 0, 200, 0.4)))
            drop-shadow(0 0 50px var(--tablet-glow-color, rgba(255, 0, 200, 0.2)));
    transition: filter 0.3s ease;
}

/* Statische Tablet-Glow Farben */
#tablet-layer.glow-neon_pink {
    --tablet-glow-color: rgba(255, 0, 200, 0.7);
}

#tablet-layer.glow-neon_blue {
    --tablet-glow-color: rgba(0, 180, 255, 0.7);
}

#tablet-layer.glow-neon_green {
    --tablet-glow-color: rgba(0, 255, 100, 0.7);
}

#tablet-layer.glow-gold {
    --tablet-glow-color: rgba(255, 215, 0, 0.6);
}

#tablet-layer.glow-purple {
    --tablet-glow-color: rgba(160, 0, 255, 0.7);
}

#tablet-layer.glow-fire {
    --tablet-glow-color: rgba(255, 100, 0, 0.7);
}

#tablet-layer.glow-ice {
    --tablet-glow-color: rgba(200, 240, 255, 0.6);
}

/* Animierte Tablet-Glows */
#tablet-layer.glow-rainbow {
    animation: tablet-glow-rainbow 4s linear infinite;
}

@keyframes tablet-glow-rainbow {
    0% { filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.7)) drop-shadow(0 0 40px rgba(255, 0, 0, 0.4)); }
    16% { filter: drop-shadow(0 0 20px rgba(255, 165, 0, 0.7)) drop-shadow(0 0 40px rgba(255, 165, 0, 0.4)); }
    33% { filter: drop-shadow(0 0 20px rgba(255, 255, 0, 0.7)) drop-shadow(0 0 40px rgba(255, 255, 0, 0.4)); }
    50% { filter: drop-shadow(0 0 20px rgba(0, 255, 0, 0.7)) drop-shadow(0 0 40px rgba(0, 255, 0, 0.4)); }
    66% { filter: drop-shadow(0 0 20px rgba(0, 180, 255, 0.7)) drop-shadow(0 0 40px rgba(0, 180, 255, 0.4)); }
    83% { filter: drop-shadow(0 0 20px rgba(160, 0, 255, 0.7)) drop-shadow(0 0 40px rgba(160, 0, 255, 0.4)); }
    100% { filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.7)) drop-shadow(0 0 40px rgba(255, 0, 0, 0.4)); }
}

#tablet-layer.glow-plasma {
    animation: tablet-glow-plasma 2s ease-in-out infinite alternate;
}

@keyframes tablet-glow-plasma {
    0% {
        filter: drop-shadow(0 0 15px rgba(255, 0, 200, 0.8))
                drop-shadow(0 0 35px rgba(0, 255, 200, 0.5));
    }
    100% {
        filter: drop-shadow(0 0 25px rgba(0, 255, 200, 0.8))
                drop-shadow(0 0 50px rgba(255, 0, 200, 0.5));
    }
}

/* ========== Banner Fallback ========== */
.cos-banner-fallback {
    width: 100%;
    aspect-ratio: 1200 / 360;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 0, 200, 0.20), rgba(0, 0, 0, 0.35));
    border: 1px solid rgba(255, 0, 200, 0.18);
    box-shadow: 0 0 24px rgba(255, 0, 200, 0.10);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cos-banner-fallback::after {
    content: "BANNER";
    font-weight: 800;
    font-size: 24px;
    opacity: 0.5;
    letter-spacing: 4px;
}

/* ========== Rarity Colors ========== */
.cos-rarity-common {
    color: rgba(255, 255, 255, 0.7);
}

.cos-rarity-rare {
    color: rgba(0, 180, 255, 0.9);
}

.cos-rarity-epic {
    color: rgba(180, 0, 255, 0.9);
}

.cos-rarity-legendary {
    color: rgba(255, 215, 0, 0.95);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* ========== Cosmetics Shop Styles ========== */
.cos-shop-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.cos-shop-modal.active {
    display: block;
}

.cos-shop-container {
    max-width: 980px;
    margin: 5vh auto;
    background: #0b0b12;
    border: 1px solid rgba(255, 0, 200, 0.25);
    border-radius: 16px;
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.cos-shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(90deg, rgba(255, 0, 200, 0.18), transparent);
    border-bottom: 1px solid rgba(255, 0, 200, 0.12);
}

.cos-shop-title {
    font-weight: 800;
    letter-spacing: 0.5px;
    font-size: 18px;
}

.cos-shop-credits {
    opacity: 0.8;
    font-weight: 600;
}

.cos-shop-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.cos-shop-close:hover {
    opacity: 1;
}

.cos-shop-body {
    padding: 14px 16px;
    overflow-y: auto;
    flex: 1;
}

.cos-shop-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cos-tab {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 0, 200, 0.18);
    color: #fff;
    padding: 8px 12px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
}

.cos-tab:hover,
.cos-tab.active {
    background: rgba(255, 0, 200, 0.15);
    border-color: rgba(255, 0, 200, 0.35);
}

.cos-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.cos-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 0, 200, 0.14);
    border-radius: 16px;
    padding: 14px;
    transition: all 0.15s;
}

.cos-card:hover {
    border-color: rgba(255, 0, 200, 0.3);
    background: rgba(255, 255, 255, 0.06);
}

.cos-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.cos-card-name {
    font-weight: 800;
    font-size: 15px;
}

.cos-card-rarity {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.cos-card-rarity.common { background: rgba(255, 255, 255, 0.08); }
.cos-card-rarity.rare { background: rgba(0, 180, 255, 0.15); color: #00b4ff; }
.cos-card-rarity.epic { background: rgba(180, 0, 255, 0.15); color: #b400ff; }
.cos-card-rarity.legendary { background: rgba(255, 215, 0, 0.15); color: #ffd700; }
.cos-card-rarity.mythic { background: linear-gradient(90deg, rgba(255,0,200,0.2), rgba(0,200,255,0.2)); color: #ff80ff; text-shadow: 0 0 8px rgba(255,0,200,0.4); }

.cos-card-desc {
    opacity: 0.75;
    font-size: 13px;
    min-height: 38px;
    line-height: 1.4;
}

.cos-card-preview {
    margin: 10px 0;
    border-radius: 10px;
    overflow: hidden;
}

.cos-card-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.cos-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.cos-card-price {
    font-weight: 800;
    font-size: 16px;
}

.cos-card-btn {
    background: rgba(255, 0, 200, 0.18);
    border: 1px solid rgba(255, 0, 200, 0.25);
    color: #fff;
    padding: 8px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s;
}

.cos-card-btn:hover:not(:disabled) {
    background: rgba(255, 0, 200, 0.28);
    border-color: rgba(255, 0, 200, 0.4);
}

.cos-card-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cos-card-btn.owned {
    background: rgba(0, 200, 100, 0.15);
    border-color: rgba(0, 200, 100, 0.25);
}

.cos-card-btn.equipped {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.25);
}

.cos-shop-msg {
    margin-top: 12px;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
}

.cos-shop-msg.success {
    background: rgba(0, 200, 100, 0.15);
    border: 1px solid rgba(0, 200, 100, 0.25);
}

.cos-shop-msg.error {
    background: rgba(255, 50, 50, 0.15);
    border: 1px solid rgba(255, 50, 50, 0.25);
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
    .cos-shop-container {
        margin: 2vh;
        max-height: 96vh;
    }

    .cos-shop-grid {
        grid-template-columns: 1fr;
    }

    .cos-shop-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
    }

    .cos-tab {
        white-space: nowrap;
    }
}

/* ========== Profile Backgrounds ========== */
/* Base styles for background cosmetics */
body[class*="cos-bg-"]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* Stars Soft */
body.cos-bg-stars-soft::before,
body.cos-bg-starfield-soft::before {
    background:
        radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 50px 160px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.9), transparent);
    background-size: 200px 200px;
    animation: bg-stars-drift 60s linear infinite;
}

/* Stars Parallax */
body.cos-bg-stars-parallax::before {
    background:
        radial-gradient(1px 1px at 25px 25px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 75px 75px, rgba(0,180,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 125px 50px, rgba(255,0,200,0.6), transparent),
        radial-gradient(1px 1px at 50px 125px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 100px 100px, rgba(0,180,255,0.5), transparent),
        radial-gradient(1px 1px at 150px 150px, rgba(255,255,255,0.6), transparent);
    background-size: 150px 150px, 200px 200px, 250px 250px, 180px 180px, 220px 220px, 170px 170px;
    animation: bg-stars-parallax 40s linear infinite;
}

/* Nebula Pink */
body.cos-bg-nebula-pink::before {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(255,0,128,0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(124,58,237,0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(236,72,153,0.2) 0%, transparent 60%);
    animation: bg-nebula-drift 30s ease-in-out infinite;
}

/* Nebula Blue */
body.cos-bg-nebula-blue::before {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(0,180,255,0.35) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(0,102,255,0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(0,255,255,0.15) 0%, transparent 50%);
    animation: bg-nebula-drift 35s ease-in-out infinite;
}

/* Aurora */
body.cos-bg-aurora::before {
    background:
        linear-gradient(180deg, transparent 0%, rgba(0,255,136,0.15) 20%, transparent 40%),
        linear-gradient(180deg, transparent 30%, rgba(0,180,255,0.12) 50%, transparent 70%),
        linear-gradient(180deg, transparent 50%, rgba(124,58,237,0.1) 70%, transparent 90%);
    animation: bg-aurora-wave 20s ease-in-out infinite;
}

/* Synthgrid */
body.cos-bg-synthgrid::before {
    background:
        linear-gradient(180deg, rgba(255,0,200,0.1) 0%, transparent 50%),
        repeating-linear-gradient(90deg, rgba(255,0,200,0.1) 0px, rgba(255,0,200,0.1) 1px, transparent 1px, transparent 40px),
        repeating-linear-gradient(0deg, rgba(255,0,200,0.05) 0px, rgba(255,0,200,0.05) 1px, transparent 1px, transparent 40px);
    animation: bg-grid-scroll 20s linear infinite;
}

/* Scanlines */
body.cos-bg-scanlines::before {
    background: repeating-linear-gradient(
        0deg,
        rgba(0,255,136,0.03) 0px,
        rgba(0,255,136,0.03) 1px,
        transparent 1px,
        transparent 3px
    );
    animation: bg-scanlines-flicker 0.1s steps(2) infinite;
}

/* Matrix */
body.cos-bg-matrix::before {
    background:
        linear-gradient(180deg, rgba(0,255,120,0.1) 0%, transparent 60%),
        repeating-linear-gradient(90deg, rgba(0,255,120,0.08) 0px, rgba(0,255,120,0.08) 1px, transparent 1px, transparent 30px);
    animation: bg-matrix-rain 15s linear infinite;
}

/* Holo Sparkle */
body.cos-bg-holo-sparkle::before {
    background:
        radial-gradient(2px 2px at 30px 30px, rgba(124,58,237,0.8), transparent),
        radial-gradient(2px 2px at 70px 80px, rgba(236,72,153,0.7), transparent),
        radial-gradient(2px 2px at 120px 40px, rgba(34,211,238,0.8), transparent),
        radial-gradient(2px 2px at 90px 120px, rgba(251,191,36,0.7), transparent);
    background-size: 150px 150px;
    animation: bg-sparkle-twinkle 3s ease-in-out infinite;
}

/* Royal Night */
body.cos-bg-royal-night::before {
    background:
        radial-gradient(ellipse at 30% 30%, rgba(30,27,75,0.8) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(49,46,129,0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(76,29,149,0.4) 0%, transparent 60%);
}

/* Noir Violet Fog */
body.cos-bg-noir-violet-fog::before {
    background:
        radial-gradient(ellipse at 0% 50%, rgba(124,58,237,0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 50%, rgba(76,29,149,0.2) 0%, transparent 50%);
    animation: bg-fog-drift 25s ease-in-out infinite;
}

/* Neon Grid Floor */
body.cos-bg-neon-grid-floor::before {
    background:
        linear-gradient(180deg, transparent 40%, rgba(0,180,255,0.15) 100%),
        repeating-linear-gradient(90deg, rgba(0,180,255,0.1) 0px, rgba(0,180,255,0.1) 1px, transparent 1px, transparent 50px);
    animation: bg-grid-scroll 25s linear infinite;
}

/* Arcade Smoke */
body.cos-bg-arcade-smoke::before {
    background:
        radial-gradient(ellipse at 20% 80%, rgba(0,180,255,0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 80%, rgba(124,58,237,0.15) 0%, transparent 40%);
    animation: bg-smoke-rise 20s ease-in-out infinite;
}

/* Galaxy Band */
body.cos-bg-galaxy-band::before {
    background:
        linear-gradient(45deg, transparent 30%, rgba(124,58,237,0.2) 45%, rgba(236,72,153,0.15) 55%, transparent 70%),
        radial-gradient(1px 1px at 50px 50px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 100px 80px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 150px 120px, rgba(255,255,255,0.7), transparent);
    background-size: 100% 100%, 200px 200px, 200px 200px, 200px 200px;
}

/* Black Ice */
body.cos-bg-black-ice::before {
    background:
        linear-gradient(135deg, rgba(0,255,255,0.05) 0%, rgba(0,136,255,0.08) 50%, rgba(255,255,255,0.05) 100%);
}

/* ========== Background Animations ========== */
@keyframes bg-stars-drift {
    0% { background-position: 0 0; }
    100% { background-position: 200px 200px; }
}

@keyframes bg-stars-parallax {
    0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 150px 150px, 100px 200px, 250px 125px, 90px 180px, 220px 110px, 170px 170px; }
}

@keyframes bg-nebula-drift {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes bg-aurora-wave {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes bg-grid-scroll {
    0% { background-position: 0 0; }
    100% { background-position: 0 100px; }
}

@keyframes bg-scanlines-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.95; }
}

@keyframes bg-matrix-rain {
    0% { background-position: 0 0; }
    100% { background-position: 0 500px; }
}

@keyframes bg-sparkle-twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes bg-fog-drift {
    0%, 100% { background-position: 0% 50%, 100% 50%; }
    50% { background-position: 10% 50%, 90% 50%; }
}

@keyframes bg-smoke-rise {
    0%, 100% { background-position: 20% 80%, 80% 80%; }
    50% { background-position: 25% 70%, 75% 70%; }
}

/* ========== WINTER SEASONAL COSMETICS ========== */

/* Winter Avatar Frames */
.cos-frame-ice-crown {
    border-radius: 999px;
    box-shadow:
        0 0 0 2px rgba(85, 230, 255, 0.50),
        0 0 20px rgba(85, 230, 255, 0.35),
        0 0 40px rgba(167, 139, 250, 0.20);
}

.cos-frame-snowflake-ring {
    border-radius: 999px;
    box-shadow:
        0 0 0 2px rgba(200, 240, 255, 0.45),
        0 0 15px rgba(200, 240, 255, 0.30);
    animation: snowflake-shimmer 3s ease-in-out infinite;
}

.cos-frame-frost-crystal {
    border-radius: 999px;
    box-shadow:
        0 0 0 3px rgba(85, 230, 255, 0.60),
        0 0 25px rgba(85, 230, 255, 0.45),
        0 0 50px rgba(167, 139, 250, 0.25),
        inset 0 0 20px rgba(255, 255, 255, 0.10);
}

@keyframes snowflake-shimmer {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(200, 240, 255, 0.45),
            0 0 15px rgba(200, 240, 255, 0.30);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(200, 240, 255, 0.60),
            0 0 25px rgba(200, 240, 255, 0.45);
    }
}

/* Winter Badges */
.cos-bd-winter-2026 {
    background: linear-gradient(135deg, rgba(85, 230, 255, 0.20), rgba(167, 139, 250, 0.15));
    border: 1px solid rgba(85, 230, 255, 0.40);
    color: #55E6FF;
    text-shadow: 0 0 8px rgba(85, 230, 255, 0.50);
}

.cos-bd-snowflake {
    background: rgba(200, 240, 255, 0.15);
    border: 1px solid rgba(200, 240, 255, 0.35);
    color: #C8F0FF;
}

/* Winter Profile Backgrounds */
body.cos-bg-frozen-night::before {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(85, 230, 255, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(167, 139, 250, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 90%, rgba(85, 230, 255, 0.08) 0%, transparent 40%),
        linear-gradient(180deg, #070A12 0%, #0A0F1E 100%);
    animation: frozen-night-pulse 20s ease-in-out infinite;
}

body.cos-bg-snowstorm-soft::before {
    background:
        radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 30% 40%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 50% 60%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 70% 30%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 90% 80%, rgba(255, 255, 255, 0.5), transparent);
    background-size: 150px 150px;
    animation: snowstorm-drift 25s linear infinite;
}

@keyframes frozen-night-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

@keyframes snowstorm-drift {
    0% { background-position: 0 0; }
    100% { background-position: 150px 300px; }
}

/* Winter Tablet Theme - Frost */
body.theme-frost {
    --qt-accent: rgba(85, 230, 255, 0.85);
    --qt-accent-soft: rgba(85, 230, 255, 0.22);
    --qt-glow: rgba(85, 230, 255, 0.16);
}

body.theme-frost .tablet-root {
    box-shadow:
        inset 0 0 100px 30px rgba(85, 230, 255, 0.12),
        inset 0 0 200px 50px rgba(167, 139, 250, 0.06);
}

body.theme-frost .tablet-root::before {
    border-color: rgba(85, 230, 255, 0.35);
}

/* Winter Tablet Glow - Ice */
#tablet-layer.glow-ice {
    --tablet-glow-color: rgba(85, 230, 255, 0.6);
}

#tablet-layer.glow-ice.tablet-glow-active {
    filter:
        drop-shadow(0 0 15px rgba(85, 230, 255, 0.6))
        drop-shadow(0 0 30px rgba(167, 139, 250, 0.4))
        drop-shadow(0 0 50px rgba(85, 230, 255, 0.2));
}