/* Moboria: página /live/. Só tokens; sem cor nem fonte nova. Prefixo .live- (veja docs/notas/site.md). */

/* ---------- Topo: título + resumo (região aria-live) + botão ---------- */
.live-head { padding-block: var(--space-6) var(--space-4); display: grid; gap: var(--space-3); }
.live-head__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.live-summary { min-height: 1.6em; font-size: var(--text-lg); line-height: 1.3; }
.live-summary .num { font-size: 2rem; line-height: 1; margin-right: .08em; } /* Pixelify só é nítida em 16, 20, 24, 32px: nunca um tamanho fluido */
.live-note:empty { display: none; }
.live-note .notice { padding: var(--space-2) var(--space-4); } /* aviso discreto: o erro não é o assunto da página */
.live-note .notice__title { font-family: var(--font-body); font-size: var(--text-base); }

/* ---------- Palco: reserva a altura do estado vazio, para o elenco entrar sem empurrar a página ---------- */
.live-stage { min-height: 14rem; padding-top: var(--space-3); }
.live-section:last-child { padding-bottom: var(--space-6); }
.live-section + .live-section { margin-top: var(--space-7); }
.live-section__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.live-section__title { font-size: var(--text-xl); margin-right: var(--space-2); overflow-wrap: anywhere; }
.live-tag--warn { --rim: var(--hp-mid); color: var(--text); }
.live-section__head .btn { margin-left: auto; }

/* ---------- Elenco: grade de cartões; content-visibility deixa 200 heróis baratos ---------- */
.live-roster { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.live-player {
  --rim: var(--class, var(--line));
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-3); align-items: center;
  padding: var(--space-3); min-width: 0;
  background: var(--panel); border: var(--border) solid var(--rim); border-radius: var(--radius);
  content-visibility: auto; contain-intrinsic-size: auto 6rem;
}
.live-player__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.live-player__name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font-weight: 700; line-height: 1.25; overflow-wrap: anywhere;
}

/* miniatura: recorte do busto do retrato 2:3 (só aqui; em qualquer outro lugar o retrato é 2:3 inteiro) */
.live-player__avatar { position: relative; overflow: hidden; width: 3.25rem; aspect-ratio: 3 / 4; background: var(--base); border: 1px solid var(--rim); border-radius: var(--radius); }
.live-player__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.9); transform-origin: 50% 13%; }
.live-player__initial { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--muted); }

.live-player__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); font-size: var(--text-sm); line-height: 1.3; }
/* Pixelify Sans só é nítida em múltiplos de 4px (16, 20, 24...): entre eles o 2 vira 8 e o 7 vira 1. Os números do elenco ficam em 1rem */
.live-player .num { font-size: 1rem; }
.live-player__class { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--class-ink, var(--muted)); }
.live-player__level { color: var(--text); }
.live-player__status { display: flex; flex-direction: column; gap: var(--space-1); }
.live-player .meter { height: 12px; }
.live-player .meter-row { gap: var(--space-2); }
.live-player .meter-row .num { min-width: 6ch; color: var(--muted); }
.live-player__none { align-self: flex-start; color: var(--muted); }

/* ---------- Estado vazio: aviso compacto, sem arte (v1.1.0: a faixa de arte cortava o letreiro e parecia um banner preso) ---------- */
.live-offline { padding-bottom: var(--space-6); }
.live-offline .notice { max-width: 40rem; }
.live-offline .notice__title { font-size: var(--text-xl); }
.live-offline__auto { font-size: var(--text-sm); }

/* ---------- Sobre a página + como funciona uma raid ---------- */
.live-about { margin-top: var(--space-6); margin-bottom: calc(var(--space-8) * -1); padding-bottom: var(--space-8); } /* o rodapé tem margin-top: a faixa desce até ele, sem um vão escuro no meio */
.live-about__grid { display: grid; gap: var(--space-6); }
.live-about__col { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--measure); }
.live-about h2 { font-size: var(--text-xl); }
.live-steps { margin: 0; padding-left: 1.6em; display: flex; flex-direction: column; gap: var(--space-3); }
.live-steps li::marker { font-weight: 700; color: var(--muted); }
.live-steps strong { color: var(--text); }
@media (min-width: 60rem) { .live-about__grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); } }