: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: #000000;
    --bg-panel: #100918;
    --bg-panel-2: #150C20;
    --blue: #A855F7;
    --red: #7C1FD4;
    --ink: #F1E7FF;
    --muted: #B6A0CF;
    --line: rgba(214,190,245,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: #0E0518; }

  /* 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(14,6,23,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: #F1E7FF !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(168,85,247,0.35);
  }
  .nav-cta:hover{
    box-shadow: 0 0 30px rgba(168,85,247,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(185,107,250,0.35); background: rgba(185,107,250,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;
  }
  /* display:inline-flex sopra vince sempre sul display:none di default del
     browser per l'attributo hidden (una regola d'autore batte sempre quella
     dello user agent, a parità o meno di specificità): senza questa riga,
     un <button class="btn ..." hidden> impostato via JS (es. i pulsanti
     "Reset" overlay riservati agli admin) resterebbe visibile lo stesso.
     Stesso problema/stessa soluzione già applicata a .dash-nav-btn[hidden]. */
  .btn[hidden]{ display:none; }
  .btn:hover{ transform: translateY(-2px); }
  .btn-primary{ background: var(--blue); color: #F1E7FF; }
  .btn-primary:hover{ box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 24px rgba(168,85,247,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(124,31,212,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(214,190,245,0.03) 0 1px, transparent 1px 42px),
      linear-gradient(180deg, #170B27 0%, #0E0518 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(185,107,250,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(185,107,250,0.14); color: var(--blue); border: 1px solid rgba(185,107,250,0.4); left: 20%; }
  .bubble.penalty{ background: rgba(124,31,212,0.14); color: var(--red); border: 1px solid rgba(124,31,212,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(185,107,250,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(124,31,212,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(185,107,250,0.45);
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(7,2,13,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(185,107,250,0.45); transform: translateY(-6px); box-shadow: 0 16px 34px rgba(7,2,13,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(7,2,13,0.75); color:#F1E7FF; border-color: rgba(214,190,245,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(185,107,250,0.45); }
  .platform-game-card[open]{ border-color: rgba(185,107,250,0.5); box-shadow: 0 16px 34px rgba(7,2,13,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(185,107,250,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: #0E0518; 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: #0E0518; }
  .price-card .btn:hover{ box-shadow: 0 0 26px rgba(185,107,250,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(185,107,250,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(185,107,250,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: #000000;
    --bg-panel: #100918;
    --bg-panel-2: #150C20;
    --blue: #A855F7;
    --red: #7C1FD4;
    --ink: #F1E7FF;
    --muted: #B6A0CF;
    --line: rgba(214,190,245,0.08);
    background: var(--bg);
  }
  body.page-home header{ background: rgba(0,0,0,0.78); }
  body.page-home .nav-cta{ background: var(--blue); color:#F1E7FF !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:#F1E7FF; border-color: var(--red);
  }
  body.page-home .hero-ctas .btn-outline:hover{ background:#6817B8; border-color:#6817B8; }
  body.page-home .hero-ctas .btn-primary{ background: var(--blue); color:#F1E7FF; }
  body.page-home .hero-ctas .btn-primary:hover{ box-shadow: 0 10px 26px rgba(168,85,247,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(168,85,247,0.6),
      707.4px 380.9px 0 rgba(124,31,212,0.55),
      4.8px 127.1px 0 rgba(214,190,245,0.4),
      1126px 130.2px 0 rgba(168,85,247,0.6),
      534.4px 270.4px 0 rgba(124,31,212,0.55),
      637.5px 108.3px 0 rgba(214,190,245,0.4),
      42.7px 423.5px 0 rgba(168,85,247,0.6),
      1102.8px 105.1px 0 rgba(124,31,212,0.55),
      686.7px 388.1px 0 rgba(214,190,245,0.4),
      1006.9px 183.2px 0 rgba(168,85,247,0.6),
      442.3px 47.8px 0 rgba(124,31,212,0.55),
      39.6px 155px 0 rgba(214,190,245,0.4),
      1127px 318.8px 0 rgba(168,85,247,0.6),
      520.7px 184px 0 rgba(124,31,212,0.55),
      824.4px 8px 0 rgba(214,190,245,0.4),
      452.7px 16.4px 0 rgba(168,85,247,0.6),
      783px 453.8px 0 rgba(124,31,212,0.55),
      287.5px 328.9px 0 rgba(214,190,245,0.4),
      986.6px 284.6px 0 rgba(168,85,247,0.6),
      880.3px 453.4px 0 rgba(124,31,212,0.55),
      130px 125.4px 0 rgba(214,190,245,0.4),
      316.8px 344.2px 0 rgba(168,85,247,0.6),
      403.9px 467.3px 0 rgba(124,31,212,0.55),
      656.1px 121.9px 0 rgba(214,190,245,0.4),
      774px 1.7px 0 rgba(168,85,247,0.6),
      549.5px 247.8px 0 rgba(124,31,212,0.55),
      249.1px 466.9px 0 rgba(214,190,245,0.4),
      764.6px 151.1px 0 rgba(168,85,247,0.6),
      679.3px 124px 0 rgba(124,31,212,0.55),
      615.2px 365.7px 0 rgba(214,190,245,0.4),
      1031.3px 184.7px 0 rgba(168,85,247,0.6),
      220.4px 34.8px 0 rgba(124,31,212,0.55),
      94.6px 449px 0 rgba(214,190,245,0.4),
      352.3px 46.7px 0 rgba(168,85,247,0.6),
      176px 393px 0 rgba(124,31,212,0.55),
      177.8px 194.1px 0 rgba(214,190,245,0.4),
      933.9px 53.6px 0 rgba(168,85,247,0.6),
      520px 110.1px 0 rgba(124,31,212,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(168,85,247,0.6),
      6px 430.9px 0 rgba(124,31,212,0.55),
      576px 113.3px 0 rgba(214,190,245,0.4),
      739.3px 293.9px 0 rgba(168,85,247,0.6),
      267.4px 458.8px 0 rgba(124,31,212,0.55),
      765.9px 96.3px 0 rgba(214,190,245,0.4),
      270px 94.8px 0 rgba(168,85,247,0.6),
      132.9px 195.6px 0 rgba(124,31,212,0.55),
      131.4px 121.6px 0 rgba(214,190,245,0.4),
      351.3px 359.5px 0 rgba(168,85,247,0.6),
      771.3px 119.1px 0 rgba(124,31,212,0.55),
      336.1px 161.7px 0 rgba(214,190,245,0.4),
      68.5px 369.7px 0 rgba(168,85,247,0.6),
      475.8px 86.3px 0 rgba(124,31,212,0.55),
      393.9px 347.4px 0 rgba(214,190,245,0.4),
      44.1px 310.7px 0 rgba(168,85,247,0.6),
      383.8px 7.2px 0 rgba(124,31,212,0.55),
      43.2px 375.9px 0 rgba(214,190,245,0.4),
      1081.8px 227.6px 0 rgba(168,85,247,0.6),
      272.7px 422.4px 0 rgba(124,31,212,0.55),
      192.5px 217.2px 0 rgba(214,190,245,0.4),
      675.4px 85.1px 0 rgba(168,85,247,0.6),
      323px 229.5px 0 rgba(124,31,212,0.55),
      834.6px 199.9px 0 rgba(214,190,245,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(124,31,212,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(168,85,247,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, #180D25, #050308);
    border: 1px solid rgba(214,190,245,0.08);
    box-shadow: 0 60px 110px -30px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(214,190,245,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%, #443355, #0C0612 75%);
    box-shadow: 0 0 0 2px rgba(214,190,245,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(214,190,245,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(214,190,245,0.16) 0%, rgba(214,190,245,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(214,190,245,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(168,85,247,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(168,85,247,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(168,85,247,0.14);
  }
  body.page-home .stat-card:nth-child(2) .stat-card-icon{ background: rgba(124,31,212,0.14); }
  body.page-home .stat-card:nth-child(3) .stat-card-icon{ background: rgba(214,190,245,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(168,85,247,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(168,85,247,0.12); margin-bottom:24px;
  }
  body.page-home .value-card:nth-child(2) .value-card-icon{ background: rgba(124,31,212,0.12); }
  body.page-home .value-card:nth-child(3) .value-card-icon{ background: rgba(214,190,245,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(168,85,247,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(0,0,0,0.78); color:#F1E7FF;
    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(168,85,247,0.14);
  }
  body.page-home .feat-row:nth-child(3n+2) .feat-row-icon{ background: rgba(124,31,212,0.14); color: var(--red); }
  body.page-home .feat-row:nth-child(3n+3) .feat-row-icon{ background: rgba(214,190,245,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(168,85,247,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(168,85,247,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(168,85,247,0.16), transparent 55%),
      radial-gradient(circle at 76% 82%, rgba(124,31,212,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(168,85,247,0.45), rgba(124,31,212,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(124,31,212,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(124,31,212,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(168,85,247,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(168,85,247,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(168,85,247,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(124,31,212,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(124,31,212,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 "TikForge"
     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 "TikForge". */
  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(124,31,212,0.25)) drop-shadow(0 0 8px rgba(168,85,247,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(124,31,212,0.4)) drop-shadow(0 0 14px rgba(168,85,247,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(168,85,247,0.55)) drop-shadow(3px 0 10px rgba(124,31,212,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(168,85,247,0.4); }
  body.page-home .hero-ctas .btn-primary:hover{ box-shadow: 0 0 36px rgba(168,85,247,0.6); }
  body.page-home .hero-ctas .btn-outline{ box-shadow: 0 0 26px rgba(124,31,212,0.4); }
  body.page-home .hero-ctas .btn-outline:hover{ box-shadow: 0 0 36px rgba(124,31,212,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:#F1E7FF; border:none; box-shadow: 0 0 26px rgba(124,31,212,0.45); }
  body.page-home .btn-neon-red:hover{ background:#6817B8; box-shadow: 0 0 38px rgba(124,31,212,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(168,85,247,0.35); }
  body.page-home .btn-neon-blue-outline svg{ color: var(--blue); }
  body.page-home .btn-neon-blue-outline:hover{ background: rgba(168,85,247,0.1); box-shadow: 0 0 38px rgba(168,85,247,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(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 32%, rgba(0,0,0,0.3) 68%, rgba(0,0,0,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:#F1E7FF;
    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:#F1E7FF; width:5px; height:5px; }
  body.page-home .live-viewers{
    display:flex; align-items:center; gap:5px; background: rgba(0,0,0,0.6); color:#F1E7FF;
    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(0,0,0,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:#F1E7FF; }
  body.page-home .live-notif-text span{ display:block; font-size:9.5px; color: rgba(214,190,245,0.62); }
  body.page-home .live-notif-gift{ display:flex; align-items:center; gap:3px; font-size:12px; font-weight:700; color:#B44DF0; 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(0,0,0,0.62); backdrop-filter: blur(4px); border-radius:10px; padding:10px 11px; border:1px solid rgba(214,190,245,0.08); }
  body.page-home .live-box-title{ font-size:9.5px; font-weight:700; letter-spacing:.06em; color: rgba(214,190,245,0.55); margin-bottom:8px; }
  body.page-home .donor-row{ display:flex; align-items:center; gap:6px; font-size:10.5px; color:#F1E7FF; 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:#050308; background: rgba(214,190,245,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:#C6B2E0; }
  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(214,190,245,0.7); font-size:9.5px; flex-shrink:0; }
  body.page-home .donor-score svg{ width:9px; height:9px; color:#B44DF0; }
  body.page-home .live-goal p{ font-size:10px; color: rgba(214,190,245,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:#B44DF0; }
  body.page-home .live-goal-num .of{ font-size:11px; color:#F1E7FF; }
  body.page-home .live-goal-bar{ height:5px; border-radius:999px; background: rgba(214,190,245,0.15); overflow:hidden; }
  body.page-home .live-goal-fill{ height:100%; background:#B44DF0; 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:#F1E7FF; 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 #F1E7FF;
  }
  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:#F1E7FF; font-size:10px; font-weight:800; line-height:1;
    display:flex; align-items:center; justify-content:center; border:1.5px solid #050308;
  }
  body.page-home .live-icon.gift-icon{
    width:26px; height:26px; border-radius:50%; background:#B44DF0;
    display:flex; align-items:center; justify-content:center; box-shadow:0 0 12px rgba(180,77,240,0.6);
  }
  body.page-home .live-icon.gift-icon svg{ color:#F1E7FF; 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(0,0,0,0.55); backdrop-filter: blur(4px);
    border-radius:999px; padding:8px 12px; font-size:10.5px; color: rgba(214,190,245,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:#F1E7FF; font-family:'Baloo 2'; font-weight:700; font-size:14px;
    display:flex; align-items:center; justify-content:center; box-shadow: 0 0 16px rgba(124,31,212,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(214,190,245,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, #2C0A4E 0%, #130520 42%, #0C0612 100%);
    border: 1px solid rgba(124,31,212,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, #B980F0, var(--red));
    box-shadow: 0 0 50px rgba(124,31,212,0.55), inset 0 -8px 16px rgba(0,0,0,0.25), inset 0 8px 16px rgba(214,190,245,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:#F1E7FF; }
  body.page-home .feature-banner-text h3{ font-size: clamp(21px,2.6vw,27px); color:#F1E7FF; 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(214,190,245,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é TikForge": 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(124,31,212,0.4); color: var(--red); box-shadow: 0 0 18px rgba(124,31,212,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(124,31,212,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(124,31,212,0.32); box-shadow: 0 0 60px rgba(124,31,212,0.16), 0 30px 80px -20px rgba(0,0,0,0.6); }
  body.page-home .price-card:hover{ box-shadow: 0 0 80px rgba(124,31,212,0.28), 0 40px 90px -16px rgba(168,85,247,0.25); }
  body.page-home .price-card::before{ background: var(--red); color:#F1E7FF; box-shadow: 0 0 16px rgba(124,31,212,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(185,107,250,0.08), 0 0 50px rgba(124,31,212,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(124,31,212,0.10); border: 1px solid rgba(124,31,212,0.4); color: #E3C8FF;
    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: #C084FC; }
  .field input[type="email"],
  .field input[type="password"],
  .field input[type="text"],
  .field input[type="number"]{
    background: rgba(214,190,245,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(185,107,250,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(214,190,245,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(185,107,250,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(214,190,245,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:#F1E7FF; 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(23,10,40,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(185,107,250,0.25)) drop-shadow(0 0 34px rgba(124,31,212,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(214,190,245,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(185,107,250,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(7,2,13,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(214,190,245,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(214,190,245,0.04); }
  .dash-nav-btn.active{ color: var(--ink); background: rgba(185,107,250,0.12); }
  .dash-nav-btn .nav-icon{ width:18px; height:18px; flex-shrink:0; opacity:.85; }
  .dash-nav-btn[hidden]{ display:none; }
  /* Pallino "nuovi annunci" accanto ad Aggiornamenti: rosso vero (non
     var(--red), che nel tema di questo sito è in realtà un viola scuro usato
     per le azioni distruttive) — qui serve un colore che stacchi dalla
     palette viola per farsi notare come notifica. */
  .dash-nav-dot{
    width:8px; height:8px; border-radius:50%; background:#FF3B30;
    box-shadow: 0 0 6px 1px rgba(255,59,48,0.7);
    flex-shrink:0;
  }
  .dash-nav-dot[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:#7C3AED; color:#F1E7FF !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(214,190,245,0.28); }
  .app-overlay-btn[data-connected="1"]{ background: var(--blue); border-color: var(--blue); color:#F1E7FF; }
  .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:#0E0518;
  }
  .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(124,31,212,0.4); background: rgba(124,31,212,0.08); }
  .badge-active{ color: var(--blue); border-color: rgba(185,107,250,0.4); background: rgba(185,107,250,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(168,85,247,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; }

  /* Tab "Aggiornamenti": elenco a piena larghezza (non una griglia di card
     come .connections-card, i messaggi variano troppo in lunghezza). */
  .announcement-list{ display:flex; flex-direction:column; gap:14px; }
  .announcement-item{
    border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px;
    background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  }
  .announcement-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:10px; }
  .announcement-head h3{ font-size:15px; }
  .announcement-date{ color: var(--muted); font-size: 12px; font-family:'JetBrains Mono'; white-space:nowrap; }
  .announcement-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
  .announcement-category{
    display:inline-block; padding:3px 10px; border-radius:999px;
    background: rgba(185,107,250,0.12); border:1px solid rgba(185,107,250,0.35);
    color:#E6D5FF; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.02em;
  }
  .announcement-version{
    display:inline-block; padding:3px 10px; border-radius:999px;
    background: rgba(255,255,255,0.06); border:1px solid var(--line);
    color: var(--muted); font-size:11px; font-weight:600; font-family:'JetBrains Mono';
  }
  .announcement-body{ color: var(--muted); font-size: 13.5px; line-height:1.6; white-space:pre-wrap; }

  .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(124,31,212,0.10); border:1px solid rgba(124,31,212,0.4); color:#E3C8FF; }
  .form-message.is-success{ background: rgba(185,107,250,0.10); border:1px solid rgba(185,107,250,0.4); color:#E6D5FF; }

  /* ---------- 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(7,2,13,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(124,31,212,0.45); background: rgba(124,31,212,0.12); color:#E3C8FF; }
  @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); }
  /* Tabella Azioni (tab Azioni & Eventi, admin): colonna checkbox/icona strette
     e pulsante di ordinamento per Nome dentro il suo <th>, stesso font della
     riga di intestazione .admin-table th ma esplicito perché un <button> non
     eredita il font di default. */
  .ae-col-check{ width: 40px; text-align:center; }
  /* Allargata da 52 a 130px: ora ci stanno i 4 pulsanti azione per riga
     (Play/Modifica/Duplica/Elimina), vedi actionRowToolsHtml in
     azioni-eventi-panel.js. */
  .ae-col-icon{ width: 130px; text-align:center; }
  /* Nome più largo (titolo azione, fino a 80 caratteri), Schermo/Durata più
     stretti (un solo numero corto ciascuno): Descrizione (ultima colonna,
     nessuna larghezza qui) recupera lo spazio lasciato libero da questi due. */
  #ae-actions-table th:nth-child(3), #ae-actions-table td:nth-child(3){ width: 320px; }
  #ae-actions-table th:nth-child(4), #ae-actions-table td:nth-child(4){ width: 64px; text-align:center; }
  #ae-actions-table th:nth-child(5), #ae-actions-table td:nth-child(5){ width: 64px; text-align:center; }
  .ae-action-row-tools{ display:flex; gap:4px; justify-content:center; }
  .ae-action-tool-btn{
    width:22px; height:22px; border-radius:6px; border:1px solid var(--line); background:transparent;
    color: var(--muted); cursor:pointer; font-size:11px; display:flex; align-items:center; justify-content:center;
    transition: border-color .15s ease, color .15s ease;
  }
  .ae-action-tool-btn:hover{ border-color: rgba(185,107,250,0.45); color: var(--ink); }
  .ae-action-tool-btn:disabled{ opacity:0.35; cursor:not-allowed; }
  .ae-action-tool-btn.is-playing{ border-color: var(--blue); color: var(--blue); }
  .ae-action-delete-btn:hover{ border-color: var(--red); color: var(--red); }
  .ae-sort-btn{
    display:inline-flex; align-items:center; gap:3px; background:none; border:none; padding:0;
    color: var(--muted); font-family:'JetBrains Mono'; font-size: 10.5px; text-transform:uppercase;
    letter-spacing:0.05em; cursor:pointer; transition: color .15s ease;
  }
  .ae-sort-btn:hover{ color: var(--ink); }
  .ae-sort-arrow{ font-size: 9px; }
  .ae-sort-az{ color: var(--blue); }

  /* Toolbar sopra la tabella Azioni: pulsante Nuova azione a sinistra,
     ricerca a destra. */
  .ae-actions-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin: 14px 0; }
  .ae-actions-search{
    width: 220px; max-width:100%; background: rgba(214,190,245,0.03); border:1px solid var(--line);
    border-radius:8px; padding:8px 10px; color: var(--ink); font-family:'Nunito Sans', sans-serif; font-size:13px;
  }
  .ae-actions-search:focus{ outline:none; border-color: var(--blue); }

  /* Tabelle Azioni/Eventi: bordo esterno e divisori tra colonne più marcati
     del filo appena accennato di .admin-table/.table-scroll usato altrove
     (lì il resto del layout basta già a farle riconoscere come tabelle;
     qui no). Scoped a queste due card per non toccare le altre .admin-table
     del sito (pannello Admin, sessioni Minecraft, ecc.). */
  #ae-actions-card .table-scroll, #ae-events-card .table-scroll{
    border-color: rgba(214,190,245,0.28);
  }
  #ae-actions-table th, #ae-actions-table td,
  #ae-events-table th, #ae-events-table td{
    border-right: 1px solid rgba(214,190,245,0.28);
    border-bottom-color: rgba(214,190,245,0.28);
  }
  #ae-actions-table th:last-child, #ae-actions-table td:last-child,
  #ae-events-table th:last-child, #ae-events-table td:last-child{
    border-right: none;
  }

  /* Finestrella "Nuova azione" (riquadro Azioni, admin): riusa .mc-prompt-
     overlay/.mc-prompt-modal come le altre modali del sito, ma di dimensione
     fissa (non si allarga/allunga col contenuto): width/height fissi invece
     di max-width/max-height da soli, così resta sempre della stessa
     grandezza. Se le sezioni aperte non ci stanno, scorre solo
     .ae-action-modal-scroll (titolo + le tre sezioni) — intestazione e
     pulsanti Annulla/Crea restano fissi in alto/basso, stesso schema già
     usato per "Personalizza overlay" (.overlay-style-modal più sotto).
     Selettore combinato (non solo .ae-action-modal) per battere in
     specificità .mc-prompt-modal{max-width:360px} più sotto nel foglio di
     stile, che altrimenti vincerebbe essendo dichiarato dopo. */
  .mc-prompt-modal.ae-action-modal{
    width: 680px; max-width: 92vw; height: 620px; max-height: 88vh;
    display:flex; flex-direction:column;
  }
  .ae-action-modal-scroll{
    flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
    padding-right:4px; margin-right:-4px;
    scrollbar-width: thin; scrollbar-color: rgba(185,107,250,0.45) transparent;
  }
  .ae-action-modal-scroll::-webkit-scrollbar{ width:8px; }
  .ae-action-modal-scroll::-webkit-scrollbar-track{ background: transparent; }
  .ae-action-modal-scroll::-webkit-scrollbar-thumb{ background: rgba(185,107,250,0.45); border-radius:999px; }
  .ae-action-modal .mc-prompt-actions{ flex-shrink:0; padding-top:14px; }
  .ae-action-section{
    border:1px solid var(--line); border-radius:10px; margin-bottom:12px; overflow:hidden;
  }
  .ae-action-section-toggle{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    background: rgba(214,190,245,0.03); border:none; padding:11px 14px; color:var(--ink);
    font-size:13.5px; font-weight:600; font-family:'Nunito Sans', sans-serif; cursor:pointer;
    transition: background .15s ease;
  }
  .ae-action-section-toggle:hover{ background: rgba(214,190,245,0.06); }
  .ae-action-section-caret{ color: var(--muted); font-size:11px; transition: transform .15s ease; }
  .ae-action-section.is-open .ae-action-section-caret{ transform: rotate(180deg); }
  .ae-action-section-body{ padding:8px; display:flex; flex-direction:column; gap:3px; }
  .ae-action-section-body[hidden]{ display:none; }
  .ae-action-option{
    display:flex; align-items:center; gap:8px; width:100%; text-align:left;
    border-radius:8px; padding:9px 10px; color:var(--ink);
    font-size:13px; font-family:'Nunito Sans', sans-serif; cursor:pointer; transition: background .15s ease;
  }
  .ae-action-option:hover{ background: rgba(214,190,245,0.06); }
  .ae-action-option input[type="checkbox"],
  .ae-action-option input[type="radio"]{
    width:16px; height:16px; accent-color: var(--blue); cursor:pointer; flex-shrink:0;
  }
  /* "Mostra alert": casella verde invece del viola di sistema delle altre
     opzioni, come nello screenshot di riferimento. */
  .ae-action-option-checkbox[data-action-type="alert"]{ accent-color: #22c55e; }
  .ae-action-section-empty{ color: var(--muted); font-size:12.5px; text-align:center; padding: 10px 4px; }
  .ae-action-option.is-selected{ background: rgba(185,107,250,0.16); color: var(--blue); }

  /* Blocco "Per quanto deve essere visibile?"/"Impostazioni aggiuntive" sotto
     le tre sezioni della finestrella Nuova azione (vedi visibilitySettingsHtml
     in azioni-eventi-panel.js): stesso per ogni azione, indipendente dai tipi
     scelti sopra. */
  .ae-visibility-block{ margin: 16px 0; }
  .ae-block-label{ font-size:13.5px; color: var(--ink); font-weight:600; margin-bottom:10px; }
  .ae-field-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .ae-field-row-label{ font-size:13px; color: var(--muted); }
  .ae-field-row-checkbox{ cursor:pointer; }
  .ae-field-row-input{
    width:70px; flex-shrink:0; box-sizing:border-box; background: rgba(214,190,245,0.04);
    border:1px solid var(--line); border-radius:8px; padding:8px 10px; color:var(--ink);
    font-size:14px; font-family:'Nunito Sans', sans-serif;
  }
  .ae-field-row-input:focus{ outline:none; border-color: var(--blue); }
  .ae-field-row-suffix{ font-size:13px; color: var(--muted); }
  /* Link overlay OBS in fondo, centrato: solo un'anteprima testuale, vedi
     updateOverlayLinkPreview in azioni-eventi-panel.js. */
  .ae-overlay-link-block{ display:flex; justify-content:center; margin-top:12px; }
  .ae-overlay-link-block .mc-token-row{ margin:0; max-width:100%; }
  .ae-overlay-link-block .mc-token-value{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* Pannello "Riproduci Audio": non più una finestrella separata, uno spazio
     che si apre subito sotto la casella dentro "Azioni generali" (vedi
     audioInlinePanelHtml in azioni-eventi-panel.js). Rientro di 24px per
     allinearsi al testo della checkbox sopra (16px quadratino + 8px gap),
     non al bordo della riga. Tutto il pannello è zona di drop (non solo il
     pulsante Carica File), bordo tratteggiato che si accende trascinando sopra. */
  .ae-audio-inline{
    margin: 4px 0 10px 24px; padding: 12px; border-radius: 10px; border: 1px dashed var(--line);
    display:flex; flex-direction:column; gap:10px; transition: border-color .15s ease, background .15s ease;
  }
  .ae-audio-inline[hidden]{ display:none; }
  .ae-audio-inline.is-dragover{ border-color: var(--blue); background: rgba(185,107,250,0.08); }
  .ae-audio-volume-row{ display:flex; flex-direction:column; gap:6px; }
  .ae-audio-volume-label{ font-size:12.5px; color: var(--muted); }
  .ae-audio-volume-label strong{ color: var(--ink); }
  .ae-audio-volume-slider{ display:flex; align-items:center; gap:8px; font-size:14px; }
  .ae-audio-volume-slider input[type="range"]{ flex:1; accent-color: var(--blue); cursor:pointer; }
  .ae-audio-list-btn{ align-self:flex-start; }
  .ae-audio-upload-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .ae-audio-drop-hint{ font-size:12.5px; color: var(--muted); }
  .ae-audio-current{ font-size:12.5px; color: var(--ink); }

  /* Pannello "Mostra alert" (stesso spazio inline di "Riproduci Audio" sopra,
     vedi alertInlinePanelHtml in azioni-eventi-panel.js): campo testo su una
     riga, poi "Inserisci placeholder" (menu con {username}/{giftname}/ecc.,
     riusa lo stesso .mc-action-field/.mc-action-menu della tendina Font) e
     "Personalizza Overlay" (font/colore/opacità sfondo, target 'alert')
     sulla riga sottostante. */
  .ae-alert-text-input{
    width:100%; box-sizing:border-box; background: rgba(214,190,245,0.04);
    border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--ink);
    font-size:13px; font-family:'Nunito Sans', sans-serif;
  }
  .ae-alert-text-input:focus{ outline:none; border-color: var(--blue); }
  .ae-alert-actions-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .ae-alert-placeholder-field{ width:auto; flex:0 0 auto; }
  .ae-alert-personalize-btn{ flex-shrink:0; }

  /* Anteprima "Mostra alert" (pulsante ▶ Play, vedi showAlertPreview in
     azioni-eventi-panel.js): card fissa in alto a destra, sopra qualunque
     finestrella aperta (.mc-prompt-overlay è a z-index:90). Foto profilo
     centrata sopra, testo centrato sotto (come un vero alert box da
     diretta, non una riga orizzontale tipo notifica). Scompare da sola
     scorrendo verso destra, non un'azione dell'utente. */
  .ae-alert-preview{
    position:fixed; top:20px; right:20px; z-index:150; width:260px;
    display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
    background: var(--bg-panel); border:1px solid var(--line); border-radius:14px;
    padding:20px 18px; box-shadow: 0 16px 40px rgba(7,2,13,0.5);
    opacity:0; transform: translateX(24px); pointer-events:none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .ae-alert-preview.is-visible{ opacity:1; transform: translateX(0); }
  .ae-alert-preview-avatar{
    width:72px; height:72px; border-radius:50%; flex-shrink:0; font-size:32px;
    display:flex; align-items:center; justify-content:center;
    background: radial-gradient(circle at 30% 30%, #3A2B55, #1b2438);
  }
  .ae-alert-preview-text{ color: var(--ink); font-size:14.5px; font-weight:600; font-family:'Nunito Sans', sans-serif; word-break: break-word; }

  /* Finestrella "Elenco Audio" (pulsante Apri Elenco Audio nel pannello
     Riproduci Audio): grande e di dimensione fissa come "Nuova azione",
     scorrimento solo sulle due sezioni (Audio pubblici/Audio locali) —
     intestazione e pulsante Chiudi restano fissi. Si apre sopra la
     finestrella Nuova azione (append più tardivo nel DOM = dipinto sopra). */
  .mc-prompt-modal.ae-audio-list-modal{
    width: 640px; max-width: 92vw; height: 600px; max-height: 88vh;
    display:flex; flex-direction:column;
  }
  .ae-audio-list-scroll{
    flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
    padding-right:4px; margin-right:-4px;
    scrollbar-width: thin; scrollbar-color: rgba(185,107,250,0.45) transparent;
  }
  .ae-audio-list-scroll::-webkit-scrollbar{ width:8px; }
  .ae-audio-list-scroll::-webkit-scrollbar-track{ background: transparent; }
  .ae-audio-list-scroll::-webkit-scrollbar-thumb{ background: rgba(185,107,250,0.45); border-radius:999px; }
  .ae-audio-list-modal .mc-prompt-actions{ flex-shrink:0; padding-top:14px; }
  .ae-audio-list-section{ margin-bottom:22px; }
  .ae-audio-list-section h4{ font-size:13.5px; color: var(--muted); margin-bottom:10px; text-transform:uppercase; letter-spacing:0.04em; }
  .ae-audio-slot-list{ display:flex; flex-direction:column; gap:8px; }
  .ae-audio-slot{
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    border:1px solid var(--line); border-radius:10px; padding:10px 14px;
  }
  .ae-audio-slot-info{ display:flex; align-items:baseline; gap:8px; min-width:0; }
  .ae-audio-slot-name{ color: var(--ink); font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ae-audio-slot-duration{ color: var(--muted); font-size:12px; flex-shrink:0; }
  .ae-audio-slot-actions{ display:flex; gap:8px; flex-shrink:0; }
  .ae-audio-slot-play.is-playing{ border-color: var(--blue); color: var(--blue); }

  /* Riquadro Profili (tab Azioni & Eventi, admin): selettore a tendina a
     sinistra, 3 righe di pulsanti a destra (crea/modifica/duplica/elimina —
     esporta/importa per codice — importa/esporta JSON). Niente .mc-wide-card
     qui: la card resta larga solo quanto il suo contenuto (si ferma al
     pulsante Elimina della prima riga), non si allarga come Azioni/Eventi. */
  #ae-profiles-card{ max-width: fit-content; }
  .ae-profiles-layout{ display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; margin-top:14px; }
  .ae-profiles-select-col{ flex: 0 0 220px; min-width: 180px; }
  .ae-profiles-select-col .mc-action-field{ width:100%; }
  .ae-profiles-actions-col{ flex: 1 1 320px; min-width: 280px; display:flex; flex-direction:column; gap:10px; }
  .ae-profiles-actions-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .ae-profile-code-input{
    flex: 1 1 160px; min-width:140px; background: rgba(214,190,245,0.03); border:1px solid var(--line);
    border-radius:8px; padding:8px 10px; color: var(--ink); font-family:'Nunito Sans', sans-serif; font-size:13px;
  }
  .ae-profile-code-input:focus{ outline:none; border-color: var(--blue); }
  /* 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-action-btn.is-playing{ color: var(--blue); border-color: var(--blue); }
  .admin-self-note{ font-family:'JetBrains Mono'; font-size: 10.5px; color: var(--line); }

  /* Tab "Audio pubblici" (pannello admin): stessa idea di dropzone già usata
     per "Riproduci Audio" in dashboard (bordo tratteggiato, si accende
     trascinando sopra), qui come blocco a sé stante invece che sotto una
     checkbox. */
  .public-audio-dropzone{
    border: 2px dashed var(--line); border-radius: 12px; padding: 26px 16px; text-align:center;
    cursor:pointer; transition: border-color .15s ease, background .15s ease;
  }
  .public-audio-dropzone:hover, .public-audio-dropzone:focus-visible{ border-color: rgba(185,107,250,0.5); outline:none; }
  .public-audio-dropzone.is-dragover{ border-color: var(--blue); background: rgba(185,107,250,0.08); }
  .public-audio-dropzone-hint{ color: var(--muted); font-size:13px; }

  /* 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(124,31,212,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(124,31,212,0.1); }

  .danger-confirm{
    margin-top: 16px; padding: 18px; border: 1px solid rgba(124,31,212,0.35); border-radius: 12px;
    background: rgba(124,31,212,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(214,190,245,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(185,107,250,0.4); color: var(--ink); }
  .payment-method.selected{ border-color: var(--blue); color: var(--ink); background: rgba(185,107,250,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; }

  /* ---------- PLAN OPTIONS (giornaliero/mensile/annuale) ---------- */
  .plan-options{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
  @media (max-width: 420px){ .plan-options{ grid-template-columns: 1fr; } }
  .plan-option{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding: 12px 10px;
    border: 1px solid var(--line); border-radius: 10px; background: rgba(214,190,245,0.02);
    cursor:pointer; font-size: 13.5px; color: var(--muted); transition: border-color .2s ease, color .2s ease, background .2s ease;
  }
  .plan-option:hover{ border-color: rgba(185,107,250,0.4); color: var(--ink); }
  .plan-option.selected{ border-color: var(--blue); color: var(--ink); background: rgba(185,107,250,0.08); }
  .plan-option .plan-option-price{ font-family:'JetBrains Mono'; font-size: 11px; color: var(--muted); }
  .plan-option.selected .plan-option-price{ color: var(--ink); }

  /* ---------- 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:#F1E7FF; }
  .btn-youtube:hover{ box-shadow: 0 8px 24px rgba(124,31,212,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; }
  /* Separa visivamente il download principale (server .zip, sopra) dall'overlay
     OBS opzionale (sotto): una riga divisoria + etichetta piccola, cosi' non
     sembra un quarto pulsante dello stesso gruppo ma un extra a parte. */
  .tutorial-overlay-block{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
  .tutorial-overlay-label{ font-size:11.5px; font-family:'JetBrains Mono'; text-transform:uppercase; letter-spacing:0.06em; color: var(--muted); margin:0; }
  /* 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(214,190,245,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:#050308; 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(214,190,245,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(124,31,212,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); }

  /* Interruttore "Attiva/Disattiva TTS" in cima a "Impostazioni generali":
     stesso pulsante a pillola outline/pieno del "Connetti Live" in sidebar
     (.app-overlay-btn, vedi lì), ma qui è un secondo interruttore
     indipendente — accende/spegne solo la lettura dei commenti, non la
     connessione alla diretta (serve comunque "Connetti Live" attivo perché
     ci sia qualcosa da leggere). */
  .tts-enable-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
  .tts-enable-row .app-overlay-btn{ flex-shrink:0; }
  .tts-enable-row .connections-sub{ margin:0; }

  .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(214,190,245,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(214,190,245,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(7,2,13,0.5); padding:10px;
    display:flex; flex-direction:column; gap:8px;
  }
  .tts-voice-popup[hidden]{ display:none; }
  .tts-voice-search{
    width:100%; background: rgba(214,190,245,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(214,190,245,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(185,107,250,0.45); color: var(--ink); }
  .tts-voice-gender-btn.is-active{ background: rgba(185,107,250,0.16); border-color: rgba(185,107,250,0.5); color: var(--blue); }
  /* Filtro Lingua nel popup Voce: stesso trigger+menu .mc-action-field usato
     ovunque nella dashboard (non un <select> nativo, il cui menu a tendina è
     disegnato dal sistema operativo e resta bianco qualunque CSS gli si dia
     — stesso motivo già documentato sopra per il picker regalo). Qui viene
     solo compattato per stare nella riga di filtri stretta accanto ai
     pulsanti F/M. */
  .tts-voice-lang-field{ flex:1; min-width:90px; width:auto; }
  .tts-voice-lang-field .mc-action-trigger{ padding:5px 7px; font-size:11.5px; }
  .tts-voice-lang-field .mc-action-menu{ max-height:180px; }
  .tts-voice-list{
    max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:2px;
    scrollbar-width: thin; scrollbar-color: rgba(185,107,250,0.45) transparent;
  }
  .tts-voice-list::-webkit-scrollbar{ width:8px; }
  .tts-voice-list::-webkit-scrollbar-thumb{ background: rgba(185,107,250,0.45); border-radius:999px; }
  /* Intestazione di gruppo mostrata solo quando il filtro lingua è su "Tutte
     le lingue" (renderVoiceList in tts-panel.js): separa visivamente le voci
     di lingue diverse mescolate nello stesso elenco. */
  .tts-voice-group-header{
    padding:8px 8px 3px; font-size:10px; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; color: var(--muted);
  }
  .tts-voice-group-header:not(:first-child){
    margin-top:4px; border-top:1px solid var(--line); padding-top:9px;
  }
  .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(214,190,245,0.06); }
  .tts-voice-option.is-selected{ background: rgba(185,107,250,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(185,107,250,0.16); border-color: rgba(185,107,250,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(214,190,245,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(214,190,245,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(214,190,245,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(214,190,245,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(185,107,250,0.45); }
  .gift-combo-icon{ width:22px; height:22px; border-radius:4px; object-fit:cover; flex-shrink:0; background: rgba(214,190,245,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(214,190,245,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(185,107,250,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(7,2,13,0.5); padding:6px;
    max-height:240px; overflow-y:auto;
    scrollbar-width: thin; scrollbar-color: rgba(185,107,250,0.45) transparent;
  }
  .mc-action-menu[hidden]{ display:none; }
  .mc-action-menu::-webkit-scrollbar{ width:8px; }
  .mc-action-menu::-webkit-scrollbar-thumb{ background: rgba(185,107,250,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(214,190,245,0.06); }
  .mc-action-option.is-selected{ background: rgba(185,107,250,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(7,2,13,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(7,2,13,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(214,190,245,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(185,107,250,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(185,107,250,0.45); border-radius:999px; }
  .gift-modal-grid::-webkit-scrollbar-thumb:hover{ background: rgba(185,107,250,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(214,190,245,0.06); transform: translateY(-2px); }
  .gift-modal-item-icon{ width:56px; height:56px; border-radius:12px; object-fit:cover; background: rgba(214,190,245,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(7,2,13,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(7,2,13,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(214,190,245,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:#F1E7FF; border-color: var(--red); }
  .mc-prompt-actions .btn-danger:hover{ box-shadow: 0 8px 24px rgba(124,31,212,0.35); }

  /* Finestrella "Personalizza overlay" (tasto accanto a Copia/Reset, solo
     admin): riusa .mc-prompt-overlay/.mc-prompt-modal sopra, solo i campi
     font/scala sono specifici. Con 10+ campi (set "ricco"/win) il modulo non
     ci stava più in altezza sullo schermo: qui limitiamo l'altezza della
     modale e rendiamo scrollabile SOLO l'elenco campi, mentre titolo e
     pulsanti Annulla/Ripristina/Salva restano sempre visibili in alto/basso. */
  .overlay-style-modal{ max-height: 88vh; display:flex; flex-direction:column; }
  .overlay-style-fields-scroll{
    flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding-right:4px;
    /* margine negativo per non far toccare la scrollbar ai bordi del campo */
    margin-right:-4px;
    scrollbar-width: thin; scrollbar-color: rgba(185,107,250,0.45) transparent;
  }
  .overlay-style-fields-scroll::-webkit-scrollbar{ width:8px; }
  .overlay-style-fields-scroll::-webkit-scrollbar-track{ background: transparent; }
  .overlay-style-fields-scroll::-webkit-scrollbar-thumb{ background: rgba(185,107,250,0.45); border-radius:999px; }
  .overlay-style-fields-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(185,107,250,0.7); }
  .overlay-style-modal .mc-prompt-actions{ flex-shrink:0; padding-top:14px; }
  .overlay-style-field{ margin-bottom:18px; }
  .overlay-style-field-label{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color: var(--ink); margin-bottom:8px; }
  .overlay-style-field input[type="range"]{ width:100%; accent-color: var(--blue); }
  /* Tendina Font: .mc-action-field già ha width:100%, qui basta azzerare il
     margin-bottom di troppo verso il campo successivo (vive dentro
     .overlay-style-field, che ha già il suo). */
  .overlay-style-field .mc-action-field{ margin-bottom:0; }

  /* Set di campi "ricco" (solo Top Regali/Top Like, vedi isRichTarget in
     overlay-panel.js): etichetta a sinistra, controllo a destra su ogni riga,
     invece della pila etichetta-sopra/controllo-sotto di .overlay-style-field
     usata dal set semplice (Win/Top Gift/Top Streak) sopra. */
  .overlay-style-row{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    margin-bottom:16px;
  }
  .overlay-style-row-label{ font-size:13px; color: var(--ink); flex:1 1 auto; }
  .overlay-style-row-control{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
  .overlay-style-row-control input[type="range"]{ width:140px; accent-color: var(--blue); }
  .overlay-style-row-control strong{ font-family:'JetBrains Mono'; font-size:12.5px; color: var(--muted); min-width:28px; text-align:right; }
  .overlay-style-row .mc-action-field{ flex:0 0 auto; width:200px; }
  /* Color picker custom (colorFieldMarkup in overlay-panel.js) al posto
     dell'<input type="color"> nativo: quella finestrella è del sistema
     operativo/browser, fuori dal DOM, quindi impossibile da restilizzare.
     .mc-color-field è il wrapper posizionato (position:relative) da cui il
     pannello si apre in assoluto, .mc-color-trigger è lo swatch cliccabile.
     Non più scoped a .overlay-style-row: riusato anche nella riga rapida
     colore/opacità di "Mostra alert" (azioni-eventi-panel.js). */
  .mc-color-field{ position:relative; flex:0 0 auto; }
  .mc-color-trigger{
    -webkit-appearance:none; appearance:none;
    width:40px; height:40px; padding:0; border-radius:10px; border:2px solid var(--line);
    cursor:pointer; flex-shrink:0; display:block;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
  }
  .mc-color-trigger:hover{ border-color: var(--blue); transform: scale(1.06); }
  .mc-color-trigger[aria-expanded="true"]{
    border-color: var(--blue); box-shadow: 0 0 0 3px rgba(168,85,247,0.25);
  }
  /* Pannello: stesso linguaggio visivo di .mc-action-menu (tendina font) —
     stesso sfondo/bordo/ombra/border-radius, per sembrare un unico sistema di
     popover invece di due componenti diversi nella stessa finestrella. Si
     apre ancorato al bordo destro dello swatch (right:0), larghezza fissa
     abbastanza stretta da restare sempre dentro alla modale anche quando lo
     swatch è vicino al bordo destro. */
  /* position:fixed (non più absolute) con top/left calcolati via JS al click
     (vedi wireColorPickers in overlay-panel.js): un antenato con
     overflow:hidden/auto (.ae-action-modal-scroll/.overlay-style-fields-
     scroll, entrambe le finestrelle che usano questo picker) taglierebbe un
     popover absolute che esce dai propri bordi — fixed lo fa uscire dal
     flusso di clipping di qualunque contenitore scorrevole. */
  .mc-color-panel{
    position:fixed; z-index:120; width:200px;
    background: var(--bg-panel); border:1px solid var(--line); border-radius:10px;
    box-shadow: 0 16px 40px rgba(7,2,13,0.5); padding:12px;
    display:flex; flex-direction:column; gap:10px;
  }
  .mc-color-panel[hidden]{ display:none; }
  .mc-color-hex-input{
    width:100%; box-sizing:border-box; text-align:center; text-transform:uppercase;
    background: rgba(214,190,245,0.04); border:1px solid var(--line); border-radius:6px;
    padding:7px 9px; color:var(--ink); font-family:'JetBrains Mono'; font-size:12.5px; letter-spacing:0.5px;
  }
  .mc-color-hex-input:focus{ outline:none; border-color: var(--blue); }
  /* Quadrato saturazione (asse x) / valore (asse y): il colore di base
     (hsl(tinta,100%,50%)) è impostato via JS su background-color, i due
     gradienti qui sopra (bianco da sinistra, nero dal basso) sono fissi e
     restano identici qualunque sia la tinta corrente — stesso principio del
     "SV square" di un color picker completo (Photoshop/Finder/ecc). */
  .mc-color-sv{
    position:relative; width:100%; height:120px; border-radius:8px; overflow:hidden;
    cursor:crosshair; touch-action:none;
    background-image:
      linear-gradient(to top, #000, rgba(0,0,0,0)),
      linear-gradient(to right, #fff, rgba(255,255,255,0));
  }
  .mc-color-sv-pointer{
    position:absolute; width:14px; height:14px; margin:-7px; border-radius:50%;
    border:2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
    pointer-events:none;
  }
  /* Barra tinta: arcobaleno fisso (le 6 tacche HSL a 60° l'una dall'altra),
     trascinabile in orizzontale per scegliere la tinta di base del quadrato. */
  .mc-color-hue-bar{
    position:relative; width:100%; height:14px; border-radius:7px; cursor:pointer; touch-action:none;
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  }
  .mc-color-hue-pointer{
    position:absolute; top:50%; width:16px; height:16px; margin:-8px; border-radius:50%;
    border:2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
    pointer-events:none;
  }
  .overlay-style-row input[type="checkbox"]{ width:18px; height:18px; accent-color: var(--blue); cursor:pointer; flex-shrink:0; }
  /* Casella di testo numerica (Dimensione testo, Opacità sfondo, Righe nel
     set "ricco"): al posto dello slider, il valore si scrive/legge
     direttamente nel campo, niente elemento separato da tenere sincronizzato. */
  .overlay-style-row .overlay-style-number-input{
    width:64px; flex-shrink:0; text-align:right;
    background: rgba(214,190,245,0.03); border:1px solid var(--line); border-radius:6px;
    padding:7px 9px; color:var(--ink); font-family:'JetBrains Mono'; font-size:12.5px;
  }
  .overlay-style-row .overlay-style-number-input:focus{ outline:none; border-color: var(--blue); }
  /* Casella di testo (campo "Titolo" di Top Gift/Top Streak): stesso stile
     della casella numerica sopra, ma allineata a sinistra e più larga. */
  .overlay-style-row .overlay-style-text-input{
    width:200px; flex-shrink:0; text-align:left;
    background: rgba(214,190,245,0.03); border:1px solid var(--line); border-radius:6px;
    padding:7px 9px; color:var(--ink); font-family:'Nunito Sans', sans-serif; font-size:12.5px;
  }
  .overlay-style-row .overlay-style-text-input:focus{ outline:none; border-color: var(--blue); }

  /* 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(124,31,212,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(124,31,212,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(168,85,247,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(214,190,245,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: #000000;
    --bg-panel: #0F0817;
    --bg-panel-2: #150C20;
    --blue: #A855F7;
    --red: #7C1FD4;
    --ink: #F1E7FF;
    --muted: #B6A0CF;
    --line: rgba(214,190,245,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(168,85,247,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(124,31,212,0.4); background: rgba(124,31,212,0.08); }
  body.page-dashboard .badge-active{ color: var(--blue); border-color: rgba(168,85,247,0.4); background: rgba(168,85,247,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(214,190,245,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(214,190,245,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(214,190,245,0.03);
  }

  body.page-dashboard .danger-zone{ border-top-color: rgba(124,31,212,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(124,31,212,0.1); }
  body.page-dashboard .danger-confirm{ border-color: rgba(124,31,212,0.35); background: rgba(124,31,212,0.06); }
  body.page-dashboard .form-message.is-error{ background: rgba(124,31,212,0.10); border-color: rgba(124,31,212,0.4); }
  body.page-dashboard .form-message.is-success{ background: rgba(168,85,247,0.10); border-color: rgba(168,85,247,0.4); }

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

  body.page-dashboard .field input:focus{ background: rgba(168,85,247,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 .mc-color-panel,
  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(168,85,247,0.45) transparent; }
  body.page-dashboard .mc-action-menu::-webkit-scrollbar-thumb{ background: rgba(168,85,247,0.45); }
  body.page-dashboard .overlay-style-fields-scroll{ scrollbar-color: rgba(168,85,247,0.45) transparent; }
  body.page-dashboard .overlay-style-fields-scroll::-webkit-scrollbar-thumb{ background: rgba(168,85,247,0.45); }
  body.page-dashboard .mc-action-option.is-selected{ background: rgba(168,85,247,0.16); color: var(--blue); }
  body.page-dashboard .gift-combo-trigger:hover, body.page-dashboard .gift-combo-trigger.is-open{ border-color: rgba(168,85,247,0.45); }
  body.page-dashboard .mc-action-trigger:hover, body.page-dashboard .mc-action-trigger[aria-expanded="true"]{ border-color: rgba(168,85,247,0.45); }

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