/* NoxusMU Halloween — ultra-styled single-file CSS */
:root{
  --bg:#0a0a0f;
  --ink:#d6d6e7;
  --muted:#9aa0b3;
  --brand:#a855f7;
  --brand-2:#fb923c;
  --accent:#f97316;
  --danger:#ef4444;
  --card:#12121a;
  --card-2:#171724;
  --glass:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  color:var(--ink);
  background:radial-gradient(1000px 600px at 70% -10%, #1f0a2e 0%, rgba(31,10,46,0) 60%),
             radial-gradient(800px 400px at 10% -10%, #1a1a2e 0%, rgba(26,26,46,0) 65%),
             linear-gradient(180deg, #0a0a0f 0%, #0a0a0f 100%);
  overflow-x:hidden;
}

/* Canvas FX backdrop */
#fx{
  position:fixed; inset:0; z-index:-1;
  background:transparent;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(to bottom, rgba(10,10,15,.8), rgba(10,10,15,.2));
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.container{max-width:1150px; margin:0 auto; padding:0 20px}
.nav{display:flex; align-items:center; gap:18px; height:64px}
.nav nav{display:flex; gap:16px; flex:1}
.nav nav a{
  color:var(--muted); text-decoration:none; font-weight:600; font-size:14px; letter-spacing:.2px;
  padding:10px 12px; border-radius:12px; transition:all .2s ease;
}
.nav nav a:hover{color:white; background:var(--glass)}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:white; font-weight:800; letter-spacing:.5px
}
.brand em{color:var(--brand-2); font-style:normal; font-weight:800; font-family:Cinzel,serif; letter-spacing:1.2px}

.cta{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:white; text-decoration:none; padding:10px 16px; border-radius:14px; font-weight:800;
  box-shadow:0 4px 18px rgba(168,85,247,.35); transition:transform .15s ease, box-shadow .15s ease;
}
.cta:hover{transform:translateY(-1px); box-shadow:0 6px 24px rgba(168,85,247,.45)}

.hero{
  display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:30px;
  padding:72px 20px 30px;
}
.hero h1{
  margin:0 0 12px; font-size: clamp(36px, 5vw, 72px);
  line-height:1.05; letter-spacing:1.2px; font-family:Cinzel,serif; font-weight:800;
}
.fx-glow{ text-shadow:0 0 28px rgba(250, 204, 21, .35), 0 0 6px rgba(255,255,255,.2) }
.lead{color:#cbd5e1; font-size: clamp(16px, 2.2vw, 20px); margin-bottom:18px}

.countdown{display:flex; gap:12px; margin:16px 0 22px}
.cd-box{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:16px 14px; min-width:90px; text-align:center; box-shadow:var(--shadow);
}
.cd-box span{font-family:Cinzel,serif; font-weight:800; font-size:32px; display:block}
.cd-box label{color:var(--muted); font-size:12px; letter-spacing:.2px}

.hero-actions{display:flex; gap:12px; margin:10px 0 10px}
.btn{
  display:inline-block; text-decoration:none; padding:12px 18px; border-radius:14px; font-weight:800; border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(4px);
}
.btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:white; border:none; box-shadow:0 10px 28px rgba(249,115,22,.22)}
.btn.ghost{color:white}
.btn:hover{transform:translateY(-1px)}

.hero-meta{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:8px}
.badge{padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; letter-spacing:.3px; border:1px solid rgba(255,255,255,.12)}
.badge.live{background:rgba(16,185,129,.15); border-color:rgba(16,185,129,.35); color:#a7f3d0}
.badge.note{background:rgba(234,179,8,.12); border-color:rgba(234,179,8,.35); color:#fde68a}

.hero-art{position:relative; height:420px}
.moon{
  position:absolute; top:40px; right:40px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff6bf 0%, #fce96a 40%, #f59e0b 65%, transparent 70%),
             radial-gradient(circle at 75% 75%, rgba(0,0,0,.2), transparent 40%);
  box-shadow:0 0 80px rgba(250, 204, 21, .2);
}
.castle{
  position:absolute; bottom:0; right:0; width:100%; height:280px;
  background:
    linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0)),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=\"1200\" height=\"300\"><rect width=\"1200\" height=\"300\" fill=\"none\"/><path d=\"M0,260 L150,240 L230,245 L300,230 L330,235 L400,220 L520,240 L610,230 L740,245 L820,235 L920,240 L1000,230 L1120,235 L1200,220 L1200,300 L0,300 Z\" fill=\"%2312121a\"/></svg>');
  background-size:cover; opacity:.9; filter: drop-shadow(0 20px 40px rgba(0,0,0,.6));
}
.bats{position:absolute; inset:0; pointer-events:none}

.section{padding:72px 20px}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:20px}
h2{
  font-family:Cinzel,serif; font-weight:800; letter-spacing:.6px; font-size: clamp(26px, 3.2vw, 38px);
  margin:0 0 12px
}
.grid{display:grid; gap:16px}
.features{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.drops{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

.card{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid rgba(255,255,255,.08); padding:16px; border-radius:16px; box-shadow:var(--shadow);
}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0; color:#cbd5e1; font-size:14px}
.card .meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.meta .pill{padding:6px 10px; border-radius:999px; background:var(--glass); border:1px solid rgba(255,255,255,.1); font-size:12px; color:#e5e7eb}

.drop{
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid rgba(255,255,255,.08);
}
.drop .icon{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:22px; background:var(--glass-2); box-shadow: inset 0 0 20px rgba(0,0,0,.35)}
.drop .info{flex:1}
.drop .info h4{margin:0 0 4px}
.drop .info p{margin:0; color:#cbd5e1; font-size:13px}
.drop .rar{font-weight:800}
.pill{padding:6px 10px; border-radius:999px; background:var(--glass); border:1px solid rgba(255,255,255,.1); font-size:12px; color:#e5e7eb}
.r1{background:rgba(203,213,225,.08); border-color:rgba(203,213,225,.25)}
.r2{background:rgba(96,165,250,.08); border-color:rgba(96,165,250,.3)}
.r3{background:rgba(147,51,234,.12); border-color:rgba(147,51,234,.35)}
.r4{background:rgba(251,146,60,.12); border-color:rgba(251,146,60,.35)}
.r5{background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.4)}

.steps{counter-reset:step; list-style:none; padding:0; margin:0; display:grid; gap:12px}
.steps li{
  background:linear-gradient(180deg,var(--card),var(--card-2)); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:14px; box-shadow:var(--shadow); display:flex; gap:12px; align-items:flex-start;
}
.steps li::before{
  counter-increment:step; content:counter(step);
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; font-weight:800;
  background:linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow:0 4px 18px rgba(168,85,247,.35)
}

.tips{margin-top:16px; display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tips .tip{
  background:linear-gradient(180deg,var(--card),var(--card-2)); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:14px; box-shadow:var(--shadow)
}
.tips .tip h4{margin:0 0 6px; font-size:16px}

.rewards-wrap{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.reward-card{
  background:radial-gradient(400px 200px at 110% -20%, rgba(249,115,22,.2), transparent 60%),
             linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:16px; box-shadow:var(--shadow)
}
.reward-card h3{margin:0 0 8px; font-family:Cinzel,serif}
.reward-card ul{margin:0; padding-left:18px; color:#e2e8f0}

.note-box{
  margin-top:16px; padding:14px; border-radius:14px;
  background:rgba(234,179,8,.1); border:1px dashed rgba(234,179,8,.4); color:#fde68a
}

.faq{display:grid; gap:12px}
.faq .qa{
  background:linear-gradient(180deg,var(--card),var(--card-2)); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px; box-shadow:var(--shadow)
}
.faq .q{font-weight:800}
.faq .a{color:#cbd5e1}

.site-footer{
  border-top:1px solid rgba(255,255,255,.08); padding:24px 0; margin-top:40px;
  background:linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,.05));
}
.site-footer .container{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.brand-mini{display:flex; align-items:center; gap:10px}
.links{display:flex; gap:12px}
.links a{color:var(--muted); text-decoration:none}
.links a:hover{color:white}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr; padding-top:56px}
  .hero-art{order:-1; height:320px}
}

/* Micro-interactions */
.card:hover, .drop:hover, .reward-card:hover, .tips .tip:hover, .faq .qa:hover{
  transform:translateY(-2px);
  transition:transform .15s ease;
}

/* Accessibility */
:focus-visible{ outline:2px dashed var(--brand-2); outline-offset:3px }


/* --- Bombastic Halloween FX --- */
.hero-art { perspective: 800px; overflow: visible }
.hero-art .demon{
  position:absolute; right:20px; top:10px; max-width:min(46vw, 520px);
  filter: drop-shadow(0 24px 60px rgba(249,115,22,.25));
  transform: translateZ(0) rotateZ(-2deg);
  animation: demonFloat 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes demonFloat { 0%,100%{ transform: translateY(0) rotateZ(-2deg)} 50%{ transform: translateY(-8px) rotateZ(-1deg)} }

/* Floating pumpkin orbs */
#floaters { position:absolute; inset:0; pointer-events:none; }
.floater{
  position:absolute; width:22px; height:22px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff7b0 0%, #f59e0b 45%, rgba(255,140,0,.6) 70%, rgba(0,0,0,0) 72%);
  box-shadow: 0 0 16px rgba(249,115,22,.45), 0 0 42px rgba(249,115,22,.25) inset;
  opacity:.85; mix-blend-mode: screen;
}

/* Lightning overlay */
#lightning{ position:absolute; inset:0; pointer-events:none; }
.flash{
  position:absolute; inset:0; background: radial-gradient(1200px 600px at 60% 20%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%);
  filter: blur(2px); opacity:0; animation: flash 0.9s ease-out forwards;
}
@keyframes flash { 0%{opacity:0} 5%{opacity:1} 35%{opacity:.25} 100%{opacity:0} }
.shake{ animation: shake .6s cubic-bezier(.36,.07,.19,.97) both }
@keyframes shake{ 10%, 90% { transform: translate3d(-2px, 0, 0) } 20%, 80% { transform: translate3d(4px, 0, 0) } 30%, 50%, 70% { transform: translate3d(-8px, 0, 0) } 40%, 60% { transform: translate3d(8px, 0, 0) } }

/* Spider webs */
#webs{ position:absolute; inset:0; pointer-events:none; }
.web-corner{ position:absolute; width:220px; height:220px; opacity:.2; }
.web-top-left{ left:-6px; top:-6px; transform: scale(1) }
.web-top-right{ right:-6px; top:-6px; transform: scaleX(-1) }
.web-bottom-left{ left:-6px; bottom:-6px; transform: scaleY(-1) }
.web-bottom-right{ right:-6px; bottom:-6px; transform: scale(-1) }

/* Cursor ember trail */
.cursor-ember{
  position: fixed; width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, #fb923c 60%, rgba(251,146,60,.1) 70%);
  pointer-events:none; mix-blend-mode:screen; filter: blur(.3px);
  animation: emberFade .6s ease-out forwards;
}
@keyframes emberFade{ to{ transform: translateY(-12px) scale(.6); opacity:0 } }

/* Scroll reveal */
.reveal{ opacity:0; transform: translateY(14px); transition: all .7s ease }
.reveal.show{ opacity:1; transform:none }

/* Glitch H1 on hover */
.hero h1:hover{
  text-shadow: -2px 0 #a855f7, 2px 0 #fb923c, 0 0 22px rgba(251,146,60,.35);
  filter: contrast(1.1) brightness(1.1);
}

/* Ambient pulse */
.ambient-pulse{ animation: pulse 3.5s ease-in-out infinite }
@keyframes pulse{ 0%,100%{ box-shadow: 0 0 0 rgba(249,115,22,.0) } 50%{ box-shadow: 0 0 40px rgba(249,115,22,.22) } }


/* === Extra Spooky Pack === */

/* Hide moon completely */
.hero-art .moon{ display:none !important }

/* Thicker fog overlay canvas */
#fog2{ position:fixed; inset:0; z-index:-1; pointer-events:none; mix-blend-mode:screen; opacity:.45 }

/* Wandering ghosts */
.ghost{
  position:absolute; width:64px; height:84px; pointer-events:none; opacity:.0;
  filter: blur(.2px) drop-shadow(0 8px 14px rgba(0,0,0,.35));
  animation: ghostFloat 8s ease-in-out infinite, ghostIn 2s ease forwards;
}
@keyframes ghostFloat{ 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(-10px)} }
@keyframes ghostIn{ to{ opacity:.9 } }

/* Ghost SVG base */
.ghost svg{ width:100%; height:100% }
.ghost .face{ fill:#0a0a0f; opacity:.8 }

/* Floating candles */
.candle{ position:absolute; width:12px; height:28px; background:#f3f4f6; border-radius:2px; box-shadow: inset 0 -6px 0 #d1d5db }
.flame{
  position:absolute; left:2px; top:-10px; width:8px; height:12px; border-radius:50% 50% 50% 50%;
  background: radial-gradient(circle at 50% 30%, #fff, #fde047 45%, #fb923c 70%, rgba(0,0,0,0) 72%);
  animation: flame 0.12s infinite alternate, flicker 2.6s ease-in-out infinite;
  transform-origin:center bottom;
}
@keyframes flame{ from{ transform: translateX(-1px) rotate(-2deg) } to{ transform: translateX(1px) rotate(2deg) } }
@keyframes flicker{ 0%,100%{ filter: brightness(1) } 50%{ filter: brightness(1.35) } }

/* Header goo drip */
.header-goo{ position:absolute; left:0; right:0; top:64px; height:26px; pointer-events:none; z-index:40 }
.goop{ position:absolute; width:18px; height:18px; background:#1f0a2e; border-radius:0 0 12px 12px; animation: drip 6s ease-in-out infinite }
@keyframes drip{ 0%,100%{ transform: translateY(0) scaleY(1)} 50%{ transform: translateY(10px) scaleY(1.4)} }

/* Graveyard silhouette */
.graveyard{ position:fixed; left:0; right:0; bottom:0; height:140px; z-index:0; pointer-events:none; opacity:.35 }
.graveyard svg{ width:100%; height:100% }

/* Blinking eyes */
#eyes{ position:fixed; inset:0; pointer-events:none; z-index:1 }
.eye{ position:absolute; width:24px; height:12px; background: radial-gradient(circle at 50% 50%, #f59e0b, #ef4444 70%);
      border-radius:12px; box-shadow: 0 0 16px rgba(249,115,22,.4); animation: blink 5s infinite }
.eye::after{ content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; transform: translate(-50%,-50%); background:#0a0a0f; border-radius:50% }
@keyframes blink{ 0%,92%,100%{ transform: scaleY(1)} 95%{ transform: scaleY(.05)} }

/* Spectral hands */
#hands{ position:fixed; left:0; right:0; bottom:0; height:120px; z-index:0; pointer-events:none }
.hand{ position:absolute; width:40px; height:60px; border-radius:6px; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.7), rgba(255,255,255,0));
       filter: blur(1px); opacity:.2; animation: rise 8s ease-in-out infinite }
@keyframes rise{ 0%,100%{ transform: translateY(20px)} 50%{ transform: translateY(-10px) } }

/* Rotating runes around demon */
#runes{ position:absolute; right:0; top:0; width:100%; height:100%; pointer-events:none }
.rune{ position:absolute; width:28px; height:28px; border:1px solid rgba(251,146,60,.5); border-radius:50%;
       box-shadow: 0 0 14px rgba(251,146,60,.4) inset; animation: spin 6s linear infinite; opacity:.65 }
@keyframes spin{ to{ transform: rotate(360deg) } }

/* Mist blur sweep */
.mist{ position:fixed; inset:0; pointer-events:none; backdrop-filter: blur(0px); transition: backdrop-filter .6s ease; }
.mist.on{ backdrop-filter: blur(1.5px) }

/* Buttons blood smear hover */
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .25s ease; pointer-events:none;
  background: radial-gradient(60px 20px at 20% 30%, rgba(239,68,68,.35), transparent 60%),
              radial-gradient(40px 16px at 60% 70%, rgba(239,68,68,.25), transparent 60%);
}
.btn:hover::after{ opacity:1 }

/* Scratch marks appear after lightning (on body.shake) */
.scratch{ position:fixed; right:8%; top:20%; width:160px; height:100px; pointer-events:none; opacity:0; transition: opacity .3s ease }
body.shake .scratch{ opacity:.5 }

/* Sound toggle */
#soundToggle{
  position:fixed; right:16px; bottom:16px; z-index:100; padding:10px 12px; border-radius:14px; font-weight:800; border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg, rgba(168,85,247,.2), rgba(251,146,60,.2)); color:#fff; text-decoration:none;
}

/* Patch: reduce eyes intensity and ensure CTA buttons are above any FX */
#eyes .eye{ opacity:.65 }
.hero .hero-actions, .hero .btn{ position:relative; z-index:20 }


/* Layout tweak: give hero copy more room and push art right */
.hero{ grid-template-columns: 1.6fr .4fr; }
.hero-art .demon{ max-width:min(38vw, 460px); right:-10px !important; }
@media (max-width: 1100px){
  .hero{ grid-template-columns: 1.4fr .6fr; }
  .hero-art .demon{ max-width:min(44vw, 420px); right:0 !important; }
}
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .hero-art .demon{ margin: 0 auto; right:auto !important; }
}

/* Hide any remaining orb styles just in case */
.floater{ display:none !important }


/* --- Position pumpkin farther right --- */
.hero{ grid-template-columns: 1.85fr .15fr; }
.hero-art{ overflow: visible }
.hero-art .demon{ max-width:min(36vw, 440px); right:-160px !important; z-index:2 }

@media (max-width: 1280px){
  .hero{ grid-template-columns: 1.7fr .3fr; }
  .hero-art .demon{ right:-120px !important; }
}
@media (max-width: 1100px){
  .hero{ grid-template-columns: 1.5fr .5fr; }
  .hero-art .demon{ right:-40px !important; }
}
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .hero-art .demon{ position:relative; right:auto !important; margin: 0 auto; }
}

/* --- New Effect: Scroll progress bar --- */
#progressBar{
  position:fixed; left:0; top:0; height:4px; width:0%;
  background: linear-gradient(90deg, #a855f7, #fb923c);
  z-index:100; box-shadow: 0 0 12px rgba(251,146,60,.5);
}
#progressDrips{
  position:fixed; top:4px; left:0; height:10px; width:100%; pointer-events:none; z-index:99;
}
#progressDrips .d{ position:absolute; width:6px; height:8px; background:rgba(251,146,60,.25); border-radius:0 0 6px 6px; animation: drip2 2.6s ease-in-out infinite }
@keyframes drip2{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(6px) } }

/* --- New Effect: Cursor spotlight --- */
#spotlight{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(220px 220px at var(--sx, 50%) var(--sy, 50%), rgba(255,255,255,.06), rgba(0,0,0,0) 60%);
  mix-blend-mode: screen;
}


/* Extra push so hero text is always clear */
.hero{ grid-template-columns: 2fr 0.7fr; }
.hero-copy{ max-width: 820px }
.hero-art .demon{ max-width:min(34vw, 400px); right:-220px !important }
@media (min-width: 1600px){
  .hero-art .demon{ right:-280px !important; max-width:min(32vw, 420px) }
}
@media (max-width: 1200px){
  .hero{ grid-template-columns: 1.6fr .4fr; }
  .hero-art .demon{ right:-80px !important; max-width:min(40vw, 380px) }
}


/* Remove the eyes overlay everywhere */
#eyes{ display:none !important }

/* 3D tilt for reward cards */
.reward-card{
  transform-style: preserve-3d;
  transition: transform .2s ease, box-shadow .2s ease;
}
.reward-card.sheen::before{
  content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none; mix-blend-mode:screen;
  background: linear-gradient(120deg, rgba(255,255,255,.06), rgba(249,115,22,.08), rgba(168,85,247,.06));
  filter: blur(4px); opacity:.0; transition: opacity .25s ease;
}
.reward-card:hover.sheen::before{ opacity:.9 }
.reward-card:hover{
  box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 40px rgba(249,115,22,.18);
}

/* Ember border pulse */
.reward-card::after{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  border:1px solid rgba(249,115,22,.25);
  box-shadow: 0 0 0 rgba(249,115,22,.0);
  animation: emberPulse 4s ease-in-out infinite;
}
@keyframes emberPulse{ 0%,100%{ box-shadow:0 0 0 rgba(249,115,22,.0)} 50%{ box-shadow:0 0 24px rgba(249,115,22,.25)} }

/* Section header sweep */
.section-head h2{ position:relative; display:inline-block; overflow:hidden }
.section-head h2.sweep::after{
  content:""; position:absolute; left:-20%; top:0; height:100%; width:40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-12deg);
  animation: sweep 1.4s ease forwards;
}
@keyframes sweep{ to{ left:120% } }

/* Subtle starfield */
#starfield{ position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.18 }

/* Ensure reward cards can be transformed without clipping */
.rewards-wrap{ perspective: 800px }


/* === Spooky Preloader (3s) === */
#preloader{
  position:fixed; inset:0; background: radial-gradient(1000px 600px at 70% -10%, #1f0a2e 0%, rgba(31,10,46,0) 60%), #0a0a0f;
  z-index:9999; display:grid; place-items:center; overflow:hidden;
}
#preloader .pl-fog{ position:absolute; inset:0; opacity:.25; }
#preloader .pl-center{ position:relative; text-align:center; z-index:2 }
#preloader .pl-icon{ font-size:64px; filter: drop-shadow(0 8px 22px rgba(249,115,22,.35)); animation: pl-bob 1.8s ease-in-out infinite }
#preloader .pl-text{ margin-top:10px; font-weight:800; letter-spacing:.6px; font-size:18px; color:#e5e7eb; animation: pulseText 1.6s ease-in-out infinite }
#preloader .pl-bar{ width:min(420px, 70vw); height:12px; background:rgba(255,255,255,.06); border-radius:999px; margin-top:16px; overflow:hidden; border:1px solid rgba(255,255,255,.12) }
#preloader .pl-bar span{ display:block; height:100%; width:0%; background:linear-gradient(90deg, #a855f7, #fb923c); box-shadow:0 0 18px rgba(251,146,60,.35) inset }
#preloader .pl-flash{ position:absolute; inset:0; background:radial-gradient(400px 300px at 50% 50%, rgba(255,255,255,1), rgba(255,255,255,0)); opacity:0; }

@keyframes pl-bob{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } }
@keyframes pulseText{ 0%,100%{ opacity:.9 } 50%{ opacity:.6 } }
@keyframes preShake{ 10%,90%{ transform: translate3d(-2px,0,0)} 20%,80%{ transform: translate3d(4px,0,0)} 30%,50%,70%{ transform: translate3d(-8px,0,0)} 40%,60%{ transform: translate3d(8px,0,0)} }


/* --- Rewards responsive layout fix --- */
.rewards-wrap{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  align-items:stretch;
  justify-items:stretch;
}
.reward-card{
  display:flex;
  flex-direction:column;
  min-height: 180px;
}
.reward-card ul{ margin-top:6px }

/* Center the last tier card nicely on its own row */
.rewards-wrap .reward-card:last-child{
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 420px;
}

/* Breakpoints for tablets and phones */
@media (max-width: 1200px){
  .rewards-wrap{ grid-template-columns: repeat(3, minmax(240px, 1fr)); }
}
@media (max-width: 900px){
  .rewards-wrap{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 640px){
  .rewards-wrap{ grid-template-columns: 1fr; }
  .reward-card{ min-height: auto }
  .section{ padding: 56px 16px }
  .hero h1{ font-size: clamp(32px, 10vw, 56px) }
  .lead{ font-size: clamp(15px, 4vw, 18px) }
  .countdown .cd-box{ min-width: 76px; padding: 12px 10px }
}

/* Add a bit more spacing before FAQ so it doesn't feel attached */
#rewards + .note-box{ margin-bottom: 20px }
#faq{ margin-top: 14px }


/* Guard: ensure boss/miniboss grids are visible */
#bossGrid, #miniBossGrid{ display:grid !important }


/* Visibility guards for grids */
#bossGrid, #miniBossGrid { display:grid !important }