/* Scoped skins for POI, photo and guide only. Coordinates match the cropped alpha PNGs. */
.feature-sheet:is(.ordinary-sheet,.photo-sheet,.guide-sheet).open {
  --panel-ratio:1092/1108;
  position:fixed!important;left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;
  width:min(calc(100vw - 24px),420px,calc((100dvh - 30px - var(--safe-top) - var(--safe-bottom))*var(--panel-ratio)))!important;
  height:auto!important;aspect-ratio:var(--panel-ratio)!important;max-height:none!important;
  transform:translate(-50%,-50%)!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
.feature-sheet.photo-sheet.open{--panel-ratio:992/1101}
.feature-sheet.guide-sheet.open{--panel-ratio:962/1247}
.feature-sheet:is(.ordinary-sheet,.photo-sheet,.guide-sheet) .feature-content{inset:0!important;width:100%!important;height:100%!important;padding:0!important;background:transparent!important;overflow:hidden!important}
.feature-sheet:is(.ordinary-sheet,.photo-sheet,.guide-sheet) .online-feature-detail{position:relative!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;background:transparent!important}
.feature-sheet:is(.ordinary-sheet,.photo-sheet,.guide-sheet) header #feature-back{display:none!important}
.feature-sheet:is(.ordinary-sheet,.photo-sheet,.guide-sheet) header #close-feature{right:3%!important;top:3%!important;width:13%!important;height:auto!important;aspect-ratio:1!important;min-width:40px!important;min-height:40px!important}
.feature-sheet:is(.ordinary-sheet,.photo-sheet,.guide-sheet) .online-go{min-height:0!important;right:auto!important;padding:0!important;background:transparent!important;box-shadow:none!important;color:transparent!important;border:0!important}
.ordinary-sheet .ordinary-poi-detail .detail-title{left:5%!important;right:5%!important;top:17%!important;height:9%!important;padding:0 6% 0 10%!important;font-size:15px!important}
.ordinary-sheet .ordinary-poi-detail>p{left:6%!important;right:6%!important;top:28%!important;height:5%!important;padding:0!important;font-size:11px!important}
.ordinary-sheet .ordinary-poi-detail>.guide-image-gallery{left:5.9%!important;right:5.9%!important;top:36.5%!important;height:46.7%!important;overflow-x:auto!important;overflow-y:hidden!important;background:transparent!important;border-radius:10px!important}
.ordinary-sheet .ordinary-poi-detail>.guide-image-gallery img{background:transparent!important;object-fit:cover!important}
.ordinary-sheet .ordinary-poi-detail>.online-go{left:4.7%!important;top:86.3%!important;bottom:auto!important;width:90.6%!important;height:10.5%!important}
.photo-sheet .online-feature-detail>.detail-title{position:absolute!important;left:7%!important;right:7%!important;top:13%!important;height:8%!important;padding:0 3% 0 10%!important;display:flex!important;align-items:center!important;background:transparent!important;border:0!important;box-shadow:none!important;font-size:15px!important}
.photo-sheet .detail-title>span{display:none!important}
.photo-sheet .online-feature-detail>img,.photo-sheet .online-feature-detail>.detail-placeholder{position:absolute!important;left:4.7%!important;right:auto!important;top:24.9%!important;width:90.6%!important;height:45.1%!important;max-height:none!important;margin:0!important;border:0!important;border-radius:10px!important;object-fit:cover!important;background:transparent!important}
.photo-sheet .detail-placeholder{color:transparent!important}
.photo-sheet .detail-gallery{display:none!important}
.photo-sheet .online-feature-detail>.photo-tip{position:absolute!important;left:6%!important;right:6%!important;top:73%!important;height:12%!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;color:#734a2b!important;overflow:auto!important;font-size:12px!important}
.photo-sheet .photo-tip b,.photo-sheet .photo-tip span{position:static!important;display:block!important;width:auto!important;height:auto!important;padding:0!important;margin:0 0 4px!important;background:transparent!important;line-height:1.4!important}
.photo-sheet .online-feature-detail>.online-go{left:4%!important;top:88%!important;bottom:auto!important;width:44.6%!important;height:9.5%!important}
.photo-sheet .photo-contact{position:absolute!important;left:51.4%!important;top:88%!important;width:44.6%!important;height:9.5%!important;padding:0!important;border:0!important;background:transparent!important;color:transparent!important;box-shadow:none!important}
.guide-sheet .guide-detail-heading{left:9%!important;right:9%!important;top:14%!important;height:5.5%!important;font-size:15px!important}
.guide-sheet .guide-media-wrap{left:5.4%!important;right:5.4%!important;top:22.85%!important;height:34%!important;border-radius:10px!important;background:transparent!important}
.guide-sheet .guide-detail>.guide-film-caption{position:absolute!important;left:7%!important;right:7%!important;top:59%!important;bottom:auto!important;height:9%!important;margin:0!important;padding:0!important;display:block!important;overflow:auto!important;background:transparent!important;color:#734a2b!important;text-shadow:none!important;font-size:12px!important;line-height:1.45!important}
.guide-sheet .guide-audio-list{left:7%!important;right:7%!important;top:70%!important;height:15%!important;display:flex!important;gap:16px!important;align-items:center!important;justify-content:flex-start!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity!important;touch-action:pan-x!important;scrollbar-width:none!important}
.guide-sheet .guide-audio-list::-webkit-scrollbar{display:none}
.guide-sheet .guide-audio-card{flex:0 0 auto!important;width:auto!important;max-width:none!important;height:min(64px,100%)!important;aspect-ratio:1!important;border:0!important}
.guide-sheet .guide-language{width:100%!important;height:100%!important;border-radius:50%!important;overflow:hidden!important;background:transparent!important;border:1px solid #c79548!important;touch-action:pan-x!important}
.guide-sheet .guide-language-image{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important}
.guide-sheet .guide-language b{position:absolute!important;left:4%!important;right:4%!important;top:8%!important;height:20%!important;font-size:10px!important}
.guide-sheet .guide-play-symbol{left:50%!important;top:61%!important;width:25px!important;height:25px!important;transform:translate(-50%,-50%)!important;border-width:1px!important;box-shadow:none!important}
.guide-sheet .online-go{left:5%!important;top:88%!important;bottom:auto!important;width:90%!important;height:8.5%!important}

/* Search framing uses CSS; the thumb is a separate DOM element. */
#search-panel.open{position:fixed!important;left:50%!important;top:calc(var(--search-viewport-offset,0px) + var(--overlay-top))!important;width:min(calc(100vw - 24px),440px)!important;height:min(72dvh,580px,calc(var(--search-viewport-height,100dvh) - var(--overlay-top) - 12px - var(--safe-bottom)))!important;max-height:calc(var(--search-viewport-height,100dvh) - var(--overlay-top) - 12px - var(--safe-bottom))!important;transform:translateX(-50%)!important;border:1px solid #bd904b!important;border-radius:16px!important;background:#fff5df!important;box-shadow:0 6px 22px #27150c33!important;box-sizing:border-box!important}
#search-panel label{left:14px!important;right:58px!important;top:12px!important;height:40px!important;padding:0 10px!important;border:1px solid #d4b16f!important;border-radius:10px!important;background:transparent!important;gap:8px!important}
#search-panel label::before,#search-panel label::after{display:none!important;content:none!important}
#search-panel label>span{width:18px!important;height:auto!important;opacity:1!important;font-size:15px!important;overflow:visible!important}
#search-panel input,#search-panel input:not(:placeholder-shown){height:100%!important;min-width:0!important;background:transparent!important;color:#69462d!important;box-shadow:none!important;text-shadow:none!important;font-size:14px!important}
#search-panel input::placeholder{color:#a58663!important}
#search-panel #close-search{right:10px!important;top:12px!important;width:40px!important;height:40px!important;min-height:0!important;aspect-ratio:1!important;background:#267d6b!important;border:1px solid #c69c54!important;border-radius:50%!important;color:#fff5df!important;font-size:25px!important}
#search-panel .search-filters{left:14px!important;right:14px!important;top:65px!important;height:64px!important;gap:7px 4px!important}
#search-panel .search-filters button{border:1px solid #dcc296!important;border-radius:6px!important;background:transparent!important;color:#865b35!important;font-size:11px!important;text-shadow:none!important}
#search-panel .search-filters button.active{background:#f4e4c3!important;color:#942e20!important;border-color:#c59651!important}
#search-panel .search-results{left:14px!important;right:31px!important;top:141px!important;bottom:14px!important;width:auto!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;scrollbar-gutter:auto!important;overscroll-behavior:contain;touch-action:pan-y}
#search-panel .poi-result{padding:9px 3px!important;border-radius:0!important;background:transparent!important;border-bottom:1px solid #d6b57855!important}
#search-panel .search-scroll-rail{position:absolute;right:5px;top:141px;bottom:14px;width:22px;touch-action:none}
#search-panel .search-scroll-rail[hidden]{display:none!important}
#search-panel .search-scroll-rail::before{content:"";position:absolute;left:10px;top:7px;bottom:7px;width:2px;border-radius:2px;background:#d8bb88}
#search-panel .search-scroll-thumb{position:absolute;left:3px;top:0;width:16px;height:16px;margin:0;padding:0;border:1px solid #b58232;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f8dda0,#be903a);box-shadow:none;touch-action:none}

/* Every cell owns its grid edges, so separators and items move together. */
.bag-panel>.bag-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-rows:max-content!important;gap:0!important;align-content:start!important;align-items:start!important;padding:0!important;border-left:1px solid #c6a56c99;border-top:1px solid #c6a56c99;overscroll-behavior:contain;touch-action:pan-y}
.bag-panel>.bag-grid>.bag-item{box-sizing:border-box!important;width:100%!important;min-width:0!important;aspect-ratio:1/1!important;margin:0!important;transform:none!important;border-right:1px solid #c6a56c99!important;border-bottom:1px solid #c6a56c99!important;border-radius:0!important;background:none!important;box-shadow:none!important}
.bag-panel>.bag-grid>.bag-item-empty{pointer-events:none;cursor:default}
.bag-panel>.bag-grid>.bag-item .bag-item-name{left:5%!important;width:90%!important;height:18%!important;top:75%!important;line-height:1.2!important;overflow:hidden!important}
#search-panel .search-filters{display:grid!important;width:auto!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;pointer-events:auto!important}
#search-panel .search-filters button{position:relative!important;inset:auto!important;width:auto!important;height:100%!important;min-height:0!important;line-height:1!important;padding:0 2px!important}
.feature-sheet.guide-sheet .guide-audio-list[data-guide-count]{justify-content:flex-start!important;overflow-x:auto!important;overflow-y:hidden!important}

/* Media coordinates belong to the new art; discard offsets from the old skin.
   Put the transparent art above photos, while text and controls stay above art. */
.feature-sheet:is(.ordinary-sheet,.photo-sheet,.guide-sheet) .feature-content,
.feature-sheet:is(.ordinary-sheet,.photo-sheet,.guide-sheet) .online-feature-detail{z-index:auto!important;isolation:auto!important;transform:none!important}
.ordinary-sheet>.ordinary-poi-panel-art,
.photo-sheet>.photo-panel-art,
.guide-sheet>.guide-panel-art{z-index:3!important;pointer-events:none!important}
.feature-sheet:is(.ordinary-sheet,.photo-sheet,.guide-sheet)>header{z-index:5!important}
.feature-sheet:is(.ordinary-sheet,.photo-sheet,.guide-sheet) .online-feature-detail>.detail-title,
.feature-sheet:is(.ordinary-sheet,.photo-sheet,.guide-sheet) .online-feature-detail>p,
.feature-sheet:is(.ordinary-sheet,.photo-sheet,.guide-sheet) .online-feature-detail>.guide-detail-heading,
.feature-sheet:is(.ordinary-sheet,.photo-sheet,.guide-sheet) .online-feature-detail>.guide-audio-list,
.feature-sheet:is(.ordinary-sheet,.photo-sheet,.guide-sheet) .online-feature-detail>.online-go,
.photo-sheet .photo-contact{z-index:4!important}
.ordinary-sheet .ordinary-poi-detail>.guide-image-gallery,
.photo-sheet .online-feature-detail>img,
.photo-sheet .online-feature-detail>.detail-placeholder,
.guide-sheet .guide-media-wrap{z-index:1!important;transform:none!important;margin:0!important;padding:0!important;box-sizing:border-box!important;border:0!important;border-radius:0!important}
.ordinary-sheet .ordinary-poi-detail>.guide-image-gallery{left:5.7692%!important;right:5.8608%!important;top:36.4621%!important;height:46.7509%!important}
.photo-sheet .online-feature-detail>img,.photo-sheet .online-feature-detail>.detail-placeholder{left:4.6371%!important;top:24.8865%!important;width:90.625%!important;height:45.1408%!important}
.guide-sheet .guide-media-wrap{left:5.4054%!important;right:5.4054%!important;top:22.8549%!important;height:34.0016%!important}
.ordinary-sheet .guide-image-gallery img,
.guide-sheet .guide-media-stage,
.guide-sheet .guide-media-stage img{transform:none!important;border:0!important;border-radius:0!important;margin:0!important;max-height:none!important;width:100%!important;height:100%!important;object-fit:cover!important}

/* Restrained Tang-style search: jade rim, gold inlay and cloud corner ornaments. */
#search-panel.open{border:2px solid #ac792e!important;border-radius:20px 12px 20px 12px!important;background:radial-gradient(ellipse at 12% 0%,#ffe9b777,transparent 52%),linear-gradient(110deg,#fff7e4,#fff2d6)!important;box-shadow:inset 0 0 0 2px #ffe8a2,inset 0 0 0 5px #297967,inset 0 0 0 6px #c69a4b,0 8px 24px #27150c40!important}
#search-panel.open::before,#search-panel.open::after{content:"";position:absolute;width:30px;height:20px;pointer-events:none;z-index:2;border:2px solid #c39443;background:#fff0cc;box-shadow:inset 0 0 0 2px #ffe7a0}
#search-panel.open::before{left:-3px;top:-3px;border-radius:22px 5px 18px 5px;border-right-color:#2b806c;transform:rotate(-12deg)}
#search-panel.open::after{right:-3px;bottom:-3px;border-radius:18px 5px 22px 5px;border-left-color:#2b806c;transform:rotate(-12deg)}
#search-panel label{top:16px!important;left:16px!important;border-color:#bf903e!important;border-radius:13px 5px 13px 5px!important;background:linear-gradient(#fff9e9,#f9e9c5)!important;box-shadow:inset 0 0 0 2px #fff8e0!important}
#search-panel #close-search{top:16px!important;right:12px!important;width:36px!important;height:36px!important;border:2px solid #d9ad58!important;background:linear-gradient(#358f79,#1c6655)!important;box-shadow:0 0 0 1px #ad792c,inset 0 0 0 1px #8ab99a!important}
#search-panel .search-filters{top:68px!important;left:16px!important;right:16px!important}
#search-panel .search-filters button{border-radius:9px 3px 9px 3px!important;border-color:#d5b478!important;background:#fff8e84d!important;color:#78512d!important}
#search-panel .search-filters button.active{background:#287762!important;color:#fff1c6!important;border-color:#bf903e!important;box-shadow:inset 0 0 0 1px #82a786!important}
#search-panel .search-results{left:17px!important;right:34px!important;bottom:18px!important}
#search-panel .poi-result{border-bottom-color:#bc985744!important}
#search-panel .poi-result b{color:#783a26;font-family:STKaiti,KaiTi,serif}
#search-panel .search-scroll-rail{right:8px;bottom:18px}
#search-panel .search-scroll-thumb{border-color:#a8792c;background:radial-gradient(circle at 35% 30%,#bfe0bc,#3c9278 52%,#226754);box-shadow:0 0 0 1px #efd089}

#search-panel #close-search{min-width:0!important;max-width:36px!important;box-sizing:border-box!important}

/* A visible detail or image viewer owns taps; the lantern underneath is inactive. */
body:has(#feature-sheet.open) #collapse-ui,body:has(#photo-lightbox) #collapse-ui{pointer-events:none!important}

html:has(#search-panel.open),body:has(#search-panel.open){overscroll-behavior:none!important}
body:has(#search-panel.open){position:fixed!important;inset:0!important;width:100%!important;overflow:hidden!important}
#search-panel.open{overscroll-behavior:none;touch-action:pan-y}
#search-panel.open .search-results{overscroll-behavior:none;touch-action:pan-y}

.photo-sheet .online-feature-detail>p.photo-tip{top:calc(70.1% + 5px)!important}
