/* ---------- A Világ oldal 3D-s bolygónézete (PlanetGlobe) ---------- */

.planet-globe {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 45%, #0b1430 0%, #03050c 70%);
}

.globe-stage {
    position: absolute;
    inset: 0;
    outline: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

    .globe-stage:focus-visible {
        box-shadow: inset 0 0 0 2px var(--accent);
    }

.globe-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    opacity: 0;
    transition: opacity .9s ease;
}

.planet-globe.ready .globe-canvas {
    opacity: 1;
}

.globe-canvas:active {
    cursor: grabbing;
}

.globe-canvas.hovering {
    cursor: pointer;
}

.planet-globe.mode-ping .globe-canvas,
.planet-globe.mode-drone .globe-canvas {
    cursor: crosshair;
}

/* Címkék a 3D-s pontok fölött (a JS minden képkockában a helyükre teszi őket) */
.globe-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.globe-label {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    will-change: transform;
    line-height: 1;
}

    .globe-label.colony {
        font-size: .76rem;
        font-weight: 600;
        padding: 3px 9px;
        border-radius: 999px;
        background: rgba(7, 11, 20, .74);
        border: 1px solid var(--neon-line);
        color: var(--text);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    }

        .globe-label.colony.capital {
            border-color: rgba(251, 191, 36, .55);
        }

        .globe-label.colony.current {
            border-color: var(--accent);
            box-shadow: var(--glow);
        }

    .globe-label.icon {
        font-size: 1.15rem;
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .9));
    }

        .globe-label.icon.unit,
        .globe-label.icon.sat {
            font-size: .9rem;
        }

        .globe-label.icon.sat {
            opacity: .8;
        }

        .globe-label.icon.event.active {
            font-size: 1.35rem;
        }

        .globe-label.icon.lost {
            opacity: .8;
        }

    .globe-label.ping {
        font-size: 1rem;
        font-weight: 800;
        text-shadow: 0 0 6px currentColor, 0 1px 3px #000;
    }

    .globe-label.impact {
        font-size: .72rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 999px;
        color: #ffd0d0;
        background: rgba(60, 8, 12, .7);
        border: 1px solid rgba(255, 107, 107, .6);
    }

.globe-tooltip {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    padding: 4px 9px;
    border-radius: 8px;
    background: rgba(13, 20, 36, .92);
    border: 1px solid var(--neon-line);
    color: var(--text);
    font-size: .78rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .12s;
    z-index: 2;
}

    .globe-tooltip.shown {
        opacity: 1;
    }

.planet-globe .map-controls {
    z-index: 2;
}

.globe-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--muted);
    font-size: .9rem;
    pointer-events: none;
}

.globe-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(56, 232, 255, .2);
    border-top-color: var(--accent);
    animation: globe-spin 1s linear infinite;
}

@keyframes globe-spin {
    to {
        transform: rotate(360deg);
    }
}

.globe-hint {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    margin: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(7, 11, 20, .6);
    color: var(--muted);
    font-size: .74rem;
    white-space: nowrap;
    pointer-events: none;
    animation: globe-hint 9s ease forwards;
}

.globe-stage.touched ~ .globe-hint {
    display: none;
}

@keyframes globe-hint {
    0%, 75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.globe-fallback-note {
    position: absolute;
    left: 10px;
    bottom: 48px;
    margin: 0;
    font-size: .75rem;
    color: var(--muted);
}

/* 3D / 2D váltó a térkép bal alsó sarkában */
.view-toggle {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--neon-line);
    background: rgba(13, 20, 36, .85);
    box-shadow: var(--glow);
}

    .view-toggle button {
        min-width: 40px;
        height: 30px;
        padding: 0 10px;
        border: 0;
        background: transparent;
        color: var(--muted);
        font: inherit;
        font-size: .8rem;
        font-weight: 700;
        cursor: pointer;
    }

        .view-toggle button + button {
            border-left: 1px solid var(--neon-line);
        }

        .view-toggle button.active {
            background: rgba(34, 211, 238, .18);
            color: var(--accent);
        }

@media (max-width: 700px) {
    .globe-hint {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .globe-canvas {
        transition: none;
    }

    .globe-spinner {
        animation: none;
    }
}