#astro-map-container {
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    margin: 20px 0;
}

.astro-info-panel {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
    font-family: sans-serif;
    font-size: 14px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.moon-phase-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

#moon-phase-icon {
    font-size: 24px;
}

.city-marker {
    display: flex;
    align-items: center;
    gap: 8px;
}

.city-dot {
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 1), rgba(200, 220, 255, 0.8), rgba(100, 150, 255, 0.4));
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(100, 150, 255, 0.8), 0 0 15px rgba(50, 100, 200, 0.5), inset -1px -1px 3px rgba(0, 0, 0, 0.3);
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(100, 150, 255, 0.8), 0 0 15px rgba(50, 100, 200, 0.5), inset -1px -1px 3px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 12px rgba(100, 150, 255, 1), 0 0 20px rgba(50, 100, 200, 0.7), inset -1px -1px 3px rgba(0, 0, 0, 0.3);
    }
}

.city-name {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    background: rgba(255, 255, 255, 0.85);
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
}