/* INTERFAZ NUEVA · menús Personaje y Mochila (diseno/demo/INTERFAZ-NUEVA.md §13.6). Es de PERSONAJE Y MOCHILA: aquí van SOLO sus estilos. Todas las clases con prefijo ix- (ix-pj-… / ix-mo-…); medidas en px del lienzo (diseno/demo/interfaz-lienzo/MovilPersonaje.html y MovilMochila.html: lo que allí va en style="…"), como en css/interfaz.css (el kit, de BASE: no se toca). En PC es la MISMA ventana a 1,4×: no hay nada aparte. Las tres tarjetas de cada menú van en la caja del marco (.ix-panel: flex en fila, gap 10 px, 752 × 332 en 844 × 390). La ficha del objeto (.ix-pj-ficha) es la misma en los dos menús (menus/personaje-ficha.js). */ /* ---------------------------------------------------------------- la caja de las tres tarjetas Hace de cuerpo del menú: con el ancho de diseño (752 px) es el lienzo tal cual. Con menos (la muesca de un móvil se come ancho: el iPhone de lado deja ~660 px) encogen las tarjetas que pueden —muñeco, ficha, bolsas— hasta su mínimo y las rejillas y las estadísticas se quedan con lo que sobra. Si ni así caben, menus/personaje-escala.js dibuja la caja entera más pequeña, con las mismas proporciones. */ .ix-pj-caja { flex: 1; min-width: 0; min-height: 0; display: flex; gap: 10px; transform-origin: 0 0; } /* ---------------------------------------------------------------- común a las tres tarjetas de cada menú */ .ix-pj-titulo { font-size: 15px; } .ix-pj-cuenta { font-size: 10px; color: var(--ix-claro); white-space: nowrap; } /* (lo que se pulsa: se nota al apoyar el dedo; alPulsar de base.js pone .pulsado) */ [data-panel="personaje"] .ix-slot.pulsado, [data-panel="mochila"] .ix-slot.pulsado, [data-panel="mochila"] .ix-fila.pulsado, [data-panel="mochila"] .ix-libre.pulsado { filter: brightness(1.3); } .ix-pc [data-panel="personaje"] button.ix-slot:hover, .ix-pc [data-panel="mochila"] button.ix-slot:hover, .ix-pc [data-panel="mochila"] button.ix-fila:hover, .ix-pc [data-panel="mochila"] button.ix-libre:hover { filter: brightness(1.14); } /* una acción que ahora no se puede: apagada, pero se pulsa (dice su motivo). No lleva aria-disabled: alPulsar la callaría */ .ix-bo.ix-pj-no { filter: grayscale(.85) brightness(.8); } .ix-libre.ix-pj-no { opacity: .55; } /* dianas táctiles: el dibujo es menor de 44 px (ranuras de 37 y 40, botones de 28 y 34) y lo que recibe el toque se agranda hasta donde empieza la diana del vecino (las ranuras van a 42 y 45 px de paso: ni un hueco muerto entre ellas) */ .ix-pj-col > .ix-slot::before, .ix-mo-reja > .ix-slot::before { content: ''; position: absolute; inset: -2.5px; } .ix-pj-col:first-child > .ix-slot::before { inset: -2.5px -3.5px -2.5px -10px; } .ix-pj-col:last-child > .ix-slot::before { inset: -2.5px -10px -2.5px -3.5px; } .ix-pj-ficha-acciones > .ix-bo, .ix-mo-pie > .ix-bo, .ix-mo-libre { position: relative; } .ix-pj-ficha-acciones > .ix-bo::before { content: ''; position: absolute; inset: -5px -3px -8px; } .ix-mo-pie > .ix-bo::before { content: ''; position: absolute; inset: -9px -6px; } .ix-mo-libre::before { content: ''; position: absolute; inset: -2.5px -2px; } /* ---------------------------------------------------------------- PERSONAJE · el muñeco (238 px) */ .ix-pj-muneco { flex: 0 1 238px; min-width: 204px; display: flex; flex-direction: column; gap: 6px; padding: 8px; } .ix-pj-cab { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: none; } .ix-pj-quien { font-size: 10px; color: var(--ix-rosa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ix-pj-cuerpo { flex: 1; min-height: 0; display: flex; gap: 7px; align-items: center; } .ix-pj-col { display: flex; flex-direction: column; gap: 5px; flex: none; } /* el personaje de cuerpo entero: una imagen (menus/personaje-figura.js la renderiza una vez y la coloca por sus pies) */ .ix-pj-figura { position: relative; flex: 1; min-width: 0; align-self: stretch; overflow: hidden; background: radial-gradient(ellipse at 50% 88%, #6a4070 0%, #2c2c60 45%, #161a3a 100%); } .ix-pj-figura > canvas, .ix-pj-figura > img { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .22s ease-out; pointer-events: none; } .ix-pj-figura > .ix-pj-vista { opacity: 1; } .ix-pj-figura > img.ix-pj-busto { left: 50%; top: 50%; width: 86%; height: auto; translate: -50% -50%; } .ix-pj-px { display: flex; align-items: center; gap: 6px; flex: none; } .ix-pj-px-t { font-size: 9.5px; color: #ecd2ff; white-space: nowrap; } .ix-pj-px-barra { flex: 1; min-width: 0; } .ix-pj-px-barra > .ix-bar { width: 100%; height: 9px; } /* ---------------------------------------------------------------- PERSONAJE · estadísticas (lo que sobra de ancho) */ .ix-pj-stats { flex: 1 1 0; min-width: 262px; container: ixstats / inline-size; display: flex; flex-direction: column; gap: 3px; padding: 8px 9px; } /* (con poco ancho las notas de las filas solo se verían cortadas: fuera; su cuenta sale al tocar la fila) */ @container ixstats (max-width: 258px) { .ix-pj-stat-nota { display: none; } .ix-pj-stat:not(.ix-pj-stat-mas) > .ix-pj-stat-nombre { flex: 1; } } .ix-pj-stats-cab { display: flex; align-items: center; gap: 6px; flex: none; } .ix-pj-stats-cab > .ix-tag { margin-left: auto; } .ix-pj-lista { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3px; } .ix-pj-lista > .ix-seccion { margin-top: 3px; flex: none; } .ix-pj-stat { height: 22px; padding: 0 8px 0 5px; } .ix-pj-stat-ico { width: 15px; height: 15px; flex: none; } .ix-pj-stat-nombre { font-size: 12px; white-space: nowrap; } .ix-pj-stat-nota { flex: 1; min-width: 0; font-size: 9px; color: var(--ix-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ix-pj-stat-valor { font-size: 12.5px; white-space: nowrap; color: #fff; } .ix-pj-stat-valor.ix-pj-verde { color: var(--ix-verde); } .ix-pj-stat-valor.ix-pj-naranja { color: var(--ix-naranja); } .ix-pj-stat-valor.ix-pj-azul { color: var(--ix-azul); } .ix-pj-stat-valor.ix-pj-apagado { color: var(--ix-apagado); } /* («Más datos»: nombre y valor arriba y la nota entera debajo, con la sangría del nombre) */ .ix-pj-stat.ix-pj-stat-mas { height: auto; min-height: 22px; flex-wrap: wrap; row-gap: 0; padding: 2.5px 8px 3px 5px; align-content: center; } .ix-pj-stat-mas > .ix-pj-stat-nombre { flex: 1; min-width: 0; } .ix-pj-stat-nota2 { flex: 0 0 calc(100% - 21px); margin-left: 21px; font-size: 9px; line-height: 1.3; color: var(--ix-gris); } .ix-pj-stat-equipo { width: 30px; flex: none; text-align: right; font-size: 9.5px; color: var(--ix-verde); white-space: nowrap; } .ix-pj-pie { flex: none; font-size: 9px; line-height: 1.3; color: var(--ix-gris); } .ix-pj-pie.ix-pj-pie-det { color: var(--ix-claro); } /* una fila con `detalle` se toca (su cuenta en una frase sale en el pie); la elegida lleva su aro */ .ix-pj-stat-det { cursor: pointer; } .ix-pj-stat.ix-pj-stat-on { outline: 1.5px solid var(--ix-amarillo); outline-offset: -1.5px; background: rgba(255, 225, 74, .12); } .ix-pj-stat.pulsado { filter: brightness(1.3); } .ix-pc .ix-pj-stat-det:hover { filter: brightness(1.25); } /* ---------------------------------------------------------------- la FICHA de un objeto (196 px; Personaje y Mochila) */ .ix-pj-ficha { flex: 0 1 196px; min-width: 168px; container: ixficha / inline-size; display: flex; flex-direction: column; gap: 6px; padding: 9px; } .ix-pj-ficha-cab { display: flex; gap: 8px; align-items: center; flex: none; } .ix-pj-ficha-cab > .ix-slot { pointer-events: none; } .ix-pj-ficha-cab > div { min-width: 0; } .ix-pj-ficha-nombre { font-size: 14px; line-height: 1.05; color: #fff; -webkit-text-stroke: .19em var(--ix-tinta); paint-order: stroke fill; overflow-wrap: break-word; } /* (lo de en medio se desliza si no cabe: una descripción larga, muchas estadísticas; arriba y abajo no se mueven) */ .ix-pj-ficha-medio { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; } .ix-pj-ficha-medio > * { flex: none; } .ix-pj-ficha-info { font-size: 10px; line-height: 1.35; color: var(--ix-claro); } .ix-pj-ficha-info > b { font-weight: inherit; color: var(--ix-amarillo); } .ix-pj-ficha-stats { padding: 6px 9px; display: flex; flex-direction: column; gap: 2px; } .ix-pj-ficha-stat { display: flex; font-size: 12px; } .ix-pj-ficha-stat > :last-child { margin-left: auto; color: var(--ix-verde); } .ix-pj-ficha-stat.ix-pj-menos > :last-child { color: var(--ix-rojo); } .ix-pj-ficha-mejora { font-size: 9px; line-height: 1.3; color: var(--ix-verde); margin-top: 1px; } .ix-pj-ficha-mejora.ix-pj-peor { color: var(--ix-rojo); } .ix-pj-ficha-desc { font-size: 10px; line-height: 1.3; color: #e6eaff; } .ix-pj-ficha-notas { font-size: 9.5px; line-height: 1.3; color: var(--ix-gris); } .ix-pj-ficha-precio { font-size: 9.5px; line-height: 1.3; color: var(--ix-amarillo); } /* («¿Seguro?»: lo que pasa si se confirma, justo encima del botón) */ .ix-pj-ficha-confirma { flex: none; font-size: 9.5px; line-height: 1.25; color: var(--ix-rojo); text-align: center; } .ix-pj-ficha-acciones { display: flex; gap: 6px; flex: none; } .ix-pj-ficha-acciones > .ix-bo { padding: 0 10px 3px; font-size: 12px; } .ix-pj-ficha-acciones > .ix-bo.ix-pj-ancha { flex: 1; min-width: 0; padding: 0 8px 3px; font-size: 13px; } .ix-pj-ficha-acciones > .ix-bo.ix-pj-ancha.ix-am { font-size: 16px; } /* (el «Equipar» del lienzo: el tamaño heredado de su página) */ @container ixficha (max-width: 160px) { .ix-pj-ficha-acciones > .ix-bo.ix-pj-ancha.ix-am { font-size: 14px; } } /* sin objeto (una ranura vacía o bloqueada, la mochila sin nada elegido): el mismo sitio, apagado */ .ix-pj-ficha-vacia .ix-pj-ficha-nombre { color: var(--ix-claro); } /* ---------------------------------------------------------------- MOCHILA · la columna de bolsas (170 px) */ .ix-mo-bolsas { flex: 0 1 170px; min-width: 150px; display: flex; flex-direction: column; gap: 5px; padding: 8px; } .ix-mo-cab { display: flex; align-items: center; gap: 6px; flex: none; } .ix-mo-bolsas > .ix-mo-cab { margin-bottom: 1px; } .ix-mo-cuerpo-bolsas { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 1px; margin: -1px; } .ix-mo-lista-bolsas { display: flex; flex-direction: column; gap: 5px; flex: none; } /* (son