/* 清明上河图 · 三维交互长卷 — 界面样式 */
:root{
  --ink:#251f16;
  --paper:#e9dcc0;
  --gold:#c9a86a;
  --gold-dim:#9c814e;
  --verm:#b23a2c;
  --panel:rgba(26,22,16,.86);
  --serif:"Kaiti SC","STKaiti","KaiTi","Songti SC","SimSun","Noto Serif CJK SC",serif;
  --sans:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0d0b08;color:var(--paper);font-family:var(--sans);-webkit-tap-highlight-color:transparent}
#app{position:fixed;inset:0;overflow:hidden}
#scene{position:absolute;inset:0}
#scene canvas{display:block;width:100%;height:100%}

/* ---- 卷轴装裱 ---- */
.frame-top,.frame-bottom{position:absolute;left:0;right:0;height:14px;z-index:6;pointer-events:none;
  background:linear-gradient(180deg,#6a4a26,#3a2814 45%,#2a1c0e 55%,#5a3c1e);
  box-shadow:0 0 12px rgba(0,0,0,.6)}
.frame-top{top:0}.frame-bottom{bottom:0}
.roller{position:absolute;top:0;bottom:0;width:26px;z-index:7;pointer-events:none;
  background:linear-gradient(90deg,#2a1a0c,#7a5528 30%,#a87b3c 50%,#6a4820 72%,#241608);
  box-shadow:inset 0 0 8px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.5)}
.roller.left{left:0}.roller.right{right:0}
.roller .cap{position:absolute;left:-7px;width:40px;height:22px;border-radius:6px;
  background:radial-gradient(ellipse at 40% 30%,#d8b070,#7a5220 60%,#34220e);
  box-shadow:0 3px 8px rgba(0,0,0,.6)}
.roller .cap.top{top:-6px}.roller .cap.bottom{bottom:-6px}

/* 纸纹 + 暗角 */
.grain{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.vignette{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.5;transition:opacity .6s;
  background:radial-gradient(ellipse 78% 72% at 50% 46%,rgba(0,0,0,0) 40%,rgba(20,12,4,.35) 78%,rgba(8,5,2,.72) 100%)}

/* ---- 题头 ---- */
.titlebar{position:absolute;top:34px;left:52px;z-index:8;display:flex;gap:16px;align-items:flex-start;
  pointer-events:none;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.titlebar h1{font-family:var(--serif);font-size:40px;font-weight:700;letter-spacing:.16em;line-height:1.1;
  color:#f6ebcf}
.titlebar p{margin-top:9px;font-size:12.5px;letter-spacing:.22em;color:var(--gold);opacity:.92}
.seal{width:46px;height:52px;margin-top:4px;flex:0 0 auto;border:2px solid #c34a36;border-radius:4px;
  color:#e8654c;font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.15;
  display:flex;align-items:center;justify-content:center;text-align:center;letter-spacing:0;
  background:rgba(150,40,28,.14);box-shadow:0 0 0 3px rgba(195,74,54,.18),0 3px 12px rgba(0,0,0,.4);
  transform:rotate(-3deg);text-shadow:none;padding:4px}

/* ---- 控制面板 ---- */
.panel{position:absolute;top:34px;right:48px;z-index:8;width:196px;
  background:var(--panel);border:1px solid rgba(201,168,106,.32);border-radius:6px;
  padding:14px 14px 12px;backdrop-filter:blur(7px);
  box-shadow:0 8px 30px rgba(0,0,0,.5)}
.panel-head{font-family:var(--serif);font-size:16px;letter-spacing:.14em;color:#f0dfba;
  padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid rgba(201,168,106,.22)}
.panel-head span{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;color:var(--gold-dim)}
.nav-head{margin-top:14px;margin-bottom:6px;padding-top:2px;border-bottom:none}
.tools{display:flex;flex-direction:column;gap:7px}
.tool{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;cursor:pointer;
  font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:#e7d6b2;text-align:left;
  background:rgba(255,240,200,.04);border:1px solid rgba(201,168,106,.20);border-radius:4px;
  transition:background .2s,border-color .2s,transform .1s}
.tool:hover{background:rgba(201,168,106,.16);border-color:rgba(201,168,106,.55)}
.tool:active{transform:scale(.97)}
.tool i{font-style:normal;width:18px;text-align:center;color:var(--gold);font-size:14px}
.tool.active{background:rgba(178,58,44,.22);border-color:rgba(200,90,70,.7)}
.nav-list{display:flex;flex-direction:column;gap:2px;max-height:34vh;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:9px;padding:6px 7px;cursor:pointer;border-radius:4px;
  font-size:12.5px;color:#dccaa4;transition:background .18s,color .18s}
.nav-item:hover{background:rgba(201,168,106,.14);color:#fff2d2}
.nav-item em{font-style:normal;font-family:var(--serif);font-size:13px;color:var(--verm);
  width:22px;height:22px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(178,58,44,.6);border-radius:50%;background:rgba(178,58,44,.12)}
.nav-item .nv-sub{font-size:10px;color:var(--gold-dim);margin-left:auto}
.nav-list::-webkit-scrollbar{width:5px}.nav-list::-webkit-scrollbar-thumb{background:rgba(201,168,106,.3);border-radius:3px}

/* ---- 景点光点 ---- */
#poi-layer{position:absolute;inset:0;z-index:9;pointer-events:none}
.poi{position:absolute;top:0;left:0;pointer-events:auto;cursor:pointer;will-change:transform;
  display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-100%)}
.poi-dot{width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe6a0,#d08a2e 55%,#8a3a1e);
  border:2px solid rgba(255,240,200,.9);box-shadow:0 0 0 0 rgba(224,160,70,.6),0 2px 8px rgba(0,0,0,.5);
  animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,160,70,.6),0 2px 8px rgba(0,0,0,.5)}70%{box-shadow:0 0 0 14px rgba(224,160,70,0),0 2px 8px rgba(0,0,0,.5)}100%{box-shadow:0 0 0 0 rgba(224,160,70,0),0 2px 8px rgba(0,0,0,.5)}}
.poi-tag{margin-top:5px;display:flex;align-items:center;gap:6px;white-space:nowrap;
  background:rgba(26,22,16,.82);border:1px solid rgba(201,168,106,.4);border-radius:20px;
  padding:3px 9px 3px 4px;box-shadow:0 3px 10px rgba(0,0,0,.4)}
.poi-tag em{font-style:normal;font-family:var(--serif);width:19px;height:19px;display:flex;align-items:center;justify-content:center;
  background:var(--verm);color:#ffe9c9;border-radius:50%;font-size:11px}
.poi-title{font-size:12px;color:#f0dfba;letter-spacing:.06em;max-width:0;overflow:hidden;opacity:0;transition:max-width .25s,opacity .25s}
.poi:hover .poi-title,.poi.active .poi-title{max-width:90px;opacity:1}
.poi:hover .poi-dot{background:radial-gradient(circle at 35% 30%,#fff3c8,#e0a23c 55%,#a8481e)}
.poi.hidden{display:none}

/* ---- 信息卡 ---- */
#info-card{position:absolute;left:52px;bottom:74px;z-index:10;width:min(360px,42vw);
  background:linear-gradient(160deg,rgba(38,31,20,.95),rgba(24,19,12,.95));
  border:1px solid rgba(201,168,106,.45);border-radius:6px;padding:20px 22px 22px;
  box-shadow:0 12px 40px rgba(0,0,0,.6);backdrop-filter:blur(8px);
  animation:cardIn .35s ease}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
#info-card.hidden,#about-modal.hidden,#loading.hidden{display:none}
#info-close,#about-close{position:absolute;top:10px;right:12px;width:26px;height:26px;cursor:pointer;
  background:transparent;border:1px solid rgba(201,168,106,.4);border-radius:50%;color:var(--gold);
  font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center}
#info-close:hover,#about-close:hover{background:rgba(201,168,106,.18)}
.info-top{display:flex;align-items:center;gap:12px}
#info-num{font-family:var(--serif);font-size:14px;color:#ffe9c9;background:var(--verm);
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.info-kicker{font-size:10.5px;letter-spacing:.3em;color:var(--gold-dim)}
#info-title{font-family:var(--serif);font-size:27px;letter-spacing:.12em;color:#f6ebcf;margin:10px 0 2px}
.info-sub{font-size:12px;letter-spacing:.14em;color:var(--gold);margin-bottom:12px}
#info-desc{font-size:13px;line-height:1.95;color:#d8c9a8;text-align:justify}

/* ---- 底部提示 / 进度 ---- */
.hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:8;
  font-size:11.5px;letter-spacing:.12em;color:#e2cfa6;opacity:.78;white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none}
.tour-bar{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);z-index:8;
  width:min(420px,60vw);height:4px;background:rgba(255,240,200,.18);border-radius:3px;
  opacity:0;transition:opacity .4s;pointer-events:none}
.tour-bar.show{opacity:1}
#tour-fill{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--gold),#f0d090);box-shadow:0 0 10px rgba(220,180,100,.7)}
.tour-bar em{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-style:normal;
  font-family:var(--serif);font-size:12px;letter-spacing:.3em;color:#f0dfba;white-space:nowrap}

/* ---- 关于弹窗 ---- */
#about-modal{position:absolute;inset:0;z-index:20;background:rgba(8,6,3,.72);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:20px}
.about-box{position:relative;width:min(560px,92vw);max-height:86vh;overflow-y:auto;
  background:linear-gradient(160deg,#2a2318,#1a150e);border:1px solid rgba(201,168,106,.5);
  border-radius:8px;padding:34px 36px 30px;box-shadow:0 20px 70px rgba(0,0,0,.7)}
.about-box h2{font-family:var(--serif);font-size:26px;letter-spacing:.14em;color:#f6ebcf;margin-bottom:16px}
.about-box h3{font-family:var(--serif);font-size:17px;letter-spacing:.1em;color:var(--gold);margin:20px 0 8px}
.about-box p{font-size:13.5px;line-height:2;color:#d8c9a8;margin-bottom:12px;text-align:justify}
.about-box strong{color:#f0dfba;font-weight:600}
.about-box ul{list-style:none;margin:4px 0 12px}
.about-box li{font-size:13px;line-height:1.9;color:#cdbc98;padding-left:18px;position:relative}
.about-box li::before{content:"·";position:absolute;left:4px;color:var(--gold);font-size:18px}
.about-seal{position:absolute;top:30px;right:36px;width:52px;height:52px;border:2px solid var(--verm);
  color:#e8654c;font-family:var(--serif);font-size:15px;line-height:1.15;display:flex;align-items:center;
  justify-content:center;text-align:center;transform:rotate(-4deg);opacity:.85;border-radius:4px}
.about-foot{margin-top:18px;font-size:11px !important;letter-spacing:.1em;color:var(--gold-dim) !important;text-align:left !important}

/* ---- 载入 ---- */
#loading{position:absolute;inset:0;z-index:30;background:radial-gradient(ellipse at 50% 45%,#2a2216,#0d0a06 80%);
  display:flex;align-items:center;justify-content:center;transition:opacity .8s}
.ld-inner{text-align:center;width:min(340px,80vw)}
.ld-scroll{width:100%;height:3px;background:rgba(201,168,106,.18);margin-bottom:30px;border-radius:2px;overflow:hidden}
.ld-fill{height:100%;width:0;background:linear-gradient(90deg,#7a5a2a,var(--gold),#f0d090);
  animation:unroll 1.1s ease forwards}
@keyframes unroll{to{width:100%}}
.ld-title{font-family:var(--serif);font-size:34px;letter-spacing:.36em;color:#f6ebcf;text-indent:.36em}
.ld-sub{margin-top:12px;font-size:12px;letter-spacing:.28em;color:var(--gold-dim)}
.ld-bar{margin:26px auto 0;width:70%;height:2px;background:rgba(255,240,200,.12)}
.ld-bar i{display:block;height:100%;width:30%;background:var(--gold);animation:ldbar 1.4s ease-in-out infinite}
@keyframes ldbar{0%{transform:translateX(-120%)}100%{transform:translateX(430%)}}
.ld-err{margin-top:18px;font-size:12px;color:#e08a6a;line-height:1.7}

/* ---- 响应式 ---- */
@media(max-width:860px){
  .titlebar{top:22px;left:34px}.titlebar h1{font-size:26px}.titlebar p{font-size:10px;letter-spacing:.1em}
  .seal{width:34px;height:40px;font-size:14px}
  .panel{top:auto;bottom:16px;right:16px;left:16px;width:auto;padding:10px 12px;
    display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .panel-head{display:none}
  .tools{flex-direction:row;flex-wrap:wrap;gap:6px;flex:1}
  .tool{width:auto;padding:7px 9px;font-size:12px}
  .tool span{display:none}
  .nav-list{display:none}
  #info-card{left:16px;right:16px;width:auto;bottom:86px;padding:16px 18px}
  .hint{display:none}
  .tour-bar{bottom:120px}
}