/* Bannières plein écran (attaque, Tsunami, Mine antipersonnel) et wizz (Room.razor, wizz.js). */

.attack-count {
    font-weight: 700;
    color: #ff8a80;
    margin-left: 0.35rem;
}

/* ---------- Bannière d'attaque : grande alerte plein écran à valider ---------- */
.attack-banner {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: radial-gradient(circle at 50% 40%, rgba(140, 20, 20, 0.97), rgba(25, 0, 0, 0.99));
    animation: attack-flash 1.1s ease-in-out infinite alternate;
}

.attack-banner-inner {
    text-align: center;
    color: #fff;
    max-width: 420px;
}

.attack-banner-icon {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.attack-banner-inner h2 {
    margin: 0 0 0.4rem;
    font-size: 1.6rem;
}

.attack-effect {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffd166;
}

/* Ce que fait le malus reçu (demandé : l'annonce explique l'effet). */
.attack-explanation {
    max-width: 30rem;
    margin: 0.4rem auto 0;
    font-size: 0.95rem;
    line-height: 1.35;
    opacity: 0.92;
}

.attack-banner-inner .btn {
    margin-top: 1rem;
}

/* ---------- Bannière Tsunami : même gabarit que l'attaque, teinte bleue (pas une agression) ---------- */
.tsunami-banner {
    background: radial-gradient(circle at 50% 40%, rgba(15, 80, 130, 0.97), rgba(0, 15, 30, 0.99));
    animation: tsunami-flash 1.4s ease-in-out infinite alternate;
}

.tsunami-banner .attack-effect {
    color: #7fd8ff;
}

/* ---------- Bannière Mine antipersonnel : orange « explosion » ---------- */
.landmine-banner {
    background: radial-gradient(circle at 50% 40%, rgba(150, 60, 0, 0.97), rgba(30, 8, 0, 0.99));
    animation: landmine-flash 0.9s ease-in-out infinite alternate;
}

.landmine-banner .attack-effect {
    color: #ffc27a;
}

body.wizz-shake .game-shell {
    animation: wizz-shake 0.85s linear;
}

.wizz-banner {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    background: rgba(6, 28, 18, 0.95);
    border: 2px solid var(--gold);
    border-radius: 16px;
    padding: 0.8rem 1.2rem;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    animation: wizz-banner 3.2s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    .landmine-banner,
    .tsunami-banner {
        animation: none;
    }

    body.wizz-shake .game-shell {
        animation: none;
        outline: 4px solid var(--gold);
        outline-offset: -4px;
    }
}

@keyframes attack-flash {
    from {
        box-shadow: inset 0 0 80px rgba(255, 40, 40, 0.15);
    }

    to {
        box-shadow: inset 0 0 160px rgba(255, 40, 40, 0.55);
    }
}

@keyframes tsunami-flash {
    from {
        box-shadow: inset 0 0 80px rgba(60, 170, 255, 0.15);
    }

    to {
        box-shadow: inset 0 0 160px rgba(60, 170, 255, 0.55);
    }
}

@keyframes landmine-flash {
    from {
        box-shadow: inset 0 0 80px rgba(255, 140, 0, 0.2);
    }

    to {
        box-shadow: inset 0 0 170px rgba(255, 90, 0, 0.6);
    }
}

/* ---------- Wizz (à la MSN) : l'écran du joueur visé tremble ---------- */
@keyframes wizz-shake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-9px, 3px); }
    20% { transform: translate(8px, -4px); }
    30% { transform: translate(-7px, -3px); }
    40% { transform: translate(7px, 4px); }
    50% { transform: translate(-6px, 2px); }
    60% { transform: translate(5px, -3px); }
    70% { transform: translate(-4px, 3px); }
    80% { transform: translate(3px, -2px); }
    90% { transform: translate(-2px, 1px); }
}

@keyframes wizz-banner {
    0% { opacity: 0; transform: translateX(-50%) scale(0.8); }
    10% { opacity: 1; transform: translateX(-50%) scale(1.05); }
    20% { transform: translateX(-50%) scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* Partie mise en pause par l'admin (backoffice). */
.admin-pause-banner {
    position: fixed;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: #222;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    max-width: calc(100vw - 2rem);
    text-align: center;
}

/* ---------- « À toi de jouer » : annonce du tour, 2 secondes (Room.AnnounceMyTurn) ---------- */
.turn-banner {
    position: fixed;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 88;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.8rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(10, 52, 32, 0.96), rgba(6, 30, 19, 0.96));
    border: 2px solid var(--gold);
    color: #fff4d0;
    font-size: clamp(1.1rem, 4vw, 1.6rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 0 0 6px rgba(224, 180, 0, 0.2), 0 14px 34px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    animation: turn-banner 2s ease forwards;
}

.turn-banner-icon {
    display: inline-block;
    animation: turn-dice 0.7s ease-out;
}

@keyframes turn-banner {
    0% { opacity: 0; transform: translate(-50%, -24px) scale(0.85); }
    12% { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
    22% { transform: translate(-50%, 0) scale(1); }
    80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -10px) scale(0.96); }
}

@keyframes turn-dice {
    from { transform: rotate(-200deg) scale(0.4); }
    to { transform: rotate(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .turn-banner,
    .turn-banner-icon {
        animation: none;
    }
}

/* ---------- « Action refusée » : refus du serveur, en rouge, avec sa raison (Room.ScheduleRefusalBanner) ---------- */
.refusal-banner {
    position: fixed;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 89;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: max-content;
    max-width: min(92vw, 560px);
    padding: 0.7rem 1.4rem;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(120, 18, 18, 0.97), rgba(70, 8, 8, 0.97));
    border: 2px solid #ff6b5b;
    color: #fff1ee;
    box-shadow: 0 0 0 6px rgba(229, 83, 61, 0.22), 0 14px 34px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    animation: refusal-banner 3.5s ease forwards;
}

.refusal-banner-icon {
    font-size: clamp(1.4rem, 5vw, 1.9rem);
    animation: refusal-shake 0.45s ease-out;
}

.refusal-banner-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.refusal-banner-text strong {
    font-size: clamp(1.05rem, 3.6vw, 1.35rem);
    font-weight: 900;
    letter-spacing: 0.02em;
}

.refusal-banner-text small {
    font-size: clamp(0.82rem, 2.8vw, 0.95rem);
    line-height: 1.3;
    color: #ffd9d3;
}

@keyframes refusal-banner {
    0% { opacity: 0; transform: translate(-50%, -24px) scale(0.85); }
    8% { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
    14% { transform: translate(-50%, 0) scale(1); }
    85% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -10px) scale(0.97); }
}

@keyframes refusal-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px) rotate(-8deg); }
    50% { transform: translateX(4px) rotate(8deg); }
    75% { transform: translateX(-2px); }
}