/* ==================================================
   SKRATCHYSEAL V4 AUXILIARY CONTROLS
   1672 x 941 production master
   ================================================== */


/* --------------------------------------------------
   REVERSE
   -------------------------------------------------- */

.reverse-control {
  left: 15.90% !important;
  top: 55.90% !important;

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

  z-index: 24000 !important;

  pointer-events: auto !important;
}


/* --------------------------------------------------
   WRISTWATCH TIMER

   Enlarged slightly beyond the painted watch face
   for comfortable mouse/touch use.
   -------------------------------------------------- */

.v4-watch-hardware {
  position: absolute;

  left: 74.40%;
  top: 60.80%;

  width: 4.50%;
  height: 6.30%;

  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;
}


/* ==================================================
   LARGE TIMER
   ================================================== */

.v4-timer-overlay {
  position: absolute;

  inset: 0;

  z-index: 50000;

  display: grid;

  place-items: center;

  background:
    rgba(0,0,0,0.72);

  backdrop-filter:
    blur(2px);
}


.v4-timer-overlay[hidden] {
  display: none !important;
}


.v4-timer-panel {
  width:
    min(
      72%,
      720px
    );

  padding:
    4%;

  border:
    2px solid
    #45ff65;

  border-radius:
    1.2vw;

  background:
    rgba(0,18,6,0.97);

  box-shadow:
    0 0 2vw
    rgba(25,255,70,0.25);

  text-align:
    center;

  font-family:
    "Courier New",
    monospace;

  color:
    #5cff74;
}


.v4-timer-heading {
  margin-bottom:
    2%;

  font-size:
    clamp(
      12px,
      1.2vw,
      20px
    );

  font-weight:
    700;

  letter-spacing:
    0.12em;
}


.v4-timer-title {
  min-height:
    1.4em;

  margin-bottom:
    2%;

  font-size:
    clamp(
      12px,
      1.1vw,
      18px
    );

  opacity:
    0.85;
}


.v4-timer-value {
  font-size:
    clamp(
      52px,
      8vw,
      128px
    );

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.04em;

  text-shadow:
    0 0 1vw
    rgba(50,255,90,0.65);
}


.v4-timer-help {
  margin-top:
    3%;

  font-size:
    clamp(
      10px,
      0.9vw,
      15px
    );

  opacity:
    0.72;
}


.v4-timer-close {
  margin-top:
    4%;

  padding:
    1.2em 3em;

  border:
    1px solid
    #42ff65;

  border-radius:
    0.45em;

  background:
    #041408;

  color:
    #5cff74;

  font:
    inherit;

  font-weight:
    700;

  cursor:
    pointer;
}


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

   The V4 control map now includes:
   4 transport squares
   Cube / Star / Gear
   Reverse
   Watch
   ================================================== */

body.debug #machine .reverse-control,
body.debug #machine .v4-watch-hardware {
  background:
    rgba(0,255,255,0.18) !important;

  outline:
    2px solid cyan !important;

  outline-offset:
    -2px !important;

  box-shadow:
    none !important;
}


/* ==================================================
   V4 REVERSE FINAL ALIGNMENT
   ================================================== */

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

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