/* the buffs from potions, elixirs, dishes and the town's services, as icons under the profile (js/buffrow.js, 2026-10-18).
   Each icon wears the HUD's gold item slot (Obsidian Gold); sizes follow the HUD unit --u (set on #ui by js/hudlayout.js).
   Text outlines are a crisp 1px ring, never a soft halo. */
#buffrow { position: absolute; z-index: 3; --bz: max(26px, calc(var(--u, 1) * 32px)); --bw: max(var(--bz), 34px); --bg: max(3px, calc(var(--u, 1) * 4px));
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: calc(var(--u, 1) * 2px) var(--bg);
  max-width: calc(var(--bw) * var(--per, 6) + var(--bg) * (var(--per, 6) - 1)); pointer-events: none; }
#buffrow > * { pointer-events: auto; }
#buffrow .br-ic { position: relative; display: flex; flex-direction: column; align-items: center; width: var(--bw); padding: 0; margin: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#buffrow .br-fr { position: relative; display: block; width: var(--bz); height: var(--bz); background: url(../assets/ui_book/hud_item_slot.png) center / 100% 100% no-repeat; }
#buffrow .br-fr img { position: absolute; left: 15%; top: 15%; width: 70%; height: 70%; object-fit: contain; pointer-events: none; }
/* the clock sweep: the part of the time already gone, dark, clockwise from the top */
#buffrow .br-sw { position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; border-radius: 18%; pointer-events: none;
  background: conic-gradient(rgba(5, 4, 7, 0.6) calc(var(--k, 0) * 360deg), rgba(5, 4, 7, 0) 0); }
/* the tier: a coloured line along the inside bottom and the Roman mark in the corner */
#buffrow .br-ic[class*=" t"] .br-fr::after { content: ''; position: absolute; left: 16%; right: 16%; bottom: 13%; height: max(1.5px, calc(var(--u, 1) * 2px)); border-radius: 2px; background: var(--tc, #ece6d6); pointer-events: none; }
#buffrow .br-tr { position: absolute; left: 9%; top: 6%; font: 800 max(8px, calc(var(--u, 1) * 8.5px)) / 1 Fredoka, Mali, sans-serif; font-style: normal; color: var(--tc, #ece6d6); letter-spacing: -0.02em;
  text-shadow: 1px 0 0 #050407, -1px 0 0 #050407, 0 1px 0 #050407, 0 -1px 0 #050407; pointer-events: none; }
/* the time left, a small pill under the slot */
#buffrow .br-t { position: relative; z-index: 1; margin-top: calc(var(--u, 1) * -4px); min-width: calc(var(--bz) * 0.72); padding: 1px max(2px, calc(var(--u, 1) * 3px)); box-sizing: border-box; border-radius: calc(var(--u, 1) * 6px);
  background: var(--hud-navy, rgba(11, 10, 14, 0.9)); border: 1px solid var(--hud-gold, #d9a443); color: #fff3d6; text-align: center; white-space: nowrap;
  font: 700 max(8.5px, calc(var(--u, 1) * 9.5px)) / 1.25 Fredoka, Mali, sans-serif; font-variant-numeric: tabular-nums; pointer-events: none; }
#buffrow .br-ic:hover .br-fr, #buffrow .br-ic.on .br-fr { filter: brightness(1.2); transform: translateY(-1px); }
#buffrow .br-ic.on .br-t { border-color: #ffe08a; }
/* the last 10 seconds: it blinks, the time turns red */
#buffrow .br-ic.low .br-fr { animation: br-blink 0.5s ease-in-out infinite alternate; }
#buffrow .br-ic.low .br-t { color: #ff9a8a; border-color: #ff6a5a; }
@keyframes br-blink { from { opacity: 1; } to { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { #buffrow .br-ic.low .br-fr { animation-duration: 1s; } }
/* (the UI studio is open and nothing is running: a dashed place to drag) */
#buffrow .br-ph { display: grid; place-items: center; width: calc(var(--bz) * 3 + var(--bg) * 2); height: calc(var(--bz) + var(--u, 1) * 8px); border: 1.5px dashed var(--hud-gold, #d9a443); border-radius: 8px;
  background: rgba(11, 10, 14, 0.55); color: #ffe9b8; font: 600 max(10px, calc(var(--u, 1) * 10px)) / 1.2 Mali, sans-serif; text-align: center; }

/* the tip of one buff (hover, or a tap to keep it): which buff, what it gives, the time left - nothing more */
#buffrow-card { position: absolute; z-index: 8; width: max-content; max-width: min(330px, calc(100vw - 16px)); pointer-events: auto; cursor: pointer; }
#buffrow-card .brc-in { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 7px; border-radius: 10px; background: rgba(16, 13, 9, 0.96); border: 1.5px solid #d9a443; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); color: #f1ead6; font-family: Mali, sans-serif; }
#buffrow-card .brc-ic { flex: none; width: 30px; height: 30px; object-fit: contain; }
#buffrow-card .brc-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#buffrow-card .brc-h { display: flex; align-items: baseline; gap: 8px; }
#buffrow-card .brc-h b { font: 700 14px/1.3 Mali, sans-serif; color: #ffe9b8; }
#buffrow-card .brc-left { margin-left: auto; font: 600 11.5px/1.3 Fredoka, Mali, sans-serif; font-style: normal; color: #cfc6b0; white-space: nowrap; font-variant-numeric: tabular-nums; }
#buffrow-card.low .brc-left { color: #ff9a8a; }
#buffrow-card .brc-fx { font: 700 13px/1.4 Mali, sans-serif; color: #b8f0a8; }
#buffrow-card .brc-fx span { white-space: nowrap; }