@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&display=swap');
body {
font-family: 'Orbitron', sans-serif;
background: linear-gradient(135deg, #0a0a1a, #1a0a2a);
overflow: hidden;
height: 100vh;
}
.zone-asteroid {
background: radial-gradient(circle at center, #2a2a2a, #000000);
animation: zonePulse 4s infinite alternate;
}
.zone-nebula {
background: radial-gradient(circle at center, #2a0a2a, #000000);
animation: zonePulse 4s infinite alternate;
}
.zone-ice {
background: radial-gradient(circle at center, #0a2a2a, #001111);
animation: zonePulse 4s infinite alternate;
}
.zone-vortex {
background: radial-gradient(circle at center, #1a0a2a, #000000);
animation: zonePulse 4s infinite alternate;
}
.zone-electric {
background: radial-gradient(circle at center, #2a2a0a, #000000);
animation: zonePulse 4s infinite alternate;
}
.zone-gravity {
background: radial-gradient(circle at center, #0a2a0a, #000000);
animation: zonePulse 4s infinite alternate;
}
.zone-plasma {
background: radial-gradient(circle at center, #2a0a0a, #000000);
animation: zonePulse 4s infinite alternate;
}
.zone-wormhole {
background: radial-gradient(circle at center, #0a0a2a, #000000);
animation: zonePulse 4s infinite alternate;
}
.game-container {
position: relative;
width: 100%;
height: 85vh;
overflow: hidden;
background: radial-gradient(circle at center, #0a0a1a 0%, #000000 100%);
border: 2px solid #4444aa;
box-shadow: 0 0 30px rgba(100, 100, 255, 0.5);
}
.ship {
position: absolute;
transition: transform 0.1s ease;
z-index: 10;
text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
filter: drop-shadow(0 0 5px currentColor);
}
.bullet {
position: absolute;
width: 6px;
height: 15px;
border-radius: 50%;
background: #ffff00;
box-shadow: 0 0 12px #ffff00, 0 0 20px #ffaa00;
z-index: 5;
animation: bulletPulse 0.5s infinite alternate;
}
.star {
position: absolute;
background: white;
border-radius: 50%;
z-index: 1;
animation: starTwinkle 3s infinite alternate;
}
.energy-bar {
height: 20px;
border-radius: 10px;
background: linear-gradient(to right, #ff3333, #ffff00, #00aaff);
box-shadow: 0 0 15px rgba(0, 170, 255, 0.9);
animation: energyPulse 2s infinite alternate;
}
.ship-icon {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-size: 14px;
transition: all 0.3s ease;
box-shadow: 0 0 5px rgba(255,255,255,0.5);
}
.ship-selected {
box-shadow: 0 0 20px #00aaff, 0 0 30px #0088ff;
border: 2px solid #00aaff;
transform: scale(1.2);
}
.weapon-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(30, 30, 60, 0.7);
margin: 0 5px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0 8px rgba(100, 100, 255, 0.5);
}
.weapon-icon:hover {
transform: scale(1.2);
background: rgba(50, 50, 100, 0.9);
box-shadow: 0 0 15px #00aaff;
}
.weapon-icon.active {
box-shadow: 0 0 20px #00aaff, 0 0 30px #0088ff;
border: 2px solid #00aaff;
transform: scale(1.1);
}
.pulse {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes starTwinkle {
0% { opacity: 0.3; }
100% { opacity: 1; }
}
@keyframes bulletPulse {
0% { transform: scale(1); }
100% { transform: scale(1.2); }
}
@keyframes energyPulse {
0% { box-shadow: 0 0 10px rgba(0, 170, 255, 0.7); }
100% { box-shadow: 0 0 20px rgba(0, 200, 255, 0.9); }
}
@keyframes zonePulse {
0% { box-shadow: inset 0 0 20px rgba(100, 100, 255, 0.3); }
100% { box-shadow: inset 0 0 40px rgba(150, 150, 255, 0.5); }
}
.radar-dot {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: #00ff00;
box-shadow: 0 0 8px #00ff00, 0 0 15px #00ff00;
animation: radarPulse 1s infinite alternate;
}
@keyframes radarPulse {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.3); opacity: 1; }
}
.explosion {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, #ffff00, #ff6600, transparent);
animation: explode 0.6s forwards;
z-index: 20;
box-shadow: 0 0 30px #ff6600;
}
@keyframes explode {
0% { transform: scale(0.1); opacity: 1; }
70% { transform: scale(2); opacity: 0.7; }
100% { transform: scale(4); opacity: 0; }
}
.powerup {
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
background: radial-gradient(circle, #00ff00, #008800);
box-shadow: 0 0 15px #00ff00, 0 0 25px #00aa00;
animation: pulse 1.5s infinite, powerupFloat 3s infinite ease-in-out;
z-index: 4;
}
@keyframes powerupFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.ship-trail {
position: absolute;
width: 12px;
height: 25px;
background: linear-gradient(to top, #ff6600, transparent);
border-radius: 50% 50% 0 0;
z-index: 2;
box-shadow: 0 0 10px #ff6600;
animation: trailFade 0.5s forwards;
}
@keyframes trailFade {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.5); }
}
.asteroid {
position: absolute;
border-radius: 50%;
background: linear-gradient(45deg, #8B4513, #5D2906);
box-shadow: 0 0 15px #8B4513;
z-index: 3;
}
.nebula-cloud {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 105, 180, 0.4), transparent);
box-shadow: 0 0 40px rgba(255, 105, 180, 0.6);
z-index: 2;
animation: nebulaPulse 5s infinite alternate;
}
@keyframes nebulaPulse {
0% { opacity: 0.4; }
100% { opacity: 0.7; }
}
.ice-crystal {
position: absolute;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background: linear-gradient(45deg, #87CEEB, #5CA9DD);
box-shadow: 0 0 15px #87CEEB;
z-index: 3;
animation: iceGlow 3s infinite alternate;
}
@keyframes iceGlow {
0% { box-shadow: 0 0 10px #87CEEB; }
100% { box-shadow: 0 0 25px #87CEEB, 0 0 40px #5CA9DD; }
}
.header-glow {
text-shadow: 0 0 10px #4d4dff, 0 0 20px #4d4dff;
animation: headerPulse 3s infinite alternate;
}
@keyframes headerPulse {
0% { text-shadow: 0 0 10px #4d4dff, 0 0 20px #4d4dff; }
100% { text-shadow: 0 0 15px #4d4dff, 0 0 30px #4d4dff, 0 0 40px #4d4dff; }
}
SHIP CONTROLS
↑
THRUST
←
LEFT
↓
BOMB
→
RIGHT
SPACE
SHOOT
ZONE INFO
NORMAL SPACE
Standard combat zone
Made with 
DeepSite - 🧬 Remix