/* ============================================================================
   DROP FOUR - il VESTITO (ART_STYLE.md). La struttura comune sta in stile.css
   e non si tocca: qui solo font, colori delle schermate e la scena del gioco.
   ========================================================================== */

/* Fredoka e' un font VARIABILE (pesi 300-700 in un file solo): i due file in
   font/ sono lo stesso file, quindi se ne dichiara uno, con l'intervallo dei
   pesi. swap: il titolo compare subito col font di sistema e cambia appena
   arriva, invece di restare invisibile sul telefono con la rete lenta. */
@font-face {
  font-family: "Titolo";
  src: url("font/Fredoka-700.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root { font-synthesis: none; }

/* Fredoka arriva a 700: lo si chiede esplicitamente, cosi' il browser non
   "ingrassa" a mano le lettere (verrebbero sbavate). */
.titolo, #momento .grande, #conto span, #fascia, .voce .valore, .riepilogo .valore, #pausa h2 {
  font-weight: 700;
}
.titolo { letter-spacing: .04em; }
.titolo .riga2 { text-shadow: 0 4px 0 #B8650B, 0 10px 26px rgba(0,0,0,.45); }
#schermataMenu .titolo { font-size: clamp(54px, 17vw, 104px); line-height: .92; }
#schermataMenu .titolo { text-shadow: 0 4px 0 #1236B0, 0 10px 30px rgba(10,0,40,.8); }
#schermataMenu .titolo .riga2 { text-shadow: 0 4px 0 #B8650B, 0 10px 30px rgba(10,0,40,.8); }

/* Le schermate: velo viola invece del nero neutro dello scheletro, cosi' le
   pause e i moduli restano "dentro la festa". */
.schermata { background: rgba(28, 8, 64, .88); }
/* "safe center": quando il contenuto e' piu' alto dello schermo (il modulo dati a
   320x568) si allinea in alto e si SCORRE; col center semplice la parte alta
   usciva sopra lo schermo e non si raggiungeva piu' (difetto dello scheletro,
   segnalato nel resoconto). Se il contenuto ci sta, non cambia niente. */
.schermata { justify-content: safe center; }
#schermataMenu {
  background: radial-gradient(ellipse at center, rgba(30,8,70,.70) 0%, rgba(30,8,70,.55) 50%, rgba(30,8,70,.30) 100%);
}
#pausa .riquadro { background: #321170; }
.dettagli { background: rgba(255,255,255,.06); }

/* I bottoni: plastica lucida come la griglia (un filo di luce in alto). */
.bottone { background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%); }
.bottone.secondario { background-image: none; }
.regole li::before { background: var(--accento); color: var(--testo-su-accento); }

/* Il conto alla rovescia: numeri gialli come i dischi del giocatore. */
#conto span { color: var(--accento); text-shadow: 0 6px 0 #B8650B, 0 0 40px rgba(255,201,60,.6); }
#conto span.via { color: #FFFFFF; text-shadow: 0 6px 0 #1236B0, 0 0 50px var(--marchio); }

/* ------------------------------------------------------------------ scena */
/* Il canvas riempie tutto il campo: la griglia la centra il codice, alla
   misura giusta per lo schermo (gioco.js, ridimensiona). */
#scena { position: relative; }
#tela {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; touch-action: none; cursor: pointer;
}