:root{--bg:#05070b;--panel:#131a29;--panel2:#1b2437;--line:#2d3a54;--ink:#ece6d4;--muted:#9aa6bb;--gas:#f3b95f;--gas2:#ffd98a;--cy:#3ff;--red:#d2473a;--ok:#7fd48a;
--serif:'Noto Serif TC','Songti TC','PMingLiU','Noto Serif CJK TC',serif;--sans:'Noto Sans TC','PingFang TC','Microsoft JhengHei','Noto Sans CJK TC',sans-serif;
--sl:max(10px,env(safe-area-inset-left));--sr:max(10px,env(safe-area-inset-right));--st:max(8px,env(safe-area-inset-top));--sb:max(8px,env(safe-area-inset-bottom))}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden;overscroll-behavior:none;font-size:16px;line-height:1.7;-webkit-text-size-adjust:100%;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
img{-webkit-user-drag:none}
#app{position:fixed;inset:0;overflow:hidden}
.screen{position:absolute;inset:0;display:none}
.screen.on{display:flex}
[hidden]{display:none!important}

/* ---------- buttons ---------- */
.btn{background:linear-gradient(180deg,#2a3650,#1d2740);border:1px solid #3b4b6c;border-radius:8px;padding:.5em 1.1em;color:var(--ink);letter-spacing:.06em;transition:.15s;min-height:44px;font-size:1rem}
.btn:hover{border-color:var(--gas);box-shadow:0 0 14px rgba(243,185,95,.25)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:linear-gradient(180deg,#b8863a,#8a5f22);border-color:#e0b062;color:#fff8e6;font-weight:600}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn.sm{padding:.3em .8em;font-size:.95rem}

/* ---------- title / prologue / ending ---------- */
.bgart{position:absolute;inset:0;overflow:hidden;background:#06121c center/cover no-repeat}
#sTitle .bgart,#sPro .bgart,#sEnd .bgart{filter:saturate(.95) brightness(.7)}
#sTitle,#sPro,#sEnd{align-items:center;justify-content:center}
.titlebox{position:relative;text-align:center;padding:12px;max-width:96vw;isolation:isolate}
.titlebox:before,.endbox:before{content:'';position:absolute;inset:-30px -70px;background:radial-gradient(ellipse at center,rgba(3,8,14,.82) 25%,rgba(3,8,14,0) 72%);z-index:-1}
.titlebox .logo{width:min(560px,62vw,86vh);max-height:34vh;object-fit:contain;filter:drop-shadow(0 4px 18px rgba(0,0,0,.7))}
.titlebox .sub{font-family:monospace;letter-spacing:.4em;color:var(--cy);opacity:.85;font-size:.85rem;margin:.2em 0 1em;text-shadow:0 0 8px #0ff8;min-height:1.2em}
.titlebox .menu{display:grid;grid-template-columns:repeat(2,minmax(0,200px));gap:10px;justify-content:center}
.titlebox .menu .btn{width:100%}
.titlebox .ver{margin-top:.8em;color:var(--muted);font-size:.78rem;opacity:.7}
.morelink{display:inline-block;margin-top:.9em;color:var(--gas);font-size:.88rem;letter-spacing:.04em;text-decoration:none;opacity:.85;min-height:44px;line-height:44px;padding:0 .4em;transition:.15s}
.morelink:hover,.morelink:focus{opacity:1;color:var(--gas2);text-decoration:underline}
.legalbar{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin-top:.4em}
.legalbar a{color:var(--muted);font-size:.78rem;text-decoration:none;opacity:.7;min-height:44px;line-height:44px;padding:0 .6em;transition:.15s}
.legalbar a:hover,.legalbar a:focus{opacity:1;color:var(--ink);text-decoration:underline}
.copyright{color:var(--muted);font-size:.72rem;opacity:.55;margin-top:.2em}
.term{position:relative;width:min(720px,92vw);max-height:88vh;overflow:auto;background:rgba(2,16,24,.82);border:1px solid rgba(51,255,255,.55);border-radius:8px;box-shadow:0 0 40px rgba(51,255,255,.18),inset 0 0 40px rgba(51,255,255,.06);padding:18px 22px 12px}
.term .hd{font-family:monospace;color:var(--cy);letter-spacing:.2em;font-size:.8rem;margin-bottom:10px;opacity:.8;display:flex;gap:10px;align-items:center}
.term .hd:before{content:'';width:9px;height:9px;border-radius:50%;background:var(--cy);box-shadow:0 0 8px var(--cy);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.tline{color:#c8fbff;margin:.5em 0;text-shadow:0 0 6px rgba(51,255,255,.35)}
.tline.sys{color:#ffd98a}.tline .cur{display:inline-block;width:.55em;height:1em;background:var(--cy);vertical-align:-.15em;animation:blink .8s infinite}
.term .row{display:flex;gap:10px;margin-top:10px;justify-content:flex-end;flex-wrap:wrap}
.term input{flex:1;min-width:160px;background:rgba(0,30,40,.8);border:1px solid var(--cy);color:#dffeff;padding:.5em .8em;border-radius:6px;font:inherit;font-size:1.05rem;outline:none;min-height:44px}
#sEnd,#sTitle{overflow:auto}
.endbox{position:relative;width:min(700px,92vw);text-align:center;padding:16px 12px;isolation:isolate;max-height:100%;overflow:auto}
.endbox .lab{font-family:monospace;letter-spacing:.4em;color:var(--cy);font-size:.8rem;opacity:.8}
.endbox h2{font-family:var(--serif);font-size:clamp(1.6rem,6vh,2.8rem);color:#fff4d6;letter-spacing:.14em;margin:.2em 0 .4em;text-shadow:0 0 24px rgba(243,185,95,.6)}
.endbox p{color:#dcd6c4;line-height:1.9;text-align:left;margin:.4em 0}
.stats{display:flex;gap:10px;justify-content:center;margin:12px 0;flex-wrap:wrap}
.stat{background:rgba(10,16,28,.8);border:1px solid var(--line);border-radius:10px;padding:6px 14px;min-width:100px}
.stat b{display:block;font-size:1.25rem;color:var(--gas2);font-family:var(--serif)}.stat span{color:var(--muted);font-size:.85rem}
.endbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- game screen: stage + corner buttons ---------- */
#sGame{background:#000;overflow:hidden}
#viewport{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#0c121d,#03050a)}
#stage{position:relative;flex:0 0 auto;overflow:hidden;background:#0a0f18}
#art,#hs{position:absolute;inset:0}
#art img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;pointer-events:none}
#art img.ovl{mix-blend-mode:normal}
#art img.ovl.glitch{mix-blend-mode:screen;animation:glyph 2.6s steps(1) infinite}
.glitchOn #art img.bg{animation:artj 3.2s steps(1) infinite;filter:drop-shadow(3px 0 0 rgba(0,255,255,.45)) drop-shadow(-3px 0 0 rgba(255,40,100,.35)) saturate(1.15) hue-rotate(-8deg)}
@keyframes artj{0%,100%{transform:none}8%{transform:translate(4px,-2px)}9%{transform:none}46%{transform:translate(-6px,1px) skewX(2deg)}47%{transform:none}78%{transform:translate(3px,0)}80%{transform:none}}
@keyframes glyph{0%,100%{opacity:.9}20%{opacity:.4}55%{opacity:1}70%{opacity:.55}}
#hs{z-index:2}
.hs{position:absolute;background:transparent;border:0;padding:0;margin:0;outline:none;cursor:var(--cur,pointer);border-radius:10px;transition:background .15s,box-shadow .15s}
.hs:hover{background:rgba(255,217,138,.10);box-shadow:inset 0 0 0 2px rgba(255,217,138,.45)}
.hs:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,217,138,.8)}
.hsdot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:rgba(255,217,138,.85);box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 10px 2px rgba(243,185,95,.7);pointer-events:none;animation:dotp 2.2s ease-in-out infinite;z-index:3}
.hsdot.off{display:none}
body.nodots .hsdot{display:none}
@keyframes dotp{0%,100%{transform:scale(.8);opacity:.65}50%{transform:scale(1.25);opacity:1}}
#fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .22s;z-index:4}
#fade.on{opacity:1;pointer-events:auto}
#sname{position:absolute;left:50%;top:var(--st);transform:translateX(-50%);z-index:6;pointer-events:none;font-family:var(--serif);letter-spacing:.25em;color:var(--gas2);text-shadow:0 2px 6px #000,0 0 12px #000;font-size:1rem;padding:.1em .9em;background:rgba(5,8,14,.45);border-radius:20px;white-space:nowrap}
.corner{position:absolute;z-index:6;display:flex;gap:10px}
.corner.tl{left:var(--sl);top:var(--st)}.corner.tr{right:var(--sr);top:var(--st)}
.corner.bl{left:var(--sl);bottom:var(--sb)}.corner.br{right:var(--sr);bottom:var(--sb)}
.fab{position:relative;width:52px;height:52px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;background:rgba(8,12,20,.55);border:1.5px solid rgba(243,185,95,.55);color:var(--gas2);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 4px 14px rgba(0,0,0,.45);transition:.15s}
.fab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fab:hover{background:rgba(40,28,10,.7);box-shadow:0 0 16px rgba(243,185,95,.5)}
.fab:active{transform:scale(.94)}
.fab b{position:absolute;right:-4px;top:-4px;min-width:20px;height:20px;padding:0 5px;background:var(--gas);color:#241606;border-radius:10px;font-size:.75rem;line-height:20px;text-align:center}
.fab.bump{animation:bump .5s}
.fab.dim{opacity:.55}
@keyframes bump{30%{transform:scale(1.2);border-color:var(--gas);box-shadow:0 0 18px var(--gas)}}
@media (max-height:480px){.fab{width:46px;height:46px}.fab svg{width:23px;height:23px}.corner{gap:8px}#sname{font-size:.9rem}}

/* ---------- overlays ---------- */
.ov{position:absolute;inset:0;display:none;z-index:50;background:rgba(3,6,11,.72);backdrop-filter:blur(3px);align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.ov.on{display:flex;animation:fadein .2s}
@keyframes fadein{from{opacity:0}}
.card{position:relative;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 70px #000b;width:min(680px,100%);max-height:100%;overflow:auto;padding:18px 22px}
.card.wide{width:min(1000px,100%);height:min(100%,640px)}
.card h3{font-family:var(--serif);margin:.1em 0 .5em;font-size:1.25rem;color:var(--gas2);letter-spacing:.1em;padding-right:44px}
.card .x{position:absolute;right:6px;top:4px;background:none;border:0;font-size:1.8rem;color:var(--muted);width:44px;height:44px;line-height:1}
.card .x:hover{color:#fff}
.card .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.ptxt{font-size:1.05rem;line-height:1.9}
/* 視窗層級：底層＝工作畫面（證物牆、推理、對話、清單）；中層＝選單類；上層＝說明／文件／放大（永遠蓋在工作畫面上）；最上＝華生、確認框 */
#ovWall{z-index:52}#ovDed{z-index:53}#ovTalk{z-index:54}#ovKw{z-index:55}#ovMap{z-index:57}#ovCodex{z-index:57}#ovMenu{z-index:58}#ovScore{z-index:60}
#ovPanel{z-index:70}#ovDoc{z-index:72}#ovZoom{z-index:74}#ovImg{z-index:74}#ovWatson{z-index:80}#ovAsk{z-index:90}
.kw{color:var(--gas2);border-bottom:2px dashed var(--gas);background:rgba(243,185,95,.13);border-radius:3px;padding:0 3px;cursor:pointer;transition:.2s;white-space:nowrap}
.kw:hover{background:rgba(243,185,95,.3)}
.kw.got{border-bottom-style:solid;border-color:#6a7488;color:#a9b4c8;background:transparent}
.kw.bad{color:#f66}
.paper .kw{color:#7a3500;border-color:#a35a1c;background:rgba(190,110,30,.14)}.paper .kw.got{color:#6a5a40;border-color:#a39270;background:transparent}
.paper [data-kw].kw{display:inline;white-space:normal}
.fly{position:fixed;z-index:200;pointer-events:none;background:var(--gas);color:#241606;padding:2px 10px;border-radius:12px;font-size:.9rem;font-weight:700;box-shadow:0 0 18px var(--gas);transition:transform .75s cubic-bezier(.5,-.2,.6,1),opacity .75s;white-space:nowrap}
.cico{width:20px;height:20px;vertical-align:-4px;margin-right:.25em;object-fit:contain}

/* ---------- talk ---------- */
.talkov{align-items:flex-end;padding:0;background:rgba(3,6,11,.5)}
.talkwrap{position:relative;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:2vw;padding:0 max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.tpor{position:relative;flex:0 0 auto;height:min(88%,680px);aspect-ratio:4/5;pointer-events:none}
.tpor img{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:bottom;opacity:0;transition:opacity .2s;filter:drop-shadow(0 6px 18px rgba(0,0,0,.7))}
.tpor img.show{opacity:1}
.tcard{position:relative;flex:1;max-width:780px;max-height:66%;min-width:0;overflow:hidden;background:linear-gradient(180deg,rgba(27,36,55,.96),rgba(19,26,41,.97));border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 50px #000b;padding:12px 18px 10px;display:flex;flex-direction:column}
/* 手機橫式等矮螢幕：對話框與人物立繪盡量用滿高度，減少話題選項被擠壓 */
@media (max-height:460px){
  .tcard{max-height:92%}
  .tpor{height:min(92%,680px)}
}
.tname{font-family:var(--serif);color:var(--gas2);letter-spacing:.1em;font-size:1.1rem;padding-right:64px}
.tlogb{position:absolute;right:10px;top:8px;opacity:.75;z-index:2}
.tlogb:hover{opacity:1}
.watson .tlogb{display:none}
/* 對話紀錄 */
#ovLog{z-index:56}#ovTeaser{z-index:76}
.teaart{margin:.2em 0 .8em;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px #000a}
.teaart img{display:block;width:100%;height:auto;max-height:min(44vh,340px);object-fit:cover;object-position:50% 42%}
.teatxt{margin-bottom:.6em}
#askMsg{white-space:pre-line}
#ovLog .card{display:flex;flex-direction:column;overflow:hidden}
.logbox{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4px 8px 4px 2px;display:flex;flex-direction:column;gap:9px}
.logrow{line-height:1.75;font-size:.98rem}
.logrow b{font-family:var(--serif);color:var(--gas2);letter-spacing:.06em;margin-right:.55em}
.logrow b small{color:var(--muted);font-size:.75em;margin-left:.4em;letter-spacing:.02em;font-family:var(--sans,inherit)}
.logrow.me b{color:#bcd6ff}
.logrow.narr{color:var(--muted);font-style:italic}
.logrow.wat{border-left:2px solid rgba(51,255,255,.5);padding-left:10px}
.logrow.wat b{color:var(--cy);font-family:monospace}
.logrow.ask{color:var(--muted);font-size:.9rem}
.logrow.obs{color:#cfd6e2}
.logrow.obs b{color:#9fb2c9;font-size:.92em}
.logsep{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.82rem;letter-spacing:.14em;margin-top:6px}
.logsep:before,.logsep:after{content:"";height:1px;background:var(--line);flex:1}
.logempty{color:var(--muted);padding:12px 2px}.tname small{color:var(--muted);font-size:.8rem;margin-left:.6em;letter-spacing:.04em}
.ttext{margin:.35em 0;min-height:3.4em;font-size:1.05rem;line-height:1.8;animation:fadein .3s}
.topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-top:4px;flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;align-content:start;
  background-image:linear-gradient(#1b2437,rgba(27,36,55,0)),linear-gradient(rgba(19,26,41,0),#131a29),radial-gradient(farthest-side at 50% 0%,rgba(0,0,0,.45),rgba(0,0,0,0)),radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.45),rgba(0,0,0,0));
  background-repeat:no-repeat;background-attachment:local,local,scroll,scroll;background-position:top,bottom,top,bottom;background-size:100% 22px,100% 22px,100% 10px,100% 10px}
.topics:empty{display:none}
.tcard.presenting{max-height:84%}.tcard.presenting .ttext{display:none}
.topics .btn{text-align:left}
.tacts{display:flex;justify-content:flex-end;flex-wrap:wrap;margin-top:auto;padding-top:6px;flex:0 0 auto;border-top:1px solid transparent}
.tcard:not(.presenting) .tacts:has(#tEnd:not([hidden])){border-top-color:var(--line)}
#tEnd{margin-left:0}
.pres{grid-column:1/-1}
.pres .tabsrow{display:flex;gap:6px;margin-bottom:8px;flex-wrap:nowrap;overflow-x:auto;position:sticky;top:0;z-index:1;background:rgba(21,29,46,.98);padding:2px 0 4px}
.pres .tabsrow .cat{min-height:40px;white-space:nowrap;flex:0 0 auto}
.pres .grid{display:flex;flex-wrap:wrap;gap:8px}
.evcard{width:96px;background:#1f2a42;border:1px solid #3b4b6c;border-radius:8px;padding:5px 4px;text-align:center;font-size:.78rem;line-height:1.28;min-height:44px;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;display:flex;flex-direction:column;align-items:center}
.evcard img{width:52px;height:52px;object-fit:contain;display:block;margin:0 auto 3px;pointer-events:none}
.evcard span{display:block;word-break:break-all;overflow-wrap:anywhere}
.evcard.testi img{object-fit:cover;object-position:50% 8%;border-radius:50%;border:2px solid #8a6a38;background:#2a2218}
.evcard:hover{border-color:var(--gas)}
.btn.chal,.topics .btn.chal{background:linear-gradient(180deg,#6a1f1f,#4a1414);border-color:#e0675a;color:#ffe1d8;font-weight:700}
.btn.chal:hover{box-shadow:0 0 16px rgba(224,103,90,.5);border-color:#ff8b7e}
.tacts{gap:8px}
.ttext.chal{border-left:3px solid #e0675a;padding-left:10px;background:linear-gradient(90deg,rgba(224,103,90,.12),transparent 70%);border-radius:0 6px 6px 0}
.chtag{display:inline-block;font-size:.72rem;line-height:1.5;padding:0 .55em;margin-left:.3em;border-radius:10px;background:#e0675a;color:#2a0806;font-weight:700;vertical-align:.12em;letter-spacing:.06em;white-space:nowrap}
.ttext.narr{font-style:italic;color:#c9c0a6;font-family:var(--serif)}
.narrnm{color:var(--muted);font-family:var(--serif);letter-spacing:.3em}
.pquote{grid-column:1/-1;background:rgba(224,103,90,.12);border:1px solid rgba(224,103,90,.55);border-radius:10px;padding:6px 12px;margin-bottom:8px;line-height:1.55}
.pquote b{color:#ff9d90;margin-right:.4em;letter-spacing:.1em}.pquote span{display:block;color:var(--muted);font-size:.85rem}
.pquote.gen{background:rgba(255,255,255,.04);border-color:var(--line)}
.pres .tabsrow .cat.big{font-size:1rem;padding:.1em 1em}.pres .tabsrow .sep{width:1px;background:var(--line);margin:0 4px}
.pres .tabsrow .cat.back{color:var(--ink)}
.pres .grid .chip{cursor:pointer;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.25;padding:.25em .8em}
.pres .grid .chip small{margin:0;font-size:.7rem}
.tcard{position:relative}
.tstamp{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) rotate(-8deg) scale(.4);font-family:var(--serif);font-weight:900;font-size:2.6rem;letter-spacing:.2em;color:#ffd0c8;padding:.1em .6em;border:5px solid #e0675a;border-radius:10px;background:rgba(80,10,10,.85);box-shadow:0 0 40px rgba(224,103,90,.7);opacity:0;pointer-events:none;z-index:5}
.tstamp.on{animation:stamp 1.3s ease-out forwards}
@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(2.2)}18%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}
.watson .tcard{border-color:rgba(51,255,255,.6);background:linear-gradient(180deg,rgba(2,22,32,.97),rgba(2,12,20,.98));box-shadow:0 0 50px rgba(51,255,255,.25)}
.watson .tpor{height:min(62%,380px)}
.watson .tname{color:var(--cy);font-family:monospace}
.watson .ttext{color:#d8feff;min-height:4.4em}
.watson .tpor img{filter:drop-shadow(0 0 14px rgba(51,255,255,.5))}

/* ---------- keyword drawer ---------- */
.drawer{justify-content:flex-end;align-items:stretch;padding:0;background:rgba(3,6,11,.45)}
.drawer .card{width:min(400px,92vw);max-height:none;height:100%;border-radius:0;border-width:0 0 0 1px;padding-right:max(22px,env(safe-area-inset-right));animation:slidein .25s ease-out}
@keyframes slidein{from{transform:translateX(100%)}}
.cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.cat{background:#182136;border:1px solid #2a3855;border-radius:18px;padding:.1em .8em;font-size:.95rem;color:var(--muted);min-height:36px;display:inline-flex;align-items:center}
.cat.on{background:var(--gas);color:#241606;border-color:var(--gas);font-weight:700}
.cat.on .cico{filter:brightness(.25) sepia(1)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#1f2a42;border:1px solid #3b4b6c;border-radius:8px;padding:.3em .8em;font-size:1rem;cursor:grab;user-select:none;touch-action:manipulation;min-height:44px;display:inline-flex;align-items:center;flex-wrap:wrap;column-gap:.4em}
.chip small{color:var(--muted);margin-left:.4em;font-size:.75rem}
.chip:hover{border-color:var(--gas)}
.chip.person{border-left:4px solid #e08a8a}.chip.item{border-left:4px solid #8ad0e0}.chip.place{border-left:4px solid #8ae0a0}.chip.action{border-left:4px solid #e0c88a}.chip.time{border-left:4px solid #b79ae0}.chip.trait{border-left:4px solid #e0a0d0}
.empty{color:var(--muted);font-size:.95rem;padding:10px 0}
.chip .usedtag{font-style:normal;font-size:.68rem;line-height:1.4;color:#c9bfa4;border:1px solid #5a6578;border-radius:6px;padding:0 .4em}

/* ---------- deduction ---------- */
#ovDed{padding:0;background:#080c14}
.dwrap{width:100%;height:100%;display:flex;flex-direction:column;padding:0 var(--sr) 0 var(--sl)}
.dhead{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:6px 4px;border-bottom:1px solid var(--line);background:#0e1522}
.dhead h3{margin:0;flex:1;font-size:1.05rem;font-family:var(--serif);color:var(--gas2);letter-spacing:.08em;line-height:1.3}
.dmain{flex:1;min-height:0;display:grid;grid-template-columns:1fr minmax(240px,32%)}
.dq{overflow:auto;padding:12px 14px;background:radial-gradient(ellipse at 30% 0,#17213a,transparent 60%)}
/* scroll-padding-top：捲動時替上方 sticky 的分類列留位子，關鍵字才不會被那一列蓋住而點不到 */
.dtray{overflow:auto;padding:10px;border-left:1px solid var(--line);background:#0e1522;scroll-padding-top:64px}
.dintro{color:var(--muted);margin:0 0 10px;font-size:.95rem;line-height:1.6}
.grp{background:linear-gradient(180deg,#18223a,#121a2c);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:10px;font-size:1.1rem;line-height:2.7}
.grp.ok{border-color:#4a9a5a;box-shadow:0 0 18px rgba(80,200,110,.15)}
.grp .no{font-family:var(--serif);color:var(--gas);margin-right:.5em;font-weight:700}
.slot{display:inline-block;min-width:5.2em;min-height:44px;line-height:40px;text-align:center;padding:0 .7em;margin:0 .15em;border:2px dashed #5a6c92;border-radius:8px;background:#0c1220;color:var(--muted);font-size:.95rem;vertical-align:middle;transition:.15s}
.slot.act{border-color:var(--gas);background:#201a0e;box-shadow:0 0 14px rgba(243,185,95,.4);color:var(--gas2)}
.slot.fill{border-style:solid;border-color:#7083a8;color:var(--ink);background:#1e2a44;font-size:1.05rem}
.slot.over{border-color:var(--cy);box-shadow:0 0 14px #0ff6}
.slot.lockd{border-color:#4a9a5a;background:#142a1e;cursor:default}
.slot.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.gmsg{display:block;line-height:1.5;font-size:.95rem;min-height:1.4em;margin-top:2px}
.gmsg.good{color:var(--ok)}.gmsg.bad{color:#ff8f86}.gmsg.warn{color:var(--gas2)}
.tabsrow{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.dtray .trow{flex-wrap:nowrap;overflow-x:auto;position:sticky;top:-10px;z-index:1;background:#0e1522;margin:-10px -10px 8px;padding:8px 10px 6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.dtray .trow .cat{flex:0 0 auto;white-space:nowrap;min-height:44px;font-size:.88rem;padding:.1em .7em}
.dhead #dHint{border-color:#4f8f9a;color:#bff3f7}
.dwatson{display:flex;gap:10px;align-items:flex-start;background:linear-gradient(180deg,rgba(2,30,40,.9),rgba(2,18,26,.92));border:1px solid rgba(51,255,255,.5);border-radius:12px;padding:8px 12px;margin-bottom:10px;box-shadow:0 0 18px rgba(51,255,255,.12)}
.dwatson img{width:54px;height:54px;object-fit:cover;object-position:top;border-radius:50%;border:1px solid rgba(51,255,255,.5);flex:0 0 auto;background:#02161e}
.dwb{flex:1;min-width:0}.dwb b{color:var(--cy);font-family:monospace;letter-spacing:.15em;font-size:.85rem}
.dwb p{margin:.1em 0 .3em;color:#d8feff;line-height:1.6}.dwb .dwq{color:var(--gas2)}
.dwb .dwh{margin:.2em 0 .4em;padding-left:1.4em;color:#ffe9b8;line-height:1.6}
.dwb .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.dok{text-align:center;padding:12px;border:1px solid #4a9a5a;border-radius:12px;background:rgba(40,100,60,.2);color:var(--ok);font-family:var(--serif);font-size:1.15rem;letter-spacing:.2em}

/* ---------- document viewer：卡片式，依螢幕縮放，內容上下捲動 ---------- */
#ovDoc{background:rgba(10,7,4,.78)}
.dcard{position:relative;display:flex;flex-direction:column;width:min(820px,100%);max-height:100%;border-radius:12px;overflow:hidden;box-shadow:0 24px 70px #000c,0 0 0 1px #0006;background:#2a2218}
/* 文件內容多半要往下捲，加一道底部漸層提示還有更多內容（紙面本身不透明，蓋在上層） */
.dcard:after{content:'';position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(rgba(10,7,4,0),rgba(10,7,4,.5));pointer-events:none;z-index:1}
.dchead{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:5px 8px 5px 14px;background:linear-gradient(180deg,#3a2c1c,#2a2015);border-bottom:1px solid #120c06}
.dchead .dvtitle{flex:1;min-width:0;font-family:var(--serif);color:#f0dfb2;letter-spacing:.1em;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dscroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#dpaper{position:relative;width:100%;padding:clamp(18px,4.2vw,52px) clamp(16px,5vw,56px) clamp(22px,4.5vw,56px);color:#3a2a14;font-family:var(--serif);font-size:clamp(15px,calc(9px + .8vw),19px);line-height:1.9;user-select:text}
.paper{background:url(../assets/ui/tex_paper.webp) 0 0/512px 512px,#e6cf94}
.paper h2{font-size:1.45em;margin:0 0 .6em;text-align:center;letter-spacing:.15em;border-bottom:2px double #7a5a2a;padding-bottom:.3em}
.paper p{margin:.4em 0}
.paper .mast{display:block;width:100%;margin:-.6em 0 10px;mix-blend-mode:multiply}
.paper .hand{font-family:'Kaiti TC','DFKai-SB','BiauKai','STKaiti','Noto Serif TC',cursive;font-style:italic;color:#2a3a6a}
.paper .typed{font-family:'Courier New','Noto Serif TC',monospace;letter-spacing:.04em}
.paper .tampered{font-family:'Times New Roman','Noto Sans TC',sans-serif;letter-spacing:-.03em;line-height:1.12;font-size:.94em;color:#2a2a2a}
.paper .stamp{position:absolute;right:56px;bottom:48px;border:4px solid rgba(160,30,30,.7);color:rgba(160,30,30,.75);padding:.1em .6em;font-weight:900;font-size:1.6em;transform:rotate(-12deg);letter-spacing:.2em;border-radius:6px}
.paper table.ledger{width:100%;border-collapse:collapse}.paper table.ledger th,.paper table.ledger td{border:1px solid #8a6a38;padding:.2em .6em}
#dpaper.imgdoc{background:#1a140e;padding:10px}
.imgwrap{position:relative;cursor:zoom-in}.imgwrap img{display:block;width:100%;height:auto}
.zoomable{cursor:zoom-in}
.zhint{position:absolute;right:8px;bottom:8px;background:rgba(20,14,8,.78);color:#f3e2b8;font:500 12px/1.6 var(--sans);font-style:normal;padding:1px 9px;border-radius:12px;pointer-events:none;letter-spacing:.05em}
.dvtools{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));display:flex;gap:8px;z-index:3}
.dvtools .btn{min-width:48px;min-height:48px;padding:.2em .6em}
.ztitle{position:absolute;left:max(14px,env(safe-area-inset-left));top:12px;z-index:3;font-family:var(--serif);color:#f0dfb2;letter-spacing:.1em;text-shadow:0 2px 6px #000;max-width:calc(100% - 130px);font-size:1rem}
.dvx{position:absolute;right:max(10px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));z-index:3}
.dvhint{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:14px;color:#cdbb90;font-size:.85rem;z-index:3;opacity:.7}
#ovZoom{padding:0;background:#0f0b08}
.zv{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;background:radial-gradient(ellipse at center,#2a2218,#0f0b08)}
.zv.grab{cursor:grabbing}
#zc{position:absolute;left:0;top:0;transform-origin:0 0;width:1000px;font-size:20px;font-family:var(--serif);background:none;box-shadow:0 20px 60px #000c;user-select:none}
#zc .fig{margin:0;background:#e6cf94}
#zc .imgwrap{cursor:default}
#ovImg{padding:0;background:rgba(0,0,0,.92);flex-direction:column}
#imgView{max-width:100%;max-height:100%;object-fit:contain}

/* ---------- 證物牆（軟木板） ---------- */
#ovWall{padding:0;background:#0b0f17}
.wwrap{width:100%;height:100%;display:flex;flex-direction:column}
.whead{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:4px max(12px,env(safe-area-inset-right)) 4px max(12px,env(safe-area-inset-left));background:#151c2b;border-bottom:1px solid var(--line)}
.whead h3{margin:0;font-family:var(--serif);color:var(--gas2);letter-spacing:.12em;font-size:1.1rem;white-space:nowrap}
.whint{flex:1;min-width:0;font-size:.78rem;color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whint.link{color:#ff9d90;font-weight:600}
.wtools{display:flex;gap:6px;flex:0 0 auto}
.wtools .btn{min-height:38px;padding:.2em .75em;white-space:nowrap}
.wmain{flex:1;min-height:0;display:flex}
.wview{position:relative;flex:1;min-width:0;overflow:hidden;touch-action:none;background:#17110c;cursor:grab;user-select:none;-webkit-user-select:none;overscroll-behavior:contain}
.wview.linkmode{cursor:crosshair}
.wworld{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0;background:url(../assets/ui/bg_corkboard.webp) 0 0/100% 100%;box-shadow:0 8px 40px #000c}
#wLines,#wHits{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
#wLines{z-index:40}
.wl{fill:none;stroke:#c8372d;stroke-width:3.2;stroke-linecap:round;filter:drop-shadow(0 2px 1.5px rgba(0,0,0,.5));pointer-events:none}
.wl.sel{stroke:#ff5a48;stroke-width:5.5}
.wlh{fill:none;stroke:transparent;stroke-width:28;stroke-linecap:round;pointer-events:stroke;cursor:pointer}
#wCards{position:absolute;left:0;top:0}
.wcut{pointer-events:none;position:absolute;transform:translate(-50%,-50%) scale(var(--inv,1));min-height:34px;padding:0 14px;border-radius:17px;background:#b3261e;color:#fff;border:2px solid #fff;font-size:14px;font-weight:700;letter-spacing:.1em;box-shadow:0 3px 8px #0008;z-index:50}
.wcut.ready{pointer-events:auto}
.wc{position:absolute;width:104px;transform:rotate(var(--r,0deg));background:#f1e6c8 url(../assets/ui/tex_paper.webp) center/cover;color:#2b2013;border-radius:3px;box-shadow:1px 3px 7px rgba(0,0,0,.5);padding:13px 6px 6px;text-align:center;touch-action:none;cursor:grab;font-size:13px;line-height:1.25;user-select:none;-webkit-user-select:none}
.wc.drag{cursor:grabbing;box-shadow:3px 10px 18px rgba(0,0,0,.55);z-index:20}
.wc.sel{outline:2px solid #fff;outline-offset:3px}
.wc.flash{animation:wflash .9s 2}
@keyframes wflash{50%{box-shadow:0 0 0 6px rgba(255,255,255,.85),1px 3px 7px rgba(0,0,0,.5)}}
.wc .wb{pointer-events:none}
.wc img{display:block;margin:0 auto 4px;pointer-events:none;-webkit-user-drag:none}
.t-ev img{width:72px;height:72px;object-fit:contain}
.wc.t-ch{width:96px;background-color:#e9ddc0}
.t-ch img.por{width:78px;height:92px;object-fit:cover;object-position:50% 6%;border:3px solid #fffaf0;box-shadow:0 1px 3px #0006;background:#2a2218}
.wc.t-kw{width:96px;background-color:#f6efd2;padding:14px 4px 7px;transform:rotate(var(--r,0deg))}
.t-kw b{display:block;font:700 21px/1.15 var(--serif);color:#5a1d12;letter-spacing:.05em}
.t-kw small{display:block;font-size:11px;color:#6b5a3e;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600}
.wnote{margin-top:5px;padding:3px 2px 0;border-top:1px dashed rgba(90,60,30,.4);font-family:var(--serif);font-size:12px;line-height:1.3;color:#8a2a1c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:text}
.wnote.add{color:#a39478;font-style:italic}
.wnote.edit{padding:2px 0 0}
.wnin{width:100%;font:inherit;font-size:16px;line-height:1.2;padding:2px 4px;border:1px solid #b9a67a;border-radius:3px;background:#fffdf3;color:#8a2a1c;min-width:0;transform-origin:0 0}
.wpin{position:absolute;left:50%;top:-11px;width:22px;height:22px;margin-left:-11px;border-radius:50%;padding:0;border:0;background:radial-gradient(circle at 35% 30%,#ff9a8a,#c8372d 55%,#6e1510);box-shadow:0 3px 4px rgba(0,0,0,.5);cursor:pointer;z-index:2}
.wpin:before{content:'';position:absolute;inset:calc(-9px * var(--inv,1))}
/* 手機：圖釘與 × 的可點範圍加大（約 44px）。往外（上、左右）長，往卡片裡只長一點點，
   免得吸走卡片本身的點擊——時間卡只有 60px 高。 */
@media (pointer:coarse){
  .wpin:before{inset:calc(-16px * var(--inv,1)) calc(-12px * var(--inv,1)) calc(-6px * var(--inv,1))}
  .wx:before{inset:calc(-14px * var(--inv,1)) calc(-14px * var(--inv,1)) calc(-6px * var(--inv,1)) calc(-6px * var(--inv,1))}
}
.wc.linking .wpin{box-shadow:0 0 0 4px rgba(255,255,255,.9),0 0 16px 4px #ff6a5a}
.wview.linkmode .wc:not(.linking){outline:2px dashed rgba(255,255,255,.75);outline-offset:3px}
.wx{display:none;position:absolute;right:-10px;top:-10px;width:24px;height:24px;border-radius:50%;padding:0;background:#2b2013;color:#fff;border:2px solid #f1e6c8;font-size:16px;line-height:1;z-index:3}
.wx:before{content:'';position:absolute;inset:-10px}
.wc.sel .wx{display:block}
.wblank{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,80%);text-align:center;color:#fff3d6;background:rgba(30,18,8,.62);border-radius:12px;padding:14px 18px;line-height:1.8;pointer-events:none;text-shadow:0 1px 3px #000}
.wdrawer{flex:0 0 272px;display:flex;flex-direction:column;min-height:0;background:#151c2b;border-left:1px solid var(--line);padding-right:env(safe-area-inset-right)}
.wdrawer.off{display:none}
.wtabs{flex:0 0 auto;display:flex;gap:4px;padding:6px 6px 2px}
.wtabs button{flex:1;min-height:42px;border-radius:8px;background:#1f2a42;border:1px solid #3b4b6c;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 4px;white-space:nowrap}
.wtabs button i{font-style:normal;font-size:.72rem;color:var(--muted)}
.wtabs button.on{border-color:var(--gas);color:var(--gas2);background:#2a2216}
.wlist{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:6px 8px 10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;align-content:start;grid-auto-rows:max-content;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.wtile{position:relative;background:#1f2a42;border:1px solid #3b4b6c;border-radius:8px;padding:4px;text-align:center;font-size:.74rem;line-height:1.25;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;min-height:46px}
.wtile img{width:46px;height:46px;object-fit:contain;display:block;margin:0 auto 2px;pointer-events:none}
.wtile.t-ch img{object-fit:cover;object-position:50% 6%;border-radius:50%}
.wtile span{display:block;overflow:hidden}
.wtile.t-kw{padding:6px 4px}.wtile.t-kw b{display:block;font:700 1.05rem/1.2 var(--serif);color:var(--gas2)}.wtile.t-kw span{color:var(--muted);font-size:.66rem}
.wtile:hover{border-color:var(--gas)}
.wtile.on{opacity:.6;border-color:#5aaa6a;cursor:pointer}
.wtile em{position:absolute;right:2px;top:2px;font-style:normal;font-size:.62rem;line-height:1.4;background:#3d7a4a;color:#fff;border-radius:6px;padding:0 5px;z-index:1}
.wnone{grid-column:1/-1;color:var(--muted);font-size:.85rem;line-height:1.7;padding:10px 4px}
.wghost{position:fixed!important;z-index:500;pointer-events:none;width:84px;transform:translate(-50%,-60%) rotate(-3deg);opacity:.92;box-shadow:0 10px 24px #000b;border-color:var(--gas)!important}
.wghost.ok{border-color:#7fd48a!important}
.wdet{display:flex;gap:14px;align-items:center}.wdet img{width:96px;height:110px;object-fit:cover;object-position:50% 6%;border-radius:8px;border:2px solid #3b4b6c;background:#0b0f17}
@media (max-height:480px){
  .whead{padding-top:2px;padding-bottom:2px;gap:8px}.whead h3{font-size:1rem}.whint{font-size:.7rem}.wtools .btn{min-height:34px;padding:.1em .55em;font-size:.88rem}
  .wdrawer{flex-basis:196px}
  .wtabs{padding:4px 4px 0}.wtabs button{min-height:38px;font-size:.82rem;gap:3px}
  .wlist{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:6px;padding:5px 6px 8px}
  .wtile{font-size:.68rem;min-height:44px}.wtile img{width:38px;height:38px}
  .wdet img{width:72px;height:84px}
}

/* ---------- menu / map / codex / score ---------- */
#ovMenu .card{width:min(520px,100%)}
#ovMenu .list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
#ovMenu .list .btn{text-align:left}
#ovMenu .list .note{grid-column:1/-1;color:var(--muted);font-size:.9rem;line-height:1.6}
.chap{color:var(--gas);font-family:var(--serif);letter-spacing:.2em;margin:8px 0 6px;font-size:.95rem}
.mapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.mapcard{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0c1220;padding:0;text-align:left;min-height:88px}
.mapcard img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;filter:brightness(.8)}
.mapcard span{display:block;padding:4px 8px;font-size:.95rem}
.mapcard.cur{border-color:var(--gas);box-shadow:0 0 14px rgba(243,185,95,.4)}
.mapcard.new:not(.cur){border-color:var(--gas2)}
.mapcard.lock{opacity:.5;cursor:not-allowed}
.mapcard.lock .lk{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#0a0e16;color:var(--muted);letter-spacing:.2em}
.mapcard .tag{position:absolute;right:6px;top:6px;background:var(--gas);color:#241606;border-radius:10px;font-size:.72rem;padding:0 8px}
.codexlay{display:grid;grid-template-columns:220px 1fr;gap:14px;height:calc(100% - 46px)}
.codexlist{overflow:auto;display:flex;flex-direction:column;gap:6px}
.codexdet{overflow:auto;padding-right:6px}
.codexdet h4{font-family:var(--serif);color:var(--gas2);font-size:1.15rem;margin:.2em 0 .6em}
.cxbox{border-radius:10px;padding:10px 14px;margin-bottom:10px;line-height:1.8}
.cxbox.h{background:rgba(70,110,170,.18);border:1px solid #46689a}.cxbox.f{background:rgba(170,110,60,.18);border:1px solid #9a6a3a}
.cxbox b{display:block;font-size:.85rem;letter-spacing:.2em;margin-bottom:2px}
.cxbox.h b{color:#8fb4ee}.cxbox.f b{color:#ecb27a}
.scorewrap{display:flex;gap:18px;align-items:center;justify-content:center;width:100%;height:100%}
.scorecv{height:100%;max-height:calc(100vh - 20px);aspect-ratio:4/5;display:flex}
.scorecv canvas{height:100%;width:auto;max-width:100%;border-radius:8px;box-shadow:0 10px 40px #000}
.scorebtns{display:flex;flex-direction:column;gap:10px;min-width:140px}
.scorebtns h3{margin:0 0 4px;font-family:var(--serif);color:var(--gas2)}

/* ---------- toast & fx ---------- */
#toast{position:absolute;left:50%;top:calc(var(--st) + 40px);transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:4px;align-items:center;pointer-events:none;width:min(80vw,520px)}
.toast{background:rgba(20,28,46,.94);border:1px solid var(--gas);color:var(--gas2);padding:.15em .9em;border-radius:20px;font-size:.88rem;line-height:1.5;animation:tin .3s,tout .4s 2.4s forwards;box-shadow:0 6px 20px #000a;text-align:center}
@keyframes tin{from{opacity:0;transform:translateY(-10px)}}@keyframes tout{to{opacity:0;transform:translateY(-8px)}}
#fx{position:absolute;inset:0;z-index:400;pointer-events:none;display:none;overflow:hidden}
#fx.on{display:block}
#fx canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:.35;mix-blend-mode:screen}
#fxscan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,255,255,.07) 0 1px,transparent 1px 4px)}
.fxbar{position:absolute;left:0;right:0;background:rgba(51,255,255,.25);mix-blend-mode:screen;animation:fxb .25s steps(2) infinite}
@keyframes fxb{50%{transform:translateX(30px)}}
.fxcode{position:absolute;font-family:monospace;color:#3ff;text-shadow:0 0 8px #3ff;white-space:nowrap;animation:fxc .9s steps(3) forwards}
@keyframes fxc{0%{opacity:0}30%{opacity:1}100%{opacity:0;transform:translateX(24px)}}
body.glitching #app{animation:gshake .12s infinite;filter:contrast(1.25) saturate(1.5) hue-rotate(160deg) drop-shadow(4px 0 0 rgba(255,0,100,.5))}
@keyframes gshake{0%{transform:translate(0,0)}25%{transform:translate(-6px,2px)}50%{transform:translate(5px,-3px) skewX(2deg)}75%{transform:translate(-3px,4px)}100%{transform:translate(4px,0)}}

/* ---------- loading ---------- */
#ovLoad{position:absolute;inset:0;z-index:500;background:#05070b;display:none;align-items:center;justify-content:center}
#ovLoad.on{display:flex}
#ovLoad .lbox{width:min(320px,70vw);text-align:center}
.ltxt{font-family:var(--serif);letter-spacing:.3em;color:var(--gas2);margin-bottom:12px}
.lbar{height:6px;border-radius:3px;background:#1b2437;overflow:hidden}
.lbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#b8863a,#ffd98a);transition:width .15s}

/* ---------- rotate notice (portrait phones) ---------- */
#rotate{position:fixed;inset:0;z-index:9999;background:#05070b;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px}
@media (orientation:portrait) and (max-width:899px){#rotate{display:flex}}
.rotico{width:120px;height:120px}
.rotico .phone{transform-origin:60px 52px;animation:rot 2.8s ease-in-out infinite}
@keyframes rot{0%,15%{transform:rotate(0)}50%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
#rotate .rt{font-family:var(--serif);font-size:1.5rem;letter-spacing:.2em;color:var(--gas2)}
#rotate .rs{color:var(--muted);font-size:.95rem}

/* ---------- debug (?debug=1) ---------- */
body.debug .hs{background:rgba(0,200,255,.22);box-shadow:inset 0 0 0 1.5px rgba(0,220,255,.9)}
body.debug .hs.enl{background:rgba(255,140,0,.28);box-shadow:inset 0 0 0 1.5px rgba(255,150,0,.95)}
body.debug .hs i{position:absolute;left:2px;top:1px;font:600 11px/1.1 var(--sans);font-style:normal;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000;pointer-events:none;white-space:nowrap}
.hstight{position:absolute;border:1.5px dashed #ff4;pointer-events:none;z-index:3;display:none}
body.debug .hstight{display:block}

/* ---------- 第二階段：文件排版補充 ---------- */
.paper .narr{font-family:var(--sans);font-size:.8em;color:#6a5638;line-height:1.7;margin:.2em 0 1em;font-style:normal}
.paper .fine{font-size:.72em;color:#6a5a40;line-height:1.6}
.paper .rt{text-align:right}.paper .ct{text-align:center}
.paper .rule{border:0;border-top:1px solid #8a6a38;margin:1em 0}
.paper .slip{border:1px dashed #8a6a38;padding:.5em .9em;margin:1em 0;background:rgba(255,250,230,.25);position:relative}
.paper .slip h4{margin:0 0 .2em;font-size:1em;letter-spacing:.12em;text-align:center}
.paper .np h3{font-size:1.25em;margin:.2em 0 .1em;text-align:center;letter-spacing:.08em}
.paper .np .dl{text-align:center;font-size:.78em;color:#5a4a30;border-bottom:1px solid #7a5a2a;padding-bottom:.3em;margin-bottom:.6em}
.paper .np p{text-indent:2em;line-height:1.85}
.paper table.log{width:100%;border-collapse:collapse;font-size:.92em}.paper table.log td{vertical-align:top;padding:.15em .4em;border-bottom:1px dotted #a08a5c}.paper table.log td:first-child{white-space:nowrap;width:5.2em}
.paper .fig{position:relative;margin:1.2em 0 0;container-type:inline-size}
.paper .fig img{display:block;width:100%;height:auto}
.paper .fig .fn{position:absolute;font-family:'Kaiti TC','DFKai-SB','BiauKai','STKaiti','Noto Serif TC',cursive;font-style:italic;color:#2a3a6a;font-size:.9em;font-size:max(9px,2.6cqw);line-height:1.35}
.paper.modern{background:#eef2f5;color:#1d2a33;font-family:var(--sans);font-size:18px}
.paper.modern h2{border-bottom:2px solid #3a8aa0;letter-spacing:.05em;font-family:var(--sans)}
.paper.modern .fine{color:#6a7a86}
.paper.glitched .tampered{color:#1e4f5a;letter-spacing:-.06em;line-height:1;text-shadow:1px 0 rgba(0,200,220,.45),-1px 0 rgba(220,0,80,.25)}
/* 林子晴日誌：左緣終端機、右側泛黃舊紙（背景圖 assets/endings/lin_log.webp 拉滿整頁；用 #dpaper 提高優先權才蓋得過內距） */
#dpaper.linlog{background:url(../assets/endings/lin_log.webp) 0 0/100% 100% no-repeat,#e6cf94;color:#3a2a14;padding-left:clamp(76px,23%,210px)}
.paper.linlog h2{border-bottom-color:#8a6a38}
.paper.linlog .typed{color:#1b4a52;font-family:'Courier New','Noto Sans TC',monospace;font-size:.88em;letter-spacing:.02em}
.paper.linlog .hand{color:#2a3a6a}
.cxfoot{color:var(--muted);font-size:.9rem;margin:.4em 2px}

/* ---------- 自動收集關鍵字的小提示、證物取得動畫 ---------- */
.kw.ping{animation:kwping 1.1s ease-out}
@keyframes kwping{0%{background:rgba(255,217,138,.75);box-shadow:0 0 14px rgba(243,185,95,.9)}100%{background:transparent;box-shadow:none}}
#kwPing{position:absolute;left:var(--sl);top:calc(var(--st) + 60px);z-index:150;display:flex;flex-direction:column;gap:4px;align-items:flex-start;pointer-events:none}
.kping{background:rgba(20,28,46,.92);border:1px solid var(--gas);color:var(--gas2);border-radius:14px;padding:0 .7em;font-size:.82rem;line-height:1.7;box-shadow:0 4px 14px #0008;animation:kpin .25s ease-out,tout .5s 1.7s forwards}
.kping.person{border-color:#e08a8a}.kping.item{border-color:#8ad0e0}.kping.place{border-color:#8ae0a0}.kping.action{border-color:#e0c88a}.kping.time{border-color:#b79ae0}.kping.trait{border-color:#e0a0d0}
@keyframes kpin{from{opacity:0;transform:translateX(-10px)}}
#evfx{position:absolute;inset:0;z-index:260;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;background:rgba(3,6,11,0);transition:background .2s}
#evfx.on{display:flex;background:rgba(3,6,11,.35)}
#evfx.on.out{background:rgba(3,6,11,0)}
.evrow{display:flex;gap:16px;transform:scale(.35);opacity:0;transition:transform .28s cubic-bezier(.2,1.4,.5,1),opacity .2s}
.evrow.in{transform:scale(1);opacity:1}
.evrow.fly{transition:transform .32s cubic-bezier(.6,0,.8,.6),opacity .32s ease-in;opacity:.15}
.evfc{width:150px;padding:12px 10px 10px;background:linear-gradient(180deg,#f3e6c4,#e2cf9e);border:2px solid #f3b95f;border-radius:12px;box-shadow:0 0 34px rgba(243,185,95,.65),0 10px 30px #000a;text-align:center;color:#3a2a14}
.evfc img{width:104px;height:104px;object-fit:contain;display:block;margin:0 auto 6px}
.evfc.testi img{object-fit:cover;object-position:50% 8%;border-radius:50%;border:3px solid #8a6a38;background:#2a2218}
.evfc b{display:block;font-family:var(--serif);font-size:.95rem;line-height:1.35}
.evcap{font-family:var(--serif);letter-spacing:.3em;color:var(--gas2);text-shadow:0 2px 8px #000;font-size:.9rem;transition:opacity .2s}
#evfx.out .evcap{opacity:0}
#evfx.rm .evrow{transform:none;opacity:1;transition:none}
#evfx.rm{animation:fadein .15s}
@media (max-height:480px){.evfc{width:118px;padding:8px 6px}.evfc img{width:74px;height:74px}}
@media (prefers-reduced-motion:reduce){.kw.ping{animation:none;outline:2px solid var(--gas)}.kping{animation:none}}