/* Barres de vie de la partie : mêmes textures et mêmes effets que les jauges du HUD de CHARM (hmp-hud/ui/hud.css : cadre en trois morceaux jauge-gauche/milieu/droite,
   remplissage découpé par jauge-remplissage, bruit et caustiques qui défilent en continu, rougeoiement quand la vie est basse), à la taille d'une barre d'écran. */
@font-face { font-family: VocalColumna; src: url('natif/Columna.ttf'); }
:root { --u: calc(100vh / 1080); --echelle: 2.3; }   /* --u est recalculé par la page d'après la hauteur de l'ÉCRAN (la vue n'en est qu'une bande) */
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; pointer-events: none; user-select: none; color: #e5d5a2; font: calc(13 * var(--u)) VocalColumna, Georgia, serif; }
[hidden] { display: none !important; }

.haut { position: absolute; left: 0; right: 0; top: calc(8 * var(--u)); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: calc(26 * var(--u)); padding: 0 calc(6 * var(--u)); }
.cote { display: flex; flex-direction: column; gap: calc(4 * var(--u)); min-width: 0; }
.entete { display: flex; justify-content: space-between; align-items: baseline; padding: 0 calc(10 * var(--u)); text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.nom { letter-spacing: .14em; text-transform: uppercase; color: #d5c39a; }
.entete b { font-size: calc(17 * var(--u)); letter-spacing: .08em; color: #f1e4b8; font-weight: 400; }
.ennemie .entete { flex-direction: row-reverse; }

/* La barre : un cadre, un remplissage (--niveau), des textures animées. */
.barre { position: relative; height: calc(11 * var(--u) * var(--echelle)); --teinte: #2f8a3c; --niveau: 100%; --motif: calc(430 * var(--u) / 2.75); --tuile: calc(18 * var(--u) * var(--echelle)); }
.jauge-besoin { position: relative; height: 100%; isolation: isolate;
  background: url('textures/jauge-gauche.png') left center / calc(12 * var(--u) * var(--echelle)) 100% no-repeat, url('textures/jauge-droite.png') right center / calc(12 * var(--u) * var(--echelle)) 100% no-repeat, url('textures/jauge-milieu.png') center / auto 100% repeat-x; }
.remplissage-besoin { position: absolute; inset: calc(3 * var(--u) * var(--echelle)) calc(6 * var(--u) * var(--echelle)); border-radius: calc(4 * var(--u) * var(--echelle)); background: var(--teinte); overflow: hidden; isolation: isolate;
  mask: url('textures/jauge-remplissage.png') left center / auto 100% repeat-x; -webkit-mask: url('textures/jauge-remplissage.png') left center / auto 100% repeat-x;
  clip-path: inset(0 calc(100% - var(--niveau)) 0 0); transition: clip-path .45s ease-out; filter: drop-shadow(0 0 3px var(--teinte)); }
.remplissage-besoin i { position: absolute; inset: 0; pointer-events: none; background-repeat: repeat; background-size: var(--motif) var(--tuile); mix-blend-mode: luminosity; }
.vie-bruit { background-image: url('textures/vie-bruit.png'); opacity: .42; animation: barre-x 5.346s linear infinite, barre-y 25.114s linear infinite; }
.vie-caustique { background-image: url('textures/vie-caustique.png'); opacity: .48; animation: barre-x 5.274s linear infinite, barre-y-inverse 18.782s linear infinite; }
@keyframes barre-x { from { background-position-x: 0; } to { background-position-x: var(--motif); } }
@keyframes barre-y { from { background-position-y: 0; } to { background-position-y: calc(-1 * var(--tuile)); } }
@keyframes barre-y-inverse { from { background-position-y: 0; } to { background-position-y: var(--tuile); } }

/* Adversaire : barre en miroir (elle se vide vers le centre) et teinte rouge. */
.ennemie .barre { --teinte: #b3382f; }
.ennemie .jauge-besoin { transform: scaleX(-1); }
/* Vie basse : la teinte vire au rouge sombre et la barre pulse, comme la vie du HUD. */
.alliee .barre.faible { --teinte: #a8322c; }
/* Au repos, rien ne bouge : les textures du remplissage sont suspendues et la pulsation de vie basse n'existe pas. Quand la vie change, barres.js pose la
   classe .anime pendant 2,6 s : les textures défilent et la barre en vie basse pulse deux fois, puis tout se fige de nouveau (plus aucune image à redessiner). */
.vie-bruit, .vie-caustique { animation-play-state: paused; }
.barre.anime .vie-bruit, .barre.anime .vie-caustique { animation-play-state: running; }
.barre.faible.anime .remplissage-besoin { animation: alerte-vie 1.2s ease-in-out 2; }
@keyframes alerte-vie { 50% { opacity: .45; } }
.barre.perte .remplissage-besoin { filter: brightness(2.2) drop-shadow(0 0 6px #fff); }

/* Tour et chrono, entre les deux barres. */
.centre { display: flex; flex-direction: column; align-items: center; min-width: calc(110 * var(--u)); line-height: 1.1; text-shadow: 0 1px 3px #000, 0 0 10px #000, 0 0 18px #000c; }
.tour { font-size: calc(14 * var(--u)); letter-spacing: .18em; text-transform: uppercase; color: #d9bd7a; }
.chrono { font-size: calc(38 * var(--u)); font-variant-numeric: tabular-nums; color: #f6ead0; }
.chrono.urgent { color: #ff8a70; }

/* Zoom d'une carte : les barres sont assombries et floutées avec le reste. */
.haut.flou { filter: blur(4px) brightness(.55); }

/* Animations 3D désactivées (réglage du menu Échap) : les animations en boucle s'arrêtent (celles d'entrée finissent aussitôt, dans leur état final). */
.sans-3d *, .sans-3d *::before, .sans-3d *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }