@import url("../../styles/tokens.css");

/* Card exportável — "dossiê de expedição". Largura fixa (400px em tela,
   vira 1080px no export em pixelRatio 2.7), altura automática: cresce com
   o conteúdo em vez de cortar (decks variam muito de tamanho entre runs).

   Duas camadas de cor, deliberadamente separadas:
   - "Cor de classe" (--accent, --accent-dim, --accent-border): só em
     acentos decorativos — fundo, molduras, anéis de fundo, flag do topo,
     glifo do personagem. Nunca em texto que precisa ser lido.
   - "Cor semântica" (--sem-relic, --sem-upgrade, --sem-danger): fixa,
     igual pras quatro classes, só muda com o SIGNIFICADO do dado (relíquia,
     upgrade, causa de morte). Ver scripts/color-check.mjs pra critério de
     contraste/diferenciação usado pra escolher essas cores. */

.card {
  /* Valores padrão = tratamento neutro ("unknown"). Qualquer classe sem
     regra própria abaixo (personagem novo que a gente ainda não deu cor
     dedicada) cai aqui automaticamente em vez de renderizar sem cor
     nenhuma — antes só "unknown" literal pegava esse fallback, então um
     data-class desconhecido tipo "necrobinder" ficava sem --accent
     definido em lugar nenhum. */
  --accent: var(--accent-unknown);
  --accent-dim: var(--accent-unknown-dim);
  --accent-border: var(--accent-unknown-border);
  --card-bg-active: var(--bg-unknown);
  --card-bg-2: var(--bg-unknown-2);
  --glow-pattern: var(--glow-unknown);

  width: 400px;
  min-height: 500px;
  background: var(--card-bg-active);
  border: 1.5px solid var(--accent);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 22px;
  isolation: isolate;
  font-family: var(--font-body);
  color: var(--paper);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--glow-pattern);
  z-index: -1;
}

/* Anéis de progresso: um por ato, concêntricos. Em vez de "floors sobre o
   total esperado do ato" (exigiria inventar um total de andares por ato —
   dado que o schema não expõe e o spec pede pra não supor), o indicador é
   estrutural: quantos atos foram limpos + em qual ato a run terminou.
   Cor de classe reservada pros estados "alcançados" (cleared/current);
   ato ainda não alcançado fica num traço neutro (--rule), preservando a
   regra de que cor de classe não carrega significado que precisa ser lido
   — aqui quem carrega o dado é a posição/preenchimento, a cor só reforça. */
.progress-rings {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.progress-ring {
  position: absolute;
  left: 30%;
  top: 42%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.progress-ring.is-future {
  border: 1px solid var(--rule);
}

.progress-ring.is-cleared {
  border: 1.5px solid var(--accent);
  background: var(--accent-dim);
  opacity: 0.55;
}

.progress-ring.is-current {
  border: 2px solid var(--accent);
  background: var(--accent-dim);
  opacity: 0.95;
}

.card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--accent-border);
  pointer-events: none;
  z-index: 2;
}

.class-flag {
  position: absolute;
  top: 0;
  left: 26px;
  width: 44px;
  height: 5px;
  background: var(--accent);
  z-index: 3;
}

.card[data-class="regent"] {
  --accent: var(--accent-regent);
  --accent-dim: var(--accent-regent-dim);
  --accent-border: var(--accent-regent-border);
  --card-bg-active: var(--bg-regent);
  --card-bg-2: var(--bg-regent-2);
  --glow-pattern: var(--glow-regent);
}
.card[data-class="silent"] {
  --accent: var(--accent-silent);
  --accent-dim: var(--accent-silent-dim);
  --accent-border: var(--accent-silent-border);
  --card-bg-active: var(--bg-silent);
  --card-bg-2: var(--bg-silent-2);
  --glow-pattern: var(--glow-silent);
}
.card[data-class="ironclad"] {
  --accent: var(--accent-ironclad);
  --accent-dim: var(--accent-ironclad-dim);
  --accent-border: var(--accent-ironclad-border);
  --card-bg-active: var(--bg-ironclad);
  --card-bg-2: var(--bg-ironclad-2);
  --glow-pattern: var(--glow-ironclad);
}
.card[data-class="necrobinder"] {
  --accent: var(--accent-necrobinder);
  --accent-dim: var(--accent-necrobinder-dim);
  --accent-border: var(--accent-necrobinder-border);
  --card-bg-active: var(--bg-necrobinder);
  --card-bg-2: var(--bg-necrobinder-2);
  --glow-pattern: var(--glow-necrobinder);
}
.card[data-class="defect"] {
  --accent: var(--accent-defect);
  --accent-dim: var(--accent-defect-dim);
  --accent-border: var(--accent-defect-border);
  --card-bg-active: var(--bg-defect);
  --card-bg-2: var(--bg-defect-2);
  --glow-pattern: var(--glow-defect);
}
/* "unknown" e qualquer outro data-class não listado acima usam o
   fallback neutro já definido em .card — não precisam de regra própria. */

.report-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.glyph {
  width: 34px;
  height: 34px;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.glyph svg {
  width: 16px;
  height: 16px;
}

.card-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.character-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.01em;
  color: var(--paper);
}

.ascension-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--paper);
  border: 1px solid var(--accent);
  padding: 3px 7px;
  white-space: nowrap;
}

/* Linha herói: número de andares + coluna de metadados (seed/tempo/status)
   lado a lado, centralizados na vertical um contra o outro — resolve tanto
   o alinhamento do badge de status quanto o agrupamento de toda a
   metainformação de topo num bloco único. */
.hero-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.floor-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 92px;
  line-height: 0.86;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.meta-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.meta-col .meta-line {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
  text-align: right;
  white-space: nowrap;
}

/* Um traço só, mais grosso, com leve preenchimento de fundo — lido como
   badge de status na primeira olhada, sem voltar ao anel duplo (que a
   62px de diâmetro colapsava visualmente num traço fino só).
   Alpha do preenchimento calibrado em 0.05: em 0.14 o texto "RUN ENDED"
   (mesma cor --sem-danger) caía pra ~4.1-4.2:1 de contraste contra o
   próprio preenchimento nos 4 fundos — não era um problema só do
   Ironclad, era o alpha alto demais pra qualquer fundo. Ver
   scripts/color-check.mjs. */
.status-badge {
  position: relative;
  width: 62px;
  height: 62px;
  border: 2.5px solid var(--sem-danger);
  background: var(--sem-danger-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(11deg);
}
.status-badge span {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.06em;
  color: var(--sem-danger);
  text-align: center;
  line-height: 1.45;
  text-transform: uppercase;
}

.floor-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 10px;
}

.floor-label b {
  color: var(--paper);
  font-weight: 600;
}

.narrative {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--paper);
}

.narrative .cause {
  color: var(--sem-danger);
}

/* Separadores de seção: um único padrão em todo o card — rótulo curto
   seguido de linha fina até a borda, mesma cor/espessura sempre. */
.divider-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 18px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.divider-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 6px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stat .value {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.stat .label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* Cartas do deck: chips individuais em vez de texto corrido — escaneável
   sem depender de vírgula/superscript pra separar itens. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  background: var(--card-bg-2, var(--panel));
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--paper);
}

.chip .count {
  color: var(--muted);
  font-size: 0.95em;
}

/* 11px em vez de 7px: testado empiricamente reduzindo o PNG exportado pros
   tamanhos reais de preview de link (Twitter ~506px, Discord ~320px) — a
   7px o ponto desaparecia no embed estreito do Discord. */
.chip.is-upgraded::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sem-upgrade);
  box-shadow: 0 0 0 2px var(--card-bg-active, var(--card-bg));
}

.list-text {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--paper);
  margin: 0;
}

.list-text.relics {
  color: var(--sem-relic);
}

.card-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}

.card-foot .wordmark {
  color: var(--muted);
}
.card-foot .wordmark b {
  color: var(--paper);
  font-weight: 600;
}

.card-foot .site-url {
  color: var(--muted);
}

/* ---------- card companheiro: log completo (timeline) ----------
   Reaproveita .card / .class-flag / .card-foot / --accent / --sem-* de
   cima — só os componentes novos (masthead do log, nós, entradas) vão
   aqui. Ver runrecap-timeline-design.html (proposta validada) pra origem. */

.masthead {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}
.masthead .row1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.masthead .who {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--paper);
}
.masthead .who .asc {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  margin-left: 8px;
  font-weight: 400;
}
.masthead .seed {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  text-transform: uppercase;
}
.masthead .reached {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.masthead .reached b {
  color: var(--paper);
  font-weight: 600;
}
.masthead .reached .arrow {
  color: var(--muted-2);
  margin: 0 5px;
}

.log-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 14px 0 10px;
}

.log {
  display: flex;
  flex-direction: column;
}

.log-row {
  display: flex;
  gap: 13px;
}

.node-col {
  position: relative;
  width: 22px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}
.node-col::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}
.log-row:first-child .node-col::before {
  top: 11px;
}
.log-row:last-child .node-col::before {
  bottom: calc(100% - 11px);
}

.node {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--card-bg-active, var(--card-bg));
  border: 1.5px solid var(--muted-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted-2);
  margin-top: 2px;
  flex-shrink: 0;
}
.node.is-elite {
  border: 1.5px solid var(--accent);
  color: var(--accent);
}
.node.is-big {
  width: 30px;
  height: 30px;
  margin-top: -2px;
  margin-left: -4px;
  border: 2px solid var(--sem-danger);
  background: var(--sem-danger-dim);
  color: var(--sem-danger);
  font-size: 13px;
}

.entry {
  flex: 1;
  padding-bottom: 15px;
  min-width: 0;
}
.entry .floor {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 2px;
}
.entry .title {
  font-size: 13.5px;
  color: var(--paper);
  line-height: 1.4;
}
.entry .detail {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 3px;
}
.entry .declined {
  color: var(--muted-2);
  text-decoration: line-through;
  text-decoration-color: var(--card-edge);
}
.entry .relic {
  color: var(--sem-relic);
}
.entry .upgrade {
  color: var(--sem-upgrade);
}
.entry .danger {
  color: var(--sem-danger);
}
.entry.is-fatal .title {
  color: var(--sem-danger);
}

/* Divisor de ato dentro do log — mesmo padrão visual de .divider-label
   (rótulo curto + linha fina), só que aninhado no log em vez de separar
   seções do card principal. */
.act-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 14px 35px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
}
.act-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}