html, body {
    height: 100%; /* Couvre toute la hauteur */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: linear-gradient(to bottom, #f0f2f5, #e9ecef); /* Appliqué à html ET body */
    color: #333;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding-top: 1.5rem;
    min-height: 100%;
    box-sizing: border-box;
    display: flex; /* Réajouté pour centrer le container */
    flex-direction: column;
    align-items: center; /* Centre le container horizontalement */
}

/* Container principal */
.container {
     width: 100%;
     max-width: 600px; /* Limite la largeur */
     margin-top: auto; /* Aide au centrage vertical */
     margin-bottom: auto;
     padding: 0 1rem;
     box-sizing: border-box;
}


.screen {
    width: 100%;
    padding: 1rem 0; /* Padding vertical uniquement pour les écrans */
}

/* Fond blanc pour masquer le gradient du body/html sur les écrans */
#menuScreen > .menu-controls, /* Cible le conteneur interne */
#gameScreen,
#gameOverScreen > .card {
    background-color: #ffffff;
}
#gameScreen {
    padding: 1rem; /* Padding interne à l'écran de jeu */
    border-radius: 0.5rem; /* Coins arrondis pour l'écran de jeu */
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* Ombre douce sur l'écran de jeu */
    /* Note: min-height retiré, la hauteur est définie par le contenu */
}


/* Conteneur des contrôles du menu */
.menu-controls {
    /* background-color: #f8f9fa; */ /* Option : garder fond gris clair */
    background-color: #ffffff; /* Ou fond blanc */
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
}

/* Wrapper pour les informations en haut du jeu */
.game-info-wrapper {
    background-color: #f8f9fa;
    border-color: #dee2e6 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

#gameArea {
    height: calc(70vh - 140px); /* Réduit pour padding écran jeu */
    min-height: 280px;
    max-height: 500px;
    width: 100%;
    border: 1px solid #ced4da;
    margin: 0 auto; /* Reste centré H */
    position: relative;
    background-color: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05); /* Ombre interne plus subtile */
    touch-action: manipulation;
    border-radius: 0.375rem; /* Arrondi standard */
}

#targetLine {
    position: absolute; bottom: 50px; left: 0; right: 0; height: 40px;
    background-color: rgba(25, 135, 84, 0.1);
    border-top: 2px solid rgba(25, 135, 84, 0.5);
    border-bottom: 2px solid rgba(25, 135, 84, 0.5);
    display: flex; align-items: center; justify-content: center;
    /* Texte "ZONE DE FRAPPE" */
    font-weight: 600; color: #0a3622; opacity: 1.0; /* Rendu visible */
    font-size: 0.9rem; letter-spacing: 0.5px; z-index: 1; user-select: none;
}

.hit-indicator {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); width: 12px; height: 12px;
    background-color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(25, 135, 84, 0.7);
    border-radius: 50%; opacity: 0;
    transition: transform 0.1s ease-out, opacity 0.1s, background-color 0.1s, border-color 0.1s;
    z-index: 2; pointer-events: none;
}

.hit-indicator.flash { transform: translate(-50%, -50%) scale(2); opacity: 1; }
.hit-indicator.flash-perfect { background-color: #ffca2c; border-color: #ffb300; }
.hit-indicator.flash-great { background-color: #a5d6a7; border-color: #388e3c; }
.hit-indicator.flash-good { background-color: #e0e0e0; border-color: #9e9e9e; }

.note {
    position: absolute; top: -40px; width: 40px; height: 40px;
    background: linear-gradient(145deg, #e3f2fd, #bbdefb); border: 1px solid #90caf9;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 600; color: #1e3a5f;
    z-index: 0; user-select: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#score { color: #212529; }
#missesInfo { color: #dc3545; }

#feedback { min-height: 28px; font-style: normal; font-weight: 500; color: #6c757d; transition: color 0.3s ease, font-weight 0.1s linear, transform 0.1s ease-out; font-size: 1.1em; text-align: center; }
#feedback.pop { transform: scale(1.05); }
@keyframes popFade { 0% { transform: scale(1.05); } 100% { transform: scale(1); } }
#feedback.pop { animation: popFade 0.2s ease-out forwards; }

/* Styles pour les feedbacks colorés */
#feedback[style*="color: #ffc107"], #feedback[style*="color: #198754"] { font-weight: 600; }
#feedback[style*="color: #fd7e14"] { font-weight: 500; }
#feedback[style*="color: #20c997"] { font-weight: 500; }
#feedback[style*="color: #dc3545"] { font-weight: 500; }

/* --- Styles Menu Modernisés --- */
.difficulty-controls .difficulty-btn,
.layout-controls .layout-btn,
.letter-group-btn,
.mode-controls .mode-btn {
    transition: all 0.2s ease-in-out; font-weight: 500;
    /* Le border-radius est géré par .btn-group sauf pour vertical */
}
.difficulty-controls .difficulty-btn.active,
.layout-controls .layout-btn.active,
#letterGroupContainer .letter-group-btn.active,
.mode-controls .mode-btn.active {
    font-weight: 600; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 2; position: relative;
}
.btn-outline-success.active { background-color: #198754; color: white; border-color: #198754;}
.btn-outline-warning.active { background-color: #ffc107; color: #333; border-color: #ffc107;}
.btn-outline-danger.active { background-color: #dc3545; color: white; border-color: #dc3545;}
.btn-outline-secondary.active { background-color: #6c757d; color: white; border-color: #6c757d;}
.btn-outline-primary.active { background-color: #0d6efd; color: white; border-color: #0d6efd;}
.btn-outline-info.active { background-color: #0dcaf0; color: #333; border-color: #0dcaf0;}

#letterGroupContainer .letter-group-btn {
    width: 100%; margin-bottom: 0.3rem; border: 1px solid #ced4da;
    background-color: #fff; color: #495057; text-align: left; padding: 0.5rem 1rem;
    border-radius: 0.375rem !important; /* Maintient l'arrondi car btn-group-vertical */
}
#letterGroupContainer .letter-group-btn.active { background-color: #0d6efd; color: white; border-color: #0a58ca !important; }
#letterGroupContainer .letter-group-btn:not(.active):hover { background-color: #e9ecef; border-color: #adb5bd; }
#menuLettersInput.d-none { display: none !important; }
/* --- Fin Styles Menu --- */

#comboDisplay { min-width: 80px; text-align: center; opacity: 0; transition: opacity 0.2s ease, transform 0.3s ease-out; font-weight: 600; }
#comboDisplay[style*="opacity: 1;"] { animation: comboPulse 0.3s ease-out; }
@keyframes comboPulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Styles Pause Overlay */
.pause-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(33, 37, 41, 0.7); color: white; font-size: 3.5em; font-weight: bold; display: flex; align-items: center; justify-content: center; z-index: 10; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; border-radius: inherit; backdrop-filter: blur(3px); }
#gameArea.paused .pause-overlay { opacity: 1; pointer-events: all; }

/* Styles Game Over Card */
#gameOverScreen .card { border-color: #f5c2c7 !important; margin-top: 2rem; background-color: #ffffff; /* Fond blanc */ }
#gameOverScreen .card-header { padding: 0.75rem 1.25rem; }
#gameOverScreen .list-group-item { padding: 0.5rem 0.75rem; font-size: 0.9em; background-color: transparent !important; }

/* Styles Compte à Rebours */
.countdown-display { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 7em; font-weight: bold; color: rgba(0, 0, 0, 0.6); background-color: rgba(255, 255, 255, 0.7); z-index: 12; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-out, transform 0.3s ease-out; border-radius: inherit; transform: scale(1.2); }
.countdown-display.visible { opacity: 1; transform: scale(1); }

/* === Animations CSS === */
@keyframes targetPulse { 0% { background-color: rgba(25, 135, 84, 0.1); } 50% { background-color: rgba(25, 135, 84, 0.25); transform: scaleY(1.04); } 100% { background-color: rgba(25, 135, 84, 0.1); transform: scaleY(1); } }
.target-line-hit { animation: targetPulse 0.15s ease-out; }
@keyframes missFlash { 0%, 100% { border-color: #ced4da; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } 50% { border-color: #dc3545; box-shadow: 0 0 10px rgba(220, 53, 69, 0.5); } }
.game-area-miss { animation: missFlash 0.3s ease-in-out; }