/* Pasek bossa (ui/bossbar.js): u góry ekranu, nazwa i faza nad paskiem zdrowia z nacięciami na 66% i 33%. */
#bossbar {
  position: fixed;
  top: 118px;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 62vw);
  z-index: 30;
  pointer-events: none;
  font-family: Bahnschrift, 'Segoe UI', sans-serif;
  color: #ece6c8;
}
#bossbar[hidden] { display: none; }
#bossbar .bb-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  text-shadow: 0 1px 2px #000;
}
#bossbar .bb-name { font-size: 13px; letter-spacing: 0.14em; font-weight: 700; }
#bossbar .bb-phase { font-size: 11px; letter-spacing: 0.12em; color: #c9b98a; }
#bossbar .bb-bar {
  position: relative;
  height: 12px;
  background: rgba(10, 12, 8, 0.85);
  border: 1px solid #13150f;
  border-radius: 3px;
  overflow: hidden;
}
#bossbar .bb-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(#b8432f, #7e2a1f);
  transition: width 0.25s linear;
}
#bossbar .bb-cut {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #13150f;
  transform: translateX(-1px);
}