@font-face {
  font-family: Barlow;
  src: url(fonts/barlow.ttf);
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: DM;
  src: url(fonts/dm-sans.ttf);
  font-weight: 100 900;
  font-display: swap;
}
:root {
  font-family: DM, Arial, sans-serif;
  color: #f1f5e9;
  background: #152020;
  --lime: #d8f474;
  --line: #ffffff22;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow: hidden;
}
[hidden] {
  display: none !important;
}
canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
button {
  font: inherit;
  color: inherit;
  border: 1px solid var(--line);
  background: #203028;
  border-radius: 6px;
  padding: 9px 12px;
  cursor: pointer;
}
button:hover {
  background: #3a4d38;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
button:disabled {
  opacity: 0.5;
}
a {
  color: inherit;
}
kbd {
  font:
    500 10px DM,
    sans-serif;
  border: 1px solid #ffffff30;
  border-radius: 3px;
  padding: 3px 5px;
  color: #e8eedd;
  white-space: nowrap;
}

header {
  position: absolute;
  top: 22px;
  left: 26px;
  display: flex;
  gap: 20px;
  align-items: center;
  pointer-events: none;
  text-shadow: 0 2px 8px #000;
}
.brand {
  font:
    800 italic 33px Barlow,
    sans-serif;
  letter-spacing: -1px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.brand > span {
  color: var(--lime);
  font-size: 21px;
}
.brand small {
  font:
    700 10px DM,
    sans-serif;
  letter-spacing: 3px;
  margin-left: 9px;
}
.build-tag {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #e5ebd8;
}
.speed-body {
  display: flex;
  align-items: center;
  gap: 20px;
}
.speed-number {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.speed-number strong {
  font:
    600 66px/0.95 Barlow,
    sans-serif;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  min-width: 62px;
}
.speed-number > span {
  font-size: 9px;
  color: #acbda8;
}
.limit {
  background: #e7ebdf;
  border: 3px double #28372c;
  border-radius: 5px;
  color: #263026;
  text-align: center;
  min-width: 38px;
  padding: 3px;
}
.limit small {
  font-size: 7px;
  font-weight: 800;
  display: block;
}
.limit b {
  font:
    600 26px/1 Barlow,
    sans-serif;
}
.speed-track {
  height: 2px;
  background: #ffffff19;
  margin-top: 8px;
}
.speed-track i {
  display: block;
  height: 100%;
  background: var(--lime);
}
.speeding .speed-track i {
  background: #ffad75;
}
.eyebrow {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: #9daf9f;
}
.junction {
  min-width: 0;
}
.junction-main {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 5px 0;
}
.junction-main > b {
  font-size: 26px;
  color: var(--lime);
  font-weight: 400;
}
.junction-main strong {
  font-size: 12px;
  font-weight: 500;
  display: block;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.junction-main span {
  font-size: 9px;
  color: #a5b79e;
  display: block;
  margin-top: 4px;
}
#signal {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  margin-left: 5px;
}
.turns {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 8px;
}
.turns button {
  padding: 4px 8px;
  background: transparent;
  border-color: #ffffff15;
  font-size: 17px;
}
.turns button.active {
  background: #d8f47421;
  border-color: #d8f47470;
  color: var(--lime);
}
.turns kbd {
  font-size: 8px;
  border: 0;
  padding: 0 2px;
}
#turn-warning {
  font-size: 7px;
  line-height: 1.6;
  letter-spacing: 0.4px;
  color: #9fb792;
  margin-left: 7px;
  max-width: 125px;
}
#turn-warning.danger {
  color: #ffad75;
}
nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
nav button {
  font-size: 10px;
  padding: 9px;
}
#camera {
  grid-column: 1 / -1;
  min-width: 110px;
}
#pause span {
  display: none;
}
.attribution {
  position: absolute;
  bottom: 5px;
  left: 25px;
  max-width: 90vw;
  font-size: 8px;
  color: #c0cdb5;
  text-shadow: 0 1px 4px #000;
}
.attribution button {
  padding: 2px 5px;
  background: transparent;
  border: 0;
  font-size: 8px;
  color: var(--lime);
}
#toast {
  position: absolute;
  bottom: 182px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90vw;
  width: max-content;
  background: #0c1715ef;
  border: 1px solid #d8f47440;
  border-radius: 6px;
  padding: 11px 18px;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  text-align: center;
}
#toast.show {
  opacity: 1;
}
.modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: #06100e99;
  backdrop-filter: blur(6px);
}
.modal-card {
  position: relative;
  background: #101c19;
  border: 1px solid #d8f47430;
  border-radius: 12px;
  padding: 36px;
  width: 520px;
  max-width: 100%;
  max-height: 88vh;
  overflow: auto;
  box-shadow: 0 30px 100px #0008;
}
.modal h2 {
  font:
    600 48px/1 Barlow,
    sans-serif;
  margin: 14px 0;
}
.modal p {
  font-size: 12px;
  line-height: 1.8;
  color: #b2c0ad;
}
.primary {
  background: var(--lime);
  border: 0;
  color: #182519;
  padding: 14px 20px;
  font-weight: 700;
}
.primary:hover {
  background: #e6ffa0;
}
.close {
  position: absolute;
  right: 12px;
  top: 12px;
  background: transparent;
  border: 0;
  font-size: 22px;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 14px 0;
  font-size: 12px;
}
select {
  background: #24332b;
  color: #edf3e5;
  border: 1px solid var(--line);
  padding: 8px;
  border-radius: 5px;
  max-width: 230px;
}
.modal a {
  color: var(--lime);
}
.fine-grid {
  display: flex;
  gap: 30px;
  padding: 20px 0;
}
.fine-grid b {
  font:
    600 36px Barlow,
    sans-serif;
}
.fine-grid span {
  display: block;
  font-size: 9px;
  color: #a5b89c;
}
.record-row {
  border-top: 1px solid var(--line);
  padding: 12px 0;
  font-size: 12px;
}
.record-row small {
  display: block;
  margin-top: 5px;
  color: #a5b89c;
}
.modal details {
  font-size: 12px;
  margin: 15px 0;
}
.modal summary {
  cursor: pointer;
}
@media (max-width: 1100px) {
  .speed-number strong {
    font-size: 58px;
  }
  .speed-body {
    gap: 12px;
  }
}
@media (max-width: 800px) {
  header {
    top: 16px;
    left: 16px;
  }
  .build-tag {
    display: none;
  }
  .speed-number strong {
    font-size: 52px;
    min-width: 45px;
  }
  .speed-body {
    gap: 7px;
  }
  .speed-number > span {
    font-size: 8px;
  }
  .limit {
    min-width: 32px;
  }
  .limit b {
    font-size: 22px;
  }
  .junction {
    grid-column: 2 / 4;
    grid-row: 2;
  }
  .junction > .eyebrow {
    display: none;
  }
  .junction-main strong {
    max-width: 45vw;
  }
  .junction-main {
    margin: 0;
  }
  .turns {
    margin-top: 5px;
  }
  #turn-warning {
    max-width: none;
  }
  nav {
    grid-row: 1;
    grid-column: 3;
    display: flex;
  }
  #camera {
    min-width: 0;
    font-size: 9px;
  }
  #pause {
    display: none;
  }
  nav button {
    padding: 8px;
  }
  .attribution {
    left: 12px;
    font-size: 7px;
    max-width: 96vw;
  }
  #toast {
    bottom: 195px;
  }
  .modal-card {
    padding: 28px;
  }
}
@media (max-width: 450px) {
  #settings {
    padding: 7px;
  }
  .junction-main strong {
    max-width: 140px;
  }
  .speed-body {
    gap: 5px;
  }
  .speed-number {
    gap: 3px;
  }
  .speed-number strong {
    font-size: 48px;
  }
  #turn-warning {
    font-size: 6px;
    max-width: 100px;
  }
  .turns button {
    padding: 3px 6px;
  }
}
/* Low, continuous dashboard: instruments, navigation, radio and controls. */
.radio-display {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 7px;
  border: 1px solid #94af702a;
  background: #070f0b;
  padding: 10px 8px;
  color: #9aac83;
  font:
    500 10px DM,
    sans-serif;
  letter-spacing: 1px;
  box-shadow: inset 0 2px 5px #0007;
}
.radio-display i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #637450;
}
.speed-number strong {
  font-style: italic;
}
.junction {
  border-left: 1px solid var(--line);
  padding-left: 18px;
}
@media (max-width: 1200px) {
  .junction {
    padding-left: 13px;
  }
}
@media (max-width: 800px) {
  .junction {
    padding-left: 0;
    border: 0;
  }
}
@media (min-width: 900px) and (max-width: 1200px) {
  .radio-display {
    font-size: 9px;
    padding: 9px 5px;
  }
  .junction {
    padding-left: 12px;
  }
}
#turn-warning {
  font-size: 8px;
}
.radio-display {
  letter-spacing: 0.5px;
}
/* Garage, fixed camera controls, crash overlay and live receiver. */
.steer-hint {
  font-size: 9px;
  color: #c4cfb9;
  letter-spacing: 0.5px;
}
.turns {
  gap: 14px;
}
#zoom {
  grid-column: 1 / -1;
  padding: 5px;
}
nav {
  gap: 4px;
}
#camera {
  padding: 6px;
}
#radio-open {
  display: block;
  width: 100%;
  padding: 8px;
  background: linear-gradient(#504638, #2c2721);
  border: 2px solid #9b8f78;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px #171b16,
    0 2px 8px #0006;
}
.receiver-brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: bold 7px DM;
  color: #ddd1b7;
}
.receiver-brand small {
  font-size: 5px;
}
.receiver-screen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 6px;
  background: #111d19;
  color: #9cd9a9;
  border: 1px solid #050906;
  font: 8px monospace;
  text-shadow: 0 0 6px #71dba277;
}
.receiver-screen b {
  font-size: 13px;
  letter-spacing: 2px;
}
.receiver-band {
  display: block;
  font: 5px monospace;
  color: #cabf9e;
  margin-top: 5px;
  white-space: nowrap;
}
.receiver-knobs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  line-height: 1.2;
  color: #b8b2a4;
}
.receiver-knobs small {
  font-size: 6px;
  letter-spacing: 1px;
}
#radio-panel {
  position: absolute;
  z-index: 30;
  inset: 5% 7%;
  background: #171b1b;
  border: 1px solid #887e69;
  border-radius: 12px;
  box-shadow: 0 20px 100px #000c;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.radio-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  font-size: 10px;
}
.radio-heading b {
  margin-right: auto;
}
.radio-heading button {
  font-size: 10px;
}
#radio-frame {
  border: 0;
  width: 100%;
  flex: 1;
  min-height: 0;
}
#radio-panel > p {
  font-size: 10px;
  color: #b2b9a5;
  margin: 8px 14px;
}
body.crashed canvas {
  filter: grayscale(1) brightness(0.45);
}
body.crashed header {
  opacity: 0.25;
}
#crash-screen {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #08080840;
  animation: crash-in 0.45s ease-out;
}
.crash-band {
  width: 100%;
  background: #0a0808c9;
  padding: 25px 20px;
  border-block: 1px solid #bb352833;
}
.crash-band > span {
  font-size: 9px;
  letter-spacing: 4px;
  color: #aaa;
}
.crash-band h1 {
  font:
    800 108px/0.9 Barlow,
    sans-serif;
  color: #e54d43;
  letter-spacing: 3px;
  margin: 12px 0;
  text-shadow: 0 4px 0 #4e1717;
}
.crash-band h2 {
  font:
    500 25px Barlow,
    sans-serif;
  margin: 14px 0 8px;
}
.crash-band p {
  font-size: 12px;
  color: #d1c2bc;
}
#crash-local {
  max-width: 700px;
  padding: 20px;
  color: #b9b3aa;
  font-size: 12px;
}
#crash-local > span {
  letter-spacing: 2px;
  font-size: 8px;
}
#crash-local small {
  font-size: 9px;
  color: #8c8982;
}
@keyframes crash-in {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (max-width: 899px) {
  #radio-open {
    padding: 6px;
  }
  .receiver-band,
  .receiver-knobs {
    display: none;
  }
}
@media (max-width: 800px) {
  #zoom {
    font-size: 8px;
  }
  #radio-panel {
    inset: 4% 2%;
  }
  .radio-heading {
    flex-wrap: wrap;
  }
  .radio-heading b {
    width: 100%;
  }
  .crash-band h1 {
    font-size: 76px;
  }
  #crash-local {
    padding: 18px;
    font-size: 11px;
  }
  .steer-hint {
    font-size: 7px;
  }
  .turns {
    gap: 8px;
  }
}
body.crashed #toast {
  display: none;
}
@media (max-width: 1100px) {
  .junction {
    grid-column: 2;
    grid-row: 2;
  }
  nav {
    grid-column: 3;
    grid-row: 1 / 3;
  }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .junction {
    grid-column: 2;
    grid-row: 2;
    padding-left: 12px;
  }
  nav {
    grid-column: 4;
    grid-row: 1 / 3;
  }
}
@media (max-width: 800px) {
  .junction {
    grid-column: 2 / 4;
  }
  nav {
    grid-column: 3;
    grid-row: 1;
  }
}
#radio-toggle {
  display: none;
}
.touch-mode #world {
  touch-action: none;
}
.touch-mode header {
  top: calc(12px + env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
}
.touch-mode .build-tag,
.touch-mode .steer-hint {
  display: none;
}
.touch-mode .brand {
  font-size: 26px;
}
.touch-mode .speed-number strong {
  font-size: 44px;
  min-width: 40px;
}
.touch-mode .speed-body {
  gap: 5px;
}
.touch-mode .speed-number {
  gap: 3px;
}
.touch-mode .speed-number > span {
  font-size: 7px;
}
.touch-mode .limit {
  min-width: 30px;
}
.touch-mode .limit b {
  font-size: 20px;
}
.touch-mode .junction {
  grid-column: 2;
  grid-row: 2;
  padding: 0;
  border: 0;
}
.touch-mode .junction > .eyebrow {
  display: none;
}
.touch-mode .junction-main {
  gap: 6px;
  margin: 0;
}
.touch-mode .junction-main > b {
  font-size: 20px;
}
.touch-mode .junction-main strong {
  max-width: 100%;
  font-size: 10px;
}
.touch-mode .junction-main > div {
  min-width: 0;
}
.touch-mode .junction-main span {
  font-size: 8px;
}
.touch-mode .turns {
  margin: 3px 0 0;
}
.touch-mode #turn-warning {
  font-size: 7px;
  max-width: none;
  margin: 0;
}
.touch-mode #pause span {
  display: inline;
}
.touch-mode #radio-toggle {
  display: block;
}
.touch-mode .attribution {
  bottom: calc(3px + env(safe-area-inset-bottom));
  left: max(10px, env(safe-area-inset-left));
  font-size: 6px;
  max-width: 96vw;
}
.touch-mode #toast {
  bottom: auto;
  top: calc(50px + env(safe-area-inset-top));
  font-size: 10px;
  max-width: 85vw;
  padding: 8px 12px;
}
.touch-mode .modal {
  padding: 10px;
  padding-top: calc(10px + env(safe-area-inset-top));
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.touch-mode .modal-card {
  max-height: 90dvh;
  padding: 26px 20px;
}
.touch-mode .modal-card button {
  min-height: 44px;
}
.touch-mode #close {
  min-width: 44px;
}
.touch-mode #crash-screen {
  overflow: auto;
  padding: 20px;
}
.touch-mode .crash-band h1 {
  font-size: 64px;
}
.touch-mode #crash-local {
  padding: 10px;
}
@media (orientation: landscape) {
  .touch-mode .speed-number strong {
    font-size: 38px;
  }
  .touch-mode #toast {
    top: calc(63px + env(safe-area-inset-top));
    max-width: 55vw;
  }
  .touch-mode .crash-band {
    padding: 10px;
  }
  .touch-mode .crash-band h1 {
    font-size: 45px;
    margin: 5px;
  }
  .touch-mode #crash-local {
    font-size: 10px;
  }
}
.touch-mode #pause {
  display: block;
}

/* 0.5 cockpit and centered game menus */
.speed-number strong {
  font-style: italic;
  color: #f5f4dc;
  text-shadow: 0 0 14px #e9e8c622;
}
.speed-track {
  height: 4px;
  transform: skew(-18deg);
}
.junction {
  border-color: #777c812f;
}
#uturn {
  min-height: 40px;
}
#uturn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.modal {
  background: radial-gradient(ellipse at center, #111a2466, #02050be8);
  backdrop-filter: blur(10px);
}
.modal-card {
  background: linear-gradient(155deg, #20252cfa, #080c12fa);
  border: 1px solid #929d9e55;
  border-top: 3px solid #d8f474;
  border-radius: 5px;
  box-shadow:
    0 25px 90px #000c,
    inset 0 1px #ffffff0a;
  text-align: center;
}
.modal h2 {
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.modal .eyebrow {
  color: #d8f474;
}
.modal-card p {
  max-width: 580px;
  margin: 16px auto;
}
.modal-card .fine-grid {
  justify-content: center;
}
.setting-row {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 12px;
}
.setting-row select {
  width: 100%;
  max-width: 300px;
  text-align: center;
}
.modal details {
  text-align: center;
}
.modal summary {
  padding: 9px;
  background: #ffffff06;
}
.modal-card .primary {
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 0 #6a7b3c;
}
.modal-card button:not(.close) {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@media (min-width: 801px) and (max-width: 1100px) {
  nav {
    grid-column: 4;
    grid-row: 1 / 3;
  }
}
.overheated .speed-track i {
  background: #ff6745;
}
#uturn {
  white-space: nowrap;
  font-size: 9px;
}

.modal-card {
  scrollbar-width: thin;
  scrollbar-color: #61715b #10151b;
}
.modal-card select {
  background: #141b23;
  border-color: #5b6671;
  border-radius: 3px;
}
.modal-card .setting-row {
  padding: 9px;
}
.modal-card h2 {
  margin-bottom: 20px;
}
.speed-number {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.speed-number strong {
  font-size: 48px;
  min-width: 0;
}
.speed-body {
  gap: 6px;
}
.speed-number > span {
  font-size: 7px;
  letter-spacing: 2px;
}
.touch-mode .speed-number strong {
  font-size: 38px;
}
.touch-mode .speed-body {
  gap: 4px;
}
.touch-mode .speed-number > span {
  font-size: 6px;
}

#aerial-world {
  pointer-events: none;
  filter: var(--aerial-look, contrast(118%) saturate(128%) brightness(98%));
}
body.crashed #aerial-world {
  filter: grayscale(1) brightness(0.45);
}
.image-settings-button {
  margin: 10px auto;
  display: block;
  width: 100%;
  max-width: 300px;
}
.image-slider {
  margin: 20px 0;
}
.image-slider label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  gap: 16px;
}
.image-slider output {
  font-variant-numeric: tabular-nums;
  color: #d8f474;
}
.image-slider input {
  width: 100%;
  height: 32px;
  accent-color: #d8f474;
  touch-action: pan-y;
}
.image-presets {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.image-presets button {
  min-height: 44px;
  flex: 1;
}
.imagery-tuning .modal {
  backdrop-filter: none;
  background: #03080c33;
}
.imagery-tuning .modal-card {
  width: 360px;
  padding: 25px 26px;
  background: #0c131af5;
}
.imagery-tuning .modal h2 {
  font-size: 34px;
  margin: 12px 0;
}
.imagery-tuning .image-note {
  font-size: 10px;
}
.imagery-tuning .modal-card > .primary {
  width: 100%;
}
/* 0.7: instruments + location + receiver; only Pause remains outside the menu. */
.pause-only,
.touch-mode .pause-only {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  right: max(22px, env(safe-area-inset-right));
  display: block !important;
  z-index: 15;
  min-height: 44px;
  background: #111a21d9;
  border: 1px solid #ffffff44;
  border-radius: 24px;
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: 1px;
  backdrop-filter: blur(10px);
}
#pause span,
.touch-mode #pause span {
  display: inline;
}
.pause-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 24px 0 0;
}
.pause-grid button {
  min-height: 48px;
  font-size: 11px;
}
.pause-grid button:disabled {
  cursor: not-allowed;
}
#toast {
  bottom: 245px;
}
@media (max-width: 700px) {
  .pause-only,
  .touch-mode .pause-only {
    top: 12px;
    right: 12px;
    padding: 8px 13px;
  }
  #toast {
    bottom: auto;
    top: 70px;
  }
}
@media (orientation: landscape) and (max-height: 550px) {
  .touch-mode #toast {
    top: 62px;
  }
  .touch-mode .pause-only {
    width: auto;
  }
}

/* MUTCD R2-1 style plate: white face, inset black border, black legend. */

/* Green street-name blade with retroreflective white border and end bolts. */
body.impact-active .pause-only {
  pointer-events: none;
  opacity: 0.4;
}

/* ═════════════════════════════════════════════════════════════════════
   DASHBOARD + TOUCH CONTROLS (0.10)
   One source of truth for the instrument cluster, signs, radio and
   on-screen pedals. body.compact = phones, small windows, touch devices.
   ═════════════════════════════════════════════════════════════════════ */
footer {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: min(1010px, calc(100% - 40px));
  display: grid;
  grid-template-columns: 180px 78px minmax(180px, 1fr) 286px;
  column-gap: 30px;
  align-items: center;
  padding: 12px 34px 12px 20px;
  border-radius: 92px 22px 22px 92px;
  /* solid (no backdrop blur): blurring the moving map behind the dashboard cost a full extra
     pass over that part of the screen every frame */
  background: linear-gradient(160deg, #24272af7, #0a0c0ffa 65%);
  border: 1px solid #7e85865c;
  box-shadow:
    0 10px 40px #0009,
    inset 0 2px 2px #ffffff15;
}
body.crashed footer,
body.crashed header {
  opacity: 0.25;
}

/* Speedometer */
.speed-panel {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  min-width: 0;
  text-align: center;
}
.speedometer {
  position: relative;
  width: 180px;
  height: 180px;
  margin: auto;
}
.speedometer svg {
  width: 100%;
  height: 100%;
  /* (no filter: a drop-shadow on the dial re-rendered the whole gauge every time the needle moved) */
  border-radius: 50%;
  box-shadow: 0 3px 6px #0007;
}
.dial-rim {
  fill: #0b1014;
  stroke: #596166;
  stroke-width: 3;
}
.dial-marks line {
  stroke: #c4c9bd;
  stroke-width: 1.5;
}
.dial-marks line.redline {
  stroke: #e16c50;
}
.dial-marks text {
  fill: #d9ddcf;
  font: 11px DM;
  text-anchor: middle;
}
#speed-needle {
  transform-origin: 100px 100px;
  transform: rotate(-135deg);
  transition: transform 0.13s linear;
  fill: #f15f43;
}
#speed-needle circle {
  fill: #a5aaa0;
  stroke: #20282e;
  stroke-width: 3;
}
.digital-speed {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 5px;
}
.digital-speed strong {
  font: 600 24px Barlow;
  font-variant-numeric: tabular-nums;
  color: #f4f3dd;
}
.digital-speed span {
  font: 8px DM;
  letter-spacing: 1px;
}
#speed-status {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  font-size: 7px;
  letter-spacing: 0.5px;
  color: #a8b5a1;
}
.speeding #speed,
.speeding #speed-status {
  color: #ffad75;
}
.speed-panel.overheated #speed-status {
  color: #ff765b;
  font-weight: bold;
}

/* Speed limit plate (MUTCD R2-1 style) */
.limit-panel {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.road-limit-sign {
  position: relative;
  width: 74px;
  aspect-ratio: 24 / 30;
  box-sizing: border-box;
  padding: 9px 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(160deg, #ffffff, #ecece6 60%, #dcdcd5);
  color: #121314;
  border-radius: 7px;
  box-shadow:
    0 0 0 1px #8d918c,
    0 6px 12px #000a,
    inset 0 1px 0 #fff;
  transition: box-shadow 0.25s;
}
.road-limit-sign::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2.5px solid #141516;
  border-radius: 5px;
  pointer-events: none;
}
.road-limit-sign > span {
  display: block;
  font:
    700 13px/1.02 Barlow,
    "Arial Narrow",
    sans-serif;
  letter-spacing: 0.9px;
}
.road-limit-sign b {
  display: block;
  font:
    700 40px/1 Barlow,
    "Arial Narrow",
    sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  margin-top: 3px;
}
.limit-panel.over .road-limit-sign {
  animation: limit-warn 1s ease-in-out infinite;
}
@keyframes limit-warn {
  50% {
    box-shadow:
      0 0 0 1px #8d918c,
      0 0 0 4px #e5483b,
      0 0 18px 4px #e5483b88;
  }
}
#limit-source {
  display: block;
  margin: 0;
  font:
    600 7px/1 DM,
    sans-serif;
  letter-spacing: 0.8px;
  color: #8f9a92;
  text-align: center;
  white-space: nowrap;
}

/* Street blade */
.road-panel {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  text-align: center;
}
.road-panel .eyebrow {
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 1.6px;
  color: #cfd6c6;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.street-blade {
  position: relative;
  padding: 4px;
  border-radius: 8px;
  background: linear-gradient(180deg, #1b8a52, #0a6a3b 55%, #06552f);
  box-shadow:
    0 0 0 1px #04381f,
    0 4px 0 #032a17,
    0 8px 14px #000a,
    inset 0 1px 0 #ffffff40;
}
.street-blade::before,
.street-blade::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f1f3ee, #8b938d 70%);
  box-shadow: 0 1px 1px #0007;
  z-index: 1;
}
.street-blade::before {
  left: 9px;
}
.street-blade::after {
  right: 9px;
}
.street-blade.highway {
  background: linear-gradient(180deg, #167a4a, #055a32);
}
.road-panel h2 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.22em;
  margin: 0;
  padding: 9px 22px 8px;
  min-height: 1.15em;
  border: 2px solid #f3f6ef;
  border-radius: 5px;
  font:
    600 28px/1.08 Barlow,
    "Arial Narrow",
    sans-serif;
  letter-spacing: 0.3px;
  color: #fff;
  text-shadow: 0 1px 0 #0005;
  white-space: nowrap;
  overflow: hidden;
}
.road-panel h2 .sfx,
.road-panel h2 .dir {
  font-size: 0.62em;
  letter-spacing: 0.6px;
  flex-shrink: 0;
}
.road-panel h2 .nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.road-panel h2.long {
  font-size: 22px;
}
.road-panel h2.xlong {
  font-size: 18px;
}

/* Police status line under the blade */
#police-status {
  margin: 9px 0 0;
  font-size: 10px;
  color: #ffad75;
}
#police-status.warn {
  color: #ffb27c;
}
#police-status.pullover {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font:
    700 10px/1.2 DM,
    sans-serif;
  letter-spacing: 1.4px;
  color: #fff;
  background: linear-gradient(90deg, #c9202c, #1c55d6);
  background-size: 200% 100%;
  animation: pull-bar 0.5s steps(2) infinite;
}
@keyframes pull-bar {
  to {
    background-position: 100% 0;
  }
}

/* Radio */
.radio-slot {
  grid-column: 4;
  grid-row: 1;
  position: relative;
  width: 286px;
  height: 178px;
  justify-self: end;
}
#dashboard-radio {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
}
.radio-pill,
.radio-close {
  display: none;
}

@media (min-width: 761px) and (max-width: 980px) {
  footer {
    width: calc(100% - 28px);
    grid-template-columns: 140px 62px minmax(120px, 1fr) 256px;
    column-gap: 18px;
    padding: 10px 22px 10px 14px;
  }
  .speedometer {
    width: 140px;
    height: 140px;
  }
  .digital-speed {
    bottom: 18px;
  }
  .road-limit-sign {
    width: 60px;
    padding: 7px 3px 5px;
  }
  .road-limit-sign > span {
    font-size: 11px;
  }
  .road-limit-sign b {
    font-size: 32px;
  }
  .road-panel h2 {
    font-size: 22px;
    padding: 8px 16px 7px;
  }
  .road-panel h2.long {
    font-size: 18px;
  }
  .road-panel h2.xlong {
    font-size: 15px;
  }
  .radio-slot {
    width: 256px;
  }
}

/* ── Compact cluster: one slim strip at the bottom, map gets the screen ── */
.compact footer {
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  bottom: calc(8px + env(safe-area-inset-bottom));
  transform: none;
  width: auto;
  grid-template-columns: 64px 34px minmax(0, 1fr) 50px;
  column-gap: 9px;
  padding: 5px 7px 5px 5px;
  border-radius: 38px 14px 14px 38px;
  background: linear-gradient(160deg, #1c1f22ee, #0a0c0ff2 70%);
  /* no backdrop-filter/transform here: either would trap the fixed radio popover inside the strip */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.compact .speedometer {
  width: 64px;
  height: 64px;
}
.compact .dial-marks text {
  display: none;
}
.compact .digital-speed {
  bottom: 7px;
  gap: 2px;
}
.compact .digital-speed strong {
  font-size: 15px;
}
.compact .digital-speed span {
  display: none;
}
.compact #speed-status {
  display: none;
}
.compact .road-limit-sign {
  width: 34px;
  padding: 4px 1px 2px;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px #8d918c,
    0 3px 6px #0009;
}
.compact .road-limit-sign::before {
  inset: 1.5px;
  border-width: 1.5px;
  border-radius: 3px;
}
.compact .road-limit-sign > span {
  font-size: 5.6px;
  letter-spacing: 0.2px;
}
.compact .road-limit-sign b {
  font-size: 18px;
  margin-top: 1px;
}
.compact #limit-source {
  display: none;
}
.compact .road-panel .eyebrow {
  font-size: 6.5px;
  letter-spacing: 0.9px;
  margin-bottom: 3px;
}
.compact .street-blade {
  padding: 2px;
  border-radius: 5px;
  box-shadow:
    0 0 0 1px #04381f,
    0 2px 0 #032a17,
    0 4px 8px #0009;
}
.compact .street-blade::before,
.compact .street-blade::after {
  display: none;
}
.compact .road-panel h2 {
  font-size: 16px;
  padding: 5px 8px 4px;
  border-width: 1.5px;
  border-radius: 3px;
}
.compact .road-panel h2.long {
  font-size: 14px;
}
.compact .road-panel h2.xlong {
  font-size: 12px;
}
.compact #police-status {
  font-size: 8px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.compact #police-status.pullover {
  padding: 2px 6px;
  font-size: 8px;
  letter-spacing: 0.8px;
}

.compact .radio-pill {
  grid-column: 4;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  background: linear-gradient(#1a1712, #0b0906);
  border: 1px solid #4a3b26;
  box-shadow:
    inset 0 1px 0 #ffffff14,
    0 2px 6px #0008;
  color: #ffb24c;
  text-shadow: 0 0 6px #f90a;
  font-family: monospace;
}
.compact .radio-pill i {
  width: 18px;
  height: 7px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #ffb24c 0 1px, transparent 1px 3px);
  opacity: 0.6;
}
.compact .radio-pill b {
  font: bold 13px/1 monospace;
  letter-spacing: -0.5px;
}
.compact .radio-pill span {
  font-size: 6px;
  letter-spacing: 0.8px;
  color: #b98a4a;
  text-shadow: none;
}
.compact .radio-pill.on span {
  color: #ffcf8a;
}
.compact.radio-expanded .radio-pill {
  border-color: #ffb24c;
  box-shadow: 0 0 0 2px #ffb24c55;
}
.compact .radio-slot {
  display: none;
  grid-column: auto;
  grid-row: auto;
}
.compact.radio-expanded .radio-slot {
  display: block;
  position: fixed;
  z-index: 13;
  left: 50%;
  top: calc(66px + env(safe-area-inset-top));
  transform: translateX(-50%);
  width: min(330px, calc(100% - 24px));
  height: 190px;
  border-radius: 10px;
  box-shadow: 0 12px 34px #000c;
}
.compact .radio-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1;
  right: -8px;
  top: -12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0;
  background: #15181b;
  border: 1px solid #ffffff55;
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

/* On-screen controls: translucent, sitting just above the cluster */
#touch-controls {
  position: fixed;
  z-index: 12;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: calc(84px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#touch-controls > div {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
#touch-controls button {
  pointer-events: auto;
  touch-action: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, #ffffff33, #ffffff0d 70%),
    #0d1214a8;
  border: 1.5px solid #ffffff73;
  box-shadow:
    0 3px 10px #0004,
    inset 0 1px 0 #ffffff40;
  color: #fff;
  text-shadow: 0 1px 2px #0009;
  transition:
    transform 0.06s,
    background 0.06s;
}
#touch-controls button svg {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 1px 1px #0008);
}
#touch-controls button span {
  font:
    700 7.5px DM,
    Arial,
    sans-serif;
  letter-spacing: 0.8px;
  opacity: 0.85;
}
#touch-controls button[data-drive="brake"],
#touch-controls button[data-drive="gas"] {
  border-radius: 16px;
  width: 62px;
}
#touch-controls button[data-drive="brake"] {
  height: 70px;
  border-color: #ff9f86bb;
  background: radial-gradient(circle at 50% 30%, #ff8c6a38, #ff8c6a10 75%);
}
#touch-controls button[data-drive="gas"] {
  height: 92px;
  border-color: #d8f474cc;
  background: radial-gradient(circle at 50% 30%, #d8f47440, #d8f47412 75%);
}
#touch-controls button.pressed {
  transform: scale(0.93);
  background: #ffffff59;
  box-shadow:
    0 0 0 3px #ffffff33,
    inset 0 2px 8px #0004;
}
#touch-controls button[data-drive="gas"].pressed {
  background: #d8f47488;
}
#touch-controls button[data-drive="brake"].pressed {
  background: #ff8c6a77;
}

.compact #toast {
  top: calc(66px + env(safe-area-inset-top));
  bottom: auto;
}

@media (orientation: landscape) and (max-height: 550px) {
  /* Pedals sit beside a centred cluster so the map keeps its height. */
  .compact footer {
    left: calc(158px + env(safe-area-inset-left));
    right: calc(158px + env(safe-area-inset-right));
    max-width: 560px;
    margin: 0 auto;
  }
  #touch-controls {
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
  #touch-controls > div {
    gap: 8px;
  }
  #touch-controls button {
    width: 62px;
    height: 62px;
  }
  #touch-controls button[data-drive="brake"] {
    height: 64px;
    width: 58px;
  }
  #touch-controls button[data-drive="gas"] {
    height: 84px;
    width: 58px;
  }
  .compact.radio-expanded .radio-slot {
    top: calc(10px + env(safe-area-inset-top));
  }
  .compact #toast {
    top: calc(12px + env(safe-area-inset-top));
  }
}

/* Police lights wash */
/* Crash impact */
#impact-flash {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 55%, #fff8 0, #ffd7a033 30%, #8a0f0f55 100%);
}
body.impact-active #impact-flash {
  animation: impact-flash 0.7s ease-out forwards;
}
@keyframes impact-flash {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
body.impact-active footer {
  animation: dash-jolt 0.45s cubic-bezier(0.3, 0.7, 0.4, 1);
}
@keyframes dash-jolt {
  0% {
    translate: 0 0;
  }
  15% {
    translate: -7px 4px;
  }
  35% {
    translate: 6px -3px;
  }
  55% {
    translate: -3px 2px;
  }
  80% {
    translate: 1px 0;
  }
  100% {
    translate: 0 0;
  }
}
body.impact-active .pause-only {
  pointer-events: none;
  opacity: 0.4;
}
@media (prefers-reduced-motion: reduce) {
  body.impact-active footer {
    animation: none;
  }
}

#toast {
  z-index: 7;
}

/* Trip HUD: next turn + compass to home */
.trip-hud {
  position: absolute;
  z-index: 7;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 290px;
  max-width: min(520px, calc(100% - 300px));
  padding: 8px 10px 8px 8px;
  border-radius: 12px;
  background: linear-gradient(160deg, #1f1a12f0, #0b0906f2);
  border: 1px solid #ffb24c66;
  box-shadow: 0 8px 26px #0009;
  color: #f6ead6;
}
.trip-hud[hidden] {
  display: none;
}
.trip-turn {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 9px;
  background: #ffb24c;
  color: #1d1405;
  display: grid;
  place-items: center;
  font:
    700 28px/1 Barlow,
    sans-serif;
}
.trip-turn svg {
  width: 30px;
  height: 30px;
}
.trip-hud.compass .trip-turn {
  background: #2a2216;
  color: #ffb24c;
  border: 1px solid #ffb24c55;
}
.trip-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.trip-text b {
  font:
    600 18px/1.1 Barlow,
    sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trip-text span {
  font:
    10px DM,
    sans-serif;
  letter-spacing: 0.4px;
  color: #d6bf98;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trip-compass {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.trip-compass i {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid #ffb24c88;
  position: relative;
  transition: transform 0.15s linear;
}
.trip-compass i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  margin-left: -6px;
  border: 6px solid transparent;
  border-bottom: 14px solid #ffb24c;
  border-top: 0;
}
.trip-compass small {
  font:
    700 6.5px DM,
    sans-serif;
  letter-spacing: 1px;
  color: #c9a36b;
}
.trip-hud.offroute {
  border-color: #ff8c6a;
}
.compact .trip-hud {
  top: calc(58px + env(safe-area-inset-top));
  min-width: 0;
  width: calc(100% - 20px);
  max-width: 460px;
  padding: 6px 8px 6px 6px;
  gap: 9px;
}
.compact .trip-turn {
  width: 38px;
  height: 38px;
  font-size: 22px;
}
.compact .trip-turn svg {
  width: 24px;
  height: 24px;
}
.compact .trip-text b {
  font-size: 15px;
}
.compact .trip-text span {
  font-size: 9px;
}
.compact.trip-active #toast {
  top: calc(130px + env(safe-area-inset-top));
}
.trip-active #toast {
  bottom: auto;
  top: 86px;
}
@media (orientation: landscape) and (max-height: 550px) {
  .compact .trip-hud {
    top: calc(8px + env(safe-area-inset-top));
    width: auto;
    max-width: calc(100% - 340px);
  }
  .compact.trip-active #toast {
    top: calc(66px + env(safe-area-inset-top));
  }
}

/* Attribution stays legible above the compact cluster's corner */
.compact .attribution {
  top: calc(44px + env(safe-area-inset-top));
  bottom: auto;
  left: 16px;
  font-size: 7px;
  opacity: 0.8;
}
.compact.trip-active .attribution {
  top: calc(112px + env(safe-area-inset-top));
}
@media (orientation: landscape) and (max-height: 550px) {
  .compact.trip-active .attribution {
    top: calc(44px + env(safe-area-inset-top));
  }
}

/* Arrival card */
.arrival-hero {
  font:
    800 46px/0.95 Barlow,
    sans-serif;
  color: #ffb24c;
  letter-spacing: 1px;
  margin: 6px 0 4px;
}
.arrival-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 16px 0;
}
.arrival-grid div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.arrival-grid b {
  font:
    600 26px Barlow,
    sans-serif;
}
.arrival-grid span {
  font-size: 8px;
  letter-spacing: 1px;
  color: #a8b5a1;
}
.arrival-best {
  color: #d8f474;
  font-weight: 700;
}
@media (max-width: 520px) {
  .arrival-grid {
    grid-template-columns: 1fr 1fr;
  }
  .arrival-hero {
    font-size: 36px;
  }
}
.compact.radio-expanded footer {
  z-index: 14;
}

/* ═════════════════════════════════════════════════════════════════════
   TITLE SCREEN (0.11) — game menu: logo, car on a turntable, paint,
   game mode, and a short menu. Everything else lives in Settings.
   ═════════════════════════════════════════════════════════════════════ */
.modal {
  z-index: 30;
}
.title-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: linear-gradient(
      115deg,
      transparent 0 58%,
      #d8f47410 58% 61%,
      transparent 61% 63%,
      #d8f4740a 63% 64%,
      transparent 64%
    ),
    radial-gradient(ellipse at 70% 45%, #1b2a1a99, transparent 60%),
    radial-gradient(ellipse at center, #0b1116cc, #020407f5 80%);
  backdrop-filter: blur(8px) saturate(0.8);
  -webkit-backdrop-filter: blur(8px) saturate(0.8);
}
.title-screen[hidden] {
  display: none;
}
.title-shell {
  width: min(1080px, 100%);
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  grid-template-areas: "brand garage" "panel garage";
  gap: 18px 48px;
  align-items: center;
}
.title-brand {
  grid-area: brand;
  align-self: end;
}
.title-label {
  font:
    700 10px DM,
    sans-serif;
  letter-spacing: 3px;
  color: #8d9a8f;
  margin: 0 0 9px;
  text-transform: uppercase;
}
.title-label span {
  color: #f1f5e9;
  margin-left: 8px;
  letter-spacing: 1.5px;
}

/* Car on a lit turntable */
.title-garage {
  grid-area: garage;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.turntable {
  position: relative;
  width: min(440px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #d8f47426 0, #d8f4740d 38%, transparent 62%),
    repeating-radial-gradient(circle, transparent 0 34px, #ffffff0d 34px 35px),
    radial-gradient(circle, #1a2220 0 60%, #0d1214 61% 63%, transparent 64%);
  box-shadow:
    inset 0 0 0 1px #ffffff10,
    0 30px 60px -30px #000;
}
.turntable::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 2px solid #d8f47433;
  box-shadow: 0 0 40px #d8f47422;
}
#garage-vehicle {
  position: relative;
  z-index: 1;
  width: 66%;
  height: auto;
  filter: drop-shadow(0 14px 14px #000b);
  animation: turntable 22s linear infinite;
}
@keyframes turntable {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  #garage-vehicle {
    animation: none;
    transform: rotate(-12deg);
  }
}
.title-garage .title-label {
  margin: 0;
}
.swatches {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.swatch {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #ffffff66, transparent 45%), var(--sw);
  border: 2px solid #0008;
  box-shadow:
    0 0 0 2px #ffffff22,
    0 4px 10px #0008;
  transition:
    transform 0.14s,
    box-shadow 0.14s;
}
/* hover: keep the paint, just grow the ring around it */
.swatch:hover {
  background: radial-gradient(circle at 35% 30%, #ffffff66, transparent 45%), var(--sw);
  transform: scale(1.08);
  box-shadow:
    0 0 0 3px #0b1013,
    0 0 0 6px #ffffff66,
    0 6px 14px #000a;
}
.swatch[aria-checked="true"]:hover {
  transform: scale(1.18);
  box-shadow:
    0 0 0 3px #0b1013,
    0 0 0 7px var(--lime),
    0 6px 14px #000a;
}
.swatch[aria-checked="true"] {
  transform: scale(1.15);
  box-shadow:
    0 0 0 3px #0b1013,
    0 0 0 5px var(--lime),
    0 6px 14px #000a;
}
.swatch:focus-visible {
  outline: 2px dashed var(--lime);
  outline-offset: 5px;
}

/* Right-hand panel: mode + menu */
.title-panel {
  grid-area: panel;
  align-self: start;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.title-panel[hidden] {
  display: none;
}
.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 26px;
}
.mode-opt,
.menu-item,
.seg button,
#home-find,
.menu-back {
  font-family: Barlow, sans-serif;
  font-style: italic;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  transform: skewX(-10deg);
}
.mode-opt > *,
.menu-item > *,
.seg button > *,
#home-find > * {
  display: block;
  transform: skewX(10deg);
}
.mode-opt {
  padding: 12px 14px;
  text-align: left;
  background: #ffffff0a;
  border: 1px solid #ffffff26;
  color: #cfd8c8;
}
.mode-opt b {
  font:
    italic 800 22px/1 Barlow,
    sans-serif;
  letter-spacing: 1px;
}
.mode-opt small {
  margin-top: 4px;
  font:
    600 10px DM,
    sans-serif;
  font-style: normal;
  letter-spacing: 0.4px;
  text-transform: none;
  color: #9aa79a;
}
.mode-opt[aria-checked="true"] {
  background: var(--lime);
  border-color: var(--lime);
  color: #11180e;
  box-shadow: 0 8px 24px #d8f47433;
}
.mode-opt[aria-checked="true"] small {
  color: #2c3a1d;
}
.title-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 22px;
  text-align: left;
  background: linear-gradient(90deg, #ffffff12, #ffffff03);
  border: 0;
  border-left: 4px solid transparent;
  color: #eef3e4;
  transition:
    background 0.15s,
    border-color 0.15s,
    padding-left 0.15s;
}
.menu-item span {
  font:
    italic 800 30px/1 Barlow,
    sans-serif;
  letter-spacing: 1.5px;
}
.menu-item small {
  margin-top: 4px;
  font:
    500 11px DM,
    sans-serif;
  font-style: normal;
  text-transform: none;
  color: #9aa79a;
}
.menu-item:hover:not([disabled]),
.menu-item:focus-visible {
  outline: none;
  border-left-color: var(--lime);
  padding-left: 32px;
  background: linear-gradient(90deg, #d8f4742e, #d8f47405);
}
.menu-item:hover:not([disabled])::after,
.menu-item:focus-visible::after {
  content: "›";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) skewX(10deg);
  font: 800 32px Barlow;
  color: var(--lime);
}
.menu-item.menu-main {
  background: var(--lime);
  color: #11180e;
  padding: 18px 22px;
  box-shadow: 0 10px 30px #d8f47433;
}
.menu-item.menu-main span {
  font-size: 40px;
}
.menu-item.menu-main:hover:not([disabled]),
.menu-item.menu-main:focus-visible {
  background: #e6fb98;
  border-left-color: #11180e;
}
.menu-item.menu-main:hover:not([disabled])::after,
.menu-item.menu-main:focus-visible::after {
  color: #11180e;
}
.menu-item[disabled] {
  cursor: progress;
  opacity: 0.55;
}
.load-bar {
  margin-top: 18px;
}
/* real progress: the lime fill is the loaded share (set from app.js as --p) */
.load-bar i {
  position: relative;
  display: block;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: #ffffff14;
}
.load-bar i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  border-radius: 2px;
  background: linear-gradient(90deg, #9fbf4a, var(--lime));
  box-shadow: 0 0 8px var(--lime);
  transition: width 0.25s ease-out;
}
.load-bar small {
  display: block;
  margin-top: 8px;
  font:
    600 10px DM,
    sans-serif;
  letter-spacing: 1.5px;
  color: #8d9a8f;
  text-transform: uppercase;
}
.roads-ready .load-bar {
  display: none;
}

/* Get Home sub-menu */
.menu-back {
  align-self: flex-start;
  margin-bottom: 16px;
  padding: 6px 14px;
  background: none;
  border: 1px solid #ffffff2a;
  color: #cfd8c8;
  font:
    italic 700 14px Barlow,
    sans-serif;
  letter-spacing: 1px;
}
#home-form {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
#home-address {
  flex: 1;
  min-width: 0;
  font:
    15px DM,
    sans-serif;
  color: #f4efe2;
  background: #0b0f12;
  border: 1px solid #ffffff30;
  border-radius: 3px;
  padding: 12px 14px;
}
#home-address:focus {
  outline: 2px solid var(--lime);
  outline-offset: 0;
}
#home-find {
  padding: 0 18px;
  background: #ffffff14;
  border: 1px solid #ffffff30;
  color: #eef3e4;
  font:
    italic 800 18px Barlow,
    sans-serif;
}
#home-results {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 6px;
}
#home-results button {
  text-align: left;
  font-size: 12px;
  background: #ffffff0a;
  border: 1px solid #ffffff22;
  color: #e8eee0;
  border-radius: 3px;
  padding: 9px 12px;
}
#home-results button:hover,
#home-results button:focus-visible {
  border-color: var(--lime);
  outline: none;
}
#home-status {
  margin: 0 0 18px;
  min-height: 16px;
  font-size: 12px;
  color: #cfe39a;
}
.seg {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.seg button {
  flex: 1;
  padding: 11px 6px;
  background: #ffffff0a;
  border: 1px solid #ffffff26;
  color: #cfd8c8;
  font:
    italic 800 15px Barlow,
    sans-serif;
  letter-spacing: 0.8px;
}
.seg button[aria-checked="true"] {
  background: var(--lime);
  border-color: var(--lime);
  color: #11180e;
}
.home-setup .menu-main {
  margin-top: 4px;
}

/* Phones: one column, everything on one screen */
@media (max-width: 760px) {
  .title-screen {
    place-items: start center;
  }
  .title-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "garage" "panel";
    gap: 14px;
    text-align: center;
  }
  .title-brand {
    align-self: auto;
  }
  .turntable {
    width: min(250px, 62vw);
  }
  .title-garage {
    gap: 12px;
  }
  .swatch {
    width: 32px;
    height: 32px;
  }
  .swatches {
    gap: 10px;
  }
  .title-label {
    text-align: center;
  }
  .mode-toggle {
    margin-bottom: 16px;
  }
  .mode-opt b {
    font-size: 18px;
  }
  .menu-item {
    align-items: center;
    text-align: center;
    padding: 11px 16px;
  }
  .menu-item span {
    font-size: 24px;
  }
  .menu-item.menu-main span {
    font-size: 32px;
  }
  .menu-item:hover:not([disabled]),
  .menu-item:focus-visible {
    padding-left: 16px;
  }
}
@media (orientation: landscape) and (max-height: 550px) {
  .title-screen {
    place-items: center;
  }
  .title-shell {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "brand garage" "panel garage";
    gap: 10px 28px;
    text-align: left;
  }
  .turntable {
    width: min(230px, 56vh);
  }
  .title-garage {
    gap: 10px;
  }
  .swatch {
    width: 28px;
    height: 28px;
  }
  .mode-toggle {
    margin-bottom: 10px;
  }
  .mode-opt {
    padding: 8px 10px;
  }
  .mode-opt b {
    font-size: 16px;
  }
  .mode-opt small {
    display: none;
  }
  .title-menu {
    gap: 6px;
  }
  .menu-item {
    padding: 8px 16px;
    align-items: flex-start;
    text-align: left;
  }
  .menu-item span {
    font-size: 20px;
  }
  .menu-item.menu-main {
    padding: 10px 16px;
  }
  .menu-item.menu-main span {
    font-size: 26px;
  }
  .menu-item small {
    display: none;
  }
  .title-label {
    text-align: left;
    margin-bottom: 6px;
  }
}
.setting-group {
  margin: 18px 0 4px;
  font:
    700 10px DM,
    sans-serif;
  letter-spacing: 3px;
  color: var(--lime);
  text-align: left;
}
.modal-card .setting-row {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
  text-align: left;
}
.modal-card .setting-row label {
  font-size: 13px;
  color: #dfe6d6;
}
.modal-card .setting-row select {
  width: auto;
  min-width: 0;
  max-width: 58%;
  flex: 0 1 230px;
  text-align: left;
  font-size: 13px;
}
/* Hide the driving HUD while the title menu is up */
.on-title footer,
.on-title header,
.on-title #pause,
.on-title #touch-controls,
.on-title #trip-hud,
.on-title #toast {
  visibility: hidden;
}
.on-title .attribution {
  z-index: 21;
  top: auto;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0.6;
}

/* ═════════════ Online (0.12) ═════════════ */
.online-chip {
  position: absolute;
  z-index: 15;
  top: max(28px, calc(env(safe-area-inset-top) + 14px));
  right: max(150px, calc(env(safe-area-inset-right) + 140px));
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 20px;
  background: #111a21d9;
  border: 1px solid #ffffff33;
  color: #dfe6d6;
  font:
    700 9px DM,
    sans-serif;
  letter-spacing: 1.2px;
  cursor: pointer;
}
.online-chip[hidden] {
  display: none;
}
.online-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7d8a83;
}
.online-chip[data-state="online"] i {
  background: #63e07a;
  box-shadow: 0 0 8px #63e07a;
}
.online-chip[data-state="connecting"] i {
  background: #e8c24a;
  animation: chip-blink 1s steps(2) infinite;
}
@keyframes chip-blink {
  50% {
    opacity: 0.3;
  }
}
.compact .online-chip {
  top: calc(env(safe-area-inset-top) + 18px);
  right: calc(env(safe-area-inset-right) + 112px);
  padding: 5px 9px;
  font-size: 8px;
}
.compact.trip-active .online-chip {
  top: calc(env(safe-area-inset-top) + 18px);
}
.modal-card .setting-row input {
  flex: 0 1 230px;
  max-width: 58%;
  min-width: 0;
  font:
    13px DM,
    sans-serif;
  color: #edf3e5;
  background: #24332b;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px;
}
.modal-card .setting-row label small {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: #8d9a8f;
  line-height: 1.35;
}

/* ═════════════ Modes + Get Home Safe (0.13) ═════════════ */
/* Free Roam: no speed limits, so the limit plate leaves the cluster entirely. */
.free-roam .limit-panel {
  display: none;
}
.free-roam footer {
  grid-template-columns: 180px minmax(180px, 1fr) 286px;
}
.free-roam .road-panel {
  grid-column: 2;
}
.free-roam .radio-slot {
  grid-column: 3;
}
@media (min-width: 761px) and (max-width: 980px) {
  .free-roam footer {
    grid-template-columns: 140px minmax(120px, 1fr) 256px;
  }
}
.compact.free-roam footer {
  grid-template-columns: 64px minmax(0, 1fr) 50px;
}
.compact.free-roam .radio-pill {
  grid-column: 3;
}
@media (orientation: landscape) and (max-height: 550px) {
  .compact.free-roam footer {
    grid-template-columns: 90px minmax(75px, 1fr) 50px;
  }
}

/* Countdown clock in the trip HUD */
.trip-clock {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: 2px 8px;
  border-left: 1px solid #ffb24c33;
}
.trip-clock b {
  font:
    italic 800 26px/1 Barlow,
    sans-serif;
  font-variant-numeric: tabular-nums;
  color: #fff3dc;
}
.trip-clock small {
  margin-top: 2px;
  font:
    700 6.5px DM,
    sans-serif;
  letter-spacing: 1px;
  color: #c9a36b;
}
.trip-clock[data-state="hurry"] b {
  color: #ffcf4a;
  animation: clock-pulse 1s ease-in-out infinite;
}
.trip-clock[data-state="late"] b {
  color: #ff6b5a;
}
.trip-clock[data-state="late"] small {
  color: #ff8a7a;
}
@keyframes clock-pulse {
  50% {
    opacity: 0.55;
  }
}
.trip-hud[data-nav="none"] .trip-compass {
  display: none;
}
.trip-hud[data-nav="none"] .trip-turn {
  background: #2a2216;
  color: #ffb24c;
  border: 1px solid #ffb24c55;
}
.compact .trip-clock {
  min-width: 52px;
  padding: 0 4px 0 7px;
}
.compact .trip-clock b {
  font-size: 21px;
}
.compact .trip-compass i {
  width: 24px;
  height: 24px;
}
.compact .trip-compass i::before {
  top: 2px;
  border-width: 5px;
  border-bottom-width: 11px;
}

/* Title: ETA under each distance, nav description */
.seg-eta button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px;
}
.seg-eta button small {
  font:
    700 9px DM,
    sans-serif;
  font-style: normal;
  letter-spacing: 0.6px;
  opacity: 0.75;
}
.home-note {
  margin: -10px 0 18px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #a8b5a1;
}

/* Arrival stars */
.arrival-stars {
  font-size: 34px;
  letter-spacing: 6px;
  color: #ffcf4a;
  text-shadow: 0 0 18px #ffcf4a66;
  margin-top: 8px;
}
.arrival-stars i {
  font-style: normal;
  color: #ffffff22;
  text-shadow: none;
}
.arrival-grid b.good {
  color: #b9f26a;
}
.arrival-grid b.bad {
  color: #ff7a66;
}
/* Phones: the Get Home Safe setup needs the room more than the turntable does. */
@media (max-width: 760px), (orientation: landscape) and (max-height: 550px) {
  .title-shell:has(#home-setup:not([hidden])) .title-garage {
    display: none;
  }
  .title-shell:has(#home-setup:not([hidden])) {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "panel";
  }
}

/* ═════════════ Badges + ghost (0.14) ═════════════ */
.badge-modal .modal-card {
  border-top-color: #f2c23d;
  background: radial-gradient(ellipse at 50% 0%, #3a2d0e, transparent 60%),
    linear-gradient(155deg, #20252cfa, #080c12fa);
}
.badge-card .eyebrow {
  color: #f2c23d;
}
.badge-medal {
  width: 104px;
  height: 104px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #4a2f05;
  background: radial-gradient(circle at 35% 30%, #fff1b8, #f2c23d 55%, #b9821a);
  box-shadow:
    0 0 0 4px #7a5410,
    0 0 0 8px #f2c23d33,
    0 0 50px #f2c23d77;
  animation: medal-in 0.7s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes medal-in {
  from {
    transform: scale(0.2) rotate(-40deg);
    opacity: 0;
  }
}
.badge-name {
  font-size: 36px !important;
  line-height: 1.05 !important;
}
.badge-desc {
  font-size: 13px !important;
}
.badge-desc span {
  color: #d9c08a;
}
.badge-town {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font:
    700 11px DM,
    sans-serif;
  letter-spacing: 1.5px;
  color: #f2c23d;
}
.badge-bar {
  height: 8px;
  border-radius: 4px;
  background: #ffffff14;
  overflow: hidden;
  margin: 6px 0 4px;
}
.badge-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b9821a, #f2c23d);
  border-radius: 4px;
}
.badge-complete {
  font:
    italic 800 22px Barlow,
    sans-serif !important;
  color: #f2c23d !important;
  letter-spacing: 1px;
}
.badge-total {
  font-size: 11px !important;
  color: #9aa79a !important;
}
.badge-book {
  text-align: left;
  max-height: 52vh;
  overflow: auto;
  margin: 10px 0;
  padding-right: 4px;
}
.badge-book details {
  border-bottom: 1px solid #ffffff14;
  padding: 6px 0;
}
.badge-book summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  cursor: pointer;
  padding: 6px 2px;
  list-style: none;
}
.badge-book summary b {
  font:
    700 13px DM,
    sans-serif;
  color: #eef3e4;
}
.badge-book summary span {
  font:
    700 12px DM,
    sans-serif;
  color: #f2c23d;
}
.badge-book summary i {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f2c23d var(--p), #ffffff14 var(--p));
}
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
  padding: 8px 0 4px;
}
.badge-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #ffffff08;
  color: #6d766f;
  font-size: 11px;
  line-height: 1.25;
}
.badge-chip svg {
  flex: none;
}
.badge-chip.got {
  background: #f2c23d14;
  color: #f6e2a6;
}
.badge-chip.got svg {
  color: #f2c23d;
}
.ghost-note {
  color: #bfe8ff !important;
  font-size: 12px !important;
}
@media (max-width: 760px) {
  .turntable {
    width: min(215px, 54vw);
  }
  .title-menu {
    gap: 6px;
  }
  .menu-item {
    padding-top: 9px;
    padding-bottom: 9px;
  }
}

/* ═════════════ Traffic-stop scene (0.15) ═════════════ */
.stop-scene {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 4px auto 14px;
  border-radius: 8px;
  border: 1px solid #ffffff1c;
  box-shadow: 0 10px 30px #0008;
}
.stop-scene * {
  transform-box: view-box;
}
.stop-scene .ss-bar-r,
.stop-scene .ss-wash-r {
  animation: ss-flash 0.5s steps(1) infinite;
}
.stop-scene .ss-bar-b,
.stop-scene .ss-wash-b {
  animation: ss-flash 0.5s steps(1) infinite reverse;
}
@keyframes ss-flash {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.12;
  }
}
.stop-scene .ss-officer {
  animation: ss-walk 1.5s cubic-bezier(0.3, 0.6, 0.4, 1) both;
}
@keyframes ss-walk {
  from {
    transform: translateX(150px);
  }
  to {
    transform: translateX(0);
  }
}
.stop-scene .ss-bob {
  animation: ss-bob 0.3s ease-in-out 5 alternate;
}
@keyframes ss-bob {
  to {
    transform: translateY(-2.5px);
  }
}
.stop-scene .ss-arm {
  transform-origin: 147px 86px;
  animation: ss-arm 3.6s ease-in-out both;
}
@keyframes ss-arm {
  0%,
  40% {
    transform: rotate(-62deg);
  }
  55%,
  82% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-62deg);
  }
}
.stop-scene .ss-ticket {
  animation: ss-ticket 3.8s ease-in-out both;
}
@keyframes ss-ticket {
  0%,
  52% {
    opacity: 0;
    transform: translate(0, 0);
  }
  56% {
    opacity: 1;
    transform: translate(0, 0);
  }
  70% {
    opacity: 1;
    transform: translate(-6px, 1px) rotate(-6deg);
  }
  82% {
    opacity: 1;
    transform: translate(-12px, 3px) rotate(-10deg);
  }
  100% {
    opacity: 0;
    transform: translate(-16px, 3px);
  }
}
.stop-scene .ss-driver-arm {
  transform-origin: 104px 94px;
  animation: ss-reach 3.8s ease-in-out both;
}
@keyframes ss-reach {
  0%,
  58% {
    transform: scaleX(0.05);
  }
  66%,
  82% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0.05);
  }
}
.stop-scene .ss-hat {
  transform-origin: 152px 61px;
  animation: ss-tip 1s ease-in-out 3.9s both;
}
@keyframes ss-tip {
  40% {
    transform: rotate(-14deg) translateY(-2px);
  }
  100% {
    transform: rotate(0);
  }
}
.stop-scene .ss-stache {
  transform-origin: 145px 74px;
  animation: ss-stache 1.6s ease-in-out infinite;
}
@keyframes ss-stache {
  0%,
  80%,
  100% {
    transform: none;
  }
  88% {
    transform: scaleY(0.7) rotate(4deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stop-scene * {
    animation: none !important;
  }
  .stop-scene .ss-arm,
  .stop-scene .ss-driver-arm {
    transform: none;
  }
  .stop-scene .ss-ticket {
    opacity: 1;
    transform: translate(-6px, 1px);
  }
}
.ticket-modal .modal-card {
  border-top-color: #e34b4b;
}

/* Settings: erase-all link */
#modal .danger-link {
  background: none;
  border: 1px solid #ff7a6a55;
  color: #ff9b8c;
  font-size: 12px;
}

/* FPS meter, top right under Pause (Settings → View → FPS counter). */
.fps-meter {
  position: absolute;
  z-index: 15;
  top: calc(max(20px, env(safe-area-inset-top)) + 54px);
  right: max(22px, env(safe-area-inset-right));
  padding: 5px 10px;
  border-radius: 10px;
  background: #0b1216cc;
  border: 1px solid #ffffff22;
  text-align: right;
  pointer-events: none;
  font: 700 12px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: #b9f27a;
  font-variant-numeric: tabular-nums;
}
.fps-meter small {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: #9fb0a6;
  letter-spacing: 0.3px;
}
.fps-meter.warn b {
  color: #ffb347;
}
.on-title .fps-meter,
body.crashed .fps-meter {
  display: none;
}
@media (max-width: 700px) {
  .fps-meter {
    top: 58px;
    right: 12px;
    padding: 4px 8px;
  }
  #toast {
    top: 96px;
  }
}

/* ═════════════ Dashboard 0.21: limit plate under the street blade, clean speedometer ═════════════ */
footer,
.free-roam footer {
  grid-template-columns: 180px minmax(200px, 1fr) 286px;
}
.road-panel,
.free-roam .road-panel {
  grid-column: 2;
  position: relative;
}
.radio-slot,
.free-roam .radio-slot {
  grid-column: 3;
}
@media (min-width: 761px) and (max-width: 980px) {
  footer,
  .free-roam footer {
    grid-template-columns: 140px minmax(140px, 1fr) 256px;
  }
}
.road-panel .limit-panel {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.road-panel .road-limit-sign {
  width: 58px;
  padding: 7px 3px 5px;
}
.road-panel .road-limit-sign > span {
  font-size: 10.5px;
}
.road-panel .road-limit-sign b {
  font-size: 31px;
}
/* City / town name: larger and bold */
.road-panel .eyebrow,
#locality {
  font:
    800 15px/1.1 Barlow,
    "Arial Narrow",
    sans-serif;
  letter-spacing: 1.4px;
  color: #eef3e4;
  margin-bottom: 8px;
}
/* Speed readout: bigger number, MPH underneath */
.digital-speed {
  flex-direction: column;
  align-items: center;
  gap: 0;
  bottom: 18px;
}
.digital-speed strong {
  font: 700 34px/0.95 Barlow;
}
.digital-speed span {
  font: 700 9px/1 DM;
  letter-spacing: 1.6px;
  color: #aeb9a8;
  margin-top: 2px;
}
/* Pull-over / speeding warning floats above the dashboard instead of under the blade */
#police-status {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 18px);
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: 14px;
  background: #140d0bdd;
  border: 1px solid #ffad7555;
  font: 700 11px/1.2 DM, sans-serif;
}
#police-status[hidden] {
  display: none;
}

/* compact strip */
.compact footer,
.compact.free-roam footer {
  grid-template-columns: 64px minmax(0, 1fr) 50px;
}
.compact .radio-pill,
.compact.free-roam .radio-pill {
  grid-column: 3;
}
@media (orientation: landscape) and (max-height: 550px) {
  .compact footer,
  .compact.free-roam footer {
    grid-template-columns: 90px minmax(75px, 1fr) 50px;
  }
}
.compact .road-panel .limit-panel {
  margin-top: 4px;
}
.compact .road-panel .road-limit-sign {
  width: 26px;
  padding: 3px 1px 1px;
}
.compact .road-panel .road-limit-sign > span {
  font-size: 4.4px;
}
.compact .road-panel .road-limit-sign b {
  font-size: 13px;
}
.compact .road-panel .eyebrow,
.compact #locality {
  font-size: 9px;
  letter-spacing: 0.8px;
  margin-bottom: 3px;
}
.compact .digital-speed {
  bottom: 9px;
}
.compact .digital-speed strong {
  font-size: 18px;
}
.compact .digital-speed span {
  display: block;
  font-size: 5.5px;
  letter-spacing: 0.8px;
  margin-top: 1px;
}
.compact #police-status {
  bottom: calc(100% + 10px);
  font-size: 9px;
  max-width: none;
  overflow: visible;
}
/* the strip is a little taller now (limit plate under the blade): lift the portrait touch controls */
#touch-controls {
  bottom: calc(108px + env(safe-area-inset-bottom));
}
@media (orientation: landscape) and (max-height: 550px) {
  #touch-controls {
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

/* Crash screen: local-news card */
.crash-news {
  position: relative;
  margin: 6px auto 0;
  max-width: 560px;
  padding: 16px 20px 16px;
  text-align: left;
  background: linear-gradient(180deg, #f7f3e8, #e9e2d0);
  color: #1b1a17;
  border-radius: 4px;
  box-shadow:
    0 10px 30px #000a,
    inset 0 0 0 1px #fff8;
  transform: rotate(-0.6deg);
  animation: news-drop 0.5s 0.15s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.crash-news::before {
  content: "THE QUEEN CITY DISPATCH";
  display: block;
  font: 800 10px/1 Barlow, serif;
  letter-spacing: 3px;
  color: #6d665a;
  border-bottom: 2px solid #1b1a17;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.news-kicker {
  display: inline-block;
  font: 800 9px/1 DM, sans-serif;
  letter-spacing: 1.6px;
  color: #fff;
  background: #c4262e;
  padding: 3px 6px;
  border-radius: 2px;
}
.crash-news h3 {
  margin: 8px 0 6px;
  font: 800 22px/1.15 Barlow, Georgia, serif;
  letter-spacing: -0.2px;
  color: #111;
  text-transform: none;
}
.crash-news p {
  margin: 0;
  font: italic 13px/1.35 Georgia, "Times New Roman", serif;
  color: #3d3a33;
}
@keyframes news-drop {
  from {
    opacity: 0;
    transform: translateY(14px) rotate(-3deg) scale(0.96);
  }
}
@media (max-width: 700px) {
  .crash-news {
    padding: 12px 14px;
  }
  .crash-news h3 {
    font-size: 17px;
  }
  .crash-news p {
    font-size: 11.5px;
  }
}

/* ═════════════ Scene kit (illustrated vignettes: missions, traffic stop) ═════════════ */
.sk-scene {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 0 0 14px;
  box-shadow:
    0 12px 32px #0008,
    inset 0 0 0 1px #ffffff14;
  background: #0d1418;
}
.sk-bob {
  animation: sk-bob 1.6s ease-in-out infinite;
}
@keyframes sk-bob {
  50% {
    translate: 0 -1.2px;
  }
}
.sk-wave .sk-arm-l {
  animation: sk-wave 0.7s ease-in-out infinite alternate;
}
@keyframes sk-wave {
  to {
    transform: rotate(-26deg);
  }
}
.sk-cheer .sk-arm-l,
.sk-cheer .sk-arm-r {
  animation: sk-cheer 0.45s ease-in-out infinite alternate;
}
.sk-cheer .sk-bob {
  animation: sk-jump 0.9s ease-in-out infinite;
}
@keyframes sk-cheer {
  to {
    transform: rotate(14deg);
  }
}
@keyframes sk-jump {
  50% {
    translate: 0 -7px;
  }
}
.sk-walk-in {
  animation: sk-walk-in 1.6s 0.2s cubic-bezier(0.25, 0.8, 0.3, 1) both;
}
@keyframes sk-walk-in {
  from {
    translate: 70px 0;
    opacity: 0;
  }
}
.sk-hand-over {
  animation: sk-hand 2.6s 1s ease-in-out infinite;
}
@keyframes sk-hand {
  0%,
  20% {
    translate: 0 0;
  }
  45%,
  70% {
    translate: -14px 0;
  }
  100% {
    translate: 0 0;
  }
}
.sk-bounce {
  animation: sk-bounce 0.9s ease-in-out infinite;
}
@keyframes sk-bounce {
  50% {
    translate: 0 -1.5px;
  }
}
.sk-spin {
  animation: sk-spin 0.4s linear infinite;
}
@keyframes sk-spin {
  to {
    transform: rotate(360deg);
  }
}
.sk-drive {
  animation: sk-drive 3.2s cubic-bezier(0.5, 0, 0.75, 0.3) infinite;
}
@keyframes sk-drive {
  0% {
    translate: -40px 0;
  }
  100% {
    translate: 420px 0;
  }
}
.sk-steam {
  animation: sk-steam 1.8s ease-out infinite;
}
@keyframes sk-steam {
  from {
    translate: 0 6px;
    opacity: 0.8;
  }
  to {
    translate: 0 -14px;
    opacity: 0;
  }
}
.sk-hood {
  transform-box: fill-box;
  transform-origin: 0% 100%;
}
.sk-door {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: sk-door 2.8s ease-in-out infinite;
}
@keyframes sk-door {
  0%,
  15% {
    transform: scaleX(1);
  }
  35%,
  70% {
    transform: scaleX(-0.35);
  }
  90%,
  100% {
    transform: scaleX(1);
  }
}
.sk-twinkle {
  animation: sk-twinkle 2.4s ease-in-out infinite alternate;
}
@keyframes sk-twinkle {
  to {
    opacity: 0.25;
  }
}
.sk-window {
  animation: sk-twinkle 4s steps(2) infinite alternate;
}
.sk-drift {
  animation: sk-drift 24s linear infinite alternate;
}
@keyframes sk-drift {
  to {
    translate: 30px 0;
  }
}
.sk-flood,
.sk-lamp {
  animation: sk-flood 3s ease-in-out infinite alternate;
}
@keyframes sk-flood {
  to {
    opacity: 0.7;
  }
}
.sk-pulse,
.sk-neon {
  animation: sk-neon 1.4s steps(2) infinite;
}
@keyframes sk-neon {
  50% {
    opacity: 0.75;
  }
}
.sk-flash {
  animation: sk-neon 0.5s steps(2) infinite;
}
.sk-confetti {
  animation: sk-fall 2.6s linear infinite;
}
@keyframes sk-fall {
  from {
    translate: 0 -20px;
  }
  to {
    translate: 12px 250px;
  }
}
.sk-firework {
  transform-box: fill-box;
  transform-origin: center;
  animation: sk-burst 2.1s ease-out infinite;
}
@keyframes sk-burst {
  0% {
    scale: 0.1;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  70% {
    scale: 1;
    opacity: 0.9;
  }
  100% {
    scale: 1.15;
    opacity: 0;
  }
}
.sk-bar-r,
.sk-wash-r {
  animation: sk-wig 0.5s steps(2) infinite;
}
.sk-bar-b,
.sk-wash-b {
  animation: sk-wig 0.5s 0.25s steps(2) infinite;
}
@keyframes sk-wig {
  50% {
    opacity: 0.12;
  }
}
.sk-ticket {
  animation: sk-ticket 3.4s 1.8s ease-in-out infinite both;
}
@keyframes sk-ticket {
  /* in the officer's hand, then passed across to the driver's */
  0%,
  30% {
    translate: 0 0;
    opacity: 1;
  }
  50%,
  88% {
    translate: -6px -4px;
    opacity: 1;
  }
  100% {
    translate: -6px -4px;
    opacity: 0;
  }
}
.sk-stache {
  animation: sk-stache 3s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes sk-stache {
  50% {
    transform: scaleX(1.08) rotate(-2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sk-scene * {
    animation: none !important;
  }
}

/* ═════════════ Missions ═════════════ */
.mission-hud {
  position: absolute;
  z-index: 7;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "t c" "g c";
  column-gap: 14px;
  align-items: center;
  min-width: 280px;
  max-width: min(540px, calc(100% - 300px));
  padding: 9px 12px 9px 14px;
  border-radius: 12px;
  background: linear-gradient(160deg, #0f2232f2, #06111bf5);
  border: 1px solid #4fc3ff77;
  box-shadow: 0 8px 26px #0009;
  color: #e6f4ff;
}
.mission-hud[hidden],
.on-title .mission-hud,
body.crashed .mission-hud {
  display: none;
}
.mh-title {
  grid-area: t;
  font: 800 13px/1.15 Barlow, sans-serif;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #8fd8ff;
}
.mh-goal {
  grid-area: g;
  font: 600 11px/1.3 DM, sans-serif;
  color: #c9dbe8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mh-clock {
  grid-area: c;
  font: 800 26px/1 Barlow, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.mh-clock.idle {
  font: 700 9px/1.2 DM, sans-serif;
  letter-spacing: 1px;
  color: #8fb3c9;
  max-width: 60px;
  text-align: right;
}
.mh-clock.urgent {
  color: #ff6a5a;
  animation: sk-neon 0.6s steps(2) infinite;
}
@media (max-width: 700px) {
  .mission-hud {
    top: calc(56px + env(safe-area-inset-top));
    max-width: calc(100% - 24px);
    min-width: 0;
    width: calc(100% - 120px);
    left: 12px;
    transform: none;
    padding: 7px 10px;
  }
  .mh-clock {
    font-size: 21px;
  }
}
#modal.mission-modal .modal-card,
#modal.ticket-modal .modal-card {
  max-width: 520px;
}
.mission-card p {
  font-size: 14px;
  line-height: 1.45;
}
.mission-meta {
  font-size: 11px !important;
  color: #9fb3a6;
  letter-spacing: 0.3px;
}
.mission-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.mission-actions button {
  flex: 1;
  min-height: 46px;
}
.mission-silence {
  display: block;
  margin: 12px auto 0;
  background: none !important;
  border: 0 !important;
  color: #9aa8a0 !important;
  font-size: 11px !important;
  text-decoration: underline;
  min-height: 0 !important;
}
/* mission alert: incoming call */
.mission-ringing {
  text-align: center;
  padding: 10px 0 6px;
}
.mission-ringing .ring {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 6px auto 16px;
  display: grid;
  place-items: center;
}
.mission-ringing .ring b {
  font-size: 34px;
  animation: ring-shake 0.5s ease-in-out infinite;
}
.mission-ringing .ring i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #4fc3ff;
  animation: ring-out 1.4s ease-out infinite;
}
.mission-ringing .ring i + i {
  animation-delay: 0.7s;
}
@keyframes ring-out {
  from {
    transform: scale(0.5);
    opacity: 1;
  }
  to {
    transform: scale(1.4);
    opacity: 0;
  }
}
@keyframes ring-shake {
  25% {
    transform: rotate(-12deg);
  }
  75% {
    transform: rotate(12deg);
  }
}

/* ═════════════ Story mode (0.25) ═════════════ */
.mission-hud {
  grid-template-areas: "t c" "g c" "b b";
}
.mh-bar {
  grid-area: b;
  position: relative;
  height: 15px;
  margin-top: 6px;
  border-radius: 8px;
  background: #ffffff14;
  overflow: hidden;
}
.mh-bar[hidden] {
  display: none;
}
.mh-bar i {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: #4fc3ff;
  transition: transform 0.15s linear;
}
.mh-bar[data-tone="good"] i {
  background: linear-gradient(90deg, #2e9d63, #5fd38d);
}
.mh-bar[data-tone="warn"] i {
  background: linear-gradient(90deg, #b8861d, #f2c14e);
}
.mh-bar[data-tone="bad"] i {
  background: linear-gradient(90deg, #a3262d, #f05454);
}
.mh-bar.hit {
  animation: mh-hit 0.4s ease-out;
}
@keyframes mh-hit {
  30% {
    background: #f0545466;
  }
}
.mh-bar span {
  position: relative;
  display: block;
  font: 800 9px/15px DM, sans-serif;
  letter-spacing: 1.2px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 2px #000a;
}
.boss-line {
  font-style: italic;
  color: #e9f1ea;
}
.mission-rule {
  margin: 10px 0 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #ffffff0d;
  border-left: 3px solid #f2c14e;
  font: 700 12px/1.4 DM, sans-serif !important;
  color: #f4e2b0;
}
.story-intro p {
  font-size: 14.5px;
  line-height: 1.55;
}
.chapter-done {
  margin-top: 8px;
  font: 800 12px/1.3 Barlow, sans-serif !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f2c14e;
}
.story-list {
  max-height: min(48vh, 420px);
  overflow-y: auto;
  margin: 8px 0 12px;
  padding-right: 4px;
}
.story-ch {
  margin: 12px 0 6px;
  font: 800 12px/1.2 Barlow, sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8fd8ff;
}
.story-jobs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.story-jobs li {
  display: grid;
  grid-template-columns: 26px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #ffffff0a;
  font-size: 13px;
}
.story-jobs li.done span {
  color: #5fd38d;
  font-weight: 800;
}
.story-jobs li.locked {
  opacity: 0.45;
}
.story-jobs li.open {
  background: #4fc3ff1a;
  outline: 1px solid #4fc3ff55;
}
.story-jobs small {
  color: #9fb3a6;
  font-size: 11px;
}
.story-jobs .story-replay {
  min-height: 0;
  padding: 4px 9px;
  font-size: 11px;
}
.mh-clock i {
  font-style: normal;
  font-size: 20px;
  color: #ffffff2e;
}
.mh-clock i.on {
  color: #ffd34d;
  text-shadow: 0 0 8px #ffb30088;
}

/* Ghost runs */
.trial-hud {
  border-color: #c49bffaa;
  background: linear-gradient(160deg, #1e1232f2, #0d0718f5);
}
.trial-hud .mh-title {
  color: #d9c2ff;
}
.trial-offer {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 236px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(520px, calc(100% - 32px));
  padding: 10px 12px 10px 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, #1e1232f5, #0d0718f8);
  border: 1px solid #c49bffaa;
  box-shadow: 0 10px 30px #000a, 0 0 22px #c49bff33;
  color: #f1e6ff;
}
.trial-offer[hidden],
.on-title .trial-offer {
  display: none;
}
.trial-offer .to-ghost {
  font-size: 28px;
  animation: sk-bob 1.6s ease-in-out infinite;
}
.trial-offer b {
  display: block;
  font: 800 15px/1.1 Barlow, sans-serif;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.trial-offer small {
  display: block;
  margin-top: 2px;
  font: 600 11px/1.3 DM, sans-serif;
  color: #cdbde6;
}
.trial-offer em {
  font-style: normal;
  color: #fff;
}
.trial-offer button {
  margin-left: auto;
  padding: 9px 16px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* Steering joystick (touch) */
#touch-controls .joystick {
  pointer-events: auto;
  touch-action: none;
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffffff10 0 38%, #ffffff06 39% 100%),
    #0d1214a0;
  border: 1.5px solid #ffffff5c;
  box-shadow:
    0 3px 12px #0005,
    inset 0 0 18px #0006;
  display: flex;
  align-items: center;
  justify-content: center;
}
#touch-controls .joystick .js-hint {
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  font: 700 26px/1 DM, Arial, sans-serif;
  font-style: normal;
  color: #ffffff70;
  transition: color 0.12s;
}
#touch-controls .joystick .js-l {
  left: 12px;
}
#touch-controls .joystick .js-r {
  right: 12px;
}
#touch-controls .joystick.left .js-l,
#touch-controls .joystick.right .js-r {
  color: var(--lime);
}
#touch-controls .joystick .js-knob {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 35%, #ffffff55, #ffffff14 65%),
    #1c2426;
  border: 1.5px solid #ffffff99;
  box-shadow:
    0 4px 10px #0008,
    inset 0 1px 0 #ffffff55;
  transition: transform 0.16s cubic-bezier(0.3, 1.6, 0.5, 1);
  will-change: transform;
}
#touch-controls .joystick.held .js-knob {
  transition: none;
  border-color: var(--lime);
}
@media (orientation: landscape) and (max-height: 550px) {
  #touch-controls .joystick {
    width: 112px;
    height: 112px;
  }
  #touch-controls .joystick .js-knob {
    width: 50px;
    height: 50px;
  }
}

/* Dashboard: speed-limit sign to the LEFT of the street sign (phones and desktop alike) */
.road-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "town town" "limit blade";
  column-gap: 10px;
  align-items: center;
}
.road-panel .eyebrow {
  grid-area: town;
}
.road-panel .street-blade {
  grid-area: blade;
  min-width: 0;
}
.road-panel .limit-panel,
.compact .road-panel .limit-panel {
  grid-area: limit;
  margin-top: 0;
}
.road-panel #police-status {
  grid-area: auto;
}
.free-roam .road-panel {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "town" "blade";
}
.compact .road-panel {
  column-gap: 5px;
}
.compact .road-panel .road-limit-sign {
  width: 30px;
  padding: 3px 1px 2px;
}
.compact .road-panel .road-limit-sign > span {
  font-size: 5px;
}
.compact .road-panel .road-limit-sign b {
  font-size: 15px;
}

/* Phones: a clean top of screen — no credits line, FPS meter or online chip
   (credits stay in Settings → Help & credits) */
.touch-mode .attribution,
.touch-mode .fps-meter,
.touch-mode .online-chip {
  display: none !important;
}

/* Main menu: the three modes stacked; the one you played last is the big lit one */
.menu-item.menu-mode.menu-main span {
  font-size: 32px;
}
.menu-item.menu-mode.menu-main small {
  color: #2c3a1c;
}
/* Credits live in Settings → Help & credits only */
.attribution {
  display: none !important;
}

/* Paint picker: snappier — quick press, a pop on pick, live preview on hover */
.swatch {
  transition:
    transform 0.08s ease-out,
    box-shadow 0.08s ease-out;
}
.swatch:active {
  transform: scale(0.9) !important;
}
.swatch.pop {
  animation: swatch-pop 0.32s cubic-bezier(0.3, 1.8, 0.5, 1);
}
@keyframes swatch-pop {
  0% {
    scale: 0.85;
  }
  60% {
    scale: 1.12;
  }
  100% {
    scale: 1;
  }
}
.turntable.repaint #garage-vehicle {
  animation:
    turntable 22s linear infinite,
    repaint-pop 0.36s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes repaint-pop {
  0% {
    scale: 0.94;
    filter: drop-shadow(0 14px 14px #000b) brightness(1.5);
  }
  55% {
    scale: 1.06;
  }
  100% {
    scale: 1;
    filter: drop-shadow(0 14px 14px #000b) brightness(1);
  }
}
.turntable.repaint::after {
  animation: paint-ring 0.45s ease-out;
}
@keyframes paint-ring {
  0% {
    border-color: var(--paint, #d8f474);
    box-shadow: 0 0 60px var(--paint, #d8f474);
    inset: 22%;
  }
  100% {
    border-color: #d8f47433;
    box-shadow: 0 0 40px #d8f47422;
    inset: 18%;
  }
}
#paint-name {
  transition: color 0.12s;
}

/* Driving record */
.driving-record .record-section {
  margin: 14px 0 6px;
  font: 800 11px/1 DM, sans-serif;
  letter-spacing: 1.6px;
  color: var(--lime);
}
.record-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 560px) {
  .record-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ticket-row {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #ffffff0a;
  border: 1px solid #ffffff1a;
  text-align: left;
}
.ticket-row .tr-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font: 700 13px/1.2 DM, sans-serif;
}
.ticket-row .tr-fine {
  color: #ffb08a;
  font-weight: 800;
}
.ticket-row .tr-where {
  margin-top: 3px;
  font: 600 12px/1.3 DM, sans-serif;
  color: #dfe8d6;
}
.ticket-row .tr-meta {
  margin-top: 2px;
  font: 500 11px/1.35 DM, sans-serif;
  color: #9aa79a;
}
.record-foot {
  margin-top: 12px;
  font-size: 11px;
  color: #8d9a8f;
}
.fine-grid.record-stats {
  display: grid;
  gap: 12px 10px;
  padding: 6px 0 4px;
}
.record-stats > div {
  padding: 10px 6px;
  border-radius: 10px;
  background: #ffffff08;
  min-width: 0;
}
.record-stats b {
  display: block;
  font: 700 26px/1.05 Barlow, sans-serif;
  white-space: nowrap;
}
.record-stats b small {
  font-size: 14px;
  margin-left: 2px;
  color: #a5b89c;
}
.record-stats span {
  margin-top: 3px;
  letter-spacing: 0.8px;
}

/* ═════════════ Accounts & leaderboards ═════════════ */
.account-chip {
  position: absolute;
  z-index: 3;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 20px;
  background: #0d1214cc;
  border: 1px solid #ffffff2e;
  color: #eef3e4;
  font: 800 11px/1 DM, sans-serif;
  letter-spacing: 1.2px;
  cursor: pointer;
}
.account-chip[hidden] {
  display: none;
}
.account-chip:hover {
  border-color: var(--lime);
  background: #0d1214;
}
.account-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8d9a8f;
}
.account-chip .dot.on {
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
}
.guest-note {
  margin: 14px 0 0;
  font: 500 11.5px/1.4 DM, sans-serif;
  color: #9aa79a;
  text-align: center;
}
.guest-note[hidden] {
  display: none;
}
.linkish {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lime);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  transform: none;
}
.linkish:hover {
  background: none;
  color: #eef8c6;
}
.account-panel,
.leaders {
  text-align: center;
}
.acct-note {
  font-size: 13px;
  line-height: 1.5;
  color: #c9d3c3;
}
.acct-status {
  font-size: 12px;
  color: var(--lime);
}
.oauth-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 6px;
}
.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  font: 700 14px DM, sans-serif;
}
.oauth-btn:hover {
  background: #f1f3f4;
}
.oauth-btn svg {
  width: 20px;
  height: 20px;
}
.acct-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  font: 600 11px DM, sans-serif;
  color: #8d9a8f;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.acct-or::before,
.acct-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ffffff1f;
}
.acct-form {
  display: grid;
  gap: 10px;
}
.acct-form input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #ffffff2e;
  background: #0d1214;
  color: #eef3e4;
  font: 500 15px DM, sans-serif;
}
.acct-form input:focus {
  outline: 2px solid var(--lime);
  outline-offset: 1px;
}
.acct-msg {
  min-height: 1.2em;
  margin: 0;
  font-size: 12.5px;
  color: #cfe7a0;
}
.acct-msg.bad {
  color: #ffab8f;
}
.acct-switch,
.acct-fine {
  margin-top: 12px;
  font-size: 12px;
  color: #9aa79a;
}
.acct-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
/* leaderboards */
.lb-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 12px 0;
}
.lb-tabs button {
  padding: 7px 12px;
  border-radius: 16px;
  background: #ffffff0d;
  border: 1px solid #ffffff22;
  font: 700 12px DM, sans-serif;
  color: #cfd8c8;
}
.lb-tabs button[aria-selected="true"] {
  background: var(--lime);
  color: #11180e;
  border-color: var(--lime);
}
#lb-route {
  width: 100%;
  margin-bottom: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #0d1214;
  color: #eef3e4;
  border: 1px solid #ffffff2e;
  font: 600 13px DM, sans-serif;
}
.lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.lb-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  font: 600 13.5px DM, sans-serif;
}
.lb-list li:nth-child(odd):not(.lb-empty):not(.lb-gap) {
  background: #ffffff07;
}
.lb-list li.me {
  background: #d8f4742a !important;
  outline: 1px solid #d8f47466;
}
.lb-list li:nth-child(1) .lb-rank {
  color: #f2cd5c;
}
.lb-list li:nth-child(2) .lb-rank {
  color: #d2d8de;
}
.lb-list li:nth-child(3) .lb-rank {
  color: #d39a6a;
}
.lb-rank {
  font: 800 16px Barlow, sans-serif;
  text-align: center;
}
.lb-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-val {
  font: 700 15px Barlow, sans-serif;
  color: var(--lime);
}
.lb-empty,
.lb-gap {
  display: block !important;
  text-align: center;
  color: #9aa79a;
}

/* ═════════════ Drop In: pick your start on the map ═════════════ */
.dropping footer,
.dropping header,
.dropping #pause,
.dropping #touch-controls,
.dropping #trip-hud,
.dropping .mission-hud,
.dropping #trial-offer,
.dropping #fps,
.dropping .attribution {
  visibility: hidden;
}
.drop-in {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}
.drop-in[hidden] {
  display: none;
}
.di-pad {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  touch-action: none;
  cursor: crosshair;
}
.di-top {
  position: absolute;
  left: max(14px, env(safe-area-inset-left));
  top: max(12px, env(safe-area-inset-top));
  width: min(460px, calc(100% - 28px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.di-top > * {
  pointer-events: auto;
}
.di-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #0d1214e6;
  border: 1px solid #ffffff1f;
  border-radius: 6px;
  backdrop-filter: blur(6px);
}
.di-head .menu-back {
  margin: 0;
  flex: none;
}
.di-title b {
  display: block;
  font: italic 800 22px/1 Barlow, sans-serif;
  letter-spacing: 1px;
  color: var(--lime);
}
.di-title span {
  display: block;
  margin-top: 3px;
  font: 600 11px/1.3 DM, Arial, sans-serif;
  color: #cfd8c8;
}
.di-form {
  display: flex;
  gap: 6px;
}
.di-form input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  font: 600 15px DM, Arial, sans-serif;
  color: #f1f5e9;
  background: #0d1214e6;
  border: 1px solid #ffffff30;
  border-radius: 4px;
}
.di-form input:focus {
  outline: 2px solid var(--lime);
  outline-offset: -1px;
}
.di-form button {
  padding: 0 16px;
  background: #0d1214e6;
  border: 1px solid #ffffff30;
  border-radius: 4px;
  color: #eef3e4;
  font: italic 800 17px Barlow, sans-serif;
  cursor: pointer;
}
.di-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.di-chips:empty {
  display: none;
}
.di-chips button {
  padding: 7px 11px;
  background: #0d1214d9;
  border: 1px solid #ffffff2e;
  border-radius: 999px;
  color: #eef3e4;
  font: 700 12px DM, Arial, sans-serif;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.di-chips button:hover,
.di-chips button:focus-visible {
  border-color: var(--lime);
  background: #1b2614e6;
}
.di-results button {
  border-color: #d8f47466;
}
.di-note {
  padding: 7px 11px;
  background: #0d1214d9;
  border-radius: 6px;
  font: 600 12px DM, Arial, sans-serif;
  color: #cfd8c8;
}
.di-zoom {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
}
.di-zoom button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0d1214e0;
  border: 1px solid #ffffff38;
  color: #fff;
  font: 700 24px/1 DM, Arial, sans-serif;
  cursor: pointer;
}
.di-card {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 28px));
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  background: #0d1214eb;
  border: 1px solid #ffffff22;
  border-radius: 8px;
  box-shadow: 0 10px 30px #0008;
  pointer-events: auto;
}
.di-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 4px;
}
.di-info b {
  font: italic 800 22px/1.05 Barlow, sans-serif;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.di-info span {
  margin-top: 4px;
  font: 600 12px/1.3 DM, Arial, sans-serif;
  color: #cfd8c8;
}
.di-card .menu-item.menu-main {
  flex: none;
  justify-content: center;
  padding: 12px 20px;
  cursor: pointer;
}
.di-card .menu-item.menu-main span {
  font-size: 24px;
}
.di-card .menu-item[disabled] {
  cursor: default;
  opacity: 0.4;
}
@media (max-width: 560px) {
  .di-card {
    flex-direction: column;
  }
  .di-card .menu-item.menu-main {
    align-items: center;
  }
  .di-zoom {
    top: auto;
    bottom: calc(150px + env(safe-area-inset-bottom));
    transform: none;
  }
  .di-title b {
    font-size: 19px;
  }
}
@media (orientation: landscape) and (max-height: 550px) {
  .di-top {
    width: min(400px, 46%);
  }
  .di-chips:not(.di-results) {
    max-height: 64px;
    overflow: auto;
  }
  .di-card {
    left: auto;
    right: max(14px, env(safe-area-inset-right));
    transform: none;
    width: min(360px, 46%);
    flex-direction: column;
  }
  .di-zoom {
    right: auto;
    left: max(14px, env(safe-area-inset-left));
    top: auto;
    bottom: max(14px, env(safe-area-inset-bottom));
    transform: none;
    flex-direction: row;
  }
}

/* ═════════════ One-handed touch driving ═════════════ */
/* One stick does it all: left/right steers, push up for gas, pull down to brake. It floats: touch
   anywhere in the big zone above the dashboard and the stick centres under your thumb. */
#touch-controls .one-zone {
  display: none;
}
.one-hand #touch-controls .touch-steering,
.one-hand #touch-controls .touch-pedals {
  display: none;
}
.one-hand #touch-controls .one-zone {
  display: block;
  position: fixed;
  left: 6%;
  right: 6%;
  bottom: calc(100px + env(safe-area-inset-bottom));
  height: min(46vh, 380px);
  pointer-events: auto;
  touch-action: none;
}
.one-stick {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 150px;
  height: 150px;
  margin-left: -75px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffffff0e 0 36%, #ffffff05 37% 100%),
    #0d121499;
  border: 1.5px solid #ffffff55;
  box-shadow: 0 3px 12px #0005, inset 0 0 18px #0006;
  pointer-events: none;
  transition: opacity 0.2s;
  opacity: 0.8;
}
.one-stick.held {
  transition: none;
  opacity: 1;
}
.one-stick i {
  position: absolute;
  font: 700 10px/1 DM, Arial, sans-serif;
  font-style: normal;
  letter-spacing: 0.8px;
  color: #ffffff80;
  transition: color 0.1s;
}
.one-stick .os-up {
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
}
.one-stick .os-down {
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
}
.one-stick .os-l {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
}
.one-stick .os-r {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
}
.one-stick.gas .os-up {
  color: var(--lime);
}
.one-stick.brake .os-down {
  color: #ff9f86;
}
.one-stick.left .os-l,
.one-stick.right .os-r {
  color: var(--lime);
}
.one-stick .os-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 35%, #ffffff55, #ffffff14 65%), #1c2426;
  border: 1.5px solid #ffffff99;
  box-shadow: 0 4px 10px #0008, inset 0 1px 0 #ffffff55;
  transition: transform 0.16s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.one-stick.held .os-knob {
  transition: none;
  border-color: var(--lime);
}
.one-stick.gas .os-knob {
  background: radial-gradient(circle at 45% 35%, #f0ffb877, #d8f47422 65%), #2a3420;
}
.one-stick.brake .os-knob {
  background: radial-gradient(circle at 45% 35%, #ffc7b877, #ff8c6a22 65%), #34221e;
}
@media (orientation: landscape) and (max-height: 550px) {
  .one-hand #touch-controls .one-zone {
    left: 18%;
    right: 18%;
    bottom: calc(70px + env(safe-area-inset-bottom));
    height: 58vh;
  }
  .one-stick {
    width: 128px;
    height: 128px;
    margin-left: -64px;
    bottom: 6px;
  }
}
/* cards that appear over the driving view stay tappable above the one-hand zone */
.one-hand #trial-offer {
  z-index: 13;
}
.dropping #toast,
.dropping #online-chip {
  visibility: hidden;
}

/* Phones held upright: the dashboard docks to the bottom edge (down into the home-bar area), so
   the stick and pedals get clear space above it instead of sitting on top of it. */
@media (orientation: portrait) {
  .compact footer {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 10px max(6px, calc(env(safe-area-inset-bottom) - 14px)) 8px;
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
  }
  #touch-controls {
    bottom: calc(118px + max(0px, env(safe-area-inset-bottom) - 14px));
  }
  .one-hand #touch-controls .one-zone {
    bottom: calc(104px + max(0px, env(safe-area-inset-bottom) - 14px));
  }
}

/* ═════════════ Phones: a bigger, see-through dashboard and bigger controls ═════════════ */
/* The dash floats over the road (no solid panel): each gauge carries its own dark backing, so
   you can see traffic and the street right through the middle of it. */
.touch-mode.compact footer {
  background: linear-gradient(to top, #0a0c0f8c, #0a0c0f40 60%, #0a0c0f00);
  border: 0;
  box-shadow: none;
}
.touch-mode.compact .speedometer {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, #0d1214d9 60%, #0d121499 72%, transparent 74%);
}
.touch-mode.compact .digital-speed {
  bottom: 10px;
}
.touch-mode.compact .digital-speed strong {
  font-size: 26px;
  text-shadow: 0 1px 3px #000c;
}
.touch-mode.compact .road-panel .eyebrow {
  font-size: 9px;
  letter-spacing: 1.1px;
  text-shadow: 0 1px 3px #000, 0 0 6px #000a;
}
.touch-mode.compact .road-panel h2 {
  font-size: 19px;
  padding: 6px 10px 5px;
}
.touch-mode.compact .road-panel h2.long {
  font-size: 16px;
}
.touch-mode.compact .road-panel h2.xlong {
  font-size: 14px;
}
.touch-mode.compact .road-panel .road-limit-sign {
  width: 38px;
  padding: 4px 1px 2px;
}
.touch-mode.compact .road-panel .road-limit-sign > span {
  font-size: 6.4px;
}
.touch-mode.compact .road-panel .road-limit-sign b {
  font-size: 20px;
}
.touch-mode.compact .radio-pill {
  width: 58px;
  height: 58px;
  background: linear-gradient(#1a1712d9, #0b0906d9);
}
.touch-mode.compact #police-status {
  font-size: 10px;
  text-shadow: 0 1px 3px #000;
}
/* bigger controls */
.touch-mode #touch-controls .joystick {
  width: 164px;
  height: 164px;
  background:
    radial-gradient(circle at 50% 50%, #ffffff10 0 38%, #ffffff06 39% 100%),
    #0d121480;
}
.touch-mode #touch-controls .joystick .js-knob {
  width: 70px;
  height: 70px;
}
.touch-mode #touch-controls .joystick .js-hint {
  font-size: 30px;
}
.touch-mode #touch-controls button[data-drive="brake"] {
  width: 78px;
  height: 92px;
}
.touch-mode #touch-controls button[data-drive="gas"] {
  width: 82px;
  height: 124px;
}
.touch-mode #touch-controls button svg {
  width: 32px;
  height: 32px;
}
.touch-mode #touch-controls button span {
  font-size: 9.5px;
}
.touch-mode .one-stick {
  width: 184px;
  height: 184px;
  margin-left: -92px;
}
.touch-mode .one-stick .os-knob {
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
}
.touch-mode .one-stick i {
  font-size: 12px;
}
.touch-mode .one-stick .os-l,
.touch-mode .one-stick .os-r {
  font-size: 26px;
}
@media (orientation: portrait) {
  .touch-mode.compact footer,
  .touch-mode.compact.free-roam footer {
    grid-template-columns: 96px minmax(0, 1fr) 58px;
    column-gap: 10px;
    padding: 8px 12px max(8px, calc(env(safe-area-inset-bottom) - 12px)) 10px;
  }
  .touch-mode #touch-controls {
    bottom: calc(130px + max(0px, env(safe-area-inset-bottom) - 12px));
  }
  .touch-mode.one-hand #touch-controls .one-zone {
    bottom: calc(118px + max(0px, env(safe-area-inset-bottom) - 12px));
  }
}
/* sideways phones: same idea, a little smaller so the road keeps its height */
@media (orientation: landscape) and (max-height: 550px) {
  .touch-mode.compact .speedometer {
    width: 78px;
    height: 78px;
  }
  .touch-mode.compact .digital-speed strong {
    font-size: 21px;
  }
  .touch-mode.compact footer,
  .touch-mode.compact.free-roam footer {
    grid-template-columns: 78px minmax(75px, 1fr) 54px;
    background: none;
    left: calc(156px + env(safe-area-inset-left));
    right: calc(176px + env(safe-area-inset-right));
  }
  .touch-mode #touch-controls .joystick {
    width: 138px;
    height: 138px;
  }
  .touch-mode #touch-controls .joystick .js-knob {
    width: 60px;
    height: 60px;
  }
  .touch-mode #touch-controls button[data-drive="brake"] {
    width: 70px;
    height: 78px;
  }
  .touch-mode #touch-controls button[data-drive="gas"] {
    width: 72px;
    height: 104px;
  }
  .touch-mode .one-stick {
    width: 150px;
    height: 150px;
    margin-left: -75px;
  }
  .touch-mode .one-stick .os-knob {
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
  }
}

/* ═════════════ Turn signals & cruise control ═════════════ */
.street-blade .blinker {
  position: absolute;
  top: -15px;
  z-index: 2;
  font: 900 13px/1 DM, Arial, sans-serif;
  font-style: normal;
  color: #ffb43c;
  text-shadow: 0 0 6px #ff9a1a, 0 1px 2px #000;
  opacity: 0;
  pointer-events: none;
}
.street-blade #sig-l {
  left: 6px;
}
.street-blade #sig-r {
  right: 6px;
}
.street-blade .blinker.active {
  opacity: 0.25;
}
.street-blade .blinker.lit {
  opacity: 1;
}
.cruise-light {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  padding: 2px 7px;
  border-radius: 999px;
  background: #102a12e6;
  border: 1px solid #7ee07a;
  color: #9ff59a;
  font: 800 9px/1.2 DM, Arial, sans-serif;
  letter-spacing: 0.8px;
  white-space: nowrap;
  box-shadow: 0 0 10px #4fdc4a55;
}
.cruise-light b {
  font-size: 11px;
}
.compact .cruise-light {
  top: -12px;
  font-size: 8px;
}
/* analog pedals: the fill shows how hard you're pressing */
#touch-controls button[data-drive].pressed {
  background-image: linear-gradient(to top, #ffffff40 calc(var(--amt, 1) * 100%), transparent calc(var(--amt, 1) * 100%));
}
/* ghost race offer: "not now" */
.trial-offer .to-later {
  margin-left: 6px;
  padding: 9px 11px;
  background: #ffffff14;
  border: 1px solid #ffffff33;
  color: #dfe6da;
  border-radius: 4px;
  cursor: pointer;
}

/* Settings: "Image color & contrast" as a proper row-button */
.modal .image-settings-button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: none;
  margin: 12px 0 4px;
  padding: 11px 14px;
  text-align: left;
  background: linear-gradient(90deg, #ffffff10, #ffffff05);
  border: 1px solid #ffffff26;
  border-radius: 8px;
  color: #eef3e4;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.modal .image-settings-button:hover,
.modal .image-settings-button:focus-visible {
  border-color: var(--lime);
  background: linear-gradient(90deg, #d8f47418, #ffffff05);
}
.image-settings-button .isb-swatch {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: conic-gradient(from 200deg, #2f7d4f, #8fb8ff, #e8b450, #ce3535, #2f7d4f);
  box-shadow: inset 0 0 0 2px #0d1214, 0 0 0 1px #ffffff33;
}
.image-settings-button .isb-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.image-settings-button .isb-text b {
  font: 700 14px DM, Arial, sans-serif;
}
.image-settings-button .isb-text small {
  font: 500 11px DM, Arial, sans-serif;
  color: #aab5a4;
}
.image-settings-button .isb-go {
  font: 700 22px/1 DM, Arial, sans-serif;
  color: var(--lime);
}

/* ═════════════ Title: car style picker (swipe the turntable, or the arrows) ═════════════ */
.car-picker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.car-picker .turntable {
  touch-action: pan-y;
  cursor: grab;
}
.car-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #ffffff2a;
  background: #0d121466;
  color: #eef3e4b3;
  font: 700 26px/1 DM, Arial, sans-serif;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
.car-prev {
  left: 2px;
}
.car-next {
  right: 2px;
}
.car-arrow:hover,
.car-arrow:focus-visible {
  opacity: 1;
  color: var(--lime);
  border-color: var(--lime);
}
.touch-mode .car-arrow {
  display: none; /* phones: swipe the turntable */
}
.car-slide {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
}
.car-slide.in-right {
  animation: car-in-right 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.car-slide.in-left {
  animation: car-in-left 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes car-in-right {
  from {
    transform: translateX(40%);
    opacity: 0;
  }
}
@keyframes car-in-left {
  from {
    transform: translateX(-40%);
    opacity: 0;
  }
}
.car-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: -6px;
}
.car-name b {
  font: italic 800 20px/1 Barlow, sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.car-dots {
  display: flex;
  gap: 6px;
}
.car-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff40;
}
.car-dots i.on {
  background: var(--lime);
}

/* ═════════════════════════════════════════════════════════════════════
   PHONES (0.48): a purpose-built mobile HUD.
   • Up top: the town and a big green street sign (with the blinkers) — out of your thumbs' way.
   • At the bottom: a slim dock flush with the screen edge — a big digital speed readout with a
     speed bar, the speed-limit sign beside it, cruise in the middle, the radio on the right.
   • The stick and pedals sit just above the dock. The desktop dashboard is hidden (its radio
     stays, as the pop-up player).
   ═════════════════════════════════════════════════════════════════════ */
.m-top,
.m-dock {
  display: none;
}
.touch-mode footer {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
  padding: 0 !important;
}
.touch-mode footer > :not(.radio-slot) {
  display: none !important;
}
.touch-mode footer .radio-slot {
  pointer-events: auto;
}
/* the radio pops up just above the dock */
.touch-mode.compact.radio-expanded .radio-slot {
  top: auto;
  bottom: calc(96px + env(safe-area-inset-bottom));
}

/* ── top: street sign ── */
.touch-mode .m-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: fixed;
  z-index: 6;
  left: 50%;
  top: calc(62px + env(safe-area-inset-top));
  transform: translateX(-50%);
  width: min(92vw, 440px);
  pointer-events: none;
}
.m-town {
  text-transform: uppercase;
  font: 800 10px/1 DM, Arial, sans-serif;
  letter-spacing: 1.6px;
  color: #f1f5e9;
  text-shadow: 0 1px 3px #000, 0 0 8px #000c;
}
.m-blade {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 3px;
  border-radius: 7px;
  background: linear-gradient(180deg, #1b8a52, #0a6a3b 55%, #06552f);
  box-shadow: 0 0 0 1px #04381f, 0 3px 0 #032a17, 0 8px 18px #000a;
}
.m-top.highway .m-blade {
  background: linear-gradient(180deg, #2a6fd0, #1a54a8 55%, #134187);
  box-shadow: 0 0 0 1px #0b2f66, 0 3px 0 #0a244e, 0 8px 18px #000a;
}
.m-blade > b {
  display: block;
  min-width: 0;
  padding: 6px 14px 5px;
  border: 2px solid #f4f7f2;
  border-radius: 4px;
  color: #fff;
  font: 600 22px/1.08 Barlow, "Arial Narrow", sans-serif;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-blade > b.long {
  font-size: 18px;
}
.m-blade > b.xlong {
  font-size: 15px;
}
.m-blade > b {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
}
.m-blade > b .sfx,
.m-blade > b .dir {
  font-size: 0.62em;
  letter-spacing: 0.6px;
  flex-shrink: 0;
}
.m-blade > b .nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-sig {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font: 900 16px/1 DM, Arial, sans-serif;
  font-style: normal;
  color: #ffb43c;
  text-shadow: 0 0 8px #ff9a1a, 0 1px 2px #000;
  opacity: 0;
}
#m-sig-l {
  left: -24px;
}
#m-sig-r {
  right: -24px;
}
.m-sig.active {
  opacity: 0.3;
}
.m-sig.lit {
  opacity: 1;
}
.m-police {
  margin: 4px 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: #0d1214d9;
  border: 1px solid #ffffff30;
  font: 800 10px/1.2 DM, Arial, sans-serif;
  letter-spacing: 0.6px;
  color: #ffd0a8;
  white-space: nowrap;
}
.m-police.warn {
  border-color: #ffb43c;
  color: #ffcf7a;
}
.m-police.pullover {
  background: #7a1010e6;
  border-color: #ff6b6b;
  color: #fff;
  animation: m-flash 0.7s steps(2) infinite;
}
@keyframes m-flash {
  50% {
    background: #10307ae6;
    border-color: #6b9bff;
  }
}

/* ── bottom: the dock ── */
.touch-mode .m-dock {
  display: flex;
  align-items: center;
  gap: 12px;
  position: fixed;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px max(14px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: linear-gradient(to top, #07090bf2, #07090bc4 70%, #07090b99);
  border-top: 1px solid #ffffff1a;
  box-shadow: 0 -10px 24px #0006;
}
.m-speed {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 108px;
}
.m-mph {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.m-mph b {
  font: italic 800 52px/0.9 Barlow, Arial, sans-serif;
  letter-spacing: -1px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-shadow: 0 2px 10px #0008;
  transition: color 0.2s;
}
.m-mph span {
  font: 800 11px/1 DM, Arial, sans-serif;
  letter-spacing: 1.4px;
  color: #aab5a4;
}
.m-bar {
  display: block;
  height: 5px;
  width: 108px;
  border-radius: 3px;
  background: #ffffff1c;
  overflow: hidden;
}
.m-bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--lime);
  transition: width 0.1s linear, background 0.2s;
}
.m-speed.speeding .m-mph b {
  color: #ffcf7a;
}
.m-speed.speeding .m-bar > i {
  background: #ffb43c;
}
.m-speed.way-over .m-mph b {
  color: #ff8a78;
}
.m-speed.way-over .m-bar > i {
  background: #ff5a4a;
}
.m-speed.hot .m-mph b {
  color: #ff5a4a;
}
.m-limit {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 46px;
  padding: 4px 2px 3px;
  border-radius: 5px;
  background: #f7f7f2;
  color: #111;
  box-shadow: inset 0 0 0 2px #f7f7f2, inset 0 0 0 3.5px #111, 0 3px 8px #0009;
}
.m-limit span {
  font: 800 7px/1.05 DM, Arial, sans-serif;
  letter-spacing: 0.3px;
}
.m-limit b {
  font: 800 24px/1 Barlow, Arial, sans-serif;
  margin-top: 1px;
}
.m-limit.over {
  box-shadow: inset 0 0 0 2px #f7f7f2, inset 0 0 0 3.5px #111, 0 0 0 3px #ff5a4a, 0 3px 8px #0009;
}
.m-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.m-cruise {
  padding: 4px 10px;
  border-radius: 999px;
  background: #102a12e6;
  border: 1px solid #7ee07a;
  color: #9ff59a;
  font: 800 10px/1.2 DM, Arial, sans-serif;
  letter-spacing: 0.8px;
  white-space: nowrap;
}
.m-cruise b {
  font-size: 13px;
}
.m-radio {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 64px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(#1a1712, #0b0906);
  border: 1px solid #4a3b26;
  box-shadow: inset 0 1px 0 #ffffff14, 0 2px 6px #0008;
  color: #ffb24c;
  text-shadow: 0 0 6px #f90a;
  font-family: monospace;
  cursor: pointer;
  touch-action: manipulation;
}
.m-radio i {
  width: 22px;
  height: 7px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #ffb24c 0 1px, transparent 1px 3px);
  opacity: 0.6;
}
.m-radio b {
  font: bold 15px/1 monospace;
}
.m-radio span {
  font-size: 7px;
  letter-spacing: 0.8px;
  color: #b98a4a;
  text-shadow: none;
}
.m-radio.on span {
  color: #ffcf8a;
}
.radio-expanded .m-radio {
  border-color: #ffb24c;
  box-shadow: 0 0 0 2px #ffb24c55;
}

/* ── the controls sit just above the dock ── */
.touch-mode #touch-controls {
  bottom: calc(92px + env(safe-area-inset-bottom)) !important;
}
.touch-mode.one-hand #touch-controls .one-zone {
  bottom: calc(86px + env(safe-area-inset-bottom)) !important;
}
/* messages and job / trip banners go below the street sign */
.touch-mode.compact #toast {
  top: calc(132px + env(safe-area-inset-top));
}
.touch-mode .mission-hud,
.touch-mode.compact .trip-hud,
.touch-mode .trial-hud {
  top: calc(126px + env(safe-area-inset-top));
}
.touch-mode.compact #toast {
  top: calc(190px + env(safe-area-inset-top));
}
.touch-mode .trial-offer {
  bottom: calc(300px + env(safe-area-inset-bottom));
}

/* sideways phones: sign smaller up top; the dock is a centred bar between stick and pedals */
@media (orientation: landscape) and (max-height: 550px) {
  .touch-mode .m-top {
    top: calc(8px + env(safe-area-inset-top));
    width: min(46vw, 380px);
  }
  .m-blade > b {
    font-size: 17px;
    padding: 4px 10px 3px;
  }
  .touch-mode .m-dock {
    left: calc(170px + env(safe-area-inset-left));
    right: calc(186px + env(safe-area-inset-right));
    bottom: calc(6px + env(safe-area-inset-bottom));
    padding: 7px 12px;
    border: 1px solid #ffffff1a;
    border-radius: 16px;
  }
  .m-mph b {
    font-size: 38px;
  }
  .m-speed {
    min-width: 88px;
  }
  .m-bar {
    width: 88px;
  }
  .m-radio {
    width: 56px;
    height: 48px;
  }
  .touch-mode #touch-controls {
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
  .touch-mode.one-hand #touch-controls .one-zone {
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
  .touch-mode .mission-hud,
  .touch-mode.compact .trip-hud,
  .touch-mode .trial-hud {
    top: calc(74px + env(safe-area-inset-top));
  }
  .touch-mode.compact #toast {
    top: calc(118px + env(safe-area-inset-top));
  }
  .touch-mode.compact.radio-expanded .radio-slot {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
}
/* hidden on the title screen and while picking a Drop In spot */
.on-title .m-top,
.on-title .m-dock,
.dropping .m-top,
.dropping .m-dock {
  visibility: hidden;
}

/* Title menu: the three modes full width; Badges / Driving Record and Leaderboards / Settings in
   a 2 × 2 grid underneath */
.title-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.title-menu > .menu-mode,
.title-menu > #title-full {
  grid-column: 1 / -1;
}
.title-menu > .menu-item:not(.menu-mode):not(#title-full) {
  min-width: 0;
}
.title-menu > .menu-item:not(.menu-mode):not(#title-full) span {
  font-size: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.title-menu > .menu-item:not(.menu-mode):not(#title-full) small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 760px), (max-height: 550px) {
  .title-menu > .menu-item:not(.menu-mode):not(#title-full) span {
    font-size: 17px;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   PHONES (0.55): gesture driving — Swipe & Go and Touch zones. No drawn stick or pedals: the left
   half of the screen steers, the right half is the pedal; a ring appears under each thumb.
   ═════════════════════════════════════════════════════════════════════ */
.gest,
.jx {
  display: none;
}
.gestures #touch-controls .touch-steering,
.gestures #touch-controls .touch-pedals,
.gestures #touch-controls .one-zone {
  display: none !important;
}
.gestures #touch-controls .gest {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: calc(118px + env(safe-area-inset-top));
  bottom: calc(86px + env(safe-area-inset-bottom));
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* resting hints, faint, at the bottom of each half */
.g-hint {
  position: absolute;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #0d121459;
  border: 1px solid #ffffff1f;
  color: #ffffffa6;
  font: 800 9px/1.15 DM, Arial, sans-serif;
  letter-spacing: 1.2px;
  text-align: center;
  transition: opacity 0.25s;
}
.g-hint i {
  font-style: normal;
  font-size: 15px;
  color: #ffffffcc;
}
.g-hint-l {
  left: 18px;
}
.g-hint-r {
  right: 18px;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 18px;
}
.gest:has(.g-steer.on) .g-hint-l,
.gest:has(.g-pedal.on) .g-hint-r {
  opacity: 0;
}
/* the rings under your thumbs */
.g-steer,
.g-pedal {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.g-steer.on,
.g-pedal.on {
  opacity: 1;
}
.g-steer::before {
  content: "";
  position: absolute;
  left: -78px;
  top: -24px;
  width: 156px;
  height: 48px;
  border-radius: 24px;
  border: 1.5px solid #ffffff4d;
  background: #0d121440;
}
.g-pedal::before {
  content: "";
  position: absolute;
  left: -26px;
  /* (sized to the room it has: never runs off the bottom into the dashboard) */
  top: calc(-1 * (var(--up, 90px) + 14px));
  width: 52px;
  height: calc(var(--up, 90px) + var(--down, 90px) + 28px);
  border-radius: 26px;
  border: 1.5px solid #ffffff4d;
  background: linear-gradient(to bottom, #d8f47426, transparent 45%, transparent 55%, #ff8c6a26);
}
.g-steer b,
.g-pedal b {
  position: absolute;
  left: -27px;
  top: -27px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 35%, #ffffff66, #ffffff1a 65%), #1c2426cc;
  border: 2px solid #ffffffb3;
  box-shadow: 0 4px 12px #0008;
}
.g-steer b {
  transform: translateX(var(--dx, 0));
}
.g-pedal b {
  transform: translate(calc(var(--dx, 0px) * 0.6), var(--dy, 0));
}
.g-steer.l b,
.g-steer.r b {
  border-color: var(--lime);
}
.g-pedal.gas b {
  border-color: var(--lime);
  background: radial-gradient(circle at 45% 35%, #f0ffb888, #d8f47433 65%), #2a3420cc;
}
.g-pedal.brake b {
  border-color: #ff9f86;
  background: radial-gradient(circle at 45% 35%, #ffc7b888, #ff8c6a33 65%), #34221ecc;
}
/* Swipe & Go: the arrows at the next intersection */
.layout-swipe.touch-mode #touch-controls .jx:not([hidden]) {
  display: flex;
  justify-content: center;
  gap: 18px;
  position: fixed;
  left: 0;
  right: 0;
  top: calc(34% + env(safe-area-inset-top));
  z-index: 13;
  pointer-events: none;
  animation: jx-in 0.22s ease-out;
}
@keyframes jx-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
#jx .jx-btn {
  pointer-events: auto;
  touch-action: manipulation;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid #ffffff73;
  background: #0d1214a6;
  color: #fff;
  font: 800 34px/1 DM, Arial, sans-serif;
  box-shadow: 0 6px 18px #0009;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
}
#jx .jx-btn.on {
  background: #d8f474e6;
  border-color: #f4ffd0;
  color: #11180e;
  transform: scale(1.08);
}
/* cards that pop up over the road stay tappable above the gesture layer */
.gestures .trial-offer {
  z-index: 13;
}
@media (orientation: landscape) and (max-height: 550px) {
  .gestures #touch-controls .gest {
    top: calc(64px + env(safe-area-inset-top));
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
  .layout-swipe.touch-mode #touch-controls .jx:not([hidden]) {
    top: 44%;
  }
  .jx-btn {
    width: 62px;
    height: 62px;
    font-size: 28px;
  }
}

/* the 2 × 2 menu buttons keep their padding on hover, so names never get cut short */
.title-menu > .menu-item:not(.menu-mode):not(#title-full):hover:not([disabled]),
.title-menu > .menu-item:not(.menu-mode):not(#title-full):focus-visible {
  padding-left: 22px;
}
.title-menu > .menu-item:not(.menu-mode):not(#title-full):hover:not([disabled])::after,
.title-menu > .menu-item:not(.menu-mode):not(#title-full):focus-visible::after {
  display: none;
}
.title-menu > .menu-item:not(.menu-mode):not(#title-full) span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
@media (max-width: 760px), (max-height: 550px) {
  .title-menu > .menu-item:not(.menu-mode):not(#title-full):hover:not([disabled]),
  .title-menu > .menu-item:not(.menu-mode):not(#title-full):focus-visible {
    padding-left: 16px;
  }
}

/* Desktop: lifetime miles on the speedometer (your account's total when signed in) */
.speed-panel .odo {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #0b0e11;
  border: 1px solid #ffffff22;
  white-space: nowrap;
}
.speed-panel .odo b {
  font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace;
  color: #f1f5e9;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}
.speed-panel .odo span {
  font: 800 7.5px/1 DM, Arial, sans-serif;
  letter-spacing: 1px;
  color: #8f9b8b;
}
.compact .speed-panel .odo {
  display: none;
}
.arrival-hero.fail {
  color: #ff6b5a;
  letter-spacing: 3px;
}
.trip-fail .modal-card h2 {
  margin-top: 4px;
}

/* First-time "how to play" card */
.coach h2 {
  margin-bottom: 14px;
}
.coach .cc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  text-align: left;
}
.coach h3 {
  margin: 0 0 8px;
  font: italic 800 15px/1 Barlow, sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--lime);
}
.coach ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.coach li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.4;
  color: #dfe6da;
}
.coach li b {
  color: #fff;
}
.coach .cc-ic {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #ffffff12;
  font-size: 14px;
}
.coach #coach-go {
  margin-top: 18px;
}
.coach .cc-note {
  margin: 8px 0 0;
  font-size: 11px;
  color: #8f9b8b;
}
@media (max-width: 640px) {
  .coach .cc-cols {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Pause menu: tiles with an icon, a name and a short line */
.pause-modal .pm-resume {
  width: 100%;
  margin-top: 6px;
  padding: 14px;
  font-size: 15px;
  letter-spacing: 1px;
}
.pause-modal .pause-grid {
  gap: 10px;
  margin-top: 16px;
}
.pause-modal .pm-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 12px;
  text-align: left;
  background: linear-gradient(135deg, #ffffff10, #ffffff04);
  border: 1px solid #ffffff1f;
  border-radius: 10px;
  color: #eef3e4;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.pause-modal .pm-tile:hover,
.pause-modal .pm-tile:focus-visible {
  border-color: var(--lime);
  background: linear-gradient(135deg, #d8f4741f, #ffffff06);
}
.pause-modal .pm-tile:active {
  transform: scale(0.98);
}
.pm-ic {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #0d1214;
  border: 1px solid #ffffff1a;
  font-size: 17px;
  color: var(--lime);
}
.pm-tx {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pm-tx b {
  font: italic 800 16px/1.05 Barlow, sans-serif;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.pm-tx small {
  font: 500 11px/1.25 DM, Arial, sans-serif;
  color: #9aa79a;
}
.pause-modal .pm-tile.warn {
  border-color: #ff8c6a55;
}
.pause-modal .pm-tile.warn .pm-ic {
  color: #ff9f86;
}
@media (max-width: 420px) {
  .pm-tx small {
    display: none;
  }
  .pause-modal .pm-tile {
    min-height: 52px;
  }
}

/* 0.59 Story wallet: cash and what you owe Moose, top right under Pause */
.wallet {
  position: absolute;
  z-index: 14;
  top: calc(max(20px, env(safe-area-inset-top)) + 54px);
  right: max(22px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 150px;
  padding: 8px 12px 9px;
  border-radius: 14px;
  background: #111a21d9;
  border: 1px solid #ffffff33;
  backdrop-filter: blur(10px);
  color: #fff;
  text-align: left;
  font: inherit;
  cursor: default;
  min-height: 0;
}
.wallet[hidden] {
  display: none;
}
.wallet .w-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.wallet small {
  font-size: 9.5px;
  letter-spacing: 1.2px;
  color: #ffffffa8;
}
.wallet b {
  font-family: "Oswald", "DM", Arial, sans-serif;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: #8ef0a8;
}
.wallet .w-owe b {
  font-size: 13px;
  color: #ffc46b;
}
.wallet.square .w-owe b {
  color: #8ef0a8;
}
.wallet .w-bar {
  display: block;
  height: 4px;
  border-radius: 3px;
  background: #ffffff1f;
  overflow: hidden;
}
.wallet .w-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4fc3ff, #8ef0a8);
  transition: width 0.6s ease;
}
.wallet .w-pay {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #0b1a10;
  background: #8ef0a8;
  border-radius: 8px;
  padding: 4px 8px;
  text-align: center;
}
.wallet.ready {
  cursor: pointer;
  border-color: #8ef0a8aa;
  box-shadow: 0 0 0 0 #8ef0a866;
  animation: wallet-ready 1.8s ease-out infinite;
}
@keyframes wallet-ready {
  70% {
    box-shadow: 0 0 0 10px #8ef0a800;
  }
}
.wallet.bump {
  animation: wallet-bump 0.45s ease;
}
@keyframes wallet-bump {
  40% {
    transform: scale(1.07);
  }
}
.wallet .w-float {
  position: absolute;
  right: calc(100% + 10px);
  top: 8px;
  text-shadow: 0 1px 4px #000c;
  font-weight: 800;
  font-size: 15px;
  pointer-events: none;
  animation: wallet-float 1.8s ease-out forwards;
}
.wallet .w-float.up {
  color: #8ef0a8;
}
.wallet .w-float.down {
  color: #ff8a7a;
}
@keyframes wallet-float {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(30px);
  }
}
body.wallet-on .fps-meter {
  top: calc(max(20px, env(safe-area-inset-top)) + 196px);
}
/* phones: a slim pill in the top-left corner, level with Pause (the street sign has the middle) */
.touch-mode .wallet {
  top: max(14px, env(safe-area-inset-top));
  right: auto;
  left: max(12px, env(safe-area-inset-left));
  min-width: 118px;
  padding: 6px 10px 7px;
  border-radius: 12px;
}
.touch-mode .wallet b {
  font-size: 15px;
}
.touch-mode .wallet .w-owe b {
  font-size: 12px;
}
.touch-mode .wallet small {
  font-size: 8.5px;
}
.touch-mode.wallet-on header {
  visibility: hidden;
}

/* 0.63 the pedal thumb: the overlay stays inside the driving area (never over the dock / radio) */
.gestures #touch-controls .gest {
  overflow: hidden;
}
/* phones: the wallet as one slim row, clear of the street sign under it */
.touch-mode .wallet {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 11px;
}
.touch-mode .wallet .w-row {
  gap: 5px;
}
.touch-mode .wallet .w-bar,
.touch-mode .wallet .w-row:first-child small {
  display: none;
}
.touch-mode .wallet .w-pay {
  margin: 0;
  padding: 3px 7px;
  font-size: 10px;
}

/* 0.69 rare finds: violet instead of gold */
.badge-modal:has(.badge-card.rare) .modal-card {
  border-top-color: #a874f2;
  background: radial-gradient(ellipse at 50% 0%, #2e1650, transparent 60%), linear-gradient(155deg, #20252cfa, #080c12fa);
}
.badge-card.rare .eyebrow {
  color: #c9a2ff;
}
.badge-card.rare .badge-medal {
  color: #2a0d55;
  background: radial-gradient(circle at 35% 30%, #f1e2ff, #a874f2 55%, #5b2aa6);
  box-shadow:
    0 0 0 4px #3a166e,
    0 0 0 8px #a874f233,
    0 0 60px #a874f288;
}
.badge-card.rare .badge-desc {
  font-size: 15px !important;
  line-height: 1.45;
}
.badge-card.rare .badge-desc span {
  color: #c9a2ff;
}
.badge-card.rare .badge-bar i {
  background: linear-gradient(90deg, #7d4fd6, #c9a2ff);
}
.badge-card.rare .badge-complete {
  color: #c9a2ff;
}
.badge-book details.rare summary b {
  color: #c9a2ff;
}
.badge-book details.rare summary i {
  background: linear-gradient(90deg, #a874f2 var(--p), #ffffff14 var(--p));
}
.badge-book details.rare summary span {
  color: #c9a2ff;
}
.badge-book details.rare .badge-chip.got {
  background: #a874f214;
  color: #e4d2ff;
}
.badge-book details.rare .badge-chip.got svg {
  color: #a874f2;
}
.badge-card.rare .badge-town b,
.badge-card.rare .badge-town span {
  color: #c9a2ff;
}

/* (the junction arrows are retired — you signal your own turns) */
.layout-swipe.touch-mode #touch-controls .jx:not([hidden]) {
  display: none !important;
}

.g-pedal:not(.on) b {
  transition: transform 0.18s ease-out;
}

/* 0.72 Swipe & Go: one thumb anywhere — swipe up/down for the gas/brake slider, flick left/right
   for the blinker. The blinkers glow as half-moons on the screen edges. */
.g-hint-c {
  display: none;
}
.layout-swipe .g-hint-l,
.layout-swipe .g-hint-r {
  display: none;
}
.layout-swipe .gestures .g-hint-c,
.gestures.layout-swipe .g-hint-c,
.layout-swipe.gestures .g-hint-c {
  display: flex;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.gest:has(.g-pedal.on) .g-hint-c,
.gest:has(.g-steer.on) .g-hint-c {
  opacity: 0;
}
.sig-ind {
  display: none;
  position: fixed;
  z-index: 7;
  top: 50%;
  width: 44px;
  height: 128px;
  margin-top: -64px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 100% 60% at var(--edge) 50%, #fff3cf 0%, #ffc04a 40%, #ff9a1f 75%, #ff9a1f00 100%);
  box-shadow: 0 0 28px 6px #ffa52a99;
}
.sig-ind.l {
  --edge: 0%;
  left: 0;
  border-radius: 0 64px 64px 0;
}
.sig-ind.r {
  --edge: 100%;
  right: 0;
  border-radius: 64px 0 0 64px;
}
.touch-mode .sig-ind {
  display: block;
}
.sig-l .sig-ind.l,
.sig-r .sig-ind.r {
  animation: sig-flash 0.76s steps(1, end) infinite;
}
@keyframes sig-flash {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.12;
  }
}

/* 0.79 daily challenge: red medallion, calendar-page icons */
.day-ic {
  --s: 22px;
  display: inline-grid;
  grid-template-rows: 32% 68%;
  flex: none;
  width: var(--s);
  height: var(--s);
  border-radius: calc(var(--s) * 0.18);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px #0006;
  text-align: center;
  line-height: 1;
}
.day-ic i {
  display: grid;
  place-items: center;
  background: #e2384b;
  color: #fff;
  font: 800 calc(var(--s) * 0.22) DM, Arial, sans-serif;
  font-style: normal;
  letter-spacing: 0.04em;
}
.day-ic b {
  display: grid;
  place-items: center;
  color: #1a1d22;
  font: 800 calc(var(--s) * 0.48) Oswald, DM, Arial, sans-serif;
}
.badge-modal:has(.badge-card.daily) .modal-card {
  border-top-color: #ff5a6a;
  background: radial-gradient(ellipse at 50% 0%, #4a1520, transparent 60%), linear-gradient(155deg, #20252cfa, #080c12fa);
}
.badge-card.daily .eyebrow {
  color: #ff8d98;
}
.badge-card.daily .badge-medal {
  background: radial-gradient(circle at 35% 30%, #ffe1e4, #ff5a6a 55%, #a3182c);
  box-shadow:
    0 0 0 4px #5c0814,
    0 0 0 8px #ff5a6a33,
    0 0 60px #ff5a6a88;
}
.badge-card.daily .badge-desc span {
  color: #ff8d98;
}
.badge-book details.daily summary b,
.badge-book details.daily summary span {
  color: #ff8d98;
}
.daily-today {
  margin: 8px 0 4px;
  font-size: 12px;
  color: #ffd2d7;
}
.badge-book .daily-chip {
  background: #ff5a6a14;
  color: #ffd2d7;
}

/* 0.79 near-miss streak */
.streak {
  position: absolute;
  z-index: 14;
  right: max(22px, env(safe-area-inset-right));
  top: calc(max(20px, env(safe-area-inset-top)) + 54px);
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #111a21d9;
  border: 1px solid #ff9a3a66;
  color: #ffd2a6;
  font: 700 11px DM, Arial, sans-serif;
  letter-spacing: 0.5px;
}
.streak[hidden] {
  display: none;
}
.streak b {
  font: 800 15px Oswald, DM, Arial, sans-serif;
  color: #ffb066;
}
body.wallet-on .streak {
  top: calc(max(20px, env(safe-area-inset-top)) + 150px);
}
.touch-mode .streak {
  right: auto;
  left: max(12px, env(safe-area-inset-left));
  top: calc(max(14px, env(safe-area-inset-top)) + 46px);
}
.nearmiss {
  position: fixed;
  z-index: 13;
  left: 50%;
  top: 36%;
  transform: translate(-50%, 0);
  pointer-events: none;
  opacity: 0;
  font: 800 22px Oswald, DM, Arial, sans-serif;
  letter-spacing: 1px;
  color: #ffb066;
  text-shadow: 0 2px 10px #000c, 0 0 18px #ff8a1f88;
  white-space: nowrap;
}
.nearmiss.lost {
  color: #ff8d98;
  font-size: 16px;
}
.nearmiss.show {
  animation: nearmiss-pop 1.1s ease-out forwards;
}
@keyframes nearmiss-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.8);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.08);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -6px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -18px) scale(1);
  }
}

/* 0.81 mini-map: rides along on jobs and runs home — top-left on desktop, top-right on phones */
.minimap {
  position: absolute;
  z-index: 12;
  left: max(26px, env(safe-area-inset-left));
  top: calc(max(20px, env(safe-area-inset-top)) + 70px);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  box-shadow: 0 6px 18px #0009;
  pointer-events: none;
}
.minimap[hidden] {
  display: none;
}
.touch-mode .minimap {
  left: auto;
  right: max(12px, env(safe-area-inset-right));
  top: calc(max(14px, env(safe-area-inset-top)) + 54px);
  width: 104px;
  height: 104px;
}
@media (orientation: landscape) and (max-height: 550px) {
  .touch-mode .minimap {
    width: 88px;
    height: 88px;
  }
}
/* the gesture hints fade once you've used them a few times */
.hints-learned .g-hint {
  display: none !important;
}

/* 0.83 upgrades: locked cars and paints, the upgrades button and list */
.swatch.locked {
  display: none; /* new paints stay hidden until a badge unlocks them */
}
#garage-vehicle.locked {
  filter: grayscale(1) brightness(0.45);
}
.car-lock {
  display: block;
  margin-top: 2px;
  color: #ffcf6a;
  font: 700 11px DM, Arial, sans-serif;
  letter-spacing: 0.5px;
}
.car-lock[hidden] {
  display: none;
}
.car-dots i.locked {
  opacity: 0.35;
}
.upgrades-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px auto 0;
  padding: 8px 16px;
  min-height: 0;
  border-radius: 999px;
  background: #ffffff0d;
  border: 1px solid #d8f47455;
  color: #e9f6c8;
  font: 800 11px DM, Arial, sans-serif;
  letter-spacing: 1.4px;
  cursor: pointer;
}
.upgrades-btn b {
  color: #d8f474;
  font-family: Oswald, DM, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.upgrades .up-stats {
  grid-template-columns: repeat(4, 1fr);
  margin: 12px 0;
}
.up-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  max-height: 46vh;
  overflow-y: auto;
  display: grid;
  gap: 4px;
  text-align: left;
}
.up-list li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #ffffff08;
  color: #8b948e;
  font-size: 12px;
}
.up-list li.got {
  background: #d8f47412;
  color: #eef6da;
}
.up-list li.got .up-ic {
  color: #d8f474;
  font-weight: 800;
}
.up-list small {
  font-size: 10.5px;
  opacity: 0.85;
}
.badge-unlock {
  margin: 8px auto 0;
  padding: 6px 12px;
  width: fit-content;
  border-radius: 999px;
  background: #d8f4741f;
  border: 1px solid #d8f47466;
  color: #e9f6c8;
  font-size: 12px !important;
}
.badge-unlock b {
  color: #d8f474;
}

/* 0.85 paint picker: a swipeable strip with the chosen colour in the middle, arrows like the cars */
.paint-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  width: 100%;
  max-width: 470px;
  contain: inline-size; /* (a long row of paint never widens the garage) */
  margin: 0 auto;
}
.paint-picker .swatches {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow: hidden;
  padding: 12px 14px;
  margin: -4px 0;
  touch-action: pan-y;
  cursor: grab;
}
.paint-picker .swatches.more {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.paint-picker .swatch {
  flex: none;
}
.paint-arrow {
  position: static;
  transform: none;
  flex: none;
  width: 32px;
  height: 32px;
  font-size: 20px;
}
.car-picker .turntable {
  cursor: pointer; /* tap the car for your upgrades */
}

/* 0.93 Swipe & Go: the slider is a funnel — narrow at the brake end, its mouth opening wide toward
   the gas end, so the more gas you give the more room your thumb has to steer left and right.
   (Sides: 43 px from centre at the bottom, 105 px at the top — touch-controls.js funnelRoom.) */
.layout-swipe .g-pedal::before,
.layout-swipe .g-pedal::after {
  content: "";
  position: absolute;
  border: 0;
  border-radius: 0;
}
.layout-swipe .g-pedal::before {
  left: -105px;
  width: 210px;
  top: calc(-1 * (var(--up, 90px) + 14px));
  height: calc(var(--up, 90px) + var(--down, 90px) + 28px);
  background: #ffffff59;
  clip-path: polygon(0 0, 100% 0, calc(50% + 43px) 100%, calc(50% - 43px) 100%);
}
.layout-swipe .g-pedal::after {
  left: -103px;
  width: 206px;
  top: calc(-1 * (var(--up, 90px) + 12.5px));
  height: calc(var(--up, 90px) + var(--down, 90px) + 25px);
  background: linear-gradient(to bottom, #2f3d14a6, #0d12148c 42%, #0d12148c 58%, #3a1d16a6);
  clip-path: polygon(0 0, 100% 0, calc(50% + 41.5px) 100%, calc(50% - 41.5px) 100%);
}
.layout-swipe .g-pedal b {
  z-index: 1;
  transform: translate(var(--dx, 0px), var(--dy, 0));
}

/* 0.93 "Welcome to …" as you cross into a new town or city */
.town-banner {
  position: fixed;
  left: 50%;
  top: 17%;
  z-index: 6;
  transform: translate(-50%, -8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 26px 11px;
  border-radius: 14px;
  background: #0d1214cc;
  border: 1px solid #ffffff26;
  border-top: 3px solid var(--lime);
  box-shadow: 0 10px 30px #0009;
  color: #eef3e4;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
}
.town-banner span {
  font: 700 10px/1 DM, Arial, sans-serif;
  letter-spacing: 0.3em;
  color: var(--lime);
}
.town-banner b {
  font: 800 italic 30px/1.05 Barlow, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.town-banner small {
  font: 600 11px/1 DM, Arial, sans-serif;
  color: #c9d1c3;
  letter-spacing: 0.06em;
}
.town-banner.show {
  animation: town-in 3.6s ease forwards;
}
@keyframes town-in {
  0% { opacity: 0; transform: translate(-50%, -10px) scale(0.96); }
  10% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  82% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -6px) scale(0.98); }
}
.touch-mode .town-banner {
  top: 16.5%;
  padding: 8px 18px 9px;
}
.touch-mode .town-banner b {
  font-size: 24px;
}

/* 0.95 crash screen: the paper's "photo" is a replay of the crash — in colour, close in,
   your car circled in red marker. Wide screens: photo on the left, the story beside it. */
.crash-news.has-photo {
  max-width: 640px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "mast mast" "photo kick" "photo head" "photo dek";
  grid-template-rows: auto auto auto 1fr;
  column-gap: 16px;
  align-items: start;
}
.crash-news.has-photo::before {
  grid-area: mast;
}
.crash-news.has-photo .news-kicker {
  grid-area: kick;
  justify-self: start;
}
.crash-news.has-photo h3 {
  grid-area: head;
}
.crash-news.has-photo p {
  grid-area: dek;
}
.news-photo {
  grid-area: photo;
  position: relative;
  margin: 0;
  padding: 0;
}
.news-photo canvas {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: 190px;
}
body.crashed .news-photo canvas {
  filter: none; /* (not the dimmed game world behind the crash screen) */
}
body.crashed .news-photo .np-scene {
  filter: saturate(1.05) contrast(1.05);
  outline: 1px solid #1b1a1766;
}
.news-photo .np-ink {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
/* newsprint grain over the photo */
.news-photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 190px;
  pointer-events: none;
  background-image: radial-gradient(#0001 0.6px, transparent 0.9px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}
.news-photo figcaption {
  margin-top: 5px;
  font: 10.5px/1.3 Georgia, "Times New Roman", serif;
  color: #4a463d;
}
.news-photo figcaption i {
  color: #7a7466;
}
@media (max-width: 700px) {
  .crash-news.has-photo {
    grid-template-columns: 1fr;
    grid-template-areas: "mast" "kick" "head" "photo";
  }
  .news-photo canvas,
  .news-photo::after {
    height: 150px;
  }
  .crash-news.has-photo p {
    display: none; /* (the photo says it; keep the card short on a phone) */
  }
}

/* ═════ 0.97 Swipe Drive (phones): no controls on screen ═════ */
/* the old funnel and stick rings don't show; just a faint trail under your thumb */
.layout-swipe .g-pedal,
.layout-swipe .g-steer {
  display: none !important;
}
.g-trail {
  pointer-events: none;
  z-index: 0;
}
.g-trail {
  display: none;
}
.layout-swipe .g-trail {
  display: block;
}
/* the cruise light on the dash: always there, tap to set */
.m-cruise {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #0f1416e6;
  border: 1px solid #ffffff2e;
  color: #8d968a;
  font: 800 10px/1.2 DM, Arial, sans-serif;
  letter-spacing: 0.8px;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-cruise i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a423a;
  box-shadow: inset 0 0 0 1px #0006;
}
.m-cruise.on {
  background: #102a12e6;
  border-color: #7ee07a;
  color: #9ff59a;
}
.m-cruise.on i {
  background: #7ee07a;
  box-shadow: 0 0 8px #7ee07a, 0 0 2px #fff;
}
.m-cruise:active {
  transform: scale(0.95);
}
/* under the street sign: the streets you can turn onto at the junction coming up */
.m-turns {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 2px;
  opacity: 0.55;
  transform: scale(0.92);
  transition: opacity 0.3s, transform 0.3s;
}
.m-turns.near {
  opacity: 1;
  transform: none;
}
.m-turns[hidden] {
  display: none;
}
.mt-sign {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 46vw;
  padding: 2px;
  border-radius: 5px;
  background: linear-gradient(180deg, #1b8a52, #0a6a3b 55%, #06552f);
  box-shadow: 0 0 0 1px #04381f, 0 2px 0 #032a17, 0 6px 12px #0009;
}
.mt-sign i {
  font: 900 11px/1 DM, Arial, sans-serif;
  font-style: normal;
  color: #fff;
  padding: 0 3px;
}
.mt-sign b {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  min-width: 0;
  padding: 3px 8px 2px;
  border: 1.5px solid #f4f7f2;
  border-radius: 3px;
  color: #fff;
  font: 600 14px/1.1 Barlow, "Arial Narrow", sans-serif;
  white-space: nowrap;
  overflow: hidden;
}
.mt-sign b .sfx,
.mt-sign b .dir {
  font-size: 0.66em;
  flex-shrink: 0;
}
.mt-sign b .nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mt-sign b.long,
.mt-sign b.xlong {
  font-size: 12px;
}
/* the turn you've swiped for */
.mt-sign.pick {
  box-shadow: 0 0 0 2px #ffb43c, 0 0 14px #ffb43caa, 0 6px 12px #0009;
}
.mt-sign.pick i {
  color: #ffb43c;
  animation: mt-blink 0.76s steps(1, end) infinite;
}
@keyframes mt-blink {
  50% { opacity: 0.25; }
}

/* 0.98 driving record: your last five tickets; "View all" for the rest */
.driving-record .ticket-row.more {
  display: none;
}
.driving-record.show-all .ticket-row.more {
  display: block;
}
.record-all {
  display: block;
  margin: 12px auto 0;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--lime);
  background: transparent;
  color: var(--lime);
  font: 800 11px/1 DM, Arial, sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
}
.record-all:hover {
  background: #d8f4741a;
}

/* ═════ 0.99 the one-handed lever (phones) ═════
   A pivot where your thumb went down, a thin lever out to your thumb, and the knob. That's all. */
.g-lever {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 1;
}
.g-lever.on {
  opacity: 1;
}
.g-lever i {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: var(--len, 0px);
  border-radius: 2px;
  background: linear-gradient(to top, #ffffff10, #ffffff59);
  transform-origin: 50% 100%;
  transform: rotate(var(--ang, 0rad));
}
.g-lever::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff40;
  box-shadow: 0 0 0 1px #0004;
}
.g-lever b {
  position: absolute;
  left: -22px;
  top: -22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #ffffff8c;
  background: #0d121433;
  box-shadow: 0 3px 10px #0006;
  transform: translate(var(--dx, 0px), var(--dy, 0px));
}
.g-lever.gas b {
  border-color: var(--lime);
  background: #d8f47426;
}
.g-lever.brake b {
  border-color: #ff9f86;
  background: #ff8c6a26;
}
.layout-lever .g-pedal,
.layout-lever .g-steer,
.layout-lever .g-trail,
.layout-lever .g-hint-l,
.layout-lever .g-hint-r,
.layout-lever .g-hint-c {
  display: none !important;
}

/* 0.99.6 the crash screen stands alone: none of the driving HUD underneath (street sign, streak,
   cash, mini-map, dash, radio, pause, mission/run timers, touch controls…) */
body.crashed header,
body.crashed footer,
body.crashed #m-top,
body.crashed #m-dock,
body.crashed #pause,
body.crashed #wallet,
body.crashed #streak,
body.crashed #minimap,
body.crashed #nearmiss,
body.crashed #fps,
body.crashed #trial-hud,
body.crashed #trial-offer,
body.crashed #mission-hud,
body.crashed #trip-hud,
body.crashed #touch-controls,
body.crashed .sig-ind,
body.crashed #town-banner,
body.crashed #toast,
body.crashed .radio-slot {
  display: none !important;
}

/* 0.99.7 the logo, top-left in every mode, with the mode you're playing in small letters under it */
header {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.build-tag,
.touch-mode .build-tag {
  display: block !important;
  font: 800 9px/1 DM, Arial, sans-serif;
  letter-spacing: 2.2px;
  color: var(--lime);
  opacity: 0.85;
  margin-left: 2px;
  text-shadow: 0 1px 4px #000, 0 0 8px #000c;
}
.touch-mode .build-tag {
  font-size: 8px;
}
/* (the streak pill moves down a touch to make room for it) */
.touch-mode .streak {
  top: calc(max(14px, env(safe-area-inset-top)) + 60px);
}
/* the mini-map: phones put it bottom-left, just above the dash — clear of the street sign, the
   Get Home Safe bar and the pause button up top; desktop keeps it top-left, under the logo */
.minimap {
  top: calc(max(20px, env(safe-area-inset-top)) + 88px);
}
.touch-mode .minimap {
  top: auto;
  bottom: calc(88px + env(safe-area-inset-bottom));
  right: auto;
  left: max(12px, env(safe-area-inset-left)); /* (bottom-left, above the dash) */
}
.touch-mode.radio-expanded .minimap {
  display: none;
}
/* Story on a phone: the logo stays top-left; the cash sits on the same top row, between the logo
   and Pause, as a small two-line tag (cash over what you owe) — the street sign keeps the middle */
.touch-mode.wallet-on header {
  visibility: visible;
}
.touch-mode .wallet {
  top: max(12px, env(safe-area-inset-top));
  left: calc(max(12px, env(safe-area-inset-left)) + 136px);
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 4px 9px 5px;
  border-radius: 10px;
}
.touch-mode .wallet .w-row {
  gap: 4px;
  align-items: baseline;
}
.touch-mode .wallet b {
  font-size: 13px;
}
.touch-mode .wallet .w-owe b {
  font-size: 10.5px;
}
.touch-mode .wallet .w-owe small {
  font-size: 7.5px;
}
/* (phones: when the turn signs or a police note show under the street sign, the job / run banner
   and messages slide down out of their way instead of sitting on top of them) */
.touch-mode .mission-hud,
.touch-mode.compact .trip-hud,
.touch-mode .trial-hud,
.touch-mode.compact #toast {
  transition: top 0.25s ease;
}
.touch-mode:has(#m-turns:not([hidden])) .mission-hud,
.touch-mode.compact:has(#m-turns:not([hidden])) .trip-hud,
.touch-mode:has(#m-turns:not([hidden])) .trial-hud,
.touch-mode:has(#m-police:not([hidden])) .mission-hud,
.touch-mode.compact:has(#m-police:not([hidden])) .trip-hud,
.touch-mode:has(#m-police:not([hidden])) .trial-hud {
  top: calc(158px + env(safe-area-inset-top));
}
.touch-mode:has(#m-turns:not([hidden]), #m-police:not([hidden])).compact #toast {
  top: calc(222px + env(safe-area-inset-top));
}
.touch-mode:has(#m-turns:not([hidden])):has(#m-police:not([hidden])) .mission-hud,
.touch-mode.compact:has(#m-turns:not([hidden])):has(#m-police:not([hidden])) .trip-hud,
.touch-mode:has(#m-turns:not([hidden])):has(#m-police:not([hidden])) .trial-hud {
  top: calc(188px + env(safe-area-inset-top));
}
.touch-mode.compact:has(#m-turns:not([hidden])):has(#m-police:not([hidden])) #toast {
  top: calc(252px + env(safe-area-inset-top));
}

/* ═════ 0.99.9 phone top bar: the logo (stacked) top-left with the mode and what you owe Moose under
   it, the street sign in the top centre, Pause as a round button top-right, the streak under Pause ═════ */
.touch-mode .brand {
  flex-wrap: wrap;
  width: 86px;
  row-gap: 0;
  line-height: 1;
}
.touch-mode .brand small {
  flex-basis: 100%;
  margin: 2px 0 0 1px;
  font-size: 8px;
  letter-spacing: 3.4px;
}
.touch-mode .build-tag {
  margin-top: 3px;
}
.touch-mode .m-top {
  top: calc(10px + env(safe-area-inset-top));
  width: auto;
  max-width: calc(100vw - 2 * 100px);
  z-index: 9;
}
.touch-mode .m-blade {
  max-width: 100%;
}
.touch-mode #pause {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  top: max(10px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  text-align: center;
  font-size: 15px;
}
.touch-mode #pause span {
  display: none;
}
/* what you owe Moose: under the logo */
.touch-mode .wallet {
  top: calc(max(10px, env(safe-area-inset-top)) + 62px);
  left: max(12px, env(safe-area-inset-left));
}
/* the near-miss streak: under Pause */
.touch-mode .streak,
.touch-mode.wallet-on .streak {
  top: calc(max(10px, env(safe-area-inset-top)) + 54px);
  left: auto;
  right: max(12px, env(safe-area-inset-right));
}
/* job / run banners: below all that */
.touch-mode .mission-hud,
.touch-mode.compact .trip-hud,
.touch-mode .trial-hud,
.touch-mode:has(#m-turns:not([hidden])) .mission-hud,
.touch-mode.compact:has(#m-turns:not([hidden])) .trip-hud,
.touch-mode:has(#m-turns:not([hidden])) .trial-hud {
  top: calc(118px + env(safe-area-inset-top));
}
.touch-mode:has(#m-police:not([hidden])) .mission-hud,
.touch-mode.compact:has(#m-police:not([hidden])) .trip-hud,
.touch-mode:has(#m-police:not([hidden])) .trial-hud,
.touch-mode:has(#m-turns:not([hidden])):has(#m-police:not([hidden])) .mission-hud,
.touch-mode.compact:has(#m-turns:not([hidden])):has(#m-police:not([hidden])) .trip-hud,
.touch-mode:has(#m-turns:not([hidden])):has(#m-police:not([hidden])) .trial-hud {
  top: calc(146px + env(safe-area-inset-top));
}
.touch-mode.compact #toast,
.touch-mode:has(#m-turns:not([hidden]), #m-police:not([hidden])).compact #toast,
.touch-mode.compact:has(#m-turns:not([hidden])):has(#m-police:not([hidden])) #toast {
  top: calc(196px + env(safe-area-inset-top));
}
/* "Welcome to …" on a phone: right under the street sign (and the turn signs, when they're up) */
.m-top .town-banner {
  position: static;
  transform: none;
  margin-top: 6px;
}
.m-top .town-banner.show {
  animation-name: town-in-flow;
}
@keyframes town-in-flow {
  0% { opacity: 0; transform: translateY(-6px) scale(0.96); }
  10% { opacity: 1; transform: none; }
  82% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-4px) scale(0.98); }
}
/* the hospital note: at the bottom, just above the dash, gone once you drive off */
.bottom-note {
  position: fixed;
  z-index: 8;
  left: 50%;
  bottom: calc(200px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: min(92vw, 520px);
  padding: 9px 16px;
  border-radius: 12px;
  background: #0d1214e0;
  border: 1px solid #ffffff26;
  color: #eef3e4;
  font: 600 12.5px/1.35 DM, Arial, sans-serif;
  text-align: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.bottom-note.gone {
  opacity: 0;
  transform: translate(-50%, 8px);
}
.touch-mode .bottom-note {
  bottom: calc(92px + env(safe-area-inset-bottom));
  font-size: 12px;
}
body.crashed .bottom-note {
  display: none;
}
/* (the cash tag stacks narrow — cash, then OWE MOOSE over the amount — so the street sign and the
   turn signs in the middle never run into it) */
.touch-mode .wallet {
  width: 88px;
  min-width: 0;
}
.touch-mode .wallet .w-owe {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.touch-mode .m-top {
  max-width: calc(100vw - 2 * 108px);
}
.touch-mode .m-turns {
  max-width: 100%;
  gap: 5px;
}
.touch-mode .mt-sign {
  max-width: calc(50% - 3px);
  min-width: 0;
}
.touch-mode .mt-sign b {
  font-size: 12px;
  padding: 2px 6px 1px;
}
.touch-mode .mt-sign b .sfx,
.touch-mode .mt-sign b .dir {
  display: none; /* (just the name on the little turn signs: room for it) */
}
.touch-mode .mt-sign i {
  padding: 0 2px;
}
.touch-mode .mt-sign {
  max-width: none;
  flex: 0 1 auto;
}
.touch-mode .m-turns {
  width: max-content;
  max-width: calc(100vw - 2 * 108px);
}

/* 0.99.9.4 gridirons: football-field badges in turf green */
.badge-modal:has(.badge-card.field) .modal-card {
  border-top-color: #4cbf5c;
  background: radial-gradient(ellipse at 50% 0%, #123d1d, transparent 60%), linear-gradient(155deg, #20252cfa, #080c12fa);
}
.badge-card.field .eyebrow,
.badge-card.field .badge-desc span,
.badge-card.field .badge-complete,
.badge-card.field .badge-town b,
.badge-card.field .badge-town span,
.badge-book details.field summary b,
.badge-book details.field summary span {
  color: #8fe39a;
}
.badge-card.field .badge-medal {
  color: #0b3517;
  background: radial-gradient(circle at 35% 30%, #dcf7cf, #4cbf5c 55%, #1f7a35);
  box-shadow:
    0 0 0 4px #145226,
    0 0 0 8px #4cbf5c33,
    0 0 60px #4cbf5c88;
}
.badge-card.field .badge-desc {
  font-size: 15px !important;
  line-height: 1.45;
}
.badge-card.field .badge-bar i {
  background: linear-gradient(90deg, #2f9a45, #8fe39a);
}
.badge-book details.field summary i {
  background: linear-gradient(90deg, #4cbf5c var(--p), #ffffff14 var(--p));
}
.badge-book details.field .badge-chip.got {
  background: #4cbf5c14;
  color: #d4f5d8;
}
.badge-book details.field .badge-chip.got svg {
  color: #4cbf5c;
}

/* 0.99.9.9 desktop: the street sign (and the turns coming up) at the top centre, like phones;
   the dashboard keeps the speed-limit sign; a round pause button */
body:not(.touch-mode) .m-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: fixed;
  z-index: 6;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  width: auto;
  max-width: min(640px, calc(100vw - 440px));
  pointer-events: none;
}
body:not(.touch-mode) .m-town {
  font-size: 11px;
  letter-spacing: 2px;
}
body:not(.touch-mode) .m-blade > b {
  font-size: 30px;
  padding: 7px 20px 6px;
}
body:not(.touch-mode) .m-blade > b.long {
  font-size: 25px;
}
body:not(.touch-mode) .m-blade > b.xlong {
  font-size: 21px;
}
body:not(.touch-mode) .mt-sign {
  max-width: 300px;
}
body:not(.touch-mode) .road-panel .eyebrow,
body:not(.touch-mode) .road-panel .street-blade {
  display: none;
}
body:not(.touch-mode) .road-panel .limit-panel {
  transform: scale(1.25);
  transform-origin: center;
}
/* (the hospital-style "welcome" sits in with the sign) */
body:not(.touch-mode) .m-top .town-banner {
  margin-top: 6px;
}
/* (the run home's turn card and the notes stack under the sign: hud.js stackTop sets their top) */
body:not(.touch-mode) #toast {
  bottom: auto;
}
body:not(.touch-mode) .road-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body:not(.touch-mode) #m-police {
  font-size: 12px;
}
/* Pause: a round Ⅱ like on phones */
body:not(.touch-mode) #pause {
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  text-align: center;
  font-size: 18px;
  line-height: 1;
}
body:not(.touch-mode) #pause span {
  display: none;
}

/* Get Home Safe game over: just Try again / Main menu, side by side */
.fail-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}
.fail-actions button {
  flex: 1 1 0;
  max-width: 220px;
}

/* My Roads (Driving Record): your own map of WNY — streets you've driven, and where you drive most */
.myroads {
  position: relative;
  margin: 4px 0 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ffffff1a;
  background: #0b1214;
}
#myroads-map {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: min(340px, 46vh);
  touch-action: none;
  cursor: grab;
}
#myroads-map:active {
  cursor: grabbing;
}
.mr-tools {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
}
.mr-tools button {
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 999px;
  background: #0b1214d9;
  border: 1px solid #ffffff2a;
}
.mr-legend {
  position: absolute;
  left: 10px;
  bottom: 8px;
  display: flex;
  gap: 12px;
  font-size: 10px;
  color: #dfe6d6;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}
.mr-legend i {
  display: inline-block;
  width: 14px;
  height: 4px;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 2px;
}
.mr-legend i.lit {
  background: #d8f474;
}
.mr-legend i.heat {
  height: 9px;
  width: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffb43c, #ff5a1e88 60%, transparent 70%);
}
.myroads-empty {
  padding: 14px;
  border-radius: 10px;
  background: #ffffff0a;
  font-size: 13px;
  color: #c9d2c4;
}
.mr-towns {
  display: grid;
  gap: 6px;
  margin: 6px 0 12px;
}
.mr-town {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  font-size: 12px;
}
.mr-town span {
  color: #b7c2b3;
}
.mr-town i {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #d8f474 var(--p), #ffffff14 var(--p));
}
.record-stats div b {
  overflow-wrap: anywhere;
}
.record-stats b.mr-street {
  font-size: 16px;
  line-height: 1.15;
  white-space: normal;
}
.mr-town {
  text-align: left;
}
.mr-town span {
  text-align: right;
}

/* passengers: who's riding, where to, and how they rate your driving */
.rider-hud {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-color: #4fe0c877;
  background: linear-gradient(160deg, #0d2a26f2, #061714f5);
}
.rider-hud[hidden] {
  display: none;
}
.rider-hud .rh-who {
  font-weight: 800;
  font-size: 13px;
}
.rider-hud .rh-to {
  font-size: 12px;
  color: #bfe9e1;
  flex: 1;
}
.rider-hud .rh-stars {
  color: #ffd25a;
  letter-spacing: 1px;
  font-size: 15px;
}
.setting-note {
  margin: -4px 0 10px;
  font-size: 11px;
  color: #a9c2b6;
  text-align: left;
}
.setting-note:empty {
  display: none;
}

/* 0.99.9.9.6 HUD: no live blur behind anything that sits over the moving map (a blur has to be
   recomputed every frame the map moves — costly on phones); solid, slightly deeper panels instead,
   with a thin border so they still read crisply over bright aerial photos */
.wallet,
.touch-mode .pause-only,
#pause,
.di-head,
.mission-hud,
.trip-hud,
#toast,
.streak,
.town-banner {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.wallet {
  background: #0e161cf2;
  border-color: #ffffff2e;
}
.touch-mode .pause-only,
body:not(.touch-mode) #pause {
  background: #10181ef0;
  border: 1px solid #ffffff2e;
}
.di-head {
  background: #0d1214f7;
}
#toast {
  background: #0b1513f5;
  border-color: #d8f47452;
}

/* 0.99.9.9.8 desktop dash: only as wide as what's on it (speedometer · limit sign · radio), a
   springy needle, and a little glass on the dial and the dash */
body:not(.touch-mode) footer,
body:not(.touch-mode).free-roam footer {
  width: auto;
  grid-template-columns: auto auto auto;
  column-gap: 26px;
  padding: 12px 22px 12px 18px;
}
body:not(.touch-mode) .road-panel {
  position: static;
  min-width: 96px;
}
/* the pull-over / speeding note floats just above the dash instead of widening it */
body:not(.touch-mode) #police-status {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 12px;
  white-space: nowrap;
  font-size: 11px;
  border-radius: 999px;
  background: #0e1418f0;
  border: 1px solid #ffffff22;
}
body:not(.touch-mode) #police-status[hidden] {
  display: none;
}
/* the needle settles with a touch of overshoot, like a real gauge (a compositor transition: free) */
#speed-needle {
  transition: transform 0.24s cubic-bezier(0.34, 1.5, 0.64, 1);
}
/* glass: a soft highlight across the dial and along the top of the dash (static CSS) */
.speedometer::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(155deg, #ffffff1f 0%, #ffffff08 32%, transparent 48%);
}
body:not(.touch-mode) footer::before {
  content: "";
  position: absolute;
  inset: 1px 18% auto 12%;
  height: 40%;
  border-radius: 80px 18px 0 0;
  pointer-events: none;
  background: linear-gradient(180deg, #ffffff10, transparent);
}

/* ═════ 1.0 title screen ═════ */
/* the live WNY drone shot shows through: a dark scrim behind the menu side, the rest left open
   (no blur — the map moves behind it) */
.title-screen {
  background:
    linear-gradient(90deg, #05090cf2 0%, #05090cd9 34%, #05090c66 58%, #05090c33 100%),
    radial-gradient(ellipse at 70% 50%, transparent 40%, #02040799 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.title-screen::after {
  /* the quick dip to dark between drone shots */
  content: "";
  position: fixed;
  inset: 0;
  background: #020407;
  opacity: 0;
  pointer-events: none;
  z-index: -1; /* under the menu, over the map */
}
body.title-cut .title-screen::after {
  animation: title-cut 1.6s ease-out;
}
@keyframes title-cut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
/* "Right now in WNY" */
.title-now {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #c9d6c2;
  text-shadow: 0 1px 4px #000;
}
.title-now:empty {
  display: none;
}
/* Continue: the big lit card on top */
.menu-continue small {
  font-size: 12px;
}
.menu-continue span {
  letter-spacing: 1px;
}
/* the small buttons: an icon and a short label (icons only on phones — desktop has room for words) */
.menu-small .mi-ic {
  display: none;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 22px;
  opacity: 0.75;
}
/* garage: what you're working toward next */
.garage-next {
  display: grid;
  gap: 6px;
  margin: 6px auto 0;
  width: min(360px, 100%);
  padding: 8px 12px;
  border-radius: 10px;
  background: #0c1214cc;
  border: 1px solid #ffffff1c;
  color: #dfe8d6;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}
.garage-next[hidden] {
  display: none;
}
.garage-next b {
  color: var(--lime);
  font-size: 14px;
}
.garage-next em {
  font-style: normal;
  font-weight: 700;
}
.garage-next i {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: #ffffff14;
  overflow: hidden;
}
.garage-next i b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #9cc63a, var(--lime));
  border-radius: 3px;
}
.garage-next:hover {
  border-color: #d8f47466;
}

/* phones: the whole menu on one screen, Story under your thumb */
@media (max-width: 760px) {
  .title-screen {
    background: linear-gradient(180deg, #05090ccc 0%, #05090ca6 30%, #05090ce6 55%, #05090cf7 100%) !important;
  }
  .title-shell {
    gap: 8px;
  }
  .title-now {
    font-size: 11.5px;
    margin-top: 6px;
  }
  /* (the logo sits below the Sign in button in the top-right corner) */
  .title-brand {
    margin-top: 34px;
  }
  .turntable {
    width: min(150px, 40vw);
  }
  .title-garage {
    gap: 6px;
  }
  .swatch {
    width: 28px;
    height: 28px;
  }
  .car-name b {
    font-size: 16px;
  }
  .garage-next {
    padding: 6px 10px;
    font-size: 11px;
  }
  .title-menu {
    gap: 6px;
  }
  .menu-item {
    padding: 8px 14px;
  }
  .menu-item span {
    font-size: 21px;
  }
  .menu-item.menu-main span {
    font-size: 26px;
  }
  /* Badges · Record · Leaderboards · Settings: one row of four icon buttons */
  .title-menu {
    grid-template-columns: repeat(4, 1fr);
  }
  .title-menu > .menu-small {
    grid-column: auto;
    align-items: center;
    justify-content: center;
    padding: 8px 2px 7px;
    gap: 3px;
  }
  .title-menu > .menu-small .mi-ic {
    display: block;
    position: static;
    transform: none;
    font-size: 22px;
    opacity: 1;
  }
  .title-menu > .menu-small span {
    font-size: 10px !important;
    letter-spacing: 0.5px;
    font-style: normal;
    white-space: nowrap;
  }
  .title-menu > .menu-small small {
    display: none;
  }
}

/* ═════ school zone on: a fluorescent SCHOOL plaque on top of the limit sign ═════ */
.limit-panel.school .road-limit-sign::after,
.m-limit.school::after {
  content: "SCHOOL";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #c6e33a;
  color: #121314;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #121314, 0 3px 8px #0008;
  font: 800 11px/1 Barlow, "Arial Narrow", sans-serif;
  letter-spacing: 1px;
  white-space: nowrap;
  animation: school-blink 0.9s steps(2, jump-none) infinite;
}
.limit-panel.school .road-limit-sign::after {
  top: -19px;
  padding: 3px 7px;
}
.m-limit.school {
  position: relative;
}
.m-limit.school::after {
  top: -15px;
  padding: 2px 4px;
  font-size: 8.5px;
}
@keyframes school-blink {
  50% {
    box-shadow: 0 0 0 1px #121314, 0 0 10px #ffc23a;
  }
}

/* the mode you can carry on with: CONTINUE on that tab, and a small "New" to start over instead */
.menu-mode .mi-new {
  display: none;
}
.menu-mode.can-continue .mi-new {
  display: inline-block;
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px;
  border-radius: 6px;
  background: #0e1416d9;
  color: #f4f6ec;
  font: 700 11px DM, sans-serif;
  font-style: normal;
  letter-spacing: 0.8px;
  box-shadow: 0 0 0 1px #ffffff2a;
  cursor: pointer;
}
.menu-mode.can-continue .mi-new:hover,
.menu-mode.can-continue .mi-new:focus-visible {
  background: #1c2629;
  outline: none;
  box-shadow: 0 0 0 2px var(--lime, #d8f474);
}
.menu-mode.can-continue span::after {
  content: " · CONTINUE";
  font-size: 0.62em;
  letter-spacing: 1px;
  vertical-align: 0.22em;
  opacity: 0.85;
}



/* phones: the paint strip scrolls under your finger (with momentum, settling on a colour); tap one to pick it */
@media (max-width: 760px), (pointer: coarse) {
  .paint-picker .swatches {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: auto;
  }
  .paint-picker .swatches::-webkit-scrollbar {
    display: none;
  }
  .paint-picker .swatch {
    scroll-snap-align: center;
    flex: none;
  }
}
@media (max-width: 760px) {
  /* (more room for the strip: the arrows go — your finger does that now) */
  .paint-picker .paint-arrow {
    display: none;
  }
  .paint-picker .swatches {
    max-width: calc(100vw - 32px);
  }
}

/* ═════ Police Chase: the readout (heat stars, cruisers, the chase clock, the escape bar) ═════ */
.pursuit-hud .mh-title {
  color: #ff8f8f;
  letter-spacing: 1.5px;
}
.pursuit-hud.hot {
  border-color: #ff4a4a66;
  animation: pursuit-flash 1.1s steps(2, jump-none) infinite;
}
@keyframes pursuit-flash {
  0% {
    box-shadow: 0 6px 18px #0008, 0 0 0 1px #ff3b3b55, 0 0 22px #ff2a2a33;
  }
  50% {
    box-shadow: 0 6px 18px #0008, 0 0 0 1px #3b7bff55, 0 0 22px #2a5cff33;
  }
}
.pursuit-hud .mh-bar i {
  background: linear-gradient(90deg, #9ff725, #d8f474);
}
.menu-chase span {
  color: #ffd6d6;
}
@media (prefers-reduced-motion: reduce) {
  .pursuit-hud.hot {
    animation: none;
  }
}
.pursuit-hud .heat {
  color: #ff6b6b;
  letter-spacing: 2px;
  text-shadow: 0 0 8px #ff3b3b88;
}
.pursuit-hud .heat i {
  font-style: normal;
  color: #ffffff2e;
  text-shadow: none;
}
.record-stats .rec-heat {
  color: #ff6b6b;
  letter-spacing: 1px;
  font-size: 22px;
  line-height: 1;
}
/* the horn, beside cruise on the phone dash (H on a keyboard) */
.m-mid {
  gap: 6px;
}
.m-horn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: #0f1416e6;
  border: 1px solid #ffffff2e;
  color: #c9d0c4;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.m-horn svg {
  display: none;
}
.m-horn span {
  font: 800 8.5px/1 DM, Arial, sans-serif;
  letter-spacing: 0.4px;
}
.m-horn svg {
  width: 17px;
  height: 17px;
}
.m-horn:active,
.m-horn.blast {
  border-color: #ffd34d;
  color: #ffd34d;
}
.m-horn.blast {
  animation: horn-blast 0.4s ease-out;
}
@keyframes horn-blast {
  0% {
    transform: scale(0.92);
    box-shadow: 0 0 0 0 #ffd34d88;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 10px #ffd34d00;
  }
}
/* under the street sign at a railroad crossing: how long until the train's by */
.m-rail {
  margin: 4px 0 0;
  padding: 4px 11px;
  border-radius: 999px;
  background: #1a0d0bd9;
  border: 1px solid #ff6a5288;
  font: 800 10.5px/1.2 DM, Arial, sans-serif;
  letter-spacing: 0.6px;
  color: #ffd6cc;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Get Home Safe: how far ahead of / behind your ghost you are (under the clock) */
.trip-gap {
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  font: 800 10px/1.3 DM, Arial, sans-serif;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: #1b2630;
  color: #bfe8ff;
}
.trip-gap[data-state="ahead"] {
  background: #12301a;
  color: #8ff08a;
}
.trip-gap[data-state="behind"] {
  background: #3a1612;
  color: #ff8a7a;
}
.compact .trip-gap {
  font-size: 9px;
}
/* the route review on the arrival card */
.trip-review {
  margin: 10px 0 12px;
  text-align: left;
}
.trip-review canvas {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 230;
  border-radius: 10px;
  border: 1px solid #ffffff1f;
}
.review-key,
.review-waits {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
  font: 600 11px/1.3 DM, Arial, sans-serif;
  color: #b9c2b4;
}
.review-key i,
.review-waits i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: -1px;
}
.review-key i.you {
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: #5fd0ff;
  vertical-align: 2px;
}
.review-key i.short {
  width: 16px;
  height: 0;
  border-radius: 0;
  border-top: 3px dotted #ffb24c;
  vertical-align: 3px;
}
.review-line {
  margin: 8px 0 0 !important;
  font-size: 13px;
  color: #ffe2b5;
}
@media (max-width: 560px) {
  .trip-review canvas {
    aspect-ratio: 640 / 300;
  }
}
/* Free Roam: how much of this town you've driven (under the street sign) */
.m-explore {
  position: relative;
  overflow: hidden;
  margin: 4px 0 0;
  padding: 4px 11px;
  border-radius: 999px;
  background: #0d1214d9;
  border: 1px solid #7ee07a55;
  font: 800 10px/1.2 DM, Arial, sans-serif;
  letter-spacing: 0.6px;
  color: #d4f5cf;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  isolation: isolate;
}
.m-explore::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  background: #7ee07a33;
  z-index: -1;
  transition: width 0.6s;
}
.m-explore.flash {
  border-color: #7ee07a;
  color: #fff;
  box-shadow: 0 0 12px #7ee07a66;
}
.m-explore.finished {
  border-color: #ffd34d;
  color: #ffe9a8;
}
.m-explore.finished::before {
  background: #ffd34d22;
}
.mr-town.finished b::after {
  content: " 🏁";
}
/* Cruise with friends (Free Roam) */
.cruise-room {
  display: flex;
  gap: 6px;
  margin: 10px 0 6px;
}
.cruise-room input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #ffffff33;
  background: #0b1013;
  color: #f1f5e9;
  font: 700 14px DM, Arial, sans-serif;
}
.cruise-room button {
  flex: none;
  padding: 0 12px;
  font-size: 12px;
}
.cruise-head {
  margin: 12px 0 2px;
  font: 800 10px DM, Arial, sans-serif;
  letter-spacing: 1.4px;
  color: #c9e98a;
}
.cruise-share {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font: 600 11px DM, Arial, sans-serif;
  color: #9ff59a;
  overflow-wrap: anywhere;
}
.cruise-share[hidden] {
  display: none;
}
.cruise-off {
  font-size: 13px;
  color: #ffd0a8;
}
.cruise-list {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}
.cruise-peer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  background: #ffffff0b;
  border: 1px solid #ffffff14;
  text-align: left;
}
.cruise-peer i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.cruise-peer b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cruise-peer span {
  font-size: 11px;
  color: #9aa69c;
  white-space: nowrap;
}
.cruise-peer button {
  flex: none;
  padding: 6px 10px;
  font-size: 11px;
}
.cruise-empty {
  font-size: 13px;
  color: #9aa69c;
}
/* Story: the last call — three ways out */
.end-choices {
  display: grid;
  gap: 8px;
  margin: 12px 0 4px;
}
.end-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 11px 14px;
  text-align: left;
  border-radius: 10px;
  text-transform: none;
}
.end-choice b {
  font: 800 14px/1.2 DM, Arial, sans-serif;
  letter-spacing: 0.2px;
}
.end-choice b small {
  margin-left: 6px;
  font-size: 9px;
  letter-spacing: 1px;
  color: #9ff59a;
}
.end-choice span {
  font: 500 12px/1.35 DM, Arial, sans-serif;
  color: #b9c2b4;
}
.end-choice:hover {
  border-color: #d9ee91;
}
.story-end .end-icon {
  font-size: 44px;
  line-height: 1;
  margin: 6px 0 2px;
}
.end-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.end-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px;
  border-radius: 10px;
  background: #ffffff0b;
  border: 1px solid #d9ee9155;
  text-align: center;
}
.end-card i {
  font-size: 24px;
  font-style: normal;
}
.end-card b {
  font: 800 12px/1.2 DM, Arial, sans-serif;
}
.end-card span {
  font-size: 10px;
  color: #9aa69c;
}
.end-card.locked {
  border-color: #ffffff14;
  opacity: 0.6;
}
.end-choice b,
.end-choice span {
  text-transform: none;
}
/* ⏪ Rewind: on the dash (desktop: beside the limit sign · phones: in the dock) */
.road-panel .limit-panel {
  align-items: center;
  gap: 14px;
}
.rewind-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 10px 6px;
  border-radius: 12px;
  background: #0f1416;
  border: 1px solid #ffffff2a;
  color: #7d8a83;
  font: 800 8.5px/1 DM, Arial, sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.rewind-btn[hidden],
.m-rewind[hidden] {
  display: none;
}
.rewind-btn svg {
  width: 22px;
  height: 22px;
}
.rewind-btn small,
.m-rewind small {
  font: 800 8px/1 DM, Arial, sans-serif;
  color: #9ff59a;
}
.rewind-btn small:empty,
.m-rewind small:empty {
  display: none;
}
.rewind-btn.ready,
.m-rewind.ready {
  color: #9fd8ff;
  border-color: #5fb8ff77;
}
.rewind-btn.ready:hover {
  border-color: #9fd8ff;
}
.rewind-btn:active,
.m-rewind:active,
.rewinding .rewind-btn,
.rewinding .m-rewind {
  background: #12324a;
  color: #fff;
  border-color: #9fd8ff;
}
.m-rewind {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: #0f1416e6;
  border: 1px solid #ffffff2e;
  color: #7d8a83;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.m-rewind svg {
  width: 18px;
  height: 18px;
}
.m-rewind small {
  position: absolute;
  right: -3px;
  top: -4px;
  padding: 1px 3px;
  border-radius: 6px;
  background: #0f1416;
}
/* while it's rewinding: the world goes a little cold and grainy, a big ⏪ up top */
.rewinding #world {
  filter: saturate(0.35) brightness(0.92) contrast(1.05) hue-rotate(-12deg);
}
.rewind-hud {
  position: fixed;
  z-index: 30;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 22px 10px;
  border-radius: 16px;
  background: #07131dcc;
  border: 1px solid #9fd8ff66;
  color: #dff3ff;
  pointer-events: none;
}
.rewind-hud[hidden] {
  display: none;
}
.rewind-hud b {
  font-size: 34px;
  line-height: 1;
}
.rewind-hud span {
  font: italic 800 20px/1 Barlow, sans-serif;
  font-variant-numeric: tabular-nums;
}
.rewind-hud i {
  display: block;
  width: 120px;
  height: 3px;
  border-radius: 2px;
  background: #9fd8ff;
  transform-origin: left;
}
.rewind-choice small {
  margin-left: 6px;
  font-size: 0.75em;
  opacity: 0.75;
}
.crash-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
/* (the phone dock: cruise, honk and rewind side by side — kept compact so they fit) */
.m-mid {
  gap: 4px;
}
.m-mid .m-cruise {
  gap: 4px;
  padding: 7px 8px;
  letter-spacing: 0.3px;
}
.m-mid .m-cruise i {
  width: 6px;
  height: 6px;
}
.m-mid .m-horn,
.m-mid .m-rewind {
  width: 34px;
  height: 34px;
}

/* Police Chase, waiting for a chase: the prompt as a slim strip just above the dashboard
   (pursuit.js positions it from the dashboard's height) */
.pursuit-hud.idle {
  grid-template-columns: auto auto;
  grid-template-areas: "t g";
  min-width: 0;
  padding: 7px 14px;
  column-gap: 10px;
  max-width: calc(100% - 24px);
  transition: none;
}

/* Crash screen: share the headline (share-card.js), report a problem (bug-report.js) */
.crash-share {
  background: #f3eee2;
  color: #16130f;
  border-color: #f3eee2;
  font-weight: 800;
}
.crash-bug {
  display: block;
  margin: 10px auto 0;
  background: none;
  border: 0;
  color: #aab5b7;
  font: 600 12px DM, sans-serif;
  text-decoration: underline;
  cursor: pointer;
}
.share-card,
.bug-card {
  max-width: 520px;
}
.share-preview {
  display: block;
  width: 100%;
  max-height: 52vh;
  object-fit: contain;
  margin: 10px 0 12px;
  border-radius: 6px;
  box-shadow: 0 6px 22px #0008;
}
.share-actions,
.bug-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.share-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #ffffff33;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}
.share-actions .button.primary {
  background: #9ff725;
  color: #0b1a18;
  border-color: #9ff725;
}
.share-hint,
.bug-status {
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.8;
}
.bug-card textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ffffff33;
  background: #0b1418;
  color: #e9f3f6;
  font: 14px/1.4 DM, sans-serif;
  resize: vertical;
}
.bug-shot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 8px;
  align-items: center;
  margin: 4px 0 12px;
  font-size: 13px;
}
.bug-shot img {
  grid-column: 1 / -1;
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 8px;
  opacity: 0.9;
}
.bug-status a {
  color: #9ff725;
}

/* Town stamps (Driving Record) */
.stamp-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.stamp {
  padding: 4px 9px;
  border-radius: 999px;
  background: #ffffff12;
  border: 1px solid #ffffff22;
  font: 600 12px DM, sans-serif;
}
.stamp.s3 {
  border-color: #f2c94c88;
  background: #f2c94c1f;
}
.stamp-how {
  font-size: 12px;
  opacity: 0.75;
}

/* 716 Eats (deliveries.js) */
.delivery-hud {
  border-color: #ff9f1c88;
  background: linear-gradient(160deg, #2a1a08f2, #140c03f5);
}
.delivery-hud .mh-title {
  color: #ffc46b;
}
.delivery-hud .mh-bar[data-tone="warn"] i {
  background: #f2c94c;
}
.delivery-hud .mh-bar[data-tone="bad"] i {
  background: #e5484d;
}
.delivery-card h2 {
  margin-top: 4px;
}
/* 716 Rides (rideshare.js) */
.ride-hud {
  border-color: #c77dff88;
  background: linear-gradient(160deg, #1e0a2ef2, #0e0416f5);
}
.ride-hud .mh-title {
  color: #dcb0ff;
}
/* DPW plow runs (plow.js) */
.plow-hud {
  border-color: #7fd3ff88;
  background: linear-gradient(160deg, #0a1e2af2, #040e16f5);
}
.plow-hud .mh-title {
  color: #a8e2ff;
}
.plow-hud .mh-bar i {
  background: #7fd3ff;
}

/* ── Notice center (core.js notify / hud.js noticeTick): every game message, along the top of the
   dashboard — desktop instrument panel and the phone dock alike, in every mode ── */
#toast,
#toast.show,
#police-status,
#m-police,
#rail-wait,
#bottom-note {
  display: none !important;
}
.notice-center {
  position: fixed;
  z-index: 7;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 34px;
  padding: 6px 16px 7px;
  background: linear-gradient(#1d2125f5, #131619f5);
  border: 1px solid #ffffff1c;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -6px 18px #0000004d;
  color: #eef1f3;
  font: 600 13px/1.3 DM, sans-serif;
  text-align: center;
  pointer-events: none;
}
.notice-center[hidden] {
  display: none;
}
.notice-center.on-dock {
  border-radius: 12px 12px 0 0;
  border-left: 0;
  border-right: 0;
  padding: 6px 14px 6px;
}
.notice-center p {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.notice-center p[hidden] {
  display: none;
}
.notice-center .nc-msg.empty {
  color: #ffffff38;
  font: 700 9px/1.2 DM, sans-serif;
  letter-spacing: 2.4px;
}
.notice-center .nc-alert {
  font: 700 11px/1.25 DM, sans-serif;
  letter-spacing: 0.8px;
  color: #cfd6dc;
}
.notice-center .nc-alert.warn {
  color: #ffb27c;
}
.notice-center .nc-alert.soft {
  color: #ffc9a3;
}
.notice-center .nc-alert.info {
  color: #a8e2ff;
}
.notice-center .nc-alert.pullover {
  color: #fff;
  background: #b8322a;
  border-radius: 5px;
  padding: 3px 9px;
  animation: nc-pulse 1s ease-in-out infinite alternate;
}
.notice-center.new {
  animation: nc-new 0.7s ease-out;
}
@keyframes nc-new {
  from {
    border-color: #d8f474aa;
    box-shadow: 0 -6px 22px #d8f47433;
  }
}
@keyframes nc-pulse {
  to {
    background: #e0443a;
  }
}
.touch-mode .notice-center {
  font-size: 12.5px;
}

/* phones: the town-progress pill wraps inside the street sign's column instead of running under
   the cash tag and Pause */
.touch-mode .m-explore {
  white-space: normal;
  max-width: 100%;
  text-align: center;
  font-size: 9px;
  line-height: 1.25;
}

/* ── Live Drive (live-drive.js): the game as a GPS ── */
body.live-drive #touch-controls,
body.live-drive .m-rewind,
body.live-drive #rewind,
body.live-drive .m-cruise,
body.live-drive #trial-offer {
  display: none !important;
}
.live-hud {
  border-color: #ffc23d66;
}
.live-hud .trip-turn {
  background: #ffc23d;
  color: #04121f;
  font-size: 22px;
}
.live-hud .live-where {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-left: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #ffc23d66;
  background: #1f1906;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.live-hud .live-where small {
  font: 700 8px/1 DM, sans-serif;
  letter-spacing: 1.2px;
  color: #ffd57a;
}
.ld-form {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}
.ld-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ffffff33;
  background: #0b1114;
  color: #fff;
  font: 500 15px DM, sans-serif;
}
.ld-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 45vh;
  overflow: auto;
}
.ld-pick {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  text-align: left;
  padding: 9px 12px;
}
.ld-pick small {
  opacity: 0.7;
  white-space: nowrap;
}
.ld-voice {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0 4px;
  font-size: 13px;
}

/* ── Paint rail (title.js paintRail): swipe the car up/down for paint; the next colours fade out
   above and below the one you've got on. The old swatch strip under the car is retired. ── */
.title-garage .paint-picker,
.title-garage .title-label:has(#paint-name),
.title-label:has(> #paint-name) {
  display: none !important;
}
.car-picker .turntable {
  touch-action: none; /* (swipes go to the car: left/right cars, up/down paint) */
}
.car-name .car-paint {
  font: 800 11px/1 DM, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000a;
}
.paint-rail {
  position: absolute;
  left: calc(100% + 8px); /* (just outside the turntable — clear of the car and the › arrow) */
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
}
.paint-rail .pr-dot {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #0b0f12;
  background: radial-gradient(circle at 35% 30%, #ffffff66, transparent 45%), var(--sw);
  box-shadow: 0 1px 4px #0008;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}
.paint-rail .pr-on0 {
  width: 34px;
  height: 34px;
  border: 3px solid #f4f7ef;
  box-shadow: 0 0 0 2px #0b0f12, 0 0 14px var(--sw);
  cursor: default;
}
.paint-rail .pr-u1,
.paint-rail .pr-d1 {
  opacity: 0.55;
  transform: scale(0.85);
}
.paint-rail .pr-u2,
.paint-rail .pr-d2 {
  opacity: 0.22;
  transform: scale(0.65);
}
.paint-rail .pr-hint {
  font-style: normal;
  font-size: 9px;
  line-height: 1;
  color: #ffffff55;
}
.paint-rail.up {
  animation: pr-up 0.25s ease-out;
}
.paint-rail.down {
  animation: pr-down 0.25s ease-out;
}
@keyframes pr-up {
  from {
    transform: translateY(calc(-50% + 14px));
  }
}
@keyframes pr-down {
  from {
    transform: translateY(calc(-50% - 14px));
  }
}
.touch-mode .paint-rail {
  left: calc(100% + 6px);
}

/* ── The map (full-map.js): pause menu · M ── */
.fullmap {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #0b1317;
  --fm-accent: #75baff;
  touch-action: none;
  user-select: none;
}
.fullmap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
}
.fullmap canvas:active {
  cursor: grabbing;
}
.fm-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px 16px;
  background: linear-gradient(#0a1216f2, #0a1216c4 70%, #0a121600);
  pointer-events: none;
}
.fm-top > * {
  pointer-events: auto;
}
.fm-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.fm-eyebrow {
  color: var(--fm-accent);
  font: 800 10px/1.2 DM, sans-serif;
  letter-spacing: 1.8px;
}
.fm-head b {
  color: #fff;
  font: 800 19px/1.15 Barlow, DM, Arial, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fm-search {
  flex: 0 1 280px;
  min-width: 0;
}
.fm-search input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid #ffffff2a;
  background: #0d171cdd;
  color: #fff;
  font: 500 14px DM, sans-serif;
}
.fm-search input:focus {
  outline: none;
  border-color: var(--fm-accent);
}
.fm-close {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #ffffff33;
  background: #10191ee6;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
}
.fm-results {
  position: absolute;
  top: calc(max(10px, env(safe-area-inset-top)) + 52px);
  right: 64px;
  width: min(340px, calc(100% - 28px));
  max-height: 50vh;
  overflow: auto;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid #ffffff22;
  background: #0d171cf5;
  box-shadow: 0 14px 30px #0008;
}
.fm-results button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.fm-results button:hover,
.fm-results button:focus-visible {
  background: #ffffff12;
}
.fm-results small,
.fm-note {
  color: #9fb0b3;
  font-size: 12px;
}
.fm-note {
  margin: 8px 10px;
}
.fm-legend {
  position: absolute;
  top: calc(max(10px, env(safe-area-inset-top)) + 54px);
  left: 14px;
  right: 70px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}
.fm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid #ffffff1f;
  background: #0b1418d9;
  color: #e6eeec;
  font: 700 11px/1.2 DM, sans-serif;
}
.fm-chip i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #071014;
  box-shadow: 0 0 0 1px #ffffff40;
}
.fm-chip.fm-hint {
  color: #aebdc0;
  font-weight: 600;
}
button.fm-chip {
  pointer-events: auto;
  cursor: pointer;
  border-color: #ffc23d66;
  background: #1f1906e6;
}
.fm-zoom {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fm-zoom button {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #ffffff2e;
  background: #10191ee6;
  color: #fff;
  font: 700 22px/1 DM, sans-serif;
  cursor: pointer;
}
.fm-zoom #fm-me {
  color: var(--fm-accent);
}
.fm-card {
  position: absolute;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(460px, calc(100% - 28px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  border-radius: 14px;
  border: 1px solid #ffffff26;
  border-left: 3px solid var(--fm-accent);
  background: #0d171cf5;
  box-shadow: 0 16px 34px #0009;
}
.fm-card-tx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fm-card-tx b {
  color: #fff;
  font: 800 17px/1.2 Barlow, DM, sans-serif;
}
.fm-card-tx small {
  color: #a9b9bc;
  font-size: 12px;
  line-height: 1.35;
}
.fm-card > button:not(.fm-card-x) {
  flex: none;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #ffffff2e;
  background: #182227;
  color: #fff;
  font: 800 13px DM, sans-serif;
  cursor: pointer;
}
.fm-card > button.primary {
  border-color: #ffc23d;
  background: #ffc23d;
  color: #1d1405;
}
.fm-card .fm-why {
  flex: 0 1 170px;
  margin: 0;
  color: #c9b98f;
  font-size: 11.5px;
  line-height: 1.35;
}
.fm-card-x {
  flex: none;
  align-self: flex-start;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #9fb0b3;
  cursor: pointer;
}
@media (max-width: 600px) {
  .fm-top {
    flex-wrap: wrap;
  }
  .fm-head {
    flex: 1 1 calc(100% - 60px);
  }
  .fm-search {
    order: 3;
    flex: 1 1 100%;
  }
  .fm-legend,
  .fm-results {
    top: calc(max(10px, env(safe-area-inset-top)) + 104px);
  }
  .fm-results {
    right: 14px;
  }
  .fm-card {
    flex-wrap: wrap;
  }
  .fm-card .fm-card-tx {
    flex: 1 1 calc(100% - 44px);
  }
  .fm-card > button.primary,
  .fm-card > button:not(.fm-card-x) {
    flex: 1 1 100%;
    order: 3;
  }
  .fm-card .fm-why {
    flex: 1 1 100%;
    order: 3;
  }
}
/* (on the drive: the waypoint's card, under any other card up top — hud.js stackTop) */
.wp-hud {
  border-color: #ffc23d66;
}
.wp-hud .trip-turn {
  background: #ffc23d;
  color: #1d1405;
}
.wp-hud .wp-clear {
  pointer-events: auto;
  flex: none;
  width: 30px;
  height: 30px;
  margin-left: 2px;
  border-radius: 50%;
  border: 1px solid #ffffff2e;
  background: #ffffff10;
  color: #e9e3cf;
  cursor: pointer;
}
body.crashed #wp-hud,
.on-title #wp-hud,
.dropping #wp-hud {
  display: none !important;
}
/* the pause menu's live map (full-map.js miniMapHTML): tap it for the whole map */
.pm-map {
  position: relative;
  display: block;
  width: 100%;
  height: 168px;
  margin: 12px 0 2px;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #ffffff26;
  background: #0b1317;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.pm-map:hover,
.pm-map:focus-visible {
  border-color: #d8f474aa;
}
.pm-map:active {
  transform: scale(0.99);
}
.pm-map canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pm-map-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 5px 9px;
  border-radius: 8px;
  background: #0a1216d9;
  text-align: left;
}
.pm-map-tag b {
  font: 800 11px/1.2 DM, sans-serif;
  letter-spacing: 1.4px;
  color: #fff;
}
.pm-map-tag small {
  font: 600 10px/1.2 DM, sans-serif;
  color: #b9c6c8;
}
.pm-map-open {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 5px 9px;
  border-radius: 8px;
  background: #d8f474;
  color: #10170a;
  font: 800 10px/1.2 DM, sans-serif;
  letter-spacing: 1.2px;
}
@media (max-width: 600px) {
  .pm-map {
    height: 140px;
  }
}
/* (the live map made the pause card taller: a one-line heading and snugger tiles keep it on screen) */
#modal.pause-modal .pause-card h2 {
  font-size: clamp(26px, 7vw, 38px);
  line-height: 1.05;
  margin: 6px 0 4px;
}
#modal.pause-modal .pause-card > p {
  margin: 4px 0 10px;
}
#modal.pause-modal .pause-grid {
  margin-top: 12px;
  gap: 8px;
}
#modal.pause-modal .pm-tile {
  min-height: 52px;
  padding: 8px 12px;
}
/* the dashboard compass (hud.js compassTick): a bezel round the speedometer's hub on a desktop… */
.dial-compass .dc-ring {
  fill: #0a0e10;
  stroke: #ffffff2e;
  stroke-width: 1.2;
}
.dial-compass .dc-tick {
  stroke: #ffffff59;
  stroke-width: 1.2;
}
.dial-compass .dc-n,
.m-compass .dc-n {
  fill: #ff4d3d;
}
.dial-compass .dc-letter {
  fill: #fff;
  font: 800 10px DM, Arial, sans-serif;
  text-anchor: middle;
}
/* …and a little needle next to the MPH on a phone */
.m-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  align-self: flex-end; /* (beside the digits, so the dock keeps its height) */
  padding-bottom: 2px;
  font-style: normal;
}
.m-compass {
  display: block;
  width: 22px;
  height: 22px;
}
.m-compass svg {
  display: block;
  width: 100%;
  height: 100%;
}
.m-compass > svg > circle {
  fill: #0a0e10;
  stroke: #ffffff40;
  stroke-width: 1.2;
}
.m-compass .dc-s {
  fill: #dfe6e4;
}
.m-compass .dc-pin {
  fill: #0a0e10;
}
/* The notice strip, as a tab rising out of the dashboard's top edge (hud.js noticeTick): centred,
   as wide as what it says, the dashboard's own colours and edge, with the corners flaring into the
   dash — and gone entirely when there's nothing to say. */
.notice-center,
.notice-center.on-dock {
  --nc-bg: #1f2225;
  transform: translateX(-50%);
  width: max-content;
  min-width: 220px;
  padding: 7px 22px 8px;
  background: var(--nc-bg);
  border: 1px solid #7e85865c;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 18px #0000003d;
}
.notice-center.on-dock {
  --nc-bg: #0d1012;
  min-width: 180px;
  padding: 6px 16px 7px;
  border-color: #ffffff1f;
  border-radius: 12px 12px 0 0;
}
.notice-center::before,
.notice-center::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 12px;
  pointer-events: none;
}
.notice-center::before {
  left: -12px;
  background: radial-gradient(circle at 0 0, transparent 11.5px, var(--nc-bg) 12px);
}
.notice-center::after {
  right: -12px;
  background: radial-gradient(circle at 100% 0, transparent 11.5px, var(--nc-bg) 12px);
}
/* The radio buttons (phone dock, compact desktop) match the new head unit (radio.html): dark glass,
   the frequency in white, a little equaliser in the station's colour that dances while it plays */
.m-radio,
.compact .radio-pill {
  --acc: #5fd4ff;
  background: linear-gradient(#151b20, #080b0e);
  border: 1px solid #ffffff22;
  box-shadow: inset 0 1px 0 #ffffff14, 0 2px 6px #0008;
  color: #fff;
  text-shadow: none;
  font-family: Barlow, sans-serif;
}
.m-radio b,
.compact .radio-pill b {
  font: 800 16px/1 Barlow, sans-serif;
  letter-spacing: -0.2px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.compact .radio-pill b {
  font-size: 14px;
}
.m-radio span,
.compact .radio-pill span {
  font: 700 7px/1 DM, sans-serif;
  letter-spacing: 1px;
  color: #8b98a0;
}
.m-radio.on span,
.compact .radio-pill.on span {
  color: var(--acc);
}
.m-radio i,
.compact .radio-pill i {
  width: 14px;
  height: 9px;
  border-radius: 0;
  opacity: 0.45;
  background:
    linear-gradient(var(--acc), var(--acc)) 0 100% / 3px 40% no-repeat,
    linear-gradient(var(--acc), var(--acc)) 5.5px 100% / 3px 70% no-repeat,
    linear-gradient(var(--acc), var(--acc)) 11px 100% / 3px 50% no-repeat;
}
.m-radio.on i,
.compact .radio-pill.on i {
  opacity: 1;
  animation: radio-eq 0.9s ease-in-out infinite alternate;
}
@keyframes radio-eq {
  to {
    background-size: 3px 100%, 3px 35%, 3px 85%;
  }
}
.radio-expanded .m-radio,
.compact.radio-expanded .radio-pill {
  border-color: var(--acc);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 35%, transparent);
}
/* the head unit's own glass and rounded corners are the frame now */
#dashboard-radio {
  border-radius: 14px;
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .m-radio.on i,
  .compact .radio-pill.on i {
    animation: none;
  }
}
/* the dash radio buttons' frequency: pearly, like the logo and the head unit */
.m-radio b,
.compact .radio-pill b {
  background: linear-gradient(100deg, #e4dcff, #ffffff 30%, #cdeeff 55%, #e4fbef 75%, #ffe2d8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.m-radio,
.compact .radio-pill {
  border: 1px solid transparent;
  background:
    linear-gradient(#151b20, #080b0e) padding-box,
    linear-gradient(135deg, #b8a4ff73, #ffffff33 25%, #a9dcff66 50%, #c3f5e259 70%, #ffbcd873) border-box;
}
/* ── The logo in motion (index.html builds the layers): a pearl drift that never stops, and a soft
   glint every 7 seconds — both cut to the logo's shape, moved by transform only (compositor: as
   smooth as the screen refreshes) ── */
.logo.logo-live {
  position: relative;
  isolation: isolate;
}
.logo-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: var(--logo-mask) center / 100% 100% no-repeat;
  mask: var(--logo-mask) center / 100% 100% no-repeat;
}
.logo-fx i {
  position: absolute;
  top: -20%;
  bottom: -20%;
  will-change: transform;
  backface-visibility: hidden;
}
/* the drift: soft pastel light, slowly sliding through the letters (a seamless loop) */
.logo-flow {
  mix-blend-mode: soft-light;
  opacity: 0.6;
}
.logo-flow i {
  left: 0;
  width: 300%;
  background: repeating-linear-gradient(
    90deg,
    #b8a4ff 0%,
    #ffffff 6%,
    #a9dcff 12%,
    #c3f5e2 18%,
    #f2f6c2 23%,
    #ffbcd8 28%,
    #b8a4ff 33.3333%
  );
  transform: translate3d(0, 0, 0) skewX(-18deg);
  animation: logo-flow 11s linear infinite;
}
@keyframes logo-flow {
  to {
    transform: translate3d(-33.3333%, 0, 0) skewX(-18deg);
  }
}
/* the glint: a soft band of light that crosses now and then */
.logo-glint {
  mix-blend-mode: screen;
}
.logo-glint i {
  left: 0;
  width: 26%;
  background: linear-gradient(90deg, transparent, #ffffff1f 30%, #fffffff2 50%, #ffffff1f 70%, transparent);
  transform: translate3d(-130%, 0, 0) skewX(-22deg);
  animation: logo-glint 7s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
  animation-delay: 1.2s;
  opacity: 0.75;
}
@keyframes logo-glint {
  0% {
    transform: translate3d(-130%, 0, 0) skewX(-22deg);
  }
  28%,
  100% {
    transform: translate3d(520%, 0, 0) skewX(-22deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo-fx i {
    animation: none;
  }
  .logo-glint {
    display: none;
  }
}