:root {
  --ink: #111513;
  --paper: #d5d0bf;
  --paper-dim: #aaa592;
  --red: #a34335;
  --red-bright: #d16855;
  --green: #60766c;
  --green-pale: #aebcb2;
  --amber: #c79a56;
  --night: #070a09;
  --glass: rgba(13, 18, 16, 0.76);
  --line: rgba(210, 219, 204, 0.19);
  --ease: cubic-bezier(.22, .77, .16, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050706;
  color: var(--paper);
  font-family: "Noto Serif TC", "PMingLiU", "MingLiU", "Microsoft JhengHei", serif;
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible {
  outline: 2px solid var(--red-bright);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen {
  position: fixed;
  inset: 0;
}

.title-screen {
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(4, 7, 6, .42), rgba(4, 7, 6, .16) 45%, rgba(4, 7, 6, .72)),
    url("./assets/lobby.png") center / cover no-repeat;
}

.title-screen::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 38%, transparent 0 18%, rgba(0, 0, 0, .28) 58%, rgba(0, 0, 0, .85) 100%);
}

.title-rain {
  position: absolute;
  inset: -20%;
  z-index: -1;
  opacity: .18;
  transform: rotate(7deg);
  background-image: repeating-linear-gradient(92deg, transparent 0 40px, rgba(198, 219, 218, .5) 41px 42px, transparent 43px 77px);
  animation: rain-drift 2.8s linear infinite;
}

.title-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: inset 0 0 20vw 8vw #020403;
  pointer-events: none;
}

.title-copy {
  width: min(820px, calc(100vw - 48px));
  padding: clamp(28px, 5vw, 72px);
  border-left: 1px solid rgba(216, 225, 213, .32);
  transform: translateX(-7vw);
  text-shadow: 0 2px 28px #000;
}

.eyebrow {
  margin: 0 0 22px;
  color: var(--green-pale);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .34em;
}

.title-copy h1 {
  display: flex;
  align-items: end;
  gap: 24px;
  margin: 0;
  font-size: clamp(64px, 11vw, 142px);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.09em;
}

.title-copy h1 span {
  position: relative;
}

.title-copy h1 span::after {
  position: absolute;
  right: -.08em;
  bottom: -.12em;
  width: .72em;
  height: .72em;
  content: "";
  border: 2px solid rgba(165, 63, 49, .72);
  transform: rotate(-8deg);
  box-shadow: inset 0 0 0 5px rgba(165, 63, 49, .08);
}

.title-copy h1 small {
  margin-bottom: 8px;
  color: var(--paper-dim);
  font-size: clamp(16px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: .24em;
}

.english-title {
  margin: 28px 0 0;
  color: rgba(213, 208, 191, .56);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  letter-spacing: .5em;
}

.tagline {
  max-width: 590px;
  margin: 52px 0 30px;
  color: #c8c6b9;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.9;
  letter-spacing: .08em;
}

.primary-action {
  position: relative;
  display: inline-flex;
  min-width: 220px;
  padding: 14px 24px;
  overflow: hidden;
  border: 1px solid rgba(211, 220, 207, .3);
  background: rgba(9, 13, 11, .78);
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .25s;
}

.primary-action::after {
  position: absolute;
  right: -48px;
  width: 72px;
  height: 72px;
  content: "";
  background: var(--red);
  transform: rotate(45deg);
  transition: right .35s var(--ease);
}

.primary-action:hover {
  border-color: var(--red-bright);
  background: rgba(20, 16, 13, .92);
  transform: translateX(5px);
}

.primary-action:hover::after {
  right: -36px;
}

.primary-action span {
  font-size: 15px;
  letter-spacing: .18em;
}

.primary-action small {
  color: #888d85;
  font-size: 9px;
  letter-spacing: .06em;
}

.title-options {
  display: flex;
  gap: 24px;
  margin-top: 19px;
}

.text-button {
  min-height: 24px;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  color: rgba(213, 208, 191, .58);
  background: transparent;
  font-size: 10px;
  letter-spacing: .12em;
  cursor: pointer;
}

.text-button:hover {
  border-color: var(--paper-dim);
  color: var(--paper);
}

.content-note {
  position: absolute;
  right: 22px;
  bottom: 18px;
  margin: 0;
  color: rgba(211, 216, 207, .4);
  font-size: 9px;
  letter-spacing: .08em;
}

.game-screen {
  display: grid;
  background: #020403;
  place-items: center;
}

.scene-frame {
  position: relative;
  width: min(100vw, 177.7778vh);
  height: min(100vh, 56.25vw);
  overflow: hidden;
  background: #060907;
  box-shadow: 0 0 70px #000;
}

.scene-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
  transform: none;
  transition: none;
  user-select: none;
}

.scene-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 6, 5, .08), transparent 52%, rgba(2, 3, 3, .2)),
    radial-gradient(circle at center, transparent 44%, rgba(0, 0, 0, .3) 114%);
  mix-blend-mode: normal;
  transition: opacity .18s linear;
}

#rain-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: .16;
  pointer-events: none;
}

.scene-frame[data-scene="hidden"] #rain-canvas {
  opacity: .03;
}

.anomaly-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.hud {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 30;
  display: grid;
  padding: clamp(14px, 2vw, 28px);
  background: linear-gradient(180deg, rgba(2, 4, 3, .86), transparent);
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  pointer-events: none;
}

.case-id {
  display: grid;
  gap: 4px;
}

.case-id span,
.progress span,
.objective span {
  color: rgba(204, 211, 199, .54);
  font-size: clamp(7px, .62vw, 10px);
  font-weight: 600;
  letter-spacing: .22em;
}

.case-id strong {
  font-size: clamp(10px, .9vw, 14px);
  font-weight: 600;
  letter-spacing: .13em;
}

.progress {
  display: grid;
  width: clamp(140px, 19vw, 270px);
  gap: 5px;
  text-align: center;
}

.progress-track {
  display: none;
}

.progress-track i {
  display: block;
  width: 7%;
  height: 100%;
  background: var(--red-bright);
  box-shadow: 0 0 12px var(--red);
  transition: width 1s var(--ease);
}

.hud-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  pointer-events: auto;
}

.icon-button,
.notebook-button {
  height: 34px;
  border: 1px solid rgba(216, 223, 211, .18);
  background: rgba(5, 8, 7, .88);
  cursor: pointer;
}

.icon-button {
  width: 34px;
  color: var(--green-pale);
}

.notebook-button {
  display: flex;
  padding: 0 9px 0 12px;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: .12em;
}

.notebook-button b {
  display: grid;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #171513;
  background: var(--paper-dim);
  font-family: Arial, sans-serif;
  font-size: 10px;
  place-items: center;
}

.objective {
  position: absolute;
  top: clamp(72px, 8vw, 112px);
  left: clamp(15px, 2vw, 30px);
  z-index: 24;
  max-width: min(330px, 35vw);
  padding-left: 12px;
  border-left: 2px solid rgba(171, 76, 61, .72);
  text-shadow: 0 2px 12px #000;
  transition: opacity .4s, transform .4s;
  pointer-events: none;
}

.objective p {
  margin: 4px 0 0;
  color: rgba(225, 224, 211, .88);
  font-size: clamp(9px, .82vw, 13px);
  line-height: 1.55;
  letter-spacing: .06em;
}

.objective span {
  color: rgba(204, 211, 199, .72);
}

.inventory-strip {
  position: absolute;
  top: clamp(130px, 13vw, 176px);
  left: clamp(15px, 2vw, 30px);
  z-index: 24;
  display: flex;
  max-width: min(430px, 48vw);
  color: rgba(211, 214, 201, .58);
  align-items: center;
  gap: 9px;
  font-size: 8px;
  letter-spacing: .13em;
  pointer-events: none;
}

.inventory-strip[hidden] {
  display: none;
}

.inventory-strip > span {
  color: rgba(185, 102, 84, .8);
}

.inventory-strip > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.inventory-strip > div span {
  padding: 3px 6px;
  border: 1px solid rgba(213, 218, 205, .12);
  background: rgba(5, 8, 7, .54);
}

.hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: 15;
}

.hotspot {
  position: absolute;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: crosshair;
  transform: translate(-50%, -50%);
}

.hotspot::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  content: "";
  border: 1px solid rgba(229, 225, 204, .2);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.55);
  transition: opacity .25s, transform .25s, border-color .25s;
  pointer-events: none;
}

.hotspot::after {
  position: absolute;
  top: calc(50% + 15px);
  left: 50%;
  padding: 4px 7px;
  content: attr(data-label);
  white-space: nowrap;
  border: 1px solid rgba(220, 218, 202, .14);
  color: rgba(235, 230, 211, .9);
  background: rgba(5, 8, 7, .9);
  font-size: clamp(7px, .62vw, 10px);
  letter-spacing: .12em;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}

.hotspot:hover::before,
.hotspot:focus-visible::before,
.hotspot:hover::after,
.hotspot:focus-visible::after,
.scene-frame.show-focus .hotspot::before {
  opacity: 1;
}

.hotspot:hover::before,
.hotspot:focus-visible::before,
.scene-frame.show-focus .hotspot::before {
  border-color: rgba(219, 193, 161, .88);
  box-shadow: 0 0 16px rgba(205, 150, 91, .2);
  transform: translate(-50%, -50%) scale(1);
}

.hotspot:hover::after,
.hotspot:focus-visible::after {
  transform: translate(-50%, 0);
}

.hotspot.is-mark::before {
  width: 11px;
  height: 11px;
  border-color: rgba(187, 62, 45, .55);
  border-radius: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.mark-layer {
  z-index: 26;
  pointer-events: none;
}

.mark-layer .hotspot {
  pointer-events: auto;
}

.scene-frame.scene-unpowered .scene-wash {
  background:
    linear-gradient(180deg, rgba(4, 12, 13, .12), transparent 58%, rgba(2, 5, 6, .22)),
    radial-gradient(circle at 52% 44%, transparent 42%, rgba(0, 5, 7, .28) 116%);
}

.scene-frame.listen-mode .scene-wash {
  opacity: .15;
}

.scene-frame.listen-mode::after {
  position: absolute;
  inset: 8%;
  z-index: 14;
  content: "";
  border: 1px solid rgba(206, 207, 190, .16);
  opacity: 0;
  pointer-events: none;
  animation: observation-pulse 1.8s ease-out;
}

.scene-nav {
  position: absolute;
  right: 50%;
  bottom: clamp(18px, 2.4vw, 36px);
  z-index: 25;
  display: flex;
  transform: translateX(50%);
  gap: 4px;
}

.nav-action {
  min-width: 116px;
  padding: 10px 15px;
  border: 1px solid rgba(219, 224, 211, .18);
  color: rgba(224, 222, 209, .88);
  background: rgba(4, 7, 6, .88);
  font-size: clamp(8px, .7vw, 11px);
  letter-spacing: .15em;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.nav-action:hover {
  border-color: rgba(208, 155, 102, .7);
  background: rgba(24, 23, 18, .83);
}

.nav-action.is-locked {
  border-color: rgba(126, 92, 78, .38);
  color: rgba(204, 191, 170, .7);
  background:
    linear-gradient(90deg, rgba(74, 39, 34, .22), transparent 22%),
    rgba(4, 7, 6, .9);
}

.nav-action.is-locked::before {
  margin-right: 7px;
  color: #9d6258;
  content: "◇";
}

.nav-action.is-locked:hover {
  border-color: rgba(169, 93, 78, .72);
  color: #e1d7c1;
}

.subtitle {
  position: absolute;
  right: 50%;
  bottom: clamp(74px, 8vw, 110px);
  z-index: 40;
  width: min(710px, 75vw);
  padding: 12px 20px 14px;
  border-top: 1px solid rgba(204, 210, 198, .18);
  background: linear-gradient(90deg, transparent, rgba(4, 6, 5, .9) 12% 88%, transparent);
  text-align: center;
  text-shadow: 0 2px 10px #000;
  transform: translateX(50%);
  pointer-events: none;
}

.subtitle span {
  color: var(--red-bright);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .2em;
}

.subtitle p {
  margin: 5px 0 0;
  font-size: clamp(11px, 1vw, 15px);
  line-height: 1.65;
  letter-spacing: .08em;
}

.focus-button {
  position: absolute;
  right: clamp(15px, 2vw, 30px);
  bottom: clamp(18px, 2.4vw, 36px);
  z-index: 25;
  display: flex;
  padding: 7px 10px;
  border: 0;
  color: rgba(216, 218, 205, .56);
  background: transparent;
  align-items: center;
  gap: 8px;
  font-size: clamp(7px, .62vw, 10px);
  letter-spacing: .1em;
  cursor: pointer;
}

.focus-glyph {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.focus-glyph::after {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 1px;
  height: 1px;
  content: "";
  background: currentColor;
  box-shadow: -5px 0 currentColor, 5px 0 currentColor, 0 -5px currentColor, 0 5px currentColor;
}

.notebook {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 210;
  display: flex;
  width: min(470px, 95vw);
  padding: 28px clamp(20px, 3vw, 38px);
  border-left: 1px solid rgba(157, 66, 51, .35);
  color: #24221e;
  background:
    linear-gradient(rgba(216, 211, 192, .95), rgba(189, 184, 164, .97)),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(71, 79, 72, .16) 28px);
  flex-direction: column;
  box-shadow: -28px 0 70px rgba(0, 0, 0, .7);
  transform: translateX(105%);
  transition: transform .52s var(--ease);
}

.notebook.open {
  transform: translateX(0);
}

.notebook::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 44px;
  width: 1px;
  content: "";
  background: rgba(158, 67, 53, .27);
}

.notebook-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.notebook-head span {
  color: #68665d;
  font-size: 9px;
  letter-spacing: .2em;
}

.notebook-head h2 {
  margin: 9px 0 20px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .08em;
}

.close-button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(32, 34, 30, .18);
  color: #34332e;
  background: transparent;
  font-family: Arial, sans-serif;
  font-size: 22px;
  cursor: pointer;
}

.notebook-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  border-bottom: 1px solid rgba(39, 43, 37, .24);
  gap: 4px;
}

.notebook-tab {
  padding: 9px 13px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #6f6c61;
  background: transparent;
  font-size: 10px;
  letter-spacing: .1em;
  cursor: pointer;
}

.notebook-tab.active {
  border-color: #8e3c30;
  color: #292722;
  font-weight: 700;
}

.notebook-content {
  position: relative;
  z-index: 1;
  overflow-y: auto;
  padding: 18px 5px 24px 0;
  flex: 1;
}

.evidence-entry {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 0 18px 18px;
  border: 0;
  color: inherit;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.evidence-entry::before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 7px;
  height: 7px;
  content: "";
  border: 1px solid #8d3e32;
  transform: rotate(45deg);
}

.evidence-entry h3 {
  margin: 0 0 5px;
  font-size: 13px;
  letter-spacing: .06em;
}

.evidence-entry p {
  margin: 0;
  color: #5e5a50;
  font-size: 11px;
  line-height: 1.75;
}

.evidence-entry > span {
  display: inline-block;
  margin-top: 7px;
  color: #8d3e32;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
}

.evidence-entry:hover h3,
.evidence-entry:focus-visible h3 {
  color: #8d3e32;
}

.evidence-entry:focus-visible {
  outline: 1px solid rgba(141, 62, 50, .55);
  outline-offset: 5px;
}

.empty-note {
  margin: 22px 0;
  color: #757166;
  font-size: 11px;
  line-height: 1.8;
}

.case-timeline {
  display: grid;
  margin: 5px 0;
  gap: 1px;
}

.case-step {
  display: grid;
  padding: 12px 12px;
  border-left: 2px solid rgba(47, 53, 46, .2);
  background: rgba(255, 255, 255, .12);
  grid-template-columns: 35px 1fr;
  gap: 8px;
}

.case-step.done {
  border-left-color: #8e3c30;
}

.case-step b {
  color: #8a4035;
  font-family: Arial, sans-serif;
  font-size: 10px;
}

.case-step strong {
  display: block;
  font-size: 11px;
  letter-spacing: .06em;
}

.case-step small {
  display: block;
  margin-top: 4px;
  color: #747065;
  font-size: 9px;
}

.marks-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.mark-slot {
  display: grid;
  aspect-ratio: 1;
  border: 1px dashed rgba(57, 62, 54, .32);
  color: rgba(67, 66, 59, .4);
  font-family: Arial, sans-serif;
  place-items: center;
}

.mark-slot.found {
  border: 2px solid #983f32;
  color: #913d32;
  font-weight: 700;
  transform: rotate(-3deg);
  box-shadow: inset 0 0 0 4px rgba(152, 63, 50, .08);
}

.notebook-foot {
  position: relative;
  z-index: 1;
  display: grid;
  padding-top: 14px;
  border-top: 1px solid rgba(38, 42, 36, .24);
  gap: 7px;
}

.hint-button {
  justify-self: start;
  padding: 9px 14px;
  border: 1px solid #714c43;
  color: #423c35;
  background: transparent;
  font-size: 10px;
  letter-spacing: .08em;
  cursor: pointer;
}

.hint-button:disabled {
  opacity: .45;
  cursor: default;
}

#hint-status {
  color: #777268;
  font-size: 9px;
}

.notebook-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, .72);
}

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  padding: clamp(12px, 3vw, 38px);
  visibility: hidden;
  background: rgba(2, 4, 3, .9);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, visibility 0s .18s;
  place-items: center;
}

.modal-root.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.modal {
  position: relative;
  width: min(920px, 96vw);
  max-height: min(800px, 94vh);
  overflow: auto;
  border: 1px solid rgba(205, 210, 198, .18);
  color: var(--paper);
  background:
    linear-gradient(145deg, rgba(23, 29, 26, .98), rgba(8, 11, 10, .99)),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .015) 3px 4px);
  box-shadow: 0 28px 90px #000;
  animation: modal-in .42s var(--ease) both;
}

.modal.narrow {
  width: min(610px, 94vw);
}

.modal.evidence-modal {
  width: min(1120px, 96vw);
}

.modal-head {
  display: flex;
  padding: 20px clamp(18px, 3vw, 34px) 16px;
  border-bottom: 1px solid rgba(207, 214, 201, .13);
  justify-content: space-between;
  align-items: start;
}

.modal-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--red-bright);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .24em;
}

.modal-head h2 {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: .08em;
}

.modal-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(214, 220, 207, .17);
  color: var(--paper-dim);
  background: transparent;
  font-family: Arial, sans-serif;
  font-size: 20px;
  cursor: pointer;
}

.modal-body {
  padding: clamp(20px, 3vw, 36px);
}

.route-lock-modal .modal-body {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.route-lock-object {
  position: relative;
  width: 104px;
  aspect-ratio: .72;
  border: 6px solid #292a25;
  border-radius: 6px;
  background:
    linear-gradient(115deg, transparent 0 46%, rgba(230, 211, 167, .08) 48%, transparent 50%),
    #111411;
  box-shadow:
    inset 0 0 0 1px rgba(224, 210, 172, .17),
    inset 0 0 30px #000,
    0 18px 28px rgba(0, 0, 0, .42);
}

.route-lock-object i {
  position: absolute;
  top: 25%;
  left: 50%;
  width: 24px;
  height: 38px;
  border: 2px solid #8c8068;
  border-radius: 50% 50% 42% 42%;
  box-shadow: 0 0 0 7px rgba(90, 82, 65, .18);
  transform: translateX(-50%);
}

.route-lock-object b {
  position: absolute;
  top: 42%;
  left: calc(50% - 3px);
  width: 6px;
  height: 26px;
  background: #030403;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 62%, 62% 100%, 0 100%);
}

.route-lock-object span {
  position: absolute;
  right: 12%;
  bottom: 13%;
  left: 12%;
  height: 1px;
  background: rgba(136, 58, 48, .7);
  box-shadow: 0 5px 0 rgba(136, 58, 48, .28);
}

.pump-puzzle-modal,
.stair-puzzle-modal {
  width: min(980px, 96vw);
}

.pump-puzzle-modal form,
.stair-puzzle-modal form {
  display: grid;
  gap: 14px;
}

.pump-bank,
.resonance-bank {
  padding: 16px;
  border: 1px solid rgba(211, 211, 191, .12);
  background:
    repeating-linear-gradient(90deg, transparent 0 37px, rgba(255, 255, 255, .012) 37px 38px),
    rgba(2, 5, 4, .36);
}

.pump-bank h3,
.resonance-bank h3 {
  margin: 0 0 12px;
  color: #9f9c89;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.choice-chips,
.pipe-tile-grid,
.step-selector,
.valve-order {
  display: grid;
  gap: 8px;
}

.choice-chips {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pipe-tile-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.step-selector {
  grid-template-columns: repeat(6, minmax(42px, 1fr));
}

.valve-order {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-chips label,
.pipe-tile-grid label,
.step-selector label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.choice-chips input,
.pipe-tile-grid input,
.step-selector input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-chips span,
.pipe-tile-grid span,
.step-selector span {
  display: grid;
  min-height: 46px;
  padding: 9px 11px;
  border: 1px solid rgba(217, 215, 196, .17);
  color: rgba(220, 217, 198, .72);
  background: rgba(9, 12, 10, .86);
  font-size: 10px;
  letter-spacing: .08em;
  transition: border-color .18s, color .18s, background .18s;
  place-items: center;
}

.choice-chips input:focus-visible + span,
.pipe-tile-grid input:focus-visible + span,
.step-selector input:focus-visible + span {
  outline: 2px solid #d6c58e;
  outline-offset: 2px;
}

.choice-chips input:checked + span,
.pipe-tile-grid input:checked + span,
.step-selector input:checked + span {
  border-color: rgba(173, 74, 60, .82);
  color: #e3decb;
  background:
    linear-gradient(135deg, rgba(127, 48, 40, .42), transparent 64%),
    #10130f;
  box-shadow: inset 0 -2px 0 rgba(174, 76, 61, .44);
}

.step-selector span {
  min-height: 52px;
  font-family: var(--mono);
  font-size: 15px;
}

.valve-order label {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.valve-order label > span {
  display: grid;
  width: 27px;
  aspect-ratio: 1;
  border: 1px solid rgba(214, 208, 181, .18);
  color: #a56c5f;
  font-family: var(--mono);
  place-items: center;
}

.valve-order select {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(215, 213, 193, .16);
  color: #ded9c6;
  background: #0a0d0b;
}

.resonance-strip {
  display: grid;
  height: 48px;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 5px;
  overflow: hidden;
  padding: 7px 11px;
  border: 1px solid rgba(210, 207, 183, .12);
  background: #050705;
}

.resonance-strip i,
.resonance-strip b {
  display: block;
  height: 9px;
  background: rgba(177, 170, 140, .26);
  box-shadow: 0 -7px 0 rgba(177, 170, 140, .08);
}

.resonance-strip b {
  height: 24px;
  background: rgba(157, 64, 53, .48);
  box-shadow:
    0 -11px 0 rgba(157, 64, 53, .2),
    16px 0 0 -5px rgba(211, 201, 170, .25);
}

.evidence-layout.has-visual {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(245px, .75fr);
  align-items: start;
  gap: clamp(18px, 3vw, 34px);
}

.evidence-visual {
  position: relative;
  min-width: 0;
  margin: 0;
  border: 1px solid rgba(213, 217, 201, .18);
  background: #030504;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}

.evidence-image-viewport {
  max-height: min(59vh, 620px);
  overflow: hidden;
  background: #030504;
  scrollbar-color: #725449 #121512;
}

.evidence-image-zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  color: #e2dcc7;
  background: #030504;
  cursor: zoom-in;
}

.evidence-image-zoom > span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 7px 9px;
  border: 1px solid rgba(221, 213, 190, .22);
  color: #ded7c3;
  background: rgba(5, 8, 6, .84);
  font-size: 8px;
  letter-spacing: .08em;
  pointer-events: none;
}

.evidence-visual-image img {
  display: block;
  width: 100%;
  max-height: min(59vh, 620px);
  object-fit: contain;
  background: #030504;
}

.evidence-visual-image.is-zoomed .evidence-image-viewport {
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
}

.evidence-visual-image.is-zoomed .evidence-image-zoom {
  width: max(1100px, 130vw);
  min-width: 0;
  cursor: zoom-out;
}

.evidence-visual-image.is-zoomed img {
  width: 100%;
  max-width: none;
  max-height: none;
}

.evidence-crop {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #030504;
}

.evidence-crop > img {
  position: absolute;
  max-width: none;
  height: auto;
  filter: none;
  transform: none;
}

.artifact-canvas {
  position: relative;
  display: grid;
  min-height: clamp(330px, 43vw, 560px);
  overflow: hidden;
  padding: clamp(24px, 4vw, 48px);
  color: #ded8c5;
  background:
    radial-gradient(circle at 17% 14%, rgba(129, 92, 61, .13), transparent 29%),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(255, 255, 255, .015) 4px 5px),
    #0a0d0b;
  isolation: isolate;
  place-items: center;
}

.artifact-canvas::after {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(225, 214, 187, .11);
  content: "";
  pointer-events: none;
}

.artifact-paper {
  position: relative;
  width: min(92%, 620px);
  padding: clamp(22px, 3vw, 38px);
  color: #302e27;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(122, 53, 43, .1) 8% 8.3%, transparent 8.3%),
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(73, 76, 63, .09) 30px),
    #d1cbb4;
  box-shadow: 14px 18px 40px rgba(0, 0, 0, .46);
  transform: rotate(-.45deg);
}

.artifact-paper::after {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(76, 69, 57, .12);
  content: "";
  pointer-events: none;
}

.artifact-document-head {
  display: grid;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(47, 45, 38, .6);
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2px 16px;
}

.artifact-document-head span {
  color: #7b3930;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
}

.artifact-document-head b {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: clamp(17px, 2vw, 24px);
  letter-spacing: .1em;
}

.artifact-document-head small {
  color: #777267;
  font: 9px/1.2 Consolas, monospace;
}

.artifact-directory-grid {
  display: grid;
  border-top: 1px solid rgba(45, 44, 38, .35);
}

.artifact-directory-row {
  display: grid;
  min-height: 33px;
  border-bottom: 1px solid rgba(45, 44, 38, .23);
  grid-template-columns: 42px 1fr 56px;
  align-items: center;
}

.artifact-directory-row > span {
  color: #777166;
  font: 9px/1 Consolas, monospace;
}

.artifact-directory-row strong {
  font-size: 11px;
  letter-spacing: .08em;
}

.artifact-directory-row i {
  display: grid;
  width: 28px;
  aspect-ratio: 1;
  border: 1px solid rgba(104, 50, 42, .55);
  border-radius: 50%;
  color: #813d33;
  font: normal 17px/1 Arial, sans-serif;
  transform: rotate(-5deg);
  place-items: center;
}

.artifact-directory-row.is-scratched {
  position: relative;
  color: rgba(44, 42, 36, .42);
}

.artifact-directory-row.is-scratched::after {
  position: absolute;
  right: 30px;
  left: 26px;
  height: 13px;
  content: "";
  background: repeating-linear-gradient(-7deg, transparent 0 2px, rgba(40, 36, 32, .7) 2px 3px);
  transform: rotate(-1deg);
}

.artifact-pencil-note {
  margin-top: 14px;
  color: #7e3a32;
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  transform: rotate(-1deg);
}

.artifact-seal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}

.artifact-seal-row {
  display: grid;
  min-height: 44px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(52, 49, 42, .2);
  grid-template-columns: 24px 34px 1fr;
  align-items: center;
  gap: 6px;
}

.artifact-seal-row > span {
  color: #797368;
  font: 8px/1 Consolas, monospace;
}

.artifact-seal-row strong {
  font-size: 10px;
}

.artifact-seal-row small {
  display: block;
  margin-top: 2px;
  color: #756f64;
  font-size: 9px;
  font-weight: 400;
}

.artifact-wax {
  display: block;
  width: 27px;
  aspect-ratio: 1;
  border: 3px double rgba(34, 30, 26, .33);
  border-radius: 44% 51% 45% 48%;
  background: #6a5044;
  box-shadow: inset 2px 2px 4px rgba(255, 255, 255, .17), 1px 2px 4px rgba(0, 0, 0, .3);
  transform: rotate(-8deg);
}

.artifact-color-blue { background: #476675; }
.artifact-color-red { background: #8a3f35; }
.artifact-color-white { background: #b9b4a2; }
.artifact-color-green { background: #4f6754; }
.artifact-color-yellow { background: #a98b4b; }
.artifact-color-black { background: #2e302d; }

.artifact-seal-row.is-seventh {
  color: #79372f;
}

.artifact-wax.is-broken {
  background:
    linear-gradient(48deg, transparent 42%, #c5bba3 43% 54%, transparent 55%),
    #7d4037;
  clip-path: polygon(0 0, 48% 4%, 44% 40%, 100% 31%, 100% 100%, 0 100%);
}

.artifact-board,
.artifact-wall {
  position: relative;
  width: min(92%, 650px);
  min-height: 360px;
  overflow: hidden;
  border: 12px solid #29231c;
  background:
    linear-gradient(83deg, transparent 0 18%, rgba(33, 24, 18, .22) 18.5% 19%, transparent 19.5% 53%, rgba(33, 24, 18, .24) 53.5% 54%, transparent 54.5%),
    repeating-linear-gradient(2deg, #7b6a51 0 13px, #716049 14px 16px, #816f54 17px 28px);
  box-shadow: inset 0 0 48px rgba(29, 21, 15, .55), 15px 18px 45px rgba(0, 0, 0, .5);
}

.artifact-height-lines span {
  position: absolute;
  top: calc(44px + var(--height-index) * 42px);
  left: 9%;
  width: calc(34% + var(--height-index) * 4%);
  border-top: 2px solid rgba(47, 39, 31, .67);
  transform: rotate(calc(-.8deg + var(--height-index) * .24deg));
}

.artifact-height-lines b {
  position: absolute;
  top: -16px;
  right: 2px;
  color: rgba(47, 38, 29, .78);
  font: 9px/1 Consolas, monospace;
}

.artifact-shoe-print {
  position: absolute;
  right: 11%;
  bottom: 38px;
  width: 84px;
  height: 162px;
  border-radius: 55% 46% 38% 49%;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(34, 28, 23, .68) 0 31%, transparent 34%),
    repeating-linear-gradient(25deg, rgba(35, 29, 24, .64) 0 5px, transparent 6px 12px);
  opacity: .74;
  transform: rotate(17deg) scale(.82);
  clip-path: polygon(25% 0, 77% 5%, 100% 42%, 79% 100%, 24% 93%, 0 45%);
}

.artifact-plate-holes {
  position: absolute;
  top: 42%;
  left: 53%;
  display: flex;
  width: 112px;
  align-items: center;
  gap: 28px;
}

.artifact-plate-holes i:first-child,
.artifact-pulley-scars i:first-child {
  width: 18px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #352b23;
  box-shadow: 0 0 0 5px rgba(76, 51, 36, .3);
}

.artifact-plate-holes i:last-child,
.artifact-pulley-scars i:last-child {
  width: 47px;
  height: 15px;
  border-radius: 9px;
  background: #352b23;
  box-shadow: 0 0 0 5px rgba(76, 51, 36, .3);
}

.artifact-shoe-board > p {
  position: absolute;
  right: 12%;
  top: 38px;
  margin: 0;
  color: rgba(49, 39, 30, .83);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  transform: rotate(-2deg);
}

.artifact-shoe-board > p small {
  font-weight: 400;
}

.artifact-cloth {
  display: grid;
  width: min(92%, 650px);
  min-height: 360px;
  border: 1px solid rgba(191, 183, 159, .18);
  background:
    linear-gradient(104deg, transparent 0 47%, rgba(255, 255, 255, .04) 47.4% 48%, transparent 48.4%),
    repeating-linear-gradient(23deg, #22231f 0 2px, #1a1c19 3px 5px);
  box-shadow: inset 0 0 70px #050605;
  place-items: center;
}

.artifact-brass-plate {
  position: relative;
  width: 62%;
  aspect-ratio: 2.25;
  border: 4px double #8b7043;
  background:
    radial-gradient(circle at 14% 22%, rgba(221, 187, 113, .23), transparent 25%),
    repeating-linear-gradient(88deg, transparent 0 18px, rgba(49, 34, 19, .09) 19px 20px),
    #866f48;
  box-shadow: inset 0 0 28px rgba(42, 27, 15, .72), 8px 12px 30px #000;
  transform: rotate(-3deg);
}

.artifact-brass-plate > i {
  position: absolute;
  top: 50%;
  background: #1e1b16;
  box-shadow: inset 0 2px 5px #000, 0 0 0 3px rgba(206, 174, 103, .16);
  transform: translateY(-50%);
}

.artifact-brass-plate .is-round {
  left: 22%;
  width: 13%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.artifact-brass-plate .is-slot {
  right: 18%;
  width: 28%;
  height: 18%;
  border-radius: 10px;
}

.artifact-abrasion {
  position: absolute;
  inset: 22% 9%;
  background: repeating-linear-gradient(-4deg, transparent 0 9px, rgba(35, 25, 15, .24) 10px 11px);
}

.artifact-scale {
  position: absolute;
  right: 7%;
  bottom: 8%;
  display: flex;
  color: #9c998e;
  font: 8px/1 Consolas, monospace;
  align-items: end;
  gap: 6px;
}

.artifact-scale i {
  width: 72px;
  height: 7px;
  border: solid #b2ada0;
  border-width: 0 1px 1px;
}

.artifact-meter-panel {
  width: min(95%, 680px);
  padding: 24px;
  border: 10px solid #30352f;
  color: #c8c7b8;
  background: #141815;
  box-shadow: inset 0 0 50px #050605, 12px 16px 35px rgba(0, 0, 0, .5);
}

.artifact-meter-heading {
  display: flex;
  margin-bottom: 16px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(214, 218, 205, .2);
  justify-content: space-between;
}

.artifact-meter-heading span {
  color: #888e84;
  font-size: 9px;
  letter-spacing: .14em;
}

.artifact-meter-heading b {
  font: 9px/1 Consolas, monospace;
}

.artifact-meter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.artifact-meter-card {
  position: relative;
  min-height: 122px;
  padding: 10px;
  border: 1px solid rgba(211, 216, 203, .14);
  background: linear-gradient(#262d28, #141815);
}

.artifact-meter-card.is-k42 {
  border-color: rgba(181, 82, 65, .75);
  box-shadow: inset 0 0 22px rgba(138, 56, 46, .2);
}

.artifact-meter-dial {
  position: relative;
  display: grid;
  width: 54px;
  aspect-ratio: 1;
  margin: 0 auto 8px;
  border: 4px double #757c73;
  border-radius: 50%;
  color: #a7aaa0;
  place-items: center;
}

.artifact-meter-dial i {
  position: absolute;
  bottom: 50%;
  left: calc(50% - 1px);
  width: 2px;
  height: 35%;
  background: #9c604f;
  transform: rotate(58deg);
  transform-origin: bottom;
}

.artifact-meter-dial span {
  margin-top: 22px;
  font: 12px/1 Arial, sans-serif;
}

.artifact-meter-card > strong {
  display: block;
  font: 700 12px/1 Consolas, monospace;
}

.artifact-meter-card > small {
  color: #868c82;
  font: 9px/1.2 Consolas, monospace;
}

.artifact-meter-card > .artifact-wax {
  position: absolute;
  right: 8px;
  bottom: 9px;
  width: 23px;
}

.artifact-meter-panel > p {
  margin: 13px 0 0;
  color: #aa9a83;
  font-size: 9px;
  letter-spacing: .05em;
}

.artifact-trace {
  width: min(96%, 700px);
  padding: 22px;
  color: #283128;
  background:
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(50, 89, 61, .1) 22px),
    repeating-linear-gradient(90deg, transparent 0 21px, rgba(50, 89, 61, .1) 22px),
    #c7c2a7;
  box-shadow: 12px 15px 38px #000;
  transform: rotate(.35deg);
}

.artifact-trace-head {
  display: flex;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(36, 48, 38, .45);
  font: 10px/1 Consolas, monospace;
  justify-content: space-between;
}

.artifact-trace svg {
  display: block;
  width: 100%;
  margin-top: 6px;
}

.trace-grid {
  fill: none;
  stroke: rgba(48, 78, 55, .19);
  stroke-width: 1;
}

.trace-line {
  fill: none;
  stroke: #713c33;
  stroke-width: 4;
}

.trace-mark {
  fill: none;
  stroke: rgba(114, 55, 45, .48);
  stroke-dasharray: 7 6;
  stroke-width: 2;
}

.artifact-trace circle {
  fill: #8c4035;
}

.artifact-trace text {
  fill: #6e352e;
  font: 700 18px Consolas, monospace;
}

.artifact-lightbox {
  position: relative;
  width: min(92%, 660px);
  min-height: 390px;
  overflow: hidden;
  border: 12px solid #252a26;
  background:
    repeating-linear-gradient(0deg, rgba(61, 91, 82, .1) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(61, 91, 82, .1) 0 1px, transparent 1px 28px),
    #d2d4bf;
  box-shadow: inset 0 0 60px rgba(98, 125, 114, .42), 14px 17px 40px #000;
}

.artifact-proof-sheet {
  position: absolute;
  top: 15%;
  left: 20%;
  width: 58%;
  height: 64%;
  border: 1px solid currentColor;
  opacity: .54;
  transform-origin: center;
  clip-path: polygon(0 0, 91% 0, 100% 11%, 100% 100%, 0 100%);
}

.artifact-proof-sheet::before {
  position: absolute;
  content: "";
  border: 2px solid currentColor;
}

.artifact-proof-sheet::before {
  inset: 20% 16%;
}

.artifact-proof-sheet span {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 11px;
  font-weight: 700;
}

.artifact-proof-sheet i {
  position: absolute;
  top: 50%;
  left: 15%;
  width: 70%;
  border-top: 5px solid currentColor;
}

.artifact-proof-sheet b {
  position: absolute;
  top: 15%;
  left: 48%;
  height: 70%;
  border-left: 5px solid currentColor;
}

.artifact-proof-sheet.is-cyan {
  color: #367f82;
  clip-path: polygon(0 0, 91% 0, 100% 11%, 100% 100%, 0 100%);
  transform: translate(-18px, -12px) rotate(-4deg);
}

.artifact-proof-sheet.is-vermilion {
  color: #99483d;
  clip-path: polygon(8% 0, 100% 0, 100% 91%, 92% 100%, 0 100%, 0 9%);
  transform: translate(18px, 4px) rotate(4deg);
}

.artifact-proof-sheet.is-ochre {
  color: #9a7b39;
  clip-path: polygon(0 8%, 8% 0, 100% 0, 100% 100%, 9% 100%, 0 91%);
  transform: translate(1px, 18px) scaleX(-1);
}

.proof-clue {
  position: absolute;
  display: block;
  color: inherit;
  font-style: normal;
}

.proof-clue.is-crescent {
  top: -1px;
  right: -1px;
  width: 44px;
  aspect-ratio: 1;
  overflow: hidden;
}

.proof-clue.is-crescent::before,
.proof-clue.is-crescent::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.proof-clue.is-crescent::before {
  inset: -7px -5px 5px 7px;
  background: #d2d4bf;
}

.proof-clue.is-crescent::after {
  inset: -8px 8px 8px -5px;
  border: 2px solid currentColor;
}

.proof-clue.is-pinholes {
  top: 8%;
  left: 9%;
  width: 62px;
  height: 25px;
}

.proof-clue.is-pinholes u {
  position: absolute;
  width: 10px;
  aspect-ratio: 1;
  border: 2px solid currentColor;
  border-radius: 50%;
  text-decoration: none;
}

.proof-clue.is-pinholes u:first-child {
  top: 0;
  left: 0;
}

.proof-clue.is-pinholes u:last-child {
  right: 0;
  bottom: 0;
}

.proof-clue.is-thumbprint {
  right: 9%;
  bottom: 8%;
  width: 38px;
  height: 58px;
  border: 2px solid currentColor;
  border-radius: 48% 48% 42% 42%;
  background: repeating-radial-gradient(ellipse at 50% 43%, transparent 0 4px, currentColor 5px 6px);
  opacity: .66;
  transform: rotate(174deg);
}

.artifact-register-cross {
  position: absolute;
  top: 48%;
  left: 48%;
  width: 36px;
  aspect-ratio: 1;
  border: 1px solid rgba(43, 53, 46, .58);
  border-radius: 50%;
}

.artifact-register-cross::before,
.artifact-register-cross::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  background: rgba(43, 53, 46, .58);
  transform: translate(-50%, -50%);
}

.artifact-register-cross::before { width: 52px; height: 1px; }
.artifact-register-cross::after { width: 1px; height: 52px; }

.artifact-lightbox p {
  position: absolute;
  right: 16px;
  bottom: 10px;
  left: 16px;
  margin: 0;
  color: #444d44;
  font-size: 9px;
  text-align: center;
}

.artifact-press-note {
  min-height: 350px;
}

.artifact-ink-stack {
  display: flex;
  height: 96px;
  margin: 0 0 32px;
  flex-direction: column;
}

.artifact-ink-stack i {
  display: block;
  height: 32px;
  opacity: .74;
  clip-path: polygon(2% 29%, 18% 10%, 35% 24%, 57% 3%, 78% 22%, 98% 8%, 96% 83%, 76% 68%, 53% 94%, 29% 72%, 4% 91%);
}

.artifact-ink-stack .is-cyan { background: #337b7d; }
.artifact-ink-stack .is-vermilion { background: #98443a; }
.artifact-ink-stack .is-ochre { background: #9b7b38; }

.artifact-press-note > p {
  margin: 0 12%;
  color: #75382f;
  font-size: clamp(22px, 3.5vw, 42px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .16em;
  transform: rotate(-2deg);
}

.artifact-press-note > small {
  position: absolute;
  right: 26px;
  bottom: 23px;
  color: #6e685d;
  font-size: 9px;
}

.artifact-clock-case {
  display: grid;
  width: min(92%, 610px);
  min-height: 400px;
  border: 18px solid #403629;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .03), transparent 44%, rgba(255, 255, 255, .025)),
    #211f19;
  box-shadow: inset 0 0 55px #090a08, 14px 18px 40px #000;
  place-items: center;
}

.artifact-clock-face {
  position: relative;
  width: min(67%, 330px);
  aspect-ratio: 1;
  border: 12px solid #655943;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from -1deg, #282821 0 2deg, transparent 2deg 30deg),
    radial-gradient(circle, #bcb59c 0 58%, #837b67 59% 61%, #bab39a 62%);
  box-shadow: inset 0 0 30px rgba(52, 47, 38, .75), 0 9px 30px #000;
}

.artifact-clock-hour,
.artifact-clock-minute {
  position: absolute;
  bottom: 50%;
  left: calc(50% - 2px);
  width: 4px;
  background: #302e27;
  transform-origin: bottom;
}

.artifact-clock-hour {
  height: 25%;
  transform: rotate(353.5deg);
}

.artifact-clock-minute {
  height: 36%;
  transform: rotate(282deg);
}

.artifact-clock-face > i {
  position: absolute;
  top: calc(50% - 7px);
  left: calc(50% - 7px);
  width: 14px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #6f352f;
}

.artifact-clock-face > b {
  position: absolute;
  bottom: 18%;
  left: 50%;
  padding: 4px 7px;
  color: #d1cbb6;
  background: #31342e;
  font: 11px/1 Consolas, monospace;
  transform: translateX(-50%);
}

.artifact-clock-face > em {
  position: absolute;
  top: 24%;
  right: 9%;
  color: rgba(119, 55, 46, .66);
  font: normal 700 15px/1 Consolas, monospace;
  transform: scaleX(-1) rotate(-4deg);
}

.artifact-clock-case > p {
  position: absolute;
  bottom: 9%;
  margin: 0;
  color: #958e7e;
  font-size: 9px;
  letter-spacing: .08em;
}

.artifact-plan {
  width: min(96%, 680px);
  padding: 20px;
  color: #303a32;
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(48, 72, 55, .08) 23px),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(48, 72, 55, .08) 23px),
    #c9c8ac;
  box-shadow: 12px 16px 38px #000;
}

.artifact-plan svg {
  display: block;
  width: 100%;
}

.artifact-plan g {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 8;
}

.artifact-plan .plan-cyan { stroke: rgba(43, 117, 119, .75); }
.artifact-plan .plan-red { stroke: rgba(145, 58, 49, .73); }
.artifact-plan .plan-ochre { stroke: rgba(139, 105, 45, .74); }
.artifact-plan .plan-blank { fill: rgba(201, 200, 172, .94); stroke-dasharray: 9 8; }

.artifact-plan > span {
  display: block;
  padding: 8px 12px;
  border-top: 1px solid rgba(39, 50, 42, .25);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.artifact-conduits {
  border-color: #37352e;
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(30, 28, 24, .7) 50%, transparent 50.5%),
    repeating-linear-gradient(0deg, #8b8777 0 22px, #827e6f 23px 24px);
}

.artifact-conduits > i {
  position: absolute;
  top: calc(40px + var(--pipe-index) * 42px);
  left: 0;
  width: 100%;
  height: 9px;
  background: linear-gradient(#5d5d54, #262a26 55%, #6e6a5d);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .35);
}

.artifact-conduits > b {
  position: absolute;
  top: 292px;
  left: 0;
  width: 52%;
  height: 9px;
  background: linear-gradient(#5d5d54, #262a26 55%, #6e6a5d);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .35);
}

.artifact-conduits > b::after {
  position: absolute;
  top: 0;
  right: -9px;
  width: 9px;
  height: 78px;
  content: "";
  background: inherit;
  border-radius: 0 9px 0 0;
}

.artifact-conduits > span {
  position: absolute;
  right: 8%;
  bottom: 7%;
  padding: 7px 10px;
  color: #bfb7a3;
  background: rgba(28, 30, 27, .82);
  font-size: 9px;
}

.artifact-pulley {
  border-color: #444039;
  background:
    radial-gradient(circle at 48% 47%, rgba(80, 72, 59, .22), transparent 25%),
    repeating-linear-gradient(0deg, #918c7b 0 23px, #888372 24px 25px);
}

.artifact-pulley-wheel {
  position: absolute;
  top: 48px;
  left: 18%;
  width: 150px;
  aspect-ratio: 1;
  border: 16px double #4a4438;
  border-radius: 50%;
  background: radial-gradient(circle, #262722 0 16%, #706a57 17% 44%, #292a25 45%);
  box-shadow: 5px 8px 18px rgba(0, 0, 0, .45);
}

.artifact-pulley-wheel i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 116%;
  border-top: 5px solid #3d3a32;
  transform: translate(-50%, -50%) rotate(32deg);
}

.artifact-pulley-rope {
  position: absolute;
  top: 176px;
  left: calc(18% + 73px);
  width: 7px;
  height: 170px;
  background: repeating-linear-gradient(20deg, #8d7b5b 0 5px, #5f513d 6px 9px);
}

.artifact-pulley-scars {
  position: absolute;
  top: 48%;
  right: 13%;
  display: flex;
  align-items: center;
  gap: 30px;
}

.artifact-pulley > p {
  position: absolute;
  right: 13%;
  bottom: 13%;
  margin: 0;
  color: rgba(89, 45, 38, .8);
  font: 700 25px/1.35 Consolas, monospace;
  transform: rotate(-4deg);
}

.artifact-pulley > p small {
  font-size: 12px;
  letter-spacing: .3em;
}

.artifact-rubbing {
  position: relative;
  display: grid;
  width: min(90%, 640px);
  min-height: 350px;
  overflow: hidden;
  color: rgba(35, 34, 30, .79);
  background:
    radial-gradient(ellipse at 54% 45%, rgba(32, 31, 27, .25), transparent 52%),
    repeating-linear-gradient(12deg, transparent 0 5px, rgba(36, 34, 29, .055) 6px 7px),
    #c8c2a9;
  box-shadow: 10px 15px 38px #000;
  place-items: center;
}

.artifact-rubbing::before {
  position: absolute;
  inset: 8%;
  border: 2px dashed rgba(43, 40, 34, .3);
  content: "";
}

.artifact-rubbing > span {
  position: relative;
  z-index: 1;
  font-size: clamp(46px, 8vw, 92px);
  font-weight: 800;
  letter-spacing: .12em;
  text-shadow: 2px 1px 0 rgba(40, 37, 31, .2), -1px 2px 0 rgba(40, 37, 31, .16);
}

.artifact-rubbing.is-reverse > span {
  transform: scaleX(-1);
}

.artifact-rubbing > p {
  position: absolute;
  right: 8%;
  bottom: 6%;
  margin: 0;
  color: #6f342e;
  font-size: 10px;
  font-weight: 700;
}

.artifact-object-sheet {
  width: min(96%, 700px);
  padding: clamp(18px, 3vw, 30px);
  color: #d1cbb7;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(213, 215, 201, .035) 28px),
    #171b18;
  border: 8px solid #343832;
  box-shadow: inset 0 0 45px rgba(0, 0, 0, .52), 12px 16px 40px #000;
}

.artifact-object-head {
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(214, 216, 203, .19);
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.artifact-object-head span {
  color: #b06050;
  font: 700 9px/1 Consolas, monospace;
  letter-spacing: .13em;
}

.artifact-object-head b {
  font-size: clamp(14px, 2vw, 20px);
  letter-spacing: .08em;
}

.artifact-object-views {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.artifact-object-views > section {
  position: relative;
  display: grid;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid rgba(216, 218, 204, .14);
  background:
    radial-gradient(circle at 50% 43%, rgba(130, 120, 99, .13), transparent 44%),
    #0d100e;
  place-items: center;
}

.artifact-object-views > section > strong {
  position: absolute;
  top: 10px;
  left: 11px;
  z-index: 2;
  color: #a9a797;
  font-size: 9px;
  letter-spacing: .08em;
}

.artifact-object-views > section > i {
  position: absolute;
  right: 10px;
  bottom: 9px;
  z-index: 2;
  padding: 5px 7px;
  color: #d3c7ad;
  background: rgba(84, 44, 37, .82);
  font-size: 8px;
  font-style: normal;
}

.artifact-object-fan svg {
  width: 86%;
  margin-top: 16px;
}

.artifact-object-fan .object-metal,
.artifact-object-fan .object-spokes,
.artifact-object-fan .object-stand {
  fill: none;
  stroke: #77786f;
  stroke-linecap: round;
  stroke-width: 6;
}

.artifact-object-fan .object-metal {
  stroke-width: 4;
}

.artifact-object-fan .object-hub {
  fill: #373a35;
  stroke: #848177;
  stroke-width: 3;
}

.artifact-object-fan .object-missing {
  fill: none;
  stroke: #b55b4c;
  stroke-dasharray: 5 5;
  stroke-width: 9;
}

.artifact-object-fan .object-blue-ink {
  fill: rgba(61, 116, 132, .3);
  stroke: #477a88;
  stroke-dasharray: 3 5;
  stroke-width: 5;
}

.object-fridge {
  position: relative;
  width: 50%;
  height: 218px;
  border: 7px solid #6b6e66;
  border-radius: 7px;
  background:
    linear-gradient(0deg, transparent 0 65%, rgba(42, 44, 40, .8) 65.5% 67%, transparent 67.5%),
    linear-gradient(105deg, #9c9b8b, #5b5f58);
  box-shadow: inset 0 0 25px rgba(25, 26, 23, .65), 6px 9px 18px #000;
}

.object-fridge-handle {
  position: absolute;
  top: 26px;
  right: 14px;
  width: 8px;
  height: 52px;
  border: 3px solid #383a36;
  border-radius: 5px;
}

.object-fridge-dent {
  position: absolute;
  bottom: 8px;
  left: 4px;
  width: 46px;
  height: 38px;
  border-radius: 50% 48% 31% 42%;
  background: radial-gradient(ellipse at 65% 35%, #353833, #77776b 55%, transparent 58%);
  transform: rotate(-13deg);
}

.object-fridge > span {
  position: absolute;
  bottom: 14px;
  left: -25px;
  padding: 4px 6px;
  color: #e0c9aa;
  background: #7b3f36;
  font-size: 8px;
}

.object-fridge.is-back {
  background:
    radial-gradient(circle, rgba(47, 94, 92, .46) 0 2px, transparent 3px) 0 0 / 11px 11px,
    linear-gradient(105deg, #77796f, #444842);
}

.object-fridge-coil {
  position: absolute;
  inset: 18px 15px 62px;
  border: 7px double #343631;
  background: repeating-linear-gradient(0deg, transparent 0 13px, #32342f 14px 18px);
}

.object-fridge.is-back > p {
  position: absolute;
  right: -34px;
  bottom: 10px;
  margin: 0;
  padding: 7px 9px;
  color: #3d392f;
  background: #c7bea4;
  box-shadow: 2px 3px 7px #000;
  font: 700 9px/1.5 Consolas, monospace;
  transform: rotate(-3deg);
}

.object-tv {
  position: relative;
  width: 76%;
  aspect-ratio: 1.35;
  border: 18px solid #59452f;
  background: #272923;
  box-shadow: inset 0 0 25px #050605, 7px 9px 20px #000;
}

.object-tv-screen {
  position: absolute;
  inset: 10px 30px 10px 9px;
  border: 9px solid #111411;
  border-radius: 32% / 12%;
  background:
    repeating-linear-gradient(0deg, rgba(200, 209, 193, .04) 0 2px, transparent 2px 4px),
    radial-gradient(circle at 50% 43%, #4e5750, #151916 67%);
}

.object-tv-break {
  position: absolute;
  top: 7px;
  right: 53px;
  width: 42px;
  border-top: 12px solid #9a5748;
  transform: rotate(-8deg);
}

.object-tv.is-front > b {
  position: absolute;
  top: -25px;
  right: -25px;
  padding: 4px 6px;
  color: #e2ccb0;
  background: #7b4037;
  font-size: 8px;
  transform: rotate(8deg);
}

.object-tv.is-back {
  background:
    repeating-radial-gradient(circle at 45% 40%, transparent 0 6px, rgba(118, 119, 107, .24) 7px 8px),
    #343832;
}

.object-tv.is-back > i {
  position: absolute;
  inset: 22px 30px;
  border: 5px double #5c5f57;
}

.object-tv.is-back > p {
  position: absolute;
  right: 8px;
  bottom: 8px;
  margin: 0;
  padding: 8px 10px;
  color: #35322a;
  background: #c9c1a7;
  font: 9px/1.55 Consolas, monospace;
  transform: rotate(-2deg);
}

.object-tv.is-back > p b {
  color: #74372f;
}

.object-tv.is-back > p span {
  color: #893b32;
  font-size: 14px;
  font-weight: 700;
}

.object-sewing-machine {
  position: relative;
  width: 80%;
  height: 205px;
  border-bottom: 18px solid #5a4935;
}

.object-sewing-arm {
  position: absolute;
  top: 43px;
  left: 17%;
  width: 61%;
  height: 79px;
  border: 20px solid #494c45;
  border-bottom: 0;
  border-radius: 46px 13px 0 0;
}

.object-sewing-arm::after {
  position: absolute;
  top: 47px;
  left: 19px;
  width: 7px;
  height: 85px;
  content: "";
  background: #73756b;
}

.object-sewing-wheel {
  position: absolute;
  top: 36px;
  right: 1%;
  width: 80px;
  aspect-ratio: 1;
  border: 9px double #73766d;
  border-radius: 50%;
  box-shadow: inset 0 0 0 10px #20231f;
}

.object-sewing-wheel::after {
  position: absolute;
  top: 23%;
  left: 27%;
  width: 49%;
  height: 37%;
  border: 5px solid #8b8a7c;
  border-radius: 55% 42% 58% 39%;
  content: "";
  transform: rotate(21deg);
}

.object-sewing-machine > b {
  position: absolute;
  right: 25%;
  bottom: 15px;
  left: 10%;
  height: 10px;
  background: #707168;
}

.object-sewing-machine.is-back::after {
  position: absolute;
  inset: 38px 14% 28px 22%;
  content: "";
  background: repeating-linear-gradient(16deg, transparent 0 8px, rgba(151, 65, 52, .58) 9px 12px);
  opacity: .7;
}

.object-sewing-machine.is-back > p {
  position: absolute;
  right: 4%;
  bottom: -6px;
  z-index: 2;
  margin: 0;
  padding: 7px 13px;
  color: #453c30;
  background: #c6b99c;
  box-shadow: 3px 4px 8px #000;
  font-size: 12px;
  font-weight: 700;
  transform: rotate(2deg);
}

.artifact-timeline {
  position: relative;
  display: grid;
  width: min(94%, 680px);
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.artifact-timeline::before {
  position: absolute;
  top: 50%;
  right: 4%;
  left: 4%;
  border-top: 2px solid rgba(157, 113, 76, .48);
  content: "";
}

.artifact-timeline > div {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 250px;
  padding: 22px 13px;
  border: 1px solid rgba(65, 59, 49, .28);
  color: #34322b;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(69, 68, 57, .09) 24px),
    #cbc5ad;
  box-shadow: 6px 9px 18px rgba(0, 0, 0, .4);
  transform: rotate(var(--slip-rotation, -1deg));
  flex-direction: column;
  justify-content: space-between;
}

.artifact-timeline > div:nth-child(even) {
  --slip-rotation: 1.3deg;
  margin-top: 14px;
}

.artifact-timeline strong {
  color: #71372f;
  font: 700 clamp(18px, 3vw, 31px)/1 Consolas, monospace;
}

.artifact-timeline span {
  font-size: 9px;
  line-height: 1.6;
}

.artifact-identity {
  display: flex;
  padding: 16%;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 28px;
}

.artifact-identity > span {
  font-size: clamp(20px, 4vw, 45px);
  text-align: left;
  letter-spacing: .13em;
}

.artifact-identity .is-signature {
  color: rgba(111, 52, 44, .78);
  text-align: right;
  transform: rotate(-4deg);
}

.artifact-identity > i {
  position: absolute;
  top: 24%;
  right: 9%;
  left: 7%;
  height: 40%;
  background: repeating-linear-gradient(-7deg, transparent 0 5px, rgba(39, 36, 30, .68) 6px 8px);
  opacity: .58;
  transform: rotate(-2deg);
}

.artifact-threshold {
  width: min(96%, 680px);
  padding: 18px;
  color: #c7c1ae;
  background:
    linear-gradient(90deg, transparent 66%, rgba(24, 24, 21, .8) 66.4% 67%, transparent 67.4%),
    repeating-linear-gradient(0deg, #858174 0 22px, #7d796c 23px 24px);
  box-shadow: inset 0 0 65px rgba(25, 24, 21, .5), 12px 15px 36px #000;
}

.artifact-threshold svg {
  display: block;
  width: 100%;
}

.artifact-threshold svg path,
.artifact-threshold svg circle,
.artifact-threshold svg rect {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.artifact-threshold .threshold-pipe { stroke: #4d6966; stroke-width: 10; }
.artifact-threshold .threshold-photo { stroke: #925043; stroke-width: 7; stroke-dasharray: 12 8; }
.artifact-threshold .threshold-stencil { stroke: #a48245; stroke-width: 6; }
.artifact-threshold .threshold-seam { stroke: #34342f; stroke-width: 5; }
.artifact-threshold svg circle,
.artifact-threshold svg rect { fill: #302e29; stroke: #b29d78; stroke-width: 5; }

.artifact-threshold > span {
  display: block;
  padding: 8px;
  color: #dad3bd;
  background: rgba(24, 26, 23, .72);
  font-size: 9px;
  text-align: center;
  letter-spacing: .06em;
}

.evidence-reticle {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(222, 211, 185, .18);
  pointer-events: none;
}

.evidence-reticle::before,
.evidence-reticle::after {
  position: absolute;
  width: 14px;
  height: 14px;
  content: "";
}

.evidence-reticle::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid rgba(206, 143, 98, .78);
  border-left: 1px solid rgba(206, 143, 98, .78);
}

.evidence-reticle::after {
  right: -1px;
  bottom: -1px;
  border-right: 1px solid rgba(206, 143, 98, .78);
  border-bottom: 1px solid rgba(206, 143, 98, .78);
}

.evidence-visual figcaption {
  padding: 9px 12px 10px;
  border-top: 1px solid rgba(213, 217, 201, .12);
  color: rgba(213, 211, 194, .68);
  font-size: 8px;
  line-height: 1.55;
  letter-spacing: .1em;
}

.evidence-layout.has-visual .raw-document {
  align-self: stretch;
}

.modal-lead {
  max-width: 700px;
  margin: 0 0 24px;
  color: #b7b6a8;
  font-size: 12px;
  line-height: 1.85;
  letter-spacing: .04em;
}

.modal-actions {
  display: flex;
  padding: 0 clamp(20px, 3vw, 36px) clamp(20px, 3vw, 32px);
  justify-content: flex-end;
  gap: 10px;
}

.modal-button {
  padding: 10px 16px;
  border: 1px solid rgba(218, 223, 209, .2);
  color: var(--paper);
  background: rgba(255, 255, 255, .03);
  font-size: 10px;
  letter-spacing: .12em;
  cursor: pointer;
}

.modal-button:hover {
  border-color: var(--amber);
}

.modal-button.primary {
  border-color: rgba(172, 76, 60, .8);
  background: rgba(137, 49, 37, .18);
}

.intro-form {
  position: relative;
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid rgba(105, 109, 97, .35);
  color: #282720;
  background:
    linear-gradient(rgba(217, 213, 194, .97), rgba(191, 186, 166, .97)),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(62, 73, 64, .18) 35px);
  box-shadow: 14px 17px 0 rgba(0, 0, 0, .26);
  transform: rotate(-.35deg);
}

.intro-form::after {
  position: absolute;
  right: 8%;
  bottom: 13%;
  width: 90px;
  height: 90px;
  content: "複核";
  border: 4px double rgba(154, 56, 44, .6);
  border-radius: 50%;
  color: rgba(154, 56, 44, .65);
  font-size: 22px;
  font-weight: 700;
  line-height: 82px;
  text-align: center;
  transform: rotate(-12deg);
}

.intro-form .serial {
  color: #8c3d32;
  font: 700 10px/1 Arial, sans-serif;
  letter-spacing: .2em;
}

.intro-form h2 {
  margin: 18px 0 22px;
  font-size: clamp(22px, 3.2vw, 38px);
  letter-spacing: .12em;
}

.intro-form p {
  max-width: 650px;
  margin: 0 0 12px;
  font-size: clamp(11px, 1.1vw, 14px);
  line-height: 1.9;
}

.intro-form .instruction {
  margin-top: 25px;
  padding-top: 14px;
  border-top: 1px solid rgba(49, 52, 45, .28);
  font-weight: 700;
}

.case-brief-modal {
  width: min(1180px, 96vw);
}

.case-envelope-stage {
  display: grid;
  min-height: min(560px, 62vh);
  padding: clamp(24px, 4vw, 54px);
  place-items: center;
  align-content: center;
  background:
    radial-gradient(circle at 52% 35%, rgba(110, 101, 78, .16), transparent 34%),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(255, 255, 255, .013) 43px),
    #090c0a;
  text-align: center;
}

.case-envelope-stage > p {
  margin: 25px 0 17px;
  color: #a7a89d;
  font-size: 11px;
  letter-spacing: .11em;
}

.case-envelope {
  position: relative;
  width: min(720px, 82vw);
  min-height: 355px;
  overflow: hidden;
  border: 1px solid rgba(88, 73, 48, .7);
  color: #302b20;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .11), transparent 28%),
    repeating-linear-gradient(5deg, transparent 0 13px, rgba(75, 61, 37, .035) 14px),
    #b5a27d;
  box-shadow:
    0 27px 65px rgba(0, 0, 0, .58),
    inset 0 0 70px rgba(70, 52, 28, .19);
  transform: rotate(-.65deg);
}

.case-envelope::before {
  position: absolute;
  z-index: 0;
  top: -5%;
  right: -2%;
  left: -2%;
  height: 52%;
  content: "";
  border-bottom: 1px solid rgba(85, 68, 42, .34);
  background: linear-gradient(160deg, #c1b08b 0 49%, #a28d68 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  opacity: .72;
}

.case-envelope::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 11% 18%, rgba(67, 50, 28, .12) 0 1px, transparent 2px),
    radial-gradient(circle at 83% 67%, rgba(67, 50, 28, .09) 0 1px, transparent 2px);
  background-size: 31px 27px, 39px 33px;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.case-envelope-office,
.case-envelope-id,
.case-envelope-recipient,
.case-envelope-site,
.case-envelope-stamp,
.case-envelope-string {
  position: absolute;
  z-index: 1;
}

.case-envelope-office {
  top: 28px;
  left: 32px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .15em;
  text-align: left;
}

.case-envelope-id {
  top: 35%;
  left: 8%;
  font: 700 12px/1.2 "Noto Serif TC", serif;
  letter-spacing: .18em;
}

.case-envelope-recipient {
  top: 45%;
  left: 32%;
  display: grid;
  min-width: 250px;
  padding: 21px 32px;
  border-bottom: 1px solid rgba(56, 48, 32, .48);
  text-align: left;
}

.case-envelope-recipient small,
.case-envelope-recipient span {
  font-size: 9px;
  letter-spacing: .18em;
}

.case-envelope-recipient strong {
  margin: 6px 0;
  font-size: clamp(24px, 3vw, 39px);
  letter-spacing: .22em;
}

.case-envelope-site {
  bottom: 31px;
  left: 34px;
  font: 700 11px/1.2 Consolas, monospace;
  letter-spacing: .12em;
}

.case-envelope-stamp {
  display: grid;
  right: 6%;
  bottom: 11%;
  width: 76px;
  height: 76px;
  border: 4px double rgba(126, 40, 32, .68);
  border-radius: 50%;
  color: rgba(126, 40, 32, .75);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .08em;
  text-align: center;
  transform: rotate(-12deg);
  place-content: center;
}

.case-envelope-string {
  top: 19%;
  right: -8%;
  left: -8%;
  height: 2px;
  background: rgba(80, 54, 35, .72);
  box-shadow: 0 3px 0 rgba(221, 207, 170, .2);
  transform: rotate(4deg);
}

.case-envelope-string::after {
  position: absolute;
  top: -18px;
  left: 57%;
  width: 37px;
  height: 37px;
  content: "";
  border: 2px solid rgba(92, 55, 35, .8);
  border-radius: 50%;
  background: #9f8965;
  box-shadow: inset 0 0 0 6px rgba(74, 49, 31, .18);
}

.case-envelope-stage.is-opening .case-envelope {
  animation: case-envelope-open .42s cubic-bezier(.42, 0, .25, 1) both;
}

.case-envelope-stage.is-opening > p,
.case-envelope-stage.is-opening > button {
  opacity: 0;
  transition: opacity .18s ease;
}

.case-file-contents {
  color: #26251e;
}

.case-file-lead {
  margin: 0;
  padding: 15px 22px;
  border-bottom: 1px solid rgba(172, 165, 140, .18);
  color: #a5a69c;
  background: #090c0a;
  font-size: 10px;
  letter-spacing: .1em;
}

.case-file-desk {
  display: grid;
  min-height: 425px;
  padding: clamp(17px, 2.5vw, 30px);
  background:
    radial-gradient(circle at 18% 25%, rgba(122, 95, 63, .16), transparent 25%),
    repeating-linear-gradient(94deg, transparent 0 71px, rgba(255, 255, 255, .012) 72px),
    #111510;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.case-document {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(63, 60, 49, .42);
  background: #c8c2aa;
  box-shadow: 9px 13px 0 rgba(0, 0, 0, .24);
  transform: rotate(-.45deg);
  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.case-document:nth-child(even) {
  transform: rotate(.55deg) translateY(8px);
}

.case-document[open] {
  z-index: 4;
  grid-column: 1 / -1;
  order: -1;
  box-shadow: 15px 19px 0 rgba(0, 0, 0, .3);
  transform: none;
}

.case-document summary {
  display: grid;
  min-height: 125px;
  padding: 18px;
  cursor: pointer;
  list-style: none;
  align-content: space-between;
  gap: 8px;
}

.case-document summary::-webkit-details-marker {
  display: none;
}

.case-document summary::after {
  content: "＋";
  position: absolute;
  top: 13px;
  right: 15px;
  color: rgba(72, 47, 38, .62);
  font: 700 17px/1 Arial, sans-serif;
}

.case-document[open] summary {
  min-height: auto;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(67, 64, 53, .28);
  grid-template-columns: 1fr auto;
}

.case-document[open] summary > span {
  grid-column: 1 / -1;
}

.case-document[open] summary strong {
  grid-column: 1;
}

.case-document[open] summary::after {
  content: "－";
}

.case-document summary span,
.case-document summary small {
  color: #6f574a;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
}

.case-document summary strong {
  padding-right: 20px;
  font-size: clamp(15px, 1.45vw, 20px);
  letter-spacing: .09em;
}

.case-document[open] summary small {
  grid-column: 2;
  align-self: end;
  text-align: right;
}

.case-document-body {
  padding: clamp(18px, 2.5vw, 29px);
  animation: document-unfold .2s ease both;
}

.case-id-card {
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .45), transparent 44%),
    #b8c4b5;
}

.case-key-card {
  background: #c7b790;
}

.case-key-card summary span,
.case-key-card summary small {
  color: #49382e;
}

.case-reject-slip {
  background:
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(65, 72, 63, .12) 26px),
    #ccc7ae;
}

.case-evacuation-sheet {
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(42, 73, 83, .12) 24px),
    #aebfc0;
}

.case-document-kicker {
  color: #7a3f35;
  font: 800 8px/1.2 Arial, sans-serif;
  letter-spacing: .16em;
}

.case-id-face {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  align-items: center;
}

.case-id-face h3 {
  margin: 8px 0;
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing: .18em;
}

.case-id-face p,
.case-document-body > p {
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: .04em;
}

.case-id-photo {
  display: grid;
  aspect-ratio: .78;
  border: 8px solid rgba(244, 239, 217, .76);
  background:
    radial-gradient(circle at 50% 31%, #44453e 0 13%, transparent 14%),
    radial-gradient(ellipse at 50% 86%, #44453e 0 35%, transparent 36%),
    linear-gradient(145deg, #858a80, #4b5049);
  box-shadow: 3px 4px 0 rgba(41, 44, 38, .22);
  place-items: end center;
}

.case-id-photo span {
  width: 100%;
  padding: 5px;
  color: #d5d3c5;
  background: rgba(20, 23, 20, .75);
  font: 700 9px/1 Consolas, monospace;
  letter-spacing: .2em;
  text-align: center;
}

.case-fields {
  display: grid;
  margin: 19px 0 0;
  border-top: 1px solid rgba(59, 59, 50, .3);
  border-left: 1px solid rgba(59, 59, 50, .3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-fields > div {
  display: grid;
  padding: 9px 11px;
  border-right: 1px solid rgba(59, 59, 50, .3);
  border-bottom: 1px solid rgba(59, 59, 50, .3);
  grid-template-columns: minmax(68px, .6fr) 1.5fr;
  gap: 8px;
}

.case-fields dt {
  color: #725043;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
}

.case-fields dd {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
}

.case-fields.compact {
  grid-template-columns: 1fr;
}

.case-key-card .case-document-body {
  display: grid;
  grid-template-columns: .75fr 1.2fr 1fr;
  gap: 18px;
  align-items: start;
}

.case-key-tag {
  display: grid;
  min-height: 170px;
  padding: 22px 14px;
  border: 2px solid rgba(88, 65, 37, .55);
  border-radius: 48% 48% 9px 9px;
  background: rgba(183, 153, 99, .34);
  text-align: center;
  align-content: center;
  gap: 11px;
}

.case-key-tag span {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .08em;
}

.case-key-tag b,
.case-key-tag small {
  font-size: 9px;
  line-height: 1.7;
}

.case-school-card {
  padding: 17px;
  border: 1px solid rgba(64, 58, 45, .38);
  background: rgba(225, 216, 184, .6);
  box-shadow: 5px 6px 0 rgba(53, 44, 30, .14);
  transform: rotate(-1.3deg);
}

.case-school-card > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.case-school-card > p {
  margin: 8px 0 0;
  font-size: 9px;
}

.case-handwriting {
  margin: 0;
  padding: 17px;
  border: 0;
  color: #3f443d;
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(54, 69, 74, .17) 27px),
    rgba(212, 204, 168, .78);
  box-shadow: 4px 5px 0 rgba(50, 44, 34, .14);
  font-family: "DFKai-SB", "BiauKai", serif;
  font-size: 12px;
  line-height: 2.1;
  transform: rotate(.8deg);
}

.case-handwriting b {
  float: right;
}

.case-form-heading {
  display: flex;
  margin-top: 8px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.case-form-heading h3 {
  margin: 0;
  font: 700 22px/1.2 Consolas, monospace;
  letter-spacing: .08em;
}

.case-form-heading > strong {
  padding: 9px 17px;
  border: 4px double rgba(132, 49, 40, .72);
  color: rgba(132, 49, 40, .78);
  font: 800 16px/1 Arial, sans-serif;
  letter-spacing: .14em;
  transform: rotate(-3deg);
}

.case-system-copy,
.case-form-order,
.case-count {
  margin: 13px 0 0;
  padding: 11px 13px;
  font-family: Consolas, monospace;
}

.case-system-copy {
  color: #a8aaa0;
  background: #1d211d;
}

.case-form-order {
  border-left: 3px solid #79433a;
  font-weight: 700;
}

.case-evacuation-list {
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid rgba(40, 69, 76, .32);
  list-style: none;
}

.case-evacuation-list li {
  display: flex;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(40, 69, 76, .24);
  justify-content: space-between;
  gap: 16px;
  font-size: 10px;
}

.case-evacuation-list b {
  color: #305865;
  letter-spacing: .1em;
}

.supervisor-note {
  margin-top: 17px;
  color: #4d3430;
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(93, 63, 50, .14) 27px),
    #d0bd75;
}

.case-file-status {
  margin: 0;
  padding: 13px 20px;
  border-top: 1px solid rgba(184, 176, 148, .16);
  color: #b5b5a9;
  background: #090c0a;
  font-size: 9px;
  letter-spacing: .1em;
  text-align: right;
}

.case-brief-modal .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: rgba(9, 12, 10, .97);
}

.case-brief-modal .modal-actions .modal-button:disabled {
  cursor: not-allowed;
  opacity: .36;
}

@keyframes case-envelope-open {
  0% { opacity: 1; transform: rotate(-.65deg) scale(1); }
  50% { opacity: .95; transform: translateY(7px) rotate(.4deg) scale(.985); }
  100% { opacity: 0; transform: translateY(26px) rotate(1deg) scale(.96); }
}

@keyframes document-unfold {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}

.story-ledger-intro {
  margin: 0 0 22px;
  padding: 12px 14px;
  border-left: 2px solid #8e3c30;
  color: #615e55;
  background: rgba(133, 62, 50, .06);
  font-size: 10px;
  line-height: 1.8;
}

.story-entry {
  border-left-color: rgba(126, 75, 58, .48);
}

.story-entry::before {
  background: #775043;
}

.scene-frame.scare-playing .hotspot-layer,
.scene-frame.scare-playing .scene-nav,
.scene-frame.scare-playing .focus-button,
.scene-frame.scare-playing .notebook-button,
.scene-frame.scene-event-playing .hotspot-layer,
.scene-frame.scene-event-playing .scene-nav,
.scene-frame.scene-event-playing .focus-button,
.scene-frame.scene-event-playing .notebook-button {
  opacity: 0;
  pointer-events: none;
}

.scene-frame.scare-playing #sound-button,
.scene-frame.scene-event-playing #sound-button {
  opacity: 1;
  pointer-events: auto;
}

.meter-layout {
  display: grid;
  grid-template-columns: minmax(250px, .8fr) 1.2fr;
  gap: clamp(18px, 4vw, 48px);
}

.directory-sheet {
  padding: 20px;
  border: 1px solid rgba(99, 106, 95, .3);
  color: #292a25;
  background: #c7c3b1;
  transform: rotate(-.5deg);
}

.directory-sheet h3 {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .15em;
}

.directory-row {
  display: grid;
  padding: 8px 0;
  border-top: 1px solid rgba(50, 55, 47, .18);
  grid-template-columns: 42px 1fr auto;
  gap: 8px;
  font-size: 10px;
}

.directory-row code {
  color: #78372e;
  font-family: Consolas, monospace;
}

.meters {
  display: grid;
  grid-template-columns: repeat(4, minmax(68px, 1fr));
  gap: 10px;
}

.meter {
  position: relative;
  min-height: 104px;
  padding: 11px 8px 9px;
  border: 1px solid rgba(203, 211, 198, .16);
  color: #cbc9ba;
  background:
    radial-gradient(circle at 50% 36%, rgba(177, 188, 177, .12) 0 21px, transparent 22px),
    linear-gradient(#202723, #111512);
  cursor: pointer;
  transition: border-color .2s, transform .2s;
}

.meter:hover {
  border-color: var(--amber);
  transform: translateY(-2px);
}

.meter-dial {
  display: grid;
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  border: 3px double #777f75;
  border-radius: 50%;
  color: #8c9288;
  font: 8px/1 Arial, sans-serif;
  place-items: center;
}

.meter strong {
  display: block;
  font: 700 12px/1.2 Consolas, monospace;
  letter-spacing: .1em;
}

.meter small {
  display: block;
  margin-top: 4px;
  color: #70766d;
  font-size: 8px;
}

.meter.wrong {
  border-color: #8c3d34;
  animation: shake .34s;
}

.meter.correct {
  border-color: #be9160;
  box-shadow: 0 0 24px rgba(190, 145, 96, .18);
}

.press-note {
  position: relative;
  padding: 34px 34px 32px 64px;
  color: #2d2b24;
  background: #cec8ad;
  box-shadow: 8px 10px 0 rgba(0, 0, 0, .23);
}

.press-note::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  width: 1px;
  content: "";
  background: rgba(167, 58, 45, .34);
}

.press-note h3 {
  margin: 0 0 16px;
  font-size: 18px;
  letter-spacing: .08em;
}

.press-note ol {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 2;
}

.press-note .handwritten {
  margin: 22px 0 0;
  color: #7f3d35;
  font-size: 15px;
  font-weight: 700;
  transform: rotate(-1deg);
}

.overlay-workbench {
  display: grid;
  grid-template-columns: minmax(320px, 1.3fr) minmax(220px, .7fr);
  gap: 20px;
}

.light-table {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  border: 10px solid #2a2c28;
  background:
    repeating-linear-gradient(0deg, rgba(74, 99, 95, .1) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(74, 99, 95, .1) 0 1px, transparent 1px 24px),
    #d8d8c7;
  box-shadow: inset 0 0 70px rgba(112, 144, 138, .45), 0 0 25px rgba(191, 210, 192, .08);
}

.print-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78%;
  height: 72%;
  opacity: .46;
  transform-origin: center;
  pointer-events: none;
  mix-blend-mode: multiply;
  transition: transform .22s var(--ease), opacity .2s;
}

.print-layer.active {
  opacity: .72;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, .2));
}

.print-layer svg {
  width: 100%;
  height: 100%;
}

.overlay-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.layer-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.layer-tab {
  padding: 9px 4px;
  border: 1px solid rgba(215, 219, 207, .16);
  background: rgba(255, 255, 255, .03);
  font-size: 9px;
  letter-spacing: .08em;
  cursor: pointer;
}

.layer-tab.active {
  border-color: var(--amber);
  color: #f2dfc2;
}

.alignment-meter {
  padding: 13px;
  border: 1px solid rgba(214, 219, 207, .13);
}

.alignment-meter div {
  display: flex;
  justify-content: space-between;
  color: #9da397;
  font-size: 9px;
}

.alignment-meter b {
  color: #d6b17c;
  font-family: Consolas, monospace;
}

.align-track {
  height: 4px;
  margin-top: 9px;
  background: rgba(255, 255, 255, .09);
}

.align-track i {
  display: block;
  width: 0;
  height: 100%;
  background: #aa6957;
  transition: width .25s;
}

.dpad {
  display: grid;
  width: 142px;
  margin: 0 auto;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 42px);
  gap: 3px;
}

.dpad button,
.transform-controls button {
  border: 1px solid rgba(217, 221, 210, .16);
  color: #c7c9bc;
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
}

.dpad button:hover,
.transform-controls button:hover {
  border-color: var(--amber);
}

.dpad .up { grid-column: 2; grid-row: 1; }
.dpad .left { grid-column: 1; grid-row: 2; }
.dpad .center { grid-column: 2; grid-row: 2; color: #747a72; cursor: default; }
.dpad .right { grid-column: 3; grid-row: 2; }
.dpad .down { grid-column: 2; grid-row: 3; }

.transform-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.transform-controls button {
  min-height: 42px;
  font-size: 9px;
}

.overlay-clue {
  margin: 0;
  color: #8d938a;
  font-size: 10px;
  line-height: 1.7;
}

.revealed-plan {
  position: absolute;
  inset: 10%;
  display: grid;
  border: 2px solid rgba(78, 92, 78, .7);
  color: #323c34;
  background: rgba(234, 230, 201, .62);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .7s, transform .7s;
  place-items: center;
}

.revealed-plan.visible {
  opacity: 1;
  transform: scale(1);
}

.revealed-plan strong {
  font-size: clamp(28px, 5vw, 68px);
  letter-spacing: .08em;
}

.revealed-plan small {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  text-align: center;
  letter-spacing: .12em;
}

.threshold-evidence {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
}

.threshold-card {
  padding: 13px;
  border-left: 2px solid #825448;
  background: rgba(255, 255, 255, .035);
}

.threshold-card b {
  display: block;
  margin-bottom: 4px;
  color: #d0b891;
  font-size: 9px;
  letter-spacing: .1em;
}

.threshold-card p {
  margin: 0;
  color: #9fa397;
  font-size: 10px;
  line-height: 1.6;
}

.threshold-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.field-group {
  display: grid;
  gap: 7px;
}

.field-group label {
  color: #969b91;
  font-size: 9px;
  letter-spacing: .1em;
}

.field-group select {
  min-height: 44px;
  padding: 8px;
  border: 1px solid rgba(211, 217, 204, .19);
  border-radius: 0;
  color: #d3d1c3;
  background: #101411;
}

.field-group select.wrong {
  border-color: #913f34;
}

.reconcile-board {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) 1.2fr;
  gap: 22px;
}

.proof-stack {
  display: grid;
  gap: 8px;
}

.proof-card {
  display: grid;
  padding: 12px 14px;
  border: 1px solid rgba(215, 220, 208, .17);
  color: #c9c9bb;
  background: rgba(255, 255, 255, .025);
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 10px;
}

.proof-card span {
  font-size: 26px;
  filter: grayscale(1);
}

.proof-card b {
  display: block;
  font-size: 10px;
  letter-spacing: .08em;
}

.proof-card small {
  display: block;
  margin-top: 3px;
  color: #7f857d;
  font-size: 8px;
}

.object-matches {
  display: grid;
  gap: 9px;
}

.match-row {
  display: grid;
  padding: 10px 12px;
  border-left: 2px solid rgba(194, 156, 99, .35);
  background: rgba(255, 255, 255, .03);
  grid-template-columns: 95px 1fr;
  align-items: center;
  gap: 10px;
}

.match-row label {
  font-size: 10px;
  letter-spacing: .08em;
}

.match-row select {
  min-height: 38px;
  padding: 6px 9px;
  border: 1px solid rgba(212, 217, 205, .17);
  color: #d2d0c1;
  background: #111512;
  font-size: 10px;
}

.match-row.correct {
  border-left-color: #9a7950;
  background: rgba(142, 108, 65, .08);
}

.match-row.wrong {
  border-left-color: #923f34;
  animation: shake .34s;
}

.ending {
  width: min(940px, 100%);
  min-height: min(640px, 90vh);
  max-height: min(900px, 94vh);
  display: grid;
  padding: clamp(28px, 5vw, 74px);
  overflow-y: auto;
  border: 1px solid rgba(217, 221, 209, .16);
  background:
    linear-gradient(90deg, rgba(3, 5, 4, .95), rgba(6, 8, 7, .5)),
    url("./assets/hidden-room.png") center / cover;
  align-content: start;
  box-shadow: 0 25px 100px #000;
}

.ending .ending-kicker {
  color: var(--red-bright);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .25em;
}

.ending h2 {
  max-width: 700px;
  margin: 14px 0 18px;
  font-size: clamp(30px, 5vw, 64px);
  line-height: 1.15;
  letter-spacing: .06em;
}

.multirun-ending h2 {
  max-width: 100%;
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: .03em;
  text-wrap: balance;
}

.ending p {
  max-width: 650px;
  margin: 0 0 12px;
  color: #c4c2b3;
  font-size: 12px;
  line-height: 1.9;
}

.ending .ending-meta {
  margin-top: 22px;
  color: #8f9389;
  font-size: 9px;
  letter-spacing: .1em;
}

.ending-actions {
  display: flex;
  margin-top: 28px;
  flex-wrap: wrap;
  gap: 10px;
}

.ending .modal-button {
  background: rgba(4, 6, 5, .72);
}

.secret-reel {
  margin-top: 22px;
  padding: 15px;
  border-left: 2px solid var(--red);
  color: #bebdad;
  background: rgba(4, 6, 5, .64);
  font-size: 10px;
  line-height: 1.8;
}

.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 500;
  max-width: min(480px, 90vw);
  padding: 11px 16px;
  border: 1px solid rgba(220, 221, 207, .18);
  color: #e2decd;
  background: rgba(6, 9, 7, .92);
  font-size: 10px;
  letter-spacing: .06em;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .6);
}

.flash {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: #e3dfc9;
  opacity: 0;
  pointer-events: none;
}

.flash.fire {
  animation: flash .5s;
}

.anomaly-figure {
  position: absolute;
  top: 17%;
  left: 33%;
  width: 5%;
  height: 42%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(2, 3, 3, .78), transparent);
  filter: blur(3px);
  animation: pass-behind 1.5s linear;
}

.paper-flatten {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 3px, rgba(228, 217, 187, .13) 3px 4px);
  animation: paper-flatten .9s;
  mix-blend-mode: normal;
}

.wall-door {
  position: absolute;
  top: 20%;
  left: 39%;
  width: 27%;
  height: 64%;
  border: 1px solid rgba(192, 156, 105, .22);
  background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(44, 45, 38, .22), rgba(0, 0, 0, .64));
  box-shadow: inset 0 0 38px rgba(0, 0, 0, .8), 0 0 48px rgba(0, 0, 0, .6);
  opacity: 0;
  transform: perspective(600px) rotateY(22deg) scaleX(.6);
  transform-origin: left;
  animation: door-appear 2.1s var(--ease) forwards;
}

.scene-flicker {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(224, 219, 199, .12) 3px 4px),
    rgba(224, 219, 199, .08);
  animation: scene-flicker .45s steps(2);
}

.red-girl-residue {
  position: absolute;
  width: 7%;
  height: 30%;
  background: url("./assets/details/red-girl.png") center 52% / 180% auto no-repeat;
  pointer-events: none;
}

.red-girl-residue::before,
.red-girl-residue::after {
  display: none;
}

.red-girl-residue {
  top: 24%;
  left: 18%;
  z-index: 1;
  opacity: 0;
  transition: opacity .7s ease, left .7s ease, top .7s ease;
}

.red-girl-residue.is-shifted {
  top: 43%;
  left: 73%;
}

.scene-frame.listen-mode .red-girl-residue {
  opacity: .74;
}

.wet-handprint-residue {
  position: absolute;
  top: 28%;
  left: 31%;
  width: 7%;
  aspect-ratio: .82;
  border-radius: 48% 48% 42% 42%;
  background:
    radial-gradient(circle at 18% 12%, rgba(202, 191, 162, .48) 0 5%, transparent 6%),
    radial-gradient(circle at 37% 4%, rgba(202, 191, 162, .48) 0 5%, transparent 6%),
    radial-gradient(circle at 56% 2%, rgba(202, 191, 162, .48) 0 5%, transparent 6%),
    radial-gradient(circle at 73% 9%, rgba(202, 191, 162, .48) 0 5%, transparent 6%),
    radial-gradient(ellipse at 48% 58%, rgba(202, 191, 162, .38) 0 28%, transparent 30%);
  opacity: 0;
  transition: opacity .65s ease;
}

.scene-frame.listen-mode .wet-handprint-residue {
  opacity: .62;
}

.clock-reversal {
  position: absolute;
  top: 8%;
  left: 79.6%;
  width: 8%;
  aspect-ratio: 1;
  border: 1px solid rgba(218, 203, 166, .62);
  border-radius: 50%;
  background: rgba(4, 6, 5, .58);
  opacity: 0;
  animation: clock-echo 4.7s steps(4) both;
}

.clock-reversal::before,
.clock-reversal::after {
  position: absolute;
  bottom: 50%;
  left: calc(50% - 1px);
  width: 2px;
  content: "";
  background: rgba(224, 211, 180, .78);
  transform-origin: 50% 100%;
}

.clock-reversal::before {
  height: 35%;
  animation: clock-rewind 4.2s steps(4) both;
}

.clock-reversal::after {
  height: 24%;
  transform: rotate(76deg);
}

.basement-pipe-breath,
.rooftop-lightning-event,
.roofroom-chair-breathe,
.lightwell-arrival-event,
.pump-annex-gauge-event,
.tank-room-float-event,
.lobby-meter-impact,
.landing-run-event,
.printshop-glass-impact,
.basement-cage-event,
.rooftop-sheet-lunge,
.fifth-window-impact,
.roofroom-scare-frame,
.basement-drain-event,
.basement-footprints-residue,
.rooftop-red-clip-residue,
.roofroom-mirror-residue {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.basement-pipe-breath {
  background:
    radial-gradient(ellipse at 58% 50%, rgba(128, 39, 31, .2), transparent 8%),
    radial-gradient(ellipse at 72% 73%, rgba(225, 220, 190, .14), transparent 9%);
  animation: basement-breathe 4.8s steps(4) both;
}

.rooftop-lightning-event {
  background: rgba(208, 218, 216, .48);
  mix-blend-mode: screen;
  animation: rooftop-lightning 4.3s steps(1) both;
}

.roofroom-chair-breathe {
  top: 32%;
  right: 21%;
  bottom: 24%;
  left: 59%;
  border-radius: 48%;
  background: radial-gradient(ellipse, rgba(117, 22, 18, .26), rgba(0, 0, 0, .48) 58%, transparent 72%);
  animation: chair-breathe 5s ease-in-out both;
}

.lightwell-arrival-event,
.pump-annex-gauge-event,
.tank-room-float-event {
  z-index: 4;
  overflow: hidden;
  isolation: isolate;
}

/* The real basket stays on the wall while its rain-dark echo travels the wrong way. */
.lightwell-arrival-event {
  background:
    linear-gradient(180deg, transparent 0 66%, rgba(2, 8, 8, .22) 84%, transparent 100%),
    radial-gradient(ellipse at 54% 88%, rgba(180, 198, 185, .12), transparent 19%);
  animation: lightwell-water-shiver 4.4s ease-out both;
}

.lightwell-arrival-event::before {
  position: absolute;
  top: 55%;
  left: 69%;
  width: 14%;
  height: 18%;
  content: "";
  border: 3px solid rgba(7, 11, 10, .78);
  background:
    repeating-linear-gradient(90deg, transparent 0 11%, rgba(5, 8, 7, .72) 12% 16%),
    repeating-linear-gradient(0deg, transparent 0 18%, rgba(5, 8, 7, .7) 19% 23%);
  box-shadow: 0 16px 22px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: perspective(420px) rotateX(-18deg) translateY(0) scaleY(-.72);
  transform-origin: 50% 0;
  animation: lightwell-reflection-descend 4.4s cubic-bezier(.25, .05, .22, 1) both;
}

.lightwell-arrival-event::after {
  position: absolute;
  top: 29%;
  right: 15.8%;
  width: 2px;
  height: 36%;
  content: "";
  background: rgba(12, 15, 13, .82);
  box-shadow: 1px 0 4px rgba(208, 217, 197, .16);
  opacity: 0;
  transform-origin: 50% 0;
  animation: lightwell-rope-answer 4.4s steps(7, end) both;
}

/* Gauge first dies, then the hanging service tags form one impossible flat face. */
.pump-annex-gauge-event::before {
  position: absolute;
  top: 18.5%;
  left: 66.6%;
  width: 6.4%;
  aspect-ratio: 1;
  content: "";
  border: 2px solid rgba(214, 202, 169, .32);
  border-radius: 50%;
  background:
    linear-gradient(92deg, transparent 49%, rgba(33, 16, 13, .88) 49.5% 51%, transparent 51.5%),
    radial-gradient(circle, transparent 0 58%, rgba(3, 5, 4, .7) 60% 100%);
  opacity: 0;
  transform: rotate(-48deg);
  animation: annex-gauge-zero 4.3s steps(8, end) both;
}

.pump-annex-gauge-event::after {
  position: absolute;
  top: 52%;
  left: 40.3%;
  width: 27.5%;
  height: 16%;
  content: "";
  background:
    repeating-linear-gradient(90deg,
      rgba(11, 12, 10, .88) 0 8.5%,
      transparent 9% 14.2%);
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .5));
  opacity: 0;
  transform: perspective(520px) rotateX(0deg) scaleY(.72);
  transform-origin: 50% 0;
  animation: annex-tags-turn 4.3s steps(7, end) both;
}

/* The float answers inside an open tank; the room then keeps one extra footprint. */
.tank-room-float-event::before {
  position: absolute;
  top: 31%;
  left: 59.5%;
  width: 7.2%;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle at 38% 33%, rgba(215, 189, 124, .54), rgba(48, 35, 21, .86) 61%, transparent 64%);
  box-shadow: -64px 0 0 -27px rgba(4, 5, 4, .86);
  opacity: 0;
  transform-origin: -58px 50%;
  animation: tank-float-knock 5.1s steps(1, end) both;
}

.tank-room-float-event::after {
  position: absolute;
  top: 78.5%;
  left: 61.8%;
  width: 4.8%;
  height: 12%;
  content: "";
  border-radius: 56% 44% 63% 37%;
  background:
    radial-gradient(ellipse at 52% 58%, rgba(24, 20, 16, .78) 0 42%, transparent 45%),
    radial-gradient(circle at 18% 15%, rgba(24, 20, 16, .62) 0 8%, transparent 9%),
    radial-gradient(circle at 37% 8%, rgba(24, 20, 16, .62) 0 8%, transparent 9%),
    radial-gradient(circle at 56% 7%, rgba(24, 20, 16, .62) 0 8%, transparent 9%),
    radial-gradient(circle at 74% 13%, rgba(24, 20, 16, .62) 0 8%, transparent 9%);
  filter: blur(.4px);
  opacity: 0;
  transform: rotate(11deg) scale(.88);
  animation: tank-third-footprint 5.1s steps(3, end) both;
}

.landing-run-event {
  z-index: 4;
  isolation: isolate;
}

.landing-run-event::before,
.landing-run-event::after {
  position: absolute;
  inset: 0;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  will-change: opacity;
}

.landing-run-event::before {
  background-image: url("./assets/scares/landing-run-01.png");
  animation: landing-run-frame-one .78s steps(1, end) both;
}

.landing-run-event::after {
  background-image: url("./assets/scares/landing-run-02.png");
  animation: landing-run-frame-two .78s steps(1, end) both;
}

.printshop-glass-impact,
.basement-cage-event {
  z-index: 4;
  isolation: isolate;
}

.printshop-glass-impact {
  background: rgba(1, 2, 1, .82);
}

.lobby-meter-impact::before,
.printshop-glass-impact::before,
.basement-cage-event::before,
.rooftop-sheet-lunge::before,
.fifth-window-impact::before {
  position: absolute;
  inset: 0;
  content: "";
  background: #010201;
  opacity: 0;
  pointer-events: none;
}

.lobby-meter-impact::after,
.printshop-glass-impact::after,
.basement-cage-event::after,
.rooftop-sheet-lunge::after,
.fifth-window-impact::after {
  position: absolute;
  inset: 0;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.lobby-meter-impact {
  z-index: 4;
  isolation: isolate;
}

.lobby-meter-impact::before {
  animation: scare-blackout-brief 1.85s steps(1, end) both;
}

.lobby-meter-impact::after {
  background-color: #020302;
  background-image: url("./assets/scares/lobby-meter-impact.png");
  animation: scare-plate-brief 1.85s steps(1, end) both;
}

.printshop-glass-impact::before {
  background-color: #020302;
  background-image: url("./assets/scares/printshop-glass-impact-v2.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: opacity;
  animation: printshop-impact-distant 1.85s steps(1, end) both;
}

.printshop-glass-impact::after {
  background-color: #020302;
  background-image: url("./assets/scares/printshop-inside-impact-v4.png");
  animation: printshop-impact-inside 1.85s steps(1, end) both;
}

.basement-cage-event::before {
  animation: scare-blackout-long 4.2s steps(1, end) both;
}

.basement-cage-event::after {
  background-color: #010201;
  background-image: url("./assets/scares/basement-cage-impact.png");
  animation: scare-plate-long 4.2s steps(1, end) both;
}

.rooftop-sheet-lunge {
  z-index: 4;
  overflow: hidden;
  isolation: isolate;
}

.rooftop-sheet-lunge::before {
  animation: rooftop-sheet-blackout 3.9s steps(1, end) both;
}

.rooftop-sheet-lunge::after {
  background-color: #010201;
  background-image: url("./assets/scares/rooftop-sheet-impact.png");
  animation: rooftop-sheet-impact 3.9s steps(1, end) both;
}

.fifth-window-impact {
  z-index: 4;
  isolation: isolate;
}

.fifth-window-impact::before {
  animation: fifth-window-blackout 2.4s steps(1, end) both;
}

.fifth-window-impact::after {
  background-color: #020302;
  background-image: url("./assets/scares/fifth-window-impact.png");
  animation: fifth-window-impact 2.4s steps(1, end) both;
}

.roofroom-scare-frame {
  z-index: 5;
  background: #030504 url("./assets/rooftop-room-scare.png") center / cover no-repeat;
  opacity: 0;
  animation: roofroom-frame 1.35s steps(1) both;
}

.basement-drain-event {
  z-index: 3;
  background:
    radial-gradient(ellipse at 72% 72%, rgba(217, 205, 169, .18), transparent 12%),
    linear-gradient(0deg, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, .36) 64%, transparent 67%);
  animation: water-recede 6.4s ease-out both;
}

.basement-drain-event::after,
.basement-footprints-residue::after {
  position: absolute;
  top: 66%;
  left: 49%;
  width: 28%;
  height: 16%;
  content: "";
  background:
    radial-gradient(ellipse at 5% 68%, rgba(47, 35, 27, .78) 0 3%, transparent 3.8%),
    radial-gradient(ellipse at 18% 42%, rgba(47, 35, 27, .78) 0 3%, transparent 3.8%),
    radial-gradient(ellipse at 32% 65%, rgba(47, 35, 27, .78) 0 3%, transparent 3.8%),
    radial-gradient(ellipse at 47% 39%, rgba(47, 35, 27, .78) 0 3%, transparent 3.8%),
    radial-gradient(ellipse at 62% 61%, rgba(47, 35, 27, .78) 0 3%, transparent 3.8%),
    radial-gradient(ellipse at 77% 35%, rgba(47, 35, 27, .78) 0 3%, transparent 3.8%),
    radial-gradient(ellipse at 93% 55%, rgba(93, 39, 31, .88) 0 3.4%, transparent 4.2%);
  opacity: 0;
  transform: rotate(-8deg);
}

.basement-drain-event::after {
  animation: footprints-reveal 6.4s steps(7) both;
}

.basement-footprints-residue::after {
  opacity: .5;
  transition: opacity .55s ease;
}

.scene-frame.listen-mode .basement-footprints-residue::after {
  opacity: .9;
}

.rooftop-red-clip-residue::after {
  position: absolute;
  top: 40%;
  left: 15%;
  width: 14px;
  height: 6px;
  content: "";
  border: 1px solid rgba(226, 174, 148, .54);
  background: #71362f;
  box-shadow: 0 0 10px rgba(129, 47, 38, .42);
  opacity: .62;
  transform: rotate(18deg);
}

.roofroom-mirror-residue::after {
  position: absolute;
  top: 3%;
  left: 26%;
  width: 11%;
  height: 23%;
  content: "";
  border: 1px solid rgba(133, 119, 92, .28);
  border-radius: 50%;
  background: radial-gradient(ellipse, #010201 54%, rgba(31, 27, 22, .85) 67%, transparent 70%);
  opacity: .8;
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

body.reduced-motion .clock-reversal {
  opacity: .68;
  animation: none !important;
}

body.reduced-motion .roofroom-scare-frame,
body.reduced-motion .basement-drain-event::after,
body.reduced-motion .lightwell-arrival-event::before,
body.reduced-motion .pump-annex-gauge-event::after,
body.reduced-motion .tank-room-float-event::after {
  opacity: .82;
  animation: none !important;
}

body.reduced-motion .lightwell-arrival-event,
body.reduced-motion .lightwell-arrival-event::after,
body.reduced-motion .pump-annex-gauge-event::before,
body.reduced-motion .tank-room-float-event::before {
  animation: none !important;
}

body.reduced-motion .printshop-glass-impact::after,
body.reduced-motion .lobby-meter-impact::after,
body.reduced-motion .basement-cage-event::after,
body.reduced-motion .rooftop-sheet-lunge::after,
body.reduced-motion .fifth-window-impact::after {
  opacity: .82;
  animation: none !important;
}

body.reduced-motion .landing-run-event::before {
  opacity: 0;
  animation: none !important;
}

body.reduced-motion .landing-run-event::after {
  opacity: .82;
  animation: none !important;
}

body.reduced-motion .printshop-glass-impact::before,
body.reduced-motion .basement-cage-event::before,
body.reduced-motion .rooftop-sheet-lunge::before,
body.reduced-motion .fifth-window-impact::before {
  opacity: 0;
  animation: none !important;
}

@keyframes rain-drift {
  from { transform: translateY(-4%) rotate(7deg); }
  to { transform: translateY(4%) rotate(7deg); }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
}

@keyframes flash {
  0% { opacity: 0; }
  8% { opacity: .9; }
  18% { opacity: .1; }
  30% { opacity: .55; }
  100% { opacity: 0; }
}

@keyframes pass-behind {
  0% { left: 18%; opacity: 0; transform: skewX(-5deg); }
  16% { opacity: .7; }
  75% { opacity: .5; }
  100% { left: 72%; opacity: 0; transform: skewX(7deg); }
}

@keyframes paper-flatten {
  0% { opacity: 0; transform: scaleX(1); }
  35% { opacity: .8; transform: scaleX(.04); }
  55% { opacity: .8; transform: scaleX(.04); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes door-appear {
  0% { opacity: 0; transform: perspective(600px) rotateY(0) scaleX(.15); }
  35% { opacity: .8; }
  100% { opacity: 1; transform: perspective(600px) rotateY(-6deg) scaleX(1); }
}

@keyframes scene-flicker {
  0%, 100% { opacity: 0; }
  18% { opacity: .34; }
  34% { opacity: .04; }
  52% { opacity: .26; }
  70% { opacity: .02; }
}

@keyframes clock-echo {
  0%, 100% { opacity: 0; }
  12%, 78% { opacity: .72; }
}

@keyframes clock-rewind {
  0% { transform: rotate(282deg); }
  100% { transform: rotate(-438deg); }
}

@keyframes basement-breathe {
  0%, 100% { opacity: 0; }
  22% { opacity: .8; }
  38% { opacity: .08; }
  62% { opacity: .66; }
}

@keyframes rooftop-lightning {
  0%, 5%, 11%, 100% { opacity: 0; }
  3% { opacity: .42; }
  8% { opacity: .18; }
}

@keyframes chair-breathe {
  0%, 100% { opacity: 0; transform: scale(.94); }
  22%, 67% { opacity: .62; transform: scale(1.035); }
  38% { opacity: .18; transform: scale(.985); }
}

@keyframes lightwell-water-shiver {
  0%, 12% { opacity: 0; filter: contrast(1); }
  21% { opacity: .9; filter: contrast(1.08); }
  72% { opacity: .72; filter: contrast(1.13); }
  100% { opacity: 0; filter: contrast(1); }
}

@keyframes lightwell-reflection-descend {
  0%, 17% { opacity: 0; transform: perspective(420px) rotateX(-18deg) translateY(-8%) scaleY(-.72); }
  25% { opacity: .68; }
  66% { opacity: .78; transform: perspective(420px) rotateX(-18deg) translateY(74%) scaleY(-.78); }
  80% { opacity: .34; transform: perspective(420px) rotateX(-18deg) translateY(91%) scaleY(-.68); }
  100% { opacity: 0; transform: perspective(420px) rotateX(-18deg) translateY(102%) scaleY(-.62); }
}

@keyframes lightwell-rope-answer {
  0%, 18% { opacity: 0; transform: rotate(0); }
  24% { opacity: .72; transform: rotate(0); }
  38% { transform: rotate(1.6deg); }
  48% { transform: rotate(-1.1deg); }
  62% { opacity: .82; transform: rotate(.6deg); }
  100% { opacity: 0; transform: rotate(0); }
}

@keyframes annex-gauge-zero {
  0%, 11% { opacity: 0; transform: rotate(-48deg); }
  18% { opacity: .82; transform: rotate(-48deg); }
  42%, 72% { opacity: .9; transform: rotate(-91deg); }
  100% { opacity: 0; transform: rotate(-91deg); }
}

@keyframes annex-tags-turn {
  0%, 37% { opacity: 0; transform: perspective(520px) rotateX(0deg) scaleY(.72); }
  48% { opacity: .48; transform: perspective(520px) rotateX(48deg) scaleY(.76); }
  61%, 83% { opacity: .86; transform: perspective(520px) rotateX(78deg) scaleY(1.08); }
  100% { opacity: 0; transform: perspective(520px) rotateX(86deg) scaleY(1.16); }
}

@keyframes tank-float-knock {
  0%, 15% { opacity: 0; transform: rotate(0); }
  16%, 23% { opacity: .83; transform: rotate(-17deg); }
  24%, 31% { opacity: .76; transform: rotate(8deg); }
  32%, 39% { opacity: .84; transform: rotate(-15deg); }
  40%, 47% { opacity: .77; transform: rotate(7deg); }
  48%, 55% { opacity: .86; transform: rotate(-13deg); }
  56%, 79% { opacity: .65; transform: rotate(3deg); }
  100% { opacity: 0; transform: rotate(0); }
}

@keyframes tank-third-footprint {
  0%, 55% { opacity: 0; transform: rotate(11deg) translateY(-7px) scale(.82); }
  66%, 88% { opacity: .82; transform: rotate(11deg) translateY(0) scale(.88); }
  100% { opacity: .34; transform: rotate(11deg) translateY(0) scale(.88); }
}

@keyframes landing-run-frame-one {
  0%, 7% { opacity: 0; }
  8%, 43% { opacity: 1; }
  44%, 100% { opacity: 0; }
}

@keyframes landing-run-frame-two {
  0%, 43% { opacity: 0; }
  44%, 82% { opacity: 1; }
  83%, 100% { opacity: 0; }
}

@keyframes scare-plate-brief {
  0%, 11% { opacity: 0; }
  12%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

@keyframes scare-blackout-brief {
  0%, 7%, 12%, 49%, 55%, 100% { opacity: 0; }
  8%, 11%, 50%, 54% { opacity: .98; }
}

@keyframes printshop-impact-distant {
  0%, 4% { opacity: 0; }
  5%, 30% { opacity: 1; }
  31%, 100% { opacity: 0; }
}

@keyframes printshop-impact-inside {
  0%, 34% { opacity: 0; }
  35%, 69% { opacity: 1; }
  70%, 73% { opacity: 0; }
  74%, 91% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

@keyframes scare-plate-long {
  0%, 13% { opacity: 0; }
  14%, 26% { opacity: 1; }
  27%, 30% { opacity: 0; }
  31%, 42% { opacity: .92; }
  43%, 100% { opacity: 0; }
}

@keyframes scare-blackout-long {
  0%, 10%, 14%, 25%, 31%, 41%, 47%, 100% { opacity: 0; }
  11%, 13%, 26%, 30%, 42%, 46% { opacity: .98; }
}

@keyframes rooftop-sheet-impact {
  0%, 8% { opacity: 0; }
  9%, 35% { opacity: 1; }
  36%, 100% { opacity: 0; }
}

@keyframes rooftop-sheet-blackout {
  0%, 5%, 9%, 34%, 39%, 100% { opacity: 0; }
  6%, 8%, 35%, 38% { opacity: .98; }
}

@keyframes fifth-window-impact {
  0%, 20% { opacity: 0; }
  21%, 62% { opacity: .96; }
  63%, 100% { opacity: 0; }
}

@keyframes fifth-window-blackout {
  0%, 17%, 21%, 60%, 65%, 100% { opacity: 0; }
  18%, 20%, 61%, 64% { opacity: .94; }
}

@keyframes roofroom-frame {
  0%, 8%, 34%, 49%, 100% { opacity: 0; }
  9%, 33% { opacity: 1; }
  50%, 72% { opacity: .86; }
}

@keyframes water-recede {
  0% { opacity: .1; transform: translateY(0); }
  65% { opacity: .7; transform: translateY(7%); }
  100% { opacity: 0; transform: translateY(11%); }
}

@keyframes footprints-reveal {
  0%, 18% { opacity: 0; }
  48% { opacity: .35; }
  80%, 100% { opacity: .85; }
}

@keyframes observation-pulse {
  0% { opacity: 0; transform: scale(.94); }
  28% { opacity: .75; }
  100% { opacity: 0; transform: scale(1.04); }
}

.raw-document {
  position: relative;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(65, 68, 59, .3);
  color: #302e27;
  background:
    linear-gradient(93deg, transparent 0 7%, rgba(117, 54, 45, .08) 7% 7.3%, transparent 7.3%),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(58, 64, 55, .11) 27px),
    #c9c4af;
  box-shadow: 8px 10px 0 rgba(0, 0, 0, .2);
  transform: rotate(-.25deg);
}

.raw-document p {
  margin: 0;
  font-size: clamp(11px, 1.05vw, 14px);
  line-height: 2;
  letter-spacing: .05em;
}

.raw-document .document-note {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed rgba(72, 69, 59, .32);
  color: #7b3e35;
  font-weight: 700;
}

.missing-copy {
  margin: 0;
  color: #7d8179;
  font-size: 9px;
  line-height: 1.7;
}

.audit-copies {
  display: grid;
  margin-bottom: 20px;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.audit-copies section {
  min-height: 122px;
  padding: 13px;
  border: 1px solid rgba(211, 216, 204, .13);
  background: rgba(255, 255, 255, .025);
}

.audit-copies h3 {
  margin: 0 0 10px;
  color: #c4aa82;
  font-size: 9px;
  letter-spacing: .12em;
}

.audit-copies section > span {
  display: inline-grid;
  min-width: 31%;
  padding: 6px 5px;
  border-top: 1px solid rgba(213, 218, 205, .08);
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  font-size: 8px;
}

.audit-copies span b {
  font-weight: 400;
}

.audit-copies span em,
.audit-seal em {
  color: #747b73;
  font-size: 8px;
  font-style: normal;
  letter-spacing: .08em;
}

.audit-copies span i {
  display: grid;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--seal, transparent);
  font-style: normal;
  place-items: center;
}

.audit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(128px, 1fr));
  gap: 9px;
}

.audit-meter {
  display: grid;
  min-height: 145px;
  padding: 12px;
  border: 1px solid rgba(206, 213, 200, .15);
  background:
    radial-gradient(circle at 50% 28%, rgba(176, 189, 177, .11) 0 28px, transparent 29px),
    linear-gradient(#202622, #101411);
  align-content: start;
  gap: 5px;
}

.audit-seal {
  display: flex;
  height: 54px;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.audit-seal b {
  color: #a5aaa1;
  font-size: 22px;
}

.audit-seal i {
  width: 17px;
  height: 17px;
  border: 2px solid rgba(222, 222, 209, .18);
  border-radius: 50%;
  background: var(--seal);
}

.audit-meter > strong {
  font: 700 13px/1 Consolas, monospace;
  letter-spacing: .1em;
  text-align: center;
}

.audit-meter > small {
  color: #747b73;
  font: 8px/1.4 Consolas, monospace;
  text-align: center;
}

.audit-meter select,
.proof-assembly-row select,
.case-fields select {
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid rgba(212, 218, 204, .16);
  border-radius: 0;
  color: #d3d0c1;
  background: #0e1210;
  font-size: 9px;
}

.registration-bed .bed-pin,
.registration-bed .bed-stain {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.registration-bed .bed-pin {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(60, 66, 58, .42);
  border-radius: 50%;
}

.registration-bed .pin-a {
  top: 16%;
  right: 11%;
}

.registration-bed .pin-b {
  top: 21%;
  right: 6%;
}

.registration-bed .bed-stain {
  bottom: 4%;
  left: 47%;
  width: 42px;
  height: 13px;
  border-radius: 50%;
  background: rgba(104, 76, 36, .22);
  filter: blur(2px);
}

.ink-order {
  padding: 11px;
  border: 1px solid rgba(212, 218, 205, .12);
}

.ink-order > span {
  color: #858b82;
  font-size: 8px;
  letter-spacing: .12em;
}

.ink-order > div {
  display: flex;
  margin-top: 8px;
  gap: 5px;
}

.ink-order > div span {
  flex: 1;
  padding: 7px 4px;
  border: 1px solid rgba(214, 219, 207, .13);
  text-align: center;
  font-size: 9px;
}

.ink-order small {
  display: block;
  margin-bottom: 2px;
  color: #737a72;
  font-size: 7px;
}

[data-ink="cyan"] { color: #65a6ad; }
[data-ink="vermilion"] { color: #b96157; }
[data-ink="ochre"] { color: #c1a04d; }

.stencil-symbols {
  display: grid;
  width: 78%;
  color: #37433a;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 22px;
  font: 700 clamp(24px, 4vw, 50px)/1.1 "Courier New", monospace;
  text-align: center;
  filter: blur(.3px);
}

.stencil-symbols span:last-child {
  font-size: .45em;
  letter-spacing: .25em;
}

.transform-controls.centered {
  max-width: 260px;
  margin: 15px auto 0;
  grid-template-columns: 1fr;
}

.rubbing-reader {
  min-height: 210px;
  display: grid;
  padding: 30px;
  border: 9px solid #2a2c28;
  color: #3c4138;
  background:
    repeating-linear-gradient(90deg, rgba(70, 87, 80, .08) 0 1px, transparent 1px 18px),
    #d4d3bf;
  place-items: center;
  transition: transform .45s var(--ease);
}

.rubbing-reader span {
  color: #797d71;
  font-size: 9px;
  letter-spacing: .2em;
}

.rubbing-reader strong {
  font-size: clamp(30px, 6vw, 64px);
  letter-spacing: .15em;
}

.rubbing-reader.back {
  box-shadow: inset 0 0 60px rgba(93, 122, 113, .34);
  transform: rotateY(180deg);
}

.rubbing-reader.back > * {
  transform: rotateY(180deg);
}

.plate-calibration {
  position: relative;
  min-height: 280px;
  border: 1px solid rgba(210, 214, 201, .14);
  background:
    radial-gradient(circle at 50% 50%, rgba(92, 84, 63, .18), transparent 55%),
    #111511;
}

.plate-scar,
.brass-plate,
.plate-preview {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 155px;
  height: 78px;
  border-radius: 4px;
  transform: translate(-50%, -50%);
}

.plate-scar {
  border: 2px dashed rgba(180, 121, 87, .42);
}

.brass-plate {
  border: 1px solid #8d7950;
  background: linear-gradient(135deg, #87724a, #443b29 65%, #92734a);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
  transform-origin: center;
  transition: transform .3s var(--ease);
}

.plate-scar i,
.brass-plate i,
.plate-preview i {
  position: absolute;
  top: 16px;
  left: 18px;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(219, 204, 163, .7);
  border-radius: 50%;
}

.plate-scar b,
.brass-plate b,
.plate-preview b {
  position: absolute;
  right: 17px;
  bottom: 16px;
  width: 31px;
  height: 11px;
  border: 2px solid rgba(219, 204, 163, .7);
  border-radius: 8px;
}

.plate-scar i {
  top: auto;
  right: 18px;
  bottom: 16px;
  left: auto;
}

.plate-scar b {
  top: 16px;
  right: auto;
  bottom: auto;
  left: 17px;
}

.wall-workbench {
  display: grid;
  grid-template-columns: minmax(420px, 1.25fr) minmax(230px, .75fr);
  gap: 18px;
}

.wall-board {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid rgba(214, 217, 204, .13);
  background:
    linear-gradient(87deg, transparent 49.7%, rgba(35, 40, 35, .18) 50%, transparent 50.3%),
    radial-gradient(circle at 25% 35%, rgba(127, 119, 92, .09), transparent 35%),
    #343a34;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .6);
}

.wall-holes {
  position: absolute;
  inset: 11%;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
}

.wall-holes button {
  position: relative;
  border: 1px solid transparent;
  background: transparent;
  cursor: crosshair;
}

.wall-holes button i,
.wall-holes button b {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(205, 200, 173, .32);
  border-radius: 50%;
  background: rgba(12, 15, 13, .7);
  transform: translateY(-50%);
}

.wall-holes button i { left: 28%; }
.wall-holes button b { right: 28%; }

.wall-holes button:hover,
.wall-holes button:focus-visible {
  border-color: rgba(216, 196, 157, .25);
}

.wall-holes button.selected {
  border-color: rgba(184, 125, 91, .68);
  background: rgba(163, 80, 61, .08);
}

.wall-axis {
  position: absolute;
  z-index: 2;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}

.pipe-axis {
  top: 4%;
  bottom: 4%;
  left: 62.5%;
  width: 2px;
  background: repeating-linear-gradient(0deg, #7b8f83 0 10px, transparent 10px 17px);
}

.photo-axis {
  top: 50%;
  right: 4%;
  left: 4%;
  height: 2px;
  background: repeating-linear-gradient(90deg, #a39473 0 12px, transparent 12px 19px);
}

.stencil-axis {
  top: calc(50% - 42px);
  left: calc(62.5% - 44px);
  width: 88px;
  height: 84px;
  border: 2px dashed rgba(150, 83, 67, .74);
  transform: rotate(-7deg);
}

.wall-board.guide-pipe .pipe-axis,
.wall-board.guide-photo .photo-axis,
.wall-board.guide-stencil .stencil-axis {
  opacity: .9;
}

.wall-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guide-controls {
  display: grid;
  gap: 6px;
}

.guide-controls button,
.wall-rotate {
  min-height: 42px;
  border: 1px solid rgba(214, 219, 207, .15);
  color: #aeb2a7;
  background: rgba(255, 255, 255, .025);
  font-size: 9px;
  cursor: pointer;
}

.guide-controls button.active {
  border-color: #9b6c52;
  color: #ead9bc;
  background: rgba(143, 80, 60, .1);
}

.plate-preview {
  position: relative;
  top: auto;
  left: auto;
  width: 150px;
  height: 75px;
  margin: 18px auto 5px;
  border: 1px solid #8d7950;
  background: linear-gradient(135deg, #87724a, #443b29 65%, #92734a);
  transform: rotate(var(--plate-rotation, 0deg));
  transition: transform .28s var(--ease);
}

.plate-preview.missing {
  border-style: dashed;
  opacity: .28;
  background: transparent;
}

.plate-preview span {
  position: absolute;
  right: 0;
  bottom: -24px;
  left: 0;
  color: #777d75;
  font-size: 8px;
  text-align: center;
}

.address-rubbing {
  display: grid;
  min-height: 190px;
  padding: 30px;
  border: 8px solid #2a2c28;
  color: #333a32;
  background: #d2cfb9;
  place-items: center;
}

.address-rubbing span {
  font-size: 12px;
  letter-spacing: .2em;
}

.address-rubbing strong {
  font-size: clamp(28px, 5vw, 58px);
  letter-spacing: .16em;
}

.empty-slots {
  display: grid;
  margin-top: 20px;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.empty-slots i {
  height: 44px;
  border: 1px dashed rgba(64, 64, 55, .32);
}

.final-audit-modal {
  width: min(1120px, 96vw);
}

.final-audit-section + .final-audit-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(213, 218, 205, .12);
}

.final-audit-section h3 {
  margin: 0 0 7px;
  color: #d3bb91;
  font-size: 13px;
  letter-spacing: .13em;
}

.final-audit-section > p {
  margin: 0 0 15px;
  color: #858b82;
  font-size: 10px;
}

.proof-assembly {
  display: grid;
  gap: 7px;
}

.proof-assembly-row {
  display: grid;
  padding: 9px;
  border-left: 2px solid rgba(167, 86, 66, .45);
  background: rgba(255, 255, 255, .025);
  grid-template-columns: minmax(190px, 1fr) minmax(140px, .75fr) minmax(100px, .45fr);
  align-items: center;
  gap: 8px;
}

.proof-assembly-row > span {
  display: grid;
  grid-template-columns: 36px 70px 1fr;
  align-items: center;
  gap: 6px;
  font-size: 24px;
}

.proof-assembly-row b {
  font-size: 9px;
}

.proof-assembly-row small {
  color: #80867e;
  font-size: 8px;
}

.timeline-strip {
  display: grid;
  margin: 15px 0;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.timeline-strip span {
  padding: 11px 8px;
  border-top: 1px solid rgba(209, 215, 201, .2);
  color: #9ca198;
  background: rgba(255, 255, 255, .02);
  font-size: 8px;
}

.timeline-strip b {
  display: block;
  margin-bottom: 5px;
  color: #c08b73;
  font: 700 10px/1 Consolas, monospace;
}

.case-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.case-fields label {
  display: grid;
  color: #969c92;
  font-size: 8px;
  letter-spacing: .08em;
  gap: 6px;
}

.case-fields label:last-child {
  grid-column: 1 / -1;
}

.case-confirmed {
  display: grid;
  padding: 13px 0;
  border-bottom: 1px solid rgba(55, 57, 50, .16);
  grid-template-columns: 35px 1fr;
  gap: 10px;
}

.case-confirmed > b {
  color: rgba(127, 61, 50, .7);
  font: 700 13px/1 Consolas, monospace;
}

.case-confirmed h3 {
  margin: 0 0 4px;
  font-size: 11px;
}

.case-confirmed p {
  margin: 0;
  color: #5f6259;
  font-size: 10px;
  line-height: 1.7;
}

.raw-entry h3::before {
  content: "RAW / ";
  color: rgba(126, 57, 47, .66);
  font: 700 8px/1 Consolas, monospace;
}

.dot-matrix-result {
  display: grid;
  max-width: 620px;
  margin: 8px 0 20px;
  padding: 16px 18px;
  border-left: 2px solid rgba(180, 79, 63, .72);
  color: #c9c7b8;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 5px),
    rgba(4, 6, 5, .67);
  gap: 6px;
  font: 10px/1.6 Consolas, monospace;
  letter-spacing: .08em;
}

.ending-dialogue {
  margin-top: 6px;
}

@media (max-width: 720px) {
  body {
    overflow-y: auto;
  }

  .route-lock-modal .modal-body {
    grid-template-columns: 1fr;
  }

  .route-lock-object {
    width: 82px;
    margin-inline: auto;
  }

  .choice-chips,
  .pipe-tile-grid,
  .valve-order {
    grid-template-columns: 1fr;
  }

  .step-selector {
    grid-template-columns: repeat(3, 1fr);
  }

  .title-copy {
    transform: none;
  }

  .case-envelope-stage {
    min-height: auto;
    padding: 20px 12px 26px;
  }

  .case-envelope {
    width: 100%;
    min-height: 300px;
  }

  .case-envelope-office {
    top: 22px;
    left: 20px;
  }

  .case-envelope-id {
    top: 34%;
    left: 20px;
  }

  .case-envelope-recipient {
    right: 10%;
    left: 20%;
    min-width: 0;
    padding: 18px 20px;
  }

  .case-envelope-recipient strong {
    font-size: clamp(21px, 8vw, 32px);
  }

  .case-envelope-site {
    bottom: 23px;
    left: 20px;
  }

  .case-envelope-stamp {
    right: 5%;
    bottom: 8%;
    width: 60px;
    height: 60px;
    font-size: 13px;
  }

  .case-file-lead {
    padding: 13px 15px;
    line-height: 1.7;
  }

  .case-file-desk {
    padding: 12px;
    grid-template-columns: 1fr;
  }

  .case-document,
  .case-document:nth-child(even) {
    transform: none;
  }

  .case-document[open] {
    grid-column: auto;
  }

  .case-document[open] summary {
    grid-template-columns: 1fr;
  }

  .case-document[open] summary > span,
  .case-document[open] summary strong,
  .case-document[open] summary small {
    grid-column: 1;
  }

  .case-document[open] summary small {
    text-align: left;
  }

  .case-key-card .case-document-body {
    grid-template-columns: 1fr;
  }

  .case-id-face {
    grid-template-columns: 82px 1fr;
  }

  .case-fields {
    grid-template-columns: 1fr;
  }

  .case-file-status {
    text-align: left;
  }

  .content-note {
    right: 12px;
    left: 12px;
    text-align: center;
  }

  .game-screen {
    display: block;
    overflow-y: auto;
    background: #050806;
  }

  .scene-frame {
    top: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 0;
    transform: translateY(-50%);
  }

  .hud {
    padding: 9px;
  }

  .progress {
    display: none;
  }

  .hud {
    grid-template-columns: 1fr 1fr;
  }

  .hud-actions {
    grid-column: 2;
  }

  .objective {
    top: 54px;
    left: 9px;
    max-width: 55vw;
  }

  .objective p {
    font-size: 8px;
  }

  .inventory-strip {
    top: 92px;
    left: 9px;
    max-width: 62vw;
  }

  .inventory-strip > span {
    display: none;
  }

  .inventory-strip > div span {
    padding: 2px 4px;
    font-size: 7px;
  }

  .scene-nav {
    bottom: 8px;
    width: calc(100vw - 104px);
    max-width: 310px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav-action {
    min-width: 90px;
    padding: 8px;
    font-size: 8px;
  }

  .focus-button {
    right: 5px;
    bottom: 7px;
  }

  .focus-button span:last-child {
    display: none;
  }

  .subtitle {
    bottom: 76px;
    width: 90vw;
    padding: 7px 12px;
  }

  .subtitle p {
    font-size: 9px;
  }

  .meter-layout,
  .overlay-workbench,
  .reconcile-board,
  .wall-workbench {
    grid-template-columns: 1fr;
  }

  .evidence-layout.has-visual {
    grid-template-columns: 1fr;
  }

  .evidence-visual-image img {
    max-height: 44vh;
  }

  .evidence-image-viewport {
    max-height: 44vh;
  }

  .evidence-visual-image.is-zoomed img {
    width: 100%;
    max-height: none;
  }

  .evidence-visual-image.is-zoomed .evidence-image-zoom {
    width: 920px;
  }

  .artifact-canvas {
    min-height: 300px;
    padding: 21px;
  }

  .artifact-meter-panel {
    padding: 14px;
    border-width: 6px;
  }

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

  .artifact-timeline {
    grid-template-columns: 1fr 1fr;
  }

  .artifact-timeline > div {
    min-height: 150px;
  }

  .artifact-object-views {
    grid-template-columns: 1fr;
  }

  .artifact-object-views > section {
    min-height: 260px;
  }

  .artifact-clock-case,
  .artifact-lightbox,
  .artifact-board,
  .artifact-wall,
  .artifact-cloth {
    min-height: 300px;
  }

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

  .audit-copies {
    grid-template-columns: 1fr;
  }

  .meters {
    grid-template-columns: repeat(4, 1fr);
  }

  .meter {
    min-height: 88px;
  }

  .light-table {
    min-height: 320px;
  }

  .threshold-form {
    grid-template-columns: 1fr;
  }

  .wall-board {
    min-height: 340px;
  }

  .proof-assembly-row {
    grid-template-columns: 1fr 1fr;
  }

  .proof-assembly-row > span {
    grid-column: 1 / -1;
  }

  .timeline-strip {
    grid-template-columns: 1fr 1fr;
  }

  .case-fields {
    grid-template-columns: 1fr;
  }

  .case-fields label:last-child {
    grid-column: auto;
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .game-screen {
    min-height: calc(56.25vw + 330px);
    padding-bottom: 24px;
  }

  .scene-frame {
    top: 0;
    overflow: visible;
    margin-top: env(safe-area-inset-top, 0);
    transform: none;
  }

  .scene-nav,
  .focus-button {
    top: calc(100% + 12px);
    bottom: auto;
  }

  .hud {
    top: calc(100% + 84px);
    background: linear-gradient(180deg, rgba(5, 8, 7, .96), rgba(5, 8, 7, .76));
  }

  .objective {
    top: calc(100% + 139px);
    max-width: calc(100vw - 18px);
  }

  .inventory-strip {
    top: calc(100% + 202px);
    max-width: calc(100vw - 18px);
  }

  .subtitle {
    top: calc(100% + 252px);
    bottom: auto;
  }
}

@media (max-height: 500px) {
  .title-screen {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .title-rain {
    inset: 0;
    animation: none;
    transform: none;
  }

  .title-copy {
    width: min(820px, calc(100vw - 24px));
    min-height: 100%;
    margin: 0 auto;
    padding: 22px 20px 30px;
    transform: none;
  }

  .title-copy h1 {
    font-size: clamp(48px, 18vh, 72px);
  }

  .eyebrow,
  .english-title,
  .tagline {
    margin-top: 14px;
    margin-bottom: 14px;
  }

  .content-note {
    position: static;
    width: min(820px, calc(100vw - 40px));
    margin: 10px auto 24px;
    text-align: center;
  }
}

@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
  .game-screen {
    padding-bottom: 54px;
  }

  .scene-frame {
    width: min(100vw, calc(177.7778vh - 96px));
    height: min(calc(100vh - 54px), 56.25vw);
    overflow: visible;
  }

  .scene-nav {
    top: calc(100% + 8px);
    bottom: auto;
    max-width: calc(100vw - 124px);
    flex-wrap: nowrap;
    overflow-x: auto;
    touch-action: pan-x;
  }

  .focus-button {
    top: calc(100% + 8px);
    right: 8px;
    bottom: auto;
  }
}

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

  .clock-reversal,
  .roofroom-scare-frame,
  .basement-drain-event::after,
  .lightwell-arrival-event::before,
  .pump-annex-gauge-event::after,
  .tank-room-float-event::after {
    opacity: .68;
    animation: none !important;
  }

  .lightwell-arrival-event,
  .lightwell-arrival-event::after,
  .pump-annex-gauge-event::before,
  .tank-room-float-event::before {
    animation: none !important;
  }

  .lobby-meter-impact::after,
  .printshop-glass-impact::after,
  .basement-cage-event::after,
  .rooftop-sheet-lunge::after,
  .fifth-window-impact::after {
    opacity: .68;
    animation: none !important;
  }

  .landing-run-event::before {
    opacity: 0;
    animation: none !important;
  }

  .landing-run-event::after {
    opacity: .68;
    animation: none !important;
  }

  .lobby-meter-impact::before,
  .printshop-glass-impact::before,
  .basement-cage-event::before,
  .rooftop-sheet-lunge::before,
  .fifth-window-impact::before {
    opacity: 0;
    animation: none !important;
  }
}

/* Four-pass carbon record */
body[data-loop="1"] {
  --loop-ink: #d9ded7;
  --loop-paper: #d8d2c2;
  --loop-glow: rgba(216, 222, 215, .18);
}

body[data-loop="2"] {
  --loop-ink: #d49a9b;
  --loop-paper: #c59a98;
  --loop-glow: rgba(181, 91, 94, .24);
}

body[data-loop="3"] {
  --loop-ink: #d4bb6f;
  --loop-paper: #c8b477;
  --loop-glow: rgba(192, 151, 48, .24);
}

body[data-loop="4"] {
  --loop-ink: #829eb0;
  --loop-paper: #8ba4b2;
  --loop-glow: rgba(78, 125, 151, .28);
}

.scene-frame[data-loop="2"] .scene-wash {
  background:
    linear-gradient(105deg, transparent 57%, rgba(116, 42, 46, .08)),
    radial-gradient(circle at 49% 42%, transparent 33%, rgba(17, 8, 8, .19));
}

.scene-frame[data-loop="3"] .scene-wash {
  background:
    linear-gradient(89deg, rgba(91, 70, 20, .06), transparent 42%),
    radial-gradient(circle at 50% 44%, transparent 29%, rgba(12, 11, 6, .21));
}

.scene-frame[data-loop="4"] .scene-wash {
  background:
    repeating-linear-gradient(90deg, transparent 0 148px, rgba(112, 155, 176, .025) 149px 150px),
    radial-gradient(circle at 50% 45%, transparent 27%, rgba(4, 10, 14, .24));
}

.scene-frame[data-loop]:not([data-loop="1"]) .objective {
  border-left-color: var(--loop-ink);
  box-shadow: -12px 0 28px -22px var(--loop-ink);
}

.loop-intro-modal,
.loop-verdict-modal,
.loop-audit-modal {
  --paper-accent: var(--loop-ink);
  position: relative;
}

.loop-intro-modal,
.loop-verdict-modal {
  overflow: hidden;
}

.loop-audit-modal {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.carbon-page-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .34;
}

.carbon-page-stack i {
  position: absolute;
  width: min(48vw, 430px);
  height: min(61vh, 560px);
  left: calc(50% - min(24vw, 215px) + (var(--layer) - 2) * 8px);
  top: calc(50% - min(30vh, 280px) + (var(--layer) - 2) * 6px);
  border: 1px solid color-mix(in srgb, var(--loop-ink) 42%, transparent);
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--loop-ink) 7%, transparent) 24px),
    rgba(210, 205, 187, .025);
  transform: rotate(calc((var(--layer) - 2) * .65deg));
}

.loop-intro-modal > :not(.carbon-page-stack) {
  position: relative;
  z-index: 1;
}

.prior-finding {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  margin-bottom: 20px;
  border: 1px solid rgba(224, 222, 207, .11);
  border-left: 2px solid var(--loop-ink);
  background: rgba(0, 0, 0, .28);
}

.prior-finding small,
.carbon-impression span,
.next-layer-impression small {
  color: var(--loop-ink);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.prior-finding b {
  font: 500 18px/1.35 var(--serif);
}

.prior-finding p,
.loop-intro-copy p {
  margin: 0;
  color: rgba(232, 231, 221, .72);
  line-height: 1.8;
}

.loop-intro-copy {
  display: grid;
  gap: 12px;
}

.carbon-impression,
.next-layer-impression {
  display: grid;
  gap: 7px;
  margin-top: 22px;
  padding: 17px 18px;
  border: 1px dashed color-mix(in srgb, var(--loop-ink) 52%, transparent);
  background:
    linear-gradient(96deg, color-mix(in srgb, var(--loop-ink) 8%, transparent), transparent 72%);
  transform: rotate(-.25deg);
}

.carbon-impression b,
.next-layer-impression b {
  color: rgba(247, 244, 230, .9);
  font: 500 19px/1.4 var(--serif);
}

.carbon-impression span:last-child,
.next-layer-impression span:last-child {
  color: rgba(229, 227, 214, .66);
  line-height: 1.65;
}

.loop-audit-preamble {
  max-width: 68ch;
  color: rgba(235, 232, 218, .72);
  line-height: 1.8;
}

.loop-audit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.loop-audit-field {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(225, 222, 204, .12);
  background:
    linear-gradient(125deg, color-mix(in srgb, var(--loop-ink) 5%, transparent), rgba(0, 0, 0, .21));
}

.loop-audit-field > span,
.loop-audit-field legend {
  color: rgba(245, 241, 224, .9);
  font: 500 15px/1.4 var(--serif);
}

.loop-audit-field small,
.loop-audit-field > p {
  margin: 0;
  color: rgba(220, 217, 202, .57);
  font-size: 12px;
  line-height: 1.55;
}

.loop-audit-field select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(225, 222, 204, .18);
  background: #101210;
  color: #e7e4d8;
  padding: 8px 10px;
}

.loop-audit-multi {
  margin: 0;
}

.loop-audit-multi > div {
  display: grid;
  gap: 7px;
}

.loop-audit-multi label {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid rgba(225, 222, 204, .09);
  cursor: pointer;
}

.loop-audit-multi input {
  margin: 3px 0 0;
  accent-color: var(--loop-ink);
}

.verdict-feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 132px;
  margin: 0 0 22px;
}

.verdict-feed i {
  height: 4px;
  background: var(--loop-ink);
  opacity: calc(.2 + var(--i, 1) * .1);
}

.verdict-feed span {
  grid-column: 1 / -1;
  color: var(--loop-ink);
  font-size: 10px;
  letter-spacing: .17em;
}

.loop-verdict-copy blockquote {
  margin: 18px 0 0;
  padding: 16px 18px;
  border-left: 2px solid var(--loop-ink);
  background: rgba(0, 0, 0, .3);
  color: rgba(242, 238, 221, .78);
  line-height: 1.75;
}

.loop-verdict-copy blockquote small {
  display: block;
  margin-bottom: 7px;
  color: var(--loop-ink);
}

.loop-result span:first-child {
  color: rgba(247, 243, 227, .95);
}

.ending-copy {
  max-width: 72ch;
  color: rgba(231, 228, 214, .72);
  line-height: 1.8;
}

.ending-history {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.ending-history h3 {
  margin: 0 0 5px;
  color: rgba(231, 228, 214, .55);
  font-size: 11px;
  letter-spacing: .15em;
  font-weight: 500;
}

.ending-history article {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 11px;
  padding: 10px 0;
  border-top: 1px solid rgba(225, 222, 204, .1);
}

.ending-history article > b {
  color: var(--loop-ink);
  font: 500 18px/1 var(--serif);
}

.ending-history strong {
  color: rgba(245, 241, 224, .86);
}

.ending-history p {
  margin: 4px 0 0;
  color: rgba(226, 223, 209, .54);
  font-size: 12px;
  line-height: 1.55;
}

.final-blue-ledger {
  display: grid;
  gap: 2px;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--loop-ink) 45%, transparent);
  background:
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(109, 151, 174, .045) 26px),
    rgba(7, 13, 16, .65);
}

.final-blue-ledger header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  color: var(--loop-ink);
}

.final-blue-ledger > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(146, 178, 194, .14);
}

.final-blue-ledger > div span {
  color: rgba(179, 200, 210, .58);
}

.final-blue-ledger > div strong {
  font-weight: 500;
  color: rgba(235, 240, 239, .88);
}

.final-blue-ledger blockquote {
  margin: 12px 0 0;
  padding: 13px 15px;
  border-left: 2px solid var(--loop-ink);
  color: rgba(225, 236, 238, .8);
  line-height: 1.75;
}

.danger-subtle {
  opacity: .58;
}

.danger-subtle:hover,
.danger-subtle:focus-visible {
  opacity: 1;
}

.loop-entry {
  border-left-color: var(--loop-ink);
}

.loop-arrival {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.watch-glass-shift {
  inset: 16% 21% 42% 54%;
  background:
    radial-gradient(ellipse at 58% 38%, rgba(2, 3, 3, .86) 0 7%, transparent 8%),
    linear-gradient(82deg, transparent 35%, rgba(1, 2, 2, .72) 48% 57%, transparent 72%);
  filter: blur(3px);
  opacity: 0;
  animation: watchShift 4.7s steps(6, end) both;
}

.premature-footprint {
  inset: auto 31% 12% 57%;
  height: 12%;
  border-radius: 55% 45% 48% 52%;
  background: rgba(5, 7, 7, .78);
  filter: blur(5px);
  transform: rotate(18deg);
  animation: footprintBefore 8.4s ease both;
}

.seventh-bag-breathe {
  inset: 13% 43% 47% 50%;
  border-radius: 45% 48% 52% 43%;
  background: rgba(3, 4, 3, .58);
  box-shadow: 0 0 38px rgba(0, 0, 0, .72);
  animation: bagBreathe 4.7s ease-in-out both;
}

.archive-seam-breathe {
  inset: 18% 24% 11% 62%;
  border-left: 2px solid rgba(224, 221, 200, .28);
  background: linear-gradient(90deg, rgba(0, 0, 0, .76), transparent 52%);
  filter: blur(1px);
  animation: seamOpen 4.7s steps(7, end) both;
}

.archive-call-pulse {
  inset: 27% 40% 54% 46%;
  border-radius: 50%;
  border: 1px solid rgba(151, 183, 198, .34);
  box-shadow:
    0 0 0 0 rgba(131, 165, 181, .28),
    0 0 34px rgba(0, 0, 0, .82);
  animation: callPulse 4.7s ease-out both;
}

.loop-scare {
  position: absolute;
  inset: 0;
  z-index: 33;
  pointer-events: none;
}

.name-erasure {
  background:
    linear-gradient(90deg, transparent 0 34%, rgba(1, 2, 2, .92) 44% 58%, transparent 69%);
  mix-blend-mode: multiply;
  animation: nameErase 4.3s steps(9, end) both;
}

.missing-object-silhouette {
  inset: 35% 38% 16% 43%;
  border: 1px solid rgba(207, 201, 180, .17);
  background: rgba(0, 0, 0, .78);
  filter: blur(3px);
  animation: objectGone 3.6s ease-out both;
}

.seven-second-shadow {
  inset: 8% 7% 5% 73%;
  background:
    radial-gradient(ellipse at 50% 19%, rgba(2, 3, 3, .88) 0 10%, transparent 11%),
    linear-gradient(84deg, transparent 25%, rgba(1, 2, 2, .9) 47% 59%, transparent 74%);
  filter: blur(1px);
  animation: delayedStep 3.2s steps(5, end) both;
}

.ledger-shadow-behind {
  background:
    radial-gradient(ellipse at 52% 105%, rgba(0, 0, 0, .95) 0 20%, transparent 47%);
  animation: behindRise 4.6s ease-in both;
}

.close-behind {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 14%, rgba(0, 0, 0, .98) 45%),
    linear-gradient(90deg, transparent 35%, rgba(0, 0, 0, .92) 48% 52%, transparent 65%);
  animation: closeBehind 1.05s steps(4, end) both;
}

@keyframes nameErase {
  0% { opacity: 0; transform: translateX(-22%); }
  24% { opacity: .78; }
  65% { opacity: .92; transform: translateX(16%); }
  100% { opacity: 0; transform: translateX(31%); }
}

@keyframes objectGone {
  0% { opacity: 0; transform: scale(.92); }
  18%, 74% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes delayedStep {
  0% { opacity: 0; transform: translateX(18px); }
  22% { opacity: .92; transform: translateX(0); }
  58% { opacity: .94; transform: translateX(-19px); }
  100% { opacity: 0; transform: translateX(-24px); }
}

@keyframes behindRise {
  0% { opacity: 0; transform: translateY(22%); }
  66% { opacity: .84; }
  100% { opacity: 0; transform: translateY(-8%); }
}

@keyframes closeBehind {
  0%, 25% { opacity: 0; transform: scale(1.15); }
  26%, 72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.96); }
}

@keyframes watchShift {
  0%, 14% { opacity: 0; transform: translateX(18%); }
  23%, 64% { opacity: .72; transform: translateX(0); }
  65% { opacity: .12; transform: translateX(-12%); }
  72% { opacity: .76; transform: translateX(7%); }
  100% { opacity: 0; transform: translateX(-20%); }
}

@keyframes footprintBefore {
  0%, 10% { opacity: 0; transform: rotate(18deg) scale(.7); }
  19%, 78% { opacity: .86; transform: rotate(18deg) scale(1); }
  100% { opacity: 0; transform: rotate(18deg) translateY(-18px); }
}

@keyframes bagBreathe {
  0%, 12% { opacity: 0; transform: scaleY(.92); }
  35% { opacity: .76; transform: scaleY(1.06); }
  58% { opacity: .48; transform: scaleY(.96); }
  77% { opacity: .72; transform: scaleY(1.03); }
  100% { opacity: 0; transform: scaleY(1); }
}

@keyframes seamOpen {
  0% { opacity: 0; transform: scaleX(.1); transform-origin: left; }
  22%, 74% { opacity: .82; transform: scaleX(1); transform-origin: left; }
  100% { opacity: 0; transform: scaleX(.4); transform-origin: left; }
}

@keyframes callPulse {
  0% { opacity: 0; box-shadow: 0 0 0 0 rgba(131, 165, 181, .28); }
  18% { opacity: 1; }
  62% { opacity: .45; box-shadow: 0 0 0 46px rgba(131, 165, 181, 0); }
  100% { opacity: 0; box-shadow: 0 0 0 74px rgba(131, 165, 181, 0); }
}

@media (max-width: 720px) {
  .loop-audit-fields {
    grid-template-columns: 1fr;
  }

  .final-blue-ledger > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .ending-actions {
    align-items: stretch;
  }
}

body.reduced-motion .name-erasure,
body.reduced-motion .watch-glass-shift,
body.reduced-motion .premature-footprint,
body.reduced-motion .seventh-bag-breathe,
body.reduced-motion .archive-seam-breathe,
body.reduced-motion .archive-call-pulse,
body.reduced-motion .missing-object-silhouette,
body.reduced-motion .seven-second-shadow,
body.reduced-motion .ledger-shadow-behind,
body.reduced-motion .close-behind {
  animation-duration: .12s !important;
}
/* Story-critical media: the tape, telephone and threshold are playable events,
   not prose pretending that a recording happened elsewhere. */
.recording-player {
  margin-top: clamp(1rem, 2.4vw, 1.75rem);
  border: 1px solid rgba(171, 159, 126, 0.36);
  background:
    linear-gradient(145deg, rgba(31, 32, 28, 0.97), rgba(10, 12, 11, 0.98)),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(255,255,255,.018) 13px 14px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), 0 16px 42px rgba(0, 0, 0, 0.32);
  padding: clamp(0.85rem, 2vw, 1.3rem);
}

.cassette-deck {
  position: relative;
  min-height: 9.5rem;
  border: 1px solid #514f45;
  background:
    linear-gradient(180deg, rgba(121, 118, 99, 0.1), transparent 26%),
    #171917;
  overflow: hidden;
}

.cassette-window {
  position: absolute;
  inset: 1.2rem 5.5rem 2.25rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: 1px solid #3c4039;
  border-radius: 0.3rem;
  background: #090b0a;
  box-shadow: inset 0 0 28px #000;
}

.cassette-reel {
  width: 3.6rem;
  aspect-ratio: 1;
  border: 0.55rem dotted #9b9278;
  border-radius: 50%;
  box-shadow: 0 0 0 0.25rem #252821, inset 0 0 0 0.28rem #080908;
}

.cassette-tape {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -0.55rem;
  height: 1.15rem;
  border-bottom: 0.25rem solid #65503d;
  border-radius: 50%;
  opacity: 0.78;
}

.recording-player.is-playing .cassette-reel.left {
  animation: cassette-spin 1.9s linear infinite reverse;
}

.recording-player.is-playing .cassette-reel.right {
  animation: cassette-spin 1.12s linear infinite;
}

.cassette-counter {
  position: absolute;
  right: 1.1rem;
  top: 1.1rem;
  min-width: 3.4rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid #454a3f;
  color: #c6c7a1;
  background: #080a08;
  font: 700 0.83rem/1 "Courier New", monospace;
  letter-spacing: 0.12em;
  text-align: center;
}

.cassette-label {
  position: absolute;
  right: 0.8rem;
  bottom: 1rem;
  max-width: 4rem;
  color: #aa9e7b;
  font-size: 0.66rem;
  line-height: 1.45;
  writing-mode: vertical-rl;
  letter-spacing: 0.08em;
}

.recording-controls {
  display: grid;
  grid-template-columns: minmax(8.5rem, auto) 1fr;
  align-items: center;
  gap: 0.8rem 1rem;
  margin-top: 0.85rem;
}

.recording-live-caption,
.ending-phone-replay p {
  margin: 0;
  min-height: 2.8em;
  color: #d5d0bd;
  font-size: 0.9rem;
  line-height: 1.55;
}

.recording-transcript {
  margin-top: 0.9rem;
  border-top: 1px solid rgba(171, 159, 126, 0.22);
  padding-top: 0.75rem;
}

.recording-transcript summary {
  cursor: pointer;
  color: #aaa58e;
  font-size: 0.82rem;
}

.recording-transcript ol {
  display: grid;
  gap: 0.5rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.recording-transcript li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed rgba(171, 159, 126, 0.14);
}

.recording-transcript li b {
  color: #9c7a65;
  font-weight: 600;
}

.threshold-cutscene {
  position: absolute;
  inset: 0;
  z-index: 24;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(81, 78, 63, 0.08), rgba(0, 0, 0, 0.58));
  animation: threshold-veil 5.2s ease both;
}

.threshold-seam {
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 5%;
  width: 1px;
  background: #8d8266;
  box-shadow: 0 0 18px 3px rgba(186, 174, 137, 0.22);
  transform-origin: center;
  animation: threshold-seam-open 4.8s cubic-bezier(.65,.02,.2,1) both;
}

.threshold-address,
.threshold-terminal {
  position: absolute;
  left: 50%;
  padding: 0.25rem 0.65rem;
  color: rgba(211, 204, 178, 0.74);
  background: rgba(8, 10, 9, 0.86);
  font-family: "Noto Serif TC", "PMingLiU", serif;
  letter-spacing: 0.24em;
  transform: translateX(-50%) scaleX(-1);
  opacity: 0;
}

.threshold-address {
  top: 40%;
  font-size: clamp(1rem, 2.8vw, 2.5rem);
  animation: threshold-writing 1.7s 0.65s steps(8, end) both;
}

.threshold-address.readable {
  top: 51%;
  transform: translateX(-50%);
  animation-delay: 2.05s;
}

.threshold-terminal {
  top: 66%;
  transform: translateX(-50%);
  color: #b78372;
  font: 0.72rem/1.5 "Courier New", monospace;
  animation: threshold-writing 1.5s 3.1s steps(15, end) both;
}

.fifth-footsteps-event {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fifth-footsteps-event::before {
  content: "";
  position: absolute;
  left: 7%;
  bottom: 6%;
  width: 32%;
  height: 72%;
  background: linear-gradient(105deg, transparent 35%, rgba(0, 0, 0, 0.62) 58%, transparent 72%);
  filter: blur(8px);
  transform-origin: left bottom;
  animation: footsteps-climb 4.7s cubic-bezier(.2,.6,.2,1) both;
}

.fifth-prop-shift {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fifth-prop-shift::before {
  content: "";
  position: absolute;
  left: 72%;
  top: 61%;
  width: 1.1%;
  aspect-ratio: .45;
  border: 1px solid rgba(198, 207, 191, .62);
  border-radius: 40% 40% 18% 18%;
  background: linear-gradient(90deg, rgba(209, 217, 198, .08), rgba(213, 221, 201, .28), transparent);
  box-shadow: 0 0 8px rgba(192, 203, 188, .22);
  animation: bottle-roll 3.2s cubic-bezier(.23,.74,.35,1) both;
}

.fifth-prop-shift::after {
  content: "";
  position: absolute;
  left: 65.2%;
  top: 62%;
  width: 4%;
  height: 2.4%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 24% 50%, rgba(6, 9, 8, .8) 0 28%, transparent 31%),
    radial-gradient(ellipse at 76% 50%, rgba(6, 9, 8, .8) 0 28%, transparent 31%);
  transform-origin: center;
  animation: shoes-turn 3.4s ease both;
}

.ending-call-cutscene {
  width: min(42rem, calc(100vw - 2rem));
  text-align: center;
  overflow: hidden;
}

.ending-call-visual {
  position: relative;
  height: clamp(12rem, 32vh, 18rem);
  margin: -1.2rem -1.2rem 1.4rem;
  background:
    radial-gradient(circle at 48% 45%, rgba(151, 143, 111, 0.12), transparent 44%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    #080a09;
}

.phone-handset {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 13rem;
  height: 3.3rem;
  border: 0.75rem solid #252923;
  border-left-width: 1.8rem;
  border-right-width: 1.8rem;
  border-radius: 3rem;
  box-shadow: 0 12px 22px #000;
  transform: translate(-50%, -50%) rotate(-8deg);
  animation: handset-tremor 7s ease-in-out infinite;
}

.phone-cord {
  position: absolute;
  left: 50%;
  top: 51%;
  width: 14rem;
  height: 5rem;
  border-bottom: 0.28rem solid #30342e;
  border-radius: 50%;
  transform: translateX(-30%) rotate(8deg);
}

.call-paper-feed {
  position: absolute;
  right: 5%;
  bottom: 5%;
  width: min(17rem, 45%);
  display: grid;
  gap: 0.55rem;
  padding: 0.8rem;
  border-top: 3px double #736d59;
  color: #bdb79d;
  background: #171914;
  font: 0.7rem/1.4 "Courier New", monospace;
  text-align: left;
  animation: call-paper-feed 6.8s steps(9, end) both;
}

.ending-call-caption {
  min-height: 3.4rem;
  margin: 1rem auto 1.3rem;
  max-width: 34rem;
  color: #d5d0bd;
  line-height: 1.7;
}

.ending-child-photo {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) 1fr;
  align-items: stretch;
  gap: 0;
  margin: 1.2rem 0;
  border: 1px solid rgba(166, 150, 115, 0.28);
  background: rgba(10, 12, 11, 0.72);
}

.ending-child-photo img {
  width: 100%;
  height: 8rem;
  object-fit: cover;
  object-position: center 34%;
  filter: sepia(.24) saturate(.72) contrast(1.08);
}

.ending-child-photo figcaption {
  display: grid;
  align-content: center;
  gap: 0.45rem;
  padding: 1rem 1.2rem;
  color: #aaa38c;
  text-align: left;
}

.ending-child-photo figcaption b {
  color: #c6a08e;
  letter-spacing: 0.08em;
}

.ending-phone-replay {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.8rem 1rem;
  margin: 1rem 0;
  padding: 0.8rem;
  border: 1px dashed rgba(171, 159, 126, 0.26);
}

@keyframes cassette-spin {
  to { transform: rotate(1turn); }
}

@keyframes threshold-veil {
  0% { opacity: 0; }
  10%, 82% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes threshold-seam-open {
  0% { transform: scaleY(.02); opacity: 0; }
  28% { transform: scaleY(1); opacity: 1; }
  72% { transform: scaleX(1); }
  100% { transform: scaleX(90); opacity: 0; }
}

@keyframes threshold-writing {
  0% { clip-path: inset(0 100% 0 0); opacity: 0; }
  15% { opacity: 1; }
  70% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes footsteps-climb {
  0% { transform: translate(-12%, 24%) skewX(-9deg); opacity: 0; }
  22% { opacity: .26; }
  67% { transform: translate(76%, -18%) skewX(5deg); opacity: .62; }
  100% { transform: translate(148%, -50%) scale(.55); opacity: 0; }
}

@keyframes bottle-roll {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  12% { opacity: 1; }
  74% { transform: translate(-25vw, 3.2vh) rotate(-510deg); opacity: 1; }
  100% { transform: translate(-29vw, 3.2vh) rotate(-620deg); opacity: 0; }
}

@keyframes shoes-turn {
  0%, 46% { transform: rotate(0); opacity: 0; }
  58% { opacity: .72; }
  100% { transform: rotate(-78deg); opacity: 0; }
}

@keyframes handset-tremor {
  0%, 9%, 13%, 52%, 56%, 100% { transform: translate(-50%, -50%) rotate(-8deg); }
  11%, 54% { transform: translate(-50%, -50%) rotate(-6deg); }
}

@keyframes call-paper-feed {
  from { transform: translateY(62%); opacity: 0; }
  18% { opacity: 1; }
  to { transform: translateY(0); opacity: 1; }
}

body.reduced-motion .recording-player.is-playing .cassette-reel,
body.reduced-motion .threshold-cutscene,
body.reduced-motion .threshold-seam,
body.reduced-motion .threshold-address,
body.reduced-motion .threshold-terminal,
body.reduced-motion .fifth-footsteps-event::before,
body.reduced-motion .fifth-prop-shift::before,
body.reduced-motion .fifth-prop-shift::after,
body.reduced-motion .phone-handset,
body.reduced-motion .call-paper-feed {
  animation: none !important;
}

body.reduced-motion .threshold-address,
body.reduced-motion .threshold-terminal {
  opacity: 0.92;
}

body.reduced-motion .fifth-prop-shift {
  display: none;
}

@media (max-width: 640px) {
  .recording-controls,
  .ending-phone-replay {
    grid-template-columns: 1fr;
  }

  .cassette-window {
    right: 4.5rem;
  }

  .recording-transcript li {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .ending-child-photo {
    grid-template-columns: 6rem 1fr;
  }
}