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

    body,
    html {
        width: 100%;
        height: 100vh;
        background: #000;
        overflow: hidden
    }

    #canvas {
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
        background: radial-gradient(ellipse at center, #0a0a1a 0%, #000005 100%)
    }

    #canvas::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(1.5px 1.5px at 10% 15%, #fff, transparent), radial-gradient(1px 1px at 25% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 12%, #fff, transparent), radial-gradient(1px 1px at 15% 40%, #fff, transparent);
        opacity: 0.3;
        pointer-events: none;
    }

    #scene {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 1000px;
        perspective-origin: 50% 40%
    }

    .solar {
        position: relative;
        width: 700px;
        height: 700px;
        transform-style: preserve-3d;
        transform: rotateX(65deg) rotateZ(-5deg)
    }

    .sun {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotateX(-65deg);
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 35%, #fff9e0, #ffdd44 30%, #ff9900 65%, #cc5500 100%);
        box-shadow: 0 0 40px 10px rgba(255, 160, 0, 0.6);
        z-index: 10;
        cursor: pointer;
    }

    .orbit {
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.08);
        transform-style: preserve-3d;
        transform: translate(-50%, -50%)
    }

    .planet-wrap {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        transform-style: preserve-3d;
        animation: orbit linear infinite
    }

    @keyframes orbit {
        from {
            transform: rotate(0deg) translateX(var(--r)) rotate(0deg) rotateX(-65deg);
        }

        to {
            transform: rotate(360deg) translateX(var(--r)) rotate(-360deg) rotateX(-65deg);
        }
    }

    .planet {
        width: var(--d);
        height: var(--d);
        border-radius: 50%;
        background: var(--bg);
        box-shadow: inset -4px -4px 10px rgba(0, 0, 0, 0.9), var(--glow);
        cursor: pointer;
        transform: translate(-50%, -50%);
        transition: 0.3s;
    }

    .planet:hover {
        filter: brightness(1.3);
        scale: 1.2;
    }

    .saturn-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotateX(75deg);
        width: 240%;
        height: 240%;
        border-radius: 50%;
        border: 4px solid rgba(194, 168, 106, 0.3);
        pointer-events: none
    }

    /* POPUP */
    .popup-bg {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(10px);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: 0.3s;
        pointer-events: none
    }

    .popup-bg.show {
        opacity: 1;
        pointer-events: all
    }

    .popup {
        background: #0a0c1e;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 30px;
        width: 450px;
        max-width: 90vw;
        transform: scale(0.8);
        transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        color: #fff;
    }

    .popup-bg.show .popup {
        transform: scale(1)
    }

    .popup-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin: 0 auto 15px;
    }

    .popup-name {
        font-size: 26px;
        letter-spacing: 3px;
        text-transform: uppercase;
        text-align: center;
    }

    .popup-type {
        font-size: 11px;
        color: #ffcc33;
        text-align: center;
        margin-bottom: 20px;
        letter-spacing: 1px;
    }

    .stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 20px;
    }

    .stat {
        background: rgba(255, 255, 255, 0.05);
        padding: 12px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .stat-label {
        font-size: 9px;
        color: rgba(255, 255, 255, 0.4);
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    .stat-val {
        font-size: 14px;
        font-weight: bold;
        color: #fff;
    }

    .popup-desc {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.7;
        text-align: justify;
    }

    .close-btn {
        display: block;
        margin: 25px auto 0;
        background: #ffcc33;
        color: #000;
        border: none;
        padding: 10px 30px;
        border-radius: 25px;
        cursor: pointer;
        font-weight: bold;
    }