/*
 * 福尔摩斯在21世纪 · 案件目录与第二案界面
 * Copyright © 2026 Bobby. All rights reserved.
 */

.case-status i { font-style: normal; }
.case-library-open .phase-nav,
.case-two-active > .app-shell > .phase-nav { display: none; }
.case-library-open #reset-game { display: none; }

.case-library {
  min-height: calc(100vh - 116px);
  padding: 72px 6%;
  color: #eef1ea;
  background: #111816;
}
.case-library-heading { max-width: 700px; margin-bottom: 38px; }
.case-library-heading .eyebrow { color: var(--amber); }
.case-library-heading h2 { margin: 0; font: 500 48px Georgia, "SimSun", serif; }
.case-library-heading > p:last-child { max-width: 620px; color: #9eaaa5; line-height: 1.8; }
.case-library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 18px; }
.case-choice {
  position: relative; min-height: 360px; padding: 34px; overflow: hidden;
  color: #f1eee5; background-color: #1a2522; background-size: cover; background-position: center;
  border: 1px solid #40504b; border-radius: 4px; text-align: left;
}
.case-choice::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, rgba(13,20,18,.98) 0%, rgba(13,20,18,.82) 56%, rgba(13,20,18,.28) 100%);
}
.case-choice-one { background-image: url("./assets/apartment.svg"); }
.case-choice-two { background-image: url("./assets/case-002-lab.svg"); }
.case-choice > * { position: relative; z-index: 1; display: block; }
.case-choice-number { color: var(--amber); font: 42px Georgia, serif; }
.case-choice-level { width: max-content; margin: 44px 0 12px; padding: 5px 8px; color: #d2a34e; border: 1px solid #936f31; font-size: 10px; font-weight: 800; }
.case-choice strong { max-width: 470px; font: 500 31px Georgia, "SimSun", serif; }
.case-choice small { max-width: 480px; margin-top: 12px; color: #abb7b2; font-size: 12px; line-height: 1.7; }
.case-choice em { margin-top: 30px; color: #d6a34b; font-size: 12px; font-style: normal; font-weight: 800; }
.case-choice:hover, .case-choice:focus { border-color: var(--amber); transform: translateY(-2px); }

.briefing-actions { display: flex; align-items: center; }
.briefing-actions > * + * { margin-left: 18px; }
.text-button { padding: 9px 2px; color: var(--burgundy); background: transparent; border: 0; border-bottom: 1px solid currentColor; font-size: 11px; font-weight: 800; }
.text-button.light { color: #cfab68; }

.case2-shell { min-height: calc(100vh - 116px); color: var(--ink); background: #ece7da; }
.case2-header {
  min-height: 90px; padding: 20px 5%; display: flex; align-items: center; justify-content: space-between;
  color: #eef1ea; background: #17201e; border-bottom: 1px solid #43534e;
}
.case2-header h2 { margin: 0; font: 500 27px Georgia, "SimSun", serif; }
.case2-header .eyebrow { color: #7fb0a5; }
.case2-nav {
  position: sticky; top: 0; z-index: 8; height: 54px; padding: 0 5%; display: flex;
  overflow-x: auto; background: #ded8ca; border-bottom: 1px solid #c4bcab;
  -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none;
}
.case2-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
.case2-tab {
  min-width: 112px; height: 54px; padding: 0 18px; color: #65706b; background: transparent;
  border: 0; border-bottom: 3px solid transparent; font-size: 12px; font-weight: 800;
}
.case2-tab + .case2-tab { margin-left: 4px; }
.case2-tab span { margin-right: 8px; color: #989385; font: 11px Georgia, serif; }
.case2-tab.active { color: var(--burgundy); border-bottom-color: var(--burgundy); }
.case2-tab.locked { color: #99978f; opacity: .56; }
.case2-content { min-height: calc(100vh - 260px); }

.case2-briefing { min-height: calc(100vh - 260px); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); }
.case2-briefing-copy { padding: 72px 8%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.case2-briefing-copy h3 { max-width: 850px; margin: 0; font: 500 53px/1.18 Georgia, "SimSun", serif; }
.case2-briefing-copy .lead { max-width: 760px; }
.case2-dossier { padding: 36px; color: #dfe5df; background: #17201e; }
.case2-dossier img { width: 100%; height: 360px; display: block; object-fit: cover; border: 1px solid #52645e; }
.case2-dossier dl { margin: 24px 0 0; }
.case2-dossier dl div { padding: 13px 0; display: grid; grid-template-columns: 130px 1fr; border-bottom: 1px solid #35443f; }
.case2-dossier dt { color: #86938e; font-size: 11px; }
.case2-dossier dd { margin: 0; font: 15px Georgia, "SimSun", serif; }

.case2-records, .case2-signal, .case2-reconstruction, .case2-verdict { padding: 42px 5% 64px; }
.case2-section-heading { margin-bottom: 26px; display: flex; align-items: flex-end; justify-content: space-between; }
.case2-section-heading > div { max-width: 680px; }
.case2-section-heading h3 { margin: 0; font: 500 35px Georgia, "SimSun", serif; }
.case2-section-heading > p { max-width: 520px; margin: 0 0 3px 32px; color: #65706b; font-size: 12px; line-height: 1.7; }
.case2-section-heading.compact { margin-top: 32px; }
.case2-section-heading.compact h3 { font-size: 27px; }
.case2-record-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .45fr); grid-gap: 14px; }
.case2-scene { position: relative; height: 0; padding-top: 62.5%; overflow: hidden; background: #101715; border: 1px solid #5a655f; }
.case2-scene > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.case2-hotspot {
  position: absolute; z-index: 2; width: 30px; height: 30px; padding: 0; transform: translate(-50%, -50%);
  color: #f2d18f; background: rgba(15,23,21,.82); border: 1px solid #d0a04a; border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(208,160,74,.12); font: 700 10px Georgia, serif;
}
.case2-hotspot::before, .case2-hotspot::after { content: ""; position: absolute; background: #d0a04a; opacity: .55; }
.case2-hotspot::before { left: -7px; top: 14px; width: 42px; height: 1px; }
.case2-hotspot::after { left: 14px; top: -7px; width: 1px; height: 42px; }
.case2-hotspot.seen { color: #10201c; background: #79a99d; border-color: #b9d5cd; box-shadow: none; }
.case2-record-index { max-height: 660px; padding: 12px; overflow-y: auto; background: #dcd5c7; border: 1px solid #c3baa8; -webkit-overflow-scrolling: touch; }
.case2-progress { padding: 8px 8px 16px; color: #68716d; }
.case2-progress strong { color: var(--burgundy); font: 28px Georgia, serif; }
.case2-record-card { width: 100%; min-height: 58px; padding: 9px; display: grid; grid-template-columns: 24px 1fr; align-items: center; color: #303a37; background: rgba(255,255,255,.32); border: 0; border-bottom: 1px solid #c5bcaa; text-align: left; }
.case2-record-card > span { grid-row: 1 / 3; width: 19px; height: 19px; display: grid; place-items: center; color: #9b6e29; border: 1px solid #a88652; border-radius: 50%; }
.case2-record-card strong { font: 500 13px Georgia, "SimSun", serif; }
.case2-record-card small { color: #7d827e; font-size: 9px; }
.case2-record-card.seen > span { color: #fff; background: var(--teal); border-color: var(--teal); }
.case2-next { margin-top: 22px; text-align: right; }
.case2-packet { margin-top: 24px; padding: 24px; background: #f5f1e7; border: 1px solid #c3baa8; border-top: 4px solid #936f31; }
.case2-packet .case2-section-heading { margin-bottom: 18px; }
.case2-packet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 7px; }
.case2-packet-grid label { min-height: 58px; padding: 10px; display: grid; grid-template-columns: 24px 1fr; align-items: center; color: #39423f; background: #e7e0d2; border: 1px solid #ccc2af; }
.case2-packet-grid label.unread { opacity: .52; }
.case2-packet-grid input { width: 17px; height: 17px; accent-color: var(--teal); }
.case2-packet-grid span { display: flex; flex-direction: column; }
.case2-packet-grid strong { font: 500 13px Georgia, "SimSun", serif; }
.case2-packet-grid small { margin-top: 3px; color: #7a817c; font-size: 9px; }
.case2-packet-submit { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; }
.case2-packet-submit > span { color: #7a3b42; font: 700 12px Georgia, serif; }
.case2-packet-submit .case2-check { margin-top: 0; }
.case2-solved-banner.packet-solved { margin-top: 24px; grid-template-columns: 190px 1fr auto; }

.case2-puzzle-panel { padding: 28px; background: #f8f5ec; border: 1px solid #c5bdad; border-top: 4px solid var(--teal); }
.case2-frame-compare { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); align-items: center; }
.case2-frame { position: relative; height: 240px; overflow: hidden; color: #dbe4df; background: linear-gradient(#233c38 0 58%, #101817 58%); border: 1px solid #50635d; }
.case2-frame::before { content: ""; position: absolute; left: 0; right: 0; top: 38%; height: 42px; background: #b1843d; opacity: .85; }
.case2-frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 32px; height: 1px; background: rgba(255,255,255,.2); box-shadow: 0 -48px rgba(255,255,255,.08), 0 -96px rgba(255,255,255,.06); }
.case2-frame > span { position: absolute; left: 12px; top: 10px; z-index: 2; font-size: 10px; }
.case2-frame > b { position: absolute; right: 12px; top: 10px; z-index: 2; color: #e5ba69; font: 13px Georgia, serif; }
.case2-frame > i { position: absolute; right: 14px; top: 104px; z-index: 2; color: #18201e; font: 800 11px "Segoe UI", sans-serif; }
.frame-person { position: absolute; left: 45%; bottom: 28px; z-index: 2; width: 58px; height: 118px; background: #0a0f0e; border-radius: 45% 45% 10% 10%; }
.frame-person::before { content: ""; position: absolute; left: 10px; top: -28px; width: 38px; height: 42px; background: #0a0f0e; border-radius: 50%; }
.frame-person.fallen { transform: rotate(68deg) translate(33px, -23px); transform-origin: bottom; }
.case2-versus { color: #8b8579; font: 700 11px Georgia, serif; text-align: center; }
.case2-answer-grid { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr); grid-gap: 18px; }
.case2-answer-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.case2-answer-grid fieldset { margin: 0; padding: 16px; border: 1px solid #c5bdad; }
.case2-answer-grid legend, .case2-select-label > span { color: #7a3b42; font-size: 10px; font-weight: 800; }
.case2-answer-grid fieldset label { padding: 5px 0; display: block; color: #48514e; font-size: 11px; line-height: 1.5; }
.case2-select-label { display: flex; flex-direction: column; justify-content: center; }
.case2-select-label select, .final-chain select { width: 100%; min-width: 0; height: 44px; margin-top: 8px; padding: 0 9px; color: #26302d; background: #fffdf7; border: 1px solid #bcb2a0; }
.case2-check { margin-top: 18px; padding: 11px 16px; color: #fff; background: #18201e; border: 0; border-radius: 3px; font-size: 11px; font-weight: 800; }
.case2-solved-banner { padding: 20px; display: grid; grid-template-columns: 190px 1fr; align-items: center; color: #dce9e3; background: #24463f; border-left: 4px solid #78a99c; }
.case2-solved-banner.second { margin-top: 26px; background: #27332f; border-left-color: var(--amber); }
.case2-solved-banner strong { font: 500 18px Georgia, "SimSun", serif; }
.case2-solved-banner span { color: #bfcfc8; font-size: 12px; line-height: 1.7; }
.case2-solved-banner .text-button { justify-self: end; margin-top: 8px; }
.case2-locked-panel { min-height: 140px; margin-top: 22px; padding: 26px; display: flex; align-items: center; color: #8a8d88; background: #dcd6ca; border: 1px dashed #b5ad9e; }
.case2-locked-panel span { margin-right: 20px; color: #aaa395; font: 42px Georgia, serif; }
.case2-locked-panel p { margin: 0; font-size: 12px; }
.audio-panel { margin-top: 24px; border-top-color: var(--amber); }
.wave-track { margin: 12px 0; padding: 12px; display: grid; grid-template-columns: 145px minmax(0, 1fr) 90px; align-items: center; color: #cbd7d1; background: #17201e; }
.wave-track > span { font-size: 10px; }
.wave-track > b { color: #80aea3; font-size: 10px; text-align: right; }
.wave-track.meeting > b { color: #cf6b74; }
.wave-bars { height: 72px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wave-bars i { width: 4px; min-height: 4px; margin-right: 3px; background: #75a89c; }
.wave-track.meeting .wave-bars i { background: #b85a64; }

.case2-timeline { padding: 20px; background: #f8f5ec; border: 1px solid #c5bdad; }
.case2-timeline > label { min-height: 58px; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; border-bottom: 1px solid #ddd5c5; }
.case2-timeline select { width: 132px; height: 36px; color: #25302c; background: #fffdf7; border: 1px solid #bcb2a0; }
.case2-timeline label span { color: #424b48; font-size: 12px; }
.case2-timeline label span strong, .case2-timeline label span small { display: block; }
.case2-timeline label span small { margin-top: 4px; color: #7b817d; font-size: 9px; }
.case2-access { margin-top: 24px; padding-top: 26px; border-top: 1px solid #c2b9a8; }
.access-table { background: #f8f5ec; border: 1px solid #c3baa9; }
.access-head, .access-row { display: grid; grid-template-columns: minmax(280px, 1fr) repeat(3, 112px); }
.access-head { min-height: 42px; align-items: center; color: #dce4df; background: #202b28; font-size: 9px; text-align: center; }
.access-head span { padding-left: 14px; text-align: left; }
.access-row { min-height: 88px; border-bottom: 1px solid #d2cabb; }
.access-row > span { padding: 16px; display: flex; flex-direction: column; justify-content: center; }
.access-row strong { font: 500 16px Georgia, "SimSun", serif; }
.access-row small { margin-top: 3px; color: #7e847f; }
.access-row em { margin-top: 8px; color: #5f6864; font-size: 10px; font-style: normal; line-height: 1.5; }
.access-row label { display: grid; place-items: center; border-left: 1px solid #ded7c9; }
.access-row label i { color: #88877f; font-size: 9px; font-style: normal; }
.access-row input { width: 18px; height: 18px; accent-color: var(--teal); }
.access-row .access-option { cursor: pointer; }
.access-row .access-option.selected { background: #dbe8e2; box-shadow: inset 0 -3px var(--teal); }
.access-row .access-option.selected i { color: #315f56; font-weight: 800; }

.final-chain { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-gap: 12px; }
.final-chain label { min-height: 104px; padding: 16px; color: #e5e8e2; background: #202b28; border-left: 3px solid #596f68; }
.final-chain label > span { display: block; color: #c9a15b; font: 13px Georgia, "SimSun", serif; }
.final-chain select { color: #dfe6e1; background: #17201e; border-color: #50615c; }
.case2-submit { margin-top: 22px; }
.case2-solved-verdict { min-height: calc(100vh - 260px); padding: 64px 8%; color: #edf0ea; background: #17201e; }
.case2-solved-verdict > h3 { max-width: 900px; margin: 0 0 24px; font: 500 44px Georgia, "SimSun", serif; }
.case2-solved-verdict > p { max-width: 900px; color: #b9c5bf; line-height: 1.8; }
.case2-solved-verdict blockquote { max-width: 800px; color: #d8c79e; border-left-color: var(--amber); }
.case2-stats { max-width: 900px; margin: 28px 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 8px; }
.case2-stats div { min-height: 84px; padding: 14px; background: #222f2b; border: 1px solid #3d504a; }
.case2-stats strong { display: block; color: var(--amber); font: 26px Georgia, serif; }
.case2-stats span { color: #92a19a; font-size: 9px; }
.case2-proof-chain { max-width: 1100px; margin: 24px 0 34px; display: flex; align-items: center; flex-wrap: wrap; }
.case2-proof-chain span { margin: 4px; padding: 8px 10px; color: #d9e5df; background: #293a35; border: 1px solid #486159; font-size: 10px; }
.case2-proof-chain i { color: var(--amber); font-style: normal; }

@media (max-width: 900px) {
  .case-library { padding: 48px 24px; }
  .case-library-grid, .case2-briefing { grid-template-columns: 1fr; }
  .case2-dossier { padding: 24px; }
  .case2-record-layout { grid-template-columns: 1fr; }
  .case2-record-index { max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-gap: 4px; }
  .case2-progress { grid-column: 1 / -1; }
  .case2-section-heading { display: block; }
  .case2-section-heading > p { margin: 12px 0 0; }
  .access-head, .access-row { grid-template-columns: minmax(220px, 1fr) repeat(3, 84px); }
}

@media (max-width: 600px) {
  .case-library { min-height: calc(100vh - 108px); padding: 38px 16px; }
  .case-library-heading h2 { font-size: 34px; }
  .case-choice { min-height: 300px; padding: 24px; }
  .case-choice-level { margin-top: 34px; }
  .case-choice strong { font-size: 25px; }
  .briefing-actions { align-items: flex-start; flex-direction: column; }
  .briefing-actions > * + * { margin: 12px 0 0; }
  .case2-shell { min-height: calc(100vh - 108px); }
  .case2-header { min-height: 76px; padding: 14px 16px; }
  .case2-header h2 { font-size: 20px; }
  .case2-nav { padding: 0; overflow-x: hidden; }
  .case2-tab { flex: 1; min-width: 0; padding: 0 4px; font-size: 10px; }
  .case2-tab span { display: block; margin: 0; font-size: 9px; }
  .case2-content { min-height: calc(100vh - 238px); }
  .case2-briefing { min-height: 0; }
  .case2-briefing-copy { padding: 48px 20px; }
  .case2-briefing-copy h3 { font-size: 34px; }
  .case2-dossier img { height: 230px; }
  .case2-dossier dl div { grid-template-columns: 105px 1fr; }
  .case2-records, .case2-signal, .case2-reconstruction, .case2-verdict { padding: 30px 14px 50px; }
  .case2-section-heading h3 { font-size: 28px; }
  .case2-record-index { grid-template-columns: 1fr; }
  .case2-progress { grid-column: auto; }
  .case2-packet { padding: 18px; }
  .case2-packet-grid { grid-template-columns: 1fr; }
  .case2-packet-submit { align-items: flex-start; flex-direction: column; }
  .case2-packet-submit .case2-check { margin-top: 12px; }
  .case2-solved-banner.packet-solved { grid-template-columns: 1fr; }
  .case2-frame-compare { grid-template-columns: 1fr; }
  .case2-versus { padding: 8px 0; }
  .case2-frame { height: 190px; }
  .case2-answer-grid, .case2-answer-grid.two { grid-template-columns: 1fr; }
  .case2-solved-banner { grid-template-columns: 1fr; }
  .case2-solved-banner span { margin-top: 7px; }
  .wave-track { grid-template-columns: 1fr; }
  .wave-track > b { text-align: left; }
  .wave-bars { justify-content: flex-start; }
  .case2-timeline > label { grid-template-columns: 118px 1fr; }
  .case2-timeline select { width: 112px; height: 44px; }
  .case2-hotspot { width: 40px; height: 40px; }
  .case2-packet-grid input, .case2-answer-grid input { width: 22px; height: 22px; }
  .access-table { overflow: visible; }
  .access-head { display: none; }
  .access-row { min-width: 0; min-height: 0; margin-bottom: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #c8beac; }
  .access-row:last-child { margin-bottom: 0; }
  .access-row > span { grid-column: 1 / -1; min-height: 82px; padding: 16px 18px; background: #eef0e9; border-bottom: 1px solid #cec6b7; }
  .access-row strong { font-size: 18px; }
  .access-row small { font-size: 10px; }
  .access-row label { min-width: 0; min-height: 76px; padding: 10px 4px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid #ded7c9; }
  .access-row label:nth-child(2) { border-left: 0; }
  .access-row input { width: 23px; height: 23px; margin: 0 0 8px; flex: 0 0 auto; }
  .access-row label i { color: #59625e; font-size: 10px; font-weight: 700; text-align: center; }
  .final-chain { grid-template-columns: 1fr; }
  .case2-solved-verdict { padding: 42px 20px; }
  .case2-solved-verdict > h3 { font-size: 32px; }
  .case2-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .case-choice:hover, .case-choice:focus { transform: none; }
}