/* ============================================================
   迪士尼 · Midnight Gold
   午夜蓝黑 + 香槟金 · 画册质感
   ============================================================ */
:root{
  --bg:#0E0F13;
  --bg-2:#13151A;
  --card:#17191F;
  --ink:#F3F0EA;
  --ink-2:#A9A49C;
  --ink-3:#6B6760;
  --gold:#C6A45C;
  --gold-2:#E6D3A3;
  --line:rgba(198,164,92,.18);
  --line-2:rgba(255,255,255,.06);
  --pad:16px;
  --r:3px;
  --gap:12px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --serif:"Noto Serif SC","Songti SC","Source Han Serif SC",serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Noto Sans SC",sans-serif;
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.6;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(198,164,92,.10), transparent 70%),
    radial-gradient(50% 30% at 85% 15%, rgba(198,164,92,.05), transparent 70%);
}
.view,.hd,.dhd,.foot,.gate{position:relative;z-index:1}

/* ================= 密码门 ================= */
.gate{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:0 30px 80px;position:relative;overflow:hidden}
.gate::before{
  content:"";position:absolute;width:420px;height:420px;left:50%;top:20%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle, rgba(198,164,92,.16), transparent 62%);
}
.gate-frame{width:100%;max-width:330px;position:relative;text-align:center}
.gate-mark{
  font-family:var(--serif);font-size:15px;letter-spacing:.9em;text-indent:.9em;
  color:var(--gold);margin-bottom:0;opacity:.92;
}
.gate-orn{
  width:52px;height:1px;margin:0 auto 28px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6;
}
.gate-title{font-family:var(--serif);font-size:27px;letter-spacing:.5em;text-indent:.5em;
  font-weight:400;color:var(--ink);margin-bottom:12px}
.gate-sub{font-size:11px;color:var(--ink-3);letter-spacing:.32em;text-indent:.32em;margin-bottom:38px}
.gate-form{width:100%}
.gate-input{
  width:100%;padding:13px 2px;font-size:16px;text-align:center;letter-spacing:.42em;
  color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);
  outline:none;transition:border-color .3s;margin-bottom:28px;font-family:var(--serif);
}
.gate-input::placeholder{color:var(--ink-3);letter-spacing:.3em;font-size:12.5px}
.gate-input:focus{border-bottom-color:var(--gold)}
.gate-btn{
  width:100%;padding:14px;font-size:13.5px;letter-spacing:.5em;text-indent:.5em;
  color:#12100B;background:linear-gradient(135deg,var(--gold-2),var(--gold));
  border-radius:var(--r);font-weight:600;transition:.25s;
}
.gate-btn:active{transform:scale(.985);filter:brightness(1.06)}
.gate-err{
  font-size:11.5px;color:#D98A6A;letter-spacing:.16em;height:18px;margin-bottom:14px;
  opacity:0;transition:.2s;
}
.gate-err.on{opacity:1}
.gate-foot{
  position:absolute;bottom:calc(28px + var(--safe-b));left:0;right:0;text-align:center;
  font-size:10px;color:var(--ink-3);letter-spacing:.26em;
}

/* ================= 首页头部 ================= */
.hd{
  position:sticky;top:0;z-index:30;
  background:rgba(14,15,19,.9);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line-2);padding-bottom:4px;
}
.brand{display:flex;align-items:center;gap:11px;height:52px;padding:0 var(--pad)}
.bname{
  font-family:var(--serif);font-size:18px;font-weight:500;letter-spacing:.28em;text-indent:.28em;
  color:var(--gold);flex:0 0 auto;
}
.bline{width:1px;height:13px;background:var(--line);flex:0 0 auto}
.bslogan{font-size:10px;color:var(--ink-3);letter-spacing:.24em;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.notice{display:flex;align-items:center;gap:9px;height:28px;margin:0 var(--pad);
  background:rgba(198,164,92,.07);border:1px solid rgba(198,164,92,.14);border-radius:2px;
  padding:0 10px;overflow:hidden}
.notice .tag{
  flex:0 0 auto;font-size:9px;font-weight:600;letter-spacing:.16em;color:var(--gold);
  border-right:1px solid rgba(198,164,92,.3);padding-right:8px;
}
.nwrap{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 26px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 26px),transparent)}
.track{display:inline-flex;white-space:nowrap;will-change:transform;animation:marq 9s linear infinite}
.track span{font-size:11.5px;color:var(--ink-2);padding-right:60px;letter-spacing:.04em}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.notice:hover .track,.notice:active .track{animation-play-state:paused}

.search{display:flex;align-items:center;gap:10px;margin:10px var(--pad) 0;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:2px;
  padding:0 13px;height:38px;transition:border-color .25s}
.search:focus-within{border-color:rgba(198,164,92,.35)}
.search svg{width:15px;height:15px;stroke:var(--ink-3);fill:none;stroke-width:1.8;flex:0 0 auto}
.search input{flex:1;border:0;background:none;outline:none;font-size:16px;color:var(--ink);min-width:0;letter-spacing:.02em}
.search input::placeholder{color:var(--ink-3);letter-spacing:.06em}

.tabs{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;padding:12px var(--pad) 10px}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;font-size:12.5px;letter-spacing:.14em;color:var(--ink-3);
  padding:4px 0 6px;position:relative;transition:color .22s;white-space:nowrap;
}
.tab i{font-style:normal;font-size:10px;opacity:.5;margin-left:4px}
.tab.on{color:var(--gold)}
.tab.on::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
}

/* ================= 卡片 ================= */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);padding:6px var(--pad) 14px}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,1fr)}}

.card{
  display:block;background:var(--card);border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-2);transition:border-color .3s,transform .3s;
  animation:up .5s cubic-bezier(.22,.61,.36,1) backwards;
}
.card:active{transform:scale(.985)}

.thumb{position:relative;aspect-ratio:3/4;overflow:hidden;background:#1A1C22}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.96) contrast(1.04)}
.ph{position:absolute;inset:0;background-size:contain,cover;background-repeat:no-repeat,no-repeat;
  background-position:center bottom,center}

.corner{
  position:absolute;top:9px;left:9px;padding:3px 7px;font-size:9px;letter-spacing:.14em;
  color:var(--gold-2);background:rgba(14,15,19,.62);border:1px solid rgba(198,164,92,.42);
  backdrop-filter:blur(6px);border-radius:1px;
}
.corner.gray{color:var(--ink-2);border-color:rgba(255,255,255,.18)}

.meta{display:flex;align-items:baseline;gap:8px;padding:11px 11px 13px;min-width:0}
.badge{
  flex:0 0 auto;font-size:9.5px;letter-spacing:.1em;color:var(--ink-2);
  border:1px solid var(--line-2);padding:2px 6px;border-radius:1px;background:none;
}
.nm{font-family:var(--serif);font-size:15px;font-weight:400;letter-spacing:.14em;
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.num{display:none}

.empty{padding:70px 0;text-align:center;color:var(--ink-3);font-size:13px;letter-spacing:.1em}

/* ================= 详情页 ================= */
.dhd{
  position:fixed;top:0;left:0;right:0;z-index:80;
  height:calc(50px + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) var(--pad) 0;
  display:flex;align-items:center;
  background:rgba(14,15,19,.96);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line-2);
}
.dhd .dhd-back{display:flex;align-items:center;gap:5px;height:32px;padding:0 13px 0 9px;margin-left:-7px;border-radius:16px;border:1px solid rgba(198,164,92,.32);color:var(--gold-2);font-size:12.5px;letter-spacing:.1em;background:none;transition:background .2s}
.dhd .dhd-back svg{width:16px;height:16px;stroke:var(--gold-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dhd .dhd-back:active{background:rgba(198,164,92,.12)}
.dhd .cnt{
  margin-left:auto;font-family:var(--serif);font-size:12px;color:var(--ink-2);
  letter-spacing:.3em;text-indent:.3em;
}

.hero{position:relative;background:#000}
.hero-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hero-track::-webkit-scrollbar{display:none}
.hero-track .slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:3/4;position:relative;overflow:hidden}
.hero-track .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.96) contrast(1.04)}
.hero-count{
  position:absolute;right:14px;bottom:14px;z-index:5;font-size:10px;letter-spacing:.2em;
  color:var(--gold-2);background:rgba(14,15,19,.72);border:1px solid rgba(198,164,92,.3);
  padding:3px 9px;border-radius:1px;font-variant-numeric:tabular-nums;
  backdrop-filter:blur(6px);
}

.info{padding:26px var(--pad) 0;text-align:center}
.line1{display:flex;align-items:center;justify-content:center;gap:11px}
.line1 .badge{font-size:10px;letter-spacing:.14em;color:var(--gold);border-color:rgba(198,164,92,.32)}
.line1 .nm{font-family:var(--serif);font-size:25px;letter-spacing:.24em;text-indent:.24em;font-weight:400}

.actions{display:flex;gap:10px;margin:24px 0 0}
.act{
  flex:1;height:46px;display:flex;align-items:center;justify-content:center;gap:7px;
  border-radius:var(--r);font-size:13px;letter-spacing:.16em;transition:.24s;
  position:relative;overflow:hidden;min-width:0;
}
.act svg{width:16px;height:16px;fill:none;stroke-width:1.6;flex:0 0 auto}
.act b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.act.want{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#12100B;font-weight:600;
  box-shadow:0 6px 22px rgba(198,164,92,.22);
}
.act.want svg{stroke:#12100B}
.act.like,.act.views{
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);color:var(--ink-2);
}
.act.like svg,.act.views svg{stroke:var(--ink-3)}
.act.views{cursor:default}
.act.views b{color:var(--ink)}
.act.done{opacity:.45}
.act:active{transform:scale(.985)}
@keyframes actpop{0%{transform:scale(1)}45%{transform:scale(1.05)}100%{transform:scale(1)}}
.act.pop{animation:actpop .36s cubic-bezier(.34,1.56,.64,1)}

.intro{
  font-size:13.5px;line-height:2;color:var(--ink-2);margin-top:22px;text-align:left;
  white-space:pre-wrap;letter-spacing:.02em;
  padding-top:20px;border-top:1px solid var(--line-2);
}

.photos{display:flex;flex-direction:column;gap:1px;background:var(--bg);padding-top:22px}
.photos .p{position:relative;min-height:140px;background:var(--bg-2)}
.photos .p img{position:relative;z-index:1;width:100%;display:block;filter:saturate(.97) contrast(1.03)}
.photos .p .ph{position:absolute;inset:0;background-size:cover;background-position:center}

.sec{display:flex;align-items:baseline;justify-content:space-between;padding:36px var(--pad) 14px}
.sec h2{
  font-family:var(--serif);font-size:14px;font-weight:400;letter-spacing:.3em;text-indent:.3em;
  color:var(--ink);position:relative;padding-left:13px;
}
.sec h2::before{
  content:"";position:absolute;left:0;top:50%;width:1px;height:12px;
  background:var(--gold);transform:translateY(-50%);
}
.sec span{font-size:10.5px;color:var(--ink-3);letter-spacing:.16em}

#vids{display:flex;flex-direction:column;gap:2px;padding:0 var(--pad)}
#vids .cell{width:100%;background:#000;position:relative;border-radius:var(--r);overflow:hidden}
#vids video{width:100%;max-height:72vh;object-fit:contain;display:block;background:#000}

.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:0 var(--pad)}
.reviews .rv{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg-2);
  cursor:pointer;border-radius:1px}
.reviews .rv img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.reviews .rv .ph{position:absolute;inset:0;background-size:cover;background-position:center}

.foot{
  padding:44px 0 calc(44px + var(--safe-b));text-align:center;
  font-size:10px;color:var(--ink-3);letter-spacing:.24em;
}
.foot::before{
  content:"";display:block;width:24px;height:1px;margin:0 auto 18px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5;
}

.home-fab{
  position:fixed;right:14px;bottom:calc(22px + var(--safe-b));z-index:60;
  width:auto;height:42px;padding:0 17px 0 15px;border-radius:21px;
  display:flex;align-items:center;gap:7px;
  background:rgba(18,19,24,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--gold-2);border:1px solid rgba(198,164,92,.34);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .18s,background .18s;text-decoration:none;
}
.home-fab:active{transform:scale(.95);background:rgba(18,19,24,.95)}
.home-fab svg{width:16px;height:16px;stroke:var(--gold-2);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.home-fab span{font-size:12.5px;font-weight:500;letter-spacing:.2em;line-height:1}

.sentinel{height:1px}
.endtip{
  display:none;text-align:center;padding:28px 0 calc(34px + var(--safe-b));
  font-size:11px;color:var(--ink-3);letter-spacing:.24em;
}

.lightbox{
  position:fixed;inset:0;z-index:99;background:#08090B;display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity .26s ease;
}
.lightbox.on{opacity:1;pointer-events:auto}
/* 关闭时立刻撤掉模糊和缩放，只让整层淡出，避免掉帧 */
.lightbox.closing .lb-bg,
.lightbox.closing .lb-slide .ph{ filter:none !important; transform:none !important; }
.lightbox.closing .lb-slide .lb-fg{ opacity:1 !important; }
.lb-head{
  position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;
  justify-content:space-between;padding:calc(16px + env(safe-area-inset-top,0px)) 18px 16px;
  background:linear-gradient(180deg,rgba(0,0,0,.6),transparent);
}
#lbIdx{font-size:12px;color:var(--gold-2);letter-spacing:.3em;font-variant-numeric:tabular-nums}
.lb-close{
  width:33px;height:33px;border-radius:50%;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);color:var(--ink);font-size:13px;
  display:grid;place-items:center;
}
.lb-viewport{flex:1;overflow:hidden;position:relative;display:flex;align-items:center;touch-action:pan-y}
.lb-track{display:flex;height:100%;width:100%;will-change:transform}
.lb-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;position:relative;padding:0;overflow:hidden;background:#08090B}
/* 背景层：同一张图放大裁切 + 重度模糊，把黑边填掉 */
.lb-slide .lb-bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:blur(30px) brightness(.5) saturate(.85);
  transform:scale(1.18);
  pointer-events:none;
}
/* 前景层：完整显示，不裁切 */
.lb-slide .lb-fg{
  position:relative; z-index:1;
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  -webkit-user-drag:none;
}
.lb-slide .ph{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;filter:blur(24px) brightness(.5)}

#toast{
  position:fixed;left:50%;bottom:calc(38px + var(--safe-b));transform:translate(-50%,14px);
  background:rgba(24,25,30,.94);border:1px solid rgba(198,164,92,.3);color:var(--gold-2);
  font-size:12px;letter-spacing:.14em;padding:9px 18px;border-radius:2px;
  opacity:0;pointer-events:none;transition:opacity .24s,transform .24s;z-index:120;
  backdrop-filter:blur(10px);white-space:nowrap;
}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* 密码门品牌下方的 slogan */
.gate-slogan{
  font-size:9.5px;color:rgba(198,164,92,.68);letter-spacing:.3em;text-indent:.3em;
  margin:11px 0 26px;line-height:1.6;
}


/* ============================================================
   动效 —— 轻微，不抢戏
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* 页面淡入 */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body{animation:pageIn .45s cubic-bezier(.22,.61,.36,1) both}

/* 图片渐显 + 微收 */
.thumb img,.hero-track .slide img,.photos .p img,.reviews .rv img{
  opacity:0;transform:scale(1.018);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.thumb img.loaded,.hero-track .slide img.loaded,.photos .p img.loaded,
.reviews .rv img.loaded{opacity:1;transform:none}

/* 全屏图：前景只淡入，背景层常驻 */
.lb-slide .lb-fg{opacity:0;transition:opacity .5s ease}
.lb-slide .lb-fg.loaded{opacity:1}

/* 占位骨架扫光 */
.ph{overflow:hidden}
.ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(198,164,92,.075) 50%,transparent 62%);
  background-size:220% 100%;
  animation:shimmer 2s linear infinite;
}
@keyframes shimmer{0%{background-position:190% 0}100%{background-position:-90% 0}}

/* 详情页分块入场 */
@keyframes riseIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.hero{animation:pageIn .55s ease both}
/* 顶部栏用 fixed，让位交给内容块 */


.line1{animation:riseIn .5s .04s ease both}
.actions{animation:riseIn .5s .09s ease both}
.intro{animation:riseIn .5s .14s ease both}
.photos .p:first-child{animation:riseIn .5s .18s ease both}
.sec{animation:riseIn .45s ease both}

/* 视频淡入 */
#vids video{opacity:0;transition:opacity .55s ease}
#vids video.loaded{opacity:1}

/* 卡片入场更柔 */
@keyframes up{0%{opacity:0;transform:translateY(7px) scale(.998)}55%{opacity:1}100%{opacity:1;transform:none}}

/* tab 切换过渡 */
.tab{transition:color .25s ease}
.tab.on::after{animation:tabLine .3s ease both}
@keyframes tabLine{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}

/* 按钮按下 */
.act,.card,.home-fab,.gate-btn{transition:transform .18s cubic-bezier(.34,1.56,.64,1),opacity .2s,background .2s,border-color .2s}

/* 悬浮按钮轻微呼吸 */
@keyframes breathe{0%,100%{box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 0 rgba(198,164,92,0)}
  50%{box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 5px rgba(198,164,92,.06)}}
.home-fab{animation:breathe 3.4s ease-in-out infinite}





/* 视频：按原始比例，无控件框 */
#vids{display:flex;flex-direction:column;gap:6px;padding:0 var(--pad)}
#vids .cell{position:relative;display:flex;justify-content:center;background:transparent;
  border-radius:2px;overflow:hidden;cursor:pointer}
#vids video{max-width:100%;height:auto;display:block;background:transparent}
#vids .vb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;transition:opacity .28s ease}
#vids .vb i{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(14,15,19,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(198,164,92,.42);box-shadow:0 6px 24px rgba(0,0,0,.35)}
#vids .vb i::after{content:"";margin-left:4px;border-left:15px solid var(--gold-2);
  border-top:9px solid transparent;border-bottom:9px solid transparent}
#vids .cell.playing .vb{opacity:0}
#vids .cell.playing .vb i{background:transparent;border-color:transparent;box-shadow:none}

/* 视频加载中：先占一块 3:4，图先出来 */
#vids .cell{aspect-ratio:3/4;background:#14161B}
#vids video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#14161B}
#vids .cell{position:relative;overflow:hidden}


/* 全屏浏览：彻底断掉触摸穿透 */
.lightbox{touch-action:none;overscroll-behavior:none}
.lb-viewport{touch-action:none;overscroll-behavior:contain}
.lb-slide img{touch-action:none;user-select:none;-webkit-user-drag:none}
body{overscroll-behavior-y:none}




/* 视频缓冲中：播放键换成转圈 */
#vids .cell.buffering .vb i{
  background:rgba(14,15,19,.55);border-color:rgba(198,164,92,.5);
}
#vids .cell.buffering .vb i::after{
  border:0;width:18px;height:18px;margin:0;border-radius:50%;
  border:2px solid rgba(230,211,163,.28);border-top-color:var(--gold-2);
  animation:vspin .8s linear infinite;
}
@keyframes vspin{to{transform:rotate(360deg)}}
#vids .cell.buffering .vb{opacity:1}

/* 全屏层：彻底压住 video 的独立渲染层 */
.lightbox{isolation:isolate;z-index:9999}
.lb-viewport,.lb-track,.lb-slide{isolation:isolate}

/* 浏览量：缩小成一行小字 */
.views-mini{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:14px;font-size:11.5px;color:var(--ink-3);letter-spacing:.14em;
}
.views-mini svg{width:13px;height:13px;stroke:var(--ink-3);fill:none;stroke-width:1.6}
.views-mini b{color:var(--ink-2);font-weight:500;font-size:12px;font-variant-numeric:tabular-nums}

/* 想玩：悬浮按钮 */
.fab-want{
  position:fixed;right:16px;bottom:calc(80px + var(--safe-b));z-index:55;
  height:50px;padding:0 22px 0 18px;border-radius:25px;
  display:flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#12100B;font-size:14px;font-weight:600;
  box-shadow:0 10px 30px rgba(198,164,92,.42),0 2px 8px rgba(0,0,0,.3);
  transition:transform .18s,opacity .2s,box-shadow .2s;
}
.fab-want svg{width:17px;height:17px;stroke:#12100B;fill:none;stroke-width:1.8}
.fab-want b{font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.fab-want:active{transform:scale(.94)}
.fab-want.done{opacity:.45}
.fab-want.pop{animation:actpop .36s cubic-bezier(.34,1.56,.64,1)}
.fab-want::before{
  content:"想玩";font-size:13px;font-weight:600;letter-spacing:.16em;
}

/* sticky 修复：overflow-x:hidden 会破坏吸附 */


/* 顶部返回首页 */
.dhd .dhd-home{
  margin-left:12px;height:30px;padding:0 12px 0 10px;border-radius:15px;
  display:flex;align-items:center;gap:5px;
  border:1px solid rgba(198,164,92,.32);color:var(--gold-2);
  font-size:11.5px;letter-spacing:.12em;text-decoration:none;
  transition:background .2s,border-color .2s;
}
.dhd .dhd-home:active{background:rgba(198,164,92,.12)}
.dhd .dhd-home svg{width:14px;height:14px;stroke:var(--gold-2);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* sticky 生效：祖先不能有 overflow 限制 */







/* ============================================================
   安卓兼容层
   ============================================================ */

/* 1) 让位改由第一个内容块承担，body 保持无 padding（iOS fixed 更稳） */


/* 2) 不支持 aspect-ratio 的老安卓：用 padding-top 百分比兜底 */
@supports not (aspect-ratio: 1 / 1){
  .thumb{padding-top:133.333%;height:0}
  .thumb img{position:absolute;inset:0;width:100%;height:100%}
  .reviews .rv{padding-top:133.333%;height:0}
  .reviews .rv img{position:absolute;inset:0}
  #vids .cell{padding-top:75%;height:0}
  #vids video{position:absolute;inset:0}
  .hero-track .slide{padding-top:133.333%;height:0}
  .hero-track .slide img{position:absolute;inset:0}
}

/* 3) 不支持 backdrop-filter 时给个实色底，避免顶栏透明糊住内容 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .hd,.dhd{background:rgba(14,15,19,.985)}
  .fab-want{box-shadow:0 8px 24px rgba(0,0,0,.5)}
}

/* 4) 消除移动端点击 300ms 延迟 + 防误触高亮 */
.tab,.card,.act,.rv,.dhd-back,.fab-want,.gate-btn,.cell,button,a{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* 5) 安卓地址栏伸缩导致的 100vh 跳动 */
.gate{min-height:100vh;min-height:100dvh}

/* 6) 横向滑动的容器加惯性，安卓上更跟手 */
.tabs,.hero-track,.rec,.reviews{
  -webkit-overflow-scrolling:touch;
}

/* 7) 视频在 X5 内核里的显示修正 */
#vids video{display:block;object-position:center;background:#14161B}
#vids .cell{transform:translateZ(0)}

/* 8) 图片拖拽/长按菜单在安卓上会干扰滑动 */
img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}


/* iOS Safari：fixed 元素在惯性滚动中会跟随文档滚动一小段，强制合成层修复。
   只对 Safari 生效（-webkit-touch-callout 为 Safari 独有），避免影响安卓。 */
/* 顶栏由 JS 每帧锁定位置（见 app.js） */





.dhd ~ .info{margin-top:calc(50px + env(safe-area-inset-top,0px))}




/* iOS 顶栏：与桌面共用同一套规则，靠 env() 让出状态栏高度。
   不再用 @supports 覆盖盒模型——之前的覆盖会导致背景盖不住留白区，
   露出页面底下的金色光晕，看起来像"凭空多出一块泛黄区域"。 */







/* 底部操作条：上一个 / 下一个 / 想玩 / 首页（页面内，非悬浮） */
.bottom-bar{
  display:flex;gap:7px;align-items:center;
  margin:26px var(--pad) 0;
  padding:0 0 calc(8px + env(safe-area-inset-bottom,0px));
}
.bb-btn{
  flex:1;height:44px;min-width:0;
  display:flex;align-items:center;justify-content:center;gap:4px;
  border:1px solid var(--line-2);border-radius:3px;background:none;
  color:var(--ink-2);font-size:12px;letter-spacing:.04em;
  transition:background .2s,border-color .2s,opacity .2s;
  text-decoration:none;
}
.bb-btn:active{background:rgba(255,255,255,.05)}
.bb-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.bb-btn span{white-space:nowrap}
.bb-btn.want{
  flex:1.15;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  border-color:transparent;color:#12100B;font-weight:600;
}
.bb-btn.want svg{stroke:#12100B}
.bb-btn.want b{font-size:13px;font-variant-numeric:tabular-nums;margin-left:1px}
.bb-btn.want.done{opacity:.42}
.bb-btn[disabled]{opacity:.32;pointer-events:none}
.bb-btn.pop{animation:actpop .36s cubic-bezier(.34,1.56,.64,1)}




/* ============================================================
   品牌名烫金流光
   ============================================================ */
@keyframes goldSweep{
  0%   {background-position:0% 0}
  100% {background-position:200% 0}
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gate-mark,
  .bname{
    background-image:linear-gradient(100deg,
      #A8873F 0%,
      #C6A45C 30%,
      #E6D3A3 42%,
      #FFF6DC 49%,
      #E6D3A3 56%,
      #C6A45C 68%,
      #A8873F 100%);
    background-size:200% 100%;
    background-repeat:repeat;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    animation:goldSweep 6.5s cubic-bezier(.45,0,.55,1) infinite;
  }
}

/* 系统开启"减弱动态"时不闪 */
@media (prefers-reduced-motion: reduce){
  .gate-mark,.bname{
    animation:none;
    background-position:30% 0;
    color:var(--gold);
    -webkit-text-fill-color:currentColor;
    background-image:none;
  }
}


/* 分类栏尾部渐隐 + 右箭头 */
.tabs-wrap{position:relative}
.tabs-wrap::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:56px;
  pointer-events:none;opacity:0;transition:opacity .25s;
  background:linear-gradient(90deg,rgba(14,15,19,0),rgba(14,15,19,.85) 62%,var(--bg) 100%);
}
.tabs-wrap.more::after{opacity:1}
.tabs-more{
  position:absolute;top:50%;right:10px;transform:translateY(-50%);
  width:18px;height:18px;display:grid;place-items:center;
  border-radius:50%;border:0;
  background:none;color:rgba(198,164,92,.62);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .2s;
  z-index:2;
}
.tabs-wrap.more .tabs-more{opacity:1;pointer-events:auto}
.tabs-more:active{transform:translateY(-50%) scale(.9)}
.tabs-more svg{width:11px;height:11px;stroke:currentColor;fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}







/* 悬浮置顶按钮（圆形 · 带横杠箭头） */
.to-top{
  position:fixed;right:14px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:60;
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(198,164,92,.34);
  background:rgba(20,22,27,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--gold-2);
  opacity:0;pointer-events:none;transform:translateY(12px) scale(.92);
  transition:opacity .26s cubic-bezier(.25,.8,.35,1),transform .26s cubic-bezier(.25,.8,.35,1);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:active{transform:scale(.9)}
.to-top svg{width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}


/* ============ 移动端防误触 ============ */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overscroll-behavior:none;
}
html,body{
  overflow-x:hidden;
  max-width:100vw;
}
body{
  -webkit-touch-callout:none;
  overscroll-behavior-y:contain;
}
/* 卡片和按钮：禁止长按菜单、双击缩放 */
.card,.item,.tabs>*,.rv,.photos .p,.lb-close,.fab,.gbtn,.bname{
  -webkit-touch-callout:none;
  user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
}
/* 图片：禁止拖拽和长按保存弹窗 */
img{ -webkit-user-drag:none; user-drag:none; }
/* 输入框 16px 防 iOS 聚焦缩放 */
input,textarea,select{ font-size:16px; }
/* 滚动容器只管自己 */
.track,.lb-viewport,.hero-track{
  overscroll-behavior:contain;
}



/* ============ 底部关闭按钮 ============ */
.lb-close-bottom{
  position:absolute;
  left:50%;
  bottom:calc(26px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  z-index:4;
  display:flex; align-items:center; gap:7px;
  height:42px; padding:0 22px;
  border-radius:21px;
  border:1px solid rgba(214,181,120,.42);
  background:rgba(12,13,16,.62);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:#E8D5A8;
  font-size:13.5px; letter-spacing:.24em; text-indent:.24em;
  font-family:inherit;
  cursor:pointer;
  opacity:0;
  transition:opacity .25s ease, transform .2s ease;
  pointer-events:none;
}
.lightbox.on .lb-close-bottom{ opacity:1; pointer-events:auto; transition-delay:.12s }
.lb-close-bottom:active{ transform:translateX(-50%) scale(.96) }
.lb-close-bottom svg{
  width:15px; height:15px;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;
  opacity:.9;
}
.lb-close-bottom span{ margin-top:-1px }


/* ============ 品牌可点 ============ */
.brand{touch-action:manipulation;cursor:pointer}
.brand:active .bname{opacity:.75}

/* ============ 完整公告弹窗 ============ */
.notice{touch-action:manipulation;cursor:pointer}
.notice-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:0 28px;
  opacity:0; pointer-events:none;
  transition:opacity .24s ease;
}
.notice-modal.on{opacity:1;pointer-events:auto}
.nm-mask{
  position:absolute; inset:0;
  background:rgba(8,7,6,.62);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.nm-panel{
  position:relative; z-index:1;
  width:100%; max-width:340px;
  max-height:74vh;
  display:flex; flex-direction:column;
  background:var(--card,#fff);
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  transform:translateY(12px) scale(.985);
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
  overflow:hidden;
}
.notice-modal.on .nm-panel{transform:none}
.nm-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px 12px;
  border-bottom:1px solid var(--line2);
}
.nm-head span{
  font-size:15px; letter-spacing:.3em; text-indent:.3em;
  color:var(--gold-2,#B08D57);
}
.nm-close{
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--line);
  background:none; color:var(--ink-3,#8C857A);
  font-size:13px; line-height:1; cursor:pointer;
}
.nm-body{
  flex:1; overflow-y:auto;
  padding:16px;
  -webkit-overflow-scrolling:touch;
}
.nm-body p{
  font-size:14px; line-height:1.9;
  color:var(--ink,#1C1B19);
  margin:0 0 12px;
  padding-left:14px;
  position:relative;
}
.nm-body p:last-child{margin-bottom:0}
.nm-body p::before{
  content:''; position:absolute; left:0; top:9px;
  width:4px; height:4px; border-radius:50%;
  background:var(--gold-2,#B08D57); opacity:.7;
}
.nm-ok{
  margin:0 16px 16px;
  height:40px; border-radius:2px;
  border:1px solid var(--line);
  background:none; color:var(--ink-2,#5A544C);
  font-size:13.5px; letter-spacing:.2em; text-indent:.2em;
  font-family:inherit; cursor:pointer;
}
.nm-ok:active{background:rgba(0,0,0,.04)}




/* 空栏占位 */
.sec-empty{
  padding:22px 12px;
  text-align:center;
  font-size:13px;
  color:rgba(216,198,156,.45);
  letter-spacing:.08em;
}