/* ============================================================================
   SOUND CLASH - IL TEMA (versione FRD).

   Personalizzazione, non motore: colori, font e sfondo di Sound Clash (vedi
   ART_STYLE.md: il viola del logo, l'oro della scritta, il ciano e l'arancio
   dell'equalizzatore). 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/lilita-one.css");@import url("https://games.fantasyrolldice.it/games_files/general_files/fonts/inter.css");

:root {
  --fondo: #12082a;          --fondo-rgb: 18, 8, 42;
  --primario: #6d28d9;       /* il viola del logo */
  --primario-scuro: #2a1052;
  --primario-chiaro: #8b5cf6;
  --chiaro: #f6f0ff;         --chiaro-rgb: 246, 240, 255;
  --tenue: rgba(246, 240, 255, .66);
  --fioco: rgba(246, 240, 255, .36);
  --linea: rgba(246, 240, 255, .16);
  --accento: #ff4fa3;        /* bottoni, numeri delle regole: il fucsia dell'equalizzatore */
  --oro: #ffc83d;            --oro-rgb: 255, 200, 61;   /* la scritta del logo: chi vince, i numeri grandi */
  --allarme: #ff5a5f;        /* ultimi secondi, risposta sbagliata */
  --successo: #2ee6a6;       --successo-rgb: 46, 230, 166;
  --contorno: #1d0b3a;

  --display: "Lilita One", "Arial Black", Impact, sans-serif;
  --testo: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* lo schermo grande: il palco al buio, coi fari viola dall'alto e un filo
     di luce ciano e arancio ai lati, come le barre del logo */
  --sfondo-schermo:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(139, 92, 246, .45) 0%, rgba(139, 92, 246, 0) 70%),
    radial-gradient(ellipse 35% 60% at 0% 70%, rgba(46, 196, 255, .16) 0%, rgba(46, 196, 255, 0) 70%),
    radial-gradient(ellipse 35% 60% at 100% 70%, rgba(255, 138, 31, .14) 0%, rgba(255, 138, 31, 0) 70%),
    repeating-linear-gradient(90deg, rgba(246, 240, 255, .022) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #2a1052 0%, #12082a 100%);
}