/* ============================================================
   Binaryzando — Card System
   Collectible card game aesthetics with rarity-based styling
   ============================================================ */

/* ---------- Base card ---------- */
.card-collectible {
  position: relative;
  width: 280px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  border: 2px solid var(--border);
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-out), border-color .3s;
  cursor: pointer;
  transform-style: preserve-3d;
  perspective: 800px;
}

.card-collectible:hover {
  transform: translateY(-8px) scale(1.02);
}

/* ---------- Rarity borders & glows ---------- */
.card-common {
  border-color: var(--rarity-common);
}
.card-common:hover {
  box-shadow: 0 8px 30px var(--rarity-common-glow);
}

.card-rare {
  border-color: var(--rarity-rare);
}
.card-rare:hover {
  box-shadow: 0 8px 30px var(--rarity-rare-glow), 0 0 40px var(--rarity-rare-glow);
}

/* ---------- Rare shimmer overlay (versão mais sutil do holo da lendária) ---------- */
.card-rare::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(25,138,223,.05) 35%,
    rgba(25,138,223,.10) 50%,
    rgba(25,138,223,.05) 65%,
    transparent 75%
  );
  background-size: 250% 100%;
  animation: holo-sweep 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

.card-epic {
  border-color: var(--rarity-epic);
}
.card-epic:hover {
  box-shadow: 0 8px 30px var(--rarity-epic-glow), 0 0 60px var(--rarity-epic-glow);
}

.card-legendary {
  border-color: var(--rarity-legendary);
  background: linear-gradient(145deg, var(--bg-card), rgba(251,79,5,.04));
}
.card-legendary:hover {
  box-shadow: 0 8px 40px var(--rarity-legendary-glow), 0 0 80px var(--rarity-legendary-glow);
}

/* ---------- Legendary shimmer overlay ---------- */
.card-legendary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(251,79,5,.06) 30%,
    rgba(250,44,11,.12) 50%,
    rgba(251,79,5,.06) 70%,
    transparent 80%
  );
  background-size: 250% 100%;
  animation: holo-sweep 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

@keyframes holo-sweep {
  0%, 100% { background-position: 250% center; }
  50% { background-position: -50% center; }
}

/* ---------- Epic pulse ring ---------- */
.card-epic::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--rarity-epic), #198ADF, var(--rarity-epic));
  background-size: 200% 200%;
  animation: shimmer-bg 3s ease-in-out infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity .3s;
}
.card-epic:hover::before {
  opacity: 1;
}

/* ---------- Confidence bar (tamanho da amostra: <30 / 30-1.000 / >1.000) ---------- */
.confidence-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 13px;
}
.confidence-bar-label {
  color: var(--text-secondary);
}
.confidence-bar-count {
  font-weight: 700;
  color: var(--text-primary);
}
.confidence-bar-count small {
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: 4px;
}
.confidence-bar-track {
  position: relative;
  display: flex;
  height: 10px;
  border-radius: 6px;
}
.confidence-bar-track .zone {
  height: 100%;
}
.confidence-bar-track .zone-low {
  width: 22%;
  background: rgba(255,255,255,.10);
  border-radius: 6px 0 0 6px;
}
.confidence-bar-track .zone-mid {
  width: 50%;
  background: rgba(255,255,255,.35);
}
.confidence-bar-track .zone-high {
  width: 28%;
  background: rgba(255,255,255,.65);
  border-radius: 0 6px 6px 0;
}
.confidence-bar-marker {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 16px;
  background: var(--accent-hover);
  border-radius: 2px;
  box-shadow: 0 0 6px var(--accent);
  transform: translateX(-50%);
}
.confidence-bar-ticks {
  position: relative;
  height: 14px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.confidence-bar-ticks .tick-low {
  position: absolute;
  left: 0;
}
.confidence-bar-ticks .tick-mid {
  position: absolute;
  left: 22%;
}
.confidence-bar-ticks .tick-high {
  position: absolute;
  right: 0;
}

/* Versão compacta — dentro do verso da carta (espaço bem menor que o painel
   de resultado do teste). */
.carta-face-back .confidence-bar-wrap {
  margin: 10px 0 2px;
}
.carta-face-back .confidence-bar-header {
  font-size: 10px;
  flex-wrap: wrap;
}
.carta-face-back .confidence-bar-track {
  height: 7px;
}
.carta-face-back .confidence-bar-marker {
  height: 12px;
  top: -2.5px;
}
.carta-face-back .confidence-bar-ticks {
  font-size: 9px;
}

/* ---------- Card header (top bar) ---------- */
.card-header {
  padding: 16px 16px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 3;
}

.card-type-tag {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.06);
  color: var(--text-secondary);
  white-space: nowrap;
}

.card-type-tag-estrategia {
  background: rgba(25,138,223,.18);
  color: #198ADF;
}

.card-type-tag-gerenciamento {
  background: rgba(173,5,238,.18);
  color: #B0DEF8;
}

.card-type-tag-build {
  background: rgba(255,255,255,.06);
  color: var(--text-secondary);
}

.card-rarity-badge {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.card-rarity-badge.common    { background: rgba(219,222,241,.2); color: var(--rarity-common); }
.card-rarity-badge.rare      { background: rgba(25,138,223,.15); color: var(--rarity-rare); }
.card-rarity-badge.epic      { background: rgba(173,5,238,.15); color: var(--rarity-epic); }
.card-rarity-badge.legendary {
  background: linear-gradient(135deg, rgba(251,79,5,.2), rgba(250,44,11,.2));
  color: var(--rarity-legendary);
  text-shadow: 0 0 6px rgba(251,79,5,.4);
}
.card-rarity-badge.mythic {
  background: linear-gradient(135deg, rgba(247,18,49,.22), rgba(255,77,109,.18));
  color: var(--rarity-mythic-2);
  text-shadow: 0 0 6px rgba(247,18,49,.4);
}
.card-rarity-badge.exclusive {
  background: rgba(207,224,255,.12);
  color: #eaf2ff;
  border: 1px solid transparent;
  border-image: var(--rarity-exclusive-grad) 1;
}

/* ---------- Card body ---------- */
.card-body {
  padding: 0 16px 16px;
  position: relative;
  z-index: 3;
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 4px;
  line-height: 1.3;
  color: var(--neon-cyan);
}

.card-creator {
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.card-creator span {
  color: var(--accent-hover);
  font-weight: 600;
}

/* ---------- Card stats ---------- */
.card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.card-stat {
  background: rgba(0,0,0,.2);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.card-stat-label {
  font-size: .65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-stat-value {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}
.card-stat-value.positive { color: var(--success); }
.card-stat-value.negative { color: var(--danger); }
.card-stat-value.neutral  { color: var(--text-primary); }

/* ---------- Card grade (bottom right) ---------- */
.card-grade {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 3;
}

/* ---------- Card class icon ---------- */
.card-class-icon {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  color: var(--text-secondary);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.card-class-icon .icon {
  font-size: 1rem;
}

/* ---------- Card footer ---------- */
.card-footer {
  padding: 10px 16px;
  background: rgba(0,0,0,.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 3;
}

.card-footer-stat {
  font-size: .72rem;
  color: var(--text-muted);
}
.card-footer-stat strong {
  color: var(--text-secondary);
  font-weight: 600;
}

/* ---------- Interactive card tilt (via JS) ---------- */
.card-collectible.tilt-active {
  transition: none;
}

/* ---------- Mini card (for lists / compact views) ---------- */
.card-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all .25s var(--ease-out);
  cursor: pointer;
}
.card-mini:hover {
  border-color: var(--border-light);
  background: var(--bg-elevated);
  transform: translateX(4px);
}

.card-mini-rank {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-muted);
  min-width: 36px;
  text-align: left;
}
.card-mini-rank.top1 { color: #FA2C0B; }
.card-mini-rank.top2 { color: #DBDEF1; }
.card-mini-rank.top3 { color: #FB4F05; }

.card-mini-info {
  flex: 1;
  min-width: 0;
}
.card-mini-name {
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-mini-meta {
  font-size: .75rem;
  color: var(--text-muted);
}

.card-mini-stats {
  display: flex;
  gap: 16px;
  font-size: .8rem;
}
.card-mini-stat-val {
  font-weight: 700;
  font-family: var(--font-display);
}

/* ---------- Card grid ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 24px;
}
.card-grid .card-collectible {
  width: 100%;
}

/* ---------- Card holographic effect (mouse-tracked, via JS) ---------- */
.card-holo-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255,255,255,.08) 0%,
    transparent 60%
  );
}
.card-collectible:hover .card-holo-overlay {
  opacity: 1;
}

/* ---------- Discovery flash ---------- */
@keyframes discovery-flash {
  0% { opacity: 0; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
.card-discovered {
  animation: discovery-flash .6s var(--ease-spring) forwards;
}

/* ---------- Silhouette (undiscovered) ---------- */
.card-silhouette {
  filter: brightness(0) saturate(0);
  opacity: .15;
  pointer-events: none;
}
.card-silhouette .card-body,
.card-silhouette .card-header,
.card-silhouette .card-footer {
  visibility: hidden;
}
.card-silhouette::after {
  content: '?';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  color: var(--text-muted);
  visibility: visible;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .card-collectible { width: 100%; }
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
}

/* ---------- Carta dupla face (flip) — Inventário ---------- */
.carta-flip-wrap {
  position: relative;
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
  /* Altura fixa (não aspect-ratio): como o texto tem tamanho fixo e não
     quebra linha, o conteúdo sempre ocupa a mesma altura não importa a
     largura do card — aspect-ratio ficava ora curto demais (cortava o
     rodapé), ora alto demais (sobrava vazio embaixo). */
  height: 334px;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  cursor: pointer;
}

/* Menu de opções da carta (engrenagem): publicar/despublicar, verso
   público/privado, arquivar, lixeira — tudo num só botão em vez de 3 ícones
   soltos, porque agora tem opção demais pra caber solta no card. */
.carta-menu-wrap {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
}
.carta-menu-rapido {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: rgba(0,0,0,.5);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, border-color .2s;
}
.carta-menu-rapido:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #010001;
}
.carta-menu-dropdown {
  position: absolute;
  top: 32px;
  right: 0;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.carta-menu-dropdown button {
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: .8rem;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.carta-menu-dropdown button:hover {
  background: var(--bg-input);
  color: var(--text-primary);
}
.carta-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: -webkit-transform .6s cubic-bezier(.4,.2,.2,1), transform .6s cubic-bezier(.4,.2,.2,1);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.carta-flip-wrap.is-flipped .carta-flip-inner {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.carta-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  border: 2px solid var(--border);
  display: flex;
  flex-direction: column;
}
/* Fundo com a arte da skin (por trás de todo o conteúdo real do card:
   cabeçalho, stats, rodapé). z-index negativo pra nunca cobrir texto,
   contido pelo position:relative do carta-face-front/back. Vinheta
   escura por cima garante contraste do texto em qualquer altura. */
.cf-skinbg {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
.cf-skinbg .cf-skinbg-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cf-skinbg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,5,12,.72) 0%, rgba(2,5,12,.34) 30%, rgba(2,5,12,.4) 68%, rgba(2,5,12,.82) 100%);
}

.carta-face-back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  padding: 14px 16px;
  overflow-y: auto;
}

/* Mesmo texto centralizado dos cards da home (herdam text-align:left
   da seção hero) — replica aqui pra ficarem idênticos. Linhas em flex
   (selo de categoria, estrelas) não são afetadas por text-align. */
.carta-face-front {
  position: relative;
  text-align: left;
  /* Rede de segurança: se o conteúdo ainda assim passar da altura fixa
     do card (fonte maior, texto comprido), rola em vez de cortar o
     rodapé escondido (era o bug do "ficou bugado"). */
  overflow-y: auto;
}

/* No card flip (com botões de excluir/arquivar sobrepostos no topo), dá
   mais respiro pro cabeçalho não ficar embaixo dos botões. Não afeta os
   cards de seleção (build-pick), que não têm esses botões. */
.carta-flip-wrap .carta-face-front > div:first-child {
  padding-top: 32px !important;
}
/* A skin nova é proporção fixa (390:520) — empurrar 32px cortaria o
   rodapé (curtir/compartilhar/runas) na altura fixa do carta-flip-wrap.
   O ⚙️ (26px, canto) fica só um pouco por cima do canto do card, sem
   quebrar nada. */
.carta-flip-wrap .carta-face-front > .carta-render-host:first-child {
  padding-top: 0 !important;
}

.carta-face.rarity-common    { border-color: var(--rarity-common); }
.carta-face.rarity-rare      { border-color: var(--rarity-rare); box-shadow: 0 0 24px var(--rarity-rare-glow); }
.carta-face.rarity-epic      { border-color: var(--rarity-epic); box-shadow: 0 0 28px var(--rarity-epic-glow); }
.carta-face.rarity-legendary {
  border-color: var(--rarity-legendary);
  box-shadow: 0 0 32px var(--rarity-legendary-glow);
  background: linear-gradient(145deg, var(--bg-card), rgba(251,79,5,.05));
}
.carta-face.rarity-mythic {
  border-color: var(--rarity-mythic);
  box-shadow: 0 0 34px var(--rarity-mythic-glow);
  background: linear-gradient(145deg, var(--bg-card), rgba(247,18,49,.06));
}
.carta-face.rarity-exclusive {
  border-color: transparent;
  border-image: var(--rarity-exclusive-grad) 1;
  background-size: 260% 260%;
  animation: carta-exclusive-shimmer 5s linear infinite;
  box-shadow: 0 0 30px var(--rarity-exclusive-glow);
}
@keyframes carta-exclusive-shimmer {
  0%   { border-image-source: linear-gradient(120deg,#7af7ff,#b98cff,#ff8cf0,#8cffd6,#7af7ff); }
  50%  { border-image-source: linear-gradient(300deg,#7af7ff,#b98cff,#ff8cf0,#8cffd6,#7af7ff); }
  100% { border-image-source: linear-gradient(120deg,#7af7ff,#b98cff,#ff8cf0,#8cffd6,#7af7ff); }
}

/* Carta Shiny (1% — puro colecionismo, NÃO muda nenhum stat): véu
   holográfico arco-íris varrendo a carta, por cima de qualquer raridade. */
.carta-face.carta-shiny::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(115deg,
    transparent 20%,
    rgba(239,6,138,.18) 32%,
    rgba(25,138,223,.22) 42%,
    rgba(251,79,5,.18) 52%,
    rgba(83,5,222,.2) 62%,
    transparent 74%);
  background-size: 250% 250%;
  mix-blend-mode: screen;
  animation: carta-shiny-sweep 3.2s linear infinite;
}
.carta-shiny-badge {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #010001;
  background: linear-gradient(90deg, #FB4F05, #F9FAFB, #198ADF, #EF068A, #FB4F05);
  background-size: 300% 100%;
  animation: carta-shiny-badge-cor 3s linear infinite;
  box-shadow: 0 0 10px rgba(255,255,255,.5);
}
@keyframes carta-shiny-sweep {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}
@keyframes carta-shiny-badge-cor {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .carta-face.carta-shiny::after,
  .carta-shiny-badge { animation: none; }
}

/* ── Carta Gênesis (1ª carta do usuário — visual memorável, stats inalterados) ── */
.carta-face.carta-genesis {
  border-color: var(--neon-cyan) !important;
  animation: carta-genesis-brilho 2.4s ease-in-out infinite;
}
@keyframes carta-genesis-brilho {
  0%, 100% { box-shadow: 0 0 14px rgba(25,138,223,.28), 0 0 0 1px rgba(25,138,223,.12); }
  50%       { box-shadow: 0 0 34px rgba(25,138,223,.60), 0 0 0 2px rgba(25,138,223,.28); }
}
.carta-genesis-badge {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  background: rgba(25,138,223,.10);
  border: 1px solid rgba(25,138,223,.38);
  color: var(--neon-cyan);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .carta-face.carta-genesis { animation: none; }
}

@keyframes carta-pulso {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: 0 0 0 8px var(--accent-glow); }
}
.carta-destaque {
  animation: carta-pulso 0.7s ease-in-out 2;
}


.carta-back-selo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 4px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--selo-cor, #198ADF) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--selo-cor, #198ADF) 50%, transparent);
  color: var(--selo-cor, #198ADF);
  font-size: .65rem;
  font-weight: 700;
}
.carta-back-selo img {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.carta-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  background: rgba(0,0,0,.2);
  border-top: 1px solid var(--border);
}

.carta-back-desc-label {
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-hover);
  font-weight: 700;
  margin-top: 10px;
}
.carta-back-desc {
  margin-top: 5px;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ── Gráfico da carta (item 3): histórico W/L/E vira velas ──
   win = vela verde (pra cima), loss = vermelha (pra baixo), empate = doji
   cinza no meio. Cada vela é uma coluna fininha ancorada numa linha central. */
.cartag-wrap {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 1px;
  height: 34px;
  padding: 3px 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  overflow: hidden;
}
.cartag-vela {
  flex: 1 1 0;
  min-width: 2px;
  max-width: 6px;
  height: 100%;
  position: relative;
  border-radius: 1px;
}
/* vela verde: corpo na metade de cima */
.cartag-vela.cartag-w::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 50%;
  height: 42%;
  background: var(--success, #16c784);
  border-radius: 1px;
}
/* vela vermelha: corpo na metade de baixo */
.cartag-vela.cartag-l::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 42%;
  background: var(--danger, #ea3943);
  border-radius: 1px;
}
/* doji (empate): traço fino cinza no meio */
.cartag-vela.cartag-e::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: calc(50% - 1px);
  height: 2px;
  background: var(--text-muted, #8a94a6);
  border-radius: 1px;
}
.cartag-legenda {
  margin-top: 5px;
  display: flex;
  gap: 12px;
  font-size: .68rem;
  font-weight: 600;
}
.carta-back-meta {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  padding-top: 12px;
  font-size: .72rem;
}
.carta-back-meta-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.carta-back-meta-row span:first-child { color: var(--text-muted); }
.carta-back-meta-row span:last-child { font-weight: 600; word-break: break-word; }

/* ── Composição de elementos (item 8): barras fogo/gelo/raio no verso ── */
.compo-wrap { margin-top: 4px; display: flex; flex-direction: column; gap: 5px; }
.compo-row { display: flex; align-items: center; gap: 6px; font-size: .68rem; }
.compo-ico { flex: 0 0 auto; font-size: .8rem; line-height: 1; }
.compo-track { flex: 1 1 auto; height: 7px; border-radius: 4px; background: rgba(219,222,241,.14); overflow: hidden; }
.compo-fill { height: 100%; border-radius: 4px; transition: width .4s ease; }
.compo-val { flex: 0 0 34px; text-align: right; font-weight: 800; }
.compo-amostra { flex: 0 0 auto; color: var(--text-muted); font-weight: 500; }
.compo-selo {
  display: inline-block; margin: 4px 0 6px; padding: 3px 9px; border-radius: 20px;
  font-size: .66rem; font-weight: 800; letter-spacing: .3px;
  color: #021029; background: linear-gradient(135deg, #B0DEF8, #198ADF);
  box-shadow: 0 2px 10px -2px rgba(25,138,223,.6);
}

.carta-hint {
  text-align: left;
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ── FUSÃO: estratégia + gerenciamento colidem -> carta de Build ── */
.fusao-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(1, 1, 9, .92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  animation: fusaoFadeIn .25s ease forwards;
}
@keyframes fusaoFadeIn { to { opacity: 1; } }

.fusao-titulo {
  color: var(--neon-cyan);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 18px;
}

.fusao-stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fusao-token {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 130px;
}
.fusao-token-icone {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: rgba(255, 255, 255, .06);
  border: 2px solid var(--tk-cor, var(--accent));
  box-shadow: 0 0 18px color-mix(in srgb, var(--tk-cor, var(--accent)) 45%, transparent);
}
.fusao-token-nome {
  font-size: .68rem;
  color: var(--text-secondary);
  text-align: left;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fusao-token.esquerda { animation: fusaoConvergeEsq 1s cubic-bezier(.55, 0, .85, .4) forwards; }
.fusao-token.direita { animation: fusaoConvergeDir 1s cubic-bezier(.55, 0, .85, .4) forwards; }
@keyframes fusaoConvergeEsq {
  from { transform: translateX(-130px) rotate(-10deg); opacity: 1; }
  to { transform: translateX(0) rotate(0deg) scale(.3); opacity: 0; }
}
@keyframes fusaoConvergeDir {
  from { transform: translateX(130px) rotate(10deg); opacity: 1; }
  to { transform: translateX(0) rotate(0deg) scale(.3); opacity: 0; }
}

.fusao-flash {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F9FAFB;
  opacity: 0;
  pointer-events: none;
  animation: fusaoFlash .5s ease .85s forwards;
}
@keyframes fusaoFlash {
  0% { opacity: 0; transform: scale(.3); }
  35% { opacity: 1; transform: scale(7); }
  100% { opacity: 0; transform: scale(10); }
}

.fusao-carta-final-wrap {
  text-align: left;
  opacity: 0;
  transform: scale(.4);
  animation: fusaoRevelar .5s cubic-bezier(.2, 1.7, .3, 1) forwards;
}
@keyframes fusaoRevelar { to { opacity: 1; transform: scale(1); } }

/* ============================================================
   ABA CARTAS — redesign (barra de stats, busca/filtros, destaque,
   grid compacto e painel lateral). Bordas novas seguem .hud-frame
   (global.css) — nunca inventar outro estilo de borda no site.
   ============================================================ */

.cartas-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 18px 24px;
  margin-bottom: 20px;
}
.cartas-stats-bar .cartas-stat-item {
  flex: 1 1 140px;
  text-align: left;
  padding: 4px 14px;
  border-right: 1px solid var(--border);
}
.cartas-stats-bar .cartas-stat-item:last-child { border-right: none; }
.cartas-stats-bar .cartas-stat-valor {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--text-primary);
}
.cartas-stats-bar .cartas-stat-label {
  font-size: .68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 2px;
}
@media (max-width: 768px) {
  .cartas-stats-bar .cartas-stat-item { flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
}

.cartas-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.cartas-toolbar input[type="text"],
.cartas-toolbar select {
  background: var(--bg-input, var(--bg-card));
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-size: .85rem;
  color: var(--text-primary);
}
.cartas-toolbar .cartas-busca { flex: 1 1 220px; min-width: 160px; }
.cartas-toolbar .cartas-busca input { width: 100%; }

.cartas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1024px) {
  .cartas-layout { grid-template-columns: 1fr; }
}

.cartas-destaque-wrap {
  padding: 18px;
  margin-bottom: 22px;
  text-align: left;
}
.cartas-destaque-eyebrow {
  font-family: var(--font-hud);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.cartas-destaque-frame { position: relative; width: 100%; max-width: 220px; height: 294px; margin: 0 auto; }
.cartas-destaque-social {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 12px;
  font-size: .8rem;
  color: var(--text-secondary);
}
.cartas-destaque-desc {
  font-size: .8rem;
  color: var(--text-secondary);
  max-width: 320px;
  margin: 10px auto 0;
  line-height: 1.5;
}

.cartas-grid-compacta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 14px;
}

.carta-tile {
  position: relative;
  aspect-ratio: 3 / 4.1;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  background: var(--bg-card);
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s;
}
.carta-tile:hover { transform: translateY(-3px); }
.carta-tile.is-selecionada { box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 20px rgba(25,138,223,.35); }
.carta-tile.rarity-common    { border-color: var(--rarity-common); }
.carta-tile.rarity-rare      { border-color: var(--rarity-rare); box-shadow: 0 0 14px var(--rarity-rare-glow); }
.carta-tile.rarity-epic      { border-color: var(--rarity-epic); box-shadow: 0 0 16px var(--rarity-epic-glow); }
.carta-tile.rarity-legendary { border-color: var(--rarity-legendary); box-shadow: 0 0 18px var(--rarity-legendary-glow); }
.carta-tile.rarity-mythic    { border-color: var(--rarity-mythic); box-shadow: 0 0 18px var(--rarity-mythic-glow); }
.carta-tile.rarity-exclusive {
  border-color: transparent;
  border-image: var(--rarity-exclusive-grad) 1;
  box-shadow: 0 0 16px var(--rarity-exclusive-glow);
}
.carta-tile.is-selecionada.rarity-rare      { box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 14px var(--rarity-rare-glow); }
.carta-tile.is-selecionada.rarity-epic      { box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 16px var(--rarity-epic-glow); }
.carta-tile.is-selecionada.rarity-legendary { box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 18px var(--rarity-legendary-glow); }
.carta-tile.is-selecionada.rarity-mythic    { box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 18px var(--rarity-mythic-glow); }
.carta-tile.is-selecionada.rarity-exclusive { box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 16px var(--rarity-exclusive-glow); }

.carta-tile-badge {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 999px;
}
.carta-tile-badge.common    { background: rgba(219,222,241,.2); color: var(--rarity-common); }
.carta-tile-badge.rare      { background: rgba(25,138,223,.15); color: var(--rarity-rare); }
.carta-tile-badge.epic      { background: rgba(173,5,238,.15); color: var(--rarity-epic); }
.carta-tile-badge.legendary { background: rgba(251,79,5,.18); color: var(--rarity-legendary); }
.carta-tile-badge.mythic    { background: rgba(247,18,49,.18); color: var(--rarity-mythic-2); }
.carta-tile-badge.exclusive { background: rgba(207,224,255,.12); color: #eaf2ff; border: 1px solid transparent; border-image: var(--rarity-exclusive-grad) 1; }

/* Topo do card colecionável: pill de raridade à esquerda, #número à direita
   (mesma linha nos tiles da grade, no EM DESTAQUE e no Ver Detalhes). */
.carta-arte-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 4px;
}
.carta-arte-num {
  font-family: var(--font-hud);
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--text-muted);
}

/* Arte procedural neon (SVG gerado por semente em js/inventario.js). */
.carta-tile-arte {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}
.carta-tile-arte svg,
.carta-arte-visual svg,
.detalhes-skin-preview svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 6px rgba(25,138,223,.35));
}
.carta-tile.rarity-epic .carta-tile-arte svg,
.carta-arte.rarity-epic .carta-arte-visual svg { filter: drop-shadow(0 0 6px var(--rarity-epic-glow)); }
.carta-tile.rarity-legendary .carta-tile-arte svg,
.carta-arte.rarity-legendary .carta-arte-visual svg { filter: drop-shadow(0 0 7px var(--rarity-legendary-glow)); }
.carta-tile.rarity-mythic .carta-tile-arte svg,
.carta-arte.rarity-mythic .carta-arte-visual svg { filter: drop-shadow(0 0 7px var(--rarity-mythic-glow)); }
.carta-tile.rarity-exclusive .carta-tile-arte svg,
.carta-arte.rarity-exclusive .carta-arte-visual svg { filter: drop-shadow(0 0 7px var(--rarity-exclusive-glow)); }

.carta-tile-nome {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.carta-tile-sub {
  font-size: .62rem;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.carta-tile-social {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: .6rem;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Host da carta-render (skin nova) usado no lugar do .carta-arte antigo —
   EM DESTAQUE, Ver Detalhes e vitrine. Sem largura própria: quem envolve
   decide (vt-destaque-body dá 190px; carta-arte-grande dá 300px). */
.carta-render-host { width: 100%; max-width: 230px; margin: 0 auto; }
.carta-render-host.carta-arte-grande { max-width: 300px; }

/* Carta colecionável "cheia" (EM DESTAQUE, painel, Ver Detalhes). */
.carta-arte {
  width: 100%;
  max-width: 230px;
  margin: 0 auto;
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}
.carta-arte.rarity-common    { border-color: var(--rarity-common); }
.carta-arte.rarity-rare      { border-color: var(--rarity-rare); box-shadow: 0 0 18px var(--rarity-rare-glow); }
.carta-arte.rarity-epic      { border-color: var(--rarity-epic); box-shadow: 0 0 22px var(--rarity-epic-glow); }
.carta-arte.rarity-legendary { border-color: var(--rarity-legendary); box-shadow: 0 0 26px var(--rarity-legendary-glow); }
.carta-arte.rarity-mythic    { border-color: var(--rarity-mythic); box-shadow: 0 0 26px var(--rarity-mythic-glow); }
.carta-arte.rarity-exclusive {
  border-color: transparent;
  border-image: var(--rarity-exclusive-grad) 1;
  box-shadow: 0 0 22px var(--rarity-exclusive-glow);
}
.carta-arte-visual { width: 100%; height: 120px; margin: 6px 0; }
.carta-arte-grande { max-width: 300px; }
.carta-arte-grande .carta-arte-visual { height: 170px; }
.carta-arte-nome {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  color: var(--text-primary);
}
.carta-arte-autor { font-size: .7rem; color: var(--text-muted); margin-top: 2px; }
.carta-arte-social {
  display: flex;
  gap: 14px;
  justify-content: center;
  font-size: .68rem;
  color: var(--text-secondary);
  margin-top: 8px;
}

.cartas-painel-lateral {
  position: sticky;
  top: 16px;
  padding: 20px 16px;
}
.cartas-painel-titulo {
  font-family: var(--font-hud);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  text-align: left;
  margin-bottom: 12px;
}
.cartas-painel-card { display: flex; justify-content: center; margin-bottom: 14px; }
.cartas-painel-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.cartas-tag {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(25,138,223,.1);
  border: 1px solid rgba(25,138,223,.3);
  color: var(--neon-cyan);
}
.cartas-painel-stats { margin-bottom: 16px; }
.cartas-painel-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 2px;
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
}
.cartas-painel-linha span { color: var(--text-secondary); }
.cartas-painel-linha b { color: var(--text-primary); font-family: var(--font-display); }
.cartas-painel-botoes { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1024px) {
  .cartas-painel-lateral { position: static; }
}

/* Painel lateral estilo mockup: header badge+número, nome grande, autor,
   grade 2x2 de stats e linha social com 3 colunas. */
.cartas-painel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.cartas-painel-nome {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text-primary);
}
.cartas-painel-autor {
  font-size: .74rem;
  color: var(--text-muted);
  margin: 2px 0 14px;
}
.cartas-painel-statgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 14px;
}
.cartas-painel-statbox {
  background: var(--bg-card);
  padding: 10px 12px;
}
.cartas-painel-statlabel {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.cartas-painel-statvalor {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .88rem;
  color: var(--text-primary);
}
.cartas-painel-statvalor.positivo { color: var(--success); }
.cartas-painel-statvalor.negativo { color: var(--danger); }
.cartas-painel-social {
  display: flex;
  justify-content: space-around;
  text-align: left;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.cartas-painel-social > div { display: flex; flex-direction: column; gap: 1px; }
.cartas-painel-social i { font-style: normal; font-size: .9rem; }
.cartas-painel-social b { font-family: var(--font-display); font-size: .92rem; color: var(--text-primary); }
.cartas-painel-social span { font-size: .6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

/* Botão TESTAR CARTA — vermelho neon do mockup. */
.cartas-btn-testar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .05em;
  color: #F9FAFB;
  background: rgba(247,18,49,.12);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  padding: 11px 16px;
  box-shadow: 0 0 14px rgba(247,18,49,.25);
  transition: background .2s, box-shadow .2s;
}
.cartas-btn-testar:hover {
  background: rgba(247,18,49,.25);
  box-shadow: 0 0 22px rgba(247,18,49,.45);
}

/* ============================================================
   VER DETALHES — overlay de página inteira com 5 abas
   (réplica de ideias site/v1/cartas_v1.png)
   ============================================================ */
#cartas-detalhes-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(1,1,9,.97);
  overflow-y: auto;
}
.detalhes-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}
.detalhes-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.detalhes-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: .04em;
  color: var(--neon-cyan);
}
.detalhes-sub { font-size: .82rem; color: var(--text-secondary); margin-top: 2px; }
.detalhes-breadcrumb { font-size: .74rem; color: var(--text-muted); margin-top: 8px; }
.detalhes-breadcrumb a { color: var(--neon-cyan); }
.detalhes-breadcrumb span { color: var(--danger); }

.detalhes-hero {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 250px;
  gap: 18px;
  align-items: start;
  margin-bottom: 22px;
}
.detalhes-carta { padding: 20px; display: flex; justify-content: center; }
.detalhes-info { padding: 18px; }
.detalhes-info-row { display: flex; gap: 32px; }
.detalhes-raridade {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text-primary);
}
.rarity-txt-common    { color: var(--rarity-common); }
.rarity-txt-rare      { color: var(--rarity-rare); }
.rarity-txt-epic      { color: var(--rarity-epic); }
.rarity-txt-legendary { color: var(--rarity-legendary); }
.rarity-txt-mythic    { color: var(--rarity-mythic); }
.rarity-txt-exclusive { color: #eaf2ff; }
.detalhes-acoes {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.detalhes-preco-box {
  text-align: left;
  font-size: .78rem;
  color: var(--text-secondary);
  border: 1px solid rgba(173,5,238,.45);
  border-radius: var(--radius-md);
  padding: 10px;
  background: rgba(173,5,238,.08);
}
.detalhes-preco-box b {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text-primary);
}
@media (max-width: 1024px) {
  .detalhes-hero { grid-template-columns: 1fr; }
}

.detalhes-abas {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.detalhes-aba {
  font-family: var(--font-hud);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 16px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.detalhes-aba:hover { color: var(--text-primary); }
.detalhes-aba.active {
  color: var(--text-primary);
  border-bottom-color: var(--rarity-epic);
  background: rgba(173,5,238,.08);
}
.detalhes-conteudo { padding: 22px; max-width: 640px; }
.detalhes-h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 12px;
  color: var(--neon-cyan);
}
.detalhes-desc { font-size: .84rem; line-height: 1.6; color: var(--text-secondary); margin-bottom: 14px; }
.detalhes-timeline { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.detalhes-evento { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; color: var(--text-secondary); }
.detalhes-evento i {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--rarity-epic);
  box-shadow: 0 0 8px var(--rarity-epic-glow);
}
.detalhes-evento-data { font-size: .68rem; color: var(--text-muted); }
.detalhes-skin-preview {
  max-width: 260px;
  margin-top: 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 10px;
  background: var(--bg-card);
}

/* ── Linhagem visual (aba Registro, Fase 3) ── */
.detalhes-linhagem-cadeia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.detalhes-linhagem-elo {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; color: var(--text-secondary);
  padding: 5px 10px; border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  background: var(--bg-card);
}
.detalhes-linhagem-elo-atual { color: var(--text-primary); border-color: var(--rarity-epic); font-weight: 700; }
.detalhes-linhagem-elo-ausente { color: var(--text-muted); font-style: italic; }
.detalhes-linhagem-numero { color: var(--text-muted); font-size: .7rem; }
.detalhes-linhagem-seta { color: var(--text-muted); font-size: .8rem; }

/* ── Laudo da Carta (aba Desempenho) ── */
.laudo-media { font-size: .82rem; color: var(--text-secondary); margin-bottom: 12px; }
.laudo-media strong { color: var(--text-primary); }
.laudo-bloco-titulo {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--neon-cyan);
  margin-bottom: 8px;
}
.laudo-lista { display: flex; flex-direction: column; gap: 6px; }
.laudo-row {
  display: grid;
  grid-template-columns: 90px 1fr 56px minmax(110px, auto);
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}
.laudo-row-label { font-weight: 700; font-size: .78rem; }
.laudo-row-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}
.laudo-row-fill { display: block; height: 100%; border-radius: 999px; }
.laudo-row-acima .laudo-row-fill { background: var(--success); }
.laudo-row-abaixo .laudo-row-fill { background: var(--danger); }
.laudo-row-neutro .laudo-row-fill { background: var(--text-muted); }
.laudo-row-acima .laudo-row-wr { color: var(--success); }
.laudo-row-abaixo .laudo-row-wr { color: var(--danger); }
.laudo-row-wr { font-weight: 800; text-align: right; font-size: .8rem; }
.laudo-row-n { font-size: .68rem; color: var(--text-muted); text-align: right; }
.laudo-row-vazia .laudo-row-vazio { grid-column: 2 / -1; font-size: .72rem; color: var(--text-muted); }

/* ============================================================
   CARTA COM ARTE VETORIAL (v3) — arte 100% SVG gerada no site
   (moldura HUD, cristal por raridade, painel de stats, chips,
   rodapé). Sem texto chapado. Por cima: texto dinâmico + controles
   reais (curtir/compartilhar/sockets). viewBox 390x520; posições
   do overlay em % desse quadro; textos escalam em cqw.
   ============================================================ */
.carta-render {
  position: relative;
  width: 100%;
  aspect-ratio: 390 / 520;
  border-radius: 16px;
  overflow: hidden;
  container-type: inline-size;
  font-family: 'Oxanium', 'Trebuchet MS', sans-serif;
  color: #F9FAFB;
  -webkit-user-select: none; user-select: none;
  --r: #7af7ff;   /* acento da raridade */
  transition: transform .18s ease;
}
.carta-render:hover { transform: translateY(-4px); }

/* Exclusiva — brilho diagonal varrendo a moldura, como luz refletindo
   numa faceta de cristal/diamante. Só nessa raridade. */
.carta-render.rarity-exclusive::after {
  content: '';
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(122,247,255,.16) 42%,
    rgba(255,255,255,.38) 48%,
    rgba(255,140,240,.16) 54%,
    transparent 66%);
  background-size: 240% 240%;
  mix-blend-mode: screen;
  animation: carta-exclusive-glint 3.6s linear infinite;
}
@keyframes carta-exclusive-glint {
  0%   { background-position: 120% 0%; }
  100% { background-position: -20% 100%; }
}

.carta-render.rarity-common    { --r: #9fd8ff; }
.carta-render.rarity-rare      { --r: #6ee7ff; }
.carta-render.rarity-epic      { --r: #df9bff; }
.carta-render.rarity-legendary { --r: #ffd76a; }
.carta-render.rarity-mythic    { --r: #ff7085; }
.carta-render.rarity-exclusive { --r: #cdb8ff; }

/* arte SVG cobre a carta toda; chrome HTML fica por cima */
.carta-render .cn-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.carta-render > *:not(.cn-art) { z-index: 1; }

/* nota/grade (D/C/B/A/S/S+) — pequeno selo empilhado sob o nº, topo-direita */
.carta-render .ca-grade {
  position: absolute; top: 15.6%; right: 13.2%;
  min-width: 6.5cqw; text-align: left;
  font-size: 2.9cqw; font-weight: 800;
  padding: .15em .5em; border-radius: .35em;
  background: rgba(4,8,18,.7); border: 1px solid currentColor;
}
.carta-render .ca-grade.g-d  { color: var(--grade-d); }
.carta-render .ca-grade.g-c  { color: var(--grade-c); }
.carta-render .ca-grade.g-b  { color: var(--grade-b); }
.carta-render .ca-grade.g-a  { color: var(--grade-a); }
.carta-render .ca-grade.g-s  { color: var(--grade-s); }
.carta-render .ca-grade.g-sp { color: #fff; background: var(--grade-sp); border-color: transparent; }

/* faixa Shiny/Gênesis — selo raro no topo-esquerda */
.carta-render .ca-ribbon {
  position: absolute; top: 8.7%; left: 7%;
  font-size: 2.4cqw; font-weight: 800; letter-spacing: .06em;
  padding: .22em .6em; border-radius: .4em;
  background: linear-gradient(135deg, rgba(255,215,80,.24), rgba(255,120,220,.2));
  border: 1px solid rgba(255,215,120,.55); color: #fff5d6;
  text-shadow: 0 0 6px rgba(0,0,0,.7);
}

/* bloco de título (área livre da arte — nada pra mascarar) */
.carta-render .ca-head {
  position: absolute; top: 11.2%; left: 11%; right: 11%;
  text-align: left;
}
.carta-render .ca-title {
  font-size: 5.3cqw; font-weight: 800; line-height: 1.03; letter-spacing: .01em;
  text-shadow: 0 0 10px rgba(0,0,0,.95), 0 0 22px rgba(0,0,0,.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.carta-render .ca-sub {
  font-size: 2.4cqw; font-weight: 600; letter-spacing: .1em;
  margin-top: .45em; color: var(--r); opacity: .95;
  text-shadow: 0 0 8px rgba(0,0,0,.9);
}
.carta-render .ca-sub::before,
.carta-render .ca-sub::after { content: '◈'; margin: 0 .5em; font-size: .8em; opacity: .8; }
.carta-render .ca-creator {
  font-size: 2.5cqw; font-weight: 500; margin-top: .35em; color: #cfe0ff;
  text-shadow: 0 0 8px rgba(0,0,0,.9);
}
.carta-render .ca-creator b { font-weight: 800; color: #eaf2ff; }

/* extras opcionais (estrelas/tendência/emblema de gerenciamento) — fica
   na sobra da cena, logo acima do painel de stats. */
.carta-render .ca-extra {
  position: absolute; top: 63.5%; left: 8%; right: 8%; height: 6.5%;
  display: flex; align-items: center; justify-content: center; gap: 1.1em;
  flex-wrap: wrap;
}
.carta-render .ca-extra-item {
  font-size: 2.5cqw; font-weight: 700; color: #cfe0ff;
  padding: .25em .55em; border-radius: .4em;
  background: rgba(4,8,18,.55); border: 1px solid rgba(255,255,255,.14);
  white-space: nowrap;
}
.carta-render .ca-stars .ca-star { color: rgba(255,255,255,.22); font-size: 1.05em; }
.carta-render .ca-stars .ca-star.on { color: var(--rarity-legendary, #ffbf3a); }
.carta-render .ca-trend.up   { color: #22e06a; }
.carta-render .ca-trend.down { color: #ff3b5c; }

/* valores WIN RATE / ENTRADAS (painel já desenhado no SVG) */
.carta-render .ca-wr, .carta-render .ca-en {
  position: absolute; top: 72.2%; height: 8.4%;
  display: flex; align-items: center; justify-content: center;
}
.carta-render .ca-wr { left: 7.7%; width: 42.3%; }
.carta-render .ca-en { right: 7.7%; width: 42.3%; }
.carta-render .ca-wr span, .carta-render .ca-en span {
  font-size: 6.3cqw; font-weight: 800; letter-spacing: .01em;
  padding-top: .55em; /* desce pra ficar abaixo do rótulo do SVG */
}
.carta-render .ca-en span { color: #F9FAFB; }
/* verde/vermelho por "tone" (pos/neg) — vale pros dois slots de stat */
.carta-render .ca-wr span, .carta-render .ca-en span { color: #cfe0ff; }
.carta-render .ca-wr.up span,   .carta-render .ca-en.up span   { color: #22e06a; text-shadow: 0 0 10px rgba(34,224,106,.4); }
.carta-render .ca-wr.down span, .carta-render .ca-en.down span { color: #ff3b5c; text-shadow: 0 0 10px rgba(255,59,92,.4); }

/* chips de categoria (formas já no SVG; aqui só o texto) */
.carta-render .ca-chip {
  position: absolute; top: 83.1%; height: 5.4%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.7cqw; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #dbe6f7;
}
.carta-render .ca-chip::before { content: '◈'; margin-right: .6em; font-size: .9em; color: var(--r); }
.carta-render .ca-chip1 { left: 7.7%; width: 40%; }
.carta-render .ca-chip2 { left: 52.3%; width: 40%; }

/* ---- controles reais: curtir / compartilhar ---- */
/* font-size em cqw (largura do card), NÃO herdado: quando a carta é
   colocada dentro de um contêiner com font-size grande (ex.: .bag-painel-visual
   usa 4.4rem pra emoji gigante), os paddings/gap em `em` destes botões
   explodiam e estouravam o card (Diego, 2026-07-13: "botões bugados na Bag").
   Fixar em cqw torna o card autossuficiente em qualquer lugar. */
.carta-render .ca-like, .carta-render .ca-share {
  position: absolute; top: 91.6%;
  display: flex; align-items: center; gap: .35em;
  padding: .3em .55em; border-radius: 999px; cursor: pointer;
  background: rgba(4,8,18,.55);
  border: 1px solid rgba(255,255,255,.28);
  color: #cfe0ff; font-family: inherit; font-size: 6.4cqw; line-height: 1;
  transition: border-color .15s, color .15s, transform .1s, background .15s;
}
.carta-render .ca-like { left: 7%; }
.carta-render .ca-share { right: 7%; }
.carta-render .ca-like:hover, .carta-render .ca-share:hover { border-color: var(--r); transform: translateY(-1px); }
.carta-render .ca-like:active, .carta-render .ca-share:active { transform: translateY(0); }
.carta-render .ca-ic { width: 4cqw; height: 4cqw; fill: currentColor; stroke: currentColor; }
.carta-render .ca-like-n { font-size: 2.9cqw; font-weight: 700; }
.carta-render .ca-like.liked { color: #ff3b5c; border-color: rgba(255,59,92,.4); }
.carta-render .ca-like.liked .ca-ic { fill: #ff3b5c; stroke: #ff3b5c; }
.carta-render .ca-share { color: var(--r); }

/* ---- 3 sockets de runa (hexágonos desenhados no SVG) ---- */
.carta-render .ca-runes {
  position: absolute; top: 91.5%; left: 38.2%; width: 23.6%; height: 5.8%;
  display: flex; align-items: center; justify-content: space-between;
}
.carta-render .ca-rune {
  width: 6.7cqw; aspect-ratio: 1; padding: 0; border: none; cursor: pointer;
  background: transparent; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
}
.carta-render .ca-rune:hover,
.carta-render .ca-rune.filled {
  background: radial-gradient(circle, color-mix(in srgb, var(--r) 45%, transparent) 0%, transparent 70%);
}
.carta-render .ca-rune:hover { transform: scale(1.12); }
.carta-render .ca-rune-ic { font-size: 3.6cqw; line-height: 1; }