/* INTERFAZ NUEVA de la demo (diseno/demo/INTERFAZ-NUEVA.md). Es el KIT del lienzo «Reyerta: interfaces PC y móvil»
   (diseno/demo/interfaz-lienzo/, el bloque de estilos que traen las 21 pantallas) con todas las clases con prefijo ix-,
   más la raíz, las capas y el marco de los menús. Solo actúa dentro de la partida: fuera de ella (título, crear
   personaje, carga) no hay ningún elemento .ix en la página.
   MEDIDAS: píxeles del lienzo (844 × 390 en móvil, 1440 × 810 en PC). Las capas «lienzo» se escalan enteras (--ix-k);
   dentro de ellas se escribe en px, igual que en el lienzo. En las capas «reales» (el mundo, el joystick) 1 px es 1 px
   de pantalla y lo que haga falta se multiplica por var(--ix-k).
   Este fichero es de BASE. Cada constructor escribe en el suyo (interfaz-movil.css, interfaz-pc.css, interfaz-mundo.css,
   interfaz-personaje.css, interfaz-habilidades.css, interfaz-mapa-social.css, interfaz-ajustes.css). */

/* ---------------------------------------------------------------- raíz y capas */
#ui > .ix { pointer-events: none; }
.ix { position: absolute; inset: 0; overflow: hidden; pointer-events: none; font-family: 'Lilita One', 'Nunito', system-ui, sans-serif; color: #fff; letter-spacing: .01em;
  --ix-tinta: #0a0a1c; --ix-oro: #ffd21f; --ix-amarillo: #ffe14a; --ix-claro: #cfd5e6; --ix-gris: #b9c0d8; --ix-apagado: #7f88ad; --ix-rosa: #ffd8c8;
  --ix-verde: #7dff5a; --ix-naranja: #ffab3d; --ix-azul: #7cc6ff; --ix-rojo: #ff9a84; --ix-blanco: #f0f3ff;
  --ix-k: 1; --ix-tam: 1;
  /* zonas seguras (muesca, indicador) y hueco de la píldora EN VIVO, en px del lienzo */
  --ix-sl: calc(var(--sa-l, 0px) / var(--ix-k)); --ix-sr: calc(var(--sa-r, 0px) / var(--ix-k));
  --ix-st: calc(var(--sa-t, 0px) / var(--ix-k)); --ix-sb: calc(var(--sa-b, 0px) / var(--ix-k));
  --ix-vivo: calc(var(--vivo-alto, 0px) / var(--ix-k)); }
.ix *, .ix *::before, .ix *::after { box-sizing: border-box; }
.ix button { font: inherit; color: inherit; margin: 0; padding: 0; cursor: pointer; }
/* capas (de abajo arriba): toques · mundo · hud · real · avisos · diálogo · menús · encima. Nada recibe toques salvo lo
   que lo pide (los componentes del kit que se pulsan y lo que lleve .ix-toca) */
.ix-capa { position: absolute; inset: 0; pointer-events: none; }
.ix-lienzo { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.ix-toques { pointer-events: auto; touch-action: none; }
.ix-toca { pointer-events: auto; }
.ix-oculto { display: none !important; }
.ix-a { position: absolute; }
/* con un menú abierto no se ve (ni trabaja) lo de debajo: en el lienzo de PC, tras el velo solo queda el juego */
.ix.ix-con-menu > .ix-capa-hud, .ix.ix-con-menu > .ix-capa-mundo, .ix.ix-con-menu > .ix-capa-real, .ix.ix-con-menu > .ix-capa-avisos, .ix.ix-con-menu > .ix-toques { visibility: hidden; pointer-events: none; }
.ix.ix-con-menu > .ix-capa-hud *, .ix.ix-con-menu > .ix-capa-real * { pointer-events: none !important; }
/* con un diálogo abierto, igual: en el lienzo, sobre el juego solo queda el diálogo */
.ix.ix-con-dialogo > .ix-capa-hud, .ix.ix-con-dialogo > .ix-capa-mundo, .ix.ix-con-dialogo > .ix-capa-real, .ix.ix-con-dialogo > .ix-capa-avisos, .ix.ix-con-dialogo > .ix-toques { visibility: hidden; pointer-events: none; }

/* ---------------------------------------------------------------- el kit del lienzo */
.ix-t { -webkit-text-stroke: .19em var(--ix-tinta); paint-order: stroke fill; text-shadow: 0 .1em 0 var(--ix-tinta); white-space: nowrap; }
.ix-n { font-family: 'Nunito', sans-serif; font-weight: 800; }
.ix-gi { display: block; flex: none; }
.ix-gi svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ix-ar { overflow: hidden; border: 1.5px solid var(--ix-tinta); }
/* icono pintado, a sangre: llena a su padre (un botón redondo, una ranura); .ix-cuadro = suelto, con su borde (listas) */
.ix-af { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: center / cover no-repeat; }
.ix-af.ix-cuadro { position: relative; inset: auto; display: block; flex: none; border: 2.5px solid var(--ix-tinta); border-radius: 9px; box-shadow: 0 2px 0 var(--ix-tinta); }
.ix-bisel { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .32), inset 0 -4px 0 rgba(0, 0, 0, .38); pointer-events: none; }
.ix-apagado > .ix-af, .ix-af.ix-apagado { filter: grayscale(.9) brightness(.6); }
.ix-bloqueado > .ix-af, .ix-af.ix-bloqueado { filter: grayscale(1) brightness(.45); }
/* barras: el relleno va con scaleX (ponBarra): no se maqueta nada al moverlas */
.ix-bar { position: relative; flex: none; height: 14px; border: 2px solid var(--ix-tinta); border-radius: 7px; overflow: hidden; background: linear-gradient(#1a1430, #2c2344); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .55); }
.ix-bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; background: linear-gradient(var(--f1), var(--f2) 45%, var(--f3)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .35); }
.ix-bar > b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 11px; padding-bottom: 1px; -webkit-text-stroke: .2em var(--ix-tinta); paint-order: stroke fill; white-space: nowrap; }
.ix-vida { --f1: #b8ff7a; --f2: #5ee02c; --f3: #2fb418; } .ix-ira { --f1: #ff9a8a; --f2: #ec3326; --f3: #a8161c; } .ix-ene { --f1: #ffa98f; --f2: #ff4f38; --f3: #d0231a; }
.ix-pxb { --f1: #ecc8ff; --f2: #b870ff; --f3: #7a2fe0; } .ix-oro { --f1: #fff4a0; --f2: #ffd21f; --f3: #e89a00; }
.ix-mana { --f1: #9ee6ff; --f2: #39b8ff; --f3: #1b74e0; } .ix-energia { --f1: #fffab0; --f2: #ffe14a; --f3: #f0b000; }
.ix-cap { border: 2.5px solid var(--ix-tinta); border-radius: 999px; 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 3px 0 rgba(10, 10, 28, .9); }
.ix-card { border: 2.5px solid var(--ix-tinta); border-radius: 16px; 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); }
.ix-hueco { border: 2px solid var(--ix-tinta); border-radius: 12px; background: linear-gradient(180deg, #141833, #1c2146); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5); }
.ix-slot { position: relative; display: grid; place-items: center; flex: none; border: 2px solid var(--ix-tinta); border-radius: 11px; background: linear-gradient(180deg, #141833, #1f2550); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5); pointer-events: auto; }
.ix-slot > .ix-af { border-radius: 8px; }
.ix-slot.ix-llena { box-shadow: 0 0 0 1.5px var(--ix-tinta); }
.ix-slot.ix-on { outline: 2.5px solid var(--ix-amarillo); outline-offset: 2.5px; }
.ix-slot.ix-apagada { opacity: .6; }
.ix-slot-rotulo { font-size: 7.5px; line-height: 1.25; color: var(--ix-apagado); text-align: center; }
.ix-slot > .ix-cnt { right: -4px; bottom: -4px; min-width: 17px; height: 17px; font-size: 10.5px; line-height: 13px; }
/* botón redondo de habilidad */
.ix-hb { position: relative; display: grid; place-items: center; flex: none; border: 3px solid var(--ix-tinta); border-radius: 50%; pointer-events: auto; touch-action: none;
  background: radial-gradient(circle at 50% 30%, var(--h1), var(--h2) 45%, var(--h3) 85%); box-shadow: inset 0 -4px 0 var(--h4), inset 0 3px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--ix-tinta), 0 5px 8px rgba(0, 0, 0, .3); }
.ix-azul { --h1: #8fcaff; --h2: #3d8bff; --h3: #1f58c8; --h4: #123a8e; }
.ix-rojo { --h1: #ff9c86; --h2: #ff4d3a; --h3: #d8231a; --h4: #8e0f0a; }
.ix-verde { --h1: #b6ff8a; --h2: #4fd04a; --h3: #2a9a24; --h4: #16651a; }
.ix-gris { --h1: #7d8ab8; --h2: #454f7e; --h3: #2c3358; --h4: #1a1f3c; }
.ix-hb-candado { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ix-hb.pulsado { transform: scale(.93); }
.ix-hb.apuntando { 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 5px rgba(255, 255, 255, .5); }
.ix-hb.cancelar { 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 5px rgba(255, 60, 40, .75); }
.ix-no { animation: ix-no .3s; }
@keyframes ix-no { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
.ix-key { position: absolute; top: -6px; left: -6px; min-width: 19px; height: 19px; padding: 0 4px; 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; pointer-events: none; }
/* recarga: --ix-ef = fracción que falta (0..1); el número va dentro */
.ix-cd { position: absolute; inset: 0; border-radius: inherit; display: grid; place-items: center; pointer-events: none; background: conic-gradient(rgba(8, 10, 28, .74) calc(var(--ix-ef, 0) * 1turn), rgba(8, 10, 28, 0) 0); }
.ix-et { position: absolute; left: 50%; transform: translateX(-50%); top: -10px; font-size: 10px; line-height: 1; padding: 2px 5px 3px; border-radius: 6px; white-space: nowrap; background: linear-gradient(#fff38a, #ffb800); border: 1.5px solid var(--ix-tinta); -webkit-text-stroke: .2em var(--ix-tinta); paint-order: stroke fill; pointer-events: none; }
.ix-et.ix-rj { background: linear-gradient(#ff7a5c, #e3281c); }
.ix-etb { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); font-size: 10px; line-height: 1; padding: 2px 5px 3px; border-radius: 6px; background: var(--ix-tinta); white-space: nowrap; pointer-events: none; }
.ix-cnt { position: absolute; right: -6px; bottom: -5px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; border: 2px solid var(--ix-tinta); background: linear-gradient(#5a6390, #262d52); font-size: 12px; line-height: 16px; text-align: center; pointer-events: none; }
.ix-nv { display: grid; place-items: center; flex: none; border-radius: 50%; border: 2px solid var(--ix-tinta); background: linear-gradient(#ff9a7a, #e8322a 50%, #9a1418); padding-bottom: 1px; }
.ix-aviso { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; border: 2px solid var(--ix-tinta); background: linear-gradient(#ff7a5c, #e8261c); font-size: 11px; line-height: 14px; text-align: center; pointer-events: none; }
/* munición del ataque: .ix-vacia = sin carga; --ix-p = lo que lleva cargado la siguiente */
.ix-pips { display: flex; gap: 3px; pointer-events: none; }
.ix-pip { position: relative; display: block; width: 20px; height: 9px; border-radius: 4px; border: 1.8px solid var(--ix-tinta); background: linear-gradient(#ffe39a, #ffa21a 55%, #ff7a00); overflow: hidden; }
.ix-pip.ix-vacia { background: rgba(20, 16, 40, .85); }
.ix-pip.ix-vacia::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--ix-p, 0)); background: linear-gradient(#ffe39a, #ffa21a 55%, #ff7a00); opacity: .5; }
/* botones */
.ix-bo { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; height: 34px; padding: 0 16px 3px; border: 2.5px solid var(--ix-tinta); border-radius: 11px; font-size: 15px; white-space: nowrap; pointer-events: auto;
  background: linear-gradient(180deg, var(--b1), var(--b2) 42%, var(--b3)); box-shadow: inset 0 -4px 0 var(--b4), inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 0 var(--ix-tinta);
  -webkit-text-stroke: .19em var(--ix-tinta); paint-order: stroke fill; text-shadow: 0 .1em 0 var(--ix-tinta); }
.ix-bo.ix-am { --b1: #fff38a; --b2: #ffd81f; --b3: #ffb800; --b4: #d98200; }
.ix-bo.ix-az { --b1: #9ed3ff; --b2: #3f9dff; --b3: #1f78f0; --b4: #0f4bb8; }
.ix-bo.ix-os { --b1: #6a7398; --b2: #434b72; --b3: #343b5e; --b4: #1d2240; }
.ix-bo.ix-rj { --b1: #ffb09a; --b2: #ff5a45; --b3: #e3281c; --b4: #92110b; }
.ix-bo.ix-vd { --b1: #c6ff8a; --b2: #6fe03a; --b3: #3bb81c; --b4: #1f7d12; }
.ix-bo.ix-s { height: 28px; font-size: 12px; padding: 0 10px 3px; border-radius: 9px; box-shadow: inset 0 -3px 0 var(--b4), inset 0 2px 0 rgba(255, 255, 255, .6), 0 2.5px 0 var(--ix-tinta); }
.ix-bo.pulsado, .ix-bo:active { translate: 0 2px; box-shadow: inset 0 -2px 0 var(--b4), inset 0 2px 0 rgba(255, 255, 255, .5), 0 1px 0 var(--ix-tinta); }
.ix-bo:disabled, .ix-bo[aria-disabled="true"] { filter: grayscale(.85) brightness(.8); cursor: default; }
/* selector de opciones, interruptor, deslizador y etiqueta */
.ix-sg { display: flex; flex: none; border: 2px solid var(--ix-tinta); border-radius: 10px; background: #141833; pointer-events: auto; }
.ix-sg button { position: relative; border: 0; background: none; padding: 4px 9px 5px; font-size: 11px; color: var(--ix-gris); white-space: nowrap; }
/* (sin overflow: hidden, para que la diana del dedo de cada opción pueda salirse por arriba y por abajo: 8 px más a cada lado) */
.ix-sg button:first-child { border-radius: 8px 0 0 8px; }
.ix-sg button:last-child { border-radius: 0 8px 8px 0; }
.ix-sg button:only-child { border-radius: 8px; }
.ix-sg button::before { content: ''; position: absolute; inset: -8px 0; }
.ix-sg button.ix-on { background: linear-gradient(#fff38a, #ffc21a); color: #3a1c00; }
.ix-sw { position: relative; flex: none; width: 44px; height: 24px; border-radius: 12px; border: 2px solid var(--ix-tinta); background: #141833; pointer-events: auto; }
.ix-sw::after { content: ''; position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--ix-gris); border: 2px solid var(--ix-tinta); }
.ix-sw.ix-on { background: linear-gradient(#9dff6a, #3bb81c); }
.ix-sw.ix-on::after { left: 21px; background: #fff; }
.ix-des { display: flex; align-items: center; gap: 9px; flex: none; }
.ix-des-riel { position: relative; display: block; height: 10px; border-radius: 5px; border: 2px solid var(--ix-tinta); background: #141833; pointer-events: auto; touch-action: none; cursor: pointer; }
.ix-des-riel::before { content: ''; position: absolute; inset: -17px -10px; }   /* la diana del dedo */
.ix-des-relleno { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(#fff38a, #ffb800); }
.ix-des-pomo { position: absolute; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--ix-tinta); }
.ix-des-num { font-size: 12px; width: 38px; text-align: right; white-space: nowrap; }
.ix-tag { flex: none; font-size: 10px; line-height: 1; padding: 3px 7px 4px; border-radius: 8px; border: 1.5px solid var(--ix-tinta); background: #141833; white-space: nowrap; }
.ix-tag.ix-am { background: linear-gradient(#fff38a, #ffc21a); color: #3a1c00; }
.ix-tag.ix-vd { background: linear-gradient(#9dff6a, #3bb81c); color: #0f3a08; }
.ix-tag.ix-rj { background: linear-gradient(#ff7a5c, #e3281c); }
.ix-tag.ix-az { background: linear-gradient(#6fc3ff, #1f6fe0); }
.ix-tag.ix-hd { background: linear-gradient(#ff7a5c, #b8201a); }
/* lo que el lienzo repite escrito a mano en sus menús: fila de lista (.ix-on = la elegida), hueco libre punteado,
   línea de dato, rótulo de sección y nota */
.ix-fila { display: flex; align-items: center; gap: 8px; flex: none; border-radius: 13px; border: 2.5px solid var(--ix-tinta); background: linear-gradient(180deg, #2c3566, #222a54); text-align: left; }
button.ix-fila { pointer-events: auto; }
.ix-fila.ix-on { border-color: var(--ix-amarillo); background: linear-gradient(180deg, #44529a, #2f3a74); }
.ix-libre { display: flex; align-items: center; justify-content: center; gap: 5px; flex: none; border-radius: 11px; border: 2px dashed #5d6796; background: rgba(10, 12, 32, .3); font-size: 11px; color: var(--ix-claro); pointer-events: auto; }
.ix-linea { display: flex; align-items: center; gap: 6px; flex: none; border-radius: 8px; background: rgba(10, 12, 32, .34); }
.ix-seccion { font-size: 9.5px; color: var(--ix-rosa); letter-spacing: .06em; text-transform: uppercase; }
.ix-nota { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 9.5px; line-height: 1.3; color: var(--ix-gris); }
.ix-desliza { overflow: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; pointer-events: auto; scrollbar-width: thin; scrollbar-color: #5d6796 transparent; }
/* joystick del lienzo (va en la capa real: sus medidas se multiplican por --ix-k) */
.ix-joy { position: absolute; left: calc(48px * var(--ix-k) + var(--sa-l, 0px)); bottom: calc(34px * var(--ix-k) + var(--sa-b, 0px)); width: calc(116px * var(--ix-k)); height: calc(116px * var(--ix-k)); border-radius: 50%; opacity: .38; transition: opacity .15s; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .06), rgba(255, 255, 255, .14) 62%, rgba(255, 255, 255, .22)); border: calc(3px * var(--ix-k)) solid rgba(255, 255, 255, .45); box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); }
.ix-joy.activo { opacity: 1; transition: none; }
.ix-joy-pomo { position: absolute; left: 50%; top: 50%; width: calc(52px * var(--ix-k)); height: calc(52px * var(--ix-k)); margin: calc(-26px * var(--ix-k)) 0 0 calc(-26px * var(--ix-k)); border-radius: 50%; border: calc(2.5px * var(--ix-k)) solid var(--ix-tinta);
  background: radial-gradient(circle at 50% 35%, #7cc6ff, #3a92ff 45%, #1d5fd6); box-shadow: inset 0 calc(-5px * var(--ix-k)) 0 #123f9c, inset 0 calc(3px * var(--ix-k)) 0 rgba(255, 255, 255, .5), 0 calc(3px * var(--ix-k)) 0 rgba(0, 0, 0, .55); }

/* ---------------------------------------------------------------- zonas con nombre del HUD (donde otros cuelgan piezas)
   Cada HUD las recoloca en su css si le hace falta; lo que cae en una zona se apila sin pisarse. */
.ix-zona { position: absolute; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.ix-zona:empty { display: none; }
.ix-movil .ix-zona-izquierda { left: calc(12px + var(--ix-sl)); top: calc(104px + var(--ix-st)); align-items: flex-start; }
.ix-movil .ix-zona-bajo-objetivo { left: 50%; top: calc(56px + var(--ix-st) + var(--ix-vivo)); translate: -50% 0; align-items: center; }
.ix-movil .ix-zona-bajo-minimapa { right: calc(10px + var(--ix-sr)); top: calc(126px + var(--ix-st)); align-items: flex-end; }
.ix-movil .ix-zona-sobre-botones { left: 50%; bottom: calc(12px + var(--ix-sb)); translate: -50% 0; align-items: center; flex-direction: column-reverse; }
/* (en móvil no hay zona «centro-arriba»: ahí va el marco del objetivo; lo que se cuelgue de ella cae en «bajo-objetivo») */
.ix-pc .ix-zona-izquierda { left: 20px; top: 124px; align-items: flex-start; }
.ix-pc .ix-zona-bajo-objetivo { left: 352px; top: 96px; align-items: flex-start; }
.ix-pc .ix-zona-bajo-minimapa { right: 20px; top: 450px; align-items: flex-end; }
.ix-pc .ix-zona-sobre-botones { left: 50%; bottom: 134px; translate: -50% 0; align-items: center; flex-direction: column-reverse; }
.ix-pc .ix-zona-centro-arriba { left: 50%; top: calc(14px + var(--ix-vivo)); translate: -50% 0; align-items: center; }

/* ---------------------------------------------------------------- el piloto de estado (interfaz/piloto.js): un punto verde, naranja o rojo
   (lo peor de los fotogramas, la latencia y la conexión) y, al tocarlo, su cuadro con las cifras. En móvil va arriba, a la
   izquierda del botón de chat (diana de 44 px); en PC, junto al minimapa, bajo la píldora del lugar. */
.ix-piloto-caja { width: 44px; height: 44px; z-index: 4; }
.ix-pc .ix-piloto-caja { width: 28px; height: 28px; }
.ix-piloto-caja.ix-abierto { z-index: 30; }
.ix-movil .ix-piloto-caja.ix-piloto-junto { translate: 52px 0; }      /* (sin botón de chat: junto al de menú) */
.ix .ix-piloto { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: none; pointer-events: auto; touch-action: manipulation; }
.ix-piloto-luz { display: block; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--ix-tinta); background: #7f88ad; transition: background-color .3s, transform .08s;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .28), 0 2px 0 var(--ix-tinta); }
.ix-piloto[data-tono="bien"] > .ix-piloto-luz { background: #47e05a; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .28), 0 2px 0 var(--ix-tinta), 0 0 7px 1px rgba(71, 224, 90, .7); }
.ix-piloto[data-tono="medio"] > .ix-piloto-luz { background: #ff9f1c; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .28), 0 2px 0 var(--ix-tinta), 0 0 7px 1px rgba(255, 159, 28, .75); }
.ix-piloto[data-tono="mal"] > .ix-piloto-luz { background: #ff4a36; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .28), 0 2px 0 var(--ix-tinta), 0 0 8px 2px rgba(255, 74, 54, .8); animation: ix-piloto-late .7s ease-in-out infinite alternate; }
@keyframes ix-piloto-late { to { filter: brightness(1.45); } }
.ix-piloto.pulsado > .ix-piloto-luz { transform: scale(.86); }
.ix-pc .ix-piloto:hover > .ix-piloto-luz { filter: brightness(1.2); }
.ix-piloto-cuadro { position: absolute; top: calc(100% + 3px); right: 0; min-width: 190px; padding: 8px 11px 10px; display: flex; flex-direction: column; gap: 6px; border-radius: 14px; white-space: nowrap;
  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); }
.ix-piloto-cuadro[hidden] { display: none; }
.ix-piloto-titulo { font-size: 13px; color: var(--ix-claro); padding-bottom: 1px; }
.ix-piloto-titulo[data-tono="bien"] { color: var(--ix-verde); }
.ix-piloto-titulo[data-tono="medio"] { color: var(--ix-naranja); }
.ix-piloto-titulo[data-tono="mal"] { color: var(--ix-rojo); }
.ix-piloto-fila { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.ix-piloto-r { font-size: 10.5px; color: var(--ix-gris); }
.ix-piloto-d { display: flex; align-items: center; gap: 5px; }
.ix-piloto-v { font-size: 12.5px; }
.ix-piloto-punto { display: block; flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ix-tinta); background: #7f88ad; }
[data-tono="bien"] > .ix-piloto-d > .ix-piloto-punto { background: #47e05a; }
[data-tono="medio"] > .ix-piloto-d > .ix-piloto-punto { background: #ff9f1c; }
[data-tono="mal"] > .ix-piloto-d > .ix-piloto-punto { background: #ff4a36; }
[data-tono="mal"] > .ix-piloto-d > .ix-piloto-v { color: #ffb3a8; }
@media (prefers-reduced-motion: reduce) { .ix-piloto[data-tono="mal"] > .ix-piloto-luz { animation: none; } }

/* ---------------------------------------------------------------- avisos de reserva (si la capa del mundo aún no da los suyos) */
.ix-toast { position: absolute; left: 50%; bottom: 22%; translate: -50% 0; padding: 5px 14px 6px; border-radius: 16px; background: rgba(6, 10, 30, .78); border: 2px solid rgba(0, 0, 0, .6); font-size: 15px; color: #ffb3a8; white-space: nowrap; animation: ix-toast 1.6s ease both; }
.ix-toast.ix-bueno { color: var(--ix-amarillo); }
@keyframes ix-toast { 0% { opacity: 0; scale: .6; } 8% { opacity: 1; scale: 1.08; } 14% { scale: 1; } 82% { opacity: 1; } 100% { opacity: 0; translate: -50% -10px; } }
.ix-aviso-mundo { display: flex; align-items: center; gap: 8px; padding: 5px 8px 6px 12px; font-size: 12px; pointer-events: auto; }
/* (red de seguridad de BASE: «Algo de la interfaz ha fallado · Recargar el juego»; interfaz/index.js averia) */
.ix-averia { display: flex; align-items: center; gap: 8px; padding: 4px 6px 5px 12px; font-size: 12px; white-space: nowrap; pointer-events: auto; background: linear-gradient(180deg, rgba(120, 34, 30, .96), rgba(70, 18, 22, .96)); }

/* ---------------------------------------------------------------- el marco de los menús (móvil: a toda pantalla; PC: ventana a 1,4× sobre el juego) */
.ix-menus { display: none; pointer-events: auto; }
.ix-menus.ix-abierto { display: block; }
.ix-marco-velo { position: absolute; inset: 0; background: rgba(6, 8, 24, .66); }
.ix-movil .ix-marco-velo, .ix-movil .ix-marco-teclas { display: none; }
.ix-marco-ventana { position: absolute; left: 0; top: 0; width: 844px; height: 390px; transform-origin: 0 0; display: flex; overflow: hidden;
  background: radial-gradient(ellipse 80% 90% at 55% 30%, #2e3a74 0%, #1b2149 55%, #11152f 100%); }
.ix-pc .ix-marco-ventana { border-radius: 18px; border: 2.5px solid var(--ix-tinta); box-shadow: 0 4px 0 var(--ix-tinta), 0 14px 30px rgba(0, 0, 0, .55); }
.ix-marco-carril { width: calc(68px + var(--ix-sl)); flex: none; display: flex; flex-direction: column; gap: 4px; padding: calc(7px + var(--ix-st)) 6px 7px calc(6px + var(--ix-sl)); background: rgba(8, 10, 28, .5); border-right: 2.5px solid var(--ix-tinta); }
.ix-pc .ix-marco-carril { width: 68px; padding: 7px 6px; }
.ix-marco-boton { position: relative; height: 49px; flex: 0 1 49px; min-height: 40px; border-radius: 12px; border: 2.5px solid transparent; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: auto; }
.ix-marco-rotulo { font-size: 9px; color: var(--ix-claro); }
.ix-marco-boton.ix-on { border-color: var(--ix-tinta); background: linear-gradient(#fff38a, #ffc21a); box-shadow: inset 0 -3px 0 #d98200, 0 3px 0 var(--ix-tinta); }
.ix-marco-boton.ix-on > .ix-marco-rotulo { color: #3a1c00; }
.ix-marco-boton > .ix-aviso { top: 2px; right: 2px; }
.ix-marco-contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: calc(8px + var(--ix-st)) calc(12px + var(--ix-sr)) calc(12px + var(--ix-sb)) 12px; }
.ix-pc .ix-marco-contenido { padding: 8px 12px 12px; }
.ix-marco-cab { display: flex; align-items: center; gap: 10px; height: 30px; flex: none; }
.ix-marco-titulo { font-size: 20px; color: var(--ix-oro); }
.ix-marco-sub { font-size: 11px; color: var(--ix-claro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ix-marco-der { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.ix-marco-oro { display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px 1px 4px; }
.ix-marco-oro > .ix-t { font-size: 12px; }
.ix-marco-cerrar { position: relative; width: 30px; padding: 0 0 3px; }
/* (la diana del dedo: 44 × 44; el dibujo sigue midiendo 30 × 28, como en el lienzo. En el iPhone no hay «atrás»: esta X es lo único que cierra un menú) */
.ix-marco-cerrar::before { content: ''; position: absolute; inset: -9px -8px -7px -6px; }
/* (lo añade BASE: con un menú abierto no se ve la pelea; si te pegan, se dice aquí con tu vida) */
.ix-marco-alerta { display: none; margin-left: auto; flex: none; align-items: center; gap: 6px; height: 22px; padding: 0 9px 1px 8px; border-radius: 11px; border: 2px solid var(--ix-tinta); background: linear-gradient(#ff7a5c, #b8201a); font-size: 11px; white-space: nowrap; animation: ix-late .7s ease-in-out infinite alternate; }
.ix-marco-alerta.ix-on { display: flex; }
.ix-marco-alerta.ix-on + .ix-marco-der { margin-left: 0; }
.ix-marco-alerta .ix-bar { width: 70px; height: 10px; }
@keyframes ix-late { to { filter: brightness(1.35); } }
.ix-marco-cuerpo { flex: 1; min-height: 0; display: flex; }
.ix-panel { flex: 1; min-width: 0; min-height: 0; display: none; gap: 10px; }
.ix-panel.ix-on { display: flex; }
.ix-marco-teclas { position: absolute; left: 0; right: 0; text-align: center; font-size: 13px; color: var(--ix-claro); text-shadow: 0 1px 0 #000; white-space: nowrap; transform-origin: 50% 0; }
.ix-obra { margin: auto; display: flex; flex-direction: column; gap: 5px; padding: 16px 22px 18px; max-width: 520px; }
.ix-obra-titulo { font-size: 19px; color: var(--ix-amarillo); }
.ix-obra-sub { font-size: 11.5px; color: var(--ix-blanco); }
.ix-obra-linea { font-size: 10.5px; color: var(--ix-gris); }
.ix-obra-error { font-size: 10px; color: #ffb3a8; white-space: pre-wrap; }
/* modo maqueta: el fondo de la pantalla del lienzo bajo la interfaz (solo si el servidor de pruebas lo tiene) */
.ix-maqueta-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* ---------------------------------------------------------------- vecinos (INTERFAZ-NUEVA.md §5.8)
   Lo que otro equipo cuelga de #ui por su cuenta, fuera de .ix. De la cámara (control/camara-piezas.js) queda su aviso
   («Vista 3D») y su cuadro (el botón lo esconde css/demo.css: Iván lo quitó del HUD): con un menú o un diálogo de la
   interfaz nueva abiertos no se ven, y en las maquetas tampoco. */
#ui:has(> .ix.ix-con-menu) > .cam-cuadro, #ui:has(> .ix.ix-con-dialogo) > .cam-cuadro,
#ui:has(> .ix[data-ix-maqueta]) > .cam-cuadro, #ui:has(> .ix[data-ix-maqueta]) > .cam-aviso { display: none !important; }
/* (la carrera automática: la interfaz nueva trae su propio botón —hud/movil/botonera.js— y principal.js monta
   control/sprint.js sin el suyo; por si alguien lo montara con él) */
#ui:has(> .ix) > .sprint-boton { display: none !important; }