/* ═══════════ Inventário (GOD) — CONCEITO B · Paperdoll Central estilo Divinity ═══════════
   Roster de medalhões no topo · atributos à esquerda · boneco GRANDE com slots orbitando (sem fios)
   ao centro · grade com abas à direita. MECÂNICA intocada (mesmos data-attrs/classes que o JS consulta):
   só a APRESENTAÇÃO muda. Fundo = mundo do jogo DESFOCADO atrás do véu (backdrop-filter no overlay). */
#inventory { background: radial-gradient(760px 560px at 50% 58%, rgba(214,150,58,.10), transparent 68%),
    linear-gradient(rgba(6,5,9,.5), rgba(6,5,9,.62));
  backdrop-filter: blur(7px) saturate(.9); -webkit-backdrop-filter: blur(7px) saturate(.9);
  display: flex; align-items: center; justify-content: center; }
.inv-wrap { width: min(97vw, 1320px); height: min(94vh, 862px); display: flex; flex-direction: column;
  color: #cdbf9a; font-family: var(--game-font); overflow: hidden; padding: 8px 14px 12px; }
#inventory button, #inventory select { font-family: inherit; }

/* ── TOPO: título + roster de medalhões + ouro + fechar ── */
.inv-top { display: flex; align-items: center; gap: 16px; height: 92px; flex: 0 0 auto; padding: 0 4px; }
.inv-top h2.inv-title { margin: 0; font-family: var(--font-title); font-weight: 700; font-size: 16px; letter-spacing: .06em;
  color: #f0c77f; text-shadow: 0 1px 2px #000, 0 0 12px rgba(216,173,90,.3); white-space: nowrap; }
.inv-title small { display: block; font-family: var(--game-font); font-size: 9px; font-weight: 400; letter-spacing: .2em;
  color: #948f86; text-transform: uppercase; margin-top: 3px; }
.inv-roster { margin: 0 auto; display: flex; gap: 16px; }
.inv-gold { font-size: 13px; color: #f0c77f; padding: 6px 12px; border: 10px solid transparent;
  border-image: url("/assets/ui/forja/panel.png") 82 fill stretch; white-space: nowrap; }
/* override do .ov-close GLOBAL (menu.css o deixa position:absolute+círculo) — no Conceito B ele é um item
   do fluxo do topo (como na maquete), senão a moldura do painel some e ele se sobrepõe ao chip de ouro no mobile. */
#inventory .ov-close { position: static; top: auto; right: auto; z-index: auto; flex: 0 0 auto; border-radius: 0; background: none;
  border: 10px solid transparent; border-image: url("/assets/ui/forja/panel.png") 82 fill stretch; box-shadow: none;
  color: #c6aa70; font-size: 14px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#inventory .ov-close:hover { filter: brightness(1.2); transform: none; }

/* medalhões circulares (retratos PixelLab) — aro dourado no selecionado */
.inv-hbtn.med { position: relative; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; cursor: pointer; padding: 0; }
.med-ring { position: relative; width: 60px; height: 60px; }
.med-img, .med-fallback { position: absolute; inset: 0; width: 60px; height: 60px; border-radius: 50%; }
.med-img { object-fit: cover; image-rendering: pixelated; background: #0d0a08;
  box-shadow: 0 0 0 2px #3a2c19, 0 0 0 4px #7c6234, 0 4px 10px rgba(0,0,0,.75); }
.med-fallback { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; color: #120c08;
  background: radial-gradient(60% 45% at 40% 32%, #fff6, var(--c, #c9a24b)); box-shadow: 0 0 0 2px #3a2c19, 0 0 0 4px #7c6234; }
.med-name { font-size: 8.5px; letter-spacing: .04em; color: #948f86; text-transform: uppercase; }
.inv-hbtn.med.on .med-ring { transform: scale(1.06); }
.inv-hbtn.med.on .med-img { box-shadow: 0 0 0 2px #14100a, 0 0 0 4px #f0d060, 0 0 18px rgba(240,208,96,.6), 0 4px 10px rgba(0,0,0,.75); }
.inv-hbtn.med.on .med-fallback { box-shadow: 0 0 0 2px #14100a, 0 0 0 4px #f0d060, 0 0 18px rgba(240,208,96,.6); }
.inv-hbtn.med.on .med-name { color: #f0c77f; }
.inv-hbtn.med:hover .med-ring { filter: brightness(1.1); }

/* ── CORPO: 3 colunas (atributos · paperdoll · grade) ── */
.inv-body { flex: 1; display: flex; gap: 12px; min-height: 0; }

/* ══ ESQUERDA: atributos + mochila ══ */
.inv-statspanel { width: 278px; flex: 0 0 auto; display: flex; flex-direction: column; overflow-y: auto; padding: 2px 8px 6px;
  border: 20px solid transparent; border-image: url("/assets/ui/forja/panel.png") 82 fill stretch; }
/* ONDA 4 (28/07, auditoria visual #20): o painel rola (scrollHeight 390 vs 285) mas o scrollbar overlay
   do Win11 tem 0px — a Mochila ficava 90% abaixo da dobra SEM nenhuma pista. Scrollbar fino estilizado
   (webkit = Chrome do jogo) ocupa 6px e fica visível sempre que houver overflow; sem overflow, some. */
.inv-statspanel::-webkit-scrollbar { width: 6px; }
.inv-statspanel::-webkit-scrollbar-thumb { background: #7c6234; border-radius: 3px; }
.inv-statspanel::-webkit-scrollbar-track { background: rgba(0,0,0,.35); }
.inv-sec { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #b89355; text-align: center;
  border-bottom: 1px solid #3a2c19; padding-bottom: 4px; margin: 8px 0 8px; }
.inv-stats { display: flex; flex-direction: column; gap: 5px; }
.inv-stat { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: #cdbf9a;
  background: rgba(0,0,0,.30); box-shadow: inset 0 0 0 1px #2c2114; padding: 5px 9px; }
.inv-stat span { color: #93876a; } .inv-stat b { color: #f0c77f; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.inv-stat b i { font-style: normal; font-size: 9px; color: #8fbf6a; }
.inv-stat.inv-dmg b { color: #e2c074; font-weight: 700; }
.inv-mochila-drop { display: flex; align-items: center; gap: 8px; padding: 8px 2px; flex-wrap: wrap;
  border-top: 1px solid rgba(217,178,76,.16); border-bottom: 1px solid rgba(217,178,76,.16); }
.inv-moch-lbl { font-weight: 800; color: #d9b24c; font-size: 12px; } .inv-moch-lbl small { opacity: .7; font-weight: 400; }
.inv-qs-row { display: flex; flex-wrap: wrap; }
.inv-hint { margin-top: auto; font-size: 9px; line-height: 1.5; color: #948f86; padding: 8px 2px 0; }
.inv-hint b { color: #c6aa70; font-weight: 400; }

/* ══ CENTRO: paperdoll central — slots orbitam o herói (sem fios) ══ */
.inv-hero { flex: 1; position: relative; min-width: 0; }
.inv-stage { position: absolute; inset: 0; }
.inv-hname { position: absolute; left: 50%; top: 0; transform: translateX(-50%); text-align: center; z-index: 4;
  font-family: var(--font-title); font-weight: 700; font-size: 14px; color: #f0c77f; letter-spacing: .06em; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.inv-hname small { display: block; font-family: var(--game-font); font-size: 9px; font-weight: 400; color: #948f86;
  letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
.inv-aura { position: absolute; left: 50%; top: 54%; width: 62%; height: 66%; transform: translate(-50%,-50%); z-index: 0;
  background: radial-gradient(closest-side, rgba(214,150,58,.15), transparent 72%); pointer-events: none; }
.inv-doll-art { position: absolute; left: 50%; top: 51%; transform: translate(-50%,-52%); z-index: 1;
  display: flex; align-items: flex-end; justify-content: center; filter: drop-shadow(0 8px 12px rgba(0,0,0,.6)); }
.inv-doll-art .cr { --px: 11px; }
.inv-doll-art--f { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 48px; color: #120c08; background: radial-gradient(60% 45% at 40% 32%, #fff6, var(--c, #c9a24b)); }
.inv-hero-shadow { position: absolute; left: 50%; top: 76%; width: 40%; height: 26px; transform: translateX(-50%); z-index: 0;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent 75%); pointer-events: none; }

/* SLOT orbitando: centrado no X pela transform (independe do tamanho → escala no mobile sem descentralizar) */
.inv-slot { position: relative; cursor: pointer; color: #a9b394; transition: filter .12s; }
/* MATA o border "outset" branco padrão de <button> da UA (reclamação Lucas 11/07: "moldura branca"
   por cima da moldura de raridade). Os slots/cards são <button>; sem este reset a UA desenha um anel
   3D cinza-claro. box-sizing:border-box garante que a moldura de raridade (bg) fique centrada. */
.inv-slot, .inv-item { -webkit-appearance: none; appearance: none; border: 0; box-sizing: border-box; background-color: transparent; }
/* moldura ÚNICA como na maquete (acabamento 11/07): o PNG de raridade (--frame, vindo do JS) é o PRÓPRIO
   fundo esticado do slot — antes o fundo era sempre o "comum" E um ::before de border-image punha a moldura
   de raridade POR CIMA (dupla moldura desalinhada, reclamação #2 do Lucas). Vazio cai no fallback comum. */
.inv-slot.orbit { position: absolute; z-index: 3; width: 66px; height: 66px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  background: var(--frame, url("/assets/ui/pixellab/slot_comum.png")) center/100% 100% no-repeat; font-size: 23px; text-shadow: 0 2px 3px #000; }
.inv-slot.orbit.acc { width: 48px; height: 48px; font-size: 17px; }
.inv-slot.orbit .inv-sic { font-size: 22px; line-height: 1; }
.inv-slot.orbit.acc .inv-sic { font-size: 17px; }
/* ═══ ÍCONE DO SLOT VAZIO NA MESMA RÉGUA DO CHEIO (30/07) ══════════════════════════════════════
   O slot vazio desenhava o emoji a 22×16px dentro da MESMA moldura em que o item equipado aparece a
   40px — 2,5× menor, e a moldura lia como furada. Agora o vazio traz a arte de assets/ui/equip no
   tamanho-alvo do item (sz = 40 principal / 26 acessório, definido em inventory.js).
   Não precisa de opacidade própria: a regra logo abaixo já apaga o slot inteiro enquanto ele está
   vazio, e é ela que diz "aqui não tem nada" — repetir aqui só faria o ícone sumir duas vezes. */
.inv-slot.orbit .inv-sic .ic-ui { width: 40px; height: 40px; }
.inv-slot.orbit.acc .inv-sic .ic-ui { width: 26px; height: 26px; }
.inv-slot.orbit.empty, .inv-slot.orbit:not(.eq) { opacity: .5; filter: grayscale(.6); }
.inv-slot.orbit.eq { opacity: 1; filter: none; }
/* legenda "papel · Nome" ABAIXO do slot (acabamento 11/07): estava virando flex-item DENTRO do slot — o
   position:relative do bloco de z-index (mais abaixo) atropelava este absolute (mesma especificidade, regra
   posterior) → legenda espremida ao lado do ícone, "Arma--" (reclamação #1). Agora: absoluta de verdade
   (top:100% cresce pra BAIXO, nunca por cima do ícone), até 2 linhas como na maquete, ellipsis só na 2ª;
   pointer-events:none pra não roubar clique/toque dos acessórios do arco logo abaixo. */
.inv-slot.orbit .inv-oslabel { position: absolute; top: calc(100% + 1px); left: -22px; right: -22px; font-size: 8px; color: #9a8a63;
  text-align: center; letter-spacing: .04em; text-shadow: 0 1px 2px #000; line-height: 1.15; pointer-events: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; z-index: 2; }
.inv-slot.orbit.eq::after { content: ""; position: absolute; inset: 8px; border-radius: 6px;
  box-shadow: 0 0 11px var(--rc, transparent); opacity: .5; pointer-events: none; }
.inv-slot.orbit:hover { filter: brightness(1.18); }
.inv-slot .inv-sic { flex: none; }
.inv-slot.eq .inv-sic { filter: none; }

/* ══ DIREITA: abas + grade ══ */
.inv-right { width: 396px; flex: 0 0 auto; min-width: 0; display: flex; flex-direction: column; padding: 0 8px 4px;
  border: 20px solid transparent; border-image: url("/assets/ui/forja/panel.png") 82 fill stretch; }
.inv-tabs { display: flex; gap: 6px; padding-bottom: 6px; }
/* ABAS no padrão da Forja (.blacksmith-tabs button em forja.css — acabamento 11/07): botão com border-image
   PRECISA de background:none, senão o cinza-claro default da UA vaza pelo miolo translúcido do panel.png
   ("branco esquisito", reclamação #3). Cores da Forja: repouso #948f86 → ativa #e2c074 + brasa embaixo. */
.inv-tab { cursor: pointer; flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  position: relative; overflow: hidden; border: 14px solid transparent; border-image: url("/assets/ui/forja/panel.png") 82 fill stretch;
  background: none; box-shadow: none; border-radius: 0;
  color: #948f86; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; padding: 1px 2px; }
.inv-tab:hover { filter: brightness(1.15); color: #c6aa70; }
.inv-tab.on { color: #e2c074; }
.inv-tab.on::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 4px; height: 15px; pointer-events: none;
  background: radial-gradient(58% 120% at 50% 100%, rgba(214,150,58,.5), rgba(214,150,58,0) 72%); }
.inv-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 100px; gap: 7px; align-content: start;
  overflow-y: auto; padding: 4px 2px; min-height: 0; }
/* card da GRADE = SLOT emoldurado (pedido Lucas 11/07: "a moldura + o item dentro de toda a grade
   disposta para cada item"). A moldura de RARIDADE (--frame) preenche a CÉLULA inteira; o ícone fica
   centralizado dentro dela e o nome no rodapé, sobre a moldura. Célula quadrada (aspect-ratio) pra a
   moldura não distorcer. */
.inv-item { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--frame, url("/assets/ui/pixellab/slot_comum.png")) center/100% 100% no-repeat;
  color: #cdbf9a; font-size: 8.5px; transition: filter .12s; }
.inv-item:hover { filter: brightness(1.16) drop-shadow(0 0 7px rgba(217,178,76,.5)); }
.inv-item.no { opacity: .42; cursor: default; } .inv-item.no:hover { filter: none; }
.inv-iic { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 22px; text-shadow: 0 2px 3px #000; }
/* ONDA 4 (28/07, auditoria visual #16): o nome PRECISA ficar absolute — a lista de z-index lá embaixo
   (junto de .inv-sic) o recolocava em position:relative (mesma especificidade, regra posterior) e ele
   virava flex-item: empurrava o ícone 5-9px do centro nos 63 cards e o left:2px (sem o right valer)
   deslocava a legenda 2px à direita. O z-index:2 dele mora AQUI agora (saiu daquela lista). */
.inv-iname { position: absolute; z-index: 2; left: 2px; right: 2px; bottom: 2px; font-size: 8px; line-height: 1.1; text-align: center; color: #e6d8b4;
  text-shadow: 0 1px 2px #000, 0 0 4px #000; background: linear-gradient(0deg, rgba(6,5,9,.78), rgba(6,5,9,.5) 70%, transparent); padding: 2px 2px 1px; border-radius: 0 0 4px 4px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* badge ×N no canto do card (maquete): z-index aqui MESMO — na lista compartilhada lá embaixo o
   position:relative atropelava este absolute e o ×N caía pra baixo do nome (mesmo bug da legenda orbital) */
.inv-qty { position: absolute; top: 3px; right: 5px; font-size: 9px; color: #f0c77f; font-weight: 700; z-index: 2; }
.inv-empty { grid-column: 1/-1; color: #93876a; font-size: 12px; padding: 20px; text-align: center; }
.inv-msg { min-height: 16px; font-size: 10.5px; color: #f0c77f; text-align: center; padding-top: 4px; text-shadow: 0 1px 2px #000; }
/* ONDA 4 (28/07, auditoria visual #30): SÓ no PC — o PNG da moldura é QUADRADO (181×181) e o card da
   grade é 78.75×100: o center/100% 100% comprimia a moldura 21% na vertical. Vira 9-slice num ::before
   (mesma fatia 30 dos qs-slots; 14px ≈ espessura que a borda já tinha na tela): cantos quadrados,
   miolo preenchido (fill), sem buracos. Conteúdo não muda de caixa (::before absoluto, z abaixo do
   ícone/nome que já têm z-index:2). No celular o card é ~quadrado (84.66×82) — segue como está. */
@media (min-height: 481px) {
  .inv-item { background: none; }
  .inv-item::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    border-style: solid; border-width: 14px; border-image-slice: 30 fill; border-image-width: 14px;
    border-image-repeat: stretch; border-image-source: var(--frame, url("/assets/ui/pixellab/slot_comum.png")); }
}

/* ═══════════ Arrasta-e-solta ═══════════ */
.inv-item, .inv-slot { touch-action: pan-y; }
#inventory .itemimg, #inventory .itemimg img { pointer-events: none; -webkit-user-drag: none; user-select: none; }
.inv-dragging, .inv-dragging * { cursor: grabbing !important; }
.inv-dragging .inv-item, .inv-dragging .inv-slot { user-select: none; }
.inv-ghost { position: fixed; left: 0; top: 0; z-index: 9999; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  display: flex; align-items: center; justify-content: center; font-size: 22px; pointer-events: none; opacity: .85;
  border-radius: 9px; border: 2px solid var(--rc, #d9b24c); background: rgba(18,14,8,.92);
  box-shadow: 0 10px 22px -6px #000, 0 0 14px -2px color-mix(in srgb, var(--rc) 60%, transparent); transform: scale(1.08); }
/* slots compatíveis acendem; sob o ponteiro = glow forte. Orbit mantém o translateX(-50%) ao escalar. */
.inv-slot.drop-ok { box-shadow: 0 0 0 1px #f0c96a, 0 0 12px -1px rgba(240,201,106,.55); animation: invDropPulse 1s ease-in-out infinite; opacity: 1; filter: none; }
.inv-slot.drop-no { opacity: .3; filter: grayscale(.6); }
.inv-slot.drop-hover { box-shadow: 0 0 0 2px #ffe08a, 0 0 20px 1px rgba(255,224,138,.8); animation: none; }
.inv-slot.orbit.drop-hover { transform: translateX(-50%) scale(1.06); }
.inv-mochila-drop.drop-ok { outline: 2px solid #f0c96a; outline-offset: 2px; border-radius: 8px; animation: invDropPulse 1s ease-in-out infinite; }
.inv-mochila-drop.drop-hover { outline: 2px solid #ffe08a; box-shadow: 0 0 18px -2px rgba(255,224,138,.7); animation: none; }
@keyframes invDropPulse { 0%, 100% { box-shadow: 0 0 0 1px #f0c96a, 0 0 8px -1px rgba(240,201,106,.4); } 50% { box-shadow: 0 0 0 1px #f0c96a, 0 0 16px 1px rgba(240,201,106,.75); } }

/* ═══════════ Moldura de raridade nos QUICK-SLOTS da mochila (assets/ui/pixellab/slot_*.png) ═══════════
   Só aqui a moldura ainda é ::before (border-image 9-slice) — o botão tem fundo próprio inline. Nos slots
   orbitais e na grade a raridade virou o PRÓPRIO fundo (moldura única, ver acima) — o ::before duplicado
   nesses dois era a "moldura dentro de moldura" que o Lucas apontou (11/07). */
.qs-slot { position: relative; }
.qs-slot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border-style: solid; border-width: 9px; border-image-slice: 30; border-image-width: 9px; border-image-repeat: stretch;
  border-image-source: var(--frame, url("/assets/ui/pixellab/slot_comum.png")); }
.qs-slot:not(.filled)::before { opacity: .55; }
/* ONDA 4 (28/07, auditoria visual #16): .inv-iname SAIU desta lista — o position:relative daqui vencia
   o absolute da regra do card (mesma especificidade, ordem posterior) e descentralizava o ícone. */
.inv-sic, .inv-iic, #inventory .itemimg, #inventory .cr { position: relative; z-index: 2; }

/* ══ ALERTA DE PONTOS DE TALENTO (Divinity 2 — decisão Lucas 11/07): seta quica no medalhão ══ */
.tp-arrow { position: absolute; top: -13px; left: 50%; margin-left: -7px; z-index: 6; width: 14px; height: 14px; pointer-events: none;
  animation: tpBob 1.1s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(255,215,120,.9)) drop-shadow(0 1px 1px #000); }
.tp-arrow::before { content: ''; position: absolute; left: 2px; top: 0; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid #ffd76e; }
.tp-arrow::after { content: ''; position: absolute; left: 4.5px; top: 6px; width: 5px; height: 6px; background: linear-gradient(180deg,#ffd76e,#c9922e); }
@keyframes tpBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* faixa clicável no palco do herói (abre a Árvore) */
.tp-hint { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 8px;
  max-width: 92%; margin: 0; padding: 5px 12px; font: 700 10.5px/1.2 var(--game-font, monospace); letter-spacing: .02em; color: #e2c074; text-align: left;
  background: rgba(20,15,8,.86); border: 1px solid rgba(217,178,76,.4); border-radius: 6px; cursor: pointer; white-space: nowrap; }
.tp-hint:hover { background: rgba(40,28,12,.92); color: #f0c77f; }
.tp-hint i { position: relative; width: 14px; height: 14px; flex: 0 0 auto; animation: tpBob 1.1s ease-in-out infinite; filter: drop-shadow(0 0 3px rgba(255,215,120,.8)); }
.tp-hint i::before { content: ''; position: absolute; left: 2px; top: 0; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid #ffd76e; }
.tp-hint i::after { content: ''; position: absolute; left: 4.5px; top: 6px; width: 5px; height: 6px; background: linear-gradient(180deg,#ffd76e,#c9922e); }
@media (prefers-reduced-motion: reduce) { .tp-arrow, .tp-hint i { animation: none; } }

/* ══ TOOLTIP DE COMPARAÇÃO (item-tip.js §compare) — deltas + card do equipado ══ */
.item-tip .up { color: #8fbf6a; font-weight: 700; } .item-tip .down { color: #c2704a; font-weight: 700; }
.item-tip .tt-cmp { opacity: .95; }
.item-tip .tt-tag { display: inline-block; font-size: 7.5px; letter-spacing: .14em; color: #1a1206; font-weight: 700;
  background: linear-gradient(180deg,#f0d27a,#c99a34); padding: 1px 6px; margin-bottom: 4px; text-transform: uppercase; border-radius: 2px; }

/* ═══════════ MOBILE PAISAGEM (844×390) — mantém a identidade do B, compacto ═══════════ */
@media (max-height: 480px) {
  .inv-wrap { height: 100vh; width: 100vw; padding: 4px 8px 6px; }
  /* space-between + roster flex:1 evita o colapso da margin:auto (que fazia ouro e ✕ se sobreporem no 844px) */
  .inv-top { height: 56px; gap: 8px; justify-content: space-between; }
  .inv-top h2.inv-title { font-size: 12px; flex: 0 0 auto; } .inv-title small { display: none; }
  .inv-roster { margin: 0; flex: 1 1 auto; min-width: 0; gap: 9px; }
  .inv-hbtn.med { width: 46px; } .med-ring, .med-img, .med-fallback { width: 38px; height: 38px; }
  .med-fallback { font-size: 15px; } .med-name { font-size: 7px; }
  /* ONDA 4 (28/07, auditoria visual #29): no topo compacto o medalhão fica a 7.5px do teto e o top:-13px
     punha a seta em -5.5px (e o quique de -4px levava a -9.5px): 39-68% da arte cortada pelo overflow do
     .inv-wrap. top:-3px deixa o PICO do quique em +0.5px — arte inteira visível; PC segue com -13px. */
  .tp-arrow { top: -3px; }
  /* ONDA 4 (28/07, auditoria visual #7a): regra ESCOPADA — sem o prefixo ela vazava p/ TODOS os overlays
     no celular (Configurações/Glossário/Descanso ficavam com X de 36px; a régua de toque é 44px) */
  #inventory .ov-close { width: 36px; height: 36px; font-size: 12px; }
  .inv-gold { font-size: 11px; padding: 4px 8px; }
  .inv-body { gap: 7px; }
  .inv-statspanel { width: 168px; border-width: 12px; padding: 0 4px 2px; }
  .inv-sec { margin: 4px 0 5px; } .inv-stat { font-size: 10px; padding: 3px 6px; } .inv-stat b { font-size: 10.5px; }
  .inv-stats { gap: 3px; } .inv-hint { display: none; }
  .inv-moch-lbl { font-size: 10px; }
  /* paperdoll menor: encolhe o sprite por transform (slots orbitam em % → seguem o palco) */
  .inv-doll-art { transform: translate(-50%,-52%) scale(.62); }
  .inv-doll-art--f { transform: none; }
  /* topo do palco compacto: some o "papel · nível" (vive na Ficha) e a faixa de talentos sobe — antes a
     faixa preta cobria o slot do ELMO (vazamento apontado pelo Lucas 11/07); elmo ainda desce 6px de folga */
  .inv-hname { font-size: 11px; } .inv-hname small { display: none; }
  .inv-slot.orbit { width: 46px; height: 46px; } .inv-slot.orbit .inv-sic { font-size: 16px; }
  .inv-slot.orbit.acc { width: 34px; height: 34px; } .inv-slot.orbit.acc .inv-sic { font-size: 12px; }
  /* 1 linha só no mobile: a 2ª linha de calças/botas invadia os anéis do arco (7px de sobreposição) */
  /* ONDA 4 (28/07, auditoria visual #31c): 6.5px truncava 5/7 legendas e é ilegível (régua de baixa
     visão) — sobe pra 8px; sem colisão porque calças/botas agora moram DENTRO do slot (regra abaixo). */
  .inv-slot.orbit .inv-oslabel { font-size: 8px; -webkit-line-clamp: 1; }
  /* ONDA 4 (28/07, auditoria visual #31a): no palco baixo a legenda de Calças/Botas caía sobre o arco de
     acessórios e ficava POR BAIXO das molduras dos aros (mesma z, slot vem depois no DOM). Não há espaço
     abaixo do slot: a legenda entra no RODAPÉ do próprio slot (mesmo padrão do nome nos cards da grade)
     → interseção 0 com os aros; o nome completo continua no long-press (ficha do item). */
  .inv-slot.orbit[data-slot="legs"] .inv-oslabel, .inv-slot.orbit[data-slot="boots"] .inv-oslabel {
    top: auto; bottom: 2px; left: 1px; right: 1px; border-radius: 0 0 6px 6px;
    background: linear-gradient(0deg, rgba(6,5,9,.8), rgba(6,5,9,.55) 75%, transparent); }
  .inv-slot.orbit[data-slot="helmet"] { margin-top: 6px; }
  /* arco de acessórios: as % de ACC_POS ancoram o TOPO — no palco baixo do 844×390 o fundo do arco
     (anéis centrais) estourava a base do palco em ~3px; margem negativa recolhe só esses três */
  .inv-slot.orbit.acc[data-slot="ring2"], .inv-slot.orbit.acc[data-slot="ring4"] { margin-top: -2px; }
  .inv-slot.orbit.acc[data-slot="ring3"] { margin-top: -5px; }
  .tp-hint { top: 14px; font-size: 8.5px; padding: 3px 8px; }
  .inv-right { width: 300px; border-width: 12px; padding: 0 4px 2px; }
  .inv-tab { min-height: 34px; font-size: 8.5px; border-width: 10px; }
  .inv-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 82px; gap: 5px; }
  .inv-iic { width: 38px; height: 38px; font-size: 18px; } .inv-iname { font-size: 7.5px; }
  .inv-msg { font-size: 9px; min-height: 12px; }
}