/* --- SOTA Compass Visualization (Detailed) --- */

.compass-container {
    transform-style: preserve-3d;
    transition: transform 0.5s ease-out;
}

/* Enhances the outer container with a slight bevel effect */
.compass-container::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255,255,255,0.0), rgba(0,0,0,0.05));
    z-index: -1;
}

.compass-scale-ring {
    background: radial-gradient(circle at center, white 50%, #f8fafc 100%);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.compass-needle {
    transform-origin: center center;
    /* Improved shadow for floating effect */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.15));
    will-change: transform;
}

/* Subtle continuous rotation for inner details */
.compass-inner-ring {
    animation: spin-super-slow 120s linear infinite;
}

@keyframes spin-super-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile responsiveness for the big compass */
@media (max-width: 768px) {
    .compass-container {
        width: 300px;
        height: 300px;
    }
    .compass-needle {
        transform: scale(0.7);
    }
    /* Adjust font sizes inside compass */
    .compass-container .text-2xl { font-size: 1.25rem; }
    .compass-container .text-lg { font-size: 1rem; }
}