/*
 * PlayTCG 2.0 — Telas 48 a 55 (torneio ao vivo)
 *
 * CSS próprio destas telas — não mexe em tcg-tokens.css nem tcg-components.css.
 * Usa só os tokens já publicados (var(--tcg-...)).
 *
 * Cobre três padrões que o LEIA-ME tira do AntDesign nestas telas:
 *   - Steps com bolinha numerada  -> .tcg-stage-header (faixa de etapas em células iguais)
 *   - Collapse com seta circular  -> .tcg-group (grupo recolhido com o valor no cabeçalho)
 *   - Spin centralizado           -> .tcg-skel-* (esqueleto que mantém a forma final)
 */

/* ========================================
   ESQUELETO DE CARREGAMENTO
   Mantém a forma final (mesma altura de linha) — nunca spinner centralizado.
   ======================================== */

@keyframes tcg-skel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

.tcg-skel-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--tcg-neutral-200);
}

.tcg-skel-bar {
  height: 14px;
  background: var(--tcg-neutral-200);
  animation: tcg-skel-pulse 1.4s ease-in-out infinite;
}

.tcg-skel-bar--sm { width: 40px; height: 20px; flex: 0 0 auto; }
.tcg-skel-bar--md { width: 140px; }
.tcg-skel-bar--lg { flex: 1; }

/* ========================================
   FAIXA DE ETAPAS — células iguais, sem bolinha numerada
   ======================================== */

.tcg-stage-header {
  display: flex;
  background: var(--tcg-surface);
  border-bottom: 2px solid var(--tcg-ink);
}

.tcg-stage-cell {
  flex: 1;
  padding: 14px 20px;
  border-right: 1px solid var(--tcg-neutral-200);
  cursor: pointer;
  background: none;
  text-align: left;
  font-family: var(--tcg-font-family);
}

.tcg-stage-cell:last-child { border-right: none; }

.tcg-stage-cell__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--tcg-neutral-600);
}

.tcg-stage-cell__title {
  font-size: 16px;
  font-weight: 700;
  margin-top: 3px;
  color: var(--tcg-neutral-700);
}

.tcg-stage-cell--active {
  background: var(--tcg-ink);
  border-right-color: var(--tcg-surface);
}

.tcg-stage-cell--active .tcg-stage-cell__label { color: var(--tcg-neutral-500); }
.tcg-stage-cell--active .tcg-stage-cell__title { color: var(--tcg-surface); }

.tcg-stage-cell--done .tcg-stage-cell__title { color: var(--tcg-ink); }

/* ========================================
   GRUPO RECOLHÍVEL — mostra o valor no cabeçalho, não uma seta circular
   ======================================== */

.tcg-group {
  background: var(--tcg-surface);
  border: 2px solid var(--tcg-ink);
}

.tcg-group + .tcg-group {
  margin-top: 16px;
}

.tcg-group__header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--tcg-font-family);
}

.tcg-group__chevron {
  flex: 0 0 18px;
  transition: transform .15s ease;
}

.tcg-group--open .tcg-group__chevron {
  transform: rotate(90deg);
}

.tcg-group__title {
  flex: 1;
  min-width: 0;
}

.tcg-group__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--tcg-ink);
}

.tcg-group__value {
  font-size: 13px;
  color: var(--tcg-neutral-600);
  margin-top: 2px;
}

.tcg-group__missing {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 2px solid var(--tcg-accent);
  color: var(--tcg-accent-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
}

.tcg-group__body {
  padding: 18px;
  border-top: 2px solid var(--tcg-ink);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ========================================
   CHECKLIST "N de 8 itens prontos" (tela 48)
   ======================================== */

.tcg-checklist {
  background: var(--tcg-ink);
  color: var(--tcg-surface);
  padding: 20px;
}

.tcg-checklist__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--tcg-neutral-500);
}

.tcg-checklist__count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}

.tcg-checklist__count-value {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tcg-checklist__count-total {
  font-size: 15px;
  color: var(--tcg-neutral-300);
}

.tcg-checklist__bars {
  display: flex;
  gap: 2px;
  margin-top: 14px;
}

.tcg-checklist__bar {
  flex: 1;
  height: 8px;
  background: var(--tcg-neutral-700);
}

.tcg-checklist__bar--ready {
  background: var(--tcg-accent);
}

.tcg-checklist__note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--tcg-neutral-300);
  margin-top: 12px;
}

.tcg-checklist__items {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tcg-checklist__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}

.tcg-checklist__item--pending { color: var(--tcg-neutral-300); }
.tcg-checklist__item--ready { color: var(--tcg-neutral-500); text-decoration: line-through; }