/* ============================================================
   badge-card.css — O Pergaminho da Relíquia
   A cor de acento (--bc-cor) vem da raridade, definida pelo JS.
   ============================================================ */

.bc-card {
  position: fixed;
  z-index: 4000;
  width: 340px;
  max-width: calc(100vw - 24px);
  padding: 1.1rem 1.2rem;
  border-radius: 16px;
  pointer-events: auto;
  background:
    radial-gradient(120% 90% at 12% 0%,
      color-mix(in srgb, var(--bc-cor, #94a3b8) 16%, transparent), transparent 60%),
    linear-gradient(165deg, #16101f 0%, #0a0710 70%);
  border: 1px solid color-mix(in srgb, var(--bc-cor, #94a3b8) 45%, transparent);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, .7),
    0 0 34px color-mix(in srgb, var(--bc-cor, #94a3b8) 16%, transparent);
  animation: bc-surgir .22s cubic-bezier(.34, 1.3, .64, 1) both;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .bc-card {
    background: linear-gradient(165deg, #16101f, #0a0710);
    border-color: rgba(148, 163, 184, .4);
  }
}
@keyframes bc-surgir {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
}

/* ── Topo: medalha grande + identidade ─────────────────── */
.bc-topo { display: flex; gap: 1rem; align-items: center; }
.bc-medalha {
  width: 118px; height: 118px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
/* A regra global `img, svg { max-width:100% }` colapsaria a medalha
   dentro de um contêiner sem largura fixa — já aconteceu com a aura. */
.bc-medalha svg { max-width: none; }
.bc-id { min-width: 0; flex: 1; }
.bc-selo {
  display: inline-block;
  font-family: var(--font-section); font-size: .54rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 100px; margin-bottom: .35rem;
  color: var(--bc-cor, #94a3b8);
  border: 1px solid color-mix(in srgb, var(--bc-cor, #94a3b8) 55%, transparent);
  background: color-mix(in srgb, var(--bc-cor, #94a3b8) 12%, transparent);
}
.bc-titulo {
  font-family: var(--font-title); font-size: 1.12rem; line-height: 1.2;
  color: var(--text-primary);
}
.bc-desc {
  font-family: var(--font-section); font-size: .72rem; line-height: 1.5;
  color: var(--text-muted); margin-top: .3rem;
}

/* ── A citação ─────────────────────────────────────────── */
.bc-citacao {
  position: relative;
  margin: .95rem 0 .2rem;
  padding: .55rem .5rem .55rem 1.5rem;
  font-family: var(--font-section); font-size: .8rem; font-style: italic;
  line-height: 1.6; color: var(--text-secondary);
  border-left: 2px solid color-mix(in srgb, var(--bc-cor, #94a3b8) 60%, transparent);
}
.bc-citacao::before {
  content: '\201C';
  position: absolute; left: .3rem; top: .05rem;
  font-family: var(--font-title); font-size: 1.7rem; line-height: 1;
  color: color-mix(in srgb, var(--bc-cor, #94a3b8) 70%, transparent);
}

/* ── Estatísticas ──────────────────────────────────────── */
.bc-stats {
  display: flex; gap: .45rem; margin-top: .9rem;
}
.bc-stat {
  flex: 1; min-width: 0; text-align: center;
  padding: .5rem .3rem; border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(148, 163, 184, .13);
}
.bc-stat-ico { display: block; font-size: .78rem; opacity: .85; }
.bc-stat-v {
  display: block; margin-top: .1rem;
  font-family: 'Orbitron', monospace; font-size: .8rem; font-weight: 700;
  color: var(--text-primary);
}
.bc-stat-k {
  display: block;
  font-family: var(--font-section); font-size: .52rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim);
}

.bc-origem {
  margin-top: .7rem; padding-top: .6rem;
  font-family: var(--font-section); font-size: .66rem; text-align: center;
  color: var(--text-dim);
  border-top: 1px dashed rgba(148, 163, 184, .16);
}

/* O cursor precisa avisar que há algo a ver */
.hunter-reliquia, .hp-reliquia, [data-bc] { cursor: help; }

@media (prefers-reduced-motion: reduce) {
  .bc-card { animation: none; }
}