/* 《王燦檔案 PROJECT WANG》新增元件樣式（疊在 style.css 之上） */

/* ---------- 封面（案件檔案風） ---------- */
.pw-case {
  font-size: 12px; letter-spacing: 2px; color: #8a5a5e;
  border: 1px solid #6e3a40; border-radius: 4px; padding: 5px 12px;
  margin-bottom: 26px; font-weight: 700;
}
.pw-h1 { font-size: 44px; font-weight: 900; color: #f2f2f2; letter-spacing: 10px; margin: 0 0 6px; text-indent: 10px; }
.pw-en { font-size: 13px; letter-spacing: 6px; color: #6a6f78; margin-bottom: 34px; text-indent: 6px; }
.pw-file {
  font-size: 15px; font-weight: 700; color: #e8b64c;
  border-top: 1px solid #33353c; border-bottom: 1px solid #33353c;
  padding: 10px 34px; margin-bottom: 30px; letter-spacing: 3px;
}
.pw-quote { font-size: 14px; color: #9aa0aa; margin-bottom: 40px; letter-spacing: 1px; }

/* ---------- 分鏡播放器（全螢幕電影式） ---------- */
#s-scene { background: #050506; cursor: pointer; overflow: hidden; }
#sc-bg {
  position: absolute; inset: 0; z-index: 0;
  background: center/cover no-repeat;
}
#sc-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(5,5,6,.55) 0%, rgba(5,5,6,0) 30%, rgba(5,5,6,0) 45%, rgba(5,5,6,.88) 78%, rgba(5,5,6,.97) 100%);
}
#s-scene.has-media .sc-shade { opacity: 1; }
.sc-box {
  position: relative; z-index: 2;
  max-width: 340px; width: 100%; padding: 0 26px;
  display: flex; flex-direction: column; align-items: flex-start;
}
#s-scene.has-media { flex-direction: column; justify-content: flex-end; align-items: center; }
#s-scene.has-media .sc-box { padding-bottom: 30px; }
.sc-box.sc-in { animation: scFade .6s ease both; }
@keyframes scFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sc-tag { font-size: 11px; letter-spacing: 3px; color: #b08d3c; font-weight: 800; margin-bottom: 14px; min-height: 14px; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.sc-text { font-size: 16px; line-height: 1.95; color: #ececec; white-space: pre-wrap; text-shadow: 0 1px 10px rgba(0,0,0,.85); }
.sc-cap { font-size: 12px; color: #8b8f99; margin-top: 14px; min-height: 14px; letter-spacing: 2px; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.sc-hint { align-self: center; margin-top: 26px; font-size: 12px; color: #7c8089; animation: scPulse 1.8s ease infinite; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
@keyframes scPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
#sc-replay {
  position: absolute; top: 52px; right: 16px; z-index: 3;
  font-size: 12.5px; color: #d8d9de; letter-spacing: 1px;
  background: rgba(30,31,38,.72); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  padding: 7px 14px; display: none;
  animation: qFade .5s ease both;
}
#sc-replay.show { display: block; }
#sc-replay:active { background: rgba(58,60,70,.85); }

/* ---------- 前導影片（一鏡到底） ---------- */
#s-opening { background: #000; }
#ov-box { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#ov-box video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
#ov-skip {
  position: absolute; top: 52px; right: 16px; z-index: 3;
  font-size: 12.5px; color: #d8d9de; letter-spacing: 1px;
  background: rgba(30, 31, 38, .72); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  padding: 7px 14px; display: none;
  animation: qFade .5s ease both;
}
#ov-skip.show { display: block; }
#ov-skip:active { background: rgba(58, 60, 70, .85); }

/* ---------- 鎖定畫面 ---------- */
#s-lock { background: linear-gradient(180deg, #14161f 0%, #0a0a10 60%, #06060a 100%); justify-content: flex-start; padding-top: 54px; }
#s-lock.lk-open { animation: lkOpen .65s ease forwards; }
@keyframes lkOpen { to { opacity: 0; transform: scale(1.06); } }
.lk-screen { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; padding: 0 24px; }
.lk-time { font-size: 62px; font-weight: 200; color: #eef0f4; letter-spacing: 1px; line-height: 1; }
.lk-date { font-size: 15px; color: #b8bcc6; margin: 6px 0 22px; }
.lk-notif {
  width: 100%; background: rgba(58,60,70,.62); backdrop-filter: blur(8px);
  border-radius: 14px; padding: 11px 14px; margin-bottom: 26px;
  animation: lkNotifIn .5s ease .3s both;
}
@keyframes lkNotifIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.lkn-head { display: flex; justify-content: space-between; font-size: 11.5px; color: #c9ccd4; margin-bottom: 4px; }
.lkn-from { font-size: 14px; font-weight: 700; color: #fff; }
.lkn-text { font-size: 14px; color: #e8e9ee; }
.lk-intro { font-size: 13px; line-height: 1.9; color: #8b909b; white-space: pre-wrap; text-align: center; margin-bottom: 20px; }
.lk-dots { display: flex; gap: 16px; margin-bottom: 14px; }
.lk-dots i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #9aa0ac; display: block; transition: all .15s; }
.lk-dots i.fill { background: #eef0f4; border-color: #eef0f4; }
.lk-dots i.bad { background: #b8434b; border-color: #b8434b; }
.lk-dots i.ok { background: #4fae6d; border-color: #4fae6d; }
.lk-dots.shake { animation: lkShake .4s; }
@keyframes lkShake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.lk-fail { min-height: 40px; font-size: 13px; color: #c9848a; line-height: 1.6; text-align: center; padding: 0 10px; margin-bottom: 8px; }
.lk-tries { width: 100%; display: flex; flex-direction: column; gap: 9px; }
.lk-try {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: #17181e; border: 1px solid #2b2d35; border-radius: 12px;
  padding: 12px 16px; transition: all .15s;
}
.lk-try:active { background: #22242c; }
.lk-try.used { opacity: .32; text-decoration: line-through; }
.lkt-num { font-size: 17px; font-weight: 700; color: #eef0f4; letter-spacing: 3px; }
.lkt-sub { font-size: 12.5px; color: #8b909b; }

/* ---------- 金句黑卡模式 ---------- */
#narrative.quote-mode { background: #030304; }
#narrative.quote-mode .n-box { max-width: 320px; }
#narrative.quote-mode .n-text {
  font-size: 19px; line-height: 2.2; color: #e8e9ee; text-align: center;
  font-weight: 500; letter-spacing: 1px;
  animation: qFade 1.1s ease both;
}
@keyframes qFade { from { opacity: 0; } to { opacity: 1; } }
#narrative.quote-mode .btn-primary { opacity: .82; }

/* ---------- 推播通知條（現實入侵） ---------- */
#notif {
  position: absolute; top: 34px; left: 8px; right: 8px; z-index: 60;
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(44,46,54,.92); backdrop-filter: blur(10px);
  border-radius: 15px; padding: 11px 13px;
  /* -130% 藏不乾淨（top:34px 會露出一截），改成連 top 一起扣掉 */
  transform: translateY(calc(-100% - 44px)); transition: transform .45s cubic-bezier(.2,.9,.3,1);
  cursor: pointer; box-shadow: 0 8px 28px rgba(0,0,0,.45);
  pointer-events: none;
}
#notif.show { transform: translateY(0); pointer-events: auto; }
.nf-icon {
  width: 34px; height: 34px; border-radius: 8px; background: #06C755;
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none;
}
.nf-body { flex: 1; min-width: 0; }
.nf-head { display: flex; justify-content: space-between; font-size: 11px; color: #b4b8c2; margin-bottom: 2px; }
.nf-from { font-size: 13.5px; font-weight: 700; color: #fff; }
.nf-text { font-size: 13px; color: #e2e3e8; line-height: 1.45; }

/* ---------- 聊天連結卡（link preview） ---------- */
.chat-link {
  font-size: 14px; color: #2f6fdd; text-decoration: underline;
  word-break: break-all; margin-bottom: 6px;
}
.chat-img.img-link { height: 130px; background-color: #fff; }
.chat-img.img-tall { width: 170px; height: 250px; }

/* ---------- 系統訊息（群組深字白底，看得清、可點） ---------- */
.sys-line { display: flex; justify-content: center; margin: 10px 0; }
.sys-bubble {
  font-size: 11.5px; font-weight: 600; color: #1f2937; background: rgba(255,255,255,.72);
  border-radius: 999px; padding: 4px 12px; cursor: pointer;
  border: 1px dashed rgba(31,41,55,.45);
}
.sys-bubble:active { background: rgba(255,255,255,.92); }

/* ---------- 照片檢視：圖片縮進剩餘空間，標記按鈕永遠在畫面內 ---------- */
#pv-stage { min-height: 0; }
#pv-img.pv-real { flex: 1; min-height: 0; max-height: none; display: flex; align-items: center; justify-content: center; }
#pv-img.pv-real img { max-height: 100%; }
#pv-img.pv-real.zoomed { display: block; max-height: none; }
#pv-img.pv-real.zoomed img { max-height: none; }

/* ---------- 案件檔案卡（dossier） ---------- */
.d-sheet {
  width: 100%; max-width: 380px; background: #101014;
  border: 1px solid #2e3038; border-radius: 18px 18px 0 0;
  padding: 22px 22px calc(20px + env(safe-area-inset-bottom));
  animation: sheetUp .35s ease;
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.d-head { position: relative; border-bottom: 1px dashed #33353c; padding-bottom: 14px; margin-bottom: 14px; }
.d-stamp {
  position: absolute; right: 0; top: 0;
  font-size: 12px; font-weight: 800; letter-spacing: 3px; color: #a04a52;
  border: 2px solid #a04a52; border-radius: 4px; padding: 3px 8px;
  transform: rotate(8deg); opacity: .85;
}
.d-caseno { font-size: 11px; letter-spacing: 2px; color: #6a6f78; margin-bottom: 6px; }
.d-title { font-size: 17px; font-weight: 800; color: #e8e9ee; }
.d-fields { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.d-row {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 13.5px; line-height: 1.5;
  animation: dRow .45s ease both;
}
@keyframes dRow { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.d-k { color: #7c818c; flex: none; }
.d-v { color: #e2d9c2; font-weight: 700; text-align: right; }

/* ---------- 證物特寫 ---------- */
#s-evidence { background: #060607; cursor: pointer; padding-left: 10px; padding-right: 10px; }
.ev-box { max-width: 430px; width: 100%; padding: 0; display: flex; flex-direction: column; align-items: center; }
.ev-title { font-size: 12px; letter-spacing: 3px; color: #b08d3c; font-weight: 800; margin-bottom: 14px; }
.ev-photo { max-width: 100%; max-height: 62vh; border-radius: 8px; border: 1px solid #2b2d35; margin-bottom: 16px; animation: qFade .7s ease both; }
.ev-notes { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.ev-note {
  font-size: 13px; line-height: 1.6; color: #e8d9c0;
  border-left: 2px solid #a04a52; background: rgba(160,74,82,.10);
  padding: 7px 12px; animation: dRow .5s ease both;
}
#s-evidence .sc-hint { margin-top: 22px; }

/* ---------- 頭像牆 ---------- */
#s-wall { background: #08080a; cursor: pointer; }
.wl-box { max-width: 350px; width: 100%; padding: 0 20px; display: flex; flex-direction: column; align-items: center; }
.wl-title { font-size: 13px; font-weight: 800; color: #c9cbd2; letter-spacing: 1px; margin-bottom: 16px; }
.wl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px 8px; width: 100%; }
.wl-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all .5s ease; }
.wl-av {
  width: 44px; height: 44px; border-radius: 50%;
  background: #2b3040; border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #cdd2de; transition: all .5s ease;
}
.wl-name { font-size: 10.5px; color: #9aa0aa; transition: all .5s ease; }
.wl-cell.dim { opacity: .22; filter: grayscale(1); }
.wl-cell.typo .wl-av { border-color: #c05a63; background: #3a2226; }
.wl-cell.typo .wl-name { color: #c9848a; }
.wl-cell.boss .wl-av { background: #050506; border-color: #6e5a2a; color: #b08d3c; }
.wl-cell.real .wl-av { border-color: #d9b45c; background: #35301f; color: #f0e0b0; transform: scale(1.12); }
.wl-cell.real .wl-name { color: #e8d9a8; font-weight: 700; }
.wl-tag {
  position: absolute; top: -7px; right: 2px;
  font-size: 9px; font-weight: 800; color: #0a0a0c;
  background: #e8b64c; border-radius: 999px; padding: 1px 6px;
  opacity: 0; transition: opacity .5s ease;
}
.wl-cell.real .wl-tag { opacity: 1; }
.wl-step { min-height: 40px; font-size: 14px; font-weight: 700; color: #e8b64c; text-align: center; margin-top: 18px; line-height: 1.6; }
#s-wall .sc-hint { margin-top: 8px; }

/* ---------- 偵查白板 ---------- */
#s-board { background: #100e0b; cursor: pointer; padding: 40px 0 30px; justify-content: flex-start; }
.bd-title { font-size: 13px; letter-spacing: 3px; color: #b08d3c; font-weight: 800; margin-bottom: 14px; }
.bd-stage {
  position: relative; width: 100%; max-width: 350px; flex: 1; min-height: 0;
  background: linear-gradient(160deg, #241d14, #1a150e);
  border-top: 1px solid #3a3226; border-bottom: 1px solid #3a3226;
  margin: 0 0 14px; overflow: hidden;
}
#bd-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.bd-line {
  stroke: #a04a52; stroke-width: .55; stroke-dasharray: 2 1.2;
  opacity: 0; animation: bdLine .5s ease both;
}
@keyframes bdLine { to { opacity: .85; } }
.bd-node {
  position: absolute; transform: translate(-50%, 0);
  background: #efe8d8; border-radius: 3px; padding: 7px 10px 6px;
  min-width: 84px; text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  animation: bdNode .45s ease both;
}
@keyframes bdNode { from { opacity: 0; transform: translate(-50%, 8px) rotate(-1deg); } to { opacity: 1; transform: translate(-50%, 0); } }
.bd-pin { position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: #a04a52; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.bd-label { font-size: 12px; font-weight: 800; color: #2c2620; }
.bd-sub { font-size: 10px; color: #6e6152; margin-top: 1px; }
.bd-node.boss { background: #221f1c; border: 1px solid #6e5a2a; }
.bd-node.boss .bd-label { color: #e8b64c; }
.bd-node.boss .bd-sub { color: #9a8a5c; }
.bd-node.danger { background: #efe8d8; outline: 2px solid #a04a52; }
.bd-node.danger .bd-label { color: #8c2f37; }
#s-board .sc-hint { margin: 0; }

/* ---------- 幕間卡 ---------- */
#s-actbreak { background: #050506; }
.ab-box { max-width: 330px; width: 100%; padding: 0 26px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ab-title { font-size: 21px; font-weight: 900; color: #e8b64c; letter-spacing: 2px; animation: qFade .8s ease both; }
.ab-done { font-size: 12px; letter-spacing: 4px; color: #5c6069; margin: 12px 0 34px; }
.ab-next { font-size: 15px; font-weight: 800; color: #c9cbd2; margin-bottom: 10px; }
.ab-teaser { font-size: 13.5px; color: #9aa0aa; margin-bottom: 36px; line-height: 1.7; }

/* ---------- 幕末卡 ---------- */
#s-actend { overflow-y: auto; justify-content: flex-start; padding: 46px 0 40px; }
.ae-box { max-width: 350px; width: 100%; padding: 0 26px; display: flex; flex-direction: column; align-items: center; }
.ae-act { font-size: 20px; font-weight: 900; color: #e8b64c; letter-spacing: 2px; }
.ae-done { font-size: 12px; letter-spacing: 4px; color: #5c6069; margin: 10px 0 24px; }
.ae-story {
  font-size: 15px; line-height: 2.05; color: #c9cbd2; white-space: pre-wrap;
  border-left: 2px solid #33353c; padding-left: 16px; margin-bottom: 26px;
}
.ae-stats { display: flex; gap: 12px; width: 100%; margin-bottom: 26px; }
.ae-stat { flex: 1; background: #131318; border: 1px solid #26272e; border-radius: 12px; padding: 12px 0; text-align: center; }
.ae-stat .v { font-size: 24px; font-weight: 900; color: #fff; }
.ae-stat .k { font-size: 11.5px; color: #7c818c; margin-top: 3px; }
.ae-next { font-size: 14px; font-weight: 800; color: #9aa0aa; margin-bottom: 8px; }
.ae-teaser { font-size: 14px; color: #e8b64c; margin-bottom: 30px; }
#s-actend .e-actions { width: 100%; }
#s-actend .e-165 { margin-top: 26px; }

/* ---------- 金流時間軸 ---------- */
#s-timeline { background: #060607; cursor: pointer; }
.tl-box { max-width: 340px; width: 100%; padding: 0 26px; display: flex; flex-direction: column; }
.tl-title { font-size: 12px; letter-spacing: 3px; color: #b08d3c; font-weight: 800; margin-bottom: 18px; text-align: center; }
.tl-rows { display: flex; flex-direction: column; position: relative; }
.tl-rows::before { content: ''; position: absolute; left: 46px; top: 6px; bottom: 6px; width: 1px; background: #2b2d35; }
.tl-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; animation: dRow .5s ease both; position: relative; }
.tl-d { flex: none; width: 34px; font-size: 11.5px; color: #7c818c; font-weight: 700; padding-top: 2px; text-align: right; }
.tl-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #5c6069; margin-top: 4px; border: 2px solid #060607; z-index: 1; }
.tl-row.neg .tl-dot { background: #a04a52; }
.tl-row.pend .tl-dot { background: #4a6fa5; }
.tl-row.danger .tl-dot { background: #e05a5a; box-shadow: 0 0 8px rgba(224,90,90,.6); }
.tl-body { display: flex; flex-direction: column; min-width: 0; }
.tl-t { font-size: 13.5px; font-weight: 700; color: #d5d5d5; }
.tl-row.neg .tl-t { color: #d98a90; }
.tl-row.danger .tl-t { color: #f0a0a0; }
.tl-s { font-size: 11.5px; color: #7c818c; margin-top: 1px; }
.tl-mark { flex: none; margin-left: auto; font-size: 10px; font-weight: 800; color: #e8b64c; border: 1px solid #6e5a2a; border-radius: 4px; padding: 2px 6px; align-self: center; }
.tl-total { font-size: 13px; font-weight: 800; color: #e8b64c; text-align: center; margin-top: 16px; animation: dRow .6s ease both; }
#s-timeline .sc-hint { align-self: center; margin-top: 22px; }

/* ---------- 主嫌檔案・碎片 ---------- */
#s-frag { background: #08080a; cursor: pointer; }
.fr-box { max-width: 340px; width: 100%; padding: 0 24px; display: flex; flex-direction: column; align-items: center; }
.fr-head { width: 100%; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.fr-title { font-size: 12px; letter-spacing: 3px; color: #b08d3c; font-weight: 800; }
.fr-progress { font-size: 13px; font-weight: 800; color: #e8b64c; }
.fr-face {
  width: 84px; height: 84px; border-radius: 50%;
  background: #14151a; border: 2px dashed #3a3c45;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 900; color: #4a4d58; margin-bottom: 18px;
}
.fr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; }
.fr-cell {
  border: 1px solid #24262e; border-radius: 8px; padding: 8px 10px;
  background: #0e0f13; min-height: 52px;
}
.fr-cell .fr-num { font-size: 9.5px; letter-spacing: 2px; color: #4a4d58; font-weight: 800; }
.fr-cell .fr-name { font-size: 13.5px; font-weight: 700; color: #5c5f6a; margin-top: 2px; }
.fr-cell .fr-sub { font-size: 10.5px; color: #7c818c; margin-top: 1px; }
.fr-cell.got { border-color: #6e5a2a; background: #16130a; animation: frGot .6s ease both; }
.fr-cell.got .fr-num { color: #b08d3c; }
.fr-cell.got .fr-name { color: #f0e0b0; }
@keyframes frGot { from { opacity: 0; transform: scale(.9); box-shadow: 0 0 0 rgba(232,182,76,0); } 60% { box-shadow: 0 0 22px rgba(232,182,76,.35); } to { opacity: 1; transform: none; box-shadow: 0 0 0 rgba(232,182,76,0); } }
.fr-note { font-size: 12.5px; color: #9aa0aa; margin-top: 18px; text-align: center; }
#s-frag .sc-hint { margin-top: 14px; }

/* ---------- 頭像牆 87 人密排（鬼月版） ---------- */
.wl-grid.dense { grid-template-columns: repeat(8, 1fr); gap: 6px 3px; }
.wl-grid.dense .wl-av { width: 27px; height: 27px; font-size: 11px; border-width: 1.5px; }
.wl-grid.dense .wl-name { font-size: 7.5px; letter-spacing: 0; white-space: nowrap; max-width: 40px; overflow: hidden; text-overflow: ellipsis; }
.wl-grid.dense .wl-tag { font-size: 7px; padding: 0 4px; top: -5px; right: -2px; }
.wl-grid.dense + .wl-step { margin-top: 12px; }

/* ---------- 群組互動（groupreply）回覆選單 ---------- */
.gr-lead {
  font-size: 14px; line-height: 1.9; color: #c9cbd2; white-space: pre-wrap;
  padding: 4px 4px 14px; text-align: left;
}

/* ---------- 密室探索（explore）：葡隆宮辦公室 ---------- */
#s-explore {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(122, 74, 46, .16) 0%, rgba(10, 9, 8, 0) 55%),
    linear-gradient(180deg, #12100c 0%, #0a0908 70%, #060505 100%);
  justify-content: flex-start;
  overflow-y: auto;
  /* 蓋掉 .full-screen 的 32px 邊距，讓場景圖吃滿容器寬 */
  padding: 40px 10px 24px;
}
.xp-box { width: 100%; max-width: 500px; padding: 0; display: flex; flex-direction: column; align-items: center; }
.xp-title { font-size: 12px; letter-spacing: 4px; color: #b08d3c; font-weight: 800; margin-bottom: 10px; }
.xp-lead {
  font-size: 14px; line-height: 1.95; color: #c9c3b4; white-space: pre-wrap; text-align: center;
  min-height: 20px; margin-bottom: 22px; animation: qFade .9s ease both;
}
.xp-spots { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.xp-spot {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: #161310; border: 1px solid #33291d; border-radius: 12px;
  padding: 14px 16px; transition: all .15s; text-align: left;
  animation: dRow .5s ease both;
}
.xp-spot:nth-child(2) { animation-delay: .1s; }
.xp-spot:nth-child(3) { animation-delay: .2s; }
.xp-spot:nth-child(4) { animation-delay: .3s; }
.xp-spot:active { background: #221c15; }
.xp-spot.seen { border-color: #6e5a2a; background: #14110a; }
.xs-ic { font-size: 22px; flex: none; }
.xs-lb { font-size: 15px; font-weight: 700; color: #e2dbc9; flex: 1; }
.xp-spot.seen .xs-lb { color: #b0a583; }
.xs-mark { font-size: 12px; font-weight: 800; color: #b08d3c; flex: none; }
.xp-hint { min-height: 20px; font-size: 12.5px; color: #7c7461; margin-top: 22px; animation: scPulse 1.8s ease infinite; }
#xp-leave { margin-top: 18px; }

/* 實景模式：場景圖＋場內熱點 */
.xp-scene {
  position: relative; width: 100%; aspect-ratio: 1792 / 1872; /* room-crop.jpg */
  border-radius: 14px; overflow: hidden;
  background: #0a0908 center/cover no-repeat;
  border: 1px solid #33291d;
  box-shadow: 0 10px 40px rgba(0,0,0,.55);
  animation: qFade .8s ease both;
}
.xp-hot {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; padding: 6px;
}
.xh-dot {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(232, 182, 76, .28);
  border: 2px solid rgba(232, 182, 76, .95);
  box-shadow: 0 0 0 0 rgba(232, 182, 76, .5);
  animation: xhPulse 1.8s ease infinite;
}
@keyframes xhPulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 182, 76, .5); }
  70% { box-shadow: 0 0 0 12px rgba(232, 182, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 182, 76, 0); }
}
.xh-lb {
  font-size: 14px; font-weight: 800; color: #f0e0b0; white-space: nowrap;
  background: rgba(10, 9, 8, .78); border: 1px solid rgba(232, 182, 76, .4);
  border-radius: 999px; padding: 5px 12px;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.xp-hot.seen .xh-dot {
  animation: none; background: rgba(232, 182, 76, .85);
  border-color: #e8b64c;
}
.xp-hot.seen .xh-dot::after { content: ''; }
.xp-hot.seen .xh-lb { color: #b0a583; border-color: #4a3f2a; }
.xp-hot.seen .xh-lb::before { content: '✓ '; color: #e8b64c; }

/* ---------- 功德簿翻書 ---------- */
#s-book { background: #060505; cursor: pointer; }
#s-book { padding-left: 10px; padding-right: 10px; }
.bk-box { width: 100%; max-width: 430px; padding: 0; display: flex; flex-direction: column; align-items: center; }
.bk-head { font-size: 12px; letter-spacing: 4px; color: #b08d3c; font-weight: 800; margin-bottom: 14px; }
.bk-spread {
  width: 100%; display: flex;
  background: linear-gradient(180deg, #efe6d0, #e8dcc2);
  border: 7px solid #7a2828; border-radius: 6px 12px 12px 6px;
  box-shadow: 0 14px 50px rgba(0,0,0,.6), inset 0 0 40px rgba(120, 90, 40, .18);
  animation: bkOpen .6s ease both;
  min-height: 460px;
}
@keyframes bkOpen { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.bk-spread.bk-turn { animation: bkTurn .45s ease both; }
@keyframes bkTurn {
  0% { opacity: .25; transform: perspective(900px) rotateY(-14deg) scale(.985); }
  100% { opacity: 1; transform: none; }
}
.bk-page {
  flex: 1; min-width: 0; padding: 18px 13px 16px;
  display: flex; flex-direction: column;
  position: relative;
}
.bk-page + .bk-page {
  border-left: 1px solid rgba(90, 70, 40, .35);
  background: linear-gradient(90deg, rgba(70, 50, 25, .14), rgba(70, 50, 25, 0) 14%);
}
.bk-page:first-child { background: linear-gradient(270deg, rgba(70, 50, 25, .14), rgba(70, 50, 25, 0) 14%); }
.bk-ph {
  font-size: 15px; font-weight: 800; color: #6a3020; letter-spacing: 2px;
  border-bottom: 1.5px solid rgba(106, 48, 32, .4);
  padding-bottom: 6px; margin-bottom: 10px; text-align: center;
  font-family: "Kaiti TC", "DFKai-SB", "BiauKai", serif;
}
.bk-line {
  font-size: 14px; line-height: 1.6; color: #4a3a28;
  font-family: "Kaiti TC", "DFKai-SB", "BiauKai", serif;
  padding: 3.5px 0; border-bottom: 1px dotted rgba(90, 70, 40, .22);
  animation: dRow .4s ease both; white-space: pre-wrap;
}
.bk-line.hot { color: #8c2f37; font-weight: 800; }
.bk-foot {
  margin-top: auto; padding-top: 10px;
  font-size: 10.5px; color: #7a6a50; text-align: right;
  font-family: "Kaiti TC", "DFKai-SB", "BiauKai", serif;
}

/* ---------- 信眾資料卡・卡夾 ---------- */
#s-cardbox { background: #080706; }
.cx-wrap { width: 100%; max-width: 340px; padding: 0 24px; display: flex; flex-direction: column; align-items: center; }
.cx-title { font-size: 12px; letter-spacing: 3px; color: #b08d3c; font-weight: 800; margin-bottom: 18px; }
.cx-stage { width: 100%; min-height: 460px; display: flex; align-items: center; justify-content: center; }
.cx-hint { min-height: 20px; font-size: 12.5px; color: #7c7461; margin-top: 18px; animation: scPulse 1.8s ease infinite; }
.cx-box { width: 100%; animation: qFade .7s ease both; }
.cx-slots { display: flex; align-items: flex-end; gap: 4px; padding: 0 20px; }
.cx-tab {
  flex: 1; min-width: 0; border: none; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #cfc3a6, #bdb094);
  height: 40px; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.cxt-name {
  writing-mode: vertical-rl; font-size: 10px; color: #6a6152; letter-spacing: 1px;
  font-family: "Kaiti TC", "DFKai-SB", serif;
}
.cx-tab.target {
  background: linear-gradient(180deg, #f2e8ce, #e2d6b6);
  height: 66px; box-shadow: 0 0 16px rgba(232, 182, 76, .35), inset 0 1px 0 rgba(255,255,255,.5);
  animation: cxRise 1.5s ease infinite alternate;
}
.cx-tab.target .cxt-name { color: #8c2f37; font-weight: 800; font-size: 11.5px; }
@keyframes cxRise { from { transform: translateY(0); } to { transform: translateY(-7px); } }
.cx-tab.nope { animation: lkShake .35s; }
.cx-lid {
  height: 110px; margin-top: -6px; position: relative; z-index: 1;
  background: linear-gradient(180deg, #4a463e, #2c2a24 55%, #22201c);
  border-radius: 10px; border: 1px solid #555044;
  box-shadow: 0 12px 34px rgba(0,0,0,.55), inset 0 2px 6px rgba(255,255,255,.06);
}
.cxc { width: 320px; height: 426px; perspective: 1100px; animation: cxPull .5s ease both; }
@keyframes cxPull { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
.cxc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.3, .8, .3, 1); }
.cxc-inner.flip { transform: rotateY(180deg); }
.cxc-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(180deg, #f5edd8, #ecdfc2);
  border-radius: 6px; box-shadow: 0 12px 44px rgba(0,0,0,.55);
  padding: 16px 15px;
}
.cxc-face.back { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cxc-name {
  font-size: 20px; font-weight: 900; color: #3a3026; letter-spacing: 5px; text-align: center;
  border-bottom: 2px solid #8c2f37; padding-bottom: 8px; margin-bottom: 10px;
  font-family: "Kaiti TC", "DFKai-SB", serif;
}
.cxr { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px dotted rgba(90, 70, 40, .25); font-family: "Kaiti TC", "DFKai-SB", serif; }
.cxr-k { flex: none; width: 58px; font-size: 13px; color: #8a7a5e; font-weight: 700; padding-top: 1px; }
.cxr-v { font-size: 13.5px; color: #4a3a28; line-height: 1.6; min-width: 0; }
.cxc-stamp {
  position: absolute; right: 13px; bottom: 13px;
  font-size: 15px; font-weight: 900; color: rgba(160, 50, 45, .78);
  border: 2.5px solid rgba(160, 50, 45, .62); border-radius: 6px;
  padding: 3px 10px; transform: rotate(-10deg); letter-spacing: 4px;
  font-family: "Kaiti TC", "DFKai-SB", serif;
}
.cxc-clip { font-size: 24px; margin: -6px 0 0; transform: rotate(24deg); }
.cxc-phs { display: flex; gap: 6px; margin: 12px 0 16px; }
.cxc-ph {
  width: 80px; height: 106px; background: #111 center/cover no-repeat;
  border: 3px solid #f8f6ef; box-shadow: 0 3px 10px rgba(0,0,0,.4);
  transform: rotate(var(--r, 0deg));
}
.cxc-line { font-size: 14.5px; line-height: 2; color: #4a3a28; text-align: center; font-family: "Kaiti TC", "DFKai-SB", serif; }

/* ---------- 檔案卡「繼續」按鈕（原樣式只作用在 f-sheet 內，這裡補上） ---------- */
.d-sheet .fs-next {
  width: 100%; background: #fcc71d; color: #1a1405;
  font-size: 16px; font-weight: 800; border-radius: 999px;
  padding: 14px 0; margin-top: 4px;
}
.d-sheet .fs-next:active { transform: scale(.98); }
.d-row .d-k { color: #9aa0aa; }

/* ---------- v14 修正 ---------- */
/* 主畫面可上下捲動：icon 超過三排時（PotatoPost 在第四排）不再被 dock 蓋住 */
#home-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 118px; /* 讓最後一排捲上來時能離開 dock 區 */
  scrollbar-width: none;
}
#home-scroll::-webkit-scrollbar { display: none; }

/* 蒐證提示帶貼在 navhead 標題（LINE／照片…）正下方，瘦身讓它不壓到列表第一列的名字 */
#evi-banner { top: 76px; font-size: 12px; padding: 6px 14px; }

/* 偵查小結（dossier 移到結案流程內，要蓋過 z-index:60 的 full-screen） */
#dmask { z-index: 65; }
/* 外連確認框要能在結案卡（.full-screen z-index:60）之上出現。
   ⚠️ 同 #dmask 的坑：sheet-mask 預設 50，會被 full-screen 蓋住 → 框有開但看不見也點不到。 */
#xlmask { z-index: 66; }

/* 時鐘鬧鐘列：第 6 題蒐證可點 */
#scr-clock .ck-row { cursor: pointer; }

/* ---------- Facebook app（媽媽的公開動態） ---------- */
#scr-fb .app-body { background: #f0f2f5; padding: 8px 0 24px; }
.fb-post { background: #fff; margin-bottom: 8px; padding: 12px 14px; cursor: pointer; }
.fb-post:active { background: #f7f8fa; }
.fb-head { display: flex; gap: 9px; align-items: center; margin-bottom: 8px; }
.fb-av {
  width: 38px; height: 38px; border-radius: 50%; background: #b98a4a; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; flex: none;
}
.fb-name { font-size: 14.5px; font-weight: 700; color: #050505; }
.fb-time { font-size: 12px; color: #65676b; }
.fb-text { font-size: 14.5px; color: #050505; line-height: 1.6; white-space: pre-line; }
.fb-img { width: 100%; border-radius: 8px; margin-top: 8px; display: block; }
.fb-meta {
  display: flex; justify-content: space-between; font-size: 12.5px; color: #65676b;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid #e4e6eb;
}
.fb-cmt { display: flex; gap: 8px; margin-top: 8px; }
.fb-cmt-av {
  width: 26px; height: 26px; border-radius: 50%; background: #7a9c67; color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none;
}
.fb-cmt-bubble { background: #f0f2f5; border-radius: 14px; padding: 6px 11px; font-size: 13px; color: #050505; }
.fb-cmt-name { font-weight: 700; font-size: 12.5px; }

/* 群組回覆選單收起後的重開膠囊 */
#grpill {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20,20,24,.94);
  color: #fcc71d;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  padding: 11px 20px;
  display: none;
  z-index: 46;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
#grpill.show { display: block; }

/* 外連確認框（iOS 風格置中 alert） */
#xlmask { align-items: center; justify-content: center; }
.xl-alert {
  width: 272px;
  background: rgba(248,248,250,.97);
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  animation: sheetpop .18s ease;
}
@keyframes sheetpop { from { transform: scale(1.08); opacity: 0; } to { transform: none; opacity: 1; } }
.xl-title { font-size: 16px; font-weight: 700; color: #111; padding: 18px 18px 6px; }
.xl-sub { font-size: 13px; color: #555; line-height: 1.5; padding: 0 18px 16px; }
.xl-btns { display: flex; border-top: .5px solid #c9c9cd; }
.xl-btns button, .xl-btns a {
  flex: 1;
  padding: 12px 0;
  font-size: 16.5px;
  color: #0a7cff;
}
#xl-cancel { border-right: .5px solid #c9c9cd; }
#xl-go { font-weight: 700; }
.xl-btns button:active, .xl-btns a:active { background: #e8e8ec; }
.xl-btns a { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* 聊天室連結預覽卡可點 */
.chat-img.img-link { cursor: pointer; }

/* ---------- 群組回覆選單：壓低高度＋調淡遮罩，讓後面的群組訊息看得到（2026-08-19） ---------- */
#grmask { background: rgba(0, 0, 0, .18); }
#grmask .q-sheet { max-height: 58%; padding: 12px 16px 18px; }
#grmask .qs-avatar { width: 40px; height: 40px; }
#grmask .qs-asker { gap: 4px; margin-bottom: 8px; }
#grmask .gr-lead { padding: 2px 4px 10px; line-height: 1.7; }

/* ---------- lite：兩行筆記卡 ---------- */
.fc-body.collapsed { display: none; }
.fc-expand {
  display: none; margin-top: 10px; padding: 6px 0; width: 100%;
  background: none; border: none; border-top: 1px dashed #3a3f4d;
  color: #8a8f9c; font-size: 12.5px; letter-spacing: 1px; cursor: pointer;
  font-family: inherit;
}
.fc-expand:active { color: #c4c8d0; }

/* ---------- 封面：合爐主視覺 ---------- */
.pw-hero {
  width: calc(100% + 64px); max-width: none; margin: 4px -32px 18px;
  display: block; aspect-ratio: 3 / 2; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%);
}
/* 照片本身已燒上「合爐」大字，文字主標只留給螢幕閱讀器 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 結案卡：Buzzer 手搖任務卡 ---------- */
.bz-card {
  display: flex; gap: 12px; align-items: center; text-decoration: none;
  width: 100%; margin: 16px 0 4px; padding: 13px 14px;
  background: linear-gradient(180deg, #1d2410, #161a10);
  border: 1px solid #46551f; border-radius: 14px; text-align: left;
}
.bz-card:active { filter: brightness(1.15); }
.bz-ico {
  flex: none; width: 46px; height: 46px; border-radius: 11px;
  background: #d7f24a; display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.bz-t { font-size: 15px; font-weight: 800; color: #d7f24a; }
.bz-d { font-size: 12.5px; color: #9aa48a; margin-top: 2px; line-height: 1.5; }
.bz-go { font-size: 12.5px; color: #d7f24a; font-weight: 700; margin-top: 4px; }

/* 「傳給家人玩」：介於主要與幽靈之間的深色鈕 */
.btn-dark {
  width: 100%; padding: 15px; margin-top: 9px; border: none; border-radius: 999px;
  background: #1c1f27; color: #e6e8ec; font-size: 16px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.btn-dark:active { background: #262a34; }

/* Buzzer 任務卡的 logo（取代原本的 emoji） */
.bz-ico img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }