/*
 * La Terza Torre — la vetrina.
 *
 * Notte, pioggia, oro e pietra: sono gli stessi colori del gioco
 * (src/ui/theme.ts), portati sul web. Si parte dal telefono e si allarga.
 * Si muove solo la prima schermata: il trailer muto sullo sfondo, l'ingresso
 * del titolo e l'alone che chiama tre volte sul bottone del trailer. Il resto
 * sta fermo, perché una vetrina che si muove dappertutto sembra una giostra.
 */

/* ---------------------------------------------------------------- caratteri */

/* Cinzel per i titoli: sono le maiuscole romane delle lapidi, quelle incise
   sulla pietra del Palazzo. Il nero (700) blocca il testo finché non arriva,
   così il titolo non salta da un carattere all'altro a metà dell'ingresso:
   è precaricato, arriva quasi subito. */
@font-face {
  font-family: 'Cinzel';
  src: url('/font/cinzel-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Cinzel';
  src: url('/font/cinzel-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* EB Garamond per leggere: un carattere da libro, che sul telefono regge. */
@font-face {
  font-family: 'EB Garamond';
  src: url('/font/eb-garamond-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('/font/eb-garamond-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ------------------------------------------------------------------- colori */

:root {
  color-scheme: dark;

  /* i fondi: il nero del gioco non è mai nero, è un inchiostro viola scuro */
  --inchiostro: #141019;
  --inchiostro-2: #1b1520;
  --prugna: #2a2230;
  --prugna-chiara: #3b3040;
  --notte: #1b2340;

  /* la luce: l'ottone delle fibbie e l'oro del titolo */
  --ottone: #c9a227;
  --oro: #f0d27a;
  --oro-vivo: #ffd97a;
  --oro-chiaro: #fbe7a6;

  /* la carta e il testo */
  --pergamena: #f4ecd8;
  --pergamena-2: #e9ddc0;
  --pergamena-scura: #d7c9a8;
  --testo: #efe7d6;
  --testo-tenue: #bcb3a0;
  --pietra: #8d8474;

  /* gli esiti dei moduli: abbastanza chiari da leggersi sul fondo scuro */
  --errore: #f0a08a;
  --riuscito: #b5d6a7;

  --linea-oro: rgba(240, 210, 122, 0.28);
  --linea-oro-forte: rgba(240, 210, 122, 0.6);

  --titoli: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --lettura: 'EB Garamond', Georgia, 'Times New Roman', serif;

  --largo: 1120px;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------------- basi */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--inchiostro);
  color: var(--testo);
  font-family: var(--lettura);
  font-size: 1.1875rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--oro);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--oro-vivo);
}

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

::selection {
  background: var(--ottone);
  color: var(--inchiostro);
}

.solo-lettori {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.salta {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 50;
  padding: 10px 16px;
  background: var(--oro);
  color: var(--inchiostro);
  font-family: var(--titoli);
  font-weight: 500;
  text-decoration: none;
  border-radius: 4px;
}
.salta:focus {
  top: 16px;
}

.contenitore {
  width: min(100% - 32px, var(--largo));
  margin-inline: auto;
}

/* L'occhiello: maiuscolette spaziate, con due filetti d'ottone ai lati. */
.occhiello {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--titoli);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ottone);
}
.occhiello::before,
.occhiello::after {
  content: '';
  flex: 0 0 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.occhiello--a-sinistra::before {
  display: none;
}

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

/* Gli stessi bottoni del gioco: il fondo pieno e, cinque punti più dentro,
   un filetto sottile. Qui il filetto è un'ombra interna, così non ruba il
   contorno al segno del fuoco da tastiera. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  min-height: 54px;
  padding: 0.7em 1.7em;
  border: 0;
  border-radius: 4px;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s var(--curva);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}
.btn svg {
  flex: none;
  width: 0.9em;
  height: 0.9em;
}

/* il filetto interno dei bottoni pieni, disegnato sopra il fondo */
.btn--oro,
.btn--prugna {
  position: relative;
}
.btn--oro::after,
.btn--prugna::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(20, 16, 25, 0.38);
  border-radius: 2px;
  pointer-events: none;
}
.btn--prugna::after {
  border: 2px solid var(--ottone);
  opacity: 0.9;
}
.btn--prugna:hover::after {
  border-color: var(--oro);
}

/* ottone lucidato: più chiaro in alto, dove prende la luce */
.btn--oro {
  background: linear-gradient(180deg, #f8e3a0 0%, var(--oro) 48%, #ddb64c 100%);
  color: var(--inchiostro);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 14px 34px -14px rgba(0, 0, 0, 0.8);
}
.btn--oro:hover {
  background: linear-gradient(180deg, #fcefc4 0%, var(--oro-chiaro) 48%, #e8c461 100%);
  color: var(--inchiostro);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 18px 40px -14px rgba(0, 0, 0, 0.85);
}

.btn--vetro {
  background: rgba(20, 16, 25, 0.55);
  color: var(--pergamena);
  box-shadow: inset 0 0 0 1px var(--linea-oro-forte);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--vetro:hover {
  background: rgba(42, 34, 48, 0.8);
  color: var(--oro-vivo);
  box-shadow: inset 0 0 0 1px var(--oro);
}

/* il bottone del gioco tale e quale: prugna, filetto d'ottone, testo chiaro */
.btn--prugna {
  min-height: 58px;
  padding-inline: 2em;
  background: var(--prugna);
  color: var(--pergamena);
  box-shadow: 0 14px 30px -16px rgba(20, 16, 25, 0.9);
}
.btn--prugna:hover {
  background: var(--prugna-chiara);
  color: var(--oro-vivo);
  box-shadow: 0 18px 36px -16px rgba(20, 16, 25, 0.9);
}

.btn--pieno {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

/* ================================================================ la prima
   schermata: una locandina. In alto chi la presenta, al centro il trailer che
   gira muto col bottone per vederlo con l'audio, in basso il titolo e il
   bottone per giocare, in fondo i nomi. */

/* Quattro righe: la prima e le ultime due prendono quello che serve, quella
   del trailer si prende il resto e tiene il bottone nel mezzo della scena. */
.eroe {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  justify-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: max(18px, env(safe-area-inset-top)) 16px 72px;
  overflow: hidden;
  text-align: center;
}

.eroe__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--notte);
}
.eroe__tavola,
.eroe__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* la terza torre col fulmine sta a destra: quando lo schermo è meno largo
     del 16:9 (un tablet, una finestra quadrata) si taglia di più a sinistra */
  object-position: 70% 50%;
}
.eroe__video {
  opacity: 0;
  transition: opacity 1.8s ease;
}
.eroe__video.in-onda {
  opacity: 1;
}

/* il velo: scurisce in alto, dove c'è chi presenta, e in basso, dove ci sono
   il titolo e i nomi. Nel mezzo lascia vedere il trailer */
.eroe__velo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 95% 70% at 50% 38%, rgba(20, 16, 25, 0) 0%, rgba(20, 16, 25, 0.35) 70%, rgba(20, 16, 25, 0.7) 100%),
    linear-gradient(
      to bottom,
      rgba(20, 16, 25, 0.62) 0%,
      rgba(20, 16, 25, 0) 20%,
      rgba(20, 16, 25, 0) 40%,
      rgba(20, 16, 25, 0.55) 64%,
      rgba(20, 16, 25, 0.86) 86%,
      var(--inchiostro) 100%
    );
}

/* «Ethere Inc. presenta», in cima come sulle locandine */
.eroe__presenta {
  grid-row: 1;
  margin: 0;
  font-family: var(--titoli);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--pergamena);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}
.eroe__presenta span {
  margin-left: 0.2em;
  font-family: var(--lettura);
  font-style: italic;
  font-size: 1.2em;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--oro);
}

/* Il bottone del trailer: grande, in mezzo alla scena, dove si guarda. Un
   disco d'ottone col triangolo, come su ogni filmato, e accanto la scritta
   che dice che stavolta c'è l'audio. */
.eroe__trailer {
  grid-row: 2;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 20px 0;
  padding: 9px 28px 9px 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 16, 25, 0.55);
  box-shadow:
    inset 0 0 0 1px var(--linea-oro-forte),
    0 24px 60px -24px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--pergamena);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s var(--curva);
}
.eroe__trailer:hover {
  background: rgba(42, 34, 48, 0.82);
  box-shadow:
    inset 0 0 0 1px var(--oro),
    0 28px 64px -24px rgba(0, 0, 0, 0.95);
  transform: translateY(-1px);
}
.eroe__trailer:focus-visible {
  outline-offset: 4px;
  border-radius: 999px;
}

.eroe__disco {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f8e3a0 0%, var(--oro) 50%, #d9b046 100%);
  color: var(--inchiostro);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 0 0 5px rgba(240, 210, 122, 0.14);
}
.eroe__disco svg {
  width: 24px;
  height: 24px;
  margin-left: 4px;
}
.eroe__trailer:hover .eroe__disco {
  background: linear-gradient(180deg, #fcefc4 0%, var(--oro-chiaro) 50%, #e8c461 100%);
}

.eroe__trailer-testo {
  display: grid;
  gap: 3px;
}
.eroe__trailer-riga {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.15;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.eroe__trailer-audio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--oro);
}
.eroe__trailer-audio svg {
  flex: none;
  width: 19px;
  height: 19px;
}

.eroe__contenuto {
  grid-row: 3;
  display: grid;
  justify-items: center;
  gap: 18px;
  width: 100%;
  max-width: 1200px;
}

.eroe__occhiello {
  gap: 10px;
  letter-spacing: 0.2em;
  color: var(--oro);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
}
.eroe__occhiello::before,
.eroe__occhiello::after {
  flex-basis: 16px;
}
/* sul telefono «Da San Marino alla Costa Smeralda» deve stare in una riga: via
   i filetti, un po' meno aria fra le lettere. Se proprio non ci sta, va a capo
   in due righe pari */
@media (max-width: 519px) {
  .eroe__occhiello {
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-wrap: balance;
  }
  .eroe__occhiello::before,
  .eroe__occhiello::after {
    display: none;
  }
}
@media (max-width: 379px) {
  .eroe__occhiello {
    letter-spacing: 0.1em;
  }
}
@media (min-width: 560px) {
  .eroe__occhiello {
    gap: 14px;
    letter-spacing: 0.3em;
  }
  .eroe__occhiello::before,
  .eroe__occhiello::after {
    flex-basis: 28px;
  }
}

/* Il titolo: oro su scuro come nel menu del gioco, con la stessa ombra
   spostata di tre punti. Le due metà vanno a capo solo se non ci stanno. */
.eroe__titolo {
  margin: 0;
  font-family: var(--titoli);
  font-weight: 700;
  /* anche l'altezza conta: col telefono coricato il titolo non deve prendersi
     tutto lo schermo e spingere i bottoni fuori */
  font-size: 3rem;
  font-size: min(6rem, 14.5vw, 14vh);
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  filter: drop-shadow(0 3px 0 rgba(26, 17, 25, 0.95)) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
}
.eroe__titolo span {
  display: inline-block;
  white-space: nowrap;
  padding-inline: 0.04em;
  background: linear-gradient(180deg, var(--oro-chiaro) 0%, var(--oro) 42%, #d8b245 78%, var(--ottone) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eroe__mistero {
  margin: 0;
  max-width: 34ch;
  text-wrap: balance;
  font-style: italic;
  font-size: clamp(1.25rem, 4.4vw, 1.65rem);
  line-height: 1.35;
  color: var(--pergamena);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
}

.eroe__azioni {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  margin-top: 4px;
}
/* il trailer piccolo, accanto al bottone del gioco: solo col telefono coricato */
.eroe__trailer-corto {
  display: none;
}

.eroe__nota {
  margin: 0;
  max-width: 46ch;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--pergamena-scura);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
  text-wrap: balance;
}

/* I nomi in fondo alla locandina. Sul telefono resta il primo, gli altri sono
   per esteso più giù, nei titoli. */
.eroe__titoli {
  grid-row: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 34px;
  margin: 26px 0 0;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pergamena);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}
.eroe__nome {
  display: grid;
  gap: 3px;
  justify-items: center;
}
.eroe__nome .ruolo {
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  color: var(--ottone);
}
.eroe__nome a {
  color: inherit;
  text-decoration: none;
}
.eroe__nome a:hover {
  color: var(--oro-vivo);
  text-decoration: underline;
}
.eroe__nome--primo {
  font-size: 1.08rem;
  color: var(--oro);
}
.eroe__nome:not(.eroe__nome--primo) {
  display: none;
}
@media (min-width: 760px) and (min-height: 600px) {
  .eroe__nome:not(.eroe__nome--primo) {
    display: grid;
  }
}

.eroe__giu {
  position: absolute;
  left: 50%;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  color: var(--pergamena-scura);
  opacity: 0.75;
}
.eroe__giu:hover {
  color: var(--oro-vivo);
  opacity: 1;
}
.eroe__giu svg {
  width: 22px;
  height: 22px;
}

/* il telefono in verticale ha la sua tavola e il suo filmato, tagliati in
   piedi inquadratura per inquadratura (vetrina/strumenti/sfondo-trailer.mjs):
   lì si tiene il centro */
@media (max-aspect-ratio: 3/4) {
  .eroe__tavola,
  .eroe__video {
    object-position: 50% 50%;
  }
}

/* un telefono piccolo, o basso: si stringe tutto perché ci stia */
@media (max-height: 700px) and (orientation: portrait) {
  .eroe {
    padding-bottom: 60px;
  }
  .eroe__contenuto {
    gap: 12px;
  }
  .eroe__trailer {
    margin: 12px 0;
    gap: 12px;
    padding: 7px 22px 7px 7px;
  }
  .eroe__disco {
    width: 50px;
    height: 50px;
  }
  .eroe__disco svg {
    width: 20px;
    height: 20px;
  }
  .eroe__trailer-riga {
    font-size: 1rem;
  }
  .eroe__trailer-audio {
    font-size: 1rem;
  }
  .eroe__titoli {
    margin-top: 16px;
  }
  .eroe__nota {
    display: none;
  }
}

/* il telefono coricato, che è come si gioca: lo schermo è basso, il bottone
   grande del trailer lascia il posto a uno piccolo accanto a «Gioca», e tutto
   si stringe perché titolo e bottoni stiano dentro senza scorrere */
@media (orientation: landscape) and (max-height: 540px) {
  .eroe {
    grid-template-rows: auto 1fr auto 1fr;
    padding-block: max(12px, env(safe-area-inset-top)) 48px;
  }
  .eroe__trailer {
    display: none;
  }
  .eroe__contenuto {
    grid-row: 3;
    gap: 10px;
  }
  .eroe__azioni {
    display: flex;
    justify-content: center;
    gap: 12px;
    max-width: none;
    margin-top: 0;
  }
  .eroe__trailer-corto {
    display: inline-flex;
  }
  .eroe__mistero {
    font-size: 1.15rem;
  }
  .eroe__nota,
  .eroe__titoli {
    display: none;
  }
}

/* L'ingresso, orchestrato: prima la notte si schiarisce, poi chi presenta,
   il titolo che sale lento, la riga di mistero, i bottoni, i nomi. Un'onda sola.
   Il disco del trailer, alla fine, chiama tre volte con un alone, poi sta zitto. */
@media (prefers-reduced-motion: no-preference) {
  .eroe__fondo {
    animation: dal-buio 2.4s ease-out both;
  }
  .eroe__presenta {
    animation: affiora 1.3s var(--curva) 0.3s both;
  }
  .eroe__titolo {
    animation: sorge 2s var(--curva) 0.55s both;
  }
  .eroe__occhiello {
    animation: affiora 1.3s var(--curva) 1.15s both;
  }
  .eroe__mistero {
    animation: affiora 1.4s var(--curva) 1.35s both;
  }
  .eroe__trailer {
    animation: affiora 1.3s var(--curva) 1.55s both;
  }
  .eroe__azioni {
    animation: affiora 1.2s var(--curva) 1.75s both;
  }
  .eroe__nota {
    animation: affiora 1.2s var(--curva) 2s both;
  }
  .eroe__titoli {
    animation: affiora 1.2s var(--curva) 2.2s both;
  }
  .eroe__giu {
    animation: compare 1s ease 2.6s both;
  }
  .eroe__disco::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(240, 210, 122, 0.55);
    animation: richiamo 2.4s ease-out 3s 3;
  }
}

@keyframes dal-buio {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes affiora {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sorge {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.97);
    letter-spacing: 0.16em;
  }
  to {
    opacity: 1;
    transform: none;
    letter-spacing: 0.07em;
  }
}
@keyframes compare {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.75;
  }
}
@keyframes richiamo {
  from {
    box-shadow: 0 0 0 0 rgba(240, 210, 122, 0.55);
  }
  to {
    box-shadow: 0 0 0 22px rgba(240, 210, 122, 0);
  }
}

/* ============================================================== la storia */

.storia {
  padding-block: clamp(56px, 9vw, 110px) clamp(64px, 10vw, 120px);
}

.storia__griglia {
  display: grid;
  gap: 28px;
}

.storia__testata {
  display: grid;
  gap: 18px;
  align-content: start;
}

/* le due date, incise: solo il contorno, in ottone */
.storia__date {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: clamp(2.6rem, 11vw, 4.6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--ottone);
}
.storia__date .trattino {
  flex: 0 0 34px;
  height: 1px;
  background: var(--ottone);
  opacity: 0.6;
}
.storia__date .dopo {
  -webkit-text-stroke-color: rgba(201, 162, 39, 0.55);
}

.storia__testo {
  max-width: 40rem;
}
.storia__testo p {
  margin: 0 0 1.1em;
  color: var(--testo-tenue);
  font-size: clamp(1.19rem, 2.4vw, 1.32rem);
}
.storia__testo .attacco {
  color: var(--pergamena);
  font-size: clamp(1.45rem, 4.4vw, 2rem);
  line-height: 1.38;
}
.storia__testo .chiusa {
  margin-top: 1.6em;
  color: var(--oro);
  font-style: italic;
}

/* ------------------------------------------------ il viaggio: tre luoghi */

/* Sul telefono le tappe scendono una sotto l'altra, legate da un filo
   d'ottone; sugli schermi larghi si mettono in fila, come su una mappa. */
.viaggio {
  margin-top: clamp(40px, 7vw, 76px);
}
.viaggio__titolo {
  margin: 0 0 26px;
  font-family: var(--titoli);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ottone);
}
.viaggio__tappe {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.viaggio__tappa {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 0 0 30px 38px;
}
/* il filo fino alla tappa dopo */
.viaggio__tappa::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 20px;
  bottom: -2px;
  width: 1px;
  background: linear-gradient(to bottom, var(--ottone), rgba(201, 162, 39, 0.35));
}
.viaggio__tappa:last-child {
  padding-bottom: 0;
}
.viaggio__tappa:last-child::before {
  display: none;
}
.viaggio__segno {
  position: absolute;
  left: 0;
  top: 5px;
  width: 15px;
  height: 15px;
  border: 1px solid var(--ottone);
  border-radius: 50%;
  background: var(--inchiostro);
  box-shadow: inset 0 0 0 3px var(--inchiostro), inset 0 0 0 8px var(--oro);
}
.viaggio__luogo {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: clamp(1.3rem, 4.6vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--pergamena);
}
.viaggio__cosa {
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.45;
  color: var(--testo-tenue);
}
.viaggio__atti {
  margin: 30px 0 0;
  font-size: clamp(1.15rem, 2.4vw, 1.28rem);
  color: var(--oro);
}

/* ============================================================== le tavole */

/* due immagini affiancate: sotto la storia le tavole dipinte, sotto «Come si
   gioca» le riprese del gioco */
.coppia {
  display: grid;
  gap: 14px;
  margin: clamp(40px, 7vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}

.tavola {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--inchiostro-2);
  box-shadow:
    0 0 0 1px var(--linea-oro),
    0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.tavola img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 1.4s var(--curva);
}
.tavola figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 40px 16px 14px;
  background: linear-gradient(to top, rgba(20, 16, 25, 0.9), rgba(20, 16, 25, 0));
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--pergamena);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .coppia:not(.coppia--gioco) .tavola:hover img {
    transform: scale(1.035);
  }
}

/* le riprese del gioco hanno le scritte del gioco in basso: la didascalia va
   sotto l'immagine, non sopra */
.coppia--gioco .tavola {
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.coppia--gioco .tavola img {
  border-radius: 3px;
  box-shadow:
    0 0 0 1px var(--linea-oro),
    0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.coppia--gioco .tavola figcaption {
  position: static;
  padding: 12px 2px 0;
  background: none;
  color: var(--pergamena-scura);
}

/* ========================================================== come si gioca */

.gioco {
  position: relative;
  padding-block: clamp(64px, 10vw, 120px);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(59, 48, 64, 0.55) 0%, rgba(20, 16, 25, 0) 70%),
    var(--inchiostro-2);
  border-top: 1px solid rgba(240, 210, 122, 0.12);
}

.gioco__testata {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}
.gioco__titolo {
  margin: 0;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: clamp(1.75rem, 6.4vw, 3.1rem);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-wrap: balance;
  background: linear-gradient(180deg, var(--oro-chiaro) 0%, var(--oro) 45%, #d8b245 85%, var(--ottone) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gioco__attacco {
  margin: 0;
  font-size: clamp(1.22rem, 2.8vw, 1.4rem);
  line-height: 1.5;
  color: var(--pergamena);
}

/* i sei punti: uno sotto l'altro sul telefono, due o tre per riga più in là */
.punti {
  display: grid;
  gap: 30px;
  margin: clamp(44px, 7vw, 76px) 0 0;
  padding: 0;
  list-style: none;
}
.punto {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 16px;
  align-items: start;
}
.punto__segno {
  grid-row: span 2;
  width: 36px;
  height: 36px;
  margin-top: 2px;
  color: var(--ottone);
}
.punto h3 {
  margin: 0 0 6px;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: var(--pergamena);
}
.punto p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--testo-tenue);
}

/* ============================================================== il prezzo */

/* Una fascia chiara, di carta: è l'unico punto della pagina che parla di
   soldi. Lo dice una volta, senza gridare. */
.prezzo {
  position: relative;
  padding-block: clamp(60px, 9vw, 100px);
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, #f8f2e2 0%, var(--pergamena) 45%, var(--pergamena-2) 100%);
  color: var(--inchiostro);
  text-align: center;
}
.prezzo::before,
.prezzo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ottone) 20%, var(--ottone) 80%, transparent);
  opacity: 0.55;
}
.prezzo::before {
  top: 14px;
}
.prezzo::after {
  bottom: 14px;
}

/* sulla carta chiara il segno del fuoco d'oro non si vedrebbe: qui è d'inchiostro */
.prezzo :focus-visible {
  outline-color: var(--inchiostro);
}

.prezzo .occhiello {
  justify-content: center;
  color: #7a5f12;
}

.prezzo__titolo {
  margin: 16px auto 0;
  max-width: 24em;
  text-wrap: balance;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: clamp(1.55rem, 5.2vw, 2.4rem);
  line-height: 1.22;
  letter-spacing: 0.01em;
  color: var(--inchiostro);
}

.prezzo__come {
  max-width: 36rem;
  margin: 18px auto 0;
  font-size: clamp(1.18rem, 2.5vw, 1.3rem);
  line-height: 1.55;
  color: #2a2230;
  text-wrap: pretty;
}
.prezzo__azione {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* ============================================================== i titoli */

/* Il blocco dei nomi, come sui manifesti dei film: un riquadro con due
   filetti, il ruolo in piccolo e il nome in grande. Il primo nome è quello di
   chi ha dato al gioco la sua faccia. */
.titoli {
  padding-block: clamp(72px, 11vw, 130px);
  background: radial-gradient(ellipse 70% 60% at 50% 45%, #1f1826 0%, var(--inchiostro) 72%);
  text-align: center;
}
.titoli__cornice {
  position: relative;
  max-width: 880px;
  padding: clamp(40px, 7vw, 68px) clamp(18px, 5vw, 60px);
  border: 1px solid var(--linea-oro);
  outline: 1px solid rgba(240, 210, 122, 0.12);
  outline-offset: 6px;
}
.titoli .occhiello {
  justify-content: center;
}

.titoli__ruolo {
  margin: 0;
  font-family: var(--titoli);
  font-weight: 500;
  font-size: 0.74rem;
  line-height: 1.5;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ottone);
}
.titoli__nome {
  margin: 8px 0 0;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: clamp(1.3rem, 4.4vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pergamena);
}
.titoli__nome a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(240, 210, 122, 0.4);
  text-underline-offset: 0.2em;
}
.titoli__nome a:hover {
  color: var(--oro-vivo);
  text-decoration-color: currentColor;
}
.titoli__dove {
  margin: 6px 0 0;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--testo-tenue);
}

.titoli__primo {
  margin: 30px 0 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(240, 210, 122, 0.16);
}
.titoli__nome--grande {
  margin-top: 12px;
  font-size: clamp(1.9rem, 8.6vw, 3.7rem);
  letter-spacing: 0.08em;
  filter: drop-shadow(0 3px 0 rgba(26, 17, 25, 0.95));
}
.titoli__nome--grande a {
  background: linear-gradient(180deg, var(--oro-chiaro) 0%, var(--oro) 45%, #d8b245 85%, var(--ottone) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: none;
}
.titoli__nome--grande a:hover {
  background: linear-gradient(180deg, #fff6d6 0%, var(--oro-chiaro) 50%, var(--oro) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.titoli__coppia {
  display: grid;
  gap: 32px;
}
/* quando un ruolo va su due righe e l'altro no, i due nomi restano alla
   stessa altezza: il ruolo si appoggia in basso */
.titoli__voce {
  display: grid;
  grid-template-rows: 1fr auto auto;
}
.titoli__voce .titoli__ruolo {
  align-self: end;
}

/* ============================================================== il piede */

.piede {
  padding-block: 44px 40px;
  border-top: 1px solid rgba(240, 210, 122, 0.12);
  background: var(--inchiostro);
  color: var(--testo-tenue);
  font-size: 1rem;
}
.piede__griglia {
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
}
.marchio {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--oro);
}
.marchio img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}
.piede__frase {
  margin: 0;
}
.piede__collegamenti {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.piede__collegamenti a {
  display: inline-block;
  padding: 8px 2px;
  color: var(--pergamena-scura);
  font-family: var(--titoli);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.piede__collegamenti a:hover {
  color: var(--oro-vivo);
  text-decoration: underline;
}
/* la riga dei titoli per esteso, con l'indirizzo */
.piede__crediti {
  max-width: 62rem;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(240, 210, 122, 0.1);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--testo-tenue);
}
.piede__diritti {
  margin: 0;
  font-size: 0.92rem;
  color: var(--pietra);
}

/* ============================================================== il trailer */

.trailer {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0a080d;
  color: var(--testo);
  overflow: hidden;
}
.trailer::backdrop {
  background: rgba(10, 8, 13, 0.9);
}
.trailer[open] {
  display: grid;
  place-items: center;
}
@media (prefers-reduced-motion: no-preference) {
  .trailer[open] {
    animation: compare-trailer 0.35s ease both;
  }
}
@keyframes compare-trailer {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.trailer__scena {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(100% - 32px, 1280px, (100vh - 190px) * 16 / 9);
  width: min(100% - 32px, 1280px, (100dvh - 190px) * 16 / 9);
}
.trailer__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px var(--linea-oro),
    0 40px 90px -30px rgba(0, 0, 0, 0.95);
}
.trailer__avviso {
  margin: 0;
  color: var(--pergamena-scura);
  font-style: italic;
  text-align: center;
}
/* col telefono dritto il trailer largo è una striscia: si suggerisce di girarlo */
.trailer__gira {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--pergamena-scura);
  font-style: italic;
  font-size: 1.05rem;
}
.trailer__gira svg {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--oro);
}
@media (orientation: portrait) and (max-width: 700px) {
  .trailer__gira {
    display: flex;
  }
}
.trailer__chiudi {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(42, 34, 48, 0.85);
  color: var(--pergamena);
  box-shadow: inset 0 0 0 1px var(--linea-oro-forte);
  cursor: pointer;
}
.trailer__chiudi:hover {
  color: var(--oro-vivo);
  box-shadow: inset 0 0 0 1px var(--oro);
}
.trailer__chiudi svg {
  width: 20px;
  height: 20px;
}

/* telefono coricato: lo schermo è basso, il filmato si prende tutta l'altezza
   e il bottone sotto lascia il posto */
@media (max-height: 520px) {
  .trailer__scena {
    width: min(100% - 120px, (100vh - 24px) * 16 / 9);
    width: min(100% - 120px, (100dvh - 24px) * 16 / 9);
  }
  .trailer__scena .btn {
    display: none;
  }
}

html.trailer-aperto {
  overflow: hidden;
}

/* ====================================================== le pagine di testo
   (privacy) e le schede (nuova password, pagina che non c'è) */

.testata {
  padding-block: 22px;
  border-bottom: 1px solid rgba(240, 210, 122, 0.12);
}
.testata__riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.testata .btn {
  min-height: 44px;
  padding: 0.5em 1.1em;
  font-size: 0.9rem;
}

.documento {
  padding-block: clamp(48px, 9vw, 96px) clamp(64px, 10vw, 110px);
}
.documento__corpo {
  max-width: 42rem;
}
.documento h1 {
  margin: 14px 0 18px;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  line-height: 1.1;
  color: var(--oro);
}
.documento h2 {
  margin: 2.2em 0 0.6em;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: clamp(1.25rem, 3.6vw, 1.5rem);
  line-height: 1.25;
  color: var(--pergamena);
  scroll-margin-top: 24px;
}
.documento p,
.documento li {
  color: var(--testo-tenue);
}
.documento .occhiello {
  color: var(--ottone);
}
.documento p {
  margin: 0 0 1em;
}
.documento .attacco {
  font-size: clamp(1.3rem, 3.4vw, 1.5rem);
  line-height: 1.45;
  color: var(--pergamena);
}
.documento ul {
  margin: 0 0 1em;
  padding-left: 1.2em;
}
.documento li {
  margin-bottom: 0.55em;
  padding-left: 0.2em;
}
.documento li::marker {
  color: var(--ottone);
}
.documento strong {
  color: var(--pergamena);
  font-weight: 400;
  font-style: italic;
}
.aggiornata {
  font-size: 1rem;
  color: var(--pietra) !important;
}

/* I dati che ancora mancano: si devono vedere da lontano, finché non ci sono. */
.segnaposto {
  padding: 0.05em 0.35em;
  border-radius: 3px;
  background: #ffe066;
  color: #141019;
  font-style: normal;
  font-weight: 400;
}

/* ---------------------------------------------------------------- la scheda */

.scheda-pagina {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 40px 16px;
}
.scheda-pagina__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--notte);
}
.scheda-pagina__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.scheda-pagina__fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(20, 16, 25, 0.35), rgba(20, 16, 25, 0.92));
}

.scheda {
  width: 100%;
  max-width: 440px;
  padding: 30px 22px 26px;
  border-radius: 6px;
  background: rgba(20, 16, 25, 0.86);
  box-shadow:
    inset 0 0 0 1px var(--linea-oro),
    0 40px 80px -30px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.scheda .marchio {
  margin-bottom: 22px;
  font-size: 0.92rem;
}
.scheda h1 {
  margin: 0 0 10px;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: clamp(1.55rem, 6vw, 1.9rem);
  line-height: 1.2;
  color: var(--oro);
}
.scheda h2 {
  margin: 0 0 8px;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--pergamena);
}
.scheda p {
  margin: 0 0 16px;
  color: var(--testo-tenue);
  font-size: 1.12rem;
}
.scheda__piede {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(240, 210, 122, 0.14);
}
.scheda__piede p {
  font-size: 1rem;
  margin-bottom: 8px;
}
.scheda .btn + .btn {
  margin-top: 12px;
}

.campo {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}
.campo label {
  font-family: var(--titoli);
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pergamena-scura);
}
.campo input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid rgba(240, 210, 122, 0.35);
  border-radius: 4px;
  background: rgba(42, 34, 48, 0.7);
  color: var(--pergamena);
  font-family: var(--lettura);
  font-size: 1.2rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.campo input:hover {
  border-color: rgba(240, 210, 122, 0.6);
}
.campo input:focus {
  border-color: var(--oro);
  background: rgba(42, 34, 48, 0.95);
}
.campo input[aria-invalid='true'] {
  border-color: var(--errore);
}

.spunta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px 0 20px;
  font-size: 1.05rem;
  color: var(--testo-tenue);
  cursor: pointer;
}
.spunta input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ottone);
}

.esito {
  min-height: 0;
  margin: 14px 0 0 !important;
  font-size: 1.08rem !important;
  line-height: 1.45;
}
.esito:empty {
  display: none;
}
.esito--errore {
  color: var(--errore) !important;
}
.esito--riuscito {
  color: var(--riuscito) !important;
}

.nuovo-link {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(240, 210, 122, 0.14);
}

/* ============================================================ schermi larghi */

@media (min-width: 560px) {
  .eroe__azioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: none;
    width: auto;
    gap: 14px;
  }
  .scheda {
    padding: 38px 36px 32px;
  }
  .punti {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 40px;
  }
}

@media (min-width: 760px) {
  .eroe {
    padding-bottom: 76px;
  }
  .eroe__trailer {
    gap: 18px;
    padding: 10px 32px 10px 10px;
  }
  .eroe__disco {
    width: 70px;
    height: 70px;
  }
  .eroe__disco svg {
    width: 26px;
    height: 26px;
  }
  .eroe__trailer-riga {
    font-size: 1.24rem;
  }
  .eroe__trailer-audio {
    font-size: 1.18rem;
  }

  /* il viaggio in fila: il filo corre fra le tappe, da un segno all'altro */
  .viaggio__tappe {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 28px;
  }
  .viaggio__tappa {
    justify-items: center;
    padding: 34px 0 0;
    text-align: center;
  }
  .viaggio__tappa::before {
    left: calc(50% + 14px);
    right: calc(-50% - 14px);
    top: 7px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(to right, var(--ottone), rgba(201, 162, 39, 0.35));
  }
  .viaggio__segno {
    left: calc(50% - 7.5px);
    top: 0;
  }
  .viaggio__cosa {
    max-width: 22rem;
  }
  .viaggio__titolo,
  .viaggio__atti {
    text-align: center;
  }

  .coppia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .titoli__coppia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }
  .titoli__voce + .titoli__voce {
    border-left: 1px solid rgba(240, 210, 122, 0.16);
  }
  .titoli__voce {
    padding-inline: 16px;
  }

  .piede__griglia {
    grid-template-columns: 1fr auto;
    justify-items: start;
    text-align: left;
    align-items: center;
  }
  .piede__collegamenti {
    justify-content: flex-end;
  }
  .piede__crediti,
  .piede__diritti {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .storia__griglia {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 64px;
  }
  .storia__date {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .storia__date .trattino {
    flex: none;
    width: 34px;
    margin-left: 6px;
  }
  .punti {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .btn,
  .btn:hover,
  .eroe__trailer,
  .eroe__trailer:hover {
    transition: none;
    transform: none;
  }
}