@font-face{font-family:'Fredoka';src:url('fonts/fredoka-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fredoka';src:url('fonts/fredoka-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fredoka';src:url('fonts/fredoka-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ============================================================
   LiquidMC v2 — Master Stylesheet
   ============================================================ */

/* ── No text selection ── */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ── Tokens ── */
:root {
  --bg0: #f8f9fb;
  --bg1: #f0f2f6;

  /* LIQUID GRAY ACCENT */
  --a1: #6b7a90;
  --a2: #8b9ab0;
  --a3: #b8c8d8;

  /* SOFT GRAY */
  --c1: #7a8a9e;
  --c2: #9aabb8;
  --c3: #c0d0dc;

  --text: #1a2030;
  --muted: rgba(26,32,48,.55);
  --muted-hi: rgba(26,32,48,.80);
  --glass: rgba(255,255,255,.65);
  --glass-hi: rgba(255,255,255,.90);
  --stroke: rgba(107,122,144,.14);
  --stroke-hi: rgba(107,122,144,.28);
  --r: 20px;
  --glow: 0 0 40px rgba(107,122,144,.18);
}

/* ── Reset ── */
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%}
78%{opacity:.82}
  100%{clip-path:circle(150vmax at 50% 50%);opacity:0}
}
body{
  font-family:'Fredoka',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  font-weight:700;
  color:var(--text);
  background:var(--bg0);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}

/* ── Layout ── */
.container{width:min(1200px,calc(100% - 48px));margin:0 auto}
.page{min-height:100dvh;display:flex;flex-direction:column}

/* ── Background ── */
#bgGrid{position:fixed;inset:0;z-index:-4;width:100%;height:100%;pointer-events:none}
#nebulaCanvas{position:fixed;inset:0;z-index:-3;width:100%;height:100%;opacity:.05}

body::before{
  content:"";
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(ellipse 1400px 900px at 15% 0%, rgba(107,122,144,.06),transparent 60%),
    radial-gradient(ellipse 1000px 700px at 85% 20%, rgba(154,171,184,.04),transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 100%, rgba(139,154,176,.05),transparent 60%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
  animation:bgPulse 14s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes bgPulse{
  0%{opacity:.85}
  100%{opacity:1}
}

/* ── Gradient text — light gray → dark gray animated ── */
.grad{
  background:linear-gradient(90deg,#7a8fa8,#1e2d40);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.grad-anim{
  background:linear-gradient(90deg,#7a8fa8,#1e2d40,#7a8fa8,#1e2d40,#7a8fa8);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradShift 4s linear infinite;
}
@keyframes gradShift{to{background-position:-300% 0}}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(28px) saturate(1.6);
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.72));
  border-bottom:1px solid var(--stroke);
  box-shadow:0 8px 32px rgba(107,122,144,.07);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:13px 0;
}

/* logo — horizontal image, no text next to it */
.brand{display:flex;align-items:center;gap:10px;min-width:56px;flex-shrink:0}
.brand img{
  width:auto;height:42px;max-width:180px;border-radius:8px;
  object-fit:contain;
  filter:brightness(1) drop-shadow(0 0 8px rgba(107,122,144,.22)) drop-shadow(0 0 4px rgba(122,138,158,.18));
  transition:filter .3s,transform .3s;
}

/* ── PLANET DECO ── */
.heroPlanetDeco{
  position:absolute;right:-60px;top:-40px;
  width:420px;height:420px;object-fit:contain;
  opacity:.18;pointer-events:none;z-index:0;
  filter:drop-shadow(0 0 60px rgba(154,171,184,.5));
}
@media(max-width:900px){.heroPlanetDeco{width:260px;height:260px;right:-30px;top:-20px;opacity:.12}}

/* ── ICON2 BRAND BAR ── */
.icon2Bar{
  padding:28px 0;
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
  background:linear-gradient(90deg,rgba(107,122,144,.06),rgba(154,171,184,.04),rgba(107,122,144,.06));
}
.icon2BarInner{
  display:flex;align-items:center;justify-content:center;gap:20px;
}
.icon2Img{
  height:80px;width:auto;object-fit:contain;
  filter:drop-shadow(0 0 20px rgba(154,171,184,.6)) drop-shadow(0 0 10px rgba(139,154,176,.4));
}
.icon2Text{
  font-size:clamp(2rem,5vw,3.5rem);font-weight:700;letter-spacing:.02em;
}
.brand:hover img{
  filter:drop-shadow(0 0 20px rgba(107,122,144,.5)) drop-shadow(0 0 10px rgba(122,138,158,.4));
  transform:scale(1.05);
}
.brandName{display:none}

/* nav menu */
.menu{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.menu a{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 12px;border-radius:12px;
  color:var(--muted);border:1px solid transparent;
  font-size:14px;font-weight:600;
  transition:color .2s,background .2s,border-color .2s,transform .15s;
  position:relative;
}
.menu a::after{
  content:"";
  position:absolute;bottom:4px;left:12px;right:12px;
  height:2px;background:linear-gradient(90deg,var(--a1),var(--c2));
  border-radius:99px;transform:scaleX(0);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.menu a:hover::after,.menu a.active::after{transform:scaleX(1)}
.menu a:hover{color:var(--text);background:var(--glass);border-color:var(--stroke);transform:translateY(-1px)}
.menu a.active{color:var(--text);background:rgba(107,122,144,.08);border-color:var(--stroke)}
.menu a svg{width:15px;height:15px;opacity:.75;flex-shrink:0}
.menu a span{background:linear-gradient(90deg,var(--a2),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* right controls */
.rightControls{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  padding-right:180px;
}

/* pill */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:50px;
  border:1px solid var(--stroke);background:var(--glass);
  font-size:14px;font-weight:600;
  transition:background .2s,border-color .2s,transform .15s;
  cursor:pointer;color:var(--text);
  backdrop-filter:blur(12px);
}
.pill:hover{background:var(--glass-hi);border-color:var(--stroke-hi);transform:translateY(-1px)}
.pill b,.pill span{background:linear-gradient(90deg,var(--a2),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.pill svg{opacity:.7}

/* lang dropdown */
.langWrap{position:relative}
.langBtn{
  display:inline-flex;align-items:center;padding:8px 12px;border-radius:12px;
  border:1px solid var(--stroke);background:var(--glass);
  font-weight:800;font-size:13px;cursor:pointer;
  background:linear-gradient(90deg,var(--a1),var(--c2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  border:1px solid var(--stroke);background-color:var(--glass);
}
.langMenu{
  position:absolute;right:0;top:calc(100% + 8px);
  min-width:190px;border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.94);backdrop-filter:blur(24px);
  box-shadow:0 20px 60px rgba(107,122,144,.12),0 0 0 1px rgba(107,122,144,.08);
  padding:6px;display:none;z-index:9999;
}
.langMenu.open{display:block;animation:dropIn .15s ease}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.langItem{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:9px 12px;border-radius:10px;
  border:1px solid transparent;background:transparent;
  color:var(--muted-hi);font-size:14px;
  transition:background .15s,border-color .15s;
}
.langItem:hover{background:var(--glass);border-color:var(--stroke)}
.langItem span{opacity:.5;font-size:12px}

68%{opacity:1;transform:scale(1.45) rotate(18deg)}
  100%{opacity:.95;transform:scale(1) rotate(0)}
}
/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:50px;padding:11px 22px;
  border:1px solid var(--stroke);background:var(--glass);
  color:var(--text);font-size:14px;font-weight:700;
  cursor:pointer;white-space:nowrap;
  transition:transform .22s cubic-bezier(.16,1,.3,1),background .22s,border-color .22s,box-shadow .22s;
  position:relative;overflow:hidden;
  backdrop-filter:blur(12px);
}
.btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.10) 50%,transparent 60%);
  transform:translateX(-100%);transition:transform .45s ease;pointer-events:none;
}
.btn:hover::before{transform:translateX(100%)}
.btn:hover{background:var(--glass-hi);border-color:var(--stroke-hi);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.btn:active{transform:translateY(0) scale(.97)}
.btn svg{opacity:.8;flex-shrink:0}

.btn.primary{
  background:linear-gradient(135deg,var(--a1),var(--c2));
  border:none;color:#fff;
  box-shadow:0 0 0 0 rgba(107,122,144,.35);
  animation:btnPulse 3s ease-in-out infinite;
}
.btn.primary:hover{
  filter:brightness(1.1);transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(107,122,144,.30);
  animation:none;
}
@keyframes btnPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(107,122,144,.35)}
  50%{box-shadow:0 0 0 7px rgba(107,122,144,.0)}
}
.btn.ghost{background:transparent;border-color:var(--stroke)}
.btn.ghost:hover{background:var(--glass)}

/* ripple */
.ripple{
  position:absolute;border-radius:50%;
  transform:scale(0);animation:rippleAnim .5s linear;
  background:rgba(139,154,176,.18);pointer-events:none;
}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding:60px 0 44px;
  min-height:90dvh;
  display:flex;align-items:center;
}
.heroVideo{position:absolute;inset:0;z-index:-1;overflow:hidden}
.heroVideo video{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.05) brightness(.5);
}
.heroVideo::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 900px 600px at 20% 30%,rgba(107,122,144,.35),transparent 60%),
    radial-gradient(ellipse 700px 500px at 80% 20%,rgba(100,114,136,.25),transparent 55%),
    linear-gradient(180deg,rgba(6,4,15,.25) 0%,rgba(6,4,15,.80) 100%);
}

/* floating orbs */
.heroOrbs{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.orb{
  position:absolute;border-radius:50%;
  filter:blur(80px);opacity:.18;
  animation:orbFloat linear infinite;
}
.orb:nth-child(1){
  width:500px;height:500px;
  background:radial-gradient(circle,var(--a1),transparent 70%);
  left:-10%;top:10%;animation-duration:22s;
}
.orb:nth-child(2){
  width:350px;height:350px;
  background:radial-gradient(circle,var(--a2),transparent 70%);
  right:-8%;top:30%;animation-duration:17s;animation-delay:-6s;
}
.orb:nth-child(3){
  width:280px;height:280px;
  background:radial-gradient(circle,var(--c2),transparent 70%);
  left:45%;bottom:5%;animation-duration:14s;animation-delay:-9s;
}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(28px,-38px) scale(1.04)}
  50%{transform:translate(-18px,28px) scale(.96)}
  75%{transform:translate(36px,18px) scale(1.02)}
}

.heroGrid{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:20px;align-items:start;position:relative;z-index:1;
}
@media(max-width:960px){.heroGrid{grid-template-columns:1fr}}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  border-radius:var(--r);
  border:1px solid var(--stroke);
  background:var(--glass);
  box-shadow:0 8px 32px rgba(107,122,144,.08),0 2px 8px rgba(0,0,0,.04);
  overflow:hidden;
  transition:box-shadow .3s,transform .3s,border-color .3s;
  transform-style:preserve-3d;
  backdrop-filter:blur(16px);
}
.card:hover{border-color:var(--stroke-hi);box-shadow:0 16px 50px rgba(107,122,144,.14),0 0 28px rgba(122,138,158,.10)}

.card.glowBorder{border:1px solid transparent;background-clip:padding-box;position:relative}
.card.glowBorder::before{
  content:"";position:absolute;inset:-1px;
  border-radius:calc(var(--r) + 1px);
  background:linear-gradient(135deg,var(--a1),var(--a2),var(--c2),var(--a1));
  background-size:300% 300%;animation:borderShift 6s linear infinite;
  z-index:-1;opacity:0;transition:opacity .35s;
}
.card.glowBorder:hover::before{opacity:1}
@keyframes borderShift{to{background-position:300% 0}}

.pad{padding:20px}

/* badges */
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:999px;
  border:1px solid var(--stroke);background:linear-gradient(135deg,rgba(107,122,144,.10),rgba(122,138,158,.08));
  color:var(--muted-hi);font-size:12px;font-weight:600;
  letter-spacing:.02em;
  backdrop-filter:blur(8px);
}
.badge svg{width:13px;height:13px;opacity:.8}

/* typography */
.title{font-size:50px;line-height:1.04;letter-spacing:-.8px;font-weight:900;color:var(--text)}
@media(max-width:640px){.title{font-size:38px}}
@media(max-width:420px){.title{font-size:30px}}

.lead{margin:12px 0 18px;color:var(--muted-hi);font-size:15.5px;line-height:1.65}
.h2{font-size:22px;font-weight:900;margin:0 0 6px;letter-spacing:-.3px;color:var(--text)}
.p{margin:0;color:var(--muted);line-height:1.6;font-size:14px}

.heroActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
hr.sep{border:none;border-top:1px solid rgba(139,154,176,.15);margin:16px 0}
.kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,237,255,.45);margin-bottom:4px}

/* IP box */
.ipBox{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-radius:14px;
  border:1px solid var(--stroke);background:rgba(107,122,144,.08);
}
.ipText{font-weight:900;font-size:18px;letter-spacing:.6px;color:var(--text);font-family:ui-monospace,"Cascadia Code",monospace}

/* stats */
.statsRow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
@media(max-width:480px){.statsRow{grid-template-columns:1fr}}
.statBox{
  text-align:center;padding:14px 8px;border-radius:14px;
  border:1px solid var(--stroke);background:rgba(107,122,144,.07);
}
.statNum{
  font-size:26px;font-weight:700;
  background:linear-gradient(135deg,var(--a2),var(--c2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.statLabel{font-size:12px;color:var(--muted);margin-top:3px;font-weight:500}

/* section */
.section{padding:44px 0}
.pageHero{padding:60px 0 28px;position:relative;overflow:hidden}
.pageHero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 900px 500px at 50% 0%,rgba(107,122,144,.15),transparent 60%);
  pointer-events:none;
}
.pageHero .container{position:relative;z-index:1}

/* section actions centering */
.sectionActions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}

/* grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}

/* notice */
.notice{
  padding:13px 15px;border-radius:13px;
  border:1px solid var(--stroke);background:rgba(107,122,144,.06);
  color:var(--muted);line-height:1.55;font-size:14px;
}

/* social row */
.socialRow{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* ── MODE CARDS — Home carousel ── */
.modeCarouselWrap{
  position:relative;
  margin:0 -4px;
}
.modeCarousel{
  display:flex;gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:6px 4px 14px;
  cursor:grab;
}
.modeCarousel:active{cursor:grabbing}
.modeCarousel::-webkit-scrollbar{display:none}
.modeCarouselCard{
  flex:0 0 190px;
  scroll-snap-align:start;
}
/* scrollbar dots indicator */
.carouselDots{display:flex;gap:6px;justify-content:center;margin-top:4px}
.carouselDot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(139,154,176,.25);
  transition:background .2s,transform .2s;cursor:pointer;border:none;
}
.carouselDot.active{background:var(--a2);transform:scale(1.3)}

/* mode card thumbnails — vivid game-specific gradients */
.modThumb{
  height:110px;display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--stroke);overflow:hidden;position:relative;
}
.modThumb::after, .modThumbLg::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(255,255,255,.025) 8px,rgba(255,255,255,.025) 9px);
  pointer-events:none;z-index:0;
}
.modThumb svg{width:44px;height:44px;opacity:.75;color:#fff;position:relative;z-index:2}
.modThumb::before{content:"";position:absolute;inset:0;opacity:.9}
.modThumb-smp::before{background:linear-gradient(135deg,#064e3b,#065f46,#1e1b4b)}
.modThumb-bedwars::before{background:linear-gradient(135deg,#7f1d1d,#991b1b,#450a0a)}
.modThumb-practice::before{background:linear-gradient(135deg,#0c4a6e,#0369a1,#164e63)}
.modThumb-buildbattle::before{background:linear-gradient(135deg,#78350f,#b45309,#92400e)}
.modThumb-pillar::before{background:linear-gradient(135deg,#1e1b4b,#312e81,#0f172a)}
.modThumb-duels::before{background:linear-gradient(135deg,#881337,#9f1239,#4c0519)}

/* ── MODS page large cards ── */
.modCardLarge{grid-column:span 6}
@media(max-width:700px){.modCardLarge{grid-column:span 12}}

.modThumbLg{
  height:200px;display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--stroke);overflow:hidden;position:relative;
}
.modThumbLg::before{content:"";position:absolute;inset:0;opacity:.95}
.modThumbLg-smp::before{background:linear-gradient(135deg,#064e3b,#065f46,#1e1b4b)}
.modThumbLg-bedwars::before{background:linear-gradient(135deg,#7f1d1d,#991b1b,#450a0a)}
.modThumbLg-practice::before{background:linear-gradient(135deg,#0c4a6e,#0369a1,#164e63)}
.modThumbLg-buildbattle::before{background:linear-gradient(135deg,#78350f,#b45309,#92400e)}
.modThumbLg-pillar::before{background:linear-gradient(135deg,#1e1b4b,#312e81,#0f172a)}
.modThumbLg-duels::before{background:linear-gradient(135deg,#881337,#9f1239,#4c0519)}
.modThumbLg svg{width:60px;height:60px;color:#fff;opacity:.85;position:relative;z-index:2}

.cardTitle{font-weight:900;margin:0 0 6px;font-size:15px;color:var(--text)}
.small{font-size:13px;color:var(--muted-hi);line-height:1.55;margin:0}

.modeTag{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:8px;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--a1),var(--c2));color:#fff;
  margin-bottom:8px;
}
.modeTag svg{width:12px;height:12px}

/* ── STORE ── */
.rankCard{grid-column:span 4}
@media(max-width:1040px){.rankCard{grid-column:span 6}}
@media(max-width:580px){.rankCard{grid-column:span 12}}
.rankCard.featured{grid-column:span 4}
@media(max-width:1040px){.rankCard.featured{grid-column:span 12}}

.featuredBanner{
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,var(--a1),var(--c2));
  padding:4px 16px;border-radius:0 0 11px 11px;
  font-size:11px;font-weight:800;color:#fff;white-space:nowrap;z-index:2;
  letter-spacing:.06em;text-transform:uppercase;
}
.rankHeader{
  padding:22px 20px 16px;
  border-bottom:1px solid var(--stroke);text-align:center;
}
.rankIcon{
  width:52px;height:52px;border-radius:16px;
  background:linear-gradient(135deg,var(--a1),var(--c2));
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;
}
.rankIcon svg{width:26px;height:26px;color:#fff}
.rankName{font-size:20px;font-weight:900;margin-bottom:4px;color:var(--text)}
.rankDesc{font-size:13px;color:var(--muted-hi);line-height:1.5}
.rankBadge{
  display:inline-block;padding:4px 12px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--a1),var(--c2));color:#fff;margin-bottom:8px;
}
.rankPerks{padding:14px 20px}
.rankPerk{
  display:flex;align-items:center;gap:10px;
  padding:7px 0;border-bottom:1px solid rgba(139,154,176,.06);
  font-size:13.5px;color:var(--muted-hi);
}
.rankPerk:last-child{border-bottom:none}
.rankPerkIcon{
  width:18px;height:18px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--a1),var(--c2));
  display:flex;align-items:center;justify-content:center;
}
.rankPerkIcon svg{width:10px;height:10px;color:#fff}
.rankFooter{padding:14px 20px 20px;border-top:1px solid var(--stroke);text-align:center}
.rankPrice{
  font-size:30px;font-weight:700;
  background:linear-gradient(90deg,var(--a2),var(--c2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rankPricePer{font-size:13px;color:var(--muted);margin-bottom:12px}

/* ── STAFF ── */
.staffCard{grid-column:span 4}
@media(max-width:1040px){.staffCard{grid-column:span 6}}
@media(max-width:580px){.staffCard{grid-column:span 12}}

.staffRole{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  margin-bottom:10px;
}
.staffRole svg{width:12px;height:12px}
.role-owner{background:linear-gradient(90deg,rgba(107,122,144,.35),rgba(122,138,158,.2));color:var(--a3);border:1px solid rgba(139,154,176,.25)}
.role-admin{background:linear-gradient(90deg,rgba(100,114,136,.35),rgba(122,138,158,.2));color:var(--a2);border:1px solid rgba(107,122,144,.25)}
.role-mod{background:linear-gradient(90deg,rgba(95,110,130,.35),rgba(122,138,158,.2));color:var(--a3);border:1px solid rgba(100,114,136,.25)}
.role-helper{background:linear-gradient(90deg,rgba(107,122,144,.25),rgba(122,138,158,.15));color:var(--a3);border:1px solid rgba(154,171,192,.2)}

.memberList{list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:10px}
.memberList li{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:11px;
  background:rgba(107,122,144,.07);border:1px solid rgba(139,154,176,.1);
  font-size:13.5px;font-weight:600;color:var(--text);
  transition:background .2s,transform .2s;
}
.memberList li:hover{background:rgba(107,122,144,.14);transform:translateX(3px)}
.memberList li.empty{color:var(--muted);font-weight:400;font-style:italic;font-size:13px}
.memberList li::before{
  content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--a2),var(--c2));
}

/* ── RULES ── */
.ruleSection{margin-bottom:0}
.ruleSectionTitle{
  display:flex;align-items:center;gap:10px;
  font-size:18px;font-weight:900;margin-bottom:14px;color:var(--text);
}
.ruleSectionTitle .ruleIcon{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--a1),var(--c2));
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ruleSectionTitle .ruleIcon svg{width:17px;height:17px;color:#fff}

.ruleList{list-style:none;display:flex;flex-direction:column;gap:6px}
.ruleList li{
  padding:10px 14px;border-radius:11px;
  background:rgba(107,122,144,.06);border:1px solid rgba(139,154,176,.1);
  font-size:13.5px;line-height:1.6;color:var(--muted-hi);
  display:flex;align-items:flex-start;gap:10px;
  transition:background .2s,border-color .2s,transform .2s;
}
.ruleList li:hover{background:rgba(107,122,144,.12);border-color:var(--stroke);transform:translateX(3px)}
.ruleArrow{
  flex-shrink:0;margin-top:2px;
  width:16px;height:16px;opacity:.6;
  background:linear-gradient(135deg,var(--a2),var(--c2));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── FOOTER ── */
.footer{
  margin-top:auto;border-top:1px solid var(--stroke);
  background:rgba(0,0,0,.2);padding:30px 0 20px;
}
.footerGrid{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:20px;align-items:start;
}
@media(max-width:940px){.footerGrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footerGrid{grid-template-columns:1fr}}
.footerLogoRow{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.footerLogoRow img{width:26px;height:26px;border-radius:8px;opacity:.9}
.footerLogoRow b{font-size:15px;font-weight:900;color:var(--text)}
.footerDesc{color:var(--muted);font-size:13.5px;line-height:1.6}
.footerTitle{
  font-weight:800;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(240,237,255,.4);margin-bottom:12px;
}
.footerLinks{display:flex;flex-direction:column;gap:9px}
.footerLinks a{color:var(--muted);font-size:13.5px;transition:color .2s,transform .15s;display:inline-block}
.footerLinks a:hover{color:var(--text);transform:translateX(3px)}
.footerBottom{
  margin-top:20px;padding-top:14px;border-top:1px solid rgba(139,154,176,.08);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:rgba(240,237,255,.35);font-size:12.5px;
}

/* ── MODE LOCKED / COMING SOON ── */
.modeLocked{position:relative;pointer-events:none;opacity:.55}
.modeLocked .modThumb,.modeLocked .modThumbLg{filter:grayscale(.6)}
.modeLockedBadge{
  position:absolute;top:8px;right:8px;z-index:3;
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:99px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  border:1px solid rgba(139,154,176,.3);
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(240,237,255,.7);
}
.modeLockedBadge svg{width:10px;height:10px;opacity:.8}
.modeActiveLink{cursor:pointer;pointer-events:auto}
.modeActiveBadge{
  position:absolute;top:8px;right:8px;z-index:3;
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:99px;
  background:linear-gradient(90deg,var(--a1),var(--c2));
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;
  box-shadow:0 0 14px rgba(107,122,144,.5);
}
.modeActiveBadge svg{width:10px;height:10px}

/* ── SCROLL REVEAL ── */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.40s}
.reveal[data-delay="6"]{transition-delay:.48s}

/* hero text slide-up */
.heroLine{overflow:hidden}
.heroLine span{display:block;animation:slideUp .8s cubic-bezier(.16,1,.3,1) both}
.heroLine:nth-child(2) span{animation-delay:.12s}
.heroLine:nth-child(3) span{animation-delay:.22s}
@keyframes slideUp{from{transform:translateY(110%);opacity:0}to{transform:translateY(0);opacity:1}}

.cursor{
  display:inline-block;width:2px;height:.9em;
  background:var(--a3);margin-left:2px;vertical-align:middle;
  animation:blink .8s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── MOBILE NAV ── */
@media(max-width:780px){
  .menu{display:none}
  .menu.open{
    display:flex;flex-direction:column;align-items:stretch;
    position:fixed;inset:0;top:68px;
    background:rgba(255,255,255,.96);backdrop-filter:blur(28px);
    padding:16px;z-index:99;gap:6px;
    animation:dropIn .2s ease;
  }
  .menu.open a{padding:13px 16px;font-size:14px;border-radius:12px;border:1px solid var(--stroke)}
  .menuToggle{display:flex!important}
}
.menuToggle{
  display:none;flex-direction:column;gap:5px;
  padding:9px;border-radius:11px;border:1px solid var(--stroke);background:var(--glass);
}
.menuToggle span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform .28s,opacity .28s}
.menuToggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menuToggle.open span:nth-child(2){opacity:0}
.menuToggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── PLANET DECORATION (CSS-drawn animated) ── */
.planetDeco{
  position:relative;width:280px;height:280px;flex-shrink:0;pointer-events:none;
  animation:planetReveal .9s cubic-bezier(.16,1,.3,1) both,
             planetFloat 7s ease-in-out infinite .9s;
}
@keyframes planetReveal{
  from{opacity:0;transform:scale(.5) rotate(-25deg)}
  to{opacity:1;transform:scale(1) rotate(0deg)}
}
@keyframes planetFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-14px) rotate(3deg)}
}

/* Glow halo */
.planetGlow{
  position:absolute;inset:-25%;border-radius:50%;
  background:radial-gradient(circle,rgba(154,171,184,.18) 0%,rgba(107,122,144,.1) 50%,transparent 70%);
  animation:glowPulse 3.5s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{opacity:.7;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}

/* Ring back (behind planet) */
.planetRingBack{
  position:absolute;top:50%;left:50%;
  width:160%;height:32%;
  transform:translate(-50%,-50%) rotateX(72deg);
  border-radius:50%;
  border:14px solid rgba(160,30,30,.35);
  border-left-color:transparent;border-right-color:transparent;
  filter:blur(1px);
}

/* Planet body */
.planetBody{
  position:absolute;top:20%;left:20%;width:60%;height:60%;
  border-radius:50%;
  background:
    radial-gradient(ellipse 40% 38% at 32% 30%, #ff9966, transparent),
    radial-gradient(ellipse 70% 70% at 50% 50%, #6b7a90 0%, #1e3a8a 55%, #0c1a3d 100%);
  box-shadow:
    0 0 50px rgba(154,171,184,.5),
    0 0 90px rgba(154,171,184,.2),
    inset -18px -10px 28px rgba(0,0,0,.55);
  overflow:hidden;
}
/* crater spots */
.planetBody::before{
  content:"";position:absolute;
  width:18%;height:18%;border-radius:50%;
  top:25%;left:30%;
  background:rgba(0,0,0,.18);
  box-shadow:
    40px 10px 0 5px rgba(0,0,0,.12),
    -20px 30px 0 3px rgba(0,0,0,.1),
    25px -10px 0 4px rgba(0,0,0,.09);
}

/* Ring front (over planet) */
.planetRingFront{
  position:absolute;top:50%;left:50%;
  width:160%;height:32%;
  transform:translate(-50%,-50%) rotateX(72deg);
  border-radius:50%;
  border:14px solid transparent;
  border-top-color:rgba(154,171,184,.8);
  border-right-color:rgba(154,171,184,.6);
  box-shadow:0 0 18px rgba(154,171,184,.4);
}
.planetRingFront2{
  position:absolute;top:50%;left:50%;
  width:135%;height:25%;
  transform:translate(-50%,-50%) rotateX(72deg);
  border-radius:50%;
  border:7px solid transparent;
  border-top-color:rgba(184,200,220,.55);
  border-right-color:rgba(184,200,220,.4);
}

/* Planet used on hero */
.heroPlanet{
  position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  z-index:0;opacity:.85;
}
@media(max-width:900px){.heroPlanet{display:none}}

/* ── CRACK BADGE ── */
.crackBadge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:99px;
  background:rgba(154,171,184,.12);border:1px solid rgba(154,171,184,.3);
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c3);
}
.crackBadge svg{width:11px;height:11px;stroke:var(--c3);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ── SHOP KITS ── */
.kitCard{
  grid-column:span 4;position:relative;text-align:center;
}
@media(max-width:1040px){.kitCard{grid-column:span 4}}
@media(max-width:760px){.kitCard{grid-column:span 6}}
@media(max-width:480px){.kitCard{grid-column:span 12}}
.kitBanner{
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,var(--a1),var(--c2));
  padding:3px 12px;border-radius:0 0 9px 9px;
  font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;white-space:nowrap;z-index:2;
}

/* ── JOIN TEAM SECTION ── */
.joinTeamFull{
  grid-column:span 12;
  text-align:center;padding:40px 20px;
}

/* langMenu light mode */
html[data-scheme="light"] .langMenu{background:rgba(244,240,255,.97);border-color:rgba(107,122,144,.14)}

/* ═══════════════════════════════════════════
   LOADING SCREEN
═══════════════════════════════════════════ */
#liquidLoader{
  position:fixed;inset:0;z-index:9999;
  background:#f4f7fe;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  transition:opacity .55s ease,visibility .55s ease;
}
#liquidLoader.out{opacity:0;visibility:hidden;pointer-events:none}
.loaderPlanet{
  width:120px;height:120px;border-radius:50%;overflow:hidden;
  position:relative;
  box-shadow:0 0 60px rgba(107,122,144,.40),0 0 120px rgba(122,138,158,.18);
  margin-bottom:28px;
  animation:loaderSlideUp .7s cubic-bezier(.16,1,.3,1) both;
  background:linear-gradient(135deg,#6b7a90,#9aabb8);
}
.loaderPlanet img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:50%;
  animation:planet2DImg 10s linear infinite;
}
.loaderPlanet img.broken{display:none}
.loaderPlanetCSS{
  position:absolute;inset:0;
  border-radius:50%;overflow:hidden;
  background:radial-gradient(ellipse 70% 70% at 50% 50%, #6b7a90 0%, #1e3a8a 55%, #0c1a3d 100%);
}
.loaderPlanetCSS::before{
  content:"";
  position:absolute;top:0;left:-50%;
  width:200%;height:100%;
  background:
    radial-gradient(ellipse 20% 10% at 25% 38%,rgba(255,130,70,.7),transparent),
    radial-gradient(ellipse 12% 6% at 63% 62%,rgba(255,80,40,.5),transparent),
    linear-gradient(180deg,
      #0c1a3d 0%,#1e3a8a 10%,#6b7a90 20%,
      #8b9ab0 30%,#6b7a90 42%,#1d4ed8 52%,
      #9aabb8 62%,#c0d0dc 72%,#0369a1 82%,#0c1a3d 100%);
  animation:planetSurfaceScroll 3s linear infinite;
}
.loaderPlanetCSS::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset -50px -35px 70px rgba(0,0,0,.7);
}
.loaderTitle{
  font-size:2.2rem;font-weight:700;letter-spacing:.04em;
  background:linear-gradient(90deg,#6b7a90,#9aabb8,#c0d0dc);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:4px;
  animation:loaderSlideUp .7s .15s cubic-bezier(.16,1,.3,1) both;
}
.loaderSub{
  font-size:13px;color:rgba(15,23,42,.45);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  animation:loaderSlideUp .7s .25s cubic-bezier(.16,1,.3,1) both;
}
.loaderDots{
  display:flex;gap:7px;margin-top:22px;
  animation:loaderSlideUp .7s .35s cubic-bezier(.16,1,.3,1) both;
}
.loaderDots span{
  width:7px;height:7px;border-radius:50%;
  background:var(--a2);
  animation:loaderDot 1.1s ease-in-out infinite;
}
.loaderDots span:nth-child(2){animation-delay:.15s}
.loaderDots span:nth-child(3){animation-delay:.3s}
@keyframes loaderDot{
  0%,80%,100%{transform:scale(.55);opacity:.3}
  40%{transform:scale(1);opacity:1}
}
@keyframes loaderSlideUp{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}

/* ═══════════════════════════════════════════
   2D PLANET — fixed top-right
═══════════════════════════════════════════ */
.planet2D{
  position:fixed;top:-95px;right:-95px;
  width:420px;height:420px;
  border-radius:50%;overflow:hidden;
  pointer-events:none;z-index:0;
  animation:planet2DEntry 1.8s 1.2s cubic-bezier(.16,1,.3,1) both;
  box-shadow:
    0 0 0 2px rgba(107,122,144,.08),
    0 0 90px rgba(107,122,144,.22),
    0 0 200px rgba(122,138,158,.10),
    inset -80px -55px 100px rgba(255,255,255,.20);
  opacity:.15;
}
.planet2DSurface{
  position:absolute;top:0;left:-50%;
  width:200%;height:100%;
  background:
    radial-gradient(ellipse 22% 9% at 28% 38%,rgba(255,255,255,.35),transparent),
    radial-gradient(ellipse 14% 6% at 66% 63%,rgba(154,171,192,.45),transparent),
    radial-gradient(ellipse 32% 5% at 82% 24%,rgba(122,138,158,.30),transparent),
    linear-gradient(180deg,
      #0c1a3d 0%,#1e3a8a 15%,#6b7a90 30%,
      #8b9ab0 45%,#9aabb8 58%,#c0d0dc 70%,
      #6b7a90 80%,#1e40af 90%,#0c1a3d 100%
    );
  animation:planetSurfaceScroll 18s linear infinite;
}
.planet2DAtmo{
  position:absolute;inset:-8%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 48%,rgba(154,171,184,.09) 65%,rgba(107,122,144,.06) 80%,transparent 95%);
  animation:planet2DGlow 5s ease-in-out infinite;
}
.planet2DImg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:50%;
  animation:planet2DImg 30s linear infinite;
}
@keyframes planetSurfaceScroll{
  from{transform:translateX(0)}
  to{transform:translateX(50%)}
}
@keyframes planet2DImg{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes planet2DEntry{
  from{opacity:0;transform:scale(.25) translate(120px,-120px)}
  to{opacity:1;transform:scale(1) translate(0,0)}
}
@keyframes planet2DGlow{
  0%,100%{opacity:.7}
  50%{opacity:1}
}
@media(max-width:900px){
  .planet2D{width:240px;height:240px;top:-55px;right:-55px}
}
@media(max-width:600px){
  .planet2D{width:160px;height:160px;top:-35px;right:-35px}
}

/* ═══════════════════════════════════════════
   PURCHASE MODAL
═══════════════════════════════════════════ */
#buyModal{
  position:fixed;inset:0;z-index:4000;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
}
#buyModal.open{opacity:1;visibility:visible}
.buyModalBox{
  background:var(--bg2);border:1px solid var(--stroke);
  border-radius:20px;padding:32px;
  max-width:440px;width:100%;
  position:relative;
  box-shadow:0 25px 80px rgba(0,0,0,.6),0 0 0 1px rgba(107,122,144,.15);
  transform:scale(.92);
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
#buyModal.open .buyModalBox{transform:scale(1)}
.buyModalClose{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;border-radius:50%;
  background:var(--bg3);border:none;cursor:pointer;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.buyModalClose:hover{background:var(--stroke);color:var(--text)}
.buyModalProduct{
  display:flex;gap:14px;align-items:center;
  padding:16px;background:var(--bg3);border-radius:12px;margin-bottom:20px;
  border:1px solid var(--stroke);
}
.buyModalIcon{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--a1),var(--c2));
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
}
.buyModalName{font-size:16px;font-weight:800;color:var(--text)}
.buyModalPrice{font-size:22px;font-weight:700;color:var(--c3);margin-top:2px}
.buyModalSteps{margin-bottom:20px}
.buyModalSteps li{
  display:flex;gap:10px;align-items:flex-start;
  padding:8px 0;border-bottom:1px solid var(--stroke);
  font-size:13.5px;color:var(--muted-hi);line-height:1.5;
}
.buyModalSteps li:last-child{border-bottom:none}
.buyStepNum{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:var(--a1);color:#fff;
  font-size:11px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.buyModalActions{display:flex;gap:10px}

/* ═══════════════════════════════════════════
   SOCIAL ROW — enhanced
═══════════════════════════════════════════ */
.socialRow{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;
}
.socialRow .btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:12px;font-size:13px;font-weight:700;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:var(--muted-hi);
  transition:background .2s,border-color .2s,color .2s,transform .15s;
}
.socialRow .btn:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
  color:#fff;transform:translateY(-2px);
}

/* ═══════════════════════════════════════════
   MODS PAGE — FEATURED SMP CARD
═══════════════════════════════════════════ */
.modCardFeatured{grid-column:span 12}
@media(max-width:700px){.modCardFeatured{grid-column:span 12}}

.modThumbFeatured{
  height:280px;position:relative;overflow:hidden;
  border-bottom:1px solid var(--stroke);
}
.modThumbFeatured::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,#0a1628 0%,#0d2618 40%,#1a0a2e 100%);
  z-index:0;
}
.modThumbFeatured .thumbScene{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
}

/* Active badge pulse */
@keyframes activePulse{
  0%,100%{box-shadow:0 0 14px rgba(107,122,144,.5)}
  50%{box-shadow:0 0 32px rgba(107,122,144,.95),0 0 0 10px rgba(107,122,144,.07)}
}
.modeActiveBadge{animation:activePulse 2s ease-in-out infinite}

/* Stars twinkling */
@keyframes starTwinkle{
  0%,100%{opacity:.8}
  50%{opacity:.1}
}
.thumbStar{animation:starTwinkle var(--dur,3s) ease-in-out infinite}

/* Sword glow */
@keyframes swordGlowAnim{
  0%,100%{filter:drop-shadow(0 0 8px #67e8f9) drop-shadow(0 0 20px #5b21b6)}
  50%{filter:drop-shadow(0 0 20px #67e8f9) drop-shadow(0 0 45px #7c3aed)}
}
.thumbSword{animation:swordGlowAnim 3s ease-in-out infinite}

/* Floating hearts */
@keyframes heartFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.thumbHeart{animation:heartFloat 4s ease-in-out infinite}
.thumbHeart2{animation:heartFloat 4s 1.8s ease-in-out infinite}

/* Lock overlay on locked thumbnails */
.modThumbLockOverlay{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(0,0,0,.44);backdrop-filter:blur(1.5px);
  gap:8px;
}
.modThumbLockOverlay svg{width:50px;height:50px;color:rgba(255,255,255,.5)}
.modThumbLockText{
  font-size:10px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.4);
}

/* Override locked card global styles */
.modeLocked{opacity:1!important;pointer-events:none}
.modeLocked .modThumbLg{filter:grayscale(.6) brightness(.6)!important}
.modeLocked .pad{opacity:.65}

/* Bigger icons in locked thumbnails */
.modThumbLg svg{width:80px!important;height:80px!important;opacity:.92!important}

/* Particles sparkle in SMP scene */
@keyframes sparkleFloat{
  0%,100%{opacity:.7;transform:translateY(0) scale(1)}
  50%{opacity:.2;transform:translateY(-12px) scale(.6)}
}
.thumbSparkle{animation:sparkleFloat var(--dur,3s) ease-in-out infinite}
.thumbSparkle:nth-child(2){animation-delay:-1s}
.thumbSparkle:nth-child(3){animation-delay:-2s}
.thumbSparkle:nth-child(4){animation-delay:-.5s}

/* ═══════════════════════════════════════════
   HOME — Big title + Social buttons
═══════════════════════════════════════════ */
.homeMainTitle{
  font-size:clamp(2.8rem,7vw,5.5rem);
  font-weight:700;
  letter-spacing:.04em;
  line-height:1;
  margin-bottom:14px;
  background:linear-gradient(90deg,#6b7a90 0%,#9aabb8 50%,#6b7a90 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradFlow 4s linear infinite;
}

.homeSocialBtn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:16px 12px;
  border-radius:14px;text-decoration:none;
  font-size:13px;font-weight:800;
  border:1px solid transparent;
  transition:transform .18s,box-shadow .18s,opacity .18s;
}
.homeSocialBtn:hover{transform:translateY(-3px);opacity:.92}
.homeSocialBtn span{font-size:12px;font-weight:700}

.homeSocialDiscord{
  background:rgba(88,101,242,.2);
  border-color:rgba(88,101,242,.35);
  color:#a5b4fc;
  box-shadow:0 4px 20px rgba(88,101,242,.12);
}
.homeSocialDiscord:hover{box-shadow:0 8px 30px rgba(88,101,242,.25)}

.homeSocialYT{
  background:rgba(255,0,0,.15);
  border-color:rgba(255,50,50,.3);
  color:#fca5a5;
  box-shadow:0 4px 20px rgba(255,0,0,.1);
}
.homeSocialYT:hover{box-shadow:0 8px 30px rgba(255,0,0,.2)}

.homeSocialTwitch{
  background:rgba(145,70,255,.18);
  border-color:rgba(145,70,255,.32);
  color:#c4b5fd;
  box-shadow:0 4px 20px rgba(145,70,255,.1);
}
.homeSocialTwitch:hover{box-shadow:0 8px 30px rgba(145,70,255,.22)}

/* Home join panel */
.homeJoinSection{
  padding:94px 0 42px;
}
.joinPanel{
  position:relative;
  min-height:420px;
  overflow:visible;
  border:1px solid rgba(107,122,144,.18);
  border-radius:28px;
  background:
    radial-gradient(ellipse 660px 360px at 82% 42%,rgba(122,138,158,.12),transparent 66%),
    linear-gradient(135deg,rgba(255,255,255,.84),rgba(248,252,255,.92));
  box-shadow:0 20px 60px rgba(107,122,144,.12),0 0 50px rgba(122,138,158,.08),inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(20px);
  padding:54px 58px;
}
.joinPanel::before{
  content:"";
  position:absolute;inset:0;border-radius:28px;
  background:
    linear-gradient(90deg,rgba(107,122,144,.04) 1px,transparent 1px),
    linear-gradient(180deg,rgba(107,122,144,.03) 1px,transparent 1px);
  background-size:64px 64px;
  opacity:.72;
  pointer-events:none;
}
.joinVersion{
  position:absolute;
  top:-20px;
  left:-20px;

  padding:14px 28px;
  font-size:17px;
  font-weight:700;

  border-radius:50px;

  background:linear-gradient(135deg,#9aabb8,#6b7a90);
  color:#fff;

  transform:rotate(-8deg);

  box-shadow:
    0 20px 50px rgba(154,171,184,.40),
    0 0 40px rgba(107,122,144,.35);

  z-index:10;
}
.joinCopy{
  position:relative;z-index:2;
  width:min(590px,58%);
  padding-top:18px;
}
.joinKicker{
  display:inline-flex;
  margin-bottom:16px;
  padding:7px 16px;
  border-radius:999px;
  background:rgba(107,122,144,.10);
  color:var(--a1);
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid rgba(107,122,144,.18);
}
.joinCopy h1{
  font-size:clamp(2.7rem,6vw,5.4rem);
  line-height:.95;
  font-weight:900;
  margin-bottom:10px;
  background:linear-gradient(90deg,#7a8fa8,#1e2d40,#7a8fa8,#1e2d40,#7a8fa8);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradShift 4s linear infinite;
}
.titleLiveStatus{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:26px;
  color:#fff;
  font-weight:700;
  font-size:20px;
}
.titleLiveStatus strong{font-weight:700}
.titleLiveStatus svg{
  width:18px;
  height:18px;
  color:#c4b5fd;
  flex-shrink:0;
}
.discordInlineStats{
  display:grid;
  gap:5px;
  margin:10px 0 18px;
}
.joinCopy>.titleLiveStatus{
  margin:0 0 24px;
}
.joinFields{
  display:grid;
  gap:18px;
  max-width:470px;
}
.joinField span{
  display:block;
  margin-bottom:8px;
  color:var(--text);
  font-size:21px;
  font-weight:700;
}
.joinField>strong,.joinIpValue{
  min-height:54px;
  display:flex;align-items:center;
  border:1px solid rgba(107,122,144,.16);
  border-radius:50px;
  background:rgba(255,255,255,.80);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 16px rgba(107,122,144,.08);
  backdrop-filter:blur(8px);
}
.joinField>strong{
  padding:0 22px;
  font-size:19px;
  font-weight:700;
}
.joinIpValue{
  justify-content:space-between;
  padding:0 6px 0 22px;
}
.joinIpValue strong{
  font-size:19px;
  font-weight:700;
}
.joinIpValue button{
  width:42px;height:42px;
  display:grid;place-items:center;
  border:0;border-radius:50px;
  background:linear-gradient(135deg,var(--a1),var(--c2));
  color:#fff;
  box-shadow:0 0 24px rgba(107,122,144,.22);
  position:relative;
  flex:0 0 42px;
  overflow:hidden;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.joinIpValue button:hover{filter:brightness(1.08);box-shadow:0 0 28px rgba(34,211,238,.26)}
.joinIpValue button:active{transform:scale(.94)}
.joinIpValue button svg{
  width:19px;height:19px;
  transition:opacity .16s ease,transform .18s ease;
}
.joinIpValue button::after{
  content:"";
  position:absolute;
  width:18px;height:10px;
  border-left:3px solid currentColor;
  border-bottom:3px solid currentColor;
  transform:rotate(-45deg) scale(.55);
  opacity:0;
  transition:opacity .16s ease,transform .2s cubic-bezier(.2,.9,.25,1);
}
.joinIpValue button.copied-state{
  background:linear-gradient(135deg,#22c55e,#22d3ee);
}
.joinIpValue button.copied-state svg{
  opacity:0;
  transform:scale(.65) rotate(8deg);
}
.joinIpValue button.copied-state::after{
  opacity:1;
  transform:rotate(-45deg) scale(1);
}
.liveStatsRow,
.discordStatsRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.liveStat,
.discordStat{
  min-width:138px;
  min-height:62px;
  display:grid;
  align-content:center;
  gap:4px;
  padding:10px 14px;
  border:1px solid rgba(107,122,144,.16);
  border-radius:50px;
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 14px rgba(107,122,144,.08);
  backdrop-filter:blur(12px);
}
.liveStat small,
.discordStat small{
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.liveStat strong,
.discordStat strong{
  color:var(--text);
  font-size:22px;
  font-weight:700;
}
.liveDot{
  width:10px;
  height:10px;
  display:inline-block;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 14px rgba(34,197,94,.75);
}
.titleLiveStatus .liveDot{
  flex:0 0 10px;
}
.liveStat .liveDot,
.discordStat .liveDot{
  position:absolute;
  right:12px;
  top:12px;
}
.liveStat,
.discordStat{position:relative}
.liveStat.isOffline .liveDot{
  background:#ef4444;
  box-shadow:0 0 14px rgba(239,68,68,.7);
}
.titleLiveStatus.isOffline .liveDot{
  background:#ef4444;
  box-shadow:0 0 14px rgba(239,68,68,.7);
}
.skinShowcase{
  position:absolute;
  right:20px;
  bottom:-36px;
  width:min(44vw,470px);
  height:520px;
  z-index:2;
  pointer-events:none;

}
.skinRender{
  position:absolute;
  right:120px; /* più a sinistra */
  bottom:-8px;
  width:330px;
  height:auto;
  z-index:2;
  display:block;
  pointer-events:none;
  filter:brightness(1.12) saturate(1.12) drop-shadow(0 26px 28px rgba(0,0,0,.35));
}

@media(max-width:900px){
  .homeJoinSection{padding-top:86px}
  .joinPanel{min-height:auto;padding:42px 24px 330px}
  .joinCopy{width:100%;max-width:560px}
  .skinShowcase{right:50%;bottom:-70px;transform:translateX(50%) scale(.82)}
}
@media(max-width:560px){
  .joinPanel{padding:46px 18px 280px}
  .joinVersion{left:20px;top:18px}
  .joinField span{font-size:18px}
  .joinCopy h1{font-size:2.65rem}
  .skinShowcase{transform:translateX(50%) scale(.66);bottom:-96px}
}
/* joinPanel in light mode is already the default glass style */

/* Discord community wave */
.discordWaveSection{
  position:relative;
  z-index:8;
  overflow:hidden;
  width:100vw;
  margin:28px calc(50% - 50vw) -28px;
  padding:128px 0 156px;
  background:
    radial-gradient(ellipse 980px 280px at 100% 18%,rgba(38,13,96,.76),transparent 66%),
    radial-gradient(ellipse 780px 220px at -4% 86%,rgba(32,8,78,.62),transparent 68%),
    radial-gradient(ellipse 900px 260px at 76% 108%,rgba(72,25,166,.58),transparent 70%),
    radial-gradient(ellipse 620px 190px at 88% 72%,rgba(39,12,108,.45),transparent 67%),
    radial-gradient(ellipse 520px 155px at 68% 86%,rgba(25,7,72,.34),transparent 70%),
    linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.08) 1px,transparent 1px),
    radial-gradient(circle at 17% 28%,rgba(255,255,255,.22) 0 2px,transparent 3px),
    radial-gradient(ellipse 980px 500px at 72% 48%,rgba(170,132,255,.42),transparent 66%),
    linear-gradient(135deg,#0c2b7a 0%,#1d4ed8 44%,#c0d0dc 100%);
  background-size:auto,auto,auto,auto,auto,76px 76px,76px 76px,auto,auto,auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,255,255,.08);
}
.discordWaveSection::before{
  content:"";
  position:absolute;inset:-92px -18vw -92px;
  background:
    radial-gradient(ellipse 1180px 170px at 18% 0%,rgba(9,4,24,.90) 0 60%,transparent 61%),
    radial-gradient(ellipse 1080px 150px at 78% 1%,rgba(13,6,35,.86) 0 58%,transparent 59%),
    radial-gradient(ellipse 1120px 170px at 22% 100%,rgba(10,4,27,.78) 0 60%,transparent 61%),
    radial-gradient(ellipse 960px 150px at 86% 100%,rgba(24,8,66,.78) 0 58%,transparent 59%),
    linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.09) 42% 43%,transparent 43% 100%),
    radial-gradient(rgba(255,255,255,.15) 1px,transparent 1px);
  background-size:auto,auto,auto,auto,auto,15px 15px;
  opacity:.78;
  pointer-events:none;
}
.discordWaveSection::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 520px 150px at 100% 36%,rgba(26,8,76,.54),transparent 66%),
    radial-gradient(ellipse 450px 120px at 88% 74%,rgba(45,14,118,.42),transparent 68%),
    linear-gradient(180deg,rgba(255,255,255,.10),transparent 22%,transparent 76%,rgba(16,5,45,.16));
  pointer-events:none;
}
.discordWaveTop,.discordWaveBottom{
  position:absolute;left:-22vw;right:-22vw;height:172px;
  background:
    radial-gradient(ellipse 900px 120px at 50% 100%,rgba(107,122,144,.18),transparent 70%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
  z-index:1;
}
.discordWaveTop{
  top:-118px;
  border-radius:0 0 50% 50%/0 0 100% 100%;
  transform:rotate(1.15deg);
}
.discordWaveBottom{
  bottom:-132px;
  border-radius:50% 50% 0 0/100% 100% 0 0;
  transform:rotate(-1.05deg);
  background:
    radial-gradient(ellipse 900px 120px at 50% 0%,rgba(139,154,176,.24),transparent 72%),
    linear-gradient(180deg,#1d4ed8,#0c2b7a);
}
html[data-scheme="light"] .discordWaveTop,
html[data-scheme="light"] .discordWaveBottom{
  background:
    radial-gradient(ellipse 900px 120px at 50% 100%,rgba(139,154,176,.24),transparent 72%),
    linear-gradient(180deg,#0c2b7a,#1d4ed8);
}
html[data-scheme="light"] .discordWaveBottom{
  background:
    radial-gradient(ellipse 900px 120px at 50% 0%,rgba(139,154,176,.24),transparent 72%),
    linear-gradient(180deg,#1d4ed8,#0c2b7a);
}
html[data-scheme="light"] .discordWaveSection::before{
  background:
    radial-gradient(ellipse 1180px 170px at 18% 0%,rgba(24,8,66,.82) 0 60%,transparent 61%),
    radial-gradient(ellipse 1080px 150px at 78% 1%,rgba(43,15,111,.72) 0 58%,transparent 59%),
    radial-gradient(ellipse 1120px 170px at 22% 100%,rgba(49,17,119,.70) 0 60%,transparent 61%),
    radial-gradient(ellipse 960px 150px at 86% 100%,rgba(100,114,136,.64) 0 58%,transparent 59%),
    linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.09) 42% 43%,transparent 43% 100%),
    radial-gradient(rgba(255,255,255,.15) 1px,transparent 1px);
}
.discordWaveInner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,560px);
  align-items:center;gap:18px;
  width:min(1180px,calc(100% - 56px));
  padding:44px 54px 34px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:26px;
  background:
    radial-gradient(ellipse 660px 390px at 86% 54%,rgba(141,86,255,.42),transparent 68%),
    linear-gradient(135deg,rgba(35,14,88,.90),rgba(106,53,220,.70));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
  backdrop-filter:blur(14px);
}
.discordWaveInner::before{
  content:none;
}
.discordWaveCopy,.discordMascotWrap{position:relative;z-index:1}
.discordMascotWrap{
  display:flex;justify-content:flex-end;align-items:flex-end;
  min-height:430px;
  order:2;
}
.discordMascot{
  width:min(700px,55vw);
  margin-right:-52px;
  transform:translateY(30px);
  display:block;
  filter:none;
}
.discordWaveCopy{max-width:660px}
.discordEyebrow{
  display:inline-flex;
  padding:7px 12px;border-radius:999px;
  background:rgba(255,255,255,.16);
  color:#fff;font-size:12px;font-weight:900;letter-spacing:.12em;
}
.discordTitleRow{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-top:18px;
}
.discordWaveCopy h2{
  font-size:clamp(2.4rem,5vw,4.8rem);
  line-height:.98;font-weight:700;color:#fff;
  margin:0;
}
.discordTitleIcon{
  width:clamp(84px,7.6vw,118px);
  height:clamp(84px,7.6vw,118px);
  flex:0 0 auto;
  display:block;
  object-fit:contain;
  transform:translateY(.16em);
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.14));
}
.discordWaveCopy p{
  margin:20px 0 28px;
  color:rgba(255,255,255,.86);
  font-size:19px;line-height:1.65;
}
.discordMiniActions{
  display:flex;flex-wrap:wrap;gap:10px;
  margin:-8px 0 24px;
}
.discordMiniActions a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:0 14px;border-radius:999px;
  border:1px solid rgba(154,171,192,.36);
  background:rgba(139,154,176,.18);
  color:#fff;font-size:13px;font-weight:850;
  box-shadow:0 0 22px rgba(139,154,176,.18);
}
.discordMiniActions a:hover{
  border-color:rgba(196,181,253,.68);
  box-shadow:0 0 24px rgba(139,154,176,.34),0 0 38px rgba(88,101,242,.18);
}
.discordWaveButton{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:62px;padding:0 36px;border-radius:18px;
  background:linear-gradient(135deg,#7c3aed,#22d3ee);
  color:#fff;
  font-weight:700;font-size:17px;
  text-shadow:0 1px 0 rgba(16,7,48,.28);
  box-shadow:0 0 0 1px rgba(255,255,255,.24),0 0 34px rgba(124,58,237,.32),0 14px 0 rgba(42,19,106,.62);
  position:relative;overflow:hidden;
  transition:box-shadow .18s,filter .18s;
}
.discordWaveButton::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.54) 48%,transparent 62%);
  transform:translateX(-125%);
  animation:discordButtonSweep 2.8s ease-in-out infinite;
}
.discordWaveButton{isolation:isolate}
.discordWaveButton:hover{filter:brightness(1.08)}
.discordWaveButton:hover{
  box-shadow:0 0 38px rgba(124,58,237,.48),0 0 58px rgba(34,211,238,.24),0 14px 0 rgba(42,19,106,.62);
}
@keyframes discordButtonSweep{
  0%,42%{transform:translateX(-125%)}
  72%,100%{transform:translateX(125%)}
}
.applicationStrip{
  position:relative;z-index:2;
  margin-top:58px;
  display:grid;grid-template-columns:.75fr 1.25fr;
  gap:24px;align-items:stretch;
}
.applicationIntro{
  padding:24px;border-radius:18px;
  background:rgba(7,10,31,.36);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(16px);
}
.applicationIntro span{
  color:#ffdc2e;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
}
.applicationIntro h2{font-size:28px;margin-top:8px;color:#fff}
.applicationIntro p{margin-top:10px;color:rgba(255,255,255,.78);line-height:1.6}
.applicationCards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.applicationCard{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(8,6,20,.42);
  color:#fff;border-radius:18px;
  padding:22px;text-align:left;
  min-height:170px;
  display:flex;flex-direction:column;gap:10px;
  transition:transform .18s,background .18s,border-color .18s;
}
.applicationCard:hover{
  transform:translateY(-5px);
  background:rgba(8,6,20,.58);
  border-color:rgba(255,220,46,.55);
}
.applicationIcon{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:#ffdc2e;color:#281600;
  font-weight:700;font-size:22px;
}
.applicationCard strong{font-size:20px}
.applicationCard small{color:rgba(255,255,255,.75);line-height:1.45}

/* Shared Discord profile pill */
.liquidProfile{
  position:fixed;
  top:12px;
  right:14px;
  z-index:5000;
  width:max-content;
  max-width:min(340px,calc(100vw - 28px));
}
.liquidProfileButton{
  width:max-content;
  max-width:100%;
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--stroke);
  background:rgba(10,7,24,.86);
  color:var(--text);border-radius:999px;
  padding:6px 12px;
  min-width:0;
  box-shadow:0 0 24px rgba(139,154,176,.20);
  backdrop-filter:blur(16px);
  transition:border-color .18s,box-shadow .18s,filter .18s;
  cursor:pointer;
  justify-content:flex-start;
}
.liquidProfileButton:hover,.liquidProfile.open .liquidProfileButton{
  border-color:rgba(139,154,176,.68);
  box-shadow:0 0 30px rgba(139,154,176,.38),0 0 62px rgba(88,101,242,.20);
  filter:brightness(1.05);
}
.liquidProfileAvatar{
  width:28px;height:28px;border-radius:7px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--a1),var(--c2));
  color:#fff;font-weight:700;overflow:hidden;
  flex-shrink:0;
}
.liquidProfileAvatar img{width:100%;height:100%;object-fit:cover}
.liquidProfileName{
  font-size:13px;font-weight:850;max-width:270px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.liquidProfileMenu{
  position:absolute;
  top:calc(100% + 9px);
  right:0;
  width:230px;
  display:none;
  padding:9px;
  border:1px solid rgba(139,154,176,.30);
  border-radius:16px;
  background:rgba(8,6,20,.96);
  box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 34px rgba(139,154,176,.20);
  backdrop-filter:blur(20px);
}
.liquidProfile.open .liquidProfileMenu{display:block;animation:dropIn .15s ease}
.liquidProfileMenuHead{
  display:flex;align-items:center;gap:10px;
  padding:8px 8px 10px;
  color:#fff;
}
.liquidProfileMenuAvatar{
  width:34px;height:34px;border-radius:8px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--a1),var(--c2));
  color:#fff;font-weight:700;overflow:hidden;flex-shrink:0;
}
.liquidProfileMenuAvatar img{width:100%;height:100%;object-fit:cover}
.liquidProfileMenuName{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:14px;
}
.cosmicLogoutButton{
  width:100%;
  display:flex;align-items:center;gap:9px;
  min-height:42px;
  padding:0 11px;
  border-radius:12px;
  border:1px solid rgba(255,78,95,.24);
  background:rgba(255,78,95,.11);
  color:#ffd8de;
  font-size:14px;font-weight:850;
  cursor:pointer;
}
.cosmicLogoutButton:hover{
  border-color:rgba(255,122,61,.55);
  box-shadow:0 0 22px rgba(255,78,95,.28);
}
.cosmicLogoutButton svg{width:17px;height:17px;flex-shrink:0}
@media(max-width:760px){
  .discordWaveInner{grid-template-columns:1fr;padding:26px 20px}
  .applicationCards{grid-template-columns:1fr}
  .discordWaveSection{padding:72px 0 80px}
  .discordMascotWrap{min-height:280px}
  .discordMascot{width:min(390px,90vw)}
  .discordTitleRow{align-items:baseline;gap:9px}
  .discordTitleIcon{width:72px;height:72px}
  .usefulLinksBtn span{display:none}
  .rightControls{padding-right:58px}
}

/* Hover pulito: niente finestrelle che si spostano, solo fluorescenza. */
.card:hover,
.modeCarouselCard:hover,
.newsCard:hover,
.featureCard:hover,
.staffCard:hover,
.ruleCard:hover,
.statCard:hover,
.applicationCard:hover,
.homeSocialBtn:hover,
.pill:hover,
.socialRow .btn:hover,
.btn.primary:hover,
.btn:hover,
.menu a:hover{
  transform:none !important;
}
.card:hover,
.modeCarouselCard:hover,
.newsCard:hover,
.featureCard:hover,
.staffCard:hover,
.ruleCard:hover,
.statCard:hover{
  border-color:rgba(107,122,144,.28) !important;
  box-shadow:0 0 24px rgba(107,122,144,.12),0 8px 32px rgba(107,122,144,.08) !important;
}

/* Light theme final polish: contrast first, glow second. */
html[data-scheme="light"] body{
  background:#fbf9ff;
  color:#130d2d;
}
html[data-scheme="light"] .topbar{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,243,255,.88));
  border-bottom-color:rgba(107,122,144,.16);
}
html[data-scheme="light"] .brand img{
  filter:brightness(1) drop-shadow(0 0 10px rgba(107,122,144,.14));
}
html[data-scheme="light"] .menu a,
html[data-scheme="light"] .navActions a,
html[data-scheme="light"] .footerLinks a{
  color:rgba(19,13,45,.70);
}
html[data-scheme="light"] .menu a:hover,
html[data-scheme="light"] .menu a.active,
html[data-scheme="light"] .footerLinks a:hover{
  color:#130d2d;
  background:rgba(107,122,144,.08);
}
html[data-scheme="light"] .joinPanel{
  background:
    radial-gradient(ellipse 700px 390px at 83% 46%,rgba(139,154,176,.18),transparent 66%),
    radial-gradient(ellipse 520px 280px at 12% 100%,rgba(34,211,238,.10),transparent 66%),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(244,239,255,.88));
  border-color:rgba(107,122,144,.20);
  box-shadow:0 28px 80px rgba(45,26,92,.14),inset 0 1px 0 rgba(255,255,255,.75);
}
html[data-scheme="light"] .joinPanel::before{
  background:
    linear-gradient(90deg,rgba(107,122,144,.065) 1px,transparent 1px),
    linear-gradient(180deg,rgba(107,122,144,.055) 1px,transparent 1px);
  opacity:.72;
}
html[data-scheme="light"] .joinKicker{
  background:rgba(107,122,144,.10);
  color:#5b21b6;
}
html[data-scheme="light"] .joinCopy h1,
html[data-scheme="light"] .titleLiveStatus,
html[data-scheme="light"] .joinField span,
html[data-scheme="light"] .joinField>strong,
html[data-scheme="light"] .joinIpValue,
html[data-scheme="light"] .joinIpValue strong{
  color:#130d2d;
}
html[data-scheme="light"] .discordWaveCopy .titleLiveStatus{
  color:#fff;
}
html[data-scheme="light"] .titleLiveStatus svg{
  color:#5b21b6;
}
html[data-scheme="light"] .discordWaveCopy .titleLiveStatus svg{
  color:#c4b5fd;
}
html[data-scheme="light"] .joinField>strong,
html[data-scheme="light"] .joinIpValue{
  background:rgba(255,255,255,.86);
  border-color:rgba(107,122,144,.20);
  box-shadow:0 14px 34px rgba(45,26,92,.09),inset 0 1px 0 rgba(255,255,255,.88);
}
html[data-scheme="light"] .liveStat{
  background:rgba(255,255,255,.76);
  border-color:rgba(107,122,144,.18);
  box-shadow:0 14px 34px rgba(45,26,92,.08),inset 0 1px 0 rgba(255,255,255,.88);
}
html[data-scheme="light"] .liveStat small{
  color:rgba(19,13,45,.58);
}
html[data-scheme="light"] .liveStat strong{
  color:#130d2d;
}
html[data-scheme="light"] .skinGlow{
  background:radial-gradient(circle,rgba(139,154,176,.18),rgba(34,211,238,.09) 48%,transparent 70%);
}
html[data-scheme="light"] .discordWaveSection{
  background:
    radial-gradient(ellipse 980px 280px at 100% 18%,rgba(38,13,96,.76),transparent 66%),
    radial-gradient(ellipse 780px 220px at -4% 86%,rgba(32,8,78,.62),transparent 68%),
    radial-gradient(ellipse 900px 260px at 76% 108%,rgba(72,25,166,.58),transparent 70%),
    radial-gradient(ellipse 620px 190px at 88% 72%,rgba(39,12,108,.45),transparent 67%),
    linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.08) 1px,transparent 1px),
    radial-gradient(circle at 17% 28%,rgba(255,255,255,.22) 0 2px,transparent 3px),
    radial-gradient(ellipse 980px 500px at 72% 48%,rgba(170,132,255,.42),transparent 66%),
    linear-gradient(135deg,#0c2b7a 0%,#1d4ed8 44%,#c0d0dc 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,255,255,.08);
}
html[data-scheme="light"] .discordWaveSection::after{
  background:
    radial-gradient(ellipse 520px 150px at 100% 36%,rgba(26,8,76,.48),transparent 66%),
    radial-gradient(ellipse 450px 120px at 88% 74%,rgba(45,14,118,.36),transparent 68%),
    linear-gradient(180deg,rgba(255,255,255,.10),transparent 22%,transparent 76%,rgba(16,5,45,.16));
}
html[data-scheme="light"] .discordWaveInner{
  background:
    radial-gradient(ellipse 660px 390px at 86% 54%,rgba(141,86,255,.42),transparent 68%),
    linear-gradient(135deg,rgba(35,14,88,.90),rgba(106,53,220,.70));
  border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
}
html[data-scheme="light"] .discordEyebrow{
  background:rgba(255,255,255,.16);
  color:#fff;
}
html[data-scheme="light"] .discordWaveCopy h2{
  color:#fff;
}
html[data-scheme="light"] .applicationIntro h2,
html[data-scheme="light"] .applicationCard strong{
  color:#130d2d;
}
html[data-scheme="light"] .discordWaveCopy p{
  color:rgba(255,255,255,.88);
}
html[data-scheme="light"] .applicationIntro p,
html[data-scheme="light"] .applicationCard small{
  color:rgba(19,13,45,.72);
}
html[data-scheme="light"] .discordMiniActions a{
  background:rgba(139,154,176,.18);
  border-color:rgba(154,171,192,.36);
  color:#fff;
  box-shadow:0 0 22px rgba(139,154,176,.18);
}
html[data-scheme="light"] .applicationIntro,
html[data-scheme="light"] .applicationCard{
  background:rgba(255,255,255,.70);
  border-color:rgba(107,122,144,.16);
  color:#130d2d;
  box-shadow:0 18px 42px rgba(45,26,92,.08);
}
html[data-scheme="light"] .liquidProfileButton,
html[data-scheme="light"] .liquidProfileMenu{
  background:rgba(255,255,255,.94);
  border-color:rgba(107,122,144,.18);
  color:#130d2d;
  box-shadow:0 18px 48px rgba(45,26,92,.12);
}
html[data-scheme="light"] .liquidProfileButton:hover,
html[data-scheme="light"] .liquidProfile.open .liquidProfileButton{
  border-color:rgba(107,122,144,.36);
  box-shadow:0 0 28px rgba(107,122,144,.14),0 18px 48px rgba(45,26,92,.12);
}
html[data-scheme="light"] .liquidProfileMenuHead,
html[data-scheme="light"] .liquidProfileMenuName{
  color:#130d2d;
}
html[data-scheme="light"] .cosmicLogoutButton{
  background:rgba(154,171,184,.08);
  border-color:rgba(154,171,184,.18);
  color:#1e40af;
}
html[data-scheme="light"] .footer{
  background:linear-gradient(180deg,rgba(248,245,255,.82),rgba(255,255,255,.92));
  border-top-color:rgba(107,122,144,.12);
}
html[data-scheme="light"] .footerDesc,
html[data-scheme="light"] .footerBottom,
html[data-scheme="light"] .small{
  color:rgba(19,13,45,.62);
}
html[data-scheme="light"] .footerTitle{
  color:rgba(95,110,130,.56);
}
html[data-scheme="light"] .card:hover,
html[data-scheme="light"] .modeCarouselCard:hover,
html[data-scheme="light"] .newsCard:hover,
html[data-scheme="light"] .featureCard:hover,
html[data-scheme="light"] .staffCard:hover,
html[data-scheme="light"] .ruleCard:hover,
html[data-scheme="light"] .statCard:hover,
html[data-scheme="light"] .applicationCard:hover{
  border-color:rgba(107,122,144,.34) !important;
  box-shadow:0 0 24px rgba(107,122,144,.12),0 18px 46px rgba(45,26,92,.10) !important;
}

/* FINAL Discord wave: like the reference, full-width purple band with smooth top/bottom waves. */
.discordWaveSection,
html[data-scheme="light"] .discordWaveSection{
  position:relative;
  isolation:isolate;
  width:100vw;
  margin:18px calc(50% - 50vw) 34px;
  padding:130px 0 142px;
  overflow:hidden;
  background:transparent !important;
  box-shadow:none !important;
}
.discordWaveSection::before,
html[data-scheme="light"] .discordWaveSection::before{
  content:"";
  display:block !important;
  position:absolute;
  left:0;
  right:0;
  top:42px;
  bottom:42px;
  width:auto !important;
  height:auto !important;
  transform:none !important;
  z-index:0;
  pointer-events:none;
  border-radius:0 !important;
  clip-path:none !important;
  background:
    radial-gradient(ellipse 980px 360px at 82% 30%,rgba(139,154,176,.70),transparent 66%),
    radial-gradient(ellipse 780px 300px at 18% 64%,rgba(49,17,119,.72),transparent 70%),
    linear-gradient(135deg,#0d2e86 0%,#1d4ed8 45%,#c0d0dc 100%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 500' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 82C70 130 140 34 215 74C300 120 350 74 430 82C530 94 545 34 640 76C720 112 780 126 850 80C940 22 1010 126 1100 76C1190 30 1280 116 1360 76C1390 62 1420 64 1440 78V422C1380 384 1320 470 1240 426C1160 382 1080 470 990 426C910 386 850 394 760 430C650 476 570 376 470 424C360 476 295 382 205 426C125 464 70 394 0 426Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 500' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 82C70 130 140 34 215 74C300 120 350 74 430 82C530 94 545 34 640 76C720 112 780 126 850 80C940 22 1010 126 1100 76C1190 30 1280 116 1360 76C1390 62 1420 64 1440 78V422C1380 384 1320 470 1240 426C1160 382 1080 470 990 426C910 386 850 394 760 430C650 476 570 376 470 424C360 476 295 382 205 426C125 464 70 394 0 426Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.discordWaveSection::after,
html[data-scheme="light"] .discordWaveSection::after{
  content:"";
  display:block !important;
  position:absolute;
  left:0;
  right:0;
  top:42px;
  bottom:42px;
  width:auto !important;
  height:auto !important;
  transform:none !important;
  z-index:1;
  pointer-events:none;
  opacity:.62;
  border-radius:0 !important;
  clip-path:none !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.045) 1px,transparent 1px),
    radial-gradient(circle at 20% 34%,rgba(255,255,255,.18) 0 2px,transparent 3px),
    radial-gradient(circle at 76% 24%,rgba(255,255,255,.13) 0 1px,transparent 2px),
    radial-gradient(ellipse 920px 230px at 50% 88%,rgba(14,4,54,.26),transparent 72%);
  background-size:76px 76px,76px 76px,auto,auto,auto;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 500' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 82C70 130 140 34 215 74C300 120 350 74 430 82C530 94 545 34 640 76C720 112 780 126 850 80C940 22 1010 126 1100 76C1190 30 1280 116 1360 76C1390 62 1420 64 1440 78V422C1380 384 1320 470 1240 426C1160 382 1080 470 990 426C910 386 850 394 760 430C650 476 570 376 470 424C360 476 295 382 205 426C125 464 70 394 0 426Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 500' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 82C70 130 140 34 215 74C300 120 350 74 430 82C530 94 545 34 640 76C720 112 780 126 850 80C940 22 1010 126 1100 76C1190 30 1280 116 1360 76C1390 62 1420 64 1440 78V422C1380 384 1320 470 1240 426C1160 382 1080 470 990 426C910 386 850 394 760 430C650 476 570 376 470 424C360 476 295 382 205 426C125 464 70 394 0 426Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.discordMascotWrap,
html[data-scheme="light"] .discordMascotWrap{
  min-height:500px;
  justify-content:center;
  align-items:center;
}
.discordMascot,
html[data-scheme="light"] .discordMascot{
  width:620px;
  max-width:none;
  margin-right:0;
  transform:translate(8px,34px) scale(1.12);
}
.discordWaveTop,
.discordWaveBottom,
html[data-scheme="light"] .discordWaveTop,
html[data-scheme="light"] .discordWaveBottom{
  display:none !important;
}
.discordWaveInner,
html[data-scheme="light"] .discordWaveInner{
  position:relative;
  z-index:3;
}

/* Discord liquid glass stage */
.discordWaveSection,
html[data-scheme="light"] .discordWaveSection{
  isolation:isolate;
  z-index:20;
  overflow:hidden;
  margin:28px calc(50% - 50vw) -42px;
  padding:128px 0 178px;
  background:
    radial-gradient(ellipse 900px 360px at 88% 8%,rgba(168,85,247,.72),transparent 62%),
    radial-gradient(ellipse 780px 320px at 12% 26%,rgba(58,18,138,.66),transparent 66%),
    radial-gradient(ellipse 980px 360px at 72% 104%,rgba(133,70,255,.76),transparent 72%),
    linear-gradient(135deg,#0d2e86 0%,#1d4ed8 46%,#c0d0dc 100%);
  box-shadow:none;
}
.discordWaveSection::before,
html[data-scheme="light"] .discordWaveSection::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 760px 130px at 8% 98%,rgba(18,6,52,.78) 0 58%,transparent 59%),
    radial-gradient(ellipse 920px 150px at 48% 99%,rgba(43,13,112,.70) 0 58%,transparent 59%),
    radial-gradient(ellipse 780px 130px at 91% 98%,rgba(30,8,83,.78) 0 58%,transparent 59%),
    radial-gradient(ellipse 620px 105px at 26% 88%,rgba(101,48,220,.52) 0 58%,transparent 60%),
    radial-gradient(ellipse 720px 112px at 76% 90%,rgba(119,62,235,.48) 0 58%,transparent 60%),
    linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.075) 42% 43.4%,transparent 43.4% 100%);
  opacity:1;
}
.discordWaveSection::after,
html[data-scheme="light"] .discordWaveSection::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.085) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.065) 1px,transparent 1px),
    radial-gradient(circle at 18% 30%,rgba(255,255,255,.20) 0 2px,transparent 3px),
    radial-gradient(circle at 74% 22%,rgba(255,255,255,.13) 0 1px,transparent 2px),
    linear-gradient(180deg,rgba(255,255,255,.12),transparent 20%,transparent 76%,rgba(12,4,38,.28));
  background-size:76px 76px,76px 76px,auto,auto,auto;
  opacity:.66;
}
.discordWaveTop,
html[data-scheme="light"] .discordWaveTop{
  top:-132px;
  height:190px;
  z-index:2;
  background:
    radial-gradient(ellipse 880px 125px at 18% 100%,rgba(16,5,48,.92) 0 58%,transparent 59%),
    radial-gradient(ellipse 980px 138px at 76% 98%,rgba(35,11,92,.82) 0 58%,transparent 59%);
  transform:rotate(.8deg);
}
.discordWaveBottom,
html[data-scheme="light"] .discordWaveBottom{
  bottom:-30px;
  height:210px;
  z-index:2;
  border-radius:0;
  transform:none;
  background:
    radial-gradient(ellipse 620px 100px at 4% 66%,rgba(19,5,55,.86) 0 60%,transparent 61%),
    radial-gradient(ellipse 980px 145px at 42% 72%,rgba(36,10,95,.84) 0 59%,transparent 60%),
    radial-gradient(ellipse 760px 120px at 92% 64%,rgba(53,17,126,.78) 0 58%,transparent 59%),
    radial-gradient(ellipse 880px 150px at 50% 100%,rgba(10,3,31,.92) 0 60%,transparent 61%);
}
.discordWaveInner,
html[data-scheme="light"] .discordWaveInner{
  z-index:4;
  background:
    radial-gradient(ellipse 620px 360px at 86% 48%,rgba(154,171,192,.34),transparent 66%),
    linear-gradient(135deg,rgba(30,11,78,.70),rgba(104,51,213,.44));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 22px 70px rgba(19,7,58,.22);
  backdrop-filter:blur(24px) saturate(1.24);
}
.discordWaveCopy h2,
html[data-scheme="light"] .discordWaveCopy h2,
.discordWaveCopy p,
html[data-scheme="light"] .discordWaveCopy p,
.discordEyebrow,
html[data-scheme="light"] .discordEyebrow,
.discordMiniActions a,
html[data-scheme="light"] .discordMiniActions a{
  color:#fff;
}
.discordMascot{
  width:min(740px,57vw);
  margin-right:-70px;
  transform:translateY(38px);
}
.footer{
  position:relative;
  z-index:1;
}

/* Discord bottom wave: real liquid edge, no flat black slab. */
.discordWaveSection::before,
html[data-scheme="light"] .discordWaveSection::before{
  background:
    linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.075) 42% 43.4%,transparent 43.4% 100%),
    radial-gradient(ellipse 900px 300px at 82% 18%,rgba(154,171,192,.18),transparent 68%);
}
.discordWaveBottom,
html[data-scheme="light"] .discordWaveBottom{
  left:0;
  right:0;
  bottom:-1px;
  height:190px;
  z-index:3;
  transform:none;
  border-radius:0;
  background:
    radial-gradient(ellipse 900px 150px at 82% 72%,rgba(80,30,176,.45),transparent 64%),
    linear-gradient(180deg,rgba(39,13,105,.96),rgba(16,5,48,.98));
  clip-path:polygon(
    0 54%,
    7% 52%,
    14% 55%,
    22% 61%,
    31% 55%,
    41% 50%,
    52% 53%,
    63% 62%,
    73% 53%,
    84% 49%,
    93% 53%,
    100% 47%,
    100% 100%,
    0 100%
  );
}
.discordWaveBottom::before,
html[data-scheme="light"] .discordWaveBottom::before{
  content:"";
  position:absolute;
  inset:28px 0 0;
  background:linear-gradient(180deg,rgba(50,17,130,.72),rgba(10,3,32,.96));
  clip-path:polygon(
    0 50%,
    9% 45%,
    18% 49%,
    29% 58%,
    40% 50%,
    52% 45%,
    64% 49%,
    74% 58%,
    86% 48%,
    100% 43%,
    100% 100%,
    0 100%
  );
}

/* Discord stage reset: no purple background behind the card. */
.discordWaveSection,
html[data-scheme="light"] .discordWaveSection{
  overflow:visible;
  margin:28px 0 42px;
  padding:72px 0 72px;
  width:auto;
  background:transparent !important;
  box-shadow:none !important;
}
.discordWaveSection::before,
.discordWaveSection::after,
.discordWaveTop,
.discordWaveBottom,
html[data-scheme="light"] .discordWaveSection::before,
html[data-scheme="light"] .discordWaveSection::after,
html[data-scheme="light"] .discordWaveTop,
html[data-scheme="light"] .discordWaveBottom{
  display:none !important;
}

/* Single clean purple wave behind Discord card. */
.discordWaveSection,
html[data-scheme="light"] .discordWaveSection{
  position:relative;
  isolation:isolate;
  z-index:8;
  margin:34px 0 46px;
  padding:76px 0 92px;
}
.discordWaveSection::before,
html[data-scheme="light"] .discordWaveSection::before{
  content:"";
  display:block !important;
  position:absolute;
  left:50%;
  top:42%;
  width:100vw;
  height:330px;
  transform:translateX(-50%);
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 900px 260px at 78% 18%,rgba(168,85,247,.62),transparent 68%),
    radial-gradient(ellipse 780px 220px at 18% 82%,rgba(49,17,119,.72),transparent 70%),
    linear-gradient(135deg,#0d2e86 0%,#1d4ed8 48%,#c0d0dc 100%);
  clip-path:polygon(
    0 28%,
    8% 24%,
    18% 29%,
    29% 22%,
    41% 18%,
    53% 23%,
    65% 17%,
    77% 20%,
    89% 15%,
    100% 22%,
    100% 78%,
    91% 84%,
    79% 79%,
    66% 87%,
    53% 82%,
    40% 90%,
    27% 83%,
    15% 88%,
    0 80%
  );
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.discordWaveSection::after,
html[data-scheme="light"] .discordWaveSection::after{
  content:"";
  display:block !important;
  position:absolute;
  left:50%;
  top:50%;
  width:100vw;
  height:250px;
  transform:translateX(-50%);
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.045) 1px,transparent 1px),
    radial-gradient(ellipse 880px 160px at 52% 86%,rgba(21,6,62,.38),transparent 72%);
  background-size:76px 76px,76px 76px,auto;
  clip-path:polygon(
    0 35%,
    12% 30%,
    26% 37%,
    40% 28%,
    55% 34%,
    69% 26%,
    84% 31%,
    100% 24%,
    100% 80%,
    83% 88%,
    68% 78%,
    52% 86%,
    36% 79%,
    19% 88%,
    0 82%
  );
  opacity:.72;
}
.discordWaveInner,
html[data-scheme="light"] .discordWaveInner{
  position:relative;
  z-index:3;
}

/* Smooth oversized wave behind the Discord card. */
.discordWaveSection,
html[data-scheme="light"] .discordWaveSection{
  padding:158px 0 178px;
}
.discordWaveSection::before,
html[data-scheme="light"] .discordWaveSection::before{
  top:50%;
  width:190vw;
  height:620px;
  transform:translate(-50%,-50%) rotate(-1.2deg);
  background:
    radial-gradient(ellipse 900px 330px at 86% 46%,rgba(168,85,247,.70),transparent 68%),
    radial-gradient(ellipse 820px 340px at 15% 56%,rgba(49,17,119,.78),transparent 70%),
    radial-gradient(ellipse 920px 260px at 52% 88%,rgba(26,7,80,.42),transparent 72%),
    linear-gradient(90deg,#1030a0 0%,#1d4ed8 42%,#c0d0dc 100%);
  clip-path:none;
  border-radius:49% 51% 46% 54% / 38% 45% 55% 62%;
}
.discordWaveSection::after,
html[data-scheme="light"] .discordWaveSection::after{
  top:50%;
  width:192vw;
  height:520px;
  transform:translate(-50%,-46%) rotate(1deg);
  background:
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.045) 1px,transparent 1px),
    radial-gradient(ellipse 980px 240px at 58% 86%,rgba(20,6,63,.30),transparent 70%);
  background-size:76px 76px,76px 76px,auto;
  clip-path:none;
  border-radius:53% 47% 57% 43% / 48% 36% 64% 52%;
  opacity:.62;
}

/* Oversized irregular Discord wave - final shape pass. */
.discordWaveSection,
html[data-scheme="light"] .discordWaveSection{
  padding:190px 0 188px;
}
.discordWaveSection::before,
html[data-scheme="light"] .discordWaveSection::before{
  top:37%;
  width:235vw;
  height:860px;
  transform:translate(-50%,-50%) rotate(-2.4deg);
  background:
    radial-gradient(ellipse 980px 360px at 82% 34%,rgba(173,104,255,.78),transparent 68%),
    radial-gradient(ellipse 980px 410px at 16% 54%,rgba(48,14,128,.86),transparent 72%),
    radial-gradient(ellipse 1280px 340px at 54% 88%,rgba(22,6,76,.48),transparent 74%),
    linear-gradient(90deg,#0d2e86 0%,#1d4ed8 46%,#c0d0dc 100%);
  border-radius:58% 42% 61% 39% / 30% 58% 42% 70%;
}
.discordWaveSection::after,
html[data-scheme="light"] .discordWaveSection::after{
  top:42%;
  width:238vw;
  height:720px;
  transform:translate(-50%,-50%) rotate(1.8deg);
  background:
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.04) 1px,transparent 1px),
    radial-gradient(ellipse 900px 250px at 25% 34%,rgba(255,255,255,.08),transparent 70%),
    radial-gradient(ellipse 1120px 300px at 62% 78%,rgba(12,3,46,.42),transparent 72%),
    linear-gradient(90deg,rgba(44,13,116,.70),rgba(139,154,176,.44));
  background-size:76px 76px,76px 76px,auto,auto,auto;
  border-radius:44% 56% 38% 62% / 62% 32% 68% 38%;
  opacity:.82;
}

/* Discord vibe pass: lower, straighter wave with softer Discord-like glow. */
.discordWaveSection,
html[data-scheme="light"] .discordWaveSection{
  padding:150px 0 154px;
}
.discordWaveSection::before,
html[data-scheme="light"] .discordWaveSection::before{
  top:57%;
  width:230vw;
  height:690px;
  transform:translate(-50%,-50%) rotate(-.25deg);
  background:
    radial-gradient(ellipse 820px 290px at 82% 38%,rgba(88,101,242,.48),transparent 68%),
    radial-gradient(ellipse 1050px 350px at 20% 56%,rgba(75,28,180,.82),transparent 72%),
    radial-gradient(ellipse 1200px 280px at 54% 92%,rgba(25,8,82,.44),transparent 74%),
    linear-gradient(90deg,#0c2c82 0%,#1d4ed8 47%,#c0d0dc 100%);
  border-radius:50% 50% 52% 48% / 24% 26% 74% 76%;
}
.discordWaveSection::after,
html[data-scheme="light"] .discordWaveSection::after{
  top:58%;
  width:232vw;
  height:575px;
  transform:translate(-50%,-50%) rotate(.18deg);
  background:
    radial-gradient(circle at 18% 33%,rgba(255,255,255,.22) 0 2px,transparent 3px),
    radial-gradient(circle at 72% 26%,rgba(255,255,255,.18) 0 1px,transparent 2px),
    radial-gradient(circle at 86% 67%,rgba(88,101,242,.26) 0 3px,transparent 4px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.04) 1px,transparent 1px),
    radial-gradient(ellipse 980px 220px at 58% 88%,rgba(12,3,46,.35),transparent 72%);
  background-size:auto,auto,auto,76px 76px,76px 76px,auto;
  border-radius:50% 50% 48% 52% / 30% 28% 72% 70%;
  opacity:.74;
}
.discordWaveInner,
html[data-scheme="light"] .discordWaveInner{
  overflow:hidden;
  background:
    radial-gradient(ellipse 520px 280px at 84% 42%,rgba(88,101,242,.22),transparent 68%),
    radial-gradient(ellipse 620px 360px at 86% 54%,rgba(154,171,192,.34),transparent 66%),
    linear-gradient(135deg,rgba(30,11,78,.72),rgba(104,51,213,.46));
  border-color:rgba(255,255,255,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(88,101,242,.10),
    0 28px 90px rgba(32,10,88,.26);
}
.discordWaveInner::before,
html[data-scheme="light"] .discordWaveInner::before{
  content:"";
  position:absolute;
  inset:-18% -22%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 360px 150px at 88% 2%,rgba(139,154,176,.30),transparent 68%),
    radial-gradient(circle at 82% 10%,rgba(255,255,255,.22) 0 2px,transparent 3px),
    radial-gradient(circle at 77% 62%,rgba(88,101,242,.28) 0 4px,transparent 5px),
    radial-gradient(ellipse 390px 160px at 7% 98%,rgba(88,101,242,.24),transparent 70%),
    radial-gradient(circle at 12% 90%,rgba(88,101,242,.20) 0 3px,transparent 4px),
    radial-gradient(circle at 34% 18%,rgba(255,255,255,.13) 0 1px,transparent 2px),
    linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.10) 42% 43.5%,transparent 43.5% 100%);
  opacity:.78;
  background-size:auto,auto,auto,auto,auto,auto,160% 160%;
  animation:discordGlassSweep 7s ease-in-out infinite;
}
.discordMascotWrap::before{
  content:"";
  position:absolute;
  right:4%;
  bottom:15%;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(88,101,242,.32),rgba(139,154,176,.18) 44%,transparent 70%);
  filter:blur(8px);
  z-index:0;
  pointer-events:none;
}
.discordMascot{position:relative;z-index:1}
@keyframes discordGlassSweep{
  0%{transform:translateX(-10%) translateY(4%)}
  50%{transform:translateX(10%) translateY(-5%)}
  100%{transform:translateX(-10%) translateY(4%)}
}

/* Discord wave coverage: fill the upper/lower marked areas with purple. */
.discordWaveSection,
html[data-scheme="light"] .discordWaveSection{
  padding:122px 0 128px;
  margin:18px 0 30px;
}
.discordWaveSection::before,
html[data-scheme="light"] .discordWaveSection::before{
  top:52%;
  width:min(1500px,132vw);
  height:620px;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse 760px 260px at 82% 30%,rgba(139,154,176,.64),transparent 68%),
    radial-gradient(ellipse 760px 300px at 18% 56%,rgba(61,18,151,.88),transparent 72%),
    radial-gradient(ellipse 980px 220px at 54% 88%,rgba(31,8,96,.42),transparent 74%),
    linear-gradient(90deg,#0d2e86 0%,#1d4ed8 48%,#c0d0dc 100%);
  border-radius:54% 46% 51% 49% / 29% 37% 63% 71%;
  clip-path:none;
}
.discordWaveSection::after,
html[data-scheme="light"] .discordWaveSection::after{
  top:54%;
  width:min(1560px,136vw);
  height:500px;
  transform:translate(-50%,-50%) rotate(.35deg);
  background:
    radial-gradient(circle at 18% 26%,rgba(255,255,255,.18) 0 2px,transparent 3px),
    radial-gradient(circle at 72% 22%,rgba(255,255,255,.15) 0 1px,transparent 2px),
    radial-gradient(circle at 86% 64%,rgba(88,101,242,.24) 0 3px,transparent 4px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.04) 1px,transparent 1px),
    radial-gradient(ellipse 900px 190px at 50% 88%,rgba(13,4,52,.32),transparent 72%);
  background-size:auto,auto,auto,76px 76px,76px 76px,auto;
  border-radius:46% 54% 58% 42% / 43% 27% 73% 57%;
  clip-path:none;
  opacity:.70;
}

/* FINAL POSITION FIX: reference-style wave centered behind the whole card. */
.discordWaveSection,
html[data-scheme="light"] .discordWaveSection{
  position:relative;
  isolation:isolate;
  width:100vw;
  margin:18px calc(50% - 50vw) 34px;
  padding:128px 0 138px;
  overflow:hidden;
  background:transparent !important;
  box-shadow:none !important;
}
.discordWaveSection::before,
html[data-scheme="light"] .discordWaveSection::before{
  content:"";
  display:block !important;
  position:absolute;
  left:0 !important;
  right:0 !important;
  top:-88px !important;
  bottom:-70px !important;
  width:auto !important;
  height:auto !important;
  transform:none !important;
  z-index:0;
  pointer-events:none;
  border-radius:0 !important;
  clip-path:none !important;
  background:
    radial-gradient(ellipse 980px 360px at 82% 32%,rgba(139,154,176,.70),transparent 66%),
    radial-gradient(ellipse 780px 300px at 18% 64%,rgba(49,17,119,.72),transparent 70%),
    linear-gradient(135deg,#0d2e86 0%,#1d4ed8 45%,#c0d0dc 100%) !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 500' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 82C70 130 140 34 215 74C300 120 350 74 430 82C530 94 545 34 640 76C720 112 780 126 850 80C940 22 1010 126 1100 76C1190 30 1280 116 1360 76C1390 62 1420 64 1440 78V422C1380 384 1320 470 1240 426C1160 382 1080 470 990 426C910 386 850 394 760 430C650 476 570 376 470 424C360 476 295 382 205 426C125 464 70 394 0 426Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 500' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 82C70 130 140 34 215 74C300 120 350 74 430 82C530 94 545 34 640 76C720 112 780 126 850 80C940 22 1010 126 1100 76C1190 30 1280 116 1360 76C1390 62 1420 64 1440 78V422C1380 384 1320 470 1240 426C1160 382 1080 470 990 426C910 386 850 394 760 430C650 476 570 376 470 424C360 476 295 382 205 426C125 464 70 394 0 426Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.discordWaveSection::after,
html[data-scheme="light"] .discordWaveSection::after{
  content:"";
  display:block !important;
  position:absolute;
  left:0 !important;
  right:0 !important;
  top:-88px !important;
  bottom:-70px !important;
  width:auto !important;
  height:auto !important;
  transform:none !important;
  z-index:1;
  pointer-events:none;
  border-radius:0 !important;
  clip-path:none !important;
  opacity:.62 !important;
  background:
    linear-gradient(90deg,rgba(154,145,180,.18) 1px,transparent 1px),
    linear-gradient(180deg,rgba(154,145,180,.14) 1px,transparent 1px),
    radial-gradient(circle at 20% 34%,rgba(255,255,255,.18) 0 2px,transparent 3px),
    radial-gradient(circle at 76% 24%,rgba(255,255,255,.13) 0 1px,transparent 2px),
    radial-gradient(ellipse 920px 230px at 50% 88%,rgba(14,4,54,.26),transparent 72%) !important;
  background-size:76px 76px,76px 76px,auto,auto,auto;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 500' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 82C70 130 140 34 215 74C300 120 350 74 430 82C530 94 545 34 640 76C720 112 780 126 850 80C940 22 1010 126 1100 76C1190 30 1280 116 1360 76C1390 62 1420 64 1440 78V422C1380 384 1320 470 1240 426C1160 382 1080 470 990 426C910 386 850 394 760 430C650 476 570 376 470 424C360 476 295 382 205 426C125 464 70 394 0 426Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 500' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 82C70 130 140 34 215 74C300 120 350 74 430 82C530 94 545 34 640 76C720 112 780 126 850 80C940 22 1010 126 1100 76C1190 30 1280 116 1360 76C1390 62 1420 64 1440 78V422C1380 384 1320 470 1240 426C1160 382 1080 470 990 426C910 386 850 394 760 430C650 476 570 376 470 424C360 476 295 382 205 426C125 464 70 394 0 426Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}