/* ═══════════════════════════════════════════════════════════════════════
   IBT — la diretta (/live)

   Due pagine in una: l'elenco dei tornei in diretta, che si legge col
   telefono come il resto del sito, e la DIRETTA di un torneo, pensata
   per il proiettore della sala. La diretta non scorre mai: chi lo guarda
   sta a cinque metri, e nessuno puo' toccarlo. Le card dei tavoli si
   dividono lo schermo da sole (vedi fitGrid in live-core.js), e tutto
   quello che c'e' dentro e' misurato su --u, un centesimo della loro
   altezza utile: otto tavoli o trenta, i rapporti restano gli stessi.

   I colori dei finish sono quelli che si riconoscono da lontano, uno per
   finish, e sono gli stessi nelle tacche dei punti, nelle animazioni e
   nella striscia degli ultimi finish: un lampo d'oro e' un Extreme anche
   prima di leggerlo.
   ═══════════════════════════════════════════════════════════════════════ */

/* L'attributo hidden deve vincere sui display delle classi qui sotto
   (grid, flex): senza, una card "nascosta" resterebbe in pagina. */
[hidden] { display: none !important; }

:root {
  --spin: #4C8BFF;
  --over: #B47CFF;
  --burst: #FF5A5F;
  --extreme: #F0C24B;
  --foul: #FFB020;
  --penalty: #FF8A3D;
  --live: #FF4D4F;
  --win: #F0C24B;
  --done: #3DDC97;
}

/* ── Elenco dei tornei ─────────────────────────────────────────────────── */

.lv-cover { padding-top: clamp(34px, 8vw, 72px); }

.lv-kicker-live { display: inline-flex; align-items: center; gap: 10px; }

.lv-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.6);
  animation: lv-pulse 1.6s ease-out infinite;
  flex: none;
}

@keyframes lv-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(255, 77, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0); }
}

.lv-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 16px;
  margin: 0 0 clamp(30px, 6vw, 52px);
}

.lv-tcard {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 16px;
  align-items: center;
  padding: 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 77, 79, 0.06), rgba(15, 21, 36, 0.92) 46%);
  border: 1px solid #2B3348;
  color: var(--text);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}

.lv-tcard:hover { color: var(--text); border-color: rgba(76, 139, 255, 0.55); transform: translateY(-2px); }
.lv-tcard:focus-visible { outline: 2px solid var(--blue-glow); outline-offset: 3px; }

.lv-tcard.ended { background: rgba(15, 21, 36, 0.7); }

.lv-crest {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  object-fit: cover;
  background: #141B2C;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--tech);
  font-size: 18px;
  color: var(--text-3);
  overflow: hidden;
}

.lv-tcard-title { min-width: 0; }

.lv-tcard h3 {
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.lv-tcard .lv-sub { margin: 4px 0 0; font-size: 14.5px; color: var(--text-2); }

.lv-tcard-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.lv-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.1;
}

.lv-chip.live { color: #FFD9D9; background: rgba(255, 77, 79, 0.12); border-color: rgba(255, 77, 79, 0.4); }
.lv-chip.gold { color: var(--gold); background: rgba(240, 194, 75, 0.1); border-color: rgba(240, 194, 75, 0.36); }
.lv-chip.phase { font-family: var(--tech); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

.lv-empty {
  padding: clamp(26px, 6vw, 44px);
  border-radius: var(--r-lg);
  border: 1px dashed #2B3348;
  text-align: center;
  color: var(--text-2);
  margin-bottom: clamp(30px, 6vw, 52px);
}

.lv-empty h3 { margin-bottom: 8px; }
.lv-empty .btn { margin-top: 18px; }

.lv-section-title { font-size: clamp(22px, 4.6vw, 30px); margin: 0 0 16px; }

/* ── La diretta ────────────────────────────────────────────────────────── */

body.lv-board-mode {
  padding: 0;
  background:
    radial-gradient(1200px 520px at 12% -10%, rgba(24, 41, 79, 0.75), transparent 70%),
    radial-gradient(900px 480px at 100% 110%, rgba(61, 52, 19, 0.38), transparent 70%),
    var(--ink);
}

body.lv-board-mode .nav,
body.lv-board-mode .site-footer { display: none; }

.lv-board {
  --pad: clamp(14px, 1.6vw, 62px);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--pad);
  gap: clamp(10px, 1.2vh, 26px);
}

/* Sullo schermo grande non si scorre: tutto sta nella finestra. */
.lv-board.projector { height: 100vh; height: 100dvh; overflow: hidden; }

.lv-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 2vw, 77px);
  min-height: 0;
}

.lv-ident { display: flex; align-items: center; gap: clamp(10px, 1.1vw, 43px); min-width: 0; }

.lv-ident .lv-crest {
  width: clamp(46px, 7.2vh, 156px);
  height: clamp(46px, 7.2vh, 156px);
  border-radius: clamp(12px, 1.6vh, 35px);
  flex: none;
  font-size: clamp(16px, 2.4vh, 52px);
}

.lv-ident-text { min-width: 0; }

.lv-name {
  margin: 0;
  font-size: clamp(22px, 3.7vh, 80px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lv-place {
  margin: 0.25em 0 0;
  font-size: clamp(13px, 1.9vh, 42px);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lv-phase { text-align: center; }

.lv-phase-kicker {
  display: block;
  font-family: var(--tech);
  font-size: clamp(11px, 1.6vh, 35px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--blue);
}

.lv-phase-title {
  display: block;
  margin-top: 0.2em;
  font-size: clamp(20px, 3.4vh, 74px);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.lv-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(10px, 1.3vw, 50px);
  min-width: 0;
}

.lv-live {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.45em 0.9em;
  border-radius: var(--r-pill);
  background: rgba(255, 77, 79, 0.12);
  border: 1px solid rgba(255, 77, 79, 0.45);
  font-family: var(--tech);
  font-size: clamp(11px, 1.55vh, 34px);
  letter-spacing: 0.18em;
  color: #FFD9D9;
  white-space: nowrap;
}

.lv-live.off { background: rgba(255, 176, 32, 0.12); border-color: rgba(255, 176, 32, 0.45); color: #FFE2A8; }
.lv-live.off .lv-dot { background: var(--foul); animation: none; }
.lv-live.demo { background: rgba(180, 124, 255, 0.14); border-color: rgba(180, 124, 255, 0.5); color: #E6D6FF; }
.lv-live.demo .lv-dot { background: var(--over); }
.lv-live.ended { background: rgba(240, 194, 75, 0.12); border-color: rgba(240, 194, 75, 0.45); color: var(--gold); }
.lv-live.ended .lv-dot { background: var(--gold); animation: none; }

.lv-clock {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(20px, 3.6vh, 78px);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.lv-progress {
  font-size: clamp(12px, 1.7vh, 37px);
  color: var(--text-2);
  white-space: nowrap;
}

.lv-progress b { color: var(--text); font-weight: 700; }
.lv-progress:empty { display: none; }

.lv-tools { display: flex; gap: 8px; }

/* Sul proiettore i comandi galleggiano sopra il piede, in basso a destra:
   nell'intestazione rubavano posto all'orologio, e servono solo a chi
   muove il mouse. */
.lv-board.projector .lv-tools {
  position: absolute;
  right: var(--pad);
  bottom: calc(var(--pad) + clamp(40px, 6vh, 130px));
  z-index: 30;
}

.lv-tool {
  appearance: none;
  border: 1px solid #2B3348;
  background: rgba(15, 21, 36, 0.8);
  color: var(--text-2);
  border-radius: var(--r-pill);
  padding: 0.5em 0.95em;
  font: 600 clamp(12px, 1.4vh, 31px) var(--sans);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 400ms var(--ease), color 160ms var(--ease);
}

.lv-tool:hover { color: var(--text); }
.lv-back { color: var(--blue-glow); font-weight: 600; font-size: 15px; }

/* Il mouse fermo sparisce, e con lui i comandi: sul proiettore non
   servono, e non devono coprire niente. */
body.lv-idle { cursor: none; }
body.lv-idle .lv-tool { opacity: 0; pointer-events: none; }

/* La riga d'attesa fra un turno e l'altro, e chi riposa. */
.lv-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6em 1.4em;
  min-height: 0;
  font-size: clamp(14px, 2.1vh, 46px);
  color: var(--text-2);
}

.lv-strip:empty { display: none; }

.lv-wait {
  color: var(--gold);
  font-weight: 700;
  animation: lv-breathe 2.4s ease-in-out infinite;
}

@keyframes lv-breathe { 50% { opacity: 0.55; } }

.lv-rest b { color: var(--text); }
.lv-rest .lv-label {
  font-family: var(--tech);
  font-size: 0.7em;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: 0.6em;
}

/* ── La griglia dei tavoli ─────────────────────────────────────────────── */

/* Sul proiettore la griglia prende lo spazio che resta — base 0, non
   "auto" — e ci sta dentro in assoluto: la sua altezza la decide la
   pagina, mai le card. Altrimenti card misurate un attimo prima (con la
   riga d'attesa che non c'era ancora) spingerebbero e schiaccerebbero
   l'intestazione. Intestazione, riga e piede non si stringono mai. */
.lv-head, .lv-strip, .lv-foot { flex: none; }

.lv-grid-wrap { position: relative; flex: 1 1 0; min-height: 0; }

.lv-grid {
  display: grid;
  gap: var(--gap, 16px);
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  grid-auto-rows: var(--card-h, 160px);
  align-content: center;
  justify-content: center;
}

.lv-board.projector .lv-grid { position: absolute; inset: 0; overflow: hidden; }

.lv-board.compact .lv-grid-wrap { flex: none; }
.lv-board.compact .lv-grid { align-content: start; }

/* ── Una card: un tavolo ───────────────────────────────────────────────── */

.lv-card {
  --u: 1.6px;
  --accent: var(--line);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr 1fr auto;
  gap: calc(var(--u) * 1.6);
  min-width: 0;
  padding: calc(var(--u) * 5.5) calc(var(--u) * 7);
  border-radius: calc(var(--u) * 7);
  background: linear-gradient(180deg, rgba(20, 27, 44, 0.96), rgba(12, 17, 29, 0.96));
  border: max(1px, calc(var(--u) * 0.6)) solid #232B3D;
  overflow: hidden;
  isolation: isolate;
}

/* L'entrata sta in una classe che si toglie a fine corsa: se fosse sulla
   card, ogni scossa di un Burst, finendo, la farebbe ripartire. */
.lv-card.entering { animation: lv-card-in 520ms var(--ease) both; }

@keyframes lv-card-in {
  from { opacity: 0; transform: translateY(calc(var(--u) * 6)) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.lv-card.is-live {
  border-color: rgba(255, 77, 79, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 77, 79, 0.12), 0 calc(var(--u) * 4) calc(var(--u) * 16) rgba(255, 77, 79, 0.1);
}

.lv-card.is-final { border-color: rgba(240, 194, 75, 0.6); }

.lv-card.is-finished { background: linear-gradient(180deg, rgba(16, 21, 34, 0.94), rgba(10, 14, 24, 0.94)); }

.lv-card-head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  min-width: 0;
  font-family: var(--tech);
  font-size: calc(var(--u) * 7);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  line-height: 1.1;
}

.lv-table { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-card.is-final .lv-table { color: var(--gold); }

.lv-group {
  padding: 0.25em 0.6em;
  border-radius: var(--r-pill);
  background: rgba(76, 139, 255, 0.12);
  color: var(--blue-glow);
  font-size: 0.82em;
  white-space: nowrap;
}

.lv-state {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
  font-size: 0.86em;
  color: var(--text-3);
}

.lv-state i {
  width: calc(var(--u) * 3.6);
  height: calc(var(--u) * 3.6);
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.lv-card.is-live .lv-state { color: #FF8F90; }
.lv-card.is-live .lv-state i { background: var(--live); animation: lv-blink 1.2s ease-in-out infinite; }
.lv-card.is-finished .lv-state { color: var(--done); }

@keyframes lv-blink { 50% { opacity: 0.25; } }

.lv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(var(--u) * 4);
  min-height: 0;
  transition: opacity 300ms var(--ease);
}

.lv-who { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.8); }

.lv-player {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.5);
  min-width: 0;
}

.lv-pname {
  min-width: 0;
  font-size: calc(var(--u) * 13);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lv-foul {
  flex: none;
  padding: 0.18em 0.5em;
  border-radius: var(--r-pill);
  background: rgba(255, 176, 32, 0.16);
  border: 1px solid rgba(255, 176, 32, 0.5);
  color: #FFD27A;
  font-family: var(--tech);
  font-size: calc(var(--u) * 4.6);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lv-crown {
  flex: none;
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  color: var(--win);
}

.lv-pips { display: flex; gap: calc(var(--u) * 1); height: calc(var(--u) * 2.8); }

.lv-pip {
  flex: 0 0 calc(var(--u) * 6.5);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.09);
}

.lv-pip.spin { background: var(--spin); }
.lv-pip.over { background: var(--over); }
.lv-pip.burst { background: var(--burst); }
.lv-pip.extreme { background: var(--extreme); box-shadow: 0 0 calc(var(--u) * 3) rgba(240, 194, 75, 0.55); }
.lv-pip.foulPenalty { background: var(--penalty); }

/* I numeri grandi in DM Sans e non in Orbitron: lo zero di Orbitron e'
   barrato, e da fondo sala sembra un segnale di divieto. */
.lv-score {
  font-family: var(--sans);
  font-size: calc(var(--u) * 30);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: right;
  min-width: 1.1ch;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  /* Il numero cresce verso sinistra quando rimbalza: a destra c'e' il
     bordo della card. */
  transform-origin: right center;
}

.lv-row.lead .lv-score { color: var(--text); }
.lv-card.is-scheduled .lv-score { color: var(--text-3); opacity: 0.55; }

.lv-row.won .lv-pname { color: var(--win); }
.lv-row.won .lv-score { color: var(--win); }
.lv-row.lost { opacity: 0.42; }

.lv-score.bump { animation: lv-bump 700ms var(--ease); }

@keyframes lv-bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.45); color: var(--bump, var(--text)); text-shadow: 0 0 calc(var(--u) * 10) var(--bump, transparent); }
  100% { transform: scale(1); }
}

.lv-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 3);
  font-size: calc(var(--u) * 5.6);
  color: var(--text-3);
  white-space: nowrap;
  min-width: 0;
}

.lv-card-foot > span { overflow: hidden; text-overflow: ellipsis; }

.lv-series { display: inline-flex; align-items: center; gap: 0.5em; color: var(--text-2); }

.lv-series i {
  width: calc(var(--u) * 3.2);
  height: calc(var(--u) * 3.2);
  border-radius: 50%;
  border: max(1px, calc(var(--u) * 0.5)) solid var(--text-3);
}

.lv-series i.p1 { background: var(--blue); border-color: var(--blue); }
.lv-series i.p2 { background: var(--over); border-color: var(--over); }

/* ── Le animazioni dei finish ─────────────────────────────────────────── */

.lv-fx {
  --c: var(--spin);
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  animation: lv-fx-life 1.9s var(--ease) both;
}

.lv-fx.extreme { animation-duration: 2.5s; }
.lv-fx.win { animation-duration: 2.3s; }

@keyframes lv-fx-life {
  0% { opacity: 0; }
  8% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* Il velo: copre i numeri vecchi mentre arriva il finish. */
.lv-fx::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Il primo sfondo e' per i televisori col browser vecchio, che non
     conoscono color-mix(): senza, scarterebbero tutto il velo. */
  background: rgba(4, 6, 11, 0.93);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%),
    rgba(4, 6, 11, 0.93);
  /* I nomi sotto il velo non devono leggersi: farebbero a gara con
     quello del finish. */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Il lampo d'apertura. */
.lv-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c);
  mix-blend-mode: screen;
  animation: lv-flash 520ms ease-out both;
}

@keyframes lv-flash {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

.lv-fx-text {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 1.5);
  text-align: center;
  line-height: 1;
}

.lv-fx-kind {
  font-family: var(--tech);
  font-size: calc(var(--u) * 21);
  letter-spacing: 0.04em;
  color: var(--c);
  text-transform: uppercase;
  text-shadow: 0 0 calc(var(--u) * 8) color-mix(in srgb, var(--c) 70%, transparent);
}

.lv-fx-word {
  font-family: var(--tech);
  font-size: calc(var(--u) * 7.5);
  letter-spacing: 0.5em;
  margin-right: -0.5em;
  color: var(--text);
  text-transform: uppercase;
}

.lv-fx-who {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: calc(var(--u) * 1.5);
  font-size: calc(var(--u) * 8);
  font-weight: 700;
  color: var(--text);
  max-width: 92%;
}

.lv-fx-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lv-fx-pts {
  flex: none;
  padding: 0.1em 0.45em;
  border-radius: var(--r-pill);
  background: var(--c);
  color: #04060B;
  font-family: var(--tech);
}

/* Spin: un anello che gira, la scritta che arriva girando. */
.lv-fx-ring {
  position: absolute;
  z-index: 1;
  width: calc(var(--u) * 150);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 18%, color-mix(in srgb, var(--c) 85%, white) 30%, transparent 46%, transparent 64%, color-mix(in srgb, var(--c) 70%, transparent) 78%, transparent 92%);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%, #000 64%, transparent 66%);
  mask: radial-gradient(circle, transparent 54%, #000 56%, #000 64%, transparent 66%);
  animation: lv-spin-ring 1.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes lv-spin-ring {
  0% { transform: rotate(0deg) scale(0.5); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: rotate(900deg) scale(1.05); opacity: 0; }
}

.lv-fx.spin .lv-fx-text { animation: lv-spin-in 1.7s var(--ease) both; }

@keyframes lv-spin-in {
  0% { transform: rotate(-200deg) scale(0.2); opacity: 0; }
  28% { transform: rotate(8deg) scale(1.06); opacity: 1; }
  38% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(0deg) scale(1); }
}

/* Over: la scritta entra di slancio e vola fuori dal bordo, come il bey
   che esce dallo stadium. */
.lv-fx-streaks {
  position: absolute;
  z-index: 1;
  inset: -10% -40%;
  background: repeating-linear-gradient(180deg, transparent 0 calc(var(--u) * 7), color-mix(in srgb, var(--c) 55%, transparent) calc(var(--u) * 7) calc(var(--u) * 7.8));
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  animation: lv-streaks 1.8s linear both;
}

.lv-fx.from-2 .lv-fx-streaks { animation-name: lv-streaks-rev; }

@keyframes lv-streaks {
  0% { transform: translateX(-30%) skewX(-24deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(30%) skewX(-24deg); opacity: 0; }
}

@keyframes lv-streaks-rev {
  0% { transform: translateX(30%) skewX(24deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(-30%) skewX(24deg); opacity: 0; }
}

.lv-fx.over .lv-fx-text { animation: lv-over-in 1.8s cubic-bezier(0.3, 0.8, 0.3, 1) both; }
.lv-fx.over.from-2 .lv-fx-text { animation-name: lv-over-in-rev; }

@keyframes lv-over-in {
  0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  22% { transform: translateX(6%) skewX(6deg); opacity: 1; }
  32% { transform: translateX(0) skewX(0); }
  74% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(140%) skewX(-22deg); opacity: 0; }
}

@keyframes lv-over-in-rev {
  0% { transform: translateX(120%) skewX(18deg); opacity: 0; }
  22% { transform: translateX(-6%) skewX(-6deg); opacity: 1; }
  32% { transform: translateX(0) skewX(0); }
  74% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-140%) skewX(22deg); opacity: 0; }
}

/* Burst: il bey si apre, e i pezzi volano. */
.lv-fx-shards { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; }

.lv-fx-shards i {
  position: absolute;
  width: calc(var(--u) * var(--s, 7));
  height: calc(var(--u) * var(--s, 7) * 0.62);
  background: var(--c);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  opacity: 0;
  animation: lv-shard 1.25s cubic-bezier(0.15, 0.7, 0.3, 1) var(--d, 0ms) both;
}

@keyframes lv-shard {
  0% { transform: translate(0, 0) rotate(var(--r, 0deg)) scale(0.4); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r, 0deg) + 220deg)) scale(1); opacity: 0; }
}

.lv-fx.burst .lv-fx-text { animation: lv-burst-in 1.8s var(--ease) both; }

@keyframes lv-burst-in {
  0% { transform: scale(0.3); opacity: 0; filter: blur(6px); }
  16% { transform: scale(1.18); opacity: 1; filter: blur(0); }
  26% { transform: scale(0.96); }
  34% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* Extreme: onda d'urto, schegge d'oro, la scritta che cade dall'alto. */
.lv-fx-wave {
  position: absolute;
  z-index: 1;
  width: calc(var(--u) * 60);
  aspect-ratio: 1;
  border-radius: 50%;
  border: calc(var(--u) * 2.4) solid var(--c);
  opacity: 0;
  animation: lv-wave 1.4s cubic-bezier(0.1, 0.6, 0.3, 1) var(--d, 0ms) both;
}

@keyframes lv-wave {
  0% { transform: scale(0.1); opacity: 1; }
  100% { transform: scale(4.2); opacity: 0; border-width: 1px; }
}

.lv-fx.extreme .lv-fx-text { animation: lv-extreme-in 2.4s var(--ease) both; }

@keyframes lv-extreme-in {
  0% { transform: scale(2.8); opacity: 0; filter: blur(10px); letter-spacing: 0.4em; }
  14% { transform: scale(0.94); opacity: 1; filter: blur(0); letter-spacing: 0; }
  22% { transform: scale(1.04); }
  30% { transform: scale(1); }
  100% { transform: scale(1); }
}

.lv-fx.extreme .lv-fx-kind {
  background: linear-gradient(100deg, #FFF3C4 0%, var(--extreme) 35%, #FF9F0A 65%, #FFF3C4 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lv-shine 1.6s linear 0.3s both;
}

@keyframes lv-shine { from { background-position: 100% 0; } to { background-position: -120% 0; } }

/* La scossa della card: Burst ed Extreme si sentono. */
.lv-card.shake { animation: lv-shake 520ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
.lv-card.shake-hard { animation: lv-shake-hard 720ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }

@keyframes lv-shake {
  10%, 90% { transform: translate(-1px, 0); }
  20%, 80% { transform: translate(3px, -1px); }
  30%, 50%, 70% { transform: translate(-5px, 1px); }
  40%, 60% { transform: translate(5px, 0); }
}

@keyframes lv-shake-hard {
  10%, 90% { transform: translate(-2px, 1px) rotate(-0.3deg); }
  20%, 80% { transform: translate(6px, -2px) rotate(0.4deg); }
  30%, 50%, 70% { transform: translate(-9px, 2px) rotate(-0.6deg); }
  40%, 60% { transform: translate(9px, -1px) rotate(0.6deg); }
}

/* Fallo e penalita': piu' piccoli, non sono finish. */
.lv-fx.foul::before { background: rgba(4, 6, 11, 0.5); }
.lv-fx.foul .lv-fx-kind { font-size: calc(var(--u) * 15); }
.lv-fx.foul .lv-fx-text,
.lv-fx.foulPenalty .lv-fx-text { animation: lv-pop 1.6s var(--ease) both; }
.lv-fx.foulPenalty .lv-fx-kind { font-size: calc(var(--u) * 15); }

@keyframes lv-pop {
  0% { transform: scale(0.6); opacity: 0; }
  18% { transform: scale(1.06); opacity: 1; }
  28% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* La vittoria: oro, e il nome di chi passa. */
.lv-fx.win .lv-fx-kind { font-size: calc(var(--u) * 17); letter-spacing: 0.1em; }
.lv-fx.win .lv-fx-text { animation: lv-pop 2.2s var(--ease) both; }

/* Sullo schermo grande, l'Extreme lo vede tutta la sala. */
.lv-banner {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 20;
  width: min(86vw, 1500px);
  transform: translate(-50%, -50%);
  padding: clamp(18px, 3vh, 65px) clamp(24px, 4vw, 154px);
  border-radius: clamp(20px, 3vh, 65px);
  text-align: center;
  pointer-events: none;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(240, 194, 75, 0.28), transparent 60%),
    rgba(8, 10, 16, 0.94);
  border: 2px solid rgba(240, 194, 75, 0.7);
  box-shadow: 0 0 120px rgba(240, 194, 75, 0.35), 0 30px 90px rgba(0, 0, 0, 0.7);
  animation: lv-banner 2.6s var(--ease) both;
}

@keyframes lv-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); filter: blur(12px); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(0.97); filter: blur(0); }
  20% { transform: translate(-50%, -50%) scale(1); }
  82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); }
}

.lv-banner-kind {
  display: block;
  font-family: var(--tech);
  font-size: clamp(40px, 11vh, 238px);
  line-height: 1;
  background: linear-gradient(100deg, #FFF3C4 0%, var(--extreme) 35%, #FF9F0A 65%, #FFF3C4 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lv-shine 1.8s linear 0.25s both;
}

.lv-banner-who {
  display: block;
  margin-top: 0.4em;
  font-size: clamp(18px, 3.6vh, 78px);
  font-weight: 700;
  color: var(--text);
}

.lv-banner-who span { color: var(--gold); font-family: var(--tech); }

/* ── Il piede: gli ultimi finish ─────────────────────────────────────── */

.lv-foot {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 54px);
  min-height: clamp(30px, 4.6vh, 100px);
}

.lv-ticker-label {
  flex: none;
  font-family: var(--tech);
  font-size: clamp(10px, 1.3vh, 29px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-3);
}

.lv-ticker {
  display: flex;
  gap: clamp(8px, 0.8vw, 31px);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
  -webkit-mask: linear-gradient(90deg, #000 85%, transparent);
  mask: linear-gradient(90deg, #000 85%, transparent);
}

.lv-ticker li {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin: 0;
  padding: 0.4em 0.85em;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  font-size: clamp(12px, 1.75vh, 38px);
  color: var(--text-2);
  white-space: nowrap;
  animation: lv-tick-in 600ms var(--ease) both;
}

.lv-ticker li b { color: var(--text); }
.lv-ticker li i { width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--c); flex: none; }
.lv-ticker li em { color: var(--c); font-style: normal; font-weight: 700; }

@keyframes lv-tick-in {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: none; }
}

.lv-pages { display: flex; gap: 6px; flex: none; }
.lv-pages i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.lv-pages i.on { background: var(--blue); }

.lv-url {
  flex: none;
  font-family: var(--tech);
  font-size: clamp(11px, 1.5vh, 33px);
  letter-spacing: 0.08em;
  color: var(--text-3);
}

/* ── Messaggi e podio ─────────────────────────────────────────────────── */

.lv-message {
  flex: 1 1 auto;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
  padding: 40px 16px;
}

.lv-message h2 { font-size: clamp(28px, 5.4vh, 117px); max-width: 18em; }
.lv-message p { font-size: clamp(16px, 2.2vh, 48px); max-width: 30em; margin: 0; }
.lv-message .btn { margin-top: 10px; }

.lv-podium {
  flex: 1 1 auto;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(14px, 3vh, 65px);
  text-align: center;
  min-height: 0;
}

.lv-champion-kicker {
  font-family: var(--tech);
  font-size: clamp(14px, 2.4vh, 52px);
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
}

.lv-champion {
  font-size: clamp(40px, 8vh, 173px);
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(100deg, #FFF3C4 0%, var(--gold) 40%, #FF9F0A 70%, #FFF3C4 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lv-shine 3.6s linear infinite;
  overflow-wrap: anywhere;
}

.lv-steps {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(10px, 2vw, 77px);
  /* Una larghezza vera: dentro una griglia centrata, il 100% sarebbe
     quello del contenuto, e i gradini si stringerebbero sui nomi. */
  width: min(92vw, 1100px);
}

.lv-step {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  gap: 10px;
  justify-items: center;
}

/* La foto in cornice sopra il nome. Il quadrato della cornice è una volta
   e mezza la foto, per gli ornamenti che ne escono: lo si lascia sbordare
   un poco sul nome, così la foto non resta lontana da chi è. */
.lv-step-faces {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: -2.2vh;
}

.lv-framed { display: block; }

/* Il nome va a capo invece di troncarsi: sul podio si legge per intero. */
.lv-step-name {
  font-size: clamp(16px, 2.8vh, 61px);
  font-weight: 700;
  line-height: 1.1;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}

.lv-step-block {
  width: 100%;
  display: grid;
  place-items: center;
  border-radius: 18px 18px 6px 6px;
  font-family: var(--tech);
  font-size: clamp(26px, 6vh, 130px);
  color: #04060B;
}

.lv-step.p1 .lv-step-block { height: clamp(70px, 14vh, 302px); background: linear-gradient(180deg, #FFE38A, var(--gold)); }
.lv-step.p2 .lv-step-block { height: clamp(52px, 10vh, 216px); background: linear-gradient(180deg, #F2F5FA, #AEB8C9); }
.lv-step.p3 .lv-step-block { height: clamp(40px, 7vh, 151px); background: linear-gradient(180deg, #F2B98A, #C8763C); }

/* ── Telefono e finestre strette ──────────────────────────────────────── */

.lv-board.compact {
  --pad: 16px;
  padding-bottom: 28px;
}

.lv-board.compact .lv-head {
  grid-template-columns: 1fr;
  gap: 14px;
}

.lv-board.compact .lv-name { white-space: normal; font-size: clamp(24px, 6.6vw, 34px); }
.lv-board.compact .lv-place { white-space: normal; font-size: 15px; }
.lv-board.compact .lv-phase { text-align: left; }
.lv-board.compact .lv-phase-kicker { font-size: 11.5px; }
.lv-board.compact .lv-phase-title { font-size: 22px; }
.lv-board.compact .lv-status { justify-content: flex-start; flex-wrap: wrap; }
.lv-board.compact .lv-clock { font-size: 20px; }
.lv-board.compact .lv-strip { font-size: 15px; justify-content: flex-start; }
.lv-board.compact .lv-foot { display: none; }
.lv-board.compact .lv-tool.fs { display: none; }
.lv-board.compact .lv-banner { position: fixed; top: 40%; width: calc(100vw - 32px); }

/* ── Movimento ridotto ────────────────────────────────────────────────────
   style.css spegne ogni animazione a chi l'ha chiesto al sistema. Qui un
   finish deve comunque vedersi: resta la dissolvenza, senza moto. */

@media (prefers-reduced-motion: reduce) {
  .lv-fx { animation: lv-fx-life 1.9s ease both !important; }
  .lv-banner { animation: lv-fade 2.6s ease both !important; }
  .lv-wait { animation: none !important; }
  .lv-fx-ring, .lv-fx-streaks, .lv-fx-shards, .lv-fx-wave { display: none; }
}

@keyframes lv-fade {
  0%, 100% { opacity: 0; }
  10%, 85% { opacity: 1; }
}