/* style.css — direzione "Diretta TV".
   Linguaggio da grafica di telecronaca: tagli obliqui, condensato maiuscolo,
   rosso da lower-third, oro per i numeri che contano, angoli vivi.
   Mobile-first, nessun framework. */

/* I font si caricano da index.html con un <link>: un @import qui bloccherebbe
   il rendering finché il foglio esterno non arriva. */

:root {
  --bg: #0c0d11;
  --surface: #14161d;
  --surface-2: #1c2030;
  --line: #262b39;
  --line-2: #333a4d;
  --text: #ffffff;
  --muted: #9aa3b2;
  --muted-2: #c6cddb;

  --red: #e01b2e;        /* il rosso della grafica TV: azioni e accenti */
  --red-deep: #a00f1f;
  --gold: #ffd166;       /* i numeri che contano: crediti, timer, rating */
  --gold-ink: #1a1205;
  --ok: #34d399;
  --bad: #ff5a6a;
  --warning: #ffd166;

  /* un colore per POSIZIONE, non per nome: rinominare le squadre non tocca il CSS */
  --t1: #ef4444;
  --t2: #3b82f6;
  --t3: #22c55e;
  --t4: #a855f7;
  --t5: #f97316;
  --t6: #06b6d4;
  --t7: #ec4899;
  --t8: #84cc16;
  --t9: #eab308;
  --t10: #8b93f8;
  --t11: #2dd4bf;
  --t12: #fb7185;

  --r: 3px;              /* angoli quasi vivi: è una grafica televisiva */
  --gap: 12px;
  --cond: 'Saira Condensed', 'Arial Narrow', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 Barlow, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  padding: 0 0 80px;
  overflow-x: hidden;
}

#app { max-width: 720px; margin: 0 auto; padding: 14px; }

h1, h2, h3 { font-family: var(--cond); font-weight: 800; line-height: 1.05; letter-spacing: 0.4px; text-transform: uppercase; }
h1 { font-size: 30px; margin-bottom: 4px; }
h2 { font-size: 23px; margin-bottom: 10px; }
h3 { font-size: 17px; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.center { text-align: center; }
.mt { margin-top: var(--gap); }
.mb { margin-bottom: var(--gap); }
.row { display: flex; gap: 9px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grow { flex: 1; }

/* ---- barra in alto ---- */
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 9px;
  padding: 10px 14px; background: var(--surface);
  border-bottom: 3px solid var(--red);
  position: sticky; top: 0; z-index: 20;
}
.topbar .row { flex-wrap: wrap; justify-content: flex-end; }
.topbar .brand {
  font-family: var(--cond); font-weight: 800; font-size: 19px;
  letter-spacing: 2px; text-transform: uppercase;
}
.topbar .brand span { color: var(--red); }
.code-pill {
  font: 700 13px/1 var(--cond); letter-spacing: 3px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  padding: 7px 10px; border-radius: var(--r);
}

/* ---- blocchi ---- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px; margin-bottom: var(--gap);
}
.card.tight { padding: 10px; }

/* ---- bottoni ---- */
button {
  font: 600 15px Barlow, sans-serif; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 11px 14px; cursor: pointer;
  transition: filter .12s, transform .06s;
}
button:active:not(:disabled) { transform: scale(.97); }
button:disabled { opacity: .3; cursor: not-allowed; }
button.primary {
  background: var(--red); border-color: var(--red); color: #fff;
  font-family: var(--cond); font-weight: 800; font-size: 17px;
  letter-spacing: 1.4px; text-transform: uppercase;
}
button.ghost { background: transparent; }
button.wide { width: 100%; }
button.sm {
  padding: 9px 11px; font-size: 13px;
  font-family: var(--cond); font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}

input, select {
  font: 400 15px Barlow, sans-serif; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 11px 12px; width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
label.field { display: block; margin-bottom: 10px; }
label.field > span {
  display: block; font: 700 11px var(--cond); letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}

/* ---- colori squadra ---- */
.t-t1 { --tc: var(--t1); }
.t-t2 { --tc: var(--t2); }
.t-t3 { --tc: var(--t3); }
.t-t4 { --tc: var(--t4); }
.t-t5 { --tc: var(--t5); }
.t-t6 { --tc: var(--t6); }
.t-t7 { --tc: var(--t7); }
.t-t8 { --tc: var(--t8); }
.t-t9 { --tc: var(--t9); }
.t-t10 { --tc: var(--t10); }
.t-t11 { --tc: var(--t11); }
.t-t12 { --tc: var(--t12); }
.dot { width: 9px; height: 9px; background: var(--tc); flex: none; }

/* ---- sedie (lobby) ---- */
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seat {
  border: 1px solid var(--line-2); border-left: 4px solid var(--tc);
  border-radius: var(--r); padding: 11px; background: var(--surface-2); text-align: left;
}
.seat.taken { background: #20263a; }
.seat .nm {
  font: 800 16px var(--cond); letter-spacing: 1.4px; text-transform: uppercase;
  display: flex; align-items: center; gap: 7px;
}
.seat .who { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ---- caselle di ruolo durante l'asta ---- */
/* Cinque "libero" uguali non dicevano chi manca. Con il ruolo scritto sopra,
   il buco si vede senza doverlo cercare. */
.rslots { display: grid; gap: 4px; margin-top: 10px; }
.rslot {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  background: var(--surface-2); border-radius: var(--r);
  border-left: 3px solid var(--line-2);
}
.rslot .pos {
  font: 800 11px var(--cond); letter-spacing: 1.3px; color: var(--muted);
  width: 26px; flex: none;
}
.rslot .nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rslot .ov { font: 800 15px var(--cond); color: var(--gold); }
.rslot.vuoto { background: transparent; border: 1px dashed var(--line-2); border-left-width: 3px; }
.rslot.vuoto .nm { color: var(--muted); }
.rslot.adattato { border-left-color: var(--warning); }

/* ---- gare gia lette, richiuse a una riga ---- */
.game.chiusa { opacity: .62; padding-top: 6px; padding-bottom: 6px; }
.game.chiusa .line { margin: 0; }

/* ---- il cronometro dentro la barra dei rilanci ---- */
/* Decidi se rilanciare guardando i tasti, e i tasti stanno in fondo: senza il
   conto alla rovescia qui accanto stavi scegliendo alla cieca. */
.bidbar-clock {
  max-width: 700px; margin: 0 auto 7px; text-align: center;
  font: 800 13px var(--cond); letter-spacing: 2px; color: var(--muted);
}
.bidbar-clock [data-clock] { color: var(--gold); font-size: 17px; }
.bidbar-clock [data-clock].hot { color: var(--red); }
.bidbar-clock [data-clock].frozen { color: var(--muted); }
.bidbar-clock.paused { opacity: .7; }

/* ---- il referto tattico ---- */
.referto-wrap > summary {
  font: 800 11px var(--cond); letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--gold); padding: 10px 0; cursor: pointer;
}
.ref-blocco { margin-top: 12px; border-left: 3px solid var(--tc); padding-left: 10px; }
.ref-blocco .nm {
  display: flex; align-items: center; gap: 7px; margin-bottom: 5px;
  font: 800 13px var(--cond); letter-spacing: 1.2px; text-transform: uppercase;
}
table.referto { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.referto td { padding: 5px 4px; border-top: 1px solid var(--line); vertical-align: top; }
table.referto .dim {
  font: 700 9.5px var(--cond); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; width: 1%;
}
table.referto .scelta { font-weight: 700; }
table.referto .val {
  font: 800 13px var(--cond); text-align: right; white-space: nowrap; width: 1%;
  font-variant-numeric: tabular-nums;
}
table.referto .val.su { color: var(--ok); }
table.referto .val.giu { color: var(--bad); }
table.referto .alt { color: var(--muted); font-size: 11.5px; }
table.referto .alt .ok { color: var(--ok); }
table.referto tr.giusta .scelta { color: var(--ok); }

/* ---- ritmo e allenatore ---- */
.lbl-mini {
  display: block; font: 700 9.5px var(--cond); letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted); margin: 11px 0 6px;
}
.lbl-mini i { text-transform: none; letter-spacing: 0; font-style: normal; }

/* Il ritmo e una manopola continua, non quattro scatole: la barra dice da
   sola che lento e run and gun sono i due estremi della stessa cosa. */
.ritmo-slider { padding: 2px 0 0; }
.rslider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 26px;
  background: transparent; margin: 0; display: block;
}
.rslider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--line-2) 0%, var(--tc) 100%);
}
.rslider::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--line-2) 0%, var(--tc) 100%);
}
/* Il pollice e grande: si trascina col dito, non col mouse. */
.rslider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: var(--text); border: 3px solid var(--tc); box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.rslider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--text); border: 3px solid var(--tc); box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.rslider:disabled { opacity: .5; }
.rtacche { display: flex; justify-content: space-between; margin-top: 1px; }
.rtacche span {
  font: 700 9px var(--cond); letter-spacing: .9px; text-transform: uppercase;
  color: var(--muted); flex: 1; text-align: center;
}
.rtacche span:first-child { text-align: left; }
.rtacche span:last-child { text-align: right; }
.rtacche span.on { color: var(--tc); }

/* Gli allenatori si sfogliano uno alla volta: cinque schede intere aperte
   insieme erano troppo da leggere, e si finiva per sceglierne una a caso. */
.cfrecce { display: flex; gap: 5px; }
.cfr {
  width: 30px; height: 30px; padding: 0; line-height: 1;
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r); color: var(--muted-2); font-size: 18px; font-weight: 700;
}
.cstrip {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
}
.cstrip::-webkit-scrollbar { display: none; }
/* Tutto in colonna: faccia sopra, testo sotto a tutta larghezza. Affiancati,
   su un telefono il testo si riduceva a una colonna da una parola per riga. */
.ccard {
  flex: 0 0 100%; min-width: 0; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 9px;
  padding: 11px; background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: var(--r);
}
.ccard.on { border-color: var(--tc); box-shadow: inset 0 0 0 1px var(--tc); }
.ctesta { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cface { flex: none; }
.cface .avatar { display: block; border-radius: 10px; }
.cinfo { min-width: 0; }
.cinfo b { display: block; font: 800 16px var(--cond); letter-spacing: 1px; text-transform: uppercase; }
.ccard.on .cinfo b { color: var(--tc); }
.cid {
  display: block; font: 700 9.5px var(--cond); letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
.cdesc { font-size: 13px; line-height: 1.4; color: var(--muted-2); margin: 0 0 6px; }
.ceff { font-size: 11.5px; line-height: 1.35; color: var(--muted); margin: 0 0 3px; }
.cvia { font-size: 10.5px; color: var(--muted); margin: 0; opacity: .8; }
.csel {
  min-height: 34px; margin-top: auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  color: var(--muted-2); font: 800 11px var(--cond); letter-spacing: 1.8px; text-transform: uppercase;
}
.csel.on { background: var(--tc); border-color: var(--tc); color: #0e1119; }
.cconta {
  flex: none; font: 700 10px var(--cond); letter-spacing: 1.2px;
  color: var(--muted); opacity: .75;
}
/* Su schermi larghi se ne vedono due, ma si sfoglia allo stesso modo. */
@media (min-width: 620px) { .ccard { flex-basis: calc(50% - 5px); } }

/* ---- classifica di stagione regolare ---- */
.classifica { width: 100%; border-collapse: collapse; font-size: 14px; }
.classifica th {
  font: 700 9.5px var(--cond); letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 0 6px 7px; font-weight: 700;
}
.classifica td { padding: 9px 6px; border-top: 1px solid var(--line); vertical-align: middle; }
.classifica tr.out td { opacity: .5; }
.classifica .pos { font: 800 15px var(--cond); color: var(--muted); width: 22px; text-align: center; }
.classifica .sq {
  font: 800 13.5px var(--cond); letter-spacing: 1.1px; text-transform: uppercase;
  display: flex; align-items: center; gap: 7px;
}
.classifica .rec { white-space: nowrap; font-variant-numeric: tabular-nums; }
.classifica .rec b { font: 800 16px var(--cond); }
.classifica .diff { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.classifica .esito { text-align: right; }
.tag.in { background: var(--ok); border-color: var(--ok); color: #06130d; }
.tag.fuori { background: transparent; border: 1px solid var(--line-2); color: var(--muted); }
.log b.w { color: var(--gold); }

/* ---- il giocatore in asta ---- */
.card.lot {
  padding: 0; overflow: hidden; border: none;
  background: var(--surface);
}
/* La testata rossa con nome, ruolo e provenienza e stata tolta: diceva le
   stesse tre cose del tabellone qui sopra, e su un telefono valeva mezzo
   schermo di scroll per rileggere quello che avevi appena letto. Di quel
   blocco resta l'overall e le tessere degli attributi. */

/* attributi come tessere da tabellone, non come barre */
.attrs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line); border-top: 1px solid var(--line);
}
.attr { background: var(--surface); padding: 8px 4px; text-align: center; }
.attr .bar { display: none; }
.attr .lbl { display: flex; flex-direction: column-reverse; align-items: center; gap: 1px; }
.attr .lbl b { font: 800 20px/1 var(--cond); }
.attr .lbl span {
  font: 600 8.5px/1.25 Barlow, sans-serif; letter-spacing: .3px;
  text-transform: uppercase; color: var(--muted);
}

/* comandi del banditore */
.host-bar {
  display: flex; gap: 5px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--surface-2); border-top: 1px solid var(--line);
}
.host-bar button { flex: 1 1 auto; }
.host-bar button:first-child { flex: 0 0 auto; }  /* il tasto stop resta quadrato */
.manual { padding: 0 12px 12px; background: var(--surface-2); text-align: left; }

/* ---- offerta corrente: barra spezzata con il cronometro a destra ---- */
.card.bidbox {
  padding: 0; display: flex; align-items: stretch; overflow: hidden;
  border: none; border-left: 5px solid var(--gold); background: var(--surface);
}
.bid-info { flex-grow: 1; padding: 8px 13px; min-width: 0; }
/* Righe basse: sopra la piega devono starci anche i valori del giocatore e
   la propria squadra, e questo riquadro dice due numeri. */
.bidnow { font: 800 25px/1 var(--cond); }
.bidnow small { font: 600 12px Barlow, sans-serif; color: var(--muted); }
.bidder { font-size: 12px; color: var(--muted-2); margin-top: 1px; }
.clock {
  flex: none; display: flex; align-items: center;
  padding: 0 15px; background: var(--gold); color: var(--gold-ink);
  font: 800 21px var(--cond); letter-spacing: 1px;
}
.clock.hot { background: var(--red); color: #fff; }
.clock.frozen { background: var(--surface-2); color: var(--gold); border-left: 1px solid var(--line); }
.bidbox.paused { opacity: .8; }

/* ---- la tua squadra ---- */
.card.mine { border: none; border-top: 3px solid var(--tc); background: var(--surface); }
.card.mine h3 { display: flex; align-items: center; gap: 7px; }
.mine-nums { display: flex; gap: 20px; margin: 10px 0 10px; align-items: baseline; }
.mine-nums div { display: flex; align-items: baseline; gap: 5px; }
.mine-nums b { font: 800 24px/1 var(--cond); color: var(--gold); }
.mine-nums span { font-size: 10.5px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  font-size: 11.5px; padding: 4px 8px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line);
}
.chip b { font-family: var(--cond); font-size: 13px; color: var(--gold); }
.chip.empty { color: var(--muted); border-style: dashed; }
.tag.lead { background: var(--red); border-color: var(--red); color: #fff; }
.tag.bot { background: transparent; border: 1px solid var(--line-2); color: var(--muted); letter-spacing: 1.4px; }
.bot-zona { border-top: 1px solid var(--line); margin-top: 9px; padding-top: 9px; }
.warn-txt { color: var(--gold); margin-top: 8px; }

/* ---- strisce squadra ---- */
.strip {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border: none; border-left: 4px solid var(--tc);
  background: var(--surface-2); margin-bottom: 3px;
}
/* i nomi possono essere lunghi ("FollowTheLeader"): troncare, mai sfondare */
.strip .nm {
  font: 700 15px var(--cond); letter-spacing: 1.2px; text-transform: uppercase;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.strip .cr { font: 800 15px var(--cond); color: var(--gold); }

/* ---- il nome della tua squadra, in lobby ---- */
/* Non si scrive, si pesca: il tasto ne da un altro. Serve a riempire i
   secondi di attesa mentre gli altri entrano. */
.nome-mio {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface-2); border-left: 4px solid var(--tc);
  padding: 9px 11px;
}
/* Il rullo taglia il nome in arrivo mentre sale: senza, si vedrebbe entrare
   da sopra il paragrafo accanto. */
.rullo { overflow: hidden; display: block; }
.nm-grande {
  display: block;
  font: 800 22px/1.15 var(--cond); letter-spacing: 1.2px; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* L'animazione la accende app.js SOLO quando il nome cambia davvero: render()
   riscrive tutto l'HTML a ogni ridisegno, quindi una regola CSS da sola
   ripartirebbe anche quando il nome e rimasto lo stesso. */
@keyframes nome-scambio {
  0%   { opacity: 0; transform: translateY(85%); }
  65%  { opacity: 1; transform: translateY(-7%); }
  100% { opacity: 1; transform: none; }
}
.scambia { animation: nome-scambio .3s cubic-bezier(.2,.9,.3,1); }

/* Chi ha chiesto meno movimento vede i cambiamenti, non le animazioni. */
@media (prefers-reduced-motion: reduce) {
  .scambia { animation: none; }
}
.strip .ros { font-size: 11px; color: var(--muted); line-height: 1.35; }
.strip.leading { box-shadow: inset 0 0 0 1px var(--red); }

/* ---- "Le squadre": il profilo è il motivo per cui la schermata esiste ---- */
.identita {
  font: 700 12.5px var(--cond); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gold); margin-top: 6px; line-height: 1.45;
}
.tattica { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.tattica .row { align-items: flex-start; }
.tattica .field { margin-bottom: 8px; }

/* ---- quintetti ---- */
.slots { display: flex; flex-direction: column; gap: 3px; }
.slot {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: none; border-left: 4px solid var(--line-2); border-radius: 0;
  background: var(--surface-2); cursor: pointer; text-align: left; width: 100%;
}
.slot.sel { border-left-color: var(--gold); background: #2a2718; }
.slot .pos { font: 800 13px var(--cond); letter-spacing: 1px; color: var(--gold); width: 26px; flex: none; }
.slot .nm { font-weight: 600; font-size: 14px; flex: 1; }
.slot .warn { font: 700 10px var(--cond); letter-spacing: 1px; text-transform: uppercase; color: var(--bad); }
.slot .ov { font: 800 14px var(--cond); color: var(--muted); }

/* ---- playoff ---- */
.series-hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vs { font: 800 21px var(--cond); letter-spacing: 1px; text-transform: uppercase; }
.vs .muted { font-size: 15px; }
.score-big { font: 800 28px/1 var(--cond); color: var(--gold); }
.game { border-top: 1px solid var(--line); padding: 11px 0; }
.game:first-of-type { border-top: none; }
.game .line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.game .gname {
  font: 800 10.5px var(--cond); letter-spacing: 2.4px; text-transform: uppercase;
  color: #fff; background: var(--red); padding: 3px 8px;
}
.game .res { font: 800 19px var(--cond); letter-spacing: .6px; }
.game .res .w { color: var(--gold); }
.game .story { font-size: 14.5px; color: var(--muted-2); margin-top: 7px; line-height: 1.55; }
.box { margin-top: 8px; font-size: 12px; color: var(--muted); }
.box table { width: 100%; border-collapse: collapse; }
.box td { padding: 2px 0; }
.box td.n { color: var(--text); }
.box td.num { text-align: right; font-family: var(--cond); font-weight: 700; font-size: 14px; width: 34px; }

.mvp { background: var(--surface-2); border-left: 5px solid var(--gold); padding: 11px 13px; margin-top: 12px; }
.mvp .t { font: 800 10px var(--cond); letter-spacing: 2.6px; text-transform: uppercase; color: var(--gold); }
.mvp .n { font: 800 22px var(--cond); letter-spacing: .6px; text-transform: uppercase; margin-top: 1px; }

.why { margin-top: 14px; }
.why h3 { border-left: 4px solid var(--red); padding-left: 9px; }
.why li { margin: 0 0 8px 18px; font-size: 14.5px; color: var(--muted-2); line-height: 1.5; }

/* Il campione sta in cima alla pagina a finale chiusa. Prima finiva in
   mezzo allo scroll, sopra la card della finale e sotto tutto il resto. */
.champ {
  text-align: center; padding: 18px 16px 16px; margin-bottom: var(--gap);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 209, 102, .22), transparent 62%),
    linear-gradient(180deg, #1a1608, #0e0f14);
  border: 1px solid #5a4a1c; border-top: 3px solid var(--gold);
  color: #fff;
}
.champ .trofeo { display: block; margin: 0 auto 4px; filter: drop-shadow(0 0 14px rgba(255, 209, 102, .45)); }
.champ .t { font: 800 11px var(--cond); letter-spacing: 3.4px; text-transform: uppercase; color: var(--gold); }
.champ .n { font: 800 40px/1 var(--cond); letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
.champ .small { margin-top: 6px; color: var(--muted-2); }
.champ .rosa { margin-top: 7px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

.tag {
  display: inline-block; font: 700 10.5px var(--cond); letter-spacing: 1.6px; text-transform: uppercase;
  padding: 4px 8px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--muted);
}
.banner {
  border-left: 5px solid var(--gold); background: #2a2413; color: var(--gold);
  padding: 10px 12px; font-size: 13.5px; margin-bottom: var(--gap);
}
.banner.err { border-left-color: var(--red); background: #2a1216; color: #ffb3bb; }

.log { max-height: 190px; overflow-y: auto; font-size: 13px; }
.log div { padding: 5px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; }
.log div:last-child { border-bottom: none; }

details summary {
  cursor: pointer; font: 700 12px var(--cond); letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); padding: 5px 0;
}

.reset-zone { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---- albo d'oro ---- */
.albo { display: flex; flex-direction: column; gap: 3px; }
.albo-riga {
  display: flex; align-items: baseline; gap: 7px; padding: 8px 11px;
  background: var(--surface-2); border-left: 4px solid var(--tc);
}
.albo-riga .nm { font: 700 15px var(--cond); letter-spacing: 1.2px; text-transform: uppercase; }
.albo-riga .dot { align-self: center; }
.albo-riga b { font: 800 19px var(--cond); color: var(--gold); }

/* ---- barra dei rilanci, fissa in fondo ---- */
/* --vv-bottom lo calcola app.js dal viewport VISIVO: su iOS il viewport di
   layout si estende dietro la barra di Safari, e senza questo scostamento
   i tasti restano tagliati a metà sotto la toolbar. Vale 0 ovunque altro. */
.bidbar {
  position: fixed; left: 0; right: 0; bottom: var(--vv-bottom, 0px); z-index: 30;
  background: var(--surface); border-top: 3px solid var(--red);
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 26px rgba(0, 0, 0, .5);
  transition: bottom .12s ease-out;
}
.bidrow { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; max-width: 700px; margin: 0 auto; }
.bidrow + .bidrow { margin-top: 6px; }
.bidrow .who {
  display: flex; align-items: center; gap: 5px;
  flex: 0 1 auto; max-width: 96px; min-width: 0;
  font: 700 12px var(--cond); letter-spacing: 1.2px; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bidrow .who .dot { flex: none; }
.bidbtn {
  flex: 1; min-height: 54px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r);
  color: var(--text); padding: 6px 4px;
}
.bidbtn span:first-child { font: 800 21px/1 var(--cond); }
.bidbtn small { font: 600 10.5px Barlow, sans-serif; color: var(--muted); }
/* Il salta sta fra i rilanci: e l'altra cosa che puoi fare con questo
   giocatore. Stretto, perche e un simbolo e un conteggio, non una frase. */
.bidbtn.skip {
  flex: 0 0 52px; font-size: 19px; line-height: 1;
  border-color: var(--line-2); color: var(--muted-2);
}
.bidbtn.skip.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.bidbtn.skip.on small { color: var(--gold-ink); }
.bidbtn.allin { background: var(--red); border-color: var(--red); }
.bidbtn.allin span:first-child { font-size: 15px; letter-spacing: 1.4px; }
.bidbtn.allin small { color: rgba(255, 255, 255, .85); }
.bidbtn.allin.armed { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.bidbtn.allin.armed small { color: var(--gold-ink); }
.bidbtn:disabled small { display: none; }
.flatnote {
  flex: 1; text-align: center; font-size: 13px; color: var(--muted);
  padding: 14px 8px; background: var(--surface-2);
}
.flatnote.lead { color: var(--gold); font-weight: 700; }
.skiprow {
  max-width: 700px; margin: 7px auto 0; display: flex; align-items: center;
  gap: 9px; justify-content: center;
}
.skipbtn {
  padding: 7px 12px; background: transparent; border: 1px dashed var(--line-2);
  border-radius: var(--r); color: var(--muted-2);
  font: 700 11px var(--cond); letter-spacing: 1.6px; text-transform: uppercase;
}
.skipbtn b { color: var(--gold); font-size: 13px; margin-left: 3px; }
.skipbtn.on { border-style: solid; border-color: var(--gold); color: var(--gold); }
.skiprow.finiti {
  font: 700 10.5px var(--cond); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--red); opacity: .9;
}

/* spazio sotto il contenuto: la barra è fixed e altrimenti coprirebbe il fondo.
   Include lo scostamento della toolbar, così anche l'ultima riga resta leggibile. */
.bidbar-spacer { height: calc(124px + var(--vv-bottom, 0px)); }
.bidbar-spacer.tall { height: calc(190px + var(--vv-bottom, 0px)); }

/* L'azione che chiude una schermata lunga sta anche lei in fondo allo
   schermo, non in fondo alla pagina. Con quattro squadre la schermata dei
   quintetti e lunghissima: si leggeva la classifica in cima e poi toccava
   scorrere oltre quattro quintetti, quattro campi e quattro allenatori per
   trovare il tasto. */
.azione-fissa {
  position: fixed; left: 0; right: 0; bottom: var(--vv-bottom, 0px); z-index: 30;
  background: var(--surface); border-top: 3px solid var(--red);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 26px rgba(0, 0, 0, .5);
  transition: bottom .12s ease-out;
}
.azione-fissa > * { max-width: 700px; margin-left: auto; margin-right: auto; }
.azione-spacer { height: calc(84px + var(--vv-bottom, 0px)); }

/* Il selettore di squadra: compare solo quando chi ospita ne ha in mano più di
   tre. Scorre in orizzontale, così dodici squadre non alzano la barra. */
.bidpick {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 7px; margin-bottom: 7px;
  border-bottom: 1px solid var(--line); max-width: 700px; margin-left: auto; margin-right: auto;
  scrollbar-width: none;
}
.bidpick::-webkit-scrollbar { display: none; }
.pickchip {
  flex: none; display: flex; align-items: center; gap: 5px;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r);
  color: var(--muted); padding: 7px 9px;
  font: 700 11.5px var(--cond); letter-spacing: 1.1px; text-transform: uppercase;
}
.pickchip b { font: 800 13px var(--cond); color: var(--gold); }
.pickchip.on { background: var(--tc); border-color: var(--tc); color: #0e1119; }
.pickchip.on b { color: #0e1119; }
.pickchip.out { opacity: .42; }

/* ==========================================================
   Il tabellone dell'arena
   ==========================================================

   La pagina d'ingresso non e un menu: e il tabellone appeso sopra il campo,
   e mostra una partita come quello vero. Le due squadre che scorrono non
   sono decorazione — sono i nomi veri che potresti ricevere, quindi la
   schermata insegna cosa aspettarsi prima ancora di entrare. */

.jumbo {
  background: #05060a; border: 3px solid #23293a; border-radius: 6px;
  padding: 12px 11px 13px; position: relative; overflow: hidden;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, .9);
}
/* La trama a punti del led wall: bassissimo contrasto, si sente piu che vedersi. */
.jumbo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background-image: radial-gradient(circle, rgba(0, 0, 0, .42) 1px, transparent 1.1px);
  background-size: 3px 3px;
}
.jumbo .insegna {
  text-align: center; font: 800 28px var(--cond); letter-spacing: 3px; text-transform: uppercase;
  color: #ff5b48; text-shadow: 0 0 16px rgba(255, 91, 72, .55);
  padding-bottom: 9px; border-bottom: 1px solid #1c2233; margin-bottom: 10px;
  animation: accendi .5s steps(4);
}
@keyframes accendi { 0% { opacity: 0; } 40% { opacity: .35; } 70% { opacity: .7; } 100% { opacity: 1; } }

.pannelli { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
/* Altezza fissa: i nomi vanno da "Sucio" a "Penetrazione Centrale", e senza
   un fondo il tabellone cambierebbe misura ogni volta trascinandosi dietro
   mezza pagina. */
.pan {
  background: #0b0e15; border: 1px solid #202737; padding: 11px 8px;
  text-align: center; min-height: 96px; display: flex; flex-direction: column;
}
.pan .lab {
  font: 700 9.5px var(--cond); letter-spacing: 2.2px; text-transform: uppercase; color: var(--muted);
}
.pan .flap { flex: 1; align-content: center; margin-top: 5px; }
.pan.casa .flap span { color: var(--gold); }
.pan.ospiti .flap span { color: #6ee7ff; border-color: #24384a; }

.clock24 {
  display: grid; place-items: center; min-width: 58px;
  background: #0b0e15; border: 1px solid #202737;
}
.clock24 .n { font: 800 27px var(--cond); color: var(--red); text-shadow: 0 0 14px rgba(224, 27, 46, .5); }
.clock24 .lab { font: 700 8.5px var(--cond); letter-spacing: 1.6px; color: var(--muted); }

/* ---- lettere a paletta ----
   Il rumore visivo di un tabellone che cambia. Girano una per volta da
   sinistra: tutte insieme sarebbe un lampeggio, non un tabellone. */
.flap { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.flap span {
  display: grid; place-items: center; min-width: 19px; height: 27px; padding: 0 2px;
  background: #14181f; border: 1px solid #262d3d; border-radius: 2px;
  font: 800 17px var(--cond); color: var(--gold); backface-visibility: hidden;
}
.flap.mini span { min-width: 13px; height: 18px; font-size: 11.5px; }
.flap span.gira { animation: paletta .3s ease-in-out; }
@keyframes paletta {
  0% { transform: rotateX(0); }
  49% { transform: rotateX(-90deg); color: #6b5a2a; }
  51% { transform: rotateX(90deg); color: #6b5a2a; }
  100% { transform: rotateX(0); }
}

.oppure {
  display: flex; align-items: center; gap: 9px; margin: 13px 0;
  font: 700 10.5px var(--cond); letter-spacing: 2.4px; text-transform: uppercase; color: var(--muted);
}
.oppure::before, .oppure::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }

/* ---- la pallina del draft ----
   Fra un giocatore e l'altro la pallina si apre sul nome. Il tempo se lo
   prende in piu, non lo toglie ai quindici secondi per offrire: e la classe
   "aperto" la mette app.js leggendo il tempo che manca, perche e uno stato
   condiviso e non un'animazione locale. */
/* Un rettangolo basso e largo, non un quadrato: sopra la piega devono
   starci anche i valori e la propria squadra, e ogni pixel qui e uno in
   meno la. La scheda esce dalla pallina e occupa tutta la larghezza. */
.lotto-jumbo { margin-bottom: 9px; padding: 8px 9px 9px; }
.tabellina {
  display: flex; justify-content: space-between; gap: 10px;
  font: 700 10px var(--cond); letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.lotto { position: relative; min-height: 86px; display: grid; place-items: center; }
.sfera { position: relative; width: 78px; height: 78px; }
.mezzo {
  position: absolute; left: 0; width: 78px; height: 39px;
  background: radial-gradient(circle at 36% 40%, #f5924a, #cf5f1c 60%, #7d340a);
  transition: transform .3s cubic-bezier(.3, .9, .3, 1), opacity .2s linear .2s;
}
.mezzo.su { top: 0; border-radius: 78px 78px 0 0; box-shadow: inset 0 3px 8px rgba(255, 255, 255, .2); }
.mezzo.giu { top: 39px; border-radius: 0 0 78px 78px; box-shadow: inset 0 -4px 9px rgba(0, 0, 0, .4); }
.cuc { position: absolute; left: 0; top: 37px; width: 78px; height: 4px; background: #2a1405; z-index: 2; }
.lotto.aperto .mezzo.su { transform: translateY(-40px) rotate(-10deg); opacity: 0; }
.lotto.aperto .mezzo.giu { transform: translateY(40px) rotate(8deg); opacity: 0; }
.lotto.aperto .cuc { opacity: 0; transition: opacity .15s; }

/* La scheda sfonda la pallina: il nome ha bisogno di tutta la riga, la
   pallina no. */
.scheda {
  position: absolute; top: 0; bottom: 0; left: -50vw; right: -50vw;
  display: grid; place-items: center; align-content: center; text-align: center;
  opacity: 0; transform: scale(.92);
  transition: opacity .24s ease-out .18s, transform .3s cubic-bezier(.2, .9, .3, 1) .18s;
}
.lotto.aperto .scheda { opacity: 1; transform: none; }
.scheda .ruolo { font: 800 9.5px var(--cond); letter-spacing: 2px; color: var(--gold); }
.scheda .nome {
  font: 800 27px/1 var(--cond); letter-spacing: .6px; text-transform: uppercase;
  margin-top: 2px; padding: 0 8px;
}
.scheda .arche {
  font: 700 11px var(--cond); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted-2); margin-top: 3px;
}

/* Overall e tessere stanno DENTRO il tabellone: sono la scheda del
   giocatore, e tenerli in un blocco a parte voleva dire un secondo riquadro
   che diceva la stessa cosa in un altro posto. */
.ovr-riga {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  margin-top: 2px; position: relative; z-index: 2;
}
.ovr-riga span {
  font: 800 10px var(--cond); letter-spacing: 2.4px; text-transform: uppercase; color: var(--muted);
}
.ovr-riga b { font: 800 26px/1 var(--cond); color: var(--gold); text-shadow: 0 0 14px rgba(255, 209, 102, .3); }

/* Le tessere dentro al tabellone prendono i colori del led wall, o
   sembrerebbero cartoncini bianchi appoggiati sopra. */
.jumbo .attrs {
  position: relative; z-index: 2;
  margin-top: 8px; gap: 1px; background: #1c2233; border-top: 1px solid #1c2233;
}
.jumbo .attr { background: #0b0e15; padding: 6px 3px; }

/* ---- ti hanno superato ----
   Prima te ne accorgevi solo fissando il numero. Il lampo dura mezzo secondo
   e si ripete due volte: abbastanza da vederlo con la coda dell'occhio,
   troppo poco per dare fastidio a chi sta gia guardando. */
.bidbox.superato { animation: lampo .5s ease-out 2; }
@keyframes lampo {
  0%, 100% { background: var(--surface); border-color: var(--line); }
  45% { background: rgba(224, 27, 46, .26); border-color: var(--red); }
}

/* ---- il mezzo campo ----
   Le righe dicono chi gioca, il campo dice dove: un centro schierato da
   playmaker si vede a colpo d'occhio invece di doverlo leggere. */
.campo {
  position: relative; margin-top: var(--gap);
  border: 1px solid var(--line-2); overflow: hidden;
}
.campo svg { display: block; width: 100%; height: auto; }
.pedina {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: 0; border-radius: 0;
}
.pedina:disabled { opacity: 1; cursor: default; }
.pedina i {
  position: relative;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tc); color: #0e1119; border: 2px solid rgba(255, 255, 255, .85);
  font: 800 12px var(--cond); letter-spacing: .6px; font-style: normal;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .55);
}
.pedina span {
  font: 800 9.5px var(--cond); letter-spacing: .8px; text-transform: uppercase;
  color: #fff; background: rgba(6, 10, 8, .82); padding: 1px 5px; border-radius: 2px;
  white-space: nowrap; max-width: 92px; overflow: hidden; text-overflow: ellipsis;
}
.campo.vivo .pedina:not(:disabled) i { cursor: pointer; }
.pedina.scelta i { background: var(--gold); border-color: #fff; transform: scale(1.14); }
.pedina.fuori i { border-color: var(--warning); border-style: dashed; }
/* La fascia di violino si legge sul campo: e li che stai guardando. */
.pedina i[data-v]:not([data-v=""])::after {
  content: attr(data-v); position: absolute; top: -7px; right: -12px;
  font: 800 8.5px var(--cond); letter-spacing: .4px;
  background: var(--gold); color: var(--gold-ink); padding: 1px 3px; border-radius: 2px;
}

/* ==========================================================
   I playoff
   ========================================================== */

/* ---- il tabellone ----
   Una colonna per turno. Le caselle si distribuiscono in altezza, cosi una
   partita del turno dopo cade fra le due che la alimentano. Niente linee di
   collegamento: con le teste di serie l'albero non e un binario perfetto, e
   delle linee tirate a regola direbbero cose false. */
.br-jumbo { margin-bottom: var(--gap); padding: 9px 9px 10px; }
.bracket {
  position: relative; z-index: 2;
  display: flex; gap: 7px; align-items: stretch;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.bracket::-webkit-scrollbar { display: none; }
.br-col { flex: 1 0 118px; display: flex; flex-direction: column; min-width: 0; }
.br-tit {
  font: 800 9px var(--cond); letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); text-align: center; margin-bottom: 6px; white-space: nowrap;
}
.br-celle { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 6px; }
.br-cella {
  display: block; width: 100%; padding: 0; text-align: left; border-radius: 2px;
  background: #0b0e15; border: 1px solid #202737; overflow: hidden;
}
.br-cella:disabled { opacity: .55; cursor: default; }
.br-cella.viva { border-color: var(--gold); animation: br-pulsa 1.8s ease-in-out infinite; }
@keyframes br-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, .35); }
  50% { box-shadow: 0 0 0 3px rgba(255, 209, 102, 0); }
}
.br-sq {
  display: flex; align-items: center; gap: 5px; padding: 4px 6px;
  border-left: 3px solid var(--tc, transparent);
}
.br-sq + .br-sq { border-top: 1px solid #1a1f2c; }
.br-sq .dot { flex: none; }
.br-sq .nm {
  flex: 1; min-width: 0; font: 700 10.5px var(--cond); letter-spacing: .6px; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-2);
}
.br-sq b { font: 800 12px var(--cond); color: var(--muted-2); }
.br-sq.vince .nm, .br-sq.vince b { color: var(--gold); }
.br-sq.perde { opacity: .45; }
.br-sq.vuota { border-left-color: transparent; }
.br-sq.vuota .nm { color: var(--muted); font-style: italic; text-transform: none; font-weight: 600; }
/* La casella del campione, in fondo: e' quella a cui porta tutto il resto. */
.br-campione { flex-basis: 104px; }
.br-oro { border-color: #5a4a1c; background: #15120a; }
.br-oro .br-sq { padding: 9px 7px; }

/* ---- il perche degli accoppiamenti: utile la prima volta, poi ingombra ---- */
.po-info { margin-bottom: var(--gap); padding: 8px 11px; background: var(--surface); border-left: 3px solid var(--line-2); }
.po-info summary { font-size: 12.5px; color: var(--muted); cursor: pointer; }

/* ---- la serie chiusa, a una riga ---- */
.serie-riga {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 10px 12px; margin-bottom: 6px; text-align: left; border-radius: 0;
  background: var(--surface); border: none; border-left: 4px solid var(--tc);
}
.serie-riga .tit {
  flex: none; font: 800 9.5px var(--cond); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted);
  width: 74px;
}
.serie-riga .esito { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serie-riga .esito b { font: 800 14px var(--cond); letter-spacing: .6px; text-transform: uppercase; }
.serie-riga .mvp-mini { flex: none; font-size: 11px; color: var(--gold); }
.serie-riga .apri { flex: none; color: var(--muted); font-size: 18px; }

/* ---- i sette pallini ----
   Uno per gara, del colore di chi l'ha vinta. L'andamento si legge senza
   numeri: una rimonta da 1-3 si vede, un 4-0 anche. */
.pallini { position: relative; z-index: 2; display: flex; justify-content: center; gap: 5px; margin: 2px 0 8px; }
.pallini i { width: 9px; height: 9px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 6px var(--tc); }
.pallini i.vuoto { background: transparent; box-shadow: none; border: 1px solid #2c3346; }

/* ---- gara 7 ----
   Sul tre pari il tabellone diventa rosso: e la partita che decide tutto,
   e deve sembrarlo. */
.serie-jumbo.gara7 { border-color: var(--red); box-shadow: inset 0 0 50px rgba(0, 0, 0, .9), 0 0 22px rgba(224, 27, 46, .32); }
.serie-jumbo.gara7 .tabellina span:last-child { color: var(--red); font-weight: 800; letter-spacing: 2.4px; }

/* ---- i premi di fine serata ---- */
.premi { margin-bottom: var(--gap); }
.premi-tit {
  font: 800 11px var(--cond); letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 7px;
}
.premio {
  display: flex; align-items: center; gap: 11px; margin-bottom: 4px;
  padding: 9px 11px; background: var(--surface); border-left: 3px solid var(--tc, var(--gold));
}
.pr-ic {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #15120a; border: 1px solid #5a4a1c; color: var(--gold); font-size: 14px;
}
.pr-testo { display: flex; flex-direction: column; min-width: 0; }
.pr-tit { font: 800 9.5px var(--cond); letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); }
.pr-nome { font: 800 16px var(--cond); letter-spacing: .6px; text-transform: uppercase; margin-top: 1px; }
.pr-sq { font: 700 11px var(--cond); letter-spacing: 1px; color: var(--tc); margin-left: 4px; }
.pr-riga { font-size: 12px; color: var(--muted-2); margin-top: 1px; }
/* Il bidone: l'unico premio che nessuno vuole vincere. */
.premio.bidone { background: #1a0d10; }
.premio.bidone .pr-ic { background: #2a0e14; border-color: var(--red-deep); color: var(--bad); }
.premio.bidone .pr-tit { color: var(--bad); }

/* ---- le rivalita fra serate ---- */
.rivalita .bestia {
  font-size: 13px; padding: 7px 10px; margin-bottom: 9px;
  background: #1a0d10; border-left: 3px solid var(--red);
}
.rivalita .bestia b { color: var(--bad); }
.riv-riga {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px;
  padding: 6px 4px; border-bottom: 1px solid var(--line);
}
.riv-riga:last-of-type { border-bottom: none; }
.riv-n { font: 700 14px var(--cond); letter-spacing: .6px; text-transform: uppercase; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riv-n.destra { text-align: right; }
.riv-n.vince { color: #fff; }
.riv-n.io { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.riv-c { font: 800 17px var(--cond); color: var(--gold); white-space: nowrap; }
.riv-c i { font-style: normal; color: var(--muted); margin: 0 2px; }

.condividi { margin: 10px 0 14px; }

/* Nella lista del tavolo il nome di chi gioca non si taglia mai: se manca
   spazio cede il soprannome, che si accorcia coi puntini. */
.strip .nm { flex-shrink: 0; }
.strip [data-nome-team] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Il bonus dei pronostici in lobby. */
.bonus-btn { padding: 5px 9px; margin-left: 6px; font: 800 13px var(--cond); }
.bonus-nota b { color: var(--gold); }

/* I nomi del gruppo, all'ingresso: si entra con un tocco. */
.amici { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 auto 9px; max-width: 420px; position: relative; z-index: 2; }
.amici button { min-width: 64px; }
.amici button:disabled { opacity: .35; }
/* Il soprannome della squadra accanto al nome di chi gioca. */
.soprannome { font: 700 11px var(--cond); letter-spacing: 1px; text-transform: uppercase; color: var(--tc, var(--muted)); opacity: .85; margin-left: 4px; }
.champ .sopr, .rivela .sopr { font: 700 13px var(--cond); letter-spacing: 2px; text-transform: uppercase; color: var(--tc); margin-top: 2px; }

/* ---- i pronostici ---- */
.pron { margin: 4px 0 12px; padding: 9px 10px; background: rgba(255, 255, 255, .03); border-left: 3px solid var(--gold); }
.pron-tit { font: 800 10px var(--cond); letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
/* Il nome a sinistra, le quattro gare a destra: si sceglie con un tocco. */
.pron-riga { display: grid; grid-template-columns: 1fr repeat(4, auto); align-items: center; gap: 5px; padding: 3px 0; }
.pron-riga .nm { font: 700 13px var(--cond); letter-spacing: .5px; text-transform: uppercase; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pron-riga .nm .dot { display: inline-block; margin-right: 6px; }
.pron-riga button { padding: 5px 8px; min-width: 0; }
.pron-voci { display: flex; flex-wrap: wrap; gap: 5px 12px; }
.pron-voce { font-size: 12.5px; color: var(--muted-2); }
.pron-voce b { color: #fff; font-weight: 700; }
.pron-voce i { font-style: normal; font-weight: 800; color: var(--ok); }
.pron-voce.mancato { opacity: .55; text-decoration: line-through; text-decoration-color: var(--muted); }
.pron-cl { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 48px; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.pron-cl:last-of-type { border-bottom: none; }
.pron-cl .pos { font: 800 13px var(--cond); color: var(--muted); }
.pron-cl .nm { font: 700 14px var(--cond); letter-spacing: .6px; text-transform: uppercase; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pron-cl b { font: 800 18px var(--cond); color: var(--gold); text-align: right; }
.pron-cl.io .nm { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* ---- il momento del campione, a schermo intero ---- */
.rivela {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px;
  background: radial-gradient(ellipse at 50% 40%, rgba(40, 32, 8, .96), rgba(4, 5, 8, .97) 70%);
  animation: rivela-entra .45s ease-out; overflow: hidden; cursor: pointer;
}
@keyframes rivela-entra { from { opacity: 0; } to { opacity: 1; } }
.rivela-box { position: relative; z-index: 2; text-align: center; max-width: 420px; animation: rivela-sale .7s cubic-bezier(.2, .9, .3, 1) .1s both; }
@keyframes rivela-sale { from { opacity: 0; transform: translateY(26px) scale(.9); } to { opacity: 1; transform: none; } }
.rivela .trofeo { display: block; margin: 0 auto 8px; filter: drop-shadow(0 0 26px rgba(255, 209, 102, .6)); animation: trofeo-luce 2.4s ease-in-out infinite; }
@keyframes trofeo-luce { 50% { filter: drop-shadow(0 0 40px rgba(255, 209, 102, .85)); } }
.rivela .t { font: 800 13px var(--cond); letter-spacing: 5px; text-transform: uppercase; color: var(--gold); }
.rivela .n { font: 800 50px/1 var(--cond); letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; text-shadow: 0 0 24px rgba(255, 209, 102, .3); }
.rivela .small { margin-top: 8px; color: var(--muted-2); font-size: 14px; }
.rivela .mvp-r { margin-top: 14px; font: 700 10px var(--cond); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.rivela .mvp-r b { display: block; font: 800 22px var(--cond); letter-spacing: 1px; color: #fff; margin-top: 2px; }
.rivela .rosa { margin-top: 12px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.coriandoli { position: absolute; inset: 0; pointer-events: none; }
.coriandoli i {
  position: absolute; top: -12px; width: 7px; height: 13px; border-radius: 1px; opacity: 0;
  animation-name: coriandolo; animation-timing-function: cubic-bezier(.3, .6, .5, 1); animation-iteration-count: 2;
}
@keyframes coriandolo {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: .2; transform: translateY(108vh) rotate(540deg); }
}

@media (prefers-reduced-motion: reduce) {
  .br-cella.viva, .rivela, .rivela-box, .rivela .trofeo { animation: none; }
  .coriandoli { display: none; }
}

/* ---- chi ha finito di decidere ----
   Il bordo verde si vede scorrendo, senza dover leggere niente: e' il modo
   piu veloce per sapere chi manca in una pagina lunga quattro schede. */
.card.pronta {
  box-shadow: inset 0 0 0 2px var(--ok), 0 0 18px rgba(52, 211, 153, .12);
}
.tag.ok {
  background: var(--ok); color: #08140f;
  font: 800 9.5px var(--cond); letter-spacing: 1.6px; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--r);
}
.conferma {
  width: 100%; margin-top: var(--gap);
  background: var(--surface-2); border: 1px solid var(--line-2);
  font-family: var(--cond); font-weight: 800; font-size: 14px;
  letter-spacing: 1.4px; text-transform: uppercase;
}
.conferma.fatta { background: var(--ok); border-color: var(--ok); color: #08140f; }

/* Il conto sta appiccicato in alto: con quattro squadre si scorre a lungo,
   e chi ospita deve sapere se sta aspettando qualcuno senza rifare la
   pagina per contare i bordi verdi. */
.conta-pronti {
  position: sticky; top: 56px; z-index: 15;
  display: flex; align-items: baseline; gap: 9px;
  background: var(--surface); border-left: 4px solid var(--line-2);
  padding: 8px 12px; margin-bottom: var(--gap);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}
.conta-pronti b { font: 800 19px var(--cond); letter-spacing: 1px; }
.conta-pronti span { font-size: 12.5px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.conta-pronti.tutti { border-left-color: var(--ok); }
.conta-pronti.tutti b { color: var(--ok); }

/* ---- l'overall apre la scheda ----
   Lo scambio e la scheda sono due azioni diverse sullo stesso giocatore,
   quindi sono due tasti affiancati: dentro un pulsante non se ne puo mettere
   un altro. */
.slot-riga { display: flex; gap: 3px; align-items: stretch; }
.slot-riga .slot { flex: 1; }
.ovbtn {
  flex: none; width: 48px; border-radius: 0;
  background: var(--surface-2); border: none; border-left: 1px solid var(--line);
  color: var(--gold); font: 800 17px var(--cond); letter-spacing: .5px;
}
.ovbtn:active { background: var(--gold); color: var(--gold-ink); }

.ovr-squadra {
  display: flex; align-items: baseline; gap: 8px; margin-top: 9px;
  padding: 7px 10px; background: var(--surface-2); border-left: 3px solid var(--tc);
}
.ovr-squadra > span:first-child {
  font: 800 9.5px var(--cond); letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
}
.ovr-squadra b { font: 800 22px/1 var(--cond); color: var(--gold); }

/* ---- la scheda del giocatore ---- */
.velo {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(4, 6, 10, .78); padding: 16px;
  animation: velo-entra .16s ease-out;
}
@keyframes velo-entra { from { opacity: 0; } to { opacity: 1; } }
.scheda-pop {
  width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto;
  animation: pop-entra .2s cubic-bezier(.2, .9, .3, 1);
}
@keyframes pop-entra { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.pop-nome {
  position: relative; z-index: 2; text-align: center;
  font: 800 26px/1.04 var(--cond); letter-spacing: .6px; text-transform: uppercase; margin-top: 4px;
}
.pop-arc {
  position: relative; z-index: 2; text-align: center;
  font: 700 11px var(--cond); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted-2); margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .velo, .scheda-pop { animation: none; }
}

/* ---- il tabellone dell'attesa ----
   L'ultima schermata rimasta a card grigie. Il nome della squadra e proprio
   la cosa che si guarda mentre si aspetta: sta sulle palette, e quando lo
   cambi si ribaltano. */
.lobby-jumbo { padding: 11px 10px 12px; margin-bottom: 10px; }
.lobby-jumbo .insegna { font-size: 21px; padding-bottom: 7px; margin-bottom: 8px; }
.lobby-jumbo .tabellina { margin-bottom: 10px; }
.lobby-jumbo .flap { position: relative; z-index: 2; }
.lobby-jumbo .row { position: relative; z-index: 2; }
.lobby-jumbo input { background: #0b0e15; border-color: #202737; }

/* ---- il tabellone della serie ----
   Uno per serie: con due semifinali aperte se ne vedono due, uno sotto
   l'altro, e ognuno ha il suo tasto. */
.card.serie { padding: 10px; }
.serie-jumbo { padding: 8px 9px 10px; margin-bottom: 10px; }
.mancano { text-align: center; margin-top: 5px; }
.serie-jumbo .punteggio {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px;
  position: relative; z-index: 2;
}
.serie-jumbo .sq { text-align: center; min-width: 0; }
.serie-jumbo .pt {
  font: 800 38px/1 var(--cond); color: var(--muted-2);
}
.serie-jumbo .pt.vince { color: var(--gold); text-shadow: 0 0 18px rgba(255, 209, 102, .32); }
.serie-jumbo .sq .nm {
  font: 800 10.5px var(--cond); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--tc); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.serie-conto {
  font: 800 19px var(--cond); color: #fff; letter-spacing: 1px;
  background: #0b0e15; border: 1px solid #202737; padding: 5px 9px; white-space: nowrap;
}
.serie-conto span { color: var(--muted); margin: 0 1px; }

/* ---- i playoff, una serie alla volta ---- */
/* La striscia del torneo: sottile, la serie in corso accesa, scorre di lato. */
.torneo {
  display: flex; gap: 6px; overflow-x: auto; margin: 0 -2px var(--gap); padding: 2px 2px 4px;
  scrollbar-width: none;
}
.torneo::-webkit-scrollbar { display: none; }
.ts-chip {
  flex: 1 0 104px; min-width: 0; background: #0e1118; border: 1px solid #1f2533; padding: 4px 6px 5px;
  display: flex; flex-direction: column; gap: 1px;
}
.ts-chip.ora { border-color: var(--gold); background: #15120a; }
.ts-chip.chiusa:not(.ora) { opacity: .75; }
.ts-tit { font: 800 8.5px var(--cond); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.ts-chip.ora .ts-tit { color: var(--gold); }
.ts-sq { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ts-sq .dot { flex: none; width: 6px; height: 6px; }
.ts-sq .nm { flex: 1; min-width: 0; font: 700 11px var(--cond); letter-spacing: .4px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-sq b { font: 800 11px var(--cond); color: var(--muted-2); }
.ts-sq.vince .nm, .ts-sq.vince b { color: var(--gold); }
.ts-sq.perde { opacity: .45; }
.ts-sq.vuota .nm { color: var(--muted); font-style: italic; text-transform: none; font-weight: 600; }
.ts-oro { flex-basis: 88px; border-color: #5a4a1c; }

/* I pallini sono le gare: si toccano per rivedere quella gara. */
.pallini button.pal {
  width: 13px; height: 13px; min-width: 0; padding: 0; border-radius: 50%; border: 0;
  background: var(--tc); box-shadow: 0 0 6px var(--tc); cursor: pointer;
}
.pallini button.pal.sel { outline: 2px solid #fff; outline-offset: 2px; }
.serie.attiva .pallini i { width: 13px; height: 13px; }

/* I quintetti a confronto, ruolo per ruolo. */
.confronto { margin: 4px 0 12px; }
.cf-testa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 4px; }
.cf-testa .destra { text-align: right; }
.cf-testa span { font: 800 12px var(--cond); letter-spacing: 1px; text-transform: uppercase; color: var(--tc); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-testa .dot { display: inline-block; margin: 0 6px; }
.cf-testa i { font-style: normal; color: var(--gold); }
.cf-riga { display: grid; grid-template-columns: minmax(0, 1fr) 26px 30px 26px minmax(0, 1fr); align-items: center; gap: 4px; padding: 5px 0; border-top: 1px solid var(--line); }
.cf-n { font: 700 13px var(--cond); letter-spacing: .4px; text-transform: uppercase; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-n.destra { text-align: right; }
.cf-o { font: 800 14px var(--cond); color: var(--gold); text-align: center; }
.cf-pos { font: 800 10px var(--cond); letter-spacing: 1px; color: var(--muted); text-align: center; }
.confronto-wrap { margin-bottom: var(--gap); padding: 8px 11px; background: var(--surface); }
.confronto-wrap summary { font-size: 12.5px; color: var(--muted); cursor: pointer; }

/* La lavagna delle quote. */
.lavagna { margin: 4px 0 6px; padding: 10px; background: #0e1118; border: 1px solid #1f2533; }
.lv-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.lv-testa > span:first-child { font: 800 13px var(--cond); letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); }
.lv-tit { font: 800 10px var(--cond); letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); margin: 10px 0 5px; }
.lv-riga { display: flex; flex-direction: column; gap: 4px; margin-bottom: 7px; }
.lv-riga .nm { font: 700 12.5px var(--cond); letter-spacing: .5px; text-transform: uppercase; color: var(--tc); }
.lv-riga .nm .dot { display: inline-block; margin-right: 6px; }
.lv-q { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.qb {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); cursor: pointer;
}
.qb .qe { font: 700 12px var(--cond); letter-spacing: .5px; color: var(--muted-2); }
.qb b { font: 800 16px var(--cond); color: var(--gold); }
.qb.sel { background: var(--gold); border-color: var(--gold); }
.qb.sel .qe, .qb.sel b { color: var(--gold-ink); }
.qb.fermo { cursor: default; }
.lv-marc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.qb.mc { flex-direction: row; justify-content: space-between; padding: 7px 8px; }
.qb.mc .qe { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; text-transform: uppercase; color: var(--text); }
.qb.mc .qe .dot { display: inline-block; margin-right: 5px; width: 6px; height: 6px; }
.qb.mc b { font-size: 15px; flex: none; margin-left: 6px; }

/* La gara a schermo: si sovrascrive a ogni gara nuova. */
.gara-pan { margin: 2px 0 4px; }
.gp-tit { font: 800 11px var(--cond); letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.migliori { display: grid; gap: 3px; margin-bottom: 8px; }
.migliori > div { font-size: 13px; color: var(--muted-2); padding-left: 8px; border-left: 3px solid var(--tc); }
.migliori .dot { display: none; }
.migliori b { color: #fff; font-family: var(--cond); font-size: 15px; }
.gara-pan .story { font-size: 15px; color: var(--muted-2); line-height: 1.55; }
.gara-pan .box .dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; }
.vista-vecchia { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 8px; background: #1a1f2c; font-size: 12.5px; color: var(--muted-2); }

/* I pronostici della serie, scoperti da gara 1. */
.pron-serie { margin: 10px 0 2px; }
.serie.attiva + .pron-serie { margin: 0 0 var(--gap); padding: 2px 10px 8px; background: var(--surface); }
.pv-riga { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.pv-chi { font: 700 13px var(--cond); letter-spacing: .4px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv { color: var(--muted-2); min-width: 0; }
.pv i { font-style: normal; color: var(--gold); font-family: var(--cond); font-weight: 700; }
.pv b { color: var(--ok); font-family: var(--cond); }
.pv.mancato { opacity: .5; text-decoration: line-through; text-decoration-color: var(--muted); }
.pv.vuoto { color: var(--muted); }

/* Il riepilogo a serie chiusa. */
.riepilogo { margin-top: 10px; padding: 10px; background: #0e1118; border-left: 4px solid var(--tc); }
.rp-tit { font: 800 10px var(--cond); letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.rp-n { font: 800 26px/1.1 var(--cond); letter-spacing: .6px; text-transform: uppercase; margin: 2px 0 8px; }
.rp-n .dot { display: inline-block; margin-right: 8px; vertical-align: middle; }
.rp-c { color: var(--gold); margin-left: 6px; }
.rp-voci { display: grid; gap: 7px; }
.rp-voci > div { display: grid; grid-template-columns: 1fr; }
.rp-voci span { font: 800 9.5px var(--cond); letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.rp-voci b { font: 800 16px var(--cond); letter-spacing: .5px; text-transform: uppercase; }
.rp-voci i { font-style: normal; font-size: 12px; color: var(--muted-2); }
.riepilogo .why summary { font-size: 13px; color: var(--muted-2); cursor: pointer; margin-top: 10px; }

/* ---- il punteggio che sale ---- */
.pt.conta { color: var(--gold); }

/* Chi ha chiesto meno movimento vede i cambiamenti, non le animazioni. */
@media (prefers-reduced-motion: reduce) {
  .flap span.gira, .jumbo .insegna, .bidbox.superato { animation: none; }
  .mezzo, .scheda, .pedina i { transition: none; }
}

@media (min-width: 600px) {
  .seats { grid-template-columns: repeat(4, 1fr); }
  .attrs { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}