/* ============================================================================
   TavoliVerdi — foglio di stile del sito
   Direzione grafica "classico chiaro, verdi pastello".
   I colori sono definiti una volta sola qui sotto come variabili: cambiando
   quelle si ricolora tutto il sito senza toccare il resto.
   ========================================================================== */

*{box-sizing:border-box}
body{margin:0}
img{max-width:100%}

  /* ============================================================ *
   *  Verdi pastello chiari, oro come unico accento, carattere    *
   *  Plus Jakarta Sans. Logo con trasparenza appoggiato alla     *
   *  pagina, assi che fluttuano nell'apertura.                   *
   * ============================================================ */
  body{
    --mint-50:#e7f6ec; --mint-100:#d4edde; --mint-200:#bce2cb; --mint-300:#9bd2b2; --sage:#74c093;
    --green-700:#217a52; --green-800:#155c3c; --green-900:#0d3e28;
    --ink:#12281d; --ink-dim:#4e6b5b; --line:#a8d6ba;
    --gold:#b8912f; --gold-dk:#87680f; --gold-hi:#e0bb5e; --gold-soft:#f7edd2;
    /* Un solo carattere per tutto: Plus Jakarta Sans. Le due variabili restano
       distinte perché titoli e testo corrente possano divergere in futuro
       senza dover ritoccare ogni regola. */
    --font-titoli:"PlusJakartaSans",system-ui,-apple-system,"Segoe UI",sans-serif;
    --font-testo:"PlusJakartaSans",system-ui,-apple-system,"Segoe UI",sans-serif;
    background:
      radial-gradient(130% 70% at 50% -10%, #f6fdf8 0%, var(--mint-50) 38%, var(--mint-100) 78%, var(--mint-200) 100%);
    color:var(--ink);font-family:var(--font-titoli);position:relative
  }
  body::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;
    background:
      repeating-linear-gradient(135deg, rgba(21,92,60,.045) 0 2px, transparent 2px 6px),
      repeating-linear-gradient(45deg, rgba(21,92,60,.032) 0 2px, transparent 2px 7px)}
  body > *{position:relative}

  /* Logo con trasparenza: si appoggia direttamente sulla pagina, senza placca.
     L'immagine è 278x273: mostrandola a 120px resta nitida anche sugli schermi
     ad alta densità, che la disegnano al doppio (240px, sotto i 278 originali).
     Oltre i 139px si comincerebbe a ingrandire, e apparirebbe morbida. */
  .logo{flex:none;display:block;height:120px;width:auto}

  .topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
    padding:18px 32px;background:rgba(255,255,255,.82);border-bottom:1px solid var(--line);
    backdrop-filter:blur(6px)}
  .brand{display:flex;align-items:center;gap:18px}
  .wordmark h1{margin:0;font-family:var(--font-titoli);font-size:54px;font-weight:800;line-height:1;
    color:var(--green-900);letter-spacing:-.015em;white-space:nowrap}
  .wordmark h1 em{font-style:normal;color:inherit}
  .wordmark p{margin:9px 0 0;font-family:var(--font-testo);font-size:13px;letter-spacing:.17em;text-transform:uppercase;
    color:var(--green-700);font-weight:700;line-height:1.5}
  /* Richiamo in evidenza nella barra in alto (vedi $navAvviso in inc/nav.php).
     Oro come il bottone principale del sito: è l'unico accento che TavoliVerdi
     usa per dire "guarda qui", e usarne un secondo diluirebbe entrambi.
     `white-space:normal` è necessario perché .btn non c'entra nulla con questo
     elemento: la frase è lunga e deve andare a capo su due righe invece di
     allargare la barra fino a spingere il marchio fuori schermo. */
  .avvisone{display:inline-flex;align-items:center;gap:11px;max-width:330px;
    font-family:var(--font-testo);font-size:13.5px;font-weight:700;line-height:1.3;
    text-decoration:none;padding:11px 16px;border-radius:12px;white-space:normal;
    background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#2a2107;
    box-shadow:0 4px 12px rgba(184,145,47,.28), inset 0 1px 0 rgba(255,255,255,.6);
    transition:.16s}
  .avvisone:hover{filter:brightness(1.05)}
  .avvisone .ico{font-size:19px;flex:none}
  /* Più richiami insieme: incolonnati, non affiancati. Sono frasi lunghe (una
     domanda intera), e messi in fila si stringerebbero a due parole per riga
     rubando spazio al marchio. Incolonnati crescono in altezza, che nella barra
     c'è. La larghezza la tiene il gruppo, non i singoli, così restano larghi
     uguali anche con testi di lunghezza diversa. */
  .avvisoni{display:flex;flex-direction:column;gap:8px;max-width:360px}
  .avvisoni .avvisone{max-width:none}

  /* con il marchio grande, il menu prende una riga propria sotto */
  nav{display:flex;gap:4px;flex-wrap:wrap;font-family:var(--font-testo);flex:1 1 100%;
    border-top:1px solid var(--line);margin-top:15px;padding-top:11px}
  nav a{color:var(--green-800);text-decoration:none;font-size:14px;font-weight:600;padding:8px 13px;
    border-radius:8px;transition:.16s}
  nav a:hover{background:var(--mint-200);color:var(--green-900)}
  nav a.on{color:var(--gold-dk);box-shadow:inset 0 -2px 0 var(--gold)}
  .authbtns{display:flex;gap:10px;font-family:var(--font-testo)}
  .btn{font-family:var(--font-testo);font-size:14px;font-weight:700;border-radius:10px;padding:10px 18px;
    text-decoration:none;cursor:pointer;border:1px solid transparent;transition:.16s;white-space:nowrap}
  .btn.ghost{color:var(--green-800);border-color:var(--line);background:#fff}
  .btn.ghost:hover{border-color:var(--sage);background:var(--mint-100)}
  .btn.gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#2a2107;
    box-shadow:0 4px 12px rgba(184,145,47,.28), inset 0 1px 0 rgba(255,255,255,.6)}
  .btn.gold:hover{filter:brightness(1.05)}

  .hero{display:grid;grid-template-columns:1.35fr 1fr;gap:36px;align-items:center;
    max-width:1080px;margin:0 auto;padding:52px 32px 42px}
  /* riga su una sola linea: la spaziatura ampia la faceva andare a capo.
     Sul telefono torna a spezzarsi, altrimenti uscirebbe dallo schermo. */
  .hero .kick{font-family:var(--font-testo);font-size:12px;letter-spacing:.15em;text-transform:uppercase;
    color:var(--gold-dk);margin:0 0 14px;font-weight:700;white-space:nowrap}
  .hero h2{margin:0;font-size:40px;line-height:1.06;font-weight:700;color:var(--green-900);
    letter-spacing:-.022em;text-wrap:balance}
  .hero h2 em{font-style:italic;color:var(--gold-dk)}
  .hero p{margin:20px 0 0;font-size:17px;line-height:1.62;color:var(--ink-dim);max-width:47ch;font-family:var(--font-testo)}
  .hero .cta{display:flex;gap:13px;margin-top:26px;flex-wrap:wrap}
  .hero .btn{font-size:15px;padding:13px 22px}
  /* Assi che fluttuano (immagine con trasparenza). Gli attributi width/height
     nell'HTML riservano lo spazio prima che l'immagine arrivi, così il testo
     accanto non si sposta a caricamento avvenuto. */
  .fan{display:block;width:100%;max-width:400px;height:auto;margin:0 auto;
    filter:drop-shadow(0 18px 26px rgba(22,56,42,.22))}

  /* statistiche raggruppate: si deve capire se si contano giocatori o partite */
  .statwrap{background:rgba(255,255,255,.88);border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)}
  .statgroups{max-width:1080px;margin:0 auto;padding:22px 32px;
    display:grid;grid-template-columns:2fr 1fr;gap:30px}
  .statgroup + .statgroup{border-left:1px solid var(--line);padding-left:30px}
  .statgroup .lbl{display:flex;align-items:center;gap:11px;font-family:var(--font-testo);font-size:11px;
    font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--green-700);margin-bottom:14px}
  .statgroup .lbl::after{content:"";flex:1;height:1px;background:var(--line)}
  .statrow{display:grid;gap:16px}
  .statgroup.players .statrow{grid-template-columns:repeat(4,1fr)}
  .statgroup.games .statrow{grid-template-columns:repeat(2,1fr)}
  .statrow .st{text-align:center}
  .statrow .n{font-family:var(--font-testo);font-weight:800;font-size:25px;color:var(--green-700);
    font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  .statrow .l{font-family:var(--font-testo);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-dim);margin-top:7px;font-weight:600}

  .panel{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;
    box-shadow:0 10px 26px rgba(22,56,42,.06)}
  .panel h3{margin:0;font-family:var(--font-titoli);font-size:19px;font-weight:700;letter-spacing:-.01em;padding:15px 20px;
    border-bottom:1px solid var(--line);color:var(--green-800);display:flex;align-items:center;gap:9px;
    background:linear-gradient(180deg,var(--mint-100),#fff)}
  .panel h3::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
  /* Rimando nell'intestazione, come nel pannello Albo. Si usa margin-left:auto
     invece di justify-content: quest'ultimo separerebbe il pallino dorato dal
     titolo, spingendoli ai due estremi. */
  .panel h3 a{margin-left:auto;font-family:var(--font-testo);font-size:12.5px;font-weight:700;
    letter-spacing:0;color:var(--green-700);text-decoration:none;white-space:nowrap}
  .panel h3 a:hover{color:var(--green-900);text-decoration:underline}
  /* altezza fissa: i messaggi arrivano dal DB, la pagina non deve allungarsi */
  .news{padding:4px 20px 12px;height:420px;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:var(--sage) var(--mint-50)}
  .news::-webkit-scrollbar{width:11px}
  .news::-webkit-scrollbar-track{background:var(--mint-50)}
  .news::-webkit-scrollbar-thumb{background:var(--sage);border-radius:99px;border:3px solid var(--mint-50)}
  .news::-webkit-scrollbar-thumb:hover{background:var(--green-700)}
  .news .item{padding:16px 0;border-bottom:1px solid var(--line)}
  .news .item:last-child{border-bottom:0}
  .news .date{display:inline-block;font-family:var(--font-testo);font-size:11px;font-weight:700;letter-spacing:.05em;
    color:var(--gold-dk);background:var(--gold-soft);padding:3px 9px;border-radius:6px;text-transform:uppercase}
  .news .item h4{margin:10px 0 5px;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--green-900)}
  .news .item p{margin:0;font-family:var(--font-testo);font-size:14.5px;line-height:1.55;color:var(--ink-dim)}
  .lead{padding:10px 20px 4px;font-family:var(--font-testo)}
  .lead .rank{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
  .lead .rank:last-child{border-bottom:0}
  .lead .pos{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-weight:800;font-size:13px;
    background:var(--mint-200);color:var(--green-800);font-variant-numeric:tabular-nums}
  /* podio: oro, argento, bronzo chiaro */
  .lead .rank.top .pos{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#2a2107;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
  .lead .rank.second .pos{background:linear-gradient(180deg,#eef2f4,#c3ccd0);color:#333f43;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
  .lead .rank.third .pos{background:linear-gradient(180deg,#f3d9ba,#dcaf7f);color:#4c3017;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
  .lead .nm{flex:1;font-weight:600;font-size:14.5px;color:var(--ink)}
  .lead .pt{font-variant-numeric:tabular-nums;color:var(--ink-dim);font-size:13.5px;font-weight:600}

  /* Variante a tre colonne (Livello): nome, livello e BOL incolonnati, con
     larghezze fisse sui numeri così le cifre si allineano verticalmente e i
     valori si confrontano scorrendo l'occhio, senza rileggere ogni riga. */
  .lead.tre .rank,.lead.tre .intestazione{display:grid;
    grid-template-columns:24px minmax(0,1fr) 44px 74px;gap:10px;align-items:center}
  .lead.tre .intestazione{padding:0 0 9px;border-bottom:1px solid var(--line);
    font-family:var(--font-testo);font-size:10.5px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-dim)}
  .lead.tre .intestazione span:nth-child(3),
  .lead.tre .intestazione span:nth-child(4){text-align:right}
  .lead.tre .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lead.tre .liv{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;
    font-size:14px;color:var(--green-800)}
  .lead.tre .pt{text-align:right}
  .champ{margin:14px 20px 20px;text-align:center;padding:18px;border:1px solid var(--line);border-radius:12px;
    background:linear-gradient(180deg,var(--gold-soft),#fff)}
  .champ .badge{width:52px;height:52px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;
    font-size:24px;background:#fff;border:1px solid var(--gold-hi)}
  .champ .t{font-family:var(--font-testo);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-dim);font-weight:700}
  .champ .w{font-size:22px;color:var(--green-800);font-weight:700;letter-spacing:-.015em;margin-top:6px}
  .champ .sub{font-family:var(--font-testo);font-size:13px;color:var(--ink-dim);margin-top:4px}

  /* — i tre passi: la procedura del vecchio paragrafo, resa scansionabile — */
  .steps{max-width:1080px;margin:0 auto;padding:34px 32px 4px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  /* Colonna flessibile: serve al link in fondo, che con margin-top:auto viene
     spinto in basso. Senza, i tre link seguirebbero il testo e resterebbero a
     altezze diverse ogni volta che una descrizione va a capo una riga in piu'. */
  .step{background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px;
    box-shadow:0 10px 26px rgba(22,56,42,.06);
    display:flex;flex-direction:column;align-items:flex-start}
  .step .num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
    font-family:var(--font-testo);font-weight:800;font-size:15px;background:var(--green-800);
    color:var(--gold-hi);margin-bottom:13px}
  .step h4{margin:0 0 6px;font-family:var(--font-titoli);font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--green-900)}
  .step p{margin:0;font-family:var(--font-testo);font-size:14px;line-height:1.55;color:var(--ink-dim)}
  .step a{display:inline-block;margin-top:auto;padding-top:11px;font-family:var(--font-testo);font-size:13px;font-weight:700;
    color:var(--green-700);text-decoration:none}
  .step a:hover{color:var(--green-900);text-decoration:underline}
  /* aggancio alla guida sotto i tre pulsanti di servizio */
  .guidalink{display:block;text-align:center;font-family:var(--font-testo);font-size:13px;font-weight:700;
    color:var(--green-700);text-decoration:underline;padding:2px 0 2px}
  .guidalink:hover{color:var(--green-900)}

  /* — impianto a due colonne con rail destra (come l'originale) — */
  .layout{max-width:1080px;margin:0 auto;padding:42px 32px 8px;
    display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
  .maincol,.rail{display:flex;flex-direction:column;gap:18px}

  .toggle{display:flex;gap:4px;background:var(--mint-200);border:1px solid var(--line);
    border-radius:999px;padding:3px;font-family:var(--font-testo)}
  .toggle button{flex:1;border:0;background:transparent;border-radius:999px;padding:7px 6px;cursor:pointer;
    font-size:11px;font-weight:700;color:var(--green-800);transition:.15s}
  .toggle button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 4px rgba(13,62,40,.18)}
  .toggle button:focus-visible{outline:2px solid var(--sage);outline-offset:2px}

  .actions{display:flex;flex-direction:column;gap:10px}
  /* testo vero, dentro la palette chiara della pagina */
  /* Sono le tre azioni che portano dove il sito vuole portare — registrati,
     abbonati, scarica — quindi il testo e' piu' grande di quello dei riquadri
     accanto: si devono leggere prima. Cresce con loro anche il dischetto
     dell'icona, o resterebbe sproporzionato. */
  .actions a{display:flex;align-items:center;gap:13px;padding:16px 18px;line-height:1.25;
    background:linear-gradient(180deg,#ffffff,var(--mint-100));border:1px solid var(--sage);
    /* Scritta nel verde scuro della pagina, lo stesso dei titoli dei riquadri e
       dei bottoni: l'oro resta all'icona, che e' l'accento, mentre il testo torna
       a leggersi come testo. Due ori vicini — glifo e scritta — si annullavano. */
    color:var(--green-800);text-decoration:none;font-family:var(--font-testo);font-weight:700;font-size:17px;
    border-radius:12px;box-shadow:0 5px 14px rgba(13,62,40,.10)}
  .actions a:hover{background:linear-gradient(180deg,var(--mint-50),var(--mint-200));
    border-color:var(--green-700);box-shadow:0 9px 20px rgba(13,62,40,.16)}
  .actions .ico{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;
    background:linear-gradient(180deg,var(--green-700),var(--green-800));font-size:19px;color:#eaf7ee;
    box-shadow:0 2px 6px rgba(13,62,40,.28)}

  /* Icone Material incorporate (vedi la funzione icona() in index.php). Classe a
     parte perche' `.ico` da solo lo usano anche altri riquadri con dei glifi di
     testo: cambiando quella regola sarebbero cambiati pure loro.
     28 su 38 = riempie il quadrato lasciando 5px di margine per lato — un'icona
     che tocca il bordo sembra tagliata.
     Il colore sta QUI e non nel tracciato: gli <svg> ereditano `currentColor`,
     quindi basta questa riga per ricolorarle tutte. --gold-hi e non --gold: sul
     verde scuro l'oro pieno perde stacco, quello chiaro e' lo stesso oro della
     parte alta dei bottoni. */
  .actions .ico.mat{color:var(--gold-hi)}
  .actions .ico.mat svg{width:28px;height:28px;display:block;fill:currentColor}
  /* La versione sotto "Download gioco" resta piccola: e' una precisazione, non
     un secondo titolo. */
  .actions small{display:block;font-weight:600;font-size:12px;color:var(--ink-dim);margin-top:3px}

  /* riga assistenza: l'email di supporto, sopra le notizie come nell'originale */
  .support{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:15px;
    background:linear-gradient(180deg,#fdf8ea,var(--gold-soft));border:1px solid #e5d2a0;
    text-decoration:none;font-family:var(--font-testo);box-shadow:0 8px 20px rgba(22,56,42,.06);transition:.16s}
  .support:hover{border-color:var(--gold);box-shadow:0 11px 24px rgba(22,56,42,.1)}
  .support .ico{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
    background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#2a2107;font-size:18px}
  .support strong{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:#8a6c14;margin-bottom:3px}
  .support span.t{font-size:14.5px;color:var(--ink)}
  .support span.t b{color:var(--green-800);font-weight:800}

  .box{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;
    box-shadow:0 10px 26px rgba(22,56,42,.06)}
  .box h4{margin:0;font-family:var(--font-titoli);font-size:17px;font-weight:700;letter-spacing:-.01em;padding:13px 18px;
    border-bottom:1px solid var(--line);color:var(--green-800);background:linear-gradient(180deg,var(--mint-100),#fff)}
  .box .bd{padding:15px 18px 17px}
  .box .hint{margin:0;padding:11px 18px 0;font-family:var(--font-testo);font-size:12px;line-height:1.5;
    color:var(--ink-dim)}
  .box label{display:block;font-family:var(--font-testo);font-size:10.5px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-dim);margin-bottom:5px}
  .box input{width:100%;font-family:var(--font-testo);font-size:14px;padding:9px 11px;border:1px solid var(--line);
    border-radius:9px;background:var(--mint-50);color:var(--ink);margin-bottom:12px}
  .box input:focus{outline:2px solid var(--sage);outline-offset:1px}
  .box .btn{display:block;text-align:center;width:100%}
  .forgot{display:block;text-align:center;font-family:var(--font-testo);font-size:12px;color:var(--green-700);
    margin-top:11px;text-decoration:underline}
  /* Esito fallito dell'accesso all'area privata. Stessi colori di .errori (il
     rosso spento dei moduli), ma dentro un riquadro stretto: niente elenco
     puntato, una frase sola, sopra i campi da correggere. */
  .erroreaccesso{margin:0 0 13px;padding:9px 11px;border-radius:9px;
    background:#fdeeea;border:1px solid #e6b3a6;
    font-family:var(--font-testo);font-size:13px;line-height:1.45;color:#9c3320}
  .search{display:flex;gap:8px;align-items:flex-start}
  .search input{margin:0}
  .search .btn{width:auto;flex:none;padding:10px 14px}
  /* Etichetta che serve solo a chi naviga con un lettore di schermo: il
     segnaposto dentro la casella non è un'etichetta (sparisce appena si scrive),
     ma qui accanto non c'è spazio per scriverla. Non si usa display:none, che la
     toglierebbe anche a loro: si porta fuori dallo schermo. */
  .soloperlettori{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0}

  /* — le quattro classifiche a tutta larghezza, sotto le due colonne — */
  .sechead{max-width:1080px;margin:0 auto;padding:14px 32px 2px;display:flex;align-items:baseline;
    justify-content:space-between;gap:16px;flex-wrap:wrap}
  .sechead h3{margin:0;font-family:var(--font-titoli);font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--green-900)}
  .sechead a{font-family:var(--font-testo);font-size:13px;font-weight:700;color:var(--green-700);text-decoration:none}
  .sechead a:hover{color:var(--green-900);text-decoration:underline}
  /* Due file da tre. Sopra ciò che è permanente (abilità, carriera, gloria),
     sotto ciò che si azzera e riparte: la divisione corrisponde a una
     differenza vera, non è solo impaginazione. Stessa larghezza per tutti,
     così le colonne delle due file restano allineate. */
  .rankings{max-width:1080px;margin:0 auto;padding:10px 32px 6px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
  .rankings.due{grid-template-columns:repeat(2,1fr)}
  .rankings + .rankings{padding-top:0}
  .rankings .box{display:flex;flex-direction:column}
  .rankings .lead{margin-top:auto}

  /* Griglia dei capitoli della guida. Tre colonne come le classifiche in home,
     ma larga 900 e non 1080: è la misura del pannello che le sta sopra, e i due
     blocchi devono avere gli stessi bordi verticali. Una griglia più larga del
     pannello che la introduce fa sembrare la pagina montata da due pezzi presi
     altrove — e 900 è già una delle tre larghezze del sito, non una misura nuova.
     Padding orizzontale 32px identico a .pagina: è quello che allinea davvero i
     bordi, la sola max-width non basterebbe.
     Testate e interni un po' più compatti di .rankings perché le colonne qui
     sono da 268px invece che da 326: con le misure della home i titoli lunghi
     andrebbero a capo tre volte. */
  .capitoli{max-width:900px;margin:0 auto;padding:10px 32px 6px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
  .capitoli + .capitoli{padding-top:0}
  .capitoli .box{display:flex;flex-direction:column}
  .capitoli .box h4{font-size:15px;padding:11px 14px}
  /* L'occhiello della scheda va nel verde del suo titolo, non nel grigio dei
     testi di servizio. Non è una questione di gusto: in home il `.hint` è una
     precisazione tecnica sotto una classifica, e il grigio dice giustamente
     "leggimi dopo". Qui invece è l'unica frase che spiega a chi serve il
     capitolo — è la cosa da leggere per prima, e il grigio la spegneva. */
  .capitoli .box .hint{padding:9px 14px 0;font-size:11.5px;color:var(--green-800)}
  .capitoli .box .bd{padding:11px 14px 13px}

  /* ── Schede CLICCABILI (il menù dell'area privata) ──────────────────────
     Stessa scheda dei capitoli della guida, ma è tutta un link: il bersaglio è
     il riquadro intero, non tre parole dentro. Un <a> eredita colore e
     sottolineatura dal browser, quindi vanno spenti qui — senza, il titolo
     diventerebbe blu sottolineato e la scheda non somiglierebbe più a nessuna
     altra del sito. Il sollevamento al passaggio del mouse è l'unica cosa che
     dice "questo si preme": una scheda ferma sembra un riquadro di sola lettura. */
  .capitoli a.box{display:flex;flex-direction:column;text-decoration:none;color:inherit;
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
  .capitoli a.box:hover{transform:translateY(-2px);border-color:var(--green-700);
    box-shadow:0 3px 8px rgba(13,62,40,.12), 0 16px 30px rgba(13,62,40,.16)}
  .capitoli a.box:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
  /* La freccia in fondo alla scheda: è l'invito, e sta in basso a sinistra dove
     finisce la lettura. Il .bd ha margin-top:auto perché le schede della riga
     restino allineate anche quando gli occhielli hanno lunghezze diverse. */
  .capitoli a.box .bd{margin-top:auto}
  /* L'occhiello delle schede cliccabili è più grande di quello dei capitoli
     della guida (11,5px), e non è una svista: là è una frase di contorno sotto
     un titolo che si spiega da solo, qui è l'UNICA riga che dice cosa si trova
     dentro la sezione — la si legge per scegliere dove andare, e a undici punti
     e mezzo si salta. 14px è il corpo dei testi di servizio del sito, non una
     misura inventata per l'occasione. */
  .capitoli a.box .hint{font-size:14px;line-height:1.5;padding:10px 14px 0}
  .capitoli a.box .vai{font-family:var(--font-testo);font-size:13px;font-weight:700;
    color:var(--green-700)}
  .capitoli a.box:hover .vai{color:var(--green-800)}

  /* Il ritorno al menù, in fondo a ogni sezione dell'area privata.
     Il margine SOTTO non è decorazione: .pagina si chiude con soli 8px di
     padding, quindi senza questo il pulsante resterebbe appiccicato alla fascia
     verde del piè di pagina — un tasto che tocca il bordo di un'altra zona
     sembra farne parte, e sul telefono si preme quello sbagliato.
     I 34px sono gli stessi con cui .pagina si apre in alto: la sezione respira
     uguale sopra e sotto. */
  .tornamenu{margin:18px 0 34px}

  /* Il Ranking si distingue senza essere più grande: testata a colore pieno
     fra due testate chiare, e un'ombra appena più marcata che lo solleva. */
  /* Due ombre sovrapposte: una stretta e scura che stacca il bordo, una ampia e
     morbida che dà l'altezza. Un'ombra sola, per quanto la si carichi, resta
     una macchia sfumata e non si legge come sollevamento. */
  .box.primario{border-color:var(--green-700);
    box-shadow:0 3px 8px rgba(13,62,40,.16), 0 20px 40px rgba(13,62,40,.26)}
  .box.primario h4{background:linear-gradient(180deg,var(--green-700),var(--green-800));
    color:#fff;border-bottom-color:var(--green-800)}
  .box.primario .hint{color:var(--green-800)}
  /* NB: nessuna sovrascrittura dei colori delle posizioni — anche il Ranking
     usa oro, argento e bronzo come tutte le altre classifiche. */

  /* ─── Albo: i podi della settimana conclusa ────────────────────────────────
     Tre colonne nello stesso ordine delle tre classifiche settimanali qui
     sopra, così si incolonnano: sopra come sta andando, sotto chi ha vinto. */
  /* Fila di chiusura: i risultati del torneo hanno bisogno di larghezza (podio
     con nickname, VP e BOL sulla stessa riga), gli altri due sono riquadri di
     servizio e stanno impilati di fianco. Stesse proporzioni del blocco in
     alto — 1fr più una colonna da 300px — così la pagina resta sullo stesso
     impianto dall'inizio alla fine. */
  .chiusura{max-width:1080px;margin:0 auto;padding:22px 32px 6px;
    display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:stretch}
  .chiusura .colonna{display:flex;flex-direction:column;gap:18px}
  /* Il pannello del torneo si allunga fino a pareggiare la colonna di destra.
     Lo spazio in più lo assorbe il riquadro del vincitore, che si centra al
     proprio interno: il podio resta appoggiato in fondo e i due bordi
     inferiori si allineano. */
  .chiusura .panel{display:flex;flex-direction:column}
  .chiusura .panel .champ{flex:1;display:flex;flex-direction:column;justify-content:center}

  /* ── Testo libero scritto dallo staff (es. il regolamento di un tipo di torneo)
     Reso da testoInHtml(): capoversi, titoletti ed elenchi. I titoletti hanno un
     selettore PROPRIO e non ereditano da `.albo .col h5`, che e' quello delle
     colonne dell'albo: quello e' maiuscoletto piccolo e centrato, adatto a una
     intestazione di colonna e illeggibile come titolo di sezione.
     La misura di lettura si ferma a 68 caratteri: la card e' larga 1080px, ma una
     riga cosi' lunga si perde — il testo si allarga fino a un punto e poi basta. */
  .testo{font-family:var(--font-testo);font-size:15px;line-height:1.65;color:var(--ink)}
  .testo p{margin:0 0 13px;max-width:68ch}
  .testo ul{margin:0 0 13px;padding-left:22px;max-width:68ch}
  .testo li{margin:0 0 6px}
  .testo h5{margin:22px 0 9px;font-family:var(--font-titoli);font-size:16px;font-weight:700;
    letter-spacing:-.01em;text-transform:none;color:var(--green-800);
    padding-bottom:6px;border-bottom:1px solid var(--mint-100);max-width:68ch}
  .testo h5:first-child{margin-top:0}

  .albo{max-width:1080px;margin:0 auto;padding:10px 32px 6px}
  .albo .box{padding-bottom:6px}
  .albo .box h4{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .albo .box h4 a{font-family:var(--font-testo);font-size:12.5px;font-weight:700;
    color:var(--green-700);text-decoration:none;letter-spacing:0}
  .albo .box h4 a:hover{text-decoration:underline}
  .albo .colonne{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:18px 20px 20px}
  .albo .col{text-align:center}
  .albo .col h5{margin:0 0 14px;font-family:var(--font-testo);font-size:11px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;color:var(--green-700);
    padding-bottom:9px;border-bottom:1px solid var(--line)}
  .albo .vinc{padding:11px 0}
  .albo .vinc + .vinc{border-top:1px solid var(--mint-100)}
  .albo .nome{font-weight:700;font-size:15px;color:var(--ink);word-break:break-word}
  /* Medaglia disegnata in CSS: se avrai le immagini vere basta sostituirla */
  /* Con quanto ha vinto: senza, l'albo dice chi è salito sul podio ma non che
     settimana ha fatto — ed è il dato che il vecchio impianto non conservava. */
  .albo .punti{margin-top:2px;font-family:var(--font-testo);font-size:11.5px;font-weight:700;color:var(--ink-dim)}
  .albo .col .hint{margin:14px 0 0;font-family:var(--font-testo);font-size:12px;color:var(--ink-dim)}
  .albo .colonne > .hint{grid-column:1/-1;margin:0;text-align:center;
    font-family:var(--font-testo);font-size:13px;line-height:1.55;color:var(--ink-dim)}
  .albo .med{width:34px;height:34px;border-radius:50%;margin:7px auto 0;display:grid;
    place-items:center;font-weight:800;font-size:14px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(22,56,42,.18)}
  .albo .med.oro     {background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#2a2107}
  .albo .med.argento {background:linear-gradient(180deg,#eef2f4,#c3ccd0);color:#333f43}
  .albo .med.bronzo  {background:linear-gradient(180deg,#f3d9ba,#dcaf7f);color:#4c3017}

  /* spazi pubblicitari: altezza riservata in anticipo, così il caricamento
     dell'annuncio non fa saltare il contenuto già letto */
  .ad{border:1px dashed var(--sage);border-radius:12px;background:rgba(255,255,255,.5);
    display:grid;place-items:center;text-align:center;font-family:var(--font-testo);padding:12px}
  .ad .lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--green-700)}
  .ad .dim{font-size:12px;color:var(--ink-dim);margin-top:5px}
  .adwide{max-width:1080px;margin:0 auto;padding:16px 32px 2px}
  /* L'ultima fascia tocca il piè di pagina: senza respiro l'annuncio sembrerebbe
     appiccicato al bordo verde scuro, quasi ne facesse parte. */
  .adwide.ultimo{padding-bottom:34px}
  .adwide .ad{min-height:104px}

  /* visualizzatore avatar a rotazione, come il vecchio PictureSlides */
  .avshow{display:flex;flex-direction:column;align-items:center}
  .avframe{width:106px;height:132px;border:3px solid var(--gold);border-radius:10px;overflow:hidden;
    background:#fff;box-shadow:0 12px 26px rgba(22,56,42,.2)}
  .avframe img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .5s ease}
  .avframe img.fade{opacity:0}
  .avname{margin-top:12px;font-family:var(--font-titoli);font-size:19px;font-weight:700;color:var(--green-800);
    min-height:26px}
  .avlink{margin-top:8px;font-family:var(--font-testo);font-size:12.5px;color:var(--green-700);
    text-decoration:underline}
  .avlink:hover{color:var(--green-900)}
  .footer{background:var(--green-900);border-top:3px solid var(--gold);padding:26px 32px;
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
    font-family:var(--font-testo);font-size:13px;color:var(--mint-300)}
  .footer img{height:80px;width:auto;display:block}
  .footer .fbrand{display:flex;align-items:center;gap:14px}
  .footer .fbrand span{font-family:var(--font-titoli);font-size:26px;font-weight:800;letter-spacing:-.015em;color:#fff;line-height:1}
  /* Il nome è una parola sola: stesso colore in tutto, come nella testata */
  .footer .fbrand span em{font-style:normal;color:inherit}
  .footer a{color:#fff;text-decoration:none}
  .footer a:hover{color:var(--gold-hi)}
  /* ─── Pagine con modulo (registrazione, login, iscrizione…) ────────────────
     Colonna centrale stretta e leggibile. Il modulo vive dentro un .panel come
     gli altri riquadri del sito, così eredita bordo, ombra e testata dorata. */
  .pagina{max-width:760px;margin:0 auto;padding:34px 32px 8px}
  .breadcrumb{font-family:var(--font-testo);font-size:12.5px;color:var(--ink-dim);margin:0 0 16px}
  .breadcrumb a{color:var(--green-700);text-decoration:none;font-weight:600}
  .breadcrumb a:hover{text-decoration:underline}
  .breadcrumb .qui{color:var(--gold-dk);font-weight:700}

  /* Cartiglio in cima al modulo: le condizioni della prova, ben visibili */
  .prova{margin:0 0 20px;padding:16px 20px;border-radius:12px;
    background:linear-gradient(180deg,#fdf8ea,var(--gold-soft));border:1px solid #e5d2a0;
    font-family:var(--font-testo);font-size:14px;line-height:1.55;color:var(--ink);
    text-align:center}
  .prova b{color:var(--green-800)}
  .prova .grande{display:block;font-size:15px;font-weight:800;color:var(--green-800);
    margin:10px 0 4px}

  /* Blocco del modulo dentro un pannello */
  .modulo{padding:8px 22px 22px}
  .modulo .intro{font-family:var(--font-testo);font-size:14px;line-height:1.55;color:var(--ink-dim);
    margin:14px 0 4px}
  .req{color:var(--gold-dk);font-weight:800}

  fieldset{border:1px solid var(--line);border-radius:12px;padding:18px 18px 6px;margin:18px 0 0;
    background:var(--mint-50)}
  legend{font-family:var(--font-testo);font-size:11px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--green-700);padding:0 8px}
  .campo{margin:0 0 16px}
  .campo > label{display:block;font-family:var(--font-testo);font-size:11px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px}
  .campo input,.campo select{width:100%;font-family:var(--font-testo);font-size:15px;padding:11px 12px;
    border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
  .campo input:focus,.campo select:focus{outline:2px solid var(--sage);outline-offset:1px;border-color:var(--sage)}
  .campo .aiuto{display:block;font-family:var(--font-testo);font-size:12px;color:var(--ink-dim);margin-top:5px}
  /* due campi affiancati su schermo largo (Nome+Cognome, Sesso+Provincia) */
  .duecolonne{display:grid;grid-template-columns:1fr 1fr;gap:16px}

  /* avvisi gialli come nell'originale, riportati nella palette chiara */
  .avviso{font-family:var(--font-testo);font-size:13px;line-height:1.5;color:var(--ink);
    background:#fffbe9;border:1px solid #e5d2a0;border-radius:9px;padding:10px 13px;margin:12px 0 0}
  .avviso b{color:var(--gold-dk);text-transform:uppercase;font-size:11px;letter-spacing:.06em}

  /* riga di accettazione: casella + testo con i link ai documenti */
  .accetta{display:flex;gap:11px;align-items:flex-start;margin:20px 0 0;padding:14px 16px;
    border:1px solid var(--sage);border-radius:11px;background:#fff;
    font-family:var(--font-testo);font-size:14px;line-height:1.5;color:var(--ink)}
  .accetta input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--green-700)}
  .accetta a{color:var(--green-800);font-weight:700;text-decoration:underline}
  .accetta a:hover{color:var(--green-900)}
  .privacy{font-family:var(--font-testo);font-size:12px;line-height:1.55;color:var(--ink-dim);
    margin:16px 0 0}
  .privacy a{color:var(--green-700)}
  .modulo .invia{margin:14px 0 4px;font-size:16px;padding:14px 26px;width:100%}

  /* "Aspetta un'email": deve leggerlo PRIMA di premere Invia, altrimenti non la
     cerca e quella finita nello spam è persa. Per questo è un riquadro con la
     busta, non una riga grigia sotto il pulsante. */
  .attesa-email{display:flex;gap:14px;align-items:flex-start;margin:22px 0 0;padding:15px 17px;
    border:1px solid var(--sage);border-left:5px solid var(--green-700);border-radius:11px;
    background:var(--mint-50);font-family:var(--font-testo);font-size:14px;line-height:1.55;color:var(--ink)}
  .attesa-email .busta{font-size:26px;line-height:1.1;color:var(--green-700);flex:none}
  .attesa-email b{color:var(--green-800)}
  .attesa-email > div > b{display:block;font-size:15.5px;margin-bottom:6px}
  .attesa-email p{margin:6px 0 0}
  .attesa-email .minore{font-size:13px;color:var(--ink-dim)}

  /* ─── La fotografia del giocatore (avatar.php) ────────────────────────────
     Due stati dello stesso riquadro: PRIMA si sceglie il file (.fotozona, con
     il trascinamento), DOPO si inquadra la faccia (.fotoritaglio). Ne è visibile
     uno solo per volta — a nasconderli è l'attributo `hidden`, che JavaScript
     sposta da uno all'altro.
     Le misure NON sono nuove: il visore è l'avatar vero (80×100) ingrandito
     due volte e mezzo, cioè 200×250. Il rapporto 4:5 deve restare esatto,
     altrimenti si mostrerebbe un taglio diverso da quello che poi si vede in
     gioco — ed è il motivo per cui l'altezza è scritta, non lasciata all'aria. */
  /* Aria sotto il riquadro: quello che segue (l'avviso giallo, l'autorizzazione)
     e' roba a se', non il seguito della stessa cosa, e attaccato si legge come
     un blocco solo. Il margine sta sul blocco e non sulla zona tratteggiata,
     cosi' vale anche quando al suo posto c'e' il ritaglio. */
  .foto{margin:0 0 22px}
  .fotozona{border:2px dashed var(--sage);border-radius:12px;background:#fff;
    padding:22px 18px;text-align:center;transition:background .15s,border-color .15s}
  /* Mentre ci si tiene sopra un file trascinato: il riquadro deve dire "sì, qui" */
  .fotozona.sopra{background:var(--mint-50);border-color:var(--green-700)}
  .fotozona .fotoicona{font-size:30px;line-height:1;display:block;margin-bottom:8px;filter:grayscale(.2)}
  .fotoinvito{margin:0 0 12px;font-family:var(--font-testo);font-size:14.5px;color:var(--ink)}
  .fotoinvito .trascina{color:var(--ink-dim)}
  /* Su un telefono non si trascina niente: la frase sparisce invece di
     invitare a fare una cosa che lì non si può fare. È scritta in coda proprio
     per poterla togliere lasciando un invito che sta ancora in piedi da solo. */
  @media (hover:none){ .fotoinvito .trascina{display:none} }
  .fototasto{margin:0}
  /* Il campo file vero è invisibile ma NON rimosso: a premerlo è l'etichetta
     qui sopra (label for=…), che funziona senza JavaScript, e il file continua
     a viaggiare col modulo. display:none lo toglierebbe dalla tabulazione da
     tastiera; così invece resta raggiungibile e il bordo di fuoco si vede sul
     pulsante grazie a :focus-within. */
  .fototasto input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
  .fototasto:focus-within .btn{outline:2px solid var(--sage);outline-offset:2px}
  .fotonome{margin:10px 0 0;font-family:var(--font-testo);font-size:13px;color:var(--ink-dim);
    word-break:break-all}
  .fotonome.errore{color:#9c3320;font-weight:700}

  /* QUESTA RIGA VA PRESA SUL SERIO, e deve stare qui accanto a quella dopo.
     `hidden` il browser lo applica con una regola sua che vale `display:none`,
     ma è nel foglio PREDEFINITO: qualunque `display` scritto da noi la batte.
     Senza, il pannello del ritaglio resta visibile SEMPRE — anche all'apertura,
     quando la fotografia non c'è ancora e si vede solo il testo alternativo
     dell'immagine vuota, appiccicato sotto al riquadro tratteggiato.
     Vale per ogni elemento che si nasconde con `hidden` e a cui diamo un
     display: se un domani se ne aggiunge un altro, gli serve la stessa riga. */
  .fotoritaglio[hidden]{display:none}
  .fotoritaglio{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
  .visore{flex:none;width:200px;height:250px;border-radius:10px;overflow:hidden;
    border:1px solid var(--line);background:var(--mint-50);position:relative;
    cursor:grab;
    /* Senza questo, sul telefono il dito fa scorrere la pagina invece di
       spostare la fotografia, e il ritaglio diventa impossibile da fare. */
    touch-action:none}
  .visore.presa{cursor:grabbing}
  .visore img{position:absolute;top:0;left:0;max-width:none;transform-origin:0 0;
    user-select:none;-webkit-user-drag:none}
  .fotocomandi{flex:1 1 240px;min-width:220px}
  /* I due passi del ritaglio: una riga per azione, con il pallino. Il corpo e la
     misura sono quelli di .fotoistruzioni qui sotto — non è una scala nuova —
     ma il colore è quello del testo pieno, non lo smorzato: sono istruzioni da
     eseguire, non una nota. Il pallino verde li lega ai comandi accanto. */
  .fotopassi{margin:0 0 10px;padding-left:18px;font-family:var(--font-testo);
    font-size:13.5px;line-height:1.5;color:var(--ink)}
  .fotopassi li{margin:0 0 5px}
  .fotopassi li::marker{color:var(--green-700)}
  .fotoistruzioni{margin:0 0 14px;font-family:var(--font-testo);font-size:13.5px;
    line-height:1.55;color:var(--ink-dim)}
  .fotozoomlab{display:block;font-family:var(--font-testo);font-size:11px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px}
  .fotocomandi input[type=range]{width:100%;accent-color:var(--green-700);margin:0 0 16px}
  .fotocomandi .btn{width:100%}

  /* Togliere la foto: chiuso, perché è l'azione rara. Aperto starebbe accanto
     al pulsante di invio, con il rischio di premere quello sbagliato. */
  .revoca summary{cursor:pointer;font-family:var(--font-testo);font-size:14.5px;font-weight:700;
    color:var(--green-800);padding:4px 0}
  .revoca summary:hover{color:var(--green-900)}
  .revoca > p{font-family:var(--font-testo);font-size:14px;line-height:1.55;color:var(--ink-dim);
    margin:10px 0 0}
  .revoca .modulo{padding:8px 0 0}
  .revoca .btn{margin-top:6px}

  /* ─── Area privata (webEP/WebPrivato.php) ──────────────────────────────────
     Testata della pagina: il saluto a sinistra, l'uscita a destra. "Esci" deve
     essere sempre trovabile senza cercarlo — è l'unica cosa che chiude la
     sessione su un computer condiviso. */
  /* ── Area privata: l'avviso dei due siti ────────────────────────────────
     Finché il sito vecchio resta in piedi accanto a questo, i due hanno due
     database diversi e quello che si cambia qui non arriva là. È un
     AVVERTIMENTO, non una nota: sta in cima, prima del saluto, e si legge prima
     di toccare qualcosa. Rosso pieno e non il rosso spento di .errori, che dice
     "hai sbagliato un campo" — qui invece non ha sbagliato nessuno, e il
     messaggio deve fermare l'occhio.
     VA TOLTO (qui e in webEP/WebPrivato.php) il giorno in cui il vecchio sito
     verrà spento: insieme all'avviso sparisce il motivo per cui esiste. */
  .avvisorosso{margin:0 0 18px;padding:14px 18px;border-radius:12px;
    background:#fdeeea;border:1px solid #d98d7a;border-left:5px solid #b3402f;
    font-family:var(--font-testo);font-size:15px;line-height:1.5;color:#8f2f1e}
  .avvisorosso b{color:#b3402f}

  .capoprivata{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin:0 0 18px}
  .capoprivata h2{margin:0;font-family:var(--font-titoli);font-size:27px;font-weight:800;
    letter-spacing:-.02em;color:var(--green-900)}
  .capoprivata p{margin:6px 0 0;font-family:var(--font-testo);font-size:14px;color:var(--ink-dim)}
  /* I pulsanti in alto a destra dell'area privata: "Torna al menù" (solo dentro
     una sezione) ed "Esci alla Homepage". Stanno in un contenitore proprio
     perché sono due elementi di natura diversa — un link e un modulo — e senza
     si allineerebbero l'uno sotto l'altro. È il contenitore, adesso, a essere
     spinto a destra: la regola sul solo form spingerebbe a destra il secondo dei
     due, lasciando il primo attaccato al saluto.
     flex-wrap: sul telefono i due pulsanti vanno a capo invece di stringersi
     fino a spezzare le parole. */
  .capoprivata .capoazioni{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .capoprivata .capoazioni form{margin:0}

  /* Com'è messa la fotografia adesso: la foto vera (80×100, la stessa misura del
     gioco) accanto alla frase che dice a che punto è la pratica. */
  .statofoto{display:flex;gap:16px;align-items:flex-start;padding:16px 22px 4px;
    font-family:var(--font-testo);font-size:14px;line-height:1.55;color:var(--ink-dim)}
  .statofoto img{flex:none;border:1px solid var(--line);border-radius:8px;background:#fff}
  .statofoto b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:4px}
  .statofoto b.si{color:var(--green-800)}
  .statofoto b.attesa{color:var(--gold-dk)}
  .statofoto b.no{color:#9c3320}
  .statofoto p{margin:6px 0 0}
  .statofoto .minore{font-size:13px}

  /* ─── Pagine di testo lungo (privacy, codice etico, condizioni) ───────────
     Misura di lettura più larga del modulo, ma non a tutta pagina: oltre una
     settantina di caratteri per riga l'occhio perde il capo del rigo. */
  .pagina.larga{max-width:900px}
  .testo{padding:8px 26px 26px;font-family:var(--font-testo);font-size:15px;
    line-height:1.65;color:var(--ink)}
  .testo .occhiello{font-size:13px;color:var(--ink-dim);border-bottom:1px solid var(--line);
    padding-bottom:12px;margin:10px 0 20px}
  .testo h4{font-family:var(--font-titoli);font-size:19px;font-weight:800;color:var(--green-800);
    margin:28px 0 10px}
  .testo p{margin:0 0 12px}
  .testo ul{margin:0 0 14px;padding-left:22px}
  .testo li{margin:7px 0}
  .testo b{color:var(--green-800)}
  .testo a{color:var(--green-700)}
  .testo .avviso{margin:18px 0}
  .testo .chiusura-testo{margin-top:28px;text-align:center}

  /* Il rimando alla classifica: un bottone, non un link in coda al discorso.
     In classifiche.php ce ne sono sei, uno per sezione, ed è l'unica cosa che
     si va a cercare in quella pagina — deve saltare all'occhio senza doverla
     leggere.
     È lo STESSO trattamento delle scorciatoie in home (.actions a): sfumatura
     dal bianco al verdino, bordo salvia, testo oro scuro, ombra bassa. Non è
     una citazione estetica, è la stessa promessa — "di qui si va da un'altra
     parte" — e due modi diversi di disegnarla insegnerebbero al lettore due
     regole invece di una. Qui però in formato ridotto: là sono le tre azioni
     principali del sito, qui sono sei rimandi dentro un testo, e alla misura
     della home lo coprirebbero.
     `display:inline-block` non è decorativo: senza, un <a> con padding dentro
     un paragrafo si sovrappone alle righe vicine invece di spostarle. */
  /* Elenco delle pagine dentro la scheda di un capitolo, nella home della guida.
     Righe fitte e senza pallini: è un sommario, non un discorso — i pallini
     allungherebbero di un terzo una scheda che deve stare accanto alle altre
     due senza sbilanciare la griglia. */
  .elencoguida{margin:0;padding:0;list-style:none;font-family:var(--font-testo);font-size:14px;
    line-height:1.5;color:var(--ink-dim)}
  .elencoguida li{padding:4px 0;border-bottom:1px dashed var(--mint-200)}
  .elencoguida li:last-child{border-bottom:0}

  /* ── L'elenco della mappa del sito ──────────────────────────────────────
     Stesso elenco della guida, ma ogni voce ha due righe: il nome della pagina
     (che è il collegamento) e sotto, più piccola, la riga che dice a cosa
     serve. Senza quella seconda riga una mappa è solo un menu più lungo: i nomi
     delle pagine si somigliano tutti, ed è la spiegazione che fa scegliere.
     Il link NON è sottolineato ma è in verde e in grassetto, come tutti i
     collegamenti del sito: in un elenco fitto le sottolineature fanno rumore. */
  .elencoguida.mappa li{padding:7px 0}
  .elencoguida.mappa a{color:var(--green-700);font-weight:700;text-decoration:none}
  .elencoguida.mappa a:hover{color:var(--green-900);text-decoration:underline}
  /* Pagina non ancora fatta: il nome resta leggibile ma spento, e accanto c'è
     l'etichetta .attesa. Non è un link, e non deve sembrarlo. */
  .elencoguida.mappa .spenta{font-weight:700;color:var(--ink-dim)}
  .elencoguida.mappa .che{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;
    color:var(--ink-dim)}

  .testo .vaiclassifica{margin:14px 0 0}
  .testo a.btn.vai{display:inline-block;font-size:14px;font-weight:700;padding:9px 16px;
    border-radius:8px;line-height:1.25;text-decoration:none;
    background:linear-gradient(180deg,#ffffff,var(--mint-100));border:1px solid var(--sage);
    /* Verde --green-800: è il colore del testo di .btn.ghost, cioè degli altri
       bottoni del sito — compreso il "Torna alla home" in fondo a questa stessa
       pagina. Non l'oro scuro della home: lì i riquadri sono grandi e il
       carattere a 17px, qui il bottone è a 14px su una sfumatura chiara e l'oro
       perdeva leggibilità. */
    color:var(--green-800);box-shadow:0 3px 9px rgba(13,62,40,.09)}
  .testo a.btn.vai:hover{background:linear-gradient(180deg,var(--mint-50),var(--mint-200));
    border-color:var(--green-700);box-shadow:0 6px 14px rgba(13,62,40,.15)}

  /* Segnaposto da riempire prima di pubblicare: deliberatamente vistoso, così
     non finisce online per distrazione. Va tolto insieme al testo che marca. */
  .dacompletare{display:inline-block;background:#fff3cd;border:1px dashed #c9a227;
    border-radius:6px;padding:2px 8px;color:#7a5c00;font-weight:700}

  /* Elenco degli errori di compilazione, in cima al modulo. Rosso spento: deve
     farsi notare senza sembrare un guasto del sito. */
  .errori{margin:16px 22px 0;padding:13px 16px;border-radius:10px;
    background:#fdeeea;border:1px solid #e6b3a6;
    font-family:var(--font-testo);font-size:14px;line-height:1.5;color:var(--ink)}
  .errori b{display:block;color:#9c3320;margin-bottom:6px}
  .errori ul{margin:0;padding-left:20px}
  .errori li{margin:3px 0}

  /* Pagina "registrazione ricevuta": stesso pannello, contenuto centrato */
  .esito{padding:8px 22px 26px;text-align:center;font-family:var(--font-testo);
    font-size:15px;line-height:1.6;color:var(--ink)}
  .esito p{margin:12px 0}
  .esito .grande{font-family:var(--font-titoli);font-size:22px;font-weight:800;
    color:var(--green-800);margin:18px 0 6px}
  .esito .minore{font-size:13.5px;color:var(--ink-dim)}
  .esito .avviso{text-align:left;margin:18px 0}
  .esito .btn{margin-top:10px}

  /* Campo-trappola per i bot: deve restare invisibile ma NON display:none, che
     alcuni programmi riconoscono e saltano. Fuori dallo schermo funziona meglio. */
  .esca{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

  /* ─── Pagina download ─────────────────────────────────────────────────────
     Più pannelli uno sotto l'altro nella stessa colonna stretta: qui servono
     le distanze, che nelle pagine a pannello singolo non erano mai emerse. */
  .pagina .panel + .panel{margin-top:18px}
  .pagina .support{margin-top:18px}

  /* Il pulsante e i tre dati che servono a decidere: versione, peso, sistema.
     Il peso sta accanto al pulsante di proposito — deve leggerlo prima di
     premere, non scoprirlo dalla barra di avanzamento. */
  .scarica{text-align:center;padding:38px 22px 34px;font-family:var(--font-testo)}
  .scarica .btn{font-size:17px;padding:16px 32px}
  .scarica .peso{margin:24px 0 0;font-size:15px;color:var(--ink)}
  .scarica .peso b{color:var(--green-800)}
  .scarica .minore{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--ink-dim)}
  /* La build a 32 bit: un link di servizio, non un secondo pulsante. Chi non sa
     cosa siano i bit non deve trovarsi davanti a una scelta; chi ha un computer
     vecchio sa di averlo e questa riga la cerca. Staccata da una linea, così non
     sembra un ripensamento attaccato al pulsante. */
  .scarica .altrabuild{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);
    font-size:14px;color:var(--ink-dim)}
  .scarica .altrabuild b{color:var(--ink)}
  .scarica .altrabuild a{color:var(--green-700);font-weight:700}
  .scarica .altrabuild a:hover{color:var(--green-900);text-decoration:underline}

  /* Avviso SmartScreen: è il punto in cui si perdono più installazioni, quindi
     ha il peso visivo di un riquadro, non di una nota a piè di pagina. */
  .nota-win{display:flex;gap:14px;align-items:flex-start;margin:4px 22px 0;padding:15px 17px;
    border:1px solid var(--sage);border-left:5px solid var(--green-700);border-radius:11px;
    background:var(--mint-50);font-family:var(--font-testo);font-size:14px;line-height:1.55;color:var(--ink)}
  .nota-win .ico{font-size:24px;line-height:1.2;flex:none}
  .nota-win b{color:var(--green-800)}
  .nota-win > div > b{display:block;font-size:15.5px;margin-bottom:6px}
  .nota-win p{margin:7px 0 0}
  .nota-win .minore{font-size:13px;color:var(--ink-dim)}

  /* Scheda tecnica: due colonne, etichetta e valore. Chi non la legge non perde
     niente, chi la legge trova tutto quello che gli serve per fidarsi. */
  .dettagli{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;margin:20px 22px 24px;
    padding-top:16px;border-top:1px solid var(--line);
    font-family:var(--font-testo);font-size:13.5px;line-height:1.5}
  .dettagli dt{font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-dim);padding-top:2px}
  .dettagli dd{margin:0;color:var(--ink)}
  /* L'impronta è una riga di 64 caratteri: a capo dove capita, in monospaziato,
     altrimenti sfonda la colonna sul telefono. */
  .impronta{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:11.5px;word-break:break-all;color:var(--ink-dim)}

  .passi{margin:0;padding:16px 26px 20px 44px;font-family:var(--font-testo);
    font-size:14.5px;line-height:1.6;color:var(--ink)}
  .passi li{margin:0 0 12px}
  .passi li:last-child{margin-bottom:0}
  .passi b{color:var(--green-800)}
  .passi a{color:var(--green-700);font-weight:700}
  /* Gli avvisi di questa pagina, e SOLO di questa: .avviso è condiviso con il
     modulo di registrazione, dove i margini sono già a posto. Scriverli su
     .pagina .avviso li cambierebbe anche là, di rimbalzo. */
  .pagina.download > .avviso{margin:0 0 18px}
  .pagina.download .panel .avviso{margin:0 22px 20px}

  /* ── Pagina bacheca ────────────────────────────────────────────────────────
     In home il pannello dei messaggi ha altezza fissa e scorre; nella pagina
     dedicata i messaggi sono pochi per volta e si leggono per intero, quindi il
     riquadro cresce quanto serve. Una riga sola, e tutto lo stile dei singoli
     messaggi (.news .item) resta quello della home: nessuna copia da tenere
     allineata. */
  .news.aperta{height:auto;overflow:visible;padding-bottom:6px}

  /* Navigazione fra le pagine. La pagina corrente e' uno <span>, non un link:
     un collegamento a se stessi non porta da nessuna parte e confonde chi
     naviga da tastiera o con un lettore di schermo. */
  .pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:18px 0 4px}
  .pager a,.pager span{min-width:36px;height:36px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--line);border-radius:10px;background:#fff;text-decoration:none;
    font-family:var(--font-testo);font-size:13.5px;font-weight:700;color:var(--green-800)}
  .pager a:hover{background:var(--mint-50);border-color:var(--sage)}
  .pager .qui{background:var(--green-700);border-color:var(--green-700);color:#fff}
  /* Estremi disattivati: restano visibili (la fila non salta) ma non cliccabili */
  .pager .spenta{opacity:.4;pointer-events:none}

  .conteggio{margin:14px 0 8px;text-align:center;font-family:var(--font-testo);font-size:12.5px;color:var(--ink-dim)}

  /* Scelta dell'anno nell'albo. Sono una ventina e stanno tutti in vista: una
     tendina nasconderebbe proprio l'informazione che serve, cioe' da quando a
     quando arriva la storia. Vanno a capo da soli sugli schermi stretti. */
  .anni{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 18px}
  .anni a,.anni span{padding:5px 11px;border-radius:8px;border:1px solid var(--line);background:#fff;
    text-decoration:none;font-family:var(--font-testo);font-size:13px;font-weight:700;color:var(--green-800)}
  .anni a:hover{background:var(--mint-50);border-color:var(--sage)}
  .anni .qui{background:var(--gold);border-color:var(--gold);color:#fff}
  /* Quando avanti/indietro segue la barra degli anni i due margini si
     sommerebbero, lasciando un buco: qui vanno accostati. */
  .anni + .pager{margin-top:0}
  /* Barra delle pagine messa SOPRA il contenuto: stacca da sola dal pannello
     che segue, senza appiccicarcisi. */
  .breadcrumb + .pager{margin:0 0 16px}

  /* ── Tabella dei risultati ─────────────────────────────────────────────────
     Quaranta righe per pagina: serve una pagina piu' larga delle altre e una
     tabella che scorra in orizzontale sui telefoni invece di stringere le
     colonne fino a spezzare i nickname. */
  /* Stessa larghezza delle sezioni della home (.steps, .layout, .albo): una
     pagina di sole tabelle ha bisogno di respiro, ma non di essere piu' larga
     del resto del sito, o si nota il salto passando da una pagina all'altra. */
  .pagina.piena{max-width:1080px}
  /* Il padding laterale qui e' quello che mangia la larghezza utile alla
     tabella: tenuto al minimo. L'overflow resta come rete di sicurezza per gli
     schermi stretti, ma sul desktop non deve mai entrare in funzione. */
  .tabellona{overflow-x:auto;padding:4px 8px 12px}
  /* Sedici colonne in 1080 px: si sta larghi solo togliendo aria. Padding
     stretto, testo un filo piu' piccolo e intestazioni senza spaziatura fra le
     lettere — cosi' la tabella entra e non serve trascinarla di lato. */
  table.partite{width:100%;border-collapse:collapse;font-family:var(--font-testo);font-size:13px}
  table.partite th{position:sticky;top:0;background:var(--mint-50);color:var(--green-900);
    font-size:10.5px;font-weight:800;text-transform:uppercase;
    padding:7px 6px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
  table.partite td{padding:6px 6px;border-bottom:1px solid var(--mint-100);color:var(--ink);vertical-align:top}
  table.partite tbody tr:nth-child(even){background:#fbfefc}
  table.partite tbody tr:hover{background:var(--mint-50)}
  table.partite .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  /* Intestazione a due piani: la riga di sopra raggruppa le colonne di una
     coppia, e un filetto verticale segna dove comincia l'altra — con sedici
     colonne serve un appiglio per l'occhio. */
  table.partite th.gruppo{text-align:center;background:var(--mint-100);border-bottom:0}
  table.partite th.bordo,
  table.partite td.bordo{border-left:2px solid var(--line)}
  /* I BOL sono il risultato: in evidenza sempre, in rosso solo se quel
     giocatore ha lasciato il tavolo. */
  table.partite td.bol{font-weight:700}
  /* Il rosso QUI va ripetuto con la cella davanti. `.lasciata` da sola (una
     classe) perde contro `table.partite td` (due elementi + una classe), che
     impone il colore del testo: sui NOMI non si vede perche' li' la classe sta
     su uno <span> interno, che quella regola non raggiunge, ma sulle celle dei
     BOL la classe e' sulla cella stessa e restava nera. */
  table.partite td.lasciata{color:#d32027}

  /* Classifiche: stessa tabella dei risultati, ma le prime tre posizioni
     portano il colore della medaglia, come in home e nell'albo — chi arriva
     dalla home deve ritrovare gli stessi tre colori, non impararne altri. */
  /* IL NOME SEMBRAVA PIU' IN ALTO DELLA POSIZIONE, e non era una questione di
     dimensione: `table.partite td` ha vertical-align:top, che serve alla tabella
     dei risultati dove una cella puo' avere due righe. Qui pero' la posizione e'
     una pastiglia alta 24px e il nome una riga di testo alta 13: allineati in
     cima, i due centri non coincidono e l'occhio legge il nome piu' su.
     Nelle sole classifiche si allinea al centro, che e' anche il modo giusto di
     mettere in riga una pastiglia e del testo. */
  table.partite.classifica td{vertical-align:middle}

  /* Il nome del giocatore e' l'unica cosa che si cerca davvero scorrendo una
     classifica: sta due punti sopra al resto della riga (15 contro 13). */
  table.partite.classifica td.nome{font-size:15px}

  table.classifica .posto{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;
    border-radius:99px;font-weight:800;font-size:12px}
  table.classifica .posto.oro     {background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#2a2107}
  table.classifica .posto.argento {background:linear-gradient(180deg,#eef2f4,#c3ccd0);color:#333f43}
  table.classifica .posto.bronzo  {background:linear-gradient(180deg,#f3d9ba,#dcaf7f);color:#4c3017}

  /* Ricerca di un giocatore. Il modulo sta sopra la tabella, la riga trovata si
     accende in verde — NON in rosso, che su questo sito vuol dire "qualcosa e'
     andato storto" e qui invece e' andato tutto bene.
     Il selettore include `tbody` perche' altrimenti perde contro lo sfondo a
     righe alterne, che ha un elemento in piu'. */
  .cerca{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
  .cerca label{font-family:var(--font-testo);font-size:13px;font-weight:700;color:var(--green-800)}
  .cerca input{font-family:var(--font-testo);font-size:14px;padding:9px 12px;border-radius:10px;
    border:1px solid var(--line);background:#fff;color:var(--ink);width:190px}
  .cerca input:focus{outline:2px solid var(--sage);outline-offset:1px}
  .cerca .btn{padding:9px 18px}
  .avvisoricerca{margin:0 0 14px;padding:10px 14px;border-radius:10px;
    background:var(--gold-soft);border:1px solid var(--gold-hi);
    font-family:var(--font-testo);font-size:13.5px;color:var(--gold-dk)}
  table.classifica tbody tr.trovato{background:var(--mint-100);
    box-shadow:inset 3px 0 0 var(--green-700)}
  table.classifica tbody tr.trovato td{font-weight:700}
  table.partite .quando{white-space:nowrap;color:var(--ink-dim)}
  /* Larghezza 1% = "stretta quanto il contenuto": la tabella e' al 100% e senza
     questo il browser spalma lo spazio avanzato su TUTTE le colonne, aprendo
     buchi fra una data e la posta. Lo spazio in piu' deve andare alle uniche
     colonne che ne hanno bisogno, quelle dei nickname. */
  table.partite .num,
  table.partite .tipo,
  table.partite .categoria,
  table.partite .quando{width:1%}
  table.partite td.categoria{white-space:nowrap;color:var(--ink-dim)}
  table.partite .vuoto{color:var(--ink-dim)}

  /* UN SOLO colore per due fatti imparentati: chi ha lasciato il tavolo e la
     partita finita male. Non e' l'unica indicazione (c'e' il title e la
     legenda): il colore da solo non si vede a tutti. */
  .lasciata{color:#d32027;font-weight:700}
  /* Sulla riga abortita parla lo sfondo, non il testo: gli orari restano del
     colore normale, cosi' il rosso resta il segno di CHI ha lasciato il tavolo
     e non si confonde con l'orario, che e' un dato neutro.
     ATTENZIONE al selettore: deve includere `tbody`. Senza, la riga vale
     2 elementi + 2 classi contro i 3 elementi + 2 classi dello sfondo a righe
     alterne qui sopra, che quindi vince — e le partite abortite in posizione
     PARI restavano bianche, cioe' meta' delle segnalazioni spariva. */
  table.partite tbody tr.abortita{background:#fdeceb}
  table.partite tbody tr.abortita:hover{background:#fbe0de}
  .legenda{margin:0;padding:0 20px 16px;font-family:var(--font-testo);font-size:12.5px;color:var(--ink-dim)}

  /* — scheda del giocatore (situazionedi.php) —
     I nickname dentro le tabelle sono link alla scheda, ma la tabella deve
     restare una tabella: colore del testo invariato, il richiamo e' il
     sottolineato tratteggiato, che si vede quando lo si cerca e non prima. */
  table.partite td a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--sage)}
  table.partite td a:hover{color:var(--green-800);border-bottom-color:var(--green-700)}
  table.partite td .lasciata a{color:inherit}

  /* Anagrafica: caselle come quelle delle statistiche in home, stessa lettura a
     colpo d'occhio. auto-fit invece di un numero fisso di colonne: sei voci su
     schermo largo stanno in fila, su un telefono si dispongono da sole. */
  /* Foto a sinistra e caselle a destra. La foto puo' non esserci (poche
     centinaia di iscritti ne hanno caricata una): in quel caso le caselle si
     riprendono tutta la larghezza da sole, senza buchi ne' regole in piu'. */
  .schedatop{display:flex;gap:18px;align-items:flex-start;padding:16px 22px 20px}
  .schedatop .avframe{flex:none}
  .schedatop .scheda{flex:1;padding:0;min-width:0}
  .scheda{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;padding:16px 22px 20px}
  /* "provv." accanto al Ranking di chi non ha ancora il gate delle 20 partite:
     sta sulla stessa riga del numero ma non deve competerci — e' una riserva,
     non un secondo dato. */
  .scheda .prov{margin-left:5px;font-family:var(--font-testo);font-size:10px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);vertical-align:middle}
  /* Le schede dell'area privata (I tuoi dati) mettono l'occhiello DIRETTAMENTE
     dentro il pannello, non dentro un .testo o una .box: qui riceve lo stesso
     rientro laterale di .schedatop (22px), altrimenti la frase partirebbe dal
     bordo mentre le caselle sotto sono rientrate — e due allineamenti diversi
     nello stesso riquadro si notano subito.
     Il selettore è > (figlio diretto) per non toccare i .hint dentro .testo,
     .box e .albo, che hanno già il rientro loro. */
  .panel > .hint{margin:0;padding:11px 22px 0;font-family:var(--font-testo);
    font-size:12.5px;line-height:1.5;color:var(--ink-dim)}

  /* ── Le caselle dell'area privata ───────────────────────────────────────
     POCHE PER RIGA E LARGHE, cioè il contrario della scheda pubblica. Là dentro
     ci stanno parole singole ("Categoria", "Livello") e numeri corti, e sei
     colonne da 110px vanno benissimo. Qui no: le etichette sono gruppi di parole
     ("Data Fine Validità", "Posizione in Classifica Migliori-Peggiori") e i
     valori possono essere lunghi quanto un indirizzo email — che per giunta non
     ha spazi, quindi non va a capo da solo e ESCE dalla casella.
     Due colonne da ~310px su pagina da 760, una sola sul telefono: si allunga la
     pagina, che è gratis, invece di stringere il contenuto, che non lo è.

     Le due righe qui sotto sono la rete di sicurezza, e servono anche se un
     domani le misure cambiano: overflow-wrap spezza la parola lunga (l'email)
     invece di farla sbordare, e min-width:0 toglie alla casella la larghezza
     minima automatica che il grid dà ai suoi elementi — senza, la casella si
     allarga per contenere la parola e a sbordare è la griglia intera. */
  .scheda.privata{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .scheda.privata .voce{min-width:0}
  .scheda.privata .vl{font-size:16px;overflow-wrap:anywhere}

  /* Quando le caselle di una riga vanno decise A MANO invece che lasciate al
     riempimento automatico: `due` = due mezze pagine, `tre` = tre terzi. Serve
     alle posizioni in classifica, dove il raggruppamento ha un significato — le
     due che non si azzerano mai sopra, le tre settimanali sotto — e con
     l'auto-fit sarebbero finite due più una, cioè un raggruppamento diverso da
     quello vero. Ogni casella si prende tutto lo spazio della sua frazione: le
     etichette qui sono lunghe, e lo spazio avanzato non serve a nessuno. */
  .scheda.privata.due{grid-template-columns:repeat(2,1fr)}
  .scheda.privata.tre{grid-template-columns:repeat(3,1fr)}
  /* Due file di caselle una sotto l'altra: senza questo fra le due ci sarebbero
     36px (il fondo della prima più il capo della seconda) e sembrerebbero due
     blocchi separati invece che due righe dello stesso. */
  .schedatop + .schedatop{padding-top:0}

  .scheda .voce{background:var(--mint-50);border:1px solid var(--line);border-radius:11px;padding:9px 12px}
  .scheda .et{font-family:var(--font-testo);font-size:10px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-dim);margin-bottom:3px}
  .scheda .vl{font-family:var(--font-titoli);font-size:19px;font-weight:800;color:var(--green-900);
    line-height:1.1}

  /* — iscrizione e rinnovi —
     Listino: due prezzi per la stessa riga (quota netta e quota PayPal), quindi
     i numeri devono incolonnarsi. Stessa impaginazione delle altre tabelle del
     sito, ma senza il fondo a righe alterne: sono due righe in tutto. */
  .listino{width:100%;border-collapse:collapse;font-family:var(--font-testo);font-size:14.5px;margin:4px 0 12px}
  .listino th{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
    color:var(--green-800);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
  .listino td{padding:9px 10px;border-bottom:1px solid var(--mint-100)}
  .listino .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .listino .bol{font-weight:700;color:var(--green-900)}

  /* Scelta della durata: due riquadri che si accendono, non due pallini in fila.
     Il prezzo grande e' quello che si paga con bollettino o bonifico; sotto, in
     piccolo, quello PayPal — cosi' la differenza si vede PRIMA di scegliere. */
  .piani{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
  .piani .piano{display:flex;align-items:center;gap:10px;margin:0;padding:12px 14px;
    border:1px solid var(--line);border-radius:12px;background:var(--mint-50);cursor:pointer;
    font-family:var(--font-testo);transition:.16s}
  .piani .piano:hover{border-color:var(--sage);background:var(--mint-100)}
  .piani .piano:has(input:checked){border-color:var(--green-700);background:#fff;
    box-shadow:0 0 0 2px var(--mint-200)}
  .piani .piano input{width:auto;margin:0;flex:none}
  .piani .piano .d{flex:1;font-size:14.5px;color:var(--ink)}
  .piani .piano .p{font-family:var(--font-titoli);font-size:20px;font-weight:800;
    color:var(--green-900);text-align:right;line-height:1.15}
  .piani .piano .p small{display:block;font-family:var(--font-testo);font-size:11px;
    font-weight:600;color:var(--ink-dim)}

  /* La causale: e' la cosa che il cliente deve RICOPIARE, quindi si stacca dal
     testo e si legge carattere per carattere (per questo il monospazio: una I e
     una l scritte nel font del testo si confondono, e una causale sbagliata e'
     un pagamento da rintracciare a mano). */
  .causale{margin:10px 0 4px;padding:14px 16px;border-radius:10px;
    background:var(--gold-soft);border:1px dashed var(--gold);
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:23px;font-weight:700;
    color:var(--gold-dk);letter-spacing:.04em;text-align:center;user-select:all}

  /* Il richiamo al Modulo di Comunicazione di Pagamento. Non e' una nota: senza
     quel modulo il versamento resta orfano, perche' sull'accredito compare
     l'intestatario del conto e non il nickname. Per questo ha il peso visivo di
     un riquadro in oro con il suo pulsante, e sta subito dopo i due metodi che
     lo richiedono — non in fondo alla pagina, dove nessuno arriva. */
  .obbligo{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
    margin:0 22px 20px;padding:16px 20px;border-radius:14px;
    background:linear-gradient(180deg,#fdf8ea,var(--gold-soft));border:1px solid var(--gold);
    font-family:var(--font-testo);box-shadow:0 8px 20px rgba(22,56,42,.06)}
  .obbligo .t{flex:1;min-width:260px}
  /* SOLO il titolo, per questo ha una classe: con `.obbligo b` finivano vestiti
     da titolo anche i grassetti dentro il testo — piu' grandi, in oro e ognuno
     su una riga sua, perche' display:block li staccava. Un selettore che si
     appoggia a "tanto e' l'unico <b>" e' vero finche' non se ne aggiunge un
     secondo, e nessuno se ne ricorda. */
  .obbligo .capo{display:block;font-family:var(--font-titoli);font-size:17px;color:var(--gold-dk);
    margin-bottom:6px}
  .obbligo p{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}
  /* I grassetti nel testo restano testo: stesso corpo, stesso colore. */
  .obbligo p b{font-weight:800;color:var(--ink)}
  .obbligo .btn{flex:none;white-space:nowrap}

  /* Un modo di pagare: riquadro con la sua intestazione e le sue coordinate. */
  .metodo{margin:0 22px 18px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;
    background:#fff;font-family:var(--font-testo);font-size:14.5px;line-height:1.55;color:var(--ink)}
  .metodo h4{margin:0 0 8px;font-family:var(--font-titoli);font-size:17px;font-weight:700;
    color:var(--green-800)}
  .metodo p{margin:0 0 10px}
  .metodo .minore{font-size:13px;color:var(--ink-dim);margin-bottom:0}
  .metodo .hint{margin:0}
  .metodo form{margin:6px 0 10px}

  /* Coordinate da ricopiare: etichetta a sinistra, valore a destra. Su schermo
     stretto vanno una sopra l'altra invece di spezzare un IBAN a meta'. */
  /* Sono dati da RICOPIARE, spesso da una persona che legge senza occhiali e
     magari li trascrive allo sportello: qui il corpo del testo conta piu' che
     altrove, e il codice sta in monospazio perche' una I e una l nel font del
     testo si confondono. */
  .coordinate{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:12px 0;
    padding:14px 16px;border-radius:10px;background:var(--mint-50);border:1px solid var(--line)}
  .coordinate dt{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-dim);align-self:center}
  .coordinate dd{margin:0;color:var(--ink);font-size:17px}
  .coordinate .codice{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:19px;
    font-weight:700;color:var(--green-900);user-select:all;letter-spacing:.02em}
  @media (max-width:620px){
    .coordinate{grid-template-columns:1fr;gap:2px}
    .coordinate dd{margin-bottom:8px}
  }

  /* Medagliere: le colonne sono intestate da una MEDAGLIA, non da una parola.
     La placca ha 6 px di bordo interno per parte, quindi la sua cifra non cade
     dove cadono i numeri allineati a destra: intestazione e dati risultavano
     fuori asse. Qui si centrano entrambi e si da' alle colonne una larghezza
     fissa, cosi' le tre medaglie restano equidistanti anche con 317 sotto una e
     0 sotto le altre. Tre classi battono il `table.partite .num` allineato a
     destra, che vale per tutte le altre tabelle. */
  table.partite.medagliere th.num,
  table.partite.medagliere td.num{text-align:center;width:82px}

  /* Titolo di una delle tabelle dentro il pannello delle classifiche: piu' piccolo
     dell'h3 del pannello, perche' e' una sezione al suo interno e non un altro
     riquadro. La settimana di riferimento accanto, smorzata: e' una precisazione,
     non il titolo. */
  .sottotitolo{margin:14px 0 8px;font-family:var(--font-titoli);font-size:15px;font-weight:700;
    color:var(--green-800)}
  .sottotitolo:first-child{margin-top:2px}
  .sottotitolo .quando{font-family:var(--font-testo);font-size:12px;font-weight:600;color:var(--ink-dim)}
  /* Le tabelle della scheda hanno una riga sola: senza questo respiro si
     toccherebbero l'una col titolo dell'altra. */
  .tabellona table + .sottotitolo{margin-top:22px}

  /* "in preparazione": una pagina che ancora non c'e' si dice, non si maschera
     con un link che darebbe 404. Etichetta smorzata, non un richiamo. */
  .attesa{display:inline-block;margin-left:4px;padding:2px 8px;border-radius:7px;
    background:var(--mint-50);border:1px solid var(--line);
    font-family:var(--font-testo);font-size:11.5px;font-weight:700;color:var(--ink-dim)}

  @media (max-width:820px){
    .duecolonne{grid-template-columns:1fr}
    .hero,.layout,.steps{grid-template-columns:1fr}
    /* Le righe a numero fisso di caselle dell'area privata: su schermo stretto
       tre caselle da un terzo diventerebbero tre colonne da un centimetro con
       l'etichetta spezzata a ogni parola. Meglio due, e sul telefono una. */
    .scheda.privata.due,.scheda.privata.tre{grid-template-columns:repeat(2,1fr)}
    .fan{display:none}
    .statgroups{grid-template-columns:1fr;gap:22px}
    .statgroup + .statgroup{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px}
    .statgroup.players .statrow{grid-template-columns:repeat(2,1fr)}
    .rankings{grid-template-columns:repeat(2,1fr)}
    .chiusura{grid-template-columns:1fr}
    .rankings + .rankings{padding-top:18px}
    .capitoli{grid-template-columns:repeat(2,1fr)}
    .capitoli + .capitoli{padding-top:16px}
    /* Su schermo stretto il richiamo va sotto il marchio e prende tutta la riga:
       accanto al logo resterebbe una colonna di due parole per riga. */
    .avvisoni{max-width:none;flex:1 1 100%;margin-top:12px}
    .avvisone{max-width:none;justify-content:center}
    .albo .colonne{grid-template-columns:1fr}
    .hero h2{font-size:34px}
    /* la riga sopra il titolo può andare a capo: qui lo schermo è stretto */
    .hero .kick{white-space:normal}
    /* il menu resta visibile e va a capo su più righe: nasconderlo lascerebbe
       chi naviga da telefono senza alcun modo di raggiungere le altre pagine */
    nav{justify-content:center;margin-top:12px;padding-top:10px}
    nav a{padding:7px 10px;font-size:13.5px}
  }
  /* ATTENZIONE ALL'ORDINE: questo blocco sta DOPO quello da 820px di proposito.
     In questo foglio il blocco da 620px si trova più in alto di quello da 820, e
     su un telefono valgono tutti e due — a parità di specificità vince l'ultimo
     scritto. Le regole qui sotto toccano gli stessi selettori del blocco da 820:
     se stessero lassù, sul telefono resterebbero due colonne invece di una,
     senza che niente lo faccia sospettare. */
  @media (max-width:620px){
    /* Una casella per riga: due da mezzo schermo non tengono "Posizione in
       Classifica Migliori-Peggiori" senza spezzarlo tre volte. */
    .scheda.privata,.scheda.privata.due,.scheda.privata.tre{grid-template-columns:1fr}
  }

  @media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}