/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    background: #000;
    color: white;
    user-select: none;
}

/* Universe container with realistic space background */
.universe {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 25%, #0f0f23 50%, #000000 100%);
    overflow: hidden;
}

/* Dynamic star field */
.stars-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle 4s ease-in-out infinite alternate;
}

.star.small {
    width: 1px;
    height: 1px;
}

.star.medium {
    width: 2px;
    height: 2px;
    box-shadow: 0 0 2px white;
}

.star.large {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 4px white;
}

.star.bright {
    width: 2px;
    height: 2px;
    box-shadow: 0 0 6px #87ceeb, 0 0 12px #87ceeb;
    animation: brightTwinkle 3s ease-in-out infinite alternate;
}

/* Nebula background */
.nebula {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse 800px 400px at 25% 25%, rgba(138, 43, 226, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 600px 300px at 75% 75%, rgba(255, 20, 147, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 400px 600px at 50% 10%, rgba(0, 191, 255, 0.05) 0%, transparent 50%);
    opacity: 0.6;
    animation: nebulaFloat 60s ease-in-out infinite alternate;
}

@keyframes nebulaFloat {
    0% { transform: translateX(-10px) translateY(-5px) scale(1); }
    100% { transform: translateX(10px) translateY(5px) scale(1.05); }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes brightTwinkle {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Solar system container */
.solar-system-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solar-system {
    position: relative;
    width: 1200px;
    height: 1200px;
    transition: all 0.5s ease;
}

/* Orbit rings */
.orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

.mercury-orbit { width: 120px; height: 120px; }
.venus-orbit { width: 180px; height: 180px; }
.earth-orbit { width: 240px; height: 240px; }
.mars-orbit { width: 320px; height: 320px; }
.jupiter-orbit { width: 500px; height: 500px; }
.saturn-orbit { width: 600px; height: 600px; }
.uranus-orbit { width: 720px; height: 720px; }
.neptune-orbit { width: 840px; height: 840px; }

.orbits-hidden .orbit {
    opacity: 0;
}

/* The Sun */
.sun {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffeb3b 0%, #ff9800 30%, #ff6f00 70%, #e65100 100%);
    box-shadow: 
        0 0 30px #ffeb3b,
        0 0 60px #ff9800,
        0 0 90px #ff6f00,
        inset -5px -5px 20px rgba(230, 81, 0, 0.5);
    cursor: pointer;
    z-index: 100;
    animation: sunPulse 4s ease-in-out infinite alternate;
}

.sun-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #fff59d 0%, #ffca28 100%);
    animation: coreRotate 20s linear infinite;
}

.sun-corona {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 140%;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 40%, rgba(255, 235, 59, 0.2) 60%, transparent 80%);
    animation: coronaFlicker 3s ease-in-out infinite alternate;
}

@keyframes sunPulse {
    0% { 
        box-shadow: 0 0 30px #ffeb3b, 0 0 60px #ff9800, 0 0 90px #ff6f00;
        transform: translate(-50%, -50%) scale(1);
    }
    100% { 
        box-shadow: 0 0 40px #ffeb3b, 0 0 80px #ff9800, 0 0 120px #ff6f00;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@keyframes coreRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes coronaFlicker {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

/* Planet containers for orbital motion */
.planet-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
}

/* Individual planet orbital animations */
.mercury-container {
    animation: orbit 8s linear infinite;
    transform: translate(-50%, -50%);
}

.venus-container {
    animation: orbit 12s linear infinite;
    transform: translate(-50%, -50%);
}

.earth-container {
    animation: orbit 16s linear infinite;
    transform: translate(-50%, -50%);
}

.mars-container {
    animation: orbit 24s linear infinite;
    transform: translate(-50%, -50%);
}

.jupiter-container {
    animation: orbit 48s linear infinite;
    transform: translate(-50%, -50%);
}

.saturn-container {
    animation: orbit 60s linear infinite;
    transform: translate(-50%, -50%);
}

.uranus-container {
    animation: orbit 84s linear infinite;
    transform: translate(-50%, -50%);
}

.neptune-container {
    animation: orbit 120s linear infinite;
    transform: translate(-50%, -50%);
}

@keyframes orbit {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Celestial bodies base */
.celestial-body {
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 50%;
    position: relative;
}

.celestial-body:hover {
    transform: scale(1.3);
    z-index: 50;
}

/* Planets */
.planet {
    border-radius: 50%;
    position: relative;
    box-shadow: inset -2px -2px 10px rgba(0, 0, 0, 0.5);
}

/* Mercury */
.mercury {
    width: 8px;
    height: 8px;
    transform: translateX(60px);
}

.mercury-surface {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #d4af37 0%, #b8860b 40%, #8b7355 100%);
    position: relative;
}

/* Venus */
.venus {
    width: 12px;
    height: 12px;
    transform: translateX(90px);
}

.venus-surface {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffcc33 0%, #ff9500 50%, #cc6600 100%);
}

.venus-atmosphere {
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-radius: 50%;
    background: radial-gradient(circle, transparent 60%, rgba(255, 204, 51, 0.3) 80%, rgba(255, 149, 0, 0.2) 100%);
    animation: atmosphereSwirl 8s linear infinite;
}

/* Earth */
.earth {
    width: 14px;
    height: 14px;
    transform: translateX(120px);
}

.earth-surface {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: 
        radial-gradient(circle at 20% 20%, #4a90e2 0%, #2e5c8a 30%),
        radial-gradient(circle at 80% 40%, #228b22 0%, transparent 25%),
        radial-gradient(circle at 30% 80%, #8fbc8f 0%, transparent 30%),
        linear-gradient(45deg, #4a90e2 0%, #1e3a8a 100%);
}

.earth-atmosphere {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-radius: 50%;
    background: radial-gradient(circle, transparent 70%, rgba(173, 216, 230, 0.3) 85%, rgba(135, 206, 235, 0.2) 100%);
}

.clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: 
        radial-gradient(ellipse at 60% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 30%),
        radial-gradient(ellipse at 20% 60%, rgba(255, 255, 255, 0.3) 0%, transparent 25%);
    animation: cloudRotate 12s linear infinite;
}

@keyframes cloudRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Moon */
.moon-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    animation: moonOrbit 4s linear infinite;
}

.moon {
    width: 4px;
    height: 4px;
    transform: translateX(10px);
    background: radial-gradient(circle at 30% 30%, #f5f5dc 0%, #d3d3d3 50%, #a9a9a9 100%);
}

@keyframes moonOrbit {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Mars */
.mars {
    width: 10px;
    height: 10px;
    transform: translateX(160px);
}

.mars-surface {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ff6b35 0%, #cd5c5c 40%, #8b4513 80%, #654321 100%);
}

.mars-atmosphere {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-radius: 50%;
    background: radial-gradient(circle, transparent 80%, rgba(255, 107, 53, 0.2) 100%);
}

.mars-polar-cap {
    position: absolute;
    top: 0;
    left: 30%;
    width: 40%;
    height: 20%;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
}

/* Asteroid Belt */
.asteroid-belt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
}

.asteroid {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #8b7355;
    border-radius: 50%;
    opacity: 0.6;
    animation: asteroidOrbit 40s linear infinite;
}

.asteroid-1 { 
    top: 20%; 
    left: 50%;
    animation-delay: -8s;
}

.asteroid-2 { 
    top: 50%; 
    left: 80%;
    animation-delay: -16s;
}

.asteroid-3 { 
    top: 80%; 
    left: 30%;
    animation-delay: -24s;
}

.asteroid-4 { 
    top: 30%; 
    left: 10%;
    animation-delay: -32s;
}

.asteroid-5 { 
    top: 70%; 
    left: 70%;
    animation-delay: -40s;
}

@keyframes asteroidOrbit {
    from { transform: rotate(0deg) translateX(200px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(200px) rotate(-360deg); }
}

/* Jupiter */
.jupiter {
    width: 32px;
    height: 32px;
    transform: translateX(250px);
}

.jupiter-surface {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: 
        linear-gradient(0deg, #d2691e 0%, #ff8c00 20%, #ffa500 40%, #ff7f50 60%, #ff6347 80%, #d2691e 100%);
}

.jupiter-bands {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: 
        linear-gradient(0deg, 
            transparent 0%, rgba(139, 69, 19, 0.3) 15%, transparent 20%,
            transparent 25%, rgba(160, 82, 45, 0.4) 35%, transparent 40%,
            transparent 45%, rgba(139, 69, 19, 0.3) 55%, transparent 60%,
            transparent 65%, rgba(160, 82, 45, 0.4) 75%, transparent 80%);
    animation: bandRotate 8s linear infinite;
}

.great-red-spot {
    position: absolute;
    top: 60%;
    left: 20%;
    width: 30%;
    height: 15%;
    background: radial-gradient(ellipse, #dc143c 0%, #b22222 70%, transparent 100%);
    border-radius: 50%;
    animation: spotRotate 10s linear infinite;
}

@keyframes bandRotate {
    from { transform: rotateZ(0deg); }
    to { transform: rotateZ(360deg); }
}

@keyframes spotRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Saturn */
.saturn {
    width: 28px;
    height: 28px;
    transform: translateX(300px);
}

.saturn-surface {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffd700 0%, #daa520 30%, #b8860b 70%, #8b7355 100%);
}

.saturn-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
}

.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border-style: solid;
}

.ring-a {
    width: 45px;
    height: 45px;
    border: 1.5px solid rgba(218, 165, 32, 0.6);
}

.ring-b {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(184, 134, 11, 0.5);
}

.ring-c {
    width: 35px;
    height: 35px;
    border: 0.5px solid rgba(139, 115, 85, 0.4);
}

.cassini-division {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border: 1px solid transparent;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

/* Uranus */
.uranus {
    width: 18px;
    height: 18px;
    transform: translateX(360px);
}

.uranus-surface {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #4fd0e7 0%, #3f9fbf 40%, #2e7d9a 80%, #1e5f74 100%);
    animation: uranusRotate 17s linear infinite;
}

.uranus-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 25px;
    height: 25px;
    border: 1px solid rgba(79, 208, 231, 0.3);
    border-radius: 50%;
}

@keyframes uranusRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Neptune */
.neptune {
    width: 16px;
    height: 16px;
    transform: translateX(420px);
}

.neptune-surface {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #4169e1 0%, #0000cd 40%, #000080 80%, #191970 100%);
    animation: neptuneRotate 16s linear infinite;
}

.neptune-atmosphere {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-radius: 50%;
    background: radial-gradient(circle, transparent 80%, rgba(65, 105, 225, 0.3) 100%);
    animation: atmosphereSwirl 12s linear infinite;
}

.great-dark-spot {
    position: absolute;
    top: 40%;
    left: 30%;
    width: 25%;
    height: 20%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    animation: darkSpotMove 20s linear infinite;
}

@keyframes neptuneRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes atmosphereSwirl {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes darkSpotMove {
    from { transform: rotate(0deg) translateX(2px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(2px) rotate(-360deg); }
}

/* Control Panel */
.control-panel {
    position: fixed;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 20px;
    min-width: 280px;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.control-header h2 {
    color: #ffeb3b;
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 235, 59, 0.5);
}

.control-group {
    margin-bottom: 15px;
}

.control-group label {
    display: block;
    color: #e0e0e0;
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 500;
}

.control-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.control-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.control-btn.primary {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    border-color: #4CAF50;
}

.control-btn.primary:hover {
    background: linear-gradient(135deg, #5CBF60 0%, #55b059 100%);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.control-btn.secondary {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    border-color: #2196F3;
}

.control-btn.secondary:hover {
    background: linear-gradient(135deg, #42A5F5 0%, #2986D2 100%);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.btn-icon {
    font-size: 16px;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

#speedSlider {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    border: none;
    cursor: pointer;
}

#speedSlider::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #ffeb3b 0%, #ff9800 100%);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(255, 235, 59, 0.3);
    -webkit-appearance: none;
}

#speedSlider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #ffeb3b 0%, #ff9800 100%);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(255, 235, 59, 0.3);
}

.speed-display {
    background: rgba(255, 235, 59, 0.1);
    color: #ffeb3b;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    min-width: 40px;
    text-align: center;
    border: 1px solid rgba(255, 235, 59, 0.3);
}

.control-select {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.control-select option {
    background: #1a1a1a;
    color: white;
}

/* Info Panel */
.info-panel {
    position: fixed;
    bottom: 20px;
    left: 20px;
    max-width: 350px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 999;
}

.info-panel.show {
    opacity: 1;
    transform: translateY(0);
}

.info-header {
    background: linear-gradient(135deg, rgba(255, 235, 59, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
    padding: 15px 20px;
    border-radius: 15px 15px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-header h3 {
    color: #ffeb3b;
    font-size: 18px;
    margin: 0;
    text-shadow: 0 0 10px rgba(255, 235, 59, 0.3);
}

.close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.info-content {
    padding: 20px;
}

.info-content p {
    color: #e0e0e0;
    line-height: 1.6;
    font-size: 14px;
    margin: 0;
}

/* Legend */
.legend {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 20px;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.legend h3 {
    color: #ffeb3b;
    font-size: 16px;
    margin-bottom: 15px;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 235, 59, 0.5);
}

.legend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #e0e0e0;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Legend colors */
.sun-color { background: radial-gradient(circle, #ffeb3b 0%, #ff9800 100%); }
.mercury-color { background: radial-gradient(circle, #d4af37 0%, #b8860b 100%); }
.venus-color { background: radial-gradient(circle, #ffcc33 0%, #ff9500 100%); }
.earth-color { background: radial-gradient(circle, #4a90e2 0%, #228b22 100%); }
.mars-color { background: radial-gradient(circle, #ff6b35 0%, #cd5c5c 100%); }
.jupiter-color { background: radial-gradient(circle, #d2691e 0%, #ff8c00 100%); }
.saturn-color { background: radial-gradient(circle, #ffd700 0%, #daa520 100%); }
.uranus-color { background: radial-gradient(circle, #4fd0e7 0%, #3f9fbf 100%); }
.neptune-color { background: radial-gradient(circle, #4169e1 0%, #0000cd 100%); }

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #1a1a2e 0%, #000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.5s ease;
}

.loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    text-align: center;
    color: white;
}

.loading-sun {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #ffeb3b 0%, #ff9800 100%);
    border-radius: 50%;
    margin: 0 auto 20px;
    box-shadow: 0 0 40px #ffeb3b;
    animation: loadingPulse 2s ease-in-out infinite alternate;
}

@keyframes loadingPulse {
    0% { 
        transform: scale(1);
        box-shadow: 0 0 40px #ffeb3b;
    }
    100% { 
        transform: scale(1.1);
        box-shadow: 0 0 60px #ffeb3b, 0 0 100px #ff9800;
    }
}

.loading-content h2 {
    font-size: 24px;
    margin-bottom: 30px;
    color: #ffeb3b;
    text-shadow: 0 0 20px rgba(255, 235, 59, 0.5);
}

.loading-bar {
    width: 300px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto;
}

.loading-progress {
    height: 100%;
    background: linear-gradient(90deg, #ffeb3b 0%, #ff9800 100%);
    border-radius: 2px;
    animation: loadingProgress 3s ease-in-out forwards;
    transform: translateX(-100%);
}

@keyframes loadingProgress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

/* Animation states */
.paused * {
    animation-play-state: paused !important;
}

/* View modes */
.inner-planets-view {
    transform: scale(2);
}

.outer-planets-view {
    transform: scale(0.7);
}

.realistic-scale-view {
    transform: scale(0.5);
}

.realistic-scale-view .sun {
    width: 100px;
    height: 100px;
}

.realistic-scale-view .jupiter {
    width: 60px;
    height: 60px;
}

.realistic-scale-view .saturn {
    width: 50px;
    height: 50px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .solar-system {
        width: 800px;
        height: 800px;
    }
    
    .control-panel, .legend {
        font-size: 12px;
        padding: 15px;
        min-width: 220px;
    }
    
    .info-panel {
        max-width: 280px;
    }
}

@media (max-width: 768px) {
    .solar-system {
        width: 600px;
        height: 600px;
    }
    
    .mercury-container { transform: translate(-50%, -50%); }
    .venus-container { transform: translate(-50%, -50%); }
    .earth-container { transform: translate(-50%, -50%); }
    .mars-container { transform: translate(-50%, -50%); }
    .jupiter-container { transform: translate(-50%, -50%); }
    .saturn-container { transform: translate(-50%, -50%); }
    .uranus-container { transform: translate(-50%, -50%); }
    .neptune-container { transform: translate(-50%, -50%); }
    
    .mercury { transform: translateX(45px); }
    .venus { transform: translateX(68px); }
    .earth { transform: translateX(90px); }
    .mars { transform: translateX(120px); }
    .jupiter { transform: translateX(188px); }
    .saturn { transform: translateX(225px); }
    .uranus { transform: translateX(270px); }
    .neptune { transform: translateX(315px); }
    
    .mercury-orbit { width: 90px; height: 90px; }
    .venus-orbit { width: 135px; height: 135px; }
    .earth-orbit { width: 180px; height: 180px; }
    .mars-orbit { width: 240px; height: 240px; }
    .jupiter-orbit { width: 375px; height: 375px; }
    .saturn-orbit { width: 450px; height: 450px; }
    .uranus-orbit { width: 540px; height: 540px; }
    .neptune-orbit { width: 630px; height: 630px; }
    
    .control-panel {
        top: 10px;
        left: 10px;
        min-width: 200px;
    }
    
    .legend {
        top: 10px;
        right: 10px;
    }
    
    .info-panel {
        bottom: 10px;
        left: 10px;
        max-width: 250px;
    }
}

@media (max-width: 480px) {
    .solar-system {
        width: 400px;
        height: 400px;
    }
    
    .mercury { transform: translateX(30px); }
    .venus { transform: translateX(45px); }
    .earth { transform: translateX(60px); }
    .mars { transform: translateX(80px); }
    .jupiter { transform: translateX(125px); }
    .saturn { transform: translateX(150px); }
    .uranus { transform: translateX(180px); }
    .neptune { transform: translateX(210px); }
    
    .mercury-orbit { width: 60px; height: 60px; }
    .venus-orbit { width: 90px; height: 90px; }
    .earth-orbit { width: 120px; height: 120px; }
    .mars-orbit { width: 160px; height: 160px; }
    .jupiter-orbit { width: 250px; height: 250px; }
    .saturn-orbit { width: 300px; height: 300px; }
    .uranus-orbit { width: 360px; height: 360px; }
    .neptune-orbit { width: 420px; height: 420px; }
    
    .legend-grid {
        grid-template-columns: 1fr;
    }
}