:root {
  --ink: #251c16;
  --cream: #f6e7c9;
  --cream-2: #fff4d9;
  --red: #b51016;
  --teal: #2f8e96;
  --teal-dark: #205f67;
  --shadow: rgba(28, 17, 10, .28);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,245,220,.94), rgba(224,207,183,.87) 42%, rgba(187,169,147,.9) 100%),
    #d8c6ae;
  font-family: Georgia, 'Times New Roman', serif;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; border: 0; background: transparent; border-radius: 0; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.page-shell {
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: clamp(18px, 4vw, 54px) 12px 42px;
}
.player-wrap { width: min(1180px, 98vw); position: relative; }
.radio-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1448 / 1086;
  overflow: hidden;
  filter: drop-shadow(0 26px 34px var(--shadow));
  transition: aspect-ratio .48s cubic-bezier(.2,.72,.2,1), filter .25s ease;
}
.radio-stage:not(.is-open) {
  aspect-ratio: 1448 / 816;
  overflow: hidden;
}
/* One coordinate system for both states. The artwork changes, the live UI never moves. */
.radio-canvas {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  aspect-ratio: 1448 / 1086;
}
.radio-art {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
  transition: opacity .22s ease;
}
.radio-art-closed { opacity: 0; }
.radio-stage:not(.is-open) .radio-art-open { opacity: 0; }
.radio-stage:not(.is-open) .radio-art-closed { opacity: 1; }

.hotspot {
  position: absolute;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  z-index: 9;
}
.hotspot:focus-visible, .strip-button:focus-visible, .drawer-open-hotspot:focus-visible,
.track-row button:focus-visible, #searchInput:focus-visible, .seek:focus-visible {
  outline: 3px solid rgba(181,16,22,.82);
  outline-offset: 2px;
}

/* Live content occupies only the blank amber screen area. */
.now-playing {
  position: absolute;
  z-index: 6;
  left: 14.1%;
  top: 39.8%;
  width: 54.2%;
  height: 13.25%;
  display: grid;
  grid-template-columns: 12.7% 1fr;
  gap: 1.7%;
  align-items: center;
  padding: .6% 1.2%;
  color: #1c1712;
}
.cover {
  aspect-ratio: 1;
  border: 2px solid rgba(76,44,18,.28);
  background: linear-gradient(145deg, #f7e4b0, #8e1d1d);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.25), 0 2px 5px rgba(0,0,0,.16);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.cover.has-art { background-size: cover; background-position: center; }
.cover-mark { font: 700 clamp(10px, 1.6vw, 21px)/1 Arial, sans-serif; letter-spacing: .08em; color: #fff1d6; text-shadow: 0 2px 2px #531211; }
.track-copy { min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.eyebrow { color: var(--red); font: 800 clamp(7px, 1.05vw, 15px)/1.1 Arial, sans-serif; letter-spacing: .08em; margin-bottom: .3em; }
.track-title { font-weight: 700; font-size: clamp(14px, 2.45vw, 34px); line-height: 1.02; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-subline { display: flex; gap: .65em; align-items: baseline; min-height: 1.2em; font-size: clamp(8px, 1.28vw, 17px); line-height: 1.1; margin-top: .15em; white-space: nowrap; overflow: hidden; }
#trackVersion { color: #6d3a2d; font-style: italic; overflow: hidden; text-overflow: ellipsis; }
#trackArtist { color: #30231b; }
.progress-row { display: grid; grid-template-columns: auto 1fr auto; gap: .55em; align-items: center; margin-top: .45em; }
.time { font-family: Arial, sans-serif; font-size: clamp(7px, 1vw, 13px); font-variant-numeric: tabular-nums; }
.seek { width: 100%; min-width: 0; accent-color: var(--teal-dark); cursor: pointer; }

/* The beautiful chrome transport buttons remain artwork. Prev/next are invisible hit zones.
   Only the center glyph is live, so we never draw a second chrome button on top. */
.transport { position: absolute; border: 0; background: transparent; cursor: pointer; z-index: 10; }
.prev { left: 60.05%; top: 45.2%; width: 8.25%; aspect-ratio: 1; }
.play { left: 69.15%; top: 43.6%; width: 9.9%; aspect-ratio: 1; }
.next { left: 79.75%; top: 45.2%; width: 8.25%; aspect-ratio: 1; }
.live-play-icon {
  position: absolute;
  left: 34%; top: 34%; width: 32%; height: 32%;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}
.live-play-icon::after {
  content: '▶';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #070605;
  font: 900 clamp(11px, 1.8vw, 25px)/1 Arial, sans-serif; text-shadow: 0 0 1px rgba(255,255,255,.28);
  transform: translateX(5%);
}
.play.is-playing .live-play-icon::after { content: 'Ⅱ'; transform: none; letter-spacing: -.12em; }
.transport:active { transform: translateY(1px); }

/* The strip labels stay baked into the artwork. These transparent controls provide only behavior
   and cover each baked lamp with the real current state. */
.strip-button {
  position: absolute;
  top: 56.7%;
  height: 6.12%;
  z-index: 9;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.shuffle { left: 12.35%; width: 17.1%; }
.repeat { left: 29.45%; width: 16.55%; }
.catalog { left: 43.7%; width: 21.1%; }
.strip-button .lamp {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(8px, 1.35vw, 19px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #c9c5bb;
  box-shadow: inset 0 0 0 2px #56514b, 0 0 0 1px #e0dbd0;
}
.shuffle .lamp { left: 22.5%; }
.repeat .lamp { left: 10.5%; }
.catalog .lamp { left: 6.5%; }
.strip-button[aria-pressed="true"] .lamp,
.strip-button[aria-expanded="true"] .lamp {
  background: #ffdb45;
  box-shadow: inset 0 0 0 2px #f33517, 0 0 8px #ff5b2e, 0 0 0 1px #fff0c0;
}

/* Real HTML in the paper tray. */
.drawer-content {
  position: absolute;
  z-index: 6;
  left: 15.4%;
  top: 65.0%;
  width: 60.35%;
  height: 19.3%;
  color: #241b16;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity .16s ease;
}
.track-page { list-style: none; margin: 0; padding: 0; height: 100%; display: grid; grid-template-rows: repeat(5, 1fr); }
.track-row { border-bottom: 1px solid rgba(101,78,56,.22); min-height: 0; }
.track-row:last-child { border-bottom: 0; }
.track-row button {
  width: 100%; height: 100%; border: 0; padding: 0 1.5%; background: transparent; color: inherit;
  display: grid; grid-template-columns: 5% 1fr auto; align-items: center; gap: 1.2%; text-align: left; cursor: pointer;
}
.track-row button:hover, .track-row.is-current button { background: rgba(255,208,103,.27); }
.row-num { text-align: center; font: 700 clamp(8px, 1.05vw, 15px)/1 Arial, sans-serif; }
.row-main { min-width: 0; }
.row-title { display: block; font-weight: 700; font-size: clamp(8px, 1.32vw, 17px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-version { display: block; color: #704d3c; font-size: clamp(6px, .92vw, 12px); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .08em; }
.row-duration { padding-right: .2em; font: clamp(7px, 1vw, 13px)/1 Arial, sans-serif; font-variant-numeric: tabular-nums; color: #433429; }
.page-count { position: absolute; right: .8%; bottom: -12%; font: 700 clamp(6px,.78vw,10px)/1 Arial,sans-serif; color: rgba(44,31,22,.6); }
.search-panel {
  position: absolute;
  z-index: 12;
  inset: -18% 1% auto 1%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .65em;
  padding: .5em .7em;
  border: 1px solid rgba(66,48,34,.22);
  border-radius: 8px;
  background: rgba(255,244,217,.97);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  font: 700 clamp(7px,1vw,13px)/1 Arial,sans-serif;
}
.search-panel[hidden] { display: none; }
.search-panel input { min-width: 0; border: 1px solid rgba(60,44,32,.35); border-radius: 5px; padding: .45em .6em; background: #fffaf0; color: #241b16; }
.pager-prev { left: 78.4%; top: 66.3%; width: 7.4%; height: 7.6%; }
.pager-next { left: 78.4%; top: 76.6%; width: 7.4%; height: 7.8%; }
.drawer-close { left: 36.2%; top: 89.1%; width: 28.4%; height: 6.2%; }

/* Closed state uses a dedicated pixel-spliced shell, so the complete turquoise lower body remains visible. */
.drawer-open-hotspot {
  display: none;
  position: absolute;
  z-index: 12;
  left: 38.0%;
  top: 63.4%;
  width: 25.8%;
  height: 5.3%;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(#f6ead3, #d5c2a0);
  color: #15110e;
  box-shadow: inset 0 0 0 1px rgba(83,70,56,.46);
  cursor: pointer;
  font: 800 clamp(8px, 1.15vw, 15px)/1 Arial, sans-serif;
  letter-spacing: .09em;
}
.radio-stage:not(.is-open) .drawer-open-hotspot { display: block; }
.radio-stage:not(.is-open) .drawer-content,
.radio-stage:not(.is-open) .pager,
.radio-stage:not(.is-open) .drawer-close { pointer-events: none; opacity: 0; }
.radio-stage:not(.is-open) .search-panel { display: none; }
.status { min-height: 1.4em; margin: .8rem auto 0; text-align: center; color: #5a4434; font: 600 13px/1.4 Arial,sans-serif; }

@media (max-width: 720px) {
  .page-shell { padding-inline: 4px; padding-top: 12px; }
  .player-wrap { width: 100%; }
  .now-playing { left: 13.2%; width: 56.6%; grid-template-columns: 14.5% 1fr; }
  .track-subline { gap: .35em; }
  .drawer-content { left: 14.6%; width: 61.4%; }
  .search-panel { inset-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .radio-stage, .radio-art, .drawer-content { transition: none; }
}


/* v1.2.2 — one fixed internal coordinate system in both states. */
.radio-stage:not(.is-open) .radio-canvas {
  width: 100%;
  aspect-ratio: 1448 / 1086;
}
.radio-stage:not(.is-open) .radio-art-closed {
  width: 100%;
  height: auto;
}

/* The shell already contains the strip lamps; don't draw a second set. */
.strip-button .lamp { display: none !important; }

/* Closed handle becomes the open control without a floating pill. */
.drawer-open-hotspot {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #17120f;
}
.drawer-open-hotspot span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 62%;
  padding: .18em .5em;
  border-radius: 3px;
  background: rgba(239,220,190,.94);
  color: #211813;
  font: 800 clamp(8px, 1.12vw, 15px)/1 Arial, sans-serif;
  letter-spacing: .10em;
  text-align: center;
}
.radio-stage:not(.is-open) .drawer-open-hotspot {
  display: block;
  left: 37.0%;
  top: 65.0%;
  width: 26.0%;
  height: 7.5%;
  z-index: 14;
}


/* v1.2.3 — true closed cabinet overlay.
   The approved open shell remains the master artwork in BOTH states.
   Closing the drawer only covers the open tray with a dedicated finished lower cabinet. */
.radio-stage:not(.is-open) {
  aspect-ratio: 1448 / 884;
  overflow: hidden;
}
.radio-stage:not(.is-open) .radio-canvas {
  aspect-ratio: 1448 / 1086 !important;
}
.radio-art-open { opacity: 1 !important; }
.radio-art-closed { display: none !important; }
.closed-bottom-cabinet {
  display: none;
  position: absolute;
  z-index: 5;
  left: 0;
  top: 59.7%;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.radio-stage:not(.is-open) .closed-bottom-cabinet { display: block; }
.radio-stage:not(.is-open) .drawer-content,
.radio-stage:not(.is-open) .pager,
.radio-stage:not(.is-open) .drawer-close {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* The OPEN SONGS plate is part of the cabinet artwork; this is only its invisible hit area. */
.radio-stage:not(.is-open) .drawer-open-hotspot {
  display: block;
  left: 36.0%;
  top: 70.0%;
  width: 28.0%;
  height: 7.4%;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.radio-stage:not(.is-open) .drawer-open-hotspot span { visibility: hidden; }


/* v1.2.4 FINAL closed-state architecture
   Closed shell is a flattened, pixel-matched image: approved top + erased tray + aligned cabinet.
   No separate cabinet overlay remains, so nothing can show through or scale independently. */
.closed-bottom-cabinet { display: none !important; }
.radio-stage:not(.is-open) {
  aspect-ratio: 1448 / 867 !important;
  overflow: hidden !important;
}
.radio-stage:not(.is-open) .radio-canvas {
  width: 100% !important;
  aspect-ratio: 1448 / 1086 !important;
}
.radio-art-open { opacity: 1; }
.radio-art-closed { display: block !important; opacity: 0; }
.radio-stage:not(.is-open) .radio-art-open { opacity: 0 !important; }
.radio-stage:not(.is-open) .radio-art-closed { opacity: 1 !important; width: 100% !important; height: auto !important; }
.radio-stage:not(.is-open) .drawer-open-hotspot {
  display: block !important;
  left: 36.4% !important;
  top: 82.0% !important;
  width: 27.2% !important;
  height: 9.8% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  padding: 0 !important;
}
.radio-stage:not(.is-open) .drawer-open-hotspot span { visibility: hidden !important; }


/* v1.2.5 — reopen fix.
   The closed shell is 867px tall while the fixed radio canvas remains 1086px tall.
   Therefore the visible OPEN SONGS handle at ~84% of the closed shell sits at ~67% of
   the fixed canvas, not 82%. Keep this hit area above the crop line. */
.radio-stage:not(.is-open) .drawer-open-hotspot {
  display: block !important;
  left: 34.8% !important;
  top: 66.8% !important;
  width: 30.4% !important;
  height: 6.8% !important;
  z-index: 40 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
}
.radio-stage:not(.is-open) .drawer-open-hotspot span { visibility: hidden !important; }


/* Website embed mode: preserve the radio, remove the standalone stage. */
html.is-embed, html.is-embed body {
  min-height: 0;
  background: transparent !important;
}
html.is-embed body { overflow: hidden; }
html.is-embed .page-shell {
  min-height: 0;
  padding: 0 2px 8px;
}
html.is-embed .player-wrap { width: min(1180px, 100%); }
html.is-embed .status { margin-top: 4px; min-height: 0; }