/* ================================
   MOTS MÊLÉS - Styles spécifiques
   ================================ */

/* CONTAINER */
.container-motsmeles {
    max-width: 1200px;
    margin: 10px auto;
    padding: 0 15px;
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 15px;
    align-items: start;
    position: relative;
}

/* COLONNE DROITE MOTS */
.colonne-droite-motsmeles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* SCORES */
.scores-motsmeles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

#box-mots-trouves  { background: #764ba2; }
#box-temps-motsmeles { background: #4a90d9; }

/* THÈME */
.theme-motsmeles {
    background: white;
    border-radius: 10px;
    padding: 8px 12px;
    text-align: center;
    font-weight: 700;
    font-size: 0.9em;
    color: #232526;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    margin-top: 2px;
}

/* LISTE DES MOTS */
.liste-mots-container {
    background: white;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.liste-mots {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mot-liste-item {
    font-size: 0.82em;
    font-weight: 600;
    color: #232526;
    padding: 3px 6px;
    border-radius: 5px;
    transition: all 0.3s;
    letter-spacing: 0.03em;
}

.mot-liste-item.mot-barre {
    text-decoration: line-through;
    color: #5ced8c;
    background: #f0fff4;
}

.mots-caches-label {
    font-size: 0.82em;
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 8px 0;
}

/* COLONNE CENTRALE */
.colonne-centrale-motsmeles {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
    overflow: hidden;
}

/* GRILLE */
.grille-motsmeles {
    display: grid;
    width: 100%;
    max-width: min(620px, calc(100vh - 150px));
    margin: 0 auto;
    gap: 2px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

/* CELLULE */
.cell-motsmeles {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.55em, 1.8vw, 0.95em);
    font-weight: 700;
    color: #232526;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    letter-spacing: 0.02em;
}

.cell-motsmeles.selection-active {
    background: #764ba2;
    color: white;
    transform: scale(1.05);
    z-index: 1;
    position: relative;
}

.cell-motsmeles.mot-trouve {
    background: #5ced8c;
    color: #232526;
    box-shadow: 0 1px 3px rgba(92,237,140,0.4);
}

/* Animation quand un mot est trouvé */
@keyframes mot-decouvert {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.cell-motsmeles.mot-trouve {
    animation: mot-decouvert 0.35s ease;
}

/* BOUTON AIDE PUB */
.btn-aide-pub {
    width: 100%;
    background: linear-gradient(135deg, #f093fb, #764ba2);
    color: white;
    border: none;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 3px 10px rgba(118,75,162,0.3);
    transition: opacity 0.2s, transform 0.15s;
    margin-top: 4px;
}

.btn-aide-pub:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Cellule révélée par pub — couleur distincte (orange) */
.cell-motsmeles.mot-aide {
    background: #ff9800;
    color: white;
    box-shadow: 0 1px 3px rgba(255,152,0,0.4);
}

/* Mot dans la liste révélé par pub */
.mot-liste-item.mot-aide-liste {
    text-decoration: line-through;
    color: #ff9800;
    background: #fff8f0;
}

/* CLASSEMENT EN BAS */
.classement-bas {
    max-width: 1200px;
    margin: 15px auto;
    padding: 15px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.classement-bas h3 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 1em;
    color: #232526;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .container-motsmeles {
        grid-template-columns: 180px 1fr 180px;
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .container-motsmeles {
        grid-template-columns: 1fr;
    }

    .colonne-droite-motsmeles {
        order: 2;
    }

    .grille-motsmeles {
        max-width: min(560px, 75vh);
        gap: 1px;
    }

    .cell-motsmeles {
        border-radius: 3px;
    }
}

@media (max-width: 480px) {
    .cell-motsmeles {
        font-size: clamp(0.45em, 3.5vw, 0.75em);
    }
}