/* ==================================================
   SUPERSEAL V2 BEAT SELECTOR
   ================================================== */

.v2-beat-selector {
  position: absolute;

  left: 17.15%;
  top: 78.00%;

  width: 4.65%;
  aspect-ratio: 1;

  z-index: 125;

  margin: 0;
  padding: 0;

  border:
    0.18vw solid
    rgba(16, 16, 16, 0.95);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 42% 35%,
      #5b5b5b 0%,
      #292929 24%,
      #101010 67%,
      #050505 100%
    );

  box-shadow:
    inset 0 0 0.35vw
      rgba(255,255,255,0.16),

    inset 0 0 0 0.14vw
      rgba(0,0,0,0.9),

    0 0.18vw 0.35vw
      rgba(0,0,0,0.65);

  cursor:
    grab;

  touch-action:
    none;

  -webkit-tap-highlight-color:
    transparent;
}


.v2-beat-selector:active {
  cursor:
    grabbing;
}


.v2-beat-selector-face {
  position: absolute;

  inset: 7%;

  border-radius: 50%;

  transform:
    rotate(
      var(--v2-beat-selector-angle, 0deg)
    );

  transition:
    transform 90ms ease-out;

  pointer-events:
    none;
}


.v2-beat-selector-pointer {
  position: absolute;

  left: 47%;
  top: 8%;

  width: 6%;
  height: 28%;

  border-radius:
    999px;

  background:
    #ececec;

  box-shadow:
    0 0 0.16vw
    rgba(255,255,255,0.65);

  transform-origin:
    50% 150%;
}


.v2-beat-selector::before {
  content:
    "BEAT";

  position: absolute;

  left: 50%;
  top: -32%;

  transform:
    translateX(-50%);

  color:
    #151515;

  font-family:
    system-ui,
    -apple-system,
    sans-serif;

  font-size:
    min(0.62vw, 1.05vh);

  font-weight:
    900;

  letter-spacing:
    0.07em;

  white-space:
    nowrap;

  pointer-events:
    none;
}


/* Debug alignment */

body.debug .v2-beat-selector {
  outline:
    2px solid
    #ff00ff;

  box-shadow:
    0 0 0 2px
    rgba(255,0,255,0.2);
}


/* ==================================================
   RETIRE LEGACY CHANGE LOOP DIAL
   V2 Beat Selector replaces it completely.
   ================================================== */

.change-loop-button,
.change-loop-control,
.change-loop-knob,
.change-loop-rotary,
.knob-change-loop,
#changeLoopKnob,
#changeLoopControl {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}


/* ==================================================
   V2 BEAT SELECTOR FINAL SIZE / POSITION
   ~20% smaller and slightly higher
   ================================================== */

.v2-beat-selector {
  left: 17.62% !important;
  top: 76.55% !important;

  width: 3.72% !important;
}