/* ═══════════════════════════════════════════════════════════════════
   MOBILE.CSS — Frontend player: versione mobile ottimizzata, stile app.
   Design unificato, safe area, sezioni armonizzate.
   Adattamento automatico alle dimensioni del dispositivo (fluid scaling).
   Incluso in: dashboard, club, profile, leaderboard, totoamici, survivor, regolamento.
═══════════════════════════════════════════════════════════════════ */

/* ── Design tokens (app-like) — desktop / base ──────────────────── */
:root {
  --app-radius: 16px;
  --app-radius-sm: 12px;
  --app-radius-lg: 20px;
  --app-gap: 12px;
  --app-gap-sm: 8px;
  --app-gap-lg: 16px;
  --app-card-pad: 1rem;
  --app-card-pad-lg: 1.25rem;
  --app-nav-h: 56px;
  --app-bn-h: 64px;
  --app-shadow: 0 2px 12px rgba(0,0,0,0.25);
  --app-shadow-card: 0 4px 20px rgba(0,0,0,0.2);
  --app-border: rgba(255,255,255,0.08);
  --app-border-strong: rgba(56,189,248,0.2);
}

/* ── Animazione pulsanti (come home Leghe/Totoamici): desktop + mobile ──
   Hover: leggero sollevamento + glow; Active: premuto (scale + ombra ridotta).   */
.home-btn,
.btn-home-action,
.btn-back-clubs,
.btn-sv,
.sv-confirm-btn,
.btn-confirm-pronostici,
.sv-club-btn,
.sv-mc-btn-solo,
.sv-mc-btn-all,
.tnav,
.tab-btn,
.privacy-btn,
.pick-btn,
.p-btn,
.club-card,
.club-card-trophy,
.room-card,
.league-card:not(.no-click),
button:not(.bn-item):not(.nav-hamburger):not(.nav-link),
.btn,
a.home-btn {
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease, opacity .2s ease !important;
}
.home-btn:hover,
.btn-home-action:hover,
.btn-back-clubs:hover,
.btn-sv:hover,
.sv-confirm-btn:hover,
.btn-confirm-pronostici:hover,
.sv-club-btn:hover,
.sv-mc-btn-solo:hover,
.sv-mc-btn-all:hover,
.tnav:hover,
.tab-btn:hover,
.privacy-btn:hover,
.pick-btn:hover,
.p-btn:hover,
.club-card:hover,
.club-card-trophy:hover,
.room-card:hover,
.league-card:not(.no-click):hover,
button:not(.bn-item):not(.nav-hamburger):not(.nav-link):hover,
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(56,189,248,.14);
}
a.home-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(56,189,248,.18);
}
.home-btn:active,
.btn-home-action:active,
.btn-back-clubs:active,
.btn-sv:active,
.sv-confirm-btn:active,
.btn-confirm-pronostici:active,
.sv-club-btn:active,
.sv-mc-btn-solo:active,
.sv-mc-btn-all:active,
.tnav:active,
.tab-btn:active,
.privacy-btn:active,
.pick-btn:active,
.p-btn:active,
.club-card:active,
.club-card-trophy:active,
.room-card:active,
.league-card:not(.no-click):active,
button:not(.bn-item):not(.nav-hamburger):not(.nav-link):active,
.btn:active,
a.home-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

/* ── Mobile app: scaling fluido e ottimizzato per schermo ─── */
@media (max-width: 768px) {
  :root {
    --m-space: 4px;
    --m-xs: 4px;
    --m-sm: clamp(6px, 1.5vw, 10px);
    --m-md: clamp(10px, 2.5vw, 14px);
    --m-lg: clamp(14px, 3.5vw, 18px);
    --m-xl: 20px;
    --m-2xl: 24px;
    --app-radius: clamp(10px, 2.5vw, 14px);
    --app-radius-sm: clamp(8px, 2vw, 10px);
    --app-radius-lg: clamp(12px, 3vw, 16px);
    --app-gap: clamp(8px, 2vw, 12px);
    --app-gap-sm: clamp(6px, 1.5vw, 8px);
    --app-gap-lg: clamp(12px, 2.5vw, 16px);
    --app-card-pad: clamp(10px, 2.5vw, 14px);
    --app-card-pad-lg: clamp(12px, 3vw, 16px);
    --app-nav-h: clamp(44px, 11vw, 52px);
    --app-bn-h: 56px;
  }
  html {
    font-size: clamp(14px, 2.2vw + 8px, 16px);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  body {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Layout globale (desktop + base) ────────────────────────────── */
body { box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; }
main, .main-content {
  max-width: 960px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  flex: 1 0 auto;
}
/* Footer unificato (privacy + versione) sempre in fondo */
.app-stacked-footer { flex-shrink: 0; }
/* Logo e avatar nav: stessa forma quadrata con angoli arrotondati (squircle come profilo) */
.nav-brand img { width: 32px; height: 32px; border-radius: 10px !important; object-fit: cover !important; flex-shrink: 0; }
.nav-avatar { border-radius: 10px !important; overflow: hidden; }
.nav-avatar img { border-radius: 8px !important; object-fit: cover !important; }
@media (min-width: 1024px) {
  main, .main-content { padding-left: 2rem; padding-right: 2rem; }
}

@media (min-width: 769px) {
  body { display: flex; flex-direction: column; min-height: 100vh; }
  main, .main-content { flex: 1 0 auto; }
  .app-stacked-footer { flex-shrink: 0; }
}

/* Login */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 2rem 1rem 1rem;
  box-sizing: border-box;
}
.login-wrapper .container { flex: 0 0 auto; }
.legal-footer.login-legal-footer { flex-shrink: 0; margin-top: auto; padding-top: 1.5rem; }

/* ── Bottom nav (solo mobile) ──────────────────────────────────── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: rgba(6,13,26,0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--app-border);
  padding: 0;
  height: var(--app-bn-h);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
}
.bottom-nav-inner {
  display: flex;
  height: var(--app-bn-h);
  align-items: stretch;
}
.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  font-family: 'Barlow', 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 8px 4px;
  min-height: 48px;
  min-width: 48px;
}
.bn-item:active { transform: scale(0.96); }
.bn-item:hover, .bn-item.active { color: rgba(255,255,255,0.98); }
.bn-item .bn-icon { font-size: 1.35rem; line-height: 1; transition: transform 0.2s; }
.bn-item.active .bn-icon { filter: drop-shadow(0 0 8px currentColor); }
.bn-item.active[data-page="home"] { color: #38bdf8; }
.bn-item.active[data-page="leaderboard"] { color: #ffd700; }
.bn-item.active[data-page="club"] { color: #38bdf8; }
.bn-item.active[data-page="profile"] { color: #a78bfa; }
.bn-item.active[data-page="toto"] { color: #4ade80; }

/* ── Accessibilita: focus visibile coerente (tastiera) ───────────────── */
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid rgba(56,189,248,0.65);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(56,189,248,0.14);
}

/* Footer unificato: colonna (riga 1 legal, riga 2 versione) — desktop in flusso */
.app-stacked-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  background: rgba(6,13,26,0.9);
  border-top: 1px solid rgba(56,189,248,0.1);
}
.app-stacked-footer .app-footer-legal {
  padding: 0.6rem 1rem;
}
.app-stacked-footer .app-legal-footer-inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
}
.app-stacked-footer a { color: rgba(56,189,248,0.85); text-decoration: none; }
.app-stacked-footer a:hover { text-decoration: underline; }
.app-stacked-footer .legal-sep { margin: 0 0.35rem; opacity: 0.6; }
.app-stacked-footer .app-footer-ver.app-ver-footer,
.app-stacked-footer .app-footer-ver {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.35rem 1rem;
  border-top: 1px solid rgba(56,189,248,0.1);
  background: rgba(6,13,26,0.88);
  font-family: 'Barlow', sans-serif;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.25);
  pointer-events: none;
  user-select: none;
}
.app-stacked-footer .app-ver-footer .chip,
.app-stacked-footer .app-footer-ver .chip { display: inline-flex; align-items: center; gap: 0.35rem; }
.app-stacked-footer .app-ver-footer .chip b,
.app-stacked-footer .app-footer-ver .chip b { color: rgba(56,189,248,0.6); font-weight: 600; }
.app-stacked-footer .app-ver-footer .sep,
.app-stacked-footer .app-footer-ver .sep { opacity: 0.3; }
.app-stacked-footer .app-ver-footer .pwr,
.app-stacked-footer .app-footer-ver .pwr { color: rgba(255,255,255,0.18); }
.app-stacked-footer .app-ver-footer .pwr b,
.app-stacked-footer .app-footer-ver .pwr b { color: rgba(255,255,255,0.35); font-weight: 600; }

/* Hamburger (nascosto desktop) */
.nav-hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 8px; color: rgba(255,255,255,0.7); font-size: 1.4rem;
  -webkit-tap-highlight-color: transparent;
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
  border-radius: var(--app-radius-sm);
}
.nav-pts-mobile { display: none; }

/* Powered footer (solo mobile) */
.powered-footer {
  display: none;
  text-align: center; padding: 0.45rem 1rem; font-size: 0.62rem;
  color: rgba(255,255,255,0.15);
  font-family: 'Barlow', sans-serif; letter-spacing: 0.08em;
  pointer-events: none; user-select: none;
  margin-bottom: calc(var(--app-bn-h) + 0.5rem);
}
.powered-footer b { color: rgba(255,255,255,0.28); font-weight: 600; }

/* Safe area bottom nav */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--app-bn-h) + env(safe-area-inset-bottom));
  }
  .bottom-nav-inner { height: calc(var(--app-bn-h) + env(safe-area-inset-bottom)); }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE APP (≤768px) — Ottimizzato per schermo: scaling fluido, UX app-like
   Spacing fluido (--m-sm/md/lg), touch 44px+, safe-area, scroll fluido.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body {
    -webkit-tap-highlight-color: transparent;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
  }

  .bottom-nav { display: none !important; }

  /* Login (index): spazio sopra footer unificato fisso */
  .login-wrapper:has(.app-stacked-footer) {
    padding-bottom: calc(5.15rem + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
  }

  /* Contenuto principale: padding fluido, safe-area e scroll fluido */
  main, .main-content, #content {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: var(--m-sm) max(var(--m-lg), env(safe-area-inset-left, 0px)) calc(5.15rem + var(--m-md) + env(safe-area-inset-bottom, 0px)) max(var(--m-lg), env(safe-area-inset-right, 0px)) !important;
    min-height: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    /* Evita scroll orizzontale indesiderato; focus ring può essere tagliato su elementi wide */
    overflow-x: hidden;
  }

  main > *:first-child,
  .main-content > *:first-child,
  #content > *:first-child,
  main .page-header,
  .main-content .page-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .nav-links { display: none !important; }
  .nav-hamburger { display: flex !important; }
  nav {
    position: sticky !important; top: 0 !important; z-index: 100;
    min-height: calc(var(--app-nav-h) + env(safe-area-inset-top, 0)) !important;
    padding: env(safe-area-inset-top, 0) var(--m-lg) 0 !important;
    height: auto !important;
    background: rgba(6,13,26,0.97) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--app-border);
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    flex-shrink: 0 !important; box-sizing: border-box !important;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .nav-brand {
    font-size: clamp(0.88rem, 2.2vw + 0.5rem, 1rem) !important;
    letter-spacing: 0.04em !important;
    min-width: 0;
    overflow: hidden;
  }
  .nav-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-brand img {
    width: clamp(28px, 7vw, 34px) !important;
    height: clamp(28px, 7vw, 34px) !important;
    border-radius: var(--app-radius-sm) !important;
    flex-shrink: 0 !important;
  }
  .nav-user, .nav-pts { display: none !important; }
  .nav-pts-mobile {
    display: inline-flex !important; align-items: center; gap: 4px;
    font-size: clamp(0.72rem, 1.8vw + 0.4rem, 0.85rem) !important;
    font-weight: 700; color: #38bdf8;
    background: rgba(56,189,248,0.12); padding: 4px 8px; border-radius: var(--app-radius-sm);
  }
  .nav-right { display: flex !important; align-items: center !important; gap: var(--m-sm) !important; flex-shrink: 0 !important; }
  .nav-right .btn-sm {
    padding: 6px 10px !important;
    font-size: clamp(0.68rem, 1.6vw + 0.4rem, 0.78rem) !important;
    min-height: 36px !important;
    border-radius: var(--app-radius-sm) !important;
  }
  .nav-avatar {
    width: clamp(28px, 7vw, 34px) !important;
    height: clamp(28px, 7vw, 34px) !important;
    min-width: clamp(28px, 7vw, 34px) !important;
    min-height: clamp(28px, 7vw, 34px) !important;
    border-radius: var(--app-radius-sm) !important;
  }

  .page-header {
    margin: 0 0 var(--m-md) 0 !important;
    padding: 0 0 var(--m-sm) 0 !important;
    border-bottom: 1px solid var(--app-border);
    flex-wrap: wrap !important; gap: 4px !important;
    clear: both !important;
  }
  .page-title {
    font-size: clamp(1.1rem, 2.8vw + 0.6rem, 1.3rem) !important;
    font-weight: 800 !important;
    line-height: 1.28 !important;
    display: block !important;
    width: 100%;
    letter-spacing: 0.02em !important;
  }
  .page-sub {
    font-size: clamp(0.72rem, 1.8vw + 0.35rem, 0.82rem) !important;
    color: var(--muted, rgba(255,255,255,0.5));
    margin-top: 0 !important;
  }

  .home-buttons {
    grid-template-columns: 1fr !important;
    gap: var(--m-md) !important;
    margin-top: var(--m-lg) !important;
  }
  /* Home dashboard: 4 tasti in 2 colonne x 2 righe anche su mobile */
  .home-buttons.home-quick-btns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--app-gap-sm) !important;
    max-width: 100% !important;
  }
  /* Home dashboard: card grandi — testo proporzionato al pulsante (non ridurre a “chip”) */
  .home-btn {
    min-height: clamp(100px, 28vw, 132px) !important;
    font-size: clamp(1.35rem, 4.2vw + 0.55rem, 1.85rem) !important;
    padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1rem, 3vw, 1.4rem) !important;
    border-radius: var(--app-radius-lg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    gap: 0.35em !important;
  }

  /* Totoamici: home rooms e azioni full-width su mobile */
  .rooms-grid {
    grid-template-columns: 1fr !important;
    gap: var(--m-md) !important;
  }
  .home-actions {
    flex-direction: column !important;
    gap: var(--m-sm) !important;
    margin-bottom: var(--m-lg) !important;
  }
  .home-actions .btn-home-action {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0.9rem 1rem !important;
    border-radius: var(--app-radius) !important;
  }

  /* Survivor: blocchi più compatti e pulsante conferma armonizzato */
  .status-banner {
    margin-bottom: var(--m-md) !important;
  }
  .team-grid {
    margin-top: var(--m-sm) !important;
    margin-bottom: var(--m-md) !important;
    row-gap: var(--app-gap-sm) !important;
  }
  .match-highlight {
    margin-top: var(--m-sm) !important;
    margin-bottom: var(--m-md) !important;
  }
  .btn-confirm-pronostici {
    width: 100% !important;
    max-width: none !important;
    min-height: 48px !important;
    padding: 0.85rem 1.25rem !important;
    margin-top: var(--m-sm) !important;
    margin-bottom: var(--m-lg) !important;
    border-radius: var(--app-radius) !important;
  }

  /* Totoamici: schedina e bottone conferma più armoniosi */
  .pick-table-wrap {
    margin-bottom: var(--m-md) !important;
  }
  .pick-table tbody tr {
    margin-bottom: var(--app-gap-sm);
    padding: calc(var(--app-card-pad) * 0.85) !important;
  }
  .pick-table tbody tr:last-child {
    margin-bottom: 0;
  }
  .toto-confirm-btn,
  .totoamici-confirm-btn,
  .btn-confirm-toto,
  .btn-confirm-pronostici.btn-confirm-pronostici--toto {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0.85rem 1.25rem !important;
    border-radius: var(--app-radius) !important;
    margin-top: var(--m-md) !important;
    margin-bottom: var(--m-lg) !important;
  }

  .home-section, section.home-section {
    margin-bottom: var(--m-lg) !important;
  }
  .home-sec-title {
    font-size: clamp(0.85rem, 2.2vw + 0.5rem, 0.95rem) !important;
    margin-bottom: var(--m-sm) !important;
    font-weight: 700 !important;
  }
  .home-sec-sub {
    font-size: clamp(0.7rem, 1.8vw + 0.35rem, 0.8rem) !important;
    margin-bottom: var(--m-sm) !important;
    color: var(--muted, rgba(255,255,255,0.5));
  }

  .glass, .glass-card, .home-block {
    padding: var(--app-card-pad) !important;
    margin-bottom: var(--m-md) !important;
    border-radius: var(--app-radius) !important;
    border: 1px solid var(--app-border) !important;
    background: rgba(10,22,40,0.88) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--app-shadow-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .home-block .league-card, .home-block .league-list > div {
    padding: 10px 12px !important;
    min-height: 44px;
    border-radius: var(--app-radius-sm) !important;
    margin-bottom: 6px !important;
  }
  .home-block .league-list > div:last-child { margin-bottom: 0 !important; }
  .home-block .lc-name { font-size: clamp(0.85rem, 2vw + 0.4rem, 0.95rem) !important; font-weight: 600; }
  .home-block .lc-role { font-size: 0.6rem !important; }
  .home-empty { padding: var(--app-card-pad) !important; font-size: clamp(0.78rem, 2vw + 0.35rem, 0.85rem) !important; text-align: center; color: var(--muted, rgba(255,255,255,0.5)); }

  .stats-row { grid-template-columns: repeat(3, 1fr) !important; gap: var(--app-gap-sm) !important; margin-bottom: var(--m-md) !important; }
  .stat {
    padding: clamp(6px, 1.5vw, 10px) clamp(4px, 1vw, 8px) !important;
    min-height: clamp(48px, 12vw, 60px);
    border-radius: var(--app-radius-sm) !important;
    border: 1px solid var(--app-border);
    background: rgba(10,22,40,0.82);
  }
  .stat-val { font-size: clamp(1.1rem, 2.8vw + 0.4rem, 1.25rem) !important; font-weight: 800 !important; }
  .stat-label { font-size: clamp(0.5rem, 1.2vw + 0.3rem, 0.6rem) !important; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }

  /* Match cards: scaling fluido e touch-friendly */
  .matches { gap: var(--app-gap-sm) !important; }
  .match-card {
    border-radius: var(--app-radius-sm) !important;
    border: 1px solid var(--app-border);
    overflow: hidden;
    box-shadow: var(--app-shadow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .match-top {
    grid-template-columns: 1fr min(64px, 18vw) 1fr !important;
    padding: clamp(0.6rem, 1.5vw, 0.85rem) var(--app-card-pad) !important;
    gap: var(--app-gap-sm) !important;
  }
  .team-name { font-size: clamp(0.8rem, 2vw + 0.4rem, 0.9rem) !important; font-weight: 600; }
  .team-sub { font-size: clamp(0.62rem, 1.5vw + 0.3rem, 0.72rem) !important; }
  .vs-score { font-size: clamp(1.15rem, 2.8vw + 0.5rem, 1.35rem) !important; font-weight: 800; }
  .vs-text { font-size: clamp(0.82rem, 2vw + 0.4rem, 0.95rem) !important; }
  .pred-row {
    grid-template-columns: 1fr min(56px, 16vw) 1fr !important;
    padding: clamp(0.5rem, 1.2vw, 0.65rem) var(--app-card-pad) !important;
    gap: var(--app-gap-sm) !important;
  }
  .p-btn {
    font-size: clamp(0.65rem, 1.6vw + 0.35rem, 0.75rem) !important;
    padding: 0.5rem 0.35rem !important;
    min-height: 44px;
    border-radius: var(--app-radius-sm);
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  }
  .pred-saved {
    padding: clamp(0.5rem, 1.2vw, 0.65rem) var(--app-card-pad) !important;
    font-size: clamp(0.72rem, 1.8vw + 0.35rem, 0.8rem) !important;
  }

  /* Tabs: scroll fluido e touch-friendly */
  .match-tabs,
  .club-tabs-bar,
  .profile-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    padding-bottom: 2px;
    gap: var(--app-gap-sm) !important;
    margin-bottom: var(--app-gap) !important;
    overscroll-behavior-x: contain;
  }
  .match-tabs::-webkit-scrollbar,
  .club-tabs-bar::-webkit-scrollbar,
  .profile-tabs::-webkit-scrollbar { display: none; }
  .mtab,
  .club-tab,
  .profile-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-height: 44px;
    padding: 0.45rem 0.85rem !important;
    border-radius: var(--app-radius-sm);
    transition: background 0.2s ease, color 0.2s ease;
  }

  /* Matchday compatto */
  .matchday-header {
    padding: 0.6rem var(--app-card-pad) !important;
    margin-bottom: var(--app-gap-sm) !important;
    border-radius: var(--app-radius-sm);
    background: rgba(10,22,40,0.7);
  }
  .md-num { font-size: 0.9rem !important; font-weight: 700; }
  .md-count { font-size: 0.65rem !important; }
  .matchday-section { margin-bottom: 0.85rem !important; }

  /* Notif banner compatto */
  .notif-banner {
    flex-direction: column !important;
    gap: var(--app-gap-sm) !important;
    padding: 0.75rem var(--app-card-pad) !important;
    border-radius: var(--app-radius-sm);
  }
  .notif-text { font-size: 0.82rem !important; }
  .btn-notif {
    min-height: 44px;
    padding: 0.6rem 0.85rem !important;
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--app-radius-sm);
  }

  /* Home: match row compatto */
  .home-matchday-header { font-size: 0.9rem !important; font-weight: 700; margin-bottom: var(--app-gap-sm) !important; }
  .home-match-row {
    grid-template-columns: 1fr auto 1fr !important;
    gap: var(--app-gap-sm) !important;
    padding: 0.5rem 0 !important;
    font-size: 0.82rem !important;
  }
  .home-match-row .team { font-size: 0.82rem !important; }
  .home-match-row .datetime { min-width: 4rem !important; }
  .home-match-row .home-datetime-time { font-size: 0.78rem !important; }
  .home-match-row .home-datetime-date { font-size: 0.62rem !important; }

  /* Club page: scaling fluido */
  .club-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--m-md) !important;
  }
  .club-name { font-size: clamp(1.15rem, 3vw + 0.6rem, 1.4rem) !important; font-weight: 800; }
  .invite-grid { grid-template-columns: 1fr !important; gap: var(--m-md) !important; }
  .copy-btns { flex-direction: row !important; gap: var(--app-gap-sm) !important; flex-wrap: wrap !important; }
  .invite-code-big {
    font-size: clamp(1.1rem, 2.8vw + 0.6rem, 1.35rem) !important;
    letter-spacing: 0.12em !important;
    padding: clamp(0.6rem, 1.5vw, 0.85rem) !important;
    border-radius: var(--app-radius-sm);
  }
  .stats-strip { gap: var(--app-gap) !important; flex-wrap: wrap !important; }
  .strip-val { font-size: clamp(1.1rem, 2.8vw + 0.5rem, 1.3rem) !important; font-weight: 800; }
  .col-acc { display: none !important; }
  .lb-table {
    table-layout: fixed !important;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--app-radius-sm);
    overscroll-behavior-x: contain;
  }
  .lb-table td, .lb-table th {
    padding: 0.5rem 0.45rem !important;
    font-size: clamp(0.72rem, 1.8vw + 0.35rem, 0.82rem) !important;
  }
  .lb-table th:first-child, .lb-table td:first-child {
    width: 34px !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
  }
  .lb-table .col-name {
    max-width: min(90px, 28vw) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .club-card-trophy { min-height: auto !important; }

  /* Report Lega: search e sec-head */
  .lb-search-wrap { margin: var(--app-gap-sm) 0 var(--app-gap) !important; }
  .lb-search-wrap input { padding-left: 2.75rem !important; min-height: 44px !important; border-radius: var(--app-radius-sm); }
  .sec-head { padding-left: var(--m-md) !important; border-radius: 0 var(--app-radius-sm) 0 0 !important; }

  /* Survivor: status bar e tile compatti */
  .sv-status-bar { padding: var(--app-card-pad) var(--app-card-pad-lg) !important; border-radius: var(--app-radius) !important; margin-bottom: var(--m-md) !important; }
  .sv-alive-count { font-size: clamp(2rem, 6vw + 1rem, 2.8rem) !important; }
  .sv-round-badge { padding: 0.5rem 0.9rem !important; border-radius: var(--app-radius-sm); }

  /* Leghe: griglia e azioni compatte */
  .club-home-grid {
    grid-template-columns: 1fr !important;
    gap: var(--app-gap) !important;
    margin-bottom: 0.75rem !important;
  }
  .club-home-actions {
    flex-direction: column !important;
    gap: var(--app-gap-sm) !important;
  }
  .club-home-actions .btn-home-action {
    width: 100% !important; min-height: 48px !important;
    padding: 12px 16px !important; box-sizing: border-box !important;
    border-radius: var(--app-radius) !important;
  }
  /* Creazione lega: select stadi + icona foto */
  select#club-stadium {
    min-height: 44px;
    font-size: clamp(0.9rem, 2.2vw + 0.5rem, 1rem);
    border-radius: var(--app-radius-sm);
  }
  .club-card-icon {
    width: min(112px, 40vw) !important;
    height: min(112px, 40vw) !important;
    border-radius: var(--app-radius-sm) !important;
  }
  .club-card-icon.club-card-icon-image img {
    border-radius: calc(var(--app-radius-sm) - 2px) !important;
  }

  /* Leaderboard: scroll fluido e celle leggibili */
  .leaderboard-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -0.2rem;
    border-radius: var(--app-radius-sm);
    overscroll-behavior-x: contain;
  }
  .leaderboard-table { min-width: min(300px, 92vw); }
  .leaderboard-table td, .leaderboard-table th {
    padding: clamp(0.45rem, 1.2vw, 0.6rem) 0.5rem !important;
    font-size: clamp(0.72rem, 1.8vw + 0.35rem, 0.82rem) !important;
  }
  .leaderboard-table .accuracy { white-space: nowrap; }
  .podium {
    gap: var(--app-gap-sm) !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .podium-step {
    min-width: clamp(68px, 18vw, 82px) !important;
    padding: clamp(0.55rem, 1.5vw, 0.75rem) !important;
    border-radius: var(--app-radius-sm);
  }
  .podium-name { font-size: clamp(0.68rem, 1.6vw + 0.35rem, 0.76rem) !important; }
  .podium-pts { font-size: clamp(1.05rem, 2.6vw + 0.5rem, 1.25rem) !important; font-weight: 800; }

  /* Profile compatto */
  .profile-tabs { margin-bottom: 0.65rem !important; }
  .btn-full-mobile { width: 100% !important; box-sizing: border-box !important; border-radius: var(--app-radius-sm); }

  /* Sezioni: ritmo fluido e leggibilità */
  .section { margin-bottom: var(--m-lg) !important; }
  .section-title {
    font-size: clamp(0.9rem, 2.2vw + 0.5rem, 1rem) !important;
    margin-bottom: var(--app-gap) !important;
  }
  .content-wrap, .chart-wrap { margin-bottom: var(--app-gap) !important; }
  .regolamento-section { margin-bottom: var(--app-gap-lg) !important; padding: var(--app-card-pad) 0 !important; }
  .table-wrap { margin-bottom: var(--m-md) !important; }

  /* Scroll fluido per aree scrollabili */
  [class*="-table-wrap"],
  [class*="-scroll"],
  .matches {
    -webkit-overflow-scrolling: touch;
  }

  /* Input e bottoni touch-friendly (min 44px per accessibilità) */
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  select, textarea {
    min-height: 44px !important;
    font-size: 16px !important;
    border-radius: var(--app-radius-sm);
  }
  textarea { min-height: 88px !important; }
  button:not(.bn-item):not(.nav-hamburger), .btn, .btn-sv {
    min-height: 44px !important;
    padding: 0.6rem 0.9rem !important;
    border-radius: var(--app-radius-sm);
    box-shadow: 0 6px 14px rgba(0,0,0,0.35);
    transform: translateY(0);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
  }
  button:not(.bn-item):not(.nav-hamburger):active,
  .btn:active,
  .btn-sv:active,
  .club-card:active,
  .club-card-trophy:active,
  .room-card:active,
  .league-card:not(.no-click):active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
  }

  /* Un solo footer fisso: riga 1 Privacy/Regolamento, riga 2 versione (app giocatore) */
  .app-stacked-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1200 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: rgba(6,13,26,0.95) !important;
    border-top: 1px solid rgba(56,189,248,0.12) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.22) !important;
  }
  .app-stacked-footer .app-footer-legal {
    padding: 0.32rem 0.55rem 0.28rem !important;
    border-bottom: 1px solid rgba(56,189,248,0.08) !important;
    flex-shrink: 0 !important;
  }
  .app-stacked-footer .app-legal-footer-inner {
    text-align: center !important;
    font-size: 0.58rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .app-stacked-footer .legal-sep { margin: 0 0.2rem !important; opacity: 0.55 !important; }
  .app-stacked-footer .app-footer-ver.app-ver-footer,
  .app-stacked-footer .app-footer-ver {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    row-gap: 0.2rem !important;
    column-gap: 0.5rem !important;
    min-height: 2.35rem !important;
    margin: 0 !important;
    padding: 0.32rem 0.55rem 0.4rem !important;
    border-top: none !important;
    font-size: 0.6rem !important;
    line-height: 1.15 !important;
    background: transparent !important;
    pointer-events: none !important;
  }
  .ver-footer .chip,
  .app-stacked-footer .app-ver-footer .chip,
  .app-stacked-footer .app-footer-ver .chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.28rem !important;
    white-space: nowrap !important;
  }
  .ver-footer .sep,
  .app-stacked-footer .app-ver-footer .sep,
  .app-stacked-footer .app-footer-ver .sep { opacity: 0.35 !important; }
  /* Frontend mobile: mostra solo versione frontend (admin: vf-be-adm) */
  .app-stacked-footer .app-ver-footer .chip-backend,
  .app-stacked-footer .app-footer-ver .chip-backend,
  .ver-footer .chip-backend { display: none !important; }
  .app-stacked-footer .app-ver-footer .sep-backend,
  .app-stacked-footer .app-footer-ver .sep-backend,
  .ver-footer .sep-backend { display: none !important; }
  .app-stacked-footer .app-ver-footer .sep-after-backend,
  .app-stacked-footer .app-footer-ver .sep-after-backend,
  .ver-footer .sep-after-backend { display: none !important; }

  .legal-footer,
  .legal-footer.login-legal-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(2.55rem + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1195 !important;
    margin: 0 !important;
    padding: 0.28rem 0.55rem !important;
    border-top: 1px solid rgba(56,189,248,0.1) !important;
    border-bottom: 1px solid rgba(56,189,248,0.08) !important;
    background: rgba(6,13,26,0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  .legal-footer .legal-footer-inner,
  .legal-footer.login-legal-footer {
    text-align: center !important;
    font-size: 0.58rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .legal-footer .legal-sep {
    margin: 0 0.2rem !important;
    opacity: 0.55 !important;
  }
  .powered-footer {
    display: block !important;
    margin-bottom: calc(5.15rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  .ver-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1200 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    row-gap: 0.2rem !important;
    column-gap: 0.55rem !important;
    min-height: 2.4rem !important;
    margin: 0 !important;
    border-top: 1px solid rgba(56,189,248,0.12) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 0.3rem 0.55rem !important;
    padding-bottom: calc(0.3rem + env(safe-area-inset-bottom, 0px)) !important;
    font-size: 0.6rem !important;
    line-height: 1.15 !important;
    background: rgba(6,13,26,0.9) !important;
  }
  .legal-footer, .legal-footer.login-legal-footer {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.68rem !important;
    line-height: 1.4 !important;
  }
  .login-links-row { margin-top: 0.75rem !important; }
  .login-link { display: block !important; margin-bottom: 0.25rem !important; }
  .login-wrapper { padding: 1rem 0.75rem 0.75rem !important; }
  .login-wrapper .container { padding: var(--app-card-pad) !important; }

  /* Contenitori full-width senza spreco laterale */
  main .glass-card[style*="max-width"],
  main .glass[style*="max-width"] { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Smartphone piccoli 320–480px: adattamento fluido */
@media (max-width: 480px) {
  main, .main-content, #content {
    padding-left: max(var(--m-md), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--m-md), env(safe-area-inset-right, 0px)) !important;
  }
  .page-title { font-size: clamp(1.05rem, 4.5vw, 1.22rem) !important; }
  .page-header { margin-bottom: var(--m-sm) !important; }
  .stat { padding: 0.6rem var(--app-gap-sm) !important; min-height: clamp(48px, 14vw, 58px); }
  .stat-val { font-size: clamp(1.05rem, 3.8vw, 1.22rem) !important; }
  .match-top {
    grid-template-columns: 1fr min(52px, 18vw) 1fr !important;
    padding: 0.6rem var(--app-card-pad) !important;
  }
  .team-name { font-size: clamp(0.75rem, 2.2vw + 0.4rem, 0.85rem) !important; }
  .pred-row { padding: 0.5rem var(--app-card-pad) !important; }
  .p-btn { font-size: clamp(0.6rem, 1.8vw + 0.35rem, 0.7rem) !important; padding: 0.4rem 0.28rem !important; }
  .home-block .lc-name { font-size: clamp(0.82rem, 2.2vw + 0.4rem, 0.92rem) !important; }
  .club-name { font-size: clamp(1.05rem, 4.5vw, 1.28rem) !important; }
  .invite-code-big { font-size: clamp(1.05rem, 3.8vw, 1.3rem) !important; padding: 0.6rem !important; }
  .podium-step { min-width: min(64px, 22vw) !important; padding: 0.5rem !important; }
  .podium-pts { font-size: clamp(1rem, 2.8vw + 0.5rem, 1.15rem) !important; }
}

/* Schermi molto stretti ≤360px: compattezza massima */
@media (max-width: 360px) {
  html { font-size: clamp(13px, 3.5vw, 15px); }
  main, .main-content, #content {
    padding-left: max(var(--m-sm), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--m-sm), env(safe-area-inset-right, 0px)) !important;
  }
  .page-title { font-size: clamp(1rem, 5vw, 1.15rem) !important; }
  .page-header { margin-bottom: var(--m-sm) !important; }
  .home-btn {
    font-size: clamp(1.22rem, 4.5vw + 0.45rem, 1.65rem) !important;
    padding: clamp(0.95rem, 2.8vw, 1.25rem) clamp(0.85rem, 2.5vw, 1.1rem) !important;
    min-height: clamp(92px, 26vw, 118px) !important;
  }
  .nav-brand { font-size: clamp(0.82rem, 2.5vw + 0.5rem, 0.92rem) !important; }
  .home-buttons { margin-top: var(--m-md) !important; gap: var(--m-sm) !important; }
}

/* Totoamici schedina: su mobile layout a card (niente scroll orizzontale) */
@media (max-width: 768px) {
  .pick-table-wrap {
    overflow-x: visible !important;
    width: 100%;
  }
  .pick-table {
    width: 100% !important;
    min-width: 0 !important;
    display: block;
  }
  .pick-table thead { display: none !important; }
  .pick-table tbody { display: block !important; }
  .pick-table tbody tr {
    display: block !important;
    margin-bottom: var(--app-gap);
    padding: var(--app-card-pad);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(56,189,248,.1);
    border-radius: var(--app-radius-sm);
    box-sizing: border-box;
  }
  .pick-table tbody tr:last-child { margin-bottom: 0; }
  .pick-table tbody td {
    display: block !important;
    padding: 0.35rem 0 !important;
    font-size: 0.82rem !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .pick-table tbody td:not(:first-child) { padding-top: 0.4rem !important; border-top: 1px solid rgba(56,189,248,.06) !important; }
  .pick-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted2);
    margin-bottom: 0.2rem;
  }
  .pick-table .pick-choice-col {
    white-space: normal;
    font-size: 0.8rem !important;
  }
  .pick-options { flex-wrap: wrap !important; gap: var(--app-gap-sm) !important; }
  .pick-btn {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.5rem !important;
    min-height: 38px;
    border-radius: var(--app-radius-sm);
  }
}

/* Club: Report Lega (lb-table) su mobile in card, no scroll orizzontale */
@media (max-width: 768px) {
  .lb-table-wrap {
    overflow-x: visible !important;
    width: 100%;
  }
  .lb-table {
    width: 100% !important;
    min-width: 0 !important;
    display: block;
    table-layout: auto !important;
  }
  .lb-table thead { display: none !important; }
  .lb-table tbody { display: block !important; }
  .lb-table tbody tr {
    display: block !important;
    margin-bottom: var(--app-gap);
    padding: var(--app-card-pad);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(56,189,248,.1);
    border-radius: var(--app-radius-sm);
    box-sizing: border-box;
  }
  .lb-table tbody tr:last-child { margin-bottom: 0; }
  .lb-table tbody td {
    display: block !important;
    padding: 0.35rem 0 !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .lb-table tbody td:not(:first-child) {
    padding-top: 0.4rem !important;
    border-top: 1px solid rgba(56,189,248,.06) !important;
  }
  .lb-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted2);
    margin-bottom: 0.2rem;
  }
  .lb-table td.col-name { font-weight: 700; }
}
@media (max-width: 480px) {
  .pick-table tbody tr { padding: 0.65rem !important; margin-bottom: var(--app-gap-sm); }
  .pick-table tbody td { font-size: 0.78rem !important; }
  .pick-btn { font-size: 0.72rem !important; padding: 0.3rem 0.45rem !important; min-height: 36px; }
  .home-buttons.home-quick-btns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--app-gap-sm) !important;
  }
  .sv-team-grid { grid-template-columns: repeat(4, 1fr) !important; gap: var(--app-gap-sm) !important; }
  .sv-tile-name { font-size: 0.52rem !important; }
  .sv-team-tile { padding: 0.35rem 0.2rem !important; border-radius: var(--app-radius-sm); }
}

/* Pulsanti conferma pronostici — Toto + Survivor (stessa dimensione) */
.btn-confirm-pronostici {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1.25rem;
  box-sizing: border-box;
  border-radius: 10px;
  border: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 1rem;
  line-height: 1.2;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.btn-confirm-pronostici--toto {
  background: linear-gradient(135deg, #16a34a, #4ade80);
  color: #fff;
  box-shadow: 0 4px 18px rgba(74, 222, 128, 0.25);
}
.btn-confirm-pronostici--survivor {
  background: linear-gradient(135deg, var(--az5, #2563b0), var(--sky, #38bdf8));
  color: #fff;
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.3);
}
.btn-confirm-pronostici:hover:not(:disabled) {
  transform: translateY(-2px);
}
.btn-confirm-pronostici--toto:hover:not(:disabled) {
  box-shadow: 0 8px 24px rgba(74, 222, 128, 0.35);
}
.btn-confirm-pronostici--survivor:hover:not(:disabled) {
  box-shadow: 0 8px 28px rgba(56, 189, 248, 0.4);
}
.btn-confirm-pronostici:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Touch: riduci hover su dispositivi touch */
@media (hover: none) {
  .match-card:hover { border-color: var(--border, rgba(56,189,248,0.15)) !important; }
  .p-btn:hover:not(.chosen) {
    background: var(--surface, rgba(10,22,40,0.7)) !important;
    color: var(--muted, rgba(255,255,255,0.45)) !important;
  }
  .league-card:hover { border-color: var(--border) !important; }
}

/* Accessibilità: riduzione movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home-btn, .btn, .club-card, .match-card, .p-btn, .tnav, .tab-btn,
  .league-card:not(.no-click), .room-card, .glass, .glass-card {
    transition-duration: 0.01ms !important;
  }
}