/* ==================================================
   SUPERSEAL V2 UI SHELL

   - Hardware CRATES
   - Hardware SETTINGS
   - Main black information display
   - Large PREV / NEXT / FAVORITES / RANDOM controls
   ================================================== */


/* ==================================================
   RETIRE OLD SETTINGS HITBOX GEOMETRY

   We keep the old settings button alive in JS because
   it already owns the proven System Menu behavior.
   We simply stop clicking its old physical location.
   ================================================== */

.settings-button {
  pointer-events: none !important;
}

body.debug .settings-button {
  background: transparent !important;
  outline: none !important;
}


/* ==================================================
   NEW HARDWARE UTILITY BUTTONS
   ================================================== */

.v2-crates-hardware,
.v2-settings-hardware {
  position: absolute;

  z-index: 135;

  margin: 0;
  padding: 0;

  border: 0;

  appearance: none;
  background: transparent;

  cursor: pointer;

  touch-action: manipulation;

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


/*
   Painted cube / crate button
*/

.v2-crates-hardware {
  left: 67.35%;
  top: 75.55%;

  width: 6.15%;
  height: 10.30%;

  border-radius: 50%;
}


/*
   Painted gear
*/

.v2-settings-hardware {
  left: 73.85%;
  top: 75.55%;

  width: 6.15%;
  height: 10.30%;

  border-radius: 50%;
}


/* ==================================================
   MAIN BLACK HARDWARE DISPLAY

   Move the EXISTING data strip into the painted
   display instead of making another independent strip.

   This preserves:
   - title
   - producer
   - ratings
   - existing account/cloud behavior
   ================================================== */

.looper-data-strip {
  left: 18.25% !important;
  top: 86.30% !important;
  bottom: auto !important;

  width: 63.65% !important;
  height: 7.10% !important;

  z-index: 115 !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    rgba(0, 12, 5, 0.30) !important;

  box-shadow:
    none !important;

  overflow:
    hidden !important;
}


/* Give the existing track information breathing room. */

.looper-data-strip #trackTitle {
  max-width: 37%;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.looper-data-strip #trackProducer {
  max-width: 37%;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ==================================================
   FIVE-DIGIT JUKEBOX NUMBER
   ================================================== */

.v2-beat-number {
  position: absolute;

  right: 18.5%;
  top: 50%;

  transform:
    translateY(-50%);

  display: flex;

  align-items: center;

  gap: 0.38vw;

  color: #57ff70;

  font-family:
    "Courier New",
    monospace;

  font-weight: 900;

  letter-spacing:
    0.08em;

  text-shadow:
    0 0 0.28vw
    rgba(70,255,110,0.65);

  white-space: nowrap;

  cursor: pointer;

  user-select: none;

  z-index: 5;
}


.v2-beat-number-label {
  opacity: 0.65;

  font-size:
    min(0.54vw, 0.95vh);
}


.v2-beat-number-value {
  font-size:
    min(0.86vw, 1.42vh);
}


/* ==================================================
   FOUR LARGE SOFTWARE BUTTONS

   User-requested layout:

   upper left  = previous
   upper right = next
   lower left  = favorites-only
   lower right = random
   ================================================== */

.v2-quick-control {
  position: absolute;

  z-index: 140;

  width: 10.3%;
  height: 7.3%;

  margin: 0;
  padding: 0.3% 0.5%;

  border:
    0.12vw solid
    rgba(87,255,112,0.65);

  border-radius:
    0.55vw;

  background:
    linear-gradient(
      180deg,
      rgba(15,35,22,0.96),
      rgba(2,12,6,0.97)
    );

  color:
    #57ff70;

  font-family:
    "Courier New",
    monospace;

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

  font-weight:
    900;

  letter-spacing:
    0.055em;

  text-transform:
    uppercase;

  cursor:
    pointer;

  box-shadow:
    inset 0 0 0.45vw
      rgba(87,255,112,0.08),

    0 0.25vw 0.65vw
      rgba(0,0,0,0.58);

  touch-action:
    manipulation;

  -webkit-tap-highlight-color:
    transparent;

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


.v2-quick-control:hover {
  transform:
    translateY(-1px);

  border-color:
    #57ff70;
}


.v2-quick-control:active {
  transform:
    translateY(1px)
    scale(0.985);
}


/*
   Left-side controls
*/

.v2-quick-previous {
  left: 2.75%;
  top: 48.5%;
}


.v2-quick-favorites {
  left: 2.75%;
  top: 57.0%;
}


/*
   Right-side controls
*/

.v2-quick-next {
  right: 2.75%;
  top: 48.5%;
}


.v2-quick-random {
  right: 2.75%;
  top: 57.0%;
}


/*
   Sticky Favorites Only mode
*/

.v2-quick-favorites.is-active {
  color:
    #071208;

  background:
    #57ff70;

  border-color:
    #baffc3;

  box-shadow:
    0 0 0.35vw
      rgba(87,255,112,0.9),

    0 0 1vw
      rgba(87,255,112,0.42);
}


.v2-quick-favorites.is-empty {
  animation:
    v2FavoriteWarning
    300ms ease;
}


@keyframes v2FavoriteWarning {
  0%,
  100% {
    border-color:
      #57ff70;
  }

  50% {
    border-color:
      #ff3a24;

    box-shadow:
      0 0 0.8vw
      rgba(255,58,36,0.75);
  }
}


/* ==================================================
   DEBUG
   ================================================== */

body.debug .v2-crates-hardware,
body.debug .v2-settings-hardware {
  background:
    rgba(0,255,255,0.20) !important;

  outline:
    2px solid cyan !important;
}


body.debug .v2-quick-control {
  outline:
    2px solid #57ff70;
}


/* ==================================================
   V2 REEL FINAL MICRO-ALIGNMENT
   ==================================================

   Use the independent CSS translate property so we
   do NOT interfere with the reel rotation animation.
*/

.reel-left {
  translate: 0.9% -1.4%;
}

.reel-right {
  translate: -0.9% -1.4%;
}


/* ==================================================
   V2 LARGE PERFORMANCE BUTTONS
   Bigger / bolder / easier to hit
   ================================================== */

.v2-quick-control {
  width: 13.2% !important;
  height: 8.8% !important;

  padding: 0.45% 0.7% !important;

  border-width: 0.17vw !important;
  border-radius: 0.72vw !important;

  font-size:
    min(0.92vw, 1.55vh) !important;

  letter-spacing:
    0.075em !important;

  box-shadow:
    inset 0 0 0.55vw
      rgba(87,255,112,0.12),

    0 0 0.28vw
      rgba(87,255,112,0.42),

    0 0.35vw 0.9vw
      rgba(0,0,0,0.68) !important;
}


.v2-quick-previous {
  left: 1.25% !important;
  top: 44.8% !important;
}


.v2-quick-favorites {
  left: 1.25% !important;
  top: 55.2% !important;
}


.v2-quick-next {
  right: 1.25% !important;
  top: 44.8% !important;
}


.v2-quick-random {
  right: 1.25% !important;
  top: 55.2% !important;
}


/* Stronger sticky Favorites state */

.v2-quick-favorites.is-active {
  font-weight: 1000 !important;

  box-shadow:
    inset 0 0 0.65vw
      rgba(255,255,255,0.22),

    0 0 0.45vw
      rgba(87,255,112,1),

    0 0 1.25vw
      rgba(87,255,112,0.58) !important;
}


/* ==================================================
   PLAYBACK MODE INSIDE CRATES
   ================================================== */

.v2-crate-mode-section {
  margin:
    0.75rem 0 0.85rem;

  padding:
    0.7rem 0.85rem;

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

  border-radius:
    8px;

  background:
    rgba(0,20,8,0.52);
}


.v2-crate-mode-title {
  margin-bottom:
    0.55rem;

  color:
    #57ff70;

  font-family:
    "Courier New",
    monospace;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    0.08em;

  text-align:
    center;
}


.v2-crate-mode-help {
  margin-top:
    0.5rem;

  color:
    rgba(87,255,112,0.65);

  font-family:
    "Courier New",
    monospace;

  font-size:
    9px;

  line-height:
    1.45;

  text-align:
    center;
}


/* ==================================================
   V2 FINAL HITBOX MICRO-ALIGNMENT
   Geometry only. No behavior changes.
   ================================================== */


/* --------------------------------------------------
   FIVE MAIN TRANSPORT CONTROLS

   Bring them upward and tighten around the
   actual painted button faces.
   -------------------------------------------------- */

.restart-arrow-button,
.next-arrow-button,
.play-button,
.stop-button,
.loop-button,
#machine button[aria-label*="pause" i],
#machine button[aria-label*="sample" i] {
  translate: 0 -7% !important;
  scale: 0.94 0.88 !important;
}


/* --------------------------------------------------
   CRATES + SETTINGS HARDWARE BUTTONS

   Current debug circles are slightly large/low.
   -------------------------------------------------- */

.v2-crates-hardware,
.v2-settings-hardware {
  translate: 0 -4% !important;
  scale: 0.91 !important;
}


/* --------------------------------------------------
   SKRATCHY NOSE HOTSPOT

   The red dotted debug target has been sitting
   slightly right of the actual black nose.
   -------------------------------------------------- */

.seal-nose-easter-egg {
  translate: -13% -5% !important;
  scale: 0.90 !important;
}


/* ==================================================
   SKRATCHY NOSE FINAL ALIGNMENT
   Center hotspot directly over black nose.
   ================================================== */

.seal-nose-easter-egg {
  translate: -82% -22% !important;
  scale: 0.86 !important;
}


/* ==================================================
   SKRATCHY NOSE FINAL MICRO-TUNE
   ================================================== */

.seal-nose-easter-egg {
  translate: -74% -72% !important;
  scale: 0.86 !important;
}


/* ==================================================
   V2 FAST BEAT SCRUBBER
   ================================================== */

.loop-selector-rotary {
  touch-action:
    none !important;

  cursor:
    ns-resize !important;

  user-select:
    none !important;
}


.loop-selector-rotary.is-scrubbing {
  filter:
    brightness(1.18);

  box-shadow:
    0 0 0.35vw
      rgba(87,255,112,0.75),

    0 0 0.9vw
      rgba(87,255,112,0.35) !important;
}


/* ==================================================
   V2 RESET OVERLAY
   ================================================== */

.v2-reset-overlay {
  position: absolute;

  z-index: 120;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  appearance: none;

  cursor: pointer;

  touch-action: manipulation;

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


/* ==================================================
   V2 REEL HOLD PAUSE
   ================================================== */

.v2-reel-hold-zone {
  position: absolute;

  z-index: 48;

  border-radius: 50%;

  overflow: hidden;

  pointer-events: none;
}


.v2-reel-hold-segment {
  position: absolute;

  z-index: 1;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  appearance: none;

  pointer-events: auto;

  cursor: grab;

  touch-action: none;

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


.v2-reel-hold-segment:active {
  cursor: grabbing;
}


/* Debug view for reel hold areas */

body.debug
.v2-reel-hold-zone {
  outline:
    1px dashed
    rgba(255,180,0,0.55);
}


/* ==================================================
   V2 README
   ================================================== */

.v2-readme-manual {
  display: grid;

  gap: 1rem;

  color: #8cff9a;

  font-family:
    "Courier New",
    monospace;

  line-height: 1.5;
}


.v2-readme-manual section {
  padding:
    0.8rem 0.9rem;

  border:
    1px solid
    rgba(87,255,112,0.24);

  border-radius:
    8px;

  background:
    rgba(0,20,8,0.32);
}


.v2-readme-manual h3 {
  margin:
    0 0 0.65rem;

  color: #57ff70;

  font-size: 0.95rem;

  letter-spacing: 0.06em;
}


.v2-readme-manual p {
  margin:
    0.35rem 0;
}


.v2-readme-manual strong {
  color: #b6ffbf;
}


.v2-readme-manual a {
  color: #57ff70;
}