/* =========================================================================
   Action bar: ten slots on 1-9,0 (#hotbar) and ten on F1-F10 (#hotbarF, a
   smaller row above, shown once a power sits there or the skill book is open
   - body.hotF). The belt and evade pips move out to clear the wider bar.
   ========================================================================= */
#hotbar{gap:6px}
#hotbar .slot.empty{opacity:.55}
#hotbar .slot.empty:hover{opacity:1}

#hotbarF{position:fixed;bottom:92px;left:50%;transform:translateX(-50%);display:none;gap:6px;z-index:3;pointer-events:auto}
body.hotF #hotbarF{display:flex}
#hotbarF .slot{width:46px;height:46px}
#hotbarF .slot .ic{line-height:40px;font-size:19px}
#hotbarF .slot .ic .skImg{width:34px;height:34px;margin-top:-2px}
#hotbarF .slot .key{top:1px;font-size:8px}
#hotbarF .slot .nm{display:none}
#hotbarF .slot .mc{bottom:2px;right:3px;font-size:8px}
#hotbarF .slot.empty{opacity:.4}
body.skDragging #hotbarF .slot{outline:1px dashed rgba(90,216,198,.6);outline-offset:3px;opacity:1}

/* the wider bar pushes its neighbours out */
body #belt{left:calc(50% + 348px)}
body #evadePips{left:calc(50% - 396px)}
body.hotF #ptsBadge{bottom:150px}

/* skill book: the action bar section holds 20 slots in two rows */
.skBar.skBar20{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.skBar.skBar20 .skSlot{width:auto;min-width:0;height:auto;aspect-ratio:1}
.skBar.skBar20 .skSlot .skImg{width:80%;height:80%}

/* skill book: tall trees (mage: 4 tiers, 5 per row) scroll from the top */
.skModern .skTree.many{justify-content:flex-start}
.skModern .skTree.many .skN{padding:6px 2px 6px}
.skModern .skTree.many .skNm{font-size:11px}