/* Main listening deck. Small covers retain their square artwork and existing controls. */
.record-player {
  padding: 23px 22px 20px;
  border: 1px solid #dce9f1;
  border-radius: 24px;
  background: radial-gradient(ellipse at 8% 0%, #fff 10%, transparent 65%), linear-gradient(155deg, #f8fcff, #eaf4fa 55%, #fdfefe);
  box-shadow: 0 16px 40px -22px #234b6850, inset 0 1px 0 #fff, inset 0 -3px 0 #dfebf35c;
}
.record-player .turntable { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; max-width: none; margin: 0; }
.record-player .record-caption,
.record-player .record-now { display: flex; align-items: center; justify-content: space-between; color: #6b879b; font-size: 9px; letter-spacing: .13em; line-height: 1.5; font-weight: 550; }
.record-caption > span:first-child { display: inline-flex; align-items: center; gap: 7px; color: #466b86; }
.record-caption > span:first-child::before { content: ""; width: 5px; height: 5px; flex: none; border-radius: 50%; background: #7caac7; }
.record-player .record-stage { position: relative; padding: 27px 16px 25px 0; }
.record-player .record-button { position: relative; display: block; width: 100%; aspect-ratio: 1; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.record-player .record-button:focus-visible { outline: 2px solid #6a97b7; outline-offset: 6px; }
.record-player .album-art.vinyl-disc {
  width: 100%; height: 100%; border: 3px solid #202936; border-radius: 50%;
  isolation: isolate; overflow: hidden; color: white;
  /* Five widely spaced grooves leave the larger label visually uninterrupted. */
  background: radial-gradient(circle closest-side,
    transparent 0 77%, #9aafbf30 77.2% 77.7%, transparent 78% 82%,
    #9aafbf2b 82.2% 82.7%, transparent 83% 87%,
    #9aafbf2b 87.2% 87.7%, transparent 88% 92%,
    #9aafbf30 92.2% 92.7%, transparent 93% 97%,
    #9aafbf33 97.2% 97.7%, transparent 98%), #19232e;
  box-shadow: 0 15px 22px -9px #20395355, 0 3px 5px #122d3f28, inset 0 0 0 1px #859bae33;
  transform: rotate(var(--record-angle, 0deg));
}
.record-player .vinyl-disc::before {
  content: ""; position: absolute; inset: 0; width: auto; height: auto; border: 0; border-radius: 50%; transform: none; z-index: 1;
  background: conic-gradient(from -28deg, transparent 0deg, #dbeaf024 43deg, transparent 82deg 180deg, #dbeaf01c 226deg, transparent 268deg);
}
.record-player .vinyl-disc::after { display: none; }
.record-player .vinyl-label {
  position: absolute; inset: 13%; border-radius: 50%; overflow: hidden; z-index: 2;
  background: linear-gradient(135deg, #d2e4ef, #769fbd); border: 2px solid #0f1821;
  box-shadow: 0 0 0 1px #91a8b03d;
}
.record-player .vinyl-label img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.record-player .orange .vinyl-label { background: linear-gradient(145deg, #ffd49a, #d97856); }
.record-player .violet .vinyl-label { background: linear-gradient(145deg, #bfb5e0, #514e82); }
.record-player .green .vinyl-label { background: linear-gradient(145deg, #b5dfc3, #3b8690); }
.record-player .record-center-control { position: absolute; inset: 0; display: grid; place-items: center; z-index: 4; border-radius: 50%; background: transparent; transition: background .2s; }
.record-player .record-center-control svg { width: 23px; height: 23px; padding: 13px; box-sizing: content-box; color: #fff; background: #21394f9c; border-radius: 50%; box-shadow: 0 3px 18px #07122424; backdrop-filter: blur(5px); opacity: 0; transform: scale(.9); transition: opacity .2s, transform .2s; }
.record-player .record-button:is(:hover, :focus-visible) .record-center-control { background: #0712240b; }
.record-player .record-button:is(:hover, :focus-visible) .record-center-control svg { opacity: 1; transform: scale(1); }
.record-player .tonearm { position: absolute; right: 11px; top: 21px; width: 8px; height: 39%; border: 1px solid #95a9b8; border-radius: 6px; background: linear-gradient(90deg, #9aafc0, #f7fcff 45%, #b4c6d3 75%, #889faf); transform-origin: 4px 7px; transform: rotate(-8deg); transition: transform .9s cubic-bezier(.22, 1, .36, 1); box-shadow: 3px 3px 4px #18394f28; pointer-events: none; z-index: 5; }
.record-player .tonearm::before { content: ""; position: absolute; top: -7px; left: -9px; width: 25px; height: 25px; border-radius: 50%; border: 1px solid #a5b9c8; background: radial-gradient(circle, #627d93 0 18%, #e6eff6 22% 43%, #9cafc1 48% 56%, #eaf3f9 62%); box-shadow: 0 2px 3px #24465c22; }
.record-player .tonearm i { position: absolute; left: -3px; bottom: -16px; width: 12px; height: 30px; border-radius: 3px 3px 4px 4px; background: linear-gradient(90deg, #34506b, #526d86 70%, #2d465d); transform: rotate(14deg); box-shadow: 2px 3px 4px #18394f33; }
.record-player .tonearm i::after { content: ""; position: absolute; inset: auto 3px 4px; height: 3px; border-top: 1px solid #aec7d77d; border-bottom: 1px solid #aec7d74d; }
.record-player .turntable.is-playing .tonearm { transform: rotate(18deg); }
.record-player .record-now { justify-content: flex-start; gap: 7px; font-size: 8px; }
.record-player .record-now > span:last-child { margin-left: auto; }
.record-player .record-light { width: 5px; height: 5px; flex: none; border-radius: 50%; background: #acbfcb; transition: background .3s, box-shadow .3s; }
.record-player .is-playing .record-light { background: #5ca69c; box-shadow: 0 0 0 3px #72b4ae1a, 0 0 8px #72b4ae4d; }
.record-player .record-copy { text-align: center; margin-top: 19px; padding-top: 20px; border-top: 1px solid #d6e4ee; }
.record-player .record-copy h2 { font-size: 23px; font-weight: 550; line-height: 1.45; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.record-player .record-copy p { font-size: 12px; line-height: 1.8; letter-spacing: .03em; margin: 6px 0 15px; color: #6b8499; overflow-wrap: anywhere; }
.record-player .music-player-controls { max-width: none; margin: 0; padding: 0; border: 0; }
.record-player .music-player-controls .transport { gap: 8px; }
.record-player .music-player-controls .seek-row { margin-top: 15px; }
.record-player .music-player-controls .round-play { background: #355f80; box-shadow: 0 3px 9px #355f8024; }
.record-player .music-player-controls .mini-picker { color: #55758d; }
.record-player .music-player-actions { margin-top: 13px; }
@media (max-width: 1050px) and (min-width: 761px) { .record-player { padding: 20px 18px 18px; } }
@media (max-width: 760px) { .record-player { max-width: 370px; margin-inline: auto; padding: 23px 22px 20px; } }
@media (max-width: 360px) { .record-player { padding: 20px 16px 18px; } }
[data-motion="reduced"] .record-player :is(.tonearm, .record-light, .record-center-control, .record-center-control svg) { transition: none; }
@media (prefers-reduced-motion: reduce) { .record-player :is(.tonearm, .record-light, .record-center-control, .record-center-control svg) { transition: none; } }