:root {
  --paper: #fff9e9;
  --ink: #233e39;
  --muted: #748479;
  --green: #2d614f;
  --amber: #ebb95a;
  --line: #d9dfcf
}

* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #203b35;
  color: var(--ink);
  font: 14px system-ui, sans-serif
}

button,
select {
  font: inherit
}

button {
  cursor: pointer
}

button:focus-visible,
select:focus-visible {
  outline: 3px solid #dba14b;
  outline-offset: 3px
}

button:disabled {
  cursor: wait;
  opacity: .6
}

.bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
  padding: 0 22px;
  z-index: 3
}

.brand {
  display: flex;
  gap: 11px;
  align-items: center
}

.logo {
  font: 800 25px monospace;
  background: var(--green);
  color: #faedcb;
  padding: 5px 10px;
  border-radius: 4px
}

.brand strong {
  font-size: 17px;
  letter-spacing: .8px
}

.brand small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1.1px;
  margin-top: 2px
}

.actions {
  display: flex;
  gap: 7px;
  align-items: center
}

.btn {
  background: #eef1e4;
  border: 1px solid #c3cfba;
  color: var(--ink);
  padding: 9px 12px;
  border-radius: 5px
}

.btn:hover {
  background: #dfe7d3
}

.btn.primary {
  background: var(--green);
  border-color: var(--green);
  color: var(--paper);
  font-weight: 700
}

.clock {
  font: 16px monospace;
  margin-right: 8px
}

.tag {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted)
}

#scene {
  position: absolute;
  top: 64px;
  bottom: 112px;
  width: 100%;
  height: calc(100% - 176px)
}

.panel {
  background: #fff9edf2;
  border: 1px solid #c0cbb3;
  border-radius: 8px;
  box-shadow: 0 4px 0 #203d3425
}

.service {
  position: absolute;
  left: 20px;
  top: 84px;
  width: 268px;
  padding: 16px;
  pointer-events: none
}

.eyebrow {
  font-size: 9px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase
}

.headsign {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 9px 0 13px
}

.headsign b {
  background: #203d35;
  color: #efbd63;
  padding: 8px 9px;
  font: 700 28px monospace;
  border-radius: 3px
}

.headsign strong {
  font-size: 15px;
  line-height: 1.3
}

.headsign small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px
}

.next {
  border-top: 1px solid var(--line);
  padding-top: 12px
}

.next h2 {
  font-size: 18px;
  line-height: 1.25;
  margin: 6px 0
}

.next p {
  font-size: 11px;
  margin: 5px 0 0;
  color: #627867
}

.progress {
  height: 4px;
  background: #dbe3cf;
  border-radius: 4px;
  overflow: hidden;
  margin: 13px 0 7px
}

.progress i {
  height: 100%;
  display: block;
  background: #6e9879;
  transition: width .3s
}

.smallrow {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px
}

.navigation {
  position: absolute;
  right: 20px;
  top: 84px;
  width: 274px;
  background: #213c36;
  color: #f5f0dc;
  border: 1px solid #638271;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 5px 0 #213c3625
}

.navtop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #2a5145
}

.turn {
  font: 38px system-ui;
  line-height: 1;
  width: 40px;
  text-align: center;
  color: #f5cb74
}

.navtop strong {
  display: block;
  font-size: 20px
}

.navtop small {
  font-size: 11px;
  color: #c3d6c4
}

.navmap {
  position: relative
}

#nav {
  display: block;
  width: 272px;
  height: 190px;
  image-rendering: pixelated
}

.navscale {
  position: absolute;
  bottom: 7px;
  left: 10px;
  font: 9px monospace;
  color: #cedecb
}

.navbottom {
  border-top: 1px solid #597264;
  padding: 10px 13px;
  font-size: 11px;
  display: flex;
  justify-content: space-between
}

.navbottom span:last-child {
  color: #edc675
}

.zoom {
  position: absolute;
  right: 20px;
  top: 424px;
  display: flex;
  gap: 5px
}

.zoom button {
  width: 32px;
  height: 31px;
  background: var(--paper);
  border: 1px solid #8ca184;
  border-radius: 4px;
  color: var(--ink);
  font-size: 18px
}

.attribution {
  position: absolute;
  bottom: 118px;
  right: 14px;
  color: #fdf4dc;
  background: #274438b8;
  font-size: 9px;
  padding: 4px 6px;
  border-radius: 3px
}

.attribution a {
  color: inherit;
  text-decoration: none
}

.dashboard {
  position: absolute;
  bottom: 0;
  height: 112px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 25px;
  background: var(--paper);
  border-top: 3px solid var(--ink);
  padding: 14px 24px
}

.speed {
  min-width: 104px;
  display: flex;
  gap: 9px;
  align-items: baseline
}

.speed b {
  font: 700 43px monospace;
  letter-spacing: -2px
}

.speed small {
  font-size: 10px;
  color: var(--muted)
}

.metric {
  border-left: 1px solid var(--line);
  padding-left: 22px;
  min-width: 104px
}

.metric strong {
  display: block;
  font: 700 21px monospace;
  margin-top: 6px
}

.metric small {
  font-size: 11px;
  color: var(--muted)
}

.doors {
  display: flex;
  gap: 6px;
  margin-top: 6px
}

.door {
  background: #eef1e4;
  border: 1px solid #bfceb6;
  border-radius: 4px;
  padding: 9px 10px;
  color: var(--ink);
  font-size: 11px
}

.door.open {
  background: #ffdda1;
  border-color: #c08b3c
}

.door kbd {
  font-weight: bold;
  margin-right: 4px
}

.controls {
  margin-left: auto;
  text-align: right;
  color: #718374;
  font-size: 10px;
  line-height: 1.9
}

.controls kbd {
  color: #244c3d
}

#toast {
  position: absolute;
  bottom: 135px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  color: #fff5dc;
  background: #264d40ef;
  border: 1px solid #8da581;
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
  max-width: 600px;
  pointer-events: none
}

#pauseLabel {
  display: none;
  position: absolute;
  left: 50%;
  top: 24%;
  transform: translate(-50%, -50%);
  padding: 20px 36px;
  background: var(--paper);
  border: 2px solid #325c4a;
  border-radius: 7px;
  font-weight: 800;
  letter-spacing: 3px
}

.location {
  position: absolute;
  left: 20px;
  bottom: 134px;
  color: #fdf4df;
  text-shadow: 0 2px 4px #233e39
}

.location strong {
  display: block;
  font-size: 17px
}

.location small {
  font-size: 10px;
  letter-spacing: 1px
}

.touch {
  position: absolute;
  left: 16px;
  bottom: 190px;
  display: none;
  gap: 5px
}

.touch button {
  padding: 15px;
  background: #fff9e9dc;
  border: 1px solid #567460;
  border-radius: 6px;
  touch-action: none
}

dialog {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid #80977f;
  border-radius: 12px;
  padding: 26px;
  max-height: 90vh;
  box-shadow: 0 16px 80px #092d2988
}

dialog::backdrop {
  background: #193b33a8;
  backdrop-filter: blur(3px)
}

dialog h1 {
  font-size: 31px;
  letter-spacing: -1px;
  margin: 4px 0 8px
}

dialog h2 {
  font-size: 26px;
  margin: 5px 0 15px
}

dialog p {
  font-size: 13px;
  line-height: 1.65
}

.close {
  float: right
}

.dispatch {
  width: min(1030px, calc(100% - 30px))
}

.dispatchhead {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.dispatchhead p {
  margin: 3px 0 18px;
  color: #718273
}

.dispatchbody {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 25px
}

.linegrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px
}

.linebutton {
  border: 1px solid #bdcbb4;
  background: #edf1e3;
  color: #426151;
  border-radius: 5px;
  font: 700 20px monospace;
  padding: 10px 0
}

.linebutton.selected {
  background: #285a47;
  color: #ffe4a5;
  border-color: #285a47
}

.direction {
  width: 100%;
  padding: 10px;
  border: 1px solid #b6c7ad;
  background: white;
  color: #294b3b;
  border-radius: 5px;
  margin: 9px 0 12px;
  font-size: 12px
}

.tripstats {
  display: flex;
  gap: 18px;
  margin-bottom: 13px
}

.tripstats b {
  font: 700 21px monospace;
  display: block
}

.tripstats small {
  font-size: 10px;
  color: #6c8473
}

.stoplist {
  height: 181px;
  overflow: auto;
  background: #edf0e2;
  padding: 7px 11px;
  border-radius: 5px;
  scrollbar-width: thin
}

.stopitem {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 2.15
}

.stopitem span:first-child {
  font: 10px monospace;
  color: #97aa8d;
  width: 18px
}

.stopitem span:last-child {
  margin-left: auto;
  color: #8ba07e;
  font-size: 10px
}

.overview {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  background: #dbe3cb;
  min-height: 310px
}

#overview {
  width: 100%;
  height: 100%;
  display: block
}

.overviewLabel {
  position: absolute;
  bottom: 13px;
  left: 14px;
  background: #f9f4dded;
  padding: 10px 13px;
  border-radius: 5px
}

.overviewLabel strong {
  display: block;
  font-size: 13px
}

.overviewLabel small {
  font-size: 10px;
  color: #6b8171
}

.dispatchfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #d3ddc8;
  gap: 18px
}

.dispatchfoot .options {
  display: flex;
  gap: 8px;
  align-items: center
}

.dispatchfoot select {
  background: #eef1e4;
  border: 1px solid #b9c8ae;
  padding: 8px;
  border-radius: 4px;
  font-size: 11px;
  color: #31563f
}

.dispatchfoot small {
  font-size: 10px;
  color: #778b75;
  display: block;
  margin-top: 6px
}

.begin {
  padding: 13px 24px;
  white-space: nowrap
}

.help {
  width: min(760px, calc(100% - 30px))
}

.help details {
  padding: 9px 0
}

.help summary {
  font-weight: 700;
  cursor: pointer
}

.help a {
  color: #2f7554
}

.help pre {
  background: #e5edd9;
  padding: 12px;
  overflow: auto;
  font-size: 11px
}

.help .keys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 12px
}

.help .keys div {
  padding: 9px;
  background: #e9eddd;
  border-radius: 4px
}

#loading {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #233e36;
  color: #faebc5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}

#loading strong {
  font-size: 25px;
  letter-spacing: 2px
}

#loading small {
  color: #bfd0b7;
  margin-top: 13px
}

#loading .loader {
  width: 170px;
  height: 4px;
  background: #5a735a;
  margin-top: 25px;
  overflow: hidden
}

#loading .loader i {
  display: block;
  height: 100%;
  width: 60%;
  background: #eac56b;
  animation: loading 1.3s infinite ease-in-out
}

@keyframes loading {
  from {
    transform: translateX(-110%)
  }

  to {
    transform: translateX(180%)
  }
}

@media(max-width:1150px) {
  .controls {
    display: none
  }

  .dashboard {
    gap: 18px
  }

  .metric {
    padding-left: 18px;
    min-width: 90px
  }

  .service {
    width: 240px
  }

  .navigation {
    width: 244px
  }

  #nav {
    width: 242px;
    height: 170px
  }

  .zoom {
    top: 405px
  }
}

@media(max-width:780px) {
  .dispatchbody {
    grid-template-columns: 1fr
  }

  .overview {
    height: 200px;
    min-height: 200px
  }

  .stoplist {
    height: 100px
  }

  .dispatchfoot {
    flex-wrap: wrap
  }

  .dispatchhead h1 {
    font-size: 25px
  }

  .dispatch {
    padding: 19px
  }

  .linegrid {
    grid-template-columns: repeat(10, 1fr)
  }

  .linebutton {
    font-size: 15px;
    padding: 9px 0
  }

  .bar {
    padding: 0 12px
  }

  .brand strong {
    font-size: 13px
  }

  .brand small,
  .clock {
    display: none
  }

  .actions {
    gap: 4px
  }

  .btn {
    padding: 8px;
    font-size: 11px
  }

  .dashboard {
    gap: 12px;
    padding: 12px
  }

  .metric {
    min-width: 65px;
    padding-left: 12px
  }

  .metric strong {
    font-size: 17px
  }

  .speed {
    min-width: 75px
  }

  .speed b {
    font-size: 33px
  }

  .door {
    padding: 9px 6px
  }

  .service {
    width: 210px;
    left: 10px;
    top: 76px;
    padding: 12px
  }

  .navigation {
    right: 10px;
    top: 76px;
    width: 200px
  }

  #nav {
    width: 198px;
    height: 146px
  }

  .navtop {
    padding: 9px
  }

  .navtop strong {
    font-size: 17px
  }

  .navtop small {
    font-size: 10px
  }

  .turn {
    font-size: 30px;
    width: 30px
  }

  .navbottom {
    padding: 8px;
    font-size: 9px
  }

  .zoom {
    right: 10px;
    top: 331px
  }

  .location {
    left: 12px
  }

  .attribution {
    font-size: 8px
  }

  .help .keys {
    grid-template-columns: 1fr
  }
}

@media(max-width:540px) {
  .dashboard {
    height: 143px;
    flex-wrap: wrap;
    align-content: center
  }

  .dashboard .doorpanel {
    width: 100%;
    border: 0;
    padding: 0
  }

  .door {
    flex: 1
  }

  .doors {
    width: 100%;
    margin-top: 4px
  }

  .doorpanel .eyebrow {
    display: none
  }

  #scene {
    bottom: 143px;
    height: calc(100% - 207px)
  }

  .brand .logo {
    font-size: 19px;
    padding: 4px 7px
  }

  .brand strong {
    font-size: 11px
  }

  .actions .soundtext {
    display: none
  }

  .service {
    width: 181px;
    padding: 10px
  }

  .headsign b {
    font-size: 22px;
    padding: 6px
  }

  .headsign strong {
    font-size: 12px
  }

  .next h2 {
    font-size: 14px
  }

  .navigation {
    width: 166px
  }

  #nav {
    width: 164px;
    height: 120px
  }

  .navtop {
    gap: 4px
  }

  .navtop strong {
    font-size: 15px
  }

  .navbottom {
    font-size: 8px;
    gap: 4px
  }

  .navtop small {
    font-size: 9px
  }

  .zoom {
    top: 304px
  }

  .location {
    bottom: 167px
  }

  .location strong {
    font-size: 13px
  }

  #toast {
    bottom: 164px;
    width: 90%;
    font-size: 11px;
    z-index: 2
  }

  .attribution {
    bottom: 148px;
    right: 5px;
    font-size: 7px
  }

  .touch {
    bottom: 219px
  }

  .linegrid {
    grid-template-columns: repeat(5, 1fr)
  }

  .overview {
    height: 170px;
    min-height: 170px
  }

  .dispatchfoot {
    margin-top: 12px;
    padding-top: 12px
  }

  .dispatchfoot .options {
    flex-wrap: wrap
  }

  .begin {
    width: 100%
  }

  .dispatchfoot>div {
    width: 100%
  }

  .help .keys {
    font-size: 11px
  }
}

@media(pointer:coarse) {
  .touch {
    display: flex
  }
}

@media(max-width:540px) {
  #scoresButton {
    display: none
  }
}

.linegrid {
  display: block;
  position: relative
}

.termgroup h3 {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 6px 2px 4px;
  font-size: 10px;
  letter-spacing: .7px;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--muted)
}

.termlines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 5px;
  margin-bottom: 7px
}

.linebutton {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 36px;
  padding: 5px 8px;
  text-align: left;
  font: 12px system-ui, sans-serif
}

.linebutton b {
  font: 700 15px monospace;
  flex: none
}

.linebutton small {
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.modes {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 2px 0 14px
}

.trainbtn {
  background: #3f4a44;
  border-color: #ebb95a;
  color: #ffe9b8;
  font-weight: 700
}

.trainbtn:hover {
  background: #4d5a52
}

.wallet {
  font-weight: 700;
  background: #ffe9b8;
  border-color: #ebb95a;
  white-space: nowrap
}

.trainmenu #terminalFilter,
.trainmenu label[for=terminalFilter],
.trainmenu #direction,
.trainmenu .tripstats {
  display: none
}

#scene {
  touch-action: none
}

.skillrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line)
}

.skillrow strong {
  margin-right: 8px
}

.skillrow small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px
}

.skillrow .btn {
  white-space: nowrap;
  min-width: 76px
}

.pips {
  color: #c8872a;
  letter-spacing: 2px;
  font-size: 12px
}

.location {
  max-width: 58%
}

.eventbtn {
  background: #2a1f33;
  border-color: #d9701f;
  color: #ffd9a8;
  font-weight: 700
}

.eventbtn:hover {
  background: #3a2c47
}

.eventbtn.live {
  box-shadow: 0 0 0 3px #f08a2455
}

.dispatchfoot>div:first-child {
  max-width: 670px;
  flex: 1
}

.dispatchfoot .options {
  flex-wrap: wrap
}

.scores {
  width: min(1100px, calc(100% - 30px))
}

.scoretools {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 12px 0
}

.scoretable {
  overflow: auto;
  max-height: 45vh
}

.scoretable table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px
}

.scoretable th,
.scoretable td {
  text-align: left;
  padding: 9px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap
}

.scoretable th {
  position: sticky;
  top: 0;
  background: var(--paper)
}

[hidden] {
  display: none !important
}

.scoretools select {
  padding: 7px;
  border: 1px solid #b9c8ae;
  background: #eef1e4;
  color: var(--ink);
  border-radius: 4px
}

@media(max-width:540px) {
  .brand strong {
    display: none
  }

  .bar {
    padding: 0 8px
  }

  .actions {
    gap: 3px
  }

  .actions .btn {
    padding: 7px 6px;
    font-size: 10px
  }

  .dispatchfoot {
    display: block
  }

  .dispatchfoot>div:first-child {
    margin-bottom: 12px
  }

  .speed {
    min-width: 85px
  }

  .scoretable table {
    font-size: 11px
  }
}

.driveSwitches {
  position: absolute;
  right: 20px;
  top: 465px;
  display: flex;
  gap: 5px
}

.driveSwitches .btn {
  padding: 7px 8px;
  font-size: 11px
}

.driveSwitches .active {
  background: #efc978;
  color: #233e39
}

@media(max-width:1150px) {
  .driveSwitches {
    top: 446px
  }
}

@media(max-width:780px) {
  .driveSwitches {
    top: 371px;
    right: 10px
  }
}

@media(max-width:540px) {
  .driveSwitches {
    top: 344px
  }

  .driveSwitches .btn {
    padding: 6px;
    font-size: 10px
  }
}

.linegrid {
  max-height: 220px;
  overflow: auto;
  padding-right: 3px;
  scrollbar-width: thin
}

.linebutton {
  min-height: 42px
}

@media(max-width:780px) {
  .linegrid {
    max-height: 150px
  }
}

.trapeze-toggle {
  position: absolute;
  left: 20px;
  top: 374px;
  z-index: 3;
  font: 700 12px monospace;
  background: #213c36;
  color: #f3d699;
  border-color: #7e9683
}

.trapeze {
  position: absolute;
  left: 20px;
  top: 80px;
  width: 330px;
  max-height: calc(100% - 210px);
  overflow: auto;
  z-index: 4;
  background: #243c36;
  border: 2px solid #6e8374;
  border-radius: 9px;
  color: #f2e9ce;
  box-shadow: 0 6px 18px #142e3355;
  padding: 12px
}

.trapeze-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px
}

.trapeze-top strong {
  font: bold 24px monospace;
  letter-spacing: -1px
}

.trapeze-top .btn {
  font-size: 10px;
  padding: 5px 8px
}

.trapeze-screen {
  background: #c6d3b3;
  color: #233e39;
  border: 3px solid #162f29;
  border-radius: 4px;
  padding: 10px;
  font: 12px monospace
}

.trapeze-screen .tag {
  color: #315a43;
  letter-spacing: 0;
  line-height: 1.5
}

.trapeze-screen p {
  font-size: 10px;
  margin: 7px 0
}

.trapeze-screen ol {
  padding: 0;
  margin: 0;
  list-style: none
}

.trapeze-screen li {
  display: flex;
  gap: 7px;
  padding: 8px 4px;
  border-top: 1px solid #9aae8e;
  line-height: 1.3
}

.trapeze-screen li:first-child {
  background: #2c5344;
  color: #fff0c8;
  font-weight: bold
}

.trapeze-screen li span {
  flex: 1
}

.trapeze-screen li small {
  font-size: 9px;
  white-space: nowrap;
  align-self: center
}

.trapeze-controls {
  display: grid;
  gap: 6px;
  padding-top: 12px
}

.trapeze-controls>small {
  font: 9px monospace;
  color: #c0d0bb;
  letter-spacing: 1px;
  margin-bottom: 3px
}

.trapeze-controls .btn {
  text-align: left;
  font-size: 11px;
  padding: 9px;
  background: #425b4c;
  color: #fff0d1;
  border-color: #768d76
}

.trapeze-controls .btn:hover {
  background: #58715b
}

.trapeze-controls p {
  font-size: 10px;
  line-height: 1.5;
  margin: 4px 0;
  color: #d3dfc7
}

@media(max-width:780px) {
  .trapeze-toggle {
    left: 10px;
    top: 352px
  }

  .trapeze {
    left: 10px;
    top: 76px;
    width: 310px
  }
}

@media(max-width:540px) {
  .trapeze-toggle {
    top: 348px;
    font-size: 10px
  }

  .trapeze {
    width: calc(100% - 20px);
    max-height: calc(100% - 230px)
  }
}


html,
body {
  position: fixed;
  inset: 0;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent
}

input {
  -webkit-user-select: text;
  user-select: text
}

.dashboard {
  padding-bottom: max(14px, env(safe-area-inset-bottom))
}

.touch {
  left: 0;
  right: 0;
  bottom: 122px;
  justify-content: space-between;
  padding: 0 max(10px, env(safe-area-inset-left));
  pointer-events: none;
  gap: 0;
  z-index: 2
}

.touch .pad {
  display: flex;
  gap: 8px;
  pointer-events: auto
}

.touch button {
  width: 74px;
  height: 74px;
  padding: 0;
  font: 800 19px system-ui;
  color: var(--ink);
  background: #fff9e9c9;
  border: 2px solid #567460;
  border-radius: 14px;
  touch-action: none;
  -webkit-touch-callout: none
}

.touch button:active {
  background: #efc978
}

.touch .gas {
  height: 96px;
  background: #d7e6c4d9
}

.touch .brake {
  background: #f2cfb4d9
}

.touch .pad:last-child {
  align-items: flex-end
}

.is-touch .touch {
  display: flex
}

.is-touch #toast {
  bottom: 252px;
  z-index: 2;
  width: min(92%, 420px)
}

.location {
  pointer-events: none
}

@media(max-width:540px) {
  .touch {
    bottom: 150px
  }

  .touch button {
    width: 66px;
    height: 66px
  }

  .touch .gas {
    height: 88px
  }

  .location {
    bottom: auto;
    top: 262px;
    left: 10px
  }

  .next p,
  .smallrow,
  .progress {
    display: none
  }

  .next {
    padding-top: 7px
  }

  .headsign {
    margin: 5px 0 7px
  }

  .service {
    top: 70px
  }

  .navigation {
    top: 70px
  }

  .zoom {
    top: 262px
  }

  .driveSwitches {
    top: 300px
  }

  .trapeze-toggle {
    top: auto;
    bottom: 252px;
    left: 10px
  }

  .attribution {
    bottom: auto;
    top: 64px;
    right: 0;
    border-radius: 0;
    font-size: 7px;
    padding: 1px 4px;
    background: #274438
  }

  .is-touch .trapeze-toggle {
    top: 338px;
    bottom: auto;
    left: auto;
    right: 10px
  }

  #nav {
    height: 96px
  }

  .navbottom {
    display: none
  }
}

@media(max-height:500px) and (orientation:landscape) {
  .bar {
    height: 38px;
    padding: 0 max(8px, env(safe-area-inset-left))
  }

  .logo {
    font-size: 15px;
    padding: 2px 6px
  }

  .brand strong,
  .brand small {
    display: none
  }

  .actions .btn {
    padding: 4px 8px;
    font-size: 11px
  }

  .clock {
    font-size: 13px;
    display: inline
  }

  #scene {
    top: 38px;
    height: calc(100% - 92px);
    bottom: 54px
  }

  .dashboard {
    height: 54px;
    padding: 4px max(10px, env(safe-area-inset-right)) 4px max(10px, env(safe-area-inset-left));
    gap: 10px;
    flex-wrap: nowrap
  }

  .dashboard .eyebrow {
    display: none
  }

  .speed {
    min-width: 70px
  }

  .speed b {
    font-size: 27px
  }

  .metric {
    min-width: 0;
    padding-left: 9px;
    border-left: 1px solid var(--line)
  }

  .metric strong {
    font-size: 14px;
    margin: 0
  }

  .dashboard .doorpanel {
    width: auto;
    border-left: 1px solid var(--line);
    padding-left: 9px
  }

  .doors {
    margin: 0;
    width: auto
  }

  .door {
    padding: 7px 8px;
    flex: none
  }

  .service {
    left: max(8px, env(safe-area-inset-left));
    top: 44px;
    width: 170px;
    padding: 7px 9px
  }

  .service .eyebrow:first-child,
  .next p,
  .smallrow,
  .progress {
    display: none
  }

  .next {
    padding-top: 4px;
    border: 0
  }

  .next h2 {
    font-size: 12px;
    margin: 2px 0
  }

  .headsign {
    margin: 0
  }

  .headsign b {
    font-size: 17px;
    padding: 3px 5px
  }

  .headsign strong {
    font-size: 11px
  }

  .headsign small {
    display: none
  }

  .navigation {
    right: max(8px, env(safe-area-inset-right));
    top: 44px;
    width: 176px
  }

  .navtop {
    padding: 4px 8px
  }

  .turn {
    font-size: 22px;
    width: 24px
  }

  .navtop strong {
    font-size: 14px
  }

  .navtop small {
    font-size: 9px
  }

  #nav {
    width: 174px;
    height: 70px
  }

  .navbottom,
  .navscale {
    display: none
  }

  .zoom {
    top: auto;
    bottom: 62px;
    left: 50%;
    right: auto;
    transform: translateX(-50%)
  }

  .zoom button {
    width: 30px;
    height: 28px
  }

  .driveSwitches {
    top: 4px;
    right: auto;
    left: 50px
  }

  .driveSwitches .btn {
    padding: 3px 6px;
    font-size: 10px
  }

  .touch {
    bottom: 60px;
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left))
  }

  .touch button {
    width: 64px;
    height: 64px
  }

  .touch .gas {
    height: 82px
  }

  .trapeze-toggle {
    display: none
  }

  .location,
  .attribution {
    display: none
  }

  #toast {
    top: 44px !important;
    bottom: auto;
    max-width: 44%;
    font-size: 10px;
    padding: 6px 9px
  }

  .is-touch #toast {
    top: 44px
  }

  dialog {
    padding: 12px;
    max-height: 96vh
  }

  .dispatchbody {
    grid-template-columns: 300px 1fr;
    gap: 12px
  }

  .dispatchhead h1 {
    font-size: 18px;
    margin: 0
  }

  .dispatchhead p {
    display: none
  }

  .overview {
    min-height: 150px;
    height: auto
  }

  .linegrid {
    grid-template-columns: repeat(6, 1fr);
    max-height: 90px
  }

  .linebutton {
    min-height: 30px;
    font-size: 13px;
    padding: 2px 0
  }

  .stoplist {
    height: 60px
  }

  .dispatchfoot {
    margin-top: 8px;
    padding-top: 8px
  }

  .begin {
    padding: 9px 14px;
    width: auto
  }
}

@media(max-width:780px), (max-height:500px) {
  .begin {
    position: fixed;
    right: 18px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: auto;
    z-index: 5;
    box-shadow: 0 4px 14px #142e3366
  }

  .dispatch {
    padding-bottom: 70px
  }
}

body.halloween {
  --paper: #241a2e;
  --ink: #f6e7c8;
  --muted: #b39fbe;
  --green: #d9701f;
  --line: #4a3a58;
  background: #120820
}

.halloween .btn {
  background: #3a2c47;
  border-color: #6b5380
}

.halloween .btn:hover {
  background: #4a3a58
}

.halloween .btn.primary {
  background: #d9701f;
  border-color: #d9701f;
  color: #1c1424
}

.halloween .btn.active,
.halloween .driveSwitches .active {
  background: #f08a24;
  color: #1c1424
}

.halloween .panel {
  background: #241a2ef2;
  border-color: #6b5380;
  box-shadow: 0 4px 0 #0c061c55
}

.halloween .next p {
  color: var(--muted)
}

.halloween .progress {
  background: #4a3a58
}

.halloween .progress i {
  background: #f08a24
}

.halloween .headsign b {
  background: #0c061c;
  color: #f08a24
}

.halloween .navigation {
  background: #1c1424;
  border-color: #6b5380
}

.halloween .navtop {
  background: #3a2c47
}

.halloween .door {
  background: #3a2c47;
  border-color: #6b5380;
  color: var(--ink)
}

.halloween .door.open {
  background: #f08a24;
  color: #1c1424
}

.halloween .bar,
.halloween .dashboard {
  border-color: #f08a24
}

.halloween .controls,
.halloween .controls kbd {
  color: var(--muted)
}

.halloween .zoom button,
.halloween .touch button {
  background: #241a2ee0;
  border-color: #6b5380;
  color: var(--ink)
}

.halloween .touch .gas {
  background: #4f7a34d9
}

.halloween .touch .brake {
  background: #8a3f3fd9
}

.halloween dialog {
  border-color: #f08a24
}

.halloween .linebutton {
  background: #3a2c47;
  border-color: #6b5380;
  color: var(--ink)
}

.halloween .linebutton.selected {
  background: #f08a24;
  border-color: #f08a24;
  color: #1c1424
}

.halloween .stoplist {
  background: #1c1424
}

.halloween .stopitem span:first-child,
.halloween .stopitem span:last-child {
  color: var(--muted)
}

.halloween .tripstats small,
.halloween .dispatchhead p,
.halloween .dispatchfoot small {
  color: var(--muted)
}

.halloween .overviewLabel {
  background: #241a2eed
}

.halloween .overviewLabel small {
  color: var(--muted)
}

.halloween .dispatchfoot {
  border-color: var(--line)
}

.halloween .eventbtn {
  background: #d9701f;
  color: #1c1424
}

.halloween .wallet {
  background: #3a2c47;
  color: #ffd9a8;
  border-color: #f08a24
}

.halloween .help .keys div,
.halloween .help pre {
  background: #3a2c47
}

.halloween .help a {
  color: #f6c453
}

.halloween dialog select,
.halloween dialog input {
  background: #3a2c47;
  color: var(--ink);
  border-color: #6b5380
}

.halloween #toast {
  background: #3a1a08ef;
  border-color: #f08a24
}

.halloween .location {
  text-shadow: 0 2px 4px #0c061c
}

.onlinebtn {
  background: #2a5145;
  border-color: #6e9879;
  color: #fff2d6;
  font-weight: 700
}

.onlinebtn:hover {
  background: #356655
}

#onlineButton.active {
  background: #efc978;
  color: #233e39
}

.roomcode {
  font: 700 26px monospace;
  letter-spacing: 3px;
  margin-left: 6px
}

#onlineStatus {
  min-height: 20px;
  font-weight: 700;
  overflow-wrap: anywhere
}

.chat-toggle {
  position: absolute;
  left: 20px;
  top: 414px;
  z-index: 3
}

.chatbox {
  position: absolute;
  left: 76px;
  top: 414px;
  width: min(340px, calc(100% - 96px));
  z-index: 4;
  background: #fff9edf2;
  border: 1px solid #8ca184;
  border-radius: 8px;
  padding: 8px
}

.chatlog {
  height: 150px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text
}

.chatnote {
  color: var(--muted);
  font-style: italic
}

#chatForm {
  display: flex;
  gap: 6px;
  margin-top: 6px
}

#chatInput {
  flex: 1;
  min-width: 0;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #b9c8ae;
  border-radius: 4px
}

.halloween .chatbox {
  background: #241a2ef2;
  border-color: #6b5380
}

@media(max-width:780px) {
  .chat-toggle {
    left: 10px;
    top: 392px
  }

  .chatbox {
    left: 10px;
    right: 10px;
    top: 70px;
    width: auto
  }

  .chatlog {
    height: 110px
  }
}

@media(max-width:540px) {
  .chat-toggle {
    top: 300px;
    left: 10px
  }
}

@media(max-height:500px) and (orientation:landscape) {
  .chat-toggle {
    top: 44px;
    left: 186px
  }

  .chatbox {
    left: 186px;
    right: 190px;
    top: 44px;
    width: auto
  }

  .chatlog {
    height: 62px
  }

  #onlineButton {
    padding: 4px 6px
  }
}