/* INTERFAZ NUEVA · capa del mundo y avisos (placas, números, avisos, brújula, muerte, nivel) (diseno/demo/INTERFAZ-NUEVA.md §13.5).
   Es de CAPA DEL MUNDO Y AVISOS: aquí van SOLO sus estilos. Todas las clases con prefijo ix-mu-. El kit (css/interfaz.css, de BASE)
   no se toca: de él se usan .ix-t (texto con trazo), .ix-n, .ix-bar con sus colores, .ix-nv, .ix-cap, .ix-card y .ix-bo.

   LA UNIDAD --mu. Lo único que el lienzo enseña pegado al mundo es el «38» crítico: 22 px en móvil (844 × 390) y 30 px en PC
   (1440 × 810). Todo lo demás se mide con esa vara: se escribe en px del lienzo de MÓVIL y en PC mide 30 / 22 = 1,364 veces más.
     · capa «mundo» (píxeles reales, lo que da p.estado): --mu = 1 px × --ix-k (× 1,364 en PC)
     · capa «avisos» (ya escalada por --ix-k): --mu = 1 px (1,364 px en PC)
   Así calc(22 * var(--mu)) es el «38» del lienzo en las dos plataformas y a cualquier tamaño de pantalla. */
.ix-movil .ix-capa-mundo { --mu: calc(1px * var(--ix-k)); }
.ix-pc .ix-capa-mundo { --mu: calc(1.364px * var(--ix-k)); }
.ix-movil .ix-capa-avisos { --mu: 1px; }
.ix-pc .ix-capa-avisos { --mu: 1.364px; }

.ix-mu-capa { position: absolute; inset: 0; pointer-events: none; isolation: isolate; }      /* (isolation: el z-index de tu placa se queda dentro de su capa y no sube sobre el HUD ni los avisos) */

/* ---------------------------------------------------------------- placas (enemigos, PNJ y los demás jugadores; sobre ti, solo tu bocadillo y tu gesto)
   El elemento se coloca con translate(x, y) translate(-50%, -100%): su pie queda sobre la cabeza. Dentro, de arriba abajo:
   bocadillo · gesto · «zzz» · marca de misión · la caja (nombre, título, nivel y vida, escudo). */
.ix-mu-placa { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; white-space: nowrap; will-change: transform; }
.ix-mu-placa > *, .ix-mu-caja > * { flex: none; }
.ix-mu-yo { z-index: 2000; }      /* (por encima de las demás, también en 3D, donde las placas llevan un z-index por distancia de 1 a 1000) */
.ix-mu-caja { order: 0; display: flex; flex-direction: column; align-items: center; }
.ix-mu-cab { order: 1; display: flex; align-items: center; gap: calc(3 * var(--mu)); }
.ix-mu-nombre { font-size: calc(11.5 * var(--mu)); line-height: 1.3; color: #fff; }
.ix-mu-titulo { order: 2; font-size: calc(9 * var(--mu)); line-height: 1.25; color: #fff3c0; margin-top: calc(-2 * var(--mu)); }
.ix-mu-fila { order: 3; display: flex; align-items: center; gap: calc(2 * var(--mu)); }
.ix-mu-nv { width: calc(16 * var(--mu)); height: calc(16 * var(--mu)); border-width: calc(1.6 * var(--mu)); padding-bottom: calc(1 * var(--mu)); font-size: calc(9 * var(--mu)); line-height: 1; }
.ix-mu-barra { width: calc(60 * var(--mu)); height: calc(9.5 * var(--mu)); border-width: calc(1.6 * var(--mu)); border-radius: calc(5 * var(--mu)); }
.ix-mu-barra > b { font-size: calc(8.5 * var(--mu)); padding-bottom: 0; }
/* el rastro del golpe: lo que acabas de quitar se queda un instante en claro y se va */
.ix-mu-barra > s { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; background: linear-gradient(#fff, #ffe7a8); opacity: .85; transition: transform .45s ease-in .25s; }
.ix-mu-estreno .ix-mu-barra > s { transition: none; }
.ix-mu-barra.ix-mu-con-num { width: calc(68 * var(--mu)); height: calc(12.5 * var(--mu)); border-radius: calc(6.5 * var(--mu)); }
/* la barra fina de debajo: el escudo de un enemigo (el caparazón) */
.ix-mu-rec { order: 4; width: calc(60 * var(--mu)); height: calc(5.5 * var(--mu)); border-width: calc(1.2 * var(--mu)); border-radius: calc(3 * var(--mu)); margin-top: calc(1 * var(--mu)); }
.ix-mu-escudo { --f1: #fff; --f2: #cfe9ff; --f3: #8fc4ff; width: calc(52 * var(--mu)); }
/* enemigos · PNJ */
.ix-mu-enemigo .ix-mu-nombre { color: var(--ix-rojo); }
.ix-mu-pnj .ix-mu-nombre { color: var(--ix-amarillo); }
.ix-mu-agro .ix-mu-nombre::after { content: ' !'; color: #ff3b2a; }
.ix-mu-lejos .ix-mu-nombre { font-size: calc(10 * var(--mu)); opacity: .9; }
.ix-mu-elite .ix-mu-nombre { color: var(--ix-naranja); font-size: calc(13.5 * var(--mu)); }
.ix-mu-elite .ix-mu-fila { gap: calc(5 * var(--mu)); margin-top: calc(2 * var(--mu)); }
.ix-mu-elite .ix-mu-nv { width: calc(19 * var(--mu)); height: calc(19 * var(--mu)); font-size: calc(10.5 * var(--mu)); background: linear-gradient(#fff09a, #ffb400 55%, #d98200); }
.ix-mu-elite .ix-mu-barra { width: calc(88 * var(--mu)); height: calc(13 * var(--mu)); border-color: #3a1c00; box-shadow: 0 0 0 calc(1.5 * var(--mu)) #ffcc2e, 0 0 0 calc(3 * var(--mu)) var(--ix-tinta), inset 0 2px 3px rgba(0, 0, 0, .55); }
/* lo marcó otro jugador antes (crédito «primero»): en gris, no es tuyo */
.ix-mu-ajeno .ix-mu-nombre, .ix-mu-ajeno.ix-mu-agro .ix-mu-nombre::after { color: #c9cedc; }
.ix-mu-ajeno .ix-mu-barra { --f1: #eef0f6; --f2: #aab2c9; --f3: #6d7594; }
.ix-mu-ajeno .ix-mu-nv { background: linear-gradient(#aeb5cc, #6d7594 55%, #454c68); }
/* el jugador elegido como objetivo (mundo/placas-red.js): en su cápsula, con «▼» */
.ix-mu-objetivo > .ix-mu-caja { padding: calc(2 * var(--mu)) calc(8 * var(--mu)) calc(4 * var(--mu)); border-radius: calc(11 * var(--mu)); background: rgba(8, 12, 34, .62); border: calc(1.8 * var(--mu)) solid rgba(0, 0, 0, .55); }
.ix-mu-objetivo.ix-mu-elite > .ix-mu-caja { box-shadow: 0 0 0 calc(1.6 * var(--mu)) #ffcc2e; padding-bottom: calc(6 * var(--mu)); }
.ix-mu-objetivo .ix-mu-nombre::before { content: '▼ '; color: #fff; }
/* la marca de misión de los PNJ: la única (2D). «?» gris = la misión sigue en curso */
.ix-mu-marca { order: -1; font-size: calc(30 * var(--mu)); line-height: .95; color: var(--ix-oro); -webkit-text-stroke: .14em var(--ix-tinta); text-shadow: 0 .08em 0 #b85a00, 0 .13em 0 var(--ix-tinta); margin-bottom: calc(1 * var(--mu)); animation: ix-mu-marca 1s ease-in-out infinite alternate; }
.ix-mu-marca.ix-mu-gris { color: #cfd5e6; text-shadow: 0 .08em 0 #545b7a, 0 .13em 0 var(--ix-tinta); animation: none; }
@keyframes ix-mu-marca { to { transform: translateY(calc(-4 * var(--mu))); } }
/* los demás jugadores: azul de aliado; el nivel, sobre el color de su clase; los de tu grupo, en verde */
.ix-mu-aliado .ix-mu-cab { gap: calc(2.5 * var(--mu)); }
.ix-mu-aliado .ix-mu-nombre { color: #8fd8ff; max-width: calc(150 * var(--mu)); overflow: hidden; text-overflow: ellipsis; padding: 0 .22em; margin: 0 -.22em; }
.ix-mu-aliado .ix-mu-nv { background: linear-gradient(rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, .3)), var(--mu-clase, #2a7ff0); }
.ix-mu-aliado .ix-mu-barra { --f1: #b8ecff; --f2: #45b6ff; --f3: #1f7fe8; }
.ix-mu-aliado .ix-mu-mini { display: none; width: calc(15 * var(--mu)); height: calc(15 * var(--mu)); font-size: calc(8.5 * var(--mu)); }
.ix-mu-aliado.ix-mu-compacta .ix-mu-mini { display: grid; }
.ix-mu-aliado.ix-mu-compacta .ix-mu-fila, .ix-mu-aliado.ix-mu-muerto .ix-mu-fila, .ix-mu-aliado.ix-mu-muerto .ix-mu-mini { display: none; }
.ix-mu-aliado.ix-mu-combate .ix-mu-nv { box-shadow: 0 0 0 calc(1.8 * var(--mu)) #ff7a3d; }
.ix-mu-aliado.ix-mu-grupo .ix-mu-nombre { color: #9dff7a; }
.ix-mu-aliado.ix-mu-grupo .ix-mu-barra { --f1: #c6ff8a; --f2: #5ee02c; --f3: #2fb418; }
.ix-mu-aliado.ix-mu-muerto .ix-mu-nombre, .ix-mu-aliado.ix-mu-ausente .ix-mu-nombre { color: #b9c0d8; }
.ix-mu-aliado.ix-mu-ausente .ix-mu-barra { --f1: #d9dce8; --f2: #9aa2bd; --f3: #646b88; opacity: .8; }
.ix-mu-aliado.ix-mu-descon > .ix-mu-caja { opacity: .6; }
.ix-mu-calavera { display: none; width: calc(15 * var(--mu)); height: calc(15 * var(--mu)); }
.ix-mu-calavera svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ix-mu-muerto .ix-mu-calavera { display: block; }
.ix-mu-zzz { order: -1; display: none; align-items: flex-end; gap: calc(1 * var(--mu)); height: calc(15 * var(--mu)); margin-bottom: calc(-2 * var(--mu)); }
.ix-mu-ausente > .ix-mu-zzz { display: flex; }
.ix-mu-zzz i { font: calc(11.5 * var(--mu))/1 'Lilita One', sans-serif; font-style: normal; color: #dfe6ff; -webkit-text-stroke: .2em var(--ix-tinta); paint-order: stroke fill; animation: ix-mu-zzz 2s ease-in-out infinite; }
.ix-mu-zzz i:nth-child(2) { font-size: calc(10 * var(--mu)); animation-delay: .35s; }
.ix-mu-zzz i:nth-child(3) { font-size: calc(8.5 * var(--mu)); animation-delay: .7s; }
@keyframes ix-mu-zzz { 0% { opacity: 0; transform: translate(0, calc(4 * var(--mu))); } 30%, 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(6 * var(--mu)), calc(-9 * var(--mu))); } }
/* bocadillos (PNJ, el tuyo y los de los demás) y gestos */
.ix-mu-boca { --mu-fondo: #fff; order: -3; position: relative; margin-bottom: calc(8 * var(--mu)); max-width: calc(196 * var(--mu)); white-space: normal; overflow-wrap: anywhere; text-align: center;
  padding: calc(4 * var(--mu)) calc(8 * var(--mu)) calc(5 * var(--mu)); border-radius: calc(10 * var(--mu)); background: var(--mu-fondo); color: #1d2447; border: calc(2 * var(--mu)) solid var(--ix-tinta);
  font: 800 calc(10.5 * var(--mu))/1.2 'Nunito', sans-serif; letter-spacing: 0; box-shadow: 0 calc(2 * var(--mu)) 0 var(--ix-tinta); animation: ix-mu-pop .25s ease; }
.ix-mu-boca::before { content: ''; position: absolute; left: 50%; bottom: calc(-9.5 * var(--mu)); margin-left: calc(-6 * var(--mu)); border: calc(6 * var(--mu)) solid transparent; border-bottom-width: 0; border-top-color: var(--ix-tinta); }
.ix-mu-boca::after { content: ''; position: absolute; left: 50%; bottom: calc(-4.5 * var(--mu)); margin-left: calc(-4 * var(--mu)); border: calc(4 * var(--mu)) solid transparent; border-bottom-width: 0; border-top-color: var(--mu-fondo); }
.ix-mu-aliado > .ix-mu-boca { --mu-fondo: #eef8ff; }
.ix-mu-yo > .ix-mu-boca { --mu-fondo: #fffbe6; }
@keyframes ix-mu-pop { from { transform: scale(.4); opacity: 0; } }
.ix-mu-gesto { order: -2; width: calc(34 * var(--mu)); height: calc(34 * var(--mu)); margin-bottom: calc(3 * var(--mu)); padding: calc(3.5 * var(--mu)); border-radius: 50%; border: calc(2.2 * var(--mu)) solid var(--ix-tinta);
  background: radial-gradient(circle at 50% 30%, #fff6c0 0%, #ffd21f 55%, #e0a000 100%); box-shadow: 0 calc(2 * var(--mu)) 0 var(--ix-tinta); animation: ix-mu-gesto .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.ix-mu-gesto svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes ix-mu-gesto { from { opacity: 0; transform: scale(.2) rotate(-25deg); } }

/* ---------------------------------------------------------------- números y textos que flotan
   El elemento va en translate(x, y) scale(s); dentro, el texto se centra en ese punto. Los tamaños salen del «38» del lienzo. */
.ix-mu-flota { position: absolute; left: 0; top: 0; font-size: calc(16 * var(--mu)); line-height: 1; color: #fff; white-space: nowrap; will-change: transform, opacity; }
.ix-mu-flota > b { position: relative; display: block; font-weight: 400; transform: translate(-50%, -50%); }
.ix-mu-f-critico { color: var(--ix-amarillo); font-size: calc(22 * var(--mu)); }
.ix-mu-f-critico > b { transform: translate(-50%, -50%) rotate(-7deg); }      /* (el lienzo: «38» amarillo, 22 px, inclinado −7°, sin «!»: el crítico se ve por color, tamaño e inclinación) */
.ix-mu-f-recibido { color: #ff5a45; font-size: calc(15 * var(--mu)); }
.ix-mu-f-cura { color: var(--ix-verde); }
.ix-mu-f-periodico { color: #b6ff9a; font-size: calc(12 * var(--mu)); }
.ix-mu-f-px { color: #e2b4ff; font-size: calc(13 * var(--mu)); }
.ix-mu-f-oro, .ix-mu-f-botin { color: #ffd84d; font-size: calc(12.5 * var(--mu)); }
.ix-mu-f-oro > b, .ix-mu-f-botin > b { padding: calc(2 * var(--mu)) calc(7 * var(--mu)) calc(3 * var(--mu)); border-radius: calc(11 * var(--mu)); background: rgba(8, 12, 34, .72); border: calc(1.6 * var(--mu)) solid var(--ix-tinta); box-shadow: 0 calc(1.5 * var(--mu)) 0 rgba(0, 0, 0, .35); }
.ix-mu-f-malo, .ix-mu-f-info { font-size: calc(12 * var(--mu)); }
.ix-mu-f-malo { color: #ffb3a8; }
.ix-mu-f-bueno { color: var(--ix-amarillo); font-size: calc(14 * var(--mu)); }
/* lo recogido del suelo: su icono pintado y su nombre, a la derecha de tu personaje */
.ix-mu-f-botin { color: #fff; transform-origin: 0 50%; }
.ix-mu-f-botin > b { display: flex; align-items: center; gap: calc(5 * var(--mu)); padding-left: calc(3 * var(--mu)); transform: translate(0, -50%); }
.ix-mu-f-ico { position: relative; flex: none; width: calc(17 * var(--mu)); height: calc(17 * var(--mu)); border-radius: calc(5 * var(--mu)); border: calc(1.5 * var(--mu)) solid var(--ix-tinta); overflow: hidden; }

/* ---------------------------------------------------------------- la brújula (la flecha de la misión, con «N m») */
.ix-mu-brujula { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.ix-mu-punta { position: absolute; left: calc(-17 * var(--mu)); top: calc(-17 * var(--mu)); width: calc(34 * var(--mu)); height: calc(34 * var(--mu)); color: var(--ix-oro); }
.ix-mu-punta svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ix-mu-dist { position: absolute; left: calc(-40 * var(--mu)); top: calc(19 * var(--mu)); width: calc(80 * var(--mu)); text-align: center; font-size: calc(11.5 * var(--mu)); font-weight: 400; line-height: 1; }
.ix-mu-en-pantalla > .ix-mu-punta { animation: ix-mu-bota .8s ease-in-out infinite alternate; }
.ix-mu-en-pantalla > .ix-mu-dist { top: calc(-33 * var(--mu)); }       /* (sobre el destino: la distancia, encima de la flecha) */
.ix-mu-marca-mapa > .ix-mu-punta { color: var(--ix-azul); }            /* la marca que pusiste en el mapa */
@keyframes ix-mu-bota { to { translate: 0 calc(-5 * var(--mu)); } }

/* ---------------------------------------------------------------- viñetas (solo cambian de opacidad) */
.ix-mu-vineta { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.ix-mu-v-golpe { background: radial-gradient(ellipse 72% 78% at 50% 50%, rgba(255, 30, 20, 0) 62%, rgba(255, 30, 20, .52) 100%); transition: opacity .35s; }
.ix-mu-v-golpe.ix-mu-si { opacity: 1; transition: none; }
.ix-mu-v-baja { background: radial-gradient(ellipse 72% 78% at 50% 50%, rgba(200, 0, 0, 0) 56%, rgba(200, 0, 0, .5) 100%); }
.ix-mu-v-baja.ix-mu-si { animation: ix-mu-late .8s ease-in-out infinite alternate; }
@keyframes ix-mu-late { from { opacity: .5; } to { opacity: 1; } }

/* ---------------------------------------------------------------- avisos grandes (arriba en el centro) */
.ix-mu-avisos { position: absolute; left: 0; right: 0; top: 22%; display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--mu)); pointer-events: none; }
.ix-mu-aviso { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; animation: ix-mu-aviso 2.8s ease both; }
.ix-mu-aviso-t { font-size: calc(22 * var(--mu)); line-height: 1.12; color: #fff; white-space: normal; text-wrap: balance; max-width: calc(520 * var(--mu)); }
.ix-mu-aviso-rot { font-size: calc(11.5 * var(--mu)); line-height: 1.2; color: var(--ix-rosa); letter-spacing: .05em; text-transform: uppercase; }
.ix-mu-aviso-sub { font-size: calc(12 * var(--mu)); line-height: 1.2; color: #ffe6c0; margin-top: calc(3 * var(--mu)); }
.ix-mu-a-mision .ix-mu-aviso-t { color: var(--ix-amarillo); font-size: calc(24 * var(--mu)); }
.ix-mu-a-malo .ix-mu-aviso-t { color: #ff5a45; font-size: calc(21 * var(--mu)); }
.ix-mu-a-bueno .ix-mu-aviso-t { color: var(--ix-verde); font-size: calc(21 * var(--mu)); }
.ix-mu-a-info .ix-mu-aviso-t { font-size: calc(17 * var(--mu)); }
.ix-mu-cuenta { color: var(--ix-amarillo); }
.ix-mu-a-ballena .ix-mu-aviso-t { color: var(--ix-azul); }
.ix-mu-a-ballena .ix-mu-aviso-sub { color: #e4f3ff; }
/* el cartel del lugar: una banda oscura que se deshace a los lados, con dos filetes dorados */
.ix-mu-lugar-n { position: relative; font-size: calc(23 * var(--mu)); line-height: 1.15; color: #fff3c0; padding: calc(3 * var(--mu)) calc(46 * var(--mu)) calc(5 * var(--mu));
  background: linear-gradient(90deg, rgba(8, 12, 34, 0), rgba(8, 12, 34, .66) 22%, rgba(8, 12, 34, .66) 78%, rgba(8, 12, 34, 0)); }
.ix-mu-lugar-n::before, .ix-mu-lugar-n::after { content: ''; position: absolute; left: 0; right: 0; height: calc(1.5 * var(--mu)); background: linear-gradient(90deg, rgba(255, 210, 31, 0), rgba(255, 210, 31, .9) 26%, rgba(255, 210, 31, .9) 74%, rgba(255, 210, 31, 0)); }
.ix-mu-lugar-n::before { top: 0; } .ix-mu-lugar-n::after { bottom: 0; }
@keyframes ix-mu-aviso { 0% { opacity: 0; transform: scale(.6); } 8% { opacity: 1; transform: scale(1.08); } 14% { transform: scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(-10 * var(--mu))); } }
/* (otro lugar lo sustituye: el de antes se va con un fundido rápido, sin empujar al nuevo) */
.ix-mu-aviso.ix-mu-fuera { position: absolute; top: 0; left: 0; right: 0; animation: ix-mu-fuera .18s ease forwards; }
@keyframes ix-mu-fuera { to { opacity: 0; transform: scale(.96); } }

/* ---------------------------------------------------------------- el aviso corto (toast): abajo en el centro, sobre los botones */
.ix-mu-toasts { position: absolute; left: 0; right: 0; bottom: 22%; display: flex; justify-content: center; pointer-events: none; }
.ix-pc .ix-mu-toasts { bottom: 25%; }
.ix-mu-toast { max-width: calc(270 * var(--mu)); padding: calc(5 * var(--mu)) calc(14 * var(--mu)) calc(6 * var(--mu)); border-radius: calc(16 * var(--mu)); background: rgba(8, 12, 34, .8); border: calc(2 * var(--mu)) solid rgba(0, 0, 0, .6);
  font-size: calc(14 * var(--mu)); line-height: 1.15; color: #ffb3a8; text-align: center; white-space: normal; text-wrap: balance; animation: ix-mu-toast 1.6s ease both; }
.ix-mu-toast.ix-mu-bueno { color: var(--ix-amarillo); }
@keyframes ix-mu-toast { 0% { opacity: 0; transform: scale(.6); } 8% { opacity: 1; transform: scale(1.08); } 14% { transform: scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(-8 * var(--mu))); } }

/* ---------------------------------------------------------------- muerte */
.ix-mu-muerte { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: calc(7 * var(--mu)); pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(60, 0, 10, .35), rgba(20, 0, 5, .78)); }
.ix-mu-muerte.ix-mu-si { display: flex; animation: ix-mu-entra .6s ease both; }
@keyframes ix-mu-entra { from { opacity: 0; } }
.ix-mu-muerte-t { font-size: calc(46 * var(--mu)); line-height: 1; color: #ff5a45; -webkit-text-stroke: .14em var(--ix-tinta); text-shadow: 0 .06em 0 #6a0a0a, 0 .12em 0 var(--ix-tinta); }
.ix-mu-reloj { width: calc(64 * var(--mu)); height: calc(64 * var(--mu)); border-radius: 50%; border: calc(3 * var(--mu)) solid var(--ix-tinta); display: grid; place-items: center;
  background: conic-gradient(var(--ix-oro) calc(var(--mu-p, 0) * 1turn), rgba(10, 12, 32, .8) 0); box-shadow: inset 0 0 0 calc(2 * var(--mu)) rgba(255, 255, 255, .16), 0 calc(3 * var(--mu)) 0 var(--ix-tinta); }
.ix-mu-reloj > b { font-size: calc(29 * var(--mu)); font-weight: 400; line-height: 1; padding-bottom: calc(2 * var(--mu)); }
.ix-mu-muerte-sub { font-size: calc(16 * var(--mu)); line-height: 1.2; }
.ix-mu-consejo { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--mu)); max-width: calc(430 * var(--mu)); margin-top: calc(4 * var(--mu)); padding: calc(6 * var(--mu)) calc(16 * var(--mu)) calc(8 * var(--mu)); text-align: center; }
.ix-mu-consejo > .ix-seccion { font-size: calc(9.5 * var(--mu)); }
.ix-mu-consejo-t { font-size: calc(11.5 * var(--mu)); line-height: 1.3; color: var(--ix-blanco); white-space: normal; text-wrap: balance; }

/* ---------------------------------------------------------------- subir de nivel */
.ix-mu-celebra { position: absolute; left: 0; right: 0; top: 40%; translate: 0 -50%; display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--mu)); pointer-events: none; animation: ix-mu-celebra 3.8s ease both; }
.ix-mu-rayos { position: absolute; left: 50%; top: calc(24 * var(--mu)); width: calc(400 * var(--mu)); height: calc(400 * var(--mu)); margin: calc(-200 * var(--mu)) 0 0 calc(-200 * var(--mu)); border-radius: 50%; animation: ix-mu-gira 14s linear infinite;
  background: repeating-conic-gradient(from 0deg, rgba(255, 244, 170, .55) 0deg 9deg, rgba(255, 244, 170, 0) 9deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .8) 30%, transparent 70%); mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .8) 30%, transparent 70%); }
@keyframes ix-mu-gira { to { transform: rotate(360deg); } }
.ix-mu-nivel-t { position: relative; font-size: calc(50 * var(--mu)); line-height: 1; color: var(--ix-oro); -webkit-text-stroke: .15em var(--ix-tinta); text-shadow: 0 .06em 0 #b85a00, 0 .12em 0 var(--ix-tinta); }
.ix-mu-nivel-sub { position: relative; font-size: calc(15 * var(--mu)); line-height: 1.2; }
.ix-mu-habs { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: calc(6 * var(--mu)); max-width: calc(780 * var(--mu)); margin-top: calc(4 * var(--mu)); }
.ix-mu-habs-2 .ix-mu-hab-d { max-width: calc(200 * var(--mu)); }
.ix-mu-habs-3 .ix-mu-hab-d { max-width: calc(168 * var(--mu)); }
.ix-mu-hab { position: relative; display: flex; align-items: center; gap: calc(9 * var(--mu)); padding: calc(6 * var(--mu)) calc(14 * var(--mu)) calc(7 * var(--mu)) calc(7 * var(--mu)); text-align: left;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--ix-tinta), 0 0 0 calc(2.5 * var(--mu)) var(--ix-amarillo); }
.ix-mu-hab-ico { position: relative; flex: none; width: calc(46 * var(--mu)); height: calc(46 * var(--mu)); border-radius: calc(11 * var(--mu)); border: calc(2.5 * var(--mu)) solid var(--ix-tinta); box-shadow: 0 calc(2 * var(--mu)) 0 var(--ix-tinta); overflow: hidden; }
.ix-mu-hab-txt { display: flex; flex-direction: column; min-width: 0; }
.ix-mu-hab-txt > .ix-seccion { font-size: calc(9.5 * var(--mu)); color: var(--ix-amarillo); }
.ix-mu-hab-n { font-size: calc(17 * var(--mu)); line-height: 1.2; }
.ix-mu-hab-d { font-size: calc(10.5 * var(--mu)); line-height: 1.25; color: var(--ix-blanco); white-space: normal; max-width: calc(280 * var(--mu)); }
@keyframes ix-mu-celebra { 0% { opacity: 0; transform: scale(.3); } 8% { opacity: 1; transform: scale(1.1); } 13% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(-14 * var(--mu))); } }

/* ---------------------------------------------------------------- el aviso del mundo compartido (pieza de la zona «izquierda» del HUD) */
.ix-mu-mundo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ix-mu-mundo-aviso { display: flex; align-items: center; gap: 8px; max-width: 310px; padding: 5px 7px 6px 11px; border-radius: 15px; pointer-events: auto; animation: ix-mu-pop .2s ease both;
  background: linear-gradient(180deg, rgba(120, 34, 30, .95), rgba(70, 18, 22, .95)); }
.ix-mu-mundo-aviso > .ix-t { font-size: 12px; line-height: 1.2; white-space: normal; min-width: 0; }
.ix-mu-mundo-punto { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ix-tinta); background: var(--ix-naranja); animation: ix-mu-late .7s ease-in-out infinite alternate; }
.ix-pc .ix-mu-mundo-aviso { max-width: 360px; }
.ix-pc .ix-mu-mundo-aviso > .ix-t { font-size: 13.5px; }

/* (quien pida menos movimiento: sin el vaivén de las marcas, el giro de los rayos ni los latidos) */
@media (prefers-reduced-motion: reduce) {
  .ix-mu-marca, .ix-mu-en-pantalla > .ix-mu-punta, .ix-mu-rayos, .ix-mu-mundo-punto, .ix-mu-zzz i { animation: none; }
  .ix-mu-v-baja.ix-mu-si { animation: none; opacity: .8; }
}