/* ============================================================================
   SCHELETRO FRD - lo stile comune dei giochi web di fascia A
   (Scacchi, Dama, Forza 4, Mega Quiz - ottobre 2026)

   "Struttura identica, vestito diverso" (PROCEDURA_GIOCHI_WEB_FRD.md par. 10):
   qui c'e' la STRUTTURA - dove stanno regole, pausa, audio, conto alla
   rovescia, modulo contatti, marchio FRD - e non cambia da un gioco all'altro.
   Il VESTITO sono le variabili qui sotto, che ogni gioco riscrive da
   CONFIG.colori (personalizzazione.js) e nel suo tema.css.
   ========================================================================== */

:root {
  --sfondo:       #0D0B0B;
  --superficie:   #1C1414;
  --bordo:        #3A2C2C;
  --testo:        #FAF6F0;
  --testo-tenue:  #A99C93;
  --marchio:      #D92626;      /* il rosso FRD */
  --accento:      #F2C14E;
  --testo-su-marchio: #FFFFFF;
  --testo-su-accento: #1A1208;
  --ok:           #2FBF71;
  --errore:       #FF4D5E;
  --font:         system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-titolo:  var(--font);
  --raggio:       18px;
  --sopra:        env(safe-area-inset-top, 0px);
  --sotto:        env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--sfondo); color: var(--testo);
  font-family: var(--font);
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  /* Niente grassetto o corsivo FINTI: i font dei titoli spesso hanno un peso solo
     (Lilita One, Bungee) e il browser, chiesto il 900, li ingrosserebbe a mano
     sbavandoli (collaudo CROWN JUMP, 4/10/2026). */
  font-synthesis: none;
}
button { font-family: inherit; }

/* Lo sfondo illustrato sta dietro a tutto e non si muove con la scossa. */
#sfondo {
  position: fixed; inset: 0; z-index: 0;
  background: var(--sfondo) center / cover no-repeat;
}
#sfondo::after {               /* velo: tiene leggibile il gioco sopra l'illustrazione */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 75%, rgba(0,0,0,.6) 100%);
}

#app {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  touch-action: none;
}

/* ------------------------------------------------------------------ HUD */
#hud {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: max(10px, var(--sopra)) 14px 8px;
  width: 100%; max-width: 760px; margin: 0 auto;
  position: relative; z-index: 3;
}
#hud .marchio-hud { height: 36px; display: flex; align-items: center; flex: 0 0 auto; }
#hud .marchio-hud img { height: 100%; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
#voci { display: flex; gap: 14px; align-items: center; margin-left: auto; text-align: right; }
.voce { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.voce .etichetta { font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--testo-tenue); white-space: nowrap; }
.voce .valore {
  font-size: 21px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
  transition: transform .12s ease, color .12s ease;
  font-family: var(--font-titolo);
}
.voce .valore.pulsa { transform: scale(1.25); color: var(--accento); }
.voce .valore.allarme { color: var(--errore); animation: allarme .5s ease-in-out infinite alternate; }
@keyframes allarme { from { transform: scale(1); } to { transform: scale(1.12); } }
.tasti-hud { display: flex; gap: 8px; flex: 0 0 auto; }
.tondo {
  appearance: none; border: 0; cursor: pointer; padding: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--bordo), 0 4px 12px rgba(0,0,0,.3);
  color: var(--testo); font-size: 15px; line-height: 1;
  display: grid; place-items: center;
  transition: transform .1s ease;
}
.tondo:active { transform: scale(.9); }
.tondo[aria-pressed="false"] { color: var(--testo-tenue); }
.tondo[hidden] { display: none; }
@media (max-width: 400px) {
  #hud { gap: 6px; padding-left: 10px; padding-right: 10px; }
  #voci { gap: 9px; }
  .voce .etichetta { font-size: 9px; letter-spacing: .1em; }
  .voce .valore { font-size: 18px; }
  #hud .marchio-hud { height: 30px; }
  .tondo { width: 33px; height: 33px; }
}

/* ---------------------------------------------------------------- campo */
#campo {
  flex: 1 1 auto; min-height: 0;
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px 10px max(10px, var(--sotto));
}
#scena { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* La fascia dei messaggi: sopra al campo, non intercetta i tocchi. */
#fascia {
  position: fixed; left: 50%; top: 18%; z-index: 30;
  transform: translate(-50%, -8px);
  pointer-events: none; opacity: 0;
  padding: 10px 20px; border-radius: 999px;
  background: rgba(10, 8, 8, .84);
  box-shadow: inset 0 0 0 2px var(--fascia-colore, var(--accento)), 0 12px 30px rgba(0,0,0,.5);
  color: var(--testo); font-size: clamp(13px, 3.6vw, 18px);
  font-weight: 900; letter-spacing: .1em; white-space: nowrap; text-align: center;
  font-family: var(--font-titolo);
}
#fascia.visibile { animation: fasciaEntra var(--fascia-durata, 1.7s) cubic-bezier(.2,.9,.25,1) forwards; }
@keyframes fasciaEntra {
  0%   { opacity: 0; transform: translate(-50%, 12px) scale(.86); }
  12%  { opacity: 1; transform: translate(-50%, -8px) scale(1.05); }
  22%  { transform: translate(-50%, -8px) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -24px) scale(.98); }
}

/* Il MOMENTO GROSSO: scritta a tutto schermo (scacco matto, quattro in fila...). */
#momento {
  position: fixed; inset: 0; z-index: 35; pointer-events: none;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 20px;
}
#momento.visibile { display: flex; background: radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,0) 75%); }
/* l'alone scuro tiene leggibile la scritta anche sopra un gioco chiaro */
#momento .grande {
  font-family: var(--font-titolo); font-weight: 900;
  font-size: clamp(38px, 12vw, 92px); line-height: .95; letter-spacing: .04em;
  color: var(--momento-colore, var(--accento));
  text-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 30px var(--momento-colore, var(--accento)), 0 0 70px rgba(0,0,0,.6);
  -webkit-text-stroke: 2px rgba(0,0,0,.35);
  animation: momentoEntra .7s cubic-bezier(.2,1.6,.35,1) both;
}
#momento .piccolo {
  font-size: clamp(14px, 4vw, 22px); font-weight: 800; letter-spacing: .14em; color: var(--testo);
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
  animation: momentoEntra .7s .18s cubic-bezier(.2,1.4,.35,1) both;
}
@keyframes momentoEntra { from { transform: scale(.3) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
#momento.esce { animation: momentoEsce .35s ease-in forwards; }
@keyframes momentoEsce { to { opacity: 0; transform: scale(1.15); } }

#lampo { position: fixed; inset: 0; z-index: 34; pointer-events: none; opacity: 0; background: #fff; }
#fx { position: fixed; inset: 0; z-index: 36; pointer-events: none; width: 100vw; height: 100vh; }

/* -------------------------------------------------------- conto alla rovescia */
#conto {
  position: fixed; inset: 0; z-index: 32; pointer-events: none;
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(circle at center, rgba(0,0,0,.25), rgba(0,0,0,.55));
}
#conto.visibile { display: flex; }
#conto span {
  font-family: var(--font-titolo); font-weight: 900;
  font-size: clamp(90px, 34vw, 200px); line-height: 1;
  color: var(--testo);
  text-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 40px var(--marchio);
  animation: contoBatte .9s cubic-bezier(.2,1.5,.3,1) both;
}
#conto span.via { color: var(--accento); font-size: clamp(64px, 22vw, 150px); text-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 50px var(--accento); }
@keyframes contoBatte { 0% { transform: scale(2.2); opacity: 0; } 30% { transform: scale(.92); opacity: 1; } 55% { transform: scale(1.04); } 100% { transform: scale(1); opacity: .9; } }

/* -------------------------------------------------------------- schermate */
.schermata {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: max(22px, var(--sopra)) 22px max(22px, var(--sotto));
  text-align: center;
  /* NIENTE SFOCATURA. Il velo sfocato sopra al gioco e' la firma piu'
     riconoscibile delle interfacce fatte in fretta, ed e' il primo motivo per
     cui una schermata "sembra fatta dall'AI" (Marcello, su Luna Grab e poi
     qui). Al suo posto una tinta piena di legno scuro: si legge meglio, costa
     meno a un telefono e sembra una cosa costruita. */
  background: #1A0F08;
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
  overflow-y: auto;
}
.schermata.visibile { opacity: 1; visibility: visible; transition: opacity .28s ease, visibility 0s; }  /* visibile SUBITO: si tocca dal primo fotogramma */
/* Una schermata che sta sparendo non deve mangiarsi i tocchi destinati a quella che arriva. */
.schermata:not(.visibile) { pointer-events: none; }
.schermata > * { flex-shrink: 0; }
/* Centrata con i margini automatici, NON con justify-content: center. Con
   center, quando il contenuto e' piu' alto dello schermo (modulo dati su
   320x568, tastiera aperta) la parte alta esce SOPRA e non si raggiunge piu'
   scorrendo. I margini auto centrano quando c'e' spazio e lasciano scorrere
   dall'inizio quando non c'e' (trovato dal collaudo di DROP FOUR, 4/10/2026). */
.schermata { justify-content: flex-start; }
.schermata > :first-child { margin-top: auto; }
.schermata > :last-child { margin-bottom: auto; }
#schermataRegole > :first-child { margin-top: 0; }

/* Il menu lascia vedere il gioco sotto: e' la vetrina, non una copertina. */
#schermataMenu {
  /* Il menu lascia vedere la damiera sotto, ma senza sfocarla: si scurisce e
     basta, come una luce che cala sul tavolo. */
  background: radial-gradient(ellipse at center, rgba(14,8,4,.58) 0%, rgba(14,8,4,.74) 60%, rgba(10,6,3,.92) 100%);
}
#schermataMenu .titolo, #schermataMenu .sottotitolo, #schermataMenu .nota {
  text-shadow: 0 2px 18px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.9);
}

.titolo {
  font-family: var(--font-titolo);
  font-size: clamp(38px, 11.5vw, 72px); font-weight: 900; letter-spacing: .06em;
  margin: 0; line-height: 1;
}
.titolo .riga2 { display: block; color: var(--accento); }
.sottotitolo { font-size: clamp(14px, 3.8vw, 18px); color: var(--testo); opacity: .85; margin: 0; max-width: 32ch; line-height: 1.4; }
.nota { font-size: 12px; color: var(--testo-tenue); margin: 0; max-width: 40ch; line-height: 1.45; }

.bottone {
  appearance: none; border: 0; cursor: pointer;
  font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: var(--testo-su-marchio); background: var(--marchio);
  border-radius: 999px; padding: 15px 40px; font-size: 15px;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--marchio) 60%, #000), 0 12px 26px rgba(0,0,0,.35);
  transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
  min-width: 220px;
}
.bottone:active { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--marchio) 60%, #000), 0 6px 14px rgba(0,0,0,.35); filter: brightness(1.08); }
.bottone.accento { background: var(--accento); color: var(--testo-su-accento); box-shadow: 0 6px 0 color-mix(in srgb, var(--accento) 60%, #000), 0 12px 26px rgba(0,0,0,.35); }
.bottone.secondario { background: transparent; color: var(--testo); box-shadow: inset 0 0 0 1.5px var(--bordo); min-width: 0; }
.bottone.secondario:active { transform: scale(.96); box-shadow: inset 0 0 0 1.5px var(--bordo); }
.bottone[disabled] { opacity: .55; cursor: default; }
.bottoni { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Il gesto principale respira: si capisce dove premere senza leggere. */
#btnInizia { animation: respira 2.2s ease-in-out infinite; }
@keyframes respira { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@media (prefers-reduced-motion: reduce) { #btnInizia { animation: none; } }

/* Il marchio FRD in fondo al menu: e' un LINK al sito, e il click si conta. */
.marchio-link {
  appearance: none; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; gap: 9px; padding: 6px 10px; margin-top: 4px;
  color: var(--testo-tenue); font-size: 11px; font-weight: 800; letter-spacing: .18em;
}
.marchio-link img { height: 34px; width: auto; display: block; }
.marchio-link span { text-decoration: underline; text-underline-offset: 3px; }

.copertina {
  width: min(52vw, 200px); height: auto; display: block;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.55));
  animation: respiro 4.5s ease-in-out infinite;
}
@keyframes respiro { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .copertina { animation: none; } }

/* Scelta del livello (solo nei giochi che ce l'hanno). */
.livelli { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1.5px var(--bordo); }
.livelli[hidden] { display: none; }
.livelli button {
  appearance: none; border: 0; cursor: pointer; border-radius: 999px;
  padding: 9px 14px; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  background: transparent; color: var(--testo-tenue);
}
.livelli button[aria-pressed="true"] { background: var(--accento); color: var(--testo-su-accento); }
.livelli-nota { font-size: 11.5px; color: var(--testo-tenue); margin: -6px 0 0; min-height: 1.3em; }

/* Regole: cinque righe, una per riga. Se non ci stanno, si scorre. */
#schermataRegole { justify-content: flex-start; padding-top: max(28px, var(--sopra)); }
.regole { list-style: none; margin: 0; padding: 0; max-width: 460px; width: 100%; display: flex; flex-direction: column; gap: 12px; text-align: left; counter-reset: regola; }
.regole li { display: flex; gap: 12px; align-items: flex-start; font-size: clamp(14px, 3.7vw, 16px); line-height: 1.45; }
.regole li::before {
  content: counter(regola); counter-increment: regola; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--marchio); color: var(--testo-su-marchio);
  font-size: 13px; font-weight: 900; display: grid; place-items: center;
}

/* ------------------------------------------------------------ modulo lead */
.modulo { display: flex; flex-direction: column; gap: 10px; width: min(88vw, 380px); }
.modulo input[type="text"], .modulo input[type="email"] {
  appearance: none; border: 0; font-family: var(--font);
  font-size: 16px;                       /* sotto i 16 px iOS ingrandisce da solo */
  color: var(--testo); background: var(--superficie);
  box-shadow: inset 0 0 0 1.5px var(--bordo);
  border-radius: 999px; padding: 14px 22px; outline: none; width: 100%;
  -webkit-user-select: text; user-select: text;
}
.modulo input::placeholder { color: var(--testo-tenue); }
.modulo input:focus { box-shadow: inset 0 0 0 2px var(--accento); }
.modulo input.errato { box-shadow: inset 0 0 0 2px var(--errore); }
/* La spunta del consenso: 22 px e tutta la riga toccabile. Una casella piccola
   si spunta per sbaglio, e una spunta per sbaglio non e' un consenso. */
.consenso {
  display: flex; align-items: flex-start; gap: 11px; padding: 6px; margin-top: 2px;
  font-size: 12.5px; line-height: 1.45; color: var(--testo-tenue); text-align: left; cursor: pointer;
}
.consenso input {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 22px; height: 22px; min-width: 22px; padding: 0; margin: 0; border-radius: 7px;
  background: var(--superficie); box-shadow: inset 0 0 0 1.5px var(--bordo); position: relative; cursor: pointer;
}
.consenso input:checked { background: var(--accento); box-shadow: inset 0 0 0 1.5px var(--accento); }
.consenso input:checked::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid var(--testo-su-accento); border-width: 0 2.5px 2.5px 0; transform: rotate(42deg);
}
.consenso.errato input { box-shadow: inset 0 0 0 2px var(--errore); }
.consenso a { color: var(--testo); text-decoration: underline; text-underline-offset: 2px; }
.avviso { min-height: 1.3em; font-size: 13px; margin: 0; color: var(--errore); }
.avviso.ok { color: var(--testo-tenue); }
.avviso[hidden] { display: none; }
.marchio-piccolo { display: flex; align-items: center; gap: 8px; opacity: .8; }
.marchio-piccolo img { height: 28px; width: auto; display: block; }
.marchio-piccolo span { font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--testo-tenue); }

.testo-privacy {
  width: min(90vw, 560px); max-height: 64vh; overflow-y: auto;
  text-align: left; font-size: 13px; line-height: 1.55; color: var(--testo-tenue);
  -webkit-user-select: text; user-select: text;
}
.testo-privacy h3 { color: var(--testo); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin: 18px 0 5px; }
.testo-privacy h3:first-child { margin-top: 0; }
.testo-privacy p { margin: 0 0 8px; }

.marchio-grande img { height: 110px; width: auto; display: block; }

/* ------------------------------------------------------------- fine partita */
.esito { font-size: clamp(15px, 4vw, 19px); font-weight: 800; letter-spacing: .08em; color: var(--testo); margin: -4px 0 0; max-width: 30ch; }
.riepilogo { display: flex; gap: 34px; justify-content: center; }
.riepilogo .valore { font-size: clamp(30px, 9vw, 44px); font-weight: 900; font-variant-numeric: tabular-nums; }
.dettagli { list-style: none; margin: 0; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--bordo); width: min(86vw, 340px); display: flex; flex-direction: column; gap: 6px; }
.dettagli[hidden] { display: none; }
.dettagli li { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--testo-tenue); }
.dettagli li b { color: var(--testo); font-variant-numeric: tabular-nums; }
.record-nuovo { font-size: 13px; font-weight: 900; letter-spacing: .2em; color: var(--accento); margin: 0; animation: entra .5s cubic-bezier(.2,1.6,.4,1) both; }
.record-nuovo[hidden] { display: none; }
@keyframes entra { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ------------------------------------------------------------------ pausa */
#pausa {
  position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center;
  background: rgba(10, 6, 3, .88);
}
#pausa.aperta { display: flex; }
#pausa .riquadro {
  background: var(--superficie); border-radius: 22px;
  box-shadow: 0 0 0 1.5px var(--bordo), 0 24px 60px rgba(0,0,0,.6);
  padding: 26px 26px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: min(90vw, 360px);
}
#pausa h2 { margin: 0 0 4px; font-family: var(--font-titolo); font-size: clamp(22px, 6vw, 30px); letter-spacing: .14em; }
#pausa .bottone { width: 100%; min-width: 0; }

@media (max-height: 680px) {
  .schermata { gap: 11px; }
  .copertina { width: min(36vw, 120px); }
  .marchio-grande img { height: 76px; }
  .bottone { padding: 13px 34px; }
}

/* IL MODULO DEI CONTATTI NON SI SCORRE (procedura §15: una schermata si deve
   vedere tutta in una volta). Misurato il 2/11/2026: sbordava di 133 px su
   360x512, 93 su 375x553 e 67 anche su un monitor, perche' sopra ai campi
   c'erano copertina, titolo e sottotitolo. Sui telefoni bassi la copertina
   sparisce e il resto si stringe: i campi e il consenso restano, ed e' quello
   che serve. */
@media (max-height: 700px) {
  #schermataLead .copertina { display: none; }
  #schermataLead { gap: 9px; padding-top: 14px; padding-bottom: 14px; }
  #schermataLead .titolo { font-size: clamp(19px, 5vw, 26px); }
  #schermataLead .sottotitolo { font-size: 12.5px; line-height: 1.35; }
  #schermataLead .modulo { gap: 8px; }
  #schermataLead .modulo input[type="text"], #schermataLead .modulo input[type="email"] { padding: 11px 18px; }
  #schermataLead .consenso { font-size: 11.5px; line-height: 1.35; }
}
/* Su schermi normali basta togliere il respiro di troppo attorno al modulo. */
@media (min-height: 701px) and (max-height: 820px) {
  #schermataLead .copertina { width: min(30vw, 104px); }
  #schermataLead { gap: 11px; }
}