/* loot.css — cartão de loot, banner, clarão, chip de mochila cheia e aviso de itens perdidos
   (js/ui/widgets/lootToast.js; ui-gameplay.md §6 itens 4–6). Dona: trilha K2d (§12). No fim, o painel do Filtro de
   loot (js/ui/widgets/lootFilterPrompt.js; loot-filter.md §1).
   Medidas em px de arte: calc(N * var(--px)). Animações em steps() (coerentes com os 12 fps da arte); deslocamentos por
   `transform` são múltiplos inteiros de --px (o cartão não tem texto escalado — §8.7 proíbe `scale` em texto).
   Cor da qualidade: `--loot-color` = var(--q<id>) (gerada no boot a partir de qualities.json — nunca aqui). */

.loot-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ---- cartão de loot: pilha à direita, 150×40, slot 36 + nome + qualidade ---------------------------------------
   top 84 (a spec dizia 52; a rodada 1 pôs 60): o painel do canto superior direito não acaba em y 58 — abaixo das
   estatísticas vem a LINHA DO AUTO-AVANÇO com o botão "Subir sozinho" (y 56…72) e o painel inteiro chega a y 79. Com
   60 o primeiro cartão nascia exatamente sobre esse botão e apagava o único controle do auto-avanço justamente
   quando a mochila enche — que é quando os cartões aparecem (avaliação de UX, rodada 2). 79 + 4 de respiro = 83 → 84.
   Os 79 envelheceram (medido em 2026-10-02): com "Maior golpe" e o SELO da linha à vista o painel chega a y 91 na
   Exploração (o B407 do roadmap) e a y 86 na masmorra, onde a linha é a do "Continuar sozinho" — lá a pilha desce
   para 92 (dungeon.css, `.scene-dungeon .loot-toasts`). */
.loot-toasts {
  position: absolute;
  right: calc(4 * var(--px));
  top: calc(84 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  align-items: flex-end;
}
.loot-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  width: calc(150 * var(--px));
  height: calc(40 * var(--px));
  /* a moldura `tooltip` tem 4 de borda: o miolo (142×32) recebe o slot 36 com −2 de sangria vertical */
  padding: 0 calc(2 * var(--px)) 0 0;
}
.loot-card > .slot {
  flex: none;
  margin: calc(-2 * var(--px)) 0 calc(-2 * var(--px)) calc(1 * var(--px));
}
.loot-card-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  text-shadow: var(--px) var(--px) 0 #000;
}
.loot-card-name,
.loot-card-quality {
  line-height: calc(10 * var(--px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loot-card-quality { opacity: 0.85; }
/* texto em gradiente (Shining) não aceita text-shadow: a sombra pintaria por cima do recorte */
.loot-card .is-shining-text,
.loot-banner .is-shining-text { text-shadow: none; }

/* entra deslizando da direita em 3 degraus (150 ms); sai em 4 (200 ms) */
.loot-card.is-in { animation: loot-card-in 0.15s steps(3, jump-none) both; }
.loot-card.is-out { animation: loot-card-out 0.2s steps(4, jump-none) both; }
@keyframes loot-card-in {
  from { transform: translateX(calc(48 * var(--px))); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes loot-card-out {
  from { transform: none; opacity: 1; }
  to   { transform: translateX(calc(48 * var(--px))); opacity: 0; }
}
/* nível `banner`: o cartão ganha um aro na cor da qualidade que pisca em 2 degraus */
.loot-card[data-level='banner'] {
  outline: var(--px) solid var(--loot-color, var(--c-gold));
  outline-offset: calc(-1 * var(--px));
}
.loot-card[data-level='banner']:not(.is-in):not(.is-out) { animation: loot-card-glint 0.5s steps(2, jump-none) 3; }
@keyframes loot-card-glint {
  from { filter: brightness(1.5); }
  to   { filter: brightness(1); }
}
.loot-card[data-quality='shining'] { animation-iteration-count: infinite; }

/* ---- banner central (top 72): "OBRA-PRIMA!" / "SHINING!" em --text-2 + nome do item; 2,2 s --------------------- */
.loot-banner {
  position: absolute;
  /* acima das janelas (z 10+): o banner dura menos de 2 s e, por baixo da Mochila compacta aberta, perdia a ponta direita */
  z-index: 49;
  left: 50%;
  top: calc(72 * var(--px));
  width: calc(240 * var(--px));
  margin-left: calc(-120 * var(--px));
  padding: calc(3 * var(--px)) 0 calc(4 * var(--px));
  /* coluna centrada: `.is-shining-text` é inline-block (o gradiente mede o texto) e ficaria lado a lado com o nome */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* faixa escura que some nas pontas: o texto lê sobre céu claro e sobre folhagem */
  background: linear-gradient(90deg, rgba(10, 8, 14, 0) 0, rgba(10, 8, 14, 0.82) 22%, rgba(10, 8, 14, 0.82) 78%, rgba(10, 8, 14, 0) 100%);
  border-top: var(--px) solid var(--loot-color, var(--c-gold));
  border-bottom: var(--px) solid var(--loot-color, var(--c-gold));
  border-image: linear-gradient(90deg, transparent 0, var(--loot-color, var(--c-gold)) 22%, var(--loot-color, var(--c-gold)) 78%, transparent 100%) 1;
}
.loot-banner-title {
  font-size: var(--text-2);
  line-height: calc(18 * var(--px));
  letter-spacing: calc(1 * var(--px));
  text-shadow: var(--px) var(--px) 0 #000, calc(-1 * var(--px)) 0 0 #000, 0 calc(-1 * var(--px)) 0 #000;
}
.loot-banner-name {
  margin-top: calc(1 * var(--px));
  line-height: calc(10 * var(--px));
  text-shadow: var(--px) var(--px) 0 #000;
}
/* pop de entrada por deslocamento inteiro (nunca scale em texto): cai 6 px em 3 degraus; some em degraus no fim */
.loot-banner.is-show { animation: loot-banner-in 0.18s steps(3, jump-none) both, loot-banner-out 0.3s steps(3, jump-none) 1.9s both; }
@keyframes loot-banner-in {
  from { transform: translateY(calc(-6 * var(--px))); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes loot-banner-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ---- clarão de tela do banner: branco a 35 % por 80 ms ------------------------------------------------------- */
.loot-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
}
.loot-flash.is-on { animation: loot-flash 0.08s steps(2, jump-none) both; }
@keyframes loot-flash {
  from { opacity: 0.35; }
  to   { opacity: 0; }
}

/* ---- mochila cheia: chip fixo acima dos botões do canto inferior direito + aviso de itens perdidos ------------- */
.loot-bagfull,
.loot-lost {
  position: absolute;
  right: calc(4 * var(--px));
  max-width: calc(220 * var(--px));
  padding: calc(1 * var(--px)) calc(4 * var(--px));
  line-height: calc(10 * var(--px));
  /* ABAIXO das janelas (z 10+): acima delas (z 48, rodada 1) a faixa "Perdidos" atravessava toda janela aberta na
     corrida — Habilidades, Mochila compacta, Atributos, Configurações (B49) — e "Mochila cheia" cobria o "Aplicar" de
     Atributos. Com janela aberta a faixa some (regra abaixo); o selo 60/60 do botão continua avisando. Fundo opaco: o
     translúcido deixava o que estava atrás atravessar. */
  z-index: 9;
  background: #0a080e;
  border-left: calc(2 * var(--px)) solid var(--c-danger);
  color: var(--c-danger);
  text-shadow: var(--px) var(--px) 0 #000;
  white-space: nowrap;
}
/* com a mochila aberta o chip é redundante (o contador dela já pisca 60/60 em vermelho) e, acima das janelas, cobriria
   o "Organizar" da mochila compacta (y 302…318): some enquanto ela está aberta */
#ui-root:has(#win-inventory) .loot-bagfull { display: none; }
/* ancorada ACIMA do próprio botão da Mochila (x 581…636, topo em y 314): borda direita alinhada a ele, até 120 de largura
   (quebra para cima) — com 220 ela invadia o botão Habilidades e encostava no selo de pontos dele. */
.loot-bagfull {
  bottom: calc(48 * var(--px));
  max-width: calc(120 * var(--px));
  white-space: normal;
  text-align: right;
  animation: loot-blink 0.8s steps(2, jump-none) infinite;
}
/* aviso de itens perdidos: canto inferior DIREITO, logo acima do chip "Mochila cheia" e do selo 60/60 do botão da
   Mochila — que é onde o assunto mora. No centro-alto (y 114) era uma tarja preta opaca de 300 px atravessando o
   meio do palco, bem na altura em que sobem os números de dano, e com a mochila cheia reaparecia a cada poucos
   segundos (avaliação de UX, rodada 2). Largura de 120 como a do chip: o texto quebra para cima, longe do combate. */
.loot-lost {
  right: calc(4 * var(--px));
  left: auto;
  top: auto;
  bottom: calc(62 * var(--px));
  width: calc(120 * var(--px));
  max-width: none;
  margin-left: 0;
  border-left: 0;
  border-top: var(--px) solid var(--c-danger);
  border-bottom: var(--px) solid var(--c-danger);
  white-space: normal;
  text-align: right;
  color: var(--c-text);
}
.loot-lost.is-show { animation: loot-lost-in 0.15s steps(3, jump-none) both; }
/* Conversão pelo filtro de loot: NEUTRO (o item não se perdeu). Mesma caixa e mesma mecânica de entrada do `.loot-lost`,
   com a borda em ouro em vez de perigo — e uma linha ABAIXO dele, porque os dois aparecem juntos quando parte do
   excedente está acima do teto (esse de fato se perde) e parte está abaixo (esse vira ouro ou material). */
.loot-filtered {
  position: absolute;
  right: calc(4 * var(--px));
  bottom: calc(86 * var(--px));
  width: calc(120 * var(--px));
  text-align: right;
  padding: calc(1 * var(--px)) calc(4 * var(--px));
  line-height: calc(10 * var(--px));
  z-index: 9;
  background: #0a080e;
  border-top: var(--px) solid var(--c-gold);
  border-bottom: var(--px) solid var(--c-gold);
  text-shadow: var(--px) var(--px) 0 #000;
  white-space: normal;
  color: var(--c-text);
}
.loot-filtered.is-show { animation: loot-lost-in 0.15s steps(3, jump-none) both; }
/* --- taskbar --- Com a fila de cima do canto OCUPADA (`#hud-actions-top`, y 288…312: o modo faixa e/ou o serviçal; hud.css) as três
   tarjas sobem 26 — o chip "Mochila cheia" tinha o pé em y 312 e cobriria os botões dela (ui-gameplay-habilidades.md §5.2). */
#hud:has(#hud-actions-top > :not(.hidden)) .loot-bagfull { bottom: calc(74 * var(--px)); }
#hud:has(#hud-actions-top > :not(.hidden)) .loot-lost { bottom: calc(88 * var(--px)); }
#hud:has(#hud-actions-top > :not(.hidden)) .loot-filtered { bottom: calc(112 * var(--px)); }
/* A vitrine do mercador fica no CENTRO do palco (hud.css, y 64…243): no canto inferior direito os dois avisos já não
   caem sobre ela, e as regras que os empurravam para y 247/261 saíram com a mudança de âncora. */
/* Com qualquer janela aberta na corrida os dois avisos somem (B49): o excedente perdido continua no feed de loot e no
   selo 60/60 da Mochila; ao fechar a janela o aviso volta no próximo excedente. No canto de baixo eles já não cruzam
   janela nenhuma (as janelas terminam em y ≤ 312 e estes avisos moram em y ≥ 270), mas a mochila COMPACTA da corrida
   desce até lá: a regra fica. */
#ui-root:has(#hud > .window) .loot-lost,
#ui-root:has(#hud > .window) .loot-filtered { display: none; }
@keyframes loot-blink {
  from { color: var(--c-danger); }
  to   { color: #ffb0a0; }
}
@keyframes loot-lost-in {
  from { transform: translateY(calc(-6 * var(--px))); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .loot-card.is-in, .loot-card.is-out, .loot-card[data-level='banner'], .loot-banner.is-show, .loot-lost.is-show, .loot-filtered.is-show, .loot-bagfull { animation: none; }
  .loot-flash.is-on { animation: none; opacity: 0; }
}

/* ---- Filtro de loot: o painel (js/ui/widgets/lootFilterPrompt.js; docs/specs/loot-filter.md §1) -------------------
   Pedido do dono (2026-10-01): pequeno, de ícones, "seleciona até o tier e já vende". Desligado = só o interruptor;
   ligado = o interruptor + a fileira [moeda] [—] I … X. A LARGURA É A DO CONTEÚDO (o `.modal-backdrop` centraliza na
   grade): desligado o painel encolhe de verdade, ligado ele abre para a fileira — nenhum número de largura a acertar com
   a fonte. O TOPO É ANCORADO (o painel desce de um topo fixo em vez de centrar na vertical) e o interruptor fica no centro
   da primeira linha: ligar ou desligar não move o interruptor sob o dedo, nem para o lado nem para cima. 64 = logo abaixo
   da faixa do topo. A confirmação da guarda abre ABAIXO do painel (`lootFilterPrompt.js › placeBelow`, 4 px de vão):
   centrada no palco ela encavalava a moldura na de baixo do painel e punha os botões sobre um degrau. */
.loot-filter-backdrop > .loot-filter-prompt {
  align-self: start;
  margin-top: calc(64 * var(--px));
  min-width: calc(150 * var(--px));
}
/* modal não se arrasta: o `cursor: move` da barra de título das janelas mentiria aqui */
.loot-filter-prompt > .window-title { cursor: default; }
.loot-filter-prompt:focus { outline: none; }
.loot-filter-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--px));
  padding: 0 0 calc(2 * var(--px));
}
/* O INTERRUPTOR: a peça `toggle` da série (ui/toggles/toggle.<off|on>.png, 16×10) em 2× inteiro — "um interruptor
   grande" — dentro de um alvo de toque de 44×28 (celular deitado). O estado é `aria-checked`, como o `.toggle`. */
.loot-filter-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(44 * var(--px));
  height: calc(28 * var(--px));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.loot-filter-switch-art {
  width: calc(32 * var(--px));
  height: calc(20 * var(--px));
  background: var(--ui-toggle-off, linear-gradient(90deg, #d8c8a0 0 40%, #2a2118 40% 100%)) no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}
.loot-filter-switch[aria-checked="true"] > .loot-filter-switch-art {
  background-image: var(--ui-toggle-on, linear-gradient(90deg, #2a2118 0 60%, #e0b040 60% 100%));
}
.loot-filter-switch:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: calc(-2 * var(--px)); }
/* travado com motivo (`setButtonReason`: carregando ou gravando) — recebe o ponteiro para o balão do motivo */
.loot-filter-switch.is-disabled { cursor: default; opacity: 0.6; }
/* A FILEIRA: a moeda (o destino) e os degraus (até onde). Aceso = o botão de OURO da série (`.btn` sem variante, a cor
   da moeda): "isto vira ouro"; apagado = o cinza (`.btn-secondary`): "fica com você". O teto escolhido ganha o aro claro. */
.loot-filter-row { display: flex; align-items: center; gap: calc(4 * var(--px)); }
.loot-filter-tiers { display: flex; gap: calc(4 * var(--px)); }
/* 32×32, TODOS da mesma largura, 4 de vão: é alvo de DEDO. No celular deitado o palco fica em escala 1 (1 px de arte =
   1 px de CSS), e os 24×24 de antes davam ~4 mm por degrau com 2 de vão — o dedo que errava o III gravava o II na hora, e o
   VIII saía mais largo que os outros. 11 × 32 + 10 × 4 = 392: a fileira cabe em ~410 dos 640 do palco e o painel
   continua baixo. Largura FIXA (não `min-width`): o numeral mais largo cabe nos 32, e a fileira não fica desigual. */
.loot-filter-tier {
  width: calc(32 * var(--px));
  min-width: 0;
  height: calc(32 * var(--px));
  padding: 0;
}
.loot-filter-tier.is-selected { outline: var(--px) solid var(--c-text); outline-offset: var(--px); }
/* o aro do escolhido não pode calar o foco de teclado (`:focus-visible` dourado de base.css perdia para as duas classes):
   com o foco nele, o aro fica no ouro do foco */
.loot-filter-tier.is-selected:focus-visible { outline-color: var(--c-gold); }