/* 华夏名胜 · 三维夜巡 */
:root{
  --bg:#070d12;
  --ink:#f3ece0;
  --muted:#98a2a8;
  --gold:#d9b06a;
  --gold-soft:rgba(217,176,106,.34);
  --terra:#cc785c;
  --panel:rgba(11,18,24,.88);
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --serif:"Songti SC","STSong","Noto Serif SC",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#070d12;color:var(--ink);
  font-family:var(--sans);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}

.stage{position:fixed;inset:0;z-index:0}
.stage canvas{display:block;width:100%;height:100%}

/* 暗角 */
.stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%,transparent 40%,rgba(3,7,10,.55) 100%);
}

/* ============ 顶栏 ============ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:20px 26px;pointer-events:none;
}
.topbar>*{pointer-events:auto}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.navlink{
  font-size:12px;letter-spacing:.4px;color:#c9c1b0;
  padding:7px 13px;border:1px solid rgba(217,176,106,.26);border-radius:999px;
  background:rgba(8,14,19,.42);backdrop-filter:blur(8px);
  transition:.2s;
}
.navlink:hover{color:#fff;border-color:var(--gold);background:rgba(217,176,106,.16)}

/* ============ CD 唱片 ============ */
.cdwrap{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.cd{
  position:relative;width:82px;height:82px;border-radius:50%;
  padding:0;display:block;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.55));
  transition:transform .25s ease;
}
.cd:hover{transform:translateY(-2px) scale(1.03)}
.cd:active{transform:scale(.97)}
.disc{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 0 23%, transparent 23.5%),
    radial-gradient(circle at 50% 50%, #171e24 0 62%, #0e1418 100%);
  box-shadow:inset 0 0 0 1px rgba(217,176,106,.4), inset 0 0 18px rgba(0,0,0,.9);
  animation:spin 7s linear infinite;
  animation-play-state:paused;
}
.cd.playing .disc{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.grooves{
  position:absolute;inset:6px;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.055) 0 1px, transparent 1px 4px);
  opacity:.85;
}
.sheen{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 210deg,
    rgba(120,220,255,.55),rgba(255,140,200,.42),rgba(255,230,140,.4),
    rgba(120,255,190,.38),rgba(140,160,255,.5),rgba(120,220,255,.55));
  mix-blend-mode:screen;opacity:.28;
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 23%, #000 24% 100%);
  mask:radial-gradient(circle at 50% 50%, transparent 0 23%, #000 24% 100%);
}
.label{
  position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;
  border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,#8d3a2a,#c4735a 55%,#a2492f);
  color:#f8ecd8;font-family:var(--serif);font-size:13px;letter-spacing:2px;text-indent:2px;
  box-shadow:inset 0 0 0 1px rgba(255,240,220,.35),0 2px 8px rgba(0,0,0,.5);
}
.hole{
  position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  border-radius:50%;background:#070d12;box-shadow:0 0 0 1px rgba(0,0,0,.6);
}
.cdring{
  position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(217,176,106,.22);
  pointer-events:none;
}
.cd.playing .cdring{
  border-color:rgba(217,176,106,.6);
  box-shadow:0 0 18px rgba(217,176,106,.28);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
.cdtip{
  font-size:10.5px;letter-spacing:1.4px;color:rgba(226,214,190,.5);
  font-family:var(--sans);
}
.cd.playing+.cdtip{color:rgba(217,176,106,.85)}

/* ============ 标题 ============ */
.hero{
  position:fixed;left:26px;top:96px;z-index:20;max-width:340px;pointer-events:none;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.kicker{
  font-size:11px;letter-spacing:3.2px;color:rgba(217,176,106,.9);
  margin-bottom:14px;
}
.hero h1{
  font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.32;
  letter-spacing:2px;color:#f6efe2;
}
.hero p{
  margin-top:16px;font-size:12.5px;line-height:1.9;color:rgba(226,216,200,.62);
  letter-spacing:.3px;max-width:300px;
}

/* ============ 地名标签 ============ */
.labels{position:fixed;inset:0;z-index:15;pointer-events:none}
.pin{
  position:absolute;left:0;top:0;
  transform:translate(-50%,-100%);
  padding:5px 11px 5px 12px;
  font-size:12.5px;font-weight:700;letter-spacing:1.6px;color:#fdf8ee;
  background:rgba(6,12,17,.8);
  border:1px solid rgba(217,176,106,.42);
  border-radius:2px;
  white-space:nowrap;pointer-events:auto;cursor:pointer;
  backdrop-filter:blur(4px);
  transition:background .18s,border-color .18s,color .18s,opacity .3s;
  will-change:transform,opacity;
  box-shadow:0 3px 16px rgba(0,0,0,.6);
}
.pin::after{
  content:"";position:absolute;left:50%;bottom:-13px;width:1px;height:12px;
  background:linear-gradient(rgba(217,176,106,.7),rgba(217,176,106,0));
}
.pin .pn{color:rgba(217,176,106,.85);font-weight:400;margin-left:7px;font-size:10.5px;letter-spacing:.6px}
.pin.on{
  background:rgba(217,176,106,.94);color:#12100c;border-color:#f4e0b6;
}
.pin.on .pn{color:rgba(24,18,10,.7)}
.pin.on::after{background:linear-gradient(rgba(244,224,182,.9),rgba(244,224,182,0))}

/* ============ 介绍卡 ============ */
.card{
  position:fixed;left:26px;bottom:26px;z-index:25;width:356px;
  padding:18px 20px 16px;
  background:linear-gradient(165deg,rgba(14,22,29,.94),rgba(8,13,18,.95));
  border:1px solid rgba(217,176,106,.3);
  border-radius:4px;
  backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s ease,transform .34s cubic-bezier(.22,.68,.28,1);
}
.card.on{opacity:1;transform:none;pointer-events:auto}
.card::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:100%;
  background:linear-gradient(180deg,var(--gold),rgba(217,176,106,.05));
}
.cbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ck{font-size:10.5px;letter-spacing:2.4px;color:var(--gold);opacity:.9}
.cclose{
  width:22px;height:22px;line-height:20px;text-align:center;font-size:16px;
  color:rgba(226,216,200,.5);border-radius:50%;transition:.18s;
}
.cclose:hover{color:#fff;background:rgba(255,255,255,.1)}
.ct{
  font-family:var(--serif);font-weight:400;font-size:25px;letter-spacing:2.5px;
  margin:9px 0 0;line-height:1.3;color:#fbf5e9;
}
.chook{
  margin-top:11px;font-size:13px;line-height:1.85;color:rgba(232,222,206,.82);
  letter-spacing:.2px;
}
.cmeta{
  margin-top:12px;padding-top:11px;border-top:1px solid rgba(217,176,106,.16);
  display:flex;flex-wrap:wrap;gap:6px;
}
.cmeta span{
  font-size:10.5px;letter-spacing:.6px;color:rgba(217,176,106,.92);
  border:1px solid rgba(217,176,106,.26);border-radius:2px;padding:2px 8px;
}
.cfacts{list-style:none;margin-top:12px;display:none;flex-direction:column;gap:9px}
.card.full .cfacts{display:flex}
.cfacts li{
  position:relative;padding-left:14px;font-size:12px;line-height:1.8;
  color:rgba(220,212,199,.7);letter-spacing:.2px;
}
.cfacts li::before{
  content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:50%;background:rgba(217,176,106,.55);
}
.cnav{display:none;gap:8px;margin-top:14px}
.card.full .cnav{display:flex}
.cnav button{
  flex:1;font-size:11px;letter-spacing:1px;padding:7px 0;
  border:1px solid rgba(217,176,106,.28);border-radius:2px;
  color:rgba(232,220,198,.85);transition:.18s;
}
.cnav button:hover{background:rgba(217,176,106,.16);border-color:var(--gold);color:#fff}

/* ============ 提示 ============ */
.hint{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:20;font-size:11px;letter-spacing:2.6px;color:rgba(226,214,190,.42);
  transition:opacity .4s;pointer-events:none;white-space:nowrap;
}
.hint.off{opacity:0}

/* ============ 载入 ============ */
.boot{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:#070d12;transition:opacity .8s ease;
  font-size:12px;letter-spacing:3px;color:rgba(217,176,106,.75);
}
.boot.off{opacity:0;pointer-events:none}

/* ============ 窄屏 ============ */
@media (max-width:820px){
  .topbar{padding:14px 16px}
  .cd{width:62px;height:62px}
  .label{width:30px;height:30px;margin:-15px 0 0 -15px;font-size:11px;letter-spacing:1.5px}
  .hero{left:16px;top:80px;max-width:240px}
  .hero h1{font-size:23px;letter-spacing:1.4px}
  .hero p{font-size:11.5px;max-width:230px;margin-top:11px}
  .card{left:10px;right:10px;bottom:10px;width:auto;padding:15px 16px 13px}
  .ct{font-size:21px}
  .chook{font-size:12.5px}
  .hint{bottom:auto;top:auto;display:none}
  .pin{font-size:11px;letter-spacing:1px;padding:4px 8px}
  .pin .pn{display:none}
}
@media (max-height:620px){
  .hero p{display:none}
}

/* 聚焦时收起标题，把视野让给地标 */
.hero{transition:opacity .55s ease}
body.focused .hero{opacity:.14}
body.focused .hint{opacity:0}

/* 页脚导航 */
.foot{
  position:fixed;right:26px;bottom:26px;z-index:22;
  display:flex;align-items:center;gap:9px;
  font-size:11px;letter-spacing:1.2px;color:rgba(226,214,190,.42);
}
.foot span{opacity:.5}
.foot a{transition:.2s;border-bottom:1px solid transparent}
.foot a:hover{color:var(--gold);border-bottom-color:rgba(217,176,106,.5)}
@media (max-width:820px){.foot{display:none}}