:root {
  color-scheme: dark;
  --night: #171e1d;
  --desk: #222c29;
  --board: #263630;
  --paper: #d9cdb4;
  --paper-edge: #b5a386;
  --ink: #302c24;
  --chalk: #eee5cf;
  --brass: #c5a66b;
  --brass-dark: #745b32;
  --red: #9d5948;
}
.topbar nav {display:flex;gap:16px;flex-wrap:wrap;font-size:13px;}
.topbar nav a {text-decoration:none;color:#d7cdb5;}
.case-switch {display:flex;align-items:center;gap:8px;min-width:0;flex:1;max-width:430px;}
.case-switch label {font-size:12px;white-space:nowrap;color:#d7cdb5;}
.case-switch select {min-width:0;width:100%;max-width:100%;padding:8px;color:#eee5cf;background:#202a25;border:1px solid #897754;font:12px 'Microsoft YaHei',sans-serif;}
.source-note {font-size:11px;margin:12px 0;overflow-wrap:anywhere;}
.source-note summary {cursor:pointer;font-weight:700;}
.source-note p {margin:8px 0;}
body[data-case="hound"] .map-walls {stroke-width:3;stroke-linecap:round;}
body[data-case="hound"] .map-doors {display:none;}
.topbar .brand::before {content:none;}
@media(max-width:600px){.topbar .brand{font-size:20px;}.case-switch{order:3;flex-basis:100%;max-width:none;}.topbar nav{margin-left:auto;}.topbar{gap:6px;padding:8px 12px;}.case-heading h1{font-size:20px;}}
.duel-meter {padding:12px 16px;margin-bottom:18px;border:1px solid #8c7950;background:#182820;display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;font-size:13px;}
.duel-status {color:#e7c786;}
.duel-meter[hidden] {display:none;}
.duel-meter button {padding:6px 12px;}
@media(max-width:600px){.topbar{flex-wrap:wrap;}.topbar nav{font-size:12px;gap:12px;}}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--chalk);
  font: 14px/1.55 "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at 50% -18%, #45554b 0, transparent 38%),
    repeating-linear-gradient(105deg, #1b2422 0 2px, #19211f 2px 5px);
}
button, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid #ebc881;
  outline-offset: 3px;
}
a { color: inherit; }
code { color: #735426; font: 12px/1.5 Consolas, monospace; }
p { margin: 0; }
.topbar {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px clamp(16px, 2.8vw, 42px);
  border-bottom: 1px solid #897754;
  background: #141c1bcf;
  box-shadow: inset 0 -4px #1f2c28;
}
.brand {
  font: 25px/1.15 SimSun, serif;
  letter-spacing: .18em;
  text-decoration: none;
  color: #eedfc0;
}
.brand::before { content: "✦"; color: var(--brass); font-size: 16px; margin-right: 12px; vertical-align: 3px; }
.topbar-meta, .eyebrow {
  font: 700 11px/1.4 Consolas, "Microsoft YaHei", sans-serif;
  letter-spacing: .13em;
}
.topbar-meta { color: #aeab99; text-align: right; }
main { max-width: 1650px; margin: auto; padding: 22px clamp(13px, 2vw, 30px) 28px; }
.case-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin: 0 2px 18px;
}
.case-heading .eyebrow { color: var(--brass); }
h1, h2 { font-family: SimSun, "Noto Serif CJK SC", serif; }
h1 { margin: 5px 0 0; font-size: clamp(29px, 3vw, 46px); font-weight: 500; line-height: 1.15; letter-spacing: .07em; }
h2 { margin: 5px 0 13px; font-size: 23px; line-height: 1.2; font-weight: 600; }
.case-progress { color: #b2aa97; font-size: 12px; text-align: right; white-space: nowrap; }
.case-progress strong { display: block; color: var(--brass); font: 27px/1.15 Georgia, serif; }
.game-shell {
  display: grid;
  grid-template-columns: minmax(205px, 245px) minmax(370px, 1fr) minmax(310px, 365px);
  gap: 12px;
  align-items: start;
}
.dossier, .console, .board { position: relative; min-width: 0; }
.dossier {
  color: var(--ink);
  min-height: 690px;
  padding: 22px 18px 28px;
  background:
    linear-gradient(90deg, transparent 28px, #a4796044 29px, transparent 30px),
    linear-gradient(145deg, #e6d8bc, var(--paper) 64%, #cbb998);
  border: 1px solid #a28c67;
  box-shadow: inset 0 0 0 5px #dacbaec7, inset 0 0 0 6px #8a765848, 3px 8px 17px #060a0859;
}
.dossier::before {
  content: "01";
  position: absolute;
  top: 12px;
  right: 14px;
  color: #947c57;
  font: italic 26px/1 Georgia, serif;
  opacity: .65;
}
.dossier .eyebrow { color: #704d38; }
.dossier-intro { margin: 19px 0 25px; font: 16px/1.75 SimSun, serif; color: #3e372b; }
.section-rule { border-top: 1px solid #a9916f; margin-top: 20px; padding-top: 15px; }
.clue-list { display: grid; margin-top: 11px; }
.clue {
  position: relative;
  min-height: 52px;
  padding: 8px 4px 8px 23px;
  border: 0;
  border-bottom: 1px dashed #a79578;
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: background 160ms, transform 160ms cubic-bezier(.22,1,.36,1);
}
.clue::before { content: "◇"; position: absolute; left: 2px; color: #8e4c3f; }
.clue:hover, .clue:focus-visible { background: #f1e3c5; transform: translateX(3px); }
.clue.active { background: linear-gradient(90deg, #c5a66b7d, transparent); }
.clue.found::before { content: "◆"; color: #3f6b5a; }
.clue small { display: block; color: #6f6250; font-size: 11px; }
.schema { color: #62594b; font-size: 11px; overflow-wrap: anywhere; }
.schema div { padding: 3px 0; }
.schema code { display: block; }
.hint { margin-top: 11px; color: #615747; font-size: 11px; }
.suspects { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0; }
.suspects button {
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid #84694e;
  border-radius: 50% 44% 47% 45%/46% 52% 44% 51%;
  background: #efe1c4;
  color: #4b392d;
  transition: transform 160ms cubic-bezier(.22,1,.36,1), background 160ms;
}
.suspects button:hover:not(:disabled) { background: #f9e7b8; transform: translateY(-3px); }
.suspects button[aria-pressed="true"] { background: #e4bc79; box-shadow: inset 0 0 0 2px #f7e8c7; }
#accuse {
  min-height: 47px;
  padding: 7px 17px;
  border: 3px double #8f433b;
  border-radius: 49% 46% 50% 43%/49% 53% 45% 48%;
  background: #e8d7b8;
  color: #873f37;
  font: 700 16px SimSun, serif;
  letter-spacing: .06em;
  transform: rotate(-4deg);
  transition: transform 160ms, background 160ms;
}
#accuse:hover:not(:disabled) { background: #f4d9cb; transform: rotate(-4deg) translateY(-3px); }
#accuse:disabled { opacity: .57; }
.verdict-help { display: block; margin-top: 8px; color: #675c4c; font-size: 11px; }
.board {
  min-height: 690px;
  overflow: hidden;
  padding: 23px 17px 18px;
  background:
    radial-gradient(circle at 48% 42%, #31483e, transparent 62%),
    var(--board);
  border: 1px solid #7c805f;
  box-shadow: inset 0 0 0 5px #1c2927, inset 0 0 0 6px #a48c5e9c, 2px 8px 16px #080b0954;
}
.board::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid #a9976d59;
  pointer-events: none;
}
.board-head { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.board-head .eyebrow { color: #d9bd83; }
.board-head h2 { font-size: clamp(21px, 2vw, 29px); font-weight: 500; color: #f3e9d3; }
.board-count { white-space: nowrap; color: #dfc48d; border: 1px solid #b09b6e; border-radius: 50%; padding: 8px 6px; font: 12px Consolas, monospace; transform: rotate(8deg); }
.board-instruction { position: relative; z-index: 2; max-width: 580px; margin-top: 4px; color: #cfddca; font-size: 12px; }
.route-map, .ink-trace { position: absolute; left: -6%; top: 90px; width: 112%; height: 540px; pointer-events: none; }
.route-map { opacity: .86; }
.map-walls { fill: none; stroke: #9fb29e; stroke-width: 5; stroke-linecap: square; stroke-linejoin: round; }
.map-doors { fill: none; stroke: #d1b77b; stroke-width: 2; stroke-dasharray: 13 4; }
.map-fixtures { fill: none; stroke: #839d89; stroke-width: 2; }
.map-labels text { fill: #cbd8bf; font: 18px SimSun, serif; paint-order: stroke; stroke: #263630; stroke-width: 5; }
.map-compass { fill: none; stroke: #c7ad73; stroke-width: 1.5; }
.map-compass text { fill: #d9c38b; stroke: none; font: 15px Georgia, serif; }
.ink-trace { z-index: 2; opacity: 0; transition: opacity 300ms; }
.board.linked .ink-trace { opacity: 1; }
.ink-trace path, .ink-trace ellipse { fill: none; stroke: #bd6b58; stroke-width: 5; stroke-linecap: round; }
.ink-trace ellipse { stroke-width: 3; stroke-dasharray: 200 10 30 5; }
.timeline { position: relative; z-index: 3; height: 420px; pointer-events: none; }
.pin {
  position: absolute;
  pointer-events: auto;
  width: 147px;
  min-height: 102px;
  padding: 10px 10px 13px;
  color: #3b3428;
  text-align: left;
  border: 1px solid #9c8360;
  background: linear-gradient(145deg, #e9dab9, #cfbd9b);
  box-shadow: 2px 5px 8px #07100c9c;
  clip-path: polygon(0 0,100% 0,100% 95%,94% 100%,83% 97%,72% 100%,60% 97%,48% 100%,35% 97%,23% 100%,11% 97%,0 100%);
  transition: transform 180ms cubic-bezier(.22,1,.36,1), filter 180ms;
}
.pin::before { content: ""; position: absolute; top: 4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #965646; box-shadow: 1px 2px 2px #2d211b66; }
.pin[data-clue="0"] { top: 45px; left: 2%; transform: rotate(-4deg); }
.pin[data-clue="2"] { top: 215px; left: 34%; transform: rotate(3deg); }
.pin[data-clue="1"] { top: 90px; right: 1%; transform: rotate(4deg); }
.pin[data-clue="0"]:hover, .pin[data-clue="0"]:focus-visible { transform: rotate(-4deg) translateY(-6px); }
.pin[data-clue="2"]:hover, .pin[data-clue="2"]:focus-visible { transform: rotate(3deg) translateY(-6px); }
.pin[data-clue="1"]:hover, .pin[data-clue="1"]:focus-visible { transform: rotate(4deg) translateY(-6px); }
.pin:hover, .pin:focus-visible { filter: brightness(1.12); }
.pin.active { outline: 2px dashed #dcb678; outline-offset: 4px; background: #edcf90; }
.pin.found { background: #bdd1ba; }
.pin.found::after { content: "已核实"; position: absolute; right: 4px; top: 24px; padding: 3px; border: 2px solid #46705b; border-radius: 50%; color: #3c6a52; font: 700 9px SimSun, serif; transform: rotate(-16deg); }
.pin-index { display: block; color: #8d483b; font: 9px Consolas, monospace; }
.pin strong { display: block; margin: 7px 0; font: 17px/1.15 SimSun, serif; }
.pin-detail { display: block; color: #625544; font-size: 11px; overflow-wrap: anywhere; }
.pin-time { display: block; margin-top: 6px; color: #7f4b3b; font: 10px Consolas, monospace; }
.connection { position: relative; z-index: 3; max-width: 370px; margin: auto; padding: 11px 14px; color: #e8dec5; background: #152321e8; border-top: 2px solid #c4a66e; box-shadow: 0 5px 12px #07100c6e; transform: rotate(-1deg); }
.connection .eyebrow { color: #d2b77e; }
.connection strong { display: block; margin: 4px 0; font: 20px SimSun, serif; }
.connection p { color: #c3cbbb; font-size: 11px; }
.connection.linked { border-top-color: #b96653; background: #2e2925ee; }
.board-status { position: relative; z-index: 2; margin-top: 13px; padding-top: 8px; border-top: 1px dashed #a79770; color: #e0c48a; font-size: 12px; }
.console {
  min-height: 550px;
  padding: 23px 18px 26px;
  color: #e9e1ce;
  background:
    repeating-linear-gradient(0deg, transparent 0 28px, #ac9d7540 29px),
    linear-gradient(135deg, #34312b, #292b28 75%);
  border: 1px solid #95825c;
  box-shadow: inset 0 0 0 5px #252825, inset 0 0 0 6px #89734d8f, 3px 8px 17px #060a086c;
}
.console::before { content: "QUERY DESK"; position: absolute; right: 20px; top: 22px; color: #9c906e; font: 9px Consolas, monospace; letter-spacing: .16em; }
.console > .eyebrow, .results-head { color: #d3b67c; }
.mission { min-height: 68px; color: #d8d0ba; font: 15px/1.65 SimSun, serif; }
.mobile-reference { display: none; border-top: 1px solid #7d765f; padding-top: 10px; color: #ddd3bc; font-size: 11px; }
.mobile-reference summary { color: #d7b97f; cursor: pointer; font-weight: 700; }
.mobile-reference div { padding: 3px 0; overflow-wrap: anywhere; }
.mobile-reference code { color: #e9c991; }
.console label { display: block; margin: 15px 0 7px; color: #ccb585; font: 700 11px Consolas, monospace; letter-spacing: .08em; }
.console textarea {
  width: 100%;
  min-height: 155px;
  resize: vertical;
  padding: 12px;
  color: #eadbb8;
  background: #151e1d;
  border: 1px solid #a18759;
  border-left: 4px solid #c1a064;
  box-shadow: inset 0 2px 9px #030807;
  font: 13px/1.6 Consolas, monospace;
}
.console textarea::placeholder { color: #9e9a83; }
.actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 11px; }
.actions .primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 143px;
  min-height: 48px;
  padding: 10px 42px 10px 17px;
  color: #302514;
  background: linear-gradient(145deg, #f1d594, #c8a45e 65%, #a17a40);
  border: 1px solid #654d2f;
  border-radius: 3px 9px 9px 3px;
  box-shadow: inset 0 1px #fff0b5, 0 4px 0 #735634, 0 7px 10px #0a0e0c;
  font: 700 16px SimSun, serif;
  transition: transform 160ms cubic-bezier(.22,1,.36,1), filter 160ms, box-shadow 160ms;
}
.actions .primary::after { content: "→"; position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 34px; height: 100%; border-left: 1px solid #8f6e3a; font: 23px Georgia, serif; }
.actions .primary:hover:not(:disabled) { filter: brightness(1.09); transform: translateY(-2px); box-shadow: inset 0 1px #fff0b5, 0 6px 0 #735634, 0 10px 14px #0a0e0c; }
.actions .primary:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 5px #67451f, 0 1px 0 #735634; }
.actions .primary:disabled { opacity: .65; }
.actions small { color: #aea992; font-size: 11px; }
.feedback { min-height: 40px; margin-top: 14px; color: #e1d8c0; font-size: 12px; }
.feedback.error { color: #f2a18d; }
.feedback.success { color: #a9d4af; }
.results-head { border-top: 1px solid #887958; padding-top: 10px; margin-top: 7px; }
.results { min-height: 55px; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin-top: 8px; font-size: 11px; }
th, td { padding: 5px 7px; border-bottom: 1px solid #756e58; text-align: left; white-space: nowrap; }
th { color: #efd8a4; background: #4e4839; }
footer { margin-top: 16px; color: #b4ad98; font-size: 11px; }
@media (max-width: 1100px) {
  .game-shell { grid-template-columns: minmax(180px, 210px) minmax(300px, 1fr) minmax(260px, 310px); gap: 10px; }
  .pin { width: 126px; }
}
@media (max-width: 830px) {
  .game-shell { grid-template-columns: minmax(190px, 35%) 1fr; }
  .dossier { grid-column: 1; grid-row: 1 / span 2; }
  .board { grid-column: 2; min-height: 620px; }
  .console { grid-column: 2; }
  .timeline { height: 340px; }
  .route-map, .ink-trace { top: 75px; height: 440px; }
  .pin[data-clue="2"] { top: 205px; left: 30%; }
  .mobile-reference { display: block; }
}
@media (max-width: 650px) {
  .topbar { align-items: start; flex-direction: column; gap: 3px; }
  .topbar-meta { text-align: left; font-size: 9px; }
  .game-shell { display: flex; flex-direction: column; }
  .board { order: 1; width: 100%; min-height: 520px; padding: 17px 11px; }
  .console { order: 2; width: 100%; min-height: 0; }
  .dossier { order: 3; width: 100%; min-height: 0; }
  .route-map, .ink-trace { top: 80px; height: 370px; }
  .timeline { height: 290px; }
  .pin { width: 31%; max-width: 150px; min-height: 78px; padding: 7px; }
  .pin[data-clue="0"] { top: 30px; left: 1%; }
  .pin[data-clue="2"] { top: 176px; left: 32%; }
  .pin[data-clue="1"] { top: 55px; right: 1%; }
  .pin strong { margin: 3px 0; font-size: 14px; }
  .pin-detail { font-size: 10px; }
  .pin-time { font-size: 9px; }
  .clue-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}
@media (max-width: 420px) {
  main { padding: 13px 8px; }
  .case-progress strong { font-size: 20px; }
  .board-head h2 { font-size: 19px; }
  .board-instruction { font-size: 11px; }
  .pin-index { font-size: 8px; }
  .pin strong { font-size: 13px; }
  .pin-detail { font-size: 9px; }
  .clue-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}