/* ══════════════════════════════════════════════════════════════════════════════════════
   🃏 O CARD DA UNIDADE — a folha ÚNICA (D-5, 03/09). O JS irmão é `card-unidade.js`.

   ⚖️ POR QUE UMA FOLHA: cinco desenhos de card (glass `.card`, `.cd-card`, `.mcard`,
      `.mkt-card`, elenco do proto-time) eram cinco donos do mesmo pixel. Esta folha herda a
      GEOMETRIA da carta v2 do glass.css (arte quadrada, `--rc` = cor da raridade, aura e
      moldura por raridade, brilho especular) e o BONECO AO FUNDO do card SNES do card-dna.

   🎨 ZERO HEX: toda cor sai dos tokens do theme.css (`--rar-*`, `--card`, `--bg`, `--text`,
      `--accent`, `--border`) via `color-mix`. A cor da raridade chega em `--rc` (inline, do
      JS: `var(--rar-divine)`), então trocar o catálogo no servidor repinta o card.

   📐 RÉGUAS: fonte ≥ 14px em tudo · toque ≥ 44px nas ações · `@media` só em 640 e 1024.

   🖼️ A ARTE é o `referencia.png` da pele (128px, pixel art → `image-rendering: pixelated`),
      ocupando 76% do quadrado (sticker: 88%, `image-rendering: auto`) e repetida AO FUNDO do
      card com véu — o mesmo boneco que a arena mostra, com o mesmo filtro de morfo.

   🎢 TILT 3D opcional: `card3d.js` escreve `--rx/--ry/--px/--py/--luz` no `[data-c3d]`;
      sem ele as variáveis ficam no padrão e o card fica parado.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ── a grade que recebe os cards (a tela marca a variante na grade) ─────────────────── */
.cu-grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) }
.cu-grade.cu-g-compacta { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)) }
.cu-grade.cu-g-mini { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)) }
@media (max-width: 640px) {
  .cu-grade { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px }
  .cu-grade.cu-g-compacta { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)) }
  .cu-grade.cu-g-mini { grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)) }
}

/* ── o card ───────────────────────────────────────────────────────────────────────── */
.cu-card {
  --rc: var(--rar-common);
  --rx: 0deg; --ry: 0deg; --px: 50%; --py: 50%; --luz: 0;
  --cu-tinta: var(--text, var(--txt));
  --cu-tinta2: var(--text2, var(--txt2));
  --cu-fundo: var(--card, var(--bg2));
  /* flex-coluna + corpo esticado: numa linha da grade todos os cards têm a altura da linha e o
     rodapé de ações fica na MESMA régua (medido em 1280: sem isso o card sem skills/série
     deixava o "Escalar" 100px acima do vizinho) */
  position: relative; display: flex; flex-direction: column; min-width: 0;
  font-family: Inter, Nunito, system-ui, sans-serif; font-size: 14px; line-height: 1.25;
  color: var(--cu-tinta);
  perspective: 800px;
  animation: cu-entra .5s cubic-bezier(.22, .9, .3, 1.15) both;
  animation-delay: calc(var(--i, 0) * 24ms);
}
@keyframes cu-entra { from { opacity: 0; transform: translateY(18px) scale(.96) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .cu-card { animation: none } }

/* a AURA da raridade: acende no hover (o glass.css faz igual na carta v2) */
.cu-aura {
  position: absolute; inset: -4px; border-radius: 18px; pointer-events: none; z-index: 0;
  background: var(--rc); opacity: .08; filter: blur(18px); transition: opacity .4s;
}
.cu-card:hover .cu-aura, .cu-card:focus-within .cu-aura { opacity: .5 }
.cu-card[data-rar="legend"] .cu-aura, .cu-card[data-rar="mythic"] .cu-aura, .cu-card[data-rar="divine"] .cu-aura { opacity: .22 }

.cu-corpo {
  position: relative; z-index: 1; overflow: hidden; border-radius: 14px; flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 8px; padding: 0 0 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rc) 14%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--card-elev, var(--card)) 92%, transparent), color-mix(in srgb, var(--cu-fundo) 96%, transparent));
  border: 1.5px solid color-mix(in srgb, var(--rc) 55%, color-mix(in srgb, var(--text) 14%, transparent));
  box-shadow:
    0 6px 26px color-mix(in srgb, var(--bg) 65%, transparent),
    0 0 22px color-mix(in srgb, var(--rc) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent);
  transform: rotateY(var(--rx)) rotateX(var(--ry));
  transform-style: preserve-3d;
  transition: transform .25s ease-out, box-shadow .3s, border-color .3s;
}
.cu-card:hover .cu-corpo, .cu-card:focus-within .cu-corpo {
  border-color: color-mix(in srgb, var(--rc) 85%, var(--text));
  box-shadow:
    0 18px 44px color-mix(in srgb, var(--bg) 75%, transparent),
    0 0 30px color-mix(in srgb, var(--rc) 40%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text) 22%, transparent);
}
/* a moldura: a faixa de luz no topo, na cor da raridade */
.cu-moldura {
  position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--rc), transparent); opacity: .9;
}

/* 👤 O BONECO AO FUNDO do card inteiro (SNES, Giba 30/08), ancorado no topo, com véu */
.cu-corpo::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--arte, none) center 8% / 120% auto no-repeat;
  image-rendering: pixelated; opacity: .16; filter: var(--arte-filtro, none);
}
.cu-corpo::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cu-fundo) 20%, transparent) 0%,
    color-mix(in srgb, var(--cu-fundo) 84%, transparent) 46%, var(--cu-fundo) 82%);
}
.cu-corpo > * { position: relative; z-index: 1 }

/* ── cabeçalho: raridade + tier ───────────────────────────────────────────────────── */
.cu-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 0 }
.cu-rar {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 14px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  color: var(--bg); background: var(--rc);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--bg) 45%, transparent);
}
.cu-tier { display: inline-flex; align-items: baseline; gap: 4px; font-family: Nunito, Inter, sans-serif; line-height: 1 }
.cu-tier small { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cu-tinta2) }
.cu-tier b { font-size: 18px; font-weight: 900; color: var(--accent, var(--gold)) }

/* ── a arte: quadrada, boneco a 76% (sticker 88%) ─────────────────────────────────── */
.cu-arte {
  position: relative; aspect-ratio: 1; margin: 0 12px; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 10%, color-mix(in srgb, var(--rc) 22%, var(--card-elev, var(--card))), color-mix(in srgb, var(--cu-fundo) 70%, transparent) 72%);
  border: 1px solid color-mix(in srgb, var(--rc) 35%, transparent);
}
.cu-arte img {
  width: 76%; height: 76%; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--bg) 70%, transparent));
  transition: transform .45s cubic-bezier(.2, .8, .3, 1.1);
}
.cu-card.cu-sticker .cu-arte img { width: 88%; height: 88%; image-rendering: auto }
.cu-card:hover .cu-arte img { transform: scale(1.08) translateY(-3px) }
/* o chão de luz sob os pés, na cor da raridade */
.cu-arte::after {
  content: ''; position: absolute; left: 18%; right: 18%; bottom: 6%; height: 12%; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 100%, color-mix(in srgb, var(--rc) 55%, transparent), transparent 75%);
  opacity: .45; transition: opacity .4s;
}
.cu-card:hover .cu-arte::after { opacity: .9 }
.cu-sem-arte { width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%) }

/* o nível no canto da arte, sozinho (a colisão de 30/08: nada mais mora nesta faixa) */
.cu-nivel {
  position: absolute; top: 8px; right: 8px; z-index: 3; display: inline-flex; align-items: baseline; gap: 3px;
  padding: 3px 8px; border-radius: 8px; line-height: 1;
  background: color-mix(in srgb, var(--bg) 72%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.cu-nivel small { font-size: 14px; font-weight: 700; color: var(--cu-tinta2); text-transform: uppercase }
.cu-nivel b { font-family: Nunito, Inter, sans-serif; font-size: 16px; font-weight: 900; color: var(--accent, var(--gold)) }
/* o elemento da bomba, no canto oposto */
.cu-elem {
  position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 5px; border-radius: 8px; font-size: 14px; font-weight: 800;
  background: color-mix(in srgb, var(--bg) 72%, transparent); border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
}
.cu-elem img { width: 16px; height: 16px; image-rendering: pixelated }
.cu-tier-mini {
  position: absolute; top: 8px; left: 8px; z-index: 3; padding: 2px 7px; border-radius: 8px;
  font-family: Nunito, Inter, sans-serif; font-size: 14px; font-weight: 900; color: var(--accent, var(--gold));
  background: color-mix(in srgb, var(--bg) 72%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ── nome, família, estrelas ───────────────────────────────────────────────────────── */
.cu-id { padding: 0 12px; min-width: 0 }
.cu-nome {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  font-family: Nunito, Inter, sans-serif; font-weight: 900; font-size: 18px; line-height: 1.15;
  text-shadow: 0 2px 8px color-mix(in srgb, var(--bg) 80%, transparent);
}
.cu-nome .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.cu-nome i { font-style: normal; opacity: .8; font-size: 14px; flex: none }
.cu-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px }
.cu-sub small { font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cu-tinta2) }
.cu-rar-mini { font-size: 14px; font-weight: 800; color: color-mix(in srgb, var(--rc) 80%, var(--text)) }
/* ⭐ estrela cheia = cor da raridade: o olho lê a raridade antes de ler a palavra */
.cu-estrelas { display: inline-flex; gap: 1px; line-height: 1; margin-left: auto }
.cu-estrelas i { font-style: normal; font-size: 14px; color: color-mix(in srgb, var(--text) 18%, transparent) }
.cu-estrelas i.on { color: var(--rc); text-shadow: 0 0 6px color-mix(in srgb, var(--rc) 70%, transparent) }

/* ── 🔥 o PODER em destaque (Collector Score ou BP; nunca preço) ───────────────────── */
.cu-poder {
  margin: 0 12px; display: flex; align-items: baseline; justify-content: center; gap: 8px;
  padding: 7px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.cu-poder small { font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cu-tinta2) }
.cu-poder b { font-family: Nunito, Inter, sans-serif; font-size: 24px; font-weight: 900; color: var(--accent, var(--gold)); font-variant-numeric: tabular-nums }

/* ── blocos: atributos, skills, equipamento, elos ──────────────────────────────────── */
.cu-attrs, .cu-skills {
  margin: 0 12px; padding: 8px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 40%, transparent); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
}
.cu-attrs h4, .cu-skills h4 {
  margin: 0 0 5px; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--rc) 80%, var(--text));
}
.cu-skills h4 + ul + h4 { margin-top: 7px }
.cu-attrs { display: grid; gap: 4px }
.cu-attrs h4 { grid-column: 1 / -1 }
.cu-at { display: grid; grid-template-columns: 82px 1fr 34px; align-items: center; gap: 6px; font-size: 14px }
.cu-at span { color: var(--cu-tinta2); font-weight: 700 }
.cu-at small { font-size: 14px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums }
.cu-bar { display: block; height: 7px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--bg) 60%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent) }
.cu-bar b { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 70%, var(--text)), var(--rc)) }

.cu-skills ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px }
.cu-sk { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 14px; font-weight: 700 }
.cu-sk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.cu-sk b { font-weight: 900; color: color-mix(in srgb, var(--rc) 85%, var(--text)); font-variant-numeric: tabular-nums; flex: none }
/* ⚔️ `.off` = dormente: o card DIZ "S3" em vez de prometer efeito que a luta ainda não faz */
.cu-sk.off { color: var(--cu-tinta2) }
.cu-sk.off b { color: var(--cu-tinta2) }
.cu-sk em { font-style: normal; font-size: 14px; font-weight: 800; padding: 0 5px; border-radius: 5px; flex: none;
  background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--cu-tinta2) }
.cu-skills-cont { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 8px }

.cu-equip, .cu-elos { margin: 0 12px; display: flex; gap: 6px; flex-wrap: wrap }
/* 🤝 aluguel: faixa âmbar discreta, texto ≥14px, some quando não há marca */
.cu-aluguel { margin: 0 12px; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: 10px; font-size: 14px; line-height: 1.3;
  background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent) }
.cu-aluguel b { color: var(--gold); font-weight: 900 }
.cu-aluguel span { color: var(--cu-tinta2); font-weight: 700 }
.cu-compacta .cu-aluguel { margin-left: 10px; margin-right: 10px }
.cu-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 14px; font-weight: 800; line-height: 1.2; color: var(--cu-tinta);
  background: color-mix(in srgb, var(--rc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
}
.cu-chip img { width: 14px; height: 14px; image-rendering: pixelated }
.cu-chip b { color: var(--accent, var(--gold)) }
.cu-chip-elo { text-transform: uppercase; letter-spacing: .04em }
/* 🎽 piso da peça sem raridade: comum, e não a cor do boneco (herdaria o --rc do .cu-card) */
.cu-chip-eq { --rc: var(--rar-common) }

/* ── rodapé: série, DNA, origem ────────────────────────────────────────────────────── */
.cu-pe { margin: 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; font-weight: 800;
  padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent) }
.cu-serie { color: var(--accent, var(--gold)); font-variant-numeric: tabular-nums }
.cu-dna { color: color-mix(in srgb, var(--rc) 85%, var(--text)) }
.cu-origem { margin-left: auto; color: var(--cu-tinta2); font-weight: 700 }

/* ✨ o brilho especular (segue o ponteiro com o card3d; parado sem ele) */
.cu-espec {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  opacity: var(--luz); mix-blend-mode: screen; transition: opacity .3s;
  background: radial-gradient(220px circle at var(--px) var(--py), color-mix(in srgb, var(--text) 26%, transparent), color-mix(in srgb, var(--text) 6%, transparent) 40%, transparent 65%);
}
.cu-card:hover .cu-espec { opacity: max(var(--luz), .55) }
/* a varredura de luz do hover, como na carta v2 */
.cu-espec::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -60%;
  background: linear-gradient(105deg, transparent, color-mix(in srgb, var(--text) 18%, transparent), transparent);
  transform: skewX(-18deg);
}
.cu-card:hover .cu-espec::after { animation: cu-varre .8s ease .05s }
@keyframes cu-varre { from { left: -60% } to { left: 140% } }
/* foil sutil só nas raridades de topo */
.cu-card[data-rar="mythic"] .cu-arte::before, .cu-card[data-rar="divine"] .cu-arte::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .35; mix-blend-mode: screen;
  background: conic-gradient(from 210deg at var(--px) var(--py), color-mix(in srgb, var(--rar-epic) 30%, transparent), color-mix(in srgb, var(--rar-legend) 30%, transparent), color-mix(in srgb, var(--rar-mythic) 30%, transparent), color-mix(in srgb, var(--rar-srare) 30%, transparent), color-mix(in srgb, var(--rar-epic) 30%, transparent));
}

/* ── 🎬 as ações: o rodapé que a tela injeta (`opcoes.acoes`); toque ≥ 44px ─────────── */
.cu-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin: auto 12px 0; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent) }
/* ⚠️ MEDIDO em 390 (proto-cards, coluna de 160px): três botões com `flex: 1 1 0` estouravam a
   borda ("Detalhe" cortado). Cada botão pede o próprio texto e o que não cabe desce de linha —
   duas linhas de 44px é melhor que um botão que o dedo não acha. */
.cu-acoes button, .cu-acoes a { flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 14px; white-space: nowrap; padding: 8px 8px }

/* ✅ NO TIME: a moldura verde-ouro é a leitura instantânea de "esta peça está escalada" */
.cu-card.na-equipe .cu-corpo { box-shadow: 0 0 0 2px var(--rar-uncommon), 0 8px 28px color-mix(in srgb, var(--bg) 70%, transparent) }

/* ═══ 📏 COMPACTA — a mesma carta, no espaço que existe (palco de ~446px) ═══════════════
   Nada é escondido: só o que a variante não desenha (atributos/equipamento moram na completa,
   que é a vitrine e o modal de detalhes). */
.cu-compacta .cu-corpo { gap: 6px; padding-bottom: 8px }
.cu-compacta .cu-cab { padding: 8px 10px 0 }
.cu-compacta .cu-arte, .cu-compacta .cu-id, .cu-compacta .cu-poder, .cu-compacta .cu-skills, .cu-compacta .cu-equip, .cu-compacta .cu-elos, .cu-compacta .cu-pe, .cu-compacta .cu-acoes { margin-left: 10px; margin-right: 10px }
.cu-compacta .cu-nome { font-size: 16px }
.cu-compacta .cu-poder { padding: 5px 10px }
.cu-compacta .cu-poder b { font-size: 20px }
.cu-compacta .cu-tier b { font-size: 16px }
.cu-compacta .cu-corpo::before { opacity: .22; background-size: 135% auto }

/* ═══ 🎴 MINI — arte + nome + raridade + poder (gaveta do palco, slots pequenos) ═══════ */
.cu-mini .cu-corpo { gap: 4px; padding-bottom: 8px; border-radius: 12px }
.cu-mini .cu-arte { flex: none }                       /* a arte nunca encolhe pra caber texto: boneco achatado é boneco errado */
.cu-mini .cu-arte { margin: 8px 8px 0; border-radius: 10px }
.cu-mini .cu-id, .cu-mini .cu-poder, .cu-mini .cu-acoes { margin-left: 8px; margin-right: 8px }
.cu-mini .cu-nome { font-size: 15px }
.cu-mini .cu-sub small { display: none }              /* a família não cabe: a arte já diz */
.cu-mini .cu-estrelas i.off { display: none }         /* só as cheias: 8 vazias não cabem em 120px */
.cu-mini .cu-estrelas { margin-left: 0; gap: 0; letter-spacing: -.2em; flex-wrap: nowrap; flex: none }   /* 8 cheias em ~62px */
.cu-mini .cu-sub { gap: 6px }
.cu-mini .cu-poder { padding: 4px 8px; gap: 5px }
.cu-mini .cu-poder b { font-size: 18px }
.cu-mini .cu-nivel { padding: 2px 6px; top: 6px; right: 6px }
.cu-mini .cu-nivel b { font-size: 14px }
/* na mini de 110px (grade do bombers.html em 390) TVI + NV 63 não cabem lado a lado: o tier
   desce pro pé da arte, canto oposto ao nível — nada colide, nada some */
.cu-mini .cu-tier-mini { top: auto; bottom: 6px; left: 6px }
.cu-mini .cu-corpo::before { opacity: .30; background-size: 140% auto }
.cu-mini .cu-aura { inset: -3px; border-radius: 14px }