/* Tabellone playoff stile NCAA: colonne per turno, caselle bianche, linee che uniscono le coppie */
.br-title { margin: 0 0 .8rem; }
.br-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: #eef0f3; border-radius: 12px; padding: 18px 18px 22px; scroll-snap-type: x mandatory; }
.bracket { --gap: 44px; --line: #b9c1cb; display: grid; grid-template-columns: repeat(var(--rounds), minmax(230px, 1fr)); column-gap: var(--gap); row-gap: 18px; min-width: calc(var(--rounds) * 230px + (var(--rounds) - 1) * 44px); }
.br-round { display: flex; flex-direction: column; scroll-snap-align: start; }
.br-rhead { font-weight: 700; font-size: .85rem; color: #2b3440; padding: 0 2px 10px; }
.br-rhead small { font-weight: 400; color: #6b7785; }
.br-col { flex: 1; display: flex; flex-direction: column; }
.br-cell { flex: 1; display: flex; align-items: center; position: relative; padding: 7px 0; }
.br-cell.hi::after, .br-cell.lo::after { content: ""; position: absolute; right: calc(var(--gap) / -2); width: calc(var(--gap) / 2); height: 50%; border-right: 2px solid var(--line); }
.br-cell.hi::after { top: 50%; border-top: 2px solid var(--line); border-top-right-radius: 6px; }
.br-cell.lo::after { bottom: 50%; border-bottom: 2px solid var(--line); border-bottom-right-radius: 6px; }
.br-cell.in::before { content: ""; position: absolute; left: calc(var(--gap) / -2); width: calc(var(--gap) / 2); top: 50%; border-top: 2px solid var(--line); }
.br-card { display: block; width: 100%; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(20, 30, 45, .12); padding: 8px 10px; color: #1d2530; text-decoration: none; position: relative; z-index: 1; }
a.br-card:hover { box-shadow: 0 0 0 2px var(--blue, #1270b5); }
.br-card.has-us { box-shadow: 0 0 0 2px var(--red, #e8590c), 0 1px 3px rgba(20, 30, 45, .12); }
.br-team { display: grid; grid-template-columns: 24px 18px 1fr auto; align-items: center; gap: 6px; padding: 3px 0; font-size: .92rem; }
.br-team.win { font-weight: 800; }
.br-team.lose { color: #8a94a0; }
.br-team.lose .br-shield { opacity: .55; }
.br-team.us .br-name { color: var(--red, #e8590c); }
.br-seed { font-size: .72rem; color: #8a94a0; text-align: right; }
.br-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-name .tbd { color: #9aa4af; font-weight: 400; }
.br-score { font-weight: 800; min-width: 1.4em; text-align: right; font-variant-numeric: tabular-nums; }
.br-shield { width: 22px; height: 25px; display: block; }
img.br-shield { object-fit: contain; }
.br-shield.big { width: 44px; height: 50px; }
.br-foot { margin-top: 4px; padding-top: 5px; border-top: 1px solid #edf0f3; font-size: .75rem; color: #6b7785; }
.br-extra { display: grid; gap: 14px; align-content: start; }
.br-champ { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 8px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(20, 30, 45, .12); }
.br-champ span { font-size: .8rem; color: #6b7785; font-weight: 700; }
.br-champ b { color: #1b1f24; }   /* il riquadro è bianco anche dentro le sezioni scure: il nome non eredita il testo chiaro */
/* Final Four */
.f4-head { text-align: center; background: linear-gradient(135deg, var(--navy, #12233d), #24406b); color: #fff; border-radius: 12px; padding: 18px 16px; margin-bottom: 14px; }
.f4-title { font-size: 1.6rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.f4-teams { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 28px; margin: 14px 0 6px; }
.f4-team { display: grid; justify-items: center; gap: 6px; font-weight: 700; font-size: .9rem; max-width: 120px; }
.f4-where { opacity: .85; font-size: .92rem; }
/* Telefono: un turno alla volta, si scorre di lato */
@media (max-width: 700px) {
  .br-scroll { padding: 14px 12px 18px; }
  .bracket { --gap: 28px; grid-template-columns: repeat(var(--rounds), 78vw); min-width: 0; }
}

/* Telefono: niente colonne affiancate da scorrere, i turni uno sotto l'altro (semifinali, finale, campione e 3° posto) */
@media (max-width: 640px) {
  .br-scroll { overflow: visible; scroll-snap-type: none; padding: 14px 12px 16px; }
  .bracket { grid-template-columns: 1fr; min-width: 0; column-gap: 0; row-gap: 14px; }
  .br-round { gap: 0; }
  .br-col { gap: 8px; }
  .br-cell { padding: 0; }
  .br-cell::before, .br-cell::after { display: none !important; }
  .bracket > .br-extra { grid-column: auto !important; grid-row: auto !important; }
  .br-team { font-size: .9rem; }
}