/* Mochila estilo MMO (Claude, 20/10): células maiores com fundo da raridade, +refino e durabilidade, rodapé com espaço e ossos */
html #inv{--cell:58px}
html #inv .inv-right #bag{grid-template-columns:repeat(6,var(--cell))}
html.touch-device #inv{--cell:48px}
html #bag{width:max-content;box-sizing:border-box;gap:4px!important;padding:6px!important;background:#120c1c;border:2px solid #0b0712;box-shadow:inset 0 0 0 2px #2a1f38}
html #bag .b{margin:0!important;border:2px solid #3d2c56!important;background:linear-gradient(160deg,#2a1f38,#1a1226)!important;box-shadow:inset 0 0 0 2px #0b0712,inset 0 -6px 10px #0006!important}
/* Fundos de raridade aprovados: cor discreta atrás do ícone; células vazias seguem escuras. */
html #inv [data-rarity="comum"]{--rar-top:#414149;--rar-bottom:#22222d}
html #inv [data-rarity="incomum"]{--rar-top:#235b35;--rar-bottom:#142c1c}
html #inv [data-rarity="raro"]{--rar-top:#124b78;--rar-bottom:#10243c}
html #inv [data-rarity="epico"]{--rar-top:#522374;--rar-bottom:#29153e}
html #inv [data-rarity="lendario"]{--rar-top:#755020;--rar-bottom:#342416}
html #bag .b.has-item{border-color:var(--rar)!important;background:linear-gradient(160deg,var(--rar-top,#414149),var(--rar-bottom,#22222d))!important;box-shadow:inset 0 0 0 2px #0b0712,inset 0 2px 0 2px color-mix(in srgb,var(--rar) 40%,transparent)!important}
html #bag .b:hover,html #bag .b.selected{border-color:#f7d77a!important;outline:2px solid #f7d77a;outline-offset:-1px}
html #bag .b img{position:absolute;inset:10%;width:80%;height:80%;image-rendering:pixelated;filter:drop-shadow(2px 2px 0 #0b0712aa)}
html #bag .b .item-ref{position:absolute;right:2px;bottom:1px;left:auto;top:auto;font:14px/1 Pix,monospace;text-shadow:1px 1px 0 #0b0712,-1px -1px 0 #0b0712,1px -1px 0 #0b0712,-1px 1px 0 #0b0712;z-index:2;pointer-events:none}
html #bag .b .item-dur{position:absolute;left:2px;top:2px;font:9px/1 Pix,monospace;text-shadow:1px 1px 0 #0b0712;z-index:2;pointer-events:none}
html #bag .b .item-quantity{position:absolute;right:3px;bottom:1px;font:15px/1 Pix,monospace;color:#fff3cf;text-shadow:1px 1px 0 #0b0712,-1px -1px 0 #0b0712;z-index:2}
html #bag .b .bag-set{position:absolute;left:2px;bottom:2px;top:auto}
html #bag .b.locked-bag-slot{opacity:.45}
html.touch-device #bag .b .item-dur{display:none}
#bag-capacity{box-sizing:border-box;width:max-content;min-width:100%;display:flex!important;justify-content:space-between;align-items:center;gap:10px;margin:6px 0 4px;padding:6px 10px;background:linear-gradient(#2a1f38,#1d1529);border:2px solid #0b0712;box-shadow:inset 0 0 0 2px #3d2c56;font:16px/1 Pix,monospace;color:#efe6d6}
#bag-capacity .cap-slots:before{content:'▤ ';color:#9f86b5}
#bag-capacity .cap-gold{display:flex;align-items:center;gap:6px;color:#f7d77a}
#bag-capacity svg{width:18px;height:18px}
html #inv .inv-right #bag-capacity{width:calc(6 * var(--cell) + 36px);min-width:0}
/* Equipamento no mesmo estilo (Claude, 20/10) */
html #inv .eqcol{gap:6px}
html #inv .eq{width:var(--cell);height:var(--cell)}
html #inv .eq{margin:0!important;border:2px solid #3d2c56!important;background:linear-gradient(160deg,#2a1f38,#1a1226)!important;box-shadow:inset 0 0 0 2px #0b0712,inset 0 -6px 10px #0006!important}
html #inv .eq.has-item{border-color:var(--rar)!important;background:linear-gradient(160deg,var(--rar-top,#414149),var(--rar-bottom,#22222d))!important;box-shadow:inset 0 0 0 2px #0b0712,inset 0 2px 0 2px color-mix(in srgb,var(--rar) 40%,transparent)!important}
html #inv .eq:hover{border-color:#f7d77a!important}
html #inv .eq img{width:80%;height:80%;filter:drop-shadow(2px 2px 0 #0b0712aa)}
html #inv .eq .lab{bottom:auto;top:50%;transform:translateY(-50%);font:11px/1 Pix,monospace;color:#6f5f86}
html #inv .eq.has-item .lab{display:none}
html #inv .eq .item-ref{position:absolute;right:2px;bottom:1px;left:auto;top:auto;font:14px/1 Pix,monospace;text-shadow:1px 1px 0 #0b0712,-1px -1px 0 #0b0712,1px -1px 0 #0b0712,-1px 1px 0 #0b0712;z-index:2;pointer-events:none}
html #inv .eq .item-dur{position:absolute;left:2px;top:2px;font:9px/1 Pix,monospace;text-shadow:1px 1px 0 #0b0712;z-index:2;pointer-events:none}
html #inv .eq .dur-bar{display:none}
html.touch-device #inv .eq .item-dur{display:none}
html #inv .preview{padding:8px 14px;margin:0 10px;background:radial-gradient(ellipse at 50% 85%,#3d2c5699,transparent 60%),#120c1c;border:2px solid #0b0712;box-shadow:inset 0 0 0 2px #2a1f38}
html #inv #dollprev{width:180px;height:210px;image-rendering:pixelated}
html #inv{width:min(960px,calc(100vw - 24px))!important}
html #inv .eqwrap{gap:6px;justify-content:center}
html #inv .preview{margin:0 4px;padding:6px 8px}
html #inv #dollprev,#dollimg{width:156px!important;height:182px!important}

/* ---------- encaixes de gema nas peças (Claude, 21/10) — client/src/gem-sockets.js ---------- */
.sock-dots{position:absolute;right:2px;bottom:2px;display:flex;gap:2px;pointer-events:none;z-index:2}
.sock-dots b{width:7px;height:7px;transform:rotate(45deg);background:var(--gem);box-shadow:0 0 0 1px #0d0914,0 0 4px var(--gem)}
.sock-dots b.empty{background:#0d0914;box-shadow:0 0 0 1px #8e7fa6}
.sock-tip{display:flex;flex-direction:column;gap:3px;margin-top:6px;padding-top:6px;border-top:1px solid #3d2c56}
.sock-tip span{display:flex;align-items:center;gap:6px;font:12px Txt,sans-serif;color:var(--gem,#c4bccf)}
.sock-tip img{width:16px;height:16px;image-rendering:pixelated}
.sock-tip .empty{color:#8e7fa6}.sock-tip .empty i{width:10px;height:10px;margin:0 3px;transform:rotate(45deg);background:#0d0914;box-shadow:0 0 0 1px #8e7fa6}
.sock-tip.none{font:12px Txt,sans-serif;color:#6f6386}
#bag .b.gem-target{outline:2px solid #b98cff;outline-offset:-2px;box-shadow:0 0 14px #b98cffaa;animation:gem-target .8s ease-in-out infinite}
@keyframes gem-target{50%{box-shadow:0 0 22px #d9b8ff}}
.bag-sockets{flex-basis:100%;display:flex;align-items:center;gap:6px;margin-top:6px;padding-top:6px;border-top:1px solid #3d2c56}
.bag-sockets small{font:11px Txt,sans-serif;font-weight:700;letter-spacing:1px;color:#8e7fa6;margin-right:4px}
.bag-sock{width:38px;height:38px;display:grid;place-items:center;font:16px Pix,monospace;color:#5f5874;background:#0d0914;box-shadow:inset 0 0 0 1px #3d2c56}
button.bag-sock.full{box-shadow:inset 0 0 0 2px var(--gem),0 0 8px var(--gem);cursor:pointer}
button.bag-sock.full:hover{filter:brightness(1.3)}
.bag-sock img{width:32px;height:32px;image-rendering:pixelated}
#bag-actions{flex-wrap:wrap}

/* ---- mochila com tamanho FIXO (21/10): a coluna da direita tinha largura "auto" e crescia/encolhia conforme o item
   selecionado (nome comprido, botões de separar/destruir, encaixes de gema), empurrando a coluna do equipamento.
   Agora a coluna tem a largura da grade de 6 espaços e a caixa de ações quebra linha por dentro, com altura reservada. ---- */
@media (min-width:861px){html #inv .inv-cols{grid-template-columns:minmax(330px,1fr) min-content}}
html #inv .inv-right{width:min-content;max-width:100%}
html #inv .inv-right>*{max-width:100%;box-sizing:border-box}
html #inv #bag-actions{min-width:0;align-content:center}
html.touch-device #inv #bag-actions{min-height:var(--bag-actions-h,132px)}   /* só no celular: altura fixa para a janela não mudar de zoom; no PC a caixa fica do tamanho do conteúdo */
html #inv #bag-actions .bag-action-info{flex:1 1 120px}
html #inv #bag-actions .bag-action-info b{white-space:normal;overflow-wrap:anywhere}
html #inv #bag .b img.item-lock{inset:auto 2px auto auto;top:2px}

/* gema "na mão" esperando a peça (botão Encaixar) */
#bag .b.gem-holding{outline:2px dashed #b98cff;outline-offset:-3px}
#inv .eq.gem-target{outline:2px solid #b98cff;outline-offset:-2px;box-shadow:0 0 14px #b98cffaa;animation:gem-target .8s ease-in-out infinite}
#bag-actions button.on{color:#ffe9aa;border-color:#b98cff}