:root {
    --sun-size: 80px;
    --mercury-size: 10px;
    --venus-size: 15px;
    --earth-size: 16px;
    --mars-size: 12px;
    --jupiter-size: 40px;
    --saturn-size: 35px;
    --uranus-size: 25px;
    --neptune-size: 24px;
    --pluto-size: 8px;

    --mercury-orbit: 120px;
    --venus-orbit: 160px;
    --earth-orbit: 210px;
    --mars-orbit: 260px;
    --jupiter-orbit: 340px;
    --saturn-orbit: 420px;
    --uranus-orbit: 500px;
    --neptune-orbit: 580px;
    --pluto-orbit: 640px;

    --mercury-time: 4s;
    --venus-time: 7s;
    --earth-time: 10s;
    --mars-time: 15s;
    --jupiter-time: 25s;
    --saturn-time: 35s;
    --uranus-time: 50s;
    --neptune-time: 65s;
    --pluto-time: 80s;
}

body {
    margin: 0;
    height: 100vh;
    background-color: #0b0d17;
    background-image:
        radial-gradient(white, rgba(255, 255, 255, .2) 2px, transparent 3px),
        radial-gradient(white, rgba(255, 255, 255, .15) 1px, transparent 2px),
        radial-gradient(white, rgba(255, 255, 255, .1) 2px, transparent 3px);
    background-size: 550px 550px, 350px 350px, 250px 250px;
    background-position: 0 0, 40px 60px, 130px 270px;
    font-family: 'ZCOOL KuaiLe', cursive, sans-serif;
    color: white;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.title {
    position: absolute;
    top: 20px;
    font-size: 2.5rem;
    text-shadow: 0 0 10px #fff, 0 0 20px #ff00de;
    z-index: 10;
    pointer-events: none;
}

.solar-system {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    transform: rotateX(20deg);
    /* Slight tilt for better view */
}

.sun {
    position: absolute;
    width: var(--sun-size);
    height: var(--sun-size);
    background: radial-gradient(circle, #ffd700, #ff8c00);
    border-radius: 50%;
    box-shadow: 0 0 40px #ff8c00, 0 0 80px #ff4500;
    z-index: 10;
}

.orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.planet {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    offset-path: path("M 100 100 m -100, 0 a 100,100 0 1,0 200,0 a 100,100 0 1,0 -200,0");
    /* Fallback or complex path if needed, but simple rotation is easier */
}

/* Using rotation for orbits */
.orbit {
    animation: rotate linear infinite;
}

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

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Specific Orbit Sizes */
.mercury-orbit {
    width: var(--mercury-orbit);
    height: var(--mercury-orbit);
    animation-duration: var(--mercury-time);
    z-index: 9;
}

.venus-orbit {
    width: var(--venus-orbit);
    height: var(--venus-orbit);
    animation-duration: var(--venus-time);
    z-index: 8;
}

.earth-orbit {
    width: var(--earth-orbit);
    height: var(--earth-orbit);
    animation-duration: var(--earth-time);
    z-index: 7;
}

.mars-orbit {
    width: var(--mars-orbit);
    height: var(--mars-orbit);
    animation-duration: var(--mars-time);
    z-index: 6;
}

.jupiter-orbit {
    width: var(--jupiter-orbit);
    height: var(--jupiter-orbit);
    animation-duration: var(--jupiter-time);
    z-index: 5;
}

.saturn-orbit {
    width: var(--saturn-orbit);
    height: var(--saturn-orbit);
    animation-duration: var(--saturn-time);
    z-index: 4;
}

.uranus-orbit {
    width: var(--uranus-orbit);
    height: var(--uranus-orbit);
    animation-duration: var(--uranus-time);
    z-index: 3;
}

.neptune-orbit {
    width: var(--neptune-orbit);
    height: var(--neptune-orbit);
    animation-duration: var(--neptune-time);
    z-index: 2;
}

.pluto-orbit {
    width: var(--pluto-orbit);
    height: var(--pluto-orbit);
    animation-duration: var(--pluto-time);
    z-index: 1;
}

/* Planet Styles & Positioning on Orbit Ring */
/* To make planets sit on the ring while the ring rotates, we can just place the planet at the top/right of the ring container. 
   Since the .orbit container rotates, the planet will rotate with it.
   We need to counter-rotate the planet if we want lighting/texture to stay static relative to screen, but for simple colors it's fine.
*/

.planet {
    /* Position planet on the rim of the orbit div */
    left: 100%;
    /* Start at right edge */
    top: 50%;
    transform: translate(-50%, -50%);
    /* Center on the line */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Planet Info Labels */
.planet-info {
    position: absolute;
    top: -30px;
    /* Position above the planet */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto;
    white-space: nowrap;
    pointer-events: none;
    animation: counter-rotate linear infinite;
    /* Counter-rotate to keep text upright */
}

/* We need to set the duration dynamically or inherit. 
   Since the parent .orbit rotates, the .planet rotates with it.
   But the .planet itself is NOT rotating around its own center in our current CSS (only translating).
   Wait, the .orbit rotates, so the .planet (child of .orbit) moves in a circle.
   However, the .planet div itself is rigidly attached to the .orbit div.
   So as .orbit rotates 90deg, .planet is also rotated 90deg relative to screen.
   So the text inside .planet will rotate upside down.
   We need to counter-rotate the .planet-info.
*/

.mercury-orbit .planet-info {
    animation-duration: var(--mercury-time);
}

.venus-orbit .planet-info {
    animation-duration: var(--venus-time);
}

.earth-orbit .planet-info {
    animation-duration: var(--earth-time);
}

.mars-orbit .planet-info {
    animation-duration: var(--mars-time);
}

.jupiter-orbit .planet-info {
    animation-duration: var(--jupiter-time);
}

.saturn-orbit .planet-info {
    animation-duration: var(--saturn-time);
}

.uranus-orbit .planet-info {
    animation-duration: var(--uranus-time);
}

.neptune-orbit .planet-info {
    animation-duration: var(--neptune-time);
}

.pluto-orbit .planet-info {
    animation-duration: var(--pluto-time);
}

@keyframes counter-rotate {
    from {
        transform: translateX(-50%) rotate(0deg);
    }

    to {
        transform: translateX(-50%) rotate(-360deg);
    }
}

.name {
    font-size: 14px;
    color: #fff;
    text-shadow: 0 0 3px #000;
    font-weight: bold;
}

.period {
    font-size: 12px;
    color: #ddd;
    text-shadow: 0 0 3px #000;
}

.mercury {
    width: var(--mercury-size);
    height: var(--mercury-size);
    background: #a9a9a9;
    box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.5);
}

.venus {
    width: var(--venus-size);
    height: var(--venus-size);
    background: #e6e6fa;
    box-shadow: inset -3px -3px 5px rgba(0, 0, 0, 0.5);
    background: radial-gradient(circle at 30% 30%, #fff0f5, #d2b48c);
}

.earth {
    width: var(--earth-size);
    height: var(--earth-size);
    background: #1e90ff;
    box-shadow: inset -3px -3px 5px rgba(0, 0, 0, 0.5);
    background: radial-gradient(circle at 30% 30%, #87ceeb, #4169e1);
}

.mars {
    width: var(--mars-size);
    height: var(--mars-size);
    background: #ff4500;
    box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.5);
}

.jupiter {
    width: var(--jupiter-size);
    height: var(--jupiter-size);
    background: #deb887;
    box-shadow: inset -6px -6px 10px rgba(0, 0, 0, 0.5);
    background: repeating-linear-gradient(180deg, #deb887, #d2691e 10px, #deb887 20px);
}

.saturn {
    width: var(--saturn-size);
    height: var(--saturn-size);
    background: #f4a460;
    position: relative;
}

.uranus {
    width: var(--uranus-size);
    height: var(--uranus-size);
    background: #afeeee;
    box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.5);
}

.neptune {
    width: var(--neptune-size);
    height: var(--neptune-size);
    background: #4682b4;
    box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.5);
}

.pluto {
    width: var(--pluto-size);
    height: var(--pluto-size);
    background: #d3d3d3;
}

/* Saturn Ring */
.ring {
    position: absolute;
    width: 60px;
    height: 15px;
    border: 4px solid rgba(210, 180, 140, 0.8);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px rgba(210, 180, 140, 0.3);
}

/* Moon */
.moon-orbit {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: rotate 2s linear infinite;
}

.moon {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    left: 100%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.controls {
    position: absolute;
    bottom: 30px;
    z-index: 20;
}

.btn {
    background: linear-gradient(45deg, #ff00de, #00d4ff);
    border: none;
    padding: 15px 30px;
    border-radius: 30px;
    color: white;
    font-size: 1.2rem;
    font-family: 'ZCOOL KuaiLe', cursive, sans-serif;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.btn:active {
    transform: scale(0.95);
}