@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);
}

body {
    font-family: 'Fredoka', sans-serif;
    background-color: #0f172a;
    color: white;
    overflow: hidden;
    position: relative;
    /* FIX MOBILE : Utilisation de dvh pour coller à la zone visible réelle */
    height: 100vh; /* Fallback */
    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%);
}
/* Cherchez ce bloc vers la ligne 101 */
.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;
    
    /* MODIFICATION ICI : J'ai passé de 15s à 5s */
    /* Plus le chiffre est petit, plus ça va vite */
    animation: grid-slide 2s linear infinite; 
    
    pointer-events: none;
}
@keyframes grid-slide { 0% { transform: translate(0, 0); } 100% { transform: translate(-50px, -50px); } }

/* --- CARD ANIMATIONS & STYLES --- */
.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); }
.card-front, .card-back {
    position: absolute; width: 100%; height: 100%; backface-visibility: hidden;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.card-front { transform: rotateY(180deg); font-weight: bold; font-size: 1.2rem; border: 2px solid white; }
.card-back { background: linear-gradient(135deg, #6d28d9, #4c1d95); color: rgba(255,255,255,0.2); font-size: 1rem; border: 2px solid #a78bfa; transform: rotateY(0deg); }

/* Card Colors */
.bg-neg { background-color: #1e3a8a; color: #93c5fd; }
.bg-zero { background-color: #0ea5e9; color: white; }
.bg-low { background-color: #22c55e; color: white; }
.bg-mid { background-color: #eab308; color: black; }
.bg-high { background-color: #ef4444; color: white; }
.bg-x { background-color: transparent; border: 2px dashed rgba(255,255,255,0.2); box-shadow: none; }

/* --- GAME LAYOUT UTILS --- */
.game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; }
.highlight-turn { box-shadow: 0 0 30px 5px rgba(250, 204, 21, 0.5); border: 2px solid #facc15; background-color: rgba(255, 255, 255, 0.1); transform: scale(1.02); z-index: 50; }
.dimmed-player { opacity: 0.7; transform: scale(0.95); filter: grayscale(0.3); }
.scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* --- ANIMATIONS FX --- */
.toast-message {
    position: fixed; bottom: 50%; left: 50%; transform: translate(-50%, 50%);
    background: rgba(220, 38, 38, 0.95); color: white; padding: 12px 24px;
    border-radius: 50px; font-weight: bold; z-index: 100;
    animation: fadeInOut 2s forwards; pointer-events: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    width: max-content;
    max-width: 90%;
    text-align: center;
}
@keyframes fadeInOut { 0% { opacity: 0; transform: translate(-50%, 20px); } 10% { opacity: 1; transform: translate(-50%, 0); } 90% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -20px); } }

/* Animation pour le tchat overlay mobile */
@keyframes slide-up-fade {
    0% { transform: translateY(20px); opacity: 0; }
    10% { transform: translateY(0); opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

.animate-chat-overlay {
    /* Utilise la variable définie dans reglages.js, sinon 8s par défaut */
    animation: slide-up-fade var(--live-chat-duration, 8s) forwards;
}

/* --- Dans html/css/styles.css --- */

.turn-arrows-container {
    position: absolute;
    top: 50%;
    left: 50%;
    /* On centre le bloc ici une fois pour toutes */
    transform: translate(-50%, -50%); 
    width: 60vh;
    height: 60vh;
    pointer-events: none;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* On applique l'animation sur le SVG à l'intérieur du conteneur */
.animate-spin-slow {
    animation: spin-pure 20s linear infinite !important;
    width: 100%;
    height: 100%;
    transform-origin: center center;
}

/* Animation simplifiée : uniquement la rotation */
@keyframes spin-pure {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.discard-anim { animation: slideOnDiscard 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes slideOnDiscard { 0% { transform: translate(-40px, -40px) scale(1.2) rotate(-10deg); opacity: 0; } 70% { transform: translate(0, 0) scale(1.05) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }

.particle { position: absolute; pointer-events: none; border-radius: 50%; animation: particle-pop 0.8s ease-out forwards; }
@keyframes particle-pop { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } }

.stack-low { animation: pulse-red 1s infinite; border-color: #ef4444 !important; }
@keyframes pulse-red { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } }

/* --- MOBILE LAYOUT RESPONSIBILITY --- */
.mobile-portrait-grid { display: flex; flex-direction: column; height: 100vh; width: 100%; }

@media only screen and (max-width: 900px) and (orientation: landscape) {
    .mobile-landscape-layout { display: flex; flex-direction: row; height: 100vh; overflow: hidden; }
    .mobile-game-area { width: 55%; border-right: 1px solid rgba(255,255,255,0.1); overflow: hidden; }
    .mobile-chat-area { width: 45%; display: flex !important; }
    /* ZOOM LANDSCAPE (1.15) */
    .mobile-game-scaler { transform: scale(1.15); transform-origin: center; height: 100%; width: 100%; display: flex; flex-direction: column; }
}

/* Responsive Card Sizes */
.card { width: 2.5rem; height: 3.5rem; }
@media (min-width: 768px) { .card { width: 3rem; height: 4rem; } }

.opponents-scroll { display: flex; overflow-x: auto; gap: 0.5rem; padding: 0.5rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.opponent-snap { scroll-snap-align: center; flex-shrink: 0; }

/* --- TOGGLE SWITCH (Paramètres) --- */
@keyframes scale-in {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.animate-scale-in {
    animation: scale-in 0.15s ease-out forwards;
}

/* On force le conteneur de la liste à ne pas couper les effets visuels */
.opponent-list-wrapper > div {
    padding: 25px 0 !important;
    overflow: visible !important;
}

/* Si le contour est une ombre, on s'assure qu'elle n'est pas masquée */
.highlight-turn-opponent {
    outline: 8px solid #facc15 !important; /* Jaune vif */
    outline-offset: 4px;
    z-index: 100;
}