p {
    text-align: center;
}

h2{
    text-align: center;
}

.header{
    display: flex;
    justify-content: center;
}

.league-selector{
    margin-bottom:20px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
}

.league-selector label{
    font-weight:600;
    color:#D0662A ;
}

.league-selector select{
    padding:10px 15px;
    font-size:16px;
    border:2px solid #D0662A ;
    border-radius:8px;
    cursor:pointer;
    min-width:200px;
}



.mystery-image{padding:20px;border-radius:12px;display:inline-block}
.mystery-image img{width:180px;height:180px;object-fit:cover;filter:blur(35px);transition:filter 0.5s}
.mystery-image img.revealed{filter:blur(0)}

.search-box,.instructions,.guess-row,.win-screen{
    margin-bottom:20px;
}

#search-input{
    text-align: center;
}

.win-screen{
    display: grid;
    justify-content: center;
}

.instructions{
    text-align: center;
}

input{width:100%;padding:12px;font-size:18px;border-radius:8px;border:2px solid #ccc}
input:disabled{background:#f5f5f5;cursor:not-allowed}

.suggestions{border:2px solid #ddd;border-radius:8px;margin-top:5px;max-height:300px;overflow-y:auto}
.suggestion-item{padding:10px;cursor:pointer;display:flex;gap:10px;align-items:center}
.suggestion-item:hover{background:#fee2e2; color: black;}

.guess-grid{
    display:grid;
    gap:6px;
    text-align:center;
}

.guess-cell{
    padding:10px;
    border-radius:8px;
    color:white;
    font-weight:bold;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height:60px;
}

.guess-cell small{font-size:0.7em;opacity:0.9;margin-top:2px}
.correct{background:#22c55e}
.incorrect{background:#ef4444}
.close{background:#f97316}
.hidden{display:none !important;}

img.player{width:50px;height:50px;border-radius:50%;object-fit:cover}

.loading{text-align:center;color:white;font-size:20px;padding:40px}
.error{background:#fee2e2;color:#D0662A ;padding:20px;border-radius:12px;margin:20px 0}

.mode-badge{
    background:rgba(208, 102, 42, 0.3);
    padding:8px 16px;
    border-radius:20px;
    font-size:0.9rem;
    display:inline-block;
    margin-top:10px;
}

#returnButton{
    margin-bottom:20px;
    justify-self: center;
}

/* RESPONSIVE GRID SYSTEM */
#guesses {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

#guesses::-webkit-scrollbar {
    width: 8px;
}

#guesses::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#guesses::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 10px;
}

#guesses::-webkit-scrollbar-thumb:hover {
    background: #5568d3;
}

.guess-row {
    width: 100%;
    max-height: 120px; /* ⬅️ HAUTEUR MAX PAR ROW */
    overflow-x: auto;
    overflow-y: hidden;
}

.guess-row::-webkit-scrollbar {
    height: 6px;
}

.guess-row::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.guess-row::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 10px;
}

.guess-row::-webkit-scrollbar-thumb:hover {
    background: #5568d3;
}

.guess-grid {
    display: grid;
    gap: 8px;
    min-width: 100%; /* ⬅️ MIN-WIDTH pour forcer le scroll horizontal */
}

/* Configuration des colonnes selon le mode */
.guess-grid.with-league {
    grid-template-columns: repeat(8, minmax(120px, 1fr)); /* ⬅️ MINMAX */
}

.guess-grid.without-league {
    grid-template-columns: repeat(7, minmax(120px, 1fr)); /* ⬅️ MINMAX */
}

.guess-cell {
    padding: 12px 8px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 8vh; /* ⬅️ HAUTEUR FIXE */
    max-height: 8vh; /* ⬅️ MAX HAUTEUR */
    word-break: break-word;
    overflow: hidden; /* ⬅️ EMPÊCHE DÉBORDEMENT */
}

.guess-cell img.player {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0; /* ⬅️ EMPÊCHE RÉTRÉCISSEMENT */
}

.guess-cell img.logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0; /* ⬅️ EMPÊCHE RÉTRÉCISSEMENT */
}

.guess-cell small {
    display: block;
    font-size: 10px; /* ⬅️ RÉDUIT */
    opacity: 0.9;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Style pour les postes multiples */
.guess-cell .postes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    max-height: 40px; /* ⬅️ RÉDUIT */
    overflow-y: auto;
    padding: 2px;
    width: 100%;
}

.guess-cell .postes-container::-webkit-scrollbar {
    width: 4px;
}

.guess-cell .postes-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.guess-cell .postes-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
}

.guess-cell .poste-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
}

/* RESPONSIVE BREAKPOINTS */

/* Tablettes (768px - 1024px) */
@media (max-width: 1024px) {
    .guess-row {
        max-height: 100px; /* ⬅️ RÉDUIT */
    }

    .guess-grid.with-league {
        grid-template-columns: repeat(8, minmax(100px, 1fr)); /* ⬅️ MINMAX RÉDUIT */
    }

    .guess-grid.without-league {
        grid-template-columns: repeat(7, minmax(100px, 1fr)); /* ⬅️ MINMAX RÉDUIT */
    }

    .guess-cell {
        font-size: 11px;
        padding: 8px 6px;
        height: 85px; /* ⬅️ HAUTEUR FIXE */
        max-height: 85px;
    }

    .guess-cell img.logo {
        width: 25px;
        height: 25px;
    }

    .guess-cell img.player {
        width: 35px;
        height: 35px;
    }

    .guess-cell .poste-badge {
        font-size: 10px;
        padding: 2px 5px;
    }

    .guess-cell .postes-container {
        max-height: 35px;
    }
}

/* Mobile Large (481px - 767px) */
@media (max-width: 767px) {

    .guess-row {
        max-height: 85px; /* ⬅️ RÉDUIT */
    }

    .guess-grid.with-league {
        grid-template-columns: repeat(8, minmax(85px, 1fr)); /* ⬅️ MINMAX RÉDUIT */
    }

    .guess-grid.without-league {
        grid-template-columns: repeat(7, minmax(85px, 1fr)); /* ⬅️ MINMAX RÉDUIT */
    }

    .guess-cell {
        font-size: 10px;
        padding: 6px 4px;
        height: 75px; /* ⬅️ HAUTEUR FIXE */
        max-height: 75px;
    }

    .guess-cell img.player {
        width: 28px;
        height: 28px;
    }

    .guess-cell img.logo {
        width: 20px;
        height: 20px;
    }

    .guess-cell .poste-badge {
        font-size: 9px;
        padding: 1px 4px;
    }

    .guess-cell .postes-container {
        max-height: 30px;
    }

    .guess-cell small {
        font-size: 9px;
    }

    #gameInfoContainer{
        display: grid !important;
    }
}

/* Mobile Small (max 480px) */
@media (max-width: 480px) {

    .guess-row {
        max-height: 75px; /* ⬅️ RÉDUIT */
    }

    .guess-grid.with-league {
        grid-template-columns: repeat(8, minmax(75px, 1fr)); /* ⬅️ MINMAX RÉDUIT */
    }

    .guess-grid.without-league {
        grid-template-columns: repeat(7, minmax(75px, 1fr)); /* ⬅️ MINMAX RÉDUIT */
    }

    .guess-cell {
        font-size: 9px;
        padding: 4px 3px;
        height: 65px; /* ⬅️ HAUTEUR FIXE */
        max-height: 65px;
    }

    .guess-cell img.player {
        width: 24px;
        height: 24px;
    }

    .guess-cell img.logo {
        width: 18px;
        height: 18px;
    }

    .guess-cell .poste-badge {
        font-size: 8px;
        padding: 1px 3px;
    }

    .guess-cell .postes-container {
        max-height: 25px;
    }

    .guess-cell small {
        font-size: 8px;
    }
}

.guess-cell.postes {
  max-height: 8vh;
  overflow-y: auto;
  scrollbar-width: thin;          /* Firefox */
}

.guess-cell.postes::-webkit-scrollbar {
  width: 4px;
}

.guess-cell.postes::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}