/* Campaigns: the rounds-won pips (home cards and the campaign page) and the campaign page itself.
   The two-country block reuses .versus / .side from home.css. Tokens and shared components only
   (see docs/DESIGN.md). */
@layer pages {
  /* One pip per round needed to win; lit in the side's colour (your side blue, the enemy red). */
  .pips { display: inline-flex; gap: 6px; }
  .pips i { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-sunken); box-shadow: var(--input-shadow); transition: background-color var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); }
  .pips.friend i.on { background: var(--blue); box-shadow: 0 0 8px color-mix(in srgb, var(--blue) 60%, transparent); }
  .pips.enemy i.on { background: var(--red); box-shadow: 0 0 8px color-mix(in srgb, var(--red) 55%, transparent); }
  .pips.neutral i.on { background: var(--text-3); }

  .campaign-page .camp-score { display: flex; flex-direction: column; gap: var(--sp-5); }
  .campaign-page .camp-score .btn.go { align-self: center; }
  .campaign-page .side.enemy { border-color: color-mix(in srgb, var(--red) 45%, transparent);
    background: linear-gradient(180deg, var(--red-soft), transparent 75%), var(--surface-raised); }
  .campaign-page .camp-tally { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center; }
  .campaign-page .camp-tally .t-stat { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .campaign-page .page-head a { text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 3px; }
  .campaign-page .page-head a:hover { color: var(--brand-text); }
  .campaign-page .who { font-weight: var(--fw-semibold); color: var(--text); }
  .campaign-page .who:hover { color: var(--brand-text); }
  .campaign-page .rounds-table td, .campaign-page .rounds-table th { white-space: nowrap; }
  .campaign-page .campaign-skeleton { display: block; }

  .br-meta a { text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 3px; color: inherit; }
  .br-meta a:hover { color: var(--brand-text); }
}