*{box-sizing:border-box;margin:0;padding:0}
:root{--gold:#e7c48a;--gold2:#f5dfb4;--ink:#f3ead8;--dim:rgba(243,234,216,.62);--line:rgba(231,196,138,.32);--glass:rgba(10,9,8,.42);--serif:"Noto Serif SC","Songti SC","STSong","Source Han Serif SC",serif;--sans:-apple-system,"PingFang SC","Helvetica Neue",sans-serif}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#gl:active{cursor:grabbing}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hide{opacity:0!important;pointer-events:none!important}

/* 电影遮幅 */
#bars::before,#bars::after{content:"";position:fixed;left:0;right:0;height:0;background:#000;z-index:5;transition:height 1.6s cubic-bezier(.6,0,.2,1)}
#bars::before{top:0}#bars::after{bottom:0}
body.cine #bars::before,body.cine #bars::after{height:9vh}

/* 进入页 */
#gate{position:fixed;inset:0;z-index:50;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity 1.6s}
.g-in{text-align:center}
.g-t{font-size:clamp(52px,9vw,96px);letter-spacing:.32em;padding-left:.32em;font-weight:300;color:var(--gold2)}
.g-e{font-family:var(--sans);font-size:12px;letter-spacing:.9em;padding-left:.9em;color:var(--dim);margin-top:10px}
.g-bar{width:180px;height:1px;background:rgba(255,255,255,.12);margin:44px auto 0;overflow:hidden}
.g-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
.g-btn{margin-top:40px;padding:12px 44px;border:1px solid var(--line);border-radius:40px;letter-spacing:.4em;padding-left:calc(44px + .4em);font-size:15px;opacity:0;transition:opacity 1s,background .3s,border-color .3s}
.g-btn.on{opacity:1}.g-btn:hover{background:rgba(231,196,138,.1);border-color:var(--gold)}
.g-hint{font-family:var(--sans);font-size:11px;color:var(--dim);margin-top:18px;letter-spacing:.2em}
.lang{margin-top:26px;font-family:var(--sans);font-size:12px;color:var(--dim);display:flex;gap:14px;justify-content:center;align-items:center}
.lang button{opacity:.55;letter-spacing:.1em}.lang button.on{opacity:1;color:var(--gold)}
.lang i{width:1px;height:10px;background:var(--line)}

/* 开场字幕 */
#cap{position:fixed;left:0;right:0;top:78%;transform:translateY(-50%);text-align:center;z-index:8;pointer-events:none}
#cap .c1{font-size:clamp(20px,2.6vw,30px);letter-spacing:.3em;color:var(--gold2);text-shadow:0 0 30px rgba(0,0,0,.7)}
#cap .c2{font-family:var(--sans);font-size:12px;letter-spacing:.5em;color:var(--dim);margin-top:14px}
.ch{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(6px);transition:opacity 1.2s,filter 1.2s,transform 1.2s}
.ch.on{opacity:1;filter:blur(0);transform:none}

/* 标题与入口 */
#title{position:fixed;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:opacity 1.2s;pointer-events:none}
#title>*{pointer-events:auto}
#title::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 45% at 50% 48%,rgba(0,0,0,.55),rgba(0,0,0,.15) 60%,transparent 80%);pointer-events:none;z-index:-1}
#title h1{font-size:clamp(60px,10vw,120px);font-weight:300;letter-spacing:.3em;padding-left:.3em;color:var(--gold2);text-shadow:0 2px 6px rgba(0,0,0,.6),0 0 60px rgba(0,0,0,.8)}
#title .en{font-family:var(--sans);font-size:12px;letter-spacing:1em;padding-left:1em;color:var(--dim);margin-top:6px}
#title p{margin-top:26px;font-size:16px;letter-spacing:.25em;color:var(--ink);text-shadow:0 1px 20px #000}
.picks{display:flex;gap:16px;margin-top:46px;flex-wrap:wrap;justify-content:center;padding:0 16px}
.pick{width:210px;padding:20px 18px 18px;border:1px solid var(--line);border-radius:16px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);text-align:left;transition:border-color .3s,transform .3s,background .3s}
.pick:hover{border-color:var(--gold);transform:translateY(-3px);background:rgba(20,16,10,.5)}
.pick b{display:block;font-size:19px;font-weight:500;letter-spacing:.12em;color:var(--gold2)}
.pick span{display:block;font-family:var(--sans);font-size:12px;color:var(--dim);margin-top:8px;line-height:1.6}
.pick em{display:block;font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--gold);margin-top:14px;opacity:.8}

/* 章节信息 */
#chap{position:fixed;left:max(28px,env(safe-area-inset-left));top:calc(9vh + 22px);z-index:7;transition:opacity 1s;pointer-events:none}
#chap .k{font-family:var(--sans);font-size:11px;letter-spacing:.4em;color:var(--gold)}
#chap .n{font-size:34px;font-weight:400;letter-spacing:.14em;margin-top:6px;color:var(--gold2)}
#chap .y{font-family:var(--sans);font-size:12px;letter-spacing:.12em;color:var(--dim);margin-top:4px}
#chap .t{font-size:14px;letter-spacing:.3em;margin-top:10px;color:var(--ink)}
.relay{display:flex;gap:6px;margin-top:16px}
.relay i{width:22px;height:2px;background:rgba(255,255,255,.18);transition:background .6s}
.relay i.on{background:var(--gold)}.relay i.done{background:rgba(231,196,138,.45)}

/* 字幕 */
#sub{position:fixed;left:50%;bottom:calc(9vh + 26px);transform:translateX(-50%);width:min(720px,calc(100vw - 440px));text-align:center;z-index:7;pointer-events:none;font-size:clamp(16px,1.6vw,20px);letter-spacing:.14em;line-height:1.8;text-shadow:0 1px 3px #000,0 0 22px rgba(0,0,0,.8);transition:opacity .8s}
body:not(.cine) #sub{bottom:110px}

/* 城市卡片 */
#card{position:fixed;right:max(24px,env(safe-area-inset-right));top:50%;transform:translate(20px,-50%);width:340px;z-index:10;padding:26px 26px 22px;border:1px solid var(--line);border-radius:18px;background:rgba(12,10,8,.64);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);opacity:0;pointer-events:none;transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
#card.on{opacity:1;transform:translate(0,-50%);pointer-events:auto}
#card .x{position:absolute;right:14px;top:12px;font-size:20px;color:var(--dim);width:30px;height:30px}
#card .sc{font-size:44px;line-height:1.25;color:var(--gold2);min-height:56px;word-break:break-word;font-family:"Noto Serif","Noto Sans Brahmi","Noto Naskh Arabic","Noto Sans Syriac","Noto Sans Armenian","Noto Sans Sinhala","Noto Sans Malayalam","Noto Sans Tamil","Noto Sans Javanese",var(--serif)}
#card .sc span{display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path 2.2s cubic-bezier(.5,0,.2,1)}
#card .sc span[dir=rtl]{clip-path:inset(0 0 0 100%)}
#card.on .sc span{clip-path:inset(0 0 0 0)}
#card .sl{font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--gold);margin-top:6px}
#card .ro{font-family:var(--sans);font-size:12px;color:var(--dim);margin-top:4px;font-style:italic}
#card .nm{display:flex;align-items:baseline;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
#card .nm b{font-size:24px;font-weight:500;letter-spacing:.1em}
#card .nm span{font-family:var(--sans);font-size:12px;color:var(--dim);letter-spacing:.1em}
#card .ds{font-size:14px;line-height:1.9;letter-spacing:.06em;margin-top:12px;color:var(--ink)}
#card .ft{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-family:var(--sans);font-size:11px;color:var(--dim);letter-spacing:.08em}
.say{display:flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--line);border-radius:30px;font-family:var(--sans);font-size:12px;color:var(--gold2);transition:background .3s}
.say:hover{background:rgba(231,196,138,.12)}.say svg{width:14px;height:14px;fill:currentColor}
.say.no{opacity:.4;cursor:default}

/* 控制 */
#ctrl{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:calc(9vh + 18px);z-index:11;display:flex;gap:8px;transition:opacity .8s,bottom 1.6s}
body:not(.cine) #ctrl{bottom:22px}
.ib{height:38px;min-width:38px;padding:0 12px;border:1px solid var(--line);border-radius:20px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-family:var(--sans);font-size:12px;letter-spacing:.1em;display:flex;align-items:center;justify-content:center;gap:6px;transition:border-color .3s,background .3s}
.ib:hover{border-color:var(--gold);background:rgba(30,24,14,.55)}
.ib svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
#tl{position:fixed;left:max(20px,env(safe-area-inset-left));bottom:22px;z-index:11;display:flex;gap:8px;transition:opacity .8s}
body.cine #tl{opacity:0;pointer-events:none}

/* 进度 */
#prog{position:fixed;left:0;right:0;bottom:calc(9vh - 1px);height:1px;z-index:6;background:rgba(255,255,255,.08);opacity:0;transition:opacity 1s}
body.cine #prog{opacity:1}
#prog i{position:absolute;left:0;top:0;bottom:0;background:var(--gold);width:0}
#prog b{position:absolute;top:-2px;width:5px;height:5px;margin-left:-2px;border-radius:50%;background:rgba(231,196,138,.5)}

/* 标签 */
#labels{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.lb{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;font-size:13px;letter-spacing:.12em;color:var(--ink);text-shadow:0 1px 3px #000,0 0 12px rgba(0,0,0,.8);transition:opacity .4s;pointer-events:auto;cursor:pointer;padding:2px 4px 2px 12px}
.lb::before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.lb.big{font-size:15px;color:var(--gold2)}
.lb.place{font-style:italic;color:var(--dim)}.lb.place::before{background:transparent;border:1px solid var(--gold);box-shadow:none}
.lb:hover{color:var(--gold)}

/* 关于 */
#about{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .6s;padding:20px}
#about.on{opacity:1;pointer-events:auto}
#about .box{max-width:620px;max-height:84vh;overflow:auto;padding:36px 36px 30px;border:1px solid var(--line);border-radius:20px;background:rgba(14,12,9,.8);line-height:1.9;font-size:14px;letter-spacing:.05em}
#about h2{font-size:30px;font-weight:400;letter-spacing:.25em;color:var(--gold2)}
#about h3{font-size:13px;font-family:var(--sans);letter-spacing:.3em;color:var(--gold);margin:22px 0 6px;font-weight:500}
#about p,#about li{color:var(--ink)}#about ul{padding-left:18px}#about small{color:var(--dim);font-family:var(--sans)}

@media (max-width:760px){
  #card{left:12px;right:12px;width:auto;top:calc(7vh + 168px);bottom:auto;transform:translateY(-12px);padding:16px 18px 14px;max-height:42vh;overflow:auto}
  #card.on{transform:none}
  #card .ds{font-size:13px;line-height:1.8}
  #card .sc{font-size:32px;min-height:40px}
  #chap{left:16px}#chap .n{font-size:26px}
  .pick{width:100%;max-width:340px;padding:16px}
  #sub{font-size:15px;width:90vw;bottom:calc(7vh + 64px)}
  body.cine #bars::before,body.cine #bars::after{height:7vh}
  #ctrl .ib .t{display:none}
}