@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Space Grotesk', sans-serif;
    min-height: 100vh;
    background: radial-gradient(circle at center, #0f0f1a 0%, #000000 100%);
}

#canvas-container {
    height: 70vh;
    position: relative;
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.realm-info {
    transition: all 0.3s ease;
}

.realm-info.active {
    opacity: 1;
    transform: translateY(0);
}

.realm-info:not(.active) {
    opacity: 0;
    transform: translateY(20px);
    height: 0;
    overflow: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0f0f1a;
}

::-webkit-scrollbar-thumb {
    background: #4f46e5;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6366f1;
}