/* ============================================================================
   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;
  background: rgba(8, 7, 7, .86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  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 {
  background: radial-gradient(ellipse at center, rgba(8,7,7,.62) 0%, rgba(8,7,7,.5) 50%, rgba(8,7,7,.3) 100%);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
#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(0,0,0,.72); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
#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; }
}