:root {
  --black: #050403;
  --panel: #16110d;
  --panel-soft: #241a12;
  --amber: #ff9e25;
  --amber-hot: #ffc56d;
  --green: #78ffc0;
  --green-dim: #3f9369;
  --cream: #f2e8d5;
  --red: #ef5144;
  --chrome: #b8b2a7;
  --mono: "Lucida Console", "Courier New", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--cream);
  background: #020201;
  font-family: var(--sans);
}
button, input { font: inherit; }
button { color: inherit; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.cab-app {
  width: 100vw;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #17120e, #020201 74%);
}
.cab-stage {
  position: relative;
  width: min(100vw, calc(100svh * 1.77683));
  aspect-ratio: 1672 / 941;
  max-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 110px #000;
}
.cab-background,
.cab-vignette {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
}
.cab-background { object-fit: cover; }
.cab-vignette {
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.34), transparent 15%, transparent 70%, rgba(0,0,0,.1)),
    radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.28));
}

.cab-hud {
  position: absolute;
  z-index: 7;
  top: 2%;
  right: 3%;
  left: 3%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  pointer-events: none;
}
.driver-chip,
.brand-chip,
.logout-btn {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .52em .8em;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: .52em;
  color: rgba(255,255,255,.74);
  background: rgba(5,5,4,.68);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.3);
  backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: clamp(7px, .61vw, 11px);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.driver-chip { justify-self: start; }
.driver-chip > span { color: rgba(255,255,255,.38); }
.driver-chip strong { color: var(--amber-hot); }
.driver-chip i,
.logout-btn i {
  width: .62em;
  height: .62em;
  border-radius: 50%;
  background: #4aff92;
  box-shadow: 0 0 .7em #4aff92;
}
.brand-chip { justify-self: center; border-radius: 0 0 .55em .55em; }
.brand-chip img { width: clamp(28px, 3vw, 52px); max-height: 26px; object-fit: contain; }
.brand-chip .image-fallback {
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 1.55em;
  color: var(--amber-hot);
  border: 1px solid rgba(255,158,37,.45);
  font-weight: 900;
}
.logout-btn {
  justify-self: end;
  border-color: rgba(255,255,255,.15);
  cursor: pointer;
  pointer-events: auto;
}
.logout-btn i { background: var(--red); box-shadow: 0 0 .7em var(--red); }
.logout-btn:hover { color: #fff; border-color: rgba(255,158,37,.65); }

.device {
  position: absolute;
  z-index: 10;
  color: var(--green);
  font-family: var(--mono);
  transition: top .26s ease, left .26s ease, width .26s ease, height .26s ease, transform .26s ease, filter .26s ease;
}
.device button { font-family: var(--mono); }
.device-expand {
  position: absolute;
  z-index: 8;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  padding: 0;
  border: 1px solid rgba(120,255,192,.2);
  border-radius: .2em;
  color: rgba(120,255,192,.52);
  background: rgba(0,0,0,.35);
  font-size: clamp(4px, .35vw, 7px);
  cursor: pointer;
  opacity: .45;
}
.device:hover .device-expand,
.device:focus-within .device-expand { opacity: 1; }
.device-expand:hover { color: var(--amber-hot); border-color: var(--amber); }

/* Passgenau im großen Radio-Display der Mittelkonsole. */
.radio-unit {
  top: 58.555%;
  left: 70.873%;
  width: 14.414%;
  height: 15.515%;
  overflow: hidden;
  transform: none;
}
.radio-controls {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 21% 22% minmax(0, 1fr);
  grid-template-rows: 62% 38%;
  align-items: center;
  gap: 0 4%;
  padding: 5% 6%;
  border-radius: 2%;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(72,255,145,.018) 2px 3px),
    linear-gradient(155deg, rgba(9,29,20,.94), rgba(1,7,4,.98));
  text-shadow: 0 0 .5em rgba(120,255,192,.48);
}
.radio-logo,
.play-btn {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(120,255,192,.25);
  color: var(--green);
  background: rgba(120,255,192,.035);
}
.play-btn { cursor: pointer; }
.radio-logo img { width: 86%; height: 86%; object-fit: contain; }
.radio-logo .image-fallback { font-size: clamp(4px, .4vw, 8px); font-weight: 900; }
.radio-logo { align-self: stretch; }
.play-btn {
  justify-self: center;
  width: min(100%, 3.2vw);
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: clamp(5px, .55vw, 10px);
}
.play-btn:hover { background: rgba(120,255,192,.13); }
.play-btn.playing { color: #06110c; background: var(--green); box-shadow: 0 0 .8em rgba(120,255,192,.35); }
.radio-readout { min-width: 0; overflow: hidden; line-height: 1; }
.radio-readout strong { display: block; font-size: clamp(5px, .48vw, 9px); letter-spacing: .05em; }
.radio-readout span { display: block; margin-top: .3em; overflow: hidden; color: var(--green-dim); font-size: clamp(3px, .28vw, 5px); text-overflow: ellipsis; white-space: nowrap; }
.radio-readout .radio-track { color: var(--green); font-size: clamp(3px, .32vw, 6px); letter-spacing: .02em; }
.volume-control {
  grid-column: 1 / 4;
  display: flex;
  align-items: center;
  gap: 5%;
  color: var(--green-dim);
  font-size: clamp(3px, .25vw, 5px);
}
.volume-control input { min-width: 0; width: 100%; height: 2px; margin: 0; accent-color: var(--green); cursor: pointer; }

/* Das kleine, querformatige Navi auf dem Armaturenbrett. */
.gps-unit {
  top: 23.698%;
  left: 64.234%;
  width: 12.38%;
  height: 12.54%;
}
.gps-screen {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 23% minmax(0, 1fr) 12%;
  padding: 4% 5%;
  overflow: hidden;
  color: #d8f9df;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(72,255,145,.025) 2px 3px),
    linear-gradient(150deg, rgba(11,35,24,.92), rgba(2,10,7,.94));
  text-shadow: 0 0 .4em rgba(83,255,156,.3);
}
.gps-screen header { display: flex; align-items: start; justify-content: space-between; gap: 4%; }
.gps-screen header div { min-width: 0; }
.gps-screen header span { display: block; color: #55ad78; font-size: clamp(4px, .34vw, 7px); letter-spacing: .06em; }
.gps-screen header strong { display: block; overflow: hidden; margin-top: .2em; font-size: clamp(6px, .62vw, 11px); text-overflow: ellipsis; white-space: nowrap; }
.gps-signal { width: .65em; height: .65em; border-radius: 50%; background: #48ef8e; box-shadow: 0 0 .55em #48ef8e; }
.convoy-list { min-height: 0; display: grid; grid-template-rows: repeat(4, 1fr); overflow: hidden; }
.convoy-driver {
  min-width: 0;
  display: grid;
  grid-template-columns: 10% 8% minmax(0, 1fr) auto;
  align-items: center;
  gap: 3%;
  border-top: 1px solid rgba(120,255,192,.08);
}
.convoy-driver img,
.convoy-driver .truck-fallback { width: 100%; max-height: 80%; object-fit: contain; }
.convoy-driver .truck-fallback { display: grid; place-items: center; color: #5fb783; font-size: clamp(4px, .34vw, 6px); }
.convoy-dot { width: .55em; height: .55em; border-radius: 50%; background: #3a4d41; }
.convoy-dot.online { background: #44ed8b; box-shadow: 0 0 .5em #44ed8b; }
.convoy-name { overflow: hidden; font-size: clamp(5px, .45vw, 8px); text-overflow: ellipsis; white-space: nowrap; }
.convoy-time { color: #67a77f; font-size: clamp(4px, .34vw, 6px); }
.gps-screen footer { overflow: hidden; color: #467358; font-size: clamp(3px, .27vw, 5px); letter-spacing: .04em; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

/* Passgenau im hochkant montierten Smartphone links an der A-Säule. */
.phone-unit {
  top: 34.219%;
  left: 6.758%;
  width: 7.775%;
  height: 28.055%;
  overflow: hidden;
  transform: none;
}
.phone-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 8% 7% 6%;
  overflow: hidden;
  border-radius: 8% / 4%;
  color: #d8f9df;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(72,255,145,.018) 2px 3px),
    linear-gradient(160deg, rgba(8,25,18,.94), rgba(1,6,4,.97));
  text-shadow: 0 0 .4em rgba(83,255,156,.24);
}
.phone-header { flex: 0 0 16%; display: flex; align-items: start; justify-content: space-between; gap: 3%; border-bottom: 1px solid rgba(120,255,192,.1); }
.phone-header > div:first-child { min-width: 0; }
.phone-header span { display: block; color: #4f8b68; font-size: clamp(4px, .31vw, 6px); }
.phone-header strong { display: block; overflow: hidden; font-size: clamp(5px, .48vw, 9px); text-overflow: ellipsis; white-space: nowrap; }
.connection { display: flex; align-items: center; gap: .25em; }
.connection i { width: .55em; height: .55em; border-radius: 50%; background: #45ed8b; box-shadow: 0 0 .45em #45ed8b; }
.connection i.err { background: var(--red); box-shadow: 0 0 .45em var(--red); }
.phone-header .device-expand { position: static; flex: 0 0 auto; font-size: clamp(4px, .3vw, 6px); }
.chat-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--green-dim) transparent;
}
.empty-chat { height: 100%; display: grid; place-items: center; padding: 1em; color: #3d674e; font-size: clamp(4px, .32vw, 6px); line-height: 1.35; text-align: center; }
.chat-item { padding: .55em .1em; border-bottom: 1px solid rgba(120,255,192,.07); color: #9adbb4; font-size: clamp(4px, .34vw, 6px); line-height: 1.25; overflow-wrap: anywhere; }
.chat-meta { display: flex; align-items: center; gap: .5em; margin-bottom: .25em; color: #416f55; font-size: .74em; }
.user-badge { display: inline-flex; align-items: center; gap: .35em; }
.user-dot { width: .72em; height: .72em; border-radius: 50%; }
.u-j { background: #ffa62a; box-shadow: 0 0 .45em #ffa62a; }
.u-l { background: #fcff63; box-shadow: 0 0 .45em #fcff63; }
.u-m { background: #f0130c; box-shadow: 0 0 .45em #f0130c; }
.u-k { background: #0cfe0c; box-shadow: 0 0 .45em #0cfe0c; }
.chat-form { flex: 0 0 13%; display: flex; gap: 3%; padding-top: 4%; }
.chat-form input {
  min-width: 0;
  flex: 1;
  padding: 0 .35em;
  border: 1px solid rgba(120,255,192,.18);
  border-radius: 0;
  outline: 0;
  color: var(--green);
  background: rgba(120,255,192,.035);
  font-family: var(--mono);
  font-size: clamp(4px, .31vw, 6px);
}
.chat-form input:focus { border-color: var(--green-dim); }
.chat-form input::placeholder { color: #355944; }
.chat-form button {
  width: 25%;
  padding: 0;
  border: 1px solid var(--green-dim);
  color: var(--green);
  background: rgba(120,255,192,.06);
  font-size: clamp(4px, .31vw, 6px);
  font-weight: 900;
  cursor: pointer;
}
.chat-warn { display: none; flex: 0 0 auto; padding-top: 2%; color: #e76f65; font-size: clamp(3px, .27vw, 5px); }
.phone-alert {
  position: absolute;
  top: -2%;
  right: -6%;
  display: none;
  width: 10%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 .6em var(--red);
}
.phone-alert.visible { display: block; }

.device-backdrop { display: none; position: fixed; z-index: 19; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(7px); }
.device-backdrop.visible { display: block; }
.device.expanded {
  position: fixed;
  z-index: 30;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  clip-path: none;
  filter: drop-shadow(0 2em 4em rgba(0,0,0,.85));
}
.device.expanded .device-expand { top: 8px; right: 8px; width: 28px; height: 28px; font-size: 14px; opacity: 1; }
.radio-unit.expanded {
  width: min(680px, 90vw);
  height: min(240px, 58svh);
  border: 5px solid #17130f;
  border-radius: 12px;
  background: linear-gradient(#29221b, #100d0a);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 35px #000;
}
.radio-unit.expanded::before,
.radio-unit.expanded::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14%;
  aspect-ratio: 1;
  border: 5px solid #28241f;
  border-radius: 50%;
  background: radial-gradient(circle, #777168 0 8%, #171511 12% 48%, #4e4942 50% 55%, #0d0b09 58%);
  box-shadow: inset 0 0 12px #000, 0 5px 12px #000;
  transform: translateY(-50%);
}
.radio-unit.expanded::before { left: 3%; }
.radio-unit.expanded::after { right: 3%; }
.radio-unit.expanded .radio-controls { inset: 19% 19% 16%; padding: 3%; background: radial-gradient(circle, rgba(17,50,34,.92), rgba(1,7,4,.98)); }
.radio-unit.expanded .radio-logo .image-fallback { font-size: 16px; }
.radio-unit.expanded .radio-logo {
  border: 0;
  background: transparent;
}
.radio-unit.expanded .play-btn { font-size: 20px; }
.radio-unit.expanded .play-btn { width: min(100%, 72px); }
.radio-unit.expanded .radio-readout strong { font-size: 18px; }
.radio-unit.expanded .radio-readout span { font-size: 9px; }
.radio-unit.expanded .radio-readout .radio-track { font-size: 11px; }
.radio-unit.expanded .volume-control { font-size: 9px; }

.gps-unit.expanded {
  width: min(600px, 88vw);
  height: min(370px, 70svh);
  padding: 18px;
  border: 10px solid #151514;
  border-radius: 18px;
  background: #080807;
  box-shadow: inset 0 0 0 1px #555, inset 0 0 24px #000;
}
.gps-unit.expanded .gps-screen { padding: 18px 22px; }
.gps-unit.expanded .gps-screen header span { font-size: 9px; }
.gps-unit.expanded .gps-screen header strong { font-size: 17px; }
.gps-unit.expanded .convoy-name { font-size: 13px; }
.gps-unit.expanded .convoy-time { font-size: 11px; }
.gps-unit.expanded .convoy-driver .truck-fallback { font-size: 11px; }
.gps-unit.expanded .gps-screen footer { font-size: 8px; }

.phone-unit.expanded {
  width: min(390px, 88vw);
  height: min(690px, 86svh);
  padding: 15px 10px;
  border: 8px solid #0c0d0d;
  border-radius: 38px;
  background: #020303;
  box-shadow: inset 0 0 0 1px #555, inset 0 0 20px #000;
}
.phone-unit.expanded::before { content: ""; position: absolute; top: 7px; left: 50%; width: 24%; height: 5px; border-radius: 99px; background: #202222; transform: translateX(-50%); }
.phone-unit.expanded .phone-screen { padding: 22px 17px 14px; border-radius: 24px; }
.phone-unit.expanded .phone-header span { font-size: 8px; }
.phone-unit.expanded .phone-header strong { font-size: 15px; }
.phone-unit.expanded .connection span { font-size: 8px; }
.phone-unit.expanded .phone-header .device-expand { font-size: 12px; }
.phone-unit.expanded .empty-chat { font-size: 10px; }
.phone-unit.expanded .chat-item { font-size: 11px; }
.phone-unit.expanded .chat-form input,
.phone-unit.expanded .chat-form button { font-size: 10px; }
.phone-unit.expanded .chat-warn { font-size: 8px; }

.mobile-dock,
.rotate-tip { display: none; }

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.87)), url("truck-cab-pov-v6.png") center / cover;
}
.auth-gate[hidden] { display: none; }
.auth-radio {
  position: relative;
  width: min(430px, 100%);
  padding: 38px 34px 30px;
  border: 7px solid #17130f;
  border-radius: 15px;
  color: var(--green);
  background:
    repeating-linear-gradient(to bottom, transparent 0 3px, rgba(94,255,176,.018) 3px 4px),
    radial-gradient(circle at 50% 30%, #0b1915, #030706 72%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22), inset 0 0 45px #000, 0 30px 90px rgba(0,0,0,.72);
  font-family: var(--mono);
  text-align: center;
}
.auth-leds { position: absolute; top: 13px; left: 16px; display: flex; gap: 6px; }
.auth-leds i { width: 6px; height: 6px; border-radius: 50%; background: #34e681; box-shadow: 0 0 7px #34e681; }
.auth-leds i:nth-child(2) { background: var(--amber); box-shadow: 0 0 7px var(--amber); }
.auth-leds i:nth-child(3) { background: #542c25; box-shadow: none; }
.auth-logo { display: block; width: 130px; max-height: 88px; margin: 0 auto 17px; object-fit: contain; }
.auth-radio > .image-fallback { display: grid; place-items: center; width: 82px; height: 60px; margin: 0 auto 17px; border: 1px solid rgba(120,255,192,.45); font-size: 24px; font-weight: 900; }
.auth-channel { display: block; color: var(--green-dim); font-size: 9px; letter-spacing: .16em; }
.auth-radio h1 { margin: 7px 0 0; font-size: clamp(21px, 5vw, 31px); line-height: 1.05; text-transform: uppercase; }
.auth-radio > p { max-width: 320px; margin: 12px auto 21px; color: #609073; font-size: 11px; line-height: 1.5; }
.auth-form { display: grid; gap: 9px; }
.auth-form input { width: 100%; padding: 13px; border: 1px solid rgba(120,255,192,.25); border-radius: 0; outline: 0; color: var(--green); background: rgba(120,255,192,.035); font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-align: center; }
.auth-form input:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(120,255,192,.08); }
.auth-form input::placeholder { color: #456551; }
.auth-form button { padding: 13px; border: 1px solid var(--green); color: #06100b; background: var(--green); font-family: var(--mono); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.auth-error { min-height: 16px; color: #ef786e; font-size: 10px; }

@media (max-width: 900px), (orientation: portrait) {
  body { overflow: auto; }
  .cab-app { min-height: 100svh; height: auto; align-items: start; overflow: hidden; }
  .cab-stage { width: 100vw; height: 100svh; max-height: none; aspect-ratio: auto; }
  .cab-background { height: 48svh; object-fit: cover; object-position: 60% top; }
  .cab-vignette { height: 49svh; }
  .cab-hud { top: 10px; right: 10px; left: 10px; grid-template-columns: 1fr 1fr; }
  .brand-chip { display: none; }
  .driver-chip, .logout-btn { font-size: 8px; }
  .device,
  .device.expanded {
    position: absolute;
    z-index: 12;
    top: auto;
    right: 12px;
    bottom: 68px;
    left: 12px;
    display: none;
    width: auto;
    height: min(46svh, 420px);
    padding: 10px;
    border: 5px solid #17130f;
    border-radius: 14px;
    background: #080706;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 18px 35px rgba(0,0,0,.65);
    transform: none;
    filter: none;
  }
  .device.mobile-active { display: block; }
  .device-backdrop,
  .device-backdrop.visible { display: none; }
  .device-expand { display: none !important; }
  .radio-unit::before,
  .radio-unit::after { display: none; }
  .radio-controls,
  .radio-unit.expanded .radio-controls { inset: 12%; padding: 6%; background: radial-gradient(circle, rgba(17,50,34,.95), rgba(1,7,4,.98)); }
  .radio-logo .image-fallback { font-size: 15px; }
  .play-btn { width: min(100%, 90px); font-size: 18px; }
  .radio-readout strong { font-size: 18px; }
  .radio-readout span { font-size: 8px; }
  .volume-control { font-size: 8px; }
  .gps-unit,
  .gps-unit.expanded { padding: 14px; }
  .gps-screen { padding: 14px 16px; }
  .gps-screen header span { font-size: 7px; }
  .gps-screen header strong { font-size: 15px; }
  .convoy-name { font-size: 11px; }
  .convoy-time { font-size: 9px; }
  .convoy-driver .truck-fallback { font-size: 9px; }
  .gps-screen footer { font-size: 7px; }
  .phone-unit,
  .phone-unit.expanded { padding: 10px; border-radius: 14px; }
  .phone-unit::before { display: none; }
  .phone-screen,
  .phone-unit.expanded .phone-screen { padding: 14px 13px 10px; border-radius: 7px; }
  .phone-header span { font-size: 7px; }
  .phone-header strong { font-size: 13px; }
  .connection span { font-size: 7px; }
  .empty-chat { font-size: 9px; }
  .chat-item { font-size: 10px; }
  .chat-form input,
  .chat-form button { font-size: 9px; }
  .chat-warn { font-size: 7px; }
  .mobile-dock {
    position: absolute;
    z-index: 15;
    right: 12px;
    bottom: 12px;
    left: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }
  .mobile-dock button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 45px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 9px;
    color: #8d968f;
    background: rgba(10,10,9,.9);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
  }
  .mobile-dock button.active { color: var(--green); border-color: var(--green-dim); background: rgba(17,42,29,.94); }
  .mobile-dock button span { color: var(--amber); font-size: 15px; }
  .mobile-dock button i { position: absolute; top: 7px; right: 14px; display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px var(--red); }
  .mobile-dock button i.visible { display: block; }
  .rotate-tip {
    position: absolute;
    z-index: 4;
    top: 40%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    color: rgba(255,255,255,.72);
    background: rgba(0,0,0,.58);
    font-size: 8px;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .rotate-tip span { color: var(--amber); font-size: 13px; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .cab-hud { top: 1%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }