/* ═══════════════════════════════════════════════
   MOBILE – Reszponzív média lekérdezések
   MovarFM · css/mobile.css
   ═══════════════════════════════════════════════ */

/* ─── Tablet / kis desktop ─── */
@media (max-width: 1100px){
    .layout{grid-template-columns:1fr}
    .right-col{grid-template-columns:1fr}
    .player-card{min-height:0}
}

/* ─── Vizualizátor: desktop felett bottom sheet rejtve ─── */
@media (min-width: 861px){
    .viz-bottom-sheet,
    .viz-sheet-backdrop{
        display:none;
    }
    .visualizer-overlay{
        pointer-events:none;
        cursor:default;
    }
}

/* ─── Vizualizátor stílus menü: 860px alatt rejtve ─── */
@media (max-width: 860px){
    .viz-style-menu{
        display:none !important;
    }
}

/* ─── Mobil ─── */
@media (max-width: 760px){
    .layout{
        display:flex;
        flex-direction:column-reverse;
        gap:12px;
        min-height:calc(100dvh - 92px);
    }

    .app{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box;
        padding:10px 10px 98px !important;
        margin:0 !important;
    }

    .right-col{
        width:100% !important;
        max-width:100% !important;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        margin:0 !important;
        padding:0 !important;
        min-height:calc(100dvh - 180px);
    }

    .header{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:center;
        position:sticky;
        top:0;
        z-index:60;
        margin-bottom:12px;
        gap:10px;
        border-radius:14px;
        padding:10px 12px;
    }

    .brand{
        min-width:0;
    }

    .brand-copy p{
        display:none;
    }

    .mobile-menu-toggle{
        display:inline-flex;
    }

    .header.is-open .mobile-menu-toggle span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .header.is-open .mobile-menu-toggle span:nth-child(2){
        opacity:0;
    }

    .header.is-open .mobile-menu-toggle span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

    .header-actions{
        grid-column:1 / -1;
        width:100%;
        justify-content:stretch;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        max-height:0;
        opacity:0;
        transform:translateY(-6px);
        pointer-events:none;
        overflow:hidden;
        transition:max-height .28s ease, opacity .2s ease, transform .24s ease;
    }

    .header-actions > .btn,
    .header-actions > #theme-btn,
    #auth-menu-container > .btn{
        width:100%;
        justify-content:center;
    }

    #auth-menu-container{
        display:flex;
        flex-direction:column;
        gap:8px;
    }

    .header.is-open .header-actions{
        max-height:520px;
        opacity:1;
        transform:translateY(0);
        pointer-events:auto;
    }

    #content,
    main{
        scroll-margin-top:90px;
    }

    .player-card{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:12px 10px !important;
        min-height:0;
        height:calc(100dvh - 186px);
        max-height:calc(100dvh - 186px);
        justify-content:space-between;
        gap:10px;
        overflow:hidden;
    }

    .player-shell{
        width:100% !important;
        max-width:100% !important;
        grid-template-columns:1fr;
        gap:8px;
        text-align:center;
        justify-items:center;
        padding-top:0;
    }

    .player-main{
        width:100%;
        align-items:center;
        padding-top:0;
    }

    .cover-wrap{
        width:124px;
        height:124px;
        margin:0 auto;
    }

    .np-badge{
        align-self:center;
        margin-bottom:6px;
    }

    .track-title,
    .track-artist{
        text-align:center;
        max-width:none;
    }

    .track-title{
        font-size:clamp(1.15rem, 6vw, 1.5rem);
        line-height:1.05;
        margin-bottom:2px;
    }

    .track-artist{
        margin-top:4px;
        font-size:.9rem;
        line-height:1.3;
    }

    .meta-row{
        align-items:center;
        text-align:center;
        max-width:none;
        margin-top:6px;
        gap:2px;
        font-size:.9rem;
    }

    .player-controls{
        width:100% !important;
        max-width:100% !important;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        margin-top:6px;
    }

    .play-btn{
        align-self:center;
        flex-shrink:0;
        width:66px;
        height:66px;
    }

    .controls-stack{
        width:100% !important;
        max-width:100% !important;
        min-width:0;
        gap:8px;
    }

    .volume-row{
        grid-template-columns:52px minmax(0,1fr) 50px;
    }

    .progress-track{
        height:10px;
    }

    input[type="range"]{
        height:10px;
        touch-action:pan-x;
    }

    input[type="range"]::-webkit-slider-runnable-track{
        height:10px;
    }

    input[type="range"]::-webkit-slider-thumb{
        margin-top:-7px;
        width:22px;
        height:22px;
    }

    input[type="range"]::-moz-range-track{
        height:10px;
    }

    input[type="range"]::-moz-range-thumb{
        width:22px;
        height:22px;
    }

    .visualizer-wrap{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        gap:4px;
    }

    .visualizer-label{
        width:100%;
        justify-content:center;
        min-height:30px;
        font-size:.78rem;
        padding:0 6px;
    }

    .visualizer{
        width:100% !important;
        max-width:100% !important;
        height:98px;
        max-height:120px;
        padding:6px 6px;
        justify-content:center;
    }

    .left-card .hero-text{
        display:none;
    }

    .sticky-listeners{
        display:none;
    }

    /* Copyright sor elrejtve mobilon */
    .page-footer{
        display:none;
    }

    .footer-left{
        max-width:45%;
    }

    .footer-center{
        max-width:none;
    }

    .footer{
        padding:8px 12px;
        gap:8px;
    }

    .sticky-cover{
        width:22px;
        height:22px;
    }

    .sticky-song{
        font-size:.65rem;
    }

    .sticky-name{
        font-size:.55rem;
    }

    .ticker-content{
        font-size:.75rem;
    }
}

/* ─── Kis mobil ─── */
@media (max-width: 520px){
    .btn{padding:9px 14px;font-size:.86rem}
    .hero-title{font-size:1.45rem}
    .track-title{font-size:1.28rem}
    .track-artist{font-size:.94rem}
    .footer{left:4px;right:4px;bottom:4px;border-radius:8px;}
    .footer-left{gap:6px;}
    .footer-right{gap:6px;}
    .sticky-listeners{display:none;}
    .sticky-weather{display:none;}
    .footer-center{min-width:0;}

    .ticker{
        flex-wrap:nowrap;
        gap:6px;
    }

    .ticker-label{
        order:2;
        border-right:none;
        border-left:1px solid rgba(0,210,255,.25);
        padding-left:6px;
        margin-left:auto;
        margin-right:0;
        white-space:nowrap;
        font-size:.65rem;
        flex-shrink:0;
    }

    .ticker-content{
        order:1;
        flex:1 1 auto;
        min-width:0;
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
        display:inline-flex;
        align-items:center;
        gap:4px;
        font-size:.78rem;
    }

    .ticker-link{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        flex:1 1 auto;
        min-width:0;
    }

    .ticker-link span{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .ticker-thumb{
        width:22px;
        height:22px;
    }
}

/* ─── Nagyon kis képernyő ─── */
@media (max-width: 400px){
    .ticker-label{
        display:none;
    }
}

@media (max-width: 320px){
    .ticker-label{
        display:none;
    }
}