.disc-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.disc-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 1;
  transition: opacity .3s;
  backdrop-filter: blur(6px);
}


.disc-svg {
  width: 180px;
  height: 180px;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.45));
  transition: filter .3s;
}

.disc-wrap:hover .disc-svg {
  filter: drop-shadow(0 10px 32px rgba(0,0,0,.6));
}

.disc-platter {
  transform-origin: 90px 90px;
}

.disc-wrap.playing .disc-platter {
  animation: vinyl-spin 2.8s linear infinite;
}

@keyframes vinyl-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.disc-arm {
  transform-origin: 152px 36px;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}

.disc-wrap.playing .disc-arm {
  transform: rotate(-18deg);
}

.auth-hidden {
  opacity: 0 !important;
}

body.auth-hidden > * {
  display: none !important;
}

[data-theme="dark"] .vinyl-label-fill { fill: #c0384a; }
[data-theme="light"] .vinyl-label-fill { fill: #d94055; }
[data-theme="dark"] .vinyl-label-text { fill: #ffd0d8; }
[data-theme="light"] .vinyl-label-text { fill: #fff0f2; }
[data-theme="dark"] .vinyl-groove { stroke: #3a1520; }
[data-theme="light"] .vinyl-groove { stroke: #2a0a12; }
[data-theme="dark"] .vinyl-body { fill: #1e0a10; }
[data-theme="light"] .vinyl-body { fill: #150608; }
[data-theme="dark"] .arm-color { stroke: #aaa; }
[data-theme="light"] .arm-color { stroke: #888; }