/* 九华山三维导览 · 「寺门与印」 interaction layer (2026-10-14)
   Loaded after style.css and mobile.css and replaces their view bar, tool rail and dock:
   - 海拔尺 (#ruler): the four stops set out by real altitude; drag the knob and the camera climbs with it.
   - 工具 (.stamp-row): restrained neutral surfaces and a consistent 22px line-icon set.
   - 印章 (.seal-dock): one seal holds the guide's entries, which fan out on an arc.
   Motion: exponential arrivals (--out) for state, one authored spring for the fan; transform and opacity only. */
:root{--out:cubic-bezier(.16,1,.3,1);--fan:cubic-bezier(.3,1.35,.5,1);--seal:#b5392c;--seal-deep:#8f2a20;--seal-ink:#fbefe6;
 --col-top:20px;--rail-w:150px;--stamp:44px;
 /* Controls retain their safe-area clearance; the filing itself is flush with the viewport. */
 --fb:max(0px,calc(var(--sb) - 18px))}
.site-filing{bottom:0}
.viewbar,.dock,.rail{display:none!important}

/* ---------- Scheme A lens ring; the user-approved first-screen navigation ---------- */
.lens-ring{position:absolute;z-index:7;height:76px;user-select:none;-webkit-user-select:none;background:linear-gradient(90deg,rgba(20,30,23,.05),rgba(20,30,23,.23) 35%,rgba(20,30,23,.23) 65%,rgba(20,30,23,.05));border-radius:4px}
.lens-track{position:relative;display:flex;align-items:center;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 calc(50% - 50px);touch-action:pan-x;overscroll-behavior-x:contain;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lens-track::-webkit-scrollbar{display:none}
.lens-track.dragging{scroll-snap-type:none;cursor:grabbing}
.lens-track button{flex:0 0 100px;height:60px;scroll-snap-align:center;color:#fbf9f3;font:600 24px/1 var(--serif);letter-spacing:.12em;white-space:nowrap;text-shadow:0 2px 5px rgba(0,0,0,.65),0 0 16px rgba(0,0,0,.3);transform-origin:center;touch-action:pan-x}
.lens-track button.lens-featured{color:#ffdbca;flex-basis:140px;font-size:22px}
.lens-track button[aria-current="true"]{color:#fff;font-weight:700}
.lens-track button:focus-visible{outline:2px solid #fbf9f3;outline-offset:-10px;border-radius:16px}
.lens-marker{position:absolute;bottom:5px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px var(--seal),0 2px 6px rgba(0,0,0,.4);pointer-events:none}
.guesthouse-shortcut{position:absolute;z-index:6;display:flex;align-items:center;gap:8px;height:44px;padding:0 12px 0 6px;border-radius:12px;background:var(--seal);color:var(--seal-ink);font:600 15px/1 var(--serif);letter-spacing:.06em;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 20px -9px rgba(70,15,10,.5)}
.guesthouse-shortcut>span{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(255,236,224,.6);border-radius:6px;font-size:18px}
.guesthouse-shortcut svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.guesthouse-shortcut:active{scale:.96}
/* ---------- secondary tools; never substitute them for the lens ring ---------- */
.stamp-row{position:absolute;z-index:6;display:flex;align-items:flex-start;gap:8px;pointer-events:none;--tool-bg:rgba(251,250,246,.97);--tool-ink:#26352f;--tool-shadow:0 2px 6px rgba(0,0,0,.08),0 8px 20px rgba(0,0,0,.10)}
.stamp-row>*{pointer-events:auto}
.tool-group{position:relative;display:flex;flex-direction:column;gap:2px;width:52px;padding:4px;border-radius:16px;background:var(--tool-bg);box-shadow:var(--tool-shadow)}
/* The hairline does not consume the 44px touch target inside the 52px surface. */
.tool-group::before{content:"";position:absolute;inset:0;border:1px solid rgba(38,53,47,.08);border-radius:inherit;pointer-events:none}
.stamp-tools{transition:opacity .3s var(--out),transform .3s var(--out),visibility 0s}
.stamp-row :is(.tool-button,#settings-toggle){position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--tool-ink);box-shadow:none;scale:1;touch-action:manipulation;transition:background-color .16s,color .16s,scale .16s cubic-bezier(.2,.8,.2,1);-webkit-backdrop-filter:none;backdrop-filter:none}
.stamp-row .tool-button svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.stamp-row .tool-button svg *{vector-effect:non-scaling-stroke}
.stamp-row .location-dot{fill:currentColor;stroke:none}
.stamp-row :is(.tool-button,#settings-toggle)[data-view]{display:none}
.stamp-row :is(.tool-button,#settings-toggle):is(:active,[data-pressed="true"]){scale:.96;background:rgba(38,53,47,.08);transition-duration:.08s}
.stamp-row :is(.tool-button,#settings-toggle):focus-visible{outline:2px solid var(--dai);outline-offset:2px}
@media(hover:hover){.stamp-row :is(.tool-button,#settings-toggle):hover:not(:active):not([aria-pressed="true"]):not([aria-expanded="true"]){background:rgba(38,53,47,.05)}}
.stamp-row #north-arrow{transform-box:view-box;transform-origin:center;transition:transform .15s linear}
.stamp-row #north-arrow .n{fill:currentColor;stroke:none}
.stamp-row #north-arrow .s{fill:#74837a;stroke:none}
#settings{position:relative}
.stamp-row #settings-toggle.tool-button{width:44px;height:44px;background:transparent;color:var(--tool-ink);box-shadow:none}
.stamp-row #settings-toggle.tool-button svg{display:block;transform:translateY(-.5px)}
.stamp-row :is(.tool-button,#settings-toggle)::after{content:none}
.stamp-row #settings-toggle.tool-button[aria-expanded="true"]{background:rgba(38,53,47,.08);color:var(--tool-ink);box-shadow:none}
.stamp-row #locate[aria-pressed="true"]{background:#e8f1fb;color:#1672c4}
/* Labels share the live accessible name, including locate's on/off action. */
@media(hover:hover) and (pointer:fine){
 .stamp-row :is(.tool-button,#settings-toggle)::after{content:attr(aria-label);display:block;position:absolute;right:calc(100% + 12px);top:50%;height:30px;margin-top:-15px;padding:0 10px;border-radius:8px;background:var(--tool-ink);color:#fbfaf6;font:500 12.5px/30px var(--sans);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transform:none;transition:opacity .16s,visibility 0s linear .16s}
 .stamp-row :is(.tool-button,#settings-toggle):is(:hover,:focus-visible)::after{opacity:1;visibility:visible;transition:opacity .16s .35s,visibility 0s .35s}
}
@supports not (scale:1){
 .stamp-row :is(.tool-button,#settings-toggle){transition:background-color .16s,color .16s,transform .16s cubic-bezier(.2,.8,.2,1)}
 .stamp-row :is(.tool-button,#settings-toggle):is(:active,[data-pressed="true"]){transform:scale(.96);transition-duration:.08s}
}

/* ---------- 海拔尺 ---------- */
.ruler{position:absolute;z-index:5;width:132px;touch-action:none;-webkit-user-select:none;user-select:none;--ky:90%;
 transition:opacity .35s var(--out),transform .45s var(--out),visibility 0s}
.ruler-scale{position:absolute;right:21px;top:0;bottom:0;width:2px;border-radius:1px;background:rgba(251,249,243,.92);box-shadow:0 0 0 .5px rgba(28,42,37,.3),0 1px 6px rgba(0,0,0,.25)}
.ruler-scale i{position:absolute;right:2px;width:9px;height:1.5px;background:rgba(251,249,243,.8);box-shadow:0 0 0 .5px rgba(28,42,37,.2)}
.ruler-stop{position:absolute;right:44px;display:flex;align-items:center;height:30px;margin-top:-15px;padding:0 10px;border-radius:8px;
 background:rgba(251,249,243,.9);color:var(--ink);font:600 14px/1 var(--serif);letter-spacing:.12em;white-space:nowrap;
 box-shadow:0 0 0 .5px rgba(28,42,37,.14),0 6px 14px -8px rgba(20,32,27,.5);transform-origin:right center;
 transition:transform .45s var(--out),background-color .2s,color .2s,opacity .25s}
.ruler-stop::before{content:"";position:absolute;inset:-8px 0;pointer-events:auto}
.ruler-stop::after{content:"";position:absolute;right:-27px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#fbf9f3;box-shadow:0 0 0 2px var(--ink-2)}
.ruler-stop.zhu{color:var(--seal-deep)}.ruler-stop.zhu::after{box-shadow:0 0 0 2px var(--seal)}
.ruler-stop.active{background:var(--ink);color:#fbf9f3}.ruler-stop.zhu.active{background:var(--seal);color:var(--seal-ink)}
.ruler-stop.near{transform:scale(1.1)}
.ruler-stop:active{transform:scale(.94);transition-duration:.08s}
@media(hover:hover){.ruler-stop:not(.active):hover{background:#fff}}
.ruler-knob{position:absolute;right:8px;top:var(--ky);width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--ink);cursor:grab;touch-action:none;
 box-shadow:0 0 0 3px #fbf9f3,0 0 0 3.5px rgba(28,42,37,.25),0 10px 20px -6px rgba(0,0,0,.55);transition:top .6s var(--out),transform .35s var(--out)}
.ruler-knob::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--seal)}
.ruler-knob::before{content:"";position:absolute;inset:-12px;border-radius:50%} /* a thumb-sized hit area */
.ruler-knob:focus-visible{outline:2px solid var(--dai);outline-offset:5px}
.ruler.dragging .ruler-knob{transition:none;transform:scale(1.18);cursor:grabbing}
.ruler-read{position:absolute;right:46px;top:var(--ky);transform:translate(8px,-50%) scale(.9);opacity:0;padding:7px 12px;border-radius:12px;background:var(--ink);color:#fbf9f3;text-align:right;pointer-events:none;white-space:nowrap;
 box-shadow:0 12px 24px -10px rgba(0,0,0,.6);transition:opacity .2s,transform .35s var(--out),top .6s var(--out)}
.ruler-read b{display:block;font:700 22px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ruler-read small{display:block;margin-top:4px;font:600 13px/1 var(--serif);letter-spacing:.12em;color:#e8dcc4}
.ruler.dragging .ruler-read{opacity:1;transform:translate(0,-50%);transition:opacity .15s,transform .3s var(--out)}
.ruler.dragging .ruler-stop{opacity:.55}.ruler.dragging .ruler-stop.near{opacity:1}
.ruler-alt{position:absolute;right:0;bottom:calc(100% + 10px);display:flex;align-items:baseline;gap:6px;padding:5px 10px;border-radius:9px;background:rgba(28,42,37,.86);color:#fbf9f3;white-space:nowrap;pointer-events:none}
.ruler-alt small{font:600 11.5px/1 var(--serif);letter-spacing:.14em;color:#d9cfb8}
.ruler-alt b{font:700 15px/1 var(--sans);font-variant-numeric:tabular-nums}
.ruler.is-hidden{opacity:0;transform:translateX(16px);visibility:hidden;pointer-events:none;transition:opacity .22s,transform .3s var(--out),visibility 0s linear .3s}

/* ---------- 印章 seal dock ---------- */
.seal-dock{position:absolute;z-index:22;width:0;height:0;pointer-events:none}
.seal-dock>*{pointer-events:auto}
.seal{position:absolute;left:-38px;top:-38px;width:76px;height:76px;border-radius:20px;background:var(--seal);color:var(--seal-ink);
 box-shadow:inset 0 0 0 3px #a3302a,inset 0 0 0 4.5px rgba(255,236,224,.62),0 1px 2px rgba(80,14,8,.3),0 16px 30px -12px rgba(110,22,12,.75);
 transition:transform .6s var(--fan),border-radius .6s var(--fan),box-shadow .3s}
.seal-face{display:grid;place-content:center;height:100%;font:700 21px/1.08 var(--serif);text-align:center;transition:transform .6s var(--fan)}
.seal-face span{display:block}
.seal:active{transform:scale(.9);transition:transform .08s}
@media(hover:hover){.seal:hover{transform:translateY(-2px) rotate(-2deg)}}
.seal:focus-visible{outline:3px solid var(--dai);outline-offset:4px}
.seal-dock.open .seal{transform:rotate(45deg) scale(.8);border-radius:50%}
.seal-dock.open .seal-face{transform:rotate(-45deg)}
/* Visible, collapsed seal always invites interaction. Stored first-use state only hides the text hint. */
.seal::before,.seal::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px rgba(181,57,44,.55);opacity:0;pointer-events:none}
.seal-dock:not(.open) .seal::before{animation:inkRing 3.2s var(--out) infinite}
.seal-dock:not(.open) .seal::after{animation:inkRing 3.2s var(--out) 1.6s infinite}
.seal-dock:not(.open) .seal{animation:sealNudge 6s ease-in-out infinite}
.seal-hint{position:absolute;left:0;top:-80px;transform:translate(-50%,6px);padding:7px 13px;border-radius:999px;background:var(--ink);color:#fbf9f3;font-size:13.5px;white-space:nowrap;opacity:0;pointer-events:none;
 box-shadow:0 10px 22px -10px rgba(0,0,0,.6);transition:opacity .4s,transform .6s var(--out)}
.seal-hint::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;background:var(--ink);transform:rotate(45deg);border-radius:2px}
.seal-dock:not(.seen):not(.open) .seal-hint{opacity:1;transform:translate(-50%,0);transition-delay:1.2s}
@keyframes inkRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
@keyframes sealNudge{0%,24%,100%{transform:none}4%{transform:rotate(-5deg) scale(1.035)}9%{transform:rotate(4deg) scale(1.035)}14%{transform:rotate(-2deg)}19%{transform:rotate(1deg)}}
.petals{position:absolute;left:0;top:0;width:0;height:0}
.petal{position:absolute;left:-30px;top:-30px;width:60px;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;visibility:hidden;pointer-events:none;
 transform:scale(.3);transition:transform .28s var(--out),opacity .18s,visibility 0s linear .28s}
.petal i{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fdfaf2;color:var(--ink);font:700 22px/1 var(--serif);font-style:normal;
 box-shadow:inset 0 0 0 1.5px rgba(28,42,37,.16),0 12px 24px -10px rgba(0,0,0,.55);transition:transform .45s var(--out),background-color .18s}
.petal em{font-style:normal;font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.7),0 0 10px rgba(0,0,0,.35)}
.petal.zhu i{background:var(--seal);color:var(--seal-ink);box-shadow:inset 0 0 0 2px #a3302a,inset 0 0 0 3.5px rgba(255,236,224,.55),0 12px 24px -10px rgba(110,22,12,.7)}
.seal-dock.open .petal{opacity:1;visibility:visible;pointer-events:auto;transform:translate(var(--x),var(--y));
 transition:transform .62s var(--fan) calc(var(--i)*40ms),opacity .2s calc(var(--i)*40ms),visibility 0s}
.petal:active i{transform:scale(.88);transition-duration:.08s}
@media(hover:hover){.petal:hover i{transform:translateY(-3px)}}
.petal:focus-visible{outline:none}.petal:focus-visible i{outline:2px solid #fbf9f3;outline-offset:3px}
.seal-scrim{position:absolute;inset:0;z-index:21;background:rgba(18,24,20,.34);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}
body.seal-open .seal-scrim{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}

/* ---------- desktop / tablet ---------- */
@media (min-width:961px),(min-width:821px) and (orientation:portrait),(min-width:821px) and (min-height:521px){
 .lens-ring{top:16px;left:var(--map-x);right:20px;max-width:720px;margin:0 auto}
 .guesthouse-shortcut{top:108px;left:var(--map-x)}
 .stamp-row{top:128px;right:156px;flex-direction:column;gap:8px}
 .settings-wrap{top:0;right:calc(100% + 12px)}
 .ruler{right:18px;top:160px;bottom:130px}
 .seal-dock{left:calc((var(--map-x) + 100vw - var(--rail-w)) / 2);bottom:62px}
 body:not(.with-panel) .seal-dock{left:calc((100vw - var(--rail-w)) / 2)}
 .route-hud{top:20px;right:var(--rail-w)}
 .flight-hint{top:84px}
 .map-meta{bottom:24px}
 body.card-open .seal-dock,body.route-on .seal-dock{opacity:0;visibility:hidden}
 .seal-dock{transition:opacity .3s,visibility 0s}
}
/* ---------- phones (portrait) ---------- */
@media (max-width:820px) and (orientation:portrait),(max-width:820px) and (min-height:521px){
 :root{--stamp:42px}
 .lens-ring{top:calc(8px + var(--st));left:0;right:0;height:72px}
 .guesthouse-shortcut{top:calc(92px + var(--st));left:12px}
 .stamp-row{top:calc(150px + var(--st));left:12px;right:auto;flex-direction:column;gap:8px}
 .stamp-tools{gap:2px;padding:4px}
 .ruler{right:6px;top:calc(170px + var(--st));bottom:calc(170px + var(--sb));width:118px}
 .seal-dock{left:50%;bottom:calc(var(--fb) + 61px)}
 /* Only the scale stays beside the seal; the gesture hint lives in the guide. */
 .map-meta{left:12px;right:auto;bottom:calc(var(--fb) + 23px)}
 .map-meta .status{gap:0;padding:0 10px}
 .map-meta .status-dot,.map-meta #scene-status{display:none}
 .ruler-stop{font-size:13px;height:26px;margin-top:-13px;padding:0 8px}
 .gesture-tour{padding:calc(110px + var(--st)) 90px calc(140px + var(--sb)) 62px}
 body.panel-open .stamp-row,body.card-open .stamp-row,body.route-on .stamp-tools,body.map-chrome-hidden:not(.settings-open) .stamp-tools,
 body.panel-open .seal-dock,body.card-open .seal-dock,body.settings-open .seal-dock,body.route-on .seal-dock,body.map-chrome-hidden .seal-dock{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,visibility 0s linear .22s}
 .seal-dock,.stamp-row{transition:opacity .35s var(--out),visibility 0s}
}
/* All five phone tools remain available even at 320px. */
/* ---------- landscape phones ---------- */
@media (max-width:960px) and (orientation:landscape) and (max-height:520px){
 :root{--stamp:38px}
 .lens-ring{top:calc(8px + var(--st));left:168px;right:132px;height:66px}
 .lens-track button{font-size:22px}
 .guesthouse-shortcut{top:calc(8px + var(--st));left:calc(8px + var(--sl))}
 .stamp-row{top:calc(66px + var(--st));left:calc(8px + var(--sl));flex-direction:column}
 .settings-wrap{right:auto;left:0;top:calc(100% + 8px)}
 .ruler{right:calc(4px + var(--sr));top:calc(56px + var(--st));bottom:calc(24px + var(--sb));width:118px}
 .seal-dock{left:50%;bottom:calc(52px + var(--sb))}
 .seal{transform:scale(.86)}
 .map-meta{left:calc(8px + var(--sl));bottom:calc(12px + var(--sb))}
 body.panel-open .seal-dock,body.card-open .seal-dock,body.route-on .seal-dock{opacity:0;visibility:hidden;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
 .seal-dock .seal,.seal-dock .seal::before,.seal-dock .seal::after{animation:none!important}
 .seal-dock:not(.open) .seal{box-shadow:inset 0 0 0 3px #a3302a,inset 0 0 0 4.5px rgba(255,236,224,.62),0 0 0 4px rgba(181,57,44,.3),0 16px 30px -12px rgba(110,22,12,.75)}
}
@media (max-width:820px),(max-width:960px) and (orientation:landscape) and (max-height:520px){
 .stamp-row .tool-zoom{display:none}
}