/* MUSIC FOLDER — tall-screens | исходник: 4736..4816 */

/* ── очень высокие и узкие экраны (OPPO Find X9 Pro 1240×2772, Samsung 20:9+) ──
Задача: плеер полностью помещается в первый экран без прокрутки */
@media(max-width:640px) and (max-height:800px){
/* шапка на мобильных = 64 (бургер 40 + паддинги 24),
даём hero отступ от неё, чтобы overline не залезал под навбар */
.hero{padding:76px 0 2px}
.hero h1{font-size:clamp(18px,5vw,22px);margin:8px auto 4px;line-height:1.15}
.hero p{display:none}
.overline{font-size:9px;letter-spacing:.14em}
.player-wrap{margin-top:12px}
.player-card{padding:14px 12px 0;border-radius:18px}
.pgrid{gap:14px}
.media{max-width:130px}
.np-title{font-size:15px;margin:8px 0 2px}
.np-artist{font-size:11.5px}
#viz{height:32px;margin-top:6px}
.prow{margin-top:6px;gap:6px;padding-bottom:8px}
.pbar{height:12px}
.ctrls{margin-top:8px;gap:8px;padding-bottom:10px}
.ctrl-l{gap:8px}
.playbtn{width:50px;height:50px}
.playbtn svg{width:20px;height:20px}
.cbtn{width:36px;height:36px}
.cbtn svg{width:15px;height:15px}
.vol{gap:6px}
input[type=range]{width:64px}
.np-head{gap:6px}
.np-badge{font-size:8px;gap:5px}
.meq{height:10px}
.meq i{width:2px}
.live-badge{font-size:7.5px;padding:3px 7px;letter-spacing:.14em}
.live-badge i{width:5px;height:5px}
.player-backdrop{inset:-60px -40px -50px}
.media-glow{inset:-8%}
.v-label span{font-size:12px}
.tonearm{width:50%;top:-8%;right:-12%}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
.fly-cover{transition:none}
.like-burst-fx{display:none}
.od-panel.od-attention .od-ring{animation:none}
.to-top:hover .to-top-arrow{animation:none}
#fireCanvas{display:none!important}
.blob,.grain,.vinyl,.tonearm{animation:none!important}
}
/* ═══ истёкший лайк: приглушённое сердце, заметно, что голос нужно продлить ═══ */
.heart-btn.expired{border-color:rgba(255,68,102,.18);background:rgba(255,68,102,.04);}
.heart-btn.expired svg{fill:rgba(255,68,102,.22);stroke:rgba(255,134,163,.55);}
.od-like.expired{color:rgba(255,134,163,.6);border-color:rgba(255,68,102,.18);
background:rgba(255,68,102,.04);animation:odLikeExp 2.6s ease-in-out infinite;}
.od-like.expired svg{fill:rgba(255,68,102,.22);stroke:rgba(255,134,163,.55);}
@keyframes odLikeExp{0%,100%{box-shadow:0 0 0 0 rgba(255,68,102,0);}
50%{box-shadow:0 0 0 6px rgba(255,68,102,.14);}}
/* ═══ баннер обновления приложения (сверху, не мешает нижним виджетам) ═══ */
.mf-update{position:fixed;top:calc(72px + env(safe-area-inset-top));left:50%;z-index:130;
transform:translateX(-50%) translateY(-180%);
width:min(420px,calc(100% - 24px));display:flex;align-items:center;gap:13px;
padding:15px 17px;border-radius:18px;
background:linear-gradient(180deg,rgba(22,24,42,.97),rgba(12,13,24,.98));
border:1px solid color-mix(in srgb,var(--c2) 45%,transparent);
box-shadow:0 24px 70px -16px rgba(0,0,0,.9),0 0 40px -8px color-mix(in srgb,var(--c2) 30%,transparent);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
transition:transform .5s cubic-bezier(.34,1.3,.64,1);}
.mf-update.show{transform:translateX(-50%) translateY(0);}
.mf-update-ico{font-size:22px;flex:none;}
.mf-update-txt{flex:1;min-width:0;}
.mf-update-txt b{display:block;font-size:14px;font-weight:800;}
.mf-update-txt span{display:block;font-size:12px;color:var(--muted);font-weight:600;}
.mf-update-btn{flex:none;padding:10px 18px;border:none;border-radius:12px;cursor:pointer;
font-weight:800;font-size:13px;color:#0b0c14;
background:linear-gradient(135deg,var(--c1),var(--c2));
box-shadow:0 8px 24px -6px color-mix(in srgb,var(--c2) 60%,transparent);
transition:transform .2s;}
.mf-update-btn:hover{transform:scale(1.05);}
@media (max-width:640px){
.mf-update{top:calc(60px + env(safe-area-inset-top));padding:12px 14px;gap:10px;}
.mf-update-txt b{font-size:13px;}
.mf-update-txt span{font-size:11px;}
.mf-update-btn{padding:9px 14px;font-size:12px;}
}