@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Orbitron',sans-serif; background:#02040a; color:white; overflow-x:hidden; min-height:100vh; }

.nebula { position:fixed; inset:0; z-index:-3; background: radial-gradient(circle at 20% 30%, rgba(0,255,255,0.08), transparent 40%), radial-gradient(circle at 80% 60%, rgba(255,0,200,0.08), transparent 40%), radial-gradient(circle at 50% 50%, rgba(120,0,255,0.06), transparent 50%); filter:blur(40px); animation:drift 12s ease-in-out infinite alternate; }
@keyframes drift { from { transform:scale(1) translateY(0px); } to { transform:scale(1.1) translateY(-20px); } }

canvas { position:fixed; top:0; left:0; width:100%; height:100%; }
#stars { z-index:-2; }
#space { z-index:-1; }

.header { text-align:center; padding:50px 20px 20px; }
.logo { font-size:48px; font-weight:800; color:#00f5ff; text-shadow: 0 0 10px #00f5ff, 0 0 30px #00f5ff; }
.subtitle { margin-top:12px; opacity:0.75; }

.search-box { margin-top:25px; display:flex; justify-content:center; }
.search-box input { width:min(650px,90%); padding:15px 20px; border:none; border-radius:16px; background:rgba(255,255,255,0.08); color:white; outline:none; backdrop-filter:blur(10px); border:1px solid rgba(0,255,255,0.2); }

.hero { position:relative; text-align:center; padding:80px 20px 40px; }
.hero h1 { font-size:clamp(36px,5vw,72px); line-height:1.1; text-shadow: 0 0 20px rgba(0,255,255,0.4); }
.hero p { max-width:700px; margin:20px auto 0; opacity:0.8; line-height:1.7; }
.hero-glow { position:absolute; width:500px; height:500px; left:50%; top:50%; transform:translate(-50%,-50%); background: radial-gradient(circle, rgba(0,255,255,0.12), transparent 70%); filter:blur(40px); z-index:-1; }

.games-section { padding:20px 40px 80px; }
.section-title { font-size:28px; margin-bottom:25px; color:#00f5ff; }

.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:24px; }

.card { position:relative; padding:24px; border-radius:20px; background:rgba(255,255,255,0.06); border:1px solid rgba(0,255,255,0.15); backdrop-filter:blur(10px); overflow:hidden; transition:0.35s ease; cursor:pointer; text-decoration:none; color:white; display:block; }
.card::before { content:""; position:absolute; inset:-50%; background: radial-gradient(circle, rgba(0,255,255,0.12), transparent 60%); animation:spin 10s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 0 35px rgba(0,255,255,0.25); }
.card h3 { position:relative; color:#00f5ff; margin-bottom:12px; }
.card p { position:relative; opacity:0.75; line-height:1.5; font-size:14px; }

footer { padding:60px 30px; border-top: 1px solid rgba(0,255,255,0.12); background: rgba(255,255,255,0.03); }
.footer-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:40px; }
footer h3 { color:#00f5ff; margin-bottom:15px; }
footer p, footer li { opacity:0.75; line-height:1.7; }
footer ul { list-style:none; }
.copyright { margin-top:40px; text-align:center; opacity:0.5; font-size:14px; }

@media(max-width:768px){ .games-section{ padding:20px; } .logo{ font-size:34px; } }