/* ============================================================================
   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}
  /* 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}
  .step{background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px;
    box-shadow:0 10px 26px rgba(22,56,42,.06)}
  .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: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 */
  .actions a{display:flex;align-items:center;gap:13px;padding:15px 17px;line-height:1.25;
    background:linear-gradient(180deg,#ffffff,var(--mint-100));border:1px solid var(--sage);
    color:var(--gold-dk);text-decoration:none;font-family:var(--font-testo);font-weight:700;font-size:14.5px;
    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:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
    background:linear-gradient(180deg,var(--green-700),var(--green-800));font-size:17px;color:#eaf7ee;
    box-shadow:0 2px 6px rgba(13,62,40,.28)}
  .actions small{display:block;font-weight:600;font-size:11.5px;color:var(--ink-dim);margin-top:2px}

  /* 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}
  .search{display:flex;gap:8px;align-items:flex-start}
  .search input{margin:0}
  .search .btn{width:auto;flex:none;padding:10px 14px}

  /* — 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}

  /* 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}

  .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 */
  .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)}
  @media (max-width:820px){
    .hero,.layout,.steps{grid-template-columns: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}
    .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}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}