/*
* _______                                                           
*               /      ,         /     /  /                       
*   /   _   _  /   _     _  __  / __  /  /      _     _  _  _ _
*  /  _(-'_(__/ )_/ )_(_(__(_(_/     /_)/_(_(__(-' _ (_ (_)( / )
* --------------------------------------------------------------
* Codé par Jean CARALY | Technical-blue.com | 07.77.77.59.45
* --------------------------------------------------------------
*/
@font-face {
    font-family: 'Calibri';
    src: url('../fonts/calibri.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibri';
    src: url('../fonts/calibri_bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


/* Variables globales */
:root {
    --grid-size: 4;
    --max-width: 600px;
    --game-width: 90%;
    --cell-size: 60px;
    --cell-font-size: 2em;
    --bonus-font-size: 0.8em;
    --connection-line-width: 2.4em;
    --infostatsingame-font-size: 1.4em;
    --primary-color: #4BA3C3;
    --secondary-color: #FFFFFF;
    --connection-color: #4BA3C3;
    --blue-light-color: #eaf3f6;
    --grey-light-color: #f9f9f9;
    --bonus-m2-color: #f15a24;
    --bonus-m3-color: #ed1c24;
    --bonus-l2-color: #f9cc3d;
    --bonus-l3-color: #f7931e;
    --grey-color: #777;
    --border-radius: 20px;
    --main-font: 'Calibri', "Open Sans", Arial, sans-serif;
}

/* Reset et styles de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--main-font);
}

body {
    font-family: var(--main-font);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /*background-color: var(--primary-color);*/
    padding: 5px;
    overflow-y: auto;
    box-sizing: border-box;
    background: rgb(57, 139, 180);
    background: linear-gradient(90deg, rgba(57, 139, 180, 1) 0%, rgba(100, 164, 196, 1) 100%);
}

.vertical-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    box-sizing: border-box;
    justify-content: center;
    align-content: center;
    align-items: center;
}

div#console-demo {
    height: 100px;
    max-height: 100px;
    width: 40%;
    width: 100%;
    font-family: var(--main-font);
    overflow-y: auto;
    padding: 10px;
    font-size: 0.5em;
}

/* Conteneur du jeu */
#game-container {
    width: var(--game-width);
    max-width: var(--max-width);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background-color: #f5f5f5;
    border-radius: var(--border-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.logo {
    margin: 2rem 0;
    max-width: 80%;
    max-height: 10vh;
}

.menu-container .logo {
    margin: 0 0 max(6vh, 20px) 0;
    max-width: 80%;
    max-height: max(16vh, 120px);
}

/* En-tête du jeu */
.game-header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    margin-top: -16px;
}

.stat-label {
    font-size: 1.7rem;
    color: #666;
    margin-top: 5px;
}

.stat-value {
    font-size: var(--infostatsingame-font-size);
    font-weight: bold;
    color: #333;
    height: 40px;
    display: flex;
    align-items: center;
    margin: 10px 0 !important;
    padding: 5px;
    width: 100%;
    border: var(--blue-light-color) 3px solid;
    border-radius: 15px;
    background: white;
    padding: 20px;
}

/* Ajustement du conteneur de points pour l'alignement */
.game-stat .stat-value {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.game-stat {
    text-align: center;
}

.game-stat.stat-timer {
    width: 25%;
}

.game-stat.stat-points  .stat-value {
    justify-content: space-between;
}

.game-stat.stat-points {
    width: 40%;
}

.game-stat.stat-words {
    width: 25%;
}

.points-bonus {
    color: #4CB5FF;
    font-size: 0.8em;
    margin-left: 5px;
}

/* Styles pour le mot en cours que l'on est en train d'écrire */
#current-word {
    font-size: calc(var(--cell-font-size) - 10px);
    font-weight: bold;
    min-height: 60px;
    border-radius: 15px;
    background-color: #F5F7FA;
    color: #333;
    border: 5px solid var(--connection-color);
    letter-spacing: 2px;
    margin: 0;
    width: 100%;
    height: calc(var(--cell-font-size) + 30px);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    padding: 0 40px;

    /* Gestion des mots trop longs */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#current-word::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: calc(var(--cell-font-size) - 10px);
    height: calc(var(--cell-font-size) - 10px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#current-word.valid {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

#current-word.valid::before {
    content: '✓';
    color: #2ecc71;
    opacity: 1;
    font-size: calc(var(--cell-font-size) - 10px);
    font-weight: bold;
}

#current-word.event-word {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

#current-word.event-word::before {
    content: '';
    background-image: var(--event-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.3em;
    opacity: 1;
}

#current-word.valid.event-word::before {
    content: '';
    background-image: var(--event-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.3em;
    opacity: 1;
}

#current-word.invalid {
    color: var(--bonus-m3-color);
    border-color: var(--bonus-m3-color);
}

#current-word.invalid::before {
    content: '✕';
    color: var(--bonus-m3-color);
    opacity: 1;
    font-size: calc(var(--cell-font-size) - 10px);
    font-weight: bold;
}

#current-word.duplicate {
    color: var(--grey-color);
    border-color: var(--grey-color);
}

#current-word.duplicate::before {
    content: '↻';
    color: var(--grey-color);
    opacity: 1;
    font-size: calc(var(--cell-font-size) - 10px);
    font-weight: bold;
    line-height: 0.9; /* Ajustement spécifique pour l'icône de rotation */
}

#current-word::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: calc(var(--cell-font-size) - 10px);
    height: calc(var(--cell-font-size) - 10px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Animation pour les points bonus */
@keyframes pointsAppear {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.8);
    }
    5% {
        opacity: 1;
        transform: translateY(0) scale(1.1);
    }
    10% {
        transform: translateY(0) scale(1);
    }
    90% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.points-bonus {
    color: var(--connection-color);
    font-size: var(--infostatsingame-font-size);
    margin-left: 8px;
    font-weight: bold;
    position: relative;
    display: inline-block;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.points-bonus.show {
    opacity: 1;
    animation: pointsAppear 5s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

.points-bonus.hide {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Transitions pour les états des mots */
#current-word {
    transition: all 0.3s ease;
}

#current-word::before {
    transition: opacity 0.3s ease;
}

/* États des mots avec transitions */
#current-word.valid,
#current-word.invalid,
#current-word.duplicate {
    transition: all 0.3s ease;
}

#current-word.valid::before,
#current-word.invalid::before,
#current-word.duplicate::before {
    transition: opacity 0.3s ease;
}

/* Grille de jeu */
#grid-container {
    width: 100%;
    aspect-ratio: 1!important;
    display: grid;
    grid-template-columns: repeat(var(--grid-size), 1fr);
    gap: min(1rem,2vw);
    padding: 10px;
    border-radius: 10px;
    position: relative;
}

.connection-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.connection-line {
    stroke: var(--connection-color);
    stroke-width: var(--connection-line-width);
    stroke-linecap: round;
    fill: none;
    opacity: 0.8;
}

.connection-line-above {
    stroke: #4BA3C3;
    stroke-width: 6px;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px #4BA3C3AA);
}

/* Style des cellules */
.grid-cell {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 0.2vw solid #0000;
    user-select: none;
    box-shadow: 0 0 12px -5px #0006;
    background: linear-gradient(45deg, rgba(237, 237, 237, 1) 20%, rgba(255, 255, 255, 1) 100%);
}

.grid-cell::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background-color: #f7f7f7;
    z-index: 1;
    text-align: center;
    margin: 10%;
}

.grid-cell:hover {
    transform: scale(1.05);
    background-color: #fff;
}

.grid-cell.selected {
    outline: 0.35rem solid var(--connection-color);
    color: black;
}

.grid-cell.current {
    outline: 0.2rem solid var(--connection-color);
    color: var(--connection-color);
}

/* Styles pour l'illumination des lettres sur la grille */
.letter-container.highlight-valid {
    background: linear-gradient(45deg, rgba(0, 200, 0, 0.25) 20%, rgb(167, 255, 167, 0.25) 100%);
    /* background-color: rgba(0, 200, 0, 0.7) !important; */
    color: black !important;
    transform: scale(1.1);
    z-index: 10;
    transition: all 0.3s ease;
}

.letter-container.highlight-invalid {
    background: linear-gradient(45deg, rgba(255, 0, 0, 0.25) 20%, rgb(255, 167, 167, 0.25) 100%);
    /* background-color: rgba(255, 0, 0, 0.7) !important; */
    color: black !important;
    transform: scale(1.1);
    z-index: 10;
    transition: all 0.3s ease;
}

.letter-container.highlight-duplicate {
    background: linear-gradient(45deg, rgba(128, 128, 128, 0.25) 20%, rgb(255, 255, 255, 0.25) 100%);
    /* background-color: rgba(128, 128, 128, 0.7) !important; */
    color: black !important;
    transform: scale(1.1);
    z-index: 10;
    transition: all 0.3s ease;
}

/* Styles pour l'illumination des cellules de la grille */
.grid-cell.cell-highlight-valid {
    /* background: linear-gradient(45deg, rgba(237, 237, 237, 1) 20%, rgba(255, 255, 255, 1) 100%); */
    background: radial-gradient(45deg, rgba(0, 200, 0, 0.5) 0%, rgba(0, 200, 0, 0) 70%);
    box-shadow: 0 0 8px rgba(0, 200, 0, 0.5);
    border: 1px solid rgba(0, 200, 0, 0.7) !important;
    z-index: 5;
    transition: all 0.3s ease;
}

.grid-cell.cell-highlight-invalid {
    background: radial-gradient(45deg, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0) 70%);
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
    border: 1px solid rgba(255, 0, 0, 0.7) !important;
    z-index: 5;
    transition: all 0.3s ease;
}

.grid-cell.cell-highlight-duplicate {
    background: radial-gradient(45deg, rgba(128, 128, 128, 0.5) 0%, rgba(128, 128, 128, 0) 70%);
    box-shadow: 0 0 8px rgba(128, 128, 128, 0.5);
    border: 1px solid rgba(128, 128, 128, 0.7) !important;
    z-index: 5;
    transition: all 0.3s ease;
}

/* Style des lettres et points */
.letter-container {
    position: relative;
    width: 75%;
    height: 75%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    margin: 10%;
    background-color: #f7f7f7;
    border-radius: 40%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 1) 20%, rgba(237, 237, 237, 1) 100%);
}

.letter {
    font-size: var(--cell-font-size);
    font-weight: bold;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: all 0.2s ease;
}

.points {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: calc(var(--cell-font-size) / 3);
    font-weight: bold;
    color: #777;
    z-index: 3;
    padding: 1px;
    text-shadow: 0px 0px 1px white;
}

.grid-cell.selected .points {
    color: black;
    text-shadow: 0px 0px 1px var(--primary-color);
}

/* Style des lettres et bonus */
.bonus {
    position: absolute;
    top: -1em;
    left: -1em;
    font-size: var(--bonus-font-size);
    font-weight: bold;
    color: white;
    border: 1px solid white;
    border-radius: 50%;
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.grid-cell .bonus-m2 { background-color: var(--bonus-m2-color); }
.grid-cell .bonus-m3 { background-color: var(--bonus-m3-color); }
.grid-cell .bonus-l2 { background-color: var(--bonus-l2-color); }
.grid-cell .bonus-l3 { background-color: var(--bonus-l3-color); }

/* Affichage du mot en cours */
#current-word.visible {
    opacity: 1;
}

/* Désactiver la sélection de texte */
.grid-cell, .letter, .bonus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hidden {
    display: none !important;
}

/* Optimisations tactiles */
@media (hover: none) and (pointer: coarse) {
    .grid-cell {
        touch-action: none;
    }
}

/* Responsive design */
@media (max-width: 480px) {
    #game-container {
        padding: 10px;
        gap: 5px;
        max-height: 95vh;
    }
    
    #grid-container {
        gap: 5px;
        padding: 5px;
    }
}

#game-timer.warning {
    color: #ff3333;
    animation: pulse 1s infinite;
}

#game-timer.timer-warning {
    color: #ff0000;
    font-weight: bold;
    animation: timer-pulse 0.8s infinite alternate;
}

@keyframes timer-pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Styles du message de partie déjà jouée */
#game-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
}

#already-played {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 999;
    min-width: 300px;
}

#already-played h2 {
    margin-bottom: 1.5rem;
    color: #333;
    font-size: 1.5rem;
}

#already-played .button {
    display: inline-block;
    padding: 1rem 2rem;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.2s;
    font-size: 1.1rem;
}

#already-played .button:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* STATS MODAL */
#end-game-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
}

#end-game-modal {
    width: 50%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    z-index: 1002;
    max-width: 80%;
    max-height: 90vh;
    max-height: 90%;
    overflow-y: auto;
}

#end-game-modal h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

#end-game-modal .stats-container {
    display: grid;
    gap: 20px;
}

#end-game-modal .score-section {
    text-align: center;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 10px;
}

#end-game-modal .score-section h3 {
    color: #2c3e50;
    margin-bottom: 10px;
}

#end-game-modal .score-section div {
    font-size: 32px;
    font-weight: bold;
    color: var(--primary-color);
}

#end-game-modal .detailed-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

#end-game-modal .detailed-stats > div {
    background: #f5f5f5;
    padding: 15px;
    border-radius: 10px;
}

#end-game-modal .detailed-stats .stats-block ul > li {
    /*height: 19px !important;*/
    /*max-height: 19px !important;*/
    padding: 2px;
    margin: 2px;
}

#end-game-modal .detailed-stats h4 {
    color: #2c3e50;
    margin-bottom: 10px;
}

#end-game-modal .detailed-stats ul {
    list-style: none;
    padding: 0;
}

#end-game-modal .words-lists {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

#end-game-modal .words-lists .modal-button{
    float: right;
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 20px;
}

#end-game-modal .words-lists #view-grid-button{
    height: 25px;
    top: -5px;
    padding: 0 10px;
    margin: 0;
    position: relative;
    border: 1px solid var(--primary-color);;
    color: var(--primary-color);
    cursor: pointer;
}

#end-game-modal .words-lists > div {
    background: #f5f5f5;
    padding: 15px;
    border-radius: 10px;
}

#end-game-modal .words-lists h4 {
    color: #2c3e50;
    margin-bottom: 10px;
    float: left;
}

#end-game-modal .words-lists > div > div {
    display: grid;
    gap: 5px;
    max-height: 300px;
    overflow-y: auto;
    clear: both;
}

#end-game-modal .found-word {
    color:var(--primary-color);
    font-weight: bold;
}

#end-game-modal .event-word {
    font-weight: bold !important;
    /* La couleur est définie dynamiquement dans le style inline */
}

#end-game-modal .event-word:not(.found-word) {
    opacity: 0.7; /* Légèrement plus transparent pour les mots non trouvés */
}

#end-game-modal .event-icon {
    width: 16px;
    height: 16px;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: middle;
    display: inline-block;
}

#end-game-modal .event-legend {
    margin: 10px 0;
    padding: 8px;
    background-color: #f9f9f9;
    border-radius: 5px;
    font-size: 0.9em;
}

#end-game-modal .event-legend-item {
    display: flex;
    align-items: center;
}

#end-game-modal .event-legend-item .event-icon {
    margin-left: 0;
    margin-right: 8px;
    width: 20px;
    height: 20px;
}

#end-game-modal .word-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #eee;
}

#end-game-modal .word-item .details {
    margin-left: 10px;
    color: #666;
}

#end-game-modal .words-lists .word-item {
    background: white;
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}


#end-game-modal .event-legend-item .event-icon {
    margin-left: 0;
    margin-right: 8px;
    width: 20px;
    height: 20px;
}

#end-game-modal .words-lists .word-item .score {
    color: var(--primary-color);
}

#end-game-modal .words-lists .word-item .length {
    color: #95a5a6;
}

#end-game-modal .modal-button {
    text-align: center;
}

#end-game-modal .modal-button button {
    padding: 10px 20px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin: 5px;
}

#end-game-modal .modal-button button:hover {
    background: var(--primary-color);;
}

#end-game-modal .modal-button button.secondary-button{
    background: #f5f5f5;
    color: #777;
}

#end-game-modal .modal-button button.secondary-button:hover{
    background: #ddd;
    color: #555;
}
#end-game-modal .word-item .event-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
}

@media (max-width: 1500px) {
    #end-game-modal {
        width: 60%;
    }
}

@media (max-width: 1200px) {
    #end-game-modal {
        width: 75%;
    }
}

@media (max-width: 700px) {
    #end-game-modal {
        width: 90%;
    }
    #end-game-modal .detailed-stats,
    #end-game-modal .words-lists {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    #end-game-modal {
        width: 95%;
    }
}

#end-game-modal .words-lists {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

#end-game-modal .word-item a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted #666;
}

#end-game-modal .word-item a:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* PAGE DES STATISTIQUES */

#page-stats.stats-container {
    width: var(--game-width);
    max-width: var(--max-width);
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

#page-stats .stats-section {
    margin-bottom: 30px;
    background-color: var(--secondary-color);
    padding: 20px;
    border-radius: 8px;
}

#page-stats .stats-title {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-align: center;
}

#page-stats h1.stats-title{
    font-size: 2.2rem;
}
#page-stats h2.stats-title{
    font-size: 1.75rem;
}

#page-stats h3.stats-subtitle.stats-margin-top {
    margin-top: 30px;
}
#page-stats h3.stats-subtitle {
    color: var(--primary-color);
    font-size: 1.4rem;
    margin-bottom: 30px;
    text-align: center;
    }
    
#page-stats .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

#page-stats .stats-grid2 {
    margin-top: 20px;
}

#page-stats .stat-card {
    background-color: white;
    text-align: center;
    font-weight: 900;
}

#page-stats .stat-value {
    font-size: 2em;
    color: var(--primary-color);
    font-weight: bold;
    margin: 10px 0;
    justify-content: center;
}

#page-stats .stat-label {
    color: #666;
    font-size: 1.25rem;
}

#page-stats .rank-badge {
    display: inline-block;
    padding: 5px 15px 10px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    font-size: 1.25rem;
    margin-top: 5px;
}

#page-stats .play-today {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
    font-weight: bold;
}

#page-stats .play-today:hover {
    opacity: 0.9;
}

#page-stats .stats-options {
    display: flex;
    flex-direction: row;
    margin-bottom: 25px;
    text-align: center;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
}

#page-stats .stats-options a {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

@media (max-width: 600px) {
    #page-stats .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* MENU PRINCIPAL */
.menu-container {
    width: var(--game-width);
    max-width: var(--max-width);
    padding: 20px;
    text-align: center;
}

.menu-container h1 {
    color: var(--primary-color);
    font-size: 2em;
    margin-bottom: 40px;
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 500px;
    margin: 0 auto;
}

.menu-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: none;
    border-radius: 10px;
    background-color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.menu-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.menu-button.primary {
    background-color: #006891;
}

.menu-button.primary .button-title,
.menu-button.primary .button-subtitle {
    color: white;
}

.menu-button.disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
}

.menu-button.disabled:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.button-title {
    font-size: 1.7rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.button-subtitle {
    font-size: 1.3rem;
    color: #666;
}

@media (max-width: 600px) {
    .menu-container {
        padding: 10px;
    }

    .menu-button {
        padding: 15px;
    }
}

/* Styles pour les en-têtes pliables */
.collapsible {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: var(--blue-light-color);
    border-radius: 5px;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
}

.collapsible:hover {
    background-color: var(--primary-color);
    color: white;
}

.toggle-icon {
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

.collapsible + .hidden .toggle-icon {
    transform: rotate(-90deg);
}

.words-list {
    transition: max-height 0.3s ease-out;
    }

.words-list.hidden {
    display: none;
}

/* Bouton de son */
.sound-toggle {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.sound-toggle:hover {
    transform: scale(1.1);
}

.sound-toggle img {
    width: 45px;
    height: 45px;
}



/* Media query pour cacher le logo en dessous de 850px de hauteur */
@media (max-height: 850px) {
    body#quotidien .logo,
    body#entrainement .logo {
        display: none;
    }
}

/* Media queries pour ajuster la largeur du game-container en fonction de la hauteur de l'écran */
@media (max-height: 725px) {
    body#quotidien #game-container,
    body#entrainement #game-container {
        width: 540px; /* Début de la réduction progressive */
        max-width: 95%;
    }
}

@media (max-height: 675px) {
    body#quotidien #game-container,
    body#entrainement #game-container {
        width: 490px; /* Début de la réduction progressive */
        max-width: 95%;
    }
}

@media (max-height: 650px) {
    body#quotidien #game-container,
    body#entrainement #game-container {
        width: 470px; /* Début de la réduction progressive */
        max-width: 95%;
    }
}

@media (max-height: 625px) {
    body#quotidien #game-container,
    body#entrainement #game-container {
        width: 450px; /* Début de la réduction progressive */
        max-width: 95%;
    }
}

@media (max-height: 600px) {
    body#quotidien #game-container,
    body#entrainement #game-container {
        width: 430px; /* Début de la réduction progressive */
        max-width: 95%;
    }
}

@media (max-height: 550px) {
    body#quotidien #game-container,
    body#entrainement #game-container {
        width: 390px; /* Début de la réduction progressive */
        max-width: 95%;
    }
}

@media (max-height: 500px) {
    body#quotidien #game-container,
    body#entrainement #game-container {
        width: 350px; /* Début de la réduction progressive */
        max-width: 95%;
    }
}

/* Styles pour la modale des règles */
#rules-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

#rules-modal {
    background-color: #fff;
    border-radius: 20px;
    padding: 20px;
    max-width: 80%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    z-index: 1001;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

#rules-modal h2 {
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 20px;
}

#rules-modal h3 {
    color: var(--primary-color);
    margin-top: 15px;
}

#rules-modal ul {
    padding-left: 20px;
    margin-bottom: 15px;
}

#rules-modal li {
    margin-bottom: 8px;
}

#rules-modal img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 15px 0;
}

#rules-modal #close-rules-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
}

#rules-modal #rules-ok-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
}

#rules-modal #rules-ok-button:hover {
    background-color: #3a8fb7;
}

/* Styles pour la page des règles */
.rules-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.rules-container h1 {
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 30px;
}

.rules-container h2 {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    margin-top: 30px;
    margin-bottom: 15px;
}

.rules-container p {
    margin-bottom: 15px;
    line-height: 1.6;
}

.rules-container ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

.rules-container li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.example-grid {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.example-grid img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.target-emoji {
    font-size: 1.5em;
    color: var(--primary-color);
    margin-right: 10px;
}

.back-button {
    display: inline-block;
    margin: 20px 0;
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.back-button:hover {
    background-color: var(--primary-color);
}

@media (max-width: 768px) {
    #rules-modal {
        max-width: 95%;
        padding: 15px;
    }
    
    .rules-container {
        padding: 15px;
    }
}

/* Styles pour les records */
.record-badge {
    display: inline-block;
    font-size: 0.8em;
    padding: 3px 8px;
    border-radius: 12px;
    margin-left: 8px;
    font-weight: bold;
    vertical-align: middle;
    animation: pulse 2s infinite;
    position: relative;
    top: -2px;
}

.record-beaten {
    background-color: var(--primary-color);
    color: white;
}

.record-tied {
    background-color: var(--primary-color);
    color: white;
}

.records-notification {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--primary-color);
    color: white;
    padding: 15px;
    text-align: center;
    z-index: 1000;
    animation: slideDown 0.5s ease-out, fadeOut 0.5s ease-in 4.5s forwards;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.records-notification h3 {
    color: white;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
}

.records-notification ul {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    text-align: center;
}

.records-notification li {
    margin-bottom: 5px;
    font-size: 16px;
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 #4BA3C3AA;
    }
    85% {
        box-shadow: 0 0 0 10px #4BA3C300;
    }
    100% {
        box-shadow: 0 0 0 0 #4BA3C300
    }
}

.record-badge {
    display: inline-block;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 10px;
    margin-left: 10px;
    position: relative;
    top: -2px;
}

.record-beaten {
    background-color: var(--primary-color);
    color: white;
}

.record-tied {
    background-color: var(--primary-color);
    color: white;
}

.pulse {
    animation: pulse 1.5s infinite;
}

#end-game-modal .event-legend {
    margin-top: 10px;
    padding: 5px;
    border-radius: 5px;
    background-color: #f5f5f5;
}

#end-game-modal .event-legend-item {
    display: flex;
    align-items: center;
}

#end-game-modal .word-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

/* Style pour le bouton de réinitialisation des statistiques */
.stats-reset {
    margin-top: 3rem;
    text-align: center;
    opacity: 0.7;
}

.danger-button {
    background-color: transparent;
    color: #666;
    border: 1px solid #999;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9em;
}

.danger-button:hover {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #721c24;
}

/* Style pour la croix de fermeture */
.close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: var(--primary-color) 1px solid;
    color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1.5rem;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.close-button:hover {
    transform: scale(1.1);
    background-color: var(--primary-color);
    color: white;
}

.stats-container {
    position: relative;
}