/* Listen (pairs with js/listen-featured.js).
   A round play button sits on every track cover, on phone and desktop alike. It rides on the .pp overlay, which
   js/play-overlay.js already keeps exactly over each row's artwork.
     - big covers (My Boy, Inevitable): bottom-left corner, so the artwork stays visible
     - small covers in the lists below (songs, scoring, trailers, album tracks): centred, the cover is too small for a corner
   While a track is open (or hovered with a mouse) the button gives way to the usual play / pause mark. */
html body #listen .pt>.pp{opacity:1!important;background:transparent!important;transition:background .2s}
html body #listen .pt>.pp:before{opacity:0;transition:opacity .2s}
html body #listen .pt>.pp:after{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;box-sizing:border-box;border-radius:50%;
  background:rgba(240,238,234,.24) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M11 8.5l9 5.5-9 5.5z' fill='%23f2efe9'/%3E%3C/svg%3E") center/100% no-repeat;
  border:1px solid rgba(255,255,255,.26);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 1px 6px rgba(0,0,0,.28);transition:opacity .2s}
html body #listen .v2-fwrap .pt>.pp:after{left:7px;top:auto;bottom:7px;margin:0;width:32px;height:32px}
html body #listen .pt.on>.pp,html body #listen .pt.playing>.pp{background:rgba(0,0,0,.35)!important}
html body #listen .pt.on>.pp:before,html body #listen .pt.playing>.pp:before{opacity:1}
html body #listen .pt.on>.pp:after,html body #listen .pt.playing>.pp:after{opacity:0}
@media (hover:hover){
  html body #listen .pt:hover>.pp{background:rgba(0,0,0,.35)!important}
  html body #listen .pt:hover>.pp:before{opacity:1}
  html body #listen .pt:hover>.pp:after{opacity:0}
}
/* phones: "More", then the mini menu; a list only opens once a menu button is tapped */
.lf-more{display:none}
@media (max-width:900px){
  html body #listen .lf-more{display:block;text-align:center;margin:22px 0 12px!important}
  html body #listen .v2-listen.lf-closed .v2-grps{display:none!important}
}
