/*! © 2026 Enrico Ascari — The Drowned Dawn. Tutti i diritti riservati / All rights reserved. */
/* The Drowned Dawn — landing /welcome/ (26-10). Sorgente in landing\, copiata in gioco\public\welcome\ da
   strumenti\landing\crea_landing.mjs (mai a mano lì). Modello: la landing di Spire & Spell (skill 35 §13), coi colori e i
   caratteri del gioco: notte marina, ottone, verde marcio della follia; IM Fell per i titoli, Alegreya Sans SC per le
   etichette (come l'interfaccia), Old Standard per leggere. I caratteri sono quelli del gioco (/fonts/fonts.css, in locale). */
:root {
  --notte: #070b0d; --notte2: #0d1518; --notte3: #13201f; --abisso: #040607;
  --ottone: #c9a25a; --ottone-chiaro: #f0d79a; --ottone-scuro: #6e4b1b; --testo-oro: #1a0c02;
  --marcio: #5ef0b4; --marcio-scuro: #1d6a4a; --sangue: #b84a35;
  --osso: #ece2cb; --osso2: #b9b3a3; --carta: #e9dfc6; --carta2: #d8c9a3; --inchiostro: #2a2116; --inchiostro2: #54462f;
  --titoli: "IM Fell English SC", Georgia, serif; --corsivo: "IM Fell English", Georgia, serif;
  --etichette: "Alegreya Sans SC", "Alegreya Sans", system-ui, sans-serif; --corpo: "Old Standard TT", Georgia, serif;
  --raggio: 6px; --ombra: 0 24px 60px rgba(0, 0, 0, .6);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--notte); }
body { margin: 0; background: var(--notte); color: var(--osso); font: 18px/1.65 var(--corpo); overflow-x: clip; }   /* clip, non hidden: hidden rompe position:sticky delle scene */
img, video, canvas { max-width: 100%; display: block; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
a { color: var(--ottone-chiaro); }
b { color: var(--ottone-chiaro); font-weight: 700; }
.wrap { width: min(1180px, 100% - 32px); margin: 0 auto; position: relative; z-index: 2; }
.centro { text-align: center; }
section { position: relative; padding: clamp(70px, 9vw, 120px) 0; }
h1, h2, h3 { margin: 0; font-family: var(--titoli); font-weight: 400; line-height: 1.1; color: var(--ottone-chiaro); }
h2 { font-size: clamp(32px, 4.4vw, 56px); margin: 12px 0 18px; text-wrap: balance; letter-spacing: .01em; }
h3 { font-size: 21px; }
p { margin: 0 0 14px; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--osso2); max-width: 760px; font-family: var(--corsivo); }
.centro .lead { margin-left: auto; margin-right: auto; }
.kicker { display: inline-block; font: 700 14px/1 var(--etichette); letter-spacing: .2em; color: var(--marcio);
  padding: 8px 14px 7px; border: 1px solid rgba(94, 240, 180, .35); background: rgba(94, 240, 180, .06); }

/* ---------------------------------------------------------------- barra in alto */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 14px; padding: 10px clamp(14px, 3vw, 28px);
  transition: background .3s, box-shadow .3s; }
.nav.piena { background: rgba(7, 11, 13, .9); box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
.nav .marchio { font: 400 24px/1 var(--titoli); color: var(--ottone-chiaro); text-decoration: none; letter-spacing: .02em; white-space: nowrap; }
.nav .spazio { flex: 1; }
.nav .lingua { font: 700 14px/1 var(--etichette); letter-spacing: .1em; color: var(--osso2); text-decoration: none; padding: 8px 10px; }

/* ---------------------------------------------------------------- pulsanti (ottone col testo SCURO, verde col testo chiaro) */
.btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: 10px 28px;
  border-radius: 4px; text-decoration: none; font: 700 19px/1.1 var(--etichette); letter-spacing: .08em; cursor: pointer; border: 0;
  transition: transform .15s, box-shadow .2s, filter .2s; }
.btn small { font: 700 12px/1.2 var(--etichette); letter-spacing: .08em; opacity: .85; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.btn-oro { color: var(--testo-oro); background: linear-gradient(180deg, #ffe9a8, #e2b55a 45%, #a9772a); box-shadow: 0 0 0 2px #5a3a10, inset 0 2px 0 rgba(255, 255, 255, .5), 0 12px 30px rgba(201, 162, 90, .32); }
.btn-verde { color: #f1fff6; text-shadow: 0 1px 0 #03200b; background: linear-gradient(180deg, #57c189, #22804e 50%, #0f4a2b); box-shadow: 0 0 0 2px #06301a, inset 0 2px 0 rgba(255, 255, 255, .3), 0 12px 30px rgba(34, 128, 78, .3); }
.nav .btn { min-height: 44px; padding: 8px 18px; font-size: 16px; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 26px 0 18px; }

/* ---------------------------------------------------------------- apertura */
.hero { min-height: 100svh; display: flex; align-items: center; padding: 110px 0 90px; overflow: hidden; text-align: center; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-velo { position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at 50% 45%, rgba(4, 6, 7, .45), rgba(4, 6, 7, .82) 72%), linear-gradient(180deg, rgba(4, 6, 7, .55), rgba(4, 6, 7, .15) 30%, rgba(7, 11, 13, .94) 92%, var(--notte)); }
.hero .titolo { font: 400 clamp(52px, 9vw, 118px)/.95 var(--titoli); color: var(--ottone-chiaro); text-shadow: 0 4px 30px rgba(0, 0, 0, .85); margin: 14px 0 4px; letter-spacing: .01em; }
.hero .sotto { font: 700 clamp(15px, 1.6vw, 20px)/1.2 var(--etichette); letter-spacing: .32em; color: var(--marcio); text-shadow: 0 0 18px rgba(94, 240, 180, .35); margin-bottom: 22px; }
.hero h1 { font-family: var(--corsivo); font-size: clamp(24px, 3vw, 36px); color: var(--osso); margin: 6px 0 14px; text-shadow: 0 3px 16px rgba(0, 0, 0, .8); text-wrap: balance; }
.hero-sub { font-size: clamp(18px, 1.7vw, 21px); max-width: 780px; margin: 0 auto; color: var(--osso); text-shadow: 0 2px 10px rgba(0, 0, 0, .85); }
.chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 0 0 14px; }
.chips li { font: 700 14px/1 var(--etichette); letter-spacing: .06em; padding: 9px 13px 8px; background: rgba(7, 11, 13, .75); border: 1px solid rgba(201, 162, 90, .4); color: var(--osso); }
.nota { font-size: 15px; color: var(--osso2); margin: 4px auto 0; max-width: 640px; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.nota-video { font-size: 13px; color: var(--osso2); opacity: .85; margin-top: 8px; }
.scendi { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 6px 14px; text-decoration: none; color: var(--ottone-chiaro); font: 700 13px/1 var(--etichette); letter-spacing: .32em; text-indent: .32em; }
.scendi svg { width: 26px; height: 18px; overflow: visible; animation: scendi 2s ease-in-out infinite; }
.scendi path { fill: none; stroke: var(--ottone-chiaro); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes scendi { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------------------------------------------------------------- sfondi delle sezioni */
.notte { background: radial-gradient(ellipse at 15% 0%, rgba(94, 240, 180, .07), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(201, 162, 90, .07), transparent 50%), var(--notte); }
.notte2 { background: linear-gradient(180deg, var(--notte), var(--notte2)); }
.carta { background: radial-gradient(ellipse at 50% 0%, #f6efdc, transparent 70%), var(--carta); color: var(--inchiostro); }
.carta .lead, .carta p { color: var(--inchiostro2); }
.carta b { color: #6b3a10; }
.carta .kicker { color: #6b3a10; border-color: rgba(107, 58, 16, .4); background: rgba(107, 58, 16, .06); }
.carta h2, .carta h3 { color: #2b1a08; }

/* ---------------------------------------------------------------- filmati e testi */
.due { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(26px, 4vw, 56px); align-items: center; }
.video { position: relative; overflow: hidden; background: var(--abisso); aspect-ratio: 16 / 9;
  box-shadow: 0 0 0 1px var(--ottone-scuro), 0 0 0 5px rgba(201, 162, 90, .16), var(--ombra); }
.video video { width: 100%; height: 100%; object-fit: cover; }
/* telefono in verticale: il filmato girato dal telefono (9:16), alto al massimo quasi uno schermo */
.video.verticale { aspect-ratio: 9 / 16; width: min(100%, calc(76svh * 9 / 16)); margin-inline: auto; }
.schermata picture { display: contents; }
@media (max-width: 699px) and (orientation: portrait) {
  .schermata:has(source) img { aspect-ratio: 9 / 16; }
}
.rec { position: absolute; left: 12px; top: 12px; font: 700 12px/1 var(--etichette); letter-spacing: .14em; color: #fff; background: rgba(4, 6, 7, .75);
  padding: 7px 10px 6px 24px; pointer-events: none; }
.rec::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; }
.elenco { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.elenco li { position: relative; padding-left: 28px; }
.elenco li::before { content: "✦"; position: absolute; left: 4px; top: 0; color: var(--marcio); }

/* ---------------------------------------------------------------- lo SLIDER «Scopri il gioco» (skill 35 §12-ter) */
.scopri .linguette { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px 2px 16px; margin: 6px 0 4px; }
@media (min-width: 900px) { .scopri .linguette { justify-content: center; } }
.scopri .linguette::-webkit-scrollbar { display: none; }
.scopri .linguette button { flex: 0 0 auto; font: 700 15px/1 var(--etichette); letter-spacing: .1em; color: var(--osso); cursor: pointer;
  background: rgba(7, 11, 13, .7); border: 1px solid rgba(201, 162, 90, .45); padding: 12px 18px; transition: background .2s, color .2s; }
.scopri .linguette button:hover { border-color: var(--ottone-chiaro); }
.scopri .linguette button[aria-selected="true"] { color: var(--testo-oro); background: linear-gradient(180deg, #ffe9a8, #e2b55a 45%, #a9772a); border-color: #5a3a10; }
.scopri .binario { --rientro: max(16px, calc(50vw - 590px)); position: relative; display: flex; align-items: flex-start; gap: 18px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin: 0 calc(50% - 50vw); padding: 8px var(--rientro) 20px;
  scroll-padding: 0 var(--rientro); transition: height .35s ease; }
.scopri .binario::-webkit-scrollbar { display: none; }
.scopri .binario.trascina { scroll-snap-type: none; cursor: grabbing; user-select: none; }
@media (hover: hover) and (pointer: fine) { .scopri .binario { cursor: grab; } }
.scopri .lastra { flex: 0 0 88%; scroll-snap-align: start; position: relative; overflow: hidden; border: 1px solid rgba(201, 162, 90, .3);
  padding: 32px 30px; background: linear-gradient(180deg, var(--notte3), var(--notte2)); box-shadow: var(--ombra); transition: opacity .3s, border-color .3s; }
.scopri .lastra:not(.attiva) { opacity: .4; cursor: pointer; }
.scopri .lastra.attiva { border-color: rgba(240, 215, 154, .6); }
.scopri .lastra h2 { font-size: clamp(28px, 3.3vw, 42px); }

/* ---------------------------------------------------------------- la SQUADRA */
.squadra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.agente { text-align: center; }
.agente img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 3px #3a2a10, 0 0 0 6px var(--ottone), 0 14px 28px rgba(0, 0, 0, .5); filter: sepia(.15); }
.agente h3 { font-size: 20px; margin-top: 14px; color: #2b1a08; }
.agente span { display: block; font: 700 13px/1.2 var(--etichette); letter-spacing: .14em; color: #6b3a10; margin-top: 4px; }

/* ---------------------------------------------------------------- SCHERMATE + vista grande */
.schermate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; margin-top: 44px; }
.schermata { display: flex; flex-direction: column; position: relative; padding: 0; border: 0; cursor: zoom-in; overflow: hidden; background: var(--abisso);
  box-shadow: 0 0 0 1px var(--ottone-scuro), 0 12px 28px rgba(0, 0, 0, .45); transition: transform .2s, box-shadow .2s; }
.schermata:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--ottone), 0 16px 34px rgba(0, 0, 0, .55); }
.schermata img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.schermata span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; text-align: left; font: 700 15px/1.3 var(--etichette); color: var(--osso);
  background: linear-gradient(180deg, transparent, rgba(4, 6, 7, .94)); }
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; background: rgba(2, 4, 5, .94); }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(1600px, 100%); max-height: calc(100vh - 110px); width: auto; height: auto; box-shadow: 0 0 0 1px var(--ottone-scuro), var(--ombra); }
.lightbox p { margin: 0; font: 700 16px/1.3 var(--etichette); color: var(--osso); text-align: center; }
.lb-chiudi { position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; font: 400 28px/1 var(--titoli);
  color: var(--testo-oro); background: radial-gradient(circle at 35% 30%, #ffe8a6, var(--ottone) 70%); box-shadow: 0 0 0 2px #5a3a10; }

/* ---------------------------------------------------------------- TUTTO IL RESTO (8 tessere: 4/2/1 colonne) */
.tessere { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; }
.tessera { padding: 20px 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); border: 1px solid rgba(201, 162, 90, .25); }
.tessera i { font-style: normal; font-size: 28px; display: block; margin-bottom: 10px; }
.tessera h3 { font-size: 20px; margin-bottom: 6px; }
.tessera p { font-size: 16px; color: var(--osso2); margin: 0; }

/* ---------------------------------------------------------------- GRATIS e COMPLETO */
.prezzi { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; max-width: 920px; margin-left: auto; margin-right: auto; }
.prezzo { padding: 26px 24px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(107, 58, 16, .3); }
.prezzo.pieno { background: #2b1f12; border-color: #a9772a; color: var(--osso); }
.prezzo.pieno h3 { color: var(--ottone-chiaro); } .prezzo.pieno p { color: var(--osso2); }
.prezzo h3 { font-size: 28px; margin-bottom: 8px; }
.prezzo p { margin: 0; }

/* ---------------------------------------------------------------- FAQ */
.faq { max-width: 860px; margin: 30px auto 0; display: grid; gap: 10px; }
.faq button { width: 100%; text-align: left; cursor: pointer; border: 0; padding: 18px 54px 18px 20px; position: relative;
  font: 700 18px/1.3 var(--etichette); letter-spacing: .03em; color: var(--osso); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, .28); }
.faq button::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 400 26px/1 var(--titoli); color: var(--ottone-chiaro); transition: transform .25s; }
.faq .aperta button::after { transform: translateY(-50%) rotate(45deg); }
.risposta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s; }
.risposta > div { overflow: hidden; }
.risposta p { padding: 12px 20px 6px; margin: 0; color: var(--osso2); }
.aperta .risposta { grid-template-rows: 1fr; }

/* ---------------------------------------------------------------- FINALE e piede */
.finale { overflow: hidden; text-align: center; }
.finale-fondo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .45; }
.finale::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(7, 11, 13, .5), rgba(7, 11, 13, .96) 75%); }
.finale .wrap { z-index: 3; }
footer { background: var(--abisso); color: var(--osso2); text-align: center; padding: 34px 16px 96px; font-size: 14px; }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-bottom: 12px; font-family: var(--etichette); font-size: 16px; }
footer a { color: var(--osso); }
footer p { margin: 4px 0; }
.barra { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; transform: translateY(140%); transition: transform .35s; display: none; will-change: transform; backface-visibility: hidden; }
.barra.su { transform: none; }
.barra a { display: block; text-align: center; text-decoration: none; padding: 15px; font: 700 18px/1 var(--etichette); letter-spacing: .08em; color: var(--testo-oro);
  background: linear-gradient(180deg, #ffe9a8, #e2b55a 45%, #a9772a); box-shadow: 0 0 0 2px #5a3a10, 0 10px 26px rgba(0, 0, 0, .5); }

/* comparse (le toglie il JS: senza JS tutto resta visibile, skill 35 §1) */
[data-rv] { will-change: opacity, transform; }

@media (max-width: 1000px) { .tessere, .squadra { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) { .due { grid-template-columns: 1fr; } .schermate { grid-template-columns: 1fr 1fr; } .prezzi { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  body { font-size: 17px; }
  .nav .marchio { font-size: 20px; }
  .nav .btn { display: none; }
  .barra { display: block; }
  .hero { padding-top: 90px; }
  .cta .btn { width: 100%; }
  .scendi { display: none; }
  .scopri .lastra { flex-basis: calc(100% - 36px); padding: 20px 14px; }
  .scopri .binario { gap: 12px; }
  .scopri .linguette button { font-size: 14px; padding: 10px 13px; }
  /* le schermate sul telefono: una fila da scorrere col dito invece di una colonna lunga */
  .schermate { display: flex; gap: 40px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 34px -16px 0; padding: 18px 30px 24px; scroll-padding: 0 30px; }
  .schermate::-webkit-scrollbar { display: none; }
  .schermate > .schermata { flex: 0 0 80%; scroll-snap-align: start; }
}
@media (max-width: 460px) { .tessere { grid-template-columns: 1fr; } .squadra { gap: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .scendi svg { animation: none; }
  .scopri .lastra:not(.attiva) { opacity: 1; } .scopri .binario { transition: none; }
  [data-rv] { opacity: 1 !important; transform: none !important; }
}

/* ================================================================ EFFETTI (26-10, utente: «landing dinamica, con effetti wow»)
   Tutti a codice, legati al tema: pioggia, lampi TENUI (mai flash pieni: c'è chi soffre di epilessia fotosensibile; spenti con
   «riduci animazioni»), nebbia, la lanterna che segue il mouse, la marea che sale scorrendo, la MENTE che cede (ritratti veri,
   tentacoli, colori che marciscono), le foto sparse che si mettono in ordine, il mare che sale sulla chiusura. */
.hero .pioggia, .hero .nebbia, .hero .lampo, .hero .lanterna { position: absolute; inset: 0; pointer-events: none; }
.hero .pioggia { z-index: 1; opacity: .38; background-image: repeating-linear-gradient(104deg, transparent 0 22px, rgba(200, 220, 230, .22) 22px 23px, transparent 23px 47px),
  repeating-linear-gradient(98deg, transparent 0 37px, rgba(200, 220, 230, .14) 37px 38px, transparent 38px 71px); background-size: 200px 420px, 260px 520px; animation: pioggia .55s linear infinite; }
@keyframes pioggia { to { background-position: -60px 420px, -70px 520px; } }
.hero .nebbia { z-index: 1; overflow: hidden; }
.hero .nebbia i { position: absolute; left: -50%; width: 200%; height: 46%; bottom: -6%; opacity: .5; filter: blur(30px);
  background: radial-gradient(ellipse at 20% 60%, rgba(150, 190, 180, .35), transparent 55%), radial-gradient(ellipse at 70% 40%, rgba(130, 170, 165, .3), transparent 50%); animation: nebbia 38s linear infinite alternate; }
.hero .nebbia i + i { bottom: 18%; height: 34%; opacity: .32; animation-duration: 55s; animation-direction: alternate-reverse; }
@keyframes nebbia { to { transform: translateX(25%); } }
.hero .lampo { z-index: 1; background: radial-gradient(ellipse at 70% 10%, rgba(210, 235, 255, .55), rgba(150, 200, 230, .12) 60%, transparent); opacity: 0; transition: opacity .08s; }
.hero .lampo.on { opacity: .42; }
.hero .lanterna { z-index: 1; background: radial-gradient(circle 260px at var(--lx, 50%) var(--ly, 40%), rgba(255, 214, 140, .16), rgba(255, 200, 120, .05) 45%, transparent 70%); mix-blend-mode: screen; }
.hero .titolo.onde { animation: annega 7s ease-in-out infinite; }
@keyframes annega { 0%, 100% { text-shadow: 0 4px 30px rgba(0, 0, 0, .85), 0 0 0 rgba(94, 240, 180, 0); transform: translateY(0); }
  50% { text-shadow: 0 4px 30px rgba(0, 0, 0, .85), 0 0 34px rgba(94, 240, 180, .35); transform: translateY(-3px); } }
.hero .wrap { will-change: transform, opacity; }
.hero-video { will-change: transform; }

/* la MAREA nella barra in alto: sale scorrendo la pagina */
.nav .marea { display: flex; align-items: center; gap: 8px; font: 700 13px/1 var(--etichette); letter-spacing: .12em; color: var(--marcio); opacity: 0; transition: opacity .4s; }
.nav.piena .marea { opacity: 1; }
.nav .marea i { display: block; width: 90px; height: 6px; background: rgba(94, 240, 180, .14); box-shadow: inset 0 0 0 1px rgba(94, 240, 180, .3); position: relative; overflow: hidden; }
.nav .marea s { position: absolute; inset: 0 auto 0 0; width: var(--marea, 10%); background: linear-gradient(90deg, #1d6a4a, var(--marcio)); box-shadow: 0 0 10px var(--marcio); transition: width .3s; }
.nav .marea em { font-style: normal; color: var(--osso); min-width: 34px; }
@media (max-width: 700px) { .nav .marea i { width: 56px; } .nav .marea b { display: none; } }

/* la MENTE: la sezione marcisce con --m (0 lucido → 3 spezzato) */
.abisso { background: radial-gradient(ellipse at 50% 30%, rgba(94, 240, 180, calc(var(--m) * .045)), transparent 65%), linear-gradient(180deg, var(--notte2), #071210 70%, var(--notte)); overflow: hidden; }
.abisso::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; box-shadow: inset 0 0 calc(80px + var(--m) * 90px) calc(var(--m) * 30px) rgba(0, 0, 0, .9); }
.abisso h2 { color: color-mix(in srgb, var(--ottone-chiaro), var(--marcio) calc(var(--m) * 28%)); }
.tentacoli { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
/* (26-10 sera, utente: «i tentacoli falli più come nel gioco») i path li disegna landing.js (tentacoliMente), copia del
   disegno di gioco/src/interfaccia/tentacoli.js: affusolati, con le ventose e l'alone verde */
@keyframes ondeggia { to { transform: rotate(1.6deg) translateX(8px); } }
.mente { max-width: 640px; margin: 26px auto 0; text-align: center; padding: 18px 20px 14px; background: rgba(4, 8, 7, .65); border: 1px solid rgba(94, 240, 180, calc(.2 + var(--m) * .15)); position: relative; z-index: 3; }
.mente-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 700 15px/1 var(--etichette); letter-spacing: .14em; }
.mente-testa b { color: var(--ottone-chiaro); font-weight: 700; }
.mente-stato { font: 400 26px/1 var(--titoli); color: color-mix(in srgb, var(--osso), var(--marcio) calc(var(--m) * 33%)); letter-spacing: .04em; text-shadow: 0 0 calc(var(--m) * 8px) rgba(94, 240, 180, .6); }
.mente input[type=range] { width: 100%; margin: 14px 0 6px; accent-color: #3fb886; height: 28px; cursor: pointer; }
.mente-tacche { display: flex; justify-content: space-between; font: 700 12px/1 var(--etichette); letter-spacing: .1em; color: var(--osso2); }
.mente-desc { margin: 12px 0 4px; font-family: var(--corsivo); font-size: 19px; color: var(--osso); min-height: 2.6em; }
.mente-nota { margin: 0; font: 700 12px/1.3 var(--etichette); letter-spacing: .08em; color: var(--osso2); opacity: .8; }
.abisso .squadra { position: relative; z-index: 3; }
.abisso .agente h3 { color: var(--ottone-chiaro); }
.abisso .agente span { color: var(--marcio); }
.volto { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #1a140a, 0 0 0 6px color-mix(in srgb, var(--ottone), var(--marcio) calc(var(--m) * 30%)), 0 0 calc(var(--m) * 16px) rgba(94, 240, 180, .5), 0 14px 28px rgba(0, 0, 0, .55);
  animation: trema .12s steps(2) infinite; animation-play-state: var(--trema, paused); }
.volto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; filter: none;
  opacity: clamp(0, calc(var(--m) - var(--l) + 1), 1); }   /* lo stadio l compare fra l-1 e l, e resta sotto i seguenti */
.volto img:first-child { opacity: 1; }
@keyframes trema { 50% { transform: translate(calc(var(--m) * .5px), calc(var(--m) * -.4px)) rotate(calc(var(--m) * .2deg)); } }

/* le FOTO sparse sul tavolo: si raddrizzano scorrendo (landing.js «mess») */
.schermata[data-mess] { will-change: transform, opacity; }

/* il MARE che sale sulla chiusura */
.mare { position: absolute; left: 0; right: 0; bottom: 0; height: var(--mare, 0px); z-index: 2; pointer-events: none; }
/* ‼️ increspature: con una tessera da 640 px ripetuta si vedevano i bordi ogni 640 px (anche con stitchTiles e frequenze
   intere): ora UNA tessera da 2800 px, più larga dello schermo, che va avanti e indietro invece di ripetersi.
   (26-10 notte) tre strati d'onde che scorrono senza fine (svg largo due periodi, spostato di metà), schiuma sulle creste,
   acqua che lascia trasparire la scena in alto e diventa nera in fondo, increspature e il riflesso della lanterna */
.mare .onda { position: absolute; left: 0; width: 200%; height: 160px; animation: onda-scorre 38s linear infinite; }
.mare .o1 { top: -104px; animation-duration: 52s; animation-direction: reverse; }
.mare .o2 { top: -86px; animation-duration: 38s; }
.mare .o3 { top: -66px; animation-duration: 27s; }
.mare .onda path { vector-effect: non-scaling-stroke; }
.mare .o1 .acqua { fill: rgba(22, 60, 54, .55); } .mare .o1 .schiuma { fill: none; stroke: rgba(150, 235, 205, .16); stroke-width: 1.2; }
.mare .o2 .acqua { fill: rgba(11, 36, 32, .82); } .mare .o2 .schiuma { fill: none; stroke: rgba(160, 240, 210, .24); stroke-width: 1.4; }
.mare .o3 .acqua { fill: #061311; } .mare .o3 .schiuma { fill: none; stroke: rgba(200, 245, 225, .34); stroke-width: 1.6; filter: drop-shadow(0 0 3px rgba(94, 240, 180, .35)); }
.mare::after { content: ""; position: absolute; inset: 0; top: 92px; z-index: -1; background: linear-gradient(180deg, #061311, #040b0a 45%, #020605); }
.mare .increspa { position: absolute; inset: 70px 0 0; opacity: .55; mix-blend-mode: screen; animation: increspa 22s ease-in-out infinite alternate;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2800' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0016 0.09' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .85  0 0 0 0 .75  2.2 0 0 0 -1.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 50% 0 / 2800px 220px repeat-y;
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .5) 50%, transparent); mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .5) 50%, transparent); }
.mare .riflesso { position: absolute; left: 50%; top: 58px; bottom: 0; width: min(260px, 40%); transform: translateX(-50%); mix-blend-mode: screen;
  background: repeating-linear-gradient(180deg, rgba(240, 215, 154, .55) 0 2px, transparent 2px 7px, rgba(240, 215, 154, .25) 7px 8px, transparent 8px 15px);
  -webkit-mask-image: radial-gradient(50% 70% at 50% 10%, #000, transparent); mask-image: radial-gradient(50% 70% at 50% 10%, #000, transparent);
  animation: riflesso 3.2s ease-in-out infinite alternate; }
@keyframes onda-scorre { to { transform: translateX(-50%); } }
@keyframes increspa { from { background-position: calc(50% - 220px) 0; } to { background-position: calc(50% + 220px) 0; } }
@keyframes riflesso { 0% { opacity: .55; transform: translateX(-50%) scaleX(.85); } 50% { opacity: .9; } 100% { opacity: .65; transform: translateX(-50%) scaleX(1.08) translateY(3px); } }
.finale .wrap { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .hero .pioggia, .hero .nebbia i, .hero .titolo.onde, .tentacoli path, .mare svg, .mare i, .volto { animation: none !important; }
  .hero .lampo { display: none; }
}

/* ================================================================ le SCENE fra le sezioni (palco fermo, --p da 0 a 1 scorrendo) */
.scena { height: 280vh; padding: 0; background: var(--abisso); }
.scena-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.scena-palco::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0, 0, 0, .75)), rgba(0, 0, 0, clamp(0, calc((var(--p) - .86) * 7), 1)); }
/* l'immagine si apre come una MACCHIA D'INCHIOSTRO dal centro e si avvicina lentamente */
.scena-fondo { position: absolute; inset: -4%; z-index: 1;
  -webkit-mask-image: radial-gradient(circle at 50% 55%, #000 calc(var(--p) * 190%), transparent calc(var(--p) * 190% + 22%));
  mask-image: radial-gradient(circle at 50% 55%, #000 calc(var(--p) * 190%), transparent calc(var(--p) * 190% + 22%));
  transform: scale(calc(1.22 - var(--p) * .2)) translateY(calc(var(--p) * -2%)); }
.scena-fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); }
.scena-fondo img.dopo { opacity: clamp(0, calc((var(--p) - .42) * 3), 1); }
/* foto e documenti che arrivano di sbieco, come lasciati cadere sul tavolo */
.scena-foto { --q: clamp(0, calc((var(--p) - var(--d)) * 3.2), 1); position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; z-index: 2;
  padding: 10px 10px 26px; background: #e9dfc6; box-shadow: 0 30px 60px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .3);
  opacity: var(--q); transform: translate3d(calc((1 - var(--q)) * 30vw), calc((1 - var(--q)) * 40px), 0) rotate(calc(var(--r) + (1 - var(--q)) * 24deg)) scale(calc(1.25 - var(--q) * .25)); }
.scena-foto::before { content: ""; position: absolute; top: -12px; left: 38%; width: 70px; height: 24px; background: rgba(232, 220, 180, .55); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.scena-foto img { width: 100%; height: auto; filter: sepia(.25) contrast(1.05); }
/* le righe: una alla volta, dal buio */
.scena-righe { position: absolute; left: 0; right: 0; bottom: 14vh; z-index: 5; text-align: center; padding: 0 16px; pointer-events: none; }
.scena-righe p { --a: clamp(0, calc((var(--p) - .22 - var(--k) * .17) * 6), 1); margin: 0 auto 6px; max-width: 900px;
  font: 400 clamp(30px, 5.2vw, 70px)/1.08 var(--titoli); color: var(--osso); text-shadow: 0 4px 24px #000, 0 0 2px #000;
  opacity: var(--a); filter: blur(calc((1 - var(--a)) * 10px)); transform: translateY(calc((1 - var(--a)) * 26px)); letter-spacing: calc((1 - var(--a)) * .2em); }
.scena-righe p:last-child { color: var(--ottone-chiaro); }
.scena-mare .scena-righe p:last-child { color: var(--marcio); text-shadow: 0 4px 24px #000, 0 0 26px rgba(94, 240, 180, .4); }
@media (max-width: 700px) {
  .scena { height: 230vh; }
  .scena-foto { --w: 46vw !important; padding: 6px 6px 16px; }
  .scena-foto:nth-of-type(1) { left: 50% !important; top: 10% !important; }
  .scena-foto:nth-of-type(2) { left: 6% !important; top: 30% !important; }
  .scena-righe { bottom: 10vh; }
}
@media (prefers-reduced-motion: reduce) {
  .scena { height: auto; }
  .scena-palco { position: relative; height: 80vh; }
  .scena-fondo { -webkit-mask-image: none; mask-image: none; transform: none; }
  .scena-foto, .scena-righe p { opacity: 1; filter: none; transform: rotate(var(--r)); letter-spacing: 0; }
  .scena-fondo img.dopo { opacity: 0; } .scena-palco::after { background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0, 0, 0, .75)); }
}

/* ================================================================ CORNICI DIPINTE (26-10, utente: «stile di cornici e contenitori
   coerente col gioco; no linee semplici, nemmeno i pulsanti»). I pezzi sono QUELLI DEL GIOCO (/ui/*.webp, 9 fette come in
   src/campagna/interfaccia-img.css): pannello d'ottone con le gemme, verderame per la mente, carta bruciata, piastre dei
   bottoni, medaglione con l'occhio, ottagono. ‼️ Bottoni smussati: fette ALTE METÀ e testo a ≥ 0,63 × altezza dai bordi
   (skill 47 §3), se no la punta stirata si deforma e la scritta tocca gli smussi. */
.btn, .linguette button, .kicker, .chips li, .faq button, .tessera, .lastra, .mente, .prezzo, .video, .schermata, .scopri .frecce button, .lb-chiudi { isolation: isolate; }
/* PULSANTI: la piastra dipinta, niente sfondo né bordo CSS */
.btn { --bh: 60px; position: relative; min-height: var(--bh); padding: 6px calc(var(--bh) * .78); border-radius: 0; background: none !important; box-shadow: none !important;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid transparent;
  border-image: url("/ui/bottone_oro.webp") 87 110 fill / 50% calc(var(--bh) * .63) stretch; }
.btn-oro { color: #1a0c02; text-shadow: 0 1px 0 rgba(255, 236, 170, .5); }
.btn-verde::before { border-image-source: url("/ui/bottone_verde.webp"); }
.btn-verde { color: #f1fff6; text-shadow: 0 1px 0 #03200b, 0 0 3px #03200b, 0 0 6px rgba(2, 30, 10, .8); }
/* (26-10 sera) luce sulla piastra, non sul pulsante intero; niente sollevamento a mezzi pixel (smussi deformati) */
.btn:hover { filter: none; transform: none; }
.btn:hover::before { filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .6)) brightness(1.1); }
.nav .btn { --bh: 46px; padding: 4px calc(var(--bh) * .78); }
.barra a { --bh: 54px; position: relative; isolation: isolate; background: none; box-shadow: none; padding: 17px calc(var(--bh) * .78); filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .6)); }
.barra a::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid transparent; border-image: url("/ui/bottone_oro.webp") 87 110 fill / 50% calc(var(--bh) * .63) stretch; }
/* linguette dello slider e FAQ: piastre scure; la scelta in ottone */
.scopri .linguette button { --bh: 46px; position: relative; background: none; border: 0; padding: 0 calc(var(--bh) * .74); min-height: var(--bh); color: var(--osso); text-shadow: 0 1px 0 #000, 0 0 4px #000; }
.scopri .linguette button::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid transparent; border-image: url("/ui/bottone_scuro.webp") 87 110 fill / 50% calc(var(--bh) * .63) stretch; }
.scopri .linguette button[aria-selected="true"] { background: none; color: #1a0c02; text-shadow: 0 1px 0 rgba(255, 236, 170, .5); }
.scopri .linguette button[aria-selected="true"]::before { border-image-source: url("/ui/bottone_oro.webp"); }
/* etichette (kicker) e fatti dell'apertura: piccole targhe */
.kicker, .chips li { --bh: 34px; position: relative; border: 0; background: none; padding: 0 calc(var(--bh) * .72); min-height: var(--bh); display: inline-flex; align-items: center;
  color: var(--ottone-chiaro); text-shadow: 0 1px 0 #000, 0 0 4px #000; }
.kicker::before, .chips li::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid transparent; border-image: url("/ui/bottone_scuro.webp") 87 110 fill / 50% calc(var(--bh) * .63) stretch; }
.carta .kicker { color: var(--ottone-chiaro); background: none; }
/* PANNELLI: ottone con le gemme agli angoli */
.lastra, .tessera, .prezzo.pieno, .faq button { position: relative; border: 0 !important; background: none !important; box-shadow: none; }
.lastra::before, .tessera::before, .prezzo.pieno::before, .faq button::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid transparent;
  border-image: url("/ui/pannello.webp") 150 fill / 28px stretch; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.scopri .lastra { padding: 44px 40px; }
.scopri .lastra.attiva::before { filter: drop-shadow(0 0 18px rgba(240, 215, 154, .25)) drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.tessera { padding: 32px 28px; }
.tessera::before, .faq button::before { border-image-width: 20px; }
.faq button { padding: 22px 60px 22px 28px; }
.prezzo.pieno { padding: 38px 36px; }
/* la carta bruciata per il «gratis» */
.prezzo:not(.pieno) { position: relative; background: none; border: 0; padding: 42px 40px; }
.prezzo:not(.pieno)::before { content: ""; position: absolute; inset: -6px; z-index: -1; border: 1px solid transparent; border-image: url("/ui/carta.webp") 140 fill / 34px stretch; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .3)); }
/* la MENTE: il pannello verderame (la follia) */
.mente { border: 0; background: none; padding: 36px 40px 30px; }
.mente::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid transparent; border-image: url("/ui/pannello_verderame.webp") 150 fill / 28px stretch;
  filter: drop-shadow(0 0 calc(var(--m) * 10px) rgba(94, 240, 180, .35)); }
/* FILMATI e SCHERMATE: cornice d'ottone sopra l'immagine (il centro della cornice resta vuoto: niente «fill») */
.video, .schermata { box-shadow: 0 18px 40px rgba(0, 0, 0, .6) !important; overflow: visible; }
/* (26-10 sera, utente: «controlla centratura e visibilità di immagini e video nei box») la cornice sta FUORI: prima, a
   22 px con 6 di sporgenza, copriva 16 px dell'immagine su ogni lato (titolo e barra laterale tagliati) */
.video::after, .schermata::after { content: ""; position: absolute; inset: -14px; z-index: 3; pointer-events: none; border: 1px solid transparent;
  border-image: url("/ui/pannello.webp") 150 / 17px stretch; }
.video video { position: relative; z-index: 1; }
.schermata img { position: relative; z-index: 1; } .schermata span { z-index: 2; padding: 26px 18px 14px; }
/* i RITRATTI dentro il medaglione con l'occhio */
.volto { overflow: visible; border-radius: 50%; box-shadow: none !important; }
.volto img { inset: 9%; width: 82%; height: 82%; border-radius: 50%; }
.volto::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: url("/ui/medaglione.webp") center / contain no-repeat;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .6)) drop-shadow(0 0 calc(var(--m) * 8px) rgba(94, 240, 180, .45)) hue-rotate(calc(var(--m) * 18deg)) saturate(calc(1 - var(--m) * .12)); }
/* CHIUSURA: l'ottagono del gioco */
.lb-chiudi { background: url("/ui/ottagono.webp") center / contain no-repeat !important; box-shadow: none !important; color: var(--ottone-chiaro);
  width: 60px; height: 60px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); }
.lb-chiudi { background: url("/ui/chiudi.webp") center / contain no-repeat !important; font-size: 0; }
.nav .marea i { box-shadow: inset 0 0 0 1px rgba(201, 162, 90, .5), 0 0 0 2px #1a140a; }
@media (max-width: 700px) {
  .btn { --bh: 56px; } .scopri .lastra { padding: 32px 22px; } .tessera { padding: 28px 24px; } .mente { padding: 30px 24px 24px; }
  .prezzo:not(.pieno), .prezzo.pieno { padding: 34px 28px; }
}
.scena-righe { padding: 34px 16px 30px; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(0, 0, 0, calc(var(--p) * .9)), transparent 72%); }   /* le righe leggibili anche sopra le foto */
/* il CURSORE della mente: binario d'ottone che si riempie di verde, manopola = il medaglione del gioco */
.mente input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; height: 40px; }
.mente input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 6px; background: linear-gradient(90deg, #1d6a4a, var(--marcio) calc(var(--m) / 3 * 100%), #2a2416 calc(var(--m) / 3 * 100%));
  box-shadow: 0 0 0 2px #3a2a10, 0 0 0 4px #a9772a, 0 0 0 5px #1a140a, inset 0 2px 3px rgba(0, 0, 0, .6); }
.mente input[type=range]::-moz-range-track { height: 10px; border-radius: 6px; background: #2a2416; box-shadow: 0 0 0 2px #3a2a10, 0 0 0 4px #a9772a; }
.mente input[type=range]::-moz-range-progress { height: 10px; border-radius: 6px; background: linear-gradient(90deg, #1d6a4a, var(--marcio)); }
.mente input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 40px; margin-top: -15px; border: 0; background: url("/ui/medaglione.webp") center / contain no-repeat, radial-gradient(circle, #0b1f19 55%, transparent 56%);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .7)) drop-shadow(0 0 calc(var(--m) * 5px) rgba(94, 240, 180, .7)); cursor: grab; }
.mente input[type=range]::-moz-range-thumb { width: 40px; height: 40px; border: 0; background: url("/ui/medaglione.webp") center / contain no-repeat, radial-gradient(circle, #0b1f19 55%, transparent 56%); cursor: grab; }
main > section { overflow-x: clip; }   /* le foto sparse (spostate di lato prima di entrare) allargavano la pagina a 768 px: clip, non hidden, così le scene restano ferme (sticky) */
@media (max-width: 460px) { .nav .marea { display: none; } .nav { gap: 8px; } .nav .marchio { font-size: 19px; } }   /* a 390 px «English» usciva dal bordo */

/* ================================================================ il SUONO: piastra del gioco, fissa in basso */
.suono { --bh: 48px; position: fixed; right: 18px; bottom: 18px; z-index: 70; display: inline-flex; align-items: center; gap: 10px; min-height: var(--bh);
  padding: 0 calc(var(--bh) * .74); border: 0; background: none; cursor: pointer; isolation: isolate; color: var(--osso);
  font: 700 15px/1 var(--etichette); letter-spacing: .1em; text-shadow: 0 1px 0 #000, 0 0 4px #000; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.suono::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid transparent; border-image: url("/ui/bottone_scuro.webp") 87 110 fill / 50% calc(var(--bh) * .63) stretch; }
.suono[aria-pressed="true"] { color: #1a0c02; text-shadow: 0 1px 0 rgba(255, 236, 170, .5); }
.suono[aria-pressed="true"]::before { border-image-source: url("/ui/bottone_oro.webp"); }
.suono i { font-style: normal; font-size: 20px; }
.suono i::before { content: "♪"; }
.suono[aria-pressed="false"] i { opacity: .55; }
/* finché il suono è spento la nota «chiama» piano */
.suono[aria-pressed="false"] { animation: chiama 3.2s ease-in-out infinite; }
@keyframes chiama { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@media (max-width: 700px) { .suono { bottom: 84px; right: 12px; --bh: 44px; } .suono span { display: none; } .suono { padding: 0 calc(var(--bh) * .7); } }
@media (prefers-reduced-motion: reduce) { .suono { animation: none !important; } }

/* ================================================================ la SEDE che cede al tocco, una stanza alla volta (utente 26-10) */
.quadro { position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; }
.quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; filter: saturate(.9) contrast(1.05); }
.stanza { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.stanza::after { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 50%, rgba(94, 240, 180, .55), rgba(20, 60, 45, .2) 55%, transparent 75%); mix-blend-mode: screen; }
.stanza.on { opacity: 1; animation: guasto .75s steps(1) 1; }
.stanza.on::after { animation: bagliore 1.1s ease-out 1; }
.stanza.fuori { transition: opacity 1.4s; }
.stanza.fuori.on { animation: none; }
@keyframes guasto { 0% { opacity: 0; } 12% { opacity: 1; filter: brightness(2.2) hue-rotate(40deg); } 22% { opacity: .15; } 34% { opacity: 1; filter: brightness(1.6); }
  48% { opacity: .5; } 60% { opacity: 1; filter: none; } 100% { opacity: 1; } }
@keyframes bagliore { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.scena-sede .scena-fondo.scuote { animation: scuote .28s linear 1; }
@keyframes scuote { 20% { translate: -6px 3px; } 40% { translate: 5px -4px; } 60% { translate: -3px -2px; } 80% { translate: 3px 2px; } }
.guasta { --bh: 56px; position: absolute; left: 50%; top: max(84px, 13vh); translate: -50% 0;   /* translate, non transform: l'animazione «chiama» usa transform */ z-index: 6; min-height: var(--bh); padding: 0 calc(var(--bh) * .78);
  border: 0; background: none; cursor: pointer; isolation: isolate; color: #f1fff6; font: 700 18px/1 var(--etichette); letter-spacing: .1em; white-space: nowrap;
  text-shadow: 0 1px 0 #03200b, 0 0 3px #03200b, 0 0 6px rgba(2, 30, 10, .8); filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .7)) drop-shadow(0 0 14px rgba(94, 240, 180, .35));
  opacity: clamp(0, calc((var(--p) - .08) * 6), 1); animation: chiama 2.6s ease-in-out infinite; }
.guasta::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid transparent; border-image: url("/ui/bottone_verde.webp") 87 110 fill / 50% calc(var(--bh) * .63) stretch; }
.guasta[aria-pressed="true"] { color: var(--osso); text-shadow: 0 1px 0 #000, 0 0 4px #000; animation: none; }
.guasta[aria-pressed="true"]::before { border-image-source: url("/ui/bottone_scuro.webp"); }
@media (max-width: 700px) { .guasta { --bh: 50px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .stanza.on { animation: none; } .scena-sede .scena-fondo.scuote { animation: none; } .guasta { animation: none; opacity: 1; } }
/* i lati del PC: (27-10, utente) la CARTA DELL'ISOLA dietro la sede, come nel gioco (prima lo stesso dipinto sfocato a 26 px) */
.scena-sede .scena-fondo::before { content: ""; position: absolute; inset: -40px; background: url("/ui/schermate/mappa_isola.jpg") center / cover; filter: blur(3px) brightness(.4) saturate(.65); }
.sotto-buio { position: absolute; left: -100vw; right: -100vw; top: 71%; bottom: -2%; z-index: 3; background: linear-gradient(180deg, rgba(4, 6, 7, 0), #040607 2.2%, #040607); pointer-events: none; }   /* il piano di sotto (poligono e caveau sigillato) resta SEMPRE al buio: fa parte della storia */

/* ================================================================ RITOCCHI dell'utente (26-10 sera) */
/* niente sezioni a sfondo CHIARO: le «carta» diventano notte; il foglio bruciato del «gratis» resta un foglio sul fondo scuro */
.carta { background: radial-gradient(ellipse at 50% 0%, rgba(201, 162, 90, .08), transparent 60%), linear-gradient(180deg, var(--notte2), var(--notte)); color: var(--osso); }
.carta h2, .carta h3 { color: var(--ottone-chiaro); }
.carta p, .carta .lead { color: var(--osso2); }
.carta b { color: var(--ottone-chiaro); }
.prezzo:not(.pieno) h3 { color: #2b1a08; } .prezzo:not(.pieno) p { color: var(--inchiostro2); }
/* le TESSERE: [icona dipinta][testo] affiancati, due colonne sul PC, una sul telefono */
.tessere { grid-template-columns: repeat(2, 1fr); gap: 18px 22px; }
.tessera { display: flex; align-items: center; gap: 20px; }
.tessera img { width: 96px; height: 96px; flex: none; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .6)); }
.tessera h3 { margin-bottom: 4px; }
@media (max-width: 700px) { .tessere { grid-template-columns: 1fr; } .tessera { gap: 14px; } .tessera img { width: 76px; height: 76px; } }
/* PULSANTI su due righe (titolo + sottotitolo): piastra più alta, così le scritte restano lontane dai bordi dipinti */
.btn:has(small) { --bh: 82px; padding-top: 12px; padding-bottom: 14px; gap: 4px; }
@media (max-width: 700px) { .btn:has(small) { --bh: 78px; } }
/* i QUATTRO protagonisti: in fila sul PC e sul telefono orizzontale; sul telefono verticale due per due, tutti dentro lo schermo
   insieme al cursore della mente */
.abisso .squadra { grid-template-columns: repeat(4, minmax(0, 220px)); justify-content: center; gap: 22px 28px; margin-top: 28px; }
@media (max-width: 700px) and (orientation: portrait) {
  .abisso { padding: 64px 0 40px; }
  .abisso .lead { font-size: 15px; line-height: 1.45; margin-bottom: 0; }
  .abisso h2 { font-size: 30px; margin: 8px 0 8px; }
  .mente { margin-top: 12px; padding: 22px 22px 16px; }
  .mente-stato { font-size: 21px; } .mente-desc { font-size: 15px; min-height: 2.4em; margin: 8px 0 0; } .mente-nota { display: none; }
  .abisso .squadra { grid-template-columns: repeat(2, minmax(0, 34vw)); gap: 8px 26px; margin-top: 14px; }
  .abisso .agente h3 { font-size: 15px; margin-top: 6px; } .abisso .agente span { font-size: 11px; margin-top: 2px; }
}
@media (max-height: 520px) and (orientation: landscape) { .abisso .squadra { grid-template-columns: repeat(4, minmax(0, 18vh)); } }
/* le tre foto del MARE sul telefono */
@media (max-width: 700px) { .scena-mare .scena-foto:nth-of-type(1) { left: 4% !important; top: 10% !important; } .scena-mare .scena-foto:nth-of-type(2) { left: 50% !important; top: 17% !important; }
  .scena-mare .scena-foto:nth-of-type(3) { left: 18% !important; top: 33% !important; } }
.kicker { padding-top: 7px; padding-bottom: 7px; line-height: 1.25; text-align: center; }   /* su due righe la scritta toccava i bordi dipinti */
@media (max-width: 460px) { .hero .kicker { font-size: 11px; letter-spacing: .06em; } }

/* ================================================================ IL DIORAMA DELL'APERTURA (26-10 sera)
   Strati dipinti: cielo e mare (cover), barche che derivano da destra a sinistra e beccheggiano, nebbia, il pontile con gli
   agenti in primo piano. --px/--py (-1…1: puntatore o giro da solo) e --sp (0…1: scorrimento) li scrive landing.js; ogni
   strato si sposta di quanto è vicino. */
.diorama { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0a1418; --px: 0; --py: 0; --sp: 0; }
.diorama > * { position: absolute; will-change: transform; }
.d-cielo { inset: -4%; transform: translate3d(calc(var(--px) * -8px), calc(var(--py) * -5px + var(--sp) * 30px), 0) scale(calc(1 + var(--sp) * .08)); }
.d-cielo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; }
.d-mare { inset: 0; transform: translate3d(calc(var(--px) * -18px), calc(var(--py) * -8px + var(--sp) * 60px), 0); }
.d-barca { position: absolute; top: var(--top); left: 0; width: var(--w); animation: d-deriva var(--dur) linear infinite; animation-delay: var(--rit); }
.d-barca.b1 { --top: 61%; --w: clamp(140px, 15vw, 270px); --dur: 95s; --rit: -38s; }
.d-barca.b2 { --top: 74%; --w: clamp(70px, 7vw, 125px); --dur: 70s; --rit: -12s; }   /* (utente 26-10) la scialuppa più piccola del peschereccio e più in basso: passava sopra le case */
.d-dondola { position: relative; animation: d-beccheggio 5.5s ease-in-out infinite; transform-origin: 50% 85%; }
.b2 .d-dondola { animation-duration: 4.2s; animation-delay: -1.3s; }
.d-dondola img { width: 100%; display: block; filter: brightness(.82) saturate(.9); }
/* la linea d'acqua: la carena «affonda» nel mare scuro (sfumatura in basso) */
.d-dondola::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -8%; height: 30%;
  background: radial-gradient(ellipse at 50% 30%, rgba(12, 28, 32, .9), rgba(12, 28, 32, .55) 50%, transparent 72%); }
@keyframes d-deriva { from { transform: translate3d(108vw, 0, 0); } to { transform: translate3d(-40vw, 0, 0); } }
@keyframes d-beccheggio { 0%, 100% { transform: translateY(0) rotate(-2.2deg); } 50% { transform: translateY(5px) rotate(2deg); } }
.d-nebbia { inset: 0; pointer-events: none; overflow: hidden; }
.d-nebbia i { position: absolute; left: -60%; width: 220%; filter: blur(26px); opacity: .55;
  background: repeating-radial-gradient(ellipse 22% 60% at 20% 50%, rgba(170, 196, 200, .22), transparent 70%); animation: d-nebbia 70s linear infinite; }
.d-nebbia.lontana i { top: 50%; height: 22%; }
.d-nebbia.vicina i { top: 70%; height: 26%; opacity: .45; animation-duration: 48s; animation-direction: reverse; }
@keyframes d-nebbia { from { transform: translateX(0); } to { transform: translateX(28%); } }
.d-molo { left: -15vw; bottom: -2%; width: min(50vw, 900px); transform: translate3d(calc(var(--px) * -34px), calc(var(--py) * -14px + var(--sp) * 140px), 0); }
.d-molo img { width: 100%; display: block; filter: brightness(.9); }
/* le lanterne: un alone caldo che trema (sopra la lanterna dipinta) */
.d-luce { position: absolute; left: var(--x); top: var(--y); width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 196, 110, .55), rgba(255, 160, 70, .18) 40%, transparent 70%); mix-blend-mode: screen; animation: d-trema 2.3s ease-in-out infinite; }
.d-luce.grande { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
@keyframes d-trema { 0%, 100% { opacity: .85; transform: scale(1); } 23% { opacity: .6; transform: scale(.94); } 41% { opacity: 1; transform: scale(1.06); } 67% { opacity: .72; } }
/* telefono in verticale: cielo alto, barche più piccole e più in basso, il pontile largo con gli agenti in vista */
@media (max-aspect-ratio: 4/5) {
  /* sul telefono il testo occupa lo schermo: la scena (pontile, agenti, barche) si apre SOTTO i pulsanti, scorrendo */
  .hero:has(.diorama) { padding-bottom: 52svh; }
  .d-cielo img { object-position: 50% 30%; }
  .d-barca.b1 { --top: 71%; --w: 40vw; --dur: 60s; }
  .d-barca.b2 { --top: 81%; --w: 19vw; --dur: 46s; }
  .d-molo { left: -45vw; width: 170vw; bottom: -1%; }
  .d-nebbia.lontana i { top: 66%; } .d-nebbia.vicina i { top: 82%; }
}
@media (prefers-reduced-motion: reduce) {
  .d-barca, .d-dondola, .d-nebbia i, .d-luce { animation: none !important; }
  .d-barca.b1 { transform: translate3d(52vw, 0, 0); } .d-barca.b2 { transform: translate3d(14vw, 0, 0); }
}
/* col diorama il velo scurisce solo dietro il testo: ai lati e in basso la scena si vede */
.hero:has(.diorama) .hero-velo { background: radial-gradient(ellipse 46% 44% at 50% 45%, rgba(4, 6, 7, .66), rgba(4, 6, 7, .3) 70%, rgba(4, 6, 7, .08)),
  linear-gradient(180deg, rgba(4, 6, 7, .45), transparent 20%, transparent 86%, var(--notte)); }
@media (max-aspect-ratio: 4/5) { .hero:has(.diorama) .hero-velo { background: linear-gradient(180deg, rgba(4, 6, 7, .7), rgba(4, 6, 7, .66) 62%, transparent 76%, transparent 92%, var(--notte)); } }
.hero:has(.diorama) .nota { text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, .95), 0 0 22px rgba(0, 0, 0, .8); }

/* (26-10 notte, utente: «niente frecce nello slider, metti i pallini sotto») un pallino d'ottone per scheda sotto lo slider;
   quello della scheda attiva si allunga e si accende. Il bottone è largo 32 px per il dito, il pallino sta nel ::before */
.scopri .slider { position: relative; }
.scopri .pallini { display: flex; justify-content: center; gap: 4px; margin-top: 18px; }
.scopri .pallini button { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.scopri .pallini button::before { content: ""; width: 11px; height: 11px; border-radius: 6px; background: radial-gradient(circle at 35% 30%, #8a7346, #3d321c);
  box-shadow: 0 0 0 1px rgba(201, 162, 90, .55), 0 2px 4px rgba(0, 0, 0, .6); transition: width .3s, background .3s, box-shadow .3s; }
.scopri .pallini button[aria-current]::before { width: 30px; background: linear-gradient(180deg, #ffe9a8, #e2b55a 50%, #a9772a);
  box-shadow: 0 0 0 1px #5a3a10, 0 0 12px rgba(240, 215, 154, .55); }
@media (hover: hover) { .scopri .pallini button:not([aria-current]):hover::before { background: radial-gradient(circle at 35% 30%, #d8b56a, #7a5c26); } }
.scopri .pallini button:focus-visible { outline: 2px solid var(--ottone-chiaro); outline-offset: 2px; border-radius: 8px; }
/* la VISTA GRANDE vale anche per i filmati; ⛶ = schermo intero vero */
.video { cursor: zoom-in; }
.lastra:not(.attiva) .video { cursor: pointer; }
.lightbox video { max-width: min(1600px, 100%); max-height: calc(100vh - 110px); width: auto; height: auto; background: #000; box-shadow: 0 0 0 1px var(--ottone-scuro), var(--ombra); }
.lightbox video[hidden], .lightbox img[hidden] { display: none; }
.lb-schermo { position: absolute; top: 14px; right: 72px; width: 46px; height: 46px; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: url("/ui/ottagono.webp") center / contain no-repeat; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.lb-schermo svg { width: 22px; height: 22px; fill: none; stroke: var(--ottone-chiaro); stroke-width: 2.4; stroke-linecap: round; }
.lightbox:fullscreen { padding: 0; background: #000; }
.lightbox:fullscreen img, .lightbox:fullscreen video { max-width: 100vw; max-height: 100vh; box-shadow: none; }
.lightbox:fullscreen p { display: none; }.scopri .slider { --rientro-f: max(16px, calc(50vw - 590px)); }
/* (26-10 sera, utente: «scritta decentrata») il testo della chiusura al centro come il titolo */
.finale .lead { margin-left: auto; margin-right: auto; }