:root { --land-accent: #177f96; --land-ink: #18322b; --land-paper: #f4f2e7; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
button { color: inherit; font: inherit; }
:focus-visible { outline: 2px solid var(--land-accent); outline-offset: 2px; }

.landscape-canvas {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--land-ink);
  background: radial-gradient(circle at 15% 15%, rgba(40,113,104,.2), transparent 32%), radial-gradient(circle at 88% 82%, rgba(153,92,52,.18), transparent 30%), #dce6df;
}

.landscape-app {
  position: relative;
  width: min(440px, 100vw);
  height: min(956px, calc(100dvh - 32px));
  min-height: 720px;
  overflow: hidden;
  border: 1px solid rgba(22,57,43,.16);
  border-radius: 38px;
  background: #dfe8df;
  box-shadow: 0 32px 90px rgba(25,59,43,.28), 0 2px 8px rgba(25,59,43,.13);
  isolation: isolate;
}

.floating-header {
  position: absolute;
  z-index: 70;
  top: 0;
  left: 0;
  right: 0;
  height: 68px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 52px 1fr 76px;
  align-items: center;
  background: linear-gradient(180deg, rgba(245,246,237,.95), rgba(245,246,237,.72) 72%, transparent);
}

.map-back {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(21,55,42,.15);
  border-radius: 50%;
  color: var(--land-ink);
  background: rgba(251,251,245,.74);
  box-shadow: 0 5px 14px rgba(25,55,42,.08);
  text-decoration: none;
  font: 300 33px/1 sans-serif;
  backdrop-filter: blur(14px);
}

.map-title { text-align: center; }
.map-title small { display: block; color: var(--land-accent); font: 700 7px Georgia, serif; letter-spacing: .22em; }
.map-title h1 { margin: 2px 0 0; font: 700 20px/1.05 "STKaiti", "KaiTi", serif; letter-spacing: .14em; }
.tour-button { height: 33px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid color-mix(in srgb, var(--land-accent) 28%, transparent); border-radius: 18px; color: var(--land-accent); background: rgba(250,250,244,.76); font-size: 9px; cursor: pointer; backdrop-filter: blur(14px); }
.tour-button i { font-style: normal; font-size: 8px; }
.tour-button.active { color: white; background: var(--land-accent); box-shadow: 0 6px 17px color-mix(in srgb, var(--land-accent) 30%, transparent); }

.map-controls-panel { position: absolute; z-index: 65; top: 67px; left: 12px; right: 12px; }
.group-switch { height: 55px; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border: 1px solid rgba(27,61,46,.12); border-radius: 18px; background: rgba(247,247,239,.72); box-shadow: 0 10px 28px rgba(25,58,43,.11); backdrop-filter: blur(18px); }
.group-switch button { display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 14px; color: #78877f; background: transparent; cursor: pointer; transition: .3s ease; }
.group-switch button.active { color: white; background: var(--land-accent); box-shadow: 0 6px 15px color-mix(in srgb, var(--land-accent) 28%, transparent); }
.group-switch button > i { position: relative; width: 24px; height: 22px; display: block; }
.group-switch button span { text-align: left; }
.group-switch b, .group-switch small { display: block; }
.group-switch b { font: 700 13px "STKaiti", "KaiTi", serif; letter-spacing: .06em; }
.group-switch small { margin-top: 1px; font-size: 7px; opacity: .74; }
.river-mark::before, .river-mark::after { content: ""; position: absolute; left: 1px; width: 22px; height: 6px; border-top: 2px solid currentColor; border-radius: 50%; }
.river-mark::before { top: 6px; transform: rotate(-7deg); }
.river-mark::after { top: 13px; transform: rotate(7deg); opacity: .55; }
.peak-mark::before { content: ""; position: absolute; left: 1px; bottom: 2px; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 19px solid currentColor; }
.peak-mark::after { content: ""; position: absolute; left: 8px; bottom: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,.7); }

.point-selector { height: 44px; margin-top: 7px; padding: 4px; display: flex; gap: 4px; overflow-x: auto; border: 1px solid rgba(27,61,46,.1); border-radius: 15px; background: rgba(247,247,239,.68); box-shadow: 0 8px 23px rgba(25,58,43,.1); backdrop-filter: blur(16px); scrollbar-width: none; }
.point-selector::-webkit-scrollbar { display: none; }
.point-selector button { min-width: 76px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 11px; color: #62736a; background: transparent; font-size: 10px; cursor: pointer; }
.point-selector button i { font: 600 6px Georgia, serif; opacity: .55; }
.point-selector button.active { color: white; background: color-mix(in srgb, var(--land-accent) 90%, #173f34); box-shadow: 0 4px 11px color-mix(in srgb, var(--land-accent) 24%, transparent); }

.full-map-stage { position: absolute; z-index: 1; inset: 0; overflow: hidden; background: linear-gradient(180deg, #e9eee5 0%, #dce7dd 48%, #d2e0d7 100%); }
.map-atmosphere { position: absolute; z-index: 1; inset: 0; background: radial-gradient(circle at 50% 47%, rgba(255,255,250,.35), transparent 52%), linear-gradient(115deg, rgba(255,255,255,.18), transparent 38%); pointer-events: none; }
.anhui-map { position: absolute; z-index: 2; top: 51%; left: 50%; width: 112%; max-width: 492px; aspect-ratio: 1; transform: translate(-50%,-50%); transform-origin: center; transition: transform .82s cubic-bezier(.18,.82,.18,1); will-change: transform; }
.anhui-base, .water-context, .river-growth, .river-light { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; }
.anhui-base { z-index: 1; filter: saturate(.63) brightness(.97) contrast(.96); }
.water-context { z-index: 2; opacity: .18; filter: saturate(.55) brightness(.96); mix-blend-mode: multiply; }
.map-vignette { position: absolute; z-index: 6; inset: 0; background: radial-gradient(circle at 50% 48%, transparent 52%, rgba(229,236,227,.17) 70%, rgba(229,236,227,.64) 100%); pointer-events: none; }

.river-animation { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.river-growth { z-index: 4; opacity: .98; filter: saturate(1.45) brightness(.92) drop-shadow(0 0 5px rgba(29,160,184,.62)); clip-path: inset(0 100% 0 0); animation: riverGrow 2.1s cubic-bezier(.18,.78,.2,1) forwards; }
.river-light { z-index: 5; opacity: 0; filter: brightness(1.35) saturate(1.8) drop-shadow(0 0 9px rgba(96,221,234,.95)); clip-path: inset(0 100% 0 0); animation: riverPulse 2.8s 1.3s ease-in-out infinite; }
@keyframes riverGrow { to { clip-path: inset(0 0 0 0); } }
@keyframes riverPulse { 0% { clip-path: inset(0 100% 0 0); opacity: 0; } 18% { opacity: .95; } 78% { opacity: .72; } 100% { clip-path: inset(0 0 0 100%); opacity: 0; } }
.river-xinan .river-growth { animation-duration: 1.65s; }
.flow-arrow { position: absolute; z-index: 7; color: #d6ffff; text-shadow: 0 0 7px #057b9a; font: 700 18px Georgia, serif; opacity: 0; animation: arrowDrift 2.5s 1.5s ease-in-out infinite; }
.arrow-one { left: 34%; top: 62%; }
.arrow-two { left: 53%; top: 65%; animation-delay: 1.9s; }
.arrow-three { left: 68%; top: 67%; animation-delay: 2.3s; }
.river-huai .arrow-one { left: 27%; top: 30%; } .river-huai .arrow-two { left: 44%; top: 31%; } .river-huai .arrow-three { left: 58%; top: 32%; }
.river-xinan .arrow-one { left: 55%; top: 87%; } .river-xinan .arrow-two { left: 65%; top: 88%; } .river-xinan .arrow-three { left: 74%; top: 88%; }
@keyframes arrowDrift { 0% { transform: translateX(-10px) scale(.75); opacity: 0; } 30%,70% { opacity: 1; } 100% { transform: translateX(16px) scale(1.05); opacity: 0; } }
.river-map-label { position: absolute; z-index: 9; transform: translate(-50%,-50%); transform-origin: left center; min-width: 68px; padding: 5px 9px 6px; border: 1px solid rgba(27,86,91,.2); border-radius: 4px 14px 4px 14px; color: #236d79; background: rgba(241,247,239,.8); box-shadow: 0 6px 15px rgba(29,72,56,.14); text-align: left; opacity: .86; cursor: pointer; backdrop-filter: blur(8px); transition: .35s ease; }
.river-map-label small, .river-map-label b, .river-map-label i { display: block; }
.river-map-label small { font-size: 5px; letter-spacing: .16em; opacity: .68; }
.river-map-label b { margin: 1px 0; font: 700 14px "STKaiti", "KaiTi", serif; letter-spacing: .12em; }
.river-map-label i { font-style: normal; font-size: 5px; letter-spacing: .08em; opacity: .7; }
.river-map-label.active { z-index: 18; color: white; background: rgba(17,102,120,.9); border-color: rgba(255,255,255,.62); box-shadow: 0 8px 22px rgba(15,86,103,.34); animation: riverNameGrow .72s .28s cubic-bezier(.2,.9,.24,1) both; }
@keyframes riverNameGrow { from { transform: translate(-50%,-50%) scaleX(.2); opacity: .2; } to { transform: translate(-50%,-50%) scaleX(1); opacity: 1; } }

.mountain-label { position: absolute; z-index: 12; transform: translate(-50%,-50%); width: 78px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; opacity: .68; transition: .35s ease; }
.label-card { position: absolute; left: 12px; top: 7px; min-width: 61px; padding: 4px 5px 4px 13px; border: 1px solid rgba(72,67,48,.2); border-radius: 2px 11px 2px 11px; color: #4b564b; background: rgba(244,240,221,.9); box-shadow: 0 5px 11px rgba(42,55,42,.15); text-align: left; backdrop-filter: blur(6px); }
.label-card small, .label-card b { display: block; }
.label-card small { color: #9b765e; font: 600 5px Georgia, serif; letter-spacing: .1em; }
.label-card b { margin-top: 1px; font: 700 10px "STKaiti", "KaiTi", serif; letter-spacing: .05em; }
.label-peak { position: absolute; z-index: 3; left: 2px; top: 8px; width: 25px; height: 25px; display: grid; place-items: center; border: 2px solid #f3ecda; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); color: white; background: #6e7e68; box-shadow: 0 4px 9px rgba(32,50,38,.2); font-size: 9px; }
.label-peak::first-letter { transform: rotate(45deg); }
.label-seal { position: absolute; z-index: 4; right: -2px; bottom: 2px; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 2px; color: white; background: #a84e32; font: normal 7px "STKaiti", serif; }
.mountain-label.active { z-index: 18; transform: translate(-50%,-50%) scale(1.17); opacity: 1; }
.mountain-label.active .label-card { color: white; border-color: rgba(255,255,255,.35); background: var(--land-accent); box-shadow: 0 7px 17px color-mix(in srgb, var(--land-accent) 32%, transparent); }
.mountain-label.active .label-card small { color: rgba(255,255,255,.72); }
.mountain-label.active .label-peak { background: #314c3e; animation: mountainBreath 1.8s ease-in-out infinite; }
@keyframes mountainBreath { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--land-accent) 15%, transparent), 0 4px 9px rgba(32,50,38,.2); } }

.cloud-locator { position: absolute; z-index: 16; width: 105px; height: 62px; transform: translate(-50%,-52%); pointer-events: none; animation: cloudDrop 1.15s cubic-bezier(.18,.85,.2,1) both; }
.cloud-locator > i { position: absolute; display: block; border-radius: 50%; background: rgba(255,255,250,.86); box-shadow: 0 7px 20px rgba(58,76,64,.18); filter: blur(.3px); }
.cloud-one { left: 8px; top: 25px; width: 66px; height: 24px; }
.cloud-two { left: 34px; top: 8px; width: 40px; height: 38px; }
.cloud-three { right: 6px; top: 24px; width: 47px; height: 22px; }
.cloud-locator > span { position: absolute; left: 50%; top: 49px; width: 1px; height: 62px; background: linear-gradient(var(--land-accent), transparent); transform-origin: top; animation: cloudTrace 1.3s .45s ease-out both; }
@keyframes cloudDrop { from { transform: translate(-50%,-420%) scale(1.25); opacity: 0; } 45% { opacity: .95; } to { transform: translate(-50%,-52%) scale(1); opacity: .78; } }
@keyframes cloudTrace { from { transform: scaleY(0); opacity: 0; } 30% { opacity: .8; } to { transform: scaleY(1); opacity: 0; } }

.scene-spot { --spot-delay: .45s; position: absolute; z-index: 27; transform: translate(-50%,-50%) translateY(12px) scale(.72); min-width: 76px; padding: 0; display: flex; align-items: center; border: 0; color: #30493f; background: transparent; text-align: left; opacity: 0; cursor: pointer; animation: sceneSpotOpen .48s var(--spot-delay) cubic-bezier(.18,.84,.2,1) forwards; }
.scene-spot > i { position: relative; z-index: 2; width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 25px; border: 2px solid #f4f1df; border-radius: 50%; color: white; background: #376a59; box-shadow: 0 5px 13px rgba(24,58,43,.24); font: normal 8px "STKaiti", serif; }
.scene-spot > span { margin-left: -7px; min-width: 61px; padding: 4px 7px 4px 11px; border: 1px solid rgba(45,72,58,.16); border-radius: 3px 11px 3px 11px; background: rgba(248,246,232,.92); box-shadow: 0 6px 14px rgba(27,58,43,.15); backdrop-filter: blur(7px); }
.scene-spot small, .scene-spot b { display: block; white-space: nowrap; }
.scene-spot small { color: var(--land-accent); font-size: 5px; letter-spacing: .1em; }
.scene-spot b { margin-top: 1px; font: 700 8px "STKaiti", serif; }
.scene-spot.panorama > i { width: 29px; height: 29px; flex-basis: 29px; background: #a84e32; font: 700 6px Georgia, serif; animation: panoramaPoint 1.8s 1s ease-in-out infinite; }
.scene-spot.panorama > span { border-color: rgba(168,78,50,.25); }
@keyframes sceneSpotOpen { to { transform: translate(-50%,-50%) translateY(0) scale(1); opacity: 1; } }
@keyframes panoramaPoint { 50% { box-shadow: 0 0 0 7px rgba(168,78,50,.14), 0 5px 13px rgba(24,58,43,.24); } }

.map-reading { position: absolute; z-index: 45; left: 17px; top: 174px; display: flex; flex-direction: column; pointer-events: none; }
.map-reading > span { color: var(--land-accent); font-size: 7px; font-weight: 700; letter-spacing: .18em; }
.map-reading > b { margin: 3px 0 2px; font: 700 24px/1 "STKaiti", "KaiTi", serif; letter-spacing: .08em; }
.map-reading > small { color: #718078; font-size: 7px; }

.photo-trigger { position: absolute; z-index: 48; left: 14px; right: 14px; bottom: 18px; height: 52px; padding: 6px 11px; display: grid; grid-template-columns: 36px 1fr 24px; align-items: center; border: 1px solid rgba(25,60,45,.13); border-radius: 18px; color: var(--land-ink); background: rgba(249,249,242,.78); box-shadow: 0 11px 30px rgba(24,57,42,.16); text-align: left; cursor: pointer; backdrop-filter: blur(18px); }
.photo-trigger > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--land-accent); font: 700 15px "STKaiti", serif; }
.photo-trigger i { font-style: normal; }
.photo-trigger b, .photo-trigger small { display: block; }
.photo-trigger b { font: 700 12px "STKaiti", serif; }
.photo-trigger small { margin-top: 2px; color: #7a877f; font-size: 7px; }
.photo-trigger em { color: var(--land-accent); font-style: normal; font-size: 16px; }

.scenic-drawer { position: absolute; z-index: 58; left: 10px; right: 10px; bottom: 10px; height: 272px; overflow: hidden; border: 1px solid rgba(22,55,42,.12); border-radius: 25px; background: rgba(248,248,241,.98); box-shadow: 0 22px 58px rgba(21,53,39,.3); transform: translateY(calc(100% + 25px)); opacity: 0; transition: .5s cubic-bezier(.2,.84,.2,1); }
.scenic-drawer.open { transform: translateY(0); opacity: 1; }
.drawer-close { position: absolute; z-index: 4; top: 9px; right: 9px; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.52); border-radius: 50%; color: white; background: rgba(16,36,25,.38); backdrop-filter: blur(8px); font-size: 17px; cursor: pointer; }
.drawer-photo { position: relative; height: 140px; overflow: hidden; }
.drawer-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11,29,20,.6)); pointer-events: none; }
.drawer-photo img { width: 100%; height: 100%; display: block; object-fit: cover; animation: photoReveal .75s ease both; }
@keyframes photoReveal { from { transform: scale(1.07); opacity: .55; filter: blur(2px); } to { transform: scale(1); opacity: 1; filter: blur(0); } }
.drawer-photo > span { position: absolute; z-index: 2; left: 13px; bottom: 13px; padding: 4px 8px; border: 1px solid rgba(255,255,255,.4); border-radius: 9px; color: white; background: rgba(19,46,31,.25); font-size: 7px; letter-spacing: .14em; backdrop-filter: blur(8px); }
.drawer-photo > small { position: absolute; z-index: 2; right: 13px; bottom: 14px; color: rgba(255,255,255,.82); font-size: 6px; }
.drawer-copy { padding: 9px 13px 10px; }
.drawer-copy > div { height: 30px; display: flex; align-items: baseline; gap: 7px; }
.drawer-copy > div i { padding: 2px 5px; border-radius: 4px; color: white; background: var(--land-accent); font-style: normal; font-size: 6px; }
.drawer-copy h2 { margin: 0; font: 700 21px/1 "STKaiti", serif; letter-spacing: .07em; }
.drawer-copy > div small { margin-left: auto; color: #818c85; font-size: 6px; }
.drawer-copy > p { height: 33px; margin: 3px 0 5px; overflow: hidden; color: #647269; font-size: 8px; line-height: 1.6; }
.drawer-copy footer { height: 31px; display: flex; align-items: center; border-top: 1px solid rgba(25,60,45,.09); }
.drawer-copy footer > span { color: var(--land-accent); font-size: 8px; font-weight: 700; }
.drawer-copy footer button { margin-left: auto; padding: 6px 10px; border: 0; border-radius: 12px; color: white; background: var(--land-accent); box-shadow: 0 5px 12px color-mix(in srgb, var(--land-accent) 25%, transparent); font-size: 8px; cursor: pointer; }

.panorama-fade { position: absolute; z-index: 100; inset: 0; display: grid; place-items: center; padding: 12px; animation: panoramaFade .35s ease both; }
@keyframes panoramaFade { from { opacity: 0; } to { opacity: 1; } }
.panorama-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(13,30,22,.72); backdrop-filter: blur(12px); cursor: pointer; }
.panorama-window { position: relative; z-index: 2; width: 100%; height: min(76%, 690px); overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 25px; background: #13261f; box-shadow: 0 24px 70px rgba(5,20,13,.48); transform-origin: center; animation: panoramaWindow .48s cubic-bezier(.2,.86,.2,1) both; }
@keyframes panoramaWindow { from { transform: translateY(26px) scale(.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.panorama-window > header { height: 57px; padding: 9px 11px 8px 15px; display: flex; align-items: center; justify-content: space-between; color: white; background: #183a2d; }
.panorama-window > header small, .panorama-window > header b { display: block; }
.panorama-window > header small { color: #7bc6d1; font: 600 6px Georgia, serif; letter-spacing: .18em; }
.panorama-window > header b { margin-top: 3px; font: 700 14px "STKaiti", serif; letter-spacing: .08em; }
.panorama-window > header button { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: white; background: rgba(255,255,255,.08); font-size: 19px; cursor: pointer; }
.panorama-frame { height: calc(100% - 85px); background: #0c1d17; }
.panorama-frame iframe { width: 100%; height: 100%; display: block; border: 0; }
.panorama-window > footer { height: 28px; display: flex; align-items: center; justify-content: center; gap: 6px; color: rgba(255,255,255,.65); background: #183a2d; font-size: 7px; }
.panorama-window > footer i { width: 4px; height: 4px; border-radius: 50%; background: #7bc6d1; box-shadow: 0 0 0 3px rgba(123,198,209,.15); }

@media (max-width: 480px) {
  .landscape-canvas { padding: 0; }
  .landscape-app { width: 100vw; height: 100dvh; min-height: 650px; border: 0; border-radius: 0; }
}

@media (max-height: 760px) {
  .map-controls-panel { top: 60px; }
  .floating-header { height: 62px; }
  .anhui-map { top: 52%; width: 105%; }
  .map-reading { top: 160px; }
  .scenic-drawer { height: 248px; }
  .drawer-photo { height: 124px; }
  .panorama-window { height: 82%; }
}

@media (prefers-reduced-motion: reduce) {
  .river-growth, .river-light, .flow-arrow, .river-map-label, .cloud-locator, .cloud-locator > span, .mountain-label.active .label-peak, .scene-spot, .drawer-photo img, .panorama-fade, .panorama-window { animation: none !important; }
  .river-growth, .river-light { clip-path: inset(0) !important; opacity: .9; }
  .river-map-label, .scene-spot { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  .scenic-drawer { transition-duration: .01ms !important; }
}