/* ============================================================
   Universe of Us — Responsive / Mobile
   ============================================================ */

@media (max-width: 768px) {
    .loading-title {
        font-size: 1.2rem;
        letter-spacing: 3px;
    }

    .loading-subtitle {
        font-size: 0.85rem;
    }

    .loading-bar-container {
        width: 160px;
    }

    .postcard {
        max-width: 100%;
        border-radius: var(--radius-md);
        max-height: 90vh;
    }

    .postcard-title {
        font-size: 1.25rem;
    }

    .postcard-message {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .postcard-body {
        max-height: 60vh;
    }

    .postcard-header {
        padding: var(--space-md) var(--space-md) var(--space-sm);
    }

    .postcard-body {
        padding: var(--space-sm) var(--space-md) var(--space-md);
    }

    .postcard-divider {
        margin: 0 var(--space-md);
    }

    #nav-hud {
        bottom: var(--space-md);
        padding: var(--space-xs) var(--space-md);
        gap: var(--space-sm);
    }

    .hud-item {
        font-size: 0.7rem;
    }

    #intro-prompt {
        top: var(--space-md);
    }

    .intro-text {
        font-size: 0.8rem;
    }

    .constellation-name {
        font-size: 1.6rem;
        letter-spacing: 4px;
    }

    .constellation-message {
        font-size: 0.95rem;
    }

    #shooting-star-popup {
        max-width: 300px;
        padding: var(--space-md) var(--space-lg);
    }

    .shooting-star-text {
        font-size: 0.9rem;
    }
}

@media (max-width: 380px) {
    .loading-title {
        font-size: 1rem;
    }

    .postcard-title {
        font-size: 1.1rem;
    }

    .postcard-message {
        font-size: 0.88rem;
    }

    .constellation-name {
        font-size: 1.3rem;
    }
}

/* iOS Safari fix */
@supports (-webkit-touch-callout: none) {
    body {
        height: -webkit-fill-available;
    }
}