/* ============================================================
   「天井裏の誰か」を描く追加演出
   （防犯カメラ／天井／目／まぶた／ノート）。fx.js とセットで使う。
   ============================================================ */

.story { color: #d9d6cf; }
.story p.quote-line { color: #ece8df; }

/* ---------- 入場ゲート（防犯カメラの再生画面） ---------- */
.hfx-gate.cx-gate {
  background: #020403;
  color: #c9d8c8;
}
.hfx-gate.cx-gate::before {
  inset: 18px;
  height: auto;
  opacity: 0.55;
  background:
    linear-gradient(#9fdca8, #9fdca8) top left / 26px 2px no-repeat,
    linear-gradient(#9fdca8, #9fdca8) top left / 2px 26px no-repeat,
    linear-gradient(#9fdca8, #9fdca8) top right / 26px 2px no-repeat,
    linear-gradient(#9fdca8, #9fdca8) top right / 2px 26px no-repeat,
    linear-gradient(#9fdca8, #9fdca8) bottom left / 26px 2px no-repeat,
    linear-gradient(#9fdca8, #9fdca8) bottom left / 2px 26px no-repeat,
    linear-gradient(#9fdca8, #9fdca8) bottom right / 26px 2px no-repeat,
    linear-gradient(#9fdca8, #9fdca8) bottom right / 2px 26px no-repeat;
}
.hfx-gate.cx-gate::after {
  inset: 0;
  height: auto;
  opacity: 0.16;
  background: repeating-linear-gradient(to bottom, rgba(150, 255, 170, 0.5) 0 1px, transparent 1px 3px);
  animation: cx-gate-roll 7s linear infinite;
}
@keyframes cx-gate-roll {
  from { background-position-y: 0; }
  to   { background-position-y: 60px; }
}
.cx-gate__rec {
  position: absolute;
  top: 34px;
  left: 38px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.6em;
  font: 600 12px/1 "Courier New", monospace;
  letter-spacing: 0.12em;
  color: #cfe9d2;
}
.cx-gate__rec i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e5231f;
  box-shadow: 0 0 9px #e5231f;
  animation: cx-blink 1.2s steps(1, end) infinite;
}
.cx-gate__cam {
  position: absolute;
  top: 34px;
  right: 38px;
  z-index: 4;
  font: 600 12px/1 "Courier New", monospace;
  letter-spacing: 0.12em;
  color: #8fb596;
  opacity: 0.8;
}
.cx-gate__play {
  position: relative;
  z-index: 2;
  margin-top: 0.4rem;
  font: 600 13px/1 "Courier New", monospace;
  letter-spacing: 0.3em;
  color: #cfe9d2;
  border: 1px solid rgba(160, 220, 170, 0.55);
  padding: 0.8em 1.6em;
  animation: hfx-pulse 2.2s ease-in-out infinite;
}
.hfx-gate.cx-gate .hfx-gate__title {
  text-shadow: 0 0 12px rgba(120, 220, 140, 0.35), 0 2px 6px #000;
}
.hfx-gate.cx-gate .hfx-gate__note {
  max-width: 28em;
  padding: 0 1.4rem;
  line-height: 1.9;
  opacity: 0.78;
  text-shadow: 0 2px 6px #000;
}
.hfx-gate.cx-gate.hfx-entering {
  animation: none;
}
.hfx-gate.cx-gate.hfx-entering .hfx-gate__door {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: cx-gate-static 2.4s steps(14, end) forwards;
}
@keyframes cx-gate-static {
  0%   { opacity: 0; background-position: 0 0; }
  12%  { opacity: 0.9; background-position: 40px 20px; }
  40%  { opacity: 0.55; background-position: -60px 90px; }
  70%  { opacity: 0.8; background-position: 90px -40px; }
  88%  { opacity: 1; background-color: #000; }
  100% { opacity: 1; background-color: #000; }
}

/* ---------- 録画ランプ（ページの隅に出る。読んでいる側も録画されている） ---------- */
.cx-hud {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 6600;
  display: flex;
  align-items: center;
  gap: 0.6em;
  font: 600 11px/1 "Courier New", monospace;
  letter-spacing: 0.1em;
  color: #d3e6d1;
  text-shadow: 0 0 5px rgba(120, 255, 140, 0.45), 0 1px 2px #000;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}
.cx-hud.is-on { opacity: 0.8; }
.cx-hud__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5231f;
  box-shadow: 0 0 8px #e5231f;
  animation: cx-blink 1.2s steps(1, end) infinite;
}
.cx-hud.is-live .cx-hud__dot { background: #35e060; box-shadow: 0 0 8px #35e060; animation: none; }
.cx-hud.is-glitch { animation: cx-hud-glitch 0.5s steps(2, end); }
@keyframes cx-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0.1; }
}
@keyframes cx-hud-glitch {
  0%, 100% { transform: none; filter: none; }
  20% { transform: translateX(-4px); filter: hue-rotate(90deg); }
  50% { transform: translateX(5px) skewX(-8deg); }
  80% { transform: translateX(-2px); opacity: 0.2; }
}

/* ---------- 防犯カメラの映像（小窓 ⇄ 画面いっぱい） ---------- */
.cx-cam-dim {
  position: fixed;
  inset: 0;
  z-index: 6490;
  background: rgba(0, 0, 0, 0.78);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
.cx-cam-dim.is-on { opacity: 1; }

.cx-cam {
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: min(300px, 54vw);
  aspect-ratio: 8 / 5;
  z-index: 6500;
  background: #030603;
  border: 1px solid rgba(150, 220, 165, 0.4);
  box-shadow: 0 0 0 3px #090a09, 0 12px 44px rgba(0, 0, 0, 0.85), 0 0 30px rgba(80, 200, 110, 0.12);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.cx-cam.is-on { opacity: 1; visibility: visible; transition: opacity 0.5s ease; }
.cx-cam.is-big {
  right: auto;
  bottom: auto;
  left: 50%;
  top: 50%;
  width: min(94vw, 900px);
  margin: calc(min(94vw, 900px) * -0.3125) 0 0 calc(min(94vw, 900px) * -0.5);
}
.cx-cam.is-cut { opacity: 0; transition: opacity 0.1s ease; }

.cx-cam__view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  filter: contrast(1.06) brightness(1.02);
}
.cx-cam__grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: 0.5;
  mix-blend-mode: screen;
}
.cx-cam__roll {
  position: absolute;
  left: 0;
  right: 0;
  height: 22%;
  top: -22%;
  background: linear-gradient(to bottom, transparent, rgba(190, 255, 200, 0.07), transparent);
  animation: cx-roll 5.5s linear infinite;
}
@keyframes cx-roll { to { top: 110%; } }
.cx-cam__vig {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.66) 100%);
}
.cx-cam__hud {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font: 600 10px/1.3 "Courier New", monospace;
  letter-spacing: 0.08em;
  color: #d6ecd6;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}
.cx-cam.is-big .cx-cam__hud { font-size: clamp(11px, 1.5vw, 15px); left: 14px; right: 14px; top: 12px; }
.cx-cam__rec { display: flex; align-items: center; gap: 0.45em; }
.cx-cam__rec i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e5231f;
  box-shadow: 0 0 7px #e5231f;
  animation: cx-blink 1.2s steps(1, end) infinite;
}
.cx-cam__ts { text-align: right; }
.cx-cam__sig {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font: 700 clamp(12px, 2vw, 20px) "Courier New", monospace;
  letter-spacing: 0.3em;
  color: #cfe9d2;
  background: #000;
}
.cx-cam.is-lost .cx-cam__sig { display: flex; }

/* ---- 映像の中身（写真を暗視カメラ風に加工したコマ）。コマ落ちのように、切り替わるだけで動かない ---- */
.cx-cam__stage {
  position: absolute;
  inset: 0;
  transform-origin: var(--zx, 30%) var(--zy, 30%);
  transition: transform var(--zt, 0s) cubic-bezier(0.5, 0, 0.3, 1);
}
.cx-cam__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.cx-cam__frame.is-on { opacity: 1; }
.cx-cam.is-jolt .cx-cam__stage { animation: cx-jolt 0.16s steps(2, end); }
@keyframes cx-jolt {
  0% { transform: translate(-6px, 3px) scale(1.02); }
  50% { transform: translate(5px, -2px) scale(1.01); filter: brightness(1.6); }
  100% { transform: none; }
}

/* ---------- 天井（剥がれた漆喰の天井写真。シミ・点検口・通気口。画面の上端に貼り付く） ---------- */
.cx-ceiling {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 30vh;
  min-height: 150px;
  z-index: 6000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 100%);
}
.cx-ceiling.is-on { opacity: 1; }
.cx-ceiling__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  opacity: 0;
}
.cx-ceiling .im-plain { opacity: 1; }
.cx-ceiling.has-hatch .im-closed { opacity: 1; }
.cx-ceiling.has-hatch.is-ajar .im-ajar { opacity: 1; }
.cx-ceiling.has-hatch.is-open .im-open { opacity: 1; }
.cx-ceiling.has-vent .im-vent { opacity: 1; }
.cx-ceiling__stain,
.cx-ceiling__stain-face {
  position: absolute;
  top: 36%;
  right: 14%;
  width: clamp(80px, 16vw, 130px);
  opacity: 0;
  transition: opacity 3s ease;
  filter: blur(0.6px) brightness(0.78) saturate(0.7);
}
.cx-ceiling.has-stain .cx-ceiling__stain { opacity: 1; }
.cx-ceiling.is-face .cx-ceiling__stain-face { opacity: 1; transition-duration: 1.4s; }
.cx-ceiling__beam {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 210, 0.42) 0%, rgba(255, 240, 200, 0.14) 38%, transparent 66%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.cx-ceiling.is-beam .cx-ceiling__beam { opacity: 1; }

/* ---------- 暗がりの目（暗闇に浮く、写真の目） ---------- */
.cx-eyes {
  --ew: min(250px, 56vw);
  position: fixed;
  z-index: 6800;
  pointer-events: none;
  width: var(--ew);
  aspect-ratio: 480 / 129;
  margin: calc(var(--ew) * -0.134) 0 0 calc(var(--ew) * -0.5);
  background: url("assets/cam/eyes.jpg") center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(var(--eb, 0px));
  transition: opacity var(--ef, 0.35s) ease;
}
.cx-eyes.is-on { opacity: var(--eo, 0.95); }
.cx-eyes.is-blink { transform: scaleY(0.06); transition: transform 0.09s ease, opacity var(--ef, 0.35s) ease; }
.cx-eyes.is-near { --ew: min(520px, 96vw); }

/* ---------- まぶた（眠りに落ちる直前の、閉じていく視界） ---------- */
.cx-lid {
  position: fixed;
  left: -4%;
  right: -4%;
  z-index: 8900;
  background: #000;
  height: 0;
  pointer-events: none;
  transition: height var(--cx-lid-t, 3.2s) cubic-bezier(0.35, 0, 0.25, 1);
  box-shadow: 0 0 40px 24px #000;
}
.cx-lid--top { top: 0; border-radius: 0 0 50% 50% / 0 0 22vh 22vh; }
.cx-lid--bottom { bottom: 0; border-radius: 50% 50% 0 0 / 22vh 22vh 0 0; }
.cx-lid.is-closed { height: 54vh; }

/* ---------- 本文を冷やす／饐えた匂いで濁らせる ---------- */
.story { transition: filter 2s ease; }
body.cx-cold .story { filter: saturate(0.2) brightness(0.9) hue-rotate(185deg); }
body.cx-stale .story { filter: sepia(0.55) saturate(1.5) hue-rotate(-14deg) brightness(0.92); }
.cx-cold-ov {
  position: fixed;
  inset: 0;
  z-index: 6100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(18, 36, 70, 0.72) 100%);
}
body.cx-cold .cx-cold-ov { opacity: 1; }

/* ---------- ノート（犯人の手書きの記録。一文字ずつ書かれていく） ---------- */
.story .note-hand {
  position: relative;
  font-family: "Zen Kurenaido", "Yu Mincho", "游明朝", serif;
  font-size: 1.22rem;
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: #e8dcb8;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2.1em - 1px), rgba(210, 190, 140, 0.13) calc(2.1em - 1px), rgba(210, 190, 140, 0.13) 2.1em);
  border-left: 2px solid rgba(190, 80, 70, 0.55);
  padding: 0.3em 0.2em 0.3em 1.1rem;
  text-align: left;
  transform: rotate(-0.5deg);
  text-shadow: 0 0 1px rgba(232, 220, 184, 0.3);
  min-height: 3.2em;
}
.story .note-hand.is-shiver { animation: cx-shiver 0.18s steps(2, end) infinite; }
@keyframes cx-shiver {
  0% { transform: rotate(-0.5deg) translate(0, 0); }
  50% { transform: rotate(-0.4deg) translate(1.2px, -0.8px); }
  100% { transform: rotate(-0.6deg) translate(-1px, 0.8px); }
}
.story .note-hand .hfx-ch { opacity: 0; transition: opacity 0.12s linear; }
.story .note-hand .hfx-ch.hfx-on { opacity: 1; }

/* ---------- 鈴 ---------- */
.manual-btn { transition: border-color 0.5s, color 0.5s, box-shadow 0.5s; }
.manual-btn:hover { border-color: #888; color: #ddd; }
.manual-btn.is-wrong { border-color: #8a2020; color: #c46060; box-shadow: 0 0 14px rgba(160, 30, 30, 0.35); }

@media (max-width: 600px) {
  .cx-cam:not(.is-big) { width: min(250px, 66vw); right: 8px; bottom: 8px; }
  .cx-hud { font-size: 10px; top: 8px; left: 8px; }
  .story .note-hand { font-size: 1.1rem; }
}