@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Poppins:wght@300;400;500;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

body{
background:#05010d;
color:#fff;
font-family:'Poppins',sans-serif;
overflow-x:hidden;
background-image:
linear-gradient(rgba(255,0,255,.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,0,255,.08) 1px, transparent 1px);
background-size:40px 40px;
}

body::before{
content:"";
position:fixed;
inset:0;
background:radial-gradient(circle at top, rgba(255,0,255,.25), transparent 35%);
pointer-events:none;
}

.container{width:92%;margin:auto}

.navbar{
width:96%;
margin:18px auto;
padding:22px 28px;
display:flex;
justify-content:space-between;
align-items:center;
border:2px solid #ff00ff;
border-radius:28px;
background:rgba(0,0,0,.55);
backdrop-filter:blur(12px);
box-shadow:0 0 30px rgba(255,0,255,.4);
position:sticky;
top:10px;
z-index:99;
}

.logo-wrap{display:flex;align-items:center;gap:15px}
.logo{
font-family:'Orbitron',sans-serif;
font-size:2rem;
font-weight:900;
color:#ffb2ff;
text-shadow:0 0 20px #ff00ff;
}
.logo-sub{
font-size:.8rem;
letter-spacing:3px;
color:#ff00ff;
}

nav{display:flex;gap:24px}
nav a{
color:white;
text-decoration:none;
font-weight:600;
transition:.3s;
}
nav a:hover{
color:#ff00ff;
text-shadow:0 0 10px #ff00ff;
}

.search-box input{
padding:14px 20px;
border-radius:40px;
border:1px solid #ff00ff;
background:#120018;
color:white;
width:240px;
}

.hero{
min-height:85vh;
display:grid;
grid-template-columns:1.2fr 1fr;
align-items:center;
gap:40px;
}

.hero h1{
font-size:6rem;
line-height:1;
font-family:'Orbitron',sans-serif;
color:#ffb8ff;
text-shadow:
0 0 10px #ff00ff,
0 0 30px #ff00ff,
0 0 60px #ff00ff;
}

.hero h2{
font-size:3rem;
color:#ff00ff;
margin-bottom:20px;
}

.hero p{
font-size:1.2rem;
line-height:1.8;
max-width:650px;
margin-bottom:30px;
color:#ddd;
}

.btn{
display:inline-block;
padding:18px 34px;
border-radius:50px;
background:#ff00ff;
color:white;
text-decoration:none;
font-weight:700;
box-shadow:0 0 20px #ff00ff;
transition:.3s;
border:none;
cursor:pointer;
}

.btn:hover{
transform:translateY(-5px) scale(1.03);
}

.arcade-machine{
height:520px;
border-radius:40px;
border:2px solid #ff00ff;
display:flex;
align-items:center;
justify-content:center;
font-size:8rem;
background:rgba(0,0,0,.45);
box-shadow:0 0 50px rgba(255,0,255,.45);
}

.stats{
display:flex;
gap:20px;
margin-top:40px;
flex-wrap:wrap;
}

.stat{
padding:22px;
border-radius:22px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,0,255,.3);
min-width:180px;
text-align:center;
}

.stat span{
display:block;
font-size:2rem;
color:#ff00ff;
font-weight:bold;
}

.section-title{
font-size:2.5rem;
margin:50px 0 30px;
text-align:center;
color:#ff9cfb;
}

.games-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:24px;
padding-bottom:100px;
}

.game-card{
padding:28px;
border-radius:28px;
background:rgba(0,0,0,.45);
border:1px solid rgba(255,0,255,.45);
text-align:center;
box-shadow:0 0 20px rgba(255,0,255,.2);
transition:.35s;
}

.game-card:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 0 35px rgba(255,0,255,.45);
}

.game-card .emoji{
font-size:4rem;
margin-bottom:18px;
}

.game-card p{
color:#aaa;
margin:15px 0;
}

.form-box{
max-width:500px;
margin:60px auto;
padding:40px;
border-radius:30px;
background:rgba(0,0,0,.45);
border:1px solid rgba(255,0,255,.45);
box-shadow:0 0 30px rgba(255,0,255,.25);
}

input{
width:100%;
padding:16px;
border-radius:40px;
border:1px solid #ff00ff;
background:#120018;
color:white;
margin-bottom:18px;
}

canvas{
background:#111;
border:2px solid #ff00ff;
border-radius:20px;
margin-top:20px;
max-width:100%;
}

.footer{
padding:40px;
text-align:center;
color:#777;
}

@media(max-width:1000px){
.hero{
grid-template-columns:1fr;
text-align:center;
}
.hero h1{font-size:4rem}
.hero h2{font-size:2rem}
.navbar{
flex-direction:column;
gap:20px;
}
nav{
flex-wrap:wrap;
justify-content:center;
}
}