/* Higher Self - 1376 [stated]: playerul cu sunetele ambientale deschise.
   Problema: cu titlu pe doua randuri, coperta urca peste butoanele de sus si randul de sunete intra peste titlu.
   Acum marimea copertei se ia din locul real ramas intre bara de sus si titlu (container query pe .muNowStage),
   nu dintr-o scadere fixa din inaltimea ecranului. Cu sunetele deschise: coperta si butoanele cu 10% mai mici,
   aer egal deasupra si dedesubtul butoanelor, aer si sub butoanele de sus. */

@supports (height: 1cqh) {
  .muNowStage { container-type: size; }
  /* fara sunete: coperta incape mereu (16px = locul umbrei din carusel, plus 12px aer sus si jos) */
  .muNowCar { --cw: min(calc(min(100vw, 430px) * .9 - 20px), 370px, calc(100cqh - 40px)); }

  /* cu sunete: 90% din coperta de baza, si cat permite inaltimea (45 butoanele + 24 aerul lor + 16 umbra) */
  .muNow.muNowSfxOn .muNowStage { justify-content: flex-start; padding-top: 10px; box-sizing: border-box; }
  .muNow.muNowSfxOn .muNowCar { --cw: min(calc((min(100vw, 430px) * .9 - 20px) * .9), 333px, calc(100cqh - 85px)); }
  /* locul ramas se imparte egal: deasupra copertei, deasupra si dedesubtul butoanelor */
  .muNow.muNowSfxOn .muNowStage::before { content: ''; display: block; flex: 0 0 0; margin-bottom: auto; }
  .muNow.muNowSfxOn .muNowSfx { margin-block: auto; }
}

/* butoanele de sub coperta: 10% mai mici (50 -> 45), aer egal sus si jos
   (sus: 8px umbra caruselului + 10; jos: 14 + 4 padding-ul de deasupra titlului) */
.muNow .muNowSfx { padding: 10px 0 14px !important; gap: 13px; }
.muNow .muSfxO { width: 45px; height: 45px; flex: 0 0 45px; }
.muNow .muSfxO svg { width: 20px; height: 20px; }
@media (max-width: 340px) { .muNow .muNowSfx { gap: 9px; } .muNow .muSfxO { width: 42px; height: 42px; flex-basis: 42px; } }

/* ---- fereastra cu toate cele 20 de sunete: incape intreaga pe ecran, fara derulare ---- */
.muSfxAllIn { padding: 16px 14px 14px; }
.muSfxAllIn .muNowSheetH { margin-bottom: 10px; }
.muSfxGrid { gap: 8px 4px; }
.muSfxCell { gap: 5px; }
.muSfxCell i { width: 45px; height: 45px; transition: background .18s ease, color .18s ease, transform .12s ease; }
.muSfxCell i svg { width: 20px; height: 20px; }
.muSfxCell span { font-size: 11px; min-height: 26px; }
.muSfxNote { margin: 10px 0 0; font-size: 12px; }
/* „Opreste toate” si „Gata” pe acelasi rand, mereu acolo: fereastra nu mai creste cand alegi un sunet */
.muSfxBtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.muSfxBtns .muNowSheetB { margin: 0; height: 44px; }
.muSfxBtns .muNowSheetB:disabled { opacity: .38; cursor: default; }
/* ecrane scunde: inca un pas mai mic */
@media (max-height: 680px) {
  .muSfxCell i { width: 40px; height: 40px; }
  .muSfxCell span { font-size: 10.5px; min-height: 25px; }
  .muSfxGrid { gap: 6px 4px; }
  .muSfxBtns .muNowSheetB { height: 40px; }
}

/* mesajul de sus: al saselea sunet nu porneste */
.muSfxToast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 14px); z-index: 10000;
  transform: translate(-50%, -10px); width: max-content; max-width: min(360px, calc(100vw - 32px));
  padding: 10px 16px; border-radius: 16px; background: rgba(255, 255, 255, .95); color: #141022;
  font-size: 13.5px; font-weight: 700; line-height: 1.35; text-align: center;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .55); opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.muSfxToast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .muSfxToast { transition: opacity .2s; transform: translate(-50%, 0); } }

/* 1376 [stated]: glisarea prin coperte doar rasfoieste; mesajul de peste coperta, dupa 2 s pe alta piesa */
.muNowStage { position: relative; }
.muNowBr {
  position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, calc(-50% + 6px));
  width: max-content; max-width: calc(min(100vw, 430px) - 64px); padding: 9px 16px; border-radius: 99px;
  background: rgba(255, 255, 255, .92); color: #141022; font-size: 13.5px; font-weight: 700; line-height: 1.3; text-align: center;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.muNowBr.on { opacity: 1; transform: translate(-50%, -50%); }

/* 1376 [stated]: Explorează > Piese: din ce playlist face parte piesa, un rand mic sub durata */
.mudTile .mudOv small.mudPl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; opacity: .78; }