* {
  box-sizing: border-box;
}
body {user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"] {user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}
button {touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* The channel chip shares the existing header row; its list is a modal so it
   never adds another permanent toolbar across the driving view. */
#channel-menu {white-space:nowrap;font-variant-numeric:tabular-nums;min-width:102px}
#channel-panel {position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;background:#07191fb3;touch-action:pan-y}
.channel-card {width:min(460px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:22px;border:1px solid var(--line);border-radius:22px;background:#142e36;box-shadow:0 18px 60px #0008}
.channel-heading {display:flex;gap:16px;align-items:center;justify-content:space-between}
.channel-heading h2 {font-size:20px;margin:0}
.channel-heading button {flex:none}
#channel-status {min-height:1.5em;color:#d3e6c7}
#channel-list {display:grid;gap:10px}
.channel-row {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px}
.channel-row strong,.channel-row span {display:block}.channel-row span {margin-top:4px;font-size:12px;color:#c7d6d6}
.channel-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.channel-share {display:grid;gap:7px;margin-top:20px;font-size:12px;color:#c7d6d6}
.channel-share input {width:100%;min-height:44px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:10px;background:#0e252b;color:#e3ece6;font-size:12px}
body:has(#channel-panel:not([hidden])) :is(#quick,#action-dock,#joystick,#pedals,#autodrive-quick,#telemetry,#hud-categories,#driving-dock,#refreshment-pocket,#cockpit-wheel-target){visibility:hidden;pointer-events:none}
@media (pointer:coarse), (max-width:700px), (max-height:600px) and (orientation:landscape) {
  body.hud-ready header #channel-menu {min-width:65px;padding:5px 7px;font-size:10px;margin-left:auto}
  #channel-panel {padding:12px}
  .channel-card {padding:16px;max-height:calc(100dvh - 24px)}
}

/* Keep the clock beneath the brand clear when the channel chip is present. */
@media (pointer:coarse), (max-width:700px), (max-height:600px) and (orientation:landscape) {
  body.hud-ready header:has(#channel-menu:not([hidden])) #profile {margin-left:0}
}
@media (max-width:375px) {
  body.hud-ready header {gap:4px;padding-left:12px;padding-right:12px}
  body.hud-ready header .brand {font-size:19px}
  body.hud-ready header #profile {max-width:42px;padding-left:6px;padding-right:6px}
  body.hud-ready header #rest-menu {padding-left:7px;padding-right:7px}
}


:root {
  --glass: #1a3239ed;
  --line: #ffffff2b;
  --accent: #c9e4b7;
  --safe: max(18px, env(safe-area-inset-bottom));
  color-scheme: dark;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  overflow: hidden;
  background: #9bbfc9;
  color: #f4f3e9;
  font:
    14px system-ui,
    sans-serif;
  touch-action: none;
}
canvas {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}
button,
select,
input {
  font: inherit;
}
button,
select {
  color: inherit;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  min-height: 44px;
  cursor: pointer;
}
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:active,
button[aria-pressed="true"] {
  background: #557c62;
  border-color: #bddba5;
}
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
button:disabled {
  opacity: 0.38;
  cursor: default;
}
button[aria-disabled="true"] {
  opacity: 0.62;
}
svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
button span,
button small {
  pointer-events: none;
}
header {
  position: fixed;
  z-index: 4;
  inset: 0 0 auto;
  display: flex;
  gap: 18px;
  align-items: center;
  padding: max(14px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right)) 16px
    max(20px, env(safe-area-inset-left));
  background: linear-gradient(#142e3b95, transparent);
  pointer-events: none;
}
header > * {
  pointer-events: auto;
}
.brand {
  font-size: 28px;
  font-weight: 800;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}
.brand span {
  display: block;
  font-size: 7px;
  letter-spacing: 3px;
  margin-top: 7px;
}
.place {
  flex: 1;
  font-weight: 600;
}
.place span {
  display: block;
  font-size: 10px;
  opacity: 0.75;
  margin-top: 3px;
}
header button {
  padding: 8px 14px;
}
#bag-count {
  display: inline-flex;
  min-width: 19px;
  justify-content: center;
  margin-left: 5px;
  color: var(--accent);
}
#message {
  position: fixed;
  z-index: 3;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(540px, calc(100% - 32px));
  padding: 9px 16px;
  border: 1px solid #ffffff16;
  border-radius: 20px;
  background: #19313ddd;
  text-align: center;
  font-size: 12px;
  pointer-events: none;
}
#telemetry {
  position: fixed;
  z-index: 2;
  bottom: 112px;
  right: 24px;
  text-align: right;
  pointer-events: none;
  text-shadow: 0 1px 6px #18323b;
}
#speed {
  font-size: 40px;
  font-weight: 300;
}
#telemetry span {
  font-size: 10px;
  margin-left: 6px;
}
#mode {
  display: block;
  font-size: 11px;
  color: #e1edbd;
}
#quick {
  position: fixed;
  z-index: 3;
  bottom: var(--safe);
  right: 24px;
  display: flex;
  gap: 7px;
  white-space: nowrap;
}
#quick button {
  min-height: 48px;
}
#call {
  background: #52725cef;
}
#action-dock {
  position: fixed;
  z-index: 3;
  bottom: var(--safe);
  left: 20px;
  display: flex;
  gap: 6px;
  max-width: calc(100vw - 420px);
  overflow-x: auto;
  touch-action: pan-x;
  scrollbar-width: none;
}
#action-dock::-webkit-scrollbar {
  display: none;
}
#high-beam[aria-pressed="true"] {
  color: #89c9ff;
  background: #164e7a;
}
#hazards[aria-pressed="true"] {
  color: #ffcf84;
  background: #79481e;
}
#action-dock button {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 62px;
  height: 64px;
  padding: 5px 3px;
  font-size: 10px;
  white-space: nowrap;
}
#action-dock svg {
  height: 22px;
  width: 22px;
}
#help {
  position: fixed;
  z-index: 2;
  left: 22px;
  bottom: 91px;
  font-size: 10px;
  text-shadow: 0 1px 5px #000;
  pointer-events: none;
  max-width: 70%;
}
#options,
#rest-panel {
  position: fixed;
  z-index: 7;
  top: 84px;
  right: max(16px, env(safe-area-inset-right));
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100dvh - 108px - env(safe-area-inset-bottom));
  overflow: auto;
  touch-action: pan-y;
  padding: 20px;
  background: #183039fa;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 14px 50px #0c25395c;
}
h2 {
  font-size: 19px;
  margin: 0 0 20px;
}
h3 {
  font-size: 14px;
  margin: 20px 0 10px;
  color: #e4d7b6;
}
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.panel-title h2 {
  margin: 0;
}
.panel-close {
  float: right;
  margin: -8px -8px 10px 10px;
}
.panel-title button,
.panel-close {
  font-size: 11px;
  padding: 5px 9px;
}
#options label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 15px 0;
  font-size: 12px;
  color: #dce7dd;
}
#options select {
  width: 100%;
  font-size: 12px;
}
#options #graphics-quality {min-height:44px;font-size:16px}
#options input[type="range"] {
  flex: 1;
  min-width: 90px;
  accent-color: #bdd7aa;
  height: 30px;
}
#background-sound-label {justify-content:space-between;min-height:44px;cursor:pointer}
#background-sound {width:22px;height:22px;accent-color:#bdd7aa}
#options output {
  font-size: 12px;
  width: 42px;
  text-align: right;
}
#options > button:not(.panel-close),
#seating button {
  margin: 3px 4px 3px 0;
  font-size: 12px;
}
#cabin {
  font-size: 12px;
  color: #d4deba;
}
#offline-link {
  display: block;
  color: #d5e5c8;
  margin: 12px 0;
}
.note {
  font-size: 11px;
  line-height: 1.7;
  color: #b6c7c3;
}
.rest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rest-grid button {
  text-align: left;
  font-size: 12px;
}
#shop-strip {
  position: fixed;
  z-index: 3;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 32px));
  padding: 12px;
  background: #183039ed;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.shop-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 3px 9px;
  font-size: 12px;
}
.shop-heading span {
  font-size: 10px;
  color: #c0cec4;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.shop-grid button {
  font-size: 13px;
  text-align: left;
  background: #334c48;
  min-height: 52px;
}
.shop-grid small {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: #c6d1c4;
}
#interact {
  position: fixed;
  z-index: 3;
  bottom: 115px;
  left: 50%;
  transform: translateX(-50%);
  background: #476b54;
}
#ride-request {
  position: fixed;
  z-index: 8;
  top: 136px;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 30px));
  padding: 16px;
  border-radius: 16px;
  background: #19343cf5;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px #172a3455;
}
#ride-request p {
  font-size: 13px;
  margin: 0 0 12px;
}
#ride-request button {
  font-size: 12px;
}
#shared-action {
  position: fixed;
  z-index: 2;
  top: 130px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  pointer-events: none;
  text-shadow: 0 1px 4px #172f35;
  max-width: 80%;
  text-align: center;
}
#shared-action:empty {
  display: none;
}
#loading {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #172c34;
  text-align: center;
  padding: 25px;
  flex-direction:column;
  gap:18px;
}
#loading strong {font-size:clamp(20px,4vw,28px);color:#e5edd8;letter-spacing:-.025em}
#loading span {font-size:14px;line-height:1.7;color:#c1d2cc;max-width:32em}
#loading progress {width:min(300px,76vw);height:7px;border:0;border-radius:6px;overflow:hidden;accent-color:#bed7a3;background:#ffffff1c}
#loading progress::-webkit-progress-bar {background:#ffffff1c;border-radius:6px}
#loading progress::-webkit-progress-value {background:#bed7a3;border-radius:6px}
#joystick,
#pedals {
  display: none;
}
@media (min-width: 701px) and (max-width: 1100px) {
  #action-dock {
    bottom: calc(var(--safe) + 65px);
  }
  #help {
    display: none;
  }
  #shop-strip {
    bottom: 160px;
  }
  #interact {
    bottom: 160px;
  }
}
@media (pointer: coarse),
  (max-width: 700px),
  (max-height: 500px) and (orientation: landscape) {
  header {
    gap: 10px;
    padding: max(12px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right)) 12px
      max(14px, env(safe-area-inset-left));
  }
  .brand {
    font-size: 23px;
  }
  .brand span {
    font-size: 6px;
    letter-spacing: 2px;
  }
  .place {
    font-size: 11px;
  }
  .place span {
    font-size: 8px;
  }
  header button {
    font-size: 11px;
    padding: 7px 10px;
  }
  #message {
    top: 94px;
    font-size: 11px;
    padding: 8px 12px;
  }
  #help {
    display: none;
  }
  #quick {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(var(--safe) + 145px);
    gap: 5px;
    max-width: calc(100vw - 20px);
  }
  #quick button {
    min-height: 44px;
    padding: 8px 9px;
    font-size: 11px;
  }
  #action-dock {
    left: 50%;
    bottom: calc(var(--safe) + 199px);
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 24px);
    display: grid;
    grid-auto-flow: column;
    gap: 5px;
    overflow-x: auto;
    touch-action: pan-x;
  }
  #action-dock button {
    width: 54px;
    height: 54px;
    font-size: 9px;
    gap: 3px;
  }
  #action-dock svg {
    width: 21px;
    height: 21px;
  }
  #action-dock:has(#sleep:not([hidden])) {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    width: calc(100vw - 30px);
    max-width: 360px;
  }
  #action-dock:has(#sleep:not([hidden])) button {
    width: 100%;
  }
  #shop-strip {
    bottom: calc(var(--safe) + 265px);
    padding: 10px;
  }
  .shop-heading {
    font-size: 11px;
  }
  .shop-heading span {
    font-size: 8px;
  }
  .shop-grid {
    gap: 5px;
  }
  .shop-grid button {
    padding: 7px;
    font-size: 11px;
    min-height: 49px;
  }
  .shop-grid small {
    font-size: 8px;
  }
  #interact {
    bottom: calc(var(--safe) + 265px);
    font-size: 12px;
  }
  #telemetry {
    bottom: calc(var(--safe) + 110px);
    right: max(17px, env(safe-area-inset-right));
  }
  #speed {
    font-size: 26px;
  }
  #mode {
    font-size: 10px;
  }
  #options,
  #rest-panel {
    top: 82px;
    padding: 17px;
  }
  #joystick {
    display: block;
    position: fixed;
    z-index: 3;
    left: max(18px, env(safe-area-inset-left));
    bottom: calc(var(--safe) + 5px);
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: #19393f66;
    border: 1px solid #ffffff60;
    touch-action: none;
  }
  body.riding:not(.driving) #joystick {
    display: none;
  }
  #stick {
    position: absolute;
    left: 34px;
    top: 34px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e0e9dd99;
    pointer-events: none;
  }
  #joystick span {
    position: absolute;
    top: 116px;
    width: 100%;
    text-align: center;
    font-size: 9px;
    opacity: 0.8;
    pointer-events: none;
  }
  body.driving #pedals {
    display: flex;
    position: fixed;
    z-index: 3;
    right: max(16px, env(safe-area-inset-right));
    bottom: var(--safe);
    flex-wrap: wrap;
    width: 146px;
    gap: 6px;
  }
  #pedals button {
    width: 70px;
    height: 47px;
    font-size: 11px;
    padding: 4px;
  }
  #pedals button:last-child {
    width: 146px;
    height: 55px;
    background: #536e5de8;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  header {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: 5px;
  }
  .place span {
    display: none;
  }
  .brand {
    font-size: 21px;
  }
  .brand span {
    display: none;
  }
  header button {
    min-height: 36px;
  }
  #message {
    top: 56px;
    max-width: 46%;
    font-size: 10px;
  }
  #shared-action {
    top: 88px;
  }
  #quick {
    bottom: var(--safe);
    max-width: calc(100vw - 310px);
    gap: 4px;
  }
  #quick button {
    font-size: 10px;
    padding: 6px 8px;
    min-height: 42px;
  }
  #action-dock {
    bottom: calc(var(--safe) + 52px);
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 300px);
    overflow-x: auto;
    transform: translateX(-50%);
    display: flex;
  }
  #action-dock:has(#sleep:not([hidden])) {
    display: flex;
    width: max-content;
    max-width: calc(100vw - 300px);
  }
  #action-dock button,
  #action-dock:has(#sleep:not([hidden])) button {
    min-width: 49px;
    width: 49px;
    height: 44px;
    gap: 1px;
  }
  #action-dock svg {
    height: 18px;
  }
  #shop-strip {
    bottom: calc(var(--safe) + 106px);
    width: min(470px, calc(100vw - 300px));
  }
  .shop-grid small {
    display: none;
  }
  .shop-grid button {
    min-height: 38px;
    font-size: 10px;
  }
  .shop-heading {
    font-size: 10px;
  }
  .shop-heading span {
    font-size: 8px;
  }
  #interact {
    bottom: calc(var(--safe) + 106px);
  }
  #telemetry {
    bottom: 142px;
  }
  #help {
    display: none;
  }
  #options,
  #rest-panel {
    top: 58px;
    max-height: calc(100dvh - 75px);
  }
  #ride-request {
    top: 90px;
  }
  #joystick {
    width: 100px;
    height: 100px;
  }
  #stick {
    left: 28px;
    top: 28px;
  }
  #joystick span {
    top: 104px;
  }
}
/* Social lobby: clear choices, live status and direct actions. */
header {
  background: linear-gradient(#10252fe8, #10252f00);
}
#profile {
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e1ebcb;
}
.primary,
.fleet-action {
  background: #d2e8bc;
  border-color: #d2e8bc;
  color: #20382c;
  font-weight: 700;
}
#garage {
  background: #e2e7db;
  color: #263b35;
  border-color: #ffffff8c;
  font-weight: 650;
}
#vehicle-context {
  position: absolute;
  right: 0;
  bottom: calc(100% + 7px);
  margin: 0;
  max-width: 440px;
  padding: 7px 10px;
  background: #17323cce;
  border-radius: 10px;
  font-size: 10px;
  line-height: 1.5;
  white-space: normal;
  color: #e1e9dc;
  pointer-events: none;
}
body:not(.riding) #telemetry {
  display: none;
}
#garage-panel {
  position: fixed;
  z-index: 7;
  right: max(18px, env(safe-area-inset-right));
  top: 88px;
  width: min(460px, calc(100vw - 36px));
  max-height: calc(100dvh - 184px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  background: #162d35fa;
  border: 1px solid #dde9d633;
  border-radius: 22px;
  box-shadow: 0 24px 72px #081b2570;
  touch-action: pan-y;
}
#garage-panel .panel-title {
  flex-shrink: 0;
  gap: 10px;
  margin-bottom: 0;
}
.eyebrow {
  color: #b4cba8;
  font-size: 10px;
  letter-spacing: 1px;
  margin: 0 0 7px;
}
#garage-summary {
  margin: 15px 0 10px;
  color: #dce8d2;
  font-size: 12px;
}
.fleet-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin-bottom: 12px;
  background: #091e266b;
  border-radius: 13px;
}
.fleet-tabs button {
  flex: 1;
  min-height: 38px;
  font-size: 12px;
  padding: 7px 10px;
  border-color: transparent;
  background: transparent;
}
.fleet-tabs button[aria-pressed="true"] {
  background: #435e50;
  border-color: #a2bd8c66;
}
#fleet-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  scrollbar-width: thin;
  touch-action: pan-y;
}
.fleet-card {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 13px 10px;
  border: 1px solid #d9e9db21;
  border-radius: 14px;
  background: #ffffff06;
  margin: 0 0 8px;
}
.paint-swatch {
  display: block;
  width: 25px;
  height: 37px;
  flex-shrink: 0;
  border-radius: 7px 7px 9px 9px;
  box-shadow:
    inset 0 0 0 1px #ffffff50,
    inset 5px 0 7px #ffffff30;
}
.fleet-info {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}
.fleet-info strong {
  font-size: 12px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.fleet-info span {
  font-size: 11px;
  color: #cedbce;
  overflow-wrap: anywhere;
}
.fleet-info small {
  color: #92afa8;
  font-size: 9px;
}
.fleet-card button {
  flex-shrink: 0;
  max-width: 98px;
  font-size: 11px;
  padding: 9px 11px;
}
.empty-note,
.fleet-no-results {
  font-size: 12px;
  line-height: 1.6;
  padding: 12px;
  margin: 0 0 12px;
  background: #a9bd8120;
  border: 1px solid #b1c38d38;
  border-radius: 12px;
}
.quick-selection {
  padding: 9px 2px 0;
  flex-shrink: 0;
  font-size: 11px;
}
.quick-selection summary {
  padding: 4px 0;
  cursor: pointer;
  color: #b9c9bd;
}
.quick-selection label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.quick-selection select {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  min-height: 36px;
  padding: 7px;
}
.quick-selection #call {width:100%;min-height:44px;margin-top:12px;background:#d2e8bc;color:#20382c;border-color:#d2e8bc}
#garage-connection {
  margin: 10px 0 0;
  flex-shrink: 0;
  font-size: 10px;
}
#profile-panel {
  position: fixed;
  z-index: 15;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #0c20299c;
  backdrop-filter: blur(7px);
}
.profile-card {
  width: min(430px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 28px;
  border-radius: 24px;
  background: #19343d;
  border: 1px solid #c9dbbf44;
  box-shadow: 0 25px 90px #071b3370;
  touch-action: pan-y;
}
.profile-card h2 {
  font-size: 23px;
  line-height: 1.4;
  margin: 0 0 10px;
}
.profile-card label {
  display: block;
  font-size: 12px;
  margin: 24px 0 8px;
}
#nickname {
  width: 100%;
  color: #f2f5e7;
  background: #102730;
  border: 1px solid #bdd7aa66;
  border-radius: 12px;
  padding: 13px;
  font-size: 16px;
}
#nickname-error {
  min-height: 32px;
  margin: 9px 0 16px;
  color: #e0c7a6;
  font-size: 11px;
  line-height: 1.5;
}
.profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.profile-actions button {
  font-size: 12px;
}
#ride-request {
  top: 132px;
  right: max(20px, env(safe-area-inset-right));
  left: auto;
  transform: none;
  width: min(360px, calc(100vw - 32px));
  border-color: #d2e8bc88;
  padding: 18px;
  border-radius: 20px;
}
#ride-request #request-text {
  font-weight: 700;
  padding-right: 24px;
}
#ride-request #request-detail {
  margin: -4px 0 12px;
  font-size: 11px;
  color: #b6c7c3;
  line-height: 1.6;
}
#ride-request button {
  margin: 3px 3px 0 0;
}
.request-icon {
  position: absolute;
  top: 12px;
  right: 17px;
  color: #c8e3a7;
  font-size: 24px;
}
#journey-status {
  position: fixed;
  z-index: 6;
  top: 85px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #28483ef5;
  border: 1px solid #c9e4b76b;
  border-radius: 14px;
  box-shadow: 0 8px 25px #132c3555;
}
#journey-text {
  font-size: 11px;
  line-height: 1.5;
}
#journey-status button {
  font-size: 11px;
  min-height: 36px;
  padding: 6px 10px;
  flex-shrink: 0;
}
@media (pointer: coarse), (max-width: 700px) {
  header {
    gap: 7px;
  }
  header button {
    font-size: 10px;
    padding: 7px 9px;
  }
  #profile {
    max-width: 70px;
  }
  .place {
    font-size: 10px;
  }
  .brand {
    font-size: 22px;
  }
  #garage-panel {
    top: 80px;
    right: 10px;
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 100px - env(safe-area-inset-bottom));
    padding: 16px;
    border-radius: 20px;
  }
  #garage-panel h2 {
    font-size: 19px;
  }
  .fleet-card {
    gap: 9px;
    padding: 12px 9px;
  }
  .fleet-card button {
    padding: 8px;
    min-width: 57px;
  }
  .fleet-info strong {
    font-size: 11px;
  }
  .fleet-info span {
    font-size: 10px;
  }
  .profile-card {
    padding: 23px;
  }
  .profile-card h2 {
    font-size: 21px;
  }
  #quick {
    gap: 5px;
  }
  #quick button {
    padding: 8px;
    font-size: 11px;
  }
  #vehicle-context {
    bottom: calc(100% + 72px);
    width: max-content;
    max-width: calc(100vw - 36px);
    right: 50%;
    transform: translateX(50%);
    text-align: center;
    font-size: 10px;
  }
  body.driving #action-dock {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, 1fr);
    width: min(360px, calc(100vw - 24px));
    max-width: none;
    overflow: visible;
  }
  body.driving #action-dock button {
    width: 100%;
    min-width: 0;
    height: 49px;
  }
  #ride-request {
    top: 150px;
    right: 12px;
    padding: 15px;
  }
  #journey-status {
    top: 85px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  #profile {
    max-width: 90px;
  }
  #vehicle-context {
    display: none;
  }
  #garage-panel {
    top: 58px;
    max-height: calc(100dvh - 72px);
    width: min(460px, calc(100vw - 24px));
    padding: 14px;
  }
  #garage-panel .eyebrow,
  #garage-connection,
  #garage-summary {
    display: none;
  }
  .fleet-tabs {
    margin: 9px 0;
  }
  body.driving #action-dock {
    display: flex;
    width: max-content;
    max-width: calc(100vw - 300px);
    overflow: auto;
  }
  body.driving #action-dock button {
    min-width: 49px;
    width: 49px;
    height: 44px;
  }
  #journey-status {
    top: 57px;
    max-width: 65%;
  }
  #ride-request {
    top: 110px;
    padding: 12px;
    max-width: 360px;
  }
  .profile-card {
    padding: 20px;
  }
  .profile-card label {
    margin-top: 14px;
  }
}
@media (max-width: 360px) {
  header .place {
    display: none;
  }
  header .brand {
    margin-right: auto;
  }
  #quick button {
    font-size: 10px;
    padding: 8px 6px;
  }
}
#action-dock button.signal-pulse {
  color: #ffc354;
  background: #624218;
  border-color: #f0b044;
}
/* Target speed is available without opening a menu while autonomous driving. */
#auto-speed-setting {margin:0 0 22px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#10282a;display:grid;grid-template-columns:1fr auto;gap:10px}
#auto-speed-setting label {grid-column:1/-1;margin:0;font-size:13px;color:#d6e8d1}
#auto-speed {width:100%;margin:0;min-height:44px;accent-color:#c9e4b7;touch-action:pan-x}
#auto-speed-value {align-self:center;font-variant-numeric:tabular-nums;font-size:15px;font-weight:700;white-space:nowrap;min-width:64px;width:auto}
#auto-speed-presets {grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#auto-speed-presets button {flex:1;padding:8px 4px;font-size:12px}
#auto-speed-note {grid-column:1/-1;margin:0;color:#b3c4c4;font-size:11px;line-height:1.6}
#auto-speed-setting #auto-overtake-label {display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
#auto-overtake {width:20px;height:20px;flex:none;accent-color:#c9e4b7}
#auto-overtake-note {grid-column:1/-1;margin:0;color:#b3c4c4;font-size:11px;line-height:1.6}
#autodrive-quick {position:fixed;z-index:3;top:86px;right:24px;display:flex;align-items:center;gap:4px;padding:5px;border:1px solid #d4e6c543;border-radius:16px;background:#163331ef;box-shadow:0 4px 18px #0002}
#autodrive-quick button {width:44px;height:44px;padding:0;font-size:24px;border:0;background:#ffffff0d}
#auto-target {min-width:106px;text-align:center;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
#auto-destinations {margin:16px 0 0;padding-top:12px;border-top:1px solid #ffffff20}
#auto-destinations h3 {font-size:16px;margin:0 0 6px}
#auto-destination-status {font-size:12px;line-height:1.6;color:#d0dfd5;margin:6px 0 10px}
#auto-destinations button {display:block;text-align:left;white-space:pre-line;line-height:1.7;font-size:12px;width:100%;min-height:62px;margin-top:6px;padding:10px 12px;touch-action:manipulation}
#auto-destinations button[aria-pressed="true"] {background:#2d6658;border-color:#b2d8b5}
#autodrive-quick #auto-choose {width:auto;font-size:12px;padding:0 10px}
#autodrive-quick #auto-choose {flex-shrink:0;white-space:nowrap}
#auto-target {max-width:190px;white-space:normal;line-height:1.5}
#action-dock #actions-more {display:none}
@media (pointer:coarse), (max-width:700px), (max-height:500px) and (orientation:landscape) {
  :root {--hud-top:calc(env(safe-area-inset-top,0px) + 68px);--hud-left:max(12px,env(safe-area-inset-left));--hud-right:max(12px,env(safe-area-inset-right))}
  header {gap:7px;padding:calc(env(safe-area-inset-top,0px) + 8px) var(--hud-right) 8px var(--hud-left);min-height:62px;background:linear-gradient(#10262ff2,#10262f80,transparent)}
  .brand {font-size:23px}.brand span {font-size:5px;letter-spacing:2px;margin-top:5px}
  .place {min-width:0;font-size:0;font-weight:500}
  .place #presence {display:none}.place #world-time {font-size:9px;line-height:1.45;max-width:88px;margin:0;color:#edf4ee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  header button {min-height:44px;font-size:11px;padding:7px 10px;border-radius:14px;background:#18353bd9}
  #profile {max-width:67px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #bag-count {min-width:12px;margin-left:2px}
  #quick {top:var(--hud-top);bottom:auto;left:var(--hud-left);right:var(--hud-right);transform:none;max-width:none;gap:6px;display:flex;isolation:isolate}
  #quick button {flex:1;min-width:0;min-height:46px;padding:8px 5px;font-size:12px;font-weight:600;border-radius:14px;background:#153138e8;color:#f0f5eb;white-space:normal;line-height:1.25}
  #quick #call {background:#425f4feb}#quick #auto[aria-pressed=true] {background:#bfd7ac;color:#152b23;border-color:#d7ebc9}
  #quick #enter {border-color:#d3e3cc66}#quick #forward {display:none}
  #vehicle-context {top:calc(100% + 8px);bottom:auto;left:0;right:0;transform:none;width:auto;max-width:none;white-space:normal;font-size:10px;padding:7px 10px;background:#17303ac9;border-radius:10px;text-align:center}
  body.driving #vehicle-context,body:has(#journey-status:not([hidden])) #vehicle-context {display:none}
  #autodrive-quick {top:calc(var(--hud-top) + 54px);left:var(--hud-left);right:auto;padding:4px;gap:2px;border-radius:14px;max-width:calc(100vw - 112px)}
  #autodrive-quick button {min-height:44px;width:44px;font-size:24px}
  #auto-target {min-width:100px;font-size:12px}
  #telemetry {top:calc(var(--hud-top) + 54px);bottom:auto;right:var(--hud-right);padding:6px 10px;border:1px solid #ffffff20;border-radius:14px;background:#102b30c9;box-sizing:border-box;width:80px;min-width:0}
  #speed {font-size:27px;line-height:1}#mode {font-size:9px;max-width:90px;line-height:1.4}#telemetry span {font-size:9px}
  #message {top:calc(var(--hud-top) + 116px);max-width:calc(100vw - 30px);font-size:11px;line-height:1.45;padding:9px 14px;border-radius:14px;background:#122e36ed}
  #help {display:none}
  #action-dock,body.driving #action-dock,#action-dock:has(#sleep:not([hidden])) {left:var(--hud-left);right:var(--hud-right);bottom:calc(var(--safe) + 146px);transform:none;width:auto;max-width:none;display:grid;grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;overflow:visible;touch-action:manipulation}
  #action-dock button,body.driving #action-dock button,#action-dock:has(#sleep:not([hidden])) button {width:100%;min-width:0;height:52px;min-height:48px;font-size:10px;gap:3px;border-radius:14px;background:#153138eb}
  #action-dock svg {height:21px;width:21px}
  #actions-more {display:flex;order:5;font-size:11px!important;font-weight:650}
  #actions-more::before {content:'•••';font-size:18px;line-height:17px;letter-spacing:2px}
  #action-dock button {order:10}#action-dock #horn {order:1}#action-dock #turn-left {order:2}#action-dock #turn-right {order:3}#action-dock #hazards {order:4}
  body:not(.driving) #action-dock #bench {order:1}body:not(.driving) #action-dock #wave {order:2}body:not(.driving) #action-dock #snack {order:3}body:not(.driving) #action-dock #sleep {order:4}
  body:not(.driving) #action-dock #toilet-action {order:3}
  #action-dock #actions-more {order:5;display:flex}
  body.driving #action-dock:not([data-expanded=true]) > button:not(#horn):not(#turn-left):not(#turn-right):not(#hazards):not(#actions-more) {display:none}
  body:not(.driving) #action-dock:not([data-expanded=true]) > button:not(#bench):not(#wave):not(#toilet-action):not(#snack):not(#sleep):not(#actions-more) {display:none}
  #action-dock[data-expanded=true],body.driving #action-dock[data-expanded=true] {padding:12px;max-height:min(46dvh,340px,calc(100dvh - 360px));overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;background:#102b31f5;border:1px solid #ffffff38;border-radius:20px;box-shadow:0 8px 35px #0005;backdrop-filter:blur(16px)}
  #action-dock[data-expanded=true]::before {content:'바로 하는 행동';grid-column:1/-1;order:-1;font-size:12px;color:#c9dfc7;padding:0 3px 3px}
  html[lang="en"] #action-dock[data-expanded=true]::before {content:'Quick actions'}
  #action-dock button.signal-pulse {color:#ffce70;background:#624218;border-color:#efba5c}
  #joystick {width:104px;height:104px;left:max(16px,env(safe-area-inset-left));bottom:calc(var(--safe) + 12px);border:1px solid #e9f0d96b;background:radial-gradient(circle,#24474c85,#102e3866);box-shadow:inset 0 0 0 14px #ffffff06}
  #stick {left:30px;top:30px;width:44px;height:44px;background:#dce9d9cc;box-shadow:0 3px 12px #0003;border:1px solid #ffffff80}
  #joystick span {top:108px;font-size:10px;color:#f0f6ef;text-shadow:0 1px 4px #000}
  body.driving #pedals {display:grid;grid-template-columns:70px 76px;grid-template-rows:44px 76px;width:152px;gap:6px;right:max(16px,env(safe-area-inset-right));bottom:calc(var(--safe) + 8px)}
  #pedals button {width:100%;height:100%;min-height:44px;font-size:12px;font-weight:650;border-radius:16px;user-select:none;-webkit-user-select:none}
  #pedals button[data-key=brake] {grid-row:2;grid-column:1;background:#543f3fdd;border-color:#eac4bb6b}
  #pedals button[data-key=reverse] {grid-row:1;grid-column:1;font-size:11px;background:#1c373fde}
  #pedals button[data-key=accelerate] {grid-row:1/3;grid-column:2;width:100%;height:100%;background:linear-gradient(165deg,#acc9a9f2,#6e967bef);border-color:#d1e2c6;color:#102b20;font-size:15px}
  #options,#rest-panel,#garage-panel {top:auto;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:min(76dvh,680px);margin:0;padding:22px 18px calc(var(--safe) + 18px);border-radius:24px 24px 0 0;background:#102c32fa;border:1px solid #ffffff30;box-shadow:0 -15px 55px #0004;overscroll-behavior:contain;touch-action:pan-y}
  #options .panel-close {float:right;position:sticky;top:0;min-width:54px;z-index:1}#options h2 {margin-top:8px}
  #options label {font-size:13px}#options input[type=range] {min-height:44px;touch-action:pan-x}
  #garage-panel .panel-title {position:sticky;top:-22px;background:#102c32;z-index:1;padding:12px 0}
  .fleet-card button {min-height:46px;font-size:12px}.fleet-info strong {font-size:12px}.fleet-info span {font-size:11px}
  body:has(#options:not([hidden]),#rest-panel:not([hidden]),#garage-panel:not([hidden]),#profile-panel:not([hidden])) :is(#quick,#action-dock,#joystick,#pedals,#autodrive-quick,#telemetry) {visibility:hidden;pointer-events:none}
  #shop-strip {bottom:calc(var(--safe) + 210px);max-width:calc(100vw - 24px);padding:12px;border-radius:18px}
  #interact {bottom:calc(var(--safe) + 210px);min-height:48px}
  #ride-request {top:calc(var(--hud-top) + 112px);right:var(--hud-right);max-width:calc(100vw - 24px);max-height:45dvh;overflow-y:auto;touch-action:pan-y}
  #journey-status {top:calc(var(--hud-top) + 54px);max-width:calc(100vw - 24px)}
}
@media (max-height:500px) and (orientation:landscape) {
  :root {--hud-top:calc(env(safe-area-inset-top,0px) + 54px)}
  header {padding-top:calc(env(safe-area-inset-top,0px) + 4px);min-height:48px;padding-bottom:4px}.place #world-time {display:block}
  header button {min-height:40px}.brand {font-size:21px}.brand span {display:none}
  #quick {left:max(145px,env(safe-area-inset-left));right:max(172px,env(safe-area-inset-right));gap:5px}
  #quick button {min-height:44px;font-size:11px;padding:6px}
  #autodrive-quick {left:max(145px,env(safe-area-inset-left));top:calc(var(--hud-top) + 51px)}
  #telemetry {top:calc(var(--hud-top) + 51px);right:max(172px,env(safe-area-inset-right))}
  #message {top:calc(var(--hud-top) + 105px);max-width:calc(100vw - 330px);font-size:10px}
  #vehicle-context {display:none}
  #action-dock,body.driving #action-dock,#action-dock:has(#sleep:not([hidden])) {left:max(145px,env(safe-area-inset-left));right:max(172px,env(safe-area-inset-right));bottom:var(--safe);width:auto;max-width:none;grid-template-columns:repeat(5,minmax(0,1fr));display:grid}
  #action-dock button,body.driving #action-dock button,#action-dock:has(#sleep:not([hidden])) button {width:100%;min-width:0;height:48px;font-size:9px}
  #action-dock[data-expanded=true],body.driving #action-dock[data-expanded=true] {bottom:var(--safe);max-height:calc(100dvh - 115px)}
  #options,#rest-panel,#garage-panel {left:auto;right:0;bottom:0;top:0;width:min(440px,70vw);max-height:100dvh;border-radius:20px 0 0 20px;padding-top:14px}
  #shop-strip {bottom:calc(var(--safe) + 58px);width:calc(100vw - 330px)}
  #interact {bottom:calc(var(--safe) + 58px)}
  #ride-request {top:62px;max-height:calc(100dvh - 84px);max-width:320px}
  #journey-status {top:calc(var(--hud-top) + 51px);max-width:calc(100vw - 330px)}
}

/* Three clear control groups. The original action dock is only a migration
   source for briefly cached documents; its controls live in these panels. */
body.hud-ready #action-dock {display:none!important}
body.hud-ready header #menu {display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
body.hud-ready:has(#motion-panel:not([hidden]),#vehicle-panel:not([hidden]),#window-panel:not([hidden]),#destination-panel:not([hidden]),#options:not([hidden])) #help {display:none}
#hud-categories {position:fixed;z-index:8;left:20px;bottom:var(--safe);display:flex;align-items:stretch;gap:5px;width:min(520px,calc(100vw - 300px));padding:6px;background:#102c32ee;border:1px solid #d4e7d52e;border-radius:18px;box-shadow:0 6px 24px #0003}
#hud-categories button {flex:1;min-width:0;min-height:54px;padding:6px 3px;border:0;background:transparent;font-size:11px;font-weight:600;white-space:normal;word-break:keep-all;line-height:1.3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
#hud-shortcuts {display:contents}
#hud-categories svg {width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#hud-shortcuts button[aria-pressed=true] {background:#d2e7bf;color:#193b30}
#hud-categories :is(#hud-vehicle,#hud-motion) {border-left:1px solid #e5f3e322}
#hud-settings {display:none!important}
#hud-categories button[aria-expanded=true] {background:#c9e4b7;color:#18362d;box-shadow:0 2px 8px #0002}
.hud-panel-heading {position:sticky;top:-18px;z-index:1;background:#102c32;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.hud-panel-heading h2 {font-size:17px;margin:0}
.hud-panel-heading button {min-height:44px;font-size:12px;padding:8px 12px}
.hud-panel-note {font-size:11px;color:#c6d7cd;line-height:1.6;margin:6px 0 14px}
.hud-action-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.hud-action-grid > button {width:100%;min-width:0;min-height:62px;padding:8px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:11px;white-space:normal;line-height:1.25;background:#244249c9;border-radius:14px}
.hud-action-grid svg {width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hud-action-grid [aria-pressed=true] {background:#c9e4b7;color:#173a2c;border-color:#e0efcf}
.hud-action-grid button[aria-disabled=true] {color:#9eafa9}
.hud-action-grid button.signal-pulse {color:#ffce70;background:#624218;border-color:#efba5c}
.hud-fleet-actions {display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.hud-fleet-actions > button {flex:1;min-height:46px;font-size:12px;white-space:nowrap}
body.hud-ready #auto-speed-setting {margin:14px 0 0;padding:12px}
#destination-panel #auto-destinations {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0}
#destination-panel #auto-destinations :is(h3,p) {grid-column:1/-1}
#destination-panel #auto-destinations button {min-height:88px;margin:0;padding:11px;font-size:11px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
#destination-panel #auto-destinations button::first-line {font-size:13px;font-weight:700}
#destination-panel #auto-destinations h3 {font-size:14px}
#destination-panel #auto-destination-status {margin:0 0 4px;font-size:11px}
#drive-mode-setting {display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:4px 0 12px}
#drive-mode-setting button {min-width:0;min-height:44px;font-size:12px;padding:9px 5px;word-break:keep-all}
#drive-mode-setting button[aria-pressed=true] {background:#c9e4b7;color:#173a2c;border-color:#deedce}
#drive-mode-help {font-size:12px;line-height:1.6;color:#c3d8cb;margin:8px 0}
#vehicle-comfort {margin-top:14px;border-top:1px solid var(--line);padding-top:8px}
#vehicle-comfort summary {min-height:44px;line-height:44px;font-size:13px;cursor:pointer;color:#d9e7d2}
#vehicle-comfort label {display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0;font-size:12px}
#vehicle-comfort input[type=range] {min-width:100px;flex:1;min-height:44px;accent-color:#c9e4b7}
#vehicle-comfort select {width:100%;min-height:44px;font-size:12px}
#vehicle-comfort button {min-height:44px;font-size:12px;margin:4px 0;width:100%}
#seat-map {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:340px;margin:12px auto;padding:14px;border:1px solid #cce3db36;border-radius:26px;background:#0b232a70}
#seat-map .seat-place {grid-column:span 2;display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:68px;min-width:0;margin:0;padding:8px 4px;border-radius:14px;white-space:normal;overflow-wrap:anywhere}
#seat-map .seat-driver {grid-column:1/4}
#seat-map .seat-front-passenger {grid-column:4/7}
#seat-map:not(:has(.seat-rear-center)) .seat-rear-left {grid-column:1/4}
#seat-map:not(:has(.seat-rear-center)) .seat-rear-right {grid-column:4/7}
#seat-map .seat-place strong {font-size:12px}
#seat-map .seat-place span {font-size:11px;color:#c1d3cf}
#seat-map .seat-place:disabled {opacity:1;color:#b6c9c4;background:#16353b;cursor:default}
#seat-map .seat-place[aria-pressed=true] {color:#183b30;background:#c9e4b7;border-color:#d8ebca}
#seat-map .seat-place[aria-pressed=true] span {color:#315344}
#seating #handover {width:100%;min-height:44px;margin:8px 0;background:#c9e4b7;color:#183b30}
#vehicle-panel > #return {width:100%;min-height:44px;margin-top:12px}
#wardrobe-shop {display:none}
#rest-panel.wardrobe-mode > :not(#wardrobe-shop) {display:none}
#rest-panel.wardrobe-mode > #wardrobe-shop {display:block}
#wardrobe-shop fieldset {display:flex;flex-wrap:wrap;gap:8px;border:0;border-top:1px solid #d7e9de26;margin:12px 0;padding:12px 0 0}
#wardrobe-shop legend {font-size:13px;color:#d8e8d9;padding-right:10px}
#wardrobe-shop fieldset button {min-height:44px;flex:1 0 40%;margin:0;font-size:12px;border-radius:14px;white-space:normal}
#wardrobe-shop button[style]::before {content:'';display:inline-block;width:12px;height:12px;margin-right:7px;border:1px solid #fff5;border-radius:50%;background:var(--swatch);vertical-align:middle}
#wardrobe-shop button[aria-pressed=true] {background:#c9e4b7;color:#183b30;border-color:#e1eed4}
body.hud-ready #options h2 {font-size:17px;margin:6px 0 18px}
body.hud-ready #help {bottom:calc(var(--safe) + 80px)}
body.hud-ready #quick {max-width:calc(100vw - 430px)}
body.hud-ready #quick button {font-size:12px;min-width:75px}
@media (pointer:coarse), (max-width:700px), (max-height:500px) and (orientation:landscape) {
  #hud-categories {left:var(--hud-left);right:var(--hud-right);bottom:calc(var(--safe) + 140px);width:auto;max-width:none;border-radius:16px}
  #hud-categories button {min-height:54px;font-size:10px;padding:6px 2px}
  body.hud-ready header #profile {margin-left:auto;max-width:58px}
  body.hud-ready header .place {position:absolute;left:var(--hud-left);top:calc(env(safe-area-inset-top,0px) + 41px);pointer-events:none}
  body.hud-ready header .brand span {display:none}
  body.hud-ready header #menu {padding:7px 9px}
  body.hud-ready #quick {max-width:none}
  body.hud-ready #quick button {min-width:0}
  .hud-action-grid > button {min-height:58px}
  body:has(#profile-panel:not([hidden]),#garage-panel:not([hidden]),#rest-panel:not([hidden])) #hud-categories {visibility:hidden;pointer-events:none}
}
@media (max-height:500px) and (orientation:landscape) {
  #hud-categories {left:max(145px,env(safe-area-inset-left));right:max(172px,env(safe-area-inset-right));bottom:var(--safe)}
  .hud-action-grid {grid-template-columns:repeat(5,minmax(0,1fr))}
  .hud-action-grid > button {min-height:48px;font-size:10px}
  .hud-panel-note {margin-bottom:8px}
}
#nature-state {font-size:11px;line-height:1.5;color:#bdcfc8}
#nature-credit {display:inline-block;margin:0 0 14px;color:#b8d9bf;font-size:11px}
#together-controls {border-top:1px solid #ffffff25;margin-top:16px;padding-top:12px}
#together-controls h3 {margin:0 0 8px;font-size:14px}
#together-controls label {display:flex;align-items:center;gap:10px;font-size:12px}
#together-controls select {min-width:0;flex:1;min-height:44px;max-width:100%}
.together-buttons {display:flex;gap:8px;margin:10px 0}
.together-buttons button {flex:1;min-width:0;min-height:44px;padding:10px;font-size:12px}
#together-request {position:fixed;z-index:9;right:20px;top:110px;width:min(320px,calc(100vw - 40px));padding:16px;background:#173a40f5;border:1px solid #d5e9c855;border-radius:18px;box-shadow:0 10px 35px #0004;backdrop-filter:blur(12px)}
#together-request p {font-size:12px;color:#d0dcd0;margin:8px 0}
#together-request.stacked {top:300px}
@media(max-width:760px){#together-request{top:100px;right:var(--hud-right);width:min(320px,calc(100vw - 28px));padding:12px}#together-request.stacked{top:260px}}
.fleet-family {grid-column:1/-1;font-size:14px;margin:14px 0 2px;color:#d5e8c9;letter-spacing:.06em}
#refreshment-pocket {position:fixed;left:20px;bottom:calc(var(--safe) + 82px);z-index:8;display:flex;gap:6px;max-width:calc(100vw - 40px);padding:5px;background:#16382fee;border:1px solid #c6d9bc55;border-radius:15px}
#refreshment-pocket[hidden],#refreshment-pocket button[hidden] {display:none}
#refreshment-pocket button {display:flex;align-items:center;gap:6px;min-height:44px;padding:7px 12px;font-size:12px}
#refreshment-pocket svg {width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
body:has(#profile-panel:not([hidden]),#garage-panel:not([hidden]),#rest-panel:not([hidden]),#motion-panel:not([hidden]),#vehicle-panel:not([hidden]),#window-panel:not([hidden]),#options:not([hidden])) #refreshment-pocket {visibility:hidden;pointer-events:none}
@media(max-width:760px){
 #refreshment-pocket {left:var(--hud-left);right:var(--hud-right);bottom:calc(var(--safe) + 210px);justify-content:center;max-width:none;overflow-x:auto}
 #refreshment-pocket button {flex:1;min-width:0;padding:6px;font-size:10px}
 body:has(#refreshment-pocket:not([hidden])) #shop-strip {bottom:calc(var(--safe) + 266px)}
}
@media(max-height:500px) and (orientation:landscape){
 #refreshment-pocket {left:max(145px,env(safe-area-inset-left));right:max(172px,env(safe-area-inset-right));bottom:calc(var(--safe) + 76px)}
 body:has(#refreshment-pocket:not([hidden])) #shop-strip {bottom:calc(var(--safe) + 132px)}
}

.window-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.window-grid button {min-height:62px;margin:0;padding:10px;line-height:1.5}
.window-grid button[aria-pressed="true"] {background:#32685b;border-color:#a8dcc1}
.window-grid button:disabled {opacity:.45}
.window-all {display:flex;gap:8px;margin-top:12px}
.window-all button {flex:1;min-height:44px;margin:0}

/* Keep driving input out of a scenic ride; manual mode is one tap away. */
@media (pointer:coarse), (max-width:700px) {
  body.autodriving :is(#joystick,#pedals) {display:none!important}
  body.autodriving #hud-categories {bottom:var(--safe)}
}
/* A short Safari viewport gets one header row, one small icon toolbar and
   separate corner controls. Every interactive target remains at least 44px. */
body.hud-landscape {--safe:max(6px,env(safe-area-inset-bottom))}
body.hud-landscape header {min-height:54px;padding-top:calc(env(safe-area-inset-top,0px) + 6px);padding-bottom:4px;gap:5px}
body.hud-landscape header .brand {font-size:19px}
body.hud-landscape header .place,body.hud-landscape header .brand span {display:none}
body.hud-landscape header button {min-height:44px;padding:6px 8px}
body.hud-landscape header #profile {max-width:52px}
body.hud-ready.hud-landscape #quick {top:calc(env(safe-area-inset-top,0px) + 6px);left:calc(var(--hud-left) + 60px);right:calc(var(--hud-right) + 180px);max-width:380px;gap:4px;bottom:auto}
body.hud-ready.hud-landscape #quick button {min-height:44px;min-width:0;font-size:11px;padding:5px 6px;white-space:nowrap}
body.hud-landscape #vehicle-context {display:none}
body.hud-landscape #hud-categories {left:50%;right:auto;bottom:var(--safe);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 248px);padding:4px;gap:4px;border-radius:14px}
body.hud-landscape #hud-categories button {position:relative;flex:0 0 44px;width:44px;min-width:44px;min-height:44px;height:44px;padding:4px;gap:0}
body.hud-landscape #hud-categories button span {position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.hud-landscape #hud-categories svg {width:22px;height:22px}
body.hud-landscape #joystick {left:var(--hud-left);bottom:calc(var(--safe) + 4px);width:92px;height:92px}
body.hud-landscape #stick {width:40px;height:40px;left:26px;top:26px}
body.hud-landscape #joystick span {display:none}
body.hud-landscape.driving #pedals {right:var(--hud-right);bottom:var(--safe);width:128px;grid-template-columns:58px 64px;grid-template-rows:44px 62px;gap:6px}
body.hud-landscape #pedals button {font-size:11px;border-radius:13px;min-height:44px}
body.hud-landscape #pedals button[data-key=accelerate] {font-size:13px}
body.hud-landscape #telemetry {top:auto;right:var(--hud-right);bottom:calc(var(--safe) + 124px);width:64px;padding:5px;border-radius:12px}
body.hud-landscape #speed {font-size:23px}
body.hud-landscape #mode {font-size:8px;max-width:58px}
body.hud-landscape #autodrive-quick {top:auto;left:auto;right:var(--hud-right);bottom:var(--safe);max-width:260px;padding:4px;gap:2px}
body.hud-landscape #autodrive-quick button {width:44px;min-width:44px;min-height:44px;height:44px}
body.hud-landscape #autodrive-quick #auto-choose {width:48px;min-width:48px;padding:0 3px;font-size:10px}
body.hud-landscape #auto-target {min-width:78px;max-width:92px;font-size:11px;white-space:nowrap}
body.hud-landscape.autodriving :is(#joystick,#pedals) {display:none!important}
body.hud-landscape.autodriving #hud-categories {left:var(--hud-left);transform:none;max-width:none}
body.hud-landscape.autodriving #telemetry {bottom:calc(var(--safe) + 62px)}
body.hud-landscape #message {top:calc(env(safe-area-inset-top,0px) + 58px);font-size:10px;max-width:calc(100vw - 300px)}
body.hud-landscape:has(#motion-panel:not([hidden]),#vehicle-panel:not([hidden]),#destination-panel:not([hidden]),#window-panel:not([hidden]),#options:not([hidden])) :is(#quick,#joystick,#pedals,#telemetry,#autodrive-quick) {visibility:hidden;pointer-events:none}
@media (pointer:coarse), (max-width:700px), (max-height:600px) and (orientation:landscape) {
  body.hud-ready :is(#motion-panel,#vehicle-panel,#destination-panel,#window-panel,#options,#together-request) {backdrop-filter:none}
}
/* Photo controls stay outside the WebGL canvas and never enter the saved image. */
#hud-photo {border-left:1px solid #e5f3e322!important}
body.photo-mode > :not(canvas):not(#photo-root) {display:none!important}
body.photo-mode canvas {cursor:grab}
#photo-root {position:fixed;inset:0;z-index:120;pointer-events:none;--photo-safe:max(12px,env(safe-area-inset-bottom,0px))}
#photo-root button,#photo-root select,#photo-root input,#photo-root a {pointer-events:auto;min-height:44px;touch-action:manipulation}
#photo-root button {border:1px solid #ffffff45;border-radius:14px;background:#15343bea;color:#f3f6ef;padding:8px 14px;cursor:pointer}
#photo-top {position:absolute;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));display:flex;gap:12px;align-items:center;text-shadow:0 1px 6px #000}
#photo-title {font-size:17px}#photo-hint {font-size:12px;flex:1}#photo-close {margin-left:auto}
#photo-guides {position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(33.333% - .5px),#ffffff28 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#ffffff28 66.666%,transparent calc(66.666% + .5px)),linear-gradient(0deg,transparent calc(33.333% - .5px),#ffffff28 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#ffffff28 66.666%,transparent calc(66.666% + .5px))}
#photo-countdown {position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:72px;font-weight:700;text-shadow:0 3px 18px #000}
#photo-status {position:absolute;top:64px;left:50%;transform:translateX(-50%);max-width:calc(100% - 28px);margin:0;padding:8px 12px;border-radius:12px;background:#102b31de;font-size:12px;text-align:center}
#photo-status:empty {display:none}
#photo-actions {position:absolute;bottom:var(--photo-safe);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px;background:#102b31e8;border:1px solid #ffffff35;border-radius:22px;pointer-events:auto}
#photo-root #photo-shutter {width:68px;height:68px;min-width:68px;border-radius:50%;border:4px solid #edf4e7;background:#c9e4b7;color:#17342e;font-weight:750;box-shadow:inset 0 0 0 3px #17342e;margin:0 5px;padding:0;white-space:nowrap;line-height:1}
#photo-timer-label {display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:#d9e7d5}
#photo-timer {width:64px;padding:4px;border:1px solid #ffffff35;border-radius:10px;background:#17353b;color:white}
#photo-settings {position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--photo-safe) + 100px);width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 174px - var(--photo-safe));overflow-y:auto;pointer-events:auto;touch-action:pan-y;background:#102b31f5;border:1px solid #ffffff35;border-radius:18px;padding:12px 16px;box-shadow:0 5px 25px #0005}
#photo-settings > label {display:grid;grid-template-columns:48px 1fr 45px;align-items:center;gap:8px;min-height:44px;margin:0;font-size:12px}
#photo-settings input[type=range] {width:100%;min-width:0;margin:0;accent-color:#c9e4b7;touch-action:pan-x}
#photo-settings output {font-size:11px;text-align:right;font-variant-numeric:tabular-nums}
#photo-checks {display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;border-top:1px solid #ffffff25;padding-top:6px}
#photo-checks label {display:flex;align-items:center;gap:6px;min-height:44px;margin:0;font-size:12px}
#photo-checks input {width:18px;min-height:18px;accent-color:#c9e4b7;cursor:pointer}
#photo-quality-note {font-size:11px;color:#c2d1c6;margin:8px 0 0}
#photo-preview {position:absolute;inset:0;padding:12px;display:flex;align-items:center;justify-content:center;background:#061319bd;pointer-events:auto}
#photo-preview-card {width:min(960px,100%);max-height:100%;overflow:auto;touch-action:pan-y;padding:16px;border:1px solid #d4e7d53a;border-radius:20px;background:#102b31;box-shadow:0 15px 60px #0007}
#photo-preview h2 {font-size:17px;margin:0 0 12px}
#photo-image {display:block;width:100%;max-height:calc(100dvh - 208px);object-fit:contain;background:#07191e;border-radius:10px}
#photo-result-info {margin:8px 0;font-size:12px;color:#d1e0d0}
#photo-preview-actions {display:flex;gap:8px}#photo-preview-actions button {flex:1}
#photo-root #photo-save {background:#c9e4b7;color:#17342e;font-weight:700}
#photo-credits {display:inline-block;font-size:11px;line-height:44px;color:#c8dbbf}
@media (max-width:600px) {
 #photo-hint {display:none}#photo-actions {gap:4px;padding:6px;width:max-content;max-width:calc(100vw - 16px)}
 #photo-actions button {padding:6px 10px;font-size:12px}#photo-root #photo-shutter {width:60px;min-width:60px;height:60px;margin:0 2px}
 #photo-timer {width:58px}#photo-top {gap:8px}#photo-title {font-size:15px}#photo-close {font-size:12px}
 #photo-preview-card {padding:12px}#photo-preview h2 {margin-bottom:8px;font-size:15px}
}
@media (max-height:420px) and (orientation:landscape) {
 #photo-top {top:max(6px,env(safe-area-inset-top))}#photo-hint {font-size:10px}
 #photo-root #photo-shutter {width:52px;height:52px;min-width:52px}#photo-actions {padding:4px;gap:6px}
 #photo-settings {bottom:calc(var(--photo-safe) + 72px);max-height:calc(100dvh - 130px - var(--photo-safe));padding:8px 12px}
 #photo-image {max-height:calc(100dvh - 164px)}#photo-preview-card {padding:10px}#photo-preview h2 {font-size:14px;margin:0 0 6px}
 #photo-result-info {margin:4px 0;font-size:10px}#photo-credits {min-height:26px;line-height:26px}
 #photo-status {top:52px;font-size:10px}
}
@media (max-width:359px) {
 #hud-categories {gap:4px;padding:4px}#hud-categories #hud-photo {display:none}
}

/* Driver controls stay in view. Keep the original buttons/authority handlers. */
#driving-dock {position:fixed;z-index:8;left:20px;bottom:calc(var(--safe) + 72px);width:min(820px,calc(100vw - 160px));display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;padding:6px;border:1px solid #d4e7d52e;border-radius:18px;background:#102c32ed;box-shadow:0 6px 24px #0003}
#driving-dock button {min-width:0;min-height:52px;margin:0;padding:5px 2px;border:0;border-radius:11px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;line-height:1.3;white-space:normal;word-break:keep-all;touch-action:manipulation}
#driving-dock svg {flex-shrink:0;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#driving-dock button[aria-pressed=true] {background:#c9e4b7;color:#173a2c}
#driving-dock button.signal-pulse {background:#624218;color:#ffce70}
body.driving #hud-categories {width:210px}
body:has(#profile-panel:not([hidden]),#garage-panel:not([hidden]),#rest-panel:not([hidden]),#motion-panel:not([hidden]),#vehicle-panel:not([hidden]),#destination-panel:not([hidden]),#window-panel:not([hidden]),#options:not([hidden])) #driving-dock {visibility:hidden;pointer-events:none}
#steering-dial,#steering-caption {display:none}
body.driving #joystick {width:128px;height:128px;border:0;background:transparent;box-shadow:none;bottom:calc(var(--safe) + 18px);user-select:none;-webkit-user-select:none}
body.driving #joystick #stick,body.driving #joystick > span:not(#steering-caption) {display:none}
body.driving #steering-dial {display:block;position:absolute;inset:0;pointer-events:none;transform-origin:50% 50%}
#steering-dial svg {display:block;width:100%;height:100%}
#steering-dial .wheel-rim {fill:#102b3140;stroke:#dde6df;stroke-width:10}
#steering-dial .wheel-spoke {fill:none;stroke:#6f898e;stroke-width:10;stroke-linecap:round}
#steering-dial .wheel-hub {fill:#18363e;stroke:#c0ceca;stroke-width:2}
#steering-dial .wheel-center {fill:none;stroke:#c9e4b7;stroke-width:5;stroke-linecap:round}
body.driving #joystick #steering-caption {display:block;position:absolute;top:auto;bottom:-14px;left:0;width:100%;font-size:10px;line-height:12px;color:#f0f6ef;text-shadow:0 1px 4px #000;pointer-events:none}
@media (pointer:coarse), (max-width:700px), (max-height:600px) and (orientation:landscape) {
  body.driving #driving-dock {left:var(--hud-left);right:var(--hud-right);bottom:calc(var(--safe) + 168px);width:auto;grid-template-columns:repeat(5,minmax(0,1fr));padding:4px;border-radius:16px}
  #driving-dock button {min-height:46px;font-size:10px;gap:2px}
  body.driving #hud-categories {left:50%;right:auto;transform:translateX(-50%);bottom:calc(var(--safe) + 276px);width:152px;max-width:none;padding:4px;gap:4px}
  body.driving #hud-categories button {flex:1;min-width:44px;min-height:44px;font-size:10px}
  body.driving.autodriving #driving-dock {bottom:calc(var(--safe) + 64px)}
  body.driving.autodriving #hud-categories {left:var(--hud-left);right:auto;bottom:var(--safe);transform:none}
}
body.driving.hud-landscape #joystick {display:block;left:var(--hud-left);bottom:calc(var(--safe) + 4px);width:112px;height:112px}
body.driving.hud-landscape #joystick #steering-caption {display:none}
body.driving.hud-landscape #driving-dock {left:calc(var(--hud-left) + 124px);right:calc(var(--hud-right) + 140px);bottom:var(--safe);width:auto;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));padding:4px}
body.driving.hud-landscape #driving-dock button {min-height:50px;height:50px;padding:3px 2px;font-size:9px}
body.driving.hud-landscape #driving-dock svg {width:20px;height:20px}
body.driving.hud-landscape #hud-categories {left:var(--hud-left);right:auto;bottom:calc(var(--safe) + 128px);transform:none;width:148px;padding:4px;gap:4px;max-width:none}
body.driving.hud-landscape #hud-categories button {flex:0 0 44px;min-height:50px;height:50px;gap:2px}
body.driving.hud-landscape #hud-categories button span {position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;font-size:9px}
body.driving.hud-landscape.autodriving #driving-dock {left:var(--hud-left);right:var(--hud-right);bottom:calc(var(--safe) + 62px);grid-template-columns:repeat(10,minmax(44px,1fr))}
body.driving.hud-landscape.autodriving #hud-categories {bottom:var(--safe)}
@media (max-width:600px) and (orientation:landscape) {
  body.driving.hud-landscape #hud-categories {bottom:calc(var(--safe) + 166px)}
  body.driving.hud-landscape.autodriving #driving-dock {grid-template-columns:repeat(auto-fit,minmax(44px,1fr))}
}
/* Compact mobile driving: keep the road clear, preserve the real control nodes. */
body.cockpit-steering #joystick {display:none!important}
#walk-controls {display:none;position:fixed;z-index:5;right:var(--hud-right,16px);bottom:calc(var(--safe) + 18px);gap:8px;touch-action:none}
body.hud-mobile:not(.riding):not(.driving) #walk-controls:not([hidden]) {display:flex}
#walk-controls button {width:64px;height:64px;min-height:44px;padding:6px;font-size:12px;font-weight:650;border-radius:20px;background:#183a40d9;border:1px solid #e4f0d64d;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#walk-run[aria-pressed=true] {background:#bbd7a9;color:#183226}
#walk-controls #walk-jump {background:#b7d0b7e8;color:#173129}
body.hud-landscape #walk-controls {bottom:calc(var(--safe) + 4px);gap:6px}
body.hud-landscape #walk-controls button {width:58px;height:58px;border-radius:18px}
body.photo-mode #walk-controls,body:has(#channel-panel:not([hidden]),#profile-panel:not([hidden]),#garage-panel:not([hidden]),#rest-panel:not([hidden]),#options:not([hidden]),#vehicle-panel:not([hidden]),#motion-panel:not([hidden]),#destination-panel:not([hidden]),#window-panel:not([hidden])) #walk-controls {visibility:hidden;pointer-events:none}
#cockpit-wheel-target {position:fixed;z-index:2;pointer-events:none;border:1px solid transparent;border-radius:50%}
#cockpit-wheel-target[data-grabbed=true] {border-color:#d6ebc46b;background:#c9e4b70a}
body.cockpit-steering canvas {cursor:grab}
body.cockpit-steering:has(#cockpit-wheel-target[data-grabbed=true]) canvas {cursor:grabbing}
body.hud-mobile.driving {--safe:max(10px,env(safe-area-inset-bottom,0px))}
body.hud-mobile.driving header {min-height:52px;padding-top:calc(env(safe-area-inset-top,0px) + 4px);padding-bottom:4px;background:linear-gradient(#10262fb0,transparent)}
body.hud-mobile.driving header .brand {font-size:21px}
body.hud-mobile.driving header .place {display:none}
body.hud-mobile.driving header button {height:44px;min-height:44px;padding:5px 8px;border-radius:12px}
body.hud-ready.hud-mobile.driving #quick {top:calc(env(safe-area-inset-top,0px) + 58px);left:auto;right:var(--hud-right);bottom:auto;transform:none;width:max-content;max-width:calc(100vw - 100px);gap:4px}
body.hud-ready.hud-mobile.driving #quick button {flex:0 1 auto;min-width:48px;min-height:44px;height:44px;padding:5px 9px;font-size:11px;white-space:nowrap;border-radius:12px}
body.hud-mobile.driving #telemetry {top:calc(env(safe-area-inset-top,0px) + 58px);left:var(--hud-left);right:auto;bottom:auto;width:74px;min-width:0;padding:3px 5px;border:0;background:#102b3066;box-shadow:none;border-radius:10px}
body.hud-mobile.driving #speed {font-size:23px}
body.hud-mobile.driving #mode {font-size:8px;line-height:1.2;max-width:68px}
body.hud-mobile.driving #telemetry span {font-size:8px}
body.hud-mobile.driving #joystick {width:112px;height:112px;left:var(--hud-left);bottom:calc(var(--safe) + 2px);opacity:.8}
body.hud-mobile.driving #joystick #steering-caption {display:none}
body.hud-mobile.driving #pedals {right:var(--hud-right);bottom:var(--safe);width:134px;grid-template-columns:60px 68px;grid-template-rows:44px 62px;gap:6px}
body.hud-mobile.driving #pedals button {min-height:44px;font-size:11px;border-radius:14px}
body.hud-mobile.driving #pedals button[data-key=accelerate] {font-size:13px}
body.hud-mobile.driving #driving-dock {left:auto;right:var(--hud-right);bottom:calc(var(--safe) + 124px);width:192px;max-width:calc(100vw - 24px);grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:3px;border-radius:15px;background:#102c32b8;box-shadow:none}
body.hud-mobile.driving #driving-dock button {height:44px;min-height:44px;padding:4px;gap:0}
body.hud-mobile.driving #driving-dock svg {width:22px;height:22px}
body.hud-mobile.driving #driving-dock button span {position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.hud-mobile.driving #drive-more {border-left:1px solid #e5f3e32e}
body.hud-ready.hud-mobile.driving #hud-categories {position:static;left:auto;right:auto;bottom:auto;transform:none;display:flex;gap:6px;width:auto;max-width:none;padding:0;margin:8px 0 12px;background:transparent;border:0;box-shadow:none}
body.hud-mobile.driving #hud-categories #hud-vehicle {display:none}
body.hud-mobile.driving #hud-categories #hud-photo {display:flex}
body.hud-mobile.driving #hud-categories button {flex:1;min-width:44px;min-height:44px;height:44px;flex-direction:row;gap:7px;font-size:11px;background:#244249c9;border-radius:12px}
body.hud-mobile.driving #hud-categories button span {position:static;width:auto;height:auto;margin:0;clip-path:none;overflow:visible;font-size:11px}
body.hud-mobile.driving .hud-panel-heading {top:-14px}
body.hud-mobile.driving .hud-panel-note {margin:6px 0 10px}
body.hud-mobile.driving .hud-action-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
body.hud-mobile.driving .hud-action-grid > button {min-height:54px;padding:6px 3px}
body.hud-mobile.driving #vehicle-comfort {margin-top:12px}
body.hud-mobile.driving:has(#vehicle-panel:not([hidden]),#motion-panel:not([hidden]),#window-panel:not([hidden]),#destination-panel:not([hidden]),#options:not([hidden])) :is(#quick,#joystick,#pedals,#telemetry,#autodrive-quick) {visibility:hidden;pointer-events:none}
body.hud-mobile.driving #autodrive-quick {top:calc(env(safe-area-inset-top,0px) + 110px);left:var(--hud-left);right:auto;bottom:auto;max-width:calc(100vw - 24px);padding:2px;font-size:10px;background:#102c32b8}
body.hud-mobile.driving #auto-target {font-size:10px;min-width:0;max-width:180px}
body.hud-mobile.driving #message {top:calc(env(safe-area-inset-top,0px) + 165px)}
body.hud-mobile.driving.autodriving #driving-dock {left:auto;right:var(--hud-right);bottom:var(--safe);width:192px;grid-template-columns:repeat(4,minmax(0,1fr))}
body.hud-ready.hud-mobile.driving.hud-landscape #quick {top:calc(env(safe-area-inset-top,0px) + 5px);left:calc(var(--hud-left) + 50px);right:auto;max-width:calc(100vw - 238px)}
body.hud-mobile.driving.hud-landscape #telemetry {top:calc(env(safe-area-inset-top,0px) + 56px)}
body.hud-mobile.driving.hud-landscape #driving-dock {bottom:var(--safe);left:50%;right:auto;transform:translateX(-50%);width:192px}
body.hud-mobile.driving.hud-landscape #autodrive-quick {top:calc(env(safe-area-inset-top,0px) + 56px);left:auto;right:var(--hud-right);max-width:calc(100vw - 115px)}
@media (max-width:359px) {
 body.hud-mobile.driving #joystick {width:100px;height:100px}
 body.hud-mobile.driving #driving-dock {width:184px}
 body.hud-mobile.driving #pedals {width:126px;grid-template-columns:56px 64px}
}
/* The real rim must stay clear of the vehicle shortcut strip. */
body.cockpit-steering.hud-mobile.driving #driving-dock {left:var(--hud-left);right:auto;bottom:var(--safe);transform:none}
@media (max-width:359px) {
 body.cockpit-steering.hud-mobile.driving #driving-dock {width:98px;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:375px) {
 body.hud-ready header {gap:4px;padding-left:12px;padding-right:12px}
 body.hud-ready header .brand {font-size:19px}
 body.hud-ready header #profile {max-width:42px;padding-left:6px;padding-right:6px}
 body.hud-ready header #rest-menu {padding-left:7px;padding-right:7px}
}

/* Persistent operations notices do not compete with camera/seat hints. */
#service-notices {position:fixed;z-index:8;top:96px;left:50%;transform:translateX(-50%);width:min(620px,calc(100vw - 32px));display:flex;flex-direction:column;gap:8px;max-height:min(45dvh,380px);overflow:auto;pointer-events:none;scrollbar-width:thin}
#service-notices:not(:has(.service-notice:not([hidden]):not(.collapsed))) {flex-direction:row;justify-content:center}
.service-notice {position:relative;padding:14px 84px 14px 18px;border:1px solid #b7d6cc;border-left:5px solid #bad99b;border-radius:14px;background:#112c30f5;color:#f5f6ee;box-shadow:0 7px 26px #0004;pointer-events:auto;overflow-wrap:anywhere}
.service-notice strong {font-size:14px;letter-spacing:.04em;color:#cce6b1}
.service-notice p {margin:7px 0 0;font-size:14px;line-height:1.65;white-space:pre-wrap}
.service-notice.maintenance {border-color:#d4b47b;border-left-color:#f0c875;background:#382d1ff5}
.service-notice.maintenance strong {color:#ffe2a1}
.service-notice-toggle {position:absolute;right:9px;top:9px;min-width:58px;min-height:44px;padding:7px 10px;font-size:12px;border:1px solid #ffffff40;background:#ffffff12;color:#fff;border-radius:10px}
.service-notice.collapsed {align-self:center;padding:11px 84px 11px 15px;min-height:48px;max-width:100%;border-radius:25px}
.service-notice.collapsed .service-notice-toggle {top:2px;right:3px;border-radius:24px}
#message[data-kind="operation"] {z-index:9;background:#e5edcf;color:#18302a;border:2px solid #b5ce91;border-radius:14px;box-shadow:0 6px 24px #0005;font-size:14px;line-height:1.65;padding:13px 20px;max-width:min(620px,calc(100vw - 32px));top:auto;bottom:calc(var(--safe,24px) + 100px)}
body.hud-mobile #service-notices {top:calc(var(--hud-top,env(safe-area-inset-top,0px)) + 124px);width:calc(100vw - 24px);max-height:40dvh}
body.hud-mobile .service-notice {padding:11px 73px 11px 13px}
body.hud-mobile .service-notice p {font-size:13px;line-height:1.6}
body.hud-mobile .service-notice-toggle {right:6px;top:6px;min-width:54px}
body.hud-mobile .service-notice.collapsed {padding-right:74px}
body.hud-mobile.driving #service-notices {top:calc(env(safe-area-inset-top,0px) + 164px)}
body.hud-mobile #message[data-kind="operation"] {top:auto;bottom:calc(var(--safe,20px) + 172px);font-size:13px;padding:11px 15px}
body.hud-mobile.hud-landscape #service-notices,body.hud-mobile.driving.hud-landscape #service-notices {top:calc(env(safe-area-inset-top,0px) + 60px);width:min(500px,calc(100vw - 260px));max-height:48dvh}
body.hud-landscape #message[data-kind="operation"] {top:auto;bottom:calc(var(--safe,12px) + 100px);max-width:calc(100vw - 280px);font-size:12px}
body.photo-mode #service-notices {display:none}

/* Context actions stay within thumb reach without opening a sheet. */
#social-quick {position:fixed;z-index:8;left:20px;bottom:calc(var(--safe) + 82px);display:flex;align-items:center;gap:4px;padding:4px;border:1px solid #d4e7d52e;border-radius:15px;background:#102c32d9;max-width:calc(100vw - 40px)}
#social-quick:not(:has(button:not([hidden]))) {display:none}
#social-quick button {min-width:52px;min-height:44px;padding:5px 8px;border:0;border-radius:11px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:11px;background:transparent}
#social-quick svg {width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#social-quick button[aria-pressed=true] {background:#c9e4b7;color:#18362d}
#together-quick-name {position:absolute;right:0;bottom:calc(100% + 5px);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 9px;border-radius:9px;background:#102c32e8;font-size:11px}
#action-scene-stop {order:10}
body:has(#motion-panel:not([hidden]),#vehicle-panel:not([hidden]),#window-panel:not([hidden]),#destination-panel:not([hidden]),#options:not([hidden]),#garage-panel:not([hidden]),#rest-panel:not([hidden]),#profile-panel:not([hidden]),#channel-panel:not([hidden])) #social-quick {visibility:hidden;pointer-events:none}
body.hud-mobile:not(.driving) #hud-categories {left:var(--hud-left);right:auto;bottom:calc(var(--safe) + 128px);transform:none;width:max-content;max-width:52vw;padding:3px;gap:0;border-radius:15px;box-shadow:none;background:#102c32b8}
body.hud-mobile:not(.driving) #hud-categories button {position:relative;flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;padding:3px;gap:0}
body.hud-mobile:not(.driving) #hud-categories button span {position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.hud-mobile #social-quick {left:auto;right:var(--hud-right);bottom:calc(var(--safe) + 128px);max-width:44vw;padding:3px;gap:0;background:#102c32b8}
body.hud-mobile #social-quick button {min-width:44px;min-height:44px;padding:3px 5px;font-size:10px}
body.hud-mobile #social-quick #roof-cheer {min-width:46px}
body.hud-mobile.driving #social-quick {bottom:calc(var(--safe) + 182px)}
body.hud-mobile.driving.autodriving #social-quick {bottom:calc(var(--safe) + 62px)}
body.hud-mobile.riding:not(.driving) #social-quick {bottom:var(--safe)}
body.hud-mobile.hud-landscape:not(.driving) #hud-categories {bottom:var(--safe);left:calc(var(--hud-left) + 108px);max-width:230px}
body.hud-mobile.hud-landscape #social-quick {bottom:calc(var(--safe) + 60px);right:var(--hud-right);max-width:230px}
body.hud-mobile.driving.hud-landscape #social-quick {left:50%;right:auto;transform:translateX(-50%);bottom:calc(var(--safe) + 60px)}
.service-notice,.service-notice.collapsed,body.hud-mobile .service-notice,body.hud-mobile .service-notice.collapsed {padding:10px 12px}
.service-notice-heading {display:flex;align-items:center;justify-content:space-between;gap:12px}
.service-notice-controls {display:flex;gap:4px;flex:none}
.service-notice-controls button,body.hud-mobile .service-notice-controls button,.service-notice.collapsed .service-notice-controls button {position:static;min-width:44px;min-height:44px;padding:6px 8px;border:1px solid #ffffff35;background:#ffffff12;color:#fff;border-radius:10px;font-size:12px}
.service-notice-controls .service-notice-dismiss {background:#ffffff08}
.service-notice-apply {margin-top:10px;min-height:44px;padding:9px 14px;border:1px solid #ffffff50;background:#ffffff18;color:#fff;border-radius:11px}
.service-notice-apply:disabled {opacity:.55;cursor:default}
.service-notice.collapsed .service-notice-apply {display:none}
body.hud-mobile:not(.driving) header {min-height:52px;padding-top:calc(env(safe-area-inset-top,0px) + 4px);padding-bottom:4px;background:linear-gradient(#10262fb0,transparent)}
body.hud-mobile:not(.driving) header .brand {font-size:21px}
body.hud-mobile:not(.driving) header button {height:44px;min-height:44px;padding:5px 8px;border-radius:12px}
body.hud-ready.hud-mobile:not(.driving):not(.hud-landscape) #quick {top:calc(env(safe-area-inset-top,0px) + 58px);left:auto;right:var(--hud-right);bottom:auto;transform:none;width:max-content;max-width:calc(100vw - 100px);gap:4px}
body.hud-mobile:not(.driving) #quick button {flex:0 1 auto;min-width:48px;min-height:44px;height:44px;padding:5px 9px;font-size:11px;white-space:nowrap;border-radius:12px}
body.hud-mobile #vehicle-context {display:none}
body.hud-mobile:not(.driving) #message {top:calc(env(safe-area-inset-top,0px) + 112px);font-size:12px}
body.hud-mobile:not(.driving).hud-landscape #message {top:calc(env(safe-area-inset-top,0px) + 58px)}

/* The windshield is the primary surface in a mobile cockpit. Session/trip
   controls keep their original handlers inside the existing sheets. */
body.hud-mobile.cockpit-compact header {position:fixed;left:auto;right:var(--hud-right);top:env(safe-area-inset-top,0px);width:auto;min-height:0;padding:5px 0;background:none;pointer-events:none}
body.hud-mobile.cockpit-compact header > :not(#menu) {display:none}
body.hud-mobile.cockpit-compact header #menu {pointer-events:auto;width:44px;min-width:44px;height:44px;padding:4px;font-size:10px;background:#102c326b;border:1px solid #e4f0d625}
html[lang="en"] header .brand {white-space:nowrap}
html[lang="en"] header .brand span {display:none}
html[lang="en"] body.hud-mobile header .brand {flex:none;font-size:17px}
@media (max-width:360px) {
  html[lang="en"] body.hud-mobile header .brand {font-size:14px}
  html[lang="en"] body.hud-mobile header #menu {padding-inline:6px}
}
body.hud-ready.hud-mobile.cockpit-compact #quick,body.hud-ready.hud-mobile.cockpit-compact.hud-landscape #quick {top:calc(env(safe-area-inset-top,0px) + 5px);left:var(--hud-left);right:auto;bottom:auto;transform:none;width:max-content;max-width:120px;gap:4px}
body.hud-mobile.cockpit-compact #quick button {min-width:44px;min-height:44px;height:44px;padding:4px 7px;font-size:10px;background:#102c326b;border:1px solid #e4f0d625}
body.hud-mobile.cockpit-compact #telemetry,body.hud-mobile.cockpit-compact.hud-landscape #telemetry {top:calc(env(safe-area-inset-top,0px) + 5px);left:50%;right:auto;bottom:auto;transform:translateX(-50%);width:auto;min-width:46px;padding:2px 7px;background:transparent;text-shadow:0 1px 4px #000}
body.hud-mobile.cockpit-compact #telemetry #mode {display:none}
body.hud-mobile.cockpit-compact #speed {font-size:21px}
body.hud-mobile.cockpit-compact #driving-dock {background:#102c3280;border-color:#e4f0d625}
body.hud-mobile.cockpit-compact #pedals button {background:#183a408c;border:1px solid #e4f0d63d}
body.hud-mobile.cockpit-compact #pedals button[data-key=accelerate] {background:#b4d2a09c;color:#132a24}
body.hud-mobile.cockpit-compact #pedals button[data-key=brake] {background:#784f5399;color:#fff}
#cockpit-trip-actions,#cockpit-session-actions {display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
#cockpit-trip-actions > button,#cockpit-session-actions > button {flex:1;min-width:70px;min-height:44px;font-size:12px}
body.hud-mobile.cockpit-compact #cockpit-trip-actions #autodrive-quick,body.hud-mobile.cockpit-compact.hud-landscape #cockpit-trip-actions #autodrive-quick {position:static;inset:auto;transform:none;flex:1 0 100%;width:100%;max-width:none;background:#102c32b8}
body.hud-mobile.cockpit-compact #service-notices {top:calc(env(safe-area-inset-top,0px) + 58px)}
body.hud-mobile.cockpit-compact #message:not([data-kind=operation]) {top:calc(env(safe-area-inset-top,0px) + 58px);font-size:11px}
body.hud-mobile.cockpit-compact #refreshment-pocket {display:none}

/* Exit and driving-mode changes are essential, including during emotes. */
body.hud-ready.hud-mobile.cockpit-compact #quick button {min-width:44px;padding:4px 6px;font-size:10px}
body.hud-ready.hud-mobile.cockpit-compact #quick,body.hud-ready.hud-mobile.cockpit-compact.hud-landscape #quick {max-width:calc(100vw - 80px)}
body.hud-mobile.cockpit-compact #quick #auto {position:fixed;top:calc(env(safe-area-inset-top,0px) + 5px);right:calc(var(--hud-right) + 50px);width:56px;min-width:56px;padding:3px;white-space:normal;line-height:1.15}
@media (max-width:359px) {
 body.hud-mobile.cockpit-compact #telemetry {left:56%;width:30px;min-width:30px;padding:0}
 body.hud-mobile.cockpit-compact #telemetry span {display:none}
}