/* ============================================================
   Mu Ultimate · FX V6 — MOBILE POLISH
   Targets: 320px – 768px
   Estratégia: mobile-first overrides para tudo que tá quebrado
   ============================================================ */

/* ============================================================
   GLOBAL — base mobile (até 980px tablet inferior)
   ============================================================ */
/* Hide hamburger + drawer by default (desktop) */
.mu-fx-nav__burger { display: none; }
.mu-fx-drawer, .mu-fx-drawer-backdrop { display: none; }

@media (max-width: 840px) {
    .mu-fx-nav__burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px; height: 32px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.12);
        background: rgba(0,0,0,.3);
        color: #fff;
        flex-shrink: 0;
        cursor: pointer;
        transition: all .3s;
    }
    .mu-fx-nav__burger:hover {
        border-color: #ffd16a;
        color: #ffd16a;
    }
    .mu-fx-nav__burger svg { width: 18px; height: 18px; }
    .mu-fx-drawer, .mu-fx-drawer-backdrop { display: block; }
}

@media (max-width: 980px) {
    /* Floating Discord menor em mobile/tablet */
    .mu-fx-discord {
        left: 14px; bottom: 14px;
        padding: .5rem .55rem .5rem .5rem;
    }
    .mu-fx-discord__text strong { font-size: .8rem; }
    .mu-fx-discord__text small  { font-size: .6rem; }
}

/* ============================================================
   TABLET / SMALL DESKTOP — 768–1024
   ============================================================ */
@media (max-width: 1024px) {
    /* Navbar — links escondidos ja na 840px, manter logo + cta */
    .mu-fx-nav {
        gap: .8rem;
    }
}

/* ============================================================
   PHONE — até 768px
   ============================================================ */
@media (max-width: 768px) {

    /* ----- NAVBAR ----- */
    .mu-fx-nav {
        top: 10px;
        padding: .45rem .55rem .45rem .85rem;
        gap: .55rem;
        max-width: calc(100vw - 24px);
    }
    .mu-fx-nav__logo {
        width: 30px; height: 30px;
    }
    .mu-fx-nav__live {
        padding: .2rem .55rem;
        font-size: .6rem;
        gap: .35rem;
    }
    .mu-fx-nav__cta {
        padding: .45rem .8rem;
        font-size: .68rem;
        letter-spacing: .1em;
    }

    /* Hamburger trigger reveal — visible only when needed */
    .mu-fx-nav__burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px; height: 32px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.12);
        background: rgba(0,0,0,.3);
        color: #fff;
        flex-shrink: 0;
        cursor: pointer;
        transition: all .3s;
    }
    .mu-fx-nav__burger:hover {
        border-color: #ffd16a;
        color: #ffd16a;
    }
    .mu-fx-nav__burger svg { width: 18px; height: 18px; }

    /* Drawer mobile menu */
    .mu-fx-drawer {
        position: fixed;
        top: 0; right: 0;
        width: min(82vw, 320px);
        height: 100vh;
        height: 100dvh;
        background: linear-gradient(165deg, rgba(10,16,28,.98) 0%, rgba(2,4,12,.98) 100%);
        backdrop-filter: blur(18px);
        border-left: 1px solid rgba(212,175,55,.2);
        z-index: 9700;
        transform: translateX(100%);
        transition: transform .5s cubic-bezier(.16,1,.3,1);
        display: flex;
        flex-direction: column;
        padding: 5rem 1.5rem 2rem;
        box-shadow: -20px 0 60px rgba(0,0,0,.5);
    }
    .mu-fx-drawer.is-open { transform: none; }
    .mu-fx-drawer__close {
        position: absolute;
        top: 18px; right: 18px;
        width: 38px; height: 38px;
        border-radius: 50%;
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.1);
        color: #fff;
        font-size: 1.4rem;
        display: grid; place-items: center;
        cursor: pointer;
    }
    .mu-fx-drawer__close:hover { color: #ffd16a; border-color: #ffd16a; }
    .mu-fx-drawer__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: .3rem;
    }
    .mu-fx-drawer__link {
        display: flex;
        align-items: center;
        gap: .85rem;
        padding: .85rem 1rem;
        color: rgba(255,255,255,.85);
        text-decoration: none;
        font-size: .9rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        font-weight: 600;
        border-radius: 12px;
        border: 1px solid transparent;
        transition: all .3s;
    }
    .mu-fx-drawer__link:hover,
    .mu-fx-drawer__link:active {
        background: rgba(212,175,55,.08);
        border-color: rgba(212,175,55,.3);
        color: #ffd16a;
    }
    .mu-fx-drawer__link::before {
        content: '✦';
        color: rgba(212,175,55,.5);
    }
    .mu-fx-drawer__cta {
        margin-top: auto;
        padding: 1rem;
        text-align: center;
        background: linear-gradient(135deg, #ffd16a, #d4af37);
        color: #1a1208;
        font-weight: 700;
        border-radius: 999px;
        text-decoration: none;
        letter-spacing: .14em;
        text-transform: uppercase;
        font-size: .85rem;
        box-shadow: 0 14px 30px rgba(212,175,55,.4);
    }
    .mu-fx-drawer-backdrop {
        position: fixed; inset: 0;
        background: rgba(2,4,12,.6);
        backdrop-filter: blur(4px);
        z-index: 9650;
        opacity: 0;
        pointer-events: none;
        transition: opacity .4s;
    }
    .mu-fx-drawer-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }


    /* ----- HERO ----- */
    html.mu-fx-ready .mu-home-cine__hero {
        min-height: 92vh !important;
        min-height: 92dvh !important;
    }
    html.mu-fx-ready .mu-home-cine__stage {
        min-height: 92vh !important;
        min-height: 92dvh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: stretch !important;
        padding: 4rem 1rem 2rem !important;
        gap: 1rem !important;
    }
    html.mu-fx-ready .mu-home-cine__col--left,
    html.mu-fx-ready .mu-home-cine__col--right {
        width: 100% !important;
        max-width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }
    html.mu-fx-ready .mu-home-cine__col--center { display: none !important; }

    /* Character: shrink + position behind content (não aplicar no home-lab — regras em mu-home-lab.css) */
    html.mu-fx-ready:not(.mu-fx-lab-prime) .mu-home-cine__figure {
        position: absolute !important;
        width: 75vw !important;
        max-width: 360px !important;
        height: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -42%) !important;
        z-index: 1 !important;
        opacity: .35 !important;
        pointer-events: none !important;
    }
    html.mu-fx-ready:not(.mu-fx-lab-prime) .mu-home-cine__char-stage {
        transform: scale(.85) !important;
    }

    /* Hero: brand logo centered, content stacked, content above char */
    html.mu-fx-ready .mu-home-cine__brand {
        text-align: center;
        margin: 1rem 0 .5rem;
    }
    html.mu-fx-ready .mu-home-cine__brand-logo {
        max-width: 260px;
        height: auto;
    }

    /* Trailer card menor */
    html.mu-fx-ready .mu-home-trailer-card {
        margin: 0 auto !important;
        max-width: 280px;
    }

    /* Rates */
    html.mu-fx-ready .mu-home-cine__rates {
        justify-content: center !important;
        gap: 1rem !important;
    }
    html.mu-fx-ready .mu-home-cine__rate {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* CTAs do hero — empilhar verticalmente para legibilidade */
    html.mu-fx-ready .mu-home-cine__actions {
        flex-direction: column !important;
        gap: .65rem !important;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
    html.mu-fx-ready .mu-home-cine__btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Right column: event card + acesso rapido */
    html.mu-fx-ready .mu-home-cine__event-card {
        margin: 0 auto !important;
        max-width: 320px;
    }
    html.mu-fx-ready .mu-home-cine__quick-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: .5rem !important;
        max-width: 320px;
        margin: 0 auto;
    }
    html.mu-fx-ready .mu-home-cine__quick { text-align: center; }

    /* hide some FX heavy elements on mobile */
    .mu-fx-cinema-bars { display: none !important; }
    html.mu-fx-ready .mu-home-cine__hero::after { display: none; }
    .mu-fx-embers { display: none; }
    .mu-fx-cursor, .mu-fx-cursor-trail { display: none !important; }
    .mu-fx-burst { display: none !important; }


    /* ----- MINI CARDS (Online/XP/Drop/Reset) ----- */
    html.mu-fx-ready .mu-home-cards--4 {
        grid-template-columns: 1fr 1fr !important;
        gap: .65rem !important;
    }
    html.mu-fx-ready .mu-home-mini-card {
        padding: .85rem .75rem !important;
    }
    html.mu-fx-ready .mu-home-mini-card strong { font-size: 1.15rem !important; }


    /* ----- LAB SCROLL ----- */
    html.mu-fx-ready .mu-lab-scroll__portal {
        padding: 2.5rem 1rem;
    }
    html.mu-fx-ready .mu-lab-scroll__portal-title {
        font-size: clamp(1.4rem, 6vw, 2rem) !important;
        line-height: 1.3;
    }

    /* Lore promo */
    html.mu-fx-ready .mu-home-lore-promo__row {
        flex-direction: column !important;
        gap: 1.2rem !important;
        text-align: center;
    }
    html.mu-fx-ready .mu-home-lore-promo__title {
        font-size: 1.6rem !important;
    }
    html.mu-fx-ready .mu-home-lore-promo__aside {
        flex-direction: column !important;
        width: 100%;
        gap: .6rem !important;
    }
    html.mu-fx-ready .mu-home-lore-promo__btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Timeline — empilhar */
    html.mu-fx-ready .mu-lab-scroll__timeline-body {
        grid-template-columns: 1fr !important;
    }
    html.mu-fx-ready .mu-lab-scroll__timeline-rail { display: none !important; }
    html.mu-fx-ready .mu-lab-scroll__timeline-step {
        transform: none !important;
        opacity: .9 !important;
        filter: none !important;
        padding: 1.1rem 1.2rem;
        border-radius: 14px;
        background: linear-gradient(165deg, rgba(22,32,52,.5), rgba(10,16,28,.85));
        border: 1px solid rgba(255,255,255,.06);
        margin-bottom: .8rem;
    }
    html.mu-fx-ready .mu-lab-scroll__timeline-step.is-lit::before { display: none; }

    /* Gallery — desativar sticky e mostrar como cards normais */
    html.mu-fx-ready .mu-lab-scroll__gallery-sticky {
        height: auto !important;
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    html.mu-fx-ready .mu-lab-scroll__gallery-set {
        position: static !important;
        opacity: 1 !important;
        filter: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: .8rem !important;
    }
    html.mu-fx-ready .mu-lab-scroll__gallery-set:not(.is-active) {
        filter: none !important;
        opacity: 1 !important;
    }
    html.mu-fx-ready .mu-lab-scroll__gallery-frame {
        min-height: auto !important;
        padding: 0 !important;
    }
    html.mu-fx-ready .mu-lab-scroll__gallery-frame img {
        max-height: none !important;
        min-height: 0 !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto;
        object-fit: contain !important;
    }
    html.mu-fx-ready .mu-lab-scroll__gallery-track {
        height: auto !important;
    }
    html.mu-fx-ready .mu-lab-scroll__gallery-dots { display: none !important; }

    /* PvP — empilhar */
    html.mu-fx-ready .mu-lab-scroll__pvp-sticky {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        height: auto !important;
        position: static !important;
    }
    html.mu-fx-ready .mu-lab-scroll__pvp-track {
        height: auto !important;
    }
    html.mu-fx-ready .mu-lab-scroll__pvp-arena {
        min-height: 320px !important;
        height: 320px !important;
    }
    html.mu-fx-ready .mu-lab-scroll__pvp-fighter {
        min-height: 280px;
    }
    html.mu-fx-ready .mu-lab-scroll__pvp-frame {
        max-width: 50vw;
        height: 100%;
        width: 100%;
    }
    html.mu-fx-ready .mu-lab-scroll__pvp-copy {
        text-align: center;
        padding: 0 .5rem;
    }
    html.mu-fx-ready .mu-lab-scroll__pvp-copy h3 {
        font-size: 1.4rem !important;
    }


    /* ----- SYSTEMS HERO CARDS ----- */
    .mu-fx-systems { padding: 2.5rem .8rem; }
    .mu-fx-systems__grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    .mu-fx-card {
        aspect-ratio: auto !important;
        min-height: 220px;
    }
    .mu-fx-card__title { font-size: 1.35rem !important; }
    .mu-fx-card__desc { max-width: 100% !important; font-size: .85rem; }
    .mu-fx-card__num { font-size: 3.6rem !important; top: 8px; right: 14px; }


    /* ----- HUB ----- */
    .mu-fx-hub { padding: 2.5rem .8rem 1rem; }
    .mu-fx-hub__grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    .mu-fx-hub__grid > * {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    .mu-fx-event {
        grid-template-columns: 44px 1fr auto;
        gap: .65rem;
        padding: .6rem .65rem;
    }
    .mu-fx-event__icon { width: 44px; height: 44px; font-size: 1rem; }
    .mu-fx-event__name { font-size: .92rem; }
    .mu-fx-event__time { font-size: .9rem; }

    .mu-fx-news {
        grid-template-columns: 1fr;
        gap: 1.15rem;
    }

    .mu-fx-news__item {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        min-height: 0;
        padding: 1rem;
        row-gap: .75rem;
    }

    .mu-fx-news__thumb {
        grid-row: auto;
        grid-column: 1;
        min-height: clamp(160px, 42vw, 220px);
        height: auto;
    }

    .mu-fx-news__body {
        grid-column: 1;
        grid-row: auto;
    }

    .mu-fx-news__cta {
        grid-column: 1;
        grid-row: auto;
    }

    .mu-fx-news__title { font-size: 1.05rem; }
    .mu-fx-news__meta { font-size: .82rem; }
    .mu-fx-news__cta { padding: .5rem 1rem; font-size: .68rem; }

    /* Rankings tabs — grid simétrico em mobile */
    .mu-fx-ranks__tabs-row--duo {
        width: 100%;
    }
    .mu-fx-ranks__tab {
        padding: .4rem .45rem;
        font-size: .58rem;
        letter-spacing: .1em;
    }


    /* ----- QUOTE ----- */
    .mu-fx-quote { padding: 3.5rem 1rem; }
    .mu-fx-quote__marks { font-size: 7rem !important; }
    .mu-fx-quote__text { margin-top: -2rem; font-size: 1.35rem !important; line-height: 1.35; }
    .mu-fx-quote__author { font-size: .75rem; letter-spacing: .25em; }


    /* ----- 3 STEPS ----- */
    .mu-fx-steps__track { grid-template-columns: 1fr !important; gap: 1rem !important; }
    .mu-fx-steps__track::before,
    .mu-fx-steps__track::after { display: none !important; }
    .mu-fx-step__num {
        width: 90px; height: 90px;
        font-size: 2.6rem;
    }
    .mu-fx-step__title { font-size: 1.2rem; }


    /* ----- TESTIMONIALS ----- */
    .mu-fx-testi__grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    .mu-fx-testi-card { padding: 1.2rem 1.1rem 1.1rem; }
    .mu-fx-testi-card__text { font-size: .88rem; }


    /* ----- FAQ ----- */
    .mu-fx-faq { padding: 2.5rem .8rem; }
    .mu-fx-faq__q {
        padding: .95rem 1rem;
        font-size: .88rem;
        gap: .6rem;
    }
    .mu-fx-faq__a { padding: 0 1rem; font-size: .82rem; }
    .mu-fx-faq__item.is-open .mu-fx-faq__a { padding: 0 1rem 1rem; max-height: 600px; }


    /* ----- STATS ----- */
    html.mu-fx-ready .mu-lab-scroll__stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: .8rem !important;
    }
    html.mu-fx-ready .mu-lab-scroll__stat strong { font-size: 1.8rem !important; }


    /* ----- CTA final ----- */
    html.mu-fx-ready .mu-lab-scroll__cta { padding: 2.5rem 1rem !important; }
    html.mu-fx-ready .mu-lab-scroll__cta h2 { font-size: 1.8rem !important; }
    html.mu-fx-ready .mu-lab-scroll__cta p { font-size: .9rem; }
    html.mu-fx-ready .mu-lab-scroll__cta-actions {
        flex-direction: column !important;
        align-items: center !important;
        gap: .6rem !important;
        width: 100%;
    }
    html.mu-fx-ready .mu-lab-scroll__cta-actions .mu-btn {
        width: 100% !important;
        max-width: 280px;
        text-align: center !important;
        justify-content: center !important;
    }


    /* ----- FOOTER ----- */
    .mu-fx-footer { padding: 3rem 1rem 1.5rem; }
    .mu-fx-footer__crest { width: 110px; height: 110px; }
    .mu-fx-footer__crest::after { width: 150px; height: 150px; }
    .mu-fx-footer__tagline {
        font-size: .75rem;
        letter-spacing: .28em;
        text-align: center;
    }
    .mu-fx-footer__status {
        gap: .4rem;
        justify-content: center;
    }
    .mu-fx-status-pill {
        padding: .4rem .75rem;
        font-size: .62rem;
        letter-spacing: .1em;
    }
    .mu-fx-footer__social { gap: .6rem; }
    .mu-fx-social { width: 46px; height: 46px; }
    .mu-fx-social svg { width: 18px; height: 18px; }
    .mu-fx-social::after { display: none; }
    .mu-fx-footer__nav {
        gap: .8rem;
        padding: .85rem .5rem;
    }
    .mu-fx-footer__nav a { font-size: .68rem; letter-spacing: .12em; }
    .mu-fx-footer__copy { font-size: .65rem; line-height: 1.6; padding: 0 .5rem; }


    /* ----- SECTION HEADS ----- */
    html.mu-fx-ready .mu-lab-scroll__timeline-head h2,
    html.mu-fx-ready .mu-lab-scroll__gallery-head h2,
    html.mu-fx-ready .mu-lab-scroll__pvp-head h2,
    html.mu-fx-ready .mu-lab-scroll__systems-head h2,
    .mu-fx-systems__head h2,
    .mu-fx-hub__head h2,
    .mu-fx-steps__head h2,
    .mu-fx-testi__head h2,
    .mu-fx-faq__head h2 {
        font-size: 1.6rem !important;
        line-height: 1.25;
    }


    /* ----- SCROLL DOTS hidden on phone (already), back-to-top smaller ----- */
    .mu-fx-totop {
        right: 14px; bottom: 14px;
        width: 44px; height: 44px;
    }
    .mu-fx-totop svg { width: 18px; height: 18px; }


    /* ----- INTRO MOBILE ----- */
    .mu-fx-intro__crest { max-width: 75vw; }
    .mu-fx-intro__tagline {
        font-size: .68rem;
        letter-spacing: .35em !important;
        padding: 0 1rem;
        line-height: 1.6;
    }
    .mu-fx-intro__skip {
        bottom: 18px; right: 18px;
        padding: .4rem .85rem;
        font-size: .62rem;
    }


    /* ----- MODAL MOBILE ----- */
    .mu-fx-modal { padding: 0; }
    .mu-fx-modal__shell {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 220px 1fr !important;
        overflow: auto !important;
    }
    .mu-fx-modal__art { min-height: 220px !important; }
    .mu-fx-modal__body { padding: 1.4rem 1.3rem; max-height: none !important; }
    .mu-fx-modal__title { font-size: 1.6rem !important; }
    .mu-fx-modal__lead { font-size: .9rem; }
    .mu-fx-modal__close {
        top: 12px; right: 12px;
        width: 38px; height: 38px;
    }


    /* ----- ATMOSPHERE: herda mu-home.css ----- */
}

/* ============================================================
   SMALL PHONE — até 400px
   ============================================================ */
@media (max-width: 400px) {
    html.mu-fx-ready .mu-home-cards--4 {
        grid-template-columns: 1fr !important;
    }
    html.mu-fx-ready .mu-lab-scroll__stats-grid {
        grid-template-columns: 1fr !important;
    }
    .mu-fx-nav__live { display: none; }
    .mu-fx-footer__social { gap: .45rem; }
    .mu-fx-social { width: 42px; height: 42px; }
    .mu-fx-quote__marks { font-size: 5.5rem !important; }
    .mu-fx-quote__text { font-size: 1.2rem !important; }
}

/* ============================================================
   LANDSCAPE PHONE — limita altura
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) {
    html.mu-fx-ready .mu-home-cine__hero {
        min-height: 100vh !important;
    }
    html.mu-fx-ready:not(.mu-fx-lab-prime) .mu-home-cine__figure {
        opacity: .2 !important;
    }
}

/* ============================================================
   GLOBAL — pequenas correções que aplicam em todas as larguras
   ============================================================ */

/* prevent horizontal scroll — sem travar overflow-y (WebKit) */
html.mu-fx-ready,
body.mu-body--home-lab {
    max-width: 100vw;
    overflow-x: clip;
}

html:has(body.mu-body--home-mobile),
body.mu-body--home-mobile {
    overflow-y: auto !important;
    height: auto !important;
}