/* oalostrixa.com - tabellone
   Base: Artboard style reference (white paper, ink with green undertone, one voltage accent,
   flat surfaces, hairlines instead of shadows, two radii only, dual typographic register).
   Adattato: l'accento lime è stato sostituito dal colore di squadra fucsia, e la griglia
   di categoria è diventata una pulsantiera di tabellone. */

/* ---------- token ---------- */
:root{
  /* superfici */
  --campo:        #ffffff;   /* tela */
  --tribuna:      #f4f4f1;   /* superficie secondaria */
  --linea:        #e2e4df;   /* filo di 1px */
  --linea-forte:  #c9ccc3;

  /* inchiostro */
  --inchiostro:   #0d1400;   /* nero con sottotono verde, dal tema */
  --grigio:       #5c6159;   /* testo secondario, 6,35:1 su bianco */

  /* colore di squadra: unico accento cromatico del sito */
  --squadra:      #e5007d;   /* 4,54:1 su bianco - riempimenti, numeri, stato acceso */
  --squadra-cupo: #b3005f;   /* 6,81:1 - testo piccolo su superficie tinta */

  /* raggi: solo due valori in tutto il sito */
  --r-chip: 8px;
  --r-mod: 12px;

  /* ritmo */
  --gutter: clamp(14px, 3.2vw, 44px);
  --salto-s: clamp(28px, 5vw, 52px);
  --salto-m: clamp(46px, 8vw, 92px);
  --salto-l: clamp(64px, 11vw, 132px);

  /* scala tipografica fluida */
  --t-micro: clamp(10px, 0.62rem + 0.12vw, 12px);
  --t-mini:  clamp(12px, 0.74rem + 0.14vw, 14px);
  --t-testo: clamp(15px, 0.92rem + 0.2vw, 17.5px);
  --t-guida: clamp(17px, 1rem + 0.5vw, 21px);
  --t-tit-s: clamp(19px, 1.1rem + 0.7vw, 26px);
  --t-tit:   clamp(25px, 1.3rem + 1.5vw, 40px);
  --t-h1:    clamp(31px, 1.5rem + 2.7vw, 60px);

  /* i numeri sono l'elemento visivo principale: superano sempre i titoli */
  --n-s:  clamp(26px, 1.2rem + 2vw, 40px);
  --n-m:  clamp(38px, 1.4rem + 4.4vw, 76px);
  --n-l:  clamp(52px, 1.6rem + 7.4vw, 118px);
}

/* ---------- azzeramento ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block;height:auto}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--squadra);outline-offset:2px}

body{
  background:var(--campo);
  color:var(--inchiostro);
  font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--t-testo);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* registro tipografico doppio, come nel tema di partenza:
   display compresso con tracking negativo, etichette minuscole con tracking largo */
.cifra,.marcatore,h1,h2,h3{
  font-family:"Saira Expanded","Saira",system-ui,sans-serif;
}
.cifra{
  font-weight:800;
  line-height:0.86;
  letter-spacing:-0.035em;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1;
  display:block;
}
.marcatore{
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--grigio);
}
h1,h2,h3{letter-spacing:-0.03em;line-height:1.06;font-weight:700}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-tit)}
h3{font-size:var(--t-tit-s);line-height:1.15}
p{max-width:68ch}
a{color:inherit}

/* ---------- involucro a tutta larghezza ---------- */
.fascia{padding-inline:var(--gutter)}
.sezione{padding-block:var(--salto-m)}
.sezione--stretta{padding-block:var(--salto-s)}
.sezione--larga{padding-block:var(--salto-l)}

/* ---------- intestazione ---------- */
.testata{
  position:sticky;top:0;z-index:40;
  background:var(--campo);
  border-bottom:1px solid var(--linea);
}
.testata__riga{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:62px;
}
.marchio{
  display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;font-family:"Saira Expanded","Saira",sans-serif;
  font-weight:800;letter-spacing:-0.02em;font-size:19px;
}
.marchio svg{flex:none}
.nav{display:none}
.nav ul{display:flex;gap:6px;align-items:center}
.nav a{
  text-decoration:none;font-size:var(--t-mini);font-weight:600;
  padding:7px 12px;border-radius:var(--r-chip);
  border:1px solid transparent;
}
.nav a:hover{border-color:var(--linea-forte);background:var(--tribuna)}
.nav a[aria-current="page"]{background:var(--inchiostro);color:var(--campo)}
.interruttore{
  display:inline-flex;align-items:center;gap:8px;
  background:none;border:1px solid var(--inchiostro);border-radius:var(--r-chip);
  padding:8px 13px;cursor:pointer;font-size:var(--t-mini);font-weight:600;
  min-height:44px;
}
.interruttore__barre{display:grid;gap:3px;width:15px}
.interruttore__barre span{height:2px;background:currentColor;display:block}
.nav--aperta{display:block;padding-bottom:14px}
.nav--aperta ul{flex-direction:column;align-items:stretch;gap:2px}
.nav--aperta a{padding:12px;min-height:44px;display:flex;align-items:center}

@media (min-width:900px){
  .interruttore{display:none}
  .nav{display:block}
  .nav--aperta{padding-bottom:0}
  .nav--aperta ul{flex-direction:row;align-items:center;gap:6px}
  .nav--aperta a{min-height:auto;padding:7px 12px}
}

/* ---------- griglia del tabellone ----------
   nessuna colonna centrata: le celle occupano campate diverse della stessa griglia,
   e su mobile collassano in una sola colonna nell'ordine del DOM. */
.quadro{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--linea);
  border:1px solid var(--linea);
  border-radius:var(--r-mod);
  overflow:hidden;
}
@media (min-width:760px){.quadro{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (min-width:1120px){.quadro{grid-template-columns:repeat(12,minmax(0,1fr))}}

.modulo{
  background:var(--campo);
  padding:clamp(16px,2.4vw,26px);
  grid-column:span 4;
  display:flex;flex-direction:column;gap:9px;
  min-width:0;
}
.modulo--tinto{background:var(--tribuna)}
.modulo--pieno{background:var(--inchiostro);color:var(--campo)}
.modulo--squadra{background:var(--squadra);color:#fff}

/* Campate. La griglia deve chiudere ogni riga esatta a ogni soglia, senza celle vuote:
   a 8 colonne le piastrelle piccole vanno a due per riga e le grandi occupano la riga
   intera; a 12 colonne torna la disposizione piena del tabellone. */
@media (min-width:760px){
  .s-3{grid-column:span 4}
  .s-4,.s-5,.s-7,.s-8{grid-column:span 8}
}
@media (min-width:1120px){
  .s-3{grid-column:span 3}.s-4{grid-column:span 4}
  .s-5{grid-column:span 5}.s-7{grid-column:span 7}.s-8{grid-column:span 8}
}

.modulo .cifra{color:var(--squadra)}
.modulo__glossa{font-size:var(--t-mini);color:var(--grigio);line-height:1.5;max-width:44ch}

/* le inversioni vengono dopo la regola generica, altrimenti perdono per ordine di
   sorgente e il numero finisce magenta su magenta */
.modulo--pieno .cifra{color:var(--campo)}
.modulo--pieno .marcatore{color:#adb4a6}
.modulo--pieno .modulo__glossa{color:#c8cec1}
.modulo--squadra .cifra{color:#fff}
/* bianco pieno e non rosato: a 11px il rosato scende a 3,76:1 e non passa AA.
   La gerarchia con la cifra la fa il corpo, non il colore. */
.modulo--squadra .marcatore{color:#fff}
.modulo--squadra .modulo__glossa{color:#fff}

/* ---------- ingresso ---------- */
.ingresso{padding-block:clamp(30px,5vw,58px) var(--salto-s)}
.ingresso__testo{max-width:56ch;margin-bottom:clamp(22px,3.4vw,36px)}
.ingresso h1{margin-bottom:14px;text-wrap:balance}
.ingresso__guida{font-size:var(--t-guida);color:var(--grigio);line-height:1.5;max-width:48ch}
.ingresso__fiducia{
  margin-top:16px;font-size:var(--t-mini);color:var(--grigio);
  border-left:3px solid var(--squadra);padding-left:11px;max-width:52ch;
}
.gruppo-azioni{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* ---------- comandi ---------- */
.tasto{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:11px 20px;border-radius:var(--r-chip);
  font-size:var(--t-mini);font-weight:700;letter-spacing:0.02em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  border:1px solid var(--inchiostro);background:var(--campo);color:var(--inchiostro);
  transition:transform .16s cubic-bezier(.16,1,.3,1),background .16s,color .16s;
}
.tasto:hover{background:var(--tribuna)}
.tasto:active{transform:translateY(1px)}
.tasto--pieno{background:var(--inchiostro);color:var(--campo)}
.tasto--pieno:hover{background:#1c2a0a}
.tasto--squadra{background:var(--squadra);border-color:var(--squadra);color:#fff}
.tasto--squadra:hover{background:var(--squadra-cupo);border-color:var(--squadra-cupo)}

/* ---------- intestazioni di sezione ---------- */
.capo{margin-bottom:clamp(20px,3vw,34px);max-width:60ch}
.capo h2{margin-bottom:10px;text-wrap:balance}
.capo p{color:var(--grigio)}

/* ---------- referto: casi di esclusione ---------- */
.caso{
  border:1px solid var(--linea);border-radius:var(--r-mod);
  padding:clamp(17px,2.4vw,28px);background:var(--campo);
  display:flex;flex-direction:column;gap:11px;
}
.caso--capo{border-color:var(--inchiostro);border-width:2px}
.caso__voce{
  font-family:"Saira Expanded","Saira",sans-serif;font-weight:700;
  font-size:var(--t-tit-s);letter-spacing:-0.02em;
}
.caso__motivo{
  align-self:flex-start;font-size:var(--t-micro);font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  background:var(--squadra);color:#fff;padding:5px 10px;border-radius:var(--r-chip);
}
.caso p{font-size:var(--t-mini);color:var(--grigio);line-height:1.6}
.casi{display:grid;gap:14px;margin-top:18px}
@media (min-width:900px){
  .casi{grid-template-columns:1.35fr 1fr 1fr;align-items:start}
}

.elenco-criteri{display:grid;gap:9px;margin-top:14px}
.elenco-criteri li{
  display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:var(--t-mini);line-height:1.55;
}
.spia{
  width:12px;height:12px;border-radius:2px;margin-top:6px;flex:none;
  border:1.5px solid var(--inchiostro);
}
.spia--accesa{background:var(--squadra);border-color:var(--squadra)}
.spia--spenta{background:transparent}
.spia--tratteggio{
  background:repeating-linear-gradient(45deg,var(--inchiostro) 0 2px,transparent 2px 4px);
}

/* ---------- schede giocatore ---------- */
.formazione{display:grid;gap:16px}
@media (min-width:1000px){
  .formazione{grid-template-columns:repeat(6,minmax(0,1fr));align-items:start}
  .scheda--larga{grid-column:span 4}
  .scheda--alta{grid-column:span 2;grid-row:span 2}
  .scheda--media{grid-column:span 3}
}
.scheda{
  border:1px solid var(--linea);border-radius:var(--r-mod);
  background:var(--campo);overflow:hidden;
  display:flex;flex-direction:column;
}
.scheda__figura{margin:0;background:var(--tribuna);border-bottom:1px solid var(--linea)}
.scheda__figura img{width:100%;object-fit:cover}
.scheda--alta .scheda__figura img{aspect-ratio:9/16}
.scheda__corpo{padding:clamp(16px,2.2vw,24px);display:flex;flex-direction:column;gap:13px;flex:1}
.scheda__testa{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px}
.scheda__nome{font-size:var(--t-tit-s)}
.scheda__ruolo{
  font-size:var(--t-micro);font-weight:700;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--squadra-cupo);border:1px solid currentColor;border-radius:var(--r-chip);
  padding:3px 8px;
}
.scheda__gancio{font-size:var(--t-mini);color:var(--grigio);line-height:1.6}
.scheda__testo{font-size:var(--t-mini);line-height:1.65}

/* linea di indicatori identica su tutte le schede, per il confronto a occhio */
.indicatori{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r-chip);
  overflow:hidden;
}
@media (min-width:520px){.indicatori{grid-template-columns:repeat(4,minmax(0,1fr))}}
.scheda--alta .indicatori{grid-template-columns:repeat(2,minmax(0,1fr))}
.indicatore{background:var(--campo);padding:10px 11px;min-width:0}
.indicatore .cifra{font-size:var(--n-s);color:var(--inchiostro);margin-bottom:3px}
.indicatore__nota{font-size:var(--t-micro);color:var(--grigio);line-height:1.35;display:block}

.tabella-dati{width:100%;border-collapse:collapse;font-size:var(--t-micro)}
.tabella-dati th,.tabella-dati td{
  text-align:left;padding:7px 9px 7px 0;border-bottom:1px solid var(--linea);
  vertical-align:top;line-height:1.45;
}
.tabella-dati th{font-weight:700;color:var(--grigio);width:11ch;white-space:nowrap}
.tabella-dati tr:last-child th,.tabella-dati tr:last-child td{border-bottom:0}
.tabella-dati td{font-variant-numeric:tabular-nums}

.obiezione{
  border-left:3px solid var(--squadra);background:var(--tribuna);
  padding:12px 14px;border-radius:0 var(--r-chip) var(--r-chip) 0;
  font-size:var(--t-mini);line-height:1.6;
}
.obiezione b{color:var(--squadra-cupo)}
.scheda__negozi{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto;padding-top:4px}

/* ---------- classifica ---------- */
.grafico{margin-top:18px;display:grid;gap:2px}
.barra-riga{
  display:grid;grid-template-columns:1fr;gap:5px;
  padding:13px 0;border-bottom:1px solid var(--linea);
}
@media (min-width:720px){
  .barra-riga{grid-template-columns:15rem 1fr;align-items:center;gap:18px}
}
.barra-nome{font-size:var(--t-mini);font-weight:600;line-height:1.3}
.barra-nome small{display:block;color:var(--grigio);font-weight:400;font-size:var(--t-micro)}
/* pista e valore su due colonne: la percentuale della barra si misura sulla pista,
   non sulla riga intera, altrimenti la barra al 100% spinge il numero fuori pagina */
.barra-pista{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.barra{
  height:19px;background:var(--squadra);border-radius:2px;
  min-width:3px;
  transform-origin:left center;
}
.barra--minima{background:var(--inchiostro)}
.barra-valore{
  font-family:"Saira Expanded","Saira",sans-serif;font-weight:800;
  font-size:var(--t-guida);letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.grafico-nota{font-size:var(--t-mini);color:var(--grigio);margin-top:14px;max-width:62ch}

/* ---------- redazione ---------- */
.redazione{display:grid;gap:clamp(20px,3vw,38px)}
@media (min-width:900px){.redazione{grid-template-columns:1.4fr 1fr;align-items:start}}
.riquadro{
  border:1px solid var(--linea);border-radius:var(--r-mod);
  padding:clamp(17px,2.4vw,26px);background:var(--tribuna);
}
.riquadro h3{margin-bottom:11px}
.riquadro p{font-size:var(--t-mini);color:var(--grigio);line-height:1.62}

/* ---------- domande ---------- */
.domande{display:grid;gap:0;margin-top:8px;border-top:1px solid var(--linea)}
.domanda{border-bottom:1px solid var(--linea);padding:clamp(15px,2.2vw,22px) 0}
.domanda h3{margin-bottom:8px;font-size:var(--t-guida)}
.domanda p{font-size:var(--t-mini);color:var(--grigio);line-height:1.65}

/* ---------- modulo ---------- */
.iscrizione{
  border:2px solid var(--inchiostro);border-radius:var(--r-mod);
  padding:clamp(18px,2.8vw,32px);background:var(--campo);
}
.campo{display:grid;gap:6px;margin-bottom:15px}
.campo label{font-size:var(--t-mini);font-weight:700}
.campo input[type=text],.campo input[type=email],.campo textarea{
  width:100%;padding:12px 13px;min-height:46px;
  border:1px solid var(--linea-forte);border-radius:var(--r-chip);
  background:var(--campo);color:var(--inchiostro);font-size:16px;
}
.campo input:focus-visible,.campo textarea:focus-visible{border-color:var(--squadra)}
.campo input::placeholder,.campo textarea::placeholder{color:#6d7269}
.aiuto{font-size:var(--t-micro);color:var(--grigio);line-height:1.5}
.consenso{
  display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:var(--t-micro);color:var(--grigio);line-height:1.55;margin-bottom:16px;
}
.consenso input{width:20px;height:20px;margin-top:2px;accent-color:var(--squadra)}
.esito{
  margin-top:14px;padding:12px 14px;border-radius:var(--r-chip);
  font-size:var(--t-mini);font-weight:600;
  background:var(--squadra);color:#fff;
}
.esito[hidden]{display:none}
.errore{
  margin-top:8px;font-size:var(--t-micro);font-weight:700;color:var(--squadra-cupo);
}
.errore[hidden]{display:none}

/* ---------- piede ---------- */
.piede{
  border-top:1px solid var(--linea);background:var(--tribuna);
  padding-block:var(--salto-s);margin-top:var(--salto-m);
}
.piede__griglia{display:grid;gap:26px}
@media (min-width:800px){.piede__griglia{grid-template-columns:1.5fr 1fr 1fr}}
.piede h2,.piede h3{font-size:var(--t-mini);letter-spacing:0.13em;text-transform:uppercase;
  color:var(--grigio);margin-bottom:11px;font-weight:600}
.piede ul{display:grid;gap:7px}
.piede a{font-size:var(--t-mini)}
.piede p{font-size:var(--t-mini);color:var(--grigio);line-height:1.6}
.avvertenza{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--linea-forte);
  font-size:var(--t-micro);color:var(--grigio);line-height:1.6;max-width:96ch;
}
.diritti{margin-top:14px;font-size:var(--t-micro);color:var(--grigio)}

/* ---------- pagine di testo ---------- */
.testo-lungo{max-width:72ch}
.testo-lungo h2{margin-top:var(--salto-s);margin-bottom:11px}
.testo-lungo h3{margin-top:26px;margin-bottom:8px;font-size:var(--t-guida)}
.testo-lungo p,.testo-lungo li{font-size:var(--t-mini);line-height:1.72;color:#2a2f26}
.testo-lungo p+p{margin-top:12px}
.testo-lungo ul{margin-top:10px;display:grid;gap:8px}
.testo-lungo ul li{padding-left:17px;position:relative}
.testo-lungo ul li::before{
  content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  background:var(--squadra);border-radius:1px;
}
.testo-lungo a{color:var(--squadra-cupo)}

/* ---------- rivelazione (solo con JS attivo) ---------- */
.js .rivela{opacity:0;transform:translateY(16px)}

@media (prefers-reduced-motion:reduce){
  .js .rivela{opacity:1!important;transform:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- salta al contenuto ---------- */
.salta{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--inchiostro);color:var(--campo);padding:11px 16px;
  border-radius:0 0 var(--r-chip) 0;font-size:var(--t-mini);font-weight:700;
}
.salta:focus{left:0}