#boss-action { margin: 7px 0 0; color: #ffc484; font: bold 11px/1.3 Arial, sans-serif; text-shadow: -1px 0 #17130e, 1px 0 #17130e, 0 -1px #17130e, 0 1px #17130e, 0 2px 2px #000; }
#boss-action:empty { display: none; }
#second-boss { margin-top: 9px; }
#second-boss .boss-title { font-size: 9px; }
#second-boss-value { display: block; margin-top: 3px; font: 9px Arial, sans-serif; color: var(--cream); }

.extra-boss { margin-top: 7px; font: 9px Arial, sans-serif; }
.extra-boss strong, .extra-boss output { display: block; margin: 3px 0; }
#boss-hud { max-height: 43dvh; overflow-y: auto; scrollbar-width: thin; pointer-events: auto; }

.olm-hud { margin-top: 7px; font: 13px/1.2 var(--rs-font, Arial, sans-serif); color: var(--cream); }
.olm-phase-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; color: #ffb000; }
.olm-phase-heading strong { font-weight: normal; white-space: nowrap; }
.olm-phase-heading span { color: #e8d7ad; }
.olm-status { margin: 4px 0 5px; font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.olm-hands { display: grid; gap: 5px; }
.olm-hand { min-width: 0; }
.olm-hand-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1px 6px; font-size: 12px; }
.olm-hand-line strong { font-weight: normal; }
.olm-hand-line small { margin-left: 5px; color: #c4bda9; font: 11px var(--rs-font, Arial, sans-serif); }
.olm-hand-line small:empty { display: none; }
.olm-hand-line output { font-size: 11px; white-space: nowrap; color: #fff; }
.olm-hand-track { height: 7px; margin-top: 2px; border-width: 1px; }
.olm-hand.is-disabled .olm-hand-track { background: #3c3934; }
.olm-hand.is-disabled .olm-hand-line { color: #c4bda9; }
.olm-hand.is-recovering .olm-hand-track > div { background: #c49e35; }
.olm-hand.is-recovering .olm-hand-line small, .olm-hand-window { color: #ffcf72; }
.olm-hand-window { display: block; margin-top: 5px; font-size: 12px; }
.olm-hud.is-transitioning .olm-phase-heading { color: #e8d7ad; }
@media (max-height: 500px) and (min-width: 601px) {
  #boss-hud.has-olm > .boss-title { justify-content: flex-start; margin-bottom: 2px; }
  #boss-hud.has-olm > .boss-title strong { font-size: 16px; line-height: 1; }
  #boss-hud.has-olm > .boss-health { height: 8px; }
  #boss-hud.has-olm > #boss-value { position: absolute; top: 1px; right: 0; margin: 0; font-size: 11px; }
  .olm-hud { margin-top: 4px; font-size: 12px; }
  .olm-status { margin: 3px 0; font-size: 11px; line-height: 1.1; }
  .olm-hands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .olm-hand-line { font-size: 11px; line-height: 1.1; }
  .olm-hand-track { height: 6px; margin-top: 1px; }
  .olm-hand-window { margin-top: 3px; font-size: 11px; }
  body[data-touch-controls=true] #boss-hud.has-olm { top: 64px; left: 50%; right: auto; width: 310px; transform: translateX(-50%); }
  body[data-dev-mode=true]:has(#boss-hud.has-olm) .ability-slot { height: 48px; min-height: 48px; padding: 3px 2px 7px; gap: 1px; }
  body[data-dev-mode=true]:has(#boss-hud.has-olm) .ability-icon,
  body[data-dev-mode=true]:has(#boss-hud.has-olm) .empty-ability-icon { display: none; }
  body[data-dev-mode=true]:has(#boss-hud.has-olm) .ability-name { min-height: 14px; font-size: 12px; }
  body[data-dev-mode=true]:has(#boss-hud.has-olm) .ability-status { min-height: 11px; font-size: 10px; }
}