/* ============================================================================
   TEMA - CHESS BLITZ: il "vestito" sopra la struttura comune di stile.css.
   Palette e regole in ART_STYLE.md: club notturno blu, marmo avorio e
   smeraldo, una sola luce (l'oro). Qui non si sposta niente di posto (pausa,
   audio, regole, modulo restano dove li mette lo scheletro): si cambia solo
   come appaiono.
   ========================================================================== */

/* Cinzel e' un font VARIABILE: lo stesso file copre 700 e 900, quindi una
   sola dichiarazione con l'intervallo di pesi. swap: il titolo compare
   subito col ripiego e diventa Cinzel appena il file arriva, invece di
   restare invisibile sul telefono con poca rete. */
@font-face {
  font-family: "Cinzel FRD";
  src: url("font/Cinzel-700.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --oro: #E8B64C;
  --oro-chiaro: #FBE3A0;
  --oro-scuro: #8A6420;
  --notte: #0B1530;
  --notte2: #101C3F;
  --smeraldo: #2F6B5A;
  --rosso: #E5484D;
}

/* Lo sfondo illustrato e' gia' scuro: il velo comune (nero) lo spegneva
   troppo, qui diventa blu notte cosi' il fondo resta "sala" e non "buio". */
#sfondo::after {
  background: radial-gradient(ellipse at 50% 42%, rgba(11,21,48,0) 0%, rgba(11,21,48,.38) 70%, rgba(6,11,26,.72) 100%);
}

/* La scena e' una tela sola: scacchiera, pezzi, vassoi e animazioni. */
#scena { touch-action: none; }
#tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: default; }
#tela.puntatore { cursor: pointer; }
#tela.trascina { cursor: grabbing; }

/* ------------------------------------------------------------------ HUD */
.voce .valore { font-family: var(--font-titolo); font-weight: 900; letter-spacing: .02em; }
.voce .etichetta { color: #8E97B6; }
/* l'orologio e' il cuore della partita: un filo piu' grande e a larghezza
   fissa, cosi' i numeri che scendono non fanno ballare l'HUD */
#voce_tempo .valore { font-size: 23px; min-width: 3.1ch; color: var(--oro-chiaro); }
#voce_tempo .valore.allarme { color: var(--rosso); text-shadow: 0 0 12px rgba(229,72,77,.55); }
@media (max-width: 400px) { #voce_tempo .valore { font-size: 20px; } }

/* -------------------------------------------------------------- schermate */
.schermata { background: rgba(8, 14, 34, .9); }
#schermataMenu {
  background: radial-gradient(ellipse at center, rgba(8,14,34,.66) 0%, rgba(8,14,34,.52) 52%, rgba(8,14,34,.36) 100%);
}
.titolo { letter-spacing: .08em; font-weight: 900; }
/* BLITZ in oro metallico: lo stesso gradiente della cornice della scacchiera */
.titolo .riga2 {
  background: linear-gradient(180deg, #FFF1C4 0%, #F3CF72 38%, #D99E36 62%, #F6D98A 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)) drop-shadow(0 0 18px rgba(232,182,76,.35));
}
#schermataMenu .titolo .riga2 { text-shadow: none; }
.sottotitolo { font-style: italic; letter-spacing: .02em; }

/* Bottone principale: oro metallico con testo notte (contrasto ~9:1). */
.bottone {
  font-family: var(--font-titolo); letter-spacing: .14em;
  background: linear-gradient(180deg, #F7D885 0%, #E8B64C 48%, #CF9632 100%);
  box-shadow: 0 6px 0 #7A561A, 0 12px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.55);
}
.bottone:active { box-shadow: 0 2px 0 #7A561A, 0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.55); }
/* REGOLE: contorno d'oro. Due bottoni oro pieni avrebbero lo stesso peso e
   non si capirebbe quale premere per primo. */
.bottone.accento {
  background: rgba(11,21,48,.55); color: var(--oro-chiaro);
  box-shadow: inset 0 0 0 1.5px var(--oro), 0 8px 20px rgba(0,0,0,.3);
}
.bottone.accento:active { transform: scale(.97); box-shadow: inset 0 0 0 1.5px var(--oro); }
.bottone.secondario { background: transparent; color: var(--testo); box-shadow: inset 0 0 0 1.5px var(--bordo); font-family: var(--font); }

.livelli { background: rgba(8,14,34,.6); box-shadow: inset 0 0 0 1.5px rgba(232,182,76,.35); }
.livelli button { font-family: var(--font-titolo); letter-spacing: .12em; }
.livelli button[aria-pressed="true"] {
  background: linear-gradient(180deg, #F7D885, #D9A23A); color: #1A1206;
  box-shadow: 0 2px 8px rgba(232,182,76,.35);
}
.livelli-nota { color: #C9CFE2; }

.regole li::before { font-family: var(--font-titolo); }
.esito { font-family: var(--font-titolo); letter-spacing: .1em; }
.riepilogo .valore { font-family: var(--font-titolo); color: var(--oro-chiaro); }
.dettagli { background: rgba(16,28,63,.7); box-shadow: inset 0 0 0 1px rgba(232,182,76,.28); }

#pausa .riquadro { background: linear-gradient(180deg, #14224B, #0E1838); box-shadow: 0 0 0 1.5px rgba(232,182,76,.45), 0 24px 60px rgba(0,0,0,.6); }
#pausa h2 { color: var(--oro-chiaro); }

/* La fascia dei messaggi (SCACCO!, PROMOZIONE!) su fondo notte, bordata d'oro. */
#fascia { background: rgba(9,16,38,.9); letter-spacing: .16em; top: 15%; }

/* Il conto alla rovescia: alone d'oro, non rosso (il rosso e' solo pericolo). */
#conto { background: radial-gradient(circle at center, rgba(8,14,34,.25), rgba(8,14,34,.6)); }
#conto span { text-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 40px rgba(232,182,76,.7); }

/* PC / cabinato (schermo orizzontale): la scacchiera ha i vassoi ai lati (gioco.js),
   l'HUD si allarga con lei. Sul telefono non cambia niente. */
html.orizzontale #hud { max-width: 1500px; }