/* SUNO WAVE — Real Planet Players for production minusa.php */
:root{
  --swp-blue:#37a8ff;
  --swp-green:#7df45d;
  --swp-gold:#ffd24d;
  --swp-space:#030b17;
}

.swTracks.swPlanetTracks{
  position:relative!important;
  display:grid!important;
  gap:18px!important;
  width:100%!important;
  align-content:start!important;
  isolation:isolate!important;
}

.swTracks.swPlanetTracks::before{
  content:"";
  position:absolute;
  inset:-26px -18px -18px;
  z-index:-2;
  border-radius:34px;
  background:
    radial-gradient(circle at 50% -15%, rgba(68,165,255,.22), transparent 35%),
    radial-gradient(circle at 12% 88%, rgba(255,209,82,.10), transparent 30%),
    radial-gradient(circle at 94% 58%, rgba(120,244,93,.12), transparent 28%),
    linear-gradient(180deg, rgba(3,15,33,.86), rgba(1,7,18,.76));
  border:1px solid rgba(88,177,255,.18);
  box-shadow:0 34px 100px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
  pointer-events:none;
}

.swPlanetMission{
  position:relative;
  min-height:118px;
  padding:18px 20px 18px;
  border:1px solid rgba(86,169,255,.24);
  border-radius:30px;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(2,10,24,.74), rgba(3,13,30,.50)),
    url('/assets/img/minusa-earth/earth-wave.webp') center 50% / cover no-repeat,
    radial-gradient(circle at 50% 100%, rgba(255,184,36,.25), transparent 48%),
    #031123;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 20px 54px rgba(0,0,0,.28);
}

.swPlanetMission::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(3,10,22,.55), transparent 36%, rgba(3,10,22,.62)),
    repeating-linear-gradient(90deg, rgba(95,184,255,.09) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(0deg, rgba(95,184,255,.07) 0 1px, transparent 1px 44px);
  mix-blend-mode:screen;
  opacity:.55;
  pointer-events:none;
}

.swPlanetMission__kicker,
.swPlanetTrack__tag{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:rgba(202,229,255,.82);
  font-size:12px;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:900;
}

.swPlanetMission__kicker::before,
.swPlanetTrack__tag::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--swp-blue);
  box-shadow:0 0 18px var(--swp-blue);
}

.swPlanetMission h3{
  position:relative;
  z-index:1;
  margin:13px 0 7px;
  color:#f4fbff;
  font-size:clamp(24px, 3.1vw, 42px);
  line-height:.95;
  letter-spacing:-.05em;
  font-weight:1000;
  text-shadow:0 0 24px rgba(74,173,255,.42);
}

.swPlanetMission p{
  position:relative;
  z-index:1;
  max-width:650px;
  margin:0;
  color:rgba(222,237,255,.76);
  font-size:15px;
  line-height:1.45;
}

.swTrack.swPlanetTrack{
  position:relative!important;
  overflow:hidden!important;
  border-radius:34px!important;
  padding:0!important;
  border:1px solid rgba(68,169,255,.35)!important;
  background:
    radial-gradient(circle at 50% -40%, rgba(74,177,255,.36), transparent 44%),
    linear-gradient(180deg, rgba(8,23,49,.82), rgba(2,10,24,.76))!important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(72,164,255,.08)!important;
}

.swTrack.swPlanetTrack::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 17% 50%, rgba(72,165,255,.30), transparent 30%),
    repeating-linear-gradient(90deg, rgba(91,181,255,.08) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(91,181,255,.05) 0 1px, transparent 1px 38px);
  opacity:.72;
  pointer-events:none;
}

.swTrack.swPlanetTrack::after{
  content:"";
  position:absolute;
  width:210px;
  height:210px;
  right:-58px;
  bottom:-98px;
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 35%, rgba(210,242,255,.45), transparent 0 8%, rgba(67,164,255,.38) 9% 20%, rgba(16,72,150,.42) 21% 42%, rgba(0,12,35,.18) 43% 70%, transparent 71%),
    url('/assets/img/minusa-earth/planet-ui.webp') center / cover no-repeat;
  opacity:.24;
  filter:drop-shadow(0 0 28px rgba(72,165,255,.46));
  pointer-events:none;
}

.swTrack.swPlanetTrack.is-vocal,
.swTrack.swPlanetTrack.swPlanetTrack--vocal{
  border-color:rgba(125,244,93,.32)!important;
  background:
    radial-gradient(circle at 50% -40%, rgba(99,239,92,.30), transparent 43%),
    linear-gradient(180deg, rgba(8,33,24,.82), rgba(2,16,16,.76))!important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(112,244,93,.08)!important;
}

.swTrack.swPlanetTrack.is-vocal::before,
.swTrack.swPlanetTrack.swPlanetTrack--vocal::before{
  background:
    radial-gradient(circle at 17% 50%, rgba(111,244,95,.26), transparent 30%),
    repeating-linear-gradient(90deg, rgba(122,244,96,.07) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(122,244,96,.045) 0 1px, transparent 1px 38px);
}

.swTrack.swPlanetTrack.is-vocal .swPlanetTrack__tag::before,
.swTrack.swPlanetTrack.swPlanetTrack--vocal .swPlanetTrack__tag::before{
  background:var(--swp-green);
  box-shadow:0 0 18px var(--swp-green);
}

.swPlanetTrack__body{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(180px, 280px) 104px minmax(240px, 1fr);
  gap:20px;
  align-items:center;
  padding:24px 26px 16px;
}

.swPlanetTrack__name h3{
  margin:12px 0 8px;
  color:#f4fbff;
  font-size:clamp(25px, 2.6vw, 38px);
  line-height:.94;
  letter-spacing:-.045em;
  font-weight:1000;
}

.swPlanetTrack__name p{
  margin:0;
  color:rgba(220,236,255,.72);
  font-size:14px;
  line-height:1.42;
}

.swPlanetTrack__name small{
  display:inline-flex;
  margin-top:12px;
  color:rgba(226,241,255,.58);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.swPlay.swPlanetPlay{
  position:relative!important;
  z-index:2;
  width:96px!important;
  height:96px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(180,230,255,.62)!important;
  color:white!important;
  font-size:38px!important;
  font-weight:1000!important;
  line-height:1!important;
  text-indent:4px;
  background:
    radial-gradient(circle at 42% 34%, rgba(255,255,255,.98), rgba(149,224,255,.72) 22%, rgba(49,162,255,.55) 42%, rgba(1,36,84,.80) 70%),
    radial-gradient(circle, rgba(60,174,255,.72), rgba(4,19,45,.95))!important;
  box-shadow:
    0 0 0 8px rgba(59,169,255,.10),
    0 0 0 18px rgba(59,169,255,.055),
    0 20px 45px rgba(0,0,0,.42),
    0 0 44px rgba(58,169,255,.66),
    inset 0 1px 0 rgba(255,255,255,.62)!important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease!important;
}

.swPlay.swPlanetPlay:hover{
  transform:translateY(-2px) scale(1.035)!important;
  filter:saturate(1.18) brightness(1.08)!important;
}

.swPlay.swPlanetPlay:active{
  transform:scale(.97)!important;
}

.swPlay.swPlanetPlay::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:inherit;
  border:1px solid rgba(95,191,255,.18);
  animation:swPlanetPulse 2.4s ease-in-out infinite;
  pointer-events:none;
}

.swTrack.swPlanetTrack.is-vocal .swPlay.swPlanetPlay,
.swTrack.swPlanetTrack.swPlanetTrack--vocal .swPlay.swPlanetPlay{
  border-color:rgba(193,255,178,.58)!important;
  background:
    radial-gradient(circle at 42% 34%, rgba(255,255,255,.95), rgba(190,255,169,.70) 22%, rgba(99,231,88,.56) 42%, rgba(10,73,36,.82) 70%),
    radial-gradient(circle, rgba(115,244,93,.72), rgba(4,30,18,.95))!important;
  box-shadow:
    0 0 0 8px rgba(116,244,93,.10),
    0 0 0 18px rgba(116,244,93,.055),
    0 20px 45px rgba(0,0,0,.42),
    0 0 44px rgba(116,244,93,.56),
    inset 0 1px 0 rgba(255,255,255,.62)!important;
}

.swWaveBox.swPlanetWave{
  position:relative!important;
  min-height:128px!important;
  border-radius:26px!important;
  overflow:hidden!important;
  border:1px solid rgba(87,176,255,.24)!important;
  background:
    linear-gradient(180deg, rgba(5,17,38,.74), rgba(1,7,18,.88)),
    radial-gradient(circle at 50% 50%, rgba(72,165,255,.22), transparent 62%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 34px rgba(52,159,255,.09)!important;
}

.swTrack.swPlanetTrack.is-vocal .swWaveBox.swPlanetWave,
.swTrack.swPlanetTrack.swPlanetTrack--vocal .swWaveBox.swPlanetWave{
  border-color:rgba(125,244,93,.22)!important;
  background:
    linear-gradient(180deg, rgba(4,30,22,.74), rgba(1,14,14,.88)),
    radial-gradient(circle at 50% 50%, rgba(119,244,93,.20), transparent 62%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 34px rgba(119,244,93,.08)!important;
}

.swWaveBox.swPlanetWave .swWaveFake{
  position:absolute!important;
  inset:24px 18px!important;
  opacity:.92!important;
  background:
    repeating-linear-gradient(90deg,
      rgba(93,190,255,.16) 0 5px,
      transparent 5px 9px,
      rgba(93,190,255,.46) 9px 12px,
      transparent 12px 18px)!important;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 0 60%, transparent 78%);
  mask-image:radial-gradient(ellipse at center, #000 0 60%, transparent 78%);
  filter:drop-shadow(0 0 16px rgba(80,184,255,.42));
  animation:swPlanetWaveDrift 5.8s linear infinite;
}

.swTrack.swPlanetTrack.is-vocal .swWaveBox.swPlanetWave .swWaveFake,
.swTrack.swPlanetTrack.swPlanetTrack--vocal .swWaveBox.swPlanetWave .swWaveFake{
  background:
    repeating-linear-gradient(90deg,
      rgba(127,244,93,.14) 0 5px,
      transparent 5px 9px,
      rgba(127,244,93,.42) 9px 12px,
      transparent 12px 18px)!important;
  filter:drop-shadow(0 0 16px rgba(127,244,93,.34));
}

.swWaveBox.swPlanetWave .swWaveImg{
  position:absolute!important;
  inset:10px 12px!important;
  width:calc(100% - 24px)!important;
  height:calc(100% - 20px)!important;
  object-fit:cover!important;
  opacity:.92!important;
  mix-blend-mode:screen!important;
  filter:saturate(1.28) contrast(1.08) drop-shadow(0 0 16px rgba(74,169,255,.32));
}

.swWaveBox.swPlanetWave .swWaveProgress{
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  height:auto!important;
  width:100%!important;
  pointer-events:none!important;
  background:linear-gradient(90deg, rgba(81,186,255,.18), transparent)!important;
  transform-origin:left center!important;
}

.swWaveBox.swPlanetWave .swWaveProgress i{
  display:block!important;
  width:2px!important;
  height:100%!important;
  margin-left:auto!important;
  background:rgba(235,250,255,.82)!important;
  box-shadow:0 0 20px rgba(102,198,255,.8)!important;
}

.swWaveBox.swPlanetWave .swWaveClock{
  position:absolute!important;
  right:14px!important;
  bottom:10px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  background:rgba(0,7,18,.56)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:rgba(233,244,255,.72)!important;
  font-size:12px!important;
  backdrop-filter:blur(12px)!important;
}

.swPlanetTrack__footer{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 26px 22px;
}

.swPlanetTrack__footer .swFileSpecs{
  flex:1 1 auto;
  margin:0!important;
}

.swPlanetTrack__footer .swFileSpecs span{
  border-color:rgba(119,189,255,.16)!important;
  background:rgba(0,10,24,.42)!important;
}

.swPlanetTrack__footer .swMiniBtn{
  flex:0 0 auto;
  border-radius:999px!important;
  padding:12px 16px!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
}

@keyframes swPlanetPulse{
  0%,100%{ transform:scale(.92); opacity:.34; }
  50%{ transform:scale(1.05); opacity:.72; }
}

@keyframes swPlanetWaveDrift{
  from{ background-position-x:0; }
  to{ background-position-x:180px; }
}

@media (max-width: 980px){
  .swPlanetTrack__body{ grid-template-columns:1fr; text-align:center; gap:16px; padding:22px 18px 14px; }
  .swPlay.swPlanetPlay{ margin:0 auto; }
  .swWaveBox.swPlanetWave{ min-height:118px!important; }
  .swPlanetTrack__footer{ flex-direction:column; align-items:stretch; padding:0 18px 20px; }
}

@media (max-width: 560px){
  .swPlanetMission{ min-height:102px; padding:16px; border-radius:24px; }
  .swPlanetMission h3{ font-size:26px; }
  .swPlanetMission p{ font-size:13px; }
  .swTrack.swPlanetTrack{ border-radius:26px!important; }
  .swPlanetTrack__name h3{ font-size:26px; }
  .swPlay.swPlanetPlay{ width:84px!important; height:84px!important; font-size:32px!important; }
  .swWaveBox.swPlanetWave{ min-height:96px!important; }
}