/* ============================================================================
   QUIZ TEAM - IL TEMA DEL CLIENTE (versione FRD).

   Personalizzazione, non motore: colori, font e sfondo di Fantasy Roll Dice
   (vedi ART_STYLE.md). stile.css e le pagine usano solo questi nomi di ruolo.
   I colori delle quattro risposte li mette cliente.js (QT.RISPOSTE), che e'
   l'unica fonte: comune.js li scrive in --risposta-a...d all'avvio.

   Niente url() di immagini qui dentro: un url() dentro una variabile si
   risolve rispetto alla pagina che la usa, non a questo file, e play/ e regia/
   stanno una cartella piu' giu'. Lo sfondo e' un gradiente.
   ========================================================================== */
@import url("https://games.fantasyrolldice.it/games_files/general_files/fonts/oswald.css");@import url("https://games.fantasyrolldice.it/games_files/general_files/fonts/inter.css");

:root {
  --fondo: #0d0b0b;          --fondo-rgb: 13, 11, 11;
  --primario: #a81818;       /* il rosso del logo FRD */
  --primario-scuro: #5e0d0d;
  --primario-chiaro: #c01818;
  --chiaro: #f4efe8;         --chiaro-rgb: 244, 239, 232;
  --tenue: rgba(244, 239, 232, .64);
  --fioco: rgba(244, 239, 232, .36);
  --linea: rgba(244, 239, 232, .16);
  --accento: #d92626;        /* bottoni, numeri delle regole */
  --oro: #f2b134;            --oro-rgb: 242, 177, 52;   /* chi vince, i numeri grandi */
  --allarme: #ff5a4e;        /* ultimi secondi, risposta sbagliata */
  --successo: #1fa67a;       --successo-rgb: 31, 166, 122;
  --contorno: #1c0a0a;

  --display: Oswald, "Arial Narrow", Impact, sans-serif;
  --testo: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* lo schermo grande: il tavolo da gioco al buio, con la luce rossa dal centro */
  --sfondo-schermo:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(168, 24, 24, .42) 0%, rgba(168, 24, 24, 0) 70%),
    repeating-linear-gradient(135deg, rgba(244, 239, 232, .018) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #1a0d0d 0%, #0d0b0b 100%);
}


/* ============================================================================
   LA SCENOGRAFIA (06/10/2026) - la sala di Fantasy Roll Dice.

   Il motore (comune.js, preparaPagina) infila dentro .sfondo il pezzo di HTML
   che sta in cliente.js `scenografia`; qui c'e' il disegno. Regole:
   - si anima SOLO transform e opacity (il resto fa perdere fotogrammi);
   - nessuna immagine: tutto gradienti e forme;
   - la schermata accesa sta su body[data-schermata]: sulla domanda la scena
     si fa da parte, nella pausa e sul podio si accende;
   - `scena-leggera` (PC lento) e chi ha chiesto meno animazioni: tutto fermo.
   ========================================================================== */
.con-scenografia .sfondo { overflow: hidden; }
.sc-volta, .sc-pavimento, .sc-runa, .sc-faro, .sc-torcia, .sc-d20, .sc-faville {
  position: absolute; pointer-events: none;
}
/* il disegno anticipato si chiede SOLO per i pezzi che si muovono davvero: su un
   PC senza scheda grafica ogni strato in piu' costa memoria e fotogrammi */
.sc-griglia, .sc-runa, .sc-torcia, .sc-d20, .sc-faville i { will-change: transform, opacity; }
/* i cambi fra una schermata e l'altra non sono mai a scatto */
.sc-runa, .sc-faro, .sc-d20, .sc-pavimento, .sc-faville { transition: opacity .9s ease; }

/* ---- la volta: il bagliore rosso che scende dall'alto --------------------- */
.sc-volta {
  inset: 0;
  background:
    radial-gradient(ellipse 120% 62% at 50% -12%, rgba(var(--oro-rgb), .13) 0%, rgba(168, 24, 24, .26) 38%, transparent 68%),
    radial-gradient(ellipse 90% 50% at 50% 108%, rgba(168, 24, 24, .22) 0%, transparent 65%);
}

/* ---- il pavimento: il tavolo da gioco in prospettiva, che scorre piano ---- */
.sc-pavimento { left: -25%; right: -25%; bottom: -4%; height: 54%; perspective: 34vmin; perspective-origin: 50% 0%; opacity: .62; }
.sc-griglia {
  position: absolute; left: 0; right: 0; top: 0; height: 240%;
  transform-origin: 50% 0%;
  background-image:
    repeating-linear-gradient(90deg, rgba(var(--oro-rgb), .24) 0 1px, transparent 1px 9vmin),
    repeating-linear-gradient(0deg,  rgba(var(--oro-rgb), .18) 0 1px, transparent 1px 9vmin);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.25) 55%, transparent 85%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.25) 55%, transparent 85%);
  animation: sc-scorre 15s linear infinite;
}
@keyframes sc-scorre {
  from { transform: rotateX(74deg) translateY(0); }
  to   { transform: rotateX(74deg) translateY(-9vmin); }   /* un riquadro esatto: il giro non si vede */
}

/* ---- il cerchio runico dietro al centro ---------------------------------- */
.sc-runa {
  left: 50%; top: 36%; width: 88vmin; height: 88vmin; margin: -44vmin 0 0 -44vmin;
  border-radius: 50%; border: 2px dashed rgba(var(--oro-rgb), .24);
  opacity: .62; animation: sc-gira 150s linear infinite;
}
.sc-runa::before, .sc-runa::after { content: ""; position: absolute; border-radius: 50%; }
.sc-runa::before { inset: 7%; border: 1px solid rgba(var(--chiaro-rgb), .10); }
.sc-runa::after  { inset: 17%; border: 3px dotted rgba(var(--oro-rgb), .15); animation: sc-gira 90s linear infinite reverse; }
@keyframes sc-gira { to { transform: rotate(360deg); } }

/* ---- il fascio di luce sul palco: si accende quando conta ---------------- */
.sc-faro {
  left: 50%; top: -14%; width: 76vmin; height: 104vmin; margin-left: -38vmin; opacity: 0;
  background: linear-gradient(to bottom, rgba(var(--oro-rgb), .16) 0%, rgba(var(--oro-rgb), .05) 46%, transparent 78%);
  -webkit-clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
          clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
}

/* ---- le due torce ai lati ------------------------------------------------ */
.sc-torcia {
  width: 52vmin; height: 52vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--oro-rgb), .34) 0%, rgba(217, 38, 38, .21) 36%, transparent 70%);
  animation: sc-fiamma 2.6s ease-in-out infinite alternate;
}
.sc-torcia-sx { left: -11vmin; top: 24%; }
.sc-torcia-dx { right: -11vmin; top: 15%; animation-duration: 3.3s; animation-delay: -1.4s; }
@keyframes sc-fiamma {
  from { opacity: .55; transform: scale(.93); }
  to   { opacity: 1;   transform: scale(1.07); }
}

/* ---- i due d20 enormi in ombra ------------------------------------------- */
.sc-d20 {
  width: 34vmin; height: 34vmin; opacity: .11;
  background: linear-gradient(150deg, var(--chiaro) 0%, rgba(var(--chiaro-rgb), .15) 58%, transparent 75%);
  -webkit-clip-path: polygon(50% 0%, 93% 26%, 93% 74%, 50% 100%, 7% 74%, 7% 26%);
          clip-path: polygon(50% 0%, 93% 26%, 93% 74%, 50% 100%, 7% 74%, 7% 26%);
  animation: sc-fluttua 24s ease-in-out infinite alternate;
}
.sc-d20::before {
  content: ""; position: absolute; inset: 22%;
  background: rgba(var(--fondo-rgb), .55);
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
          clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.sc-d20-sx { left: 3vw; bottom: 9vh; transform: rotate(-12deg); }
.sc-d20-dx { right: 4vw; top: 7vh; width: 27vmin; height: 27vmin; animation-duration: 31s; animation-delay: -8s; }
@keyframes sc-fluttua {
  from { transform: translate3d(0, 0, 0) rotate(-8deg); }
  to   { transform: translate3d(0, -3.5vh, 0) rotate(6deg); }
}

/* ---- le faville che salgono dal tavolo ----------------------------------- */
.sc-faville { inset: 0; }
.sc-faville i {
  position: absolute; bottom: -3vh; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--oro-rgb), .95) 0%, rgba(217, 38, 38, .35) 55%, transparent 72%);
  opacity: 0; animation: sc-sale 13s linear infinite;
}
@keyframes sc-sale {
  0%   { transform: translate3d(0, 0, 0) scale(.5); opacity: 0; }
  10%  { opacity: .9; }
  70%  { opacity: .7; }
  100% { transform: translate3d(var(--dx, 3vw), -104vh, 0) scale(1.15); opacity: 0; }
}
.sc-faville i:nth-child(1)  { left: 7%;  animation-delay: 0s;    animation-duration: 12s; --dx: 2vw; }
.sc-faville i:nth-child(2)  { left: 15%; animation-delay: -3.4s; animation-duration: 15s; --dx: -1.5vw; transform: scale(.7); }
.sc-faville i:nth-child(3)  { left: 23%; animation-delay: -7.1s; animation-duration: 11s; --dx: 3vw; }
.sc-faville i:nth-child(4)  { left: 31%; animation-delay: -1.8s; animation-duration: 17s; --dx: -2.5vw; }
.sc-faville i:nth-child(5)  { left: 39%; animation-delay: -9.6s; animation-duration: 13s; --dx: 1vw; }
.sc-faville i:nth-child(6)  { left: 46%; animation-delay: -5.2s; animation-duration: 16s; --dx: -3vw; }
.sc-faville i:nth-child(7)  { left: 54%; animation-delay: -11.3s; animation-duration: 12s; --dx: 2.5vw; }
.sc-faville i:nth-child(8)  { left: 61%; animation-delay: -2.7s; animation-duration: 14s; --dx: -1vw; }
.sc-faville i:nth-child(9)  { left: 69%; animation-delay: -8.4s; animation-duration: 18s; --dx: 3.5vw; }
.sc-faville i:nth-child(10) { left: 77%; animation-delay: -4.1s; animation-duration: 12s; --dx: -2vw; }
.sc-faville i:nth-child(11) { left: 85%; animation-delay: -10.2s; animation-duration: 15s; --dx: 1.5vw; }
.sc-faville i:nth-child(12) { left: 92%; animation-delay: -6.6s; animation-duration: 13s; --dx: -3.5vw; }
.sc-faville i:nth-child(13) { left: 50%; animation-delay: -13.5s; animation-duration: 19s; --dx: 4vw; }
.sc-faville i:nth-child(14) { left: 35%; animation-delay: -15.1s; animation-duration: 16s; --dx: -4vw; }
/* sul telefono sono poche, piccole e lente: deve restare leggibile */
.sc-faville-piccole i { width: 5px; height: 5px; opacity: 0; animation-duration: 18s; }

/* ---- quanto si muove, schermata per schermata ---------------------------- */
/* LA DOMANDA: la scena si fa da parte. Si legge, si risponde, basta. */
body[data-schermata="scDomanda"] .sc-runa     { opacity: .14; }
body[data-schermata="scDomanda"] .sc-d20      { opacity: .035; }
body[data-schermata="scDomanda"] .sc-pavimento { opacity: .2; }
body[data-schermata="scDomanda"] .sc-faville  { opacity: .3; }
/* IL CONTO ALLA ROVESCIA E LA RIVELAZIONE: si accende il fascio di luce */
body[data-schermata="scAttenzione"] .sc-faro,
body[data-schermata="scRivela"] .sc-faro,
body[data-schermata="scManche"] .sc-faro { opacity: .75; }
body[data-schermata="scRivela"] .sc-runa { opacity: .75; }
/* IL PODIO: tutto al massimo, e' il momento della serata */
body[data-schermata="scFine"] .sc-faro    { opacity: 1; }
body[data-schermata="scFine"] .sc-runa    { opacity: .9; animation-duration: 60s; }
body[data-schermata="scFine"] .sc-d20     { opacity: .13; }
body[data-schermata="scFine"] .sc-faville i { animation-duration: 6s; }

/* ---- PC lento, o chi ha chiesto meno animazioni: tutto fermo ------------- */
body.scena-leggera .sc-griglia,
body.scena-leggera .sc-runa,
body.scena-leggera .sc-runa::after,
body.scena-leggera .sc-torcia,
body.scena-leggera .sc-d20,
body.scena-leggera .sc-faville i { animation: none; }
body.scena-leggera .sc-faville i { opacity: .55; }
/* ferma anche le dissolvenze fra una schermata e l'altra: su un PC lento sono
   proprio quelle a far perdere fotogrammi nel momento della rivelazione */
body.scena-leggera :is(.sc-runa, .sc-faro, .sc-d20, .sc-pavimento, .sc-faville) { transition: none; }
body.scena-leggera .sc-griglia, body.scena-leggera .sc-runa, body.scena-leggera .sc-torcia,
body.scena-leggera .sc-d20, body.scena-leggera .sc-faville i { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  .sc-griglia, .sc-runa, .sc-runa::after, .sc-torcia, .sc-d20, .sc-faville i { animation: none; }
  .sc-faville i { opacity: .55; }
  .sc-runa, .sc-faro, .sc-d20, .sc-pavimento, .sc-faville { transition: none; }
}