body { background-color: #05050a; color: #ffffff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; overflow-x: hidden; transition: filter 0.5s ease, background-color 0.5s ease; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #05050a; }
::-webkit-scrollbar-thumb { background: #0033cc; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #ff0000; }
.scanlines { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.15)); background-size: 100% 4px; z-index: 9999; pointer-events: none; }
nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 40px; background: rgba(5,5,10,0.9); border-bottom: 2px solid #0033cc; position: sticky; top: 0; z-index: 100; }
.nav-logo { height: 50px; transition: filter 0.3s ease; }
#nav-logo-hitbox { cursor: pointer; position: relative; z-index: 101; }
.nav-links a { color: #fff; text-decoration: none; margin-left: 20px; font-weight: bold; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover { color: #ff0000; }
#space-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -5; pointer-events: none; overflow: hidden; }
.static-stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(1px 1px at 15vw 20vh, #ffffff 100%, transparent), radial-gradient(1px 1px at 30vw 65vh, #ffffff 100%, transparent), radial-gradient(2px 2px at 50vw 10vh, #aaaaaa 100%, transparent), radial-gradient(1px 1px at 75vw 40vh, #00aaff 100%, transparent), radial-gradient(1px 1px at 90vw 80vh, #ffffff 100%, transparent), radial-gradient(2px 2px at 10vw 85vh, #aaaaaa 100%, transparent), radial-gradient(1px 1px at 85vw 15vh, #00aaff 100%, transparent), radial-gradient(1px 1px at 45vw 50vh, #ffffff 100%, transparent); background-size: 100vw 100vh; opacity: 0.4; z-index: -4; }
.horizon-glow { position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(to top, rgba(0,51,204,0.15), transparent); z-index: -3; }
.nebula { position: absolute; top: 10%; left: -10%; width: 70vw; height: 70vh; background: radial-gradient(circle, rgba(100,0,255,0.15) 0%, transparent 65%); border-radius: 50%; filter: blur(60px); animation: driftMist 20s infinite alternate ease-in-out; z-index: -1; }
@keyframes driftMist { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(10vw, 5vh) scale(1.1); } }
.planet { position: absolute; top: 15%; right: 10%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ff0055, #110022); box-shadow: 0 0 40px rgba(255,0,85,0.4), inset -20px -20px 40px rgba(0,0,0,0.8); }
.planet::after { content: ''; position: absolute; top: 50%; left: 50%; width: 220px; height: 30px; border-radius: 50%; border: 8px solid rgba(0,229,255,0.4); border-top-color: transparent; border-left-color: transparent; transform: translate(-50%, -50%) rotate(25deg); box-shadow: 0 5px 15px rgba(0,229,255,0.2); }
#planet-hitbox { position: fixed; top: 15%; right: 10%; width: 120px; height: 120px; border-radius: 50%; cursor: crosshair; z-index: 100; }
.distant-moon { position: absolute; top: 35%; left: 15%; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #00aaff, #001133); box-shadow: 0 0 15px rgba(0,170,255,0.2), inset -10px -10px 20px rgba(0,0,0,0.8); filter: blur(1px); animation: floatMoon 15s infinite alternate ease-in-out; z-index: -2; overflow: hidden; }
@keyframes floatMoon { 0% { transform: translateY(0); } 100% { transform: translateY(30px); } }
#moon-hitbox { position: fixed; top: 35%; left: 15%; width: 40px; height: 40px; border-radius: 50%; cursor: crosshair; z-index: 100; animation: floatMoon 15s infinite alternate ease-in-out; }
.star { position: absolute; width: 2px; height: 15px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff; animation: twinkle linear forwards; opacity: 0; }
.star::after { content: ''; position: absolute; top: 50%; left: 50%; width: 15px; height: 2px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff; transform: translate(-50%, -50%); }
@keyframes twinkle { 0% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } }
.shooting-star { position: absolute; width: 120px; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,1), transparent); border-radius: 50%; box-shadow: 0 0 10px #00e5ff; transform: rotate(-45deg); opacity: 0; animation: shootingStarAnim 1.5s linear forwards; pointer-events: none; }
@keyframes shootingStarAnim { 0% { transform: translateX(0) translateY(0) rotate(-45deg); opacity: 1; } 100% { transform: translateX(-120vw) translateY(120vh) rotate(-45deg); opacity: 0; } }
.hero { position: relative; text-align: center; padding: 60px 20px 80px; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.grid-background { position: absolute; bottom: -50%; left: -50%; width: 200%; height: 200%; background-image: linear-gradient(rgba(0,51,204,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(0,51,204,0.4) 1px, transparent 1px); background-size: 50px 50px; transform: perspective(500px) rotateX(60deg); z-index: -1; }
.main-logo { max-width: 600px; width: 90%; margin-bottom: 20px; filter: drop-shadow(0 0 15px rgba(0,51,204,0.6)); }
.price-banner { background: #ff0000; color: #fff; padding: 10px 30px; font-size: 2rem; text-transform: uppercase; letter-spacing: 2px; border-radius: 5px; margin: 10px 0 20px; box-shadow: 0 0 15px #ff0000; }
.terminal-text { font-family: 'Courier New', Courier, monospace; font-size: 1.2rem; max-width: 600px; min-height: 60px; }
.main-btn { background: #0055ff; color: #fff; text-decoration: none; padding: 15px 40px; font-size: 1.3rem; font-weight: bold; text-transform: uppercase; border-radius: 5px; box-shadow: 0 0 15px #0055ff; transition: all 0.2s ease; margin-top: 10px; z-index: 10; }
.main-btn:hover { background: #fff; color: #0055ff; box-shadow: 0 0 25px #fff; transform: scale(1.05); }
.games-section { padding: 60px 20px 20px; max-width: 1000px; margin: 0 auto; position: relative; z-index: 5; }
.section-title { text-align: center; color: #0055ff; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 30px; text-shadow: 0 0 10px rgba(0,85,255,0.5); }
.game-category { background: #11111a; border: 1px solid #0033cc; border-radius: 5px; margin-bottom: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.game-category summary { padding: 15px 20px; font-size: 1.2rem; font-weight: bold; color: #fff; cursor: pointer; background: rgba(0,85,255,0.1); transition: background 0.2s; list-style: none; }
.game-category summary::-webkit-details-marker { display: none; }
.game-category summary:hover { background: rgba(0,85,255,0.3); color: #ff0000; }
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; padding: 25px; background: #05050a; border-top: 1px solid #0033cc; }
.game-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.game-item img { width: 100%; height: 120px; object-fit: contain; border-radius: 8px; margin-bottom: 10px; border: 2px solid #0033cc; transition: transform 0.2s, border-color 0.2s; }
.game-item:hover img { transform: scale(1.05); border-color: #ff0000; }
.game-item span { color: #00aaff; font-size: 0.95rem; line-height: 1.2; }
.features-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; padding: 60px 20px; background: #05050a; position: relative; z-index: 5; }
.card { background: #11111a; border: 1px solid #0033cc; border-radius: 10px; padding: 30px; width: 300px; box-shadow: 0 10px 20px rgba(0,0,0,0.5); transition: transform 0.3s; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-5px); border-color: #ff0000; }
.card h3 { color: #ff0000; margin-top: 0; text-align: center; border-bottom: 1px solid #333; padding-bottom: 10px; }
.hours-list { list-style: none; padding: 0; margin: 0 0 15px 0; }
.hours-list li { margin-bottom: 8px; font-size: 1.05rem; }
.address { font-size: 1.1rem; margin-top: auto; }
.location-link { color: #00aaff; text-decoration: none; transition: color 0.2s; }
.location-link:hover { color: #fff; }
.contact-link { color: #00aaff; text-decoration: none; font-weight: bold; font-size: 1.2rem; }
.contact-link:hover { color: #fff; }
.social-links { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.social-btn { text-decoration: none; color: #fff; padding: 10px; text-align: center; border-radius: 5px; font-weight: bold; transition: filter 0.2s; }
.social-btn:hover { filter: brightness(1.3); }
.facebook { background: #1877F2; }
.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
footer { text-align: center; padding: 25px 20px; border-top: 1px solid #0033cc; margin-top: 40px; color: #555; font-size: 0.9rem; background: #05050a; position: relative; z-index: 10; }