* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #161618;
  --panel: #1f1f22;
  --panel-2: #2a2a2e;
  --line: #3a3a40;
  --text: #ECECEE;
  --muted: #8a8a90;
  --apricot: #DD8459;
  --tangerine: #FD5503;
  --olivewood: #766947;
  --cocoa: #4E3C22;
  --tangerine-glow: rgba(253, 85, 3, 0.45);
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(253, 85, 3, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(78, 60, 34, 0.35) 0%, transparent 50%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}

/* full-viewport centered stage */
.stage {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 36px;
  padding: 48px 24px;
  text-align: center;
}

/* logo */
.logo {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.logo-mark {
  width: 110px; height: 110px;
  filter: drop-shadow(0 8px 30px rgba(253, 85, 3, 0.25));
}
.logo-text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.logo-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(40px, 7vw, 64px);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  background: linear-gradient(180deg, #ECECEE 0%, var(--apricot) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.logo-tag {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-style: italic;
}

/* play button */
.play-button {
  width: 168px; height: 168px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #ff8a4a 0%, var(--tangerine) 55%, #b13d00 100%);
  box-shadow:
    0 0 0 6px rgba(253, 85, 3, 0.08),
    0 0 80px var(--tangerine-glow),
    inset 0 -6px 20px rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
}
.play-button::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(253, 85, 3, 0.35);
  animation: ring 2.4s ease-in-out infinite;
}
@keyframes ring {
  0%, 100% { transform: scale(1); opacity: .35; }
  50% { transform: scale(1.06); opacity: 0; }
}
.play-button:hover { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(253, 85, 3, 0.12), 0 0 110px var(--tangerine-glow), inset 0 -6px 20px rgba(0,0,0,0.45); }
.play-button:active { transform: scale(0.97); }
.play-button svg { width: 56px; height: 56px; fill: white; position: relative; z-index: 1; }
.icon-loading { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* now playing */
.nowplaying {
  display: flex; align-items: center; gap: 14px;
  background: rgba(31,31,34,0.7);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 12px 18px;
  width: 100%;
  max-width: 440px;
}
.art {
  width: 52px; height: 52px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--olivewood), var(--tangerine));
  background-size: cover; background-position: center;
}
.meta { flex: 1; text-align: left; min-width: 0; }
.track { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artist { color: var(--muted); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.eq { display: flex; gap: 3px; align-items: flex-end; height: 22px; flex-shrink: 0; }
.eq span {
  width: 3px; background: var(--tangerine); border-radius: 2px;
  animation: bounce 0.8s ease-in-out infinite;
}
.eq span:nth-child(1) { height: 60%; animation-delay: -0.4s; }
.eq span:nth-child(2) { height: 100%; animation-delay: -0.2s; }
.eq span:nth-child(3) { height: 40%; animation-delay: -0.6s; }
.eq span:nth-child(4) { height: 80%; animation-delay: -0.1s; }
@keyframes bounce { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }

/* live strip */
.live-strip {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--muted); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #56565b; }
.live-dot.on { background: var(--tangerine); box-shadow: 0 0 10px var(--tangerine); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }
.dot-sep { opacity: 0.4; }

.origin {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* mobile */
@media (max-width: 640px) {
  .stage { gap: 28px; padding: 32px 20px; }
  .logo-mark { width: 88px; height: 88px; }
  .play-button { width: 144px; height: 144px; }
  .play-button svg { width: 48px; height: 48px; }
  .nowplaying { padding: 10px 14px; }
}