/* 薄云仅托住问候文字：高于地图点位，低于可点击的文字与按钮。 */
/* 仅折射地图及其中的留声点；欢迎语、表头、分类、按钮都是该层之外的兄弟元素。 */
.map-viewport.water-refracting { filter: url(#hearby-water-refraction); }
@media (prefers-reduced-motion: reduce) { .map-viewport.water-refracting { filter: none; } }
/* 不再叠加跨越UI的旧水纹带，发现提示仍独立显示。 */
.discovery-water { display: none; }
/* 品牌标志使用独立矢量图，外框保持正方形，避免旧容器旋转和不等比变形。 */
.brand .brand-seal { width: 36px; height: 36px; flex: 0 0 36px; transform: none; border: 0; border-radius: 0; }
.brand-seal img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 760px) { .brand .brand-seal { width: 30px; height: 30px; flex-basis: 30px; } }
/* 隔离百度内部拖动遮罩的 z-index，地图手势层不能越过应用操作区。 */
.map-viewport { isolation: isolate; }
#baidu-map { z-index: 0; }
.map-viewport > .map-art { z-index: 1; }
/* 参考用户选定排版：问候 → 附近声音 → 录音按钮 → 轻量标语。 */
@media (max-width: 760px) {
  .map-view { --map-safe-bottom: env(safe-area-inset-bottom, 0px); min-height: min(730px, 100svh); }
  .map-view .map-bottom-center {
    bottom: calc(44px + var(--map-safe-bottom));
    width: calc(100% - 48px);
    gap: 14px;
    isolation: isolate;
  }
  .map-bottom-center .leave-voice-button {
    min-height: 60px;
    padding: 16px 24px;
    border-radius: 32px;
    box-shadow: 0 4px 16px #82789118;
  }
  .map-bottom-center > span { font-size: 10px; line-height: 16px; letter-spacing: .6px; color: #637660; white-space: normal; }
  .map-view .map-intro { bottom: calc(164px + var(--map-safe-bottom)); left: 24px; }
  .map-view .map-controls { bottom: calc(192px + var(--map-safe-bottom)); }
  .map-view .map-footnote {
    top: 150px;
    bottom: auto;
    left: 24px;
    max-width: calc(100% - 48px);
    padding: 2px 4px;
    font-size: 7px;
    line-height: 12px;
    gap: 4px;
  }
  .map-view .map-viewport { bottom: var(--map-safe-bottom); }
}
/* 开启时与地点信息左对齐，形成一组工具，避免右上方悬浮标签。 */
.map-filters[hidden] { display: none; }
.map-topline { align-items: flex-start; flex-direction: column; gap: 10px; }
.map-topline .map-filters { position: static; margin-top: 10px; width: max-content; max-width: 100%; box-shadow: none; }
.map-view.categories-enabled .map-footnote { top: 204px; }
.map-preferences { margin-top: 24px; padding: 20px 0; border-block: 1px solid #dce3da; }
.map-preferences h2 { margin: 0 0 16px; font-size: 13px; font-weight: 500; color: #415e4b; }
.preference-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 48px; cursor: pointer; }
.preference-row strong { font-size: 13px; font-weight: 400; color: #415e4b; }
.preference-row small { display: block; font-size: 11px; line-height: 1.7; margin-top: 6px; color: #637660; }
.preference-row input { appearance: none; flex: 0 0 44px; width: 44px; height: 28px; border-radius: 16px; background: #d9dfd6; position: relative; cursor: pointer; transition: background .2s; }
.preference-row input::after { content: ""; position: absolute; width: 20px; height: 20px; top: 4px; left: 4px; border-radius: 50%; background: #fffefa; transition: transform .2s; }
.preference-row input:checked { background: #718579; }
.preference-row input:checked::after { transform: translateX(16px); }
.preference-row input:focus-visible { outline: 2px solid #415e4b; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .preference-row input, .preference-row input::after { transition: none; } }
.map-intro { isolation: isolate; }
.map-intro > :not(.greeting-cloud) { position: relative; z-index: 1; }
.hide-map-greeting .greeting-cloud,
.hide-map-greeting #map-greeting,
.hide-map-greeting #map-greeting-caption,
.hide-map-greeting .intro-divider { display: none !important; animation: none !important; }
.hide-map-greeting .map-intro { width: auto; }
.real-map .map-intro { text-shadow: none; }
.greeting-cloud {
  position: absolute;
  z-index: 0;
  inset: -48px -68px -32px -76px;
  pointer-events: none;
  background: radial-gradient(ellipse at 42% 48%, #f7f5eff0 0%, #f7f5efc9 31%, #f7f5ef69 55%, #f7f5ef00 73%);
}
.greeting-cloud i {
  position: absolute;
  inset: 3% 0 8%;
  border-radius: 43% 57% 64% 36% / 51% 44% 56% 49%;
  background: radial-gradient(ellipse at 48% 50%, #f7f5efba 0%, #f7f5ef78 34%, #f7f5ef00 69%);
  animation: greeting-cloud-drift 26s ease-in-out infinite alternate;
}
.greeting-cloud i:nth-child(2) {
  inset: 22% -8% -3% 8%;
  opacity: .65;
  background: radial-gradient(ellipse at 40% 48%, #e9efe4a3 0%, #f7f5ef85 32%, #f7f5ef00 68%);
  animation-duration: 34s;
  animation-delay: -13s;
  animation-direction: alternate-reverse;
}
.greeting-cloud i:nth-child(3) {
  inset: -8% 9% 23% -9%;
  opacity: .72;
  animation-duration: 29s;
  animation-delay: -19s;
}
@keyframes greeting-cloud-drift {
  from { transform: translate(-2%, 1%) rotate(-4deg) scale(.96, 1.02); border-radius: 43% 57% 64% 36% / 51% 44% 56% 49%; }
  to { transform: translate(3%, -2%) rotate(4deg) scale(1.07, .98); border-radius: 58% 42% 45% 55% / 43% 61% 39% 57%; }
}

/* 固定两行的承载空间；动效只改变墨色和极小范围的清晰度。 */
.map-intro #map-greeting {
  font-size: clamp(34px, 3vw, 38px);
  line-height: 1.45;
  letter-spacing: 1.8px;
  min-height: 2.9em;
}
/* 欢迎语是动态氛围文字，不显示程序化焦点框；交互控件仍保留 focus-visible。 */
#map-greeting:focus,
#map-greeting:focus-visible,
.greeting-line:focus,
.greeting-letter:focus { outline: none !important; box-shadow: none !important; }
.greeting-line { display: block; white-space: nowrap; }
.greeting-letter {
  display: inline-block;
  animation: greeting-ink 1.25s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: min(calc(var(--letter, 0) * 55ms), 650ms);
}
@keyframes greeting-ink {
  from { opacity: .13; filter: blur(1.5px); }
  55% { opacity: .8; }
  to { opacity: 1; filter: blur(0); }
}
.map-intro #map-greeting-caption {
  min-height: 4.1em;
  max-width: 27em;
  color: #637660;
}

/* 发现留声点时，三道水纹沿右上 → 左下流过；无命中区，不拦截地图操作。 */
.discovery-water {
  position: absolute;
  inset: 104px 0 80px;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}
.discovery-water i {
  position: absolute;
  left: 100%;
  top: 0;
  width: min(145vmax, 1600px);
  aspect-ratio: 1;
  border: 1px solid #abc8c695;
  border-radius: 48% 52% 49% 51%;
  background: radial-gradient(ellipse, transparent 58%, #d9e4ec00 64%, #d9e4ec38 68%, #f7f5ef75 69.5%, #cfdfd654 70%, transparent 71%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.04);
}
.discovery-water.is-active i { animation: discovery-tide 2.9s cubic-bezier(.2, .45, .35, 1) both; }
.discovery-water.is-active i:nth-child(2) { animation-delay: .4s; }
.discovery-water.is-active i:nth-child(3) { animation-delay: .8s; }
@keyframes discovery-tide {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.04); }
  15% { opacity: .78; }
  60% { opacity: .55; }
  100% { opacity: 0; transform: translate(-80%, -5%) scale(1.2); }
}
.discovery-notice {
  position: absolute;
  top: 204px;
  left: 50%;
  z-index: 7;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 48px);
  margin: 0;
  padding: 12px 18px;
  border-radius: 14px;
  background: #f7f5eff5;
  box-shadow: 0 6px 22px #415e4b12;
  color: #49634f;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .5px;
  text-align: center;
  pointer-events: none;
  animation: discovery-notice-in .6s ease-out both;
}
.discovery-notice[hidden] { display: none; }
@keyframes discovery-notice-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 760px) {
  .map-intro #map-greeting { font-size: 34px; line-height: 1.35; min-height: 2.7em; letter-spacing: 2px; }
  .map-intro #map-greeting-caption { min-height: 3.4em; }
  .greeting-cloud { inset: -37px -61px -26px -56px; }
  .discovery-water { top: 83px; }
  .discovery-notice { top: 184px; font-size: 11px; padding: 11px 16px; }
}
@media (max-width: 420px) {
  .map-intro #map-greeting { font-size: 31px; }
  .discovery-notice { top: 210px; }
}
body.atmosphere-paused .greeting-cloud i,
body.atmosphere-paused .greeting-letter,
body.atmosphere-paused .discovery-water i,
body.atmosphere-paused .discovery-notice { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .greeting-cloud i, .greeting-letter, .discovery-water.is-active i, .discovery-notice { animation: none !important; }
  .greeting-letter { opacity: 1; filter: none; }
  .discovery-water { display: none; }
  .discovery-notice { opacity: 1; }
}

/* 以用户参考图的字级和分组为准，长问候仍为右侧地图工具留出空间。 */
@media (max-width: 760px) {
  .map-view::after {
    content: ""; position: absolute; pointer-events: none; z-index: 2;
    left: 0; right: 0; bottom: 0; height: calc(220px + var(--map-safe-bottom));
    background: linear-gradient(180deg, #f7f5ef00, #f7f5ef99 32%, #f7f5eff0 64%, #f7f5ef 80%, #f7f5ef 100%);
  }
  .map-view .map-intro { width: calc(100% - 112px); bottom: calc(166px + var(--map-safe-bottom)); }
  .map-intro #map-greeting { font-size: 38px; letter-spacing: 1px; }
  .map-intro #map-greeting-caption { font-size: 12px; line-height: 1.65; min-height: 3.3em; }
  .map-intro .nearby-link { min-height: 44px; margin-top: 12px; }
  .map-intro .nearby-link[data-action="filter"] small { display: block; color: #637660; }
  .map-view .map-bottom-center { bottom: calc(42px + var(--map-safe-bottom)); gap: 16px; }
  .map-bottom-center > span { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 9px; }
  .map-bottom-center > span::before, .map-bottom-center > span::after { content: ""; flex: 0 0 16px; height: 1px; background: #bac5b9; }
  .map-view .locate-button, .map-view .zoom-control { width: 44px; }
  .map-view .locate-button, .map-view .zoom-control button { height: 44px; }
}
@media (max-width: 420px) { .map-intro #map-greeting { font-size: 33px; letter-spacing: .5px; } }
@media (max-width: 360px) { .map-intro #map-greeting { font-size: 28px; letter-spacing: 0; } }
@media (max-width: 760px) and (max-height: 700px) {
  .map-view .map-bottom-center { bottom: calc(28px + var(--map-safe-bottom)); }
  .map-intro #map-greeting { font-size: 28px; }
  .map-view .map-intro { bottom: calc(150px + var(--map-safe-bottom)); }
}

/* 分类是次级地图工具：入口弱化为轻量筛选，展开后才呈现完整选项。 */
.map-topline { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.category-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 7px 10px; border-radius: 12px; background: rgba(249,248,242,.68); border: 1px solid rgba(255,255,255,.58); box-shadow: 0 3px 12px rgba(65,94,75,.035); backdrop-filter: blur(10px); color: #748276; font-size: 10px; letter-spacing: .3px; white-space: nowrap; }
.category-trigger[hidden] { display: none; }
.category-trigger .icon { width: 13px; height: 13px; opacity: .82; }
.category-trigger[aria-expanded="true"], .category-trigger:not([aria-expanded="true"]):has(+ .map-filters .filter.active:not([data-filter="all"])) { background: rgba(234,238,227,.9); border-color: rgba(213,222,210,.82); color: #526950; }
.map-topline .map-filters { position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; width: 100%; max-width: none; display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; padding: 4px; border-radius: 15px; background: rgba(250,249,244,.9); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 8px 24px rgba(65,94,75,.07); transform-origin: top center; animation: category-grow .28s cubic-bezier(.16,1,.3,1) both; }
.map-filters .filter { min-height: 34px; justify-content: center; padding: 7px 8px; border-radius: 11px; font-size: 10px; }
.map-filters .filter.active { background: rgba(227,234,222,.9); box-shadow: none; }
.category-trigger:focus-visible, .map-filters .filter:focus-visible { outline: 2px solid #526950; outline-offset: 3px; }
.map-view.categories-enabled .map-footnote { top: 150px; }
.map-view.categories-enabled:has(#category-trigger[aria-expanded="true"]) .map-footnote { visibility: hidden; }
@keyframes category-grow { from { opacity: 0; transform: translateY(-5px) scale(.98,.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .map-topline .map-filters { animation: none; } }
@media (max-width: 360px) { .category-trigger { padding-inline: 8px; }.map-topline { left: 18px; right: 18px; }.map-filters .filter { padding-inline: 5px; } }

/* 原筛选按钮已有“全部”文字；取消旧版伪元素补写，避免窄屏出现“全部 全部”。 */
@media (max-width: 760px) {
  .map-filters .filter:first-child { font-size: 10px; }
  .map-filters .filter:first-child::after { content: none; }
}

/* 地图优先：收紧底部操作组，薄雾只托住文字，不铺成白色面板。 */
@media (max-width: 760px) {
  .map-view .map-bottom-center {
    bottom: calc(16px + var(--map-safe-bottom));
    gap: 0;
  }
  .map-bottom-center > span { display: none; }
  .map-bottom-center .leave-voice-button {
    min-height: 52px;
    padding: 12px 24px;
  }
  .map-view .map-intro {
    top: auto;
    bottom: calc(80px + var(--map-safe-bottom));
    width: calc(100% - 96px);
  }
  .map-intro #map-greeting {
    font-size: clamp(26px, 7.3vw, 32px);
    line-height: 1.3;
    min-height: 2.6em;
    letter-spacing: .5px;
    margin: 0 0 8px;
  }
  .map-intro #map-greeting-caption {
    font-size: 12px;
    line-height: 1.5;
    min-height: 0;
    margin: 0;
    color: #49634f;
  }
  .map-intro .nearby-link { margin-top: 8px; min-height: 44px; }
  .map-view .map-controls { bottom: calc(156px + var(--map-safe-bottom)); }
  .map-view::after {
    /* 奶白渐变连接地图与紫色主按钮；最底部保留透明度，让地图版权微弱可辨。 */
    display: block;
    inset: auto 0 0;
    height: calc(168px + var(--map-safe-bottom));
    background: linear-gradient(180deg, rgba(247,245,239,0) 0%, rgba(247,245,239,.25) 24%, rgba(247,245,239,.62) 58%, rgba(247,245,239,.84) 100%);
  }
  .greeting-cloud {
    inset: -20px -24px -12px -32px;
    background: radial-gradient(ellipse at 32% 55%, #f7f5efbf, #f7f5ef70 42%, #f7f5ef00 74%);
  }
  .greeting-cloud i { opacity: .24; }
  .greeting-cloud i:nth-child(2) { opacity: .16; }
  .greeting-cloud i:nth-child(3) { opacity: .18; }
  .map-viewport::after {
    /* 示意地图也不叠加全屏白幕，与真实地图保持一致。 */
    display: none;
  }
}
/* 点位仅显示标题，时长与距离在点击后的聆听页面展示。 */
.marker-caption > span { display: none; }
/* 自己留下的声音是一枚紫灰色“私印”：定位针表示属于此地，内部声纹表示由我留下。 */
.sound-marker.own-marker {
  --marker: #9f91b1;
  --marker-fade: rgba(159, 145, 177, .34);
}
.own-marker .marker-core {
  width: 39px;
  height: 39px;
  color: #fffdf8;
  background: radial-gradient(circle at 34% 28%, #bbb0c9 0 18%, #9f91b1 58%, #897b9d 100%);
  border-width: 3px;
  box-shadow: 0 0 0 2px rgba(159,145,177,.42), 0 0 0 8px rgba(255,255,255,.3), 0 5px 15px rgba(91,75,110,.2);
}
.own-marker .marker-core .icon { width: 20px; height: 20px; stroke-width: 1.55; }
.own-marker .marker-ripple { border-color: rgba(159,145,177,.56); background: rgba(185,175,199,.2); }
.own-marker .marker-caption::after {
  content: "我的";
  display: inline-block;
  margin-left: 6px;
  padding: 2px 5px;
  border: 1px solid rgba(139,123,157,.24);
  border-radius: 999px;
  color: #786b89;
  background: rgba(244,240,247,.78);
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: .5px;
  vertical-align: 1px;
}
@media(max-width:760px) {
  .own-marker .marker-core { width: 36px; height: 36px; }
  .own-marker .marker-core .icon { width: 18px; height: 18px; }
}