/* 迴聲之鐘 — 樣式 */
:root{
  --ink:#f2ece0; --dim:#a99f8e; --gold:#d9b45a; --gold-dim:#8a7238;
  --panel:rgba(12,10,16,.82); --panel-solid:#14111a; --line:rgba(217,180,90,.35);
  --bad:#c9604f; --good:#7fb08a;
  --font: "Iowan Old Style","Songti TC","Noto Serif TC",ui-serif,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#07060a; color:var(--ink); font-family:var(--font);
  overflow:hidden; -webkit-font-smoothing:antialiased;
  display:flex; align-items:center; justify-content:center;
}
#app{position:relative;width:100vw;height:100vh;max-width:1600px;overflow:hidden}

/* ---------- 背景 ---------- */
#bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity .5s, filter .5s; filter:saturate(.9)}
#bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 35%,transparent 30%,rgba(0,0,0,.55) 100%)}
#vignette{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(4,3,8,.95) 0%,rgba(4,3,8,.5) 22%,transparent 45%)}
#grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  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='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- 立繪 ---------- */
#cast{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:2vw;
  padding:0 4vw 20vh}
.portrait{
  width:min(30vw,340px); height:min(62vh,620px);
  background-repeat:no-repeat; background-position:bottom center; background-size:contain;
  transition:opacity .35s, filter .35s, transform .35s;
  filter:brightness(.55) saturate(.6); opacity:.85; transform:translateY(8px) scale(.97);
  align-self:flex-end;
}
.portrait.active{filter:none;opacity:1;transform:translateY(0) scale(1)}
.portrait.enter{animation:pop .35s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(28px) scale(.94)}to{}}

/* ---------- 人群（不是立繪） ----------
   玩家是第一人稱站在人堆裡，所以人群不能佔一個 340px 的立繪格子站在別人旁邊 ——
   那樣必然變成「從外面看那一群人」，也就是俯視感的來源。它是一條貼齊畫面底部的
   前景人帶：滿寬、正面對著玩家、頭排在帶子上緣、下半截藏在文字框後面，
   露出來的那排頭剛好落在玩家的視平線上。
   放在 #cast 之前（畫在卡司底下），這樣 chars:["crowd","mia"] 的節點裡
   米亞站在人群前面還是看得清楚。 */
#crowd{position:absolute;left:0;right:0;bottom:0;height:min(52vh,520px);
  background-repeat:no-repeat;background-position:bottom center;background-size:cover;
  opacity:0;transition:opacity .4s, filter .4s;pointer-events:none;
  filter:brightness(.62) saturate(.7)}
#crowd.on{opacity:.92}
#crowd.on.active{opacity:1;filter:brightness(.85) saturate(.85)}

/* ---------- 對話框 ---------- */
#box{position:absolute;left:0;right:0;bottom:0;padding:0 max(3vw,18px) max(3vh,18px);
  cursor:pointer;user-select:none}
#box.hidden{display:none}
#nameplate{display:inline-block;padding:6px 22px 5px;margin-left:14px;
  background:linear-gradient(#2a2233,#171320);border:1px solid var(--line);
  border-bottom:none;border-radius:8px 8px 0 0;color:var(--gold);
  letter-spacing:.16em;font-size:clamp(14px,1.5vw,19px);position:relative;top:1px}
#nameplate:empty{display:none}
#textbox{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:22px 26px 26px;min-height:26vh;max-height:34vh;overflow:hidden;
  box-shadow:0 -8px 40px rgba(0,0,0,.6), inset 0 0 60px rgba(217,180,90,.05);
  backdrop-filter:blur(3px)}
#text{font-size:clamp(16px,1.85vw,25px);line-height:1.95;white-space:pre-wrap;
  text-shadow:0 2px 10px rgba(0,0,0,.9)}
#text .nar{color:#cfc6b6;font-style:italic}
#text em{color:var(--gold);font-style:normal}
#next{position:absolute;right:calc(max(3vw,18px) + 22px);bottom:calc(max(3vh,18px) + 16px);
  color:var(--gold);animation:blink 1.1s infinite;font-size:20px}
@keyframes blink{0%,100%{opacity:.15}50%{opacity:1}}

/* 略過進行中要看得出來 —— 這是一個會自己一直前進的狀態，
   玩家必須隨時知道它還開著（Esc 可以停）。 */
.hbtn.on{color:#14111a;background:var(--gold);border-color:var(--gold)}

/* ---------- 選項 ---------- */
#choices{position:absolute;left:50%;transform:translateX(-50%);bottom:38vh;
  width:min(86vw,860px);display:flex;flex-direction:column;gap:11px;z-index:6}
#choices.hidden{display:none}
.choice{background:rgba(18,15,24,.92);border:1px solid var(--line);border-left:4px solid var(--gold-dim);
  border-radius:7px;padding:15px 20px;font-size:clamp(15px,1.6vw,21px);cursor:pointer;
  transition:.16s;text-align:left;color:var(--ink);font-family:inherit;
  box-shadow:0 6px 24px rgba(0,0,0,.5); animation:slide .25s ease-out backwards}
@keyframes slide{from{opacity:0;transform:translateX(-16px)}}
.choice:hover{background:rgba(48,38,22,.95);border-left-color:var(--gold);transform:translateX(7px)}
.choice .k{color:var(--gold);margin-right:12px;font-size:.85em;opacity:.8}
.choice.locked{opacity:.4;cursor:not-allowed;border-left-color:#444;font-style:italic}
.choice.locked:hover{transform:none;background:rgba(18,15,24,.92)}
.choice .tag{float:right;color:var(--gold-dim);font-size:.72em;letter-spacing:.1em;padding-top:.4em}

/* ---------- 上方列 ---------- */
#hud{position:absolute;top:0;right:0;left:0;padding:12px 18px;display:flex;gap:8px;
  justify-content:flex-end;align-items:center;z-index:7}
#era{margin-right:auto;color:var(--gold);letter-spacing:.24em;font-size:clamp(11px,1.15vw,15px);
  text-shadow:0 2px 8px #000;opacity:.9}
.hbtn{background:rgba(10,8,14,.7);border:1px solid var(--line);color:var(--dim);
  padding:7px 13px;border-radius:6px;font-size:13px;cursor:pointer;font-family:inherit;
  letter-spacing:.1em;transition:.15s}
.hbtn:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- 提示 ---------- */
#toasts{position:absolute;top:64px;right:20px;z-index:9;display:flex;flex-direction:column;gap:8px;
  align-items:flex-end;pointer-events:none}
.toast{background:rgba(12,10,16,.94);border:1px solid var(--line);border-radius:6px;
  padding:10px 16px;font-size:15px;animation:toast 3.6s forwards;box-shadow:0 4px 20px #000}
.toast.get{border-left:3px solid var(--good)} .toast.lose{border-left:3px solid var(--bad)}
@keyframes toast{0%{opacity:0;transform:translateX(30px)}12%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateX(30px)}}

/* ---------- 面板 / 標題 ---------- */
.screen{position:absolute;inset:0;z-index:20;background:rgba(4,3,8,.93);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  backdrop-filter:blur(6px);padding:5vh 6vw;overflow-y:auto}
.screen.hidden{display:none}
.screen h2{color:var(--gold);letter-spacing:.3em;font-weight:400;font-size:clamp(18px,2.4vw,30px)}
.screen .close{position:absolute;top:20px;right:24px}
.list{width:min(94vw,780px);display:flex;flex-direction:column;gap:9px}
.row{border:1px solid var(--line);border-radius:7px;padding:13px 17px;background:rgba(16,13,22,.8)}
.row b{color:var(--gold);letter-spacing:.08em}
.row p{color:var(--dim);font-size:14px;margin-top:5px;line-height:1.7}
.row.act{cursor:pointer;transition:.15s} .row.act:hover{border-color:var(--gold);background:rgba(40,32,18,.8)}
.row.off{opacity:.35}
#title h1{font-size:clamp(34px,6.5vw,86px);letter-spacing:.22em;color:var(--gold);
  text-shadow:0 0 50px rgba(217,180,90,.35);font-weight:400}
#title .sub{color:var(--dim);letter-spacing:.42em;font-size:clamp(11px,1.3vw,16px);margin-bottom:8px}
#title .tag2{color:#6b6357;font-size:13px;letter-spacing:.2em;margin-top:2px}
#title .menu{display:flex;flex-direction:column;gap:12px;margin-top:26px;width:min(80vw,330px)}
.mbtn{background:rgba(18,15,24,.9);border:1px solid var(--line);color:var(--ink);
  padding:15px;border-radius:7px;cursor:pointer;font-family:inherit;letter-spacing:.24em;
  font-size:16px;transition:.18s}
.mbtn:hover{background:rgba(48,38,22,.95);border-color:var(--gold);color:var(--gold)}
.mbtn:disabled{opacity:.3;cursor:not-allowed}
#nameField{background:#0d0b12;border:1px solid var(--line);color:var(--ink);padding:13px;
  border-radius:6px;font-family:inherit;font-size:18px;text-align:center;letter-spacing:.2em;width:100%}
#logList{max-height:64vh;overflow-y:auto}
/* 面板內容多的時候，標題要黏在上面，不要被捲走 */
#panel{justify-content:flex-start;padding-top:64px;z-index:30}  /* 要蓋在標題(20)與結局卡(25)之上 */
#panelTitle{position:sticky;top:0;z-index:2;background:rgba(4,3,8,.95);
  padding:14px 30px;border-radius:8px;backdrop-filter:blur(4px)}
.log{padding:9px 2px;border-bottom:1px dashed rgba(217,180,90,.16);font-size:15px;line-height:1.8}
.log b{color:var(--gold);margin-right:10px}
/* ---------- 結局卡 ---------- */
#ending{position:absolute;inset:0;z-index:25;background:#050409;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;
  animation:fadein 2.4s;padding:6vw}
#ending.hidden{display:none}
#ending .kicker{color:var(--dim);letter-spacing:.5em;font-size:13px}
#ending h1{color:var(--gold);font-size:clamp(28px,5vw,62px);letter-spacing:.2em;font-weight:400;
  text-shadow:0 0 60px rgba(217,180,90,.3)}
#ending p{color:#c8bfae;max-width:640px;line-height:2.1;font-size:clamp(15px,1.7vw,20px)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:15;
  transition:opacity .12s}

/* 音量面板 */
.row.vol{display:flex;align-items:center;gap:14px}
.row.vol b{min-width:3.2em}
.row.vol input[type=range]{flex:1;accent-color:var(--gold);background:none;border:none;padding:0}
.row.vol span{min-width:2.6em;text-align:right;color:var(--dim);font-size:13px}

/* 選項多的節點（樞紐有 11–12 項）要能捲動，否則最上面幾項會被切到視窗外點不到。
   但只該捲直向：overflow-y 一設，另一軸的 visible 依規範就變成 auto，於是 hover 的
   translateX(7px) 與入場動畫的 translateX(-16px) 都會撐出一條橫向捲軸——而它的厚度
   吃不到下面 ::-webkit-scrollbar 的 width（那隻只管直向的寬），所以是用系統預設厚度
   畫在選項底下，非常顯眼。左右各留 18px 給那兩個位移站，容器同步加寬 36px，
   選項的實際寬度與 line 64 相同。 */
#choices{max-height:calc(62vh - 56px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
  width:calc(min(86vw,860px) + 36px);padding:0 18px}
#choices::-webkit-scrollbar{width:6px}
#choices::-webkit-scrollbar-thumb{background:rgba(217,180,90,.3);border-radius:3px}

/* 鎖住的選項是玩家唯一得知「缺什麼」的地方，對比度不能壓那麼低 */
.choice.locked{opacity:.72}
.choice .tag{color:var(--gold)}

/* 尊重系統的「減少動態效果」設定 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}