/* --- CORE SETUP --- */
:root {
    --neon-blue: #00f3ff;
    --neon-red: #ff003c;
    --metal-light: #e0e0e0;
    --metal-dark: #2c3e50;
    --font-tech: 'Courier New', Courier, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    color: #fff;
    font-family: var(--font-tech);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* --- OVERLAYS --- */
#scanlines {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.2) 50%);
    background-size: 100% 4px; pointer-events: none; z-index: 5;
}
#vignette {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 50%, black 100%);
    pointer-events: none; z-index: 4;
}

/* --- LOADER --- */
#loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.loader-content { width: 250px; text-align: center; }
.glitch-text { margin-bottom: 10px; color: var(--neon-blue); font-weight: bold; }
.bar-container { width: 100%; height: 2px; background: #333; margin-top: 10px; }
.bar-fill { width: 0%; height: 100%; background: var(--neon-blue); transition: width 0.5s; }

/* --- NAV --- */
.hud-nav {
    position: fixed; top: 0; left: 0; width: 100%; padding: 15px 30px;
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(0,0,0,0.6); z-index: 100; border-bottom: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
}
.brand { font-weight: 900; letter-spacing: 1px; font-size: 1.2rem; }
.highlight { color: var(--neon-red); }
.hud-nav ul { display: flex; gap: 25px; list-style: none; }
.hud-nav li { font-size: 0.8rem; color: #aaa; cursor: pointer; transition: 0.3s; }
.hud-nav li:hover { color: var(--neon-blue); text-shadow: 0 0 5px var(--neon-blue); }

/* --- FOOTER (CLEAR & VISIBLE) --- */
.hud-footer {
    position: fixed; bottom: 0; left: 0; width: 100%;
    padding: 15px 0;
    /* Solid Black Background for best readability */
    background: #000000; 
    border-top: 2px solid var(--neon-blue);
    z-index: 100;
    text-align: center;
    /* Slightly larger, clear font */
    font-size: 0.85rem; 
    letter-spacing: 1.5px;
    font-weight: bold;
    color: #ffffff;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.8);
}
.email-link { 
    color: var(--neon-blue); 
    text-decoration: none; 
    font-weight: bold;
    margin-left: 5px; 
}
.email-link:hover { text-decoration: underline; }
.separator { margin: 0 10px; color: #777; }


/* --- SECTIONS --- */
#world { position: relative; width: 100%; height: 100%; }
section {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 0.5s;
    padding-top: 60px;
    overflow: hidden;
}
section.active-section { opacity: 1; pointer-events: auto; z-index: 10; }

/* =========================================
   CELESTIAL BODIES (ROTATING)
========================================= */
.celestial-body { position: absolute; border-radius: 50%; z-index: 15; }

/* MOON */
.moon {
    width: 180px; height: 180px; left: 5%; top: 20%;
    background-color: #c2c5cc; overflow: hidden;
    box-shadow: inset -25px 0px 30px rgba(0,0,0,0.7), inset 5px 5px 15px rgba(255,255,255,0.8), 0 0 25px rgba(200, 200, 255, 0.2);
}
.moon::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; border-radius: 50%;
    background-image: 
        radial-gradient(circle at 60% 40%, transparent 50%, rgba(0,0,0,0.15) 51%),
        radial-gradient(circle at 30% 70%, transparent 50%, rgba(0,0,0,0.15) 51%),
        radial-gradient(circle at 50% 50%, rgba(0,0,0,0.05) 10%, transparent 20%);
    background-size: 40px 40px, 60px 60px, 100px 100px;
    animation: moonSpin 60s linear infinite; 
}

/* SUN */
.sun {
    width: 200px; height: 200px; right: 5%; top: 15%;
    background: radial-gradient(circle, #fff373 10%, #ffc000 50%, #ff4500 90%);
    box-shadow: 0 0 60px #ff8c00, 0 0 150px rgba(255, 69, 0, 0.8), inset 0 0 30px rgba(255, 255, 0, 0.8);
    animation: sunPulse 3s infinite alternate, sunSpin 120s linear infinite;
}

@keyframes moonSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sunSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sunPulse { 0% { box-shadow: 0 0 60px #ff8c00, 0 0 150px rgba(255, 69, 0, 0.8); } 100% { box-shadow: 0 0 80px #ff8c00, 0 0 180px rgba(255, 69, 0, 0.9); } }


/* --- HERO: MISSILE LAUNCHPAD --- */
.launch-pad-container {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    position: relative; padding-bottom: 30px;
}

/* --- THE 3D MISSILE --- */
.missile-assembly {
    position: relative; width: 60px; height: 60%;
    display: flex; flex-direction: column; align-items: center; z-index: 20; 
    animation: rumble 0.2s infinite;
}
.warhead {
    width: 60px; height: 80px; background: linear-gradient(90deg, #444, #888, #444);
    border-radius: 50% 50% 0 0; position: relative; box-shadow: inset -5px 0 10px rgba(0,0,0,0.5);
}
/* Red light removed here */

.missile-body {
    width: 60px; flex-grow: 1; background: linear-gradient(90deg, #999, #fff, #999);
    position: relative; display: flex; justify-content: center; align-items: center;
    border-left: 1px solid #666; border-right: 1px solid #666;
}
.missile-text {
    writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
    font-weight: 900; letter-spacing: 2px; /* Decreased spacing slightly */
    color: #111; /* Dark text for visibility */
    font-size: 0.9rem; /* Smaller size to fit long text */
    white-space: nowrap; opacity: 1;
}
.fin {
    position: absolute; bottom: 40px; width: 40px; height: 80px;
    background: linear-gradient(to bottom, #555, #333); z-index: -1;
}
.left-fin { left: -30px; border-radius: 100% 0 0 10px; transform: skewY(20deg); }
.right-fin { right: -30px; border-radius: 0 100% 10px 0; transform: skewY(-20deg); }
.thruster-nozzle {
    width: 50px; height: 20px; background: #222; border-radius: 0 0 10px 10px; margin-bottom: -5px;
}
.fire-exhaust {
    position: relative; width: 40px; height: 100px; display: flex; justify-content: center;
}
.flame {
    position: absolute; top: 0; border-radius: 50%; filter: blur(5px); animation: thrust 0.1s infinite alternate;
}
.red { width: 40px; height: 80px; background: #ff0000; z-index: 1; opacity: 0.8; }
.orange { width: 30px; height: 60px; background: #ffaa00; z-index: 2; top: 10px; animation-duration: 0.15s; }
.yellow { width: 20px; height: 40px; background: #ffff00; z-index: 3; top: 15px; animation-duration: 0.08s; box-shadow: 0 0 20px #ffff00; }
.smoke {
    position: absolute; top: 50px; width: 100px; height: 100px;
    background: radial-gradient(circle, rgba(255,255,255,0.2), transparent); filter: blur(10px); animation: smokeRise 1s infinite;
}

/* --- BOTTOM STATUS (CLEAN) --- */
.launch-status {
    width: 100%; text-align: center;
    position: absolute; bottom: 70px; /* Shifted up to clear footer */
    z-index: 30;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    padding: 20px 0;
}
.simple-countdown { display: inline-block; }
.timer-flex { display: flex; gap: 20px; justify-content: center; align-items: center; }
.time-box span { font-size: 2.5rem; font-weight: bold; color: #fff; line-height: 1; text-shadow: 0 0 10px var(--neon-blue); }
.time-box label { font-size: 0.8rem; color: #aaa; display: block; margin-top: 5px; }
.sep { font-size: 2rem; color: #666; margin-top: -15px; animation: blink 1s infinite; }


/* --- OTHER PANELS --- */
.glass-panel, .uplink-terminal {
    width: 90%; max-width: 600px; background: rgba(20,20,20,0.95);
    border: 1px solid #333; padding: 20px; border-left: 3px solid var(--neon-blue);
}
.panel-header { margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 10px; }
.skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.skill-card { background: #111; padding: 10px; text-align: center; font-size: 0.8rem; border: 1px solid #333; }
input, textarea { width: 100%; background: #000; border: 1px solid #444; color: #fff; padding: 10px; margin-bottom: 15px; font-family: inherit; }
.cy-btn { width: 100%; padding: 12px; background: var(--neon-blue); border: none; color: #000; font-weight: bold; cursor: pointer; }

/* --- ANIMATIONS --- */
@keyframes rumble { 0% { transform: translate(1px, 1px); } 20% { transform: translate(-1px, -1px); } 100% { transform: translate(0, 0); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes thrust { 0% { transform: scaleY(1); opacity: 0.9; } 100% { transform: scaleY(1.2); opacity: 1; } }

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .hud-nav { padding: 10px; flex-direction: column; gap: 10px; background: #000; }
    .hud-nav ul { gap: 15px; font-size: 0.7rem; }
    
    .moon { width: 100px; height: 100px; top: 15%; left: 2%; }
    .sun { width: 120px; height: 120px; top: 10%; right: 2%; }

    .missile-assembly { width: 50px; height: 55%; }
    .missile-text { font-size: 0.8rem; letter-spacing: 1px; }
    
    .timer-flex { gap: 10px; }
    .time-box span { font-size: 1.8rem; }
    .sep { font-size: 1.5rem; }
    
    .glass-panel, .uplink-terminal { width: 95%; padding: 15px; }
    .skill-grid { grid-template-columns: 2fr; }
    
    .hud-footer { font-size: 0.6rem; padding: 10px 0; }
    .launch-status { bottom: 60px; }
}