/* SUPERNATURAL · El negocio familiar — interfaz.
   Noche de carretera: negro de asfalto, ámbar de salpicadero y farola de sodio, papel viejo del diario. */

@font-face { font-family: 'Fell'; src: url('/fuentes/im-fell-english-sc-v16-latin-regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Maquina'; src: url('/fuentes/special-elite-v20-latin_latin-ext-regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Mano'; src: url('/fuentes/covered-by-your-grace-v17-latin_latin-ext-regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow C'; src: url('/fuentes/barlow-condensed-v13-latin_latin-ext-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow C'; src: url('/fuentes/barlow-condensed-v13-latin_latin-ext-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Baskerville'; src: url('/fuentes/libre-baskerville-v24-latin_latin-ext-regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Baskerville'; src: url('/fuentes/libre-baskerville-v24-latin_latin-ext-italic.woff2') format('woff2'); font-style: italic; font-display: swap; }
@font-face { font-family: 'Baskerville'; src: url('/fuentes/libre-baskerville-v24-latin_latin-ext-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --negro: #0a0b0d;
  --asfalto: #15171a;
  --humo: #23262b;
  --linea: rgba(232, 214, 180, 0.16);
  --texto: #e9e2d4;
  --tenue: #9c968a;
  --ambar: #d9a441;
  --ambar-vivo: #f0b94e;
  --sangre: #8f1d14;
  --papel: #e8dcc2;
  --tinta: #2b2318;
  --frio: #9cc3e6;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--negro); color: var(--texto); overflow: hidden; }
body { font: 500 17px/1.4 'Barlow C', 'Arial Narrow', sans-serif; -webkit-font-smoothing: antialiased; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
#juego { position: fixed; inset: 0; }
#juego canvas { display: block; outline: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }

.arranque { position: fixed; inset: 0; display: grid; place-items: center; background: var(--negro); color: var(--tenue);
  font: 22px 'Fell', serif; letter-spacing: 0.06em; transition: opacity 0.8s; z-index: 50; }
body.listo .arranque { opacity: 0; pointer-events: none; }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; }
.hud.oculto { display: none; }
.hud-filtro { position: absolute; inset: 0; display: none; --miedo: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, calc(0.55 + var(--miedo) * 0.35)) 100%); }
.hud-filtro.activo { display: block; }
.hud-danio { position: absolute; inset: 0; opacity: 0; transition: opacity 0.2s;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(120, 0, 0, 0.75) 100%); }
.hud-bandas i { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height 0.6s ease; }
.hud-bandas i:first-child { top: 0; } .hud-bandas i:last-child { bottom: 0; }
.hud-bandas.visible i { height: 10.5vh; }
.hud-mira { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
  background: rgba(240, 230, 210, 0.7); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); transition: opacity 0.3s; }
.hud-mira.oculto { opacity: 0; }
.hud-aviso { position: absolute; left: 50%; top: calc(50% + 34px); transform: translateX(-50%); opacity: 0; transition: opacity 0.18s;
  font-size: 18px; letter-spacing: 0.04em; text-shadow: 0 1px 3px #000, 0 0 12px #000; white-space: nowrap; }
.hud-aviso.visible { opacity: 1; }
.hud-aviso b { display: inline-block; min-width: 24px; padding: 1px 6px; margin-right: 6px; border: 1px solid rgba(240, 230, 210, 0.6);
  border-radius: 3px; text-align: center; font-weight: 600; background: rgba(0, 0, 0, 0.45); }
.hud-subt { position: absolute; left: 50%; bottom: 12vh; transform: translateX(-50%); max-width: min(880px, 86vw); text-align: center;
  opacity: 0; transition: opacity 0.2s; font-size: 22px; line-height: 1.35; text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, 0.9); }
.hud-subt.visible { opacity: 1; }
.hud-subt .quien { display: block; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 2px; }
.hud-subt.pensamiento .texto { font-style: italic; color: #cfc8b8; }
.hud-opciones { position: absolute; left: 50%; bottom: 20vh; transform: translateX(-50%); display: none; flex-direction: column; gap: 6px;
  min-width: min(560px, 88vw); pointer-events: auto; }
.hud-opciones.visible { display: flex; }
.hud-opciones .op-titulo { margin: 0 0 4px; color: var(--ambar); letter-spacing: 0.12em; text-transform: uppercase; font-size: 14px; text-shadow: 0 1px 3px #000; }
.hud-opciones button { pointer-events: auto; text-align: left; padding: 9px 14px; background: rgba(10, 11, 13, 0.82); border: 1px solid var(--linea);
  border-left: 3px solid transparent; font-size: 19px; color: var(--texto); }
.hud-opciones button b { color: var(--ambar); margin-right: 12px; font-weight: 600; }
.hud-opciones button small { display: block; color: var(--tenue); font-size: 14px; margin-left: 26px; }
.hud-opciones button.sel, .hud-opciones button:hover { border-left-color: var(--ambar); background: rgba(30, 26, 18, 0.92); }
.hud-objetivo { position: absolute; left: 28px; top: 24px; max-width: 360px; opacity: 0; transform: translateY(-6px); transition: opacity 0.4s, transform 0.4s;
  font-size: 17px; text-shadow: 0 1px 3px #000; }
.hud-objetivo span { display: block; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ambar); }
.hud-objetivo.visible { opacity: 0.88; transform: none; }
.hud-objetivo.nuevo { opacity: 1; }
.hud-notas { position: absolute; right: 26px; top: 24px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.hud-notas .nota { max-width: 380px; padding: 7px 12px; background: rgba(12, 12, 14, 0.82); border-left: 2px solid var(--tenue); font-size: 16px;
  animation: entraNota 0.35s ease; transition: opacity 0.6s, transform 0.6s; }
.hud-notas .nota.pista { border-left-color: var(--ambar); }
.hud-notas .nota.movil { border-left-color: var(--frio); }
.hud-notas .nota.fuera { opacity: 0; transform: translateX(14px); }
@keyframes entraNota { from { opacity: 0; transform: translateX(14px); } }
.hud-mano { position: absolute; right: 28px; bottom: 26px; text-align: right; opacity: 0; transition: opacity 0.3s; text-shadow: 0 1px 3px #000; }
.hud-mano.visible { opacity: 0.9; }
.hud-mano .nombre { display: block; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tenue); }
.hud-mano .detalle { font-size: 20px; }
.hud-mano .balas { font-style: normal; color: var(--ambar-vivo); letter-spacing: 3px; }
.hud-mano .balas s { text-decoration: none; color: #555; }
.hud-mano em { font-style: normal; color: var(--tenue); margin-left: 8px; }
.hud-rotulo { position: absolute; left: 7vw; bottom: 16vh; opacity: 0; transition: opacity 1.4s ease; text-shadow: 0 2px 10px #000; }
.hud-rotulo.visible { opacity: 1; }
.hud-rotulo .r-titulo { margin: 0; font: 44px/1 'Fell', serif; letter-spacing: 0.04em; }
.hud-rotulo .r-sub { margin: 8px 0 0; font-size: 18px; letter-spacing: 0.24em; text-transform: uppercase; color: #cfc6b2; }
.hud-fundido { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 0.8s ease; z-index: 20; }
.hud-fundido.negro { opacity: 1; }
.hud-carga { position: absolute; inset: 0; display: none; place-items: center; z-index: 21; background: #000; }
.hud-carga.visible { display: grid; }
.carga-caja { width: min(520px, 84vw); text-align: center; }
.carga-titulo { margin: 0; font: 34px 'Fell', serif; }
.carga-sub { margin: 4px 0 26px; color: var(--tenue); letter-spacing: 0.2em; text-transform: uppercase; font-size: 14px; }
.carga-barra { height: 2px; background: #222; }
.carga-barra i { display: block; height: 100%; width: 0; background: var(--ambar); transition: width 0.4s; }
.carga-consejo { margin: 24px 0 0; color: #b6ad9b; font: 20px/1.3 'Mano', cursive; }
.hud-muerte { position: absolute; inset: 0; display: none; place-items: center; z-index: 22; background: rgba(20, 0, 0, 0.72); pointer-events: auto; }
.hud-muerte.visible { display: grid; }
.muerte-caja { text-align: center; }
.m-titulo { margin: 0; font: 56px 'Fell', serif; color: #e6d6c6; }
.m-sub { margin: 6px 0 26px; color: #c09a8a; font: 22px 'Mano', cursive; }

/* ---------- botones comunes ---------- */
.boton { pointer-events: auto; display: inline-block; margin: 4px; padding: 10px 22px; border: 1px solid var(--ambar); background: rgba(217, 164, 65, 0.12);
  color: var(--texto); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.boton:hover { background: rgba(217, 164, 65, 0.25); }
.boton.secundario { border-color: var(--linea); background: transparent; }
.boton:disabled { opacity: 0.4; cursor: default; }

/* ---------- menú ---------- */
.menu { position: absolute; inset: 0; pointer-events: auto; transition: opacity 0.6s; }
.menu.oculto { opacity: 0; pointer-events: none; }
.menu.sobre-juego { background: rgba(5, 6, 8, 0.72); backdrop-filter: blur(3px); }
.m-col { position: absolute; left: 6vw; top: 0; bottom: 0; width: min(440px, 86vw); display: flex; flex-direction: column; justify-content: center; }
.m-marca h1 { margin: 0; font: 400 clamp(54px, 7.4vw, 104px)/0.92 'Fell', serif; letter-spacing: 0.01em; color: #efe6d4;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.8); }
.m-sobre { margin: 0 0 10px; font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ambar); }
.m-lema { margin: 10px 0 0; font: 26px 'Mano', cursive; color: #cdbf9f; }
.m-botones { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin-top: 42px; }
.m-botones button { text-align: left; padding: 10px 0 10px 18px; background: none; border: 0; border-left: 2px solid transparent;
  font-size: 24px; letter-spacing: 0.06em; text-transform: uppercase; color: #d8d0c0; text-shadow: 0 1px 6px #000; transition: border-color 0.2s, color 0.2s, padding 0.2s; }
.m-botones button small { display: block; font-size: 14px; letter-spacing: 0.1em; color: var(--tenue); text-transform: none; }
.m-botones button:hover, .m-botones button.principal { border-left-color: var(--ambar); color: #fff; padding-left: 24px; }
.m-pie { margin-top: 38px; font-size: 14px; color: var(--tenue); letter-spacing: 0.04em; text-shadow: 0 1px 4px #000; }
.m-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(860px, 92vw); max-height: 86vh; overflow: auto;
  padding: 26px 30px; background: rgba(9, 10, 12, 0.9); border: 1px solid var(--linea); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); }
.m-panel header { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.m-panel h2 { margin: 0; font: 32px 'Fell', serif; }
.m-volver { background: none; border: 0; color: var(--tenue); letter-spacing: 0.1em; text-transform: uppercase; font-size: 15px; }
.m-volver:hover { color: var(--texto); }
.m-temps { display: flex; gap: 6px; margin-left: auto; }
.m-temps button { background: none; border: 1px solid var(--linea); padding: 6px 14px; font-size: 17px; text-transform: uppercase; letter-spacing: 0.08em; }
.m-temps button small { display: block; font-size: 12px; color: var(--tenue); }
.m-temps button.sel { border-color: var(--ambar); background: rgba(217, 164, 65, 0.12); }
.m-lista { list-style: none; margin: 0; padding: 0; }
.m-lista li { display: grid; grid-template-columns: 62px 1fr 150px 116px; align-items: center; gap: 12px; padding: 9px 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.m-lista .ep { font: 15px 'Maquina', monospace; color: var(--tenue); }
.m-lista .tit { font-size: 20px; }
.m-lista .tit small { display: block; font-size: 14px; color: var(--tenue); }
.m-lista .cri { font: 19px 'Mano', cursive; color: #bfae8a; }
.m-lista li.pronto { opacity: 0.45; }
.m-lista li.hecho .tit::after { content: '  ✓'; color: var(--ambar); }
.m-lista button { border: 1px solid var(--ambar); background: rgba(217, 164, 65, 0.14); padding: 6px 0; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.m-lista button:hover { background: rgba(217, 164, 65, 0.3); }
.m-lista em { font: 17px 'Mano', cursive; color: var(--tenue); text-align: center; }
.m-opciones label { display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: 12px; margin: 12px 0; }
.m-opciones label small { grid-column: 2; color: var(--tenue); font-size: 13px; }
.m-opciones label.check { grid-template-columns: auto 1fr; }
.m-opciones select, .m-opciones input[type=range] { width: 100%; accent-color: var(--ambar); }
.m-opciones select { background: var(--asfalto); color: var(--texto); border: 1px solid var(--linea); padding: 6px; font: inherit; }
.m-gpu { color: var(--tenue); font-size: 13px; }
.m-borrar { margin-top: 10px; background: none; border: 1px solid #5a2620; color: #d39a90; padding: 6px 14px; text-transform: uppercase; letter-spacing: 0.08em; }
.m-creditos p, .m-creditos li { color: #d6cebe; line-height: 1.5; }
.m-pausa { width: min(420px, 90vw); text-align: left; }

/* ---------- diario ---------- */
.diario { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.3s; pointer-events: auto; z-index: 10; }
.diario.visible { opacity: 1; }
.d-libro { position: relative; width: min(880px, 94vw); height: min(620px, 88vh); padding: 34px 44px 28px; color: var(--tinta);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 6%, transparent 94%, rgba(0, 0, 0, 0.15)),
    radial-gradient(ellipse at 30% 20%, #efe4cb, #e2d3b2 60%, #cdb98f);
  border: 14px solid #3b2a1c; border-radius: 6px; box-shadow: 0 0 0 2px #1d140c, 0 40px 90px rgba(0, 0, 0, 0.8), inset 0 0 60px rgba(90, 60, 20, 0.35);
  display: flex; flex-direction: column; }
.d-pest { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid rgba(60, 40, 20, 0.35); }
.d-pest button { background: none; border: 0; padding: 4px 12px 6px; font: 17px 'Maquina', monospace; color: #5a4a36; border-bottom: 2px solid transparent; }
.d-pest button.sel { color: var(--tinta); border-bottom-color: #7a2a1c; }
.d-cont { flex: 1; overflow: auto; padding-right: 8px; }
.d-cont h3 { margin: 0; font: 30px 'Fell', serif; }
.d-cont .lugar { margin: 0 0 14px; font: 15px 'Maquina', monospace; color: #6b5a44; }
.d-cont .etiqueta { margin: 16px 0 2px; font: 13px 'Maquina', monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #7a2a1c; }
.d-cont .mano { font: 22px/1.3 'Mano', cursive; color: #2e2a40; }
.d-cont .mano.grande { font-size: 26px; }
.d-cont .tenue { color: #8a7a62; }
.d-cont .firma { text-align: right; }
.d-cont .pistas { margin: 4px 0; padding-left: 18px; }
.d-cont .controles { font: 14px 'Maquina', monospace; color: #4f4232; }
.bestiario { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; }
.bestiario article { padding-bottom: 10px; border-bottom: 1px dashed rgba(80, 60, 30, 0.35); }
.bestiario h4 { margin: 0; font: 24px 'Fell', serif; }
.bestiario .tipo { margin: 0 0 6px; font: 13px 'Maquina', monospace; color: #7a2a1c; }
.bestiario p { margin: 4px 0; font: 15px/1.45 'Baskerville', serif; }
.bestiario .mano { font: 20px 'Mano', cursive; }
.bestiario .tapada { opacity: 0.5; }
.movil-lista p { font: 16px 'Maquina', monospace; border-bottom: 1px dashed rgba(80, 60, 30, 0.3); padding-bottom: 6px; }
.d-cerrar { position: absolute; right: 18px; bottom: 10px; background: none; border: 0; font: 15px 'Maquina', monospace; color: #6b5a44; }

/* ---------- minijuegos ---------- */
.mj { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 0.3s; pointer-events: auto; z-index: 9; }
.mj.visible { opacity: 1; }
.mj-investigar { background: rgba(0, 0, 0, 0.7); }
.inv-marco { width: min(1040px, 96vw); height: min(680px, 90vh); display: grid; grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto;
  background: #101113; border: 1px solid var(--linea); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8); }
.inv-marco header { grid-column: 1 / 3; padding: 14px 20px; border-bottom: 1px solid var(--linea); }
.inv-titulo { margin: 0; font: 26px 'Fell', serif; }
.inv-ayuda { margin: 2px 0 0; color: var(--tenue); font-size: 15px; }
.inv-lista { overflow: auto; border-right: 1px solid var(--linea); }
.inv-lista button { display: block; width: 100%; text-align: left; padding: 10px 14px; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 17px; }
.inv-lista button small { display: block; color: var(--tenue); font-size: 13px; }
.inv-lista button.sel { background: rgba(217, 164, 65, 0.12); border-left: 2px solid var(--ambar); }
.inv-doc { overflow: auto; padding: 26px 34px; background: #e9e0cc; color: #1f1a14; font: 16px/1.62 'Baskerville', serif; user-select: text; }
.inv-doc h2 { margin: 0 0 12px; font: 700 27px/1.15 'Baskerville', serif; }
.inv-doc .doc-fuente { margin: 0 0 6px; font: 13px 'Maquina', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #6d5d47; }
.inv-doc .doc-cuerpo { column-count: 2; column-gap: 28px; }
.inv-doc mark { background: none; color: inherit; border-bottom: 2px dotted rgba(140, 40, 20, 0.55); cursor: pointer; }
.inv-doc mark:hover { background: rgba(220, 180, 60, 0.25); }
.inv-doc mark.hecha { background: rgba(230, 200, 60, 0.45); border-bottom-color: transparent; }
.tipo-microficha .inv-doc { background: #1b2420; color: #cfe3d4; font-family: 'Maquina', monospace; filter: contrast(1.1); }
.tipo-microficha .inv-doc .doc-fuente { color: #8fb39d; }
.tipo-microficha .inv-doc mark.hecha { background: rgba(140, 220, 160, 0.25); }
.tipo-portatil .inv-doc { background: #f4f4f2; font: 15px/1.55 Arial, sans-serif; }
.tipo-portatil .inv-doc .doc-cuerpo, .tipo-archivo .inv-doc .doc-cuerpo, .tipo-carpeta .inv-doc .doc-cuerpo { column-count: 1; }
.tipo-archivo .inv-doc { font-family: 'Maquina', monospace; background: #e4dccb; }
.inv-marco footer { grid-column: 1 / 3; display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; border-top: 1px solid var(--linea); }
.inv-cuenta { color: var(--ambar); letter-spacing: 0.06em; }
.mj-deducir { background: rgba(0, 0, 0, 0.62); }
.ded-pagina { width: min(640px, 92vw); padding: 30px 36px; color: var(--tinta); background: radial-gradient(ellipse at 30% 20%, #efe4cb, #dccba6);
  border: 10px solid #3b2a1c; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8); }
.ded-pregunta { margin: 0 0 16px; font: 30px 'Mano', cursive; }
.ded-ops { display: flex; flex-direction: column; gap: 6px; }
.ded-ops button { text-align: left; padding: 8px 12px; background: rgba(255, 255, 255, 0.25); border: 1px solid rgba(60, 40, 20, 0.3); color: var(--tinta); font: 18px 'Baskerville', serif; }
.ded-ops button b { color: #7a2a1c; margin-right: 10px; font-family: 'Maquina', monospace; }
.ded-ops button small { display: block; margin-left: 24px; color: #6b5a44; font-size: 14px; }
.ded-ops button:hover { background: rgba(255, 255, 255, 0.5); }
.ded-pie { margin: 14px 0 0; font: 14px 'Maquina', monospace; color: #6b5a44; }
.mj-mantener { place-items: end center; padding-bottom: 22vh; pointer-events: none; }
.man-caja { width: 300px; text-align: center; text-shadow: 0 1px 3px #000; }
.man-caja p { margin: 0 0 6px; letter-spacing: 0.08em; text-transform: uppercase; }
.man-barra { height: 4px; background: rgba(255, 255, 255, 0.15); }
.man-barra i { display: block; height: 100%; width: 0; background: var(--ambar); }
.man-caja small { color: var(--tenue); }
.mj-mantener.parado .man-barra i { background: #7a6a4a; }
.mj-exorcismo { background: rgba(0, 0, 0, 0.55); }
.exo-libro { width: min(760px, 94vw); padding: 26px 34px; color: #e9dfc8; background: rgba(14, 10, 8, 0.92); border: 1px solid #5a3a20; box-shadow: 0 0 60px rgba(120, 30, 10, 0.4); }
.exo-cab { margin: 0 0 10px; font: 13px 'Maquina', monospace; letter-spacing: 0.1em; color: #b88a5a; text-transform: uppercase; }
.exo-leido { max-height: 140px; overflow: auto; font: italic 18px/1.5 'Baskerville', serif; color: #cbb999; }
.exo-sig { margin: 14px 0 6px; color: var(--ambar); letter-spacing: 0.1em; text-transform: uppercase; font-size: 14px; }
.exo-ops { display: flex; flex-direction: column; gap: 6px; }
.exo-ops button { text-align: left; padding: 8px 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(200, 150, 90, 0.3); font: italic 18px 'Baskerville', serif; color: #f1e6cf; }
.exo-ops button b { font: normal 15px 'Maquina', monospace; color: var(--ambar); margin-right: 10px; }
.exo-ops button:hover { background: rgba(217, 164, 65, 0.15); }
.exo-tiempo { height: 3px; margin-top: 12px; background: rgba(255, 255, 255, 0.1); }
.exo-tiempo i { display: block; height: 100%; background: #b03a22; }
.exo-ayuda { margin: 8px 0 0; font-size: 13px; color: var(--tenue); }
.mj-ganzua { background: rgba(0, 0, 0, 0.55); }
.gz-caja { text-align: center; }
.gz-titulo { font: 26px 'Fell', serif; margin: 0 0 18px; }
.gz-cerradura { width: 220px; height: 220px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #8a7a50 0 30%, #5b4d2c 31% 60%, #3a3020 61%); box-shadow: inset 0 0 20px #000, 0 0 0 6px #2a2418; }
.gz-cilindro { position: relative; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #b9a46a, #7c6a3c); box-shadow: inset 0 0 10px #000; transition: transform 0.05s; }
.gz-cilindro::after { content: ''; position: absolute; left: 50%; top: 18px; width: 10px; height: 46px; margin-left: -5px; background: #1a1610; border-radius: 4px; }
.gz-ganzua { position: absolute; left: 50%; bottom: 50%; width: 3px; height: 140px; margin-left: -1.5px; background: linear-gradient(#ccc, #777); transform-origin: 50% 100%; }
.gz-ganzua.tiembla { animation: tiembla 0.06s infinite; }
@keyframes tiembla { 50% { margin-left: -0.5px; } }
.gz-ayuda { color: var(--tenue); font-size: 14px; margin-top: 18px; }

/* ---------- fallos ---------- */
.fallo { position: fixed; left: 50%; top: 20px; transform: translateX(-50%); z-index: 100; width: min(760px, 94vw); padding: 14px 18px;
  background: #1a0d0b; border: 1px solid #7a2a1c; color: #f1d6cf; font-size: 15px; pointer-events: auto; user-select: text; }
.fallo pre { max-height: 40vh; overflow: auto; white-space: pre-wrap; font: 12px/1.4 monospace; color: #e8b8ad; }
.fallo button { background: none; border: 1px solid #7a2a1c; padding: 4px 12px; }
.sin-js { position: fixed; inset: 0; display: grid; place-items: center; }

@media (max-width: 720px) {
  .m-lista li { grid-template-columns: 52px 1fr 92px; }
  .m-lista .cri { display: none; }
  .inv-marco { grid-template-columns: 1fr; grid-template-rows: auto 120px 1fr auto; }
  .inv-marco header, .inv-marco footer { grid-column: 1; }
  .inv-doc .doc-cuerpo { column-count: 1; }
  .bestiario { grid-template-columns: 1fr; }
  .m-opciones label { grid-template-columns: 1fr; }
}