/* ============================================================
   王宮之夜 — 俯視潛行恐怖 UI
   ============================================================ */
:root{
  --bg:#08070a; --ink:#d9d2c4; --ink-dim:#8a8276;
  --amber:#e6a23c; --amber-soft:#caa15e; --ghost:#cde0e6;
  --blood:#9e2b2b; --blood-bright:#d23b3b;
  --panel:rgba(14,12,16,.86); --panel-edge:#3a3340;
  --serif:"Noto Serif TC","Songti TC","SimSun",serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:#000;overflow:hidden}
body{font-family:var(--serif);color:var(--ink);letter-spacing:.02em}

#game{position:fixed;inset:0;width:100%;height:100%;display:block;background:#000;touch-action:none}

/* 敘事疊層 */
#overlay{position:fixed;inset:0;z-index:5;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));backdrop-filter:blur(1.5px)}
#ov-stage{width:min(820px,100%);max-height:100%;overflow-y:auto;scrollbar-width:thin}

.panel{background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;
  padding:26px clamp(18px,4vw,40px);box-shadow:0 24px 80px rgba(0,0,0,.7);animation:rise .45s ease both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.center{text-align:center}
.kicker{font-size:.78rem;letter-spacing:.5em;color:var(--ink-dim);margin:0 0 14px;padding-left:.5em}
.kicker.doom{color:var(--blood-bright);letter-spacing:.4em}
h1.title{font-size:clamp(2rem,7vw,3.4rem);margin:.1em 0 .12em;font-weight:700;letter-spacing:.08em;
  text-shadow:0 0 26px rgba(205,224,230,.18),0 2px 0 #000}
.subtitle{color:var(--amber-soft);font-size:clamp(.95rem,2.6vw,1.15rem);margin:.2em 0 1.3em;letter-spacing:.2em}
.ref{font-size:.9rem;color:var(--ink-dim);letter-spacing:.1em;margin-top:8px}

.narr{font-size:clamp(1.02rem,2.7vw,1.22rem);line-height:2;margin:.2em 0;min-height:1.2em}
.narr.dim{color:var(--ink-dim)}
.whisper{font-size:.96rem}
.cursor::after{content:"▍";color:var(--amber);animation:blink 1s steps(1) infinite;margin-left:.05em}
@keyframes blink{50%{opacity:0}}

.scripture{border-left:3px solid var(--amber);background:rgba(40,30,16,.28);padding:14px 18px;margin:18px 0;
  border-radius:0 10px 10px 0;font-size:clamp(.98rem,2.5vw,1.1rem);line-height:1.95;color:#e8e0cf}
.scripture .src{display:block;margin-top:8px;font-size:.82rem;color:var(--amber-soft);letter-spacing:.12em}
.verse-line{font-size:clamp(1.05rem,3vw,1.3rem);color:var(--ghost);line-height:1.9;margin:.5em 0;
  text-shadow:0 0 18px rgba(205,224,230,.3)}

.howto{list-style:none;padding:0;margin:8px 0 4px}
.howto li{font-size:clamp(.98rem,2.5vw,1.1rem);line-height:1.7;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.ctrls{font-size:.86rem;color:var(--ink-dim);margin-top:14px;line-height:1.7;letter-spacing:.05em}

.btn{font-family:var(--serif);font-size:1.02rem;letter-spacing:.12em;color:var(--ink);
  background:linear-gradient(180deg,#211c27,#15121a);border:1px solid #4a4250;border-radius:10px;
  padding:13px 26px;cursor:pointer;transition:.16s;margin:6px;min-height:48px}
.btn:hover,.btn:focus-visible{border-color:var(--amber);color:#fff;box-shadow:0 0 18px rgba(230,162,60,.25);outline:none;transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,#3a2a18,#241808);border-color:var(--amber)}
.btn.danger{border-color:var(--blood)}
.btn.danger:hover{border-color:var(--blood-bright);box-shadow:0 0 18px rgba(210,59,59,.35);color:#ffd9d9}
.btn.mini{font-size:.9rem;padding:10px 16px;color:var(--amber-soft);border-color:#4a4250}
.btn-row{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:18px}
.doompanel{border-color:var(--blood)}

/* 奧祕之門問答 */
.puzzle-q{font-size:clamp(1.02rem,2.8vw,1.22rem);line-height:1.85;margin:.3em 0 1em;color:#ece4d3}
.choices{display:grid;gap:10px;margin-top:6px}
.choice{text-align:left;width:100%;background:rgba(20,17,24,.7);border:1px solid var(--edge);border-radius:10px;
  padding:14px 18px;cursor:pointer;color:var(--ink);font-family:var(--serif);font-size:1rem;transition:.16s;min-height:48px}
.choice:hover,.choice:focus-visible{border-color:var(--amber);background:rgba(40,32,20,.55);outline:none}
.choice.bad{animation:shudder .4s;border-color:var(--blood)}
@keyframes shudder{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.feedback{min-height:1.5em;margin-top:14px;font-size:.96rem;line-height:1.7;letter-spacing:.04em}
.feedback.bad{color:var(--blood)}
.feedback.good{color:var(--amber)}

/* 反向 RPG:器物卡 / 屬靈狀態 */
.item-icon{font-size:3rem;line-height:1;margin:.1em 0}
.item-name{font-size:1.5rem;margin:.1em 0 .3em;letter-spacing:.06em;color:#ece4d3}
.gain{color:#5cc98a;font-size:1.05rem;letter-spacing:.12em;margin:.4em 0}
.stat{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:1rem}
.stat>span{width:3em;color:var(--ink-dim);letter-spacing:.1em}
.stat>b{width:1.5em;text-align:right;color:#ece4d3}
.stat-bar{flex:1;height:12px;background:rgba(20,17,24,.8);border:1px solid var(--edge);border-radius:7px;overflow:hidden}
.stat-bar>div{height:100%;border-radius:7px;transition:width .3s}
.fineprint{font-size:.76rem;color:#5b5560;letter-spacing:.08em;margin-top:20px;line-height:1.7}

#hud{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:6;display:flex;gap:6px}
.hud-btn{width:42px;height:42px;border-radius:50%;border:1px solid #3a3340;background:rgba(14,12,16,.7);
  color:var(--ink-dim);font-size:1.05rem;cursor:pointer;display:grid;place-items:center;transition:.15s}
.hud-btn:hover{color:var(--ink);border-color:var(--amber)}
.hud-btn.off{opacity:.4;text-decoration:line-through}

@media (prefers-reduced-motion: reduce){*{animation-duration:.001s!important}}