@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Serif+JP:wght@400;600&display=swap");

:root {
  --bg: #121817;
  --panel: #1a2321;
  --panel-2: #202b28;
  --line: #34433f;
  --line-soft: rgba(151, 177, 165, .18);
  --paper: #eee9db;
  --ink: #1a2421;
  --text: #e9e9df;
  --muted: #83918b;
  --mint: #9fc7b2;
  --gold: #d3b878;
  --rust: #b7654d;
  --danger: #d8665c;
  --water-1: #7f9c96;
  --water-2: #8797a8;
  --shadow: 0 22px 80px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 10%, rgba(95, 127, 115, .13), transparent 33%),
    linear-gradient(145deg, #151c1b, #0b100f 72%);
  font-family: "IBM Plex Mono", "Yu Gothic", monospace;
}
button { font: inherit; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.app { min-height: 100vh; padding: 14px; }
.topbar {
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(160px, .7fr) auto;
  align-items: center;
  gap: 24px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  background: rgba(19, 28, 26, .88);
  box-shadow: var(--shadow);
}
.eyebrow, .modal-kicker, .section-label {
  color: var(--mint);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
}
.brand h1 { margin: 3px 0 0; font: 400 28px/1 "Noto Serif JP", serif; letter-spacing: .12em; }
.status-strip { display: flex; gap: 24px; }
.status-strip div { min-width: 86px; }
.status-strip span, .resolution-status span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; letter-spacing: .13em; }
.status-strip strong { font-size: 12px; font-weight: 500; }
.resolution-status { position: relative; min-width: 130px; padding-left: 20px; }
.resolution-status strong { font-size: 13px; font-weight: 500; }
.resolution-status i { position: absolute; left: 0; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--water-1); box-shadow: 0 0 16px var(--water-1); }
.quiet-button { color: var(--muted); border: 1px solid var(--line); background: transparent; padding: 9px 12px; cursor: pointer; }
.quiet-button:hover { color: var(--text); border-color: var(--muted); }

.game-layout {
  display: grid;
  grid-template-columns: 188px minmax(560px, 1fr) 330px;
  gap: 12px;
  padding-top: 12px;
}
.camera-rail, .case-panel, .monitor-shell, .message-bar {
  border: 1px solid var(--line);
  background: rgba(23, 32, 30, .88);
  box-shadow: var(--shadow);
}
.camera-rail { min-height: calc(100vh - 116px); padding: 14px 11px; }
.rail-heading { display: flex; justify-content: space-between; align-items: center; padding: 3px 4px 13px; border-bottom: 1px solid var(--line); }
.rail-heading span { color: var(--muted); font-size: 8px; letter-spacing: .14em; }
.rail-heading strong { color: var(--muted); font-size: 9px; font-weight: 500; }
.rail-heading b { color: var(--paper); font-size: 14px; }
.camera-list { display: grid; gap: 7px; padding-top: 11px; }
.camera-button {
  min-height: 58px;
  display: grid;
  grid-template-columns: 31px 1fr;
  align-items: center;
  gap: 9px;
  padding: 8px;
  color: #9ba8a2;
  text-align: left;
  border: 1px solid var(--line-soft);
  background: rgba(7, 13, 12, .18);
  cursor: pointer;
  transition: .18s ease;
}
.camera-button:hover:not(:disabled) { transform: translateX(3px); border-color: #657b71; }
.camera-button.is-active { color: var(--paper); border-color: var(--mint); background: rgba(159, 199, 178, .08); }
.camera-button.is-visited .camera-thumb::after { opacity: 1; }
.camera-button:disabled { opacity: .36; cursor: not-allowed; }
.camera-thumb { position: relative; width: 31px; height: 31px; display: grid; place-items: center; color: #293530; background: #8aa096; font-size: 8px; }
.camera-thumb::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 7px; height: 7px; border: 2px solid var(--panel); border-radius: 50%; background: var(--mint); opacity: 0; }
.camera-button:disabled .camera-thumb { background: #44514c; }
.camera-copy small { display: block; margin-bottom: 4px; color: #65736d; font-size: 7px; letter-spacing: .12em; }
.camera-copy strong { display: block; font-size: 10px; font-weight: 500; line-height: 1.35; }
.network-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 17px; padding: 12px 5px 0; color: #68766f; border-top: 1px solid var(--line); }
.network-note p { margin: 0; font-size: 8px; line-height: 1.65; }
.signal-dot { width: 7px; height: 7px; margin-top: 2px; flex: none; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }

.monitor-column { min-width: 0; }
.monitor-shell { padding: 9px; }
.monitor-head { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 7px 8px; }
.monitor-head span { margin-right: 10px; color: var(--mint); font-size: 8px; letter-spacing: .14em; }
.monitor-head strong { font-size: 12px; font-weight: 500; }
.monitor-status { display: flex; align-items: center; gap: 15px; }
.report-budget { display: flex; align-items: baseline; gap: 7px; padding-right: 14px; border-right: 1px solid var(--line); }
.report-budget span { margin: 0; color: var(--muted); }
.report-budget strong { color: var(--gold); font-size: 11px; }
.rec { display: flex; align-items: center; gap: 7px; color: #a8b1ac; font-size: 8px; }
.rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); animation: blink 1.5s steps(1) infinite; }
@keyframes blink { 50% { opacity: .24; } }
.monitor { position: relative; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #42534e; background: #7c958f; isolation: isolate; cursor: crosshair; touch-action: none; user-select: none; }
.monitor.is-report-disabled { cursor: default; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.camera-feed-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  animation: camera-cut .18s ease-out;
}
.camera-feed-image.is-outlined {
  filter: contrast(1.08) saturate(.72);
  outline: 3px solid rgba(230, 220, 187, .58);
  outline-offset: -12px;
}
.camera-feed-image.is-paranoia {
  filter: contrast(1.18) saturate(.66) sepia(.2) hue-rotate(325deg);
}
@keyframes camera-cut {
  from { opacity: .42; filter: brightness(1.25) contrast(.75); }
  to { opacity: 1; }
}
.scanlines { position: absolute; z-index: 30; inset: 0; pointer-events: none; opacity: .13; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(9, 16, 15, .55) 4px); }
.monitor-vignette { position: absolute; z-index: 29; inset: 0; pointer-events: none; box-shadow: inset 0 0 100px rgba(5, 12, 11, .48); }
.monitor-caption { position: absolute; z-index: 31; left: 13px; right: 13px; bottom: 10px; display: flex; justify-content: space-between; color: rgba(245, 246, 231, .7); font-size: 8px; letter-spacing: .09em; text-shadow: 0 1px 3px #000; }

.spatial-report-layer { position: absolute; z-index: 42; inset: 0; pointer-events: none; }
.report-anchor { position: absolute; width: 0; height: 0; pointer-events: none; }
.report-anchor::before {
  content: ""; position: absolute; left: -8px; top: -8px; width: 14px; height: 14px;
  border: 1px solid var(--gold); border-radius: 50%; background: rgba(19, 28, 26, .58);
  box-shadow: 0 0 0 4px rgba(211, 184, 120, .12);
}
.report-menu {
  position: absolute; left: 17px; top: 17px; width: 220px; padding: 8px;
  color: var(--text); border: 1px solid #6c7b75; background: rgba(19, 28, 26, .97);
  box-shadow: 0 15px 45px rgba(0, 0, 0, .48); pointer-events: auto;
}
.report-menu.opens-left { left: auto; right: 17px; }
.report-menu.opens-up { top: auto; bottom: 17px; }
.report-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; padding: 2px 3px 7px; border-bottom: 1px solid var(--line); }
.report-menu-head strong { color: var(--gold); font-size: 8px; letter-spacing: .12em; }
.report-menu-head button { width: 24px; height: 24px; color: var(--muted); border: 0; background: transparent; cursor: pointer; }
.report-type-button { width: 100%; padding: 7px 8px; color: #d7ddd8; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 8px; }
.report-type-button:hover { color: var(--ink); background: var(--gold); }
.hold-target {
  position: absolute; left: -42px; top: -42px; width: 84px; height: 84px; padding: 0;
  color: var(--paper); border: 0; border-radius: 50%; background: rgba(17, 25, 23, .64);
  pointer-events: none;
}
.hold-target svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hold-target circle { fill: none; stroke-width: 7; }
.hold-track { stroke: rgba(238, 233, 219, .22); }
.hold-progress { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 270.177; stroke-dashoffset: 270.177; }
.hold-target span { position: relative; z-index: 1; font-size: 8px; pointer-events: none; }
.hold-copy {
  position: absolute; left: 51px; top: -27px; width: max-content; max-width: 210px; padding: 8px 10px;
  color: var(--paper); border-left: 2px solid var(--gold); background: rgba(19, 28, 26, .92);
  text-shadow: 0 1px 2px #000; pointer-events: none;
}
.hold-copy strong, .hold-copy small { display: block; }
.hold-copy strong { margin-bottom: 4px; font-size: 8px; }
.hold-copy small { color: #aeb9b4; font-size: 7px; }
.report-anchor.near-right .hold-copy { left: auto; right: 51px; border-right: 2px solid var(--gold); border-left: 0; text-align: right; }

/* CSS surveillance scenes */
.scene-base { position: absolute; inset: 0; background: linear-gradient(#aabbb3 0 50%, #819088 50% 100%); filter: saturate(.65) contrast(.92); }
.sky { position: absolute; inset: 0 0 42%; background: linear-gradient(#aab9bd, #c1c5b5); }
.ground { position: absolute; inset: 58% 0 0; background: linear-gradient(160deg, #829088, #67776f); }
.road { position: absolute; left: 30%; bottom: -15%; width: 45%; height: 75%; background: #8e938b; transform: perspective(300px) rotateX(55deg); opacity: .8; }
.house { position: absolute; bottom: 29%; width: 24%; height: 34%; background: #a6aa99; border: 3px solid rgba(51, 65, 60, .32); box-shadow: 0 18px 35px rgba(22, 34, 31, .22); }
.house::before { content: ""; position: absolute; left: -8%; right: -8%; top: -31%; height: 35%; background: #6c7974; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.house::after { content: ""; position: absolute; left: 38%; bottom: 0; width: 24%; height: 46%; background: #65736d; }
.house.a { left: 7%; }.house.b { right: 8%; transform: scale(.82); transform-origin: bottom; }
.tree { position: absolute; bottom: 34%; width: 8%; height: 25%; background: #596e63; border-radius: 55% 45% 50% 48%; filter: blur(2px); }
.tree::after { content: ""; position: absolute; left: 45%; top: 75%; width: 12%; height: 45%; background: #5a5b4c; }
.tree.t1 { left: 4%; }.tree.t2 { left: 42%; transform: scale(.8); }.tree.t3 { right: 3%; transform: scale(1.15); }
.ridge { position: absolute; z-index: 2; left: 0; right: 0; top: 20%; height: 34%; background: #738890; clip-path: polygon(0 68%, 10% 49%, 18% 57%, 27% 32%, 38% 48%, 47% 20%, 61% 49%, 72% 24%, 84% 50%, 94% 31%, 100% 48%, 100% 100%, 0 100%); filter: blur(5px); opacity: .78; transition: .8s ease; }
.mist { position: absolute; z-index: 3; top: 26%; left: 48%; width: 35%; height: 18%; background: rgba(225, 225, 210, .66); border-radius: 50%; filter: blur(18px); transition: .8s ease; }
.far-line { position: absolute; z-index: 3; top: 49%; left: 7%; width: 86%; height: 4%; background: rgba(206, 218, 210, .58); transform: rotate(-3deg); filter: blur(3px); transition: .8s ease; }
.city-revealed .ridge { height: 39%; background: repeating-linear-gradient(90deg, #464f51 0 19px, #252d30 20px 23px); clip-path: polygon(0 18%, 6% 18%, 6% 5%, 13% 5%, 13% 25%, 22% 25%, 22% 0, 32% 0, 32% 30%, 39% 30%, 39% 8%, 50% 8%, 50% 21%, 60% 21%, 60% 3%, 70% 3%, 70% 26%, 79% 26%, 79% 10%, 91% 10%, 91% 22%, 100% 22%, 100% 100%, 0 100%); filter: none; opacity: .95; }
.city-revealed .ridge::after { content: ""; position: absolute; inset: 8% 2%; background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(221, 175, 91, .28) 10px 12px); }
.city-revealed .mist { top: 16%; left: 63%; width: 11%; height: 35%; border-radius: 0; background: linear-gradient(90deg, #5b6262 0 22%, rgba(218, 218, 203, .72) 24% 100%); filter: blur(2px); opacity: .78; }
.city-revealed .far-line { top: 46%; height: 7%; background: repeating-linear-gradient(0deg, #333d3c 0 5px, #85938a 6px 8px); filter: none; box-shadow: 0 4px 0 #222a29; }
.paranoia .city-revealed .ridge { background: repeating-linear-gradient(90deg, #391f25 0 19px, #170f13 20px 23px); animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scaleY(1.04); transform-origin: bottom; } }

.square-clock { position: absolute; z-index: 5; left: 45%; top: 31%; width: 12%; aspect-ratio: 1; display: grid; place-items: center; border: 5px solid #55655f; border-radius: 50%; background: #c6c5b5; color: #394541; font-size: 9px; }
.notice-board { position: absolute; z-index: 5; left: 41%; bottom: 28%; width: 20%; height: 20%; padding: 8px; color: #56625c; background: #c8c1a7; border: 7px solid #67756e; text-align: center; font-size: 8px; line-height: 1.5; }
.shop-front { position: absolute; left: 9%; right: 9%; bottom: 19%; height: 62%; background: #898d7c; border: 8px solid #59655f; }
.shop-sign { position: absolute; left: 33%; top: -13%; width: 35%; padding: 8px; color: #39433f; background: #b7a985; text-align: center; font: 600 11px/1 "Noto Serif JP", serif; }
.shelf { position: absolute; top: 20%; bottom: 8%; width: 23%; border: 4px solid #5a5a4c; background: repeating-linear-gradient(0deg, #8b7c62 0 8%, #5e594c 9% 11%); }
.shelf.s1 { left: 8%; }.shelf.s2 { left: 38%; }.shelf.s3 { right: 8%; }
.depot { position: absolute; inset: 17% 8% 19%; background: #8b9187; border: 8px solid #59645f; }
.depot-door { position: absolute; bottom: 0; width: 31%; height: 63%; background: repeating-linear-gradient(90deg, #66736e 0 16px, #53605b 17px 20px); }
.depot-door.d1 { left: 10%; }.depot-door.d2 { right: 10%; }
.crate { position: absolute; z-index: 4; width: 15%; height: 14%; background: #9d8768; border: 3px solid #625b4a; }
.homes-window { position: absolute; z-index: 5; left: 20%; top: 22%; width: 60%; height: 48%; background: #8d968e; border: 14px solid #56635e; box-shadow: inset 0 0 0 3px #85938d; }
.pipe-bank { position: absolute; left: 13%; bottom: 14%; width: 74%; height: 20%; background: repeating-linear-gradient(0deg, #626e69 0 8px, transparent 9px 17px); }
.warehouse { position: absolute; inset: 12% 7% 16%; background: #787f79; border: 7px solid #505b56; }
.warehouse-grid { position: absolute; inset: 9%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; }
.warehouse-grid i { background: #948167; border: 2px solid #5c5547; }
.alley-wall { position: absolute; inset: 0; background: linear-gradient(100deg, #68756f 0 57%, #89918a 58%); }
.alley-path { position: absolute; left: 33%; bottom: -10%; width: 32%; height: 90%; background: #737a72; transform: perspective(320px) rotateX(52deg); }
.gate { position: absolute; left: 28%; top: 12%; width: 44%; height: 73%; border: 14px solid #4c5954; background: #7f8b85; }
.gate::after { content: ""; position: absolute; left: 48%; top: 0; bottom: 0; width: 4%; background: #4b5752; }
.terminal-room { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, #64736d, #283431 66%); }
.terminal-arm { position: absolute; left: 38%; top: 9%; width: 24%; height: 58%; border: 14px solid #677a72; border-bottom-width: 28px; border-radius: 44% 44% 18% 18%; transform: rotate(4deg); box-shadow: 0 0 30px rgba(160, 201, 180, .2); }
.terminal-eye { position: absolute; left: calc(50% - 27px); top: 40%; width: 54px; height: 54px; border: 9px solid #879d93; border-radius: 50%; background: #171f1d; box-shadow: 0 0 30px rgba(191, 113, 84, .38); }
.terminal-eye::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 20px var(--rust); }
.archive-wall { position: absolute; inset: 7%; padding: 4%; background: #65716c; border: 8px solid #404b47; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.archive-paper { position: relative; background: #bcb7a6; border: 3px solid #777568; }
.archive-paper::before { content: "異常なし"; position: absolute; left: 8%; bottom: 10%; padding: 4px 6px; color: rgba(100, 55, 45, .7); border: 2px solid rgba(125, 67, 54, .56); transform: rotate(-8deg); font-size: 8px; }

.person { position: absolute; z-index: 8; width: 32px; height: 82px; filter: blur(2px); opacity: .82; }
.person::before { content: ""; position: absolute; left: 7px; top: 0; width: 19px; height: 19px; border-radius: 50%; background: #766f64; }
.person::after { content: ""; position: absolute; left: 2px; top: 20px; width: 28px; height: 52px; background: #596b67; clip-path: polygon(21% 0, 79% 0, 100% 100%, 0 100%); }
.person.haru::after { background: #6a7d72; }
.person.absent { display: none; }

/* Report-driven anomaly visuals. These are never clickable: the player reports
   the current camera and anomaly type from the case panel. */
.anomaly-visual { transition: filter .35s ease, opacity .35s ease, transform .35s ease; }
.person-tag {
  position: absolute; left: 50%; top: -17px; transform: translateX(-50%);
  padding: 2px 4px; color: rgba(238, 233, 219, .66); background: rgba(23, 31, 29, .54);
  font-size: 7px; white-space: nowrap;
}
.at-depot { z-index: 8; left: 49%; bottom: 7%; }
.returned { left: 48%; bottom: 27%; filter: blur(1px); }
.pawmarks {
  position: absolute; z-index: 9; left: 28%; bottom: 23%; color: #4c5953;
  font: 700 11px/1.7 monospace; letter-spacing: 2px; transform: rotate(-24deg);
  filter: blur(1px); opacity: .8;
}
.cat-shape { position: absolute; z-index: 9; right: 22%; bottom: 28%; width: 55px; height: 26px; border-radius: 50% 45% 42% 45%; background: #4f5d57; filter: blur(2px); }
.cat-shape::before { content: ""; position: absolute; right: -9px; top: -9px; width: 24px; height: 24px; border-radius: 50%; background: #4f5d57; }
.cat-shape::after { content: ""; position: absolute; right: -8px; top: -15px; width: 20px; height: 15px; background: #4f5d57; clip-path: polygon(0 100%, 15% 0, 48% 61%, 83% 0, 100% 100%); }
.cat-shape i { position: absolute; left: -30px; top: 1px; width: 39px; height: 9px; border: 6px solid #4f5d57; border-right: 0; border-bottom: 0; border-radius: 80% 0 0; transform: rotate(12deg); }
.gas-haze { position: absolute; z-index: 8; left: 7%; bottom: 10%; width: 49%; height: 31%; border-radius: 50%; background: rgba(219, 222, 194, .58); filter: blur(24px); animation: gas-drift 3.4s ease-in-out infinite alternate; }
.pipe-break { position: absolute; z-index: 9; left: 35%; bottom: 23%; width: 25px; height: 25px; border: 4px solid rgba(224, 217, 183, .82); border-radius: 50%; box-shadow: 0 0 22px rgba(230, 224, 191, .62); }
@keyframes gas-drift { to { transform: translate(30px, -14px) scale(1.15); opacity: .72; } }
.crate.c1 { left: 14%; bottom: 9%; }
.crate.c2 { left: 30%; bottom: 9%; transform: scale(.86); }
.crate-moved { left: 69% !important; bottom: 18% !important; transform: rotate(8deg); box-shadow: 0 0 0 3px rgba(226, 214, 181, .24); }
.tag-hook { position: absolute; z-index: 8; top: 11%; right: 8%; width: 50px; min-height: 58px; padding: 20px 5px 5px; color: #49534f; background: #c3baa1; border: 3px solid #5c6862; text-align: center; font-size: 8px; line-height: 1.5; }
.tag-hook i { position: absolute; left: calc(50% - 5px); top: 6px; width: 10px; height: 10px; border: 2px solid #5e6863; border-radius: 50%; }
.tag-hook.anomaly-visual { background: repeating-linear-gradient(135deg, #c3baa1 0 7px, #9b9077 8px 9px); box-shadow: 0 0 23px rgba(228, 219, 186, .25); }
.destination-slip { position: absolute; z-index: 8; left: 45%; top: 11%; padding: 5px 8px; color: #424b47; background: #bdb6a1; border: 2px solid #5d6863; font-size: 8px; transform: rotate(-2deg); }
.bag-object { left: 44%; bottom: 14%; width: 16%; height: 27%; border-radius: 38% 38% 16% 16%; }
.bag-object::before { content: ""; position: absolute; left: 19%; top: -26%; width: 62%; height: 38%; border: 7px solid currentColor; border-bottom: 0; border-radius: 50% 50% 0 0; color: rgba(60, 71, 66, .75); }
.bag-object.hiking { height: 39%; width: 19%; border-radius: 50% 50% 20% 20%; transform: translateY(2%); }
.bag-object.toolbox { width: 27%; height: 17%; border-radius: 3px; transform: translate(-18%, -5%); }
.bag-object.real { color: #35413d; border: 3px solid #303b37; background: linear-gradient(135deg, #45564f, #28352f); }
.bag-object span { position: absolute; left: 9%; right: 9%; bottom: 15%; color: #d1c6a3; font-size: 7px; text-align: center; }
.bag-tear { left: 38%; bottom: 8%; width: 29%; height: 45%; }
.surplus-mark { position: absolute; padding: 3px 4px; color: #713d34; background: #c7bba0; border: 2px solid #8d5146; font-size: 7px; transform: rotate(-8deg); }
.warehouse-grid i { position: relative; }
.outside-pack { position: absolute; z-index: 9; left: 56%; bottom: 18%; width: 82px; height: 89px; border-radius: 44% 44% 18% 18%; background: #44534d; filter: blur(2px); box-shadow: 0 0 20px rgba(223, 216, 190, .18); }
.outside-pack::before { content: ""; position: absolute; left: -25px; bottom: 4px; width: 22px; height: 67px; border: 6px solid #4a5953; border-radius: 50%; }
.outside-pack i { position: absolute; right: -19px; bottom: 4px; width: 16px; height: 69px; background: #555d50; transform: rotate(12deg); }
.road-person { left: 48%; bottom: 21%; transform: scale(.8); }
.road-person .pack-shape { position: absolute; z-index: -1; left: -8px; top: 21px; width: 22px; height: 40px; border-radius: 45% 30% 15% 30%; background: #454f4b; }
.person-real { filter: none; opacity: 1; outline: 2px solid rgba(238, 233, 219, .58); }
.person-tear { left: 43%; bottom: 14%; width: 16%; height: 52%; }
.logistics-scene { background: radial-gradient(circle at 50% 42%, #7d8d87, #4d5d57); }
.logistics-board { position: absolute; inset: 12% 11% 16%; padding: 6% 8%; color: #d4d5c7; border: 9px solid #495852; background: #26322f; box-shadow: inset 0 0 50px rgba(0, 0, 0, .3); }
.logistics-board h3 { margin: 0 0 25px; color: #a9bdaf; font-size: clamp(10px, 1.3vw, 16px); letter-spacing: .1em; }
.logistics-board > div { display: flex; justify-content: space-between; margin: 0 0 13px; padding: 10px; border-bottom: 1px solid #52635c; font-size: clamp(8px, 1vw, 12px); }
.logistics-board small { display: block; color: #7e9088; text-align: right; font-size: 8px; }
.logistics-board .zero-row { color: #e5b5aa; background: rgba(164, 74, 60, .17); animation: record-pulse 2.1s ease-in-out infinite; }
@keyframes record-pulse { 50% { background: rgba(164, 74, 60, .31); } }
.far-grid { position: absolute; z-index: 10; left: 11%; right: 9%; top: 23%; height: 20%; opacity: .65; background: repeating-linear-gradient(90deg, transparent 0 19px, rgba(233, 223, 192, .72) 20px 21px), repeating-linear-gradient(0deg, transparent 0 10px, rgba(233, 223, 192, .46) 11px 12px); filter: blur(2px); clip-path: polygon(0 59%, 12% 39%, 28% 52%, 43% 22%, 62% 55%, 75% 31%, 100% 49%, 100% 100%, 0 100%); }
.wide-tear { z-index: 14; left: 2%; right: 2%; top: 15%; height: 43%; }
.city-suspect .ridge { filter: blur(2px); }
.terminal-arm.watching { animation: arm-watch 2.5s ease-in-out infinite alternate; }
.terminal-eye.watching { animation: eye-watch 1.8s ease-in-out infinite alternate; }
@keyframes arm-watch { to { transform: translateX(5%) rotate(-4deg); } }
@keyframes eye-watch { to { transform: translateX(18px); box-shadow: 0 0 45px rgba(191, 113, 84, .7); } }
.terminal-copy { position: absolute; left: 17%; right: 17%; bottom: 12%; padding: 12px; color: #b8c7bf; border: 1px solid #60716a; background: rgba(20, 29, 26, .8); text-align: center; font-size: 10px; line-height: 1.7; letter-spacing: .12em; }
.paper-erased { background: linear-gradient(rgba(188, 183, 166, .78), rgba(188, 183, 166, .78)), repeating-linear-gradient(0deg, transparent 0 12px, #686b61 13px 14px); box-shadow: 0 0 0 3px rgba(201, 175, 119, .25); }
.paper-erased::after { content: "未解決"; position: absolute; top: 15%; right: 8%; color: rgba(117, 58, 48, .8); border: 2px solid rgba(117, 58, 48, .6); padding: 3px; font-size: 7px; transform: rotate(8deg); }

.hotspot {
  position: absolute;
  z-index: 20;
  min-width: 31px;
  min-height: 31px;
  border: 1px solid rgba(239, 232, 206, .28);
  border-radius: 50%;
  background: rgba(238, 233, 219, .05);
  cursor: pointer;
  animation: hotspot 2.1s ease-in-out infinite;
}
.hotspot::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(238, 233, 219, .52); border-radius: 50%; }
.hotspot:hover { border-color: var(--gold); background: rgba(211, 184, 120, .16); }
.hotspot.is-resolved { border-radius: 3px; border-color: var(--mint); animation: none; }
.hotspot.is-real { border-radius: 0; border-color: #e4dcc6; background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 6px rgba(255, 255, 255, .05), 0 0 34px rgba(255, 255, 255, .2); animation: none; }
@keyframes hotspot { 50% { transform: scale(1.09); box-shadow: 0 0 22px rgba(238, 233, 219, .16); } }
.blur-object { position: absolute; z-index: 7; filter: blur(9px); background: rgba(74, 90, 83, .75); transition: .5s ease; }
.blur-object.outlined { filter: blur(2px); outline: 2px solid rgba(226, 218, 191, .66); }
.blur-object.real { filter: none; background: #4d5b56; box-shadow: 0 0 0 5px rgba(242, 236, 215, .2); }
.tear { position: absolute; z-index: 18; pointer-events: none; border: 3px solid rgba(241, 235, 217, .86); filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .36)); clip-path: polygon(5% 11%, 21% 2%, 36% 8%, 52% 0, 71% 7%, 94% 2%, 100% 28%, 94% 50%, 100% 77%, 87% 100%, 66% 94%, 48% 100%, 31% 92%, 9% 99%, 1% 70%, 7% 49%, 0 27%); }

.message-bar { min-height: 78px; display: grid; grid-template-columns: 44px 1fr; gap: 13px; align-items: center; margin-top: 10px; padding: 11px 15px; }
.speaker-mark { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink); border-radius: 50%; background: var(--paper); font: 600 13px/1 "Noto Serif JP", serif; }
.message-copy span { display: block; margin-bottom: 6px; color: var(--mint); font-size: 8px; letter-spacing: .13em; }
.message-copy p { margin: 0; font-family: "Noto Serif JP", serif; font-size: 12px; line-height: 1.7; }
.controls { display: flex; gap: 22px; padding: 9px 2px 0; color: #63716b; font-size: 8px; }
kbd { min-width: 18px; display: inline-block; padding: 2px 4px; text-align: center; border: 1px solid #44534e; border-radius: 2px; }
.controls .build { margin-left: auto; }

.case-panel { min-height: calc(100vh - 116px); padding: 19px 17px; }
.case-heading { position: relative; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.case-number { position: absolute; right: 0; top: 0; color: #4a5a54; font-size: 25px; }
.case-heading h2 { margin: 8px 0 8px; font: 600 22px/1.4 "Noto Serif JP", serif; }
.case-heading p { margin: 0; color: #8d9993; font-size: 9px; line-height: 1.7; }
.objective-box { margin: 15px 0; padding: 12px; border-left: 2px solid var(--gold); background: rgba(211, 184, 120, .07); }
.objective-box span { display: block; margin-bottom: 6px; color: #8c968f; font-size: 7px; letter-spacing: .13em; }
.objective-box strong { font-size: 10px; line-height: 1.6; font-weight: 500; }
.section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; color: var(--muted); font-size: 8px; letter-spacing: .12em; }
.section-title b { color: var(--paper); font-size: 13px; }
.evidence-list { min-height: 130px; display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.evidence-item { position: relative; padding: 9px 10px 9px 25px; color: #b4bcb7; border: 1px solid var(--line-soft); background: rgba(7, 13, 12, .2); font-size: 9px; line-height: 1.5; }
.evidence-item::before { content: "✓"; position: absolute; left: 9px; top: 9px; color: var(--gold); }
.empty-evidence { padding: 20px 10px; color: #52605a; text-align: center; border: 1px dashed #34413d; font-size: 8px; }
.action-section { margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); }
.section-label { display: block; margin-bottom: 9px; }
.case-actions { display: grid; gap: 7px; }
.report-guide { margin: 0; padding: 11px; color: #acb8b2; border: 1px dashed #52635c; background: rgba(159, 199, 178, .04); font-size: 9px; line-height: 1.65; }
.case-action {
  width: 100%; min-height: 43px; padding: 8px 11px;
  color: #d7ddd8; text-align: left; border: 1px solid #455650; background: #26322f; cursor: pointer; font-size: 9px; line-height: 1.45; transition: .18s ease;
}
.case-action:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--mint); background: #2d3b37; }
.case-action.primary { color: var(--ink); border-color: var(--gold); background: var(--gold); font-weight: 600; }
.case-action.danger { border-color: rgba(216, 102, 92, .65); color: #efb1aa; }
.case-action:disabled { opacity: .36; cursor: not-allowed; }
.report-rule { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.report-rule span { color: #63736c; font-size: 7px; letter-spacing: .14em; }
.report-rule p { margin: 6px 0 0; color: #68756f; font-size: 8px; line-height: 1.65; }

.modal-layer { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(4, 8, 8, .78); backdrop-filter: blur(13px); opacity: 0; pointer-events: none; transition: .3s ease; }
.modal-layer.is-open { opacity: 1; pointer-events: auto; }
.modal-card { position: relative; width: min(640px, 100%); max-height: calc(100vh - 44px); overflow: auto; padding: 39px 42px 34px; color: var(--ink); background: var(--paper); box-shadow: 0 34px 100px rgba(0, 0, 0, .58); }
.modal-card::after { content: ""; position: absolute; inset: 10px; pointer-events: none; border: 1px solid rgba(28, 39, 35, .14); }
.modal-card.is-ending { width: min(720px, 100%); }
.modal-kicker { color: #5b7568; }
.modal-card h2 { position: relative; z-index: 1; margin: 13px 0 17px; font: 600 clamp(27px, 4vw, 44px)/1.35 "Noto Serif JP", serif; letter-spacing: .04em; }
.modal-body { position: relative; z-index: 1; color: #535e59; font: 400 12px/1.9 "Noto Serif JP", serif; }
.modal-body p { margin: 0 0 12px; }
.modal-body strong { color: var(--ink); }
.modal-body .quote { margin: 19px 0; padding: 13px 16px; border-left: 2px solid var(--rust); background: rgba(90, 105, 98, .08); }
.modal-body .meta-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0; }
.modal-body .meta-card span { padding: 10px; border: 1px solid #c7c1b3; font: 500 9px/1.5 "IBM Plex Mono", monospace; }
.modal-actions { position: relative; z-index: 1; display: grid; gap: 8px; margin-top: 24px; }
.modal-button { min-height: 51px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 15px; color: var(--paper); border: 0; background: var(--ink); text-align: left; cursor: pointer; font-size: 10px; line-height: 1.5; }
.modal-button:hover { background: #2d3b37; }
.modal-button.light { color: var(--ink); border: 1px solid #aaa89d; background: rgba(255, 255, 255, .24); }
.modal-button.light:hover { background: rgba(255, 255, 255, .7); }
.modal-button.danger { background: #6f3c35; }
.modal-button:disabled { opacity: .34; cursor: not-allowed; }
.modal-button small { color: inherit; opacity: .68; font-size: 8px; }
.ending-mark { width: 74px; height: 4px; margin-bottom: 23px; background: var(--rust); }
.ending-code { color: #65736c; font: 500 9px/1 "IBM Plex Mono", monospace; letter-spacing: .18em; }

.toast { position: fixed; z-index: 140; left: 50%; bottom: 25px; transform: translate(-50%, 18px); padding: 11px 17px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .22s ease; font-size: 9px; }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 1180px) {
  .game-layout { grid-template-columns: 160px minmax(480px, 1fr) 290px; }
  .status-strip { gap: 12px; }
}
@media (max-width: 960px) {
  .topbar { grid-template-columns: 1fr auto auto; }
  .status-strip { display: none; }
  .game-layout { grid-template-columns: 145px 1fr; }
  .case-panel { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .case-heading { grid-column: 1 / -1; }
  .objective-box { grid-column: 1 / -1; margin: 0; }
  .report-rule { display: none; }
}
@media (max-width: 680px) {
  .app { padding: 7px; }
  .topbar { gap: 10px; padding: 8px 10px; }
  .brand h1 { font-size: 22px; }
  .resolution-status { display: none; }
  .game-layout { grid-template-columns: 1fr; }
  .camera-rail { min-height: 0; }
  .camera-list { grid-template-columns: repeat(2, 1fr); }
  .monitor { min-height: 0; }
  .case-panel { grid-template-columns: 1fr; }
  .case-heading, .objective-box { grid-column: auto; }
  .controls { display: none; }
  .modal-card { padding: 32px 24px 25px; }
  .modal-body .meta-card { grid-template-columns: 1fr; }
}

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