:root {
  color-scheme: dark;
  --teal: #35d8ce;
  --teal-deep: #0d7379;
  --coral: #ff7658;
  --coral-deep: #a93c31;
  --cream: #fff4d8;
  --ink: #f3fffd;
  --panel: rgba(7, 34, 39, .92);
  --control: rgba(242, 246, 238, .22);
  --control-border: rgba(255, 255, 255, .55);
}

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

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #16333a;
  color: var(--ink);
  font-family: Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

button,
a { font: inherit; }

#gameShell,
#gameCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#gameCanvas {
  display: block;
  background: #9cc47d;
}

#hud {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  height: max(72px, calc(env(safe-area-inset-top) + 64px));
  min-height: 72px;
  padding: max(7px, env(safe-area-inset-top)) 178px 7px 66px;
  display: grid;
  grid-template-columns: minmax(118px, .68fr) minmax(168px, 1.08fr) minmax(140px, .88fr) minmax(92px, .56fr) minmax(190px, 1fr);
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(118, 241, 229, .34);
  background: linear-gradient(180deg, rgba(6, 29, 34, .98), rgba(9, 48, 54, .92));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .26);
}

.hudPanel {
  min-width: 0;
  height: 56px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 13px;
  background: rgba(255, 255, 255, .055);
}

#brandPanel,
#requestPanel,
#targetPanel {
  padding: 6px 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#brandPanel strong {
  overflow: hidden;
  color: #fff;
  font-size: clamp(.91rem, 1.7vw, 1.18rem);
  font-weight: 950;
  letter-spacing: .055em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#brandPanel strong span { color: var(--coral); }
#brandPanel small { margin-top: 5px; color: rgba(189, 248, 240, .7); font-size: .62rem; font-weight: 900; letter-spacing: .11em; }
#requestPanel > span,
#targetPanel > span { color: var(--coral); font-size: .64rem; font-weight: 950; letter-spacing: .12em; }
#requestPanel strong,
#targetPanel strong { overflow: hidden; margin-top: 1px; color: var(--cream); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
#requestPanel small,
#targetPanel small { overflow: hidden; margin-top: 2px; color: rgba(224, 255, 249, .64); font-size: .58rem; font-weight: 850; letter-spacing: .07em; text-overflow: ellipsis; white-space: nowrap; }

#mapPanel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  background: rgba(4, 25, 29, .62);
}

#cityMap {
  display: block;
  width: min(100%, 210px);
  height: 50px;
  border-radius: 8px;
}

#statsPanel {
  padding: 5px 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

#statsPanel div {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 2px;
  border-left: 1px solid rgba(255, 255, 255, .1);
}

#statsPanel div:first-child { border-left: 0; }
#statsPanel span { color: rgba(218, 249, 245, .62); font-size: .6rem; font-weight: 900; letter-spacing: .08em; }
#statsPanel strong { color: #fff; font-size: clamp(.84rem, 1.6vw, 1.02rem); }

.cornerButton {
  position: fixed;
  z-index: 25;
  top: max(12px, env(safe-area-inset-top));
  width: 40px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 12px;
  background: rgba(2, 18, 21, .7);
  color: #fff;
  font-size: 1rem;
  font-weight: 950;
  text-decoration: none;
}

#arcadeLink { left: max(9px, env(safe-area-inset-left)); }
#pauseButton { right: calc(max(9px, env(safe-area-inset-right)) + 88px); }
#resetButton { right: calc(max(9px, env(safe-area-inset-right)) + 44px); }
#screenButton { right: max(9px, env(safe-area-inset-right)); }

.cornerButton:active { transform: scale(.94); }

html.arcadeEmbedded #arcadeLink,
html.arcadeEmbedded #resetButton,
html.arcadeEmbedded #screenButton { display: none; }

html.arcadeEmbedded #pauseButton {
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

html.arcadeEmbedded #hud {
  padding-right: max(10px, env(safe-area-inset-right));
  padding-left: max(10px, env(safe-area-inset-left));
}

#edgeMarker {
  position: fixed;
  z-index: 17;
  left: 50%;
  top: 50%;
  min-width: 78px;
  min-height: 34px;
  padding: 5px 10px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 2px solid #6ef5ea;
  border-radius: 99px;
  background: rgba(5, 39, 44, .88);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28), 0 0 16px rgba(53, 216, 206, .2);
  color: #fff;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

#edgeMarker.dropoff { border-color: #ffd467; box-shadow: 0 4px 14px rgba(0, 0, 0, .28), 0 0 16px rgba(255, 205, 94, .22); }
#edgeMarker b { font-size: .63rem; letter-spacing: .09em; }
#edgeMarker span { color: rgba(255,255,255,.72); font-size: .62rem; font-weight: 900; }

#toast {
  position: fixed;
  z-index: 30;
  top: 82px;
  left: 50%;
  max-width: min(560px, calc(100% - 36px));
  padding: 8px 17px;
  border: 1px solid rgba(104, 241, 224, .52);
  border-radius: 99px;
  background: rgba(5, 38, 41, .9);
  color: #effffb;
  font-size: .79rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

#toast.visible { opacity: 1; transform: translate(-50%, 0); }

.messageCard {
  position: fixed;
  z-index: 29;
  top: 124px;
  left: 50%;
  width: min(430px, calc(100% - 330px));
  min-width: 260px;
  padding: 10px 15px 11px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 15px;
  background: rgba(6, 35, 40, .93);
  box-shadow: 0 9px 26px rgba(0,0,0,.3);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -9px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}

.messageCard.visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.messageCard.passenger { border-color: rgba(255, 196, 103, .72); }
.messageCard.company { border-color: rgba(87, 231, 220, .68); }
.messageCard strong { display: block; margin-bottom: 3px; color: #75eee5; font-size: .62rem; font-weight: 1000; letter-spacing: .14em; }
.messageCard.passenger strong { color: #ffd070; }
.messageCard p { margin: 0; color: #fff; font-size: clamp(.76rem, 1.5vw, .94rem); font-weight: 850; line-height: 1.35; }

#touchDrive {
  --knob-x: 0px;
  --knob-y: 0px;
  position: fixed;
  z-index: 26;
  width: 112px;
  height: 112px;
  border: 2px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  background: rgba(8, 48, 54, .2);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, .07), 0 8px 24px rgba(0, 0, 0, .24);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
  transition: opacity 100ms ease, transform 100ms ease;
}

#touchDrive.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.touchDriveKnob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  background: rgba(53, 216, 206, .42);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, .12), 0 4px 14px rgba(0, 0, 0, .24);
  transform: translate(calc(-50% + var(--knob-x)), calc(-50% + var(--knob-y)));
}

#controls {
  position: fixed;
  z-index: 30;
  inset: 0;
  pointer-events: none;
}

#dpad {
  position: absolute;
  left: max(8px, env(safe-area-inset-left));
  bottom: max(8px, env(safe-area-inset-bottom));
  width: clamp(126px, 18vw, 174px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  pointer-events: auto;
}

.driveButton {
  border: 2px solid var(--control-border);
  color: #fff;
  background: var(--control);
  box-shadow: inset 0 0 16px rgba(255, 255, 255, .06), 0 5px 18px rgba(0, 0, 0, .18);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  touch-action: none;
  cursor: pointer;
}

.driveButton.active,
.driveButton:active {
  background: rgba(53, 216, 206, .54);
  border-color: rgba(255, 255, 255, .92);
  transform: scale(.97);
}

.dpadButton {
  border-radius: 14px;
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: 900;
}

.dpadButton.up { grid-column: 2; grid-row: 1; }
.dpadButton.left { grid-column: 1; grid-row: 2; }
.dpadButton.right { grid-column: 3; grid-row: 2; }
.dpadButton.down { grid-column: 2; grid-row: 3; }

.dpadCenter {
  grid-column: 2;
  grid-row: 2;
  width: 42%;
  height: 42%;
  place-self: center;
  border: 2px solid rgba(255, 255, 255, .36);
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
}

#pedals {
  position: absolute;
  right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, clamp(58px, 8vw, 82px));
  gap: 10px;
  align-items: end;
  pointer-events: auto;
}

.pedal {
  height: clamp(60px, 10vh, 86px);
  border-radius: 22px 22px 13px 13px;
  font-size: clamp(.75rem, 1.7vw, 1rem);
  font-weight: 950;
  letter-spacing: .04em;
}

.pedal.gas { border-color: rgba(119, 255, 153, .72); }
.pedal.brake { border-color: rgba(255, 133, 118, .72); }
.pedal.reverse { border-color: rgba(119, 196, 255, .78); background: rgba(26, 66, 93, .94); color: #e8f8ff; }
.pedal.reverse small { display: block; font-size: .57rem; line-height: 1; }

.gameOverlay {
  position: fixed;
  z-index: 40;
  inset: 0;
  padding: max(72px, calc(env(safe-area-inset-top) + 68px)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  display: none;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(14, 92, 94, .34), rgba(3, 18, 22, .78));
}

.gameOverlay.visible { display: grid; }

.overlayCard {
  width: min(720px, 92vw);
  padding: clamp(20px, 4vw, 38px);
  border: 1px solid rgba(111, 242, 225, .48);
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(5, 31, 37, .97), rgba(11, 57, 62, .94));
  box-shadow: 0 20px 70px rgba(0, 0, 0, .48), inset 0 0 50px rgba(53, 216, 206, .045);
  text-align: center;
}

.eyebrow { margin: 0 0 8px; color: #83f0e8; font-size: .7rem; font-weight: 950; letter-spacing: .18em; }
.overlayCard h1 { margin: 0; color: #fff; font-size: clamp(2.1rem, 7vw, 4.8rem); font-weight: 1000; letter-spacing: -.04em; line-height: .96; }
.overlayCard h1 span { color: var(--coral); }
.overlayCard h2 { margin: 0 0 18px; color: var(--cream); font-size: clamp(1.65rem, 4vw, 2.6rem); }
.overlayCard > p:not(.eyebrow) { max-width: 620px; margin: 16px auto 18px; color: rgba(235,255,251,.78); font-size: clamp(.86rem, 1.8vw, 1.05rem); line-height: 1.5; }
.overlayCard > small { display: block; margin-top: 12px; color: rgba(219,255,250,.58); font-size: .68rem; font-weight: 850; letter-spacing: .04em; }

.startSteps {
  margin: 0 auto 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.startSteps span {
  min-height: 46px;
  padding: 8px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;
  background: rgba(255,255,255,.05);
  color: #eafffb;
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .055em;
}

.startSteps b {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
}

.primaryButton,
.secondaryButton {
  min-width: min(340px, 82vw);
  min-height: 54px;
  padding: 11px 24px;
  border-radius: 999px;
  color: #082f33;
  font-weight: 1000;
  letter-spacing: .09em;
  cursor: pointer;
}

.primaryButton {
  border: 2px solid #fff4bc;
  background: linear-gradient(180deg, #ffe980, #ffba3f);
  box-shadow: 0 8px 24px rgba(255, 188, 64, .25);
}

.secondaryButton {
  margin-top: 9px;
  border: 2px solid #72e9e0;
  background: rgba(21, 83, 90, .58);
  color: #eafffb;
}

.primaryButton:active,
.secondaryButton:active { transform: translateY(2px) scale(.99); }
.compactCard { width: min(470px, 92vw); }
.receiptOverlay { background: rgba(3, 18, 22, .48); }
.receiptCard { width: min(430px, 92vw); border-color: rgba(255, 215, 107, .7); }
.receiptRows { margin: 14px auto 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; }
.receiptRows p { margin: 0; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.1); }
.receiptRows p:first-child { border-top: 0; }
.receiptRows span { color: rgba(226,255,250,.68); font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.receiptRows strong { color: #ffe27b; font-size: 1.45rem; }
.tipNote { margin: -11px auto 11px !important; color: rgba(227,255,250,.7) !important; font-size: .74rem !important; font-weight: 800; line-height: 1.25 !important; }
.receiptReview {
  margin: 0 auto 13px;
  padding: 10px 13px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(255, 220, 116, .25);
  border-radius: 13px;
  background: rgba(255,255,255,.045);
}
.ratingStars { color: #ffd85e; font-size: 1.32rem; letter-spacing: .08em; line-height: 1; }
.receiptReview q { color: #f4fffc; font-size: .82rem; font-weight: 850; line-height: 1.28; }
.companyResult {
  margin: 0 auto 13px;
  padding: 9px 12px;
  border: 1px solid rgba(92, 234, 224, .4);
  border-radius: 12px;
  background: rgba(29, 104, 106, .24);
}
.companyResult[hidden] { display: none; }
.companyResult strong { display: block; margin-bottom: 3px; color: #78f0e5; font-size: .61rem; font-weight: 1000; letter-spacing: .14em; }
.companyResult span { color: #effffc; font-size: .73rem; font-weight: 800; line-height: 1.3; }

#rotateMessage {
  position: fixed;
  z-index: 80;
  inset: 0;
  padding: 28px;
  display: none;
  place-content: center;
  gap: 8px;
  background: #08262c;
  text-align: center;
}

#rotateMessage div { color: var(--teal); font-size: 3rem; }
#rotateMessage strong { color: #fff; font-size: 1.35rem; }
#rotateMessage span { color: rgba(231,255,251,.7); font-size: .86rem; }

body.screenLocked #controls { opacity: .28; pointer-events: none; }

@media (orientation: portrait) and (max-width: 760px) {
  #rotateMessage { display: grid; }
}

@media (max-height: 560px) {
  #hud {
    height: max(62px, calc(env(safe-area-inset-top) + 56px));
    min-height: 62px;
    padding-top: max(4px, env(safe-area-inset-top));
    padding-bottom: 4px;
    gap: 4px;
  }
  .hudPanel { height: 50px; border-radius: 10px; }
  #brandPanel,
  #requestPanel,
  #targetPanel { padding: 4px 8px; }
  #brandPanel small { margin-top: 3px; }
  #statsPanel { padding: 3px 5px; }
  #mapPanel { padding: 2px 4px; }
  #cityMap { height: 44px; }
  .cornerButton { top: max(9px, env(safe-area-inset-top)); width: 34px; height: 36px; border-radius: 10px; }
  #pauseButton { right: calc(max(7px, env(safe-area-inset-right)) + 74px); }
  #resetButton { right: calc(max(7px, env(safe-area-inset-right)) + 37px); }
  #screenButton { right: max(7px, env(safe-area-inset-right)); }
  #arcadeLink { left: max(7px, env(safe-area-inset-left)); }
  #toast { top: 68px; padding: 6px 14px; font-size: .7rem; }
  .messageCard { top: 100px; width: min(390px, calc(100% - 286px)); padding: 7px 12px 8px; }
  .messageCard p { font-size: .7rem; }
  #dpad { width: 118px; bottom: max(6px, env(safe-area-inset-bottom)); }
  #pedals {
    right: max(6px, env(safe-area-inset-right));
    bottom: max(6px, env(safe-area-inset-bottom));
    grid-template-columns: repeat(3, 58px);
    gap: 6px;
  }
  .pedal { height: 48px; border-radius: 16px 16px 10px 10px; }
  .gameOverlay { padding-top: max(58px, calc(env(safe-area-inset-top) + 54px)); }
  .overlayCard { padding: 16px 24px; }
  .overlayCard > p:not(.eyebrow) { margin: 10px auto 12px; line-height: 1.34; }
  .startSteps { margin-bottom: 12px; }
  .primaryButton,
  .secondaryButton { min-height: 44px; }
  .receiptCard { padding: 12px 22px; }
  .receiptCard h2 { margin-bottom: 8px; font-size: 1.35rem; }
  .receiptRows { margin: 7px auto 9px; }
  .receiptRows p { padding: 7px 14px; }
  .receiptRows strong { font-size: 1.08rem; }
  .tipNote { margin-bottom: 7px !important; font-size: .63rem !important; }
  .receiptReview { margin-bottom: 7px; padding: 6px 10px; }
  .ratingStars { font-size: 1rem; }
  .receiptReview q { font-size: .68rem; }
  .companyResult { margin-bottom: 7px; padding: 6px 10px; }
  .companyResult span { font-size: .65rem; }
  .receiptCard > small { margin-top: 5px; }
}

@media (max-width: 900px) and (orientation: landscape) {
  #hud { grid-template-columns: minmax(94px, .58fr) minmax(132px, 1fr) minmax(112px, .74fr) minmax(74px, .46fr) minmax(148px, .88fr); }
  #brandPanel strong { font-size: .83rem; }
  #brandPanel small,
  #requestPanel small,
  #targetPanel small { font-size: .51rem; }
  #requestPanel strong,
  #targetPanel strong { font-size: .76rem; }
  #statsPanel span { font-size: .5rem; }
  #statsPanel strong { font-size: .76rem; }
  .messageCard { width: min(390px, calc(100% - 294px)); }
}

@media (max-width: 720px) and (orientation: landscape) {
  #hud {
    grid-template-columns: minmax(82px, .58fr) minmax(116px, 1fr) minmax(96px, .72fr) minmax(64px, .42fr) minmax(126px, .84fr);
    gap: 3px;
  }
  #brandPanel,
  #requestPanel,
  #targetPanel { padding-inline: 5px; }
  #brandPanel strong { font-size: .72rem; }
  #brandPanel small,
  #requestPanel small,
  #targetPanel small { font-size: .46rem; letter-spacing: .035em; }
  #requestPanel > span,
  #targetPanel > span { font-size: .52rem; }
  #requestPanel strong,
  #targetPanel strong { font-size: .67rem; }
  #statsPanel { padding-inline: 2px; }
  #statsPanel span { font-size: .43rem; letter-spacing: .04em; }
  #statsPanel strong { font-size: .67rem; }
  #mapPanel { padding-inline: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}