/* Pantalla del caso: los bloques header, left column, drafting sheet e index cards de docs/mockups/expediente-noir.html. */
.fbody::after, .memo::after, .card::after { content: ""; position: absolute; inset: 0; background: var(--noise); mix-blend-mode: multiply; opacity: .17; pointer-events: none; border-radius: inherit; }

/* ---------- encabezado ---------- */
.top { position: absolute; left: 28px; right: 28px; top: 0; height: 68px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(201,162,76,.18); }
.brand { display: flex; align-items: center; gap: 22px; }
.prog { display: flex; align-items: center; gap: 12px; padding-left: 22px; border-left: 1px solid rgba(201,162,76,.28); height: 28px; font-size: 15px; color: rgba(236,223,195,.72); }
.prog b { color: var(--brass-hi); }
.bar { width: 120px; height: 4px; background: rgba(236,223,195,.12); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi)); }
.nav { display: flex; align-items: center; gap: 28px; font-size: 16px; }
.nav button { color: rgba(236,223,195,.85); }
.nav button:hover { color: var(--brass-hi); }
.gear { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(201,162,76,.5); display: grid; place-items: center; }
.nav .gear { color: var(--brass-hi); }

/* ---------- columna izquierda ---------- */
.left { position: absolute; left: 28px; top: 88px; width: 284px; height: 788px; display: flex; flex-direction: column; gap: 10px; }
.folder { position: relative; }
/* en el flujo y no absoluta: un lugar largo ("Cementerio del Norte — la cripta de los Valcárcel") pasa a dos renglones y baja la carpeta */
.tab { position: relative; width: fit-content; max-width: 100%; margin-bottom: -4px; padding: 4px 12px 5px; background: #c3a46a; border-radius: 6px 6px 0 0; }
.tab span { background: #f6f1e4; color: var(--ink); font-size: calc(15px * var(--tg, 1)); font-weight: 700; display: block; line-height: calc(19px * var(--tg, 1)); padding: 3px 8px; border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.fbody { position: relative; background: linear-gradient(170deg, #d6bb85 0%, #cdae76 55%, #c2a36b 100%); border-radius: 0 6px 6px 6px; padding: 18px; color: #241d13;
  box-shadow: 0 18px 34px rgba(0,0,0,.5), 0 3px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 26px rgba(110,70,25,.28); }
.fbody h1 { font: 700 italic 42px/1.02 var(--f-display); letter-spacing: -.005em; color: #211a10; }
.chips { display: flex; flex-wrap: wrap; gap: 6px 7px; margin-top: 12px; }
.chips span { white-space: nowrap; font-size: 14px; letter-spacing: -.02em; font-weight: 700; padding: 3px 5px; border: 1.4px solid rgba(33,26,16,.78); border-radius: 2px; background: rgba(255,250,235,.22); }
.rules { list-style: none; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(33,26,16,.4); font-size: calc(15px * var(--tg, 1)); line-height: calc(20px * var(--tg, 1)); }
.rules li { position: relative; padding-left: 16px; }
.rules li + li { margin-top: 6px; }
.rules li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; background: #3a2e1c; transform: rotate(45deg); }

.memo { position: relative; background: #efe9da; color: var(--ink); padding: 16px 16px 14px; border-radius: 2px; box-shadow: 0 14px 26px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3); }
.memo h2 { font: 700 italic 20px/1 var(--f-display); margin-bottom: 8px; }
.memo p { font-size: calc(15px * var(--tg, 1)); line-height: calc(21px * var(--tg, 1)); padding-left: 16px; position: relative; }
.memo p + p { margin-top: 8px; }
.memo p::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; background: var(--ink); transform: rotate(45deg); }
.pin { position: absolute; right: 18px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3d98d, #b38833 60%, #6e5320); box-shadow: 0 2px 3px rgba(0,0,0,.5); }

.tools { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
/* Plan 10I: sin el panel de herramientas. Arriba Deshacer, Rehacer y Pista, como antes; abajo Borrar y, con el dedo,
   Descarte (en una fila de cuatro, «Deshacer» no entra a 14 px) */
.acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.acts button { min-width: 0; padding: 0 2px; height: 38px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 14px; letter-spacing: -.04em; color: rgba(236,223,195,.88); border: 1px solid rgba(201,162,76,.35); border-radius: 6px; background: rgba(255,255,255,.025); }
.acts svg { flex: none; }
.solve { display: flex; flex-direction: column; gap: 6px; }
.resolve { height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 7px; border: 1px solid rgba(201,162,76,.28);
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.022) 0 6px, transparent 6px 12px), #141a24; color: rgba(236,223,195,.42); font: 700 italic 20px var(--f-display); cursor: not-allowed; }

/* ---------- hoja de dibujo ---------- */
.sheet { position: absolute; left: 332px; top: 88px; width: 716px; height: 788px; background: var(--paper); border-radius: 2px;
  box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.45), inset 0 0 70px rgba(150,110,50,.2); }
.sheet::after { content: ""; position: absolute; inset: 0; background: var(--noise); mix-blend-mode: multiply; opacity: .26; pointer-events: none; }
/* las dos cintas de las esquinas de arriba */
.sheet::before { content: ""; position: absolute; left: -40px; right: -40px; top: -20px; height: 90px; z-index: 1; pointer-events: none; background: no-repeat center / 100% 100%
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='796' height='90' viewBox='0 0 796 90'><g fill='%23e6d6a6' fill-opacity='.62'><rect x='22' y='30' width='78' height='22' transform='rotate(-40 61 41)'/><rect x='696' y='30' width='78' height='22' transform='rotate(40 735 41)'/></g></svg>"); }
.key { position: absolute; left: 64px; right: 28px; bottom: 0; height: 72px; border-top: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: space-between; color: var(--ink); }
.key::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: .8px solid rgba(29,34,48,.6); }
.krows { display: flex; flex-direction: column; gap: 6px; }
.krow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.krow h4 { width: 64px; font: 700 italic 14px var(--f-display); }
.k { display: flex; align-items: center; gap: 7px; }
.k::before { content: ""; flex: none; width: 16px; height: 16px; box-sizing: border-box; }
.k-block::before { background: repeating-linear-gradient(45deg, var(--ink) 0 1.4px, #dacdaa 1.4px 4px); border: 1.6px solid var(--ink); }
.k-occ::before { background: #efe7d0; border: 1.2px solid var(--ink); border-radius: 3px; }
.k-auto::before, .k-discard::before { --x: rgba(46,51,64,.5); --w: .9px;
  background: linear-gradient(45deg, transparent calc(50% - var(--w)), var(--x) calc(50% - var(--w)) calc(50% + var(--w)), transparent calc(50% + var(--w))),
    linear-gradient(-45deg, transparent calc(50% - var(--w)), var(--x) calc(50% - var(--w)) calc(50% + var(--w)), transparent calc(50% + var(--w))); }
.k-discard::before { --x: var(--stamp); --w: 1.3px; }
.k-note::before { content: "C"; font: 21px/16px var(--f-hand); color: var(--pencil); text-align: center; }
.north { display: flex; align-items: center; gap: 10px; font: 16px var(--f-hand); color: var(--ink-2); }

/* ---------- fichas ---------- */
.right { position: absolute; left: 1068px; top: 88px; width: 344px; height: 788px; display: flex; flex-direction: column; }
/* el pautado sigue al renglón (--lh), también con «Texto grande» y en la ficha que junta los renglones (--k, .tighter) (Plan 10F) */
.card { --lh: calc(20px * var(--tg, 1) * var(--k, 1)); position: relative; flex: none; height: 122px; border-radius: 3px; color: var(--ink); padding: 12px 14px 0 104px;
  background-color: var(--card);
  background-image: linear-gradient(180deg, transparent 37px, rgba(179,52,43,.55) 37px, rgba(179,52,43,.55) 38px, transparent 38px),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 1px), rgba(70,110,165,.22) calc(var(--lh) - 1px) var(--lh));
  background-size: 100% 100%, 100% calc(var(--lh) * 4); background-position: 0 0, 0 39px; background-repeat: no-repeat;
  box-shadow: 0 12px 24px rgba(0,0,0,.42), 0 2px 5px rgba(0,0,0,.35); }
.card header { display: flex; align-items: baseline; justify-content: space-between; height: 24px; }
.card h3 { font: 700 15px/24px var(--f-type); flex: none; letter-spacing: .08em; text-transform: uppercase; }
.st { display: block; min-width: 0; margin-left: auto; padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: var(--ink-2); }
.st.none { font-style: italic; color: #6d6a63; }
.st.red { color: var(--stamp); font-weight: 700; }
.card p { margin-top: 6px; font-size: calc(15px * var(--tg, 1)); line-height: var(--lh); text-wrap: pretty; }
.print { position: absolute; left: 14px; top: 13px; width: 72px; height: 96px; padding: 3px; background: #fbf8f0; box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 9px rgba(0,0,0,.2); }
.print img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.15) saturate(.92) contrast(1.03); }
.badge { position: absolute; right: -8px; bottom: -8px; width: 25px; height: 25px; border-radius: 50%; background: var(--ink); color: #f3ead6; font: 700 14px/22px var(--f-display); text-align: center; border: 1.5px solid #fbf8f0; box-shadow: 0 1px 2px rgba(0,0,0,.45); }
.badge.v { background: var(--stamp); }
.clip { position: absolute; left: 30px; top: -11px; width: 15px; height: 42px; z-index: 3; overflow: visible; }
.r1 .print { transform: rotate(-1.6deg); }
.r2 .print { transform: rotate(1.2deg); }
.r3 .print { transform: rotate(-.8deg); }
.card.done { background-color: #e0d7c3; }
.card.done .txt { opacity: .72; }
.card.done .print img { filter: grayscale(.9) contrast(.95); }
.card.sel { transform: translateX(-8px); background-color: #f8f3e8; box-shadow: 0 0 0 2px var(--brass), 0 0 0 4px rgba(201,162,76,.2), 0 0 28px rgba(232,201,119,.24), 0 18px 36px rgba(0,0,0,.6); }
.card.sel .badge { background: linear-gradient(180deg, #e9c977, #b98e3a); color: #1b1408; }

.case-screen .sheet svg.plan { position: absolute; left: 0; top: 0; width: 716px; height: 700px; }
.fbody h1.long { font-size: 32px; }
.novelty { margin-top: 12px; padding: 8px 10px; background: rgba(255,250,235,.28); border-left: 3px solid #8a6a2c; font-size: calc(14px * var(--tg, 1)); line-height: calc(18px * var(--tg, 1)); }
.novelty strong { display: block; font: 700 italic 16px var(--f-display); margin-bottom: 3px; }
.memo .none { font-style: italic; color: #6d6a63; padding-left: 0; }
.memo .none::before { display: none; }
/* Plan 10I: Borrar (y Descarte, con el dedo) prendido, con el dorado que tenía la herramienta elegida */
.acts .act.on { color: #1b1408; border-color: var(--brass-hi); background: linear-gradient(180deg, #e9c977, #b98e3a); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.6); }
.acts .act:disabled { opacity: .4; }
.resolve.ready { cursor: pointer; color: #1b1408; border-color: var(--brass-hi); background: linear-gradient(180deg, #e9c977, #b98e3a); box-shadow: 0 0 22px rgba(232,201,119,.35), 0 8px 16px rgba(0,0,0,.45); }
.resolve-help { text-align: center; font-size: 14px; color: rgba(236,223,195,.62); }
.right { gap: 11px; }
.card { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s; }
.card .clip { color: #9aa1ab; }
.card.sel .clip { color: var(--brass); }
.card.error { box-shadow: 0 0 0 2px var(--stamp), 0 12px 24px rgba(0,0,0,.42); }
.card .live { margin-left: 6px; font-weight: 700; }
.card .live:empty { display: none; }
.card .live.good { color: #2f6b3a; }
.card .live.bad { color: var(--stamp); }
.card .emblem { width: 100%; height: 100%; display: grid; place-items: center; font: 900 34px var(--f-display); background: #f3e2a8; color: #8a6a2c; }
.card .emblem.portal { background: #14211f; color: #8fd3b0; }
.stamp-victim { position: absolute; right: 14px; bottom: 8px; transform: rotate(-5deg); font: 900 14px/1 var(--f-display); letter-spacing: .14em;
  text-transform: uppercase; color: var(--stamp); border: 2px solid var(--stamp); padding: 4px 8px; border-radius: 3px; opacity: .85; mix-blend-mode: multiply; }
/* la palabra clave: subrayada con puntos, que se ve también adentro de la negrita de la pista (Plan 10H) */
.kw { cursor: help; border-bottom: 1.5px dotted rgba(29,34,48,.7); }
.kw.hot { background: rgba(232,201,119,.38); border-radius: 2px; }
.right.n7 .print, .right.n8 .print { width: 56px; height: 74px; }
.right.n7 .card, .right.n8 .card { padding-left: 86px; }
/* los objetos robados tienen nombres de varias palabras ("cuaderno de sueños"): más chicos, para que entre "Sin ubicar" */
.card.object h3 { font-size: 14px; letter-spacing: .03em; }
.right.n8 .print { top: 7px; }
/* el testimonio de la víctima rodea el sello, que queda abajo a la derecha como en la maqueta */
.card.victim .txt { height: calc(100% - 30px); }
.card.victim .txt::before { content: ""; float: right; width: 106px; height: 100%; shape-outside: polygon(100% 0, 100% calc(100% - 38px), 0 calc(100% - 38px), 0 100%, 100% 100%); }
/* con 6, 7 u 8 fichas no queda lugar para el sello junto al testimonio (en el 82 ocupa tres renglones enteros; con 6, desde
   la letra de 15 del Plan 10F, cuatro de 25 letras): va sobre la foto */
.right.n6 .card.victim .txt::before, .right.n7 .card.victim .txt::before, .right.n8 .card.victim .txt::before { display: none; }
.right.n6 .stamp-victim, .right.n7 .stamp-victim, .right.n8 .stamp-victim { left: 4px; right: auto; bottom: auto; top: 54px; z-index: 2; font-size: 14px; letter-spacing: 0; padding: 2px 3px;
  transform: rotate(-9deg); background: rgba(251,248,240,.86); mix-blend-mode: normal; opacity: 1; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.right.n8 .stamp-victim { top: 48px; }
.right.n6 .stamp-victim { top: 70px; }
.hint-panel { position: absolute; left: 64px; right: 28px; bottom: 10px; z-index: 5; padding: 14px 44px 14px 18px; background: #f6f1e4; color: var(--ink);
  border-left: 4px solid var(--brass); box-shadow: 0 14px 30px rgba(0,0,0,.45); font-size: calc(15px * var(--tg, 1)); line-height: calc(22px * var(--tg, 1)); }
.hint-panel.error { border-left-color: var(--stamp); }
.hint-panel h4 { font: 700 italic 17px var(--f-display); margin-bottom: 4px; }
.hint-actions { display: flex; gap: 8px; margin-top: 10px; }
.hint-btn { padding: 6px 12px; border: 1px solid rgba(29,34,48,.4); border-radius: 4px; font-size: 14px; font-weight: 700; }
.hint-btn.primary { background: var(--ink); color: #f3ead6; }
.hint-close { position: absolute; right: 10px; top: 6px; font-size: 22px; line-height: 1; color: var(--ink-2); }
.tooltip { position: absolute; z-index: 30; max-width: 300px; padding: 8px 10px; background: var(--ink); color: #f3ead6; font-size: calc(14px * var(--tg, 1)); line-height: calc(19px * var(--tg, 1));
  border-radius: 4px; box-shadow: 0 8px 18px rgba(0,0,0,.5); pointer-events: none; }
.drag-ghost { position: fixed; z-index: 50; width: 54px; height: 72px; transform: translate(-50%, -60%) rotate(-3deg); background: #fbf8f0; padding: 3px;
  box-shadow: 0 10px 22px rgba(0,0,0,.5); pointer-events: none; }
.drag-ghost img { width: 100%; height: 100%; object-fit: cover; }
.card.hot { box-shadow: 0 0 0 2px var(--brass-hi), 0 12px 24px rgba(0,0,0,.42); }
/* 7 u 8 fichas (Plan 5; Plan 10F): testimonio de 14 en renglones de 17, con el pautado al compás; la de 8 tiene tres */
.right.n7 .card, .right.n8 .card { --lh: calc(17px * var(--tg, 1) * var(--k, 1)); padding-top: 7px; background-position: 0 0, 0 31px; background-size: 100% 100%, 100% calc(var(--lh) * 4);
  background-image: linear-gradient(180deg, transparent 28px, rgba(179,52,43,.55) 28px, rgba(179,52,43,.55) 29px, transparent 29px),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 1px), rgba(70,110,165,.22) calc(var(--lh) - 1px) var(--lh)); }
.right.n8 .card { background-size: 100% 100%, 100% calc(var(--lh) * 3); }
.right.n7 .card header, .right.n8 .card header { height: 21px; }
.right.n7 .card p.txt, .right.n8 .card p.txt { margin-top: 3px; font-size: calc(14px * var(--tg, 1)); line-height: var(--lh); }
/* lo que dice quien declara (Plan 10H): la pista entera en negrita, con la tinta de siempre, y su voz alrededor, en la
   misma letra, redonda y más suave */
.card .voz { color: var(--fx-flavor, var(--ink-2)); }
.card.tight p.txt { letter-spacing: -.03em; word-spacing: -.1em; }
.card.tighter { --k: .85; }

.pause-overlay { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: #090c12; }
.pause-overlay[hidden] { display: none; }
.pause-card { width: 380px; padding: 30px 34px; text-align: center; color: #241d13; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #d6bb85, #c2a36b); box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.pause-card h2 { font: 900 italic 40px var(--f-display); }
.pause-case { margin: 4px 0 20px; font: 14px var(--f-type); letter-spacing: .24em; text-transform: uppercase; }
.pause-card nav { display: grid; gap: 10px; }
.pause-card nav button { height: 44px; border: 1px solid rgba(36,29,19,.35); border-radius: 6px; font-size: 15px; background: rgba(255,255,255,.18); }
.pause-card nav button:hover, .pause-card nav button:focus-visible { background: rgba(255,255,255,.38); }
.pause-card nav .primary, .pause-card nav .primary:hover, .pause-card nav .primary:focus-visible { background: var(--ink); color: #f3ead6; font: 700 italic 19px var(--f-display); }

/* ---------- Plan 10B: el plano de las variantes ---------- */
/* a oscuras: lo que ilumina un fósforo titila apenas; al resolver, la lámpara titila dos veces (menos de tres destellos por
   segundo) y vuelve la luz. Con «reducir movimiento», la regla de tokens.css corta las dos animaciones. */
.match-light circle { animation: match-flicker .9s ease-in-out infinite alternate; }
@keyframes match-flicker { from { opacity: .72; } to { opacity: 1; } }
.sheet.relight svg.plan { animation: relight 1.6s ease-in-out both; }
@keyframes relight { 0% { filter: brightness(.6); } 30% { filter: brightness(1.04); } 50% { filter: brightness(.78); } 80%, 100% { filter: none; } }

/* ---------- Plan 10B: fichas y carpeta de las variantes ---------- */
/* el sonámbulo no declara: una nota en lápiz, que no es una pista */
.card em.note { font: calc(16px * var(--tg, 1))/var(--lh) var(--f-hand); color: var(--pencil); }
/* la voz del muerto: lo que escribe la médium en la sesión, con su retrato chico y la firma de la víctima */
.card .voice { display: block; margin-top: 3px; font: calc(15px * var(--tg, 1))/var(--lh) var(--f-hand); color: #4a2f6b; }
.card .voice b { font-weight: 700; }
.voice-medium { width: 17px; height: 22px; margin-right: 6px; vertical-align: -5px; object-fit: cover; border-radius: 2px; filter: sepia(.6); box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.voice-sign { font-style: italic; }
/* el dibujo del chico, en lugar del texto */
.card p.txt.drawn { margin-top: 3px; }
.card svg.drawing { display: block; width: 216px; height: auto; }
.card svg.drawing .part { cursor: help; }
/* la palabra tachada: tinta encima; al cerrar, la tinta se corre (closing.js) */
.kw.ink { color: transparent; background: #12141b; border-bottom: 0; border-radius: 2px; box-shadow: 0 0 0 1px #12141b; }
.kw.ink.ink-run { color: var(--ink); background: transparent; box-shadow: none; animation: ink-run 1.3s ease-out both; }
@keyframes ink-run { 0% { color: transparent; background: #12141b; } 55% { color: transparent; background: rgba(18,20,27,.3); filter: blur(1.4px); } 100% { color: var(--ink); background: transparent; filter: none; } }
/* a oscuras: el inventario y la caja de fósforos */
.memo p + h2 { margin-top: 12px; }
.memo .inv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.matchbox { display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid rgba(29,34,48,.45); border-radius: 4px; background: #d8c79c; }
.matchbox.on { box-shadow: 0 0 0 2px var(--brass-hi), 0 0 12px rgba(232,201,119,.6); }
.matchbox .match { display: block; width: 4px; height: 17px; border-radius: 2px; background: linear-gradient(180deg, #b3342b 0 5px, #e7d6a8 5px); }
.matchbox .match.spent { background: linear-gradient(180deg, #3a3a3a 0 5px, #b9ad8c 5px); opacity: .5; }
.matchbox:disabled { opacity: .55; }
.novelty p + p { margin-top: 5px; }
/* si la columna izquierda no entra, se aprieta (folder.js): márgenes, renglones y el título, no la letra de lo que se lee */
.left.dense { gap: 4px; }
.left.dense .fbody { padding: 10px 14px; }
.left.dense .fbody h1 { font-size: 28px; }
.left.dense .chips { margin-top: 8px; }
.left.dense .rules { margin-top: 8px; padding-top: 7px; line-height: calc(18px * var(--tg, 1)); }
.left.dense .novelty { margin-top: 8px; padding: 6px 8px; line-height: calc(17px * var(--tg, 1)); }
.left.dense .memo { padding: 10px 14px 8px; }
.left.dense .memo h2 { margin-bottom: 5px; }
/* el 64 junta la tarjeta de a oscuras y el inventario (Task 10): también se acercan los renglones y las herramientas */
.left.dense .memo p { line-height: calc(19px * var(--tg, 1)); }
.left.dense .memo p + p { margin-top: 4px; }
.left.dense .rules li + li { margin-top: 3px; }
.left.dense .novelty strong { margin-bottom: 1px; }
.left.dense .tools { gap: 5px; }
.left.denser { gap: 2px; }
.left.denser .memo:has(> .none) { display: none; }
/* solo para los lectores de pantalla */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Plan 10B: la pantalla del caso con las variantes ---------- */
/* las dos fotos: las placas al pie del plano, una encima de la otra como los dos renglones de referencias (en fila no
   entran junto a la rosa de los vientos de la locura) */
.plates { display: flex; flex-direction: column; flex: none; gap: 6px; }
.plate { height: 27px; padding: 0 12px; border: 1.4px solid var(--ink); border-radius: 3px; font: 700 14px var(--f-type); white-space: nowrap; color: var(--ink); background: rgba(255,250,235,.5); }
.plate.on { background: var(--ink); color: #f3ead6; }
.plate.hot { box-shadow: 0 0 0 2px var(--brass-hi); }
/* a oscuras: con un fósforo preparado, el plano espera la casilla donde encenderlo */
.case-screen[data-mode="match"] svg.plan { cursor: crosshair; }
/* al cerrar, lo que tapaba la variante: «Mintió» en la ficha y «Falsa» en la anotación */
.stamp-lie { position: absolute; right: 16px; top: 34px; z-index: 2; transform: rotate(-8deg); font: 900 14px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--stamp); border: 2px solid var(--stamp); padding: 4px 8px; border-radius: 3px; background: rgba(251,248,240,.8); animation: stamp-in .35s ease-out both; }
.memo p.false { text-decoration: line-through; text-decoration-color: var(--stamp); }
.stamp-false { display: inline-block; margin-left: 8px; transform: rotate(-6deg); font: 900 14px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--stamp); border: 1.6px solid var(--stamp); padding: 2px 5px; border-radius: 3px; animation: stamp-in .35s ease-out both; }
@keyframes stamp-in { from { opacity: 0; transform: rotate(-8deg) scale(1.6); } }

/* ---------- Plan 10E: dibujos de pared ---------- */
/* el espejo de la barra (19): se ilumina un instante con el testimonio del espejo. Con «reducir movimiento» se prende y se
   apaga sin transición. */
svg.plan .plan-mirror { transition: filter .3s ease-out; }
svg.plan .plan-mirror.lit { filter: drop-shadow(0 0 4px #fff4c8) drop-shadow(0 0 10px rgba(255,236,170,.9)); }
/* el pasadizo del 36, al resolver: el estante se corre a lo largo del muro y deja ver el hueco */
svg.plan .passage-shelf { animation: shelf-slide 1.2s .25s ease-in-out both; }
@keyframes shelf-slide { to { transform: translateX(58px); } }

/* ---------- Plan 10E: la radio en vivo ---------- */
/* el aparato, al pie del plano: en dos renglones, para que entre al lado de las referencias */
.radio-box { display: grid; grid-template-columns: auto auto; align-items: center; gap: 5px 8px; color: var(--ink); font: 700 14px var(--f-type); }
.radio-onair { padding: 2px 6px; border-radius: 2px; background: var(--stamp); color: #f3ead6; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.radio-up { grid-column: 1 / -1; height: 28px; padding: 0 10px; border: 1.4px solid var(--ink); border-radius: 3px; font: 700 14px var(--f-type);
  color: var(--ink); background: rgba(255,250,235,.5); }
.radio-up:disabled { opacity: .5; }
/* la ficha que todavía no habló: la nota en lápiz en lugar del texto, sin ✓ ni ✗; cuando habla, se enciende una vez */
.card .air-wait { display: none; margin-top: 4px; font: calc(15px * var(--tg, 1))/var(--lh) var(--f-hand); color: var(--pencil); }
.card.off-air p.txt { display: none; }
.card.off-air .air-wait { display: block; }
.card.off-air .live { visibility: hidden; }
.card.aired { animation: aired 1.4s ease-out; }
@keyframes aired { from { box-shadow: 0 0 0 3px var(--brass-hi), 0 0 26px rgba(232,201,119,.65); } }

/* ---------- Plan 10E: el mensaje cifrado ---------- */
/* la tarjeta en la ficha del objeto: en clave, en letra de máquina, hasta que se lee */
.card .cipher { font-weight: 700; font-size: calc(14px * var(--tg, 1)); font-family: var(--f-type); letter-spacing: 0; color: #6b1f1a; border-bottom: 1px dotted var(--stamp); cursor: pointer; }
.card .cipher.read { font: inherit; letter-spacing: normal; color: inherit; border-bottom: 0; }
.card .cipher:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 1px; }
/* el disco: afuera la tarjeta, adentro el anillo que gira, con la estrella en la A */
.disc-overlay .doc-title { font-size: 34px; }
.disc-help { font-size: 15px; color: rgba(236,223,195,.8); }
.disc-row { display: flex; align-items: center; gap: 18px; }
.disc { width: 400px; height: 400px; }
.disc text { text-anchor: middle; dominant-baseline: central; font-family: var(--f-type); font-weight: 700; }
.disc-rim { fill: #2d3138; stroke: #c9ccd2; stroke-width: 3; }
.disc-code text { fill: #e6e9ee; }
.disc-face { fill: #c9ccd2; stroke: #8b9099; stroke-width: 2; }
.disc-plain text { fill: var(--ink); }
.disc-star { fill: var(--stamp); }
.disc-inner { transform-box: fill-box; transform-origin: center; transition: transform .22s ease-out; }
.disc-turn { width: 48px; height: 48px; border-radius: 50%; font-size: 26px; color: #1b1408; background: linear-gradient(180deg, #e9c977, #b98e3a); }
.disc-card { width: 640px; padding: 12px 18px; background: #efe8d6; color: var(--ink); font: 700 17px/25px var(--f-type); letter-spacing: .08em;
  text-align: center; box-shadow: 0 8px 18px rgba(0,0,0,.45); }
.disc-card.read { font: 21px/27px var(--f-hand); letter-spacing: 0; }

/* ---------- Plan 10E: las fichas y la tarjeta ---------- */
/* el testimonio del espejo lleva un espejito delante */
.card.mirror p.txt::before { content: ''; display: inline-block; width: 12px; height: 16px; margin-right: 5px; vertical-align: -3px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'><rect x='.8' y='.8' width='10.4' height='14.4' rx='2' fill='%23d9e1e4' stroke='%231d2230' stroke-width='1.2'/><path d='M3.5 10l5-5M3.5 13l5-5' stroke='%23ffffff' stroke-width='1.1'/></svg>") no-repeat center / contain; }
/* el salto de caballo: el caballo del ajedrez dibujado en la tarjeta «Nuevo en este caso» */
.novelty.v-knight { position: relative; padding-right: 44px; }
.novelty.v-knight::after { content: ''; position: absolute; right: 8px; top: 8px; width: 28px; height: 36px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'><path d='M6 38H26V34H24C26 26 27 18 24 12C21 6 16 4 13 4L12 1L10 5C7 7 4 12 3 17L4 21L7 22L11 19C13 20 13 22 11 25C9 28 8 31 8 34H6Z' fill='%231d2230'/><circle cx='10' cy='11' r='1.2' fill='%23efe7d0'/></svg>") no-repeat center / contain; }

/* ---------- Plan 10E: la pesadilla ---------- */
/* la transición: el plano de la casa del sueño encima del de siempre, y la luz verdosa (dreamScreen.js) */
.case-screen .sheet svg.plan.dream-plan { pointer-events: none; opacity: 0; }
.dream-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: multiply;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, rgba(150,210,170,.35), rgba(36,92,66,.78)); }
/* lo que soñó, al final, va encima de la pantalla del caso, que se desenfoca como con el documento de presentación */
.dream-host:has(> .doc-overlay) > .case-screen { filter: blur(3px); }
/* el sello de cada parte: «Culpable» al resolver la casa de verdad y «Presagio» en el sueño */
.stamp-culprit, .stamp-omen { position: absolute; right: 16px; top: 34px; z-index: 2; transform: rotate(-8deg); font: 900 14px/1 var(--f-display);
  letter-spacing: .14em; text-transform: uppercase; border: 2px solid currentColor; padding: 4px 8px; border-radius: 3px;
  background: rgba(251,248,240,.82); animation: dream-stamp .35s ease-out both; }
.stamp-culprit { color: var(--stamp); }
.stamp-omen { color: #2f6b4a; }
@keyframes dream-stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.6); } }

/* ---------- Plan 10D: el crimen revelado ---------- */
/* al cerrar el 62: la habitación en rojo, la víctima marcada y, un poco después, el anillo de la Orden y el sello */
svg.plan .crime { animation: crime-in .9s ease-out both; }
svg.plan .crime .ring { animation: crime-in .6s .9s ease-out both; }
.card .stamp-victim.revealed { animation: crime-in .5s .6s ease-out both; }
@keyframes crime-in { from { opacity: 0; } to { opacity: 1; } }

/* las voces que la locura tacha (Plan 10D): se leen igual, con la raya encima */
.card .voz s { text-decoration-thickness: 1.4px; opacity: .75; }

/* ---------- Plan 10F: la letra ---------- */
/* la carpeta que ni apretada entra: sin las chips del capítulo y del tablero, y con el título más chico */
.left.densest .chips { display: none; }
.left.densest .fbody h1 { font-size: 26px; }
.left.densest .novelty { margin-top: 5px; padding: 4px 8px; }
/* y si tampoco (el 64 con el inventario, el 89 con su regla larga), al mínimo lo que no es letra: márgenes, rellenos, los
   botones y los renglones, que no bajan de 1,2 veces la letra (la regla ya va en 18) */
.left.densest .tab { padding: 2px 10px 4px; }
.left.densest .tab span { padding: 2px 8px; line-height: calc(18px * var(--tg, 1)); }
.left.densest .fbody { padding: 6px 12px; }
.left.densest .rules { margin-top: 5px; padding-top: 5px; }
.left.densest .rules li + li { margin-top: 2px; }
.left.densest .novelty strong { margin-bottom: 0; line-height: 1.2; }
.left.densest .memo { padding: 6px 12px; }
.left.densest .memo h2 { margin-bottom: 3px; }
.left.densest .memo p { line-height: calc(18px * var(--tg, 1)); }
.left.densest .memo p + p { margin-top: 2px; }
.left.densest .acts button { height: 34px; }
.left.densest .solve { gap: 3px; }
.left.densest .resolve { height: 40px; }
/* la ficha que no entra pierde la voz de a partes (Plan 10H): la cola, la apertura y la frase; la negrita queda siempre.
   Sin la apertura, la pista vuelve a empezar en mayúscula */
.card.sin-cola .voz.cola, .card.sin-abre .voz.abre, .card.sin-frase .voz.frase { display: none; }
.card.sin-abre .ini { text-transform: uppercase; }
/* «Texto grande», hasta donde entra: a +12 % y, si tampoco, al tamaño normal, nunca menos (cards.js, folder.js, closed.js) */
.left.tg-medio, .card.tg-medio, .front.tg-medio { --tg: 1.12; }
.left.tg-no, .card.tg-no, .front.tg-no { --tg: 1; }
/* con las placas de las fotos o la radio al pie del plano, la leyenda se queda sin sus rótulos («Muebles», «Marcas») */
.key.has-extra .krow h4 { display: none; }

/* ---------- Plan 10I: el plano sin herramientas ---------- */
/* Descarte es para el dedo, que no tiene clic derecho: con el mouse no se muestra */
.acts .act[data-tool="discard"] { display: none; }
/* con Borrar prendido, el puntero es una goma */
.case-screen[data-mode="erase"] svg.plan { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16'><path d='M3 10.4l6.7-6.7a1.4 1.4 0 0 1 2 0l2 2a1.4 1.4 0 0 1 0 2L8.5 13H5.6z' fill='%23f3ead6' stroke='%231d2230' stroke-width='1.3' stroke-linejoin='round'/></svg>") 6 19, cell; }
/* el anillo que se llena mientras se mantiene apretado para ubicar (caseScreen.js le pone la duración, HOLD_MS). Aparece
   de a poco, así un clic corto (una nota) casi no lo muestra; con «Reducir movimiento» aparece lleno */
.hold-ring { position: fixed; z-index: 50; width: 40px; height: 40px; margin: -20px 0 0 -20px; pointer-events: none; filter: drop-shadow(0 0 2px #efe7d0); animation: hold-in 350ms linear forwards; }
.hold-ring circle { fill: none; stroke: rgba(29,34,48,.25); stroke-width: 4; }
.hold-ring circle.fill { stroke: var(--ink); stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 20px 20px; animation: hold-fill 350ms linear forwards; }
@keyframes hold-in { 0%, 25% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes hold-fill { to { stroke-dashoffset: 0; } }
/* la leyenda dice con qué gesto se pone cada marca, a 14 px y más suave; con las placas o la radio al pie no entra, y se va */
.k small { font-size: inherit; color: var(--ink-2); }
.key.has-extra .k small { display: none; }
/* con el papel mordido abajo (la locura, del 62 al 90), el mordisco tapaba el tercer renglón: vuelve a dos */
.sheet.fx-bitten .k small { display: none; }
/* el renglón que se pasa («Nota (un clic)») va debajo de las otras marcas, no del rótulo, y la rosa no se parte en dos */
.key:not(.has-extra) .krow { padding-left: 78px; }
.krow h4 { margin-left: -78px; }
.north { flex: none; }

/* con el dedo (Plan 10I): el plano y las fotos de las fichas no desplazan la página ni abren el menú del toque largo (los
   gestos, mantener y arrastrar, llegan enteros, sin pointercancel), y con el primer toque (html.tactil, main.js) aparece
   Descarte, que hace lo del clic derecho */
.case-screen svg.plan, .card .print { touch-action: none; -webkit-touch-callout: none; }
html.tactil .acts .act[data-tool="discard"] { display: flex; }

/* ---------- Plan 10J: a oscuras de verdad ---------- */
/* adentro de la grilla, sobre la penumbra (.plan-dark), la tinta pasa a tiza: las paredes, las puertas, las ventanas, los
   rótulos (con halo oscuro) y, apenas, la grilla de las casillas. Las coordenadas y el papel de afuera siguen en tinta. Al
   volver la luz, plan.js saca la clase y todo vuelve a la tinta. Con .case-screen .sheet le gana al halo de madness.css */
.case-screen .sheet svg.plan.a-oscuras .plan-ink [fill="#1d2230"] { fill: #c3cbda; }
.case-screen .sheet svg.plan.a-oscuras .plan-ink [stroke="#1d2230"] { stroke: #c3cbda; }
.case-screen .sheet svg.plan.a-oscuras .room-labels { fill: #c3cbda; stroke: #04070d; }
.case-screen .sheet svg.plan.a-oscuras .plan-cells { stroke: #c3cbda; stroke-opacity: .12; }
/* en el capítulo 8 (el 73) la locura esconde la tinta y la grilla y las dibuja de nuevo, ondulando (wobble, s72.js): esas
   copias también van en tiza. La grilla ondulada es el único trazo suelto, sin data-fx, en la ranura de las casillas */
.case-screen .sheet svg.plan.a-oscuras [data-fx="wobble"] [fill="#1d2230"] { fill: #c3cbda; }
.case-screen .sheet svg.plan.a-oscuras [data-fx="wobble"] [stroke="#1d2230"] { stroke: #c3cbda; }
.case-screen .sheet svg.plan.a-oscuras [id$="-fx-cells"] > path[stroke="#1d2230"]:not([data-fx]) { stroke: #c3cbda; stroke-opacity: .12; }
/* las marcas de quien juega, más claras: los descartes y sus iniciales, las notas y las cruces grises. Los retratos, igual */
.case-screen .sheet svg.plan.a-oscuras .plan-state > path[stroke="#b3342b"] { stroke: #ff7d6e; }
.case-screen .sheet svg.plan.a-oscuras .plan-state > text[fill="#b3342b"] { fill: #ff7d6e; stroke: #04070d; }
.case-screen .sheet svg.plan.a-oscuras .plan-state > text[fill="#2b4b8a"] { fill: #a9c0ff; stroke: #a9c0ff; }
.case-screen .sheet svg.plan.a-oscuras .plan-state > path[stroke="#2e3340"] { stroke: #c3cbda; }
/* la leyenda, en el papel: las muestras son las dos sombras, la de lo que bloquea y la de lo que se pisa */
.key.dark .k-block::before { background: #2b2d33; border: 0; border-radius: 4px; }
.key.dark .k-occ::before { background: #8b8a86; border: 0; border-radius: 4px; }
/* el aviso de un momento al pie de la carpeta («Te chocaste con algo.») */
.resolve-help.notice { color: var(--brass-hi); }