/* ══════════════════════════════════════════════════════════════════════
   ohJucky — Roblox Systems Developer
   ──────────────────────────────────────────────────────────────────────
   Struttura: hero color sabbia a schermo pieno STICKY, e sopra di esso
   scorre il "foglio" crema con tutto il resto, separato da onde SVG.
   Il verde oliva è l'accento, non il fondo.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette ── */
  --cream:      #f5f1e4;
  --sandstone:  #e0dbce;
  --white:      #ffffff;
  --ink:        #2c2e2a;
  --night:      #161c12;   /* sezione Work, virata oliva */
  --night-soft: #222a1b;
  --stone:      #80827f;
  --fog:        #a3a69e;

  /* ── SABBIA E OLIVA ────────────────────────────────────────────
     L'hero è chiaro e il verde fa l'accento: nome, pulsanti, pallini,
     cerchi disegnati. Il colore si usa poco, e proprio per questo pesa.

     ✏️ Per cambiare la tinta verde tocca --olive e ricalcola gli altri
        due: --olive-deep è lo stesso colore con luminosità −14%,
        --olive-lite lo stesso con luminosità 62%. */
  --sand:       #e8dcc4;                 /* fondo dell'hero */
  --sand-0:     rgba(232, 220, 196, 0);  /* stesso colore trasparente */

  --olive:      #3f6b1f;   /* accento — nome, pulsanti, pallini */
  --olive-deep: #1e340f;   /* estrusione del nome */
  --olive-lite: #94db61;   /* accenti sul fondo scuro */

  --coral:      #d4674c;   /* più profondo dell'arancio acceso di prima */
  --gold:       #a17c39;   /* terzo accento caldo, al posto dell'azzurro */

  --head-fg: var(--ink);      /* colore del menu, cambiato da script.js */

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Font display: nome, titoli grandi e numeri.
     Il testo che si legge davvero resta in Inter. */
  --display: 'Lilita One', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--cream); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }


/* ══════════════════════════════════════════════════════════════════════
   SCALA TIPOGRAFICA
   ══════════════════════════════════════════════════════════════════════ */

/* Usata solo per i tre numeri delle statistiche.
   ⚠️ La misura è vincolata dalla colonna, non dallo schermo: da 640px
      in su le celle sono tre affiancate. "2.1M" in Lilita One misura
      1.95 em, e il cerchio disegnato lo allarga del 54% → 3 em.

      A 6.4rem il numero riempiva tutta la sua scatola e il cerchio,
      largo solo il 132%, gli finiva SOPRA invece che attorno: le cifre
      erano tagliate dal tratto e il segno disegnato non si leggeva più.
      A 4.1rem "2.1M" misura 128px e il cerchio 197px, dentro una
      colonna da 341px: il tratto abbraccia il numero e resta aria fra
      i due. Se rialzi questa misura, allarga anche .scribble. */
.t-display    { font-size: clamp(2.9rem, 4.8vw, 4.1rem);    font-weight: 500; line-height: .95;  letter-spacing: -.06em; }
.t-heading-lg { font-size: clamp(2.5rem, 6vw, 5.0625rem);   font-weight: 500; line-height: 1.05; letter-spacing: -.06em; }

/* Lilita One va sui titoli grandi e sui numeri, dove il peso aiuta.
   Non sui paragrafi-titolo lunghi (.intro-h) né sui titoli piccoli:
   lì diventerebbe pesante da leggere. */
.t-display,
.t-heading-lg,
.partner-h,
.sys-h {
  font-family: var(--display);
  font-weight: 400;          /* Lilita One ha un solo peso */
  letter-spacing: -.03em;
}
.t-heading    { font-size: clamp(1.9rem, 4vw, 3.3125rem);   font-weight: 500; line-height: 1.15; letter-spacing: -.04em; }
.t-heading-sm { font-size: clamp(1.375rem, 2.2vw, 1.875rem);font-weight: 500; line-height: 1.2;  letter-spacing: -.02em; }
.t-sub        { font-size: 1.25rem;    font-weight: 400; line-height: 1.25; }
.t-body       { font-size: 1.0625rem;  line-height: 1.5; }
.t-sm         { font-size: .9375rem;   line-height: 1.5; }
.t-micro {
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.tnum { font-variant-numeric: tabular-nums; }

/* Testo che c'è solo per chi legge con uno screen reader: nella riga
   dei numeri delle card l'etichetta ("Visits", "Online now") a schermo
   è sostituita dall'icona, ma deve restare scritta da qualche parte. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ══════════════════════════════════════════════════════════════════════
   CONTENITORI
   ══════════════════════════════════════════════════════════════════════ */

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.pillow {
  background: var(--white);
  color: var(--ink);
  border-radius: clamp(32px, 4vw, 50px);
}

.band { padding-block: clamp(88px, 11vh, 136px); position: relative; overflow: hidden; }
.band-tight { padding-block: clamp(56px, 7vh, 92px); }


/* ══════════════════════════════════════════════════════════════════════
   HEADER FISSO
   ══════════════════════════════════════════════════════════════════════ */

.site-head {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  color: var(--head-fg);
  transition: color .5s ease;
}

.head-inner { display: flex; height: 64px; align-items: center; justify-content: space-between; gap: 20px; }

.head-brand {
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.head-nav ul { display: flex; align-items: center; gap: 32px; }
.head-nav a {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .6;
  transition: opacity .3s ease;
}
.head-nav a:hover { opacity: 1; }

.head-burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.head-burger span {
  display: block; width: 20px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}
.head-burger.is-open span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.head-burger.is-open span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 64px 0 auto;
  z-index: 39;
  background: var(--white);
  padding: 8px clamp(20px, 4vw, 48px) 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px -20px rgba(30, 32, 27, .3);
}

/* L'attributo hidden vale display:none con specificità 0, quindi la
   regola qui sopra lo batteva e il menu restava sempre visibile.
   Queste due regole lo tengono chiuso finché non lo si apre. */
.mobile-menu[hidden] { display: none; }
@media (min-width: 768px) { .mobile-menu { display: none; } }
.mobile-menu a {
  padding: 15px 0;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  border-bottom: 1px solid rgba(44, 46, 42, .1);
}
.mobile-menu a:last-child { border-bottom: 0; }


/* ══════════════════════════════════════════════════════════════════════
   HERO — sabbia, sticky, a schermo pieno
   ══════════════════════════════════════════════════════════════════════ */

.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  min-height: 100lvh;
  overflow: hidden;
  background: var(--sand);
}

.hero-stage { display: flex; width: 100%; flex-grow: 1; flex-direction: column; }

.hero-copy {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 80px;
  padding-bottom: 24px;

  /* Dissolvenza allo scroll. I valori li aggiorna script.js sul
     contenitore .hero-stage; le variabili si ereditano fin qui.
     Le metto su .hero-copy e non sui figli perché quelli hanno già
     un'animazione d'ingresso, e in CSS le animazioni battono lo
     stile inline: scriverci sopra non avrebbe alcun effetto. */
  opacity: var(--hero-fade, 1);
  transform: translateY(var(--hero-y, 0px));
}

.hero-title { perspective: 900px; }

/* Ogni riga del nome ha la SUA maschera, non una sola sul titolo:
   con due righe, le lettere della prima partono da sotto e finirebbero
   sopra la seconda riga, restando visibili.

   ⚠️ NON usare overflow:hidden: ritaglia su tutti e quattro i lati, e
      l'estrusione delle lettere sporge a destra e in basso — il nome
      appariva mozzato ai bordi finché l'animazione non finiva.
      clip-path taglia SOLO sotto: apro tutto il resto e chiudo 42%
      sotto la riga, quanto basta a nascondere le lettere in attesa
      senza toccare l'ombra (che arriva al 25%). */
.hero-line {
  display: inline-block;
  clip-path: inset(-100% -100% -42% -100%);
}
.hero-title.is-open .hero-line { clip-path: none; }

/* ── IL NOME SU TELEFONO ──
   Resta su una riga sola. Per guadagnare spazio stringo il margine
   laterale dell'hero da 20px a 12px: sono 16px in più di larghezza,
   che a 393px valgono circa 5px di corpo in più. */
@media (max-width: 767px) {
  .hero-copy { padding-inline: 12px; padding-top: 68px; }
}

/* ✏️ Il nome sta su UNA riga sola (white-space: nowrap), quindi la
   dimensione è vincolata dalla sua larghezza.
   "ohJucky" in Lilita One misura 3.337 em → più l'estrusione fa 3.477 em.
   A 25vw riempie circa il 93% della larghezza utile sul telefono e si
   ferma a 10.5rem sui monitor grandi. Oltre non si può: a una riga
   sola il limite è la larghezza dello schermo.
   ⚠️ Se cambi il nome cambia anche la larghezza: con un handle più
      lungo abbassa il 23vw, con uno più corto puoi alzarlo. */
.hero-name {
  display: block;
  white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(2.2rem, 25vw, 10.5rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--olive);

  /* L'ESTRUSIONE. Dieci ombre piene sfalsate in diagonale creano un
     blocco solido sotto le lettere — è così che sono fatti i loghi dei
     giochi. Tutto in em, così la profondità scala col testo.
     L'undicesima è un'ombra morbida che stacca il nome dal verde. */
  text-shadow:
    .014em .014em 0 var(--olive-deep),
    .028em .028em 0 var(--olive-deep),
    .042em .042em 0 var(--olive-deep),
    .056em .056em 0 var(--olive-deep),
    .070em .070em 0 var(--olive-deep),
    .084em .084em 0 var(--olive-deep),
    .098em .098em 0 var(--olive-deep),
    .112em .112em 0 var(--olive-deep),
    .126em .126em 0 var(--olive-deep),
    .140em .140em 0 var(--olive-deep),
    .17em  .19em  .07em rgba(30, 52, 15, .28);

  /* inclinazione che segue il mouse — le variabili le scrive script.js */
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

/* ── le singole lettere ──
   .ch  → l'ingresso, sale da sotto con un piccolo rimbalzo
   .ch-in → l'inclinazione fissa e il galleggiamento continuo
   Sono due livelli perché due animazioni sulla stessa proprietà
   si sovrascriverebbero a vicenda. */

.hero-name .ch {
  display: inline-block;
  /* Parte da 170% e non da 112%: la maschera ora si chiude 42% sotto
     il riquadro, quindi la lettera deve iniziare più in basso per
     restare nascosta. 170 − 100 = 70% di margine contro i 42 della
     maschera: nessuno spiraglio. */
  transform: translateY(170%);
  animation: ch-rise .8s cubic-bezier(.2, 1.35, .35, 1) forwards;
  animation-delay: calc(var(--i) * 62ms + 150ms);
}
@keyframes ch-rise { to { transform: translateY(0); } }

.hero-name .ch-in {
  display: inline-block;
  transform: rotate(var(--r, 0deg));
  animation: ch-float 5.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 190ms + 1.5s);
}
@keyframes ch-float {
  0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); }
  50%      { transform: rotate(var(--r, 0deg)) translateY(-.03em); }
}

/* senza JS il nome resta comunque visibile e leggibile */
.no-js .hero-name .ch,
.no-js .hero-name .ch-in { transform: none; animation: none; }

/* Testo chiaro: sull'oliva profondo il contrasto è ribaltato
   rispetto al verde acido di prima. */
.hero-sub   { margin-top: 20px; color: rgba(44, 46, 42, .78); }
.hero-micro { margin-top: 12px; color: rgba(44, 46, 42, .58); }

/* Animazione d'ingresso. Sul deck la metto sui FIGLI e non su
   .hero-deck, così .hero-deck resta libero per la dissolvenza. */
.hero-sub, .hero-micro, .hero-deck > * {
  opacity: 0;
  animation: fade-up .9s cubic-bezier(.22, 1, .36, 1) forwards;
}
.hero-sub      { animation-delay: .5s; }
.hero-micro    { animation-delay: .62s; }
.hero-deck > * { animation-delay: .74s; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hero-deck {
  flex-shrink: 0;
  opacity: var(--deck-fade, 1);
}
.hero-spacer { flex-shrink: 0; flex-grow: .5; min-height: clamp(72px, min(10vw, 14vh), 124px); }

.deck-cap {
  margin-top: clamp(14px, 2.2vh, 26px);
  text-align: center;
  color: rgba(44, 46, 42, .55);
}


/* ══════════════════════════════════════════════════════════════════════
   L'ANELLO 3D
   ──────────────────────────────────────────────────────────────────────
   --deck-r  raggio dell'anello
   --deck-w  larghezza della card, derivata dal raggio.
             Il rapporto .228 è quello che rende l'anello continuo con
             ~26 card: servono circa 2π / 0.228 ≈ 27 card per chiuderlo.
   ══════════════════════════════════════════════════════════════════════ */

/* ⚠️ REGOLA DA RISPETTARE SE CAMBI IL NUMERO DI CARD
   Le card sono disposte lungo una circonferenza di 2πr ≈ 6.283 r.
   La larghezza totale è  numero × rapporto × r.  Se quel prodotto
   supera 6.283 le card si accavallano.

       rapporto massimo = 6.283 / numero di card

   Con 12 card il massimo è 0.524: uso 0.50, che lascia un filo di
   spazio fra una e l'altra. Con 26 card il massimo era 0.24. */
.deck {
  --deck-r: clamp(190px, min(28vw, 45vh), 350px);
  --deck-w: calc(var(--deck-r) * .50);
  position: relative;
  width: 100%;
  height: calc(var(--deck-w) * 1.36);
}

.deck-stage {
  position: absolute;
  inset: 0;
  perspective: calc(var(--deck-r) * 4.8);
}

.deck-ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: deck-spin 104s linear infinite;
}
@keyframes deck-spin {
  0%   { transform: rotateY(0); }
  100% { transform: rotateY(360deg); }
}

/* L'anello NON si ferma mai col mouse: gira sempre.
   Si mette in pausa solo se qualcuno ci arriva col tasto Tab, così
   chi naviga da tastiera riesce a vedere cosa ha selezionato. */
.deck:focus-within .deck-ring { animation-play-state: paused; }

.deck-card {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--deck-w);
  aspect-ratio: 1;
  margin: 0;
  padding: 4px;
  background: var(--white);
  border-radius: 13px;
  box-shadow: 0 12px 26px -12px rgba(60, 48, 24, .34);
  transform: translate(-50%, -50%) rotateY(var(--a)) translateZ(var(--deck-r)) scale(var(--s, 1));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}

/* --s entra nella transform sopra, così l'ingrandimento si somma
   alla posizione sull'anello invece di sostituirla.
   ⚠️ Uso .is-hot invece di :hover perché il browser ricalcola :hover
   solo quando si muove il MOUSE, non quando è la card a scorrere via
   sotto un cursore fermo. La classe la mette script.js, che a ogni
   frame controlla quale card sta davvero sotto al cursore. */
.deck-card.is-hot,
.deck-card:focus-visible {
  --s: 1.13;
  box-shadow: 0 20px 40px -12px rgba(30, 32, 27, .5);
  z-index: 2;
}

.deck-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 9px;
  background: var(--sandstone);
}

/* Nome del gioco: compare in basso sulla card quando ci passi sopra */
.deck-name {
  position: absolute;
  inset: auto 4px 4px;
  padding: 6px 8px;
  border-radius: 0 0 9px 9px;
  background: rgba(30, 32, 27, .86);
  color: #fff;
  font-size: clamp(9px, calc(var(--deck-w) * .072), 13px);
  font-weight: 500;
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.deck-card.is-hot .deck-name,
.deck-card:focus-visible .deck-name { opacity: 1; transform: none; }

/* Sfuma i due lati dell'anello nel verde */
.deck-veil {
  /* La sfumatura laterale è legata alla larghezza della card, ma su
     schermi stretti 1.5 card sono quasi metà schermo: le due sfumature
     si toccavano e restava nitida solo la card centrale. Il tetto del
     20% le tiene separate su qualsiasi larghezza. */
  --deck-fade: min(calc(var(--deck-w) * 1.5), 20%);
  position: absolute;
  inset: -12% -1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--sand) 0,
    var(--sand-0) var(--deck-fade),
    var(--sand-0) calc(100% - var(--deck-fade)),
    var(--sand) 100%);
}


/* ══════════════════════════════════════════════════════════════════════
   IL FOGLIO — scorre sopra l'hero
   ══════════════════════════════════════════════════════════════════════ */

.sheet {
  position: relative;
  z-index: 10;
  background: var(--cream);
}

.wave {
  display: block;
  width: 100%;
  height: clamp(40px, 6vw, 90px);
  margin-bottom: -1px;
}
/* l'onda in cima esce fuori dal foglio, sopra il verde */
.wave-top { position: absolute; inset-inline: 0; bottom: 100%; }


/* ══════════════════════════════════════════════════════════════════════
   INTRO + NUMERI
   ══════════════════════════════════════════════════════════════════════ */

.dot-line { display: flex; align-items: center; gap: 10px; color: var(--stone); }

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--olive);
  flex-shrink: 0;
}
.dot-ink   { background: var(--ink); }
.dot-cream { background: var(--cream); }
.dot-coral { background: var(--coral); }

/* Sul fondo scuro l'oliva profondo sparirebbe: qui serve quello chiaro. */
.night .dot { background: var(--olive-lite); }

.intro-h { margin-top: 32px; max-width: 24ch; }

.pill-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-inline: 22px;
  border: 0;
  border-radius: 50px;
  font-size: .9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.pill:hover { transform: translateY(-2px); }
.pill-grass { background: var(--olive); color: var(--cream); }
.pill-white { background: var(--white); color: var(--ink); }
.pill-ink   { background: var(--ink);   color: var(--cream); justify-content: center; }
.pill-ink:hover { background: var(--night-soft); }
.pill-block { width: 100%; }
.pill:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Blob decorativi che si muovono piano */
.blob { position: absolute; pointer-events: none; border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; }
.blob-a {
  left: -96px; top: 64px;
  width: 224px; height: 224px;
  background: var(--olive);
  opacity: .16;                /* l'oliva è scuro: al 50% diventava una macchia */
  animation: drift 22s ease-in-out infinite;
}
.blob-b {
  right: -40px; bottom: 96px;
  width: 96px; height: 96px;
  background: var(--coral);
  opacity: .35;
  animation: drift 17s ease-in-out infinite reverse;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50%      { transform: translate(26px, -34px) rotate(22deg); }
}
@media (max-width: 767px) { .blob-a { display: none; } }

.tally {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px 40px;
  margin-top: 80px;
}
@media (min-width: 640px) { .tally { grid-template-columns: repeat(3, 1fr); } }

.tally-figure { position: relative; display: inline-block; padding-inline: .14em; }
.tally-figure .t-display { position: relative; display: block; }

/* Il cerchio deve stare ATTORNO al numero, non sopra: queste misure
   vanno insieme a quelle di .t-display, se tocchi una tocca l'altra. */
.scribble {
  position: absolute;
  left: -27%; top: -40%;
  width: 154%; height: 184%;
  pointer-events: none;
}
/* Il cerchio si disegna quando entra nello schermo: il tratto è tutto
   un trattino lungo quanto il percorso (583 unità, misurate con
   getTotalLength), spostato fuori di altrettanto. Portando l'offset a
   zero il trattino rientra e la penna sembra disegnare.
   ⚠️ Se cambi il path in index.html ricontrolla questi due numeri:
      devono restare >= alla lunghezza del percorso. */
.scribble path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.is-drawn .scribble path {
  transition: stroke-dashoffset 1.1s cubic-bezier(.4, 0, .2, 1) .15s;
  stroke-dashoffset: 0;
}
/* sfalsati come i numeri, così i tre cerchi non partono in blocco */
.tally-cell:nth-child(2).is-drawn .scribble path { transition-delay: .27s; }
.tally-cell:nth-child(3).is-drawn .scribble path { transition-delay: .39s; }
.no-js .scribble path { stroke-dashoffset: 0; }

.tally-label { display: block; margin-top: 16px; max-width: 24ch; color: var(--stone); }

/* In colonna singola le celle stanno più strette. La centratura
   arriva dal blocco mobile in fondo al file. */
@media (max-width: 639px) {
  .tally { gap: 48px; }
}


/* ══════════════════════════════════════════════════════════════════════
   WORK (sezione scura)
   ══════════════════════════════════════════════════════════════════════ */

.night {
  background: var(--night);
  color: var(--cream);
  padding-block: clamp(20px, 3vh, 40px) clamp(88px, 11vh, 136px);
  scroll-margin-top: 64px;
}
.night .dot-line { color: var(--fog); }
.night-h { margin-top: 20px; margin-bottom: clamp(40px, 6vh, 72px); }

/* ── Griglia dei giochi ───────────────────────────────────────────
   Layout e griglia presi dal portfolio HEN: le colonne si contano da
   sole (auto-fill) partendo da una larghezza minima, ogni gioco è una
   tessera 16:9 con l'immagine a tutta card e il testo scritto sopra la
   sfumatura. La palette resta la nostra: fondo night, testo crema,
   filo verde --olive-lite dove loro usavano il ciano.

   min(340px, 100%) e non 340px secchi: su uno schermo più stretto di
   così la colonna sarebbe più larga dello schermo e, con overflow-x
   nascosto sul body, il pezzo che sborda sparirebbe invece di
   scorrere. */
.cards {
  display: grid;
  gap: clamp(16px, 2vw, 26px);
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
}

/* Tutta la card è un <a>: dentro non ci possono stare altri link,
   per questo "Play on Roblox" è uno <span> travestito da link. */
.game {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: clamp(20px, 2.4vw, 28px);
  background: var(--night-soft);
  color: var(--cream);
}

/* Il filo chiaro all'hover è un'ombra INTERNA, non un bordo: così
   compare senza cambiare le misure della card e senza far ballare la
   griglia di un pixel. */
.game::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(245, 241, 228, .09);
  transition: box-shadow .3s ease;
}
.game:hover::after,
.game:focus-visible::after { box-shadow: inset 0 0 0 1px rgba(148, 219, 97, .45); }

.game__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--night);
}
.game__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .6, .2, 1);
}
.game:hover .game__media img { transform: scale(1.08); }

/* La sfumatura che regge il testo parte dal NOSTRO night (#161c12),
   non dal nero: così il basso della tessera si fonde con la sezione
   invece di stamparci sopra un rettangolo grigio. */
.game__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
              var(--night) 0%,
              rgba(22, 28, 18, .78) 30%,
              rgba(22, 28, 18, .26) 60%,
              rgba(22, 28, 18, 0) 100%);
}

.game__over {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 15px 18px 16px;
}
.game__name {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin-bottom: 7px;
  /* Un titolo lungo si accorcia con i puntini invece di andare a capo
     e spingere i numeri fuori dalla tessera. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Riga dei numeri: icona + valore, voci separate da un "|" come nella
   reference. Le etichette restano scritte per chi usa uno screen
   reader (.vh), a schermo parla l'icona. */
.game__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
  font-size: .8125rem;
  color: var(--fog);
}
.game__stats > div { display: inline-flex; align-items: center; gap: 6px; }
/* display:inline-flex qui sopra è più forte della regola [hidden]{display:none}
   del browser: senza questa riga la cella "Online now" si vedrebbe lo stesso,
   con un trattino al posto del numero. */
.game__stats > div[hidden] { display: none; }
.game__stats dt { display: inline-flex; }
.game__stats dd { font-variant-numeric: tabular-nums; }

/* Il separatore sta sulla voce che PRECEDE, e solo se dopo di lei c'è
   ancora qualcosa di visibile (:has). Due motivi:
   · "Online now" è l'ultima e parte nascosta — così quando manca non
     resta un "|" appeso in fondo alla riga;
   · su card strette la riga va a capo, e un "|" che chiude la prima
     riga si legge come "continua", mentre uno che la apre sembra un
     errore di battitura.
   Dove :has non c'è, restano solo gli spazi: si legge lo stesso. */
.game__stats > div:not([hidden]):has(+ div:not([hidden]))::after {
  content: "|";
  opacity: .3;
}

/* ── Le icone delle statistiche ──────────────────────────────────
   Sono quelle di dobigstudios.com (Material Design, stile pieno):
   "play circle" per le visite, "people" per chi sta giocando ora,
   "schedule" per la data. Il cuore dei preferiti è della stessa
   famiglia — loro i preferiti non li mostrano.

   Restano un filo più chiare del testo: devono aiutare a trovare il
   dato con un colpo d'occhio, non gridare. */
.stat-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: .75;
}

/* Il rimando al profilo Roblox sotto la griglia, come fa HEN. */
.work-note { margin-top: clamp(28px, 4vh, 44px); }
.work-note a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--olive-lite);
  transition: gap .2s ease;
}
.work-note a:hover { gap: 13px; }


/* ══════════════════════════════════════════════════════════════════════
   PARTNER
   ══════════════════════════════════════════════════════════════════════ */

.partner-h { max-width: none; }

.partner-top {
  display: grid;
  grid-template-columns: minmax(0, 230px) 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: 40px;
}

/* Riquadro quadrato: il logotipo disteso lasciava un rettangolo
   sbilenco accanto al testo. */
/* Riquadro quadrato: il logotipo disteso lasciava un rettangolo
   sbilenco accanto al testo.
   ✏️ Il simbolo riempie il riquadro meno il padding: per ingrandirlo
      ancora abbassa il padding, per rimpicciolirlo alzalo. */
.partner-logo {
  display: grid;
  place-items: center;
  width: 210px;
  aspect-ratio: 1;
  padding: 16px;          /* simbolo a 178px, prima era 116px */
  background: var(--night);
  border-radius: 32px;
  transition: transform .25s ease;
}
.partner-logo img { width: 100%; height: auto; }
.partner-logo:hover { transform: translateY(-3px); }

.partner-lede { max-width: 50ch; color: var(--stone); }
.partner-lede em { color: var(--ink); font-style: normal; font-weight: 500; }

.partner-kicker { margin: clamp(40px, 5vw, 64px) 0 18px; color: var(--stone); }

.partner-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }

.pg { padding: 12px; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.pg:hover { transform: translateY(-5px); }
.pg img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.pg span { display: flex; flex-direction: column; padding: 12px 4px 4px; line-height: 1.3; }
.pg b { font-size: .875rem; font-weight: 500; }
.pg i { font-style: normal; font-size: .75rem; color: var(--stone); }

.partner-fine {
  margin-top: 32px;
  padding-top: 20px;
  max-width: 66ch;
  border-top: 1px solid rgba(44, 46, 42, .12);
  color: var(--fog);
}


/* ══════════════════════════════════════════════════════════════════════
   SYSTEMS + METODO
   ══════════════════════════════════════════════════════════════════════ */

.sys-h { margin-bottom: 44px; }

.sys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sys { padding: clamp(22px, 2.6vw, 32px); }
.sys .t-heading-sm { margin-bottom: 10px; }
.sys p { color: var(--stone); }
.sys-tags { margin-top: 14px; color: var(--fog); }

.method { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.method li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px 0 0;
  border-top: 1px solid rgba(44, 46, 42, .16);
}
.method span { color: var(--fog); }
.method i { font-style: normal; color: var(--stone); }


/* ══════════════════════════════════════════════════════════════════════
   CONTATTI
   ══════════════════════════════════════════════════════════════════════ */

.contact-h { margin: 20px 0 20px; }
.contact-lede { max-width: 44ch; color: var(--stone); margin-bottom: clamp(40px, 5vw, 64px); }

.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: start; }

.contact-card { padding: clamp(24px, 3vw, 40px); }

.field { margin-bottom: 18px; }
.field label {
  display: block;
  margin-bottom: 8px;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--stone);
}
.field input, .field textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--cream);
  border: 1px solid rgba(44, 46, 42, .12);
  border-radius: 14px;
  font-size: 1rem;
  resize: vertical;
  transition: border-color .2s ease, background .2s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--fog); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: var(--white); }
.field.has-error input, .field.has-error textarea { border-color: var(--coral); }
.field-err { display: block; margin-top: 6px; min-height: 16px; font-size: .8125rem; color: #c2402c; }

.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form-sent { padding: 44px 24px; text-align: center; }
.form-sent p { margin-top: 10px; color: var(--stone); }

.contact-links { border-top: 1px solid rgba(44, 46, 42, .14); }
.contact-links li { border-bottom: 1px solid rgba(44, 46, 42, .14); }
.contact-links a { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; transition: padding-left .25s ease; }
.contact-links a:hover { padding-left: 10px; }
.contact-links span { color: var(--stone); }
.contact-links b { font-size: 1.0625rem; font-weight: 500; overflow-wrap: anywhere; }
.contact-links i { font-style: normal; color: var(--fog); }


/* ══════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════ */

.foot { padding-bottom: 28px; }
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid rgba(44, 46, 42, .14);
  color: var(--fog);
}


/* ══════════════════════════════════════════════════════════════════════
   COMPARSA AL SCROLL
   ══════════════════════════════════════════════════════════════════════ */

.band .wrap > *,
.night .wrap > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
}
.is-in .wrap > * { opacity: 1; transform: none; }
.is-in .wrap > *:nth-child(2) { transition-delay: .06s; }
.is-in .wrap > *:nth-child(3) { transition-delay: .12s; }
.is-in .wrap > *:nth-child(4) { transition-delay: .18s; }
.is-in .wrap > *:nth-child(5) { transition-delay: .24s; }

.no-js .band .wrap > *,
.no-js .night .wrap > * { opacity: 1; transform: none; }


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  .sys-grid     { grid-template-columns: repeat(2, 1fr); }
  .partner-grid { grid-template-columns: repeat(3, 1fr); }
  .method       { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .head-nav    { display: none; }
  .head-burger { display: flex; }

  .contact-grid { grid-template-columns: 1fr; }
  .partner-top  { grid-template-columns: 1fr; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .sys-grid     { grid-template-columns: 1fr; }
  .method       { grid-template-columns: 1fr; }

  /* Le tessere restano allineate a sinistra anche dove il resto della
     sezione va in centro: titolo con i puntini, chip e numeri centrati
     dentro un riquadro dai bordi netti sembrano storti. */
  .cards .game { text-align: left; }

  .t-sub { font-size: 1.0625rem; }


  /* ── TUTTO CENTRATO SU TELEFONO ────────────────────────────────
     Su una colonna sola l'allineamento a sinistra lascia il testo
     sbilanciato: i titoli corti finiscono in un angolo e le righe
     lunghe arrivano al bordo. Centrando, ogni blocco respira uguale
     sui due lati.
     I margini automatici servono a centrare anche i blocchi che hanno
     una larghezza massima: senza, il testo sarebbe centrato dentro un
     riquadro che però resta a sinistra. */

  .band .wrap,
  .night .wrap        { text-align: center; }

  .dot-line,
  .pill-row,
  .foot-inner         { justify-content: center; }

  .intro-h,
  .sec-lede,
  .partner-lede,
  .partner-fine,
  .contact-lede,
  .tally-label        { margin-inline: auto; }

  .partner-logo       { margin-inline: auto; }

  /* le celle delle statistiche e delle voci di metodo */
  .tally-cell         { text-align: center; }
  /* in colonna singola il blocco pesava troppo: numero e didascalia
     scendono entrambi di un gradino */
  .tally-label        { font-size: .875rem; margin-top: 12px; max-width: 26ch; }
  .method li          { padding-right: 0; align-items: center; }
  .sys                { text-align: center; }
  .sys-tags           { margin-inline: auto; }

  /* i contatti: niente scorrimento a sinistra all'hover, qui non ha senso */
  .contact-links a       { align-items: center; text-align: center; }
  .contact-links a:hover { padding-left: 0; }

  /* Il form resta allineato a sinistra: il testo digitato dentro un
     campo centrato è scomodo da leggere e correggere. Centro solo le
     etichette, che sono testo di lettura. */
  .contact-card       { text-align: left; }
  .field label        { text-align: center; }
  .form-note,
  .form-sent          { text-align: center; }
}


/* ══════════════════════════════════════════════════════════════════════
   RIDUCI MOVIMENTO
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-name { transform: none; }
  .hero-name .ch    { transform: none; animation: none; }
  .hero-name .ch-in { transform: rotate(var(--r, 0deg)); animation: none; }
  .hero-sub, .hero-micro, .hero-deck > * { opacity: 1; }
  .deck-ring { animation: none; }
  .scribble path { stroke-dashoffset: 0; }
  .band .wrap > *, .night .wrap > * { opacity: 1; transform: none; }
}