/* the second row of quick slots, for buff potions and food, above the item slots (js/buffbar.js, 2026-10-14); its picker and
   its settings. Slots wear the HUD's own item-slot frame. */
#buffbar { position: absolute; z-index: 3; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
#buffbar > * { pointer-events: auto; }
#buffbar .bb-row { display: flex; gap: var(--bg, 4px); }
#buffbar .bb-slot { position: relative; width: var(--bs, 48px); height: var(--bs, 48px); padding: 0; border: 0; cursor: pointer; background: url(../assets/ui_book/hud_item_slot.png) center / 100% 100% no-repeat; }
#buffbar .bb-slot img { position: absolute; left: 16%; top: 14%; width: 68%; height: 68%; object-fit: contain; }
#buffbar .bb-slot b { position: absolute; right: 9%; bottom: 7%; font: 700 calc(var(--bs, 48px) * 0.26) / 1 Fredoka, Mali, sans-serif; color: #fff; text-shadow: 0 0 2px #121730, 0 1px 0 #121730, 1px 0 0 #121730, -1px 0 0 #121730, 0 -1px 0 #121730; }
#buffbar .bb-slot em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 1px 5px; border-radius: 6px; background: rgba(12, 16, 34, 0.82); color: #8fe08a; font: 800 calc(var(--bs, 48px) * 0.23) / 1.2 Fredoka, sans-serif; font-style: normal; white-space: nowrap; }
#buffbar .bb-slot i { position: absolute; left: 6%; top: 5%; padding: 0 4px; border-radius: 5px; background: #5fc86a; color: #10301a; font: 800 calc(var(--bs, 48px) * 0.17) / 1.4 Fredoka, sans-serif; font-style: normal; }
#buffbar .bb-slot u { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; color: rgba(255, 233, 184, 0.45); font: 700 calc(var(--bs, 48px) * 0.42) / 1 Fredoka, sans-serif; }
#buffbar .bb-slot.out img { opacity: 0.35; filter: grayscale(0.7); }
#buffbar .bb-slot.run { filter: drop-shadow(0 0 4px rgba(143, 224, 138, 0.8)); }
#buffbar .bb-slot.pick { filter: drop-shadow(0 0 5px #ffd98a) brightness(1.2); }
#buffbar .bb-slot:hover { filter: brightness(1.2); }
#buffbar .bb-slot:hover u { color: #ffe9b8; }
#buffbar .bb-side { display: flex; flex-direction: column; gap: 3px; }
#buffbar .bb-fold, #buffbar .bb-cog { min-width: 26px; height: 22px; padding: 0 7px; border-radius: 8px; border: 1.5px solid rgba(217, 164, 67, 0.85); background: rgba(16, 20, 40, 0.88); color: #ffe9b8; font: 700 12px/1 Mali, sans-serif; cursor: pointer; white-space: nowrap; }
#buffbar .bb-fold:hover, #buffbar .bb-cog:hover { background: rgba(242, 193, 78, 0.9); color: #1f2747; }
#buffbar.shut .bb-fold { height: 24px; padding: 0 10px; }
#buffbar .bb-pick { position: absolute; left: 0; bottom: calc(100% + 8px); width: 300px; max-height: 320px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; border-radius: 12px; background: rgba(16, 13, 9, 0.97); border: 2px solid #d9a443; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6); }
#buffbar .bb-pick h5 { margin: 0 2px 2px; font: 700 14px Mali, sans-serif; color: #ffd98a; }
#buffbar .bb-pick p { margin: 4px 2px; font: 500 13px/1.5 Mali, sans-serif; color: #cfc7b3; }
#buffbar .bb-pick button { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #f1ead6; cursor: pointer; text-align: left; }
#buffbar .bb-pick button:hover { border-color: #ffd98a; background: rgba(242, 193, 78, 0.18); }
#buffbar .bb-pick img { width: 34px; height: 34px; object-fit: contain; }
#buffbar .bb-pick span { display: flex; flex-direction: column; min-width: 0; }
#buffbar .bb-pick span b { font: 700 13px/1.3 Mali, sans-serif; }
#buffbar .bb-pick span small { font: 500 11px/1.3 Mali, sans-serif; color: #b9b1a0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#buffbar .bb-pick em { font: 700 13px Fredoka, sans-serif; font-style: normal; color: #8fe08a; }
#buffbar .bb-pick .bb-clear { display: block; text-align: center; color: #ffb199; font: 600 12px Mali, sans-serif; }

#buffcfg { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); }
#buffcfg .bc-in { width: min(640px, 94vw); max-height: 88vh; overflow-y: auto; padding: 16px 20px 14px; border-radius: 16px; background: rgba(18, 14, 10, 0.97); border: 2px solid #d9a443; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.65); color: #f1ead6; font-family: Mali, sans-serif; }
#buffcfg h4 { margin: 0 0 6px; display: flex; align-items: center; justify-content: space-between; font: 800 20px Mali, sans-serif; color: #ffd98a; }
#buffcfg .bc-x { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(217, 164, 67, 0.8); background: #1c160e; color: #ffd98a; font: 700 14px/1 sans-serif; cursor: pointer; }
#buffcfg h5 { margin: 12px 0 6px; padding: 2px 10px; font: 700 14px/1.5 Mali, sans-serif; color: #ffd98a; border-left: 3px solid #d9a443; background: linear-gradient(90deg, rgba(217, 164, 67, 0.28), rgba(217, 164, 67, 0)); }
#buffcfg .bc-row { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 8px; margin: 5px 0; }
#buffcfg .bc-row > span { font: 600 13px Mali, sans-serif; color: #e9e2cf; }
#buffcfg .bc-row > div { display: flex; flex-wrap: wrap; gap: 5px; }
#buffcfg .bc-chip { padding: 3px 11px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); color: #a9a190; font: 600 13px/1.4 Mali, sans-serif; cursor: pointer; white-space: nowrap; }
#buffcfg .bc-chip:hover { border-color: #f2c14e; color: #fff; }
#buffcfg .bc-chip.on { border-color: #f2c14e; background: rgba(242, 193, 78, 0.24); color: #fff; }
#buffcfg .bc-chip.on::before { content: '\2713  '; color: #f2c14e; font-weight: 800; }
#buffcfg .bc-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#buffcfg .bc-slot { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; border: 1px solid rgba(217, 164, 67, 0.4); background: rgba(255, 255, 255, 0.04); }
#buffcfg .bc-slot.empty { opacity: 0.55; }
#buffcfg .bc-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; background: rgba(0, 0, 0, 0.35); color: #8f887a; font: 700 15px Fredoka, sans-serif; }
#buffcfg .bc-ic img { width: 32px; height: 32px; object-fit: contain; }
#buffcfg .bc-nm { display: flex; flex-direction: column; min-width: 0; }
#buffcfg .bc-nm b { font: 700 13px/1.3 Mali, sans-serif; }
#buffcfg .bc-nm small { font: 500 11px/1.3 Mali, sans-serif; color: #b9b1a0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#buffcfg .bc-note { margin: 10px 0 0; font: 500 12px/1.5 Mali, sans-serif; color: #b9b1a0; }
@media (max-width: 620px) { #buffcfg .bc-row { grid-template-columns: 1fr; } #buffcfg .bc-slots { grid-template-columns: 1fr; } }