@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(./assets/fonts/font-0.ttf) format("truetype");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/font-1.ttf) format("truetype");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./assets/fonts/font-2.ttf) format("truetype");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./assets/fonts/font-3.ttf) format("truetype");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(./assets/fonts/font-4.ttf) format("truetype");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(./assets/fonts/font-5.ttf) format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/font-6.ttf) format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/font-7.ttf) format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./assets/fonts/font-8.ttf) format("truetype");
}

:root {
  --cyan: #67f6ec;
  --muted: #798c9e;
  --line: #7497a52b;
  --yellow: #e6ff82;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #050b16;
  color: #eaf2f4;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  overflow: hidden;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
}
#world,
#rain,
.vignette,
.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vignette {
  pointer-events: none;
  background:
    linear-gradient(90deg, #050c19b8, transparent 46%, #050c1940),
    linear-gradient(
      0deg,
      #050b18e0,
      transparent 28%,
      transparent 80%,
      #050b18bb
    );
}
.grain {
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 28px 36px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  pointer-events: none;
}
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: #fff;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-weight: 800;
  font-size: 25px;
  letter-spacing: 1px;
}
.thin {
  font-weight: 500;
  color: #b3c5cf;
}
.brand small {
  display: block;
  font:
    8px "IBM Plex Mono",
    monospace;
  letter-spacing: 2.2px;
  color: var(--muted);
  margin-top: 4px;
}
.brand-icon {
  font-size: 34px;
  position: relative;
  color: var(--cyan);
  font-style: italic;
  border: 1px solid #67f6ec55;
  padding: 0 8px;
}
.brand-icon span {
  font: 18px monospace;
  position: absolute;
  right: -6px;
  top: -5px;
}
.district {
  font-size: 10px;
  letter-spacing: 1.4px;
}
.district span {
  color: #52616b;
  margin: 0 14px;
}
.district small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  margin-top: 8px;
}
.district i,
.live {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--cyan);
  box-shadow: 0 0 9px var(--cyan);
  margin-right: 8px;
}
.actions {
  display: flex;
  gap: 8px;
}
.actions button {
  pointer-events: auto;
  border: 1px solid var(--line);
  background: #0b1420a0;
  padding: 11px;
  font-size: 9px;
  letter-spacing: 1px;
}
.left {
  position: absolute;
  left: 36px;
  top: 146px;
  width: 285px;
}
.eyebrow {
  font-size: 9px;
  letter-spacing: 1.4px;
  color: #a4b7c3;
}
.left > .eyebrow {
  font-size: 8px;
  color: var(--cyan);
}
.title {
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 96px;
  font-style: italic;
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -1px;
  margin-top: 21px;
}
.title > span:first-child {
  font-size: 58px;
  color: #d2dde6;
}
.title .dot {
  color: var(--cyan);
}
.subtitle {
  color: #94a6b6;
  font-size: 11px;
  line-height: 1.9;
  margin: 18px 0 28px;
}
.panel {
  background: linear-gradient(120deg, #101c2be8, #0b1321ce);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.contract {
  padding: 18px;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pill {
  font-size: 7px;
  letter-spacing: 1px;
  padding: 5px 6px;
  border: 1px solid #c8e28c44;
  color: var(--yellow);
  background: #cbff6e08;
}
.contract-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 28px;
  font-weight: 600;
  margin-top: 14px;
}
.contract-title span {
  float: right;
  color: var(--cyan);
}
.contract p {
  font-size: 9px;
  color: var(--muted);
}
.steps {
  display: flex;
  align-items: center;
  margin: 23px 0;
}
.step {
  border: 1px solid #58667555;
  color: #6d8397;
  width: 30px;
  height: 25px;
  display: grid;
  place-items: center;
  font-size: 10px;
}
.step.active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: #67f6ec15;
}
.step.done {
  background: var(--cyan);
  color: #05151a;
}
.steps b {
  height: 1px;
  background: #50607066;
  flex: 1;
}
.destination {
  display: flex;
  align-items: center;
  gap: 10px;
}
.package {
  font-size: 28px;
  color: var(--cyan);
}
.destination small {
  font-size: 7px;
  color: var(--muted);
  letter-spacing: 1px;
}
.destination strong {
  display: block;
  font-size: 11px;
  font-weight: 500;
  margin-top: 5px;
}
.direction {
  margin-left: auto;
  font-size: 8px;
  color: var(--yellow);
}
.contract-foot {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  margin-top: 17px;
  padding-top: 13px;
  font-size: 8px;
  color: var(--muted);
}
.contract-foot b {
  color: var(--yellow);
  font-weight: 400;
  margin-left: 4px;
}
.start {
  width: 100%;
  background: var(--cyan);
  color: #071b24;
  font-weight: 600;
  letter-spacing: 1px;
  border: 0;
  padding: 18px 16px;
  text-align: left;
  font-size: 11px;
  margin-top: 12px;
  box-shadow: 0 0 30px #5afaea0b;
}
.start span {
  float: right;
  font-size: 16px;
}
.start:hover {
  background: #b6fff8;
}
.hint {
  text-align: center;
  font-size: 7px;
  letter-spacing: 1.5px;
  color: #6b8594;
  margin-top: 12px;
}
.cyan {
  color: var(--cyan);
}
.run {
  padding: 17px;
  margin-top: 12px;
}
.stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 21px;
  color: var(--muted);
  font-size: 9px;
}
.stat b {
  font-size: 16px;
  color: #e9f2fa;
  font-weight: 500;
}
.stat b.cyan {
  color: var(--cyan);
}
.stat em {
  font-size: 10px;
  font-style: normal;
  color: #607487;
}
.integrity {
  display: flex;
  justify-content: space-between;
  font-size: 7px;
  letter-spacing: 1px;
  margin: 23px 0 9px;
  color: var(--muted);
}
.bar {
  background: #2b3b4b80;
  height: 3px;
}
.bar > div {
  background: var(--cyan);
  height: 100%;
  width: 100%;
  transition: width 0.1s;
}
.center-label {
  position: absolute;
  left: 53%;
  top: 44%;
  display: flex;
  gap: 13px;
  align-items: center;
  color: var(--yellow);
  opacity: 0.8;
  pointer-events: none;
}
.center-label > span {
  font-size: 40px;
  border: 1px solid #e6ff8255;
  padding: 0 8px;
}
.center-label small {
  font-size: 8px;
  line-height: 1.9;
  letter-spacing: 1.5px;
}
footer {
  position: absolute;
  bottom: 0;
  padding: 24px 36px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.controls-info {
  display: flex;
  align-items: center;
  font-size: 7px;
  color: #a2b1bf;
  gap: 7px;
  padding-bottom: 7px;
}
.key {
  display: inline-block;
  border: 1px solid #71899a66;
  padding: 5px 7px;
  color: #cbdce7;
  font-size: 9px;
}
.wide {
  font-size: 7px;
}
.divider {
  width: 10px;
}
.speed {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 26px;
  text-align: center;
}
.speed strong {
  font:
    italic 800 74px/0.9 "Barlow Condensed",
    Impact,
    sans-serif;
  letter-spacing: -1px;
}
.speed span {
  font-size: 8px;
  color: #9caebc;
  margin-left: 9px;
}
.speed-bars {
  display: flex;
  gap: 4px;
  margin-top: 12px;
}
.speed-bars i {
  width: 9px;
  height: 4px;
  background: #53627477;
  transform: skewX(-25deg);
}
.speed-bars i.on {
  background: var(--cyan);
  box-shadow: 0 0 8px #67f6ec55;
}
.boost-info {
  width: 185px;
  font-size: 8px;
  letter-spacing: 1px;
  color: #93a7b4;
}
.boost-info .bar {
  margin: 11px 0 16px;
}
.boost-info small {
  font-size: 7px;
  letter-spacing: 0.3px;
}
.boost-info small span {
  color: var(--cyan);
  float: right;
}
.toast {
  position: absolute;
  top: 115px;
  left: 50%;
  transform: translateX(-50%);
  background: #0c1e2aee;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  padding: 14px 23px;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: nowrap;
}
.toast.show {
  opacity: 1;
}
.modal {
  position: fixed;
  inset: 0;
  background: #030912ba;
  z-index: 9;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
}
.modal[hidden] {
  display: none;
}
.modal > .panel {
  padding: 32px;
  max-width: 420px;
  width: 90%;
}
.modal h2 {
  font:
    700 46px "Barlow Condensed",
    sans-serif;
  margin: 15px 0;
}
.modal p {
  color: #9cafc0;
  line-height: 1.8;
}

body.playing .title,
body.playing .subtitle,
body.playing .left > .eyebrow {
  display: none;
}
body.playing .left {
  top: 146px;
}
body.playing .start {
  display: none;
}
body.playing .modal .start {
  display: block;
}
body.playing #hint {
  color: var(--yellow);
  line-height: 1.7;
  font-size: 8px;
}
@media (max-height: 760px) and (min-width: 701px) {
  .left {
    top: 115px;
  }
  .title {
    font-size: 76px;
    margin-top: 14px;
  }
  .title > span:first-child {
    font-size: 46px;
  }
  .subtitle {
    margin: 12px 0 16px;
  }
  .contract {
    padding: 14px;
  }
  .steps {
    margin: 15px 0;
  }
  .start {
    padding: 14px;
  }
  .center-label {
    top: 40%;
  }
  body.playing .left {
    top: 115px;
  }
}
@media (max-width: 700px) {
  header {
    padding: 18px 18px;
  }
  .brand {
    font-size: 21px;
    gap: 8px;
  }
  .brand-icon {
    font-size: 27px;
  }
  .brand small {
    font-size: 6px;
  }
  .district {
    display: none;
  }
  .actions button {
    font-size: 7px;
    padding: 10px;
  }
  .left {
    left: 20px;
    top: 106px;
    width: 240px;
  }
  .title {
    font-size: 78px;
    margin-top: 14px;
  }
  .title > span:first-child {
    font-size: 48px;
  }
  .subtitle {
    font-size: 10px;
    margin: 14px 0 18px;
  }
  .contract {
    padding: 14px;
  }
  .contract-title {
    font-size: 24px;
  }
  .steps {
    margin: 16px 0;
  }
  .center-label {
    display: none;
  }
  .run {
    display: none;
  }
  footer {
    padding: 18px;
    bottom: 92px;
    align-items: center;
  }
  .controls-info {
    display: none;
  }
  .boost-info {
    width: 110px;
  }
  .boost-info small {
    display: none;
  }
  .speed {
    left: 20px;
    bottom: 12px;
    transform: none;
    text-align: left;
  }
  .speed strong {
    font-size: 58px;
  }
  .speed-bars {
    gap: 3px;
  }
  .speed-bars i {
    width: 6px;
  }
  .boost-info {
    margin-left: auto;
  }

  body.playing .left {
    top: 96px;
    width: 220px;
  }
  body.playing .contract-title,
  body.playing .contract > p,
  body.playing .steps {
    display: none;
  }
  body.playing .destination {
    margin-top: 12px;
  }
  body.playing .contract-foot {
    margin-top: 10px;
    padding-top: 9px;
  }
  .toast {
    top: 240px;
    font-size: 9px;
    padding: 12px;
    max-width: 95vw;
  }
  .hint {
    line-height: 1.6;
  }
  .start {
    font-size: 10px;
    padding: 16px;
  }
}
@media (max-width: 700px) {
  body.playing .run {
    display: block;
    padding: 10px;
    margin-top: 8px;
  }
  body.playing .run .row,
  body.playing .run .integrity,
  body.playing .run .bar {
    display: none;
  }
  body.playing .stat {
    margin-top: 8px;
    font-size: 7px;
  }
  body.playing .stat b {
    font-size: 11px;
  }
  body.playing .stat em {
    font-size: 8px;
  }
}
.roam-hud {
  position: absolute;
  left: 30px;
  top: 125px;
  width: 240px;
  padding: 18px;
}
.roam-hud[hidden] {
  display: none;
}
#mode {
  font:
    600 25px "Barlow Condensed",
    sans-serif;
  margin: 12px 0;
}
.roam-hud p {
  font-size: 9px;
  color: #91a8b8;
  line-height: 1.8;
}
.roam-hud .row {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 8px;
  color: var(--muted);
}
.roam-hud b {
  color: var(--cyan);
  font-weight: 400;
}
.vehicle-action {
  width: 100%;
  border: 1px solid #67f6ec88;
  background: #0d2833d9;
  padding: 14px 12px;
  color: var(--cyan);
  font-size: 9px;
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.vehicle-action span {
  float: right;
}
.vehicle-action:disabled {
  opacity: 0.45;
  cursor: default;
}
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.interaction {
  position: fixed;
  z-index: 6;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 24px);
}
.interaction button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid #ffffff59;
  border-radius: 8px;
  background: var(--action-color);
  color: #111823;
  font: bold 11px "IBM Plex Mono", monospace;
  white-space: nowrap;
  box-shadow: 0 3px 16px #05081099;
}
.interaction button:active { filter: brightness(.82); }
.interaction .action-delivery { --action-color: #78ebda; }
.interaction .action-service { --action-color: #ffce83; }
.interaction .action-business { --action-color: #d7b5ff; }
.interaction kbd {
  border: 1px solid #101a3650;
  border-radius: 3px;
  padding: 2px 4px;
  font: inherit;
}
body.touch-layout .interaction kbd { display: none; }
.secondary {
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--line);
  padding: 12px;
  width: 100%;
  font-size: 9px;
  margin-top: 10px;
}
.dialogue {
  position: fixed;
  bottom: 135px;
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  max-width: 92vw;
  padding: 24px;
  z-index: 10;
}
.dialogue[hidden] {
  display: none;
}
.dialogue p {
  color: #d2e1ea;
  line-height: 1.9;
  font-size: 12px;
}
.boost-info {
  margin-left: auto;
  width: 210px;
}
.controls-info {
  max-width: 43%;
  flex-wrap: wrap;
  line-height: 1.5;
}
.contract p {
  line-height: 1.9;
}
.district #district {
  margin: 0;
  color: #c3d7e1;
}
body.playing #intro {
  display: none;
}

body:not(.playing) footer .controls-info {
  opacity: 0.6;
}
body:not(.playing) .vehicle-action {
  visibility: hidden;
}
@media (max-width: 700px) {
  .roam-hud {
    left: 14px;
    top: 91px;
    width: 173px;
    padding: 12px;
  }
  .roam-hud #mode {
    font-size: 20px;
    margin: 8px 0;
  }
  .roam-hud p {
    font-size: 8px;
    margin-bottom: 10px;
  }
  .roam-hud .eyebrow {
    font-size: 7px;
  }
  .boost-info {
    width: 145px;
  }
  .boost-info small {
    display: block;
    font-size: 6px;
    line-height: 1.5;
  }
  .vehicle-action {
    font-size: 8px;
    padding: 12px 9px;
    margin-bottom: 6px;
  }
  .interaction {
    bottom: 200px;
    font-size: 9px;
    padding: 9px;
  }
  .interaction .key {
    display: none;
  }
  .dialogue {
    bottom: 170px;
  }
  .toast {
    top: 235px;
  }
  .left {
    top: 105px;
  }
  .contract p {
    font-size: 9px;
  }

  footer {
    bottom: 94px;
  }
  .speed strong {
    font-size: 50px;
  }
}
@media (max-height: 680px) and (max-width: 700px) {
  .left .title {
    font-size: 60px;
  }
  .left .title > span:first-child {
    font-size: 38px;
  }
  .left .subtitle {
    margin: 10px 0;
  }
  .left .contract {
    display: none;
  }
  .left {
    top: 100px;
  }
  .left .start {
    margin-top: 10px;
  }
}
.network-panel {
  position: absolute;
  left: 30px;
  bottom: 135px;
  width: 240px;
  padding: 13px 16px;
  font-size: 9px;
  z-index: 2;
}
.network-panel .row {
  color: var(--cyan);
  letter-spacing: 1px;
}
.network-panel small {
  display: block;
  color: #8a9eae;
  font-size: 8px;
  margin-top: 8px;
}
.network-panel[data-state="RECONNECTING"] .row {
  color: var(--yellow);
}
body:not(.playing) .network-panel {
  display: none;
}
#nameTags {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
#nameTags span {
  position: absolute;
  left: 0;
  top: 0;
  background: #071723c9;
  border: 1px solid #6f9aaa44;
  padding: 5px 8px;
  font-size: 9px;
  white-space: nowrap;
  text-shadow: 0 1px 4px #000;
}
@media (max-width: 700px) {
  .network-panel {
    left: 14px;
    bottom: 195px;
    width: 172px;
    padding: 10px;
    font-size: 8px;
  }
  .network-panel small {
    font-size: 7px;
  }
  #nameTags span {
    font-size: 8px;
    padding: 4px 6px;
  }
  .actions button {
    padding: 8px;
    font-size: 6px;
  }
  .brand {
    font-size: 18px;
  }
}
@media (max-width: 700px) {
  .network-panel {
    bottom: 195px;
    width: 165px;
  }
}
.arrival-label {
  display: block;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--muted);
  margin-top: 12px;
}
.arrival-label select {
  display: block;
  width: 100%;
  margin-top: 7px;
  background: #112434;
  border: 1px solid var(--line);
  color: #baf2e7;
  font: 10px monospace;
  padding: 10px;
}
.left .subtitle {
  margin-bottom: 17px;
}
.left .contract {
  padding: 12px;
}
.left .contract-title {
  font-size: 23px;
}
.left .contract .destination {
  display: none;
}
.left .contract p {
  margin-bottom: 0;
}
@media (max-width: 700px) {
  .left .contract {
    display: none;
  }
  .left .title {
    font-size: 70px;
  }
  .arrival-label {
    font-size: 7px;
  }
  .arrival-label select {
    padding: 9px;
  }
}
.voice-panel {
  position: fixed;
  top: 103px;
  right: max(30px, env(safe-area-inset-right));
  z-index: 8;
  font: 10px monospace;
}
.voice-panel summary {
  list-style: none;
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  cursor: pointer;
  color: var(--cyan);
  background: #0b1929ed;
  border: 1px solid #67f6ec66;
  touch-action: manipulation;
}
.voice-panel summary::-webkit-details-marker { display: none; }
.voice-panel.voice-ready summary {
  border-color: var(--cyan);
  background: #173e49;
}
.voice-content {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(250px, calc(100vw - 32px));
  max-height: calc(100dvh - 175px);
  overflow: auto;
  padding: 13px;
  background: #0b1929f5;
  overscroll-behavior: contain;
}
.voice-panel .row {
  color: var(--cyan);
  font-size: 9px;
  letter-spacing: 1px;
}
.voice-panel .row small {
  font-size: 6px;
  color: var(--muted);
  letter-spacing: 0;
}
#voiceStatus {
  font-size: 8px;
  color: #a8bdc9;
  margin: 10px 0;
}
.voice-panel button {
  border: 1px solid var(--line);
  background: #193346;
  color: #c5eee6;
  font-size: 8px;
  padding: 9px;
  cursor: pointer;
}
#voiceJoin,
#voiceHold,
#voiceListen {
  width: 100%;
}
#voiceHold {
  margin-top: 8px;
  color: var(--yellow);
  touch-action: none;
}
#voiceHold.talking {
  background: #2a705f;
  box-shadow: 0 0 15px #69ffcd33;
}
.voice-buttons {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}
.voice-buttons button {
  flex: 1;
}
.voice-panel select {
  width: 100%;
  background: #122534;
  color: #cbdee9;
  border: 1px solid var(--line);
  font: 8px monospace;
  padding: 7px;
}
.voice-panel label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 7px;
  color: var(--muted);
  margin-top: 8px;
}
.voice-panel input {
  width: 110px;
  accent-color: var(--cyan);
}
#voiceMembers {
  max-height: 100px;
  overflow: auto;
}
.voice-member {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px;
  margin-top: 8px;
  color: #829cac;
}
.voice-member span {
  font-size: 8px;
  align-self: center;
}
.voice-member small {
  font-size: 6px;
}
.voice-member button {
  font-size: 6px;
  padding: 4px 6px;
  grid-row: 1/3;
  grid-column: 2;
}
.voice-member.speaking span {
  color: var(--cyan);
}
body:not(.playing) .voice-panel {
  display: none;
}
.engine-status {
  position: fixed;
  left: 30px;
  bottom: 112px;
  font: 9px monospace;
  letter-spacing: 1px;
  color: #8cb2c3;
  z-index: 3;
  pointer-events: none;
}
.engine-loading {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, #1d2946, #080e1b 66%);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  text-align: center;
}
.engine-loading[hidden] {
  display: none;
}
.loading-card { width: min(440px, 100%); }
.loading-card h1 {
  margin: 0 0 16px;
  font: 800 clamp(40px, 9vw, 72px)/1 "Barlow Condensed", sans-serif;
  letter-spacing: .035em;
  color: #f3fcff;
}
.loading-card h1 span { color: var(--cyan); }
#loadingProgress {
  width: 100%;
  height: 8px;
  accent-color: var(--cyan);
}
#loadingDetail { min-height: 2.5em; color: #bbcedf; }
#fullscreen {
  font: 24px/1 sans-serif;
  touch-action: manipulation;
}
#fullscreenDock {
  position: fixed;
  top: calc(max(8px, env(safe-area-inset-top)) + 53px);
  right: max(12px, env(safe-area-inset-right));
  z-index: 9;
}
#fullscreenDock:empty { display: none; }
#fullscreenDock button {
  width: 44px;
  height: 44px;
  background: #0b1929ed;
  border: 1px solid #67f6ec66;
  color: var(--cyan);
}
body.compact-hud .voice-panel[open] .voice-content {
  top: calc(100% + 51px);
  max-height: calc(100dvh - 205px);
}
#start:disabled {
  opacity: 0.4;
  cursor: wait;
}
@media (max-width: 700px) {
  .engine-status {
    bottom: 170px;
    left: 16px;
    font-size: 8px;
  }
  #quality {
    font-size: 8px;
    padding: 8px;
  }
  .actions {
    gap: 3px;
  }
  .actions button {
    padding: 7px;
  }
}

.grain {
  display: none;
}
.vignette {
  opacity: 0.22;
}
#world {
  touch-action: none;
  image-rendering: auto;
  width: 100%;
  height: 100%;
}
#rain {
  pointer-events: none;
}

/* The compact HUD keeps the world and the driving controls clear. */
#hudDrawer { display: none; }
body.playing.hud-open #hudDrawer {
  position: fixed;
  z-index: 8;
  display: grid;
  gap: 6px;
  top: 68px;
  left: 16px;
  width: min(260px, calc(100vw - 32px));
  max-height: calc(100dvh - 140px);
  padding: 8px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0a1523f5;
}
#hudDrawer > .panel { position: static; width: auto; padding: 8px; border: 0; background: none; }
#hudDrawer .network-panel small { margin: 0; font-size: 10px; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.menu-grid button { min-height: 44px; padding: 5px; border-radius: 6px; background: #13233b; }
#hudDrawer .music-panel { padding: 0 6px; }
#hudDrawer .music-panel summary { padding: 7px; }
.courier-bar {
  position: fixed;
  z-index: 6;
  top: 14px;
  left: 16px;
  border-radius: 9px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  font: 11px monospace;
  color: #d5e8f1;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  background: #0b1929e8;
}
.courier-bar[hidden], #routeMarker[hidden] { display: none; }
#hudToggle {
  flex-shrink: 0;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid #67f6ec66;
  border-radius: 6px;
  background: #16394a;
  color: var(--cyan);
  font: inherit;
}
#routeArrow { display: inline-block; color: var(--cyan); font-size: 16px; }
#routeText { overflow: hidden; text-overflow: ellipsis; }
#creditBalance { color: var(--yellow); }
#routeMarker {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  color: var(--cyan);
  font-size: 20px;
  text-shadow: 0 0 8px #002d36, 0 0 5px #000;
  pointer-events: none;
}
#routeShop { margin: 2px 0 10px; padding: 7px; }
#buyBeer:disabled { opacity: .55; }
.interaction { z-index: 6; }
#shop { z-index: 12; }

@media (max-width: 760px), (pointer: coarse) {
  body.compact-hud header { display: none; }
  body.compact-hud .courier-bar {
    top: max(8px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    right: calc(108px + env(safe-area-inset-right));
    max-width: 480px;
    transform: none;
    gap: 7px;
    padding: 4px 9px 4px 4px;
    font-size: 10px;
  }
  body.compact-hud .voice-panel {
    top: max(8px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 9;
  }
  body.compact-hud .voice-panel summary { min-height: 48px; padding: 0 7px; }
  body.compact-hud .voice-content { max-height: calc(100dvh - 165px); }
  body.compact-hud .voice-content button { min-height: 42px; }
  #routeText {
    flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    line-height: 1.25;
  }
  body.compact-hud #hudToggle {
    display: block;
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 9px;
    background: #16394a;
    color: var(--cyan);
    border: 1px solid #67f6ec66;
    font: 10px monospace;
  }
  body.compact-hud #hudDrawer { display: none; }
  body.playing.compact-hud.hud-open #hudDrawer {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 8px;
    top: calc(max(8px, env(safe-area-inset-top)) + 54px);
    left: max(12px, env(safe-area-inset-left));
    width: min(300px, calc(100vw - 24px));
    max-height: calc(100dvh - 180px);
    overflow: auto;
    overscroll-behavior: contain;
    background: #0a1523f5;
    border: 1px solid var(--line);
    padding: 10px;
    z-index: 8;
  }
  body.compact-hud #hudDrawer > * {
    position: static;
    width: auto;
    max-height: none;
    max-width: none;
    flex: none;
  }
  body.compact-hud #hudDrawer .actions {
    order: -2;
    flex-wrap: wrap;
  }
  body.compact-hud #hudDrawer .actions button { font-size: 9px; min-height: 38px; }
  body.compact-hud #hudDrawer .roam-hud { order: -1; }

  body.compact-hud footer {
    position: fixed;
    z-index: 6;
    bottom: calc(97px + env(safe-area-inset-bottom));
    padding: 0 16px;
    pointer-events: none;
  }
  body.compact-hud .controls-info, body.compact-hud .boost-info small,
  body.compact-hud:not(.hud-open) .speed { display: none; }
  body.compact-hud .boost-info { width: 132px; margin-left: auto; }
  body.compact-hud .vehicle-action { pointer-events: auto; margin: 0; min-height: 40px; padding: 8px; }
  body.compact-hud .speed { left: 16px; bottom: 0; transform: none; }
  body.compact-hud .speed strong { font-size: 34px; }
  body.compact-hud .interaction {
    position: fixed;
    bottom: calc(146px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 30px);
  }
  body.compact-hud .interaction button { min-height: 44px; }
  body.compact-hud .toast { top: 66px; }
  body.compact-hud .dialogue { bottom: 135px; }
}
#world.beer-blur { filter: blur(3px); }
#beerTimer { color: #ffc574; font-variant-numeric: tabular-nums; }
.courier-buttons { display: flex; gap: 6px; margin-bottom: 10px; }
.courier-buttons .secondary { width: auto; flex: 1; margin: 0; padding: 7px; }
.courier-buttons button:disabled { opacity: .45; }
.music-panel {
  position: fixed;
  top: 153px;
  right: 30px;
  z-index: 5;
  width: min(240px, 42vw);
  background: #0b1929ed;
  font: 10px monospace;
}
body:not(.playing) .music-panel { display: none; }
.music-panel summary { padding: 12px; cursor: pointer; color: var(--cyan); }
.music-content { padding: 0 12px 12px; display: grid; gap: 7px; }
.music-content select, .music-controls button {
  min-width: 0;
  min-height: 35px;
  padding: 5px;
  color: #cfeafa;
  background: #142b3c;
  border: 1px solid var(--line);
}
.music-controls { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 5px; }
.music-controls button:disabled { opacity: .45; }
.music-volume { display: flex; gap: 8px; align-items: center; }
.music-volume input { flex: 1; min-width: 0; }
#musicStatus { margin: 0; color: #ffc574; }
#musicStatus:empty { display: none; }
body.compact-hud #hudDrawer .music-panel { order: -1; }
@media (pointer: coarse), (max-width: 760px) {
  .music-controls button, .music-content select { min-height: 42px; }
}

#boardBike { margin-bottom: 6px; }
#world { user-select: none; -webkit-user-select: none; }

.account-box { display: grid; gap: 6px; margin: 6px 0 10px; color: #bed4e2; }
.account-box [hidden], .courier-buttons [hidden], #propertyPanel[hidden] { display: none; }
.account-box p { margin: 0; font: 11px/1.4 monospace; }
.account-box form { display: flex; gap: 5px; }
.account-box input { min-width: 0; width: 100%; color: #e0f7ff; background: #102030; border: 1px solid #66989a; padding: 6px; }
.account-box button, .account-box a { font: 10px monospace; padding: 7px; border: 1px solid #66989a; color: #b4fff2; background: #0e2332; text-decoration: none; }
#fuelBalance { color: #ffcb86; white-space: nowrap; }
#propertyPanel { z-index: 14; max-height: min(58dvh, 510px); overflow: auto; }
#propertyActions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
#propertyActions button:disabled { opacity: .45; }
@media (max-width: 760px), (pointer: coarse) {
  #fuelBalance { font-size: 9px; }
  #propertyPanel { bottom: 145px; }
}

body:not(.playing) footer { pointer-events: none; }

/* The fixed layer is transparent to world gestures between the three targets. */
.mobile-controls { display: none; }
body.touch-layout {
  --touch-left: max(12px, env(safe-area-inset-left));
  --touch-right: max(12px, env(safe-area-inset-right));
  --touch-bottom: calc(12px + env(safe-area-inset-bottom));
  --stick-size: clamp(96px, 27vw, 120px);
}
body.playing.touch-layout:not(.passenger) .mobile-controls {
  position: fixed;
  z-index: 7;
  left: var(--touch-left);
  right: var(--touch-right);
  bottom: var(--touch-bottom);
  display: flex;
  justify-content: space-between;
  align-items: end;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.mobile-left { display: flex; align-items: end; gap: 10px; }
.mobile-controls button, .joystick {
  position: relative;
  flex: none;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.mobile-controls button {
  min-width: 56px;
  min-height: 56px;
  border: 1px solid #83c6d8a0;
  border-radius: 13px;
  color: #d4f9fa;
  background: #132b3aee;
  font: bold 12px monospace;
  padding: 0 10px;
}
.mobile-controls button[hidden] { display: none; }
.mobile-controls button.held { background: #32737e; }
.mobile-controls #brakeTouch { color: #ffd0c3; border-color: #e998888f; background: #412630ef; }
.mobile-controls #brakeTouch.held { background: #844956; }
.joystick {
  display: grid;
  place-items: center;
  width: var(--stick-size);
  height: var(--stick-size);
  border: 1px solid #70b9cba0;
  border-radius: 50%;
  background: radial-gradient(circle, #233f529c 32%, #182f418c 33% 63%, #75b5d025 64% 66%, #10222ed0 67%);
}
.joystick-thumb {
  width: 43%;
  height: 43%;
  border: 1px solid #a5eeed;
  border-radius: 50%;
  background: #377584e8;
  pointer-events: none;
}
.joystick-mark {
  position: absolute;
  top: 5%;
  color: #b6f9f7;
  font: 14px monospace;
  opacity: 0.75;
  pointer-events: none;
}
body.touch-layout.compact-hud footer {
  bottom: calc(var(--touch-bottom) + var(--stick-size) + 8px);
  padding-inline: var(--touch-left) var(--touch-right);
}
body.touch-layout.compact-hud .interaction {
  bottom: calc(var(--touch-bottom) + var(--stick-size) + 60px);
  max-width: min(330px, calc(100vw - var(--touch-left) - var(--touch-right)));
}
body.touch-layout.compact-hud.hud-open #hudDrawer {
  max-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - var(--touch-bottom) - var(--stick-size) - 62px);
}
body.touch-layout.compact-hud .voice-content {
  max-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - var(--touch-bottom) - var(--stick-size) - 64px);
}
body.touch-layout.compact-hud #propertyPanel,
body.touch-layout.compact-hud .dialogue {
  bottom: calc(var(--touch-bottom) + var(--stick-size) + 9px);
  max-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - var(--touch-bottom) - var(--stick-size) - 80px);
  overflow-y: auto;
}
@media (orientation: landscape) and (pointer: coarse) {
  body.touch-layout { --stick-size: clamp(76px, 26dvh, 102px); }
  body.touch-layout.compact-hud footer { bottom: calc(var(--touch-bottom) + 60px); }
  body.touch-layout.compact-hud .interaction {
    bottom: calc(var(--touch-bottom) + 108px);
    left: auto;
    right: var(--touch-right);
    max-width: calc(100vw - var(--touch-left) - var(--touch-right) - var(--stick-size) - 65px);
    transform: none;
    white-space: normal;
  }
  body.touch-layout.compact-hud .toast { top: calc(max(8px, env(safe-area-inset-top)) + 48px); }
}

.city-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(640px, calc(100% - max(14px, env(safe-area-inset-left)) - max(14px, env(safe-area-inset-right))));
  max-height: min(720px, calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))));
  color: #eaf2f4;
  background: #091425;
  border: 1px solid #67f6ec66;
  padding: clamp(10px, 2vw, 20px);
  overscroll-behavior: contain;
}
.city-dialog[open] { display: flex; flex-direction: column; gap: 8px; }
.city-dialog::backdrop { background: #030813c9; }
.city-dialog-bar, .business-stats, .business-bank, .business-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.city-dialog-bar { justify-content: space-between; }
.city-dialog h2 { margin: 0; color: var(--cyan); font: 700 clamp(20px, 5vw, 27px) "Barlow Condensed", sans-serif; }
.city-dialog button, .city-dialog input, .city-dialog select {
  min-height: 44px;
  padding: 5px 9px;
  background: #13253b;
  color: #eaf2f4;
  border: 1px solid #67f6ec55;
  font: inherit;
  touch-action: manipulation;
}
.city-dialog button:disabled { opacity: .54; cursor: default; }
.city-dialog label { display: flex; gap: 6px; align-items: center; }
.city-dialog p { margin: 4px 0; }
.business-stats { color: var(--cyan); justify-content: space-between; }
.business-bank { border-block: 1px solid #67f6ec33; padding-block: 6px; }
#businessList { overflow: auto; padding: 0; margin: 0; list-style: none; min-height: 56px; }
#businessList li { display: grid; gap: 4px; grid-template-columns: 1fr auto; padding: 8px 4px; border-bottom: 1px solid #67f6ec33; }
#businessList li span { grid-column: 1; color: #a9bfd3; }
#businessList li div { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; gap: 4px; }
#businessList button, #businessNotice { font-size: 11px; }
#businessNotice { min-height: 1em; color: var(--yellow); }
#profileDialog { width: min(400px, calc(100% - 30px)); }
#riderProfile { display: flex; gap: 8px; flex-wrap: wrap; }
#riderProfile input { width: min(46vw, 200px); }
@media (max-width: 420px) {
  #businessList li { grid-template-columns: 1fr; }
  #businessList li div { grid-column: 1; grid-row: auto; }
  #businessSearch { width: 155px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .city-dialog[open] { gap: 4px; }
  .business-bank { padding-block: 2px; }
}

#nameTags span.self-tag {
  color: #baffef;
  background: #101d2cdd;
  border: 1px solid #65dfcd80;
}
.inventory-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
#inventoryMessage { min-height: 1em; color: #ffc573; }
#partyStatus {
  position: fixed;
  z-index: 5;
  top: max(80px, calc(env(safe-area-inset-top) + 75px));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 85vw;
  padding: 7px 10px;
  pointer-events: none;
  text-align: center;
  background: #241329e8;
  border: 1px solid #fa72d5;
  color: #ffd9f5;
  font-size: 10px;
}


.inventory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.city-dialog .inventory-tile {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  color: #ddeaf5;
  text-align: left;
}
.inventory-tile svg { width: 26px; height: 26px; fill: none; stroke: #86f2df; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.inventory-tile[data-item="beer"] svg { stroke: #ffce83; }
.inventory-tile[data-item="fuel"] svg { stroke: #d7b5ff; }
.inventory-tile[data-item="ammo"] svg { stroke: #95b8ff; }
.inventory-tile[data-empty="true"] svg { opacity: .55; }
.inventory-tile strong { color: #a8c5d9; font-size: 10px; }
.city-dialog .inventory-tile[aria-pressed="true"] { border-color: #86f2df; background: #1d3946; }
.inventory-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.city-dialog #itemAction { min-width: 84px; border-radius: 6px; color: #0c2330; background: #78ebda; font-weight: bold; }
.armory-routes summary { padding: 9px 0; color: #a9c3d9; cursor: pointer; }
.armory-routes .inventory-buttons { padding-bottom: 4px; }
#inventoryMessage:empty { display: none; }
@media (max-width: 475px) { .inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

#intro {
  position: fixed;
  inset: max(52px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: grid;
  place-content: center;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(8px, 3dvh, 28px);
  pointer-events: none;
}
.intro-title {
  margin: 0;
  color: #f3fcff;
  font: 900 clamp(40px, min(12vw, 13dvh), 108px)/.88 "Barlow Condensed", sans-serif;
  text-align: center;
  text-shadow: 0 4px 22px #03091a;
}
.intro-title span { color: var(--cyan); }
.intro-login {
  box-sizing: border-box;
  width: min(410px, 100%);
  padding: clamp(10px, 2.4dvh, 20px);
  border: 1px solid #67f6ec66;
  border-radius: 12px;
  background: #0b1628f2;
  pointer-events: auto;
}
.intro-login .arrival-label, .intro-login .account-box { margin: 0 0 8px; }
.intro-login .arrival-label { width: auto; }
.intro-login select, .intro-login input, .intro-login button, .intro-login a {
  box-sizing: border-box;
  min-height: 42px;
  font-size: 14px;
}
.intro-login .account-box p { font-size: 13px; overflow-wrap: anywhere; }
.intro-login .account-box button, .intro-login .account-box a { font-size: 12px; }
.account-session { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#intro #start { width: 100%; margin: 0; padding: 8px 12px; }
@media (min-width: 530px) and (max-height: 510px) {
  #intro { grid-template-columns: minmax(0, 320px) minmax(260px, 400px); align-items: center; }
}
@media (max-height: 340px) {
  #intro { gap: 8px; }
  .intro-login { padding: 8px; }
  .intro-login select, .intro-login input, .intro-login button, .intro-login a { min-height: 34px; }
  .intro-login .arrival-label, .intro-login .account-box { margin-bottom: 4px; }
}

.online-roster {
  position: fixed;
  z-index: 5;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: max(12px, env(safe-area-inset-left));
  width: min(320px, 36vw);
  color: #d5e8f1;
  background: #0b1929e8;
  border: 1px solid #67f6ec55;
  border-radius: 8px;
  font: 10px monospace;
}
.online-roster summary { padding: 6px 8px; cursor: pointer; color: var(--cyan); }
.online-roster summary b { margin-left: 4px; }
.online-roster ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 68px;
  margin: 0;
  padding: 0 6px 6px;
  overflow: auto;
  list-style: none;
}
.online-roster li { padding: 3px 5px; background: #152741; border-radius: 4px; overflow-wrap: anywhere; }
body.touch-layout .online-roster {
  bottom: var(--touch-bottom);
  left: calc(var(--touch-left) + var(--stick-size) + 72px);
  right: calc(var(--touch-right) + 64px);
  width: auto;
}
@media (max-width: 475px) and (pointer: coarse) {
  body.touch-layout .online-roster {
    left: var(--touch-left);
    right: auto;
    bottom: calc(var(--touch-bottom) + var(--stick-size) + 4px);
    width: min(210px, calc(100vw - 175px));
  }
}

.menu-grid button[aria-pressed="true"] { border-color: var(--cyan); background: #193847; }