:root {
  --bg: #151514;
  --bg-2: #20201d;
  --panel: #2a2925;
  --panel-2: #33312b;
  --ink: #f2ead7;
  --muted: #b9ad93;
  --line: #5a503f;
  --accent: #d8b45d;
  --accent-2: #8cc0b7;
  --danger: #d45c52;
  --ok: #8fca75;
  --shadow: rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.02) 1px, transparent 1px),
    var(--bg);
  background-size: 32px 32px;
  color: var(--ink);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

button,
select {
  font: inherit;
}

button {
  border: 1px solid #b8944f;
  background: #c99a3c;
  color: #191611;
  border-radius: 6px;
  padding: 0.58rem 0.78rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 0 #765d2e;
}

button:hover {
  filter: brightness(1.08);
}

button:disabled,
.locked button {
  cursor: not-allowed;
  opacity: 0.55;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: rgba(22, 21, 19, 0.94);
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 8px 24px var(--shadow);
}

.eyebrow {
  margin: 0 0 0.2rem;
  color: var(--accent-2);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0.15rem;
  font-size: clamp(1.65rem, 3vw, 2.8rem);
  line-height: 1;
}

h2 {
  margin: 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 0.35rem;
  font-size: 1rem;
  line-height: 1.15;
}

.case-name,
.panel-note,
.difficulty {
  color: var(--muted);
}

.case-name {
  margin: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.difficulty {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 0.7rem;
  background: #24231f;
  white-space: nowrap;
}

.dashboard {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(620px, 1.8fr) minmax(290px, 0.85fr);
  gap: 0.85rem;
  padding: 0.85rem;
  max-width: 1680px;
  margin: 0 auto;
  align-items: start;
}

.board-column {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  min-width: 0;
}

.panel {
  background: linear-gradient(180deg, var(--panel), #23221f);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid rgba(216, 180, 93, 0.22);
}

.summary-panel,
.suspects-panel,
.rooms-panel,
.timeline-panel,
.evidence-panel,
.notes-panel,
.accusation-panel,
.resolution-panel {
  grid-column: auto;
  grid-row: auto;
}

.case-summary {
  display: grid;
  gap: 0.75rem;
}

.summary-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.fact {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.14);
  border-radius: 6px;
  padding: 0.65rem;
}

.fact span,
.card-label {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.fact strong {
  display: block;
  margin-top: 0.2rem;
}

.suspects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.95rem;
}

.suspect-card,
.room-card,
.evidence-card,
.timeline-slot {
  border: 1px solid rgba(255,255,255,0.09);
  background: var(--panel-2);
  border-radius: 8px;
}

.suspect-card {
  display: grid;
  grid-template-columns: 102px 1fr;
  gap: 0.95rem;
  padding: 0.9rem;
  position: relative;
  align-items: start;
  background:
    linear-gradient(145deg, rgba(238, 218, 168, 0.035), transparent 46%),
    var(--panel-2);
  box-shadow: inset 0 1px rgba(255,255,255,0.04), 0 12px 24px rgba(0,0,0,0.12);
}

.suspect-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(216, 180, 93, 0.72), rgba(140, 192, 183, 0.32));
  border-radius: 8px 0 0 8px;
  pointer-events: none;
}

.suspect-card.is-victim {
  border-color: rgba(212, 92, 82, 0.6);
}

.victim-ribbon {
  color: #ffd7d2;
  background: rgba(212, 92, 82, 0.25);
  border: 1px solid rgba(212, 92, 82, 0.55);
  border-radius: 999px;
  padding: 0.18rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 900;
  width: fit-content;
}

.suspect-body {
  min-width: 0;
}

.suspect-title-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.suspect-title-row h3 {
  margin-bottom: 0.12rem;
}

.suspect-body p,
.room-card p,
.evidence-card p,
.resolution-panel p,
.modal p {
  color: var(--muted);
  line-height: 1.38;
}

.suspect-body p {
  margin-bottom: 0.5rem;
  font-size: 0.84rem;
}

.last-location {
  display: grid;
  gap: 0.12rem;
  border-left: 3px solid rgba(216, 180, 93, 0.55);
  padding-left: 0.45rem;
  margin: 0.4rem 0;
}

.last-location span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.last-location strong {
  font-size: 0.88rem;
}

.pressure-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.pressure-readout span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.pressure-readout strong {
  color: var(--accent);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
  margin: 0.5rem 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  border-radius: 999px;
  padding: 0.16rem 0.48rem;
  background: rgba(140, 192, 183, 0.13);
  color: #c5e7e1;
  border: 1px solid rgba(140, 192, 183, 0.28);
  font-size: 0.7rem;
  font-weight: 700;
}

.tag.hot {
  color: #ffd9a7;
  background: rgba(216, 180, 93, 0.14);
  border-color: rgba(216, 180, 93, 0.34);
}

.tag.is-found {
  color: #d8f4c8;
  background: rgba(143, 202, 117, 0.12);
  border-color: rgba(143, 202, 117, 0.38);
}

.meter {
  height: 0.45rem;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.45rem 0 0.6rem;
}

.meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--danger));
}

.pressure-meter span {
  background: linear-gradient(90deg, #8cc0b7, #d8b45d, #d45c52);
}

.face {
  --skin: #c58d62;
  --hair: #31251d;
  --eye: #1d2024;
  --mouth: #6c2b2f;
  --collar: #252a2d;
  --head-w: 52px;
  --head-h: 58px;
  --head-left: 9px;
  --head-top: 8px;
  --head-radius: 12px 12px 16px 16px;
  --eye-left: 23px;
  --eye-right: 23px;
  --eye-top: 33px;
  --eye-w: 8px;
  --eye-h: 8px;
  --left-lens-x: 27px;
  --right-lens-x: 55px;
  --left-lens-left: 19px;
  --right-lens-left: 47px;
  --lens-top: 32px;
  --lens-y: 39px;
  --lens-w: 16px;
  --lens-h: 14px;
  --bridge-w: 10px;
  --monocle-size: 16px;
  --monocle-left: 47px;
  --monocle-top: 31px;
  --brow-left: 18px;
  --brow-right: 18px;
  --brow-top: 27px;
  --brow-w: 14px;
  --brow-h: 4px;
  --left-brow-left: 20px;
  --right-brow-left: 48px;
  --nose-left: 33px;
  --nose-top: 42px;
  --nose-w: 6px;
  --nose-h: 10px;
  --mouth-left: 27px;
  --mouth-top: 57px;
  --mouth-w: 18px;
  --neck-w: 15px;
  --neck-left: 27px;
  --shoulder-w: 56px;
  --shoulder-left: 7px;
  --shoulder-top: 65px;
  --ear-top: 31px;
  --gaze-x: 0px;
  --hair-left: 7px;
  --hair-top: 3px;
  --hair-w: 56px;
  --hair-h: 24px;
  --eye-line: 37px;
  --left-eye-x: 27px;
  --right-eye-x: 49px;
  --mouth-line: 60px;
  --mouth-center: 38px;
  --hair-line: 4px;
  --chin-line: 63px;
  position: relative;
  width: 82px;
  height: 96px;
  image-rendering: auto;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.28));
  border: 1px solid rgba(216, 180, 93, 0.24);
  border-radius: 8px;
  background: rgba(23, 20, 17, 0.28);
  overflow: visible;
}

.face-formal {
  transform: translateY(-1px);
}

.face-stylish {
  transform: translateX(1px) rotate(-1deg);
}

.face-practical {
  transform: translateY(1px);
}

.face-eccentric {
  transform: translateX(-1px) rotate(1deg);
}

.pose-lean-left {
  transform: translateX(-2px) rotate(-2deg);
}

.pose-lean-right {
  transform: translateX(2px) rotate(2deg);
}

.pose-slump {
  transform: translateY(2px) rotate(-1deg);
}

.pose-rigid {
  transform: translateY(-2px);
}

.pose-side-eye {
  transform: translateX(-1px) rotate(-1deg);
}

.face::before {
  content: "";
  position: absolute;
  inset: 1px 2px 0;
  border: 2px solid rgba(238, 218, 168, 0.55);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), transparent 45%),
    rgba(78, 63, 43, 0.22);
  border-radius: 6px;
  z-index: 0;
}

.head {
  position: absolute;
  left: var(--head-left);
  top: var(--head-top);
  width: var(--head-w);
  height: var(--head-h);
  background: var(--skin);
  border: 3px solid #171411;
  border-radius: var(--head-radius);
  box-shadow: inset -5px -7px rgba(0,0,0,0.1);
  z-index: 1;
}

.jaw-shade {
  position: absolute;
  left: calc(var(--head-left) + 8px);
  top: calc(var(--chin-line) - 13px);
  width: calc(var(--head-w) - 16px);
  height: 13px;
  border-bottom: 2px solid rgba(45, 27, 21, 0.16);
  border-radius: 0 0 50% 50%;
  z-index: 2;
  pointer-events: none;
}

.shape-lantern .jaw-shade,
.shape-heavy-brow .jaw-shade,
.shape-square .jaw-shade {
  left: calc(var(--head-left) + 5px);
  width: calc(var(--head-w) - 10px);
  border-bottom-color: rgba(45, 27, 21, 0.24);
}

.shape-gaunt .jaw-shade,
.shape-diamond .jaw-shade {
  left: calc(var(--head-left) + 14px);
  width: calc(var(--head-w) - 28px);
}

.neck {
  position: absolute;
  left: var(--neck-left);
  top: 61px;
  width: var(--neck-w);
  height: 14px;
  background: var(--skin);
  border: 3px solid #171411;
  border-top: 0;
  border-radius: 0 0 5px 5px;
  z-index: 1;
}

.shoulders {
  position: absolute;
  left: var(--shoulder-left);
  top: var(--shoulder-top);
  width: var(--shoulder-w);
  height: 14px;
  background: var(--collar);
  border: 3px solid #171411;
  border-radius: 18px 18px 4px 4px;
  z-index: 0;
}

.face-formal .shoulders,
.pose-rigid .shoulders {
  background: #20242a;
  border-radius: 8px 8px 3px 3px;
}

.face-stylish .shoulders {
  background: #2c2431;
  border-radius: 20px 12px 4px 4px;
}

.face-practical .shoulders,
.pose-slump .shoulders {
  background: #2d2b25;
  border-radius: 22px 22px 5px 5px;
}

.face-eccentric .shoulders {
  background: #2b3440;
  border-radius: 12px 24px 4px 4px;
}

.ear {
  position: absolute;
  top: var(--ear-top);
  width: 8px;
  height: 14px;
  background: var(--skin);
  border: 3px solid #171411;
  border-radius: 8px;
  z-index: 1;
}

.ear.left { left: calc(var(--head-left) - 5px); }
.ear.right { left: calc(var(--head-left) + var(--head-w) - 3px); }

.shape-narrow .ear,
.shape-long .ear,
.shape-sharp .ear {
  height: 12px;
}

.shape-broad .ear,
.shape-round .ear {
  height: 16px;
  width: 9px;
}

.hair {
  position: absolute;
  left: var(--hair-left);
  top: var(--hair-top);
  width: var(--hair-w);
  height: var(--hair-h);
  background: var(--hair);
  border: 3px solid #171411;
  box-sizing: border-box;
  z-index: 3;
  --hair-style-transform: rotate(0deg);
  --hair-shape-transform: translate(0, 0) scale(1);
  transform: var(--hair-shape-transform) var(--hair-style-transform);
  transform-origin: 50% 12%;
}

.hair.hair-0 { border-radius: 14px 14px 5px 5px; }
.hair.hair-1 { border-radius: 6px 18px 4px 12px; --hair-style-transform: rotate(-2deg); }
.hair.hair-2 { height: 17px; border-radius: 2px; }
.hair.hair-3 { width: 42px; left: 17px; border-radius: 22px 8px 6px 6px; }
.hair.hair-4 { height: 28px; border-radius: 18px 18px 8px 8px; clip-path: polygon(0 0, 100% 0, 92% 75%, 75% 54%, 57% 82%, 39% 55%, 16% 83%, 5% 58%); }
.hair.hair-5 { height: 40px; top: 4px; border-radius: 18px 18px 12px 12px; clip-path: polygon(0 0, 100% 0, 96% 100%, 76% 82%, 61% 100%, 43% 80%, 25% 100%, 5% 78%); }
.hair.hair-6 { width: 62px; left: 4px; height: 34px; border-radius: 20px 20px 14px 14px; }
.hair.hair-7 { width: 48px; left: 12px; height: 18px; border-radius: 6px 18px 4px 4px; }
.hair.hair-8 { width: 58px; left: 6px; height: 15px; border-radius: 4px; clip-path: polygon(0 0, 100% 0, 88% 100%, 52% 55%, 18% 100%); }
.hair.hair-9 { width: 54px; left: 9px; height: 21px; border-radius: 16px 5px 8px 4px; clip-path: polygon(0 0, 100% 0, 92% 70%, 42% 50%, 22% 100%, 0 75%); }
.hair.hair-10 { width: 60px; left: 5px; height: 32px; border-radius: 20px 20px 8px 8px; clip-path: polygon(0 12%, 18% 0, 38% 18%, 58% 0, 80% 18%, 100% 4%, 92% 100%, 6% 100%); }
.hair.hair-11 { width: 60px; left: 5px; height: 38px; top: 5px; border-radius: 20px 20px 14px 14px; clip-path: polygon(0 0, 100% 0, 100% 80%, 86% 68%, 72% 100%, 54% 72%, 34% 100%, 18% 70%, 0 88%); }
.hair.hair-12 { width: 42px; left: 15px; height: 19px; border-radius: 18px 18px 4px 4px; clip-path: polygon(0 0, 100% 0, 84% 100%, 60% 58%, 40% 58%, 16% 100%); }
.hair.hair-13 { width: 48px; left: 11px; height: 10px; top: 12px; border-radius: 2px; }
.hair.hair-14 { width: 64px; left: 3px; height: 28px; border-radius: 24px 14px 12px 12px; clip-path: polygon(0 18%, 15% 0, 42% 6%, 56% 0, 100% 20%, 90% 82%, 70% 58%, 50% 92%, 28% 56%, 8% 86%); }
.hair.hair-15 { width: 56px; left: 7px; height: 24px; border-radius: 2px 18px 4px 10px; clip-path: polygon(0 0, 100% 0, 100% 64%, 72% 54%, 48% 100%, 24% 56%, 0 78%); }
.hair.hair-16 { border-radius: 28px 28px 12px 12px; clip-path: polygon(0 6%, 22% 0, 50% 8%, 78% 0, 100% 10%, 94% 100%, 78% 82%, 62% 100%, 47% 80%, 30% 100%, 12% 78%, 0 92%); }
.hair.hair-17 { border-radius: 24px 8px 20px 8px; clip-path: polygon(0 8%, 36% 0, 100% 10%, 92% 70%, 72% 60%, 56% 100%, 34% 65%, 14% 94%); }
.hair.hair-18 { border-radius: 16px 24px 8px 18px; clip-path: polygon(0 4%, 100% 0, 92% 100%, 62% 84%, 42% 100%, 20% 76%, 0 84%); }
.hair.hair-19 { border-radius: 30px 30px 20px 20px; clip-path: polygon(0 18%, 18% 0, 42% 12%, 64% 0, 88% 12%, 100% 30%, 84% 100%, 66% 72%, 50% 100%, 34% 72%, 18% 100%); }
.hair.hair-20 { border-radius: 8px 18px 4px 4px; clip-path: polygon(0 0, 100% 0, 90% 82%, 62% 52%, 38% 100%, 12% 66%); }
.hair.hair-21 { border-radius: 4px 4px 18px 18px; clip-path: polygon(0 10%, 28% 0, 70% 0, 100% 18%, 88% 82%, 52% 62%, 18% 100%); }
.hair.hair-22 { height: 14px; border-radius: 16px 16px 4px 4px; clip-path: polygon(0 0, 100% 0, 82% 100%, 64% 66%, 42% 100%, 20% 72%); }
.hair.hair-23 { border-radius: 18px 6px 4px 16px; clip-path: polygon(0 0, 100% 8%, 96% 70%, 76% 54%, 60% 100%, 42% 56%, 20% 86%, 0 64%); }
.hair.hair-24 { border-radius: 26px 12px 18px 10px; clip-path: polygon(0 10%, 30% 0, 72% 7%, 100% 22%, 90% 100%, 70% 74%, 50% 96%, 28% 70%, 8% 100%); }
.hair.hair-25 { border-radius: 18px 28px 10px 22px; clip-path: polygon(0 20%, 20% 0, 52% 10%, 84% 0, 100% 18%, 90% 78%, 74% 68%, 58% 100%, 38% 70%, 18% 96%, 0 72%); }
.hair.hair-26 { border-radius: 8px 24px 6px 18px; clip-path: polygon(0 0, 78% 0, 100% 16%, 92% 62%, 68% 58%, 50% 100%, 32% 58%, 8% 78%); }
.hair.hair-27 { border-radius: 24px 24px 22px 8px; clip-path: polygon(0 12%, 18% 0, 100% 4%, 96% 88%, 72% 62%, 54% 100%, 32% 68%, 8% 96%); }
.hair.hair-28 { border-radius: 4px 18px 5px 5px; clip-path: polygon(0 12%, 18% 0, 100% 0, 90% 84%, 62% 58%, 42% 96%, 18% 60%, 0 78%); }
.hair.hair-29 { border-radius: 22px 6px 18px 4px; clip-path: polygon(0 8%, 52% 0, 100% 12%, 96% 74%, 74% 58%, 56% 100%, 34% 62%, 12% 86%); }
.hair.hair-30 { border-radius: 3px 3px 10px 10px; clip-path: polygon(0 0, 100% 0, 94% 74%, 68% 54%, 42% 76%, 18% 58%, 0 82%); }
.hair.hair-31 { border-radius: 18px 12px 8px 18px; clip-path: polygon(0 4%, 86% 0, 100% 22%, 88% 86%, 62% 64%, 46% 100%, 26% 66%, 0 86%); }

.hair::before,
.hair::after {
  content: "";
  position: absolute;
  display: none;
  background: var(--hair);
  border: 3px solid #171411;
  pointer-events: none;
}

.hair.hair-16::before,
.hair.hair-17::before,
.hair.hair-19::before,
.hair.hair-24::before,
.hair.hair-25::before,
.hair.hair-27::before {
  display: block;
  left: 0;
  top: 9px;
  width: 12px;
  height: 22px;
  border-radius: 10px 3px 12px 8px;
}

.hair.hair-18::after,
.hair.hair-23::after,
.hair.hair-26::after,
.hair.hair-29::after,
.hair.hair-31::after {
  display: block;
  right: 0;
  top: 8px;
  width: 12px;
  height: 20px;
  border-radius: 3px 10px 8px 12px;
}

.hair {
  left: var(--hair-left);
  top: var(--hair-top);
  width: var(--hair-w);
  height: var(--hair-h);
}

.hair.hair-2,
.hair.hair-13,
.hair.hair-22 {
  top: calc(var(--hair-top) + 6px);
  height: max(12px, calc(var(--hair-h) - 12px));
}

.has-hat .hair {
  top: calc(var(--hair-top) + 6px);
  height: calc(var(--hair-h) - 5px);
  opacity: 0.9;
}

.shape-long .hair,
.shape-narrow .hair,
.shape-gaunt .hair,
.shape-high-forehead .hair {
  --hair-shape-transform: translateX(1px) scaleX(0.9);
}

.shape-broad .hair,
.shape-square .hair,
.shape-lantern .hair,
.shape-heavy-brow .hair {
  --hair-shape-transform: scaleX(1.08);
}

.shape-compact .hair,
.shape-pear .hair {
  --hair-shape-transform: translateY(2px) scaleX(1.04);
}

.shape-tired .hair {
  opacity: 0.94;
}

.shape-diamond .hair,
.shape-heart .hair {
  --hair-shape-transform: translateY(-1px) scaleX(0.96);
}

.eye {
  position: absolute;
  top: var(--eye-top);
  width: var(--eye-w);
  height: var(--eye-h);
  background: var(--eye);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
  z-index: 5;
  transform: translateX(var(--gaze-x));
}

.eye.left { left: var(--eye-left); }
.eye.right { right: var(--eye-right); }
.eye.wide { width: calc(var(--eye-w) + 2px); }
.eye.tiny { width: max(5px, calc(var(--eye-w) - 2px)); height: 5px; top: calc(var(--eye-top) + 2px); }
.eye.sleepy { height: 4px; top: calc(var(--eye-top) + 2px); }
.eye.lash::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -2px;
  width: 4px;
  height: 2px;
  background: var(--eye);
  box-shadow: -14px 0 0 var(--eye);
}

.brow {
  position: absolute;
  top: var(--brow-top);
  width: var(--brow-w);
  height: var(--brow-h);
  background: var(--hair);
  z-index: 6;
  transform-origin: 50% 50%;
}

.brow.left { left: var(--left-brow-left); }
.brow.right { left: var(--right-brow-left); }
.brow.angry-left { transform: rotate(13deg); }
.brow.angry-right { transform: rotate(-13deg); }

.expr-suspicious .brow.left,
.expr-irritated .brow.left,
.expr-guarded .brow.left,
.expr-stern .brow.left { transform: rotate(12deg); }
.expr-suspicious .brow.right,
.expr-irritated .brow.right,
.expr-guarded .brow.right,
.expr-stern .brow.right { transform: rotate(-12deg); }
.expr-nervous .brow.left,
.expr-anxious .brow.left,
.expr-worried .brow.left { transform: rotate(-10deg); top: calc(var(--brow-top) - 2px); }
.expr-nervous .brow.right,
.expr-anxious .brow.right,
.expr-worried .brow.right { transform: rotate(10deg); top: calc(var(--brow-top) + 1px); }
.expr-smug .brow.left,
.expr-overconfident .brow.left,
.expr-arrogant .brow.left { transform: rotate(-6deg); }
.expr-smug .brow.right,
.expr-overconfident .brow.right,
.expr-arrogant .brow.right { transform: rotate(-3deg); top: calc(var(--brow-top) - 2px); }
.expr-exhausted .brow,
.expr-detached .brow { height: 3px; opacity: 0.82; }

.expr-stern .brow {
  height: 5px;
}

.pose-side-eye .brow.left {
  width: 16px;
}

.pose-side-eye .brow.right {
  width: 11px;
}

.nose {
  position: absolute;
  top: var(--nose-top);
  left: var(--nose-left);
  width: var(--nose-w);
  height: var(--nose-h);
  background: rgba(0,0,0,0.18);
  border-radius: 0 0 4px 4px;
  z-index: 4;
}

.shape-sharp .nose,
.shape-aristocratic .nose {
  transform: skewX(-8deg);
}

.mouth {
  position: absolute;
  left: var(--mouth-left);
  top: var(--mouth-top);
  width: var(--mouth-w);
  height: 6px;
  border-bottom: 4px solid var(--mouth);
  border-radius: 0 0 16px 16px;
  z-index: 5;
}

.mouth.flat { border-radius: 0; height: 3px; border-bottom-width: 3px; }
.mouth.frown { transform: rotate(180deg); top: 60px; }
.mouth.soft { width: 16px; height: 8px; border-bottom-width: 3px; border-radius: 0 0 12px 12px; }
.mouth.smirk {
  height: 4px;
  border-bottom-width: 3px;
  border-radius: 0 0 16px 6px;
  transform: rotate(-7deg);
}

.eye-bag {
  position: absolute;
  top: calc(var(--eye-top) + 10px);
  width: 10px;
  border-top: 2px solid rgba(58, 37, 28, 0.22);
  z-index: 4;
}

.eye-bag.left { left: calc(var(--eye-left) - 1px); }
.eye-bag.right { right: calc(var(--eye-right) - 1px); }
.expr-exhausted .eye-bag,
.expr-anxious .eye-bag,
.expr-nervous .eye-bag,
.expr-worried .eye-bag {
  border-top-color: rgba(58, 37, 28, 0.38);
}
.expr-smug .eye-bag,
.expr-overconfident .eye-bag {
  opacity: 0.35;
}

.face-detail {
  position: absolute;
  z-index: 6;
  pointer-events: none;
}

.face-detail.mole {
  left: calc(var(--head-left) + var(--head-w) - 15px);
  top: 48px;
  width: 4px;
  height: 4px;
  background: rgba(49, 27, 20, 0.58);
  border-radius: 50%;
}

.face-detail.scar {
  left: calc(var(--head-left) + 12px);
  top: 38px;
  width: 17px;
  height: 3px;
  border-top: 2px solid rgba(112, 52, 48, 0.48);
  transform: rotate(-24deg);
}

.face-detail.wrinkles {
  left: calc(var(--head-left) + 12px);
  top: 23px;
  width: 27px;
  height: 11px;
  border-top: 2px solid rgba(66, 42, 31, 0.24);
  border-bottom: 2px solid rgba(66, 42, 31, 0.18);
}

.face-detail.eye-bags {
  left: calc(var(--head-left) + 11px);
  top: 43px;
  width: calc(var(--head-w) - 22px);
  height: 4px;
  border-top: 2px dashed rgba(58, 37, 28, 0.24);
}

.face-detail.stubble,
.face-detail.beard-shadow {
  left: calc(var(--head-left) + 12px);
  top: 52px;
  width: calc(var(--head-w) - 24px);
  height: 13px;
  background:
    radial-gradient(circle, rgba(31,24,20,0.24) 1px, transparent 1.6px);
  background-size: 6px 5px;
  border-radius: 0 0 12px 12px;
  opacity: 0.48;
}

.face-detail.beard-shadow {
  top: 48px;
  height: 18px;
  opacity: 0.42;
}

.face-detail.freckles {
  left: calc(var(--head-left) + 13px);
  top: 45px;
  width: calc(var(--head-w) - 26px);
  height: 6px;
  background:
    radial-gradient(circle, rgba(70, 42, 28, 0.32) 1px, transparent 1.5px);
  background-size: 8px 4px;
  opacity: 0.58;
}

.face-detail.smile-lines {
  left: calc(var(--mouth-left) - 6px);
  top: calc(var(--mouth-top) - 2px);
  width: calc(var(--mouth-w) + 12px);
  height: 8px;
  border-left: 2px solid rgba(65, 37, 29, 0.24);
  border-right: 2px solid rgba(65, 37, 29, 0.24);
  border-radius: 50%;
}

.face-detail.crooked-nose {
  left: calc(var(--nose-left) + 3px);
  top: calc(var(--nose-top) - 1px);
  width: 7px;
  height: calc(var(--nose-h) + 2px);
  border-left: 2px solid rgba(34, 22, 16, 0.28);
  transform: rotate(9deg);
}

.accessory {
  position: absolute;
  z-index: 8;
}

.accessory.glasses,
.accessory.round-glasses {
  left: var(--left-lens-left);
  top: var(--lens-top);
  width: calc(var(--right-lens-x) - var(--left-lens-x) + var(--lens-w));
  height: var(--lens-h);
  border: 0;
  background: linear-gradient(rgba(17, 17, 17, 0.82), rgba(17, 17, 17, 0.82)) center / var(--bridge-w) 2px no-repeat;
  border-radius: 0;
}

.accessory.round-glasses {
  height: var(--lens-h);
}

.accessory.glasses::before,
.accessory.glasses::after,
.accessory.round-glasses::before,
.accessory.round-glasses::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--lens-w);
  height: var(--lens-h);
  border: 2px solid rgba(17, 17, 17, 0.82);
  box-sizing: border-box;
  background: rgba(238, 218, 168, 0.05);
  border-radius: 5px;
}

.accessory.glasses::before,
.accessory.round-glasses::before {
  left: 0;
}

.accessory.glasses::after,
.accessory.round-glasses::after {
  right: 0;
}

.accessory.round-glasses::before,
.accessory.round-glasses::after {
  border-radius: 999px;
}

.facial-hair {
  position: absolute;
  z-index: 7;
}

.facial-hair.mustache {
  left: calc(var(--mouth-center) - 12px);
  top: calc(var(--mouth-line) - 10px);
  width: 24px;
  height: 6px;
  background: var(--hair);
  border-radius: 50% 50% 46% 46%;
  box-shadow: 0 1px 0 rgba(0,0,0,0.28);
}

.facial-hair.goatee {
  left: calc(var(--mouth-center) - 7px);
  top: calc(var(--mouth-line) + 3px);
  width: 14px;
  height: 10px;
  background: var(--hair);
  border-radius: 30% 30% 50% 50%;
  opacity: 0.86;
}

.facial-hair.beard,
.facial-hair.stubble {
  left: calc(var(--head-left) + 10px);
  top: calc(var(--mouth-line) - 6px);
  width: calc(var(--head-w) - 20px);
  height: calc(var(--chin-line) - var(--mouth-line) + 8px);
  background:
    radial-gradient(circle, rgba(31,24,20,0.26) 1px, transparent 1.7px);
  background-size: 6px 5px;
  border-radius: 0 0 14px 14px;
  opacity: 0.5;
}

.facial-hair.beard {
  background: var(--hair);
  opacity: 0.72;
}

.profession-mark {
  position: absolute;
  z-index: 7;
  pointer-events: none;
}

.profession-mark.rank-bars {
  left: calc(var(--shoulder-left) + 10px);
  top: calc(var(--shoulder-top) + 5px);
  width: 20px;
  height: 8px;
  border-top: 2px solid #d8b45d;
  border-bottom: 2px solid #d8b45d;
}

.profession-mark.lapel-pin,
.profession-mark.leaf-pin,
.profession-mark.ledger-mark,
.profession-mark.driver-badge {
  left: calc(var(--shoulder-left) + var(--shoulder-w) - 18px);
  top: calc(var(--shoulder-top) + 6px);
  width: 8px;
  height: 8px;
  background: #d8b45d;
  border: 2px solid #171411;
  border-radius: 50%;
}

.profession-mark.leaf-pin {
  background: #8cc0b7;
  border-radius: 70% 0 70% 0;
  transform: rotate(-24deg);
}

.profession-mark.pencil {
  left: calc(var(--shoulder-left) + var(--shoulder-w) - 16px);
  top: calc(var(--shoulder-top) + 3px);
  width: 5px;
  height: 16px;
  background: #d8b45d;
  border: 2px solid #171411;
  transform: rotate(18deg);
}

.profession-mark.apron {
  left: calc(var(--mouth-center) - 13px);
  top: calc(var(--chin-line) + 3px);
  width: 26px;
  height: 15px;
  background: rgba(238, 218, 168, 0.68);
  border: 2px solid #171411;
  border-radius: 2px 2px 7px 7px;
}

.profession-mark.stage-star {
  left: calc(var(--shoulder-left) + 10px);
  top: calc(var(--shoulder-top) + 5px);
  width: 13px;
  height: 13px;
  background: #d8b45d;
  clip-path: polygon(50% 0, 62% 34%, 98% 35%, 68% 56%, 80% 92%, 50% 70%, 20% 92%, 32% 56%, 2% 35%, 38% 34%);
}

.profession-mark.bowtie {
  left: calc(var(--mouth-center) - 12px);
  top: calc(var(--chin-line) + 2px);
  width: 24px;
  height: 10px;
  background:
    linear-gradient(90deg, #171411 0 10%, transparent 10% 90%, #171411 90%),
    #8e302c;
  clip-path: polygon(0 0, 45% 34%, 50% 50%, 55% 34%, 100% 0, 100% 100%, 55% 66%, 50% 50%, 45% 66%, 0 100%);
}

.profession-mark.ledger-mark {
  border-radius: 2px;
}

.accessory.monocle {
  left: var(--monocle-left);
  top: var(--monocle-top);
  width: var(--monocle-size);
  height: var(--monocle-size);
  border: 2px solid #f6de9b;
  box-sizing: border-box;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #171411;
}

.accessory.monocle::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 11px;
  border-top: 2px solid rgba(23,20,17,0.8);
  transform: rotate(48deg);
}

.accessory.scarf {
  left: calc(var(--head-left) + 3px);
  top: calc(var(--chin-line) + 2px);
  width: calc(var(--head-w) - 6px);
  height: 10px;
  background: var(--accent-2);
  border: 3px solid #171411;
  border-radius: 4px;
  z-index: 7;
}

.accessory.hat {
  left: calc(var(--head-left) + 2px);
  top: max(1px, calc(var(--hair-line) - 6px));
  width: calc(var(--head-w) - 4px);
  height: 12px;
  background: #2b2520;
  border: 3px solid #171411;
  border-radius: 12px 12px 4px 4px;
  box-shadow: 0 10px 0 -6px #171411;
  z-index: 9;
}

.accessory.hat::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 10px;
  width: calc(var(--head-w) + 8px);
  border-top: 3px solid #171411;
}

.accessory.necktie {
  left: calc(var(--mouth-center) - 5px);
  top: calc(var(--chin-line) + 3px);
  width: 9px;
  height: 12px;
  background: #263c51;
  border: 2px solid #171411;
  clip-path: polygon(50% 0, 100% 28%, 74% 100%, 26% 100%, 0 28%);
}

.accessory.brooch,
.accessory.pearl {
  left: calc(var(--shoulder-left) + var(--shoulder-w) - 18px);
  top: calc(var(--shoulder-top) + 5px);
  width: 8px;
  height: 8px;
  background: #f0d77a;
  border: 2px solid #171411;
  border-radius: 50%;
}

.accessory.pearl {
  left: calc(var(--mouth-center) - 3px);
  top: calc(var(--chin-line) + 3px);
  width: 6px;
  height: 6px;
}

.is-victim .face {
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.34)) contrast(1.06);
}

.is-victim .face::before {
  border-color: rgba(238, 218, 168, 0.88);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.12), transparent 46%),
    rgba(92, 67, 45, 0.28);
}

.is-victim .shoulders {
  border-color: #100d0a;
}

.accessory.earrings::before,
.accessory.earrings::after {
  content: "";
  position: absolute;
  top: 38px;
  width: 5px;
  height: 7px;
  background: #f0d77a;
  border: 2px solid #171411;
  border-radius: 50%;
  z-index: 7;
}

.accessory.earrings::before { left: calc(var(--head-left) - 4px); top: calc(var(--ear-top) + 5px); }
.accessory.earrings::after { left: calc(var(--head-left) + var(--head-w) - 1px); top: calc(var(--ear-top) + 5px); }

.is-victim .face::after {
  content: "CASE";
  position: absolute;
  left: 3px;
  top: 68px;
  padding: 0.08rem 0.28rem;
  background: var(--danger);
  color: #fff2ed;
  border: 2px solid #171411;
  font-size: 0.58rem;
  font-weight: 900;
  transform: rotate(-8deg);
}

.rooms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

.room-card,
.evidence-card,
.timeline-slot {
  padding: 0.75rem;
}

.room-card {
  display: grid;
  gap: 0.45rem;
}

.room-card button {
  padding-block: 0.45rem;
}

.room-card p,
.evidence-card p {
  margin-bottom: 0;
}

.room-card.is-inspected {
  border-color: rgba(143, 202, 117, 0.42);
}

.timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

.timeline-slot {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 0.5rem;
  align-items: start;
}

.timeline-slot h3 {
  color: var(--accent);
  margin: 0;
}

.timeline-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.86rem;
}

.timeline-list li {
  border-left: 3px solid rgba(140, 192, 183, 0.35);
  padding-left: 0.45rem;
}

.evidence-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.evidence-section {
  min-width: 0;
}

.evidence-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.evidence-section-heading h3 {
  margin: 0;
  color: var(--accent);
}

.evidence-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.55rem;
}

.evidence-card {
  position: relative;
}

.evidence-card.is-contradiction {
  border-color: rgba(212, 92, 82, 0.55);
  background: linear-gradient(180deg, #3a2d2a, #2c2422);
}

.evidence-card::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(216, 180, 93, 0.12);
}

.evidence-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.6rem;
}

.empty-note {
  margin: 0;
  color: var(--muted);
  border: 1px dashed rgba(255,255,255,0.16);
  border-radius: 6px;
  padding: 0.65rem;
}

.notes-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.note-row {
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 0.5rem;
  align-items: start;
  border: 1px solid rgba(255,255,255,0.09);
  background: var(--panel-2);
  border-radius: 8px;
  padding: 0.65rem;
}

.note-row strong,
.note-row span {
  display: block;
}

.note-row span {
  color: var(--muted);
  font-size: 0.78rem;
}

.note-row textarea {
  grid-column: 1 / -1;
  min-height: 2.65rem;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.5rem;
  color: var(--ink);
  background: #191916;
  font: inherit;
}

.accusation-form {
  display: grid;
  gap: 0.75rem;
}

label {
  display: grid;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

select {
  width: 100%;
  min-height: 2.45rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.45rem 0.55rem;
  color: var(--ink);
  background: #191916;
}

.route-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.65rem 0 1rem;
  font-size: 0.9rem;
}

.route-table th,
.route-table td {
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.45rem;
  text-align: left;
}

.route-table th {
  color: var(--accent);
}

.resolution-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  min-height: 5.5rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: 1.65rem;
  font-weight: 900;
  margin-bottom: 0.75rem;
}

.resolution-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.85rem 0;
}

.resolution-metrics div {
  border: 1px solid rgba(216, 180, 93, 0.18);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  padding: 0.65rem;
}

.resolution-metrics span,
.resolution-metrics small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.resolution-metrics strong {
  display: block;
  margin: 0.2rem 0;
  color: var(--accent);
  font-size: 1.05rem;
}

.resolution-metrics small {
  line-height: 1.35;
  text-transform: none;
}

.resolution-interpretation {
  display: grid;
  gap: 0.55rem;
  margin: 0.85rem 0;
}

.resolution-interpretation h3 {
  margin: 0.35rem 0 0;
}

.case-report {
  display: grid;
  gap: 0.8rem;
  margin: 1rem 0;
  padding: 0.85rem;
  border: 1px solid rgba(216, 180, 93, 0.22);
  border-radius: 8px;
  background: rgba(0,0,0,0.12);
}

.case-report-heading h3,
.case-report h4 {
  margin: 0.15rem 0 0.45rem;
}

.case-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.case-report article {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  background: rgba(255,255,255,0.03);
  padding: 0.7rem;
}

.case-report p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  line-height: 1.42;
}

.case-report-note {
  border-left: 3px solid rgba(140, 192, 183, 0.45);
  padding-left: 0.6rem;
}

.is-hidden {
  display: none !important;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0,0,0,0.68);
  z-index: 10;
}

.modal {
  width: min(680px, 100%);
  max-height: min(820px, 92vh);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #26251f;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  padding: 1rem;
  position: relative;
}

.modal-close {
  position: sticky;
  top: 0;
  float: right;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  font-size: 1.35rem;
}

.interview-head {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 1rem;
}

.interview-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}

.followup-grid {
  display: grid;
  gap: 0.55rem;
  margin: 0.45rem 0 0.9rem;
}

.followup-card {
  border: 1px solid rgba(216, 180, 93, 0.18);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  padding: 0.6rem;
}

.followup-card span {
  display: block;
  color: var(--accent-2);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.followup-card strong {
  display: block;
  margin: 0.15rem 0;
}

.followup-card p {
  margin-bottom: 0.45rem;
}

@media (max-width: 1180px) {
  .dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .board-main {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .board-left,
  .board-right {
    grid-column: span 1;
  }

  .timeline {
    grid-template-columns: 1fr;
  }

  .rooms-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }

  .notes-board {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (max-width: 760px) {
  .app-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .header-actions {
    justify-content: flex-start;
  }

  .dashboard {
    grid-template-columns: 1fr;
    padding: 0.75rem;
  }

  .board-column,
  .board-main,
  .board-left,
  .board-right {
    grid-column: span 1;
    grid-row: auto;
  }

  .summary-facts,
  .interview-facts {
    grid-template-columns: 1fr;
  }

  .evidence-board,
  .timeline,
  .rooms-grid,
  .notes-board {
    grid-template-columns: 1fr;
  }

  .note-row {
    grid-template-columns: 1fr;
  }
}

/* Tabbed detective workspace */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  padding: 1rem;
  border-right: 1px solid var(--line);
  background: rgba(21, 20, 18, 0.96);
  box-shadow: 8px 0 28px var(--shadow);
}

.brand-block h1 {
  font-size: 1.9rem;
  line-height: 0.95;
  margin-bottom: 0.5rem;
}

.tab-nav {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.tab-button,
.ghost-button {
  border-color: rgba(216, 180, 93, 0.25);
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  box-shadow: none;
  text-align: left;
}

.tab-button {
  display: flex;
  justify-content: space-between;
  padding: 0.65rem 0.75rem;
}

.tab-button.is-active {
  background: var(--accent);
  color: #171411;
  border-color: #f0cf7d;
}

.sidebar-footer {
  display: grid;
  gap: 0.65rem;
}

.site-return-link {
  display: inline-flex;
  min-height: 2.2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(140, 192, 183, 0.32);
  border-radius: 6px;
  background: rgba(140, 192, 183, 0.08);
  color: #c9f3ee;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.site-return-link:hover {
  border-color: rgba(140, 192, 183, 0.62);
  color: #f2fffd;
}

.difficulty-picker {
  display: grid;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.difficulty-picker select {
  width: 100%;
}

.workspace {
  min-width: 0;
  padding: 1rem;
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
}

.view {
  display: none;
}

.view.is-active {
  display: block;
}

.view-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.view-heading h2 {
  font-size: 1.35rem;
}

.briefing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.span-2 {
  grid-column: span 2;
}

.briefing-card {
  min-height: 0;
}

.progress-ring {
  width: 6.5rem;
  height: 6.5rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 900;
  margin-bottom: 0.7rem;
}

.progress-ring.progress-stage {
  width: 7.75rem;
  height: 7.75rem;
  padding: 0.65rem;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.1;
}

.mini-list {
  display: grid;
  gap: 0.5rem;
}

.mini-list button {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  background: var(--panel-2);
  color: var(--ink);
  box-shadow: none;
  border-color: rgba(255,255,255,0.1);
}

.mini-list span {
  color: var(--muted);
}

.mini-clue p {
  margin: 0.35rem 0 0;
}

.lead-card {
  border-color: rgba(140, 192, 183, 0.28);
}

.lead-card p {
  color: var(--muted);
  line-height: 1.38;
}

.lead-card button,
.modal-action-row button {
  width: 100%;
  text-align: center;
}

.deduction-guide {
  display: grid;
  gap: 0.55rem;
}

.deduction-chain,
.theory-checks,
.resolution-chain,
.reasoning-strip {
  display: grid;
  gap: 0.5rem;
}

.deduction-chain {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.deduction-step,
.theory-checks div,
.resolution-chain div,
.reasoning-strip div,
.evidence-quickfacts div {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  background: rgba(0,0,0,0.12);
  padding: 0.55rem;
}

.deduction-step span,
.theory-checks span,
.resolution-chain span,
.reasoning-strip span,
.evidence-quickfacts span {
  display: block;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.deduction-step p,
.resolution-chain p {
  margin: 0.25rem 0;
  color: var(--muted);
}

.deduction-step small {
  color: var(--accent-2);
  font-weight: 800;
}

.deduction-step.is-found,
.theory-checks .is-found,
.resolution-chain .is-correct {
  border-color: rgba(143, 202, 117, 0.35);
  background: rgba(143, 202, 117, 0.08);
}

.resolution-chain .is-missed {
  border-color: rgba(212, 92, 82, 0.24);
}

.modal-action-row {
  margin-top: 0.75rem;
}

.locked-detail {
  border-left: 3px solid rgba(140, 192, 183, 0.38);
  padding-left: 0.65rem;
}

.room-map {
  min-height: 0;
}

.map-mobile-actions {
  display: none;
}

.map-expanded-actions {
  display: none;
}

.mobile-map-controls {
  display: none;
}

.floorplan-shell {
  display: grid;
  grid-template-columns: minmax(620px, 1fr) 340px;
  gap: 0.9rem;
  align-items: start;
}

.map-route-toolbar {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.6rem;
  border: 1px solid rgba(216, 180, 93, 0.18);
  border-radius: 8px;
  background: rgba(42, 41, 37, 0.72);
  padding: 0.45rem 0.55rem;
}

.map-route-toolbar label {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.map-route-toolbar select {
  min-width: 12rem;
  width: min(18rem, 100%);
}

.route-legend {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  min-height: 1.6rem;
}

.route-legend:empty {
  display: none;
}

.route-legend.is-empty {
  display: none;
}

.route-legend span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid rgba(216, 180, 93, 0.18);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255,255,255,0.05);
  padding: 0.16rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 900;
}

.route-legend span::before {
  content: "";
  width: 1.1rem;
  height: 2px;
  background: currentColor;
}

.claimed-route-key {
  color: #7eb2cf;
}

.observed-route-key {
  color: #e68f86;
}

.actual-route-key {
  color: #e68f86;
}

.crime-map-paper {
  grid-column: 1;
  overflow: auto;
  max-width: 100%;
  border-radius: 8px;
  padding: 0.65rem;
  background: #1c1914;
  border: 1px solid rgba(206, 178, 124, 0.2);
  box-shadow: 0 14px 28px rgba(0,0,0,0.2);
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
}

.crime-scene-svg {
  display: block;
  width: 100%;
  min-width: 780px;
  height: auto;
  border-radius: 5px;
  filter: drop-shadow(0 5px 9px rgba(0,0,0,0.18));
  touch-action: pan-x pan-y;
}

.map-title {
  font-size: 28px;
  font-weight: 900;
  fill: #241a12;
  letter-spacing: 0;
}

.map-subtitle {
  font-size: 17px;
  font-weight: 800;
  fill: #6b4d30;
  letter-spacing: 0;
}

.floorplan-rooms {
  cursor: pointer;
}

.svg-room .room-shape {
  fill: rgba(246, 235, 205, 0.34);
  stroke: rgba(36, 26, 18, 0.82);
  stroke-width: 3.1;
  transition: fill 0.15s ease, stroke 0.15s ease, stroke-width 0.15s ease;
}

.outer-wall {
  fill: none;
  stroke: rgba(28, 19, 12, 0.96);
  stroke-width: 9;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

.inner-wall-trace {
  fill: none;
  stroke: rgba(255, 248, 224, 0.22);
  stroke-width: 0.9;
  stroke-linejoin: round;
  pointer-events: none;
}

.svg-room.is-uninspected .room-shape {
  fill: rgba(110, 92, 66, 0.1);
  stroke: rgba(36, 26, 18, 0.48);
}

.svg-room.is-inspected .room-shape {
  fill: rgba(246, 235, 205, 0.44);
  stroke: rgba(36, 26, 18, 0.82);
}

.svg-room.is-crime-room .room-shape {
  fill: rgba(117, 84, 43, 0.17);
}

.svg-room.hasEvidence .room-shape {
  fill: rgba(234, 218, 177, 0.5);
}

.svg-room.hasSightings .room-shape {
  stroke: rgba(101, 87, 51, 0.92);
}

.svg-room.hasContradiction .room-shape,
.svg-room.has-conflict .room-shape {
  stroke: #6d3431;
  stroke-dasharray: 10 7;
}

.svg-room.routeActive .room-shape {
  fill: rgba(49, 93, 115, 0.11);
  stroke: rgba(49, 93, 115, 0.88);
}

.crime-scene-svg.has-route-overlay .svg-room:not(.routeActive):not(.selected):not(.is-selected) .room-shape {
  fill: rgba(110, 92, 66, 0.06);
  stroke: rgba(36, 26, 18, 0.34);
}

.crime-scene-svg.has-route-overlay .svg-room:not(.routeActive):not(.selected):not(.is-selected) .furniture,
.crime-scene-svg.has-route-overlay .svg-room:not(.routeActive):not(.selected):not(.is-selected) .window-mark {
  opacity: 0.32;
}

.svg-room.selected .room-shape,
.svg-room.is-selected .room-shape,
.svg-room:hover .room-shape {
  fill: rgba(71, 123, 150, 0.13);
  stroke: #315d73;
  stroke-width: 4.8;
  filter: drop-shadow(0 0 4px rgba(49, 93, 115, 0.34));
}

.floorplan-labels,
.floorplan-badges {
  pointer-events: none;
}

.label-plate {
  fill: rgba(239, 226, 194, 0.94);
  stroke: rgba(90, 66, 42, 0.22);
  stroke-width: 1.2;
  pointer-events: none;
}

.room-label {
  fill: #241a12;
  font-size: 19px;
  font-weight: 900;
  pointer-events: none;
}

.door-gap {
  fill: none;
  stroke: #eadbbd;
  stroke-width: 20;
  stroke-linecap: butt;
}

.door-arc {
  fill: none;
  stroke: rgba(36, 26, 18, 0.68);
  stroke-width: 2.4;
  stroke-dasharray: 5 6;
  stroke-linecap: round;
}

.door-jamb {
  stroke: rgba(28, 19, 12, 0.88);
  stroke-width: 3;
  stroke-linecap: round;
}

.furniture {
  fill: rgba(36, 26, 18, 0.012);
  stroke: rgba(36, 26, 18, 0.13);
  stroke-width: 0.9;
  pointer-events: none;
}

.furniture rect,
.furniture ellipse,
.furniture circle {
  fill: rgba(36, 26, 18, 0.01);
}

.furniture-stairs,
.furniture-plants {
  fill: none;
}

.window-mark line {
  stroke: rgba(49, 93, 115, 0.24);
  stroke-width: 1.7;
  stroke-linecap: round;
  pointer-events: none;
}

.entry-marker path {
  fill: none;
  stroke: rgba(36, 26, 18, 0.62);
  stroke-width: 2;
  stroke-linecap: round;
}

.entry-marker text {
  fill: rgba(36, 26, 18, 0.72);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
}

.room-badge rect {
  stroke-width: 1;
  filter: drop-shadow(0 1px 1px rgba(36, 26, 18, 0.12));
}

.room-badge text {
  fill: #241a12;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  pointer-events: none;
}

.room-badge.evidence rect {
  fill: rgba(216, 180, 93, 0.84);
  stroke: rgba(70, 51, 26, 0.28);
}

.room-badge.witness rect {
  fill: rgba(140, 192, 183, 0.78);
  stroke: rgba(36, 78, 76, 0.32);
}

.room-badge.contradiction rect,
.room-badge.alert rect {
  fill: rgba(212, 92, 82, 0.84);
  stroke: rgba(81, 30, 26, 0.35);
}

.room-badge.contradiction text,
.room-badge.alert text {
  fill: #fff2ed;
}

.route-overlay {
  pointer-events: none;
}

.route-halo {
  fill: none;
  stroke: rgba(239, 226, 194, 0.72);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
}

.route-segment {
  fill: none;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke;
  animation: route-draw 0.65s ease both;
  animation-delay: calc(var(--route-index) * 80ms);
}

.route-segment.is-contradicted {
  filter: drop-shadow(0 0 5px rgba(168, 51, 45, 0.8));
  stroke-width: 6;
  animation: route-draw 0.65s ease both, route-pulse 1.8s ease-in-out infinite;
}

.route-segment.is-uncertain {
  stroke-dasharray: 6 9;
}

.route-node circle {
  fill: #fff7de;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: route-node-pop 0.4s ease both;
  animation-delay: calc(var(--route-index) * 80ms + 130ms);
}

.route-node text {
  fill: #241a12;
  stroke: rgba(239, 226, 194, 0.9);
  stroke-width: 3;
  paint-order: stroke;
  font-weight: 900;
  letter-spacing: 0;
}

.route-step {
  font-size: 11px;
}

.route-time {
  font-size: 12px;
}

.route-claimed .route-segment {
  stroke: rgba(49, 93, 115, 0.86);
}

.route-claimed .route-node circle {
  stroke: #315d73;
}

.route-observed .route-segment {
  stroke: rgba(142, 48, 44, 0.82);
}

.route-observed .route-node circle {
  stroke: #8e302c;
}

.route-actual .route-segment {
  stroke: rgba(168, 51, 45, 0.88);
}

.route-actual .route-node circle {
  stroke: #a8332d;
}

@keyframes route-draw {
  from {
    opacity: 0;
    stroke-dashoffset: 26;
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes route-node-pop {
  from {
    opacity: 0;
    transform: scale(0.72);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes route-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(168, 51, 45, 0.65));
  }
  50% {
    filter: drop-shadow(0 0 9px rgba(168, 51, 45, 0.95));
  }
}

.compass circle,
.compass path {
  fill: none;
  stroke: #241a12;
  stroke-width: 2;
}

.compass path {
  fill: rgba(36, 26, 18, 0.08);
}

.compass text {
  fill: #241a12;
  font-size: 14px;
  font-weight: 900;
}

.blueprint-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  grid-template-rows: repeat(3, minmax(130px, 1fr));
  gap: 1.15rem;
  min-height: 540px;
  padding: 1.1rem;
  border: 1px solid rgba(140, 192, 183, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(140, 192, 183, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(140, 192, 183, 0.08) 1px, transparent 1px),
    rgba(11, 21, 23, 0.55);
  background-size: 28px 28px;
  overflow: hidden;
}

.corridor {
  align-self: center;
  justify-self: stretch;
  z-index: 0;
  background: rgba(140, 192, 183, 0.2);
  border: 1px dashed rgba(140, 192, 183, 0.42);
  pointer-events: none;
}

.corridor.horizontal {
  height: 18px;
  margin-inline: 35%;
}

.corridor.vertical {
  width: 18px;
  height: 100%;
  justify-self: center;
  margin-block: 35%;
}

.floor-room {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: space-between;
  gap: 0.45rem;
  min-height: 116px;
  border: 3px solid rgba(242, 234, 215, 0.28);
  background: rgba(42, 41, 37, 0.94);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.22);
  text-align: left;
}

.floor-room:hover,
.floor-room.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(216, 180, 93, 0.18), 0 8px 24px rgba(0,0,0,0.28);
}

.floor-room:not(.is-inspected) {
  opacity: 0.72;
}

.floor-room.is-inspected {
  border-color: rgba(143, 202, 117, 0.78);
}

.floor-room.is-crime-room {
  background: linear-gradient(180deg, rgba(61, 42, 39, 0.95), rgba(42, 41, 37, 0.95));
}

.floor-room.has-conflict {
  border-color: rgba(212, 92, 82, 0.85);
}

.floor-room h3 {
  margin: 0;
}

.room-badges {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.room-badges span {
  border-radius: 999px;
  background: rgba(140, 192, 183, 0.13);
  border: 1px solid rgba(140, 192, 183, 0.28);
  color: #c5e7e1;
  padding: 0.1rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
}

.room-badges .danger-badge {
  color: #ffd7d2;
  background: rgba(212, 92, 82, 0.2);
  border-color: rgba(212, 92, 82, 0.5);
}

.room-inspector {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: sticky;
  top: 1rem;
  display: grid;
  gap: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--panel), #23221f);
  padding: 0.9rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
}

.inspector-heading h3 {
  margin: 0.15rem 0 0;
  font-size: 1.2rem;
}

.inspector-section {
  border-top: 1px solid rgba(216, 180, 93, 0.18);
  padding-top: 0.65rem;
}

.inspector-section h4 {
  margin: 0 0 0.45rem;
  color: var(--accent);
  font-size: 0.86rem;
  text-transform: uppercase;
}

.inspector-footnote {
  color: var(--muted);
  font-size: 0.82rem;
}

.filter-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

@media (max-width: 1280px) and (min-width: 981px) {
  .floorplan-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .map-route-toolbar,
  .crime-map-paper,
  .room-inspector {
    grid-column: 1;
    grid-row: auto;
  }

  .crime-scene-svg {
    min-width: 0;
  }

  .room-inspector {
    position: static;
    max-height: none;
  }
}

.evidence-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.evidence-quickfacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.55rem 0;
}

.evidence-quickfacts strong {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.2;
}

.evidence-detail {
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0.45rem 0;
  margin: 0.45rem 0;
}

.evidence-detail summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 800;
}

.evidence-detail p {
  margin: 0.45rem 0 0;
}

.contradictions-board {
  display: grid;
  gap: 0.85rem;
}

.contradiction-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 0.75rem;
  border: 1px solid rgba(212, 92, 82, 0.7);
  background: linear-gradient(180deg, #3a2d2a, #27211f);
  border-radius: 8px;
  padding: 0.85rem;
}

.conflict-marker {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--danger);
  color: #fff6ef;
  font-weight: 900;
}

.versus-grid {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  gap: 0.75rem;
  align-items: stretch;
  margin: 0.65rem 0;
}

.claim-side,
.conflict-side {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 0.7rem;
  background: rgba(0,0,0,0.14);
}

.claim-side span,
.conflict-side span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.claim-side p {
  text-decoration: line-through;
  text-decoration-color: rgba(212, 92, 82, 0.9);
}

.vs-label {
  display: grid;
  place-items: center;
  color: var(--danger);
  font-weight: 900;
}

.notes-board {
  gap: 0.85rem;
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.65rem;
}

.pinned-section {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: var(--panel);
  padding: 0.85rem;
}

.theory-builder {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(216, 180, 93, 0.18);
}

.theory-heading h3 {
  margin: 0.12rem 0 0;
}

.theory-sentence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.theory-sentence span {
  border: 1px solid rgba(216, 180, 93, 0.22);
  border-radius: 6px;
  background: rgba(216, 180, 93, 0.08);
  padding: 0.55rem;
  font-weight: 800;
}

.theory-checks {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.theory-test-button {
  width: 100%;
}

.theory-stress {
  display: grid;
  gap: 0.55rem;
  border: 1px solid rgba(140, 192, 183, 0.22);
  border-radius: 8px;
  background: rgba(140, 192, 183, 0.06);
  padding: 0.7rem;
}

.theory-stress h4 {
  margin: 0;
}

.theory-stress-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.theory-stress-item {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  background: rgba(0,0,0,0.12);
  padding: 0.55rem;
}

.theory-stress-item strong {
  display: block;
  color: var(--ink);
  margin-bottom: 0.2rem;
}

.theory-stress-item p {
  margin: 0;
  line-height: 1.35;
}

.theory-stress-item.is-pass {
  border-color: rgba(143, 202, 117, 0.35);
  background: rgba(143, 202, 117, 0.08);
}

.theory-stress-item.is-warn {
  border-color: rgba(216, 180, 93, 0.35);
  background: rgba(216, 180, 93, 0.08);
}

.theory-stress-item.is-miss {
  border-color: rgba(212, 92, 82, 0.28);
  background: rgba(212, 92, 82, 0.06);
}

.theory-builder p {
  margin: 0;
  color: var(--muted);
}

.compact-stack {
  display: grid;
  gap: 0.5rem;
}

.compact-stack p,
.conflict-line {
  margin: 0;
  border-left: 3px solid rgba(216, 180, 93, 0.45);
  padding-left: 0.55rem;
  color: var(--muted);
}

.suspect-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.suspect-detail-grid section {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(0,0,0,0.12);
  padding: 0.8rem;
}

.reasoning-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0.75rem 0;
}

.timeline {
  gap: 0.75rem;
}

.timeline-slot {
  display: block;
}

.timeline-slot header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.timeline-slot header span {
  color: var(--muted);
}

.timeline-group {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 0.45rem 0;
}

.timeline-group summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 800;
}

.timeline-group summary span {
  color: var(--muted);
}

.empty-state {
  max-width: 520px;
}

@media (max-width: 1000px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    padding: 0.75rem;
  }

  .tab-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .briefing-grid,
  .room-map,
  .floorplan-shell,
  .filter-bar,
  .evidence-board,
  .deduction-chain,
  .theory-sentence,
  .theory-checks,
  .theory-stress-grid,
  .case-report-grid,
  .reasoning-strip,
  .suspect-detail-grid {
    grid-template-columns: 1fr;
  }

  .blueprint-grid {
    grid-template-columns: repeat(4, minmax(90px, 1fr));
    min-height: 460px;
  }

  .crime-scene-svg {
    min-width: 780px;
  }

  .map-route-toolbar,
  .crime-map-paper,
  .room-inspector {
    grid-column: 1;
    grid-row: auto;
  }

  .room-inspector {
    position: static;
    max-height: none;
  }

  .span-2 {
    grid-column: span 1;
  }
}

@media (max-width: 680px) {
  body {
    overflow-x: hidden;
  }

  .sidebar {
    gap: 0.5rem;
    padding: 0.6rem 0.7rem 0.65rem;
  }

  .brand-block {
    min-width: 0;
  }

  .brand-block .eyebrow {
    display: none;
  }

  .brand-block h1 {
    font-size: 1.28rem;
    margin-bottom: 0.12rem;
  }

  .case-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
  }

  .tab-nav {
    display: flex;
    overflow-x: auto;
    gap: 0.3rem;
    padding-bottom: 0.12rem;
    scroll-snap-type: x proximity;
  }

  .tab-button {
    min-width: 112px;
    justify-content: center;
    padding: 0.48rem 0.55rem;
    text-align: center;
    font-size: 0.82rem;
    scroll-snap-align: start;
  }

  .sidebar-footer {
    grid-template-columns: minmax(0, 1fr) minmax(6.7rem, 0.85fr) auto;
    gap: 0.38rem;
    align-items: center;
  }

  .difficulty {
    overflow: hidden;
    padding: 0.32rem 0.5rem;
    text-overflow: ellipsis;
    font-size: 0.72rem;
  }

  .difficulty-picker {
    gap: 0.12rem;
    font-size: 0.68rem;
  }

  .difficulty-picker select {
    padding-block: 0.36rem;
  }

  #new-case {
    min-width: 4.8rem;
    padding: 0.44rem 0.52rem;
    white-space: nowrap;
  }

  .site-return-link {
    grid-column: 1 / -1;
    min-height: 2rem;
    font-size: 0.72rem;
  }

  .workspace {
    padding: 0.7rem;
  }

  .resolution-metrics {
    grid-template-columns: 1fr;
  }

  .view-heading {
    align-items: start;
    flex-direction: column;
  }

  .map-mobile-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
  }

  .map-mobile-actions button {
    min-width: 8rem;
    padding-block: 0.48rem;
  }

  .map-mobile-actions span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
  }

  .floorplan-shell {
    min-width: 0;
  }

  .mobile-map-controls {
    display: grid;
    gap: 0.42rem;
  }

  .mobile-room-picker {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.1rem 0 0.2rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .mobile-room-picker button {
    flex: 0 0 auto;
    min-width: 6.5rem;
    padding: 0.38rem 0.5rem;
    color: var(--ink);
    background: rgba(255,255,255,0.05);
    border-color: rgba(216, 180, 93, 0.26);
    box-shadow: none;
    font-size: 0.78rem;
    scroll-snap-align: start;
  }

  .mobile-room-picker button.is-selected {
    background: rgba(140, 192, 183, 0.18);
    border-color: rgba(140, 192, 183, 0.58);
    color: #e8fffa;
  }

  .mobile-inspect-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(7.2rem, auto);
    gap: 0.45rem;
    align-items: center;
    border: 1px solid rgba(140, 192, 183, 0.26);
    border-radius: 8px;
    background: rgba(42, 41, 37, 0.94);
    padding: 0.42rem;
  }

  .mobile-inspect-bar span {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
  }

  .mobile-inspect-bar strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-inspect-bar small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .mobile-inspect-bar button {
    min-width: 7.2rem;
    padding-inline: 0.5rem;
  }

  .map-route-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
    gap: 0.38rem;
    padding: 0.38rem 0.42rem;
  }

  .map-route-toolbar label {
    font-size: 0.72rem;
  }

  .map-route-toolbar select {
    min-width: 0;
    width: 100%;
    padding-block: 0.42rem;
  }

  .route-legend {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 0;
    margin-left: 0;
    justify-content: flex-start;
  }

  .route-legend:not(.is-empty) {
    padding-top: 0.12rem;
  }

  .crime-map-paper {
    width: calc(100vw - 1.4rem);
    max-width: 100%;
    max-height: 62vh;
    padding: 0.55rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .crime-scene-svg {
    width: 780px;
    min-width: 780px;
    max-width: none;
  }

  .floorplan-shell.is-map-expanded {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    padding: 0.7rem;
    background: rgba(14, 14, 13, 0.98);
    overflow: hidden;
  }

  .floorplan-shell.is-map-expanded .map-expanded-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .floorplan-shell.is-map-expanded .map-expanded-actions span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
  }

  .floorplan-shell.is-map-expanded .crime-map-paper {
    width: 100%;
    max-width: none;
    max-height: none;
    min-height: 0;
    padding: 0.45rem;
    border-color: rgba(216, 180, 93, 0.38);
  }

  .floorplan-shell.is-map-expanded .crime-scene-svg {
    width: 960px;
    min-width: 960px;
  }

  .floorplan-shell.is-map-expanded .room-inspector {
    grid-column: 1;
    grid-row: auto;
    max-height: 28vh;
    overflow: auto;
  }

  .room-inspector {
    padding: 0.75rem;
  }

  .suspects-grid,
  .notes-grid {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    grid-template-columns: 1fr;
  }

  .evidence-quickfacts {
    grid-template-columns: 1fr;
  }

  .modal {
    max-height: 88vh;
  }
}