#globe-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: transparent;
    cursor: grab;
}

.globe-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

#globe-container:active {
    cursor: grabbing;
}

#globe-mask {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    /* Maintains circular mask */
    background: transparent;
    aspect-ratio: 1 / 1;
    /* Force square for perfect circle */
    width: 100%;
    max-width: 450px;
    /* Increased size */
    margin-inline: auto;
    align-self: center;
    /* Vertically center in grid */
}

.globe-fallback {
    display: none;
    /* Hidden when WebGL is available */
}

/* Show fallback if WebGL is unavailable or globe fails to load */
.no-webgl .globe-fallback {
    display: block;
    z-index: 2;
}

.no-webgl #globe-container {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    /* Subtle override if needed, though handled in JS too */
}