*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#000;
color:#fff;
overflow-x:hidden;
}

body.menu-open{
overflow:hidden;
}

html,body{
height:100%;
overflow:hidden;
}


/* =========================
   CONTAINER
========================= */

.container{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
}


/* =========================
   SECTION LAYOUT
========================= */

.section{
height:100vh;
width:100%;

position:absolute;
top:0;
left:0;

display:flex;
justify-content:center;
align-items:center;

opacity:0;
transform:scale(.98);

transition:
  opacity .6s ease,
  transform .6s ease;

pointer-events:none;
z-index:1;
}

.section.active{
opacity:1;
pointer-events:auto;
z-index:10;
animation:sectionPop .65s cubic-bezier(.34,1.56,.64,1);
}

/* Only apply max-width to NON-absolute children */
.section > *:not([style*="position:absolute"]):not(.game-overlay):not(.game-bg):not(.grid-bg):not(.floating){
max-width:900px;
padding:0 30px;
}

@keyframes sectionPop{

0%{
opacity:0;
transform:scale(.9) translateY(60px);
}

60%{
opacity:1;
transform:scale(1.05) translateY(-10px);
}

80%{
transform:scale(.98) translateY(4px);
}

100%{
transform:scale(1) translateY(0);
}

}


/* =========================
   NAVIGATION
========================= */

.nav{
position:fixed;
top:30px;
width:100%;
display:flex;
justify-content:center;
padding:12px 0;
z-index:1000;
}

.nav-container{
background:#fff;
padding:8px 36px;
border-radius:50px;
display:inline-flex;
align-items:center;
gap:35px;
position:relative;
}

.nav-item{
text-decoration:none;
color:#000;
font-weight:500;
}

.logo{
font-family:'Fredoka One',cursive;
font-size:30px;
font-weight:900;
color:#000;
text-decoration:none;
}

.nav-links{
display:none;
}


/* =========================
   HAMBURGER
========================= */

.menu-toggle{
display:none;
width:32px;
height:26px;
position:relative;
cursor:pointer;
}

.menu-toggle span{
position:absolute;
width:100%;
height:3px;
background:#000;
border-radius:4px;
transition:all .3s ease;
}

.menu-toggle span:nth-child(1){top:0;}
.menu-toggle span:nth-child(2){top:11px;}
.menu-toggle span:nth-child(3){top:22px;}

.menu-toggle.active span:nth-child(1){
top:11px;
transform:rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
opacity:0;
}

.menu-toggle.active span:nth-child(3){
top:11px;
transform:rotate(-45deg);
}


/* =========================
   HERO
========================= */

.hero{
text-align:center;
padding-top:40px;
}

.hero-content{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
max-width:900px;
padding:0 30px;
}

.hero h1{
font-size:4rem;
}

.hero-title{
display:flex;
flex-direction:column;
align-items:center;
font-size:4rem;
line-height:1.1;
}

.static-text{
font-weight:600;
}

.animated-text-wrapper{
height:3.8rem;
overflow:hidden;
position:relative;
margin-top:10px;
}

.animated-track{
display:flex;
flex-direction:column;
animation:verticalScroll 8s linear infinite;
}

.animated-track span{
height:3.8rem;
display:flex;
align-items:center;
justify-content:center;
font-size:3rem;
font-weight:800;
background:linear-gradient(90deg,#00ff9d,#00c3ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

@keyframes verticalScroll{
0%{transform:translateY(0);}
100%{transform:translateY(-75%);}
}

.hero p{
margin-top:20px;
font-size:1.2rem;
opacity:.8;
}


/* =========================
   GRID BACKGROUND
========================= */

.grid-bg{
position:absolute;
width:200%;
height:200%;
background-image:
  linear-gradient(#222 1px,transparent 1px),
  linear-gradient(90deg,#222 1px,transparent 1px);
background-size:60px 60px;
animation:moveGrid 20s linear infinite;
transform:rotateX(60deg);
top:-50%;
left:-50%;
pointer-events:none;
}

@keyframes moveGrid{
from{transform:rotateX(60deg) translateY(0);}
to{transform:rotateX(60deg) translateY(60px);}
}


/* =========================
   FLOATING CHARACTERS
========================= */

.floating{
position:absolute;
width:200px;
animation:float 6s ease-in-out infinite;
pointer-events:none;
}

.char1{left:10%;top:20%;}
.char2{right:10%;bottom:20%;animation-delay:2s;}

@keyframes float{
0%{transform:translateY(0);}
50%{transform:translateY(-20px);}
100%{transform:translateY(0);}
}


/* =========================
   GAME SECTION
========================= */

/* Override: game-section manages its own layout */
.game-section{
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}

.game-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,.9));
pointer-events:none;
/* Reset any inherited max-width/padding from .section > * */
max-width:none !important;
padding:0 !important;
}

.game-card{
position:relative;
z-index:2;
width:350px;
padding:40px;
border-radius:30px;
backdrop-filter:blur(20px);
background:rgba(255,255,255,.12);
text-align:center;
/* Explicitly reset inherited padding from section > * */
max-width:350px !important;
}

.game-logo{
width:120px;
margin-bottom:15px;
}

.google-play-btn img{
width:180px;
margin-top:20px;
transition:transform .3s ease;
}

.google-play-btn img:hover{
transform:scale(1.1);
}


/* =========================
   ABOUT SECTION
========================= */

.section.about-section{
background:#000;
text-align:center;
}

.about-inner{
max-width:900px;
padding:0 30px;
}

.about-inner h2{
font-size:2rem;
margin-bottom:20px;
}

.about-inner p{
opacity:.85;
line-height:1.8;
}


/* =========================
   SOCIAL
========================= */

.social{
background:#111;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}

.social-icons{
display:flex;
gap:40px;
justify-content:center;
align-items:center;
}

.social h2{
margin-bottom:40px;
}

.social-icons a{
font-size:30px;
color:white;
transition:.3s;
}

.social-icons a:hover{
transform:translateY(-8px) scale(1.2);
color:#00ff9d;
}


/* =========================
   FOOTER
========================= */

.site-footer{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}

.footer-container{
max-width:1100px;
width:100%;
margin:auto;
display:grid;
grid-template-columns:1.3fr 1fr 1fr;
gap:60px;
color:white;
padding:0 30px;
}

.footer-logo{
font-family:'Fredoka One',cursive;
font-size:28px;
margin-bottom:15px;
}

.footer-brand p{
opacity:.75;
line-height:1.6;
}

.footer-links h3,
.footer-games h3{
margin-bottom:15px;
}

.footer-links a{
display:block;
color:white;
text-decoration:none;
margin-bottom:10px;
opacity:.8;
transition:.3s;
}

.footer-links a:hover{
opacity:1;
color:#00ff9d;
}

.footer-games-grid{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.footer-games-grid img{
width:60px;
height:60px;
border-radius:12px;
transition:.3s;
}

.footer-games-grid img:hover{
transform:scale(1.1);
}

.footer-bottom{
text-align:center;
margin-top:60px;
opacity:.6;
font-size:14px;
}


/* =========================
   SECTION INDICATOR
========================= */

.section-indicator{
position:fixed;
right:20px;
top:50%;
transform:translateY(-50%);
display:flex;
flex-direction:column;
gap:10px;
z-index:999;
}

.section-indicator .dot{
width:8px;
height:8px;
border-radius:50%;
background:rgba(255,255,255,.15);
transition:.3s;
cursor:pointer;
}

.section-indicator .dot.active{
background:#00ff9d;
transform:scale(1.6);
}


/* =========================
   MOBILE
========================= */

@media(max-width:768px){

.nav{
padding:1px 0;
}

.nav-container{
width:86%;
padding:10px 24px;
border-radius:50px;
justify-content:space-between;
}

.logo{
font-size:24px;
}

.nav-item{
display:none;
}

.menu-toggle{
display:block;
width:24px;
height:18px;
}

.menu-toggle span{
height:2.5px;
}

.menu-toggle span:nth-child(1){top:0;}
.menu-toggle span:nth-child(2){top:7px;}
.menu-toggle span:nth-child(3){top:14px;}

.menu-toggle.active span:nth-child(1){
top:7px;
transform:rotate(45deg);
}

.menu-toggle.active span:nth-child(3){
top:7px;
transform:rotate(-45deg);
}

.hero-title{
font-size:2.2rem;
}

.animated-text-wrapper{
height:2rem;
}

.animated-track span{
height:2rem;
font-size:1.6rem;
}

.floating{
width:120px;
opacity:.6;
}

.game-card{
width:85% !important;
max-width:85% !important;

padding:40px 30px !important;

min-height:420px;   /* increase card height */

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

.game-logo{
width:90px;
}

.footer-container{
grid-template-columns:1fr;
gap:40px;
text-align:center;
}

.footer-games-grid{
justify-content:center;
}

}

/* =========================
   MOBILE NAV MENU
========================= */

@media(max-width:768px){

.nav-links{

position:absolute;
top:70px;
left:0;

width:100%;
background:#fff;

display:none;
flex-direction:column;
align-items:center;

padding:20px 0;
gap:18px;

border-radius:20px;

box-shadow:0 15px 40px rgba(0,0,0,.25);
z-index:1500;

}

.nav-links a{
color:#000;
text-decoration:none;
font-weight:500;
font-size:16px;
}

/* OPEN STATE */

.nav-links.active{
display:flex;
}

}