/* ============================================================
   Where is Dad?  —  looks
   Big, bright, rounded. Built for a wall-mounted iPad.
   ============================================================ */
:root {
  --sky: #bfe9ff;
  --water: #8fd3ff;
  --ink: #2d2a32;
  --paper: #fffaf0;
  --road: #5b5b6b;
  --yellow: #ffd93d;
  --red: #ff6b6b;
  --green: #6bd47a;
  --blue: #4cb5ff;
  --purple: #b48bff;
  --orange: #ffb347;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Fredoka", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  color: var(--ink);
  background: var(--sky);
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- layout ---------- */
#app {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  padding: 10px 14px 12px;
  gap: 8px;
}
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px;
}
header h1 { margin: 0; font-size: clamp(22px, 3.4vw, 40px); font-weight: 700; letter-spacing: .5px; }
header h1 span { color: var(--red); }
#greeting { font-size: clamp(16px, 2vw, 24px); font-weight: 600; color: #5a5566; }
#clock { font-size: clamp(18px, 2.4vw, 28px); font-weight: 600; background: var(--paper); padding: 4px 14px; border-radius: 999px; border: 3px solid var(--ink); }

#map-wrap {
  flex: 1 1 auto; min-height: 0;
  background: var(--water);
  border: 4px solid var(--ink);
  border-radius: 28px;
  overflow: hidden; position: relative;
  box-shadow: 0 8px 0 rgba(0,0,0,.12);
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.35) 0 6px, transparent 7px),
                    radial-gradient(circle at 70% 60%, rgba(255,255,255,.3) 0 5px, transparent 6px),
                    radial-gradient(circle at 45% 85%, rgba(255,255,255,.3) 0 5px, transparent 6px);
  background-size: 260px 200px, 340px 260px, 300px 220px;
}
#map { width: 100%; height: 100%; display: block; --kz: 1; }   /* --kz shrinks labels/strokes while zoomed in */

/* ---------- map art ---------- */
.state { stroke: var(--ink); stroke-width: calc(4px / var(--kz)); stroke-linejoin: round; cursor: pointer; transition: opacity .5s; }
.state.dim { opacity: .55; }
.state-name { font-weight: 700; font-size: calc(var(--fs) / var(--kz)); fill: rgba(45,42,50,.55); text-anchor: middle; letter-spacing: 3px; pointer-events: none; }
.lake { fill: var(--water); stroke: var(--ink); stroke-width: calc(3px / var(--kz)); pointer-events: none; }
.sea-name { font-weight: 700; font-size: calc(var(--fs) / var(--kz)); fill: rgba(255,255,255,.85); text-anchor: middle; letter-spacing: 4px; pointer-events: none; }
.road-edge { fill: none; stroke: var(--ink); stroke-width: calc(16px / var(--kz)); stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.road { fill: none; stroke: var(--road); stroke-width: calc(11px / var(--kz)); stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.road-dash { fill: none; stroke: var(--yellow); stroke-width: calc(2.5px / var(--kz)); stroke-dasharray: 10 12; stroke-linejoin: round; pointer-events: none; }
.trail { fill: none; stroke: var(--orange); stroke-width: calc(5px / var(--kz)); stroke-dasharray: 1 10; stroke-linecap: round; opacity: .9; pointer-events: none; }
.landmark { pointer-events: none; }
.landmark .pin { r: calc(var(--r) / var(--kz)); }
.lm-emoji, .lm-name { font-size: calc(var(--fs) / var(--kz)); }

.landmark .pin { fill: var(--red); stroke: var(--ink); stroke-width: calc(3px / var(--kz)); }
.landmark.minor .pin { fill: #fff; }
.landmark .lm-name { font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: calc(6px / var(--kz)); stroke-linejoin: round; }
.landmark.minor .lm-name { font-weight: 600; fill: #4a4657; }
.landmark.minor .lm-emoji { opacity: .95; }
.landmark.active .pin { fill: var(--yellow); animation: pulse 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.landmark.active .lm-emoji { animation: hop .9s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.landmark.active .lm-name { fill: #c0392b; }

.doodle { pointer-events: none; font-size: calc(var(--fs) / var(--kz)); }
.doodle.bob { animation: bob 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.doodle.bob.slow { animation-duration: 5s; }
.doodle.sun { animation: spin 40s linear infinite; transform-box: fill-box; transform-origin: center; }
.doodle.cloud { opacity: .95; animation: drift 60s linear infinite; }
.doodle.cloud.c2 { animation-duration: 85s; animation-delay: -30s; }
.doodle.cloud.c3 { animation-duration: 70s; animation-delay: -50s; }

/* ---------- truck ---------- */
.truck-pos { transition: transform 3s linear; }
.truck .tap-target { pointer-events: all; cursor: pointer; }
.truck-hop { transform-box: fill-box; transform-origin: 50% 100%; }
.truck-hop.hop { animation: truckHop .75s cubic-bezier(.25,1.5,.5,1) both; }
@keyframes truckHop {
  0%   { transform: translateY(0) scale(1, 1); }
  15%  { transform: translateY(0) scale(1.15, .8); }
  45%  { transform: translateY(-48px) scale(.92, 1.12); }
  70%  { transform: translateY(0) scale(1.08, .9); }
  85%  { transform: translateY(-8px) scale(1, 1); }
  100% { transform: translateY(0) scale(1, 1); }
}
.truck .paint { fill: #ffffff; stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
.truck .shadow { fill: rgba(0,0,0,.18); }
.truck .puff { fill: rgba(255,255,255,.85); stroke: rgba(45,42,50,.35); stroke-width: 2; opacity: 0; }
.truck.moving .puff { animation: puff 1.4s ease-out infinite; }
.truck.moving .puff.p2 { animation-delay: .45s; }
.truck.moving .puff.p3 { animation-delay: .9s; }
.truck.moving .body-bounce { animation: jiggle .35s ease-in-out infinite; }
.truck.moving .spokes { animation: spin .5s linear infinite; transform-box: fill-box; transform-origin: center; }
body.stale .truck { opacity: .75; }
body.stale .truck .paint { fill: #eef0f3; }

/* ---------- dashboard ---------- */
#dash {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px 14px;
}
#progress { grid-column: 1 / -1; }
.card {
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 22px;
  padding: 12px 18px;
  box-shadow: 0 6px 0 rgba(0,0,0,.12);
}
#where { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
#headline { font-size: clamp(24px, 3.6vw, 46px); font-weight: 700; line-height: 1.12; margin: 0; }
#subline { font-size: clamp(16px, 2vw, 26px); font-weight: 600; color: #5a5566; margin: 6px 0 0; }
#fact { font-size: clamp(14px, 1.7vw, 22px); margin: 8px 0 0; color: #3f3b4a; background: #fff3c4; border-radius: 12px; padding: 6px 12px; display: inline-block; }

#stats { display: grid; grid-template-columns: 0.8fr 1.3fr 1fr; gap: 8px; padding: 10px 12px; align-items: center; }
.stat { text-align: center; }
.stat .v { font-size: clamp(18px, 2.2vw, 30px); font-weight: 700; line-height: 1.05; overflow-wrap: anywhere; }
.stat .k { font-size: clamp(11px, 1.2vw, 15px); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #7a7588; margin-top: 2px; }
.stat .v small { font-size: 60%; font-weight: 600; }
#next-name { color: #1d76c9; }
#next-miles { display:block; font-size: 55%; font-weight: 600; color: #5a5566; }

#progress { padding: 10px 18px 8px; }
#pb { position: relative; height: 22px; background: var(--road); border: 3px solid var(--ink); border-radius: 999px; margin: 22px 26px 6px; }
#pb::after { content: ""; position: absolute; inset: 7px 6px; border-top: 3px dashed var(--yellow); }
#pb-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); border-radius: 999px; transition: width 3s linear; }
#pb-marks { position: absolute; inset: 0; }
.pb-mark { position: absolute; top: -30px; transform: translateX(-50%); font-size: 20px; line-height: 1; }
#pb-truck { position: absolute; top: -20px; transform: translateX(-50%); font-size: 30px; line-height: 1; transition: left 3s linear; filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)); }
#pb-text { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: clamp(12px, 1.4vw, 17px); color: #5a5566; white-space: nowrap; }
.pb-mid { color: #8a8598; }
#pb-text b { color: var(--ink); }

/* ---------- little badges ---------- */
#offline, #demo-badge {
  position: absolute; top: 12px; left: 16px; z-index: 5;
  background: var(--yellow); border: 3px solid var(--ink); border-radius: 999px;
  padding: 4px 12px; font-weight: 700; font-size: 15px;
}
#demo-badge { background: var(--purple); color: #fff; }

/* ---------- big-map button + map-only mode ---------- */
.map-btn {
  position: absolute; left: 14px; bottom: 14px; z-index: 6;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 0 5px 0 rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .15s ease;
}
.map-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.map-btn .ico-collapse { display: none; }
body.fullmap .map-btn .ico-expand { display: none; }
body.fullmap .map-btn .ico-collapse { display: block; }
body.fullmap .map-btn { background: var(--yellow); }

body.fullmap #app { display: block; padding: 0; gap: 0; height: 100vh; height: 100dvh; }
body.fullmap header, body.fullmap #dash { display: none; }
body.fullmap #map-wrap {
  width: 100%; height: 100%; min-height: 0; flex: none; aspect-ratio: auto;
  border: 0; border-radius: 0; box-shadow: none;
}
body.fullmap #offline, body.fullmap #demo-badge { top: max(12px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); }
body.fullmap .map-btn { left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); }
body.fullmap .pill-btn { right: max(16px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); }
body.fullmap #state-pill { bottom: max(16px, env(safe-area-inset-bottom)); }

/* ---------- state close-up ---------- */
.pill-btn {
  position: absolute; right: 16px; top: 12px; z-index: 6;
  background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px;
  padding: 8px 16px; font: inherit; font-weight: 700; font-size: 17px; cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.15); -webkit-tap-highlight-color: transparent;
}
#state-pill {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 6;
  max-width: min(92%, 760px); background: var(--paper); border: 4px solid var(--ink); border-radius: 22px;
  padding: 10px 18px; font-size: clamp(14px, 1.9vw, 22px); font-weight: 600; text-align: center;
  box-shadow: 0 6px 0 rgba(0,0,0,.15); animation: bannerIn .5s cubic-bezier(.2,1.4,.4,1) both;
}
#state-pill b { font-size: 115%; }
#state-pill b::after { content: " · "; font-weight: 400; color: #5a5566; }
#sp-emoji { font-size: 130%; }

/* ---------- state-line banner + sound pill ---------- */
#sound-pill {
  position: absolute; right: 16px; bottom: 16px; z-index: 6;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 999px;
  padding: 4px 12px; font-weight: 700; font-size: 15px; animation: wiggle 2s ease-in-out infinite;
}
#state-banner {
  position: absolute; left: 50%; top: 18%; transform: translate(-50%, 0); z-index: 7;
  background: var(--yellow); border: 5px solid var(--ink); border-radius: 28px;
  padding: 14px 34px; text-align: center; box-shadow: 0 8px 0 rgba(0,0,0,.18);
  animation: bannerIn .5s cubic-bezier(.2,1.4,.4,1) both;
  pointer-events: none;
}
#state-banner .sb-big { font-size: clamp(28px, 5vw, 56px); font-weight: 700; line-height: 1.05; }
#state-banner .sb-small { font-size: clamp(18px, 3vw, 34px); font-weight: 600; margin-top: 4px; }
#state-banner .sb-small b { color: #c0392b; }
#state-banner.out { animation: bannerOut .4s ease-in both; }
@keyframes bannerIn { from { transform: translate(-50%, -40px) scale(.6); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes bannerOut { to { transform: translate(-50%, -30px) scale(.8); opacity: 0; } }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }

/* ---------- confetti ---------- */
#confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 10; }
#confetti i { position: absolute; top: -20px; width: 12px; height: 18px; border-radius: 3px; opacity: 0; animation: fall 6s linear infinite; }
body.arrived #headline { color: #c0392b; animation: party 1s ease-in-out infinite; }

/* ---------- animations ---------- */
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes hop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.5); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: translateX(-80px); } to { transform: translateX(160px); } }
@keyframes jiggle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes puff { 0% { opacity: .9; transform: translate(0,0) scale(.6); } 100% { opacity: 0; transform: translate(26px,-18px) scale(1.5); } }
@keyframes fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: .8; } }
@keyframes party { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* ---------- portrait iPad ---------- */
@media (orientation: portrait) {
  #map-wrap { flex: 0 0 auto; aspect-ratio: 1560 / 730; }
  #dash { flex: 1 1 auto; min-height: 0; grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; }
  #where { padding: 20px 24px; }
  #headline { font-size: clamp(28px, 6.5vw, 64px); }
  #subline { font-size: clamp(18px, 3vw, 30px); }
  #fact { font-size: clamp(16px, 2.4vw, 26px); }
  #stats { padding: 14px 12px; }
  .stat .v { font-size: clamp(22px, 3.4vw, 36px); }
  #progress { padding: 14px 18px 12px; }
}

/* ---------- wide but short screens (phone in landscape, small browser window) ---------- */
@media (orientation: landscape) and (max-height: 640px) {
  #app { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 6px 10px; padding: 6px 10px 8px; }
  header { grid-column: 1 / -1; }
  header h1 { font-size: 22px; }
  #greeting { font-size: 15px; }
  #clock { font-size: 17px; padding: 2px 10px; border-width: 2px; }
  #map-wrap { min-height: 0; border-radius: 18px; border-width: 3px; }
  #dash { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto auto; gap: 6px; min-height: 0; }
  #progress { grid-column: auto; }
  .card { padding: 6px 12px; border-radius: 14px; border-width: 3px; box-shadow: 0 4px 0 rgba(0,0,0,.12); }
  #where { overflow: hidden; }
  #headline { font-size: clamp(17px, 5.2vh, 30px); }
  #subline { font-size: clamp(12px, 3.4vh, 18px); margin-top: 3px; }
  #fact { font-size: clamp(11px, 3vh, 15px); padding: 3px 8px; margin-top: 4px; }
  #stats { grid-template-columns: 0.8fr 1.4fr 1fr; padding: 6px 8px; gap: 4px; }
  .stat .v { font-size: clamp(14px, 4vh, 20px); }
  .stat .k { font-size: 10px; letter-spacing: .5px; }
  #next-miles { font-size: 60%; }
  #pb { height: 14px; margin: 18px 14px 4px; border-width: 2px; }
  #pb::after { inset: 4px 5px; border-top-width: 2px; }
  .pb-mark { font-size: 14px; top: -20px; }
  #pb-truck { font-size: 20px; top: -14px; }
  #pb-text { font-size: 11px; gap: 6px; }
  .pb-mid { display: none; }
}

/* ---------- narrow phones in portrait ---------- */
@media (orientation: portrait) and (max-width: 520px) {
  #state-pill { display: none !important; }   /* the map is too small for it here */
  #app { padding: 8px 8px 10px; gap: 8px; }
  header { gap: 6px; }
  header h1 { font-size: 20px; }
  #greeting { display: none; }
  #clock { font-size: 15px; padding: 2px 10px; border-width: 2px; }
  #dash, .card { min-width: 0; }
  .card { padding: 10px 14px; border-radius: 16px; border-width: 3px; }
  #where { padding: 14px 16px; }
  #headline { font-size: clamp(20px, 6.5vw, 30px); }
  #subline { font-size: clamp(14px, 4.2vw, 18px); }
  #fact { font-size: clamp(12px, 3.6vw, 15px); }
  #stats { grid-template-columns: 0.8fr 1.4fr 1fr; gap: 4px; padding: 8px 6px; }
  .stat .v { font-size: clamp(15px, 4.6vw, 22px); }
  .stat .k { font-size: 9px; letter-spacing: .5px; }
  #pb { height: 14px; margin: 18px 12px 4px; border-width: 2px; }
  #pb::after { inset: 4px 5px; border-top-width: 2px; }
  .pb-mark { font-size: 14px; top: -20px; }
  #pb-truck { font-size: 20px; top: -14px; }
  #pb-text { font-size: 11px; white-space: normal; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; }
  .pb-mid { width: 100%; text-align: center; order: 3; }
}