/* ==================================================
   SUPERSEAL V2 FINAL POLISH
   ================================================== */


/* --------------------------------------------------
   LEFT REEL
   Tiny final centering adjustment.
   Does not interfere with animated rotation.
-------------------------------------------------- */

.reel-left {
  margin-left: -0.35%;
}


/* --------------------------------------------------
   BEAT SELECTOR KNOB
   10% smaller + slightly right + tiny upward nudge.

   Individual scale/translate properties intentionally
   stay separate from the knob's animated transform.
-------------------------------------------------- */

.loop-selector-rotary {
  scale: 0.90;
  translate: 8% -2%;
  transform-origin: center;
}


.change-loop-button {
  scale: 0.90;
  translate: 8% -2%;
  transform-origin: center;
}


/* --------------------------------------------------
   OLD MAIN-PAGE LOOPS / FULL BEATS CONTROL

   Keep it alive offscreen because the Crates control
   will call its existing logic.
-------------------------------------------------- */

.v2-main-mode-switch-hidden {
  position: absolute !important;

  left: -10000px !important;
  top: -10000px !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;
}


/* --------------------------------------------------
   CRATES PLAYBACK SOURCE
-------------------------------------------------- */

.v2-crate-playback-source {
  margin: 12px 0 14px;

  padding: 11px 12px;

  border:
    1px solid
    rgba(77,255,112,0.32);

  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      rgba(8,34,15,0.92),
      rgba(2,15,7,0.96)
    );

  box-shadow:
    inset 0 0 18px
    rgba(20,255,60,0.04);
}


.v2-crate-playback-title {
  margin-bottom: 8px;

  color: #62ff78;

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 0.12em;

  text-align: center;
}


.v2-crate-playback-buttons {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 7px;
}


.v2-crate-playback-button {
  min-height: 36px;

  border:
    1px solid
    rgba(71,255,103,0.35);

  border-radius: 7px;

  color: #79ff8b;

  background:
    rgba(0,22,7,0.92);

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 0.06em;

  cursor: pointer;

  transition:
    transform 100ms ease,
    border-color 100ms ease,
    box-shadow 100ms ease,
    background 100ms ease;
}


.v2-crate-playback-button:hover {
  transform:
    translateY(-1px);

  border-color:
    #63ff78;

  box-shadow:
    0 0 12px
    rgba(52,255,85,0.22);
}


.v2-crate-playback-button.is-active {
  color: #071208;

  border-color: #6dff7e;

  background:
    #6dff7e;

  box-shadow:
    0 0 12px
    rgba(65,255,92,0.42);
}


/* --------------------------------------------------
   FIRST-PARTY FEEDBACK BUTTON

   Deliberately different from the green navigation
   buttons so Q's feedback request remains obvious.
-------------------------------------------------- */

.v2-feedback-button {
  position: absolute;

  right: 1.80%;
  top: 72.85%;

  z-index: 72;

  width: 12.25%;
  height: 6.10%;

  display: flex;

  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  border:
    2px solid
    #ffba3b;

  border-radius:
    9px;

  color:
    #ffe6aa;

  background:
    linear-gradient(
      180deg,
      rgba(70,37,5,0.96),
      rgba(35,18,2,0.98)
    );

  box-shadow:
    0 0 10px
    rgba(255,168,35,0.34),
    inset 0 0 12px
    rgba(255,184,46,0.08);

  font-family:
    "Courier New",
    monospace;

  font-size:
    min(0.72vw, 1.25vh);

  font-weight: 900;

  letter-spacing:
    0.08em;

  text-decoration: none;

  text-shadow:
    0 0 6px
    rgba(255,195,80,0.42);

  cursor: pointer;

  transition:
    transform 100ms ease,
    box-shadow 100ms ease,
    background 100ms ease;
}


.v2-feedback-button:hover {
  transform:
    translateY(-1px)
    scale(1.015);

  color: #fff3cf;

  background:
    linear-gradient(
      180deg,
      rgba(103,54,6,0.98),
      rgba(47,24,2,1)
    );

  box-shadow:
    0 0 15px
    rgba(255,172,37,0.58),
    inset 0 0 14px
    rgba(255,188,57,0.10);
}


/* --------------------------------------------------
   STOP SAMPLE LIGHT
-------------------------------------------------- */

.v2-stop-sample-light {
  position: absolute;

  z-index: 61;

  border-radius: 50%;

  pointer-events: none;

  opacity: 0;

  background:
    radial-gradient(
      circle at 35% 30%,
      #ff9d89 0%,
      #ff3526 28%,
      #e20d08 60%,
      #780300 100%
    );

  box-shadow:
    0 0 0.35vw
    rgba(255,31,20,0.90),

    0 0 0.85vw
    rgba(255,18,10,0.72),

    inset 0 0 0.18vw
    rgba(255,255,255,0.62);

  transition:
    opacity 120ms ease;
}


body.v2-stop-sample-armed
.v2-stop-sample-light {
  opacity: 0.92;
}


body.v2-stop-sample-capturing
.v2-stop-sample-light {
  opacity: 0.54;

  animation:
    v2-stop-capture-pulse
    420ms ease-in-out
    infinite alternate;
}


@keyframes v2-stop-capture-pulse {
  from {
    opacity: 0.34;
  }

  to {
    opacity: 0.82;
  }
}


/* --------------------------------------------------
   README FINAL-NOTE SECTION
-------------------------------------------------- */

.v2-readme-final-note {
  border-color:
    rgba(255,183,59,0.44)
    !important;

  background:
    rgba(48,27,4,0.45)
    !important;
}


.v2-readme-final-note h3 {
  color:
    #ffc357
    !important;
}


/* ==================================================
   FINAL: REMOVE LEGACY MAIN-DECK MODE SWITCH

   Keep product-ui-v8.js logic alive so Crates can
   still call the original LOOPS / FULL BEATS toggle,
   but never render the old control on the main deck.
   ================================================== */

.rating-mode-control,
.rating-mode-toggle {
  position: absolute !important;

  left: -10000px !important;
  top: -10000px !important;

  width: 1px !important;
  height: 1px !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 0 !important;

  overflow: hidden !important;

  pointer-events: none !important;
}