/* =========================================
   SCOPESMILESHUFFL — NEON PARTY DISTRICT
   Party Pulse Engine Design System
   ========================================= */

/* ---------- VARIABLES ---------- */
:root{
  --bg-1:#090b16;
  --bg-2:#131a2d;
  --bg-3:#1e2742;
  --glass:rgba(255,255,255,0.06);
  --glass-border:rgba(255,255,255,0.12);
  --glass-blur:28px;

  --cyan-1:#00e5ff;
  --cyan-2:#38bdf8;
  --magenta-1:#ff3cac;
  --magenta-2:#ff67d4;
  --gold-1:#facc15;
  --gold-2:#f59e0b;

  --grad-cyan:linear-gradient(135deg,#00e5ff,#38bdf8);
  --grad-magenta:linear-gradient(135deg,#ff3cac,#ff67d4);
  --grad-gold:linear-gradient(135deg,#facc15,#f59e0b);
  --grad-blend:linear-gradient(135deg,#00e5ff,#ff3cac,#facc15);

  --text-1:#f9fbff;
  --text-2:#d9e3ff;
  --text-3:#9bb0d3;

  --glow-cyan:rgba(0,229,255,0.42);
  --glow-magenta:rgba(255,60,172,0.34);
  --glow-gold:rgba(250,204,21,0.30);

  --radius:24px;
  --radius-lg:32px;
  --radius-xl:36px;

  --font-display:'Orbitron',sans-serif;
  --font-body:'Outfit',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  --container:1400px;
  --section-y:130px;

  --header-h:64px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  font-family:var(--font-body);
  background:var(--bg-1);
  color:var(--text-1);
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:'';
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(0,229,255,0.15), transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(255,60,172,0.12), transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(250,204,21,0.08), transparent 60%);
  z-index:-2;pointer-events:none;
}
body::after{
  content:'';
  position:fixed;inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size:60px 60px;
  z-index:-1;pointer-events:none;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}

/* ---------- TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;line-height:1.1;letter-spacing:-0.02em}
h1{font-size:clamp(2.4rem,5.5vw,4.6rem)}
h2{font-size:clamp(2rem,3.8vw,3.2rem)}
h3{font-size:clamp(1.3rem,2vw,1.6rem)}
.grad-text{
  background:var(--grad-blend);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size:200% 200%;
  animation:gradShift 6s ease infinite;
}
@keyframes gradShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:var(--text-2);
  padding:8px 16px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:999px;
  backdrop-filter:blur(var(--glass-blur));
  margin-bottom:24px;
}
.muted{color:var(--text-3)}
.small{font-size:0.85rem}
.center{text-align:center}
.disclaimer{
  font-size:0.78rem;
  color:var(--text-3);
  font-family:var(--font-mono);
  margin-top:24px;
  padding:12px 16px;
  border-left:2px solid var(--cyan-1);
  background:rgba(0,229,255,0.05);
  border-radius:0 12px 12px 0;
}

/* ---------- LAYOUT ---------- */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}
.section{padding:var(--section-y) 0}
.mt-60{margin-top:60px}
.mt-90{margin-top:90px}
.section-head{text-align:center;max-width:780px;margin:0 auto 70px}
.section-head p{color:var(--text-2);margin-top:18px;font-size:1.05rem}

/* ---------- PARTICLES & EFFECTS ---------- */
.particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.particles span{
  position:absolute;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--cyan-1);
  box-shadow:0 0 20px var(--glow-cyan);
  animation:float 14s linear infinite;
  opacity:0.6;
}
.particles span:nth-child(1){left:10%;animation-delay:0s;background:var(--cyan-1)}
.particles span:nth-child(2){left:25%;animation-delay:2s;background:var(--magenta-1);box-shadow:0 0 20px var(--glow-magenta)}
.particles span:nth-child(3){left:40%;animation-delay:4s;background:var(--gold-1);box-shadow:0 0 20px var(--glow-gold)}
.particles span:nth-child(4){left:55%;animation-delay:1s}
.particles span:nth-child(5){left:70%;animation-delay:3s;background:var(--magenta-1);box-shadow:0 0 20px var(--glow-magenta)}
.particles span:nth-child(6){left:85%;animation-delay:5s;background:var(--gold-1);box-shadow:0 0 20px var(--glow-gold)}
.particles span:nth-child(7){left:15%;animation-delay:6s}
.particles span:nth-child(8){left:60%;animation-delay:7s;background:var(--magenta-1);box-shadow:0 0 20px var(--glow-magenta)}
.particles span:nth-child(9){left:90%;animation-delay:8s}
.particles span:nth-child(10){left:35%;animation-delay:9s;background:var(--gold-1);box-shadow:0 0 20px var(--glow-gold)}
@keyframes float{
  0%{transform:translateY(110vh) scale(0);opacity:0}
  10%{opacity:0.7;transform:translateY(95vh) scale(1)}
  90%{opacity:0.5}
  100%{transform:translateY(-10vh) scale(0.5);opacity:0}
}

.cursor-glow{
  position:fixed;
  width:400px;height:400px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,229,255,0.12),transparent 65%);
  pointer-events:none;
  z-index:1;
  transform:translate(-9999px,-9999px);
  margin-left:-200px;margin-top:-200px;
  transition:transform 0.1s ease-out;
}

/* ---------- HEADER (SLIM + HIDE ON SCROLL DOWN) ---------- */
.site-header{
  position:fixed;
  top:12px;left:50%;
  transform:translateX(-50%) translateY(0);
  width:calc(100% - 32px);
  max-width:var(--container);
  z-index:100;
  transition:transform 0.45s cubic-bezier(0.22,1,0.36,1), top 0.4s ease, opacity 0.4s ease;
  will-change:transform;
}
/* Hidden state — slides up out of view when scrolling down */
.site-header.header-hidden{
  transform:translateX(-50%) translateY(-160%);
  opacity:0;
  pointer-events:none;
}
/* Scrolled state — even slimmer + tighter glow */
.site-header.header-scrolled{
  top:8px;
}
.site-header.header-scrolled .header-inner{
  padding:6px 16px;
  border-radius:24px;
  background:rgba(10,13,26,0.82);
  box-shadow:0 0 40px rgba(0,229,255,0.12),0 6px 24px rgba(0,0,0,0.5);
}
.site-header.header-scrolled .logo-orb{
  width:24px;height:24px;
}
.site-header.header-scrolled .logo{font-size:1rem}
.site-header.header-scrolled .nav-capsule a{padding:6px 14px;font-size:0.85rem}
.site-header.header-scrolled .btn{padding:8px 16px;font-size:0.85rem}
.site-header.header-scrolled .vip-badge{padding:4px 9px;font-size:0.62rem}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 18px;
  background:rgba(13,17,32,0.65);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:26px;
  box-shadow:0 0 60px rgba(0,229,255,0.10),0 10px 40px rgba(0,0,0,0.4);
  position:relative;
  min-height:var(--header-h);
  transition:padding 0.35s ease, border-radius 0.35s ease, background 0.35s ease, box-shadow 0.35s ease, min-height 0.35s ease;
}
.header-inner::before{
  content:'';
  position:absolute;inset:-1px;
  border-radius:inherit;
  background:var(--grad-blend);
  z-index:-1;opacity:0.28;
  filter:blur(8px);
  animation:gradShift 8s ease infinite;
  background-size:200% 200%;
}
/* Subtle scanline shimmer running across the header */
.header-inner::after{
  content:'';
  position:absolute;
  top:0;left:-30%;
  width:30%;height:100%;
  background:linear-gradient(110deg,transparent 0%,rgba(0,229,255,0.18) 50%,transparent 100%);
  border-radius:inherit;
  pointer-events:none;
  animation:headerScan 7s ease-in-out infinite;
}
@keyframes headerScan{
  0%{left:-30%}
  60%{left:120%}
  100%{left:120%}
}

.logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-weight:900;font-size:1.05rem;
  letter-spacing:-0.02em;
  transition:font-size 0.35s ease;
}
.logo-orb{
  width:26px;height:26px;
  border-radius:50%;
  background:var(--grad-blend);
  background-size:200% 200%;
  animation:gradShift 4s ease infinite, pulse 2s ease infinite;
  box-shadow:0 0 20px var(--glow-cyan);
  transition:width 0.35s ease, height 0.35s ease;
}
@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.1)}
}
.logo-text em{
  font-style:normal;
  background:var(--grad-magenta);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.nav-capsule{
  display:flex;gap:4px;
  background:rgba(255,255,255,0.04);
  padding:4px;
  border-radius:999px;
  border:1px solid var(--glass-border);
}
.nav-capsule a{
  padding:8px 16px;
  border-radius:999px;
  font-size:0.88rem;
  font-weight:500;
  color:var(--text-2);
  transition:all 0.3s ease;
  position:relative;
}
.nav-capsule a:hover{
  color:var(--text-1);
  background:rgba(0,229,255,0.1);
  box-shadow:0 0 18px var(--glow-cyan);
  transform:translateY(-1px);
}
.nav-capsule a.active{
  background:var(--grad-cyan);
  color:#000;
  box-shadow:0 0 22px var(--glow-cyan);
}
.header-actions{display:flex;align-items:center;gap:10px}
.vip-badge{
  font-family:var(--font-mono);
  font-size:0.66rem;font-weight:700;
  padding:5px 10px;
  border-radius:999px;
  background:var(--grad-gold);
  color:#1a0e00;
  letter-spacing:0.1em;
  box-shadow:0 0 18px var(--glow-gold);
  animation:pulse 2s ease infinite;
  transition:padding 0.35s ease, font-size 0.35s ease;
}
.mobile-toggle{
  display:none;
  flex-direction:column;gap:5px;
  padding:8px;
}
.mobile-toggle span{
  width:22px;height:2px;
  background:var(--text-1);
  border-radius:2px;
  transition:all 0.3s;
}
.mobile-menu{
  display:none;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
  padding:18px;
  background:rgba(13,17,32,0.95);
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:22px;
  animation:menuSlide 0.35s cubic-bezier(0.22,1,0.36,1);
}
@keyframes menuSlide{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}
.mobile-menu a{
  padding:12px 14px;
  border-radius:12px;
  color:var(--text-2);
  font-weight:500;
}
.mobile-menu a:hover{background:rgba(0,229,255,0.08);color:var(--text-1)}
.mobile-menu.open{display:flex}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;justify-content:center;
  padding:10px 20px;
  border-radius:22px;
  font-weight:600;
  font-size:0.9rem;
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
  white-space:nowrap;
}
.btn-lg{padding:16px 32px;font-size:1rem}
.btn-sm{padding:8px 16px;font-size:0.85rem}
.btn-primary{
  background:var(--grad-cyan);
  color:#001018;
  box-shadow:0 0 30px var(--glow-cyan),0 6px 20px rgba(0,229,255,0.2);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 50px var(--glow-cyan),0 10px 30px rgba(0,229,255,0.3);
}
.btn-gold{
  background:var(--grad-gold);
  color:#1a0e00;
  box-shadow:0 0 30px var(--glow-gold),0 6px 20px rgba(250,204,21,0.2);
}
.btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 0 50px var(--glow-gold),0 10px 30px rgba(250,204,21,0.3);
}
.btn-ghost{
  background:var(--glass);
  border:1px solid var(--glass-border);
  color:var(--text-1);
  backdrop-filter:blur(20px);
}
.btn-ghost:hover{
  background:rgba(255,255,255,0.1);
  border-color:var(--cyan-1);
  box-shadow:0 0 30px var(--glow-cyan);
}
.btn::after{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.3),transparent);
  transition:left 0.6s;
}
.btn:hover::after{left:100%}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  padding:140px 0 80px;
  display:flex;align-items:center;
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-skyline{
  width:100%;height:100%;
  object-fit:cover;
  opacity:0.25;
  filter:blur(2px) saturate(1.3);
}
.hero-laser{
  position:absolute;inset:0;
  background:
    linear-gradient(120deg,transparent 40%,rgba(0,229,255,0.18) 50%,transparent 60%),
    linear-gradient(60deg,transparent 30%,rgba(255,60,172,0.15) 50%,transparent 70%);
  animation:laser 8s ease-in-out infinite;
}
@keyframes laser{
  0%,100%{transform:translateX(-10%)}
  50%{transform:translateX(10%)}
}
.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{
  position:absolute;
  width:8px;height:14px;
  top:-20px;
  animation:fall linear infinite;
}
.confetti i:nth-child(1){left:5%;background:var(--cyan-1);animation-duration:6s;animation-delay:0s}
.confetti i:nth-child(2){left:15%;background:var(--magenta-1);animation-duration:7s;animation-delay:1s}
.confetti i:nth-child(3){left:25%;background:var(--gold-1);animation-duration:5s;animation-delay:2s}
.confetti i:nth-child(4){left:35%;background:var(--cyan-2);animation-duration:8s;animation-delay:0.5s}
.confetti i:nth-child(5){left:45%;background:var(--magenta-2);animation-duration:6.5s;animation-delay:1.5s}
.confetti i:nth-child(6){left:55%;background:var(--gold-2);animation-duration:7.5s;animation-delay:2.5s}
.confetti i:nth-child(7){left:65%;background:var(--cyan-1);animation-duration:6s;animation-delay:0.8s}
.confetti i:nth-child(8){left:75%;background:var(--magenta-1);animation-duration:7s;animation-delay:1.8s}
.confetti i:nth-child(9){left:85%;background:var(--gold-1);animation-duration:5.5s;animation-delay:2.8s}
.confetti i:nth-child(10){left:95%;background:var(--cyan-2);animation-duration:8s;animation-delay:0.3s}
.confetti i:nth-child(11){left:30%;background:var(--magenta-2);animation-duration:6.8s;animation-delay:3s}
.confetti i:nth-child(12){left:70%;background:var(--gold-2);animation-duration:7.2s;animation-delay:3.5s}
@keyframes fall{
  0%{transform:translateY(0) rotate(0);opacity:1}
  100%{transform:translateY(100vh) rotate(720deg);opacity:0}
}

.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
  align-items:center;
  position:relative;z-index:2;
}
.hero-title{margin-bottom:24px}
.hero-sub{font-size:1.15rem;color:var(--text-2);margin-bottom:36px;max-width:560px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:48px}
.hero-stats{
  display:flex;gap:40px;flex-wrap:wrap;
  padding-top:32px;
  border-top:1px solid var(--glass-border);
}
.stat strong{
  display:block;
  font-family:var(--font-display);
  font-size:2rem;font-weight:900;
  background:var(--grad-cyan);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stat span{font-size:0.85rem;color:var(--text-3);font-family:var(--font-mono)}

/* SLOT FRAME (Hero) */
.slot-frame{
  position:relative;
  padding:28px;
  background:var(--glass);
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  box-shadow:0 0 90px rgba(0,229,255,0.20),0 20px 60px rgba(0,0,0,0.5);
  transform:perspective(1000px) rotateY(-5deg);
  transition:transform 0.5s;
}
.slot-frame:hover{transform:perspective(1000px) rotateY(0deg) scale(1.02)}
.slot-glow{
  position:absolute;inset:-2px;
  border-radius:var(--radius-xl);
  background:var(--grad-blend);
  background-size:200% 200%;
  z-index:-1;
  filter:blur(20px);
  opacity:0.4;
  animation:gradShift 6s ease infinite;
}
.slot-top{
  display:flex;align-items:center;gap:8px;
  padding-bottom:16px;border-bottom:1px solid var(--glass-border);
  margin-bottom:20px;
}
.slot-light{
  width:10px;height:10px;border-radius:50%;
  background:var(--magenta-1);
  box-shadow:0 0 12px var(--glow-magenta);
  animation:blink 1.5s ease infinite;
}
.slot-light:nth-child(2){background:var(--cyan-1);box-shadow:0 0 12px var(--glow-cyan);animation-delay:0.5s}
.slot-light:nth-child(3){background:var(--gold-1);box-shadow:0 0 12px var(--glow-gold);animation-delay:1s}
@keyframes blink{
  0%,100%{opacity:1}
  50%{opacity:0.3}
}
.slot-top h3{margin-left:auto;font-size:1rem}
.slot-reels{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:20px;
}
.reel{
  background:rgba(9,11,22,0.7);
  border:1px solid var(--glass-border);
  border-radius:16px;
  padding:20px 10px;
  display:flex;flex-direction:column;
  align-items:center;gap:14px;
  font-size:2.5rem;
  position:relative;overflow:hidden;
}
.reel::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,229,255,0.08),transparent 50%,rgba(255,60,172,0.08));
}
.reel span{position:relative;z-index:1;animation:reelSpin 3s ease infinite}
.reel:nth-child(2) span{animation-delay:0.3s}
.reel:nth-child(3) span{animation-delay:0.6s}
@keyframes reelSpin{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
.slot-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--glass-border);
}
.jackpot{
  font-family:var(--font-mono);
  font-size:0.8rem;color:var(--text-3);
  letter-spacing:0.08em;
}
.jackpot strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.4rem;
  background:var(--grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- FEATURES ---------- */
.features{position:relative}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.feature-card{
  position:relative;
  padding:32px;
  background:var(--glass);
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:all 0.4s ease;
  opacity:0;
  transform:translateY(30px);
}
.feature-card.reveal{opacity:1;transform:translateY(0)}
.feature-card.tall{grid-row:span 2}
.feature-card.wide{grid-column:span 2}
.feature-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:var(--grad-blend);
  opacity:0.6;
}
.feature-card::after{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:radial-gradient(circle,rgba(0,229,255,0.1),transparent 50%);
  opacity:0;transition:opacity 0.4s;
}
.feature-card:hover{
  transform:translateY(-8px);
  border-color:rgba(0,229,255,0.3);
  box-shadow:0 0 60px rgba(0,229,255,0.15),0 20px 40px rgba(0,0,0,0.4);
}
.feature-card:hover::after{opacity:1}
.card-icon{
  font-size:2.4rem;
  margin-bottom:18px;
  display:inline-block;
  filter:drop-shadow(0 0 12px var(--glow-cyan));
}
.feature-card h3{margin-bottom:12px}
.feature-card p{color:var(--text-2);position:relative;z-index:1}
.feature-card img{
  margin-top:24px;
  border-radius:18px;
  border:1px solid var(--glass-border);
  width:100%;
  height:200px;
  object-fit:cover;
}

/* ---------- GAME SECTION ---------- */
.game-section{position:relative}
.game-frame{
  max-width:1260px;
  margin:0 auto;
  background:var(--glass);
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  overflow:hidden;
  position:relative;
  box-shadow:0 0 90px rgba(0,229,255,0.18),0 30px 80px rgba(0,0,0,0.5);
}
.game-frame::before{
  content:'';
  position:absolute;inset:-2px;
  border-radius:var(--radius-xl);
  background:var(--grad-blend);
  background-size:200% 200%;
  z-index:-1;
  filter:blur(16px);
  opacity:0.35;
  animation:gradShift 6s ease infinite;
}
.game-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;
  border-bottom:1px solid var(--glass-border);
  background:rgba(9,11,22,0.6);
  flex-wrap:wrap;gap:16px;
}
.game-meta{display:flex;align-items:center;gap:14px}
.game-icon{font-size:2rem;filter:drop-shadow(0 0 12px var(--glow-magenta))}
.game-meta strong{display:block;font-family:var(--font-display);font-size:1.1rem}
.game-meta small{color:var(--text-3);font-family:var(--font-mono);font-size:0.75rem}
.game-controls{display:flex;gap:8px}
.game-controls button{
  width:40px;height:40px;
  border-radius:12px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  color:var(--text-1);
  font-size:1rem;
  transition:all 0.3s;
}
.game-controls button:hover{
  background:rgba(0,229,255,0.15);
  border-color:var(--cyan-1);
  box-shadow:0 0 16px var(--glow-cyan);
}
.game-iframe-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
}
.game-iframe-wrap iframe{
  width:100%;height:100%;
  border:none;display:block;
}

/* ---------- MODAL ---------- */
.modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(10px);
  z-index:1000;
  display:none;
  align-items:center;justify-content:center;
  padding:20px;
}
.modal.open{display:flex;animation:fadeIn 0.3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{
  max-width:540px;width:100%;
  background:linear-gradient(135deg,rgba(30,39,66,0.95),rgba(19,26,45,0.95));
  backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:36px;
  position:relative;
  box-shadow:0 0 80px var(--glow-cyan);
}
.modal-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-blend);
}
.modal-close{
  position:absolute;top:16px;right:16px;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--glass);
  border:1px solid var(--glass-border);
  font-size:1rem;
}
.modal-close:hover{background:rgba(255,60,172,0.2);color:var(--magenta-1)}
.modal-card h3{margin-bottom:20px}
.modal-card ul{margin-bottom:24px}
.modal-card li{
  padding:12px 0;
  border-bottom:1px solid var(--glass-border);
  display:flex;gap:12px;align-items:flex-start;
}
.modal-card li:last-child{border:none}
.modal-card li span{font-size:1.2rem;flex-shrink:0}

/* ---------- STATS SECTION ---------- */
.stats-section{padding:60px 0}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
.stat-card{
  text-align:center;
  padding:32px 20px;
  background:var(--glass);
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  transition:all 0.4s;
  opacity:0;
  transform:translateY(20px);
}
.stat-card.reveal{opacity:1;transform:translateY(0)}
.stat-card:hover{
  border-color:rgba(250,204,21,0.4);
  box-shadow:0 0 40px var(--glow-gold);
  transform:translateY(-4px);
}
.stat-card strong{
  display:block;
  font-family:var(--font-display);
  font-size:2.2rem;
  font-weight:900;
  background:var(--grad-blend);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:8px;
}
.stat-card span{
  font-size:0.82rem;
  color:var(--text-3);
  font-family:var(--font-mono);
  letter-spacing:0.05em;
}

/* ---------- GALLERY ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:240px 240px;
  gap:18px;
}
.gallery-item{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--glass-border);
  opacity:0;
  transform:scale(0.95);
  transition:all 0.5s;
}
.gallery-item.reveal{opacity:1;transform:scale(1)}
.gallery-item.large{grid-column:span 2;grid-row:span 2}
.gallery-item img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 0.6s;
}
.gallery-item:hover img{transform:scale(1.1)}
.gallery-item .overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(9,11,22,0.95));
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:24px;
  transition:all 0.4s;
}
.gallery-item .overlay h4{
  font-size:1.2rem;
  margin-bottom:4px;
  background:var(--grad-cyan);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.gallery-item .overlay p{font-size:0.88rem;color:var(--text-2)}

/* ---------- CTA SECTION ---------- */
.cta-section{padding:80px 0}
.cta-card{
  display:flex;align-items:center;justify-content:space-between;
  gap:40px;flex-wrap:wrap;
  padding:60px;
  background:linear-gradient(135deg,rgba(0,229,255,0.08),rgba(255,60,172,0.08));
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  position:relative;overflow:hidden;
  opacity:0;
  transform:translateY(20px);
  transition:all 0.6s;
}
.cta-card.reveal{opacity:1;transform:translateY(0)}
.cta-card::before{
  content:'';position:absolute;
  top:-50%;left:-20%;
  width:140%;height:200%;
  background:conic-gradient(from 0deg,transparent,rgba(0,229,255,0.1),transparent,rgba(255,60,172,0.1),transparent);
  animation:rotate 20s linear infinite;
  z-index:0;
}
@keyframes rotate{to{transform:rotate(360deg)}}
.cta-card > *{position:relative;z-index:1}
.cta-card p{color:var(--text-2);margin-top:12px}

/* ---------- PAGE HERO ---------- */
.page-hero{
  padding:180px 0 80px;
  text-align:center;
  position:relative;
}
.page-hero.small{padding:160px 0 60px}
.page-hero p{color:var(--text-2);max-width:680px;margin:20px auto 0;font-size:1.1rem}

/* ---------- TIER GRID ---------- */
.tier-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
.tier-card{
  padding:32px 24px;
  background:var(--glass);
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  position:relative;
  transition:all 0.4s;
}
.tier-card:hover{transform:translateY(-8px);border-color:var(--cyan-1);box-shadow:0 0 40px var(--glow-cyan)}
.tier-card.featured{
  border-color:rgba(0,229,255,0.4);
  box-shadow:0 0 50px var(--glow-cyan);
  transform:scale(1.04);
}
.tier-card.legendary{
  border-color:rgba(255,60,172,0.4);
  box-shadow:0 0 50px var(--glow-magenta);
}
.tier-badge{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.12em;
  padding:6px 12px;
  background:rgba(0,229,255,0.15);
  color:var(--cyan-1);
  border-radius:999px;
  margin-bottom:16px;
}
.tier-badge.gold{background:rgba(250,204,21,0.15);color:var(--gold-1)}
.tier-badge.magenta{background:rgba(255,60,172,0.15);color:var(--magenta-1)}
.tier-card h3{margin-bottom:12px}
.tier-card p{color:var(--text-2);margin-bottom:20px;font-size:0.92rem}
.tier-card ul li{
  padding:8px 0;
  font-size:0.88rem;
  color:var(--text-2);
  border-bottom:1px dashed var(--glass-border);
}
.tier-card ul li::before{content:'✦ ';color:var(--cyan-1)}

/* ---------- EVENTS ---------- */
.event-list{display:flex;flex-direction:column;gap:24px}
.event-card{
  display:grid;
  grid-template-columns:100px 1fr 280px;
  gap:32px;align-items:center;
  padding:24px;
  background:var(--glass);
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  transition:all 0.4s;
}
.event-card:hover{transform:translateX(8px);border-color:var(--cyan-1);box-shadow:0 0 40px var(--glow-cyan)}
.event-date{
  text-align:center;
  padding:16px;
  background:var(--grad-cyan);
  color:#001018;
  border-radius:var(--radius);
}
.event-date strong{display:block;font-family:var(--font-display);font-size:2rem;line-height:1}
.event-date span{font-size:0.78rem;font-family:var(--font-mono);letter-spacing:0.1em}
.event-body .tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.7rem;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(0,229,255,0.15);
  color:var(--cyan-1);
  margin-bottom:10px;
  letter-spacing:0.08em;
}
.event-body .tag.magenta{background:rgba(255,60,172,0.15);color:var(--magenta-1)}
.event-body .tag.gold{background:rgba(250,204,21,0.15);color:var(--gold-1)}
.event-body h3{margin-bottom:8px}
.event-body p{color:var(--text-2);font-size:0.95rem}
.event-card img{
  width:100%;height:140px;
  object-fit:cover;
  border-radius:var(--radius);
  border:1px solid var(--glass-border);
}

/* ---------- CONTACT ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:48px;
}
.contact-form{
  padding:40px;
  background:var(--glass);
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
}
.field{margin-bottom:20px}
.field label{
  display:block;
  font-size:0.82rem;
  font-family:var(--font-mono);
  color:var(--text-3);
  letter-spacing:0.08em;
  margin-bottom:8px;
}
.field input,.field textarea{
  width:100%;
  padding:14px 18px;
  background:rgba(9,11,22,0.6);
  border:1px solid var(--glass-border);
  border-radius:14px;
  color:var(--text-1);
  font-family:var(--font-body);
  font-size:0.95rem;
  transition:all 0.3s;
}
.field input:focus,.field textarea:focus{
  outline:none;
  border-color:var(--cyan-1);
  box-shadow:0 0 20px var(--glow-cyan);
}
.form-success{
  margin-top:20px;
  padding:14px 18px;
  background:rgba(0,229,255,0.1);
  border:1px solid var(--cyan-1);
  border-radius:14px;
  color:var(--cyan-1);
  font-size:0.9rem;
}
.contact-info{
  padding:40px;
  background:var(--glass);
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
}
.contact-info h3{margin-bottom:14px}
.info-block{
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--glass-border);
}
.info-block span{
  display:block;
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--text-3);
  letter-spacing:0.1em;
  margin-bottom:8px;
}
.info-block a{
  color:var(--cyan-1);
  font-size:1.05rem;
  font-weight:600;
}
.info-block a:hover{text-decoration:underline}

/* ---------- LEGAL ---------- */
.legal-section{padding:60px 0 130px}
.legal-content{
  max-width:880px;margin:0 auto;
  padding:50px;
  background:var(--glass);
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
}
.legal-content h2{
  margin:36px 0 16px;
  font-size:1.5rem;
  background:var(--grad-cyan);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{margin:24px 0 10px;font-size:1.1rem;color:var(--text-1)}
.legal-content p{color:var(--text-2);margin-bottom:14px}
.legal-content ul{margin:14px 0 20px 0;padding-left:0}
.legal-content ul li{
  padding:8px 0 8px 24px;
  position:relative;
  color:var(--text-2);
}
.legal-content ul li::before{
  content:'◆';
  position:absolute;left:0;
  color:var(--magenta-1);
}
.legal-content a{color:var(--cyan-1);text-decoration:underline}

/* ---------- FOOTER ---------- */
.site-footer{
  position:relative;
  background:linear-gradient(180deg,rgba(13,17,32,0.8),rgba(9,11,22,1));
  backdrop-filter:blur(20px);
  border-top:1px solid var(--glass-border);
  padding:80px 0 30px;
  margin-top:60px;
}
.footer-glow{
  position:absolute;top:-1px;left:0;right:0;
  height:2px;
  background:var(--grad-blend);
  background-size:200% 200%;
  animation:gradShift 4s ease infinite;
  box-shadow:0 0 20px var(--glow-cyan);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:50px;
}
.footer-grid h5{
  font-family:var(--font-display);
  font-size:0.95rem;
  margin-bottom:18px;
  background:var(--grad-cyan);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:0.05em;
}
.footer-grid a{
  display:block;
  padding:6px 0;
  color:var(--text-2);
  font-size:0.9rem;
  transition:all 0.3s;
}
.footer-grid a:hover{color:var(--cyan-1);transform:translateX(4px)}
.footer-logo{margin-bottom:14px}
.footer-bottom{
  padding-top:30px;
  border-top:1px solid var(--glass-border);
  display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.footer-bottom p{font-size:0.85rem;color:var(--text-3)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:60px}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .feature-card.wide{grid-column:span 2}
  .feature-card.tall{grid-row:auto}
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr);grid-template-rows:auto}
  .gallery-item.large{grid-column:span 2;grid-row:auto;height:300px}
  .tier-grid{grid-template-columns:repeat(2,1fr)}
  .tier-card.featured{transform:none}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .event-card{grid-template-columns:80px 1fr;}
  .event-card img{display:none}
  :root{--section-y:90px}
}
@media (max-width:768px){
  .container{padding:0 20px}
  .site-header{top:10px;width:calc(100% - 20px)}
  .nav-capsule,.header-actions{display:none}
  .mobile-toggle{display:flex}
  .header-inner{padding:6px 12px;min-height:54px}
  .hero{padding:120px 0 60px;min-height:auto}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .hero-stats{gap:24px}
  .feature-grid{grid-template-columns:1fr}
  .feature-card.wide{grid-column:auto}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat-card strong{font-size:1.6rem}
  .gallery{grid-template-columns:1fr}
  .gallery-item.large{grid-column:auto;height:240px}
  .tier-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .cta-card{padding:36px 24px;text-align:center;flex-direction:column}
  .legal-content{padding:30px 20px}
  .game-toolbar{flex-direction:column;align-items:flex-start}
  .slot-frame{transform:none}
  :root{--section-y:60px}
  h1{font-size:2.2rem}
}
@media (max-width:480px){
  .logo-text{font-size:0.9rem}
  .hero-stats{flex-direction:column;gap:16px}
  .event-card{grid-template-columns:1fr}
  .event-date{display:inline-block;width:auto}
}

/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
}
:focus-visible{
  outline:2px solid var(--cyan-1);
  outline-offset:3px;
}