/* ANARCHY AVENUE: touch controls. */

#touch { pointer-events: none; }

.touch-pad {
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 0;
  width: 52%;
  pointer-events: auto;
  touch-action: none;
}

.touch-base {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity .12s;
}
.touch-base.on { opacity: 1; }
.touch-base::before {
  content: "";
  position: absolute;
  width: 132px;
  height: 132px;
  left: -66px;
  top: -66px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  background: rgba(10, 12, 18, .28);
}
.touch-knob {
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 0 18px rgba(255, 59, 212, .6);
}

.touch-btns {
  position: absolute;
  right: calc(14px + var(--aa-safe-r));
  bottom: calc(18px + var(--aa-safe-b));
  width: 210px;
  height: 210px;
}
.touch-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .5);
  background: rgba(10, 12, 18, .5);
  color: #fff;
  pointer-events: auto;
  touch-action: none;
  font: 400 15px/1 var(--aa-display);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.touch-btn svg { width: 30px; height: 30px; }
.touch-btn.on { background: rgba(255, 255, 255, .3); transform: scale(.95); }
.touch-fire { right: 0; bottom: 0; width: 96px; height: 96px; border-color: var(--aa-pink); box-shadow: 0 0 20px rgba(255, 59, 212, .4); }
.touch-fire svg { width: 44px; height: 44px; }
.touch-car { right: 108px; bottom: 6px; border-color: var(--aa-green); }
.touch-swap { right: 6px; bottom: 110px; }
.touch-brake, .touch-drift { display: none; }
.driving .touch-brake { display: grid; right: 108px; bottom: 82px; border-color: var(--aa-red); }
.driving .touch-drift { display: grid; right: 80px; bottom: 150px; border-color: var(--aa-amber); }
.driving .touch-swap { right: 6px; bottom: 110px; }