/* ═════════════════════════════════════════════
   TOKENS
   ═════════════════════════════════════════════ */
:root {
  --bg: #fafbfc;
  --bg-deep: #f1f3f5;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eef0f3;
  --text: #0a0a0a;
  --text-soft: #404040;
  --muted: #737373;
  --muted-2: #a3a3a3;
  --border: rgba(10,10,10,0.08);
  --border-2: rgba(10,10,10,0.14);
  --ink: #0a0a0a;
  --ink-2: #1a1a1a;

  --yellow: #FFD60A;
  --yellow-deep: #f4c800;
  --yellow-dim: rgba(255,214,10,0.16);
  --surface-y: rgba(255,214,10,0.10);
  --border-y: rgba(255,214,10,0.35);

  --blue: #1d4ed8;
  --blue-deep: #1e40af;
  --blue-soft: rgba(29,78,216,0.08);

  --live: #dc2626;
  --live-soft: rgba(220,38,38,0.10);
  --green: #16a34a;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --mono: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;

  --gutter: 16px;

  /* Logo landscape "CALCIO DELLA TUSCIA LIVE" con sfondo trasparente,
     usato solo dentro l'app. Icone PWA e favicon usano ancora la versione
     quadrata con sfondo blu (cdt-logo.png / icon-192.png). */
  --logo-img: url("/icons/cdt-logo-header.png");
  --logo-ratio: 3/1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #d1d5db; -webkit-text-size-adjust: 100%; }
body {
  background: #d1d5db;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'tnum';
  letter-spacing: -0.005em;
}
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; padding: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
input { font: inherit; }

::selection { background: var(--yellow); color: #0a0a0a; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ═════════════════════════════════════════════
   APP FRAME — device preview on desktop, fullscreen on mobile
   ═════════════════════════════════════════════ */
/* Impianto "a schermo": il telaio è alto quanto la finestra e a scorrere è
   soltanto il contenuto, non la pagina. Intestazione, linguette e barra in
   basso sono righe fisse di questa colonna: stanno dove stanno perché è la
   loro posizione nel foglio, non perché siano ancorate alla finestra.
   È il modo per avere la barra sempre in fondo su iPhone — vedi la nota su .bn.

   100vh su iPhone conta anche la parte coperta dalle barre di sistema:
   "dvh" è l'altezza davvero visibile. La riga con vh resta come ripiego
   per i browser che non conoscono dvh. */
.app-frame {
  max-width: 414px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,0.18);
}
.app-frame > .head,
.app-frame > .view-tabs { flex: 0 0 auto; }
/* L'unica parte che scorre */
.app-frame > .views {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
@media (max-width: 480px) {
  body { background: var(--bg); }
  .app-frame { max-width: 100%; box-shadow: none; }
}
@media (min-width: 481px) {
  body { padding: 24px 0; }
  /* Su schermi larghi il telaio è una "cornice" staccata dai bordi: la sua
     altezza deve togliere lo spazio sopra e sotto, altrimenti sfora e la barra
     in fondo finisce sotto il bordo dello schermo. */
  .app-frame {
    border-radius: 36px;
    overflow: hidden;
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
  }
}

/* ═════════════════════════════════════════════
   HEADER
   ═════════════════════════════════════════════ */
/* SOLO l'header dell'app (figlio diretto di .app-frame): il selettore
   generico ".head" acchiappava anche le righe <div class="row head"> delle
   tabelle, rendendole sticky sopra tutto — era la causa delle sovrapposizioni */
.app-frame > .head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 10px var(--gutter) 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.head .h-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.head .h-top > .h-auth:first-child { justify-self: start; }
.head .h-top > .brand-mark { justify-self: center; }
.head .h-top > .h-right-cluster { justify-self: end; }
.head .h-right-cluster { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.head .h-auth {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease;
}
.head .h-auth:hover { background: var(--surface-2); border-color: var(--border-2); }
.head .h-auth.h-auth-spacer { visibility: hidden; pointer-events: none; border: 0; }
.head .h-refresh { color: var(--text); }
.head .h-refresh svg { width: 20px; height: 20px; }
.head .h-refresh.is-spinning svg { animation: h-refresh-spin 0.7s linear; }
@keyframes h-refresh-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ═════════════════════════════════════════════
   PARTITE IN ELENCO
   Una riga per partita, con la fascia dello stato una sola volta
   per gruppo. Sostituisce le vecchie schede singole (.mc).
   ═════════════════════════════════════════════ */
.ml-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.ml-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
  cursor: pointer;
  position: relative;
  transition: background .15s ease;
}
.ml-row + .ml-row { border-top: 1px solid var(--border); }
/* La fascia dello stato resta, ma UNA sola per gruppo invece che per partita */
.ml-band {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 13px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  background: var(--surface-2); color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.ml-band-n { letter-spacing: .04em; opacity: .75; }
/* La data sta dentro la fascia, in evidenza: è l'informazione che si cerca */
.ml-band-d { font-weight: 800; letter-spacing: .06em; }


/* Il gruppo delle partite in corso ha lo stesso "vestito" del riquadro live
   della home: fondo rosato, bordo rosso e la striscia che scorre in cima.
   Una partita in diretta si deve riconoscere sempre allo stesso modo. */
.ml-list.ml-live-box {
  background: linear-gradient(180deg, #fff 0%, #fef2f2 100%);
  border-color: color-mix(in srgb, var(--live) 25%, transparent);
  box-shadow: 0 10px 30px -8px rgba(220,38,38,0.18), 0 0 0 3px rgba(220,38,38,0.05);
  position: relative;
}
.ml-list.ml-live-box::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--live) 0%, #ef4444 50%, var(--live) 100%);
  background-size: 200% 100%;
  animation: liveStripe 3s linear infinite;
  z-index: 2;
}
.ml-list.ml-live-box .ml-row { background: transparent; }
.ml-list.ml-live-box .ml-row + .ml-row { border-top-color: color-mix(in srgb, var(--live) 14%, transparent); }
:root[data-theme="dark"] .ml-list.ml-live-box {
  background: linear-gradient(180deg, var(--surface) 0%, rgba(240,106,106,0.07) 100%);
}
.ml-band.fin { background: rgba(22,163,74,.14); color: #15803d; }
.ml-band.live { background: rgba(220,38,38,.12); color: var(--live, #dc2626); }
.ml-band.sosp { background: rgba(120,113,108,.12); color: #57534e; }
.ml-band.dagiocare, .ml-band.next {
  background: color-mix(in srgb, var(--champ-color, #FFD60A) 16%, var(--surface-2));
  color: var(--text-soft);
}
.ml-row:hover { background: var(--surface-2); }
/* Nomi e stemmi disposti ESATTAMENTE come nella scheda: nome verso l'esterno,
   stemma verso il centro. Stesse regole di .mc-team, per non avere due
   comportamenti diversi nella stessa app. */
.ml-row .ml-team { display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%; flex-direction: row-reverse; justify-content: flex-start; }
.ml-row .ml-team .nm { flex: 1; text-align: left; min-width: 0; line-height: 1.2; word-wrap: normal; overflow-wrap: normal; hyphens: none; -webkit-hyphens: none; }
.ml-row .ml-team.right { flex-direction: row; justify-content: flex-start; }
.ml-row .ml-team.right .nm { text-align: right; }
.ml-row .ml-team .nm {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ml-row .ml-crest { width: 25px; height: 25px; flex-shrink: 0; }

.ml-row .ml-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-family: var(--mono);
}
.ml-row .ml-mid b { font-size: 17.5px; font-weight: 800; letter-spacing: -0.02em; }
.ml-row.s-live .ml-mid b { color: var(--live); }
/* Telefoni molto stretti (iPhone piccoli di qualche anno fa): si stringe un
   filo tutto, altrimenti i nomi lunghi come "Montefiascone" vengono tagliati. */
@media (max-width: 359px) {
  .ml-row { grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); padding: 11px 7px; gap: 5px; }
  .ml-row .ml-team { gap: 5px; }
  .ml-row .ml-team .nm { font-size: 12px; }
  .ml-row .ml-crest { width: 18px; height: 18px; }
  .ml-row .ml-mid b { font-size: 16px; }
  .ml-row .ml-ora { font-size: 13.5px; }
}
.ml-row .ml-ora { font-size: 15px; font-weight: 700; color: var(--text-soft); }
.ml-row .ml-nota { font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; }
.ml-row .ml-live { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; color: var(--live, #dc2626); }
.ml-row .ml-live .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: pulse 1.4s infinite; }


/* "Problemi ad installare?" sotto la riga di installazione nei popup account:
   il banner si vede una volta sola, qui la guida resta sempre raggiungibile. */
.acc-aiuto {
  display: block;
  width: 100%;
  margin: 6px 0 2px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}
.acc-aiuto:hover { color: var(--text); }

/* Indicatore del "tira giù per aggiornare" (solo nell'app installata) */
.ptr {
  position: fixed;
  top: calc(6px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.ptr.is-on { opacity: 1; }
.ptr.is-pronto { color: var(--text); border-color: var(--text); }
.ptr svg { width: 18px; height: 18px; }
/* Mentre ricarica gira: il segno che la richiesta è partita davvero */
.ptr.is-gira svg { animation: h-refresh-spin .7s linear infinite; }
.head .h-auth.is-logged {
  background: var(--ink);
  color: #fff;
  border-color: var(--text);
  font-size: 13px;
}
.brand-mark {
  height: 60px;
  aspect-ratio: var(--logo-ratio);
  width: auto;
  background-image: var(--logo-img);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  flex-shrink: 0;
  display: inline-block;
  margin: 0 auto;
  border-radius: 0;
  max-width: 65vw;
}
@media (min-width: 1024px) { .brand-mark { height: 52px; } }
.camp-pick {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  /* Fondo PIENO + velo colorato (::before): niente color-mix, che sui
     Safari meno recenti viene scartato lasciando il box trasparente */
  background: var(--surface);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-left: 4px solid var(--champ-color, var(--text));
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .18s ease;
  text-align: left;
}
.camp-pick::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--champ-color, #000);
  opacity: .09;
  pointer-events: none;
  transition: opacity .18s ease;
}
.camp-pick .cp-name { color: var(--champ-color, var(--text)); font-size: 14px !important; }
.camp-pick .cp-sub { font-size: 11px !important; }
.camp-pick:hover::before { opacity: .16; }
.camp-pick .cp-name {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.camp-pick .cp-sub {
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 1px;
}
.camp-pick .cp-arrow { color: var(--muted); flex-shrink: 0; }
.camp-pick svg.cp-arrow {
  width: 14px; height: 14px;
  stroke: var(--muted); fill: none; stroke-width: 2.2;
}
.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-shrink: 0;
}
.icon-btn svg { width: 18px; height: 18px; stroke: var(--text); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ═════════════════════════════════════════════
   VIEW TABS (sticky) — visibili solo su tablet (720-1023)
   Mobile: nascoste, la bottom-nav e il drawer fanno da nav
   Desktop ≥1024: nascoste, la sidebar sx fa da nav
   ═════════════════════════════════════════════ */
.view-tabs {
  position: sticky;
  top: 57px;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 2px;
  padding: 6px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 719px) {
  .view-tabs { display: none; }
}
.view-tabs::-webkit-scrollbar { display: none; }
.view-tab {
  flex-shrink: 0;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.view-tab:active { background: var(--surface-2); }
.view-tab.is-active { color: var(--text); font-weight: 700; }
.view-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 12px; right: 12px;
  height: 3px;
  background: var(--yellow);
  border-radius: 2px 2px 0 0;
}
.view-tab .vt-live {
  width: 6px; height: 6px;
  background: var(--live);
  border-radius: 50%;
  animation: pulse 1.4s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(220,38,38,0.55); }
  70% { box-shadow: 0 0 0 7px rgba(220,38,38,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}

/* Stagger entrance animations sulle view attive */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.view.is-active .camp-hero { animation: fadeUp .45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.view.is-active .live-now { animation: fadeUp .45s .08s cubic-bezier(0.22, 1, 0.36, 1) both; }
.view.is-active .qa-grid > * { animation: fadeUp .35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.view.is-active .qa-grid > *:nth-child(1) { animation-delay: .14s; }
.view.is-active .qa-grid > *:nth-child(2) { animation-delay: .18s; }
.view.is-active .qa-grid > *:nth-child(3) { animation-delay: .22s; }
.view.is-active .qa-grid > *:nth-child(4) { animation-delay: .26s; }
.view.is-active .qa-grid > *:nth-child(5) { animation-delay: .30s; }
.view.is-active .qa-grid > *:nth-child(6) { animation-delay: .34s; }
.view.is-active .qa-grid > *:nth-child(7) { animation-delay: .38s; }
.view.is-active .qa-grid > *:nth-child(8) { animation-delay: .42s; }
.view.is-active .qa-grid > *:nth-child(9) { animation-delay: .46s; }
.view.is-active .block { animation: fadeUp .45s .35s cubic-bezier(0.22, 1, 0.36, 1) both; }
/* Widget sidebar dx stagger */
.side-r .wg { animation: fadeUp .4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.side-r .wg:nth-child(1) { animation-delay: .10s; }
.side-r .wg:nth-child(2) { animation-delay: .18s; }
.side-r .wg:nth-child(3) { animation-delay: .26s; }
.side-r .wg:nth-child(4) { animation-delay: .34s; }
@media (prefers-reduced-motion: reduce) {
  .view.is-active *, .side-r .wg { animation: none !important; }
}

/* Risultato di una partita IN CORSO: rosso e lampeggiante, così si distingue
   a colpo d'occhio da un risultato finale. Un respiro lento, non un
   lampeggio nervoso: deve attirare l'occhio, non dare fastidio. */
@keyframes live-battito { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }
.live-now .ln-score,
.ml-row.s-live .ml-mid b,
.mc .mc-score .sc.live,
.ms-score.is-live .sc-h,
.ms-score.is-live .sc-a,
.ms-score.is-live .sc-sep {
  color: var(--live);
  animation: live-battito 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .live-now .ln-score,
  .ml-row.s-live .ml-mid b,
  .mc .mc-score .sc.live,
  .ms-score.is-live .sc-h,
  .ms-score.is-live .sc-a,
  .ms-score.is-live .sc-sep { animation: none; }
}

/* ═════════════════════════════════════════════
   VIEWS
   ═════════════════════════════════════════════ */
.views { padding: 0; }
.view { display: none; padding: 16px var(--gutter) 8px; }
.view.is-active { display: block; }

/* Titoli di sezione sobri. Erano fasce colorate alte 112 px per scrivere due
   parole: su un telefono valevano due partite l'una. Restano riconoscibili —
   barretta nel colore del campionato, testo forte — senza fare da insegna. */
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 9px;
  padding: 0 2px;
  gap: 12px;
  position: relative;
}
.section-title h2 {
  /* Maiuscolo: corpo più piccolo e lettere più distanziate, altrimenti le
     maiuscole si impastano. Occupa meno e si legge come un'etichetta. */
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--text);
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  text-transform: uppercase;
}
.section-title h2 .accent {
  display: inline-block;
  width: 4px; height: 15px;
  background: var(--champ-color, var(--yellow));
  border-radius: 99px;
  margin-right: 0;
  vertical-align: middle;
  flex-shrink: 0;
}
.section-title .see-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
}
.section-title .see-all:hover { text-decoration: underline; }

/* Block headings (Marcatori, Mercato, Statistiche, Highlights, Archivio) */
.block > h2 {
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 900;
  letter-spacing: -0.035em;
  color: var(--text);
  line-height: 1.05;
  margin: 8px 0 18px;
  padding: 16px 18px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--champ-color, #FFD60A) 28%, transparent) 0%,
    color-mix(in srgb, var(--champ-color, #FFD60A) 10%, transparent) 55%,
    transparent 100%);
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--champ-color, #FFD60A) 35%, transparent);
  display: flex;
  align-items: center;
  gap: 14px;
}
.block > h2 .accent {
  display: inline-block;
  width: 8px; height: 34px;
  background: linear-gradient(180deg, var(--champ-color, var(--yellow)) 0%,
    color-mix(in srgb, var(--champ-color, var(--yellow-deep)) 75%, #000) 100%);
  border-radius: 5px;
  box-shadow: 0 3px 14px -2px color-mix(in srgb, var(--champ-color, #FFD60A) 65%, transparent);
  flex-shrink: 0;
}
.section-title .see-all {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
}

/* ═════════════════════════════════════════════
   VIEW: CAMPIONATO (home/overview)
   ═════════════════════════════════════════════ */
.camp-hero {
  background:
    radial-gradient(1000px 600px at 95% -10%, color-mix(in srgb, var(--champ-color, #FFD60A) 30%, transparent), transparent 55%),
    radial-gradient(700px 400px at -20% 110%, color-mix(in srgb, var(--champ-color, #3b82f6) 18%, transparent), transparent 55%),
    linear-gradient(140deg, #060606 0%, #16161a 100%);
  color: #fff;
  border-radius: 22px;
  /* più basso: era 28/26, il riquadro rubava schermo alle partite */
  padding: 20px 22px 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 22px 50px -18px rgba(10,10,10,0.45), 0 8px 18px -10px color-mix(in srgb, var(--champ-color, #000) 35%, transparent);
  isolation: isolate;
}
.camp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.022) 0 14px, transparent 14px 28px);
  pointer-events: none;
  z-index: 0;
}
.camp-hero::after {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 90% 20%, color-mix(in srgb, var(--champ-color, #FFD60A) 22%, transparent) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
  animation: heroGlow 8s ease-in-out infinite alternate;
}
@keyframes heroGlow {
  0%   { transform: translate(0,0); opacity: 1; }
  100% { transform: translate(-3%, 2%); opacity: 0.8; }
}
.camp-hero > * { position: relative; z-index: 1; }

/* Il riquadro grande È il selettore del campionato: in home la pillola in
   alto diceva la stessa identica cosa e mangiava spazio per niente.
   Perché si capisca che è un comando e non una decorazione: la scritta
   "Cambia campionato" per esteso, la freccina, il dito e la risposta al tocco. */
.camp-hero[role="button"] { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.camp-hero[role="button"]:active { transform: scale(.988); }
.camp-hero[role="button"]:focus-visible { outline: 3px solid var(--champ-color, #FFD60A); outline-offset: 3px; }
.ch-cambia {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.ch-cambia svg { width: 15px; height: 15px; }
.camp-hero[role="button"]:hover .ch-cambia { background: rgba(255,255,255,0.22); }

/* In home la pillola in alto sparisce: il suo compito lo fa il riquadro.
   Nelle altre sezioni il riquadro non c'è, quindi la pillola resta. */
.app-frame:has(.view[data-view="camp"].is-active) > .head > .camp-pick { display: none; }
/* Silhouette campo da calcio in background */
.camp-hero .field-bg {
  position: absolute;
  right: -8%;
  bottom: -10%;
  width: 55%;
  height: 180%;
  opacity: 0.06;
  z-index: 0;
  transform: rotate(8deg);
  pointer-events: none;
}
.camp-hero .field-bg svg { width: 100%; height: 100%; }
.camp-hero .ch-eye {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champ-color, var(--yellow));
  background: rgba(255,255,255,0.12); /* ripiego per Safari senza color-mix */
  background: color-mix(in srgb, var(--champ-color, #fff) 18%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.camp-hero h1 {
  font-size: clamp(23px, 4.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: 5px;
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--champ-color, #fff) 50%, #fff) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 30px color-mix(in srgb, var(--champ-color, #000) 18%, transparent);
}
@media (min-width: 1024px) { .camp-hero h1 { font-size: clamp(30px, 3.2vw, 44px); } }
.camp-hero .ch-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}
.camp-hero .ch-stats {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.camp-hero .chs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.camp-hero .chs + .chs::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 6px; bottom: 6px;
  width: 1px;
  background: rgba(255,255,255,0.08);
}
.camp-hero .chs .num {
  font-family: var(--sans);
  font-size: clamp(26px, 4.5vw, 36px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) { .camp-hero .chs .num { font-size: clamp(32px, 3vw, 46px); } }
.camp-hero .chs .lbl {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Live banner card */
.live-now {
  margin-top: 18px;
  background: linear-gradient(180deg, #fff 0%, #fef2f2 100%);
  border: 1px solid color-mix(in srgb, var(--live) 25%, transparent);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px -8px rgba(220,38,38,0.20), 0 0 0 4px rgba(220,38,38,0.05);
}
.live-now::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--live) 0%, #ef4444 50%, var(--live) 100%);
  background-size: 200% 100%;
  animation: liveStripe 3s linear infinite;
}
@keyframes liveStripe {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.live-now::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(220,38,38,0.10) 0%, transparent 50%);
  pointer-events: none;
}
.live-now > * { position: relative; z-index: 1; }
.live-now .ln-head .lbl {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}
.live-now .ln-head {
  padding: 11px 14px;
  background: var(--live-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(220,38,38,0.16);
}
.live-now .ln-head .dot {
  width: 8px; height: 8px;
  background: var(--live);
  border-radius: 50%;
  animation: pulse 1.4s ease-out infinite;
}
.live-now .ln-head .lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--live);
}
.live-now .ln-head .min {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--live);
}
.live-now .ln-row {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.live-now .ln-row + .ln-row { border-top: 1px solid var(--border); }
.live-now .team { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; flex-direction: row-reverse; justify-content: flex-start; }
.live-now .team .name { flex: 1; text-align: left; min-width: 0; line-height: 1.2; word-wrap: normal; overflow-wrap: normal; hyphens: none; -webkit-hyphens: none; }
.live-now .team.right { flex-direction: row; justify-content: flex-start; }
.live-now .team.right .name { text-align: right; }
.live-now .team .crest {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  flex-shrink: 0;
}
.live-now .team .name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.015em;
  min-width: 0;
}
.live-now .ln-score {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  /* Il risultato di una partita in corso si legge a colpo d'occhio: rosso */
  color: var(--live);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  justify-content: center;
  padding: 0 4px;
}

/* Quick actions grid — 3 col su mobile, 6 col su tablet/desktop */
.qa-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Scorciatoie in una riga sola. Scorre di lato se non ci stanno: meglio
   scorrere con il dito che rubare mezzo schermo a live e risultati.
   Su computer NON si vedono: lì la colonna di sinistra è sempre a schermo e
   ha già le stesse identiche voci, quindi sarebbero solo rumore. */
.qa-row {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.qa-row::-webkit-scrollbar { display: none; }
/* Su computer NON si vedono: la colonna di sinistra è sempre a schermo e ha
   già le stesse identiche voci, quindi sarebbero solo rumore.
   Va DOPO la regola qui sopra, altrimenti "display:flex" la sovrascrive. */
@media (min-width: 1024px) { .qa-row { display: none; } }
.qa-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  /* Pastiglia colorata per intero: il colore è quello della sezione, così si
     riconosce prima dal colore che leggendo. */
  background: var(--qa-c, var(--surface));
  border: none;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--qa-t, #fff);
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s ease, transform .12s ease;
}
.qa-chip:hover { filter: brightness(1.08); }
.qa-chip:active { transform: scale(.97); }
/* Niente tondino dietro l'icona: su un fondo gia pieno diventava un disco
   slavato e l'icona chiara dentro non si staccava piu. Il disegno sta
   direttamente sul colore, dove il contrasto e massimo. */
.qa-chip .ico {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: none;
  color: var(--qa-t, #fff);
}
.qa-chip .ico svg { width: 17px; height: 17px; }
@media (min-width: 560px) { .qa-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; } }
.qa-tile .ico.ico-blue   { background: rgba(59,130,246,0.12); color: var(--blue); }
.qa-tile .ico.ico-red    { background: rgba(220,38,38,0.12); color: var(--live); }
.qa-chip:has(.ico-red)    { --qa-c: #dc2626; --qa-t: #fff; }
.qa-tile .ico.ico-green  { background: rgba(22,163,74,0.12); color: #16a34a; }
.qa-chip:has(.ico-green)  { --qa-c: #16a34a; --qa-t: #fff; }
.qa-tile .ico.ico-yellow { background: rgba(255,214,10,0.20); color: #b89f00; }
.qa-chip:has(.ico-yellow) { --qa-c: #FFD60A; --qa-t: #0a0a0a; }
.qa-tile .ico.ico-purple { background: rgba(124,58,237,0.12); color: #7c3aed; }
.qa-chip:has(.ico-purple) { --qa-c: #7c3aed; --qa-t: #fff; }
.qa-tile .ico.ico-amber  { background: rgba(245,158,11,0.14); color: #b45309; }
.qa-tile .ico.ico-teal   { background: rgba(20,184,166,0.12); color: #0d9488; }
.qa-tile .ico.ico-pink   { background: rgba(236,72,153,0.12); color: #db2777; }
.qa-tile .ico.ico-slate  { background: rgba(71,85,105,0.12); color: #475569; }
.qa-tile .ico svg { stroke: currentColor !important; }
.qa-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  cursor: pointer;
}
.qa-tile:hover {
  transform: translateY(-2px);
  border-color: var(--border-2);
  box-shadow: 0 8px 20px -8px rgba(10,10,10,0.18);
  background: var(--surface);
}
.qa-tile:active { background: var(--surface-2); transform: translateY(0); }
.qa-tile .ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--surface-y);
  display: grid; place-items: center;
}
.qa-tile .ico svg { width: 16px; height: 16px; stroke: var(--text); fill: none; stroke-width: 2; }
.qa-tile .lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Mini standings table (for home) */
.mini-std {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.mini-std .row {
  display: grid;
  grid-template-columns: 22px 28px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
}
.mini-std .row + .row { border-top: 1px solid var(--border); }
.mini-std .row.head {
  background: var(--surface-2);
  padding: 7px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.mini-std .pos {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}
.mini-std .pos.top { color: var(--yellow-deep); font-weight: 700; }
.mini-std .pos.up { color: var(--blue); }
.mini-std .crest-mini {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
}
.mini-std .name {
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  word-wrap: normal;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
  min-width: 0;
}
.mini-std .pg {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.mini-std .pt {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

/* Top scorer card */
.scorer-card {
  background: linear-gradient(135deg, var(--yellow) 0%, var(--yellow-deep) 100%);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.scorer-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 110px; height: 110px;
  background: radial-gradient(circle, rgba(10,10,10,0.10), transparent 70%);
  pointer-events: none;
}
.scorer-card .sc-img {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.scorer-card .sc-meta { flex: 1; min-width: 0; }
.scorer-card .sc-eye {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.6);
}
.scorer-card .sc-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 1px 0 2px;
}
.scorer-card .sc-team {
  font-size: 11px;
  font-weight: 600;
  color: rgba(10,10,10,0.7);
}
.scorer-card .sc-goals {
  text-align: right;
  flex-shrink: 0;
}
.scorer-card .sc-goals .n {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.scorer-card .sc-goals .l {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.6);
  margin-top: 2px;
}


/* ═════════════════════════════════════════════
   VIEW: CALENDARIO
   ═════════════════════════════════════════════ */
.gn-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter) 12px;
  scroll-snap-type: x mandatory;
}
.gn-strip::-webkit-scrollbar { display: none; }
.gn-pill {
  flex-shrink: 0;
  scroll-snap-align: center;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  min-width: 64px;
  line-height: 1.2;
  cursor: pointer;
}
.gn-pill .num {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.gn-pill .lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 1px;
}
.gn-pill.done { background: var(--surface-2); }
.gn-pill.done .num { color: var(--muted); }
.gn-pill.is-active {
  background: var(--ink);
  border-color: var(--text);
}
.gn-pill.is-active .num { color: var(--yellow); }
.gn-pill.is-active .lbl { color: rgba(255,214,10,0.7); }

.cal-day {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-day::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--yellow);
  border-radius: 50%;
}

.match-list { display: flex; flex-direction: column; gap: 8px; }

/* Day picker (strip pillole giornate) */
.day-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.day-picker .dp-arrow {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.day-picker .dp-arrow:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-2); }
.day-picker .dp-arrow:disabled { opacity: 0.3; cursor: default; }
.day-picker .dp-arrow svg { width: 16px; height: 16px; }
.day-picker .dp-strip {
  flex: 1;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px;
  scroll-behavior: smooth;
}
.day-picker .dp-strip::-webkit-scrollbar { display: none; }
.day-picker .dp-chip {
  flex-shrink: 0;
  min-width: 52px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  scroll-snap-align: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  position: relative;
  font-variant-numeric: tabular-nums;
}
.day-picker .dp-chip:hover { background: var(--surface-2); }
.day-picker .dp-chip.done { color: #16a34a; border-color: rgba(22,163,74,0.30); background: rgba(22,163,74,0.06); }
.day-picker .dp-chip.has-live { color: var(--live); border-color: rgba(220,38,38,0.35); background: rgba(220,38,38,0.06); }
.day-picker .dp-chip.now { color: var(--text); border-color: var(--text); }
.day-picker .dp-chip.past { color: var(--muted); }
.day-picker .dp-chip.next { color: var(--blue); border-color: rgba(29,78,216,0.20); }
.day-picker .dp-chip.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--text);
  transform: scale(1.05);
  box-shadow: 0 4px 12px -4px rgba(10,10,10,0.30);
}
.day-picker .dp-chip.is-active.has-live { background: var(--live); border-color: var(--live); box-shadow: 0 4px 12px -4px rgba(220,38,38,0.40); }
.day-picker .dp-chip .dp-live {
  width: 6px; height: 6px;
  background: var(--live);
  border-radius: 50%;
  animation: pulse 1.4s infinite;
}
.day-picker .dp-chip.is-active .dp-live { background: #fff; }

/* Day header fullwidth nel viewRes — versione principale attuale */
.day-hd-full {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.day-hd-full.day-now {
  background: linear-gradient(90deg, rgba(220,38,38,0.10) 0%, rgba(220,38,38,0.02) 100%);
  border-color: color-mix(in srgb, var(--live) 22%, transparent);
}
.day-hd-full.day-next {
  background: linear-gradient(90deg, rgba(29,78,216,0.07) 0%, rgba(29,78,216,0.01) 100%);
  border-color: color-mix(in srgb, var(--blue) 20%, transparent);
}
.day-hd-full .day-hd-l { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.day-hd-full .day-num {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
  letter-spacing: -0.02em;
  background: rgba(0,0,0,0.05);
  padding: 5px 11px;
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.day-hd-full.day-now .day-num { background: var(--live); color: #fff; }
.day-hd-full.day-next .day-num { background: var(--blue); color: #fff; }
.day-hd-full .day-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.day-hd-full .day-state {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  order: 2;
}
.day-hd-full.day-now .day-state { color: var(--live); }
.day-hd-full.day-next .day-state { color: var(--blue); }
.day-hd-full .day-date {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  text-transform: capitalize;
  order: 1;
  line-height: 1.1;
}
.day-hd-full .day-n {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  text-align: right;
}

/* Day block in res view (vecchio multi-section, kept per fallback) */
.day-block { margin: 18px 0 26px; }
.day-block:first-of-type { margin-top: 8px; }
.day-block .day-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.day-block.day-now .day-hd {
  background: linear-gradient(90deg, rgba(220,38,38,0.10) 0%, rgba(220,38,38,0.02) 100%);
  border-color: color-mix(in srgb, var(--live) 22%, transparent);
}
.day-block.day-past .day-hd { background: var(--surface-2); }
.day-block.day-next .day-hd {
  background: linear-gradient(90deg, rgba(29,78,216,0.07) 0%, rgba(29,78,216,0.01) 100%);
  border-color: color-mix(in srgb, var(--blue) 20%, transparent);
}
.day-block .day-hd-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.day-block .day-num {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  letter-spacing: -0.02em;
  background: rgba(0,0,0,0.05);
  padding: 4px 10px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.day-block.day-now .day-num { background: var(--live); color: #fff; }
.day-block.day-next .day-num { background: var(--blue); color: #fff; }
.day-block .day-meta {
  display: flex; flex-direction: column;
  min-width: 0;
}
.day-block .day-state {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.day-block.day-now .day-state { color: var(--live); }
.day-block.day-next .day-state { color: var(--blue); }
.day-block .day-date {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.day-block .day-n {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.mc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  position: relative;
}
.mc[data-match]:hover {
  transform: translateY(-1px);
  border-color: var(--border-2);
  box-shadow: 0 6px 18px -8px rgba(10,10,10,0.18);
}
/* LIVE card: stessa drammaticità del live-now */
.mc:has(.mc-head.live) {
  background: linear-gradient(180deg, #fff 0%, #fef2f2 100%);
  border-color: color-mix(in srgb, var(--live) 25%, transparent);
  box-shadow: 0 10px 30px -8px rgba(220,38,38,0.18), 0 0 0 3px rgba(220,38,38,0.05);
}
.mc:has(.mc-head.live)::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--live) 0%, #ef4444 50%, var(--live) 100%);
  background-size: 200% 100%;
  animation: liveStripe 3s linear infinite;
  z-index: 2;
}
/* Partita conclusa: la scheda è verde tutta, non solo in cima. Scorrendo un
   calendario si capisce da lontano cosa è già stato giocato, senza leggere. */
.mc:has(.mc-head.fin) {
  background: rgba(22,163,74,0.09);
  border-color: color-mix(in srgb, #16a34a 30%, transparent);
}
.mc:has(.mc-head.fin)::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #16a34a 0%, #15803d 100%);
  z-index: 2;
}
.mc:has(.mc-head.dagiocare)::before, .mc:has(.mc-head.next)::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 2;
  /* il colore lo mette la regola più sotto, insieme a quello della fascia */
}
.mc .mc-head {
  padding: 8px 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.mc .mc-head .stadio { color: var(--text); font-weight: 700; }
/* Partita sospesa: grigio-arancio, risultato parziale non valido per la classifica */
.mc:has(.mc-head.sosp) {
  background: linear-gradient(180deg, var(--surface) 0%, rgba(120,113,108,0.05) 100%);
  border-color: rgba(120,113,108,0.28);
}
.mc:has(.mc-head.sosp)::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, #78716c 0 8px, transparent 8px 14px);
  z-index: 2;
}
.mc .mc-head.sosp { background: rgba(120,113,108,0.12); color: #57534e; }
.mc .mc-head.sosp .stadio { color: #57534e; }
.mc .mc-score .sc.sosp { color: #78716c; }

/* Matita di modifica rapida sulla card (solo utenti loggati) */
.mc .mc-edit {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 3;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity .12s, color .12s, border-color .12s;
}
.mc .mc-edit svg { width: 15px; height: 15px; }
.mc .mc-edit:hover { opacity: 1; color: var(--text); border-color: var(--border-2); }
.mc.has-edit .mc-head { padding-right: 46px; }

.mc .mc-head.live {
  background: var(--live-soft);
  color: var(--live);
}
.mc .mc-head.live .stadio { color: var(--live); }
.mc .mc-head.fin {
  background: rgba(22,163,74,0.10);
  color: #15803d;
}
.mc .mc-head.fin .stadio { color: #15803d; }

/* Le partite già giocate hanno la fascia più densa: quando il campionato è
   verde, "finale" e "da giocare" avrebbero la stessa tinta, e l'intensità
   diventa il secondo segnale dopo la spunta. */
.mc .mc-head.fin { background: rgba(22,163,74,0.20); }

/* Segni di stato che non dipendono dal colore.
   Servono perché la fascia prende la tinta del campionato: con un campionato
   verde, "finale" e "da giocare" avrebbero lo stesso colore e il colpo d'occhio
   si perderebbe. La spunta e le barrette restano leggibili qualunque tinta sia.
   Il "live" ha già il suo pallino pulsante, non serve aggiungere altro. */
.mc .mc-head.fin > span:first-child::before {
  content: '✓';
  margin-right: 6px;
  font-weight: 900;
  font-size: 11px;
}
.mc .mc-head.sosp > span:first-child::before {
  content: '❙❙';
  margin-right: 6px;
  font-size: 8px;
  letter-spacing: -1px;
  vertical-align: 1px;
}

/* Le partite ANCORA DA GIOCARE prendono la tinta del campionato che si sta
   guardando: sono lo stato "neutro", e il colore serve a far sentire che si
   è dentro quel campionato.
   Finite, in corso e sospese NON la prendono di proposito: verde, rosso e
   grigio sono segnali di stato, e in una giornata mista sono ciò che permette
   di capire a colpo d'occhio cosa è già successo e cosa no.
   Il testo viene scurito perché alcuni campionati hanno tinte chiare. */
.mc .mc-head.dagiocare,
.mc .mc-head.next {
  background: color-mix(in srgb, var(--champ-color, #f59e0b) 10%, transparent);
  color: color-mix(in srgb, var(--champ-color, #b45309) 82%, #000);
}
.mc .mc-head.dagiocare .stadio,
.mc .mc-head.next .stadio {
  color: color-mix(in srgb, var(--champ-color, #b45309) 82%, #000);
}
.mc:has(.mc-head.dagiocare)::before,
.mc:has(.mc-head.next)::before {
  background: color-mix(in srgb, var(--champ-color, #f59e0b) 45%, transparent);
}
.mc .mc-head .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--live);
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  animation: pulse 1.4s ease-out infinite;
}
.mc .mc-body {
  padding: 14px 10px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
}
.mc .mc-team { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; flex-direction: row-reverse; justify-content: flex-start; }
.mc .mc-team .name { flex: 1; text-align: left; min-width: 0; line-height: 1.2; word-wrap: normal; overflow-wrap: normal; hyphens: none; -webkit-hyphens: none; }
.mc .mc-team.right { flex-direction: row; justify-content: flex-start; }
.mc .mc-team.right .name { text-align: right; }
.mc .mc-team .crest {
  width: 26px; height: 26px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  flex-shrink: 0;
}
.mc .mc-team .name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.mc .mc-score {
  text-align: center;
  flex-shrink: 0;
  min-width: 38px;
  padding: 0 2px;
}
.mc .mc-score .ts {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.mc .mc-score .sc {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.mc .mc-score .sc.live { color: var(--live); }
.mc .mc-score .sc.ft { color: var(--text); }
.mc .mc-score .ft-lbl {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.12em;
}

/* ═════════════════════════════════════════════
   VIEW: RISULTATI
   ═════════════════════════════════════════════ */
.filter-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter)) 14px;
  padding: 0 var(--gutter);
}
.filter-bar::-webkit-scrollbar { display: none; }
.fb-chip {
  flex-shrink: 0;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fb-chip.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--text);
}
.fb-chip.live {
  border-color: rgba(220,38,38,0.3);
  color: var(--live);
}
.fb-chip.live .dot {
  width: 6px; height: 6px;
  background: var(--live);
  border-radius: 50%;
  animation: pulse 1.4s ease-out infinite;
}
.fb-chip .count {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  margin-left: 3px;
}

/* ═════════════════════════════════════════════
   VIEW: CLASSIFICHE
   ═════════════════════════════════════════════ */
.std-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-bottom: 16px;
}
.std-tabs button {
  flex: 1;
  padding: 8px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border-radius: 999px;
}
.std-tabs button.is-active {
  background: var(--ink);
  color: #fff;
}

.std-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.std-table .row {
  display: grid;
  /* pos · logo · nome · PG · V · N · P · DR · PT
     Le colonne dei numeri sono strette apposta: lo spazio serve al nome
     della squadra, che deve leggersi per intero (va a capo, non si taglia). */
  grid-template-columns: 20px 24px minmax(0, 1fr) 24px 20px 20px 20px 26px 28px;
  align-items: center;
  gap: 2px;
  padding: 10px 10px;
  font-size: 12px;
}
.std-table .stat.dr { font-variant-numeric: tabular-nums; font-weight: 600; }
.std-table .stat.dr-pos { color: #16a34a; }
.std-table .stat.dr-neg { color: var(--live, #dc2626); }
.std-table .row + .row { border-top: 1px solid var(--border); }
.std-table .row.head {
  background: var(--surface-2);
  padding: 8px 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.std-table .row .pos {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.std-table .row .stat.pt { font-weight: 700; color: var(--text); font-size: 15px; }
.std-table .row .crest-x {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
}
.std-table .row .nm {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.015em;
  /* Il nome va a capo invece di essere tagliato con i puntini: "Polisportiva
     Viterbo" o "Nuova Pescia Romana" si devono leggere per intero. */
  white-space: normal;
  line-height: 1.2;
  overflow-wrap: anywhere;
  padding-right: 2px;
}
.std-table .row .stat {
  font-family: var(--mono);
  font-size: 12px;
  text-align: center;
  color: var(--muted);
  font-weight: 600;
}
.std-table .row .stat.pt {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
/* Zone della classifica: fascia colorata a sinistra + riga appena tinta.
   I numeri (quante promosse, playoff, playout, retrocesse) si impostano in
   gestione per ogni campionato: qui ci sono solo i colori.
   Dopo le regole del podio, così su una riga in zona vince il colore
   della zona e la medaglia resta. */
.std-table .row.zona {
  position: relative;
  padding-left: 8px;
}
.std-table .row.zona::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--zona-c);
}
.std-table .row.zona {
  background: color-mix(in srgb, var(--zona-c) 9%, transparent);
}
.std-table .row.zona-promozione { --zona-c: #16a34a; }
.std-table .row.zona-playoff { --zona-c: #2563eb; }
.std-table .row.zona-playout { --zona-c: #f59e0b; }
.std-table .row.zona-retrocessione { --zona-c: #dc2626; }

.std-legend {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.std-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.std-legend .lg::before {
  content: '';
  width: 4px; height: 14px;
  border-radius: 2px;
  background: var(--zona-c, var(--muted));
}
.std-legend .lg-promozione { --zona-c: #16a34a; }
.std-legend .lg-playoff { --zona-c: #2563eb; }
.std-legend .lg-playout { --zona-c: #f59e0b; }
.std-legend .lg-retrocessione { --zona-c: #dc2626; }

/* ═════════════════════════════════════════════
   VIEW: SQUADRE
   ═════════════════════════════════════════════ */
.team-search {
  position: relative;
  margin-bottom: 16px;
}
.team-search input {
  width: 100%;
  padding: 11px 14px 11px 38px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  color: var(--text);
}
.team-search input::placeholder { color: var(--muted); }
.team-search svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 2;
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.team-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 12px;
  position: relative;
}
.team-card .tc-crest {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  margin-bottom: 10px;
}

/* ═════════════════════════════════════════════
   CREST SVG — sostituisce le pillole colorate con sigla
   ═════════════════════════════════════════════ */
.has-svg {
  background: transparent !important;
  padding: 0 !important;
  overflow: hidden;
  display: inline-grid !important;
  place-items: stretch !important;
}
.has-svg .crest-svg,
.mini-crest .crest-svg,
.sh-team-crest .crest-svg,
.ms-crest .crest-svg { width: 100%; height: 100%; display: block; }
.crest-svg { display: block; }
.team-card.has-svg, .team-card[data-team] { cursor: pointer; transition: transform .15s ease; }
.team-card[data-team]:hover { transform: translateY(-2px); }
.team-card[data-team]:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.std-table .row[data-team] { cursor: pointer; }
.std-table .row[data-team]:hover { background: rgba(255,214,10,0.06); }
.crest[data-team], .crest-x[data-team] { cursor: pointer; }
.match-card[data-match], .mc[data-match], .live-row[data-match] { cursor: pointer; transition: background .15s ease; }
.match-card[data-match]:hover, .mc[data-match]:hover, .live-row[data-match]:hover { background: rgba(0,0,0,0.025); }
.team-card .tc-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 8px;
  min-height: 34px;
}
.team-card .tc-stats {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
}
.team-card .tc-stats .ts-pos {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
}
.team-card .tc-stats .ts-pos.top { background: var(--surface-y); color: var(--yellow-deep); }
.team-card .tc-stats .ts-pos.danger { background: var(--live-soft); color: var(--live); }
.team-card .tc-stats .ts-form {
  display: flex;
  gap: 3px;
}
.team-card .tc-stats .ts-form .f {
  width: 11px; height: 11px;
  border-radius: 50%;
  font-size: 7px;
  font-weight: 700;
  color: #fff;
  display: grid; place-items: center;
}
.team-card .tc-stats .ts-form .f.w { background: var(--green); }
.team-card .tc-stats .ts-form .f.d { background: var(--muted-2); }
.team-card .tc-stats .ts-form .f.l { background: var(--live); }

/* ═════════════════════════════════════════════
   BOTTOM NAV
   ═════════════════════════════════════════════ */
/* La barra NON è più "appiccicata" alla finestra.
   Con position:fixed su iPhone finiva a metà schermo: ogni volta che Safari
   apre o chiude la sua barra degli indirizzi l'altezza visibile cambia, e il
   sistema non ricalcolava dove andasse messa. Ci abbiamo provato con un piano
   di composizione separato e con una spinta al ridisegno: non è bastato.
   Ora è l'ultima riga di una colonna alta quanto lo schermo (vedi .app-frame):
   sta in fondo perché è lì che finisce il contenuto, non perché gliel'abbiamo
   detto. Così non può proprio spostarsi. */
.bn {
  flex: 0 0 auto;
  width: 100%;
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px 12px;
  z-index: 60;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
@media (min-width: 481px) {
  .bn { border-radius: 0 0 36px 36px; }
}
.bn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px 4px;
  border-radius: 10px;
  position: relative;
}
.bn-item svg {
  width: 22px; height: 22px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bn-item .bn-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: -0.01em;
}
.bn-item.is-active svg { stroke: var(--text); stroke-width: 2.2; }
.bn-item.is-active .bn-lbl { color: var(--text); font-weight: 700; }
.bn-item.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--yellow);
  border-radius: 0 0 3px 3px;
}
.bn-item .bn-mini {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  background: var(--live);
  color: #fff;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  min-width: 14px; height: 14px;
  border-radius: 7px;
  padding: 0 4px;
  display: grid; place-items: center;
}

/* ═════════════════════════════════════════════
   DRAWER
   ═════════════════════════════════════════════ */
.drawer-bg {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.4);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.drawer-bg.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(380px, 86%);
  height: 100vh;
  background: var(--bg);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0); }
/* Modalità drawer: campionato vs menu generale */
.drawer.is-camp-mode .dr-section--menu { display: none; }
.drawer.is-menu-mode .dr-section--camp { display: none; }
.dr-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 2;
}
.dr-close {
  width: 36px; height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: grid; place-items: center;
}
.dr-close svg { width: 16px; height: 16px; stroke: var(--text); fill: none; stroke-width: 2.2; }
.dr-section { padding: 16px 16px 0; }
.dr-section .lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.dr-list { display: flex; flex-direction: column; gap: 4px; }
.dr-list a {
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.dr-list a:hover, .dr-list a:active { background: var(--surface-2); }
#champList a[data-champ] {
  border-left: 3px solid var(--champ-c, transparent);
  padding-left: 11px;
}
.dr-list a.is-active {
  background: var(--ink);
  color: #fff;
}
.dr-list a.is-active .meta { color: var(--yellow); }
#champList a[data-champ].is-active {
  background: var(--champ-c, var(--text));
  border-left-color: var(--champ-c, var(--text));
}
#champList a[data-champ].is-active .meta { color: rgba(255,255,255,0.85); }
.dr-list a .meta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.dr-foot {
  margin-top: auto;
  padding: 18px 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}
.dr-foot .accent { color: var(--blue); font-weight: 700; }

body.drawer-open { overflow: hidden; }

/* ═════════════════════════════════════════════
   PREVIEW BANNER (visible only on desktop)
   ═════════════════════════════════════════════ */
.preview-tag {
  display: none;
}
@media (min-width: 481px) {
  .preview-tag {
    display: block;
    text-align: center;
    padding: 0 16px 20px;
    font-size: 12px;
    color: rgba(0,0,0,0.55);
    font-weight: 600;
  }
  .preview-tag .pill {
    display: inline-block;
    background: rgba(0,0,0,0.06);
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 10px;
  }
}

/* ═════════════════════════════════════════════
   CLASSIFICA MARCATORI
   ═════════════════════════════════════════════ */
.marc-block { padding: 0 var(--gutter); margin-bottom: 24px; }
.marc-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.marc-table .row {
  display: grid;
  grid-template-columns: 38px 1fr 80px 40px 50px;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.marc-table .row:last-child { border-bottom: 0; }
.marc-table .row.head {
  background: var(--surface-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
}
.marc-table .pos { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); }
.marc-table .pos.top { color: var(--yellow-deep); }
.marc-table .nm { min-width: 0; }
.marc-table .nm-name { display: block; font-weight: 600; color: var(--text); }
.marc-table .nm-team { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 2px; }
.marc-table .ruolo { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.marc-table .stat { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--text-soft); }
.marc-table .gol { font-weight: 700; color: var(--text); }
.marc-table .row[data-player] { cursor: pointer; }
.marc-table .row[data-player]:hover { background: var(--surface-2); }
.mini-crest { width: 18px; height: 18px; display: inline-grid; place-items: stretch; overflow: hidden; vertical-align: middle; flex-shrink: 0; }
.mini-crest .crest-svg { width: 100%; height: 100%; display: block; }
.mini-crest[data-team] { cursor: pointer; }
@media (max-width: 480px) {
  .marc-table .row { grid-template-columns: 32px 1fr 60px 40px; padding: 11px 12px; gap: 6px; font-size: 13px; }
  .marc-table .row .ruolo { display: none; }
  .marc-table .row.head span:nth-child(3) { display: none; }
}

/* ═════════════════════════════════════════════
   MERCATO
   ═════════════════════════════════════════════ */
.merc-block { padding: 0 var(--gutter); margin-bottom: 24px; }
.merc-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.ms-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ms-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
}
.ms-card.t-acq::before { background: #16a34a; }
.ms-card.t-ces::before { background: #dc2626; }
.ms-card.t-pre::before { background: var(--blue); }
.ms-card.t-svi::before { background: #737373; }
.ms-card .ms-lbl { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.ms-card .ms-v { display: block; font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.merc-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.merc-row {
  display: grid;
  grid-template-columns: 75px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.merc-row:last-child { border-bottom: 0; }
.merc-tag {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
  text-align: center;
}
.merc-row.t-acq .merc-tag { background: #dcfce7; color: #166534; }
.merc-row.t-ces .merc-tag { background: #fee2e2; color: #991b1b; }
.merc-row.t-pre .merc-tag { background: #dbeafe; color: #1e40af; }
.merc-row.t-svi .merc-tag { background: #e5e5e5; color: #525252; }
.merc-main { min-width: 0; }
.merc-player { font-weight: 600; color: var(--text); font-size: 14px; }
.merc-meta { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.merc-flow { display: flex; align-items: center; gap: 7px; }
.merc-flow .arrow { width: 16px; height: 16px; color: var(--muted-2); flex-shrink: 0; }
.merc-flow .muted { font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; font-weight: 600; }
.merc-flow .mini-crest { width: 30px; height: 30px; }
@media (max-width: 480px) {
  .merc-row { grid-template-columns: 64px 1fr; gap: 8px; padding: 11px 12px; }
  .merc-flow { grid-column: 2 / 3; justify-content: flex-end; margin-top: 3px; }
}

/* ═════════════════════════════════════════════
   SHEET / MODAL — bottom-up panel
   ═════════════════════════════════════════════ */
body.sheet-open { overflow: hidden; }
.sheet-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity .22s ease;
  z-index: 200;
  pointer-events: none;
}
.sheet-bg.is-active { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 201;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  transform: translateY(105%);
  transition: transform .28s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
  /* Da chiuso NON deve intercettare i click: su desktop resta centrato con
     opacity 0 e senza questa riga bloccherebbe tutta l'area centrale. */
  pointer-events: none;
}
.sheet.is-active { transform: translateY(0); pointer-events: auto; }
@media (min-width: 720px) {
  .sheet {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(680px, 92vw);
    max-height: 88vh;
    border-radius: 22px;
    transform: translate(-50%, calc(-50% + 30px));
    opacity: 0;
    transition: transform .24s ease, opacity .22s ease;
  }
  .sheet.is-active {
    transform: translate(-50%, -50%);
    opacity: 1;
    pointer-events: auto;
  }
}
.sh-grip { width: 38px; height: 4px; background: rgba(255,255,255,0.7); border-radius: 999px; margin: 9px auto 0; position: absolute; left: 50%; transform: translateX(-50%); top: 7px; z-index: 2; }
@media (min-width: 720px) { .sh-grip { display: none; } }
.sh-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.22);
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  z-index: 2;
}
.sh-close svg { width: 18px; height: 18px; }
.sh-head {
  position: relative;
  padding: 26px 22px 22px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
}
.sh-team-crest { width: 64px; height: 64px; flex-shrink: 0; }
.sh-team-crest .crest-svg { width: 100%; height: 100%; }
.sh-team-info h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin: 0; color: #fff; }
.sh-team-info p { font-size: 13px; opacity: 0.85; margin: 3px 0 0; color: #fff; }
.sh-pl-num, .sh-pl-avatar {
  width: 64px; height: 64px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 24px; font-weight: 800;
  flex-shrink: 0;
  color: #fff;
}

/* Carriera */
.carriera { display: flex; flex-direction: column; gap: 4px; }
.carr-row, .carr-tot {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease;
}
.carr-row:hover { background: var(--surface-3); }
.carr-row.carr-now {
  background: linear-gradient(90deg, rgba(255,214,10,0.14) 0%, rgba(255,214,10,0.02) 100%);
  border: 1px solid color-mix(in srgb, var(--yellow) 30%, transparent);
  padding: 9px 11px;
}
.carr-stagione { font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.carr-team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.carr-team .mini-crest { width: 22px; height: 22px; }
.carr-team .cr-nm { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carr-team .cr-now-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--yellow);
  color: #0a0a0a;
}
.carr-stats { display: flex; gap: 14px; align-items: center; }
.cs-pres, .cs-gol { font-family: var(--sans); font-weight: 700; color: var(--text); font-size: 14px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.cs-pres small, .cs-gol small { font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.carr-tot {
  background: var(--ink);
  color: #fff;
  cursor: default;
  margin-top: 6px;
}
.carr-tot .carr-stagione, .carr-tot .carr-team .cr-nm, .carr-tot .cs-pres, .carr-tot .cs-gol { color: #fff; }
.carr-tot .cs-pres small, .carr-tot .cs-gol small { color: rgba(255,255,255,0.55); }
.sh-body { padding: 18px 18px 36px; }
.sh-section { margin-top: 22px; }
.sh-section:first-child { margin-top: 0; }
.sh-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 10px;
}
.sh-text { font-size: 15px; color: var(--text-soft); }
.sh-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.sh-stat {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.sh-stat .lbl { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 3px; }
.sh-stat .v { display: block; font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sh-form { display: flex; gap: 6px; }
.sh-form .f {
  width: 26px; height: 26px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.sh-form .f.w { background: #16a34a; }
.sh-form .f.d { background: #f59e0b; color: #000; }
.sh-form .f.l { background: #dc2626; }
.sh-roster {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sh-pl {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease;
}
.sh-pl:hover { background: var(--surface-3); }
.sh-pl .pl-num { font-family: var(--mono); font-weight: 700; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.sh-pl .pl-role {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  text-align: center;
  color: #fff;
}
.pl-role-POR { background: #f59e0b; color: #000; }
.pl-role-DIF { background: #1e40af; }
.pl-role-CEN { background: #16a34a; }
.pl-role-TRE { background: #7c3aed; }
.pl-role-ATT { background: #dc2626; }
.sh-pl .pl-name { font-weight: 500; color: var(--text); font-size: 14px; }
.sh-pl .pl-gol { font-family: var(--mono); font-weight: 700; color: var(--text); font-size: 14px; display: flex; align-items: baseline; gap: 4px; }
.sh-pl .pl-gol .lbl { font-size: 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; }

/* Tuttocampo-style hero stats — Punti grandi, posizione, diff reti */
.tc-hero-stats {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.tc-hero-cell {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 12px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tc-hero-cell .tc-v {
  font-family: var(--sans);
  font-size: clamp(28px, 7vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tc-hero-cell .tc-l {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.tc-hero-cell.tc-pts {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff;
  border-color: #0a0a0a;
  position: relative;
  overflow: hidden;
}
.tc-hero-cell.tc-pts::before {
  content: '';
  position: absolute;
  inset: -50% -30% auto auto;
  width: 70%; height: 200%;
  background: radial-gradient(circle, rgba(255,214,10,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.tc-hero-cell.tc-pts .tc-v { color: var(--yellow); font-size: clamp(36px, 9vw, 48px); position: relative; z-index: 1; }
.tc-hero-cell.tc-pts .tc-l { color: rgba(255,255,255,0.7); position: relative; z-index: 1; }

/* Split casa/trasferta */
.tc-split {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.tc-split-head, .tc-split-row {
  display: grid;
  grid-template-columns: 1.5fr 28px 28px 28px 28px 32px 32px 36px;
  gap: 4px;
  padding: 10px 14px;
  align-items: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tc-split-head {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tc-split-head .tc-h-l { text-align: center; }
.tc-split-head .tc-h-l:first-child { text-align: left; }
.tc-split-row { border-top: 1px solid var(--border); }
.tc-split-row span { text-align: center; }
.tc-split-row .tc-h-l-row {
  display: flex; align-items: center; gap: 6px;
  text-align: left; font-weight: 600; color: var(--text);
}
.tc-split-row .tc-h-l-row svg { color: var(--muted); }
.tc-split-row .tc-h-pt { font-weight: 800; color: var(--text); }
.tc-split-row.tc-split-total {
  background: rgba(255,214,10,0.08);
  font-weight: 700;
}
.tc-split-row.tc-split-total .tc-h-l-row { color: var(--yellow-deep); }
.tc-split-row.tc-split-total .tc-h-pt { color: var(--text); font-size: 14px; }
@media (max-width: 480px) {
  .tc-split-head, .tc-split-row { grid-template-columns: 1fr 22px 22px 22px 22px 26px 26px 30px; gap: 2px; padding: 9px 10px; font-size: 12px; }
}

/* Staff dirigenziale */
.sh-staff { display: flex; flex-direction: column; gap: 1px; background: var(--border); border-radius: 10px; overflow: hidden; }
.sh-staff-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; padding: 10px 12px; background: var(--surface); }
.sh-staff-row .ss-role { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
.sh-staff-row .ss-name { font-size: 14px; font-weight: 600; color: var(--text); }
@media (max-width: 480px) {
  .sh-staff-row { grid-template-columns: 1fr; gap: 2px; }
}

/* Stadio */
.sh-stadium .ss-bg {
  border-radius: 12px;
  padding: 36px 20px 22px;
  /* Il colore sociale entra solo come velo leggero sulla superficie della
     scheda: prima era il fondo pieno e le squadre in bianco o in giallo
     restavano con il nome illeggibile. Testo e righe del campo seguono il
     tema, così vanno bene sia in chiaro sia in scuro. */
  background: var(--surface-2);
  background: color-mix(in srgb, var(--ss-tinta, #64748b) 16%, var(--surface-2));
  color: var(--text);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.sh-stadium .ss-pitch { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); opacity: 0.18; }
.sh-stadium .ss-nm { position: relative; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.sh-stadium .ss-nm-vuoto { color: var(--muted); font-weight: 600; }
.sh-info-line {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-soft);
}
.sh-info-line svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }

/* Auth sheet */
.auth-head {
  position: relative;
  padding: 22px 22px 20px;
  text-align: center;
  background: linear-gradient(180deg, #1e40af 0%, #1a3aa8 100%);
  color: #fff;
}
.auth-head .sh-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.18); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; z-index: 2; }
.auth-head .sh-close svg { width: 18px; height: 18px; }
.auth-head .auth-logo {
  width: 92px;
  height: auto;
  margin: 2px auto 14px;
  display: block;
  /* il logo ha un fondo suo: arrotondandolo diventa un elemento voluto
     invece di un rettangolo che stacca sul blu della testata */
  border-radius: 12px;
}
.auth-head .auth-2fa-icon { width: 52px; height: 52px; margin: 0 auto 14px; background: var(--yellow-dim); color: var(--yellow); border-radius: 14px; display: grid; place-items: center; }
.auth-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 5px; color: #fff; }
.auth-head p { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,0.72); margin: 0; padding: 0 8px; }
.auth-head p strong { color: var(--yellow); font-weight: 700; }
.auth-body { padding: 18px 16px 24px; overflow-x: clip; }
.auth-body form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.auth-field input, .auth-field select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 14px;
  color: var(--text);
  font-size: 15px;
  font-family: var(--sans);
  transition: border-color .15s ease, background .15s ease;
}
.auth-field input:focus, .auth-field select:focus {
  outline: none;
  border-color: var(--text);
  background: var(--surface);
}
.auth-field-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); }
.auth-row a { color: var(--blue); }
.auth-row a:hover { text-decoration: underline; }
.auth-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text-soft); }
.auth-check input[type=checkbox] { accent-color: var(--text); width: 16px; height: 16px; }
.auth-privacy { line-height: 1.45; }
.auth-privacy a { color: var(--blue); }
.auth-submit {
  margin-top: 6px;
  padding: 14px 18px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s ease, transform .12s ease;
}
.auth-submit:hover { background: var(--ink-2); }
.auth-submit:active { transform: scale(0.99); }
.auth-submit svg { width: 16px; height: 16px; }
.auth-secondary {
  margin-top: 4px;
  padding: 12px 16px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
  text-align: center;
}
.auth-secondary:hover { background: var(--surface-2); }
.auth-secondary strong { color: var(--blue); }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-2fa-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(29,78,216,0.06);
  border: 1px solid rgba(29,78,216,0.18);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-soft);
}
.auth-2fa-info svg { color: var(--blue); flex-shrink: 0; margin-top: 1px; }
.auth-2fa-info strong { color: var(--blue); font-weight: 700; }
.auth-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 6px; }
.auth-otp input {
  min-width: 0;
  width: 100%;
  text-align: center;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 800;
  padding: 12px 0;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  transition: border-color .15s ease, background .15s ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
@media (max-width: 380px) {
  .auth-otp { gap: 4px; }
  .auth-otp input { padding: 10px 0; font-size: 18px; }
}
.auth-otp input:focus { outline: none; border-color: var(--text); background: var(--surface); }
.auth-otp input:not(:placeholder-shown), .auth-otp input[value]:not([value=""]) {
  border-color: var(--text);
}
.edit-score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}
.edit-score .es-team { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.edit-score .es-crest { width: 56px; height: 56px; }
.edit-score .es-crest .crest-svg { width: 100%; height: 100%; }
.edit-score .es-name { font-size: 13px; font-weight: 700; text-align: center; min-height: 32px; display: flex; align-items: center; }
.edit-score .es-input {
  width: 72px;
  text-align: center;
  font-family: var(--sans);
  font-size: 36px;
  font-weight: 800;
  padding: 10px 0;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.edit-score .es-input:focus { outline: none; border-color: var(--text); background: var(--surface); }
.edit-score .es-sep { font-size: 18px; font-weight: 600; color: var(--muted); }
.edit-score .es-score-out {
  width: 72px;
  text-align: center;
  font-size: 38px;
  font-weight: 800;
  padding: 8px 0;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-variant-numeric: tabular-nums;
}
.es-helper { font-size: 12px; color: var(--muted); text-align: center; margin: -2px 0 8px; }

/* Editor marcatori/cartellini */
.em-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.em-section-h {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.em-add-row { display: flex; gap: 8px; margin-bottom: 8px; }
.em-add-row select, .em-add-row input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--text);
  font-size: 14px;
  font-family: var(--sans);
  font-weight: 600;
  min-width: 0;
}
.em-add-row select:focus, .em-add-row input:focus { outline: none; border-color: var(--text); background: var(--surface); }
.em-add-grid { display: grid; grid-template-columns: 1.6fr 70px auto; gap: 6px; }
.em-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 42px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}
.em-add-btn:hover { background: var(--ink-2); }
.em-add-btn svg { stroke: #fff; }

/* ═════════════════════════════════════════════
   EDITOR PARTITA — nuova UI passo passo
   ═════════════════════════════════════════════ */
.em-lbl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 14px 0 7px; }

/* Stato partita (chip) */
.em-status-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
.em-status-btn { background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text); font-size: 12px; font-weight: 700; padding: 10px 6px; border-radius: 10px; cursor: pointer; font-family: inherit; text-transform: uppercase; letter-spacing: 0.03em; }
.em-status-btn.sel { background: var(--ink); color: #fff; border-color: var(--ink); }
.em-status-btn.t-live.sel { background: var(--live); border-color: var(--live); }
.em-status-btn.t-finale.sel { background: #16a34a; border-color: #16a34a; }
.em-status-btn.t-sosp.sel { background: #78716c; border-color: #78716c; color: #fff; }
.em-status-btn.is-locked { opacity: 0.4; cursor: not-allowed; }
.em-hint-lock {
  margin: 8px 0 0;
  padding: 9px 11px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.4;
  color: #78350f;
}

/* Step 1: scelta squadra (2 card grandi) */
.em-team-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; min-width: 0; }
.em-team-btn { display: flex; align-items: center; gap: 8px; padding: 10px; background: var(--surface-2); border: 2px solid var(--border); border-radius: 12px; cursor: pointer; text-align: left; font-family: inherit; transition: border-color .12s, background .12s; min-width: 0; overflow: hidden; }
.em-team-btn.sel { border-color: var(--ink); background: var(--surface); }
.em-team-crest { width: 28px; height: 28px; flex-shrink: 0; }
.em-team-crest .crest-svg { width: 100%; height: 100%; }
.em-team-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; flex: 1; overflow: hidden; }
.em-team-info small { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: 0.05em; }
.em-team-info strong { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-wrap: break-word; }

/* Step 2: giocatore (select nativo migliorato) */
.em-player-select { width: 100%; padding: 12px 14px; font-size: 15px; font-weight: 600; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-family: inherit; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2.4' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; cursor: pointer; }

/* Step 3: tipo evento (chip icona) */
/* Cinque tipi di evento: Gol, Rigore, Autogol, Ammonizione, Espulsione.
   Sui telefoni molto stretti stanno su due righe invece di schiacciarsi. */
.em-type-pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
@media (max-width: 359px) {
  .em-type-pick { grid-template-columns: repeat(3, 1fr); }
}
.em-type-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 4px; background: var(--surface-2); border: 2px solid var(--border); border-radius: 12px; cursor: pointer; font-family: inherit; }
.em-type-btn svg { width: 22px; height: 22px; }
.em-type-btn span { font-size: 11px; font-weight: 700; color: var(--text); }
.em-type-btn.sel { border-color: var(--ink); background: var(--surface); }

/* Un evento già inserito si tocca per correggerlo: la riga deve dirlo */
.em-ev[data-ed-ev] { cursor: pointer; border-radius: 8px; transition: background .15s ease; }
.em-ev[data-ed-ev]:hover { background: var(--surface-2); }
/* Quello aperto nel modulo resta marcato, così si sa cosa si sta cambiando */
.em-ev.is-mod {
  background: color-mix(in srgb, var(--champ-color, #FFD60A) 22%, var(--surface));
  box-shadow: inset 3px 0 0 var(--champ-color, #FFD60A);
}
/* Mentre si modifica, il pulsante cambia faccia: non è più un "aggiungi" */
.em-add-big.is-mod { background: var(--champ-color, #FFD60A); color: #0a0a0a; }
.em-annulla-mod {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.em-annulla-mod[hidden] { display: none; }
.em-annulla-mod:hover { color: var(--text); border-color: var(--border-2); }

/* Step 4: minuto */
.em-min-row { display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px; align-items: stretch; }
.em-min-nudge { background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 10px; font-size: 22px; font-weight: 800; color: var(--text); cursor: pointer; font-family: inherit; user-select: none; }
.em-min-row input { padding: 12px 10px; font-size: 24px; font-weight: 800; text-align: center; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-family: var(--mono); }
.em-min-row input:focus { outline: none; border-color: var(--ink); }

/* Aggiungi evento (bottone grande finale) */
.em-add-big { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; margin-top: 14px; background: var(--ink); color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; letter-spacing: -0.01em; }
.em-add-big:hover { background: var(--ink-2); }
.em-add-big svg { stroke: #fff; }

/* Riga versione dentro il popup Account: da qui si controlla se l'app
   installata è aggiornata. La data si confronta a occhio con l'ora
   dell'ultimo caricamento dei file. */
.acc-versione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  color: var(--muted);
}
.acc-versione b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.acc-versione button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border-2, var(--border));
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.acc-versione button:hover { background: var(--surface-3, var(--surface-2)); }

/* Nota sul codice di verifica: informazione di servizio, non un avviso.
   Prima era un riquadro azzurro che pesava quanto i campi veri. */
.auth-nota {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.auth-nota svg { flex-shrink: 0; margin-top: 1px; }

/* "Non hai un account? Registrati": una riga di testo, non un pulsante
   grande quanto quello di accesso — l'azione principale resta una sola. */
.auth-altro {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}
.auth-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Blocchi in coda (installa app, aspetto): separati dal modulo vero */
.auth-extra {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.auth-riga {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.auth-riga:hover { background: var(--surface-3, var(--surface-2)); }
.auth-riga > svg:first-child { flex-shrink: 0; color: var(--muted); }
.auth-riga span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auth-riga b { font-size: 14px; font-weight: 700; }
.auth-riga em { font-style: normal; font-size: 12px; line-height: 1.35; color: var(--muted); }

/* dentro il modulo di accesso il selettore tema non ha bisogno del suo
   separatore: ce l'ha già il blocco che lo contiene */
.auth-extra .auth-theme { margin-top: 0; padding-top: 0; border-top: none; }

/* Stellina "apri sempre da qui", nell'elenco dei campionati.
   Vuota di contorno finché non è scelta, piena e gialla quando lo è. */
.ch-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: -6px -6px -6px 2px;   /* area cliccabile ampia senza allargare la riga */
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
}
.ch-star[hidden] { display: none; }   /* "hidden" da solo non basta contro inline-flex */

/* Numeri e stelline in colonna.
   La riga distribuisce lo spazio fra i suoi tre pezzi, quindi senza queste
   regole il numero e la stella seguono la lunghezza del nome del campionato
   e finiscono ognuno a un'altezza diversa. Il nome si prende tutto lo spazio
   che resta, il numero ha una larghezza fissa: così le colonne stanno dritte. */
#champList a[data-champ] > span:first-child { flex: 1; min-width: 0; }
#champList a[data-champ] > .meta {
  flex: 0 0 auto;
  min-width: 22px;
  text-align: right;
}
.ch-star:hover { background: var(--surface-3, var(--surface-2)); color: var(--text); }
.ch-star:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.ch-star.is-on { color: var(--yellow, #FFD60A); }
.ch-star.is-on svg { fill: currentColor; stroke: currentColor; }

/* Fascia "stai guardando una stagione passata".
   Deve distinguersi dalla stagione in corso senza sembrare un errore:
   tono neutro, non rosso. */
.arch-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 9px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}
.arch-bar svg { flex-shrink: 0; }
.arch-bar b { color: var(--text); font-weight: 700; }
.arch-bar span { flex: 1; min-width: 0; }
.arch-bar a {
  flex-shrink: 0;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
@media (max-width: 640px) {
  .arch-bar { font-size: 12.5px; padding: 8px 14px; }
}

/* ── Popup dell'account ─────────────────────────────────────────────
   Tutte le voci hanno la stessa forma: riquadro chiaro, altezza simile,
   spaziatura uguale. Prima ogni blocco aveva un suo stile e da telefono
   sembrava un elenco di cose scollegate. */
.acc-body .sh-section { padding-top: 18px; }
.acc-body .sh-section + .sh-section { padding-top: 20px; }
.acc-body .sh-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 10px;
}

/* Il selettore chiaro/scuro porta già la scritta "Aspetto": nel popup c'è
   l'intestazione di sezione, quindi la ripetizione si toglie. */
.acc-body .auth-theme .at-label { display: none; }
.acc-body .auth-theme {
  justify-content: stretch;
  /* nel popup il separatore lo fa già l'intestazione di sezione */
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.acc-body .auth-theme .at-seg { flex: 1; }
.acc-body .auth-theme .at-seg button { flex: 1; }

/* Riga generica: icona, testo (titolo + spiegazione), eventuale segno a destra */
.acc-riga {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  margin-bottom: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  font-family: inherit;
  text-align: left;
}
.acc-riga > svg:first-child { flex-shrink: 0; color: var(--muted); }
.acc-riga span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.acc-riga b { font-size: 14px; font-weight: 700; }
.acc-riga em { font-style: normal; font-size: 12px; line-height: 1.35; color: var(--muted); }
.acc-riga--azione { cursor: pointer; }
.acc-riga--azione:hover { background: var(--surface-3, var(--surface-2)); }
.acc-riga--attiva { border-color: rgba(22,163,74,.35); }
.acc-riga--attiva > svg:first-child { color: #16a34a; }
.acc-riga--ok {
  background: #f0fdf4;
  border-color: rgba(22,163,74,.25);
  color: #16a34a;
  font-size: 14px;
  font-weight: 600;
}
.acc-riga--ok > svg:first-child { color: inherit; }
.acc-riga-out { flex-shrink: 0; color: var(--muted); }

/* Permessi: una riga ciascuno, etichetta e stato affiancati.
   Restano affiancati anche sugli schermi stretti — sono due parole,
   mandarli a capo raddoppiava l'altezza del popup per nulla. */
.acc-perms {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.acc-perm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: var(--surface);
  font-size: 13.5px;
}
.acc-perm span { color: var(--text-soft, var(--muted)); }
.acc-perm b { font-weight: 700; color: #16a34a; flex-shrink: 0; }

.acc-esci {
  width: 100%;
  justify-content: center;
  background: #fef2f2;
  color: var(--live);
  border: 1px solid color-mix(in srgb, var(--live) 30%, transparent);
}

/* Collegamento al manuale d'uso, nel popup dell'account */
.acc-guida {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
}
.acc-guida:hover { background: var(--surface-3, var(--surface-2)); }
.acc-guida > svg:first-child { flex-shrink: 0; color: var(--muted); }
.acc-guida span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.acc-guida b { font-size: 14px; font-weight: 700; }
.acc-guida em {
  font-style: normal;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}
.acc-guida-out { flex-shrink: 0; color: var(--muted); }

/* Striscia "aggiornamento disponibile": discreta, mai invadente.
   Non ricarichiamo mai da soli: farlo mentre uno scrive è peggio del problema. */
.agg-banner {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 24px);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(520px, calc(100vw - 24px));
  padding: 12px 14px;
  background: var(--ink, #0a0a0a);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.32);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
}
.agg-banner.is-show { opacity: 1; transform: translate(-50%, 0); }
.agg-banner .agg-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.agg-banner .agg-txt strong { font-size: 13.5px; font-weight: 700; }
.agg-banner .agg-txt span { font-size: 11.5px; color: rgba(255,255,255,0.66); }
.agg-banner button {
  flex-shrink: 0;
  border: none;
  border-radius: 9px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.agg-banner .agg-dopo { background: transparent; color: rgba(255,255,255,0.62); }
.agg-banner .agg-dopo:hover { color: #fff; }
.agg-banner .agg-ora { background: var(--yellow, #FFD60A); color: #0a0a0a; }
@media (max-width: 720px) {
  .agg-banner { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}
/* Su telefono i tre pezzi in fila non ci stanno: il testo si stringe e i due
   pulsanti si schiacciano. Sotto i 560px il testo va sopra e i pulsanti
   occupano una riga loro, con un'altezza comoda da toccare. */
@media (max-width: 560px) {
  .agg-banner {
    flex-wrap: wrap;
    gap: 10px;
    width: calc(100vw - 24px);
    padding: 14px;
  }
  .agg-banner .agg-txt { flex: 1 1 100%; }
  .agg-banner .agg-txt strong { font-size: 14px; }
  .agg-banner .agg-txt span { font-size: 12px; }
  .agg-banner button { flex: 1; padding: 11px 12px; font-size: 13.5px; }
}

/* ── Banner cookie di GDPR Set, rivestito ────────────────────────────────
   Il loro widget lo disegna come una striscia nera in fondo allo schermo, con
   pulsanti minuti. Qui lo trasformiamo in un riquadro al centro, sopra una
   velatura, con i tre pulsanti leggibili. Serve "!important" perché il loro
   foglio di stile viene caricato dopo il nostro. */
#freegdpr-div-widget {
  top: 50% !important;
  left: 50% !important;
  bottom: auto !important;
  width: min(500px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  transform: translate(-50%, -50%);
  padding: 26px 24px 22px !important;
  background: #0a0a0a !important;
  color: #fff !important;
  border-top: none !important;
  border-radius: 16px;
  /* La velatura è un'ombra larghissima invece di un elemento a parte: così non
     viene ritagliata dallo scorrimento interno del riquadro. */
  box-shadow: 0 0 0 100vmax rgba(10, 10, 10, 0.55), 0 24px 70px rgba(0, 0, 0, 0.5);
  text-align: left !important;
  font-size: 14px;
  line-height: 1.55;
}
#freegdpr-div-widget .free-gdpr-txt {
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.82);
}
/* i tre pulsanti su una riga, con "approvo" in evidenza */
#freegdpr-div-widget .free-gdpr-button {
  margin-top: 18px;
  padding: 11px 16px !important;
  font-size: 14px !important;
  font-weight: 700;
  font-family: inherit;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
}
#freegdpr-div-widget .free-gdpr-button:hover { background: rgba(255, 255, 255, 0.18) !important; }
#freegdpr-div-widget .free-gdpr-button:first-of-type {
  background: var(--yellow, #FFD60A) !important;
  border-color: var(--yellow, #FFD60A) !important;
  color: #0a0a0a !important;
}
#freegdpr-div-widget #Gdpr-Cookie { display: block; margin-top: 14px; opacity: .5; }
@media (max-width: 480px) {
  #freegdpr-div-widget .free-gdpr-button {
    display: block !important;
    width: 100%;
    margin-top: 8px;
  }
  #freegdpr-div-widget .free-gdpr-button:first-of-type { margin-top: 18px; }
}

/* Toast globale */
.cdt-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px);
  background: #0a0a0a;
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.cdt-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.cdt-toast.t-warn { background: #b45309; }
.cdt-toast.t-info { background: #1e40af; }
@media (max-width: 720px) { .cdt-toast { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); } }

/* Banner "modifiche non salvate" in cima al form editor */
.em-unsaved-note {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin: -6px 0 10px;
  background: #fef3c7;
  color: #78350f;
  border: 1px solid #fde68a;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
}
.em-unsaved-note.is-show { display: flex; }
.em-unsaved-note svg { flex: 0 0 auto; }

/* Sticky footer per bottoni Salva / Modifica risultato */
.sh-sticky-actions {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 18px -16px -24px; /* neutralizza padding auth-body per full-bleed */
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 10;
}
.sh-sticky-actions .auth-submit,
.sh-sticky-actions .edit-action { margin-top: 0; }

.sh-sticky-edit {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 14px -18px -36px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 10;
}

.em-events { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.em-events-col {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.em-col-head {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.em-col-head .mini-crest { width: 18px; height: 18px; }
.em-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 6px 4px;
}
.em-ev {
  display: grid;
  grid-template-columns: 26px 18px 1fr 22px;
  gap: 6px;
  align-items: center;
  padding: 7px 8px;
  background: var(--surface);
  border-radius: 8px;
  font-size: 12.5px;
  border-left: 3px solid var(--border);
}
.em-ev.t-goal { border-left-color: var(--text); }
.em-ev.t-amm { border-left-color: #facc15; }
.em-ev.t-exp { border-left-color: var(--live); }
.em-ev-min { font-family: var(--sans); font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
.em-ev-nm { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.em-ev-nm small { color: var(--muted); font-weight: 500; }
.em-ev-rm {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.em-ev-rm:hover { background: rgba(220,38,38,0.10); color: var(--live); }
@media (max-width: 480px) {
  .em-events { grid-template-columns: 1fr; }
  .em-add-grid { grid-template-columns: 1fr 70px; }
  .em-add-grid .em-add-btn { grid-column: 1 / 3; justify-content: center; }
}

/* Social */
.sh-social { display: flex; flex-direction: column; gap: 6px; }
.sh-soc-row {
  display: grid;
  grid-template-columns: 28px 100px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 10px;
}
.sh-soc-row svg { width: 18px; height: 18px; color: var(--text-soft); }
.sh-soc-row .ss-l { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
.sh-soc-row .ss-v { font-size: 13.5px; color: var(--text); font-weight: 500; word-break: break-all; }
.mmr {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  margin-bottom: 6px;
  cursor: pointer;
  transition: background .15s ease;
  font-size: 13.5px;
}
.mmr:hover { background: var(--surface-3); }
.mmr-home { display: flex; align-items: center; gap: 8px; font-weight: 500; min-width: 0; }
.mmr-home .mini-crest { width: 22px; height: 22px; flex-shrink: 0; }
.mmr-away { display: flex; align-items: center; gap: 8px; font-weight: 500; min-width: 0; justify-content: flex-end; flex-direction: row; }
.mmr-away .mini-crest { width: 22px; height: 22px; flex-shrink: 0; }
.mmr-score { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); font-size: 15px; }
.mmr-live { font-family: var(--mono); font-weight: 700; color: var(--live); font-size: 13px; }
.mmr-time { font-family: var(--mono); font-weight: 600; color: var(--muted); font-size: 13px; }

/* MATCH SHEET */
.ms-head {
  position: relative;
  padding: 26px 22px 24px;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff;
}
.ms-meta { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); font-weight: 600; }
.ms-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ms-badge.live { background: rgba(220,38,38,0.15); color: #fca5a5; display: inline-flex; align-items: center; gap: 5px; }
.ms-badge.live .dot { width: 7px; height: 7px; background: #dc2626; border-radius: 50%; animation: ms-pulse 1.4s infinite; }
@keyframes ms-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }
.ms-badge.end { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
.ms-badge.next, .ms-badge.sched { background: rgba(255,214,10,0.15); color: var(--yellow); }
.ms-badge.sosp { background: rgba(120,113,108,0.30); color: #e7e5e4; }
.ms-stadium { font-size: 12.5px; color: rgba(255,255,255,0.7); margin-top: 8px; }
.ms-board {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}
.ms-team { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; cursor: pointer; }
.ms-crest { width: 64px; height: 64px; }
.ms-crest .crest-svg { width: 100%; height: 100%; }
.ms-name { font-weight: 700; font-size: 15.5px; line-height: 1.2; }
.ms-score {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 700;
  display: flex;
  gap: 6px;
  align-items: baseline;
  min-width: 0;
  padding: 0 4px;
}
.ms-score .sc-sep { font-size: 17px; color: rgba(255,255,255,0.5); }
.ms-score .sc-pending { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.5); }
.ms-events { display: flex; flex-direction: column; gap: 8px; }
.ms-ev {
  display: grid;
  grid-template-columns: 42px 24px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: 14.5px;
}
.ms-ev.side-a { background: var(--surface-3); direction: rtl; }
.ms-ev.side-a .ms-player, .ms-ev.side-a .ms-min { direction: ltr; text-align: right; }
.ms-min { font-family: var(--mono); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
.ms-icon svg { width: 18px; height: 18px; display: block; margin: 0 auto; }
.ms-player { color: var(--text); font-weight: 500; }
.ms-player small { color: var(--muted); font-weight: 400; font-size: 12px; }
.ms-ev-team { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; vertical-align: middle; }
.ms-ev-team .mini-crest { width: 14px; height: 14px; }
.ms-ev-team small { color: var(--muted); font-weight: 600; font-size: 12px; }
.ms-ev.side-a .ms-ev-team { margin-right: 0; margin-left: 8px; }
.ms-lineup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ms-lu-col { background: var(--surface-2); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.ms-lu-head { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.ms-lu-p { display: grid; grid-template-columns: 28px 36px 1fr; align-items: center; gap: 6px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid rgba(0,0,0,0.04); }
.ms-lu-p:last-child { border-bottom: 0; }
.ms-lu-p .num { font-family: var(--mono); color: var(--muted); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.ms-lu-p .rl { font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: var(--muted); }
.ms-lu-p .nm { color: var(--text); font-weight: 500; }

/* Statistiche partita (possesso/tiri/ecc) */
.ms-stats { display: flex; flex-direction: column; gap: 12px; }
.ms-stat-row {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
}
.ms-stat-v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; color: var(--text); text-align: center; }
.ms-stat-bar { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ms-stat-l { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
.ms-stat-track { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.ms-stat-fill { height: 100%; transition: width .3s ease; }
.ms-stat-fill.h { border-radius: 4px 0 0 4px; }
.ms-stat-fill.a { border-radius: 0 4px 4px 0; }

/* Head-to-head precedenti */
.ms-h2h-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.hh-side {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 3px solid var(--muted-2);
  border-radius: 10px;
  padding: 12px 10px 10px;
  text-align: center;
}
.hh-side .hh-n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 26px; line-height: 1; color: var(--text); }
.hh-side .hh-l { font-size: 11px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.hh-side-d { border-top-color: var(--muted-2); }
.ms-h2h-list { display: flex; flex-direction: column; gap: 6px; }
.hh-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: 13px;
}
.hh-row .hh-team { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-row .hh-team.right { flex-direction: row-reverse; justify-content: flex-end; }
.hh-row .hh-team .mini-crest { width: 18px; height: 18px; }
.hh-row .hh-score { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.hh-row .hh-stagione { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; }
@media (max-width: 480px) {
  .hh-row { grid-template-columns: 1fr auto 1fr; }
  .hh-stagione { grid-column: 1 / 4; text-align: right; padding-top: 2px; }
}

/* Ultime 5 a testa */
.ms-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ms-form-col {
  padding: 12px;
  background: var(--surface-2);
  border-radius: 10px;
  text-align: center;
}
.ms-form-team { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12.5px; margin-bottom: 10px; }
.ms-form-team .mini-crest { width: 20px; height: 20px; }
.ms-form-col .sh-form { justify-content: center; }
@media (max-width: 480px) {
  .ms-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ms-lineup { grid-template-columns: 1fr; }
  .ms-board { gap: 8px; }
  .ms-crest { width: 52px; height: 52px; }
  .ms-name { font-size: 13.5px; }
  .ms-score { font-size: 25px; gap: 5px; }
  .ms-score .sc-sep { font-size: 15px; }
  .ms-board { gap: 6px; }
  .sh-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═════════════════════════════════════════════
   DESKTOP LAYOUT (>= 1024px)
   Sidebar sx fissa + main + sidebar dx fissa
   ═════════════════════════════════════════════ */
.side-l, .side-r { display: none; }

@media (min-width: 1024px) {
  body {
    padding: 0;
    background: var(--surface-2);
  }
  .app-frame {
    max-width: 100%;
    width: 100%;
    margin: 0;
    /* Su computer si torna alla pagina che scorre per intero: l'impianto
       "a schermo" del telefono (altezza fissa + contenuto che scorre dentro)
       qui non serve, e le colonne laterali sticky hanno bisogno che a
       scorrere sia la pagina. */
    height: auto;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 340px;
    grid-template-rows: 1fr;
    gap: 0;
    padding-bottom: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--bg);
    /* overflow visibile: con "hidden" le colonne laterali sticky
       scorrerebbero via insieme al contenuto */
    overflow: visible;
  }
  .app-frame > .views {
    flex: none;
    overflow: visible;
  }
  /* Nascondi elementi mobile-first */
  .app-frame > .head,
  .app-frame > .view-tabs,
  .app-frame > .bn {
    display: none !important;
  }
  /* Mostra sidebar */
  .side-l, .side-r {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--border);
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
  }
  .side-r {
    border-right: 0;
    border-left: 1px solid var(--border);
  }
  .app-frame > .views {
    padding: 0;
    min-height: 100vh;
    background: var(--bg);
  }
  /* View tabs sticky in alto del main su desktop */
  .views::before { content: ""; }
}

/* ═════════════════════════════════════════════
   SIDEBAR SINISTRA — brand, picker, nav verticale
   ═════════════════════════════════════════════ */
.side-l { padding: 0; }
.side-l .sl-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 18px 12px;
}
.side-l .sl-brand .sl-logo {
  height: 60px;
  width: auto;
  aspect-ratio: var(--logo-ratio);
  display: block;
  max-width: 100%;
  border-radius: 0;
  object-fit: contain;
}
.side-l .sl-season {
  padding: 0 18px 18px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.side-l .sl-season small {
  font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600;
}

.side-l .sl-pick {
  margin: 12px 14px;
  padding: 11px 12px;
  /* fondo pieno + velo colorato: vedi nota su .camp-pick */
  background: var(--surface);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-left: 3px solid var(--champ-color, var(--text));
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color .15s ease;
}
/* Su desktop la barra in alto non c'è: senza questo, chi guarda da computer
   non ha modo di rileggere i risultati se non ricaricando dal browser. */
.side-l .sl-refresh {
  margin: 0 14px 12px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.side-l .sl-refresh:hover { background: var(--surface-2); border-color: var(--border-2); }
.side-l .sl-refresh svg { width: 16px; height: 16px; flex-shrink: 0; }
.side-l .sl-refresh.is-spinning svg { animation: h-refresh-spin 0.7s linear; }
.side-l .sl-pick::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--champ-color, #000);
  opacity: .09;
  pointer-events: none;
  transition: opacity .15s ease;
}
.side-l .sl-pick:hover::before { opacity: .16; }
.side-l .sl-pick .sl-p-info .val { color: var(--champ-color, var(--text)); }
.side-l .sl-pick .sl-p-info { flex: 1; min-width: 0; }
.side-l .sl-pick .sl-p-info .lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; margin-bottom: 1px; }
.side-l .sl-pick .sl-p-info .val { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-l .sl-pick svg { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; stroke-width: 2.2; }

.side-l .sl-section {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.side-l .sl-section .sl-lbl {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
  padding: 8px 18px 4px;
}
.side-l .sl-nav { display: flex; flex-direction: column; padding: 4px 8px 8px; }
.side-l .sl-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--text-soft);
  cursor: pointer;
  border: 0;
  background: none;
  text-align: left;
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.side-l .sl-nav-item svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 1.85;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.side-l .sl-nav-item:hover { background: var(--surface-2); color: var(--text); }
.side-l .sl-nav-item.is-active {
  background: rgba(255,214,10,0.12);
  color: var(--text);
  font-weight: 700;
}
.side-l .sl-nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--yellow);
  border-radius: 0 3px 3px 0;
}
.side-l .sl-nav-item .sl-bdg {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--live-soft);
  color: var(--live);
  display: none;
}
.side-l .sl-nav-item .sl-bdg.is-on { display: inline-block; }

.side-l .sl-account {
  padding: 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.side-l .sl-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}
.side-l .sl-login:hover { background: var(--ink-2); }
.side-l .sl-login svg { width: 16px; height: 16px; }
.side-l .sl-login-hint {
  font-size: 11px;
  color: var(--muted);
  margin: 8px 2px 0;
  line-height: 1.4;
  text-align: center;
}
.side-l .sl-user {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.side-l .sl-user:hover { background: var(--surface-3); border-color: var(--border-2); }
.side-l .sl-user-av {
  width: 36px; height: 36px;
  background: var(--ink);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.side-l .sl-user-info { flex: 1; min-width: 0; text-align: left; }
.side-l .sl-user-nm {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-l .sl-user-rl {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.side-l .sl-user svg { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }

.side-l .sl-foot {
  margin-top: auto;
  padding: 12px 18px 18px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.side-l .sl-foot a { color: var(--muted); text-decoration: underline; }
.side-l .sl-foot a:hover { color: var(--text); }

/* ═════════════════════════════════════════════
   SIDEBAR DESTRA — widget classifica top5, capocannoniere, prossime
   ═════════════════════════════════════════════ */
.side-r { padding: 14px 16px 24px; gap: 14px; }
.side-r .wg {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
}
.side-r .wg::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--wg-accent, var(--border-2));
}
.side-r .wg-std::before { background: linear-gradient(90deg, var(--yellow) 0%, var(--yellow-deep) 100%); }
.side-r .wg-scor::before { background: linear-gradient(90deg, var(--blue) 0%, #1e40af 100%); }
.side-r .wg-prox::before { background: linear-gradient(90deg, #d97706 0%, #b45309 100%); }
.side-r .wg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.side-r .wg-head h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  margin: 0;
}
.side-r .wg-head a {
  font-size: 11px;
  color: var(--blue);
  font-weight: 600;
}
.side-r .wg-head a:hover { text-decoration: underline; }

.side-r .wg-std-row {
  display: grid;
  grid-template-columns: 24px 24px 1fr 32px;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 13px;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.side-r .wg-std-row:first-child { border-top: 0; }
.side-r .wg-std-row .pos { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); text-align: center; }
.side-r .wg-std-row .pos.top { color: var(--yellow-deep); }
.side-r .wg-std-row .mini-crest { width: 22px; height: 22px; }
.side-r .wg-std-row .nm { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-r .wg-std-row .pts { font-family: var(--mono); font-weight: 700; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.side-r .wg-std-row:hover { background: rgba(0,0,0,0.025); }

.side-r .wg-scorer {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.side-r .wg-scorer .ws-av {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.side-r .wg-scorer .ws-info { flex: 1; min-width: 0; }
.side-r .wg-scorer .ws-name { font-size: 14px; font-weight: 700; color: var(--text); }
.side-r .wg-scorer .ws-team { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; }
.side-r .wg-scorer .ws-team .mini-crest { width: 16px; height: 16px; }
.side-r .wg-scorer .ws-gol { font-family: var(--mono); font-size: 22px; font-weight: 800; color: var(--text); }

.side-r .wg-next {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.side-r .wg-next-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s ease;
}
.side-r .wg-next-row:hover { background: var(--surface-3); }
.side-r .wg-next-row .nr-team {
  display: flex; align-items: center; gap: 5px;
  min-width: 0;
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-r .wg-next-row .nr-team.right { justify-content: flex-end; flex-direction: row-reverse; text-align: right; }
.side-r .wg-next-row .nr-team .mini-crest { width: 18px; height: 18px; }
.side-r .wg-next-row .nr-when { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--muted); padding: 0 4px; text-align: center; }

.side-r .wg-live {
  background: linear-gradient(180deg, #1a0a0a 0%, #2a0e0e 100%);
  color: #fff;
  border-color: rgba(255,255,255,0.1);
}
.side-r .wg-live .wg-head h4 { color: #fff; }
.side-r .wg-live .wg-head h4 .dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--live);
  border-radius: 50%;
  margin-right: 6px;
  animation: ms-pulse 1.4s infinite;
}
.side-r .wg-live-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
}
.side-r .wg-live-row:first-child { border-top: 0; }
.side-r .wg-live-row .lr-team {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-r .wg-live-row .lr-team.right { justify-content: flex-end; flex-direction: row-reverse; }
.side-r .wg-live-row .lr-team .mini-crest { width: 18px; height: 18px; }
.side-r .wg-live-row .lr-score {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  padding: 0 6px;
}

/* Desktop padding sui block delle view */
@media (min-width: 1024px) {
  .views > .view.is-active { padding: 22px 26px 60px; }
  /* Sub-header sticky con tab della view corrente */
  .view-sub-head {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    margin: -22px -26px 18px;
    padding: 16px 26px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .view-sub-head h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
  .view-sub-head h1 small { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
  /* La home camp-hero compatta su desktop */
  .views > .view.is-active .camp-hero { padding: 20px 24px 16px; border-radius: 16px; }
  .views > .view.is-active .camp-hero h1 { font-size: clamp(26px, 3vw, 36px); }
  /* Tutti i .block hanno padding 0 su desktop (è la view ad averne) */
  .views > .view.is-active .block { padding: 0; }
  .views > .view.is-active .merc-block,
  .views > .view.is-active .marc-block { padding: 0; }
}

/* ═════════════════════════════════════════════
   STATISTICHE — viste statistiche avanzate (sotto-tab)
   ═════════════════════════════════════════════ */
.stat-block { padding: 0 var(--gutter); margin-bottom: 24px; }
.stat-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 4px;
}
.stat-tab {
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.stat-tab:hover { background: var(--surface-2); }
.stat-tab.is-active {
  background: var(--ink);
  color: #fff;
  border-color: #0a0a0a;
}
.stat-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.stat-table .row {
  display: grid;
  grid-template-columns: 38px 1fr 80px 56px;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.stat-table .row:last-child { border-bottom: 0; }
.stat-table .row.head {
  background: var(--surface-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
}
.stat-table .pos { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); }
.stat-table .pos.top { color: var(--yellow-deep); }
.stat-table .nm { min-width: 0; }
.stat-table .nm strong { display: block; font-weight: 600; color: var(--text); }
.stat-table .nm .sub { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.stat-table .nm .sub .mini-crest { width: 16px; height: 16px; }
.stat-table .pr { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text-soft); text-align: right; }
.stat-table .val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); text-align: right; font-size: 15px; }
.stat-table .row[data-player], .stat-table .row[data-team] { cursor: pointer; }
.stat-table .row[data-player]:hover, .stat-table .row[data-team]:hover { background: var(--surface-2); }
@media (max-width: 480px) {
  .stat-table .row { grid-template-columns: 32px 1fr 60px 50px; padding: 10px 12px; gap: 6px; font-size: 13px; }
}

/* ═════════════════════════════════════════════
   CURIOSITA' / HIGHLIGHTS
   ═════════════════════════════════════════════ */
.cur-block { padding: 0 var(--gutter); margin-bottom: 24px; }
.cur-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .cur-grid { grid-template-columns: 1fr 1fr; }
}
.cur-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 16px 18px;
  position: relative;
  overflow: hidden;
}
.cur-card .cur-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.cur-card.t-mvp .cur-tag { background: var(--yellow-dim); color: var(--yellow-deep); }
.cur-card.t-goal .cur-tag { background: rgba(220,38,38,0.1); color: var(--live); }
.cur-card.t-trick .cur-tag { background: rgba(124,58,237,0.1); color: #7c3aed; }
.cur-card.t-streak .cur-tag { background: var(--blue-soft); color: var(--blue); }
.cur-card.t-record .cur-tag { background: rgba(22,163,74,0.1); color: #16a34a; }
.cur-card.t-clean .cur-tag { background: rgba(8,145,178,0.1); color: #0891b2; }

.cur-card h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--text); }
.cur-card p { font-size: 13px; color: var(--text-soft); margin: 0 0 12px; line-height: 1.5; }
.cur-card .cur-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}
.cur-card .cur-foot .mini-crest { width: 20px; height: 20px; cursor: pointer; }
.cur-card .cur-foot strong { color: var(--text); font-weight: 600; }

/* ═════════════════════════════════════════════
   ARCHIVIO STAGIONI
   ═════════════════════════════════════════════ */
.arch-block { padding: 0 var(--gutter); margin-bottom: 24px; }
.arch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .arch-grid { grid-template-columns: 1fr 1fr; }
}
.arch-card {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff;
  border-radius: 14px;
  padding: 22px 20px 20px;
  position: relative;
  overflow: hidden;
}
.arch-card::before {
  content: "";
  position: absolute;
  inset: -50% -30% auto auto;
  width: 70%; height: 200%;
  background: radial-gradient(circle, rgba(255,214,10,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.arch-card .arch-season {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--yellow);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.arch-card .arch-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 18px; }
.arch-card .arch-winner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.arch-card .arch-winner .crest-wrap { width: 44px; height: 44px; flex-shrink: 0; }
.arch-card .arch-winner .info { flex: 1; min-width: 0; }
.arch-card .arch-winner .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.55); font-weight: 600; margin-bottom: 2px; }
.arch-card .arch-winner .nm { font-size: 15px; font-weight: 700; }
.arch-card .arch-winner .trophy {
  width: 28px; height: 28px;
  color: var(--yellow);
}
.arch-card .arch-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  position: relative;
  z-index: 1;
}
.arch-card .arch-st {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 9px 8px;
}
.arch-card .arch-st .lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); font-weight: 600; margin-bottom: 2px; }
.arch-card .arch-st .v { font-size: 13px; font-weight: 700; line-height: 1.2; }
.arch-card .arch-st .v small { display: block; font-weight: 400; font-size: 10.5px; color: rgba(255,255,255,0.6); margin-top: 1px; }

/* ═══════════════ TEMA SCURO ═══════════════ */
:root[data-theme="dark"]{
  --bg:#0e1116; --bg-deep:#0a0d12;
  --surface:#161b22; --surface-2:#1c222c; --surface-3:#232b38;
  --text:#e8ebf2; --text-soft:#c4ccd8; --muted:#8b94a3; --muted-2:#6b7382;
  --border:rgba(255,255,255,0.10); --border-2:rgba(255,255,255,0.16);
  --blue:#6ea0ff; --blue-deep:#4f86ec; --blue-soft:rgba(110,160,255,0.12);
  --live:#f06a6a; --live-soft:rgba(240,106,106,0.14); --green:#34c98a;
  --ink:#242c3a; --ink-2:#2e394a;
  --yellow-dim:rgba(255,214,10,0.18); --surface-y:rgba(255,214,10,0.12); --border-y:rgba(255,214,10,0.30);
}
/* card a sfondo bianco "fisso" -> tinte scure */
:root[data-theme="dark"] .live-now,
:root[data-theme="dark"] .mc:has(.mc-head.live){ background:linear-gradient(180deg,var(--surface) 0%,rgba(240,106,106,0.07) 100%); }
:root[data-theme="dark"] .mc:has(.mc-head.fin){ background:rgba(52,201,138,0.11); }
/* il punto "live" bianco sul chip attivo resta visibile */
:root[data-theme="dark"] .day-picker .dp-chip.is-active .dp-live{ background:#0e1116; }

/* interruttore tema nel pannello login/account */
.auth-theme{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.auth-theme .at-label{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:7px}
.auth-theme .at-seg{display:flex;border:1px solid var(--border-2);border-radius:9px;overflow:hidden;flex:0 0 auto}
.auth-theme .at-seg button{font-size:12px;font-weight:600;padding:7px 12px;background:transparent;color:var(--text);border:none;cursor:pointer;transition:background .12s}
.auth-theme .at-seg button + button{border-left:1px solid var(--border-2)}
.auth-theme .at-seg button.on{background:var(--yellow);color:#0a0a0a}

/* ═══════════════ ZOOM BLOCCATO SU MOBILE ═══════════════ */
/* Previene il double-tap-to-zoom su iOS Safari (il viewport blocca il pinch) */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; }
/* iOS forza lo zoom-al-focus su input con font-size < 16px: assicuriamo 16px sui campi */
.auth-field input, .auth-field select { font-size: 16px; }

/* ═══════════════ EDITOR ROSA / STAFF (Area redazione nel sito) ═══════════════ */
.fe-ed-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
  background: var(--surface-2);
}
.fe-ed-grid1 { display: grid; grid-template-columns: 1fr 36px; gap: 8px; align-items: center; }
.fe-ed-grid2 { display: grid; grid-template-columns: 1fr 96px; gap: 8px; margin-top: 8px; }
.fe-ed-grid-staff { display: grid; grid-template-columns: 1fr 1fr 36px; gap: 8px; align-items: center; }
.fe-ed-card input, .fe-ed-card select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 11px;
  color: var(--text);
  font-size: 16px;
  font-family: var(--sans);
  width: 100%;
  min-width: 0;
}
.fe-ed-card input:focus, .fe-ed-card select:focus { outline: none; border-color: var(--text); }
.fe-ed-x {
  border: none;
  background: transparent;
  color: #dc2626;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 8px 0;
}
.fe-ed-x:hover { background: rgba(220, 38, 38, 0.1); }
.fe-ed-del { opacity: 0.45; }
.fe-ed-del input, .fe-ed-del select { text-decoration: line-through; }
.fe-ed-del .fe-ed-x { color: var(--muted); }
.fe-ed-add {
  width: 100%;
  border: 1.5px dashed var(--border-2);
  background: transparent;
  color: var(--text);
  font-weight: 700;
  font-size: 13.5px;
  border-radius: 11px;
  padding: 12px;
  cursor: pointer;
  font-family: var(--sans);
  margin-bottom: 4px;
}
.fe-ed-add:hover { background: var(--surface-2); }