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

body {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    background: #0b0c26;
    overflow: hidden;
    color: white;
}

/* Background */
.space-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #00111a, #002244);
    z-index: -1;
}

.stars {
    position: absolute;
    width: 200%;
    height: 200%;
    background: transparent;
    box-shadow:
        50px 60px 2px #fff, 200px 120px 2px #fff, 300px 400px 2px #fff,
        400px 200px 2px #fff, 600px 300px 2px #fff, 800px 600px 2px #fff;
    animation: twinkle 3s infinite alternate ease-in-out;
}
@keyframes twinkle {
    from { opacity: 0.7; }
    to { opacity: 1; }
}

/* Sun */
.sun {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe066, #ffb84d);
    box-shadow: 0 0 60px 20px rgba(255, 200, 0, 0.8);
    animation: sun-pulse 5s ease-in-out infinite;
}
@keyframes sun-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Middle Text */
.middle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}
.middle-text h1 {
    font-size: 3rem;
    color: #ffeb3b;
    text-shadow: 2px 2px 8px #000;
}
.middle-text p {
    font-size: 1.3rem;
    margin: 10px 0;
}
.middle-text button {
    padding: 15px 30px;
    font-size: 18px;
    cursor: pointer;
    background-color: #ffcc00;
    color: black;
    border: none;
    border-radius: 50px;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
}
.middle-text button:hover {
    background-color: #ff9900;
    transform: scale(1.05);
    box-shadow: 0 0 15px #ffcc00;
}

/* Story Screens */
.screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.screen.hidden { display: none; }

/* Story Selection */
.story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 1000px;
    margin-top: 20px;
}
.story-button {
    padding: 15px;
    font-size: 1.2rem;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: white;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    transition: transform 0.2s, box-shadow 0.3s;
}
.story-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0,0,0,0.7);
}

/* Back button */
.back-button {
    align-self: flex-start;
    padding: 8px 15px;
    font-size: 16px;
    background: #333;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 10px;
}
.back-button:hover {
    background: #555;
}

/* Story Content */
#story-title {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #ffeb3b;
}
.story-text {
    font-size: 1.1rem;
    max-width: 800px;
    line-height: 1.5;
    padding: 15px;
    background: rgba(0,0,0,0.5);
    border-radius: 15px;
}

/* Planet Style */
.planet {
    position: absolute;
    border-radius: 50%;
    animation: float-rotate 10s ease-in-out infinite;
}
.planet-green { width: 120px; height: 120px; background: radial-gradient(circle, #76c7c0, #34a0a4); top: 60%; left: 10%; }
.planet-blue { width: 100px; height: 100px; background: radial-gradient(circle, #89cff0, #4682b4); top: 30%; right: 15%; }
.planet-red { width: 140px; height: 140px; background: radial-gradient(circle, #ff9999, #ff4d4d); top: 50%; left: 50%; }
.moon { width: 90px; height: 90px; background: radial-gradient(circle, #eee, #bbb); top: 70%; right: 5%; border-radius: 50%; }

/* Floating animation */
@keyframes float-rotate {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(180deg); }
    100% { transform: translateY(0) rotate(360deg); }
}

/* Rockets */
.rocket {
    position: absolute;
    width: 60px; height: 140px;
    background: linear-gradient(135deg, #ffb347, #ffcc33);
    border-radius: 50% 50% 20% 20% / 60% 60% 40% 40%;
}
.rocket1 { left: 45%; bottom: -150px; animation: rocket-launch1 12s linear infinite; }
.rocket2 { left: 20%; bottom: -200px; animation: rocket-launch2 16s linear infinite; }
.flame {
    position: absolute;
    bottom: -20px; left: 50%;
    transform: translateX(-50%);
    width: 20px; height: 30px;
    background: radial-gradient(circle, #ff0, #ff6347);
    border-radius: 50%;
    animation: flame-flicker 0.3s infinite alternate;
}
@keyframes flame-flicker {
    from { transform: translateX(-50%) scaleY(1); opacity: 1; }
    to { transform: translateX(-50%) scaleY(1.2); opacity: 0.8; }
}
@keyframes rocket-launch1 {
    0% { bottom: -150px; transform: rotate(10deg); }
    50% { transform: rotate(-10deg); }
    100% { bottom: 110%; transform: rotate(10deg); }
}
@keyframes rocket-launch2 {
    0% { bottom: -200px; transform: rotate(-5deg); }
    50% { transform: rotate(15deg); }
    100% { bottom: 120%; transform: rotate(-5deg); }
}

/* Astronauts */
.astronaut {
    position: absolute;
    width: 60px; height: 90px;
    background: white;
    border-radius: 50%;
    border: 2px solid #ccc;
}
.astronaut1 { right: 25%; top: -150px; animation: astronaut-bob 6s ease-in-out infinite; }
.astronaut2 { right: 10%; top: -100px; animation: astronaut-bob 8s ease-in-out infinite; }
@keyframes astronaut-bob {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}
/* ========================
   COMETS
   ======================== */
.comet {
    position: absolute;
    width: 4px;
    height: 80px;
    background: linear-gradient(45deg, white, transparent);
    border-radius: 50%;
    opacity: 0.7;
    animation: comet-move 8s linear infinite;
}

.comet:nth-child(1) { animation-delay: 0s; }
.comet:nth-child(2) { animation-delay: 2s; }
.comet:nth-child(3) { animation-delay: 4s; }

@keyframes comet-move {
    0% {
        transform: translate(-100px, -100px) rotate(45deg);
        opacity: 0;
    }
    10% { opacity: 1; }
    100% {
        transform: translate(1200px, 800px) rotate(45deg);
        opacity: 0;
    }
}

/* ========================
   SATELLITES
   ======================== */
.satellite {
    position: absolute;
    width: 60px;
    height: 20px;
    background: silver;
    border-radius: 5px;
    animation: satellite-move 20s linear infinite;
}

@keyframes satellite-move {
    0% { transform: translate(-200px, 100px) rotate(0deg); }
    100% { transform: translate(1200px, 300px) rotate(360deg); }
}

/* ========================
   NEBULA CLOUDS
   ======================== */
.nebula {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle at 30% 30%, rgba(100,0,255,0.3), transparent);
    border-radius: 50%;
    animation: nebula-pulse 12s ease-in-out infinite;
}

.nebula:nth-child(1) { top: 20%; left: 10%; }
.nebula:nth-child(2) { top: 60%; left: 70%; background: radial-gradient(circle at 30% 30%, rgba(0,255,200,0.3), transparent); }

@keyframes nebula-pulse {
    0% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 0.9; }
    100% { transform: scale(1); opacity: 0.6; }
}

/* ========================
   ASTEROIDS
   ======================== */
.asteroid {
    position: absolute;
    width: 20px;
    height: 20px;
    background: gray;
    border-radius: 50%;
    animation: asteroid-drift 10s linear infinite;
}

.asteroid:nth-child(1) { top: 30%; left: 0; animation-delay: 0s; }
.asteroid:nth-child(2) { top: 50%; left: -50px; animation-delay: 3s; }
.asteroid:nth-child(3) { top: 80%; left: -100px; animation-delay: 5s; }

@keyframes asteroid-drift {
    0% { transform: translate(0,0) rotate(0deg); }
    100% { transform: translate(800px, 600px) rotate(360deg); }
}

/* ========================
   STAR CLUSTERS
   ======================== */
.star-cluster {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: star-twinkle 2s infinite alternate;
}

.star-cluster:nth-child(1) { top: 40%; left: 20%; animation-delay: 0s; }
.star-cluster:nth-child(2) { top: 60%; left: 50%; animation-delay: 1s; }
.star-cluster:nth-child(3) { top: 80%; left: 80%; animation-delay: 2s; }

@keyframes star-twinkle {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* ========================
   UFO
   ======================== */
.ufo {
    position: absolute;
    width: 80px;
    height: 40px;
    background: radial-gradient(circle, #ccc, #666);
    border-radius: 50% 50% 40% 40%;
    animation: ufo-fly 15s linear infinite;
}

@keyframes ufo-fly {
    0% { transform: translateX(-200px) translateY(100px); }
    50% { transform: translateX(800px) translateY(150px); }
    100% { transform: translateX(-200px) translateY(100px); }
}

/* ========================
   UFO LIGHT BEAM
   ======================== */
.ufo::after {
    content: "";
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 100px;
    background: radial-gradient(ellipse at center, rgba(255,255,200,0.4), transparent);
    border-radius: 50%;
    animation: beam-pulse 2s ease-in-out infinite;
}

@keyframes beam-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}