/* ==========================================================================
   DELTA / sito

   L'idea: il sito non "richiama" l'HUD del server, e' l'HUD del server.
   Stessi token di delta_hud (lime #C5FF00 su nero, smusso alto-sinistra /
   basso-destra, esagoni), stessi meccanismi grafici riusati come componenti
   di pagina: il riempimento liquido degli esagoni di stato diventa il
   caricamento, l'arco del tachimetro diventa l'indicatore di scroll, le
   tacche della bussola diventano righelli e separatori.

   Indice
     01  token
     02  reset e fondali
     03  primitive (pannelli, esagoni, tacche, bottoni, titoli)
     04  telaio HUD (boot, cornice, rail, tachimetro di scroll)
     05  header
     06  hero
     07  nastro
     08  feature
     09  contatori
     10  citta'
     11  percorso
     12  galleria
     13  staff
     14  FAQ
     15  chiusura
     16  footer
     17  pagine interne / regolamento
     17b novita' / changelog
     17c briciole e coda del regolamento
     17d pagina 404
     17e barra stato multi-server, accesso nella barra
     17f creator
     17g livelli di supporto
     17h area personale
     18  animazioni
     19  adattamento
   ========================================================================== */

/* ============================================================ 01  token */

/* Kallisto ha un solo taglio: dichiarando 100-900 il browser lo riusa per
   ogni peso invece di sintetizzare un finto grassetto, che su un carattere
   gia' pesante sbaverebbe. Stessa scelta della NUI. */
@font-face {
  font-family: 'Kallisto';
  src: url('../assets/fonts/kallisto.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Kallisto regge le maiuscole spaziate, non i paragrafi lunghi: sul corpo
     del testo passa la sans di sistema, molto piu' leggibile a 15px. */
  --font-display: 'Kallisto', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Scala del lime, costruita attorno a #C5FF00 = hsl(74, 100%, 50%) */
  --p-100: #f8ffe6;
  --p-200: #f1ffc2;
  --p-300: #e1ff80;
  --p-400: #d2ff3d;
  --p-500: #c5ff00;
  --p-600: #9ccc00;
  --p-700: #759900;
  --p-800: #526b00;
  --p-900: #334200;
  --p-950: #1f2900;

  /* Neri virati sul verde, per stare in famiglia con il lime */
  --ink-0: #000000;
  --ink-1: #050603;
  --ink-2: #0a0c06;
  --ink-3: #10130a;
  --ink-4: #181c0e;
  --ink-5: #23281a;

  --text: #f4f7ea;
  --text-dim: #9aa08a;
  --text-faint: #6b7059;

  --danger: #ff4d6d;
  --warning: #ffb020;
  --success: #4bf08a;
  --info: #5bc8ff;

  /* Smusso: angolo alto-sinistra e basso-destra, sempre gli stessi due */
  --cut-xl: 30px;
  --cut-lg: 20px;
  --cut-md: 13px;
  --cut-sm: 9px;
  --cut-xs: 6px;

  --chamfer-xl: polygon(var(--cut-xl) 0, 100% 0, 100% calc(100% - var(--cut-xl)), calc(100% - var(--cut-xl)) 100%, 0 100%, 0 var(--cut-xl));
  --chamfer-lg: polygon(var(--cut-lg) 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%, 0 var(--cut-lg));
  --chamfer-md: polygon(var(--cut-md) 0, 100% 0, 100% calc(100% - var(--cut-md)), calc(100% - var(--cut-md)) 100%, 0 100%, 0 var(--cut-md));
  --chamfer-sm: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
  --chamfer-xs: polygon(var(--cut-xs) 0, 100% 0, 100% calc(100% - var(--cut-xs)), calc(100% - var(--cut-xs)) 100%, 0 100%, 0 var(--cut-xs));

  /* Smusso specchiato: serve solo dove due pannelli si affiancano e i tagli
     devono guardarsi invece di puntare nella stessa direzione. */
  --chamfer-md-alt: polygon(0 0, calc(100% - var(--cut-md)) 0, 100% var(--cut-md), 100% 100%, var(--cut-md) 100%, 0 calc(100% - var(--cut-md)));

  --hexagon: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

  --pane: rgba(0, 0, 0, 0.72);
  --edge: inset 0 0 0 1px rgba(197, 255, 0, 0.16);
  --edge-hot: inset 0 0 0 1px rgba(197, 255, 0, 0.42);
  --glow-sm: 0 0 18px rgba(197, 255, 0, 0.28);
  --glow-lg: 0 0 60px rgba(197, 255, 0, 0.22);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-back: cubic-bezier(0.2, 0.9, 0.25, 1.15);

  --shell: min(1280px, 90vw);
  --nav-h: 74px;

  /* Riscritte dal JS: posizione del puntatore per il faro dell'hero e
     avanzamento della pagina per il tachimetro. */
  --mx: 50%;
  --my: 30%;
  --scroll: 0;
}

/* ================================================= 02  reset e fondali */

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

html {
  /* Il salto alle sezioni lo governa js/main.js, che sa anche togliere
     l'ancora dall'indirizzo. Questi due restano per quando il JS non parte. */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 30px);
  color-scheme: dark;
  accent-color: var(--p-500);
  /* La barra di scorrimento del sistema spezzerebbe il nero pieno */
  scrollbar-color: var(--p-800) var(--ink-1);
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--ink-1); }
::-webkit-scrollbar-thumb { background: var(--p-800); }
::-webkit-scrollbar-thumb:hover { background: var(--p-600); }

body {
  min-height: 100%;
  background: var(--ink-1);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-booting { overflow: hidden; }

/* Reticolo di fondo. Fisso: scorrendo la pagina scivola sopra un piano fermo,
   e' quello che da' profondita' senza una sola immagine. */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(197, 255, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197, 255, 0, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 5%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 5%, transparent 70%);
}

/* Grana + scanline: due veli quasi invisibili che tolgono al nero l'aria di
   fondo piatto e gli danno quella di pannello acceso. */
.bg-noise {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bg-scan {
  position: fixed;
  inset: 0;
  z-index: 901;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px);
  opacity: 0.35;
  mix-blend-mode: multiply;
}

img { display: block; max-width: 100%; }

/* Deve stare dopo la riga qui sopra: un img { display:block } ha la stessa
   specificita' di [hidden] e vincerebbe per ordine, lasciando in pagina i
   riquadri vuoti delle immagini che il JS aveva nascosto. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--p-500); color: var(--ink-0); }

:focus-visible {
  outline: 2px solid var(--p-500);
  outline-offset: 3px;
}

/* Salto al contenuto: la nav e' lunga, chi naviga da tastiera non deve
   attraversarla a ogni pagina. */
.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 18px;
  clip-path: var(--chamfer-xs);
  background: var(--p-500);
  color: var(--ink-0);
  font: 700 11px/1 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform 0.2s;
}

.skip:focus { transform: none; }

/* ============================================= 03  primitive */

.shell {
  position: relative;
  z-index: 1;
  width: var(--shell);
  margin-inline: auto;
}

.hex {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  clip-path: var(--hexagon);
  background: linear-gradient(150deg, var(--p-600), var(--p-800) 55%, var(--p-900));
  padding: 1.5px;
  transition: background 0.25s, filter 0.25s;
}

.hex__inner {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  clip-path: var(--hexagon);
  background: var(--ink-2);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  transition: background 0.25s, color 0.25s;
}

.hex svg {
  fill: none;
  stroke: var(--p-400);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Etichetta di sezione: bollino esagonale + testo, come le voci dell'HUD */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--p-500);
}

.eyebrow::before {
  content: '';
  width: 7px;
  height: 8px;
  flex-shrink: 0;
  clip-path: var(--hexagon);
  background: var(--p-500);
}

/* Righello a tacche, ripreso dalla bussola: separa senza pesare come una
   linea piena. Si allunga fin dove lo lasci. */
.ruler {
  height: 7px;
  background-image: linear-gradient(90deg, rgba(197, 255, 0, 0.45) 1px, transparent 1px);
  background-size: 9px 100%;
  mask-image: linear-gradient(90deg, #000, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
}

.section {
  position: relative;
  z-index: 1;
  padding-block: clamp(72px, 10vw, 140px);
}

.section--tight { padding-block: clamp(52px, 6vw, 84px); }

/* Attaccata all'intestazione di pagina che la precede */
.section--flush { padding-top: 0; }

.section__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 64ch;
  margin-bottom: clamp(38px, 5vw, 60px);
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  /* Evita la riga orfana di due parole sotto un titolo largo */
  text-wrap: balance;
}

.section__title em {
  font-style: normal;
  color: var(--p-500);
  text-shadow: 0 0 44px rgba(197, 255, 0, 0.3);
}

.section__lead {
  max-width: 58ch;
  color: var(--text-dim);
}

/* Titolo affiancato da un numero d'ordine grande e spento */
.section__head--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  max-width: none;
  gap: 40px;
}

.section__headText {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 62ch;
}

.section__index {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 92px);
  font-weight: 700;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(197, 255, 0, 0.22);
  user-select: none;
}

/* ------------------------------------------------------------- bottoni */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  clip-path: var(--chamfer-sm);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.22s, color 0.22s, box-shadow 0.22s, transform 0.12s;
}

.btn:active { transform: translateY(1px); }

.btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn--primary { background: var(--p-500); color: var(--ink-0); }
.btn--primary:hover { background: var(--p-400); box-shadow: 0 0 28px rgba(197, 255, 0, 0.45); }

.btn--ghost {
  background: rgba(0, 0, 0, 0.55);
  box-shadow: var(--edge-hot);
  color: var(--text);
}

.btn--ghost:hover { background: rgba(197, 255, 0, 0.1); color: var(--p-300); }

.btn--lg { padding: 18px 34px; font-size: 12.5px; }

/* ========================================== 04  telaio HUD */

/* --------------------------------------------------------------- boot */

/* Schermata di caricamento: e' l'esagono di stato dell'HUD ingrandito, con
   lo stesso riempimento che sale dal basso. Se il JS non parte, il noscript
   in pagina la spegne e non resta un velo nero sopra tutto. */
.boot {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 26px;
  background: var(--ink-0);
  transition: opacity 0.5s ease, visibility 0.5s;
}

.boot.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Il velo si vede una volta per sessione. La classe la mette uno script di
   due righe nel <head>: aspettare main.js farebbe lampeggiare il nero a
   ogni passaggio tra le pagine. */
html.no-boot .boot { display: none; }
html.no-boot body.is-booting { overflow: auto; }

.boot__hex {
  position: relative;
  width: 96px;
  height: 110px;
  clip-path: var(--hexagon);
  background: linear-gradient(150deg, var(--p-600), var(--p-800) 55%, var(--p-900));
  padding: 2px;
}

.boot__inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: var(--hexagon);
  background: var(--ink-1);
}

.boot__fill {
  position: absolute;
  inset: auto 0 0 0;
  height: 0%;
  background-color: var(--p-500);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(255, 255, 255, 0.14));
  opacity: 0.9;
  transition: height 0.2s linear;
}

.boot__fill::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--p-300);
  filter: drop-shadow(0 0 6px var(--p-500));
}

.boot__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--text);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.boot__label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.boot__pct { color: var(--p-500); font-variant-numeric: tabular-nums; }

.boot__bar {
  width: min(280px, 60vw);
  height: 3px;
  clip-path: var(--chamfer-xs);
  background: rgba(197, 255, 0, 0.12);
}

.boot__bar i {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--p-500);
  box-shadow: 0 0 12px var(--p-500);
  transition: width 0.2s linear;
}

/* ------------------------------------------------------------ cornice */

/* Quattro parentesi lime agli angoli della finestra: e' il gesto che dice
   "questo e' un pannello acceso, non una pagina". */
.frame {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.frame i {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(197, 255, 0, 0.3);
}

.frame i:nth-child(1) { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.frame i:nth-child(2) { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.frame i:nth-child(3) { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.frame i:nth-child(4) { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* ---------------------------------------------------------------- rail */

/* Indice a esagoni sul bordo destro: dice dove sei e ci porta in un click.
   Il nome esce all'hover, altrimenti resterebbero sei pallini muti. */
.rail {
  position: fixed;
  top: 50%;
  right: 26px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 13px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.4s;
}

.rail.is-on { opacity: 1; }

.rail a {
  position: relative;
  display: block;
  width: 11px;
  height: 13px;
  clip-path: var(--hexagon);
  background: rgba(197, 255, 0, 0.26);
  transition: background 0.2s, transform 0.2s;
}

.rail a:hover { background: var(--p-400); transform: scale(1.25); }
.rail a.is-active { background: var(--p-500); box-shadow: 0 0 10px var(--p-500); }

.rail a span {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  padding: 5px 10px;
  clip-path: var(--chamfer-xs);
  background: var(--ink-0);
  box-shadow: var(--edge-hot);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  opacity: 0;
  transform: translateY(-50%) translateX(6px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.rail a:hover span { opacity: 1; transform: translateY(-50%); }

/* ------------------------------------------------- tachimetro di scroll */

/* Stesso arco del tachimetro dell'HUD, pathLength="100": la parte accesa si
   comanda scrivendo la percentuale in stroke-dasharray. Qui la percentuale
   e' l'avanzamento nella pagina. */
.gauge-scroll {
  position: fixed;
  right: 24px;
  bottom: 22px;
  z-index: 45;
  width: 92px;
  padding: 10px 10px 8px;
  clip-path: var(--chamfer-sm);
  background: rgba(0, 0, 0, 0.78);
  box-shadow: var(--edge);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s, transform 0.4s var(--ease);
  pointer-events: none;
}

.gauge-scroll.is-on { opacity: 1; transform: none; }

.gauge-scroll svg { display: block; width: 100%; overflow: visible; }

.gauge-scroll path {
  fill: none;
  stroke-width: 7;
  stroke-linecap: butt;
}

.gauge-scroll .g-bg { stroke: rgba(197, 255, 0, 0.12); }

.gauge-scroll .g-fg {
  stroke: var(--p-500);
  stroke-dasharray: calc(var(--scroll) * 100) 100;
  filter: drop-shadow(0 0 5px rgba(197, 255, 0, 0.5));
}

.gauge-scroll__read {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.gauge-scroll__unit {
  display: block;
  margin-top: 1px;
  font-size: 7px;
  letter-spacing: 0.24em;
  color: var(--text-faint);
}

/* ================================================== 05  header */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background 0.35s, border-color 0.35s, backdrop-filter 0.35s;
}

.nav.is-stuck {
  background: rgba(4, 5, 2, 0.9);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(197, 255, 0, 0.14);
}

/* Filo lime che cresce col rotolamento della pagina, agganciato al bordo
   inferiore della barra */
.nav::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: calc(var(--scroll) * 100%);
  background: var(--p-500);
  box-shadow: 0 0 12px var(--p-500);
  transition: opacity 0.3s;
  opacity: 0;
}

.nav.is-stuck::after { opacity: 1; }

.nav__inner {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 100%;
}

/* Marchio: il Δ e' costruito con lo stesso smusso dei pannelli, non e' una
   lettera in un cerchio. */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}

.brand__mark {
  position: relative;
  width: 34px;
  height: 39px;
}

.brand__mark .hex__inner {
  font-size: 16px;
  color: var(--p-400);
}

.brand__text { line-height: 1; }

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.brand__name span { color: var(--p-500); }

.brand__tag {
  display: block;
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
}

.nav__link {
  position: relative;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.2s;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 2px;
  background: var(--p-500);
  transition: width 0.24s var(--ease);
}

.nav__link:hover,
.nav__link.is-active { color: var(--text); }
.nav__link:hover::after,
.nav__link.is-active::after { width: 100%; }

.nav__cta { padding: 12px 22px; }

/* Il pulsante Discord e' anche l'accesso: da collegato mostra l'avatar al
   posto dell'icona, con lo stesso esagono che il marchio usa dappertutto. */
.nav__cta img {
  width: 21px;
  height: 24px;
  flex-shrink: 0;
  margin: -4px -2px -4px -6px;
  clip-path: var(--hexagon);
  object-fit: cover;
  background: var(--ink-3);
}

.nav__cta { max-width: 220px; }
.nav__cta span { overflow: hidden; text-overflow: ellipsis; }

.nav__burger {
  display: none;
  width: 36px;
  height: 40px;
  place-items: center;
}

.nav__burger span {
  display: block;
  width: 16px;
  height: 1.7px;
  background: var(--p-400);
  box-shadow: 0 5px 0 var(--p-400), 0 -5px 0 var(--p-400);
  transition: background 0.2s, box-shadow 0.2s;
}

.nav.is-open .nav__burger span {
  background: transparent;
  box-shadow: 0 5px 0 var(--danger), 0 -5px 0 var(--danger);
}

/* ==================================================== 06  hero */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: calc(var(--nav-h) + 48px) 72px;
  overflow: hidden;
}

/* Faro che segue il puntatore. Sta sotto al contenuto e non riceve eventi:
   e' luce, non interfaccia. */
.hero__spot {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(197, 255, 0, 0.16), transparent 70%);
  transition: background 0.25s ease-out;
}

/* Reticolo esagonale, disegnato in SVG dentro la pagina */
.hero__hexes {
  position: absolute;
  inset: -10% -5% auto -5%;
  z-index: 0;
  height: 120%;
  opacity: 0.5;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 78%);
}

/* Skyline in fondo: due piani, quello lontano solo di contorno, quello
   vicino pieno di nero. Il JS li muove a velocita' diverse. */
.hero__city {
  position: absolute;
  left: 50%;
  bottom: -2px;
  z-index: 0;
  width: 140%;
  min-width: 1400px;
  transform: translateX(-50%);
  pointer-events: none;
}

.hero__city--far { opacity: 0.5; }

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(36px, 5vw, 76px);
}

.hero__title {
  margin-block: 22px 24px;
  font-family: var(--font-display);
  font-size: clamp(58px, 11vw, 168px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* La seconda riga e' vuota di dentro: due pesi visivi diversi sulla stessa
   parola, come i due livelli di un titolo di gioco. */
.hero__title b {
  display: block;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(244, 247, 234, 0.5);
}

.hero__title span {
  display: block;
  color: var(--p-500);
  text-shadow: 0 0 80px rgba(197, 255, 0, 0.45);
}

.hero__sub {
  max-width: 47ch;
  margin-top: 26px;
  color: var(--text-dim);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

/* Coordinate sotto il titolo: la striscia della bussola riusata come fregio */
.hero__coords {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hero__coords .ruler { flex: 1; max-width: 180px; }

.hero__ip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding: 9px 9px 9px 16px;
  clip-path: var(--chamfer-xs);
  background: var(--pane);
  box-shadow: var(--edge);
}

.hero__ip > b {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hero__ip code {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--p-400);
  user-select: all;
}

.copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  clip-path: var(--chamfer-xs);
  background: rgba(197, 255, 0, 0.12);
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-300);
  transition: background 0.2s, color 0.2s;
}

.copy svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.copy:hover { background: rgba(197, 255, 0, 0.22); }
.copy.is-done { background: var(--p-500); color: var(--ink-0); }

/* Invito a scorrere, in fondo all'hero */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  transform: translateX(-50%);
}

.hero__scroll i {
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--p-500), transparent);
  animation: drop 1.8s var(--ease) infinite;
}

/* --------------------------------------------------- scheda stato server */

.status {
  position: relative;
  padding: 26px 28px 28px;
  clip-path: var(--chamfer-xl);
  background: rgba(2, 3, 1, 0.86);
  box-shadow: var(--edge-hot), var(--glow-lg);
  backdrop-filter: blur(6px);
}

.status__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(197, 255, 0, 0.14);
}

.status__label,
.status__dot {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.status__label { color: var(--text-faint); }

.status__dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--success);
}

/* Server in riavvio: stesso posto, colore diverso, nessun salto di layout */
.status__dot.is-down { color: var(--warning); }

.status__dot::before {
  content: '';
  width: 7px;
  height: 8px;
  clip-path: var(--hexagon);
  background: currentColor;
  animation: pulse 1.9s ease-in-out infinite;
}

/* L'arco riprende il tachimetro: i giocatori online come i giri motore */
.status__gauge {
  position: relative;
  margin-block: 18px 6px;
}

.status__gauge svg { display: block; width: 100%; overflow: visible; }

.status__gauge path {
  fill: none;
  stroke-width: 8;
  stroke-linecap: butt;
}

.status__gauge .g-bg { stroke: rgba(197, 255, 0, 0.1); }

.status__gauge .g-fg {
  stroke: var(--p-500);
  stroke-dasharray: 0 100;
  filter: drop-shadow(0 0 8px rgba(197, 255, 0, 0.45));
  transition: stroke-dasharray 1.2s var(--ease);
}

.status__read {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  text-align: center;
}

.status__read b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 54px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.status__read small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Il filo di separazione e' 1px di lime a bassa opacita': la griglia lascia
   passare il fondo tra le celle e fa da bordo senza disegnarne uno. */
.status__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 20px;
  background: rgba(197, 255, 0, 0.12);
}

.status__meta > div { padding: 12px 14px; background: var(--ink-2); }

.status__meta dt {
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.status__meta dd {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

/* ==================================================== 07  nastro */

.ticker {
  position: relative;
  z-index: 1;
  padding-block: 14px;
  background: var(--p-500);
  overflow: hidden;
}

/* Due copie identiche della lista: il loop si chiude a meta' traccia e non
   lascia mai un buco a destra. */
.ticker__track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__track ul {
  display: flex;
  gap: 48px;
  padding-right: 48px;
  list-style: none;
}

.ticker li {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-0);
}

.ticker li::before {
  content: '';
  width: 8px;
  height: 9px;
  clip-path: var(--hexagon);
  background: var(--ink-0);
}

/* =================================================== 08  feature */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.card {
  position: relative;
  padding: 32px 28px 34px;
  clip-path: var(--chamfer-md);
  background: var(--ink-2);
  box-shadow: var(--edge);
  overflow: hidden;
  transition: background 0.28s, box-shadow 0.28s, transform 0.28s var(--ease);
}

/* Alone che entra dall'angolo tagliato in basso a destra: si accende
   all'hover e riempie proprio il vertice che lo smusso lascia libero. */
.card::after {
  content: '';
  position: absolute;
  right: -40%;
  bottom: -60%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(197, 255, 0, 0.16), transparent 68%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.card:hover {
  background: var(--ink-3);
  box-shadow: var(--edge-hot);
  transform: translateY(-5px);
}

.card:hover::after { opacity: 1; }
.card:hover .hex { background: linear-gradient(150deg, var(--p-400), var(--p-600) 55%, var(--p-800)); }

.card__hex { width: 48px; height: 55px; margin-bottom: 22px; }
.card__hex svg { width: 22px; height: 22px; }

.card__title {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card__text { font-size: 14px; color: var(--text-dim); }

.card__n {
  position: absolute;
  top: 20px;
  right: 22px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(197, 255, 0, 0.25);
}

/* ================================================== 09  contatori */

.stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(197, 255, 0, 0.14);
  clip-path: var(--chamfer-lg);
  box-shadow: var(--edge);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 34px 26px;
  background: var(--ink-2);
  transition: background 0.25s;
}

.stat:hover { background: var(--ink-3); }

.stat b {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--p-500);
}

.stat span {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ==================================================== 10  citta' */

.city {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.city__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  clip-path: var(--chamfer-md);
  background: var(--ink-2);
  box-shadow: var(--edge);
}

.city__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  clip-path: var(--chamfer-xs);
  text-align: left;
  transition: background 0.2s, color 0.2s;
}

.city__btn .hex { width: 26px; height: 30px; }
.city__btn .hex__inner { font-size: 9px; color: var(--p-400); }

.city__btn b {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.2s;
}

.city__btn:hover { background: rgba(197, 255, 0, 0.07); }
.city__btn:hover b { color: var(--text); }

.city__btn.is-active { background: rgba(197, 255, 0, 0.13); }
.city__btn.is-active b { color: var(--p-300); }
.city__btn.is-active .hex { background: linear-gradient(150deg, var(--p-300), var(--p-500) 55%, var(--p-700)); }
.city__btn.is-active .hex__inner { background: var(--p-950); color: var(--p-200); }

/* Pannello di destra: smusso specchiato, cosi' i due blocchi affiancati si
   guardano invece di puntare entrambi in basso a destra. */
.city__panel {
  position: relative;
  min-height: 100%;
  padding: 34px 36px 36px;
  clip-path: var(--chamfer-md-alt);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(197, 255, 0, 0.08), transparent 55%),
    var(--ink-2);
  box-shadow: var(--edge);
}

.city__panel[hidden] { display: none; }

.city__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--p-600);
}

.city__title {
  margin-block: 12px 14px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
}

.city__text { max-width: 56ch; color: var(--text-dim); }

.city__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  list-style: none;
}

.city__tags li {
  padding: 7px 13px;
  clip-path: var(--chamfer-xs);
  background: rgba(0, 0, 0, 0.6);
  box-shadow: var(--edge);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Barrette di caratterizzazione: riusano la barra benzina/motore dell'HUD */
.city__bars {
  display: grid;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(197, 255, 0, 0.12);
}

.bar {
  display: grid;
  grid-template-columns: 96px 1fr 34px;
  align-items: center;
  gap: 12px;
}

.bar span {
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.bar i {
  display: block;
  height: 6px;
  clip-path: var(--chamfer-xs);
  background: rgba(197, 255, 0, 0.1);
}

.bar i::before {
  content: '';
  display: block;
  width: var(--v, 50%);
  height: 100%;
  background: var(--p-500);
  box-shadow: 0 0 10px rgba(197, 255, 0, 0.5);
  transition: width 0.6s var(--ease);
}

.bar em {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--p-400);
}

/* ================================================== 11  percorso */

.path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  list-style: none;
}

/* Il filo che collega i nodi passa dietro, all'altezza degli esagoni */
.path::before {
  content: '';
  position: absolute;
  top: 27px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(197, 255, 0, 0.4) 0 6px, transparent 6px 12px);
}

.step {
  position: relative;
  z-index: 1;
  padding: 0 22px;
  text-align: center;
}

.step__node {
  width: 54px;
  height: 62px;
  margin: 0 auto 20px;
  font-size: 15px;
  color: var(--p-300);
}

.step__node .hex__inner { background: var(--ink-1); }

.step__title {
  margin-bottom: 9px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.step__text { font-size: 13.5px; color: var(--text-dim); }

/* =================================================== 12  galleria */

/* Griglia asimmetrica: due tessere grandi e tre piccole. La foto si mette
   con --img sul singolo elemento, il gradiente sotto resta come riserva. */
.shots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 12px;
}

.shot {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 20px 22px;
  clip-path: var(--chamfer-md);
  background-color: var(--ink-3);
  background-image: var(--img, linear-gradient(150deg, var(--ink-4), var(--ink-1) 70%));
  background-size: cover;
  background-position: center;
  box-shadow: var(--edge);
  overflow: hidden;
  transition: box-shadow 0.3s;
}

.shot:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.shot:nth-child(4) { grid-column: span 2; }

/* Velo scuro dal basso: qualsiasi screenshot ci finisca sotto, l'etichetta
   resta leggibile. */
.shot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.1) 60%);
  transition: opacity 0.3s;
}

/* Reticolo esagonale in filigrana: riempie le tessere finche' non ci sono
   foto vere, e sotto una foto sparisce quasi del tutto. */
.shot::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='46' viewBox='0 0 40 46'%3E%3Cpath d='M20 1 39 12v23L20 45 1 34V12z' fill='none' stroke='%23c5ff00' stroke-opacity='.16'/%3E%3C/svg%3E");
  pointer-events: none;
}

.shot:hover { box-shadow: var(--edge-hot), var(--glow-sm); }
.shot:hover::before { opacity: 0.75; }

/* Foto vera al posto del gradiente di riserva. Sta sotto tutto: il velo
   scuro e' uno pseudo-elemento, che verrebbe coperto da un <img> vero se
   non gli dessimo un piano piu' basso. */
.shot__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.shot--img::before { z-index: 1; }
.shot--img::after { display: none; }   /* niente reticolo sopra una foto */
.shot--img .shot__cap { z-index: 2; }
.shot--img:hover .shot__img { transform: scale(1.04); }

.shot__cap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
}

.shot__cap::before {
  content: '';
  width: 7px;
  height: 8px;
  clip-path: var(--hexagon);
  background: var(--p-500);
}

/* ===================================================== 13  staff */

.crew {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 30px 22px 26px;
  clip-path: var(--chamfer-md);
  background: var(--ink-2);
  box-shadow: var(--edge);
  text-align: center;
  transition: background 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}

.member:hover { background: var(--ink-3); box-shadow: var(--edge-hot); transform: translateY(-4px); }

.member__hex {
  width: 66px;
  height: 76px;
  margin-bottom: 16px;
  font-size: 19px;
  color: var(--p-300);
}

.member__hex .hex__inner { background: var(--ink-1); letter-spacing: 0.06em; }

.member__name {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.member__role {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--p-600);
}

.member__note { margin-top: 10px; font-size: 12.5px; color: var(--text-faint); }

/* ======================================================= 14  FAQ */

.faq {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 900px;
}

.faq__item {
  clip-path: var(--chamfer-sm);
  background: var(--ink-2);
  box-shadow: var(--edge);
  transition: background 0.25s, box-shadow 0.25s;
}

.faq__item.is-open { background: var(--ink-3); box-shadow: var(--edge-hot); }

.faq__q {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 19px 24px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.faq__q::before {
  content: '';
  width: 8px;
  height: 9px;
  flex-shrink: 0;
  clip-path: var(--hexagon);
  background: rgba(197, 255, 0, 0.35);
  transition: background 0.2s;
}

.faq__item.is-open .faq__q::before { background: var(--p-500); }
.faq__q:hover { color: var(--p-300); }

/* Croce che ruota in meno: due tratti sovrapposti, il verticale si spegne */
.faq__q i {
  position: relative;
  width: 11px;
  height: 11px;
  margin-left: auto;
  flex-shrink: 0;
}

.faq__q i::before,
.faq__q i::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.8px;
  background: var(--p-500);
  transform: translateY(-50%);
  transition: transform 0.28s var(--ease), opacity 0.2s;
}

.faq__q i::after { transform: translateY(-50%) rotate(90deg); }
.faq__item.is-open .faq__q i::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

/* L'altezza la scrive il JS in px: 'auto' non si interpola */
.faq__a {
  height: 0;
  overflow: hidden;
  transition: height 0.3s var(--ease);
}

.faq__a p {
  padding: 0 24px 22px 48px;
  font-size: 14px;
  color: var(--text-dim);
}

/* ================================================== 15  chiusura */

.cta {
  position: relative;
  padding: clamp(50px, 7vw, 88px) clamp(28px, 5vw, 70px);
  clip-path: var(--chamfer-xl);
  background:
    radial-gradient(ellipse at 12% 0%, rgba(197, 255, 0, 0.2), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(197, 255, 0, 0.1), transparent 50%),
    var(--ink-2);
  box-shadow: var(--edge-hot);
  text-align: center;
  overflow: hidden;
}

.cta .eyebrow { justify-content: center; }

.cta__title {
  margin-block: 18px 16px;
  font-family: var(--font-display);
  font-size: clamp(30px, 5.2vw, 62px);
  font-weight: 700;
  line-height: 1.02;
  text-transform: uppercase;
}

.cta__title span { color: var(--p-500); text-shadow: 0 0 60px rgba(197, 255, 0, 0.4); }

.cta__text { max-width: 54ch; margin-inline: auto; color: var(--text-dim); }

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

/* ==================================================== 16  footer */

.footer {
  position: relative;
  z-index: 1;
  padding-block: 60px 30px;
  border-top: 1px solid rgba(197, 255, 0, 0.14);
  background: var(--ink-0);
  overflow: hidden;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.footer__text { max-width: 40ch; margin-top: 16px; font-size: 13.5px; color: var(--text-faint); }

.footer__title {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--p-500);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  font-size: 13.5px;
  color: var(--text-dim);
}

.footer__list a { transition: color 0.2s, padding-left 0.2s; }
.footer__list a:hover { color: var(--p-400); padding-left: 5px; }

/* Firma gigante tagliata dal bordo inferiore: chiude la pagina con lo stesso
   peso con cui l'hero l'ha aperta. */
.footer__wordmark {
  margin-top: 52px;
  font-family: var(--font-display);
  font-size: clamp(60px, 17vw, 260px);
  font-weight: 700;
  line-height: 0.74;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(197, 255, 0, 0.14);
  user-select: none;
  pointer-events: none;
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(197, 255, 0, 0.1);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.footer__legal {
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
}

/* ================================== 17  pagine interne / regolamento */

.pagehead {
  position: relative;
  padding-block: calc(var(--nav-h) + 78px) 52px;
  overflow: hidden;
}

.pagehead::before {
  content: '';
  position: absolute;
  top: -70%;
  left: 50%;
  width: 110vw;
  height: 110vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(197, 255, 0, 0.13), transparent 58%);
  pointer-events: none;
}

.pagehead__title {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(38px, 7vw, 86px);
  font-weight: 700;
  line-height: 0.95;
  text-transform: uppercase;
}

.pagehead__title span { color: var(--p-500); text-shadow: 0 0 60px rgba(197, 255, 0, 0.35); }
.pagehead__sub { max-width: 62ch; margin-top: 18px; color: var(--text-dim); }

.rules {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  align-items: start;
  gap: 42px;
}

.rules__aside {
  position: sticky;
  top: calc(var(--nav-h) + 26px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Campo di ricerca: con sei blocchi e trenta voci, scorrere a occhio per
   trovare "combat logging" e' la parte peggiore di ogni regolamento. */
.rules__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  clip-path: var(--chamfer-sm);
  background: var(--ink-2);
  box-shadow: var(--edge);
}

.rules__search svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--p-600); stroke-width: 2; }

.rules__search input {
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}

.rules__search input::placeholder { color: var(--text-faint); }

.rules__nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px;
  clip-path: var(--chamfer-md);
  background: var(--ink-2);
  box-shadow: var(--edge);
  list-style: none;
}

.rules__nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  clip-path: var(--chamfer-xs);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: background 0.2s, color 0.2s;
}

.rules__nav a::before {
  content: '';
  width: 6px;
  height: 7px;
  flex-shrink: 0;
  clip-path: var(--hexagon);
  background: rgba(197, 255, 0, 0.3);
  transition: background 0.2s;
}

.rules__nav a:hover,
.rules__nav a.is-active { background: rgba(197, 255, 0, 0.12); color: var(--p-300); }
.rules__nav a.is-active::before { background: var(--p-500); }

.rules__block { margin-bottom: 44px; scroll-margin-top: calc(var(--nav-h) + 30px); }
.rules__block[hidden] { display: none; }

.rules__h {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rules__h .hex { width: 30px; height: 35px; font-size: 10px; color: var(--p-400); }

.rules__list { display: flex; flex-direction: column; gap: 9px; list-style: none; }

.rules__list li {
  position: relative;
  padding: 16px 20px 16px 46px;
  clip-path: var(--chamfer-sm);
  background: var(--ink-2);
  box-shadow: var(--edge);
  font-size: 13.5px;
  color: var(--text-dim);
  transition: box-shadow 0.2s, background 0.2s;
}

.rules__list li:hover { background: var(--ink-3); }
.rules__list li[hidden] { display: none; }

.rules__list li::before {
  content: '';
  position: absolute;
  top: 21px;
  left: 20px;
  width: 9px;
  height: 10px;
  clip-path: var(--hexagon);
  background: var(--p-500);
}

.rules__list strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}

/* Sanzione massima: filo rosso al posto del lime, si vede da lontano */
.rules__list li.is-ban { box-shadow: inset 0 0 0 1px rgba(255, 77, 109, 0.35); }
.rules__list li.is-ban::before { background: var(--danger); }
.rules__list li.is-ban strong { color: var(--danger); }

.rules__empty {
  display: none;
  padding: 26px;
  clip-path: var(--chamfer-md);
  background: var(--ink-2);
  box-shadow: var(--edge);
  text-align: center;
  color: var(--text-faint);
}

.rules__empty.is-on { display: block; }

.rules__note {
  padding: 22px 26px;
  clip-path: var(--chamfer-md);
  background: rgba(255, 176, 32, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.28);
  font-size: 13.5px;
  color: var(--text-dim);
}

.rules__note strong { color: var(--warning); }

/* ================================== 17b  novita' / changelog */

.log {
  display: grid;
  gap: 14px;
  list-style: none;
}

.log__row {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 28px;
  padding: 26px 30px;
  clip-path: var(--chamfer-md);
  background: var(--ink-2);
  box-shadow: var(--edge);
  transition: background 0.25s, box-shadow 0.25s;
}

.log__row:hover { background: var(--ink-3); box-shadow: var(--edge-hot); }

.log__when {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.log__node { width: 32px; height: 37px; font-size: 13px; color: var(--p-300); }
.log__node .hex__inner { background: var(--ink-1); }

.log__when time {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.log__ver {
  padding: 3px 9px;
  clip-path: var(--chamfer-xs);
  background: rgba(197, 255, 0, 0.1);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--p-500);
}

.log__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 13px;
}

/* Etichetta di categoria: il colore dice subito se e' roba nuova, una
   correzione o una manata sull'economia. */
.tag {
  padding: 5px 11px;
  clip-path: var(--chamfer-xs);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: var(--edge);
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.tag--new { background: rgba(197, 255, 0, 0.1); box-shadow: inset 0 0 0 1px rgba(197, 255, 0, 0.4); color: var(--p-300); }
.tag--fix { background: rgba(91, 200, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(91, 200, 255, 0.35); color: var(--info); }
.tag--bal { background: rgba(255, 176, 32, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.32); color: var(--warning); }

.log__title {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.log__text { max-width: 68ch; font-size: 13.5px; color: var(--text-dim); text-wrap: pretty; }

.log__more { margin-top: 24px; }

.section__lead code {
  padding: 2px 7px;
  clip-path: var(--chamfer-xs);
  background: rgba(197, 255, 0, 0.1);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--p-400);
}

/* ============================== 17c  briciole e coda del regolamento */

.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.crumbs a { color: var(--text-dim); transition: color 0.2s; }
.crumbs a:hover { color: var(--p-400); }
.crumbs [aria-current] { color: var(--p-500); }

/* Il tasto della scorciatoia sta nel campo finche' non ci si scrive */
.rules__kbd {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  clip-path: var(--chamfer-xs);
  background: rgba(197, 255, 0, 0.1);
  box-shadow: var(--edge);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
  transition: opacity 0.2s;
}

.rules__search:focus-within .rules__kbd { opacity: 0; }

/* Altezza fissa: comparendo e sparendo il conteggio farebbe saltare
   l'indice qui sotto a ogni lettera digitata. */
.rules__count {
  min-height: 15px;
  padding-left: 2px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-600);
}

.rules__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 16px;
  padding: 28px 30px;
  clip-path: var(--chamfer-md);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(197, 255, 0, 0.14), transparent 60%),
    var(--ink-2);
  box-shadow: var(--edge-hot);
}

.rules__cta p { max-width: 46ch; font-size: 13.5px; color: var(--text-dim); }

/* ================================================== 17d  pagina 404 */

.lost {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding-block: 90px 70px;
  text-align: center;
}

.lost__inner { display: flex; flex-direction: column; align-items: center; }

.lost__hex { width: 60px; height: 69px; margin-bottom: 28px; font-size: 25px; color: var(--p-300); }
.lost__hex .hex__inner { background: var(--ink-1); }

.lost .eyebrow { justify-content: center; }

.lost__code {
  margin-block: 6px -4px;
  font-family: var(--font-display);
  font-size: clamp(86px, 21vw, 240px);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(197, 255, 0, 0.3);
  user-select: none;
}

.lost__title {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(19px, 3.2vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance;
}

.lost__title em { font-style: normal; color: var(--p-500); text-shadow: 0 0 50px rgba(197, 255, 0, 0.35); }

.lost__text { max-width: 52ch; margin-top: 16px; color: var(--text-dim); text-wrap: pretty; }

.lost__where {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  margin-top: 28px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.lost__where .ruler { width: 80px; flex-shrink: 0; }
.lost__where #lost-path { color: var(--p-600); overflow-wrap: anywhere; }

.lost__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 38px;
}

/* ============================ 17e  barra stato multi-server */

/* Una pastiglia per server, sopra il titolo dell'hero e in fondo a ogni
   pagina. I numeri arrivano da /api/status.php, che li chiede ai server
   veri: se qui c'e' scritto 112, in citta' ci sono 112 persone. */

/* Il margine sotto lo mette gia' il titolo dell'hero: qui basta staccarla
   dall'etichetta di sezione sopra. */
.srvbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

#account[data-state] { min-height: 320px; }

.srv {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px 11px;
  clip-path: var(--chamfer-xs);
  background: rgba(0, 0, 0, 0.62);
  box-shadow: var(--edge);
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  overflow: hidden;
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}

.srv:hover { background: rgba(197, 255, 0, 0.08); box-shadow: var(--edge-hot); color: var(--text); }

.srv__dot {
  width: 7px;
  height: 8px;
  flex-shrink: 0;
  clip-path: var(--hexagon);
  background: var(--text-faint);
}

.srv.is-on .srv__dot { background: var(--success); animation: pulse 1.9s ease-in-out infinite; }
.srv.is-full .srv__dot { background: var(--warning); }

.srv__num { color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.srv__num b { color: var(--p-500); font-weight: 700; }
.srv__q { color: var(--warning); letter-spacing: 0.1em; }

/* Filo di riempimento incollato al bordo inferiore: dice quanto e' piena la
   citta' senza occupare una riga in piu'. */
.srv__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--v, 0%);
  background: var(--p-500);
  box-shadow: 0 0 8px var(--p-500);
  transition: width 0.9s var(--ease);
}

/* Prima che la risposta arrivi: stessa forma, nessun numero inventato */
.srv.is-wait { color: var(--text-faint); }
.srv.is-wait .srv__num { color: var(--text-faint); }

/* ------------------------------------------- stato nel piede di pagina */

.footer__srv {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.footer__srv li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.footer__srv i {
  width: 6px;
  height: 7px;
  flex-shrink: 0;
  clip-path: var(--hexagon);
  background: var(--text-faint);
}

.footer__srv .is-on i { background: var(--success); }
.footer__srv b { margin-left: auto; color: var(--p-500); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- accesso nella barra */

.nav__me {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  clip-path: var(--chamfer-xs);
  background: rgba(197, 255, 0, 0.08);
  box-shadow: var(--edge);
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-dim);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.nav__me:hover { background: rgba(197, 255, 0, 0.16); color: var(--text); box-shadow: var(--edge-hot); }
.nav__me svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; }

.nav__me img {
  width: 22px;
  height: 25px;
  flex-shrink: 0;
  margin-left: -5px;
  clip-path: var(--hexagon);
  object-fit: cover;
  background: var(--ink-3);
}

/* ==================================================== 17f  creator */

.creators {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
}

.creator {
  position: relative;
  display: flex;
  flex-direction: column;
  clip-path: var(--chamfer-md);
  background: var(--ink-2);
  box-shadow: var(--edge);
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s var(--ease), opacity 0.25s;
}

.creator:hover { box-shadow: var(--edge-hot); transform: translateY(-4px); }

/* Spento non vuol dire nascosto: resta in griglia, solo piu' indietro */
.creator.is-off { opacity: 0.6; }
.creator.is-off:hover { opacity: 1; }

.creator__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--ink-3);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='46' viewBox='0 0 40 46'%3E%3Cpath d='M20 1 39 12v23L20 45 1 34V12z' fill='none' stroke='%23c5ff00' stroke-opacity='.14'/%3E%3C/svg%3E");
  overflow: hidden;
}

.creator__thumb img { width: 100%; height: 100%; object-fit: cover; }

.creator__live,
.creator__viewers {
  position: absolute;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 5px;
  clip-path: var(--chamfer-xs);
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.creator__live { left: 10px; background: var(--danger); color: #fff; }
.creator__live::before { content: ''; width: 6px; height: 7px; clip-path: var(--hexagon); background: #fff; animation: pulse 1.4s ease-in-out infinite; }

.creator__viewers { right: 10px; background: rgba(0, 0, 0, 0.78); box-shadow: var(--edge); color: var(--text); font-variant-numeric: tabular-nums; }

.creator__body { display: flex; gap: 13px; padding: 16px 18px 19px; }

.creator__avatar {
  width: 38px;
  height: 44px;
  flex-shrink: 0;
  clip-path: var(--hexagon);
  object-fit: cover;
  background: var(--ink-4);
}

.creator__name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Un titolo di diretta puo' essere lunghissimo: due righe e poi tagliato,
   altrimenti una scheda diventa alta il doppio delle altre. */
.creator__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-dim);
}

.creator__game {
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-600);
}

/* ================================================== 17g  livelli */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 26px 30px;
  clip-path: var(--chamfer-md);
  background: var(--ink-2);
  box-shadow: var(--edge);
  transition: background 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}

.tier:hover { background: var(--ink-3); box-shadow: var(--edge-hot); transform: translateY(-4px); }

.tier--best {
  background: radial-gradient(ellipse at 50% 0%, rgba(197, 255, 0, 0.14), transparent 60%), var(--ink-2);
  box-shadow: var(--edge-hot), var(--glow-sm);
}

.tier__flag {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 13px 6px;
  background: var(--p-500);
  color: var(--ink-0);
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tier__name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.tier__name::before { content: ''; width: 9px; height: 10px; clip-path: var(--hexagon); background: var(--tier, var(--p-500)); }

.tier__price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.tier__price small {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.tier__perks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-dim);
  list-style: none;
}

.tier__perks li { display: flex; gap: 10px; }
.tier__perks li::before { content: ''; width: 7px; height: 8px; margin-top: 6px; flex-shrink: 0; clip-path: var(--hexagon); background: var(--p-500); }

.tier .btn { margin-top: auto; justify-content: center; }

/* Riquadro di avvertenza: sta sopra i prezzi e dice cosa NON si compra */
.note {
  display: flex;
  gap: 14px;
  padding: 20px 24px;
  clip-path: var(--chamfer-md);
  background: rgba(255, 176, 32, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.26);
  font-size: 13.5px;
  color: var(--text-dim);
}

.note--info { background: rgba(91, 200, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(91, 200, 255, 0.26); }
.note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; fill: none; stroke: var(--warning); stroke-width: 1.8; }
.note--info svg { stroke: var(--info); }
.note strong { color: var(--text); }

/* ================================================== 17h  area personale */

.acct {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.acct__card {
  padding: 32px 28px 30px;
  clip-path: var(--chamfer-lg);
  background: var(--ink-2);
  box-shadow: var(--edge-hot);
  text-align: center;
}

.acct__avatar {
  width: 94px;
  height: 108px;
  margin: 0 auto 18px;
  clip-path: var(--hexagon);
  object-fit: cover;
  background: var(--ink-4);
}

.acct__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.acct__tag { margin-top: 4px; font-size: 12.5px; color: var(--text-faint); }

.acct__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 7px 14px;
  clip-path: var(--chamfer-xs);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px var(--tier, rgba(197, 255, 0, 0.4));
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tier, var(--p-400));
}

.acct__badge::before { content: ''; width: 7px; height: 8px; clip-path: var(--hexagon); background: currentColor; }

.acct__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: rgba(197, 255, 0, 0.12);
  clip-path: var(--chamfer-md);
  box-shadow: var(--edge);
}

.acct__cell { padding: 20px 22px; background: var(--ink-2); }

.acct__cell dt {
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.acct__cell dd {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Schermata di accesso: quando non c'e' nessuno collegato e' l'unica cosa
   in pagina, quindi sta al centro e non a sinistra. */
.gate {
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(38px, 5vw, 56px) clamp(26px, 4vw, 48px);
  clip-path: var(--chamfer-xl);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(197, 255, 0, 0.16), transparent 60%),
    var(--ink-2);
  box-shadow: var(--edge-hot);
  text-align: center;
}

.gate .hex { width: 58px; height: 67px; margin: 0 auto 22px; font-size: 24px; color: var(--p-300); }
.gate .hex__inner { background: var(--ink-1); }

.gate__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;
}

.gate__text { max-width: 46ch; margin: 14px auto 0; color: var(--text-dim); text-wrap: pretty; }
.gate .btn { margin-top: 28px; }

.gate__perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
  list-style: none;
}

.gate__perks li {
  padding: 7px 13px;
  clip-path: var(--chamfer-xs);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: var(--edge);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Riga di stato sotto una griglia che si aggiorna da sola */
.livehint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.livehint::before { content: ''; width: 6px; height: 7px; clip-path: var(--hexagon); background: var(--p-600); }

/* ============================================== 17i  archivio immagini */

.uploader {
  padding: 22px;
  clip-path: var(--chamfer-lg);
  background: var(--ink-2);
  box-shadow: var(--edge);
}

/* Il tratteggio dice "qui si puo' lasciar cadere qualcosa" senza scriverlo */
.uploader__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 46px 24px;
  border: 1px dashed rgba(197, 255, 0, 0.28);
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
}

.uploader.is-over .uploader__drop {
  background: rgba(197, 255, 0, 0.07);
  border-color: var(--p-500);
}

.uploader__hex { width: 46px; height: 53px; margin-bottom: 8px; }
.uploader__hex svg { width: 20px; height: 20px; }
.uploader__hex .hex__inner { background: var(--ink-1); }

.uploader__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.uploader__hint { font-size: 12.5px; color: var(--text-faint); }

/* Un pulsante che deve sembrare un collegamento: e' un'azione, quindi
   <button>, ma nel mezzo di una frase un bottone squadrato stonerebbe. */
.linkish {
  color: var(--p-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.linkish:hover { color: var(--p-300); }

.uploader__opts {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 18px;
}

.field { display: flex; flex-direction: column; gap: 7px; }

.field > span {
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.field select,
.field input,
.tokenbox input {
  width: 100%;
  padding: 11px 13px;
  clip-path: var(--chamfer-xs);
  border: 0;
  background: var(--ink-4);
  box-shadow: var(--edge);
  outline: none;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text);
}

.field select:focus-visible,
.field input:focus-visible,
.tokenbox input:focus-visible { box-shadow: var(--edge-hot); }
.field input::placeholder,
.tokenbox input::placeholder { color: var(--text-faint); letter-spacing: 0.06em; }

.uploader__queue {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-500);
}

.uploader__bar {
  height: 3px;
  margin-top: 12px;
  clip-path: var(--chamfer-xs);
  background: rgba(197, 255, 0, 0.12);
}

.uploader__bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--p-500);
  box-shadow: 0 0 10px var(--p-500);
  transition: width 0.2s linear;
}

/* ------------------------------------------------------- gettone */

.tokenbox { max-width: 420px; margin: 30px auto 0; text-align: left; }

.tokenbox__label {
  margin-bottom: 9px;
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
}

.tokenbox__row { display: flex; gap: 8px; }
.tokenbox__row .btn { flex-shrink: 0; }
.tokenbox__hint { margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--text-faint); text-align: center; }

.tokenbox code,
.pagehead__sub code,
.gate__text code {
  padding: 2px 6px;
  clip-path: var(--chamfer-xs);
  background: rgba(197, 255, 0, 0.1);
  font-family: var(--font-display);
  font-size: 0.92em;
  color: var(--p-400);
}

/* ------------------------------------------------- scheda cartella */

.cart {
  padding: 24px 26px 26px;
  margin-bottom: 14px;
  clip-path: var(--chamfer-md);
  background: var(--ink-2);
  box-shadow: var(--edge);
  transition: box-shadow 0.25s;
}

.cart:hover { box-shadow: var(--edge-hot); }

.cart__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin-bottom: 14px;
}

.cart__nome {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cart__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.cart__cmd { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

.minibtn {
  padding: 7px 12px;
  clip-path: var(--chamfer-xs);
  background: rgba(197, 255, 0, 0.08);
  box-shadow: var(--edge);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: background 0.2s, color 0.2s;
}

.minibtn:hover { background: rgba(197, 255, 0, 0.18); color: var(--text); }
.minibtn--kill { background: rgba(255, 77, 109, 0.1); color: var(--danger); }
.minibtn--kill:hover { background: rgba(255, 77, 109, 0.24); color: var(--danger); }

/* Zona di rilascio dentro ogni cartella: si trascina sulla cartella giusta
   invece di sceglierla da un menu dopo. */
.cart__drop {
  position: relative;
  margin-top: 14px;
  padding: 22px 18px;
  border: 1px dashed rgba(197, 255, 0, 0.26);
  text-align: center;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-faint);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.cart__drop:hover,
.cart__drop.is-over {
  background: rgba(197, 255, 0, 0.07);
  border-color: var(--p-500);
  color: var(--text);
}

.cart__drop .uploader__bar { margin-top: 12px; }

.cart__file { margin-top: 14px; list-style: none; }

.cart__file li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid rgba(197, 255, 0, 0.09);
}

.cart__file-nome {
  flex: 1;
  min-width: 180px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--p-400);
  overflow-wrap: anywhere;
}

.cart__file-nome:hover { color: var(--p-300); text-decoration: underline; text-underline-offset: 3px; }

.cart__file-meta {
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ------------------------- indice di una cartella condivisa (/immagini/…) */

.cartella {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.cartella__voce {
  display: flex;
  flex-direction: column;
  clip-path: var(--chamfer-md);
  background: var(--ink-2);
  box-shadow: var(--edge);
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s var(--ease);
}

.cartella__voce:hover { box-shadow: var(--edge-hot); transform: translateY(-3px); }

.cartella__ant {
  display: block;
  aspect-ratio: 16 / 10;
  background-color: var(--ink-3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='46' viewBox='0 0 40 46'%3E%3Cpath d='M20 1 39 12v23L20 45 1 34V12z' fill='none' stroke='%23c5ff00' stroke-opacity='.14'/%3E%3C/svg%3E");
}

.cartella__ant img { width: 100%; height: 100%; object-fit: cover; }

.cartella__nome {
  padding: 13px 15px 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}

.cartella__meta {
  padding: 5px 15px 15px;
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Il campo con il link e' in sola lettura ma selezionabile: qualcuno
   preferisce sempre copiare a mano invece di fidarsi del pulsante. */
.linkrow { display: flex; gap: 7px; }

.linkrow input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  clip-path: var(--chamfer-xs);
  border: 0;
  background: var(--ink-4);
  box-shadow: var(--edge);
  outline: none;
  font-family: var(--font-display);
  font-size: 9.5px;
  color: var(--p-400);
}

.linkrow .copy,
.linkrow .kill { padding: 8px 11px; }

.kill {
  display: inline-flex;
  align-items: center;
  clip-path: var(--chamfer-xs);
  background: rgba(255, 77, 109, 0.12);
  color: var(--danger);
  transition: background 0.2s;
}

.kill:hover { background: rgba(255, 77, 109, 0.26); }
.kill svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }

#media-page[data-state] { min-height: 340px; }

@media (max-width: 900px) {
  .uploader__opts { grid-template-columns: 1fr 1fr; }
  .uploader__opts .btn { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 560px) {
  .uploader__opts { grid-template-columns: 1fr; }
}

/* ============================================== 17j  pannello staff */

/* Diagnosi: una riga per pezzo del sito, con la spia accesa o spenta.
   Verde = collegato, giallo = attenzione, rosso = manca. */
.diag {
  display: grid;
  gap: 1px;
  clip-path: var(--chamfer-md);
  background: rgba(197, 255, 0, 0.12);
  box-shadow: var(--edge);
}

.diag__riga {
  display: grid;
  grid-template-columns: 10px minmax(0, 180px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  background: var(--ink-2);
}

.diag__spia {
  width: 8px;
  height: 9px;
  clip-path: var(--hexagon);
  background: var(--text-faint);
}

.diag__riga--ok .diag__spia       { background: var(--success); }
.diag__riga--parziale .diag__spia { background: var(--warning); }
.diag__riga--no .diag__spia       { background: var(--danger); }

.diag__voce {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.diag__nota { font-size: 12.5px; color: var(--text-dim); }

.diag__stato {
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.diag__riga--ok .diag__stato       { color: var(--success); }
.diag__riga--parziale .diag__stato { color: var(--warning); }
.diag__riga--no .diag__stato       { color: var(--danger); }

/* ------------------------------------------------------- quadri */

.quadri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  clip-path: var(--chamfer-md);
  background: rgba(197, 255, 0, 0.12);
  box-shadow: var(--edge);
}

.quadro {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 26px 22px;
  background: var(--ink-2);
  transition: background 0.25s;
}

.quadro:hover { background: var(--ink-3); }

.quadro b {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--p-500);
}

.quadro span {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.quadro small { font-size: 11.5px; color: var(--text-faint); }

/* ------------------------------------------------------ tabelle */

/* Una tabella larga su telefono deve scorrere dentro il suo riquadro:
   se allarga la pagina, scorre di sbieco tutto il sito. */
.tabella__scroll {
  overflow-x: auto;
  clip-path: var(--chamfer-md);
  background: var(--ink-2);
  box-shadow: var(--edge);
}

.tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabella th {
  padding: 14px 18px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid rgba(197, 255, 0, 0.16);
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.tabella td {
  padding: 13px 18px;
  border-bottom: 1px solid rgba(197, 255, 0, 0.06);
  color: var(--text-dim);
  vertical-align: middle;
}

.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella tbody tr:hover td { background: var(--ink-3); }
.tabella td:first-child { color: var(--text); white-space: nowrap; }

/* Pastiglia del livello: lo stesso codice colore del pannello ovunque */
.liv {
  display: inline-block;
  padding: 4px 10px 5px;
  clip-path: var(--chamfer-xs);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: var(--edge);
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.liv--admin   { color: var(--p-400);   box-shadow: inset 0 0 0 1px rgba(197, 255, 0, 0.45); }
.liv--staff   { color: var(--info);    box-shadow: inset 0 0 0 1px rgba(91, 200, 255, 0.4); }
.liv--creator { color: #a970ff;        box-shadow: inset 0 0 0 1px rgba(169, 112, 255, 0.4); }
.liv--ospite  { color: var(--text-faint); }

/* Le voci staff nella barra si distinguono da quelle pubbliche */
.nav__link--staff { color: var(--p-600); }
.nav__link--staff:hover, .nav__link--staff.is-active { color: var(--p-400); }
.nav__link--staff::before { content: '· '; color: var(--p-700); }

@media (max-width: 720px) {
  .diag__riga { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .diag__nota { grid-column: 2 / -1; }
}

/* ================================================ 18  animazioni */

/* Entrata allo scroll. Senza JS o con motion ridotto restano visibili:
   un elemento nascosto in attesa di un osservatore che non arriva mai e'
   il modo piu' facile per servire una pagina bianca. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s var(--ease);
}

.reveal.is-in { opacity: 1; transform: none; }

/* Ritardo a cascata sui figli, impostato dal JS con --i */
.reveal--stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}

.reveal--stagger.is-in > * { opacity: 1; transform: none; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@keyframes drop {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
  40%  { opacity: 1; transform: scaleY(1); transform-origin: top; }
  60%  { opacity: 1; transform: scaleY(1); transform-origin: bottom; }
  100% { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* Le luci rosse in cima alle antenne dello skyline */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.15; }
}

.beacon { animation: blink 2.4s ease-in-out infinite; }
.beacon--slow { animation-duration: 3.7s; animation-delay: 0.9s; }

/* Passaggio tra le pagine: una dissolvenza corta al posto del lampo bianco.
   Dove non e' supportato l'at-rule viene ignorato e non cambia nulla. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.26s; }

/* L'hero entra da solo: e' sopra la piega, non aspetta l'osservatore */
body:not(.is-booting) .hero__grid > * {
  animation: rise 0.8s var(--ease) both;
}

body:not(.is-booting) .hero__grid > *:nth-child(2) { animation-delay: 0.14s; }

/* =============================================== 19  adattamento */

/* La barra si affolla prima di diventare un menu a panino: la scritta
   accanto all'icona e' la prima cosa sacrificabile. */
@media (max-width: 1240px) {
  .nav__links { gap: 20px; }
  .nav__cta span { display: none; }
  .nav__cta { padding: 12px 14px; }
  .nav__cta img { margin: -4px -2px; }
}

@media (max-width: 1180px) {
  .rail { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); }
  .acct { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .log__row { grid-template-columns: 1fr; gap: 16px; }
  .log__when { flex-direction: row; align-items: center; gap: 13px; }
  .rules__cta { flex-direction: column; align-items: flex-start; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(52px, 15vw, 96px); }
  .city { grid-template-columns: 1fr; }
  .city__list { flex-direction: row; flex-wrap: wrap; }
  .city__btn { width: auto; }
  .city__panel { clip-path: var(--chamfer-md); }
  .path { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
  .path::before { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .rules { grid-template-columns: 1fr; }
  .rules__aside { position: static; }
  .rules__nav { flex-direction: row; flex-wrap: wrap; }
  .shots { grid-auto-rows: 160px; }
}

@media (max-width: 900px) {
  .nav__burger { display: grid; }

  /* Il pulsante resta anche sul telefono: adesso e' l'accesso, non un
     invito che si puo' trovare piu' in basso. Solo icona, accanto al
     panino. */
  .nav__cta { padding: 11px 13px; }

  .nav__links {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 5vw;
    max-height: 0;
    overflow: hidden;
    background: rgba(4, 5, 2, 0.98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: max-height 0.32s var(--ease), border-color 0.3s;
  }

  .nav.is-open .nav__links { max-height: 70vh; border-bottom-color: rgba(197, 255, 0, 0.16); }
  .nav__link { padding: 17px 0; border-bottom: 1px solid rgba(197, 255, 0, 0.07); }
  .nav__link::after { display: none; }

  /* Col menu aperto la pagina sotto non deve scorrere: il pannello copre
     mezzo schermo e si finirebbe a leggere di sbieco. */
  body.is-menu-open { overflow: hidden; }

}

@media (max-width: 720px) {
  .shots { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .shot:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .shot:nth-child(4) { grid-column: span 2; }
  .gauge-scroll { display: none; }
  .section__head--split { flex-direction: column; align-items: flex-start; gap: 14px; }
  .section__index { order: -1; }
}

@media (max-width: 560px) {
  :root { --shell: 90vw; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .stats { grid-template-columns: 1fr; }
  .status__meta { grid-template-columns: 1fr; }
  .hero__ip { flex-wrap: wrap; }
  .btn { flex: 1 1 auto; justify-content: center; }
  .frame { display: none; }
  .bar { grid-template-columns: 78px 1fr 30px; }
}

/* Chi ha chiesto meno movimento non deve inseguire nastri, fari e archi */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal,
  .reveal--stagger > * { opacity: 1; transform: none; }
  .hero__spot { display: none; }
}

/* Il regolamento ogni tanto qualcuno lo stampa davvero: via tutto quello
   che su carta e' solo inchiostro sprecato. */
@media print {
  .nav, .ticker, .cta, .rail, .gauge-scroll, .frame, .bg-noise, .bg-scan,
  .bg-grid, .boot, .hero__actions, .crumbs, .rules__aside, .rules__cta,
  .log__more, .lost__actions, .footer__wordmark, .skip { display: none !important; }

  body { background: #fff; color: #000; }
  .rules { grid-template-columns: 1fr; }
  .rules__block { break-inside: avoid; }

  .rules__list li,
  .rules__note,
  .rules__empty {
    clip-path: none;
    box-shadow: none;
    background: #fff;
    color: #000;
    border-left: 3px solid #000;
    break-inside: avoid;
  }

  .rules__list li::before { display: none; }
  .rules__list li.is-ban { border-left-color: #b00020; }
  .rules__list li.is-ban strong { color: #b00020; }
  .rules__list strong,
  .rules__h,
  .pagehead__title,
  .pagehead__sub { color: #000; -webkit-text-stroke: 0; }
  .pagehead__title span { color: #000; text-shadow: none; }
  .rules__h .hex { display: none; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}