/* Cat Rooftop Rush: stile del sito. Colori e pulsanti presi dal menu del gioco. */

:root {
  color-scheme: dark;
  --notte: #061029;
  --notte-chiara: #0b1d45;
  --pannello: linear-gradient(150deg, #122856f2, #0a1735f2 68%, #101b3bf2);
  --bordo: #afd2ff33;
  --inchiostro: #e8f4ff;
  --tenue: #b9cce6;
  --oro: #ffd15d;
  --ciano: #8bdaff;
  --font: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --larghezza: 1120px;
}

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

html { scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }

/* La pagina è alta almeno quanto lo schermo: se il contenuto è più corto (schermi alti, 4K in verticale), il piede
   resta sul fondo e cresce il contenuto */
body {
  margin: 0;
  min-height: 100svh; display: flex; flex-direction: column;
  background: var(--notte);
  color: var(--inchiostro);
  font: 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }

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

a { color: var(--ciano); text-underline-offset: 3px; }

h1, h2, h3 { line-height: 1.1; font-weight: 900; text-wrap: balance; }

p, li { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--ciano); outline-offset: 3px; border-radius: 4px; }

.contenitore { width: min(var(--larghezza), 100% - 2rem); margin-inline: auto; }

.salta {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--oro); color: #33200f; font-weight: 800; padding: .6rem 1rem; border-radius: .6rem;
}
.salta:focus { top: 1rem; }

/* Pulsanti, come quelli del gioco */

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  background: linear-gradient(180deg, #ffe184, #ffbd4e 61%, #eb9831);
  color: #33200f; font-weight: 900; font-size: 1.15rem; letter-spacing: .03em; text-decoration: none;
  border: 1px solid #ffeaa1; border-bottom: 4px solid #aa6122; border-radius: .8em;
  padding: .75em 1.6em; box-shadow: 0 9px 28px #ffbd3733;
  transition: filter .15s, transform .15s;
}
.bottone:hover { filter: brightness(1.06); transform: translateY(-1px); }
.bottone:active { transform: translateY(2px); }
.bottone-piccolo { font-size: .9rem; padding: .45em 1.1em; border-bottom-width: 3px; box-shadow: none; }
/* «In arrivo» nella testata: ha l'aspetto del pulsante ma non è un link, quindi non reagisce al puntatore */
.bottone-presto, .bottone-presto:hover, .bottone-presto:active { cursor: default; filter: none; transform: none; }

.secondario { color: #a9cff9; font-weight: 700; }

/* Barra in alto */

.barra {
  position: sticky; top: 0; z-index: 20;
  background: #061029d9; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #afd2ff1f;
}
.barra-dentro {
  width: min(1200px, 100% - 2rem); margin-inline: auto; height: 4rem;
  display: flex; align-items: center; gap: 1.25rem;
}
.marchio img { height: 2.6rem; width: auto; }
.nav { display: flex; gap: 1.6rem; margin-left: auto; }
.nav a { color: var(--inchiostro); text-decoration: none; font-weight: 700; font-size: .95rem; }
.nav a:hover, .nav a[aria-current] { color: var(--oro); }
.lingua {
  color: var(--tenue); text-decoration: none; font-weight: 800; font-size: .8rem; letter-spacing: .08em;
  border: 1px solid var(--bordo); border-radius: .6rem; padding: .3rem .55rem;
}
.lingua:hover { color: var(--inchiostro); border-color: #afd2ff66; }

@media (max-width: 1060px) {
  .nav { gap: 1.1rem; }
  .nav-dove { display: none; }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .lingua { margin-left: auto; }
}

/* Testata: cielo, tre file di tetti e il gatto */

.testata {
  --h: clamp(260px, 44svh, 520px); /* altezza a cui si disegnano gli strati della città */
  position: relative; isolation: isolate; overflow: clip;
  min-height: min(calc(100svh - 4rem), 900px);
  padding: clamp(2rem, 7svh, 4.5rem) 1rem calc(var(--h) * .42);
  display: grid; justify-items: center; align-content: start;
  text-align: center;
  view-timeline: --testata;
}
.strati { position: absolute; inset: 0; z-index: -1; }
.strato { position: absolute; inset-inline: 0; bottom: 0; }
.strato-cielo { top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.strato-lontano, .strato-medio, .strato-vicino {
  height: var(--h); background-repeat: repeat-x; background-size: auto var(--h); background-position: 50% 100%;
}
.strato-lontano {
  background-image: url("/img/lontano-1536.webp");
  background-image: image-set(url("/img/lontano-768.webp") 1x, url("/img/lontano-1536.webp") 2x);
}
.strato-medio {
  background-image: url("/img/medio-1536.webp");
  background-image: image-set(url("/img/medio-768.webp") 1x, url("/img/medio-1536.webp") 2x);
  background-position-x: 20%;
}
/* Dei tetti vicini si vede solo la parte alta: comignoli e tegole in primo piano */
.strato-vicino {
  height: calc(var(--h) * .42); background-position: 70% 0;
  background-image: url("/img/vicino-1536.webp");
  background-image: image-set(url("/img/vicino-768.webp") 1x, url("/img/vicino-1536.webp") 2x);
}
.strati::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 30%, #06102966, transparent 70%),
    linear-gradient(180deg, transparent 80%, var(--notte) 100%);
}

.testata-gatto {
  position: absolute; z-index: 1; right: max(4vw, calc(50% - 640px)); top: 26%;
  width: clamp(120px, 16vw, 240px); filter: drop-shadow(0 12px 18px #0009);
}

.testata-contenuto { position: relative; z-index: 2; max-width: 44rem; }
.sopratitolo {
  margin: 0; color: var(--ciano); text-transform: uppercase; font-weight: 900; letter-spacing: .22em; font-size: .8rem;
}
.testata h1 { margin: .6rem 0 1rem; }
.testata h1 img { width: min(560px, 86vw); margin-inline: auto; filter: drop-shadow(0 10px 24px #000a); }
.attacco {
  margin: 0 auto 1.6rem; max-width: 36rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: #dfeeff;
  text-shadow: 0 2px 12px #000c;
}
.azioni { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; justify-content: center; margin: 0; }
.nota { margin: 1rem 0 0; font-size: .9rem; color: var(--tenue); text-shadow: 0 2px 10px #000; }
.nota a { color: var(--inchiostro); }

/* Pagina "in arrivo": un timbro dorato sotto il logo, che non sembri un pulsante */
.presto {
  width: fit-content; margin: 0 auto 1.4rem; padding: .3em 1em;
  color: var(--oro); background: #061029b3; border: 2px solid currentColor; border-radius: .5em;
  font-weight: 900; font-size: clamp(1.1rem, 2.6vw, 1.5rem); letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(-3deg); box-shadow: 0 8px 24px #0008;
}
.marchio + .lingua { margin-left: auto; }

/* Pagina "in arrivo": il gatto seduto accanto al logo (sotto, se non c'è spazio) e il gladiatore col panino in basso
   al centro, sotto l'email. Stanno nel flusso, così il testo non ci finisce mai sopra: la testata cresce se serve. */
.testata.testata-presto { grid-template-rows: auto 1fr; align-content: stretch; padding-bottom: calc(var(--h) * .05); }
/* È tutta la pagina: sugli schermi alti si allunga il cielo fino al piede */
main:has(> .testata-presto) { display: flex; flex-direction: column; }
.testata.testata-presto { flex: 1 0 auto; }
/* Senza parallasse sul contenuto: scorrendo scivolerebbe sul gladiatore */
.testata-presto .testata-contenuto { animation: none; }
.logo-presto { position: relative; width: fit-content; margin-inline: auto; }

/* Gatto e gladiatore sono pulsanti. Sul telefono il tocco non li evidenzia, non li seleziona e tenendo premuto non apre
   il menu (vedi anche gli script); le immagini dentro non si trascinano. */
.gatto-seduto, .gladiatore {
  padding: 0; border: 0; border-radius: 1rem; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}

.gatto-seduto { display: block; position: relative; width: 112px; aspect-ratio: 380 / 401; margin: -.5rem auto .9rem; }
.gatto-seduto img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (min-width: 900px) {
  .gatto-seduto { position: absolute; left: calc(100% - .4rem); bottom: .2rem; width: clamp(130px, 11vw, 170px); margin: 0; }
}
/* Perni stampati da tools/immagini.py: l'attacco della coda e il collo */
.gatto-coda { transform-origin: 26.9% 90.2%; }
.gatto-testa { transform-origin: 61.4% 47.9%; }
/* La nuvoletta in alto a destra della testa quando miagola o fa le fusa (data-voce, dallo script): sopra coprirebbe il
   logo, sul telefono */
.gatto-nuvola {
  position: absolute; z-index: 3; left: 86%; bottom: 76%; opacity: 0; pointer-events: none;
  padding: .15em .65em; border-radius: 1em; background: #fff4d6; color: #5a3212; box-shadow: 0 6px 16px #0008;
  font-weight: 900; font-size: .95rem; white-space: nowrap;
}
.gatto-seduto[data-voce] .gatto-nuvola { animation: nuvola 1.3s ease-out forwards; }
@keyframes nuvola { 12%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* La striscia ha sei fotogrammi, a passi del 20%: giù (morso), mastica, mastica col mento giù, sussulto, fuga 0 e 1 */
.gladiatore {
  position: relative; z-index: 1; align-self: end; margin-top: 1.2rem;
  height: clamp(112px, 11vw, 160px); aspect-ratio: 300 / 340;
  transition: opacity .9s;
}
.gladiatore-figura {
  display: block; width: 100%; height: 100%;
  background: url("/img/presto/gladiatore.webp") 0 0 / 600% 100% no-repeat;
  filter: drop-shadow(0 10px 14px #0008);
}
.gladiatore[data-stato] { pointer-events: none; }
/* Il sussulto nel gioco guarda a destra: specchiato, è già girato verso la fuga */
.gladiatore[data-stato="sussulta"] .gladiatore-figura { background-position-x: 60%; translate: 0 -12px; scale: -1 1; }
.gladiatore[data-stato="svanisce"] { opacity: 0; transition-duration: .5s; }
.gladiatore[data-stato="via"] { opacity: 0; transition: none; }

/* Telefono: la testata è alta quanto il contenuto più una fascia di tetti, così sotto si vede già l'inizio della storia.
   Il gatto sta nel flusso, centrato sotto la nota, come il gatto seduto della pagina "in arrivo"; il contenuto non ha la
   parallasse, che scorrendo lo farebbe scivolare sopra il gatto. */
@media (max-width: 700px) {
  .testata { --h: clamp(220px, 34svh, 300px); min-height: 0; padding-top: clamp(1.6rem, 5svh, 2.6rem); padding-bottom: calc(var(--h) * .3); }
  .strato-cielo { object-position: 16% 20%; } /* sul telefono si tiene la luna */
  .testata h1 { margin: .4rem 0 .8rem; }
  .attacco { margin-bottom: 1.3rem; font-size: 1.02rem; }
  .testata .azioni { gap: .9rem 1.2rem; }
  .testata .testata-contenuto { order: 1; animation: none; }
  .testata .testata-gatto { position: relative; order: 2; top: auto; right: auto; width: 132px; margin: 1.6rem auto 0; animation-name: vola-centro; }
}
/* Il volo del gatto al centro: oscilla attorno alla sua posizione, senza spostarsi di lato (solo con la durata data
   dal blocco del movimento, quindi fermo per chi ha chiesto meno animazioni) */
@keyframes vola-centro {
  from { transform: translate(6px, 0) rotate(-3deg); }
  to { transform: translate(-6px, -12px) rotate(2deg); }
}

/* Sezioni */

.sezione { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.sezione h2 { margin: 0 0 .7rem; font-size: clamp(1.9rem, 4.5vw, 3rem); letter-spacing: -.01em; }
.intro { margin: 0 0 2.2rem; max-width: 40rem; font-size: 1.15rem; color: var(--tenue); }

.schede {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.scheda {
  background: var(--pannello); border: 1px solid var(--bordo); border-radius: 1.2rem; padding: 1.4rem 1.4rem 1.5rem;
  box-shadow: 0 18px 50px #0006;
}
.scheda-icona { height: 48px; width: auto; margin-bottom: .9rem; filter: drop-shadow(0 3px 4px #0007); }
.scheda h3 { margin: 0 0 .45rem; font-size: 1.2rem; color: #fff; }
.scheda p { margin: 0; color: var(--tenue); }
.scheda ol { margin: 0; padding-left: 1.2rem; color: var(--tenue); }

/* Gatti del negozio (nove): tutti in fila sui computer larghi, cinque più quattro altrove. I seduti sono larghi 188 px:
   fino a 96 px restano nitidi anche a densità 2. */
.gatti {
  --spazio: clamp(.4rem, 2vw, 1.5rem);
  list-style: none; margin: 0 0 2.2rem; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem var(--spazio);
}
/* Colonna fissa: un nome più largo del gatto (Arlecchino sul telefono) non la allarga e non sposta il gatto */
.gatti li {
  width: min(96px, (100% - 4 * var(--spazio)) / 5);
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .4rem; text-align: center;
}
@media (min-width: 1100px) {
  .gatti li { width: 96px; }
}
/* Stesso riquadro per tutti, appoggiati in basso: i seduti ritagliati non sono tutti della stessa misura */
.gatti img { width: 100%; aspect-ratio: 188 / 199; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 8px 10px #0008); }
.gatti span { font-weight: 800; font-size: .95rem; white-space: nowrap; }
.scheda-gatto { height: 72px; }

/* Città del Viaggio: l'illustrazione della scheda del gioco con nome e stato. Le città «In arrivo» sono spente, come
   le sagome grigie della mappa del gioco. */
.citta-elenco {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.citta {
  position: relative; overflow: hidden; border: 1px solid var(--bordo); border-radius: 1.2rem;
  background: var(--pannello); box-shadow: 0 18px 50px #0006;
}
.citta img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; }
.citta-presto img { filter: grayscale(.85) brightness(.55); }
.citta-nome { margin: .8rem 1.1rem .9rem; font-weight: 900; font-size: 1.15rem; color: #fff; }
.citta-stato {
  position: absolute; top: .7rem; left: .7rem; padding: .25rem .7rem; border-radius: 99px;
  font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: #061029; background: var(--oro); box-shadow: 0 4px 14px #0008;
}
.citta-presto .citta-stato { color: var(--inchiostro); background: #0a1735e6; border: 1px solid var(--bordo); }
.scheda ol li + li { margin-top: .35rem; }

.altre-pagine { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; margin: 1.8rem 0 0; }

/* Quartieri: scorrono in orizzontale sul telefono, griglia sul computer */

.sezione-quartieri { background: linear-gradient(180deg, var(--notte), var(--notte-chiara) 50%, var(--notte)); }
.quartieri {
  --margine: max(1rem, (100% - var(--larghezza)) / 2);
  list-style: none; margin: 0; padding: .25rem var(--margine) 1rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 62vw, 250px); gap: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--margine);
  scrollbar-width: thin; scrollbar-color: #afd2ff44 transparent;
}
.quartiere {
  scroll-snap-align: start; position: relative; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: 1.2rem; border: 1px solid var(--bordo);
  background: linear-gradient(180deg, transparent 50%, #0a1735 92%), var(--cielo) 50% 20% / cover;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: 0 18px 50px #0006;
}
.quartiere img {
  position: absolute; left: 50%; bottom: 3rem; translate: -50% 0;
  width: 86%; height: 74%; object-fit: contain; object-position: 50% 100%;
}
.quartiere-nome { position: relative; margin: 0; padding: .9rem 1.1rem 1rem; font-weight: 900; font-size: 1.1rem; line-height: 1.2; }
.quartiere-nome span { display: block; color: var(--oro); font-size: .78rem; letter-spacing: .22em; }

@media (min-width: 1000px) {
  .quartieri {
    width: min(var(--larghezza), 100% - 2rem); margin-inline: auto; padding: 0;
    grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible;
  }
}

/* Schermate */

/* La colonna piccola è larga quanto serve perché la grande, alta due piccole più lo spazio in mezzo, resti 16:9 come gli
   scatti: così cover non taglia l'HUD ai lati. */
.schermate {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: 1fr calc((100% - 1rem - 16rem / 9) / 3);
}
.schermate li:first-child { grid-row: span 2; }
.schermate img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 1rem; border: 1px solid var(--bordo);
  box-shadow: 0 18px 50px #0007;
}
@media (max-width: 700px) {
  .schermate { grid-template-columns: 1fr 1fr; }
  .schermate li:first-child { grid-row: auto; grid-column: span 2; }
}

/* Dove si gioca */

/* Storia in home: un racconto breve in una colonna stretta, con il gatto seduto a destra, che il testo aggira */
.sezione-storia { padding-bottom: 0; }
.storia-gatto { float: right; width: clamp(80px, 12vw, 130px); margin: -.6rem 0 .6rem 1.2rem; filter: drop-shadow(0 10px 16px #0008); }
.sezione-storia p { margin: 0 0 1rem; font-size: 1.12rem; line-height: 1.7; color: var(--tenue); }
.sezione-storia p:first-of-type { font-size: 1.25rem; color: var(--inchiostro); }
.sezione-storia p:last-of-type { margin-bottom: 0; font-style: italic; color: #ffe3a3; }

.sezione-dove .contenitore { position: relative; }
.dove-gatto { position: absolute; right: 0; top: -1.5rem; width: clamp(90px, 13vw, 150px); filter: drop-shadow(0 10px 16px #0008); }
.sezione-dove h2, .sezione-dove .intro { padding-right: clamp(100px, 15vw, 170px); }
.azioni-centro { margin-top: 2.5rem; }

/* Pagine interne */

.contenitore-stretto { width: min(48rem, 100% - 2rem); margin-inline: auto; }

.testata-pagina {
  padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(5rem, 11vw, 7.5rem);
  background-color: var(--notte-chiara);
  background-image:
    linear-gradient(180deg, #06102955 0%, transparent 40%, var(--notte) 100%),
    url("/img/lontano-768.webp"),
    url("/img/cielo-768.webp");
  background-image:
    linear-gradient(180deg, #06102955 0%, transparent 40%, var(--notte) 100%),
    image-set(url("/img/lontano-768.webp") 1x, url("/img/lontano-1536.webp") 2x),
    image-set(url("/img/cielo-768.webp") 1x, url("/img/cielo-1536.webp") 2x);
  background-repeat: no-repeat, repeat-x, no-repeat;
  background-size: auto, auto 340px, cover;
  background-position: 0 0, 30% 100%, 70% 25%;
}
.testata-pagina h1 { margin: 0 0 .6rem; font-size: clamp(2.2rem, 6vw, 3.6rem); text-shadow: 0 4px 18px #000a; }
.testata-pagina .intro { margin: 0; color: #dfeeff; text-shadow: 0 2px 10px #000c; }

.testo { padding: .5rem 0 clamp(3.5rem, 8vw, 6rem); }
.testo h2 { margin: 2.4rem 0 .7rem; font-size: 1.45rem; }
.testo p, .testo li { color: var(--tenue); }
.testo ul:not([class]) { padding-left: 1.2rem; }
.testo ul:not([class]) li + li { margin-top: .45rem; }

.dati { margin: 0; border: 1px solid var(--bordo); border-radius: 1rem; overflow: hidden; background: #0a1735b3; }
.dati div { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 1rem; padding: .75rem 1.1rem; }
.dati div + div { border-top: 1px solid #afd2ff1a; }
.dati dt { color: #8ea6c7; font-weight: 700; font-size: .9rem; padding-top: .1rem; }
.dati dd { margin: 0; color: var(--inchiostro); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .dati div { grid-template-columns: 1fr; gap: .15rem; }
}

.riquadro {
  margin-top: 1.5rem; padding: 1.6rem; border: 1px solid var(--bordo); border-radius: 1.2rem;
  background: var(--pannello); box-shadow: 0 18px 50px #0006;
}
.testo .riquadro h2 { margin-top: 0; }
.riquadro p { margin: 0; }
.email { color: var(--oro); font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 900; text-decoration: none; overflow-wrap: anywhere; }
.email:hover { text-decoration: underline; }

.avviso {
  margin: 1.5rem 0 0; padding: .9rem 1.1rem; border: 1px solid #ffbd4e88; border-radius: .9rem;
  background: #ffbd4e1f; color: #ffe3a3; font-weight: 700;
}
.testo .avviso { color: #ffe3a3; }
.segnaposto { font-style: italic; opacity: .7; }

.materiali {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}
.materiale {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--bordo); border-radius: 1rem; background: var(--pannello);
}
.materiale img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; padding: .8rem; background: #081430; }
.testo .materiale p { margin: .8rem 1rem .9rem; color: var(--inchiostro); }
.materiale p span { display: block; color: #8ea6c7; font-size: .85rem; }
.materiale a { margin: auto 1rem 1rem; color: var(--oro); font-weight: 800; }

/* Novità: un giorno per blocco, su una linea del tempo con un pallino d'oro per data */

.novita .giorno { position: relative; margin: 0; padding: 0 0 1.8rem 1.6rem; border-left: 2px solid #afd2ff33; }
.novita .giorno:last-of-type { padding-bottom: .4rem; }
.novita .giorno::before {
  content: ""; position: absolute; left: -.5rem; top: .45rem; width: .85rem; height: .85rem;
  border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 4px #061029, 0 0 14px #ffd15d88;
}
.novita .giorno h2, .novita .giorno h3 { margin: 0; font-size: 1.3rem; line-height: 1.3; }
.novita .giorno-meta { margin: .2rem 0 .6rem; color: #8ea6c7; font-size: .9rem; font-weight: 700; }
.novita .giorno ul { margin: 0; padding-left: 1.1rem; }
.novita .giorno li { color: var(--tenue); }
.novita .giorno li + li { margin-top: .35rem; }
.testo.novita { padding-top: 2.4rem; }
.nota-novita { margin: 1.6rem 0 0; font-size: .9rem; }
#novita h2 { margin-bottom: 1.4rem; }

/* Manuale e libro dei personaggi: pagine larghe, con indice in testa */

.pagina-larga { padding: .5rem 0 clamp(3.5rem, 8vw, 6rem); }
.pagina-larga > .contenitore > section { scroll-margin-top: 5rem; }
.pagina-larga h2 { margin: clamp(2.8rem, 6vw, 4rem) 0 .6rem; font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.pagina-larga h2 + .intro { margin-bottom: 1.6rem; }
.pagina-larga .intro { font-size: 1.05rem; }

.sommario { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.sommario a {
  display: block; padding: .4rem .85rem; border: 1px solid var(--bordo); border-radius: 99px;
  background: #0a1735b3; color: var(--inchiostro); text-decoration: none; font-weight: 700; font-size: .92rem;
}
.sommario a:hover { border-color: var(--oro); color: var(--oro); }
/* Sul telefono l'indice è una riga sola che scorre, e gli ostacoli vanno due per riga */
@media (max-width: 560px) {
  .sommario {
    flex-wrap: nowrap; overflow-x: auto; margin-inline: -1rem; padding: 0 1rem .4rem;
    scrollbar-width: thin; scrollbar-color: #afd2ff44 transparent;
  }
  .sommario a { white-space: nowrap; font-size: .88rem; }
  .oggetti:not(.oggetti-larghi) { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .oggetti:not(.oggetti-larghi) .oggetto-figura { height: 7rem; padding-inline: .6rem; }
  .oggetti:not(.oggetti-larghi) .oggetto-figura img { max-height: 5.6rem; }
  .oggetti:not(.oggetti-larghi) .oggetto-testo { padding: .7rem .8rem .9rem; }
  .oggetti:not(.oggetti-larghi) .oggetto h3 { font-size: .98rem; }
  .oggetti:not(.oggetti-larghi) .oggetto p { font-size: .88rem; }
}

/* Schede degli oggetti del manuale: lo sprite su una striscia di tetto, il nome e due righe */
.oggetti {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.oggetto {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--bordo); border-radius: 1.1rem; background: var(--pannello); box-shadow: 0 14px 36px #0005;
}
/* Lo sprite poggia sul bordo di un tetto, come nel gioco */
.oggetto-figura {
  display: flex; align-items: flex-end; justify-content: center; height: 9rem; padding: .8rem 1rem 0;
  background: linear-gradient(180deg, #0b1d45, #16306a);
  border-bottom: 6px solid #6b3b26; box-shadow: inset 0 -2px 0 #a2603b;
}
.oggetto-figura img { max-height: 7.4rem; max-width: 100%; width: auto; height: auto; filter: drop-shadow(0 6px 6px #0007); }
.oggetto-testo { padding: .8rem 1rem 1rem; }
.oggetto h3 { margin: 0 0 .3rem; font-size: 1.05rem; color: #fff; }
.oggetto p { margin: 0; color: var(--tenue); font-size: .95rem; }
.oggetto .etichetta { margin-bottom: .45rem; }
.oggetti-larghi { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.senza-figura {
  display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: 1.4rem; border-radius: 50%;
  background: #ff8a7a26; border: 2px solid #ff8a7a88; color: #ffb3a8; font-size: 2.2rem; font-weight: 900;
}
.nota-sezione { margin: 1rem 0 0; max-width: 48rem; color: var(--tenue); font-size: .95rem; }
.schede-regole { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
/* Monumenti nelle schede: più alti delle icone, appoggiati in basso come le icone */
.scheda-figura { height: 80px; }
/* Città del Viaggio: l'illustrazione occupa la testa della scheda, da bordo a bordo */
.scheda-illustrata { padding-top: 0; overflow: hidden; }
.scheda-illustrazione {
  display: block; width: calc(100% + 2.8rem); max-width: none; height: auto; aspect-ratio: 5 / 3; object-fit: cover;
  margin: 0 -1.4rem 1rem; border-bottom: 1px solid var(--bordo);
}
.scheda-volto {
  width: 3.4rem; height: 3.4rem; margin-bottom: .9rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #2f56a3, #0b1d45 72%); border: 2px solid var(--tinta, var(--bordo));
}

.etichetta {
  display: inline-block; padding: .15rem .55rem; border-radius: 99px;
  font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta, var(--ciano)); background: color-mix(in srgb, var(--tinta, var(--ciano)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tinta, var(--ciano)) 45%, transparent);
}
.tinta-amico { --tinta: #7be495; }
.tinta-urto { --tinta: var(--ciano); }
.tinta-pericolo { --tinta: #ff8a7a; }
.tinta-preda { --tinta: var(--oro); }
.tinta-speciale { --tinta: #c8b4ff; }
.tinta-gatto { --tinta: #ffb15c; }

/* Pericoli fermi: lo stesso pericolo cambia aspetto e nome da un quartiere all'altro */
.varianti { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.varianti li { display: grid; justify-items: center; gap: .25rem; width: 5.6rem; text-align: center; }
.varianti img { height: 4.2rem; width: auto; filter: drop-shadow(0 4px 4px #0007); }
.varianti span { font-size: .72rem; line-height: 1.25; color: var(--tenue); }
.varianti b { display: block; color: var(--inchiostro); font-size: .74rem; }

/* Mosse: il gatto nella posa giusta accanto ai comandi */
.mosse { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); list-style: none; margin: 0; padding: 0; }
.mossa { display: flex; flex-direction: column; gap: .8rem; }
.mossa img { width: auto; height: 5.5rem; align-self: flex-start; object-fit: contain; filter: drop-shadow(0 6px 8px #0008); }
@media (max-width: 560px) {
  .mossa { display: grid; grid-template-columns: 5.5rem 1fr; align-items: start; }
  .mossa img { width: 5.5rem; height: auto; }
}
.mossa h3 { margin: 0 0 .25rem; font-size: 1.1rem; color: #fff; }
.mossa p { margin: 0; color: var(--tenue); font-size: .95rem; }
.tasti { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
kbd, .tocco {
  font: 800 .72rem/1 var(--font); letter-spacing: .06em; padding: .3rem .45rem; border-radius: .4rem;
  border: 1px solid #afd2ff55; border-bottom-width: 3px; background: #0a1735; color: var(--inchiostro);
}
.tocco { border-color: #ffd15d66; color: var(--oro); }

/* Punti: le scritte del gioco, come appaiono sopra il gatto */
.scritte { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.scritte li { display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; align-items: baseline; padding: .7rem 1rem; border: 1px solid var(--bordo); border-radius: .9rem; background: #0a1735b3; }
.scritta { font-weight: 900; color: var(--oro); letter-spacing: .04em; text-shadow: 0 2px 0 #7a3e10; white-space: nowrap; }
.scritte p { margin: 0; color: var(--tenue); font-size: .95rem; }

/* Chi si incontra: volto piccolo che porta alla sua pagina nel libro */
.chi { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.chi li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .9rem; align-items: start; padding: .9rem 1rem; border: 1px solid var(--bordo); border-radius: 1rem; background: var(--pannello); }
.chi img { width: 4.2rem; height: 4.2rem; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2a4a8f, #0b1d45 72%); border: 2px solid var(--tinta, var(--bordo)); }
.chi h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.chi h3 a { color: #fff; text-decoration: none; }
.chi h3 a:hover { color: var(--oro); text-decoration: underline; }
.chi p { margin: 0; color: var(--tenue); font-size: .95rem; }

/* Libro dei personaggi: una pagina per personaggio, con il volto in un medaglione */
.personaggi { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); }
.personaggio {
  scroll-margin-top: 5rem; position: relative;
  display: grid; grid-template-columns: 8.5rem 1fr; gap: .2rem 1.3rem; align-content: start;
  padding: 1.4rem; border: 1px solid var(--bordo); border-radius: 1.3rem;
  background: var(--pannello); box-shadow: 0 18px 50px #0006;
}
.personaggio:target { border-color: var(--oro); box-shadow: 0 0 0 2px #ffd15d55, 0 18px 50px #0006; }
.medaglione {
  grid-row: span 2; width: 8.5rem; height: 8.5rem; border-radius: 50%; object-fit: cover;
  background: radial-gradient(circle at 50% 35%, #2f56a3, #0b1d45 72%);
  border: 3px solid var(--tinta, var(--bordo)); box-shadow: 0 0 0 5px #061029, 0 12px 26px #0009;
}
.personaggio h3 { margin: .2rem 0 .4rem; font-size: 1.45rem; color: #fff; }
.capitolo-numero { display: block; margin-bottom: .35rem; color: var(--oro); font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; }
.aspetti { display: flex; gap: .4rem; margin: .5rem 0 0; }
.aspetto {
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #2f56a3, #0b1d45 72%); border: 2px solid var(--tinta, var(--bordo));
}
.personaggio-dove { margin: 0 0 .4rem; display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; color: #8ea6c7; font-size: .85rem; font-weight: 700; }
.bio { grid-column: 1 / -1; margin: .9rem 0 0; color: var(--inchiostro); }
.comportamento { grid-column: 1 / -1; display: grid; gap: .2rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin-top: .8rem; }
.comportamento h4 { margin: .4rem 0 .3rem; color: var(--oro); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.comportamento ul { margin: 0; padding-left: 1.1rem; color: var(--tenue); font-size: .95rem; }
.comportamento li + li { margin-top: .3rem; }
@media (max-width: 520px) {
  .personaggio { grid-template-columns: 5.5rem 1fr; padding: 1.1rem; }
  .medaglione { width: 5.5rem; height: 5.5rem; grid-row: auto; }
  .personaggio h3 { font-size: 1.25rem; }
}

.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.errore { padding: clamp(3rem, 10vw, 6rem) 0; text-align: center; }
.errore img { width: 140px; margin: 0 auto 1rem; }
.errore h1 { margin: 0 0 .6rem; font-size: clamp(2rem, 6vw, 3rem); }
.errore p { color: var(--tenue); }
.errore-altra { margin-top: 2rem; font-size: .95rem; }

/* Piede */

.piede { background: #040b1f; border-top: 1px solid #afd2ff1f; padding: 2.5rem 0 3rem; }
.piede-dentro { display: grid; gap: 1.2rem; justify-items: center; text-align: center; }
.piede .marchio img { height: 3rem; }
.piede-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; }
.piede-nav a { color: var(--inchiostro); text-decoration: none; font-weight: 700; }
.piede-nav a:hover, .piede-nav a[aria-current] { color: var(--oro); }
.piede-legale { margin: 0; color: #8ea6c7; font-size: .85rem; }
.piede-legale a { color: inherit; }
.piede-legale span { white-space: nowrap; }

/* Movimento: il gatto fluttua e gli strati scorrono a velocità diverse, solo per chi non ha chiesto meno animazioni */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .testata-gatto { animation: vola 3.4s ease-in-out infinite alternate; }
  @keyframes vola {
    from { transform: translate(0, 0) rotate(-3deg); }
    to { transform: translate(-12px, -16px) rotate(2deg); }
  }

  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .strato, .testata-contenuto {
      animation: parallasse linear both;
      animation-timeline: --testata;
      animation-range: exit 0% exit 100%;
    }
    .strato-cielo { --sposta: 40%; }
    .strato-lontano { --sposta: 28%; }
    .strato-medio { --sposta: 16%; }
    .strato-vicino { --sposta: 4%; }
    .testata-contenuto { --sposta: 30%; }
    @keyframes parallasse { to { transform: translateY(var(--sposta)); } }
  }

  /* Il gatto seduto muove la coda e piega la testa, con tempi diversi perché non vadano a tempo */
  .gatto-coda { animation: coda 5s ease-in-out infinite; }
  .gatto-testa { animation: testa 8s ease-in-out infinite; }
  @keyframes coda {
    0%, 100% { rotate: 0deg; }
    12% { rotate: 7deg; }
    24% { rotate: 1deg; }
    36% { rotate: 5deg; }
    50% { rotate: 0deg; }
    70% { rotate: -1.5deg; }
  }
  @keyframes testa {
    0%, 30%, 100% { rotate: 0deg; }
    38%, 55% { rotate: -4deg; }
    63%, 78% { rotate: 3deg; }
    86% { rotate: 0deg; }
  }

  /* Il gladiatore morde il panino e mastica muovendo il mento, a figura ferma (niente su e giù: Gianluca); spaventato
     corre a sinistra fuori dallo schermo (--via, dallo script) */
  .gladiatore-figura { animation: mangia 2.6s steps(1) infinite; }
  .gladiatore[data-stato="sussulta"] .gladiatore-figura { animation: none; }
  .gladiatore[data-stato="scappa"] { translate: var(--via) 0; transition: translate 1.1s cubic-bezier(.4, 0, .9, .5); }
  .gladiatore[data-stato="scappa"] .gladiatore-figura { animation: corre .28s steps(1) infinite; }
  @keyframes mangia {
    0% { background-position-x: 0%; }
    30%, 50%, 70%, 90% { background-position-x: 20%; }
    40%, 60%, 80% { background-position-x: 40%; }
  }
  @keyframes corre {
    0% { background-position-x: 80%; }
    50%, 100% { background-position-x: 100%; }
  }

  /* Il gatto toccato: un saltello quando miagola, un tremito quando fa le fusa; la nuvoletta sale mentre svanisce */
  .gatto-seduto[data-voce="miao"] { animation: saltello .55s ease-out; }
  .gatto-seduto[data-voce="fusa"] { animation: tremito .09s linear infinite; }
  .gatto-seduto[data-voce] .gatto-nuvola { animation-name: nuvola-sale; }
  @keyframes saltello {
    35% { translate: 0 -10px; }
    65% { translate: 0 0; }
    80% { translate: 0 -3px; }
  }
  @keyframes tremito {
    25% { translate: .7px -.5px; }
    50% { translate: -.7px .4px; }
    75% { translate: .5px .6px; }
  }
  @keyframes nuvola-sale {
    0% { opacity: 0; translate: 0 8px; }
    12%, 70% { opacity: 1; }
    100% { opacity: 0; translate: 0 -16px; }
  }
}