* {
  box-sizing: border-box;
}
: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 input[type="range"] {
  flex: 1;
  min-width: 90px;
  accent-color: #bdd7aa;
  height: 30px;
}
#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: 20;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #172c34;
  text-align: center;
  padding: 25px;
}
#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;
  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;
}
#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:flex;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}
#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}
  #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]),#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}
body.hud-ready :is(#motion-panel,#vehicle-panel,#destination-panel,#options) {position:fixed;z-index:7;top:auto;right:auto;left:20px;bottom:calc(var(--safe) + 68px);width:370px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 188px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:18px;background:#102c32f5;border:1px solid #d7e8d936;border-radius:22px;box-shadow:0 12px 45px #0004;backdrop-filter:blur(16px)}
.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}
#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%}
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 :is(#motion-panel,#vehicle-panel,#destination-panel,#options) {left:var(--hud-left);right:var(--hud-right);bottom:calc(var(--safe) + 218px);width:auto;max-width:none;max-height:calc(100dvh - 356px);padding:15px;border-radius:20px}
  body.hud-ready #quick {max-width:none}
  body.hud-ready #quick button {min-width:0}
  body.hud-ready #vehicle-panel {max-height:calc(100dvh - 426px)}
  .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)}
  body.hud-ready :is(#motion-panel,#vehicle-panel,#destination-panel,#options) {left:max(145px,env(safe-area-inset-left));right:max(172px,env(safe-area-inset-right));bottom:calc(var(--safe) + 78px);max-height:calc(100dvh - 152px);padding:12px}
  .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}
  body.hud-ready #vehicle-panel {max-height:calc(100dvh - 206px)}
}
#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}