/* Mobile responsive */
@media (max-width: 768px) {
    body {
        padding: 10px;
        padding-top: 0;
    }

    .site-nav {
        margin: 0 -10px;
        padding: 0 10px;
    }

    .site-nav-links {
        gap: 0.75rem;
    }

    .site-nav-links a {
        font-size: 0.55em;
    }

    .container {
        padding: 1.5rem 1rem;
    }

    .episode-banner {
        height: 250px;
        margin-top: 1rem;
    }

    .episode-banner-overlay {
        padding: 1.5rem 1rem;
    }

    .episode-banner-title {
        font-size: 1.4em;
    }

    .episode-banner-subtitle {
        font-size: 1em;
    }

    .countdown-section {
        padding: 1.5rem 1rem;
    }

    .countdown {
        gap: 1rem;
    }

    .countdown-item {
        min-width: 60px;
    }

    .countdown-value {
        font-size: 2em;
    }

    .countdown-status {
        font-size: 1.4em;
        letter-spacing: 2px;
    }

    .next-episode-title {
        font-size: 1.5em;
    }

    .auxiliary-event {
        padding: 0.6rem 1rem;
    }

    .auxiliary-event-title {
        font-size: 0.75em;
    }

    .auxiliary-countdown-value {
        font-size: 1em;
    }

    .character-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        perspective: 800px;
    }

    .character-card {
        transform: rotateY(-2deg) rotateX(1deg);
    }

    .character-card-content {
        padding: 0.875rem;
    }

    .character-image {
        height: 150px;
    }

    .character-name {
        font-size: 1em;
    }

    .character-subtitle {
        font-size: 0.85em;
    }

    .episode-nav {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .episode-nav-prev,
    .episode-nav-next {
        text-align: center;
    }

    .fact-footer {
        padding: 1.5rem 1rem;
    }

    .fact-text {
        font-size: 0.9em;
    }

    .location-item {
        padding: 0.875rem 1rem;
    }

    .location-name {
        font-size: 0.9em;
    }

    .location-description {
        font-size: 0.9em;
    }

    .marker-label {
        font-size: 3px;
    }

    .marker-episode {
        font-size: 2.2px;
    }

    .marker-dot {
        r: 1.2;
    }

    .marker-glow {
        r: 2;
    }

    .crew-path-line {
        stroke-width: 0.6;
    }

    .legend-stops {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .legend-stop {
        flex: 0 0 auto;
    }

    .galaxy-map-link {
        display: block;
        margin-left: 0;
        margin-top: 0.5rem;
        text-align: center;
    }

    /* Holographic minimap mobile */
    .holo-map-stage {
        width: 100%;
        height: 260px;
        margin-top: -40px;
    }

    .holo-map-spin {
        width: 340px;
        height: 340px;
    }
}