@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');

body { 
    font-family: 'Inter', sans-serif; 
    /* LUZES ELEMENTAIS MAIS VISÍVEIS E FOCADAS */
    background-color: #0f172a; /* Fundo escuro base */
    background-image: 
        /* Esfera Anemo/Hydro (Ciano) - Mais forte e concentrada */
        radial-gradient(circle at 15% 20%, rgba(56, 189, 248, 0.25) 0%, transparent 30%),
        /* Esfera Electro (Roxo) */
        radial-gradient(circle at 85% 80%, rgba(168, 85, 247, 0.25) 0%, transparent 30%),
        /* Esfera Geo (Dourado) no centro */
        radial-gradient(circle at 50% 50%, rgba(250, 204, 21, 0.15) 0%, transparent 40%);
    background-attachment: fixed;
}

/* ========================================== */
/* BARRA DE ROLAGEM                           */
/* ========================================== */
.custom-scrollbar::-webkit-scrollbar { 
    width: 6px; 
}
.custom-scrollbar::-webkit-scrollbar-track { 
    background: rgba(255, 255, 255, 0.05); 
}
.custom-scrollbar::-webkit-scrollbar-thumb { 
    background: rgba(255, 255, 255, 0.2); 
    border-radius: 10px; 
}

/* ========================================== */
/* ANIMAÇÕES GERAIS                           */
/* ========================================== */
.fade-in { 
    animation: fadeIn 0.5s ease-out forwards; 
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* Animação de Acerto - Pulinho com Brilho Azul/Ciano (Genshin) */
.correct-anim {
    animation: jumpPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes jumpPop {
    0% { 
        transform: scale(1); 
        filter: brightness(1); 
    }
    50% { 
        transform: scale(1.05) translateY(-5px); 
        filter: brightness(1.2) drop-shadow(0 0 25px rgba(56, 189, 248, 0.8)); 
    }
    100% { 
        transform: scale(1) translateY(0); 
        filter: brightness(1); 
    }
}

/* ========================================== */
/* EFEITO DE POEIRA MÁGICA (ATRÁS DO CHAR)    */
/* ========================================== */
.image-slot {
    position: relative;
    overflow: hidden;
    /* Um fundo levemente azulado para a carta do personagem */
    background: linear-gradient(to bottom, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.8));
}

/* A textura de poeira */
.image-slot::before {
    content: "";
    position: absolute;
    /* Deixamos bem maior que a caixa para ela poder "viajar" sem mostrar as bordas */
    inset: -50%; 
    background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
    opacity: 0.7; /* Bem visível */
    /* Animação complexa de 15 segundos, infinita e vai-e-volta (alternate) */
    animation: dustDrift 15s infinite alternate ease-in-out;
    pointer-events: none;
    z-index: 0;
}

/* Garante que a imagem do personagem fique NA FRENTE da poeira */
.image-slot img {
    position: relative;
    z-index: 10;
}

/* Movimento Aleatório e Orgânico da Poeira */
@keyframes dustDrift {
    0% { 
        transform: translate(0%, 0%) rotate(0deg) scale(1); 
    }
    25% { 
        transform: translate(8%, -6%) rotate(2deg) scale(1.1); 
    }
    50% { 
        transform: translate(-4%, -12%) rotate(-1deg) scale(1.05); 
    }
    75% { 
        transform: translate(-10%, 5%) rotate(3deg) scale(1.15); 
    }
    100% { 
        transform: translate(5%, 10%) rotate(-2deg) scale(1); 
    }
}