/* --- Imports and Variables --- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Roboto:wght@300;400&display=swap');

:root {
    --sci-fi-blue: #00ffff;
    --sci-fi-purple: #a0a0ff;
    --dark-space: #050515;
    --darker-space: #000005;
    --sun-color: #ffcc00;
    --sun-glow-color: rgba(255, 204, 0, 0.5);
    /* Added */
    --alien-green: #30ff30;
    --signal-red: #ff3030; /* Define red for signal */

    /* Orbit Durations */
    --mercury-orbit-dur: 8.8s;
    --venus-orbit-dur: 22.5s;
    --earth-orbit-dur: 36.5s;
    --mars-orbit-dur: 68.7s;
    --jupiter-orbit-dur: 120s;
    --saturn-orbit-dur: 295s;
    --uranus-orbit-dur: 840s;
    --neptune-orbit-dur: 1650s;
    --pluto-orbit-dur: 2480s;
}

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

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--dark-space);
    background-image: radial-gradient(ellipse at bottom, var(--dark-space) 0%, var(--darker-space) 100%);
    color: #f0f0f0;
    min-height: 100vh;
    position: relative;

    /* --- Mobile First Layout (Default) --- */
    display: grid;
    grid-template-rows: 1fr; /* Single row for content */
    grid-template-columns: 100%;
    padding: 5px; /* Padding for mobile */
}

h1, h2, h3, .close-button, #info-data-list span, .performance-warning, .console pre /* Updated */ {
    font-family: 'Orbitron', Consolas, 'Courier New', monospace; /* Add fallbacks */
}

/* --- Background Elements --- */
#background-stars { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.star { position: absolute; width: 1px; height: 1px; background-color: white; border-radius: 50%; box-shadow: 0 0 5px white; animation: twinkle 3s infinite alternate ease-in-out; }
.star.medium { width: 2px; height: 2px; animation-duration: 4s; }
.star.large { width: 3px; height: 3px; animation-duration: 5s; }
@keyframes twinkle { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } }

/* Comet/Asteroid/Shooting Star styles REMOVED */


/* --- Keyframes --- */
@keyframes sunPulse { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 1; transform: scale(1.1); } }
@keyframes orbit { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes moonOrbit { from { transform: rotate(0deg) translateX(var(--moon-orbit-radius)) rotate(0deg); } to { transform: rotate(360deg) translateX(var(--moon-orbit-radius)) rotate(-360deg); } }

/* Blinking cursor animation - Keep for potential future use if needed elsewhere */
@keyframes blinkCursor {
    from, to { border-color: transparent; }
    50% { border-color: var(--alien-green); } /* Use green */
}

/* Ship's distress signal pulse animation */
@keyframes pulseSignal {
    0%, 100% { box-shadow: 0 0 8px 3px rgba(255, 50, 50, 0.4); opacity: 0.8; } /* Use var(--signal-red) components */
    50% { box-shadow: 0 0 20px 8px rgba(255, 50, 50, 0.8); opacity: 1; }
}

/* Scan line animation */
@keyframes scanlines {
    0% { background-position: 0 0; }
    100% { background-position: 0 10px; } /* Adjust vertical shift */
}


/* --- Header --- */
#main-header {
    /* --- Mobile First: Hidden by Default --- */
    display: none;
    /* Other styles kept for when it appears on desktop */
    text-align: center;
    padding: 5px 0 10px 0; /* Mobile padding */
    position: relative;
    z-index: 10;
    width: 100%;
}
#main-header h1 { color: var(--sci-fi-blue); text-shadow: 0 0 8px var(--sci-fi-blue); margin-bottom: 5px; font-size: 1.4em; /* Mobile font size */ }
.performance-warning { font-size: 0.7em; color: #ffcc00; opacity: 0.8;}


/* --- Solar System Container --- */
#solar-system {
    /* --- Mobile First: Full Width --- */
    grid-row: 1 / -1; /* Span the single row */
    grid-column: 1 / -1; /* Span the single column */
    align-self: center; /* Vertically center */
    justify-self: center; /* Horizontally center */

    position: relative;
    width: 100%; /* Use full available width */
    max-width: 100%;
    height: auto; /* Height determined by aspect ratio */
    max-height: 95vh; /* Prevent vertical overflow */
    aspect-ratio: 1 / 1;
    min-width: 0; /* Override potential min-width from previous attempt */
    transition: opacity 0.5s ease;
    /* border: 1px dashed cyan; */ /* Mobile debug */
}

/* --- Sun Styling --- */
.sun { /* Also the interactive element */
    position: absolute; top: 50%; left: 50%;
    width: 8%; height: 8%;
    background: radial-gradient(ellipse at center, #fff2a8 0%, var(--sun-color) 60%, #e65c00 100%);
    border-radius: 50%;
    box-shadow: 0 0 40px 10px var(--sun-glow-color), inset 0 0 10px #ff8c00;
    transform: translate(-50%, -50%);
    z-index: 5; /* Above orbits, below hovered planets */
    cursor: pointer;
    transition: transform 0.3s ease;
}
.sun:hover { transform: translate(-50%, -50%) scale(1.1); }
.sun-glow {
    position: absolute; top: -10%; left: -10%; width: 120%; height: 120%;
    background: radial-gradient(ellipse at center, transparent 50%, var(--sun-glow-color) 70%, transparent 80%);
    border-radius: 50%; animation: sunPulse 4s infinite alternate ease-in-out; z-index: -1;
}


/* --- Orbit Path Styling --- */
.orbit-path {
    position: absolute; top: 50%; left: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    pointer-events: none; /* Orbits don't block clicks */
    z-index: 1; /* Below planets */
    /* Animation applied via ID */
}
/* Orbit Sizes & Animation */
#mercury-orbit { width: 18%; height: 18%; animation: orbit var(--mercury-orbit-dur) linear infinite; }
#venus-orbit   { width: 28%; height: 28%; animation: orbit var(--venus-orbit-dur) linear infinite; }
#earth-orbit   { width: 40%; height: 40%; animation: orbit var(--earth-orbit-dur) linear infinite; }
#mars-orbit    { width: 55%; height: 55%; animation: orbit var(--mars-orbit-dur) linear infinite; }
#jupiter-orbit { width: 75%; height: 75%; animation: orbit var(--jupiter-orbit-dur) linear infinite; }
#saturn-orbit  { width: 90%; height: 90%; animation: orbit var(--saturn-orbit-dur) linear infinite; }
#uranus-orbit  { width: 105%; height: 105%; animation: orbit var(--uranus-orbit-dur) linear infinite; }
#neptune-orbit { width: 120%; height: 120%; animation: orbit var(--neptune-orbit-dur) linear infinite; }
#pluto-orbit   { width: 135%; height: 135%; animation: orbit var(--pluto-orbit-dur) linear infinite; border-style: dashed; }


/* --- Planet Container (Interactive Element) --- */
.planet-container {
    position: absolute; top: 0; left: 50%;
    width: auto; height: auto; /* Size determined by .planet inside */
    transform: translate(-50%, -50%); /* Center container on orbit path point */
    pointer-events: auto; /* This is clickable */
    z-index: 3; /* Above orbits, below header/panel */
    cursor: pointer;
    border-radius: 50%; /* Make hover area round */
    transition: transform 0.3s ease; /* Transition for potential future container transforms */
}

/* --- Planet Visual Element --- */
.planet {
    position: relative; /* For aspect ratio hack and moons */
    border-radius: 50%;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.5), 0 0 5px rgba(255,255,255,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* For hover effect */
    /* Not interactive directly */
    pointer-events: none;
}
.planet::before { /* Aspect ratio hack */
    content: ''; display: block; padding-top: 100%;
}

/* --- Mobile Planet Sizes --- */
#mercury { width: 10px; background-color: #a9a9a9; color: #a9a9a9; }
#venus   { width: 18px; background-color: #e6d3a8; color: #e6d3a8; }
#earth   { width: 20px; background: linear-gradient(135deg, #4682b4, #2e8b57, #f0e68c); color: #4682b4; }
#mars    { width: 15px; background-color: #c1440e; color: #c1440e; }
#jupiter { width: 35px; background: linear-gradient(45deg, #d8ca9d, #a0785a, #c68e74); color: #d8ca9d; }
#saturn  { width: 30px; background-color: #f4d0a0; color: #f4d0a0; }
#uranus  { width: 25px; background-color: #afeeee; color: #afeeee; }
#neptune { width: 23px; background-color: #3f51b5; color: #3f51b5; }
#pluto   { width: 8px; background-color: #d2b48c; color: #d2b48c; }

/* Hover effect applied to container, targets planet */
.planet-container:hover { z-index: 11; /* Above header/panel when hovered */ }
.planet-container:hover .planet {
     transform: scale(1.6);
     box-shadow: inset 0 0 10px rgba(0,0,0,0.4), 0 0 15px 3px currentColor;
}

/* --- Saturn's Ring --- */
#saturn .ring {
    position: absolute; top: 50%; left: 50%; width: 200%; height: 200%;
    border: 2px solid rgba(244, 208, 160, 0.7); border-radius: 50%;
    transform: translate(-50%, -50%) rotateX(70deg) rotateZ(-10deg);
    box-shadow: 0 0 8px rgba(244, 208, 160, 0.5); pointer-events: none; z-index: -1;
    transition: transform 0.6s ease, opacity 0.5s ease;
}

/* --- Moon Styling --- */
.moon {
    position: absolute; background-color: #cccccc; border-radius: 50%;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.6); display: none; /* Hidden by default */
    z-index: 105; /* Above zoomed planet */ transform-origin: center center;
    width: 15%; height: 15%;
}
.moon.small { width: 10%; height: 10%; }
.moon.large { width: 25%; height: 25%; }
.moon.irregular { border-radius: 40% 60%; }
#earth-moon { background-color: #e0e0e0; width: 25%; height: 25%;}
#phobos { background-color: #aaa; width: 10%; height: 7%;}
#deimos { background-color: #bbb; width: 8%; height: 8%; }
#titan { background-color: #f5ad7a; width: 30%; height: 30%;}
#charon { background-color: #c1a796; width: 50%; height: 50%;}


/* --- Zoomed-in State --- */
body.zoomed-in #main-header { opacity: 0; transform: translateY(-30px); pointer-events: none; }
body.zoomed-in #solar-system { opacity: 0.3; pointer-events: none; }

body.zoomed-in .active-planet-container { z-index: 100; }

/* Mobile Zoomed Planet Size */
body.zoomed-in .active-planet {
    position: fixed; top: 50%; left: 50%;
    width: clamp(120px, 60vmin, 280px);
    transform: translate(-50%, -50%) scale(1);
    z-index: 101; cursor: default;
    box-shadow: 0 0 60px 20px currentColor;
}
body.zoomed-in .active-planet::before { content: ''; display: block; padding-top: 100%; }
body.zoomed-in #saturn.active-planet .ring {
    opacity: 1; width: 200%; height: 200%;
    border-width: clamp(2px, 1vmin, 5px); z-index: 102;
}
body.zoomed-in .active-planet .moon {
    display: block; position: absolute; top: 50%; left: 50%;
     margin-left: calc(var(--moon-width, 0px) / -2);
     margin-top: calc(var(--moon-height, 0px) / -2);
}


/* --- Sci-Fi Info Panel Styling --- */
/* Mobile Info Panel Size */
.info-panel {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 90%; /* Wider on mobile */
    max-width: 450px; /* Max width constraint */
    max-height: 75vh; /* Mobile height */
    background: linear-gradient(145deg, rgba(10, 10, 30, 0.85), rgba(20, 20, 50, 0.95));
    border: 1px solid var(--sci-fi-blue); border-radius: 8px;
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.3), inset 0 0 10px rgba(0, 255, 255, 0.2);
    color: #e0e0e0; backdrop-filter: blur(5px); z-index: 200;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 1; display: flex; flex-direction: column; overflow: hidden;
}
.info-panel.hidden {
    opacity: 0; transform: translate(-50%, -50%) scale(0.8); pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.info-header { display: flex; justify-content: space-between; align-items: center; background-color: rgba(0, 255, 255, 0.1); padding: 10px 15px; border-bottom: 1px solid var(--sci-fi-blue); }
.info-header h2 { color: var(--sci-fi-blue); font-size: 1.2em; margin: 0; text-shadow: 0 0 5px var(--sci-fi-blue); }
.close-button { background: none; border: 1px solid transparent; color: var(--sci-fi-blue); font-size: 1.8em; line-height: 1; cursor: pointer; padding: 0 5px; transition: color 0.3s, text-shadow 0.3s, border-color 0.3s; }
.close-button:hover { color: white; text-shadow: 0 0 8px white; border: 1px solid var(--sci-fi-blue); }
.info-content { padding: 15px; overflow-y: auto; flex-grow: 1; }
.info-section { margin-bottom: 20px; border-left: 3px solid var(--sci-fi-purple); padding-left: 10px; }
.info-section h3 { color: var(--sci-fi-purple); font-size: 0.9em; margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; }
#info-fact { font-size: 0.95em; line-height: 1.6; color: #f0f0f0; }
#info-data-list { list-style: none; padding: 0; font-size: 0.9em; line-height: 1.7; }
#info-data-list li { margin-bottom: 5px; }
#info-data-list span { color: var(--sci-fi-blue); margin-right: 8px; display: inline-block; width: 110px; }
#info-moon-list { list-style: none; padding-left: 5px; font-size: 0.9em; line-height: 1.6; color: #f0f0f0; }
#info-moon-list li { margin-bottom: 8px; }
#info-moon-list li strong { color: var(--sci-fi-purple); margin-right: 5px; display: inline-block; }


/* --- Easter Egg: Ship Styling --- */
.ship {
    position: fixed;
    width: 30px;
    height: 15px;
    background-color: #777;
    border-top-left-radius: 50% 30%; border-top-right-radius: 50% 30%;
    border-bottom-left-radius: 30% 50%; border-bottom-right-radius: 30% 50%;
    border: 1px solid #aaa;
    z-index: 50; cursor: pointer; transition: opacity 0.5s ease;
    animation: pulseSignal 1.5s infinite ease-in-out;
    opacity: 0; pointer-events: none; /* Start hidden */
}
.ship.hidden {
    opacity: 0 !important; pointer-events: none !important;
    animation-play-state: paused;
}
.ship:not(.hidden) {
    opacity: 1; pointer-events: auto; animation-play-state: running;
}


/* --- Easter Egg: Console Styling --- REFINED */
/* --- Easter Egg: Console Styling --- REFINED */
.console {
    position: fixed; /* <<< CRUCIAL: Must be fixed */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Standard centering */
    width: clamp(320px, 85vw, 650px);
    max-height: 80vh;
    background-color: #060706;
    border: 3px solid var(--alien-green);
    box-shadow: 0 0 20px 3px rgba(50, 255, 50, 0.35), inset 0 0 15px rgba(50, 255, 50, 0.25);
    color: var(--alien-green);
    padding: 25px;
    z-index: 300; /* High z-index */
    overflow-y: auto;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: relative; /* For pseudo-element */
}
/* Scanline Overlay */
.console::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient( rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50% );
    background-size: 100% 6px;
    z-index: 1; pointer-events: none;
    opacity: 0.2;
}
.console.hidden {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    pointer-events: none;
}
.console pre {
    white-space: pre-wrap; word-wrap: break-word;
    font-size: 0.95em; line-height: 1.7; margin: 0;
    text-shadow: 0 0 4px rgba(50, 255, 50, 0.5);
    position: relative; z-index: 2; /* Text above scanlines */
}
/* NO blinking cursor rule for console text */


/* --- Desktop Layout --- */
@media (min-width: 768px) {
    body { grid-template-rows: auto 1fr; padding: 10px; }
    #main-header { display: block; grid-row: 1 / 2; grid-column: 1 / 2; padding: 10px 0 20px 0; }
    #main-header h1 { font-size: 1.8em; }
    #solar-system { grid-row: 2 / 3; grid-column: 1 / 2; width: auto; height: auto; max-width: 90%; max-height: 90%; min-width: 30%; aspect-ratio: 1 / 1; }
    #jupiter { width: 40px; } #saturn { width: 35px; } #uranus { width: 30px; } #neptune { width: 28px; }
    body.zoomed-in .active-planet { width: clamp(200px, 35vmin, 400px); }
    .info-panel { width: clamp(400px, 40vw, 550px); max-height: 80vh; }
}

/* Optional: Specific styles for very large screens */
@media (min-width: 1200px) {
    #solar-system { max-width: 85%; max-height: 85%; }
    #main-header h1 { font-size: 2em; }
}