/* ============================================================================
   CROWN JUMP - il "vestito" del gioco (ART_STYLE.md). La struttura comune sta
   in stile.css e non si tocca: qui solo font, colori e la tela della damiera.
   ========================================================================== */

/* Lilita One (SIL Open Font License), servita dal gioco stesso: niente Google
   Fonts, che in un locale col Wi-Fi lento lascerebbe i titoli nel font di
   sistema. swap = il testo si vede subito, e si veste appena il font arriva. */
@font-face {
  font-family: "Lilita One";
  src: url("font/LilitaOne-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Lilita One ha un peso solo: lo scheletro chiede 900 a titoli, conto, fascia
   e momento, e il browser lo "inventerebbe" ingrossando le lettere (sbavano).
   Si tiene il peso vero e si spegne la sintesi. */
.titolo, #conto span, #fascia, #momento .grande, .voce .valore,
.riepilogo .valore, #pausa h2, .bottone {
  font-synthesis: none;
}
.titolo, #conto span, #fascia, #momento .grande, .voce .valore, .riepilogo .valore, #pausa h2 {
  font-weight: 400;
}
.titolo { letter-spacing: .04em; }
.bottone { font-family: var(--font-titolo); font-weight: 400; letter-spacing: .1em; font-size: 17px; }

/* Il titolo del menu come un'insegna da bar: crema con l'ombra calda, la
   seconda riga d'oro. */
#schermataMenu .titolo {
  font-size: clamp(52px, 16vw, 96px);
  line-height: .92;
  color: var(--testo);
  text-shadow: 0 4px 0 #7A4A2A, 0 7px 0 rgba(0,0,0,.45), 0 0 34px rgba(0,0,0,.9);
}
#schermataMenu .titolo .riga2 { color: var(--accento); text-shadow: 0 4px 0 #8A5A10, 0 7px 0 rgba(0,0,0,.45), 0 0 30px rgba(242,193,78,.35); }

/* Le schermate: espresso invece del nero, cosi' restano "al caffe'". */
.schermata:not(#schermataMenu) { background: rgba(30, 18, 12, .9); }
#pausa .riquadro { background: #3A2418; }

/* Il conto alla rovescia e i momenti grossi col bagliore dorato. */
#conto span { text-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 40px rgba(200,32,46,.75); }
#fascia { letter-spacing: .08em; font-size: clamp(15px, 4.2vw, 21px); }

/* La damiera: una tela sola grande quanto la scena (damiera, vassoi,
   indicatori). touch-action none: il tocco e' del gioco, non dello scroll. */
#damiera {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}