/* public/empty-pack-card.css
 *
 * Card-shaped empty state rendered inside #detailDeck when a pack
 * loaded successfully but has no playable props (event closed, odds
 * not linked, network failure, etc.).  Shared by landing/index.html
 * and landing/packs.html — see /public/empty-pack-card.js for the
 * matching render function.
 */

.detail-empty-card {
  border-radius: 16px;
  background: var(--mtt-surface-card);
  border: 1px solid var(--mtt-border);
  padding: 28px 22px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  color: var(--mtt-text-primary);
}

.detail-empty-card .matchup {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.92rem;
  color: var(--mtt-text-muted);
}

.detail-empty-card .matchup .team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 64px;
}

.detail-empty-card .matchup .logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mtt-overlay) 4%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.detail-empty-card .matchup .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detail-empty-card .matchup .abbr {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--mtt-text-muted);
  font-weight: 600;
}

.detail-empty-card .matchup .score {
  font-size: 1.4rem;
  color: var(--mtt-text-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 1.4em;
}

.detail-empty-card .matchup .score.win { color: var(--mtt-accent-amber, #f5b54a); }

.detail-empty-card .matchup .vs {
  color: var(--mtt-text-divider, color-mix(in srgb, var(--mtt-overlay) 30%, transparent));
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.detail-empty-card .headline {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--mtt-text-primary);
  max-width: 28ch;
  line-height: 1.35;
}

.detail-empty-card .subtext {
  font-size: 0.86rem;
  color: var(--mtt-text-muted);
  max-width: 36ch;
  line-height: 1.45;
}

.detail-empty-card .status-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mtt-overlay) 6%, transparent);
  border: 1px solid var(--mtt-border);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mtt-text-muted);
}

.detail-empty-card .status-chip.is-final {
  color: var(--mtt-accent-amber, #f5b54a);
  border-color: rgba(245, 181, 74, 0.35);
}