/* ===================================
   MLTOONS Espanol - Shared Mobile Overrides
   Load AFTER styles.css and page-specific <style> blocks
   =================================== */

/* ---- Floating buttons: prevent overlap at ALL sizes ---- */
#bg-music-toggle { bottom: 76px !important; }

/* ---- Performance: Disable heavy effects on mobile ---- */
@media (max-width: 768px) {
    .nebula,
    .sunrise-glow,
    .firefly,
    .floating-decorations,
    .floating-shape { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


/* ═══════════════════════════════════════
   1024px — Tablets Landscape
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {

    /* -- index.html -- */
    .hero { padding: 4rem 1.5rem 3rem; }
    .features, .units { padding: 3rem 1.5rem; }
    .feature-card { padding: 2rem 1.5rem; }
    .feature-icon { font-size: 3.5rem; }

    /* -- chapters.html -- */
    .chapters-container { padding: 3rem 1.5rem 2rem; }

    /* -- hub pages -- */
    .option-card { padding: 2rem 1rem; }

    /* Touch targets */
    .nav-button, .nav-menu a, .back-button,
    .user-menu-trigger, .cta-button { min-height: 44px; }
}


/* ═══════════════════════════════════════
   768px — Tablets Portrait
   ═══════════════════════════════════════ */
@media (max-width: 768px) {

    /* -- index.html hero -- */
    .hero { padding: 3rem 1.5rem 2rem; }
    .hero h1 { font-size: 2.2rem; }
    .hero p { font-size: 1.1rem; }
    .cta-button { padding: 1rem 2.5rem; font-size: 1.2rem; }
    .section-title { font-size: 1.8rem; }
    .section-subtitle { margin-bottom: 1.5rem; font-size: 1rem; }
    .feature-card { padding: 1.5rem 1rem; }
    .feature-icon { font-size: 3rem; }
    .hero-decorations .star { display: none; }

    /* -- chapters.html nav hamburger -- */
    .nav-bar .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 0;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        z-index: 1001;
    }
    .nav-bar .menu-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        margin: 3px 0;
        background: white !important;
        border-radius: 2px;
        transition: transform 0.3s;
    }

    /* -- Floating buttons: smaller on mobile -- */
    #bg-music-toggle { width: 42px !important; height: 42px !important; font-size: 20px !important; }
    #mltoons-help-btn { width: 42px !important; height: 42px !important; font-size: 20px !important; line-height: 42px !important; }
    .nav-bar .nav-links {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(26, 10, 46, 0.95);
        backdrop-filter: blur(10px);
        flex-direction: column;
        padding: 1rem;
        z-index: 999;
    }
    .nav-bar .nav-links.active { display: flex !important; }
    .nav-bar .nav-menu {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        background: none !important;
    }
    .nav-bar .nav-menu { flex-direction: column; gap: 0.5rem; }
    .nav-bar .user-menu { margin-top: 0.5rem; }
    .nav-bar .nav-home img { height: 40px; }

    /* -- chapters.html content -- */
    .chapters-container { padding: 2.5rem 1rem 2rem; }
    .chapters-title { font-size: 1.8rem; }
    .chapters-subtitle { font-size: 1rem; }
    .chapter-image { height: 150px; }
    .chapter-image .chapter-emoji,
    .chapter-image > span[style*="font-size"] { font-size: 3rem !important; }
    .subscription-banner {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        gap: 0.5rem;
    }
    .subscription-banner .welcome-text { font-size: 0.8rem; }
    .subscription-badge { font-size: 0.75rem; padding: 0.2rem 0.6rem; }
    .upgrade-link { font-size: 0.75rem; padding: 0.3rem 0.8rem; }

    /* -- hub pages -- */
    .chapter-emoji img { width: 6rem !important; height: 6rem !important; }
    .option-card { padding: 1.5rem 1rem; border-radius: 20px; }
    .option-icon img { width: 80px !important; height: 80px !important; }
    .header h1 { font-size: 2rem; }
    .header p { font-size: 1.2rem; }

    /* -- content pages -- */
    .egg-path,
    .flower-path { padding: 2rem 1rem; }
    .egg-number { font-size: 2rem; }
    .content-modal .modal-body,
    .egg-modal .modal-body { padding: 1.5rem; }
    .content-modal .modal-header,
    .egg-modal .modal-header { padding: 1rem 1.5rem; }
    .modal-title { font-size: 1.4rem; }

    /* -- content nav (inline styled) -- */
    .content-nav { padding: 0.75rem 1rem !important; }
    .content-nav img { height: 40px !important; }
    .content-nav a { font-size: 0.9rem !important; }
}


/* ═══════════════════════════════════════
   480px — Phones
   ═══════════════════════════════════════ */
@media (max-width: 480px) {

    /* -- index.html -- */
    .hero { padding: 2rem 1rem 1.5rem; }
    .hero h1 { font-size: 1.8rem; }
    .hero p { font-size: 1rem; }
    .cta-button { padding: 0.8rem 2rem; font-size: 1.1rem; }
    .features, .units { padding: 1.5rem 0.75rem; }
    .feature-card h3 { font-size: 1.2rem; }
    .feature-card p { font-size: 0.9rem; }
    .feature-icon { font-size: 2.5rem; }
    .nav-button { padding: 0.5rem 1rem; font-size: 0.85rem; }
    .section-title { font-size: 1.5rem; }
    .section-subtitle { font-size: 0.9rem; }

    .unit-card { padding: 1rem; }
    .unit-header { gap: 0.8rem; }
    .unit-number { font-size: 1.5rem; min-width: 40px; }
    .unit-character { width: 50px; height: 50px; }
    .unit-info h3 { font-size: 1.1rem; }
    .unit-info p { font-size: 0.85rem; }
    .chapter-tag { font-size: 0.75rem; padding: 0.2rem 0.5rem; }

    /* -- chapters.html -- */
    .chapters-container { padding: 1.5rem 0.75rem; }
    .chapter-image { height: 130px; }
    .chapter-content { padding: 1rem; }
    .chapter-title { font-size: 1.4rem; }
    .chapters-title { font-size: 1.5rem; }
    .chapters-subtitle { font-size: 0.9rem; }
    .chapter-description { font-size: 0.85rem; }
    .subscription-banner { padding: 0.75rem; font-size: 0.85rem; }

    /* -- hub pages -- */
    .chapter-emoji img { width: 4rem !important; height: 4rem !important; }
    .option-icon img { width: 60px !important; height: 60px !important; }
    .option-card { padding: 1.2rem 0.8rem; border-radius: 16px; }
    .option-title { font-size: 1.2rem; }
    .option-description { font-size: 0.85rem; }
    .header p { font-size: 1rem; }
    .header h1 { font-size: 1.6rem; }
    .back-button { padding: 0.8rem 1.5rem; font-size: 1rem; }
    body > .container,
    body { padding: 1rem 0.5rem; }

    /* -- content pages eggs -- */
    .egg-wrapper { width: 90px !important; height: 90px !important; }
    .egg { width: 80px !important; height: 80px !important; }
    .egg-number { font-size: 1.8rem; }
    .egg-label { font-size: 0.75rem; padding: 0.3rem 0.6rem; }
    .egg-path,
    .flower-path { padding: 1.5rem 0.75rem; }
    .content-modal .modal-body,
    .egg-modal .modal-body { padding: 1rem; }
    .content-grid { grid-template-columns: 1fr !important; }

    .content-nav { padding: 0.5rem 0.75rem !important; }
    .content-nav img { height: 36px !important; }
    .content-nav a { font-size: 0.85rem !important; }
}


/* ═══════════════════════════════════════
   375px — Small Phones (iPhone SE)
   ═══════════════════════════════════════ */
@media (max-width: 375px) {

    .nav-logo img, .nav-home img { height: 32px !important; }

    /* -- hub pages -- */
    .option-icon img { width: 50px !important; height: 50px !important; }
    .option-title { font-size: 1.1rem; }
    .chapter-emoji img { width: 3.5rem !important; height: 3.5rem !important; }

    /* -- content eggs tighter -- */
    .eggs-container { gap: 0.75rem !important; }
    .egg-wrapper { width: 75px !important; height: 75px !important; }
    .egg { width: 65px !important; height: 65px !important; }
    .egg-number { font-size: 1.5rem; }

    /* -- chapters cards -- */
    .chapter-title { font-size: 1.2rem; }
    .chapter-description { font-size: 0.8rem; }
    .chapter-image { height: 110px; }

    /* -- index -- */
    .hero h1 { font-size: 1.5rem; }
    .feature-icon { font-size: 2rem; }
}