.powerup-buffs {
  position: absolute; top: 143px; left: 14px; display: flex; flex-direction: column;
  gap: 5px; width: 183px; margin: 0; padding: 0; list-style: none; pointer-events: none;
}
.powerup-buffs[hidden], .powerup-buff[hidden] { display: none; }
.powerup-buff {
  position: relative; display: flex; align-items: center; gap: 6px; min-height: 37px;
  padding: 2px 6px 7px; color: #ffff00;
  background: #453d2e url('/assets/ui/panel-texture.png');
  border: 2px ridge #9c8960; box-shadow: inset 0 0 0 1px #30291e, 1px 1px 0 #17130f;
  font-family: var(--rs-font, 'OSRS Plain', monospace); line-height: 1;
  text-shadow: 1px 1px #000;
}
.powerup-buff-icon { width: 24px; height: 24px; flex-shrink: 0; object-fit: contain; image-rendering: pixelated; }
.powerup-buff strong { min-width: 0; font-size: 15px; font-weight: normal; white-space: nowrap; }
.powerup-buff output { margin-left: auto; font-size: 14px; color: #f2e9d2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.powerup-buff-track { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; background: #1b1710; box-shadow: 0 1px #6c5c3e; }
.powerup-buff-track > span { display: block; height: 100%; background: #b49b5b; box-shadow: inset 0 1px #d3ba77; }
body[data-touch-controls=true] .powerup-buffs { top: 205px; width: 145px; left: max(9px, env(safe-area-inset-left)); }
body[data-touch-controls=true]:has(#boss-hud:not([hidden])) .powerup-buffs { width: 86px; }
body[data-touch-controls=true]:has(#boss-hud:not([hidden])) .powerup-buff strong { display: none; }
@media (max-width: 600px) {
  .powerup-buffs { top: 132px; left: 9px; width: 145px; gap: 4px; }
  .powerup-buff { gap: 4px; padding: 1px 4px 5px; min-height: 30px; }
  .powerup-buff-icon { width: 20px; height: 20px; }
  .powerup-buff strong, .powerup-buff output { font-size: 13px; }
}
@media (min-width: 601px) and (max-height: 500px) {
  body[data-touch-controls=true] .powerup-buffs { top: 144px; width: 145px; gap: 4px; }
  body[data-touch-controls=true] .powerup-buff { gap: 4px; padding: 1px 4px 5px; min-height: 30px; }
  body[data-touch-controls=true] .powerup-buff-icon { width: 20px; height: 20px; }
  body[data-touch-controls=true] .powerup-buff strong,
  body[data-touch-controls=true] .powerup-buff output { font-size: 13px; }
}
@media (min-width: 601px) and (max-height: 380px) {
  body[data-touch-controls=true] .powerup-buffs { top: 144px; width: auto; flex-direction: row; }
  body[data-touch-controls=true]:has(#boss-hud:not([hidden])) .powerup-buffs { width: max-content; }
  body[data-touch-controls=true] .powerup-buff strong { display: none; }
  body[data-touch-controls=true] .powerup-buff { padding: 1px 3px 6px; gap: 3px; min-height: 27px; }
  body[data-touch-controls=true] .powerup-buff-icon { width: 16px; height: 16px; }
  body[data-touch-controls=true] .powerup-buff output { font-size: 11px; }
}