:root{
  --ink:#2c3242; --ink2:#5b6478; --paper:#f4efe6; --paper2:#ece4d6;
  --blue:#5b6b8c; --blue-soft:#8a9bbd; --rose:#c97b6b; --line:#d8cdb8;
  --good:#5e8c6a; --bad:#b5614f; --accent:var(--blue);
  --shadow:0 2px 0 rgba(44,50,66,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Hiragino Sans","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:
    radial-gradient(120% 80% at 50% -10%, #fbf8f1 0%, var(--paper) 55%, var(--paper2) 100%);
  color:var(--ink); overflow:hidden; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.kicker{font-size:12px;letter-spacing:.32em;color:var(--blue-soft);text-transform:none;margin-bottom:6px}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ============ 首页 / 档案 ============ */
.home{flex:1;overflow-y:auto;padding:clamp(20px,5vw,56px) clamp(18px,6vw,80px);display:flex;flex-direction:column;gap:26px;max-width:880px;margin:0 auto;width:100%}
.home::-webkit-scrollbar{display:none}
.home{scrollbar-width:none}
.home-hd h1{font-size:clamp(28px,6vw,46px);font-weight:800;letter-spacing:.04em;line-height:1.15}
.home-hd .lede{margin-top:14px;color:var(--ink2);font-size:15px;max-width:46ch}
.home-hd .lede b{color:var(--blue);font-weight:700}

.ledger{background:rgba(255,255,255,.55);border:1px solid var(--line);padding:18px 22px;display:flex;flex-direction:column;gap:10px}
.ledger-row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--ink2)}
.ledger-row b{font-size:18px;color:var(--ink);font-weight:800}
.ledger-bar{height:6px;background:var(--paper2);overflow:hidden}
.ledger-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue-soft),var(--blue));transition:width .5s}

.case-list{display:flex;flex-direction:column;gap:12px}
.case-card{display:flex;align-items:stretch;gap:16px;text-align:left;background:rgba(255,255,255,.7);border:1px solid var(--line);padding:16px 18px;transition:transform .15s,box-shadow .15s,border-color .15s;box-shadow:var(--shadow)}
.case-card:not(.locked):hover{transform:translateY(-2px);border-color:var(--blue-soft);box-shadow:0 6px 18px rgba(91,107,140,.14)}
.case-card.locked{opacity:.5;cursor:not-allowed}
.case-card.done{background:rgba(94,140,106,.08);border-color:rgba(94,140,106,.4)}
.case-no{font-size:26px;font-weight:800;color:var(--blue-soft);min-width:34px;font-variant-numeric:tabular-nums}
.case-meta{flex:1;display:flex;flex-direction:column;gap:3px}
.case-meta b{font-size:16px}
.case-meta small{font-size:12px;color:var(--blue-soft);letter-spacing:.05em}
.case-meta em{font-size:13px;color:var(--ink2);font-style:normal;margin-top:3px}
.case-tag{align-self:center;font-size:18px;color:var(--blue)}

.ending{background:linear-gradient(135deg,rgba(91,107,140,.1),rgba(201,123,107,.08));border:1px solid var(--line);padding:24px}
.ending h2{font-size:24px;margin:4px 0 10px}
.ending p{color:var(--ink2);font-size:14px}
.ghost{margin-top:16px;border:1px solid var(--line);padding:8px 16px;font-size:13px;color:var(--ink2);background:rgba(255,255,255,.5)}
.ghost:hover{border-color:var(--bad);color:var(--bad)}
.home-ft{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:12px;color:var(--blue-soft);letter-spacing:.08em;text-align:center}
.replay{border:1px solid var(--line);padding:9px 18px;font-size:13px;color:var(--blue);background:rgba(255,255,255,.6);letter-spacing:.04em;transition:.15s}
.replay:hover{border-color:var(--blue);background:rgba(138,155,189,.12);transform:translateY(-1px)}

/* ============ 通用舞台 ============ */
.stage{flex:1;display:flex;flex-direction:column;overflow:hidden;max-width:760px;margin:0 auto;width:100%;padding:clamp(16px,4vw,34px) clamp(16px,5vw,48px)}
.stage-hd{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.18em;color:var(--blue-soft);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px}
.stage-hd span{flex:1}
.back{font-size:13px;color:var(--ink2)}
.back:hover{color:var(--blue)}
.next{align-self:center;margin-top:auto;background:var(--blue);color:#fff;padding:13px 30px;font-size:15px;font-weight:700;letter-spacing:.05em;transition:background .15s,transform .1s;box-shadow:0 3px 0 rgba(44,50,66,.15)}
.next:hover:not(:disabled){background:#4a5878;transform:translateY(-1px)}
.next:disabled{background:var(--line);color:#fff;cursor:not-allowed;box-shadow:none}

/* ============ 案件卡（阶段0）============ */
.case-open{justify-content:flex-start}
.case-hero{position:relative;overflow:hidden;border:1px solid var(--line);margin-bottom:18px;animation:fadeup .5s ease both}
.case-hero img{width:100%;height:clamp(180px,32vh,280px);object-fit:cover;object-position:center 28%;display:block}
.case-hero-grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(44,50,66,.55) 100%)}
.case-hero-cap{position:absolute;left:20px;right:20px;bottom:16px}
.case-hero-cap h2{color:#fff;font-size:clamp(20px,4vw,28px);font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.case-brief{font-size:15px;color:var(--ink2);line-height:1.85;margin-bottom:8px;animation:fadeup .6s ease both}
.case-open .next{margin-top:24px}

/* ============ 开场对白（VN）============ */
.intro{justify-content:center}
.vn{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:24px}
.vn-art{position:relative;width:clamp(120px,30vw,180px);aspect-ratio:1}
.vn-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:3px solid #fff;box-shadow:0 8px 24px rgba(44,50,66,.18);opacity:0;transform:scale(.94);transition:opacity .3s,transform .3s}
.vn-art img.on{opacity:1;transform:scale(1)}
.vn-box{background:rgba(255,255,255,.82);border:1px solid var(--line);border-left:4px solid var(--accent);padding:20px 24px;max-width:560px;width:100%;min-height:140px;display:flex;flex-direction:column}
.vn-name{font-weight:800;font-size:15px;letter-spacing:.06em;margin-bottom:8px}
.vn-text{font-size:16px;color:var(--ink);flex:1}
.vn-box .next{align-self:flex-end;margin-top:14px;padding:9px 22px;font-size:14px}
.dots{display:flex;gap:8px;justify-content:center;margin-top:20px}
.dots i{width:8px;height:8px;background:var(--line);transition:background .2s,width .2s}
.dots i.on{background:var(--accent);width:22px}

/* ============ 现场调查 ============ */
.scene-tip{font-size:13px;color:var(--ink2);margin-bottom:14px}
.objects{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:18px}
.obj{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.7);border:1px solid var(--line);padding:13px 14px;text-align:left;font-size:14px;font-weight:600;transition:.15s}
.obj:hover{border-color:var(--blue-soft);transform:translateY(-1px)}
.obj-dot{width:9px;height:9px;border-radius:50%;background:var(--rose);flex-shrink:0;transition:.2s}
.obj.seen{opacity:.62;background:rgba(0,0,0,.02)}
.obj.seen .obj-dot{background:var(--good)}
.notebook{flex:1;overflow:hidden;display:flex;flex-direction:column;background:rgba(255,255,255,.5);border:1px solid var(--line);padding:14px 16px;margin-bottom:16px}
.nb-hd{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--ink2);display:flex;justify-content:space-between;margin-bottom:10px}
.nb-hd small{color:var(--blue-soft);font-weight:600}
.nb-list{overflow-y:auto;display:flex;flex-direction:column;gap:9px;scrollbar-width:none}
.nb-list::-webkit-scrollbar{display:none}
.nb-empty{color:var(--blue-soft);font-size:13px}
.nb-item{border-left:3px solid var(--blue-soft);padding:6px 12px;background:rgba(255,255,255,.6)}
.nb-item.herring{border-left-color:#c9bda3}
.nb-item b{font-size:13px;display:block;margin-bottom:2px}
.nb-item p{font-size:13px;color:var(--ink2)}
.nb-item.flash{animation:flash .6s}
@keyframes flash{0%{background:rgba(138,155,189,.35)}100%{background:rgba(255,255,255,.6)}}

/* ============ 推理板 ============ */
.deduce-q{font-size:16px;font-weight:700;margin-bottom:16px;color:var(--ink)}
.board{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.slot{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.55);border:1px dashed var(--blue-soft);padding:12px 16px}
.slot-hint{font-size:13px;color:var(--ink2);min-width:130px;font-weight:600}
.slot-drop{flex:1;min-height:38px;border:1px solid var(--line);background:rgba(255,255,255,.6);display:flex;align-items:center;padding:0 8px;transition:.15s}
.slot-drop.over{border-color:var(--blue);background:rgba(138,155,189,.15)}
.slot-drop.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.placed{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;padding:5px 10px;font-size:13px;font-weight:600}
.placed i{cursor:pointer;font-style:normal;opacity:.8;font-size:15px}
.placed i:hover{opacity:1}
.tray{background:rgba(255,255,255,.45);border:1px solid var(--line);padding:13px 15px;margin-bottom:12px}
.tray-hd{font-size:12px;color:var(--ink2);margin-bottom:10px;letter-spacing:.06em}
.tray-items{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#fff;border:1px solid var(--line);padding:8px 13px;font-size:13px;font-weight:600;cursor:grab;transition:.15s;box-shadow:var(--shadow)}
.chip:hover{border-color:var(--blue-soft);transform:translateY(-1px)}
.chip.sel{border-color:var(--blue);background:rgba(138,155,189,.16)}
.chip.used{opacity:.35;pointer-events:none}
.deduce-feedback{font-size:13px;min-height:20px;margin-bottom:8px}
.deduce-feedback.bad{color:var(--bad)}
.deduce-feedback.good{color:var(--good)}

/* ============ 真相 / 裁决 ============ */
.verdict{overflow-y:auto;scrollbar-width:none}
.verdict::-webkit-scrollbar{display:none}
.conclusion{background:rgba(91,107,140,.07);border-left:4px solid var(--blue);padding:16px 20px;margin-bottom:18px}
.concl-text{font-size:15px;color:var(--ink)}
.reveal{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px}
.reveal img{width:74px;height:74px;object-fit:cover;border:3px solid #fff;box-shadow:0 6px 16px rgba(44,50,66,.16);flex-shrink:0}
.reveal p{font-size:15px;color:var(--ink2);font-style:italic;padding-top:4px}
.verdict-prompt{font-size:16px;font-weight:700;margin-bottom:14px}
.choices{display:flex;flex-direction:column;gap:11px}
.choice{text-align:left;background:rgba(255,255,255,.75);border:1px solid var(--line);padding:15px 18px;font-size:15px;font-weight:600;transition:.15s;box-shadow:var(--shadow)}
.choice:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 6px 16px rgba(91,107,140,.14)}

/* ============ 结果 ============ */
.outcome{justify-content:center;align-items:center;text-align:center}
.quote-art img{width:clamp(110px,26vw,150px);height:clamp(110px,26vw,150px);object-fit:cover;border:3px solid #fff;box-shadow:0 10px 28px rgba(44,50,66,.2)}
.q-name{font-weight:800;font-size:15px;letter-spacing:.06em;margin:18px 0 8px}
.q-text{font-size:17px;max-width:48ch;color:var(--ink)}
.result{background:rgba(255,255,255,.6);border:1px solid var(--line);padding:16px 20px;margin:22px 0 0;max-width:52ch}
.result p{font-size:14px;color:var(--ink2)}
.trust-delta{margin:18px 0;font-size:14px;font-weight:800;letter-spacing:.1em;color:var(--ink2)}
.trust-delta.up{color:var(--good)}
.trust-delta.down{color:var(--bad)}
.aftermath{margin:22px auto 0;max-width:52ch;padding:18px 20px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(181,97,79,.07),transparent)}
.aftermath .kicker{color:var(--bad);opacity:.8}
.aftermath p:last-child{font-size:14px;color:var(--ink2);line-height:1.85;font-style:italic}

@media(max-width:520px){
  .slot{flex-direction:column;align-items:stretch;gap:8px}
  .slot-hint{min-width:0}
  .reveal{flex-direction:column;align-items:center;text-align:center}
}

/* ============ 序章 ============ */
.skip{font-size:12px;color:var(--blue-soft);letter-spacing:.06em}
.skip:hover{color:var(--ink2)}
.pro-open{justify-content:center;align-items:center}
.door-scene{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;max-width:540px;animation:fadeup .8s ease both}
.door-art{width:clamp(150px,32vw,210px);aspect-ratio:.85;object-fit:cover;object-position:center top;border:3px solid #fff;box-shadow:0 12px 32px rgba(44,50,66,.22);margin-bottom:4px}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pro-line{font-size:clamp(17px,3.4vw,21px);font-weight:700;line-height:1.8;color:var(--ink)}
.pro-sub{font-size:15px;color:var(--ink2);line-height:1.9}
.door-btn{margin-top:14px;background:var(--blue);color:#fff;padding:15px 46px;font-size:17px;font-weight:700;letter-spacing:.18em;box-shadow:0 4px 0 rgba(44,50,66,.16);transition:.15s}
.door-btn:hover{background:#4a5878;transform:translateY(-2px)}
.pro-open .skip{margin-top:6px}
.mini-setup{max-width:560px;margin:0 auto 16px;border-left:4px solid var(--accent)}
.pro-mini .scene-tip,.pro-mini .deduce-q{font-weight:700;color:var(--ink)}
.pro-hint{font-size:14px;color:var(--blue);max-width:46ch;margin:18px auto 0;line-height:1.8;font-weight:600}