:root{
    /* Sito sempre scuro (nessun tema chiaro): senza questa dichiarazione i
       controlli nativi del browser (menu a tendina dei <select> come "Profili
       di Configurazione", scrollbar, ecc.) restano bianchi di default anche se
       la casella chiusa è già stilizzata scura. */
    color-scheme: dark;
    --bg: #090909;
    --bg-panel: #151515;
    --bg-panel-2: #1a1a1a;
    --blue: #2962FF;
    --red: #FF2D3B;
    --ink: #FFFFFF;
    --muted: #B7B7B7;
    --line: rgba(255,255,255,0.08);
    --radius: 14px;
  }
  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  body{
    background: var(--bg);
    color: var(--ink);
    font-family: 'Nunito Sans', sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
  }
  h1,h2,h3, .display{
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .mono{ font-family: 'JetBrains Mono', monospace; }
  a{ color: inherit; text-decoration:none; }
  .wrap{ max-width: 1160px; margin: 0 auto; padding: 0 28px; }
  @media (max-width: 420px){ .wrap{ padding: 0 18px; } }
  ::selection{ background: var(--blue); color: #0B0B1F; }

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline: 2px solid var(--blue);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  }

  /* ---------- NAV ---------- */
  header{
    position: sticky; top:0; z-index: 50;
    background: rgba(18,21,31,0.82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  header nav{
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 28px;
    max-width: 1160px; margin: 0 auto;
  }
  .logo{
    display:flex; align-items:center; gap:10px;
    font-family:'Baloo 2'; font-weight:700; font-size: 20px;
  }
  .logo-mark{
    width: auto; height:32px; border-radius:0;
    object-fit: contain;
    display:inline-block;
    transition: transform .2s ease;
  }
  .logo:hover .logo-mark{ transform: scale(1.06); }
  .nav-links{ display:flex; gap: 32px; align-items:center; }
  .nav-links a{ color: var(--muted); font-size: 14.5px; font-weight:500; transition: color .2s; }
  .nav-links a:hover{ color: var(--ink); }
  .nav-cta{
    background: var(--blue); color: #fff !important;
    padding: 10px 18px; border-radius: 999px; font-weight:600; font-size:14px;
    display:inline-block; transition: box-shadow .2s ease, transform .15s ease;
    box-shadow: 0 0 18px rgba(41,98,255,0.35);
  }
  .nav-cta:hover{
    box-shadow: 0 0 30px rgba(41,98,255,0.55);
    transform: translateY(-1px);
  }
  @media (max-width: 760px){ .nav-links{ display:none; } }

  /* ---------- MOBILE NAV TOGGLE (JS-driven) ---------- */
  .nav-toggle{
    display:none;
    background: transparent; border: 1px solid var(--line); color: var(--ink);
    width: 38px; height: 38px; border-radius: 8px; font-size: 16px; cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
  }
  .nav-toggle:hover{ border-color: var(--blue); transform: translateY(-2px); }
  @media (max-width: 760px){
    .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; order: 2; }
    .nav-right{ order: 3; }
    .nav-links{
      display: none;
      position: absolute; top: 100%; left: 0; right: 0;
      background: var(--bg-panel);
      border-bottom: 1px solid var(--line);
      flex-direction: column; align-items: flex-start;
      padding: 18px 28px; gap: 18px;
    }
    .nav-links.open{ display: flex; }
    header nav{ position: relative; }
  }

  /* ---------- HERO ---------- */
  .hero{
    position: relative;
    padding: 96px 0 70px;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
  }
  .hero-grid{
    display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items:center;
  }
  @media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono'; font-size: 12.5px; color: var(--blue);
    border: 1px solid rgba(46,125,255,0.35); background: rgba(46,125,255,0.06);
    padding: 6px 12px; border-radius: 999px; margin-bottom: 26px;
  }
  .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--blue); animation: pulse 1.6s infinite; }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }

  .hero h1{
    font-size: clamp(38px, 5.6vw, 62px);
    line-height: 1.04;
  }
  .hero h1 .hl-lime{ color: var(--blue); }
  .hero h1 .hl-mag{ color: var(--red); }

  .hero p.lead{
    margin-top: 22px; font-size: 17px; color: var(--muted); max-width: 480px;
  }
  .hero-ctas{ display:flex; gap:14px; margin-top: 34px; flex-wrap: wrap; }
  .btn{
    font-weight: 600; font-size: 14.5px; padding: 14px 24px; border-radius: 10px;
    border: none; cursor: pointer; display:inline-flex; align-items:center; gap:10px;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{ transform: translateY(-2px); }
  .btn-primary{ background: var(--blue); color: #fff; }
  .btn-primary:hover{ box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 24px rgba(41,98,255,0.4); }
  .btn-outline{ background: transparent; color: var(--ink); border: 1px solid var(--line); }
  .btn-outline:hover{ border-color: var(--red); box-shadow: 0 0 22px rgba(255,59,59,0.3); }

  .hero-meta{
    margin-top: 30px; display:flex; gap: 26px; color: var(--muted); font-size: 13px;
  }
  .hero-meta strong{ color: var(--ink); font-family:'Baloo 2'; }

  /* ---------- SIGNATURE: PARKOUR TRACK ---------- */
  .track-card{
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px;
    position: relative;
  }
  .track-head{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom: 16px; padding: 0 6px;
  }
  .track-title{ font-size: 13px; color: var(--muted); font-family:'JetBrains Mono'; }
  .track-live{
    display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono'; font-size: 12px; color: var(--red);
  }
  .live-dot{ width:7px; height:7px; border-radius:50%; background: var(--red); animation: pulse 1.2s infinite; }

  .track-body{
    position: relative;
    height: 420px;
    border-radius: 14px;
    background:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 42px),
      linear-gradient(180deg, #16162F 0%, #10101F 100%);
    overflow: hidden;
    border: 1px solid var(--line);
  }
  .rail{
    position:absolute; left: 50%; top:0; bottom:0; width: 2px;
    background: repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 16px);
    transform: translateX(-50%);
  }
  .checkpoint{
    position:absolute; left: 50%; transform: translate(-50%,-50%);
    width: 34px; height:34px; border-radius: 8px;
    background: var(--bg-panel-2); border: 1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono'; font-size: 11px; color: var(--muted);
    transition: transform .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
    cursor: default;
  }
  .checkpoint:hover{
    transform: translate(-50%,-50%) scale(1.18) rotate(-4deg);
    border-color: var(--blue);
    color: var(--ink);
    box-shadow: 0 0 0 4px rgba(46,125,255,0.15);
  }
  .cp1{ top: 370px; } .cp2{ top: 260px; } .cp3{ top: 150px; } .cp4{ top: 40px; }

  .player{
    position:absolute; left: 50%; top: 370px;
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--ink);
    transform: translate(-50%,-50%);
    box-shadow: 0 0 0 4px rgba(237,235,250,0.08);
    animation: climb 6s ease-in-out infinite;
  }
  @keyframes climb{
    0%{ top: 370px; }
    30%{ top: 300px; }
    45%{ top: 340px; }
    70%{ top: 190px; }
    85%{ top: 210px; }
    100%{ top: 60px; }
  }

  .bubble{
    position:absolute; font-family:'JetBrains Mono'; font-size: 11px; font-weight:600;
    padding: 4px 9px; border-radius: 999px; white-space: nowrap;
    opacity: 0; animation: rise 6s ease-in infinite;
  }
  .bubble.boost{ background: rgba(46,125,255,0.14); color: var(--blue); border: 1px solid rgba(46,125,255,0.4); left: 20%; }
  .bubble.penalty{ background: rgba(255,59,59,0.14); color: var(--red); border: 1px solid rgba(255,59,59,0.4); left: 62%; }
  .b1{ animation-delay: 0.3s; }
  .b2{ animation-delay: 2.1s; left: 68%; }
  .b3{ animation-delay: 3.6s; }
  .b4{ animation-delay: 4.8s; left: 24%; }
  @keyframes rise{
    0%{ bottom: -20px; opacity: 0; }
    10%{ opacity: 1; }
    75%{ opacity: 1; }
    100%{ bottom: 340px; opacity: 0; transform: translateY(-10px); }
  }

  .track-legend{
    display:flex; gap: 20px; margin-top: 14px; padding: 0 6px; font-size: 12.5px; color: var(--muted);
  }
  .legend-item{ display:flex; align-items:center; gap:7px; cursor: default; transition: color .2s ease; }
  .legend-item:hover{ color: var(--ink); }
  .legend-swatch{ width:10px; height:10px; border-radius:3px; transition: transform .25s ease, border-radius .25s ease; }
  .legend-item:hover .legend-swatch{ transform: scale(1.5); border-radius: 50%; }

  /* ---------- SECTION SHELL ---------- */
  section{ padding: 88px 0; border-bottom: 1px solid var(--line); }
  .section-tag{
    font-family:'JetBrains Mono'; font-size: 12.5px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px;
  }
  .section-head{ max-width: 620px; margin-bottom: 56px; }
  .section-head h2{ font-size: clamp(28px, 3.4vw, 40px); }
  .section-head p{ margin-top: 14px; color: var(--muted); font-size: 16px; }

  /* ---------- COME FUNZIONA ---------- */
  .steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  @media (max-width: 860px){ .steps{ grid-template-columns: 1fr; } }
  .step{
    background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 28px 24px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .step:hover{
    transform: translateY(-6px);
    border-color: var(--blue);
    box-shadow: 0 14px 30px rgba(46,125,255,0.14);
  }
  .step-num{ font-family:'JetBrains Mono'; color: var(--red); font-size: 13px; margin-bottom: 18px; transition: transform .25s ease; }
  .step:hover .step-num{ transform: translateX(4px); }
  .step h3{ font-size: 19px; margin-bottom: 10px; }
  .step p{ color: var(--muted); font-size: 14.5px; }
  .step-icons{ display:flex; gap:10px; margin-top:18px; }
  .pill{
    font-family:'JetBrains Mono'; font-size:11.5px; padding:5px 10px; border-radius:999px;
    border:1px solid var(--line); color: var(--muted);
    transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
    cursor: default;
  }
  .pill:hover{
    transform: translateY(-3px);
    border-color: var(--red);
    color: var(--ink);
    background: rgba(255,59,59,0.10);
  }

  /* ---------- GIOCHI ---------- */
  .games{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  @media (max-width: 900px){ .games{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px){ .games{ grid-template-columns: 1fr; } }
  .game-card{
    border-radius: var(--radius); border: 1px solid var(--line); overflow:hidden;
    background: var(--bg-panel);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .game-card:hover{
    border-color: rgba(46,125,255,0.45);
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(6,11,24,0.5);
  }
  .game-thumb{
    height: 140px; position:relative; overflow:hidden;
    background: linear-gradient(135deg, var(--g1), var(--g2));
  }
  .game-thumb::after{
    content:''; position:absolute; inset:0;
    background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0 10px, transparent 10px 20px);
    transition: transform .5s ease;
  }
  .game-card:hover .game-thumb::after{ transform: translate(10px,-10px); }
  .game-card:hover .game-thumb{ filter: saturate(1.3) brightness(1.08); }
  .game-body{ padding: 18px 20px 22px; }
  .game-diff{ font-family:'JetBrains Mono'; font-size:11px; color: var(--muted); margin-bottom:8px; }
  .game-body h3{ font-size: 17px; margin-bottom: 8px; }
  .game-body p{ font-size: 13.5px; color: var(--muted); }

  .games-platform-title{
    font-family:'JetBrains Mono'; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted); margin: 40px 0 18px; padding-top: 28px; border-top: 1px solid var(--line);
  }
  .games-platform-title:first-of-type{ margin-top: 0; padding-top: 0; border-top: none; }

  /* Tile piattaforma (Minecraft/Roblox) nel tab Giochi: solo titolo+immagine,
     apre l'elenco dei giochi di quella piattaforma. */
  .game-platforms{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 560px; }
  @media (max-width: 600px){ .game-platforms{ grid-template-columns: 1fr; } }
  .game-platform-tile{
    display:block; width:100%; padding:0; border-radius: var(--radius); border: 1px solid var(--line);
    overflow:hidden; background: var(--bg-panel); cursor:pointer; text-align:left; font: inherit; color: inherit;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .game-platform-tile:hover{
    border-color: rgba(46,125,255,0.45); transform: translateY(-6px); box-shadow: 0 16px 34px rgba(6,11,24,0.5);
  }
  .game-platform-tile .game-thumb{ height:160px; }
  .game-platform-tile h3{ margin:0; padding: 16px 20px 20px; font-size: 18px; }

  /* Immagini piattaforma (riusate sia in dashboard che in index.html). */
  .game-thumb-minecraft, .game-thumb-roblox{ background-size: cover; background-position: center; }
  .game-thumb-minecraft{ background-image: url('../img/minecraft.png'); }
  .game-thumb-roblox{ background-image: url('../img/roblox.png'); }

  /* Sezione "in arrivo": badge sopra la thumb + tile non cliccabile per chi non è admin. */
  .badge-coming-soon{
    position:absolute; top:10px; right:10px; z-index:1;
    background: rgba(6,11,24,0.75); color:#fff; border-color: rgba(255,255,255,0.25);
  }
  .game-platform-tile.is-locked{ cursor:not-allowed; }
  .game-platform-tile.is-locked:hover{ transform:none; box-shadow:none; border-color: var(--line); }
  .game-platform-tile.is-locked .game-thumb{ filter: grayscale(0.6) brightness(0.6); }

  #giochi .game-platforms{ max-width: 760px; margin: 0 auto; }

  /* ---------- PIATTAFORMA (pagine pubbliche minecraft.html / roblox.html: la
     libreria giochi di una singola piattaforma, aperta dai due blocchi
     "Scopri i minigiochi" / "Vertical Parkour" in home) ---------- */
  .platform-hero{ padding-bottom: 40px; }
  .platform-hero-back{
    display:inline-flex; align-items:center; gap:6px; color: var(--muted); font-size:13.5px;
    margin-bottom: 22px; transition: color .2s ease;
  }
  .platform-hero-back:hover{ color: var(--ink); }
  .platform-games{ display:flex; flex-direction:column; gap: 18px; max-width: 720px; }
  .platform-game-card{
    border-radius: var(--radius); border: 1px solid var(--line); overflow:hidden;
    background: var(--bg-panel);
    transition: border-color .25s ease, box-shadow .25s ease;
  }
  .platform-game-card:hover{ border-color: rgba(46,125,255,0.45); }
  .platform-game-card[open]{ border-color: rgba(46,125,255,0.5); box-shadow: 0 16px 34px rgba(6,11,24,0.5); background: var(--bg-panel-2); }
  .platform-game-summary{
    display:flex; align-items:center; gap:20px; padding: 18px 22px; cursor:pointer;
  }
  .platform-game-summary .game-thumb{ width:130px; height:92px; flex-shrink:0; border-radius:10px; }
  .platform-game-summary-body{ flex:1; min-width:0; }
  .platform-game-summary-body h3{ font-size:18px; margin-bottom:4px; }
  .platform-game-summary-body p{ color: var(--muted); font-size:13.5px; }
  .platform-game-toggle{
    display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono'; font-size:12.5px;
    color: var(--blue); white-space:nowrap; flex-shrink:0;
  }
  .platform-game-toggle .icon{ transition: transform .2s ease; display:inline-block; }
  .platform-game-card[open] .platform-game-toggle .icon{ transform: rotate(45deg); color: var(--red); }
  .platform-game-detail{ padding: 4px 22px 28px; border-top: 1px solid var(--line); margin-top: 4px; }
  .platform-game-detail h4{ font-family:'Baloo 2'; font-size:15px; margin: 20px 0 8px; }
  .platform-game-detail p{ color: var(--muted); font-size:14.5px; line-height:1.7; max-width: 620px; }
  .platform-game-detail p + p{ margin-top:10px; }
  .platform-game-detail ul{ color: var(--muted); font-size:14.5px; line-height:1.7; margin: 10px 0 4px; padding-left:20px; max-width:620px; }
  .platform-game-detail ul li{ margin: 4px 0; }
  .platform-game-detail .btn{ margin-top:20px; }
  @media (max-width:560px){
    .platform-game-summary{ flex-direction:column; align-items:flex-start; }
    .platform-game-summary .game-thumb{ width:100%; height:150px; }
    .platform-game-toggle{ align-self:flex-start; }
  }

  .dash-back-btn{ margin-bottom: 18px; }

  /* Card TntCube dentro "Minecraft": l'intera card è cliccabile e porta alla
     pagina di configurazione (non solo il pulsante "Gioca ora"). */
  .game-card[data-open-config]:not(.locked){ cursor:pointer; }

  /* ---------- PREZZO ---------- */
  .price-wrap{ display:flex; justify-content:center; }
  .price-card{
    max-width: 460px; width:100%;
    background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
    border: 1px solid rgba(46,125,255,0.3);
    border-radius: 20px; padding: 40px 36px;
    position: relative;
  }
  .price-card::before{
    content: 'UN SOLO PIANO'; position:absolute; top:-12px; left:36px;
    font-family:'JetBrains Mono'; font-size: 11px; letter-spacing:.08em;
    background: var(--blue); color: #0B0B1F; padding: 4px 10px; border-radius: 999px; font-weight:600;
  }
  .price-num{ display:flex; align-items:baseline; gap:8px; margin: 18px 0 6px; }
  .price-num .amount{ font-family:'Baloo 2'; font-size: 56px; font-weight:700; }
  .price-num .period{ color: var(--muted); font-size: 15px; }
  .price-card > p{ color: var(--muted); font-size: 14.5px; margin-bottom: 26px; }
  .price-feats{ list-style:none; display:flex; flex-direction:column; gap: 13px; margin-bottom: 30px; }
  .price-feats li{
    display:flex; gap: 10px; font-size: 14.5px; align-items:flex-start; cursor: default;
    transition: transform .18s ease; transform-origin: left center;
  }
  .price-feats li:hover{ transform: scale(1.035); }
  .check{ color: var(--blue); font-family:'JetBrains Mono'; flex-shrink:0; display:inline-block; transition: color .2s ease; }
  .price-feats li:hover .check{ color: var(--red); }
  .price-card .btn{ width: 100%; justify-content:center; background: var(--blue); color: #0B0B1F; }
  .price-card .btn:hover{ box-shadow: 0 0 26px rgba(46,125,255,0.4); }
  .price-fine{ margin-top: 16px; font-size: 12px; color: var(--muted); text-align:center; }

  /* Come .price-card ma senza il badge "UN SOLO PIANO" (::before): per liste di
     caratteristiche fuori dal contesto abbonamento, es. la pagina di un gioco. */
  .feature-card{
    max-width: 460px; width:100%;
    background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
    border: 1px solid var(--line);
    border-radius: 20px; padding: 40px 36px;
  }
  .feature-card .btn{ width: 100%; justify-content:center; }

  /* ---------- FAQ ---------- */
  .faq-list{ max-width: 720px; }
  .faq-item{ border-bottom: 1px solid var(--line); padding: 22px 0; }
  .faq-q{
    display:flex; justify-content:space-between; align-items:center; cursor:pointer;
    font-family:'Baloo 2'; font-size: 16.5px; font-weight:600;
  }
  .faq-q .icon{ color: var(--muted); font-family:'JetBrains Mono'; transition: transform .2s; }
  .faq-item[open] .faq-q .icon{ transform: rotate(45deg); color: var(--red); }
  .faq-a{ margin-top: 12px; color: var(--muted); font-size: 14.5px; max-width: 600px; }
  summary::-webkit-details-marker{ display:none; }
  summary{ list-style:none; }

  /* ---------- FOOTER ---------- */
  footer{ padding: 48px 0 40px; }
  .footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap: wrap; gap: 20px; }
  .footer-note{ color: var(--muted); font-size: 13px; max-width: 460px; }
  .footer-copy{ color: var(--muted); font-size: 12px; max-width: 460px; margin-top: 6px; opacity: .7; }
  .footer-links{ display:flex; gap: 24px; }
  .footer-links a{ color: var(--muted); font-size: 13.5px; }
  .footer-links a:hover{ color: var(--ink); }

  /* Footer a colonne (solo index.html): il footer-row semplice sopra resta
     invariato per le altre pagine (subscribe/login/ecc.). */
  .footer-cols{ display:grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px; align-items:start; }
  @media (max-width: 760px){ .footer-cols{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px){ .footer-cols{ grid-template-columns: 1fr; } }
  .footer-col-title{
    font-family:'JetBrains Mono'; font-size: 11.5px; text-transform:uppercase;
    letter-spacing:.08em; color: var(--muted); margin-bottom: 16px;
  }
  .footer-col-links{ display:flex; flex-direction:column; gap: 12px; }
  .footer-col-links a{ color: var(--muted); font-size: 13.5px; }
  .footer-col-links a:hover{ color: var(--ink); }
  .footer-bottom{
    margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 12px;
  }
  .footer-bottom .footer-copy{ margin-top:0; max-width:none; }
  .footer-social{ display:flex; gap: 16px; }
  .footer-social a{ color: var(--muted); font-size: 13px; }
  .footer-social a:hover{ color: var(--ink); }

  /* ---------- IN CIFRE ---------- */
  .stats-section{ padding: 56px 0; }
  .stats-row{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  @media (max-width: 760px){ .stats-row{ grid-template-columns: repeat(2, 1fr); gap: 32px; } }
  .stat-block{ text-align:center; }
  .stat-block .stat-num{ font-family:'Baloo 2'; font-size: clamp(30px, 3.6vw, 44px); font-weight:700; }
  .stat-block .stat-label{
    margin-top:8px; color: var(--muted); font-size: 12.5px; font-family:'JetBrains Mono';
    text-transform:uppercase; letter-spacing:.05em;
  }

  /* ---------- FUNZIONALITÀ ---------- */
  .features-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  @media (max-width: 900px){ .features-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px){ .features-grid{ grid-template-columns: 1fr; } }
  .feature-tile{
    background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 24px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .feature-tile:hover{
    transform: translateY(-6px); border-color: var(--blue);
    box-shadow: 0 14px 30px rgba(46,125,255,0.14);
  }
  .feature-icon{
    font-size:19px; margin-bottom:16px; display:inline-flex; width:44px; height:44px;
    align-items:center; justify-content:center; border-radius:12px; background: rgba(46,125,255,0.10);
  }
  .feature-tile h3{ font-size:17px; margin-bottom:8px; }
  .feature-tile p{ color: var(--muted); font-size:13.5px; }

  /* ---------- HOME: layout dedicato (solo index.html, via body.page-home) ----------
     Redesign premium (SaaS-style, ispirazione Apple/Stripe/Linear): palette e
     token propri, ridefiniti qui sopra le variabili globali così ogni regola
     esistente (.btn, .hero-ctas, header, nav, ecc.) li eredita in automatico
     SOLO dentro la home, senza toccare le altre pagine del sito. */
  body.page-home{
    --bg: #090909;
    --bg-panel: #151515;
    --bg-panel-2: #1a1a1a;
    --blue: #2962FF;
    --red: #FF2D3B;
    --ink: #FFFFFF;
    --muted: #B7B7B7;
    --line: rgba(255,255,255,0.08);
    background: var(--bg);
  }
  body.page-home header{ background: rgba(9,9,9,0.78); }
  body.page-home .nav-cta{ background: var(--blue); color:#fff !important; }
  body.page-home .btn-outline:hover{ border-color: var(--red); }
  body.page-home .check{ color: var(--ink); }
  body.page-home section{ border-bottom: none; }

  /* Bottoni hero: rosso pieno (richiamo attenzione) + blu pieno (azione primaria). */
  body.page-home .hero-ctas .btn-outline{
    background: var(--red); color:#fff; border-color: var(--red);
  }
  body.page-home .hero-ctas .btn-outline:hover{ background:#e6212d; border-color:#e6212d; }
  body.page-home .hero-ctas .btn-primary{ background: var(--blue); color:#fff; }
  body.page-home .hero-ctas .btn-primary:hover{ box-shadow: 0 10px 26px rgba(41,98,255,0.35); }
  body.page-home .final-cta-panel .hero-ctas .btn-outline{ background:transparent; color:var(--ink); border-color: var(--line); }
  body.page-home .final-cta-panel .hero-ctas .btn-outline:hover{ border-color: var(--red); }

  /* Hero: testo a sinistra, tablet prodotto a destra. */
  body.page-home .hero{ padding: 76px 0 0; overflow:hidden; }
  body.page-home .hero .wrap{ position:relative; z-index:1; }
  body.page-home .hero h1 .hl-lime{ color: var(--blue); }
  body.page-home .hero h1 .hl-mag{ color: var(--red); }

  /* Particelle decorative nella parte alta dell'hero (solo CSS, nessun JS). */
  body.page-home .hero-particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  body.page-home .hero-particles::before,
  body.page-home .hero-particles::after{
    content:''; position:absolute; top:0; left:50%; width:2px; height:2px; border-radius:50%;
    background:transparent; margin-left:-580px;
  }
  body.page-home .hero-particles::before{
    box-shadow:
      405.4px 13.4px 0 rgba(41,98,255,0.6),
      707.4px 380.9px 0 rgba(255,45,59,0.55),
      4.8px 127.1px 0 rgba(255,255,255,0.4),
      1126px 130.2px 0 rgba(41,98,255,0.6),
      534.4px 270.4px 0 rgba(255,45,59,0.55),
      637.5px 108.3px 0 rgba(255,255,255,0.4),
      42.7px 423.5px 0 rgba(41,98,255,0.6),
      1102.8px 105.1px 0 rgba(255,45,59,0.55),
      686.7px 388.1px 0 rgba(255,255,255,0.4),
      1006.9px 183.2px 0 rgba(41,98,255,0.6),
      442.3px 47.8px 0 rgba(255,45,59,0.55),
      39.6px 155px 0 rgba(255,255,255,0.4),
      1127px 318.8px 0 rgba(41,98,255,0.6),
      520.7px 184px 0 rgba(255,45,59,0.55),
      824.4px 8px 0 rgba(255,255,255,0.4),
      452.7px 16.4px 0 rgba(41,98,255,0.6),
      783px 453.8px 0 rgba(255,45,59,0.55),
      287.5px 328.9px 0 rgba(255,255,255,0.4),
      986.6px 284.6px 0 rgba(41,98,255,0.6),
      880.3px 453.4px 0 rgba(255,45,59,0.55),
      130px 125.4px 0 rgba(255,255,255,0.4),
      316.8px 344.2px 0 rgba(41,98,255,0.6),
      403.9px 467.3px 0 rgba(255,45,59,0.55),
      656.1px 121.9px 0 rgba(255,255,255,0.4),
      774px 1.7px 0 rgba(41,98,255,0.6),
      549.5px 247.8px 0 rgba(255,45,59,0.55),
      249.1px 466.9px 0 rgba(255,255,255,0.4),
      764.6px 151.1px 0 rgba(41,98,255,0.6),
      679.3px 124px 0 rgba(255,45,59,0.55),
      615.2px 365.7px 0 rgba(255,255,255,0.4),
      1031.3px 184.7px 0 rgba(41,98,255,0.6),
      220.4px 34.8px 0 rgba(255,45,59,0.55),
      94.6px 449px 0 rgba(255,255,255,0.4),
      352.3px 46.7px 0 rgba(41,98,255,0.6),
      176px 393px 0 rgba(255,45,59,0.55),
      177.8px 194.1px 0 rgba(255,255,255,0.4),
      933.9px 53.6px 0 rgba(41,98,255,0.6),
      520px 110.1px 0 rgba(255,45,59,0.55);
    animation: particle-twinkle 5s ease-in-out infinite, particle-drift 22s linear infinite;
  }
  body.page-home .hero-particles::after{
    width:3px; height:3px;
    box-shadow:
      398.5px 471.2px 0 rgba(41,98,255,0.6),
      6px 430.9px 0 rgba(255,45,59,0.55),
      576px 113.3px 0 rgba(255,255,255,0.4),
      739.3px 293.9px 0 rgba(41,98,255,0.6),
      267.4px 458.8px 0 rgba(255,45,59,0.55),
      765.9px 96.3px 0 rgba(255,255,255,0.4),
      270px 94.8px 0 rgba(41,98,255,0.6),
      132.9px 195.6px 0 rgba(255,45,59,0.55),
      131.4px 121.6px 0 rgba(255,255,255,0.4),
      351.3px 359.5px 0 rgba(41,98,255,0.6),
      771.3px 119.1px 0 rgba(255,45,59,0.55),
      336.1px 161.7px 0 rgba(255,255,255,0.4),
      68.5px 369.7px 0 rgba(41,98,255,0.6),
      475.8px 86.3px 0 rgba(255,45,59,0.55),
      393.9px 347.4px 0 rgba(255,255,255,0.4),
      44.1px 310.7px 0 rgba(41,98,255,0.6),
      383.8px 7.2px 0 rgba(255,45,59,0.55),
      43.2px 375.9px 0 rgba(255,255,255,0.4),
      1081.8px 227.6px 0 rgba(41,98,255,0.6),
      272.7px 422.4px 0 rgba(255,45,59,0.55),
      192.5px 217.2px 0 rgba(255,255,255,0.4),
      675.4px 85.1px 0 rgba(41,98,255,0.6),
      323px 229.5px 0 rgba(255,45,59,0.55),
      834.6px 199.9px 0 rgba(255,255,255,0.4);
    animation: particle-twinkle 7s ease-in-out infinite reverse, particle-drift 30s linear infinite reverse;
  }
  @keyframes particle-twinkle{ 0%,100%{ opacity:.9; } 50%{ opacity:.3; } }
  @keyframes particle-drift{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } 100%{ transform:translateY(0); } }
  @media (max-width:700px){ body.page-home .hero-particles{ display:none; } }

  body.page-home .hero-split{ display:grid; grid-template-columns: 0.86fr 1.14fr; gap: 56px; align-items:center; perspective: 1600px; padding-bottom: 70px; }
  @media (max-width:900px){ body.page-home .hero-split{ grid-template-columns:1fr; gap:56px; padding-bottom:48px; } }

  /* ---- Tablet mockup (protagonista dell'hero) ---- */
  body.page-home .hero-window-wrap{
    position:relative;
    animation: tablet-float 6s ease-in-out infinite;
  }
  @keyframes tablet-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } }
  body.page-home .hero-window-wrap::before,
  body.page-home .hero-window-wrap::after{
    content:''; position:absolute; z-index:0; border-radius:50%; pointer-events:none;
  }
  body.page-home .hero-window-wrap::before{
    width:320px; height:320px; top:-70px; right:-40px;
    background: radial-gradient(circle, rgba(255,45,59,0.32), transparent 70%);
    filter: blur(46px);
  }
  body.page-home .hero-window-wrap::after{
    width:360px; height:360px; bottom:-90px; left:-50px;
    background: radial-gradient(circle, rgba(41,98,255,0.32), transparent 70%);
    filter: blur(52px);
  }
  body.page-home .hero-window{
    position:relative; z-index:1;
    padding: 16px 16px 22px;
    border-radius: 32px;
    background: linear-gradient(155deg, #1c1c1c, #0a0a0a);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 60px 110px -30px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(255,255,255,0.04);
    transform: perspective(1600px) rotateY(-9deg) rotateX(3deg) rotateZ(1deg);
    transition: transform .2s ease-out;
    will-change: transform;
  }
  @media (max-width:900px){
    body.page-home .hero-window{ transform: perspective(1600px) rotateY(-4deg) rotateX(2deg); }
    body.page-home .hero-window-wrap{ animation: none; }
  }
  body.page-home .hero-window-notch{
    width:7px; height:7px; border-radius:50%;
    background: radial-gradient(circle at 35% 35%, #444, #111 75%);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.05);
    margin: 4px auto 12px;
  }
  body.page-home .hero-window-screen{
    position:relative; overflow:hidden; border-radius:18px;
    background: var(--bg-panel);
    border: 1px solid rgba(255,255,255,0.06);
  }
  body.page-home .hero-window-screen::after{
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background: linear-gradient(120deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 26%, transparent 48%);
  }
  body.page-home .hero-window-bar{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1px solid var(--line);
  }
  body.page-home .hero-window-title{ font-size:12px; color: var(--muted); font-family:'JetBrains Mono'; }
  body.page-home .hero-window-live{
    display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono';
    font-size:11px; font-weight:700; letter-spacing:.04em; color: var(--red);
  }
  body.page-home .hero-window-live .live-dot{ background: var(--red); }
  body.page-home .hero-window-body{ padding:8px; }
  body.page-home .gift-row{
    display:grid; grid-template-columns: 26px 1fr auto auto; align-items:center; gap:12px;
    padding: 13px 16px; border-radius: 10px; font-size: 14.5px;
    transition: background .2s ease;
  }
  body.page-home .gift-row:hover{ background: rgba(255,255,255,0.04); }
  body.page-home .gift-emoji{ font-size:16px; }
  body.page-home .gift-name{ color: var(--ink); text-align:left; }
  body.page-home .gift-arrow{ color: var(--blue); font-size:13px; }
  body.page-home .gift-action{ font-weight:600; text-align:right; color: var(--muted); }
  body.page-home .gift-row.highlight{ background: rgba(41,98,255,0.08); }
  body.page-home .gift-row.highlight .gift-action{ color: var(--ink); }
  @media (max-width:480px){
    body.page-home .gift-row{ grid-template-columns: 22px 1fr auto; font-size:13px; }
    body.page-home .gift-arrow{ display:none; }
  }

  /* Statistiche a card con icona, sotto l'hero (numeri reali). */
  body.page-home .stat-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin: 0 0 70px; }
  @media (max-width:640px){ body.page-home .stat-cards{ grid-template-columns:1fr; } }
  body.page-home .stat-card{ background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; text-align:center; transition: transform .2s ease, border-color .2s ease; }
  body.page-home .stat-card:hover{ transform: translateY(-3px) scale(1.02); border-color: rgba(41,98,255,0.35); }
  body.page-home .stat-card-icon{
    font-size:18px; width:40px; height:40px; border-radius:11px; display:inline-flex;
    align-items:center; justify-content:center; margin-bottom:10px; background: rgba(41,98,255,0.14);
  }
  body.page-home .stat-card:nth-child(2) .stat-card-icon{ background: rgba(255,45,59,0.14); }
  body.page-home .stat-card:nth-child(3) .stat-card-icon{ background: rgba(255,255,255,0.10); }
  body.page-home .stat-card-num{ font-family:'Baloo 2'; font-size: 24px; font-weight:700; }
  body.page-home .stat-card-label{ margin-top:6px; color: var(--muted); font-size:11.5px; }

  /* ---- 3 card di valore (subito dopo l'hero) ---- */
  body.page-home .value-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  @media (max-width:860px){ body.page-home .value-cards{ grid-template-columns:1fr; } }
  body.page-home .value-card{
    background: var(--bg-panel); border:1px solid var(--line); border-radius:20px;
    padding:38px 30px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  body.page-home .value-card:hover{
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(41,98,255,0.4);
    box-shadow: 0 20px 44px rgba(0,0,0,0.45);
  }
  body.page-home .value-card-icon{
    font-size:26px; width:56px; height:56px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(41,98,255,0.12); margin-bottom:24px;
  }
  body.page-home .value-card:nth-child(2) .value-card-icon{ background: rgba(255,45,59,0.12); }
  body.page-home .value-card:nth-child(3) .value-card-icon{ background: rgba(255,255,255,0.10); }
  body.page-home .value-card h3{ font-size:20px; margin-bottom:10px; }
  body.page-home .value-card p{ color: var(--muted); font-size:14.5px; }

  /* Giochi: griglia a poster con copertina reale, come un catalogo. */
  body.page-home .games-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 680px; margin: 0 auto; }
  @media (max-width:600px){ body.page-home .games-grid{ grid-template-columns: 1fr; } }
  body.page-home .game-poster{
    display:block; border-radius: 20px; overflow:hidden; border:1px solid var(--line);
    background: var(--bg-panel); text-decoration:none; color:inherit;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  body.page-home .game-poster:not(.is-locked):hover{
    transform: translateY(-6px) scale(1.02); border-color: rgba(41,98,255,0.5); box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  }
  body.page-home .game-poster.is-locked .game-poster-media{ filter: grayscale(0.55) brightness(0.6); }
  body.page-home .game-poster-media{ height:180px; position:relative; background-size:cover; background-position:center; overflow:hidden; }
  body.page-home .game-poster-media{ transition: transform .4s ease; }
  body.page-home .game-poster:not(.is-locked):hover .game-poster-media{ transform: scale(1.08); }
  body.page-home .game-poster-badge{
    position:absolute; top:12px; left:12px; background: rgba(9,9,9,0.78); color:#fff;
    font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:999px;
  }
  body.page-home .game-poster-media .badge-coming-soon{ top:12px; right:12px; left:auto; }
  body.page-home .game-poster-body{ padding: 20px 22px 24px; }
  body.page-home .game-poster-body h3{ font-size:17px; margin-bottom:6px; }
  body.page-home .game-poster-body p{ color: var(--muted); font-size:13.5px; }
  body.page-home .game-poster-cta{
    display:inline-flex; align-items:center; gap:6px; margin-top:16px;
    font-size:13px; font-weight:700; color: var(--blue); transition: gap .2s ease, color .2s ease;
  }
  body.page-home .game-poster:not(.is-locked):hover .game-poster-cta{ color: var(--red); gap:10px; }
  body.page-home .games-note{ margin-top:24px; color: var(--muted); font-size:13.5px; text-align:center; }

  /* Funzionalità: elenco icona + testo su due colonne, non più card/griglia. */
  body.page-home .feat-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 30px 44px; }
  @media (max-width:700px){ body.page-home .feat-list{ grid-template-columns: 1fr; } }
  body.page-home .feat-row{
    display:flex; gap:16px; align-items:flex-start;
    transition: transform .18s ease; transform-origin: left center;
  }
  body.page-home .feat-row:hover{ transform: scale(1.03); }
  body.page-home .feat-row-icon{
    width:44px; height:44px; border-radius:12px; flex-shrink:0;
    font-family:'JetBrains Mono'; font-size:19px; font-weight:700; color: var(--blue);
    display:flex; align-items:center; justify-content:center; background: rgba(41,98,255,0.14);
  }
  body.page-home .feat-row:nth-child(3n+2) .feat-row-icon{ background: rgba(255,45,59,0.14); color: var(--red); }
  body.page-home .feat-row:nth-child(3n+3) .feat-row-icon{ background: rgba(255,255,255,0.10); color: var(--ink); }
  body.page-home .feat-row h3{ font-size:16.5px; margin-bottom:6px; }
  body.page-home .feat-row p{ color: var(--muted); font-size:14px; }

  /* Prezzo: card unica premium (il prodotto vende un solo piano). */
  body.page-home .price-card{
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
    transition: transform .3s ease, box-shadow .3s ease;
  }
  body.page-home .price-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 40px 90px -16px rgba(41,98,255,0.25);
  }

  /* FAQ: accordion con apertura/chiusura animata (CSS puro, la logica di
     chiusura reciproca resta quella già gestita da js/script.js su <details>). */
  body.page-home .faq-item{
    border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin-bottom: 12px;
    transition: border-color .2s ease, background .2s ease;
  }
  body.page-home .faq-item:hover{ border-color: rgba(41,98,255,0.35); }
  body.page-home .faq-item:last-child{ margin-bottom: 0; }
  body.page-home .faq-item[open]{ background: var(--bg-panel-2); }
  body.page-home .faq-a{
    display:block; max-height:0; opacity:0; overflow:hidden; margin-top:0;
    transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease;
  }
  body.page-home .faq-item[open] .faq-a{ max-height:320px; opacity:1; margin-top:12px; }

  /* CTA finale prima del footer. */
  body.page-home .final-cta{ padding: 24px 0 88px; border-bottom:none; }
  body.page-home .final-cta-panel{
    border-radius: 28px; padding: 64px 40px; text-align:center; border:1px solid var(--line);
    background:
      radial-gradient(circle at 26% 20%, rgba(41,98,255,0.16), transparent 55%),
      radial-gradient(circle at 76% 82%, rgba(255,45,59,0.16), transparent 55%),
      var(--bg-panel);
  }
  body.page-home .final-cta-panel h2{ font-size: clamp(28px, 4vw, 42px); max-width:640px; margin:0 auto; }
  body.page-home .final-cta-panel p{ margin: 18px auto 0; max-width:480px; color: var(--muted); font-size:16px; }
  body.page-home .final-cta-panel .hero-ctas{ justify-content:center; margin-top:30px; }

  /* Footer: stessa struttura, rifinita per il nuovo tema scuro/premium. */
  body.page-home footer{ position:relative; padding-top:64px; }
  body.page-home footer::before{
    content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:min(1160px,90%); height:1px;
    background: linear-gradient(90deg, transparent, rgba(41,98,255,0.45), rgba(255,45,59,0.45), transparent);
  }
  body.page-home .footer-col-title{ color: var(--ink); font-size:13px; font-weight:700; margin-bottom:14px; }
  body.page-home .footer-col-links{ display:flex; flex-direction:column; gap:11px; }
  body.page-home .footer-col-links a{ color: var(--muted); font-size:13.5px; transition: color .2s ease; }
  body.page-home .footer-col-links a:hover{ color: var(--ink); }

  /* ---------- REDESIGN "CYBER GAMING" (fase 1: sola home pubblica) ----------
     Bagliori neon più marcati, mockup live più ricco, nuove sezioni. Tutto
     scoped sotto body.page-home: nessun'altra pagina viene toccata. */

  /* Sfondo pagina: nero pieno, l'accento è nelle linee diagonali dell'hero. */
  body.page-home{ background: var(--bg); }

  /* Linee neon diagonali negli angoli dell'hero (rosse a sinistra, blu a destra). */
  body.page-home .hero-streaks{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  body.page-home .hero-streaks i{ position:absolute; width:3px; height:160%; top:-30%; border-radius:3px; }
  body.page-home .hero-streaks i:nth-child(1){
    left:-1%; transform: rotate(18deg); opacity:.9;
    background: linear-gradient(180deg, transparent 0%, var(--red) 25%, transparent 78%);
    box-shadow: 0 0 18px 2px rgba(255,45,59,0.5);
  }
  body.page-home .hero-streaks i:nth-child(2){
    left:6%; transform: rotate(18deg); opacity:.5;
    background: linear-gradient(180deg, transparent 0%, var(--red) 20%, transparent 65%);
    box-shadow: 0 0 12px 2px rgba(255,45,59,0.35);
  }
  body.page-home .hero-streaks i:nth-child(3){
    right:-1%; transform: rotate(-18deg); opacity:.9;
    background: linear-gradient(180deg, transparent 0%, var(--blue) 25%, transparent 78%);
    box-shadow: 0 0 18px 2px rgba(41,98,255,0.5);
  }
  body.page-home .hero-streaks i:nth-child(4){
    right:6%; transform: rotate(-18deg); opacity:.5;
    background: linear-gradient(180deg, transparent 0%, var(--blue) 20%, transparent 65%);
    box-shadow: 0 0 12px 2px rgba(41,98,255,0.35);
  }
  @media (max-width:760px){ body.page-home .hero-streaks{ display:none; } }

  /* Header: pulsante ghost "Accedi" (bordo blu) + pulsante solido "Dashboard" (rosso), squadrati e bold. */
  body.page-home .nav-btn-ghost{
    display:inline-flex; align-items:center; gap:9px;
    padding:12px 20px; border-radius:10px; border:1.5px solid var(--blue);
    color: var(--ink); font-size:14px; font-weight:700;
    transition: box-shadow .2s ease, transform .15s ease;
  }
  body.page-home .nav-btn-ghost svg{ width:16px; height:16px; flex-shrink:0; color: var(--blue); }
  body.page-home .nav-btn-ghost:hover{ box-shadow: 0 0 20px rgba(41,98,255,0.4); transform: translateY(-1px); }
  body.page-home .nav-cta{
    display:inline-flex; align-items:center; gap:9px;
    padding:12px 20px; border-radius:10px; font-size:14px; font-weight:700;
    box-shadow: 0 0 22px rgba(255,45,59,0.4);
  }
  body.page-home .nav-cta svg{ width:16px; height:16px; flex-shrink:0; }
  body.page-home .nav-cta:hover{ box-shadow: 0 0 32px rgba(255,45,59,0.6); transform: translateY(-1px); }
  /* Sotto i 760px l'header passa al menu hamburger: il pulsante ghost "Accedi"
     si nasconde (spazio stretto) e la stessa azione resta raggiungibile come
     voce di testo dentro il menu (.nav-links-auth). Il CTA principale perde
     il prezzo e mostra solo "Inizia" per non sforare la larghezza. */
  body.page-home .nav-links-auth{ display:none; }
  @media (max-width:760px){
    body.page-home .nav-btn-ghost{ display:none; }
    body.page-home .nav-links-auth{ display:inline; }
    body.page-home .nav-btn-label-price{ display:none; }
  }

  /* Logo: la vera immagine img/logo.png (badge esagonale "TGX", sfondo
     trasparente), al posto del vecchio marchio quadrato ritagliato + della
     sigla "TGX" disegnata a mano in CSS/SVG. Nessuna scritta "TikGameX"
     accanto, come nel riferimento visivo. In linea nel flusso, centrata
     verticalmente nella barra come un logo normale (niente overflow).
     Scoped a "header" apposta: il logo del footer (stesse classi .logo/
     .logo-mark) resta quello piccolo in linea col testo "TikGameX". */
  body.page-home header .logo{ display:flex; align-items:center; }
  body.page-home header .logo-mark{
    display:block; width:auto; height:38px; border-radius:0; object-fit:contain;
    filter: drop-shadow(0 0 8px rgba(255,45,59,0.25)) drop-shadow(0 0 8px rgba(41,98,255,0.25));
    transition: transform .2s ease, filter .2s ease;
  }
  body.page-home header .logo:hover .logo-mark{
    transform: scale(1.04); border-radius:0;
    filter: drop-shadow(0 0 14px rgba(255,45,59,0.4)) drop-shadow(0 0 14px rgba(41,98,255,0.4));
  }
  body.page-home header .logo-word{ display:none; }

  /* Hero: icona gamepad grande bicolore (senza riquadro), titolo enorme maiuscolo su più righe. */
  body.page-home .hero-badge{ display:inline-flex; margin-bottom:20px; }
  body.page-home .hero-badge svg{
    width:74px; height:48px;
    filter: drop-shadow(-3px 0 10px rgba(41,98,255,0.55)) drop-shadow(3px 0 10px rgba(255,45,59,0.55));
  }
  body.page-home .hero h1{ text-transform:uppercase; }
  body.page-home .hero-line{ display:block; }
  body.page-home .hero-ctas .btn{ display:inline-flex; align-items:center; gap:9px; }
  body.page-home .hero-ctas .btn svg{ width:16px; height:16px; }
  body.page-home .hero-ctas .btn-primary{ box-shadow: 0 0 26px rgba(41,98,255,0.4); }
  body.page-home .hero-ctas .btn-primary:hover{ box-shadow: 0 0 36px rgba(41,98,255,0.6); }
  body.page-home .hero-ctas .btn-outline{ box-shadow: 0 0 26px rgba(255,45,59,0.4); }
  body.page-home .hero-ctas .btn-outline:hover{ box-shadow: 0 0 36px rgba(255,45,59,0.6); }

  /* Coppia di pulsanti principale dell'hero: ACCEDI (rosso pieno) + DASHBOARD
     (bordo blu, sfondo trasparente) — stessa coppia cromatica dell'header,
     assegnata a specchio. Classi dedicate per non ereditare gli stili sopra. */
  body.page-home .hero-ctas .btn-neon{
    text-transform:uppercase; font-weight:800; font-size:15px; padding:16px 30px; border-radius:10px;
  }
  body.page-home .btn-neon-red{ background: var(--red); color:#fff; border:none; box-shadow: 0 0 26px rgba(255,45,59,0.45); }
  body.page-home .btn-neon-red:hover{ background:#e6212d; box-shadow: 0 0 38px rgba(255,45,59,0.65); }
  body.page-home .btn-neon-blue-outline{ background:transparent; color: var(--blue); border:1.5px solid var(--blue); box-shadow: 0 0 26px rgba(41,98,255,0.35); }
  body.page-home .btn-neon-blue-outline svg{ color: var(--blue); }
  body.page-home .btn-neon-blue-outline:hover{ background: rgba(41,98,255,0.1); box-shadow: 0 0 38px rgba(41,98,255,0.55); }

  /* ---- Simulazione overlay live dentro il tablet (screenshot reale TntCube di sfondo) ---- */
  body.page-home .hero-window-screen{ aspect-ratio: 16 / 10; }
  body.page-home .live-bg{ position:absolute; inset:0; background: url('../img/minecraft.png') center/cover; }
  body.page-home .live-bg::after{
    content:''; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(9,9,9,0.55) 0%, rgba(9,9,9,0.1) 32%, rgba(9,9,9,0.3) 68%, rgba(9,9,9,0.8) 100%);
  }
  body.page-home .live-topbar{ position:absolute; top:14px; left:14px; z-index:3; display:flex; align-items:center; gap:8px; }
  body.page-home .live-badge{
    display:flex; align-items:center; gap:5px; background: var(--red); color:#fff;
    font-family:'JetBrains Mono'; font-size:10.5px; font-weight:700; letter-spacing:.04em;
    padding:4px 9px; border-radius:5px;
  }
  body.page-home .live-badge .live-dot{ background:#fff; width:5px; height:5px; }
  body.page-home .live-viewers{
    display:flex; align-items:center; gap:5px; background: rgba(9,9,9,0.6); color:#fff;
    font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; backdrop-filter: blur(4px);
  }
  body.page-home .live-viewers svg{ width:11px; height:11px; }

  body.page-home .live-notifs{ position:absolute; left:14px; bottom:50px; z-index:3; width:47%; display:flex; flex-direction:column; gap:6px; }
  body.page-home .live-notif{
    display:flex; align-items:center; gap:8px; background: rgba(9,9,9,0.62);
    backdrop-filter: blur(4px); border-radius:9px; padding:6px 9px;
  }
  body.page-home .live-notif-avatar{ width:24px; height:24px; border-radius:50%; flex-shrink:0; background: linear-gradient(135deg, var(--blue), var(--red)); }
  body.page-home .live-notif-text{ flex:1; min-width:0; line-height:1.25; }
  body.page-home .live-notif-text strong{ display:block; font-size:11.5px; color:#fff; }
  body.page-home .live-notif-text span{ display:block; font-size:9.5px; color: rgba(255,255,255,0.62); }
  body.page-home .live-notif-gift{ display:flex; align-items:center; gap:3px; font-size:12px; font-weight:700; color:#ff2ea6; flex-shrink:0; }

  body.page-home .live-sidebar{ position:absolute; top:52px; right:42px; bottom:50px; z-index:3; width:33%; display:flex; flex-direction:column; gap:8px; }
  body.page-home .live-box{ background: rgba(9,9,9,0.62); backdrop-filter: blur(4px); border-radius:10px; padding:10px 11px; border:1px solid rgba(255,255,255,0.08); }
  body.page-home .live-box-title{ font-size:9.5px; font-weight:700; letter-spacing:.06em; color: rgba(255,255,255,0.55); margin-bottom:8px; }
  body.page-home .donor-row{ display:flex; align-items:center; gap:6px; font-size:10.5px; color:#fff; padding:2px 0; }
  body.page-home .donor-rank{
    width:15px; height:15px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:8.5px; font-weight:800; color:#0a0a0a; background: rgba(255,255,255,0.55);
  }
  body.page-home .donor-row:nth-child(1) .donor-rank{ background:#ffc93c; }
  body.page-home .donor-row:nth-child(2) .donor-rank{ background:#c9d3e0; }
  body.page-home .donor-row:nth-child(3) .donor-rank{ background:#d6924f; }
  body.page-home .donor-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body.page-home .donor-score{ display:flex; align-items:center; gap:3px; color: rgba(255,255,255,0.7); font-size:9.5px; flex-shrink:0; }
  body.page-home .donor-score svg{ width:9px; height:9px; color:#ff2ea6; }
  body.page-home .live-goal p{ font-size:10px; color: rgba(255,255,255,0.75); margin-bottom:6px; }
  body.page-home .live-goal-num{ display:flex; align-items:baseline; gap:4px; margin-bottom:8px; }
  body.page-home .live-goal-num .num{ font-family:'Baloo 2'; font-size:22px; font-weight:700; color:#ff2ea6; }
  body.page-home .live-goal-num .of{ font-size:11px; color:#fff; }
  body.page-home .live-goal-bar{ height:5px; border-radius:999px; background: rgba(255,255,255,0.15); overflow:hidden; }
  body.page-home .live-goal-fill{ height:100%; background:#ff2ea6; border-radius:999px; }

  body.page-home .live-icons{ position:absolute; right:5px; top:50%; transform:translateY(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:11px; width:32px; }
  body.page-home .live-icon{ display:flex; flex-direction:column; align-items:center; gap:3px; color:#fff; font-size:9px; font-weight:600; }
  body.page-home .live-icon svg{ width:16px; height:16px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }
  body.page-home .live-icon.host-avatar{
    position:relative; width:26px; height:26px; border-radius:50%;
    background: linear-gradient(135deg, var(--blue), var(--red)); border:2px solid #fff;
  }
  body.page-home .live-icon.host-avatar::after{
    content:'+'; position:absolute; right:-3px; bottom:-3px; width:12px; height:12px; border-radius:50%;
    background: var(--red); color:#fff; font-size:10px; font-weight:800; line-height:1;
    display:flex; align-items:center; justify-content:center; border:1.5px solid #0a0a0a;
  }
  body.page-home .live-icon.gift-icon{
    width:26px; height:26px; border-radius:50%; background:#ff2ea6;
    display:flex; align-items:center; justify-content:center; box-shadow:0 0 12px rgba(255,46,166,0.6);
  }
  body.page-home .live-icon.gift-icon svg{ color:#fff; width:14px; height:14px; }

  body.page-home .live-comment{
    position:absolute; left:14px; right:14px; bottom:14px; z-index:3;
    display:flex; align-items:center; justify-content:space-between;
    background: rgba(9,9,9,0.55); backdrop-filter: blur(4px);
    border-radius:999px; padding:8px 12px; font-size:10.5px; color: rgba(255,255,255,0.6);
  }
  body.page-home .live-comment svg{ width:14px; height:14px; }

  @media (max-width:680px){ body.page-home .live-notifs{ display:none; } }
  @media (max-width:520px){
    body.page-home .live-sidebar, body.page-home .live-icons{ display:none; }
    body.page-home .live-comment{ right:14px; }
  }

  /* ---- "Come funziona": badge numerato + freccia tratteggiata fra le card ---- */
  body.page-home .value-card{ position:relative; }
  body.page-home .value-card-num{
    position:absolute; top:-14px; left:30px; width:30px; height:30px; border-radius:50%;
    background: var(--red); color:#fff; font-family:'Baloo 2'; font-weight:700; font-size:14px;
    display:flex; align-items:center; justify-content:center; box-shadow: 0 0 16px rgba(255,45,59,0.5);
  }
  @media (min-width:861px){
    body.page-home .value-card:not(:last-child)::after{
      content:'– – –▸'; position:absolute; top:50%; right:-27px; transform: translateY(-50%);
      color: var(--muted); font-size:13px; letter-spacing:-1px; opacity:.6;
    }
  }

  /* ---- Giochi: badge genere sotto al titolo ---- */
  body.page-home .game-poster-genre{
    display:inline-block; margin-top:9px; padding:3px 10px; border-radius:999px;
    background: rgba(255,255,255,0.06); color: var(--muted); font-size:11px; font-family:'JetBrains Mono';
  }

  /* ---- Banner "Tutto incluso": striscia con gradiente rosso→nero ---- */
  body.page-home .feature-banner{
    margin-top:52px; border-radius:24px; overflow:hidden;
    background: linear-gradient(100deg, #4a0414 0%, #1a0308 42%, #101010 100%);
    border: 1px solid rgba(255,45,59,0.25);
  }
  body.page-home .feature-banner-inner{ display:flex; align-items:center; gap:36px; padding: 44px; flex-wrap:wrap; }
  body.page-home .feature-banner-cube{
    width:80px; height:80px; flex-shrink:0; border-radius:20px;
    background: linear-gradient(145deg, #ff5a67, var(--red));
    box-shadow: 0 0 50px rgba(255,45,59,0.55), inset 0 -8px 16px rgba(0,0,0,0.25), inset 0 8px 16px rgba(255,255,255,0.18);
    transform: rotate(-8deg);
    display:flex; align-items:center; justify-content:center;
  }
  body.page-home .feature-banner-cube svg{ width:36px; height:36px; color:#fff; }
  body.page-home .feature-banner-text h3{ font-size: clamp(21px,2.6vw,27px); color:#fff; margin-bottom:16px; }
  body.page-home .feature-banner-list{ display:flex; flex-wrap:wrap; gap:14px 28px; }
  body.page-home .feature-banner-item{ display:flex; align-items:center; gap:8px; font-size:13.5px; color: rgba(255,255,255,0.78); }
  body.page-home .feature-banner-item svg{ width:15px; height:15px; color: var(--red); flex-shrink:0; }
  @media (max-width:760px){ body.page-home .feature-banner-inner{ padding:32px 26px; gap:22px; } }

  /* Meno spazio lungo tutta la catena di sezioni dopo "Giochi" (il banner
     chiude Giochi con già peso visivo proprio): Perché → Funzionalità →
     Abbonamento → FAQ, altrimenti staccate di quasi 180px l'una dall'altra
     (88px padding-bottom + 88px padding-top sommati). Non tocca il gap prima
     della CTA finale, lasciata più ariosa di proposito. Id diversi per
     lingua. */
  body.page-home #giochi, body.page-home #games, body.page-home #juegos, body.page-home #jeux{ padding-bottom:44px; }
  body.page-home #perche, body.page-home #why, body.page-home #por-que, body.page-home #pourquoi{ padding-top:44px; padding-bottom:44px; }
  body.page-home #funzionalita, body.page-home #features, body.page-home #funciones, body.page-home #fonctionnalites{ padding-top:44px; padding-bottom:44px; }
  body.page-home #prezzo, body.page-home #pricing, body.page-home #precio, body.page-home #tarif{ padding-top:44px; padding-bottom:44px; }
  body.page-home #faq{ padding-top:44px; }

  /* ---- "Perché TikGameX": griglia a 6 icone ---- */
  body.page-home .why-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:28px 18px; }
  @media (max-width:900px){ body.page-home .why-grid{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:520px){ body.page-home .why-grid{ grid-template-columns:repeat(2,1fr); } }
  body.page-home .why-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
  body.page-home .why-item-icon{
    width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,45,59,0.4); color: var(--red); box-shadow: 0 0 18px rgba(255,45,59,0.2);
    transition: box-shadow .2s ease, transform .2s ease;
  }
  body.page-home .why-item:hover .why-item-icon{ box-shadow: 0 0 26px rgba(255,45,59,0.4); transform: translateY(-2px); }
  body.page-home .why-item-icon svg{ width:21px; height:21px; }
  body.page-home .why-item span{ font-size:12.5px; color: var(--muted); line-height:1.35; }

  /* ---- Prezzo: doppio bagliore neon più marcato ---- */
  body.page-home .price-card{ border-color: rgba(255,45,59,0.32); box-shadow: 0 0 60px rgba(255,45,59,0.16), 0 30px 80px -20px rgba(0,0,0,0.6); }
  body.page-home .price-card:hover{ box-shadow: 0 0 80px rgba(255,45,59,0.28), 0 40px 90px -16px rgba(41,98,255,0.25); }
  body.page-home .price-card::before{ background: var(--red); color:#fff; box-shadow: 0 0 16px rgba(255,45,59,0.6); }

  /* ---- FAQ: griglia a due colonne ---- */
  body.page-home #faq .faq-list{ max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; align-content:start; }
  body.page-home #faq .faq-item{ margin-bottom:0; }
  @media (max-width:760px){ body.page-home #faq .faq-list{ grid-template-columns:1fr; } }

  /* ---- Footer: icona accanto al link Discord ---- */
  body.page-home .footer-social a{ display:inline-flex; align-items:center; gap:7px; }
  body.page-home .footer-social svg{ width:15px; height:15px; }

  /* ---------- AUTH / LOGIN ---------- */
  .auth-section{
    padding: 90px 0; min-height: calc(100vh - 148px);
    display:flex; align-items:center;
  }
  .auth-wrap{ display:flex; justify-content:center; }
  .auth-card{
    max-width: 440px; width:100%;
    background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
    border: 1px solid var(--line); border-radius: 20px;
    padding: 44px 40px;
    box-shadow: 0 0 50px rgba(46,125,255,0.08), 0 0 50px rgba(255,59,59,0.06), 0 30px 80px -20px rgba(0,0,0,0.6);
  }
  .auth-card h1{ font-size: clamp(26px, 3vw, 32px); margin: 6px 0 10px; }
  .auth-sub{ color: var(--muted); font-size: 14.5px; margin-bottom: 30px; }

  .auth-error{
    background: rgba(255,59,59,0.10); border: 1px solid rgba(255,59,59,0.4); color: #FFC2C2;
    border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 22px;
  }

  .auth-form{ display:flex; flex-direction:column; gap: 20px; }
  .auth-form[hidden]{ display:none; }
  .field{ display:flex; flex-direction:column; gap: 8px; }
  .field-label{ font-size: 13px; color: var(--muted); font-weight:500; }
  .field-hint{ font-size: 12px; color: var(--muted); }
  .field-hint-error{ color: #FF6B6B; }
  .field input[type="email"],
  .field input[type="password"],
  .field input[type="text"],
  .field input[type="number"]{
    background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 10px;
    padding: 13px 14px; color: var(--ink); font-size: 16px; font-family: 'Nunito Sans', sans-serif;
    width: 100%; transition: border-color .2s ease, background .2s ease;
  }
  /* Frecce incremento/decremento native del browser: fuori stile col resto
     della dashboard (colori chiari su sfondo scuro), tolte per un input
     numerico che comunque si compila anche digitando (es. "Giorni di prova"). */
  .field input[type="number"]::-webkit-outer-spin-button,
  .field input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance: none; margin: 0;
  }
  .field input[type="number"]{ -moz-appearance: textfield; }
  .field input:focus{ outline:none; border-color: var(--blue); background: rgba(46,125,255,0.05); }
  .field input[aria-invalid="true"]{ border-color: var(--red); }
  .field-input-wrap{ position:relative; display:flex; }
  .field-input-wrap input{ flex:1; padding-right: 44px; }
  .field-toggle{
    position:absolute; right:2px; top:50%; transform:translateY(-50%);
    background:transparent; border:none; color: var(--muted); cursor:pointer;
    font-size: 16px; padding: 10px; line-height:1;
    display:flex; align-items:center; justify-content:center;
  }
  .field-toggle:hover{ color: var(--ink); }
  .field-toggle svg{ width:18px; height:18px; display:block; }

  .auth-row{ display:flex; justify-content:space-between; align-items:center; font-size: 13.5px; flex-wrap: wrap; gap: 10px; }
  .checkbox{ display:flex; align-items:center; gap:8px; color: var(--muted); cursor:pointer; font-size: 13.5px; }
  .checkbox input{ accent-color: var(--blue); width:16px; height:16px; flex-shrink:0; }
  .auth-link{ color: var(--blue); font-weight:500; }
  .auth-link:hover{ text-decoration: underline; }

  .auth-submit{ width:100%; justify-content:center; margin-top: 6px; }
  .auth-submit:disabled{ opacity: 0.6; cursor: not-allowed; transform: none; }
  .auth-footer{ margin-top: 26px; text-align:center; font-size: 13.5px; color: var(--muted); }

  .otp-group{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .otp-box{
    aspect-ratio: 3 / 4; width:100%; padding:0;
    text-align:center; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 10px;
    color: var(--ink); font-size: 22px; font-weight:700; font-family:'JetBrains Mono', monospace;
    transition: border-color .2s ease, background .2s ease;
  }
  .otp-box:focus{ outline:none; border-color: var(--blue); background: rgba(46,125,255,0.05); }
  .otp-box[aria-invalid="true"]{ border-color: var(--red); }
  .auth-actions-row{ display:flex; justify-content:space-between; align-items:center; font-size: 13px; margin-top: -8px; flex-wrap:wrap; gap: 8px; }
  .auth-actions-row .link-btn{ background:none; border:none; padding:0; cursor:pointer; font:inherit; color: var(--blue); font-weight:500; }
  .auth-actions-row .link-btn:hover{ text-decoration: underline; }
  .auth-actions-row .link-btn:disabled{ opacity:0.6; cursor:not-allowed; text-decoration:none; }

  @media (max-width: 380px){
    .otp-box{ font-size: 18px; }
  }

  @media (max-width: 520px){
    .auth-section{ padding: 48px 0; }
    .auth-card{ padding: 30px 22px; border-radius: 16px; }
  }

  /* ---------- ROOT REDIRECT PAGE ---------- */
  .redirect-page{
    display:flex; align-items:center; justify-content:center;
    min-height: 100vh; text-align:center; padding: 20px;
  }
  .redirect-page a{ color: var(--blue); text-decoration: underline; }

  /* ---------- LEGAL / COOKIE POLICY ---------- */
  .legal{ padding: 64px 0 88px; }
  .legal-wrap{ max-width: 760px; }
  .legal h1{ font-size: clamp(30px, 4vw, 42px); margin: 10px 0 6px; }
  .legal-updated{ color: var(--muted); font-size: 13px; font-family:'JetBrains Mono'; margin-bottom: 34px; }
  .legal h2{ font-family:'Baloo 2'; font-size: 20px; margin: 36px 0 12px; }
  .legal p{ color: var(--muted); font-size: 15px; line-height: 1.7; }
  .legal code{ font-family:'JetBrains Mono'; background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 5px; color: var(--ink); font-size: 13px; }
  .legal p + p{ margin-top: 10px; }
  .legal ul{ color: var(--muted); font-size: 15px; line-height: 1.7; margin: 6px 0 12px; padding-left: 22px; list-style: disc; }
  .legal ul li{ margin: 4px 0; }
  .legal h3{ font-family:'Baloo 2'; font-size: 16px; margin: 20px 0 8px; color: var(--ink); }

  /* Guide passo-passo (es. tutorial-tntcube.html): stessa base tipografica di
     .legal, con un numero cerchiato invece del semplice elenco puntato. */
  .tutorial-steps{ display:flex; flex-direction:column; gap: 30px; margin: 30px 0 44px; }
  .tutorial-step{ display:flex; gap: 18px; align-items:flex-start; }
  .tutorial-step-num{
    flex-shrink:0; width: 34px; height: 34px; border-radius: 50%;
    background: var(--red); color:#fff; font-family:'Baloo 2'; font-weight:700; font-size: 15px;
    display:flex; align-items:center; justify-content:center; margin-top: 2px;
  }
  .tutorial-step-body{ flex:1; min-width:0; }
  .tutorial-step-body h3{ margin: 0 0 8px; }
  .tutorial-step-body p{ margin:0; }
  .tutorial-step-body p + p{ margin-top: 8px; }
  .tutorial-step-body .auth-error{ margin-top: 12px; }

  .table-scroll{ overflow-x: auto; margin: 18px 0; border-radius: 12px; border: 1px solid var(--line); }
  .cookie-table{ width: 100%; border-collapse: collapse; min-width: 560px; background: var(--bg-panel); }
  .cookie-table th, .cookie-table td{ text-align:left; padding: 12px 16px; font-size: 13.5px; border-bottom: 1px solid var(--line); vertical-align: top; }
  .cookie-table th{ font-family:'JetBrains Mono'; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
  .cookie-table td{ color: var(--muted); }
  .cookie-table td code{ color: var(--ink); }
  .cookie-table tr:last-child td{ border-bottom: none; }

  /* ---------- COOKIE CONSENT BANNER ---------- */
  .cookie-banner{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    background: rgba(14,24,48,0.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding: 18px 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    animation: cookie-banner-in .3s ease;
  }
  @keyframes cookie-banner-in{ from{ transform: translateY(100%); } to{ transform: translateY(0); } }
  .cookie-banner-inner{
    display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap: wrap;
  }
  .cookie-banner-text{ color: var(--muted); font-size: 13.5px; max-width: 640px; flex: 1 1 320px; }
  .cookie-banner-actions{ display:flex; align-items:center; gap: 20px; flex-shrink: 0; }
  .cookie-banner-btn{ padding: 10px 20px; font-size: 13.5px; }

  @media (max-width: 600px){
    .cookie-banner-inner{ flex-direction: column; align-items: stretch; text-align: center; }
    .cookie-banner-actions{ justify-content: center; }
  }

  /* ---------- 404 ---------- */
  .error-404, .error-403{
    min-height: calc(100vh - 148px);
    display:flex; align-items:center;
    padding: 90px 0;
    text-align:center;
    border-bottom: none;
  }
  .error-404-wrap, .error-403-wrap{ display:flex; flex-direction:column; align-items:center; }
  .error-404 .eyebrow, .error-403 .eyebrow{ margin-bottom: 28px; }
  .error-code{
    font-family:'Baloo 2'; font-weight:700; line-height:1;
    font-size: clamp(90px, 18vw, 180px);
    background: linear-gradient(135deg, var(--blue), var(--red));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 34px rgba(46,125,255,0.25)) drop-shadow(0 0 34px rgba(255,59,59,0.2));
  }
  .error-404 h1, .error-403 h1{ font-size: clamp(26px, 3.4vw, 36px); margin: 8px 0 16px; }
  .error-404 .lead, .error-403 .lead{ max-width: 460px; margin-left:auto; margin-right:auto; }
  .error-404 .hero-ctas, .error-403 .hero-ctas{ justify-content:center; margin-top: 34px; }

  /* ---------- LANGUAGE DROPDOWN ---------- */
  /* Raggruppa il selettore lingua e la CTA: stanno insieme a destra dell'header,
     fuori da .nav-links, così restano visibili anche col menu mobile chiuso. */
  .nav-right{ display:flex; align-items:center; gap:14px; }
  .lang-dropdown{ position:relative; }
  .lang-dropdown-btn{
    display:inline-flex; align-items:center; gap:6px; list-style:none; cursor:pointer;
    color: var(--muted); border: 1px solid var(--line); border-radius:999px; padding: 7px 11px;
    transition: color .2s ease, border-color .2s ease;
  }
  .lang-dropdown-btn::-webkit-details-marker{ display:none; }
  .lang-dropdown-btn::after{ content:'▾'; font-size:9px; opacity:.7; }

  /* Bandierine: SVG incorporate come data URI (nessuna richiesta esterna,
     compatibile con la CSP del sito senza doverla allentare). */
  .fi{
    display:inline-block; width:1.2em; height:0.9em; border-radius:2px;
    background-size: cover; background-position:50%; background-repeat:no-repeat;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.15); flex-shrink:0;
  }
  .fi-it{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%23009246'/%3E%3Crect x='1' width='1' height='2' fill='%23fff'/%3E%3Crect x='2' width='1' height='2' fill='%23ce2b37'/%3E%3C/svg%3E");
  }
  .fi-es{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23aa151b'/%3E%3Crect y='0.5' width='3' height='1' fill='%23f1bf00'/%3E%3C/svg%3E");
  }
  .fi-gb{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%2300247d'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23cf142b' stroke-width='2'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='%23cf142b' stroke-width='6'/%3E%3C/svg%3E");
  }
  .fi-fr{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%230055A4'/%3E%3Crect x='1' width='1' height='2' fill='%23fff'/%3E%3Crect x='2' width='1' height='2' fill='%23EF4135'/%3E%3C/svg%3E");
  }
  .lang-dropdown:hover .lang-dropdown-btn,
  .lang-dropdown[open] .lang-dropdown-btn{ color: var(--ink); border-color: rgba(46,125,255,0.4); }
  .lang-dropdown-list{
    position:absolute; top: calc(100% + 8px); right:0; z-index:20; min-width: 150px;
    display:flex; flex-direction:column; gap:2px; padding:6px;
    background: var(--bg-panel); border:1px solid var(--line); border-radius:10px;
    box-shadow: 0 16px 34px rgba(6,11,24,0.5);
  }
  .lang-dropdown-list a{
    display:flex; align-items:center; gap:9px;
    padding: 8px 10px; border-radius:6px; font-size: 14.5px; font-weight:500;
    color: var(--muted); transition: color .2s ease, background .2s ease;
  }
  .lang-dropdown-list a:hover{ color: var(--ink); background: rgba(255,255,255,0.06); }

  /* ---------- DASHBOARD / APP SHELL ---------- */
  /* Dashboard e admin sono un'app a sé, non pagine di marketing: niente header
     né footer del sito, solo una sidebar persistente a tutta altezza + il
     contenuto della pagina corrente. */
  .app-shell{ display:flex; min-height:100vh; align-items:stretch; }
  @media (max-width: 860px){ .app-shell{ flex-direction:column; } }

  .app-sidebar{
    width: 264px; flex-shrink:0; display:flex; flex-direction:column;
    background: var(--bg-panel); border-right: 1px solid var(--line);
    padding: 22px 18px; position:sticky; top:0; height:100vh; overflow-y:auto;
  }
  @media (max-width: 860px){ .app-sidebar{ position:static; width:auto; height:auto; border-right:none; border-bottom:1px solid var(--line); padding: 16px 16px 14px; } }

  /* Su mobile la sidebar verticale occuperebbe da sola tutto lo schermo prima
     di arrivare al contenuto: qui sotto diventa una barra compatta con la nav
     a scorrimento orizzontale (stile tab bar), invece di restare impilata. */
  @media (max-width: 860px){
    .app-sidebar-brand{ padding: 0 0 14px; margin-bottom: 12px; }
    .dash-nav{
      flex-direction: row; flex: none; overflow-x: auto; -webkit-overflow-scrolling: touch;
      gap: 6px; margin: 0 -16px 12px; padding: 0 16px 4px; scrollbar-width: thin;
    }
    .dash-nav-btn{ flex-shrink: 0; white-space: nowrap; padding: 9px 14px; }
    .app-sidebar-footer{
      flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
      margin-top: 12px; padding-top: 12px; gap: 10px 14px;
    }
    .app-discord-btn{ flex: 1 1 auto; min-width: 120px; }
    .app-sidebar-lang{ order: 3; }
    .app-sidebar-lang .lang-dropdown-btn{ width:auto; padding: 8px 12px; }
    .dash-user{ order: 1; flex: 1 1 auto; min-width: 160px; }
    .dash-logout{ order: 4; flex: 1 1 auto; min-width: 120px; }
  }

  .app-sidebar-brand{
    display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;
    padding: 4px 8px 18px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
  }
  .app-sidebar-logo{ width:auto; height:34px; border-radius:0; object-fit:contain; flex-shrink:0; }
  .app-sidebar-brand-name{ display:block; font-family:'Baloo 2'; font-weight:700; font-size:16px; }
  .app-sidebar-brand-sub{ display:block; font-size:11.5px; color: var(--muted); }

  .dash-nav{
    display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch;
    gap:2px; flex:1; padding:0; margin:0; max-width:none;
  }
  .dash-nav-btn{
    display:flex; align-items:center; gap:10px;
    text-align:left; background:transparent; border:none; color: var(--muted);
    font-family:'Nunito Sans', sans-serif; font-size: 14px; font-weight:500; padding: 10px 12px;
    border-radius: 8px; cursor:pointer; transition: background .2s ease, color .2s ease;
    text-decoration:none;
  }
  .dash-nav-btn:hover{ color: var(--ink); background: rgba(255,255,255,0.04); }
  .dash-nav-btn.active{ color: var(--ink); background: rgba(46,125,255,0.12); }
  .dash-nav-btn .nav-icon{ width:18px; height:18px; flex-shrink:0; opacity:.85; }
  .dash-nav-btn[hidden]{ display:none; }

  .app-sidebar-footer{
    display:flex; flex-direction:column; gap:10px;
    margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
  }
  .app-discord-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:#5865F2; color:#fff !important; text-decoration:none;
    font-weight:600; font-size:13.5px; padding:10px 12px; border-radius:8px;
    transition: filter .2s ease;
  }
  .app-discord-btn:hover{ filter: brightness(1.12); }
  .app-discord-btn .nav-icon{ width:17px; height:17px; }

  /* Pulsante "Connetti" overlay (classifiche top regali/top like), sopra il
     pulsante Discord nel footer della sidebar: stessa forma a pillola, ma
     outline finché non è collegato e pieno (accento blu) quando lo è. */
  .app-overlay-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    background: transparent; color: var(--ink); border: 1px solid var(--line);
    font-weight:600; font-size:13.5px; padding:10px 12px; border-radius:8px;
    cursor:pointer; font-family:inherit; transition: filter .2s ease, border-color .2s ease, background .2s ease;
  }
  .app-overlay-btn .nav-icon{ width:17px; height:17px; }
  .app-overlay-btn:hover{ border-color: rgba(255,255,255,0.28); }
  .app-overlay-btn[data-connected="1"]{ background: var(--blue); border-color: var(--blue); color:#fff; }
  .app-overlay-btn[data-connected="1"]:hover{ filter: brightness(1.12); }
  .app-overlay-btn:disabled{ opacity:.5; cursor:not-allowed; }
  .app-overlay-btn:disabled:hover{ border-color: var(--line); }

  .app-sidebar-lang .lang-dropdown-btn{ width:100%; justify-content:center; }
  .app-sidebar-lang .lang-dropdown-list{ left:0; right:0; }

  .dash-user{ display:flex; align-items:center; gap:12px; padding: 4px 2px; }
  .dash-avatar{
    width: 38px; height:38px; border-radius:50%; flex-shrink:0;
    background: linear-gradient(135deg, var(--blue), var(--red));
    display:flex; align-items:center; justify-content:center;
    font-family:'Baloo 2'; font-weight:700; font-size: 15px; color:#0B0B1F;
  }
  .dash-user-email{ font-size: 12.5px; font-weight:600; word-break: break-all; }
  .dash-role-badge{ margin-top:4px; }

  .badge{
    display:inline-flex; align-items:center; gap:5px; font-family:'JetBrains Mono'; font-size: 10.5px;
    text-transform:uppercase; letter-spacing:0.05em; padding: 3px 9px; border-radius:999px;
    border: 1px solid var(--line); color: var(--muted);
  }
  .badge-admin{ color: var(--red); border-color: rgba(255,59,59,0.4); background: rgba(255,59,59,0.08); }
  .badge-active{ color: var(--blue); border-color: rgba(46,125,255,0.4); background: rgba(46,125,255,0.08); }
  .badge-inactive{ color: var(--muted); }
  .badge-trial{ color: #FFB020; border-color: rgba(255,176,32,0.4); background: rgba(255,176,32,0.08); }

  .dash-logout{
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:transparent; border: 1px solid var(--line); color: var(--muted);
    font-family:'Nunito Sans', sans-serif; font-size: 13.5px; font-weight:500;
    padding: 10px 12px; border-radius: 8px; cursor:pointer; transition: border-color .2s ease, color .2s ease;
  }
  .dash-logout:hover{ border-color: var(--red); color: var(--ink); }
  .dash-logout .nav-icon{ width:16px; height:16px; }

  .app-main{ flex:1; min-width:0; padding: 44px 48px; }
  @media (max-width: 600px){ .app-main{ padding: 28px 20px; } }
  .app-main-wrap{ max-width: 1120px; }

  .dash-panel h1{ font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 8px; }
  .dash-panel > .dash-sub{ color: var(--muted); font-size: 14px; margin-bottom: 28px; }

  .dash-loading{ color: var(--muted); font-family:'JetBrains Mono'; font-size: 13px; }

  /* Info account: card a griglia (si adatta alla larghezza disponibile)
     invece della lista stretta impilata di prima, più scansionabile a colpo
     d'occhio. Riusata anche da #billing-plan-grid nel tab Pagamenti. */
  .profile-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; max-width: none; }
  .profile-item{
    display:flex; flex-direction:column; gap:6px;
    padding: 16px 18px; border-radius: 12px;
    background: var(--bg-panel-2); border: 1px solid var(--line);
    transition: border-color .2s ease, transform .2s ease;
  }
  .profile-item:hover{ border-color: rgba(41,98,255,0.35); transform: translateY(-2px); }
  .profile-label{ font-family:'JetBrains Mono'; font-size: 11px; color: var(--muted); text-transform:uppercase; letter-spacing:0.05em; }
  .profile-value{ font-size: 16px; font-weight:600; }

  .sub-card{
    border: 1px solid var(--line); border-radius: 14px; padding: 24px; max-width: 460px;
    background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  }
  .sub-status-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; }
  .sub-status-row h3{ font-size:16px; }
  .sub-note{ color: var(--muted); font-size: 12.5px; margin-top: 18px; padding-top:16px; border-top: 1px solid var(--line); }

  .connections-card{
    border: 1px solid var(--line); border-radius: 14px; padding: 24px; max-width: 460px;
    background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
    margin-top: 18px;
  }
  .connections-card h3{ font-size:16px; margin-bottom: 6px; }
  .connections-sub{ color: var(--muted); font-size: 12.5px; margin-bottom: 20px; }
  .connections-form{ display:flex; flex-direction:column; gap: 14px; }
  .connections-form .btn{ align-self:flex-start; }

  /* Collegamenti + Cambia password affiancate su schermi larghi, per non
     lasciare metà pagina vuota con card singole da 460px. */
  .profile-cards-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 34px; max-width: none; }
  .profile-cards-grid .connections-card{ margin-top:0; max-width:none; }
  @media (max-width: 760px){ .profile-cards-grid{ grid-template-columns: 1fr; } }

  .form-message{ border-radius: 10px; padding: 12px 14px; font-size: 13px; }
  .form-message.is-error{ background: rgba(255,59,59,0.10); border:1px solid rgba(255,59,59,0.4); color:#FFC2C2; }
  .form-message.is-success{ background: rgba(46,125,255,0.10); border:1px solid rgba(46,125,255,0.4); color:#CFE1FF; }

  /* ---------- TOAST (notifica in alto a destra, es. "Salvato automaticamente") ---------- */
  .toast-stack{
    position:fixed; top:20px; right:20px; z-index:100;
    display:flex; flex-direction:column; gap:10px; align-items:flex-end;
  }
  .toast{
    display:flex; align-items:center; gap:8px; max-width:320px;
    background: var(--bg-panel); border-radius:12px; padding:13px 18px;
    font-size:13.5px; font-weight:500; color: var(--ink);
    box-shadow: 0 16px 34px rgba(6,11,24,0.5);
    animation: toast-in .25s ease;
  }
  .toast.is-leaving{ animation: toast-out .2s ease forwards; }
  .toast-success{ border:1px solid rgba(34,197,94,0.45); background: rgba(34,197,94,0.14); color:#B7F3CD; }
  .toast-error{ border:1px solid rgba(255,59,59,0.45); background: rgba(255,59,59,0.12); color:#FFC2C2; }
  @keyframes toast-in{ from{ opacity:0; transform: translateX(24px); } to{ opacity:1; transform: translateX(0); } }
  @keyframes toast-out{ from{ opacity:1; transform: translateX(0); } to{ opacity:0; transform: translateX(24px); } }

  .dash-games{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 900px){ .dash-games{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px){ .dash-games{ grid-template-columns: 1fr; } }
  .game-card{ position:relative; }
  .game-card .game-body{ display:flex; flex-direction:column; gap:12px; }
  .game-play-btn{ align-self:flex-start; margin-top:4px; }
  .game-card.locked .game-thumb{ filter: grayscale(0.6) brightness(0.5); }
  .game-lock-note{ font-family:'JetBrains Mono'; font-size:11.5px; color: var(--muted); }

  /* ---------- ADMIN ---------- */
  .admin-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 32px; }
  .admin-stat{ border:1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: var(--bg-panel-2); }
  .admin-stat-num{ font-family:'Baloo 2'; font-size: 28px; font-weight:700; }
  .admin-stat-label{ font-family:'JetBrains Mono'; font-size: 11px; color: var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-top:4px; }

  .admin-table{ width:100%; border-collapse: collapse; min-width: 900px; }
  .admin-table th, .admin-table td{ text-align:left; padding: 11px 14px; font-size: 13px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .admin-table th{ font-family:'JetBrains Mono'; font-size: 10.5px; text-transform:uppercase; letter-spacing:0.05em; color: var(--muted); }
  .admin-table td{ color: var(--muted); }
  .admin-table td.admin-email{ color: var(--ink); }
  /* Riga cliccabile del tab Utenti (apre il popup di dettaglio): il cursore è
     l'unico segnale in più oltre all'hover già condiviso da tutte le
     .admin-table sopra, per non dover duplicare quello stile qui. */
  .admin-users-row{ cursor: pointer; }
  .admin-row-actions{ display:flex; gap:6px; flex-wrap:wrap; }
  .admin-action-btn{
    font-family:'JetBrains Mono'; font-size: 10.5px; padding: 5px 9px; border-radius: 6px;
    border: 1px solid var(--line); background:transparent; color: var(--muted); cursor:pointer;
    transition: border-color .2s ease, color .2s ease;
  }
  .admin-action-btn:hover{ color: var(--ink); border-color: var(--blue); }
  .admin-action-btn.danger:hover{ color: var(--red); border-color: var(--red); }
  .admin-action-btn:disabled{ opacity:0.4; cursor:not-allowed; }
  .admin-self-note{ font-family:'JetBrains Mono'; font-size: 10.5px; color: var(--line); }

  /* X compatta in fondo alla riga (es. tab Abbonamenti): un'icona invece di un
     pulsante di testo, per un'azione distruttiva separata da quelle normali
     della riga — sempre l'ultima a destra nel gruppo .admin-row-actions. */
  .admin-remove-btn{
    flex-shrink:0; width:26px; height:26px; border-radius:8px; border:1px solid var(--line);
    background:transparent; color: var(--muted); cursor:pointer; font-size:13px; line-height:1;
    transition: border-color .2s ease, color .2s ease;
  }
  .admin-remove-btn:hover{ border-color: var(--red); color: var(--red); }

  /* ---------- DANGER ZONE ---------- */
  .danger-zone{
    margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,59,59,0.3);
    max-width: 460px;
  }
  .danger-zone h3{ color: var(--red); font-size: 15px; margin-bottom: 8px; }
  .danger-zone p{ color: var(--muted); font-size: 13px; margin-bottom: 16px; }
  .danger-zone .btn-danger{
    background:transparent; border: 1px solid var(--red); color: var(--red);
  }
  .danger-zone .btn-danger:hover{ background: rgba(255,59,59,0.1); }

  .danger-confirm{
    margin-top: 16px; padding: 18px; border: 1px solid rgba(255,59,59,0.35); border-radius: 12px;
    background: rgba(255,59,59,0.06);
  }
  .danger-confirm p{ color: var(--muted); font-size: 12.5px; }
  .danger-confirm .field{ margin: 14px 0; }
  .danger-confirm-actions{ display:flex; gap:12px; }

  /* ---------- PAYMENT METHODS ---------- */
  .payment-methods{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 20px 0; }
  @media (max-width: 420px){ .payment-methods{ grid-template-columns: 1fr; } }
  .payment-method{
    display:flex; align-items:center; justify-content:center; gap:10px; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,0.02);
    cursor:pointer; font-size: 13.5px; color: var(--muted); transition: border-color .2s ease, color .2s ease, background .2s ease;
  }
  .payment-method:hover{ border-color: rgba(46,125,255,0.4); color: var(--ink); }
  .payment-method.selected{ border-color: var(--blue); color: var(--ink); background: rgba(46,125,255,0.08); }
  .payment-method:disabled{ cursor:not-allowed; opacity:.4; }
  .payment-method:disabled:hover{ border-color: var(--line); color: var(--muted); }
  .payment-method-icon{ font-size: 17px; line-height:1; display:flex; align-items:center; }
  .payment-method-icon img{ height: 20px; width:auto; display:block; }
  .payment-note{ font-family:'JetBrains Mono'; font-size: 11px; color: var(--muted); margin-top: -6px; margin-bottom: 18px; }

  /* ---------- PAGE LOADER ---------- */
  /* Resta visibile finché la pagina non ha finito di caricare DAVVERO (evento
     "load": font, CSS e immagini inclusi), non per una durata fissa finta. */
  #page-loader{
    position: fixed; inset: 0; z-index: 9999;
    display:flex; align-items:center; justify-content:center;
    background: var(--bg);
    transition: opacity .35s ease;
  }
  #page-loader.is-hidden{ opacity: 0; pointer-events: none; }
  .page-loader-ring{
    width: 44px; height: 44px; border-radius:50%;
    border: 3px solid var(--line); border-top-color: var(--blue);
    animation: page-loader-spin 0.9s linear infinite;
  }
  @keyframes page-loader-spin{ to{ transform: rotate(360deg); } }

  /* Un indicatore "in corso" deve continuare a muoversi anche con le animazioni
     ridotte: la regola globale più sopra (transition/animation-duration:
     0.001ms su "*") altrimenti lo congela su un fotogramma fisso, facendolo
     sembrare bloccato invece che "sta ancora caricando". */
  @media (prefers-reduced-motion: reduce){
    .page-loader-ring{ animation-duration: 1.1s !important; }
  }

  /* ---------- PANNELLO MINECRAFT ---------- */
  /* .connections-card ha max-width:460px, troppo stretto per una tabella a 7
     colonne con 20 righe: questa variante la lascia occupare tutta la larghezza
     disponibile. */
  .connections-card.mc-wide-card{ max-width: 100%; }

  /* Collegamento + Carica Regali impilate a sinistra, tutorial/download a
     destra: margin-top azzerato su entrambi i rami (lo dà già .mc-config-top
     come blocco) così restano allineati in alto l'uno con l'altro. */
  .mc-config-top{ display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start; }
  .mc-config-top > .mc-config-left, .mc-config-top > .connections-card{ flex:1; min-width: 320px; margin-top:0; }
  .mc-config-left{ display:flex; flex-direction:column; gap:18px; }
  .mc-config-left .connections-card{ margin-top:0; }
  .tutorial-download-links{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
  .tutorial-download-links .btn{ justify-content:flex-start; }
  .btn-youtube{ background: var(--red); color:#fff; }
  .btn-youtube:hover{ box-shadow: 0 8px 24px rgba(255,59,59,0.35); }
  .btn.is-disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; }
  .btn.is-disabled:hover{ transform:none; box-shadow:none; }
  .tutorial-overlay-preview{ width:100%; height:auto; border-radius: 10px; border: 1px solid var(--line); display:block; }
  /* Copertina della card TntCube nel tab Giochi (al posto del solo gradiente). */
  .game-thumb-tntcube{ background-image: url('../img/minecraft/TntCube/tntcube.png'); background-size: cover; background-position: center; }
  /* Niente righe diagonali sopra l'immagine reale della copertina (restano solo
     sui game-thumb a gradiente semplice, senza immagine, delle altre card). */
  .game-thumb-tntcube::after{ content:none; }
  /* Stessa cosa per Vertical Parkour: copertina reale al posto del gradiente. */
  .game-thumb-verticalparkour{ background-image: url('../img/roblox/VerticalParkour/verticalparkour.png'); background-size: cover; background-position: center; }
  .game-thumb-verticalparkour::after{ content:none; }
  .mc-token-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin: 16px 0; }
  .mc-token-value{
    font-family:'JetBrains Mono'; font-size: 13px; background: rgba(255,255,255,0.04);
    padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); word-break: break-all;
  }

  /* Card overlay TikTok live (tab Giochi): due link OBS lunghi, su una riga
     sola con etichetta fissa + valore troncato (a differenza di
     .mc-token-value, pensato per il token Minecraft più corto). */
  .overlay-link-label{ flex:0 0 96px; font-size:13px; color: var(--muted); font-weight:600; }
  .overlay-link-row .mc-token-value{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:normal; }

  /* Anteprima live delle due pagine overlay (stessa pagina che gira in OBS,
     incorporata in un iframe): la pagina si auto-adatta già da sola alla
     dimensione del contenitore (vedi fitOverlay() in overlay/*.html), qui
     basta dargli un riquadro 16:9 con angoli arrotondati. */
  .overlay-preview-grid{ display:flex; gap:16px; flex-wrap:wrap; margin-top:20px; }
  .overlay-preview{ flex:1 1 280px; min-width:260px; }
  .overlay-preview .overlay-link-label{ flex:none; display:block; margin-bottom:8px; }
  .overlay-preview-frame{
    aspect-ratio:16/9; border-radius:12px; overflow:hidden;
    border:1px solid var(--line); background:#0a0a0a; margin-top:14px;
  }
  .overlay-preview-frame iframe{ width:100%; height:100%; border:none; display:block; }

  /* Tab Overlay: due sotto-schede (stesso pattern .mc-subtabs/.mc-subpanel
     già usato per Minecraft/Roblox) — "Classifiche & Contatori" (Top Regali/
     Top Like/Vittorie, in griglia: erano impilate a tutta colonna a
     max-width:460px ciascuna, ereditato da .connections-card, lasciando
     vuota metà pagina sugli schermi larghi) e "TTS Chat" a parte, card unica
     a piena larghezza invece che in coda alle altre nella stessa pagina. */
  .overlay-subpanel-grid:not([hidden]){
    display:grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 22px 24px; align-items:start;
  }
  .overlay-subpanel-grid > #overlay-card{ grid-column: 1 / -1; }
  .overlay-subpanel-grid .connections-card{ max-width:none; margin-top:0; }

  /* ---------- Overlay "Win: X/Y" (tab Overlay, contatore manuale) ---------- */
  .win-controls{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
  .win-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .win-row label{ font-size:13px; color: var(--muted); flex:0 0 auto; }
  .win-target-input{
    width:90px; background: rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:8px;
    padding:8px 10px; color: var(--ink); font-family:'JetBrains Mono'; font-size:13px;
  }
  .win-count-display{ font-family:'Baloo 2'; font-size:20px; }
  .win-hotkeys{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
  .win-hotkeys h4{ font-size:13.5px; margin-bottom:4px; }
  .hotkey-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; flex-wrap:wrap; }
  .hotkey-row span{ font-size:13px; color: var(--muted); }
  .hotkey-actions{ display:flex; align-items:center; gap:8px; }
  .hotkey-record-btn{ min-width:150px; font-family:'JetBrains Mono'; font-size:12px; }
  .hotkey-record-btn.is-recording{ border-color: var(--blue); color: var(--blue); }

  /* ---------- TTS Chat: ogni sezione è una "finestrella" a sé (.tts-tile,
     card con bordo rosso neon + titolo blu, stesso stile del riferimento
     mostrato dall'utente) dentro una griglia responsive, invece di un'unica
     card lunghissima con divisori interni. ---------- */
  .tts-cards-grid{
    display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap:20px; align-items:start; margin-top:22px;
  }
  .tts-tile{ border-color: rgba(255,45,59,0.35); margin-top:0; max-width:none; }
  .tts-tile > h4, .tts-tile .mc-slots-head h4{ font-size:14px; margin-bottom:12px; color: var(--blue); }
  .tts-row{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
  .tts-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:14px; align-items:end; }
  .tts-grid .field{ margin:0; }

  .tts-checkbox{ display:flex; align-items:center; gap:8px; font-size:13px; color: var(--muted); cursor:pointer; }
  .tts-checkbox input{ accent-color: var(--blue); cursor:pointer; flex-shrink:0; }
  .tts-checks{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }

  .tts-sliders{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:18px; margin-top:16px; }
  .tts-slider{ display:flex; flex-direction:column; gap:8px; font-size:13px; color: var(--muted); }
  .tts-slider strong{ color: var(--ink); font-family:'JetBrains Mono'; }
  .tts-slider input[type="range"]{ width:100%; accent-color: var(--blue); cursor:pointer; }

  /* Lingua/Voce/Leggi (tab TTS) usano lo stesso .mc-action-field a tendina
     custom di Azione/Profili di Configurazione (tab Giochi) invece del
     <select> nativo, non restilizzabile secondo il tema scuro: qui basta
     dargli la larghezza piena della griglia, il resto lo eredita già. */
  .tts-grid .mc-action-field{ width:100%; }

  .tts-special-list{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
  .tts-special-item{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    background: rgba(255,255,255,0.02); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  }
  .tts-special-item input[type="text"]{
    flex:1 1 140px; min-width:120px; background: rgba(255,255,255,0.03); border:1px solid var(--line);
    border-radius:8px; padding:8px 10px; color: var(--ink); font-family:'JetBrains Mono'; font-size:13px;
  }
  .tts-special-item .mc-action-field{ flex:1 1 140px; min-width:130px; width:auto; }
  .tts-special-item .mc-action-trigger{ font-size:12.5px; }
  .tts-special-item .tts-checkbox{ flex:0 0 auto; }
  .tts-special-remove-btn{
    flex-shrink:0; width:30px; height:30px; border-radius:8px; border:1px solid var(--line);
    background:transparent; color: var(--muted); cursor:pointer; font-size:14px; line-height:1;
    transition: border-color .2s ease, color .2s ease;
  }
  .tts-special-remove-btn:hover{ border-color: var(--red); color: var(--red); }

  /* ---------- Popup Voce (ricerca + filtro sesso/lingua + test per riga)
     al posto della tendina .mc-action-menu semplice: troppe voci di sistema
     per uno scroll piatto. Vedi renderVoiceList()/populateVoiceOptionsInto()
     in tts-panel.js. Larghezza fissa (non left/right:0 come .mc-action-menu)
     perché il trigger può essere stretto (voce dedicata per Utente Speciale)
     mentre il popup deve restare comodo da usare. ---------- */
  .tts-voice-popup{
    position:absolute; top: calc(100% + 4px); left:0; z-index:30; width:300px; max-width:80vw;
    background: var(--bg-panel); border:1px solid var(--line); border-radius:10px;
    box-shadow: 0 16px 40px rgba(6,11,24,0.5); padding:10px;
    display:flex; flex-direction:column; gap:8px;
  }
  .tts-voice-popup[hidden]{ display:none; }
  .tts-voice-search{
    width:100%; background: rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:8px;
    padding:8px 10px; color:var(--ink); font-size:12.5px; font-family:'Nunito Sans', sans-serif;
  }
  .tts-voice-search:focus{ outline:none; border-color: var(--blue); }
  .tts-voice-filters{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .tts-voice-gender-filter{ display:flex; gap:4px; }
  .tts-voice-gender-btn{
    background: rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:6px;
    padding:5px 9px; color: var(--muted); font-size:11.5px; cursor:pointer; transition: all .15s ease;
  }
  .tts-voice-gender-btn:hover{ border-color: rgba(46,125,255,0.45); color: var(--ink); }
  .tts-voice-gender-btn.is-active{ background: rgba(46,125,255,0.16); border-color: rgba(46,125,255,0.5); color: var(--blue); }
  .tts-voice-lang-filter{
    flex:1; min-width:90px; background: rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:6px;
    padding:5px 7px; color:var(--ink); font-size:11.5px; font-family:'Nunito Sans', sans-serif; cursor:pointer;
  }
  .tts-voice-lang-filter:focus{ outline:none; border-color: var(--blue); }
  .tts-voice-list{
    max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:2px;
    scrollbar-width: thin; scrollbar-color: rgba(46,125,255,0.45) transparent;
  }
  .tts-voice-list::-webkit-scrollbar{ width:8px; }
  .tts-voice-list::-webkit-scrollbar-thumb{ background: rgba(46,125,255,0.45); border-radius:999px; }
  .tts-voice-option{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    border-radius:6px; padding:7px 8px; cursor:pointer; font-size:12.5px; color:var(--ink);
  }
  .tts-voice-option:hover{ background: rgba(255,255,255,0.06); }
  .tts-voice-option.is-selected{ background: rgba(46,125,255,0.16); color: var(--blue); }
  .tts-voice-option-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tts-voice-option-lang{ color: var(--muted); font-size:11px; }
  /* Segnala le voci "Online (Natural)" (cloud, sintesi via internet): per
     leggere commenti in diretta hanno un ritardo evidente, meglio evitarle.
     Visibile sia nella lista sia nel pulsante della voce già scelta. */
  .tts-voice-cloud-badge{
    display:inline-block; flex-shrink:0; font-size:9.5px; font-weight:700; letter-spacing:.03em;
    text-transform:uppercase; color:#FF9B3E; background: rgba(255,155,62,0.14);
    border:1px solid rgba(255,155,62,0.4); border-radius:5px; padding:1px 5px; margin-left:4px;
    cursor:help;
  }
  .tts-voice-test-btn{
    flex-shrink:0; width:24px; height:24px; border-radius:6px; border:1px solid var(--line);
    background:transparent; color: var(--blue); cursor:pointer; font-size:10px; line-height:1;
    display:flex; align-items:center; justify-content:center; transition: border-color .15s ease, background .15s ease;
  }
  .tts-voice-test-btn:hover{ background: rgba(46,125,255,0.16); border-color: rgba(46,125,255,0.5); }
  .tts-voice-empty{ color: var(--muted); font-size:12px; text-align:center; padding:14px 4px; }

  /* Utenti Consentiti: categorie in OR fra loro ("Tutti gli utenti" scavalca
     le altre), vedi shouldRead()/isUserAllowedByCategory() in tts-panel.js. */
  .tts-allowed-list{ display:flex; flex-direction:column; gap:2px; margin-top:14px; }
  .tts-allowed-item{
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    padding:10px 12px; border-radius:8px; transition: background .15s ease;
  }
  .tts-allowed-item:hover{ background: rgba(255,255,255,0.03); }
  .tts-allowed-item .tts-checkbox{ color: var(--ink); font-size:13.5px; }
  .tts-allowed-sub{ display:flex; align-items:center; gap:6px; font-size:12px; color: var(--blue); flex-shrink:0; }
  .tts-allowed-sub-input{
    width:48px; background: rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:6px;
    padding:4px 6px; color: var(--ink); font-family:'JetBrains Mono'; font-size:12px; text-align:center;
  }
  .tts-allowed-sub-input:focus{ outline:none; border-color: var(--blue); }
  .tts-allowed-manage-btn{
    background:none; border:none; color: var(--blue); font-size:12px; cursor:pointer; padding:0;
    text-decoration:underline; text-underline-offset:2px;
  }
  .tts-allowed-manage-btn:hover{ color: var(--ink); }

  .hotkey-clear-btn{ font-size:12px; padding:8px 10px; }
  .mc-slots-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom: 14px; }
  .mc-slots-actions{ display:flex; gap:10px; flex-wrap:wrap; }
  .mc-table-input{
    width:100%; min-width: 84px; background: rgba(255,255,255,0.03); border:1px solid var(--line);
    border-radius:6px; padding:7px 9px; color:var(--ink); font-size:12.5px; font-family:'Nunito Sans', sans-serif;
  }
  .mc-table-input:focus{ outline:none; border-color: var(--blue); }
  .mc-panel-save-btn{ margin-top: 18px; }

  /* ---------- GIFT COMBO (picker regalo icona+nome+diamanti) ---------- */
  .gift-combo-trigger{
    width:100%; display:flex; align-items:center; gap:8px; text-align:left;
    background: rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:6px;
    padding:6px 9px; color:var(--ink); font-size:12.5px; font-family:'Nunito Sans', sans-serif; cursor:pointer;
    transition: border-color .2s ease;
  }
  .gift-combo-trigger:hover, .gift-combo-trigger.is-open{ border-color: rgba(46,125,255,0.45); }
  .gift-combo-icon{ width:22px; height:22px; border-radius:4px; object-fit:cover; flex-shrink:0; background: rgba(255,255,255,0.06); }
  .gift-combo-icon-empty{ display:inline-block; }
  .gift-combo-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .gift-combo-cost{ font-family:'JetBrains Mono'; font-size:11px; color: var(--muted); flex-shrink:0; }
  .gift-combo-placeholder{ color: var(--muted); }

  /* ---------- AZIONE (tendina custom, non <select> nativo) ----------
     Il <select> nativo su Windows/Chrome, dentro una grid di card, apriva un
     popup enorme quasi vuoto (bug di rendering del browser) e non poteva comunque
     essere restilizzato secondo il tema scuro del pannello: stesso motivo per cui
     il picker regalo qui sopra usa già un trigger+menu custom invece di un select. */
  .mc-action-field{ position:relative; width:100%; min-width: 84px; }
  .mc-action-trigger{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
    background: rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:6px;
    padding:7px 9px; color:var(--ink); font-size:12.5px; font-family:'Nunito Sans', sans-serif; cursor:pointer;
    transition: border-color .2s ease;
  }
  .mc-action-trigger:hover, .mc-action-trigger[aria-expanded="true"]{ border-color: rgba(46,125,255,0.45); }
  .mc-action-trigger-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mc-action-trigger-caret{ color: var(--muted); font-size:10px; flex-shrink:0; }
  .mc-action-menu{
    position:absolute; top: calc(100% + 4px); left:0; right:0; z-index:30;
    background: var(--bg-panel); border:1px solid var(--line); border-radius:10px;
    box-shadow: 0 16px 40px rgba(6,11,24,0.5); padding:6px;
    max-height:240px; overflow-y:auto;
    scrollbar-width: thin; scrollbar-color: rgba(46,125,255,0.45) transparent;
  }
  .mc-action-menu[hidden]{ display:none; }
  .mc-action-menu::-webkit-scrollbar{ width:8px; }
  .mc-action-menu::-webkit-scrollbar-thumb{ background: rgba(46,125,255,0.45); border-radius:999px; }
  .mc-action-option{
    display:block; width:100%; text-align:left; background:none; border:none; border-radius:6px;
    padding:8px 10px; color:var(--ink); font-size:12.5px; font-family:'Nunito Sans', sans-serif; cursor:pointer;
  }
  .mc-action-option:hover{ background: rgba(255,255,255,0.06); }
  .mc-action-option.is-selected{ background: rgba(46,125,255,0.16); color: var(--blue); }

  /* Modale a griglia per la scelta del regalo (icona grande + nome + diamanti). */
  .gift-modal-overlay{
    position:fixed; inset:0; z-index:80; background: rgba(6,11,24,0.75); backdrop-filter: blur(4px);
    display:flex; align-items:flex-start; justify-content:center; padding: 6vh 20px;
    overflow-y:auto; overflow-x:hidden;
  }
  .gift-modal-overlay[hidden]{ display:none; }
  .gift-modal{
    position:relative; width:100%; max-width:640px; box-sizing:border-box;
    background: var(--bg-panel); border:1px solid var(--line); border-radius:20px;
    box-shadow: 0 24px 60px rgba(6,11,24,0.6); padding: 28px 28px 22px;
  }
  .gift-modal-close{
    position:absolute; top:18px; right:18px; background:transparent; border:none;
    color: var(--muted); font-size:16px; cursor:pointer; line-height:1; padding:6px;
  }
  .gift-modal-close:hover{ color: var(--ink); }
  .gift-modal-title{ font-family:'Baloo 2'; font-size:22px; margin-bottom:4px; padding-right:30px; }
  .gift-modal-subtitle{ color: var(--muted); font-size:13.5px; margin-bottom:18px; }
  .gift-modal-search{
    width:100%; background: rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:10px;
    padding:11px 14px; color:var(--ink); font-size:14px; font-family:'Nunito Sans', sans-serif; margin-bottom:20px;
  }
  .gift-modal-search:focus{ outline:none; border-color: var(--blue); }
  .gift-modal-grid{
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px 12px;
    max-height:52vh; overflow-y:auto; overflow-x:hidden; padding: 4px 14px 4px 2px;
    scrollbar-width: thin; scrollbar-color: rgba(46,125,255,0.45) transparent;
  }
  .gift-modal-grid::-webkit-scrollbar{ width:8px; }
  .gift-modal-grid::-webkit-scrollbar-track{ background: transparent; }
  .gift-modal-grid::-webkit-scrollbar-thumb{ background: rgba(46,125,255,0.45); border-radius:999px; }
  .gift-modal-grid::-webkit-scrollbar-thumb:hover{ background: rgba(46,125,255,0.7); }
  @media (max-width: 560px){ .gift-modal-grid{ grid-template-columns: repeat(3, 1fr); } }
  .gift-modal-item{
    display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
    background:none; border:none; border-radius:12px; padding:10px 6px; color:var(--ink); cursor:pointer;
    transition: background .15s ease, transform .15s ease;
  }
  .gift-modal-item:hover{ background: rgba(255,255,255,0.06); transform: translateY(-2px); }
  .gift-modal-item-icon{ width:56px; height:56px; border-radius:12px; object-fit:cover; background: rgba(255,255,255,0.06); }
  .gift-modal-item-icon-empty{ display:inline-block; }
  .gift-modal-item-name{ font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
  .gift-modal-item-cost{ font-family:'JetBrains Mono'; font-size:11px; color: var(--muted); }
  .gift-modal-empty{ grid-column: 1 / -1; padding:30px 8px; font-size:13px; color: var(--muted); text-align:center; }

  /* Piccola modale nostra per chiedere un nome o confermare un'eliminazione,
     al posto di window.prompt()/window.confirm(). Resta nel DOM anche chiusa:
     la visibilità è su opacità/scala (classe is-open) per poterla animare. */
  .mc-prompt-overlay{
    position:fixed; inset:0; z-index:90; background: rgba(6,11,24,0.75); backdrop-filter: blur(4px);
    display:flex; align-items:center; justify-content:center; padding: 20px;
    opacity:0; pointer-events:none; transition: opacity .16s ease;
  }
  .mc-prompt-overlay.is-open{ opacity:1; pointer-events:auto; }
  .mc-prompt-modal{
    width:100%; max-width:360px; box-sizing:border-box;
    background: var(--bg-panel); border:1px solid var(--line); border-radius:16px;
    box-shadow: 0 24px 60px rgba(6,11,24,0.6); padding: 24px;
    transform: scale(.94) translateY(8px); transition: transform .16s ease;
  }
  .mc-prompt-overlay.is-open .mc-prompt-modal{ transform: scale(1) translateY(0); }
  .mc-prompt-label{ display:block; font-size:13.5px; color: var(--muted); margin-bottom:10px; }
  .mc-prompt-input{
    width:100%; box-sizing:border-box; background: rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:10px;
    padding:11px 14px; color:var(--ink); font-size:14px; font-family:'Nunito Sans', sans-serif; margin-bottom:18px;
  }
  .mc-prompt-input:focus{ outline:none; border-color: var(--blue); }
  .mc-prompt-actions{ display:flex; justify-content:flex-end; gap:10px; }
  .mc-prompt-actions .btn-danger{ background: var(--red); color:#fff; border-color: var(--red); }
  .mc-prompt-actions .btn-danger:hover{ box-shadow: 0 8px 24px rgba(255,59,59,0.35); }

  /* Variante rossa della stessa modale, per conferme distruttive/irreversibili
     (es. eliminare una riga dalla tab Abbonamenti): bordo e titolo rossi invece
     del grigio neutro di default, per farla leggere subito come pericolosa
     prima ancora di leggere il testo. */
  .mc-prompt-modal.is-danger{ border-color: var(--red); box-shadow: 0 24px 60px rgba(255,45,59,0.25); }
  .mc-prompt-label.is-danger{ color: var(--red); font-weight:700; }

  /* Lista di opzioni verticale nella mc-prompt-modal (es. scelta del metodo di
     pagamento nel pannello admin): stessi .btn, ma a piena larghezza e allineati
     a sinistra invece che centrati come i pulsanti normali. */
  .mc-prompt-options{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
  .mc-prompt-options .btn{ width:100%; justify-content:flex-start; box-sizing:border-box; }
  .mc-prompt-options .btn-outline.is-trial{ border-style:dashed; color: var(--muted); }

  /* Popup dettaglio utente (tab Utenti del pannello admin, click su una riga):
     stesso overlay/animazione di .mc-prompt-overlay, ma più largo e con una
     testata propria (email a sinistra, chiudi a destra) invece del titolo
     centrato della mc-prompt-modal normale. */
  .user-detail-modal{ max-width: 620px; max-height: 86vh; overflow-y: auto; }
  .user-detail-head{
    display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
    margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
  }
  .user-detail-email{ font-family:'Baloo 2'; font-size: 18px; font-weight:700; word-break: break-all; }
  .user-detail-close{
    flex-shrink:0; width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
    background: transparent; color: var(--muted); font-size:15px; line-height:1; cursor:pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
  }
  .user-detail-close:hover{ color: var(--ink); border-color: var(--red); background: rgba(255,59,59,0.1); }
  .user-detail-section-title{
    font-family:'JetBrains Mono'; font-size: 12px; color: var(--muted); text-transform:uppercase;
    letter-spacing:0.05em; margin: 22px 0 12px;
  }
  .user-detail-section-title:first-of-type{ margin-top:0; }
  .user-detail-loading{ color: var(--muted); font-size: 14px; padding: 12px 0; }
  .user-detail-empty{ color: var(--muted); font-size: 13.5px; padding: 4px 0; }
  .user-detail-total{ margin-top:12px; font-size: 14px; }
  .user-detail-total strong{ font-family:'Baloo 2'; font-size:17px; }

  /* Sotto-tab Configurazione/Sessione di Gioco dentro il tab Minecraft. */
  .mc-subtabs{ display:flex; gap:8px; margin: 18px 0 26px; border-bottom: 1px solid var(--line); }
  .mc-subtab-btn{
    background:none; border:none; color: var(--muted); font-family:'Nunito Sans', sans-serif;
    font-size: 14px; font-weight:600; padding: 10px 10px; cursor:pointer; border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
  }
  .mc-subtab-btn:hover{ color: var(--ink); }
  .mc-subtab-btn.active{ color: var(--ink); border-bottom-color: var(--blue); text-shadow: 0 0 18px rgba(41,98,255,0.5); }
  .mc-subpanel[hidden]{ display:none; }

  /* Griglia di card per i 20 slot e gli eventi aggiuntivi (v2): rimpiazza la
     tabella della v1, troppo stretta per Modalità di Esecuzione + Effetti. */
  .mc-slots-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:16px; }
  .mc-slot-card{
    border:1px solid var(--line); border-radius:12px; padding:16px; background: rgba(255,255,255,0.02);
    display:flex; flex-direction:column; gap:12px;
  }
  /* Tutta l'intestazione (non solo l'iconcina ⠿) è il punto da tenere premuto
     per trascinare/riordinare lo slot (vedi initSlotCardDrag in
     js/roblox-panel.js e js/minecraft-panel.js): cursor:grab segnala che si
     può trascinare, touch-action:none impedisce allo scroll della pagina di
     "rubare" il gesto su schermi touch, user-select:none evita che
     tenere-premuto-e-trascinare selezioni il testo del titolo invece di
     spostare la card (comportamento predefinito del browser altrimenti). */
  .mc-slot-card-head{
    display:flex; align-items:center; justify-content:space-between;
    cursor:grab; touch-action:none; user-select:none;
  }
  .mc-slot-card-head:active{ cursor:grabbing; }
  .mc-slot-card-head-left{ display:flex; align-items:center; gap:6px; min-width:0; }
  .mc-slot-card-head h4{ margin:0; font-size:14px; }
  .mc-slot-drag-handle{ color: var(--muted); font-size:16px; line-height:1; flex-shrink:0; }
  .mc-slot-remove-btn{
    background:none; border:none; color: var(--muted); cursor:pointer; font-size:16px; line-height:1; padding:2px 6px;
  }
  .mc-slot-remove-btn:hover{ color: var(--ink); }
  .mc-slot-card.mc-slot-card-dragging{ opacity:0.5; border-style:dashed; }
  .mc-field-label{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color: var(--muted); margin-bottom:4px; display:block; }
  .mc-effects-box{ border-top:1px solid var(--line); padding-top:10px; display:flex; flex-direction:column; gap:8px; }
  /* Card "Coda delle Azioni" nella tab Sessione di Gioco. */
  .mc-queue-count{ font-family:'Baloo 2', sans-serif; font-size:40px; font-weight:700; margin-top:10px; }
  .mc-queue-label{ color: var(--muted); font-size:13px; }
  .mc-queue-reset-btn{ margin-top:16px; }
  .mc-empty-state{ text-align:center; color: var(--muted); padding: 20px 0; }

  /* Statistiche live della sessione in corso (regali/diamanti/messaggi/durata),
     mostrate dentro la card "Controllo Sessione" solo mentre si è collegati. */
  .mc-session-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap:16px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
  .mc-stat-value{ font-family:'Baloo 2', sans-serif; font-size:24px; font-weight:700; }
  .mc-stat-label{ color: var(--muted); font-size:12px; margin-top:2px; }

  /* Utility usate al posto di style="..." inline: la CSP del sito (style-src
     'self', niente unsafe-inline) blocca qualsiasi attributo/assegnazione style
     scritta a mano, sia in markup che via JS (.style.xxx). */
  .mc-hidden{ display:none !important; }
  .mc-input-sm{ max-width: 90px; }
  .mc-input-md{ max-width: 120px; }
  .mc-input-lg{ max-width: 280px; }
  .mc-mt-sm{ margin-top: 6px; }
  .mc-field-hint{ text-transform:none; margin-top:4px; }

  /* ---------- DASHBOARD: layout dedicato (solo dashboard.html, via body.page-dashboard) ----------
     Stessa palette premium della home, ridefinita qui sopra le variabili globali
     così ogni componente esistente (sidebar, card, tabelle, badge, form, modali)
     la eredita in automatico SOLO nella dashboard, senza toccare admin.html o
     le altre pagine del sito che riusano le stesse classi. */
  body.page-dashboard{
    --bg: #090909;
    --bg-panel: #141414;
    --bg-panel-2: #1a1a1a;
    --blue: #2962FF;
    --red: #FF2D3B;
    --ink: #FFFFFF;
    --muted: #B7B7B7;
    --line: rgba(255,255,255,0.08);
    background: var(--bg);
  }

  body.page-dashboard .app-sidebar{
    background: var(--bg-panel);
    box-shadow: 1px 0 0 var(--line);
  }
  body.page-dashboard .app-sidebar-brand{ border-bottom-color: var(--line); }

  body.page-dashboard .dash-nav-btn{ position:relative; }
  body.page-dashboard .dash-nav-btn.active{
    background: rgba(41,98,255,0.14);
  }
  body.page-dashboard .dash-nav-btn.active::before{
    content:''; position:absolute; left:-18px; top:50%; transform: translateY(-50%);
    width:3px; height:18px; border-radius: 0 3px 3px 0; background: var(--blue);
  }
  @media (max-width: 860px){ body.page-dashboard .dash-nav-btn.active::before{ display:none; } }

  body.page-dashboard .dash-avatar{ color: var(--bg); }

  body.page-dashboard .badge-admin{ color: var(--red); border-color: rgba(255,45,59,0.4); background: rgba(255,45,59,0.08); }
  body.page-dashboard .badge-active{ color: var(--blue); border-color: rgba(41,98,255,0.4); background: rgba(41,98,255,0.08); }
  body.page-dashboard .badge-trial{ color: #FFB020; border-color: rgba(255,176,32,0.4); background: rgba(255,176,32,0.08); }

  body.page-dashboard .connections-card,
  body.page-dashboard .sub-card,
  body.page-dashboard .mc-slot-card{
    border-radius: 16px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  }
  body.page-dashboard .connections-card:hover,
  body.page-dashboard .sub-card:hover{
    border-color: rgba(255,255,255,0.16);
    box-shadow: 0 18px 40px rgba(0,0,0,0.4);
  }

  body.page-dashboard .admin-stat{
    border-radius: 14px;
    transition: border-color .25s ease, transform .25s ease;
  }
  body.page-dashboard .admin-stat:hover{ border-color: rgba(255,255,255,0.18); transform: translateY(-2px); }

  body.page-dashboard .admin-table tbody tr,
  body.page-dashboard #mc-sessions-table tbody tr,
  body.page-dashboard #billing-history-table tbody tr{
    transition: background .15s ease;
  }
  body.page-dashboard .admin-table tbody tr:hover,
  body.page-dashboard #mc-sessions-table tbody tr:hover,
  body.page-dashboard #billing-history-table tbody tr:hover{
    background: rgba(255,255,255,0.03);
  }

  body.page-dashboard .danger-zone{ border-top-color: rgba(255,45,59,0.3); }
  body.page-dashboard .danger-zone .btn-danger{ border-color: var(--red); color: var(--red); }
  body.page-dashboard .danger-zone .btn-danger:hover{ background: rgba(255,45,59,0.1); }
  body.page-dashboard .danger-confirm{ border-color: rgba(255,45,59,0.35); background: rgba(255,45,59,0.06); }
  body.page-dashboard .form-message.is-error{ background: rgba(255,45,59,0.10); border-color: rgba(255,45,59,0.4); }
  body.page-dashboard .form-message.is-success{ background: rgba(41,98,255,0.10); border-color: rgba(41,98,255,0.4); }

  body.page-dashboard .payment-method:hover{ border-color: rgba(41,98,255,0.4); }
  body.page-dashboard .payment-method.selected{ border-color: var(--blue); background: rgba(41,98,255,0.08); }

  body.page-dashboard .field input:focus{ background: rgba(41,98,255,0.05); }

  body.page-dashboard .game-card:hover,
  body.page-dashboard .game-platform-tile:hover{ box-shadow: 0 18px 40px rgba(0,0,0,0.5); }

  body.page-dashboard .mc-action-menu,
  body.page-dashboard .gift-modal,
  body.page-dashboard .mc-prompt-modal,
  body.page-dashboard .lang-dropdown-list{
    box-shadow: 0 20px 44px rgba(0,0,0,0.5);
  }
  body.page-dashboard .gift-modal-overlay,
  body.page-dashboard .mc-prompt-overlay{ background: rgba(0,0,0,0.75); }
  body.page-dashboard .mc-action-menu{ scrollbar-color: rgba(41,98,255,0.45) transparent; }
  body.page-dashboard .mc-action-menu::-webkit-scrollbar-thumb{ background: rgba(41,98,255,0.45); }
  body.page-dashboard .mc-action-option.is-selected{ background: rgba(41,98,255,0.16); color: var(--blue); }
  body.page-dashboard .gift-combo-trigger:hover, body.page-dashboard .gift-combo-trigger.is-open{ border-color: rgba(41,98,255,0.45); }
  body.page-dashboard .mc-action-trigger:hover, body.page-dashboard .mc-action-trigger[aria-expanded="true"]{ border-color: rgba(41,98,255,0.45); }

  body.page-dashboard .toast{ box-shadow: 0 18px 40px rgba(0,0,0,0.5); }