/* Stany gracza nad paskiem zdrowia (ui/buffs.js): rząd premii (zielony) nad rzędem kar (czerwony); dymek z opisem po najechaniu. */
#buffs { display: flex; flex-direction: column; gap: 4px; margin: 0 0 6px 0; }
#buffs .bf-row { display: flex; gap: 6px; }
#buffs .bf-row:empty { display: none; }
#buffs .bf { position: relative; width: 26px; height: 26px; pointer-events: auto; }
#buffs .bf svg { width: 26px; height: 26px; overflow: visible; }
#buffs .bf-bg { fill: rgba(12,14,9,.82); stroke: #4e4a3c; stroke-width: .6; }
#buffs .bf-ring { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 62.83; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 12px 12px; }
#buffs .bf path { fill: currentColor; stroke: none; transform: scale(.68); transform-origin: 12px 12px; }
#buffs .good .bf { color: #9be07c; }                /* premia */
#buffs .bad .bf { color: #ff5d4d; }                 /* kara */
#buffs .bf-tip { display: none; text-transform: none; letter-spacing: 0; font-weight: 500; position: absolute; left: 0; bottom: 32px; width: max-content; max-width: 230px; padding: 5px 8px; background: rgba(14,17,11,.96); border: 1px solid #5b6247; border-left: 3px solid currentColor; font-size: 12px; line-height: 1.35; color: #d8d6c4; z-index: 30; pointer-events: none; }
#buffs .bf-tip b { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
#buffs .good .bf-tip b { color: #9be07c; }
#buffs .bad .bf-tip b { color: #ff5d4d; }
#buffs .bf-tip i { display: block; font-style: normal; }
#buffs .bf-tip em { display: block; font-style: normal; color: #9a9884; font-size: 11px; }
#buffs .bf-tip em:empty { display: none; }
#buffs .bf:hover .bf-tip { display: block; }