/* the picker of what quick slot 1-4 holds (js/quickslot.js, 2026-10-18): over the item slots, the buff row's dark gold
   panel; the icons in their tier's metal frame (css/craft2.css .tslot), each one opens the item's card (data-info). */
#qspick { position: absolute; z-index: 4; display: flex; flex-direction: column; pointer-events: auto; }
#qspick[hidden] { display: none; }
#qspick .qs-in { display: flex; flex-direction: column; min-height: 0; max-height: inherit; padding: 8px 8px 6px; 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), inset 0 0 0 1px rgba(255, 217, 138, 0.12); color: #f1ead6; font-family: Mali, sans-serif; }
#qspick .qs-h { display: flex; align-items: center; gap: 8px; margin: 0 2px 6px; }
#qspick h5 { margin: 0; font: 700 14px Mali, sans-serif; color: #ffd98a; white-space: nowrap; }
#qspick .qs-tabs { display: flex; gap: 4px; flex: 1; }
#qspick .qs-tab { position: relative; width: 34px; height: 34px; padding: 0; border: 0; cursor: pointer; background: url(../assets/ui_book/hud_item_slot.png) center / 100% 100% no-repeat; opacity: 0.7; }
#qspick .qs-tab img { position: absolute; left: 18%; top: 16%; width: 64%; height: 64%; object-fit: contain; }
#qspick .qs-tab b { position: absolute; left: 50%; top: -5px; transform: translateX(-50%); padding: 0 4px; border-radius: 4px; background: #1c160e; border: 1px solid #d9a443; color: #ffd98a; font: 700 9px/1.25 Fredoka, sans-serif; }
#qspick .qs-tab u { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; color: rgba(255, 233, 184, 0.5); font: 700 15px/1 Fredoka, sans-serif; }
#qspick .qs-tab:hover { opacity: 1; }
#qspick .qs-tab.on { opacity: 1; filter: drop-shadow(0 0 4px #ffd98a) brightness(1.15); }
#qspick .qs-x { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1.5px solid rgba(217, 164, 67, 0.8); background: #1c160e; color: #ffd98a; font: 700 12px/1 sans-serif; cursor: pointer; }
#qspick .qs-x:hover { background: #f2c14e; color: #1f2747; }
#qspick .qs-cur { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 5px 8px; border-radius: 9px; border: 1px solid rgba(217, 164, 67, 0.55); background: linear-gradient(90deg, rgba(217, 164, 67, 0.22), rgba(217, 164, 67, 0.04)); }
#qspick .qs-cur > span:not(.qs-ic) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#qspick .qs-cur b { font: 700 13px/1.3 Mali, sans-serif; color: #ffe9b8; }
#qspick .qs-cur small { font: 500 11px/1.3 Mali, sans-serif; color: #b9b1a0; }
#qspick .qs-cur.empty { padding: 7px 10px; }
#qspick .qs-clear { flex: none; padding: 5px 10px; border-radius: 8px; border: 1.5px solid rgba(255, 140, 110, 0.75); background: rgba(70, 20, 12, 0.6); color: #ffc2ae; font: 700 12px Mali, sans-serif; cursor: pointer; }
#qspick .qs-clear:hover { background: #d9573c; color: #fff; }
#qspick .qs-list { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; padding-right: 2px; }
#qspick h6 { margin: 4px 0 1px; padding: 1px 8px; font: 700 12px/1.5 Mali, sans-serif; color: #ffd98a; border-left: 3px solid #d9a443; background: linear-gradient(90deg, rgba(217, 164, 67, 0.25), rgba(217, 164, 67, 0)); }
#qspick .qs-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: 3px 8px 3px 4px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: #f1ead6; cursor: pointer; text-align: left; }
#qspick .qs-row:hover { border-color: #ffd98a; background: rgba(242, 193, 78, 0.16); }
#qspick .qs-row.cur { border-color: rgba(127, 212, 142, 0.7); background: rgba(127, 212, 142, 0.1); cursor: default; }
#qspick .qs-row.none .qs-nm, #qspick .qs-row.none .qs-n { opacity: 0.5; }
#qspick .qs-ic { display: inline-grid; cursor: help; }
#qspick .qs-ic .tslot { width: 44px; height: 44px; }
#qspick .qs-ic .tslot.sm { width: 36px; height: 36px; }
#qspick .qs-ic:hover .tslot { filter: brightness(1.2); }
#qspick .qs-nm { display: flex; flex-direction: column; min-width: 0; }
#qspick .qs-nm b { font: 700 13px/1.3 Mali, sans-serif; color: var(--gc, #f1ead6); }
#qspick .qs-nm small { font: 500 11px/1.3 Mali, sans-serif; color: #b9b1a0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qspick .qs-n { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
#qspick .qs-n em { font: 700 13px Fredoka, sans-serif; font-style: normal; color: #8fe08a; }
#qspick .qs-n i { font: 600 10px/1.3 Mali, sans-serif; font-style: normal; color: #ffd98a; white-space: nowrap; }
#qspick .qs-tip { margin: 6px 2px 0; font: 500 11px/1.45 Mali, sans-serif; color: #a9a190; }