/* Radio shares the merch windows, with a progressive native-player fallback. */
body.site-v2.page-radio { background: url('/assets/images/pixel-stars.svg') repeat, #180959; }
.site-v2.page-radio .radio-main { width: min(100% - 44px, 1120px); margin: 0 auto; padding: 42px 0 24px; border: 0; box-shadow: none; background: transparent; color: #f3f1ff; }
.site-v2.page-radio .radio-main::before { content: none; }
.site-v2.page-radio .radio-heading { text-align: center; margin-bottom: 38px; }
.site-v2.page-radio .radio-heading .eyebrow { color: #d6c9f3; font: 12px/1.6 var(--pixel); margin-bottom: 16px; }
.site-v2.page-radio .radio-heading h1 { color: #e7ff4b; font: 400 clamp(2.4rem, 6vw, 4.4rem)/1.2 var(--display); letter-spacing: -.025em; text-shadow: 3px 3px #fc48b8, 6px 6px #070320; transform: rotate(-2deg); }
.site-v2.page-radio .radio-heading > p { color: #e0d7ef; font-size: 16px; line-height: 1.7; margin-top: 20px; }
.radio-desk { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 30px; align-items: start; }
.radio-desk > *, .radio-track-body, .radio-album-copy { min-width: 0; }
.radio-window { border: 3px solid #e0dbfa; background: #dedeea; color: #1e133b; box-shadow: 6px 6px #07031f; }
.radio-window-bar { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 2px solid #1e133b; background: #552597; color: #fff; font: 11px/1.6 var(--pixel); }
.radio-window-bar > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.radio-window-bar > span:last-child { flex: 0 0 auto; font-family: var(--mono); letter-spacing: 2px; }
.radio-album-body { padding: 20px; }
.radio-cover { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border: 3px inset #f5f3ff; background: #07031f; }
.radio-album-copy { margin-top: 20px; }
.radio-label { font: 11px/1.6 var(--pixel); letter-spacing: .03em; }
.radio-album-copy h2 { font: 400 clamp(1.25rem, 2vw, 1.6rem)/1.35 var(--display); margin: 8px 0; }
.radio-album-copy > p { font-size: 13px; line-height: 1.7; }
.site-v2.page-radio .radio-note { color: #51465f; font-size: 13px; line-height: 1.8; }
.radio-album-copy .radio-note { margin-top: 8px; }
.radio-platforms { display: grid; gap: 10px; padding: 0 20px 20px; }
.radio-platforms a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border: 2px outset #f4ffc1; background: #deff6c; color: #1d1535; font: bold 13px/1.5 var(--mono); }
.radio-platforms a:nth-child(2) { background: #ffb8ec; border-color: #ffe5f7; }
.radio-platforms a:nth-child(3) { background: #e8e4ff; border-color: #fff; }
.radio-platforms a > span { flex: 1; min-width: 0; }
.radio-platforms a > .icon:last-child { width: 16px; height: 16px; }
.radio-queue-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0 2px 14px; color: #e6dbff; }
.radio-tracks { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; }
.radio-tracks li { min-width: 0; }
.radio-track-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; background: #552597; color: #fff; padding: 13px 16px; border-bottom: 2px solid #1e133b; }
.radio-track-number { color: #edff6c; font: 12px/1.6 var(--pixel); }
.radio-track-heading h2 { flex: 1; min-width: 0; font: 400 clamp(1rem, 2.2vw, 1.4rem)/1.5 var(--display); }
.radio-track-duration { font: 13px/1.5 var(--mono); }
.radio-track-body { padding: 18px; }
.radio-credit { margin-bottom: 14px; }
.radio-transport { padding: 16px; border: 2px inset #a19abb; background: #110a30; color: #f3f1ff; }
.radio-display { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 4px; }
.radio-display [data-state] { color: #e5ff66; font: 11px/1.8 var(--pixel); }
.radio-time { font: 16px/1.8 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.radio-seek, .radio-volume { display: block; min-width: 0; max-width: 100%; height: 44px; margin: 0; cursor: pointer; accent-color: #e5ff66; }
.radio-seek { width: 100%; }
.radio-seek:disabled { cursor: default; opacity: .65; }
.radio-controls-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 4px; }
.radio-play, .radio-mute { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 9px 12px; border: 2px outset #f3ffc1; border-radius: 0; background: #deff6c; color: #1d1535; font: bold 14px/1.5 var(--mono); }
.radio-play { min-width: 110px; }
.radio-play > span:first-child, .radio-play > span:nth-child(2) { display: flex; }
.radio-volume-group { display: flex; flex: 1 1 190px; align-items: center; gap: 12px; max-width: 260px; min-width: 0; }
.radio-mute { background: #dbd6ed; border-color: #f0ecff; font-size: 12px; flex-shrink: 0; }
.radio-volume { flex: 1; width: 90px; }
.radio-native-toggle { display: block; min-height: 44px; max-width: 100%; margin-top: 8px; padding: 10px 0; border: 0; border-radius: 0; background: transparent; color: #d4c5f2; font: 12px/1.7 var(--body); text-decoration: underline; text-underline-offset: 3px; }
.radio-player-message { color: #ffcfed; font-size: 14px; line-height: 1.7; margin-top: 14px; }
.radio-native { padding-top: 8px; }
.radio-native audio { display: block; width: 100%; max-width: 100%; min-height: 54px; }
.radio-lyrics { margin-top: 16px; border-top: 1px solid #a79bb8; }
.radio-lyrics summary { min-height: 48px; padding: 14px 0 4px; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1.7; }
.radio-lyrics .radio-note { margin: 14px 0 18px; }
.radio-lyric-text { font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.radio-lyric-text p { margin: 0 0 1.4em; }
.radio-lyrics a { text-decoration: underline; text-underline-offset: .2em; }
.radio-lyrics a .icon { vertical-align: middle; width: 15px; height: 15px; }
.radio-continue { display: flex; align-items: center; gap: 12px; min-height: 48px; width: fit-content; max-width: 100%; margin-top: 18px; color: #f3f1ff; font-size: 14px; line-height: 1.7; cursor: pointer; }
.radio-continue input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: #deff6c; }
.radio-mastering { color: #cfc1e8; font-size: 13px; line-height: 1.8; margin-top: 10px; }
.radio-status { color: #ffdfec; font-size: 14px; line-height: 1.7; margin-top: 10px; }
.radio-status:empty { display: none; }
.radio-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; padding: 10px; border: 3px outset #e2dffa; background: #b8b4d9; }
.radio-more a { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1 1 200px; padding: 12px; min-height: 48px; background: #dcd5f0; border: 2px outset #f2f0ff; color: #28113f; font: bold 13px/1.5 var(--mono); }
.radio-connect { margin-top: 42px; }
.radio-connect-heading { display: flex; align-items: center; justify-content: center; gap: 16px; text-align: center; margin-bottom: 20px; }
.radio-connect-heading h2 { color: #f3eaff; font: 400 clamp(1rem, 2vw, 1.5rem)/1.6 var(--display); }
.radio-connect-heading > span { flex-shrink: 0; color: #e5ff66; font-size: 30px; }
.radio-socials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.radio-socials a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px; border: 2px outset #bba8ef; box-shadow: 3px 3px #080323; background: #30205e; color: #f9ecff; font: bold 13px/1.6 var(--mono); }
.radio-socials a > span { flex: 1; min-width: 0; }
.radio-socials small { display: block; font: 11px/1.7 var(--body); color: #e0d1fa; }
.radio-socials .icon:last-child { width: 14px; height: 14px; }
.radio-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.site-v2.page-radio .radio-main :focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px #10072f; }
@media (hover: hover) { .radio-play:hover, .radio-platforms a:hover, .radio-more a:hover { background: #f0ffc4; color: #211535; } .radio-mute:hover { background: #f1eaff; } .radio-socials a:hover { background: #493084; border-color: #fda2e6; } }
@media (max-width: 800px) {
  .radio-desk { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .radio-album-body { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 20px; align-items: center; }
  .radio-album-copy { margin-top: 0; }
  .radio-platforms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .radio-platforms a { justify-content: center; flex-wrap: wrap; gap: 6px; font-size: 12px; padding-inline: 8px; }
  .radio-platforms a > span { flex: 0 1 auto; }
  .radio-platforms a > .icon:last-child { display: none; }
  .radio-socials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .site-v2.page-radio .radio-main { width: calc(100% - 32px); padding-top: 30px; }
  .site-v2.page-radio .radio-heading { margin-bottom: 28px; }
  .site-v2.page-radio .radio-heading .eyebrow { font-size: 10px; }
  .site-v2.page-radio .radio-heading > p { font-size: 14px; margin-top: 16px; }
  .radio-window-bar { padding: 8px 10px; font-size: 10px; }
  .radio-album-body { padding: 14px; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; }
  .radio-album-copy h2 { font-size: 1.1rem; }
  .radio-album-copy > p, .site-v2.page-radio .radio-album-copy .radio-note { font-size: 11px; }
  .radio-album-copy .radio-label { font-size: 10px; }
  .radio-platforms { gap: 8px; padding: 0 14px 14px; }
  .radio-track-heading { padding: 10px 12px; gap: 8px; }
  .radio-track-body { padding: 14px; }
  .radio-transport { padding: 12px; }
  .radio-play { min-width: 102px; }
  .radio-volume-group { flex-basis: 160px; max-width: none; }
  .radio-time { font-size: 14px; }
  .radio-connect-heading { gap: 8px; }
  .radio-socials a { gap: 8px; padding: 10px 8px; font-size: 12px; }
}
@media (max-width: 360px) { .radio-socials .icon:last-child { display: none; } .radio-platforms a { flex-direction: column; } }
/* Keep the bright star texture out of text without changing the shared scene. */
.site-v2.page-radio .radio-heading { width: fit-content; max-width: 100%; margin-inline: auto; padding: 0 12px; background: #180959; }
.radio-queue-heading, .radio-continue, .radio-mastering, .radio-status:not(:empty), .radio-connect-heading { background: #180959; box-shadow: 0 0 0 4px #180959; }
.radio-mastering, .radio-status:not(:empty) { width: fit-content; max-width: 100%; }
.radio-connect-heading { width: fit-content; max-width: 100%; margin-inline: auto; }
/* Explicit native range paint also keeps WebKit's rail visible on dark panels. */
.radio-seek, .radio-volume { -webkit-appearance: none; appearance: none; background: transparent; }
.radio-seek::-webkit-slider-runnable-track, .radio-volume::-webkit-slider-runnable-track { height: 8px; border: 1px inset #e3dbff; border-radius: 0; background: #8f83b3; }
.radio-seek::-webkit-slider-thumb, .radio-volume::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 18px; height: 20px; margin-top: -7px; border: 2px outset #f3ffc1; border-radius: 0; background: #e5ff66; }
.radio-seek::-moz-range-track, .radio-volume::-moz-range-track { height: 8px; border: 1px inset #e3dbff; border-radius: 0; background: #8f83b3; }
.radio-seek::-moz-range-thumb, .radio-volume::-moz-range-thumb { box-sizing: border-box; width: 18px; height: 20px; border: 2px outset #f3ffc1; border-radius: 0; background: #e5ff66; }

/* Forthcoming songs are readable static rows, never dormant players. */
.radio-unreleased { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 16px; border: 2px solid #968bab; background: #110a30; color: #cfc1e8; }
.radio-unreleased .radio-track-number { color: inherit; }
.radio-unreleased h2 { font: 400 clamp(1rem, 2.2vw, 1.4rem)/1.5 var(--display); overflow-wrap: anywhere; }
.radio-unreleased-status { grid-column: 2; font: 13px/1.7 var(--body); }
.radio-platform-note { padding: 0 20px 14px; color: #51465f; font: 13px/1.8 var(--body); }
.radio-album-copy h2 span { display: block; margin-top: 5px; font-size: .8em; }
@media (max-width: 400px) {
  .radio-album-body { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .radio-cover { width: min(100%, 200px); margin-inline: auto; }
}