/* Quick-equipment buttons (public/quickequip_ui.js): Weapon and Top Armor, between the potions and the Jump card.
   Same squared slot ring as the potion slots (/ui/slot_sq.webp); the hold menu and the Manage panel use the original right-click menu art
   (/ui/soc_rm_*.webp, as the player menu does). Everything is scoped by id. */
#skillPad .qeb { position:absolute; bottom:100px; width:34px; height:34px; padding:0; border:0; border-radius:5px; cursor:pointer; overflow:visible; color:#e8d39a;
  background:url(/ui/slot_sq.webp) center/100% 100% no-repeat; filter:drop-shadow(0 2px 3px rgba(0,0,0,.7)); touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; transition:filter .15s, opacity .15s; }
#skillPad #qeW { right:50px; } #skillPad #qeT { right:10px; }
#skillPad .qeb::after { content:""; position:absolute; inset:-3px; } /* a little more to tap, still clear of Attack and the skill ring */
#skillPad .qeb:not(.fill) { opacity:.72; } /* empty: see-through like an empty potion slot */
#skillPad .qeb.el-fire, #qePanel :is(.qeS,.qeIt).el-fire { --element-fill:radial-gradient(circle,#7a2c1c 4%,#36130f 66%,transparent 78%); --element-edge:#7a2c1c; }
#skillPad .qeb.el-water, #qePanel :is(.qeS,.qeIt).el-water { --element-fill:radial-gradient(circle,#245990 4%,#102544 66%,transparent 78%); --element-edge:#245990; }
#skillPad .qeb.el-earth, #qePanel :is(.qeS,.qeIt).el-earth { --element-fill:radial-gradient(circle,#397331 4%,#1b3418 66%,transparent 78%); --element-edge:#397331; }
#skillPad .qeb.el-wind, #qePanel :is(.qeS,.qeIt).el-wind { --element-fill:radial-gradient(circle,#b9d5ca 2%,#3b5b54 42%,#1a2926 70%,transparent 82%); --element-edge:#b9d5ca; }
#skillPad .qeb[class*="el-"] { background-image:var(--element-fill),url(/ui/slot_sq.webp); box-shadow:none; }
#skillPad .qeb:active { transform:scale(.92); }
#skillPad .qeb .qi, #skillPad .qeb svg.it { position:absolute; inset:5px; width:calc(100% - 10px); height:calc(100% - 10px); border-radius:3px; pointer-events:none; object-fit:contain; }
#skillPad .qeb.miss .qi, #skillPad .qeb.miss svg.it { filter:grayscale(1) brightness(.55); } /* the item is not in the bag right now (warehouse, sold ...) */
#skillPad .qeb:not(.worn) .qi, #skillPad .qeb:not(.worn) svg.it { opacity:.62; } /* set item, not the one worn: a tap puts it on */
#skillPad .qeb .qph { position:absolute; inset:7px; width:calc(100% - 14px); height:calc(100% - 14px); fill:#c9b27a; opacity:.28; pointer-events:none; } /* empty: the slot's own silhouette */
#skillPad .qeb .qp { position:absolute; inset:0; font:300 22px/32px system-ui; text-align:center; color:#e8d39a; text-shadow:0 1px 2px #000; pointer-events:none; }
#skillPad .qeb .qsw { position:absolute; left:2px; top:2px; width:11px; height:11px; fill:none; stroke:#f3d98e; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000); opacity:.9; pointer-events:none; }
#skillPad .qeb .qs { position:absolute; right:-3px; bottom:-3px; min-width:12px; height:12px; padding:0 1px; box-sizing:border-box; border-radius:6px; background:#17120a; border:1px solid #cfae62; font:800 8px/10px system-ui; text-align:center; color:#fff; pointer-events:none; } /* the active set, like the skill-page badge */
#skillPad .qeb .qd { position:absolute; left:4px; bottom:3px; display:flex; gap:2px; pointer-events:none; }
#skillPad .qeb .qd i { width:4px; height:4px; border-radius:50%; background:rgba(20,15,8,.85); box-shadow:0 0 0 1px rgba(207,174,98,.75); }
#skillPad .qeb .qd i.on { background:#ffd27a; box-shadow:0 0 0 1px #fff3c4, 0 0 4px #ffb347; } /* which of the two is worn */
#skillPad .qeb .qd i.no { opacity:.35; } /* that place of the set is empty */
#skillPad .qeb.flash { filter:drop-shadow(0 0 6px #ffd27a) drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
#skillPad .qeb.busy { opacity:.8; }
#skillPad .qeb.hold { filter:drop-shadow(0 0 5px rgba(255,255,255,.4)) drop-shadow(0 2px 3px rgba(0,0,0,.7)); }

/* hold menu + Manage panel: not modal, the game goes on under them */
#qeMenu, #qePanel { position:fixed; z-index:357; display:none; width:max-content; filter:drop-shadow(0 4px 10px rgba(0,0,0,.7)); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none; font-family:system-ui, 'Segoe UI', Arial, sans-serif; color:#e9e2cf; }
#qeMenu.on, #qePanel.on { display:block; }
#qeMenu { min-width:176px; max-width:min(92vw, 240px); } #qePanel { width:min(92vw, 272px); }
#qeMenu .rmT, #qeMenu .rmM, #qeMenu .rmB, #qePanel .rmT, #qePanel .rmM, #qePanel .rmB { border-style:solid; border-width:0 4px; box-sizing:border-box; }
#qeMenu .rmT, #qePanel .rmT { height:14px; border-image:url(/ui/soc_rm_top.webp) 0 4 0 4 fill / 0 4px 0 4px stretch; }
#qeMenu .rmM, #qePanel .rmM { border-image:url(/ui/soc_rm_back.webp) 0 4 0 4 fill / 0 4px 0 4px stretch; padding:0 6px; }
#qeMenu .rmB, #qePanel .rmB { height:14px; border-image:url(/ui/soc_rm_bottom.webp) 0 4 0 4 fill / 0 4px 0 4px stretch; }
#qeMenu .rmH, #qePanel .rmH { height:20px; margin:-4px 0 2px; font:700 11px/20px system-ui; text-align:center; letter-spacing:.04em; color:#d9b45a; text-shadow:0 1px 2px #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-bottom:1px solid rgba(217,180,90,.22); }
#qeMenu .rmR, #qePanel .rmR { display:block; width:100%; height:38px; margin:0; padding:0 12px; border:0; border-radius:2px; background:none; text-align:left; font:600 14px/38px system-ui, 'Segoe UI', Arial, sans-serif; color:#e9e2cf; text-shadow:0 1px 2px #000; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#qeMenu .rmR:active, #qePanel .rmR:active { background:linear-gradient(rgba(215,170,80,.34), rgba(150,100,30,.26)); color:#fff4cf; }
#qeMenu .rmR:focus-visible, #qePanel .rmR:focus-visible, #qePanel .qeS:focus-visible { outline:2px solid #ffd27a; outline-offset:-2px; }
@media (hover:hover) { #qeMenu .rmR:hover, #qePanel .rmR:hover { background:linear-gradient(rgba(215,170,80,.34), rgba(150,100,30,.26)); color:#fff4cf; } }
/* Manage: one row per set (label + its two items) */
#qePanel .qeRow { display:flex; align-items:center; gap:8px; padding:6px 4px; border-radius:3px; }
#qePanel .qeRow.act { background:linear-gradient(90deg, rgba(215,170,80,.22), rgba(215,170,80,.04)); box-shadow:inset 2px 0 0 #d9b45a; }
#qePanel .qeRow b { flex:1; font:700 13px/1.2 system-ui; color:#e9e2cf; } #qePanel .qeRow b small { display:block; font:600 10px/1.3 system-ui; color:#d9b45a; }
#qePanel .qeS { position:relative; width:44px; height:44px; flex:none; padding:0; border:0; border-radius:5px; background:url(/ui/slot_sq.webp) center/100% 100% no-repeat; color:#e8d39a; font:300 24px/42px system-ui; cursor:pointer; touch-action:manipulation; }
#qePanel .qeS[class*="el-"] { background:var(--element-fill); box-shadow:inset 0 0 0 2px var(--element-edge); }
#qePanel .qeS img, #qePanel .qeS svg.it { position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); object-fit:contain; pointer-events:none; }
#qePanel .qeS.miss img { filter:grayscale(1) brightness(.55); }
#qePanel .qeS.worn::after { content:""; position:absolute; right:3px; top:3px; width:6px; height:6px; border-radius:50%; background:#ffd27a; box-shadow:0 0 0 1px #fff3c4, 0 0 4px #ffb347; }
#qePanel .qeS.pick { filter:drop-shadow(0 0 5px #ffd27a); }
#qePanel .qeFoot { display:flex; gap:4px; margin-top:4px; border-top:1px solid rgba(217,180,90,.22); padding-top:4px; } #qePanel .qeFoot .rmR { text-align:center; padding:0 6px; }
/* item list for one place of a set */
#qePanel .qeList { max-height:min(46vh, 230px); overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; }
#qePanel .qeIt { display:flex; align-items:center; gap:8px; height:40px; line-height:normal; }
#qePanel .qeIt img, #qePanel .qeIt svg.it { width:30px; height:30px; flex:none; object-fit:contain; }
#qePanel .qeIt[class*="el-"] img { background:var(--element-fill); box-shadow:inset 0 0 0 1px var(--element-edge); }
#qePanel .qeIt span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
#qePanel .qeIt em { flex:none; font:600 10px system-ui; font-style:normal; color:#d9b45a; }
#qePanel .qeIt.cur { background:linear-gradient(rgba(215,170,80,.2), rgba(150,100,30,.12)); }
#qePanel .qeNone { padding:10px 6px; font:500 12px/1.4 system-ui; color:#cfc4a6; white-space:normal; }
#qePanel .rmR.qeRm { color:#ff9d8a; }