/* =============================================================
   STYLE.CSS VxD 2025 – Versione completa ordinata (27/11/2025)
   Reset • Accessibilità • Temi • Header & navbar
   Menu desktop • Popup per tema • Menu mobile + hamburger
   Switcher temi • Hero • Card • Footer • Social icons
   Sigillo • Lingua/pulsanti • Animazioni • Utility
============================================================= */

/* 1) Reset & base */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:root{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:#e6e6e6;
  background:var(--bg-main);
  line-height:1.7;
  text-align:center;
  padding:40px 20px;
}

/* 2) Accessibilità */
a:focus-visible,button:focus-visible,.menu-trigger:focus-visible,.lang-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* 3) Temi e variabili */
:root{
  --bg-main:radial-gradient(circle at center,#120000 0%,#000 80%);
  --menu-bg:#080000;
  --menu-sub-bg:#120000;
  --card-bg:rgba(20,0,10,0.7);
  --accent:crimson;
  --accent-rgb:220,20,60;
  --accent-soft:rgba(220,20,60,.25);
  --text-weak:#bbbbbb;
  --text-mid:#d0d0d0;
  --glass-border:rgba(220,20,60,0.4);

  /* Rainbow grade esteso e coerente */
  --rainbow-gradient:linear-gradient(90deg,#ff3366,#ff9933,#ffee66,#33ffcc,#3399ff,#9966ff,#ff66cc,#66ff99,#ff3366);
  --rainbow-gradient-hero:linear-gradient(270deg,#ff3366,#ff9933,#ffee66,#33ffcc,#3399ff,#9966ff,#ff66cc,#66ff99);
}

body.theme-necro{
  --bg-main:radial-gradient(circle,#120000 0%,#000 85%);
  --menu-bg:#080000; --menu-sub-bg:#120000;
  --card-bg:rgba(20,0,10,0.7);
  --accent:crimson; --accent-rgb:220,20,60; --accent-soft:rgba(220,20,60,.25);
  --glass-border:rgba(220,20,60,0.4);
}
body.theme-dark{
  --bg-main:radial-gradient(circle,#030303 0%,#000 85%);
  --menu-bg:#000; --menu-sub-bg:#050505;
  --card-bg:rgba(0,20,30,0.8);
  --accent:#00bcd4; --accent-rgb:0,188,212; --accent-soft:rgba(0,188,212,.25);
  --glass-border:rgba(0,188,212,0.4);
}
body.theme-xpop{
  --bg-main:radial-gradient(circle,#180022 0%,#05000f 85%);
  --menu-bg:#0a0012; --menu-sub-bg:#12001d;
  --card-bg:rgba(30,0,50,0.7);
  --accent:#c56bff; --accent-rgb:197,107,255; --accent-soft:rgba(197,107,255,.25);
  --glass-border:rgba(197,107,255,0.4);
}
body.theme-rainbow{
  --bg-main:var(--rainbow-gradient);
  --menu-bg:transparent; --menu-sub-bg:rgba(0,0,0,0.6);
  --card-bg:rgba(20,0,40,0.85);
  --accent:#ffffff; --accent-rgb:255,255,255; --accent-soft:rgba(255,255,255,.35);
  --glass-border:rgba(255,100,255,0.5);
  background-size:400% 400%;
  animation:rainbowFlow 18s linear infinite;
}

/* 4) Header & navbar (glass) */
.vxd-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(15,15,35,0.4);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
}
.vxd-navbar{
  max-width:1400px; margin:0 auto;
  padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.droop-logo{transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.droop-logo img{height:56px; filter:drop-shadow(0 0 10px var(--accent))}
.droop-logo:hover{transform:rotate(720deg)}

.main-nav{display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.main-nav>a,.menu-trigger{
  text-transform:uppercase; font-size:13px; letter-spacing:1.2px;
  color:#d0d0d0; padding:8px 4px; position:relative;
}
.main-nav>a::after,.menu-trigger::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background:var(--accent); transition:.3s;
}
.main-nav>a:hover::after,.menu-group:hover .menu-trigger::after{width:100%}
.main-nav>a:hover,.menu-trigger:hover{color:var(--accent)}

/* 5) Menu desktop + popup (glass) */
@media(min-width:769px){
  .menu-group{position:relative}
  .menu-sub{
    position:absolute; top:calc(100% + 10px); left:0; width:260px; z-index:9999;
    background:rgba(12,12,35,0.52);
    backdrop-filter:blur(26px) saturate(200%);
    -webkit-backdrop-filter:blur(26px) saturate(200%);
    border:1px solid rgba(255,255,255,0.15);
    box-shadow:0 20px 60px rgba(0,0,0,0.75), 0 0 50px rgba(120,80,255,0.25);
    border-radius:20px;
    padding:12px 0;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .35s ease, transform .35s ease, visibility .35s ease;
  }
  .menu-group:hover>.menu-sub{
    opacity:1; visibility:visible; pointer-events:all;
    transform:translateY(0); top:calc(100% + 6px);
  }
}
.menu-sub a{
  display:block; padding:12px 20px; color:var(--text-mid);
  transition:.2s; position:relative; font-weight:600;
}
.menu-sub a::before{content:"✧"; position:absolute; left:10px; opacity:0; transition:.3s ease}
.menu-sub a:hover::before{opacity:1; left:16px}
.menu-sub a:hover{background:var(--accent-soft); color:#fff; padding-left:26px}

/* 6) Popup per tema (desktop) */
@media(min-width:769px){
  body.theme-necro .menu-sub{
    background:linear-gradient(180deg,#220008,#0a0000)!important;
    border:2px solid crimson!important;
    box-shadow:0 0 35px rgba(220,20,60,.7), inset 0 0 20px rgba(220,20,60,.3)!important;
  }
  body.theme-dark .menu-sub{
    background:linear-gradient(180deg,#001f2e,#000508)!important;
    border:2px solid #00ffff!important;
    box-shadow:0 0 40px #00ffff, inset 0 0 18px #00ffff!important;
  }
  body.theme-xpop .menu-sub{
    background:linear-gradient(180deg,#2a0044,#0f001a)!important;
    border:2px solid #c56bff!important;
    box-shadow:0 0 45px #c56bff, inset 0 0 22px #c56bff!important;
  }

  /* Rainbow desktop – grade + vetro + testo leggibile */
  body.theme-rainbow .menu-sub{
    background:linear-gradient(135deg, rgba(20,0,40,0.95), rgba(40,0,80,0.98))!important;
    border:2px solid transparent!important;
    border-image:var(--rainbow-gradient) 1!important;
    border-radius:0!important;
    box-shadow:0 0 40px rgba(255,51,102,0.5), 0 0 80px rgba(255,153,51,0.3), inset 0 0 30px rgba(255,255,255,0.15)!important;
    backdrop-filter:blur(16px)!important;
    animation:glassRainbowPulse 9s ease infinite;
  }
  body.theme-rainbow .menu-sub a{
    color:#ffffff!important;
    font-weight:600!important;
    background:var(--rainbow-gradient)!important;
    background-size:400% 400%!important;
    -webkit-background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
    animation:rainbowText 10s linear infinite!important;
    text-shadow:0 1px 4px rgba(0,0,0,0.7)!important;
  }
  /* Hover e selected leggibili (niente bianco pieno su bianco) */
  body.theme-rainbow .menu-sub a:hover,
  body.theme-rainbow .menu-sub a[aria-current="true"]{
    background:rgba(255,255,255,0.15)!important;
    -webkit-text-fill-color:initial!important;
    color:#fff!important;
    text-shadow:0 0 12px rgba(255,255,255,0.8),0 0 6px rgba(0,0,0,0.6)!important;
  }
}


/* 7) Menu mobile + hamburger */
.mobile-toggle{
  display:none;
  width:56px; height:56px;
  background:rgba(255,255,255,0.22);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1.5px solid rgba(255,255,255,0.35);
  box-shadow:0 8px 25px rgba(0,0,0,0.4), 0 0 30px rgba(180,140,255,0.3);
  border-radius:16px;
  position:relative; z-index:10000;
  align-items:center; justify-content:center;
}
@media (max-width:768px){
  .mobile-toggle{display:flex}
}

.hamburger span{
  position:absolute; left:50%;
  width:28px; height:3px;
  background:#fff;
  border-radius:3px;
  transform:translateX(-50%);
  transition:all .35s;
}
.hamburger span:nth-child(1){top:16px}
.hamburger span:nth-child(2){top:26px}
.hamburger span:nth-child(3){top:36px}
.mobile-toggle.active .hamburger span:nth-child(1){
  top:26px; transform:translateX(-50%) rotate(45deg)
}
.mobile-toggle.active .hamburger span:nth-child(2){opacity:0}
.mobile-toggle.active .hamburger span:nth-child(3){
  top:26px; transform:translateX(-50%) rotate(-45deg)
}

@media(max-width:768px){
  .main-nav{
    position:fixed;
    top:70px; left:0; right:0; bottom:0;   /* occupa tutta la finestra sotto l’header */
    background:rgba(0,0,0,0.88);
    flex-direction:column;
    padding:0;
    z-index:9999;
    height:calc(100vh - 70px);             /* altezza dinamica */
    overflow-y:auto;                       /* scroll verticale */
    overflow-x:hidden;                     /* blocca scroll orizzontale */
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
    backdrop-filter:blur(14px);
  }
  .main-nav.open{
    opacity:1; visibility:visible;
  }
  .main-nav>*{
    width:100%;
    padding:16px 20px;
    color:#fff;
    white-space:normal; /* evita overflow orizzontale */
  }

  .menu-trigger::after{
    content:"▼";
    margin-left:10px;
    font-size:12px;
    transition:transform .3s;
  }
  .menu-group.open .menu-trigger::after{transform:rotate(180deg)}

  .main-nav a:hover,
  .menu-group.open>.menu-trigger{
    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(8px);
  }

  /* Submenu mobile: si adatta al contenuto */
  .menu-sub{
    margin:8px 16px;
    background:rgba(0,0,0,0.88);
    border-radius:10px;
    padding:8px 0;
    backdrop-filter:blur(10px);
    display:none;                          /* nascosto di default */
  }
  .menu-group.open .menu-sub{
    display:block;                         /* mostra tutto il contenuto */
  }
}

/* Mobile rainbow */
@media(max-width:768px){
  body.theme-rainbow .main-nav{
    background:var(--rainbow-gradient)!important;
    background-size:400% 400%!important;
    animation:rainbowFlow 15s linear infinite!important;
  }
  body.theme-rainbow .menu-sub{
    background:linear-gradient(135deg,#1a0033,#001a33,#33001a)!important;
    border-left:5px solid transparent!important;
    border-image:linear-gradient(to bottom,#ff3366,#3399ff,#ffee66) 1!important;
    border-radius:0!important;
    margin:12px 20px!important;
    box-shadow:0 15px 40px rgba(0,0,0,0.8), 0 0 30px rgba(255,51,153,0.5)!important;
    backdrop-filter:blur(12px)!important;
  }
  body.theme-rainbow .menu-sub a{
    color:#ffffff!important;
    padding:16px 24px!important;
    font-weight:600!important;
  }
  /* Hover/selected leggibili in mobile rainbow */
  body.theme-rainbow .menu-sub a:hover,
  body.theme-rainbow .menu-sub a[aria-current="true"]{
    background:rgba(255,255,255,0.15)!important;
    color:#fff!important;
    text-shadow:0 0 12px rgba(255,255,255,0.8),0 0 6px rgba(0,0,0,0.6)!important;
  }
}



/* 8) Switcher temi (glass + rainbow) */
#ritual-switcher{
  position:fixed; bottom:40px; right:20px; display:flex; gap:12px; z-index:9998;
  background:rgba(0,0,0,0.4); padding:10px 14px; border-radius:50px;
  backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.2);
}
#ritual-switcher button{
  width:56px; height:56px; border:2px solid var(--accent-soft); border-radius:50%;
  background:rgba(0,0,0,.6); cursor:pointer; transition:.25s;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
#ritual-switcher button:hover{transform:scale(1.08)}
#ritual-switcher button.active{outline:3px solid var(--accent); box-shadow:0 0 20px var(--accent)}
#ritual-switcher button img,#ritual-switcher button svg{width:80%; height:80%; object-fit:contain}
@media(max-width:768px){#ritual-switcher{bottom:25px; right:15px; gap:10px; padding:8px 12px}}

body.theme-rainbow #ritual-switcher{border-radius:0!important; overflow:hidden!important}
body.theme-rainbow #ritual-switcher button{
  border-radius:0!important;
  border:2px solid transparent!important;
  border-image:var(--rainbow-gradient) 1!important;
}

/* 9) Hero */
.hero{padding:120px 20px 90px; display:flex; align-items:center; justify-content:center}
.intro-necro{max-width:900px; margin:0 auto}
.hero h1{
  font-size:3rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--accent);
  text-shadow:0 0 20px rgba(var(--accent-rgb),0.55);
}
.hero .intro-line{margin-top:12px; font-size:1.1rem; color:#ccc}
.hero h2{margin-top:20px; font-size:1.2rem; font-weight:400; line-height:1.6; color:#d0d0d0}

/* Hero rainbow leggibile */
body.theme-rainbow .hero h1{
  background:var(--rainbow-gradient-hero);
  background-size:600% 600%;
  animation:rainbowText 10s ease infinite;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:2px 2px 4px rgba(0,0,0,0.7), -2px -2px 4px rgba(255,255,255,0.6), 0 0 18px rgba(0,0,0,0.6);
  letter-spacing:3px; font-weight:800;
  -webkit-text-stroke:1px rgba(0,0,0,0.5);
}
body.theme-rainbow .hero .intro-line,
body.theme-rainbow .hero h2{
  color:#0b0b0b;
  text-shadow:0 0 6px rgba(255,255,255,.9),0 0 12px rgba(0,0,0,.7);
}

/* 10) Card (glass + hover) */
.container{max-width:1400px; margin:0 auto; padding:0 20px}
.grid-products,.grid-cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,400px));
  gap:30px; justify-content:center; padding:60px 20px;
}
.card,.download-box,.addon-card{
  max-width:400px; margin:0 auto;
  background:var(--card-bg);
  backdrop-filter:blur(12px);
  border:1px solid var(--accent-soft);
  border-radius:20px;
  padding:40px 30px; text-align:center; transition:all .4s ease;
  box-shadow:0 15px 40px rgba(0,0,0,.6); position:relative; overflow:hidden; min-height:260px;
}
.card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at top,rgba(var(--accent-rgb),.25),transparent 70%);
  opacity:0; transition:opacity .4s ease;
}
.card:hover::before{opacity:1}
.card:hover{transform:translateY(-12px); border-color:var(--accent); box-shadow:0 25px 60px rgba(var(--accent-rgb),.4)}
.card h2,.card h3{margin:20px 0 15px; color:var(--accent); font-size:1.8rem; font-weight:900; letter-spacing:1.5px; text-transform:uppercase}
.card p{color:var(--text-weak); margin-bottom:20px; font-size:.95rem}

/* Card rainbow squadrate ma leggibili */
body.theme-rainbow .card,
body.theme-rainbow .download-box,
body.theme-rainbow .addon-card{
  background:rgba(25,15,60,0.48)!important;
  border:2px solid transparent!important;
  border-image:var(--rainbow-gradient) 1!important;
  border-radius:0!important;
}
body.theme-rainbow .card h2,
body.theme-rainbow .card h3{
  background:var(--rainbow-gradient);
  background-size:300% 100%;
  animation:rainbowTextClean 10s linear infinite;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:1px 1px 2px rgba(0,0,0,0.7), -1px -1px 2px rgba(255,255,255,0.6);
  -webkit-text-stroke:1px rgba(0,0,0,0.6);
}
body.theme-rainbow .card p{color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.6)}

/* 11) Footer (glass) + social icons */
.vxd-footer{
  padding:80px 20px 40px; text-align:center;
  background:rgba(0,0,0,.4);
  border-top:1px solid var(--glass-border);
  margin-top:80px;
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
}
.vxd-footer-social{
  display:flex; gap:25px; justify-content:center;
  margin:40px 0 30px; flex-wrap:wrap;
}
.vxd-footer-social a.vxd-ring{
  width:60px; height:60px; border-radius:50%;
  background:rgba(0,0,0,.6); border:2px solid var(--accent-soft);
  display:flex; align-items:center; justify-content:center; transition:all .5s ease;
}
.vxd-footer-social a.vxd-ring:hover{
  transform:rotate(360deg) scale(1.2);
  border-color:var(--accent); box-shadow:0 0 30px var(--accent);
}
.vxd-footer-social svg{width:32px; height:32px; fill:var(--accent)}
body.theme-rainbow .vxd-footer-social a.vxd-ring{
  background:var(--rainbow-gradient);
  background-size:400% 400%;
  animation:rainbowFlow 12s ease infinite;
  border-radius:0!important;
  border:2px solid transparent!important;
  border-image:var(--rainbow-gradient) 1!important;
}
body.theme-rainbow .vxd-footer-social svg{fill:#000}

/* 12) Sigillo animato */
.sigil-float{
  position:fixed; bottom:130px; left:30px; width:280px; height:280px;
  background:center/contain no-repeat; background-image:none; opacity:.55;
  pointer-events:none; z-index:9997; transition:opacity .4s ease;
  animation:sigilPulse 6s ease-in-out infinite;
}
body.theme-necro .sigil-float{background-image:url('/mirc/img/sigil_necro.svg'); filter:drop-shadow(0 0 25px crimson)}
body.theme-dark .sigil-float{background-image:url('/mirc/img/sigil_dark.svg'); filter:drop-shadow(0 0 25px #00bcd4)}
body.theme-xpop .sigil-float{background-image:url('/mirc/img/sigil_xpop.svg'); filter:drop-shadow(0 0 25px #c56bff)}
body.theme-rainbow .sigil-float{background-image:url('/mirc/img/sigil_rainbow.svg'); filter:drop-shadow(0 0 30px #ffffff)}
.sigil-float:hover{opacity:.80}
@media(max-width:768px){.sigil-float{bottom:110px; left:20px; width:200px; height:200px}}

/* 13) Lingua/pulsanti */
.lang-btn{
  display:inline-block; margin:0 8px; padding:8px 12px; border-radius:8px;
  border:1px solid var(--accent-soft); background:rgba(0,0,0,.35); color:#eaeaea;
  transition:.25s;
}
.lang-btn:hover{transform:translateY(-2px); border-color:var(--accent); box-shadow:0 8px 20px rgba(var(--accent-rgb),.25)}
.lang-btn.active{border:1px solid var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),.35)}

/* 14) Testi globali */
.main-nav > a, .menu-trigger,
.menu-sub a,
.vxd-footer h1, .vxd-footer h2, .vxd-footer h3,
.hero h1,
.card h2, .card h3,
.download-box h2, .download-box h3,
.addon-card h2, .addon-card h3{
  font-family:'Century Gothic', sans-serif;
  font-weight:900;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.card p, .download-box p, .addon-card p,
.vxd-footer p, .hero .intro-line, .hero h2{
  font-family:'Inter', system-ui, sans-serif;
  font-weight:500;
  letter-spacing:.5px;
  color:#eeeeee;
  line-height:1.7;
}

/* 15) Animazioni (keyframes) */
@keyframes sigilPulse{0%,100%{transform:scale(1) rotate(0deg); opacity:.55}50%{transform:scale(1.05) rotate(3deg); opacity:.75}}
@keyframes rainbowFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes rainbowText{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes rainbowTextClean{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes glassRainbowPulse{0%,100%{box-shadow:0 20px 60px rgba(0,0,0,0.8), 0 0 60px rgba(255,100,255,0.4)}50%{box-shadow:0 20px 60px rgba(0,0,0,0.9), 0 0 90px rgba(255,100,255,0.7)}}
@keyframes glassPulse{0%,100%{box-shadow:0 0 30px rgba(255,100,255,0.3)}50%{box-shadow:0 0 60px rgba(255,100,255,0.6)}}

/* 16) Utility */
.hidden{display:none!important}
.mt-20{margin-top:20px}
.mb-20{margin-bottom:20px}
.text-accent{color:var(--accent)}

/* =============================================================
   BLOCCO FINALE – RAINBOW: global square + vetro coerente + selezione leggibile
============================================================= */

/* Global square in rainbow */
body.theme-rainbow *, body.theme-rainbow *:before, body.theme-rainbow *:after{border-radius:0!important}

/* Vetro coerente su header/footer/menu/switcher in rainbow */
body.theme-rainbow .vxd-header,
body.theme-rainbow .vxd-footer,
body.theme-rainbow #ritual-switcher,
body.theme-rainbow .menu-sub{
  background:rgba(20,10,50,0.5)!important;
  backdrop-filter:blur(24px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(160%)!important;
  border:2px solid transparent!important;
  border-image:var(--rainbow-gradient) 1!important;
}

/* Menubar desktop non eredita il background mobile */
@media(min-width:769px){
  body.theme-rainbow .main-nav{
    background:transparent!important;
    backdrop-filter:none!important;
  }
}

/* Hover/selected coerenti e leggibili in rainbow su menubar desktop */
body.theme-rainbow .main-nav > a:hover,
body.theme-rainbow .menu-trigger:hover,
body.theme-rainbow .main-nav > a.active{
  background:rgba(255,255,255,0.12)!important;
  color:#fff!important;
  text-shadow:0 0 12px rgba(255,255,255,0.8),0 0 6px rgba(0,0,0,0.6)!important;
}

/* Mobile toggle rainbow animato */
body.theme-rainbow .mobile-toggle{
  background:var(--rainbow-gradient)!important;
  background-size:300% 300%!important;
  animation:rainbowFlow 10s linear infinite!important;
  border:2px solid transparent!important;
  border-image:linear-gradient(45deg,#ff3366,#ffee66,#33ffcc,#9966ff,#66ff99) 1!important;
}

/* Footer testo rainbow leggibile */
body.theme-rainbow .vxd-footer h1,
body.theme-rainbow .vxd-footer h2,
body.theme-rainbow .vxd-footer h3{
  background:var(--rainbow-gradient)!important;
  background-size:300% 300%!important;
  -webkit-background-clip:text!important; -webkit-text-fill-color:transparent!important;
  animation:rainbowText 9s linear infinite!important;
  text-shadow:0 2px 6px rgba(0,0,0,0.6)!important;
}
body.theme-rainbow .vxd-footer p{
  color:#ffffff!important;
  text-shadow:0 1px 4px rgba(0,0,0,0.6)!important;
}

/* Protezione temi: card angolari solo in rainbow, arrotondate altrove */
body.theme-necro .card, body.theme-dark .card, body.theme-xpop .card,
body.theme-necro .download-box, body.theme-dark .download-box, body.theme-xpop .download-box,
body.theme-necro .addon-card, body.theme-dark .addon-card, body.theme-xpop .addon-card{
  border-radius:20px!important;
  background:var(--card-bg)!important;
  border:1px solid var(--accent-soft)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.6)!important;
  backdrop-filter:blur(12px)!important;
}

/* =====================TESTO CUBITALE======================================= */

.cubital {
  font-family:'Century Gothic', sans-serif;
  font-weight:900;
  text-transform:uppercase;
  display:inline-block;
  letter-spacing:2px;
}

/* Effetto plastico blu */
.cubital.blue {
  color:#0088FF;
  font-size:32px;
  background:linear-gradient(to bottom,#33aaff,#0066cc);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
    1px 1px 0 #004488,
    2px 2px 2px rgba(0,0,0,0.6),
    3px 3px 4px rgba(0,0,0,0.4);
  margin-left:12px; /* spazio davanti alla M */
}

/* Effetto plastico rosso */
.cubital.red {
  color:#FF0033;
  font-size:32px;
  background:linear-gradient(to bottom,#ff3355,#990022);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
    1px 1px 0 #660011,
    2px 2px 2px rgba(0,0,0,0.6),
    3px 3px 4px rgba(0,0,0,0.4);
}

/* Effetto plastico giallo */
.cubital.yellow {
  color:#FFCC00;
  font-size:38px;
  background:linear-gradient(to bottom,#ffee66,#cc9900);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
    1px 1px 0 #996600,
    2px 2px 2px rgba(0,0,0,0.6),
    3px 3px 4px rgba(0,0,0,0.4);
}




/* ===================================================
   CARD REFINED OVERRIDE – anti-conflitto style.css
   Migliora forma, larghezza e respiro delle card
=================================================== */

/* GRID PIÙ ARIOSA */
.page-wrapper .grid-products,
.page-wrapper .grid-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
  gap: 40px !important;
  padding: 60px 10px !important;
}

/* CARD STRUTTURA MIGLIORATA */
.page-wrapper .card,
.page-wrapper .download-box,
.page-wrapper .addon-card {
  max-width: 100% !important;
  min-height: auto !important;
  border-radius: 28px !important;
  padding: 42px 36px !important;
  text-align: left !important;
  background: linear-gradient(145deg,
    rgba(30,30,30,0.85),
    rgba(0,0,0,0.95)
  ) !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.75) !important;
  transition: transform .45s ease, box-shadow .45s ease !important;
}

/* HOVER ELEGANTE */
.page-wrapper .card:hover,
.page-wrapper .download-box:hover,
.page-wrapper .addon-card:hover {
  transform: translateY(-10px) scale(1.02) !important;
}

/* TITOLI PIÙ ARMONICI */
.page-wrapper .card h2,
.page-wrapper .card h3 {
  font-size: 1.5rem !important;
  margin-bottom: 18px !important;
  letter-spacing: 1.4px !important;
}

/* TESTO PIÙ ARIOSO */
.page-wrapper .card p {
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

/* ===== VARIANTI PER TEMA ===== */

/* NECRO */
body.theme-necro .page-wrapper .card {
  border: 1px solid rgba(180,0,60,0.5) !important;
  box-shadow: 0 0 45px rgba(180,0,60,0.25) !important;
}

/* DARK */
body.theme-dark .page-wrapper .card {
  background: linear-gradient(145deg, #0c0c0c, #000) !important;
  border: 1px solid rgba(180,180,180,0.2) !important;
  box-shadow: 0 0 40px rgba(200,200,200,0.15) !important;
}

/* XPOP */
body.theme-xpop .page-wrapper .card {
  background: linear-gradient(145deg, #20002d, #080011) !important;
  border: 1px solid rgba(180,90,255,0.6) !important;
  box-shadow: 0 0 50px rgba(170,80,255,0.25) !important;
}

/* RAINBOW */
body.theme-rainbow .page-wrapper .card {
  background: rgba(20,10,40,0.9) !important;
  border-radius: 0 !important;
  border: 2px solid transparent !important;
  border-image: var(--rainbow-gradient) 1 !important;
  box-shadow: 0 0 40px rgba(255,255,255,0.2) !important;
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px){
  .page-wrapper .grid-products {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .page-wrapper .card {
    padding: 30px 24px !important;
  }
}


/* ===================== VIDEO ARCHIVE STRUCTURE ===================== */

.video-columns {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
  gap:40px;
  position:relative;
}

/* Linee divisorie verticali */
.video-columns::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    transparent 0%,
    rgba(var(--accent-rgb),0.2) 50%,
    transparent 100%
  );
  pointer-events:none;
  opacity:0.6;
}

/* Card video */
.video-item {
  background:var(--card-bg);
  border-radius:22px;
  padding:16px;
  border:1px solid var(--accent-soft);
  box-shadow:0 15px 40px rgba(0,0,0,.5);
  backdrop-filter:blur(14px);
}

.video-item iframe {
  width:100%;
  height:220px;
  border-radius:14px;
}

/* ===================== MENUBAR GLASS RESTORE ===================== */

.vxd-header {
  background:rgba(10,10,30,0.45) !important;
  backdrop-filter:blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(28px) saturate(180%) !important;
  border-bottom:1px solid var(--glass-border) !important;
  box-shadow:
    0 10px 35px rgba(0,0,0,0.8),
    0 0 35px rgba(var(--accent-rgb),0.25) !important;
}

/* Glow hover sui link */
.main-nav > a,
.menu-trigger {
  text-shadow:0 0 6px rgba(0,0,0,.6);
}

.main-nav > a:hover,
.menu-trigger:hover {
  color:var(--accent);
  text-shadow:
    0 0 10px rgba(var(--accent-rgb),0.8),
    0 0 20px rgba(var(--accent-rgb),0.6);
}

/* Tema rainbow leggibile + vetro */
body.theme-rainbow .vxd-header {
  background:linear-gradient(135deg,rgba(30,0,60,.6),rgba(0,0,0,.6)) !important;
  backdrop-filter:blur(22px) saturate(160%) !important;
  border-image:var(--rainbow-gradient) 1 !important;
}

/* ===============================
   VIDEO GRID – RITUAL ORDERED
================================ */

.video-columns{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:36px;
  position:relative;
}

/* Linee verticali divisorie eleganti */
.video-columns::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 33%,
      rgba(var(--accent-rgb),0.25) 34%,
      transparent 35%
    );
  pointer-events:none;
}

/* Card video */
.video-item{
  background:var(--card-bg);
  padding:18px;
  border-radius:20px;
  border:1.5px solid var(--accent-soft);
  backdrop-filter:blur(16px);
  box-shadow:0 20px 55px rgba(0,0,0,.65);
  transition:.45s ease;
  position:relative;
}

/* Hover rituale vero, non giocattolo */
.video-item:hover{
  transform:translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb),0.7),
    0 0 35px rgba(var(--accent-rgb),0.4),
    inset 0 0 20px rgba(0,0,0,0.6);
}

/* iframe */
.video-item iframe{
  width:100%;
  height:230px;
  border-radius:14px;
  box-shadow:inset 0 0 12px rgba(0,0,0,.6);
}

/* ===============================
   DOWNLOAD RITUAL – DEGNO
================================ */

.ritual-download{
  text-align:center;
}

.download-title{
  font-size:1.9rem;
  margin-bottom:8px;
  color:var(--accent);
  letter-spacing:1.5px;
}

.download-sub{
  font-size:0.95rem;
  color:var(--text-mid);
  margin-bottom:30px;
}

/* Bottone download vero */
.download-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:20px 30px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(var(--accent-rgb),0.9),#000);
  border:2px solid var(--accent);
  box-shadow:
    0 0 25px rgba(var(--accent-rgb),0.6),
    inset 0 0 10px rgba(0,0,0,0.8);
  transition:.35s ease;
  max-width:520px;
  margin:0 auto;
}

.download-cta:hover{
  transform:scale(1.05);
  box-shadow:
    0 0 45px rgba(var(--accent-rgb),0.9),
    inset 0 0 20px rgba(0,0,0,1);
}

.dl-icon{
  font-size:34px;
}

.dl-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  font-weight:800;
  letter-spacing:1px;
}

.dl-text small{
  font-size:0.75rem;
  opacity:.75;
}

/* ===============================
   CARD RITUALI TITOLATE SU CORNICE
================================ */

.ritual-frame{
  border:1.5px solid var(--accent-soft);
  border-radius:22px;
  padding:45px 30px 35px;
  background:var(--card-bg);
  backdrop-filter:blur(15px);
  box-shadow:0 30px 70px rgba(0,0,0,.65);
  position:relative;
}

/* Titolo inserito nella cornice */
.ritual-frame legend{
  position:absolute;
  top:-14px;
  left:30px;
  padding:4px 18px;
  background:#000;
  border:1px solid var(--accent);
  border-radius:14px;
  font-size:0.95rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:900;
  text-shadow:0 0 10px rgba(var(--accent-rgb),0.7);
}

/* Hover rituale elegante */
.ritual-frame:hover{
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb),0.6),
    0 0 35px rgba(var(--accent-rgb),0.4),
    inset 0 0 25px rgba(0,0,0,0.7);
  transform:translateY(-6px);
  transition:all .4s ease;
}

.ritual-content{
  margin-top:10px;
  line-height:1.7;
  color:var(--text-mid);
}


/* ===============================
   RAINBOW COMPATIBILITY
================================ */

body.theme-rainbow .ritual-frame{
  border:2px solid transparent;
  border-image:var(--rainbow-gradient) 1;
  border-radius:0;
}

body.theme-rainbow .ritual-frame legend{
  background:linear-gradient(135deg,#000,#000);
  border-image:var(--rainbow-gradient) 1;
  color:#fff;
  text-shadow:0 0 10px rgba(255,255,255,.6);
}

/* =============================================================
   RAINBOW – SUPER GLASS CARD DEFINITIVE CLARITY FIX
   Rafforza il vetro e aumenta contrasto senza perdere il mood
============================================================= */

body.theme-rainbow .page-wrapper .card,
body.theme-rainbow .card,
body.theme-rainbow .addon-card,
body.theme-rainbow .download-box {
  /* vetro più chiaro e leggibile */
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(22px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(200%) !important;

  /* bordo più vivo e meno “opaco” */
  border: 2px solid rgba(255,255,255,0.4) !important;
  border-image: var(--rainbow-gradient) 1 !important;

  /* glow controllato, non esplosivo */
  box-shadow:
    0 0 30px rgba(255,255,255,0.25),
    inset 0 0 40px rgba(255,255,255,0.08),
    inset 0 0 10px rgba(0,0,0,0.55) !important;
}

/* Hover più "vetroso" e meno “acceso” */
body.theme-rainbow .page-wrapper .card:hover,
body.theme-rainbow .card:hover,
body.theme-rainbow .addon-card:hover,
body.theme-rainbow .download-box:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 0 55px rgba(255,255,255,0.4),
    inset 0 0 60px rgba(255,255,255,0.12),
    inset 0 0 20px rgba(0,0,0,0.6) !important;
}

/* Testi leggibili anche quando il vetro è chiaro */
body.theme-rainbow .card p,
body.theme-rainbow .addon-card p,
body.theme-rainbow .download-box p {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.65) !important;
}

body.theme-rainbow .card h2,
body.theme-rainbow .card h3 {
  text-shadow:
    1px 1px 3px rgba(0,0,0,0.7),
    0 0 8px rgba(255,255,255,0.25) !important;
}