#cruise-controls {
  position: absolute; z-index: 8; left: 50%; bottom: calc(var(--native-radar-bottom, 56px) + max(64px, 48px * var(--game-scale, 1))); transform: translateX(-50%);
  display: flex; align-items: center; gap: 18px; box-sizing: border-box;
  width: min(580px, calc(100% - 24px)); padding: 11px 14px;
  color: #d9f4f4; font: 12px Arial, sans-serif;
  background: linear-gradient(110deg, #102d3af2, #081923f5);
  border: 1px solid #5fa6b978; border-left: 3px solid #75e7d7; border-radius: 8px;
  box-shadow: 0 8px 32px #0008, inset 0 1px #b4edee0d;
  animation: cruise-reveal .3s ease-out;
}
#cruise-controls[hidden] { display: none; }
.cruise-course { display: grid; gap: 4px; min-width: 0; flex: 1; }
.cruise-kicker { color: #75e7d7; font-size: 9px; letter-spacing: .16em; }
.cruise-destination { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cruise-hint { color: #98b7c3; font-size: 10px; }
.cruise-distance { color: #b8d7df; white-space: nowrap; font-variant-numeric: tabular-nums; }
#cruise-controls .cruise-cancel { flex: none; min-height: 38px; padding: 7px 11px; border: 1px solid #d3978266; border-radius: 5px; background: #482d2b; color: #ffe2d4; font: bold 11px Arial, sans-serif; cursor: pointer; }
#cruise-controls .cruise-cancel:hover, #cruise-controls .cruise-cancel:focus-visible { background: #674039; border-color: #edc0a6; outline: 2px solid #edc0a655; outline-offset: 2px; }
.cruise-cancel kbd { margin-left: 5px; padding: 2px 4px; border: 1px solid #d3978255; border-radius: 3px; font: 10px Arial, sans-serif; }
#cruise-controls[data-mode="manual"] { border-left-color: #efc780; }
#cruise-controls[data-mode="manual"] .cruise-kicker { color: #efc780; }
@keyframes cruise-reveal { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
/* Match the radar's 4:3 footprint and footer offset when the panels share X. */
@container (max-width: 1100px) { #cruise-controls { bottom: calc(var(--native-radar-bottom, 56px) + clamp(120px, min(19.5cqw, 26.25cqh), 285px) + 12px); } }
@media (max-width: 520px) { #cruise-controls { gap: 8px; padding: 9px; flex-wrap: wrap; } .cruise-course { flex-basis: 55%; } .cruise-distance { font-size: 10px; } #cruise-controls .cruise-cancel { width: 100%; } }
@media (prefers-reduced-motion: reduce) { #cruise-controls { animation: none; } }