/**
 * who-is-moved.css — Jeu "Qui a bougé ?"
 * Grille, cellules, overlay d'animation, états feedback
 */

/* ── Grille ─────────────────────────────────────────────────────────────────── */
.wim-grid {
    display: grid;
    gap: .65rem;
    max-width: 440px;
    margin: 0 auto 1.25rem;
}

/* ── Cellule ────────────────────────────────────────────────────────────────── */
.wim-cell {
    aspect-ratio: 1 / 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 2px solid var(--line, #e5e7eb);
    background: var(--surface, #fff);
    font-size: 2.1rem;
    padding: 0;
    cursor: pointer;
    user-select: none;
    position: relative;
    /* PAS de overflow:hidden — nécessaire pour l'animation overlay */
    transition: border-color .18s, background .18s, transform .14s;
}

.wim-cell:hover:not(:disabled) {
    border-color: #6366f1;
    background: #f0f1ff;
    transform: scale(1.06);
}

.wim-cell:focus-visible {
    outline: 3px solid #6366f1;
    outline-offset: 3px;
}

.wim-cell:disabled { cursor: default; }

.wim-cell--idle { opacity: .5; }

/* ── Réponse correcte ───────────────────────────────────────────────────────── */
.wim-cell--correct {
    border-color: #10b981 !important;
    background: #ecfdf5 !important;
    animation: wim-correct-pop .5s ease;
}

/* ── Mauvaise réponse ───────────────────────────────────────────────────────── */
.wim-cell--wrong {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
    animation: wim-shake .4s ease;
}

/* ── Indice (révèle la bonne réponse après erreur) ──────────────────────────── */
.wim-cell--hint {
    border-color: #f59e0b !important;
    background: #fffbeb !important;
    animation: wim-correct-pop .5s ease .08s both;
}

/* ── Emoji ──────────────────────────────────────────────────────────────────── */
.wim-emoji {
    font-size: inherit;
    line-height: 1;
    pointer-events: none;
    transition: opacity .15s;
    display: block;
}

/* ── Overlay d'animation FLIP ───────────────────────────────────────────────── */
/* Div flottant (fixed) qui glisse visuellement entre deux cellules */
.wim-anim-overlay {
    position: fixed;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    border-radius: 14px;
    border: 2px solid var(--line, #e5e7eb);
    background: var(--surface, #fff);
    pointer-events: none;
    /* box-shadow animée depuis JS pour le "mover" */
}

/* ── Label de phase ─────────────────────────────────────────────────────────── */
.wim-phase-label {
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    min-height: 1.5rem;
    color: var(--text, #111);
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
    .wim-cell              { font-size: 1.5rem;  border-radius: 10px; }
    .wim-grid              { gap: .4rem; }
    .wim-anim-overlay      { font-size: 1.5rem;  border-radius: 10px; }
}

/* ── Animations ─────────────────────────────────────────────────────────────── */
@keyframes wim-correct-pop {
    0%   { transform: scale(1);    }
    40%  { transform: scale(1.15); }
    70%  { transform: scale(.96);  }
    100% { transform: scale(1);    }
}

@keyframes wim-shake {
    0%, 100% { transform: translateX(0);    }
    25%       { transform: translateX(-7px); }
    75%       { transform: translateX(7px);  }
}