/*
 * 福尔摩斯在21世纪 · 第三案界面
 * Copyright © 2026 Bobby. All rights reserved.
 */

.case-three-active > .app-shell > .phase-nav { display: none; }
.case-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-choice-three { background-image: url("./assets/case-003-shop.svg"); }

.case3-shell { min-height: calc(100vh - 116px); color: var(--ink); background: #e8e4d8; }
.case3-header { min-height: 90px; padding: 20px 5%; display: flex; align-items: center; justify-content: space-between; color: #edf0e8; background: #201c19; border-bottom: 1px solid #665444; }
.case3-header h2 { margin: 0; font: 500 27px Georgia, "SimSun", serif; }
.case3-header .eyebrow { color: #cf9348; }
.case3-nav { position: sticky; top: 0; z-index: 8; height: 54px; padding: 0 5%; display: flex; overflow-x: auto; color: #615d55; background: #d8d1c2; border-bottom: 1px solid #bfb5a3; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; }
.case3-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
.case3-tab { min-width: 104px; height: 54px; padding: 0 15px; color: #696b65; background: transparent; border: 0; border-bottom: 3px solid transparent; font-size: 12px; font-weight: 800; }
.case3-tab + .case3-tab { margin-left: 3px; }
.case3-tab span { margin-right: 7px; color: #9c8f7b; font: 11px Georgia, serif; }
.case3-tab.active { color: #8a343d; border-bottom-color: #8a343d; }
.case3-tab.locked { opacity: .5; }
.case3-content { min-height: calc(100vh - 260px); }

.case3-briefing { min-height: calc(100vh - 260px); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); }
.case3-briefing-copy { padding: 70px 8%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.case3-briefing-copy h3 { max-width: 880px; margin: 0; font: 500 50px/1.2 Georgia, "SimSun", serif; }
.case3-briefing-copy .lead { max-width: 760px; }
.case3-dossier { padding: 36px; color: #e4e3da; background: #201c19; }
.case3-dossier img { width: 100%; height: 360px; display: block; object-fit: cover; border: 1px solid #6c5947; }
.case3-dossier dl { margin: 24px 0 0; }
.case3-dossier dl div { padding: 13px 0; display: grid; grid-template-columns: 130px 1fr; border-bottom: 1px solid #4c4036; }
.case3-dossier dt { color: #978b7d; font-size: 11px; }
.case3-dossier dd { margin: 0; font: 15px Georgia, "SimSun", serif; }

.case3-evidence, .case3-theatre, .case3-route, .case3-operation, .case3-verdict { padding: 42px 5% 64px; }
.case3-section-heading { margin-bottom: 26px; display: flex; align-items: flex-end; justify-content: space-between; }
.case3-section-heading > div { max-width: 690px; }
.case3-section-heading h3 { margin: 0; font: 500 35px Georgia, "SimSun", serif; }
.case3-section-heading > p { max-width: 530px; margin: 0 0 3px 32px; color: #6b6962; font-size: 12px; line-height: 1.7; }
.case3-section-heading.compact { margin-top: 30px; }
.case3-section-heading.compact h3 { font-size: 27px; }

.case3-evidence-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(285px, .45fr); grid-gap: 14px; }
.case3-scene { position: relative; height: 0; padding-top: 62.5%; overflow: hidden; background: #101513; border: 1px solid #665548; }
.case3-scene > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.case3-hotspot { position: absolute; z-index: 2; width: 30px; height: 30px; padding: 0; transform: translate(-50%, -50%); color: #f0cc88; background: rgba(29,24,21,.86); border: 1px solid #cc954a; border-radius: 50%; box-shadow: 0 0 0 4px rgba(204,149,74,.13); font: 700 10px Georgia, serif; }
.case3-hotspot::before, .case3-hotspot::after { content: ""; position: absolute; background: #cc954a; opacity: .55; }
.case3-hotspot::before { left: -7px; top: 14px; width: 42px; height: 1px; }
.case3-hotspot::after { left: 14px; top: -7px; width: 1px; height: 42px; }
.case3-hotspot.seen { color: #f7f2e7; background: #8a343d; border-color: #c8737c; box-shadow: none; }
.case3-record-index { max-height: 660px; padding: 12px; overflow-y: auto; background: #d8d1c3; border: 1px solid #bfb4a1; -webkit-overflow-scrolling: touch; }
.case3-progress { padding: 8px 8px 16px; color: #716c63; }
.case3-progress strong { color: #8a343d; font: 28px Georgia, serif; }
.case3-record-card { width: 100%; min-height: 55px; padding: 8px; display: grid; grid-template-columns: 24px 1fr; align-items: center; color: #373633; background: rgba(255,255,255,.28); border: 0; border-bottom: 1px solid #c1b6a4; text-align: left; }
.case3-record-card > span { grid-row: 1 / 3; width: 19px; height: 19px; display: grid; place-items: center; color: #9b6c31; border: 1px solid #a98657; border-radius: 50%; }
.case3-record-card strong { font: 500 13px Georgia, "SimSun", serif; }
.case3-record-card small { color: #7b7871; font-size: 9px; }
.case3-record-card.seen > span { color: #fff; background: #8a343d; border-color: #8a343d; }
.case3-next { margin-top: 22px; text-align: right; }

.case3-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 8px; }
.case3-proof-grid label { min-height: 66px; padding: 11px; display: grid; grid-template-columns: 24px 1fr; align-items: center; color: #373934; background: #f7f3e9; border: 1px solid #c6bcaa; }
.case3-proof-grid label.unread { opacity: .48; }
.case3-proof-grid input { width: 17px; height: 17px; accent-color: #8a343d; }
.case3-proof-grid span { display: flex; flex-direction: column; }
.case3-proof-grid strong { font: 500 13px Georgia, "SimSun", serif; }
.case3-proof-grid small { margin-top: 4px; color: #7d7b74; font-size: 9px; }
.case3-select-label { max-width: 620px; margin-top: 18px; display: flex; flex-direction: column; color: #7a3b42; font-size: 10px; font-weight: 800; }
.case3-select-label select, .case3-trap-grid select, .case3-final-chain select, .case3-equation select { width: 100%; min-width: 0; height: 44px; margin-top: 8px; padding: 0 9px; color: #2d302d; background: #fffdf7; border: 1px solid #bcb09c; }
.case3-check { margin-top: 18px; padding: 11px 16px; color: #fff; background: #211d1a; border: 0; border-radius: 3px; font-size: 11px; font-weight: 800; }
.case3-solved-banner { padding: 20px; display: grid; grid-template-columns: 190px 1fr auto; align-items: center; color: #eee9de; background: #49362b; border-left: 4px solid #c58e47; }
.case3-solved-banner.second { margin-top: 26px; background: #382b26; border-left-color: #9e4650; }
.case3-solved-banner strong { font: 500 18px Georgia, "SimSun", serif; }
.case3-solved-banner span { color: #d0c5b4; font-size: 12px; line-height: 1.7; }
.case3-solved-banner .text-button { justify-self: end; margin-left: 18px; }
.case3-locked-panel { min-height: 140px; margin-top: 22px; padding: 26px; display: flex; align-items: center; color: #88847d; background: #d8d2c7; border: 1px dashed #b3aa9b; }
.case3-locked-panel span { margin-right: 20px; color: #aaa194; font: 42px Georgia, serif; }
.case3-locked-panel p { margin: 0; font-size: 12px; }

.case3-route-map { position: relative; height: 0; padding-top: 62.5%; overflow: hidden; background: #151310; border: 1px solid #625142; }
.case3-route-map > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: .58; filter: saturate(.72) brightness(.74); }
.route-segment { position: absolute; z-index: 2; height: 22px; padding: 0; transform-origin: left center; color: #f3d8a3; background: rgba(28,24,21,.9); border: 2px dashed #c28e49; border-radius: 0; }
.route-segment b { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; display: grid; place-items: center; transform: translate(-50%, -50%); color: #f3d8a3; background: #27201b; border: 1px solid #c28e49; border-radius: 50%; font: 700 9px Georgia, serif; }
.route-segment.selected { color: #fff; background: #8a343d; border-style: solid; border-color: #efb665; box-shadow: 0 0 0 4px rgba(197,142,71,.18); }
.route-segment.selected b { color: #fff; background: #8a343d; border-color: #efb665; }
.case3-route-legend { padding: 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 6px; background: #d4ccbd; border: 1px solid #b8ad99; border-top: 0; }
.case3-route-legend button { min-height: 40px; padding: 7px; display: grid; grid-template-columns: 24px 1fr; align-items: center; color: #48443e; background: rgba(255,255,255,.32); border: 1px solid #bfb3a0; text-align: left; }
.case3-route-legend button b { width: 19px; height: 19px; display: grid; place-items: center; color: #8f6635; border: 1px solid #a57b45; border-radius: 50%; font: 700 9px Georgia, serif; }
.case3-route-legend button span { font-size: 10px; }
.case3-route-legend button.selected { color: #fff; background: #78363d; border-color: #9d5159; }
.case3-route-legend button.selected b { color: #fff; border-color: #d49b55; }
.case3-map-actions { padding: 14px 0; display: flex; align-items: center; justify-content: space-between; }
.case3-map-actions span { color: #7b3a42; font: 700 12px Georgia, serif; }
.case3-map-actions .case3-check { margin-top: 0; }

.case3-progress-puzzle, .case3-window-puzzle, .case3-trap { margin-top: 24px; padding: 26px; background: #f7f3e9; border: 1px solid #c5baa7; border-top: 4px solid #8a343d; }
.case3-equation { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr; align-items: end; }
.case3-equation label { display: flex; flex-direction: column; color: #6f3a3f; font-size: 10px; font-weight: 800; }
.case3-equation b { padding-bottom: 13px; color: #a27b42; font: 24px Georgia, serif; text-align: center; }
.case3-select-label.final-location { max-width: none; }

.case3-window-records { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 7px; }
.case3-window-records label { min-height: 50px; padding: 10px; display: flex; align-items: center; color: #3f403c; background: #e5ded0; border: 1px solid #c7bcaa; font-size: 11px; }
.case3-window-records label.unread { opacity: .5; }
.case3-window-records input { margin-right: 9px; accent-color: #8a343d; }
.case3-window-options { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 7px; }
.case3-window-options label { min-height: 96px; padding: 14px; display: flex; flex-direction: column; color: #dad9d2; background: #292622; border: 1px solid #5a5147; }
.case3-window-options label.selected { border-color: #d59a4d; box-shadow: inset 0 -3px #9a3c46; }
.case3-window-options input { align-self: flex-start; accent-color: #c68d47; }
.case3-window-options strong { margin-top: 8px; font: 17px Georgia, serif; }
.case3-window-options small { margin-top: 5px; color: #a9a197; font-size: 9px; }

.case3-trap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 10px; }
.case3-trap-grid > label { min-height: 92px; padding: 14px; color: #dfdbd1; background: #292521; border-left: 3px solid #755c45; font: 13px Georgia, "SimSun", serif; }
.case3-trap-grid > label > span { display: block; color: #d1a25d; }
.case3-trap-grid select { color: #e7e2d8; background: #1d1a18; border-color: #5d5043; }

.case3-final-chain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 11px; }
.case3-final-chain label { min-height: 104px; padding: 16px; color: #e5dfd4; background: #29241f; border-left: 3px solid #795f47; }
.case3-final-chain label > span { display: block; color: #d1a15a; font: 13px Georgia, "SimSun", serif; }
.case3-final-chain select { color: #e8e3d8; background: #1c1917; border-color: #5c4d40; }
.case3-submit { margin-top: 22px; }

.case3-solved-verdict { min-height: calc(100vh - 260px); padding: 62px 8%; color: #eeeae1; background: #201c19; }
.case3-solved-verdict > h3 { max-width: 900px; margin: 0 0 24px; font: 500 44px Georgia, "SimSun", serif; }
.case3-solved-verdict > p { max-width: 900px; color: #c8bfb1; line-height: 1.8; }
.case3-solved-verdict blockquote { max-width: 820px; color: #dfc894; border-left-color: #c58f47; }
.case3-stats { max-width: 900px; margin: 28px 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 8px; }
.case3-stats div { min-height: 84px; padding: 14px; background: #302923; border: 1px solid #584b40; }
.case3-stats strong { display: block; color: #d7a553; font: 26px Georgia, serif; }
.case3-stats span { color: #a99e91; font-size: 9px; }
.case3-proof-chain { max-width: 1100px; margin: 24px 0 28px; display: flex; align-items: center; flex-wrap: wrap; }
.case3-proof-chain span { margin: 4px; padding: 8px 10px; color: #eadfce; background: #342c26; border: 1px solid #604f40; font-size: 10px; }
.case3-proof-chain i { color: #d7a553; font-style: normal; }
.case3-afterword { padding: 18px; border: 1px solid #604b3c; border-left: 4px solid #8a343d; }

@media (max-width: 1100px) {
  .case-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case3-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .case3-briefing, .case3-evidence-layout { grid-template-columns: 1fr; }
  .case3-dossier { padding: 24px; }
  .case3-record-index { max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 4px; }
  .case3-progress { grid-column: 1 / -1; }
  .case3-section-heading { display: block; }
  .case3-section-heading > p { margin: 12px 0 0; }
  .case3-window-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .case-library-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .case3-shell { min-height: calc(100vh - 108px); }
  .case3-header { min-height: 76px; padding: 14px 16px; }
  .case3-header h2 { font-size: 20px; }
  .case3-nav { padding: 0; overflow-x: hidden; }
  .case3-tab { flex: 1; min-width: 0; padding: 0 2px; font-size: 10px; }
  .case3-tab span { display: block; margin: 0; font-size: 9px; }
  .case3-content { min-height: calc(100vh - 238px); }
  .case3-briefing { min-height: 0; }
  .case3-briefing-copy { padding: 46px 20px; }
  .case3-briefing-copy h3 { font-size: 33px; }
  .case3-dossier img { height: 230px; }
  .case3-dossier dl div { grid-template-columns: 105px 1fr; }
  .case3-evidence, .case3-theatre, .case3-route, .case3-operation, .case3-verdict { padding: 30px 14px 50px; }
  .case3-section-heading h3 { font-size: 28px; }
  .case3-record-index, .case3-proof-grid, .case3-window-records, .case3-trap-grid, .case3-final-chain { grid-template-columns: 1fr; }
  .case3-progress { grid-column: auto; }
  .case3-solved-banner { grid-template-columns: 1fr; }
  .case3-solved-banner span { margin-top: 7px; }
  .case3-solved-banner .text-button { justify-self: start; margin: 12px 0 0; }
  .case3-route-map { padding-top: 62.5%; }
  .case3-hotspot { width: 40px; height: 40px; }
  .route-segment { height: 34px; margin-top: -6px; }
  .case3-route-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case3-route-legend button { min-height: 48px; }
  .case3-proof-grid input, .case3-window-records input, .case3-window-options input { width: 22px; height: 22px; flex: 0 0 auto; }
  .case3-map-actions { align-items: flex-start; flex-direction: column; }
  .case3-map-actions .case3-check { margin-top: 12px; }
  .case3-equation { grid-template-columns: 1fr; }
  .case3-equation b { padding: 5px; }
  .case3-window-options { grid-template-columns: 1fr; }
  .case3-solved-verdict { padding: 42px 20px; }
  .case3-solved-verdict > h3 { font-size: 31px; }
  .case3-stats { grid-template-columns: repeat(2, 1fr); }
}

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