/* ---------- touch controls (phones and tablets) ----------
   Shown only when <body> has .touch; the desktop keyboard/mouse path is untouched. */
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body.touch { touch-action: none; -webkit-user-select: none; user-select: none; }
body.touch #view { touch-action: none; }

#touch { position: fixed; inset: 0; z-index: 4; pointer-events: none; }

/* the steering pad: bottom left, a self-centring thumb stick */
.pad {
  position: absolute; left: max(16px, env(safe-area-inset-left));
  bottom: calc(max(20px, env(safe-area-inset-bottom)) + 4px);
  width: 164px; height: 164px; border-radius: 50%;
  pointer-events: auto; touch-action: none;
  background: radial-gradient(circle, rgba(255, 248, 236, 0.10) 0%, rgba(255, 248, 236, 0.05) 58%, rgba(255, 248, 236, 0) 72%);
  border: 1px solid rgba(255, 248, 236, 0.28);
  box-shadow: inset 0 0 40px rgba(10, 30, 60, 0.25);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pad.held { border-color: rgba(255, 211, 107, 0.55); background: radial-gradient(circle, rgba(255, 211, 107, 0.12) 0%, rgba(255, 248, 236, 0.05) 58%, rgba(255, 248, 236, 0) 72%); }
.pad::after { /* a soft cross to read the centre */
  content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; border: 1px dashed rgba(255, 248, 236, 0.18);
}
.pad-knob {
  position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; border-radius: 50%;
  transform: translate(-50%, -50%); will-change: transform;
  background: radial-gradient(circle at 36% 30%, #fffdf7, #ffe1ea 58%, #ff9ec4);
  box-shadow: 0 6px 26px rgba(255, 158, 196, 0.45), inset 0 -3px 0 rgba(120, 40, 80, 0.18);
}
.pad-label {
  position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%);
  font: 600 9px "Karla", sans-serif; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.55; white-space: nowrap;
}

/* the thumb buttons: bottom right, gust under the thumb, brake over it */
.tbtns {
  position: absolute; right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(20px, env(safe-area-inset-bottom)) + 4px);
  display: flex; align-items: flex-end; gap: 12px; pointer-events: auto;
}
.tbtn {
  -webkit-appearance: none; appearance: none; border: 1px solid rgba(255, 248, 236, 0.35);
  color: var(--ink); font: 600 10px "Karla", sans-serif; letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: 50%; background: rgba(10, 30, 60, 0.24); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center; touch-action: none; pointer-events: auto;
  transition: transform 0.08s ease, background 0.12s ease, border-color 0.12s ease;
}
.tbtn.boost { width: 92px; height: 92px; background: rgba(255, 211, 107, 0.16); border-color: rgba(255, 211, 107, 0.5); }
.tbtn.brake { width: 74px; height: 74px; }
.tbtn.down { transform: scale(0.93); background: rgba(255, 211, 107, 0.38); border-color: rgba(255, 211, 107, 0.9); }

/* small side buttons: journal, camera, mute */
.tmini {
  position: absolute; right: max(14px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; pointer-events: auto;
}
.tmini button {
  -webkit-appearance: none; appearance: none; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255, 248, 236, 0.3); background: rgba(10, 30, 60, 0.22);
  color: var(--ink); font: 500 15px/1 "Karla", sans-serif; display: grid; place-items: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); touch-action: none;
}
.tmini button:active { background: rgba(255, 211, 107, 0.3); border-color: rgba(255, 211, 107, 0.8); }
.tmini svg { width: 20px; height: 20px; }

/* ---------- smaller screens: pull the HUD in, keep the middle of the sky clear ---------- */
@media (max-width: 640px) {
  .hud-tl { left: 16px; top: max(14px, env(safe-area-inset-top)); }
  .seeds { font-size: 24px; }
  .seeds-of { font-size: 13px; }
  .seeds-icon { width: 12px; height: 12px; }
  .place { font-size: 10px; letter-spacing: 0.22em; }
  .hud-tr { right: 16px; top: max(14px, env(safe-area-inset-top)); max-width: 46vw; }
  .job-name { font-size: 20px; }
  .job-kicker, .job-count, .job-spot { font-size: 9px; letter-spacing: 0.2em; }
  .hud-bl { left: 16px; bottom: calc(max(20px, env(safe-area-inset-bottom)) + 196px); width: 120px; }
  .hud-br { right: 16px; bottom: calc(max(20px, env(safe-area-inset-bottom)) + 186px); font-size: 30px; }
  .hud-br small { font-size: 9px; letter-spacing: 0.2em; }
  .prompt { bottom: 34%; font-size: 11px; letter-spacing: 0.14em; }
  .prompt em { font-size: 16px; }
  .prompt small { display: none; }
  .card-name { font-size: clamp(28px, 8vw, 44px); }
  .toast { font-size: 20px; top: 18%; }
  .tmini { top: auto; bottom: calc(max(20px, env(safe-area-inset-bottom)) + 204px); transform: none; }
  .tmini button { width: 38px; height: 38px; }
}

/* very short screens (landscape phones): shrink the sticks so they do not eat the view */
@media (max-height: 480px) {
  .pad { width: 122px; height: 122px; }
  .pad-knob { width: 48px; height: 48px; }
  .tbtn.boost { width: 74px; height: 74px; }
  .tbtn.brake { width: 62px; height: 62px; }
  .hud-bl { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 132px); }
  .hud-br { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 126px); }
}