/* =========================
   Global Reset & Variables
   ========================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0;
  font-family:'Orbitron',sans-serif;
  background:#111;
  color:#eee;
  line-height:1.6;
}
:root {
  --primary: #00ffea;
  --bg-dark: #111;
  --bg-light: #222;
  --border-radius: .5rem;
}

/* =========================
   Utility Classes
   ========================= */
.container { max-width:1200px; margin:auto; padding:1rem; }
.btn{ display:inline-block; padding:.75rem 1.25rem; border:none;
      cursor:pointer; background:var(--primary); color:#111;
      border-radius: var(--border-radius);
      transition:transform .2s, box-shadow .2s;}
.btn:hover{ transform:scale(1.05);
            box-shadow:0 4px 12px rgba(0,255,234,.5);}
.text-center{ text-align:center; }
.grid{ display:grid; gap:1.5rem; }
.reveal{ opacity:0; transform:translateY(20px); transition:.6s ease-out;}
.revealed{ opacity:1; transform:translateY(0); }

/* =========================
   Header & Nav
   ========================= */
.header{
  position:sticky; top:0; z-index:1000;
  background:rgba(17,17,17,.95);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ font-size:1.75rem; color:#fff; text-decoration:none;}
.nav ul{ list-style:none; display:flex; gap:1.5rem;}
.nav a{ color:#eee; text-decoration:none; font-weight:600;}
.hamburger{
  background:none; border:none; color:#eee;
  font-size:1.75rem; cursor:pointer;
}
@media(max-width:768px){
  .desktop-nav{display:none;}          /* hide top nav on mobile */
}

/* =========================
   Hero Section
   ========================= */
.hero{
  height:100vh; display:flex; align-items:center;
  background:url('https://i.imgur.com/ubFIfKe.jpeg') center/cover no-repeat;
  position:relative; color:#fff;
}
.hero::before{ content:""; position:absolute; inset:0;
              background:linear-gradient(to bottom, rgba(0,0,0,.3),rgba(0,0,0,.7));}
.hero__content{ position:relative; max-width:600px; margin:auto; text-align:center;}
.hero h1{ font-size:4rem; margin-bottom:.5rem;}
.hero p{ font-size:1.25rem; margin-bottom:1.5rem;}
@media(max-width:768px){
  .hero h1{font-size:2.5rem;}
}

/* =========================
   Section & Backgrounds
   ========================= */
.section{ padding:4rem 0; }
.section--dark{ background:var(--bg-light); }

/* =========================
   Card Grid (Featured Games)
   ========================= */
.grid--cards{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.card{
  background:#222; border-radius:var(--border-radius);
  overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.5);
  transition:transform .3s,box-shadow .3s;
}
.card img{ width:100%; height:auto;}
.card__content{ padding:1rem;}
.card h3{ margin:0 0 .5rem;}
.card:hover{
  transform:translateY(-8px);
  box-shadow:0 12px 20px rgba(0,0,0,.7);
}

/* =========================
   Carousel (Latest News)
   ========================= */
.carousel{ position:relative; overflow:hidden; }
.slide{ display:none; }
.slide.active{ display:block;}
.slide img{ width:100%; height:auto; border-radius:.5rem;}
.slide__content{ padding:1rem; background:#222; margin-top:-50px; color:#fff; }

/* =========================
   Countdown & Stream
   ========================= */
.grid--two{
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.countdown h3{ margin-bottom:.5rem;}
.stream iframe{ width:100%; border:none; border-radius:.5rem;}

/* =========================
   Contact Form
   ========================= */
.contact-form label{ display:block; margin-bottom:1rem;}
.contact-form input,
.contact-form textarea{
  width:100%; padding:.75rem; background:#222;
  border:none; color:#eee; border-radius:.3rem;
  font-family:'Orbitron',sans-serif;
}
.contact-form button{ margin-top:.5rem;}

/* =========================
   Footer
   ========================= */
.footer{ background:var(--bg-dark); padding:2rem 0;}
.footer__inner{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
}
.socials{ list-style:none; display:flex; gap:.75rem;}
.socials a{ color:#eee; font-size:1.5rem; transition:.3s;}
.socials a:hover{ color:var(--primary);}

/* =========================
   Scroll‑to‑top button
   ========================= */
#scrollTopBtn{
  position:fixed; bottom:2rem; right:2rem;
  background:var(--primary); border:none; border-radius:50%;
  width:3rem; height:3rem; color:#111; font-size:1.5rem;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:.3s;
}
#scrollTopBtn.show{ opacity:1; visibility:visible;}

/* =========================
   ** NEW – Side‑Menu Drawer **
   ========================= */
.side-menu{
  position:fixed; top:0; left:0; width:250px; height:100vh;
  background:#222; padding-top:4rem; transform:translateX(-100%);
  transition:transform .3s ease-in-out; z-index:2000;
}
.side-menu.open{ transform:translateX(0); }
.side-menu nav ul{
  list-style:none; padding:0; margin:0;
}
.side-menu nav li{ margin-bottom:1.5rem; text-align:center; }
.side-menu nav a{
  color:#eee; font-size:1.2rem; text-decoration:none; display:block;
  padding:.75rem 1rem; transition:background .2s, color .2s;
}
.side-menu nav a:hover{ background:rgba(255,255,255,.15); }

/* Overlay that darkens the rest of the page when the menu is open */
.overlay{
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,.4); opacity:0; visibility:hidden;
  transition:opacity .3s ease-in-out; z-index:1500;
}
.overlay.show{ opacity:1; visibility:visible; }