/* ============================================================
   案件档案 · CASE FILE  —  首页「调查板」
   坐标系：理想样式.jpg 的 1672 x 941，所有位置都用百分比。
   横竖屏同一套版式：板面等比缩放，手机上横屏看效果和电脑一致。
   ============================================================ */

:root {
  --ink: #0b111c;          /* 深夜蓝黑 */
  --paper: #e3d9c0;        /* 档案纸 */
  --red: #ff2d2d;          /* 红线 / 印章红 */
  --red-dim: #c8452a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--ink);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  overflow: hidden;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---------- 底图 ---------- */
.bg {
  position: fixed;
  inset: 0;
  background: url("../img/bg.webp") center / cover no-repeat;
  z-index: 0;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 65% at 50% 48%,
      rgba(11, 17, 28, 0) 35%, rgba(11, 17, 28, .55) 78%, rgba(6, 9, 16, .88) 100%);
}

/* ---------- 板面：锁定 1672:941，随视口等比缩放 ----------
   横屏手机时由 100svh 决定宽度，等于整屏铺满、比例不变。 */
.board {
  position: relative;
  z-index: 2;
  width: min(100vw, calc(100svh * 1672 / 941));
  aspect-ratio: 1672 / 941;
  container-type: size;          /* 让内部用 cqw 做等比字号 */
  font-size: 1.05cqw;
  /* 还没开场时相框是 opacity:0，但 opacity 不挡点击 ——
     不掐掉指针事件的话，开场页下面那些看不见的相框反而是能点的。 */
  pointer-events: none;
}

body.ready .board { pointer-events: auto; }

/* ---------- 线索板上的纸 ----------
   六张空白老相纸 + 一块活动记录，纸上只有黑字；
   正中间那张人物照片是整块板子上唯一一张图。

   纸本身是版式素材（tools/prep_papers.py 压出来的），后台换不了，
   跟底图一样；纸上写什么字由 main.js 从后端/data.js 填。
   每张卡的宽高比就是那张纸的宽高比，摆出来才不像复制粘贴。 */
.card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  --ty: 1.3cqw;                  /* 入场时下沉量，用 cqw 跟着板子缩放 */
  opacity: 0;
  transform: translateY(var(--ty)) rotate(var(--r, 0deg));
  transition:
    opacity .75s cubic-bezier(.2, .7, .3, 1) var(--d, 0s),
    transform .75s cubic-bezier(.2, .7, .3, 1) var(--d, 0s);
  will-change: transform, opacity;
}

/* 纸：铺满整张卡。卡的宽高比跟纸一致，所以 fill 不会把纸边拉变形 */
.card .paper {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 .5cqw 1.2cqw rgba(0, 0, 0, .6));
  transition: filter .3s ease;
}

/* 写字的地方：纸的内框，由 prep_papers.py 量出来的 --ix/--iy/--iw/--ih 圈住。
   字不许写出这个框 —— 压到纸边上一眼就看出没对版。 */
.card__face {
  position: absolute;
  left: var(--ix, 6%);
  top: var(--iy, 6%);
  width: var(--iw, 88%);
  height: var(--ih, 88%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4em;
  overflow: hidden;
  text-align: center;
  color: #16130e;                /* 黑字，压在奶黄的旧纸上 */
  font-family: "Courier New", Courier, "黑体", SimHei, monospace;
  line-height: 1.3;
  pointer-events: none;          /* 整张卡是一个按钮，字不单独接事件 */
}

/* 纸上写的名字。居中的一行，跟其他七张一个样子 ——
   活动记录也是这个待遇：它不铺正文预览了，想看全文点开。 */
.card__name {
  font-size: 1.45em;
  font-weight: 700;
  letter-spacing: .08em;
}

/* ---------- 红线 ----------
   铺满整张板子，排在 .card 前面 —— 后画的压在上面，所以线在纸底下，
   看着像是从照片背后穿过去的。线本身由 main.js 按 SPOKES / EXTRA 算。

   细，而且要压得住：参考图上那几根是「一根线」不是「一条光带」，
   画粗了、加太重的辉光，八根一起出来就糊成一片，板面就乱了。 */
.threads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;          /* 别把纸上的点击吃掉了 */
}

.threads path {
  fill: none;
  stroke: #e8556a;
  stroke-width: 1.7;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity .7s ease var(--d, .45s);
  filter: drop-shadow(0 0 .8px rgba(255, 45, 45, .55));
}

body.ready .threads path { opacity: .7; }

/* ---------- 中心：嫌疑人照片 ---------- */
.suspect {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  --ty: 1.5cqw;
  opacity: 0;
  transform: translateY(var(--ty)) rotate(var(--r, 0deg)) scale(.96);
  transition:
    opacity .8s cubic-bezier(.2, .7, .3, 1) var(--d, 0s),
    transform .8s cubic-bezier(.2, .7, .3, 1) var(--d, 0s);
  will-change: transform, opacity;
}

.suspect img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 1.4cqw 3.2cqw rgba(0, 0, 0, .72);
  transition: box-shadow .3s ease;
}

/* ---------- 悬停：抬起 + 红晕 ---------- */
.card:hover,
.suspect:hover {
  --ty: -.9cqw;
  cursor: pointer;
}

.card:hover .paper {
  filter: drop-shadow(0 .9cqw 1.8cqw rgba(0, 0, 0, .65))
          drop-shadow(0 0 .8cqw rgba(255, 45, 45, .4));
}

.suspect:hover img {
  box-shadow: 0 1.8cqw 3.6cqw rgba(0, 0, 0, .75),
              0 0 1.2cqw rgba(255, 45, 45, .45);
}

/* 键盘走到纸上时，也要看得出「这里可以按」 */
.card:focus-visible,
.suspect:focus-visible {
  --ty: -.9cqw;
  outline: .3cqw dashed rgba(255, 45, 45, .85);
  outline-offset: .6cqw;
}

/* ---------- 人物档案下面那块手写标牌 ----------
   这张是照片，没有纸边可以写字：红字压在霓虹上根本看不见。
   挪到照片下沿，垫一条暗底当标牌。 */
.label {
  position: absolute;
  left: 50%;
  top: 6%;
  transform: translateX(-50%) rotate(-1.2deg);
  font-family: "Segoe Print", "Bradley Hand", "楷体", KaiTi, cursive;
  font-size: 1.05em;
  letter-spacing: .06em;
  color: var(--red);
  white-space: nowrap;
  opacity: .62;
  transition: opacity .3s ease;
  pointer-events: none;
  text-shadow: 0 0 .5cqw rgba(255, 45, 45, .45), 0 0 .3cqw rgba(239, 231, 210, .9);
}

.suspect:hover .label,
.suspect:focus-visible .label { opacity: .95; }

.suspect .label {
  top: auto;
  bottom: -2.6em;
  padding: .28em 1em;
  background: rgba(6, 9, 16, .84);
  border: 1px solid rgba(255, 45, 45, .5);
  color: #f3ead4;
  opacity: .94;
  text-shadow: 0 0 .5cqw rgba(0, 0, 0, .9);
}

/* ============================================================
   档案弹窗
   注意：它必须挂在 .board 外面。.board 上有 container-type: size，
   那会让它成为 fixed 定位的包含块，弹窗就会被关在板面里。
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  /* 层级从下往上：板面 1 → 常驻小件（进度条）20 → 开场页 60 → 启动动画 65
     → 角落那两件常驻的（.lang / .fiction）70 → 弹窗 80。
     弹窗放最上面：它是内容本身，角落那两件被它压住才不会被误点。 */
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
}

.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 16, .78);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s ease;
}

.modal.is-open .modal__backdrop { opacity: 1; }

.modal__panel {
  position: relative;
  width: min(900px, 90vw, 150vmin);
  max-height: 86svh;
  overflow: auto;
  padding: clamp(20px, 4.2vmin, 46px) clamp(20px, 4.4vmin, 52px) clamp(24px, 4.6vmin, 50px);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%),
    linear-gradient(#efe7d2, #ddd1b3);
  border: 1px solid rgba(40, 30, 15, .35);
  box-shadow:
    0 3vmin 8vmin rgba(0, 0, 0, .72),
    inset 0 0 8vmin rgba(120, 95, 55, .16);
  color: #241c12;
  opacity: 0;
  transform: translateY(2.4vmin) scale(.97);
  transition:
    opacity .32s cubic-bezier(.2, .7, .3, 1),
    transform .32s cubic-bezier(.2, .7, .3, 1);
}

.modal.is-open .modal__panel { opacity: 1; transform: none; }

/* 点开档案时焦点先落在面板上，好让 Tab 从面板开始往里走。
   面板自己不该有轮廓 —— 该亮框的是里面的按钮。 */
.modal__panel:focus { outline: none; }

.modal__close {
  position: absolute;
  top: clamp(5px, 1.2vmin, 12px);
  right: clamp(5px, 1.2vmin, 12px);
  width: clamp(30px, 4.4vmin, 42px);
  height: clamp(30px, 4.4vmin, 42px);
  padding: 0;
  border: 0;
  background: none;
  color: #6b5a44;
  font-size: clamp(22px, 3.4vmin, 34px);
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, transform .25s ease;
}

.modal__close:hover,
.modal__close:focus-visible { color: var(--red-dim); transform: rotate(90deg); }
.modal__close:focus-visible { outline: 2px dashed var(--red-dim); outline-offset: 2px; }

.modal__head {
  padding-bottom: clamp(10px, 2vmin, 20px);
  margin-bottom: clamp(14px, 2.6vmin, 28px);
  border-bottom: 2px solid rgba(200, 69, 42, .55);
}

.modal__title {
  margin: .45em 0 .14em;
  font-size: clamp(19px, 3.4vmin, 36px);
  font-weight: 700;
  letter-spacing: .06em;
}

.modal__body {
  font-size: clamp(12.5px, 1.9vmin, 17px);
  line-height: 1.9;
  letter-spacing: .02em;
}

.modal__body p { margin: 0 0 .9em; }
.modal__body p:last-child { margin-bottom: 0; }
.modal__body ul { margin: 0 0 .9em; padding-left: 1.4em; }
.modal__body li { margin-bottom: .3em; }

/* 正文里的链接（比如最终报告里的邮箱）。不写这段就是浏览器默认的
   亮蓝加下划线，压在旧纸背景上非常出戏。 */
.modal__body a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 69, 42, .45);
  transition: border-color .2s ease, color .2s ease;
}
.modal__body a:hover,
.modal__body a:focus-visible {
  color: #a8371f;
  border-bottom-color: #a8371f;
  outline: none;
}

/* ---------- 时间线 / 证据：分行 ----------
   时间线和证据的行列表从 rows 渲染。证据 = 作品图 + 描述；时间线 = 年份 + 描述，
   一行整行可点（to 指的那条证据还在时），点了跳到那份证据并闪一下。 */
.modal__body .rows { margin-top: .9em; }

.modal__body .trow {
  display: flex;
  gap: .7em;
  align-items: baseline;
  width: 100%;
  text-align: left;
  padding: .5em .55em;
  margin: 0 0 .5em;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.modal__body .trow.is-link {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: background .2s ease;
}
.modal__body .trow.is-link:hover,
.modal__body .trow.is-link:focus-visible {
  background: rgba(120, 60, 40, .07);
  outline: none;
}
.modal__body .trow__date {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--red);
}
.modal__body .trow .row__desc { flex: 1 1 auto; }
.modal__body .trow .row__desc p { margin: 0; }
.modal__body .trow.is-flash { animation: yflash 1.6s ease-out 1; }

.modal__body .erow {
  margin: 0 0 1.1em;
  padding-bottom: .8em;
  border-bottom: 1px dashed rgba(120, 95, 55, .4);
}
.modal__body .erow:last-child { border-bottom: 0; }
.modal__body .erow__zoom {
  display: block;
  width: 100%;
  max-width: 560px;
  padding: 0;
  margin: 0 auto .55em;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: zoom-in;
}
.modal__body .erow__zoom img {
  display: block;
  width: 100%;
  max-height: 52vmin;
  object-fit: cover;
  border-radius: 4px;
}
.modal__body .erow__zoom:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.modal__body .erow .row__desc p { margin: 0; }
.modal__body .erow.is-flash { animation: yflash 1.6s ease-out 1; }

@keyframes yflash {
  0%, 100% { background: transparent; }
  30%, 55% { background: rgba(200, 69, 42, .24); }
}

/* 一张作品图不该把整个弹窗占满 —— 限高之后一屏能看见一两件 */
.modal__body img {
  display: block;
  max-width: 100%;
  max-height: 52vmin;
  width: auto;
  height: auto;
  margin: 1em 0;
}

/* ---------- 证据大图（整屏放大） ---------- */
.zoom {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 10, 8, .92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.zoom.is-open { opacity: 1; pointer-events: auto; }
.zoom__stage {
  display: block;
  max-width: 92vw;
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}
.zoom__stage img {
  display: block;
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 4px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, .55);
}

/* 文案还没写的占位框，正式内容替换掉 .ph 就没了 */
.modal__body .ph {
  padding: .8em 1em;
  border: 1px dashed rgba(120, 95, 55, .55);
  color: #7a6a52;
  font-size: .94em;
}

/* 「正文里有涂黑的字段」那句提示，只在真有涂黑时才出现 */
.modal__body .tip {
  margin: 1.2em 0 0;
  padding-top: .8em;
  border-top: 1px dashed rgba(120, 95, 55, .45);
  color: #8a7a62;
  font-size: .88em;
}

.modal__body .tip::before {
  content: "▸ ";
  color: var(--red-dim);
}

/* ============================================================
   常驻小件：语言切换 / 调查进度 / 虚构声明
   都挂在 .board 外面，固定在屏幕四角，不参与板面的等比缩放。
   ============================================================ */

/* 进度条开场前先藏起来，别抢戏 —— 那会儿一份都没看，摆着个 0% 是废话。
   「中 / EN」和角落那行虚构声明不跟着藏：
     · 语言切换从**封面页**就得能用，不然访客想先切英文再进去，没门；
     · 虚构声明是客户写死要常驻的，启动动画那几秒也得挂着。 */
.meter {
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease .35s;
}

body.ready .meter { opacity: 1; }

/* ---------- 中英文切换 ---------- */
.lang {
  position: fixed;
  top: clamp(6px, 1.4vmin, 16px);
  right: clamp(8px, 1.6vmin, 20px);
  /* 得压在开场页(.entry 60)和启动动画(.boot 65)上面 —— 那两个都是铺满
     整屏的。压在下面的话，访客在封面页上根本点不着它：看得见一点点
     （底下那层背景不是全不透明），点下去却被上面那层接走了。 */
  z-index: 70;
  padding: .35em .8em;
  border: 1px solid rgba(227, 217, 192, .3);
  background: rgba(6, 9, 16, .55);
  color: rgba(227, 217, 192, .6);
  font: 400 clamp(10px, 1.6vmin, 13px)/1.4 Consolas, "Courier New", monospace;
  letter-spacing: .14em;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.lang:hover,
.lang:focus-visible {
  border-color: var(--red);
  background: rgba(6, 9, 16, .8);
  outline: none;
}

.lang b { font-weight: 700; }
.lang i { font-style: normal; opacity: .45; margin: 0 .18em; }

/* 当前语言那一半点亮 */
.lang[data-lang="cn"] #lang-cn,
.lang[data-lang="en"] #lang-en { color: var(--red); }

/* ---------- 调查进度 ---------- */
.meter {
  position: fixed;
  left: 50%;
  bottom: clamp(6px, 1.5vmin, 18px);
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .9em;
  white-space: nowrap;
  font: 400 clamp(9px, 1.5vmin, 12px)/1 Consolas, "Courier New", monospace;
  letter-spacing: .18em;
  color: rgba(227, 217, 192, .58);
}

.meter__track {
  display: block;
  width: clamp(80px, 15vw, 210px);
  height: 3px;
  background: rgba(227, 217, 192, .18);
}

.meter__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--red);
  box-shadow: 0 0 .8vmin rgba(255, 45, 45, .6);
  transition: width .55s cubic-bezier(.2, .7, .3, 1);
}

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

/* ---------- 虚构声明：客户需求里写死要显眼标注 ---------- */
.fiction {
  position: fixed;
  top: clamp(8px, 1.6vmin, 18px);
  left: clamp(8px, 1.6vmin, 20px);
  /* 跟 .lang 一样，客户要求这行常驻 —— 开场页和启动动画也得看得见 */
  z-index: 70;
  margin: 0;
  padding: .3em .7em;
  border: 1px dashed rgba(255, 45, 45, .55);
  color: rgba(255, 45, 45, .92);
  font: 400 clamp(9.5px, 1.45vmin, 12.5px)/1.5 "Segoe UI", "PingFang SC", sans-serif;
  letter-spacing: .1em;
  background: rgba(6, 9, 16, .45);
}

/* ============================================================
   开场：打开案件档案
   ============================================================ */
.entry {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vmin;
  background:
    radial-gradient(ellipse 72% 66% at 50% 46%,
      rgba(11, 17, 28, .3) 15%, rgba(6, 9, 16, .95) 100%),
    url("../img/bg.webp") center / cover no-repeat fixed;
  transition: opacity .55s ease, visibility .55s ease;
}

/* display:flex 会盖掉浏览器默认的 [hidden]{display:none}，必须显式写一遍 */
.entry[hidden] { display: none; }

.entry.is-gone { opacity: 0; visibility: hidden; }

.entry__box {
  width: min(560px, 100%);
  padding: clamp(26px, 5vmin, 54px) clamp(24px, 5vmin, 56px);
  text-align: center;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%),
    linear-gradient(#efe7d2, #ddd1b3);
  border: 1px solid rgba(40, 30, 15, .4);
  box-shadow: 0 4vmin 10vmin rgba(0, 0, 0, .8), inset 0 0 9vmin rgba(120, 95, 55, .18);
  color: #241c12;
}

.entry__kicker {
  margin: 0 0 1em;
  font: 700 clamp(10px, 1.6vmin, 13px)/1.6 Consolas, "Courier New", monospace;
  letter-spacing: .26em;
  color: var(--red-dim);
}

.entry__title {
  margin: 0;
  font-size: clamp(30px, 7.2vmin, 62px);
  letter-spacing: .16em;
  text-indent: .16em;
  font-weight: 700;
}

.entry__sub {
  margin: 1em 0 0;
  font-size: clamp(12.5px, 1.95vmin, 16px);
  line-height: 1.95;
  color: #5d5039;
}

.entry__btn {
  display: inline-flex;
  align-items: center;
  margin-top: clamp(20px, 3.6vmin, 36px);
  padding: clamp(12px, 2.1vmin, 18px) clamp(26px, 4.4vmin, 46px);
  border: 2px solid var(--red-dim);
  background: var(--red-dim);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.entry__btn span {
  font-size: clamp(15px, 2.6vmin, 22px);
  font-weight: 700;
  letter-spacing: .14em;
  text-indent: .14em;
}

.entry__btn:hover,
.entry__btn:focus-visible {
  background: #a8371f;
  border-color: #a8371f;
  transform: translateY(-2px);
  box-shadow: 0 1.2vmin 3vmin rgba(168, 55, 31, .5);
  outline: none;
}

.entry__note {
  margin: clamp(18px, 3vmin, 28px) 0 0;
  font-size: clamp(11px, 1.6vmin, 13.5px);
  letter-spacing: .08em;
  color: #8a6a4a;
}

/* ============================================================
   启动动画：一段「正在接入档案系统」的打字机
   ============================================================ */
.boot {
  position: fixed;
  inset: 0;
  /* 必须比开场页(.entry, 60)高：开场页是淡出的，会淡 620 毫秒，
     那段时间它还挂在屏幕上，压在启动动画上面就是「两张脸叠一起」。 */
  z-index: 65;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vmin;
  background: rgba(5, 8, 14, .97);
  transition: opacity .45s ease, visibility .45s ease;
}

.boot[hidden] { display: none; }

.boot.is-gone { opacity: 0; visibility: hidden; }

.boot__box {
  width: min(620px, 100%);
  text-align: left;
}

.boot__log {
  margin: 0;
  min-height: 7em;
  font: 400 clamp(11.5px, 1.85vmin, 15px)/2 Consolas, "Courier New", monospace;
  letter-spacing: .06em;
  color: #7ee0a8;
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: 0 0 1.4vmin rgba(126, 224, 168, .35);
}

/* 每行末尾闪烁的光标 */
.boot__log::after {
  content: "▌";
  animation: caret 1s step-end infinite;
}

@keyframes caret { 50% { opacity: 0; } }

.boot__skip {
  display: block;
  margin-top: clamp(18px, 3vmin, 30px);
  padding: .5em 1.2em;
  border: 1px solid rgba(227, 217, 192, .42);
  background: rgba(227, 217, 192, .06);
  color: rgba(227, 217, 192, .8);
  font: 400 clamp(10.5px, 1.6vmin, 13px)/1.4 Consolas, "Courier New", monospace;
  letter-spacing: .2em;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.boot__skip:hover,
.boot__skip:focus-visible {
  border-color: var(--red);
  color: var(--red);
  background: rgba(255, 45, 45, .1);
  outline: none;
}

/* 字打完之后，这个按钮就是唯一的出口了，得一眼看得见：
   平时是灰框的「跳过动画」，这会儿换成实心的「进入调查」。 */
.boot.is-ready .boot__skip {
  border-color: var(--red);
  background: rgba(255, 45, 45, .22);
  color: #ffe9e4;
}

.boot.is-ready .boot__skip:hover,
.boot.is-ready .boot__skip:focus-visible {
  background: var(--red);
  color: #fff;
}

/* 扫描线：压在启动画面上，一点点电视味 */
.boot__box::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, .028) 0 1px,
    rgba(255, 255, 255, 0) 1px 3px);
}

/* ============================================================
   涂黑字段：正文里 <span class="redact">…</span>，点了才显形
   ============================================================ */
.redact {
  position: relative;
  padding: 0 .4em;
  background: #191307;
  color: transparent;
  cursor: pointer;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: background .35s ease, color .35s ease, box-shadow .35s ease;
  -webkit-user-select: none;
  user-select: none;
}

.redact:hover { background: #241b0a; }

.redact.is-open {
  background: rgba(255, 45, 45, .12);
  color: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 45, 45, .3);
  cursor: text;
  -webkit-user-select: auto;
  user-select: auto;
}

/* 还没揭开时，右上角一个小三角，暗示「这里能点」 */
.redact::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  border: 3px solid transparent;
  border-top-color: rgba(255, 45, 45, .75);
  border-right-color: rgba(255, 45, 45, .75);
}

.redact.is-open::after { display: none; }

/* ============================================================
   隐藏档案：<div class="locked">…</div> 先糊住，点了才看清
   ============================================================ */
.modal__body .locked {
  position: relative;
  cursor: pointer;
}

/* 封着的时候只露出一截。里面可能塞了很多照片，整段铺开会比弹窗还高 ——
   而「点击解锁」那行字是垂直居中的，一高就被顶到屏幕外面，
   访客看到的就是一团糊，不知道该点哪儿。夹到一屏之内就没这问题。 */
.modal__body .locked:not(.is-open) {
  max-height: 58svh;
  overflow: hidden;
}

/* 夹过之后，画在外面的虚线和那层暗色会被 overflow 裁掉，
   所以封着的时候把这俩挪到里面来，贴着夹出来的那一截画。 */
.modal__body .locked:not(.is-open)::before,
.modal__body .locked:not(.is-open)::after { inset: 0; }

.modal__body .locked > * {
  filter: blur(7px);
  transition: filter .65s ease;
  -webkit-user-select: none;
  user-select: none;
}

.modal__body .locked.is-open { cursor: auto; }
.modal__body .locked.is-open > * { filter: none; -webkit-user-select: auto; user-select: auto; }

/* 盖在上面那层「点击解锁」，同时挡住底下的文字不被划选 */
.modal__body .locked::before {
  content: attr(data-unlock);
  position: absolute;
  inset: -1em -1.2em;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1em;
  background: rgba(20, 16, 8, .35);
  color: #2b2213;
  font: 700 clamp(12px, 1.9vmin, 16px)/1.8 Consolas, "Courier New", monospace;
  letter-spacing: .22em;
  text-shadow: 0 0 1vmin rgba(255, 255, 255, .8);
  transition: opacity .4s ease;
}

.modal__body .locked::after {
  content: "";
  position: absolute;
  inset: -1em -1.2em;
  z-index: 0;
  border: 2px dashed rgba(200, 69, 42, .6);
  pointer-events: none;
}

.modal__body .locked.is-open::before,
.modal__body .locked.is-open::after { opacity: 0; }

.modal__body .locked.is-open::before { pointer-events: none; }

/* ============================================================
   最终报告底下那排按钮
   ============================================================ */
.acts {
  margin-top: clamp(18px, 2.8vmin, 30px);
  padding-top: clamp(14px, 2.2vmin, 22px);
  border-top: 1px dashed rgba(120, 95, 55, .5);
}

.acts[hidden] { display: none; }

.acts__cap {
  margin: 0 0 .9em;
  font: 700 clamp(10px, 1.5vmin, 12.5px)/1.5 Consolas, "Courier New", monospace;
  letter-spacing: .24em;
  color: var(--red-dim);
}

.acts__row {
  display: flex;
  flex-wrap: wrap;
  gap: .7em;
}

.acts a,
.acts button {
  display: inline-block;
  padding: .55em 1.2em;
  border: 1px solid rgba(40, 30, 15, .4);
  background: rgba(255, 255, 255, .45);
  color: #3a2f20;
  font-size: clamp(12px, 1.8vmin, 15px);
  letter-spacing: .06em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.acts a:hover,
.acts button:hover,
.acts a:focus-visible,
.acts button:focus-visible {
  background: var(--red-dim);
  border-color: var(--red-dim);
  color: #fff;
  outline: none;
}

/* ---------- 入场 ---------- */
body.ready .card,
body.ready .suspect {
  --ty: 0px;
  opacity: 1;
  transform: translateY(0) rotate(var(--r, 0deg));
}

body.ready .suspect { transform: translateY(0) rotate(var(--r, 0deg)) scale(1); }

/* 竖屏手机：板子会缩得很小，转一下屏就正常了 */
@media (orientation: portrait) and (max-width: 860px) {
  body::after {
    content: "请横屏查看 · ROTATE YOUR DEVICE";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 6vh;
    z-index: 9;
    text-align: center;
    font-family: "Segoe UI", "PingFang SC", sans-serif;
    font-size: 3.4vw;
    letter-spacing: .18em;
    color: var(--red);
    opacity: .75;
    pointer-events: none;
  }
}

/* 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  .slot, .suspect,
  .modal__backdrop, .modal__panel, .modal__close,
  .lang, .meter, .fiction, .meter__fill,
  .entry, .boot, .redact,
  .modal__body .locked > *, .modal__body .locked::before,
  .acts a, .acts button, .entry__btn,
  .zoom {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .modal__close:hover,
  .entry__btn:hover { transform: none; }
  .boot__log::after { animation: none; }
  /* 跳过来闪那一下也是动效，关掉；改成直接留个浅底色 */
  .modal__body .trow.is-flash,
  .modal__body .erow.is-flash { animation: none; background: rgba(200, 69, 42, .18); }
}