*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow:hidden;
  color: rgba(255,255,255,0.92);
  background:
    radial-gradient(1000px 800px at 20% 75%, rgba(255, 205, 150, 0.45), transparent 60%),
    radial-gradient(900px 700px at 80% 80%, rgba(255, 170, 210, 0.40), transparent 60%),
    radial-gradient(700px 600px at 70% 20%, rgba(255, 220, 180, 0.35), transparent 60%),
    linear-gradient(120deg, #fff5cc 0%, #ffe4ec 55%, #fff0f4 100%);
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.22;
}

.wrap{
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding: 20px 18px 64px;
}

.top{
  width:100%;
  display:flex;
  justify-content:center;
  padding-top: 2px;
  padding-bottom: 8px;
}

.logo{
  margin:0;
  font-weight:400;
  letter-spacing:-0.02em;
  font-size: clamp(20px, 2.4vw, 28px);
  color: rgba(255,255,255,0.92);
  animation: microWiggle 6.8s ease-in-out infinite;
  transform-origin: 50% 60%;
  text-shadow: 0 10px 34px rgba(0,0,0,0.10);
  user-select:none;
}
@keyframes microWiggle{
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  25%  { transform: translate3d(0.2px,-0.3px,0) rotate(-0.06deg); }
  50%  { transform: translate3d(-0.3px,0.2px,0) rotate(0.05deg); }
  75%  { transform: translate3d(0.15px,0.25px,0) rotate(-0.03deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}

.mid{
  flex:1;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.coverWrap{
  position: relative;
  width: min(300px, 70vw);
  max-height: 46vh;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}

.cover{
  display:block;
  width:100%;
  height: 100%;
  max-height: 46vh;
  object-fit: cover;
}

/* Track overlay now vertically centered */
.trackOverlay{
  position:absolute;
  inset: 0;
  padding: 12px 10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 10px;
  pointer-events: none;
}

.trackRow{
  display:flex;
  align-items:center;
  justify-content: center;
  gap:10px;
  pointer-events: none;
}


.playBtn{
  pointer-events: auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
  cursor:pointer;
  position: relative;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}

.playBtn::before{
  content:"";
  position:absolute;
  left: 11px;
  top: 8px;
  width:0; height:0;
  border-left: 8px solid rgba(255,255,255,0.92);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.12));
}

.playBtn.isPlaying::before{
  content:"";
  left: 12px;
  top: 10px;
  width: 10px;
  height: 14px;
  border: none;
  background:
    linear-gradient(to right,
      rgba(255,255,255,0.92) 0 3px,
      transparent 3px 7px,
      rgba(255,255,255,0.92) 7px 10px
    );
}

.playBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.24);
  border-color: rgba(255,255,255,0.44);
}

.trackText{
  pointer-events:none;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  font-size: 11.5px;
  letter-spacing: 0.01em;
  text-shadow: 0 10px 22px rgba(0,0,0,0.25);
  white-space: nowrap;
}
.trackText .num{ opacity: 0.92; margin-right: 4px; }
.trackText .dur{ opacity: 0.78; margin-left: 6px; }

/* Under art */
.belowArt{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.releaseTitle{
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 12px 26px rgba(0,0,0,0.14);
  padding: 2px 10px 0;
}
.releaseBy{
  font-size: 11px;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.70);
  text-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

.iconsRow{
  display:flex;
  gap: 16px;
  align-items:center;
  justify-content:center;
  margin-top: 4px;
}

/* Icons ONLY (no glass, no labels) */
.iconLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  text-decoration:none;
  background: transparent;
  border: none;
  transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
  opacity: 0.92;
}
.iconLink:hover{
  transform: translateY(-1px) scale(1.03);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18));
  opacity: 1;
}

.footer{
  position:fixed;
  bottom:14px;
  left:0; right:0;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,0.65);
}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.30);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events:none;
  transition: opacity 180ms ease;
  box-shadow: 0 16px 36px rgba(0,0,0,0.14);
}
.toast.on{ opacity: 1; }

/* Orb */
.orbLayer{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  transition: opacity 180ms ease;
}
.orbLayer.isHidden{ opacity:0; }

.orb{
  position:absolute;
  width:44px;
  height:44px;
  border-radius:999px;
  transform:translate(-50%,-50%);
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.75), rgba(255,255,255,0.12) 35%, rgba(255,255,255,0.06) 60%, rgba(255,255,255,0.02) 100%);
  border:1px solid rgba(255,255,255,0.26);
  box-shadow:0 18px 50px rgba(0,0,0,0.12), inset 0 1px 1px rgba(255,255,255,0.35);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  mix-blend-mode:overlay;
  opacity:0.92;
}
.orb.trail{ width:34px; height:34px; opacity:0.55; }
.orb.trail2{ width:26px; height:26px; opacity:0.38; }
.orb.trail3{ width:18px; height:18px; opacity:0.26; }

@media (max-width: 420px){
  .trackText{ font-size: 12px; padding: 6px 9px; }
  .playBtn{ width: 32px; height: 32px; }
  .playBtn::before{ left: 12px; top: 9px; border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px; }
}

/* Shop button (top-right) */
.top{ position: relative; }
.shopBtn{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-decoration:none;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.82);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.shopBtn:hover{
  transform: translateY(-50%) translateY(-1px);
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.34);
}

/* Shop page */
.shopMid{
  flex: 1;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.shopCard{
  width: min(560px, 92vw);
  padding: 18px 18px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.26);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.14);
  text-align:center;
}
.shopTitle{
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.92);
  margin-bottom: 10px;
}
.shopText{
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.78);
  margin: 0 auto 14px;
  max-width: 52ch;
}
.signupForm{ margin:0; }
.signupRow{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap: wrap;
}
.signupRow input{
  width: min(340px, 76vw);
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(0,0,0,0.12);
  color: rgba(255,255,255,0.92);
  outline: none;
}
.signupRow input::placeholder{ color: rgba(255,255,255,0.55); }
.signupRow button{
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
  cursor:pointer;
  transition: transform 160ms ease, background 160ms ease;
}
.signupRow button:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.22);
}
.finePrint{
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.62);
}
.srOnly{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.iconLink svg{ width:30px; height:30px; }

@media (max-width: 420px){
  .trackText{ font-size: 11px; }
  .playBtn{ width: 28px; height: 28px; }
  .iconLink svg{ width:32px; height:32px; }
}


/* --- Desktop/header fix: ensure shop button shows on all screen sizes --- */
.top{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}
.shopBtn{
  right: 0;
  z-index: 5;
}
@media (min-width: 900px){
  .top{ padding-left: 8px; padding-right: 8px; }
  .shopBtn{ right: 8px; }
}

/* --- Pin shop button to true top-right corner --- */
.shopBtn{
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  transform: none !important;
}
@media (max-width: 420px){
  .shopBtn{ top: 16px !important; right: 16px !important; }
}

/* --- Tracklist cleanup: consistent pill widths + nicer hover --- */
.trackOverlay{
  padding: 12px 16px !important;
  gap: 10px !important;
}

.trackRow{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  transition: transform 160ms ease;
}

.trackRow:hover{
  transform: scale(1.02);
}

.playBtn{
  width: 24px !important;
  height: 24px !important;
}
.playBtn::before{
  left: 9px !important;
  top: 7px !important;
  border-left: 7px solid rgba(255,255,255,0.92) !important;
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
}
.playBtn.isPlaying::before{
  left: 8px !important;
  top: 6px !important;
  width: 7px !important;
  height: 12px !important;
  background:
    linear-gradient(to right,
      rgba(255,255,255,0.92) 0 2.4px,
      transparent 2.4px 4.6px,
      rgba(255,255,255,0.92) 4.6px 7px
    ) !important;
}

/* Make the text pills a consistent width so titles don't look jagged */
.trackText{
  width: min(240px, 56vw) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: 10px !important;
  white-space: nowrap;
}

/* Left side (num + title) stays grouped */
.trackText .num{ flex: 0 0 auto; }
.trackText::before{ content: none; }

/* Wrap title+num in a span for layout (JS not needed). We'll use CSS trick by turning existing text into flex with inline elements. */
.trackText{
  padding: 6px 10px !important;
}
.trackText .dur{
  margin-left: auto !important;
  opacity: 0.75;
}

/* Slightly smaller font for tighter look */
.trackText{
  font-size: 11.25px !important;
  letter-spacing: 0.01em !important;
}

/* --- Icon SVG crisp / prevent deformation --- */
.iconLink svg{
  display:block;
  width:32px;
  height:32px;
}

.formSuccess{
  margin-top:14px;
  font-size:12px;
  letter-spacing:0.03em;
  color:rgba(255,255,255,0.9);
  transition: opacity 300ms ease;
}