/* New entertainment rail, with the existing chart navigation in the top menu. */
.af-play-navigation .af-legacy-menu { position: relative; display: block !important; flex: 0 0 auto; margin-left: auto; z-index: 120; }
.af-legacy-menu > summary { display: grid; place-items: center; width: 44px; height: 44px; padding: 8px; list-style: none; cursor: pointer; border: 1px solid #c0a9f12b; border-radius: 12px; background: #1a1730; color: #e9ddff; }
.af-legacy-menu > summary::-webkit-details-marker { display: none; }
.af-legacy-menu > summary svg { width: 24px; height: 24px; fill: currentColor; stroke: currentColor; }
.af-legacy-menu[open] > summary { background: #403359; }
.af-legacy-menu > nav { position: absolute; top: calc(100% + 12px); right: 0; width: min(320px, calc(100vw - 24px)); max-height: calc(100dvh - 100px); overflow-y: auto; padding: 16px; border: 1px solid #b89ee442; border-radius: 16px; background: #161525; box-shadow: 0 16px 70px #0009; }
.af-legacy-menu:not([open]) > nav { display: none; }
.af-menu-caption { display: block; padding: 0 10px 12px; color: #a49ab8; font: 11px/1.4 system-ui, sans-serif; letter-spacing: .13em; }
.af-legacy-menu nav > a { display: block; padding: 10px 12px; border-radius: 8px; color: #e6deef; font: 14px/1.4 system-ui, sans-serif; text-decoration: none; }
.af-legacy-menu nav > a:hover, .af-legacy-menu nav > a.active { background: #bba0ed18; color: #e3c6ff; }
.af-menu-settings { margin-top: 12px; border-top: 1px solid #a890c329; padding-top: 8px; }
.af-menu-settings #rail-label-toggle { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: #aba0bf; padding: 10px; text-align: left; font: 13px system-ui, sans-serif; cursor: pointer; }
.af-menu-settings .home-density-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: #ded2ef; text-align: left; font: 13px/1.4 system-ui, sans-serif; cursor: pointer; }
.af-menu-settings .home-density-toggle[hidden] { display: none; }
.af-menu-settings .home-density-toggle::after { content: ''; flex: 0 0 18px; text-align: center; }
.af-menu-settings .home-density-toggle[aria-pressed="true"]::after { content: '✓'; }
.af-menu-settings .home-density-toggle:hover { background: #bba0ed18; }
.af-menu-settings .home-density-toggle:focus-visible { outline: 2px solid #c5a6f0; outline-offset: 2px; }
.af-menu-settings .rail-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; }
.af-play-navigation #app-rail .rail-main { overflow-y: auto; overflow-x: hidden; min-height: 0; flex: 1; gap: 4px; }
.af-play-navigation #app-rail .rail-footer { padding-top: 12px; border-top: 1px solid #b89ee41c; margin-top: 12px; flex: 0 0 auto; }
.af-play-navigation #app-rail :is(a, button) { white-space: normal; }
body.af-play-navigation.rail-labels-visible #app-rail a > span:not(.rail-icon) { max-width: 160px; line-height: 1.4; }
.af-play-navigation #app-rail svg, .af-play-mobile svg, .af-play-drawer svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.af-play-mobile { display: none; }
.af-play-drawer { color: #ede6f8; background: #151325; border: 1px solid #b89ee450; border-radius: 20px; width: min(480px, calc(100vw - 28px)); max-height: 85dvh; padding: 20px; }
.af-play-drawer::backdrop { background: #090812bb; backdrop-filter: blur(5px); }
.af-play-drawer header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.af-play-drawer header button { width: 44px; height: 44px; border: 0; border-radius: 10px; color: inherit; background: #ffffff0a; font-size: 24px; cursor: pointer; }
.af-play-drawer nav { display: grid; gap: 4px; }
.af-play-drawer nav a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; color: inherit; text-decoration: none; font: 14px/1.4 system-ui, sans-serif; }
.af-play-drawer nav a:hover, .af-play-drawer nav a.active { background: #ad8dde20; color: #e0c2ff; }
body.af-refresh.af-play-navigation .mobile-bottom-nav { display: none !important; }
@media (min-width: 981px) {
  body.af-play-navigation.rail-labels-visible #app-rail a { min-height: 48px !important; font-size: 13px !important; }
}
@media (max-width: 980px) {
  .af-play-navigation #app-rail { display: none !important; }
  .af-play-navigation .app-header { gap: 10px; }
  .af-play-navigation .app-main { padding-bottom: calc(94px + env(safe-area-inset-bottom)) !important; }
  .af-play-mobile { position: fixed; display: grid; grid-template-columns: repeat(4, 1fr); bottom: 0; left: 0; right: 0; z-index: 110; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: #121021f5; border-top: 1px solid #b89ee431; backdrop-filter: blur(16px); }
  .af-play-mobile > :is(a,button) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #b9aecb; background: transparent; border: 0; border-radius: 10px; padding: 6px 2px; text-decoration: none; font: 11px/1.3 system-ui, sans-serif; cursor: pointer; }
  .af-play-mobile > a.active { color: #ead5ff; background: #ab8ddd16; }
  .af-play-mobile .rail-icon { height: 22px; }
  .af-play-navigation .af-profile-edit { margin-left: 4px; }
  .af-play-navigation .af-profile-copy { min-width: 0; }
  .af-play-navigation .af-profile-copy strong { max-width: 35vw; }
}
@media print { .af-play-mobile, .af-legacy-menu, .af-play-drawer { display: none !important; } }
body.af-play-navigation.rail-labels-visible #app-rail a > span:not(.rail-icon) { white-space: normal !important; overflow: visible !important; text-overflow: clip; min-width: 0; flex: 1; max-width: none !important; }