/* Copied from Back It In!'s style.css by tools/sync-drive.mjs. Don't edit. */
/* ---------- Touch controls ---------- */
#touch {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  pointer-events: none;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#touch[hidden] { display: none; }
#touch > * { pointer-events: auto; }
#touch button { touch-action: none; -webkit-tap-highlight-color: transparent; }
#touch button *, #touch .wheel * { pointer-events: none; } /* fingers always land on the control itself */

#touch .arrows { display: flex; gap: 14px; }
#touch .arrow {
  width: 84px;
  height: 84px;
  padding: 10px;
  background: #f28c28;
  border: 4px solid #8a4b0f;
  border-radius: 20px;
  box-shadow: 0 5px 0 #8a4b0f;
}
#touch .arrow svg { width: 100%; height: 100%; }
#touch .arrow.down { background: #df7a17; transform: translateY(3px); box-shadow: 0 2px 0 #8a4b0f; }
/* Spotter wheel hint (Full assist): the arrow to press glows green. */
#touch .arrow.hint { background: #4cc764; border-color: #22672f; box-shadow: 0 5px 0 #22672f, 0 0 0 0 rgba(76, 199, 100, 0.7); animation: hintPulse 1s ease-out infinite; }
#touch .arrow.hint.down { box-shadow: 0 2px 0 #22672f; animation: none; }
@keyframes hintPulse { to { box-shadow: 0 5px 0 #22672f, 0 0 0 14px rgba(76, 199, 100, 0); } }
#touch .wheel { position: relative; }
#touch .wheel.hint-left::after, #touch .wheel.hint-right::after {
  position: absolute; top: -6px; font: 900 30px/1 system-ui, sans-serif; color: #4cc764;
  text-shadow: 0 2px 0 #22672f; animation: hintNudge 0.8s ease-in-out infinite alternate;
}
#touch .wheel.hint-left::after { content: '\21BA'; left: -8px; }
#touch .wheel.hint-right::after { content: '\21BB'; right: -8px; }
@keyframes hintNudge { to { transform: translateY(-4px); } }

#touch .wheel { display: none; width: 150px; height: 150px; touch-action: none; }
#touch .wheel-rot { width: 100%; height: 100%; filter: drop-shadow(0 4px 0 rgba(0,0,0,0.35)); }
#touch .wheel-rot svg { width: 100%; height: 100%; }
#touch.use-wheel .arrows { display: none; }
#touch.use-wheel .wheel { display: block; }

#touch .pedals { position: relative; display: flex; align-items: flex-end; gap: 12px; }
#touch .shifter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background: #1f262c;
  border: 3px solid #f4f1e8;
  border-radius: 36px;
}
#touch .gear {
  width: 56px;
  height: 56px;
  padding: 0;
  font: 900 24px ui-rounded, "Segoe UI", system-ui, sans-serif;
  color: #8e9aa4;
  background: #3a434b;
  border: 0;
  border-radius: 50%;
}
#touch .gear.on { color: #fff; background: #f28c28; }
#touch.gear-indicator .gear { pointer-events: none; }

#touch .pedal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 10px;
  background: linear-gradient(135deg, #eef1f4, #a9b0b7 60%, #8e959c);
  border: 3px solid #4d555c;
  border-radius: 12px;
  box-shadow: 0 5px 0 #3c4349;
}
#touch .pedal span { display: block; background: #5f676e; border-radius: 3px; }
#touch .pedal.brake { width: 96px; height: 66px; flex-direction: column; }
#touch .pedal.brake span { width: 62px; height: 6px; }
#touch .pedal.gas { width: 66px; height: 128px; }
#touch .pedal.gas span { width: 6px; height: 96px; }
#touch .pedal.down { filter: brightness(0.85); transform: translateY(3px); box-shadow: 0 2px 0 #3c4349; }

/* Portrait: a bit smaller, shifter sits above the pedals. */
@media (orientation: portrait) {
  #touch .arrow { width: 68px; height: 68px; padding: 8px; }
  #touch .arrows { gap: 12px; }
  #touch .wheel { width: 132px; height: 132px; }
  #touch .shifter { position: absolute; right: 0; bottom: calc(100% + 14px); }
  #touch .pedal.brake { width: 84px; height: 60px; }
  #touch .pedal.brake span { width: 54px; }
  #touch .pedal.gas { width: 60px; height: 112px; }
  #touch .pedal.gas span { height: 82px; }
}