/* V4.0 Application Framework */
html{scroll-padding-top:82px}
body.app-shell{min-height:100vh;background:#030303}
.app-stage{position:relative;min-height:70vh;padding-top:76px;overflow:hidden}
.app-frame{display:block;width:100%;min-height:70vh;border:0;background:#030303;opacity:0;transition:opacity .34s ease,filter .34s ease;overflow:hidden}
.app-frame.is-ready{opacity:1}
.app-frame.is-leaving{opacity:.18;filter:blur(5px);pointer-events:none}
.app-route-loader{position:absolute;z-index:5;inset:76px 0 auto;height:260px;display:grid;place-content:center;justify-items:center;gap:12px;color:#777;background:linear-gradient(#030303,rgba(3,3,3,.86),transparent);font:800 .72rem var(--font-display);letter-spacing:.13em;transition:opacity .22s ease,visibility .22s ease}
.app-route-loader img{width:76px;filter:grayscale(1) drop-shadow(0 0 18px rgba(227,6,19,.35));animation:appLoaderPulse 1.25s ease-in-out infinite}
.app-route-loader.is-hidden{opacity:0;visibility:hidden}
.app-shell .site-header{background:rgba(0,0,0,.9);backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.1)}
.app-shell .main-nav a.active{color:white}
.app-shell .main-nav a.active::after{right:0}
.app-footer{position:relative;z-index:3}
.app-route-error{min-height:60vh;display:grid;place-content:center;text-align:center;padding:40px;color:#aaa}
.app-route-error h1{color:white;font:900 3rem var(--font-display);margin:0}
@keyframes appLoaderPulse{0%,100%{transform:scale(.94);opacity:.6}50%{transform:scale(1.04);opacity:1}}
@media(max-width:1020px){.app-stage{padding-top:70px}.app-route-loader{inset-block-start:70px}.app-frame{min-height:78vh}}
@media(prefers-reduced-motion:reduce){.app-frame,.app-route-loader{transition:none}.app-route-loader img{animation:none}}

/* Route documents are full master pages running inside the persistent shell. */
body[data-embedded-route]{overflow:hidden!important;background:#030303}
body[data-embedded-route]>.site-header,
body[data-embedded-route]>footer{display:none!important}
body[data-embedded-route] main{display:block}
body[data-embedded-route="home"] main{margin-top:0}
body[data-embedded-route="news"] .news-hero,
body[data-embedded-route="gallery"] .gallery-hero{padding-top:76px!important}
body[data-embedded-route] .now-playing-rail{right:18px;top:18px}
body[data-embedded-route] .scroll-progress{display:none}
body[data-embedded-route] .page-noise{position:absolute}


/* ========================= V4.0.2 BACK TO TOP ========================= */
.back-to-top{
  position:fixed;
  z-index:230;
  right:20px;
  bottom:22px;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  gap:0;
  padding:6px;
  border:1px solid rgba(227,6,19,.48);
  color:white;
  background:rgba(7,7,8,.84);
  backdrop-filter:blur(14px);
  box-shadow:0 16px 38px rgba(0,0,0,.42),0 0 22px rgba(227,6,19,.1);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.94);
  transition:opacity .24s ease,transform .24s ease,visibility .24s ease,border-color .2s ease,box-shadow .2s ease;
}
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
}
.back-to-top:hover{
  border-color:var(--red);
  box-shadow:0 18px 42px rgba(0,0,0,.48),0 0 28px rgba(227,6,19,.23);
}
.back-to-top svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.back-to-top span{
  font:900 .5rem var(--font-display);
  letter-spacing:.1em;
}
@media(max-width:760px){
  .back-to-top{
    right:14px;
    bottom:76px;
    width:48px;
    height:48px;
  }
}
@media(prefers-reduced-motion:reduce){
  .back-to-top{
    transition:none;
  }
}


/* ========================= V4.0.6 MOBILE NOW PLAYING FIX ========================= */
/*
  Ein fixed Element innerhalb des automatisch auf Seitenhöhe vergrößerten Route-Frames
  kann auf mobilen Browsern fälschlich die gesamte Frame-Fläche belegen.
*/
@media(max-width:760px){
  body[data-embedded-route="home"] .now-playing-rail{
    position:absolute!important;
    top:12px!important;
    right:12px!important;
    bottom:auto!important;
    left:12px!important;
    width:auto!important;
    max-width:none!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    display:grid!important;
    grid-template-columns:10px minmax(0,1fr) auto!important;
    grid-template-rows:48px!important;
    align-items:center!important;
    align-content:center!important;
    gap:9px!important;
    padding:0 11px!important;
    margin:0!important;
    overflow:hidden!important;
    border-radius:0!important;
    z-index:30!important;
    transform:none!important;
    box-sizing:border-box!important;
  }

  body[data-embedded-route="home"] .now-playing-rail .rail-label{
    display:none!important;
  }

  body[data-embedded-route="home"] .now-playing-rail strong{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    font-size:.72rem!important;
    line-height:1!important;
  }

  body[data-embedded-route="home"] .now-playing-rail small{
    display:none!important;
  }

  body[data-embedded-route="home"] .now-playing-rail a{
    display:grid!important;
    place-items:center!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    padding:0!important;
    font-size:1rem!important;
  }

  body[data-embedded-route="home"] .rail-status-dot{
    width:7px!important;
    height:7px!important;
    min-width:7px!important;
  }

  body[data-embedded-route="home"] .hero-v3{
    padding-top:58px!important;
  }
}

@media(max-width:390px){
  body[data-embedded-route="home"] .now-playing-rail{
    left:8px!important;
    right:8px!important;
    top:8px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    grid-template-rows:44px!important;
  }

  body[data-embedded-route="home"] .hero-v3{
    padding-top:52px!important;
  }
}


/* ========================= V4.0.7 LAYOUT POLISH ========================= */

/* Der App-Inhalt soll direkt unter dem persistenten Header beginnen. */
.app-main,
.app-frame-wrap,
.app-route-frame{
  margin-top:0!important;
  padding-top:0!important;
}

/* Verhindert zusätzliche obere Leerfläche im eingebetteten Home-Inhalt. */
body[data-embedded-route="home"]{
  margin-top:0!important;
  padding-top:0!important;
}

body[data-embedded-route="home"] main{
  margin-top:0!important;
  padding-top:0!important;
}

body[data-embedded-route="home"] .hero-v3{
  margin-top:0!important;
  border-top:0!important;
}

/* Der Header bleibt klar getrennt, ohne einen zweiten schwarzen Streifen zu erzeugen. */
.site-header{
  background:rgba(4,4,5,.78)!important;
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}

.site-header.scrolled{
  background:rgba(3,3,4,.92)!important;
}

/* Route-Loader darf nach dem Laden keinen sichtbaren Restbereich behalten. */
.app-route-loader.is-hidden{
  height:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
}

/* Desktop: Hero beginnt exakt am oberen Rand des Route-Inhalts. */
@media(min-width:761px){
  body[data-embedded-route="home"] .hero-v3{
    padding-top:0!important;
  }

  body[data-embedded-route="home"] .hero-inner{
    padding-top:clamp(40px,6vh,78px)!important;
  }
}

/* Mobil: nur Platz für die kompakte Now-Playing-Leiste, kein zusätzlicher Balken. */
@media(max-width:760px){
  body[data-embedded-route="home"] .hero-v3{
    margin-top:0!important;
    padding-top:58px!important;
  }

  body[data-embedded-route="home"] .hero-inner{
    padding-top:14px!important;
  }
}

@media(max-width:390px){
  body[data-embedded-route="home"] .hero-v3{
    padding-top:52px!important;
  }
}


/* ========================= V4.0.8 HEADER GAP HOTFIX ========================= */

/*
  Der schwarze Balken entstand durch padding-top auf .app-stage.
  Da der Header bereits fixed ist, wurde dessen Höhe dadurch ein zweites Mal
  als leerer Bereich reserviert.
*/
.app-stage{
  padding-top:0!important;
}

/* Der Loader beginnt ebenfalls direkt am oberen Rand des Route-Bereichs. */
.app-route-loader{
  inset:0 0 auto!important;
}

/* Die Route selbst beginnt ohne zusätzlichen Außenabstand. */
.app-frame{
  margin:0!important;
  padding:0!important;
  vertical-align:top!important;
}

/*
  Der Hero-Hintergrund läuft direkt bis unter den transparenten Header.
  Der eigentliche Hero-Inhalt erhält genügend sicheren Innenabstand.
*/
@media(min-width:761px){
  body[data-embedded-route="home"] .hero-v3{
    padding-top:118px!important;
  }

  body[data-embedded-route="home"] .hero-inner{
    padding-top:0!important;
  }
}

/* Unterseiten erhalten ebenfalls keinen schwarzen Framework-Abstand. */
body[data-embedded-route="news"] .news-hero,
body[data-embedded-route="gallery"] .gallery-hero{
  margin-top:0!important;
}

/* Mobile: Header + kompakte Now-Playing-Leiste sauber berücksichtigen. */
@media(max-width:760px){
  .app-stage{
    padding-top:0!important;
  }

  .app-route-loader{
    inset-block-start:0!important;
  }

  body[data-embedded-route="home"] .hero-v3{
    padding-top:112px!important;
  }

  body[data-embedded-route="home"] .hero-inner{
    padding-top:0!important;
  }
}

@media(max-width:390px){
  body[data-embedded-route="home"] .hero-v3{
    padding-top:104px!important;
  }
}


/* ========================= V4.0.9 HOME SPACING CLEANUP ========================= */

/* Hall of Fame wurde entfernt; keine verwaisten Abstände stehen lassen. */
body[data-embedded-route="home"] .hall-section{
  display:none!important;
}

/* JOIN THE PACK kompakt und ohne übergroßen Leerraum vor dem Footer. */
body[data-embedded-route="home"] .community-section{
  padding-top:24px!important;
  padding-bottom:24px!important;
  margin:0!important;
}

body[data-embedded-route="home"] .community-card{
  margin:0!important;
}

/* Der Footer schließt direkt und sauber an den Community-Bereich an. */
body[data-embedded-route="home"] footer{
  margin-top:0!important;
}

/* Falls alte Hall-of-Fame-Reveal-Elemente noch gecacht sind, keinen Raum reservieren. */
body[data-embedded-route="home"] #achievementGrid,
body[data-embedded-route="home"] .achievement-grid{
  display:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}

@media(max-width:760px){
  body[data-embedded-route="home"] .community-section{
    padding-top:18px!important;
    padding-bottom:18px!important;
  }

  body[data-embedded-route="home"] .community-card{
    padding:28px 22px!important;
  }
}


/* ========================= V4.0.10 COMMUNITY POLISH ========================= */
body[data-embedded-route="home"] .community-section{
  text-align:center!important;
}

body[data-embedded-route="home"] .community-section .section-heading{
  justify-content:center!important;
  text-align:center!important;
}

body[data-embedded-route="home"] .community-section .section-heading>div{
  width:100%!important;
  text-align:center!important;
}

body[data-embedded-route="home"] .community-section .section-kicker{
  justify-content:center!important;
}

body[data-embedded-route="home"] .community-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

body[data-embedded-route="home"] .community-card h2,
body[data-embedded-route="home"] .community-card h3,
body[data-embedded-route="home"] .community-card p{
  max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

body[data-embedded-route="home"] .community-actions,
body[data-embedded-route="home"] .community-buttons,
body[data-embedded-route="home"] .community-card .hero-actions{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

body[data-embedded-route="home"] .community-card .btn{
  margin-left:0!important;
  margin-right:0!important;
}

@media(max-width:620px){
  body[data-embedded-route="home"] .community-actions,
  body[data-embedded-route="home"] .community-buttons,
  body[data-embedded-route="home"] .community-card .hero-actions{
    flex-direction:column!important;
  }

  body[data-embedded-route="home"] .community-card .btn{
    width:min(100%,320px)!important;
  }
}


/* ========================= V4.0.11 COMMUNITY CENTERING HOTFIX ========================= */

/*
  V4.0.9 setzte auf der Community-Karte margin:0!important.
  Dadurch blieb die komplette Karte am linken Rand, obwohl ihr Inhalt zentriert war.
*/
body[data-embedded-route="home"] .community-section{
  display:block!important;
  width:100%!important;
}

body[data-embedded-route="home"] .community-card{
  width:min(1180px,calc(100% - 40px))!important;
  max-width:1180px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  margin-inline:auto!important;
}

@media(max-width:760px){
  body[data-embedded-route="home"] .community-card{
    width:min(1180px,calc(100% - 26px))!important;
  }
}


/* ========================= V5.0 PUBLIC RELEASE ========================= */
.public-loader{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:8px!important;background:radial-gradient(circle at 50% 45%,rgba(227,6,19,.12),transparent 17rem),#030303!important}
.public-loader-mark{position:relative;width:92px;height:92px;display:grid;place-items:center}
.public-loader-mark img{width:74px!important;height:74px!important;object-fit:contain;filter:drop-shadow(0 0 22px rgba(227,6,19,.32))}
.public-loader-pulse{position:absolute;inset:0;border:1px solid rgba(227,6,19,.32);border-radius:50%;animation:publicPulse 1.3s ease-out infinite}
.public-loader strong{color:#fff;font:900 1.55rem var(--font-display);letter-spacing:.04em}.public-loader strong span{color:var(--red)}
.public-loader small{color:#777;font:800 .58rem var(--font-display);letter-spacing:.14em}
.public-loader-track{width:min(260px,65vw);height:3px;margin-top:11px;overflow:hidden;background:rgba(255,255,255,.07)}
.public-loader-track i{display:block;width:42%;height:100%;background:linear-gradient(90deg,transparent,var(--red),transparent);animation:publicLoad 1.05s ease-in-out infinite}
.release-build{display:block;max-width:300px;line-height:1.45}
@keyframes publicPulse{0%{transform:scale(.72);opacity:.8}100%{transform:scale(1.22);opacity:0}}
@keyframes publicLoad{from{transform:translateX(-120%)}to{transform:translateX(340%)}}
::view-transition-old(root){animation:publicFadeOut .18s ease both}
::view-transition-new(root){animation:publicFadeIn .28s ease both}
@keyframes publicFadeOut{to{opacity:0;filter:blur(3px)}}@keyframes publicFadeIn{from{opacity:0;filter:blur(4px);transform:translateY(7px)}}
@media(prefers-reduced-motion:reduce){.public-loader-pulse,.public-loader-track i{animation:none!important}}
.not-found-page{min-height:100vh;background:radial-gradient(circle at 50% 42%,rgba(227,6,19,.13),transparent 24rem),#020203}
.not-found-main{position:relative;min-height:calc(100vh - 80px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:130px 20px 70px;text-align:center;overflow:hidden}
.not-found-main>img{width:clamp(110px,16vw,190px);filter:grayscale(.35) drop-shadow(0 0 30px rgba(227,6,19,.28))}
.not-found-main h1{margin:12px 0 0;color:#fff;font:900 clamp(3.3rem,9vw,7.5rem)/.82 var(--font-display);text-transform:uppercase}
.not-found-main>p:not(.section-kicker){color:#999}.not-found-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.not-found-orbit{position:absolute;width:460px;height:460px;border:1px solid rgba(227,6,19,.13);border-radius:50%;box-shadow:0 0 0 52px rgba(227,6,19,.025),0 0 0 110px rgba(227,6,19,.014)}


/* ========================= V5.0.1 PUBLIC LAYOUT HOTFIX ========================= */

/* Desktop-Navigation kompakt und einzeilig */
.app-shell .main-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(16px,1.7vw,30px);
  white-space:nowrap;
}

.app-shell .main-nav>a,
.app-shell .nav-more>summary{
  font-size:clamp(.72rem,.75vw,.88rem);
  line-height:1;
  white-space:nowrap;
}

.nav-more{
  position:relative;
  flex:none;
}

.nav-more>summary{
  display:flex;
  align-items:center;
  gap:7px;
  color:inherit;
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  cursor:pointer;
  list-style:none;
  user-select:none;
}

.nav-more>summary::-webkit-details-marker{
  display:none;
}

.nav-more>summary::after{
  content:"";
  width:6px;
  height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease;
}

.nav-more[open]>summary::after{
  transform:rotate(225deg) translate(-1px,-1px);
}

.nav-more-menu{
  position:absolute;
  z-index:260;
  top:calc(100% + 20px);
  right:0;
  width:190px;
  display:grid;
  padding:8px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(5,5,6,.97);
  box-shadow:0 24px 65px rgba(0,0,0,.62),0 0 25px rgba(227,6,19,.08);
  backdrop-filter:blur(18px);
}

.nav-more-menu::before{
  content:"";
  position:absolute;
  top:-1px;
  left:8px;
  right:8px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
}

.nav-more-menu a{
  display:flex!important;
  align-items:center;
  min-height:42px;
  padding:0 12px!important;
  color:#a0a0a0!important;
  border-bottom:1px solid rgba(255,255,255,.055);
  font-size:.72rem!important;
  text-align:left;
}

.nav-more-menu a:last-child{
  border-bottom:0;
}

.nav-more-menu a:hover,
.nav-more-menu a.active{
  color:#fff!important;
  background:rgba(227,6,19,.08);
}

/* Shell-Navigation bekommt Vorrang, Socials bleiben kompakt */
@media(min-width:1101px){
  .app-shell .header-inner{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:24px;
  }

  .app-shell .header-socials{
    gap:7px;
  }

  .app-shell .social-icon{
    width:32px;
    height:32px;
    font-size:.62rem;
  }
}

/* Der App-Frame darf keine veraltete große Mindesthöhe mehr erzeugen */
.app-frame{
  min-height:320px!important;
}

/* Kein zusätzlicher Raum zwischen letztem Route-Element und Shell-Footer */
.app-stage{
  min-height:0!important;
}

.app-footer{
  margin-top:0!important;
}

/* Mobile Navigation: Dropdown wird Teil der normalen Menüliste */
@media(max-width:1100px){
  .app-shell .main-nav{
    display:flex;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    white-space:normal;
  }

  .nav-more{
    width:100%;
  }

  .nav-more>summary{
    min-height:48px;
    padding:0 18px;
  }

  .nav-more-menu{
    position:static;
    width:100%;
    padding:0 0 6px 14px;
    border:0;
    border-left:1px solid rgba(227,6,19,.3);
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
  }

  .nav-more-menu::before{
    display:none;
  }

  .nav-more-menu a{
    min-height:42px;
    padding-left:18px!important;
  }
}


/* ========================= V5.0.2 NAV DROPDOWN HOTFIX ========================= */

/*
  Das Mehr-Menü wurde innerhalb des Header-Stacking-Contexts abgeschnitten.
  Der Header und seine inneren Container müssen Überlauf zulassen.
*/
.site-header,
.app-shell .site-header,
.site-header .header-inner,
.app-shell .header-inner,
.site-header .main-nav,
.app-shell .main-nav{
  overflow:visible!important;
}

.site-header,
.app-shell .site-header{
  z-index:1000!important;
  isolation:isolate;
}

.nav-more{
  z-index:1010!important;
}

.nav-more[open]{
  z-index:1100!important;
}

.nav-more-menu{
  z-index:1200!important;
  top:calc(100% + 14px)!important;
  overflow:visible!important;
}

/* Kleine visuelle Verbindung zwischen Trigger und Dropdown */
.nav-more-menu::after{
  content:"";
  position:absolute;
  top:-7px;
  right:22px;
  width:12px;
  height:12px;
  border-left:1px solid rgba(255,255,255,.11);
  border-top:1px solid rgba(255,255,255,.11);
  background:rgba(5,5,6,.97);
  transform:rotate(45deg);
}

/* Das Dropdown soll über Loader, Route und Hero liegen. */
.app-stage,
.app-route-loader,
.app-frame,
.app-footer{
  z-index:auto!important;
}

@media(max-width:1100px){
  .nav-more-menu{
    z-index:auto!important;
    top:auto!important;
  }

  .nav-more-menu::after{
    display:none!important;
  }
}


/* ========================= V5.0.3 NOW PLAYING RESPONSIVE HOTFIX ========================= */

/*
  Zwischen 761px und ca. 1100px griff aus style.css noch die alte Tablet-Regel:
  position:fixed + bottom. Innerhalb des automatisch skalierten Route-Frames konnte
  daraus eine bildschirmhohe Fläche entstehen.
*/
@media(min-width:761px) and (max-width:1100px){
  body[data-embedded-route="home"] .now-playing-rail{
    position:absolute!important;
    top:18px!important;
    right:14px!important;
    bottom:auto!important;
    left:auto!important;

    width:min(300px,calc(100% - 28px))!important;
    min-width:0!important;
    max-width:300px!important;

    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;

    display:grid!important;
    grid-template-columns:9px auto minmax(0,1fr) 28px!important;
    grid-template-rows:58px!important;
    align-items:center!important;
    align-content:center!important;
    gap:8px!important;

    padding:0 11px!important;
    margin:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    z-index:80!important;
    transform:none!important;
  }

  body[data-embedded-route="home"] .now-playing-rail .rail-label{
    display:block!important;
    white-space:nowrap!important;
    font-size:.52rem!important;
  }

  body[data-embedded-route="home"] .now-playing-rail strong{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    font-size:.7rem!important;
    line-height:1!important;
  }

  body[data-embedded-route="home"] .now-playing-rail small{
    display:none!important;
  }

  body[data-embedded-route="home"] .now-playing-rail a{
    display:grid!important;
    place-items:center!important;
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    padding:0!important;
  }

  body[data-embedded-route="home"] .rail-status-dot{
    width:7px!important;
    height:7px!important;
    min-width:7px!important;
  }
}

/* Auch außerhalb des Embedded-Modus darf das Widget nie flächig wachsen. */
@media(max-width:1100px){
  .now-playing-rail{
    max-height:64px!important;
    overflow:hidden!important;
  }
}