#touch {
  position: fixed; inset: 0; z-index: 10;
  pointer-events: none;
}
#touch.active { display: block; }

.dr-zone {
  position: absolute; top: 0; bottom: 0; width: 50%;
  pointer-events: auto; touch-action: none;
}
.dr-zone-left { left: 0; }
.dr-zone-right { right: 0; }

.dr-btn {
  position: absolute;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(21,24,29,.72); border: 2px solid rgba(255,60,30,.55);
  color: #eef0f2; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto; touch-action: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.dr-btn:active { background: rgba(255,60,30,.35); }
.dr-glyph { pointer-events: none; text-align: center; line-height: 1.1; }

.dr-btn.brake {
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  width: 84px; height: 84px; font-size: 12px;
  background: rgba(255,60,30,.22);
}
.dr-btn.handbrake {
  right: calc(112px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.dr-btn.gear-up {
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(206px + env(safe-area-inset-bottom, 0px));
  width: 46px; height: 46px;
}
.dr-btn.gear-down {
  right: calc(72px + env(safe-area-inset-right, 0px));
  bottom: calc(206px + env(safe-area-inset-bottom, 0px));
  width: 46px; height: 46px;
}
.dr-btn.reset {
  left: calc(18px + env(safe-area-inset-left, 0px));
  top: calc(18px + env(safe-area-inset-top, 0px));
  width: 46px; height: 46px; font-size: 9px;
}
.dr-btn.pause {
  right: calc(18px + env(safe-area-inset-right, 0px));
  top: calc(18px + env(safe-area-inset-top, 0px));
  width: 46px; height: 46px; font-size: 18px;
}

#dr-rotate {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(6,7,9,.95);
  display: none;
  align-items: center; justify-content: center;
  pointer-events: auto;
}
#dr-rotate.show { display: flex; }
.rotate-inner {
  color: #eef0f2; font-size: 16px; text-align: center;
  animation: rotatepulse 1.4s ease-in-out infinite;
}
@keyframes rotatepulse {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}

@media (max-height: 400px) {
  .dr-btn.brake { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); width: 70px; height: 70px; }
  .dr-btn.gear-up, .dr-btn.gear-down { bottom: calc(170px + env(safe-area-inset-bottom, 0px)); }
}