/* ======================================================================
   BASE: reset, documento e tipografia globale
   Generato dalla migrazione Fase 0; modificare nel file della responsabilita.
   ====================================================================== */

/* Barlow Condensed: titoli e numeri. Il corpo del testo resta sul font di
   sistema, che ha tutti i pesi veri e non costa un byte. Gli intervalli di
   font-weight servono a questo: il gioco chiede anche 900, e senza un file
   dichiarato per quel peso il browser lo inventa ingrassando i contorni. */
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 400 550;
  src: url("../assets/fonts/BarlowCondensed-Medium.ttf") format("truetype"); font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 551 690;
  src: url("../assets/fonts/BarlowCondensed-SemiBold.ttf") format("truetype"); font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 691 900;
  src: url("../assets/fonts/BarlowCondensed-Bold.ttf") format("truetype"); font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow-x: hidden; }

body {
  background-attachment: fixed;
  color: var(--text-primary);
  font-size: var(--type-corpo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#app { margin: 0 auto; }

h1 { font-size: 1.75rem; line-height: 1.15; letter-spacing: -.4px; }
h2 { font-size: 1.15rem; line-height: 1.2; margin-bottom: .5rem; letter-spacing: -.2px; }
/* Il titolo di una card e un titolo, non un occhiello. Prima erano dodici
   micro-etichette lime tutte uguali: quando tutto e un titolo, niente lo e.
   Il lime torna a voler dire una cosa sola, cioe una scelta da fare. */
h3 {
  margin-bottom: .6rem;
  font: 600 var(--type-sezione)/1.15 var(--font-display-ui);
  text-transform: uppercase; letter-spacing: .01em;
  color: var(--text-primary);
}

a { color: var(--accent-player); }

body {
  background:
    linear-gradient(color-mix(in srgb, var(--fx-lift) 1.8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--fx-lift) 1.8%, transparent) 1px, transparent 1px),
    radial-gradient(900px 560px at 72% -10%, color-mix(in srgb, var(--state-positive) 10%, transparent), transparent 68%),
    linear-gradient(155deg, var(--scene-background-a), var(--scene-background-b) 64%);
  background-size: 48px 48px, 48px 48px, auto, auto;
  font-family: var(--font-ui);
}

#app { max-width: 1240px; padding: 18px 18px clamp(24px, 5dvh, 56px); }
#app.app-enter { animation: appEnter .38s cubic-bezier(.2,.75,.2,1) both; }
h1 .ico, h2 .ico, h3 .ico { stroke-width: 2.1; }