/* ============================================
   💣 BOMBANIME — FEUILLE DE STYLE DU MODE
   ============================================
   L'ordre du fichier est l'ordre de la cascade : ne pas déplacer un bloc sans
   vérifier ce qu'il écrasait. Sommaire, dans l'ordre :

     LE PLATEAU · CONTRÔLE DU SON · ÉCRAN DE VICTOIRE · CERCLE DE JOUEURS
     LA PASTILLE DU JOUEUR · ANIMATION SUCCÈS · FISSURE · ÉCLATEMENT
     ALPHABET COMPLÉTÉ · LE CADENAS · LA BOMBE · CHAMP DE SAISIE
     PANNEAU ALPHABET · PANNEAU DÉFIS · GAIN DE VIE · BARRE MOBILE
     PROPOSER UN PERSONNAGE · MODALES MOBILES · RESPONSIVE · MEDIA QUERIES
     FLASH DU PERSONNAGE
   ============================================ */

/* ============================================
   LE PLATEAU
   ============================================ */

/* Container principal */
.bombanime-game-container {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a0f;
    z-index: 50;
}

/* ============================================
   CONTRÔLE DU SON
   ============================================ */
.sound-control {
    position: fixed;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    z-index: 100;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    animation: soundControlAppear 0.3s ease-out;
}

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

.sound-control:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.2);
}

.sound-control.muted {
    opacity: 0.5;
}

.sound-btn {
    width: 28px;
    height: 28px;
    padding: 5px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sound-btn:hover {
    color: #22c55e;
    transform: scale(1.1);
}

.sound-btn svg {
    width: 18px;
    height: 18px;
}

.sound-slider {
    width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sound-slider:hover {
    background: rgba(255, 255, 255, 0.3);
}

.sound-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #22c55e;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sound-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.sound-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #22c55e;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}



/* ============================================
   ÉCRAN DE FIN - WINNER SCREEN
   ============================================ */
.bombanime-winner-screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a0f;
    z-index: 100;
    animation: winner-fade-in 0.5s ease-out;
}

@keyframes winner-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.winner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
    animation: winner-content-rise 0.6s ease-out 0.2s both;
}

@keyframes winner-content-rise {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Couronne */
.winner-crown {
    animation: crown-appear 0.8s ease-out 0.3s both;
}

@keyframes crown-appear {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
    }
    50% {
        transform: scale(1.1) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.crown-svg {
    width: 80px;
    height: 80px;
    color: #f0c040;
    filter: drop-shadow(0 0 20px rgba(240, 192, 64, 0.5));
}

/* Titre */
.winner-title {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.3em;
}

/* Ligne avatar + nom */
.bombanime-winner-screen .winner-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    margin: 0;
    animation: stats-fade-in 0.5s ease-out 0.4s both;
}

.bombanime-winner-screen .bombanime-winner-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(240, 192, 64, 0.5);
    box-shadow: 0 0 20px rgba(240, 192, 64, 0.25);
    background: radial-gradient(circle at 30% 25%, #2a1f10, #120c06 70%);
    flex-shrink: 0;
}

.bombanime-winner-screen .bombanime-winner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Nom du gagnant - SPÉCIFIQUE BOMBANIME */
.bombanime-winner-screen .winner-name {
    font-size: 3rem;
    font-weight: 700;
    color: #f0c040;
    text-shadow: 0 0 20px rgba(240, 192, 64, 0.3);
    /* Reset des propriétés du gradient */
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #f0c040;
    background-clip: unset;
}

.bombanime-winner-screen .winner-name.no-winner {
    color: rgba(255, 255, 255, 0.4);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.4);
    text-shadow: none;
    font-size: 2rem;
}

/* Stats */
.winner-stats {
    display: flex;
    gap: 3rem;
    margin-top: 1rem;
    animation: stats-fade-in 0.5s ease-out 0.8s both;
}

@keyframes stats-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.winner-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.winner-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.winner-stat .stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Relancer est l'action qui prime : elle occupe sa propre ligne, le retour
   passe dessous et la suggestion se réduit à une pastille pour ne pas se
   présenter comme un troisième choix de même poids. */
.winner-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    margin-top: 2rem;
    animation: btn-fade-in 0.5s ease-out 1s both;
}

.winner-actions-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

@media (max-width: 600px) {
    .winner-actions {
        width: 100%;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
    .winner-actions .winner-replay-btn { width: 100%; }
    .winner-actions-row { width: 100%; }
    .winner-actions-row .winner-back-btn { flex: 1; }
}

/* Bouton retour */
.winner-back-btn {
    padding: 0.75rem 2.5rem;
    background: rgba(240, 192, 64, 0.1);
    border: none;
    border-radius: 25px;
    color: rgba(240, 192, 64, 0.8);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

@keyframes btn-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.winner-back-btn:hover {
    background: rgba(240, 192, 64, 0.2);
    color: #f0c040;
    transform: scale(1.05);
}

/* Proposer un personnage manquant : une pastille, pas une troisième action */
.winner-suggest-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    font-family: inherit;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.winner-suggest-btn svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

.winner-suggest-btn:hover {
    background: rgba(240, 192, 64, 0.07);
    border-color: rgba(240, 192, 64, 0.35);
    color: rgba(240, 192, 64, 0.85);
}

/* Particules de célébration */
.winner-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.winner-particles::before,
.winner-particles::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #f0c040;
    border-radius: 50%;
    animation: particle-float 3s ease-in-out infinite;
}

.winner-particles::before {
    left: 20%;
    top: 30%;
    animation-delay: 0s;
}

.winner-particles::after {
    right: 25%;
    top: 40%;
    animation-delay: 1.5s;
}

@keyframes particle-float {
    0%, 100% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }
    10% {
        opacity: 0.8;
        transform: translateY(0) scale(1);
    }
    90% {
        opacity: 0.8;
        transform: translateY(-100px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-120px) scale(0);
    }
}

/* ============================================
   CERCLE DE JOUEURS
   ============================================ */
.bombanime-circle {
    position: relative;
    width: var(--circle-size, 650px);
    height: var(--circle-size, 650px);
    flex-shrink: 0;
    margin-top: -5rem;
    /* Pas de transition au chargement - seulement pour les changements de taille en jeu */
}

/* ============================================
   STYLE HEXAGON + HEARTS BADGE
   ============================================ */
.bombanime-player-slot {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    transform: translate(-50%, -50%);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    overflow: visible;
}

/* ============================================
   ANIMATIONS D'INTRO - Début de partie
   ============================================ */
.bombanime-player-slot.intro-hidden {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
}

.bombanime-player-slot.intro-reveal {
    animation: player-dezoom 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes player-dezoom {
    0% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(1.8);
    }
    100% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ============================================
   LA PASTILLE DU JOUEUR
   Pseudo au-dessus, hexagone à double bordure, avatar, cœurs dans l'encoche
   basse droite, réponse en dessous. Chaque état (actif, c'est moi, éliminé)
   se décline sur les quatre.
   ============================================ */
.bombanime-player-slot .player-name {
    /* Hors du flux : sans ça le bloc mesurait pseudo + hexagone + réponse, et
       le translate(-50%,-50%) centrait ce total. L'hexagone tombait sous le
       point visé par la mèche, qui semblait pointer à côté du joueur. */
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.35);
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
    text-align: center;
}

.bombanime-player-slot.active .player-name {
    color: #f0c040;
}

/* Moi-même quand ce n'est PAS mon tour - jaune doré atténué */
.bombanime-player-slot.is-me .player-name {
    color: rgba(240, 192, 64, 0.55);
}

/* Moi-même quand c'est MON tour - jaune doré vif */
.bombanime-player-slot.active.is-me .player-name {
    color: #f0c040;
}

.player-hex-container {
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-hex {
    width: 70px;
    height: 70px;
    position: relative;
    overflow: visible;
}

.player-hex svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 6px rgba(240, 192, 64, 0.3));
    transition: filter 0.2s ease;
}

.player-hex svg polygon {
    fill: #101018;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 2;
    transition: all 0.2s ease;
}

.bombanime-player-slot.active .player-hex svg {
    filter: drop-shadow(0 0 10px rgba(240, 192, 64, 0.5));
}

.bombanime-player-slot.active .player-hex svg polygon {
    stroke: #f0c040;
}

/* Moi-même quand ce n'est PAS mon tour - hexagone jaune doré atténué */
.bombanime-player-slot.is-me .player-hex svg {
    filter: drop-shadow(0 0 6px rgba(240, 192, 64, 0.2));
}

.bombanime-player-slot.is-me .player-hex svg polygon {
    stroke: rgba(240, 192, 64, 0.5);
}

/* Moi-même quand c'est MON tour - hexagone jaune doré vif */
.bombanime-player-slot.active.is-me .player-hex svg {
    filter: drop-shadow(0 0 10px rgba(240, 192, 64, 0.5));
}

.bombanime-player-slot.active.is-me .player-hex svg polygon {
    stroke: #f0c040;
}

.bombanime-player-slot.eliminated .player-hex svg {
    filter: none;
}

.bombanime-player-slot.eliminated .player-hex svg polygon {
    opacity: 0.3;
    stroke: rgba(255,255,255,0.03);
}

/* ── Double bordure ──
   Un second hexagone, concentrique et 18 % plus large. Il a son propre SVG :
   agrandir le viewBox du premier aurait déplacé l'avatar et tous les effets
   calés sur ses pourcentages. Chaque règle porte donc .hex-anneau, sans quoi
   les sélecteurs d'état de l'hexagone principal l'emporteraient. */
.player-hex svg.hex-anneau {
    position: absolute;
    top: -9%;
    left: -9%;
    width: 118%;
    height: 118%;
    overflow: visible;
    pointer-events: none;
}

.bombanime-player-slot .player-hex svg.hex-anneau { filter: none; }

.player-hex svg.hex-anneau polygon {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 1.6;
    transition: stroke 0.25s ease;
}

.bombanime-player-slot.active .player-hex svg.hex-anneau polygon {
    stroke: rgba(240, 192, 64, 0.45);
}

.bombanime-player-slot.is-me .player-hex svg.hex-anneau polygon {
    stroke: rgba(240, 192, 64, 0.22);
}

.bombanime-player-slot.active.is-me .player-hex svg.hex-anneau polygon {
    stroke: rgba(240, 192, 64, 0.55);
}

.bombanime-player-slot.eliminated .player-hex svg.hex-anneau polygon {
    stroke: rgba(255, 255, 255, 0.02);
}

/* Un anneau intact autour d'un hexagone fissuré ferait lire la pastille comme
   indemne — et il survivrait à l'élimination en contour flottant. Il accuse
   donc le coup, sauf pendant le tour du joueur : là, l'or prime. */
.bombanime-player-slot.cracked:not(.active) .player-hex svg.hex-anneau polygon {
    stroke: rgba(255, 255, 255, 0.05);
}

.bombanime-player-slot.shattering .player-hex svg.hex-anneau {
    animation: anneau-se-defait 0.5s ease-out forwards;
}

@keyframes anneau-se-defait {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.35); }
}

.player-avatar {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    width: 72%;
    height: 72%;
    border-radius: 50%;
    object-fit: cover;
    transition: all 0.2s ease;
    filter: grayscale(40%) brightness(0.65);
    opacity: 0.55;
}

.bombanime-player-slot.active .player-avatar {
    filter: grayscale(0%) brightness(1.1);
    box-shadow: 0 0 15px rgba(240, 192, 64, 0.4);
    opacity: 1;
}

/* Moi-même quand ce n'est PAS mon tour - avatar légèrement doré */
.bombanime-player-slot.is-me .player-avatar {
    filter: grayscale(0%) brightness(0.95);
    box-shadow: 0 0 10px rgba(240, 192, 64, 0.3);
    opacity: 0.8;
}

/* Moi-même quand c'est MON tour - avatar doré vif */
.bombanime-player-slot.active.is-me .player-avatar {
    filter: grayscale(0%) brightness(1.15);
    box-shadow: 0 0 20px rgba(240, 192, 64, 0.5);
    opacity: 1;
}

.bombanime-player-slot.eliminated .player-avatar {
    filter: grayscale(100%) brightness(0.4);
    opacity: 0.35;
}

/* Animation succès - avatar brille brièvement */
.bombanime-player-slot.success .player-avatar {
    filter: grayscale(0%) brightness(1.3);
    opacity: 1;
    box-shadow: 0 0 20px rgba(125, 206, 160, 0.6);
}

/* Les cœurs se rangent dans l'encoche basse droite de l'hexagone : l'axe
   vertical est pris par le pseudo au-dessus et la réponse en dessous. */
.player-lives {
    position: absolute;
    right: -8%;
    bottom: 2%;
    left: auto;
    transform: none;
    display: flex;
    gap: 3px;
    background: rgba(0, 0, 0, 0.88);
    padding: 3px 6px;
    border-radius: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    z-index: 5;
}

.player-life {
    width: 14px;
    height: 14px;
    fill: #ef4444;
    transition: all 0.2s ease;
    transform-origin: center;
}

.player-life.lost {
    fill: rgba(255,255,255,0.15);
    animation: heart-break 0.3s ease-out forwards;
}

@keyframes heart-break {
    0% {
        fill: #ef4444;
        transform: scale(1);
    }
    40% {
        fill: #ef4444;
        transform: scale(1.2);
    }
    100% {
        fill: rgba(255,255,255,0.15);
        transform: scale(1);
    }
}

/* Answer zone - Style JKLM */
.player-answer {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.25);
    background: transparent;
    padding: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
    transition: color 0.2s ease;
    max-width: 210px;
}

.bombanime-player-slot.active .player-answer {
    color: #f0c040;
    text-shadow: 0 0 10px rgba(240, 192, 64, 0.5);
}

/* ============================================
   ANIMATION SUCCÈS - Bonne réponse
   ============================================ */
.bombanime-player-slot.success .player-hex {
    animation: success-tilt-scale 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bombanime-player-slot.success .player-hex svg {
    animation: success-hex-glow 0.4s ease-out;
}

@keyframes success-tilt-scale {
    0% { transform: rotate(0deg) scale(1); }
    40% { transform: rotate(-10deg) scale(1.12); }
    100% { transform: rotate(0deg) scale(1); }
}

@keyframes success-hex-glow {
    0% { filter: drop-shadow(0 0 8px rgba(240, 192, 64, 0.4)); }
    40% { filter: drop-shadow(0 0 22px rgba(255, 215, 0, 0.95)); }
    100% { filter: drop-shadow(0 0 8px rgba(240, 192, 64, 0.4)); }
}

/* Particules de succès */
.success-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

.success-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ffd700;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.8);
}

.bombanime-player-slot.success .success-particle {
    animation: success-particle-burst 0.5s ease-out forwards;
}

@keyframes success-particle-burst {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    30% { opacity: 1; transform: translate(var(--px), var(--py)) scale(1); }
    100% { opacity: 0; transform: translate(calc(var(--px) * 1.8), calc(var(--py) * 1.8)) scale(0.3); }
}

.success-particle:nth-child(1) { top: 50%; left: 50%; --px: -18px; --py: -22px; animation-delay: 0ms; }
.success-particle:nth-child(2) { top: 50%; left: 50%; --px: 20px; --py: -18px; animation-delay: 50ms; }
.success-particle:nth-child(3) { top: 50%; left: 50%; --px: -22px; --py: 12px; animation-delay: 100ms; }
.success-particle:nth-child(4) { top: 50%; left: 50%; --px: 18px; --py: 15px; animation-delay: 75ms; }

/* Already used - shake avatar + cadenas */
.bombanime-player-slot.already-used {
    animation: avatar-shake 0.4s ease;
}

/* Shake error - nom invalide (visible par tous) */
.bombanime-player-slot.shake-error {
    animation: avatar-shake 0.4s ease;
}

/* 🆕 Explosion - perte de vie (shake sur le joueur) */
.bombanime-player-slot.exploding {
    animation: explode-shake 0.25s ease;
}

@keyframes avatar-shake {
    0%, 100% { transform: translate(-50%, -50%) translateX(0); }
    15% { transform: translate(-50%, -50%) translateX(-6px); }
    30% { transform: translate(-50%, -50%) translateX(6px); }
    45% { transform: translate(-50%, -50%) translateX(-5px); }
    60% { transform: translate(-50%, -50%) translateX(5px); }
    75% { transform: translate(-50%, -50%) translateX(-3px); }
    90% { transform: translate(-50%, -50%) translateX(3px); }
}

/* Shake plus intense pour l'explosion */
@keyframes explode-shake {
    0%, 100% { transform: translate(-50%, -50%); }
    10% { transform: translate(-58%, -50%); }
    20% { transform: translate(-42%, -50%); }
    30% { transform: translate(-56%, -44%); }
    40% { transform: translate(-44%, -56%); }
    50% { transform: translate(-50%, -42%); }
    60% { transform: translate(-56%, -50%); }
    70% { transform: translate(-44%, -50%); }
    80% { transform: translate(-50%, -56%); }
    90% { transform: translate(-50%, -44%); }
}

/* ============================================
   💥 BOMBANIME - CRACK EFFECT (dernière vie)
   ============================================ */
.crack-overlay {
    position: absolute; inset: 0; z-index: 10; pointer-events: none;
    clip-path: polygon(50% 3%, 97% 25%, 97% 75%, 50% 97%, 3% 75%, 3% 25%);
    opacity: 0; transition: opacity 0.12s ease-out;
}
.bombanime-player-slot.cracked .crack-overlay { opacity: 1; }
.crack-overlay svg { width: 100%; height: 100%; position: absolute; inset: 0; filter: none !important; }
.crack-overlay .crack-line {
    stroke: rgba(255,255,255,0.25); stroke-linecap: round; stroke-linejoin: round;
    fill: none; filter: drop-shadow(0 0 2px rgba(255,255,255,0.15));
}
.crack-vignette {
    position: absolute; inset: 0; pointer-events: none; z-index: 5;
    clip-path: polygon(50% 3%, 97% 25%, 97% 75%, 50% 97%, 3% 75%, 3% 25%);
    background: radial-gradient(ellipse at center, transparent 40%, rgba(180,180,200,0.1) 100%);
    opacity: 0; transition: opacity 0.5s ease;
}
.bombanime-player-slot.cracked .crack-vignette { opacity: 1; }

/* Cracké + pas son tour = grisé mais fissures visibles */
.bombanime-player-slot.cracked:not(.active) .player-avatar {
    animation: crack-pulse-dim 2s ease-in-out infinite;
}
@keyframes crack-pulse-dim {
    0%, 100% { filter: grayscale(30%) brightness(0.7) saturate(0.8); opacity: 0.6; }
    50% { filter: grayscale(40%) brightness(0.55) saturate(0.6); opacity: 0.5; }
}

/* Cracké + tour actif */
.bombanime-player-slot.cracked.active .player-avatar {
    animation: crack-pulse-active 2s ease-in-out infinite;
}
@keyframes crack-pulse-active {
    0%, 100% { filter: brightness(1.05) saturate(0.95); opacity: 1; }
    50% { filter: brightness(0.85) saturate(0.8); opacity: 0.9; }
}

/* Cracké + c'est moi mais pas mon tour */
.bombanime-player-slot.cracked.is-me:not(.active) .player-avatar {
    animation: crack-pulse-me 2s ease-in-out infinite;
}
@keyframes crack-pulse-me {
    0%, 100% { filter: grayscale(0%) brightness(0.9) saturate(0.9); opacity: 0.75; }
    50% { filter: grayscale(10%) brightness(0.75) saturate(0.75); opacity: 0.65; }
}

.crack-flash {
    position: absolute; inset: 0; z-index: 15; pointer-events: none;
    clip-path: polygon(50% 3%, 97% 25%, 97% 75%, 50% 97%, 3% 75%, 3% 25%);
    background: rgba(220,220,230,0.25); opacity: 0;
}
.bombanime-player-slot.crack-flash-active .crack-flash { animation: crack-flash-burst 0.35s ease-out forwards; }
@keyframes crack-flash-burst { 0% { opacity: 1; } 100% { opacity: 0; } }
.crack-ember {
    position: absolute; width: 2px; height: 2px; border-radius: 50%; opacity: 0;
    background: rgba(200,200,220,0.6); filter: blur(0.5px);
    box-shadow: 0 0 4px rgba(200,200,220,0.4); pointer-events: none; z-index: 12;
}
.bombanime-player-slot.cracked .crack-ember { animation: crack-ember-float 1.5s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes crack-ember-float {
    0% { opacity: 0; transform: translate(0,0) scale(1); }
    20% { opacity: 0.8; }
    100% { opacity: 0; transform: translate(var(--tx,5px), var(--ty,-15px)) scale(0); }
}

/* ============================================
   💀 BOMBANIME - SHATTER EFFECT (élimination)
   ============================================ */
.shatter-container { position: absolute; inset: -10px; z-index: 30; pointer-events: none; perspective: 600px; overflow: visible; }
.shatter-shard {
    position: absolute; opacity: 0; transform-origin: center; will-change: transform, opacity;
    background: linear-gradient(135deg, #2a2a3a, #1a1a28);
    border: 0.5px solid rgba(255,60,40,0.15); box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.bombanime-player-slot.shattering .shatter-shard { animation: shard-fly var(--dur,1.2s) cubic-bezier(0.22,0.61,0.36,1) forwards; animation-delay: var(--sd,0s); }
@keyframes shard-fly {
    0% { opacity: 1; transform: translate(0,0) rotate(0) scale(1); }
    15% { opacity: 1; transform: translate(calc(var(--sx,0)*0.2), calc(var(--sy,0)*0.2)) rotate(calc(var(--sr,0)*0.15)) scale(1.05); }
    100% { opacity: 0; transform: translate(var(--sx,30px), var(--sy,30px)) rotate(var(--sr,45deg)) scale(0.3); }
}
.shatter-flash {
    position: absolute; inset: -20px; border-radius: 50%; opacity: 0; z-index: 35; pointer-events: none;
    background: radial-gradient(circle, rgba(255,120,60,0.6) 0%, transparent 70%);
}
.bombanime-player-slot.shattering .shatter-flash { animation: shatter-flash-burst 0.5s ease-out forwards; }
@keyframes shatter-flash-burst { 0% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(2.2); } }
.shatter-ring {
    position: absolute; inset: -4px; border: 2px solid rgba(255,80,40,0.5);
    border-radius: 50%; opacity: 0; z-index: 32; pointer-events: none;
}
.bombanime-player-slot.shattering .shatter-ring { animation: shatter-ring-expand 0.7s ease-out forwards; animation-delay: var(--rd,0s); }
@keyframes shatter-ring-expand { 0% { opacity: 0.8; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.6); } }
.shatter-debris {
    position: absolute; width: 3px; height: 3px; border-radius: 50%; opacity: 0;
    background: rgba(255,100,50,0.8); pointer-events: none;
    box-shadow: 0 0 4px rgba(255,80,40,0.5); z-index: 33;
}
.bombanime-player-slot.shattering .shatter-debris { animation: shatter-debris-rise 2s ease-out forwards; animation-delay: var(--dd,0.3s); }
@keyframes shatter-debris-rise {
    0% { opacity: 0; transform: translate(0,0) scale(1); }
    15% { opacity: 0.8; }
    100% { opacity: 0; transform: translate(var(--dx,10px), var(--dy,-40px)) scale(0); }
}

/* Shatter: forcer la visibilité même quand éliminé */
.bombanime-player-slot.shattering { z-index: 50; overflow: visible; }
.bombanime-player-slot.shattering .player-hex-container { overflow: visible; }
.bombanime-player-slot.shattering .player-hex { overflow: visible; }

/* ============================================
   ALPHABET COMPLÉTÉ
   Le joueur a placé ses 26 lettres : il gagne une vie.
   ============================================ */
.bombanime-player-slot.alphabet-complete {
    z-index: 100;
}

/* Utiliser l'animation de succès (tilt-scale) */
.bombanime-player-slot.alphabet-complete .player-hex {
    animation: success-tilt-scale 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bombanime-player-slot.alphabet-complete .player-hex svg {
    animation: success-hex-glow 0.5s ease-out;
}

/* Pas de changement de stroke vert, garder la couleur dorée */
.bombanime-player-slot.alphabet-complete .player-hex svg polygon {
    stroke: #f0c040;
}

.bombanime-player-slot.alphabet-complete .player-avatar {
    filter: grayscale(0%) brightness(1.1);
    box-shadow: 0 0 15px rgba(240, 192, 64, 0.5);
}

.bombanime-player-slot.alphabet-complete .player-name {
    color: #f0c040;
}

/* Particules dorées ACCENTUÉES pour alphabet complet */
.alphabet-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

.alphabet-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #ffd700;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 12px rgba(255, 215, 0, 1), 0 0 25px rgba(255, 200, 50, 0.8);
}

.bombanime-player-slot.alphabet-complete .alphabet-particle {
    animation: alphabet-particle-float 0.8s ease-out forwards;
}

@keyframes alphabet-particle-float {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    20% { opacity: 1; transform: translate(var(--px), var(--py)) scale(1.8); }
    100% { opacity: 0; transform: translate(calc(var(--px) * 2.8), calc(var(--py) * 2.8 - 20px)) scale(0.3); }
}

.alphabet-particle:nth-child(1) { top: 50%; left: 50%; --px: -28px; --py: -32px; animation-delay: 0ms; }
.alphabet-particle:nth-child(2) { top: 50%; left: 50%; --px: 30px; --py: -28px; animation-delay: 40ms; }
.alphabet-particle:nth-child(3) { top: 50%; left: 50%; --px: -32px; --py: 20px; animation-delay: 80ms; }
.alphabet-particle:nth-child(4) { top: 50%; left: 50%; --px: 28px; --py: 25px; animation-delay: 60ms; }
.alphabet-particle:nth-child(5) { top: 50%; left: 50%; --px: 0px; --py: -38px; animation-delay: 20ms; }
.alphabet-particle:nth-child(6) { top: 50%; left: 50%; --px: -38px; --py: -10px; animation-delay: 100ms; }

/* ============================================
   LE CADENAS
   Signale un personnage déjà cité par quelqu'un.
   ============================================ */
.player-lock {
    position: absolute;
    /* Deux pixels de plus vers l'extérieur : il mordait sur la pastille */
    right: -40px;
    top: 50%;
    transform: translateY(-50%) rotate(8deg);
    opacity: 0;
    pointer-events: none;
    color: #888888;
}

.player-lock svg {
    width: 24px;
    height: 24px;
    fill: #888888;
    stroke: #aaaaaa;
    filter: drop-shadow(0 0 4px rgba(150, 150, 150, 0.5));
}

.player-lock.show {
    animation: lock-popup 0.6s ease-out forwards;
}

@keyframes lock-popup {
    0% { opacity: 0; transform: translateY(-40%) rotate(8deg); }
    25% { opacity: 1; transform: translateY(-50%) rotate(8deg); }
    65% { opacity: 1; transform: translateY(-55%) rotate(8deg); }
    100% { opacity: 0; transform: translateY(-60%) rotate(8deg); }
}

/* ============================================
   BOMBE BOMBANIME - REDESIGN
   ============================================ */
.bomb-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.bomb-wrapper {
    position: relative;
}

.bomb-body-wrap {
    position: relative;
    width: var(--bomb-size, 60px);
    height: var(--bomb-size, 60px);
}

.bomb-body {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    transition: background 0.5s, box-shadow 0.5s;
}

.bomb-body::after {
    content: '';
    position: absolute;
    top: 14%;
    left: 22%;
    width: 28%;
    height: 16%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.15), transparent);
    border-radius: 50%;
    transform: rotate(-15deg);
}

.bomb-cracks {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s;
}

.bomb-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    pointer-events: none;
    z-index: 1;
}

.fuse-pivot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
    transform: rotate(-90deg);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
}

.fuse-inner {
    display: flex;
    align-items: center;
    margin-left: calc(var(--bomb-size, 60px) * 0.47);
    transform: translateY(-50%);
}

.fuse-socle {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(to bottom, #888, #555, #888);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    flex-shrink: 0;
    transition: background 0.4s, border-color 0.4s;
}

.fuse-wave-wrap {
    width: 52px;
    height: 12px;
}

.fuse-wave-svg {
    width: 52px;
    height: 12px;
    overflow: visible;
    display: block;
}

.fuse-wave-svg path {
    stroke: #aaa;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    transition: stroke 0.4s;
}

.fuse-spark-wrap {
    position: relative;
    flex-shrink: 0;
    margin-left: -2px;
}

.fuse-spark {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: width 0.3s, height 0.3s, background 0.3s, box-shadow 0.3s;
}

.mini-sparks {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
}

.mini-s {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    opacity: 0;
}

.mini-s:nth-child(1) { --mx: -8px; --my: -12px; animation-delay: 0s; }
.mini-s:nth-child(2) { --mx: 6px; --my: -14px; animation-delay: 0.15s; }
.mini-s:nth-child(3) { --mx: -5px; --my: 10px; animation-delay: 0.3s; }
.mini-s:nth-child(4) { --mx: 10px; --my: 8px; animation-delay: 0.45s; }

/* NORMAL */
.state-normal .bomb-body {
    background: radial-gradient(circle at 35% 30%, #4a4a4a, #222 55%, #111);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5), inset 0 0 15px rgba(255,255,255,0.04);
}
.state-normal .fuse-wave-svg path { stroke: #aaa; }
.state-normal .fuse-spark {
    background: radial-gradient(circle, #ffd700, #ff8c00 50%, transparent 70%);
    box-shadow: 0 0 10px rgba(255,200,0,0.6);
    animation: bombSparkPulse 1s ease-in-out infinite;
}
.state-normal .mini-s { display: none; }
.state-normal .bomb-cracks { opacity: 0; }
.state-normal .bomb-pulse { border-color: transparent; }

/* WARNING */
.state-warning .bomb-body {
    background: radial-gradient(circle at 35% 30%, #5a4020, #2d1a08 55%, #1a0f00);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5), 0 0 20px rgba(255,150,0,0.15);
    animation: bombShakeWarn 0.35s ease-in-out infinite;
}
.state-warning .fuse-wave-svg path { stroke: #cc9944; }
.state-warning .fuse-socle {
    background: linear-gradient(to bottom, #996633, #664422, #996633);
    border-color: rgba(255,150,0,0.1);
    animation: bombSocleShakeWarn 0.4s ease-in-out infinite;
}
.state-warning .fuse-spark {
    width: 15px; height: 15px;
    background: radial-gradient(circle, #ffaa00, #ff6600 50%, transparent 70%);
    box-shadow: 0 0 14px rgba(255,150,0,0.7);
    animation: bombSparkPulse 0.6s ease-in-out infinite;
}
.state-warning .mini-s {
    background: #ffcc00;
    box-shadow: 0 0 4px rgba(255,200,0,0.6);
    animation: bombMiniSpark 0.7s ease-out infinite;
    display: block;
}
.state-warning .bomb-cracks {
    opacity: 0.5;
    background: linear-gradient(45deg, transparent 46%, rgba(255,180,0,0.3) 47%, rgba(255,180,0,0.3) 53%, transparent 54%);
}
.state-warning .bomb-pulse {
    border-color: rgba(255,150,0,0.25);
    animation: bombPulseRing 1.5s ease-in-out infinite;
}

/* CRITICAL */
.state-critical .bomb-body {
    background: radial-gradient(circle at 35% 30%, #5a1515, #2d0808 55%, #1a0000);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5), 0 0 25px rgba(255,50,0,0.25), 0 0 50px rgba(255,0,0,0.1);
    animation: bombShakeCrit 0.12s ease-in-out infinite, bombBodyPulseCrit 0.8s ease-in-out infinite;
}
.state-critical .fuse-wave-svg path { stroke: #cc4444; }
.state-critical .fuse-socle {
    background: linear-gradient(to bottom, #993333, #662222, #993333);
    border-color: rgba(255,50,0,0.15);
    animation: bombSocleShakeCrit 0.18s ease-in-out infinite;
}
.state-critical .fuse-spark {
    width: 20px; height: 20px;
    background: radial-gradient(circle, #ff4444, #ff0000 40%, transparent 70%);
    box-shadow: 0 0 20px rgba(255,50,0,0.8);
    animation: bombSparkPulse 0.25s ease-in-out infinite;
}
.state-critical .mini-s {
    background: #ff5555;
    width: 4px; height: 4px;
    box-shadow: 0 0 6px rgba(255,60,0,0.7);
    animation: bombMiniSpark 0.4s ease-out infinite;
    display: block;
}
.state-critical .bomb-cracks {
    opacity: 1;
    background:
        linear-gradient(45deg, transparent 45%, rgba(255,80,20,0.5) 46%, rgba(255,80,20,0.5) 54%, transparent 55%),
        linear-gradient(-30deg, transparent 42%, rgba(255,60,10,0.4) 43%, rgba(255,60,10,0.4) 48%, transparent 49%),
        linear-gradient(80deg, transparent 39%, rgba(255,50,0,0.3) 40%, rgba(255,50,0,0.3) 44%, transparent 45%);
}
.state-critical .bomb-pulse {
    border-color: rgba(255,50,0,0.35);
    animation: bombPulseRing 0.8s ease-in-out infinite;
}

/* BOMB ANIMATIONS */
@keyframes bombSparkPulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.35); }
}
@keyframes bombMiniSpark {
    0% { opacity: 1; transform: translate(0) scale(1.2); }
    100% { opacity: 0; transform: translate(var(--mx), var(--my)) scale(0.4); }
}
@keyframes bombShakeWarn {
    0%, 100% { transform: translate(0); }
    50% { transform: translate(-1.5px, 1px); }
}
@keyframes bombShakeCrit {
    0%, 100% { transform: translate(0); }
    25% { transform: translate(-2.5px, 1.5px); }
    75% { transform: translate(2.5px, -1.5px); }
}
@keyframes bombSocleShakeWarn {
    0%, 100% { transform: translate(0); }
    50% { transform: translate(-0.4px, 0.3px); }
}
@keyframes bombSocleShakeCrit {
    0%, 100% { transform: translate(0); }
    25% { transform: translate(-0.6px, 0.4px); }
    75% { transform: translate(0.6px, -0.4px); }
}
@keyframes bombBodyPulseCrit {
    0%, 100% { box-shadow: 0 4px 15px rgba(0,0,0,0.5), 0 0 25px rgba(255,50,0,0.25); }
    50% { box-shadow: 0 4px 15px rgba(0,0,0,0.5), 0 0 40px rgba(255,50,0,0.4), 0 0 70px rgba(255,0,0,0.15); }
}
@keyframes bombPulseRing {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.2); }
}

/* Mobile: mèche plus courte */
@media (max-width: 768px) {
    .fuse-wave-wrap {
        width: 36px;
    }
    .fuse-wave-svg {
        width: 36px;
    }
}

@media (max-width: 480px) {
    .fuse-wave-wrap {
        width: 28px;
    }
    .fuse-wave-svg {
        width: 28px;
    }
    .fuse-socle {
        width: 8px;
        height: 8px;
    }
}

/* ============================================
   INPUT - Style minimaliste
   ============================================ */
.input-zone {
    position: fixed;
    /* 1,5 % du bas, c'était une quinzaine de pixels sur un écran de portable ;
       à 5 %, le cercle venait le frôler dès dix-sept joueurs. */
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    /* Transition pour le fade-in */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Animation intro - Input caché */
.input-zone.intro-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}

.game-input-container { 
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game-input {
    width: 420px;
    padding: 1rem 1.8rem;
    background: transparent;
    border: none;
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(255, 250, 235, 0.95);
    outline: none;
    transition: all 0.3s ease;
    text-align: center;
    text-transform: uppercase;
}

.game-input::placeholder {
    color: rgba(240, 192, 64, 0.3);
    font-weight: 400;
    font-size: 0.85rem;
}

.game-input.disabled {
    color: rgba(255, 250, 235, 0.3);
    cursor: not-allowed;
}

.game-input.disabled::placeholder {
    color: rgba(255, 250, 235, 0.15);
}

.input-underline {
    width: 60%;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1px;
    transition: all 0.3s ease;
    position: relative;
}

.input-underline.disabled {
    background: rgba(255, 255, 255, 0.05);
}

.input-underline::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 100%;
    background: rgba(240, 192, 64, 0.6);
    border-radius: 1px;
    transition: width 0.3s ease;
}

.game-input:focus + .input-underline::after {
    width: 100%;
}

.game-input.error + .input-underline {
    background: rgba(239, 68, 68, 0.5);
}

/* Shake pour personnage non reconnu */
.game-input.shake-error {
    animation: input-shake 0.4s ease;
}

@keyframes input-shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-8px); }
    30% { transform: translateX(8px); }
    45% { transform: translateX(-6px); }
    60% { transform: translateX(6px); }
    75% { transform: translateX(-4px); }
    90% { transform: translateX(4px); }
}

.feedback-message {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.feedback-message.show { 
    opacity: 1; 
    animation: feedback-pop 0.3s ease; 
}

@keyframes feedback-pop {
    0% { transform: translateX(-50%) scale(0.9) translateY(-5px); opacity: 0; }
    100% { transform: translateX(-50%) scale(1) translateY(0); opacity: 1; }
}

.feedback-message.error { 
    background: rgba(239, 68, 68, 0.15); 
    color: #f87171; 
}

.feedback-message.success { 
    background: rgba(240, 192, 64, 0.15); 
    color: #f0c040; 
}

/* ============================================
   ALPHABET PANEL - Gros cœur + Hexagones
   ============================================ */
.alphabet-panel {
    position: fixed;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1.2rem;
    background: rgba(0,0,0,0.4);
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.05);
    gap: 0.8rem;
    z-index: 100;
    /* Transition pour le slide-in */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s ease;
}

/* Animation intro - Panel hors écran à droite */
.alphabet-panel.intro-offscreen {
    transform: translateY(-50%) translateX(calc(100% + 3rem));
    opacity: 0;
}

/* Gros cœur en haut */
.alphabet-heart-main {
    position: relative;
    width: 75px;
    height: 55px;
    flex-shrink: 0;
    margin-bottom: 1.3rem;
}

.alphabet-heart-main .heart-bg {
    position: absolute;
    inset: 0;
    fill: rgba(240, 192, 64, 0.15);
}

/* Grille hexagones */
.alphabet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem 0.4rem;
    align-content: center;
}

.alphabet-letter {
    width: 46px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    /* 🔥 Inversé: lettres à trouver = dorées */
    color: #f0c040;
    background: rgba(240, 192, 64, 0.10);
    text-shadow: 0 0 6px rgba(240, 192, 64, 0.3);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    transition: all 0.3s ease;
}

.alphabet-letter.used {
    /* 🔥 Inversé: lettres trouvées = grisées */
    color: rgba(255, 255, 255, 0.15);
    background: rgba(255,255,255,0.03);
    text-shadow: none;
}

.alphabet-letter.just-added {
    animation: letter-pop 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes letter-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); color: #f0c040; background: rgba(240, 192, 64, 0.3); }
    100% { transform: scale(1); }
}

/* Dernière ligne Y-Z centrée */
.alphabet-last-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

/* ============================================
   ANIMATIONS COMPLÉTION ALPHABET
   ============================================ */

/* Animation de complétion du cœur */
@keyframes heart-complete-pulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(240, 192, 64, 0.5)); }
    15% { transform: scale(1.3); filter: drop-shadow(0 0 25px rgba(240, 192, 64, 1)); }
    30% { transform: scale(1.1); filter: drop-shadow(0 0 18px rgba(240, 192, 64, 0.8)); }
    45% { transform: scale(1.25); filter: drop-shadow(0 0 30px rgba(240, 192, 64, 1)); }
    60% { transform: scale(1.1); filter: drop-shadow(0 0 15px rgba(240, 192, 64, 0.7)); }
    75% { transform: scale(1.2); filter: drop-shadow(0 0 22px rgba(240, 192, 64, 0.9)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(240, 192, 64, 0.5)); }
}

@keyframes heart-shine {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(2.5); }
}

@keyframes sparkle {
    0% { opacity: 0; transform: translate(0, 0) scale(0); }
    50% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1); }
    100% { opacity: 0; transform: translate(calc(var(--tx) * 2), calc(var(--ty) * 2)) scale(0); }
}

.alphabet-heart-main.completing {
    animation: heart-complete-pulse 800ms ease-out forwards;
}

.alphabet-heart-main.completing::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(240, 192, 64, 0.7) 0%, transparent 70%);
    border-radius: 50%;
    animation: heart-shine 700ms ease-out forwards;
    pointer-events: none;
}

/* Sparkles sur le gros cœur */
.sparkle-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

.sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #f0c040;
    border-radius: 50%;
    opacity: 0;
}

.alphabet-heart-main.completing .sparkle {
    animation: sparkle 600ms ease-out forwards;
}

.sparkle:nth-child(1) { top: 50%; left: 50%; --tx: -30px; --ty: -25px; animation-delay: 0ms; }
.sparkle:nth-child(2) { top: 50%; left: 50%; --tx: 30px; --ty: -20px; animation-delay: 50ms; }
.sparkle:nth-child(3) { top: 50%; left: 50%; --tx: -25px; --ty: 25px; animation-delay: 100ms; }
.sparkle:nth-child(4) { top: 50%; left: 50%; --tx: 25px; --ty: 22px; animation-delay: 75ms; }
.sparkle:nth-child(5) { top: 50%; left: 50%; --tx: 0px; --ty: -35px; animation-delay: 25ms; }
.sparkle:nth-child(6) { top: 50%; left: 50%; --tx: -35px; --ty: 0px; animation-delay: 125ms; }
.sparkle:nth-child(7) { top: 50%; left: 50%; --tx: 35px; --ty: 5px; animation-delay: 100ms; }
.sparkle:nth-child(8) { top: 50%; left: 50%; --tx: 0px; --ty: 35px; animation-delay: 150ms; }

/* Message +1 VIE - Supprimé, remplacé par effet cœur amélioré */

/* Effet de remplissage du cœur amélioré */
.alphabet-heart-main .heart-fill {
    position: absolute;
    inset: 0;
    fill: #f0c040;
    transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 8px rgba(240, 192, 64, 0.5));
}

/* Pulse subtil quand une lettre est ajoutée */
.alphabet-heart-main.letter-added .heart-fill {
    animation: heart-letter-pulse 0.4s ease-out;
}

@keyframes heart-letter-pulse {
    0% { filter: drop-shadow(0 0 8px rgba(240, 192, 64, 0.5)); }
    50% { filter: drop-shadow(0 0 18px rgba(240, 192, 64, 0.9)); transform: scale(1.08); }
    100% { filter: drop-shadow(0 0 8px rgba(240, 192, 64, 0.5)); transform: scale(1); }
}

/* Animation de complétion encore plus spectaculaire */
.alphabet-heart-main.completing .heart-fill {
    animation: heart-complete-fill 800ms ease-out forwards;
}

@keyframes heart-complete-fill {
    0% { filter: drop-shadow(0 0 8px rgba(240, 192, 64, 0.5)); transform: scale(1); }
    25% { filter: drop-shadow(0 0 35px rgba(240, 192, 64, 1)); transform: scale(1.2); }
    50% { filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.8)); transform: scale(1.15); }
    75% { filter: drop-shadow(0 0 40px rgba(240, 192, 64, 1)); transform: scale(1.25); }
    100% { filter: drop-shadow(0 0 8px rgba(240, 192, 64, 0.5)); transform: scale(1); }
}

/* ============================================
   🎯 BOMBANIME - PANNEAU DÉFIS (DESKTOP)
   ============================================ */
.bombanime-challenges-panel {
    position: fixed;
    left: 2rem;
    top: 43%;
    transform: translateY(-50%);
    width: 300px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 100;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s ease;
}

.bombanime-challenges-panel.intro-offscreen-left {
    transform: translateY(-50%) translateX(calc(-100% - 3rem));
    opacity: 0;
}

.challenges-list {
    display: flex;
    flex-direction: column;
}

.challenge-item {
    display: flex;
    align-items: center;
    padding: 1.1rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    transition: all 0.3s ease;
    gap: 1rem;
    opacity: 0.7;
}

.challenge-item:last-child {
    border-bottom: none;
}

.challenge-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease;
}

.challenge-item.in-progress {
    opacity: 1;
}

.challenge-item.in-progress::before {
    background: linear-gradient(to bottom, #f0c040, #ff9800);
}

.challenge-item.completed::before {
    background: #4caf50;
}

/* Défi complété avec bonus disponible */
.challenge-item.completed:not(.used) {
    opacity: 1;
}

/* Défi complété mais bonus utilisé - grisé */
.challenge-item.completed.used {
    opacity: 0.4;
}

.challenge-item.completed.used::before {
    background: rgba(76, 175, 80, 0.4);
}

.challenge-item.just-completed {
    animation: challenge-complete-flash 0.6s ease;
    opacity: 1;
}

@keyframes challenge-complete-flash {
    0%, 100% { background: transparent; }
    50% { background: rgba(76, 175, 80, 0.25); }
}

.challenge-content {
    flex: 1;
    min-width: 0;
}

.challenge-title {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.challenge-letter {
    font-weight: 700;
    color: #f0c040;
}

.challenge-item.completed .challenge-letter {
    color: #81c784;
}

/* Barre de progression */
.challenge-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.challenge-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f0c040, #ffd54f);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.challenge-item.completed .challenge-progress-bar .progress-fill {
    background: linear-gradient(90deg, #4CAF50, #81C784);
}

/* Bouton bonus à droite */
.challenge-bonus-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: not-allowed;
    opacity: 0.35;
    flex-shrink: 0;
    transition: all 0.2s ease;
    position: relative;
}

.challenge-bonus-btn svg {
    width: 20px;
    height: 20px;
    fill: rgba(255, 255, 255, 0.4);
}

/* Bouton vie disponible */
.challenge-bonus-btn.available {
    background: rgba(255, 107, 107, 0.15);
    border-color: rgba(255, 107, 107, 0.5);
    cursor: pointer;
    opacity: 1;
    animation: bonus-pulse 2s ease-in-out infinite;
}

.challenge-bonus-btn.available svg {
    fill: #ff6b6b;
}

.challenge-bonus-btn.available:hover {
    background: rgba(255, 107, 107, 0.25);
    transform: scale(1.08);
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.4);
}

.challenge-bonus-btn.available:active {
    transform: scale(0.95);
}

/* Bouton perso gratuit disponible */
.challenge-bonus-btn.type-gift.available {
    background: rgba(156, 39, 176, 0.15);
    border-color: rgba(156, 39, 176, 0.5);
}

.challenge-bonus-btn.type-gift.available svg {
    fill: #ce93d8;
}

.challenge-bonus-btn.type-gift.available:hover {
    background: rgba(156, 39, 176, 0.25);
    box-shadow: 0 0 15px rgba(156, 39, 176, 0.4);
}

@keyframes bonus-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(255, 107, 107, 0); }
}

/* Bouton perso gratuit quand pas le tour du joueur */
.challenge-bonus-btn.type-gift.available.not-my-turn {
    background: rgba(156, 39, 176, 0.08);
    border-color: rgba(156, 39, 176, 0.25);
    opacity: 0.5;
    cursor: not-allowed;
    animation: none;
}

.challenge-bonus-btn.type-gift.available.not-my-turn svg {
    fill: rgba(206, 147, 216, 0.5);
}

.challenge-bonus-btn.type-gift.available.not-my-turn:hover {
    transform: none;
    box-shadow: none;
    background: rgba(156, 39, 176, 0.08);
}

/* Badge compteur sur le bouton */
.challenge-bonus-btn .bonus-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #ff6b6b;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1.5px solid rgba(10, 10, 18, 0.9);
}

.challenge-bonus-btn.type-gift .bonus-count {
    background: #ba68c8;
}

/* ============================================
   🎯 BOMBANIME - ANIMATION GAIN DE VIE SUR JOUEUR
   ============================================ */

/* Éléments d'animation dans le player-hex */
.bombanime-player-slot .player-hex .life-heart-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    pointer-events: none;
    opacity: 0;
    z-index: 50;
}

.bombanime-player-slot .player-hex .life-heart-overlay svg {
    width: 100%;
    height: 100%;
    fill: #ff6b6b;
}

.bombanime-player-slot .player-hex .life-glow-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border: 3px solid rgba(255, 100, 100, 0.6);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    z-index: 45;
}

.bombanime-player-slot .player-hex .life-glow-ring.ring-2 {
    width: 90px;
    height: 90px;
}

.bombanime-player-slot .player-hex .life-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 55;
}

.bombanime-player-slot .player-hex .life-particles .particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ff6b6b;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 100, 100, 0.9);
    opacity: 0;
}

/* Animation déclenchée par la classe .life-gained */
.bombanime-player-slot.life-gained {
    z-index: 100;
}

.bombanime-player-slot.life-gained .player-hex .life-heart-overlay {
    animation: life-heart-appear 0.6s ease-out forwards;
}

.bombanime-player-slot.life-gained .player-hex .life-glow-ring {
    animation: life-ring-expand 0.7s ease-out forwards;
}

.bombanime-player-slot.life-gained .player-hex .life-glow-ring.ring-2 {
    animation: life-ring-expand 0.7s ease-out 0.1s forwards;
}

.bombanime-player-slot.life-gained .player-hex .life-particles .particle {
    animation: life-particle-burst 0.6s ease-out 0.05s forwards;
}

/* Keyframes */




@keyframes life-heart-appear {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
    60% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}

@keyframes life-ring-expand {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(2.5); }
}

/* Positions des particules */
.bombanime-player-slot .player-hex .life-particles .particle:nth-child(1) { --tx: 70px; --ty: 0; }
.bombanime-player-slot .player-hex .life-particles .particle:nth-child(2) { --tx: 50px; --ty: 50px; }
.bombanime-player-slot .player-hex .life-particles .particle:nth-child(3) { --tx: 0; --ty: 70px; }
.bombanime-player-slot .player-hex .life-particles .particle:nth-child(4) { --tx: -50px; --ty: 50px; }
.bombanime-player-slot .player-hex .life-particles .particle:nth-child(5) { --tx: -70px; --ty: 0; }
.bombanime-player-slot .player-hex .life-particles .particle:nth-child(6) { --tx: -50px; --ty: -50px; }
.bombanime-player-slot .player-hex .life-particles .particle:nth-child(7) { --tx: 0; --ty: -70px; }
.bombanime-player-slot .player-hex .life-particles .particle:nth-child(8) { --tx: 50px; --ty: -50px; }
.bombanime-player-slot .player-hex .life-particles .particle:nth-child(9) { --tx: 35px; --ty: 60px; }
.bombanime-player-slot .player-hex .life-particles .particle:nth-child(10) { --tx: -35px; --ty: 60px; }
.bombanime-player-slot .player-hex .life-particles .particle:nth-child(11) { --tx: -60px; --ty: -25px; }
.bombanime-player-slot .player-hex .life-particles .particle:nth-child(12) { --tx: 60px; --ty: -25px; }

@keyframes life-particle-burst {
    0% { opacity: 1; transform: translate(0, 0) scale(1.2); }
    100% { opacity: 0; transform: translate(var(--tx), calc(var(--ty) - 15px)) scale(0.3); }
}


/* ============================================
   🎯 BOMBANIME - TOOLBAR MOBILE (2 icônes)
   ============================================ */
.bombanime-mobile-toolbar {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 1000;
    transition: opacity 0.3s ease;
}

.bombanime-mobile-toolbar.intro-hidden {
    opacity: 0;
    pointer-events: none;
}

.mobile-toolbar-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-toolbar-btn svg {
    width: 20px;
    height: 20px;
    fill: rgba(255, 255, 255, 0.5);
}

.mobile-toolbar-btn:active {
    transform: scale(0.95);
}

/* Bouton Alphabet - Bleu/Cyan */
.mobile-toolbar-btn.alphabet {
    background: linear-gradient(135deg, rgba(100, 181, 246, 0.2), rgba(66, 165, 245, 0.1));
    border-color: rgba(100, 181, 246, 0.3);
}

.mobile-toolbar-btn.alphabet svg {
    fill: #64b5f6;
}

.mobile-toolbar-btn.alphabet.letter-added {
    animation: toolbar-pulse-blue 0.4s ease;
}

@keyframes toolbar-pulse-blue {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); box-shadow: 0 0 15px rgba(100, 181, 246, 0.5); }
}

/* Bouton Bonus - Doré/Orange */
.mobile-toolbar-btn.bonus {
    background: linear-gradient(135deg, rgba(240, 192, 64, 0.15), rgba(255, 152, 0, 0.1));
    border-color: rgba(240, 192, 64, 0.3);
}

.mobile-toolbar-btn.bonus svg {
    fill: #f0c040;
}

/* Quand bonus disponible - Vert brillant */
.mobile-toolbar-btn.bonus.has-available {
    border-color: rgba(76, 175, 80, 0.6);
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(67, 160, 71, 0.1));
    animation: bonus-glow-green 1.5s ease-in-out infinite;
}

.mobile-toolbar-btn.bonus.has-available svg {
    fill: #81c784;
}

@keyframes bonus-glow-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
    50% { box-shadow: 0 0 12px 2px rgba(76, 175, 80, 0.3); }
}

/* Badge compteur - Vert quand bonus dispo */
.toolbar-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #4caf50;
    border: 1.5px solid #0a0a12;
    font-size: 0.6rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* ============================================
   🎌 PROPOSER UN PERSONNAGE
   Une feuille sobre : un en-tête, des lignes, deux actions. Rien d'autre.
   ============================================ */
.player-suggestion-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(6, 6, 8, 0.66);
    backdrop-filter: blur(6px);
    animation: suggestion-voile 0.2s ease both;
}

@keyframes suggestion-voile { from { opacity: 0; } to { opacity: 1; } }

.player-suggestion-modal {
    display: flex;
    flex-direction: column;
    width: min(26rem, 100%);
    max-height: min(88vh, 40rem);
    overflow: hidden;
    background: linear-gradient(165deg, rgba(24, 21, 16, 0.99), rgba(13, 13, 15, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.65);
    animation: suggestion-entre 0.24s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

@keyframes suggestion-entre {
    from { opacity: 0; transform: translateY(0.8rem) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* Le titre et la série s'empilent à gauche, la croix tient les deux lignes */
.player-suggestion-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.2rem 0.75rem;
    padding: 1.1rem 1.2rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.player-suggestion-title {
    grid-column: 1;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
}

.player-suggestion-serie {
    grid-column: 1;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(240, 192, 64, 0.7);
}

.player-suggestion-close {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: rgba(255, 255, 255, 0.4);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.player-suggestion-close:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.player-suggestion-close svg { width: 1rem; height: 1rem; }

.player-suggestion-body {
    padding: 1rem 1.2rem 1.2rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.28) transparent;
}

.player-suggestion-body::-webkit-scrollbar { width: 0.35rem; }
.player-suggestion-body::-webkit-scrollbar-track { background: transparent; }
.player-suggestion-body::-webkit-scrollbar-thumb { background: rgba(255, 215, 0, 0.25); border-radius: 2rem; }

.player-suggestion-info {
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary, #a0a0a0);
}

.player-suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.player-suggestion-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.player-suggestion-line-input {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary, #fff);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    border-radius: 0.55rem;
    outline: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.player-suggestion-line-input:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(240, 192, 64, 0.45);
}

.player-suggestion-line-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
    font-weight: 400;
}

/* Une seule ligne restante : la croix s'efface au lieu de rester grisée */
.player-suggestion-line-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    color: rgba(255, 255, 255, 0.3);
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.player-suggestion-line-remove svg { width: 0.85rem; height: 0.85rem; }
.player-suggestion-line-remove:hover:not(:disabled) { color: #ff6b6b; background: rgba(255, 107, 107, 0.1); }
.player-suggestion-line-remove:disabled { opacity: 0; pointer-events: none; }

.player-suggestion-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.4rem 0.2rem;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(240, 192, 64, 0.7);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.player-suggestion-add-btn svg { width: 0.85rem; height: 0.85rem; }
.player-suggestion-add-btn:hover { color: #f0c040; }

.player-suggestion-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.1rem;
}

.player-suggestion-cancel,
.player-suggestion-submit {
    flex: 1;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

.player-suggestion-cancel {
    color: var(--text-secondary, #a0a0a0);
    background: rgba(255, 255, 255, 0.05);
}

.player-suggestion-cancel:hover { color: var(--text-primary, #fff); background: rgba(255, 255, 255, 0.1); }

.player-suggestion-submit {
    color: #14100a;
    background: linear-gradient(135deg, #ffe066, #FFD700);
}

.player-suggestion-submit:hover:not(:disabled) { filter: brightness(1.07); }
.player-suggestion-submit:disabled { opacity: 0.35; cursor: default; }

.player-suggestion-result {
    margin-top: 0.8rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.76rem;
    font-weight: 600;
    text-align: center;
    border-radius: 0.5rem;
}

.player-suggestion-result.success { color: #6ee7b7; background: rgba(110, 231, 183, 0.1); }
.player-suggestion-result.error { color: #ff6b6b; background: rgba(255, 107, 107, 0.1); }

@media (max-width: 600px) {
    .player-suggestion-modal { width: 100%; max-height: 90vh; }
    .player-suggestion-header { padding: 1rem; }
    .player-suggestion-body { padding: 0.9rem 1rem 1.1rem; }
}

/* ============================================
   🎯 BOMBANIME - MODALS MOBILE (Améliorées)
   ============================================ */
.bombanime-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.bombanime-modal-content {
    background: linear-gradient(145deg, rgba(25, 25, 35, 0.98), rgba(15, 15, 22, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    max-width: 340px;
    width: 100%;
    overflow: hidden;
}

/* Header du modal */
.modal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(240, 192, 64, 0.2), rgba(255, 152, 0, 0.1));
}

.modal-header-icon svg {
    width: 18px;
    height: 18px;
    fill: #f0c040;
}

.modal-header-icon.bonus {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.2), rgba(103, 58, 183, 0.1));
}

.modal-header-icon.bonus svg {
    fill: #ce93d8;
}

.modal-header h3 {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.modal-close-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close-btn svg {
    width: 16px;
    height: 16px;
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 2;
    fill: none;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Body du modal */
.modal-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Items défi dans modal */
.modal-challenge-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    border-left: 4px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    cursor: default;
    opacity: 0.7;
}

.modal-challenge-item.in-progress {
    border-left-color: #f0c040;
    opacity: 1;
}

.modal-challenge-item.completed {
    border-left-color: #4caf50;
    background: rgba(76, 175, 80, 0.08);
    opacity: 1;
}

/* Quand bonus disponible - cliquable */
.modal-challenge-item.bonus-available {
    cursor: pointer;
    border-left-color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
    opacity: 1;
}

.modal-challenge-item.bonus-available:hover {
    background: rgba(255, 107, 107, 0.18);
}

.modal-challenge-item.bonus-available:active {
    transform: scale(0.98);
}

.modal-challenge-item.bonus-available.type-gift {
    border-left-color: #ce93d8;
    background: rgba(156, 39, 176, 0.1);
}

.modal-challenge-item.bonus-available.type-gift:hover {
    background: rgba(156, 39, 176, 0.18);
}

.modal-challenge-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.modal-challenge-icon svg {
    width: 18px;
    height: 18px;
    fill: rgba(255, 255, 255, 0.5);
}

.modal-challenge-item.in-progress .modal-challenge-icon {
    background: rgba(240, 192, 64, 0.15);
}

.modal-challenge-item.in-progress .modal-challenge-icon svg {
    fill: #f0c040;
}

.modal-challenge-item.completed .modal-challenge-icon {
    background: rgba(76, 175, 80, 0.15);
}

.modal-challenge-item.completed .modal-challenge-icon svg {
    fill: #81c784;
}

/* Icône quand bonus disponible */
.modal-challenge-item.bonus-available .modal-challenge-icon {
    background: rgba(255, 107, 107, 0.2);
}

.modal-challenge-item.bonus-available .modal-challenge-icon svg {
    fill: #ff6b6b;
}

.modal-challenge-item.bonus-available.type-gift .modal-challenge-icon {
    background: rgba(156, 39, 176, 0.2);
}

.modal-challenge-item.bonus-available.type-gift .modal-challenge-icon svg {
    fill: #ce93d8;
}

.modal-challenge-content {
    flex: 1;
    min-width: 0;
}

.modal-challenge-title {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.modal-challenge-title .letter {
    font-weight: 700;
    color: #f0c040;
}

.modal-challenge-item.completed .modal-challenge-title .letter {
    color: #81c784;
}

.modal-challenge-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-challenge-progress .progress-bar {
    flex: 1;
    height: 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.modal-challenge-progress .progress-fill {
    height: 100%;
    background: #f0c040;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.modal-challenge-item.completed .modal-challenge-progress .progress-fill {
    background: #4caf50;
}

/* Défi complété mais bonus utilisé - grisé */
.modal-challenge-item.used {
    opacity: 0.4;
    border-left-color: rgba(76, 175, 80, 0.4);
    background: rgba(255, 255, 255, 0.01);
}

/* Bonus perso gratuit quand pas le tour du joueur */
.modal-challenge-item.not-my-turn {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-challenge-item.not-my-turn:hover {
    background: rgba(156, 39, 176, 0.1);
}

.modal-challenge-item.bonus-available .modal-challenge-progress .progress-fill {
    background: linear-gradient(90deg, #ff6b6b, #ff8a8a);
}

.modal-challenge-item.bonus-available.type-gift .modal-challenge-progress .progress-fill {
    background: linear-gradient(90deg, #ba68c8, #ce93d8);
}

.modal-challenge-progress .progress-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    min-width: 35px;
    text-align: right;
}

.modal-challenge-progress .bonus-count {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ff6b6b;
    min-width: 35px;
    text-align: right;
}

.modal-challenge-item.type-gift .modal-challenge-progress .bonus-count {
    color: #ce93d8;
}

/* ============================================
   RESPONSIVE BOMBANIME
   ============================================ */
@media (max-width: 1200px) {
    .alphabet-panel {
        right: 1rem;
        padding: 1rem 0.8rem;
    }
    
    .alphabet-heart-main {
        width: 60px;
        height: 55px;
    }
    
    .alphabet-letter {
        width: 42px;
        height: 38px;
        font-size: 1rem;
    }
}





/* Drawer alphabet mobile */
.alphabet-mobile-drawer {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.alphabet-mobile-content {
    background: rgba(15, 15, 20, 0.95);
    border: 1px solid rgba(240, 192, 64, 0.2);
    border-radius: 1rem;
    padding: 1.8rem;
    max-width: 360px;
    width: 92%;
    position: relative;
    animation: slideUp 0.25s ease;
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(30px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.alphabet-mobile-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.alphabet-mobile-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.alphabet-mobile-close svg {
    width: 18px;
    height: 18px;
}

.alphabet-mobile-content .alphabet-heart-main {
    width: 55px;
    height: 50px;
    margin: 0 auto 2rem;
}

.alphabet-grid-mobile {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.6rem;
}

.alphabet-grid-mobile .alphabet-letter {
    width: 100%;
    aspect-ratio: 1;
    font-size: 1rem;
}

/* Dernière ligne Y-Z centrée */
.alphabet-last-row-mobile {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.alphabet-last-row-mobile .alphabet-letter {
    width: calc((100% - 0.6rem * 5) / 6);
    aspect-ratio: 1;
    font-size: 1rem;
}

/* ============================================
   📱 MEDIA QUERIES BOMBANIME
   ============================================ */

/* Tablette */
/* ── Tablette ── */
@media (max-width: 1024px) {
    .alphabet-panel {
        right: 1.5rem;
        padding: 1rem;
    }
    
    .alphabet-heart-main {
        width: 60px;
        height: 55px;
    }
    
    .alphabet-letter {
        width: 42px;
        height: 38px;
        font-size: 1rem;
    }
}

/* Mobile */
/* ── Petite tablette et téléphone en paysage ── */
@media (max-width: 768px) {
    /* Contrôle son en haut à gauche */
    .sound-control {
        top: 20px;
        bottom: auto;
        left: 20px;
        padding: 5px 8px;
    }
    
    .sound-btn {
        width: 24px;
        height: 24px;
    }
    
    .sound-btn svg {
        width: 14px;
        height: 14px;
    }
    
    .sound-slider {
        width: 50px;
    }
    
    /* Noms des joueurs plus petits mais plus de caractères */
    .bombanime-player-slot .player-name {
        font-size: 0.7rem;
        max-width: 120px;
    }
    
    /* Vies plus petites */
    .player-lives {
        gap: 2px;
        padding: 2px 5px;
    }

    .player-life {
        width: 13px;
        height: 13px;
    }
    
    /* Le cercle remonte de 5 rem sur ordinateur pour dégager le champ. Sur
       téléphone, la barre d'outils occupe déjà le haut : il piquait du nez. */
    .bombanime-circle {
        margin-top: -1.5rem;
    }

    /* Input zone */
    .input-zone {
        bottom: 8%;
    }
    
    .game-input {
        font-size: 1rem;
        padding: 0.6rem 1rem;
        max-width: 280px;
    }
    
    .game-input::placeholder {
        font-size: 0.75rem;
    }
    
    /* Réponses joueurs */
    .player-answer {
        max-width: 175px;
    }
    
    /* Cadenas */
    .player-lock {
        right: -36px;
    }
    
    .player-lock svg {
        width: 18px;
        height: 18px;
    }
    
    /* Winner screen mobile */
    .crown-svg {
        width: 55px;
        height: 55px;
    }
    
    .winner-title {
        font-size: 0.85rem;
        letter-spacing: 0.2em;
    }
    
    .bombanime-winner-screen .winner-name {
        font-size: 2rem;
    }
    
    .bombanime-winner-screen .winner-name.no-winner {
        font-size: 1.5rem;
    }
    
    .bombanime-winner-screen .bombanime-winner-avatar {
        width: 2.8rem;
        height: 2.8rem;
    }
    
    .bombanime-winner-screen .winner-name-row {
        gap: 0.8rem;
    }
    
    .winner-stats {
        gap: 2rem;
    }
    
    .winner-stat .stat-value {
        font-size: 1.2rem;
    }
    
    .winner-stat .stat-label {
        font-size: 0.65rem;
    }
    
    .winner-back-btn {
        padding: 0.6rem 2rem;
        font-size: 0.85rem;
    }
    
    .winner-content {
        gap: 1rem;
    }
}

/* Mobile petit */
/* ── Téléphone ── */
@media (max-width: 480px) {
    .bombanime-player-slot .player-name {
        font-size: 0.6rem;
        /* 100 px laissaient deux pseudos voisins se toucher et se lire d'un
           bloc : « Ramen599Hokage234 ». Ils s'abrègent maintenant. */
        max-width: 62px;
    }
    
    .player-lives {
        padding: 2px 4px;
    }

    .player-life {
        width: 11px;
        height: 11px;
    }
    
    .game-input {
        font-size: 0.9rem;
        max-width: 240px;
    }
    
    .input-zone {
        bottom: 6%;
    }
    
    .player-answer {
        max-width: 140px;
    }
    
    .player-lock {
        right: -24px;
    }
    
    .player-lock svg {
        width: 14px;
        height: 14px;
    }
    
    /* Drawer plus compact */
    .alphabet-mobile-content {
        padding: 1.2rem;
    }
    
    .alphabet-mobile-content .alphabet-heart-main {
        margin-bottom: 1.2rem;
    }
    
    .alphabet-grid-mobile {
        gap: 0.5rem;
    }
    
    .alphabet-grid-mobile .alphabet-letter {
        font-size: 0.9rem;
    }
    
    .alphabet-last-row-mobile {
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .alphabet-last-row-mobile .alphabet-letter {
        font-size: 0.9rem;
    }
    
    /* Winner screen mobile petit */
    .crown-svg {
        width: 45px;
        height: 45px;
    }
    
    .winner-title {
        font-size: 0.75rem;
        letter-spacing: 0.15em;
    }
    
    .bombanime-winner-screen .winner-name {
        font-size: 1.6rem;
    }
    
    .bombanime-winner-screen .winner-name.no-winner {
        font-size: 1.3rem;
    }
    
    .winner-stats {
        gap: 1.5rem;
    }
    
    .winner-stat .stat-value {
        font-size: 1rem;
    }
    
    .winner-stat .stat-label {
        font-size: 0.6rem;
    }
    
    .winner-back-btn {
        padding: 0.5rem 1.5rem;
        font-size: 0.8rem;
    }
    
    .winner-content {
        gap: 0.8rem;
    }
}

/* Paysage mobile */
/* ── Écran bas, en paysage ── */
@media (max-height: 500px) and (orientation: landscape) {
    .bombanime-player-slot .player-name {
        font-size: 0.55rem;
    }
    
    .player-life {
        width: 10px;
        height: 10px;
    }
    
    .input-zone {
        bottom: 5%;
    }
    
    .game-input {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
        max-width: 200px;
    }
    
    .sound-control {
        top: 10px;
        left: 10px;
        padding: 4px 6px;
    }
}

/* 2K / QHD (2560x1440) - Bombanime scaling */
/* ── Écran 2K et au-delà ── */
@media (min-width: 2560px) {
    .bombanime-player-slot .player-name {
        font-size: 1.15rem;
        max-width: 170px;
    }

    .player-lives {
        gap: 4px;
        padding: 4px 8px;
    }

    .player-life {
        width: 18px;
        height: 18px;
    }

    /* Input zone - remonté et agrandi */
    .input-zone {
        bottom: 4%;
    }

    .game-input {
        width: 520px;
        font-size: 1.35rem;
        padding: 1.2rem 2.2rem;
    }

    .game-input::placeholder {
        font-size: 1.05rem;
    }

    .input-underline {
        width: 65%;
        height: 3px;
    }

    /* Feedback message */
    .feedback-message {
        font-size: 0.95rem;
        padding: 0.6rem 1.2rem;
        bottom: -50px;
    }

    /* Réponses joueurs */
    .player-answer {
        max-width: 230px;
        font-size: 0.95rem;
    }

    /* Cadenas */
    .player-lock {
        right: -38px;
    }

    .player-lock svg {
        width: 26px;
        height: 26px;
    }

    /* Challenges panel */
    .bombanime-challenges-panel {
        left: 2.5rem;
        width: 360px;
        border-radius: 14px;
    }

    .challenge-item {
        padding: 1.3rem 1.4rem;
        gap: 1.2rem;
    }

    .challenge-title {
        font-size: 1.1rem;
        margin-bottom: 0.6rem;
    }

    .challenge-progress-bar {
        height: 7px;
    }

    .challenge-bonus-btn {
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }

    .challenge-bonus-btn svg {
        width: 24px;
        height: 24px;
    }

    /* Sound control */
    .sound-control {
        top: 25px;
        left: 25px;
        padding: 8px 14px;
    }


    /* Winner screen */
    .bombanime-winner-screen .winner-name {
        font-size: 3.5rem;
    }

    .winner-stat .stat-value {
        font-size: 2rem;
    }

    .winner-stat .stat-label {
        font-size: 0.95rem;
    }

    .winner-back-btn {
        padding: 0.9rem 3rem;
        font-size: 1.1rem;
    }

    /* Alphabet grid mobile */
    .alphabet-grid-mobile .alphabet-letter {
        font-size: 1.15rem;
    }

    /* Alphabet panel desktop */
    .alphabet-panel {
        right: 3rem;
        padding: 2rem 1.5rem;
        border-radius: 1.25rem;
    }

    .alphabet-heart-main {
        width: 90px;
        height: 85px;
    }

    .alphabet-grid {
        gap: 1.1rem 0.6rem;
    }

    .alphabet-letter {
        width: 60px;
        height: 56px;
        font-size: 1.45rem;
    }

    .alphabet-last-row {
        gap: 0.6rem;
    }
}
/* Relancer une manche : l'action qui prime sur l'écran de victoire */
.winner-replay-btn {
    padding: 0.85rem 2.4rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: #14100a;
    background: linear-gradient(135deg, #ffe066, #FFD700);
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    box-shadow: 0 0.6rem 1.8rem rgba(255, 190, 40, 0.35);
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.25, 1), box-shadow 0.2s ease;
}

.winner-replay-btn:hover:not(:disabled) {
    transform: translateY(-0.15rem);
    box-shadow: 0 0.9rem 2.4rem rgba(255, 190, 40, 0.5);
}

.winner-replay-btn:disabled { opacity: 0.6; cursor: default; }

/* ============================================
   💣 FLASH DU PERSONNAGE VALIDÉ
   La classe était posée par le script depuis la v1, mais aucune règle ne
   l'accompagnait : l'image était bien ajoutée au DOM, invisible, puis retirée.
   ============================================ */
.character-flash {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
}

.character-flash img {
    width: clamp(5rem, 12vw, 8rem);
    height: clamp(5rem, 12vw, 8rem);
    object-fit: contain;
    filter: drop-shadow(0 0.4rem 1.4rem rgba(0, 0, 0, 0.7))
            drop-shadow(0 0 1.2rem rgba(255, 190, 40, 0.45));
}

/* 850 ms, la durée que le script laisse avant de retirer l'élément */
.character-flash.active { animation: persoValide 0.85s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }

@keyframes persoValide {
    0%   { opacity: 0; transform: scale(0.5) translateY(0.6rem); }
    22%  { opacity: 1; transform: scale(1.1) translateY(-0.3rem); }
    65%  { opacity: 1; transform: scale(1) translateY(-0.7rem); }
    100% { opacity: 0; transform: scale(0.94) translateY(-1.8rem); }
}

@media (max-width: 768px) {
    .character-flash img { width: 4.5rem; height: 4.5rem; }
}