/* 《牽手回家》—— 電影感、零介面 */
:root{
  --ink:#f3e8d4; --ink2:#c9b79a; --dim:rgba(243,232,212,.62);
  --gold:#e3b866; --gold2:#ffe2a3; --goldLine:rgba(255,222,160,.28);
  --glass:rgba(14,10,8,.66); --night:#060407;
  --fs:18px; --lh:1.85; --panelH:0px;
  --safeT:env(safe-area-inset-top,0px); --safeB:env(safe-area-inset-bottom,0px);
  --safeL:env(safe-area-inset-left,0px); --safeR:env(safe-area-inset-right,0px);
  --serif:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
}
body.fs-1{--fs:clamp(16px,1.15vw + 8px,20px)}
body.fs-2{--fs:clamp(21px,1.5vw + 11px,27px)}
body.fs-3{--fs:clamp(25px,1.8vw + 13px,33px)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--night);color:var(--ink);font-family:var(--serif);
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font-family:inherit;cursor:pointer;color:inherit}
button:disabled{opacity:.35;cursor:default}
kbd{display:inline-block;padding:0 .45em;margin:0 .1em;border-radius:4px;border:1px solid var(--goldLine);font-family:var(--sans);font-size:.82em;color:var(--gold2);line-height:1.5}
#app{position:fixed;inset:0;overflow:hidden;background:var(--night)}
#stageWrap{position:absolute;inset:0;overflow:hidden;background:#000;touch-action:none;user-select:none;-webkit-user-select:none}
#stage,#fx{position:absolute;inset:0;width:100%;height:100%;display:block}
#fx{pointer-events:none}

/* ---------- 角落：只留兩個小圖示 ---------- */
#corner{position:absolute;top:calc(10px + var(--safeT));right:calc(10px + var(--safeR));z-index:30;display:flex;gap:8px}
.ic{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,235,200,.22);background:rgba(0,0,0,.22);color:rgba(255,240,215,.78);
  font-size:16px;line-height:1;display:grid;place-items:center;opacity:.6;transition:opacity .3s,background .3s,border-color .3s;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ic:hover,.ic:focus-visible{opacity:1;background:rgba(0,0,0,.45);border-color:var(--gold);outline:none}
body.ingame-off #corner,body.ingame-off #bSkip,body.ingame-off #autoPill{display:none}

/* 卡住時才出現的「略過這段」、自動播放提示、幕名浮水印 */
.pillBtn{position:absolute;z-index:29;top:calc(14px + var(--safeT));right:calc(104px + var(--safeR));height:32px;padding:0 14px;border-radius:16px;
  border:1px solid var(--goldLine);background:rgba(0,0,0,.35);color:var(--gold2);font-family:var(--sans);font-size:13px;letter-spacing:.12em;
  opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .6s,transform .6s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
body.canSkip #bSkip{opacity:.85;pointer-events:auto;transform:none}
#bSkip:hover{opacity:1;border-color:var(--gold)}
#autoPill{position:absolute;z-index:29;left:50%;top:calc(14px + var(--safeT));transform:translateX(-50%);white-space:nowrap;padding:5px 16px;border-radius:14px;
  background:rgba(0,0,0,.35);border:1px solid var(--goldLine);color:var(--gold2);font-family:var(--sans);font-size:12px;letter-spacing:.2em;
  opacity:0;pointer-events:none;transition:opacity .6s}
body.autoOn #autoPill{opacity:.8;animation:breath 3s ease-in-out infinite}
@keyframes breath{50%{opacity:.45}}
#actLabel{position:absolute;z-index:29;left:calc(18px + var(--safeL));top:calc(18px + var(--safeT));color:var(--gold2);font-size:13px;letter-spacing:.35em;
  font-family:var(--sans);text-shadow:0 1px 8px #000;opacity:0;pointer-events:none;white-space:nowrap}
#actLabel.flash{animation:labelFlash 7s ease 1.5s forwards}
@keyframes labelFlash{0%{opacity:0}15%{opacity:.75}70%{opacity:.75}100%{opacity:0}}

/* ---------- 電影字幕 ---------- */
#panel{position:absolute;left:0;right:0;bottom:0;z-index:20;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  padding:0 calc(16px + var(--safeR)) calc(14px + var(--safeB)) calc(16px + var(--safeL));pointer-events:none}
#panel::before{content:"";position:absolute;left:0;right:0;bottom:0;height:min(42vh,320px);pointer-events:none;
  background:linear-gradient(rgba(4,3,2,0),rgba(4,3,2,.55) 55%,rgba(4,3,2,.78));opacity:0;transition:opacity .6s}
body.dlgOn #panel::before,body.chooseOn #panel::before{opacity:1}
#dlg{position:relative;width:min(1020px,100%);pointer-events:auto;cursor:pointer;display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center;
  padding:6px 8px 4px;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease;max-height:60vh;overflow:auto}
#dlg.show{opacity:1;transform:none}
body.ixOn:not(.chooseOn) #dlg{pointer-events:none}
#dlgFace{display:none;grid-row:1 / span 2;width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,226,163,.45),0 4px 18px rgba(0,0,0,.6)}
#dlg.face #dlgFace{display:block}
#dlgName{display:none;grid-column:2;margin-bottom:2px;font-family:var(--sans);font-weight:500;letter-spacing:.32em;color:var(--gold);font-size:calc(var(--fs)*.72)}
#dlg.named #dlgName{display:block}
#dlgText{grid-column:2;font-size:calc(var(--fs)*1.04);line-height:var(--lh);color:#fbf3e4;letter-spacing:.05em;min-height:calc(var(--fs)*var(--lh)*1);
  white-space:pre-wrap;word-break:break-word;text-shadow:0 2px 12px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.8)}
#dlg:not(.face) #dlgName,#dlg:not(.face) #dlgText{grid-column:1 / span 2}
#dlg.narr{display:block;text-align:center}
#dlg.narr #dlgText{max-width:24em;margin:0 auto}
#dlgText{max-width:26em}
#dlg.narr #dlgText{color:#f6ecd8;font-size:calc(var(--fs)*1.06);letter-spacing:.09em;line-height:1.95}
#dlg.divine #dlgName{color:#ffe7a8;text-shadow:0 0 12px rgba(255,210,120,.8)}
#dlg.divine #dlgText{color:#fff4d2;text-shadow:0 0 18px rgba(255,200,110,.55),0 2px 10px rgba(0,0,0,.9)}
#dlg.divine #dlgFace{box-shadow:0 0 0 1px #ffe2a3,0 0 22px rgba(255,210,120,.7)}
#dlg.think #dlgText{color:#e6dcf5;font-style:italic}
#dlg.think #dlgName{color:#cbb8ea}
#dlg.shout #dlgText{font-weight:700;font-size:calc(var(--fs)*1.12)}
#dlgNext{position:absolute;right:6px;bottom:2px;color:var(--gold2);font-size:11px;opacity:0;animation:bob 1.2s infinite}
#dlg.done #dlgNext{opacity:.7}
@keyframes bob{50%{transform:translateY(3px)}}

/* ---------- 選擇：浮現在畫面上的發光文字 ---------- */
#choices{display:none;position:relative;width:min(720px,100%);flex-direction:column;align-items:center;gap:4px;pointer-events:auto;padding-bottom:4px}
#choices.show{display:flex;animation:rise .6s ease both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#choices .full{font-family:var(--sans);color:var(--gold2);font-size:calc(var(--fs)*.78);letter-spacing:.28em;margin-bottom:8px;text-shadow:0 1px 8px #000;text-align:center;line-height:1.7}
#choices>button:not(.chip){position:relative;width:100%;min-height:52px;padding:10px 26px;background:transparent;border:none;color:#f8eedb;
  font-size:calc(var(--fs)*1.02);letter-spacing:.08em;line-height:1.5;text-shadow:0 2px 10px #000;transition:color .25s,background .25s}
#choices>button:not(.chip)::before,#choices>button:not(.chip)::after{content:"";position:absolute;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,var(--goldLine),transparent)}
#choices>button:not(.chip)::before{top:0}#choices>button:not(.chip)::after{bottom:0;opacity:0}
#choices>button:not(.chip):last-of-type::after{opacity:1}
#choices>button:not(.chip):hover,#choices>button:not(.chip):focus-visible,#choices>button.ghosted{color:var(--gold2);outline:none;
  background:radial-gradient(ellipse at center,rgba(255,200,110,.22),transparent 70%)}
#choices>button:not(.chip):hover::before,#choices>button:not(.chip):focus-visible::before{background:linear-gradient(90deg,transparent,var(--gold),transparent)}
#choices input{width:100%;min-height:52px;border:none;border-bottom:1px solid var(--gold);background:rgba(0,0,0,.35);color:#fff6e4;
  padding:10px 16px;font-size:var(--fs);font-family:inherit;text-align:center;border-radius:6px 6px 0 0;margin-bottom:8px}
#choices input::placeholder{color:rgba(255,236,200,.45)}
#choices input:focus{outline:none;background:rgba(0,0,0,.5)}
#choices .chip{display:inline-block;margin:3px;min-height:38px;padding:4px 14px;border-radius:19px;border:1px solid var(--goldLine);background:rgba(0,0,0,.3);
  font-size:calc(var(--fs)*.8);color:#f1e4cc}
#choices .chip.sel,#choices .chip:hover{border-color:var(--gold);color:var(--gold2)}

/* ---------- 提示、吐司、聲音字幕、計量 ---------- */
#hint{position:absolute;left:50%;top:calc(14px + var(--safeT));transform:translate(-50%,-6px);z-index:15;max-width:min(80%,640px);
  display:flex;gap:10px;align-items:center;padding:8px 18px;border-radius:20px;background:rgba(8,6,4,.58);border:1px solid var(--goldLine);color:#fbefd6;
  font-size:calc(var(--fs)*.8);line-height:1.55;letter-spacing:.05em;font-family:var(--sans);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .5s,transform .5s}
#hint.show{opacity:1;transform:translate(-50%,0)}
#hint .ico{flex:none;font-size:0}#hint .ico::before{content:"✦";font-size:14px;color:var(--gold)}
#hint b{color:var(--gold2);font-weight:500}
#hint kbd{font-size:.78em}
body.autoOn #hint{top:calc(48px + var(--safeT))}
#sndCap{position:absolute;left:calc(16px + var(--safeL));top:calc(54px + var(--safeT));z-index:14;max-width:50%;color:rgba(255,240,215,.66);
  font-size:calc(var(--fs)*.68);font-family:var(--sans);letter-spacing:.12em;text-shadow:0 1px 6px #000;opacity:0;transition:opacity .6s;pointer-events:none}
#sndCap.show{opacity:1}
#toast{position:absolute;left:50%;top:22%;transform:translate(-50%,-50%);z-index:16;padding:9px 20px;border-radius:18px;background:rgba(8,6,4,.62);
  border:1px solid var(--goldLine);color:#fbefd6;font-family:var(--sans);font-size:calc(var(--fs)*.78);letter-spacing:.08em;opacity:0;pointer-events:none;
  transition:opacity .5s;text-align:center;max-width:86%;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#toast.show{opacity:1}
#meter{position:absolute;left:50%;bottom:calc(var(--panelH) + 26px);transform:translateX(-50%);width:min(260px,50%);height:3px;border-radius:2px;
  background:rgba(255,255,255,.14);z-index:14;opacity:0;transition:opacity .4s;pointer-events:none}
#meter i{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,#e3b866,#fff2c4);box-shadow:0 0 10px rgba(255,210,120,.9)}
#meter.show{opacity:1}

/* ---------- 標題卡、繪本頁、回望手記 ---------- */
#pageText{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  pointer-events:none;opacity:0;transition:opacity 1.4s;color:#fff7e8;padding:6vh 8vw}
#pageText.show{opacity:1}
#pageText .k1{font-size:calc(var(--fs)*.7);letter-spacing:.8em;color:var(--gold2);opacity:.85;margin-bottom:2.6vh;font-family:var(--sans);text-indent:.8em}
#pageText .k2{font-size:calc(var(--fs)*2.4);letter-spacing:.3em;text-indent:.3em;font-weight:600;text-shadow:0 0 40px rgba(255,190,110,.35),0 4px 30px rgba(0,0,0,.9)}
#pageText .k3{margin-top:2.4vh;font-size:calc(var(--fs)*.9);letter-spacing:.32em;opacity:.8}
#pageText .k2,#pageText .k3,#pageText .k1{animation:titleIn 2.2s ease both}
#pageText .k2{animation-delay:.3s}#pageText .k3{animation-delay:.9s}
@keyframes titleIn{from{opacity:0;letter-spacing:.5em;filter:blur(6px)}to{opacity:1}}
#pageText .card{max-width:820px;font-size:calc(var(--fs)*1.08);line-height:2.05;letter-spacing:.1em;text-shadow:0 2px 18px rgba(0,0,0,.95)}
#pageText .card b{color:var(--gold2);font-weight:600}
#pageText .card .sm{display:block;margin-top:2vh;font-size:.74em;opacity:.75;letter-spacing:.2em;font-family:var(--sans)}
@keyframes fadeIn{to{opacity:1}}
/* 回望手記 */
.journal{max-width:760px;display:flex;flex-direction:column;align-items:center}
.journal .jk{font-family:var(--sans);font-size:calc(var(--fs)*.66);letter-spacing:.7em;text-indent:.7em;color:var(--gold2);opacity:0;animation:fadeIn 1.2s .4s forwards}
.journal .jt{margin-top:1.2vh;font-size:calc(var(--fs)*1.9);letter-spacing:.3em;text-indent:.3em;font-weight:600;color:#fff4de;text-shadow:0 0 36px rgba(255,190,110,.4),0 3px 24px #000;opacity:0;animation:titleIn 1.8s .8s both}
.journal .jr{width:120px;height:1px;margin:3vh 0 2.6vh;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;animation:fadeIn 1s 1.6s forwards}
.journal .jl{font-size:calc(var(--fs)*1.05);line-height:2.1;letter-spacing:.1em;color:#f8eedc;text-shadow:0 2px 14px #000,0 0 3px #000;opacity:0;animation:lineIn 1.4s ease forwards}
.journal .jl b{color:var(--gold2);font-weight:600}
.journal .jf{margin-top:3.4vh;font-family:var(--sans);font-size:calc(var(--fs)*.7);letter-spacing:.3em;color:var(--gold2);opacity:0;animation:fadeIn 1.2s forwards}
@keyframes lineIn{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}

/* ---------- 直式手機：上方是畫面，下方像電影院的黑色字幕區 ---------- */
body.portrait #stageWrap{bottom:var(--panelH)}
body.portrait #stageWrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;pointer-events:none;z-index:11;
  background:linear-gradient(rgba(6,4,7,0),var(--night))}
body.portrait #panel{height:var(--panelH);justify-content:flex-start;padding-top:6px;background:var(--night);overflow:auto}
body.portrait #panel::before{display:none}
body.portrait #choices{width:100%}
body.portrait #hint{top:auto;bottom:14px}
body.portrait #meter{bottom:calc(var(--panelH) + 18px)}

/* 矮螢幕（手機橫放） */
@media (max-height:500px) and (orientation:landscape){
  #dlg{max-height:44vh;padding-top:2px}
  #dlgFace{width:48px;height:48px}
  #panel{padding-bottom:calc(6px + var(--safeB))}
  #choices>button:not(.chip){min-height:40px;padding:6px 18px}
  #pageText .k2{font-size:calc(var(--fs)*1.8)}
  .journal .jt{font-size:calc(var(--fs)*1.4)}.journal .jl{line-height:1.8}
}

/* ---------- 全畫面視窗 ---------- */
.screen{position:fixed;inset:0;z-index:50;display:none}
.screen.show{display:flex}
#title{background:#0b0806;align-items:center;justify-content:center;flex-direction:column}
#titleCv{position:absolute;inset:0;width:100%;height:100%}
.tInner::before{content:"";position:absolute;left:50%;top:50%;width:min(120vw,1100px);height:min(110vh,760px);transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(8,5,3,.62),rgba(8,5,3,.35) 45%,rgba(8,5,3,0) 70%)}
.tInner{position:relative;z-index:1;text-align:center;color:#fff6e6;padding:20px;max-height:100%;overflow:auto;width:100%}
.tSub{font-size:calc(var(--fs)*.64);letter-spacing:.7em;text-indent:.7em;color:var(--gold2);opacity:.85;font-family:var(--sans);text-shadow:0 1px 8px #000}
#title h1{font-size:clamp(46px,8.5vw,104px);letter-spacing:.28em;text-indent:.28em;font-weight:600;margin:2.2vh 0 1.2vh;color:#fff3dc;
  text-shadow:0 0 50px rgba(255,190,110,.45),0 4px 30px rgba(0,0,0,.85);animation:titleIn 2.6s ease both}
.tSub2{font-size:calc(var(--fs)*.92);letter-spacing:.5em;text-indent:.5em;color:#ffe0a6;text-shadow:0 1px 10px #000}
#tMenu{display:flex;flex-direction:column;align-items:center;gap:2px;margin:5vh auto 3vh;max-width:360px}
#tMenu button{position:relative;width:100%;min-height:50px;border:none;background:transparent;color:#f6e8cf;font-size:calc(var(--fs)*.95);
  letter-spacing:.4em;text-indent:.4em;text-shadow:0 2px 10px #000;transition:color .25s,background .25s}
#tMenu button::after{content:"";position:absolute;left:25%;right:25%;bottom:4px;height:1px;background:linear-gradient(90deg,transparent,var(--goldLine),transparent)}
#tMenu button.main{font-size:calc(var(--fs)*1.12);color:var(--gold2);font-weight:600}
#tMenu button.main::after{background:linear-gradient(90deg,transparent,var(--gold),transparent)}
#tMenu button:hover,#tMenu button:focus-visible{color:var(--gold2);outline:none;background:radial-gradient(ellipse at center,rgba(255,200,110,.18),transparent 70%)}
#tMenu .row2{display:flex;gap:4px;width:100%}
#tMenu .row2 button{min-height:44px;font-size:calc(var(--fs)*.78);letter-spacing:.2em;text-indent:.2em;opacity:.8}
.tNote{font-size:calc(var(--fs)*.62);line-height:2;color:rgba(255,240,215,.55);font-family:var(--sans);letter-spacing:.1em;text-shadow:0 1px 6px #000}

.modal{align-items:center;justify-content:center;background:rgba(4,3,2,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:14px}
.modal .box{position:relative;width:min(720px,100%);max-height:100%;overflow:auto;background:linear-gradient(180deg,rgba(26,19,14,.96),rgba(14,10,8,.96));
  border:1px solid var(--goldLine);border-radius:14px;padding:24px 24px 18px;box-shadow:0 30px 80px rgba(0,0,0,.7);color:var(--ink)}
.modal .box.small{width:min(440px,100%)}
.modal h2{font-size:calc(var(--fs)*.92);font-weight:500;letter-spacing:.6em;text-indent:.6em;text-align:center;margin-bottom:16px;color:var(--gold2)}
#menu .box>button{display:block;width:100%;min-height:50px;margin:2px 0;border:none;border-bottom:1px solid rgba(255,222,160,.12);background:transparent;
  font-size:calc(var(--fs)*.95);letter-spacing:.2em;color:#f1e3c8;transition:color .2s,background .2s}
#menu .box>button:hover,#menu .box>button:focus-visible{color:var(--gold2);background:rgba(255,200,110,.08);outline:none}
.qrow{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:6px 0 10px}
.qrow button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:66px;padding:6px 2px;border-radius:10px;
  border:1px solid rgba(255,222,160,.18);background:rgba(255,255,255,.03);font-family:var(--sans);font-size:calc(var(--fs)*.64);letter-spacing:.06em;color:#eadbc0;line-height:1.25}
.qrow button i{font-style:normal;font-size:18px;line-height:1;color:var(--gold2)}
.qrow button:hover,.qrow button:focus-visible{border-color:var(--gold);outline:none}
.qrow button.on{border-color:var(--gold);background:rgba(227,184,102,.16);color:var(--gold2)}
@media (max-width:420px){.qrow{grid-template-columns:repeat(3,1fr)}}
.modal .close{display:block;margin:18px auto 0;min-width:150px;min-height:44px;border-radius:22px;border:1px solid var(--gold);background:transparent;color:var(--gold2);
  font-size:calc(var(--fs)*.9);letter-spacing:.4em;text-indent:.4em}
.modal .close:hover{background:rgba(227,184,102,.16)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:11px 0;border-bottom:1px solid rgba(255,222,160,.1)}
.row label{flex:0 0 170px;font-size:calc(var(--fs)*.84);color:var(--ink2);font-family:var(--sans)}
.seg{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.seg button{min-height:40px;padding:4px 14px;border-radius:20px;border:1px solid rgba(255,222,160,.2);background:transparent;font-size:calc(var(--fs)*.8);color:#e8d9bd;font-family:var(--sans)}
.seg button.on{border-color:var(--gold);color:var(--gold2);background:rgba(227,184,102,.14)}
.row.vol input{flex:1;min-width:160px;height:32px;accent-color:#d9a441}
#chList{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
#chList button{position:relative;text-align:left;min-height:82px;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,222,160,.16);
  background:rgba(255,255,255,.03);color:#f3e6cf;font-size:calc(var(--fs)*.86);line-height:1.55;letter-spacing:.06em;transition:border-color .2s,background .2s}
#chList button small{display:block;color:var(--ink2);font-size:.78em;font-family:var(--sans)}
#chList button .st{position:absolute;right:10px;top:8px;font-size:.72em;color:var(--gold);font-family:var(--sans)}
#chList button:hover,#chList button:focus-visible{border-color:var(--gold);outline:none;background:rgba(227,184,102,.1)}
#chList button.thumb{background-size:cover;background-position:center}
#logList{max-height:60vh;overflow:auto;font-size:calc(var(--fs)*.88);line-height:1.8}
#logList p{padding:7px 0;border-bottom:1px solid rgba(255,222,160,.08)}
#logList b{color:var(--gold);margin-right:.7em;font-weight:500;font-family:var(--sans);font-size:.85em;letter-spacing:.12em}
.helpBody p{font-size:calc(var(--fs)*.86);line-height:1.9;margin-bottom:10px;color:#eadbc0}
.helpBody b{color:var(--gold2);font-weight:500}
#curtain{position:fixed;inset:0;background:#000;z-index:45;pointer-events:none;opacity:0;transition:opacity 1.1s}
#curtain.on{opacity:1}
body.calm *{animation-duration:.01s!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- 觸控方向鍵：半透明、只在需要時出現 ---------- */
#pad{display:none}
body.padOn #pad{display:block}
#pad button{position:absolute;z-index:18;bottom:calc(18px + var(--safeB));width:62px;height:62px;border-radius:50%;border:1px solid rgba(255,240,210,.32);
  background:rgba(0,0,0,.22);color:rgba(255,243,220,.85);font-size:20px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);touch-action:none;user-select:none;transition:background .15s}
#pad [data-k=left]{left:calc(18px + var(--safeL))}
#pad [data-k=right]{left:calc(92px + var(--safeL))}
#pad .act{right:calc(20px + var(--safeR));width:76px;height:76px;border-color:rgba(255,214,120,.6);color:#ffe3a0;font-size:26px;box-shadow:0 0 24px rgba(255,200,110,.25)}
#pad button.on{background:rgba(255,214,120,.32)}
body[data-pad=hold] #pad [data-k=left],body[data-pad=hold] #pad [data-k=right]{display:none}
body[data-pad=act] #pad [data-k=left],body[data-pad=act] #pad [data-k=right]{display:none}
body.portrait #pad button{bottom:calc(16px + var(--safeB))}
body.portrait.padOn #dlg{padding-bottom:84px}
@media (max-height:500px){#pad button{width:52px;height:52px;font-size:18px}#pad [data-k=right]{left:calc(78px + var(--safeL))}#pad .act{width:64px;height:64px}}
body.padOn #meter{bottom:calc(var(--panelH) + 104px)}
body.portrait.padOn #meter{bottom:100px}
body.padOn.portrait #hint{bottom:96px}
body.padOn.dlgOn #pad{opacity:.25}

@media (max-width:620px){
  #autoPill{left:calc(14px + var(--safeL));transform:none;font-size:11px;letter-spacing:.12em;padding:4px 12px}
  #actLabel{display:none}
  .pillBtn{right:calc(100px + var(--safeR))}
  body.autoOn .pillBtn{top:calc(50px + var(--safeT))}
}
@media (max-width:620px){#autoPill .long{display:none}}

/* 給明天的我：信紙 */
.letter{pointer-events:auto;width:min(560px,92vw);max-height:62vh;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:4.5vh 5vh 4vh;color:#3e2a14;text-align:left;text-shadow:none;
  background:linear-gradient(180deg,#f8eed8,#efdcb8);border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 0 1px rgba(160,110,50,.35),inset 0 0 0 8px rgba(248,238,216,1),inset 0 0 0 9px rgba(160,110,50,.25);
  animation:letterIn 1.2s ease both}
@keyframes letterIn{from{opacity:0;transform:translateY(20px) rotate(-1deg)}to{opacity:1;transform:none}}
.letter .lt{text-align:center;font-size:calc(var(--fs)*1.25);letter-spacing:.3em;font-weight:600;margin-bottom:2.4vh;color:#5a3a14}
.letter p{font-size:calc(var(--fs)*.95);line-height:1.9;margin:0 0 1.1vh;opacity:0;animation:lineIn 1.2s ease forwards}
.letter .ls{opacity:0;animation:lineIn 1.2s ease forwards;text-align:right;margin-top:2vh;font-size:calc(var(--fs)*.8);color:#7a5a30;letter-spacing:.2em}
body.letterOn #pageText{justify-content:flex-start;padding-top:5vh}
body.letterOn #panel::before{opacity:1}
.letter::-webkit-scrollbar{display:none}
body.portrait.letterOn .letter{max-height:54vh}

/* 經文與關鍵句：寫進畫面裡的字（像 Edith Finch 那樣，讓文字成為場景的一部分） */
#ink{position:absolute;inset:0;z-index:13;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8vh 10vw;pointer-events:none;
  opacity:0;transition:opacity .8s;background:radial-gradient(ellipse at center,rgba(6,4,3,.55),rgba(6,4,3,.15) 70%)}
#ink.show{opacity:1}
#ink .ik{font-family:var(--sans);font-size:calc(var(--fs)*.66);letter-spacing:.6em;color:var(--gold2);opacity:.8;margin-bottom:2.4vh}
#ink .it{max-width:900px;font-size:calc(var(--fs)*1.32);line-height:2.05;letter-spacing:.12em;color:#fff3d6;text-align:center;
  text-shadow:0 0 22px rgba(255,200,110,.45),0 2px 14px rgba(0,0,0,.9)}
#ink .it span{opacity:0;filter:blur(6px);transition:opacity .9s ease,filter .9s ease;display:inline}
#ink .it span.on{opacity:1;filter:none}
body.portrait #ink{padding:4vh 6vw}
body.portrait #ink .it{font-size:calc(var(--fs)*1.08)}

/* 餘韻：一句話像落葉飄進來，再被風帶走 */
#whisper{position:absolute;left:0;right:0;bottom:calc(var(--panelH) + 14vh);z-index:13;text-align:center;padding:0 8vw;pointer-events:none;text-wrap:balance;
  font-size:calc(var(--fs)*1.12);letter-spacing:.14em;line-height:1.9;color:#fff1d6;text-shadow:0 0 18px rgba(255,190,110,.35),0 2px 12px rgba(0,0,0,.95)}
body.portrait #whisper{bottom:16%}
#whisper span{display:inline-block;opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r));filter:blur(4px)}
#whisper.show span{animation:leafIn 2.4s cubic-bezier(.2,.7,.2,1) var(--d) forwards}
#whisper.away span{animation:leafOut 1.8s ease-in calc(var(--d)*.4) forwards}
@keyframes leafIn{from{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r));filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes leafOut{from{opacity:1;transform:none;filter:none}to{opacity:0;transform:translate(calc(var(--dx)*-.6 + 80px),calc(var(--dy)*.8)) rotate(calc(var(--r)*-1));filter:blur(5px)}}

#letterImg{position:fixed;inset:0;z-index:60;background:rgba(4,3,2,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;cursor:pointer}
#letterImg img{max-height:80vh;max-width:100%;box-shadow:0 20px 60px rgba(0,0,0,.7);border-radius:4px}
#letterImg p{color:var(--gold2);font-family:var(--sans);font-size:calc(var(--fs)*.75);letter-spacing:.08em;text-align:center}

/* 新手引導：該按的方向鍵會一閃一閃 */
body[data-teach=right] #pad [data-k=right],body[data-teach=left] #pad [data-k=left]{animation:teach 1.2s ease-in-out infinite;border-color:var(--gold)}
@keyframes teach{50%{box-shadow:0 0 0 6px rgba(255,214,120,.35),0 0 26px rgba(255,214,120,.7);background:rgba(255,214,120,.3)}}
body[data-pad=hold] #pad .act{animation:teach 1.4s ease-in-out infinite}
#hint{font-size:calc(var(--fs)*.86)}

/* 不要出現捲軸：字幕一次最多兩行，用不到捲動 */
#dlg,#panel{overflow:visible!important;max-height:none!important;scrollbar-width:none}
#dlg::-webkit-scrollbar,#panel::-webkit-scrollbar{display:none}
body.portrait #panel{overflow:hidden!important}
/* 選單等視窗：需要捲動時用細細的金色捲軸 */
.modal .box,#logList{scrollbar-width:thin;scrollbar-color:rgba(227,184,102,.45) transparent}
.modal .box::-webkit-scrollbar,#logList::-webkit-scrollbar{width:6px}
.modal .box::-webkit-scrollbar-thumb,#logList::-webkit-scrollbar-thumb{background:rgba(227,184,102,.45);border-radius:3px}
.modal .box::-webkit-scrollbar-track,#logList::-webkit-scrollbar-track{background:transparent}
.tInner{scrollbar-width:none}.tInner::-webkit-scrollbar{display:none}
body.portrait.chooseOn #panel,body.portrait.letterOn #panel{height:auto;max-height:78vh;padding-top:24px;background:linear-gradient(rgba(6,4,7,0),var(--night) 40px)}

#dlgNext{font-family:var(--sans);letter-spacing:.15em;white-space:nowrap}
#pageText .k4{position:absolute;bottom:calc(var(--panelH) + 8vh);left:0;right:0;font-family:var(--sans);font-size:calc(var(--fs)*.7)}

/* 直式：提示放在畫面下方的黑色區，不擋住角色 */
body.portrait #hint{top:calc(100% - var(--panelH) + 10px);bottom:auto;max-width:92%;z-index:25}
body.portrait.padOn #hint{bottom:auto}
body.portrait.dlgOn #hint{opacity:0}
#pad button{z-index:26}

/* 選項區：加深色霧面底板，文字壓在繁忙畫面上也要清楚 */
#choices.show{padding:16px 18px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(14,9,6,.78),rgba(14,9,6,.88));box-shadow:0 0 0 1px rgba(214,170,90,.28),0 12px 40px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#choices .full{color:#ffe9b8;text-shadow:0 1px 3px #000,0 0 12px rgba(0,0,0,.9)}
#choices>button:not(.chip){color:#fff4de;text-shadow:0 1px 3px #000,0 0 10px rgba(0,0,0,.85)}
#choices .chip{background:rgba(30,20,12,.75);color:#fff0d4}

/* 標題卡／文字卡：整個畫面先壓暗並加中央暗影，字才讀得清楚 */
#pageText.show::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 75% 62% at 50% 50%,rgba(8,5,3,.84),rgba(8,5,3,.62) 62%,rgba(8,5,3,.42));animation:fadeScrim 1.2s ease both}
@keyframes fadeScrim{from{opacity:0}to{opacity:1}}
#pageText .k1,#pageText .k3{opacity:1;color:#ffe9b8;text-shadow:0 1px 3px #000,0 0 14px rgba(0,0,0,.95)}
#pageText .k2{color:#fff8ea;text-shadow:0 2px 4px #000,0 0 26px rgba(0,0,0,.9),0 0 50px rgba(255,190,110,.25)}
#pageText .card{text-shadow:0 1px 3px #000,0 0 18px rgba(0,0,0,.95)}

/* ---- 玩法元件 ---- */
#live{position:absolute;z-index:17;left:50%;top:15%;transform:translate(-50%,0);max-width:min(78vw,760px);padding:9px 20px;border-radius:18px;background:rgba(10,7,5,.55);color:#fff4de;font-family:var(--serif);font-size:calc(var(--fs)*.92);line-height:1.5;text-align:center;opacity:0;transition:opacity .45s;pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.6)}
#live.show{opacity:1}
#live b{display:block;font-size:.72em;color:var(--gold2);letter-spacing:.12em;margin-bottom:1px;font-family:var(--sans)}
#live.think{font-style:italic;color:#ffe8c0}
body.portrait #live{top:8%}
body[data-pad=jump] #pad [data-k=left],body[data-pad=jump] #pad [data-k=right]{display:none}
body[data-pad=jump] #pad .act{left:auto;right:calc(22px + var(--safeR));width:96px;height:96px;font-size:30px}

/* 手機直式：請改橫式 */
#rotHint{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(10,6,3,.72);backdrop-filter:blur(3px);transition:opacity .4s}
#rotHint.out{opacity:0;pointer-events:none}
#rotHint .rhCard{width:min(86vw,360px);padding:22px 22px 18px;border-radius:20px;background:rgba(30,20,12,.94);border:1px solid rgba(255,226,160,.35);text-align:center;color:#fff3d6;font-family:var(--sans)}
#rotHint h3{margin:6px 0 8px;font-size:20px;font-weight:600;letter-spacing:.08em;color:var(--gold2,#ffe2a0)}
#rotHint p{margin:0 0 16px;font-size:14px;line-height:1.7;opacity:.9}
#rotHint button{display:block;width:100%;height:44px;margin-top:8px;border-radius:22px;border:1px solid rgba(255,226,160,.45);background:transparent;color:#fff3d6;font-size:15px;font-family:inherit}
#rotHint .rhGo{background:linear-gradient(180deg,#f3cf7a,#d9a640);color:#2a1c0a;border-color:#f3cf7a;font-weight:600}
#rotHint .rhPhone{height:74px;display:flex;align-items:center;justify-content:center}
#rotHint .rhPhone i{display:block;width:34px;height:58px;border:3px solid #ffe2a0;border-radius:8px;position:relative;animation:rhRot 2.6s ease-in-out infinite}
#rotHint .rhPhone i::after{content:"";position:absolute;left:50%;bottom:4px;width:8px;height:3px;margin-left:-4px;border-radius:2px;background:#ffe2a0}
@keyframes rhRot{0%,25%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
/* 進入一幕前的載入畫面 */
#ldGate{position:fixed;inset:0;z-index:900;background:rgba(20,14,10,.94);display:flex;align-items:center;justify-content:center;transition:opacity .4s}
#ldGate.out{opacity:0;pointer-events:none}
#ldGate .lgBox{width:min(84vw,420px);text-align:center;color:#f3e6cc;font-family:'Noto Serif TC',serif}
#ldGate .lgT{font-size:20px;letter-spacing:.12em;margin-bottom:16px}
#ldGate .lgBar{height:8px;border-radius:4px;background:rgba(255,240,210,.15);overflow:hidden}
#ldGate .lgBar i{display:block;height:100%;width:0;background:#e2b45a;border-radius:4px;transition:width .25s}
#ldGate .lgN{margin-top:10px;font-size:14px;opacity:.8}
#ldGate .lgTip{margin-top:12px;font-size:12.5px;opacity:.55;line-height:1.6}
#ldGate .lgGo{margin-top:18px;padding:10px 18px;border-radius:22px;border:1px solid rgba(226,180,90,.6);background:transparent;color:#f3e6cc;font-size:14px;opacity:0;pointer-events:none;transition:opacity .4s}
#ldGate .lgGo.show{opacity:1;pointer-events:auto}
#dlNote{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:12px;color:rgba(243,230,204,.55);pointer-events:none}