/*
 * 福尔摩斯在21世纪 · UI与视觉设计
 * Copyright © 2026 Bobby. All rights reserved.
 */

:root {
  --ink: #18201e;
  --ink-soft: #46504c;
  --paper: #eee9dc;
  --paper-bright: #faf7ee;
  --line: #c9c1b0;
  --night: #101715;
  --night-2: #19221f;
  --teal: #2f6f69;
  --teal-light: #89b8ad;
  --burgundy: #7b3039;
  --amber: #c68a32;
  --green: #59725b;
  --shadow: 0 18px 50px rgba(10, 18, 16, .18);
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--night); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(rgba(16, 23, 21, .94), rgba(16, 23, 21, .94)),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.03) 40px);
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  cursor: url("assets/magnifier-cursor.svg") 13 13, auto;
}

button, select { font: inherit; }
button, select, label, a { cursor: url("assets/magnifier-cursor.svg") 13 13, pointer; }
input, textarea { cursor: text; }

.app-shell {
  width: min(1540px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--paper);
  box-shadow: 0 0 80px rgba(0,0,0,.38);
}

.topbar {
  height: 84px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f5f0e5;
  background: var(--night);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.brand-block, .case-status, .phase-nav, .scene-heading, .panel-heading,
.evidence-heading, .deduction-header, .accusation-layout { display: flex; align-items: center; }

.brand-block { gap: 14px; min-width: 0; }
.brand-mark {
  width: 48px; height: 48px; display: grid; place-items: center;
  padding: 0; border: 1px solid var(--amber); color: var(--amber); background: transparent;
  font-family: Georgia, serif; font-size: 13px; font-weight: 700;
}
.brand-mark:hover { color: #f2cb84; background: rgba(198,138,50,.08); }

.eyebrow {
  margin: 0 0 4px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.topbar .eyebrow { color: var(--teal-light); }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-family: Georgia, "SimSun", serif; font-size: 22px; font-weight: 500; }

.case-status { gap: 20px; }
.case-status > div { min-width: 56px; }
.case-status span { display: block; color: #9fa8a4; font-size: 10px; }
.case-status strong { font-family: Georgia, serif; font-size: 15px; font-weight: 400; }
.case-status b { color: #fff; font-size: 20px; }

.icon-button {
  width: 38px; height: 38px; padding: 0;
  color: #e8e3d8; background: transparent;
  border: 1px solid #43504c;
  border-radius: 4px;
  font-size: 20px;
}
.icon-button:hover, .icon-button.active { color: var(--amber); border-color: var(--amber); }
.icon-button.awaiting-gesture { color: var(--amber); border-color: var(--amber); animation: sound-ready 1.6s ease-in-out infinite; }
@keyframes sound-ready { 50% { box-shadow: 0 0 0 5px rgba(198,138,50,.14); } }

.phase-nav {
  height: 52px;
  padding: 0 28px;
  gap: 4px;
  background: #e2ddcf;
  border-bottom: 1px solid var(--line);
}

.phase-tab {
  height: 100%; padding: 0 22px;
  color: #68716d; background: transparent; border: 0; border-bottom: 3px solid transparent;
  font-size: 13px; font-weight: 700;
}
.phase-tab span { margin-right: 8px; color: #999486; font-family: Georgia, serif; font-size: 11px; }
.phase-tab:hover { color: var(--ink); }
.phase-tab.active { color: var(--burgundy); border-bottom-color: var(--burgundy); }

main { min-height: calc(100vh - 168px); }
.view { display: none; min-height: calc(100vh - 168px); }
.view.active { display: block; animation: reveal .28s ease; }
@keyframes reveal { from { opacity: 0; transform: translateY(4px); } }

.briefing-layout {
  min-height: calc(100vh - 168px);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
}

.briefing-copy {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(48px, 8vw, 120px);
  background:
    linear-gradient(120deg, rgba(250,247,238,.97), rgba(238,233,220,.88)),
    radial-gradient(circle at 20% 10%, #fff 0 2px, transparent 3px);
  overflow: hidden;
}
.briefing-copy::after {
  content: "221B";
  position: absolute; right: 3vw; bottom: -4vw;
  color: rgba(24,32,30,.04); font-family: Georgia, serif; font-size: clamp(150px, 25vw, 370px); line-height: .8;
  pointer-events: none;
}
.chapter-label { margin: 0 0 18px; color: var(--burgundy); font-size: 13px; font-weight: 800; }
.briefing-copy h2 { max-width: 720px; margin: 0; font-family: Georgia, "SimSun", serif; font-size: clamp(40px, 6vw, 82px); font-weight: 500; line-height: 1.05; }
.lead { max-width: 700px; margin: 28px 0 0; color: #39423f; font-size: 17px; line-height: 1.9; }
blockquote { margin: 28px 0; padding-left: 18px; color: var(--ink-soft); border-left: 2px solid var(--burgundy); font-family: Georgia, "KaiTi", serif; font-size: 16px; line-height: 1.7; }

.primary-button {
  position: relative; z-index: 1;
  min-height: 46px; padding: 0 20px;
  color: #fff; background: var(--burgundy); border: 0; border-radius: 4px;
  font-size: 14px; font-weight: 800;
}
.primary-button span { margin-left: 24px; }
.primary-button:hover { background: #63232c; }
.primary-button:disabled { cursor: not-allowed; opacity: .45; }

.case-file {
  position: relative;
  margin: clamp(28px, 5vw, 72px); padding: 40px;
  align-self: center;
  color: #e8e5dc; background: #26312e;
  box-shadow: var(--shadow);
  transform: rotate(1deg);
}
.case-file::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.13); pointer-events: none; }
.file-stamp { display: inline-block; padding: 7px 9px; color: #dda258; border: 1px solid #dda258; font: 700 11px Georgia, serif; }
.case-file dl { margin: 35px 0; }
.case-file dl div { display: grid; grid-template-columns: 88px 1fr; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.case-file dt { color: #87928e; font-size: 12px; }
.case-file dd { margin: 0; font-family: Georgia, "SimSun", serif; }
.cipher-strip { display: flex; justify-content: center; gap: 14px; padding: 24px 8px; color: #d9a75e; background: #131b19; font-size: 26px; }
.hand-note { margin: 28px 0 0; color: #b9c6c0; font-family: "KaiTi", serif; line-height: 1.6; transform: rotate(-2deg); }

.investigation-layout { min-height: calc(100vh - 168px); display: grid; grid-template-columns: 230px minmax(420px, 1fr) 310px; }
.scene-sidebar, .evidence-panel { padding: 24px; background: #e5e0d4; }
.scene-sidebar { border-right: 1px solid var(--line); }
.evidence-panel { border-left: 1px solid var(--line); }
.panel-heading { justify-content: space-between; }
.panel-heading h2 { margin: 0; font: 500 22px Georgia, "SimSun", serif; }

.scene-list { display: grid; gap: 8px; margin-top: 22px; }
.scene-button {
  width: 100%; min-height: 64px; padding: 10px 12px;
  display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px;
  color: var(--ink); text-align: left; background: transparent; border: 1px solid transparent; border-radius: 4px;
}
.scene-button:hover { background: rgba(255,255,255,.45); }
.scene-button.active { background: var(--paper-bright); border-color: var(--line); }
.scene-button.locked { cursor: not-allowed; opacity: .45; }
.scene-index { color: var(--burgundy); font: 18px Georgia, serif; }
.scene-button strong { display: block; font-size: 13px; }
.scene-button small { display: block; margin-top: 3px; color: #7a827e; }

.watson-note { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); }
.portrait { width: 34px; height: 34px; display: grid; place-items: center; float: left; margin: 0 10px 6px 0; color: #f0eadd; background: var(--green); border-radius: 50%; font: 700 10px Georgia, serif; }
.watson-note p { margin: 0; color: #5d6662; font: 14px/1.7 "KaiTi", serif; }

.scene-workspace { min-width: 0; padding: 24px 28px 32px; background: var(--paper-bright); }
.scene-heading { justify-content: space-between; margin-bottom: 14px; }
.scene-heading h3 { margin: 0; font: 500 24px Georgia, "SimSun", serif; }
.scene-progress { color: #69716d; font-size: 12px; }
.scene-progress span:first-child { color: var(--burgundy); font-size: 18px; font-weight: 800; }
.scene-meta { display: grid; justify-items: end; gap: 5px; }
.scene-legend { display: flex; gap: 10px; color: #777f7b; font-size: 9px; }
.scene-legend span { display: flex; align-items: center; gap: 4px; }
.scene-legend i { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.legend-clue { background: var(--burgundy); }
.legend-detail { background: #d6caa9; border: 1px solid #635f54; }
.scene-frame { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; background: #202725; border: 1px solid #6c706b; box-shadow: var(--shadow); }
.scene-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hotspot-layer { position: absolute; inset: 0; }
.hotspot {
  position: absolute; width: 34px; height: 34px; padding: 0;
  color: white; background: rgba(123,48,57,.88); border: 1px solid rgba(255,255,255,.85); border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(123,48,57,.22);
  transform: translate(-50%, -50%);
  animation: pulse 2.2s infinite;
}
.hotspot::before, .hotspot::after { content: ""; position: absolute; background: currentColor; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.hotspot::before { width: 12px; height: 2px; }
.hotspot::after { width: 2px; height: 12px; }
.hotspot:hover { background: var(--amber); transform: translate(-50%, -50%) scale(1.08); }
.hotspot.found { color: #d5ded9; background: rgba(24,32,30,.76); box-shadow: none; animation: none; }
.hotspot.found::after { display: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 11px rgba(123,48,57,.08); } }
.detail-point {
  position: absolute; width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center;
  color: #201f1a; background: rgba(232,220,183,.88); border: 1px solid rgba(32,31,26,.72); border-radius: 50%;
  box-shadow: 0 2px 9px rgba(0,0,0,.28); transform: translate(-50%, -50%);
}
.detail-point span { margin-top: -5px; font: 700 20px Georgia, serif; }
.detail-point:hover { color: #fff; background: var(--teal); transform: translate(-50%, -50%) scale(1.12); }
.detail-point.seen { color: #fff; background: rgba(47,111,105,.86); border-color: #d7e8e2; }
.detail-point.seen span { margin: 0; font: 700 10px "Segoe UI", sans-serif; }
.scanline { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px); }
.scene-caption { margin: 14px 0 0; color: #6b736f; font-size: 12px; line-height: 1.6; }

.evidence-heading { justify-content: space-between; }
.small-button { padding: 7px 9px; color: var(--burgundy); background: transparent; border: 1px solid #b6a99d; border-radius: 3px; font-size: 11px; font-weight: 800; }
.small-button:hover { background: var(--paper-bright); }
.evidence-list { display: grid; gap: 8px; margin-top: 18px; max-height: calc(100vh - 270px); overflow: auto; padding-right: 3px; }
.evidence-card { width: 100%; padding: 12px; display: grid; grid-template-columns: 38px 1fr; gap: 10px; color: var(--ink); text-align: left; background: #f7f3e9; border: 1px solid #d5cdbd; border-radius: 4px; }
.evidence-card:hover { border-color: var(--teal); }
.evidence-icon { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--teal); border-radius: 3px; font: 700 15px Georgia, serif; }
.evidence-card strong { display: block; margin-bottom: 4px; font-size: 13px; }
.evidence-card small { display: block; color: #7a817e; font-size: 10px; line-height: 1.4; }
.empty-state { padding: 30px 14px; color: #8a8d87; text-align: center; border: 1px dashed #bcb5a7; font-size: 12px; line-height: 1.7; }

.deduction-header { justify-content: space-between; padding: 42px clamp(24px, 5vw, 76px) 24px; }
.deduction-header h2, .accusation-main h2 { margin: 0; font: 500 clamp(30px, 4vw, 48px) Georgia, "SimSun", serif; }
.deduction-header p:not(.eyebrow) { color: #68706c; }
.score-seal { min-width: 92px; padding: 12px; text-align: center; border: 1px solid var(--burgundy); color: var(--burgundy); font-size: 11px; transform: rotate(2deg); }
.score-seal strong { display: block; margin-top: 2px; font: 30px Georgia, serif; }
.deduction-board { padding: 0 clamp(24px, 5vw, 76px) 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.reasoning-tools { padding: 0 clamp(24px, 5vw, 76px) 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cipher-workbench, .timeline-workbench { min-height: 250px; padding: 24px; color: #e9e7df; background: #202a27; border-top: 4px solid var(--amber); }
.cipher-workbench.locked, .timeline-workbench.locked { color: var(--ink); background: #ddd7ca; border-top-color: #918a7d; }
.cipher-workbench h3, .timeline-workbench h3 { margin: 5px 0 10px; font: 500 21px Georgia, "SimSun", serif; }
.cipher-workbench > p, .timeline-workbench > p { margin: 0 0 16px; color: #aeb9b4; font-size: 12px; line-height: 1.65; }
.cipher-workbench.locked > p, .timeline-workbench.locked > p { color: #6d746f; }
.cipher-symbols { display: flex; align-items: center; gap: 8px; margin: 20px 0; }
.cipher-symbols span { width: 43px; height: 46px; display: grid; place-items: center; color: var(--amber); background: #111816; border: 1px solid #5f6b67; font-size: 23px; }
.cipher-symbols i { color: #8f9994; font-style: normal; }
.cipher-entry { display: flex; gap: 8px; }
.cipher-entry input { width: min(180px, 55%); height: 42px; padding: 0 12px; color: #f3eee2; background: #121917; border: 1px solid #68746f; border-radius: 3px; text-transform: uppercase; }
.cipher-entry button, .timeline-check { padding: 0 14px; color: #17201d; background: var(--amber); border: 0; border-radius: 3px; font-size: 12px; font-weight: 800; }
.cipher-result { padding: 12px; color: #dce9df; background: #315047; font-size: 12px; line-height: 1.6; }
.timeline-list { display: grid; gap: 7px; }
.timeline-row { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center; }
.timeline-row select { width: 100%; height: 34px; padding: 0 6px; color: #f1eee5; background: #111816; border: 1px solid #596560; border-radius: 3px; }
.timeline-row span { color: #d6d7d0; font-size: 11px; line-height: 1.35; }
.timeline-check { min-height: 36px; margin-top: 12px; }
.deduction-card { min-height: 300px; padding: 24px; background: var(--paper-bright); border: 1px solid var(--line); border-top: 4px solid #565f5b; }
.deduction-card.solved { border-top-color: var(--teal); background: #f4f5ec; }
.deduction-number { color: var(--burgundy); font: 14px Georgia, serif; }
.deduction-card h3 { margin: 8px 0; font: 500 20px Georgia, "SimSun", serif; }
.deduction-card > p { min-height: 42px; color: #68706c; font-size: 13px; line-height: 1.6; }
.hypothesis-label { display: block; margin: 12px 0 5px; color: #747b77; font-size: 10px; font-weight: 800; }
.hypothesis-select { width: 100%; height: 42px; padding: 0 8px; margin-bottom: 10px; color: var(--ink); background: #eee9dd; border: 1px solid #c9c0b0; border-radius: 3px; }
.evidence-pair { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 6px; }
.evidence-pair.slots-3 { grid-template-columns: 1fr 20px 1fr 20px 1fr; }
.evidence-pair span { color: #9b9487; text-align: center; }
.evidence-pair select { width: 100%; min-width: 0; height: 42px; padding: 0 8px; color: var(--ink); background: #eee9dd; border: 1px solid #c9c0b0; border-radius: 3px; }
.deduce-button { margin-top: 14px; padding: 9px 12px; color: #fff; background: var(--ink); border: 0; border-radius: 3px; font-size: 12px; font-weight: 700; }
.deduce-button:disabled { opacity: .5; }
.solved-text { margin-top: 14px; padding: 10px 12px; color: #31564c; background: #dfe9df; font-size: 12px; line-height: 1.5; }

.accusation-layout { align-items: flex-start; gap: 50px; padding: 56px clamp(24px, 6vw, 90px); }
.accusation-main { flex: 1; min-width: 0; }
.accusation-intro { max-width: 760px; color: #626b67; line-height: 1.7; }
.dialogue-stage {
  position: relative; min-height: 164px; margin: 28px 0 16px; padding: 20px 24px;
  display: grid; grid-template-columns: 106px minmax(0, 1fr); align-items: center; gap: 24px;
  color: #eef1ea; background: #17201e; border-left: 4px solid var(--amber); overflow: hidden;
}
.dialogue-stage::after { content: "REC"; position: absolute; right: 18px; top: 14px; color: #bd6d6d; font: 700 9px Georgia, serif; }
.dialogue-stage::before { content: ""; position: absolute; right: 44px; top: 17px; width: 5px; height: 5px; background: #b54c54; border-radius: 50%; }
.dialogue-stage.speaking > div:last-child { animation: dialogue-in .38s ease both; }
@keyframes dialogue-in { from { opacity: 0; transform: translateX(8px); } }
.dialogue-meta { margin: 0 0 5px !important; color: var(--teal-light) !important; font-size: 9px !important; font-weight: 800; text-transform: uppercase; }
.dialogue-stage h3 { margin: 0; font: 500 21px Georgia, "SimSun", serif; }
.dialogue-stage p:last-child { margin: 10px 0 0; color: #c8d0cc; font: 14px/1.7 Georgia, "KaiTi", serif; }
.character-portrait {
  position: relative; width: 86px; height: 108px; flex: 0 0 86px; display: block;
  overflow: hidden; background: linear-gradient(145deg, #40534e, #1d2825); border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 0 24px rgba(0,0,0,.35);
}
.character-portrait::before {
  content: ""; position: absolute; left: 29px; top: 18px; width: 31px; height: 39px;
  background: #111816; border-radius: 48% 48% 42% 42%; box-shadow: -8px -5px 0 -4px #111816;
}
.character-portrait::after {
  content: ""; position: absolute; left: 12px; bottom: -19px; width: 66px; height: 66px;
  background: #111816; border-radius: 42% 42% 8% 8%;
}
.character-portrait b { position: absolute; right: 6px; bottom: 5px; z-index: 1; color: rgba(255,255,255,.62); font: 700 10px Georgia, serif; }
.portrait-vale { background: linear-gradient(145deg, #6e513f, #242b28); }
.portrait-vale::before { box-shadow: -9px -7px 0 -3px #111816; }
.portrait-shaw { background: linear-gradient(145deg, #52635c, #202927); }
.portrait-shaw::before { transform: rotate(3deg); }
.portrait-cole { background: linear-gradient(145deg, #596278, #22282b); }
.portrait-cole::before { border-radius: 50% 50% 38% 38%; box-shadow: 0 -8px 0 -2px #111816; }
.portrait-holmes { background: linear-gradient(145deg, #315e59, #17201e); }
.portrait-holmes::before { left: 34px; transform: rotate(-5deg); box-shadow: -12px -8px 0 -5px #111816; }
.interview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0 38px; }
.interview-card { min-height: 342px; padding: 16px; background: #f9f6ed; border: 1px solid var(--line); border-top: 4px solid var(--teal); transition: border-color .2s, transform .2s; }
.interview-card.active-speaker { border-top-color: var(--amber); transform: translateY(-2px); }
.interview-head { display: flex; align-items: center; gap: 12px; }
.interview-card .character-portrait { width: 64px; height: 82px; flex-basis: 64px; }
.interview-card .character-portrait::before { left: 20px; top: 12px; width: 25px; height: 31px; }
.interview-card .character-portrait::after { left: 7px; width: 52px; height: 50px; }
.interview-card h3 { margin: 0; font: 500 17px Georgia, "SimSun", serif; }
.interview-card small { color: #7d847f; }
.interview-card em { display: block; margin-top: 5px; color: #8a7667; font-size: 9px; font-style: normal; line-height: 1.4; }
.testimony { min-height: 68px; margin: 17px 0; padding: 11px; color: #4d5652; background: #eae5d9; font-size: 12px; line-height: 1.6; }
.testimony.revealed { border-left: 3px solid var(--burgundy); }
.interview-action { display: grid; gap: 7px; }
.interview-action select { width: 100%; height: 36px; padding: 0 7px; background: #fffdf7; border: 1px solid #c9c0b0; border-radius: 3px; }
.interview-button { min-height: 36px; color: #fff; background: var(--ink); border: 0; border-radius: 3px; font-size: 11px; font-weight: 800; }
.interview-button.secondary { color: var(--burgundy); background: transparent; border: 1px solid #b6a99d; }
.accuse-label { margin: 0; padding-top: 26px; border-top: 1px solid var(--line); font: 500 22px Georgia, "SimSun", serif; }
.suspect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0; }
.suspect-card { position: relative; min-height: 186px; padding: 22px; color: #e8e7df; background: #26302d; border: 2px solid transparent; border-radius: 4px; cursor: pointer; }
.suspect-card:has(input:checked) { border-color: var(--amber); }
.suspect-card input { position: absolute; top: 14px; right: 14px; accent-color: var(--amber); }
.suspect-initials { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 20px; color: #15201d; background: #c3b999; font: 700 18px Georgia, serif; }
.suspect-card h3 { margin: 0 0 6px; font: 500 18px Georgia, "SimSun", serif; }
.suspect-card p { margin: 0; color: #aeb8b3; font-size: 12px; line-height: 1.6; }
.logic-summary { width: 300px; padding: 28px; background: #ddd7ca; border-left: 3px solid var(--burgundy); }
.logic-summary h3 { margin: 0; font: 500 21px Georgia, serif; }
.logic-summary ol { margin: 22px 0 0; padding-left: 20px; }
.logic-summary li { margin: 0 0 16px; color: #737873; font-size: 12px; line-height: 1.6; }
.logic-summary li.solved { color: #274f47; }
.verdict { margin: 0 clamp(24px, 6vw, 90px) 60px; padding: 34px; color: #edf0e9; background: var(--night-2); border-left: 5px solid var(--amber); }
.verdict h3 { margin: 0 0 10px; font: 500 28px Georgia, "SimSun", serif; }
.verdict p { margin: 8px 0; color: #c4ccc8; line-height: 1.75; }
.case-report { margin-top: 28px; padding-top: 26px; border-top: 1px solid #47534f; }
.report-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.case-report h4 { margin: 0; color: #f0eee6; font: 500 22px Georgia, "SimSun", serif; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0 24px; }
.stat-grid div { min-height: 82px; padding: 13px; background: #222d2a; border: 1px solid #3e4b47; }
.stat-grid strong { display: block; color: var(--amber); font: 28px Georgia, serif; }
.stat-grid span { color: #98a49f; font-size: 10px; }
.evidence-replay { display: grid; gap: 7px; }
.evidence-replay article { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px solid #394540; }
.evidence-replay article > span { width: 30px; height: 30px; display: grid; place-items: center; color: #15201d; background: var(--amber); font: 700 11px Georgia, serif; }
.evidence-replay h5 { margin: 0 0 4px; color: #e8ece5; font: 500 14px Georgia, "SimSun", serif; }
.evidence-replay p { margin: 0; color: #99a59f; font-size: 10px; }
.report-note { margin-top: 17px !important; color: #aab5b0 !important; font: 12px/1.6 "KaiTi", serif; }

.case-footer { height: 32px; padding: 0 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; color: #838b87; background: var(--night); font-size: 10px; }
.case-footer > :last-child { justify-self: end; }
.footer-location { padding: 0; justify-self: start; color: inherit; background: transparent; border: 0; font-size: inherit; }
.footer-location:hover, .copyright { color: #a7aea9; }

.evidence-dialog { width: min(520px, calc(100% - 28px)); padding: 30px; color: var(--ink); background: var(--paper-bright); border: 0; border-top: 5px solid var(--teal); box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.evidence-dialog::backdrop { background: rgba(10,15,14,.74); backdrop-filter: blur(3px); }
.evidence-dialog h2 { margin: 0; font: 500 28px Georgia, "SimSun", serif; }
.evidence-dialog > p:not(.eyebrow) { line-height: 1.7; }
.dialog-close { position: absolute; right: 14px; top: 12px; width: 34px; height: 34px; color: #5e6561; background: transparent; border: 0; font-size: 26px; }
.evidence-visual { height: 110px; margin: 22px 0; display: grid; place-items: center; color: #d9c99c; background: #1b2522; font: 44px Georgia, serif; overflow: hidden; }
.evidence-dialog blockquote { margin-bottom: 0; font-size: 14px; }
.secret-dialog { border-top-color: var(--amber); }
.secret-dialog small { color: #7c817d; }
.secret-seal { width: 92px; height: 92px; margin: 24px auto; display: grid; place-items: center; color: var(--amber); background: var(--night); border: 1px solid var(--amber); border-radius: 50%; font: 48px Georgia, serif; box-shadow: 0 0 0 8px #e4dece, 0 0 0 9px #aaa18f; transform: rotate(-6deg); }
.toast { position: fixed; left: 50%; bottom: 48px; z-index: 20; max-width: calc(100% - 30px); padding: 11px 16px; color: #fff; background: #18201e; border: 1px solid #56635e; border-radius: 4px; box-shadow: var(--shadow); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1050px) {
  .investigation-layout { grid-template-columns: 180px minmax(0, 1fr); }
  .evidence-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .evidence-list { grid-template-columns: repeat(3, minmax(0,1fr)); max-height: none; }
  .deduction-board { grid-template-columns: 1fr; }
  .reasoning-tools { grid-template-columns: 1fr; }
  .interview-grid { grid-template-columns: 1fr; }
  .interview-card { min-height: 0; }
}

@media (max-width: 760px) {
  .topbar { height: auto; min-height: 76px; padding: 12px 16px; }
  .brand-mark { width: 40px; height: 40px; }
  h1 { font-size: 17px; }
  .brand-block .eyebrow { display: none; }
  .case-status { gap: 8px; }
  .case-status > div { display: none; }
  .case-footer { padding: 0 14px; grid-template-columns: auto 1fr; }
  .case-footer .footer-location { display: none; }
  .case-footer .copyright { justify-self: start; }
  .phase-nav { padding: 0; overflow-x: auto; }
  .phase-tab { flex: 1; min-width: 76px; padding: 0 9px; }
  .phase-tab span { display: block; margin: 0; font-size: 9px; }
  .briefing-layout { grid-template-columns: 1fr; }
  .briefing-copy { min-height: 520px; padding: 50px 24px; }
  .briefing-copy h2 { font-size: 42px; }
  .lead { font-size: 15px; }
  .case-file { margin: 24px; padding: 30px; }
  .investigation-layout { display: block; }
  .scene-sidebar { padding: 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .scene-list { display: flex; overflow-x: auto; }
  .scene-button { min-width: 155px; }
  .watson-note { display: none; }
  .scene-workspace { padding: 18px 14px 24px; }
  .scene-frame { aspect-ratio: 4/3; }
  .hotspot { width: 30px; height: 30px; }
  .detail-point { width: 20px; height: 20px; }
  .scene-legend { display: none; }
  .evidence-panel { padding: 18px 14px; }
  .evidence-list { display: flex; overflow-x: auto; }
  .evidence-card { min-width: 210px; }
  .deduction-header { padding: 34px 18px 18px; }
  .score-seal { min-width: 72px; }
  .deduction-board { padding: 0 14px 36px; }
  .reasoning-tools { padding: 0 14px 16px; }
  .cipher-workbench, .timeline-workbench { padding: 18px; }
  .timeline-row { grid-template-columns: 86px 1fr; }
  .deduction-card { padding: 18px; }
  .evidence-pair { grid-template-columns: 1fr; }
  .evidence-pair.slots-3 { grid-template-columns: 1fr; }
  .evidence-pair span { transform: rotate(90deg); }
  .accusation-layout { display: block; padding: 36px 18px; }
  .dialogue-stage { grid-template-columns: 72px 1fr; gap: 15px; padding: 16px; }
  .dialogue-stage .character-portrait { width: 64px; height: 86px; }
  .dialogue-stage .character-portrait::before { left: 21px; top: 13px; width: 24px; height: 31px; }
  .dialogue-stage .character-portrait::after { left: 7px; width: 52px; height: 52px; }
  .dialogue-stage p:last-child { font-size: 12px; }
  .suspect-grid { grid-template-columns: 1fr; }
  .logic-summary { width: auto; margin-top: 30px; }
  .verdict { margin: 0 18px 36px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}