/* Importation de la police Gustavo */
@font-face {
    font-family: 'Gustavo';
    src: url('gustavo.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* Couleurs Nutrimuscle */
    --color-bg: #1D2A35; /* Fond sombre / Bleu-gris */
    --color-text: #FFFFFF; /* Texte Blanc */
    --color-tile-border: #888; /* Bordure des cases (Gris clair) */
    --color-bg-tile-default: #333333; /* Fond des tuiles non jouées */

    /* Couleurs de feedback (indices) */
    --color-correct: #0093E5; /* Bleu vif Nutrimuscle (bien placé) */
    --color-present: #FFCC00; /* Jaune d'or (mauvais endroit) */
    --color-absent: #777777; /* Gris neutre (non utilisé) */

    --color-key-default: #4A4A4A; /* Touche clavier par défaut */
}

/* Reset & base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;        /* prend toute la hauteur de l'écran */
    overflow: hidden;    /* pas de scroll */
}

/* BODY = conteneur global */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: 'Gustavo', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    overflow-x: hidden;
}

/* --- HEADER / TITRE --- */
.header {
    text-align: center;
    padding: 5px 0;
    flex-shrink: 0;
}

.header h1 {
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    margin: 0 0 10px 0;
    color: var(--color-correct);
    text-transform: uppercase;
}

/* --- ÉCRAN D'ACCUEIL --- */
#start-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 600px;
    padding: 20px;
    margin-top: 10px;
}

#start-screen h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#start-screen p {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 22px;
    line-height: 1.5;
}

/* Bouton "Jouer" flottant */
#start-button {
    background-color: var(--color-correct);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 26px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(0, 147, 229, 0.4);
    animation: float 2.2s ease-in-out infinite;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

#start-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 24px rgba(0, 147, 229, 0.55);
}

#start-button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 6px 10px rgba(0, 147, 229, 0.35);
}

/* Animation de flottement */
@keyframes float {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

/* --- CONTENEUR DU JEU (grille + clavier + classement) --- */
#game-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;
    width: 100%;
    max-width: 650px;
    max-height: calc(100vh - 70px);
}

/* --- GRILLE DE JEU (PLATEAU) --- */
#board {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 5px 0;
    width: 50%;
    max-width: 650px;
    margin: 0 auto;
    max-height: 50vh;
}

/* Chaque ligne de lettres */
.row {
    display: grid;
    gap: 8px;
    justify-content: center;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
}

/* --- TILE / CASE --- */
.tile {
    aspect-ratio: 1 / 1;
    width: 100%;
    
    border: 2px solid var(--color-tile-border);
    background-color: var(--color-bg-tile-default);
    color: var(--color-text);
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    
    transition: background-color 0.5s, border-color 0.5s;
}

/* Centrage du <span> à l’intérieur de la tuile */
.tile span {
    display: block;
    line-height: 1;
}

/* Première lettre fixe (toujours révélée) */
.tile.fixed {
    background-color: var(--color-correct);
    color: var(--color-text);
    border-color: var(--color-correct);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Styles des cases après validation */
.tile.correct {
    background-color: var(--color-correct);
    color: var(--color-text);
    border-color: var(--color-correct);
}

.tile.present {
    background-color: var(--color-present);
    color: var(--color-bg);
    border-color: var(--color-present);
}

.tile.absent {
    background-color: var(--color-absent);
    color: var(--color-text);
    border-color: var(--color-absent);
}

/* Animation de secousse pour mot invalide */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.row.shake,
.shake {
  animation: shake 0.6s;
}

/* --- CLAVIER VIRTUEL --- */
#keyboard-container {
    margin-top: 10px;
    width: 100%;
    max-width: 650px;
    flex-shrink: 0;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

/* Touches du clavier */
.key {
    background-color: var(--color-key-default);
    color: var(--color-text);
    padding: 10px 8px;
    margin: 3px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    flex-grow: 1;
    min-width: 26px;
    text-align: center;
    font-size: clamp(0.7rem, 3vw, 0.9rem);
    transition: background-color 0.3s, opacity 0.3s;
}

/* Styles des touches du clavier après validation */
.key.correct {
    background-color: var(--color-correct);
    color: var(--color-text);
}

.key.present {
    background-color: var(--color-present);
    color: var(--color-bg);
}

.key.absent {
    background-color: var(--color-absent);
    color: var(--color-text);
    opacity: 0.5;
}

/* Taille spécifique pour Entrée et Retour arrière */
.key.large {
    flex-grow: 1.5;
    padding: 10px 5px;
}

/* --- CLASSEMENT (GAGNANTS DU JOUR) --- */
#winners-panel {
    margin-top: 4px;
    flex-shrink: 0;
    font-size: 0.8rem;
    text-align: center;
    opacity: 0.9;
}

/* --- MESSAGE CONTAINER (pour showMessage) --- */
#message-container {
    position: fixed;
    top: 50px;
    z-index: 2000;
    pointer-events: none;
}

/* --- GIF ÉCRAN FIN --- */
#already-played {
    display: none; /* affiché uniquement en JS */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.played-gif {
    max-width: 90%;
    max-height: 40vh;
    object-fit: contain;
}

/* --- MEDIA QUERIES --- */
@media (max-width: 650px) {
    body {
        padding: 8px;
    }

    #game-container {
        max-width: 100vw;
        max-height: calc(100vh - 60px);
    }

    #board {
        gap: 6px;
        max-width: 95vw;
        width: 70%;
    }

    .row {
        gap: 6px;
        max-width: 95vw;
    }

    .tile {
        font-size: clamp(1.4rem, 6vw, 2.2rem);
    }

    #keyboard-container {
        margin-top: 8px;
        max-width: 100vw;
    }

    .key {
        padding: 8px 4px;
        margin: 2px;
        font-size: clamp(0.7rem, 3.2vw, 0.85rem);
    }

    #start-screen {
        padding: 10px;
    }
}