/* ==========================================================================
   Magic Studio — direzione "Podio"
   Colori campionati dal logo: oro #f0b400, rosso #c00000
   ========================================================================== */

:root {
  --nero:        #0d0b09;
  --superficie:  #17130e;
  --superficie2: #211a12;
  --oro:         #f0b400;
  --oro-chiaro:  #ffd45e;
  --oro-scuro:   #c9a54a;
  --rosso:       #c00000;
  --testo:       #f4ede0;
  --testo-2:     #cbc0b1;
  --muto:        #a2968a;
  --muto-2:      #6f665c;
  --bordo:       rgba(240, 180, 0, 0.16);
  --bordo-forte: rgba(240, 180, 0, 0.32);

  --display: 'Archivo Black', 'Arial Black', 'Helvetica Neue', sans-serif;
  --corpo:   'Barlow', 'Helvetica Neue', Arial, sans-serif;

  --gutter: 72px;
  --max:    1280px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nero);
  color: var(--testo);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--oro); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--oro-chiaro); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.02em; margin: 0; }

:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--oro); color: var(--superficie); padding: 12px 20px;
  font-family: var(--display); font-size: 13px; letter-spacing: .08em;
}
.salta:focus { left: 0; }

/* --- occhiello ----------------------------------------------------------- */

.occhiello { display: flex; align-items: center; gap: 12px; }
.occhiello::before { content: ''; width: 28px; height: 2px; background: var(--rosso); flex-shrink: 0; }
.occhiello span {
  font-family: var(--display); font-size: 12px; letter-spacing: .2em; color: var(--oro-scuro);
}

/* --- bottoni ------------------------------------------------------------- */

.btn {
  display: inline-block; font-family: var(--display); font-size: 14px;
  letter-spacing: .08em; padding: 15px 30px; border: 1px solid transparent;
  cursor: pointer; text-align: center; transition: background .15s ease, color .15s ease;
}
.btn-oro { background: var(--oro); color: var(--superficie); }
.btn-oro:hover { background: var(--oro-chiaro); color: var(--superficie); }
.btn-ghost { border-color: var(--bordo-forte); color: var(--oro); background: none; }
.btn-ghost:hover { border-color: var(--oro); color: var(--oro-chiaro); }

/* --- testata ------------------------------------------------------------- */

.testata { border-bottom: 1px solid var(--bordo); position: sticky; top: 0; z-index: 40;
           background: rgba(13, 11, 9, .94); backdrop-filter: blur(6px); }
.testata .wrap { display: flex; align-items: center; justify-content: space-between;
                 padding-block: 20px; }
.testata img { height: 46px; width: auto; }

.nav { display: flex; align-items: center; gap: 36px; }
.nav a {
  font-family: var(--display); font-size: 13px; letter-spacing: .14em;
  color: var(--muto); text-transform: uppercase;
}
.nav a:hover, .nav a[aria-current] { color: var(--oro); }

.lingue { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.lingue a {
  font-family: var(--display); font-size: 11px; letter-spacing: .1em;
  color: var(--muto-2); padding: 7px 9px; line-height: 1;
}
.lingue a:hover { color: var(--oro); }
.lingue a[aria-current] { color: var(--superficie); background: var(--oro); }

.hamburger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.hamburger svg { stroke: var(--oro); }

/* --- hero ---------------------------------------------------------------- */

.hero { border-bottom: 1px solid var(--bordo);
        background: radial-gradient(120% 90% at 12% 0%, #1b1509 0%, var(--nero) 62%); }
.hero .wrap { display: flex; gap: 64px; align-items: center; padding-block: 76px 84px; }
.hero-testo { display: flex; flex-direction: column; gap: 26px; flex-grow: 1; min-width: 0; }
.hero h1 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.03; text-wrap: pretty; }
.hero h1 em { font-style: normal; color: var(--oro); }
.hero p { margin: 0; font-size: 19px; color: var(--muto); max-width: 520px; }
.hero-azioni { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 6px; }

.hero-media { position: relative; width: 300px; flex-shrink: 0; }
.hero-media img { width: 100%; border: 1px solid var(--bordo-forte); }
.hero-badge {
  position: absolute; left: -14px; bottom: 26px; max-width: calc(100% + 14px);
  display: flex; align-items: center; gap: 8px;
  background: var(--rosso); color: #fff; padding: 8px 13px;
  font-family: var(--display); font-size: 10px; letter-spacing: .09em; line-height: 1.3;
}
.hero-badge svg { flex-shrink: 0; }

/* --- sezioni ------------------------------------------------------------- */

.sezione { padding-block: 72px 80px; }
.sezione-testata {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding-bottom: 34px;
}
.sezione-testata h1, .sezione-testata h2 { font-size: 34px; }
.sezione-testata p { margin: 0; font-size: 14px; color: var(--muto-2); }

/* --- griglia giochi ------------------------------------------------------ */

.griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }

.scheda {
  display: flex; flex-direction: column; background: var(--superficie);
  border: 1px solid var(--bordo); color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.scheda:hover { border-color: var(--bordo-forte); transform: translateY(-2px); color: inherit; }
.scheda > img { width: 100%; height: 320px; object-fit: contain; background: var(--nero); }
.scheda-corpo { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 26px; }
.scheda h3 { font-size: 21px; }
.scheda p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muto); }

.tag { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 6px; }
.tag span {
  font-size: 11px; letter-spacing: .1em; color: var(--oro-scuro);
  border: 1px solid rgba(240, 180, 0, .3); padding: 4px 9px;
}

.scheda-vuota {
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: 34px; border: 1px dashed rgba(240, 180, 0, .26);
}
.scheda-vuota h3 { font-size: 21px; }
.scheda-vuota p { margin: 0; font-size: 15px; color: var(--muto); }

/* --- blocco sostegno ----------------------------------------------------- */

.sostegno {
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
  flex-wrap: wrap; padding: 44px 48px; background: var(--superficie);
  border-left: 3px solid var(--rosso); margin-bottom: 76px;
}
.sostegno h2 { font-size: 28px; }
.sostegno p { margin: 10px 0 0; font-size: 16px; color: var(--muto); max-width: 560px; }

/* stessa banda, per il richiamo al Discord: filetto oro invece che rosso, cosi'
   non si confonde con il blocco donazione che chiude ogni pagina */
.comunita { border-left-color: var(--oro); background: var(--superficie2); margin-bottom: 0; }

/* --- pagina gioco -------------------------------------------------------- */

.gioco-hero { border-bottom: 1px solid var(--bordo);
              background: radial-gradient(110% 80% at 78% 0%, #1b1509 0%, var(--nero) 60%); }
.gioco-hero .wrap { display: flex; gap: 56px; padding-block: 56px 68px; }
.gioco-cover { width: 340px; flex-shrink: 0; }
.gioco-cover img { width: 100%; border: 1px solid var(--bordo-forte); }
.gioco-testo { display: flex; flex-direction: column; gap: 22px; flex-grow: 1; min-width: 0; }
.gioco-testo h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.05; }
.gioco-testo > p { margin: 0; font-size: 19px; color: var(--muto); max-width: 620px; }

.briciole { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muto-2); }
.briciole a { color: var(--muto-2); }
.briciole a:hover { color: var(--oro); }

.dati {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--bordo); border: 1px solid var(--bordo);
}
.dati div { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--superficie); }
.dati dt { font-size: 11px; letter-spacing: .14em; color: var(--muto-2); margin: 0; }
.dati dd { margin: 0; font-family: var(--display); font-size: 26px; color: var(--oro); }
.dati dd.testo { font-size: 18px; color: var(--testo); padding-top: 5px; }

.elenco-pill { display: flex; flex-wrap: wrap; gap: 10px; }
.elenco-pill li { list-style: none; font-size: 15px; background: var(--superficie2); padding: 9px 16px; }
.elenco-pill { margin: 0; padding: 0; }

.etichetta { font-family: var(--display); font-size: 13px; letter-spacing: .14em; color: var(--oro-scuro); }

.store { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.store img { height: 48px; width: auto; }
.store a { opacity: .92; transition: opacity .15s ease; }
.store a:hover { opacity: 1; }

.avviso { font-size: 13px; line-height: 1.55; color: var(--muto-2); margin: 0; }

/* --- sezioni discorsive delle schede gioco --------------------------------- */

.sezione-alt { background: var(--superficie); border-block: 1px solid var(--bordo); }
.prosa { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.prosa p { margin: 0; font-size: 17px; line-height: 1.75; color: var(--testo-2); }
.prosa strong { color: var(--testo); font-weight: 600; }
.prosa em { font-style: italic; color: var(--oro-scuro); }

/* --- tabelle dentro le sezioni discorsive --------------------------------- */

.tabella { overflow-x: auto; border: 1px solid var(--bordo); }
.tabella table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 16px; }
.tabella caption { text-align: left; padding: 0 0 10px; font-size: 14px; color: var(--muto-2); }
.tabella th, .tabella td { text-align: left; padding: 11px 18px; border-bottom: 1px solid var(--bordo); }
.tabella thead th {
  background: var(--superficie2); color: var(--oro-scuro);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}
.tabella tbody td { color: var(--testo-2); }
.tabella tbody td:first-child { color: var(--testo); }
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabella tbody .num { color: var(--oro); font-weight: 600; }

/* --- coppia di blocchetti dentro una sezione discorsiva ------------------- */

.coppia { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px 40px; }
.coppia h3 { font-family: var(--display); font-size: 17px; color: var(--testo); margin: 0 0 8px; }
.coppia p { margin: 0; }

/* --- elenchi di caratteristiche ------------------------------------------ */

.attributi { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.attributi li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.5; color: var(--testo-2); }
.attributi li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; background: var(--oro);
}
.attributi b { color: var(--testo); font-weight: 600; }

/* --- domande frequenti --------------------------------------------------- */
.faq > div { display: flex; flex-direction: column; gap: 8px; }
.faq h3 { font-family: var(--display); font-size: 19px; color: var(--testo); }

/* --- galleria ------------------------------------------------------------ */

.galleria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.galleria button {
  padding: 0; border: 1px solid var(--bordo); background: none; cursor: pointer;
  display: block; transition: border-color .15s ease;
}
.galleria button:hover { border-color: var(--oro); }
.galleria img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.galleria.quadrata img { aspect-ratio: 1 / 1; }
.galleria li { list-style: none; }
.galleria[hidden] { display: none; }

.galleria-altro { display: flex; justify-content: center; padding-top: 28px; }

/* --- carosello degli screenshot ------------------------------------------ */

.carosello-guscio { position: relative; }
.carosello {
  display: flex; gap: 16px; list-style: none; margin: 0; padding: 0 0 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-color: var(--bordo-forte) transparent;
}
.carosello li { flex: 0 0 clamp(260px, 64vw, 760px); scroll-snap-align: center; }
.carosello button {
  padding: 0; border: 1px solid var(--bordo); background: none; cursor: pointer;
  display: block; width: 100%; transition: border-color .15s ease;
}
.carosello button:hover { border-color: var(--oro); }
.carosello img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.carosello-freccia {
  position: absolute; top: calc(50% - 5px); transform: translateY(-50%);
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: rgba(23, 19, 14, .92); border: 1px solid var(--bordo-forte);
  color: var(--testo); cursor: pointer; z-index: 2;
}
.carosello-freccia:hover { border-color: var(--oro); color: var(--oro); }
.carosello-freccia[disabled] { opacity: .3; cursor: default; }
.carosello-freccia[disabled]:hover { border-color: var(--bordo-forte); color: var(--testo); }
.carosello-freccia.prec { left: 8px; }
.carosello-freccia.succ { right: 8px; }

@media (prefers-reduced-motion: reduce) { .carosello { scroll-behavior: auto; } }

/* --- lightbox ------------------------------------------------------------ */

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(6, 5, 4, .96);
  display: flex; align-items: center; justify-content: center; padding: 40px;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; object-fit: contain; }
.lightbox-chiudi, .lightbox-prec, .lightbox-succ {
  position: absolute; width: 56px; height: 56px; display: flex; align-items: center;
  justify-content: center; background: rgba(23, 19, 14, .9); border: 1px solid var(--bordo);
  cursor: pointer;
}
.lightbox-chiudi { top: 24px; right: 24px; }
.lightbox-prec { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-succ { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox svg { stroke: var(--oro); }
.lightbox-conta {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-size: 13px; color: var(--muto); letter-spacing: .06em;
}

/* --- donazione ----------------------------------------------------------- */

.donazione .wrap { display: flex; gap: 72px; padding-block: 72px 80px; flex-wrap: wrap; }
.donazione-pitch { display: flex; flex-direction: column; gap: 24px; flex: 1 1 420px; max-width: 520px; }
.donazione-pitch h1 { font-size: clamp(32px, 4vw, 46px); line-height: 1.06; }
.donazione-pitch h1 em { font-style: normal; color: var(--oro); }
.donazione-pitch p { margin: 0; font-size: 18px; color: var(--muto); }

.modulo {
  display: flex; flex-direction: column; gap: 24px; width: 456px; flex-shrink: 0;
  padding: 34px; background: var(--superficie); border: 1px solid rgba(240, 180, 0, .22);
}
.modulo h2 { font-size: 20px; }
.campo { display: flex; flex-direction: column; gap: 11px; }
.campo > span, .campo > label { font-size: 12px; letter-spacing: .14em; color: var(--muto-2); }

.importi { display: flex; gap: 10px; }
.importi button {
  flex-grow: 1; padding: 15px 0; text-align: center; font-family: var(--display);
  font-size: 16px; color: var(--testo); background: var(--superficie2);
  border: 1px solid rgba(240, 180, 0, .18); cursor: pointer; transition: all .12s ease;
}
.importi button:hover { border-color: var(--bordo-forte); }
.importi button[aria-pressed="true"] { background: var(--oro); color: var(--superficie); border-color: var(--oro); }

.riga { display: flex; gap: 12px; flex-wrap: wrap; }
.riga .campo:first-child { flex: 1 1 200px; }

.input-valuta { display: flex; align-items: center; gap: 10px; padding: 0 16px;
                background: var(--nero); border: 1px solid rgba(240, 180, 0, .24); }
.input-valuta .simbolo { font-family: var(--display); font-size: 17px; color: var(--oro); }
.input-valuta input {
  flex-grow: 1; min-width: 0; background: none; border: 0; color: var(--testo);
  font-family: var(--corpo); font-size: 17px; padding: 14px 0;
}
.input-valuta input:focus { outline: none; }

.modulo select {
  width: 148px; padding: 14px 16px; background: var(--nero); color: var(--testo);
  border: 1px solid rgba(240, 180, 0, .24); font-family: var(--corpo); font-size: 17px;
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a2968a' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.modulo button[type="submit"] { width: 100%; padding: 18px 0; font-size: 15px; }

.nota-sicura { display: flex; align-items: flex-start; gap: 10px; font-size: 13px;
               line-height: 1.55; color: var(--muto-2); }
.nota-sicura svg { flex-shrink: 0; margin-top: 2px; stroke: var(--muto-2); }

/* --- pagina legale ------------------------------------------------------- */

.legale-testata { border-bottom: 1px solid var(--bordo); }
.legale-testata .wrap { display: flex; flex-direction: column; gap: 18px; padding-block: 62px 46px; }
.legale-testata h1 { font-size: clamp(32px, 4vw, 46px); line-height: 1.06; }
.legale-testata .meta { font-size: 15px; color: var(--muto-2); }

.legale .wrap { display: flex; gap: 64px; padding-block: 54px 66px; align-items: flex-start; }
.indice { width: 250px; flex-shrink: 0; position: sticky; top: 110px;
          display: flex; flex-direction: column; gap: 14px; }
.indice strong { font-family: var(--display); font-size: 12px; letter-spacing: .16em;
                 color: var(--muto-2); font-weight: 400; padding-bottom: 4px; }
.indice a { font-size: 15px; color: var(--muto); border-left: 2px solid #2c2620; padding-left: 14px; }
.indice a:hover { color: var(--oro); border-color: var(--oro); }

.legale-corpo { display: flex; flex-direction: column; gap: 34px; flex-grow: 1; max-width: 720px; min-width: 0; }
.legale-corpo section { display: flex; flex-direction: column; gap: 16px;
                        padding-top: 6px; border-top: 1px solid var(--bordo); }
.legale-corpo h2 { font-size: 24px; margin-top: 12px; }
.legale-corpo h3 { font-family: var(--display); font-size: 15px; letter-spacing: .06em; color: var(--oro); }
.legale-corpo p { margin: 0; font-size: 17px; line-height: 1.75; color: var(--testo-2); }
.legale-corpo strong { color: var(--testo); }
.legale-contatto { display: flex; align-items: center; gap: 12px; margin-top: 2px;
                   padding: 16px 20px; background: var(--superficie); border-left: 3px solid var(--rosso); }
.legale-contatto svg { flex-shrink: 0; stroke: var(--oro); }

/* --- nota sull'uso di strumenti di IA (fondo scheda gioco) ---------------- */

/* Dichiarazione, non richiamo: filetto sottile, testo piccolo, nessun colore
   d'accento. Deve essere leggibile da chi la cerca e invisibile a chi non la
   cerca. */
.nota-ai { border-top: 1px solid var(--bordo); padding-top: 22px; margin-bottom: 44px;
           display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.nota-ai h2 { font-family: var(--display); font-size: 13px; letter-spacing: .14em;
              text-transform: uppercase; color: var(--muto-2); }
.nota-ai p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muto); }

/* --- cartella stampa ----------------------------------------------------- */

/* I testi da copiare e incollare: filetto oro a sinistra come il blocco
   sostegno, e selezione evidente, perche' servono a essere presi via. */
.stampa-copia { background: var(--superficie); border-left: 3px solid var(--oro);
                padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.stampa-copia .etichetta { margin: 0; }
.stampa-copia p { margin: 0; }
.stampa-copia ::selection { background: var(--oro); color: var(--superficie); }

/* Elenco dei file da scaricare: nome, che cos'e', quanto pesa. */
.scarica { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.scarica a { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px;
             background: var(--superficie); border: 1px solid var(--bordo);
             transition: border-color .15s ease, transform .15s ease; }
.scarica a:hover { border-color: var(--oro); transform: translateY(-2px); }
.scarica strong { font-family: var(--display); font-size: 17px; color: var(--testo); }
.scarica a:hover strong { color: var(--oro); }
.scarica span { font-size: 15px; line-height: 1.55; color: var(--muto); }
.scarica em { font-style: normal; font-size: 12px; letter-spacing: .14em;
              text-transform: uppercase; color: var(--oro-scuro); }

/* Gli scatti di Final Whistle sono 16:10: nella griglia della cartella stampa
   si mostrano interi, senza il taglio a 16:9 delle altre schede. */
.galleria.dieci img { aspect-ratio: 16 / 10; }

/* --- piede --------------------------------------------------------------- */

.piede { border-top: 1px solid var(--bordo); }
.piede .wrap { display: flex; align-items: center; justify-content: space-between;
               gap: 24px; flex-wrap: wrap; padding-block: 34px 44px; }
.piede small { font-size: 13px; color: var(--muto-2); }
.piede nav { display: flex; gap: 28px; }
.piede nav a { font-size: 13px; color: var(--muto); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  :root { --gutter: 40px; }
  .hero .wrap { gap: 44px; }
  .hero-media { width: 300px; }
  .griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legale .wrap { gap: 40px; }
  .indice { width: 200px; }
}

@media (max-width: 820px) {
  :root { --gutter: 24px; }
  body { font-size: 16px; }

  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--superficie); border-bottom: 1px solid var(--bordo);
  }
  .nav[data-aperto] { display: flex; }
  .nav a { padding: 16px 24px; border-top: 1px solid var(--bordo); font-size: 14px; }
  .lingue { margin: 0; gap: 0; border-top: 1px solid var(--bordo); }
  .lingue a { border-top: 0; padding: 14px 24px; }
  .hamburger { display: flex; }
  .testata .wrap { position: relative; }

  .hero .wrap { flex-direction: column; align-items: stretch; gap: 36px; padding-block: 44px 52px; }
  .hero-media { width: 100%; max-width: 300px; }
  .hero-badge { left: 0; }
  .hero p { font-size: 17px; }
  .hero-azioni .btn { flex: 1 1 100%; }

  .gioco-hero .wrap { flex-direction: column; gap: 32px; padding-block: 36px 44px; }
  .gioco-cover { width: 100%; max-width: 320px; }
  .dati { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sezione { padding-block: 48px 56px; }
  .griglia { grid-template-columns: 1fr; gap: 20px; }
  .scheda { flex-direction: row; align-items: center; gap: 14px; padding: 12px; }
  .scheda > img { width: 84px; height: 84px; flex-shrink: 0; object-fit: cover; }
  .scheda-corpo { padding: 0; gap: 6px; }
  .scheda h3 { font-size: 17px; }
  .scheda p { font-size: 14px; }
  .scheda .tag { padding-top: 2px; }
  .scheda-vuota { padding: 24px; }

  .galleria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .scarica { grid-template-columns: 1fr; gap: 14px; }

  .sostegno { padding: 28px 24px; margin-bottom: 48px; }
  .sostegno .btn { width: 100%; }

  .donazione .wrap { flex-direction: column; gap: 32px; padding-block: 44px 56px; }
  .donazione-pitch { flex: 0 1 auto; max-width: none; }
  .modulo { width: 100%; padding: 24px; }
  .modulo select { width: 100%; }

  .legale .wrap { flex-direction: column; padding-block: 36px 48px; }
  .indice { position: static; width: 100%; flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .indice strong { width: 100%; }
  .indice a { border-left: 0; border: 1px solid var(--bordo); padding: 8px 12px; font-size: 14px; }

  .lightbox { padding: 16px; }
  .lightbox-prec { left: 8px; }
  .lightbox-succ { right: 8px; }
  .lightbox-chiudi { top: 12px; right: 12px; }

  .piede .wrap { flex-direction: column; align-items: flex-start; gap: 14px; padding-block: 24px 32px; }
}

@media (max-width: 460px) {
  .importi { flex-wrap: wrap; }
  .importi label { flex: 1 1 calc(50% - 5px); }
  .store img { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ==========================================================================
   L'archivio dei replay di Final Whistle
   /manager/final-whistle/replay/ — sezione PHP con database, sei lingue
   ==========================================================================

   Sta **qui** e non in un foglio suo, e la ragione e' la stessa per cui testata e
   piede sono diventati due funzioni in lib/layout.php: una sezione con un CSS
   proprio e' una sezione che scivola via da sola. Era gia' successo — nasceva con
   fondo bluastro e angoli tondi, e sembrava un altro sito.

   Qui sotto non si dichiara nessun colore e nessun carattere: si usano le variabili
   di :root, quelle di sopra. Un valore scritto a mano in questo blocco sarebbe un
   valore che il giorno che la direzione cambia resta indietro, e resta indietro
   solo in questa sezione — cioe' il difetto di prima, di nuovo.

   Le pagine del sito si portano dietro questi tre chili di CSS che non usano. Sono
   quattro kilobyte su un foglio che il browser scarica una volta e tiene in cache
   per un mese: costa meno di quanto costi una seconda copia della direzione visiva.

   L'unico foglio che resta fuori e' quello del widget, js/fwr-player.css: non e'
   di questa sezione, e' del lettore, e arriva sincronizzato dal repository del
   gioco con `node sync.js`. Copiarlo qui vorrebbe dire vederlo divergere al primo
   ritocco di la'. Qui c'e' solo la sua ritintura, che e' roba di design.
   ========================================================================== */

/* ══ la barra in alto, quando le lingue sono sei invece di due ═══════════════════════════════
 *
 * La testata è una sola per tutto il sito, e queste regole valgono **solo dove le sigle sono
 * più di due**: `:has()` guarda se nel gruppo delle lingue c'è un terzo link. Scritte senza
 * quel filtro stringerebbero il menu anche sulle pagine bilingui, che quello spazio ce l'hanno
 * e lo usano — una modifica fatta per una sezione che si porta dietro tutto il resto è
 * esattamente il difetto che unire i due fogli doveva togliere.
 *
 * Dove `:has()` non c'è, il menu resta com'è: sei sigle a 36px di distanza stanno un po'
 * strette su schermi medi, ma niente si rompe. È il modo giusto di degradare.
 *
 * `flex-wrap` è quello che su un telefono lascia la fila andare a capo invece di uscire dallo
 * schermo. */

.nav:has(.lingue a:nth-child(3)) { gap: 28px; }

.nav:has(.lingue a:nth-child(3)) .lingue { flex-wrap: wrap; }

@media (max-width: 820px) {
    .nav:has(.lingue a:nth-child(3)) .lingue { justify-content: flex-start; }
    .nav:has(.lingue a:nth-child(3)) .lingue a { padding: 14px 18px; }
}

/* ══ la fascia in testa alle pagine ══════════════════════════════════════════════════════════
 *
 * È il `.legale-testata` del sito con un altro nome: la stessa riga sotto, lo stesso respiro. Un
 * nome suo e non quello serve perché le due cose si somigliano ma non sono la stessa — questa
 * porta le briciole e un occhiello, e prima o poi una delle due cambierà da sola. */

.archivio-testata { border-bottom: 1px solid var(--bordo);
                    background: radial-gradient(110% 80% at 78% 0%, #1b1509 0%, var(--nero) 60%); }

.archivio-testata .wrap { display: flex; flex-direction: column; align-items: flex-start;
                          gap: 16px; padding-block: 46px 40px; }

.archivio-testata h1 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08; }

.archivio-testata .sub { margin: 0; font-size: 17px; color: var(--muto); max-width: 640px; }

.testata-azioni { margin: 6px 0 0; }

/* Il titolo di un replay: le due squadre, il punteggio in oro, e i due colori sociali ai lati.
   `flex-wrap` perché due nomi lunghi — «Borussia Mönchengladbach» — a 42 pixel non ci stanno su
   una riga sola, e mandarli a capo è meglio che rimpicciolire il titolo di tutte le pagine. */
.titolo-replay { display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
                 min-width: 0; overflow-wrap: anywhere; }
.titolo-replay em { font-style: normal; color: var(--oro); }

/* Il quadratino del colore sociale. Squadrato come tutto il resto del sito, e con un filo di
   bordo perché una maglia quasi nera su fondo nero altrimenti non si vede. */
.pallino { width: 14px; height: 14px; flex: none;
           border: 1px solid rgba(244, 237, 224, .22); }

/* ══ la ricerca ══════════════════════════════════════════════════════════════════════════════
 *
 * Il riquadro del modulo delle donazioni, steso in orizzontale: stesso fondo, stesso bordo, e i
 * `.campo` sono proprio quelli del sito — etichetta piccola in maiuscoletto sopra il controllo. */

.cerca {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    margin-bottom: 44px;
    padding: 22px 24px;
    background: var(--superficie);
    border: 1px solid rgba(240, 180, 0, .22);
}

.cerca .campo { gap: 8px; flex: 1 1 170px; }

.cerca-azioni { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }

.cerca .btn { padding: 13px 26px; }

.azzera { font-size: 14px; color: var(--muto); }
.azzera:hover { color: var(--oro); }

/* I controlli del modulo. Il sito ne veste solo due — `select` e l'input dell'importo — e la
   ricerca ne ha cinque tipi, quindi la vestizione sta qui, con lo stesso disegno: fondo nero,
   filo d'oro tenue, nessun angolo tondo. La freccia del `select` è la stessa data-URI. */
.cerca input,
.cerca select {
    width: 100%;
    min-width: 0;
    padding: 13px 16px;
    background: var(--nero);
    color: var(--testo);
    border: 1px solid rgba(240, 180, 0, .24);
    font-family: var(--corpo);
    font-size: 16px;
}

.cerca select {
    appearance: none;
    cursor: pointer;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a2968a' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.cerca input:focus,
.cerca select:focus { outline: none; border-color: var(--bordo-forte); }

/* Il calendario di `input[type=date]` è disegnato dal browser e nasce nero su nero: senza questo
   la data si può scrivere ma l'icona per aprirla non si vede. */
.cerca input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7) sepia(1) saturate(3) hue-rotate(3deg); cursor: pointer; }

/* ══ l'elenco ════════════════════════════════════════════════════════════════════════════════
 *
 * `.griglia` la porta il sito — tre colonne, due sotto 1100, una sotto 820. Qui c'è solo la
 * scheda, che è `.scheda` senza immagine: stesso fondo, stesso bordo, stesso sollevarsi di due
 * pixel quando ci passi sopra. */

.lista { align-items: start; }

.card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 22px 22px;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}

.card:hover { border-color: var(--bordo-forte); transform: translateY(-2px); color: inherit; }

/* La riga di sopra: che cos'è a sinistra, quanti pollici a destra. Il numero dei like è l'unica
   cosa della scheda che cambia dopo, e tenendolo in un angolo fisso l'occhio lo ritrova. */
.card-alto { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.badge {
    font-family: var(--display);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 5px 9px;
    line-height: 1;
}

/* Il gol è la cosa per cui si viene: prende l'oro pieno. L'azione salvata a mano è l'altra, e sta
   in punta di penna — bordo e testo, niente fondo. */
.badge--gol { background: var(--oro); color: var(--superficie); }
.badge--azione { border: 1px solid var(--bordo-forte); color: var(--oro-scuro); padding: 4px 8px; }

.cuori { font-size: 13px; color: var(--muto-2); font-variant-numeric: tabular-nums; }
.card:hover .cuori { color: var(--muto); }

.squadre { display: flex; align-items: center; gap: 9px;
           font-family: var(--display); font-size: 16px; line-height: 1.25; }
.squadre .nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.squadre .punteggio { color: var(--oro); flex: none; }
.card .pallino { width: 10px; height: 10px; }

/* `.card .meta` e non `.meta` nudo: `.meta` esiste gia' sul sito, sulle pagine legali
   (`.legale-testata .meta`), e un selettore senza padre da qui gliela cambierebbe sotto. E'
   il rischio che si corre unendo due fogli, e si paga una volta sola scrivendo il padre. */
.card .meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
              color: var(--muto-2); font-size: 13px; }

/* Nessun risultato: il riquadro tratteggiato che il sito usa per la scheda vuota. */
.vuoto {
    margin: 0;
    padding: 40px 34px;
    text-align: center;
    color: var(--muto);
    border: 1px dashed rgba(240, 180, 0, .26);
}

/* Il secondo titolo di sezione della home ha bisogno d'aria sopra: il primo ce l'ha dal
   `.sezione`, questo verrebbe attaccato alle schede di sopra. */
.sezione-testata--poi { padding-top: 56px; }

.pagine { display: flex; align-items: center; gap: 20px; padding-top: 34px;
          font-size: 15px; color: var(--muto-2); }

/* ══ la pagina di un replay ══════════════════════════════════════════════════════════════════ */

/* **Il campo è 16:9**, come un video, e non un'altezza in `vh`.
 *
 * Prima era `62vh`, cioè una proporzione che cambiava con la finestra: su un portatile largo e
 * basso il campo veniva schiacciato, su un monitor alto veniva quadrato, e in nessuno dei due
 * casi era l'inquadratura con cui il replay è stato registrato. Sedici a nove è la forma in cui
 * un'azione si guarda, ed è la stessa da tutte le parti.
 *
 * La proporzione sta su `.fwr-stage`, cioè sul **campo**, non sul widget intero: la barra con le
 * squadre e la fila dei comandi stanno fuori dal conto, o il 16:9 sarebbe quello della scatola e
 * il campo verrebbe più basso. Il canvas prende le misure da lì — `getBoundingClientRect` dello
 * stage — quindi non c'è nient'altro da dire al lettore. */
.sezione--campo { padding-block: 40px 72px; }

/* Qui basta togliere l'altezza fissa che c'era prima: il resto lo fa il widget, che dalla sua
   larghezza ricava la sua altezza. Le regole sulla forma stanno nel suo foglio e non in questo —
   una proporzione che il widget promette non può dipendere da un file che non controlla. */
#stage { height: auto; }

.barra { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 20px; }

.barra .btn { margin-left: auto; padding: 12px 24px; }

/* Il pollice. Acceso è **rosso pieno**, che è l'altro colore del logo e l'unico posto della
   sezione dove compare: il cuore vuoto o pieno da solo si distingue male a colpo d'occhio. */
.like {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    background: var(--superficie2);
    border: 1px solid var(--bordo);
    color: var(--testo);
    font-family: var(--display);
    font-size: 14px;
    letter-spacing: .06em;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.like:hover:not(:disabled) { border-color: var(--bordo-forte); }
.like:disabled { opacity: .6; cursor: default; }
.like.on { background: var(--rosso); border-color: var(--rosso); color: #fff; }

.condividi { color: var(--muto-2); font-size: 13px; word-break: break-all; min-width: 220px; }

/* ══ la nota nel piede ═══════════════════════════════════════════════════════════════════════
 *
 * È la `.nota-ai` delle schede gioco: filetto sottile, testo piccolo, nessun colore d'accento.
 * Dichiarazione e non richiamo — leggibile da chi la cerca, invisibile a chi non la cerca.
 *
 * **Sta nella riga del piede, non sotto.** Prima era a tutta larghezza su una riga sua, con un
 * filetto sopra: sembrava un blocco attaccato dopo, e non lo è — è una delle tre cose che il
 * piede dice, insieme al copyright e ai link. Quindi terza voce della stessa riga, in mezzo,
 * allineata al centro come le altre due (`.piede .wrap` è già `align-items: center`), con la
 * stessa tipografia di `.piede small`: 13px e `--muto-2`.
 *
 * Niente filetto sopra. Ce n'è già uno, ed è quello di `.piede` che separa il piede dalla
 * pagina: un secondo a metà del piede lo taglia in due.
 *
 * L'`order` serve perché nel markup la nota viene **dopo** il menu — il piede è un componente
 * solo e la nota è l'ultimo parametro. A video però va in mezzo, e `:has()` sposta il menu a
 * destra soltanto nelle pagine che la nota ce l'hanno. */

.piede .nota { order: 2; flex: 0 1 auto; min-width: 0; margin: 0;
               font-size: 13px; line-height: 1.4; color: var(--muto-2); text-align: center; }

.piede .wrap:has(.nota) nav { order: 3; }

/* ══ il widget, ritinto ══════════════════════════════════════════════════════════════════════
 *
 * Le sei variabili sono il modo previsto da `fwr-player.css` per ricolorarlo. Quello che le
 * variabili non coprono — gli angoli tondi, il carattere di sistema, il fondo dei bottoni — si
 * scavalca qui sotto, e ha una ragione sola: **sul sito non c'è un angolo tondo**. Un riquadro
 * arrotondato in mezzo a schede squadrate si nota subito, e si nota come un errore. */

.fwr {
    --fwr-bg: var(--nero);
    --fwr-panel: var(--superficie);
    --fwr-ink: var(--testo);
    --fwr-dim: var(--muto);
    --fwr-line: var(--bordo);
    --fwr-accent: var(--oro);

    border-radius: 0;
    font-family: var(--corpo);
}

.fwr-badge { border-radius: 0; }

.fwr-team { font-weight: 600; }

.fwr-score { font-family: var(--display); font-weight: 400; letter-spacing: .02em; }

/* Il campo dietro il disegno: il nero del sito invece del verde scurissimo di serie. Si vede solo
   nella striscia fuori dal manto, quando l'inquadratura è più larga del rettangolo. */
.fwr-stage { background: var(--nero); }

.fwr-btn {
    border-radius: 0;
    background: var(--superficie2);
    font-family: var(--corpo);
}

.fwr-btn:hover:not(:disabled) { background: #2b2317; border-color: var(--bordo-forte); }

.fwr-warn { border-radius: 0; background: rgba(13, 11, 9, .92); color: var(--oro-chiaro); }

/* Del pannello d'errore si cambia **solo il fondo**: il rosa che ci mette il widget resta, perché
   quella frase deve leggersi come un guasto e non come una didascalia. Il beige del sito, lì, la
   farebbe sembrare una nota. */
.fwr-error { background: rgba(13, 11, 9, .94); }

/* ══ le soglie ═══════════════════════════════════════════════════════════════════════════════
 *
 * Le stesse tre del sito — 1100, 820, 460 — e non altre: due fogli che si stringono in punti
 * diversi danno una pagina che a metà strada non è né una cosa né l'altra. */

@media (max-width: 1100px) {
    .cerca .campo { flex-basis: 150px; }
}

@media (max-width: 820px) {
    /* Il piede si impila, e una riga di testo allineata al centro in una colonna di cose
       allineate a sinistra si vede subito che e' fuori posto. */
    .piede .nota { text-align: left; }

    .archivio-testata .wrap { padding-block: 32px 30px; }

    .cerca { padding: 18px; gap: 12px; margin-bottom: 32px; }
    .cerca .campo { flex-basis: 100%; }
    .cerca-azioni { width: 100%; }
    .cerca .btn { flex: 1; }

    .sezione--campo { padding-block: 28px 48px; }

    /* La fila sotto il campo si impila, ma **i due comandi restano affiancati**: sono le due
       cose che si toccano — il pollice e il ritorno all'archivio — e una sopra l'altra a tutta
       larghezza allontanano l'indirizzo da condividere, che è la terza e non si tocca affatto. */
    .barra { gap: 10px; }
    .barra .like { flex: 1 1 auto; justify-content: center; }
    .barra .btn { margin-left: 0; flex: 1 1 auto; width: auto; text-align: center; }

    /* `break-all` spezzava la URL in mezzo a una parola, anche dove ci sarebbe stato un trattino
       o una barra: `anywhere` prova prima i punti giusti e taglia solo se serve davvero. */
    .condividi { order: 3; min-width: 0; width: 100%;
                 word-break: normal; overflow-wrap: anywhere; }

    .sezione-testata--poi { padding-top: 40px; }
}

@media (max-width: 460px) {
    /* `.archivio-testata` davanti **serve**: il `clamp()` del titolo sta su `.archivio-testata h1`,
       che pesa più di `.titolo-replay` da solo — senza il primo pezzo questa riga non fa niente,
       e su un telefono stretto «Borussia Mönchengladbach» a 28 pixel esce dallo schermo. */
    .archivio-testata .titolo-replay { font-size: 24px; gap: 8px; }

    /* Su un telefono l'intestazione della pagina è quello che sta **fra il dito e il campo**:
       ogni pixel che si prende è un pixel di replay in meno sopra la piega. Si stringe il
       respiro e si rimpiccioliscono le due righe di servizio, che sono contorno e non titolo. */
    .archivio-testata .wrap { padding-block: 22px 20px; gap: 12px; }
    .archivio-testata .sub { font-size: 15px; line-height: 1.45; }
    .briciole { font-size: 12px; gap: 8px; }

    .sezione--campo { padding-block: 18px 36px; }
    .barra { padding-top: 14px; }

    /* Il pollice e il ritorno: alti abbastanza da centrarli col dito, e con la stessa altezza
       fra loro, che affiancati si vede subito se non ce l'hanno. */
    .barra .like,
    .barra .btn { min-height: 46px; padding-inline: 14px; }

    .condividi { font-size: 12px; }

    .squadre { font-size: 15px; }

    /* **I comandi del widget non stanno più qui.** C'erano tre righe che li mandavano a capo, ed
       erano nel posto sbagliato: il widget finisce anche in colonne strette su schermi larghi, e
       una media query non se ne accorge. Adesso se le porta lui, in `fwr-player.css`, dentro una
       `@container` che guarda quanto è largo il widget — e due fogli che ordinano gli stessi
       elementi litigherebbero, perché questo si carica dopo e vincerebbe lui. */
}