:root {
  --ink: #173436;
  --paper: #f3ecdc;
  --paper-bright: #fffdf7;
  --red: #c94b33;
  --gold: #c9912c;
  --line: rgba(23, 52, 54, .16);
  --shadow: 0 24px 70px rgba(23, 52, 54, .18);
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(201,145,44,.18), transparent 28%),
    linear-gradient(145deg, #f8f3e7, #dfe9df);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}
button, a { font: inherit; }
[hidden] { display: none !important; }
.pure-shell { height: 100dvh; padding: max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.pure-topbar {
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(102px, 1fr) auto minmax(102px, 1fr);
  align-items: center;
  gap: 12px;
}
.back-link, #fit-map {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255,253,247,.84);
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(23,52,54,.08);
}
.back-link { justify-self: start; display: inline-flex; align-items: center; }
#fit-map { justify-self: end; cursor: pointer; }
.pure-title { text-align: center; }
.pure-title span { color: var(--red); font: 800 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: .16em; }
.pure-title h1 { margin: 5px 0 0; font: 700 clamp(18px, 3vw, 28px)/1.1 Georgia, "Noto Serif SC", serif; }
.map-frame {
  min-height: 0;
  position: relative;
  overflow: hidden;
  border: 10px solid rgba(255,253,247,.9);
  border-radius: 28px;
  background: #e8dfcd;
  box-shadow: var(--shadow);
}
.map-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  border: 1px solid rgba(23,52,54,.12);
  border-radius: 18px;
}
#pure-map { width: 100%; height: 100%; min-height: 420px; background: #e8dfcd; }
.paper-tab, .gesture-hint {
  position: absolute;
  z-index: 600;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(23,52,54,.2);
}
.paper-tab { top: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(201,75,51,.94); font-size: 12px; font-weight: 900; letter-spacing: .04em; }
.gesture-hint { bottom: 14px; padding: 9px 15px; border-radius: 12px; background: rgba(23,52,54,.9); font-size: 12px; }
.leaflet-container { font-family: inherit; touch-action: pan-x pan-y; }
.leaflet-control-zoom a { color: var(--ink) !important; }
.access-message { min-height: 100dvh; padding: 24px; display: grid; place-items: center; background: var(--paper); }
.access-message > div { width: min(420px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper-bright); box-shadow: var(--shadow); text-align: center; }
.access-message strong { font: 700 26px/1.2 Georgia, "Noto Serif SC", serif; }
.access-message p { color: #607071; line-height: 1.7; }
.access-message a { display: inline-flex; min-height: 44px; align-items: center; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 800; }
@media (max-width: 620px) {
  .pure-shell { padding-inline: 8px; gap: 8px; }
  .pure-topbar { min-height: 58px; grid-template-columns: 86px 1fr 86px; gap: 6px; }
  .back-link, #fit-map { min-height: 40px; padding: 8px 9px; border-radius: 12px; font-size: 12px; }
  .pure-title h1 { font-size: 16px; }
  .pure-title span { font-size: 8px; }
  .map-frame { border-width: 6px; border-radius: 20px; }
  #pure-map { min-height: 360px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }