/* Computer · Base: font, reset ed elementi. Mobile-first: l'app occupa lo schermo intero. */

/* Font self-host in fonts/ (OFL, Fontsource 5.3.0): solo Antonio (condensato LCARS) per titoli, testo, dati e console. */
@font-face {
  font-family: 'Antonio';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../assets/fonts/antonio-latin-wght.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  background: var(--color-screen);
  color: var(--color-ink);
  font: var(--text-xl)/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-touch-callout: none;
}

h1, h2, h3, p, figure { margin: 0; }

button, input { font: inherit; color: inherit; }
button {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-base), border-color var(--dur-base), color var(--dur-base), filter var(--dur-base);
}
button, a, input { touch-action: manipulation; }
button:disabled { cursor: default; opacity: .5; }
button:active:not(:disabled) { transform: scale(.965); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 4px; }

@media (hover: hover) {
  button:hover:not(:disabled) { filter: brightness(1.12); }
}


/* Barre di scorrimento mai visibili: si scorre con il dito o con la rotella del mouse. */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

/* hidden deve vincere sui display dei componenti: unico !important di layout, voluto. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Senza JavaScript: la classe no-js resta su <html> e si vede solo l'avviso. */
.no-js .stage { display: none; }
.noscript {
  max-width: 30em;
  margin: 20vh auto 0;
  padding: 0 var(--space-4);
  color: var(--color-amber);
  font: 600 1.25rem/1.4 var(--font-display);
  text-align: center;
}

/* Movimento ridotto: si spengono animazioni e transizioni ovunque.
   !important necessario per prevalere sulle animazioni dei singoli componenti. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}