:root { --cyan:#39e7ff; --tape:#2a1d12; }

.app-view--music[hidden] { display: none; }
.app-view--music {
  /* same padded panel as the greentexts/gallery pages so the header and
     content sit inside the column instead of bleeding to the edges */
  position: relative;
  padding: 14px 14px 20px;
  border: 2px solid #74b6ec;
  border-radius: 10px;
  background:
    radial-gradient(140% 80% at 50% -20%, rgba(255, 255, 255, .8), transparent 55%),
    linear-gradient(180deg, #e9f6ff, #d3ecff);
  box-shadow: 0 4px 14px rgba(11, 79, 160, .28), inset 0 0 0 2px rgba(255, 255, 255, .7);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}
/* keep every section inside its own column — never bleed over the sidebar */
.app-view--music > * { min-width: 0; max-width: 100%; }
.app-view--music .boombox__deck,
.app-view--music .boombox__meta,
.app-view--music .console,
.app-view--music .np-side,
.app-view--music .boombox__meta > div { min-width: 0; }
.app-view--music .np-title { overflow-wrap: anywhere; }
/* banner spacing handled by the grid gap, not its own margin; music page gets
   its own hero image (Dash shredding) while greentexts keeps reading.webp */
.app-view--music .greens__banner {
  margin-bottom: 0;
  background:
    linear-gradient(90deg, transparent 52%, rgba(214, 238, 255, .55) 78%, rgba(206, 234, 255, .82) 100%),
    url("music.webp") center 40% / cover no-repeat,
    linear-gradient(180deg, #eaf6ff, #cfe9ff);
}

/* ---- banner ---- */
.app-view--music .rd-banner {
  position: relative;
  overflow: hidden;
  padding: 16px 16px 20px;
  border: 2px solid #74b6ec;
  border-radius: 8px;
  background: linear-gradient(180deg, #9fdcff, #5aa6ee);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
}
.app-view--music .rd-banner__doodle {
  position: absolute;
  font: 400 30px/1 "Permanent Marker", cursive;
  color: #fff;
  opacity: .5;
  pointer-events: none;
}
.app-view--music .rd-banner h1 {
  position: relative;
  margin: 0;
  text-align: center;
  font: 400 34px/1 "Rubik Mono One", "Press Start 2P", sans-serif;
  color: #fff;
  text-shadow: 0 0 12px var(--cyan), 3px 3px 0 #1546a0, -2px 0 #1546a0, 2px 0 #1546a0;
}
.app-view--music .rd-banner .rd-banner__eye {
  position: relative;
  text-align: center;
  margin-bottom: 4px;
  font: 400 18px/1.2 "Permanent Marker", cursive;
  color: #fffce0;
  text-shadow: 1px 1px 0 #1546a0;
  transform: rotate(-1deg);
}

/* ===== NOW PLAYING = BOOMBOX ===== */
.app-view--music .boombox {
  position: relative;
  margin-top: 16px;
  padding: 16px 16px 18px;
  border: 3px solid #2f5fa8;
  border-radius: 16px;
  background: linear-gradient(180deg, #cfe9ff, #9ec8f2 60%, #7fb1e8);
  box-shadow:
    0 6px 0 #5a93d6,
    0 12px 22px rgba(11, 79, 160, .4),
    inset 0 2px 0 rgba(255, 255, 255, .8),
    inset 0 0 0 3px rgba(255, 255, 255, .4);
}
.app-view--music .boombox__handle {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 160px;
  height: 30px;
  margin-left: -80px;
  border: 6px solid #2f5fa8;
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  background: transparent;
}
.app-view--music .boombox__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}
.app-view--music .boombox__brand {
  font: 400 16px/1 "Rubik Mono One", "Press Start 2P", sans-serif;
  color: #1546a0;
}
.app-view--music .boombox__brand b { color: #ff4fc8; }
.app-view--music .boombox__leds { display: flex; gap: 5px; }
.app-view--music .boombox__leds i {
  width: 9px; height: 9px; border-radius: 50%;
  background: #9bbfe6; box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
}
.app-view--music .boombox.is-playing .boombox__leds i { animation: rd-led 1.2s steps(2) infinite; }
.app-view--music .boombox.is-playing .boombox__leds i:nth-child(2) { animation-delay: .2s; }
.app-view--music .boombox.is-playing .boombox__leds i:nth-child(3) { animation-delay: .4s; }

.app-view--music .boombox__deck {
  display: grid;
  grid-template-columns: 118px 1fr 118px;
  gap: 14px;
  align-items: center;
}
/* speakers */
.app-view--music .spk {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #cfe2f6 0 12%, #6f9fd6 40%, #3a6aa8 70%, #244a82 100%);
  border: 4px solid #244a82;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, .45), 0 2px 4px rgba(255, 255, 255, .5);
}
.app-view--music .spk::before {
  content: ""; position: absolute; inset: 14%; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .25);
}
.app-view--music .spk__cone {
  position: absolute; inset: 34%; border-radius: 50%;
  background: radial-gradient(circle, #1d2540, #0d152e);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .8);
}
.app-view--music .boombox.is-playing .spk__cone { animation: rd-woof 480ms ease-in-out infinite; }
.app-view--music .spk__ring {
  position: absolute; inset: 6%; border-radius: 50%;
  border: 2px solid var(--cyan); opacity: 0;
}
.app-view--music .boombox.is-playing .spk__ring { animation: rd-ping 1.6s ease-out infinite; }

/* center console */
.app-view--music .console { display: grid; gap: 8px; }
.app-view--music .gifwin {
  position: relative; height: 108px; border-radius: 8px; overflow: hidden;
  border: 2px solid #1d2540;
  background: linear-gradient(180deg, #0a2a5c, #07407a);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .5);
}
.app-view--music .gifwin img {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: 104px; width: auto;
}
.app-view--music .gifwin .scope { position: absolute; inset: 0; opacity: .55; }
.app-view--music .gifwin .scope svg { width: 100%; height: 100%; }
.app-view--music .gifwin .scope path {
  fill: none; stroke: var(--cyan); stroke-width: 2.5;
  filter: drop-shadow(0 0 4px var(--cyan));
}
.app-view--music .boombox.is-playing .gifwin .scope { animation: rd-scopeshift 1.1s linear infinite; }
.app-view--music .gifwin .gifwin__label {
  position: absolute; left: 8px; bottom: 6px; z-index: 3;
  font: 400 18px/1 "Permanent Marker", cursive;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 0 6px #ff4fc8;
}

/* the tape transport: twin reels you WIND to scrub */
.app-view--music .transport {
  position: relative; height: 76px; border-radius: 8px; overflow: hidden;
  border: 2px solid #1d2540; cursor: grab; touch-action: none;
  background: linear-gradient(180deg, #11305f, #08203f);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .6);
  perspective: 520px;
}
.app-view--music .transport.is-winding { cursor: grabbing; }
.app-view--music .transport .tape {
  position: absolute; top: calc(50% - 6px); left: 64px; right: 64px; height: 12px;
  background: var(--tape);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .06), inset 0 -2px 3px rgba(0, 0, 0, .5);
}
.app-view--music .transport .reel {
  position: absolute; top: 50%; width: 58px; height: 58px; margin-top: -29px; border-radius: 50%;
  transform-style: preserve-3d;
  background: radial-gradient(circle at 36% 30%, #fff, #bcdcff 30%, #5a93d6 55%, #2f5fa8 75%);
  border: 4px solid #173a6e;
  box-shadow: inset 0 0 0 9px #0b2a55, inset 0 0 0 11px #173a6e;
}
.app-view--music .transport .reel::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0 18deg, rgba(11,42,85,.9) 18deg 30deg, transparent 30deg 78deg,
    rgba(11,42,85,.9) 78deg 90deg, transparent 90deg 138deg, rgba(11,42,85,.9) 138deg 150deg,
    transparent 150deg 198deg, rgba(11,42,85,.9) 198deg 210deg, transparent 210deg 258deg,
    rgba(11,42,85,.9) 258deg 270deg, transparent 270deg 318deg, rgba(11,42,85,.9) 318deg 330deg, transparent 330deg);
}
.app-view--music .transport .reel.l { left: 8px; }
.app-view--music .transport .reel.r { right: 8px; }
.app-view--music .boombox.is-playing .transport .reel { animation: rd-spin 3.4s linear infinite; }
/* the pencil you stick in the hub to wind (only while winding) */
.app-view--music .transport .reel .pencil {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-origin: 0 0;
  opacity: 0; transition: opacity .15s ease; pointer-events: none; z-index: 7;
  transform-style: preserve-3d;
}
.app-view--music .transport .reel .pencil__stick {
  position: absolute; left: 0; top: -5px; width: 44px; height: 10px;
  transform-origin: 0 50%; transform: rotateY(-54deg);
  background: linear-gradient(#fff1a6, #eab308 55%, #c98f0c);
  border: 1px solid #9c7110; border-radius: 2px;
  box-shadow: 0 7px 9px rgba(0, 0, 0, .5);
}
.app-view--music .transport .reel .pencil__stick::before {
  content: ""; position: absolute; left: -11px; top: 50%; margin-top: -5px; width: 0; height: 0;
  border-right: 12px solid #f1c27d; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.app-view--music .transport .reel .pencil__stick::after {
  content: ""; position: absolute; right: -3px; top: 50%; margin-top: -5.5px; width: 9px; height: 11px;
  border-radius: 2px; background: #ff9bc7; border: 1px solid #d46a98; box-shadow: 0 7px 8px rgba(0, 0, 0, .4);
}
.app-view--music .transport .reel.has-pencil .pencil { opacity: 1; }
.app-view--music .transport .reel.has-pencil::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: #05112a; box-shadow: inset 0 0 0 2px #0b2a55; z-index: 6;
}
.app-view--music .transport .reel.winding { animation: none !important; }
.app-view--music .transport .hint {
  position: absolute; top: 4px; left: 0; right: 0; text-align: center; z-index: 4; pointer-events: none;
  font: 400 15px/1 "Reenie Beanie", cursive; color: #bfe0ff; opacity: .9;
}

/* meta + controls under the boombox */
.app-view--music .boombox__meta {
  margin-top: 12px;
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start;
}
.app-view--music .np { font: 400 9px/1.6 "Press Start 2P", monospace; color: #ff4fc8; }
.app-view--music .np-title { margin: 6px 0 1px; font: 400 24px/1.05 "Rubik Mono One", sans-serif; color: #1546a0; }
.app-view--music .np-sub { font: 400 18px/1 "Reenie Beanie", cursive; color: #8e55ff; }
.app-view--music .np-art { font-family: "Special Elite", monospace; font-size: 13px; color: #2950b8; margin-top: 3px; }
.app-view--music .np-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.app-view--music .np-tags span {
  font: 400 14px/1 "Reenie Beanie", cursive; color: #1546a0; padding: 2px 9px; border-radius: 12px;
  background: #fff; border: 1.5px solid #74aeea; transform: rotate(-1deg);
}
.app-view--music .np-side { display: grid; gap: 8px; justify-items: end; }
.app-view--music .timewrap { display: flex; align-items: center; gap: 8px; }
.app-view--music .timewrap .t { font: 12px "Special Elite", monospace; color: #3979d8; min-width: 34px; text-align: center; }
.app-view--music .rd-seek { width: 190px; max-width: 46vw; accent-color: #8e55ff; cursor: pointer; }
.app-view--music .acts { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.app-view--music .rd-btn {
  padding: 8px 15px; border: 2px solid #2f5fa8; border-radius: 7px; cursor: pointer;
  font: 700 13px "Special Elite", monospace; color: #1546a0;
  background: linear-gradient(#fff, #bceaff); text-decoration: none; display: inline-block;
}
.app-view--music .rd-btn:hover, .app-view--music .rd-btn:focus-visible { filter: brightness(1.04); color: #1546a0; }
.app-view--music .rd-btn--play { color: #fff; border-color: #2f5fa8; background: linear-gradient(#ff86d8, #8b63ff); }
.app-view--music .rd-btn[hidden] { display: none; }
.app-view--music .rd-vol { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #2950b8; }
.app-view--music .rd-vol input { width: 90px; accent-color: #8e55ff; }

/* filter bar */
.app-view--music .rd-filter {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 12px 14px;
  border: 2px solid #74b6ec; border-radius: 8px;
  background: rgba(239, 250, 255, .92);
  box-shadow: 0 4px 14px rgba(11, 79, 160, .28), inset 0 0 0 2px rgba(255, 255, 255, .55);
}
.app-view--music .rd-filter label { font: 400 8px/1.6 "Press Start 2P", monospace; color: #1d69c7; }
.app-view--music .rd-filter input, .app-view--music .rd-filter select {
  display: block; margin-top: 4px; padding: 6px 9px; border: 2px solid #74aeea; border-radius: 5px;
  background: #fff; color: #254591; font: 13px "Special Elite", monospace;
}
.app-view--music .rd-filter .f { flex: 1; min-width: 130px; }
.app-view--music .rd-filter .f input { width: 100%; }

/* ===== CASSETTE SHELF ===== */
.app-view--music .shelf {
  padding: 14px; border: 2px solid #74b6ec; border-radius: 8px;
  background: rgba(239, 250, 255, .92);
  box-shadow: 0 4px 14px rgba(11, 79, 160, .28), inset 0 0 0 2px rgba(255, 255, 255, .55);
}
.app-view--music .shelf__head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.app-view--music .shelf__head h2 { margin: 0; font: 400 18px/1 "Rubik Mono One", sans-serif; color: #1d69c7; }
.app-view--music .shelf__radio-count {
  font: 400 18px/1 "Permanent Marker", cursive; color: #ff4fc8;
  background: #fff; border: 1.5px dashed #ff4fc8; border-radius: 14px; padding: 2px 10px; transform: rotate(-1.5deg);
}
.app-view--music .shelf__count { font: 400 16px/1.2 "Reenie Beanie", cursive; color: #3979d8; }
.app-view--music .shelf__help { margin-left: auto; font: 400 16px/1.2 "Reenie Beanie", cursive; color: #3979d8; text-align: right; max-width: 280px; }
.app-view--music .tapes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 30px 18px; padding-top: 6px;
  align-items: start;
}
.app-view--music .shelf__empty {
  grid-column: 1 / -1; text-align: center; padding: 30px 12px;
  font: 400 22px/1.3 "Permanent Marker", cursive; color: #1546a0;
}
.app-view--music .music-pager {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; padding-top: 8px;
}
.app-view--music .music-pager__status {
  font: 400 16px/1.2 "Reenie Beanie", cursive; color: #3979d8;
}
.app-view--music .music-pager__buttons { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.app-view--music .music-pager__btn {
  min-width: 36px; padding: 6px 10px; border: 2px solid #2f5fa8; border-radius: 7px; cursor: pointer;
  font: 700 11px/1 "Special Elite", monospace; color: #1546a0; background: linear-gradient(#fff, #bceaff);
}
.app-view--music .music-pager__btn:hover,
.app-view--music .music-pager__btn:focus-visible { filter: brightness(1.04); }
.app-view--music .music-pager__btn.is-current {
  color: #fff; border-color: #ff4fc8; background: linear-gradient(#ff86d8, #8b63ff);
}
.app-view--music .music-pager__btn:disabled { opacity: .45; cursor: default; filter: grayscale(.25); }
.app-view--music .music-pager__gap {
  min-width: 16px; display: grid; place-items: center;
  font: 700 11px/1 "Special Elite", monospace; color: #5a93d6;
}

/* flip + swipe container */
.app-view--music .cassette { perspective: 1000px; cursor: grab; touch-action: pan-y; will-change: transform; }
.app-view--music .cassette.grabbing { cursor: grabbing; }
.app-view--music .cassette__inner {
  position: relative; transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1.05);
}
.app-view--music .cassette.flipped .cassette__inner { transform: rotateY(180deg); }
/* hard-swap the faces at the flip midpoint so the front's stickers/EQ never
   bleed through the back (backface-visibility is unreliable inside preserve-3d) */
.app-view--music .cassette__front,
.app-view--music .cassette__back { transition: visibility 0s linear .26s; }
.app-view--music .cassette:not(.flipped) .cassette__back { visibility: hidden; }
.app-view--music .cassette.flipped .cassette__front { visibility: hidden; }
.app-view--music .cassette__face {
  backface-visibility: hidden; border-radius: 10px; border: 3px solid #2f5fa8;
  background: linear-gradient(180deg, #fbfdff, #dcefff);
  box-shadow: 0 6px 12px rgba(11, 79, 160, .25), inset 0 0 0 2px rgba(255, 255, 255, .7);
  padding: 12px; overflow: hidden;
}
/* the front sits in flow and DEFINES the card height, so a long (wrapping)
   title grows the card instead of overlapping the buttons; the back overlays it */
.app-view--music .cassette__front {
  position: relative; display: flex; flex-direction: column; min-height: 232px;
}
/* (alternating card tilt removed — the slight rotation blurred the text) */

/* FRONT */
.app-view--music .cassette__spine {
  height: 8px; border-radius: 4px; margin-bottom: 8px;
  background: repeating-linear-gradient(90deg, #ff5b5b 0 14%, #ff9b34 14% 28%, #ffe65b 28% 42%, #66d978 42% 56%, #39e7ff 56% 70%, #8e55ff 70% 84%, #ff4fc8 84% 100%);
}
.app-view--music .cassette__sticker {
  position: absolute; top: 8px; right: -6px; z-index: 5; transform: rotate(7deg);
  font: 400 11px/1 "Permanent Marker", cursive; color: #1546a0; background: #ffe65b; padding: 3px 7px;
  border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
}
.app-view--music .cassette__win {
  position: relative; height: 62px; flex: 0 0 auto; border-radius: 6px; overflow: hidden; border: 2px solid #173a6e;
  background: linear-gradient(180deg, #0a2a5c, #07407a);
}
.app-view--music .cassette__win .reel2 {
  position: absolute; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff, #bcdcff 35%, #5a93d6 60%);
  border: 3px solid #173a6e; box-shadow: inset 0 0 0 6px #0b2a55;
}
.app-view--music .cassette__win .reel2.l { left: 10px; }
.app-view--music .cassette__win .reel2.r { right: 10px; }
.app-view--music .cassette.in-radio .cassette__win .reel2 { animation: rd-spin 3s linear infinite; }
.app-view--music .cassette__win .tape2 { position: absolute; top: calc(50% - 4px); left: 42px; right: 42px; height: 8px; background: var(--tape); opacity: .8; }
.app-view--music .cassette__win .eq { position: absolute; inset: 0 48px; display: flex; align-items: center; justify-content: center; gap: 2px; z-index: 2; }
.app-view--music .cassette__win .eq i { flex: 1; border-radius: 2px; background: linear-gradient(180deg, var(--cyan), #ff4fc8); }
.app-view--music .cassette.in-radio .cassette__win .eq i { animation: rd-bounce 800ms ease-in-out infinite; }
.app-view--music .cassette__label { margin: 9px 2px 0; font: 400 22px/1.05 "Permanent Marker", cursive; color: #1546a0; }
.app-view--music .cassette__by { font: 400 18px/1 "Reenie Beanie", cursive; color: #8e55ff; margin: 1px 2px; }
.app-view--music .cassette__actions { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.app-view--music .cassette__btn {
  padding: 4px 10px; border: 2px solid #2f5fa8; border-radius: 14px; cursor: pointer;
  font: 700 11px "Special Elite", monospace; color: #1546a0; background: linear-gradient(#fff, #bceaff);
}
.app-view--music .cassette__btn--play.is-current { color: #fff; border-color: #ff4fc8; background: linear-gradient(#ff86d8, #8b63ff); }
.app-view--music .cassette__btn--disabled { opacity: .5; cursor: default; }
.app-view--music .cassette__foot {
  margin-top: 8px; display: flex; align-items: center; justify-content: space-between;
}
.app-view--music .cassette__num { font: 400 8px/1 "Press Start 2P", monospace; color: #ff4fc8; }
.app-view--music .cassette__swipehint { font: 400 15px/1 "Reenie Beanie", cursive; color: #5a93d6; }
.app-view--music .cassette__slot {
  position: absolute; top: 30px; left: -6px; z-index: 5; transform: rotate(-8deg); opacity: 0; transition: opacity .2s;
  font: 400 12px/1 "Permanent Marker", cursive; color: #fff; background: #66d978; padding: 3px 8px; border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
}
.app-view--music .cassette.in-radio .cassette__slot { opacity: 1; }

/* BACK = Side B */
.app-view--music .cassette__back { position: absolute; inset: 0; transform: rotateY(180deg); background: linear-gradient(180deg, #fff, #eaf3ff); display: flex; flex-direction: column; }
.app-view--music .cassette__back .sideb { flex: 0 0 auto; font: 400 9px/1 "Press Start 2P", monospace; color: #ff4fc8; margin-bottom: 6px; }
.app-view--music .cassette__back .notes { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #9ec3ef transparent; font: 400 15px/1.32 "Gochi Hand", "Special Elite", cursive; color: #1546a0; }
.app-view--music .cassette__back .notes::-webkit-scrollbar { width: 7px; }
.app-view--music .cassette__back .notes::-webkit-scrollbar-thumb { background: #9ec3ef; border-radius: 4px; }
.app-view--music .cassette__back .notes::-webkit-scrollbar-track { background: transparent; }
.app-view--music .cassette__back .btags { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.app-view--music .cassette__back .btags span { font: 400 13px/1.3 "Gochi Hand", "Special Elite", cursive; color: #8e55ff; border: 1.5px solid #cdb6f5; border-radius: 10px; padding: 1px 8px; }

/* swipe feedback */
.app-view--music .cassette.to-add .cassette__face { box-shadow: 0 0 0 3px #66d978, 0 6px 12px rgba(11, 79, 160, .25); }
.app-view--music .cassette.to-remove .cassette__face { box-shadow: 0 0 0 3px #ff5b5b, 0 6px 12px rgba(11, 79, 160, .25); }

/* toast (body-level) */
.rd-toast {
  position: fixed; right: 30px; bottom: 28px; z-index: 50; max-width: 260px; padding: 10px 14px;
  font: 400 19px/1.15 "Permanent Marker", cursive; color: #1546a0; background: #fff;
  border: 3px solid #2f5fa8; border-radius: 8px; box-shadow: 0 8px 18px rgba(11, 79, 160, .4);
  opacity: 0; transform: translateY(14px) rotate(2deg); transition: opacity .2s, transform .3s; pointer-events: none;
}
.rd-toast.show { opacity: 1; transform: translateY(0) rotate(-1.5deg); }
.rd-toast.add { border-color: #66d978; }
.rd-toast.remove { border-color: #ff5b5b; }

/* ===== SIDEBAR MINI-DECK (.rd-deck inside a .side-panel) ===== */
.rd-deck .minicass {
  position: relative; min-width: 0; border-radius: 9px; padding: 9px; border: 2px solid #1d2540;
  background: linear-gradient(180deg, #2b3566, #161d3f);
  box-shadow: inset 0 0 0 2px rgba(120, 150, 255, .18);
}
.rd-deck .minicass__sticker {
  position: absolute; top: -7px; right: -5px; z-index: 4; transform: rotate(8deg);
  font: 400 9px/1 "Permanent Marker", cursive; color: #1d2540; background: #ffe65b;
  padding: 3px 6px; border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
.rd-deck .minicass__win {
  position: relative; height: 56px; width: 100%; border-radius: 6px; overflow: hidden; border: 2px solid #0c1430;
  background: linear-gradient(180deg, #08306b, #041d44); box-shadow: inset 0 0 10px rgba(0, 0, 0, .6); cursor: pointer; padding: 0;
}
.rd-deck .minicass__win .reel {
  position: absolute; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #9ecbff 42%, #3a78c8 60%);
  border: 3px solid #0b3b7a; box-shadow: inset 0 0 0 5px #08306b;
}
.rd-deck .minicass__win .reel.l { left: 8px; }
.rd-deck .minicass__win .reel.r { right: 8px; }
.rd-deck .minicass.is-playing .minicass__win .reel { animation: rd-spin 2.4s linear infinite; }
.rd-deck .minicass__win .tape { position: absolute; top: calc(50% - 1px); left: 30px; right: 30px; height: 8px; background: var(--tape); opacity: .85; }
.rd-deck .minicass__eq { position: absolute; inset: 0 40px; display: flex; align-items: center; justify-content: center; gap: 2px; z-index: 2; }
.rd-deck .minicass__eq i { flex: 1; border-radius: 2px; background: linear-gradient(180deg, var(--cyan), #ff4fc8); }
.rd-deck .minicass.is-playing .minicass__eq i { animation: rd-bounce 850ms ease-in-out infinite; }
.rd-deck .minicass__flip { position: absolute; right: 6px; bottom: 2px; z-index: 3; font: 400 12px/1 "Reenie Beanie", cursive; color: #bfe0ff; pointer-events: none; }
.rd-deck .minicass__label {
  margin: 8px 0 6px; padding: 4px 6px; border-radius: 4px; text-align: center; transform: rotate(-1deg);
  font: 400 15px/1 "Permanent Marker", cursive; color: #1546a0; background: #fdf6e3; border: 1px solid #d9c89a;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; max-width: 100%;
}
.rd-deck .minicass__ctrls { display: flex; gap: 5px; justify-content: center; }
.rd-deck .cbtn {
  width: 30px; height: 24px; display: grid; place-items: center; border: 2px solid #3b4690; border-radius: 5px; color: #dff3ff;
  background: linear-gradient(#2b3170, #171c4c); cursor: pointer; font-size: 12px;
}
.rd-deck .cbtn:hover, .rd-deck .cbtn:focus-visible { filter: brightness(1.15); }
.rd-deck .cbtn--play { width: 38px; color: #08306b; border-color: var(--cyan); background: linear-gradient(var(--cyan), #13b6d8); }
.rd-deck .cbtn--shuffle-on { color: #08306b; background: linear-gradient(#66d978, #2fae57); border-color: #1f7a3d; }
.rd-deck .minicass__vol { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #aec6ff; padding: 6px 2px 0; }
.rd-deck .minicass__vol input { flex: 1; min-width: 0; accent-color: var(--cyan); }

/* sidebar setlist drawer */
.rd-deck .minicass__sleeve {
  margin: 8px 0 6px; padding: 7px 6px; border-radius: 6px; border: 1px solid #0c1430;
  background: linear-gradient(180deg, #0d2350, #081a3c); box-shadow: inset 0 0 8px rgba(0, 0, 0, .5);
}
.rd-deck .minicass__sleeve-head {
  margin: 0 0 5px; text-align: center; font: 400 11px/1 "Press Start 2P", monospace; color: var(--cyan);
  padding-bottom: 5px; border-bottom: 1px dashed rgba(120, 150, 255, .35);
}
.rd-deck .minicass__tracklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; max-height: 190px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3b4690 transparent; }
.rd-deck .minicass__tracklist li { margin: 0; }
.rd-deck .track-pick {
  width: 100%; display: grid; grid-template-columns: 20px 1fr; gap: 6px; align-items: center;
  background: transparent; border: 0; padding: 4px 4px; text-align: left; cursor: pointer; border-radius: 3px;
  font: 400 14.5px/1.25 "Gochi Hand", "Special Elite", cursive; color: #e3edff;
}
.rd-deck .track-pick:hover, .rd-deck .track-pick:focus-visible { background: rgba(120, 150, 255, .18); color: #fff; outline: none; }
.rd-deck .track-pick .num { font: 400 10px/1 "Press Start 2P", monospace; color: var(--cyan); text-align: right; }
.rd-deck .track-pick--current { background: rgba(57, 231, 255, .16); color: #fff; }
.rd-deck .minicass__sleeve-close { display: block; margin: 6px auto 0; background: transparent; border: 0; cursor: pointer; font: 400 13px/1 "Reenie Beanie", cursive; color: #9fc3ff; text-decoration: underline dotted; }

/* keyframes */
@keyframes rd-spin { to { transform: rotate(360deg); } }
@keyframes rd-bounce { 0%, 100% { height: 26%; } 50% { height: 96%; } }
@keyframes rd-ping { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(1.1); opacity: 0; } }
@keyframes rd-woof { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes rd-led { 50% { background: #ff4fc8; box-shadow: 0 0 6px #ff4fc8; } }
@keyframes rd-scopeshift { to { transform: translateX(-40px); } }
.app-view--music .cassette__win .eq i:nth-child(2), .rd-deck .minicass__eq i:nth-child(2) { animation-delay: 120ms; }
.app-view--music .cassette__win .eq i:nth-child(3), .rd-deck .minicass__eq i:nth-child(3) { animation-delay: 250ms; }
.app-view--music .cassette__win .eq i:nth-child(4), .rd-deck .minicass__eq i:nth-child(4) { animation-delay: 70ms; }
.app-view--music .cassette__win .eq i:nth-child(5), .rd-deck .minicass__eq i:nth-child(5) { animation-delay: 300ms; }
.app-view--music .cassette__win .eq i:nth-child(6), .rd-deck .minicass__eq i:nth-child(6) { animation-delay: 160ms; }
.app-view--music .cassette__win .eq i:nth-child(7), .rd-deck .minicass__eq i:nth-child(7) { animation-delay: 220ms; }

@media (prefers-reduced-motion: reduce) {
  .app-view--music *, .rd-deck * { animation: none !important; }
}
@media (max-width: 760px) {
  .app-view--music .boombox__deck { grid-template-columns: 1fr; }
  .app-view--music .spk { display: none; }
  .app-view--music .boombox__meta { grid-template-columns: 1fr; }
  .app-view--music .np-side { justify-items: start; }
}