/* INTERFAZ NUEVA · menús Mapa y Social, el grupo y la invitación (diseno/demo/INTERFAZ-NUEVA.md §13.8).
   Es de MAPA Y SOCIAL: aquí van SOLO sus estilos. Todas las clases con prefijo ix- (ix-map-… el menú Mapa, ix-soc-… el
   menú Social y lo que comparte con el grupo, ix-gr-… el grupo en el HUD); medidas en px del lienzo, como en
   css/interfaz.css (el kit, de BASE: no se toca).
   Los dos menús van dentro del marco de BASE (.ix-panel: flex en fila, gap 10 px, 752 × 332 en 844 × 390); en PC es la
   misma ventana a 1,4×. El grupo en el HUD no está en el lienzo: está hecho con el kit (cápsula, tarjeta, barra, botones)
   y con las medidas del HUD de cada plataforma (--ix-gr: 1 px en móvil, 1,3 px en PC). */

/* ================================================================= MENÚ MAPA (MovilMapa / PcMapa) */
/* (ojo: el kit trae «.ix button { font: inherit; padding: 0 … }», que gana a una clase sola: lo que aquí es un <button>
   con su relleno o su tamaño de letra lleva «.ix » delante) */
/* a la izquierda, el mapa en su hueco: dos lienzos (lo fijo y lo que se mueve) y, encima, los tres botones */
.ix-map-mapa { position: relative; width: 392px; flex: 0 1 392px; min-width: 300px; overflow: hidden; border-radius: 14px; pointer-events: auto; touch-action: none; cursor: grab; background: #2a7fc8; }
.ix-map-mapa.ix-map-arrastra { cursor: grabbing; }
.ix-map-mapa > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.ix-map-zoom { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 5px; }
.ix-map-zoom > .ix-bo { position: relative; width: 30px; padding: 0 0 3px; font-size: 17px; }
/* (la diana del dedo: 44 px de ancho y lo que deja el vecino de alto; el dibujo sigue midiendo 30 × 28, como en el lienzo) */
.ix-map-zoom > .ix-bo::before { content: ''; position: absolute; inset: -9px -7px -2px; }
.ix-map-zoom > .ix-bo + .ix-bo::before { inset: -3px -7px -8px; }
.ix-map-zoom > .ix-bo.ix-map-tope { filter: grayscale(.85) brightness(.75); }
.ix-map-centrar { position: absolute; left: 8px; bottom: 8px; }
.ix-map-centrar::before { content: ''; position: absolute; inset: -8px -6px; }
.ix-map-centrar.ix-on { --b1: #c6e6ff; --b2: #6fb8ff; --b3: #3f93f6; --b4: #1f5fc8; }
/* (si la zona no se puede pintar: se dice, y la lista de lugares sigue valiendo) */
.ix-map-fallo { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; font-size: 11px; line-height: 1.35; color: var(--ix-claro); background: linear-gradient(180deg, #141833, #1c2146); }

/* a la derecha, la zona, la hora y la lista de lugares */
/* (flex 1 0 300: con el cuerpo estrecho —el iPhone con muesca a los dos lados deja 660 px en vez de 752— quien cede es el
   mapa, que se arrastra y se amplía igual, y no la lista, que se cortaba; container: lo de dentro se ajusta a SU ancho) */
.ix-map-info { flex: 1 0 300px; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; container: ixmapa / inline-size; }
.ix-map-cab { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; }
.ix-map-zona { font-size: 19px; color: var(--ix-amarillo); overflow: hidden; text-overflow: ellipsis; min-width: 0; padding: 0 2px; margin: 0 -2px; }
.ix-map-hora { margin-left: auto; flex: none; font-size: 10.5px; color: var(--ix-claro); white-space: nowrap; }
.ix-map-lista { display: flex; flex-direction: column; gap: 3px; flex: 0 1 auto; min-height: 0; }
.ix .ix-map-lugar { position: relative; display: flex; align-items: center; gap: 8px; height: 25px; flex: none; min-width: 0; padding: 0 6px 1px 8px; border: 0; border-radius: 9px; background: rgba(10, 12, 32, .32); text-align: left; pointer-events: auto; }
.ix-map-lugar.pulsado { background: rgba(10, 12, 32, .55); }
.ix-map-lugar.ix-map-aqui { background: rgba(124, 198, 255, .16); }
.ix-map-punto { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.8px solid var(--ix-tinta); }
.ix-map-nombre { flex: none; font-size: 12px; white-space: nowrap; }
.ix-map-tipo { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; color: var(--ix-gris); white-space: nowrap; }
/* «· sin descubrir»: solo en los que no has visto, y solo si cabe (con etiqueta en la fila, o la tarjeta estrecha, no) */
.ix-map-sin { display: none; }
.ix-map-lugar.ix-map-oculto:not(.ix-map-con-tag) .ix-map-sin { display: inline; }
@container ixmapa (max-width: 318px) {
  .ix-map-lugar.ix-map-oculto .ix-map-sin { display: none !important; }
  .ix-map-zona { font-size: 16px; }
  .ix-map-cab > .ix-tag:not(.ix-hd) { display: none; }
  .ix-map-nota { white-space: normal; }
}
.ix-map-lugar > .ix-tag { margin-left: auto; }
/* aún sin descubrir: apagado (se puede marcar igual: una misión puede mandar allí) */
.ix-map-lugar.ix-map-oculto .ix-map-nombre { color: var(--ix-apagado); }
.ix-map-lugar.ix-map-oculto .ix-map-punto { opacity: .5; }
/* el lugar marcado: borde amarillo y el punto con su aro, como lo elegido del kit */
.ix-map-lugar.ix-map-marcado { background: rgba(255, 225, 74, .16); box-shadow: inset 0 0 0 2px var(--ix-amarillo); }
.ix-map-lugar.ix-map-marcado .ix-map-punto { box-shadow: 0 0 0 2px var(--ix-amarillo); }
/* (el que se abre desde otro menú —Misiones → «Ver en el mapa»—: un destello para encontrarlo en la lista) */
.ix-map-lugar.ix-map-destello { animation: ix-map-destello 1.6s ease-out; }
@keyframes ix-map-destello { 0%, 30%, 60% { background: rgba(255, 225, 74, .5); } 15%, 45% { background: rgba(255, 225, 74, .12); } }
.ix-map-nota { margin-top: auto; flex: none; font-size: 9.5px; line-height: 1.25; color: var(--ix-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-map-nota.ix-on { color: var(--ix-amarillo); }

/* ================================================================= MENÚ SOCIAL (MovilSocial / PcSocial) */
.ix-soc-grupo { position: relative; width: 316px; flex: none; display: flex; flex-direction: column; gap: 5px; padding: 9px; min-height: 0; }
.ix-soc-linea { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 9px; }
.ix-soc-cab { display: flex; align-items: center; gap: 6px; flex: none; margin-bottom: 1px; }
.ix-soc-titulo { font-size: 15px; }
.ix-soc-cuenta { font-size: 10px; color: var(--ix-claro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ix-soc-cab > .ix-sg { margin-left: auto; }
/* («Amigos» no existe en el juego: apagada, y dice por qué al tocarla) */
.ix-soc-linea .ix-sg button.ix-soc-no { opacity: .5; }

/* el retrato redondo (el busto, un pintado o la inicial sobre el color de su clase): lo usan el menú y los marcos del HUD */
.ix-soc-retrato { position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ix-tinta); font-size: 16px; line-height: 1;
  background: var(--ix-soc-c, #7f88ad) center / cover no-repeat; -webkit-text-stroke: .19em var(--ix-tinta); paint-order: stroke fill; }
.ix-soc-retrato > .ix-af { border-radius: 50%; }
.ix-soc-retrato > .ix-gi { display: none; }
/* (en la tarjeta del grupo, la inicial va sobre el color de la clase con luz, como el de Korvash en el lienzo) */
@supports (background: color-mix(in srgb, red 50%, white)) {
  .ix-soc-retrato.ix-soc-luz { background-image: linear-gradient(color-mix(in srgb, var(--ix-soc-c, #7f88ad) 55%, #fff), var(--ix-soc-c, #7f88ad) 55%, color-mix(in srgb, var(--ix-soc-c, #7f88ad) 62%, #0a1a6a)); }
}
.ix-soc-retrato.ix-soc-img { background-image: var(--ix-soc-img); background-size: cover; }
.ix-soc-retrato.ix-soc-caido { filter: grayscale(1) brightness(.6); color: transparent; -webkit-text-stroke-color: transparent; }
.ix-soc-retrato.ix-soc-caido > .ix-gi { display: block; position: absolute; inset: 15%; width: auto !important; height: auto !important; }
.ix-soc-retrato.ix-soc-fuera { filter: grayscale(1) brightness(.75); }

/* tú y los de tu grupo */
.ix-soc-miembros { display: flex; flex-direction: column; gap: 5px; flex: none; min-height: 0; }
.ix .ix-soc-miembro { position: relative; height: 46px; padding: 0 9px 0 6px; width: 100%; min-width: 0; }
.ix-soc-miembro.ix-soc-yo { pointer-events: none; }
.ix-soc-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ix-soc-fila1 { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ix-soc-nombre { font-size: 13px; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding: 0 2px; margin: 0 -2px; }
.ix-soc-corona { flex: none; }
.ix-soc-detalle { font-size: 9.5px; color: var(--ix-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ix-soc-fila1 > .ix-soc-detalle { flex: 0 1 auto; }
.ix-soc-miembro .ix-bar { width: 100%; height: 10px; }
.ix-soc-miembro.ix-soc-m-caido .ix-soc-nombre, .ix-soc-miembro.ix-soc-m-fuera .ix-soc-nombre { color: var(--ix-gris); }
.ix-soc-miembro.ix-soc-m-fuera .ix-bar { filter: grayscale(1); opacity: .6; }
.ix-soc-estado { flex: none; margin-left: auto; font-size: 9px; color: var(--ix-rojo); white-space: nowrap; }
.ix-soc-estado:empty { display: none; }
/* huecos libres: «Invitar» */
.ix .ix-soc-libre { height: 30px; gap: 6px; font-size: 11.5px; width: 100%; color: var(--ix-claro); }
.ix-soc-libre.ix-soc-no { opacity: .55; }
/* la invitación que te llega (con un menú abierto no se ve la del HUD: sale también aquí) */
.ix-soc-inv { display: flex; align-items: center; gap: 6px; flex: none; min-height: 46px; padding: 5px 7px 6px 9px; border-radius: 13px; border: 2.5px solid var(--ix-amarillo); background: linear-gradient(180deg, #4a4a2e, #3a3620); }
.ix-soc-inv-texto { flex: 1; min-width: 0; font-size: 11px; line-height: 1.25; white-space: normal; }
.ix-soc-inv-texto > b { font-weight: 400; }
.ix-soc-inv-reloj { flex: none; min-width: 16px; font-size: 11px; color: var(--ix-amarillo); text-align: right; }
/* el pie: la nota y «Salir» */
.ix-soc-pie { margin-top: auto; display: flex; align-items: center; gap: 8px; flex: none; min-height: 28px; }
.ix-soc-pie > .ix-nota { flex: 1; min-width: 0; line-height: normal; }
.ix-soc-pie > .ix-bo { margin-left: auto; position: relative; }
.ix-soc-pie > .ix-bo::before { content: ''; position: absolute; inset: -8px -6px; }
.ix-soc-pie > .ix-bo.ix-soc-no { filter: grayscale(.85) brightness(.8); }

/* quién está en línea */
.ix-soc-lista { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; }
.ix-soc-jugador { display: flex; align-items: center; gap: 8px; height: 42px; flex: none; min-width: 0; padding: 0 6px; border-radius: 12px; background: rgba(10, 12, 32, .32); }
.ix-soc-jugador > .ix-soc-datos { gap: 0; }
.ix-soc-jugador .ix-soc-nombre { flex: 0 1 auto; }
.ix-soc-dist { flex: none; font-size: 9px; color: var(--ix-apagado); white-space: nowrap; }
.ix-soc-jugador.ix-soc-j-caido .ix-soc-nombre, .ix-soc-jugador.ix-soc-j-fuera .ix-soc-nombre { color: var(--ix-gris); }
.ix-soc-jugador > .ix-bo { position: relative; width: 30px; padding: 0 0 3px; }
/* (la diana del dedo: 42 de alto —la fila entera— y lo que deja el vecino de ancho) */
.ix-soc-jugador > .ix-bo::before { content: ''; position: absolute; inset: -7px -4px; }
.ix-soc-jugador > .ix-bo.ix-soc-no { filter: grayscale(.9) brightness(.72); }
.ix-soc-jugador > .ix-bo.ix-soc-espera { filter: grayscale(.6) brightness(.85); animation: ix-soc-espera 1s ease-in-out infinite alternate; }
@keyframes ix-soc-espera { to { opacity: .55; } }
.ix-soc-vacio { margin: auto; max-width: 300px; text-align: center; font-size: 10.5px; line-height: 1.4; color: var(--ix-gris); white-space: normal; }
/* (al tocar un hueco «Invitar»: la lista late para decir dónde se elige) */
.ix-soc-lista.ix-soc-mira > .ix-soc-jugador { animation: ix-soc-mira .9s ease-out; }
@keyframes ix-soc-mira { 0%, 50% { background: rgba(255, 225, 74, .34); } 25% { background: rgba(255, 225, 74, .1); } }

/* ================================================================= EL MENÚ DE UN COMPAÑERO (en el HUD y en «Social») */
.ix-gr-menu { position: absolute; z-index: 6; display: flex; flex-direction: column; gap: 5px; padding: 7px 8px 9px; min-width: 132px; border-radius: 13px; pointer-events: auto; animation: ix-gr-entra .12s ease-out; }
.ix-gr-menu-titulo { font-size: 12px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; padding: 0 2px 1px; }
.ix-gr-menu > .ix-bo { width: 100%; }
@keyframes ix-gr-entra { from { opacity: 0; scale: .92; } }
/* en «Social», a la derecha y debajo de la fila elegida, por encima de los huecos */
.ix-soc-grupo > .ix-gr-menu { right: 9px; }

/* ================================================================= EL GRUPO EN EL HUD (no está en el lienzo: con el kit) */
.ix-movil { --ix-gr: 1px; }
.ix-pc { --ix-gr: 1.3px; }
/* la invitación que te llega */
.ix-gr-inv { position: relative; display: none; flex-direction: column; gap: calc(5 * var(--ix-gr)); width: calc(200 * var(--ix-gr)); padding: calc(6 * var(--ix-gr)) calc(8 * var(--ix-gr)) calc(8 * var(--ix-gr)); border-radius: calc(13 * var(--ix-gr)); border-color: var(--ix-amarillo); pointer-events: auto; animation: ix-gr-entra .16s ease-out; }
.ix-gr-inv.ix-on { display: flex; }
.ix-gr-inv-texto { font-size: calc(11 * var(--ix-gr)); line-height: 1.25; white-space: normal; }
.ix-gr-inv-texto > b { font-weight: 400; }
.ix-gr-inv-fila { display: flex; align-items: center; gap: calc(6 * var(--ix-gr)); }
.ix-gr-inv-fila > .ix-bo { position: relative; }
.ix-gr-inv-fila > .ix-bo::before { content: ''; position: absolute; inset: -6px -3px -10px; }
.ix-gr-inv-reloj { margin-left: auto; font-size: calc(12 * var(--ix-gr)); color: var(--ix-amarillo); }
.ix-gr-inv-barra { position: relative; height: calc(4 * var(--ix-gr)); border-radius: 2px; overflow: hidden; background: rgba(10, 12, 32, .6); }
.ix-gr-inv-barra > i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(#fff38a, #ffb800); }
/* los marcos de los compañeros (hasta 4) */
.ix-gr-marcos { position: relative; display: none; flex-direction: column; gap: calc(4 * var(--ix-gr)); }
.ix-gr-marcos.ix-on { display: flex; }
/* (móvil) con 3 o 4 compañeros, en dos columnas: en una sola, el tercero y el cuarto caían dentro de la zona donde nace el
   joystick (el 34 % izquierdo, por debajo del 42 % del alto) y el pulgar que aterrizaba ahí elegía a un compañero en vez de andar */
.ix-movil .ix-gr-marcos.ix-on:has(> .ix-gr-marco:nth-of-type(3)) { display: grid; grid-template-columns: repeat(2, max-content); }
.ix .ix-gr-marco { position: relative; display: flex; align-items: center; gap: calc(6 * var(--ix-gr)); width: calc(136 * var(--ix-gr)); height: calc(28 * var(--ix-gr)); padding: 0 calc(8 * var(--ix-gr)) 0 calc(2 * var(--ix-gr)); text-align: left;
  border: 2px solid var(--ix-tinta); border-radius: calc(14 * var(--ix-gr)); background: linear-gradient(180deg, rgba(44, 53, 104, .92), rgba(22, 27, 62, .92)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 2px 0 rgba(10, 10, 28, .9);
  pointer-events: auto; touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
/* (la diana del dedo: el marco y la mitad del hueco con sus vecinos) */
.ix-gr-marco::before { content: ''; position: absolute; inset: calc(-3 * var(--ix-gr)) calc(-4 * var(--ix-gr)); }
.ix-gr-marco.pulsado { filter: brightness(1.25); }
.ix-gr-marco.ix-gr-elegido { border-color: var(--ix-amarillo); }
.ix-gr-marco > .ix-soc-retrato { width: calc(22 * var(--ix-gr)); height: calc(22 * var(--ix-gr)); border-width: 1.8px; font-size: calc(11 * var(--ix-gr)); }
.ix-gr-nv { position: absolute; left: calc(14 * var(--ix-gr)); bottom: calc(-2 * var(--ix-gr)); width: calc(12.5 * var(--ix-gr)); height: calc(12.5 * var(--ix-gr)); font-size: calc(7.5 * var(--ix-gr)); border-width: 1.5px; pointer-events: none; }
.ix-gr-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--ix-gr)); }
.ix-gr-cab { display: flex; align-items: center; gap: calc(3 * var(--ix-gr)); min-width: 0; height: calc(11 * var(--ix-gr)); }
.ix-gr-nombre { font-size: calc(10 * var(--ix-gr)); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding: 0 2px; margin: 0 -2px; }
.ix-gr-corona { flex: none; display: none; width: calc(11 * var(--ix-gr)); height: calc(11 * var(--ix-gr)); }
.ix-gr-marco.ix-gr-lider .ix-gr-corona { display: block; }
.ix-gr-estado { flex: none; margin-left: auto; font-size: calc(7.5 * var(--ix-gr)); color: var(--ix-gris); white-space: nowrap; }
.ix-gr-estado:empty { display: none; }
.ix-gr-vida { width: 100%; height: calc(7 * var(--ix-gr)); border-width: 1.5px; border-radius: calc(4 * var(--ix-gr)); box-shadow: none; }
.ix-gr-vida.ix-gr-baja { --f1: #ffe98a; --f2: #ffc21a; --f3: #e08a00; }
.ix-gr-vida.ix-gr-critica { --f1: #ff9a8a; --f2: #ec3326; --f3: #a8161c; }
.ix-gr-marco.ix-gr-muerto .ix-gr-nombre { color: var(--ix-gris); }
.ix-gr-marco.ix-gr-muerto .ix-gr-estado { color: var(--ix-rojo); }
.ix-gr-marco.ix-gr-desconectado { filter: grayscale(1); opacity: .62; }
.ix-gr-marco.ix-gr-lejos { opacity: .78; }
.ix-gr-marco.ix-gr-con-menu { border-color: var(--ix-amarillo); }
/* el menú de un marco: a su derecha, encima de todo, sin empujar la columna */
.ix-gr-marcos > .ix-gr-menu { left: calc(100% + 8 * var(--ix-gr)); }
/* con otro jugador elegido: «Invitar a X» · «Hacer líder» · «Echar a X» */
.ix-gr-accion { display: none; align-items: center; gap: 6px; pointer-events: auto; }
.ix-gr-accion.ix-on { display: flex; }
.ix-gr-accion > .ix-bo { position: relative; max-width: calc(190 * var(--ix-gr)); }
.ix-gr-accion > .ix-bo::before { content: ''; position: absolute; inset: -8px -3px; }
.ix-gr-accion-txt { overflow: hidden; text-overflow: ellipsis; min-width: 0; padding: 0 2px; margin: 0 -2px; }
@media (prefers-reduced-motion: reduce) { .ix-gr-menu, .ix-gr-inv, .ix-map-lugar.ix-map-destello, .ix-soc-jugador > .ix-bo.ix-soc-espera, .ix-soc-lista.ix-soc-mira > .ix-soc-jugador { animation: none; } }