/* 演示点与虚拟定位在地图折射层，拾音卡在独立UI层。 */
.scenario-map { position:absolute; inset:0; z-index:2; pointer-events:none; }
.scenario-map[hidden], .scenario-panel[hidden], .scenario-panel [hidden], .scenario-map [hidden] { display:none; }
.virtual-position { position:absolute; left:22%; top:28%; color:#426c60; transition:left 3s ease-in-out,top 3s ease-in-out; }
.virtual-position.arrived { left:56%; top:44%; }
.virtual-position svg { width:32px; height:32px; fill:#f7f5ef; stroke:#426c60; stroke-width:1.5; }
.virtual-position svg path { fill:#426c60; }
.virtual-position span { display:block; font-size:10px; background:#f7f5ef; padding:3px 6px; border-radius:8px; }
.scenario-echo { position:absolute; left:66%; top:42%; width:44px; height:44px; border-radius:50%; background:#d8cde7; pointer-events:auto; color:#625774; animation:echo-appear 1s ease-out; }
.scenario-echo svg { width:28px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.scenario-echo.dissolving { animation:echo-dissolve 1.6s ease-out forwards; pointer-events:none; }
.scenario-panel { position:absolute; z-index:8; top:170px; left:24px; right:24px; padding:16px; background:#f7f5eff2; border-radius:16px; color:#415e4b; box-shadow:0 8px 24px #415e4b18; }
.scenario-panel strong { font-size:12px; }.scenario-panel p { font-size:13px; line-height:1.6; margin:8px 0; }.scenario-panel small { display:block; font-size:11px; line-height:1.5; }
.scenario-panel button { min-height:44px; padding:8px 18px; background:#ddd5e8; border-radius:24px; color:#58496b; }.scenario-panel audio { width:100%; margin:8px 0; }
@keyframes echo-appear { from {opacity:0;transform:scale(.65)} to {opacity:1;transform:scale(1)} }
@keyframes echo-dissolve { to {opacity:0;transform:translate(24px,-16px) scale(1.3);filter:blur(6px)} }
@media(prefers-reduced-motion:reduce) { .virtual-position {transition:none} .scenario-echo {animation:none} .scenario-echo.dissolving {opacity:0;animation:none} }
/* 云杉青定位点与柔雾紫隐声，共用地图声纹语言。 */
.virtual-position { width:32px; height:32px; color:#5e7465; }
.virtual-position svg { position:relative; fill:#769589; stroke:#fffdf6; stroke-width:3; }
.virtual-position > span:last-child { position:absolute; top:34px; left:50%; transform:translateX(-50%); width:max-content; font-size:10px; color:#52695c; background:#f7f5efe6; }
.position-aura { position:absolute; inset:-12px; border-radius:50%; background:#cfe0d766; border:1px solid #a2b9ad55; }
.scenario-echo { width:48px; height:48px; background:transparent; color:#9f93bb; display:grid; place-items:center; }
.scenario-core { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#b5a9ce; border:2px solid #fffdf1; color:#fffdf6; }
.scenario-echo .marker-ripple { position:absolute; inset:0; border-radius:50%; background:#c7b9de33; border:1px solid #c7b9de66; }
.scenario-capsule { position:absolute; z-index:8; top:174px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 48px); margin:0; padding:11px 18px; border-radius:28px; background:#f9f8f0eb; color:#4f6859; box-shadow:0 8px 24px #415e4b14; font-size:12px; line-height:1.6; pointer-events:none; animation:echo-appear .8s ease-out; }
.scenario-capsule[hidden] {display:none;}
.scenario-panel { top:204px; left:32px; right:32px; padding:24px; text-align:center; background:#fbf9f2ed; backdrop-filter:blur(12px); box-shadow:0 12px 40px #415e4b20; border-radius:24px; animation:echo-appear .6s ease-out; }
.pickup-seal { display:grid; place-items:center; width:40px; height:40px; margin:0 auto 12px; background:#e8e1ef; color:#867599; border-radius:50%; }
.pickup-seal svg {width:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;}
.scenario-panel h2 {font:400 23px/1.4 'Songti SC',STSong,serif;margin:0 0 8px;color:#415e4b;}
.scenario-panel .scenario-status {font-size:12px;line-height:1.8;margin:0 0 20px;color:#5e7465;}
.scenario-actions {display:flex;gap:8px;}.scenario-actions button {flex:1;font-size:12px;padding:10px 8px;}
.scenario-actions .scenario-later {background:#e9eee5;color:#526950;}
.scenario-panel small {margin-top:14px;font-size:10px;color:#647368;}
.scenario-player {display:flex;gap:12px;align-items:center;}.scenario-player button {font-size:12px;min-width:64px;padding:8px;}
.scenario-player progress {width:100%;min-width:0;height:4px;accent-color:#9d8db6;}.scenario-time {font-size:10px;color:#647368;font-variant-numeric:tabular-nums;}
.scenario-panel button:focus-visible,.scenario-echo:focus-visible {outline:2px solid #6c8172;outline-offset:4px;}
@media(prefers-reduced-motion:reduce) {.scenario-capsule,.scenario-panel {animation:none;}}
.virtual-position .position-aura { display:block; padding:0; background:#cfe0d74d; border-radius:50%; }
.virtual-position svg { background:transparent; }
/* 气泡使用同一组纸白与灰绿，轻尾部提供悬浮感。 */
.scenario-panel { background:#faf9f2f5; border-radius:32px; box-shadow:0 16px 40px #415e4b18; }
.scenario-panel::after { content:""; position:absolute; width:20px; height:20px; bottom:-7px; right:44px; background:#faf9f2; border-radius:0 0 6px 0; transform:rotate(45deg); }
.pickup-seal { background:#e6ebe1; color:#647b6d; }
.scenario-panel button { background:#dee6d9; color:#465f51; }
.scenario-actions .scenario-later { background:transparent; color:#647368; }
.scenario-player progress { accent-color:#7a9181; }
.scenario-panel.is-responding {
  top:190px;
  left:24px;
  right:24px;
  padding:25px 22px 18px;
  overflow:hidden;
  text-align:left;
  background:linear-gradient(145deg,rgba(250,249,242,.96),rgba(240,244,237,.91));
  border-radius:16px;
  box-shadow:0 18px 48px rgba(54,76,62,.15);
  backdrop-filter:blur(18px) saturate(.88);
  -webkit-backdrop-filter:blur(18px) saturate(.88);
  animation:response-note-arrive .56s cubic-bezier(.22,.68,0,1) both;
}
.scenario-panel.is-responding::before {
  content:"";
  position:absolute;
  right:-26px;
  top:-38px;
  width:128px;
  height:104px;
  border-radius:52% 48% 58% 42%/46% 56% 44% 54%;
  background:linear-gradient(135deg,rgba(216,210,232,.28),rgba(220,231,222,.08));
  filter:blur(2px);
  pointer-events:none;
}
.scenario-panel.is-responding::after { display:none; }
.scenario-panel.is-responding .pickup-seal,.scenario-panel.is-responding .scenario-status,.scenario-panel.is-responding small { display:none; }
.scenario-panel.is-responding h2 {
  position:relative;
  z-index:1;
  max-width:290px;
  margin:0 0 20px;
  color:#496253;
  font-size:19px;
  line-height:1.65;
  letter-spacing:.035em;
  text-wrap:balance;
}
.scenario-response-actions {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border-radius:13px;
  background:rgba(229,235,225,.7);
}
.scenario-response-actions button {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  min-width:0;
  min-height:50px;
  padding:10px 13px;
  border-radius:0;
  background:transparent;
  color:#536b5c;
  box-shadow:none;
  font-size:11px;
  letter-spacing:.02em;
  transition:background 180ms ease,color 180ms ease,transform 180ms ease;
}
.scenario-response-actions button+button { border-left:1px solid rgba(147,163,150,.22); }
.scenario-response-actions .icon {
  width:29px;
  height:29px;
  flex:0 0 29px;
  padding:6px;
  border-radius:50%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  background:rgba(250,249,242,.76);
}
.scenario-response-actions button:first-child { color:#856c62; }
.scenario-response-actions button:first-child .icon { background:rgba(241,218,207,.65); }
.scenario-response-actions button:last-child .icon { background:rgba(213,226,215,.78); }
.scenario-response-actions button:hover { background:rgba(250,249,242,.48); }
.scenario-response-actions button:active { transform:scale(.985); }
.scenario-response-actions button.selected { background:rgba(216,228,216,.82); color:#405e4c; }
.scenario-response-actions button:first-child.selected { background:rgba(239,220,211,.82); color:#76564c; }
.scenario-response-actions button:disabled { opacity:1; }
@keyframes response-note-arrive {
  from { opacity:.25; transform:translateY(12px); filter:blur(7px); }
  to { opacity:1; transform:translateY(0); filter:blur(0); }
}
.scenario-core { background:#8da395; }
.scenario-echo .marker-ripple { background:#b4c7b833; border-color:#a2b9ad66; }
.virtual-position { transition:none; transform:translate(-50%,-50%); }
.scenario-echo { transform:translate(-50%,-50%); }
/* 感知圈按60米投影到地图，定位点停在圈边；仅圈与音迹参与地图折射。 */
.scenario-boundary { position:absolute; transform:translate(-50%,-50%); border-radius:50%; border:1px solid #81998b99; background:#bccdbe22; pointer-events:none; }
.scenario-boundary i { position:absolute; inset:0; border:1px solid #91aa99aa; border-radius:50%; animation:boundary-spread 3.6s ease-out infinite; }
.scenario-boundary i:nth-child(2) { animation-delay:1.8s; }
@keyframes boundary-spread { from {transform:scale(.6);opacity:0} 20%{opacity:.65} to{transform:scale(1.35);opacity:0} }
.scenario-boundary ~ .scenario-echo { animation:echo-appear 1.4s ease-out; }
@media(prefers-reduced-motion:reduce){.scenario-boundary i{animation:none}.scenario-boundary ~ .scenario-echo{animation:none}.scenario-panel.is-responding{animation:none}}