/* ====================================================================== */
/* PERFORMANCE MOBILE (≤768px) — niente BLUR su mobile (costoso per la GPU). */
/* Regole:                                                                  */
/*  1. backdrop-filter OFF ovunque (eccetto il menu, che mantiene il blur). */
/*  2. TRASPARENZA UNIFORME: le card mantengono lo STESSO fondo vetro del    */
/*     desktop (stessi --glass-bg-a/b di cards-glass), solo senza blur →     */
/*     identico livello di trasparenza mobile/desktop.                       */
/*  3. filter: blur() neutralizzato su contenitori/sottocontenitori/anim.    */
/*     TRUCCO: una dichiarazione !important batte il blur dei @keyframes →   */
/*     resta solo opacità/transform (= fade), senza blur.                    */
/* ====================================================================== */

@media (max-width: 768px) {

  /* ---------- 1. NIENTE backdrop-filter (eccetto il menu) ---------- */
  *:not(.nav-menu):not(.nav-menu-card),
  *:not(.nav-menu):not(.nav-menu-card)::before,
  *:not(.nav-menu):not(.nav-menu-card)::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* ---------- 2. TRASPARENZA UNIFORME (mobile = desktop) ---------- */
  /* Le card primarie usano già il fondo vetro di cards-glass (--glass-bg-a/b):
     NON lo si sovrascrive più con un valore diverso → stessa trasparenza ovunque.
     L'accordion GAMES (solo mobile, .gm-panel) adotta lo stesso vetro per uniformità. */
  .gm-panel {
    background:
      linear-gradient(180deg, var(--glass-bg-a, rgba(12,17,30,0.34)), var(--glass-bg-b, rgba(7,11,21,0.40))),
      radial-gradient(circle at 72% 16%, rgba(var(--gm-main), 0.06), transparent 64%),
      radial-gradient(circle at 12% 86%, rgba(var(--gm-sec), 0.04), transparent 64%) !important;
  }

  /* ---------- 3. NIENTE filter: blur() su mobile ---------- */

  /* 3a. SCAN-LINE decorative (sweep sfocati): nascoste su mobile */
  .economy-explanation-card__scan,
  .howto-shell__scan,
  .tokenomic-center-display__scan,
  .home-presale-card__scan,
  .game-door__scan {
    display: none !important;
  }

  /* 3b. ALONI/GLOW sfocati: tolto il blur (il gradiente resta morbido di suo) */
  .assets-showcase::before,
  .games-showcase::before,
  .game-card__image-zone::before,
  .howto-media-glow,
  .roadmap-card__inner::before {
    filter: none !important;
  }

  /* 3c. SEZIONI: cross-fade di sola opacità (niente blur di transizione) */
  .section {
    filter: none !important;
  }

  /* 3c-bis. INTRO "flicker" (.flickerable: howto-shell, game-card, ecc.) e intro del
     TITOLO HUD (.center-title) usano un'animazione con blur → niente blur su mobile
     (resta la comparsa via opacità). */
  .flickerable,
  .center-title {
    filter: none !important;
  }

  /* 3d. ECONOMY — testi card (apertura + cambio con le frecce): SOLO fade opacità.
     Le animazioni economyWordExpandIn / economyTextFadeOut hanno blur+scale+slide:
     forzando filter/transform:none resta la sola opacità del keyframe. */
  .economy-explanation-text,
  .economy-explanation-word {
    filter: none !important;
    transform: none !important;
  }
  /* niente effetto typewriter: azzerando lo stagger per-parola, tutte le parole
     compaiono INSIEME → semplice fade di opacità (intro e cambio con le frecce). */
  .economy-explanation-word {
    animation-delay: 0ms !important;
  }
  /* sfere orbita: muting senza blur (resta solo lo scurire via opacità) */
  .economy-core-card.is-focus-muted,
  .economy-mini-card.is-focus-muted {
    filter: none !important;
  }

  /* 3e. TOKENOMIC — intro contenitori/card e cambio display: niente blur (resta opacità/slide) */
  .tokenomic-system,
  .tokenomic-card,
  .tokenomic-center-display,
  .tokenomic-center-display * {
    filter: none !important;
  }

  /* 3f. HOW TO PLAY — immagine media: niente blur. In idle è coperta dall'overlay
     noise (.howto-media-noise); a focus si vede nitida e piena. */
  .howto-media-img {
    filter: none !important;
  }

  /* 3g. ASSETS (galleria/anteprime sfocate, se presenti su mobile) */
  .games-gallery__img {
    filter: none !important;
  }

  /* ---------- 4. ASSETS — card parallax (eccezione) ----------
     La card parallax resta com'è, MA:
     - niente blur sotto la card quando è ingrandita (fullscreen);
     - l'oscuramento NON è più un velo nero a tutto schermo: segue i bordi
       (arrotondati) della CARD DEI DATI (.assets-hud-card) via inset box-shadow. */
  .assets-fs-backdrop {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* oscuramento sagomato: brightness sulla CARD DEI DATI → scurisce solo quell'area,
     che ha già border-radius + overflow:hidden, quindi l'effetto "segue i bordi"
     arrotondati della card; fuori (sfondo 3D) resta nitido e luminoso. Niente blur.
     #assets per alzare la specificità sopra le regole esistenti della card. */
  body.assets-fs-open #assets .assets-hud-card {
    filter: brightness(0.42) saturate(0.9) !important;
    transition: filter 420ms ease !important;
  }

  /* 4-bis. CARD PARALLAX: niente blur su mobile (aloni/glow/stelle/label e blur delle
     animazioni di entrata) → restano le semitrasparenze dei gradienti. Si ESCLUDONO
     .parallax-layer--frame e .parallax-card-close, che usano drop-shadow neon (glow del
     bordo / ombra del pulsante) da mantenere. */
  .parallax-card,
  .parallax-card::before,
  .parallax-card::after,
  .parallax-card *:not(.parallax-layer--frame):not(.parallax-card-close),
  .parallax-card *:not(.parallax-layer--frame):not(.parallax-card-close)::before,
  .parallax-card *:not(.parallax-layer--frame):not(.parallax-card-close)::after {
    filter: none !important;
  }

  /* ---------- 5. SFONDO 3D: nebulose senza blur (sfondo nitido) ---------- */
  .sbg-neb { filter: none !important; }
}

/* ====================================================================== */
/* HOW TO PLAY — TITOLO: animazioni infinite MAIN-THREAD rese statiche su   */
/* mobile. Sono NON compositabili (gradient-flow = background-position su    */
/* testo background-clip; neon-breath = filter; "ali" = background-position  */
/* multi-layer) → su iOS ridipingono ad ogni frame. Ridefinendo i keyframe  */
/* come COSTANTI, l'animazione "gira" ma il valore non cambia = niente       */
/* repaint; il titolo resta col suo gradiente + glow statici. Le animazioni  */
/* di CAMBIO testo (howtoTextIn/Out, compositor) NON sono toccate.           */
/* mobile-perf è l'ultimo CSS → questi keyframe vincono su mobile.           */
/* ====================================================================== */
@media (max-width: 768px) {
  @keyframes howtoTitleGradientFlow { from, to { background-position: 0% 50%; } }
  @keyframes howtoTitleNeonBreath {
    from, to {
      filter:
        drop-shadow(0 0 4px rgba(var(--howto-title-glow-a), 0.28))
        drop-shadow(0 0 12px rgba(var(--howto-title-glow-b), 0.18));
    }
  }
  @keyframes howtoHudFullMove { from, to { } }
}

/* ====================================================================== */
/* ECONOMY (mobile) — animazioni MAIN-THREAD non compositabili, rese ferme. */
/*  - economyBlob: anima border-radius (wobble "liquido") su ~10 sfere =     */
/*    repaint per-frame ×10 → cerchi fissi su mobile.                        */
/*  - economyBorderRotate: bordo conic delle sfere in focus (border 2, su    */
/*    pseudo) → angolo fermo su mobile (resta neon statico). Il bordo della  */
/*    card spiegazione usa ormai il transform compositor (non questo kf).    */
/* ====================================================================== */
@media (max-width: 768px) {
  @keyframes economyBlob { from, to { border-radius: 50%; } }
  @keyframes economyBorderRotate { from, to { --economy-border-angle: 0deg; } }
}

/* ====================================================================== */
/* TOKENOMIC (mobile) — bordo conic delle CARD su tap (border 1, @property  */
/* su pseudo×10): angolo fermo su mobile (resta neon statico). Il bordo del  */
/* center-display usa ormai il transform compositor (non questo keyframe).   */
/* ====================================================================== */
@media (max-width: 768px) {
  @keyframes tokenomicBorderRotate { from, to { --tokenomic-border-angle: 0deg; } }
}