/* CREADOR NUEVO de personajes (ui/crear-nuevo.js + interfaz/creador/*; diseno/demo/CREADOR-APARIENCIA.md §8), con la forma de
   uso del creador de WoW de ahora y de Tarisland: ELEGIR (retratos de raza por bando a los lados, sexo arriba, clases abajo,
   el personaje sobre su tierra) y PERSONALIZAR (filas «‹ lo elegido ›» que se despliegan, estilos, mandos bajo el personaje,
   nombre y terminar abajo en el centro).
   Todo con prefijo ix-cr-, sobre el kit de la interfaz nueva (css/interfaz.css: ix-bo, ix-card, ix-hueco, ix-t, ix-n, ix-tag…).
   Lo carga el propio módulo la primera vez. Los botones propios llevan «.ix-cr» delante: el kit trae «.ix button { padding: 0 }».
   MEDIDAS en píxeles del lienzo de 844 × 390 (el del móvil). El lienzo se escala entero con --ix-k:
     móvil  k = min(W / 844, H / 390)                          (lo que sobre a lo ancho o a lo alto, para el personaje)
     PC     k = min(W / 844, H / 390, 1,6)                     (los paneles no crecen más; el personaje, sí)
   y mide (W / k) × (H / k). Rejilla: [lado 244] [personaje, lo que sobra] [lado 244] × [cabecera] [medio] [pie]. */

/* (el kit trae «#ui > .ix { pointer-events: none }»: la raíz del creador sí recibe los toques) */
#ui > .ix.ix-cr, .ix.ix-cr { pointer-events: auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  background: radial-gradient(ellipse 62% 78% at 50% 44%, #7a3a36 0%, #3a2350 46%, #161b3c 78%, #0f1329 100%); animation: ix-cr-entra .25s ease-out; }
.ix.ix-cr.ix-sale { opacity: 0; transition: opacity .25s; pointer-events: none; }
@keyframes ix-cr-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes ix-cr-aparece { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
.ix-cr [hidden] { display: none !important; }
/* teclado: el foco se ve (con el ratón o el dedo, no) */
.ix-cr button:focus-visible { outline: 3px solid var(--ix-amarillo); outline-offset: 2px; }
.ix-cr button:focus:not(:focus-visible) { outline: none; }
.ix-cr button { -webkit-tap-highlight-color: transparent; }

/* el personaje en 3D y su escenario: un lienzo a toda la pantalla DETRÁS de todo (se arrastra para girarlo) */
.ix-cr-fondo3d { position: absolute; inset: 0; z-index: 0; touch-action: none; pointer-events: auto; cursor: grab; }
.ix-cr-fondo3d:active { cursor: grabbing; }
.ix-cr-fondo3d canvas { width: 100%; height: 100%; display: block; }
/* la viñeta: los bordes oscuros dejan al personaje en el foco y dan fondo a lo que va en las orillas */
.ix-cr-velo { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(180deg, rgba(12, 10, 30, .5) 0, rgba(12, 10, 30, 0) 18%),
  linear-gradient(0deg, rgba(12, 10, 30, .78) 0, rgba(12, 10, 30, .3) 15%, rgba(12, 10, 30, 0) 30%),
  radial-gradient(ellipse 66% 92% at 50% 44%, rgba(12, 10, 30, 0) 46%, rgba(12, 10, 30, .34) 74%, rgba(12, 10, 30, .66) 100%); }
.ix-cr-p2 > .ix-cr-velo { background:
  linear-gradient(180deg, rgba(12, 10, 30, .42) 0, rgba(12, 10, 30, 0) 16%),
  linear-gradient(0deg, rgba(12, 10, 30, .8) 0, rgba(12, 10, 30, .3) 15%, rgba(12, 10, 30, 0) 30%),
  radial-gradient(ellipse 58% 92% at 50% 44%, rgba(12, 10, 30, 0) 44%, rgba(12, 10, 30, .44) 72%, rgba(12, 10, 30, .74) 100%); }

.ix-cr-lienzo { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: grid; z-index: 2; pointer-events: none;
  grid-template-columns: 244px minmax(0, 1fr) 244px; grid-template-rows: 38px minmax(0, 1fr) 50px; gap: 6px 8px;
  padding: calc(8px + var(--ix-st, 0px)) calc(12px + var(--ix-sr, 0px)) calc(8px + var(--ix-sb, 0px)) calc(12px + var(--ix-sl, 0px)); }
.ix-pc .ix-cr-lienzo { grid-template-rows: 42px minmax(0, 1fr) 54px; gap: 8px 10px; padding: 12px 18px 12px; }
/* la zona del personaje: el centro, sin la barra de mandos de debajo (el escaparate lo centra y lo ajusta a este hueco) */
.ix-cr-escena { grid-column: 2; grid-row: 2; margin-bottom: 42px; min-width: 0; min-height: 0; pointer-events: none; }
.ix-pc .ix-cr-escena { margin-bottom: 62px; }

/* ================================================================ ELEGIR */
/* ---- los dos bandos: su emblema y su nombre en las esquinas de arriba */
.ix-cr-bando { grid-row: 1; align-self: center; display: flex; align-items: center; gap: 6px; min-width: 0; animation: ix-cr-aparece .22s ease-out; }
.ix-cr-bando.ix-alianza { grid-column: 1; justify-self: start; }
.ix-cr-bando.ix-horda { grid-column: 3; justify-self: end; flex-direction: row-reverse; }
.ix-cr-bando > .ix-t { font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
.ix-cr-bando.ix-alianza > .ix-t { color: #cfe0ff; }
.ix-cr-bando.ix-horda > .ix-t { color: #ffd0c4; }
.ix-cr-bando > .ix-tag { font-size: 8.5px; color: var(--ix-claro); padding: 2px 6px 3px; }
.ix-cr-escudo { display: block; flex: none; filter: drop-shadow(0 2px 0 rgba(10, 10, 28, .8)); }
/* ---- sexo: dos botones redondos de icono, arriba en el centro */
.ix-cr-sexo { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; display: flex; gap: 10px; pointer-events: auto; animation: ix-cr-aparece .22s ease-out; }
.ix-cr .ix-cr-sexo-b { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--ix-tinta); display: grid; place-items: center; pointer-events: auto;
  background: radial-gradient(circle at 50% 30%, #7d8ab8, #454f7e 50%, #2c3358 88%); box-shadow: inset 0 -3px 0 #1a1f3c, inset 0 2px 0 rgba(255, 255, 255, .35), 0 3px 0 var(--ix-tinta); }
.ix-cr-sexo-b.ix-on { border-color: var(--ix-amarillo); background: radial-gradient(circle at 50% 30%, #fff38a, #ffc21a 55%, #e89a00 90%); box-shadow: inset 0 -3px 0 #c97a00, inset 0 2px 0 rgba(255, 255, 255, .6), 0 0 0 2px var(--ix-tinta), 0 0 12px 2px rgba(255, 225, 74, .5); }
.ix-cr-sexo-b.pulsado { transform: scale(.93); }
/* ---- los lados: [razas de la Alianza · ficha de la clase] · personaje · [ficha de la raza · razas de la Horda] */
.ix-cr-lado { grid-row: 2; display: flex; gap: 8px; min-width: 0; min-height: 0; pointer-events: none; animation: ix-cr-aparece .22s ease-out; }
.ix-cr-lado.ix-izq { grid-column: 1; }
.ix-cr-lado.ix-der { grid-column: 3; justify-content: flex-end; }
.ix-cr-razas { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 3px; align-self: flex-start; pointer-events: none; }
.ix-cr .ix-cr-retrato { position: relative; width: 62px; margin: 0 -2px; padding: 0 0 1px; display: flex; flex-direction: column; align-items: center; gap: 0; border: 0; background: none; pointer-events: auto; }
.ix-cr-foto { position: relative; display: block; width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid var(--ix-tinta); overflow: hidden; box-shadow: 0 3px 0 var(--ix-tinta), 0 5px 8px rgba(0, 0, 0, .3); transition: transform .12s; }
.ix-horda .ix-cr-foto { background: radial-gradient(circle at 50% 30%, #c8553f, #7a2222 60%, #3a1020); }
.ix-alianza .ix-cr-foto { background: radial-gradient(circle at 50% 30%, #5a86d8, #27418e 60%, #141d4a); }
.ix-cr-foto > img { position: absolute; left: -7%; top: -4%; width: 114%; height: 114%; object-fit: cover; pointer-events: none; }
.ix-cr-foto-bola { position: absolute; inset: 22%; border-radius: 50%; opacity: .7; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), inset 0 3px 0 rgba(255, 255, 255, .3); }
.ix-cr-foto > img:not([hidden]) ~ .ix-bisel { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .22), inset 0 -4px 0 rgba(0, 0, 0, .3); }
.ix-cr-foto.ix-pintado > .ix-cr-foto-bola { display: none; }       /* (ya tiene su retrato) */
/* (lo que aún no se juega enseña el escudo de su bando mientras no tenga retrato: en calidad baja no se le pinta) */
.ix-cr-foto > .ix-cr-escudo { position: absolute; inset: 0; margin: auto; }
.ix-cr-foto.ix-pintado > .ix-cr-escudo { display: none; }
.ix-cr-retrato-nombre { font-size: 10.5px; line-height: 13px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
.ix-cr-retrato.ix-on .ix-cr-foto { border-color: var(--ix-amarillo); box-shadow: 0 0 0 2px var(--ix-tinta), 0 0 12px 3px rgba(255, 225, 74, .6); transform: scale(1.06); }
.ix-cr-retrato.ix-on .ix-cr-retrato-nombre { color: var(--ix-amarillo); }
.ix-cr-retrato.pulsado .ix-cr-foto { transform: scale(.94); }
/* lo que aún no se juega (la Alianza; Paladín y Sacerdote): apagado y con su candado */
.ix-cr-retrato.ix-pronto, .ix-cr-clase.ix-pronto { cursor: default; }
.ix-cr-retrato.ix-pronto .ix-cr-foto, .ix-cr-clase.ix-pronto .ix-cr-clase-ico { filter: grayscale(.8) brightness(.6); }
.ix-cr-retrato.ix-pronto .ix-cr-retrato-nombre, .ix-cr-clase.ix-pronto > .ix-t { color: var(--ix-apagado); }
.ix-cr-candado { position: absolute; right: 6px; top: 30px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: #141833; border: 1.5px solid var(--ix-tinta); pointer-events: none; }
/* ---- fichas (raza y clase): paneles limpios, con aire */
.ix-cr-tarjeta { flex: none; width: 178px; align-self: flex-end; max-height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 9px 10px 10px; overflow: hidden; pointer-events: auto;
  background: linear-gradient(180deg, rgba(51, 61, 116, .94), rgba(38, 46, 92, .94) 55%, rgba(31, 38, 80, .94)); }
.ix-cr-tj-cab { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; }
.ix-cr-tj-cab > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ix-cr-tj-ico { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--ix-tinta); overflow: hidden; box-shadow: 0 2px 0 var(--ix-tinta); }
.ix-cr-emb { position: absolute; inset: 0; background: center / cover no-repeat; }
.ix-cr-tj-nombre { font-size: 17px; line-height: 1.05; }
.ix-cr-tj-sub { font-size: 9.5px; color: var(--ix-claro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-cr-tarjeta.ix-de-raza .ix-cr-tj-nombre { font-size: 19px; }
.ix-cr-dato { display: flex; align-items: center; gap: 4px; flex: none; font-size: 9.5px; }
.ix-cr-dato > .ix-n:first-child { width: 52px; flex: none; color: var(--ix-gris); }
.ix-cr-papel { pointer-events: auto; display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 4px; border-radius: 9px; border: 1.5px solid var(--ix-tinta); background: #141833; opacity: .5; }
.ix-cr-papel.ix-on { opacity: 1; background: var(--c); padding: 0 7px 1px 5px; font-size: 10.5px; -webkit-text-stroke: .19em var(--ix-tinta); paint-order: stroke fill; }
.ix-cr-dif, .ix-cr-recurso { display: inline-flex; align-items: center; gap: 3px; font-family: 'Nunito', sans-serif; font-weight: 800; color: var(--ix-blanco); }
.ix-cr-dif > i, .ix-cr-recurso > i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ix-tinta); background: #141833; flex: none; }
.ix-cr-dif > i.ix-on { background: linear-gradient(#fff38a, #ffb800); }
.ix-cr-al-final { margin-left: auto; }
.ix-cr-frase { margin: 0; font-size: 10px; line-height: 1.3; color: var(--ix-blanco); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; flex: none; }
.ix-cr-habs { display: flex; justify-content: space-between; flex: none; }
.ix-cr .ix-cr-hab { position: relative; width: 29px; height: 29px; border: 0; background: none; border-radius: 9px; pointer-events: auto; }
.ix-cr .ix-cr-hab::after { content: ''; position: absolute; inset: -4px -1.5px; }       /* (la diana del dedo) */
.ix-cr-hab > .ix-af.ix-cuadro { width: 100%; height: 100%; border-radius: 9px; }
.ix-cr-hab.ix-on > .ix-af.ix-cuadro { border-color: var(--ix-amarillo); box-shadow: 0 0 0 1.5px var(--ix-tinta); }
.ix-cr-hab-cab { display: flex; align-items: center; gap: 5px; flex: none; min-width: 0; }
.ix-cr-hab-cab > .ix-t { font-size: 11.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ix-cr-hab-cab > .ix-tag, .ix-cr-rasgo .ix-tag { font-size: 8px; padding: 2px 5px 3px; color: var(--ix-claro); }
.ix-cr-hab-txt { margin: -2px 0 0; font-size: 9.5px; line-height: 1.28; color: var(--ix-claro); height: 5.12em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; flex: none; }
.ix-cr-rasgo { display: flex; align-items: flex-start; gap: 7px; flex: none; }
.ix-cr-rasgo > .ix-af.ix-cuadro { width: 32px; height: 32px; }
.ix-cr-rasgo > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; }
.ix-cr-rasgo .ix-t { font-size: 11.5px; }
.ix-cr-rasgo p { margin: 0; flex-basis: 100%; font-size: 9.5px; line-height: 1.28; color: var(--ix-claro); }
/* (poco alto —la zona segura de abajo de un iPhone, un portátil bajo—: la pantalla pone .ix-cr-corto y, si aún no caben,
   .ix-cr-muy-corto; las fichas se aprietan y luego dejan la fila «Alcance», sin cortar nunca una línea de texto) */
.ix-cr-corto .ix-cr-tarjeta { gap: 4px; padding: 6px 10px 7px; }
.ix-cr-corto .ix-cr-tj-ico { width: 30px; height: 30px; }
.ix-cr-corto .ix-cr-papel { height: 17px; }
.ix-cr-muy-corto .ix-cr-de-alcance { display: none; }
/* ---- rótulos breves (lo que en PC dice un «title»): «Próximamente» sobre lo apagado al tocarlo, el nivel de un papel y,
   sobre la barra de mandos, lo que acaba de hacer un botón de icono */
.ix-cr .ix-cr-globo, .ix-cr .ix-cr-rotulo { pointer-events: none; opacity: 0; white-space: nowrap; font-size: 9px; line-height: 1.2; padding: 3px 7px 4px; color: #fff; background: #141833;
  border: 1.5px solid var(--ix-tinta); box-shadow: 0 2px 0 var(--ix-tinta); z-index: 6; }
.ix-cr .ix-cr-globo { position: absolute; left: 50%; bottom: 100%; translate: -50% 0; margin-bottom: -7px; }
.ix-cr-globo.ix-ver, .ix-cr-rotulo.ix-ver { animation: ix-cr-rotulo 1.7s ease-out both; }
@keyframes ix-cr-rotulo { 0% { opacity: 0; transform: translateY(4px); } 12% { opacity: 1; transform: none; } 78% { opacity: 1; } 100% { opacity: 0; } }
.ix-cr-dato { position: relative; }
.ix-cr .ix-cr-dato > .ix-cr-globo { left: auto; right: -2px; translate: none; margin-bottom: 1px; }
.ix-cr .ix-cr-retrato > .ix-cr-globo { bottom: auto; top: 15px; margin: 0; }       /* (sobre la foto: encima va la cabecera del bando) */
.ix-cr .ix-cr-rotulo { grid-column: 2; grid-row: 2; align-self: end; justify-self: center; margin-bottom: 47px; font-size: 10px; }
.ix-cr.ix-pc .ix-cr-rotulo { margin-bottom: 68px; }
/* ---- las clases: una fila de emblemas redondos, abajo en el centro */
.ix-cr-clases { display: flex; gap: 4px; pointer-events: auto; animation: ix-cr-aparece .22s ease-out; }
.ix-cr .ix-cr-clase { position: relative; width: 50px; display: flex; flex-direction: column; align-items: center; gap: 1px; border: 0; background: none; pointer-events: auto; }
.ix-cr-clase-ico { position: relative; display: block; width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--ix-tinta); overflow: hidden; box-shadow: 0 3px 0 var(--ix-tinta), 0 5px 8px rgba(0, 0, 0, .3); transition: transform .12s; }
.ix-cr-clase > .ix-t { font-size: 9.5px; line-height: 11px; }
.ix-cr-clase.ix-on .ix-cr-clase-ico { border-color: var(--ix-amarillo); box-shadow: 0 0 0 2px var(--ix-tinta), 0 0 12px 3px rgba(255, 225, 74, .6); transform: scale(1.08); }
.ix-cr-clase.ix-on > .ix-t { color: var(--ix-amarillo); }
.ix-cr-clase.pulsado .ix-cr-clase-ico { transform: scale(.94); }
.ix-cr-clase .ix-cr-candado { right: 3px; top: 22px; }

/* ================================================================ PERSONALIZAR */
/* ---- las listas de categorías: una fila por categoría, ‹ [rótulo · lo elegido ▾] › */
.ix-cr-lista { grid-row: 1 / 3; align-self: start; max-height: 100%; min-height: 0; width: 228px; display: flex; flex-direction: column; gap: 6px; padding: 2px 3px 4px; position: relative; z-index: 2;
  pointer-events: auto; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; animation: ix-cr-aparece .22s ease-out; }
.ix-cr-lista::-webkit-scrollbar, .ix-cr-ops::-webkit-scrollbar { display: none; }
.ix-cr-lista.ix-izq { grid-column: 1; justify-self: start; }
.ix-cr-lista.ix-der { grid-column: 3; justify-self: end; }
.ix-cr-lista > .ix-seccion, .ix-cr-bloque-rasgos > .ix-seccion, .ix-cr-bloque-estilos > .ix-seccion { display: flex; align-items: center; gap: 4px; flex: none; font-size: 10px; color: #fff; text-shadow: 0 1px 0 var(--ix-tinta), 0 0 6px rgba(10, 10, 28, .9); }
.ix-cr-filas, .ix-cr-bloque-rasgos, .ix-cr-bloque-estilos { display: flex; flex-direction: column; gap: 5px; flex: none; }
.ix-cr-bloque-estilos { margin-top: 4px; }
.ix-cr-fila { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 3px; height: 36px; flex: none; }
.ix-cr .ix-cr-fl { position: relative; border: 2.5px solid var(--ix-tinta); border-radius: 10px; display: grid; place-items: center; pointer-events: auto;
  background: linear-gradient(180deg, #6a7398, #434b72 42%, #343b5e); box-shadow: inset 0 -3px 0 #1d2240, inset 0 2px 0 rgba(255, 255, 255, .4), 0 2px 0 var(--ix-tinta); }
.ix-cr .ix-cr-fl.pulsado { translate: 0 2px; box-shadow: inset 0 -1px 0 #1d2240, inset 0 2px 0 rgba(255, 255, 255, .3); }
.ix-cr .ix-cr-cat { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 11px auto; align-items: center; column-gap: 4px; padding: 3px 8px 4px 9px; text-align: left; pointer-events: auto;
  border: 2.5px solid var(--ix-tinta); border-radius: 11px; background: linear-gradient(180deg, #2c3566, #222a54); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), 0 2px 0 var(--ix-tinta); }
.ix-cr-rot { grid-column: 1; grid-row: 1; font-size: 8.5px; line-height: 11px; color: var(--ix-gris); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-cr-elegida { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 5px; min-width: 0; }
.ix-cr-valor { font-size: 12.5px; line-height: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ix-cr-valor.ix-largo { font-size: 10.6px; letter-spacing: -.01em; }       /* («Trenzas de la meseta», «Flequillo sobre un ojo»: caben enteros) */
.ix-cr-cat > .ix-gi { grid-column: 2; grid-row: 1 / 3; opacity: .8; transition: rotate .15s; }
.ix-cr-fila.ix-on > .ix-cr-cat { border-color: var(--ix-amarillo); background: linear-gradient(180deg, #44529a, #2f3a74); }
.ix-cr-fila.ix-on .ix-cr-rot { color: #fff; }
.ix-cr-fila.ix-abierta > .ix-cr-cat > .ix-gi { rotate: 180deg; opacity: 1; }
/* lo elegido en esa categoría: una bola del color, o el número de la opción */
.ix-cr-bola { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--ix-tinta); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), inset 0 1.5px 0 rgba(255, 255, 255, .35); flex: none; }
.ix-cr-num { min-width: 16px; height: 16px; padding: 0 3px 1px; border-radius: 6px; border: 1.5px solid var(--ix-tinta); background: linear-gradient(#5a6390, #262d52); display: grid; place-items: center; font-size: 10px; flex: none; }
/* móvil: todas las filas a la izquierda (caben las ocho) y, a la derecha, los estilos o el desplegable. Las filas son de 36 px
   y ENCOGEN solas (hasta 32) cuando el alto no da —la zona segura de abajo de un iPhone—: caben las ocho sin desplazar. Su
   diana sigue siendo de 36 o más: el hueco entre filas también recibe el toque (::after) */
.ix-cr-lista.ix-compacto { align-self: center; }
.ix-cr-lista.ix-compacto.ix-izq { width: 240px; gap: 3px; padding: 1px 2px 2px; }
.ix-cr-lista.ix-compacto .ix-cr-rot-aspecto { display: none; }
.ix-cr-lista.ix-compacto .ix-cr-filas { gap: 3px; flex: 0 1 auto; min-height: 0; }
.ix-cr-lista.ix-compacto .ix-cr-fila { height: auto; flex: 0 1 36px; min-height: 32px; grid-template-columns: 36px minmax(0, 1fr) 36px; }
.ix-cr-lista.ix-compacto .ix-cr-cat { padding: 0 7px 1px 8px; align-content: center; }
.ix-cr .ix-cr-lista.ix-compacto .ix-cr-fl::after, .ix-cr .ix-cr-lista.ix-compacto .ix-cr-cat::after { content: ''; position: absolute; inset: -4px -2.5px; }
.ix-cr-lista.ix-compacto.ix-der { width: 236px; overflow: visible; }
.ix-cr-lista.ix-compacto.ix-cr-abierta { align-self: start; }
.ix-cr-lista.ix-compacto .ix-cr-muestras { grid-template-columns: repeat(4, 46px); gap: 10px 5px; }       /* (4 × 46 + 3 × 5 = 199: la cuarta columna no se recorta) */
.ix-cr .ix-cr-lista.ix-compacto .ix-cr-muestra { width: 46px; height: 46px; }
.ix-cr .ix-cr-lista.ix-compacto .ix-cr-ficha { height: 36px; }
.ix-cr-lista.ix-compacto.ix-cr-abierta > .ix-cr-bloque-estilos, .ix-cr-lista.ix-compacto.ix-cr-abierta > .ix-cr-capucha { display: none; }

/* «hay más»: una lista que no cabe se desplaza, y el borde por donde sigue se difumina (lo pone aspecto.js) */
.ix-cr-lista.ix-cr-mas-abajo { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); }
.ix-cr-lista.ix-cr-mas-arriba { -webkit-mask-image: linear-gradient(0deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(0deg, #000 calc(100% - 36px), transparent); }
.ix-cr-lista.ix-cr-mas-abajo.ix-cr-mas-arriba { -webkit-mask-image: linear-gradient(180deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(180deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }

/* ---- estilos ya hechos: seis miniaturas del propio personaje */
.ix-cr-estilos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ix-cr .ix-cr-estilo { position: relative; aspect-ratio: 1; min-width: 0; border-radius: 14px; border: 2.5px solid var(--ix-tinta); overflow: hidden; pointer-events: auto;
  background: radial-gradient(circle at 50% 32%, #b8553f, #70242a 62%, #35101f); box-shadow: 0 2.5px 0 var(--ix-tinta), inset 0 2px 0 rgba(255, 255, 255, .18); }
.ix-cr-estilo-img { position: absolute; left: -5%; top: -2%; width: 110%; height: 110%; object-fit: cover; pointer-events: none; }
.ix-cr-estilo > .ix-cr-n { position: absolute; left: 4px; top: 2px; font-size: 10px; z-index: 1; }
.ix-cr-estilo.ix-on { border-color: var(--ix-amarillo); box-shadow: 0 0 0 2px var(--ix-tinta), 0 0 10px 2px rgba(255, 225, 74, .5); }
.ix-cr-estilo.pulsado { transform: scale(.95); }
.ix-cr-estilo-nombre { font-size: 10px; line-height: 12px; color: #fff; text-align: center; text-shadow: 0 1px 0 var(--ix-tinta), 0 0 6px rgba(10, 10, 28, .9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
/* pícaro: la capucha tapa el peinado en la partida */
.ix-cr-capucha { display: flex; align-items: center; gap: 7px; flex: none; padding: 4px 6px 4px 8px; border-radius: 11px; background: rgba(12, 14, 34, .62); }
.ix-cr-capucha .ix-n { flex: 1; font-size: 8.5px; line-height: 1.25; color: var(--ix-claro); }
.ix-cr-capucha .ix-t { font-size: 11px; }
.ix-cr .ix-cr-capucha .ix-sw { width: 44px; height: 24px; }

/* ---- el desplegable: todas las opciones de la categoría (colores: muestras redondas numeradas; formas: fichas con nombre) */
.ix-cr-des { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 9px; min-height: 0; pointer-events: auto; z-index: 5; animation: ix-cr-aparece .14s ease-out; }
/* ancho (PC): se abre BAJO su fila, dentro de la columna, con un pico que la señala; las filas de debajo bajan */
.ix-cr-filas > .ix-cr-des { position: relative; flex: none; margin: 3px 0 1px; padding: 7px 9px 6px; gap: 5px; }
.ix-cr-filas > .ix-cr-des::before { content: ''; position: absolute; left: 50%; top: -8px; margin-left: -6px; width: 12px; height: 12px; rotate: 45deg; background: #333d74; border: 2.5px solid var(--ix-tinta); border-right: 0; border-bottom: 0; }
.ix-cr-filas > .ix-cr-des .ix-cr-ops { overflow: visible; }
.ix-cr .ix-cr-filas > .ix-cr-des .ix-cr-ficha { height: 30px; }
.ix-cr-filas > .ix-cr-des .ix-cr-ficha-txt { font-size: 10.5px; line-height: 1.02; }
/* (PC con poca altura, p. ej. 1280 × 720: sin el rótulo y con las filas más juntas, el desplegable abierto cabe entero) */
.ix-cr-bajo .ix-cr-rot-aspecto { display: none; }
.ix-cr-bajo .ix-cr-lista:not(.ix-compacto) .ix-cr-fila { height: 35px; }
.ix-cr-bajo .ix-cr-lista:not(.ix-compacto) .ix-cr-filas { gap: 3px; }
/* (menos aún, p. ej. 1366 × 657: tampoco el rótulo de la derecha, y sus filas y los seis estilos caben sin desplazar) */
.ix-cr-muy-bajo .ix-cr-bloque-rasgos > .ix-seccion { display: none; }
/* (con una fila de la derecha abierta, los estilos dejan el sitio) */
.ix-cr-lista.ix-der.ix-cr-abierta:not(.ix-compacto) > .ix-cr-bloque-estilos { display: none; }
.ix-cr-lista.ix-compacto > .ix-cr-des { flex: 0 1 auto; }
.ix-cr-des-cab { display: flex; align-items: center; gap: 8px; flex: none; }
.ix-cr-des-cab > .ix-t { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ix-cr-cuenta { margin-left: auto; font-size: 10px; color: var(--ix-gris); white-space: nowrap; }
.ix-cr .ix-cr-x { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ix-tinta); background: linear-gradient(#6a7398, #343b5e); display: grid; place-items: center; pointer-events: auto; }
.ix-cr .ix-cr-x::after { content: ''; position: absolute; inset: -8px; }
/* las opciones: si una categoría trae más de las que caben, se desplazan con el dedo */
.ix-cr-ops { min-height: 0; flex: 0 1 auto; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; padding: 4px 3px 5px; margin: -3px; }
.ix-cr-muestras { display: grid; grid-template-columns: repeat(4, 42px); gap: 9px 6px; justify-content: space-between; padding: 2px 3px; }
.ix-cr .ix-cr-muestra { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 2.5px solid var(--ix-tinta); pointer-events: auto; display: grid; place-items: center;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .2), inset 0 3px 0 rgba(255, 255, 255, .38), 0 3px 0 var(--ix-tinta); }
.ix-cr-muestra > .ix-cr-n { position: absolute; left: -4px; top: -4px; min-width: 16px; height: 16px; padding: 0 3px 1px; border-radius: 8px; background: #1a1f44; border: 1.5px solid var(--ix-tinta); font-size: 9.5px; line-height: 12px; text-align: center; -webkit-text-stroke: 0; text-shadow: none; }
.ix-cr-visto { display: none; filter: drop-shadow(0 1px 0 rgba(10, 10, 28, .6)); }
.ix-cr-muestra.ix-on { outline: 3px solid var(--ix-amarillo); outline-offset: 2px; }
.ix-cr-muestra.ix-on > .ix-cr-visto { display: block; }
.ix-cr-muestra.ix-on > .ix-cr-n { background: linear-gradient(#fff38a, #ffc21a); color: #3a1c00; }
.ix-cr-fichas { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ix-cr .ix-cr-ficha { position: relative; height: 34px; min-width: 0; padding: 0 5px 1px 6px; border-radius: 11px; border: 2.5px solid var(--ix-tinta); background: linear-gradient(180deg, #2c3566, #222a54);
  display: flex; align-items: center; gap: 5px; text-align: left; pointer-events: auto; overflow: hidden; }
.ix-cr-ficha > .ix-cr-n { flex: none; min-width: 15px; font-size: 10.5px; color: var(--ix-gris); text-align: center; }
.ix-cr-ficha-txt { min-width: 0; font-size: 11px; line-height: 1.08; -webkit-text-stroke: .19em var(--ix-tinta); paint-order: stroke fill; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ix-cr .ix-cr-ficha.ix-on { border-color: var(--ix-amarillo); background: linear-gradient(180deg, #fff38a, #ffc21a); color: #3a1c00; }
.ix-cr-ficha.ix-on > .ix-cr-n { color: #3a1c00; }
.ix-cr-ficha.ix-on .ix-cr-ficha-txt { -webkit-text-stroke: 0; }
.ix-cr-ficha[aria-disabled="true"], .ix-cr-muestra[aria-disabled="true"] { filter: grayscale(.9) brightness(.7); }
.ix-cr-des-pie { display: flex; justify-content: center; flex: none; min-width: 0; }
.ix-cr-des-pie > .ix-t { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ix-cr-des[data-tipo="forma"] > .ix-cr-des-pie { display: none; }

/* ---- bajo el personaje: girar · acercar y alejar · al azar y restablecer */
.ix-cr-mandos { grid-column: 2; grid-row: 2; align-self: end; justify-self: center; display: flex; align-items: center; gap: 6px; padding: 3px 7px 4px; border-radius: 22px; pointer-events: auto;
  background: rgba(12, 14, 34, .5); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08); animation: ix-cr-aparece .22s ease-out; }
.ix-pc .ix-cr-mandos { margin-bottom: 19px; }
.ix-cr-mandos > i { width: 2px; height: 18px; border-radius: 1px; background: rgba(255, 255, 255, .2); flex: none; }
.ix-cr .ix-cr-mando { position: relative; flex: none; width: 33px; height: 33px; border-radius: 50%; border: 2.5px solid var(--ix-tinta); display: grid; place-items: center; pointer-events: auto; touch-action: none;
  background: radial-gradient(circle at 50% 30%, #7d8ab8, #454f7e 50%, #2c3358 88%); box-shadow: inset 0 -3px 0 #1a1f3c, inset 0 2px 0 rgba(255, 255, 255, .35), 0 2.5px 0 var(--ix-tinta); }
.ix-cr .ix-cr-mando::after { content: ''; position: absolute; inset: -5px; }       /* (38 px de diana: el margen se cuenta desde dentro del borde) */
.ix-cr .ix-cr-mando.ix-az { background: radial-gradient(circle at 50% 30%, #9ed3ff, #3f9dff 50%, #1f78f0 88%); box-shadow: inset 0 -3px 0 #0f4bb8, inset 0 2px 0 rgba(255, 255, 255, .5), 0 2.5px 0 var(--ix-tinta); }
.ix-cr .ix-cr-mando.pulsado { transform: scale(.92); }
.ix-cr .ix-cr-mando.ix-on { border-color: var(--ix-amarillo); }
.ix-cr .ix-cr-mando[aria-disabled="true"] { opacity: .42; filter: grayscale(.7); cursor: default; }
/* arriba, en la fila del sexo de «Elegir»: deshacer y rehacer (PC: en el centro) */
.ix-cr-historia { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; display: flex; gap: 9px; pointer-events: auto; animation: ix-cr-aparece .22s ease-out; }
/* (móvil: pegados a la lista, a la izquierda del hueco; en el centro caerían sobre la cabeza en el primer plano de la cara) */
.ix-movil .ix-cr-historia { justify-self: start; margin-left: 3px; }
.ix-cr.ix-escribe .ix-cr-historia { visibility: hidden; }       /* (escribiendo el nombre, la caja sube ahí) */
/* PC: los atajos, en una línea bajo los mandos · móvil: un momento, que el personaje se gira arrastrando */
.ix-cr-pista { grid-column: 1 / -1; grid-row: 2; align-self: end; justify-self: center; padding: 2px 9px 3px; border-radius: 8px; background: rgba(12, 14, 34, .5); font-size: 9px; color: var(--ix-claro); white-space: nowrap; pointer-events: none; }
.ix-cr-pista:empty { display: none; }
.ix-movil .ix-cr-pista { grid-column: 2; margin-bottom: 9px; font-size: 10px; opacity: 0; }
.ix-movil .ix-cr-pista.ix-ver { animation: ix-cr-pista 5.5s ease-out both; }
@keyframes ix-cr-pista { 0%, 10% { opacity: 0; } 18%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* ================================================================ PIE: Volver y las pestañas · (clases | nombre y terminar) · seguir */
.ix-cr-pie { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.ix-cr-pie-izq, .ix-cr-pie-cen, .ix-cr-pie-der { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ix-cr-pie-cen { justify-content: center; }
.ix-cr-p1 .ix-cr-pie-der { justify-content: flex-end; }
/* (los botones de 28 de alto tienen la diana de 36: un margen invisible que también recibe el toque; se cuenta desde dentro del borde) */
.ix-cr .ix-bo.ix-s { position: relative; }
.ix-cr .ix-bo.ix-s::after { content: ''; position: absolute; inset: -6.5px -5px; }
.ix-cr-pasos { display: flex; flex: none; border: 2px solid var(--ix-tinta); border-radius: 10px; background: #141833; pointer-events: auto; }
.ix-cr .ix-cr-pasos button:first-child { border-radius: 8px 0 0 8px; }
.ix-cr .ix-cr-pasos button:last-child { border-radius: 0 8px 8px 0; }
.ix-cr .ix-cr-pasos button::after { content: ''; position: absolute; inset: -4px 0; }       /* (la diana, de 38 de alto) */
.ix-cr .ix-cr-pasos button { position: relative; height: 30px; min-width: 38px; padding: 0 10px 1px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; background: none; font-size: 11px; color: var(--ix-gris); white-space: nowrap; }
.ix-cr .ix-cr-pasos button.ix-on { background: linear-gradient(#fff38a, #ffc21a); color: #3a1c00; }
.ix-cr-pasos button:not(.ix-on) > .ix-gi { opacity: .75; }
.ix-cr-pasos button > span:last-child { display: none; }       /* (pestañas de icono: su nombre va en la etiqueta y en el título) */
.ix-cr-grupo-nombre { display: flex; align-items: center; gap: 7px; min-width: 0; pointer-events: auto; animation: ix-cr-aparece .22s ease-out; }
.ix-cr-caja-nombre { position: relative; display: inline-flex; flex: none; min-width: 0; }
/* (dentro del campo, a la derecha: tic verde si el nombre vale, aspa roja si no; cambia según se escribe) */
.ix-cr-nombre-marca { position: absolute; right: 10px; top: 50%; translate: 0 -56%; display: grid; pointer-events: none; }
.ix-cr-nombre-marca > .ix-gi { display: none; }
.ix-cr-nombre-marca.ix-ok > .ix-gi:first-child, .ix-cr-nombre-marca.ix-mal > .ix-gi:last-child { display: block; }
.ix-cr .ix-cr-nombre { width: 158px; height: 36px; padding: 0 29px 2px 12px; font: inherit; font-size: 16px; color: #fff; outline: none; pointer-events: auto; user-select: text; -webkit-user-select: text; box-sizing: border-box; }
.ix-cr .ix-cr-nombre:focus { border-color: var(--ix-amarillo); }
.ix-cr-nombre.ix-no { border-color: #ff5a45; animation: ix-no .3s; }
.ix-cr .ix-cr-dado { width: 36px; height: 36px; padding: 0 0 3px; }
.ix-cr-aviso { min-width: 0; font-size: 10px; line-height: 1.25; color: var(--ix-claro); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 0 var(--ix-tinta); }
.ix-cr-aviso.ix-vacio { color: var(--ix-gris); }
.ix-cr-aviso.ix-mal { color: #ffb3a8; }
.ix-cr .ix-cr-ir { height: 42px; min-width: 172px; font-size: 18px; border-radius: 13px; margin-left: 3px; }
.ix-cr-p2 .ix-cr-ir { min-width: 150px; }
.ix-cr .ix-cr-ir:disabled { filter: grayscale(.7) brightness(.8); pointer-events: none; }
.ix-cr .ix-cr-listo { display: none; height: 36px; }
/* (móvil, escribiendo el nombre: la caja sube arriba, que el teclado tapa la mitad de abajo) */
.ix-cr.ix-escribe .ix-cr-nombre { width: clamp(118px, calc(202px - var(--ix-sl, 0px) - var(--ix-sr, 0px)), 158px); }       /* (con muescas a los lados no pisa las listas) */
.ix-cr.ix-escribe .ix-cr-grupo-nombre { position: absolute; left: calc(50% + (var(--ix-sl, 0px) - var(--ix-sr, 0px)) / 2); top: calc(10px + var(--ix-st, 0px)); translate: -50% 0; z-index: 7; padding: 8px 10px; border-radius: 16px; background: rgba(10, 12, 32, .92); border: 2.5px solid var(--ix-tinta); animation: none; }
.ix-cr.ix-escribe .ix-cr-ir { display: none; }
.ix-cr.ix-escribe .ix-cr-listo { display: inline-flex; }

/* ---- PC: con el ratón encima, lo que se pulsa se aclara un poco */
.ix-pc .ix-cr-retrato:not(.ix-pronto):hover .ix-cr-foto, .ix-pc .ix-cr-clase:not(.ix-pronto):hover .ix-cr-clase-ico { filter: brightness(1.12); transform: scale(1.05); }
.ix-pc .ix-cr-cat:hover, .ix-pc .ix-cr-fl:hover, .ix-pc .ix-cr-ficha:hover, .ix-pc .ix-cr-mando:hover, .ix-pc .ix-cr-sexo-b:hover, .ix-pc .ix-cr-estilo:hover, .ix-pc .ix-cr-x:hover { filter: brightness(1.14); }
.ix-pc .ix-cr-muestra:hover { translate: 0 -1px; filter: brightness(1.08); }
/* (la opción que se está enseñando en el personaje se distingue: borde claro) */
.ix-pc .ix-cr-ficha:hover:not(.ix-on):not([aria-disabled="true"]) { border-color: #e6ecff; background: linear-gradient(180deg, #4a58a4, #353f80); }
.ix-pc .ix-cr-muestra:hover:not(.ix-on):not([aria-disabled="true"]) { outline: 2.5px solid #e6ecff; outline-offset: 2px; }