/*SOLO-SITO-INIZIO*/
/* Font ospitati sul nostro server, come nel resto del sito: nessuna chiamata a Google (GDPR). */
@font-face { font-family: 'Oswald'; src: url('/fonts/oswald-latin.woff2') format('woff2'); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/fonts/roboto-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; }
/*SOLO-SITO-FINE*/

/* Sala buia a candele: il ciclista di profilo, l'oro del sito e' la luce;
   piu' sali di livello piu' la sala diventa una discoteca. Scuro per scelta. */
:root {
  --notte: #0b0a08;
  --sala: #17140f;
  --linea: #2e281e;
  --oro: #FFB800;
  --oro-chiaro: #FFD666;
  --fiamma: #ff9d2e;
  --magenta: #ff4f9a;
  --ciano: #4fd8ff;
  --gesso: #f3eee4;
  --fumo: #9b9384;
  --fuori: #ff6a5c;
  --inchiostro: #1a1300;
  --velo: rgba(11, 10, 8, .82);
  --display: 'Oswald', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
  --testo: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--notte); color: var(--gesso);
  font-family: var(--testo); font-size: 15px; overflow: hidden;
  overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.app {
  position: relative; box-sizing: border-box; height: 100%; height: 100dvh;
  max-width: 860px; margin: 0 auto;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.scena { position: relative; min-height: 0; touch-action: manipulation; }
.app.scorri .scena { touch-action: none; }
#tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.btn-pausa {
  position: absolute; top: 6px; right: 0; width: 42px; height: 42px; z-index: 2;
  border-radius: 50%; border: 1px solid var(--linea); background: var(--sala); color: var(--gesso);
  display: grid; place-items: center; cursor: pointer;
}

/* La croce: frecce su, giu', sinistra, destra e il centro per tap e sprint. */
.comandi {
  --lato: clamp(70px, 23vw, 96px);
  --alto: clamp(50px, 7.4vh, 72px);
  display: grid; justify-content: center; gap: 7px;
  grid-template-columns: repeat(3, var(--lato));
  grid-template-rows: repeat(3, var(--alto));
  grid-template-areas: ". su ." "sx tap dx" ". giu .";
  padding-block: 8px 12px;
}
.app.scorri .comandi { display: none; }
.comandi button {
  appearance: none; cursor: pointer; touch-action: none; min-width: 0;
  border-radius: 14px; border: 1px solid var(--linea); background: var(--sala); color: var(--gesso);
  font-family: var(--display); font-weight: 600; font-size: clamp(14px, 2.1vh, 19px);
  letter-spacing: .08em; text-transform: uppercase;
  display: grid; place-content: center; justify-items: center; gap: 2px;
  transition: transform .06s, background-color .06s;
}
.b-su { grid-area: su; } .b-giu { grid-area: giu; } .b-sx { grid-area: sx; } .b-dx { grid-area: dx; } .b-tap { grid-area: tap; }
.comandi button svg { width: 20px; height: 20px; }
.b-su svg { color: var(--oro-chiaro); }
.b-giu svg { color: var(--fiamma); }
.b-sx svg, .b-dx svg { color: var(--gesso); }
.comandi .b-tap { background: var(--oro); border-color: var(--oro); color: var(--inchiostro); border-radius: 50%; }
.comandi button.premuto { transform: scale(.94); background: var(--linea); }
.comandi .b-tap.premuto { background: var(--oro-chiaro); }
.sotto { font: 400 10px/1 var(--testo); letter-spacing: .02em; text-transform: none; opacity: .75; }
.tasto { display: none; font: 400 10px/1 var(--testo); letter-spacing: .03em; text-transform: none; color: var(--fumo); }
.b-tap .tasto { color: var(--inchiostro); opacity: .7; }
@media (hover: hover) and (pointer: fine) { .tasto { display: block; } }

button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: 3px; }

.velo {
  position: absolute; inset: 0; z-index: 5; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: grid; place-items: center; background: var(--velo);
  padding-block: 20px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  touch-action: pan-y;
}
.pannello { width: 100%; max-width: 440px; display: grid; gap: 16px; }
.occhiello { margin: 0; font: 500 12px/1.3 var(--testo); letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }
.velo h1, .velo h2 {
  margin: 0; font-family: var(--display); font-weight: 600; text-transform: uppercase;
  line-height: .92; letter-spacing: .01em; text-wrap: balance;
}
.velo h1 { font-size: clamp(44px, 12.5vw, 74px); }
.velo h2 { font-size: clamp(34px, 9.5vw, 54px); }
.velo .oro { color: var(--oro); }
.velo p { margin: 0; line-height: 1.5; max-width: 60ch; }
.piccolo { font-size: 13px; color: var(--fumo); }
.etichetta { font-size: 11px !important; letter-spacing: .16em; text-transform: uppercase; color: var(--fumo); }

.mosse { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.mosse li { display: grid; justify-items: center; gap: 6px; font: 600 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.segno {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid currentColor; box-sizing: border-box;
}
.segno svg { width: 13px; height: 13px; }
.segno.su { color: var(--oro-chiaro); }
.segno.giu { color: var(--fiamma); }
.segno.sx, .segno.dx { color: var(--gesso); }
.segno.tap { color: var(--oro); background: var(--oro); }
.segno.sprint { width: 46px; border-radius: 999px; color: var(--oro); background: linear-gradient(90deg, var(--oro) 0 34px, rgba(255, 184, 0, .45) 34px); }

.scelta { display: grid; gap: 8px; }
.opzioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.interruttore { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.interruttore button {
  appearance: none; cursor: pointer; min-width: 0;
  font: 600 14px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  padding: 12px 6px; border-radius: 10px; border: 1px solid var(--linea);
  background: transparent; color: var(--gesso);
}
.interruttore button[aria-checked="true"] { background: var(--gesso); color: var(--notte); border-color: var(--gesso); }
.interruttore button:disabled { color: var(--linea); cursor: default; }
.interruttore.generi { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

.azioni { display: grid; gap: 10px; }
.due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.primario, .secondario {
  appearance: none; cursor: pointer; text-decoration: none; text-align: center;
  font: 600 18px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
  padding: 18px 20px; border-radius: 999px;
}
.primario { background: var(--oro); color: var(--inchiostro); border: 0; }
.secondario { background: transparent; color: var(--gesso); border: 1px solid var(--linea); }
.numeri { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.numeri div { display: grid; gap: 4px; min-width: 0; }
.numeri dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fumo); }
.numeri dd { margin: 0; font: 600 32px/1 var(--display); font-variant-numeric: tabular-nums; }
.nuovo { color: var(--oro-chiaro); font-weight: 500; }
.consiglio { border-left: 2px solid var(--oro); padding-left: 12px; font-size: 14px; }

.firma { display: grid; gap: 8px; }
.firma .riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.firma input {
  min-width: 0; font: 400 16px/1.2 var(--testo); color: var(--gesso); background: var(--sala);
  border: 1px solid var(--linea); border-radius: 12px; padding: 14px 14px;
  -webkit-user-select: text; user-select: text;
}
.firma input::placeholder { color: var(--fumo); }
.firma .primario { padding: 14px 18px; font-size: 16px; }
.errore { color: var(--fuori); font-size: 13px; }
.classifica { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: posto; }
.classifica li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 9px 10px; border-radius: 8px; counter-increment: posto;
}
.classifica li::before { content: counter(posto); font: 600 15px/1 var(--display); color: var(--fumo); font-variant-numeric: tabular-nums; }
.classifica li:nth-child(1)::before { color: var(--oro); }
.classifica li.tu { background: var(--sala); outline: 1px solid var(--oro); }
.classifica .chi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classifica .chi small { color: var(--fumo); font-size: 12px; margin-left: 6px; }
.classifica .quanti { font: 600 17px/1 var(--display); font-variant-numeric: tabular-nums; }
/* La pagina d'errore: il messaggio sta sopra il gioco, separato da un filo. */
.avviso-404 { display: grid; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--linea); }
.link-oro { color: var(--oro-chiaro); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .comandi button { transition: none; } }