/* Quiet ride controls (paper plane, RC car): the vehicle lives in the world, not in the HUD. */
body.ride :is(.topbar, #sideWrap, #deeds, #boards, #clownsPanel, #welcome, #tip, .viewSeg, #adminLink, #tools, .sundial, #rewind, #drbar, #catbar, #freePick, #cellTag, #leader) { display:none !important; }
body.ride #wall { cursor:default; }
.ride-hud[hidden] { display:none; }
.ride-hud { position:fixed; inset:0; z-index:20; pointer-events:none; color:var(--text); }
.ride-hud .ride-crash { position:absolute; top:22%; left:50%; transform:translateX(-50%); height:auto; flex-direction:column; gap:7px; padding:20px 26px; width:max-content; max-width:calc(100vw - 32px); text-align:center; }
.ride-hud .ride-crash[hidden] { display:none; }
.ride-crash strong { font-size:16px; font-weight:600; }
.ride-crash span { color:var(--dim); font-size:11px; }
/* the ride's tools, top right: pause / resume, reset and back to the map as quiet icons in one chip, like the garden's */
.ride-actions { padding:0 4px; gap:2px; pointer-events:auto; }
.ride-actions .ib:disabled { opacity:.45; cursor:default; }
.ride-actions .ib:disabled:hover { background:transparent; }
.ride-actions .ib:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.ride-actions .ico-play, .ride-actions [aria-pressed=true] .ico-pause { display:none; }
.ride-actions [aria-pressed=true] .ico-play { display:block; }
.ride-top { position:absolute; top:max(14px, env(safe-area-inset-top)); left:max(14px, env(safe-area-inset-left)); right:max(14px, env(safe-area-inset-right)); display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.ride-title { padding:8px 14px; gap:12px; font-size:12px; }
.ride-title b { font-weight:600; }
.ride-title svg { width:19px; height:19px; fill:none; stroke:var(--text); stroke-width:1.5; stroke-linejoin:round; }
.ride-compass { display:flex; align-items:center; gap:7px; color:var(--dim); border-left:1px solid var(--line); padding-left:12px; }
.ride-heading { color:var(--text); width:2ch; }
.ride-speed { color:var(--dim); min-width:7ch; font-size:10px; white-space:nowrap; }
.ride-hud .ride-guide { position:absolute; left:50%; bottom:max(18px, env(safe-area-inset-bottom)); transform:translateX(-50%); height:auto; display:block; padding:11px 18px; border-radius:12px; white-space:nowrap; }
.ride-guide-row { display:flex; align-items:center; gap:22px; font-size:11px; }
.ride-guide-row kbd { font-family:inherit; font-size:11px; font-weight:600; color:var(--text); margin-right:3px; }
.ride-guide-row > span { color:var(--dim); }
.ride-altitude { border-left:1px solid var(--line); padding-left:16px; }
.ride-altitude b { color:var(--text); font-weight:500; font-variant-numeric:tabular-nums; }
/* the status line (Bonk!, paused while you were away…) is for screen readers only: the title chip and the tools already show it */
.ride-note { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ride-hud:not([data-phase=flying]) .ride-guide { opacity:0; }
.ride-guide { transition:opacity .25s; }
@media (prefers-reduced-motion:reduce) { .ride-guide { transition:none; } }
.ride-pad { display:none; }
/* 📱 touch: steer from a thumb pad instead of the keyboard; the key hints give way to it */
@media (pointer:coarse) {
  .ride-pad { position:absolute; left:max(14px, env(safe-area-inset-left)); right:max(14px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom)); display:flex; justify-content:space-between; align-items:flex-end; pointer-events:none; }
  .ride-pad-group { display:flex; gap:10px; pointer-events:auto; }
  .ride-pad button { width:58px; height:58px; padding:0; justify-content:center; border-radius:50%; font:inherit; font-size:20px; color:var(--text); touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
  .ride-pad button:active { background:var(--panel); }
  .ride-pad .ride-pad-main { width:72px; height:72px; font-size:13px; font-weight:600; }
  /* 🛞 the car's Drift pill rides above ▼ Jump ▲, where the right thumb lifts off the throttle to find it */
  .ride-pad-stack { flex-direction:column; align-items:stretch; }
  .ride-pad-row { display:flex; gap:10px; align-items:flex-end; }
  .ride-pad .ride-pad-pill { width:auto; height:42px; border-radius:21px; font-size:13px; font-weight:600; }
  .ride-hud:not([data-phase=flying]) .ride-pad { opacity:0; pointer-events:none; }
  .ride-hud:not([data-phase=flying]) .ride-pad-group { pointer-events:none; }
  .ride-guide-row > span:not(.ride-altitude) { display:none; }
  .ride-guide-row .ride-altitude { border-left:0; padding-left:0; }
  .ride-guide-row { justify-content:center; }
  .ride-hud .ride-guide { bottom:calc(max(16px, env(safe-area-inset-bottom)) + 84px); }
  #driveHud .ride-guide { bottom:calc(max(16px, env(safe-area-inset-bottom)) + 136px); }   /* clear of the taller pad */
}
@media (max-width:760px) {
  .ride-top { gap:6px; } .ride-title { padding:8px 10px; } .ride-compass { display:none; }
  .ride-guide-row { gap:10px; font-size:10px; } .ride-altitude { padding-left:10px; }
  .ride-hud .ride-guide { padding:10px; }
}