/* ==========================================================================
   MENU MOBILE (hamburger) — solo ≤768px
   Su mobile spariscono i pulsanti-sezione in alto e i 3 box in basso; compare un
   hamburger in alto a sinistra che apre un menu a tutto schermo con 7 card di
   navigazione (vetro + riga neon colorata) e, in basso, i social.
   ========================================================================== */

/* hamburger e menu: nascosti su desktop */
.nav-hamburger { display: none; }
.nav-menu { display: none; }

@media (max-width: 768px) {

  /* ---- nasconde la navigazione desktop + il vecchio pulsante home in basso a dx ---- */
  .left-group,
  .right-group,
  .bottom-side-box,
  .bottom-center-box,
  .home-return-btn {
    display: none !important;
  }

  /* ---- HAMBURGER (alto a sinistra) ---- */
  .nav-hamburger {
    display: flex;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 2200;
    width: 42px;
    height: 42px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    /* niente cornice/sfondo: solo le 3 lineette neon */
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-hamburger span {
    display: block;
    width: 24px;
    height: 2.5px;
    border-radius: 2px;
    /* stesso colore del titolo pagina (#efc8ff) con neon luminoso */
    background: #efc8ff;
    box-shadow:
      0 0 4px rgba(239, 200, 255, 0.95),
      0 0 10px rgba(232, 150, 255, 0.8),
      0 0 18px rgba(232, 150, 255, 0.5);
    transition: transform 320ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease;
  }
  /* hamburger → X quando il menu è aperto */
  body.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ---- BLUR del contenuto pagina (NON delle barre/cornice né del titolo) ----
     la transition sta sulla regola BASE così il blur è graduale sia in apertura sia
     in chiusura (prima era dentro .nav-open → alla chiusura spariva e tornava netto). */
  #sectionsStage {
    transition: filter 360ms ease;
  }
  body.nav-open #sectionsStage {
    /* NESSUN filtro sull'intera pagina: su iOS un blur/filter animato su tutto il
       viewport, con lo sfondo 3D che gira dietro, viene ricalcolato ad ogni frame →
       menu lentissimo e a scatti. La pagina viene oscurata dallo sfondo scuro del menu
       (.nav-menu, sotto). */
    pointer-events: none;
  }

  /* ---- titolo pagina attuale: largo come i pulsanti (55vw), così non si sovrappone
     all'hamburger; testo ridotto per stare nel box ---- */
  .top-center-box {
    
    width: 65vw !important;
    /* un po' più in basso: il box (z 20001, sopra le cornici) così si stacca dal
       bordo superiore e in HOW TO PLAY non resta appiccicato ai contenitori pagina 
    top: clamp(6px, 1.4vh, 12px) !important;*/
    height: 16vw !important;
  }
  .center-title {
    /* più grande per riempire il box (65vw) senza sbordare; nowrap + max-width
       garantiscono che resti dentro i bordi del contenitore */
    font-size: clamp(0.7rem, 4.5vw, 1.15rem) !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;   /* una sola riga (il titolo è flex con word/char) */
    max-width: 86% !important;
    overflow: visible !important;
    line-height: 1 !important;      /* leading simmetrico → centro verticale corretto */
  }
  /* titolo lungo (es. "BSC SPACESALOON"): più piccolo degli altri, così sta nel box
     senza sforare/sovrapporsi (gli altri titoli restano alla dimensione piena) */
  .center-title.center-title--long {
    font-size: clamp(0.7rem, 4vw, 1.15rem) !important;
    max-width: 95% !important;
    column-gap: 0.4em !important;   /* spazio chiaro tra "BSC" e "SPACESALOON" */
  }
  /* il titolo va CENTRATO verticalmente nel suo contenitore: niente nudge verso l'alto,
     ci pensa il flex (align-items/justify-content center) del wrap */
  .center-title-wrap {
    transform: none !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* il titolo resta nitido e SOPRA tutto (cornici + menu) in ogni momento */
  body.nav-open .top-center-box { z-index: 20001; }

  /* ---- OVERLAY MENU ---- */
  .nav-menu {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 2100;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2.4vh, 22px);
    padding: clamp(86px, 13vh, 120px) 22px clamp(18px, 4vh, 34px);
    box-sizing: border-box;

    /* sfondo scuro che oscura la pagina (sostituisce il blur a tutta pagina, rimosso):
       un solo layer opaco = economico per il compositor, niente costo per-frame. */
    background: rgba(4, 7, 14, 0.92);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 320ms ease, visibility 0s linear 320ms;
  }
  body.nav-open .nav-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 320ms ease, visibility 0s linear 0s;
  }

  /* ---- CARDS ---- */
  .nav-menu__cards {
    /* contenitori dei pulsanti larghi il 65% dello schermo, centrati */
    width: 65vw;
    max-width: none;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(9px, 1.8vh, 16px);
  }

  .nav-menu-card {
    position: relative;
    width: 100%;
    padding: clamp(11px, 2vh, 17px) 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    /* VETRO LUCIDO: riflesso diagonale + ciò che sta sotto è sfocato PIÙ della pagina
       (blur 14px vs 11px) con brightness/saturate → effetto "lente" sopra il pulsante */
    /* effetto biancastro ridotto a METÀ (riflesso vetro + brightness più tenui) */
    background:
      linear-gradient(135deg,
        rgba(255,255,255,0.11) 0%,
        rgba(255,255,255,0.03) 26%,
        rgba(255,255,255,0.01) 52%,
        rgba(8,12,22,0.30) 100%);
    /* niente backdrop-filter per-pulsante: ×7 blur che ricampionano lo sfondo ad ogni
       frame durante l'apertura = scatti su iOS. Lo sfondo gradiente + box-shadow danno
       comunque l'effetto vetro (e sotto c'è il fondo scuro del menu). */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.19),
      inset 0 0 18px rgba(255,255,255,0.035),
      0 6px 22px rgba(0,0,0,0.5);
    color: #ffffff;
    /* font "Space Age" (fonts/space-age.ttf, @font-face "SpaceAge" definito in assets.css) */
    font-family: "SpaceAge", "Orbitron", sans-serif;
    font-size: clamp(0.82rem, 3.6vw, 1.05rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* neon luminoso del COLORE della barra del pulsante (--accent) */
    text-shadow:
      0 0 5px var(--accent, #7ec8ff),
      0 0 11px var(--accent, #7ec8ff);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 220ms ease, background 220ms ease;
  }
  .nav-menu-card:active { transform: scale(0.97); }

  /* riga neon colorata in basso (per sezione): più luminosa, estremità SFUMATE
     (gradiente transparent → colore → bianco → colore → transparent) */
  /* barra-bagliore sotto il pulsante: NON una linea dura, ma una LUCE che arriva da
     sotto → ellisse sottile alle estremità e gonfia/arrotondata al centro. */
  .nav-menu-card::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -2px;
    height: 14px;                /* più alta: il bagliore sfuma dentro, niente bordo visibile */
    border-radius: 0;            /* nessun bordo netto: la forma la dà SOLO il gradiente */
    /* luce diffusa che arriva da sotto: nucleo morbido, sfuma gradualmente a 0 ben
       prima dei bordi del box → non si distingue dove inizia/finisce la "linea". */
    background:
      radial-gradient(
        ellipse 58% 165% at 50% 100%,
        var(--accent, #7ec8ff) 0%,
        var(--accent, #7ec8ff) 12%,
        transparent 66%
      );
    opacity: 0.7;               /* meno marcata */
    filter: blur(3px);          /* fonde i bordi: sembra luce, non una riga (solo menu) */
  }

  /* colori neon per sezione */
  .nav-menu-card--home      { --accent: #b06bff; }  /* viola */
  .nav-menu-card--howto     { --accent: #58a6ff; }  /* azzurro */
  .nav-menu-card--economy   { --accent: #46f0dc; }  /* verde acqua */
  .nav-menu-card--tokenomic { --accent: #b06bff; }  /* viola */
  .nav-menu-card--assets    { --accent: #ffb347; }  /* ambra */
  .nav-menu-card--games     { --accent: #b06bff; }  /* viola */
  .nav-menu-card--roadmap   { --accent: #58a6ff; }  /* azzurro */

  /* ---- SOCIAL (in basso) ---- */
  .nav-menu__social {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .nav-menu__social-label {
    font-family: "Orbitron", sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(200, 220, 255, 0.7);
  }
  .nav-menu__social-row {
    display: flex;
    gap: 16px;
  }
  .nav-menu-social-btn {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(126, 200, 255, 0.4);
    border-radius: 50%;
    background: rgba(8, 12, 22, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 12px rgba(80, 160, 255, 0.25);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-menu-social-btn img {
    width: 56%;
    height: 56%;
    object-fit: contain;
  }
  .nav-menu-social-btn svg {
    width: 52%;
    height: 52%;
    fill: #cfe6ff;
  }
}

/* ==========================================================================
   ANIMAZIONE DI APERTURA (cascata ~1.6s) + GLITCH testi
   Durante .is-animating tutto parte nascosto; il JS svela in sequenza:
   contenitore → lettere una alla volta → barra inferiore, per ogni pulsante;
   infine i social uno alla volta. Fuori da .is-animating torna tutto visibile.
   ========================================================================== */
.nav-menu.is-animating .nav-menu-card {
  opacity: 0;
  transform: translateY(12px) scale(0.95);
}
.nav-menu.is-animating .nav-menu-card.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 200ms ease, transform 240ms cubic-bezier(.2, .85, .3, 1);
}
.nav-menu.is-animating .nav-menu-card::after { opacity: 0; }
.nav-menu.is-animating .nav-menu-card.is-bar-in::after {
  opacity: 1;
  transition: opacity 300ms ease;
}
.nav-menu.is-animating .nav-char { opacity: 0; }
.nav-menu.is-animating .nav-char.is-typed { opacity: 1; }

/* etichetta "SOCIAL LINKS": lettere nascoste finché non vengono scritte */
.nav-menu.is-animating .nav-menu__social-label .nav-char { opacity: 0; }
.nav-menu.is-animating .nav-menu__social-label .nav-char.is-typed { opacity: 1; }

.nav-menu.is-animating .nav-menu-social-btn { opacity: 0; }
.nav-menu.is-animating .nav-menu-social-btn.is-in {
  opacity: 1;
  transition: opacity 240ms ease;
}

/* GLITCH del testo DISATTIVATO (su richiesta): resta solo il neon fisso */
.nav-menu-card.glitch-fx span {
  animation: none !important;
}
@keyframes navMenuGlitch {
  0%   { transform: translate(0, 0);   text-shadow: 0 0 5px var(--accent, #7ec8ff), 0 0 11px var(--accent, #7ec8ff); }
  20%  { transform: translate(-2px, 1px); text-shadow: 2px 0 rgba(255,80,200,0.9), -2px 0 rgba(80,230,255,0.9); }
  40%  { transform: translate(2px, -1px); text-shadow: -2px 0 rgba(180,120,255,0.9), 2px 0 rgba(80,230,255,0.9); }
  60%  { transform: translate(-1px, 0);  text-shadow: 1px 0 rgba(255,210,90,0.9), -1px 0 rgba(80,230,255,0.9); }
  80%  { transform: translate(1px, 1px); text-shadow: -1px 0 rgba(255,80,200,0.8), 1px 0 rgba(80,230,255,0.8); }
  100% { transform: translate(0, 0);   text-shadow: 0 0 5px var(--accent, #7ec8ff), 0 0 11px var(--accent, #7ec8ff); }
}