/* Hallmark · shape: casa del gioco con mascotte · genre: playful · theme: custom · job: join · idea: "Una bacheca di sughero: fogli appuntati, polaroid del gioco e il filo rosso di Filo che collega tutto." · vibe: "sughero, caldo e fatto a mano" · hero: titolo e azione a sinistra, l’oggetto del gioco a destra, la mascotte che parla · nav: timbro del marchio a sinistra e tre voci · footer: nome, una riga e note legali · imagery: le illustrazioni dei giochi e la mascotte disegnata · signature: il filo rosso ondulato sotto i titoli e tra i fogli
 * axes: sughero/Zilla Slab/parete · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · waive 24b · spilli, nastro, cuciture e cornici di sughero · gli oggetti appoggiati a mano stanno apposta fuori dalla griglia dei 4px */
/* Hallmark · waive 49b · titoli lunghi come Mistero del pupazzo di neve in pigiama · sono i titoli dei giochi gratis e delle guide e su telefono vanno a capo interi */
/* Hallmark · waive 77 · Giochi gratis ha un solo gioco e Per organizzare la serata due guide · per ora c’è un solo gioco gratis e la fila cresce con i prossimi gialli da giocare */
/* Hallmark · waive 44c · la prima schermata ospita titolo, oggetto del gioco e mascotte · allungarla lascerebbe sughero vuoto */
/* Hallmark · waive 80 · il filo rosso che lega le schede di Giochi e Blog · è il segno della bacheca, puntine e filo, non un disegno al posto di una foto: le schede hanno le loro immagini */
/* Hallmark · waive 79 · articoli del Blog, Privacy e Cookie · il testo parte subito sotto il menu e le briciole: lo spazio misurato è la colonna di lettura, non un vuoto */
@font-face { font-family: "Zilla Slab"; src: url("/font/zilla-slab-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/font/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/font/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("/font/kalam-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Tutti Complici: struttura comune. Colori, font, forme ed effetti li decide il tema (generatore/temi/). */
:root {
  --sfondo: #F2F2F2;
  --testo: #18181B;
  --testo-2: #4A4A55;
  --superficie: #FFFFFF;
  --bordo: #D5D5DC;
  --c1: #333;
  --c1-testo: #FFF;
  --c2: #666;
  --c2-testo: #FFF;
  --link: #333;
  --raggio: 16px;
  --raggio-piccolo: 10px;
  --ombra: 0 10px 30px -12px rgba(20, 20, 40, 0.25);
  --font-titoli: system-ui, sans-serif;
  --font-testo: system-ui, sans-serif;
  --titoli-peso: 700;
  --titoli-maiuscolo: none;
  --titoli-spazio: 0;
  --titoli-riga: 1.08;
  --pulsante: var(--c1);
  --pulsante-testo: var(--c1-testo);
  --misura: 42rem;
  --scheda-fondo: #E9E9EE;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--sfondo); color: var(--testo);
  font-family: var(--font-testo); font-size: 1.0625rem; line-height: 1.65;
}
::selection { background: var(--c1); color: var(--c1-testo); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { text-decoration-thickness: 0.16em; }
:focus-visible { outline: 3px solid var(--c1); outline-offset: 3px; border-radius: 4px; }
.salta { position: absolute; left: 1rem; top: -4rem; }
.salta:focus { left: 1rem; top: 1rem; background: var(--superficie); padding: 0.5rem 1rem; z-index: 10; }

h1, h2, h3 {
  font-family: var(--font-titoli); font-weight: var(--titoli-peso); line-height: var(--titoli-riga);
  text-transform: var(--titoli-maiuscolo); letter-spacing: var(--titoli-spazio); text-wrap: balance;
}
h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin: 0.4em 0 0.35em; }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 1.8em 0 0.5em; }
h3 { font-size: 1.3rem; margin: 1.4em 0 0.4em; }

/* testata */
.testata {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem 1.5rem; flex-wrap: wrap;
  max-width: 70rem; margin: 0 auto; padding: 1rem 1.25rem;
}
.marchio img { width: 190px; }
.menu { display: flex; gap: 0.4rem; flex-wrap: nowrap; overflow-x: auto; }
.menu a {
  flex: none; white-space: nowrap; padding: 0.45rem 0.95rem; border-radius: 999px; text-decoration: none;
  color: var(--testo); font-weight: 700; font-size: 0.95rem;
}
.menu a:hover, .menu a[aria-current="page"] { background: var(--c1); color: var(--c1-testo); }
main { max-width: 70rem; margin: 0 auto; padding: 0 1.25rem 3.5rem; }

/* home */
.eroe { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2.5rem; align-items: center; padding: 2.5rem 0 1.5rem; }
.eroe-testo { position: relative; z-index: 1; }
.eroe h1 { font-size: clamp(2.6rem, 8vw, 4.6rem); margin: 0.25em 0 0.3em; }
.timbro {
  display: inline-block; margin: 0; padding: 0.2rem 0.8rem; transform: rotate(-3deg);
  border: 2.5px solid var(--c1); outline: 1px solid var(--c1); outline-offset: 3px; border-radius: 6px;
  color: var(--link); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em;
}
.intro { font-size: 1.15rem; max-width: 38rem; color: var(--testo-2); }
.pulsanti { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.pulsante {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0.6rem 1.4rem; border-radius: 999px;
  background: var(--pulsante); color: var(--pulsante-testo); text-decoration: none; font-weight: 700;
  box-shadow: var(--ombra);
}
.pulsante.secondario { background: var(--superficie); color: var(--testo); box-shadow: inset 0 0 0 2px var(--testo); }
.eroe-visivo { position: relative; }
.eroe-visivo figure { margin: 0; }
.eroe-visivo img { border-radius: var(--raggio); box-shadow: var(--ombra); }
.adesivi { position: absolute; inset: 0; pointer-events: none; }
.adesivi svg { position: absolute; width: 34px; height: 34px; fill: var(--c1); }
.adesivi svg:nth-child(1) { top: -6px; right: -8px; width: 46px; height: 46px; }
.adesivi svg:nth-child(2) { bottom: 14%; left: -18px; width: 26px; height: 26px; fill: var(--c2); }
.adesivi svg:nth-child(3) { top: 38%; right: -22px; width: 20px; height: 20px; }
.bollino {
  position: absolute; top: -14px; left: -14px; padding: 0.35rem 0.8rem; border-radius: 999px; transform: rotate(-8deg);
  background: var(--c2); color: var(--c2-testo); font-weight: 800; font-size: 0.95rem; box-shadow: var(--ombra);
}
.passi { padding-left: 1.4rem; max-width: var(--misura); }
.passi li { margin: 0.6rem 0; }

/* schede: una riga sola che scorre in orizzontale, su telefono e su computer */
.fascia h2 { margin-top: 2.2em; }
.schede {
  display: flex; flex-wrap: nowrap; gap: 1.25rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--c1) transparent;
  padding: 0.4rem 0.6rem 1.4rem 0.2rem; margin-right: -1.25rem;
}
.scheda {
  position: relative; flex: 0 0 auto; width: min(80vw, 20rem); scroll-snap-align: start; overflow: hidden;
  display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio); box-shadow: var(--ombra);
}
.scheda-foto { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.scheda-foto.verticale { object-fit: contain; padding: 12px 0; background: var(--scheda-fondo); }
.scheda-testo { padding: 1rem 1.15rem 1rem; display: flex; flex-direction: column; flex: 1; }
.scheda h3 { margin: 0.35rem 0 0.5rem; font-size: 1.2rem; }
.scheda h3 a { color: var(--testo); text-decoration: none; }
.scheda h3 a::after { content: ""; position: absolute; inset: 0; }
.scheda p { margin: 0 0 0.8rem; font-size: 0.95rem; color: var(--testo-2); }
.scheda .leggi { margin-top: auto; font-weight: 700; text-decoration: none; }
.etichetta {
  align-self: flex-start; margin: 0 !important; padding: 0.15rem 0.6rem; border-radius: 999px;
  background: var(--c1); color: var(--c1-testo) !important; font-size: 0.8rem !important; font-weight: 700; line-height: 1.5;
}
.vuoto { border: 2px dashed var(--bordo); border-radius: var(--raggio); padding: 1rem 1.2rem; color: var(--testo-2); max-width: var(--misura); }

/* pagine */
.pagina, .elenco { max-width: var(--misura); margin: 0 auto; }
.elenco { max-width: 70rem; }
.briciole { font-size: 0.9rem; color: var(--testo-2); margin-top: 1.5rem; }
.briciole a { color: var(--testo-2); }
.firma { color: var(--testo-2); font-size: 0.95rem; margin-top: -0.2rem; }
.pagina ul, .pagina ol { padding-left: 1.3rem; }
.pagina li { margin: 0.3rem 0; }
blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); }
blockquote p { margin: 0.2rem 0; }
figure { margin: 2rem 0; }
figure img { border-radius: var(--raggio-piccolo); margin: 0 auto; max-height: 85vh; width: auto; box-shadow: var(--ombra); }
figcaption { font-size: 0.85rem; color: var(--testo-2); margin-top: 0.7rem; line-height: 1.5; }
.tabella { overflow-x: auto; margin: 1.5rem 0; border-radius: var(--raggio-piccolo); border: 1px solid var(--bordo); }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; background: var(--superficie); }
th, td { border-bottom: 1px solid var(--bordo); padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; }
th { background: var(--c1); color: var(--c1-testo); }
hr { border: 0; border-top: 2px solid var(--bordo); margin: 2rem 0; }

/* iscrizione (Brevo) */
.iscrizione { max-width: var(--misura); margin: 2.5rem 0; padding: 1.4rem 1.5rem; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); }
.pagina .iscrizione { margin: 2.5rem auto; }
.iscrizione-titolo { font-family: var(--font-titoli); font-weight: var(--titoli-peso); text-transform: var(--titoli-maiuscolo); letter-spacing: var(--titoli-spazio); font-size: 1.3rem; line-height: 1.15; margin: 0 0 0.5rem; }
.iscrizione p { margin: 0.3rem 0; color: var(--testo-2); }
.iscrizione form { display: grid; gap: 0.7rem; }
.iscrizione input[type="email"] { width: 100%; min-height: 48px; padding: 0.6rem 0.8rem; font: inherit; border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo); }
.iscrizione button { justify-self: start; min-height: 48px; padding: 0.5rem 1.4rem; border: 0; border-radius: 999px; background: var(--pulsante); color: var(--pulsante-testo); font: inherit; font-weight: 700; cursor: pointer; }
.consenso { font-size: 0.85rem; }

/* piede */
.piede { margin-top: 2rem; padding: 2.2rem 1.25rem; text-align: center; font-size: 0.95rem; background: var(--testo); color: var(--sfondo); }
.piede p { margin: 0.3rem 0; }
.piede-nome { font-family: var(--font-titoli); font-weight: var(--titoli-peso); text-transform: var(--titoli-maiuscolo); letter-spacing: var(--titoli-spazio); font-size: 1.3rem; }
.piede-nome span { font-family: var(--font-testo); font-size: 0.95rem; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.85; }
.piede nav { display: flex; justify-content: center; gap: 1.5rem; margin: 0.8rem 0; }
.piede nav a { color: var(--sfondo); font-weight: 700; }
.piede-copy { opacity: 0.8; }

@media (max-width: 48rem) {
  .eroe { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 1.5rem; }
  .eroe-visivo { max-width: 22rem; }
}
@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .testata { padding: 0.8rem 1rem; }
  .marchio img { width: 150px; }
  .menu { width: 100%; margin-right: -1rem; }
  main { padding: 0 1rem 2.5rem; }
  .schede { margin-right: -1rem; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* pagina di vendita: bottone Payhip non ancora attivo */
.pulsante.spento { opacity: 0.6; cursor: not-allowed; }
.acquista { margin: 1.5rem 0; }

/* Famiglia complici: impaginazione comune delle proposte con la mascotte. Materiali, colori e segni li mette il tema. */
:root { --font-mano: var(--font-testo); --fumetto-fondo: var(--superficie); --fumetto-testo: var(--testo); --fumetto-bordo: var(--testo); --mascotte-eroe: 150px; }
.eroe { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: "testo visivo" "mascotte visivo"; row-gap: 1.2rem; align-items: start; }
.eroe-testo { grid-area: testo; }
.eroe-visivo { grid-area: visivo; align-self: center; }
.eroe h1 { font-size: clamp(2.3rem, 6.4vw, 4rem); max-width: 14ch; }
.intro { max-width: 34rem; }

/* il primo gioco come oggetto: foglio, polaroid, busta... lo decide il tema */
.eroe-link { display: block; text-decoration: none; color: inherit; }
.oggetto { margin: 0; }
.oggetto img { box-shadow: none; border-radius: 0; }
.oggetto figcaption { margin-top: 0.6rem; font-family: var(--font-mano); font-size: 1.15rem; line-height: 1.3; color: var(--testo); }

/* mascotte che parla in prima persona */
.mascotte { grid-area: mascotte; display: flex; align-items: flex-end; gap: 0.6rem; margin: 0; }
.mascotte img { width: var(--mascotte-eroe); flex: none; }
.fumetto {
  position: relative; max-width: 19rem; margin-bottom: 2.2rem; padding: 0.7rem 1rem; border: 2px solid var(--fumetto-bordo); border-radius: 18px;
  background: var(--fumetto-fondo); color: var(--fumetto-testo); font-family: var(--font-mano); font-size: 1.12rem; line-height: 1.35;
}
.fumetto::before {
  content: ""; position: absolute; left: -11px; bottom: 14px; width: 18px; height: 18px; background: var(--fumetto-fondo);
  border-left: 2px solid var(--fumetto-bordo); border-bottom: 2px solid var(--fumetto-bordo); transform: rotate(45deg) skew(10deg, 10deg);
}

/* collana: tutte le copertine dei giochi con la stessa gabbia */
.copertina { position: relative; }
.collana {
  position: absolute; left: 0; top: 0; z-index: 1; padding: 0.2rem 0.7rem; background: var(--c1); color: var(--c1-testo);
  font-size: 0.82rem; font-weight: 700; line-height: 1.5;
}
.mascotte-mini { position: absolute; z-index: 2; width: 64px; right: 10px; top: calc(min(80vw, 20rem) * 5 / 8 - 44px); pointer-events: none; }
.scheda-testo h3 { margin-top: 0.1rem; }
.scheda-articolo .scheda-foto { aspect-ratio: 3 / 2; }

/* cosa c'è nel PDF: un foglio vero */
.foglio { max-width: 40rem; margin-top: 2.4rem; padding: 1.6rem 1.8rem; background: var(--superficie); color: var(--testo); }
.foglio h2 { margin: 0 0 0.7rem; }
.foglio p { margin: 0.55rem 0; }

/* club degli iscritti con la mascotte */
.iscrizione { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.4rem; align-items: center; }
.iscrizione > * { grid-column: 2; }
.mascotte-club { grid-column: 1; grid-row: 1 / span 4; width: 130px; }
.mascotte-dice { margin: 0 0 0.4rem; font-family: var(--font-mano); font-size: 1.15rem; line-height: 1.35; }

/* pagina che non c'è */
.perso { text-align: center; }
.perso .mascotte { flex-direction: column; align-items: center; margin: 1rem auto 0; }
.perso .mascotte img { width: 200px; }
.perso .fumetto { margin: 0; }
.perso .fumetto::before { left: 50%; top: -11px; bottom: auto; margin-left: -9px; transform: rotate(135deg) skew(10deg, 10deg); }
.perso .pulsanti { justify-content: center; }

@media (max-width: 48rem) {
  .eroe { grid-template-columns: 1fr; grid-template-areas: "testo" "visivo" "mascotte"; }
  .eroe-visivo { max-width: 24rem; }
  .mascotte img { width: 110px; }
  .fumetto { margin-bottom: 1.4rem; font-size: 1.05rem; }
  .iscrizione { grid-template-columns: minmax(0, 1fr); }
  .iscrizione > *, .mascotte-club { grid-column: 1; grid-row: auto; }
  .mascotte-club { width: 100px; }
}
/* le regole delle figure degli articoli non valgono per mascotte e oggetti */
.mascotte img, .oggetto img, .perso .mascotte img { margin: 0; max-height: none; box-shadow: none; border-radius: 0; }
.mascotte figcaption, .oggetto figcaption { line-height: 1.35; }
/* su telefono una colonna sola, qualunque impianto abbia scelto il tema */
@media (max-width: 48rem) { html .eroe { grid-template-columns: minmax(0, 1fr); } }
html, body { overflow-x: clip; }
/* stati, fuoco e ritmo (controlli di Hallmark) */
:root { --fuoco: var(--testo); --fuoco-alone: var(--superficie); --fuoco-piede: var(--superficie); }
:focus-visible { outline: 3px solid var(--fuoco); outline-offset: 2px; box-shadow: 0 0 0 6px var(--fuoco-alone); border-radius: 2px; }
.piede :focus-visible { outline-color: var(--fuoco-piede); box-shadow: none; }
.pulsante:active, .menu a:active { transform: translateY(1px); }
.scheda h3 a:active, .leggi:active, a:active { opacity: 0.8; }
.fascia { margin-top: 7.5rem; }
/* le guide mostrano solo titolo e invito: la descrizione resta nella pagina della guida */
.scheda-articolo .scheda-testo > p { display: none; }
.fascia h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.foglio h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.iscrizione { margin-top: 7.5rem; }

/* F1. La bacheca di Filo: Una bacheca di sughero: fogli appuntati, polaroid del gioco e il filo rosso di Filo che collega tutto. */
:root {
  --sfondo: #EAD8BA;
  --testo: #1F1A17;
  --testo-2: #4D4038;
  --superficie: #FFFDF7;
  --bordo: #D8C4A2;
  --c1: #C8102E;
  --c1-testo: #FFFCF6;
  --c2: #2B4C7E;
  --c2-testo: #FFFCF6;
  --link: #A30D26;
  --pulsante: #C8102E;
  --pulsante-testo: #FFFCF6;
  --scheda-fondo: #F3E9D6;
  --raggio: 3px;
  --ombra: 0 12px 18px -12px rgba(60,35,15,.55);
  --font-titoli: "Zilla Slab", Georgia, serif;
  --font-testo: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-mano: "Kalam", cursive;
  --titoli-peso: 700;
  --titoli-riga: 1.05;
  --mascotte-eroe: 150px;
  --misura: 38rem;
  --k-1: rgba(120,80,40,.18);
  --k-2: rgba(120,80,40,.12);
  --k-3: rgba(0,0,0,.6);
  --k-4: #FFFCF6;
  --k-5: #C89B68;
  --k-6: rgba(70,40,15,.28);
  --k-7: rgba(255,240,210,.25);
  --k-8: #7B4F2C;
  --k-9: #5A3A22;
  --k-10: rgba(0,0,0,.7);
  --k-11: #F0656F;
  --k-12: #C8102E;
  --k-13: #7E0A1D;
  --k-14: rgba(0,0,0,.35);
  --k-15: rgba(43,76,126,.18);
  --k-16: rgba(40,25,15,.6);
  --k-17: #F6EAD6;
  --k-18: #FFD9C2;
  --k-19: #A30D26;
  --k-20: #F6EAD6;
  --k-21: rgba(60,35,15,.22);
  --k-22: rgba(60,35,15,.30);
  --k-23: #E3D2B4;
}
body { background-image: radial-gradient(var(--k-1) 1px, transparent 1.4px), radial-gradient(var(--k-2) 1px, transparent 1.4px); background-size: 13px 13px, 23px 23px; background-position: 0 0, 6px 9px; }
.marchio img { transform: rotate(-2deg); }
.menu a { min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--superficie); box-shadow: 0 2px 6px var(--k-21); }
.menu a:hover, .menu a[aria-current="page"] { background: var(--c1); color: var(--k-4); }
.eroe { margin-top: 0.5rem; padding: 2.2rem 2rem 1.6rem; background-color: var(--k-5); background-image: radial-gradient(var(--k-6) 1.1px, transparent 1.6px), radial-gradient(var(--k-7) 1px, transparent 1.5px); background-size: 9px 9px, 15px 15px; border: 12px solid var(--k-8); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--k-9), 0 20px 30px -22px var(--k-10); }
.eroe-visivo { align-self: end; }
.eroe::after { content: ""; position: absolute; left: 34%; right: 18%; top: 0.9rem; height: 70px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%2090%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M6%2070%20C%2080%2010%2C%20150%2095%2C%20230%2040%20S%20340%2020%2C%20394%2030%27%20fill%3D%27none%27%20stroke%3D%27%23C8102E%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat; pointer-events: none; }
.eroe-testo { padding: 1.4rem 1.6rem 1.6rem; background: var(--superficie); transform: rotate(-1deg); box-shadow: var(--ombra); }
.eroe-testo::before, .oggetto::before, .scheda::before, .foglio::before { content: ""; position: absolute; z-index: 3; left: 50%; top: -9px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--k-11), var(--k-12) 55%, var(--k-13)); box-shadow: 0 3px 3px var(--k-14); }
.eroe h1 { margin-top: 0.1em; }
.oggetto { position: relative; padding: 12px 12px 10px; background: var(--k-4); transform: rotate(2.5deg); box-shadow: var(--ombra); }
.oggetto figcaption { text-align: center; }
.fumetto { border-radius: 4px; border: 0; box-shadow: var(--ombra); transform: rotate(-1.5deg); }
.fumetto::before { border: 0; }
h2 { padding-bottom: 0.45rem; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%2014%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M2%209%20C%2022%202%2C%2038%2013%2C%2058%207%20S%2096%203%2C%20118%208%20S%20160%2012%2C%20198%205%27%20fill%3D%27none%27%20stroke%3D%27%23C8102E%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") left bottom / 9em 12px no-repeat; }
.scheda { border: 0; border-radius: 16px; overflow: visible; margin-top: 10px; }
.scheda-foto { border-radius: 16px 16px 0 0; }
.scheda:nth-child(2n) { transform: rotate(1deg); }
.scheda:nth-child(2n+1) { transform: rotate(-0.8deg); }
.collana { background: var(--c1); }
.mascotte-mini { width: 58px; }
.foglio { position: relative; transform: rotate(0.6deg); box-shadow: var(--ombra); background-image: repeating-linear-gradient(transparent 0 calc(1.65em - 1px), var(--k-15) calc(1.65em - 1px) 1.65em); background-position: 0 3.2rem; }
.foglio h2 { background-size: 7em 12px; }
.iscrizione { background: var(--superficie); border: 0; border-radius: 6px; box-shadow: var(--ombra); }
.iscrizione input[type="email"] { border-radius: 12px; }
.iscrizione button { box-shadow: 0 3px 8px var(--k-22); }
/* bottoni morbidi: pillola, ombra corta e sfumata, niente bordi duri */
.pulsante { min-height: 48px; padding: 0.65rem 1.6rem; border-radius: 999px; box-shadow: 0 3px 8px var(--k-22); transition: background-color 0.15s ease-out, transform 0.15s ease-out; }
.pulsante:hover { background: var(--k-19); box-shadow: 0 5px 12px var(--k-22); transform: translateY(-1px); }
.pulsante.secondario { background: var(--superficie); color: var(--testo); box-shadow: inset 0 0 0 1px var(--k-23), 0 3px 8px var(--k-21); }
.pulsante.secondario:hover { background: var(--k-20); }
.menu a { transition: background-color 0.15s ease-out, color 0.15s ease-out; }
:focus-visible { border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .pulsante, .menu a { transition: none; } .pulsante:hover { transform: none; } }
.piede { background: var(--k-9); color: var(--k-17); }
html { background: var(--k-9); }
.piede nav a { color: var(--k-18); }
@media (max-width: 48rem) { .eroe { padding: 1.6rem 1rem 1rem; border-width: 8px; } .eroe::after { display: none; } .fascia, .iscrizione { margin-top: 2.75rem; } .fascia > h2:first-child { margin-top: 0; } }
/* filo rosso da puntina a puntina (generatore/filo.js): si disegna mentre si scorre */
.schede { position: relative; padding-top: 14px; }
.filo-rosso { position: absolute; left: 0; top: 0; z-index: 4; overflow: visible; pointer-events: none; }
.filo-rosso path { fill: none; stroke: var(--c1); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease-out; }
.filo-rosso circle { fill: var(--k-12); stroke: var(--k-13); stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) { .filo-rosso path { transition: none; } }
/* scheda in evidenza nella prima schermata, con la nota a penna */
.eroe-visivo .scheda { width: 100%; max-width: 21rem; margin: 10px auto 0; }
.eroe-visivo .scheda .mascotte-mini { display: none; }
.penna { margin: 0 0 0.2rem; font-family: var(--font-mano); font-size: 1.5rem; line-height: 1.2; color: var(--c2); transform: rotate(-3deg); transform-origin: left; }
/* schede-bottone delle categorie: tutta la scheda è il link */
.scheda-categoria { width: min(70vw, 16rem); }
.scheda-tutta { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; border-radius: 16px; }
.scheda-tutta:hover h3 { color: var(--link); }
.scheda-tutta:focus-visible { outline: 3px solid var(--c2); outline-offset: 3px; }
.scheda-categoria h3 { font-size: 1.25rem; }
.scheda-categoria .scheda-testo p { margin: 0; color: var(--testo-2); }
.segnaposto { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--k-23); border-radius: 16px 16px 0 0; }
.segnaposto img { width: 96px; height: auto; }
.in-arrivo { display: inline-block; margin-left: 0.3rem; font-family: var(--font-mano); font-size: 1rem; font-weight: 400; color: var(--link); white-space: nowrap; }
.titolo-tutti { margin-top: 3rem; }
.eroe-visivo .scheda .scheda-testo > p { display: none; }
.penna { display: block; }
/* in home la fila delle categorie porta solo i nomi; in Giochi la fila completa porta solo i titoli dei giochi */
.fascia-giochi .scheda-categoria .scheda-testo p, .fascia-tutti .scheda-testo > p { display: none; }
/* modulo della newsletter: un foglio appuntato alla bacheca, con Filo legato alla puntina */
.modulo-email { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: start; column-gap: 0.5rem; margin-top: 9rem; }
.mascotte-modulo { width: 150px; height: auto; margin-top: -1.5rem; position: relative; z-index: 1; }
.modulo-foglio { position: relative; padding: 2rem 2rem 1.6rem; background: var(--superficie); border-radius: 6px; box-shadow: var(--ombra); }
.modulo-foglio::before { content: ""; position: absolute; z-index: 3; left: 2.6rem; top: -9px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--k-11), var(--k-12) 55%, var(--k-13)); box-shadow: 0 3px 3px var(--k-14); }
.modulo-foglio h2 { margin: 0 0 0.6rem; font-size: clamp(2rem, 3.6vw, 3.25rem); }
.modulo-testo { max-width: 36rem; margin: 0 0 1.2rem; }
.modulo fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.scelte legend { padding: 0; margin-bottom: 0.5rem; font-weight: 700; }
.facoltativo { font-weight: 400; color: var(--testo-2); }
.scelte .riga { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.scelta { position: relative; display: inline-flex; }
.scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scelta span { display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 1.1rem; border-radius: 999px; background: var(--k-17); box-shadow: inset 0 0 0 1px var(--k-23); cursor: pointer; transition: background-color 0.15s ease-out, color 0.15s ease-out; }
.scelta span:hover { background: var(--k-20); }
.scelta input:checked + span { background: var(--c1); color: var(--c1-testo); box-shadow: none; }
.scelta input:checked + span::before { content: "✓"; margin-right: 0.4rem; }
.scelta input:focus-visible + span { outline: 3px solid var(--c2); outline-offset: 2px; }
.riga-email { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.riga-email input { flex: 1; min-width: 0; height: 48px; min-height: 0; box-sizing: border-box; padding: 0.5rem 1.1rem; border: 1px solid var(--k-8); border-radius: 999px; background: var(--k-4); color: var(--testo); font: inherit; }
.riga-email button { flex: none; height: 48px; min-height: 0; box-sizing: border-box; padding: 0.6rem 1.5rem; border: 0; border-radius: 999px; background: var(--pulsante); color: var(--pulsante-testo); font: inherit; font-weight: 700; box-shadow: 0 3px 8px var(--k-22); cursor: pointer; transition: background-color 0.15s ease-out, transform 0.15s ease-out; }
.riga-email button:hover { background: var(--k-19); transform: translateY(-1px); }
.consenso { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 1rem; font-size: 0.95rem; color: var(--testo-2); }
.consenso input { width: 22px; height: 22px; margin-top: 0.1rem; flex: none; accent-color: var(--c1); }
.solo-lettori, .esca { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.esito { margin: 0.8rem 0 0; font-weight: 700; }
.esito:empty { display: none; }
.spento .tutto { opacity: 0.7; }
.con-filo .modulo-foglio::before { display: none; }
.spento .scelta span, .spento button { cursor: not-allowed; }
.presto { margin: 1rem 0 0; font-family: var(--font-mano); font-size: 1.25rem; color: var(--c2); }
@media (prefers-reduced-motion: reduce) { .scelta span, .riga-email button { transition: none; } .riga-email button:hover { transform: none; } }
@media (max-width: 48rem) {
  .modulo-email { grid-template-columns: minmax(0, 1fr); margin-top: 2.75rem; }
  .mascotte-modulo { width: 96px; margin: 0 0 -1.2rem 0.4rem; }
  .modulo-foglio { padding: 2.4rem 1.1rem 1.3rem; }
  .scelte .riga { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; margin-right: -1.1rem; padding: 2px 1.1rem 6px 2px; }
  .scelta { flex: none; white-space: nowrap; }
}
/* illustrazioni delle categorie (Grafico, 4:3) */
.scheda-categoria .scheda-foto { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px 16px 0 0; }
.figura-categoria { margin: 1.6rem 0 0; max-width: 34rem; }
.figura-categoria img { width: 100%; height: auto; border-radius: 24px; box-shadow: 0 6px 14px var(--k-21); }
.scelte + .scelte { margin-top: 1.1rem; }
/* banner del consenso alle statistiche: un foglietto appuntato in basso; «Rifiuta» e «Accetto» identici per misura */
.consenso-cookie { position: fixed; z-index: 50; left: 1rem; right: 1rem; bottom: 1rem; max-width: 34rem; margin: 0 auto; padding: 1.2rem 1.3rem 1.1rem; background: var(--superficie); color: var(--testo); border-radius: 6px; box-shadow: 0 10px 28px var(--k-22); }
.consenso-cookie[hidden] { display: none; }
.cc-titolo { margin: 0 0 0.3rem; font-family: var(--font-titoli); font-weight: 700; font-size: 1.2rem; }
.cc-testo { margin: 0; font-size: 0.95rem; }
.cc-bottoni { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.9rem; }
.cc-bottone { min-height: 48px; padding: 0.5rem 1rem; border: 2px solid var(--testo); border-radius: 999px; background: var(--superficie); color: var(--testo); font: inherit; font-weight: 700; cursor: pointer; }
.cc-bottone:hover { background: var(--k-20); }
.cc-bottone:focus-visible { outline: 3px solid var(--c2); outline-offset: 2px; }
.consenso-cookie:focus { outline: 3px solid var(--c2); outline-offset: 2px; }