@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: #1a0e05;
    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: url('../images/GameMenu/menu_fond.png') center center / cover no-repeat;
}

/* 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; }