/* ═══════════════════════════════════════════════════════════
   GMM — Mobile Upgrade (additivo a styles.css)
   Riusa: .shell .side .right-side .topbar .nav-item .p-side
          .chat .gcard .room-card .hero .modal
   Funziona con il markup React esistente. Nessuna nuova classe
   richiesta nel JSX — solo body[data-mobile] dato dal JS.
   ═══════════════════════════════════════════════════════════ */

/* Attivo solo su mobile */
@media(max-width:760px){

  /* ── unlock body/html scroll on mobile ──────────────── */
  html.gmm-mobile,
  html:has(body[data-mobile]){overflow:auto !important;overflow-y:auto !important;height:auto !important}
  body[data-mobile]{overflow:auto !important;overflow-y:auto !important;height:auto !important;min-height:100dvh;position:static !important}
  body[data-mobile] .main-scroll{overflow:visible !important;overflow-y:visible !important;height:auto !important;flex:none !important}
  body[data-mobile] .center{overflow:visible !important;height:auto !important;flex:none !important}

  /* ── SHELL: 1 colonna, scroll naturale ───────────── */
  body[data-mobile] .shell{
    display:flex;flex-direction:column;
    height:auto;min-height:100dvh;padding:0;gap:0;
  }
  body[data-mobile] .center{height:auto;overflow:visible;min-width:0;gap:0}
  body[data-mobile] .main-scroll{overflow:visible;padding:10px 10px 70px}

  /* ── SIDEBAR SX → DRAWER off-canvas ──────────────── */
  body[data-mobile] .side{
    display:flex !important;
    position:fixed;top:0;bottom:0;left:0;width:280px;z-index:1500;
    transform:translateX(-100%);transition:transform .25s cubic-bezier(.4,.2,.2,1);
    box-shadow:0 0 28px rgba(255,0,110,.55), 8px 0 30px rgba(0,0,0,.6);
    height:100dvh;
  }
  body[data-mobile][data-drawer-l="1"] .side{transform:translateX(0)}

  /* ── SIDEBAR DX → DRAWER off-canvas ──────────────── */
  body[data-mobile] .right-side{
    display:flex !important;
    position:fixed;top:0;bottom:0;right:0;width:255px;z-index:1500;
    transform:translateX(100%);transition:transform .25s cubic-bezier(.4,.2,.2,1);
    box-shadow:0 0 22px rgba(255,234,0,.45), -8px 0 30px rgba(0,0,0,.6);
    height:100dvh;
  }
  body[data-mobile][data-drawer-r="1"] .right-side{transform:translateX(0)}

  /* Backdrop comune */
  body[data-mobile]::after{
    content:'';position:fixed;inset:0;background:rgba(5,0,16,.85);
    backdrop-filter:blur(6px);z-index:1400;opacity:0;pointer-events:none;
    transition:opacity .2s;
  }
  body[data-mobile][data-drawer-l="1"]::after,
  body[data-mobile][data-drawer-r="1"]::after{opacity:1;pointer-events:auto}

  /* ── TOPBAR mobile (mantiene .topbar) ────────────── */
  body[data-mobile] .topbar{
    position:sticky;top:0;z-index:50;
    padding:9px 12px;gap:8px;
    flex-wrap:wrap;
  }
  body[data-mobile] .tb-stats{gap:12px;order:3;width:100%;
    border-top:1px dashed rgba(0,240,255,.18);padding-top:7px;margin-top:2px;
    overflow-x:auto;flex-wrap:nowrap;
  }
  body[data-mobile] .tb-stat{flex-shrink:0}
  body[data-mobile] .tb-val{font-size:.95rem}
  body[data-mobile] .tb-lbl{font-size:.42rem;letter-spacing:.18em}

  /* Bottoni hamburger / FAB iniettati dal JS */
  .gmm-burger,.gmm-fab{
    width:34px;height:34px;background:transparent;cursor:pointer;
    display:grid;place-items:center;font-size:15px;flex-shrink:0;
    clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
    transition:transform .12s;
  }
  .gmm-burger{border:1px solid #ff006e;color:#ff006e}
  .gmm-burger:active{transform:scale(.92)}
  .gmm-fab{border:1px solid #ffea00;color:#ffea00;
    font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.1em;
    font-weight:700;display:flex;gap:5px;padding:0 9px;width:auto;height:32px;align-items:center;
  }
  .gmm-fab .gmm-dot{width:6px;height:6px;background:#39ff14;border-radius:50%;box-shadow:0 0 5px #39ff14}
  body:not([data-mobile]) .gmm-burger,body:not([data-mobile]) .gmm-fab{display:none}

  /* ── HERO ridotto ────────────────────────────────── */
  body[data-mobile] .hero{
    padding:20px 16px;grid-template-columns:1fr;gap:16px;
    box-shadow:4px 4px 0 var(--cyan),0 0 24px rgba(255,0,110,.18);
  }
  body[data-mobile] .hero-title-row1,
  body[data-mobile] .hero-title-row1 .glitch{font-size:1.5rem !important}
  body[data-mobile] .hero-title-row2{font-size:2.4rem}
  body[data-mobile] .hero-sub{font-size:.7rem;margin-top:10px}
  body[data-mobile] .hero-counters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
  body[data-mobile] .hero-cta{flex-direction:row;flex-wrap:wrap;gap:8px}
  body[data-mobile] .hero-cta .btn-lg{font-size:.74rem;padding:11px 18px;flex:1}
  body[data-mobile] .hero-cta .btn-md{font-size:.66rem;padding:10px 16px;flex:1}
  body[data-mobile] .hero-sun{width:240px;height:170px;top:-12%}

  /* ── GAMES grid 2 col ────────────────────────────── */
  body[data-mobile] .games{grid-template-columns:repeat(2,1fr);gap:8px}
  body[data-mobile] .gcard{padding:11px;gap:7px}
  body[data-mobile] .gcard:hover{transform:none;box-shadow:3px 3px 0 var(--mag)}
  body[data-mobile] .gcard-icon{width:36px;height:36px;font-size:1.2rem}
  body[data-mobile] .gcard-name{font-size:.72rem}

  /* Section header */
  body[data-mobile] .sec-h{margin:14px 2px 8px;gap:10px}
  body[data-mobile] .sec-h h2{font-size:1rem}

  /* ── LOBBY / FILTRI / ROOMS ─────────────────────── */
  body[data-mobile] .lobby-hero{flex-direction:column;text-align:center;padding:18px}
  body[data-mobile] .lobby-icon{margin:0 auto}
  body[data-mobile] .filter-bar{flex-wrap:wrap;gap:6px;padding:10px}
  body[data-mobile] .room-card{grid-template-columns:auto 1fr auto;padding:10px;gap:10px}
  body[data-mobile] .room-card:hover{transform:none}
  body[data-mobile] .room-icon{width:38px;height:38px;font-size:1.2rem}
  body[data-mobile] .room-name{font-size:.78rem}
  body[data-mobile] .room-meta{font-size:.5rem}
  body[data-mobile] .slots-vis{flex-wrap:wrap;justify-content:center;max-width:60px}
  body[data-mobile] .pip{width:11px;height:10px}

  /* ── ROOM VIEW: chat-first + roster bottom-sheet ──
     Trasforma la .room-view in: .p-side come sheet
     ancorato in basso, .chat full viewport. ─────── */
  body[data-mobile] .room-view{
    grid-template-columns:1fr;grid-template-rows:1fr;
    height:calc(100dvh - 110px);min-height:auto;
    position:relative;overflow:visible;
  }
  body[data-mobile] .chat{min-height:100%}

  body[data-mobile] .p-side{
    position:fixed;left:0;right:0;bottom:55px;top:auto;z-index:60;
    max-height:62dvh;
    transform:translateY(calc(100% - 46px));
    transition:transform .28s cubic-bezier(.4,.2,.2,1);
    background:rgba(10,4,32,.97);border-top:2px solid var(--mag);
    box-shadow:0 -6px 22px rgba(255,0,110,.35);
    border-left:none;border-right:none;border-bottom:none;
  }
  body[data-mobile][data-sheet="1"] .p-side{transform:translateY(0)}

  body[data-mobile] .p-side-h{
    cursor:pointer;position:relative;
    padding:11px 14px 10px;
  }
  body[data-mobile] .p-side-h::before{
    content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);
    width:42px;height:3px;background:var(--mag);opacity:.7;
  }
  body[data-mobile] .p-side-h::after{
    content:attr(data-arrow);position:absolute;right:14px;top:50%;
    transform:translateY(-50%);
    font-family:'Share Tech Mono',monospace;font-size:.6rem;
    color:var(--cyan);letter-spacing:.16em;
  }
  body[data-mobile] .p-list{flex-direction:column;overflow-y:auto;padding:9px}
  body[data-mobile] .p-card,body[data-mobile] .empty-slot{flex:0 0 auto;min-width:0}
  body[data-mobile] .p-side-foot{padding:8px;flex-direction:row;gap:6px}

  /* ── CHAT compact ─────────────────────────────── */
  body[data-mobile] .chat-h{padding:8px 12px;font-size:.52rem}
  body[data-mobile] .msg-nick{min-width:60px;max-width:90px;font-size:.66rem}
  body[data-mobile] .msg-time{width:30px;font-size:.46rem}
  body[data-mobile] .msg-txt{font-size:.78rem}
  body[data-mobile] .chat-emojis{padding:4px 10px;gap:4px;overflow-x:auto}
  body[data-mobile] .chat-emoji{font-size:.9rem;flex-shrink:0}
  body[data-mobile] .chat-in-area{padding:8px 10px;gap:5px}
  body[data-mobile] .chat-in{padding:9px 11px;font-size:.74rem}
  body[data-mobile] .btn-send{padding:9px 14px;font-size:.62rem}

  /* ── BOTTOM TAB BAR (iniettata dal JS) ────────── */
  .gmm-tabbar{
    position:fixed;left:0;right:0;bottom:0;height:55px;z-index:1200;
    background:#000;border-top:2px solid var(--mag);
    display:grid;grid-template-columns:repeat(5,1fr);
    box-shadow:0 -4px 20px rgba(255,0,110,.3);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  body:not([data-mobile]) .gmm-tabbar{display:none}
  .gmm-tab{
    background:transparent;border:none;color:var(--dim);cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    font-family:'Audiowide',sans-serif;transition:none;position:relative;
  }
  .gmm-tab[data-on="1"]{background:var(--mag);color:#000;
    box-shadow:inset 0 3px 0 var(--cyan)}
  .gmm-tab .gmm-tab-ic{font-size:17px;line-height:1}
  .gmm-tab .gmm-tab-l{font-size:8px;letter-spacing:.18em}

  /* Spazio extra in fondo per non far coprire dalla tabbar */
  body[data-mobile] .main-scroll{padding-bottom:70px}

  /* ── MODALI full-width ───────────────────────── */
  body[data-mobile] .modal{max-width:96vw !important;padding:18px}

  /* ── SCROLL STATS in topbar ─────────────────── */
  body[data-mobile] .tb-stats::-webkit-scrollbar{height:0}
}

/* ── EXTRA SMALL ─────────────────────────────── */
@media(max-width:380px){
  body[data-mobile] .hero-title-row1,
  body[data-mobile] .hero-title-row1 .glitch{font-size:1.25rem !important}
  body[data-mobile] .hero-title-row2{font-size:2rem}
  body[data-mobile] .games{grid-template-columns:1fr}
  body[data-mobile] .stat-cards{grid-template-columns:1fr 1fr}
}