/* La locura (Plan 5). Nada de esto aplica en el noir: las reglas cuelgan de .case-screen[data-step] o de nodos .fx-*. */
.case-screen > .fx-world { position: absolute; inset: 0; }
.case-screen > .fx-screen { position: absolute; inset: 0; pointer-events: none; }
.fx-desk { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; pointer-events: none; overflow: visible; }
.fx-desk > * { position: absolute; left: 0; top: 0; pointer-events: none; }
.fx-world-under, .fx-world-over { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; overflow: visible; pointer-events: none; }
/* sin pointer-events: lo heredan de .fx-screen, y así una capa que no deja jugar (el sellado) lo puede pedir */
.fx-screen > * { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; }
.sheet > .fx-paper { position: absolute; inset: 0; pointer-events: none; }
.sheet > .fx-rot, .sheet > .fx-sheet-over { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.sheet > canvas.fx-void { position: absolute; pointer-events: none; }
.card > svg.fx-card { position: absolute; left: 0; top: 0; pointer-events: none; mix-blend-mode: multiply; border-radius: inherit; }
.print > svg.fx-face { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); pointer-events: none; }
.fbody > svg.fx-wet, .memo > svg.fx-wet { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: multiply; }
.fbody > svg.fx-mark, .memo > svg.fx-mark { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.folder > svg.fx-fstamp { position: absolute; left: 14px; top: 22px; width: 250px; height: 96px; overflow: visible; pointer-events: none; z-index: 5; opacity: 0; }
.prog { position: relative; }
.prog > svg.fx-scratch { position: absolute; top: -2px; overflow: visible; pointer-events: none; }
.north.fx-compass { font-size: 0; }
.case-screen [data-fx], .fx-slot { pointer-events: none; }
.case-screen svg.plan { overflow: visible; }
.case-screen [data-fx] text { user-select: none; }

/* la paleta del paso (profile.js → paletteVars) sobre los componentes del Plan 3 */
.case-screen[data-step] .fbody { background: linear-gradient(170deg, var(--fx-manila-1) 0%, var(--fx-manila-2) 55%, var(--fx-manila-3) 100%); }
.case-screen[data-step] .fbody, .case-screen[data-step] .fbody h1 { color: var(--fx-folder-ink); }
.case-screen[data-step] .tab { background: var(--fx-manila-3); }
.case-screen[data-step] .memo { background: var(--fx-memo); }
.case-screen[data-step] .resolve { background-color: var(--fx-ui-well); }
.case-screen[data-step] .sheet { box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.45), inset 0 0 80px var(--fx-paper-edge); }
.case-screen[data-step] .card.done { background-color: var(--fx-card-done); }
.case-screen[data-step] .card.sel { background-color: var(--fx-card-sel); }
.case-screen[data-step] .print img { filter: var(--fx-portrait); }
.case-screen[data-step] .card.done .print img { filter: var(--fx-portrait-done); }
.case-screen[data-step] .card.sel .print img { filter: none; }
.case-screen[data-step] svg.plan pattern[id$='-grid'] path { stroke: var(--fx-grid); stroke-opacity: var(--fx-grid-alpha); }
.case-screen[data-step] svg.plan .room-labels { stroke: var(--fx-halo); }
.case-screen[data-step] svg.plan .plan-bubbles circle { fill: var(--fx-bubble); }
.case-screen[data-step="2"] .card .voz { text-shadow: 0 0 .6px rgba(47,93,79,.45); }
.case-screen[data-step="3"] .card .voz { text-shadow: 0 0 .5px rgba(124,43,34,.4); }

/* con "reducir movimiento" o intensidad 0, ningún bucle CSS queda trabado en su último cuadro */
[data-motion='0'] .fx-on *, [data-motion='0'] .fx-screen * { animation: none !important; transition: none !important; }

/* Paso 60 (Task 5) */
.fx-film { background: var(--noise); mix-blend-mode: overlay; }
.fx-lamp-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 58% 42% at var(--fx-desk-glow-at, 40% 0%), var(--fx-desk-glow, rgba(236,190,122,.085)), var(--fx-desk-glow-2, rgba(236,190,122,.03)) 60%, transparent 85%); transform-origin: 40% 0; }
.tt .tent-o { fill: var(--tf, rgba(46,50,62,.24)); stroke: #2a2e38; stroke-width: 1.3; stroke-linejoin: round; }
.tt .tent-h { fill: none; stroke: #2f333e; stroke-width: .65; stroke-linecap: round; opacity: .9; }
.tt .tent-m { fill: none; stroke: #363a46; stroke-width: .4; opacity: .4; }
.tt .tent-s { fill: var(--tsk, #e9dfc5); stroke: #363a46; stroke-width: .6; }
.tt-front { --tf: #e2d8bd; --tsk: #efe7d0; }
.fx-coffee { mix-blend-mode: multiply; }
.memo > svg.fx-mark .fx-ring { mix-blend-mode: multiply; }
.fx-scratch-digits { opacity: .55; }
.gw { position: relative; }
.gw svg { position: absolute; left: 0; top: 50%; width: 100%; height: 1.05em; margin-top: -.56em; overflow: visible; display: none; color: var(--ink); }
.gw.on { color: transparent; }
.gw.on svg { display: block; }
.print svg.fx-face .fx-skin { filter: var(--fx-portrait, none) blur(.6px); }
.card.done .print svg.fx-face .fx-skin { filter: var(--fx-portrait-done, none) blur(.6px); }

/* Paso 72 (Task 6) */
.fx-swamp { mix-blend-mode: soft-light; }
.fx-caus { mix-blend-mode: soft-light; }
.fx-cockle { position: absolute; left: 0; top: 0; mix-blend-mode: soft-light; pointer-events: none; }
.sheet > svg.fx-rot .fx-mult, .sheet > svg.fx-rot { mix-blend-mode: multiply; }
.sheet.fx-bitten { background: none; box-shadow: none; filter: drop-shadow(0 24px 26px rgba(0,0,0,.5)) drop-shadow(0 5px 6px rgba(0,0,0,.42)); }
.sheet > .fx-paper.fx-bitten-paper { background: var(--paper); box-shadow: inset 0 0 80px var(--fx-paper-edge, rgba(150,110,50,.2)); }
.fbody.fx-rewritten h1 { color: transparent; }
.key.fx-glyph-key .k::before { display: none; }
.key .fx-glyph-k { display: inline-block; vertical-align: middle; width: 18px; height: 15px; margin-right: 5px; color: var(--ink); pointer-events: none; }
.emblem .fx-relic-eye { position: absolute; left: 50%; top: 50%; width: 40px; height: 32px; margin: -16px 0 0 -20px; }
.case-screen.fx-staring .fx-corner-eyes { opacity: .55; }
.case-screen.fx-staring .fx-pupil { transform: scale(1.6); transform-box: fill-box; transform-origin: center; }
.fx-drops { position: absolute; inset: 0; pointer-events: none; }
.fx-drop { position: absolute; border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%;
  background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.7) 0 9%, rgba(225,240,232,.16) 26%, rgba(18,40,34,.16) 70%, rgba(4,12,10,.42) 100%);
  box-shadow: 0 1.5px 1.5px rgba(0,0,0,.4), inset -1px -2px 2px rgba(255,255,255,.28); backdrop-filter: blur(1.6px) saturate(1.25) brightness(1.08); }
.fx-trail { position: absolute; border-radius: 3px; background: linear-gradient(180deg, rgba(205,228,218,0), rgba(205,228,218,.13) 70%, rgba(205,228,218,.2)); backdrop-filter: blur(.8px) brightness(1.05); }
.fx-sigil-mark { color: var(--fx-sigil, #5a1d16); }
.fx-candle { mix-blend-mode: screen; }
/* Caso 100 (Plan 9B, madness.hold): el rito se apaga durante el aviso y la transición, y vuelve donde quedaron los muebles. */
.case-screen.fx-held [data-fx='altarSigil'], .case-screen.fx-held [data-fx='candles'] { opacity: 0; transition: opacity .25s; }

/* Paso 86 (Task 7) */
.fx-pages { position: absolute; inset: 0; pointer-events: none; }
.fx-bpage { position: absolute; height: 250px; transform-origin: 50% 0; filter: drop-shadow(0 3px 4px rgba(0,0,0,.55)); }
.fx-bpage svg { display: block; }
.wordmark { position: relative; }
.wordmark .fx-wr, .wordmark .fx-wc { position: absolute; left: 0; top: 0; font-style: normal; pointer-events: none; mix-blend-mode: screen; letter-spacing: inherit; }
.wordmark .fx-wr { color: rgba(255,40,40,.55); }
.wordmark .fx-wc { color: rgba(40,230,255,.4); }
.fbody h1 { position: relative; }
.fbody h1 .fx-title-ghost { position: absolute; left: 0; top: 0; color: transparent; -webkit-text-stroke: .9px rgba(150,30,25,.55); pointer-events: none; }
.right .card.fx-piece { pointer-events: none; z-index: 2; }
.right > svg.fx-tear { position: absolute; pointer-events: none; overflow: visible; z-index: 3; }
.right { position: relative; }
.fx-shift { position: absolute; inset: 0; pointer-events: none; }
.fx-shift > .fx-world { position: absolute; inset: 0; }
.fx-dialog { position: absolute; left: 520px; top: 378px; width: 400px; height: auto; pointer-events: none; background: #0f0a09; border: 1px solid #c9a24c; border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(10,6,6,.85), 0 0 0 5px rgba(201,162,76,.35), 0 30px 70px rgba(0,0,0,.8), 0 0 60px rgba(190,30,30,.25); transform-origin: 50% 50%; }
.fx-dialog-bar { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-bottom: 1px solid rgba(201,162,76,.35); font: 700 14px var(--f-type); letter-spacing: .14em; color: rgba(232,201,119,.8); }
.fx-dialog-body { padding: 22px 24px 20px; text-align: center; }
.fx-dialog h6 { font: 700 27px/1.15 var(--f-type); letter-spacing: .06em; color: #f0e4c8; }
.fx-dialog p { margin-top: 10px; font: italic 14px var(--f-type); color: rgba(230,210,190,.7); }
.fx-dialog-btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.fx-dialog-btns span { min-width: 120px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(201,162,76,.5); border-radius: 5px; font: 700 14px var(--f-type); color: #e8dcc0; }
.fx-dialog-btns span:first-child { background: linear-gradient(180deg, #e9c977, #b98e3a); color: #1b1408; }
.fx-redlamp { mix-blend-mode: multiply; }
.fx-buzz-defs { position: absolute; width: 0; height: 0; }

/* Sellado y pantallas (Task 9) */
/* Una secuencia sobre la pantalla del caso no deja jugar mientras dura: el sellado y, en el 100, la derrota y la
   victoria del Plan 7 (.fx-finale). Sus capas llevan data-fx (kit.js), así que el selector le tiene que ganar a
   .case-screen [data-fx] (0,2,0), que les saca el puntero: este pesa (0,3,0) y vale desde cualquier hoja. */
.case-screen .fx-screen > .fx-sealing, .case-screen .fx-screen > .fx-finale { position: absolute; inset: 0; z-index: 50; pointer-events: auto; cursor: wait; }
.fx-sealing > svg, .fx-sealing > canvas { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; }
.fx-screen-film { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.fx-screen-desk { position: absolute; left: 0; top: 0; pointer-events: none; }
.fx-title-words { display: block; margin: 4px auto 0; overflow: visible; pointer-events: none; }
.title-mark .wm-l { position: relative; display: inline-block; }
.title-mark .fx-wm-glyph { position: absolute; left: 50%; top: 50%; width: .8em; height: 1em; margin: -.5em 0 0 -.4em; opacity: 0; overflow: visible; color: #e7f7ea; filter: drop-shadow(0 0 6px rgba(127,227,176,.75)); }
.title-mark .wm-l.fx-g { color: transparent; }
.title-mark .wm-l.fx-g .fx-wm-glyph { opacity: 1; }
/* la marca del encabezado en glifos (glyphLetters) asoma desde el 87, todavía con la piel noir: sin estas reglas, cada
   glifo sale del tamaño por defecto de un <svg> y tapa los botones de la carpeta */
.wordmark .wm-l:has(> .fx-wm-glyph) { position: relative; display: inline-block; }
.wordmark .fx-wm-glyph { position: absolute; left: 50%; top: 50%; width: 18px; height: 23px; margin: -12px 0 0 -9px; opacity: 0; overflow: visible; color: #e7f7ea; filter: drop-shadow(0 0 4px rgba(127,227,176,.75)); }
.wordmark .wm-l.fx-g { color: transparent; }
.wordmark .wm-l.fx-g .fx-wm-glyph { opacity: 1; }
.title-mark.fx-rgb { text-shadow: -3px 0 rgba(255,40,40,.5), 3px 0 rgba(40,230,255,.38); animation: fx-rgb 4s steps(8) infinite; }
@keyframes fx-rgb { 50% { text-shadow: -2px 1px rgba(255,40,40,.5), 2.6px -.6px rgba(40,230,255,.38); } }
.drawer.fx-drawer { position: relative; }
.drawer.fx-drawer::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.drawer.fx-ch6::after { background: radial-gradient(ellipse 30% 40% at 85% 70%, rgba(110,66,32,.18), transparent 70%); }
.drawer.fx-ch7::after { background: radial-gradient(ellipse 40% 60% at 20% 80%, rgba(90,29,22,.2), transparent 70%); }
.drawer.fx-ch8::after { background: linear-gradient(180deg, transparent 55%, rgba(58,70,32,.3)); }
.drawer.fx-ch9::after { background: repeating-linear-gradient(-12deg, transparent 0 22px, rgba(192,57,43,.12) 22px 23px); }
.drawer.fx-ch10::after { background: radial-gradient(ellipse 50% 70% at 50% 50%, rgba(96,255,176,.1), transparent 70%); }
.file { position: relative; }
.file > .fx-file-note { position: absolute; left: 70%; top: -18px; overflow: visible; pointer-events: none; }