/* =========================================================
   HUD combat épuré — V2

   Objectifs :
   - le background reste la scène principale ;
   - HP + nom au-dessus ;
   - portrait centré sur l'arène ;
   - timer au-dessus du nom pour tous les boss ;
   - aucune carte / blur autour de l'ennemi ;
   - géométrie STRICTEMENT identique drawer équipe ouvert ou fermé.
   ========================================================= */

/*
 * Le HUD est ancré dans la surface de combat, pas dans le viewport.
 * Cela évite le décalage horizontal du mode drawer (ancien position:fixed)
 * et rend sa position indépendante de la hauteur du panneau équipe.
 *
 * Le centre visuel du médaillon se retrouve autour de 46 % de la hauteur
 * de jeu : c'est la zone commune des cercles d'arène des backgrounds.
 */
.enemyMonsterContainer,
.gameContainer.monster-panel-open .enemyMonsterContainer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
}

.enemyMonsterHud,
.gameContainer.monster-panel-open .enemyMonsterHud {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: clamp(270px, 36.5dvh, 420px) !important;
    bottom: auto !important;
    z-index: 6 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: min(250px, calc(100vw - 72px)) !important;
    min-width: 0 !important;
    max-width: 250px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateX(-50%) !important;
    animation: none !important;
    overflow: visible !important;
    pointer-events: auto;
}

/* Supprime également les halos/panneaux hérités des variantes boss/bonus. */
.enemyMonsterHud::before,
.enemyMonsterHud.is-boss::before,
.enemyMonsterHud.is-bonus::before {
    content: none !important;
    display: none !important;
}

.enemyMonsterHud.is-boss,
.enemyMonsterHud.is-bonus,
.enemyMonsterHud.enemy-tier-boss5:not(.is-bonus),
.enemyMonsterHud.enemy-tier-boss10:not(.is-bonus),
.enemyMonsterHud.enemy-tier-boss25:not(.is-bonus),
.enemyMonsterHud.enemy-tier-boss50:not(.is-bonus),
.enemyMonsterHud.enemy-tier-boss100:not(.is-bonus) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
}

/* 1 — nom + barre de vie AU-DESSUS du portrait. */
.enemyMonsterInfo,
.gameContainer.monster-panel-open .enemyMonsterInfo {
    order: 1;
    width: min(220px, calc(100vw - 104px)) !important;
    min-width: 0 !important;
    max-width: 220px !important;
    margin: 0 auto 7px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#enemyMonsterName,
.gameContainer.monster-panel-open #enemyMonsterName {
    max-width: 100% !important;
    margin: 0 0 4px !important;
    overflow: hidden;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .96), 0 0 10px rgba(0, 0, 0, .62), 0 0 18px rgba(0, 0, 0, .28);
}


/* Boss normaux et GRAND BOSS : nom plus lisible, toujours sur une ligne. */
.enemyMonsterHud.is-boss .enemyMonsterInfo,
.gameContainer.monster-panel-open .enemyMonsterHud.is-boss .enemyMonsterInfo {
    width: min(236px, calc(100vw - 90px)) !important;
    max-width: 236px !important;
}

.enemyMonsterHud.is-boss #enemyMonsterName,
.gameContainer.monster-panel-open .enemyMonsterHud.is-boss #enemyMonsterName {
    color: #fff0c7 !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    letter-spacing: .1px !important;
    text-shadow:
        0 2px 0 rgba(65, 28, 0, .42),
        0 2px 4px rgba(0, 0, 0, .96),
        0 0 10px rgba(0, 0, 0, .62),
        0 0 18px rgba(66, 29, 2, .32);
}

#enemyMonsterHpBar.progress,
.gameContainer.monster-panel-open #enemyMonsterHpBar.progress {
    width: 100% !important;
    height: 9px !important;
    margin: 0 !important;
    border: 1px solid rgba(245, 250, 255, .96) !important;
    border-radius: 999px !important;
    background: rgba(1, 10, 20, .90) !important;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, .78),
        0 0 0 2px rgba(0, 0, 0, .20),
        0 4px 12px rgba(0, 0, 0, .55),
        0 0 16px rgba(0, 0, 0, .22) !important;
}

.enemyMonsterHpTrack,
.gameContainer.monster-panel-open .enemyMonsterHpTrack {
    position: relative;
    width: 100%;
}

.enemyMonsterFarmStats,
.gameContainer.monster-panel-open .enemyMonsterFarmStats {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 6;
    display: grid;
    justify-items: start;
    gap: 2px;
    margin: 0 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    pointer-events: none;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, .96),
        0 0 8px rgba(0, 0, 0, .62),
        0 0 14px rgba(0, 0, 0, .34) !important;
}

.enemyMonsterFarmStats[hidden],
.gameContainer.monster-panel-open .enemyMonsterFarmStats[hidden] {
    display: none !important;
}

.enemyMonsterFarmStat,
.gameContainer.monster-panel-open .enemyMonsterFarmStat {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    min-height: 11px;
}

.enemyMonsterFarmStat > i,
.gameContainer.monster-panel-open .enemyMonsterFarmStat > i,
.enemyMonsterFarmIcon,
.gameContainer.monster-panel-open .enemyMonsterFarmIcon {
    display: inline-flex;
    width: 12px;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 10px !important;
    text-shadow: inherit !important;
}

#enemyMonsterHpValue,
.gameContainer.monster-panel-open #enemyMonsterHpValue {
    margin: 3px 0 0 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .96), 0 0 10px rgba(0, 0, 0, .34);
}

/*
 * 2 — portrait : exactement la même géométrie dans les deux états du drawer.
 * Les anciennes règles mobile réduisaient le médaillon à 94px / scale 1.34
 * lorsque l'équipe était ouverte ; on neutralise explicitement cette variante.
 */
.enemyMonsterImg,
.gameContainer.monster-panel-open .enemyMonsterImg,
.enemyMonsterImg--medallion,
.gameContainer.monster-panel-open .enemyMonsterImg--medallion {
    order: 2;
    position: relative;
    isolation: isolate;
    width: 124px !important;
    height: 124px !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .40)) drop-shadow(0 2px 20px rgba(0, 0, 0, .22)) !important;
    overflow: visible !important;
}

.creatureMedallion--enemy,
.gameContainer.monster-panel-open .creatureMedallion--enemy {
    width: 112px !important;
    height: 116px !important;
    --medallion-scale: 1.60;
    --medallion-core-top: 10px;
}

.enemyMonsterImg::before,
.gameContainer.monster-panel-open .enemyMonsterImg::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 52%;
    width: 152px;
    height: 122px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
            rgba(0, 0, 0, .78) 0%,
            rgba(0, 0, 0, .52) 38%,
            rgba(0, 0, 0, .24) 62%,
            rgba(0, 0, 0, .06) 78%,
            rgba(0, 0, 0, 0) 88%);
    transform: translate(-50%, -50%);
    filter: blur(8px);
    pointer-events: none;
}

/* Le médaillon existant garde sa couronne/rang, sans second cercle UI. */
.enemyMonsterImg--medallion:not(.is-fallback),
.enemyMonsterHud.is-boss .enemyMonsterImg--medallion:not(.is-fallback),
.enemyMonsterHud.is-bonus .enemyMonsterImg--medallion:not(.is-fallback) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

/* 3 — timer / information boss AU-DESSUS du nom. */
#timer,
.gameContainer.monster-panel-open #timer {
    order: 0;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 auto 4px !important;
    padding: 3px 8px !important;
    border: 1px solid rgba(255, 188, 188, .58) !important;
    border-radius: 999px !important;
    background: rgba(112, 24, 30, .82) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .09) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}

/* Rencontre bonus : le badge reste lisible mais ne recrée pas de panneau. */
.encounterBadgeBonus {
    order: 4;
    margin: 5px auto 0 !important;
}

/* Le bouton d'information loot flotte juste à droite du bloc HP. */
#enemyMonsterContainer .enemyMonsterHud .enemyLootControls {
    top: 8px;
    right: -5px;
}

/* =========================================================
   Prototype Phul 3D (?test=B)
   Même ancrage et même comportement drawer ouvert/fermé.
   Les dimensions 3D calibrées restent celles de battle-enemy-3d.css.
   ========================================================= */
body[data-game-bg-test="B"] .enemyMonsterHud--3d-test,
body[data-game-bg-test="B"] .gameContainer.monster-panel-open .enemyMonsterHud--3d-test {
    position: absolute !important;
    left: 50% !important;
    top: clamp(235px, 31dvh, 350px) !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateX(-50%) !important;
    animation: none !important;
}

body[data-game-bg-test="B"] .enemyMonsterHud--3d-test::before {
    content: none !important;
    display: none !important;
}

body[data-game-bg-test="B"] .enemyMonsterHud--3d-test .enemyMonsterImg--3d-test,
body[data-game-bg-test="B"] .gameContainer.monster-panel-open .enemyMonsterHud--3d-test .enemyMonsterImg--3d-test {
    background: transparent !important;
    box-shadow: none !important;
}

body[data-game-bg-test="B"] .enemyMonsterHud--3d-test .enemyMonsterImg--3d-test::before,
body[data-game-bg-test="B"] .gameContainer.monster-panel-open .enemyMonsterHud--3d-test .enemyMonsterImg--3d-test::before {
    width: 226px;
    height: 150px;
    background: radial-gradient(ellipse at center,
            rgba(0, 0, 0, .54) 0%,
            rgba(0, 0, 0, .28) 44%,
            rgba(0, 0, 0, 0) 76%);
    filter: blur(8px);
}

@media (max-width: 380px) {

    .enemyMonsterHud,
    .gameContainer.monster-panel-open .enemyMonsterHud {
        top: clamp(255px, 35dvh, 330px) !important;
        width: min(226px, calc(100vw - 78px)) !important;
        max-width: 226px !important;
    }

    .enemyMonsterInfo,
    .gameContainer.monster-panel-open .enemyMonsterInfo {
        width: min(202px, calc(100vw - 102px)) !important;
        max-width: 202px !important;
    }
}

/* =========================================================
   V4 — Barre de vie harmonisée drawer ouvert / fermé

   Le vieux responsive utilisait encore width:max-content pour le bloc HP,
   donc la longueur de la barre dépendait du nom du monstre. On impose ici
   exactement la même géométrie dans les deux états de l'équipe.
   ========================================================= */
.gameContainer:not(.monster-panel-open) .enemyMonsterHud,
.gameContainer.monster-panel-open .enemyMonsterHud {
    top: clamp(270px, 36.5dvh, 420px) !important;
    width: min(250px, calc(100vw - 72px)) !important;
    min-width: 0 !important;
    max-width: 250px !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

.gameContainer:not(.monster-panel-open) .enemyMonsterInfo,
.gameContainer.monster-panel-open .enemyMonsterInfo {
    position: relative !important;
    width: min(220px, calc(100vw - 104px)) !important;
    min-width: 0 !important;
    max-width: 220px !important;
    margin: 0 auto 7px !important;
    padding: 0 !important;
}

.gameContainer:not(.monster-panel-open) #enemyMonsterHpBar.progress,
.gameContainer.monster-panel-open #enemyMonsterHpBar.progress {
    width: 100% !important;
    height: 9px !important;
}

/* Le bouton info reste tangent à l'extrémité droite de la barre HP. */
.gameContainer:not(.monster-panel-open) #enemyMonsterContainer .enemyMonsterHud .enemyLootControls,
.gameContainer.monster-panel-open #enemyMonsterContainer .enemyMonsterHud .enemyLootControls {
    top: 14px !important;
    right: -21px !important;
}

@media (max-width: 380px) {

    .gameContainer:not(.monster-panel-open) .enemyMonsterHud,
    .gameContainer.monster-panel-open .enemyMonsterHud {
        top: clamp(255px, 35dvh, 330px) !important;
        width: min(226px, calc(100vw - 78px)) !important;
        max-width: 226px !important;
    }

    .gameContainer:not(.monster-panel-open) .enemyMonsterInfo,
    .gameContainer.monster-panel-open .enemyMonsterInfo {
        width: min(202px, calc(100vw - 102px)) !important;
        max-width: 202px !important;
    }
}

/* =========================================================
   Preview admin — illustrations dédiées aux boss Z100..Z1000

   Géométrie stable : ouvrir/fermer l'équipe ne déplace plus aucun élément
   du HUD GRAND BOSS. Le timer reste ancré sous OPTIMAL, puis viennent le nom,
   la barre HP et le portrait. Seule la taille du dragon peut s'adapter au
   viewport ; sa position relative au HUD reste identique.
   ========================================================= */
/*
 * IMPORTANT : le sélecteur fermé doit être aussi spécifique que celui du drawer
 * ouvert. Sinon la règle générique
 * `.gameContainer:not(.monster-panel-open) .enemyMonsterHud` reprend brièvement
 * la priorité pendant le toggle du drawer et fait sauter le GRAND BOSS avant
 * que le recalage JS ne le remette en place.
 */
.gameContainer:not(.monster-panel-open) .enemyMonsterHud.enemyMonsterHud--milestone-boss,
.gameContainer.monster-panel-open .enemyMonsterHud.enemyMonsterHud--milestone-boss {
    /* Fallback CSS ; le JS ancre ensuite le timer sous l'info OPTIMAL. */
    top: clamp(218px, 29dvh, 310px) !important;
    transform: translate(-50%, var(--milestone-boss-hud-shift-y, 0px)) !important;
    transition: none !important;
}

.enemyMonsterImg.enemyMonsterImg--milestone-boss,
.gameContainer.monster-panel-open .enemyMonsterImg.enemyMonsterImg--milestone-boss {
    /*
     * Une seule formule responsive, identique team ouverte / fermée.
     * Aucun breakpoint ne change la position : seule cette taille varie.
     */
    --milestone-boss-size: min(clamp(198px, 62vw, 275px), calc(100vw - 104px), 36dvh);
    position: relative !important;
    top: 0 !important;
    width: var(--milestone-boss-size) !important;
    height: var(--milestone-boss-size) !important;
    z-index: 1;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 10px 13px rgba(0, 0, 0, .50)) drop-shadow(0 0 18px rgba(255, 211, 92, .14)) !important;
    overflow: visible !important;

    /* Important : empêche le parent 250px de limiter le dragon */
    max-width: none !important;

    /* Centre automatiquement le bloc 350px sur le HUD 250px */
    margin-left: calc((100% - var(--milestone-boss-size)) / 2) !important;

    /* Ton réglage vertical validé */
    margin-top: -30px !important;
}

/* GRAND BOSS : même pile timer > nom > HP que les boss normaux, avec ancrage dédié. */
.enemyMonsterHud.enemyMonsterHud--milestone-boss #timer,
.gameContainer.monster-panel-open .enemyMonsterHud.enemyMonsterHud--milestone-boss #timer {
    order: 0;
    position: relative !important;
    z-index: 8 !important;
    top: auto !important;
    left: auto !important;
    width: max-content !important;
    max-width: calc(100% - 20px) !important;
    margin: 0 auto 2px !important;
    transform: none !important;
    pointer-events: none;
}

.enemyMonsterHud.enemyMonsterHud--milestone-boss .enemyMonsterInfo,
.gameContainer.monster-panel-open .enemyMonsterHud.enemyMonsterHud--milestone-boss .enemyMonsterInfo {
    order: 1;
    z-index: 10;
    margin-bottom: 0 !important;
}

.enemyMonsterHud.enemyMonsterHud--milestone-boss .enemyMonsterImg,
.gameContainer.monster-panel-open .enemyMonsterHud.enemyMonsterHud--milestone-boss .enemyMonsterImg {
    order: 2;
    /* Valeur calibrée manuellement : identique partout, y compris team ouverte. */
    margin-top: -30px !important;
}


/* GRAND BOSS : le nom peut dépasser la largeur du bloc HP sans être tronqué.
 * Le centrage reste géré naturellement par .enemyMonsterHeaderRow (flex/center),
 * donc aucun left/translateX susceptible de décaler le texte. */
.enemyMonsterHud.enemyMonsterHud--milestone-boss .enemyMonsterInfo,
.gameContainer.monster-panel-open .enemyMonsterHud.enemyMonsterHud--milestone-boss .enemyMonsterInfo,
.enemyMonsterHud.enemyMonsterHud--milestone-boss .enemyMonsterHeaderRow,
.gameContainer.monster-panel-open .enemyMonsterHud.enemyMonsterHud--milestone-boss .enemyMonsterHeaderRow {
    overflow: visible !important;
}

.enemyMonsterHud.enemyMonsterHud--milestone-boss #enemyMonsterName,
.gameContainer.monster-panel-open .enemyMonsterHud.enemyMonsterHud--milestone-boss #enemyMonsterName {
    width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    flex: 0 0 auto;

    color: #e53935 !important;
    font-size: 16px !important;
    /* Liseré blanc franc */
    -webkit-text-stroke: 0.5px #000;

    /* surtout aucun text-shadow */
    text-shadow: none !important;

    /* Ombre appliquée APRÈS le contour blanc */
    filter:
        drop-shadow(0 1px 0 #000) drop-shadow(0 1px 1px rgba(0, 0, 0, .95)) drop-shadow(0 0 1px rgba(0, 0, 0, .9));
}

.enemyMonsterHud.is-boss:not(.enemyMonsterHud--milestone-boss) #enemyMonsterName,
.gameContainer.monster-panel-open .enemyMonsterHud.is-boss:not(.enemyMonsterHud--milestone-boss) #enemyMonsterName {
    color: #f78012 !important;

    -webkit-text-stroke: 0.5px #000;
    font-size: 16px !important;
    text-shadow: none !important;

    filter:
        drop-shadow(0 1px 0 #000) drop-shadow(0 1px 1px rgba(0, 0, 0, .95)) drop-shadow(0 0 1px rgba(0, 0, 0, .9));
}

.enemyMonsterHud:not(.is-boss):not(.is-bonus) #enemyMonsterName,
.gameContainer.monster-panel-open .enemyMonsterHud:not(.is-boss):not(.is-bonus) #enemyMonsterName {
    color: #fff !important;

    /* Un peu plus gros que le réglage actuel */
    font-size: 16px !important;
    font-weight: 900 !important;

    -webkit-text-stroke: 0.5px #000;

    text-shadow: none !important;

    filter:
        drop-shadow(0 1px 0 #000) drop-shadow(0 1px 1px rgba(0, 0, 0, .95)) drop-shadow(0 0 1px rgba(0, 0, 0, .9));
}

/*
 * La pastille info est désormais enfant de .enemyMonsterInfo pour toutes les
 * rencontres. Elle hérite donc exactement du même ancrage HP sur un monstre
 * normal et sur un GRAND BOSS, sans correction verticale spécifique.
 */
.enemyMonsterHud .enemyLootControls {
    position: absolute;
    z-index: 35;
}

.enemyMonsterImg--milestone-boss>.milestoneBossPreviewImage,
.gameContainer.monster-panel-open .enemyMonsterImg--milestone-boss>.milestoneBossPreviewImage {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: contain;
    object-position: center center;
    transform: translate3d(0, 0, 0);
    transform-origin: 50% 72%;
    animation: milestoneBossPreviewIdle 3.2s ease-in-out infinite;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    filter: drop-shadow(-2px 8px 4px rgba(0, 0, 0, 1));
}

/*
 * Victoire GRAND BOSS : aucune copie du visuel et aucun badge additionnel.
 * Le même dragon continue son idle pendant ~1,1 s et le conteneur reçoit
 * uniquement un léger pulse. Le texte historique « Vaincu ! » sous la barre HP
 * reste géré par markEnemyDeath() comme pour les autres ennemis.
 */
.enemyMonsterImg--milestone-boss.is-victory-hold {
    z-index: 2;
    transform-origin: 50% 72%;
    animation: milestoneBossVictoryPulse 360ms cubic-bezier(.2, .8, .2, 1) 1;
    will-change: transform;
}

@keyframes milestoneBossVictoryPulse {

    0%,
    100% {
        transform: scale(1);
    }

    44% {
        transform: scale(1.035);
    }
}

@keyframes milestoneBossPreviewIdle {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -5px, 0) scale(1.018);
    }
}

@media (prefers-reduced-motion: reduce) {

    .enemyMonsterImg--milestone-boss>.milestoneBossPreviewImage,
    .enemyMonsterImg--milestone-boss.is-victory-hold {
        animation: none;
    }
}