/* Original interface for Midnight Evidence. Logical canvas: 390 × 844. */
:root {
  color-scheme: dark;
  --ink: #111615;
  --black: #0b0e0e;
  --night: #151b1a;
  --paper: #d9d3c2;
  --paper-light: #ebe6d8;
  --paper-edge: #b8b19f;
  --muted: #9b9e91;
  --light: #eae5d6;
  --yellow: #e8c96e;
  --red: #c65647;
  --purple: #b2a0f0;
  --mint: #9ff3d7;
  --serif: 'Songti SC', 'Noto Serif CJK SC', 'Source Han Serif SC', 'SimSun', serif;
  --sans: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-family: var(--serif);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 28%, #252e2c 0%, #1b2221 34%, #121817 70%),
    #161d1b;
  color: var(--light);
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(118deg, transparent 0 45px, #ffffff02 46px 47px, transparent 48px 93px);
}
button, input, select { font: inherit; }
button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}
button:disabled, .disabled { cursor: default; }
button svg { pointer-events: none; }
svg { display: block; width: 100%; height: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 800; }
strong { font-weight: 800; }
[hidden] { display: none !important; }

#frame {
  position: relative;
  width: 390px;
  height: 844px;
  flex: none;
  isolation: isolate;
  box-shadow: 0 30px 100px #0008, 0 0 0 1px #ffffff0d;
}
#app {
  position: relative;
  width: 390px;
  height: 844px;
  overflow: hidden;
  transform-origin: top left;
  background: var(--black);
  contain: layout paint;
}
.desktop-note {
  position: fixed;
  top: 32px;
  left: 36px;
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 2.8px;
  color: #a7b0a06e;
}
.desktop-note i { width: 23px; height: 1px; background: #a7b0a049; }
.screen { position: absolute; inset: 0; padding: 24px 22px; overflow: hidden; }
.screen::after {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  content: '';
  box-shadow: inset 0 0 60px #0000000a;
}
.boot { padding: 220px 32px 0; text-align: center; }
.boot > span { font-size: 11px; letter-spacing: 8px; color: var(--muted); }
.boot h1 { margin: 21px 0 33px; font-size: 47px; letter-spacing: 8px; }
.boot p { font-size: 12px; color: var(--muted); letter-spacing: 2px; }
.boot-line { width: 130px; height: 2px; margin: 0 auto 22px; background: #40473e; overflow: hidden; }
.boot-line::after { content: ''; display: block; height: 2px; width: 50%; background: var(--yellow); animation: load 1s ease-in-out infinite alternate; }
.eyebrow { font-family: var(--sans); font-size: 10px; letter-spacing: 3px; line-height: 1.6; font-weight: 500; text-transform: uppercase; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; margin-bottom: 18px; }
.topbar > h2 { font-size: 19px; letter-spacing: 3px; }
.topbar .eyebrow { color: #756f60; text-align: right; font-size: 8px; letter-spacing: 1.5px; }
.back { min-width: 44px; min-height: 40px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px 5px 0; font-size: 12px; letter-spacing: 1px; }
.back svg { width: 23px; height: 23px; }
.primary, .secondary, .ghost {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 13px 19px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 3px;
  line-height: 1.3;
  transition: color .16s, background-color .16s, border-color .16s, transform .12s, box-shadow .16s;
}
.primary { color: var(--ink); background: var(--yellow); border: 1px solid #f6dda1; box-shadow: 3px 4px 0 #0005; }
.primary::after { content: '→'; margin-left: 5px; font-family: Georgia, serif; font-size: 20px; font-weight: normal; letter-spacing: 0; }
.secondary { border: 1px solid #999e8855; color: var(--light); background: #1b221b55; font-size: 13px; letter-spacing: 2px; }
.ghost { min-height: 42px; color: var(--muted); font-size: 12px; font-weight: normal; letter-spacing: 2px; }
.primary:active, .secondary:active, .ghost:active, .case-card:active, .tool-card:active { transform: translateY(2px); box-shadow: none; }
.primary:disabled, .secondary:disabled { opacity: .4; filter: grayscale(1); }
.button-row { display: flex; gap: 11px; align-items: stretch; }
.button-row > * { flex: 1; }
.star, .stars { color: var(--yellow); }
.stars { font-family: Georgia, serif; font-size: 18px; letter-spacing: 4px; white-space: nowrap; }
.stars .empty { opacity: .23; }

/* A cover made from an original ink drawing, with typeset live controls. */
.home { padding-top: 45px; background: #0a0d0d; text-align: center; }
.home > .eyebrow { color: #a9ad9a; font-size: 10px; letter-spacing: 6px; }
.home-title { position: relative; z-index: 2; margin: 20px -10px 0; font-size: 57px; letter-spacing: 6px; line-height: 1.22; color: #eeebdf; font-weight: 900; text-shadow: 2px 1px 0 #d7d1c614; }
.home-title::after { content: ''; width: 37px; height: 2px; background: var(--yellow); display: block; margin: 20px auto 0; }
.home-title small { display: block; margin-top: 9px; font-family: Georgia, serif; font-size: 10px; letter-spacing: 6px; font-weight: normal; color: #b2b5a4; }
.hero { position: relative; width: 390px; height: 370px; margin: -2px -22px 0; }
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: 70px; background: linear-gradient(transparent, #0a0d0d); }
.hero svg { width: 390px; height: 370px; }
.home-copy { position: relative; z-index: 3; margin-top: -12px; color: #b3b6a8; font-size: 13px; line-height: 1.9; letter-spacing: 3px; }
.home-copy b, .home-copy strong { font-weight: normal; color: #e6e3d5; }
.home-actions { position: absolute; left: 64px; right: 64px; bottom: 99px; z-index: 4; }
.home-actions > .primary { height: 62px; font-size: 19px; letter-spacing: 5px; margin-bottom: 14px; }
.home-actions .button-row { gap: 18px; }
.home-actions .secondary { background: transparent; min-height: 42px; border-color: #777f6555; font-weight: normal; font-size: 12px; }
.progress-footer { position: absolute; bottom: 31px; left: 24px; right: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #8e92772c; padding-top: 18px; color: #b3b9a7; font-family: var(--sans); font-size: 10px; letter-spacing: 1px; }
.progress-footer .star { margin-right: 6px; font-size: 13px; }
.progress-footer svg { width: 23px; height: 23px; display: inline-block; }
.progress-footer > div { display: flex; align-items: center; gap: 10px; }
.progress-footer .locked { opacity: .22; }
.rain { position: absolute; pointer-events: none; inset: 0; overflow: hidden; opacity: .12; background: repeating-linear-gradient(108deg, transparent 0 37px, #fff8 38px, transparent 39px 78px); background-size: 160px 190px; animation: rain 1.4s linear infinite; mask-image: linear-gradient(transparent, #000 20%, #000 70%, transparent); }

/* An archival sheet, ruled in ink with worn edges. */
.paper { color-scheme: light; color: var(--ink); background: var(--paper); background-image: repeating-linear-gradient(0deg, transparent 0 3px, #6b5d3c04 3px 4px), linear-gradient(95deg, #aa9d7933, transparent 9%, transparent 92%, #7a6f5520); }
.paper::before { content: ''; pointer-events: none; position: absolute; inset: 10px; border: 1px solid #7f766321; }
.paper .primary { background: #18211e; color: var(--paper-light); border-color: #18211e; box-shadow: 3px 4px 0 #73675055; }
.paper .secondary { background: transparent; color: #303a31; border-color: #5c625178; }
.paper .ghost { color: #5f6359; }
.paper .stars, .paper .star { color: #655936; }
.archives > h1 { font-size: 34px; letter-spacing: 7px; margin: 11px 0 8px; }
.archives > p { color: #656a5d; line-height: 1.7; font-size: 12px; letter-spacing: 1px; }
.case-list { display: grid; gap: 11px; margin-top: 23px; }
.case-card { position: relative; display: grid; grid-template-columns: 38px 1fr 74px; align-items: center; gap: 8px; width: 100%; min-height: 91px; padding: 12px 10px; text-align: left; border: 1px solid #817a625c; background: #ede7d64d; box-shadow: 2px 3px 0 #b4ab922f; transition: background .15s, transform .12s; }
.case-card::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: #344035; }
.case-number { align-self: start; padding-top: 3px; font-family: Georgia, serif; font-size: 25px; letter-spacing: -1px; color: #737260; }
.case-meta h3, .case-meta strong { display: block; font-size: 18px; font-weight: 800; letter-spacing: 2px; }
.case-meta p { margin-top: 6px; font-size: 10px; letter-spacing: 1px; color: #65695b; }
.case-meta .stars { display: block; margin-top: 6px; font-size: 13px; line-height: 1; letter-spacing: 2px; }
.case-thumb { overflow: hidden; position: relative; width: 73px; height: 64px; background: #151c18; color: #c4c7b1; border: 3px solid #c3bca8; box-shadow: 0 0 0 1px #77776155; }
.case-thumb > svg { width: 73px; height: 110px; transform: translateY(-23px); opacity: .55; }
.case-thumb::after { content: ''; position: absolute; width: 29px; height: 29px; border-radius: 5px; background: #e8dca735; border: 1px solid #e9d88855; top: 18px; left: 21px; transform: rotate(-9deg); }
.case-card.locked { filter: grayscale(1); opacity: .52; }
.case-card.locked::after { content: '未立案'; position: absolute; right: 16px; top: 29px; padding: 3px 5px; border: 2px solid #50594c; color: #50594c; background: #d9d3c2d9; font-size: 12px; font-weight: 800; letter-spacing: 2px; transform: rotate(-12deg); }
.case-card.locked::before { background: #999783; }

.brief { padding-top: 21px; }
.brief .topbar { margin-bottom: 9px; }
.brief-head { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 85px; margin-bottom: 12px; border-top: 2px solid #263329; border-bottom: 1px solid #8b856f70; padding: 12px 0 14px; gap: 12px; }
.brief-head h1, .brief-head h2 { font-size: 29px; letter-spacing: 5px; line-height: 1.2; }
.brief-head .eyebrow { margin-bottom: 7px; color: #626854; font-size: 9px; }
.brief-scene { width: 66px; height: 66px; overflow: hidden; color: #c3c5ab; background: #161d18; border: 3px solid #eee6cf; transform: rotate(4deg); box-shadow: 0 1px 3px #252e1935; }
.brief-scene svg { width: 66px; height: 99px; margin-top: -13px; opacity: .7; }
.brief-stats { display: flex; gap: 0; padding: 0 0 11px; margin-bottom: 12px; border-bottom: 1px dashed #77765b6b; font-family: var(--sans); font-size: 12px; line-height: 1.7; letter-spacing: .5px; }
.brief-stats > * { flex: 1; }
.brief-stats strong { font-family: Georgia, serif; font-size: 23px; font-weight: normal; margin: 0 3px; }
.brief-stats > :not(:first-child) { border-left: 1px solid #9994786b; padding-left: 16px; }
.evidence-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px 6px; }
.evidence-card { position: relative; min-height: 73px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 5px 2px 4px; text-align: center; background: #eeeadc66; border: 1px solid #7f7c5f3b; }
.evidence-card svg { width: 43px; height: 43px; flex: none; }
.evidence-card span, .evidence-card p { font-family: var(--sans); font-size: 9px; line-height: 1.4; letter-spacing: 0; }
.badge { display: flex; align-items: center; justify-content: center; position: absolute; right: -2px; top: -3px; width: 18px; height: 18px; font-family: var(--sans); font-size: 10px; font-weight: bold; line-height: 1; border: 1px solid currentColor; background: var(--paper-light); color: #4c5145; }
.badge.hidden, .badge.uv { color: #6d557e; }
.brief-note { margin: 13px 0 15px; padding: 10px 11px; background: #aaa2861c; border-left: 2px solid #7a765d; color: #535d4c; font-size: 11px; line-height: 1.9; letter-spacing: .4px; }
.brief-note strong { color: #283d2f; }
.tool-selection { position: relative; margin-top: 9px; }
.tool-selection > h3, .tool-selection > .eyebrow { font-family: var(--sans); font-size: 10px; letter-spacing: 2px; margin: 0 0 10px; color: #61694f; }
.tool-selection > p { font-size: 10px; color: #6b715f; line-height: 1.7; }
.tool-selection > div:not(.tool-slots) { display: flex; gap: 8px; }
.tool-card { position: relative; min-width: 0; flex: 1; padding: 10px 4px 8px; min-height: 101px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; border: 1px solid #8a896c88; color: #4d5849; background: #e9e4d14d; transition: transform .12s, background .15s, border-color .15s; }
.tool-card svg { width: 35px; height: 35px; }
.tool-card strong { font-size: 12px; letter-spacing: 1px; }
.tool-card small, .tool-card span { font-family: var(--sans); font-size: 9px; line-height: 1.5; text-align: center; color: #686f5c; }
.tool-card.selected { color: #18291d; border: 2px solid #263f2d; padding: 9px 3px 7px; background: #bac5a84f; box-shadow: 2px 2px 0 #8e9b7c44; }
.tool-card.selected::after { content: '✓'; position: absolute; top: 4px; right: 5px; color: #263f2d; font-family: var(--sans); font-size: 12px; }
.tool-card:disabled, .tool-card.locked { opacity: .35; }
.tool-slots { display: flex; gap: 8px; align-items: center; margin: 11px 0; min-height: 35px; }
.slot { position: relative; height: 35px; width: 46px; padding: 3px; border: 1px dashed #7c826d; background: #a5aa931c; color: #3d553b; }
.slot:empty::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; color: #8b917b; font-size: 19px; }
.slot svg { width: 28px; height: 28px; margin: auto; }
.controls-note { color: #666d5a; font-family: var(--sans); font-size: 10px; line-height: 1.7; letter-spacing: .4px; }
.briefing-actions { position: absolute; bottom: 25px; left: 22px; right: 22px; padding-top: 13px; background: linear-gradient(#d9d3c200, #d9d3c2 14px); }
.briefing-actions .controls-note { margin: 0 0 10px; text-align: center; }
.briefing-actions .primary { min-height: 56px; font-size: 17px; }

/* Layers are shared by pause, settings, and result feedback. */
.overlay { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 22px; background: #060b09d9; backdrop-filter: blur(3px); animation: overlay-in .15s ease-out; }
.modal { position: relative; width: 100%; padding: 28px 23px 23px; border: 1px solid #8e947363; background: #19211d; box-shadow: 5px 7px 0 #03070577; color: var(--light); }
.modal::before { content: ''; position: absolute; inset: 6px; border: 1px solid #bfc7a817; pointer-events: none; }
.modal-title { margin-bottom: 25px; font-size: 25px; letter-spacing: 6px; font-weight: 800; text-align: center; }
.modal .eyebrow { color: #929c82; text-align: center; margin-bottom: 9px; }
.modal .primary, .modal .secondary { position: relative; margin-top: 15px; }
.modal .ghost { position: relative; margin-top: 9px; }
.modal > .close { position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; padding: 6px; color: #adb59f; }
.setting-row { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 12px; border-bottom: 1px solid #b4c09b1c; color: #d4dac6; font-size: 14px; letter-spacing: 2px; }
.setting-row > label, .setting-row > span { flex: 1; }
.toggle { position: relative; width: 45px; height: 25px; flex: none; padding: 0; background: #56604c4d; border: 1px solid #85927266; border-radius: 14px; transition: background .15s; font-size: 0; }
.toggle::after { content: ''; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; border-radius: 50%; background: #929d84; transition: transform .16s, background .16s; }
.toggle[aria-checked='true'], .toggle.on, .toggle.active { background: #cbb05b55; border-color: var(--yellow); }
.toggle[aria-checked='true']::after, .toggle.on::after, .toggle.active::after { transform: translateX(19px); background: var(--yellow); }
.sensitivity { display: flex; gap: 7px; padding-top: 15px; margin-bottom: 10px; }
.sensitivity button { flex: 1; min-height: 37px; border: 1px solid #87937855; color: #b5c2a7; font-size: 12px; letter-spacing: 1px; }
.sensitivity button.chosen { color: var(--yellow); background: #d9bd6120; border-color: #d9bd6199; }

/* The game board retains exact logical hit geometry. */
.play-screen { padding: 0; background: #080c0b; }
.play-head { position: absolute; top: 21px; left: 16px; right: 16px; display: flex; align-items: flex-start; gap: 10px; min-height: 50px; }
.play-head > div:first-child { flex: 1; }
.play-head .eyebrow { color: #84917d; font-size: 8px; letter-spacing: 2px; margin-bottom: 4px; }
.play-head h2, .play-head h3 { color: #e1e4d3; font-size: 17px; letter-spacing: 3px; }
.play-head button { width: 37px; height: 37px; padding: 9px; margin-top: 1px; border: 1px solid #97a28333; color: #c7ceba; }
.timer { position: relative; font-family: Georgia, 'Times New Roman', serif; font-size: 38px; font-variant-numeric: tabular-nums; letter-spacing: -2px; line-height: 1.05; color: #e6d89c; text-align: right; min-width: 81px; }
.timer small { font-family: var(--sans); font-size: 10px; letter-spacing: 0; color: #9da385; margin-left: 3px; }
.timer.urgent { color: #ec8b70; animation: urgent 1s steps(2, end) infinite; }
.objectives { position: absolute; left: 15px; right: 15px; top: 81px; display: flex; align-items: center; justify-content: flex-start; gap: 3px; height: 43px; }
.objective { position: relative; width: 33px; height: 39px; flex: 0 0 33px; padding: 2px; border: 1px solid #8b987137; background: #182018; color: #c2c7b5; }
.objective svg { width: 28px; height: 28px; }
.objective .badge { width: 12px; height: 12px; top: -3px; right: -3px; font-size: 8px; background: #152016; color: #c6cdb3; border-color: #9ba580; }
.objective .evidence-number { position: absolute; bottom: 0; right: 2px; font-size: 7px; color: #8e9b7d; }
.objective.collected { color: #66785b; border-color: #8caa6655; }
.objective.collected::after { content: '✓'; position: absolute; font-family: var(--sans); font-weight: bold; font-size: 27px; color: #c4dc92; left: 6px; top: 4px; text-shadow: 1px 2px #091108; }
.hud-count { position: absolute; left: 16px; top: 132px; font-family: var(--sans); font-size: 10px; letter-spacing: 1px; color: #c2c8b1; }
.hud-count strong { color: var(--yellow); font-size: 11px; }
.progress-track { position: absolute; left: 102px; top: 137px; right: 16px; height: 2px; background: #343d2a; overflow: hidden; }
.progress-fill { width: 0; height: 100%; background: var(--yellow); transition: width .2s; }
.board { position: absolute; top: 150px; left: 15px; width: 360px; height: 540px; display: grid; grid-template-columns: repeat(6, 60px); grid-template-rows: repeat(9, 60px); overflow: hidden; isolation: isolate; background: #070b09; outline: 1px solid #9da87e29; touch-action: none; }
.scene-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: #b9c2a2; opacity: .12; }
.scene-backdrop svg { width: 360px; height: 540px; }
.cell { position: relative; z-index: 1; width: 60px; height: 60px; padding: 0; margin: 0; border: 0; border-right: 1px solid #87976c07; border-bottom: 1px solid #87976c07; overflow: visible; background: transparent; outline-offset: -3px; touch-action: none; }
.cell::before { content: ''; position: absolute; inset: 0; background: var(--paper); opacity: 0; pointer-events: none; }
.cell .object { position: absolute; inset: 5px; color: #182018; opacity: 0; pointer-events: none; }
.cell .object svg { width: 50px; height: 50px; }
.cell.lit { border-color: #26371d20; }
.cell.lit::before { opacity: .91; }
.cell.lit .object { opacity: 1; }
.cell.lit:active::before { opacity: 1; }
.board.uv .cell.lit::before, .cell.uv.lit::before { background: #362c4c; opacity: 1; }
.board.uv .cell.lit .object, .cell.uv.lit .object { color: #d1d4c2; opacity: .4; }
.board.uv .cell.lit .object.hidden, .board.uv .cell.lit .object.trace, .cell.uv.lit .object.hidden, .cell.uv.lit .object.trace { color: var(--mint); opacity: 1; filter: drop-shadow(0 0 4px #85f2cd88); }
.cell.taken.lit .object, .cell.lit .object.taken { opacity: .13; }
.cell.taken::after { content: '取证'; position: absolute; top: 18px; left: 8px; z-index: 5; color: #537147; border: 2px solid currentColor; background: #c8cfb1cc; padding: 2px 3px; font-size: 12px; font-weight: 800; letter-spacing: 2px; transform: rotate(-12deg); animation: stamp-in .18s ease-out; }
.cell.taken:not(.lit)::after { opacity: .6; background: #0b140acc; color: #6d8b59; }
.mark { position: absolute; inset: 9px 6px 7px 7px; z-index: 4; pointer-events: none; border: 1.6px solid #f2ecda; border-radius: 47% 53% 46% 50%; transform: rotate(-9deg); box-shadow: 0 0 1px #f2ecda; }
.mark::before { content: ''; position: absolute; inset: -2px 1px 1px -1px; border: 1px solid #fff9; border-radius: 50%; transform: rotate(16deg); }
.mark .evidence-number { position: absolute; right: -6px; top: -7px; min-width: 12px; padding: 1px 2px; font-family: Georgia, serif; font-size: 13px; line-height: 1; color: #eee9d5; background: #0e150ed9; transform: rotate(9deg); }
.evidence-number { font-family: Georgia, serif; font-variant-numeric: tabular-nums; }
.rejection { position: absolute; inset: 7px; z-index: 6; pointer-events: none; display: grid; place-items: center; color: #d46855; font-family: var(--sans); font-size: 49px; font-weight: 400; line-height: 1; text-shadow: 1px 1px #0b110a; transform: rotate(-9deg); }
.light-frame { position: absolute; z-index: 7; width: 180px; height: 180px; pointer-events: none; border: 1.5px solid #f1d77c99; border-radius: 8px; box-shadow: 0 0 13px #e5c87944, inset 0 0 17px #e5c87922; transition: border-color .15s, box-shadow .15s; }
.board.uv .light-frame { border-color: #b99bec; box-shadow: 0 0 16px #ad82e569, inset 0 0 17px #ad82e533; }
.cell.centre { outline: 1px solid #e2cc8140; outline-offset: -4px; }
.cell.centre:not(.taken)::after { content: ''; position: absolute; z-index: 8; left: 26px; top: 26px; width: 8px; height: 8px; border: 1px solid #70794f; pointer-events: none; clip-path: polygon(0 0, 40% 0, 40% 40%, 60% 40%, 60% 0, 100% 0, 100% 40%, 60% 40%, 60% 60%, 100% 60%, 100% 100%, 60% 100%, 60% 60%, 40% 60%, 40% 100%, 0 100%, 0 60%, 40% 60%, 40% 40%, 0 40%); }
.cell.error { animation: cell-error .3s ease-out; }
.cell.error::after { content: ''; position: absolute; inset: 2px; border: 3px solid var(--red); z-index: 9; pointer-events: none; }
.cell.reveal { outline: 2px solid var(--yellow); outline-offset: -4px; animation: reveal .5s steps(2, end) infinite; }
.play-toolbar { position: absolute; top: 708px; left: 16px; right: 121px; display: flex; align-items: stretch; gap: 8px; height: 84px; }
.tool-button { position: relative; flex: 1; min-width: 0; height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 8px 3px 5px; border: 1px solid #8e9c6f65; background: #1b261b; color: #d0d7bb; transition: background .12s, border-color .12s, transform .12s; }
.tool-button svg { width: 35px; height: 35px; }
.tool-button span { font-size: 10px; letter-spacing: 1px; }
.tool-button small { font-family: var(--sans); font-size: 8px; letter-spacing: 0; color: #98a784; }
.tool-button.active { border-color: var(--purple); background: #342a45; color: #d3b9f6; box-shadow: inset 0 0 17px #a075d62b; }
.tool-button:active:not(:disabled) { transform: translateY(2px); }
.tool-button:disabled, .tool-button.disabled { opacity: .3; }
.battery { height: 3px; width: 50px; margin-top: 4px; border: 0; background: #a9b99128; overflow: hidden; }
.battery-fill { height: 100%; background: #b7a1e6; width: 100%; }
.battery.low .battery-fill { background: #df8569; }
.joystick { position: absolute; left: 278px; top: 711px; width: 92px; height: 92px; border-radius: 50%; background: #1d281a; border: 1px solid #9cad7866; touch-action: none; box-shadow: inset 0 0 0 7px #080e0844, inset 0 0 20px #0005; }
.joystick::before { content: ''; position: absolute; width: 1px; top: 14px; bottom: 14px; left: 45px; background: #9cad7826; }
.joystick::after { content: ''; position: absolute; height: 1px; left: 14px; right: 14px; top: 45px; background: #9cad7826; }
.stick-knob { position: absolute; top: 29px; left: 29px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #a3b17cbb; background: #536344; box-shadow: 0 3px 9px #0007, inset 0 1px 2px #ccdca133; z-index: 1; pointer-events: none; }
.play-hint { position: absolute; top: 812px; left: 16px; right: 16px; color: #9eaa8b; font-family: var(--sans); font-size: 10px; line-height: 1.4; text-align: center; letter-spacing: 1px; pointer-events: none; }
.countdown { position: absolute; z-index: 40; top: 150px; left: 15px; width: 360px; height: 540px; background: #070d07a6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; color: #ece0aa; font-family: Georgia, serif; font-size: 108px; font-weight: normal; }
.countdown > span, .countdown > small, .countdown p { font-family: var(--serif); font-size: 12px; letter-spacing: 3px; line-height: 1.9; text-align: center; color: #d1d6ba; }
.magnifier { position: absolute; z-index: 35; left: 66px; top: 274px; width: 258px; min-height: 286px; color: #182018; background: #d5d3bf; border: 4px solid #7b8262; border-radius: 50% 50% 10px 10px; box-shadow: 0 0 0 5px #080e08, 0 17px 40px #0009; overflow: hidden; pointer-events: none; animation: lens-in .14s ease-out; }
.magnifier::after { content: ''; position: absolute; inset: 8px 8px 39px; border-radius: 50%; border: 1px solid #69715166; pointer-events: none; }
.mag-art { width: 240px; height: 240px; margin: 0 auto; padding: 23px; background: radial-gradient(circle at 40% 34%, #efeddf, #cbcbb3); }
.mag-art svg { width: 194px; height: 194px; }
.mag-caption { position: relative; z-index: 2; padding: 10px 8px 13px; font-size: 12px; font-weight: 800; text-align: center; letter-spacing: 2px; background: #c6c9ae; border-top: 1px solid #8e9972; }

/* Typed facts, stamps and one clear next action. */
.result { padding-top: 52px; text-align: center; }
.result > .eyebrow { color: #75765f; font-size: 9px; letter-spacing: 3px; }
.result h1, .result h2 { margin: 17px 0 7px; font-size: 29px; letter-spacing: 5px; }
.result-stamp { display: inline-block; padding: 13px 21px 11px; margin: 24px 0 20px; color: #527044; border: 4px double currentColor; font-size: 45px; font-weight: 900; line-height: 1; letter-spacing: 9px; text-indent: 9px; transform: rotate(-9deg); animation: stamp-in .25s ease-out; box-shadow: inset 0 0 0 2px #d9d3c2; }
.result-stamp.fail, .result-stamp.failed { color: #9c5142; font-size: 35px; }
.result .stars { display: block; font-size: 35px; letter-spacing: 11px; text-indent: 11px; margin: 9px 0 21px; color: #8c7433; }
.result-stats { display: flex; align-items: center; justify-content: center; gap: 0; margin: 12px 0 23px; padding: 19px 0; border-top: 1px solid #8d886c5c; border-bottom: 1px solid #8d886c5c; }
.result-stats > * { flex: 1; }
.result-stats > :not(:first-child) { border-left: 1px solid #8d886c5c; }
.result-stats span, .result-stats small { display: block; color: #69705c; font-family: var(--sans); font-size: 10px; letter-spacing: 1px; }
.result-stats strong { display: block; margin-top: 6px; font-family: Georgia, serif; color: #233e2b; font-weight: normal; font-size: 32px; font-variant-numeric: tabular-nums; }
.result-stats b { font-size: 19px; }
.unlock-card { position: relative; display: flex; align-items: center; gap: 14px; text-align: left; border: 1px solid #677e5559; padding: 14px 17px; margin: 19px 0; background: #c3c9a84d; }
.unlock-card svg { width: 47px; height: 47px; flex: none; color: #3a5537; }
.unlock-card > div { flex: 1; }
.unlock-card .eyebrow { font-family: var(--sans); font-size: 8px; letter-spacing: 2px; color: #657c53; }
.unlock-card strong { display: block; margin: 4px 0 5px; font-size: 19px; letter-spacing: 3px; color: #2b4a2b; }
.unlock-card p { font-size: 10px; line-height: 1.6; color: #68765a; }
.fact { padding: 10px 0; text-align: left; font-size: 12px; line-height: 1.9; color: #5c6551; border-bottom: 1px dashed #8e907248; }
.fact strong { color: #3a4f35; }
.result .evidence-list { margin: 15px 0; }
.result .evidence-card { opacity: .55; }
.result-actions { position: absolute; left: 22px; right: 22px; bottom: 32px; display: grid; gap: 11px; }
.result-actions .primary { min-height: 57px; }
.result-actions .button-row .secondary { min-height: 45px; }
.result-actions > .ghost { margin-top: -5px; }
.result .final-note { padding: 13px; margin: 20px 0; border: 1px solid #65724d5c; font-size: 15px; line-height: 1.8; letter-spacing: 3px; color: #3c5934; }
.toast { position: absolute; z-index: 100; left: 30px; right: 30px; bottom: 109px; padding: 13px 16px; background: #121e16ee; color: #e3e8cf; border: 1px solid #8a9a6f77; font-size: 12px; line-height: 1.7; letter-spacing: 1px; text-align: center; box-shadow: 0 6px 25px #0005; pointer-events: none; animation: toast-in .18s ease-out; }
.floater { position: absolute; z-index: 45; pointer-events: none; color: #e9d990; text-shadow: 1px 2px 0 #0a1309; font-size: 18px; font-weight: 800; letter-spacing: 1px; animation: float-up .8s ease-out forwards; white-space: nowrap; }
.floater.error, .floater.miss, .floater.fake { color: #ed9b81; }
.floater small { display: block; margin-top: 4px; font-size: 10px; color: #e0e1c7; font-weight: normal; letter-spacing: 1px; }

#rotation { position: fixed; inset: 0; display: none; z-index: 999; color: var(--paper-light); background: #111a14; text-align: center; align-items: center; justify-content: center; flex-direction: column; gap: 18px; }
body.landscape #rotation { display: flex; }
#rotation h2 { font-size: 22px; letter-spacing: 4px; }
#rotation p { color: #a2b191; font-size: 12px; letter-spacing: 2px; }
.rotate-phone { width: 35px; height: 58px; border: 2px solid #d6c77c; border-radius: 6px; position: relative; transform: rotate(-11deg); }
.rotate-phone::after { content: ''; width: 9px; height: 2px; background: #d6c77c; position: absolute; bottom: 5px; left: 11px; }

/* Actual DOM contract: type remains live; empty game markers never render. */
.topbar > span:not(.file-label) { flex: 1; text-align: left; font-size: 14px; font-weight: 800; letter-spacing: 3px; }
.topbar .file-label { font-family: var(--sans); font-size: 8px; letter-spacing: 1px; color: #7a7c67; }
.back { width: 32px; min-width: 32px; padding: 0 8px 3px 0; font-family: Georgia, serif; font-size: 31px; font-weight: normal; line-height: 1; }
.stars .star:not(.earned) { opacity: .22; }
.home-title { margin-top: 20px; font-size: 59px; letter-spacing: 6px; }
.home-title span { color: #e4e0d2; }
.home-title::after { display: none; }
.home-subtitle { margin-top: 10px; color: #929c87; font-family: Georgia, serif; font-size: 9px; letter-spacing: 5px; line-height: 1.4; }
.home .hero { margin-top: 20px; }
.hero > img { width: 390px; height: 370px; object-fit: cover; object-position: center 74%; display: block; }
.home .home-copy { margin-top: -9px; font-size: 12px; line-height: 1.9; letter-spacing: 2px; }
.home-copy > span { color: #d5d9c6; }
.home-copy p { color: #89957f; font-size: 10px; letter-spacing: 1px; margin-top: 4px; }
.home-edition { position: absolute; right: 23px; top: 261px; color: #b2ba9a66; font-family: var(--sans); font-size: 7px; letter-spacing: 2px; writing-mode: vertical-rl; }
.primary:has(> span)::after { display: none; }
.primary > span { font-family: Georgia, serif; font-size: 22px; margin-left: 8px; font-weight: normal; }
.progress-footer .unowned { opacity: .22; }
.progress-footer .owned { color: #d8d1a4; }
.progress-footer small { color: #8d9980; font-size: 9px; }
.home-actions [aria-disabled='true'] { color: #7b8673; border-color: #78836833; }
.case-card { grid-template-columns: 58px 25px 1fr 15px; min-height: 91px; gap: 9px; padding: 11px 9px; }
.case-thumb { width: 58px; height: 61px; border-width: 2px; }
.case-thumb > svg { width: 58px; height: 87px; transform: translateY(-13px); }
.case-thumb::after { left: 16px; top: 16px; width: 24px; height: 26px; }
.case-number { font-size: 20px; align-self: center; padding: 0; color: #85816c; }
.case-meta h2 { font-size: 17px; letter-spacing: 2px; }
.case-meta p { font-size: 9px; letter-spacing: .3px; }
.case-meta .stars { margin-top: 6px; }
.case-arrow { font-family: Georgia, serif; font-size: 18px; color: #536348; align-self: start; margin-top: 3px; }
.locked-stamp { display: block; margin-top: 6px; color: #757c67; font-size: 10px; letter-spacing: 2px; }
.case-card.locked::after { right: 12px; top: 31px; }
.archive-note { margin-top: 16px; text-align: center; font-family: var(--sans); font-size: 9px !important; color: #7a7d68 !important; letter-spacing: 1px !important; }
.brief-head { display: block; min-height: 0; padding: 12px 0 0; margin-bottom: 13px; }
.brief-head .eyebrow { margin-bottom: 7px; font-size: 8px; letter-spacing: 1.5px; line-height: 1.5; }
.brief-head h1 { font-size: 31px; letter-spacing: 5px; }
.brief-head > p { margin-top: 8px; color: #666f5a; font-size: 10px; line-height: 1.7; letter-spacing: .5px; }
.brief-stats { margin-top: 11px; margin-bottom: 0; padding-bottom: 11px; border-bottom: 0; }
.brief-stats b { font-family: Georgia, serif; font-size: 23px; font-weight: normal; margin: 0 3px; }
.evidence-card { min-height: 70px; }
.evidence-card > span { width: 100%; line-height: 1.3; font-size: 9px; white-space: normal; }
.evidence-card > span > small { font-family: Georgia, serif; font-size: 8px; color: #7c8169; }
.badge { font-style: normal; }
.badge.excluded { text-decoration: line-through; opacity: .45; }
.brief-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; margin-bottom: 13px; padding: 9px; }
.brief-note > svg { width: 31px; height: 41px; flex: 0 0 31px; opacity: .75; }
.brief-note > p { flex: 1; font-size: 10px; line-height: 1.8; margin: 0; }
.tools-heading { align-items: center; justify-content: space-between; margin-bottom: 9px; }
.tools-heading h2 { color: #344b35; font-size: 13px; letter-spacing: 3px; }
.tools-heading > span { font-family: var(--sans); color: #737a60; font-size: 10px; letter-spacing: 1px; }
.tool-slots { align-items: stretch; margin: 8px 0; min-height: 41px; }
.tool-slots .slot { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; width: auto; height: 41px; border-style: dashed; font-size: 11px; }
.tool-slots .slot.selected { background: #a8b88b36; border: 1px solid #61774f8f; }
.tool-slots .slot > svg { margin: 0; width: 27px; height: 27px; flex: none; }
.tool-slots .slot > small { font-size: 8px; color: #7f876f; }
.tool-slots .slot > span { font-size: 17px; line-height: 1; color: #92997b; }
.no-tools { width: 100%; color: #79816a; font-size: 10px; line-height: 40px; text-align: center; background: #aaa88d1c; border: 1px dashed #96998055; }
.tool-card { min-height: 97px; }
.tool-card > span { font-size: 12px; font-weight: bold; letter-spacing: 1px; color: inherit; }
.tool-card small { font-size: 8px; letter-spacing: 0; }
.briefing-actions .controls-note { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 9px; margin-bottom: 8px; }
.briefing-actions .controls-note .ghost { width: auto; min-height: 29px; padding: 4px 6px; border: 1px solid #68765365; color: #445b39; font-size: 9px; font-family: var(--sans); letter-spacing: 0; }
.briefing-actions > p { margin-top: 9px; color: #7a806b; font-size: 8px; line-height: 1.5; text-align: center; letter-spacing: .1px; font-family: var(--sans); }
.modal h2 { position: relative; margin: 10px 0 17px; font-size: 23px; line-height: 1.4; text-align: center; letter-spacing: 4px; }
.modal > p { position: relative; color: #9eac8b; text-align: center; font-size: 10px; line-height: 1.8; letter-spacing: .5px; }
.modal-settings { margin-top: 18px; }
.modal-settings .setting-row { min-height: 45px; font-size: 12px; }
.help-modal ol { margin: 22px 0 20px; padding-left: 24px; color: #aebba0; }
.help-modal li { padding-left: 5px; margin-bottom: 17px; font-size: 11px; line-height: 1.8; }
.help-modal li::marker { color: #cbb770; font-family: Georgia, serif; }
.help-modal li b { display: block; color: #d6debd; font-size: 14px; line-height: 1.6; margin-bottom: 3px; letter-spacing: 1px; }
.play-head { top: 15px; min-height: 29px; align-items: center; }
.play-head > span { display: flex; flex: 1; align-items: baseline; gap: 11px; color: #819275; font-family: var(--sans); font-size: 9px; letter-spacing: 2px; }
.play-head > span b { color: #c4cead; font-family: var(--serif); font-size: 14px; letter-spacing: 3px; }
.play-head > button { width: 30px; height: 30px; min-height: 30px; padding: 7px; margin: 0; flex: none; }
.timer-row { position: absolute; top: 47px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: baseline; }
.timer-row .timer { min-width: 0; text-align: left; font-size: 34px; letter-spacing: -1px; }
.timer-row .hud-count { position: static; font-family: Georgia, serif; font-size: 22px; letter-spacing: 0; color: #d2d6b4; }
.timer-row .hud-count > small { display: inline-block; font-family: var(--sans); font-size: 9px; color: #8c9f75; margin-left: 7px; letter-spacing: 1px; }
.progress-track { top: 88px; left: 16px; right: 16px; }
.objectives { top: 99px; height: 37px; }
.objective { height: 35px; }
.objective > svg { width: 27px; height: 27px; }
.objective > span { position: absolute; bottom: 0; right: 2px; color: #81926d; font-family: Georgia, serif; font-size: 7px; }
.objective.collected > .badge { display: none; }
.cell .mark { display: flex; align-items: flex-start; justify-content: flex-end; color: #f1eddf; font-family: Georgia, serif; font-size: 14px; padding-right: 0; padding-top: 0; line-height: .8; text-shadow: 1px 1px 1px #050805, -1px -1px 1px #050805; }
.cell .mark:empty, .cell .rejection:empty, .cell.taken .rejection { display: none; }
.cell.crossed.lit .object { opacity: .35; }
.cell.lit.trace .object { color: var(--mint); opacity: 1; filter: drop-shadow(0 0 4px #85f2cd88); }
.cell.uv.lit.trace .object { color: var(--mint); opacity: 1; }
.light-frame.uv { border-color: #b99bec; box-shadow: 0 0 16px #ad82e569, inset 0 0 17px #ad82e533; }
.cell.unanswered { outline: 2px solid var(--yellow); outline-offset: -5px; animation: reveal .5s steps(2, end) infinite; }
.board.flash-lit::after { content: ''; pointer-events: none; position: absolute; inset: 0; z-index: 10; background: #fffde4; animation: flash-fade .3s linear forwards; }
.empty-toolbar { padding: 13px 0; color: #a3b389; font-size: 13px; letter-spacing: 3px; line-height: 1.7; }
.empty-toolbar > span { color: #6e805b; font-size: 10px; letter-spacing: 2px; }
.stick-arrow { position: absolute; pointer-events: none; font-family: Georgia, serif; font-size: 19px; color: #819767; line-height: 1; opacity: .7; }
.stick-arrow.up { top: 4px; left: 38px; }.stick-arrow.down { bottom: 5px; left: 38px; }.stick-arrow.left { left: 6px; top: 32px; }.stick-arrow.right { right: 6px; top: 32px; }
.joystick.tilt-mode { opacity: .5; }
.tool-button.low .battery-fill { background: #df8569; }
.countdown > span { font-family: Georgia, serif; font-size: 108px; line-height: 1; color: #ece0aa; letter-spacing: 0; }
.countdown > p { font-family: var(--serif); font-size: 12px; letter-spacing: 2px; line-height: 1.9; color: #c5d0af; }
.magnifier > .eyebrow { position: absolute; top: 15px; left: 0; right: 0; text-align: center; z-index: 3; font-size: 7px; color: #717b5e; letter-spacing: 1px; }
.mag-art { padding: 0; }
.mag-art > svg { width: 240px; height: 240px; }
.floater { transform: translateX(-50%); text-align: center; }
.floater.penalty { color: #ed9b81; }
.game-fx { position: absolute; inset: 0; z-index: 45; pointer-events: none; }
.result-seal { position: absolute; left: 89px; top: 332px; padding: 18px 20px 16px; color: #e5d387; border: 6px double currentColor; font-family: var(--serif); font-size: 58px; line-height: 1; font-weight: 900; letter-spacing: 12px; text-indent: 12px; background: #102011bb; box-shadow: 0 0 60px #0009; transform: rotate(-11deg); z-index: 55; animation: stamp-in .2s ease-out; }
.result-stats b { display: block; margin-top: 6px; font-family: Georgia, serif; font-size: 32px; line-height: 1.1; font-weight: normal; color: #233e2b; }
.result-stats b > em { font-family: var(--serif); font-style: normal; font-size: 10px; margin-left: 4px; color: #748066; }
.best-stars { font-family: var(--sans); font-size: 11px; color: #75795e; letter-spacing: 1px; }
.unlock-card h2 { margin: 5px 0 4px; text-align: left; font-size: 20px; letter-spacing: 4px; color: #304f31; }
.unlock-card small { color: #748464; font-family: var(--sans); font-size: 9px; letter-spacing: 1px; }
.case-quote { display: flex; align-items: center; gap: 15px; margin: 26px 3px; text-align: left; }
.case-quote > svg { width: 52px; height: 58px; flex: none; color: #637557; }
.case-quote > p { color: #71795f; font-size: 12px; line-height: 2; letter-spacing: 1px; }
.result-footnote { position: absolute; bottom: 14px; left: 20px; right: 20px; color: #909179; font-family: var(--sans); font-size: 8px; line-height: 1.7; letter-spacing: .2px; }
.result.lost .result-stamp { color: #975140; }
.play-screen > .result.lost { inset: 326px 0 0; z-index: 50; height: auto; padding: 18px 22px 24px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border-top: 3px solid #626d4d; box-shadow: 0 -12px 35px #0008; scrollbar-width: thin; scrollbar-color: #92977b #d9d3c2; animation: report-up .28s ease-out; }
.result.lost::after { position: fixed; display: none; }
.result.lost > .eyebrow { font-size: 8px; letter-spacing: 2px; }
.result.lost .result-stamp { font-size: 25px; border-width: 3px; padding: 8px 13px; margin: 12px 0 8px; letter-spacing: 5px; text-indent: 5px; }
.result.lost > h1 { font-size: 21px; margin-top: 7px; margin-bottom: 6px; letter-spacing: 2px; }
.result-count { font-size: 15px; color: #687652; letter-spacing: 2px; margin: 9px 0 8px; }
.result.lost .result-stats { margin: 11px 0 14px; padding: 10px 0; }
.result.lost .result-stats b { font-size: 22px; }
.result.lost .result-stats small { font-size: 9px; }
.missing-evidence { margin-top: 11px; text-align: left; }
.missing-evidence h2 { margin: 0 0 9px; color: #677456; text-align: left; font-family: var(--sans); font-size: 10px; font-weight: normal; letter-spacing: 2px; }
.missing-evidence > div { display: flex; flex-wrap: wrap; gap: 7px; }
.missing-evidence > div > span { width: 48px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #6f795f; opacity: .7; }
.missing-evidence svg { width: 35px; height: 35px; }
.missing-evidence small { font-size: 8px; line-height: 1.4; text-align: center; }
.failure-facts { margin-top: 12px; }
.failure-facts .fact { font-family: var(--sans); font-size: 10px; padding: 7px 0; line-height: 1.8; }
.result.lost .result-actions { position: static; margin: 18px 0 10px; gap: 6px; }
.result.lost .result-actions > .primary { min-height: 49px; font-size: 15px; }
.result.lost .result-actions > .ghost { min-height: 35px; padding: 7px; }
.result.lost .result-footnote { position: static; font-size: 8px; margin-top: 11px; }

@media (hover: hover) and (pointer: fine) {
  .primary:hover:not(:disabled) { background: #f2d98b; box-shadow: 3px 5px 0 #0006; }
  .paper .primary:hover:not(:disabled) { background: #2d4233; color: #f2ecd9; }
  .secondary:hover:not(:disabled) { background: #bacb9020; border-color: #b5c29b; }
  .paper .secondary:hover:not(:disabled) { background: #69774a1a; border-color: #445d3e; }
  .ghost:hover { color: var(--yellow); }
  .paper .ghost:hover { color: #1d3b26; }
  .case-card:hover:not(.locked) { background: #f0ebdc; }
  .tool-card:hover:not(:disabled) { background: #eef0d7; border-color: #5e7750; }
  .tool-button:hover:not(:disabled) { border-color: #c8d6a0; background: #283b24; }
  .back:hover { opacity: .7; }
}
@media (max-width: 680px) {
  .desktop-note { display: none; }
  #frame { box-shadow: none; }
}
@media (max-height: 900px) and (min-width: 681px) {
  .desktop-note { top: 22px; left: 23px; font-size: 9px; letter-spacing: 2px; }
}
@keyframes load { from { transform: translateX(-30%); } to { transform: translateX(150%); } }
@keyframes rain { to { background-position: -45px 190px; } }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes urgent { 50% { opacity: .65; } }
@keyframes stamp-in { from { opacity: 0; scale: 1.7; } to { opacity: 1; scale: 1; } }
@keyframes lens-in { from { opacity: 0; transform: translateY(13px) scale(.93); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cell-error { 20%, 60% { transform: translateX(-2px); } 40%, 80% { transform: translateX(2px); } }
@keyframes reveal { 50% { outline-color: transparent; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes flash-fade { from { opacity: .8; } to { opacity: 0; } }
@keyframes report-up { from { opacity: .3; transform: translateY(90px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float-up { 0% { opacity: 0; transform: translateY(5px) scale(.9); } 15% { opacity: 1; transform: translateY(-5px) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-43px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rain { animation: none; }
  .timer.urgent { opacity: 1; }
  .floater { animation: none; }
}
.cell.error { outline: 3px solid var(--red); outline-offset: -3px; }
.evidence-flight { position: absolute; width: 48px; height: 48px; color: var(--paper-light); filter: drop-shadow(0 2px 6px #0009); animation: evidence-flight .44s cubic-bezier(.36,0,.26,1) forwards; pointer-events: none; } @keyframes evidence-flight { 0% { opacity: 1; transform: scale(1); } 25% { opacity: 1; transform: translateY(-13px) scale(1.15); } 100% { opacity: .2; transform: translate(var(--fly-x),var(--fly-y)) scale(.5); } } .is-paused .play-screen *, .is-paused .play-screen *::before, .is-paused .play-screen *::after { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .evidence-flight { animation-duration: .001ms; } }
.cell .object { inset: 0; } .cell .object svg { width: 60px; height: 60px; } .hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 35px; z-index: 1; pointer-events: none; background: linear-gradient(#0a0d0d, transparent); }