/* ==================================================
   SKRATCHYSEAL V4 PRODUCTION MASTER MAP
   MASTER ART: 1672 x 941

   THIS FILE IS THE FINAL GEOMETRY AUTHORITY.
   Do future alignment changes here only.
   ================================================== */


/* ==================================================
   FOUR SQUARE TRANSPORT BUTTONS
   ================================================== */

[data-v4-transport="previous"] {
  left: 22.65% !important;
  top: 75.15% !important;

  width: 7.15% !important;
  height: 11.35% !important;
}


[data-v4-transport="restart"] {
  left: 31.45% !important;
  top: 75.15% !important;

  width: 7.15% !important;
  height: 11.35% !important;
}


[data-v4-transport="play-pause"] {
  left: 40.25% !important;
  top: 75.15% !important;

  width: 7.15% !important;
  height: 11.35% !important;
}


[data-v4-transport="next"] {
  left: 49.05% !important;
  top: 75.15% !important;

  width: 7.15% !important;
  height: 11.35% !important;
}


/* ==================================================
   ROUND HARDWARE
   ================================================== */

/* Cube / Crates */

.v2-crates-hardware {
  left: 58.70% !important;
  top: 74.60% !important;

  width: 6.15% !important;
  height: 10.30% !important;

  translate: 0 -4% !important;
  scale: 0.91 !important;
}


/* Star / Favorites */

.v4-favorites-hardware {
  left: 66.70% !important;
  top: 74.60% !important;

  width: 6.15% !important;
  height: 10.30% !important;

  translate: 0 -4% !important;
  scale: 0.91 !important;

  position: absolute !important;
}


/* Favorites indicator LED */

.v4-favorites-hardware::after,
.v4-polish-favorites::after {
  content: "" !important;

  position: absolute !important;

  left: 50% !important;
  top: 11% !important;

  transform:
    translate(
      -50%,
      -50%
    ) !important;

  width: 7px !important;
  height: 7px !important;

  min-width: 7px !important;
  min-height: 7px !important;

  border-radius: 50% !important;

  background:
    #240000 !important;

  border:
    1px solid
    rgba(0,0,0,0.85) !important;

  pointer-events:
    none !important;
}


.v4-favorites-hardware.is-active::after,
.v4-polish-favorites.v4-polish-favorites-active::after {
  background:
    #ff241c !important;

  box-shadow:
    0 0 4px
      rgba(255,255,255,0.8),

    0 0 10px
      rgba(255,30,20,0.95),

    0 0 18px
      rgba(255,30,20,0.65) !important;
}


/* Gear / Settings */

.v2-settings-hardware {
  left: 73.60% !important;
  top: 74.60% !important;

  width: 6.15% !important;
  height: 10.30% !important;

  translate: 0 -4% !important;
  scale: 0.91 !important;
}


/* ==================================================
   LEFT MODE STACK
   ================================================== */

/*
  RESET was functioning correctly.
  Only establish final geometry here.
*/

.v4-reset-hardware {
  left: 16.30% !important;
  top: 52.15% !important;

  width: 5.90% !important;
  height: 5.85% !important;
}


/*
  Reverse goes back to its better pre-polish
  position.
*/

.reverse-control,
.v4-polish-reverse {
  left: 16.30% !important;
  top: 58.55% !important;

  width: 5.90% !important;
  height: 6.35% !important;
}


/* ==================================================
   WRISTWATCH
   ================================================== */

/*
  The prior polish pass pushed this down/right.
  Recenter directly over the gold watch face.
*/

.v4-watch-hardware,
.v4-polish-watch {
  left: 74.40% !important;
  top: 60.80% !important;

  width: 4.50% !important;
  height: 6.30% !important;

  border-radius:
    50% !important;
}


/* ==================================================
   HANDSTYLE PLATE = RANDOM
   ================================================== */

/*
  Entire Skratchy Seal handstyle plate is clickable.

  Large rectangular target by design:
  this should feel obvious and easy to hit.
*/

.v4-random-plate {
  position: absolute;

  left: 38.20%;
  top: 61.55%;

  width: 16.90%;
  height: 8.00%;

  z-index: 24500;

  margin: 0;
  padding: 0;

  border: 0;

  border-radius:
    1vw;

  appearance: none;

  background:
    transparent;

  cursor:
    pointer;

  touch-action:
    manipulation;

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


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

   Deliberate V4 controls only.
   ================================================== */

body.debug #machine .v4-random-plate,
body.debug #machine .v4-watch-hardware,
body.debug #machine .v4-reset-hardware,
body.debug #machine .reverse-control,
body.debug #machine [data-v4-transport],
body.debug #machine .v2-crates-hardware,
body.debug #machine .v4-favorites-hardware,
body.debug #machine .v2-settings-hardware {
  background:
    rgba(
      0,
      255,
      255,
      0.15
    ) !important;

  outline:
    2px solid
    cyan !important;

  outline-offset:
    -2px !important;
}


/* ==================================================
   V4 FINAL MICRO ALIGNMENT
   High-specificity authority.

   These deliberately override the older
   #machine .v4-polish-* rules.
   ================================================== */


/* --------------------------------------------------
   LEFT STACK
   -------------------------------------------------- */

/* SPEED BOOSTER */
#machine .speed-booster-control,
#machine .v4-polish-speed {
  left: 16.38% !important;
  top: 47.40% !important;

  width: 5.95% !important;
  height: 6.65% !important;

  translate: 0 0 !important;
  scale: 1 !important;
  transform: none !important;
}


/* RESET */
#machine .v4-reset-hardware,
#machine .v4-polish-reset {
  left: 16.38% !important;
  top: 54.05% !important;

  width: 5.95% !important;
  height: 4.90% !important;

  translate: 0 0 !important;
  scale: 1 !important;
  transform: none !important;
}


/* REVERSE */
#machine .reverse-control,
#machine .v4-polish-reverse {
  left: 16.38% !important;
  top: 58.95% !important;

  width: 5.95% !important;
  height: 4.90% !important;

  translate: 0 0 !important;
  scale: 1 !important;
  transform: none !important;
}


/* --------------------------------------------------
   WATCH
   Center directly over the GOLD watch face.
   -------------------------------------------------- */

#machine .v4-watch-hardware,
#machine .v4-polish-watch {
  left: 74.55% !important;
  top: 61.75% !important;

  width: 3.55% !important;
  height: 4.75% !important;

  translate: 0 0 !important;
  scale: 1 !important;
  transform: none !important;

  border-radius: 50% !important;
}


/* --------------------------------------------------
   FOUR TRANSPORT SQUARES
   Tight fit to the actual white button faces.
   -------------------------------------------------- */

#machine [data-v4-transport="previous"] {
  left: 22.85% !important;
  top: 75.90% !important;

  width: 7.20% !important;
  height: 9.25% !important;
}


#machine [data-v4-transport="restart"] {
  left: 31.85% !important;
  top: 75.90% !important;

  width: 7.20% !important;
  height: 9.25% !important;
}


#machine [data-v4-transport="play-pause"] {
  left: 40.75% !important;
  top: 75.90% !important;

  width: 7.20% !important;
  height: 9.25% !important;
}


#machine [data-v4-transport="next"] {
  left: 49.30% !important;
  top: 75.90% !important;

  width: 7.20% !important;
  height: 9.25% !important;
}


/* --------------------------------------------------
   DEBUG
   Make the final geometry unmistakable.
   -------------------------------------------------- */

body.debug #machine .speed-booster-control,
body.debug #machine .v4-reset-hardware,
body.debug #machine .reverse-control,
body.debug #machine .v4-watch-hardware,
body.debug #machine [data-v4-transport] {
  outline: 2px solid cyan !important;
  outline-offset: -2px !important;
}


/* ==================================================
   FINAL MICRO NUDGE
   ================================================== */


/* SPEED BOOSTER UP */
#machine .speed-booster-control,
#machine .v4-polish-speed {
  top: 46.95% !important;
}


/* REVERSE DOWN */
#machine .reverse-control,
#machine .v4-polish-reverse {
  top: 59.40% !important;
}


/* FOUR TRANSPORT BUTTONS UP SLIGHTLY */

#machine [data-v4-transport="previous"],
#machine [data-v4-transport="restart"],
#machine [data-v4-transport="play-pause"],
#machine [data-v4-transport="next"] {
  top: 75.55% !important;
}