/* ============================================================================
   L'INTRUSO - stile comune alle due pagine (schermo grande e telefono).
   I colori sono quelli decisi in ART_STYLE.md: cambiarli qui li cambia in
   tutte e due, ed e' l'unico posto dove stanno scritti.
   ========================================================================== */
:root {
  /* PALETTE FRD (21/09/2026). Il gioco non ha un cliente, quindi e' vestito
     Fantasy Roll Dice: nero caldo, rosso e oro del marchio - gli stessi numeri
     di Quiz Team, che e' l'altra demo di fascia C. Il verde-azzurro di prima
     era un colore nostro e basta, e in sala faceva un gioco che non sembrava
     di nessuno. Portandolo da un cliente si cambiano solo queste righe. */
  --sfondo:      #0D0B0B;
  --superficie:  #171313;
  --superficie2: #231B1B;
  --bordo:       #2F2323;
  --testo:       #F4EFE8;
  --tenue:       #A2938B;
  --lampada:     #F2B134;   /* l'oro FRD: e' la luce della lampada */
  --lampada-cupa:#B9791A;
  --intruso:     #D92626;   /* il rosso FRD: solo la rivelazione dell'intruso */
  --innocenti:   #F4EFE8;   /* vincono gli altri: crema, non un verde a caso */
  --voto:        #B9791A;
  --frd:         #C8202A;   /* il rosso del sigillo FRD: pulsanti e marchio */
  --ombra:       0 10px 30px rgba(0,0,0,.55);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--sfondo);
  color: var(--testo);
  font: 400 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}
body { overflow: hidden; }

/* Il cono di luce: e' l'unica cosa luminosa dello schermo e sta sempre in alto
   al centro. Trapezio col gradiente, non un cerchio sfocato (ART_STYLE.md). */
.cono {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: min(160vh, 190vw); height: 78vh;
  background: linear-gradient(to bottom,
              rgba(242,177,52,.20) 0%,
              rgba(242,177,52,.09) 38%,
              rgba(242,177,52,0)   100%);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
  pointer-events: none; z-index: 0;
}

/* ---- schermate ---------------------------------------------------------- */
.schermata {
  /* top/right/bottom/left scritti per esteso: `inset` su iOS arriva solo con
     la 14.5, e prima la schermata non ha altezza. */
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: max(20px, env(safe-area-inset-top)) 20px
                     max(20px, env(safe-area-inset-bottom));
  text-align: center;
}
.schermata.viva { display: flex; }
/* Il passaggio fra una schermata e l'altra (21/09/2026, "piu' fluido"):
   prima era uno scatto secco, adesso la nuova sale e si accende. E' una
   classe che va e viene (INTRUSO.mostra), non un'animazione fissa su .viva:
   il tremore della schermata le rimetterebbe il via ogni volta. */
.schermata.fx-entra { animation: schermata-entra .38s cubic-bezier(.2,.8,.3,1) both; }
@keyframes schermata-entra {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.schermata.scorre { justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Centrata QUANDO C'E' POSTO, attaccata in alto quando non c'e'.
   Con justify-content:center, su uno schermo basso (iPhone SE, 8) il
   contenuto piu' alto dello schermo esce SOPRA il bordo, dove lo scorrimento
   non arriva: e' cosi' che la copertina risultava tagliata (nota di Marcello
   del 16/09/2026). I due margini automatici centrano se avanza spazio e si
   azzerano se manca, e funzionano anche su Safari vecchi. */
.schermata.scorre.centrata::before,
.schermata.scorre.centrata::after { content: ""; margin: auto; }

/* ---- testi -------------------------------------------------------------- */
.titolo {
  margin: 0; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.05;
}
.occhiello {
  margin: 0; color: var(--tenue); font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; font-size: clamp(11px, 1.5vw, 15px);
}
.nota { margin: 0; color: var(--tenue); font-size: clamp(12px, 1.6vw, 15px); }
.avviso {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--intruso);
  min-height: 1.2em;
}
.avviso.attesa { color: var(--tenue); }

/* ---- bottoni ------------------------------------------------------------ */
.bottone {
  appearance: none; border: 0; cursor: pointer; font-family: inherit;
  font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 16px 30px; border-radius: 999px; min-height: 54px;
  /* Il pulsante principale e' ROSSO FRD (21/09/2026, "la personalizzazione
     FRD e' poco presente"): l'oro resta alla lampada e ai nomi di turno. */
  background: var(--frd); color: #FFF7EE;
  box-shadow: var(--ombra), inset 0 -3px 0 rgba(0,0,0,.25); font-size: clamp(14px, 1.9vw, 18px);
  transition: transform .08s ease, filter .12s ease;
}
.bottone:active { transform: scale(.97); }
.bottone:disabled { background: var(--bordo); color: var(--tenue); box-shadow: none; cursor: default; }
.bottone.secondario { background: transparent; color: var(--testo); border: 2px solid var(--bordo); box-shadow: none; }
.bottone.pericolo   { background: transparent; color: var(--intruso); border: 2px solid var(--intruso); box-shadow: none; }
.bottone.grande     { padding: 22px 46px; font-size: clamp(18px, 3vw, 26px); min-height: 68px; }

.link {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--tenue); text-decoration: underline;
  text-underline-offset: 3px; padding: 8px;
}

/* ---- pannelli ----------------------------------------------------------- */
.pannello {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: 14px; padding: 18px 20px; box-shadow: var(--ombra);
}

/* ---- le facce (maschere) ------------------------------------------------ */
.faccia {
  display: block; border-radius: 50%; background: var(--superficie2);
  border: 2px solid var(--bordo); object-fit: cover;
}

/* ---- barra dei comandi in alto ------------------------------------------ */
.comandi {
  position: fixed; top: max(10px, env(safe-area-inset-top)); right: 12px;
  z-index: 5; display: flex; gap: 8px;
}
.tondo {
  appearance: none; border: 1px solid var(--bordo); background: rgba(23,19,19,.85);
  color: var(--testo); width: 46px; height: 46px; border-radius: 50%;
  cursor: pointer; font-size: 19px; line-height: 1; display: grid; place-items: center;
  backdrop-filter: blur(4px);
}
.tondo:active { transform: scale(.94); }
.tondo[hidden] { display: none; }
/* `hidden` vale SEMPRE. Senza questa riga, ogni elemento a cui il CSS da'
   display:flex ignora l'attributo e resta a schermo: e' cosi' che la casella
   "Invia" e i comandi del capotavola si vedevano su tutti i telefoni, e sullo
   schermo grande le caselle vuote delle parole comparivano prima del verdetto
   (trovato il 17/09/2026). Il bot non poteva accorgersene: il suo DOM non
   applica il CSS. */
[hidden] { display: none !important; }

/* ---- marchio FRD -------------------------------------------------------- */
.marchio-frd {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--tenue); font-size: 11px; letter-spacing: .18em; font-weight: 700;
  text-transform: uppercase; padding: 10px 14px;
  display: inline-flex; align-items: center; gap: 10px;
}
/* Il marchio vero del sito, non solo la scritta: finche' il gioco non ha un
   cliente e' di Fantasy Roll Dice, e si deve vedere di chi e'. */
.marchio-frd img { width: 34px; height: 34px; display: block; }
.marchio-frd b { color: var(--lampada); font-weight: 800; }

/* Il sigillo FRD fisso in alto a sinistra, su tutte e due le pagine e in
   tutte le schermate: e' un link al sito, come il marchio del menu. Prima il
   marchio c'era solo nel menu e dopo trenta secondi non lo vedeva piu'
   nessuno (Marcello, 21/09/2026). */
.sigillo-frd {
  position: fixed; top: max(10px, env(safe-area-inset-top)); left: 12px; z-index: 5;
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; gap: 12px; color: var(--testo); text-align: left;
}
.sigillo-frd img {
  width: 46px; height: 46px; display: block; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(200,32,42,.55), 0 6px 18px rgba(0,0,0,.6);
}
.sigillo-frd span {
  font-size: 11px; line-height: 1.25; letter-spacing: .2em; font-weight: 800;
  text-transform: uppercase;
}
.sigillo-frd span i { display: block; font-style: normal; color: var(--frd); }

/* Il d20 del marchio, disegnato in img/d20-frd.svg: sta dietro al 3-2-1 e
   sul dorso della carta segreta. */
.d20-frd { display: block; width: 100%; height: 100%; }

/* Il pannello delle regole: si apre e si chiude, non sta sempre a schermo. */
.velo.regole-velo { background: rgba(8,6,6,.9); backdrop-filter: blur(3px); }
.regole-velo .pannello {
  width: min(460px, 94vw); max-height: 86vh; overflow-y: auto; text-align: left;
  border-top: 4px solid var(--frd);
}
.regole-velo .testa-regole { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.regole-velo .testa-regole img { width: 40px; height: 40px; border-radius: 50%; }
.regole-velo .bottone { width: 100%; margin-top: 8px; }

/* ---- modulo contatti ---------------------------------------------------- */
.modulo { display: flex; flex-direction: column; gap: 10px; width: min(420px, 100%); }
.modulo input {
  font: inherit; padding: 15px 16px; border-radius: 12px;
  border: 2px solid var(--bordo); background: var(--superficie); color: var(--testo);
  min-height: 52px;
}
.modulo input::placeholder { color: #6E605A; }
.modulo input:focus { outline: none; border-color: var(--lampada); }
.modulo input.errato { border-color: var(--intruso); }

/* La riga del consenso e' TUTTA toccabile e il quadratino e' da 22 px: su un
   telefono una casella piccola si spunta per sbaglio, e una spunta per sbaglio
   non e' un consenso (PROCEDURA_GIOCHI_WEB_FRD.md §5). */
.consenso {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 12px 4px; text-align: left; font-size: 14px; line-height: 1.45;
  border-radius: 10px;
}
.consenso.errato { background: rgba(224,65,60,.12); }
.consenso input[type=checkbox] { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--lampada); }
.consenso a { color: var(--lampada); }

.testo-privacy {
  text-align: left; max-width: 620px; max-height: 58vh; overflow-y: auto;
  font-size: 14px; line-height: 1.55; color: #D9D3C9;
  border: 1px solid var(--bordo); border-radius: 12px; padding: 16px 18px;
  background: var(--superficie);
}
.testo-privacy h3 { margin: 16px 0 6px; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lampada); }
.testo-privacy h3:first-child { margin-top: 0; }
.testo-privacy p { margin: 0 0 10px; }

/* ---- regole ------------------------------------------------------------- */
.regole { text-align: left; max-width: 560px; margin: 0; padding-left: 24px;
  line-height: 1.6; font-size: clamp(14px, 2vw, 17px); }
.regole li { margin-bottom: 10px; }
.regole li::marker { color: var(--lampada); font-weight: 800; }

/* ---- conto alla rovescia ------------------------------------------------ */
/* Il numero sta DENTRO il d20 FRD: il dado che rotola e' il marchio. */
.conto {
  font-weight: 800; font-size: clamp(80px, 20vw, 210px); line-height: 1;
  color: var(--testo); letter-spacing: -.02em;
  width: clamp(200px, 52vw, 520px); aspect-ratio: 1; min-height: 200px;
  display: grid; place-items: center; padding-top: .12em;
  background: url(img/d20-frd.svg) center / contain no-repeat;
  filter: drop-shadow(0 0 30px rgba(200,32,42,.45));
  animation: battito .9s ease-out;
}
@keyframes battito {
  0%   { transform: scale(.55) rotate(-60deg); opacity: 0; }
  35%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- velo di pausa ------------------------------------------------------ */
.velo {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; display: none;
  background: rgba(10,16,19,.94);
  flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: 24px; text-align: center;
}
.velo.viva { display: flex; }

/* ---- game feel ---------------------------------------------------------
   Le animazioni dei momenti (comune.js, INTRUSO.fx). Tutte brevi, tutte
   tornano a riposo. La curva con l'overshoot (1.56) e' quella che fa sembrare
   vivo un "pop": senza, la cosa arriva e basta. */
.fx-pop    { animation: fx-pop .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes fx-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Il timbro: la cosa cade dall'alto, grande e storta, e si pianta. */
.fx-timbro { animation: fx-timbro .5s cubic-bezier(.2,.9,.3,1.25); }
@keyframes fx-timbro {
  0%   { transform: scale(2.3) rotate(-7deg); opacity: 0; filter: blur(3px); }
  55%  { transform: scale(.92) rotate(1deg);  opacity: 1; filter: none; }
  75%  { transform: scale(1.04) rotate(0); }
  100% { transform: scale(1); }
}

.fx-sale { animation: fx-sale .45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes fx-sale { from { transform: translateY(28px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

.fx-scuoti { animation: fx-scuoti .45s ease-out; }
@keyframes fx-scuoti {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-12px); } 30% { transform: translateX(10px); }
  45% { transform: translateX(-7px); }  60% { transform: translateX(5px); }
  75% { transform: translateX(-2px); }
}

/* Tremore della schermata: ampiezza che cala, cosi' finisce da solo. */
.fx-tremore       { animation: fx-tremore .35s linear; }
.fx-tremore-forte { animation: fx-tremore-forte .6s linear; }
@keyframes fx-tremore {
  0%,100% { transform: none; } 20% { transform: translate(-4px, 2px); }
  40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, 1px); } 80% { transform: translate(1px, 0); }
}
@keyframes fx-tremore-forte {
  0%,100% { transform: none; }
  10% { transform: translate(-14px, 6px) rotate(-.6deg); } 22% { transform: translate(12px, -8px) rotate(.5deg); }
  36% { transform: translate(-9px, 5px) rotate(-.3deg); }  50% { transform: translate(7px, -3px); }
  66% { transform: translate(-4px, 2px); } 82% { transform: translate(2px, -1px); }
}

.fx-lampo {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 30;
  pointer-events: none; opacity: 0;
}
.fx-lampo.fx-lampo-via { animation: fx-lampo .5s ease-out; }
@keyframes fx-lampo { 0% { opacity: .55; } 100% { opacity: 0; } }

/* La lampada: sfarfalla quando cambia il turno, si stringe prima del verdetto,
   si tinge del colore di chi ha vinto. */
.cono { transition: clip-path .9s cubic-bezier(.5,0,.2,1), filter .6s ease; }
.cono.sfarfalla { animation: fx-sfarfalla .5s steps(1, end); }
@keyframes fx-sfarfalla { 0% { opacity: 1; } 15% { opacity: .35; } 30% { opacity: 1; } 45% { opacity: .6; } 60%,100% { opacity: 1; } }
.cono.stretto { clip-path: polygon(48% 0, 52% 0, 66% 100%, 34% 100%); }
.cono.verde   { filter: saturate(1.35) brightness(1.15); }   /* vincono gli altri: la luce si apre */
.cono.rosso   { filter: hue-rotate(-28deg) saturate(2.4); }  /* l'intruso si salva: vira al rosso */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}