/* ====================================================================
   FINE STAGIONE SUL TELEFONO — .m-fs-*.
   Qui la riscrittura e' piu' corta delle altre quattro, e il motivo e'
   misurato: delle 115 regole che dipingono il riepilogo, 94 non stanno in
   nessuna media query — sono le forme foglia (.fs-attr, .fs-obj,
   .fs-trofeo, .fs-panel, .fs-track) e sono le stesse a qualunque
   larghezza. Le 21 che adattano stanno tutte su quattro contenitori a due
   colonne, e sono quelle che qui hanno un nome nuovo.

   Il mockup dice, in chiaro, che le tre schede in sequenza sono gia' il
   posto giusto e restano: qui non si ridisegna una struttura approvata,
   si toglie l'impaginazione che veniva dal desktop.
   ==================================================================== */

/* i quattro contenitori a due colonne diventano uno: una colonna, per
   costruzione e non per media query */
.m-fs-uno { display: flex; flex-direction: column; gap: 12px; }
.m-fs-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* testata compatta: stemma, club, OVR. Nome e ruolo non ci vanno — li hai
   appena visti nell'hub e qui rubavano la riga al club. */
.m-fs-head {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-bottom: 1px solid var(--rtp4-line);
}
.m-fs-head .fs-crest { width: 30px; height: 30px; border-radius: var(--radius-pill); flex: none; }
.m-fs-head > div { flex: 1; min-width: 0; }
.m-fs-head strong {
  display: block; font: 600 var(--type-corpo) var(--rtp4-reading); color: var(--rtp4-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-fs-head small { display: block; font-size: var(--type-etichetta); color: var(--rtp4-muted); }
.m-fs-ovr { flex: none; text-align: right; }
.m-fs-ovr small { display: block; font-size: var(--type-etichetta); color: var(--rtp4-muted); }
.m-fs-ovr b { font: 700 var(--type-sezione) var(--rtp4-display); color: var(--accent-player); }

/* i tre capitoli: la stessa barra delle linguette, con il numero sopra */
.m-fs-capitoli {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px;
  padding: 10px 12px 0;
}
.m-fs-capitoli button {
  min-height: 42px; padding: 6px 2px; border: 0; border-radius: var(--radius-xs);
  background: var(--rtp4-ink3); color: var(--rtp4-muted); cursor: pointer;
  font-size: var(--type-etichetta); letter-spacing: .03em; text-transform: uppercase;
}
.m-fs-capitoli button span { display: block; font-family: var(--rtp4-display); font-weight: 700; }
.m-fs-capitoli button[aria-pressed="true"] {
  background: var(--rtp4-ink4); color: var(--rtp4-text);
  box-shadow: inset 0 -2px 0 var(--rtp4-gold);
}

/* il piede: avanti e indietro, e il passo che dice dove sei */
.m-fs-footer {
  position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 7px;
  padding: 14px 12px calc(10px + env(safe-area-inset-bottom));
  /* opaca gia' al 12%: al 30% la riga "01 / 03" restava sopra il contenuto
     ancora mezzo visibile, e si leggevano due testi sovrapposti */
  background: linear-gradient(transparent, var(--rtp4-ink) 12%);
}
.m-fs-footer .fs-passo {
  margin: 0; text-align: center;
  font-size: var(--type-etichetta); letter-spacing: .05em;
  text-transform: uppercase; color: var(--rtp4-muted);
}
.m-fs-footer .fs-azioni { display: flex; gap: 8px; }
.m-fs-footer .fs-indietro {
  flex: none; width: 48px; min-height: 48px;
  border: 1px solid var(--rtp4-line); border-radius: var(--radius-sm);
  background: var(--rtp4-ink3); color: var(--rtp4-soft); font-size: 0; cursor: pointer;
}
.m-fs-footer .fs-indietro::before { content: "←"; font-size: var(--type-corpo); }
.m-fs-footer .fs-indietro:disabled { opacity: .35; }
.m-fs-footer .fs-avanti {
  flex: 1; min-height: 48px; border: 0; border-radius: var(--radius-sm);
  background: var(--rtp4-lime); color: var(--ink-1000);
  font: 700 var(--type-corpo) var(--rtp4-reading); cursor: pointer;
}

/* il guscio non ha piu' margini da schermo largo */
.m-fs .fs-shell { padding: 0; max-width: none; }
.m-fs .fs-pagina { padding: 12px; }

/* ---------- le forme foglia, adattate senza media query ----------
   Erano il blocco @media (max-width:560px) di css/fine-stagione.css. Sono
   venute qui perche' sotto i 640 la vista e' questa, e la condizione non e'
   piu' la larghezza ma il markup: .m-fs e' il telefono per costruzione.
   Cosi' il foglio del desktop smette di avere un'opinione sul telefono.

   Sei regole di quel blocco non sono venute: puntavano a .fs-header,
   .fs-club, .fs-io, .fs-ovr-tag, .fs-capitoli e .fs-footer, cioe' al markup
   che la testata e il piede nativi hanno sostituito. Erano diventate morte
   nel momento in cui ho scritto il guscio, e check-css-dead non poteva
   vederlo: quelle classi esistono ancora, sul desktop. */
.m-fs .fs-trofei { grid-template-columns: 1fr 1fr; }
.m-fs .fs-trofei .fs-trofeo:last-child:nth-child(odd) { grid-column: 1 / -1; }
.m-fs .fs-premi { grid-template-columns: 1fr; }
.m-fs .fs-vetrina { grid-template-columns: 1fr; }
.m-fs .fs-capitolo span { display: block; }
.m-fs .fs-attr { grid-template-columns: 80px 1fr 68px 30px; gap: 6px; }
.m-fs .fs-premio { grid-template-columns: 1fr; gap: 4px; }
.m-fs .fs-premio img { width: 44px; height: 50px; }

/* ---------- il ritmo verticale ----------
   L'utente: "troppi spazi fra gli elementi, e non distribuiti in modo
   coerente per un dispositivo mobile: sembrano riadattati".

   Misurato prima di toccare, e il numero ha smentito meta' dell'ipotesi: il
   vuoto del riepilogo era il 53-66% dell'altezza contro il 70% dell'hub,
   cioe' MENO. Non era la quantita'. Erano le PUNTE: 88 e 74 px intorno a un
   pannello, 45 sotto una cella, 41 sotto l'OVR, contro un hub che sta fra 20
   e 27 ovunque. Gli spazi del desktop sono dimensionati su una tela da 1280
   e qui arrivavano identici, quindi alcuni distacchi erano il triplo di
   altri senza che la differenza volesse dire niente.

   Le distanze qui sono una scala, e la scala dice qualcosa:
     16  fra due blocchi diversi      10  fra un titolo e il suo contenuto
      6  dentro una lista             12  la cornice di una carta
   Non e' "stringi tutto": e' la gerarchia che mancava. */
.m-fs .fs-panel { padding: 12px 13px; }
.m-fs .fs-heading { margin-bottom: 14px; }
.m-fs .fs-sez { margin-bottom: 10px; }
.m-fs .fs-ovr { margin: 10px 0 12px; gap: 12px; }
.m-fs .fs-piazza { margin-top: 8px; gap: 14px; }
.m-fs .fs-stat { padding: 0 10px; }
.m-fs .fs-stat .fs-num { margin: 6px 0 2px; }
/* il pannello "nessun trofeo" era alto 300px per centrarci due righe: su una
   tela larga e' una vetrina, su un telefono e' un buco */
.m-fs .fs-vuoto { min-height: 0; padding: 14px 13px; }
.m-fs .fs-vuoto p { margin-top: 8px; }
.m-fs .fs-lp .fs-punti { margin: 8px 0 2px; }
.m-fs .fs-strip { padding: 0; }

/* ---------- la scala, che e' del desktop e qui e' un cartellone ----------
   --fs-hero parte da 104px e --fs-num-xl da 72: sono i FONDI del clamp, quindi
   su 390 px arrivano li' e non scendono. Un numero a 104 px su una tela da
   1280 e' un titolo; su un telefono e' un cartellone, e quattro cartelloni
   sono mezzo schermo — l'utente vedeva UN blocco sopra la piega dove nell'hub
   ne vede tre o quattro.

   Ma non si rimpicciolisce tutto: fine stagione e' il momento di celebrazione
   (4 settembre, parole sue: "sembra un necrologio") e la scala grande e'
   quello che lo dice. Resta grande UNA cosa per capitolo — dove e' finita la
   squadra, l'OVR di arrivo, i punti guadagnati — e le altre scendono a misura
   di lista. Grande su quattro cose insieme non celebra niente: riempie. */
.m-fs .fs-num { font-size: 30px; }
.m-fs .fs-stat .fs-num { font-size: 30px; margin: 4px 0 2px; }
.m-fs .fs-piazza .fs-num,
.m-fs .fs-ovr .fs-ovr-fine,
.m-fs .fs-lp .fs-punti { font-size: 54px; }
/* l'occhiello girava su due righe per la spaziatura fra le lettere */
.m-fs .fs-kicker { letter-spacing: .08em; }