/* Destruitor Idle — janela Inventario no layout do Huntera (medido no DOM dele: .inventory-window, ~453 x 471 px).
   Duas colunas: o corpo (186 px: paperdoll de 3 colunas de 44 px, AUTO acima do colar e abaixo do anel, a coluna do
   meio mais alta) com a Capacidade embaixo; a Bolsa e a Mochila (265 px: grades de 5 x 44 px, 5 px de espaco), a
   divisoria entre as duas, o gold embaixo e a alca de baixo. --sr / --br = linhas que aparecem (app.js: invLinhas).
   O que ja era nosso (as bordas azul/vermelha de serve/nao serve, vinculado, a luz vermelha da mochila cheia) continua
   do app.css. */

.win[data-win-id="inv"] { background: #10131d; } /* opaca: o mapa nao aparece por baixo do espaco vazio da coluna do corpo */
.win[data-win-id="inv"] .win-h b { color: #7aa2f7; font-size: 12.8px; }
.win[data-win-id="inv"] .win-b { padding: 0; resize: none; overflow: auto; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); }

.inv { --cel: 44px; --gap: 5px; position: relative; }
.inv-body { display: flex; align-items: stretch; }

/* ---- esquerda: o corpo e a capacidade ---- */
.inv-gear { width: 186px; flex: none; box-sizing: border-box; padding: 8px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.inv-pd { display: flex; gap: var(--gap); align-items: flex-start; }
.inv-pdc { display: flex; flex-direction: column; gap: var(--gap); width: var(--cel); }
/* a coluna do meio fica mais alta (como no Tibia): as de fora comecam na altura do AUTO de cima */
.inv-pdc-d { margin-top: calc(15px + var(--gap)); }
.inv .acc-auto { flex: none; }

.inv .eq { width: var(--cel); height: var(--cel); box-sizing: border-box; background: rgb(22, 22, 30); border: 1px solid #262a3a; border-radius: 4px; overflow: hidden; }
.inv .eq-ic { width: 36px; height: 36px; }
.inv .eq-ic.eq-sil { width: 26px; height: 26px; opacity: .16; }
.g .inv .eq[data-iid] { cursor: grab; }
.g .inv .eq[data-iid]:hover { border-color: #3b4261; }
.g .inv .eq[data-iid]:active { cursor: grabbing; }
.inv .eq.inv-bp { cursor: default; }
.inv .eq.inv-bp .eq-ic { opacity: .9; }
/* municao vazia: o lugar redondo */
.inv .eq.vazio.redondo::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #2a2f40; }
.inv .eq.mun-eq { border-radius: 4px; }

/* barrinha embaixo da peca: tempo (azul) e cargas (laranja) */
.inv-dur { position: absolute; left: 3px; right: 3px; bottom: 2px; height: 3px; border-radius: 2px; background: #000a; overflow: hidden; pointer-events: none; }
.inv-dur b { display: block; height: 100%; background: #7aa2f7; }
.inv-dur.inv-ch b { background: #ff9e64; }
/* slots de imbuement */
.inv-pips { position: absolute; left: 3px; bottom: 6px; display: flex; gap: 2px; pointer-events: none; }
.inv-pips i { width: 4px; height: 4px; border-radius: 50%; background: #565f89; box-shadow: 0 0 0 1px #000; }

/* capacidade: o fundo, o preenchimento que vai do verde ao vermelho (app.js: corPeso) e os dois textos por cima */
.inv-cap { position: relative; width: 170px; height: 20px; margin-top: auto; flex: none; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;
  padding: 0 6px; background: rgba(16, 20, 24, .72); border: 1px solid rgba(59, 66, 97, .9); border-radius: 3px; overflow: hidden; font-size: 11px; line-height: 1; }
.inv-cap > i { position: absolute; left: 0; top: 0; bottom: 0; background: rgb(101, 157, 47); transition: width .4s ease, background .4s ease; }
.inv-cap span, .inv-cap strong { position: relative; z-index: 1; color: #e6e9f2; text-shadow: 0 1px 2px #000, 0 0 2px #000; white-space: nowrap; }
.inv-cap span { color: #c0caf5; }
.inv-cap strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-cap.cheia { border-color: #8a2222; }
.inv-cap.cheia > i { animation: pesoPisca 1s ease-in-out infinite; }

/* ---- direita: Bolsa, divisoria, Mochila e o gold ---- */
.inv-bag { width: 265px; flex: none; box-sizing: border-box; padding: 8px 8px 6px 4px; display: flex; flex-direction: column; min-width: 0; }
.inv-tt { display: flex; align-items: center; gap: 6px; height: 22px; box-sizing: border-box; margin: 0 0 5px; padding: 0 3px 0 8px;
  background: rgba(22, 22, 30, .75); border: 1px solid rgba(59, 66, 97, .75); border-radius: 4px; font: 600 11.5px/1 system-ui, sans-serif; color: #9aa5ce; letter-spacing: .02em; }
.inv-tt > span { display: flex; align-items: center; white-space: nowrap; }
.inv-tt .bagp { font-size: 8.5px; padding: 1px 4px; }
.inv-tt-d { margin-left: auto; font-size: 10.5px; font-weight: 500; color: #737aa2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.inv-venda { color: #e0af68; }
.g .inv-q { flex: none; width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid #3b4261; background: #1a1b26; color: #9aa5ce; font: 700 10px/14px system-ui, sans-serif; text-align: center; cursor: pointer; }
.g .inv-q:hover, .g .inv-q[aria-expanded="true"] { border-color: #7aa2f7; color: #c0caf5; }
/* a explicacao do "?": por cima da grade (sem empurrar nada), logo abaixo da barra de titulo */
.inv-bag { position: relative; }
.inv-ajuda { position: absolute; left: 4px; right: 8px; z-index: 5; margin: -2px 0 0; padding: 7px 9px; border-radius: 4px; background: #16161ef7; border: 1px solid #3b4261;
  box-shadow: 0 6px 18px #000a; font-size: 11px; line-height: 1.4; color: #a9b1d6; }
.inv-ajuda b { color: #c0caf5; }

.inv .inv-grid { display: grid; grid-template-columns: repeat(5, var(--cel)); grid-auto-rows: var(--cel); gap: var(--gap); align-content: start; justify-content: start;
  height: calc(var(--rows) * (var(--cel) + var(--gap)) - var(--gap)); overflow-y: auto; overflow-x: hidden; margin: 0; padding-right: 2px;
  scrollbar-width: thin; scrollbar-color: #3b4261 transparent; overscroll-behavior: contain; }
.inv .inv-grid::-webkit-scrollbar { width: 5px; }
.inv .inv-grid::-webkit-scrollbar-thumb { background: #3b4261; border-radius: 3px; }
.inv .inv-satchel { --rows: var(--sr); }
.inv .inv-pack { --rows: var(--br); }
.inv .bi { width: var(--cel); height: var(--cel); box-sizing: border-box; background: rgb(22, 22, 30); border: 1px solid #262a3a; border-radius: 4px; }
.inv .bi-ic { width: 36px; height: 36px; }
.inv .bi em { right: 3px; bottom: 1px; font-size: 10.5px; }
.inv .bi.vazia { display: block; border-color: #1f2230; background: rgb(18, 18, 25); }
.inv .bi.keep { opacity: .55; }
/* soltar: a grade inteira acende */
.inv .inv-grid.alvo-drop { outline: 2px dashed #8fb0ff; outline-offset: 1px; border-radius: 4px; }

/* divisoria: arrastar reparte a altura entre a bolsa e a mochila */
.inv-split { position: relative; height: 10px; margin: 0 0 1px; cursor: row-resize; touch-action: none; flex: none; }
.inv-split::after { content: ''; position: absolute; left: 50%; top: 4px; width: 36px; height: 2px; margin-left: -18px; border-radius: 1px; background: #3b4261; }
.inv-split:hover::after, .inv-split.on::after, .inv-split:focus-visible::after { background: #7aa2f7; }
.inv-split:focus-visible { outline: none; }

/* gold embaixo, a direita; Depot e Leilao do outro lado */
.inv-gold { display: flex; align-items: center; gap: 6px; margin-top: 7px; min-height: 24px; }
.inv-gold .inv-botoes { display: flex; gap: 5px; margin-right: auto; }
.g .inv-gold .btn.small { padding: 3px 9px; font-size: 11px; }
.inv-gold b { color: #e0af68; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-gold .gp-ic { width: 22px; height: 22px; }

/* alca de baixo: mais ou menos linhas da mochila (a janela cresce) */
.inv-resize { height: 8px; cursor: ns-resize; touch-action: none; position: relative; border-top: 1px solid #1f2230; }
.inv-resize::after { content: ''; position: absolute; left: 50%; top: 3px; width: 28px; height: 2px; margin-left: -14px; border-radius: 1px; background: #2f3550; }
.inv-resize:hover::after, .inv-resize.on::after, .inv-resize:focus-visible::after { background: #7aa2f7; }
.inv-resize:focus-visible { outline: none; }

/* a ficha das acoes de uma peca do corpo: a etiqueta "Equipado" */
.ic-tag.ic-usando { display: inline-block; margin-bottom: 4px; }

/* a ficha comparada com a peca do corpo (item_ficha.js): verde = melhor que a equipada, vermelho = pior; a seta ajuda
   quem nao distingue as cores. A descricao do items.xml em italico; "nada equipado" como o cartao vazio do Huntera */
.ic-st li.cmp-melhor { color: #6fd67a; font-weight: 700; }
.ic-st li.cmp-pior { color: #ff6b9a; font-weight: 700; }
.ic-st li.cmp-melhor::after { content: " \25B2"; font-size: 9px; vertical-align: 1px; }
.ic-st li.cmp-pior::after { content: " \25BC"; font-size: 9px; vertical-align: 1px; }
.ic-ds { margin: 5px 0 0; color: #a9b1c4; font-style: italic; font-size: 11.5px; line-height: 1.4; }
.ic-vazio { display: flex; flex-direction: column; min-height: 84px; }
.ic-vazio .ic-nota { flex: 1; display: flex; align-items: center; justify-content: center; }
/* no leilao a ficha e a EQUIPADO lado a lado (o tooltip do PC), como na Casa de Leiloes do Huntera */
.it-tip.it-lado { width: auto; max-width: calc(100vw - 16px); flex-direction: row; align-items: flex-start; }
.it-tip.it-lado > .ic { width: 252px; flex: none; }

/* ---- celular (360-430 px): celulas de 40 px (ainda faceis de tocar); abaixo de 400 px as colunas ficam uma em cima da
   outra. A janela continua subindo e descendo pelo cabecalho (app.css) ---- */
@media (max-width: 759px) {
  .inv { --cel: 40px; --gap: 4px; }
  .win[data-win-id="inv"] .win-b { max-height: none; }
  .inv-body { justify-content: center; }
  .inv-gear { width: auto; padding: 8px 6px; }
  .inv-bag { width: auto; padding: 8px 6px 6px 2px; }
  .inv-cap { width: calc(3 * var(--cel) + 2 * var(--gap) + 20px); max-width: 170px; }
  .inv .eq-ic, .inv .bi-ic { width: 34px; height: 34px; }
  .inv-resize { display: none; }
  .inv-split { height: 14px; }
  .inv-split::after { top: 6px; }
}
@media (max-width: 399px) {
  .inv-body { flex-direction: column; align-items: center; }
  .inv-gear { width: 100%; flex-direction: row; justify-content: center; align-items: flex-end; gap: 12px; padding-bottom: 2px; }
  .inv-cap { width: 140px; margin-top: 0; margin-bottom: 2px; }
  .inv-bag { width: calc(5 * var(--cel) + 4 * var(--gap) + 10px); padding: 6px 2px 6px 4px; }
}
@media (prefers-reduced-motion: reduce) { .inv-cap.cheia > i { animation: none; } }

/* ---- o menu do item (item_menu.js): botao direito no PC, segurar no celular — como o menu de contexto do Tibia: caixa
   escura de borda metalica, uma acao por linha, linhas finas entre os grupos, o motivo embaixo da acao apagada ---- */
.it-menu { position: fixed; z-index: 75; min-width: 196px; max-width: min(280px, calc(100vw - 16px)); padding: 3px; box-sizing: border-box;
  background: linear-gradient(#1b1e29, #12141c); border: 1px solid #555b70; border-radius: 3px;
  box-shadow: inset 0 0 0 1px #0a0b10, 0 10px 26px #000c; font: 12px/1.3 Verdana, system-ui, sans-serif; color: #d6d9e3; user-select: none; }
.it-menu .itm-h { display: flex; align-items: center; gap: 6px; padding: 3px 6px 5px; margin-bottom: 2px; border-bottom: 1px solid #343a4e; }
.it-menu .itm-ic { width: 22px; height: 22px; image-rendering: pixelated; flex: none; }
.it-menu .itm-h b { flex: 1; min-width: 0; color: #f0c46a; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-menu .itm-h small { color: #9aa3b8; font-size: 11px; }
.it-menu .itm-a { display: flex; flex-direction: column; align-items: flex-start; width: 100%; box-sizing: border-box; padding: 4px 10px 4px 12px; border: 0; border-left: 2px solid transparent;
  border-radius: 2px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.it-menu .itm-a:hover:not([disabled]), .it-menu .itm-a:focus-visible { background: #2b3350; border-left-color: #d8a64a; color: #fff; outline: none; }
.it-menu .itm-a[disabled] { cursor: default; color: #6c7286; }
.it-menu .itm-a small { color: #8c7a55; font-size: 10.5px; line-height: 1.25; }
.it-menu .itm-a.perigo { color: #ff8f84; }
.it-menu .itm-a.perigo:hover, .it-menu .itm-a.perigo:focus-visible { background: #4a1f1f; border-left-color: #ff6b5b; color: #ffd0ca; }
.it-menu .itm-sep { height: 0; margin: 3px 4px; border: 0; border-top: 1px solid #343a4e; }
/* celular: o mesmo menu embaixo, na largura da tela, com linhas faceis de tocar */
.itm-bg { position: fixed; inset: 0; z-index: 74; background: #0008; }
.it-menu.m { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); top: auto; max-width: none; max-height: 75vh; overflow-y: auto; padding: 4px; border-radius: 8px; }
.it-menu.m .itm-h { padding: 6px 8px 8px; }
.it-menu.m .itm-h b { font-size: 14px; }
.it-menu.m .itm-a { padding: 11px 12px; font-size: 14px; }
.it-menu.m .itm-a small { font-size: 12px; }
/* a ficha que o menu abre ("Ver ficha"): o cartao, sem botoes */
.itm-ficha { gap: 0; }

/* ---- a pergunta de quantidade (inv_grupos.js; Julio, 06/10: "tudo ou a quantidade exata"): por cima de tudo (menu do
   item, depot, leilao), Tudo + o numero + − e + + a barrinha; Enter confirma, Esc cancela. Celular: embaixo, botoes
   grandes. Vermelho = jogar fora; dourado = vender ---- */
.iq-bg { position: fixed; inset: 0; z-index: 79; background: #000a; }
.iq { position: fixed; z-index: 80; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, calc(100vw - 24px)); box-sizing: border-box;
  padding: 12px 14px; background: #11141d; border: 1px solid #555b70; border-radius: 10px; box-shadow: 0 16px 40px #000d; color: #e8e2d0; }
.iq .ic-h b { color: #f0c46a; font-size: 15px; }
.iq-w.perigo .iq { border-color: #8a3a32; }
.iq-w.perigo .iq .ic-h b { color: #ffb4aa; }
.iq-w.venda .iq { border-color: #8a6a2a; }
.iq-nome { margin: 6px 0 2px; font-size: 13px; color: #c9cfdd; }
.iq-nome small { color: #9aa3b8; }
.iq-l { display: block; margin: 8px 0 4px; font-size: 12px; color: #9aa3b8; }
.iq-row { display: flex; align-items: stretch; gap: 6px; }
.iq-b { width: 34px; flex: none; border: 1px solid #3a4258; border-radius: 6px; background: #1b2131; color: #e8e2d0; font-size: 18px; line-height: 1; cursor: pointer; }
.iq-b:hover, .iq-b:focus-visible { background: #2b3350; outline: none; }
.iq-n { flex: 1 1 auto; min-width: 0; padding: 6px 8px; border: 1px solid #3a4258; border-radius: 6px; background: #0b0d14; color: #fff; font: 15px/1.2 Verdana, sans-serif; text-align: center; }
.iq-tudo { flex: none; }
.iq-r { width: 100%; margin: 10px 0 2px; accent-color: #d8a64a; }
.iq-res { margin: 8px 0 10px; font-size: 13.5px; line-height: 1.45; }
.iq-nota { margin: -4px 0 10px; font-size: 12px; color: #9aa3b5; }
.iq-w.m .iq { left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); transform: none; width: auto; padding: 14px; }
.iq-w.m .iq-b { width: 46px; font-size: 22px; }
.iq-w.m .iq-n { font-size: 17px; padding: 10px 8px; }
.iq-w.m .iq-r { height: 28px; }
.iq-w.m .it-acts .btn, .iq-w.m .iq-tudo { padding: 10px 12px; font-size: 14px; }