/* ============================================================
   SOLAR SYSTEM DESIGN MODE
   ============================================================ */

/* ---------- Main Solar Container ---------- */
.solar-system-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: var(--theme-bg-gradient);
    perspective: 1200px;
}

/* ---------- Central Logo ---------- */
.solar-center {
    position: absolute;
    width: 65px;
    height: 65px;
    z-index: 200;
    cursor: pointer;
    background: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-shadow: 0 0 25px var(--primary);
    transition: all 0.3s ease;
    /* Ensure it remains centered even with transform animations */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: solar-bounce 2.5s infinite ease-in-out;
}

body.light-mode .solar-center {
    background: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.solar-center img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Filter moved to parent container for better centering */
}

.solar-center:hover {
    transform: translate(-50%, -50%) scale(1.15);
}

@keyframes solar-bounce {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.08);
    }
}

/* ---------- Orbit Rings ---------- */
.orbit {
    position: absolute;
    border: 1px solid rgba(17, 178, 173, 0.3);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ---------- Revolving Food Items ---------- */
.orbiting-item {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -40px;
    cursor: pointer;
    pointer-events: auto;
    z-index: 50;
    transition: filter 0.3s;
    /* This ensures images stay upright even as they revolve */
    transform-style: preserve-3d;
}

.orbiting-item img {
    width: 120%;
    height: 120%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
    transition: transform 0.3s;
}

.orbiting-item:hover img {
    transform: scale(1.35);
}

/* Make inner items slightly smaller to leave more 'gap' space */
.orbiting-item:nth-child(-n+3) {
    width: 65px;
    height: 65px;
}

/* ---------- Revolution Animation ---------- */
@keyframes revolve {
    from {
        transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg);
    }
}

.moving {
    animation: revolve var(--orbit-speed) linear infinite;
}

.paused {
    animation-play-state: paused !important;
}

/* ============================================================
   SUB-SOLAR WHEEL  (opens when a food item is clicked)
   ============================================================ */

.solar-wheel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--theme-bg-gradient);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 500;
    overflow: hidden;
}

/* The container that holds both the center image and orbiting variants */
.wheel-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .solar-center {
        width: 35px;
        height: 35px;
    }

    .orbiting-item {
        width: 60px;
        height: 60px;
        margin-top: -30px;
        margin-left: -30px;
    }

    /* Optional: Add a subtle glow to the rings to make the 4 lines more distinct */
    .orbit {
        border: 1px solid rgba(0, 195, 255, 0.2);
        box-shadow: inset 0 0 15px rgba(0, 195, 255, 0.05);
    }
}