/* =====================================================================
   THEME — L'UNICO FILE DA TOCCARE PER IL REBRAND
   ---------------------------------------------------------------------
   Valori campionati dalle grafiche consegnate dal cliente (Topps).
   Cambiando questi valori si ri-veste tutto il gioco.
   ===================================================================== */

:root {
  /* --- Colori brand -------------------------------------------------- */
  --brand:            #DE1A21;   /* rosso di fondo delle grafiche        */
  --brand-deep:       #9E1219;   /* rosso scuro, ombre e pannelli        */
  --brand-bright:     #ED1C24;   /* rosso acceso del logo                */
  --accent:           #FFFFFF;   /* accento: timer, coppia trovata       */
  --accent-deep:      #FFD166;

  --ok:               #FFFFFF;   /* coppia trovata / vittoria            */
  --ko:               #121212;   /* tempo agli sgoccioli                 */

  --ink:              #FFFFFF;
  --ink-soft:         rgba(255,255,255,.80);
  --ink-faint:        rgba(255,255,255,.50);

  /* --- Sfondo -------------------------------------------------------- */
  /* Le due schermate hanno la loro immagine (vedi base.html).           */
  /* Questo gradiente si vede solo se un'immagine non carica.            */
  --bg-gradient:
      radial-gradient(120% 90% at 50% -10%, var(--brand-bright) 0%, transparent 60%),
      linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);

  /* --- Carte --------------------------------------------------------- */
  --card-ratio:       1.4;       /* altezza / larghezza (5:7)            */
  --card-radius:      clamp(10px, calc(var(--sw) * 1.6), 22px);
  --card-bg:          #DE1A21;   /* si vede solo di taglio, durante il flip */

  /* --- Superfici / vetro --------------------------------------------- */
  --glass:            rgba(255,255,255,.16);
  --glass-strong:     rgba(0,0,0,.42);
  --glass-border:     rgba(255,255,255,.34);
  --panel:            rgba(24,4,6,.92);   /* pannelli e schermata finale */

  /* --- Tipografia ----------------------------------------------------- */
  /* Montserrat fornito dal cliente, in locale: nessuna richiesta di rete */
  --font: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* --- Tempi delle animazioni ----------------------------------------- */
  --flip-time:        620ms;
  --flip-ease:        cubic-bezier(.18,.86,.28,1.02);
}

/* =====================================================================
   FONT — file locali, funzionano offline
   ===================================================================== */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: block;
}