:root {
  --ink: #e9e4ea;
  --dim: #8d8794;
  --bg: #07070a;
  --panel: rgba(14, 12, 18, 0.94);
  --line: rgba(255, 255, 255, 0.1);
  --red: #c8344a;
  --rose: #f0a7bd;
  --cyan: #8fe6dc;
  --paper: #e9e3d4;
  --paper-ink: #2a2420;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; touch-action: none; }
#fx { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.85) 100%); transition: background 0.4s; }
#fx.low { background: radial-gradient(ellipse at center, transparent 30%, rgba(90, 0, 18, 0.75) 80%, rgba(20, 0, 4, 0.98) 100%); animation: pulse 1.1s infinite; }
#fx.hit { background: radial-gradient(ellipse at center, rgba(160, 0, 30, 0.2) 10%, rgba(110, 0, 20, 0.9) 100%); }
@keyframes pulse { 50% { opacity: 0.7; } }
#grain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.09; mix-blend-mode: screen; image-rendering: pixelated; }

/* 突脸 */
#scare { position: fixed; inset: 0; z-index: 50; background: #000; display: grid; place-items: center; pointer-events: none; overflow: hidden; }
#scare .face { height: 130vh; width: auto; max-width: none; object-fit: cover; image-rendering: auto; }
#scare canvas.face { image-rendering: pixelated; height: 120vh; }
#scare.go .face { animation: lunge 0.45s cubic-bezier(.2, 2, .4, 1) forwards; }
@keyframes lunge { 0% { transform: scale(0.6); filter: contrast(2) brightness(0.3) hue-rotate(-30deg); } 30% { transform: scale(1.25) translate(2%, -1%); filter: contrast(1.8) saturate(1.6) invert(0.12); } 60% { transform: scale(1.18) translate(-2%, 1%); } 100% { transform: scale(1.3); filter: contrast(1.5) brightness(0.7); } }

#lightbox { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.92); display: grid; place-items: center; cursor: zoom-out; }
#lightbox img { max-width: 94vw; max-height: 94vh; }

.screen { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 30%, rgba(60, 8, 20, 0.55), rgba(0, 0, 0, 0.92)); z-index: 10; padding: 16px; overflow: auto; }
.screen.dark { background: rgba(0, 0, 0, 0.88); }
.title-card { width: min(580px, 100%); background: var(--panel); border: 1px solid var(--line); padding: 30px; box-shadow: 0 0 80px rgba(200, 52, 74, 0.15); max-height: 100%; overflow: auto; }
.title-card.narrow { width: min(440px, 100%); text-align: center; }
.title-card.paper { background: linear-gradient(#ebe5d6, #ddd4c0); color: var(--paper-ink); width: min(680px, 100%); box-shadow: 0 0 0 1px #000, 0 20px 80px rgba(0, 0, 0, 0.8); }
.paper .kicker { color: #8d1c2c; }
.paper input, .paper select, .paper textarea { background: rgba(255, 255, 255, 0.55); border-color: #b7ab94; color: var(--paper-ink); }
.paper label { color: #4a3f36 !important; }
.paper button.ghost { border-color: #8f8470; }
.clauses { font-size: 14px; line-height: 1.8; padding-left: 20px; margin: 0 0 8px; }
.kicker { letter-spacing: 0.3em; font-size: 12px; color: var(--red); margin: 0 0 8px; font-family: ui-monospace, monospace; }
h1 { font-size: 46px; margin: 0 0 8px; letter-spacing: 0.15em; text-shadow: 0 0 18px rgba(200, 52, 74, 0.6), 2px 0 0 rgba(143, 230, 220, 0.35); }
h2 { margin: 0 0 12px; }
h3 { margin: 18px 0 6px; font-size: 16px; }
.lede { color: #cfc6d2; line-height: 1.8; }
.small { color: var(--dim); font-size: 13px; line-height: 1.6; }
label { display: grid; gap: 6px; margin: 12px 0; font-size: 14px; color: #cfc6d2; }
label.check { display: flex; align-items: center; gap: 8px; }
input, select, textarea { background: #0d0c12; border: 1px solid #2b2733; padding: 10px 12px; border-radius: 2px; outline: none; width: 100%; }
input[type=checkbox] { width: auto; }
input[type=range] { padding: 0; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--red); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.col { display: grid; gap: 10px; margin-top: 12px; }
.spacer { flex: 1; }
button, .btn-like { background: #1a1720; border: 1px solid #3a3442; padding: 10px 18px; cursor: pointer; border-radius: 2px; transition: 0.15s; text-align: center; display: inline-block; }
button:hover, .btn-like:hover { border-color: var(--rose); }
button:disabled { opacity: 0.5; cursor: wait; }
button.primary { background: var(--red); border-color: var(--red); color: #fff; letter-spacing: 0.1em; }
button.primary:hover { background: #e0465d; }
button.ghost { background: transparent; }
button.danger { border-color: #7d1f30; color: #ffb3c0; }
button.tiny, .btn-like { padding: 5px 10px; font-size: 13px; }
button.locked { color: var(--dim); }

/* 开场 */
#introGate { position: absolute; inset: 0; margin: auto; width: min(360px, 80vw); height: 120px; display: grid; gap: 8px; place-content: center; background: transparent; border: 1px solid rgba(200, 52, 74, 0.5); font-size: 18px; letter-spacing: 0.2em; animation: breathe 2.4s infinite; z-index: 2; }
#introGate small { color: var(--dim); letter-spacing: 0.05em; font-size: 12px; }
@keyframes breathe { 50% { box-shadow: 0 0 40px rgba(200, 52, 74, 0.35); } }
#typer { width: min(720px, 92vw); font-family: ui-monospace, "Cascadia Mono", "Sarasa Mono SC", monospace; font-size: 18px; line-height: 2; color: #e7dfe6; text-shadow: 0 0 6px rgba(255, 90, 120, 0.4); }
#typer p { margin: 0 0 6px; }
#typer p:last-child::after { content: "▌"; animation: blink 0.8s infinite; color: var(--red); }
.skip { position: absolute; right: 18px; bottom: 18px; }

/* 档案表单 */
.pf-row { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start; }
.pf-avatar { display: grid; gap: 8px; justify-items: center; margin-top: 12px; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.25); flex: none; }
.avatar.big { width: 104px; height: 104px; }
.avatar.mid { width: 56px; height: 56px; }
.avatar.letter { display: grid; place-items: center; background: #3a1620; color: #ffd2dc; font-weight: bold; }
.avatar.big.letter { font-size: 40px; }
.profile-card { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); margin: 6px 0 4px; }
.profile-card div { display: grid; }
.profile-card small { color: var(--dim); }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; font-family: ui-monospace, "Cascadia Mono", monospace; }
.hud-top { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); text-align: center; text-shadow: 0 0 6px #000; width: min(560px, 60vw); }
#floorName { font-size: 18px; letter-spacing: 0.25em; color: #f2dfe6; }
#floorHint { font-size: 12px; color: #b9aab7; margin-top: 4px; }
#goal { font-size: 12px; color: #ffd36b; margin-top: 4px; }
.hud-map { position: absolute; left: 14px; top: 14px; display: grid; gap: 4px; }
#minimap { width: 168px; height: 168px; border: 1px solid rgba(255, 255, 255, 0.18); background: #000; image-rendering: pixelated; opacity: 0.88; }
#mapPct { font-size: 11px; color: #8d8794; }
.hud-left { position: absolute; left: 16px; bottom: 16px; display: grid; gap: 8px; }
.hud-right { position: absolute; right: 14px; top: 12px; pointer-events: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 50vw; }
.hud-right button { background: rgba(0, 0, 0, 0.45); }
.meter { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.meter span { width: 32px; color: #b9aab7; }
.bar { width: 180px; height: 8px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); }
.bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #7d1f30, #f0a7bd); transition: width 0.15s; }
.bar.noise i { background: linear-gradient(90deg, #1c6c66, #8fe6dc); }
.bar.favor i { background: linear-gradient(90deg, #6b2a52, #ff8fb4); }
#keys { display: flex; gap: 6px; font-size: 12px; flex-wrap: wrap; }
#keys b { border: 1px solid #a8892a; color: #ffd36b; padding: 2px 6px; background: rgba(40, 30, 0, 0.6); }
#crosshair { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; background: rgba(255, 255, 255, 0.6); border-radius: 50%; }
#prompt { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); font-size: 15px; color: #fff; text-shadow: 0 0 8px #000; background: rgba(0, 0, 0, 0.45); padding: 6px 14px; display: none; }
#prompt.on { display: block; }
#toast { white-space: pre-line; position: absolute; left: 50%; top: 24%; transform: translateX(-50%); width: min(640px, 90vw); text-align: center; font-family: "Noto Serif SC", serif; font-size: 16px; line-height: 1.8; color: #f6e8ee; text-shadow: 0 0 10px #000, 0 0 2px #000; opacity: 0; transition: opacity 0.5s; }
#toast.on { opacity: 1; }
#help { position: absolute; right: 16px; bottom: 16px; font-size: 11px; color: #8d8794; text-align: right; max-width: 46vw; }
/* 沉浸模式：只留准星、提示和右上角两个开关 */
body.immersive .hud-top, body.immersive .hud-map, body.immersive .hud-left, body.immersive #help, body.immersive .ui-only { display: none !important; }
body.immersive .hud-right { opacity: 0.35; }
body.immersive .hud-right:hover { opacity: 1; }

/* 手机 */
#touchzone, #stick, .touch-btns { display: none; }
body.touch #touchzone { display: block; position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
body.touch #stick { display: block; position: absolute; width: 110px; height: 110px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.05); pointer-events: none; }
body.touch #stick[hidden] { display: none !important; }
#knob { position: absolute; left: 35px; top: 35px; width: 40px; height: 40px; border-radius: 50%; background: rgba(240, 167, 189, 0.5); }
body.touch .touch-btns { display: flex; gap: 10px; position: absolute; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); pointer-events: auto; align-items: flex-end; }
.touch-btns button { width: 64px; height: 64px; border-radius: 50%; padding: 0; font-size: 13px; background: rgba(0, 0, 0, 0.45); }
.touch-btns #tAct { width: 84px; height: 84px; border-color: var(--rose); }
.touch-btns #tAct.ready { background: rgba(200, 52, 74, 0.6); }
.touch-btns button.on { background: rgba(143, 230, 220, 0.35); }
body.touch #help, body.touch #crosshair { display: none; }
body.touch .hud-left { bottom: auto; top: 196px; }

/* 对话 */
#chat { position: fixed; inset: 0; z-index: 8; display: grid; place-items: end center; padding: 18px; background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.3) 60%, transparent); }
.chat-card { width: min(1040px, 100%); height: min(560px, 84vh); display: grid; grid-template-columns: 300px 1fr; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 0 60px rgba(200, 52, 74, 0.2); }
.chat-portrait { padding: 16px; border-right: 1px solid var(--line); display: grid; align-content: start; gap: 10px; overflow: auto; }
#portrait { width: 100%; aspect-ratio: 3/4; border: 1px solid #2b2733; background: #000; overflow: hidden; }
#portrait .face { width: 100%; height: 100%; object-fit: cover; display: block; animation: facein 0.35s; }
#portrait canvas.face { image-rendering: pixelated; object-fit: contain; }
@keyframes facein { from { opacity: 0.2; filter: blur(4px); } }
#portrait.shake { animation: shake 0.45s; }
@keyframes shake { 20% { transform: translate(4px, -3px); filter: hue-rotate(40deg) contrast(1.6); } 45% { transform: translate(-4px, 2px); filter: invert(0.2); } 70% { transform: translate(3px, 3px); } }
.tag { display: grid; }
.tag b { font-size: 22px; letter-spacing: 0.2em; }
.tag span { font-size: 12px; color: var(--red); font-family: ui-monospace, monospace; }
.small-meter .bar { width: 150px; }
.chat-main { position: relative; display: grid; grid-template-rows: 1fr auto auto auto; padding: 16px; gap: 10px; min-height: 0; overflow: hidden; }
#chatFull { position: absolute; right: -20px; bottom: 0; height: 100%; pointer-events: none; opacity: 0.16; }
#chatFull img { height: 100%; }
#chatFull.corrupt { opacity: 0.3; filter: sepia(1) hue-rotate(-40deg) saturate(3) contrast(1.4); animation: twitch 2.4s infinite; }
@keyframes twitch { 92% { transform: none; } 94% { transform: translateX(6px) skewX(4deg); } 96% { transform: translateX(-4px); } }
#log { position: relative; overflow: auto; display: grid; align-content: start; gap: 12px; padding-right: 6px; line-height: 1.8; }
.msg { max-width: 92%; white-space: pre-line; }
.msg.them { color: #f3e6ec; }
.msg.them b { color: var(--rose); margin-right: 6px; }
.msg.me { justify-self: end; color: #b8d8d4; text-align: right; }
.msg.sys { color: var(--dim); font-size: 13px; font-style: italic; justify-self: center; text-align: center; }
.msg.err { color: #ff9aa9; font-size: 13px; }
.typing::after { content: "……"; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
#choices { position: relative; display: flex; gap: 8px; flex-wrap: wrap; }
#choices button { padding: 6px 12px; font-size: 14px; }
#say, #wardForm { position: relative; display: flex; gap: 8px; }
#say input, #wardForm input { flex: 1; }

/* 报告 / 监管室 通用页面 */
.screen.page { place-items: stretch; padding: 12px; background: rgba(5, 4, 7, 0.97); }
.page-card { background: var(--panel); border: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr; min-height: 0; max-width: 1200px; width: 100%; margin: 0 auto; }
.page-bar { display: flex; gap: 14px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); letter-spacing: 0.15em; }
.page-body { display: grid; grid-template-columns: 240px 1fr; min-height: 0; }
.page-body > nav { border-right: 1px solid var(--line); overflow: auto; padding: 10px; display: grid; gap: 8px; align-content: start; }
.rep-tab, .ward-who { display: flex; gap: 10px; align-items: center; text-align: left; padding: 8px; background: transparent; }
.rep-tab.on, .ward-who.on { border-color: var(--red); background: rgba(200, 52, 74, 0.1); }
.rep-tab span, .ward-who span { display: grid; }
.rep-tab small, .ward-who small { color: var(--dim); font-size: 11px; }
.face.mini { width: 44px; height: 44px; object-fit: cover; object-position: 50% 15%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); flex: none; background: #000; }
canvas.face.mini { image-rendering: pixelated; }

#dossier { overflow: auto; padding: 22px 28px; background: linear-gradient(#e8e2d3, #dcd3bf); color: var(--paper-ink); font-size: 14px; line-height: 1.8; }
#dossier .kicker { color: #8d1c2c; }
#dossier .small { color: #6b6156; }
#dossier h3 { border-bottom: 1px solid #b7ab94; padding-bottom: 2px; color: #3a2f28; }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 3px double #3a2f28; padding-bottom: 8px; }
.doc-head h2 { font-family: ui-monospace, monospace; letter-spacing: 0.08em; margin: 0; }
.stamp { border: 3px solid #b0202f; color: #b0202f; padding: 4px 12px; transform: rotate(-8deg); font-weight: bold; letter-spacing: 0.3em; opacity: 0.85; white-space: nowrap; }
.stamp.grey { border-color: #7d7468; color: #7d7468; }
.doc-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.doc-table th, .doc-table td { border: 1px solid #a99e88; padding: 4px 8px; text-align: left; vertical-align: top; }
.doc-table th { background: rgba(58, 47, 40, 0.08); width: 16%; white-space: nowrap; font-weight: normal; color: #5b4f44; }
.gallery { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 10px; }
.gallery figure { margin: 0; position: relative; cursor: zoom-in; background: #111; border: 1px solid #8f8470; padding: 4px; }
.gallery figure.tall { background: #2c2a2e; }
.gallery img { width: 100%; height: 260px; object-fit: cover; object-position: 50% 20%; display: block; }
.gallery figure.tall img { object-fit: contain; }
.gallery figcaption { font-size: 12px; color: #d8cfc0; padding: 4px 2px 0; }
.gallery .sealed img { filter: blur(14px) brightness(0.5); }
.seal { position: absolute; inset: 4px 4px 26px; display: grid; place-content: center; text-align: center; color: #ffb3c0; font-weight: bold; letter-spacing: 0.3em; background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.4) 0 10px, rgba(80, 0, 10, 0.4) 10px 20px); }
.seal small { letter-spacing: 0; font-weight: normal; }
details { margin: 14px 0; }
details code { font-size: 12px; white-space: normal; word-break: break-word; color: #4a3f36; }
.record { border: 1px solid #a99e88; padding: 10px 14px; margin: 10px 0; background: rgba(255, 255, 255, 0.35); }
.rec-head { display: flex; justify-content: space-between; font-family: ui-monospace, monospace; }
.rec-body { white-space: pre-line; text-indent: 2em; }
.small-t { font-size: 13px; }

.ward-lock { display: grid; place-content: center; text-align: center; padding: 40px; }
.ward-chat { display: grid; grid-template-rows: 1fr auto auto; min-height: 0; padding: 14px; gap: 10px; background: radial-gradient(ellipse at 50% 0, rgba(60, 8, 20, 0.35), transparent 70%); }
#wardLog { overflow: auto; display: grid; align-content: start; gap: 14px; }
.wmsg { display: flex; gap: 10px; align-items: flex-start; max-width: 86%; }
.wmsg.me { flex-direction: row-reverse; justify-self: end; text-align: right; }
.wmsg.sys { justify-self: center; color: var(--dim); font-size: 13px; font-style: italic; }
.wmsg .face.mini, .wmsg .avatar { width: 52px; height: 52px; }
.wbody { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); padding: 8px 12px; }
.wmsg.me .wbody { background: rgba(143, 230, 220, 0.06); }
.wbody b { color: var(--rose); font-size: 13px; }
.wbody p { margin: 2px 0 0; white-space: pre-line; line-height: 1.7; }

dialog#settings { background: var(--panel); color: var(--ink); border: 1px solid var(--line); padding: 22px; width: min(560px, 94vw); max-height: 92vh; overflow: auto; }
dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 8px 12px; }
.tabs button.on { border-bottom-color: var(--red); color: #fff; }
.probe.good { color: #7fe0a8; }
.probe.bad { color: #ff9aa9; }
.settings a { color: var(--rose); }

@media (max-width: 760px) {
  .chat-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 94vh; }
  .chat-portrait { grid-template-columns: 96px 1fr; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; gap: 4px 10px; }
  #portrait { grid-row: span 5; }
  .chat-portrait > *:not(#portrait) { grid-column: 2; margin: 0; }
  #chat { padding: 0; }
  #chatFull { display: none; }
  h1 { font-size: 34px; }
  #help { display: none; }
  .bar { width: 110px; }
  #minimap { width: 120px; height: 120px; }
  body.touch .hud-left { top: 150px; }
  .hud-top { top: auto; bottom: 120px; width: 70vw; }
  .page-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .page-body > nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .rep-tab, .ward-who { flex: none; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery img { height: 200px; }
  #dossier { padding: 14px; }
  .pf-row { grid-template-columns: 1fr; }
  .pf-grid { grid-template-columns: 1fr 1fr; }
  .title-card { padding: 20px; }
  .row2 { grid-template-columns: 1fr; }
  .wmsg { max-width: 100%; }
}

.ward-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wtools { display: flex; gap: 4px; margin-top: 4px; opacity: 0; transition: opacity 0.15s; }
.wmsg.me .wtools { justify-content: flex-end; }
.wmsg:hover .wtools, .wmsg.last-me .wtools, .wmsg.last-them .wtools { opacity: 1; }
.wtools button { padding: 1px 8px; font-size: 11px; }
.wtools .only-last { display: none; }
.wmsg.last-me .only-last, .wmsg.last-them .only-last { display: inline-block; }
.wmsg.sys.err { color: #ff9aa9; }
@media (pointer: coarse) { .wtools { opacity: 0.8; } }