/* ==========================================================
   HUD COURBÉ – rails fins + néon + XP + bouclier
   ========================================================== */

:root{
    --hud-tilt: 52deg;
    --hud-width: min(45vw, 1120px);
    --hud-height: 148px;                 /* un peu plus haut pour cas bouclier */
    --rail-thickness: 25px;
    --shield-offset: 76px;
    --outer-pad: 4%; /* même marge visuelle des deux côtés */

    --hp1: #ff5a5a;  --hp2: #b80000;     --hpGlow: rgba(255, 80,  80, 1);
    --mp1: #3ad0ff;  --mp2: #0052ff;     --mpGlow: rgba( 80,180,255, 1);
    --sh1: #9de6ff;  --sh2: #22c1ff;     --shGlow: rgba(140,220,255, 1);
    --xp1: #ffd247;  --xp2: #ffe66e;
}

/* -------- conteneur global -------- */
#playerHud{
    position: fixed;
    left: 50%;
    bottom: 25px;                        /* HUD plus bas */
    transform: translateX(-50%);
    width: var(--hud-width);
    height: var(--hud-height);
    pointer-events: none;
    z-index: 999;
}

/* arc de profondeur */
#hudArcBase{
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%) perspective(1000px) rotateX(var(--hud-tilt));
    width: calc(100% - (var(--outer-pad) * 2)) !important;
    height: 78px;
    border-radius: 999px;
    background: radial-gradient(120% 200% at 50% 160%,
               rgba(0,150,255,.30) 18%,
               rgba(0, 90,180,.18) 48%,
               rgba(0,0,0,0) 62%);
    filter: blur(1px) saturate(1.05);
    z-index: 0;
}

/* -------- rails (gabarits) -------- */
#playerHud .hudBar{
    position: absolute;
    bottom: 30px;                        /* rails au-dessus de l'XP */
    width: calc(50% - var(--outer-pad)); /* centrage exact */
    height: 64px;
    border-radius: 999px;
    overflow: visible;
    background: transparent;
    z-index: 1;
}
#healthBarContainer{ left: var(--outer-pad); }
#manaBarContainer  { right: var(--outer-pad); }

/* variante plein-centre (bouclier) */
.hudBar-full{
    left: var(--outer-pad) !important;
    right: var(--outer-pad) !important;
    width: auto !important;
    bottom: var(--shield-offset) !important;
}

/* halo diffus sous chaque rail */
#playerHud .hudBar::before{
    content:"";
    position:absolute; left:0; right:0; bottom:30px; /* pas de marge interne */
    height: var(--rail-thickness);
    border-radius: 999px;
    background: var(--under, rgba(0,200,255,.22));
    filter: blur(32px) saturate(1.28);
    opacity: 1;
    mask-image: radial-gradient(180% 120% at 50% 150%, #000 64%, transparent 70%);
    z-index:0;
}
.hudBar-health{ --under: rgba(255, 70, 70, .24); }
.hudBar-mana  { --under: rgba( 60,180,255, .24); }
.hudBar-shield{ --under: rgba(140,220,255, .30); z-index: 2;}

/* remplissage rail (super glow façon XP) */
.hudBar-fill{
    position:absolute;
    left:0; right:0;                    /* pas de marge interne */
    bottom:30px;
    height: var(--rail-thickness);
    width:100%;
    border-radius:999px;
    mask-image: radial-gradient(180% 120% at 50% 150%, #000 64%, transparent 70%);
    box-shadow:
        0 0 14px  currentColor,
        0 0 32px  currentColor,
        0 0 64px  currentColor,
        0 0 120px currentColor,
        0 0 180px currentColor,
        inset 0 0 12px rgba(0,0,0,.35);
    filter: saturate(1.28);
    z-index:1;
    transform-origin: left center;
    transform: scaleX(var(--fill, 1));
    will-change: transform;
}
/* halo fin collé au rail */
.hudBar-fill::before {
    content:"";
    position:absolute; inset:-3px;
    border-radius:inherit;
    box-shadow:
        0 0 28px currentColor,
        0 0 60px currentColor;
    opacity:.6; pointer-events:none;
}
/* reflet linéaire */
.hudBar-fill::after{
    content:"";
    position:absolute; left:0; right:0; top:-1px; height:1px;
    border-radius:inherit;
    background: linear-gradient(90deg, rgba(255,255,255,.45), rgba(255,255,255,.05), rgba(255,255,255,.45));
    opacity:.35; pointer-events:none;
}

/* couleurs & origines (fills alignés aux conteneurs) */
#healthBar{
    background: linear-gradient(90deg, var(--hp1), var(--hp2));
    color: var(--hpGlow);
    transform-origin: left center !important;
    left: 0 !important; right: 0 !important;
}
#manaBar{
    background: linear-gradient(90deg, var(--mp1), var(--mp2));
    color: var(--mpGlow);
    transform-origin: right center !important;
    left: 0 !important; right: 0 !important;
}
#shieldBar{
    left: 0 !important; right: 0 !important; width: 100% !important;
    background: linear-gradient(90deg, var(--sh1), var(--sh2));
    color: var(--shGlow);
    transform-origin: left center !important;
}

/* -------- libellés à plat -------- */
#hudLabels{
    position:absolute;
    left:0; right:0;
    bottom: calc(30px + var(--rail-thickness) + 14px);
    display:grid;
    grid-template-columns: 1fr auto 1fr; /* hp | shield | mana */
    align-items: center;
    padding: 0 8%;
    pointer-events: none;
    z-index: 3;
}
#hudLabels .hudLabel{
    font-family: "Audiowide", system-ui;
    font-weight: 800;
    font-size: 1.06rem;
    letter-spacing: .1em;
    color:#fff;
    text-shadow: 0 0 12px rgba(0,0,0,.85);
}
#hudLabels .sh {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 47px;
}

/* -------- XP intégrée (en bas du HUD) -------- */
#hudXP{
    position:absolute;
    left:50%;
    bottom: 0;                            /* au plus bas du HUD */
    transform: translateX(-50%);
    width: min(42vw, 620px);
    height: 36px;
    pointer-events: none;
    z-index: 999;
}
#expBar{
    position:absolute; left:0; right:0; bottom:-5px;
    transform: translateY(-50%);
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 8px 20px rgba(0,0,0,.35);
}
#expProgress{
    position:absolute; left:0; top:0; height:100%; width:0%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--xp1), var(--xp2));
    box-shadow:
        0 0 10px rgba(255,210,70,.85),
        0 0 24px rgba(255,190,40,.70),
        0 0 46px rgba(255,210,70,.60);
}
#currentLevel{
    position:absolute; bottom: 5px; left:50%;
    transform: translateX(-50%);
    font-weight:800; color:#fff;
    text-shadow: 0 0 10px rgba(0,0,0,.85);
}
#expPercentageText{
    position:absolute; top: calc(100% + 6px); left:50%;
    transform: translateX(-50%);
    font-weight: 800; font-size: .9rem;
    color:#eaf6ff;
    text-shadow: 0 0 10px rgba(0,0,0,.85), 0 0 14px rgba(255,210,70,.55);
}

/* Conteneur de l'indication de niveau */
#levelUpIndicator {
    position: fixed;
    bottom: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    font-weight: bold;
    color: gold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0.8);
    padding: 10px 30px;
    border-radius: 5px;
    border: 2px solid gold;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 1001;
}
#levelUpIndicator.show { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
#levelUpIndicator.hide { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Bouclier caché par défaut (sans classe .hidden) */
#shieldBarContainer, #shieldText { display: none; }

/* Place le texte de la MANA au-dessus de la barre de droite */
#hudLabels .mp{
    position: absolute;
    right: 8%;
    bottom: 0;
    transform: none;
    justify-self: auto;
}
#hudLabels .hp{
  position:absolute;
  left:8%;
  bottom: 0;
  transform:none;
  justify-self:auto;
}