:root{--bg: radial-gradient(1200px 600px at 10% 10%, #1b1f3b 0%, #121321 50%, #0b0b0f 100%);--accent: #7ee787;--accent-2: #5bc0eb;--accent-3: #f8c630;--accent-4: #ff71ce;--accent-5: #9bffb0;--accent-6: #ffd6a5}html,body{height:100%}body{margin:0;background:var(--bg);color:#e6e6f0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.wrap{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}.hero{text-align:center;padding:48px 20px 24px}.hero h1{margin:0;font-family:Nunito,Inter,sans-serif;font-weight:900;font-size:56px;letter-spacing:-.5px;background:linear-gradient(90deg,#fff,#86ffcf 60%,#5bc0eb);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{margin:8px 0 0;opacity:.8;font-size:16px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:22px}.game-card{position:relative;border-radius:18px;overflow:hidden;padding:20px;display:grid;grid-template-rows:120px auto auto;box-shadow:0 12px 24px #00000059;transform:rotate(var(--rot, 0deg)) translateY(var(--y, 0));animation:float 8s ease-in-out infinite}.game-card h2{margin:12px 0 4px;font-size:22px}.game-card p{margin:0;opacity:.9}.icon{display:grid;place-items:center}.icon svg{width:100px;height:100px}@keyframes float{0%{transform:rotate(var(--rot, 0deg)) translateY(0)}50%{transform:rotate(var(--rot, 0deg)) translateY(-6px)}to{transform:rotate(var(--rot, 0deg)) translateY(0)}}.sunburst{--rot: -2deg;background:linear-gradient(135deg,#ff71ce,#f8c630 70%)}.orbit{--rot: 1.5deg;background:linear-gradient(135deg,#5bc0eb,#7ee787 80%)}.maze{--rot: -1deg;background:linear-gradient(135deg,#86ffcf,#ffd6a5 90%)}.pixels{--rot: .5deg;background:linear-gradient(135deg,#c084fc,#5bc0eb 90%)}.brush{--rot: -.5deg;background:linear-gradient(135deg,#f8c630,#ff71ce 85%)}.quantum{--rot: 2deg;background:linear-gradient(135deg,#7ee787,#c084fc 85%)}.foot{text-align:center;padding:18px 12px 28px;opacity:.7;font-size:14px}@media (max-width: 980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 640px){.grid{grid-template-columns:1fr}.hero h1{font-size:40px}}
