/* 《明日回拨》统一样式 — 2000年代旧政务站风格 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');

:root {
  --blue: #003399;
  --blue-dark: #002266;
  --blue-light: #6699cc;
  --gray: #c0c0c0;
  --gray-light: #dfdfdf;
  --gray-dark: #808080;
  --white: #ffffff;
  --yellow: #ffff99;
  --red: #cc0000;
  --green: #006600;
  --black: #000000;
  --font-serif: 'Noto Serif SC', SimSun, '宋体', serif;
  --font-sans: 'Microsoft YaHei', '微软雅黑', Tahoma, sans-serif;
  --max-w: 800px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: #000;
  background: #3a3a5c url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='4' height='4' fill='%233a3a5c'/%3E%3Crect width='1' height='1' fill='%23ffffff10'/%3E%3C/svg%3E");
}

#crt-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  opacity: 0.25;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px);
}

/* —— 布局容器 —— */
.site-wrap,
.landing-wrap {
  max-width: var(--max-w);
  margin: 16px auto 64px;
  padding: 0 8px;
}

/* —— 窗口外框 —— */
.page-frame {
  background: var(--gray);
  border: 2px solid;
  border-color: var(--gray-light) var(--gray-dark) var(--gray-dark) var(--gray-light);
  box-shadow: 2px 2px 6px rgba(0,0,0,0.35);
}

/* —— 页头 —— */
.page-header {
  background: linear-gradient(180deg, var(--blue-light) 0%, var(--blue) 55%, var(--blue-dark) 100%);
  color: #fff;
  padding: 10px 14px;
  border-bottom: 1px solid var(--blue-dark);
}

.page-header h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
}

.page-header .subtitle {
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.9;
}

/* —— 导航 —— */
.y2k-nav {
  background: var(--gray);
  border-bottom: 1px solid var(--gray-dark);
  padding: 5px 8px;
  font-size: 12px;
  line-height: 1.8;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.y2k-nav a {
  color: var(--blue);
  text-decoration: underline;
  margin: 0 2px;
}

.y2k-nav a:hover { color: var(--red); }

.y2k-nav a.nav-active {
  color: #000;
  font-weight: bold;
  text-decoration: none;
  background: var(--yellow);
  padding: 1px 4px;
}

.y2k-nav .sep {
  color: var(--gray-dark);
  margin: 0 1px;
  text-decoration: none;
}

.breadcrumb {
  font-size: 11px;
  color: #555;
  padding: 5px 12px;
  background: #dcdcdc;
  border-bottom: 1px solid #aaa;
}

.breadcrumb a { color: var(--blue); }

/* —— 主内容 —— */
.page-body {
  margin: 6px;
  padding: 14px 16px;
  min-height: 360px;
  background: var(--white);
  border: 1px solid;
  border-color: var(--gray-dark) var(--gray-light) var(--gray-light) var(--gray-dark);
}

/* —— 页脚 —— */
.page-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11px;
  color: #333;
  border-top: 1px solid var(--gray-dark);
}

.page-footer a { color: var(--blue); }

/* —— 全站底部声明 —— */
.site-disclaimer {
  max-width: var(--max-w);
  margin: 0 auto 20px;
  padding: 8px 12px 16px;
  text-align: center;
  font-size: 11px;
  line-height: 1.55;
  color: #888;
}

.site-disclaimer p {
  margin: 0 0 4px;
}

.site-disclaimer p:last-child {
  margin-bottom: 0;
}

body.landing-body .site-disclaimer {
  color: #aaa;
}

.footer-site { color: #555; }

/* —— 页码徽章 —— */
.page-number {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 9000;
  padding: 3px 10px;
  font: bold 11px/1.4 'Courier New', monospace;
  color: var(--blue);
  background: var(--yellow);
  border: 2px solid;
  border-color: var(--gray-light) var(--gray-dark) var(--gray-dark) var(--gray-light);
}

.page-number.landing-num { background: #e8e8ff; }

/* —— 按钮 —— */
.y2k-btn {
  display: inline-block;
  padding: 5px 14px;
  margin: 3px 2px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  color: #000;
  text-decoration: none;
  cursor: pointer;
  background: var(--gray);
  border: 2px solid;
  border-color: var(--gray-light) var(--gray-dark) var(--gray-dark) var(--gray-light);
  touch-action: manipulation;
}

.y2k-btn:hover { background: #d8d8d8; }

.y2k-btn:active {
  border-color: var(--gray-dark) var(--gray-light) var(--gray-light) var(--gray-dark);
}

.y2k-btn.primary {
  background: var(--blue-light);
  color: #fff;
  border-color: #99bbdd #336699 #336699 #99bbdd;
}

.y2k-btn.primary:hover { background: var(--blue); }

.y2k-btn.danger { background: #ffdddd; }

.y2k-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* —— 链接 —— */
a.y2k-link,
.y2k-link {
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
}

a.y2k-link:hover { color: var(--red); }

.gray-link { color: #999 !important; text-decoration: none !important; }

.gray-link:hover,
.gray-link.active {
  color: var(--blue) !important;
  text-decoration: underline !important;
  cursor: pointer;
}

.underline-blue { color: var(--blue); text-decoration: underline; }

/* —— 表单 —— */
.y2k-form label {
  display: block;
  margin: 10px 0 4px;
  font-weight: bold;
  font-size: 13px;
}

.y2k-form label:has(.form-step-num) {
  font-weight: normal;
}

.y2k-form label .form-step-num {
  font-weight: bold;
  margin-right: 2px;
}

.y2k-form input[type="text"],
.y2k-form input[type="password"],
.y2k-form textarea,
.y2k-form select {
  width: 100%;
  max-width: 420px;
  padding: 5px 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  border: 2px inset var(--gray-dark);
  background: #fff;
}

.y2k-form textarea { resize: vertical; min-height: 80px; }

.fine-print { font-size: 11px; color: #666; margin-top: 8px; }

.req { color: var(--red); }

/* —— 表格 —— */
.y2k-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
}

.y2k-table th,
.y2k-table td {
  border: 1px solid var(--gray-dark);
  padding: 6px 8px;
  text-align: left;
}

.y2k-table th {
  background: var(--blue-light);
  color: #fff;
  font-weight: normal;
}

.y2k-table tr:nth-child(even) td { background: #f4f4f4; }

.meta-table .meta-k {
  width: 100px;
  background: #eee;
  font-weight: bold;
}

.compact td { padding: 4px 6px; }

.black-bar {
  background: #222;
  color: #222;
  user-select: none;
}

/* —— 公告/面板 —— */
.notice-box {
  border: 1px solid var(--gray-dark);
  padding: 12px;
  margin: 10px 0;
  background: #fafafa;
}

.notice-box.red-head { border-top: 3px solid var(--red); }

.notice-box.terror-box { border-color: var(--red); background: #fff8f8; }

.news-item.gray-item { opacity: 0.75; }

.puzzle-box {
  padding: 10px;
  margin: 10px 0;
  font-size: 13px;
  background: #ffffee;
  border: 1px dashed var(--blue);
}

.hint { font-size: 12px; color: #666; font-style: italic; }

.audio-block { margin: 12px 0; }

.sample-transcript {
  margin: 8px 0;
  padding: 8px;
  background: #f5f5f5;
  border-left: 3px solid var(--blue);
}

.sample-text {
  font-size: 13px;
  padding: 0;
  background: none;
  border: none;
  margin: 0 0 6px;
}

.sample-text:last-child {
  margin-bottom: 0;
}

.sample-text-caller strong {
  color: var(--blue);
}

.sample-text-reply {
  color: #444;
}

.archive-attribution {
  margin: 10px 0 0;
  font-size: 12px;
  color: #666;
  font-style: italic;
}

.audio-playing { color: var(--green); font-weight: bold; }

.success-line { color: var(--green); font-weight: bold; margin-top: 8px; }

.ph-tag {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ph-hint { font-size: 11px; color: #666; margin-top: 4px; max-width: 90%; }

.box-title {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--blue);
}

.news-item {
  padding: 6px 0;
  border-bottom: 1px dotted #ccc;
}

.news-item:last-child { border-bottom: none; }

.news-date {
  font: 11px/1 'Courier New', monospace;
  color: #888;
  margin-right: 6px;
}

.side-panel {
  border: 1px solid var(--gray-dark);
  padding: 10px;
  margin: 10px 0;
  background: #f0f0ff;
  font-size: 12px;
}

.side-panel h4 {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--blue);
}

.layout-two-col {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 12px;
  margin: 10px 0;
}

/* —— 排版 —— */
.lead { font-size: 14px; margin-bottom: 12px; line-height: 1.6; }

.doc-no {
  font-size: 11px;
  color: #777;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.section-title {
  font-family: var(--font-serif);
  color: var(--blue);
  font-size: 15px;
  margin: 12px 0 8px;
}

.policy-text p,
.policy-list li { line-height: 1.75; margin: 6px 0; }

.policy-list { padding-left: 22px; }

.bullet-list { padding-left: 20px; line-height: 1.7; }

.archive-quote {
  margin: 12px 0;
  padding: 10px 14px;
  border-left: 3px solid #888;
  background: #f5f5f5;
  font-size: 13px;
  line-height: 1.7;
}

.status-panel,
.success-panel,
.error-panel {
  border: 1px solid var(--blue);
  padding: 12px;
  margin: 10px 0;
  background: #f8f8ff;
}

.success-panel { border-color: var(--green); background: #f0fff0; }

.error-panel { border-color: var(--red); background: #fff8f8; }

.system-override {
  margin-top: 16px;
  padding: 10px;
  border: 1px dashed #999;
  background: #fafafa;
  font-size: 12px;
}

/* —— 文字状态 —— */
.terror-text { color: var(--red); font-weight: bold; }

.status-future,
.status-future,
.search-result .meta.future { color: var(--red); font-weight: bold; }

.status-line { color: #555; font-size: 13px; }

.blink { animation: blink 1.2s step-end infinite; }

@keyframes blink { 50% { opacity: 0.4; } }

.repeat-em { color: #666; font-style: italic; }

/* —— 搜索页 —— */
.search-page .search-logo {
  font: 26px Georgia, 'Times New Roman', serif;
  color: var(--blue);
  margin-bottom: 12px;
}

.search-page .search-logo span { color: var(--red); }

.search-page .search-logo small {
  font-size: 11px;
  color: #888;
  margin-left: 6px;
}

.search-tip,
.result-count { font-size: 12px; color: #666; }

.search-box {
  display: flex;
  gap: 4px;
  margin: 12px 0 16px;
}

.search-box input {
  flex: 1;
  padding: 6px 8px;
  border: 2px inset var(--gray-dark);
  font-size: 14px;
}

.search-result {
  margin: 10px 0;
  padding: 8px;
}

.search-result .title {
  font-size: 15px;
  color: var(--blue);
  text-decoration: underline;
}

.search-result .snippet { font-size: 13px; color: #333; margin: 4px 0; }

.search-result .meta { font-size: 11px; color: #888; }

.highlight-result { background: #ffffee; border: 1px solid #ddd; }

.dead-result .title { color: #999; text-decoration: none; cursor: default; }

.hot-keywords button {
  margin: 2px 4px;
  padding: 3px 10px;
  font-size: 12px;
  border: 1px outset #ccc;
  background: #eee;
  cursor: pointer;
}

.hot-keywords button:hover { background: var(--yellow); }

/* —— 横幅 —— */
.banner-area { margin-bottom: 10px; }

.site-banner {
  display: block;
  width: 100%;
  border: 1px solid var(--gray-dark);
}

/* —— 游戏文档配图 —— */
.doc-img-wrap {
  margin: 12px 0;
  text-align: center;
}

.game-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--gray-dark);
  background: #ececec;
}

.game-img.wide-img { max-width: 100%; }

.doc-img-wrap.hover-swap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.doc-img-wrap.hover-swap .game-img { width: 100%; }

.doc-img-wrap.hover-swap .hover-reveal {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.doc-img-wrap.hover-swap:hover .hover-reveal { opacity: 1; }

/* P.15 沈桥表彰照：延迟凝视 */
.shenqiao-photo-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--gray-dark);
}

.shenqiao-photo-wrap .game-img {
  width: 100%;
  display: block;
}

.shenqiao-photo-wrap .shenqiao-stare {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

.shenqiao-photo-wrap .photo-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.shenqiao-photo-wrap.is-glitching .shenqiao-base {
  animation: shenqiaoGlitch 0.07s steps(3) infinite;
}

.shenqiao-photo-wrap.is-glitching::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.06) 2px, rgba(255,255,255,0.06) 4px);
  pointer-events: none;
  animation: staticFlicker 0.06s steps(2) infinite;
}

.shenqiao-photo-wrap.is-revealed .shenqiao-base {
  opacity: 0;
  visibility: hidden;
}

.shenqiao-photo-wrap.is-revealed .shenqiao-stare {
  opacity: 1;
  animation: shenqiaoStareIn 0.22s cubic-bezier(0.15, 1, 0.25, 1) forwards;
}

.shenqiao-photo-wrap.is-lunging-source {
  visibility: hidden;
}

.shenqiao-photo-wrap.is-flash .photo-flash {
  animation: photoFlash 0.4s ease-out;
}

.photo-caption {
  font-size: 11px;
  color: #666;
  margin-top: 6px;
}

@keyframes photoFlash {
  0% { opacity: 0.92; }
  35% { opacity: 0.55; }
  100% { opacity: 0; }
}

@keyframes shenqiaoGlitch {
  0% { transform: translate(0); filter: none; clip-path: inset(0); }
  20% { transform: translate(-5px, 2px) skewX(-1deg); filter: contrast(1.5) saturate(0.2); clip-path: inset(5% 0 45% 0); }
  40% { transform: translate(4px, -3px); filter: invert(0.2) brightness(1.3); clip-path: inset(40% 0 8% 0); }
  60% { transform: translate(-3px, -1px); filter: hue-rotate(90deg) contrast(1.3); }
  80% { transform: translate(2px, 3px); clip-path: inset(15% 0 35% 0); }
  100% { transform: translate(0); filter: none; clip-path: inset(0); }
}

@keyframes shenqiaoStareIn {
  from { transform: scale(1.18); filter: contrast(1.25) brightness(0.85); }
  to { transform: scale(1.05); filter: contrast(1.08); }
}

body.photo-scare-shake {
  animation: photoScareShake 0.45s ease;
}

@keyframes photoScareShake {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(-3px, 1px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, -1px); }
}

#staff-img-wrap .game-img.inverted-view { filter: invert(1) hue-rotate(180deg); cursor: pointer; }

#staff-img-wrap .game-img.inverted-view:hover { filter: none; }

.banner-placeholder {
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--blue), #0055aa, var(--blue));
  color: #fff;
  font-family: var(--font-serif);
  border: 1px solid var(--gray-dark);
}

.banner-sub { font-size: 11px; margin-top: 4px; opacity: 0.85; }

.visitor-counter {
  margin-top: 10px;
  padding: 4px;
  text-align: center;
  font: 11px 'Courier New', monospace;
  color: #0f0;
  background: #000;
  border: 1px inset #333;
}

/* —— 占位图/音频 —— */
.img-placeholder,
.audio-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  margin: 12px 0;
  padding: 16px;
  text-align: center;
  background: #ececec;
  border: 1px dashed var(--gray-dark);
}

.wide-img { min-height: 200px; }

.ph-name { font-weight: bold; color: var(--blue); margin: 4px 0; font-size: 13px; }

.fake-waveform {
  width: 80%;
  height: 24px;
  margin-top: 8px;
  background: repeating-linear-gradient(90deg, var(--blue) 0 2px, transparent 2px 6px);
  opacity: 0.35;
}

.silence-wave-wrap {
  margin-top: 14px;
  padding: 10px 12px 8px;
  background: #0c140c;
  border: 2px inset #2a3a2a;
  box-shadow: inset 0 0 24px rgba(0, 40, 0, 0.45);
}

.silence-wave-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #7c7;
}

.silence-wave-fname { letter-spacing: 0.04em; }

.silence-wave-time {
  color: #afa;
  min-width: 5.5em;
  text-align: right;
}

.silence-wave-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #8a8;
}

.silence-wave-controls label { flex-shrink: 0; }

.silence-wave-controls input[type="range"] {
  flex: 1;
  min-width: 80px;
  max-width: 220px;
  accent-color: #5a8;
}

#silence-wave-speed-val {
  min-width: 2.8em;
  color: #afa;
  text-align: right;
}

.silence-wave-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid #1a2a1a;
  background: #060a06;
}

.silence-wave-canvas {
  display: block;
  width: 100%;
  height: 132px;
}

.silence-wave-caption {
  margin: 6px 0 0;
  font-size: 11px;
  color: #5a6;
  font-family: 'Courier New', monospace;
}

.inverted-view { filter: invert(1) hue-rotate(180deg); cursor: pointer; }

.inverted-view:hover { filter: none; }

/* —— 流程/地图/监控 —— */
.flow-chart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0;
  font-size: 12px;
}

.flow-node {
  border: 1px solid var(--blue);
  padding: 5px 8px;
  background: #eef;
}

.flow-node .node-num {
  display: block;
  font-family: monospace;
  color: var(--red);
  font-size: 10px;
}

.flow-arrow { color: var(--blue); font-weight: bold; }

.map-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 10px 0;
}

.booth-btn {
  padding: 8px 4px;
  font-size: 11px;
  text-align: center;
  cursor: pointer;
  background: #eee;
  border: 2px outset var(--gray-light);
}

.booth-btn.selected { background: var(--yellow); border-style: inset; }

.shape-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 14px;
  justify-content: center;
}

.shape-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  font-size: 22px;
  line-height: 1;
  border: 2px outset #ccc;
  background: #f0f0f0;
  cursor: pointer;
  color: #333;
}

.shape-btn:hover { background: #e8e8e8; }

.shape-btn.selected {
  background: var(--yellow);
  border-style: inset;
  color: #000;
}

.map-result {
  display: none;
  padding: 10px;
  margin-top: 10px;
  font-family: monospace;
  background: #ffffee;
  border: 1px dashed var(--blue);
}

.map-result.show { display: block; }

.map-figure { margin-bottom: 10px; }

/* P.20 登录背景 */
.login-page-body { position: relative; }

.login-panel {
  position: relative;
  overflow: hidden;
  border: 2px inset var(--gray-dark);
  background: #111;
}

.login-panel-bg {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.55;
  filter: contrast(1.05) saturate(0.85);
}

.login-form {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 12px;
  background: rgba(192, 192, 192, 0.92);
}

/* P.30 平面图 */
.plan-wrap {
  cursor: pointer;
  margin: 10px 0;
}

.plan-wrap .plan-img {
  filter: brightness(0.72) contrast(0.95) saturate(0.6);
  transition: filter 0.8s ease, transform 0.8s ease;
}

.plan-wrap.is-revealed .plan-img {
  filter: none;
  transform: scale(1.02);
}

/* P.31 监控 */
.monitor-room {
  position: relative;
  min-height: 200px;
  overflow: hidden;
  background: #0a0a0a;
  border: 2px inset #333;
}

.monitor-cctv {
  display: block;
  width: 100%;
  height: auto;
  min-height: 200px;
  object-fit: cover;
  object-position: center center;
}

.monitor-static {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.08;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,0,0.03) 2px, rgba(0,255,0,0.03) 4px);
}

.monitor-scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0,255,100,0.45), transparent);
}

.monitor-scanline.is-active {
  opacity: 1;
  animation: archiveScan 2.2s linear infinite;
}

.monitor-status {
  position: absolute;
  left: 8px;
  bottom: 6px;
  z-index: 5;
  margin: 0;
  padding: 2px 6px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #0f0;
  background: rgba(0, 0, 0, 0.55);
}

.monitor-room.is-loading .monitor-cctv {
  animation: monitorSignal 0.12s steps(2) infinite;
  filter: contrast(1.1) brightness(0.85);
}

.monitor-room.chair-shift .monitor-cctv {
  transform: translateX(-8px) scale(1.02);
  transition: transform 0.35s ease-out;
}

.monitor-room.is-scare-flash .monitor-cctv,
.monitor-room.is-scare-frame .monitor-cctv {
  filter: contrast(1.15) brightness(0.78);
}

.monitor-room.is-scare-frame .monitor-static {
  opacity: 0.18;
  animation: staticFlicker 0.1s steps(2) infinite;
}

@keyframes monitorSignal {
  0% { transform: translate(0); }
  50% { transform: translate(-2px, 1px); filter: hue-rotate(8deg) contrast(1.2); }
  100% { transform: translate(1px, -1px); }
}

#jumpscare-overlay.monitor-scare-fullscreen {
  background: #000;
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

.monitor-scare-full-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.monitor-scare-full-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 鬼脸在素材左侧：把画面左段对准视口中央 */
  object-position: 20% center;
  transform-origin: 28% center;
  animation: monitorFullSnap 0.22s ease-out forwards;
}

.monitor-scare-full-wrap.is-holding .monitor-scare-full-img {
  animation:
    monitorFullSnap 0.22s ease-out forwards,
    monitorFullHoldPulse 2.6s ease-in-out 0.22s infinite;
}

.monitor-scare-exit-static {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.07) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(200, 220, 200, 0.05) 0 1px,
      transparent 1px 2px
    );
}

.monitor-scare-crt-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 3;
  height: 3px;
  margin-top: -1px;
  opacity: 0;
  pointer-events: none;
  background: #fff;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.85);
}

.monitor-scare-full-wrap.is-exiting .monitor-scare-full-img {
  animation: monitorFullExit 0.95s cubic-bezier(0.45, 0, 0.85, 1) forwards;
}

.monitor-scare-full-wrap.is-exiting .monitor-scare-exit-static {
  animation: monitorExitStatic 0.95s ease-in forwards;
}

.monitor-scare-full-wrap.is-exiting .monitor-scare-crt-line {
  animation: monitorCrtCollapse 0.95s cubic-bezier(0.5, 0, 1, 1) forwards;
}

#jumpscare-overlay.monitor-scare-fullscreen.is-exiting {
  animation: monitorOverlayBlackout 0.95s ease-in 0.35s forwards;
}

@keyframes monitorFullSnap {
  from { transform: scale(1.14); filter: brightness(1.35) contrast(1.1); }
  to { transform: scale(1); filter: brightness(0.9) contrast(1.05); }
}

@keyframes monitorFullHoldPulse {
  0%, 100% { filter: brightness(0.9) contrast(1.05); }
  50% { filter: brightness(0.96) contrast(1.12); }
}

@keyframes monitorFullExit {
  0% {
    transform: scale(1);
    filter: brightness(0.9) contrast(1.05);
    opacity: 1;
  }
  14% {
    transform: scale(1.04) translate(4px, -2px) skewX(-1.5deg);
    filter: brightness(1.3) contrast(1.25) saturate(1.15);
  }
  28% {
    transform: scale(0.98) translate(-6px, 2px) skewX(2deg);
    filter: brightness(0.65) contrast(1.45) hue-rotate(12deg);
  }
  42% {
    transform: scale(1.02) scaleY(0.42) translateY(8%);
    filter: brightness(1.5) contrast(1.8) blur(0.5px);
    opacity: 0.95;
  }
  58% {
    transform: scale(1) scaleY(0.06);
    filter: brightness(2.4) contrast(2.2);
    opacity: 1;
  }
  72% {
    transform: scale(0.98) scaleY(0.012);
    filter: brightness(3) blur(1px);
    opacity: 0.75;
  }
  100% {
    transform: scale(0.9) scaleY(0);
    filter: brightness(0) blur(3px);
    opacity: 0;
  }
}

@keyframes monitorExitStatic {
  0%, 18% { opacity: 0; }
  32% { opacity: 0.35; }
  48% { opacity: 0.72; }
  100% { opacity: 1; background-color: #050505; }
}

@keyframes monitorCrtCollapse {
  0%, 38% {
    opacity: 0;
    transform: scaleY(1);
  }
  48% {
    opacity: 1;
    transform: scaleY(1);
  }
  62% {
    opacity: 1;
    transform: scaleY(0.35);
  }
  78% {
    opacity: 0.85;
    transform: scaleY(0.06);
  }
  100% {
    opacity: 0;
    transform: scaleY(0);
  }
}

@keyframes monitorOverlayBlackout {
  from { background: #000; }
  to { background: #000; opacity: 0; }
}

body.monitor-scare-active { overflow: hidden; }

.jumpscare-flash-layer {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: #fff;
  pointer-events: none;
  animation: jumpscareFlash 0.32s ease-out forwards;
}

@keyframes jumpscareFlash {
  0% { opacity: 1; }
  40% { opacity: 0.85; }
  100% { opacity: 0; }
}

/* 结局配图 */
.ending-figure { margin: 12px 0; }

.good-ending-body { padding: 0; }

.good-ending-panel.is-animating .good-ending-lines p {
  animation: goodLineFade 0.55s ease forwards;
}

.good-ending-panel.is-animating .good-ending-lines p:nth-child(1) { animation-delay: 0.1s; }
.good-ending-panel.is-animating .good-ending-lines p:nth-child(2) { animation-delay: 0.35s; }
.good-ending-panel.is-animating .good-ending-lines p:nth-child(3) { animation-delay: 0.6s; }
.good-ending-panel.is-animating .good-ending-lines p:nth-child(4) { animation-delay: 0.85s; }
.good-ending-panel.is-animating .good-ending-lines p:nth-child(5) { animation-delay: 1.1s; }
.good-ending-panel.is-animating .good-ending-lines p:nth-child(6) { animation-delay: 1.35s; }

.good-ending-panel.is-animating .good-ending-lines p {
  opacity: 0;
}

.good-ending-panel.is-animating .good-ending-archive {
  animation: goodArchiveIn 0.9s ease 1.6s forwards;
  opacity: 0;
}

.good-ending-panel.is-animating #good-ending-404 {
  animation: scareLineIn 0.7s ease 2.2s forwards;
  opacity: 0;
}

.good-ending-panel.is-animating #good-ending-final {
  animation: scareLineIn 0.7s ease 2.6s forwards;
  opacity: 0;
}

@keyframes goodLineFade {
  from { opacity: 1; color: #000; }
  to { opacity: 0.15; color: #888; text-decoration: line-through; }
}

@keyframes goodArchiveIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.click-row { cursor: pointer; }

.click-row:hover { background: #ffffcc; }

/* —— 弹层 —— */
#jumpscare-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 18px;
  overflow: hidden;
}

#jumpscare-overlay.hidden { display: none; }

/* —— P.13 档案扫描跳吓 —— */
#jumpscare-overlay.archive-scare-active {
  background: #808080;
  align-items: stretch;
  justify-content: stretch;
}

.archive-scare {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--gray);
  border: 2px solid;
  border-color: var(--gray-light) var(--gray-dark) var(--gray-dark) var(--gray-light);
  font-family: var(--font-sans);
  font-size: 12px;
}

.archive-scare-titlebar {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  background: linear-gradient(180deg, var(--blue-light), var(--blue));
  color: #fff;
  font-size: 11px;
}

.archive-scare-id { opacity: 0.85; font-family: monospace; }

.archive-scare-stage {
  position: relative;
  flex: 1;
  margin: 12px;
  background: #ececec;
  border: 2px inset var(--gray-dark);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.archive-scare-img {
  max-width: 96%;
  max-height: 96%;
  object-fit: contain;
  filter: contrast(1.05);
  transition: filter 0.4s ease;
}

.archive-scare-img.is-scare {
  filter: contrast(1.12) saturate(0.85);
  animation: archiveImgReveal 0.35s ease;
}

@keyframes archiveImgReveal {
  0% { opacity: 0.6; filter: brightness(1.4) contrast(0.8); }
  100% { opacity: 1; }
}

.archive-scare-scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(180deg, transparent, rgba(0,100,255,0.55), transparent);
  box-shadow: 0 0 12px rgba(0,120,255,0.6);
  opacity: 0;
  pointer-events: none;
}

.archive-scare-scanline.is-scanning {
  opacity: 1;
  animation: archiveScan 1.85s linear forwards;
}

@keyframes archiveScan {
  from { top: 0; }
  to { top: 100%; }
}

.archive-stamp {
  position: absolute;
  z-index: 3;
  font-family: var(--font-serif);
  font-size: clamp(18px, 4vw, 32px);
  font-weight: 700;
  color: rgba(170, 0, 0, 0.88);
  border: 3px solid rgba(170, 0, 0, 0.88);
  padding: 2px 10px;
  letter-spacing: 0.12em;
  opacity: 0;
  transform: scale(2.5) rotate(-10deg);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.archive-stamp.show {
  animation: archiveStampSlam 0.22s cubic-bezier(0.15, 1.5, 0.25, 1) forwards;
}

.archive-stamp-a { top: 18%; left: 22%; }
.archive-stamp-b { top: 42%; left: 48%; }
.archive-stamp-c { bottom: 22%; right: 18%; transform: scale(2.5) rotate(8deg); }

.archive-stamp-c.show { animation-name: archiveStampSlamC; }

@keyframes archiveStampSlam {
  to { opacity: 0.92; transform: scale(1) rotate(-5deg); }
}

@keyframes archiveStampSlamC {
  to { opacity: 0.92; transform: scale(1) rotate(6deg); }
}

.archive-scare-log {
  margin: 0 12px;
  padding: 8px 10px;
  min-height: 72px;
  background: #111;
  color: #0f0;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.7;
  border: 1px inset #333;
}

.archive-scare-log p { margin: 0; opacity: 0; animation: archiveLogIn 0.25s ease forwards; }

.archive-scare-log .archive-log-hit {
  color: #f55;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(255,0,0,0.5);
}

@keyframes archiveLogIn {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

.archive-scare-caption {
  margin: 8px 12px 12px;
  text-align: center;
  color: var(--red);
  font-family: var(--font-serif);
  font-size: 13px;
  opacity: 0;
}

.archive-scare-caption.show {
  animation: scareLineIn 0.6s ease forwards;
}

#jumpscare-overlay.archive-scare-active.is-fading {
  animation: jumpscareFadeOut 0.75s ease forwards;
}

body.archive-scare-active { overflow: hidden; }

body.archive-scare-active .site-wrap,
body.archive-scare-active .page-number {
  visibility: hidden;
}

/* —— P.15 凝视扑脸跳吓 —— */
#jumpscare-overlay.stare-scare-active {
  background: transparent;
  pointer-events: none;
}

.stare-scare-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
  z-index: 1;
}

#jumpscare-overlay.stare-scare-active .stare-scare-backdrop {
  animation: stareBackdropIn 0.45s ease 0.1s forwards;
}

#jumpscare-overlay.stare-scare-active.is-retreat .stare-scare-backdrop {
  animation: stareBackdropOut 0.55s ease forwards;
}

@keyframes stareBackdropIn {
  to { background: rgba(0, 0, 0, 0.82); }
}

@keyframes stareBackdropOut {
  from { background: rgba(0, 0, 0, 0.82); }
  to { background: rgba(0, 0, 0, 0); }
}

.stare-scare-lunge {
  position: fixed;
  left: var(--sx);
  top: var(--sy);
  width: var(--sw);
  height: var(--sh);
  z-index: 2;
  overflow: hidden;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.stare-scare-lunge img,
.stare-scare-face {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 22%;
  display: block;
}

.stare-scare-lunge.is-lunging {
  animation: stareLungeExpand 0.45s cubic-bezier(0.12, 1.05, 0.2, 1) forwards;
}

.stare-scare-lunge.is-retreat {
  animation: stareLungeRetreat 0.55s ease-in forwards;
}

@keyframes stareLungeExpand {
  0% {
    left: var(--sx);
    top: var(--sy);
    width: var(--sw);
    height: var(--sh);
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  100% {
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    box-shadow: 0 0 80px rgba(0,0,0,0.9);
  }
}

@keyframes stareLungeRetreat {
  from {
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
  }
  to {
    left: var(--sx);
    top: var(--sy);
    width: var(--sw);
    height: var(--sh);
  }
}

.stare-scare-lunge.is-lunging img {
  animation: stareFacePulse 1.6s ease-in-out 0.45s infinite;
}

@keyframes stareFacePulse {
  0%, 100% { transform: scale(1); filter: contrast(1.08) brightness(0.88); }
  50% { transform: scale(1.03); filter: contrast(1.12) brightness(0.82); }
}

.stare-scare-whisper,
.stare-scare-caption {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  margin: 0;
  text-align: center;
  font-family: var(--font-serif);
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 12px #000, 0 0 24px rgba(0,0,0,0.8);
}

.stare-scare-whisper {
  bottom: 22%;
  color: #faa;
  font-size: clamp(15px, 4.5vw, 22px);
  letter-spacing: 0.06em;
}

.stare-scare-caption {
  bottom: 12%;
  color: #ccc;
  font-size: clamp(12px, 3.5vw, 16px);
}

.stare-scare-whisper.show,
.stare-scare-caption.show {
  animation: scareLineIn 0.55s ease forwards;
}

body.stare-scare-active {
  overflow: hidden;
}

body.stare-scare-active .site-wrap {
  filter: brightness(0.45);
  transition: filter 0.4s ease;
}

body.stare-scare-active .page-number {
  opacity: 0.3;
}

@keyframes scareLineIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes jumpscareFadeOut {
  to { opacity: 0; }
}

/* P.15 沈桥凝视后：摄像头错误弹窗淹没 */
body.cam-flood-active {
  overflow: hidden;
}

body.cam-flood-active #crt-overlay {
  opacity: 0.5;
  animation: camFloodCrt 0.11s steps(2) infinite;
}

body.cam-flood-active .site-wrap {
  animation: camFloodPageShake 0.1s steps(2) infinite;
  transform-origin: center center;
  will-change: transform, filter;
}

body.cam-flood-active.cam-flood-phase-2 .site-wrap {
  animation-duration: 0.07s;
  filter: contrast(1.12) saturate(0.82) brightness(0.94);
}

body.cam-flood-active.cam-flood-phase-3 .site-wrap {
  animation-duration: 0.05s;
  filter: contrast(1.22) saturate(0.68) brightness(0.88) hue-rotate(-6deg);
}

body.cam-flood-active.cam-flood-exit .site-wrap {
  animation: none;
  filter: none;
  transition: filter 0.5s ease;
}

body.cam-flood-active .page-number {
  animation: camFloodPageShake 0.09s steps(2) infinite reverse;
  color: var(--red);
  opacity: 1;
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}

@keyframes camFloodPageShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-5px, 2px); }
  50% { transform: translate(4px, -4px); }
  75% { transform: translate(-3px, -2px); }
}

@keyframes camFloodCrt {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 0.58; }
}

.cam-flood-chrome {
  position: fixed;
  inset: 0;
  z-index: 10055;
  pointer-events: none;
  overflow: hidden;
}

.cam-flood-chrome::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.07) 2px,
    rgba(0, 0, 0, 0.07) 4px
  );
  opacity: 0.55;
  animation: camFloodScanlines 0.08s steps(2) infinite;
}

body.cam-flood-phase-2 .cam-flood-chrome::before { opacity: 0.75; }
body.cam-flood-phase-3 .cam-flood-chrome::before { opacity: 0.9; }

@keyframes camFloodScanlines {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

.cam-flood-rgb-split {
  position: absolute;
  inset: -4px;
  box-shadow:
    inset 6px 0 0 rgba(255, 0, 0, 0.07),
    inset -6px 0 0 rgba(0, 80, 255, 0.07);
  animation: camFloodRgb 0.14s steps(3) infinite;
  opacity: 0;
}

body.cam-flood-phase-2 .cam-flood-rgb-split { opacity: 0.65; }
body.cam-flood-phase-3 .cam-flood-rgb-split { opacity: 1; }

@keyframes camFloodRgb {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-3px, 1px); }
  66% { transform: translate(3px, -1px); }
}

.cam-flood-scanbar {
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  top: -30px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    rgba(200, 0, 0, 0.18),
    transparent
  );
  opacity: 0;
}

.cam-flood-scanbar.is-sweep {
  animation: camFloodScanSweep 0.55s linear forwards;
}

@keyframes camFloodScanSweep {
  0% { top: -30px; opacity: 0.9; }
  100% { top: 110%; opacity: 0.2; }
}

.cam-flood-banner {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  margin: 0;
  padding: 4px 12px;
  font-family: "Courier New", monospace;
  font-size: 12px;
  color: #f44;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid #a00;
  white-space: nowrap;
  letter-spacing: 0.06em;
  animation: camFloodBannerBlink 0.9s steps(2) infinite;
  z-index: 2;
}

.cam-flood-banner-sub {
  top: auto;
  bottom: 14px;
  font-size: 11px;
  color: #faa;
  animation-delay: 0.35s;
}

@keyframes camFloodBannerBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.cam-flood-flash-layer {
  position: fixed;
  inset: 0;
  z-index: 10058;
  background: #e8e8f0;
  opacity: 0;
  pointer-events: none;
}

.cam-flood-flash-layer.is-on {
  animation: camFloodFlash 0.14s ease-out forwards;
}

.cam-flood-flash-layer.is-on.is-strong {
  animation: camFloodFlashStrong 0.2s ease-out forwards;
}

@keyframes camFloodFlash {
  0% { opacity: 0.45; }
  100% { opacity: 0; }
}

@keyframes camFloodFlashStrong {
  0% { opacity: 0.75; background: #fff; }
  40% { opacity: 0.35; background: #fdd; }
  100% { opacity: 0; }
}

.cam-flood-layer {
  position: fixed;
  inset: 0;
  z-index: 10060;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.18);
  animation: camFloodLayerPulse 0.3s steps(2) infinite;
}

body.cam-flood-phase-3 .cam-flood-layer {
  background: rgba(20, 0, 0, 0.28);
}

@keyframes camFloodLayerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}

.cam-flood-layer.is-exit {
  animation: camFloodLayerOut 0.85s ease forwards;
}

.cam-flood-layer.is-exit .cam-flood-win {
  animation: camFloodWinOut 0.55s ease forwards;
}

@keyframes camFloodLayerOut {
  to { opacity: 0; }
}

@keyframes camFloodWinOut {
  to { opacity: 0; transform: scale(0.9) rotate(var(--cam-rot, 0deg)); }
}

.cam-flood-win {
  position: absolute;
  border: 2px solid;
  border-color: #dfdfdf #404040 #404040 #dfdfdf;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  background: #c0c0c0;
  font-family: Tahoma, "Microsoft YaHei", var(--font-sans);
  font-size: 11px;
  animation: camFloodPop 0.14s ease-out forwards;
  overflow: hidden;
  transform: rotate(var(--cam-rot, 0deg));
}

.cam-flood-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 4px;
  background: linear-gradient(180deg, #0a246a 0%, #1a5fad 8%, #0a246a 100%);
  color: #fff;
  font-weight: bold;
  font-size: 11px;
  line-height: 1.3;
}

.cam-flood-close {
  font-size: 12px;
  line-height: 1;
  opacity: 0.85;
}

.cam-flood-body {
  padding: 6px 8px 4px;
  background: #c0c0c0;
}

.cam-flood-video {
  width: 100%;
  height: 108px;
  object-fit: cover;
  border: 1px inset #808080;
  background: #000;
  display: block;
  transform: scaleX(-1);
}

.cam-flood-msg {
  margin: 4px 0 0;
  color: var(--red);
  font-size: 10px;
  line-height: 1.35;
  font-weight: bold;
}

.cam-flood-btns {
  text-align: center;
  padding: 4px 8px 8px;
  background: #c0c0c0;
}

.cam-flood-btn {
  display: inline-block;
  min-width: 58px;
  padding: 2px 14px;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  background: #c0c0c0;
  font-size: 11px;
  color: #000;
}

@keyframes camFloodPop {
  from { opacity: 0; transform: scale(0.55) rotate(var(--cam-rot, 0deg)); }
  to { opacity: 1; transform: scale(1) rotate(var(--cam-rot, 0deg)); }
}

#modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  padding: 16px;
}

#modal-overlay.hidden { display: none; }

#modal-content {
  width: 100%;
  max-width: 400px;
  padding: 16px;
  background: var(--white);
  border: 2px solid;
  border-color: var(--gray-light) var(--gray-dark) var(--gray-dark) var(--gray-light);
}

.modal-order {
  border: 2px solid var(--red);
  padding: 10px;
  margin-bottom: 10px;
}

.modal-order h3 { color: var(--red); margin: 0 0 8px; font-size: 14px; }

/* P.29 录音 / P.30 陈小满来电（VID-03） */
.chen-recording-playback {
  margin-top: 12px;
  padding: 10px;
  border: 1px dashed var(--gray-dark);
  background: #fafafa;
}

.chen-recording-lines {
  margin: 10px 0 0;
  padding: 0 0 0 12px;
  font-size: 13px;
  color: #333;
  border-left: 3px solid var(--blue-light);
}

.chen-recording-lines p { margin: 0 0 6px; }

.chen-recording-gap {
  color: #888;
  letter-spacing: 0.2em;
}

.chen-recording-echo {
  color: #666;
  font-style: italic;
}

.chen-call-blackout {
  position: fixed;
  inset: 0;
  z-index: 10005;
  background: #000;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.chen-call-blackout.is-lifting {
  opacity: 0;
}

body.chen-call-active {
  overflow: hidden;
}

body.chen-call-active .site-wrap {
  filter: brightness(0.25);
}

.chen-call-modal {
  text-align: center;
  animation: chenModalIn 0.35s ease-out;
}

.chen-call-modal .chen-call-name {
  font-size: 20px;
  font-weight: bold;
  color: var(--red);
  margin: 8px 0;
}

.chen-call-modal .chen-call-ask {
  margin: 12px 0;
  font-size: 15px;
}

.chen-call-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 14px 0 8px;
}

.chen-call-actions .y2k-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.chen-call-hint {
  font-size: 11px;
  color: #888;
  margin: 0;
}

@keyframes chenModalIn {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* —— 结局页 —— */
.ending-page { padding: 32px 16px; text-align: center; line-height: 1.8; }

.ending-page.dark { background: #111; color: #ccc; }

.ending-404 { font-family: var(--font-serif); font-size: 16px; color: #666; }

.final-line { font-family: var(--font-serif); color: #888; margin-top: 20px; }

/* —— 过渡首页 —— */
.landing-page .landing-hero {
  text-align: center;
  padding: 20px 14px;
  color: #fff;
  background: linear-gradient(180deg, #000033, #003366, #000033);
  border-bottom: 1px solid #336699;
}

.landing-hero h1 {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 22px;
}

.landing-hero .tagline { font-size: 12px; color: #aaccee; margin-bottom: 10px; }

.landing-hero .warning {
  max-width: 480px;
  margin: 12px auto 0;
  padding: 10px;
  font-size: 12px;
  line-height: 1.7;
  color: #ffcccc;
  border: 1px solid #660000;
  background: rgba(0,0,0,0.3);
}

.marquee-bar {
  overflow: hidden;
  margin-top: 10px;
  padding: 4px;
  font-size: 11px;
  color: #fff;
  background: #003366;
}

.marquee-bar span {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 18s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

.landing-actions {
  padding: 18px;
  text-align: center;
}

.save-info { font-size: 11px; color: #666; margin-top: 8px; }

.page-index {
  margin-top: 12px;
  padding: 10px;
  max-height: 260px;
  overflow-y: auto;
  text-align: left;
  background: #f5f5f5;
  border: 1px inset var(--gray-dark);
}

.page-index h3 { margin: 0 0 8px; font-size: 13px; color: var(--blue); }

.page-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px;
}

.page-index-item {
  display: block;
  padding: 5px 6px;
  font-size: 12px;
  color: #000;
  text-decoration: none;
  background: #fff;
  border: 1px solid #ccc;
}

.page-index-item:hover { background: var(--yellow); }

.page-index-item .idx-num {
  font-family: monospace;
  color: #888;
  margin-right: 4px;
}

/* —— 移动端 —— */
@media (max-width: 640px) {
  .site-wrap,
  .landing-wrap {
    margin: 0 auto 56px;
    padding: 0;
  }

  .page-frame {
    border-left: none;
    border-right: none;
    box-shadow: none;
  }

  .page-body {
    margin: 4px;
    padding: 12px;
    min-height: 280px;
  }

  .layout-two-col { grid-template-columns: 1fr; }

  .map-grid { grid-template-columns: repeat(2, 1fr); }

  .y2k-form input,
  .y2k-form textarea { max-width: 100%; font-size: 16px; }

  .page-footer { flex-direction: column; }

  .page-number {
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
  }

  .landing-hero h1 { font-size: 18px; }

  /* P.15 凝视扑脸：面部偏左 */
  .stare-scare-lunge img,
  .stare-scare-face {
    object-position: 24% 20%;
  }

  .stare-scare-lunge.is-lunging img,
  .stare-scare-lunge.is-lunging .stare-scare-face {
    object-position: 20% center;
  }

  /* P.31 监控扑脸：移动端鬼脸再往右 */
  .monitor-scare-full-img {
    object-position: 34% center;
    transform-origin: 36% center;
  }

}

/* —— 便民热线导航锁（head 脚本设置 data-hotline-locked 后立即生效）—— */
html[data-hotline-locked="1"] .y2k-nav a[href="07.html"],
html[data-hotline-locked="1"] .y2k-nav a[href$="/07.html"],
html[data-hotline-locked="1"] a.side-hotline-link[href="07.html"],
html[data-hotline-locked="1"] a.side-hotline-link[href$="/07.html"] {
  color: #aaa !important;
  cursor: not-allowed;
  text-decoration: none !important;
  pointer-events: none !important;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
}

.y2k-nav .nav-hotline-locked {
  color: #aaa !important;
  cursor: not-allowed;
  text-decoration: none !important;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
  display: inline;
}

.y2k-nav a.nav-disabled {
  color: #aaa !important;
  cursor: not-allowed;
  text-decoration: none !important;
  pointer-events: none;
  -webkit-touch-callout: none;
  user-select: none;
}

.y2k-nav a.nav-disabled:hover,
.y2k-nav .nav-hotline-locked:hover {
  color: #aaa !important;
}

.corrupt-title {
  letter-spacing: 0.12em;
  vertical-align: baseline;
}

.search-history {
  margin: 12px 0;
  padding: 8px 10px;
  background: #f5f5f5;
  border: 1px dashed #bbb;
}

.history-label {
  margin: 0 0 6px;
  font-size: 12px;
  color: #666;
}

.history-kw-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.history-kw-btn {
  padding: 3px 10px;
  font-size: 12px;
  border: 1px outset #ccc;
  background: #fff;
  cursor: pointer;
}

.history-kw-btn:hover { background: var(--yellow); }

.search-results-inline { margin-bottom: 16px; }

.section-divider {
  margin: 16px 0;
  border: none;
  border-top: 1px dashed #ccc;
}

.doc-img-enlarge .img-enlarge,
.game-img.img-enlarge {
  width: min(920px, 100%);
  max-width: 100%;
}

/* P.17 可拖动放大镜 */
.pdf-magnifier-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.pdf-magnifier-wrap .game-img {
  display: block;
  width: 100%;
  pointer-events: none;
}

.pdf-magnifier-lens {
  position: absolute;
  top: 0;
  left: 0;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 3px solid #555;
  box-shadow:
    0 0 0 2px #e8e8e8,
    0 4px 14px rgba(0, 0, 0, 0.4),
    inset 0 0 10px rgba(255, 255, 255, 0.45);
  cursor: grab;
  overflow: hidden;
  z-index: 2;
  touch-action: none;
  will-change: transform;
}

.pdf-magnifier-lens.is-dragging {
  cursor: grabbing;
  box-shadow:
    0 0 0 2px #fff8cc,
    0 6px 18px rgba(0, 0, 0, 0.5),
    inset 0 0 10px rgba(255, 255, 255, 0.45);
}

.pdf-magnifier-lens-inner {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.pdf-magnifier-lens::before {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -22px;
  width: 14px;
  height: 52px;
  background: linear-gradient(90deg, #8a8a8a, #c8c8c8 40%, #6a6a6a);
  border: 1px solid #444;
  border-radius: 2px;
  transform: rotate(38deg);
  transform-origin: top center;
  pointer-events: none;
  z-index: -1;
}

.pdf-magnifier-lens::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 28%,
    rgba(255, 255, 255, 0.42),
    transparent 58%
  );
  pointer-events: none;
}

.magnifier-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #666;
  text-align: center;
}

.login-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.login-inline-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.login-inline-icon {
  display: block;
  height: 26px;
  width: auto;
  object-fit: contain;
  opacity: 0.95;
}

.login-inline-placeholder {
  margin: 10px 0 14px;
  min-height: 100px;
}

.keyword-hint {
  color: var(--red);
  font-size: 12px;
  font-family: 'Courier New', monospace;
  margin-top: 4px;
}

.corrupt-file {
  display: inline-block;
  color: #888;
  cursor: not-allowed;
  user-select: none;
  animation: corruptGlitch 2.4s steps(4) infinite;
}

.corrupt-text {
  display: inline-block;
  color: #888;
  cursor: not-allowed;
  user-select: none;
  font-family: 'Courier New', monospace;
  vertical-align: baseline;
  animation: corruptTextGlitch 2.4s steps(4) infinite;
}

.corrupt-filename {
  min-width: 9em;
  letter-spacing: 0.02em;
}

.file-table {
  table-layout: fixed;
  width: 100%;
}

.file-table th:nth-child(1),
.file-table td:nth-child(1) { width: 52%; }

.file-table th:nth-child(2),
.file-table td:nth-child(2) { width: 18%; }

.file-table th:nth-child(3),
.file-table td:nth-child(3) { width: 30%; }

.file-table td {
  vertical-align: middle;
}

@keyframes corruptGlitch {
  0%, 92%, 100% { opacity: 0.75; transform: none; filter: none; }
  93% { opacity: 0.35; transform: translateX(-1px); filter: blur(0.4px); }
  95% { opacity: 1; transform: translateX(2px); color: var(--red); }
  97% { opacity: 0.5; letter-spacing: 0.08em; }
}

@keyframes corruptTextGlitch {
  0%, 90%, 100% { opacity: 0.8; color: #888; letter-spacing: 0.02em; filter: none; }
  92% { opacity: 0.4; color: #aaa; letter-spacing: 0.06em; }
  94% { opacity: 1; color: var(--red); letter-spacing: 0.1em; }
  96% { opacity: 0.55; color: #666; letter-spacing: 0.04em; }
}

.alert-modal { text-align: center; }

.alert-modal p { margin: 0 0 14px; line-height: 1.6; }

/* P.31 值班表恐怖谷 */
.roster-creep-wrap {
  margin-top: 14px;
  padding: 10px 12px;
  background: #0a0a0a;
  border: 1px inset #333;
}

.roster-creep-line {
  margin: 0;
  overflow: hidden;
}

.roster-creep-text {
  display: inline-block;
  color: #8f8;
  font-family: 'Courier New', monospace;
  font-size: 15px;
  letter-spacing: 0.12em;
  animation: rosterCreepPulse 2.8s ease-in-out infinite, rosterCreepSkew 4.2s steps(3) infinite;
  text-shadow: 0 0 8px rgba(0,255,100,0.35);
}

.roster-creep-ghost {
  display: inline-block;
  margin-left: 6px;
  color: #4a4;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  opacity: 0.35;
  animation: rosterCreepGhost 3.6s ease-in-out infinite;
  filter: blur(0.6px);
}

.roster-creep-subline {
  margin: 8px 0 0;
  font-size: 12px;
  color: #6a6;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.08em;
  animation: rosterCreepSub 5s steps(4) infinite;
  opacity: 0.55;
}

@keyframes rosterCreepGhost {
  0%, 100% { opacity: 0.2; transform: translateX(0); }
  50% { opacity: 0.65; transform: translateX(3px); color: #faa; }
}

@keyframes rosterCreepSub {
  0%, 85%, 100% { opacity: 0.4; }
  88% { opacity: 1; color: #f88; letter-spacing: 0.14em; }
}

@keyframes rosterCreepPulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); filter: brightness(1.3); }
}

@keyframes rosterCreepSkew {
  0%, 80%, 100% { transform: skewX(0); }
  85% { transform: skewX(-8deg) translateX(-2px); color: #faa; }
  90% { transform: skewX(6deg) translateX(3px); }
}

#jumpscare-overlay.roster-creep-overlay {
  background: #000;
  opacity: 0;
  transition: opacity 0.15s ease;
}

#jumpscare-overlay.roster-creep-overlay.is-visible {
  opacity: 1;
}

.roster-creep-scare {
  text-align: center;
  padding: 20px;
  animation: rosterScareIn 0.2s ease-out;
}

.roster-creep-whisper {
  font-size: 14px;
  color: #faa;
  margin: 0 0 12px;
  letter-spacing: 0.1em;
}

.roster-creep-big {
  font-family: var(--font-serif);
  font-size: clamp(22px, 6vw, 36px);
  color: #fff;
  margin: 0;
  letter-spacing: 0.08em;
  animation: rosterBigShake 0.35s ease-in-out infinite;
  text-shadow: 0 0 20px rgba(255,0,0,0.5);
}

.roster-creep-sub {
  margin: 14px 0 0;
  font-size: 12px;
  color: #666;
  font-family: monospace;
}

@keyframes rosterScareIn {
  from { transform: scale(1.15); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes rosterBigShake {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(-3px, 1px); }
  75% { transform: translate(3px, -1px); }
}

.bad-ending-flash {
  position: fixed;
  inset: 0;
  z-index: 10002;
  background: #fff;
  pointer-events: none;
  animation: badEndFlash 0.5s ease-out forwards;
}

@keyframes badEndFlash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.bad-ending-scroll-sentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
  visibility: hidden;
}

.bad-ending-answer {
  margin-top: 24px;
  padding: 16px;
  border: 2px solid #600;
  background: rgba(80, 0, 0, 0.35);
}

.bad-answer-line {
  font-size: clamp(22px, 5vw, 32px);
  color: #f44;
  font-weight: bold;
  margin: 0 0 8px;
  animation: badAnswerPop 0.4s ease-out;
  text-shadow: 0 0 16px rgba(255,0,0,0.6);
}

.bad-answer-echo {
  font-size: 13px;
  color: #a44;
  margin: 0 0 12px;
  letter-spacing: 0.05em;
  animation: badEchoFade 1.2s ease-in-out infinite alternate;
}

.bad-answer-system {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #f88;
  margin: 0;
}

@keyframes badAnswerPop {
  0% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes badEchoFade {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

.bad-answer-scream {
  font-size: clamp(28px, 7vw, 48px) !important;
  letter-spacing: 0.14em;
  display: inline-block;
  animation: badAnswerScream 0.55s steps(3) infinite, badAnswerPop 0.4s ease-out;
  text-shadow:
    2px 0 #f00,
    -2px 0 #800,
    0 0 24px rgba(255, 0, 0, 0.85),
    0 0 48px rgba(255, 0, 0, 0.45);
  filter: contrast(1.4);
  transform-origin: center center;
}

@keyframes badAnswerScream {
  0%, 100% { transform: scale(1); opacity: 1; color: #f44; }
  33% { transform: scale(1.06); opacity: 0.95; color: #fff; }
  66% { transform: scale(0.98); opacity: 1; color: #f22; }
}

.handler-table td {
  vertical-align: middle;
}

.handler-value-cell {
  width: 42%;
  min-width: 8em;
}

#handler-cell {
  display: inline-block;
  min-width: 4.5em;
  font-weight: bold;
  text-align: left;
}

#handler-cell.handler-flash {
  color: var(--red);
  text-shadow: 0 0 6px rgba(200, 0, 0, 0.35);
}

/* P.18 无直接关系恐怖谷 */
.clock-uncanny-field {
  margin: 10px 0 14px;
  line-height: 1.55;
  max-height: 4.8em;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

.clock-uncanny-bit {
  display: inline;
  font-size: clamp(11px, 2.4vw, 13px);
  color: #777;
  opacity: var(--u-o, 0.35);
  animation: clockUncannyFlicker var(--u-d, 1.2s) steps(2) infinite;
  animation-delay: calc(var(--u-i, 0) * -0.09s);
}

@keyframes clockUncannyFlicker {
  0%, 72%, 100% {
    opacity: var(--u-o, 0.35);
    transform: none;
    filter: none;
    letter-spacing: normal;
  }
  74% {
    opacity: 1;
    color: #a00;
    transform: translateY(-1px) scale(1.04);
    filter: blur(0.3px);
    letter-spacing: 0.06em;
  }
  78% {
    opacity: 0.2;
    color: #444;
    transform: translateX(1px);
  }
  82% {
    opacity: 0.95;
    color: #600;
    font-style: italic;
  }
}

.ph-login-code {
  margin: 0 auto;
  border: 1px dashed #99a;
  background: #f4f6fa;
}