/* Gettoni da DIREZIONE.md (C, Carta di bordo). I valori stanno qui; il perché sta in DIREZIONE.md. */
@font-face { font-family: "Old Standard TT"; src: url("/fonts/old-standard-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Old Standard TT"; src: url("/fonts/old-standard-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Old Standard TT"; src: url("/fonts/old-standard-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
:root {
  --carta: #F1E6D2;
  --inchiostro: #23272B;
  --acqua: #C6D8CF;
  --rosso: #C4452C;
  --matita: #5B5F63;
  --f: "Old Standard TT", "Times New Roman", serif;
  --cifre: "Barlow Condensed", "Arial Narrow", sans-serif;
  --scacchi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 0h40v40H0zM40 40h40v40H40z' fill='%2323272B'/%3E%3C/svg%3E");
  --stampa: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--carta); color: var(--inchiostro); font: 400 19px/1.5 var(--f); }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--rosso); outline-offset: 3px; }
.salta { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--inchiostro); color: var(--carta); padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center; }
.salta:focus { top: 12px; }
/* il cerchio rosso numerato: l'elemento che dà carattere */
.n { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--rosso); border-radius: 50%; font-style: italic; font-size: 14px; line-height: 1; flex: none; }
.tasto { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 24px; border: 1.5px solid var(--inchiostro); background: var(--carta); color: var(--inchiostro); font: 700 17px/1 var(--f); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform 160ms var(--stampa), background-color 160ms var(--stampa); }
.tasto.primo { background: var(--inchiostro); color: var(--carta); }
.tasto:hover { background: var(--acqua); }
.tasto.primo:hover { background: #3a4046; }
.tasto:active { transform: scale(.98); }
.tasto:disabled { opacity: .5; cursor: default; }
.tasto.in-attesa { cursor: progress; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }