/* ====================================================================== */
/* GAMES — ACCORDION MOBILE (≤768px): 3 mega-pulsanti collassabili.        */
/* Cornici replicate da "games closed.jpeg"/"games opened.jpeg": ottagono  */
/* asimmetrico (tagli grandi TL/BR, piccoli TR/BL), telaio metallico con   */
/* filo neon, doppia linea interna, dettagli tech. NIENTE SCROLL: testi e  */
/* icone si adattano allo spazio (clamp su vh + line-clamp).               */
/* ====================================================================== */

/* angolo per la barra luminosa che corre lungo il bordo (stile vetro del mockup) */
@property --gm-ring {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes gmRing { to { --gm-ring: 360deg; } }

.games-accordion { display: none; }   /* su desktop non esiste: si usa .games-showcase */

@media (max-width: 768px) {
  .games-showcase { display: none !important; }   /* su mobile si usa l'accordion */

  /* pagina games BLOCCATA: niente scroll né trascinamento col dito */
  #games.section,
  #games.section.is-active {
    overflow: hidden !important;
    overscroll-behavior: contain;
  }
  .section__content--games {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* tutto avvicinato alla parte superiore (subito sotto il titolo pagina) */
    padding: calc(16vw + 6px) 14px 10px;
    overflow: hidden;               /* MAI scroll di pagina */
    touch-action: none;             /* il dito non trascina il corpo (i tap funzionano) */
  }

  /* blocco accordion: largo come il contenuto (come roadmap).
     CHIUSO (default): 75% dello spazio, CENTRATO verticalmente (mega-pulsanti piu' piccoli).
     APERTO (.has-open): piu' alto e ancorato IN ALTO, lasciando un gap con la cornice inferiore. */
  .games-accordion {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.2vh, 12px);
    width: 100%;
    height: calc((100vh - 16vw - 16px) * 0.75);
    height: calc((100dvh - 16vw - 16px) * 0.75);
    max-height: 100%;
    align-self: center;          /* chiuso: centrato verticalmente */
    margin: 0 auto;
  }
  .games-accordion.has-open {
    height: calc((100vh - 16vw - 16px) * 0.90);
    height: calc((100dvh - 16vw - 16px) * 0.90);
    align-self: flex-start;      /* aperto: in alto, gap in basso */
  }

  /* ---- PANNELLO: VETRO identico al mockup (lastra trasparente, arrotondata) ---- */
  .gm-panel {
    --gm-main: 221,114,255;
    --gm-sec: 98,195,255;
    --gm-radius: clamp(18px, 5.5vw, 28px);     /* raggio angoli (usato anche dagli archi) */
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--gm-radius);           /* STESSA FORMA del mockup (arrotondata) */
    /* STESSA TRASPARENZA del mockup: solo tenui accenti di colore + lieve sfocatura,
       niente velo/fondo scuro. */
    background:
      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%);
    -webkit-backdrop-filter: blur(2px) saturate(1.4);
    backdrop-filter: blur(2px) saturate(1.4);
    /* STILE ROADMAP: vetro semplice, bordo sottile + ombra morbida d'accento.
       Niente bevel bianco / linee di brillantezza (rimosse anche ::before/::after/archi). */
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.02),
      0 0 22px rgba(0,0,0,0.18),
      0 0 42px rgba(var(--gm-main), 0.08);
    isolation: isolate;
    transition: flex-grow 520ms cubic-bezier(.22,1,.36,1);

    /*isolation: isolate;
      border-color: rgba(var(--gm-main), 0.24);

      box-shadow:
        0 0 0 1px rgba(255,255,255,0.03) inset,
        0 0 0 1px rgba(var(--gm-main), 0.08) inset,
        0 0 24px rgba(19,34,68,0.45),
        0 0 44px rgba(var(--gm-main), 0.18);

      transition:
        border-color 700ms ease,
        box-shadow 700ms ease,
        background 700ms ease;*/


  }
  /* niente linea conic che corre, sheen, archi agli angoli (come roadmap a riposo) */
  /*.gm-panel::before,
  .gm-panel::after,*/
  .gm-corners { display: none !important; }

  /* BARRA LUMINOSA che corre lungo il bordo (stile vetro mockup): conic-gradient
     con base tenue d'accento (bordo sempre presente) + segmenti brillanti che
     ruotano. Anello che segue la sagoma ottagonale (clip-path inherit + mask). */
  .gm-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
      from var(--gm-ring, 0deg),
      rgba(var(--gm-main), 0.30) 0deg,
      rgba(var(--gm-main), 0.30) 30deg,
      rgba(var(--gm-main), 0.98) 60deg,
      #ffffff 76deg,
      rgba(var(--gm-sec), 0.96) 96deg,
      rgba(var(--gm-sec), 0.30) 126deg,
      rgba(var(--gm-main), 0.30) 210deg,
      rgba(var(--gm-main), 0.98) 240deg,
      #ffffff 256deg,
      rgba(var(--gm-sec), 0.96) 276deg,
      rgba(var(--gm-sec), 0.30) 306deg,
      rgba(var(--gm-main), 0.30) 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter:
      drop-shadow(0 0 5px rgba(var(--gm-main), 0.55))
      drop-shadow(0 0 12px rgba(var(--gm-sec), 0.30));
    animation: gmRing 6s linear infinite;
  }
  /* SHEEN del vetro: riflesso morbido in alto (si fonde con la superficie) */
  .gm-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
    background:
      radial-gradient(78% 30% at 50% -4%, rgba(255,255,255,0.30), rgba(255,255,255,0.06) 48%, transparent 76%),
      radial-gradient(50% 46% at 100% 0%, rgba(255,255,255,0.14), transparent 60%);
  }

  /* LINEE CURVE agli angoli, CONCENTRICHE col bordo: ogni linea e' un anello con lo
     stesso raggio della card, scostato verso l'interno di --ins (e raggio ridotto di
     --ins -> resta concentrico), mascherato ai soli 4 angoli. Piu' linee = archi
     concentrici di dimensioni diverse che rispettano la curvatura dell'angolo. */
  .gm-corners {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
  }
  .gm-arcline {
    position: absolute;
    inset: var(--ins, 0px);
    border-radius: calc(var(--gm-radius) - var(--ins, 0px));
    border: 2px solid rgba(255,255,255, var(--a, 0.6));
    pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.4));
    -webkit-mask:
      radial-gradient(circle 32px at 0 0,        #000 56%, transparent 100%),
      radial-gradient(circle 32px at 100% 0,     #000 56%, transparent 100%),
      radial-gradient(circle 32px at 0 100%,     #000 56%, transparent 100%),
      radial-gradient(circle 32px at 100% 100%,  #000 56%, transparent 100%);
    mask:
      radial-gradient(circle 32px at 0 0,        #000 56%, transparent 100%),
      radial-gradient(circle 32px at 100% 0,     #000 56%, transparent 100%),
      radial-gradient(circle 32px at 0 100%,     #000 56%, transparent 100%),
      radial-gradient(circle 32px at 100% 100%,  #000 56%, transparent 100%);
  }

  /* deco non usato: gli archi d'angolo coprono tutti e 4 gli angoli */
  .gm-deco { display: none; }

  /* stati flex: aperto riempie, gli altri si riducono a barre sottili */
  .games-accordion.has-open .gm-panel { flex: 0 0 auto; }
  .games-accordion.has-open .gm-panel.is-open { flex: 1 1 auto; }

  /* ---- HEADER (titolo cliccabile) ---- */
  .gm-head {
    position: relative;
    z-index: 8;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    

  }
  .gm-head__title {
    font-family: "SpaceAge", "Orbitron", sans-serif;
    font-size: clamp(0.95rem, 4.6vw, 1.4rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 6px rgba(var(--gm-main), 0.9), 0 0 16px rgba(var(--gm-main), 0.5);
    white-space: nowrap;
  }

  /* icona mega: cornice neon arrotondata (segnaposto per l'icona definitiva) */
  .gm-head__icon {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(66px, 19vw, 104px);
    height: clamp(66px, 19vw, 104px);
    border-radius: 18px;
    background:
      radial-gradient(circle at 50% 42%, rgba(var(--gm-main), 0.30), rgba(var(--gm-main), 0.06) 62%, transparent 78%),
      rgba(10,12,24,0.45);
  }
  .gm-head__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgb(var(--gm-main)) 32%, rgba(var(--gm-main), 0.55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }

  .gm-head__icon img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  position: absolute;
  inset: 10%;
  z-index: 2;
}

  .gm-head__chev {
    display: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid rgba(var(--gm-main), 0.95);
    border-top: 2px solid rgba(var(--gm-main), 0.95);
    transform: rotate(45deg);
    filter: drop-shadow(0 0 4px rgba(var(--gm-main), 0.7));
  }

  /* --- MEGA (nessun pannello aperto): icona + titolo + linea sotto --- */
  /* immagine spostata più a sinistra (gap col bordo) + titolo centrato verticalmente all'immagine */
  .games-accordion:not(.has-open) .gm-head { justify-content: flex-start; align-items: center; padding: 0 6% 0 4%; height: 100%; gap: 5vw; }
  .games-accordion:not(.has-open) .gm-head__icon { display: block; }
  .games-accordion:not(.has-open) .gm-head__title {
    position: relative;
    white-space: normal;
    font-size: clamp(0.85rem, 4.1vw, 1.3rem);  /* "PLAY TO EARN" su una riga */
    line-height: 1.08;
    text-align: left;
  }
  /* linea luminosa sotto il titolo: NON arriva al bordo, sfuma in opacità 0 prima
     (il transparent del gradiente cade entro la larghezza, niente taglio netto). */
  .games-accordion:not(.has-open) .gm-head__title::after {
    content: "";
    position: absolute;
    left: 2px;
    top: calc(100% + 7px);
    width: 56vw;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--gm-main), 0.95) 0%, rgba(var(--gm-main), 0.4) 42%, transparent 86%);
    box-shadow: 0 0 6px rgba(var(--gm-main), 0.6);
  }

  /* --- BARRA (un altro pannello e' aperto): ridotta; immagine a SINISTRA allineata
     come in "play to earn" (stesso left), così le icone restano allineate tra loro. --- */
  .games-accordion.has-open .gm-panel:not(.is-open) { --gm-radius: clamp(14px, 4vw, 20px); }
  .games-accordion.has-open .gm-panel:not(.is-open)::before { padding: 2px; }
  .games-accordion.has-open .gm-panel:not(.is-open) .gm-head { justify-content: flex-start; align-items: center; gap: 5vw; padding: 5px 6% 5px 4%; }
  .games-accordion.has-open .gm-panel:not(.is-open) .gm-head__icon {
    display: block;
    width: clamp(40px, 11vw, 60px);     /* più piccola: barre più sottili */
    height: clamp(40px, 11vw, 60px);
  }
  .games-accordion.has-open .gm-panel:not(.is-open) .gm-head__chev { display: block; position: absolute; right: 20px; }
  .games-accordion.has-open .gm-panel:not(.is-open) .gm-head__title { font-size: clamp(0.78rem, 3.6vw, 1rem); letter-spacing: 0.16em; }
  .games-accordion.has-open .gm-panel:not(.is-open) .gm-deco { display: none; }

  /* --- APERTO: titolo centrato con linee laterali ---
     Griglia [linea | titolo | linea]: le linee sono COLONNE (1fr), quindi non si
     sovrappongono MAI al titolo né all'immagine. L'icona grande è nascosta in aperto
     (no immagine da sovrapporre; le immagini stanno nelle voci del body). */
  .gm-panel.is-open .gm-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: clamp(6px, 1.4vh, 12px) 16px 2px;
  }
  .gm-panel.is-open .gm-head__icon { display: none; }
  .gm-panel.is-open .gm-head::before,
  .gm-panel.is-open .gm-head::after {
    content: "";
    height: 2px;
    align-self: center;
    background: linear-gradient(90deg, transparent, rgb(var(--gm-main)) 70%, #fff);
    box-shadow: 0 0 8px rgba(var(--gm-main), 0.7);
  }
  .gm-panel.is-open .gm-head::after { transform: scaleX(-1); }

  /* ---- KICKER / SUBTITLE (solo da aperto, compatti) ---- */
  .gm-kicker, .gm-subtitle { display: none; position: relative; z-index: 8; text-align: center; }
  .gm-panel.is-open .gm-kicker {
    display: block;
    margin: clamp(6px, 1.4vh, 12px) auto 0;
    font-family: "Orbitron", sans-serif;
    font-size: clamp(0.5rem, 1.3vh, 0.62rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(241,246,255,0.66);
  }
  .gm-panel.is-open .gm-subtitle {
    display: block;
    margin: 2px 16px clamp(4px, 1vh, 8px);
    font-size: clamp(0.6rem, 1.55vh, 0.78rem);
    line-height: 1.2;
    color: rgba(220,230,245,0.75);
  }

  /* ---- BODY: SENZA scroll, le voci si distribuiscono nello spazio ---- */
  .gm-body { display: none; }
  .gm-panel.is-open .gm-body {
    display: flex;
    position: relative;
    z-index: 8;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;            /* niente scroll interno */
    padding: 0 14px clamp(8px, 1.6vh, 14px);
  }

  .gm-list {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  .gm-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 0;
    opacity: 0;
    transform: translateY(10px);
  }
  /* comparsa sequenziale (come roadmap) quando il pannello si apre */
  .gm-panel.is-open .gm-body.is-revealing .gm-item {
    animation: gmItemIn 420ms cubic-bezier(.22,1,.36,1) forwards;
    animation-delay: calc(var(--i) * 70ms);
  }
  @keyframes gmItemIn { to { opacity: 1; transform: none; } }

  .gm-item__icon {
    width: clamp(30px, 5.4vh, 52px);
    height: clamp(30px, 5.4vh, 52px);
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(var(--gm-main), 0.6);
    box-shadow: inset 0 0 10px rgba(var(--gm-main), 0.25), 0 0 8px rgba(var(--gm-main), 0.3);
    background: rgba(255,255,255,0.03);
  }
  .gm-item__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .gm-item__title {
    margin: 0 0 1px;
    font-family: "Orbitron", sans-serif;
    font-size: clamp(0.66rem, 1.75vh, 0.9rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 6px rgba(var(--gm-main), 0.55);
  }
  .gm-item__text {
    margin: 0;
    font-size: clamp(0.56rem, 1.45vh, 0.74rem);
    line-height: 1.18;
    color: rgba(220,230,245,0.78);
    /* adatta il testo allo spazio: max 2 righe, niente scroll */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  /* PVP (6 voci, testi desktop lunghi): una riga in piu' */
  .gm-panel--3 .gm-item__text { -webkit-line-clamp: 3; }

  /* JACKPOT: testo unico (versione desktop) che riempie ~85% del contenitore.
     La dimensione esatta la imposta il fitter JS (fitJackpotText); il clamp
     qui sotto e' solo il fallback prima del fit. */
  .gm-fulltext {
    width: 100%;
    margin: auto;
    padding: 0 10px;
    font-size: clamp(0.9rem, 2.6vh, 1.4rem);
    line-height: 1.5;
    color: rgba(226,235,248,0.92);
    text-align: center;
    white-space: pre-line;       /* mantiene i paragrafi del testo desktop */
    /* fade-in d'opacita' SOLO dopo che la card ha finito di espandersi (classe
       is-textin aggiunta dal JS a fine espansione). */
    opacity: 0;
    transition: opacity 520ms ease;
  }
  .gm-fulltext.is-textin { opacity: 1; }
}