@font-face {
  font-family: "Silkscreen";
  src: url("assets/fonts/silkscreen-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Silkscreen";
  src: url("assets/fonts/silkscreen-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pixelify Sans";
  src: url("assets/fonts/pixelify-sans.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --night: #050c16;
  --navy: #081524;
  --panel: rgba(5, 14, 25, 0.78);
  --panel-soft: rgba(8, 21, 35, 0.64);
  --line: rgba(100, 145, 184, 0.34);
  --line-hot: rgba(158, 206, 242, 0.68);
  --text: #e7f2fd;
  --muted: #829db8;
  --muted-dark: #5d7894;
  --ice: #99ddff;
  --ice-hot: #d5f2ff;
  --amber: #ffd08a;
  --danger: #ff8b91;
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  --safe-left: max(16px, env(safe-area-inset-left));
  --safe-right: max(16px, env(safe-area-inset-right));
  --steer-size: 72px;
  --gas-w: 92px;
  --gas-h: 98px;
  --brake-w: 76px;
  --brake-h: 80px;
  --pixel-cut: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--night);
}

body {
  color: var(--text);
  font-family: "Silkscreen", "Courier New", monospace;
  font-weight: 400;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  touch-action: none;
  position: fixed;
  inset: 0;
}

button {
  font: inherit;
}

.game {
  position: fixed;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  background: #06101d;
}

.scene-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  touch-action: none;
  background: #081422;
  z-index: 0;
}

.top-scrim,
.bottom-scrim,
.vignette,
.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.top-scrim {
  z-index: 2;
  height: 180px;
  bottom: auto;
  background: linear-gradient(180deg, rgba(2, 8, 16, 0.84) 0%, rgba(3, 10, 19, 0.46) 38%, rgba(3, 10, 19, 0) 100%);
}

.bottom-scrim {
  z-index: 2;
  top: auto;
  height: 230px;
  background: linear-gradient(0deg, rgba(2, 7, 14, 0.84) 0%, rgba(3, 10, 18, 0.4) 44%, rgba(3, 10, 18, 0) 100%);
}

.vignette {
  z-index: 3;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(1, 7, 14, 0) 44%, rgba(1, 6, 12, 0.2) 72%, rgba(1, 5, 10, 0.62) 100%),
    linear-gradient(90deg, rgba(4, 12, 21, 0.3) 0%, rgba(4, 12, 21, 0) 14%, rgba(4, 12, 21, 0) 86%, rgba(4, 12, 21, 0.3) 100%);
}

.scanlines {
  z-index: 3;
  opacity: 0.042;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(200, 230, 255, 0.55) 0,
    rgba(200, 230, 255, 0.55) 1px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 3px
  );
}

/* ---------- top HUD ---------- */

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding:
    max(18px, calc(env(safe-area-inset-top) + 12px))
    calc(var(--safe-right) + 2px)
    0
    calc(var(--safe-left) + 2px);
  pointer-events: none;
}

.brand {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  filter: drop-shadow(0 2px 8px rgba(0, 4, 10, 0.65));
  animation: hud-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s both;
}

.brand-flake {
  width: 31px;
  height: 31px;
  margin-top: 1px;
  color: #dbeeff;
  filter: drop-shadow(0 0 10px rgba(122, 200, 255, 0.42));
  flex: none;
}

.brand-copy {
  min-width: 0;
}

.brand h1 {
  margin: 0;
  color: #f1f8ff;
  font-family: "Silkscreen", monospace;
  font-weight: 700;
  font-size: clamp(21px, 2.2vw, 31px);
  line-height: 0.92;
  letter-spacing: 0.8px;
  text-shadow:
    0 3px 0 #020810,
    0 0 24px rgba(112, 190, 255, 0.16);
}

.brand p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 0;
  color: #a6c1d9;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.7px;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(1, 5, 10, 0.8);
}

.signal-dot {
  width: 5px;
  height: 5px;
  background: var(--ice);
  box-shadow: 0 0 8px var(--ice);
  animation: signal 2.8s steps(2, end) infinite;
}

.slash {
  color: #44627d;
}

.weather {
  color: #7896b2;
}

.northmark {
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #9bb6cf;
  opacity: 0.78;
  animation: hud-in 0.9s ease 0.55s both;
}

.northmark span {
  font-size: 10px;
  font-weight: 700;
  color: #d8ebfb;
  text-shadow: 0 0 12px rgba(129, 206, 255, 0.55);
}

.northmark i {
  display: block;
  width: 1px;
  height: 22px;
  background: linear-gradient(180deg, rgba(175, 217, 249, 0.7), rgba(96, 138, 173, 0));
}

.northmark small {
  font-size: 6px;
  letter-spacing: 2px;
  color: #6f8ba5;
}

.map-card {
  width: 180px;
  background:
    linear-gradient(145deg, rgba(17, 36, 56, 0.94), rgba(4, 12, 22, 0.93));
  border: 1px solid rgba(118, 159, 196, 0.36);
  box-shadow:
    0 14px 34px rgba(0, 4, 10, 0.42),
    inset 0 1px 0 rgba(211, 238, 255, 0.08);
  padding: 7px;
  pointer-events: none;
  animation: hud-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s both;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}

.map-head,
.map-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #7794af;
  font-size: 6px;
  letter-spacing: 0.8px;
  line-height: 1;
}

.map-head {
  padding: 1px 2px 7px;
  color: #b6cde1;
}

.map-north {
  color: var(--ice);
  text-shadow: 0 0 8px rgba(119, 210, 255, 0.5);
}

.map-screen {
  position: relative;
  background: #06111d;
  border-top: 1px solid rgba(96, 135, 168, 0.3);
  border-bottom: 1px solid rgba(96, 135, 168, 0.25);
  overflow: hidden;
}

#minimap {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.map-corner {
  position: absolute;
  width: 7px;
  height: 7px;
  border-color: rgba(158, 207, 243, 0.5);
  border-style: solid;
  pointer-events: none;
}

.map-corner.tl { left: 3px; top: 3px; border-width: 1px 0 0 1px; }
.map-corner.tr { right: 3px; top: 3px; border-width: 1px 1px 0 0; }
.map-corner.bl { left: 3px; bottom: 3px; border-width: 0 0 1px 1px; }
.map-corner.br { right: 3px; bottom: 3px; border-width: 0 1px 1px 0; }

.map-foot {
  padding: 7px 2px 1px;
  color: #5e7b96;
}

#clock {
  color: #9db8ce;
}

/* ---------- curbside rides ---------- */

.journey-card {
  --ride-color: #8fe5ff;
  --ride-glow: rgba(143, 229, 255, 0.22);
  position: absolute;
  left: calc(var(--safe-left) + 2px);
  top: 74px;
  z-index: 11;
  width: 252px;
  display: flex;
  align-items: stretch;
  gap: 9px;
  padding: 8px 9px;
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(14, 32, 51, 0.94), rgba(4, 12, 22, 0.92));
  border: 1px solid rgba(107, 151, 189, 0.36);
  border-top-color: var(--ride-color);
  box-shadow:
    0 12px 30px rgba(0, 4, 10, 0.36),
    inset 0 1px 0 rgba(216, 240, 255, 0.07),
    0 0 22px var(--ride-glow);
  clip-path: var(--pixel-cut);
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 4, 10, 0.4));
  animation: hud-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s both;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.journey-card.is-delivering .journey-body {
  animation: ride-delivered 0.65s ease both;
}

.journey-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--ride-color), rgba(255, 255, 255, 0));
  opacity: 0.62;
}

.journey-mark {
  width: 34px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(128, 172, 207, 0.32);
  background:
    linear-gradient(180deg, rgba(20, 45, 68, 0.8), rgba(4, 13, 24, 0.9));
  box-shadow: inset 0 0 12px rgba(120, 205, 255, 0.05);
}

.journey-mark canvas {
  display: block;
  width: 24px;
  height: 37px;
  image-rendering: pixelated;
}

.journey-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.journey-kicker {
  color: #7e9bb5;
  font-size: 6.5px;
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.journey-title {
  display: block;
  margin-top: 3px;
  color: #edf8ff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.25px;
  text-shadow: 0 2px 0 rgba(1, 5, 10, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.journey-destination {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-top: 4px;
  color: #aecddf;
  font-size: 6.5px;
  line-height: 1.1;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.journey-destination > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.journey-pin {
  width: 5px;
  height: 5px;
  flex: none;
  margin-left: 2px;
  transform: rotate(45deg);
  background: var(--ice);
  box-shadow: 0 0 8px rgba(143, 229, 255, 0.55);
}

.journey-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  color: #6886a0;
  font-size: 6px;
  line-height: 1;
  letter-spacing: 0.5px;
}

.journey-pips {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: none;
}

.journey-pip {
  width: 5px;
  height: 5px;
  border: 1px solid rgba(138, 177, 207, 0.38);
  background: rgba(7, 18, 30, 0.7);
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.journey-pip.is-done {
  background: var(--pip-color);
  border-color: var(--pip-color);
  box-shadow: 0 0 6px var(--pip-color);
}

.journey-pip.is-active {
  border-color: #f3fbff;
}

/* ---------- cinematic destination memories ---------- */

.romance-layer {
  --memory-accent: #8fe5ff;
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #030a12;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.9s ease,
    visibility 0s linear 0.9s;
  contain: layout style paint;
}

.romance-layer.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.9s ease,
    visibility 0s;
}

.romance-scene-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #030a12;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 0.75s ease;
}

.romance-layer.is-scene .romance-scene-canvas {
  opacity: 1;
}

.romance-scene-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.75s ease;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(2, 8, 14, 0.32) 0%, rgba(2, 8, 14, 0.12) 38%, rgba(2, 8, 14, 0) 68%),
    linear-gradient(180deg, rgba(1, 5, 10, 0.7) 0%, rgba(1, 5, 10, 0) 18%, rgba(1, 5, 10, 0) 78%, rgba(1, 5, 10, 0.8) 100%);
}

.romance-layer.is-scene .romance-scene-shade {
  opacity: 1;
}

.romance-scene-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(202, 234, 255, 0.028) 0,
    rgba(202, 234, 255, 0.028) 1px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 3px
  );
  mix-blend-mode: soft-light;
}

.romance-caption {
  position: absolute;
  top: max(22px, calc(env(safe-area-inset-top) + 16px));
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(86vw, 540px);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.65s ease 0.1s;
}

.romance-layer.is-scene .romance-caption {
  opacity: 1;
}

.romance-caption-kicker {
  color: #7fa6bf;
  font-family: "Silkscreen", "Courier New", monospace;
  font-size: 6px;
  line-height: 1;
  letter-spacing: 2.4px;
  text-shadow: 0 1px 0 rgba(0, 4, 8, 0.8);
}

.romance-caption-memory {
  color: #e9faff;
  font-family: "Pixelify Sans", "Silkscreen", "Courier New", monospace;
  font-size: clamp(10px, 1.4vw, 14px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.8px;
  text-shadow:
    0 0 9px rgba(143, 229, 255, 0.82),
    0 0 24px rgba(66, 163, 255, 0.42),
    0 1px 0 rgba(0, 4, 8, 0.9);
}

.romance-caption-place {
  color: #9cbfd2;
  font-family: "Silkscreen", "Courier New", monospace;
  font-size: clamp(6px, 0.85vw, 8px);
  line-height: 1.2;
  letter-spacing: 1.8px;
  text-shadow:
    0 0 7px rgba(143, 229, 255, 0.5),
    0 1px 0 rgba(0, 4, 8, 0.9);
}

.romance-scene-index {
  position: absolute;
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
  left: 50%;
  z-index: 3;
  color: #7293ab;
  font-family: "Silkscreen", "Courier New", monospace;
  font-size: 6px;
  line-height: 1;
  letter-spacing: 1.9px;
  text-shadow: 0 1px 0 rgba(0, 4, 8, 0.85);
  opacity: 0;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 0.65s ease 0.1s;
}

.romance-layer.is-scene .romance-scene-index {
  opacity: 0.78;
}

.romance-message-wrap {
  position: relative;
  z-index: 4;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(2, 8, 14, 0.35) 0%, rgba(2, 8, 14, 0.16) 32%, rgba(2, 8, 14, 0) 64%);
}

.romance-text {
  position: relative;
  margin: 0;
  max-width: min(820px, 88vw);
  padding: 0 clamp(2px, 1vw, 14px);
  color: #c9efff;
  font-family: "Pixelify Sans", "Silkscreen", "Courier New", monospace;
  font-size: clamp(17px, 4.8vw, 30px);
  font-weight: 600;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: 0.35px;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.94),
    0 0 8px rgba(142, 224, 255, 0.94),
    0 0 20px rgba(66, 163, 255, 0.8),
    0 0 42px rgba(30, 104, 226, 0.54);
  transition: opacity 0.45s ease;
}

.romance-layer.is-message .romance-text {
  opacity: 1;
}

@media (max-height: 560px) and (orientation: landscape) {
  .romance-caption {
    top: max(12px, calc(env(safe-area-inset-top) + 8px));
    gap: 4px;
  }

  .romance-scene-index {
    bottom: max(10px, calc(env(safe-area-inset-bottom) + 6px));
  }

  .romance-text {
    max-width: min(760px, 82vw);
    font-size: clamp(16px, 2.4vw, 23px);
    line-height: 1.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .romance-layer,
  .romance-scene-canvas,
  .romance-scene-shade,
  .romance-caption,
  .romance-scene-index,
  .romance-text {
    transition-duration: 0.01s;
    transition-delay: 0s;
  }
}

/* ---------- final sunset ending ---------- */

.sunset-layer {
  position: absolute;
  inset: 0;
  z-index: 32;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 2.8s ease,
    visibility 0s linear 2.8s;
  contain: layout style paint;
}

.sunset-layer.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 2.8s ease,
    visibility 0s;
}

.sunset-scene-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #07131f;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.sunset-scene-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(3, 10, 17, 0.26) 0%, rgba(3, 10, 17, 0.08) 36%, rgba(3, 10, 17, 0) 64%),
    linear-gradient(180deg, rgba(3, 10, 17, 0.34) 0%, rgba(3, 10, 17, 0) 20%, rgba(3, 10, 17, 0) 72%, rgba(3, 10, 17, 0.68) 100%);
}

.sunset-scene-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(202, 234, 255, 0.026) 0,
    rgba(202, 234, 255, 0.026) 1px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 3px
  );
  mix-blend-mode: soft-light;
}

.sunset-message-wrap {
  position: relative;
  z-index: 3;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(3, 10, 17, 0.42) 0%, rgba(3, 10, 17, 0.18) 34%, rgba(3, 10, 17, 0) 66%);
}

.sunset-text {
  position: relative;
  margin: 0;
  max-width: min(820px, 88vw);
  padding: 0 clamp(2px, 1vw, 14px);
  color: #c9efff;
  font-family: "Pixelify Sans", "Silkscreen", "Courier New", monospace;
  font-size: clamp(17px, 4.8vw, 30px);
  font-weight: 600;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: 0.35px;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.94),
    0 0 8px rgba(142, 224, 255, 0.94),
    0 0 20px rgba(66, 163, 255, 0.8),
    0 0 42px rgba(30, 104, 226, 0.54);
  transition: opacity 0.45s ease;
}

.sunset-layer.is-message .sunset-text {
  opacity: 1;
}

.game.is-finale .topbar,
.game.is-finale .journey-card,
.game.is-finale .ride-prompt,
.game.is-finale .drive-hint,
.game.is-finale .speed-cluster,
.game.is-finale .touch-ui {
  animation: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.8s ease !important;
}

@media (max-height: 560px) and (orientation: landscape) {
  .sunset-text {
    max-width: min(760px, 82vw);
    font-size: clamp(16px, 2.4vw, 23px);
    line-height: 1.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sunset-layer,
  .sunset-text,
  .sunset-scene-shade {
    transition-duration: 0.01s;
    transition-delay: 0s;
  }

  .game.is-finale .topbar,
  .game.is-finale .journey-card,
  .game.is-finale .ride-prompt,
  .game.is-finale .drive-hint,
  .game.is-finale .speed-cluster,
  .game.is-finale .touch-ui {
    transition-duration: 0.01s !important;
  }
}

.ride-prompt {
  --ride-color: #8fe5ff;
  --ride-glow: rgba(143, 229, 255, 0.3);
  position: absolute;
  left: 50%;
  bottom: clamp(132px, 18vh, 176px);
  z-index: 19;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: min(430px, calc(100vw - var(--safe-left) - var(--safe-right) - 12px));
  padding: 9px 10px;
  color: var(--text);
  background:
    linear-gradient(150deg, rgba(15, 35, 55, 0.96), rgba(4, 12, 22, 0.95));
  border: 1px solid rgba(115, 164, 202, 0.46);
  border-top-color: var(--ride-color);
  box-shadow:
    0 18px 42px rgba(0, 3, 8, 0.5),
    inset 0 1px 0 rgba(226, 246, 255, 0.1),
    0 0 28px var(--ride-glow);
  clip-path: var(--pixel-cut);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.ride-prompt.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  animation: ride-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ride-mark {
  width: 38px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(135, 180, 213, 0.34);
  background: rgba(5, 15, 26, 0.85);
  box-shadow: inset 0 0 12px var(--ride-glow);
}

.ride-mark canvas {
  display: block;
  width: 25px;
  height: 39px;
  image-rendering: pixelated;
}

.ride-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ride-kicker {
  color: #82a3bd;
  font-size: 5.5px;
  letter-spacing: 1.1px;
  line-height: 1;
}

.ride-name {
  color: #f3fbff;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.6px;
  text-shadow: 0 2px 0 rgba(1, 5, 10, 0.7);
}

.ride-sub {
  color: #91adc4;
  font-size: 5.5px;
  line-height: 1.2;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ride-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 76px;
  min-height: 42px;
  padding: 6px 10px;
  color: #def5ff;
  font-family: "Silkscreen", monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 1;
  background:
    linear-gradient(180deg, rgba(42, 91, 125, 0.98), rgba(10, 36, 57, 0.98));
  border: 1px solid rgba(140, 205, 245, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(230, 248, 255, 0.16),
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    0 0 14px var(--ride-glow);
  clip-path: var(--pixel-cut);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}

.ride-action small {
  color: #83a5bf;
  font-size: 4.5px;
  letter-spacing: 0.5px;
}

.ride-action:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, rgba(28, 70, 98, 0.98), rgba(7, 27, 45, 0.98));
}

.ride-action:focus-visible {
  outline: 2px solid var(--ride-color);
  outline-offset: 2px;
}

/* ---------- middle HUD ---------- */

.drive-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(128px, 17vh, 172px);
  z-index: 12;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px 7px;
  color: #b7cfe4;
  background: rgba(4, 13, 24, 0.62);
  border: 1px solid rgba(105, 151, 190, 0.26);
  font-size: 7px;
  letter-spacing: 0.7px;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 2px 0 rgba(0, 4, 9, 0.7);
  transition: opacity 0.6s ease, transform 0.6s ease;
  animation: hud-in 0.8s ease 0.9s both;
}

.drive-hint.is-hidden {
  opacity: 0;
  transform: translate(-50%, 6px);
  animation: none;
}

.hint-arrow {
  color: var(--ice);
  font-size: 9px;
  text-shadow: 0 0 9px rgba(122, 211, 255, 0.6);
}

.hint-dot {
  width: 3px;
  height: 3px;
  margin: 0 1px;
  background: #55728c;
}

.hint-muted {
  color: #647f99;
}

.speed-cluster {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 1px);
  z-index: 14;
  transform: translateX(-50%);
  width: 118px;
  min-height: 54px;
  padding: 7px 9px 8px;
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-rows: 26px 3px;
  align-items: center;
  column-gap: 8px;
  row-gap: 6px;
  color: var(--text);
  background:
    linear-gradient(160deg, rgba(17, 37, 57, 0.92), rgba(4, 12, 22, 0.94));
  border: 1px solid rgba(109, 151, 188, 0.33);
  box-shadow:
    0 9px 24px rgba(0, 4, 10, 0.42),
    inset 0 1px 0 rgba(221, 242, 255, 0.08);
  clip-path: var(--pixel-cut);
  pointer-events: none;
}

.gear-box {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(138, 183, 219, 0.34);
  background: rgba(4, 13, 23, 0.86);
  color: var(--ice);
  font-size: 10px;
  font-weight: 700;
  text-shadow: 0 0 9px rgba(118, 209, 255, 0.56);
}

.speed-number {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  line-height: 1;
}

.speed-number span {
  color: #eef8ff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 #030912;
}

.speed-number small {
  color: #64829e;
  font-size: 5.5px;
  letter-spacing: 0.4px;
}

.speed-meter {
  grid-column: 1 / -1;
  height: 3px;
  background: rgba(95, 134, 168, 0.2);
  overflow: hidden;
}

.speed-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #547b9c, var(--ice));
  box-shadow: 0 0 8px rgba(126, 213, 255, 0.55);
  transition: width 0.12s linear;
}

/* ---------- touch controls ---------- */

.touch-ui {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.control-group {
  position: absolute;
  bottom: calc(var(--safe-bottom) + 1px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.steer-group {
  left: var(--safe-left);
}

.pedal-group {
  right: var(--safe-right);
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}

.group-label {
  color: rgba(147, 181, 208, 0.66);
  font-size: 6px;
  line-height: 1;
  letter-spacing: 2.2px;
  text-shadow: 0 2px 0 rgba(0, 3, 8, 0.8);
  margin-bottom: 1px;
}

.button-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.control {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin: 0;
  color: #d8e9f8;
  background:
    linear-gradient(180deg, rgba(26, 49, 72, 0.92) 0%, rgba(7, 19, 33, 0.95) 58%, rgba(4, 12, 23, 0.96) 100%);
  border: 1px solid rgba(127, 170, 206, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(225, 245, 255, 0.13),
    inset 0 -4px 0 rgba(0, 0, 0, 0.27),
    0 8px 20px rgba(0, 3, 8, 0.4);
  clip-path: polygon(0 7px, 7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  cursor: pointer;
  touch-action: none;
  pointer-events: auto;
  outline: none;
  transition: transform 0.075s ease, background 0.075s ease, box-shadow 0.075s ease, border-color 0.075s ease;
}

.control::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 244, 255, 0.26), transparent);
  pointer-events: none;
}

.control::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(170, 210, 240, 0.08);
  pointer-events: none;
}

.control svg {
  width: 27px;
  height: 27px;
  fill: currentColor;
  filter: drop-shadow(0 0 7px rgba(152, 215, 255, 0.24));
  pointer-events: none;
}

.control--steer {
  width: var(--steer-size);
  height: var(--steer-size);
}

.control--steer svg {
  width: 31px;
  height: 31px;
}

.control--gas {
  width: var(--gas-w);
  height: var(--gas-h);
  color: #c9ecff;
  border-color: rgba(125, 191, 237, 0.55);
  background:
    linear-gradient(180deg, rgba(29, 67, 96, 0.94) 0%, rgba(9, 31, 51, 0.96) 54%, rgba(5, 17, 30, 0.98) 100%);
}

.control--gas svg {
  width: 31px;
  height: 31px;
  color: var(--ice);
}

.control--brake {
  width: var(--brake-w);
  height: var(--brake-h);
  color: #ffc8ca;
  border-color: rgba(181, 118, 127, 0.46);
}

.control--brake svg {
  width: 25px;
  height: 25px;
  color: var(--danger);
  filter: drop-shadow(0 0 7px rgba(255, 115, 126, 0.2));
}

.control-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 1px;
  pointer-events: none;
}

.control-copy b {
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
}

.control-copy small {
  color: rgba(139, 169, 195, 0.7);
  font-size: 5px;
  line-height: 1;
  letter-spacing: 1px;
}

.control--gas .control-copy b {
  color: #a9def9;
}

.control--brake .control-copy b {
  color: #ffadb0;
}

.control.is-held {
  transform: translateY(3px);
  box-shadow:
    inset 0 0 0 2px rgba(196, 230, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 3, 8, 0.34),
    0 0 28px rgba(123, 196, 241, 0.2);
}

.control--steer.is-held {
  background:
    linear-gradient(180deg, rgba(56, 94, 124, 0.98), rgba(15, 41, 63, 0.98));
}

.control--gas.is-held {
  border-color: rgba(177, 229, 255, 0.8);
  background:
    linear-gradient(180deg, rgba(58, 122, 163, 0.98), rgba(14, 53, 81, 0.98));
  box-shadow:
    inset 0 0 0 2px rgba(196, 239, 255, 0.54),
    0 2px 8px rgba(0, 3, 8, 0.32),
    0 0 34px rgba(102, 190, 248, 0.3);
}

.control--brake.is-held {
  border-color: rgba(255, 168, 174, 0.76);
  background:
    linear-gradient(180deg, rgba(103, 50, 60, 0.98), rgba(48, 17, 27, 0.98));
  box-shadow:
    inset 0 0 0 2px rgba(255, 184, 188, 0.42),
    0 2px 8px rgba(0, 3, 8, 0.32),
    0 0 32px rgba(255, 103, 120, 0.22);
}

.control.is-held svg {
  transform: scale(0.94);
}

.key-hint {
  display: none;
  position: absolute;
  right: 6px;
  top: 5px;
  color: rgba(169, 201, 226, 0.42);
  font-size: 5px;
  line-height: 1;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .key-hint {
    display: block;
  }

  .control:hover {
    border-color: rgba(170, 212, 244, 0.67);
  }

  .control:hover svg {
    filter: drop-shadow(0 0 11px rgba(166, 224, 255, 0.38));
  }
}

/* ---------- boot screen ---------- */

.boot {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(18, 45, 70, 0.95) 0%, rgba(5, 15, 27, 0.98) 44%, #02070d 100%);
  transition: opacity 0.65s ease, visibility 0.65s;
}

.boot::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image: repeating-linear-gradient(0deg, rgba(169, 213, 255, 0.28) 0, rgba(169, 213, 255, 0.28) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}

.boot.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-inner {
  position: relative;
  z-index: 1;
  width: min(86vw, 440px);
  text-align: center;
  animation: boot-arrive 1.1s cubic-bezier(0.16, 0.8, 0.22, 1) both;
}

.boot-flake {
  width: 42px;
  height: 42px;
  color: #d9efff;
  filter: drop-shadow(0 0 20px rgba(117, 201, 255, 0.6));
  animation: boot-flake 2.2s ease-in-out infinite;
}

.boot-kicker {
  margin: 20px 0 11px;
  color: #6585a2;
  font-size: 7px;
  letter-spacing: 2.1px;
}

.boot h2 {
  margin: 0;
  color: #f1f8ff;
  font-family: "Silkscreen", monospace;
  font-weight: 700;
  font-size: clamp(30px, 6vw, 48px);
  line-height: 1;
  letter-spacing: 2px;
  text-shadow:
    0 4px 0 #020810,
    0 0 35px rgba(135, 210, 255, 0.25);
}

.boot-rule {
  width: 148px;
  height: 1px;
  margin: 22px auto 14px;
  background: rgba(112, 154, 189, 0.24);
  overflow: hidden;
}

.boot-rule span {
  display: block;
  width: 38%;
  height: 100%;
  background: var(--ice);
  box-shadow: 0 0 12px rgba(133, 217, 255, 0.8);
  animation: boot-load 1.2s ease-in-out infinite;
}

.boot-status {
  margin: 0;
  color: #7f9ab5;
  font-size: 7px;
  letter-spacing: 1.4px;
}

@keyframes boot-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes boot-flake {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.09); opacity: 1; }
}

@keyframes boot-load {
  0% { transform: translateX(-120%); }
  45% { transform: translateX(115%); }
  100% { transform: translateX(310%); }
}

@keyframes signal {
  0%, 16% { opacity: 1; }
  17%, 100% { opacity: 0.28; }
}

@keyframes ride-in {
  from { opacity: 0; transform: translate(-50%, 9px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes ride-delivered {
  0% { opacity: 0.72; transform: translateY(3px); }
  55% { opacity: 1; transform: translateY(-1px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes hud-in {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}

/* the drive hint's own translate needs to survive the animation */
.drive-hint {
  animation-name: hint-in;
}

@keyframes hint-in {
  from { opacity: 0; transform: translate(-50%, 7px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.noscript {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 28px;
  background: #050c16;
  color: #d9ecfb;
  font-size: 12px;
  text-align: center;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  :root {
    --steer-size: 64px;
    --gas-w: 82px;
    --gas-h: 88px;
    --brake-w: 68px;
    --brake-h: 72px;
  }

  .topbar {
    padding-top: max(16px, calc(env(safe-area-inset-top) + 10px));
  }

  .map-card {
    width: 148px;
  }

  .journey-card {
    top: 66px;
    width: 238px;
  }

  .brand h1 {
    font-size: 23px;
  }

  .northmark {
    display: none;
  }

  .speed-cluster {
    width: 102px;
    grid-template-columns: 23px 1fr;
    grid-template-rows: 23px 3px;
    column-gap: 6px;
    padding: 7px 8px;
  }

  .gear-box {
    width: 23px;
    height: 23px;
    font-size: 9px;
  }

  .speed-number span {
    font-size: 17px;
  }

  .drive-hint {
    bottom: 126px;
  }
}

@media (max-width: 680px) {
  :root {
    --steer-size: 58px;
    --gas-w: 68px;
    --gas-h: 78px;
    --brake-w: 56px;
    --brake-h: 62px;
    --safe-left: max(12px, env(safe-area-inset-left));
    --safe-right: max(12px, env(safe-area-inset-right));
  }

  .topbar {
    padding-left: calc(var(--safe-left) + 2px);
    padding-right: calc(var(--safe-right) + 2px);
  }

  .brand {
    gap: 9px;
  }

  .brand-flake {
    width: 24px;
    height: 24px;
    margin-top: 2px;
  }

  .brand h1 {
    font-size: clamp(17px, 5.2vw, 22px);
    letter-spacing: 0.4px;
  }

  .brand p {
    gap: 5px;
    margin-top: 7px;
    font-size: 6px;
    letter-spacing: 0.4px;
  }

  .map-card {
    width: 110px;
    padding: 5px;
  }

  .map-head {
    padding: 1px 1px 5px;
    font-size: 5px;
    letter-spacing: 0.5px;
  }

  .map-foot {
    padding: 5px 1px 0;
    font-size: 5px;
    letter-spacing: 0.2px;
  }

  .journey-card {
    top: max(58px, calc(env(safe-area-inset-top) + 46px));
    width: calc(100vw - var(--safe-left) - var(--safe-right) - 126px);
    min-width: 162px;
    max-width: 228px;
    gap: 7px;
    padding: 7px 8px;
  }

  .journey-mark {
    width: 30px;
    height: 39px;
  }

  .journey-mark canvas {
    width: 21px;
    height: 32px;
  }

  .journey-kicker {
    font-size: 5.8px;
    letter-spacing: 0.8px;
  }

  .journey-title {
    font-size: 9.5px;
  }

  .journey-destination {
    gap: 4px;
    font-size: 5.8px;
    letter-spacing: 0.2px;
  }

  .journey-foot {
    font-size: 5.5px;
  }

  .journey-pip {
    width: 4px;
    height: 4px;
  }

  .ride-prompt {
    bottom: calc(var(--safe-bottom) + 104px);
    width: min(420px, calc(100vw - var(--safe-left) - var(--safe-right) - 10px));
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
  }

  .ride-mark {
    width: 34px;
    height: 41px;
  }

  .ride-mark canvas {
    width: 22px;
    height: 34px;
  }

  .ride-kicker {
    font-size: 5px;
  }

  .ride-name {
    font-size: 10px;
  }

  .ride-sub {
    font-size: 5px;
  }

  .ride-action {
    min-width: 68px;
    min-height: 38px;
    padding: 5px 8px;
    font-size: 6.5px;
  }

  .ride-action small {
    display: none;
  }

  .brand-flake {
    filter: drop-shadow(0 0 8px rgba(122, 200, 255, 0.38));
  }

  .button-row {
    gap: 8px;
  }

  .pedal-group {
    gap: 7px;
  }

  .group-label {
    font-size: 5px;
    letter-spacing: 1.7px;
  }

  .control svg {
    width: 23px;
    height: 23px;
  }

  .control--steer svg {
    width: 27px;
    height: 27px;
  }

  .control--gas svg {
    width: 27px;
    height: 27px;
  }

  .control-copy b {
    font-size: 6px;
  }

  .control-copy small {
    font-size: 4.5px;
  }

  .speed-cluster {
    width: 88px;
    min-height: 49px;
    grid-template-columns: 21px 1fr;
    grid-template-rows: 21px 3px;
    column-gap: 5px;
    row-gap: 5px;
    padding: 6px 7px;
  }

  .gear-box {
    width: 21px;
    height: 21px;
    font-size: 8px;
  }

  .speed-number span {
    font-size: 15px;
  }

  .speed-number small {
    font-size: 4.5px;
  }

  .drive-hint {
    bottom: 112px;
    font-size: 6px;
    padding: 7px 8px 6px;
    gap: 5px;
  }

  .hint-arrow {
    font-size: 8px;
  }

  .boot-kicker {
    font-size: 6px;
    letter-spacing: 1.5px;
  }
}

@media (max-width: 379px) {
  :root {
    --steer-size: 54px;
    --gas-w: 62px;
    --gas-h: 72px;
    --brake-w: 52px;
    --brake-h: 58px;
    --safe-left: max(10px, env(safe-area-inset-left));
    --safe-right: max(10px, env(safe-area-inset-right));
  }

  .map-card {
    width: 96px;
  }

  .journey-card {
    top: max(56px, calc(env(safe-area-inset-top) + 44px));
    width: calc(100vw - var(--safe-left) - var(--safe-right) - 122px);
    min-width: 150px;
    max-width: 214px;
  }

  .journey-kicker {
    font-size: 5.5px;
  }

  .journey-title {
    font-size: 9px;
  }

  .journey-destination {
    font-size: 5.5px;
    letter-spacing: 0.1px;
  }

  .journey-foot {
    font-size: 5px;
  }

  .journey-mark {
    width: 28px;
    height: 36px;
  }

  .journey-mark canvas {
    width: 19px;
    height: 29px;
  }

  .ride-prompt {
    bottom: calc(var(--safe-bottom) + 122px);
  }

  .brand h1 {
    font-size: 17px;
  }

  .brand p {
    font-size: 5.5px;
  }

  .brand-flake {
    width: 21px;
    height: 21px;
  }

  .speed-cluster {
    width: 80px;
  }

  .control svg {
    width: 21px;
    height: 21px;
  }

  .control--steer svg {
    width: 25px;
    height: 25px;
  }

  .control--gas svg {
    width: 25px;
    height: 25px;
  }

  .map-foot {
    font-size: 4.6px;
  }
}

@media (max-width: 350px) {
  .journey-card {
    top: max(54px, calc(env(safe-area-inset-top) + 42px));
  }

  .ride-prompt {
    bottom: calc(var(--safe-bottom) + 158px);
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 7px;
  }

  .ride-mark {
    width: 30px;
    height: 36px;
  }

  .ride-mark canvas {
    width: 19px;
    height: 29px;
  }

  .ride-action {
    min-width: 62px;
  }

  .ride-sub {
    font-size: 4.8px;
  }

  .speed-cluster {
    bottom: calc(var(--safe-bottom) + 92px);
  }

  .drive-hint {
    display: none;
  }

  .brand p .weather,
  .brand p .slash {
    display: none;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  :root {
    --steer-size: 56px;
    --gas-w: 68px;
    --gas-h: 70px;
    --brake-w: 56px;
    --brake-h: 60px;
    --safe-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .topbar {
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .map-card {
    width: 128px;
  }

  .journey-card {
    top: 52px;
    width: min(230px, calc(100vw - var(--safe-left) - var(--safe-right) - 260px));
    min-width: 174px;
  }

  .ride-prompt {
    bottom: calc(var(--safe-bottom) + 78px);
  }

  .map-foot {
    display: none;
  }

  .brand h1 {
    font-size: 19px;
  }

  .brand p {
    margin-top: 5px;
  }

  .drive-hint {
    display: none;
  }

  .control-copy small,
  .group-label {
    display: none;
  }

  .control--gas,
  .control--brake {
    height: 64px;
  }

  .speed-cluster {
    min-height: 46px;
    bottom: 10px;
    padding: 5px 7px;
  }

  .boot-inner {
    width: min(86vw, 400px);
  }

  .boot-flake {
    width: 32px;
    height: 32px;
  }

  .boot-kicker {
    margin: 10px 0 8px;
  }

  .boot h2 {
    font-size: 30px;
  }

  .boot-rule {
    margin: 14px auto 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot-flake,
  .boot-rule span,
  .signal-dot,
  .drive-hint,
  .journey-card,
  .ride-prompt.is-visible {
    animation: none;
  }
}