/* =========================
   BASE / TOKENS
========================= */
:root{
  --line:rgba(255,255,255,.08);
  --text:#eae7ff;
  --muted:#b7b2d8;
  --bg:#0a0a12;

  /* Fixed topbar height */
  --topbar-h:112px;

  /* WOW topbar theme tokens */
  --nx-glass: linear-gradient(180deg,#0b0f1a 0%, #0a0e19 55%, #090e17 100%);
  --nx-ice1:#7bd3ff;
  --nx-ice2:#b9eaff;
  --nx-ice3:#8fd7ff;
  --nx-neon:#6fd3ff;       /* icy blue */
  --nx-line:rgba(140,210,255,.22);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; 
  color:var(--text);
  font-family:Outfit,system-ui,Segoe UI,Arial,sans-serif;
  background:var(--bg);
  /* push content below fixed topbar */
  padding-top:0;
}

/* =========================
   TOPBAR — WOW GLASS AURORA
========================= */
.nx-topbar{
  position:fixed; inset:0 0 auto 0; z-index:9999;
  background:
    radial-gradient(120% 180% at 10% -30%, rgba(130,200,255,.16), transparent 60%),
    radial-gradient(120% 180% at 90% -20%, rgba(190,170,255,.12), transparent 65%),
    var(--nx-glass);
  border-bottom:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 22px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter:saturate(120%) blur(10px);
  -webkit-backdrop-filter:saturate(120%) blur(10px);
}
.nx-topbar .nx-nav{
  height:var(--topbar-h);
  max-width:1280px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
}
/* aurora sheen */
.nx-topbar::before{
  content:"";
  position:absolute; inset:auto 0 0 0; height:120%;
  background:
    radial-gradient(40% 60% at 20% 0%, rgba(150,220,255,.16), transparent 60%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  mix-blend-mode:screen; opacity:.25;
  animation:nxAurora 8s ease-in-out infinite;
}
/* neon baseline */
.nx-topbar::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px; height:6px;
  background:linear-gradient(
    90deg, transparent 0%, var(--nx-neon) 35%, #b8f2ff 50%, var(--nx-neon) 65%, transparent 100%
  );
  filter:blur(.2px);
  box-shadow:0 0 16px rgba(120,200,255,.65), 0 0 40px rgba(120,200,255,.35);
  pointer-events:none;
}
.nx-topbar .nx-spark{
  position:absolute; inset:0; pointer-events:none; opacity:.25;
  background:
    radial-gradient(2px 2px at 14% 60%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(2px 2px at 34% 30%, rgba(160,220,255,.45), transparent 60%),
    radial-gradient(2px 2px at 66% 40%, rgba(200,230,255,.45), transparent 60%),
    radial-gradient(2px 2px at 82% 70%, rgba(180,210,255,.45), transparent 60%);
  animation:nxSpark 10s linear infinite;
}
/* logo */
.nx-topbar .nx-logo{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:900; letter-spacing:.7px; text-decoration:none;
  color:#e9efff; font-size:24px;
  text-shadow:0 0 12px rgba(150,210,255,.22);
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
}
.nx-topbar .nx-logo em{ color:var(--nx-ice3); font-style:normal; }
/* links */
.nx-topbar .nx-links{ position:relative; display:flex; gap:42px; align-items:center; }
.nx-topbar .nx-links a{
  position:relative; color:#d7def6; text-decoration:none;
  font-weight:800; font-size:16px; opacity:.92; padding:10px 2px;
  transition:opacity .18s ease, transform .18s ease;
}
.nx-topbar .nx-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-8px; height:3px;
  background:linear-gradient(90deg, rgba(123,211,255,0), rgba(123,211,255,.75), rgba(192,139,255,0));
  border-radius:6px; box-shadow:0 0 12px rgba(140,210,255,.45);
  transition:right .28s cubic-bezier(.2,.9,.2,1);
}
.nx-topbar .nx-links a:hover{ opacity:1; transform:translateY(-1px); }
.nx-topbar .nx-links a:hover::after{ right:0; }
.nx-topbar .nx-links a.is-active{ color:#fff; text-shadow:0 0 12px rgba(140,210,255,.35); }
.nx-topbar .nx-links a.is-active::before{
  content:""; position:absolute; inset:-8px -14px; z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--nx-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 24px rgba(120,200,255,.18), 0 0 22px rgba(120,200,255,.18);
  border-radius:14px;
}
.nx-topbar .nx-links a + a::before{
  content:"•"; position:absolute; left:-22px; top:50%; transform:translateY(-50%);
  font-size:11px; color:rgba(200,220,255,.35);
}
/* helper */
.hero.debug-start::before{
  content:""; position:absolute; left:0; right:0; top:0; height:10px; z-index:5;
  background:
    linear-gradient(var(--nx-neon),var(--nx-neon)) top/100% 4px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 10px, transparent 10px 20px);
  pointer-events:none;
}
/* topbar animations */
@keyframes nxAurora{ 0%{transform:translateY(0);opacity:.22} 50%{transform:translateY(6%);opacity:.32} 100%{transform:translateY(0);opacity:.22} }
@keyframes nxSpark{ 0%{background-position:0 0,0 0,0 0,0 0;opacity:.25} 50%{background-position:8px 6px,-6px 10px,10px -6px,-8px -10px;opacity:.33} 100%{background-position:0 0,0 0,0 0,0 0;opacity:.25} }
@media (prefers-reduced-motion: reduce){
  .nx-topbar::before,
  .nx-topbar .nx-spark,
  .nx-topbar .nx-links a::after{ animation:none !important; }
}

/* =========================
   HERO (PAGE 1)
========================= */
.hero{
  position:relative; height:100vh; overflow:hidden;
  width:100vw; margin-left:50%; transform:translateX(-50%);
}
.hero video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:brightness(.95) contrast(1.06);
}
.hero .shade{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.82) 25%,rgba(0,0,0,.45) 58%,rgba(0,0,0,0) 100%);
}
.container{
  position:relative; z-index:2; height:100%;
  display:flex; align-items:center; max-width:1280px; margin:0 auto; padding:0 12px;
}
.left{max-width:640px; margin-left:6px;}
.kicker{color:#8ef2ff; font-weight:800; letter-spacing:.06em; margin-bottom:10px}
h1{font-size:64px; line-height:1.05; margin:0 0 10px; color:#fff}
p{color:var(--muted); line-height:1.7}
.cta{display:flex; gap:14px; margin-top:18px}
.btn{display:inline-block; padding:12px 18px; border-radius:12px; font-weight:800; text-decoration:none; cursor:pointer; border:0}
.btn.primary{background:linear-gradient(90deg,#ffb774,#ff7ac3); color:#1b0b0f}
.btn.secondary{background:linear-gradient(90deg,#7bd3ff,#c08bff); color:#0d0d19}
.btn.secondary::before{content:"🎡 ";}

/* MMORPG-style website button inside hero CTA */
.btn-website{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 26px;
  border-radius:14px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.18), transparent 40%),
    linear-gradient(120deg,#6fd3ff,#9f8bff,#ffe38f);
  color:#12091a;
  font:900 13px/1 Outfit,system-ui,sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
  text-decoration:none;
  box-shadow:
    0 10px 30px rgba(0,0,0,.75),
    0 0 24px rgba(145,210,255,.7);
  cursor:pointer;
  background-size:220% 220%;
  background-position:0% 50%;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.2), background-position .35s ease;
}

.btn-website:hover{
  transform:translateY(-2px) scale(1.05);
  background-position:100% 50%;
}
.chips{display:flex; gap:8px; align-items:center; margin-top:14px; color:#cbd0e8}
.chip{padding:6px 10px; border-radius:10px; background:#0f0f19cc; border:1px solid var(--line); font-size:12px; font-weight:700}
.hero .fade-bottom{
  position:absolute; left:0; right:0; bottom:0; height:160px; z-index:3;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #0a0a12 60%, #0a0a12 100%);
}
/* divider under hero */
.embed-wrap{background:#0a0a12;}
#mudreamFrame{width:100%; border:0; display:block; background:#0a0a12; min-height:2000px;}
.section-divider{height:24px; background:radial-gradient(80% 40% at 50% 0%, rgba(255,255,255,.08), rgba(255,255,255,0));}

/* =========================
   MODAL / WHEEL
========================= */
.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; z-index:50;
}
.modal{
  background:rgba(18,20,36,0.58);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; max-width:820px; width:96%; padding:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.65);
  display:grid; grid-template-columns:460px 1fr; gap:16px; align-items:center; justify-items:center;
}
.modal h2{margin:0 0 8px; font-size:26px; color:#f0eaff}
.modal p{margin:8px 0; color:#dcd6f5}
.rules{margin:8px 0 0 0; padding-left:18px; color:#cfd3fb}
.rules li{margin:4px 0}
@media(max-width:860px){ .modal{grid-template-columns:1fr; justify-items:stretch} }

.wheel-wrap{position:relative; display:flex; align-items:center; justify-content:center; justify-self:center}
.wheel{
  width:500px; height:500px; border-radius:50%;
  position:relative; overflow:visible;
  background:radial-gradient(120% 120% at 30% 30%, #191b2f 0%, #0f1122 70%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06), 0 0 50px rgba(123,211,255,.08);
  transition:transform 4s cubic-bezier(.17,.67,.32,1.25);
}
.wheel.spin-long{transition-duration:5.5s !important;}
.wheel canvas{filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));}
.wheel .flakes,.wheel .confetti{position:absolute; inset:0; pointer-events:none;}
.pointer{
  position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:14px solid #ffd97a;
  filter:drop-shadow(0 0 10px rgba(255,217,122,.65));
}
.center{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.spin-btn{
  background:linear-gradient(90deg,#7bd3ff,#c08bff); color:#0d0d19; border-radius:999px;
  padding:12px 22px; font-weight:900; border:none; cursor:pointer; box-shadow:0 2px 20px rgba(123,211,255,.25); letter-spacing:.06em;
}
.result{font-size:22px; font-weight:800; color:#ffd479}
.controls{display:flex; gap:10px; margin-top:8px}
.close{display:inline-block; padding:10px 14px; border-radius:10px; background:#18182a; border:1px solid var(--line); color:#dcd8ff; font-weight:800; cursor:pointer}
.center-emblem{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:120px; height:120px; border-radius:50%;
  background:radial-gradient(60% 60% at 50% 45%, #1b1f38 0%, #0d0f1e 60%);
  box-shadow:0 0 30px rgba(164,214,255,.22), inset 0 0 20px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.14);
  animation:emblemPulse 4.5s ease-in-out infinite;
}
.center-emblem:after{
  content:"✦"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:#9ad0ff; font-weight:900; font-size:42px; text-shadow:0 0 12px rgba(154,208,255,.6);
}
@keyframes emblemPulse{ 0%{box-shadow:0 0 22px rgba(164,214,255,.18), inset 0 0 18px rgba(0,0,0,.55); transform:translate(-50%,-50%) scale(1)} 50%{box-shadow:0 0 38px rgba(164,214,255,.34), inset 0 0 24px rgba(0,0,0,.45); transform:translate(-50%,-50%) scale(1.03)} 100%{box-shadow:0 0 22px rgba(164,214,255,.18), inset 0 0 18px rgba(0,0,0,.55); transform:translate(-50%,-50%) scale(1)} }
.winner-pulse{ box-shadow:0 0 0 0 rgba(255,211,106,.4); animation:winnerPulse 1.8s ease-out 2; }
@keyframes winnerPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,211,106,.45);} 100%{ box-shadow:0 0 0 22px rgba(255,211,106,0);} }
.energy-ring{
  position:absolute; left:50%; top:50%; width:40px; height:40px; border-radius:50%;
  transform:translate(-50%,-50%) scale(0.4);
  background:radial-gradient(closest-side, rgba(255,211,106,.8), rgba(255,211,106,.35) 40%, rgba(255,211,106,0) 70%);
  opacity:0; pointer-events:none;
}
.energy-ring.active{ animation:ringPulse 1.2s ease-out 1 forwards; }
@keyframes ringPulse{ 0%{ transform:translate(-50%,-50%) scale(0.4); opacity:.85; filter:blur(2px);} 70%{ transform:translate(-50%,-50%) scale(6); opacity:.25; filter:blur(6px);} 100%{ transform:translate(-50%,-50%) scale(7.5); opacity:0; filter:blur(10px);} }
/* Reward card */
.reward-card{ margin-top:10px; padding:14px; border-radius:14px; background:rgba(12,14,26,.6); border:1px solid rgba(255,255,255,.10); box-shadow:0 10px 30px rgba(0,0,0,.35) }
.reward-title{ font-size:20px; font-weight:900; margin-bottom:8px; color:#f6f2ff; }

/* =========================
   PAGE 2 — ICY BOSSES
========================= */
.icy-section{
  position:relative; min-height:100vh; color:#eef3ff; overflow:hidden;
  /* top color now matches hero bottom (#0a0a12) to remove seam */
  background:linear-gradient(180deg,#0a0a12 0%,#0a1627 12%,#0b1f35 26%,#0b2a44 42%,#0b3552 58%,#0c3e5f 74%,#0d476b 100%);
}
.aurora-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 35% at 20% 10%, rgba(160,210,255,0.16) 0%, rgba(160,210,255,0.00) 60%),
    radial-gradient(55% 30% at 80% 20%, rgba(185,155,255,0.14) 0%, rgba(185,155,255,0.00) 62%),
    radial-gradient(70% 45% at 50% 0%,  rgba(140,200,255,0.10) 0%, rgba(140,200,255,0.00) 65%);
  filter:saturate(105%) contrast(102%) brightness(96%);
}
.aurora-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(7,12,21,0.50) 0%, rgba(7,12,21,0.20) 14%, rgba(7,12,21,0.00) 30%),
    linear-gradient(180deg, rgba(6,12,25,0.00) 60%, rgba(6,12,25,0.40) 100%);
}
.snow-canvas{position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen}
.aurora-shimmer{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(35% 24% at 18% 12%, rgba(170,220,255,0.06) 0%, rgba(170,220,255,0.00) 70%),
    radial-gradient(30% 22% at 78% 28%, rgba(190,170,255,0.05) 0%, rgba(190,170,255,0.00) 72%);
  mix-blend-mode:screen; opacity:.9;
}
/* Cinematic intro */
.icy-intro{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; z-index:30; opacity:0; pointer-events:none; transition:opacity 1s ease; background:transparent;}
.icy-intro.show{opacity:1;}
.icy-intro .text{max-width:920px; padding:28px; backdrop-filter:blur(6px) saturate(1.05); color:#eaf3ff; text-shadow:0 8px 30px rgba(2,8,20,.6); border-radius:16px;}
.icy-intro h2{font-size:44px; margin:0 0 10px; letter-spacing:.02em; color:#f8fbff}
.icy-intro p{margin:0; color:#dbe6ff; opacity:.92; font-size:18px}

/* Content + Grid */
.icy-content{position:relative; z-index:40; padding:120px 20px 140px; max-width:1180px; margin:0 auto}
.icy-heading{text-align:center; margin-bottom:28px}
.icy-heading h3{color:#f8fbff; font-size:32px; margin:0 0 6px}
.icy-heading p{color:#cfd9f9; margin:0}
.boss-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start}
@media(max-width:980px){ .boss-grid{grid-template-columns:1fr} }

/* Card */
.boss-card{
  position:relative; border-radius:14px; padding:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(8px) saturate(1.1);
  box-shadow:0 8px 40px rgba(3,8,18,.6);
  transform:translateY(22px); opacity:0;
  transition:transform .7s cubic-bezier(.2,.95,.3,1), opacity .6s ease;
}
.boss-card.in{transform:translateY(0); opacity:1}
.boss-card .sigil{
  width:60px; height:60px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06); box-shadow:0 6px 18px rgba(30,80,140,.08);
  margin-bottom:12px; color:#cfeaff; font-weight:900; font-size:22px
}
.boss-card h4{margin:8px 0 8px; color:#f3f8ff; font-size:20px}
.boss-card p{margin:0; color:#d6e5ff; line-height:1.6}
.boss-card .accent{
  height:4px; width:70px; border-radius:6px; margin:12px 0 18px;
  background:linear-gradient(90deg,rgba(121,196,255,.9),rgba(174,132,255,.9));
  box-shadow:0 6px 20px rgba(120,200,255,.12)
}
.boss-card.slide-left{transform:translateX(-28px) translateY(18px)}
.boss-card.slide-right{transform:translateX(28px) translateY(18px)}
.boss-card.slide-left.in,.boss-card.slide-right.in{transform:translateX(0) translateY(0); opacity:1}

.back-top{
  position:fixed; right:22px; bottom:22px; z-index:60;
  background:linear-gradient(180deg,#dff6ff,#bfe9ff); color:#051224;
  padding:10px 12px; border-radius:12px; font-weight:800; border:none;
  box-shadow:0 8px 30px rgba(4,10,24,.6); display:none; cursor:pointer
}
.back-top.show{display:block}

/* 3D cards */
model-viewer{ width:100%; height:100%; background:transparent !important; --poster-color:transparent; }
.boss-card.model{ padding:18px 18px 10px; overflow:hidden; }
.boss-card.model .model-header{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.boss-card.model .model-header .sigil{ font-size:22px; line-height:1; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.boss-card.model .model-header .titles h4{ margin:0; padding:0; }
.boss-card.model .model-wrap{
  border-radius:14px; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%, rgba(170,210,255,.08), rgba(0,0,0,.12));
  outline:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 12px 40px rgba(0,0,0,.35);
}
.boss-card.model .model-note{ font-size:12px; color:#bcd7ff; opacity:.85; margin:10px 2px 0;}
@media (max-width: 992px){ .boss-card.model .model-wrap model-viewer{height:320px !important;} }
@media (max-width: 600px){ .boss-card.model .model-wrap model-viewer{height:280px !important;} }

/* =========================
   MMORPG HP BARS
========================= */
.hpbar{
  position:relative; margin:10px 2px 0; height:18px; border-radius:999px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.25));
  outline:1px solid rgba(255,255,255,0.08);
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.35), 0 6px 20px rgba(0,0,0,0.25);
}
.hpbar .hp-fill{
  position:absolute; inset:0; width:100%;
  background:linear-gradient(180deg,#ff6b6b,#b41616), radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.22), transparent);
}
.hpbar.golem .hp-fill{ background:linear-gradient(180deg,#ff7070,#b32121), radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.20), transparent); }
.hpbar.seraph .hp-fill{ background:linear-gradient(180deg,#ff6b6b,#8f1010), radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.22), transparent); }
.hpbar .hp-label{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:center; height:18px;
  font:800 12px/1 Outfit, system-ui, sans-serif; letter-spacing:.2px; color:#fff2f2; text-shadow:0 1px 2px rgba(0,0,0,.65); user-select:none;
}

/* =========================
   MINI BOSSES
========================= */
.mini-section{margin-top:6rem;}
.miniboss-grid{
  --tile:220px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(var(--tile), 1fr));
  gap:16px; padding:0; margin:0; list-style:none;
}
.miniboss-card{
  position:relative; height:calc(var(--tile) + 40px); border-radius:16px;
  background:radial-gradient(120% 120% at 20% 0%, #1b213a 0%, #0f1324 60%, #0a0e1d 100%);
  box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
}
.miniboss-card:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.45), 0 0 18px rgba(100,180,255,.2); }
.mb-head{ position:absolute; inset:8px 8px auto 8px; display:flex; align-items:center; gap:8px; z-index:2; }
.mb-badge{
  font:600 11px/1.2 ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial; color:#cfe8ff;
  background:linear-gradient(90deg, #2a6cff, #7bd6ff); padding:4px 8px; border-radius:999px;
  box-shadow:0 0 10px rgba(80,160,255,.4);
}
.mb-name{ font:600 12px/1 ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial; color:#dbe7ff; opacity:.9; }
.miniboss-card model-viewer{ position:absolute; inset:0; bottom:32px; }
.mb-footer{
  position:absolute; left:8px; right:8px; bottom:6px; height:26px; display:flex; align-items:center; justify-content:space-between; z-index:2;
}
.mb-btn{
  font:600 12px/1 ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial; color:#d9ebff;
  background:#14203a; border:1px solid rgba(122,178,255,.3); border-radius:10px; padding:6px 10px; cursor:pointer;
}
.mb-btn:hover{ background:#1a2a4f; }
.mb-link{
  font:600 12px/1 ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial; color:#86c6ff;
  text-decoration:none; border-bottom:1px dotted rgba(134,198,255,.6);
}
.mb-link:hover{ color:#b7dcff; }

/* Drops + Tooltip (scoped, non-breaking) */
.boss-card{ position:relative; overflow:visible; }
.icy-section,.icy-content,.boss-grid,.boss-card,.boss-card .model-wrap{ overflow:visible !important; }
.drop-row{ display:flex; gap:8px; align-items:center; margin:8px 2px 0; }
.drop{ position:relative; width:34px; height:34px; border-radius:8px; }
.drop model-viewer{
  width:34px; height:34px; display:block; background:transparent !important; --poster-color:transparent;
  pointer-events:none; touch-action:none;
}
.drop model-viewer::part(default-progress-bar){ display:none; }
/* inline tooltip */
.drop .tip{
  position:absolute; left:50%; bottom:calc(100% + 12px); transform:translateX(-50%);
  width:280px; opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:3000;
}
.drop:hover>.tip,.drop:focus-within>.tip{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(-2px); }
.tip .tip-card{
  background:#20120a; color:#fff; text-align:center; border-radius:14px; padding:14px 16px 16px;
  box-shadow:0 14px 36px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); position:relative;
}
.tip .tip-card:after{
  content:''; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:#20120a; border-right:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
}
.tip .tip-jewel model-viewer{ width:22px; height:22px; margin:2px auto 8px; pointer-events:none; }
.tip .tip-title{ font:900 16px/1.2 Outfit,system-ui,sans-serif; margin:0 0 6px; }
.tip .tip-desc{ display:flex; gap:8px; justify-content:center; font:800 13px/1.35 Outfit,system-ui,sans-serif; color:#ffd429; margin:0; }
.tip .tip-desc::before{ content:'•'; color:#ffd429; font-weight:900; }
.tip .tip-rate{ margin-top:6px; font:700 13px/1.35 Outfit,system-ui,sans-serif; color:#6db6ff; }

/* Tooltip overflow helpers */
.tooltip,[data-tooltip],[data-tooltip-content]{ pointer-events:none; }
.tooltip.show,.tooltip[aria-hidden="false"],[data-tooltip].show,[data-tooltip-content].show{
  position:fixed !important; z-index:999999 !important; max-width:90vw; left:auto; right:auto;
}
.card .tooltip,.card [data-tooltip],.card [data-tooltip-content]{ transform:translateZ(0); }
.card:has(.tooltip.show),.card:has([data-tooltip].show),.card:has([data-tooltip-content].show){ overflow:visible !important; }

/* TOOLTIP PORTAL v5 — OPT-IN via <body class="tfv5-enabled"> */
body.tfv5-enabled .drop .tip,
body.tfv5-enabled .drop .tooltip,
body.tfv5-enabled .drop [role="tooltip"],
body.tfv5-enabled .drop [data-tooltip]{ display:none !important; }

body.tfv5-enabled #tfv5-portal-layer{ position:fixed; inset:0; pointer-events:none; z-index:2147483647; isolation:isolate; }
body.tfv5-enabled #tfv5-tip{ position:fixed; left:0; top:0; width:280px; opacity:0; transition:opacity .12s ease; }
body.tfv5-enabled #tfv5-tip.show{ opacity:1; }
body.tfv5-enabled #tfv5-tip .card{
  background:#20120a; color:#fff; text-align:center; border-radius:14px; padding:14px 16px 16px;
  box-shadow:0 14px 36px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); position:relative;
}
body.tfv5-enabled #tfv5-tip .card:after{
  content:""; position:absolute; bottom:-6px; left:var(--arrow-x,50%); transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:#20120a; border-right:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
}

/* ICY tooltip unified theme (inline + portal) */
:root body .tip .tip-card,
:root body #tfv5-tip .card{
  background:linear-gradient(180deg, rgba(24,42,66,.94), rgba(12,26,44,.96)) !important;
  backdrop-filter:blur(8px) saturate(115%) !important;
  -webkit-backdrop-filter:blur(8px) saturate(115%) !important;
  border:1px solid rgba(140,210,255,.22) !important;
  box-shadow:0 12px 28px rgba(4,18,36,.6), 0 0 0 1px rgba(86,180,255,.18), inset 0 1px 0 rgba(255,255,255,.06) !important;
  border-radius:14px !important;
}
:root body .tip .tip-card:after,
:root body #tfv5-tip .card:after{
  background:linear-gradient(180deg, rgba(24,42,66,.94), rgba(12,26,44,.96)) !important;
  border-right:1px solid rgba(140,210,255,.22) !important;
  border-bottom:1px solid rgba(140,210,255,.22) !important;
  box-shadow:0 2px 6px rgba(4,18,36,.48) !important;
}

/* tip bullets */
.tip-bullets{ margin:6px 0 0; padding-left:1.15rem; list-style:disc; }
.tip-bullets--tight{ line-height:1.25; }
.tip-card .tip-bullets li{ white-space:normal; letter-spacing:0; word-spacing:0; }

/* Glow-on-hover for drops -> color the whole card */
.boss-card{ transition:transform .25s ease, box-shadow .25s ease; }
.boss-card.glow{
  box-shadow:0 8px 40px rgba(3,8,18,.60), 0 0 24px var(--glow, rgba(150,210,255,.35)), 0 0 2px 1px var(--glow, rgba(150,210,255,.25));
}
.drop::after{
  content:""; position:absolute; inset:-2px; border-radius:10px;
  box-shadow:0 0 14px var(--glow, rgba(150,210,255,.35)); opacity:0; transition:opacity .18s ease;
}
.drop:hover::after{ opacity:1; }
.boss-card:hover{ transform:translateY(-4px); }
.drop::before{
  content:""; position:absolute; left:-20%; top:-40%; width:40%; height:180%;
  transform:rotate(25deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.drop:hover::before{ opacity:.45; }

/* Wheel helpers + cooldown UI */
#wheelWrap.backdrop{ z-index:9999; align-items:center; justify-content:center; }
#wheelWrap.backdrop.open{ display:flex; }
.btn.secondary.disabled{ opacity:.55; filter:saturate(.7); cursor:not-allowed; pointer-events:none; }
.btn.disabled,.btn[aria-disabled="true"]{ opacity:.6; pointer-events:none; filter:saturate(.6) grayscale(.15); }
#tfv5-portal-layer{ position:fixed; inset:0; z-index:2147483647; pointer-events:none; }
#tfv5-tip{ position:fixed; pointer-events:auto; max-width:90vw; }

/* Compact metadata strip (boss + miniboss) */
.boss-card .meta-strip,.miniboss-card .meta-strip{
  display:flex; align-items:center; gap:10px; margin:10px 2px 0;
  font:600 12px/1.2 ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial; color:#cfe6ff; opacity:.9;
}
.boss-card .meta-strip .meta,.miniboss-card .meta-strip .meta{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.boss-card .meta-strip .i,.miniboss-card .meta-strip .i{ display:inline-flex; width:14px; height:14px; align-items:center; justify-content:center; filter:drop-shadow(0 0 2px rgba(255,255,255,.15)); }
.boss-card .meta-strip .coords{ opacity:.85; }
.boss-card .meta-strip .dot,.miniboss-card .meta-strip .dot{ opacity:.6; }

/* ===== Titles: Patch (no sigils/accents on first two cards) ===== */
.boss-card[data-index="0"] .sigil,
.boss-card[data-index="1"] .sigil{ display:none !important; }
.boss-card[data-index="0"] .accent,
.boss-card[data-index="1"] .accent,
.boss-card[data-index="2"] .accent{ display:none !important; }

/* Card 1 — Monster Preview title */
.boss-card[data-index="0"] .model-header .titles h4{
  font:900 22px/1.15 "Outfit", system-ui, sans-serif;
  letter-spacing:.6px; text-transform:uppercase; color:#dff5ff;
  text-shadow:0 0 8px rgba(150,220,255,.35), 0 0 22px rgba(120,200,255,.25);
  margin:0;
}
/* Card 2 — Ice Golem title */
.boss-card[data-index="1"] .model-header .titles h4{
  font:900 22px/1.15 "Outfit", system-ui, sans-serif;
  letter-spacing:1px; text-transform:uppercase;
  background:linear-gradient(90deg,#8ad6ff 0%, #c7d7ff 40%, #9bb5ff 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 8px rgba(110,170,255,.35));
  margin:0;
}
/* Card 3 — Frost Seraph title (single, conflict-free) */
.boss-card#frost-seraph .model-header .boss-title{
  font:900 26px/1.1 "Outfit", system-ui, sans-serif;
  letter-spacing:1.6px; text-transform:uppercase; margin:0;
  background:linear-gradient(90deg,#9fe0ff 0%, #ffffff 40%, #b0d5ff 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 12px rgba(160,220,255,.55), 0 0 28px rgba(140,200,255,.35);
}

/* ===== Loot table ===== */
.loot{
  margin:14px 2px 0; padding:12px; border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06); box-shadow:0 6px 24px rgba(2,10,22,.45);
}
.loot .loot-title{
  font:900 14px/1 Outfit,system-ui,sans-serif; letter-spacing:.6px; color:#eaf3ff; opacity:.92;
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.loot .loot-title .ev{
  margin-left:auto; font:900 12px/1 Outfit,system-ui; color:#0c2332;
  padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg,#9fe0ff,#b8f2ff);
  box-shadow:0 0 12px rgba(120,200,255,.25);
}
.loot-table{ width:100%; border-collapse:separate; border-spacing:0 6px; }
.loot-row{
  display:grid; grid-template-columns:1.2fr .35fr .35fr .35fr; gap:10px; align-items:center;
  padding:8px 10px; border-radius:10px; background:rgba(12,26,44,.45); outline:1px solid rgba(140,210,255,.10);
}
.loot-row:hover{ background:rgba(18,40,70,.55); }
.loot-name{ font:800 13px/1.2 Outfit,system-ui; color:#eaf6ff; }
.loot-val{ font:800 12px/1 Outfit,system-ui; color:#cfe6ff; text-align:center; }
.chance{
  font:900 12px/1 Outfit,system-ui; text-align:center;
  padding:6px 8px; border-radius:999px; color:#0c2536;
  background:linear-gradient(180deg,#cdeaff,#bde3ff); border:1px solid rgba(160,210,255,.35);
}
/* rarity badges */
.badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:22px; border-radius:8px;
  font:900 12px/1 Outfit,system-ui; color:#0a0f18; letter-spacing:.5px;
  border:1px solid rgba(0,0,0,.08); box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.badge.s{ background:linear-gradient(180deg,#ffd978,#ffc760); color:#2a1a00; }
.badge.a{ background:linear-gradient(180deg,#c7e7ff,#a9d5ff); color:#0f2040; }
.badge.b{ background:linear-gradient(180deg,#e8e3ff,#d7d0ff); color:#26144f; }

/* Mini-bosses grid spacing */
.mini-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:980px){ .mini-grid{ grid-template-columns:1fr; } }
.mini-section-spacer{ height:200px; }
@media (min-width:1440px){ .mini-section-spacer{ height:260px; } }
@media (max-width:980px){ .mini-section-spacer{ height:140px; } }

/* =========================================================
   SCROLL EFFECTS (snap + scroll-driven animations) — ADD
   Apply .section to blocks you want animated/snapped:
   e.g. <div class="hero section">, <section id="icySection" class="icy-section section">
========================================================= */
html{
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scroll-padding-top: var(--topbar-h);
  timeline-scope: --section;
}

/* opt-in sections */
.section{
  scroll-snap-align: start;
  view-timeline: --section;
}

/* section fade/zoom on entry */
@keyframes nxSectionZoom {
  from { opacity:.60; transform: translateY(10px) scale(.985); }
  to   { opacity:1;    transform: translateY(0)    scale(1);    }
}
.hero.section .container,
#icySection.section .icy-content{
  animation-name: nxSectionZoom;
  animation-timeline: --section;
  animation-range: entry 20% cover 40%;
  animation-duration: 1s; /* fallback */
  animation-fill-mode: both;
}

/* bonus: Page 2 cards rise in as section enters */
@keyframes nxCardRise {
  from { opacity:0; transform: translateY(26px); }
  to   { opacity:1; transform: translateY(0);    }
}
#icySection.section .boss-card{
  animation: nxCardRise linear both;
  animation-timeline: --section;
  animation-range: entry 10% cover 35%;
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  html{ scroll-snap-type:none; }
  .hero.section .container,
  #icySection.section .icy-content,
  #icySection.section .boss-card{
    animation: none !important;
  }
}

/* graceful fallback if view-timeline unsupported */
@supports not (animation-timeline: auto){
  html{ scroll-snap-type: y mandatory; scroll-padding-top: var(--topbar-h); }
}
/* =========================
   PAGE 3 — SKINS (scoped)
========================= */
.skins-section{
  position:relative; padding:120px 20px 160px; overflow:hidden;
  /* blended with the bottom of .icy-section (same top color #0d476b) */
  background:linear-gradient(
    180deg,
    #0d476b 0%,
    #0c3e5f 20%,
    #0b3552 40%,
    #0b2a44 60%,
    #0a1627 80%,
    #0a0a12 100%
  );
}
.skins-aurora{
  position:absolute; inset:-20% -10% -10% -10%; z-index:0;
  background:
    radial-gradient(40% 50% at 20% 10%, rgba(150,220,255,.12), transparent 60%),
    radial-gradient(45% 55% at 80% 20%, rgba(190,170,255,.10), transparent 65%),
    radial-gradient(50% 60% at 50% 0%,  rgba(120,200,255,.10), transparent 70%);
  filter:saturate(112%) contrast(103%);
}
.skins-inner{ position:relative; z-index:1; max-width:1180px; margin:0 auto; }

.skins-header{ text-align:center; margin-bottom:28px; }
.skins-kicker{
  color:#8ef2ff; font-weight:900; letter-spacing:.08em; margin:0 0 6px;
  text-transform:uppercase; font-size:14px;
}
.skins-title{
  margin:0 0 8px; font-weight:900; letter-spacing:.08em;
  font-size:44px; color:#f7fbff; text-transform:uppercase;
}
.skins-sub{ margin:0 auto; max-width:760px; color:#cfd9f9; }

.skins-grid{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
@media(max-width:1080px){ .skins-grid{ grid-template-columns:repeat(2, 1fr); } }
@media(max-width:720px){  .skins-grid{ grid-template-columns:1fr; } }

.skin-card{
  position:relative; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 8px 32px rgba(4,10,24,.6);
  transform:translateY(16px); opacity:0;
  transition:transform .7s cubic-bezier(.2,.95,.3,1), opacity .6s ease, box-shadow .25s ease;
}
.skin-card.in{ transform:translateY(0); opacity:1; }
.skin-card:hover{ box-shadow:0 12px 40px rgba(4,10,24,.7), 0 0 24px rgba(120,200,255,.15); }

.skin-media{
  position:relative; aspect-ratio: 16/10; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%, rgba(170,210,255,.08), rgba(0,0,0,.12));
}
.skin-media img, .skin-media model-viewer{ width:100%; height:100%; object-fit:cover; display:block; }
.skin-info{ padding:14px; }
.skin-badge{
  display:inline-flex; align-items:center; justify-content:center; height:22px; padding:0 10px;
  font:900 11px/22px Outfit,system-ui,sans-serif; letter-spacing:.6px; border-radius:999px;
  color:#0b0f18; background:linear-gradient(180deg,#ffd978,#ffc760); box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.skin-badge.a{ background:linear-gradient(180deg,#c7e7ff,#a9d5ff); color:#0f2040; }
.skin-badge.b{ background:linear-gradient(180deg,#e8e3ff,#d7d0ff); color:#26144f; }

.skin-name{
  margin:8px 0 4px; font:900 20px/1.1 Outfit,system-ui,sans-serif; color:#f3f8ff;
  letter-spacing:.6px; text-transform:uppercase;
}
.skin-desc{ margin:0; color:#d6e5ff; }
.skin-meta{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; color:#cfe6ff; font-weight:700; font-size:12px; opacity:.9; }

.skins-footer{ text-align:center; margin-top:24px; }

/* title shuffle (minimal, scoped, no external deps) */
.skins-title[data-shuffle]{ display:inline-block; position:relative; }
.skins-title[data-shuffle].is-ready{ visibility:visible; }

/* =====================================
   HARD OVERRIDE: remove black gap bar
===================================== */
.section-divider{
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}


/* PAGE 4 EVENT */
.event-section{
  padding:140px 20px 160px;
  background:#050611;
  position:relative;
  overflow:hidden;
}
.event-aurora{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 20% 0%, rgba(150,220,255,.25), transparent 60%),
    radial-gradient(50% 60% at 80% 20%, rgba(190,170,255,.20), transparent 70%),
    radial-gradient(80% 80% at 50% 100%, rgba(110,180,255,.18), transparent 70%);
  opacity:1;
  mix-blend-mode:screen;
  filter:blur(6px) saturate(140%);
}
.event-card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  box-shadow:0 12px 50px rgba(0,0,0,.85), 0 0 40px rgba(140,200,255,.25);
  backdrop-filter:blur(10px);
  padding:24px;
}
/* =========================
   PAGE 4 — FROZEN RELIQUARY HUNT
========================= */
.event-section{
  position:relative;
  min-height:100vh;
  padding:140px 20px 160px;
  overflow:hidden;
  color:#eef7ff;

  /* deep winter / aurora sky */
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(155,220,255,.16), transparent 60%),
    radial-gradient(140% 180% at 90% -10%, rgba(220,170,255,.18), transparent 65%),
    radial-gradient(110% 140% at 50% 120%, rgba(20,40,80,.95), #050712 80%);
}

/* vignette + moving aurora ribbons */
.event-section::before,
.event-section::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
}
.event-section::before{
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(180,230,255,.18), transparent 65%),
    radial-gradient(80% 90% at 0% 30%, rgba(120,210,255,.18), transparent 70%);
  mix-blend-mode:screen;
  opacity:.75;
  animation:eventAurora 14s ease-in-out infinite alternate;
}
.event-section::after{
  background:
    radial-gradient(60% 40% at 50% 110%, rgba(0,0,0,.8), transparent 60%),
    radial-gradient(130% 130% at 50% 30%, rgba(0,0,0,.7), transparent 80%);
}

/* drifting stars */
.event-stars{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.2px 1.2px at 35% 80%, rgba(190,220,255,.85), transparent),
    radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 90% 60%, rgba(155,205,255,.9), transparent);
  background-repeat:no-repeat;
  animation:eventStars 40s linear infinite;
  opacity:.5;
}

/* optional snow, re-use existing snow-canvas style */
.event-snow{
  position:absolute; inset:0; z-index:2;
}

.event-inner{
  position:relative;
  z-index:3;
  max-width:1180px;
  margin:0 auto;
}

/* header */
.event-header{
  max-width:760px;
  margin:0 auto 32px;
  text-align:left;
}
.event-kicker{
  margin:0 0 8px;
  font:900 13px/1.2 Outfit,system-ui,sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#9be6ff;
}
.event-title{
  margin:0 0 10px;
  font:900 40px/1.1 Outfit,system-ui,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f9fcff;
  text-shadow:0 0 18px rgba(150,220,255,.55);
}
.event-lore{
  margin:0;
  color:#d0e4ff;
  font-size:15px;
  line-height:1.7;
  max-width:720px;
}

/* layout */
.event-layout{
  display:grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
  gap:24px;
  margin-top:26px;
}
@media(max-width:980px){
  .event-layout{ grid-template-columns:1fr; }
}

/* big main card */
.event-main-card{
  position:relative;
  border-radius:18px;
  padding:22px 22px 24px;
  background:linear-gradient(180deg,rgba(14,24,46,.92),rgba(9,16,32,.98));
  border:1px solid rgba(150,215,255,.35);
  box-shadow:
    0 20px 60px rgba(0,0,0,.85),
    0 0 0 1px rgba(60,120,200,.35),
    0 0 40px rgba(130,210,255,.24);
  overflow:hidden;
}
.event-main-card::before{
  content:"";
  position:absolute; inset:-40%;
  background:
    conic-gradient(from 210deg, rgba(123,211,255,.12), transparent 40%, rgba(192,139,255,.10), transparent 75%, rgba(123,211,255,.16));
  opacity:.4;
  mix-blend-mode:screen;
  animation:eventHalo 18s linear infinite;
}
.event-main-inner{
  position:relative;
  z-index:2;
}

/* pills */
.event-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}
.event-pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:22px; padding:4px 10px;
  border-radius:999px;
  font:800 11px/1 Outfit,system-ui;
  letter-spacing:.12em;
  text-transform:uppercase;
  border:1px solid rgba(160,220,255,.7);
  background:linear-gradient(180deg,rgba(200,240,255,.16),rgba(140,200,255,.05));
  color:#e9f7ff;
}
.event-pill--rare{
  border-color:rgba(220,180,255,.9);
  background:linear-gradient(180deg,rgba(220,180,255,.22),rgba(140,80,220,.25));
}

/* "How it works" */
.event-main-card h3{
  margin:4px 0 10px;
  font:900 20px/1.2 Outfit,system-ui,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#f5fbff;
}
.event-main-sub{
  margin:0 0 16px;
  color:#c9ddff;
  font-size:14px;
}

/* vertical steps */
.event-steps{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}
.event-steps::before{
  content:"";
  position:absolute;
  left:16px; top:4px; bottom:4px;
  width:2px;
  background:linear-gradient(180deg,rgba(155,215,255,.4),rgba(138,98,255,.25));
  opacity:.8;
}
.event-step{
  position:relative;
  padding-left:46px;
  margin-bottom:18px;
}
.event-step:last-child{ margin-bottom:0; }

.event-step-num{
  position:absolute;
  left:0; top:0;
  width:32px; height:32px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font:900 14px/1 Outfit,system-ui;
  color:#021019;
  background:radial-gradient(circle at 30% 0%,#fef3ff,#fff8df 40%,#ffd771 80%);
  box-shadow:0 0 18px rgba(255,220,140,.7);
}
.event-step-title{
  font:800 15px/1.3 Outfit,system-ui;
  color:#f4fbff;
  margin:0 0 4px;
}
.event-step-body{
  margin:0;
  font-size:14px;
  color:#c7dbff;
}

/* side column */
.event-side{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* NPC card */
.event-npc{
  position:relative;
  border-radius:18px;
  padding:18px 18px 16px;
  background:linear-gradient(180deg,rgba(18,32,56,.96),rgba(10,18,34,.98));
  border:1px solid rgba(155,215,255,.4);
  box-shadow:0 16px 46px rgba(0,0,0,.85);
  overflow:hidden;
}
.event-npc::before{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(60% 40% at 20% 0%, rgba(180,230,255,.22), transparent 70%),
    radial-gradient(50% 30% at 80% 10%, rgba(210,190,255,.18), transparent 70%);
  mix-blend-mode:screen;
  opacity:.9;
}
.event-npc-inner{ position:relative; z-index:2; }
.event-npc-label{
  font:800 11px/1.3 Outfit,system-ui;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#a7ddff;
  opacity:.95;
}
.event-npc-name{
  margin:4px 0 4px;
  font:900 20px/1.2 Outfit,system-ui;
  color:#f8fdff;
}
.event-npc-desc{
  margin:0;
  font-size:14px;
  color:#cfdfff;
}
.event-npc-glow{
  margin-top:10px;
  height:32px;
  border-radius:999px;
  padding:2px;
  background:linear-gradient(90deg,#9ee7ff,#b094ff,#9ee7ff);
  box-shadow:0 0 22px rgba(140,210,255,.6);
}
.event-npc-glow-inner{
  width:100%; height:100%;
  border-radius:999px;
  background:radial-gradient(circle at 20% 0%,rgba(180,230,255,.35),rgba(4,10,24,1));
  display:flex; align-items:center; justify-content:center;
  font:800 12px/1 Outfit,system-ui;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#e9f7ff;
}

/* rewards */
.event-rewards{
  position:relative;
  border-radius:18px;
  padding:18px 18px 16px;
  background:linear-gradient(180deg,rgba(13,24,44,.96),rgba(7,13,24,.98));
  border:1px solid rgba(180,220,255,.5);
  box-shadow:0 18px 52px rgba(0,0,0,.9);
}
.event-rewards-title{
  margin:0 0 10px;
  font:900 16px/1.2 Outfit,system-ui;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#f4fbff;
}
.event-rewards-sub{
  margin:0 0 10px;
  font-size:13px;
  color:#cce1ff;
}
.event-reward-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.event-reward{
  position:relative;
  border-radius:12px;
  padding:8px 10px 9px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(10,18,40,.6));
  border:1px solid rgba(160,210,255,.3);
}
.event-reward-rank{
  min-width:34px; height:34px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font:900 13px/1 Outfit,system-ui;
  text-transform:uppercase;
  letter-spacing:.12em;
  box-shadow:0 0 14px rgba(0,0,0,.6);
}
.event-reward-rank--1{
  background:linear-gradient(180deg,#ffe39a,#ffbf55);
  color:#3a2300;
}
.event-reward-rank--2{
  background:linear-gradient(180deg,#d5e8ff,#a8c8ff);
  color:#081835;
}
.event-reward-rank--3{
  background:linear-gradient(180deg,#f0e6ff,#ceb5ff);
  color:#2b104f;
}
.event-reward-body{
  display:flex;
  flex-direction:column;
}
.event-reward-title{
  margin:0 0 2px;
  font:800 13px/1.3 Outfit,system-ui;
  color:#f4fbff;
}
.event-reward-text{
  margin:0;
  font-size:13px;
  color:#cddfff;
}

/* footer note */
.event-footer{
  margin-top:20px;
  font-size:12px;
  color:#a9c3ff;
  opacity:.9;
}

/* animations */
@keyframes eventAurora{
  0%{ transform:translate3d(-2%,0,0) scale(1.02); opacity:.8; }
  50%{ transform:translate3d(2%,2%,0) scale(1.05); opacity:1; }
  100%{ transform:translate3d(-1%,-1%,0) scale(1.02); opacity:.85; }
}
@keyframes eventStars{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-40px,-20px,0); }
}
@keyframes eventHalo{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}
/* Disable scroll-snap for the event page (page 4) */
.event-section.section{
  scroll-snap-align: none;
}

/* =========================
   TOPBAR — ICY CLASSIC STRIP (OVERRIDE)
   Only navbar + body padding changed; rest untouched
========================= */
.nx-topbar{
  position:fixed; inset:0 0 auto 0; z-index:9999;
  background:#050814;
  border-bottom:1px solid rgba(145,210,255,.45);
  box-shadow:0 16px 40px rgba(0,0,0,.9);
  overflow:hidden;
}
.nx-topbar::before{
  content:"";
  position:absolute;
  inset:-30% -40% 0 -40%;
  background:linear-gradient(
    120deg,
    rgba(80,150,255,0) 0%,
    rgba(120,200,255,.32) 25%,
    rgba(180,220,255,.20) 50%,
    rgba(120,200,255,.32) 75%,
    rgba(80,150,255,0) 100%
  );
  background-size:220% 100%;
  mix-blend-mode:screen;
  opacity:.8;
  pointer-events:none;
  animation:nxIcyBarSimple 20s linear infinite;
}
.nx-topbar::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px; height:4px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(126,231,255,1),
    #ffffff,
    rgba(126,231,255,1),
    transparent
  );
  box-shadow:0 0 22px rgba(140,220,255,.7);
  pointer-events:none;
}

.nx-topbar .nx-spark{
  position:absolute; inset:0; pointer-events:none;
  opacity:.22;
  background-image:
    radial-gradient(1px 1px at 14% 60%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 32% 30%, rgba(190,230,255,.9), transparent),
    radial-gradient(1px 1px at 66% 40%, rgba(200,235,255,.9), transparent),
    radial-gradient(1px 1px at 82% 72%, rgba(185,220,255,.9), transparent);
  animation:nxIcySparkSimple 26s linear infinite;
}

.nx-topbar .nx-nav{
  height:var(--topbar-h);
  max-width:1280px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  position:relative; z-index:1;
}
.nx-topbar .nx-logo{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:900; letter-spacing:.14em; text-decoration:none;
  color:#f4f8ff; font-size:21px; text-transform:uppercase;
  text-shadow:0 0 10px rgba(150,220,255,.45);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
.nx-topbar .nx-logo em{ color:var(--nx-ice3); font-style:normal; }

.nx-topbar .nx-links{
  position:relative; display:flex; gap:30px; align-items:center;
}
.nx-topbar .nx-links a{
  position:relative; color:#dde5ff; text-decoration:none;
  font-weight:700; font-size:14px;
  letter-spacing:.08em; text-transform:uppercase;
  padding:6px 0;
  opacity:.9;
  transition:opacity .18s ease, transform .18s ease, color .18s ease;
}

.nx-topbar .nx-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background:linear-gradient(90deg,
    rgba(123,211,255,0),
    rgba(123,211,255,.9),
    #ffffff,
    rgba(123,211,255,.9),
    rgba(123,211,255,0));
  border-radius:999px;
  box-shadow:0 0 12px rgba(140,210,255,.55);
  transition:right .26s cubic-bezier(.2,.9,.2,1);
}
.nx-topbar .nx-links a:hover{
  opacity:1; transform:translateY(-1px); color:#ffffff;
}
.nx-topbar .nx-links a:hover::after{
  right:0;
}

.nx-topbar .nx-links a.is-active{
  color:#ffffff;
}
.nx-topbar .nx-links a.is-active::before{
  content:none !important;
}
.nx-topbar .nx-links a.is-active::after{
  right:0;
}

.nx-topbar .nx-links a + a::before{
  content:"";
  position:absolute;
  left:-16px; top:50%;
  transform:translateY(-50%);
  width:1px; height:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0));
  opacity:.55;
}

@keyframes nxIcyBarSimple{
  0%{background-position:0 0;}
  50%{background-position:220% 0;}
  100%{background-position:0 0;}
}
@keyframes nxIcySparkSimple{
  0%{transform:translate3d(0,0,0);}
  100%{transform:translate3d(-40px,15px,0);}
}



/* =========================
   PAGE 4 — GLOBAL SUPPLY RUSH (WOW EVENT STYLE)
   Styles for .rush-section and descendants
========================= */
.rush-section{
  position:relative;
  min-height:100vh;
  padding:140px 20px 160px;
  overflow:hidden;
  color:#eef7ff;
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(155,220,255,.16), transparent 60%),
    radial-gradient(140% 180% at 90% -10%, rgba(220,170,255,.18), transparent 65%),
    radial-gradient(110% 140% at 50% 120%, rgba(20,40,80,.95), #050712 80%);
}

/* Galaxy background host only for Page 4 */
.rush-section .galaxy-container{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
}

.rush-galaxy canvas{
  display:block;
  width:100%;
  height:100%;
}

/* Lift existing overlays above the galaxy canvas */
.rush-aurora,
.rush-snow{
  z-index:2;
}

.rush-inner{
  position:relative;
  z-index:3;
}


.rush-aurora{
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(180,230,255,.18), transparent 65%),
    radial-gradient(80% 90% at 0% 30%, rgba(120,210,255,.18), transparent 70%);
  mix-blend-mode:screen;
  opacity:.9;
  filter:blur(4px) saturate(140%);
  animation:eventAurora 16s ease-in-out infinite alternate;
}

.rush-snow{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.2px 1.2px at 35% 80%, rgba(190,220,255,.85), transparent),
    radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 90% 60%, rgba(155,205,255,.9), transparent);
  background-repeat:no-repeat;
  animation:eventStars 40s linear infinite;
  opacity:.45;
}

.rush-inner{
  position:relative;
  z-index:3;
  max-width:1180px;
  margin:0 auto;
}

/* header */
.rush-header{
  max-width:940px;
  margin:0 auto 40px;
  text-align:center;
}
.rush-kicker{
  margin:0 0 8px;
  font:900 13px/1.2 Outfit,system-ui,sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#9be6ff;
}
.rush-kicker span{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:999px;
  margin-right:6px;
  background:radial-gradient(circle,#9ff2ff,#4ed0ff);
  box-shadow:0 0 12px rgba(140,220,255,.9);
}
.rush-title{
  margin:0 0 12px;
  font:900 40px/1.15 Outfit,system-ui,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f9fcff;
  text-shadow:0 0 22px rgba(160,220,255,.7);
}
.rush-sub{
  margin:0 auto;
  max-width:720px;
  color:#d0e4ff;
  font-size:15px;
  line-height:1.7;
}

/* layout */
.rush-layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:28px;
  align-items:flex-start;
  margin-top:8px;
}
@media(max-width:980px){
  .rush-layout{ grid-template-columns:1fr; }
}

/* left story card */
.rush-story-card{
  position:relative;
  border-radius:18px;
  padding:20px 20px 22px;
  background:linear-gradient(180deg,rgba(14,24,46,.96),rgba(9,16,32,.98));
  border:1px solid rgba(150,215,255,.4);
  box-shadow:0 18px 52px rgba(0,0,0,.9);
  overflow:hidden;
}
.rush-story-inner{
  position:relative;
  z-index:2;
}
.rush-story-title{
  margin:0 0 6px;
  font:900 18px/1.25 Outfit,system-ui;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#f4fbff;
}
.rush-story-intro{
  margin:0 0 14px;
  color:#cce1ff;
  font-size:14px;
}

/* steps */
.rush-steps{
  margin:0;
  padding:0;
  list-style:none;
}
.rush-step{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-top:1px solid rgba(120,180,240,.28);
}
.rush-step:first-child{
  border-top:none;
}

.rush-step-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:60px;
  height:24px;
  border-radius:999px;
  font:900 11px/1 Outfit,system-ui;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#021019;
  background:radial-gradient(circle at 30% 0%,#fef3ff,#fff8df 40%,#ffd771 80%);
  box-shadow:0 0 18px rgba(255,220,140,.7);
  margin-bottom:6px;
}
.rush-step-title{
  margin:0 0 4px;
  font:800 15px/1.3 Outfit,system-ui;
  color:#f4fbff;
}
.rush-step-text{
  margin:0;
  font-size:14px;
  color:#c7dbff;
  line-height:1.65;
}

.rush-slot{
  flex:0 0 190px;
  max-width:190px;
  height:120px;
  border-radius:18px;
  background:radial-gradient(130% 130% at 20% 0%,rgba(180,230,255,.22),rgba(6,12,24,1));
  border:1px solid rgba(150,215,255,.7);
  box-shadow:0 10px 30px rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.rush-slot-inner-placeholder{
  font:800 11px/1.4 Outfit,system-ui;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#d4e8ff;
  opacity:.9;
}

/* right column */
.rush-right-col{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.rush-choice-row{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.rush-choice-card{
  border-radius:18px;
  background:linear-gradient(180deg,rgba(18,32,56,.96),rgba(10,18,34,.98));
  border:1px solid rgba(155,215,255,.4);
  box-shadow:0 16px 46px rgba(0,0,0,.9);
}
.rush-choice-inner{
  padding:14px 16px 14px;
}
.rush-choice-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font:800 11px/1 Outfit,system-ui;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#a7ddff;
  margin-bottom:6px;
}
.rush-choice-tag span{
  width:9px;
  height:9px;
  border-radius:999px;
  background:radial-gradient(circle,#9ff2ff,#4ed0ff);
  box-shadow:0 0 10px rgba(130,210,255,.9);
}
.rush-choice-title{
  margin:0 0 4px;
  font:900 16px/1.2 Outfit,system-ui;
  color:#f8fdff;
}
.rush-choice-text{
  margin:0 0 4px;
  font-size:13px;
  color:#cfdfff;
}
.rush-choice-note{
  margin:0;
  font-size:12px;
  color:#9ac2ff;
}

/* meta & ladder */
.rush-meta{
  border-radius:16px;
  padding:12px 14px;
  background:linear-gradient(180deg,rgba(10,20,40,.96),rgba(6,12,26,.98));
  border:1px solid rgba(150,200,255,.45);
  box-shadow:0 12px 40px rgba(0,0,0,.9);
  font-size:12px;
  color:#d1e4ff;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.rush-ladder{
  margin-top:10px;
  border-radius:18px;
  padding:14px 14px 16px;
  background:linear-gradient(180deg,rgba(12,22,42,.98),rgba(5,10,24,.99));
  border:1px solid rgba(150,200,255,.6);
  box-shadow:0 18px 52px rgba(0,0,0,.9);
}
.rush-ladder-title{
  font:900 14px/1.3 Outfit,system-ui;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#f4fbff;
  margin-bottom:4px;
}
.rush-ladder-sub{
  margin:0 0 10px;
  font-size:12px;
  color:#c2d7ff;
}

.rush-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.rush-table thead th{
  font-weight:600;
  text-align:left;
  padding:6px 4px;
  color:#e9f3ff;
  border-bottom:1px solid rgba(150,190,240,.7);
}
.rush-table tbody td{
  padding:6px 4px;
  border-bottom:1px solid rgba(40,70,120,.8);
  color:#dbe6ff;
}
.rush-table tbody tr:nth-child(1) td{ color:#ffeaa8; }
.rush-table tbody tr:nth-child(2) td{ color:#e0f1ff; }
.rush-table tbody tr:nth-child(3) td{ color:#f4f0ff; }

.rush-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(15,30,60,.9);
  border:1px solid rgba(150,200,255,.7);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.rush-badge span{
  width:8px;
  height:8px;
  border-radius:999px;
  background:radial-gradient(circle,#ffdf8a,#ff9545);
  box-shadow:0 0 10px rgba(255,210,130,.9);
}



/* MMORPG-style "Go To Website" button inside hero CTA */
/* Hero CTA — professional MMO-style Website button */
.go-website-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 28px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.25);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(120deg,#6fd3ff,#9f8bff,#ffe38f);
  color:#12091a;
  font:900 13px/1 Outfit,system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.18em;
  text-decoration:none;
  box-shadow:
    0 10px 30px rgba(0,0,0,.78),
    0 0 24px rgba(145,210,255,.72);
  text-shadow:0 1px 0 rgba(255,255,255,.9);
  cursor:pointer;
  overflow:hidden;
  background-size:220% 220%;
  background-position:0% 50%;
  transition:
    transform .22s cubic-bezier(.18,.88,.3,1.18),
    box-shadow .22s ease,
    background-position .35s ease;
}

.go-website-btn::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.85), transparent);
  opacity:0;
  transform:translateX(-120%);
  mix-blend-mode:screen;
}

.go-website-btn::after{
  content:"▶";
  font-size:12px;
  margin-left:8px;
  opacity:.9;
}

.go-website-btn:hover{
  transform:translateY(-1px) scale(1.05);
  box-shadow:
    0 14px 38px rgba(0,0,0,.88),
    0 0 34px rgba(180,230,255,.96);
  background-position:100% 50%;
}

.go-website-btn:hover::before{
  opacity:1;
  transform:translateX(120%);
  transition:transform .55s ease-out, opacity .3s ease-out;
}.go-website-btn::after{
  content:"▶";
  font-size:11px;
  opacity:.85;
  transform:translateX(0);
  transition:transform .22s ease, opacity .22s ease;
}

.go-website-btn span{
  position:relative;
}

.go-website-btn:hover{
  box-shadow:
    0 0 26px rgba(160,230,255,.95),
    0 0 55px rgba(190,150,255,.7),
    0 10px 30px rgba(0,0,0,.9);
  transform:translateY(-50%) scale(1.04);
}

.go-website-btn:hover::after{
  transform:translateX(3px);
  opacity:1;
}
.22);
  text-shadow:0 1px 0 rgba(255,255,255,.85);
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  transition:
    transform .22s cubic-bezier(.2,.9,.3,1.2),
    box-shadow .22s ease,
    background-position .35s ease;
  background-size:200% 200%;
  background-position:0% 50%;
}

.go-website-btn::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  mix-blend-mode:screen;
  opacity:0;
  transform:translateX(-120%);
}

.go-website-btn:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:
    0 0 0 1px rgba(255,230,170,.95),
    0 14px 32px rgba(0,0,0,.9),
    0 0 32px rgba(255,220,150,.9);
  background-position:100% 50%;
}

.go-website-btn:hover::before{
  opacity:1;
  transform:translateX(120%);
  transition:transform .5s ease-out, opacity .28s ease-out;
}

/* NEW YEAR'S EVE title animation (split-animate) */
.split-animate{
  display:inline-block;
  opacity:0; /* will be set to 1 by JS after spans are created */
  white-space:pre-wrap;
}

.split-animate span{
  display:inline-block;
  opacity:0;
  transform:translateY(18px) scale(0.96);
  filter:blur(4px);
  animation:nyFadeUp 0.55s cubic-bezier(0.2,0.9,0.3,1) forwards;
}

@keyframes nyFadeUp{
  0%{
    opacity:0;
    transform:translateY(18px) scale(0.96);
    filter:blur(4px);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}


/* Canvas galaxy background for Event page */
#globalSupplyRush .rush-galaxy{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
}

#globalSupplyRush #space-bg{
  display:block;
  width:100%;
  height:100%;
}


/* Language toggle (EN / RO) */
.nx-lang{
  margin-left:16px;
  display:flex;
  align-items:center;
}
.nx-lang-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px 4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(4,8,24,.92);
  color:#f3f1ff;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  outline:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.6);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.nx-lang-btn:hover{
  border-color:var(--nx-neon);
  box-shadow:0 0 0 1px rgba(0,0,0,.8), 0 0 16px rgba(150,210,255,.7);
}
.nx-lang-btn:active{
  transform:translateY(1px);
}
.nx-lang-flag{
  width:18px;
  height:12px;
  border-radius:2px;
  box-shadow:0 0 4px rgba(0,0,0,.7);
}
.nx-flag-ro{
  background:linear-gradient(90deg,#002b7f 0 33%,#fcd116 33% 66%,#ce1126 66% 100%);
}
@media (max-width:768px){
  .nx-topbar .nx-nav{
    padding-right:12px;
  }
  .nx-lang{
    margin-left:8px;
  }
  .nx-lang-btn{
    padding:3px 8px 3px 6px;
  }
}
/* === LANGUAGE TOGGLE / FUTURISTIC FLAG === */
.nx-lang {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.nx-lang-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(140, 210, 255, 0.5);
  background:
    radial-gradient(circle at 0% 0%, rgba(120, 220, 255, 0.32), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(90, 150, 255, 0.38), transparent 55%),
    rgba(4, 8, 24, 0.95);
  color: #f5f7ff;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 0 18px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease,
    background 0.25s ease;
}

.nx-lang-btn::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 255, 255, 0.0),
    rgba(0, 255, 255, 0.75),
    rgba(160, 110, 255, 0.9),
    rgba(0, 255, 200, 0.75),
    rgba(0, 255, 255, 0.0)
  );
  opacity: 0;
  filter: blur(18px);
  transform: translate3d(0, 0, 0) rotate(0deg);
  z-index: -1;
  pointer-events: none;
  animation: nx-lang-orbit 6s linear infinite;
}

.nx-lang-btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
    radial-gradient(circle at 90% 100%, rgba(75, 120, 255, 0.3), transparent 55%),
    rgba(4, 8, 24, 0.96);
  z-index: -1;
}

.nx-lang-btn:hover {
  border-color: var(--nx-neon, #8bd7ff);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 0 26px rgba(140, 220, 255, 0.9);
  transform: translateY(-1px);
}

.nx-lang-btn:hover::before {
  opacity: 1;
}

.nx-lang-btn:active {
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 0 10px rgba(120, 200, 255, 0.7);
}

.nx-lang-flag {
  position: relative;
  width: 18px;
  height: 12px;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 0 8px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

.nx-lang-flag::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.85) 40%,
    rgba(255, 255, 255, 0.0) 80%
  );
  transform: translateX(-130%);
  animation: nx-lang-sheen 3s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

.nx-lang-label {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.9;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

@keyframes nx-lang-orbit {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(360deg);
  }
}

@keyframes nx-lang-sheen {
  0% {
    transform: translateX(-130%);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  40% {
    transform: translateX(130%);
    opacity: 0;
  }
  100% {
    transform: translateX(130%);
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .nx-lang-btn {
    padding: 4px 9px;
    gap: 4px;
  }

  .nx-lang-label {
    font-size: 10px;
    letter-spacing: 0.12em;
  }
}