:root {
  --cream: #f8f1e7;
  --cream-2: #f1e7da;
  --beige-line: #d9c8b4;
  --mustard: #b8872e;
  --burgundy: #6c2838;
  --ink: #3d2d23;
  --ink-soft: #715b4c;
  --olive: #9f9a77;
  --terracotta: #bb7b61;
  --dusty-rose: #c59d9f;
  --panel-bg: rgba(248, 241, 231, 0.94);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Jost", "Avenir Next", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--cream);
}

.app {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.hud {
  position: absolute;
  z-index: 10;
  top: 1rem;
  left: 1rem;
  width: min(24rem, calc(100% - 2rem));
  background: var(--panel-bg);
  border-radius: 1rem;
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--beige-line);
}

.hud h1 {
  margin: 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hud-subtitle {
  margin: 0;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--burgundy);
}

.hud-controls {
  margin: 0.16rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.mode-switch {
  margin-top: 0.45rem;
  display: inline-flex;
  gap: 0.3rem;
  background: #f6ecdf;
  border: 1px solid var(--beige-line);
  border-radius: 999px;
  padding: 0.18rem;
}

.mode-button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  padding: 0.2rem 0.6rem;
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
}

.mode-button.active {
  background: #fff5e1;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.viewport {
  position: absolute;
  inset: 0 24rem 0 0;
  overflow: hidden;
  touch-action: none;
  perspective: 1100px;
}

.world {
  position: absolute;
  width: 1600px;
  height: 1050px;
  transform-origin: top left;
  transform-style: preserve-3d;
  filter: drop-shadow(0 36px 42px rgba(96, 72, 52, 0.18));
}

.terrain {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--mustard) 13%, transparent) 0 140px, transparent 141px),
    radial-gradient(circle at 70% 24%, color-mix(in srgb, var(--olive) 15%, transparent) 0 130px, transparent 131px),
    radial-gradient(circle at 37% 77%, color-mix(in srgb, var(--terracotta) 16%, transparent) 0 120px, transparent 121px),
    radial-gradient(circle at 79% 74%, color-mix(in srgb, var(--dusty-rose) 15%, transparent) 0 145px, transparent 146px),
    linear-gradient(180deg, #f9f0e4 0%, var(--cream-2) 100%);
  border-radius: 34px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    inset 0 -12px 22px rgba(171, 142, 113, 0.14);
}

.mobile-tip {
  display: none;
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  z-index: 6;
  width: min(28rem, calc(100% - 2rem));
  padding: 0.5rem 0.7rem;
  border-radius: 0.75rem;
  border: 1px solid var(--beige-line);
  background: rgba(248, 241, 231, 0.9);
  box-shadow: 0 8px 14px rgba(90, 65, 37, 0.14);
  text-align: center;
  pointer-events: none;
}

.mobile-tip strong {
  display: block;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 1.05rem;
  color: var(--ink);
}

.mobile-tip span {
  display: block;
  font-size: 0.76rem;
  color: var(--ink-soft);
}

.decor-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tree {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 94px;
  filter: drop-shadow(0 14px 12px rgba(90, 65, 37, 0.22));
}

.tree-shadow {
  position: absolute;
  left: 8px;
  bottom: 10px;
  width: 48px;
  height: 16px;
  border-radius: 50%;
  background: rgba(115, 81, 45, 0.18);
}

.tree-trunk {
  position: absolute;
  left: 29px;
  bottom: 18px;
  width: 7px;
  height: 24px;
  border-radius: 3px;
  background: linear-gradient(180deg, #8f6541 0%, #6a482b 100%);
}

.tree-crown {
  position: absolute;
  left: 11px;
  bottom: 34px;
  width: 42px;
  height: 52px;
  border-radius: 7px;
  transform: skewY(-10deg) rotate(-6deg);
  transform-origin: 50% 100%;
  background: linear-gradient(135deg, #d8ef7d 0%, #c0d764 70%, #a4bf4f 100%);
  box-shadow:
    inset -8px -10px 0 rgba(96, 126, 46, 0.18),
    inset 4px 4px 0 rgba(255, 255, 255, 0.2);
}

.tree.tone-olive .tree-crown {
  background: linear-gradient(135deg, #c9dd7b 0%, #aebe60 72%, #93a54e 100%);
}

.tree.tone-mustard .tree-crown {
  background: linear-gradient(135deg, #e0db87 0%, #c8bd58 72%, #b39f3f 100%);
}

.route-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.route-track path.route-line {
  fill: none;
  stroke: color-mix(in srgb, var(--mustard) 42%, var(--beige-line));
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.84;
  filter: drop-shadow(0 8px 8px rgba(149, 110, 58, 0.2));
}

.route-track circle.route-stop {
  fill: #fff6e8;
  stroke: var(--mustard);
  stroke-width: 2;
  filter: drop-shadow(0 5px 6px rgba(132, 95, 48, 0.23));
}

.poi {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  border: 1px solid var(--beige-line);
  background: linear-gradient(180deg, #fffaf2 0%, #f7ecdd 100%);
  box-shadow:
    0 14px 22px rgba(101, 77, 58, 0.16),
    inset 0 2px 0 rgba(255, 255, 255, 0.8);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0.7rem;
}

.poi strong {
  display: block;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 1.2rem;
  line-height: 0.96;
  color: var(--ink);
  margin-bottom: 0.16rem;
}

.poi span {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.poi.active {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: var(--mustard);
  box-shadow: 0 14px 28px rgba(130, 93, 37, 0.22);
}

.poi.tap-pop {
  animation: poi-pop 260ms cubic-bezier(0.2, 0.86, 0.32, 1);
}

@keyframes poi-pop {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  45% {
    transform: translate(-50%, -50%) scale(1.18);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.car {
  position: absolute;
  width: 44px;
  height: 22px;
  border-radius: 12px;
  background: linear-gradient(180deg, #d4a146 0%, var(--mustard) 60%, #9b752d 100%);
  border: 1px solid #8e6923;
  transform: translate(-50%, -50%);
  box-shadow:
    0 10px 15px rgba(80, 53, 28, 0.3),
    inset 0 2px 0 rgba(255, 240, 211, 0.6);
}

.car::before {
  content: "";
  position: absolute;
  left: 29px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 2px 4px 4px 2px;
  background: linear-gradient(135deg, #fff6e8 0%, #ecd7ba 100%);
  transform: rotate(45deg) skew(-4deg, -4deg);
}

.car::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 7px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, #7a5a2b 0%, #543a18 100%);
}

.panel {
  position: absolute;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  width: min(22rem, calc(100% - 2rem));
  background: var(--panel-bg);
  color: var(--ink);
  border-radius: 1rem;
  padding: 0.9rem;
  overflow: auto;
  z-index: 11;
  border: 1px solid var(--beige-line);
  display: flex;
  flex-direction: column;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
  border-bottom: 1px solid var(--beige-line);
  padding-bottom: 0.45rem;
}

.panel h2 {
  margin: 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 600;
}

.chip {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: #f6ead7;
  border: 1px solid var(--beige-line);
  color: var(--ink-soft);
}

#panel-description {
  margin: 0.55rem 0 0.7rem;
  color: var(--burgundy);
  line-height: 1.35;
  font-style: italic;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 1.08rem;
}

.panel-items {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.34rem;
  font-size: 0.89rem;
}

.panel-items li::marker {
  color: var(--mustard);
}

.quick-nav {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--beige-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.36rem;
}

.quick-nav button {
  border: 1px solid var(--beige-line);
  border-radius: 999px;
  padding: 0.32rem 0.6rem;
  font: inherit;
  font-size: 0.76rem;
  color: var(--ink-soft);
  background: #fbf3e8;
  cursor: pointer;
}

.quick-nav button:hover {
  border-color: var(--mustard);
  color: var(--ink);
}

.contact {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--beige-line);
}

.contact a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.contact a:hover {
  color: var(--mustard);
}

@media (max-width: 940px) {
  .viewport {
    inset: 0;
  }

  .panel {
    left: 0.55rem;
    right: 0.55rem;
    top: auto;
    bottom: 0.55rem;
    width: auto;
    max-height: 31vh;
    padding: 0.68rem;
    backdrop-filter: blur(4px);
  }

  .hud {
    max-width: calc(100% - 1.1rem);
    left: 0.55rem;
    top: 0.55rem;
    padding: 0.58rem 0.68rem;
  }

  .hud h1 {
    font-size: 1.62rem;
  }

  .hud-subtitle,
  .hud-controls {
    font-size: 0.74rem;
  }

  .mode-button {
    padding: 0.28rem 0.72rem;
    font-size: 0.8rem;
  }

  .quick-nav button {
    padding: 0.42rem 0.72rem;
    font-size: 0.82rem;
  }

  .panel-items {
    font-size: 0.84rem;
    gap: 0.28rem;
  }

  .contact a {
    font-size: 0.72rem;
  }

  .poi {
    width: 6.2rem;
    height: 6.2rem;
  }

  .mobile-tip {
    display: block;
  }
}