/* Componente de carta compartilhado. Faixa neon de 3px no topo = raridade (motivo de identidade). */
.portrait {
  position: relative;
  aspect-ratio: var(--card-ratio);
  display: grid;
  place-items: center;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--surface-3);
  overflow: hidden;
}

/* Silhueta (v0.112): herói ainda não liberado vira o sprite inteiro em preto, sem detalhe. O fundo do retrato fica como está. */
.is-silhouette .hero-sprite,
.is-silhouette .portrait > img,
.is-silhouette .portrait-fallback,
.is-silhouette.inspect-portrait > img,
.is-silhouette #inspect-hero-icon,
.is-silhouette .evo-item-icon {
  filter: brightness(0);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Herói com sprite de pixel art: o quadro de 112 px é recortado em volta do boneco e ampliado sem
   suavizar (image-rendering: pixelated). A sombra no chão é do recipiente, não do PNG. A largura da
   imagem em % do recipiente (--sprite-w) é escolhida para a escala cair perto de um número inteiro:
   150% em 76 px de carta é 1x, 170% em 132 px de inspeção é 2x. */
.hero-sprite {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-sprite::before {
  content: '';
  position: absolute;
  left: 50%;
  top: var(--shadow-top, 87%);
  width: 44%;
  height: 7%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
}

/* Carta da equipe: retrato largo, perto de 136 px, onde 165% dá a escala 2x. */
.team-slot-card .hero-sprite {
  --sprite-w: 165%;
  --sprite-top: 49%;
  --shadow-top: 88%;
}

.hero-sprite > .hero-sprite-img {
  position: absolute;
  left: 50%;
  top: var(--sprite-top, 52%);
  width: var(--sprite-w, 150%);
  height: auto;
  max-width: none;
  transform: translate(-50%, -45%);
  image-rendering: pixelated;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* Carinha do herói (ui/card-art.js, faceHTML): quadrado de 28 px com o rosto recortado do sprite, no mesmo recorte das fichas dos
   banners (cabeça e tronco do quadro de 112 px, sem a sombra do chão). 400% de 28 px é a escala 1x exata; o aro é um
   ::after com box-shadow para não tirar pixels da janela. */
.hero-face {
  --sprite-w: 400%;
  --sprite-top: 95%;
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-s);
  position: relative;
  background: var(--surface-3);
  overflow: hidden;
}

.hero-face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  pointer-events: none;
}

.hero-face .hero-sprite::before {
  display: none;
}

.hero-face > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-face .portrait-fallback {
  font-size: 16px;
}

/* Sem arte: o ícone atual do herói, como marcador honesto. */
.portrait-fallback {
  font-size: 32px;
  line-height: 1;
}

.mini-portrait {
  position: relative;
  aspect-ratio: var(--card-ratio);
  display: grid;
  place-items: center;
  border-radius: var(--radius-s);
  border: 1px solid var(--line-strong);
  background: var(--surface-3);
  overflow: hidden;
}

.mini-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-portrait .portrait-fallback {
  font-size: 20px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
}

.inventory-card {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-areas:
    'portrait info'
    'ranks ranks'
    'actions actions';
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3);
  padding-top: calc(var(--s-3) + 3px);
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--surface-1);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.inventory-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--rarity, var(--line));
}

.inventory-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.inventory-card .portrait {
  grid-area: portrait;
}

.card-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.card-top {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
}

.card-top .rarity-label {
  margin-right: auto;
}

.card-title {
  font-weight: 600;
  font-size: var(--fs-16);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-sub {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-12);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
}

.card-status {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--ok);
}

.card-status.altar {
  color: var(--text);
}

/* Botões pequenos da carta (favoritar, marcar). Área de 32px. */
.card-icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  font-size: var(--fs-16);
  line-height: 1;
}

.card-icon-btn:hover {
  background: var(--surface-3);
  color: var(--text);
}

.card-favorite-btn.is-favorite {
  color: var(--danger);
  border-color: var(--danger);
}

.card-select-checkbox.checked {
  background: var(--text);
  border-color: var(--text);
  color: var(--action-ink);
  font-weight: 700;
}

.card-select-checkbox:disabled {
  opacity: 0.4;
}

.inventory-grid:not(.multi-select-active) .card-select-checkbox:not(.checked) {
  display: none;
}

/* Aura: etiqueta na cor da raridade da aura. */
.aura-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--s-1);
  max-width: 100%;
  padding: 1px var(--s-2);
  border-radius: var(--radius-s);
  border: 1px solid var(--rarity, var(--line-strong));
  color: var(--rarity, var(--text-2));
  font-size: var(--fs-12);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aura-tag.no-aura {
  border-color: var(--line-strong);
  border-style: dashed;
  color: var(--text-2);
  font-weight: 400;
}

.aura-tag.rarity-celestial {
  border-image: linear-gradient(90deg, var(--r-celestial), var(--r-celestial-2)) 1;
}

/* Ranks: C a SS. S e acima em badge claro para destacar o valor. */
.card-ranks {
  grid-area: ranks;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-1);
}

.rank-cell {
  display: flex;
  flex-direction: column;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  min-width: 0;
}

.rank-cell .rank-lbl {
  font-size: var(--fs-12);
  color: var(--text-2);
}

.rank-cell .rank-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1);
}

.rank-cell .num {
  font-size: var(--fs-16);
}

.rank-cell .num.aura-boosted {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--text-2);
}

.rank.rank-a,
.rank.rank-aplus {
  color: var(--text);
}

.rank.rank-s,
.rank.rank-splus,
.rank.rank-ss {
  padding: 0 4px;
  border-radius: 3px;
  background: var(--text);
  color: var(--action-ink);
}

.card-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

.card-actions .btn {
  width: 100%;
}

.card-actions .btn:only-child {
  grid-column: 1 / -1;
}

.card-equip-btn.equipped {
  color: var(--text-2);
}

/* Estados. */
.inventory-card.equipped {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
}

.inventory-card.is-selected {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}

.inventory-card.selection-disabled {
  border-style: dashed;
  background: var(--bg);
  cursor: not-allowed;
}

.inventory-card.selection-disabled .portrait {
  opacity: 0.5;
}

.inventory-card.is-active-on-altar {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
  background: var(--surface-2);
}

/* Carta da equipe de batalha (v0.247.0, pedido do usuário: destaque maior "e não só um texto verde"). A moldura e o brilho
   seguem sendo da raridade; a equipe usa o que a raridade não usa: contorno verde (--ok, o "equipado" do DESIGN.md) por
   fora da moldura, tecla clara com o número no canto do retrato e a etiqueta cheia "Na equipe · tecla N". */
.inventory-card.in-team {
  outline: 2px solid var(--ok);
  outline-offset: 3px;
}

.team-key {
  position: absolute;
  z-index: 2;
  top: calc(var(--s-3) - 2px);
  left: calc(var(--s-3) - 5px);
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 30px;
  padding: 0 2px;
  border: solid transparent;
  border-width: 4px 4px 6px;
  border-image: url("../assets/ui/molduras/botao-claro.svg") 3 3 4 3 / 6px 6px 8px 6px stretch;
  background: linear-gradient(180deg, #F4F6FA, #D6DBE4);
  background-clip: padding-box;
  color: var(--action-ink);
  font-family: var(--font-pixel, var(--font-display));
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
}

.card-status.team {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px var(--s-2);
  border-radius: var(--radius-s);
  background: var(--ok);
  color: var(--action-ink);
}

/* Marca do chip "Na equipe": o mesmo verde do contorno da carta. */
.team-filter-chip .team-key-mini {
  flex: none;
  width: 10px;
  height: 10px;
  border: 2px solid var(--ok);
  border-radius: 2px;
}

.count-badge {
  color: var(--text-2);
  font-size: var(--fs-13);
}

.count {
  margin-left: auto;
  font-size: var(--fs-13);
  color: var(--text-2);
}