/* ============================================================
   GUZOMON — FEUILLE DE STYLE UNIQUE (fusion styles + status)

   Structure HTML des zones de combat :
   .opponent-area / .player-area
     ├── .area-left       (nom + sprite)
     ├── .area-right      (guzofus-display → status-effects → pa-bar)
     └── .area-hp         (barre HP pleine largeur)
   ============================================================ */


/* ── Fonts ───────────────────────────────────────────────────────────── */
@font-face { font-family: Pokemon; src: url('./fonts/Pokemon\ Solid.ttf'); }
@font-face { font-family: BR;      src: url('./fonts/BebasNeue-Regular.ttf'); }


/* ── Reset minimal ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0; padding: 0;
    display: flex; justify-content: center; align-items: center;
    height: 100vh;
    background-color: #47006b;
    font-family: Arial, sans-serif;
    overflow: hidden;
}


/* ── Game container ──────────────────────────────────────────────────── */
.game-container {
    width: 90vw; height: 100%;
    max-width: 1920px; max-height: 1080px;
    background-color: #111;
    border: 2px solid #333;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
}


/* ── Splash screen ───────────────────────────────────────────────────── */
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 10;
    background-image: url('img/splash_screen_1920x1080.png');
    background-repeat: no-repeat; background-size: 100% 100%;
    background-color: #47006b;
}
.menu-option {
    font-family: Pokemon; font-size: 48px; color: #ff00f2;
    position: absolute; cursor: pointer;
    transition: transform 0.15s, color 0.15s;
}
.menu-option:hover { transform: scale(1.03); color: #ff0004; }
.title { font-family: Pokemon; font-size: 20vh; color: #ff00f2; position: absolute; right: 5vw; }

/* Bouton ENCLENCHER sur le splash screen */
.enclencher-btn {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    font-family: Pokemon;
    font-size: clamp(28px, 4vw, 56px);
    color: #fff;
    background: linear-gradient(135deg, #ff00d4, #00ffe5);
    border: 3px solid rgba(255,255,255,0.4);
    border-radius: 60px;
    padding: 16px 60px;
    cursor: pointer;
    letter-spacing: 3px;
    box-shadow: 0 0 40px rgba(255,0,212,0.6), 0 0 80px rgba(0,255,229,0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}
.enclencher-btn:hover {
    box-shadow: 0 0 60px rgba(255,0,212,0.9), 0 0 120px rgba(0,255,229,0.5);
    background: linear-gradient(135deg, #00ffe5, #ff00d4);
    filter: brightness(1.12) drop-shadow(0 0 18px #ff00d4);
}


/* ── Battlefield ─────────────────────────────────────────────────────── */
.battlefield {
    position: fixed;
    inset: 0 0 15vh 0;
    z-index: 20;
    background-image: url('img/ia_background.webp');
    background-size: cover;
    display: none;
}


/* ============================================================
   ZONES DE COMBAT
   Chaque zone = grid 2 colonnes + 1 ligne HP en bas.

   [area-left  | area-right ]
   [  area-hp  (colspan 2)  ]

   area-left  : nom + sprite
   area-right : guzofus (icône+charges) → statuts → PA bar
   area-hp    : barre HP + texte HP
   ============================================================ */
/* ============================================================
   ZONES DE COMBAT
   Adversaire (top-left) :  [sprite-col | info-col]
                             [    hppa-row (colspan2) ]
   Joueur (bottom-right) :  [info-col | sprite-col  ]
                             [    hppa-row (colspan2) ]

   Largeur sprite col : 10vw  (= taille du sprite)
   Largeur info col   : 90px  (guzofus 56px + marges)
   Largeur hppa-row   : 10vw + 8px gap + 90px = calc(10vw + 98px)
   ============================================================ */

/* Variables locales pour éviter les répétitions */
:root {
    --sprite-w: 10vw;
    --info-w: 90px;
    --area-w: calc(var(--sprite-w) + 8px + var(--info-w) + 20px); /* +padding */
    --hp-w: calc(var(--sprite-w) + 8px + var(--info-w) - 60px);   /* HP = zone - PA cristaux */
}

.opponent-area,
.player-area {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px 0;
    background: rgba(0,0,0,0.62);
    border-radius: 10px;
    backdrop-filter: blur(4px);
    overflow: visible;
}

.opponent-area { top: 10px; left: 10px; border: 1px solid rgba(255,100,100,0.3); }
.player-area   { bottom: 10px; right: 10px; border: 1px solid rgba(100,150,255,0.3); }

/* Ligne du haut : sprite + infos côte à côte */
.area-top-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}

/* Colonne sprite (nom + image) */
.area-sprite-col {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 6px;
    width: var(--sprite-w);
    flex-shrink: 0;
}
.area-sprite-col--right {
    align-items: flex-end;
}

/* Colonne infos (guzofus + statuts) */
.area-info-col {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px;
    width: var(--info-w);
    flex-shrink: 0;
    overflow: visible;
    padding-top: 4px;
}

/* Ligne HP + PA : même largeur que la ligne du haut */
.area-hppa-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 14px; /* espace pour le texte HP en dessous */
}
/* Adversaire : HP à gauche, PA à droite */
.opponent-area .area-hppa-row { flex-direction: row; }
/* Joueur : PA à gauche, HP à droite */
.player-area .area-hppa-row   { flex-direction: row-reverse; }


/* ── Sprites ─────────────────────────────────────────────────────────── */
.opponent-sprite,
.player-sprite {
    width: 10vw;
    border: 0.5vw solid blue;
    border-radius: 0.5vw;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
    cursor: pointer;
    display: block;
}


/* ── Noms ────────────────────────────────────────────────────────────── */
.opponent-name {
    font-size: 3.2vh; color: #ff6666; font-family: Pokemon;
    text-shadow: 0 0 8px rgba(0,0,0,0.9), 1px 1px 0 #000, -1px -1px 0 #000;
    line-height: 1.2; white-space: nowrap;
}
.player-name {
    font-size: 3.2vh; color: #66aaff; font-family: Pokemon;
    text-shadow: 0 0 8px rgba(0,0,0,0.9), 1px 1px 0 #000, -1px -1px 0 #000;
    line-height: 1.2; white-space: nowrap;
}


/* ── Barres HP ───────────────────────────────────────────────────────── */
.opponent-hp, .player-hp {
    flex: 1;
    min-width: 0;
    height: 14px;
    background-color: #333;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 7px;
    position: relative; overflow: visible;
}
.hp-bar {
    height: 100%; width: 100%;
    background-color: #76c442;
    transition: width 0.5s ease-in-out;
    border-radius: 5px;
}
/* Texte HP sous la barre, pas au-dessus */
.player-hp-text, .opponent-hp-text {
    position: absolute;
    font-size: 1.7vh; font-weight: bold; color: #fff;
    text-shadow: 1px 1px 2px #000, 0 0 6px rgba(0,0,0,0.8);
    white-space: nowrap;
    bottom: -16px;
}
.opponent-hp-text { left: 0; }
.player-hp-text   { right: 0; }




/* ── Barre de bouclier ───────────────────────────────────────────────── */
/* Toujours présente, transparente si shield=0 */
.shield-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* même largeur que area-hppa-row : flex s'en charge */
    width: 100%;
    margin-bottom: 0;
}

.shield-bar-track {
    width: 100%;
    height: 6px;
    background: rgba(135, 206, 235, 0.12);
    border: 1px solid rgba(77, 204, 255, 0.18);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 4px rgba(77, 204, 255, 0.08);
}

.shield-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4dccff, #87e8ff);
    border-radius: 4px;
    transition: width 0.35s ease;
    box-shadow: 0 0 6px rgba(77, 204, 255, 0.55);
}

.shield-bar-text {
    display: block;
    font-size: 1.55vh;
    font-weight: bold;
    color: rgba(135, 206, 235, 0.35);  /* grisé si 0 */
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
    line-height: 1.2;
}
/* Texte coloré quand shield actif (géré via JS sur la valeur) */
.shield-bar-text.active {
    color: #87CEEB;
    text-shadow: 0 0 6px rgba(77,204,255,0.5);
}

/* La shield-row doit avoir la même largeur que area-hppa-row.
   On force les deux à occuper toute la largeur de la flex column */
.opponent-area .shield-row,
.player-area   .shield-row {
    /* occupe la même place qu'area-hppa-row */
    align-self: stretch;
}


/* ── Guzofus ─────────────────────────────────────────────────────────── */
.guzofus-display {
    display: none;          /* flex quand actif via JS */
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.guzofus-icon {
    width: 56px; height: 56px;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.45);
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    background: rgba(0,0,0,0.3);
    object-fit: cover; cursor: pointer;
}
.guzofus-charges { display: flex; gap: 6px; justify-content: center; }
.charge-diamond {
    width: 14px; height: 14px;
    background: rgba(50,50,50,0.7);
    border: 2px solid rgba(100,100,100,0.6);
    transform: rotate(45deg);
    box-shadow: inset 0 0 4px rgba(0,0,0,0.8);
    transition: all 0.3s ease; flex-shrink: 0;
}
.charge-diamond.charged {
    background: linear-gradient(135deg, #8B00FF, #FF00FF);
    border-color: #FF00FF;
    box-shadow: 0 0 12px rgba(255,0,255,0.8), 0 0 24px rgba(255,0,255,0.4),
                inset 0 0 8px rgba(255,255,255,0.4);
    animation: charge-pulse 0.6s ease-in-out;
}
.charge-diamond.charged.full-charge { animation: full-charge-pulse 1s ease-in-out infinite; }


/* ── PA bar dans les zones de combat ─────────────────────────────────── */
.area-pa-bar {
    display: flex; flex-wrap: wrap;
    gap: 3px;
    flex-shrink: 0;
    max-width: 60px; /* ~4 cristaux × 13px + gaps */
}


/* ============================================================
   STATUTS
   ============================================================ */
.status-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: fit-content;
    max-width: 110px;
    overflow: visible;
}
.status-effects:empty { display: none; }

/* Icône de statut : carré uniforme, image centrée, zéro texte */
.status-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.80);
    border: 2px solid var(--status-color, rgba(139,0,255,0.6));
    border-radius: 8px;
    cursor: default;
    flex-shrink: 0;
    user-select: none;
    position: relative;
    transition: box-shadow 0.15s, border-color 0.15s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 8px var(--status-color, rgba(139,0,255,0.4));
    animation: statusAppear 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
/* Image dans l'icône : remplit tout le carré */
.status-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}
/* Emoji fallback (même taille pour tous) */
.status-icon .status-emoji {
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
    color: var(--status-color, #fff);
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", Arial, sans-serif;
}
/* Badge de durée : coin bas-droit */
.status-icon .status-dur {
    position: absolute;
    bottom: -1px;
    right: 2px;
    font-size: 9px;
    font-weight: bold;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 0 3px #000, 0 0 6px #000;
    pointer-events: none;
    line-height: 1;
}
/* Badge de stack : coin haut-droit */
.status-icon .status-stack {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #e84118;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.6);
    pointer-events: none;
    padding: 0 2px;
}
.status-icon:hover {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.75),
                0 0 18px 5px var(--status-color, rgba(139,0,255,0.8));
    border-color: rgba(255,255,255,0.85);
    z-index: 200;
}
/* Pulsation pour statuts critiques (1 tour restant / paralysie) */
@keyframes statusPulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 8px  var(--status-color); }
    50%       { box-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 18px 4px var(--status-color); }
}
.status-icon.status-critical {
    animation: statusAppear 0.25s cubic-bezier(0.34,1.56,0.64,1),
               statusPulse 0.9s ease-in-out 0.25s infinite;
}

@keyframes statusAppear {
    from { transform: scale(0) rotate(-90deg); opacity: 0; }
    to   { transform: scale(1) rotate(0);      opacity: 1; }
}

/* ============================================================
   NOM DE LA MAP
   ============================================================ */
.map-name-badge {
    position: absolute;
    top: 12px;
    right: 14px;
    background: rgba(0,0,0,0.52);
    color: rgba(255,255,255,0.9);
    font-family: monospace;
    font-size: clamp(9px, 1.1vw, 13px);
    letter-spacing: 0.1em;
    padding: 4px 11px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: 20;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}


/* ============================================================
   BATTLE MENU  — 3 lignes : [bouton | bouton | log | timer]
                              [atk1   | atk2  |     |      ]
                              [atk3   | atk4  |     |      ]
   ============================================================ */
.battle-menu {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 20;
    background-color: #bb94ce;
    border-top: 2px solid #000;
    display: none;
    height: 15vh; max-height: 15vh;
    grid-template-columns: repeat(2, 1fr) minmax(0,1.4fr) 60px;
    grid-template-rows: repeat(2, 1fr);
    gap: 1px;
}

/* ── Bouton fin de tour : dans la grille battle-menu, centré à l'intersection des 4 attaques ── */
#end-turn-btn {
    /* Occupe toute la zone 2×2 des attaques et se centre dedans */
    grid-area: 1 / 1 / 3 / 3;
    place-self: center;
    z-index: 20;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #ffffff, #e8e8ff);
    border: 3px solid #ffffff;
    box-shadow:
        0 0 0 3px rgba(255,255,255,0.55),
        0 0 16px rgba(255,255,255,0.7),
        0 4px 18px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.95);
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4vh;
    color: #333;
    text-shadow: none;
    padding: 0;
    /* pas de position:absolute, pas de left/bottom/transform de positionnement */
}
/* État grisé quand ce n'est plus le tour du joueur */
#end-turn-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(0.5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    pointer-events: none;
}
#end-turn-btn-label {
    font-size: 2.2vh;
    line-height: 1;
    pointer-events: none;
}
#end-turn-btn:not(.disabled):hover {
    background: radial-gradient(circle at 40% 35%, #ffffff, #f0f0ff);
    box-shadow:
        0 0 0 5px rgba(255,255,255,0.75),
        0 0 28px rgba(255,255,255,0.9),
        0 6px 24px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,1);
    transform: scale(1.08);
}
#end-turn-btn:not(.disabled):active {
    transform: scale(0.95);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.4), 0 2px 8px rgba(0,0,0,0.5);
}

/* Étoile PA */
.pa-bar { display: flex; align-items: center; flex-shrink: 0; }
.pa-star {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    font-size: 2.4vh; font-weight: bold; color: #fff;
    font-family: BR;
    background: radial-gradient(circle at 40% 35%, #4fa3ff, #0044cc);
    clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
    text-shadow: 0 1px 4px rgba(0,0,80,0.9);
    filter: drop-shadow(0 0 6px rgba(50,150,255,0.9));
    flex-shrink: 0;
    line-height: 1;
    padding-top: 3px;
}
.attack-button {
    color: white; text-align: center; cursor: pointer;
    font-size: 2.5vh; font-family: Pokemon;
    border-width: 4px; border-style: solid; border-radius: 0;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.3), -4px -4px 10px rgba(255,255,255,0.2);
    position: relative; overflow: visible;
    transition: all 0.3s ease; outline: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.attack-button:hover { box-shadow: 6px 6px 15px rgba(0,0,0,0.4), -6px -6px 15px rgba(255,255,255,0.3); }
.attack-button:hover span { display: inline-block; animation: vibrate 5s infinite; }
.attack-button:active { box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3); transform: translateY(1px); }

.atk-name { font-size: 2.2vh; line-height: 1.1; }
.pa-cost {
    font-family: BR; font-size: 1.5vh;
    background: rgba(0,0,0,0.35); padding: 1px 6px;
    border-radius: 8px; color: #00e5ff; letter-spacing: 1px;
}

/* Types */
.default      { background: linear-gradient(135deg, #ff1500, #ff3f2a); border-color: #ff1900; }
.default:hover{ background: linear-gradient(145deg, #ff3f2a, #ff6f61); border-color: #ff6f61; }
.default:active { border-color: #751409; }

.Thermique        { background: linear-gradient(135deg, #951c11, #961608); border-color: #a11202; }
.Thermique:hover  { background: linear-gradient(145deg, #ff3f2a, #ff6f61); border-color: #ff6f61; }
.Thermique:active { border-color: #ff3f2a; }

.Cannabique        { background: linear-gradient(135deg, #023906, #04670b); border-color: #058205; }
.Cannabique:hover  { background: linear-gradient(145deg, #0c7113, #0fa81a); border-color: #27f84a; }
.Cannabique:active { border-color: #00ff66; }

.Éthylique        { background: linear-gradient(135deg, #0c029d, #3d0ad5); border-color: #214dee; }
.Éthylique:hover  { background: linear-gradient(135deg, #1720d8, #2d1aff); border-color: #00a6ff; }
.Éthylique:active { border-color: #00a6ff; }


/* ── Tooltips (positionnés en JS, appended sur body) ────────────────── */
.tooltip {
    background: #1a1a2e; color: #f0f0f0;
    padding: 10px 16px; border-radius: 10px;
    font-size: 13px; font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 6px 24px rgba(0,0,0,0.7);
    pointer-events: none; z-index: 9999;
    max-width: 240px;
    border: 1.5px solid rgba(255,255,255,0.1);
}
.tooltip em { font-style: italic; color: #bbb; display: block; margin-top: 6px; white-space: pre-wrap; }

.tooltip.Thermique  { border-color: #e84118; box-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 0 8px rgba(232,65,24,0.7),  0 0 20px rgba(232,65,24,0.35); }
.tooltip.Cannabique { border-color: #5cb85c; box-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 0 8px rgba(92,184,92,0.6),  0 0 20px rgba(92,184,92,0.25); }
.tooltip.Éthylique  { border-color: #c8742a; box-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 0 8px rgba(200,116,42,0.6), 0 0 20px rgba(200,116,42,0.3); }

.tooltip.status-poison   { border-color: #8B00FF; box-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 0 8px rgba(139,0,255,0.5); }
.tooltip.status-buff     { border-color: #76c442; box-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 0 8px rgba(118,196,66,0.5); }
.tooltip.status-debuff   { border-color: #ff4444; box-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 0 8px rgba(255,68,68,0.5); }
.tooltip.status-shield   { border-color: #87CEEB; box-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 0 8px rgba(135,206,235,0.5); }
.tooltip.status-paralyze { border-color: #FFD700; box-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 0 8px rgba(255,215,0,0.5); }

.tooltip-type-img-wrapper { text-align: center; margin: 8px 0; }
.tooltip-type-img         { width: 96px; height: 96px; object-fit: contain; }


/* ── PA Panel ────────────────────────────────────────────────────────── */
.pa-panel {
    display: flex; flex-direction: column;
    overflow: hidden;
    background: rgba(0,0,0,0.15);
    border-left: 1px solid #000;
}

/* PA bar container dans les zones de combat */
.pa-bar { display: flex; align-items: center; flex-shrink: 0; }

/* Log combat */
.pa-panel .battle-log {
    flex-grow: 1; overflow-y: scroll;
    padding: 4px 10px;
    font-size: 1.9vh; line-height: 1.35;
    color: #f5eeff;
}


/* ── Battle end ──────────────────────────────────────────────────────── */
.battle-end {
    grid-area: 1 / 1 / 3 / 3; z-index: 1;
    display: none;
    grid-template-columns: repeat(2, 1fr);
}
.battle2menu, .battle2replay {
    background: linear-gradient(135deg, #ff00d4, #00ffe5);
    border: 2px solid #00796b; color: white;
    text-align: center; cursor: pointer;
    font-size: 30px; font-weight: bold; font-family: BR;
    border-radius: 50px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.3), inset 0 1px 4px rgba(255,255,255,0.2);
    transition: all 0.3s ease; position: relative; overflow: hidden; padding: 30px;
}
.battle2menu   { grid-area: 1 / 1 / 2 / 2; }
.battle2replay { grid-area: 1 / 2 / 2 / 3; }
.battle2menu:disabled,
.battle2replay:disabled { background: #b0bec5; border-color: #90a4ae; cursor: not-allowed; opacity: 0.6; }
.battle2menu::before, .battle2replay::before {
    content: ''; position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%; background: rgba(255,255,255,0.4);
    border-radius: 50%; transform: scale(0); transition: transform 0.5s ease; pointer-events: none;
}
.battle2menu:hover::before, .battle2replay:hover::before { transform: scale(1); animation: lightPulse 2s infinite; }
.battle2menu:hover, .battle2replay:hover { background: linear-gradient(135deg, #00ffe5, #ff00d4); transform: translateY(-4px); }
.battle2menu:active, .battle2replay:active { transform: translateY(1px); }


/* ── Timers ──────────────────────────────────────────────────────────── */
.timer-panel { display: flex; flex-direction: column; border-left: 1px solid #000; }
.timer {
    flex: 1; display: flex; align-items: center; justify-content: center;
    font-family: BR; font-size: 2.6vh; font-weight: bold; letter-spacing: 1px;
    transition: color 0.3s, background 0.3s;
}
.timer-opponent { background: rgba(140,0,0,0.75);  color: #fff; border-bottom: 1px solid #000; text-shadow: 0 0 8px rgba(255,80,80,0.9); }
.timer-player   { background: rgba(0,50,160,0.85); color: #fff; text-shadow: 0 0 8px rgba(80,160,255,0.9); }
.timer-opponent.active   { animation: timer-pulse-red  1s ease-in-out infinite alternate; }
.timer-player.active     { animation: timer-pulse-blue 1s ease-in-out infinite alternate; }
.timer-opponent.critical { animation: timer-pulse-red  1s ease-in-out infinite alternate, timer-critical-text-red  0.4s ease-in-out infinite alternate !important; }
.timer-player.critical   { animation: timer-pulse-blue 1s ease-in-out infinite alternate, timer-critical-text-blue 0.4s ease-in-out infinite alternate !important; }


/* ── Animations ──────────────────────────────────────────────────────── */
@keyframes vibrate {
    0%,100% { transform: translateY(0); }
    20%     { transform: translateY(-2px); }
    40%     { transform: translateX(2px); }
    60%     { transform: translateY(-2px); }
    80%     { transform: translateX(2px); }
}
@keyframes clignote   { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes lightEffect{ 0%,100% { transform: scale(0.95); opacity: 0.25; } 50% { transform: scale(1.05); opacity: 0.45; } }
@keyframes lightPulse { 0%,100% { opacity: 0.5; transform: scale(0); }   50% { opacity: 0;   transform: scale(1.5); } }

/* Cadavérique — halo bronze terne, presque rien */
@keyframes lueur_bronze {
    0%   { box-shadow: 0 0  6px 1px rgba(120, 90, 20, 0.45); border-color: #6b5a18; }
    100% { box-shadow: 0 0 10px 2px rgba(100, 80, 15, 0.30); border-color: #5a4a10; }
}

/* Rare — halo bleu acier propre */
@keyframes lueur_silver {
    0%   { box-shadow: 0 0 12px 3px rgba(90, 180, 240, 0.55), 0 0 4px 1px rgba(90,180,240,0.3); border-color: #5ab4f0; }
    100% { box-shadow: 0 0 22px 7px rgba(90, 180, 240, 0.80), 0 0 8px 2px rgba(90,180,240,0.5); border-color: #8dd4ff; }
}

/* Épique — halo violet pulsant */
@keyframes lueur_gold {
    0%   { box-shadow: 0 0 14px 4px rgba(180, 60, 255, 0.6),  0 0 30px 8px rgba(140,0,220,0.3);  border-color: #c050ff; }
    100% { box-shadow: 0 0 28px 10px rgba(220, 80, 255, 0.9), 0 0 55px 15px rgba(180,0,255,0.45); border-color: #e090ff; }
}

/* Légendaire — halo arc-en-ciel tournant */
@keyframes lueur_diamond {
    0%   { box-shadow: 0 0 20px 6px rgba(255,80,80,0.7),   0 0 50px 15px rgba(255,80,80,0.3);   border-color: #ff6060; }
    25%  { box-shadow: 0 0 20px 6px rgba(80,220,120,0.7),  0 0 50px 15px rgba(80,220,120,0.3);  border-color: #50dc78; }
    50%  { box-shadow: 0 0 20px 6px rgba(80,160,255,0.7),  0 0 50px 15px rgba(80,160,255,0.3);  border-color: #50a0ff; }
    75%  { box-shadow: 0 0 20px 6px rgba(220,80,255,0.7),  0 0 50px 15px rgba(220,80,255,0.3);  border-color: #dc50ff; }
    100% { box-shadow: 0 0 20px 6px rgba(255,200,40,0.7),  0 0 50px 15px rgba(255,200,40,0.3);  border-color: #ffc828; }
}
@keyframes arcEnCiel {
    0%   { box-shadow: 0 0 15px 5px rgba(255,0,0,0.6);   }
    25%  { box-shadow: 0 0 15px 5px rgba(255,165,0,0.6); }
    50%  { box-shadow: 0 0 15px 5px rgba(0,255,0,0.6);   }
    75%  { box-shadow: 0 0 15px 5px rgba(0,0,255,0.6);   }
    100% { box-shadow: 0 0 15px 5px rgba(255,0,255,0.6); }
}
@keyframes charge-pulse {
    0%   { transform: rotate(45deg) scale(0.8); }
    50%  { transform: rotate(45deg) scale(1.3); box-shadow: 0 0 20px rgba(255,0,255,1), 0 0 40px rgba(255,0,255,0.6); }
    100% { transform: rotate(45deg) scale(1); }
}
@keyframes full-charge-pulse {
    0%,100% { box-shadow: 0 0 12px rgba(255,0,255,0.8), 0 0 24px rgba(255,0,255,0.4); }
    50%     { box-shadow: 0 0 20px rgba(255,0,255,1),   0 0 40px rgba(255,0,255,0.8), 0 0 60px rgba(255,0,255,0.3); }
}
@keyframes timer-pulse-red  { from { background: rgba(140,0,0,0.75);  } to { background: rgba(180,0,0,0.90);  } }
@keyframes timer-pulse-blue { from { background: rgba(0,50,160,0.85); } to { background: rgba(0,70,200,0.95); } }
@keyframes timer-critical-text-red  {
    from { text-shadow: 0 0  8px rgba(255,80,80,0.9);   font-size: 2.6vh; }
    to   { text-shadow: 0 0 18px rgba(255,80,80,1), 0 0 30px rgba(255,150,150,0.6); font-size: 2.9vh; }
}
@keyframes timer-critical-text-blue {
    from { text-shadow: 0 0  8px rgba(80,160,255,0.9);  font-size: 2.6vh; }
    to   { text-shadow: 0 0 18px rgba(80,160,255,1), 0 0 30px rgba(150,200,255,0.6); font-size: 2.9vh; }
}