/* ZighiRun — foglio di stile unico.
   Nessuna risorsa esterna: niente font remoti, niente CDN, niente tracciatori.
   È una scelta, non una pigrizia: il sito deve caricare subito anche su una
   connessione da autobus, e non deve avere niente da dichiarare nella privacy. */

:root {
  --sfondo: #fbfaf8;
  --sfondo-2: #f1eee9;
  --testo: #1e1c1a;
  --testo-2: #5d5852;
  --bordo: #e0dbd3;
  --caldo: #c9761f;   /* il lato umano: la chiave */
  --freddo: #1f7f99;  /* il lato macchina: la maniglia */
  /* Testo sopra i colori d'accento. Cambia col tema, perche' gli accenti cambiano:
     in chiaro sono scuri e vogliono testo bianco, in scuro sono chiari e vogliono testo nero.
     Tenerlo fisso a bianco dava ~2:1 di contrasto sui pulsanti in tema scuro. */
  --su-accento: #ffffff;
  --larghezza: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #15140f;
    --sfondo-2: #201e18;
    --testo: #f0ece4;
    --testo-2: #a8a29a;
    --bordo: #33302a;
    --caldo: #e8a33d;
    --freddo: #4bb8d4;
    --su-accento: #15140f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--sfondo);
  color: var(--testo);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.contenitore { max-width: var(--larghezza); margin: 0 auto; }

/* Logo grande sopra, menu sotto: due righe, tutte e due allineate a sinistra.
   La versione su una riga sola faceva sembrare il logo un'etichetta; questo lo tratta
   per quello che è, il marchio del gioco. */
header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 2rem 0 1.5rem;
  border-bottom: 1px solid var(--bordo);
  margin-bottom: 2.5rem;
}

/* Il marchio è il logo del gioco (la scritta composta con l'auto), non testo:
   width e height sono dichiarati nell'HTML per non far ballare la pagina mentre carica. */
header .marchio { display: block; line-height: 0; }
header .marchio img { height: 8rem; width: auto; display: block; }
/* Su schermo stretto l'altezza fissa sfonderebbe: qui comanda la larghezza,
   e l'altezza torna automatica per non deformare il logo. */
@media (max-width: 560px) {
  header .marchio img { height: auto; width: 100%; max-width: 20rem; }
}

/* Il menu va a destra, sotto il logo: il margine automatico a sinistra lo spinge
   sul bordo opposto del contenitore. È voluto — logo grande a sinistra, voci a destra. */
header nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
header nav a { color: var(--testo-2); text-decoration: none; font-size: 0.95rem; }
header nav a:hover, header nav a[aria-current] { color: var(--testo); text-decoration: underline; }

/* LA SCELTA DELLA LINGUA, ultima voce del menu. È la stessa del gioco — una bandiera
   fra due frecce — e per la stessa ragione, scritta nel tooltip di SettingsController:
   è l'unica voce che deve restare leggibile a chi NON capisce la lingua in cui è
   scritto tutto il resto, quindi il suo stato lo dice una BANDIERA e non una parola.
   Le due frecce sono due LINK alle lingue vicine (ordine del gioco: italiano, inglese,
   francese, tedesco, spagnolo, e si richiude in cerchio), quindi il giro si fa senza
   una riga di JavaScript e funziona anche a JavaScript spento.
   ⚠️ Le proporzioni sono MISURATE sulla scena, non stimate: lì la bandiera è 96×64 e
   le frecce 60×61, cioè 1,6 volte più strette e alte quanto la bandiera. Qui 36×24 e
   22×22, lo stesso rapporto rimpicciolito per stare in una riga di menu. */
header nav .lingua { display: inline-flex; align-items: center; gap: 0; }
/* Il bersaglio del dito è più grande dell'immagine, e i margini NEGATIVI lo rimettono
   dov'è: senza, un'area toccabile decente allontanerebbe le frecce dalla bandiera e la
   riga non somiglierebbe più a quella del gioco. Così il riquadro sensibile è 40×42
   (22 px di disegno) e lo stacco visibile resta 4 px, cioè il 10% della bandiera —
   la stessa proporzione dei 10 su 96 misurati in scena. */
header nav .lingua a.freccia {
  display: inline-flex;
  padding: 0.6rem 0.55rem;
  margin: -0.6rem -0.3rem;
}
header nav .lingua img { display: block; }
header nav .lingua .bandiera { border-radius: 3px; }
header nav .lingua a.freccia:hover img { filter: brightness(1.12); }
header nav .lingua a.freccia:focus-visible { outline: 2px solid var(--freddo); outline-offset: 2px; }

h1 { font-size: 2rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; }
p, li { color: var(--testo); }
a { color: var(--freddo); }

.occhiello {
  display: inline-block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--caldo);
  border: 1px solid var(--caldo);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  margin-bottom: 1.25rem;
}

.guida { font-size: 1.15rem; color: var(--testo-2); }

/* Testata del libro: copertina a sinistra, titolo a destra. Su schermo stretto la
   copertina va sopra e si rimpicciolisce — a fianco di un titolo che va a capo tre
   volte non guadagnerebbe niente e ruberebbe metà riga a ogni parola. */
.testata-libro { display: flex; gap: 1.75rem; align-items: flex-start; margin-bottom: 2rem; }
.testata-libro .copertina {
  flex: 0 0 auto;
  width: 13rem;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.testata-libro h1 { margin-bottom: 0.6rem; }
.sottotitolo { font-size: 1.05rem; font-style: italic; color: var(--testo-2); margin: 0; }

@media (max-width: 560px) {
  .testata-libro { flex-direction: column; gap: 1.25rem; align-items: center; }
  .testata-libro .copertina { width: 12rem; }
  .testata-libro > div { align-self: stretch; }
}

.riquadro {
  background: var(--sfondo-2);
  border: 1px solid var(--bordo);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
  margin: 1.75rem 0;
}

.bottone {
  display: inline-block;
  background: var(--caldo);
  color: var(--su-accento);
  text-decoration: none;
  font-weight: 600;
  padding: 0.7rem 1.4rem;
  border-radius: 8px;
  margin: 0.35rem 0.5rem 0.35rem 0;
}
.bottone:hover { filter: brightness(1.08); }
/* Le due metà del progetto pesano uguale: due pulsanti pieni, non uno pieno e uno vuoto.
   I due colori sono quelli della copertina — il caldo dell'uomo, il freddo della macchina. */
.bottone.freddo { background: var(--freddo); }
/* Il vuoto resta, ma per le azioni davvero secondarie (es. "torna indietro" in /amazon). */
.bottone.secondario { background: transparent; color: var(--testo); border: 1px solid var(--bordo); }

/* L'anteprima del gioco. DUE elementi <video>, uno per forma, scambiati qui e non
   nell'HTML: l'attributo `media` su <source> i browser lo onorano solo dentro
   <picture> — dentro <video> non lo rivalutano al ridimensionamento, quindi
   sceglierebbe una volta sola e male. Nell'HTML c'e' invece preload="none":
   finche' nessuno preme play scende solo il poster, non i 12 MB del filmato
   (misurato: 0 byte di MP4 al caricamento della pagina).
   Il prezzo di questo scambio: il browser scarica il poster ANCHE del video
   nascosto, quindi ogni visita paga 111 KB di JPEG invece di 51 o 60. Per
   questo i due poster sono tenuti piccoli (960x540 e 540x960): il risparmio
   vero non e' comprimerli di piu', e' che nessuno dei due e' il filmato. */
.video-promo { margin: 2rem 0; }
.video-promo video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #000;
}
.video-promo .verticale { display: none; }
.video-promo figcaption { color: var(--testo-2); font-size: 0.9rem; margin-top: 0.7rem; }

/* Lo stesso confine di "schermo stretto" del logo e della copertina del libro: la
   pagina ha una sola idea di telefono, non tre. Sotto quella soglia il 16:9 sarebbe
   alto poco piu' di 200 px, e il verticale e' comunque la forma con cui il gioco si
   gioca davvero. Il tetto in rem gli impedisce di diventare una torre sui tablet
   stretti in verticale. */
@media (max-width: 560px) {
  .video-promo .orizzontale { display: none; }
  .video-promo .verticale { display: block; max-width: 22rem; margin: 0 auto; }
}

/* Le schermate del gioco, in carosello di SOLO CSS: una fila che scorre in
   orizzontale con l'aggancio (scroll-snap). Niente JavaScript, come il resto del
   sito — quindi si trascina col dito, si scorre col trackpad, ha una barra vera e
   funziona anche a tastiera. Le immagini sono verticali: a 15rem l'una la colonna
   da 44rem ne mostra due e mezza, e quella mezza e' l'invito a scorrere.
   width e height sono dichiarati nell'HTML per non far ballare la pagina. */
.carosello {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.6rem;
  /* La barra resta VISIBILE — e' l'unico segnale che c'e' altro da vedere — ma
     sottile e nei colori del tema: quella di sistema, bianca su fondo scuro,
     pesava piu' delle immagini. */
  scrollbar-width: thin;
  scrollbar-color: var(--bordo) transparent;
}
.carosello img {
  flex: 0 0 auto;
  width: 15rem;
  height: auto;
  scroll-snap-align: center;
  border: 1px solid var(--bordo);
  border-radius: 8px;
}
.carosello:focus-visible { outline: 2px solid var(--freddo); outline-offset: 4px; }
.suggerimento { color: var(--testo-2); font-size: 0.85rem; margin: 0 0 2rem; }

/* Sul telefono la schermata si prende quasi tutta la larghezza, ma non tutta: il
   bordo della successiva e' cio' che fa capire che ce n'e' un'altra. */
@media (max-width: 560px) {
  .carosello img { width: 62vw; }
}

table { border-collapse: collapse; width: 100%; margin: 1.25rem 0; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--bordo); vertical-align: top; }
th { color: var(--testo-2); font-weight: 600; }

footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bordo);
  color: var(--testo-2);
  font-size: 0.9rem;
}
footer a { color: var(--testo-2); }
footer nav { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }


@media (max-width: 480px) {
  h1 { font-size: 1.6rem; }
  header { padding-bottom: 1.75rem; margin-bottom: 1.75rem; }
}