/* ===========================================================
   《未竟之夢圖書館》— 樣式
   美學：燈下的魔法書齋 — 深墨藍 × 暖金 × 思源宋體
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600;700;900&family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&display=swap');

:root{
  --ink:#0b0910;
  --ink2:#15111f;
  --panel:rgba(17,13,27,.82);
  --panel-solid:#161120;
  --gold:#e6b35c;
  --gold-soft:#f3d59a;
  --gold-dim:#9c7c41;
  --parch:#efe6cf;
  --parch-dim:#c4b896;
  --teal:#7ad7c7;
  --teal-glow:rgba(122,215,199,.55);
  --rose:#e58b78;
  --line:rgba(230,179,92,.30);
  --serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --display:"Cinzel","Cormorant Garamond",var(--serif);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--ink);
  color:var(--parch);
  font-family:var(--serif);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:default;
  user-select:none;
}
#app{position:fixed;inset:0;overflow:hidden}

/* 漂浮光塵 + 暈影 覆蓋層 */
#dust{position:fixed;inset:0;pointer-events:none;z-index:60}
.vignette{
  position:fixed;inset:0;pointer-events:none;z-index:55;
  background:radial-gradient(120% 90% at 50% 38%,transparent 38%,rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;
}
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:56;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 畫面切換 ---------- */
.screen{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .9s ease;
  display:flex;flex-direction:column;
  background-size:cover;background-position:center;
}
.screen.active{opacity:1;visibility:visible}
.screen::after{ /* 場景壓暗，讓文字可讀 */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,6,12,.45) 0%,rgba(8,6,12,.05) 30%,rgba(8,6,12,.15) 55%,rgba(8,6,12,.85) 100%);
  z-index:0;pointer-events:none;
}

/* ============ 標題畫面 ============ */
.sc-title{align-items:center;justify-content:center;text-align:center}
.title-inner{position:relative;z-index:2;padding:2rem;animation:riseIn 1.6s ease both}
.title-kicker{
  font-family:var(--display);letter-spacing:.5em;font-size:.8rem;
  color:var(--gold);text-transform:uppercase;margin-bottom:1.4rem;opacity:.85;
  padding-left:.5em;
}
.game-title{
  font-size:clamp(2.6rem,7vw,5.2rem);font-weight:900;line-height:1.05;
  letter-spacing:.18em;color:var(--parch);text-indent:.18em;
  text-shadow:0 2px 30px rgba(0,0,0,.7),0 0 40px rgba(230,179,92,.18);
}
.game-sub{
  margin-top:1.3rem;font-size:clamp(.95rem,2vw,1.2rem);
  color:var(--gold-soft);letter-spacing:.32em;font-weight:500;text-indent:.32em;
}
.title-rule{width:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:2rem auto;animation:ruleGrow 2s 1s ease both}
@keyframes ruleGrow{to{width:min(420px,70vw)}}

.btn{
  font-family:var(--serif);font-size:1.05rem;font-weight:600;letter-spacing:.18em;
  color:var(--ink);background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  border:none;border-radius:2px;padding:.85em 2.4em;cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.15) inset;
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:0 10px 34px rgba(230,179,92,.35),0 0 0 1px rgba(255,255,255,.25) inset}
.btn:active{transform:translateY(0)}
.btn.ghost{
  background:transparent;color:var(--gold-soft);
  box-shadow:0 0 0 1px var(--line) inset;
}
.btn.ghost:hover{background:rgba(230,179,92,.08);color:var(--gold-soft)}
.start-btn{margin-top:1rem;animation:riseIn 1.6s 1.4s ease both}

/* ============ 旁白（開場/結局）============ */
.narration-screen{align-items:center;justify-content:center}
/* 結局收尾畫面：內容多（十碎片＋十句話＋按鈕），改可捲動，按鈕永遠按得到 */
.sc-ending{justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sc-ending .narration{margin:auto;padding:2.6rem 0}
.narration{
  position:relative;z-index:2;max-width:min(760px,86vw);text-align:center;
  font-size:clamp(1.15rem,2.4vw,1.6rem);line-height:2.1;color:var(--parch);
  text-shadow:0 2px 18px rgba(0,0,0,.9);letter-spacing:.04em;
}
.narration .line{opacity:0;will-change:opacity,transform}      /* 由 JS(GSAP)接管淡入 */
.narration .line.in{animation:lineIn 1.1s ease forwards}        /* 無 GSAP 時的 CSS 後援 */
.narration .line .ch{display:inline-block;will-change:transform,opacity}  /* GSAP 逐字浮現用 */
.note-card{
  position:relative;z-index:2;margin:0 auto;max-width:min(620px,86vw);
  background:var(--panel);border:1px solid var(--line);border-radius:4px;
  padding:2.4rem 2.6rem;white-space:pre-line;line-height:2.2;
  font-size:clamp(1.05rem,2vw,1.35rem);color:var(--gold-soft);text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(3px);letter-spacing:.05em;
}
.note-card::before{content:"❝";position:absolute;top:.2rem;left:1rem;font-size:2.4rem;color:var(--gold-dim);opacity:.6}
.tap-hint{position:absolute;bottom:7%;left:0;right:0;text-align:center;z-index:3;
  color:var(--parch-dim);letter-spacing:.3em;font-size:.85rem;animation:pulse 2.2s infinite}

/* ============ 中央大廳 ============ */
/* 直向 overflow 改可捲動：十扇門在手機上才放得下（margin:auto 讓內容矮時依然置中） */
.sc-hall{justify-content:flex-start;align-items:center;overflow-y:auto;-webkit-overflow-scrolling:touch}
.hall-inner{position:relative;z-index:2;width:100%;max-width:1100px;margin:auto 0;padding:2.5rem 1.5rem;text-align:center}
.hall-title{font-family:var(--display);letter-spacing:.4em;color:var(--gold);font-size:1rem;margin-bottom:.6rem;text-indent:.4em}
.hall-intro{white-space:pre-line;color:var(--parch-dim);line-height:1.9;max-width:620px;margin:0 auto 2rem;font-size:1rem}
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:.5rem}
@media(max-width:880px){.doors{grid-template-columns:repeat(2,1fr)}}
.door{
  position:relative;cursor:pointer;border-radius:4px;overflow:hidden;
  background:linear-gradient(180deg,rgba(30,22,44,.9),rgba(14,11,22,.95));
  border:1px solid var(--line);padding:1.3rem 1rem 1.15rem;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  min-height:140px;display:flex;flex-direction:column;justify-content:center;gap:.35rem;
}
.door::before{ /* 門縫透光 */
  content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(230,179,92,.0));transition:background .4s;
}
.door:hover{transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 24px rgba(230,179,92,.2)}
.door:hover::before{background:linear-gradient(180deg,transparent 10%,rgba(230,179,92,.5),transparent 90%)}
.door .dnum{font-family:var(--display);font-size:.75rem;letter-spacing:.3em;color:var(--gold-dim)}
.door .dname{font-size:1.35rem;font-weight:700;color:var(--parch);letter-spacing:.08em}
.door .dperson{font-size:.85rem;color:var(--gold-soft);letter-spacing:.1em}
.door .dfield{font-size:.72rem;color:var(--parch-dim);letter-spacing:.2em}
.door.solved{border-color:var(--teal)}
.door.solved::after{
  content:"✦ "attr(data-frag);position:absolute;top:.5rem;right:.6rem;
  font-size:.7rem;color:var(--teal);letter-spacing:.1em;
  text-shadow:0 0 10px var(--teal-glow);
}
.door.solved .dname{color:var(--teal)}
.door.locked{opacity:.5;cursor:not-allowed;border-color:rgba(255,255,255,.07)}
.door.locked:hover{transform:none;box-shadow:none;border-color:rgba(255,255,255,.1)}
.door.locked:hover::before{background:none}
.door.locked .dname{color:var(--parch-dim)}
.hall-toast{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);z-index:12;
  background:rgba(20,15,28,.96);border:1px solid var(--line);color:var(--gold-soft);
  padding:.7em 1.5em;border-radius:4px;letter-spacing:.05em;box-shadow:0 12px 34px rgba(0,0,0,.55);animation:riseIn .3s ease}

.final-door{
  margin:2rem auto 0;max-width:480px;padding:1.4rem;border-radius:4px;
  border:1px solid var(--line);background:rgba(14,11,22,.7);
  color:var(--parch-dim);letter-spacing:.1em;transition:all .4s;
}
.final-door.ready{
  cursor:pointer;border-color:var(--gold);color:var(--gold-soft);
  background:linear-gradient(180deg,rgba(60,44,20,.5),rgba(20,15,28,.8));
  box-shadow:0 0 40px rgba(230,179,92,.25);animation:pulse 2.4s infinite;
}
.final-door .fd-title{font-size:1.25rem;font-weight:700;letter-spacing:.14em;margin-bottom:.3rem}

/* ============ 房間（視覺小說）============ */
.sc-room{justify-content:flex-end}
.room-hud{
  position:absolute;top:0;left:0;right:0;z-index:6;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.4rem;
  background:linear-gradient(180deg,rgba(8,6,12,.8),transparent);
}
.room-tag{font-family:var(--display);letter-spacing:.25em;color:var(--gold-soft);font-size:.85rem}
.room-tag b{color:var(--parch);font-family:var(--serif);font-weight:700;letter-spacing:.08em}

/* 心靈碎片收集列 */
.frag-tray{display:flex;gap:.5rem;align-items:center}
.frag-tray .lbl{font-size:.72rem;color:var(--parch-dim);letter-spacing:.2em;margin-right:.2rem}
.frag{
  width:18px;height:18px;border-radius:50%;
  border:1px solid var(--gold-dim);background:rgba(255,255,255,.03);
  transition:all .5s ease;position:relative;
}
.frag.on{
  border-color:var(--teal);background:radial-gradient(circle,var(--teal),#2c6b62);
  box-shadow:0 0 12px var(--teal-glow);
}

.portrait{
  position:absolute;bottom:0;left:4%;z-index:3;height:88%;max-width:42%;
  object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.7));
  opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease;
  pointer-events:none;
}
.portrait.show{opacity:1;transform:translateY(0)}

/* 對白框 */
.dialogue{
  position:relative;z-index:5;margin:0 auto 4%;width:min(960px,92vw);
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:1.5rem 2rem 1.7rem;backdrop-filter:blur(6px);
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset;
  cursor:pointer;min-height:140px;
  display:flex;align-items:flex-end;gap:1.6rem;overflow:visible;
}
/* 嵌在對話框內的去背立繪（頭部微微探出框外） */
.d-portrait{
  flex:0 0 auto;width:154px;height:250px;
  object-fit:contain;object-position:bottom center;align-self:flex-end;
  margin:-112px 0 -1.7rem 0;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.75));pointer-events:none;
  animation:riseIn .7s ease both;
}
.d-body{flex:1 1 auto;min-width:0;position:relative;align-self:center;padding-bottom:.2rem}
@media(max-width:560px){.d-portrait{width:96px;height:150px;margin:-40px 0 -1.7rem 0}}
.nametag{
  display:inline-block;margin-bottom:.7rem;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:var(--ink);
  font-weight:700;letter-spacing:.12em;padding:.25em 1.1em;border-radius:3px;font-size:.95rem;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.dtext{font-size:clamp(1.05rem,2vw,1.28rem);line-height:2;color:var(--parch);min-height:2em;letter-spacing:.03em}
.dtext .cursor{display:inline-block;width:.6em;color:var(--gold);animation:blink 1s steps(1) infinite}
.continue{position:absolute;right:1.4rem;bottom:.8rem;color:var(--gold);font-size:1rem;animation:bob 1.4s infinite;opacity:.85}

/* 謎題面板 */
.puzzle{
  position:relative;z-index:5;margin:0 auto 4%;width:min(900px,92vw);
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:1.6rem 2rem 1.8rem;backdrop-filter:blur(6px);
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset;
  animation:riseIn .7s ease both;max-height:84vh;overflow:auto;
}
.puzzle h3{font-family:var(--display);letter-spacing:.2em;color:var(--gold);font-size:.9rem;margin-bottom:.8rem;font-weight:600}
.puzzle .intro{color:var(--parch-dim);line-height:1.8;margin-bottom:1rem;font-size:1rem}
.clue{
  white-space:pre-line;line-height:2;font-size:1.08rem;color:var(--parch);
  background:rgba(0,0,0,.28);border-left:3px solid var(--gold-dim);
  padding:1.1rem 1.3rem;border-radius:3px;margin-bottom:1.2rem;letter-spacing:.03em;
}
.lock{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-bottom:.6rem}
.lock .lock-label{color:var(--gold-soft);letter-spacing:.1em;font-size:.95rem}
.lock input{
  font-family:var(--display);font-size:1.5rem;letter-spacing:.3em;text-align:center;
  color:var(--gold-soft);background:rgba(0,0,0,.45);
  border:1px solid var(--gold-dim);border-radius:3px;padding:.5em .7em;width:min(280px,70vw);
  outline:none;transition:border-color .25s,box-shadow .25s;text-transform:uppercase;
}
.lock input:focus{border-color:var(--gold);box-shadow:0 0 18px rgba(230,179,92,.3)}
.lock input.shake{animation:shake .45s}
.actions{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-top:.3rem}
.feedback{min-height:1.5em;font-size:.95rem;letter-spacing:.05em;margin-top:.4rem}
.feedback.err{color:var(--rose)}
.feedback.ok{color:var(--teal)}
.hints{margin-top:.9rem;display:flex;flex-direction:column;gap:.5rem}
.hint{
  color:var(--parch-dim);font-size:.95rem;line-height:1.7;
  background:rgba(255,255,255,.03);border:1px dashed var(--line);
  padding:.6rem .9rem;border-radius:3px;animation:lineIn .6s ease both;
}
.hint b{color:var(--gold-soft)}

/* clueHtml 內的元件 */
.elem-card{display:flex;align-items:center;justify-content:center;gap:1.2rem;flex-wrap:wrap;margin:.4rem 0 .2rem}
.elem{display:flex;flex-direction:column;align-items:center;
  border:1px solid var(--gold-dim);border-radius:4px;padding:.7rem 1.2rem;background:rgba(0,0,0,.3);min-width:110px}
.elem .sym{font-family:var(--display);font-size:2rem;color:var(--gold-soft)}
.elem .nm{font-size:.8rem;color:var(--parch-dim);letter-spacing:.08em}
.elem-eq{font-size:.95rem;color:var(--parch);letter-spacing:.05em}
table.payoff{border-collapse:collapse;margin:.3rem auto;font-family:var(--display);width:auto}
table.payoff th,table.payoff td{
  border:1px solid var(--gold-dim);padding:.7rem 1.3rem;text-align:center;font-size:1.15rem;color:var(--parch)}
table.payoff th{color:var(--gold-soft);background:rgba(230,179,92,.08);letter-spacing:.1em;font-size:.95rem}

/* 反思面板 */
.reflect{
  position:relative;z-index:5;margin:0 auto 4%;width:min(760px,92vw);
  background:linear-gradient(180deg,rgba(34,26,16,.92),rgba(20,15,24,.94));
  border:1px solid var(--line);border-radius:6px;padding:2rem 2.2rem;
  box-shadow:0 24px 70px rgba(0,0,0,.65);animation:riseIn .8s ease both;
}
.reflect .gain{
  text-align:center;color:var(--teal);letter-spacing:.2em;margin-bottom:1.1rem;
  font-size:1.05rem;text-shadow:0 0 14px var(--teal-glow);
}
.reflect .gain .word{font-size:1.5rem;font-weight:700;display:inline-block;
  border:1px solid var(--teal);border-radius:3px;padding:.1em .6em;margin-left:.5em}
.reflect .q{white-space:pre-line;line-height:2;color:var(--parch);font-size:1.1rem;margin-bottom:1.2rem;letter-spacing:.03em}
.reflect textarea{
  width:100%;min-height:90px;resize:vertical;font-family:var(--serif);font-size:1rem;line-height:1.8;
  color:var(--parch);background:rgba(0,0,0,.35);border:1px solid var(--gold-dim);border-radius:4px;
  padding:.9rem 1.1rem;outline:none;letter-spacing:.03em;
}
.reflect textarea::placeholder{color:var(--parch-dim);opacity:.6}
.reflect textarea:focus{border-color:var(--gold)}
.reflect .r-actions{display:flex;justify-content:flex-end;margin-top:1.1rem}
.reflect{max-height:88vh;overflow:auto}
.r-field{margin:.2rem 0 .6rem}
.r-label{color:var(--gold-soft);font-size:.92rem;letter-spacing:.06em;margin-bottom:.3rem}
.r-count{font-size:.8rem;color:var(--rose);letter-spacing:.05em;margin-top:.3rem;text-align:right}
.r-count.ok{color:var(--teal)}
.btn.dim,.btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}
.name-in{font-family:var(--serif);font-size:1rem;color:var(--parch);background:rgba(0,0,0,.4);
  border:1px solid var(--gold-dim);border-radius:4px;padding:.55em 1em;width:min(300px,80vw);outline:none;text-align:center}
.name-in:focus{border-color:var(--gold)}
/* 心門：情意題選項 */
.aff-opt{display:block;width:100%;text-align:left;margin:.5rem 0;padding:.85rem 1.1rem;
  background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:4px;color:var(--parch);
  font-family:var(--serif);font-size:1.02rem;line-height:1.6;cursor:pointer;transition:all .2s;letter-spacing:.03em}
.aff-opt:hover{border-color:var(--gold);background:rgba(230,179,92,.1)}
.aff-opt.sel{border-color:var(--teal);background:rgba(122,215,199,.12);color:var(--teal)}
.aff-opt:disabled{opacity:.6;cursor:default}

/* ============ 結局 ============ */
.ending-frags{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:1.6rem 0;z-index:2;position:relative}
.ending-msg{display:flex;flex-direction:column;gap:.45rem;margin:.3rem auto 0;max-width:600px;z-index:2;position:relative}
.ending-msg .em-line{color:var(--parch);font-size:clamp(1.05rem,2.2vw,1.35rem);letter-spacing:.06em;line-height:1.7;
  opacity:0;animation:lineIn 1s ease forwards;text-shadow:0 2px 12px rgba(0,0,0,.85)}
.ending-frags .ef{
  border:1px solid var(--teal);border-radius:3px;padding:.3em .8em;color:var(--teal);
  letter-spacing:.1em;font-size:1rem;text-shadow:0 0 12px var(--teal-glow);
  animation:riseIn .6s ease both;background:rgba(122,215,199,.06);
}

/* ---------- 動畫 ---------- */
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes lineIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes blink{50%{opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}

/* 解鎖閃光 */
.flash{position:fixed;inset:0;z-index:80;background:radial-gradient(circle at 50% 60%,rgba(230,179,92,.5),transparent 60%);
  opacity:0;pointer-events:none}
.flash.go{animation:flashGo 1s ease}
@keyframes flashGo{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* 碎片獲得飛入 */
.frag-pop{position:fixed;z-index:85;left:50%;top:55%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--teal),#2c6b62);box-shadow:0 0 40px var(--teal-glow);
  opacity:0}
.frag-pop.go{animation:fragPop 1.4s ease forwards}
@keyframes fragPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  60%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-160%) scale(.4)}}

.fade-black{position:fixed;inset:0;z-index:70;background:#000;opacity:0;pointer-events:none;transition:opacity .6s ease}
.fade-black.on{opacity:1;pointer-events:all}

.corner{position:absolute;width:42px;height:42px;border:1px solid var(--gold-dim);z-index:4;opacity:.5;pointer-events:none}
.corner.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.corner.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.corner.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.corner.br{bottom:14px;right:14px;border-left:0;border-top:0}

/* ===========================================================
   密室逃脫 2.0 — 房間 UI
   =========================================================== */
/* 電影黑邊 */
.er-bar{position:absolute;left:0;right:0;height:7vh;background:#000;z-index:30;pointer-events:none;transition:height .6s ease}
.er-bar.top{top:0}.er-bar.bottom{bottom:0}
/* 多視角：轉場箭頭與視角圓點 */
.sc-er .er-scenebg{will-change:opacity}  /* 視角交叉淡入由 JS(GSAP)/inline transition 控制 */
.er-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:16;cursor:pointer;
  width:56px;height:96px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:2.6rem;color:var(--gold-soft);opacity:.45;
  background:linear-gradient(90deg,rgba(8,6,12,.55),transparent);transition:opacity .2s;user-select:none}
.er-arrow.left{left:0}
.er-arrow.right{right:0;background:linear-gradient(270deg,rgba(8,6,12,.55),transparent)}
.er-arrow:hover{opacity:1;color:var(--parch)}
.er-viewdots{position:absolute;top:2.2vh;left:50%;transform:translateX(-50%);z-index:32;display:flex;gap:.5rem}
.er-vdot{width:9px;height:9px;border-radius:50%;border:1px solid var(--gold-dim);background:rgba(255,255,255,.06)}
.er-vdot.on{background:var(--gold);box-shadow:0 0 8px rgba(230,179,92,.6)}

/* 場景（緩慢推近 Ken Burns） */
.sc-er{justify-content:flex-end;overflow:hidden}
.sc-er .er-scenebg{position:absolute;inset:0;background-size:cover;background-position:center;
  z-index:0;animation:kenburns 38s ease-in-out infinite alternate;transform-origin:center}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.13) transl(0,-1%)}}
@keyframes kbsoft{from{transform:scale(1.05)}to{transform:scale(1.12)}}
.sc-er .er-scenebg{animation:kbsoft 40s ease-in-out infinite alternate}

/* 章節卡 */
.er-chapter{position:absolute;inset:0;z-index:45;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:#000;text-align:center;gap:1.2rem}
.er-chapter .no{font-family:var(--display);letter-spacing:.5em;color:var(--gold);font-size:1rem;opacity:0;animation:lineIn 1s .2s forwards}
.er-chapter .ti{font-size:clamp(2rem,5vw,3.4rem);font-weight:900;letter-spacing:.2em;color:var(--parch);text-indent:.2em;opacity:0;animation:lineIn 1.1s .6s forwards}
.er-chapter .ru{width:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:ruleGrow 1.4s 1s forwards}
.er-chapter .qu{max-width:600px;color:var(--gold-soft);line-height:2;font-size:clamp(1rem,2vw,1.25rem);opacity:0;animation:lineIn 1.2s 1.3s forwards;padding:0 1rem}

/* 頂部工具列 */
.er-hud{position:absolute;top:7vh;left:0;right:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.7rem 1.4rem;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(8,6,12,.7),transparent)}
.er-hud .left{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.er-tag{font-family:var(--display);letter-spacing:.2em;color:var(--gold-soft);font-size:.82rem}
.er-tag b{color:var(--parch);font-family:var(--serif);font-weight:700;letter-spacing:.06em}
.er-tools{display:flex;gap:.5rem;flex-wrap:wrap}
.er-btn{font-family:var(--serif);font-size:.85rem;letter-spacing:.08em;color:var(--gold-soft);
  background:rgba(17,13,27,.7);border:1px solid var(--line);border-radius:3px;padding:.45em 1em;cursor:pointer;
  transition:all .2s;backdrop-filter:blur(4px);position:relative}
.er-btn:hover{border-color:var(--gold);color:var(--parch);background:rgba(40,30,55,.8)}
.er-btn .badge{position:absolute;top:-7px;right:-7px;background:var(--teal);color:#06231f;border-radius:50%;
  min-width:18px;height:18px;font-size:.7rem;line-height:18px;text-align:center;font-weight:700;padding:0 3px}

/* 搜查熱點 */
.er-hotspot{position:absolute;z-index:12;cursor:pointer;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center}
.er-hotspot .ring{width:40px;height:40px;border-radius:50%;border:2px solid var(--gold-soft);
  background:rgba(230,179,92,.12);box-shadow:0 0 18px rgba(230,179,92,.5);display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:var(--gold-soft);animation:hsPulse 2s infinite}
.er-hotspot:hover .ring{background:rgba(230,179,92,.3);transform:scale(1.12)}
.er-hotspot .lbl{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;
  background:rgba(8,6,12,.85);color:var(--parch);border:1px solid var(--line);border-radius:3px;
  padding:.2em .7em;font-size:.8rem;letter-spacing:.05em;opacity:0;transition:opacity .2s;pointer-events:none}
.er-hotspot:hover .lbl{opacity:1}
.er-hotspot.done .ring{border-color:var(--teal);color:var(--teal);box-shadow:0 0 12px var(--teal-glow);animation:none;opacity:.7}
.er-hotspot.locked .ring{border-color:var(--rose);color:var(--rose);box-shadow:0 0 14px rgba(229,139,120,.4)}
@keyframes hsPulse{0%,100%{box-shadow:0 0 14px rgba(230,179,92,.4)}50%{box-shadow:0 0 26px rgba(230,179,92,.75)}}
/* 道具選取後，熱點顯示可使用 */
.sc-er.using .er-hotspot .ring{border-color:var(--teal);animation:hsPulse 1s infinite}

/* 底部敘述條 */
.er-status{position:relative;z-index:14;margin:0 auto 12vh;width:min(900px,92vw);
  background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:1rem 1.5rem;
  backdrop-filter:blur(6px);color:var(--parch);line-height:1.9;min-height:3.4em;font-size:1.05rem;
  box-shadow:0 14px 40px rgba(0,0,0,.5);display:flex;align-items:flex-end;gap:1.1rem;overflow:visible}
.er-portrait{flex:0 0 auto;width:116px;height:188px;object-fit:contain;object-position:bottom center;
  align-self:flex-end;margin:-92px 0 -1rem 0;filter:drop-shadow(0 8px 22px rgba(0,0,0,.7));
  pointer-events:none;animation:riseIn .6s ease both}
.er-txt{flex:1 1 auto;min-width:0;align-self:center}
@media(max-width:560px){.er-portrait{width:72px;height:118px;margin:-32px 0 -1rem 0}}
.er-status .who{color:var(--gold-soft);font-weight:700;margin-right:.5em}

/* 檢視視窗 / 對話視窗 */
.er-modal{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(4,3,8,.72);backdrop-filter:blur(3px);padding:8vh 4vw;animation:lineIn .3s ease}
.er-card{display:flex;gap:1.6rem;max-width:900px;width:100%;max-height:82vh;
  background:linear-gradient(180deg,rgba(24,18,34,.97),rgba(14,11,22,.98));border:1px solid var(--line);
  border-radius:8px;padding:1.6rem;box-shadow:0 30px 80px rgba(0,0,0,.7);animation:riseIn .4s ease}
.er-card .pic{flex:0 0 42%;border-radius:5px;overflow:hidden;background:#0a0810;display:flex;align-items:center;justify-content:center}
.er-card .pic img{width:100%;height:100%;object-fit:cover;max-height:60vh}
.er-card .body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.er-card .body h3{font-family:var(--display);letter-spacing:.16em;color:var(--gold);font-size:1rem;margin-bottom:.7rem}
.er-card .body .desc{color:var(--parch);line-height:2;font-size:1.05rem;overflow:auto;white-space:pre-line;flex:1}
.er-card .body .desc .num{color:var(--gold-soft);font-weight:700;font-family:var(--display);font-size:1.1em;letter-spacing:.05em}
.er-card .acts{display:flex;gap:.6rem;margin-top:1.1rem;flex-wrap:wrap}
.er-card .close{position:absolute;top:8vh;right:4vw;color:var(--parch-dim);font-size:1.6rem;cursor:pointer;z-index:41}
@media(max-width:680px){.er-card{flex-direction:column;overflow:auto}.er-card .pic{flex:none;max-height:32vh}}

/* 道具欄 */
.er-inv{position:absolute;bottom:0;left:0;right:0;z-index:31;display:flex;gap:.6rem;justify-content:center;align-items:center;
  padding:.5rem 1rem calc(.5rem + 1vh);background:linear-gradient(0deg,rgba(8,6,12,.92),transparent)}
.er-slot{width:54px;height:54px;border:1px solid var(--line);border-radius:5px;background:rgba(17,13,27,.7);
  display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:all .2s;position:relative}
.er-slot img{width:100%;height:100%;object-fit:cover}
.er-slot:hover{border-color:var(--gold)}
.er-slot.sel{border-color:var(--teal);box-shadow:0 0 14px var(--teal-glow)}
.er-inv .hintlbl{align-self:center;color:var(--parch-dim);font-size:.78rem;letter-spacing:.1em}

/* 線索筆記 / 道具 滑出面板 */
.er-panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,86vw);z-index:42;
  background:linear-gradient(180deg,rgba(20,15,28,.98),rgba(12,9,18,.99));border-left:1px solid var(--line);
  box-shadow:-20px 0 60px rgba(0,0,0,.6);padding:5vh 1.6rem 2rem;overflow:auto;transform:translateX(100%);
  transition:transform .35s ease}
.er-panel.open{transform:translateX(0)}
.er-panel h2{font-family:var(--display);letter-spacing:.2em;color:var(--gold);font-size:1rem;margin-bottom:1.2rem;
  display:flex;justify-content:space-between;align-items:center}
.er-panel h2 .x{cursor:pointer;color:var(--parch-dim);font-size:1.3rem}
.er-note{background:rgba(255,255,255,.03);border:1px dashed var(--line);border-radius:4px;padding:.8rem 1rem;
  margin-bottom:.7rem;color:var(--parch);line-height:1.8;font-size:.95rem;animation:lineIn .4s ease}
.er-note .src{display:block;color:var(--gold-dim);font-size:.78rem;letter-spacing:.1em;margin-bottom:.3rem}
.er-empty{color:var(--parch-dim);line-height:1.9;font-size:.92rem}

/* 最終門鎖（醒目熱點） */
.er-hotspot.door .ring{width:54px;height:54px;border-color:var(--gold);background:rgba(230,179,92,.18);font-size:1.3rem}
.er-hotspot.door.ready .ring{box-shadow:0 0 30px rgba(230,179,92,.7)}

/* ===========================================================
   視角情境氛圍（雨絲 / 火光）— 配合 audio.js viewFx
   =========================================================== */
.er-fx{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.er-fx.fx-rain,.er-fx.fx-fire{opacity:1}
/* 雨：細密斜向雨絲緩緩下落（screen 混合，只提亮不擋畫面） */
.er-fx.fx-rain{
  background-image:repeating-linear-gradient(108deg,
    rgba(196,214,238,0) 0 7px, rgba(196,214,238,.10) 7px 8px, rgba(196,214,238,0) 8px 16px);
  background-size:180px 180px;mix-blend-mode:screen;opacity:.55;
  animation:er-rain .5s linear infinite;
}
@keyframes er-rain{from{background-position:0 0}to{background-position:-36px 180px}}
/* 火：底部暖光輪流明滅 */
.er-fx.fx-fire{
  background:radial-gradient(120% 78% at 50% 112%,
    rgba(255,150,46,.18),rgba(255,120,24,.06) 42%,transparent 72%);
  animation:er-fire 3.4s ease-in-out infinite;
}
@keyframes er-fire{0%,100%{opacity:.6}40%{opacity:1}62%{opacity:.78}82%{opacity:.95}}

/* 未探索視角提示（提醒環顧四周）— #3 內容搜查感 */
.er-arrow.hint{opacity:.92;color:var(--gold);animation:er-arrowhint 1.6s ease-in-out infinite}
@keyframes er-arrowhint{0%,100%{transform:translateY(-50%) translateX(0);text-shadow:0 0 0 transparent}
  50%{transform:translateY(-50%) translateX(var(--ax,4px));text-shadow:0 0 14px rgba(230,179,92,.8)}}
.er-arrow.left.hint{--ax:-4px}
.er-arrow.right.hint{--ax:4px}
.er-vdot.unseen{border-color:var(--gold-soft);animation:er-dotpulse 1.8s ease-in-out infinite}
@keyframes er-dotpulse{0%,100%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 9px rgba(243,213,154,.8)}}

/* 夥伴在線徽章（雙人連線）— #2 */
.er-presence{position:absolute;top:7vh;right:1.4rem;z-index:33;margin-top:2.6rem;
  font-size:.78rem;letter-spacing:.08em;color:var(--rose);
  background:rgba(17,13,27,.78);border:1px solid var(--line);border-radius:14px;
  padding:.25em .9em;backdrop-filter:blur(4px);transition:color .3s,border-color .3s}
.er-presence.on{color:var(--teal);border-color:var(--teal)}

/* ===========================================================
   封面微動態（雲霧飄 + 燈火搖曳）+ 每關進場 mantra
   =========================================================== */
.sc-cover::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 38%, rgba(255,210,130,.18), rgba(255,190,90,.05) 45%, transparent 70%);
  animation:cover-glow 6.5s ease-in-out infinite}
@keyframes cover-glow{0%,100%{opacity:.5}45%{opacity:1}68%{opacity:.72}86%{opacity:.92}}
.cover-mist{position:absolute;inset:-12% -22%;z-index:1;pointer-events:none;opacity:.55;
  background:radial-gradient(42% 30% at 22% 32%, rgba(222,232,248,.10), transparent 60%),
            radial-gradient(46% 34% at 76% 56%, rgba(222,232,248,.08), transparent 62%);
  animation:cover-mist 28s ease-in-out infinite alternate;will-change:transform}
@keyframes cover-mist{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(4%,1%,0)}}

/* 每關進場 mantra（第二人稱小語，章節卡引言之後淡入） */
.er-chapter .mantra{margin-top:1.5rem;color:var(--teal);letter-spacing:.16em;
  font-size:clamp(.95rem,1.9vw,1.18rem);opacity:0;animation:lineIn 1.2s 2s forwards;
  text-shadow:0 0 14px var(--teal-glow)}

/* 老師用：自由選關開關（大廳右下，低調，hover 才明顯） */
.free-toggle{position:absolute;bottom:1.2rem;right:1.4rem;z-index:9;
  font-family:var(--serif);font-size:.78rem;letter-spacing:.06em;color:var(--parch-dim);
  background:rgba(17,13,27,.62);border:1px solid var(--line);border-radius:16px;padding:.4em 1.1em;
  cursor:pointer;opacity:.5;transition:opacity .25s,color .25s,border-color .25s;backdrop-filter:blur(3px)}
.free-toggle:hover{opacity:1;color:var(--gold-soft);border-color:var(--gold)}
.free-toggle.on{opacity:.95;color:var(--teal);border-color:var(--teal)}

/* ===========================================================
   響應式：手機 / 平板（窄螢幕壓縮 HUD 與面板、放大可點區）
   =========================================================== */
@media (max-width: 600px){
  /* 房間 HUD 壓縮，省下直向空間給場景 */
  .er-hud{padding:.45rem .7rem;gap:.4rem}
  .er-tag{font-size:.72rem;letter-spacing:.06em}
  .frag-tray{gap:.32rem}
  .frag-tray .lbl{display:none}              /* 隱藏「心靈碎片」字樣，讓十顆碎片點排得下 */
  .frag{width:12px;height:12px}
  .er-tools{gap:.35rem}
  .er-btn{font-size:.72rem;padding:.4em .7em}
  .er-bar{height:4vh}                         /* 電影黑邊縮小，多給場景 */
  .er-viewdots{top:1.4vh}
  .er-arrow{width:44px;height:78px;font-size:2.1rem}
  /* 底部敘述 / 對白 */
  .er-status{width:94vw;margin:0 auto 9vh;padding:.8rem 1rem;font-size:.95rem;min-height:3em;gap:.7rem}
  .er-status .who{margin-right:.3em}
  /* 檢視 / 謎題 視窗 */
  .er-card{padding:1.1rem;gap:1rem}
  .er-card .body .desc{font-size:1rem;line-height:1.85}
  .er-card .close{top:2.5vh;right:4vw}
  .lock input{width:min(220px,68vw);font-size:1.25rem}
  .aff-opt{font-size:.95rem;padding:.7rem .9rem}
  /* 反思面板 */
  .reflect{padding:1.4rem 1.2rem;max-height:90vh}
  .reflect .q{font-size:1rem;line-height:1.85}
  .reflect textarea{font-size:.95rem}
  /* 標題 / 旁白 / 卡片 */
  .title-inner{padding:1.2rem}
  .note-card{padding:1.6rem 1.4rem;line-height:2}
  .er-slot{width:46px;height:46px}
  .free-toggle{font-size:.7rem;position:static;margin:.9rem auto 1.4rem;display:block;align-self:center;padding:.35em .9em}  /* 手機：跟著內容排，不再蓋住最後一道門 */
  /* 大廳：門卡壓縮，配合 .sc-hall 捲動，十扇門＋最後一道門都搆得到 */
  .hall-inner{padding:1.6rem .9rem .4rem}
  .hall-intro{font-size:.85rem;margin-bottom:1.1rem}
  .doors{gap:.55rem}
  .door{min-height:92px;padding:.75rem .55rem .7rem;gap:.18rem}
  .door .dname{font-size:1.02rem}
  .door .dnum{font-size:.62rem}
  .final-door{margin:1.2rem auto 0;padding:.9rem;font-size:.85rem}
  .final-door .fd-title{font-size:1.05rem}
}
/* 手機橫放（很矮）：壓上下，避免對白被擠出畫面 */
@media (max-height: 460px){
  .er-bar{height:3vh}
  .er-hud{padding:.3rem .7rem;gap:.35rem}
  .er-status{margin:0 auto 3.5vh;min-height:2.4em;padding:.6rem 1rem}
  .er-portrait{height:96px;margin:-46px 0 -.6rem 0}
  .er-inv{padding:.3rem 1rem}
  .reflect{max-height:94vh}
}

/* ===========================================================
   解鎖/得碎片的金色火花（game.js burst() 用 GSAP 驅動）
   =========================================================== */
.spark{position:fixed;width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:50%;z-index:9999;pointer-events:none;
  background:radial-gradient(circle,#ffe9b0 0%,var(--gold) 55%,transparent 78%);
  box-shadow:0 0 10px rgba(230,179,92,.85)}

/* ===========================================================
   減少動態（prefers-reduced-motion）：
   - 純裝飾的循環動畫（雲霧、燈火、Ken Burns、雨絲火光）直接關掉
   - 進場動畫縮到 0.01s（保留 forwards 結尾狀態，元素不會卡在透明）
   - JS 端（game.js REDUCED）同步關掉光塵、逐字、火花
   =========================================================== */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01s !important;animation-delay:0s !important;
    animation-iteration-count:1 !important;transition-duration:.12s !important;scroll-behavior:auto !important}
  .cover-mist,.sc-cover::before,.er-fx,.er-fx *{animation:none !important}
}

/* ===========================================================
   過關彩蛋：泛黃書籤（人物幕後小故事）＋ 結局時間揭曉
   =========================================================== */
.egg-card{position:relative;max-width:560px;width:min(560px,92vw);margin:auto;
  background:linear-gradient(178deg,#f3e7ca 0%,#ead8b0 100%);color:#43351d;
  border-radius:4px;padding:1.5rem 1.7rem 1.2rem;transform:rotate(-.8deg);
  box-shadow:0 24px 70px rgba(0,0,0,.7),0 2px 0 rgba(255,255,255,.35) inset;
  font-family:var(--serif);max-height:82vh;overflow:auto}
.egg-card::before{content:"";position:absolute;top:-7px;left:50%;width:92px;height:16px;
  transform:translateX(-50%) rotate(1.6deg);background:rgba(214,186,120,.55);box-shadow:0 1px 3px rgba(0,0,0,.25)} /* 一截膠帶 */
.egg-head{font-size:.82rem;letter-spacing:.18em;color:#8a6c33;margin-bottom:.7rem}
.egg-body{line-height:2;font-size:1.02rem;letter-spacing:.03em;white-space:pre-line}
.egg-acts{text-align:right;margin-top:1rem}
.ending-time{opacity:0;animation:lineIn 1s ease forwards;color:var(--gold-soft);letter-spacing:.12em;margin-top:1.3rem;
  text-shadow:0 2px 12px rgba(0,0,0,.85)}
@media (max-width:600px){ .egg-card{padding:1.1rem 1.2rem 1rem} .egg-body{font-size:.95rem;line-height:1.9} }

/* 彩蛋書籤上的人物拍立得（泛黃濾鏡＋白框＋微傾斜） */
.egg-photo{float:right;width:92px;margin:0 0 .5rem .9rem;padding:6px 6px 4px;
  background:#fbf6ea;border:1px solid rgba(120,90,40,.28);
  box-shadow:0 6px 16px rgba(0,0,0,.28);transform:rotate(2.4deg)}
.egg-photo img{display:block;width:100%;filter:sepia(.3) contrast(.95) saturate(.9)}
.egg-photo figcaption{text-align:center;font-size:.72rem;color:#7a5f2e;letter-spacing:.08em;padding-top:.25rem}
@media (max-width:600px){ .egg-photo{width:74px;margin-left:.6rem} }