body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0; /* Couleur de fond générale */
    margin: 0;
    padding: 20px; 
    box-sizing: border-box; 
}

#puzzle-container {
    display: grid;
    grid-template-columns: repeat(2, auto); /* 2 colonnes pour la disposition A/B, C/D, E/F */
    gap: 25px; /* Espace entre les unités de statues */
    padding: 20px;
    background-color: #cccccc; /* Fond gris pour la zone du puzzle, comme sur l'image de référence */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Ombre subtile pour la profondeur */
}

.statue-unit {
    display: grid;
    /* Taille des cellules d'orientation et de la case centrale (input) */
    grid-template-columns: repeat(3, 45px); 
    grid-template-rows: repeat(3, 45px);   
    gap: 3px; /* Petit espace entre les cellules */
    align-items: center;
    justify-items: center;
}

.orientation-cell {
    width: 100%;
    height: 100%;
    background-color: #aaaaaa; /* Cases grises pour l'orientation */
    border: 1px solid #777777;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
    border-radius: 4px; /* Coins légèrement arrondis */
}

.orientation-cell:hover {
    background-color: #bbbbbb;
    border-color: #888888;
}

.orientation-cell:active {
    transform: scale(0.95); /* Effet de clic */
}

.orientation-cell.selected {
    background-color: #707070; /* Gris plus foncé lorsque sélectionné ("coché") */
    border: 2px solid #333333; /* Bordure plus marquée */
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2); /* Ombre intérieure pour effet de profondeur */
}

/* Conteneur pour la case de saisie centrale */
.statue-input-container {
    grid-column: 2 / 3; /* Placer dans la colonne du milieu */
    grid-row: 2 / 3;    /* Placer dans la rangée du milieu */
    width: 100%;
    height: 100%;
    display: flex; /* Utilisé pour s'assurer que l'input remplit bien le conteneur */
}

.statue-name-input {
    width: 100%;
    height: 100%;
    box-sizing: border-box; /* S'assure que padding et border sont inclus dans la taille totale */
    background-color: #00FFFF; /* Cyan ("cases bleues"), comme sur l'image */
    border: 1px solid #00AAAA; /* Bordure cyan plus foncée */
    text-align: center;
    font-size: 1.1em; /* Taille de police légèrement augmentée */
    font-weight: bold;
    color: #1A237E; /* Couleur de texte foncée pour une bonne lisibilité sur fond cyan */
    padding: 0; 
    border-radius: 4px; /* Correspondre aux cellules d'orientation */
    outline: none; /* Supprimer l'outline par défaut au focus */
}

.statue-name-input:focus {
    border-color: #007777; /* Bordure plus foncée au focus */
    box-shadow: 0 0 5px rgba(0, 170, 170, 0.5); /* Ombre discrète au focus */
}

.statue-name-input::placeholder {
    color: #007777; /* Couleur du texte de placeholder */
    opacity: 0.9;
    font-weight: bold;
}