html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0b0d;
  background: radial-gradient(
    circle at 20% 10%,
    #111216 0%,
    #070708 40%,
    #030303 100%
  );
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  height: 100%;
}

.song-wrap {
  text-align: center;
}

.song-label {
  color: #ffffff;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.vinyl {
  width: 420px;
  height: 420px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), inset 0 8px 30px rgba(0, 0, 0, 0.6);
  background: radial-gradient(
      circle at center,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0.6) 10%,
      transparent 10.5%
    ),
    repeating-radial-gradient(
      circle at center,
      rgba(0, 0, 0, 0.06) 0px,
      rgba(0, 0, 0, 0.06) 2px,
      transparent 2.5px,
      transparent 6px
    ),
    linear-gradient(180deg, #0b0b0b 0%, #171717 60%);
  transform-origin: center center;
  transition: box-shadow 200ms ease;
}

.vinyl .label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg at 50% 50%,
    #ef5350,
    #f8b195 35%,
    #c06c84 60%,
    #6c5b7b 100%
  );
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.06), 0 6px 14px rgba(0, 0, 0, 0.5);
}

.vinyl .hole {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0a0a0a;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.03);
}

.vinyl:active {
  transform: scale(0.995);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.vinyl.spinning {
  animation: spin 3s linear infinite;
}

.vinyl:focus {
  outline: none;
  box-shadow: 0 0 0 6px rgba(200, 200, 255, 0.03), 0 22px 40px rgba(0, 0, 0, 0.6);
}

@media (max-width: 480px) {
  .vinyl {
    width: 280px;
    height: 280px;
  }

  .vinyl .label {
    width: 84px;
    height: 84px;
  }

  .vinyl .hole {
    width: 10px;
    height: 10px;
  }
}