/* ═══════════════════════════════════════════
   base.css — Variabili, reset, schermate
   Modifica qui per cambiare palette e font
═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ── Variabili colore ────────────────────── */
:root {
  --void:    #03040a;
  --deep:    #070915;
  --surface: #0d1120;
  --panel:   #121828;
  --line:    rgba(100,140,255,0.1);
  --glow:    #4a8cff;
  --pulse:   #00e5ff;
  --hot:     #ff4060;
  --text:    #e0e8ff;
  --muted:   #4a5580;
  --dim:     #1e2840;
  --verde:   #00c896;
}

/* ── Reset ───────────────────────────────── */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html { touch-action: pan-x pan-y; }

html, body {
  width: 100%; min-height: 100vh;
  background: var(--void);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  overflow-x: hidden;
}

/* ── Schermate ───────────────────────────── */
.screen { display: none; min-height: 100vh; flex-direction: column; background: var(--deep); }
.screen.active { display: flex; }

/* ── Transizioni cambio schermata ────────── */
@keyframes esciSx  { from{opacity:1;transform:translateX(0)}    to{opacity:0;transform:translateX(-30px)} }
@keyframes esciDx  { from{opacity:1;transform:translateX(0)}    to{opacity:0;transform:translateX(30px)} }
@keyframes entraDx { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes entraSx { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }

.esci-sx  { animation: esciSx  .28s ease forwards; }
.esci-dx  { animation: esciDx  .28s ease forwards; }
.in-trans { position: fixed; inset: 0; z-index: 500; background: var(--deep); }
.entra-dx { animation: entraDx .28s ease forwards; }
.entra-sx { animation: entraSx .28s ease forwards; }

/* ── Scrollbar ───────────────────────────── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 99px; }

/* ── Blocca animazioni in quiz e flashcard ─ */
#quiz *, #flashcard * { animation: none !important; }

/* ── Copertina inattiva: fuori dal DOM ────── */
#copertina:not(.active) { display: none !important; pointer-events: none !important; }
#copertina:not(.active) * { visibility: hidden !important; pointer-events: none !important; }