@import url('https://fonts.cdnfonts.com/css/star-wars');

body {
    background-color: #0a0a0a;
    /* Effet étoilé subtil */
    background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px);
    background-size: 550px 550px;
    color: white;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

h1 {
    font-family:  sans-serif;
    color: white;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 5vw, 3rem); /* Taille adaptative */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    margin: 40px 0;
}

/* Conteneur principal plein écran */
main {
    width: 90%;
    max-width: 95vw; /* Occupe 95% de la largeur totale */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.suggestions-list div {
    padding: 15px 20px; /* Augmente l'espace interne pour des lignes plus hautes */
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    gap: 20px;          /* Augmente l'espace entre l'image et le nom */
    cursor: pointer;
    font-size: 1.3rem;  /* Augmente la taille du texte du nom de l'unité */
    color: #eee;
}

/* Grille de résultats Adaptative */
#guesses-container {
    width: 95%; /* Augmenté pour donner plus d'espace horizontal */
    margin: 20px auto 0 auto; /* Centré horizontalement */
}

.guess-row {
    display: grid;
    /* PASSAGE À 7 COLONNES : repeat(7, 1fr) */
    grid-template-columns: repeat(7, 1fr); 
    gap: 8px; /* Espace fixe réduit pour gagner de la place */
    margin-bottom: 15px;
    width: 100%; /* Utilise tout l'espace du conteneur parent */
    animation: slideIn 0.5s ease-out;
    align-items: start; /* Aligne le haut des cellules sur la même ligne */
}

.header-cell {
    color: white;
    font-weight: bold;
    text-align: center;
    /* Taille de police réduite pour que "Year of appearance" tienne */
    font-size: clamp(0.6rem, 1vw, 0.85rem); 
    padding-bottom: 10px;
    border-bottom: 2px solid rgb(255, 255, 255);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px; /* Force la même hauteur pour tous les titres */
}

.cell {
    width: 100%; /* Doit être à 100% pour remplir sa colonne de la grille */
    aspect-ratio: 1 / 1; 
    min-height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid #444;
    border-radius: 8px; /* Arrondi légèrement réduit pour gagner de l'espace interne */
    background: rgba(0, 0, 0, 0.7);
    font-size: clamp(0.55rem, 0.9vw, 0.8rem);
    transition: all 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    word-break: break-word; 
    padding: 4px;
    box-sizing: border-box; /* Important pour que le padding ne casse pas la largeur */
}

/* Images dans les cellules */
.row-img {
    width: clamp(25px, 3.5vw, 50px); /* Taille légèrement réduite */
    height: clamp(25px, 3.5vw, 50px);
    border-radius: 50%;
    border: 1px solid white;
    margin-bottom: 4px;
    object-fit: cover;
}

/* Ajustement spécifique pour les écrans mobiles */
@media (max-width: 768px) {
    .guess-row {
        gap: 4px;
    }
    .cell {
        min-height: 70px;
        border-width: 1px;
    }
    .header-cell {
        letter-spacing: 0;
        font-size: 0.55rem;
    }
}

/* Barre de recherche */
#search-container {
    margin: 40px 0 40px 0;
    width: 90%;
    max-width: 90%;
}

#unit-input {
    width: 90%;
    padding: 15px 25px;
    border-radius: 50px;
    border: 2px solid white;
    background: rgba(255, 255, 255, 0.95);
    color: #121212;
    font-size: 1.1rem;
    box-shadow: 0 0 20px rgba(255, 232, 31, 0.2);
}

/* Couleurs de validation */
.correct { 
    border-color: #2e7d32 !important;
    box-shadow: 0 0 15px rgba(46, 125, 50, 0.4), inset 0 0 10px rgba(46, 125, 50, 0.2);
    background: rgba(46, 125, 50, 0.15);
}

.wrong { 
    border-color: #c62828 !important;
    background: rgba(198, 40, 40, 0.1);
}

.partial { 
    border-color: #f9a825 !important;
    box-shadow: 0 0 15px rgba(249, 168, 37, 0.3);
    background: rgba(249, 168, 37, 0.15);
}

/* Responsive : Si l'écran est trop petit (mobile), on autorise le défilement */
@media (max-width: 768px) {
    #guesses-container {
        overflow-x: auto;
        padding-bottom: 20px;
    }
    .guess-row {
        grid-template-columns: repeat(6, 140px); /* Taille minimum des colonnes sur mobile */
        width: max-content;
    }
}

/* Grille de départ */
.units-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 15px;
    padding: 20px;
    width: 90%;
}

.unit-card-mini {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
}
.unit-card-mini:hover { transform: scale(1.1); }
.unit-card-mini img { width: 90%; height: 90%; object-fit: cover; }

.hidden { display: none !important; }

/* Pop-up de victoire améliorée */
/* Positionnement fixe pour que la modal soit toujours au centre de l'écran */
.modal {
    position: fixed; /* Reste fixé à l'écran même en scrollant */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Fond sombre */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Par-dessus tout le reste */
}

/* On s'assure que le contenu est bien visible */
.modal-content {
    position: relative;
    max-height: 90vh; /* Évite que la modal soit plus grande que l'écran */
    overflow-y: auto; /* Permet de scroller à l'intérieur si besoin */
}

.modal-content {
    background: #1a1a1a;
    padding: 30px;
    border: 3px solid white;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 0 50px rgb(255, 255, 255);
    max-width: 500px;
    width: 90%;
    color: white;
}

.modal-content h2 {
    font-family: sans-serif;
    color: white;
    margin-bottom: 10px;
}

#victory-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid white;
    margin: 15px 0;
    object-fit: cover;
}

.victory-details {
    text-align: left;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 10px;
    margin: 20px 0;
    border: 1px solid rgb(255, 255, 255);
}

.victory-details p {
    margin: 8px 0;
    font-size: 0.95rem;
}

.victory-details span {
    color: white;
    font-weight: bold;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.unit-card-mini {
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 232, 31, 0);
}

.unit-card-mini:hover {
    transform: scale(1.15);
    z-index: 10;
    border-color: white;
    box-shadow: 0 0 15px rgba(255, 232, 31, 0.4);
}

.help-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 15px 0;
}

.hint-btn {
    background: #005577;
    color: #00d4ff;
    border: 1px solid #00d4ff;
}

.giveup-btn {
    background: #550000;
    color: #ff4444;
    border: 1px solid #ff4444;
}

.hint-btn:hover, .giveup-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

/* Bouton Info flottant */
#info-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 35px;
    height: 35px;
    background: rgba(0, 212, 255, 0.2);
    border: 2px solid #00d4ff;
    color: #00d4ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
}

/* Style spécifique pour le contenu d'aide */
.help-content {
    max-width: 500px !important;
    text-align: left;
    border: 2px solid #FFE81F;
}

.help-content h2 { color: #FFE81F; text-align: center; margin-bottom: 20px; }

#help-timer-container {
    text-align: center;
    background: rgba(255, 232, 31, 0.1);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
}

#help-timer { font-size: 1.5rem; font-weight: bold; color: #FFE81F; }

.help-section h3 {
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
    color: #00d4ff;
    font-size: 1rem;
}

.properties-list { list-style: none; padding: 0; font-size: 0.9rem; }
.properties-list li { margin: 8px 0; color: #ddd; }
.properties-list strong { color: #fff; }

.feedback-grid { display: flex; justify-content: space-around; margin-top: 15px; }
.feedback-item { text-align: center; font-size: 0.8rem; }
.feedback-item .box { width: 30px; height: 30px; margin: 0 auto 5px; border-radius: 4px; }

.close-help {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 24px;
    cursor: pointer;
    color: #888;
}