/* Couleurs Z Event 2025 (selon votre demande) */
:root {
    --z-event-green: #2ecc71;
    --z-event-dark-green: #27ae60;
    --z-event-black: #1a1a1a;
    --z-event-dark-grey: #2c2c2c;
    --z-event-light-grey: #cccccc;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--z-event-black);
    color: var(--z-event-light-grey);
    margin: 0;
    padding: 0;
    overflow: hidden; /* Empêche toute barre de défilement sur OBS */
}

/* Éléments de la page de jeu 
   TAILLE FIXE POUR OBS : Renseigne "1920" en largeur et "1080" en hauteur dans ta source OBS
*/
.game-container {
    width: 1920px;
    height: 1080px;
    display: grid;
    /* Colonne gauche (400px), Colonne centre (dynamique), Colonne droite (400px) */
    grid-template-columns: 400px 1fr 400px; 
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
}

/* --- COLONNE DE GAUCHE (Caméra + Chat) --- */
.left-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%; /* Prend toute la hauteur des 1080px */
}

.camera-area {
    background-color: transparent;
    padding: 0;
    border-radius: 10px;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 16 / 9; /* Fige un ratio parfait pour ta caméra OBS */
    flex-shrink: 0; /* Empêche l'écrasement de la zone caméra */
}

.camera-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.camera-placeholder-text {
    display: none;
}

.chat-area {
    background-color: var(--z-event-dark-grey);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Remplit tout l'espace restant sous la caméra */
    text-align: left;
    font-size: 0.9em;
    color: #d4d4d4;
    overflow: hidden;
}

#chatDisplay {
    flex-grow: 1;
    overflow-y: hidden; /* Désactivé pour OBS, privilégie un auto-scroll en JS */
}

/* --- COLONNE CENTRALE (Photo + Mots) --- */
.photo-word-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    height: 100%; /* Prend toute la hauteur */
}

/* LE SECRET EST ICI : Un conteneur photo flexible mais l'image s'y contraint */
.photo-display {
    background-color: var(--z-event-dark-grey);
    border: 3px solid var(--z-event-green);
    border-radius: 10px;
    width: 100%;
    flex-grow: 1; /* Prend tout l'espace disponible au-dessus des mots */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Rien ne déborde */
    position: relative;
}

.game-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain; /* L'image s'adapte sans JAMAIS déformer la boîte */
}

/* Conteneur pour les mots cachés (à ajouter dans ton HTML si absent) */
.words-container {
    width: 100%;
    height: 150px; /* Fige la hauteur de la zone des mots pour qu'elle ne pousse pas la photo */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

/* --- COLONNE DE DROITE (Scoreboard) --- */
.scoreboard-area {
    background-color: var(--z-event-dark-grey);
    padding: 15px;
    border-radius: 10px;
    height: 100%; /* Prend toute la hauteur, fini le max-height baladeur */
    box-sizing: border-box;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.scoreboard-area h2, .game-container h2 {
    color: var(--z-event-green);
    border-bottom: 2px solid var(--z-event-dark-green);
    padding-bottom: 10px;
    text-align: center;
    margin-top: 0;
}

/* --- STYLES DES COMPOSANTS --- */
#startRoundBtn, .submit-button, .player-points, .word-display {
    background-color: var(--z-event-green);
    color: var(--z-event-black);
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

#startRoundBtn:hover, .submit-button:hover {
    background-color: var(--z-event-dark-green);
}

.player-score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--z-event-black);
    border: 1px solid var(--z-event-dark-green);
    border-radius: 5px;
    margin-bottom: 5px;
    padding: 10px;
}

.player-name {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--z-event-light-grey);
}

.player-points {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--z-event-light-grey);
}

.word-slot {
    background-color: var(--z-event-black);
    border: 1px solid var(--z-event-dark-green);
    color: var(--z-event-green);
    font-weight: bold;
    border-radius: 8px;
    padding: 10px 15px;
    min-width: 80px;
    text-align: center;
}

.word-display {
    font-size: 1.5em;
    letter-spacing: 4px;
}

.finder-name {
    font-size: 0.9em;
    color: var(--z-event-light-grey);
    margin-top: 5px;
}

/* Styles pour l'Admin / Autres pages */
.header h1 { color: var(--z-event-green); }
.header button { background-color: var(--z-event-dark-green); color: white; }
.header button:hover { background-color: var(--z-event-green); }
.message-box.success { background-color: var(--z-event-dark-green); }
.message-box.error { background-color: #ff6348; }
.pending-photo-card, .photo-card { background-color: var(--z-event-dark-grey); }
.pending-photo-card img, .photo-card img { border-bottom: 2px solid var(--z-event-dark-green); }
.pending-photo-card .words-input, .photo-controls .word-input {
    background-color: var(--z-event-black);
    border: 1px solid var(--z-event-dark-green);
}
.save-btn { background-color: var(--z-event-green); }
.save-btn:hover { background-color: var(--z-event-dark-green); }

/* Styles de la page de soumission */
.submit-container {
    background-color: var(--z-event-dark-grey);
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    text-align: center;
}
.submit-container h1 { color: var(--z-event-green); margin-bottom: 25px; }
.form-group input[type="file"],
.form-group input[type="text"],
.form-group textarea {
    border: 1px solid var(--z-event-dark-green);
    background-color: var(--z-event-black);
    color: var(--z-event-light-grey);
}
.submit-button { background-color: var(--z-event-green); color: white; }
.submit-button:hover { background-color: var(--z-event-dark-green); }