/* A NUI do Aqua Inventory. Cor, raio, fonte e tempo saem do tokens.css do kit, que vem do
   aqua-manager em runtime; nao ha um literal de cor neste arquivo (regra 14).

   GERADO a partir da maquete aprovada em docs/superpowers/maquetes/2026-09-28-aqua-inventory/
   (base.css e modelos/m5-vitrine.css), pelo scratchpad/gerar-css.mjs. O desenho que o dono
   aprovou e o que esta aqui: quem for mexer no visual mexe na maquete e gera de novo, senao os
   dois divergem. */

/* As primitivas comuns aos sete modelos da maquete do Aqua Inventory: a casca, o quadro, o vidro,
   a peca, a ficha, o aviso, a troca e o padrao do mercado. Cor, raio, fonte e tempo saem do
   tokens.css; nenhum literal de cor. O que da a FORMA de cada modelo mora em modelos/. */

html, body { margin: 0; height: 100%; overflow: hidden; background: transparent; }
body { font-family: var(--aqua-font-sans); color: var(--aqua-white); -webkit-font-smoothing: antialiased; }

/* ---- a raiz ------------------------------------------------------------------------------ */
/* Na maquete isto era um quadro de 1920x1080 escalado; no jogo e a tela inteira, e o fundo e o
   proprio jogo. A NUI nunca pinta um veu por cima: e o "mais transparente possivel" do briefing. */
.iv-tela {
	--iv-slot: 84px;
	--iv-vao: 8px;
	--iv-cols: 7;
	--iv-icone: 54px;
	--iv-raio: var(--aqua-radius-sm);
	--iv-pad: 22px;
	--iv-gap-caixa: 18px;
	--iv-filtro: none;
	--iv-borda: rgb(var(--aqua-white-rgb) / var(--aqua-vidro-nui-vidro-borda));
	--iv-aresta: inset 0 1px 0 rgb(var(--aqua-white-rgb) / var(--aqua-vidro-nui-vidro-aresta));
	--iv-sombra-texto: 0 1px 2px rgb(var(--aqua-black-rgb) / 60%);
	position: fixed; inset: 0; overflow: hidden; user-select: none; display: none;
}
.iv-tela.iv-visivel { display: block; }

/* O palco tem 1920x1080 em px de jogo e e ESCALADO para caber na tela, como a NUI do Aqua Vitals
   faz. Sem isto o desenho so caberia numa tela de exatamente 1080p: em 900p ele transborda por
   cima e por baixo, e em 1440p fica pequeno no meio. As medidas do CSS sao as da maquete. */
.iv-aqua {
	position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
	transform: translate(-50%, -50%) scale(var(--iv-escala, 1));
}

/* ---- o material -------------------------------------------------------------------------- */
/* Nivel 1 (a peca) sem tint, 2 e 3 com 20% de preto: os numeros do dono (ADR 0042). */
.iv-vidro {
	background: rgb(var(--aqua-vidro-nui-vidro-tom-rgb) / var(--aqua-vidro-nui-vidro-2-tint));
	-webkit-backdrop-filter: var(--iv-filtro);
	backdrop-filter: var(--iv-filtro);
	border: 1px solid var(--iv-borda);
	box-shadow: var(--iv-aresta);
}
/* A peca e um ladrilho escuro, sem contorno. Pedido do dono em 2026-10-07: a borda de 15% e a aresta de 30%
   do vidro, que na landing somem atras do blur de cada peca, no jogo viravam um contorno branco em cada slot,
   porque la a peca nao tem blur proprio (o do jogo e um canvas so, atras da caixa). */
.iv-item.iv-vidro { background: rgb(var(--aqua-black-rgb) / 22%); border-color: transparent; box-shadow: none; }

/* Sem blur: o modo de maquina fraca e o nui-veu do kit, com o contraste medido. */
.iv-tela.iv-sem-vidro .iv-vidro {
	-webkit-backdrop-filter: none; backdrop-filter: none;
	background: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-nui-veu-3-tint));
}
.iv-tela.iv-sem-vidro .iv-item.iv-vidro { background: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-nui-veu-1-tint)); }

/* ---- cabecalhos, pilulas, linhas ---------------------------------------------------------- */
.iv-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--aqua-space-3); height: 44px; }
.iv-pilula {
	display: inline-flex; align-items: center; gap: var(--aqua-space-2); box-sizing: border-box;
	height: 40px; padding: 0 var(--aqua-space-4); border-radius: var(--aqua-radius-full); white-space: nowrap;
}
.iv-pilula--mini { height: 32px; padding: 0 var(--aqua-space-3); font-size: var(--aqua-fs-sm); }
.iv-pilula__nome { font-size: var(--aqua-fs-lg); font-weight: 600; letter-spacing: -0.01em; }
.iv-pilula__id { font: 500 var(--aqua-fs-sm) / 1 var(--aqua-font-mono); opacity: 0.75; }
.iv-pilula__icone { width: 18px; height: 18px; flex: none; }
.iv-peso { font: 500 var(--aqua-fs-sm) / 1 var(--aqua-font-mono); }
.iv-peso__num { font-weight: 600; }
.iv-peso__de { opacity: 0.8; margin-left: var(--aqua-space-1); }
.iv-peso.iv-nao { animation: iv-nao var(--aqua-t-base) var(--aqua-ease-in-out); color: var(--aqua-warning); }
.iv-outro__nota:empty { display: none; }
.iv-bolsos__rotulo { font-weight: 600; }
.iv-bolsos__nota { font-weight: 400; opacity: 0.75; margin-left: var(--aqua-space-1); }

.iv-linha { position: relative; height: 2px; margin: var(--aqua-space-3) 0 var(--aqua-space-4); border-radius: 1px; background: rgb(var(--aqua-white-rgb) / 18%); overflow: hidden; }
.iv-linha--vazia { background: rgb(var(--aqua-white-rgb) / 10%); }
.iv-linha__cheio {
	position: absolute; inset: 0 auto 0 0; width: calc(var(--iv-peso, 0) * 100%);
	background: var(--aqua-white); transition: width var(--aqua-t-lento) var(--aqua-ease-out), background-color var(--aqua-t-rapido) var(--aqua-ease-out);
}
.iv-linha__cheio.iv-alto { background: var(--aqua-warning); }

/* ---- a grade e o slot: cada modelo diz o que e um slot vazio ------------------------------ */
.iv-grade { display: grid; grid-template-columns: repeat(var(--iv-cols), var(--iv-slot)); gap: var(--iv-vao); }
.iv-grade--bolsos { grid-template-columns: repeat(3, var(--iv-slot)); }
.iv-grade--troca { grid-template-columns: repeat(6, var(--iv-slot)); }
.iv-hotbar { grid-template-columns: repeat(5, var(--iv-slot)); }
.iv-slot { position: relative; box-sizing: border-box; width: var(--iv-slot); height: var(--iv-slot-h, var(--iv-slot)); }
.iv-slot__n { position: absolute; left: 8px; top: 6px; z-index: 2; font: 600 var(--aqua-fs-xs) / 1 var(--aqua-font-mono); opacity: 0.85; pointer-events: none; text-shadow: var(--iv-sombra-texto); }

/* ---- a peca ------------------------------------------------------------------------------- */
.iv-item {
	position: absolute; inset: 0; display: grid; place-items: center; box-sizing: border-box;
	border-radius: var(--iv-raio); cursor: grab; outline: none;
	transition: transform var(--aqua-t-rapido) var(--aqua-ease-out), border-color var(--aqua-t-rapido) var(--aqua-ease-out), background-color var(--aqua-t-rapido) var(--aqua-ease-out);
}
.iv-item:hover { transform: translateY(-1px); }
.iv-item.iv-vidro:hover { background: rgb(var(--aqua-black-rgb) / 30%); }
.iv-item:active { transform: scale(0.97); transition-duration: var(--aqua-t-toque); }
.iv-item:focus-visible { box-shadow: 0 0 0 2px var(--aqua-white); }
.iv-item.iv-origem { opacity: 0.3; }
.iv-item__icone { width: var(--iv-icone); height: var(--iv-icone); flex: none; filter: drop-shadow(0 2px 3px rgb(var(--aqua-black-rgb) / 45%)); }
.iv-item__icone img { width: 100%; height: 100%; display: block; object-fit: contain; }
.iv-item__texto { display: none; min-width: 0; }
.iv-item__nome { display: block; font-size: var(--aqua-fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-item__meta { display: block; font-size: var(--aqua-fs-xs); opacity: 0.7; white-space: nowrap; }
.iv-item__qtd { position: absolute; right: 9px; bottom: 9px; font: 500 var(--aqua-fs-xs) / 1 var(--aqua-font-mono); text-shadow: 0 1px 2px rgb(var(--aqua-black-rgb) / 70%); }
.iv-item__qtd.iv-pulo { animation: iv-pulo var(--aqua-t-base) var(--aqua-ease-out); }
.iv-item__preco { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 600 var(--aqua-fs-xs) / 1 var(--aqua-font-mono); }
.iv-item__vida { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 1px; background: rgb(var(--aqua-white-rgb) / 16%); overflow: hidden; }
.iv-item__vida span { display: block; height: 100%; width: calc(var(--vida, 1) * 100%); background: rgb(var(--aqua-white-rgb) / 85%); }
.iv-item--baixa .iv-item__vida span { background: var(--aqua-warning); }
.iv-item--estragado .iv-item__icone { opacity: 0.4; }
.iv-item__selo { position: absolute; left: 0; right: 0; top: 8px; text-align: center; font-size: var(--aqua-fs-xs); font-weight: 600; color: var(--aqua-warning); text-shadow: 0 1px 2px rgb(var(--aqua-black-rgb) / 70%); }
.iv-item__uso { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; }
.iv-item__uso path { fill: none; stroke: var(--aqua-white); stroke-width: 2; stroke-linecap: round; }

/* O que voa com o mouse e so o icone do item: sem cartao, sem borda, sem vidro (pedido do dono em
   2026-09-30). Ele fica fora do <body>, e por isso a posicao e fixed em relacao a tela inteira. A
   sombra longa e o que diz "esta levantado"; o transform e escrito a cada quadro pelo JS. */
.iv-fantasma {
	position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; will-change: transform;
	filter: drop-shadow(0 14px 16px rgb(var(--aqua-black-rgb) / 55%));
}
.iv-fantasma .iv-item__icone {
	width: 100%; height: 100%; filter: none;
	animation: iv-levanta var(--aqua-t-rapido) var(--aqua-ease-out) both;
}
@keyframes iv-levanta { from { transform: scale(0.82); opacity: 0.6; } }
.iv-tela.iv-arrastando, .iv-tela.iv-arrastando * { cursor: grabbing; }
.iv-tela.iv-arrastando .iv-item:hover { transform: none; }

/* A gota: o anel que abre ao abrir e no slot que recebe a peca. */
.iv-onda {
	position: absolute; z-index: 15; width: 56px; height: 56px; border-radius: 50%; pointer-events: none;
	border: 1px solid rgb(var(--aqua-white-rgb) / 70%);
	animation: iv-onda var(--aqua-t-lento) var(--aqua-ease-out) both;
}

/* ---- a ficha: o item em foco, com a historia dele ---------------------------------------- */
.iv-ficha {
	position: absolute; box-sizing: border-box; z-index: 12;
	padding: var(--aqua-space-6); border-radius: var(--aqua-radius-lg);
	opacity: 0; transform: translateY(6px); pointer-events: none;
	transition: opacity var(--aqua-t-base) var(--aqua-ease-out), transform var(--aqua-t-base) var(--aqua-ease-out);
}
.iv-ficha.iv-aberta { opacity: 1; transform: none; pointer-events: auto; }
.iv-ficha__topo { display: flex; align-items: center; gap: var(--aqua-space-4); }
.iv-ficha__icone { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: var(--iv-raio); border: 1px solid var(--iv-borda); }
.iv-ficha__icone .iv-item__icone { width: 44px; height: 44px; }
.iv-ficha__nome { margin: 0; font-size: var(--aqua-fs-xl); font-weight: 600; letter-spacing: -0.01em; line-height: var(--aqua-lh-tight); }
.iv-ficha__tipo { margin-top: var(--aqua-space-1); font-size: var(--aqua-fs-sm); opacity: 0.75; }
.iv-ficha__linhas { margin: var(--aqua-space-4) 0 0; display: grid; gap: var(--aqua-space-2); font-size: var(--aqua-fs-sm); }
.iv-ficha__linhas:empty { display: none; }
.iv-ficha__linha { display: flex; justify-content: space-between; gap: var(--aqua-space-3); }
.iv-ficha__linha dt { opacity: 0.75; }
.iv-ficha__linha dd { margin: 0; font-family: var(--aqua-font-mono); text-align: right; }
.iv-ficha__vida { margin-top: var(--aqua-space-4); font-size: var(--aqua-fs-sm); }
.iv-ficha__vida .iv-linha { margin: var(--aqua-space-2) 0 0; }
.iv-ficha__vida .iv-linha__cheio { width: calc(var(--vida, 1) * 100%); }
.iv-ficha__aviso { color: var(--aqua-warning); font-weight: 600; }
.iv-ficha__secao { margin: var(--aqua-space-6) 0 var(--aqua-space-3); font-size: var(--aqua-fs-sm); font-weight: 600; }
.iv-historia { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--aqua-space-3); }
.iv-historia li { position: relative; padding-left: var(--aqua-space-6); font-size: var(--aqua-fs-sm); line-height: var(--aqua-lh-base); animation: iv-emerge var(--aqua-t-base) var(--aqua-ease-out) both; animation-delay: calc(var(--aqua-cascata) * var(--i, 0) / 2); }
.iv-historia li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--aqua-white); }
.iv-historia li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 18px; bottom: calc(var(--aqua-space-3) * -1); width: 1px; background: rgb(var(--aqua-white-rgb) / 30%); }
.iv-historia li.iv-barrado::before { background: var(--aqua-warning); }
.iv-historia__quando { display: block; font: 500 var(--aqua-fs-xs) / 1.4 var(--aqua-font-mono); opacity: 0.7; }
.iv-ficha__acoes { display: flex; flex-wrap: wrap; gap: var(--aqua-space-2); margin-top: var(--aqua-space-6); }
.iv-ficha__nota { margin: var(--aqua-space-2) 0 0; font-size: var(--aqua-fs-xs); opacity: 0.8; }
.iv-passo { display: inline-flex; align-items: center; gap: var(--aqua-space-2); font: 500 var(--aqua-fs-md) / 1 var(--aqua-font-mono); }

/* ---- a quantidade: um estado da peca em foco, e nao um dialogo ---------------------------- */
.iv-qtd { display: grid; gap: var(--aqua-space-2); margin-top: var(--aqua-space-4); }
.iv-qtd__rotulo { font-size: var(--aqua-fs-xs); font-weight: 600; opacity: 0.75; }
.iv-qtd__passo { display: inline-flex; align-items: center; gap: 2px; align-self: start; padding: 3px; border-radius: var(--aqua-radius-full); border: 1px solid var(--iv-borda); background: rgb(var(--aqua-white-rgb) / 6%); }
.iv-qtd__passo .aqua-btn { min-width: 30px; justify-content: center; border-radius: var(--aqua-radius-full); }
.iv-qtd__campo {
	width: 72px; border: 0; outline: 0; background: transparent; color: inherit; text-align: center;
	font: 600 var(--aqua-fs-lg) / 1 var(--aqua-font-mono);
}
.iv-qtd__atalhos { display: flex; flex-wrap: wrap; gap: 4px; }
.iv-qtd__atalhos .aqua-btn[aria-pressed="true"] { background: rgb(var(--aqua-white-rgb) / 18%); color: var(--aqua-white); opacity: 1; }
.iv-qtd__nota { font-size: var(--aqua-fs-xs); opacity: 0.65; }

/* o contador da serie, na propria peca: o numero sobe sem tirar o olho dela */
.iv-item__serie {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
	padding: 3px 9px; border-radius: var(--aqua-radius-full); white-space: nowrap;
	background: rgb(var(--aqua-black-rgb) / 62%); font: 600 var(--aqua-fs-xs) / 1 var(--aqua-font-mono);
	animation: iv-pulo var(--aqua-t-rapido) var(--aqua-ease-out);
}

/* ---- o menu do botao direito -------------------------------------------------------------- */
.iv-menu {
	position: absolute; z-index: 30; min-width: 234px; padding: 6px;
	border-radius: var(--aqua-radius-md); animation: iv-menu-abre var(--aqua-t-rapido) var(--aqua-ease-out);
}
.iv-menu[hidden] { display: none; }
.iv-menu__item {
	display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
	padding: 8px 10px; border: 0; background: none; color: inherit; cursor: pointer; text-align: left;
	border-radius: var(--aqua-radius-xs); font: 500 var(--aqua-fs-sm) / 1.2 var(--aqua-font-sans);
	transition: background-color var(--aqua-t-toque) var(--aqua-ease-out);
}
.iv-menu__item i { width: 15px; height: 15px; flex: none; opacity: 0.8; }
.iv-menu__item:hover { background: rgb(var(--aqua-white-rgb) / 12%); }
.iv-menu__item:active { background: rgb(var(--aqua-white-rgb) / 18%); }
.iv-menu__atalho { margin-left: auto; font: 500 var(--aqua-fs-xs) / 1 var(--aqua-font-mono); opacity: 0.55; }
@keyframes iv-menu-abre { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }

/* ---- aviso e dica ------------------------------------------------------------------------- */
.iv-aviso {
	position: absolute; top: 40px; left: 50%; z-index: 25; display: flex; align-items: center; gap: var(--aqua-space-3);
	max-width: 760px; box-sizing: border-box; padding: var(--aqua-space-3) var(--aqua-space-4); border-radius: var(--aqua-radius-md);
	font-size: var(--aqua-fs-md); opacity: 0; transform: translate(-50%, -8px); pointer-events: none;
	transition: opacity var(--aqua-t-base) var(--aqua-ease-out), transform var(--aqua-t-base) var(--aqua-ease-out);
}
.iv-aviso.iv-aberta { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.iv-aviso i { width: 20px; height: 20px; flex: none; }
.iv-aviso[data-tom="aviso"] i { color: var(--aqua-warning); }
.iv-aviso[data-tom="ok"] i { color: var(--aqua-success); }
.iv-aviso .aqua-btn { flex: none; }

.iv-dica {
	position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; z-index: 11;
	display: flex; align-items: center; gap: var(--aqua-space-2); white-space: nowrap;
	padding: var(--aqua-space-1) var(--aqua-space-4); border-radius: var(--aqua-radius-full); font-size: var(--aqua-fs-xs);
}
.iv-dica kbd { font: 600 var(--aqua-fs-xs) / 1 var(--aqua-font-mono); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--iv-borda); }

/* ---- a troca ------------------------------------------------------------------------------ */
.iv-troca { display: grid; gap: var(--aqua-space-6); }
.iv-troca__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--aqua-space-3); }
.iv-dinheiro { display: inline-flex; align-items: center; gap: var(--aqua-space-1); height: 36px; padding: 0 var(--aqua-space-3); border-radius: var(--aqua-radius-full); font: 500 var(--aqua-fs-sm) / 1 var(--aqua-font-mono); }
.iv-dinheiro input { width: 84px; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; }
.iv-troca__fim { display: flex; align-items: center; justify-content: space-between; gap: var(--aqua-space-4); padding: var(--aqua-space-3) var(--aqua-space-4); border-radius: var(--aqua-radius-md); }
.iv-troca__estados { display: flex; gap: var(--aqua-space-4); font-size: var(--aqua-fs-sm); }
.iv-estado { display: inline-flex; align-items: center; gap: var(--aqua-space-2); }
.iv-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--aqua-white-rgb) / 35%); transition: background-color var(--aqua-t-rapido) var(--aqua-ease-out); }
.iv-estado[data-ok="true"]::before { background: var(--aqua-success); }
.iv-troca__regra { justify-self: start; margin: 0; padding: var(--aqua-space-2) var(--aqua-space-3); border-radius: var(--aqua-radius-sm); font-size: var(--aqua-fs-xs); }

/* ---- o movimento comum -------------------------------------------------------------------- */
.iv-fechando .iv-emerge, .iv-fechando .iv-item, .iv-fechando .iv-slot::before { animation: iv-some var(--aqua-t-rapido) var(--aqua-ease-in-out) both; }
.iv-fechando .iv-ficha, .iv-fechando .iv-aviso { opacity: 0; }

@keyframes iv-emerge { from { opacity: 0; transform: translateY(10px) scale(0.94); } }
@keyframes iv-ponto { from { opacity: 0; transform: scale(0); } }
@keyframes iv-some { to { opacity: 0; transform: translateY(6px) scale(0.97); } }
@keyframes iv-onda {
	from { transform: translate(-50%, -50%) scale(0.2); opacity: 0.9; }
	to { transform: translate(-50%, -50%) scale(var(--iv-onda-escala, 3)); opacity: 0; }
}
@keyframes iv-pulo { 40% { transform: scale(1.3); } }
@keyframes iv-nao { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---- duas caixas centrais ----------------------------------------------------------------- */
/* A estrutura que as referencias do briefing mostram e que o dono de servidor ja sabe usar: o seu
   inventario a esquerda, o outro lado a direita, grade em cada um. */
.iv-palco { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: stretch; gap: var(--iv-gap-caixa, 20px); }
.iv-caixa {
	box-sizing: border-box; display: flex; flex-direction: column; gap: var(--iv-gap-caixa-int, 14px);
	padding: var(--iv-pad, 24px); border-radius: var(--iv-raio-caixa, var(--aqua-radius-lg));
}
.iv-id { display: flex; align-items: center; gap: var(--aqua-space-3); }
.iv-id__foto { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: var(--iv-raio, var(--aqua-radius-sm)); border: 1px solid var(--iv-borda); background: rgb(var(--aqua-white-rgb) / 7%); overflow: hidden; }
.iv-id__foto i { width: 26px; height: 26px; opacity: 0.8; }
.iv-id__texto { display: grid; gap: 5px; min-width: 0; }
.iv-id__nome { font-size: var(--aqua-fs-lg); font-weight: 600; letter-spacing: -0.01em; }
.iv-id__nome b { margin-left: 6px; font: 500 var(--aqua-fs-sm) / 1 var(--aqua-font-mono); opacity: 0.6; }
.iv-id__marcas, .iv-id__dinheiro { display: flex; gap: 6px; }
.iv-id__dinheiro { margin-left: auto; flex-direction: column; align-items: flex-end; }
.iv-marca { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--aqua-radius-full); background: rgb(var(--aqua-white-rgb) / 8%); font: 500 var(--aqua-fs-xs) / 1.4 var(--aqua-font-mono); white-space: nowrap; }
.iv-marca i { width: 12px; height: 12px; opacity: 0.75; }
.iv-marca--forte { background: rgb(var(--aqua-white-rgb) / 14%); font-size: var(--aqua-fs-sm); }
.iv-pesobar { display: grid; gap: 6px; }
.iv-pesobar .iv-peso { display: flex; justify-content: space-between; }
.iv-pesobar .iv-linha { margin: 0; }
.iv-titulo { display: flex; align-items: center; gap: var(--aqua-space-2); }
.iv-titulo__icone { width: 17px; height: 17px; flex: none; opacity: 0.85; }
.iv-titulo__nome { font-size: var(--aqua-fs-md); font-weight: 600; }
.iv-titulo__nota { margin-left: auto; font-size: var(--aqua-fs-xs); opacity: 0.7; text-align: right; }
.iv-titulo__nota:empty { display: none; }

/* Modelo 5, Vitrine: duas caixas, e a cabeca da sua e o item em foco, grande. O resto da
   estrutura e o padrao do mercado, inteiro. */

{ --iv-slot: 84px; --iv-vao: 8px; --iv-cols: 7; --iv-icone: 54px; --iv-raio: var(--aqua-radius-sm); --iv-pad: 22px; --iv-gap-caixa: 18px; }

.iv-caixa--voce { width: 690px; }
.iv-caixa--outro { width: 592px; --iv-cols: 6; }
.iv-caixa .iv-grade[data-recipiente="voce"], .iv-caixa .iv-grade--outro { align-content: start; min-height: calc(var(--iv-slot) * 4 + var(--iv-vao) * 3); }

/* a vitrine: o item em foco, grande, com o texto ao lado */
.v5-vitrine {
	position: relative; height: 268px; margin: -6px -6px 2px; padding: 16px 18px; box-sizing: border-box;
	border-radius: var(--aqua-radius-md); background: rgb(var(--aqua-white-rgb) / 5%); overflow: hidden;
}
.v5-vitrine::before {
	pointer-events: none;
	content: "Passe por um item para vê-lo aqui";
	position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--aqua-fs-sm); opacity: 0.4;
	transition: opacity var(--aqua-t-rapido) var(--aqua-ease-out);
}
.v5-vitrine:has(.iv-aberta)::before { opacity: 0; }
.v5-vitrine .iv-ficha {
	position: static; padding: 0; height: 100%; box-sizing: border-box; overflow: auto; scrollbar-width: none;
	display: grid; grid-template-columns: 178px 1fr; column-gap: 20px; align-content: start;
}
.v5-vitrine .iv-ficha > * { grid-column: 2; }
.iv-ficha__topo { display: contents; }
.iv-ficha__icone { grid-column: 1; grid-row: 1 / span 20; width: 178px; height: 178px; border: 0; align-self: center; }
.iv-ficha__icone .iv-item__icone { width: 150px; height: 150px; filter: drop-shadow(0 12px 12px rgb(var(--aqua-black-rgb) / 50%)); }
.iv-ficha__titulo { grid-column: 2; }
.iv-ficha__nome { font-size: var(--aqua-fs-2xl); letter-spacing: -0.01em; }
.iv-ficha__linhas { margin-top: var(--aqua-space-3); }
.iv-ficha__secao { margin-top: var(--aqua-space-4); }
.iv-ficha__acoes { margin-top: var(--aqua-space-4); }

.v5-barra { display: flex; align-items: center; gap: 18px; }
.v5-barra .iv-pesobar { flex: 1; }
.v5-baixo { display: flex; gap: 20px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgb(var(--aqua-white-rgb) / 10%); }
.v5-bloco { display: grid; gap: 6px; }
.v5-rotulo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--aqua-fs-xs); font-weight: 600; opacity: 0.75; }
.v5-rotulo i { width: 12px; height: 12px; }
.iv-hotbar { --iv-slot: 66px; grid-template-columns: repeat(5, var(--iv-slot)); }
.iv-grade--bolsos { --iv-slot: 66px; grid-template-columns: repeat(3, var(--iv-slot)); }

.iv-slot::after {
	content: ""; position: absolute; inset: 0; border-radius: var(--iv-raio);
	background: rgb(var(--aqua-black-rgb) / 14%); box-shadow: none; pointer-events: none;
	transition: background-color var(--aqua-t-rapido) var(--aqua-ease-out), box-shadow var(--aqua-t-rapido) var(--aqua-ease-out);
}
.iv-slot.iv-ocupado::after { opacity: 0; }
.iv-slot.iv-alvo::after { background: rgb(var(--aqua-white-rgb) / 12%); box-shadow: inset 0 0 0 1px rgb(var(--aqua-white-rgb) / 60%); }
.iv-slot.iv-alvo--nao::after { box-shadow: inset 0 0 0 1px var(--aqua-warning); }
.iv-slot__n { left: 7px; top: 5px; opacity: 0.6; }

/* Na mochila da base (modo espelho) nao ha maos nem bolso separados: o bloco some inteiro. */
.v5-baixo.iv-sem, .v5-bloco.iv-sem { display: none; }

/* O slot 4 da mochila da base e o da mochila de costas: a marca fica por baixo da peca, e aparece
   quando o slot esta vazio. */
.iv-slot__marca { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); opacity: 0.35; pointer-events: none; }
.iv-slot--costas.iv-ocupado .iv-slot__marca { display: none; }
.iv-item.iv-foco { border-color: rgb(var(--aqua-white-rgb) / 60%); background: rgb(var(--aqua-white-rgb) / 12%); }

.iv-troca { gap: var(--aqua-space-4); }
.iv-grade--troca { --iv-slot: 84px; grid-template-columns: repeat(6, var(--iv-slot)); }

/* a entrada: a vitrine abre primeiro, a grade preenche depois */
.iv-aqua.iv-abrindo .iv-caixa { animation: iv-emerge var(--aqua-t-base) var(--aqua-ease-out) both; }
.iv-aqua.iv-abrindo .v5-vitrine { animation: v5-abre var(--aqua-t-lento) var(--aqua-ease-out) both; }
.iv-aqua.iv-abrindo .iv-item { animation: iv-emerge var(--aqua-t-base) var(--aqua-ease-out) both; animation-delay: calc(var(--aqua-t-rapido) + var(--aqua-cascata) * var(--i, 0) / 11); }
.iv-aqua.iv-abrindo .iv-emerge { animation: iv-emerge var(--aqua-t-base) var(--aqua-ease-out) both; animation-delay: var(--aqua-t-toque); }
@keyframes v5-abre { from { opacity: 0; transform: scaleY(0.6); transform-origin: top; } }

/* a quantidade e as acoes, dentro da vitrine, na coluna do texto: tudo numa linha so */
.v5-vitrine .iv-qtd { display: flex; align-items: center; flex-wrap: wrap; gap: var(--aqua-space-2) var(--aqua-space-3); margin-top: var(--aqua-space-4); }
.v5-vitrine .iv-qtd__rotulo { order: -1; }
.v5-vitrine .iv-qtd__atalhos { flex-wrap: nowrap; }
.v5-vitrine .iv-qtd__nota { flex-basis: 100%; margin-top: -6px; }
.v5-vitrine .iv-ficha__acoes { margin-top: var(--aqua-space-4); }