/* ============================================================================
 * odc-embed.css — Rifinitura Pronostici + Squadre (2026-07)
 * ============================================================================
 * Layer finale sopra gli stili inline e tm-theme: porta il linguaggio del
 * refresh (Barlow Condensed per i titoli, accenti dal colore torneo via
 * --primary) senza toccare markup o classi generate dai JS.
 * ========================================================================= */

:root {
  --font-display: "Barlow Condensed", Inter, system-ui, sans-serif;
}

/* ── Pronostici ────────────────────────────────────────────────────────── */

.section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 24px;
}

.phase-switch-btn {
  font-weight: 800;
}

.phase-switch-btn.active {
  background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 92%, white), color-mix(in oklab, var(--primary) 78%, black));
  border-color: color-mix(in oklab, var(--primary) 70%, white);
  color: var(--on-primary, #fff);
  box-shadow: 0 8px 22px color-mix(in oklab, var(--primary) 28%, transparent);
}

.market-leader-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 19px;
}

.match-versus {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
}

.vote-percent {
  font-family: var(--font-display);
  font-weight: 800;
}

/* ── Squadre ───────────────────────────────────────────────────────────── */

.page-bg .header h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.team-card {
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.2s ease;
}

.team-card:hover {
  border-color: color-mix(in oklab, var(--primary) 45%, rgba(255, 255, 255, 0.18));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.35);
}

.team-name {
  font-weight: 800;
}

/* Indicazione cross-torneo: la squadra gioca anche in un altro torneo.
   Colore del pill = primaryColor dell'ALTRO torneo (custom prop --tt). */
.team-tourneys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 7px;
}

.team-tourney-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--tt, #94a3b8) 45%, #fff);
  background: color-mix(in oklab, var(--tt, #94a3b8) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--tt, #94a3b8) 38%, transparent);
  white-space: nowrap;
}

.team-tourney-pill .tt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tt, #94a3b8);
  flex-shrink: 0;
}