/* A small architectural music scene, built with vectors rather than WebGL. */
#music-neighborhood-title { scroll-margin-top: 110px; }

.room-explore-link {
  display: inline-block;
  margin: 12px 0;
  color: var(--midnight-accent);
  font-size: 12px;
  text-underline-offset: 5px;
}

/* Keep the music footer visually attached to the midnight theme. The high
 * specificity here protects the component from generic footer rules. */
#footer section.music-neighborhood {
  display: block !important;
  box-sizing: border-box;
  width: min(1440px, 100%) !important;
  margin: 0 auto 34px !important;
  padding: clamp(28px, 4vw, 58px) clamp(22px, 4vw, 58px) 20px !important;
  overflow: hidden;
  border: 1px solid rgba(185, 216, 194, 0.18);
  border-radius: 26px;
  color: #dce8dc !important;
  text-align: left;
  background:
    radial-gradient(circle at 86% 10%, rgba(111, 148, 119, 0.16), transparent 34%),
    linear-gradient(145deg, #111c17 0%, #0d1511 72%, #0b110f 100%) !important;
  box-shadow: inset 0 1px 0 rgba(230, 244, 230, 0.08), 0 22px 70px rgba(0, 0, 0, 0.42) !important;
}

#footer .music-neighborhood__top {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr) !important;
  gap: clamp(28px, 5vw, 72px) !important;
  align-items: start;
}

#footer .music-neighborhood__eyebrow {
  margin: 0 0 20px !important;
  color: #94ad99 !important;
  font: 10px/1.5 monospace;
  letter-spacing: .2em;
}

#footer #music-neighborhood-title {
  max-width: 620px;
  margin: 0 !important;
  color: #e7f0e6 !important;
  font-size: clamp(26px, 3.2vw, 44px) !important;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.035em;
}

#footer .music-neighborhood__intro {
  max-width: 560px;
  margin: 17px 0 0 !important;
  color: #94a599 !important;
  font-size: 12px;
  line-height: 1.8;
}

#footer nav.music-neighborhood__links {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  min-width: 0;
  padding-top: 5px;
}

#footer .music-neighborhood__links > div {
  display: flex !important;
  min-width: 0;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#footer .music-neighborhood__links span {
  display: block;
  margin: 0 0 9px !important;
  color: #77937d !important;
  font: 9px/1.6 monospace;
  letter-spacing: .13em;
}

#footer .music-neighborhood a {
  color: #b9d8c2 !important;
}

#footer .music-neighborhood__links a {
  display: block !important;
  margin: 0 !important;
  padding: 3px 0 !important;
  color: #b7cbbb !important;
  font-size: 12px;
  line-height: 1.6;
  white-space: normal;
}

#footer .music-neighborhood a:hover {
  color: #f0f7ed !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

#footer .neighborhood-radio {
  display: grid !important;
  grid-template-columns: 45px minmax(0, 1fr) auto !important;
  gap: 12px 18px;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  margin-top: 34px;
  padding: 18px 20px 12px;
  border: 1px solid rgba(185, 216, 194, 0.2);
  border-radius: 16px;
  color: #dce8dc;
  background: rgba(24, 42, 30, 0.86);
}

#footer .neighborhood-radio[hidden] { display: none !important; }

#footer .neighborhood-radio__dial {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #324d3a 0 2px, #42614b 3px 4px);
  box-shadow: 0 3px 7px rgba(0, 0, 0, .28);
}

#footer .neighborhood-radio__dial span {
  padding: 5px;
  border-radius: 50%;
  color: #edf4df;
  background: #66826b;
  font: 9px monospace;
}

#footer .neighborhood-radio__info {
  display: flex !important;
  min-width: 0;
  flex-direction: column !important;
  gap: 4px !important;
}

#footer .neighborhood-radio__info > span {
  color: #9ab59d;
  font: 9px monospace;
  letter-spacing: .1em;
}

#footer .neighborhood-radio__info strong {
  overflow-wrap: anywhere;
  color: #edf4ec;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}

#footer .neighborhood-radio__info small {
  color: #98ad9b;
  font-size: 11px;
}

#footer .neighborhood-radio__credits {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px;
  color: #90a593;
  font-size: 10px;
}

#footer .neighborhood-radio__actions {
  display: flex !important;
  gap: 8px;
}

#footer .neighborhood-radio__actions button {
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid #86a98c;
  border-radius: 30px;
  color: #0b1510;
  background: #b9d8c2;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}

#footer .neighborhood-radio__actions button + button {
  border-color: rgba(185, 216, 194, .34);
  color: #c5ddc8;
  background: transparent;
}

#footer .neighborhood-radio__status {
  grid-column: 2 / -1;
  min-height: 16px;
  margin: 0;
  color: #8fa391;
  font-size: 10px;
  line-height: 1.6;
}

#footer .music-street {
  margin: 28px 0 0;
  padding: 0 4%;
}

#footer .music-street__art {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

#footer .music-street__art svg {
  display: block;
  width: 100%;
  max-height: clamp(220px, 29vw, 340px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .24));
}

#footer .music-street__channels {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 16px 0 0 !important;
}

#footer .music-street__channels button {
  display: block !important;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 12px 9px !important;
  border: 0 !important;
  border-top: 1px solid rgba(185, 216, 194, .2) !important;
  border-radius: 0 !important;
  color: #94a99a !important;
  text-align: left;
  background: transparent !important;
  cursor: pointer;
  transition: color .2s, border-color .2s, transform .2s, background .2s;
}

#footer .music-street__channels span {
  display: block;
  color: inherit;
  font: 8px/1.5 monospace;
  letter-spacing: .06em;
  white-space: normal;
}

#footer .music-street__channels strong {
  display: block;
  margin-top: 5px;
  color: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
}

#footer .music-street__channels button[aria-pressed="true"] {
  border-top-color: #91b998 !important;
  color: #dcf0df !important;
  background: rgba(126, 170, 135, .09) !important;
}

@media (hover: hover) {
  #footer .music-street__channels button:hover {
    border-top-color: #7da985 !important;
    color: #d8edd9 !important;
    transform: translateY(-3px);
  }
}

#footer .music-neighborhood__fineprint {
  margin: 16px 0 0 !important;
  color: #809487 !important;
  font-size: 10px;
  line-height: 1.8;
  text-align: center;
}

.street-vinyl { animation: street-turn 16s linear infinite; animation-play-state: paused; }
.street-signal, .street-lamp { animation: street-glow 3s ease-in-out infinite alternate; animation-play-state: paused; }
.is-on-air.street-in-view .street-vinyl,
.is-on-air.street-in-view .street-signal,
.is-on-air.street-in-view .street-lamp { animation-play-state: running; }

@keyframes street-turn { to { transform: rotate(360deg); } }
@keyframes street-glow { to { opacity: .3; } }

.sakura-player__eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
html.is-mobile-device #sakura-player[data-open-music="true"] .sakura-player__eyebrow { display: block; margin: 0; font-size: 8px; letter-spacing: 0; }
html.is-mobile-device #sakura-player[data-open-music="true"] .sakura-player__meta small { display: block; margin: 0; overflow: hidden; font-size: 9px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
#footer .music-neighborhood :is(a, button):focus-visible { outline: 2px solid #b9d8c2; outline-offset: 4px; }

@media (max-width: 760px) {
  #footer section.music-neighborhood { padding: 26px 18px 18px !important; border-radius: 20px; }
  #footer .music-neighborhood__top { grid-template-columns: 1fr !important; gap: 26px !important; }
  #footer nav.music-neighborhood__links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
  #footer .music-neighborhood__links > div { gap: 4px !important; }
  #footer .neighborhood-radio { grid-template-columns: 34px minmax(0, 1fr) !important; gap: 12px; margin-top: 26px; padding: 16px; }
  #footer .neighborhood-radio__dial { width: 32px; height: 32px; }
  #footer .neighborhood-radio__actions { grid-column: 1 / -1; }
  #footer .neighborhood-radio__actions button { flex: 1; padding: 10px 8px; }
  #footer .neighborhood-radio__status { grid-column: 1 / -1; }
  #footer .music-street { margin-top: 26px; padding: 0; overflow: hidden; }
  #footer .music-street__art { width: 128%; margin-left: -14%; }
  #footer .music-street__art svg { max-height: 250px; }
  #footer .music-street__channels { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px 14px !important; margin: 16px 0 0 !important; }
  #footer .music-street__channels button { min-height: 58px; text-align: left; }
  #footer .music-neighborhood__fineprint { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .street-vinyl, .street-signal, .street-lamp { animation: none; }
  #footer .music-street__channels button { transition: none; }
}