/* ==================================================
   SKRATCHYSEAL V4 ROUND HARDWARE

   Master geometry: 1672 x 941
   ================================================== */


/* --------------------------------------------------
   CUBE / CRATES
   -------------------------------------------------- */

.v2-crates-hardware {
  left: 60.85% !important;
  top: 75.55% !important;

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

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

  z-index: 24000 !important;

  pointer-events: auto !important;
}


/* --------------------------------------------------
   STAR / FAVORITES MODE
   -------------------------------------------------- */

.v4-favorites-hardware {
  position: absolute;

  left: 67.35%;
  top: 75.55%;

  width: 6.15%;
  height: 10.30%;

  translate: 0 -4%;
  scale: 0.91;

  z-index: 24000;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 50%;

  appearance: none;

  background: transparent;

  cursor: pointer;

  touch-action: manipulation;

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


/*
  Small physical-style indicator LED.

  OFF = dark lens.
*/

.v4-favorites-hardware::after {
  content: "";

  position: absolute;

  width: 12%;
  aspect-ratio: 1 / 1;

  right: 8%;
  top: 7%;

  border-radius: 50%;

  background:
    #240000;

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

  box-shadow:
    inset 0 0 0.18vw
      rgba(0,0,0,0.95);

  pointer-events: none;
}


/*
  ON = bright red hardware LED.
*/

.v4-favorites-hardware.is-active::after {
  background:
    #ff2018;

  box-shadow:
    inset 0 0 0.12vw
      rgba(255,255,255,0.75),

    0 0 0.25vw
      rgba(255,30,20,0.95),

    0 0 0.65vw
      rgba(255,25,15,0.75);
}


/* --------------------------------------------------
   GEAR / SETTINGS
   -------------------------------------------------- */

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

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

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

  z-index: 24000 !important;

  pointer-events: auto !important;
}


/* ==================================================
   STATUS MESSAGE
   ================================================== */

.v4-status-message {
  position: absolute;

  left: 27%;
  top: 87.6%;

  width: 46%;

  z-index: 26000;

  opacity: 0;

  pointer-events: none;

  text-align: center;

  font-family:
    "Courier New",
    monospace;

  font-size:
    clamp(
      10px,
      0.85vw,
      16px
    );

  font-weight: 700;

  letter-spacing:
    0.05em;

  color:
    #62ff78;

  text-shadow:
    0 0 0.35vw
    rgba(40,255,90,0.75);

  transition:
    opacity 120ms ease;
}


.v4-status-message.is-visible {
  opacity: 1;
}


/* ==================================================
   V4 DEBUG AUTHORITY

   Kill legacy debug paint.
   Leave only the seven bottom hardware controls.
   ================================================== */

body.debug .hotspot,
body.debug .hardware-control,
body.debug .nudge-button,
body.debug .mode-control,
body.debug .v2-transport-control,
body.debug .seal-nose-easter-egg {
  background:
    transparent !important;

  outline:
    none !important;

  box-shadow:
    none !important;
}


/*
  The seven V4 master controls.
*/

body.debug [data-v4-transport],
body.debug .v2-crates-hardware,
body.debug .v4-favorites-hardware,
body.debug .v2-settings-hardware {
  background:
    rgba(
      0,
      255,
      255,
      0.18
    ) !important;

  outline:
    2px solid cyan !important;

  outline-offset:
    -2px !important;

  box-shadow:
    none !important;
}


/* ==================================================
   V4 PRODUCTION MASTER ROUND-BUTTON ALIGNMENT
   Tuned against Skratchyseal 1672x941 master.
   ================================================== */

/* Cube */
.v2-crates-hardware {
  left: 58.70% !important;
  top: 74.60% !important;
}

/* Star */
.v4-favorites-hardware {
  left: 66.70% !important;
  top: 74.60% !important;
}

/* Gear */
.v2-settings-hardware {
  left: 73.60% !important;
  top: 74.60% !important;
}


/* --------------------------------------------------
   Debug: suppress old outlines, then show only
   the seven V4 bottom controls.
   -------------------------------------------------- */

body.debug #machine * {
  outline: none !important;
}

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.18) !important;
  outline: 2px solid cyan !important;
  outline-offset: -2px !important;
}