/* ── Retro toy-shop look: cream ground, pink panels, brick red, pastel cards.
   Elderly-first stays: big type, big targets, strong contrast. ── */

@font-face {
  font-family: 'Fraunces';
  src: url('/vendor/fraunces.woff2') format('woff2');
  font-weight: 600 900;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/vendor/fraunces-italic.woff2') format('woff2');
  font-weight: 600 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --cream: #f7eedc;
  --paper: #fffdf4;
  --pink: #f6c9d0;
  --red: #cc4237;
  --red-dark: #a93227;
  --yellow: #f3cd5e;
  --yellow-pale: #fae9be;
  --blue: #a9d2e4;
  --blue-pale: #d3e7f0;
  --pink-pale: #f9dade;
  --ink: #33211c;
  --ink-soft: #6b5248;
  --sand: #d8c9ae;
  --sand-deep: #b8a68c;
  --r-lg: 24px;
  --r-md: 18px;
  --shadow: 0 3px 0 rgba(51, 33, 28, 0.12);
  --display: 'Fraunces', Georgia, serif;
}

* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
html { font-size: 20px; }
body {
  font-family: -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
  color: var(--ink);
  background: var(--cream);
  background-image: radial-gradient(rgba(204, 66, 55, 0.06) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

.screen { max-width: 480px; margin: 0 auto; min-height: 100vh; padding: 0.7rem 0.8rem 2rem; }

/* ── splash ── */
#splash {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--pink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  transition: opacity 0.45s ease, visibility 0.45s;
}
#splash.done { opacity: 0; visibility: hidden; }
#splash .mark {
  font-family: var(--display); font-style: italic; font-weight: 800;
  font-size: 4.2rem; color: var(--red); letter-spacing: -0.02em;
}
#splash .bus { font-size: 3rem; animation: drive 1.1s ease-in-out infinite alternate; }
@keyframes drive { from { transform: translateX(-26px) } to { transform: translateX(26px) } }
#splash .dots { color: var(--red-dark); font-weight: 700; letter-spacing: 0.35em; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25 } }

/* ── header: the stop name IS the page title — a quiet tappable heading,
   not a filled control. The board below is the hero. ── */
header { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.3rem 0 0.6rem; }
.stop-btn {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
  background: none; border-radius: var(--r-md); padding: 0.35rem 0.3rem; text-align: left;
}
.stop-btn:active { background: rgba(51, 33, 28, 0.05); }
.stop-title { display: flex; align-items: center; gap: 0.4rem; max-width: 100%; }
.stop-name {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 1.35rem; line-height: 1.1; color: var(--red);
  /* one line only — long names truncate with an ellipsis */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.stop-name.dim { color: var(--ink-soft); font-family: inherit; font-style: normal; font-weight: 400; font-size: 1.1rem; }
.chev {
  align-self: center; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--paper); box-shadow: var(--shadow);
  color: var(--red-dark); font-size: 1.5rem; line-height: 1;
}
.stop-code {
  font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.12em; font-size: 0.8rem;
  background: var(--paper); border-radius: 8px; padding: 0.12rem 0.45rem;
  box-shadow: inset 0 1px 2px rgba(51, 33, 28, 0.25); color: var(--ink-soft);
}
.lang {
  background: none; border-radius: var(--r-md); padding: 0.6rem 0.7rem;
  font-weight: 800; color: var(--ink-soft);
}
.lang:active { background: rgba(51, 33, 28, 0.05); }

/* ── search ── */
.searchwrap { position: relative; }
.search {
  width: 100%; font-size: 1.2rem; padding: 0.95rem 3rem 0.95rem 1.1rem;
  border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow);
}
.search::placeholder { color: var(--ink-soft); }
.search:focus { outline: none; border-color: var(--red); }
.clear { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: var(--ink-soft); padding: 0.6rem; }

/* ── gps fallback ── */
.codebox {
  background: var(--yellow-pale); border: 2.5px solid var(--yellow);
  border-radius: var(--r-lg); padding: 1rem; margin-bottom: 0.8rem;
  display: flex; flex-direction: column; gap: 0.5rem; font-size: 1.05rem;
}
.search.code { letter-spacing: 0.3rem; font-size: 1.5rem; text-align: center; }

/* ── suggestions / saved places ── */
.suggests, .places { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.55rem; }
.suggest, .place {
  background: var(--paper); border-radius: var(--r-md); padding: 1rem 1.1rem;
  font-size: 1.05rem; text-align: left; box-shadow: var(--shadow);
  display: flex; gap: 0.6rem; align-items: center;
}
.place.saved { font-weight: 700; background: var(--pink-pale); }
.place span, .suggest { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── signboard: cassette-futurism departure board ──
   chunky warm-plastic bezel around a dark VFD screen with glowing amber digits */
.signboard {
  margin-top: 0.9rem;
  background: linear-gradient(#efe3c8, #ddcda9);
  border-radius: var(--r-lg);
  padding: 0.55rem 0.55rem 0.7rem;
  box-shadow: var(--shadow), inset 0 2px 0 rgba(255, 255, 255, 0.65), inset 0 -3px 0 rgba(51, 33, 28, 0.16);
}
.sb-label {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.15rem 0.5rem 0.45rem;
  font-weight: 800; letter-spacing: 0.18em; font-size: 0.85rem; color: var(--red-dark);
}
.sb-code {
  font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.12em; font-size: 0.8rem;
  background: var(--paper); border-radius: 8px; padding: 0.12rem 0.45rem;
  box-shadow: inset 0 1px 2px rgba(51, 33, 28, 0.25); color: var(--ink-soft);
}
.sb-screen {
  position: relative;
  background: #221a12;
  border-radius: 14px;
  padding: 0.4rem 0.75rem;
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.55), inset 0 0 0 2px #120d08;
  overflow: hidden;
}
.sb-screen::after {
  /* scanlines + a soft glare at the top of the glass */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05), transparent 18%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.15) 2px 3px);
}
.sb-row {
  position: relative;   /* anchors the tap-to-play .busdrive bus */
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.55rem 0.1rem;
  color: #ffb63c;
  text-shadow: 0 0 8px rgba(255, 170, 40, 0.45);
}
.sb-row + .sb-row { border-top: 1px solid rgba(255, 182, 60, 0.14); }
.sb-left { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 3.2ch; }
.sb-svc { font-family: var(--display); font-weight: 900; font-size: 1.7rem; line-height: 1; letter-spacing: 0.02em; }
.sb-away { font-size: 0.7rem; color: #d99a2e; letter-spacing: 0.03em; white-space: nowrap; }
.sb-times { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.sb-laters { display: flex; gap: 0.35rem; }
.sb-first { font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.05; white-space: nowrap; }
.sb-first.isnow { color: #7dffa0; text-shadow: 0 0 9px rgba(90, 255, 140, 0.5); animation: sbblink 1.1s steps(2) infinite; }
@keyframes sbblink { 50% { opacity: 0.45 } }
.sb-later {
  font-size: 0.8rem; color: #cf9231; white-space: nowrap;
  border: 1px solid rgba(255, 182, 60, 0.35); border-radius: 5px;
  padding: 0.05rem 0.35rem; line-height: 1.3;
  text-shadow: none;
}
.sb-empty { padding: 1.1rem 0.2rem; text-align: center; color: #d99a2e; text-shadow: 0 0 8px rgba(255, 170, 40, 0.4); letter-spacing: 0.2em; }

/* where-to entry under the board */
.wheretobtn {
  width: 100%; margin-top: 0.8rem;
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  background: var(--paper); border: 2.5px solid var(--ink);
  border-radius: var(--r-lg); padding: 0.9rem 1rem;
  font-size: 1.15rem; font-weight: 700; box-shadow: var(--shadow);
}
.wt-icon { color: var(--red); font-weight: 900; }

/* destination panel top bar: back + search */
.destbar { display: flex; gap: 0.5rem; align-items: stretch; }
.destbar .searchwrap { flex: 1; }
.backbtn {
  background: var(--pink-pale); border-radius: var(--r-lg); padding: 0 0.8rem;
  font-weight: 700; box-shadow: var(--shadow); white-space: nowrap;
}

/* ── results ── */
.results { margin-top: 0.9rem; }
.destline { display: flex; align-items: center; padding: 0 0.2rem 0.7rem; }
.destname {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 1.25rem; color: var(--red); flex: 1;
}
.star { font-size: 1.5rem; color: #c9b89a; padding: 0.2rem 0.5rem; }
.star.on { color: var(--red); }
.msg { background: var(--paper); border-radius: var(--r-lg); padding: 1.2rem; text-align: center; color: var(--ink-soft); box-shadow: var(--shadow); }

.card {
  border-radius: var(--r-lg); padding: 1rem 1rem 0.85rem; margin-bottom: 0.85rem;
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
/* toy bus drives across the top strip of the card when its bus reaches "Now" */
.busdrive {
  position: absolute; top: 0.3rem; left: -3rem; font-size: 1.6rem;
  pointer-events: none; z-index: 2;
  animation: busdrive 2.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}
/* drive in, pause at the middle like a real stop, drive off */
@keyframes busdrive {
  0%   { left: -3rem; transform: rotate(-4deg); }
  38%  { left: 44%;   transform: rotate(3deg); }
  42%  { transform: rotate(0deg); }
  58%  { left: 44%;   transform: rotate(0deg); }
  62%  { transform: rotate(-3deg); }
  100% { left: 105%;  transform: rotate(4deg); }
}
.card.flash { animation: cardglow 2.4s ease-out; }
@keyframes cardglow { 0%, 60% { box-shadow: 0 0 0 4px var(--yellow), var(--shadow); } }
.card:nth-child(3n+1) { background: var(--yellow-pale); }
.card:nth-child(3n+2) { background: var(--blue-pale); }
.card:nth-child(3n)   { background: var(--pink-pale); }
.cardtop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.45rem; }
.buses { display: flex; align-items: center; gap: 0.4rem; }
.busno {
  font-family: var(--display); background: var(--red); color: var(--cream);
  font-weight: 800; font-size: 1.5rem; padding: 0.12rem 0.75rem; border-radius: 14px;
  box-shadow: 0 2px 0 var(--red-dark);
}
.busno.big { font-size: 2rem; }
.busno.mini { font-size: 0.95rem; padding: 0.02rem 0.5rem; border-radius: 9px; box-shadow: 0 1.5px 0 var(--red-dark); margin-right: 0.15rem; }
.arrow { color: var(--red-dark); font-size: 1.2rem; }
.eta { font-weight: 800; font-size: 1.25rem; color: var(--red); }
.etacol { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; }
.etalaters { display: flex; gap: 0.35rem; }
.etalater {
  font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap;
  border: 1.5px solid var(--ink-soft); border-radius: 5px;
  padding: 0.05rem 0.35rem; line-height: 1.3; opacity: 0.75;
}

/* vertical journey timeline: dots left, dashed line between stops */
.tl { margin: 0 0 0.2rem 0.2rem; font-size: 1rem; }
.tlrow { display: flex; gap: 0.65rem; align-items: flex-start; }
.tltext { padding-top: 0; line-height: 1.35; }
.tltext small { color: var(--ink-soft); font-size: 0.9rem; }
.tldot {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  margin-top: 5px; box-sizing: border-box;      /* center of dot ≈ center of first text line */
  background: var(--red); border: 3.5px solid var(--red);
  position: relative; z-index: 1;                      /* dots sit on top of the rail */
}
.tldot.mid { background: var(--paper); }              /* ring = change here */
.tldot.end { background: var(--yellow); border-color: var(--red); }
.tlseg {
  padding: 0.35rem 0 0.45rem 1.4rem;
  min-height: 1.9rem;
  color: var(--ink-soft); font-size: 0.95rem;
}
.tlseg b { color: var(--ink); }

/* the rail: ONE unbroken bead thread for the whole timeline (no per-row
   patterns → no clipped beads at row seams). It runs from the first dot's
   center to the bottom; a card-colored cover hides the tail below the last
   dot. Paint order: row backgrounds < rail (z1) < cover (z2) < dots/text (z3). */
.tl { position: relative; background: inherit; }
.tl::before {
  content: ''; position: absolute; left: 5px; top: 13px; bottom: 0; width: 6px; z-index: 1;
  background-image: radial-gradient(circle, var(--red) 2.1px, transparent 2.5px);
  background-size: 6px 10px; background-repeat: repeat-y; background-position: center top;
}
.tlrow, .tlseg { position: relative; }
.tlrow:last-child { background: inherit; }
.tlrow:last-child::before {
  content: ''; position: absolute; left: 0; right: 0; top: 13px; bottom: -6px;
  background: inherit; z-index: 2;
}
.tltext { position: relative; z-index: 3; }
.tldot { z-index: 3; }

.ridebtn {
  display: block; width: 100%; margin-top: 0.75rem;
  background: var(--red); color: var(--cream);
  font-size: 1.25rem; font-weight: 800; padding: 0.9rem; border-radius: 999px;
  box-shadow: 0 3px 0 var(--red-dark);
}
.ridebtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--red-dark); }

/* cards screen: "a nearer stop has a direct bus" banner + the map branch */
.betterstop {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left;
  background: var(--yellow-pale); border: 2.5px solid var(--yellow);
  border-radius: var(--r-lg); padding: 0.85rem 1rem; margin-bottom: 0.85rem;
  box-shadow: var(--shadow); line-height: 1.35;
}
.betterstop:active { transform: translateY(2px); box-shadow: none; }
.bs-txt { flex: 1; font-size: 1rem; }
.bs-txt b { color: var(--red-dark); }
.bs-arr { font-size: 1.6rem; font-weight: 800; color: var(--red); }
/* FROM line at the top of the results: boarding stop + tap into the picker */
.fromline {
  display: flex; align-items: center; gap: 0.45rem; width: 100%; min-height: 2.8rem;
  padding: 0.3rem 0.3rem 0.6rem; text-align: left; background: none;
}
.fromline:active { background: rgba(51, 33, 28, 0.05); border-radius: var(--r-md); }
.fl-label {
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
}
.fl-stop {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 1.15rem; color: var(--red-dark); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fromline .chev { width: 1.8rem; height: 1.8rem; font-size: 1.25rem; flex: none; }

/* nearby-stop recommendation */
.codebox.sug { margin-top: 0; background: var(--yellow-pale); border-color: var(--yellow); }
.sugbtns { display: flex; gap: 0.5rem; }
.sugbtns .ridebtn { margin-top: 0.2rem; font-size: 1.05rem; padding: 0.7rem; }
.ridebtn.alt { background: var(--blue); color: var(--ink); box-shadow: 0 3px 0 #7fb2c9; }

/* ── map ── */
.mapscreen { padding: 0; max-width: none; }
.mapsearch { position: fixed; top: 0.8rem; left: 0.8rem; right: 7rem; z-index: 1000; }
.mapsearch .search { font-size: 1.05rem; padding: 0.75rem 2.6rem 0.75rem 0.9rem; }
.mapsearch .suggests { margin-top: 0.5rem; max-height: 45vh; overflow-y: auto; }
.mapsearch .suggest { padding: 0.85rem 1rem; }
.maplocate {
  position: fixed; right: 0.8rem; bottom: 3.4rem; z-index: 1000;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--paper); border: 2.5px solid var(--ink);
  box-shadow: 0 3px 0 rgba(51,33,28,.25);
  display: flex; align-items: center; justify-content: center;
}
.maplocate img { width: 2.1rem; height: auto; display: block; }
#map { position: fixed; inset: 0; background: var(--cream); }
.mapclose {
  position: fixed; top: 0.8rem; right: 0.8rem; z-index: 1000;
  background: var(--paper); border-radius: var(--r-md); padding: 0.8rem 1rem;
  font-weight: 800; box-shadow: 0 3px 0 rgba(51,33,28,.25);
}
.maphint {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 1000;
  background: var(--ink); color: var(--cream); border-radius: 999px;
  padding: 0.6rem 1.2rem; font-size: 0.95rem; white-space: nowrap;
}
/* picker hint has more to say — let it wrap */
.maphint.wide {
  white-space: normal; text-align: center; line-height: 1.35;
  width: max-content; max-width: min(90vw, 24rem); border-radius: var(--r-md);
}
/* no bus reaches the destination — make this stand out, not just another hint */
.maphint.warn {
  background: var(--red); color: var(--cream); border: 3px solid var(--red-dark);
  font-weight: 700;
}
.stopdot .dot { width: 18px; height: 18px; border-radius: 50%; background: #2e7d4f; border: 3px solid var(--paper); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.stopdot .lbl { font-size: 12px; font-weight: 700; background: rgba(255,253,244,.96); border: 2px solid rgba(51,33,28,.55); border-radius: 7px; padding: 1px 6px; margin-top: 2px; white-space: nowrap; transform: translateX(calc(-50% + 12px)); width: max-content; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.stopdot.hl .dot { width: 26px; height: 26px; background: #e8590c; border-width: 4px; }
.stopdot.hl .lbl { background: #e8590c; color: #fff; border-color: #a63c05; }
.stopdot.sel .dot { width: 26px; height: 26px; background: var(--red); border-width: 4px; }
.stopdot.sel .lbl { background: var(--red); color: var(--cream); border-color: var(--red-dark); }
/* on a red label the info line must be light, not dark red */
.stopdot.sel .lbl .lblinfo, .stopdot.hl .lbl .lblinfo { color: var(--yellow-pale); }
/* stop-picker: direct stops loud, change-only stops quiet */
.stopdot.pd .dot {
  width: 26px; height: 26px; background: var(--red); border-width: 4px;
  animation: pickpulse 1.8s ease-out infinite;
}
/* radiating ring: "these are the stops you can pick" */
@keyframes pickpulse {
  0%   { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(204, 66, 55, 0.55); }
  70%  { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 0 0 16px rgba(204, 66, 55, 0); }
  100% { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(204, 66, 55, 0); }
}
.stopdot.pd .lbl { border: 2px solid var(--red); max-width: 180px; }
.stopdot.pc .dot { width: 16px; height: 16px; background: #9a8f80; }
.stopdot.pc .lbl { opacity: 0.82; }
/* the stop the better-stop banner points at: it keeps the red "direct" dot,
   and gains an orange ring + orange label so the eye finds it at once.
   Must stay after .pd/.pc — same specificity, source order decides. */
.stopdot.phl .dot { width: 30px; height: 30px; border-color: #e8590c; border-width: 5px; }
.stopdot.phl .lbl { background: #e8590c; color: #fff; border-color: #a63c05; opacity: 1; max-width: 180px; }
.stopdot.phl .lbl .lblinfo { color: var(--yellow-pale); }
/* picker: the stop the user stands at now — blue, so red(direct)/grey(change) keep their meaning */
.stopdot.psel .dot { width: 30px; height: 30px; background: #2e6f94; border-width: 5px; }
.stopdot.psel .lbl { background: #2e6f94; color: #fff; border-color: #1f4d68; opacity: 1; }
.stopdot.psel .lbl .lblinfo { color: var(--blue-pale); }
.lblinfo { display: block; color: var(--red-dark); font-weight: 800; }
.stopdot.pc .lbl .lblinfo { color: var(--ink-soft); font-weight: 600; }
.meduck { text-align: center; }
.leaflet-container .meduck img {
  /* leaflet.css forces marker imgs to width:auto with !important-level specificity — out-rank it */
  width: 52px !important; height: auto !important; display: block; margin: 0 auto;
  filter: drop-shadow(0 4px 3px rgba(51, 33, 28, 0.35));
  animation: waddle 1.6s ease-in-out infinite;
  transform-origin: 50% 90%;
}
/* zoomed out: shrink the duck so it stops covering nearby stop markers/labels.
   Scale the wrapper, not the img — the img's transform is the waddle animation,
   and scaling the layout width would move the feet up away from the icon anchor. */
.leaflet-container .meduck .duckbody { transform-origin: 50% 100%; transition: transform 0.2s ease-out; }
.leaflet-container .meduck.far .duckbody { transform: scale(0.58); }
.meduck.far .melbl2 { display: none; }
@keyframes waddle {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg) translateY(-2px); }
}
.melbl2 {
  margin-top: 1px; background: var(--red); color: var(--cream);
  font-size: 12px; font-weight: 800; border-radius: 999px; padding: 2px 9px;
  white-space: nowrap; width: max-content; margin-left: 50%; transform: translateX(-50%);
  box-shadow: 0 2px 0 var(--red-dark);
}
.walklbl div { transform: translate(-50%, -50%); background: var(--paper); color: #e8590c; border: 2px solid #e8590c; font-size: 14px; font-weight: 800; border-radius: 999px; padding: 3px 10px; white-space: nowrap; width: max-content; box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* ── ride ── */
.ride { display: flex; flex-direction: column; min-height: 100vh; background: var(--pink); background-image: radial-gradient(rgba(204,66,55,.08) 1.2px, transparent 1.2px); background-size: 22px 22px; transition: background-color 0.3s; }
.ride.alert { background-color: var(--yellow); }
.ridehead { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; }
.ridehead .lang { background: var(--paper); }
.countdown { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.bignum { font-family: var(--display); font-size: 9.5rem; font-weight: 900; line-height: 1; color: var(--red-dark); }
.bignum.mid { font-family: var(--display); font-size: 5rem; background: var(--red); color: var(--cream); border-radius: 26px; padding: 0.5rem 1.5rem; margin: 0.8rem 0; box-shadow: 0 4px 0 var(--red-dark); }
.bigword { font-size: 1.6rem; font-weight: 700; color: var(--ink); margin-top: 0.5rem; }
.ridefoot { text-align: center; padding-bottom: 1rem; font-size: 1.1rem; color: var(--ink-soft); }
.offbig { font-family: var(--display); font-size: 1.6rem; font-weight: 800; color: var(--ink); }
.offnow { margin-top: 0.6rem; font-size: 1.8rem; font-weight: 900; color: var(--red-dark); animation: blink 0.8s infinite; }
@keyframes blink { 50% { opacity: 0.2; } }

/* ── game feel: small, springy, never busy ── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.card, .codebox.sug { animation: cardIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.card:nth-child(3n+1) { animation-delay: 0.05s; }
.card:nth-child(3n+2) { animation-delay: 0.13s; }
.card:nth-child(3n)   { animation-delay: 0.21s; }

@keyframes rowIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.suggest, .place { animation: rowIn 0.3s ease-out backwards; }
.suggests > *:nth-child(2), .places > *:nth-child(2) { animation-delay: 0.06s; }
.suggests > *:nth-child(3), .places > *:nth-child(3) { animation-delay: 0.12s; }
.suggests > *:nth-child(4), .places > *:nth-child(4) { animation-delay: 0.18s; }
.suggests > *:nth-child(n+5), .places > *:nth-child(n+5) { animation-delay: 0.24s; }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.pin { display: inline-block; animation: bob 2.4s ease-in-out infinite; }

.eta.isnow { animation: pulse 1s ease-in-out infinite; }

@keyframes starPop { 0% { transform: scale(0.6) rotate(-20deg); } 70% { transform: scale(1.35); } 100% { transform: scale(1); } }
.star.on { animation: starPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes numPop { 0% { transform: scale(1.35); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } }
.bignum { animation: numPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes dotIn { from { transform: scale(0); } to { transform: scale(1); } }
.stopdot .dot { animation: dotIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.stopdot .lbl { animation: rowIn 0.3s 0.1s ease-out backwards; }

.busno { transition: transform 0.15s; }
.card:active .busno { transform: rotate(-3deg) scale(1.06); }
.destname { animation: rowIn 0.3s ease-out backwards; }

/* ── destination sheet: a card over the dimmed signboard ── */
.sheetback { position: fixed; inset: 0; background: rgba(51, 33, 28, 0.38); z-index: 60; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 480px;
  height: 90vh; height: 90dvh;
  background: var(--cream); border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -6px 24px rgba(51, 33, 28, 0.25); z-index: 61;
  display: flex; flex-direction: column;  /* overflow stays visible: the ✕ hangs outside */
}
.sheethead {
  flex: none; display: flex; align-items: center; justify-content: center;
  padding: 0.5rem 0 0.4rem; touch-action: none;
}
.sheetbody { flex: 1; overflow-y: auto; padding: 0 0.8rem 2rem; overscroll-behavior: contain; }
.grabber { width: 46px; height: 5px; border-radius: 3px; background: var(--sand); }
.sheetclose {
  /* halfway OUTSIDE the sheet's top edge — reads as "this closes the card" */
  position: absolute; right: 0.9rem; top: -1.25rem; z-index: 3;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  font-size: 1.2rem; font-weight: 700; color: var(--ink);
  background: var(--pink-pale); box-shadow: var(--shadow);
}
.sheetup-enter-active { transition: transform 0.38s cubic-bezier(0.26, 0.9, 0.38, 1.02); }
.sheetup-leave-active { transition: transform 0.3s ease-in; }
.sheetup-enter-from, .sheetup-leave-to { transform: translateY(105%); }
.dim-enter-active, .dim-leave-active { transition: opacity 0.3s; }
.dim-enter-from, .dim-leave-to { opacity: 0; }
.screen.dimmed { transform: scale(0.96); opacity: 0.55; }
.screen { transition: transform 0.35s, opacity 0.35s; }

/* keep this block LAST: blanket animation kill-switch */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}