:root{
  --paper:#efe6d2; --paper2:#e4d7bb; --ink:#1f1b16; --ink2:#4a4036; --dim:#8a7b66;
  --red:#a8322d; --red2:#7a1f1f; --gold:#b8862b; --jade:#3f6b6a; --line:rgba(31,27,22,.18);
  --card:#f7f0df; --shadow:0 6px 18px rgba(40,25,10,.18);
  --font:"LXGW WenKai TC","Noto Serif TC","PingFang TC","Microsoft JhengHei",serif;
  --title:"Noto Serif TC","LXGW WenKai TC",serif;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.7;
  user-select:none;-webkit-user-select:none;transition:background .8s}
body[data-bg=night]{background:#2b2a2e}
body[data-bg=dusk]{background:#c9a882}
body[data-bg=sea]{background:#d9e2dc}
.paper{position:fixed;inset:0;pointer-events:none;opacity:.55;mix-blend-mode:multiply;
  background:
   radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.5),transparent 60%),
   radial-gradient(ellipse at 80% 90%,rgba(120,90,50,.25),transparent 60%),
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
body[data-bg=night] .paper{opacity:.35;mix-blend-mode:overlay}
.hills{position:fixed;left:0;right:0;bottom:0;width:100%;height:32vh;fill:var(--ink);pointer-events:none}
body[data-bg=night] .hills{fill:#000;opacity:.8}
body[data-bg=sea] .hills{fill:#2f4e58;opacity:.5}
button{font-family:inherit;font-size:16px;color:inherit;cursor:pointer;border:none;background:none}
.screen{position:fixed;inset:0;display:none;flex-direction:column;padding:calc(12px + var(--safe-t)) 16px calc(16px + var(--safe-b));max-width:560px;margin:0 auto}
.screen.on{display:flex}
.dim{color:var(--dim);font-size:14px;margin:6px 0}
.primary,.ghost,.opt{display:block;width:100%;padding:12px 16px;border-radius:4px;margin:8px 0;font-size:17px;letter-spacing:.15em}
.primary{background:var(--ink);color:var(--paper);box-shadow:var(--shadow)}
.ghost{border:1px solid var(--ink2);color:var(--ink)}
.primary:active,.ghost:active,.opt:active{transform:translateY(1px)}

/* 標題 */
#title{justify-content:center;align-items:center;text-align:center;color:#efe6d2}
.t-wrap{position:relative;width:100%;max-width:340px}
.t-moon{width:150px;height:150px;border-radius:50%;margin:0 auto -40px;background:radial-gradient(circle at 40% 40%,#fff8e6,#e9dcbf 60%,#cdbb95);box-shadow:0 0 60px rgba(255,240,200,.35);opacity:.9}
.t-name{font-family:var(--title);font-weight:900;font-size:68px;letter-spacing:.2em;margin:0;line-height:1.1;color:#f3ead6;text-shadow:0 3px 0 #000,0 0 24px rgba(0,0,0,.6);position:relative}
.t-sub{font-size:24px;letter-spacing:.8em;margin:4px 0 18px .8em;color:#d9c9a6}
.t-seal{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:64px;border:3px solid var(--red);color:#efe6d2;background:var(--red);
  font-family:var(--title);font-weight:900;font-size:20px;line-height:1.15;border-radius:3px;transform:rotate(-6deg);margin-bottom:22px;box-shadow:0 0 0 2px rgba(239,230,210,.25)}
.t-btns .primary{background:#efe6d2;color:var(--ink)}
.t-btns .ghost{border-color:#bfae8c;color:#efe6d2}
.t-note{color:#a89878;font-size:13px;letter-spacing:.2em}

/* 劇情 */
.topbar{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--ink2);z-index:2}
body[data-bg=night] .topbar{color:#cfc2a6}
.pill{border:1px solid currentColor;border-radius:20px;padding:3px 12px;font-size:13px;margin-left:6px;color:inherit}
.pill.on{background:var(--red);border-color:var(--red);color:#fff}
#sceneCard{position:absolute;top:32%;left:0;right:0;text-align:center;opacity:0;pointer-events:none}
#sceneCard.on{animation:scene 1.9s ease forwards}
@keyframes scene{0%{opacity:0;letter-spacing:1em;filter:blur(6px)}25%,75%{opacity:1;letter-spacing:.35em;filter:blur(0)}100%{opacity:0}}
.sc-place{font-family:var(--title);font-weight:900;font-size:30px;color:var(--ink)}
.sc-time{font-size:16px;color:var(--dim);margin-top:6px;letter-spacing:.3em}
body[data-bg=night] .sc-place{color:#efe6d2}
#dialog{position:relative;margin-top:auto;background:rgba(247,240,223,.96);border:1px solid var(--line);border-radius:6px;
  padding:26px 18px 30px;min-height:190px;box-shadow:var(--shadow);z-index:2;transition:opacity .3s}
#dialog::before{content:"";position:absolute;inset:5px;border:1px solid rgba(31,27,22,.1);border-radius:3px;pointer-events:none}
#dialog.hide{opacity:0}
#speaker{position:absolute;top:-15px;left:74px;color:#fff;padding:2px 14px;border-radius:2px;font-weight:700;letter-spacing:.2em;font-size:16px}
#face{position:absolute;top:-34px;left:12px;width:54px;height:54px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-family:var(--title);font-weight:900;font-size:26px;box-shadow:var(--shadow)}
#dialog.narr #text{color:var(--ink2);font-style:normal}
#text{font-size:18px;min-height:3.4em;white-space:pre-wrap}
.tap{position:absolute;right:14px;bottom:6px;color:var(--red);font-size:12px;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
#choices .opt{background:var(--card);border:1px solid var(--ink2);text-align:left;letter-spacing:.04em;font-size:16px;line-height:1.5}
#choices .opt::before{content:"◆ ";color:var(--red)}

/* 驗屍 */
#deduce{overflow-y:auto;background:var(--paper)}
.d-head{display:flex;align-items:center;gap:10px}
.d-head h2{margin:0;font-family:var(--title);font-size:24px}
.seal{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--red);color:#fff;font-family:var(--title);font-weight:900;border-radius:3px}
.clues{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.clue{padding:8px 16px;border:1px dashed var(--ink2);border-radius:20px;background:var(--card)}
.clue.seen{border-style:solid;background:var(--ink);color:var(--paper)}
.clue-text p{background:var(--card);border-left:3px solid var(--ink2);padding:8px 12px;margin:8px 0;font-size:16px}
.clue-text b{color:var(--red2)}
.q h3{font-size:18px;margin:14px 0 4px}
.q .opt{background:var(--card);border:1px solid var(--ink2);text-align:left;letter-spacing:.03em}
.q .opt.right{background:var(--jade);color:#fff}
.q .opt.wrong{text-decoration:line-through;opacity:.5}
.d-say{margin:10px 0 30px;padding:10px 12px;border-radius:4px;font-size:16px}
.d-say b{display:block;letter-spacing:.2em}
.d-say.ok{background:rgba(63,107,106,.12)} .d-say.ng{background:rgba(168,50,45,.1)}

/* 戰鬥 */
#battle{padding-bottom:calc(10px + var(--safe-b));color:#efe6d2}
.b-head{text-align:center}
.b-title{font-family:var(--title);font-weight:900;font-size:22px;letter-spacing:.3em}
.b-goal{font-size:13px;color:#c9b99a}
.b-turn{font-size:13px;color:#e8c27a}
.alert-wrap{display:flex;align-items:center;gap:8px;justify-content:center;font-size:13px;margin-top:2px}
.alert-wrap .bar{width:150px;height:8px;background:rgba(255,255,255,.15);border-radius:4px;overflow:hidden}
.alert-wrap i{display:block;height:100%;background:#d9b45a;transition:width .3s}
.alert-wrap.danger i{background:#e0483e} .alert-wrap.danger{color:#ff8a7f;animation:blink 1s infinite}
.enemies{display:flex;justify-content:center;gap:8px;margin:12px 0 4px}
.enemy{position:relative;flex:1;max-width:140px;background:rgba(247,240,223,.95);color:var(--ink);border-radius:6px;padding:8px 6px;text-align:center;box-shadow:var(--shadow);transition:transform .2s,opacity .4s}
.enemy.dead{opacity:.25;filter:grayscale(1)}
.enemy.pickable{outline:3px solid var(--red);animation:pulse 1s infinite}
@keyframes pulse{50%{outline-color:transparent}}
.intent{font-size:12px;min-height:34px;line-height:1.35;color:var(--ink2)}
.intent em{display:inline-block;font-style:normal;background:var(--ink);color:var(--paper);width:18px;height:18px;line-height:18px;border-radius:50%;margin-right:3px;font-size:11px}
.intent.atk em{background:var(--red)} .intent.def em{background:var(--jade)} .intent.buff em{background:var(--gold)} .intent.stun em{background:#777}
.e-face{width:56px;height:56px;margin:4px auto;border-radius:50%;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-family:var(--title);font-weight:900;font-size:28px;background:radial-gradient(circle,#fff 30%,#e9dfca)}
.e-name{font-weight:700;letter-spacing:.1em}
.hpbar{position:relative;height:14px;background:#d8ccb4;border-radius:7px;overflow:visible;margin:4px 0}
.hpbar i{display:block;height:100%;background:var(--red);border-radius:7px;transition:width .3s}
.hpbar b{position:absolute;inset:0;font-size:11px;line-height:14px;color:#fff;text-shadow:0 0 3px #000;font-weight:400}
.tags{min-height:20px}
.tag{display:inline-block;font-size:11px;padding:0 5px;border-radius:3px;background:#777;color:#fff;margin:1px}
.tag.def{background:var(--jade)} .tag.buff{background:var(--gold)} .tag.vuln{background:var(--red)} .tag.dodge{background:#5a6fa8}
.b-log{min-height:62px;font-size:13px;text-align:center;color:#d9cba9}
.b-log p{margin:1px 0}
.b-log .hint{color:#ffb38a;font-size:15px;animation:blink 1s infinite}
.player{position:relative;display:flex;align-items:center;gap:10px;background:rgba(247,240,223,.95);color:var(--ink);border-radius:6px;padding:8px 10px;box-shadow:var(--shadow)}
.p-face{width:50px;height:50px;border-radius:50%;background:var(--red2);color:#f3ead6;display:flex;align-items:center;justify-content:center;font-family:var(--title);font-weight:900;font-size:26px}
.p-info{flex:1}
.p-name{font-weight:700;letter-spacing:.2em}
.p-stat{min-height:20px}
.energy{text-align:center}
.orb{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7fd0c7,#2d6a66);color:#fff;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(80,200,190,.6)}
.energy small{font-size:11px;color:var(--ink2)}
.hand{display:flex;gap:10px;overflow-x:auto;padding:30px 4px 6px 12px;margin-top:auto;scrollbar-width:none}
.hand::-webkit-scrollbar{display:none}
.card{position:relative;flex:0 0 102px;height:132px;background:var(--card);color:var(--ink);border-radius:6px;padding:22px 8px 8px;box-shadow:var(--shadow);
  border:2px solid var(--ink);transition:transform .15s;text-align:center}
.card:active{transform:translateY(-4px)}
.card.sel{transform:translateY(-14px);border-color:var(--red);box-shadow:0 10px 20px rgba(168,50,45,.4)}
.card.off{opacity:.45}
.c-cost{position:absolute;top:-10px;left:-8px;width:28px;height:28px;border-radius:50%;background:#2d6a66;color:#fff;font-weight:700;line-height:28px;font-size:15px}
.c-type{position:absolute;top:4px;right:6px;font-size:12px;color:#fff;background:var(--ink);padding:0 5px;border-radius:2px}
.t-攻 .c-type{background:var(--red)} .t-守 .c-type{background:var(--jade)} .t-閃 .c-type{background:#5a6fa8}
.t-心 .c-type{background:var(--gold)} .t-援 .c-type{background:#9a4f86} .t-奇 .c-type{background:#555}
.t-援{border-color:#9a4f86}
.c-name{font-family:var(--title);font-weight:900;font-size:16px;line-height:1.25;margin-bottom:6px}
.c-desc{font-size:12px;line-height:1.45;color:var(--ink2)}
.b-actions{display:flex;gap:10px}
.b-actions button{margin:6px 0}
.b-actions .ghost{flex:0 0 90px;color:#efe6d2;border-color:#9b8c70}
#btnEnd{flex:1;padding:12px;border-radius:4px;background:var(--red);color:#fff;font-size:18px;letter-spacing:.3em;box-shadow:var(--shadow)}
#btnEnd:disabled{opacity:.4}
.shake{animation:shake .35s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.float{position:absolute;left:50%;top:30%;transform:translateX(-50%);font-weight:900;font-size:24px;pointer-events:none;animation:float .9s ease-out forwards;z-index:5;text-shadow:0 0 4px #fff}
.float.hit{color:var(--red)} .float.blk{color:#5a6fa8} .float.heal{color:#2d8a5a}
@keyframes float{to{top:-30%;opacity:0}}

/* 彈窗 */
#mask{position:fixed;inset:0;background:rgba(10,8,6,.55);display:none;z-index:10}
#mask.on{display:block}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 32px);max-width:440px;max-height:86vh;display:none;flex-direction:column;
  background:var(--paper);color:var(--ink);border-radius:6px;padding:18px;z-index:11;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.modal.on{display:flex}
.modal.tall{height:80vh}
.modal h3{margin:0 0 6px;font-family:var(--title);font-size:22px;letter-spacing:.2em;text-align:center}
#menu button:not(.ghost){display:block;width:100%;padding:12px;border-bottom:1px solid var(--line);font-size:17px;letter-spacing:.2em}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
#backlogList p{margin:0 0 10px;font-size:15px} #backlogList b{color:var(--red2);margin-right:6px}
.grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding-top:12px;align-content:flex-start}
#result p{text-align:center}
#result .reward{justify-content:center;flex-wrap:nowrap;margin:0;padding-left:8px;gap:8px}
#result .reward .card{flex:1 1 0;min-width:0;height:auto;min-height:130px;padding:22px 5px 8px}
#result .reward .card{cursor:pointer}
.next{font-family:var(--title);font-size:18px;color:var(--red2)}
.chap{display:block;width:100%;text-align:left;padding:12px;border-bottom:1px solid var(--line);font-size:17px}
.chap.lock{color:var(--dim)}
.row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.row.col{flex-direction:column;align-items:stretch}
.row input[type=range]{width:100%}
.row input[type=password],.row select{font:inherit;padding:6px;border:1px solid var(--ink2);background:var(--card);border-radius:4px}
.row input[type=checkbox]{width:22px;height:22px;accent-color:var(--red)}
hr{border:none;border-top:1px solid var(--line);margin:12px 0}
@media (min-height:760px){ .card{flex-basis:108px;height:140px} }

/* 劇情背景 */
#backdrop{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#backdrop svg{position:absolute;left:0;right:0;width:100%}
#backdrop .bd-place{position:absolute;right:18px;top:150px;writing-mode:vertical-rl;font-family:var(--title);font-weight:900;font-size:44px;letter-spacing:.25em;opacity:.13;color:var(--ink)}
body[data-bg=night] #backdrop .bd-place{color:#efe6d2;opacity:.12}
#backdrop .bd-in{animation:fadein 1.2s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.topbar,#dialog,#sceneCard{z-index:2}