/* Briscola Heroes — palette sopra Story (foglio di sola sovrascrittura).
   Idea: NON cambiare il template, cambiargli i colori. Il fondo resta
   chiaro e sobrio, ma smette di essere bianco di sistema: diventa il
   bianco d'osso su cui sono dipinte le carte. L'accento azzurro/corallo
   del template lascia il posto all'ocra del mazzo. */

:root {
	--bh-ground:   #f7f3e8;              /* l'osso delle carte classiche */
	--bh-ground-2: #f1ead9;              /* fascia alternata, appena piu' calda */
	--bh-ink:      #2b1e14;              /* il bruno dei tratti, al posto del nero */
	--bh-ink-soft: rgba(43, 30, 20, 0.78);
	--bh-accent:   #9a6b12;              /* ocra scuro: leggibile sul chiaro */
	--bh-accent-2: #c8961f;              /* l'oro, solo per gli stati attivi */
	--bh-line:     rgba(43, 30, 20, 0.15);
}

body,
#wrapper.divided > section,
#wrapper.divided > footer {
	background-color: var(--bh-ground);
	color: var(--bh-ink-soft);
}

/* Le sezioni pari prendono il fondo appena piu' caldo: il ritmo che
   prima faceva la riga di separazione, ora lo fa il colore. */
#wrapper.divided > section:nth-of-type(even) {
	background-color: var(--bh-ground-2);
}

h1, h2, h3, h4, h5, h6, strong, b, summary {
	color: var(--bh-ink);
}

a { color: var(--bh-accent); }
a:hover, a:focus { color: var(--bh-accent-2); }

/* Icone dei negozi: cerchio bruno, oro al passaggio del mouse. */
.icon.style2, .icon.style2:before { color: var(--bh-ink); }
.icon.style2:hover, .icon.style2:hover:before { color: var(--bh-accent-2); }

blockquote {
	border-left-color: var(--bh-accent);
	color: var(--bh-ink);
}

.button, input[type="submit"] {
	color: var(--bh-ink) !important;
	box-shadow: inset 0 0 0 1px var(--bh-line) !important;
}
.button:hover, input[type="submit"]:hover {
	color: var(--bh-accent-2) !important;
	box-shadow: inset 0 0 0 1px var(--bh-accent-2) !important;
}

.inner > details { border-top-color: var(--bh-line); }
.inner > details:last-of-type { border-bottom-color: var(--bh-line); }

#langBtn {
	background: var(--bh-ground);
	color: var(--bh-ink);
	border-color: var(--bh-line);
}

/* La fascia di carte ha il fondo crema stampato dentro il PNG: su un
   fondo osso si posa senza stacco. */

/* ---------------------------------------------------------------------
   Tipografia: Cinzel per le intestazioni, lo stesso lapidario romano che
   l'app usa per il titolo e per i nomi delle carte. Il file e' quello del
   gioco (assets/fonts/Cinzel-Variable.ttf, licenza SIL OFL, testo in
   Cinzel-OFL.txt): servito da noi, nessuna chiamata a terzi.
   Il corpo del testo resta al sans del template: Cinzel e' un font da
   titoli, su un paragrafo lungo si legge male.
   --------------------------------------------------------------------- */

@font-face {
	font-family: "Cinzel";
	src: url("../fonts/Cinzel-Variable.ttf") format("truetype-variations"),
	     url("../fonts/Cinzel-Variable.ttf") format("truetype");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

h1, h2, h3,
.banner h1,
#langBtn {
	font-family: "Cinzel", Georgia, "Times New Roman", serif;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* Cinzel ha un'altezza-x bassa: alle stesse misure sembra piu' piccolo
   del sans, quindi le intestazioni maggiori crescono appena. */
.banner h1 { font-weight: 700; letter-spacing: 0.02em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.15em; }