/* Classical channel presentation; playback remains in app.mjs. */
:root {
  --bg: #0d0e13;
  --surface: #15161d;
  --high: #22232d;
  --line: #2c2d38;
  --muted: #a7a8b5;
  --text: #f7f7fb;
  --accent: #d5b475;
  font-family: Arial, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
}
body { background: radial-gradient(ellipse 850px 700px at 15% 0%, #222336 0, transparent 75%), var(--bg); }
html { scroll-padding-top: 96px; }
.site-header {
  position: sticky; top: 0; z-index: 20; min-height: 76px;
  padding: 0 4%; gap: 32px;
  background: rgba(13,14,19,.96); backdrop-filter: blur(14px);
}
.brand { gap: 12px; font-size: 20px; letter-spacing: .02em; }
.brand strong, .footer-brand strong { color: var(--text); }
.brand small { margin-top: 7px; font-size: 10px; letter-spacing: .16em; }
.brand-mark {
  width: 38px; height: 38px; padding: 0; border-radius: 11px;
  background: linear-gradient(135deg, #d5b475, #8e713e); color: #101820;
  font-size: 22px; font-style: italic; box-shadow: 0 0 30px #ff4d6d20;
}
.site-header nav { margin-right: auto; gap: 28px; }
.site-header nav a { display: flex; align-items: center; min-height: 76px; padding: 0; color: var(--muted); font-size: 14px; }
.site-header nav a:hover, .site-header nav a.active { color: #fff; border-color: #ff4d6d; }
.edition { color: var(--muted); font-size: 12px; white-space: nowrap; }
.main-shell { max-width: 1460px; width: calc(100% - 60px); margin: 0 auto; }
.page-title { max-width: 1000px; margin: auto; padding: 22px 0 18px; gap: 16px; }
.page-title h1 { font-size: 18px; letter-spacing: .02em; }
.eyebrow { color: var(--muted); font-size: 11px; letter-spacing: .18em; }
.page-title .eyebrow { margin-bottom: 4px; }
.clock-block { font-size: 12px; gap: 8px; }
.clock-block strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.watch-section { max-width: none; margin: auto; border: 0; background: transparent; overflow: visible; }
.watch-summary {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  align-items: stretch; padding: 18px 20px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(145deg, #1a1b25, #13141b);
}
.watch-current { min-width: 0; padding-right: 20px; }
.watch-summary h2 { font-size: 20px; margin-top: 10px; min-height: 0; }
.onair-label { color: #43dfa2; background: #43dfa20e; border-color: #43dfa233; }
.channel-small { color: var(--muted); font-size: 13px; }
.watch-grid { display: block; }
.player-column { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #12131a; }
.player-stage { background: #050507; }
.play-disc { background: linear-gradient(135deg, #ff4d6d, #7b61ff); color: white; box-shadow: 0 0 36px #ff4d6d26; }
.player-controls { padding: 14px 18px; gap: 12px; }
.player-controls button { min-height: 42px; border-radius: 7px; font-size: 14px; }
.player-controls a { font-size: 14px; }
.player-status { font-size: 14px; }
.video-meta { background: #12131a; font-size: 14px; }
.next-summary {
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; min-width: 0; border: 0; border-left: 1px solid var(--line);
  padding: 0 48px 0 24px; margin: 0; background: transparent; min-height: 85px;
}
.next-summary .eyebrow { justify-content: flex-start; gap: 16px; color: var(--muted); }
.next-summary strong { font-size: 16px; -webkit-line-clamp: 2; }
.next-icon { right: 20px; top: 32px; color: var(--accent); }
.ad-slot { max-width: 1000px; margin: 24px auto 36px; padding: 0; scroll-margin-top: 96px; }
.ad-slot-inner {
  position: relative; min-height: 120px; padding: 22px 24px; border: 1px dashed #4b4c5d; border-radius: 12px;
  background: repeating-linear-gradient(135deg, #181923 0, #181923 12px, #14151e 12px, #14151e 24px);
}
.ad-slot-inner::before, .ad-slot-inner::after { content: ''; position: absolute; width: 14px; height: 14px; border-color: #787987; pointer-events: none; }
.ad-slot-inner::before { left: 8px; top: 8px; border-left: 2px solid; border-top: 2px solid; }
.ad-slot-inner::after { right: 8px; bottom: 8px; border-right: 2px solid; border-bottom: 2px solid; }
.ad-slot-label { color: #b2b3c3; font-size: 12px; letter-spacing: .12em; }
.ad-slot-copy h2 { font-size: 20px; }
.ad-slot-cta { border: 1px solid #6b4d70; border-radius: 8px; background: #2a1b2e; color: #ffe4ed; font-size: 15px; }
.ad-slot-cta:hover { background: #3b2541; border-color: var(--accent); }
.ad-slot-note { font-size: 12px; }
.amazon-inline-ad { max-width: none; margin: 18px 0 30px; }
.amazon-inline-ad-inner { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.6fr); align-items: stretch; gap: 0; padding: 0; }
.amazon-inline-copy { padding-left: 30px; }
.amazon-inline-copy h2 { margin-top: 7px; font-size: 20px; }
.amazon-inline-copy p { margin-top: 7px; color: var(--muted); font-size: 13px; }
.amazon-inline-copy .amazon-inline-note { margin-top: 16px; }
.amazon-inline-note { display: grid; gap: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.amazon-inline-note small { display: block; overflow-wrap: break-word; word-break: normal; line-break: strict; text-wrap: balance; }
.amazon-inline-note a { color: var(--accent); font-size: 12px; font-weight: 800; overflow-wrap: break-word; word-break: normal; line-break: strict; text-wrap: balance; }
.channel-panel { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #101117; }
.panel-heading { align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { font-size: 18px; }
.panel-heading .eyebrow { margin-bottom: 4px; }
.mix-channels { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; padding: 12px; }
.mix-channel {
  display: flex; align-items: center; text-align: left; min-height: 90px; padding: 12px; gap: 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.mix-channel:hover { background: var(--high); }
.mix-channel.active { background: #22232d; border-color: #6b6275; box-shadow: inset 0 2px var(--channel-color,var(--accent)); }
.mix-channel strong { font-size: 14px; margin: 0; color: var(--text); }
.mix-channel small { font-size: 12px; color: var(--muted); }
.channel-arrow { display: none; }
.channel-num { color: var(--channel-color,var(--accent)); font-size: 22px; }
.artist-select { display: grid; grid-template-columns: auto minmax(140px,1fr) minmax(170px,1fr) auto; gap: 12px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--line); }
.artist-select label, .artist-select>a { margin: 0; font-size: 14px; }
.artist-select input, .artist-select select { width: 100%; min-width: 0; margin: 0; background: #191a23; border-color: #383946; border-radius: 7px; font-size: 14px; }
.guide-section, .artists-section, .catalog-section { padding-top: 44px; }
.section-head { align-items: center; gap: 20px; }
.section-head h2 { font-size: 24px; }
.guide-controls { flex-wrap: wrap; }
.guide-groups { gap: 8px; border: 0; border-radius: 0; overflow: visible; }
.guide-groups button { min-height: 50px; padding: 10px 18px; border: 1px solid #383946; border-radius: 8px; font-size: 16px; }
.guide-groups button[aria-pressed=true], .segments button[aria-pressed=true] { color: #ffe6ed; background: #30202c; border-color: #a65171; }
.guide-groups button+button { border-left: 1px solid #383946; }
.guide-controls>button { border-radius: 7px; }
.guide-artist-picker { background: #111219; border-radius: 12px; padding: 18px; }
.guide-artist-buttons {
  grid-template-columns: repeat(10,minmax(0,1fr));
  height: min(430px, 52vh);
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 4px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  align-content: start;
}
.guide-artist-button { background: #181921; border-radius: 8px; min-height: 76px; padding: 12px; }
.guide-artist-button:hover { background: #22232d; border-color: #666273; }
.guide-artist-button[aria-pressed=true] { background: #2a1f2d; border-color: #a65171; box-shadow: inset 3px 0 var(--accent); }
.guide-artist-button>span { font-size: 12px; }
.guide-artist-button small { font-size: 12px; }
.guide-columns { border-radius: 12px; }
.guide-column { background: #13141b; }
.guide-heading { background: #181921; border-top: 3px solid transparent; padding: 16px 12px; gap: 10px; }
.guide-heading.active { border-top-color: var(--channel-color); box-shadow: none; background: #22232d; }
.guide-heading.active strong { color: var(--text); }
.guide-program { padding: 16px 12px; gap: 8px; grid-template-columns: 46px minmax(0,1fr); }
.guide-program.current { background: #ff4d6d09; box-shadow: inset 3px 0 var(--channel-color); }
.program-time { color: var(--channel-color,var(--accent)); }
.guide-selection { color: var(--muted); }
.segments { border-radius: 8px; background: #15161d; }
.artist-card, .source-item { border-radius: 10px; background: #15161d; }
.artist-card.active { border-color: #a65171; box-shadow: 0 0 0 1px #a65171; }
.artist-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.artist-name-row > button { min-width: 0; min-height: 0; padding: 0; text-align: left; font-size: 15px; font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artist-name-row > span { flex: 0 0 auto; font-size: 12px; white-space: nowrap; }
.artist-channel-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--muted); font-size: 12px; }
.artist-channel-row span:last-child { color: #d1dbe7; }
.artist-info .artist-stats { margin-top: 6px; font-size: 12px; color: #d1dbe7; }
.artist-scroll {
  height: min(780px, 72vh);
  min-height: 420px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #101116;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.artist-scroll .artist-grid { padding: 0 2px 2px; }
.library-scroll {
  height: min(780px, 72vh);
  min-height: 420px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #101116;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.library-scroll .video-library { padding: 0 2px 2px; }
.library-scroll .more-button { margin-top: 12px; }
.rank-badge { background: #15161deb; color: var(--accent); }
.library-image { border-radius: 9px; }
.sources-section details { background: #12131a; border-radius: 10px; }
.source-content > #source-search { display: block; width: 100%; max-width: 560px; min-height: 44px; margin: 8px 0 18px; padding: 10px 12px; border: 1px solid var(--line, #34343b); border-radius: 8px; background: var(--surface, #1c1a18); color: var(--text, #f2ede4); font: inherit; }
.source-search-label { display: block; margin-top: 16px; font-weight: 650; }
.source-artist { margin: 8px 0; border: 1px solid var(--line, #34343b); border-radius: 8px; background: var(--surface, #1c1a18); }
.source-artist > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 10px 14px; cursor: pointer; font-weight: 650; }
.source-artist-count { color: var(--muted, #b8b2a8); font-size: .9em; font-weight: 450; white-space: nowrap; }
.source-artist-items { display: grid; gap: 8px; padding: 0 10px 10px; }
.source-item { display: grid; gap: 5px; padding: 12px; border-radius: 7px; background: var(--surface-raised, #24211d); overflow-wrap: anywhere; }
.source-item > small { color: var(--muted, #b8b2a8); }
.source-artist a { width: fit-content; }
footer { margin-top: 28px; background: #0c0d12; padding: 28px 4%; }
@media(max-width:1100px) {
  .site-header { gap: 24px; }
  .site-header nav { gap: 20px; }
  .edition { display: none; }
  .mix-channel { display: block; }
  .mix-channel strong { margin-top: 6px; }
  .artist-select { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .artist-select label { grid-column: 1/-1; }
  .artist-select>a { grid-column: 1/-1; }
  .section-head { flex-wrap: wrap; }
  .watch-summary { grid-template-columns: minmax(0, 1fr) minmax(260px, 36%); }
}
@media(max-width:850px) {
  .site-header { gap: 0; flex-wrap: wrap; padding: 14px 4% 0; }
  .site-header nav { width: 100%; justify-content: space-between; margin-top: 8px; }
  .site-header nav a { min-height: 46px; }
  html { scroll-padding-top: 132px; }
  .ad-slot { scroll-margin-top: 132px; }
  .watch-summary h2 { font-size: 18px; }
  .mix-channels { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .mix-channel { min-height: 100px; }
  .ad-slot-inner { flex-direction: row; }
  .ad-slot-cta { flex: 0 1 300px; }
}
@media(max-width:600px) {
  .main-shell { width: calc(100% - 28px); }
  .brand { font-size: 20px; }
  .brand small { font-size: 10px; }
  .site-header nav { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
  .site-header nav a { font-size: 14px; line-height: 1.5; min-height: 50px; }
  .page-title { padding: 18px 0 14px; }
  .page-title h1 { font-size: 17px; }
  .clock-block { margin-top: 8px; }
  .watch-summary { display: block; padding: 15px; }
  .watch-current { padding-right: 0; }
  .watch-summary h2 { font-size: 16px; }
  .channel-small { display: block; margin: 8px 0 0; font-size: 12px; }
  .player-controls { padding: 12px; }
  .player-controls button { padding: 6px 8px; }
  .player-status, .video-meta { font-size: 13px; }
  .next-summary { border-left: 0; border-top: 1px solid var(--line); padding: 11px 24px 0 0; margin-top: 12px; min-height: 57px; }
  .next-summary strong { font-size: 14px; }
  .next-icon { right: 14px; }
  .ad-slot-inner { flex-direction: column; padding: 20px; }
  .ad-slot-cta { flex: auto; width: 100%; }
  .ad-slot { margin-bottom: 28px; }
  .panel-heading { padding: 16px; }
  .panel-heading h2 { font-size: 17px; }
  .mix-channels { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mix-channel { min-height: 96px; }
  .artist-select { padding: 16px; grid-template-columns: 1fr; }
  .guide-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; width: 100%; }
  .guide-groups button { padding: 10px 6px; font-size: 15px; white-space: normal; line-height: 1.5; }
  .guide-controls { width: 100%; justify-content: flex-start; }
  .guide-columns, .guide-columns.mix-guide { display: block; }
  .guide-heading { min-height: 72px; }
  .guide-program { grid-template-columns: 52px minmax(0,1fr); min-height: 110px; }
  .guide-artist-picker { padding: 14px; }
  .guide-artist-buttons { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .guide-artist-button { padding: 10px; }
  .guide-artist-button strong { font-size: 14px; }
  .section-head h2 { font-size: 22px; }
  .segments button { font-size: 14px; }
  .artist-name-row > button { font-size: 14px; }
  .artist-name-row > span, .artist-channel-row { font-size: 11px; }
}

/* Keep the single ad below the player on every viewport. */
#music.player-layout {
  display: grid;
  grid-template-areas: 'player';
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  margin: 0 0 36px;
  background: transparent;
  scroll-margin-top: 96px;
}
#music.player-layout > .player-main { grid-area: player; min-width: 0; }
.watch-ad-rail { display: flex; min-width: 0; }
.watch-ad-rail--left { grid-area: left; }
.watch-ad-rail--right { grid-area: right; }
.soccer-ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 0;
  min-height: 110px;
  width: 100%;
  margin: 22px 0;
  padding: 18px 12px;
  border: 1px dashed #607985;
  border-radius: 8px;
  background: repeating-linear-gradient(135deg, #0d1a22, #0d1a22 12px, #10202a 12px, #10202a 24px);
  color: var(--muted);
  text-align: center;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
  text-wrap: balance;
}
.soccer-ad-slot > .ad-kicker { font-size: 12px; letter-spacing: .08em; }
.amazon-banner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin-top: 10px;
  padding: 16px 10px;
  border: 1px solid #7f4d83;
  border-radius: 8px;
  background: linear-gradient(145deg, #321d37, #1b2630);
  color: #fff0f7;
  box-shadow: inset 0 1px #ffffff12, 0 8px 22px #05070a30;
  line-height: 1.45;
  text-align: center;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
  text-wrap: balance;
}
.amazon-banner:hover, .amazon-banner:focus-visible { border-color: var(--accent); background: linear-gradient(145deg, #4a2850, #20303b); }
.amazon-official-logo { display: block; width: 100%; max-width: none; height: auto; max-height: none; object-fit: contain; margin: 0 auto 12px; padding: 0; border-radius: 0; background: transparent; filter: drop-shadow(0 2px 5px #05070a45); }
.amazon-inline-ad .amazon-inline-banner { margin-top: 0; padding: 0; justify-content: center; }
.amazon-inline-ad .amazon-inline-banner .amazon-official-logo { align-self: center; width: min(340px, 100%); margin-inline: auto; max-width: 340px; margin-bottom: 0; }
.amazon-image-fallback { display: block; margin-bottom: 9px; color: #fff; font-size: 15px; font-weight: 800; line-height: 1.35; }
.amazon-banner-label { font-size: 10px; letter-spacing: .16em; color: #d9b8e1; }
.amazon-banner > strong { margin-top: 6px; font-size: 16px; color: #fff; }
.amazon-banner-copy { margin-top: 7px; font-size: 12px; color: #d7c9d9; }
.amazon-banner-cta { margin-top: 11px; color: var(--accent); font-size: 13px; font-weight: 800; }
.soccer-ad-slot > small { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; font-size: 13px; line-height: 1.6; white-space: normal; overflow-wrap: break-word; word-break: normal; line-break: strict; text-wrap: balance; }
.amazon-availability { display: grid; gap: 5px; width: 100%; margin-top: 11px; color: #d7c9d9; font-size: 12px; line-height: 1.55; text-align: center; }
.amazon-availability a { display: inline-block; color: var(--accent); font-size: 17px; line-height: 1.4; font-weight: 800; text-decoration: underline; white-space: nowrap; overflow-wrap: normal; word-break: normal; line-break: strict; }
.soccer-ad-slot--rail > small { font-size: 12px; line-height: 1.45; }
.soccer-ad-slot--rail .amazon-availability { gap: 2px; margin-top: 8px; }
.soccer-ad-slot--rail > .ad-kicker { margin-top: 8px; }
.soccer-ad-slot--rail { min-height: 250px; margin: 0; padding: 0; justify-content: flex-start; }
.soccer-ad-slot--rail .amazon-banner { flex: 1; margin-top: 0; justify-content: space-evenly; }

@media(max-width:1180px) {
  .amazon-inline-ad-inner { grid-template-columns: minmax(220px, 1fr) minmax(0, 1.6fr); }
  .watch-ad-rail { display: none; }
  #music.player-layout {
    grid-template-areas: 'player';
    grid-template-columns: minmax(0,1fr);
    gap: 0;
  }
}
@media(max-width:850px) {
  .amazon-inline-ad-inner { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .amazon-inline-note { grid-column: auto; }
  #music.player-layout {
    grid-template-areas: 'player';
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    scroll-margin-top: 132px;
  }
  .soccer-ad-slot--rail { min-height: 110px; margin: 0; }
}

/* Soccer-style guide timeline: the time rail stays visible while the programme body scrolls. */
.guide-scroll {
  --guide-rail-width: 72px;
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  max-height: min(780px, 72vh);
  min-height: 420px;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #10141a;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.guide-time-rail {
  position: sticky;
  left: 0;
  z-index: 5;
  align-self: stretch;
  min-height: 100%;
  border-right: 1px solid #354654;
  background: #16202a;
}
.guide-time-head {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 82px;
  padding: 10px 8px;
  border-bottom: 1px solid #354654;
  background: #1b2a34;
  color: #eef6ff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}
.guide-time-head small { display: block; margin-top: 4px; color: #b9c9d7; font-size: 11px; }
.guide-time-ticks { padding-top: 0; }
.guide-time-tick {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: var(--guide-tick-height);
  min-height: var(--guide-tick-height);
  box-sizing: border-box;
  padding: 10px 7px;
  border-bottom: 1px solid #263844;
  color: #d4e0e9;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.guide-time-tick strong { font-size: 12px; }
.guide-time-tick small { margin-top: 4px; color: #8ea5b5; font-size: 10px; }
.guide-columns { display: grid; min-width: 760px; min-height: var(--guide-column-height, 0px); border: 0; border-radius: 0; overflow: visible; }
.guide-columns.mix-guide { grid-template-columns: repeat(5, minmax(180px, 1fr)); }
.guide-column { position: relative; min-width: 0; height: var(--guide-column-height, auto); border-left: 1px solid #2a3945; background: #10191c; }
.guide-column:first-child { border-left: 0; }
.guide-heading {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 82px;
  background: #172d29;
  box-shadow: 0 1px 0 #385448;
}
.guide-heading.active { background: #1b3c31; }
.guide-program { position: absolute; top: var(--guide-program-top, 82px); left: 0; right: 0; z-index: 1; height: var(--guide-program-height, 118px); min-height: 0; overflow: hidden; background: #10241c; }
.guide-program.past { background: #101c19; opacity: .82; }
.guide-program.current { position: absolute; background: #17382a; box-shadow: inset 3px 0 var(--channel-color), inset 0 2px #ff6685; opacity: 1; }
.program-time { font-variant-numeric: tabular-nums; }
.guide-now-line {
  position: absolute;
  top: var(--guide-now-top, 82px);
  left: var(--guide-rail-width);
  right: 0;
  z-index: 8;
  border-top: 2px dashed #ff5574;
  pointer-events: none;
}
.guide-now-line span {
  position: absolute;
  top: -13px;
  left: 8px;
  padding: 2px 6px;
  border-radius: 3px;
  background: #ff5574;
  color: #190b11;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

@media(max-width:850px) {
  .guide-scroll { --guide-rail-width: 58px; grid-template-columns: 58px minmax(0, 1fr); max-height: 68vh; min-height: 360px; }
  .artist-scroll { height: 68vh; min-height: 360px; }
  .library-scroll { height: 68vh; min-height: 360px; }
  .guide-artist-buttons { grid-template-columns: repeat(5,minmax(0,1fr)); height: min(430px, 58vh); }
  .guide-time-head { min-height: 67px; padding-inline: 4px; font-size: 11px; }
  .guide-time-tick { height: var(--guide-tick-height); min-height: var(--guide-tick-height); padding: 8px 3px; }
  .guide-time-tick strong { font-size: 11px; }
  .guide-columns, .guide-columns.mix-guide { display: grid; grid-template-columns: minmax(260px, 1fr); min-width: 260px; }
  .guide-column:first-child { border-left: 0; }
  .guide-column+.guide-column { border-left: 0; border-top: 2px solid #31433f; }
}

/* Music Channel Studio v1: bounded, shared timeline with readable long slots. */
.guide-time-ticks{position:relative;overflow:clip}
.guide-time-tick{position:absolute;left:0;right:0;height:var(--guide-tick-height);min-height:0;border-top:1px solid #263844;border-bottom:0;padding-top:2px}
.guide-time-head,.guide-heading{height:82px;min-height:82px;max-height:82px}
.guide-program{display:block;padding:0;overflow:clip;text-align:left;align-content:start}
.program-content{width:100%;min-height:24px;text-align:left;position:sticky;top:82px;display:grid;grid-template-columns:46px minmax(0,1fr);gap:8px;padding:10px;max-height:100%;overflow:clip}
.guide-program.compact .program-content{padding:5px 8px}
.guide-program.compact .program-detail>small{display:none}
.guide-program.tiny .program-content{padding:0 4px;gap:4px;line-height:1.1}
.guide-program.tiny .program-detail strong{-webkit-line-clamp:1;font-size:11px;line-height:1.2}
.guide-program.tiny .program-detail>small,.guide-program.tiny .program-time small{display:none}
.guide-program.tiny .program-time{font-size:11px}
.guide-program.compact .program-content{padding:4px 8px}
.program-content:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.guide-program.short-marker{z-index:2;display:flex;align-items:center;box-sizing:border-box;padding:0 4px;border-top:1px solid #72848b;background:#24342f;color:#d4e0e9;font-size:10px;line-height:1;pointer-events:none}
.guide-program.short-marker.current{border-top-color:#ff6685;background:#264333}
.guide-scroll{min-height:0}
@media(max-width:850px){
 .guide-columns.mix-guide{grid-template-columns:repeat(5,minmax(240px,1fr));min-width:1200px}
 .guide-columns:not(.mix-guide){grid-template-columns:repeat(3,minmax(240px,1fr));min-width:720px}
 .guide-column+.guide-column{border-top:0;border-left:1px solid #2a3945}
}

.guide-short-programmes{margin-top:14px;padding:16px;border:1px solid #2a3945;border-radius:10px;background:#10191c}
.guide-short-programmes[hidden]{display:none}
.guide-short-programmes h3{font-size:16px;margin:0 0 4px}
.guide-short-programmes>p{font-size:13px;color:var(--muted);margin:0 0 12px}
.guide-short-programme-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:8px}
.guide-short-programme{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:start;gap:12px;min-width:0;min-height:56px;padding:10px 12px;border:1px solid #31433f;border-radius:6px;background:#131e20;text-align:left}
.guide-short-programme:hover{background:#1b2b2b;border-color:var(--channel-color,var(--accent))}
.guide-short-programme time{font-size:12px;font-variant-numeric:tabular-nums;color:var(--accent);white-space:nowrap}
.guide-short-programme strong,.guide-short-programme small{display:block;overflow-wrap:anywhere}
.guide-short-programme strong{font-size:13px;line-height:1.45}
.guide-short-programme small{font-size:12px;color:var(--muted);margin-top:3px}
@media(max-width:600px){.guide-short-programmes{padding:12px}.guide-short-programme-list{grid-template-columns:minmax(0,1fr)}.guide-short-programme{grid-template-columns:minmax(0,1fr);gap:3px;min-height:64px;padding:10px}.guide-short-programme time{font-size:12px}.guide-short-programme strong{font-size:14px}}

/* Classical desktop refresh. Browser acceptance: 1280×800 and 1600×1000; first five selector rows must remain visible. */
:root {
  --bg: #131211;
  --surface: #1c1a18;
  --high: #282522;
  --surface-raised: #24211d;
  --line: #39352f;
  --muted: #b8b2a8;
  --text: #f2ede4;
  --accent: #d6b36a;
  --live: #f05b62;
  color: var(--text);
  background: var(--bg);
  font-family: Arial, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
}
html, body { background: var(--bg); color: var(--text); }
body { background-image: none; }
button, input, select { font-family: Arial, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif; }
h1, h2, h3, .watch-summary h2, .guide-program .program-detail strong,
.artist-info > button, .video-library strong { font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', serif; }
.source-content, .source-item, .source-artist, .source-search-label { font-family: Arial, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif; }
.site-header { background: rgba(19,18,17,.97); border-color: var(--line); }
.site-header nav a:hover, .site-header nav a.active { color: var(--accent); border-color: var(--accent); }
.brand-mark { background: var(--accent); color: var(--bg); box-shadow: none; }
.watch-section { max-width: none; display: grid; grid-template-columns: minmax(0,1fr) 300px; align-items: start; gap: 12px; margin: 0 auto; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.watch-summary { grid-column: 1 / -1; grid-row: 1; margin: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
#music.player-layout { grid-column: 1; grid-row: 2; display: block; min-width: 0; }
.player-column { border-color: var(--line); border-radius: 8px; background: var(--surface); }
.player-stage { background: #090807; }
.play-disc { background: var(--accent); color: var(--bg); box-shadow: 0 0 0 10px #d6b36a1c; }
.play-overlay:hover .play-disc { background: #e3c781; }
.play-overlay { color: var(--text); }
.player-controls, .video-meta { background: var(--surface); border-color: var(--line); }
.player-controls button { border-color: var(--line); }
.player-controls button:hover { background: var(--high); }
.player-controls a, .amazon-inline-note a { color: var(--accent); }
.player-status, .video-meta, .channel-small { color: var(--muted); }
.player-status.error { color: var(--accent); }
.pill { color: var(--accent); }
.onair-label { color: var(--accent); background: #d6b36a12; border: 1px solid #d6b36a55; }
.onair-label.live { color: #190b0b; background: var(--live); border-color: var(--live); }
.next-summary { border-color: var(--line); }
.next-icon { color: var(--accent); }
.channel-panel { grid-column: 2; grid-row: 2; width: 300px; min-width: 0; height: min(720px, calc(100vh - 210px)); min-height: 420px; max-height: calc(100vh - 170px); align-self: start; overflow-x: hidden; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); scrollbar-gutter: stable; }
.panel-heading { position: sticky; top: 0; z-index: 2; min-height: 66px; padding: 12px 15px; background: var(--surface); border-bottom: 1px solid var(--line); }
.mix-channels { grid-template-columns: minmax(0,1fr); gap: 6px; padding: 9px; }
.mix-channel { display: flex; min-height: 59px; padding: 9px 11px; gap: 10px; border-color: var(--line); background: var(--surface); }
.mix-channel.active { background: var(--high); border-color: var(--accent); box-shadow: inset 3px 0 var(--accent); }
.mix-channel strong { margin: 0; color: var(--text); }
.mix-channel small { color: var(--muted); }
.channel-num { color: var(--accent); }
.mix-channel:nth-child(n), .guide-column:nth-child(n) { --channel-color: var(--accent); }
.artist-select { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; padding: 13px; border-top: 1px solid var(--line); }
.artist-select label, .artist-select>a { font-size: 13px; }
.artist-select input, .artist-select select { background: var(--bg); border-color: var(--line); }
.guide-heading, .guide-artist-button, .guide-artist-picker, .guide-column { background: var(--surface); }
.guide-heading.active { background: var(--high); border-top-color: var(--accent); }
.guide-heading.active strong, .guide-artist-button[aria-pressed=true] { color: var(--text); }
.guide-artist-button:hover, .guide-artist-button[aria-pressed=true] { background: var(--high); border-color: var(--accent); }
.guide-groups button, .guide-controls>button, .segments { border-color: var(--line); background: var(--surface); }
.guide-groups button[aria-pressed=true], .segments button[aria-pressed=true] { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.guide-program { background: var(--surface); }
.guide-program.current { background: #f05b6212; box-shadow: inset 3px 0 var(--live); }
.guide-program.past { background: #171513; }
.guide-now-line { border-color: var(--live); }
.guide-now-line span { background: var(--live); color: #190b0b; }
.guide-time-tick { border-color: #39352f; }
.guide-time-tick strong, .program-time, .guide-short-programme time { color: var(--accent); }
.guide-program.short-marker { border-color: #766344; background: #29251e; color: var(--text); }
.guide-program.short-marker.current { border-color: var(--live); background: #3a201c; }
.guide-short-programmes, .guide-short-programme, .guide-short-programme:hover { border-color: var(--line); background: var(--surface); }
.guide-short-programme:hover { border-color: var(--accent); }
.artist-card, .source-item, .segments, .sources-section details { background: var(--surface); }
.artist-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.artist-info .artist-stats, .artist-channel-row span:last-child { color: var(--muted); }
.artist-scroll, .library-scroll { background: var(--surface); border-color: var(--line); }
.source-content > #source-search, .source-artist, .source-item { background: var(--surface); border-color: var(--line); }
.amazon-inline-ad { max-width: none; margin: 24px 0 36px; }
.amazon-inline-ad-inner { border-color: var(--line); border-radius: 8px; background: var(--surface); }
.amazon-inline-ad-inner::before, .amazon-inline-ad-inner::after { border-color: var(--muted); }
.amazon-inline-ad .amazon-inline-banner { background: var(--bg); border-color: var(--line); }
.amazon-inline-copy { color: var(--text); }
.ad-slot-label { color: var(--muted); }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline-color: var(--accent); }
@media (min-width: 851px) {
  .watch-summary { grid-column: 1 / -1; }
  #music.player-layout { grid-column: 1; }
  .channel-panel { grid-column: 2; }
}
@media (max-width: 850px) {
  .watch-section { display: block; }
  .watch-summary { margin-bottom: 12px; }
  .channel-panel { width: auto; height: auto; min-height: 0; max-height: none; margin-top: 12px; overflow: visible; }
  .mix-channels { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .artist-select { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .artist-select label, .artist-select>a { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .main-shell { width: calc(100% - 32px); max-width: 100%; }
  .channel-panel, .mix-channels, .artist-select { min-width: 0; max-width: 100%; }
  .mix-channels.mobile-channel-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 12px 14px;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .mix-channels.mobile-channel-strip .mix-channel {
    flex: 0 0 clamp(170px, 70vw, 230px);
    width: auto;
    min-width: 0;
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-align: left;
    scroll-snap-align: start;
  }
  .mix-channels.mobile-channel-strip .mix-channel strong { margin: 0; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
  .mix-channels.mobile-channel-strip .mix-channel small { font-size: 11px; }
  .mix-channels.mobile-channel-strip .mix-channel .channel-num { flex: 0 0 auto; font-size: 21px; }
  .mix-channels.mobile-channel-strip .channel-arrow { display: none; }
  .artist-select { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
  .artist-select label, .artist-select>a { grid-column: auto; min-height: 24px; }
  .artist-name-row > button { min-height: 24px; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
  .guide-artist-buttons { grid-template-columns: repeat(2,minmax(0,1fr)); height: min(430px,58vh); }
  .guide-artist-button { min-height: 64px; }
  .guide-artist-button strong { overflow-wrap: anywhere; }
  .guide-controls { width: 100%; flex-wrap: wrap; }
  .guide-groups { display: flex; width: 100%; min-width: 0; }
  .guide-groups button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 7px 4px; font-size: 12px; line-height: 1.3; }
  .guide-controls > button { min-width: 44px; min-height: 44px; }
  .guide-scroll { grid-template-columns: 58px minmax(0,1fr); overflow-x: hidden; overscroll-behavior-x: none; }
  .guide-columns.guide-mobile, .guide-columns.guide-mobile.mix-guide { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; min-width: 0; }
  .guide-columns.guide-mobile .guide-column { width: 100%; min-width: 0; border-left: 0; }
  .guide-columns.guide-mobile .guide-column + .guide-column { border-top: 0; }
  .guide-columns.guide-mobile .guide-heading { min-height: 82px; padding: 10px; gap: 9px; }
  .guide-columns.guide-mobile .guide-heading strong { overflow-wrap: anywhere; }
  .guide-columns.guide-mobile .program-content { grid-template-columns: 46px minmax(0,1fr); gap: 7px; padding: 7px; overflow-wrap: anywhere; }
  .guide-columns.guide-mobile .program-detail strong { overflow-wrap: anywhere; }
  .guide-short-programme { min-height: 64px; }
  .player-controls button { min-height: 44px; }
  .player-controls { align-items: stretch; flex-direction: column; }
  .player-controls > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .player-controls > div button { min-width: 0; overflow-wrap: anywhere; }
  .player-controls a { display: inline-flex; align-items: center; min-height: 44px; }
  .video-meta > a, .amazon-inline-note a, footer a { display: inline-flex; align-items: center; min-height: 24px; }
  .sources-section > details > summary { min-height: 24px; }
  .segments button { min-height: 44px; }
  .mix-channel, .guide-program .program-content, .guide-short-programme, .guide-heading,
  .guide-groups button, .guide-controls > button, .artist-select input, .artist-select select,
  .player-controls button, .player-controls a { touch-action: manipulation; }
  .mix-channel { min-height: 44px; }
}