/* Pekosoft Turntable */
/* pekosoft.net/css/turntable.css */

.record-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
}

#tool-container.module-maximized .record-player {
  justify-content: center;
  height: 100%;
  padding: 24px;
}

.turntable {
  width: 100%;
  max-width: 512px;
  aspect-ratio: 1 / 1;
  background: var(--grey1);
  border-radius: 50%;
  position: relative;
  transform: rotate(0deg);
  touch-action: none;
}

.center-hole {
  width: 2.3%;
  height: 2.3%;
  background: var(--black);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
}

.rotation-line {
  width: 4px;
  height: 50%;
  background: var(--white);
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
}

.diameter-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.diameter-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--grey2);
  border-radius: 50%;
  pointer-events: none;
}

.ring-7 {
  width: 58.33%;
  height: 58.33%;
}

.ring-10 {
  width: 83.33%;
  height: 83.33%;
}

.ring-12 {
  width: 100%;
  height: 100%;
}

.label-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--grey2);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.label-small {
  width: 27.54%;
  height: 27.54%;
}

.label-large {
  width: 32.79%;
  height: 32.79%;
}

/* 
  This wrapper isolates the rotating turntable animation on mobile.
  Fixes a Chromium bug (April 2025) where transform: rotate()
  caused the entire page to shift or animate on some phones.
  Keeps GPU compositing confined to the spinning disc only.
*/

.turntable-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 512px;
  transform: translateZ(0);
  will-change: transform;
  contain: layout paint;
  overflow: hidden;
  position: relative;
}

#tool-container.module-maximized .turntable-wrapper {
  width: min(100%, calc(100vh - 160px), 980px);
  max-width: none;
}

#tool-container.module-maximized .turntable {
  max-width: none;
}

.wrapper-inputs,
.wrapper-buttons {
  border: 4px solid var(--grey1);
}

/* END OF FILE */