:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #382318;
  background: transparent;
  color-scheme: light;
  --orange: #ff6600;
  --orange-ink: #c74600;
  --top: 16px;
  --edge-left: 18px;
  --edge-right: 18px;
  --map-bottom-offset: 96px;
  --map-top-offset: 80px;
  --map-screen-height: 100vh;
  --map-safe-top: env(safe-area-inset-top, 0px);
  --map-safe-bottom: env(safe-area-inset-bottom, 0px);
  --map-top-space: max(var(--map-safe-top), var(--map-top-offset));
  --map-height: calc(var(--map-screen-height) + var(--map-top-space) + var(--map-safe-bottom) + var(--map-bottom-offset));
}
* { box-sizing: border-box; }
/* Keep the document scrollable so Safari can reveal content behind its chrome. */
html { width: 100%; min-height: 100%; margin: 0; overflow-x: clip; }
body {
  position: relative; width: 100%; min-height: var(--map-screen-height); margin: 0; overscroll-behavior-y: none;
  /* Preserve the loading backdrop without a solid root color for toolbar tint sampling. */
  background-image: linear-gradient(#f5f1ec, #f5f1ec);
}
@supports (height: 100lvh) {
  :root { --map-screen-height: 100lvh; }
}
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
button:focus-visible, a:focus-visible { outline: 3px solid #a33b00; outline-offset: 4px; }
[hidden] { display: none !important; }
/* Avoid a viewport-sized fixed layer at Safari's sampling edges; fix only the controls. */
.map-page { display: contents; }
/* Only the document-level map grows into the safe areas and under the browser toolbar. */
#map {
  position: absolute; z-index: 0; top: calc(0px - var(--map-top-space)); left: 0; width: 100%;
  height: var(--map-height);
  background: #f5f1ec;
}
/* iOS clips the top inset at document scroll position zero. Put the overscan
   inside the document; app.js scrolls past it once, while controls stay fixed. */
@supports (-webkit-touch-callout: none) {
  body { min-height: var(--map-height); padding-top: var(--map-top-space); }
  #map { top: 0; }
}
.top-bar {
  position: fixed; z-index: 3; top: var(--top); left: var(--edge-left); right: var(--edge-right);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; pointer-events: none;
}
#details { min-width: 0; }
.updated-label {
  margin: 0; padding: 12px 14px; border: 1px solid rgba(255,255,255,.8); border-radius: 16px;
  background: rgba(255,255,255,.94); color: #654633; box-shadow: 0 4px 20px rgba(71,40,13,.09);
  font-size: 12px; font-weight: 600; line-height: 18px; letter-spacing: .1px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.refresh-button {
  display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; padding: 0; margin-left: auto;
  border: 1px solid rgba(255,255,255,.85); border-radius: 50%; background: rgba(255,255,255,.96);
  color: var(--orange-ink); box-shadow: 0 4px 20px rgba(71,40,13,.13); pointer-events: auto;
}
.refresh-button:active { background: #fff1e6; }
.refresh-button:disabled svg { animation: refresh-spin 1s linear infinite; }
.app-dock {
  position: fixed; z-index: 3; left: var(--edge-left); right: var(--edge-right);
  bottom: 48px; display: flex; justify-content: center; pointer-events: none;
}
.open-app {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: min(100%, 280px); min-height: 48px;
  padding: 12px 20px; border: 1px solid rgba(255,255,255,.3); border-radius: 24px;
  background: var(--orange); color: #381b00; box-shadow: 0 8px 26px rgba(179,70,0,.26), 0 2px 6px rgba(86,41,4,.08);
  font-size: 15px; font-weight: 750; line-height: 22px; letter-spacing: .2px; text-decoration: none; pointer-events: auto;
}
.open-app svg { width: 18px; height: 18px; flex-shrink: 0; }
.open-app:active { background: #f45c00; transform: translateY(1px); }
.wechat-tip {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 14px); width: min(100%, 320px);
  margin: 0 auto; padding: 16px 46px 16px 16px; border-radius: 18px; background: #fff;
  color: #654633; box-shadow: 0 5px 24px rgba(71,40,13,.18); pointer-events: auto;
}
.wechat-tip::after {
  content: ""; position: absolute; left: calc(50% - 7px); bottom: -6px; width: 14px; height: 14px;
  background: #fff; transform: rotate(45deg); border-radius: 2px;
}
.wechat-tip p { margin: 0; font-size: 14px; line-height: 1.6; }
.wechat-tip-close {
  position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--orange-ink); cursor: pointer;
}
.wechat-tip-close:active { background: #fff1e6; }
.wechat-tip-close:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: -4px; }
.profile-marker { width: 72px; height: 72px; overflow: visible; pointer-events: none; }
.avatar-ripple {
  position: absolute; inset: 0; z-index: 0; border: 1.5px solid rgba(255,102,0,.5); border-radius: 50%;
  background: rgba(255,102,0,.04); opacity: 0; animation: avatar-ripple 3.6s linear infinite;
}
.avatar-ripple:nth-child(2) { animation-delay: -1.2s; }
.avatar-ripple:nth-child(3) { animation-delay: -2.4s; }
.avatar-face {
  position: relative; z-index: 1; width: 72px; height: 72px; overflow: hidden; border: 4px solid #fff; border-radius: 50%;
  background: var(--orange); box-shadow: 0 5px 18px rgba(77,35,7,.25), 0 1px 4px rgba(77,35,7,.15);
}
.avatar-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: #381b00; font-size: 23px; font-weight: 750; }
.marker-name {
  position: absolute; z-index: 2; top: 84px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(240px, calc(100vw - 48px)); margin: 0; padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.9); border-radius: 10px; background: rgba(255,255,255,.96);
  color: #472c1c; box-shadow: 0 3px 14px rgba(71,40,13,.12); font-size: 13px; font-weight: 700; line-height: 18px;
  text-align: center; overflow-wrap: anywhere;
}
.empty-state {
  position: fixed; z-index: 2; top: 44%; left: 50%; transform: translate(-50%,-50%);
  width: min(320px, calc(100% - 48px)); text-align: center;
}
.loading-icon {
  display: block; width: 80px; height: 80px; margin: 0 auto 20px; border-radius: 20px; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(71,40,13,.12));
}
.empty-state h1 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.6px; }
.empty-state p { margin: 0; color: #775b48; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.map-feedback, .notice {
  position: fixed; z-index: 3; left: 50%; transform: translateX(-50%); width: max-content;
  max-width: calc(100% - 36px); margin: 0; padding: 11px 15px; border-radius: 14px;
  background: rgba(255,255,255,.96); box-shadow: 0 4px 20px rgba(71,40,13,.1); color: #77513a;
  font-size: 12px; line-height: 1.6; pointer-events: auto;
}
.map-feedback { top: calc(var(--top) + 62px); display: flex; align-items: center; gap: 12px; }
.map-feedback p { margin: 0; }
.map-feedback button { flex-shrink: 0; border: 0; padding: 6px 8px; border-radius: 8px; background: #fff0e5; color: var(--orange-ink); font-size: 12px; font-weight: 600; }
.notice { bottom: 122px; }
/* Keep the separate credits layer below the fixed viewport. */
.map-credits {
  position: fixed; z-index: 4; right: 12px; top: calc(100% + var(--map-bottom-offset)); max-width: calc(100% - 24px);
  border: 1px solid rgba(255,255,255,.85); border-radius: 16px; background: rgba(255,255,255,.94);
  color: #654633; box-shadow: 0 3px 14px rgba(71,40,13,.12);
}
.map-credits summary {
  float: right; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; list-style: none; cursor: pointer; color: var(--orange-ink); font-size: 21px;
}
.map-credits summary::-webkit-details-marker { display: none; }
.map-credits summary:focus-visible { outline: 3px solid #a33b00; outline-offset: 2px; }
.map-credits[open] { padding-left: 10px; }
.credits-content { padding: 8px 38px 8px 0; font-size: 11px; line-height: 16px; overflow-wrap: anywhere; }
.credits-content a { color: inherit; }
@keyframes avatar-ripple { 0% { transform: scale(.95); opacity: .65; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .avatar-ripple { animation: none; }
  .avatar-ripple:first-child { transform: scale(1.2); opacity: .25; }
  .refresh-button:disabled svg { animation: none; opacity: .45; }
}