/* Blok życia w lewym dolnym rogu: znaczek poziomu z pierścieniem doświadczenia, pasek zdrowia, trzy mierniki potrzeb. */
/* #vitals jest poza #hud (index.html), więc sam trzyma styl tekstu z #hud; z plecakiem otwartym wychodzi nad jego zasłonę (blur), żeby paski były ostre */
#vitals { position: absolute; z-index: 0; left: 22px; bottom: 20px; display: flex; align-items: flex-end; gap: 12px; pointer-events: none; text-transform: uppercase; letter-spacing: .08em; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
body.inv-open #vitals { z-index: 21; }

@media (max-width: 1500px) { #hpbar { width: 190px; } }                                 /* przy węższym oknie pasek zdrowia nie wchodzi pod pasek przedmiotów */

/* poziom + doświadczenie */
#lvlwrap { position: relative; width: 72px; height: 72px; flex: none; }
#lvlwrap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xp-track { fill: rgba(15,17,11,.82); stroke: rgba(160,138,74,.25); stroke-width: 4; }
.xp-ring { fill: none; stroke: #d9b546; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 157.08; stroke-dashoffset: 157.08; transition: stroke-dashoffset .5s ease-out; filter: drop-shadow(0 0 3px rgba(217,181,70,.55)); }
#lvl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 28px Bahnschrift, sans-serif; color: #f4dc8a; text-shadow: 0 2px 4px #000; padding-bottom: 6px; }
.lv-cap { position: absolute; left: 0; right: 0; bottom: 11px; text-align: center; font: 700 8px Bahnschrift, sans-serif; letter-spacing: .2em; color: #a38f52; }

#vcol { display: flex; flex-direction: column; gap: 8px; }

/* zdrowie */
#hpbar { position: relative; width: 262px; height: 22px; background: rgba(12,14,9,.85); border: 1px solid #6e6a56; box-shadow: inset 0 0 6px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.45); overflow: hidden; }
#hpbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
#hpfill { background: linear-gradient(180deg, #d4483a 0%, #a02f25 55%, #7a2019 100%); transition: width .12s ease-out; box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
#hptrail { background: rgba(235,220,190,.7); transition: width .9s ease-in .35s; }          /* biały ślad po stracie zdrowia */
#hpnum { position: absolute; right: 7px; top: 0; line-height: 22px; font: 700 15px Bahnschrift, sans-serif; color: #f1ebd2; text-shadow: 0 1px 3px #000, 0 0 4px #000; letter-spacing: .04em; }
#hpbar::before { content: ''; position: absolute; left: 7px; top: 4px; width: 14px; height: 14px; z-index: 2;                  /* krzyżyk medyczny */
  background: linear-gradient(#f1ebd2, #f1ebd2) center / 100% 30% no-repeat, linear-gradient(#f1ebd2, #f1ebd2) center / 30% 100% no-repeat; filter: drop-shadow(0 1px 2px #000); opacity: .9; }

/* paski potrzeb */
#needs { display: flex; flex-direction: column; gap: 3px; pointer-events: none; user-select: none; width: 262px; }
.need { display: flex; align-items: center; gap: 6px; height: 14px; }
.need svg { width: 14px; height: 14px; fill: var(--nc); stroke: rgba(10,12,7,.8); stroke-width: 1; stroke-linejoin: round; filter: drop-shadow(0 1px 1px #000); flex: none; }
.n-bar { position: relative; flex: 1; height: 7px; background: rgba(12,14,9,.85); border: 1px solid #5a5746; box-shadow: inset 0 0 4px rgba(0,0,0,.7); overflow: hidden; }
.n-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--nc); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); transition: width .35s ease-out; }
.need b { width: 24px; text-align: right; font: 700 11px Bahnschrift, sans-serif; color: #d8d2b4; text-shadow: 0 1px 2px #000; }
.need em { display: none; position: absolute; left: 30px; top: 50%; transform: translateY(-50%); z-index: 2; white-space: nowrap; font: 800 9px Bahnschrift, sans-serif; font-style: normal; letter-spacing: .14em; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.need { position: relative; }
/* < 40: pasek żółknie, ikona pulsuje */
.need.warn .n-bar { border-color: #c9a23a; }
.need.warn svg { animation: nicon 1.4s ease-in-out infinite; }
.need.warn b { color: #f0d27a; }
/* < 25: pasek grubszy, czerwony, z poświatą i podpisem */
.need.low { height: 18px; }
.need.low .n-bar { height: 11px; border-color: #e0452f; box-shadow: inset 0 0 4px rgba(0,0,0,.7), 0 0 9px rgba(224,69,47,.75); animation: nglow 1s ease-in-out infinite; }
.need.low .n-bar i { background: #e0452f; animation: nlow 1s ease-in-out infinite; }
.need.low svg { fill: #ff5a40; width: 18px; height: 18px; animation: nicon .9s ease-in-out infinite; }
.need.low b { color: #ff8a78; font-size: 13px; }
.need.low em { display: block; animation: nlow 1s ease-in-out infinite; }
/* < 10: szybkie mruganie */
.need.crit .n-bar, .need.crit .n-bar i, .need.crit em { animation-duration: .45s; }
.need.crit svg { animation-duration: .45s; }
.need.crit em { background: #b0281a; color: #fff; }
@keyframes nicon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes nglow { 0%, 100% { box-shadow: inset 0 0 4px rgba(0,0,0,.7), 0 0 4px rgba(224,69,47,.4); } 50% { box-shadow: inset 0 0 4px rgba(0,0,0,.7), 0 0 14px rgba(255,90,64,1); } }
@keyframes nlow { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* krwawienie: znacznik pod paskami potrzeb */
.bleed-tag { display: none; align-items: center; gap: 6px; height: 18px; margin-top: 2px; padding: 0 7px 0 4px; align-self: flex-start; background: rgba(70,12,10,.82); border: 1px solid #b0382c; font: 800 11px Bahnschrift, sans-serif; letter-spacing: .12em; color: #f0b6ac; text-shadow: 0 1px 2px #000; animation: nlow 1s ease-in-out infinite; }
.bleed-tag.on { display: flex; }
.bleed-tag svg { width: 12px; height: 12px; fill: #e0452f; stroke: rgba(10,12,7,.8); stroke-width: 1; }
.bleed-tag b { color: #fff; font-variant-numeric: tabular-nums; }
.bleed-tag em { font-style: normal; font-weight: 600; letter-spacing: .04em; color: #c9958c; text-transform: none; }

/* pływanie: pasek energii pulsuje (jak przy niskim poziomie, ale w barwie wody), pod paskami znacznik; przy niskiej energii znacznik robi się czerwony */
.need.swim .n-bar i { animation: nswim .9s ease-in-out infinite; }
@keyframes nswim { 0%, 100% { opacity: 1; filter: none; } 50% { opacity: .55; filter: hue-rotate(-40deg) brightness(1.25); } }
.swim-tag { display: none; align-items: center; gap: 6px; height: 18px; margin-top: 2px; padding: 0 7px 0 4px; align-self: flex-start; white-space: nowrap; background: rgba(12,40,56,.82); border: 1px solid #3f8fb3; font: 800 11px Bahnschrift, sans-serif; letter-spacing: .12em; color: #b9e0f0; text-shadow: 0 1px 2px #000; }
.swim-tag.on { display: flex; }
.swim-tag svg { width: 13px; height: 13px; fill: #5fb4da; stroke: rgba(10,12,7,.8); stroke-width: .8; }
.swim-tag em { font-style: normal; font-weight: 600; letter-spacing: .04em; color: #8fbdd2; text-transform: none; }
/* zatrucie brudną wodą (WATER1): zielonkawy znacznik pod paskami, energia spada szybciej */
.poison-tag { display: none; align-items: center; gap: 6px; height: 18px; margin-top: 2px; padding: 0 7px 0 4px; align-self: flex-start; white-space: nowrap; background: rgba(30,46,20,.85); border: 1px solid #6a9a42; font: 800 11px Bahnschrift, sans-serif; letter-spacing: .12em; color: #d4eeb8; text-shadow: 0 1px 2px #000; }
.poison-tag.on { display: flex; }
.poison-tag svg { width: 13px; height: 13px; fill: #9ccc62; stroke: rgba(10,12,7,.8); stroke-width: .8; }
.poison-tag em { font-style: normal; font-weight: 600; letter-spacing: .04em; color: #b6d69a; text-transform: none; }
.swim-tag.warn { background: rgba(70,12,10,.86); border-color: #b0382c; color: #f0b6ac; animation: nlow .7s ease-in-out infinite; }
.swim-tag.warn svg { fill: #e0452f; }
.swim-tag.warn em { color: #e3a79e; }
@media (max-width: 1500px) { .swim-tag { letter-spacing: .06em; } .swim-tag em { letter-spacing: 0; } }

/* przy węższym oknie paski zdrowia i potrzeb nie wchodzą pod pasek przedmiotów (reguła z początku pliku przegrywała z późniejszym `#hpbar { width: 262px }`; 1280×720: pasek przedmiotów zaczyna się 300 px od lewej) */
@media (max-width: 1500px) { #hpbar, #needs { width: 190px; } }
.bleed-tag { white-space: nowrap; }
@media (max-width: 1500px) { .bleed-tag { letter-spacing: .06em; } .bleed-tag em { letter-spacing: 0; } }

/* podgląd przedmiotu z plecaka: pasek, który napełni, jaśnieje, a jaśniejsze pole pokazuje stan po użyciu */
.n-bar u { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.75) 0 4px, rgba(255,255,255,.45) 4px 8px); transition: width .15s ease-out; }
.need.pv .n-bar { border-color: #fff; box-shadow: inset 0 0 4px rgba(0,0,0,.7), 0 0 10px var(--nc); height: 11px; }
.need.pv { height: 18px; }
.need.pv svg { transform: scale(1.3); filter: drop-shadow(0 0 4px var(--nc)); }
.need.pv b { color: #fff; }
#hppv { background: repeating-linear-gradient(115deg, rgba(160,235,140,.9) 0 5px, rgba(120,200,105,.7) 5px 10px); width: 0; transition: width .15s ease-out; }
#hpbar.pv { border-color: #b6f0a0; box-shadow: inset 0 0 6px rgba(0,0,0,.7), 0 0 12px rgba(140,230,120,.8); }
#hpbar.pv-neg { border-color: #f0913a; box-shadow: inset 0 0 6px rgba(0,0,0,.7), 0 0 12px rgba(240,145,58,.85); }
#hpbar.pv-neg #hpfill { filter: hue-rotate(25deg) brightness(1.25); }