/*
 * Moonlight Photo Studio — close-up and evidence differentiation layer.
 * Loaded after game.css. Every rule is scoped to a close-up or an existing
 * puzzle component so the room, HUD and modal layout remain untouched.
 */

/* ========================================================================== */
/* Object close-ups                                                          */
/* ========================================================================== */

.object-closeup {
  --closeup-accent: var(--moon);
  --closeup-accent-hi: var(--moon-hi);
  --closeup-metal: #52636b;
  --closeup-surface: #1a282e;
  display: grid;
  width: min(980px, 100%);
  margin: 0 auto;
  min-height: 410px;
  grid-template-rows: minmax(300px, 1fr) auto;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #596b72;
  background: linear-gradient(145deg, #111b20, #071014);
  box-shadow: inset 0 0 0 7px #080e11, 0 7px 0 #94886b;
}

.object-closeup-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(300px, 48vh, 570px);
  place-items: center;
  overflow: hidden;
  border: 8px solid #111a20;
  outline: 1px solid #63757d;
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgb(255 255 255 / 4%) 50% 50.2%, transparent 50.4%),
    radial-gradient(circle at 38% 42%, rgb(121 190 197 / 15%), transparent 44%),
    linear-gradient(145deg, #2e3d44, #141e24 72%);
  box-shadow:
    inset 0 0 0 3px rgb(255 255 255 / 4%),
    inset 0 -40px 70px rgb(0 0 0 / 34%),
    0 7px 0 #8f856b;
}

.object-closeup-stage::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgb(0 0 0 / 8%) 3px 4px),
    linear-gradient(118deg, transparent 0 21%, rgb(255 255 255 / 7%) 21.2% 22%, transparent 22.2% 100%);
  content: "";
  opacity: 0.72;
}

.object-closeup[data-room="studio"] .object-closeup-stage {
  background:
    radial-gradient(circle at 35% 30%, rgb(121 190 197 / 22%), transparent 42%),
    linear-gradient(160deg, #394953, #18242b 70%);
}

.object-closeup[data-room="darkroom"] .object-closeup-stage {
  background:
    radial-gradient(circle at 35% 42%, rgb(159 37 41 / 22%), transparent 44%),
    linear-gradient(160deg, #3a2b2d, #171b20 72%);
}

.object-closeup[data-room="archive"] .object-closeup-stage {
  background:
    radial-gradient(circle at 35% 38%, rgb(209 168 78 / 16%), transparent 43%),
    linear-gradient(160deg, #3d3c35, #191d20 72%);
}

.object-closeup[data-scene="rain-window"] .object-closeup-stage {
  background:
    repeating-linear-gradient(104deg, transparent 0 29px, rgb(170 230 235 / 17%) 30px 32px, transparent 33px 57px),
    radial-gradient(circle at 78% 26%, rgb(219 239 221 / 28%), transparent 17%),
    linear-gradient(180deg, #172b34, #0b161c);
}

.object-closeup[data-scene="wood-drawer"] .object-closeup-stage,
.object-closeup[data-scene="ledger-shelf"] .object-closeup-stage,
.object-closeup[data-scene="leather-case"] .object-closeup-stage {
  background:
    repeating-linear-gradient(0deg, rgb(70 47 31 / 22%) 0 3px, transparent 4px 25px),
    linear-gradient(145deg, #5b402e, #1c2020);
}

.object-closeup[data-scene="paper-lightbox"] .object-closeup-stage,
.object-closeup[data-scene="contact-lightbox"] .object-closeup-stage,
.object-closeup[data-scene="registration-lighttable"] .object-closeup-stage {
  background:
    linear-gradient(45deg, transparent 47%, rgb(91 158 160 / 16%) 48% 50%, transparent 51%),
    linear-gradient(-45deg, transparent 47%, rgb(91 158 160 / 12%) 48% 50%, transparent 51%),
    #80928a;
  box-shadow: inset 0 0 70px rgb(18 58 62 / 38%), inset 0 0 0 3px rgb(255 255 255 / 6%), 0 7px 0 #8f856b;
}

.object-closeup[data-scene="red-darkroom-door"] .object-closeup-stage,
.object-closeup[data-scene="chemical-cabinet"] .object-closeup-stage,
.object-closeup[data-scene="drying-line"] .object-closeup-stage,
.object-closeup[data-scene="enlarger"] .object-closeup-stage,
.object-closeup[data-scene="enlarger-drawer"] .object-closeup-stage {
  background:
    radial-gradient(circle at 50% 46%, rgb(193 55 60 / 18%), transparent 50%),
    repeating-linear-gradient(90deg, #28181d 0 56px, #341b21 57px 59px);
}

.object-closeup[data-scene="photo-frame"] .object-closeup-stage {
  background: radial-gradient(ellipse at 50% 42%, #596261, #222c2f 58%, #080d0f);
}

.object-closeup[data-scene="camera-bench"] .object-closeup-stage,
.object-closeup[data-scene="process-reader"] .object-closeup-stage,
.object-closeup[data-scene="reel-recorder"] .object-closeup-stage {
  background:
    radial-gradient(ellipse at 50% 44%, rgb(209 168 78 / 13%), transparent 48%),
    repeating-linear-gradient(90deg, transparent 0 61px, rgb(121 190 197 / 4%) 62px 63px),
    linear-gradient(145deg, #25343a, #10191d);
}

.object-closeup[data-scene="false-wall"] .object-closeup-stage,
.object-closeup[data-scene="burnt-clock"] .object-closeup-stage {
  background:
    radial-gradient(circle at 28% 34%, rgb(0 0 0 / 50%), transparent 19%),
    radial-gradient(circle at 72% 65%, rgb(0 0 0 / 38%), transparent 23%),
    repeating-linear-gradient(90deg, #303538 0 31%, #191f22 32% 33%);
}

.object-closeup[data-scene="evidence-terminal"] .object-closeup-stage {
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgb(115 214 205 / 5%) 3px),
    radial-gradient(circle at 50% 40%, rgb(70 180 171 / 14%), transparent 48%),
    #061418;
}

.object-closeup[data-scene="film-box-net"] .object-closeup-stage,
.object-closeup[data-scene="suspect-files"] .object-closeup-stage {
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgb(88 80 58 / 9%) 28px 29px),
    #746f5f;
}

.object-closeup[data-scene="locker-thirteen"] .object-closeup-stage,
.object-closeup[data-scene="evidence-safe"] .object-closeup-stage,
.object-closeup[data-scene="emergency-exit"] .object-closeup-stage,
.object-closeup[data-scene="archive-darkroom-door"] .object-closeup-stage,
.object-closeup[data-scene="studio-door-back"] .object-closeup-stage {
  background:
    linear-gradient(90deg, transparent 0 48%, rgb(255 255 255 / 4%) 49% 50%, transparent 51%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 2%) 0 2px, transparent 3px 42px),
    linear-gradient(150deg, #374348, #151c20 76%);
}

.object-closeup-art {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(560px, 68%);
  height: min(360px, 78%);
  min-width: 0;
  min-height: 220px;
  place-items: center;
  padding: clamp(12px, 2.2vw, 28px);
  overflow: hidden;
}

.object-closeup-art::before {
  position: absolute;
  z-index: -1;
  right: 10%;
  bottom: 7%;
  left: 10%;
  height: 12%;
  border-radius: 50%;
  background: rgb(0 0 0 / 44%);
  filter: blur(18px);
  content: "";
  transform: perspective(240px) rotateX(62deg);
}

.object-closeup-art > svg,
.object-closeup-art > img,
.object-closeup-art > .object-closeup-svg {
  display: block;
  width: 100%;
  height: 100%;
  max-height: min(440px, 52vh);
  object-fit: contain;
  filter:
    drop-shadow(0 5px 1px rgb(0 0 0 / 48%))
    drop-shadow(0 18px 24px rgb(0 0 0 / 36%));
  transform-origin: 50% 84%;
}

.object-closeup-details {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.object-closeup-details::before {
  display: none;
}

.object-closeup-detail {
  position: absolute;
  top: calc(var(--fy) * 1%);
  left: calc(var(--fx) * 1%);
  display: grid;
  width: min(178px, 31%);
  min-width: 124px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--moc-accent, var(--closeup-accent)) 62%, #59666b);
  transform: translate(-50%, -50%);
  background: rgb(8 15 18 / 91%);
  color: #d9d4c5;
  box-shadow: 0 4px 0 rgb(0 0 0 / 35%), 0 9px 20px rgb(0 0 0 / 18%);
  text-align: left;
}

.object-closeup-detail::after {
  position: absolute;
  z-index: -1;
  top: 50%;
  width: 22px;
  height: 1px;
  background: color-mix(in srgb, var(--moc-accent, var(--closeup-accent)) 65%, transparent);
  content: "";
}

.object-closeup-detail:nth-child(odd)::after {
  right: 100%;
}

.object-closeup-detail:nth-child(even)::after {
  left: 100%;
}

.object-closeup-detail .moc__feature-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--moc-accent, var(--closeup-accent));
  border-radius: 50%;
  color: var(--moc-accent, var(--closeup-accent));
  font: 900 0.72rem/1 var(--mono);
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--moc-accent, var(--closeup-accent)) 16%, transparent);
}

.object-closeup-detail strong,
.object-closeup-detail small {
  display: block;
  min-width: 0;
  margin: 0;
}

.object-closeup-detail strong {
  color: #f3e5b8;
  font: 800 0.7rem/1.28 var(--sans);
}

.object-closeup-detail small {
  margin-top: 2px;
  color: #9faeb0;
  font: 650 0.59rem/1.35 var(--sans);
}

.object-closeup-caption {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0.72rem 0.85rem 0.72rem 1.1rem;
  border: 1px solid #53666d;
  background: linear-gradient(90deg, rgb(121 190 197 / 8%), transparent 42%), #142229;
  color: var(--paper);
  box-shadow: 0 3px 0 #080e11;
  line-height: 1.45;
}

.object-closeup-caption::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: var(--moc-accent, var(--closeup-accent));
  content: "";
}

.object-closeup-caption > span {
  color: var(--moc-accent, var(--closeup-accent));
  font: 800 0.64rem/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.object-closeup-caption > strong {
  min-width: 0;
  color: #f0dfad;
  font: 800 clamp(0.76rem, 1.5vw, 0.9rem)/1.4 var(--sans);
  text-align: right;
}

/* Object-specific presentation: art remains the source of truth; these rules
   only tune scale, material lighting and inspection accent. */
.object-closeup[data-object="window"],
.object-closeup[data-object="contactTable"],
.object-closeup[data-object="lightTable"] {
  --closeup-accent: #79bec5;
  --closeup-accent-hi: #b5eeee;
}

.object-closeup[data-object="portrait"],
.object-closeup[data-object="filmBox"],
.object-closeup[data-object="ledgerShelf"],
.object-closeup[data-object="cameraBag"] {
  --closeup-accent: #d1a84e;
  --closeup-accent-hi: #f0ce72;
}

.object-closeup[data-object="chemicalCabinet"],
.object-closeup[data-object="falseWall"],
.object-closeup[data-object="evidenceSafe"],
.object-closeup[data-object="enlargerDrawer"] {
  --closeup-accent: #b94748;
  --closeup-accent-hi: #ea7470;
}

.object-closeup[data-object="clock"] .object-closeup-art > :where(svg, img),
.object-closeup[data-object="portrait"] .object-closeup-art > :where(svg, img),
.object-closeup[data-object="recorder"] .object-closeup-art > :where(svg, img) {
  width: min(74%, 440px);
}

.object-closeup[data-object="cameraBag"] .object-closeup-art > :where(svg, img),
.object-closeup[data-object="enlargerDrawer"] .object-closeup-art > :where(svg, img) {
  width: min(88%, 570px);
}

.object-closeup[data-object="darkroomDoor"] .object-closeup-art > :where(svg, img),
.object-closeup[data-object="studioDoor"] .object-closeup-art > :where(svg, img),
.object-closeup[data-object="exitDoor"] .object-closeup-art > :where(svg, img),
.object-closeup[data-object="chemicalCabinet"] .object-closeup-art > :where(svg, img),
.object-closeup[data-object="terminal"] .object-closeup-art > :where(svg, img) {
  width: min(58%, 360px);
  max-height: 440px;
}

.object-closeup[data-object="deskDrawer"] .object-closeup-art > :where(svg, img),
.object-closeup[data-object="ledgerShelf"] .object-closeup-art > :where(svg, img),
.object-closeup[data-object="contactTable"] .object-closeup-art > :where(svg, img),
.object-closeup[data-object="processRack"] .object-closeup-art > :where(svg, img),
.object-closeup[data-object="sink"] .object-closeup-art > :where(svg, img),
.object-closeup[data-object="filmBox"] .object-closeup-art > :where(svg, img),
.object-closeup[data-object="lightTable"] .object-closeup-art > :where(svg, img) {
  width: min(96%, 680px);
}

.object-closeup[data-object="window"] .object-closeup-art::after,
.object-closeup[data-object="contactTable"] .object-closeup-art::after,
.object-closeup[data-object="lightTable"] .object-closeup-art::after {
  position: absolute;
  z-index: 2;
  inset: 9% 7%;
  pointer-events: none;
  background: linear-gradient(118deg, transparent 0 42%, rgb(197 241 240 / 13%) 43% 47%, transparent 48%);
  content: "";
}

.object-closeup[data-object="camera"] .object-closeup-art,
.object-closeup[data-object="enlarger"] .object-closeup-art,
.object-closeup[data-object="recorder"] .object-closeup-art {
  background: radial-gradient(circle at 48% 48%, rgb(240 206 114 / 10%), transparent 48%);
}

.object-closeup[data-object="dryingLine"] .object-closeup-art,
.object-closeup[data-object="reservations"] .object-closeup-art,
.object-closeup[data-object="locker13"] .object-closeup-art,
.object-closeup[data-object="suspectFiles"] .object-closeup-art {
  align-items: start;
}

@keyframes closeup-settle {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
}

/* ========================================================================== */
/* Torn contact prints: six visibly distinct physical fragments              */
/* ========================================================================== */

.contact-lightbox .fragment-slot[data-piece] {
  --fragment-ink: #83b7b7;
  --fragment-warm: #b8aa78;
  --fragment-line-x: 46%;
  --fragment-line-y: 54%;
  border-style: solid;
}

.contact-lightbox .fragment-slot[data-piece] .fragment-art {
  filter: none;
  background:
    radial-gradient(circle at var(--fragment-line-x) var(--fragment-line-y), #c9c8b1 0 7%, transparent 7.5%),
    linear-gradient(90deg, transparent 0 10%, rgb(225 220 190 / 13%) 10.5% 12%, transparent 12.5% 88%, rgb(10 17 19 / 30%) 88.5% 90%, transparent 90.5%),
    linear-gradient(var(--fragment-angle, 136deg), transparent 0 45%, var(--fragment-ink) 45.5% 48%, transparent 48.5%),
    linear-gradient(18deg, transparent 0 69%, color-mix(in srgb, var(--fragment-warm) 52%, transparent) 69.5% 72%, transparent 72.5%),
    #26383b;
  box-shadow: inset 0 0 0 1px rgb(237 226 190 / 12%);
}

.contact-lightbox .fragment-slot[data-piece] .fragment-art::before,
.contact-lightbox .fragment-slot[data-piece] .fragment-art::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.contact-lightbox .fragment-slot[data-piece] .fragment-art::before {
  inset: 12% 9%;
  border: 1px solid rgb(226 222 194 / 20%);
  background:
    repeating-linear-gradient(90deg, rgb(222 210 166 / 21%) 0 2px, transparent 2px 16px) top / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, rgb(222 210 166 / 18%) 0 2px, transparent 2px 16px) bottom / 100% 4px no-repeat;
}

.contact-lightbox .fragment-slot[data-piece] .fragment-art::after {
  width: 34%;
  height: 42%;
  border: 2px solid var(--fragment-warm);
  opacity: 0.42;
}

.contact-lightbox .fragment-slot[data-piece="fragment_a"] .fragment-art {
  --fragment-angle: 128deg;
  --fragment-line-x: 28%;
  --fragment-line-y: 35%;
  --fragment-ink: #78b2ad;
  --fragment-warm: #c2a85c;
  clip-path: polygon(2% 2%, 86% 0, 100% 16%, 94% 72%, 100% 96%, 50% 89%, 0 100%, 7% 38%);
  transform: rotate(1.4deg);
}

.contact-lightbox .fragment-slot[data-piece="fragment_a"] .fragment-art::after { top: 18%; left: 12%; }

.contact-lightbox .fragment-slot[data-piece="fragment_b"] .fragment-art {
  --fragment-angle: 42deg;
  --fragment-line-x: 72%;
  --fragment-line-y: 31%;
  --fragment-ink: #a4a877;
  --fragment-warm: #8eb7b1;
  clip-path: polygon(0 12%, 21% 1%, 77% 6%, 100% 0, 91% 43%, 100% 86%, 73% 100%, 5% 92%);
  transform: rotate(-1.6deg);
}

.contact-lightbox .fragment-slot[data-piece="fragment_b"] .fragment-art::after { top: 13%; right: 9%; border-radius: 50%; }

.contact-lightbox .fragment-slot[data-piece="fragment_c"] .fragment-art {
  --fragment-angle: 164deg;
  --fragment-line-x: 61%;
  --fragment-line-y: 68%;
  --fragment-ink: #8b9dbc;
  --fragment-warm: #c0a369;
  clip-path: polygon(4% 0, 49% 8%, 92% 1%, 100% 31%, 88% 57%, 99% 100%, 39% 92%, 0 100%, 8% 49%);
  transform: rotate(0.8deg);
}

.contact-lightbox .fragment-slot[data-piece="fragment_c"] .fragment-art::after { right: 14%; bottom: 12%; transform: rotate(45deg); }

.contact-lightbox .fragment-slot[data-piece="fragment_d"] .fragment-art {
  --fragment-angle: 76deg;
  --fragment-line-x: 36%;
  --fragment-line-y: 70%;
  --fragment-ink: #9f8fac;
  --fragment-warm: #88ada3;
  clip-path: polygon(0 4%, 41% 0, 73% 10%, 100% 2%, 94% 61%, 100% 93%, 61% 100%, 13% 88%);
  transform: rotate(-0.9deg);
}

.contact-lightbox .fragment-slot[data-piece="fragment_d"] .fragment-art::after { bottom: 10%; left: 13%; border-radius: 50% 50% 8px 8px; }

.contact-lightbox .fragment-slot[data-piece="fragment_e"] .fragment-art {
  --fragment-angle: 112deg;
  --fragment-line-x: 77%;
  --fragment-line-y: 56%;
  --fragment-ink: #7aa1b1;
  --fragment-warm: #b99f68;
  clip-path: polygon(8% 0, 59% 5%, 100% 0, 90% 38%, 100% 71%, 91% 100%, 44% 92%, 0 98%, 9% 45%);
  transform: rotate(2deg);
}

.contact-lightbox .fragment-slot[data-piece="fragment_e"] .fragment-art::after { top: 26%; right: 7%; width: 22%; height: 52%; }

.contact-lightbox .fragment-slot[data-piece="fragment_f"] .fragment-art {
  --fragment-angle: 22deg;
  --fragment-line-x: 25%;
  --fragment-line-y: 57%;
  --fragment-ink: #a99178;
  --fragment-warm: #83aaa7;
  clip-path: polygon(0 9%, 31% 0, 69% 9%, 100% 3%, 92% 48%, 100% 91%, 67% 100%, 19% 91%, 4% 100%);
  transform: rotate(-2.2deg);
}

.contact-lightbox .fragment-slot[data-piece="fragment_f"] .fragment-art::after { bottom: 18%; left: 7%; width: 45%; height: 25%; }

/* ========================================================================== */
/* Process plates: material and residue identify each physical plate          */
/* ========================================================================== */

.process-slot .plate-art[data-plate] {
  overflow: hidden;
  filter: none;
  transition: transform 140ms ease, filter 140ms ease;
}

.process-slot:hover .plate-art[data-plate] {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.process-slot .plate-art[data-plate]::after {
  position: absolute;
  inset: 14px 8px 9px;
  border: 1px solid rgb(255 255 255 / 12%);
  content: "";
}

.process-slot .plate-art[data-plate="plate_developer"] {
  border-color: #94773b;
  background:
    radial-gradient(circle at 26% 76%, #d6bd69 0 4%, transparent 4.5%),
    radial-gradient(circle at 69% 62%, #d6bd69 0 3%, transparent 3.5%),
    linear-gradient(0deg, rgb(153 116 39 / 78%) 0 68%, transparent 69%),
    linear-gradient(130deg, transparent 36%, rgb(255 242 181 / 18%) 37% 41%, transparent 42%),
    #493c25;
}

.process-slot .plate-art[data-plate="plate_stop"] {
  border-color: #a45147;
  background:
    repeating-linear-gradient(0deg, transparent 0 11px, rgb(238 116 93 / 18%) 12px 14px),
    linear-gradient(0deg, rgb(126 46 42 / 82%) 0 42%, transparent 43%),
    linear-gradient(130deg, transparent 36%, rgb(255 221 196 / 17%) 37% 41%, transparent 42%),
    #4a2e2d;
}

.process-slot .plate-art[data-plate="plate_fixer"] {
  border-color: #6f917d;
  background:
    linear-gradient(55deg, transparent 0 44%, rgb(179 222 190 / 27%) 45% 47%, transparent 48%),
    linear-gradient(125deg, transparent 0 55%, rgb(179 222 190 / 19%) 56% 58%, transparent 59%),
    linear-gradient(0deg, rgb(61 104 86 / 78%) 0 59%, transparent 60%),
    #2c453c;
}

.process-slot .plate-art[data-plate="plate_wash"] {
  border-color: #4f88a2;
  background:
    radial-gradient(ellipse at 50% 104%, transparent 0 36%, rgb(111 191 216 / 34%) 37% 40%, transparent 41% 52%, rgb(111 191 216 / 22%) 53% 56%, transparent 57%),
    linear-gradient(0deg, rgb(49 105 129 / 72%) 0 53%, transparent 54%),
    linear-gradient(130deg, transparent 36%, rgb(213 243 255 / 18%) 37% 41%, transparent 42%),
    #29434e;
}

/* ========================================================================== */
/* Enlarger negatives: each frame now depicts a different photographed scene */
/* ========================================================================== */

.projection .projection-scene[data-frame] {
  transition: filter 140ms ease, opacity 140ms ease;
}

.projection .projection-scene[data-frame]::before,
.projection .projection-scene[data-frame]::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.projection .projection-scene[data-frame="negative_a"] {
  background:
    linear-gradient(90deg, transparent 0 13%, rgb(28 39 40 / 67%) 13.5% 20%, transparent 20.5% 75%, rgb(30 42 43 / 55%) 75.5% 83%, transparent 83.5%),
    linear-gradient(0deg, rgb(32 43 43 / 58%) 0 22%, transparent 22.5%),
    radial-gradient(ellipse at 46% 44%, #aeb5a8, #626b67 58%, #232d2d);
}

.projection .projection-scene[data-frame="negative_a"]::before {
  right: 28%;
  bottom: 19%;
  width: 34%;
  height: 21%;
  border: 6px solid #424d4b;
  border-top-width: 10px;
  background: #777e74;
  box-shadow: 0 9px 0 rgb(30 39 39 / 55%);
}

.projection .projection-scene[data-frame="negative_b"] {
  background:
    linear-gradient(90deg, transparent 0 9%, rgb(30 41 42 / 68%) 9.5% 17%, transparent 17.5% 81%, rgb(28 39 40 / 55%) 81.5% 89%, transparent 89.5%),
    radial-gradient(ellipse at 72% 43%, #c5c6b5, #69716b 48%, #222c2c 80%);
}

.projection .projection-scene[data-frame="negative_b"]::before {
  right: 18%;
  bottom: 0;
  width: 22%;
  height: 76%;
  border-radius: 46% 46% 10% 10% / 17% 17% 6% 6%;
  background:
    radial-gradient(circle at 50% 11%, #3b4341 0 11%, transparent 12%),
    linear-gradient(90deg, transparent 0 8%, #303a39 9% 91%, transparent 92%);
  opacity: 0.82;
}

.projection .projection-scene[data-frame="negative_b"]::after {
  top: 12%;
  right: 5%;
  width: 15%;
  height: 68%;
  border: 5px solid #4b5754;
  border-right: 0;
}

.projection .projection-scene[data-frame="negative_c"] {
  background:
    linear-gradient(90deg, transparent 0 11%, rgb(27 38 39 / 64%) 11.5% 18%, transparent 18.5% 79%, rgb(35 46 46 / 50%) 79.5% 87%, transparent 87.5%),
    radial-gradient(ellipse at 65% 43%, #c4c2ad, #6c736d 54%, #252e2e 82%);
}

.projection .projection-scene[data-frame="negative_c"]::after {
  top: 16%;
  left: 9%;
  width: 18%;
  height: 56%;
  border: 5px solid #4a5654;
  background: linear-gradient(90deg, #2e3938 0 9%, transparent 10% 90%, #2e3938 91%);
}

.projection .projection-scene[data-frame="negative_d"] {
  background:
    radial-gradient(ellipse at 32% 15%, rgb(47 54 52 / 88%), transparent 30%),
    radial-gradient(ellipse at 66% 8%, rgb(53 59 56 / 78%), transparent 34%),
    linear-gradient(0deg, rgb(35 43 42 / 47%) 0 19%, transparent 19.5%),
    radial-gradient(ellipse at 50% 46%, #8f978e, #545d59 58%, #202929);
}

.projection .projection-scene[data-frame="negative_d"]::before {
  top: -8%;
  left: 8%;
  width: 84%;
  height: 48%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 23% 54%, rgb(37 43 42 / 83%) 0 15%, transparent 16%),
    radial-gradient(ellipse at 48% 42%, rgb(43 48 46 / 78%) 0 19%, transparent 20%),
    radial-gradient(ellipse at 74% 61%, rgb(35 41 40 / 74%) 0 17%, transparent 18%);
  filter: blur(9px);
}

.projection.is-blurred .projection-scene[data-frame]::before,
.projection.is-blurred .projection-scene[data-frame]::after {
  opacity: 0.62;
}

.projection.target-negative.is-focused {
  box-shadow:
    inset 0 0 70px rgb(0 0 0 / 38%),
    0 0 0 2px rgb(121 190 197 / 28%),
    0 6px 0 #8e846a;
}

/* ========================================================================== */
/* Registration films: identity follows the film, not the occupied slot       */
/* ========================================================================== */

.registration-table .film-layer[data-film] {
  --film-ink: #7a8d8e;
  color: var(--film-ink);
}

.registration-table .film-layer[data-film]::before {
  border-color: var(--film-ink);
  background:
    radial-gradient(circle at var(--film-dot-1, 24% 32%), var(--film-ink) 0 3px, transparent 3.5px),
    radial-gradient(circle at var(--film-dot-2, 66% 58%), var(--film-ink) 0 3px, transparent 3.5px),
    linear-gradient(var(--film-trace-angle, 140deg), transparent 0 43%, var(--film-ink) 44% 46%, transparent 47%),
    repeating-linear-gradient(90deg, transparent 0 18px, color-mix(in srgb, var(--film-ink) 18%, transparent) 18px 20px),
    rgb(55 109 113 / 9%);
}

.registration-table .film-layer[data-film="registration_film_a"] {
  --film-ink: #b64f53;
  --film-dot-1: 21% 29%;
  --film-dot-2: 69% 63%;
  --film-trace-angle: 132deg;
}

.registration-table .film-layer[data-film="registration_film_b"] {
  --film-ink: #417fa3;
  --film-dot-1: 30% 68%;
  --film-dot-2: 74% 27%;
  --film-trace-angle: 48deg;
}

.registration-table .film-layer[data-film="registration_film_c"] {
  --film-ink: #93803f;
  --film-dot-1: 18% 51%;
  --film-dot-2: 61% 39%;
  --film-trace-angle: 168deg;
}

.registration-table .film-layer[data-film] .film-sheet {
  overflow: hidden;
  border-color: var(--film-ink);
  background:
    linear-gradient(var(--film-trace-angle), transparent 42%, var(--film-ink) 43% 47%, transparent 48%),
    repeating-linear-gradient(90deg, transparent 0 11px, color-mix(in srgb, var(--film-ink) 23%, transparent) 11px 13px),
    rgb(13 30 34 / 92%);
}

.registration-table .film-layer[data-film] .film-sheet::before {
  position: absolute;
  top: 5px;
  left: 7px;
  color: var(--paper-hi);
  content: "";
  font: 900 0.58rem/1 var(--mono);
}

.registration-table .film-layer[data-film="registration_film_a"] .film-sheet::before { content: "A"; }
.registration-table .film-layer[data-film="registration_film_b"] .film-sheet::before { content: "B"; }
.registration-table .film-layer[data-film="registration_film_c"] .film-sheet::before { content: "C"; }

.registration-table > .empty-film-slot[data-slot="a"] { border-color: rgb(182 79 83 / 58%); }
.registration-table > .empty-film-slot[data-slot="b"] { border-color: rgb(65 127 163 / 58%); }
.registration-table > .empty-film-slot[data-slot="c"] { border-color: rgb(147 128 63 / 58%); }

.film-composite-puzzle.light-on .registration-table .film-layer[data-film]::before {
  opacity: 0.56;
  filter: contrast(1.08) saturate(1.08);
}

/* ========================================================================== */
/* Suspect portraits: four distinct physical silhouettes and clothing cues   */
/* ========================================================================== */

.suspect-silhouette[data-suspect] {
  --portrait-bg: #6e7872;
  --portrait-coat: #465250;
  --portrait-skin: #99917f;
  --portrait-hair: #323a39;
  filter: none;
  background:
    radial-gradient(circle at 50% 31%, var(--portrait-skin) 0 15%, transparent 15.7%),
    radial-gradient(ellipse at 50% 106%, var(--portrait-coat) 0 53%, transparent 53.7%),
    linear-gradient(145deg, #243238, var(--portrait-bg));
}

.suspect-silhouette[data-suspect]::before,
.suspect-silhouette[data-suspect]::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.suspect-silhouette[data-suspect="park"] {
  --portrait-bg: #7b7567;
  --portrait-coat: #4d5c59;
  --portrait-skin: #a29985;
  --portrait-hair: #41443f;
}

.suspect-silhouette[data-suspect="park"]::before {
  top: 13%;
  left: 34%;
  width: 32%;
  height: 18%;
  border-radius: 55% 55% 18% 18%;
  background: linear-gradient(165deg, var(--portrait-hair) 0 60%, transparent 61%);
  box-shadow: -8px 25px 0 -6px #686a60, 8px 25px 0 -6px #686a60;
}

.suspect-silhouette[data-suspect="park"]::after {
  right: 20%;
  bottom: 7%;
  left: 20%;
  height: 41%;
  border: 2px solid rgb(225 214 179 / 32%);
  border-top: 6px solid #887958;
  background: linear-gradient(90deg, transparent 47%, #847550 48% 52%, transparent 53%);
}

.suspect-silhouette[data-suspect="seoa"] {
  --portrait-bg: #718486;
  --portrait-coat: #6d6a65;
  --portrait-skin: #aaa18d;
  --portrait-hair: #252d2d;
}

.suspect-silhouette[data-suspect="seoa"]::before {
  top: 11%;
  left: 29%;
  width: 42%;
  height: 34%;
  border-radius: 50% 50% 36% 36%;
  background:
    radial-gradient(circle at 50% 52%, transparent 0 34%, var(--portrait-hair) 35% 66%, transparent 67%),
    linear-gradient(var(--portrait-hair), var(--portrait-hair));
  clip-path: polygon(4% 0, 96% 0, 88% 100%, 67% 72%, 50% 88%, 32% 72%, 12% 100%);
}

.suspect-silhouette[data-suspect="seoa"]::after {
  right: 18%;
  bottom: 10%;
  left: 18%;
  height: 35%;
  background:
    linear-gradient(55deg, transparent 0 44%, #d8d1bc 45% 50%, transparent 51%) left / 50% 100% no-repeat,
    linear-gradient(-55deg, transparent 0 44%, #d8d1bc 45% 50%, transparent 51%) right / 50% 100% no-repeat;
}

.suspect-silhouette[data-suspect="nam"] {
  --portrait-bg: #6b6660;
  --portrait-coat: #313a3b;
  --portrait-skin: #9b907c;
  --portrait-hair: #202728;
}

.suspect-silhouette[data-suspect="nam"]::before {
  top: 10%;
  left: 31%;
  width: 38%;
  height: 20%;
  border-radius: 52% 52% 20% 20%;
  transform: skewX(-12deg);
  background: linear-gradient(155deg, var(--portrait-hair) 0 71%, transparent 72%);
  box-shadow: 13px 45px 0 -9px #c1a551;
}

.suspect-silhouette[data-suspect="nam"]::after {
  right: 13%;
  bottom: 0;
  left: 13%;
  height: 52%;
  background:
    linear-gradient(90deg, transparent 0 47%, #a99a75 48% 52%, transparent 53%),
    linear-gradient(120deg, transparent 0 31%, #4b5555 32% 37%, transparent 38%) left / 50% 100% no-repeat,
    linear-gradient(-120deg, transparent 0 31%, #4b5555 32% 37%, transparent 38%) right / 50% 100% no-repeat;
}

.suspect-silhouette[data-suspect="choi"] {
  --portrait-bg: #697170;
  --portrait-coat: #59615e;
  --portrait-skin: #978f7e;
  --portrait-hair: #414947;
}

.suspect-silhouette[data-suspect="choi"]::before {
  top: 10%;
  left: 28%;
  width: 44%;
  height: 18%;
  border-radius: 50% 50% 10% 10%;
  background: #525b59;
  box-shadow: 11px 5px 0 -2px #525b59;
}

.suspect-silhouette[data-suspect="choi"]::after {
  right: 8%;
  bottom: 3%;
  width: 6px;
  height: 55%;
  border-radius: 4px 4px 0 0;
  transform: rotate(-7deg);
  transform-origin: bottom;
  background: #766342;
  box-shadow: 0 -4px 0 2px #b59a58;
}

.suspect-choice.is-selected .suspect-silhouette[data-suspect] {
  outline-color: var(--safelight);
  box-shadow: 2px 3px 0 #a89e85, 0 0 0 3px rgb(159 37 41 / 22%);
}

/* ========================================================================== */
/* Responsive and reduced-motion                                             */
/* ========================================================================== */

@media (max-width: 720px) {
  .object-closeup {
    min-height: 0;
    padding: 8px;
  }

  .object-closeup-stage {
    min-height: 340px;
  }

  .object-closeup-art {
    width: min(68%, 420px);
    height: min(260px, 68%);
    min-height: 200px;
    padding: 12px;
  }

  .object-closeup-art > svg,
  .object-closeup-art > img,
  .object-closeup-art > .object-closeup-svg {
    max-height: 300px;
  }

  .object-closeup-detail {
    width: min(132px, 34%);
    min-width: 108px;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 5px;
    padding: 5px 6px;
  }

  .object-closeup-detail .moc__feature-icon {
    width: 26px;
    height: 26px;
    font-size: 0.64rem;
  }

  .object-closeup-caption {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .object-closeup-caption > strong {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .object-closeup-stage {
    min-height: 310px;
  }

  .object-closeup-art {
    width: 62%;
    min-height: 180px;
  }

  .object-closeup-detail {
    width: 104px;
    min-width: 0;
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .object-closeup-detail .moc__feature-icon {
    width: 24px;
    height: 24px;
  }

  .object-closeup-detail strong {
    font-size: 0.61rem;
  }

  .object-closeup-detail small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .object-closeup-art > svg,
  .object-closeup-art > img,
  .object-closeup-art > .object-closeup-svg,
  .process-slot .plate-art[data-plate],
  .projection .projection-scene[data-frame],
  .registration-table .film-layer[data-film]::before {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

.reduced-motion .object-closeup-art > svg,
.reduced-motion .object-closeup-art > img,
.reduced-motion .object-closeup-art > .object-closeup-svg,
.reduced-motion .process-slot .plate-art[data-plate],
.reduced-motion .projection .projection-scene[data-frame],
.reduced-motion .registration-table .film-layer[data-film]::before {
  animation: none !important;
  transition-duration: 0.01ms !important;
}
/* ========================================================================== */
/* Close-up integration: physical object at left, live device at right        */
/* ========================================================================== */

.object-device-layout {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(320px, 0.92fr) minmax(310px, 1.08fr);
  align-items: stretch;
  gap: 14px;
}

.object-device-visual,
.object-device-panel {
  min-width: 0;
}

.object-device-visual {
  display: grid;
  align-content: stretch;
}

.object-device-visual .object-closeup {
  min-height: 100%;
  margin: 0;
}

.object-device-panel {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: clamp(12px, 2vw, 22px);
  border: 1px solid #5b6d72;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 2.5%) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(180deg, #243138, #151f24);
  box-shadow: inset 0 0 0 5px #0e171b, 0 6px 0 #8d836b;
}

.object-device-panel > :only-child,
.object-device-panel > .physical-lock,
.object-device-panel > .drawer-contents,
.object-device-panel > .empty-drawer,
.object-device-panel > .empty-file-rack,
.object-device-panel > .fragment-source-panel,
.object-device-panel > .door-control-panel {
  width: 100%;
}

.object-observation {
  max-width: 820px;
  margin: 10px auto 0;
  padding: 10px 12px;
  border-left: 4px solid var(--moc-accent, #79bebf);
  background: #e3dcc5;
  color: #3f433e;
  font-size: 0.76rem;
  line-height: 1.65;
  text-align: left;
}

.object-atmosphere-view {
  width: min(960px, 100%);
  margin: 0 auto;
}

.object-device-panel > .fragment-source-panel,
.object-device-panel > .door-control-panel {
  display: grid;
  align-content: center;
  gap: 14px;
  min-height: 210px;
  padding: 18px;
  border: 1px solid #5b6e74;
  background: #17252b;
  color: #d8d1bd;
  text-align: left;
}

.object-device-panel > .fragment-source-panel p,
.object-device-panel > .door-control-panel p {
  margin: 0;
  line-height: 1.7;
}

.object-device-panel > .fragment-source-panel::before {
  display: grid;
  width: 78px;
  height: 58px;
  place-items: center;
  border: 2px solid #908469;
  clip-path: polygon(3% 7%, 86% 0, 100% 19%, 91% 78%, 100% 96%, 52% 89%, 0 100%, 8% 39%);
  background:
    linear-gradient(135deg, transparent 0 43%, rgb(44 83 86 / 55%) 44% 48%, transparent 49%),
    #d2c8aa;
  box-shadow: 4px 5px 0 rgb(0 0 0 / 28%);
  color: #38474a;
  content: "찢긴 인화지";
  font: 800 0.56rem/1.2 var(--mono);
}

.object-device-panel > .fragment-source-panel[data-fragment-source="fragment_b"]::before {
  clip-path: polygon(0 12%, 20% 1%, 78% 6%, 100% 0, 91% 44%, 100% 86%, 72% 100%, 5% 92%);
  filter: saturate(0.72) brightness(0.92);
}

.object-device-panel > .fragment-source-panel[data-fragment-source="fragment_c"]::before {
  clip-path: polygon(4% 0, 49% 8%, 92% 1%, 100% 31%, 88% 57%, 99% 100%, 39% 92%, 0 100%, 8% 49%);
  transform: rotate(-3deg);
}

.object-device-panel > .door-control-panel.is-open {
  border-color: #70bfb8;
  box-shadow: inset 5px 0 #70bfb8;
}

.camera-puzzle .camera-status {
  display: block;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #435961;
  background: #0e191e;
  color: #8ed5cc;
  font: 750 0.7rem/1.5 var(--mono);
}

.camera-puzzle .camera-status:empty {
  visibility: hidden;
}

.reservation-viewer,
.registration-table {
  transition: background-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.camera-puzzle .camera-lens > i {
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1), border-color 180ms ease;
}

.film-composite-puzzle.light-on .registration-table,
.reservation-puzzle.light-on .reservation-viewer {
  animation: none;
}

@keyframes local-light-warmup {
  0% { filter: brightness(0.72); }
  55% { filter: brightness(1.16); }
  100% { filter: brightness(1); }
}

/* The close-up wrapper carries the same physical state as the room prop. */
.object-closeup.is-open .moon-world-art .art-closed,
.object-closeup.is-installed .moon-world-art .art-empty,
.object-closeup.is-active .moon-world-art .art-idle {
  display: none;
}

.object-closeup.is-open .moon-world-art .art-open,
.object-closeup.is-installed .moon-world-art .art-installed,
.object-closeup.is-active .moon-world-art .art-active {
  display: inline;
}

/* Each lock now reads as part of its physical object instead of one reused box. */
.object-device-panel .physical-lock {
  min-height: 0;
  padding: 12px;
  border-width: 5px;
}

.physical-lock[data-lock="desk"] {
  border-color: #6e4a2c;
  background: repeating-linear-gradient(0deg, #69492f 0 4px, #5a3e2b 5px 19px);
}

.physical-lock[data-lock="desk"] .lock-hardware {
  border-color: #b78d46;
  background: #47321f;
}

.physical-lock[data-lock="cameraBag"] {
  border-color: #4b3022;
  border-radius: 16px 16px 4px 4px;
  background:
    repeating-linear-gradient(35deg, rgb(255 255 255 / 2%) 0 2px, transparent 2px 7px),
    #553929;
}

.physical-lock[data-lock="chemical"] {
  border-color: #596364;
  background: linear-gradient(135deg, #5d6767, #303839 65%);
}

.physical-lock[data-lock="enlargerDrawer"] {
  border-color: #7d3136;
  background: linear-gradient(180deg, #4c2428, #231b1d);
}

.physical-lock[data-lock="enlargerDrawer"] .lock-display {
  color: #ff8f86;
  text-shadow: 0 0 10px #d53d42;
}

.physical-lock[data-lock="locker13"] {
  border-color: #6b562f;
  background: radial-gradient(circle at 50% 22%, #765f34 0 9%, transparent 10%), #323737;
}

.physical-lock[data-lock="locker13"] .lock-hardware {
  border-radius: 80px 80px 8px 8px;
}

.physical-lock[data-lock="evidenceSafe"] {
  border-color: #707a7c;
  background:
    repeating-linear-gradient(90deg, transparent 0 31px, rgb(255 255 255 / 3%) 32px),
    #343d40;
  box-shadow: inset 0 0 0 5px #151c1f, inset 0 0 36px rgb(0 0 0 / 38%);
}

.physical-lock.uses-wheels .lock-display {
  justify-content: center;
  letter-spacing: 0.38em;
}

.combination-wheels {
  display: grid;
  grid-template-columns: repeat(var(--wheel-count, 4), minmax(54px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid #1a2427;
  background: #101719;
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 3%);
}

.physical-lock[data-lock="cameraBag"] .combination-wheels {
  --wheel-count: 3;
}

.combination-wheel {
  display: grid;
  grid-template-rows: 34px 58px 34px;
  overflow: hidden;
  border: 1px solid #747b75;
  border-radius: 8px;
  background: linear-gradient(90deg, #1c2223, #747a74 16% 84%, #1c2223);
  box-shadow: inset 0 0 9px rgb(0 0 0 / 55%), 0 3px 0 #090d0e;
}

.combination-wheel output {
  display: grid;
  place-items: center;
  border-block: 1px solid #171c1d;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 12%), transparent 28% 72%, rgb(0 0 0 / 18%)),
    #d0c7a8;
  color: #181a18;
  font: 900 1.45rem/1 var(--mono);
  text-shadow: 0 1px #fff9d9;
}

.wheel-step {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #303a3c;
  color: #d9c16b;
  box-shadow: none;
  font-size: 0.7rem;
}

.wheel-step:hover,
.wheel-step:focus-visible {
  background: #465357;
  color: #fff0a5;
}

.lock-handle-action {
  min-height: 52px;
  margin-top: 9px;
  border: 1px solid #907436;
  background: linear-gradient(180deg, #d9b95f, #856a31);
  color: #111719;
  box-shadow: 0 4px 0 #2a2418;
  font: 900 0.76rem/1 var(--mono);
}

.physical-lock[data-lock="chemical"] .combination-wheel {
  border-radius: 2px;
  background: repeating-linear-gradient(0deg, #5c6768 0 8px, #303a3b 9px 12px);
}

.physical-lock[data-lock="chemical"] .combination-wheel output {
  background: #d9decf;
}

.physical-lock[data-lock="enlargerDrawer"] .combination-wheels {
  border-color: #6f2e33;
  background: #26191b;
}

.physical-lock[data-lock="enlargerDrawer"] .combination-wheel {
  border-color: #a34a4e;
  background: linear-gradient(90deg, #251416, #744146 18% 82%, #251416);
}

.physical-lock[data-lock="enlargerDrawer"] .combination-wheel output {
  background: #3b171a;
  color: #ff968c;
  text-shadow: 0 0 9px #e93f46;
}

.physical-lock[data-lock="locker13"] .combination-wheels {
  border-radius: 36px;
  padding-inline: 18px;
  background: radial-gradient(circle at 50% 50%, #5f563e, #1c2222 72%);
}

.physical-lock[data-lock="locker13"] .combination-wheel {
  border-color: #ae8d45;
  background: linear-gradient(90deg, #241e14, #9b7c3d 18% 82%, #241e14);
}

.physical-lock[data-lock="evidenceSafe"] .combination-wheels {
  border-color: #677477;
  border-radius: 6px;
  background: linear-gradient(180deg, #3c4749, #171e20);
}

.physical-lock[data-lock="evidenceSafe"] .combination-wheel {
  border-color: #9a8c62;
  border-radius: 2px;
  background: linear-gradient(90deg, #242b2c, #8b8c7c 18% 82%, #242b2c);
}

.physical-lock[data-lock="evidenceSafe"] .combination-wheel output {
  background: #d9d0b2;
}

.object-device-panel > .door-control-panel.handle-tested {
  animation: door-handle-resist 340ms cubic-bezier(.3, .75, .34, 1);
}

.object-device-panel > .door-control-panel.handle-tested::before {
  transform: rotate(8deg);
}

.recorder-deck {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #59686b;
  background: linear-gradient(145deg, #263236, #11191c);
  box-shadow: inset 0 0 0 4px #090e10;
}

.recorder-deck .tape-player,
.recorder-empty .tape-player {
  min-height: 132px;
}

.recorder-transport {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.recorder-deck.is-playing .tape-reel:first-child {
  animation: recorder-reel-spin 1.4s linear infinite;
}

.recorder-deck.is-playing .tape-reel:nth-child(2) {
  animation: recorder-reel-spin 1.1s linear infinite reverse;
}

.recorder-transcript {
  max-height: 300px;
  overflow: auto;
  border: 1px solid #766d58;
  background: #d8cfb5;
}

.recorder-transcript .evidence-document {
  box-shadow: none;
}

@keyframes recorder-reel-spin {
  to { transform: rotate(360deg); }
}

@keyframes door-handle-resist {
  0%, 100% { transform: translateX(0); }
  34% { transform: translateX(3px); }
  62% { transform: translateX(-1px); }
}

@media (max-width: 900px) {
  .object-device-layout {
    grid-template-columns: 1fr;
  }

  .object-device-visual .object-closeup-stage {
    min-height: 270px;
  }
}

@media (min-width: 681px) and (max-width: 900px) and (max-height: 760px) {
  .object-device-layout {
    grid-template-columns: minmax(250px, 0.82fr) minmax(290px, 1.18fr);
  }

  .object-device-visual .object-closeup {
    min-height: 260px;
    grid-template-rows: minmax(210px, 1fr) auto;
  }

  .object-device-visual .object-closeup-stage {
    min-height: 210px;
  }
}

@media (max-width: 680px) and (max-height: 760px) {
  .object-device-visual .object-closeup {
    min-height: 235px;
    grid-template-rows: 185px auto;
    padding: 8px;
  }

  .object-device-visual .object-closeup-stage {
    min-height: 185px;
    border-width: 5px;
  }

  .object-device-visual .object-closeup-caption {
    padding: 7px 8px;
    font-size: 0.62rem;
  }

  .object-device-visual .object-closeup-detail {
    min-width: 104px;
    padding: 4px 6px;
    font-size: 0.56rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reservation-viewer,
  .registration-table,
  .camera-puzzle .camera-lens > i,
  .film-composite-puzzle.light-on .registration-table,
  .reservation-puzzle.light-on .reservation-viewer,
  .recorder-deck.is-playing .tape-reel {
    transition-duration: 0.01ms;
    animation: none;
  }
}

.reduced-motion .reservation-viewer,
.reduced-motion .registration-table,
.reduced-motion .camera-puzzle .camera-lens > i,
.reduced-motion .film-composite-puzzle.light-on .registration-table,
.reduced-motion .reservation-puzzle.light-on .reservation-viewer,
.reduced-motion .recorder-deck.is-playing .tape-reel {
  transition-duration: 0.01ms;
  animation: none;
}