/* On-screen touch controls. */

#touch { z-index: 12; }
.touch { position: absolute; inset: 0; display: none; --tc-scale: 1; }
.touch.show { display: block; }
.tc {
  position: absolute;
  pointer-events: auto;
  border: 0;
  border-radius: 22px;
  background: rgba(10, 14, 26, .38);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .9);
  display: grid; place-items: center;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  transition: background .08s, transform .08s;
}
.tc.on { background: rgba(255, 210, 31, .55); color: #1c1600; transform: scale(.96); }
.tc span { font: italic 800 calc(20px * var(--tc-scale)) / 1 var(--display); letter-spacing: .06em; }

.tc-left, .tc-right, .tc-top { position: absolute; pointer-events: none; }
.tc-left { left: max(14px, var(--safe-l)); bottom: calc(16px + var(--safe-b)); width: calc(230px * var(--tc-scale)); height: calc(120px * var(--tc-scale)); }
.steer { bottom: 0; width: calc(108px * var(--tc-scale)); height: calc(108px * var(--tc-scale)); border-radius: 50%; }
.steer.l { left: 0; }
.steer.r { left: calc(122px * var(--tc-scale)); }

.tc-right { right: max(14px, var(--safe-r)); bottom: calc(16px + var(--safe-b)); width: calc(250px * var(--tc-scale)); height: calc(200px * var(--tc-scale)); }
.pedal { bottom: 0; }
.pedal.gas { right: 0; width: calc(112px * var(--tc-scale)); height: calc(150px * var(--tc-scale)); background: rgba(30, 140, 70, .42); }
.pedal.brake { right: calc(124px * var(--tc-scale)); width: calc(112px * var(--tc-scale)); height: calc(112px * var(--tc-scale)); background: rgba(190, 40, 40, .42); }
.touch.auto .pedal.gas { display: none; }
.touch.auto .pedal.brake { right: 0; width: calc(130px * var(--tc-scale)); height: calc(130px * var(--tc-scale)); }
.gears { position: absolute; right: 0; bottom: calc(162px * var(--tc-scale)); display: none; gap: 8px; }
.touch.manual .gears { display: flex; }
.gear { position: relative; width: calc(56px * var(--tc-scale)); height: calc(46px * var(--tc-scale)); border-radius: 14px; }

.tc-top { left: max(14px, var(--safe-l)); top: 46%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
.tc-top .small { position: relative; width: 46px; height: 46px; border-radius: 50%; }

.touch.tilt .tc-left { display: none; }
.tilt-hint { position: absolute; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%); font: 600 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); display: none; }
.touch.tilt .tilt-hint { display: block; }

@media (max-height: 460px) {
  .tc-top { top: 50%; flex-direction: row; }
}