/* ME — Dread Raven / the living elements.
   A song is an energy specimen, not a playlist row.
   Deliberately scoped to the inner selection room. CSS/vector geometry only. */

#music-overlay .song-room {
  --field-aqua:#6adff5;
  --field-violet:#b77dff;
  display:flex;
  flex-direction:column;
  inset:0;
  min-height:100svh;
  height:100dvh;
  padding:0;
  background:#080712 url('/music-room/IMG_7966.webp?v=picker-20261020') center center / cover no-repeat;
  color:#f5ecff;
  overflow:hidden;
}
#music-overlay .song-room[hidden] {display:none!important}
#music-overlay .song-room::before {
  z-index:0;
  inset:0;
  opacity:.64;
  background:
    radial-gradient(circle at 10% 13%,rgba(117,223,249,.6) 0 1px,transparent 2px),
    radial-gradient(circle at 83% 19%,rgba(220,114,254,.5) 0 1px,transparent 2px),
    radial-gradient(circle at 36% 64%,rgba(111,240,219,.46) 0 1px,transparent 2px),
    repeating-linear-gradient(0deg,transparent 0 59px,rgba(99,79,156,.065) 60px,transparent 61px),
    repeating-linear-gradient(90deg,transparent 0 59px,rgba(99,79,156,.065) 60px,transparent 61px);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 90%,transparent);
  pointer-events:none;
}
#music-overlay .song-room::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.38;
  background:
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(152,106,209,.04) 3.5px 4px),
    radial-gradient(ellipse at 50% 40%,transparent 20%,rgba(0,0,7,.73) 96%);
}
#music-overlay .song-room-header{
  width:100%;
  max-width:none;
  position:absolute;
  z-index:6;
  inset:calc(env(safe-area-inset-top) + 10px) 0 auto;
  height:48px;
  padding:0 calc(env(safe-area-inset-right) + 15px) 0 calc(env(safe-area-inset-left) + 15px);
  pointer-events:none;
}
#music-overlay .song-room-back {
  pointer-events:auto;
  display:grid;place-items:center;
  width:49px;height:49px;
  color:#d5fbff;
  font:300 42px/1 var(--body);
  text-shadow:0 0 16px rgba(83,223,253,.45);
  transition:transform .2s ease,color .2s ease,text-shadow .2s ease;
}
#music-overlay .song-room-back:hover,
#music-overlay .song-room-back:focus-visible{
  outline:0;color:white;text-shadow:0 0 22px #87f5ff;
  transform:translateX(-3px);
}
#music-overlay .song-room-title,
#music-overlay .song-room-total {
  position:absolute!important;
  width:1px!important;height:1px!important;
  margin:0!important;padding:0!important;
  overflow:hidden!important;white-space:nowrap!important;
  clip-path:inset(50%)!important;
}
#music-overlay .song-energy-field{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(280px,1fr) auto;
  align-items:center;justify-items:center;
  flex:1;min-height:0;min-width:0;width:100%;
  gap:0;
  padding:calc(env(safe-area-inset-top) + 62px) max(16px,env(safe-area-inset-right))
     calc(env(safe-area-inset-bottom) + 28px) max(16px,env(safe-area-inset-left));
  overflow-x:hidden;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(121,95,173,.3) transparent;
  overscroll-behavior:contain;
}
#music-overlay .song-energy-circuits{
  position:absolute;z-index:-1;
  top:0;left:0;right:0;
  width:100%;height:100%;min-height:680px;
  opacity:.75;pointer-events:none;
  filter:drop-shadow(0 0 7px rgba(165,95,235,.2));
}
#music-overlay .circuit-junctions{
  filter:drop-shadow(0 0 7px #5af1e6);
  animation:song-junction-glint 5.6s ease-in-out infinite alternate;
}
#music-overlay .song-energy-reactor{
  position:relative;
  grid-row:1;
  place-self:center;
  display:grid;place-items:center;
  width:clamp(180px,38vw,275px);
  height:clamp(245px,49vh,380px);
  margin:15px 0 0;
  isolation:isolate;
  pointer-events:none;
  filter:drop-shadow(0 0 16px rgba(122,107,255,.27));
  transition:filter .35s ease;
}
#music-overlay .reactor-halo{
  position:absolute;z-index:-1;
  width:135%;height:83%;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(144,98,248,.23),rgba(61,27,133,.15) 34%,transparent 69%);
  filter:blur(24px);
  animation:reactor-halo-breathe 5s ease-in-out infinite alternate;
}
#music-overlay .reactor-ring{
  position:absolute;
  width:116%;height:69%;border-radius:50%;
  border:1px solid rgba(157,123,252,.18);
  box-shadow:inset 0 0 12px rgba(97,185,255,.12),0 0 13px rgba(110,88,225,.11);
  transform:rotateX(66deg) rotate(-12deg);
}
#music-overlay .reactor-ring-outer{
  width:128%;height:74%;
  border:1px dashed rgba(145,221,255,.35);
  animation:reactor-ring-turn 26s linear infinite;
}
#music-overlay .reactor-ring-inner{
  width:99%;height:58%;
  border:1px solid rgba(243,125,231,.5);
  box-shadow:0 0 11px rgba(215,91,255,.25),inset 0 0 12px rgba(121,223,242,.12);
  transform:rotateX(68deg) rotate(23deg);
  animation:reactor-ring-lean 7.2s ease-in-out infinite alternate;
}
#music-overlay .reactor-equator{
  position:absolute;z-index:3;
  left:-17%;top:48%;width:134%;height:22%;
  border:1px solid rgba(113,230,247,.54);
  border-left-color:rgba(135,113,249,.27);
  border-right-color:rgba(245,126,220,.55);
  border-radius:50%;
  box-shadow:0 0 14px rgba(118,200,244,.25);
  transform:rotate(-17deg);
  animation:reactor-orbit-drift 6.4s ease-in-out infinite alternate;
}
#music-overlay .reactor-prism{
  position:relative;z-index:2;
  width:75%;height:85%;
  max-width:205px;max-height:286px;
  overflow:visible;
  filter:drop-shadow(0 0 9px rgba(124,234,255,.64)) drop-shadow(0 0 24px rgba(186,85,255,.28));
  animation:reactor-float 5.4s ease-in-out infinite alternate;
}
#music-overlay .reactor-floor{
  position:absolute;z-index:0;bottom:8%;left:21%;
  width:58%;height:9%;
  border:1px solid rgba(93,222,255,.48);border-radius:50%;
  box-shadow:0 0 0 8px rgba(71,83,192,.045),0 0 24px rgba(128,97,237,.38);
  transform:rotate(-9deg);
}
#music-overlay .song-room-list{
  grid-row:2;
  position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:center;align-items:stretch;
  width:min(650px,100%);max-width:650px;max-height:none;
  gap:clamp(12px,3vw,26px);
  margin:0 auto;
  padding:15px 2px 8px;
  overflow:visible;
}
#music-overlay .song-room-list .energy-element{
  --element-color:#fd72b8;
  --element-shadow:rgba(249,69,142,.34);
  --element-secondary:#ffb258;
  --element-mid:rgba(93,21,56,.31);
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;
  justify-content:space-between;align-items:center;
  gap:4px;
  width:100%;min-width:0;
  min-height:clamp(188px,29svh,237px);
  padding:12px 9px 17px;
  border:1px solid color-mix(in srgb,var(--element-color) 57%,transparent);
  border-radius:12px 3px 13px 4px;
  background:
    radial-gradient(ellipse at 50% 36%,var(--element-mid),transparent 62%),
    linear-gradient(146deg,rgba(16,16,36,.81),rgba(6,5,18,.94));
  color:var(--element-color);
  box-shadow:0 0 0 1px rgba(4,4,18,.3),inset 0 0 22px rgba(92,53,127,.08),
    0 0 15px var(--element-shadow),0 18px 38px rgba(1,0,8,.44);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  transform:translate3d(0,0,0);
  transition:transform .26s cubic-bezier(.18,.9,.2,1),border-color .25s ease,box-shadow .25s ease,background .25s ease,opacity .2s ease;
}
#music-overlay .song-room-list .energy-element[data-track="925444"]{
  --element-color:#65eafa;
  --element-shadow:rgba(43,186,248,.29);
  --element-secondary:#956aff;
  --element-mid:rgba(10,57,88,.35);
  border-radius:3px 14px 4px 14px;
}
#music-overlay .song-room-list .energy-element:nth-child(4n+3){
  --element-color:#ae92ff;--element-secondary:#79ffd8;
  --element-shadow:rgba(148,95,255,.32);--element-mid:rgba(52,25,89,.35);
}
#music-overlay .song-room-list .energy-element:nth-child(4n+4){
  --element-color:#aeff8f;--element-secondary:#ffc879;
  --element-shadow:rgba(116,226,108,.25);--element-mid:rgba(35,73,50,.3);
}
#music-overlay .song-room-list .energy-element::before{
  content:"";position:absolute;inset:6px;z-index:-1;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--element-color) 19%,transparent);
  clip-path:polygon(0 0,28% 0,28% 1px,72% 1px,72% 0,100% 0,100% 100%,0 100%);
  background:repeating-linear-gradient(90deg,transparent 0 22px,color-mix(in srgb,var(--element-color) 4%,transparent) 23px,transparent 24px);
}
#music-overlay .song-room-list .energy-element::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;
  opacity:.42;
  background:
    radial-gradient(circle at 11% 13%,var(--element-color) 0 1px,transparent 2px),
    radial-gradient(circle at 89% 12%,var(--element-secondary) 0 1px,transparent 2px),
    radial-gradient(circle at 82% 80%,var(--element-color) 0 1px,transparent 2px),
    linear-gradient(110deg,transparent 38%,color-mix(in srgb,var(--element-color) 6%,transparent) 52%,transparent 65%);
}
#music-overlay .song-room-list .energy-element strong{
  position:relative;z-index:3;
  display:block;flex:0 0 auto;
  width:100%;min-height:30px;margin:3px 0 0;
  color:#f7ebff;
  font:400 clamp(11px,2.7vw,15px)/1.45 var(--pixel);
  letter-spacing:.035em;
  text-align:center;
  text-transform:uppercase;
  overflow-wrap:anywhere;
  text-shadow:0 0 12px var(--element-shadow),0 2px 2px rgba(0,0,0,.65);
}
#music-overlay .song-room-list .energy-element[data-track="925444"] strong{color:#dbfcff}
#music-overlay .song-room-list .energy-element .song-index,
#music-overlay .song-room-list .energy-element .song-glyph,
#music-overlay .song-room-list .energy-element time{display:none!important}
#music-overlay .song-room-list .element-visual{
  position:relative;isolation:isolate;
  flex:1;
  display:grid;place-items:center;
  width:100%;min-height:140px;
}
#music-overlay .song-room-list .element-orbit{
  position:absolute;width:90%;max-width:165px;aspect-ratio:1;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--element-color) 45%,transparent);
  filter:drop-shadow(0 0 6px var(--element-shadow));
  transform:rotateX(63deg) rotate(12deg);
}
#music-overlay .song-room-list .element-orbit-outer{
  width:100%;max-width:190px;border-style:dashed;opacity:.56;
  animation:element-orbit-spin 13s linear infinite;
}
#music-overlay .song-room-list .element-orbit-inner{
  width:73%;max-width:130px;
  border-color:color-mix(in srgb,var(--element-secondary) 53%,transparent);
  transform:rotateX(64deg) rotate(-19deg);
  opacity:.7;animation:element-orbit-pulse 5.3s ease-in-out infinite alternate;
}
#music-overlay .song-room-list .element-crystal{
  position:relative;z-index:2;
  display:grid;place-items:center;
  width:min(100%,135px);height:137px;
  color:var(--element-color);
  animation:element-hover 4.3s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 11px var(--element-shadow));
}
#music-overlay .song-room-list .element-crystal svg{
  display:block;width:100%;height:100%;
  overflow:visible;
}
#music-overlay .song-room-list .element-crystal .element-cut{
  fill:color-mix(in srgb,var(--element-color) 15%,transparent);
  stroke:var(--element-color);stroke-width:2.2;
  filter:drop-shadow(0 0 3px var(--element-color));
}
#music-overlay .song-room-list .element-crystal .element-engraving{
  stroke:var(--element-secondary);stroke-width:1.4;opacity:.88;
}
#music-overlay .song-room-list .element-crystal .element-core{
  stroke:var(--element-color);stroke-width:1.35;
  fill:color-mix(in srgb,var(--element-secondary) 30%,transparent);
  opacity:.95;
  filter:drop-shadow(0 0 9px var(--element-color));
}
#music-overlay .song-room-list .element-particles i{
  position:absolute;z-index:1;width:3px;height:3px;
  background:var(--element-color);border-radius:50%;
  box-shadow:0 0 11px 2px var(--element-shadow);
  animation:element-mote 4.1s ease-in-out infinite alternate;
}
#music-overlay .song-room-list .element-particles i:nth-child(1){top:16%;left:18%}
#music-overlay .song-room-list .element-particles i:nth-child(2){top:37%;right:13%;animation-delay:-2s}
#music-overlay .song-room-list .element-particles i:nth-child(3){bottom:15%;left:28%;animation-delay:-1s}
#music-overlay .song-room-list .element-particles i:nth-child(4){bottom:23%;right:22%;animation-delay:-3s}
#music-overlay .song-room-list .energy-element.is-selected{
  border-color:color-mix(in srgb,var(--element-color) 83%,white);
  box-shadow:0 0 0 1px var(--element-shadow),inset 0 0 17px var(--element-shadow),
    0 0 25px var(--element-shadow),0 18px 38px rgba(1,0,8,.4);
}
#music-overlay .song-room-list .energy-element:hover,
#music-overlay .song-room-list .energy-element:focus-visible{
  outline:0;
  transform:translate3d(0,-5px,0) scale(1.015);
  border-color:var(--element-color);
  box-shadow:0 0 2px var(--element-color),0 0 30px var(--element-shadow),
    inset 0 0 23px var(--element-shadow),0 21px 36px rgba(0,0,0,.42);
}
#music-overlay .song-room-list .energy-element:focus-visible{
  outline:2px solid var(--element-color);outline-offset:5px;
}
#music-overlay .song-room-list .energy-element:active{transform:scale(.98)}
#music-overlay .song-energy-particles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#music-overlay .song-energy-particles i{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:#87fbf5;box-shadow:0 0 9px 2px rgba(131,240,255,.32);
  animation:room-mote-drift 6s ease-in-out infinite alternate;
}
#music-overlay .song-energy-particles i:nth-child(1){left:11%;top:26%;animation-delay:-1s}
#music-overlay .song-energy-particles i:nth-child(2){left:81%;top:14%;animation-delay:-3s}
#music-overlay .song-energy-particles i:nth-child(3){left:74%;top:48%;animation-delay:-4s}
#music-overlay .song-energy-particles i:nth-child(4){left:18%;top:55%;animation-delay:-2s}
#music-overlay .song-energy-particles i:nth-child(5){left:37%;top:13%;animation-delay:-5s}
#music-overlay .song-energy-particles i:nth-child(6){left:54%;top:30%;animation-delay:-1.8s}
#music-overlay .song-energy-particles i:nth-child(7){left:92%;top:66%;animation-delay:-3.5s}
#music-overlay .song-energy-particles i:nth-child(8){left:7%;top:80%;animation-delay:-1.2s}
#music-overlay .song-energy-particles i:nth-child(9){left:66%;top:76%;animation-delay:-4.7s}
#music-overlay .song-energy-particles i:nth-child(10){left:42%;top:88%;animation-delay:-2.4s}
#music-overlay .song-energy-particles i:nth-child(11){left:28%;top:39%;animation-delay:-5.4s}
#music-overlay .song-energy-particles i:nth-child(12){left:88%;top:35%;animation-delay:-.7s}
#music-overlay .song-room.is-feeding .song-energy-reactor{
  filter:drop-shadow(0 0 18px var(--feeding-hue,#b4deff)) drop-shadow(0 0 37px var(--feeding-hue,#b4deff));
}
#music-overlay .song-room.is-feeding .reactor-prism{
  animation:reactor-accept 730ms cubic-bezier(.15,.8,.25,1) both;
}
#music-overlay .song-room.is-feeding .energy-element:not(.is-feeding){opacity:.38;filter:brightness(.68)}
#music-overlay .song-room.is-feeding .energy-element.is-feeding{
  border-color:var(--element-color);
  box-shadow:0 0 27px var(--element-shadow),inset 0 0 36px var(--element-shadow);
}
#music-overlay .song-element-echo{
  position:fixed;z-index:12;pointer-events:none;
  display:grid;place-items:center;
  width:110px;height:110px;
  color:var(--feeding-hue,#d6adff);
  filter:drop-shadow(0 0 18px var(--feeding-hue,#d6adff));
  transform:translate3d(-50%,-50%,0);
}
#music-overlay .song-element-echo svg{
  width:100%;height:100%;
  fill:color-mix(in srgb,var(--feeding-hue,#d6adff) 18%,transparent);
  stroke:var(--feeding-hue,#d6adff);
}
#music-overlay .song-element-echo .element-cut{stroke-width:3}
#music-overlay .song-element-echo .element-core{opacity:.9}
@keyframes song-junction-glint{from{opacity:.45}to{opacity:1}}
@keyframes reactor-halo-breathe{from{opacity:.5;transform:scale(.87)}to{opacity:1;transform:scale(1.11)}}
@keyframes reactor-ring-turn{from{transform:rotateX(66deg) rotate(0)}to{transform:rotateX(66deg) rotate(360deg)}}
@keyframes reactor-ring-lean{from{transform:rotateX(68deg) rotate(17deg)}to{transform:rotateX(68deg) rotate(29deg)}}
@keyframes reactor-orbit-drift{from{transform:rotate(-19deg) scale(.96);opacity:.5}to{transform:rotate(-8deg) scale(1.035);opacity:1}}
@keyframes reactor-float{from{transform:translateY(-7px) scale(.99)}to{transform:translateY(7px) scale(1.015)}}
@keyframes reactor-accept{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.12);filter:brightness(2)}100%{transform:scale(1);filter:brightness(1.35)}}
@keyframes element-orbit-spin{from{transform:rotateX(63deg) rotate(0)}to{transform:rotateX(63deg) rotate(360deg)}}
@keyframes element-orbit-pulse{from{transform:rotateX(64deg) rotate(-19deg) scale(.93);opacity:.32}to{transform:rotateX(64deg) rotate(-19deg) scale(1.05);opacity:.82}}
@keyframes element-hover{from{transform:translateY(-4px) rotate(-3deg)}to{transform:translateY(5px) rotate(3deg)}}
@keyframes element-mote{from{opacity:.35;transform:translateY(8px) scale(.75)}to{opacity:1;transform:translateY(-9px) scale(1.4)}}
@keyframes room-mote-drift{from{opacity:.15;transform:translate3d(-7px,8px,0)}to{opacity:.9;transform:translate3d(8px,-9px,0)}}
@media(min-width:750px){
 #music-overlay .song-energy-field{
  grid-template-rows:minmax(310px,1fr) auto;
  padding-top:clamp(60px,10vh,115px);
  padding-bottom:clamp(30px,5vh,60px);
 }
 #music-overlay .song-energy-reactor{width:clamp(235px,28vw,285px);height:clamp(310px,43vh,395px)}
 #music-overlay .song-room-list{width:min(640px,76vw)}
 #music-overlay .song-room-list .energy-element{min-height:210px}
}
@media(max-width:440px){
 #music-overlay .song-energy-field{
  grid-template-rows:minmax(248px,1fr) auto;
  padding:calc(env(safe-area-inset-top) + 60px) max(14px,env(safe-area-inset-right))
   calc(env(safe-area-inset-bottom) + 22px) max(14px,env(safe-area-inset-left));
 }
 #music-overlay .song-energy-reactor{
  width:clamp(164px,52vw,214px);
  height:clamp(220px,35svh,325px);
  margin:0;
 }
 #music-overlay .song-room-list{gap:12px;padding:10px 0 4px}
 #music-overlay .song-room-list .energy-element{
  min-height:clamp(178px,25svh,218px);
  padding:9px 6px 15px;
 }
 #music-overlay .song-room-list .element-visual{min-height:120px}
 #music-overlay .song-room-list .element-crystal{width:min(100%,116px);height:122px}
 #music-overlay .song-room-list .energy-element strong{font-size:clamp(10px,3.05vw,13px)}
}
@media(max-height:660px){
 #music-overlay .song-energy-field{grid-template-rows:minmax(200px,1fr) auto;padding-top:65px;padding-bottom:14px}
 #music-overlay .song-energy-reactor{height:220px;width:165px}
 #music-overlay .song-room-list .energy-element{min-height:160px}
 #music-overlay .song-room-list .element-visual{min-height:105px}
 #music-overlay .song-room-list .element-crystal{height:100px;width:105px}
}
@media(prefers-reduced-motion:reduce){
 #music-overlay .song-energy-field *,#music-overlay .song-room-list .energy-element,
 #music-overlay .song-energy-reactor{animation:none!important;transition:none!important}
}