/* global.css - Les Fondations */
body { font-family: 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 0; height: 100vh; overflow: hidden; position: relative; }

#timer-container { position: absolute; top: 0; left: 0; width: 100%; height: 8px; background: rgba(0,0,0,0.2); z-index: 500; }
#timer-bar { width: 100%; height: 100%; transition: width 1s linear, background-color 1s linear; }
.timer-intense-blink { animation: intenseBlink 0.3s infinite alternate; }
@keyframes intenseBlink { 0% { filter: brightness(1); } 100% { filter: brightness(1.8); box-shadow: 0 0 15px #ef4444; } }
.timer-flash { animation: screenFlash 0.5s 2; }
@keyframes screenFlash { 0% { background: transparent; } 50% { background: rgba(239, 68, 68, 0.4); } 100% { background: transparent; } }

.back-btn, #fullscreen-btn { 
    position: absolute; top: 25px; z-index: 600;
    text-decoration: none; font-size: 0.9em; font-weight: bold;
    padding: 10px 20px; border-radius: 10px; 
    border: 1px solid rgba(255,255,255,0.2); 
    background: rgba(15, 23, 42, 0.9); color: white; backdrop-filter: blur(10px);
    cursor: pointer; transition: 0.2s;
}
.back-btn { left: 20px; }
#fullscreen-btn { left: 210px; }
.back-btn:hover, #fullscreen-btn:hover { background: #1e293b; transform: translateY(-2px); }

/* --- LES CONFETTIS (Physique gérée par JS) --- */
.firework-particle { 
    position: absolute; 
    top: 0; left: 0; 
    border-radius: 50%; 
    z-index: 20000; 
    pointer-events: none; 
    /* Un petit effet de brillance pour qu'ils soient plus visibles */
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    /* On retire l'animation CSS, c'est le JS qui gère les déplacements */
}

/* --- STYLE DU JEU TOP RÉPONSES --- */
#score-display { font-size: 5em; font-weight: 900; color: #facc15; text-align: center; margin-bottom: 20px; }
#question-display { font-size: 2.5em; text-align: center; margin-bottom: 40px; text-transform: uppercase; }

/* Le plateau et les cartes qui se retournent */
#board { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%; max-width: 900px; perspective: 1000px; }
.answer-card { width: 100%; height: 70px; position: relative; transform-style: preserve-3d; transition: transform 0.6s; cursor: pointer; }
.answer-card.flipped { transform: rotateX(180deg); }
.card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; align-items: center; border-radius: 12px; font-weight: bold; }
.card-front { background: #1e293b; color: #3b82f6; justify-content: center; border: 2px solid #334155; }
.card-back { background: #0ea5e9; transform: rotateX(180deg); color: white; border: 2px solid #7dd3fc; }

/* La grosse croix rouge (Strike) */
#strike-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: rgba(220, 38, 38, 0.4); opacity: 0; pointer-events: none; transition: 0.2s; z-index: 1000; }
#strike-overlay.active { opacity: 1; }
.cross { font-size: 30em; color: #ef4444; transform: scale(0); transition: 0.3s; }
#strike-overlay.active .cross { transform: scale(1); }