/* ==================================================
   SUPERSEAL V2 DECK CONTROLS
   RESET / BOOSTER / TOUCHABLE REELS
   ================================================== */


/* Retire the old Speed Booster + old One Shot hitboxes.
   The middle painted button is RESET now. */

.speed-booster-control,
.one-shot-control {
  pointer-events: none !important;
}

.speed-booster-control::after,
.one-shot-control::after {
  display: none !important;
}


/* --------------------------------------------------
   NEW SPEED BOOSTER
   -------------------------------------------------- */

.v2-speed-booster,
.v2-reset {
  position: absolute;

  z-index: 130;

  margin: 0;
  padding: 0;

  border: 0;

  appearance: none;

  background: transparent;

  cursor: pointer;

  touch-action: manipulation;

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


.v2-speed-booster {
  left: 16.25%;
  top: 46.05%;

  width: 6.15%;
  height: 7.05%;
}


.v2-reset {
  left: 16.25%;
  top: 53.75%;

  width: 6.15%;
  height: 6.10%;
}


/* Booster LED */

.v2-speed-booster::after,
.v2-reset::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 7%;

  width: 8%;
  aspect-ratio: 1;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    #2b0806;

  box-shadow:
    inset 0 0 0.08vw
    rgba(0,0,0,0.9);

  pointer-events: none;
}


.v2-speed-booster.is-active::after {
  background:
    #ff2418;

  box-shadow:
    0 0 0.18vw #ff2418,
    0 0 0.45vw rgba(255,36,24,0.92),
    0 0 0.85vw rgba(255,36,24,0.5);
}


/* RESET flashes but is not sticky */

.v2-reset.is-triggered::after {
  background:
    #ff2418;

  box-shadow:
    0 0 0.18vw #ff2418,
    0 0 0.45vw rgba(255,36,24,0.92),
    0 0 0.85vw rgba(255,36,24,0.5);
}


/* --------------------------------------------------
   TOUCHABLE REELS
   -------------------------------------------------- */

.reel {
  pointer-events: auto !important;

  cursor: grab;

  touch-action: none;
}


.reel:active {
  cursor: grabbing;
}


/* --------------------------------------------------
   DEBUG
   -------------------------------------------------- */

body.debug .v2-speed-booster,
body.debug .v2-reset {
  background:
    rgba(0,255,255,0.20);

  outline:
    2px solid cyan;
}