.doc-overlay { position: absolute; inset: 0; z-index: 40; display: grid; justify-items: center; align-content: center; gap: 14px;
  background: radial-gradient(ellipse 70% 70% at 50% 45%, rgba(10,14,20,.55), rgba(6,8,12,.88));
  box-shadow: 0 0 0 100vmax rgba(6,8,12,.88); } /* la sombra oscurece también las franjas fuera del escenario (1280×720, 1920×1080) */
/* La escena, desenfocada debajo del documento: los rótulos del plano no se leen junto al título. Con filter y no con
   backdrop-filter, que dentro del escenario escalado (1280×720) muestrea mal el fondo y lo duplica. */
.case-screen:has(> .doc-overlay) > :not(.doc-overlay) { filter: blur(3px); }
/* El globo del tutorial va encima del caso (z-index 45) y taparía el disco de la Orden del 65, que se abre desde el mismo
   globo: mientras haya una hoja encima, no se ve. Al cerrarla, vuelve. */
.case-screen:has(> .doc-overlay) > .tut { visibility: hidden; }
/* Lo mismo con la pausa (z-index 40 contra 45 del globo): el globo no flota sobre el menú. */
.case-screen:has(> .pause-overlay:not([hidden])) > .tut { visibility: hidden; }
.doc-meta { font-size: 15px; letter-spacing: .18em; text-transform: uppercase; color: rgba(236,223,195,.7); }
.doc-title { font: 700 italic 40px var(--f-display); color: #f0e4c8; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
/* Plan 10F: 18 px (+2) en 720 de ancho; si no entra en la pantalla (con «Texto grande», un documento largo), baja con su
   propio scroll, y «Ir a la escena» queda a la vista */
.doc { position: relative; width: 720px; min-height: 300px; max-height: 690px; overflow-y: auto; padding: 34px 40px 38px; color: var(--ink); background: #efe8d6;
  box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 6px 14px rgba(0,0,0,.45); transform: rotate(-.6deg); font-size: calc(18px * var(--tg, 1)); line-height: 1.5; }
.doc::after { content: ""; position: absolute; inset: 0; background: var(--noise); mix-blend-mode: multiply; opacity: .2; pointer-events: none; }
.doc header { font-weight: 700; font-size: 14px; letter-spacing: .14em; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1.5px solid var(--ink); }
.doc-body p + p { margin-top: 10px; }
.doc-stamp { position: absolute; right: 24px; top: -16px; transform: rotate(-9deg); font: 900 22px var(--f-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--stamp); border: 3px solid var(--stamp); padding: 4px 12px; opacity: .8; mix-blend-mode: multiply; }
.doc-telegrama { background: #e9dcb0; }
.doc-telegrama .strip { display: inline-block; background: #f7f1df; padding: 3px 8px; margin: 3px 0; box-shadow: 0 1px 2px rgba(0,0,0,.25); text-transform: uppercase; letter-spacing: .06em; }
.doc-recorte { background: #dcd8cc; font-family: Georgia, var(--f-display); transform: rotate(.8deg);
  clip-path: polygon(0 1%, 4% 0, 30% 1%, 61% 0, 100% 1%, 99% 30%, 100% 62%, 99% 100%, 70% 99%, 33% 100%, 0 99%, 1% 60%); }
.doc-recorte header { font: 900 28px var(--f-display); letter-spacing: .04em; text-align: center; border-bottom: 3px double var(--ink); }
/* La carta: el pautado va al paso del renglón (--lh), desde el primero, con cada raya en la línea base (en Architects
   Daughter queda .29em debajo del medio del renglón, a cualquier tamaño). Si cambia la letra, cambiá --lh. Los párrafos
   van con sangría y no con un margen, que corría las rayas hasta tachar las letras (Plan 10D). local: si la hoja baja con
   su propio scroll, el pautado baja con el texto. */
.doc-carta { --lh: 30px; font: calc(23px * var(--tg, 1))/var(--lh) var(--f-hand); transform: rotate(1.2deg); background-color: #f3eedf;
  background-image: linear-gradient(180deg, transparent calc(var(--lh) - 1px), rgba(70,110,165,.5) 0); background-size: 100% var(--lh);
  background-origin: content-box; background-position: 0 calc(var(--lh) / 2 + .29em + 1px); background-attachment: local; }
.doc-carta .doc-body p + p { margin-top: 0; text-indent: 2em; }
.doc-llamada .line { padding-left: 22px; }
.doc-cuaderno { background: #f4f1e6; background-image: linear-gradient(rgba(70,110,165,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(70,110,165,.16) 1px, transparent 1px);
  background-size: 20px 20px; font: calc(23px * var(--tg, 1))/1.3 var(--f-hand); }
.doc-go { padding: 12px 28px; border-radius: 6px; font: 700 italic 20px var(--f-display); color: #1b1408; background: linear-gradient(180deg, #e9c977, #b98e3a);
  box-shadow: 0 0 22px rgba(232,201,119,.35), 0 8px 16px rgba(0,0,0,.45); }
.doc-cuaderno::before { content: ""; position: absolute; right: 46px; top: -14px; /* a la derecha: a la izquierda tapaba la C de «Cuaderno» */ width: 18px; height: 54px; border: 3px solid #9aa3ad; border-radius: 10px; box-shadow: 0 2px 3px rgba(0,0,0,.4); }

/* Caso cerrado: la primera plana de El Cronista (Plan 10F). Cuatro armados sobre una grilla con áreas: «clásica» (la de la
   maqueta aprobada), «izquierda», «banda» y «extra». Las medidas son las de frontMetrics (app/js/cronista.js): si
   cambia una, cambia la otra (tests/app/cronista.test.js mira las de acá). */
.closed-screen .front { position: absolute; left: 52px; top: 78px; width: 880px; height: 806px; padding: 46px 36px 26px; display: grid; gap: 12px 20px;
  background: #e3dccb; color: #1a1a1a; box-shadow: 0 30px 60px rgba(0,0,0,.6); transform: rotate(-.8deg); font-family: Georgia, var(--f-display); }
/* entra girando (spec §8), y queda quieta con «Reducir movimiento» */
.closed-screen .front { animation: front-in .6s cubic-bezier(.2,.7,.3,1) both; }
@keyframes front-in { from { transform: rotate(-200deg) scale(.15); opacity: 0; } }
html.sin-movimiento .closed-screen .front { animation: none; }
@media (prefers-reduced-motion: reduce) { html:not(.con-movimiento) .closed-screen .front { animation: none; } }
.closed-screen .front::after { content: ""; position: absolute; inset: 0; background: var(--noise); mix-blend-mode: multiply; opacity: .25; pointer-events: none; }
.front > * { min-width: 0; min-height: 0; }
.front.l-clasica { grid-template-columns: 170px 1fr 236px; grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas: "mast mast mast" "head head head" "mug nota col" "band band band" "tiempo tiempo tiempo"; }
.front.l-izquierda { grid-template-columns: 256px 1fr 190px; grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "mast mast mast" "col head head" "col nota mug" "tiempo tiempo tiempo"; }
.front.l-banda { grid-template-columns: 180px 1fr; grid-template-rows: auto auto auto 1fr auto auto;
  grid-template-areas: "mast mast" "top top" "head head" "mug nota" "strip strip" "tiempo tiempo"; }
.front.l-extra { grid-template-columns: 1fr 230px; grid-template-rows: auto auto auto 1fr auto auto;
  grid-template-areas: "ribbon ribbon" "mast mast" "head head" "nota mug" "band band" "tiempo tiempo"; }
/* la cabecera: el nombre y, debajo, el número, el día y el precio; en la edición extra, la cinta roja arriba */
.mast { grid-area: mast; text-align: center; border-bottom: 4px double #1a1a1a; padding-bottom: 8px; }
.mast h1 { white-space: nowrap; font: 900 40px/1 var(--f-display); letter-spacing: .03em; }
.mast .folio { display: flex; justify-content: space-between; margin-top: 8px; font: 14px/17px var(--f-type); letter-spacing: .06em; text-transform: uppercase; }
.ribbon { grid-area: ribbon; height: 34px; display: grid; place-items: center; background: var(--stamp); color: #f6efe0; font: 900 20px/1 var(--f-display); letter-spacing: .4em; text-transform: uppercase; }
/* el titular: el tamaño lo elige headlineFit, y closed.js lo pone en --hs */
.headline { grid-area: head; align-self: center; font: 900 var(--hs, 36px)/1.08 var(--f-display); text-align: center; text-transform: uppercase; }
/* la foto del culpable (o de quien selló), que se recorta si no hay alto */
.mugshot { grid-area: mug; position: relative; align-self: start; max-height: 100%; display: flex; flex-direction: column; background: #f6f2e6; padding: 8px 8px 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35); transform: rotate(1.5deg); }
.mugshot img { flex: 0 1 auto; min-height: 0; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: sepia(.6) contrast(1.05) grayscale(.35); }
.mugshot figcaption { flex: none; margin-top: 8px; font: italic calc(14px * var(--tg, 1))/1.3 Georgia, serif; text-align: center; }
/* «Cerrado», sobre la parte de abajo de la foto: asoma hacia el margen de la página (a la izquierda, o a la derecha si la
   foto va a la derecha), nunca hacia la nota, y no toca el pie de foto */
.mugshot .big-stamp { left: -34px; top: auto; bottom: calc(84px * var(--tg, 1)); font-size: 30px; border-width: 5px; padding: 3px 14px;
  /* sobre la foto, sin multiplicar y con fondo color papel: el rojo se lee igual sobre una foto clara, oscura o de tono medio */
  mix-blend-mode: normal; opacity: 1; background: rgba(244,238,224,.82); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.l-izquierda .mugshot .big-stamp, .l-extra .mugshot .big-stamp { left: auto; right: -34px; }
/* la nota, que llena su caja */
.nota { grid-area: nota; overflow: hidden; font-size: calc(17px * var(--tg, 1)); line-height: calc(24px * var(--tg, 1)); text-align: justify; }
.nota p + p { margin-top: 6px; text-indent: 1.2em; }
.l-banda .nota, .l-extra .nota { columns: 2; column-gap: 20px; }
/* las breves: en la columna, en la banda de arriba o en la de abajo */
.col { grid-area: col; display: flex; flex-direction: column; gap: 10px; padding-left: 16px; border-left: 1px solid rgba(26,26,26,.55); overflow: hidden; }
.l-izquierda .col { padding: 0 16px 0 0; border-left: 0; border-right: 1px solid rgba(26,26,26,.55); }
.col > h3 { flex: none; height: 24px; font: 700 14px/17px var(--f-type); letter-spacing: .22em; text-transform: uppercase; border-bottom: 1px solid #1a1a1a; }
.breve { flex: 1 1 0; min-height: 0; overflow: hidden; }
.breve h4 { margin-bottom: 4px; font: 900 calc(16px * var(--tg, 1))/calc(18.5px * var(--tg, 1)) var(--f-display); text-transform: uppercase; }
.breve p { font: calc(15px * var(--tg, 1))/calc(21px * var(--tg, 1)) Georgia, serif; }
.col .breve + .breve { border-top: 1px solid rgba(26,26,26,.3); padding-top: 10px; }
/* .top es también la barra de arriba de la app (case.css, arkham.css) y .strip, la tira del telegrama: acá van acotadas a la hoja */
.front :is(.top, .band) { display: grid; gap: 18px; overflow: hidden; }
.closed-screen .front .top { grid-area: top; height: 150px; grid-template-columns: repeat(3, 1fr); border-bottom: 3px double #1a1a1a; padding-bottom: 12px; position: static; align-items: stretch; }
.band { grid-area: band; border-top: 3px double #1a1a1a; padding-top: 10px; }
.l-clasica .band { height: 122px; grid-template-columns: 1fr 250px; }
.l-extra .band { height: 140px; grid-template-columns: repeat(3, 1fr); }
.top .breve + .breve, .band .breve + .breve { border-left: 1px solid rgba(26,26,26,.3); padding-left: 16px; }
/* el aviso de época: en la columna, en la banda o en una franja */
.aviso { display: grid; align-content: center; gap: 3px; overflow: hidden; border: 2px solid #1a1a1a; outline: 1px solid #1a1a1a; outline-offset: 2px; padding: 8px 10px; text-align: center; }
.aviso b { font: 900 14px/16px var(--f-display); letter-spacing: .02em; }
.aviso i { font: italic calc(15px * var(--tg, 1))/1.3 Georgia, serif; }
.aviso small { font: 14px/17px var(--f-type); letter-spacing: .02em; text-transform: uppercase; }
.col .aviso { flex: none; height: 120px; }
.front .strip { grid-area: strip; height: 56px; }
.strip .aviso { height: 100%; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; padding: 6px 14px; text-align: left; }
.strip .aviso b { grid-column: 1; grid-row: 1; }
.strip .aviso small { grid-column: 1; grid-row: 2; }
.strip .aviso i { grid-column: 2; grid-row: 1 / 3; align-self: center; }
/* el tiempo, en un renglón y sin «Texto grande» (como un rótulo): crecido, no entra y la escalera sacaría las breves */
.tiempo { grid-area: tiempo; border-top: 1px solid rgba(26,26,26,.5); padding-top: 6px; overflow: hidden; white-space: nowrap; text-align: center;
  font: 14px/17px var(--f-type); letter-spacing: .06em; }
/* lo que no entra se aprieta (closed.js, STATES): f1 junta los renglones; f2 saca las breves de arriba o de abajo y la
   franja del aviso, solo como último recurso. La columna de breves no se saca nunca: antes baja «Texto grande». */
.front.f1 .nota { line-height: calc(22px * var(--tg, 1)); }
.front.f1 .breve p { line-height: calc(19px * var(--tg, 1)); }
.front.f2 :is(.band, .top, .strip) { display: none; }
.closed-side { position: absolute; left: 960px; top: 110px; width: 420px; display: grid; gap: 22px; }
.closed-side section { position: relative; padding: 18px 20px; background: #efe9da; color: var(--ink); box-shadow: 0 14px 26px rgba(0,0,0,.45); }
.closed-side h3 { font: 700 italic 18px var(--f-display); margin-bottom: 8px; }
.ev-object { font: 700 calc(16px * var(--tg, 1))/1.3 var(--f-display); }
.ev-proof { margin-top: 6px; font: calc(14px * var(--tg, 1))/1.35 var(--f-display); color: rgba(33,26,16,.78); }
.notebook p { font: calc(22px * var(--tg, 1))/1.35 var(--f-hand); color: var(--pencil); }
.merit { justify-self: start; padding: 8px 18px; font: 900 20px var(--f-display); letter-spacing: .16em; text-transform: uppercase; border: 3px solid currentColor; transform: rotate(-4deg); }
.m-impecable { color: #d9b25a; } .m-resuelto { color: #b8c2b0; } .m-ayuda { color: #9fb0c7; } .m-codigo { color: #c98a86; }
.closed-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.closed-actions button { padding: 11px 18px; border: 1px solid rgba(201,162,76,.5); border-radius: 6px; font-size: 15px; }
.closed-actions .primary { color: #1b1408; background: linear-gradient(180deg, #e9c977, #b98e3a); font: 700 italic 18px var(--f-display); }
.big-stamp { position: absolute; left: 340px; top: 650px; font: 900 96px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--stamp);
  border: 8px solid var(--stamp); padding: 6px 26px; transform: rotate(-14deg); opacity: .9; mix-blend-mode: multiply; animation: stamp .35s ease-out both; pointer-events: none; }
@keyframes stamp { from { transform: rotate(-14deg) scale(1.4); opacity: 0; } to { transform: rotate(-14deg) scale(1); opacity: .9; } }

.title-screen { display: grid; justify-items: center; align-content: center; gap: 16px; }
.title-lamp { position: absolute; inset: 0; background: radial-gradient(ellipse 40% 36% at 50% 30%, rgba(255,196,120,.18), transparent 70%); pointer-events: none; }
/* Plan 10F: «PUERTO UMBRAL» en un renglón (unos 960 px) y «Cien expedientes · 1934» */
.title-mark { font: 900 80px/1 var(--f-display); letter-spacing: .16em; margin-right: -.16em; white-space: nowrap; color: #f0e4c8; text-shadow: 0 3px 0 rgba(0,0,0,.6), 0 0 40px rgba(232,201,119,.15); }
.title-sub { font: italic 22px var(--f-display); color: rgba(236,223,195,.75); letter-spacing: .12em; }
.title-menu { margin-top: 28px; display: grid; gap: 12px; width: 340px; }
.title-menu button { height: 52px; border: 1px solid rgba(201,162,76,.45); border-radius: 7px; font-size: 17px; color: rgba(236,223,195,.9); background: rgba(13,18,25,.6); }
.title-menu button:hover, .title-menu button:focus-visible { border-color: var(--brass-hi); color: var(--brass-hi); }
.title-menu .primary { color: #1b1408; background: linear-gradient(180deg, #e9c977, #b98e3a); font: 700 italic 22px var(--f-display); }
.title-foot { position: absolute; bottom: 34px; font-size: 14px; color: rgba(236,223,195,.55); letter-spacing: .14em; text-transform: uppercase; }
.access-stamp { position: absolute; right: 120px; top: 120px; transform: rotate(8deg); font: 900 18px var(--f-display); letter-spacing: .18em; text-transform: uppercase;
  color: #c98a86; border: 2px solid #c98a86; padding: 6px 14px; opacity: .8; }
.files-title { position: absolute; left: 60px; top: 92px; font: 700 italic 38px var(--f-display); color: #f0e4c8; }
.cabinet { position: absolute; left: 60px; right: 60px; top: 150px; bottom: 30px; display: grid; grid-template-rows: repeat(10, 1fr); gap: 8px; }
.drawer { display: grid; grid-template-columns: 300px 1fr; align-items: center; gap: 18px; padding: 6px 14px; border-radius: 4px;
  background: linear-gradient(180deg, #1c2533, #151c27); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 10px rgba(0,0,0,.4); }
.drawer header { display: grid; grid-template-columns: 38px 1fr; column-gap: 10px; align-items: baseline; }
.drawer-num { grid-row: span 2; font: 900 26px var(--f-display); color: var(--brass); }
.drawer h3 { font: 700 italic 17px var(--f-display); color: #f0e4c8; }
.drawer h3.unopened { color: rgba(240,228,200,.4); }
.drawer-size { font-size: 14px; color: rgba(236,223,195,.55); }
.folders { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
.file { position: relative; height: 50px; border-radius: 4px 4px 2px 2px; background: linear-gradient(170deg, #d6bb85, #c2a36b); color: #241d13;
  box-shadow: 0 3px 6px rgba(0,0,0,.4); font: 700 16px var(--f-type); display: grid; justify-items: center; align-content: start; padding-top: 5px; }
.file.current { box-shadow: 0 0 0 2px var(--brass-hi), 0 0 18px rgba(232,201,119,.4); }
.file.locked { background: #3a3f48; color: rgba(236,223,195,.35); cursor: not-allowed; }
.file .seal { position: absolute; right: 6px; bottom: 6px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d0544a, #8f2a22); }
.file-merit { position: absolute; left: 2px; right: 2px; bottom: 3px; font: 700 14px/16px var(--f-type); letter-spacing: -.02em; text-align: center; white-space: nowrap; }
/* los colores de .m-* son para fondo oscuro; la carpeta es dorada */
.file .file-merit { color: #3a2a10; }
.file.solved .file-num { opacity: .6; }
.title-menu .primary:hover, .title-menu .primary:focus-visible { color: #1b1408; filter: brightness(1.1); }

.manual { position: absolute; left: 180px; right: 180px; top: 96px; bottom: 30px; overflow: auto; padding: 34px 44px; background: #efe9da; color: var(--ink);
  box-shadow: 0 30px 60px rgba(0,0,0,.55); user-select: text; }
.manual h2 { font: 700 italic 38px var(--f-display); margin-bottom: 18px; }
.manual h3 { font: 700 italic 21px var(--f-display); margin: 22px 0 10px; border-bottom: 1px dashed rgba(29,34,48,.35); padding-bottom: 4px; }
.manual li { margin: 6px 0 6px 20px; font-size: calc(17px * var(--tg, 1)); line-height: 1.5; }
.manual table { border-collapse: collapse; font-size: calc(16px * var(--tg, 1)); }
.manual th { text-align: left; padding: 5px 18px 5px 0; white-space: nowrap; }
.manual td { padding: 5px 0; }
.glossary dl { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; font-size: calc(16px * var(--tg, 1)); }
.glossary dt { font-weight: 700; }
.opt { display: flex; align-items: center; gap: 12px; margin: 10px 0; font-size: calc(16px * var(--tg, 1)); }
.opt > span:first-child { flex: none; width: 200px; } /* los rótulos de las opciones con control a la derecha: los controles quedan alineados */
.opt input[type=checkbox] { width: 18px; height: 18px; accent-color: #8a6a2c; }
.opt input[type=range] { width: 260px; accent-color: #8a6a2c; }
.seg { display: flex; border: 1px solid rgba(29,34,48,.4); border-radius: 5px; overflow: hidden; }
.seg button { padding: 6px 12px; font-size: 15px; }
.seg button.on { background: var(--ink); color: #f3ead6; }
.danger { margin-top: 8px; padding: 8px 14px; border: 1.5px solid var(--stamp); color: var(--stamp); border-radius: 5px; font-weight: 700; }

.tut { position: absolute; z-index: 45; width: 300px; padding: 14px 16px; background: #f6f1e4; color: var(--ink); border-left: 4px solid var(--brass);
  box-shadow: 0 18px 34px rgba(0,0,0,.55); font-size: calc(15px * var(--tg, 1)); line-height: 1.45; }
.tut-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.tut-next { padding: 6px 14px; background: var(--ink); color: #f3ead6; border-radius: 4px; font-weight: 700; }
.tut-skip { padding: 6px 10px; color: var(--ink-2); }
.tut-focus { outline: 3px solid var(--brass-hi); outline-offset: 4px; border-radius: 6px; }

.interlude-screen { display: grid; place-items: center; }
.interlude-sheet { position: relative; width: 780px; max-width: 100%; min-height: 520px; padding: 54px 64px 44px; background: var(--paper); color: var(--ink);
  background-image: var(--noise); background-blend-mode: multiply; box-shadow: 0 30px 70px rgba(0,0,0,.6); transform: rotate(-.6deg); }
.interlude-num { font: 700 14px var(--f-type); letter-spacing: .32em; text-transform: uppercase; color: var(--stamp); }
.interlude-title { font: 700 italic 40px/1.1 var(--f-display); margin: 6px 0 26px; }
.typed { min-height: 300px; font: calc(19px * var(--tg, 1))/1.58 var(--f-type); }
.typed p + p { margin-top: 16px; }
.caret { display: inline-block; width: 9px; height: 19px; margin-left: 2px; vertical-align: -3px; background: var(--ink); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.interlude-sheet footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.interlude-sheet .primary { padding: 10px 20px; border-radius: 6px; color: #1b1408; background: linear-gradient(180deg, #e9c977, #b98e3a); font: 700 italic 18px var(--f-display); }
.interlude-sheet .ghost { padding: 10px 16px; border: 1px solid rgba(29,34,48,.35); border-radius: 6px; font-size: 15px; }

.back-to-case { position: absolute; top: 112px; right: 210px; z-index: 5; padding: 9px 16px; border-radius: 6px; color: #1b1408;
  background: linear-gradient(180deg, #e9c977, #b98e3a); font: 700 italic 16px var(--f-display); box-shadow: 0 8px 18px rgba(0,0,0,.45); }
.nav .sound { display: grid; place-items: center; width: 34px; height: 34px; }
.nav .sound[aria-pressed="true"] { color: var(--stamp); }

.archive-tabs { position: absolute; right: 60px; top: 100px; display: flex; gap: 6px; }
.archive-tabs button { padding: 7px 14px; border: 1px solid rgba(201,162,76,.3); border-bottom: 0; border-radius: 5px 5px 0 0;
  font: 700 14px var(--f-type); letter-spacing: .06em; color: rgba(236,223,195,.75); background: rgba(13,18,25,.55); }
.archive-tabs button.on { color: #1b1408; background: linear-gradient(180deg, #d6bb85, #c2a36b); border-color: #c2a36b; }
.archive-sub { position: absolute; left: 62px; top: 142px; font: italic 16px var(--f-display); color: rgba(236,223,195,.7); }
.chapter-pick { position: absolute; left: 380px; top: 138px; display: flex; gap: 5px; }
.chapter-pick button { width: 34px; height: 28px; border: 1px solid rgba(201,162,76,.35); border-radius: 4px; font: 700 14px var(--f-type); color: rgba(236,223,195,.75); }
.chapter-pick button.on { color: #1b1408; background: var(--brass); border-color: var(--brass); }
.chapter-pick button:disabled { opacity: .3; }
.cork { position: absolute; left: 60px; top: 176px; width: 1320px; height: 640px; overflow: hidden; border-radius: 4px;
  background-color: #8d6a42; background-blend-mode: multiply;
  background-image: var(--noise), radial-gradient(circle at 20% 30%, rgba(60,36,14,.35) 0 1.5px, transparent 2px), radial-gradient(circle at 70% 60%, rgba(60,36,14,.3) 0 1.2px, transparent 1.8px);
  background-size: 240px 240px, 9px 9px, 13px 13px;
  box-shadow: inset 0 0 0 10px #5a3f24, inset 0 0 40px rgba(0,0,0,.45), 0 18px 40px rgba(0,0,0,.5); }
.cork .threads, .cork .pins { position: absolute; inset: 0; pointer-events: none; }
.cork .pins { z-index: 3; }
.thread { fill: none; stroke: #b3342b; stroke-width: 1.7; filter: drop-shadow(0 2px 1px rgba(0,0,0,.35)); transition: opacity .2s, stroke-width .2s; }
.exit { font: 14px var(--f-type); fill: #f3ead6; paint-order: stroke; stroke: rgba(40,24,10,.85); stroke-width: 3px; }
.cork.focusing .thread { opacity: .18; }
.cork.focusing .thread.hot { opacity: 1; stroke-width: 2.6; }
.pin { fill: #e8c977; stroke: #6d5320; stroke-width: 1.2; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.clipping { position: absolute; z-index: 1; width: 220px; height: 150px; padding: 14px 14px 10px; color: var(--ink); background: #efe6cf;
  box-shadow: 0 8px 16px rgba(0,0,0,.45); cursor: pointer; transition: box-shadow .18s; }
.clipping:hover { z-index: 2; box-shadow: 0 0 0 2px var(--brass-hi), 0 12px 24px rgba(0,0,0,.5); }
.clip-meta { font: 14px/1.2 var(--f-type); color: var(--ink-2); }
.clipping h3 { margin-top: 4px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; font: 900 14px/1.18 var(--f-display); text-transform: uppercase; }
.clip-title { margin-top: 6px; font: italic 14px var(--f-display); color: var(--ink-2); }
/* Las fotos cuelgan arriba del recorte, sin tapar la fecha ni el titular (spec §7.2). */
.polaroid { position: absolute; top: -80px; width: 62px; padding: 3px 3px 17px; background: #fbf8f0; box-shadow: 0 4px 8px rgba(0,0,0,.45); }
.polaroid img { display: block; width: 56px; height: 62px; object-fit: cover; filter: sepia(.7) contrast(1.05); }
.polaroid figcaption { position: absolute; left: -4px; right: -4px; bottom: 1px; text-align: center; white-space: nowrap; font: 14px/16px var(--f-hand); letter-spacing: -.02em; }
.polaroid.culprit, .polaroid.sealer { right: 6px; transform: rotate(5deg); }
.polaroid.victim { left: 6px; transform: rotate(-5deg); }
.polaroid.victim + .polaroid.victim { left: 72px; }
.polaroid.victim::after { content: ''; position: absolute; inset: 3px 3px 12px;
  background: linear-gradient(45deg, transparent 46%, rgba(179,52,43,.85) 47% 53%, transparent 54%), linear-gradient(-45deg, transparent 46%, rgba(179,52,43,.85) 47% 53%, transparent 54%); }
.polaroid.sealer { box-shadow: 0 0 0 2px var(--brass), 0 4px 8px rgba(0,0,0,.45); }
.cork-empty { position: absolute; inset: 0; display: grid; place-items: center; font: italic 20px var(--f-display); color: rgba(243,234,214,.8); }
/* El hilo de un caso nuevo se dibuja (spec §8). pathLength = 1, así que el largo del trazo es 1. */
.thread.fresh { stroke-dasharray: 1; animation: thread-draw 1.4s ease-in-out .3s both; }
@keyframes thread-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* Reducir movimiento: las reglas globales solo acortan la animación, y el retardo dejaría el hilo sin dibujar un rato. */
html.sin-movimiento .thread.fresh { animation: none; }
@media (prefers-reduced-motion: reduce) { html:not(.con-movimiento) .thread.fresh { animation: none; } }
.map-frame { position: absolute; left: 220px; top: 166px; box-shadow: 0 24px 50px rgba(0,0,0,.55); }
.city-map-wrap { position: relative; width: 1000px; height: 700px; }
.city-map, .city-map-top { display: block; will-change: transform; }
.city-map-top { position: absolute; inset: 0; }
/* El plano grabado (screens/cityMap.js): tinta sepia sobre papel viejo. */
.city-map .map-paper { fill: #eadfc2; }
.map-block { fill: url(#mapa-manzana); stroke: rgba(40,32,22,.55); stroke-width: .5; }
.map-block-shadow { fill: rgba(60,44,24,.16); }
.map-block.dense { fill: url(#mapa-denso); }
.map-water-tint { fill: #d3d6c6; }
.map-notable { fill: url(#mapa-notable); stroke: rgba(30,24,16,.85); stroke-width: .8; }
.hatch-block { stroke: rgba(60,48,30,.26); stroke-width: .45; }
.hatch-dense { stroke: rgba(50,40,26,.42); stroke-width: .5; }
.hatch-notable { stroke: rgba(30,24,16,.8); stroke-width: .7; }
.hatch-water { stroke: rgba(52,74,84,.5); stroke-width: .5; }
.hatch-field { stroke: rgba(70,80,50,.32); stroke-width: .45; }
.map-field { stroke: rgba(60,64,40,.42); stroke-width: .6; stroke-dasharray: 3 1.5; }
.map-block.quinta { fill: rgba(234,223,194,.5); stroke-dasharray: 2.5 1.5; }
.map-baldio { fill: none; stroke: rgba(40,32,22,.45); stroke-width: .6; stroke-dasharray: 1.6 2; }
.map-tufts { fill: none; stroke: rgba(70,84,52,.5); stroke-width: .6; }
.map-lane-edge { fill: none; stroke: rgba(60,48,30,.55); stroke-linecap: round; stroke-linejoin: round; }
.map-lane { fill: none; stroke: #e8dcbd; stroke-linecap: round; stroke-linejoin: round; }
.map-roundabout { fill: #e9dfc4; stroke: rgba(30,24,16,.75); stroke-width: 1; }
.map-vines { stroke: rgba(70,60,40,.55); stroke-width: .6; stroke-dasharray: 1.4 1.2; }
.map-road { fill: none; stroke: rgba(60,48,30,.6); stroke-width: 1; stroke-dasharray: 5 3; }
.map-tree { fill: rgba(110,124,84,.32); stroke: rgba(40,44,28,.62); stroke-width: .55; }
.map-tree-shade { fill: rgba(40,44,28,.35); }
.map-trees { fill: rgba(70,84,52,.5); }
.map-avenue-edge, .map-mole-edge, .map-pier-edge, .map-rail-edge { fill: none; stroke: rgba(30,24,16,.8); stroke-linecap: square; stroke-linejoin: round; }
.map-avenue, .map-mole, .map-pier { fill: none; stroke: #eadfc2; stroke-linecap: square; stroke-linejoin: round; }
.map-avenue-trees { fill: none; stroke: rgba(70,84,52,.55); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 0 7; }
.map-barranca { stroke: rgba(60,46,28,.55); stroke-width: .7; }
.city-map path.map-water { fill: url(#mapa-agua); }
.map-echo { fill: none; stroke: #4c6670; stroke-width: .7; }
.map-bank { fill: none; stroke: rgba(30,36,40,.85); stroke-width: 1.1; }
.map-coast { fill: none; stroke: rgba(24,30,34,.9); stroke-width: 1.6; }
.map-dock rect { fill: #d3d6c6; stroke: rgba(30,24,16,.85); stroke-width: 1; }
.map-dock .gate { stroke: rgba(30,24,16,.9); stroke-width: 2.4; }
.map-hull { fill: none; stroke: rgba(30,24,16,.75); stroke-width: .8; }
.map-escollera-edge { fill: none; stroke: #5a5446; stroke-width: 8; stroke-linecap: round; }
.map-escollera { fill: none; stroke: #cbbf9f; stroke-width: 5.4; stroke-dasharray: 4 1.4 3 1.8 5 1.2; stroke-linecap: butt; }
.map-rail { fill: none; stroke: #eadfc2; }
.map-rail-ties { fill: none; stroke: rgba(30,24,16,.85); stroke-width: 7; stroke-dasharray: 1 5; }
.map-siding { fill: none; stroke: rgba(30,24,16,.6); stroke-width: 1.2; stroke-dasharray: 3 2.5; }
.map-bridge-edge { fill: none; stroke: rgba(30,24,16,.9); stroke-linecap: butt; }
.map-bridge { fill: none; stroke: #eadfc2; stroke-linecap: butt; }
.map-plaza-paths { fill: none; stroke: rgba(60,48,30,.5); stroke-width: .8; }
.map-monument { fill: rgba(30,24,16,.85); }
.map-wall { fill: rgba(234,223,194,.6); stroke: rgba(30,24,16,.8); stroke-width: 1.4; }
.map-wall.thin { stroke-width: .9; }
.map-crosses { stroke: rgba(30,24,16,.7); stroke-width: .7; }
.map-glass { fill: #c9d6d2; stroke: rgba(30,24,16,.8); stroke-width: .7; }
.map-track { fill: none; stroke: rgba(30,24,16,.75); stroke-width: 1.1; }
.map-track.inner { fill: url(#mapa-campo-0); stroke-width: .8; }
.map-shed { stroke: rgba(30,24,16,.75); stroke-width: 1; }
.map-symbol { fill: rgba(24,18,12,.92); }
.map-clock { fill: #f1e8cf; stroke: rgba(24,18,12,.9); stroke-width: 1.1; }
.map-clock-hands { stroke: rgba(24,18,12,.9); stroke-width: 1; stroke-linecap: round; }
.map-flag { fill: #9c2c24; stroke: rgba(24,18,12,.9); stroke-width: .9; }
.map-faro .glow { fill: rgba(232,201,119,.28); }
.map-faro .rays { stroke: #9a7a2e; stroke-width: 1.1; }
.map-faro .tower { fill: rgba(24,18,12,.92); }
.map-faro .lamp { fill: #f3d77f; }
.map-ship path { fill: rgba(30,24,16,.75); }
.map-boats { fill: rgba(30,24,16,.7); stroke: rgba(30,24,16,.8); stroke-width: .5; }
.map-ship .smoke { fill: none; stroke: rgba(30,24,16,.4); stroke-width: 1; }
.map-stains { opacity: .55; mix-blend-mode: multiply; }
.map-grain { opacity: .3; mix-blend-mode: multiply; }
.map-fold { stroke: rgba(90,66,30,.22); stroke-width: 1.2; }
.map-district { font: 700 15px var(--f-display); letter-spacing: .34em; fill: rgba(30,24,16,.66); }
.map-name, .map-street { font: italic 400 14px var(--f-display); fill: rgba(24,18,12,.9); }
.map-street { fill: rgba(24,18,12,.7); }
text.map-water { font: italic 700 15px var(--f-display); fill: #2f4a56; letter-spacing: .06em; }
.map-labels text, .map-water-label { paint-order: stroke; stroke: #e6dbbd; stroke-width: 3.5px; stroke-linejoin: round; }
.map-water-label { font: italic 700 17px var(--f-display); letter-spacing: .42em; fill: #2f4a56; }
.map-rose circle { fill: none; stroke: rgba(24,18,12,.8); stroke-width: 1; }
.map-rose .thin { stroke-width: .5; }
.map-rose .ticks { stroke: rgba(24,18,12,.8); stroke-width: .7; }
.map-rose .light { fill: #efe6cc; stroke: rgba(24,18,12,.85); stroke-width: .6; }
.map-rose .dark { fill: rgba(24,18,12,.85); stroke: rgba(24,18,12,.85); stroke-width: .6; }
.map-rose .north { fill: var(--stamp); stroke: rgba(24,18,12,.85); stroke-width: .6; }
.map-rose text { font: 900 16px var(--f-display); fill: rgba(24,18,12,.9); paint-order: stroke; stroke: #e6dbbd; stroke-width: 3px; }
.map-cartouche .frame { fill: #ece2c6; stroke: rgba(24,18,12,.9); stroke-width: 1.6; }
.map-cartouche .inner, .map-cartouche .flourish, .map-cartouche .rule { fill: none; stroke: rgba(24,18,12,.75); stroke-width: .7; }
.map-cartouche .dark { fill: rgba(24,18,12,.88); }
.map-cartouche .light { fill: #ece2c6; }
.map-cartouche .scale-box { fill: none; stroke: rgba(24,18,12,.9); stroke-width: .8; }
.map-title { font: 900 25px var(--f-display); letter-spacing: .2em; fill: rgba(24,18,12,.95); }
.map-subtitle { font: italic 400 16px var(--f-display); fill: rgba(24,18,12,.85); }
.map-scale { font: italic 400 14px var(--f-display); fill: rgba(24,18,12,.85); }
.map-border { fill: none; stroke: rgba(24,18,12,.9); stroke-width: 1.6; }
.map-border.thin { stroke-width: .7; }
.map-border-ticks { fill: none; stroke: rgba(24,18,12,.85); stroke-width: 4; stroke-dasharray: 20 20; }
.map-pin line { stroke: #6d5320; stroke-width: 1.4; }
.map-pin .pin-shadow { stroke: rgba(40,28,10,.3); stroke-width: 1.6; stroke-linecap: round; }
.map-pin circle { fill: url(#mapa-cabeza); stroke: #5a1712; stroke-width: .8; filter: drop-shadow(0 1.5px 1px rgba(0,0,0,.45)); }
.map-pin .shine { fill: rgba(255,235,220,.75); stroke: none; filter: none; }
.map-pin:hover circle:not(.shine) { fill: #e05a4c; }
/* La figura: el círculo a lápiz rojo y la estrella de hilo rojo. Al revelarse, se traza (primero el círculo). */
.map-sigil path { fill: none; }
.map-sigil .pencil { stroke: #c0392b; stroke-width: 3.6; stroke-linecap: round; opacity: .9; }
.map-sigil .pencil.second { stroke-width: 1.8; opacity: .6; }
.map-sigil .thread { stroke: #9c1c16; stroke-width: 1.8; stroke-linecap: round; }
.map-sigil .thread-hi { stroke: rgba(236,120,104,.7); stroke-width: .6; }
.map-sigil .thread-shadow { stroke: rgba(40,20,10,.28); stroke-width: 1.8; }
.map-sigil .knot { stroke: #9c1c16; stroke-width: 1.2; stroke-linecap: round; }
.map-sigil.draw :is(.pencil, .thread, .thread-hi, .thread-shadow) { stroke-dasharray: 1; animation: sigil-draw 2.6s ease-in-out both; }
.map-sigil.draw .pencil.second { animation-delay: .5s; }
.map-sigil.draw :is(.thread, .thread-hi, .thread-shadow) { animation-delay: 2.4s; animation-duration: 2.2s; }
.map-sigil.draw .knots { animation: sigil-knots .4s ease-out 4.5s both; }
@keyframes sigil-knots { from { opacity: 0; } }
@keyframes sigil-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* El alfiler de un caso nuevo cae sobre el mapa (spec §8). */
.pin-drop { animation: pin-drop .5s cubic-bezier(.3, 1.5, .6, 1) both; }
@keyframes pin-drop { from { transform: translateY(-46px); opacity: 0; } 60% { opacity: 1; } }
/* Reducir movimiento: las reglas globales solo acortan la animación, y los retardos harían aparecer de a uno lo que ya
   está; así, el sigilo y los alfileres se ven quietos y enteros de entrada. */
html.sin-movimiento :is(.pin-drop, .map-sigil.draw path, .map-sigil.draw .knots) { animation: none; }
@media (prefers-reduced-motion: reduce) { html:not(.con-movimiento) :is(.pin-drop, .map-sigil.draw path, .map-sigil.draw .knots) { animation: none; } }
.map-overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; align-content: center; gap: 12px; background: rgba(9,12,18,.9); }
.map-overlay figure { box-shadow: 0 24px 50px rgba(0,0,0,.6); transform: scale(.9); margin: -30px 0; }
.map-overlay p { font: italic 21px var(--f-display); color: #f0e4c8; }
.map-overlay .primary { padding: 10px 20px; border-radius: 6px; color: #1b1408; background: linear-gradient(180deg, #e9c977, #b98e3a); font: 700 italic 17px var(--f-display); }
/* Al cerrar el 50, el mapa se revela sobre la columna del costado y nunca tapa el diario (spec §3.7): el plano de
   1000×700 queda en 460×322 (los márgenes negativos le sacan a la caja lo que achica la escala). */
.closed-screen .map-overlay { left: 940px; }
.closed-screen .map-overlay figure { transform: scale(.46); margin: -189px -270px; }

.card-file { position: absolute; left: 60px; right: 52px; top: 176px; bottom: 28px; overflow-y: auto; padding: 6px 8px 24px 2px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; align-content: start; }
.index-card { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 10px; height: 118px; padding: 12px 12px 10px; color: var(--ink);
  background: repeating-linear-gradient(180deg, transparent 0 21px, rgba(43,75,138,.16) 21px 22px), var(--card); border-top: 3px solid rgba(179,52,43,.5);
  box-shadow: 0 6px 14px rgba(0,0,0,.4); }
.index-card img { width: 64px; height: 86px; object-fit: cover; filter: sepia(.75) contrast(1.05); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.index-card h3 { font: 700 italic calc(16px * var(--tg, 1))/1.1 var(--f-display); }
.ic-role { margin-top: 4px; font: calc(14px * var(--tg, 1))/1.25 var(--f-type); color: var(--ink-2); }
.ic-cases { margin-top: 5px; font: calc(14px * var(--tg, 1))/1.3 var(--f-type); }
.ic-stamp { position: absolute; right: 8px; bottom: 8px; transform: rotate(-6deg); padding: 2px 6px; border: 1.5px solid currentColor; border-radius: 2px;
  font: 900 14px var(--f-display); letter-spacing: .12em; text-transform: uppercase; opacity: .85; mix-blend-mode: multiply; }
.fate-victim .ic-stamp { color: var(--stamp); }
.fate-victim img { filter: grayscale(1) contrast(1.1); }
.fate-culprit .ic-stamp { color: var(--ink); }
.fate-survivor .ic-stamp { color: #2f6b3a; }
/* El sello va en su propia fila: nunca tapa el nombre, el oficio ni los casos (§7.2). */
.index-card { height: auto; min-height: 164px; grid-template-rows: 1fr auto; }
/* Oficio y casos se muestran enteros: la ficha crece con el texto. Las filas, también: con filas auto, la lista (que tiene
   alto fijo y se desplaza) las deja en el mínimo de 164 px, y con la campaña terminada los casos y el sello se cortaban. */
.ic-stamp { position: static; grid-column: 1 / -1; justify-self: end; white-space: nowrap; }
.card-file { grid-auto-rows: max-content; }

/* Caja de evidencias (Plan 6, Task 7) */
.vitrine { position: absolute; box-sizing: border-box; left: 140px; right: 140px; top: 164px; height: 668px; padding: 16px 20px; display: grid; grid-template-rows: repeat(10, 1fr); gap: 4px;
  background: linear-gradient(180deg, #2a1c12, #1d130c); border: 10px solid #3b2617; border-radius: 4px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.6), 0 24px 50px rgba(0,0,0,.55); }
.vitrine::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.07) 0 18%, transparent 18% 46%, rgba(255,255,255,.05) 46% 52%, transparent 52%); }
.shelf { position: relative; z-index: 1; display: grid; grid-template-columns: 200px repeat(10, 1fr); align-items: end; gap: 6px; padding-bottom: 4px;
  border-bottom: 4px solid #5a3b22; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.shelf-label { align-self: center; font: 14px var(--f-type); color: rgba(236,223,195,.6); }
.shelf-label b { margin-right: 8px; font: 900 16px var(--f-display); color: var(--brass); }
.ev-slot { position: relative; display: grid; place-items: center; height: 48px; }
.ev-slot.empty::before { content: ''; width: 26px; height: 4px; border-radius: 50%; background: rgba(0,0,0,.35); }
/* Los íconos están dibujados a tinta oscura: sobre la madera, los que son casi solo trazo (cubiertos, balanza, vela) no se
   veían. Un borde claro de papel, como un recorte, los separa del fondo. */
.ev-icon { filter: drop-shadow(0 0 .8px #e9dcb8) drop-shadow(0 0 .8px #e9dcb8) drop-shadow(0 3px 2px rgba(0,0,0,.55)); transition: transform .15s; }
.ev-slot:hover .ev-icon, .ev-slot:focus-visible .ev-icon { transform: translateY(-3px) scale(1.08); }
.ev-tag { position: absolute; right: 2px; bottom: 0; padding: 0 4px; font: 700 14px var(--f-type); color: #241d13; background: #e9dcb8; transform: rotate(-4deg); }
.vitrine-note { position: absolute; left: 140px; right: 140px; top: 846px; text-align: center; font: italic 16px var(--f-display); color: #f0e4c8; }

.credits { position: absolute; left: 340px; right: 340px; top: 96px; bottom: 30px; overflow-y: auto; padding: 30px 40px 40px; text-align: center; color: #ecdfc3; }
.credits h2 { font: 700 italic 40px var(--f-display); color: #f0e4c8; margin-bottom: 16px; }
.credits h3 { margin: 28px 0 10px; font: 700 14px var(--f-type); letter-spacing: .3em; text-transform: uppercase; color: var(--brass); }
.credits p { font: calc(16px * var(--tg, 1))/1.55 var(--f-type); }
.credits .gap { height: 12px; }
.credits .primary { margin-top: 30px; padding: 10px 22px; border-radius: 6px; color: #1b1408; background: linear-gradient(180deg, #e9c977, #b98e3a); font: 700 italic 17px var(--f-display); }
.credits-link { display: block; margin-top: 10px; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }

/* Qué fue de ellos (Task 9): como el final de una película de época, sepia sobre negro, con franjas arriba y abajo. */
body:has(.aftermath-screen) .desk { background: #050505; }
.aftermath-screen { background: #0b0a09; box-shadow: inset 0 90px 0 #000, inset 0 -90px 0 #000; cursor: pointer; }
.aftermath-screen::after { content: ''; position: absolute; inset: 0; background: var(--noise); mix-blend-mode: screen; opacity: .07; pointer-events: none; }
.aftermath-title { position: absolute; left: 0; right: 0; top: 116px; text-align: center; font: italic 18px var(--f-display); letter-spacing: .5em;
  text-transform: uppercase; color: var(--brass); }
.aftermath-card { position: absolute; left: 190px; right: 190px; top: 184px; height: 512px; display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: center; }
.aftermath-card > * { animation: aftermath-in 1s ease-out both; }
.aftermath-card > .aftermath-text { animation-delay: .25s; }
@keyframes aftermath-in { from { opacity: 0; } }
.aftermath-photo { padding: 10px 10px 34px; background: #f1ead9; transform: rotate(-1.5deg); box-shadow: 0 18px 40px rgba(0,0,0,.7); }
.aftermath-photo img { display: block; width: 280px; height: 373px; object-fit: cover; filter: sepia(.85) contrast(1.05); }
.aftermath-text h2 { font: italic 44px/1.1 var(--f-display); color: #efe6d2; }
.aftermath-role { margin-top: 10px; font: 700 14px var(--f-type); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.aftermath-fate { margin-top: 24px; font: calc(22px * var(--tg, 1))/1.55 var(--f-type); color: #e6dcc6; }
/* El cajón cerrado del archivo, para quien investiga: madera, tarjeta y manija. Golpea dos veces desde adentro. */
.aftermath-drawer { position: relative; justify-self: center; width: 300px; height: 210px; border-radius: 4px; background: linear-gradient(180deg, #5a3b22, #3b2617);
  box-shadow: inset 0 0 0 6px #2a1b10, inset 0 2px 0 rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.7);
  animation: aftermath-in 1s ease-out both, drawer-knock 1.6s ease-out 1.2s both; }
.drawer-label { position: absolute; left: 40px; right: 40px; white-space: nowrap; top: 46px; padding: 8px 0; text-align: center; font: 700 14px var(--f-type); letter-spacing: .14em;
  color: var(--ink); background: #e9dcb8; box-shadow: 0 0 0 3px var(--brass-lo); }
.drawer-pull { position: absolute; left: 110px; width: 80px; top: 126px; height: 22px; border-radius: 11px; background: linear-gradient(180deg, var(--brass-hi), var(--brass-lo));
  box-shadow: 0 3px 6px rgba(0,0,0,.6); }
@keyframes drawer-knock { 0%, 20%, 26%, 34%, 40%, 100% { transform: none; } 22%, 36% { transform: translateY(-2px) scale(1.012); } }
/* Reducir movimiento: las reglas globales solo acortan la animación, y los retardos dejarían el texto escondido un rato;
   así, la tarjeta aparece entera de entrada y el cajón (que es hijo de la tarjeta) no golpea. */
html.sin-movimiento .aftermath-card > * { animation: none; }
@media (prefers-reduced-motion: reduce) { html:not(.con-movimiento) .aftermath-card > * { animation: none; } }
.aftermath-nav { position: absolute; left: 190px; right: 190px; top: 726px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.aftermath-count { margin-right: auto; font: 14px var(--f-type); letter-spacing: .2em; color: rgba(236,223,195,.55); }
.aftermath-nav button { padding: 9px 18px; border: 1px solid rgba(201,162,76,.4); border-radius: 6px; font-size: 15px; color: rgba(236,223,195,.8); }
.aftermath-nav .primary { border: 0; color: #1b1408; background: linear-gradient(180deg, #e9c977, #b98e3a); font: 700 italic 18px var(--f-display); }
.aftermath-link { margin-left: 14px; padding: 3px 12px; border: 1px solid rgba(201,162,76,.55); border-radius: 4px; font: 700 italic 15px var(--f-display); color: var(--brass-hi); }
.finale-clock { position: absolute; left: 50%; top: 12px; z-index: 6; transform: translateX(-50%); padding: 4px 18px; border-radius: 4px;
  font: 700 30px var(--f-type); letter-spacing: .08em; color: #f0e4c8; background: rgba(10,14,20,.75); box-shadow: 0 0 0 1px rgba(201,162,76,.5), 0 8px 18px rgba(0,0,0,.5); }
.finale-clock.low { color: #ff8d7e; }
.finale-clock.hit { animation: clock-hit .6s ease-out; }
@keyframes clock-hit { 0%, 40% { color: #ff5a48; transform: translateX(-50%) scale(1.15); } 100% { transform: translateX(-50%) scale(1); } }
/* tapa el tablero como .pause-overlay (Plan 6): con el reloj quieto, el caso no se estudia (spec §3.9) */
.finale-announce { position: absolute; inset: 0; z-index: 45; display: grid; place-items: center; background: rgba(9,12,18,.96); }
.finale-announce p { margin: 8px 0 18px; font-size: calc(17px * var(--tg, 1)); line-height: 1.5; }
/* Las secuencias del final (Tasks 6 y 7): la capa .fx-finale ya tapa la pantalla y se queda con el clic que saltea
   (madness.css, Plan 5 Task 9, z-index 50 sobre el reloj y el panel de la pista). Acá, sus lienzos y el velo negro. */
.fx-finale > svg, .fx-finale > canvas { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; }
.fx-finale-veil { position: absolute; inset: 0; background: #000; opacity: 0; }
.outcome-screen { display: grid; place-content: center; justify-items: center; gap: 28px; background: #050607; }
.outcome-title { font: 700 italic 54px var(--f-display); color: #e9e2cf; animation: outcome-in 1.4s ease-out both; }
.outcome-actions { display: flex; gap: 14px; animation: outcome-in 1.4s .8s ease-out both; }
@keyframes outcome-in { from { opacity: 0; } }
.outcome-actions button { padding: 11px 22px; border: 1px solid rgba(233,226,207,.4); border-radius: 6px; color: #e9e2cf; font-size: 16px; }
.outcome-actions .primary { color: #1b1408; background: linear-gradient(180deg, #e9c977, #b98e3a); border: 0; font: 700 italic 18px var(--f-display); }

.ending-screen { background: #050607; }
.ending-window { position: absolute; left: 300px; right: 300px; top: 60px; bottom: 150px; overflow: hidden; text-align: center; color: #ecdfc3;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.ending-screen.ended .ending-window { overflow-y: auto; }
.ending-roll h2 { font: 700 italic 44px var(--f-display); color: #f0e4c8; margin: 18px 0; }
.ending-roll h3 { margin: 30px 0 10px; font: 700 14px var(--f-type); letter-spacing: .3em; text-transform: uppercase; color: var(--brass); }
.ending-roll p { font: calc(16px * var(--tg, 1))/1.55 var(--f-type); }
.ending-roll .gap { height: 12px; }
.ending-screen.ended .ending-roll { opacity: .3; transition: opacity 1.2s; }
.ending-stamp { left: 50%; top: 42%; translate: -50% -50%; font-size: 62px; white-space: nowrap; color: #d0544a; border-color: #d0544a; mix-blend-mode: normal; }
.ending-screen > .primary { position: absolute; left: 50%; bottom: 64px; translate: -50% 0; padding: 11px 24px; border-radius: 6px; color: #1b1408;
  background: linear-gradient(180deg, #e9c977, #b98e3a); font: 700 italic 18px var(--f-display); }
.done-stamp { position: absolute; left: 110px; top: 118px; rotate: -8deg; font: 900 22px var(--f-display); letter-spacing: .16em; text-transform: uppercase;
  color: #d0544a; border: 3px solid #d0544a; padding: 7px 16px; opacity: .85; }

/* Caso 100 (Plan 9B): las notas y los descartes de antes de un cambio de disposición, en gris. Con intensidad 0 el 100
   va en noir; sobre la piedra los aclara arkham.css, que pesa más. */
.case-screen svg.plan .plan-state text.stale { fill: #8d8f94; opacity: .8; }
.case-screen svg.plan .plan-state text.stale[stroke="#2b4b8a"] { stroke: #8d8f94; }
.case-screen svg.plan .plan-state path.stale { stroke: #8d8f94; }

/* El cuarto que se mueve (Plan 9B), debajo del reloj del 100: la barra hasta el próximo cambio, que se enciende en el
   aviso, el registro de los empujes y el botón de las marcas grises. */
.room-hud { position: absolute; left: 50%; top: 60px; z-index: 6; translate: -50% 0; display: grid; justify-items: center; gap: 3px; pointer-events: none; }
.room-next { width: 132px; height: 3px; border-radius: 2px; background: rgba(201,162,76,.2); overflow: hidden; }
.room-next i { display: block; height: 100%; background: rgba(201,162,76,.7); transition: width .25s linear; }
.room-hud.warn .room-next i { background: #7fe3b0; box-shadow: 0 0 6px #7fe3b0; }
.room-row { display: flex; align-items: center; gap: 8px; max-width: 760px; }
.room-log, .room-clear { padding: 1px 10px; border-radius: 3px; font: 14px/20px var(--f-type); background: rgba(10,14,20,.8); }
.room-log { margin: 0; color: #e9ddc0; text-align: center; }
.room-clear { flex: none; white-space: nowrap; pointer-events: auto; color: #d8e6dc; border: 1px solid rgba(185,196,191,.45); }
.room-clear:hover, .room-clear:focus-visible { color: var(--brass-hi); border-color: var(--brass-hi); }
/* en el aviso, la ficha de la herida se enciende y late (también con intensidad 0, cuando la locura no anima la herida);
   con «reducir movimiento», solo se enciende */
.case-screen.room-warn svg.plan .token.portal circle { stroke: #7fe3b0; stroke-width: 4; }
/* !important: con intensidad 0, la regla de madness.css que corta los bucles de la locura ([data-motion='0'] .fx-on *)
   también lo apagaba */
.case-screen.room-warn:not(.room-still) svg.plan .token.portal { animation: room-beat .75s ease-in-out infinite !important; }
@keyframes room-beat { 50% { opacity: .55; } }
/* la ficha empujada que vuelve a su tarjeta */
.room-pushed { position: absolute; z-index: 30; object-fit: cover; transform-origin: 0 0; pointer-events: none; border-radius: 2px; box-shadow: 0 6px 14px rgba(0,0,0,.5); }

/* Plan 10B: el informe falso de Ferraro, marcado en Expedientes y en la pared desde que cae en el 45 */
/* «Falso» arriba a la derecha, y el número de esa carpeta corrido a la izquierda para que no se pisen (90 px de ancho) */
.file-forged { position: absolute; right: 2px; top: 3px; padding: 0 3px; transform: rotate(-6deg); font: 700 14px/16px var(--f-type);
  color: var(--stamp); border: 1px solid var(--stamp); border-radius: 2px; background: rgba(214,187,133,.9); }
.file:has(> .file-forged) { justify-items: start; padding-left: 8px; }
.clip-forged { position: absolute; right: 10px; bottom: 10px; transform: rotate(-7deg); font: 900 14px/1 var(--f-display); letter-spacing: .12em;
  text-transform: uppercase; color: var(--stamp); border: 1.6px solid var(--stamp); padding: 3px 6px; border-radius: 3px; }

/* ---------- Plan 10F: el nombre ---------- */
/* el párrafo de entrada de Cómo jugar, que dice de dónde viene el formato */
.manual .lead { margin: -6px 0 6px; font: italic calc(17px * var(--tg, 1))/1.5 var(--f-display); color: var(--ink-2); }