/* CiMancaUno — stili del sito pubblico (pagina iniziale, link condiviso, testi legali) e del
   pannello di gestione. I token e i componenti stanno in cmu.css (libreria condivisa). */

@layer pagine {

  /* ─────────────────────────────────────────── guscio del sito */
  .sito { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
  .sito__testa {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
    width: 100%; max-width: 1120px; margin: 0 auto; padding: calc(var(--s4) + env(safe-area-inset-top)) var(--s5) var(--s4);
  }
  .sito__marchio { color: var(--testo); text-decoration: none; }
  .sito__marchio:hover { color: var(--testo); }
  .sito__testa--scura { position: absolute; left: 0; right: 0; top: 0; z-index: 10; max-width: none; padding-left: max(var(--s5), calc((100% - 1120px) / 2 + var(--s5))); padding-right: max(var(--s5), calc((100% - 1120px) / 2 + var(--s5))); }
  .sito__testa--scura .sito__marchio { color: #fff; }
  .sito__testa--scura .glifo__campo { fill: rgb(255 255 255 / 0.1); stroke: rgb(255 255 255 / 0.9); }
  .sito__testa--scura .glifo__righe, .sito__testa--scura .glifo__rete { stroke: rgb(255 255 255 / 0.85); }
  .sito__testa--scura .glifo__vuoto { fill: transparent; stroke: #fff; }
  .sito__nav { display: flex; align-items: center; gap: var(--s2); }
  /* «Esci»: secondario accanto a «Le tue partite», quindi solo testo, ma con l'area di tocco piena. */
  .sito__esci {
    display: inline-flex; align-items: center; min-height: var(--tocco); padding: 0 var(--s2);
    color: var(--testo); font-weight: 650; font-size: 0.9375rem; text-decoration: none; border-radius: var(--r-pillola);
  }
  .sito__esci:hover { color: var(--testo); text-decoration: underline; text-underline-offset: 0.2em; }
  .sito__testa--scura .sito__esci, .sito__testa--scura .sito__esci:hover { color: #fff; }
  /* Sui telefoni stretti con due azioni il nome non ci sta: resta il glifo del campo, che è il marchio. */
  @media (max-width: 400px) { .sito__testa--dentro .marchio__nome { display: none; } }
  .sito__titolo { font-size: clamp(1.75rem, 4.5vw, 2.6rem); line-height: 1.05; max-width: 20ch; }
  .sito__pagina { width: 100%; max-width: 760px; margin: 0 auto; padding: var(--s8) var(--s5) var(--s16); }

  .bottone--su-scuro { background: transparent; border-color: rgb(255 255 255 / 0.55); color: #fff; }
  .bottone--su-scuro:hover { border-color: #fff; background: rgb(255 255 255 / 0.08); color: #fff; }

  .sito__piede { background: var(--notte); color: #C9D6EA; }
  .sito__piede-interno { max-width: 1120px; margin: 0 auto; padding: var(--s8) var(--s5) calc(var(--s8) + env(safe-area-inset-bottom)); display: grid; gap: var(--s3); }
  .sito__piede .marchio { color: #fff; }
  .sito__piede .glifo__campo { fill: rgb(255 255 255 / 0.1); stroke: rgb(255 255 255 / 0.85); }
  .sito__piede .glifo__righe, .sito__piede .glifo__rete { stroke: rgb(255 255 255 / 0.8); }
  .sito__piede .glifo__vuoto { fill: transparent; stroke: #fff; }
  .sito__piede-link { display: flex; flex-wrap: wrap; gap: var(--s5); }
  .sito__piede-link a { color: #fff; }

  /* ─────────────────────────────────────────── eroe: il campo di sera */
  .eroe {
    position: relative; overflow: hidden; color: #fff;
    background:
      radial-gradient(60rem 30rem at 85% -10%, rgb(221 242 71 / 0.10), transparent 60%),
      radial-gradient(40rem 24rem at -10% 0%, rgb(127 176 255 / 0.12), transparent 60%),
      var(--notte);
  }
  .eroe__interno {
    max-width: 1120px; margin: 0 auto; padding: calc(96px + env(safe-area-inset-top)) var(--s5) var(--s12);
    display: grid; gap: var(--s10); align-items: center;
  }
  @media (min-width: 960px) {
    .eroe__interno { grid-template-columns: 1.05fr 1fr; padding-top: 136px; padding-bottom: var(--s16); }
  }
  /* Il titolo è il disegno: una riga larga, due strette, la stessa famiglia a tre larghezze. */
  .eroe__titolo { display: grid; gap: 0.04em; font-weight: 820; line-height: 0.94; letter-spacing: -0.025em; }
  .eroe__riga { font-stretch: 122%; font-size: clamp(2.3rem, 8.6vw, 4.3rem); white-space: nowrap; }
  .eroe__riga--stretta { font-stretch: 70%; font-weight: 800; font-size: clamp(3rem, 11.4vw, 5.6rem); letter-spacing: -0.01em; }
  .eroe__sotto { margin-top: var(--s5); max-width: 34rem; font-size: clamp(1.0625rem, 2.2vw, 1.25rem); line-height: 1.5; color: #C9D6EA; }
  .eroe__azioni { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
  .eroe__azioni .bottone { flex: 1 1 12rem; max-width: 18rem; }
  .eroe__azioni .bottone--su-scuro { min-height: 56px; border-radius: var(--r-pillola); padding: 0 var(--s6); }
  .eroe__nota { margin-top: var(--s3); color: #8FA3C4; font-size: var(--t-1); }

  .eroe__prova { position: relative; display: grid; justify-items: center; }
  .campo-grande { width: 100%; max-width: 560px; height: auto; overflow: visible; }
  .campo-grande__vetro { fill: rgb(255 255 255 / 0.05); stroke: rgb(255 255 255 / 0.28); stroke-width: 2; }
  .campo-grande__superficie { fill: var(--campo); }
  .campo-grande__righe { fill: none; stroke: rgb(255 255 255 / 0.92); stroke-width: 2.5; }
  .campo-grande__rete { stroke: #fff; stroke-width: 3.5; stroke-dasharray: 1.5 3.5; stroke-linecap: round; }
  .campo-grande__palo { fill: #fff; }
  .campo-grande__giocatore, .campo-grande__nuovo { fill: var(--palla); stroke: var(--notte); stroke-width: 3; }
  .campo-grande__vuoto { fill: rgb(10 33 71 / 0.25); stroke: #fff; stroke-width: 3; stroke-dasharray: 6 5; transition: opacity 200ms ease; }
  .campo-grande__cerca { fill: none; stroke: var(--palla); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: respira-grande 2.6s ease-in-out infinite; }
  .campo-grande__nuovo { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; }
  @keyframes respira-grande {
    0% { opacity: 0.95; transform: scale(1); }
    70% { opacity: 0; transform: scale(2.3); }
    100% { opacity: 0; transform: scale(2.3); }
  }
  .eroe__prova--piena .campo-grande__nuovo { opacity: 1; transform: scale(1); transition: transform 460ms cubic-bezier(.2, 1.5, .4, 1), opacity 120ms ease; }
  .eroe__prova--piena .campo-grande__vuoto, .eroe__prova--piena .campo-grande__cerca { opacity: 0; animation: none; }

  /* La notifica finta sta sotto al campo e ne tocca appena il bordo: il posto libero resta in vista. */
  .avviso-finto {
    justify-self: end; margin-right: 2%;
    width: min(330px, 92%); margin-top: -22px; z-index: 1;
    display: grid; gap: 4px; padding: var(--s3) var(--s4) var(--s4);
    border-radius: 18px; background: rgb(255 255 255 / 0.97); color: var(--notte);
    box-shadow: 0 18px 50px rgb(3 11 28 / 0.55);
  }
  .avviso-finto__capo { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-0); font-weight: 650; color: #4A5A75; }
  .avviso-finto__ora { margin-left: auto; font-weight: 500; }
  .avviso-finto__titolo { font-weight: 750; font-size: 1rem; margin: var(--s1) 0 0; }
  .avviso-finto__testo { font-size: 0.9375rem; color: #33425C; margin: 0; }
  .avviso-finto__bottone { justify-self: start; margin-top: var(--s2); min-width: 7rem; }
  .avviso-finto .glifo__campo { fill: var(--campo-tenue); stroke: var(--campo); }

  /* ─────────────────────────────────────────── come funziona */
  .passi, .libero, .circoli-sito, .garanzie { max-width: 1120px; margin: 0 auto; padding: var(--s16) var(--s5) 0; }
  .passi__elenco { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; gap: var(--s8); }
  @media (min-width: 800px) { .passi__elenco { grid-template-columns: repeat(3, 1fr); gap: var(--s10); } }
  .passo-sito { display: grid; gap: var(--s2); align-content: start; padding-top: var(--s4); border-top: 3px solid var(--testo); }
  .passo-sito__numero { font-stretch: var(--largo-tabellone); font-weight: 830; font-size: 4.2rem; line-height: 0.9; color: var(--accento); font-variant-numeric: tabular-nums; }
  .passo-sito h3 { font-size: var(--t-4); }
  .passo-sito p { color: var(--testo-2); max-width: 32ch; }

  /* ─────────────────────────────────────────── e se il quarto sei tu */
  .libero { display: grid; gap: var(--s8); align-items: center; }
  @media (min-width: 900px) { .libero { grid-template-columns: 1fr 1fr; gap: var(--s12); } }
  .libero__testo { display: grid; gap: var(--s4); justify-items: start; }
  .libero__testo p { color: var(--testo-2); font-size: 1.125rem; max-width: 36rem; }
  .libero__prova { display: grid; gap: var(--s4); padding: var(--s6); border-radius: 28px; background: var(--superficie); border: 1px solid var(--filetto); }
  .libero__domanda { font-stretch: var(--largo-titolo); font-weight: 780; font-size: var(--t-4); margin: 0; }
  .libero__tabellone { margin-top: var(--s2); }

  /* ─────────────────────────────────────────── circoli */
  .circoli-sito__intro { margin-top: var(--s3); color: var(--testo-2); font-size: 1.0625rem; }
  .circoli-sito__elenco { list-style: none; margin: var(--s8) 0 0; padding: 0; columns: 1; column-gap: var(--s10); }
  @media (min-width: 640px) { .circoli-sito__elenco { columns: 2; } }
  @media (min-width: 1000px) { .circoli-sito__elenco { columns: 3; } }
  .circolo-sito { break-inside: avoid; display: grid; grid-template-columns: 1fr auto; column-gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--filetto); }
  .circolo-sito__nome { font-weight: 700; }
  .circolo-sito__zona { grid-row: 2; color: var(--testo-2); font-size: var(--t-1); }
  .circolo-sito__campi { grid-row: span 2; align-self: center; color: var(--testo-2); font-size: var(--t-1); white-space: nowrap; }
  .circolo-sito__campi .tabellone-cifre { font-size: 1.5rem; color: var(--testo); margin-right: 2px; }

  /* ─────────────────────────────────────────── garanzie */
  .garanzie__elenco { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; gap: var(--s6); }
  @media (min-width: 720px) { .garanzie__elenco { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1040px) { .garanzie__elenco { grid-template-columns: repeat(4, 1fr); } }
  .garanzie__elenco li { display: flex; gap: var(--s3); align-items: flex-start; }
  .garanzie__elenco .icona { color: var(--accento); margin-top: 2px; }
  .garanzie__elenco h3 { font-size: var(--t-2); font-stretch: var(--largo-testo); font-weight: 750; letter-spacing: 0; }
  .garanzie__elenco p { color: var(--testo-2); font-size: 0.9375rem; margin-top: 2px; }

  /* ─────────────────────────────────────────── chiusura */
  .chiusura {
    margin-top: var(--s16); padding: var(--s16) var(--s5); display: grid; justify-items: center; gap: var(--s6); text-align: center;
    background: var(--campo); color: #fff;
  }
  .chiusura__titolo { font-stretch: 70%; font-weight: 820; font-size: clamp(2.8rem, 9vw, 5.6rem); line-height: 0.95; letter-spacing: -0.01em; }

  /* ─────────────────────────────────────────── link condiviso */
  .condivisa { width: 100%; max-width: 560px; margin: 0 auto; padding: var(--s4) var(--s4) var(--s16); display: grid; gap: var(--s6); }
  .condivisa__scheda { display: grid; gap: var(--s3); padding: var(--s6) var(--s5); background: var(--superficie); border: 1px solid var(--filetto); border-radius: 24px; }
  .condivisa__chi { color: var(--testo-2); font-weight: 650; margin: 0; }
  .condivisa__campo { display: grid; place-items: center; padding: var(--s4) 0; }
  .condivisa__nota { color: var(--testo-2); font-size: var(--t-1); text-align: center; margin: 0; }
  .condivisa__spiega { display: grid; gap: var(--s2); padding: 0 var(--s2); }
  .condivisa__spiega h2 { font-size: var(--t-3); }
  .condivisa__spiega p { color: var(--testo-2); }

  /* ─────────────────────────────────────────── pannello di gestione */
  .gestione { min-height: 100dvh; display: grid; grid-template-rows: auto auto 1fr; }
  @media (min-width: 960px) { .gestione { grid-template-columns: 232px 1fr; grid-template-rows: auto 1fr; } }
  .gestione__testa { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--filetto); background: var(--superficie); position: sticky; top: 0; z-index: 30; }
  .gestione__etichetta { font-weight: 650; color: var(--testo-2); padding-left: var(--s3); border-left: 1px solid var(--filetto); }
  .gestione__nav { display: flex; gap: var(--s1); overflow-x: auto; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--filetto); background: var(--superficie); }
  @media (min-width: 960px) { .gestione__nav { flex-direction: column; overflow: visible; border-bottom: 0; border-right: 1px solid var(--filetto); padding: var(--s4) var(--s3); } }
  .gestione__voce { display: flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s3); border-radius: var(--r-campo); color: var(--testo-2); text-decoration: none; font-weight: 600; white-space: nowrap; }
  .gestione__voce:hover { background: var(--superficie-2); color: var(--testo); }
  .gestione__voce[aria-current="page"] { background: var(--accento-tenue); color: var(--accento); }
  .gestione__corpo { padding: var(--s6) var(--s4) var(--s16); width: 100%; max-width: 1100px; display: grid; gap: var(--s4); align-content: start; }
  @media (min-width: 960px) { .gestione__corpo { padding: var(--s8); } }

  .tessere { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .tessera { display: grid; gap: var(--s1); padding: var(--s4); background: var(--superficie); border: 1px solid var(--filetto); border-radius: var(--r-pannello); }
  .tessera--evidenza { border-color: var(--accento); box-shadow: inset 0 3px 0 var(--accento); }
  .tessera__nome { color: var(--testo-2); font-size: var(--t-1); font-weight: 600; }
  .tessera__valore { font-stretch: var(--largo-tabellone); font-weight: 830; font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
  .tessera__nota { color: var(--testo-2); font-size: var(--t-0); }

  .grafico { display: grid; gap: var(--s3); padding: var(--s4); background: var(--superficie); border: 1px solid var(--filetto); border-radius: var(--r-pannello); margin-top: var(--s4); }
  .grafico__capo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); }
  .grafico__capo .sezione__titolo { margin-right: auto; }
  .grafico__legenda { display: flex; gap: var(--s4); }
  .legenda { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-1); color: var(--testo-2); }
  .legenda__segno { width: 12px; height: 12px; border-radius: 3px; }
  .legenda__segno--pieno { background: var(--accento); }
  .legenda__segno--vuoto { border: 1.5px solid var(--accento); }
  .grafico__area { position: relative; }
  .grafico__svg { width: 100%; height: auto; display: block; }
  .grafico__griglia { stroke: var(--filetto); stroke-width: 1; }
  .grafico__base { stroke: var(--filetto-forte); stroke-width: 1; }
  .grafico__asse { fill: var(--testo-2); font-size: 11px; font-variant-numeric: tabular-nums; }
  .grafico__pieno { fill: var(--accento); }
  .grafico__vuoto { fill: none; stroke: var(--accento); stroke-width: 1.5; }
  .grafico__bersaglio { fill: transparent; }
  .grafico__bersaglio:hover, .grafico__bersaglio:focus { fill: color-mix(in srgb, var(--accento) 8%, transparent); outline: none; }
  .grafico__fumetto { position: absolute; top: -6px; transform: translate(-50%, -100%); display: grid; gap: 2px; padding: var(--s2) var(--s3); border-radius: var(--r-campo); background: var(--notte); color: #fff; font-size: var(--t-1); white-space: nowrap; pointer-events: none; box-shadow: var(--ombra-azione); }
  :root[data-tema="notte"] .grafico__fumetto { background: var(--linea); color: var(--notte); }
  .barre { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
  .barre__riga { display: grid; grid-template-columns: minmax(110px, 180px) 1fr auto; gap: var(--s3); align-items: center; }
  .barre__nome { font-weight: 600; font-size: var(--t-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barre__pista { height: 14px; border-radius: 4px; background: var(--superficie-2); overflow: hidden; }
  .barre__valore { display: block; height: 100%; background: var(--accento); border-radius: 0 4px 4px 0; }
  .barre__numero { font-size: var(--t-1); white-space: nowrap; }

  .schede { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
  .scheda-admin { display: grid; gap: var(--s2); padding: var(--s4); background: var(--superficie); border: 1px solid var(--filetto); border-radius: var(--r-pannello); }
}