/* INTERFAZ NUEVA · HUD de PC (opción A con la barra de la B) (diseno/demo/INTERFAZ-NUEVA.md §13.4).
   Es de HUD DE PC: aquí van SOLO sus estilos. Todas las clases con prefijo ix- (ix-pc-…); medidas en px del lienzo
   (1440 × 810: diseno/demo/interfaz-lienzo/PcExplorar.html y PcCombate.html), como en css/interfaz.css (el kit, de BASE:
   no se toca). Cada pieza la coloca interfaz/index.js por su ancla; dentro de cada una, lo suyo va en absoluto con las
   medidas del lienzo. En .ix nada recibe el ratón salvo lo que lo pide (pointer-events: auto).
   Piezas: client/js/demo/interfaz/hud/pc/*.js. Todo va con «.ix-pc » delante: gana a «.ix button» del kit. */

/* un botón no hereda el interletraje de la raíz (el navegador le pone «normal»): el lienzo tiene esos textos en div */
.ix-pc button { letter-spacing: inherit; }

/* EL HUD DE PC NO DEJA PASAR LOS CLICS AL MUNDO: con el ratón «como en WoW» (CONTRATO §18.3) un clic en el suelo QUITA el
   objetivo, así que un clic en tu marco, en la barra de PX, en la munición, en el chat o en un hueco del micromenú no puede
   llegar a la zona del mundo (ni el clic derecho: el menú del navegador lo quita interfaz/index.js). Lo que es «sólido» recibe
   el ratón aunque no haga nada con él (control/entrada/raton.js solo cuenta los botones que se aprietan sobre la zona). */
.ix-pc .ix-pc-yo, .ix-pc .ix-pc-obj, .ix-pc .ix-pc-pips, .ix-pc .ix-pc-px, .ix-pc .ix-pc-pildora, .ix-pc .ix-pc-chat, .ix-pc .ix-pc-micro, .ix-pc .ix-pc-mis { pointer-events: auto; }

/* ---------------------------------------------------------------- retratos (tu marco y el del objetivo) */
.ix-pc .ix-pc-retrato { position: absolute; display: block; border-radius: 50%; border: 3px solid var(--ix-tinta); overflow: hidden; box-shadow: 0 3px 0 var(--ix-tinta);
  background: radial-gradient(circle at 50% 30%, #7684c0, #343f78 62%, #1b2149); }
.ix-pc .ix-pc-retrato::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); pointer-events: none; }
.ix-pc .ix-pc-retrato > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ix-pc .ix-pc-retrato[data-ix-pc-ret="letra"] { background: radial-gradient(circle at 50% 25%, rgba(255, 255, 255, .4), rgba(0, 0, 0, .28)), var(--ix-pc-c, #7f88ad); }
.ix-pc .ix-pc-letra { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; padding-bottom: 2px; }

/* ---------------------------------------------------------------- estados (tuyos y del objetivo): glifo y «4 s» */
.ix-pc .ix-pc-estados { display: flex; align-items: center; gap: 8px; }
.ix-pc .ix-pc-estado { display: flex; align-items: center; gap: 4px; font-size: 11px; cursor: default; }
.ix-pc .ix-pc-estado.ix-pc-malo > .ix-t { color: var(--ix-rojo); }
/* más de 3 estados: columnas de 30 px con el tiempo debajo (caben 6 en el ancho de la barra de vida) */
.ix-pc .ix-pc-compactos { gap: 4px; align-items: flex-start; }
.ix-pc .ix-pc-compactos > .ix-pc-estado { flex-direction: column; gap: 0; width: 30px; }
.ix-pc .ix-pc-compactos > .ix-pc-estado > .ix-t { font-size: 9.5px; line-height: 11px; }

/* el rastro del golpe: lo que acaba de perder la barra se queda un momento en claro y luego la alcanza */
.ix-pc .ix-pc-rastro { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; background: rgba(255, 255, 255, .82); transition: transform .5s cubic-bezier(.3, .7, .4, 1) .12s; }
.ix-pc .ix-pc-cambio > .ix-pc-rastro { transition: none; }

/* ---------------------------------------------------------------- marco del jugador (en (15, 13)) */
.ix-pc .ix-pc-yo { width: 320px; height: 92px; }
.ix-pc .ix-pc-yo-retrato { left: 5px; top: 5px; width: 72px; height: 72px; pointer-events: auto; }
.ix-pc .ix-pc-yo-retrato:hover { filter: brightness(1.12); }
.ix-pc .ix-pc-yo-nv { position: absolute; left: 0; top: 51px; }
.ix-pc .ix-pc-yo-nombre { position: absolute; left: 89px; top: 0; font-size: 18px; }
.ix-pc .ix-pc-quien { margin-left: 5px; font-size: 12px; color: var(--ix-rosa); -webkit-text-stroke: 0; text-shadow: 0 1px 0 #000; }
.ix-pc .ix-pc-yo-vida { position: absolute; left: 89px; top: 27px; }
.ix-pc .ix-pc-yo-rec { position: absolute; left: 89px; top: 49px; }
.ix-pc .ix-pc-yo-estados { position: absolute; left: 89px; top: 66px; }
.ix-pc .ix-pc-yo.ix-pc-muerto > .ix-pc-retrato > img { filter: grayscale(1) brightness(.7); }
/* vida baja (menos de la mitad) y crítica (menos de un cuarto) */
.ix-pc .ix-pc-baja { --f1: #ffe9a8; --f2: #ffb21a; --f3: #e07a00; }
.ix-pc .ix-pc-critica { --f1: #ff9a8a; --f2: #ec3326; --f3: #a8161c; animation: ix-pc-late .55s ease-in-out infinite alternate; }
@keyframes ix-pc-late { to { filter: brightness(1.45); } }

/* ---------------------------------------------------------------- marco del objetivo (en (352, 13)) */
.ix-pc .ix-pc-obj { width: 294px; height: 90px; }
.ix-pc .ix-pc-obj-nombre { position: absolute; left: -4px; top: 0; width: 228px; padding: 0 4px; text-align: right; font-size: 18px; color: var(--ix-rojo); overflow: hidden; text-overflow: ellipsis; }
.ix-pc .ix-pc-obj-elite { display: none; color: var(--ix-oro); }
.ix-pc .ix-pc-obj-es-elite .ix-pc-obj-elite { display: inline; }
.ix-pc .ix-pc-obj-sub { position: absolute; left: 0; top: 27px; width: 220px; text-align: right; font-size: 12px; color: var(--ix-rosa); text-shadow: 0 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-pc .ix-pc-obj-vida { position: absolute; left: 0; top: 27px; }
.ix-pc .ix-pc-escudo { position: absolute; left: 0; top: 0; height: 5px; width: 100%; transform-origin: left; background: linear-gradient(#fff, #cfe6ff); box-shadow: 0 1px 0 rgba(10, 10, 28, .55); }
.ix-pc .ix-pc-obj-pie { position: absolute; left: 0; top: 51px; display: flex; align-items: center; gap: 8px; }
.ix-pc .ix-pc-obj-ajeno-tag { display: none; }
.ix-pc .ix-pc-obj-retrato { left: 230px; top: 5px; width: 64px; height: 64px; background: radial-gradient(circle at 50% 30%, #ffe89a, #e0a030 60%, #9a5a10); }
.ix-pc .ix-pc-obj-nv { position: absolute; left: 272px; top: 45px; }
/* PNJ: su nombre en amarillo y su título; sin vida ni nivel */
.ix-pc .ix-pc-obj-pnj .ix-pc-obj-nombre { color: var(--ix-amarillo); }
.ix-pc .ix-pc-obj-pnj .ix-pc-obj-pie { display: none; }
/* otro jugador: azul de aliado; debajo de la vida, quién es */
.ix-pc .ix-pc-obj-jugador .ix-pc-obj-nombre { color: var(--ix-azul); }
.ix-pc .ix-pc-obj-jugador .ix-pc-obj-vida { --f1: #9ed3ff; --f2: #3f9dff; --f3: #1f6fe0; }
.ix-pc .ix-pc-obj-jugador .ix-pc-obj-sub { top: 52px; }
.ix-pc .ix-pc-obj-jugador .ix-pc-obj-pie { display: none; }
.ix-pc .ix-pc-obj-jugador .ix-pc-obj-nv { background: linear-gradient(#9ed3ff, #3f9dff 50%, #1750b0); }
.ix-pc .ix-pc-obj-caido .ix-pc-obj-nombre { color: var(--ix-gris); }
.ix-pc .ix-pc-obj-caido .ix-pc-obj-retrato { filter: grayscale(1) brightness(.75); }
/* el bicho que marcó otro jugador antes: no es tuyo, en gris */
.ix-pc .ix-pc-obj-ajeno .ix-pc-obj-nombre { color: var(--ix-gris); }
.ix-pc .ix-pc-obj-ajeno .ix-pc-obj-vida { --f1: #d5dbee; --f2: #8a93b8; --f3: #5d6796; }
.ix-pc .ix-pc-obj-ajeno .ix-pc-obj-retrato { filter: grayscale(.85); }
.ix-pc .ix-pc-obj-ajeno .ix-pc-obj-ajeno-tag { display: block; }
/* élite: el aro dorado */
.ix-pc .ix-pc-obj-es-elite .ix-pc-obj-retrato { box-shadow: 0 0 0 2.5px #ffc21a, 0 0 0 4.5px var(--ix-tinta), 0 6px 0 var(--ix-tinta); }

/* ---------------------------------------------------------------- lugar y hora y minimapa redondo (derecha 20, y 12) */
.ix-pc .ix-pc-arriba-der { width: 204px; height: 182px; }
.ix-pc .ix-pc-lugar { position: absolute; left: 0; top: 0; width: 204px; height: 25px; border-radius: 13px; background: rgba(8, 12, 34, .62); border: 2px solid rgba(0, 0, 0, .55); padding: 2px 11px 0;
  display: flex; justify-content: space-between; gap: 8px; font-size: 12px; cursor: pointer; }
.ix-pc .ix-pc-lugar-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ix-pc .ix-pc-lugar-h { flex: none; }
.ix-pc .ix-pc-mm { position: absolute; right: 0; top: 32px; width: 150px; height: 150px; border-radius: 50%; border: 3px solid var(--ix-tinta); overflow: hidden; cursor: pointer; background: #7a2e2e;
  box-shadow: 0 3px 0 var(--ix-tinta), 0 6px 10px rgba(0, 0, 0, .35); }
.ix-pc .ix-pc-mm::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); pointer-events: none; }
.ix-pc .ix-pc-mm > canvas { display: block; width: 100%; height: 100%; }
.ix-pc .ix-pc-mm:hover > canvas { filter: brightness(1.08); }
.ix-pc .ix-pc-cono { position: absolute; inset: 0; display: block; pointer-events: none; transform-origin: 50% 50%; }
.ix-pc .ix-pc-cono > svg { display: block; width: 100%; height: 100%; }
/* (en el hueco que deja el círculo a su izquierda va el piloto de estado: css/interfaz.css) */

/* ---------------------------------------------------------------- misiones (derecha 20, y 204) */
.ix-pc .ix-pc-mis { width: 250px; }
.ix-pc .ix-pc-mis-cab { height: 20px; line-height: 16px; padding-right: 4px; text-align: right; font-size: 13px; color: var(--ix-claro); }
.ix-pc .ix-pc-mis-lista { padding: 7px 10px 9px 12px; border-radius: 14px; background: linear-gradient(270deg, rgba(8, 12, 34, .68), rgba(8, 12, 34, .3)); display: flex; flex-direction: column; gap: 3px; }
.ix-pc .ix-pc-mis-una { display: flex; flex-direction: column; gap: 3px; text-align: left; border: 0; background: none; pointer-events: auto; min-width: 0; }
.ix-pc .ix-pc-mis-una + .ix-pc-mis-una { margin-top: 4px; }
.ix-pc .ix-pc-mis-una:hover { filter: brightness(1.18); }
.ix-pc .ix-pc-mis-titulo { font-size: 14px; color: var(--ix-amarillo); overflow: hidden; text-overflow: ellipsis; padding: 0 2px; margin: 0 -2px; }
.ix-pc .ix-pc-mis-titulo > em { font-style: normal; color: var(--ix-rojo); }
.ix-pc .ix-pc-mis-tarea { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.ix-pc .ix-pc-mis-tarea > i { flex: none; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--ix-tinta); background: rgba(255, 255, 255, .85); }
.ix-pc .ix-pc-mis-tarea > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; margin: 0 -2px; }
.ix-pc .ix-pc-mis-tarea > b { margin-left: auto; font-weight: 400; color: var(--ix-amarillo); }
.ix-pc .ix-pc-mis-tarea > b.ix-pc-sube { animation: ix-pc-bote .45s; }
.ix-pc .ix-pc-hecha .ix-pc-mis-titulo { color: var(--ix-verde); }
.ix-pc .ix-pc-hecho > i { background: var(--ix-verde); }
.ix-pc .ix-pc-mis-mas { font-size: 12px; color: var(--ix-gris); margin-top: 2px; }
@keyframes ix-pc-bote { 30% { scale: 1.5; color: #fff; } }

/* ---------------------------------------------------------------- chat sin marco (izquierda 20, abajo 40; 380 px) */
.ix-pc .ix-pc-chat { width: 380px; padding: 8px 12px 10px; border-radius: 12px; background: linear-gradient(90deg, rgba(8, 12, 34, .6), rgba(8, 12, 34, .15)); display: flex; flex-direction: column; }
.ix-pc .ix-pc-chat.ix-pc-abierto { background: linear-gradient(90deg, rgba(8, 12, 34, .86), rgba(8, 12, 34, .62)); pointer-events: auto; }
.ix-pc .ix-pc-chat-tabs { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; height: 16px; }
.ix-pc .ix-pc-chat-tab { border: 0; background: none; font-size: 13px; line-height: 16px; color: var(--ix-gris); pointer-events: auto; }
.ix-pc .ix-pc-chat-tab.ix-on { color: var(--ix-amarillo); }
.ix-pc .ix-pc-chat-tab:hover { filter: brightness(1.25); }
.ix-pc .ix-pc-chat-gestos { margin: -4px -2px -4px auto; width: 24px; height: 24px; border: 0; background: none; display: grid; place-items: center; pointer-events: auto; opacity: .55; transition: opacity .12s; }
.ix-pc .ix-pc-chat-gestos:hover, .ix-pc .ix-pc-chat-gestos[aria-expanded="true"] { opacity: 1; filter: brightness(1.25); }
.ix-pc .ix-pc-chat-lineas { display: flex; flex-direction: column; gap: 3px; overflow: hidden; pointer-events: none; }
.ix-pc .ix-pc-chat-linea { flex: none; font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #000; }
.ix-pc .ix-pc-chat-linea > small { margin-right: 5px; font-size: 10px; color: var(--ix-apagado); }
.ix-pc .ix-pc-chat-vacio { color: var(--ix-apagado); }
.ix-pc .ix-pc-abierto .ix-pc-chat-lineas { max-height: 188px; overflow-y: auto; pointer-events: auto; padding-right: 4px; }
.ix-pc .ix-pc-abierto .ix-pc-chat-linea { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.ix-pc .ix-pc-chat-pista { align-self: flex-start; margin-top: 7px; border: 0; background: none; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 12px; line-height: 16px; color: var(--ix-gris); text-align: left; pointer-events: auto; }
.ix-pc .ix-pc-chat-pista:hover { color: #fff; }
.ix-pc .ix-pc-chat-pista.ix-pc-sin-red { color: var(--ix-rojo); }
.ix-pc .ix-pc-chat-fila { display: none; align-items: center; gap: 6px; margin-top: 7px; }
.ix-pc .ix-pc-abierto .ix-pc-chat-fila { display: flex; }
.ix-pc .ix-pc-chat-campo { flex: 1; min-width: 0; height: 28px; padding: 0 9px 1px; border-radius: 9px; border: 2.5px solid var(--ix-tinta); background: linear-gradient(#fff, #e8eefc); color: #1d2447; font-size: 13px; outline: none;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12); user-select: text; -webkit-user-select: text; pointer-events: auto; }
.ix-pc .ix-pc-chat-campo:focus { box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12), 0 0 0 2.5px var(--ix-amarillo); }
.ix-pc .ix-pc-chat-campo::placeholder { color: #8a92b0; }
.ix-pc .ix-pc-chat-aviso { display: none; margin-top: 5px; font-size: 11px; color: #ffb3a8; text-shadow: 0 1px 0 #000; }
.ix-pc .ix-pc-abierto .ix-pc-chat-aviso:not(:empty) { display: block; }
/* la fila de gestos, encima de las pestañas */
.ix-pc .ix-pc-gestos { display: none; gap: 8px; margin: 2px 0 10px; }
.ix-pc .ix-pc-con-gestos .ix-pc-gestos { display: flex; }
.ix-pc .ix-pc-con-gestos { background: linear-gradient(90deg, rgba(8, 12, 34, .86), rgba(8, 12, 34, .5)); }
.ix-pc .ix-pc-gesto { position: relative; width: 66px; height: 60px; border-radius: 12px; border: 2.5px solid var(--ix-tinta); background: linear-gradient(180deg, #3b467f, #222a56); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--ix-tinta);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; pointer-events: auto; }
.ix-pc .ix-pc-gesto:hover { filter: brightness(1.2); }
.ix-pc .ix-pc-gesto.pulsado { translate: 0 2px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 1px 0 var(--ix-tinta); }
.ix-pc .ix-pc-gesto > small { font-size: 9.5px; color: var(--ix-claro); }

/* ---------------------------------------------------------------- la barra en píldora (centrada abajo; 608 × 113 con la munición y la PX) */
.ix-pc .ix-pc-barra { width: 608px; height: 113px; }
.ix-pc .ix-pc-pips { position: absolute; left: 50%; top: 0; translate: -50% 0; }
.ix-pc .ix-pc-pildora { position: absolute; left: 0; top: 15px; width: 608px; height: 84px; border-radius: 42px; background: rgba(8, 12, 34, .62); border: 2px solid rgba(0, 0, 0, .55); }
.ix-pc .ix-pc-px { position: absolute; left: 0; top: 105px; border-radius: 4px; border-width: 1.5px; }
.ix-pc .ix-pc-candado { position: absolute; left: 12px; top: 40px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: none; display: grid; place-items: center; pointer-events: auto; }
.ix-pc .ix-pc-candado:hover { background: rgba(255, 255, 255, .1); }
.ix-pc .ix-pc-candado.pulsado { scale: .9; }
.ix-pc .ix-pc-b { position: absolute; }
.ix-pc .ix-pc-b:not(.ix-pc-arrastrando) { transition: translate .14s ease-out; }
.ix-pc .ix-pc-barra .ix-key, .ix-pc .ix-pc-barra .ix-et, .ix-pc .ix-pc-barra .ix-etb, .ix-pc .ix-pc-barra .ix-cnt { z-index: 2; }
.ix-pc .ix-pc-barra .ix-hb:hover, .ix-pc .ix-pc-super:hover { filter: brightness(1.1); }
/* la habilidad que ahora no puedes pagar (o el ataque sin munición): apagada */
.ix-pc .ix-pc-sin-recurso > .ix-af { filter: saturate(.3) brightness(.62); }
/* la recarga acaba (y dos habilidades que cambian de casilla): un destello */
.ix-pc .ix-pc-lista-ya, .ix-pc .ix-pc-cambiada { animation: ix-pc-destello .45s ease-out; }
/* [controles] el ATAQUE AUTOMÁTICO de PC puesto: el botón grande encendido, como el icono de ataque de WoW (hud/pc/barra.js) */
.ix-pc .ix-pc-barra .ix-pc-b.ix-pc-auto { outline: 3px solid #ffd84a; outline-offset: 2px; animation: ix-pc-auto .8s ease-in-out infinite alternate; }
@keyframes ix-pc-auto { from { filter: brightness(1.05) drop-shadow(0 0 3px rgba(255, 216, 74, .55)); } to { filter: brightness(1.25) drop-shadow(0 0 9px rgba(255, 216, 74, .95)); } }
@media (prefers-reduced-motion: reduce) { .ix-pc .ix-pc-barra .ix-pc-b.ix-pc-auto { animation: none; filter: brightness(1.2) drop-shadow(0 0 7px rgba(255, 216, 74, .9)); } }
@keyframes ix-pc-destello { 0% { filter: brightness(2.2); scale: 1.12; } 100% { filter: brightness(1); scale: 1; } }
/* recién desbloqueada y aún sin usar */
.ix-pc .ix-pc-barra .ix-nueva::after { content: '¡NUEVA!'; position: absolute; z-index: 3; left: 50%; bottom: -11px; translate: -50% 0; padding: 2px 5px 3px; border-radius: 6px; border: 1.5px solid var(--ix-tinta);
  background: linear-gradient(#fff38a, #ffb800); font-size: 10px; line-height: 1; color: #3a1c00; white-space: nowrap; animation: ix-pc-nueva .6s ease-in-out infinite alternate; }
@keyframes ix-pc-nueva { to { translate: -50% -3px; } }
/* el salto en el aire */
.ix-pc .ix-pc-aire { box-shadow: inset 0 -4px 0 var(--h4), inset 0 3px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--ix-tinta), 0 0 0 3px rgba(255, 255, 255, .55); }
/* la Súper: un anillo que se llena con la carga (--ix-pc-carga 0..1) alrededor del dibujo; dorada y con brillo cuando está lista */
.ix-pc .ix-pc-super { width: 62px; height: 62px; border-radius: 50%; border: 3px solid var(--ix-tinta); padding: 5px; pointer-events: auto; touch-action: none;
  background: conic-gradient(#ffe14a 0, #ffb400 calc(var(--ix-pc-carga, 0) * 1turn), rgba(10, 12, 32, .82) 0); box-shadow: 0 3px 0 var(--ix-tinta), 0 5px 8px rgba(0, 0, 0, .3); }
.ix-pc .ix-pc-super-dentro { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--ix-tinta); }
.ix-pc .ix-pc-super .ix-af { filter: grayscale(.9) brightness(.6); }
.ix-pc .ix-pc-super .ix-et { background: linear-gradient(#ff7a5c, #e3281c); }
.ix-pc .ix-pc-super .ix-hb-candado, .ix-pc .ix-pc-super .ix-etb { display: none; }
.ix-pc .ix-pc-super.ix-pc-lista { background: conic-gradient(#fff38a, #ffc21a, #fff38a, #ffc21a, #fff38a); box-shadow: 0 3px 0 var(--ix-tinta), 0 0 0 5px rgba(255, 214, 40, .4), 0 0 18px 6px rgba(255, 200, 30, .6); }
.ix-pc .ix-pc-super.ix-pc-lista .ix-af { filter: none; }
.ix-pc .ix-pc-super.ix-pc-lista .ix-et { background: linear-gradient(#fff38a, #ffb800); }
.ix-pc .ix-pc-super.ix-pc-bloq .ix-af { filter: grayscale(1) brightness(.45); }
.ix-pc .ix-pc-super.ix-pc-bloq .ix-et { display: none; }
.ix-pc .ix-pc-super.ix-pc-bloq .ix-hb-candado { display: grid; }
.ix-pc .ix-pc-super.ix-pc-bloq .ix-etb { display: block; }
.ix-pc .ix-pc-super.pulsado { transform: scale(.93); }
.ix-pc .ix-pc-super.apuntando { box-shadow: 0 3px 0 var(--ix-tinta), 0 0 0 5px rgba(255, 255, 255, .5); }
.ix-pc .ix-pc-super.cancelar { box-shadow: 0 3px 0 var(--ix-tinta), 0 0 0 5px rgba(255, 60, 40, .75); }
/* el candado abierto: las casillas 1-3 se pueden arrastrar */
.ix-pc .ix-pc-abierta .ix-pc-b[data-boton="h1"], .ix-pc .ix-pc-abierta .ix-pc-b[data-boton="h2"], .ix-pc .ix-pc-abierta .ix-pc-b[data-boton="h3"] { outline: 2px dashed var(--ix-amarillo); outline-offset: 3px; cursor: grab; }
.ix-pc .ix-pc-barra .ix-pc-b.ix-pc-arrastrando { z-index: 6; cursor: grabbing; scale: 1.1; outline-style: solid; box-shadow: inset 0 -4px 0 var(--h4), inset 0 3px 0 rgba(255, 255, 255, .45), 0 8px 14px rgba(0, 0, 0, .5); }
.ix-pc .ix-pc-barra .ix-pc-b.ix-pc-destino { outline: 3px solid var(--ix-verde); outline-offset: 3px; filter: brightness(1.25); }
.ix-pc .ix-pc-moviendo .ix-pc-b:not(.ix-pc-arrastrando):not(.ix-pc-destino):not([data-boton="h1"]):not([data-boton="h2"]):not([data-boton="h3"]), .ix-pc .ix-pc-moviendo .ix-pc-super { opacity: .55; }
/* el botón contextual («F Hablar»), en la zona de encima de la barra */
.ix-pc .ix-pc-accion { position: relative; height: 42px; padding: 0 18px 3px 12px; border-radius: 21px; gap: 7px; font-size: 16px; touch-action: none; }
.ix-pc .ix-pc-accion > .ix-key { -webkit-text-stroke: 0; text-shadow: none; }      /* (el botón le pone trazo al texto; a la tecla no) */
.ix-pc .ix-pc-accion-ico { display: block; flex: none; }
.ix-pc .ix-pc-accion-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1; }
.ix-pc .ix-pc-accion-txt > small { font-size: 9.5px; color: #5a2c00; -webkit-text-stroke: 0; text-shadow: none; }
.ix-pc .ix-pc-accion-txt > small:empty { display: none; }
.ix-pc .ix-pc-accion.ix-pc-sale { animation: ix-pc-sale .22s ease-out; }
/* la carrera automática puesta (hud/pc/carrera.js): una píldora sobre la barra, con su tecla; un clic la quita */
.ix-pc .ix-pc-carrera { position: relative; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px 2px 8px; font-size: 13px; pointer-events: auto; cursor: pointer;
  background: linear-gradient(180deg, rgba(63, 157, 255, .95), rgba(31, 88, 200, .95)); }
.ix-pc .ix-pc-carrera:hover { filter: brightness(1.15); }
.ix-pc .ix-pc-carrera-ico { display: block; flex: none; width: 20px; height: 20px; }
.ix-pc .ix-pc-carrera > .ix-key { position: static; margin-left: 2px; -webkit-text-stroke: 0; text-shadow: none; }
.ix-pc-carrera-f { animation: ix-pc-corre .7s linear infinite; }
.ix-pc-carrera-f:last-child { animation-delay: -.35s; }
@keyframes ix-pc-corre { 0% { opacity: .35; } 50% { opacity: 1; } 100% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ix-pc-carrera-f { animation: none; } }
@keyframes ix-pc-sale { 0% { scale: .6; opacity: 0; } 70% { scale: 1.06; } }

/* ---------------------------------------------------------------- oro, mochila y micromenú (derecha 20, abajo 13) */
.ix-pc .ix-pc-abajo-der { width: 269px; height: 105px; }
.ix-pc .ix-pc-oro { position: absolute; right: 82px; top: 12px; display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px 1px 4px; cursor: default; }
.ix-pc .ix-pc-oro > .ix-t { font-size: 12px; }
.ix-pc .ix-pc-oro.ix-pc-sube { animation: ix-pc-bote .45s; }
.ix-pc .ix-pc-mochila { position: absolute; right: 0; top: 0; }
.ix-pc .ix-pc-micro { position: absolute; right: 1px; bottom: 0; display: flex; gap: 8px; }
.ix-pc .ix-pc-abajo-der .ix-hb:hover { filter: brightness(1.18); }

/* ---------------------------------------------------------------- la descripción al pasar el ratón */
.ix-pc .ix-pc-desc { position: absolute; z-index: 60; display: none; flex-direction: column; gap: 4px; min-width: 150px; max-width: 280px; padding: 8px 11px 9px; border-radius: 12px; border: 2.5px solid var(--ix-tinta);
  background: linear-gradient(180deg, #333d74, #262e5c 55%, #1f2650); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--ix-tinta), 0 8px 16px rgba(0, 0, 0, .4); pointer-events: none; }
.ix-pc .ix-pc-desc.ix-pc-ver { display: flex; }
.ix-pc .ix-pc-desc-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; }
.ix-pc .ix-pc-desc-titulo { font-size: 15px; color: var(--ix-oro); white-space: normal; }
.ix-pc .ix-pc-desc-tecla { flex: none; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 5px; background: #fff; color: var(--ix-tinta); border: 1.5px solid var(--ix-tinta); font-size: 11px; line-height: 16px; text-align: center; white-space: nowrap; }
.ix-pc .ix-pc-desc-sub { font-size: 10.5px; color: var(--ix-claro); }
.ix-pc .ix-pc-desc-texto { font-size: 11.5px; line-height: 1.35; color: var(--ix-blanco); }
.ix-pc .ix-pc-desc-datos { display: flex; flex-direction: column; gap: 2px; margin-top: 1px; }
.ix-pc .ix-pc-desc-dato { display: flex; justify-content: space-between; gap: 14px; font-size: 10.5px; color: var(--ix-gris); }
.ix-pc .ix-pc-desc-dato > b { color: #fff; text-align: right; }
.ix-pc .ix-pc-desc-nota { font-size: 10.5px; color: var(--ix-gris); }
.ix-pc .ix-pc-desc-nota.ix-pc-mala { color: #ffb3a8; }

/* ---------------------------------------------------------------- el cursor sobre el mundo
   El cursor de verdad (atacar, hablar, comprar, recoger, ir, «ahí no», girar) es del equipo de controles: su módulo
   control/entrada/cursor.js escribe data-cursor Y el dibujo en la zona del mundo (style.cursor) cuando su bandera está
   puesta (?con=control), y entonces manda él. Mientras no lo esté, hud/pc/cursor.js pone data-ix-cursor="atacar" con la
   espada de abajo (dibujo original de 32 × 32) cuando el ratón está sobre un enemigo; con data-cursor presente, no cuenta. */
.ix-pc .ix-toques[data-ix-cursor="atacar"]:not([data-cursor]) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg stroke='%230a0a1c' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M3 3 L11 5 L21 15 L15 21 L5 11Z' fill='%23e8eef8'/%3E%3Cpath d='M21.5 11 L26 15.5 L15.5 26 L11 21.5Z' fill='%23ffc93a'/%3E%3Cpath d='M20 20 L27.5 27.5' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M20 20 L27.5 27.5' stroke='%23b86b2e' stroke-width='3.2' stroke-linecap='round'/%3E%3C/g%3E%3Cpath d='M6 6 L15 15' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") 3 3, crosshair; }

/* ---------------------------------------------------------------- vecinos (INTERFAZ-NUEVA.md §5.8): lo de la cámara que cuelga de #ui
   El botón de la cámara ya no va en el HUD (Iván, 2026-10-01: css/demo.css lo esconde; sus opciones, en Ajustes →
   Controles). De control/camara-piezas.js queda a la vista su aviso («Vista 3D», al cambiar con las teclas), y su
   cuadro sigue en el árbol por si alguien lo abre (ctl.abrir): aquí se les dan las medidas y el aspecto del lienzo.
   Fuera de .ix no hay --ix-k: --ix-u es un px del lienzo de PC (la misma cuenta que interfaz/plataforma.js). */
#ui:has(> .ix-pc) > .cam-cuadro, #ui:has(> .ix-pc) > .cam-aviso { --ix-u: clamp(.6px, min(100vw / 1440, 100vh / 810), 2.2px); }
#ui:has(> .ix-pc) > .cam-cuadro { min-width: calc(250 * var(--ix-u)); padding: calc(10 * var(--ix-u)) calc(12 * var(--ix-u)) calc(12 * var(--ix-u)); gap: calc(9 * var(--ix-u)); font-size: calc(13 * var(--ix-u));
  border: calc(2.5 * var(--ix-u)) solid #0a0a1c; border-radius: calc(14 * var(--ix-u)); background: linear-gradient(180deg, #333d74, #262e5c 55%, #1f2650); backdrop-filter: none;
  box-shadow: inset 0 calc(2 * var(--ix-u)) 0 rgba(255, 255, 255, .14), 0 calc(3 * var(--ix-u)) 0 #0a0a1c, 0 calc(8 * var(--ix-u)) calc(16 * var(--ix-u)) rgba(0, 0, 0, .4); }
#ui:has(> .ix-pc) > .cam-cuadro .cam-fila { gap: calc(14 * var(--ix-u)); }
#ui:has(> .ix-pc) > .cam-cuadro .cam-fila small { font: 800 calc(9.5 * var(--ix-u)) 'Nunito', sans-serif; max-width: calc(150 * var(--ix-u)); opacity: 1; color: #b9c0d8; }
#ui:has(> .ix-pc) > .cam-cuadro .cam-dos { gap: 0; padding: 0; border: calc(2 * var(--ix-u)) solid #0a0a1c; border-radius: calc(10 * var(--ix-u)); overflow: hidden; background: #141833; }
#ui:has(> .ix-pc) > .cam-cuadro .cam-dos button { padding: calc(4 * var(--ix-u)) calc(9 * var(--ix-u)) calc(5 * var(--ix-u)); border-radius: 0; font-size: calc(11 * var(--ix-u)); color: #b9c0d8; }
#ui:has(> .ix-pc) > .cam-cuadro .cam-dos button[aria-pressed="true"] { background: linear-gradient(#fff38a, #ffc21a); color: #3a1c00; }
#ui:has(> .ix-pc) > .cam-cuadro .cam-int { width: calc(44 * var(--ix-u)); height: calc(24 * var(--ix-u)); border-radius: calc(12 * var(--ix-u)); border: calc(2 * var(--ix-u)) solid #0a0a1c; background: #141833; transition: none; }
#ui:has(> .ix-pc) > .cam-cuadro .cam-int::after { top: calc(1 * var(--ix-u)); left: calc(1 * var(--ix-u)); width: calc(18 * var(--ix-u)); height: calc(18 * var(--ix-u)); border: calc(2 * var(--ix-u)) solid #0a0a1c; box-sizing: border-box; background: #b9c0d8; transition: none; }
#ui:has(> .ix-pc) > .cam-cuadro .cam-int[aria-checked="true"] { background: linear-gradient(#9dff6a, #3bb81c); }
#ui:has(> .ix-pc) > .cam-cuadro .cam-int[aria-checked="true"]::after { transform: translateX(calc(20 * var(--ix-u))); background: #fff; }
#ui:has(> .ix-pc) > .cam-aviso { top: calc(96 * var(--ix-u)); padding: calc(5 * var(--ix-u)) calc(14 * var(--ix-u)) calc(6 * var(--ix-u)); border-radius: calc(14 * var(--ix-u)); font-size: calc(14 * var(--ix-u)); }