/* =========================================================
   BASE.CSS — fondamenta comuni a tutto il sito
   Qui ci sono: reset, colori, tipografia, bottoni, footer.
   I colori dei due universi stanno in fondo a questo file.
   ========================================================= */

/* --- Reset essenziale ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* --- Variabili globali ----------------------------------------------- */
:root {
  /* Guscio dello studio: il neutro che tiene insieme i due mondi */
  --studio-fondo:  #08090f;
  --studio-testo:  #e8e6ef;
  --studio-tenue:  #8d8ba0;

  /* Tipografia */
  --f-corpo:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:   "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-drone:  "Chakra Petch", var(--f-corpo);   /* display universo droni */
  --f-luce:   "Fraunces", Georgia, serif;        /* display universo poetico */

  /* Scala tipografica fluida */
  --t-xs:   clamp(.72rem, .68rem + .18vw, .82rem);
  --t-sm:   clamp(.84rem, .8rem + .2vw, .95rem);
  --t-base: clamp(1rem, .95rem + .28vw, 1.13rem);
  --t-md:   clamp(1.2rem, 1.05rem + .7vw, 1.6rem);
  --t-lg:   clamp(1.7rem, 1.3rem + 2vw, 3rem);
  --t-xl:   clamp(2.6rem, 1.6rem + 5vw, 6.4rem);

  /* Ritmo verticale e larghezze */
  --spazio-sezione: clamp(4.5rem, 9vw, 9rem);
  --colonna: min(100% - 2.4rem, 68rem);
  --lettura: 62ch;

  /* Curve di animazione */
  --molla: cubic-bezier(.22, .9, .28, 1);
  --dolce: cubic-bezier(.4, 0, .2, 1);
}

body {
  font-family: var(--f-corpo);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--studio-testo);
  background: var(--studio-fondo);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* --- Accessibilità --------------------------------------------------- */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

.salta-al-contenuto {
  position: absolute; left: 1rem; top: -6rem; z-index: 999;
  padding: .7rem 1.1rem; background: #fff; color: #000; border-radius: 4px;
  transition: top .2s var(--dolce);
}
.salta-al-contenuto:focus { top: 1rem; }

.solo-lettori-schermo {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Bottoni --------------------------------------------------------- */
.bottone {
  --b-colore: currentColor;
  position: relative;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .95rem 1.9rem;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid color-mix(in srgb, var(--b-colore) 55%, transparent);
  color: var(--b-colore);
  background: color-mix(in srgb, var(--b-colore) 8%, transparent);
  overflow: hidden;
  transition: transform .35s var(--molla), background-color .35s var(--dolce),
              box-shadow .35s var(--dolce), color .35s var(--dolce);
}
.bottone:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--b-colore) 18%, transparent);
  box-shadow: 0 10px 34px -12px var(--b-colore);
}
.bottone:active { transform: translateY(0); }

/* Variante piena, per l'azione principale (es. wishlist Steam) */
.bottone--pieno {
  background: var(--b-colore);
  color: var(--su-pieno, #08090f);
  border-color: var(--b-colore);
}
.bottone--pieno:hover { background: var(--b-colore); filter: brightness(1.1); }

/* --- Barra in alto (pagine gioco) ------------------------------------ */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  font-size: var(--t-sm);
  /* Sopra l'hero (che è sempre scuro) la barra è trasparente e chiara.
     Dopo lo scorrimento diventa piena: vedi .barra.compatta in gioco.css */
  color: #fdf3e4;
  background: transparent;
  transition: background-color .4s var(--dolce), color .4s var(--dolce);
}
.barra__studio { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; }
.barra__punto {
  width: .52rem; height: .52rem; border-radius: 50%;
  background: var(--accento);
  box-shadow: 0 0 12px var(--accento);
}
.barra__ritorno { display: inline-flex; align-items: center; gap: .5rem; opacity: .72; transition: opacity .3s; }
.barra__ritorno:hover { opacity: 1; }
.barra__ritorno svg { width: 1.05em; height: 1.05em; }

/* --- Footer ---------------------------------------------------------- */
.pie {
  padding: clamp(3rem, 7vw, 5.5rem) 0 3rem;
  border-top: 1px solid color-mix(in srgb, var(--testo) 12%, transparent);
}
.pie__griglia {
  width: var(--colonna); margin-inline: auto;
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: start;
}
.pie__nota { color: var(--tenue); font-size: var(--t-sm); max-width: 34ch; }
.pie__link { display: block; padding: .25rem 0; color: var(--tenue); transition: color .25s, transform .25s; }
.pie__link:hover { color: var(--accento); transform: translateX(3px); }
.pie__coda {
  width: var(--colonna); margin: 2.8rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--testo) 8%, transparent);
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
  font-size: var(--t-xs); color: var(--tenue);
}

/* =========================================================
   I DUE UNIVERSI
   Ogni pagina gioco imposta data-universo="drone" | "luce"
   sul tag <html>: da lì cambiano tutti i colori.
   ========================================================= */

/* Universo 1 — arena notturna, luci al neon dei droni */
[data-universo="drone"] {
  --fondo:      #070b1e;
  --fondo-alto: #0d1435;
  --testo:      #e7eeff;
  --tenue:      #93a3ca;
  --accento:    #4ce1ff;   /* ciano: le luci di posizione */
  --accento-2:  #ff2e7e;   /* magenta: le porte dell'arena */
  --accento-3:  #ffb259;   /* ambra: i fari */
  --su-pieno:   #04060f;
  --f-titolo:   var(--f-drone);
}

/* Universo 2 — crepuscolo dipinto a mano */
[data-universo="luce"] {
  --fondo:      #f2e7d5;
  --fondo-alto: #e8d9c2;
  --testo:      #2e2233;
  --tenue:      #6b5c68;
  --accento:    #55786b;   /* verde salvia */
  --accento-2:  #d98c87;   /* rosa sbiadito */
  --accento-3:  #e3a85c;   /* ocra della lanterna */
  --su-pieno:   #f7f0e4;
  --f-titolo:   var(--f-luce);
}

/* --- Rispetto delle preferenze di movimento -------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}