* { box-sizing: border-box; }
:root{
	--bg-1: #05040b;
	--bg-2: #0f1724;
	--accent-1: #8b5cf6;
	--accent-2: #06b6d4;
	--muted: #9aa4b2;
}
body{
	margin:0;
	font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	color: #e6eef8;
	background: radial-gradient(1200px 600px at 10% 10%, rgba(123,31,162,0.15), transparent 10%),
							linear-gradient(180deg,var(--bg-1), var(--bg-2));
	min-height:100vh;
	overflow-x:hidden;
}

.stars{ position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.9;
	background-image:
		radial-gradient(1px 1px at 20% 30%, #ffffff, transparent),
		radial-gradient(1px 1px at 40% 10%, #ffffff, transparent),
		radial-gradient(1px 1px at 70% 80%, #ffffff, transparent),
		radial-gradient(1px 1px at 10% 80%, #ffffff, transparent);
	background-size: 200px 200px, 120px 120px, 300px 300px, 80px 80px;
	animation: starMove 120s linear infinite;
}

.nebula{ position:fixed; z-index:0; inset:auto; top:-10%; left:10%; width:80vw; height:70vh; pointer-events:none; filter: blur(80px); mix-blend-mode:screen; opacity:0.8;
	background:
		radial-gradient(40% 30% at 30% 40%, rgba(139,92,246,0.28), transparent 20%),
		radial-gradient(50% 40% at 70% 60%, rgba(6,182,212,0.20), transparent 18%),
		radial-gradient(30% 20% at 50% 20%, rgba(255,99,71,0.12), transparent 18%);
	animation: nebulaDrift 30s linear infinite alternate;
}

@keyframes starMove{ from{background-position:0 0, 0 0, 0 0, 0 0} to{background-position:2000px -1000px, -1200px 800px, 800px -600px, -400px -900px} }
@keyframes nebulaDrift{ from{transform:translateY(0) translateX(0) scale(1)} to{transform:translateY(-40px) translateX(60px) scale(1.04)} }

.site-header{ position:relative; z-index:2; display:flex; justify-content:flex-start; align-items:center; gap:16px; padding:20px 28px; background:transparent; }
.brand{ display:flex; align-items:center; gap:14px; }
.logo-placeholder{ width:56px; height:56px; border-radius:12px; background:linear-gradient(135deg,var(--accent-1), var(--accent-2)); display:flex; align-items:center; justify-content:center; font-size:28px; box-shadow:0 8px 30px rgba(99,102,241,0.18); }
.site-header h1{ margin:0; font-size:1.1rem; color: #f8fbff; font-weight:700; font-family: 'Orbitron', sans-serif; letter-spacing:0.6px }
.tagline{ margin:2px 0 0; color:var(--muted); font-size:0.85rem }

.hero{ position:relative; z-index:2; min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px; text-align:center }
.hero-title{ margin:0; font-family: 'Orbitron', sans-serif; font-weight:700; font-size:clamp(48px, 8vw, 96px); line-height:0.92; background:linear-gradient(90deg,var(--accent-1), #ff7ab6 60%, var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; text-transform:uppercase; letter-spacing:2px; text-shadow:0 6px 30px rgba(0,0,0,0.6) }
.hero-sub{ margin:12px 0 20px; color: #cfe9ff; font-size:1.1rem; opacity:0.95 }
.enter-btn{ display:inline-block; padding:12px 20px; border-radius:999px; background:linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)); color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,0.08); box-shadow:0 8px 30px rgba(0,0,0,0.45); font-weight:600 }
.enter-btn:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(99,102,241,0.18); }

.games{ position:relative; z-index:2; padding:28px; max-width:1024px; margin:0 auto; }
.grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:16px }
.card{ background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border-radius:12px; padding:16px; box-shadow:0 8px 30px rgba(2,6,23,0.6); display:flex; flex-direction:column; gap:12px }
.card h3{ margin:0; font-size:1.05rem }
.card p{ margin:0; color:var(--muted); font-size:0.95rem }
.button{ display:inline-block; padding:8px 12px; border-radius:8px; background:linear-gradient(90deg,var(--accent-1),var(--accent-2)); color:white; text-decoration:none; font-weight:600 }

footer{ position:relative; z-index:2; padding:20px; text-align:center; color:var(--muted); }

@media (max-width:480px){ .hero-title{ font-size:40px } .site-header{ padding:12px } .hero{ padding:24px 12px } }