/* Holy Ore music stand: the "music" section of the camp window (music.js draws it). What's playing with its cover,
   loop and ⏮ ⏸ Skip; Follow the world / Pick a track / Off; the tracks as music boxes; the music volume. Built on
   hub.css's window: its slots, buttons, notches and the gold cursor (gold means the cursor only: the playing track
   is marked with ♪ and a green ring, the chosen mode is amber). The Lantern UI: what's playing is a parchment card
   and the boxes are parchment slots. Text is 16px or more, targets 44px. */

.mu { height: 100%; padding: 16px 20px 18px; }
.mu-card { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.mu-kicker { margin: 0; font: 700 1rem/1.2 var(--f-label); color: var(--ink-dim); text-shadow: var(--ol1); }

/* ---------- covers: where each track plays, from the world's own art ---------- */
.mu-cover { position: relative; display: block; overflow: hidden; flex: none; clip-path: var(--notch); background-color: #3d1a0b; background-repeat: no-repeat;
  image-rendering: pixelated; box-shadow: inset 0 0 0 var(--u) var(--win-edge); }
.mu-cover.t-title { background-image: url(art/logo-autumn.webp), linear-gradient(#2c4fb0, #7fb4ff); background-size: 82% auto, cover; background-position: center 48%, center; }
.mu-cover.t-day { background-image: url(art/world/sky2/bg2-forest-summer.webp), url(art/world/sky2/bg2-mtn-summer.webp), linear-gradient(#4f93f0, #bfe3ff 75%);
  background-size: auto 58%, auto 72%, cover; background-position: 40% bottom, 30% 72%, center; }
.mu-cover.t-night { background-image: radial-gradient(circle at 76% 24%, #fff3c4 0 7%, transparent 7.5%), radial-gradient(circle at 18% 22%, #fff 0 1.5px, transparent 2.5px),
  radial-gradient(circle at 40% 12%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 58% 34%, #fff 0 1px, transparent 2px),
  linear-gradient(rgba(40, 14, 5, 0.58), rgba(40, 14, 5, 0.58)), url(art/world/sky2/bg2-forest-summer.webp), url(art/world/sky2/bg2-mtn-summer.webp), linear-gradient(#070b26, #5b2e17 80%);
  background-size: auto, auto, auto, auto, cover, auto 58%, auto 72%, cover; background-position: center, center, center, center, center, 40% bottom, 30% 72%, center; }
.mu-cover.t-cavern { background-image: url(art/world/deep/bg-2-2.webp); background-size: cover; background-position: center; }
.mu-cover.t-deep { background-image: url(art/world/deep/bg-4-2.webp); background-size: cover; background-position: center; }
.mu-cover.t-space { background-image: radial-gradient(circle at 14% 26%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 62% 16%, #fff 0 1.5px, transparent 2.5px),
  radial-gradient(circle at 82% 48%, #d8f0ff 0 1.5px, transparent 2.5px), radial-gradient(circle at 36% 58%, #fff 0 1px, transparent 2px), url(art/world/cloud-2.webp),
  linear-gradient(#04061a, #1a2366 70%, #3a4aa0); background-size: auto, auto, auto, auto, 46% auto, cover; background-position: center, center, center, center, 28% 88%, center; }

/* ---------- what's playing ---------- */
.mu-now { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 20px; padding: 12px; clip-path: var(--notch);
  background: var(--parch-tex) 0 0 / 128px, var(--parch); box-shadow: inset 0 0 0 var(--u) var(--parch-edge); }
.hub .mu-now p, .hub .mu-now span:not(.mu-badge) { text-shadow: none; }
.mu-now .mu-kicker { color: var(--parch-ink-dim); text-shadow: none; }
.mu-art { width: 240px; height: 180px; }
.mu-badge { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; background: rgba(40, 14, 5, 0.85); color: #8fe36a; font: 700 1rem/1 var(--f-label); font-style: normal; }
.mu-info { display: grid; gap: 8px; min-width: 0; }
.mu-name { margin: 0; font: 700 2rem/1.05 var(--f-label); color: var(--parch-ink); text-shadow: none; overflow-wrap: anywhere; }
.mu-where { margin: 0; font: 600 1.02rem/1.35 var(--f-text); color: var(--parch-ink-dim); text-shadow: none; }
.mu-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.mu-bar { display: block; height: 10px; clip-path: var(--notch); background: rgba(82, 41, 25, 0.22); box-shadow: inset 0 0 0 1px var(--parch-edge); }
.mu-bar i { display: block; height: 100%; background: var(--amber); }
.mu-time { font: 700 1rem/1 var(--f-num, var(--f-label)); color: var(--parch-ink-dim); font-variant-numeric: tabular-nums; text-shadow: none; white-space: nowrap; }
.mu-transport { display: grid; grid-template-columns: 56px 56px minmax(0, 1fr); gap: 8px; }
.hub .btn.mu-tbtn { min-height: 48px; padding: 0; font-size: 1.2rem; }
.hub .btn.mu-skip { min-height: 48px; font-size: 1.1rem; }

/* ---------- the mode: Follow the world / Pick a track / Off ---------- */
.mu-mode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; clip-path: var(--notch); background: rgba(40, 14, 5, 0.6); }
.mu-opt { min-height: 44px; padding: 6px 8px; border: 0; cursor: pointer; clip-path: var(--notch); background: transparent; color: #fff; font: 700 1.02rem/1.1 var(--f-label); text-shadow: var(--ol1); }
.mu-opt:hover { color: var(--gold); }
.mu-opt.on { background: var(--amber); color: var(--win-ink); box-shadow: inset 0 calc(var(--u) * -2) 0 var(--amber-lo), inset 0 0 0 var(--u) var(--win-edge); }
.mu-opt:focus-visible, html[data-input="pad"] .hub .mu-opt:focus { outline: none; box-shadow: var(--ring-on); }

/* ---------- the music boxes: cover-only slots; ♪ and a green ring on the one playing ---------- */
.mu-boxes { display: grid; gap: 8px; }
.mu-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 120px)); gap: 10px; }
.hub .slot.mu-box { width: 100%; height: auto; aspect-ratio: 1; padding: 8px; background: var(--parch-tex) 0 0 / 128px, var(--parch); box-shadow: inset 0 0 0 var(--u) var(--parch-edge); }
.hub .slot.mu-box:hover { background: var(--parch-lit); }
.mu-box-art { width: 100%; height: 100%; }
.hub .slot.mu-box.playing { box-shadow: inset 0 0 0 var(--u) var(--parch-edge), inset 0 0 0 calc(var(--u) * 2.5) #4f8f2a; }
/* the cursor wins over the playing ring: the ♪ still says which one is playing */
.hub .slot.mu-box:focus-visible, html[data-input="pad"] .hub .slot.mu-box:focus { box-shadow: inset 0 0 0 var(--u) var(--parch-edge), inset 0 0 0 calc(var(--u) * 2.5) var(--gold); }
.mu-note { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; background: rgba(40, 14, 5, 0.85); font: 700 1rem/1 var(--f-label); font-style: normal; color: #8fe36a; pointer-events: none; }
.mu-caption { margin: 0; min-height: 1.4em; font: 600 1rem/1.4 var(--f-text); color: var(--ink-dim); text-shadow: var(--ol1); }
.mu-caption b { color: var(--win-ink); font-family: var(--f-label); }

/* ---------- the volume, and the rest of the sound ---------- */
.mu-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.mu-vol { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.4em; align-items: center; gap: 12px; font: 700 1rem/1.2 var(--f-label); color: var(--win-ink); text-shadow: var(--ol1); }
.mu-val { text-align: right; color: var(--win-ink); font-family: var(--f-num, var(--f-label)); }
.mu-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.mu-range:focus { outline: none; }
.mu-range:focus-visible, html[data-input="pad"] .mu-range:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.mu-range::-webkit-slider-runnable-track { height: 12px; clip-path: var(--notch); background: linear-gradient(90deg, var(--gold) 0 var(--fill, 60%), rgba(40, 14, 5, 0.92) var(--fill, 60%) 100%); }
.mu-range::-moz-range-track { height: 12px; background: rgba(40, 14, 5, 0.92); }
.mu-range::-moz-range-progress { height: 12px; background: var(--gold); }
.mu-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 28px; margin-top: -8px; border: 0; background: #fff; box-shadow: inset 0 0 0 2px #000; }
.mu-range::-moz-range-thumb { width: 16px; height: 28px; border: 0; border-radius: 0; background: #fff; box-shadow: inset 0 0 0 2px #000; }
.hub .btn.mu-more { min-height: 44px; }

/* ---------- phones: the mode first, a short now-playing strip, the volume, then the boxes three across ---------- */
@media (max-width: 760px) {
  .mu { padding: 10px 10px 14px; }
  .mu-card { gap: 10px; }
  .mu-mode { order: 1; }
  .mu-now { order: 2; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .mu-foot { order: 3; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mu-boxes { order: 4; }
  .mu-live { order: 5; }
  .mu-art { width: 96px; height: 72px; align-self: start; }
  .mu-name { font-size: 1.45rem; }
  .mu-info { display: contents; }
  .mu-info > .mu-kicker, .mu-info > .mu-name, .mu-info > .mu-where { grid-column: 2; }
  .mu-info > .mu-kicker { grid-row: 1; align-self: end; }
  .mu-art { grid-row: 1 / span 3; grid-column: 1; }
  .mu-prog, .mu-transport { grid-column: 1 / -1; }
  .mu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mu-opt { font-size: 0.98rem; }
  .hub .btn.mu-more { justify-self: start; }
}