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

:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
    --app-height: 100dvh;
}

body {
    font-family: 'Fredoka', sans-serif;
    background-color: #0f172a;
    color: white;
    overflow: hidden;
    position: relative;
    height: 100vh;
    height: 100dvh; 
    width: 100vw;
    margin: 0;
    padding: 0;
    overscroll-behavior-y: contain;
}

/* --- BACKGROUND ANIMATION --- */
.bg-animated-grid {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    background: radial-gradient(circle at center, #4c1d95 0%, #0f172a 100%);
}
.bg-animated-grid::after {
    content: ''; position: absolute;
    top: 0; left: 0; width: 200%; height: 200%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: grid-slide 5s linear infinite; 
    pointer-events: none;
}
@keyframes grid-slide { 0% { transform: translate(0, 0); } 100% { transform: translate(-50px, -50px); } }

/* Vos autres classes utilitaires (conservées pour compatibilité future) */
.card-inner { transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-style: preserve-3d; }
.card.flipped .card-inner { transform: rotateY(180deg); }
.game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; }