/* m156d · arte de interfaz de Codex (EAW_INTERFAZ): arena, tareas, eventos, títulos, naturalezas, resultados e invocación normal.
   Índice y ayudante en js/arte-eaw-d.js (GENERADO por herramientas/arte/integrar-interfaz-d.py). Cada imagen va a su tamaño NATIVO
   (--aed-w / --aed-h, los del PNG), sin reescalar, salvo el banner, que sólo se reduce cuando no cabe a 400 px. */
.aed { display: inline-block; flex: none; box-sizing: content-box; width: var(--aed-w); height: var(--aed-h); padding: 0; background: center / 100% 100% no-repeat; image-rendering: pixelated; vertical-align: middle; }

/* rango de la arena y tipo de evento: 52×52 que ya traen su marco → la casilla del kit no pinta el suyo (una sola pieza, sin caja dentro de caja) */
.k-casilla.aed-marco { border-image: none; }
.k-casilla.aed-marco > .aed { width: var(--aed-w); height: var(--aed-h); }
.k-casilla.aed-marco.piedra > .aed { filter: grayscale(.85) brightness(.9); }

/* tareas: 24×24 dentro de la casilla de 52 del kit */
.k-casilla > .aed-diarias { width: var(--aed-w); height: var(--aed-h); }

/* naturaleza (16×16) delante del nombre de la dinastía en la ficha del héroe; título (16×16) delante de su nombre en el pliego */
.hero-profile-meta .aed-naturalezas { margin-right: 4px; vertical-align: -3px; }
.k-btn > .aed-titulos { margin-right: 6px; }

/* sello del resultado (96×96) bajo el rótulo del pliego; en apaisado bajo no cabe y se omite (queda el rótulo) */
.aed-sello { display: block; margin: 0 auto; }
@media (max-height: 420px) { .aed-sello { display: none; } }

/* invocación normal: miniatura 84×48 en lugar de la casilla de la fila; banner 400×300 arriba del cuerpo (nunca se agranda) */
.beta-taberna .bv-modo > .aed-mini { width: 84px; height: 48px; }
.beta-taberna .bv-modo:has(> .aed-mini) > .k-casilla { display: none; }
/* a 320 px los 84 px de la miniatura dejarían «Probabilidades» pisado por el botón: ahí vuelve la casilla de 52 */
@media (max-width: 359px) { .beta-taberna .bv-modo > .aed-mini { display: none; } .beta-taberna .bv-modo:has(> .aed-mini) > .k-casilla { display: grid; } }
.beta-taberna .aed-banner-caja { display: grid; justify-items: center; }
.beta-taberna .aed-banner { width: min(100%, 400px); height: auto; aspect-ratio: 400 / 300; }
@media (max-height: 420px) { .beta-taberna .aed-banner-caja { display: none; } }

/* m159b · RESULTADO de la invocación sobre el fondo de Codex (EAW_ENTORNOS §4; js/beta-taberna.js · resultadoArte). El fondo 390×300 YA es
   el pergamino: el pliego no pinta el suyo (una sola superficie). Se reduce conservando proporción; los rectángulos de layout.json llegan
   como --titulo-* / --arte-* / --detalle-* en % del fondo. El botón del kit (48 px) va debajo: su rectángulo (25 px) no lo admite.
   Con 420 px de alto o menos el cliente pinta el pliego de siempre, así que aquí no hay regla para esa altura. */
/* el velo casi opaco: la escena y «Seguir» son lo único a la vista (sin la lista de la Taberna asomando por debajo del botón) */
.beta-taberna .bp-velo:has(> .bv-res) { background: rgba(20, 13, 8, .95); }
.beta-taberna .bp-pliego.bv-res { width: min(100%, 390px); padding: 0; border-image: none; background: none; gap: 8px; }
.beta-taberna .bv-res-placa { position: relative; width: 100%; aspect-ratio: 390 / 300; background: center / 100% 100% no-repeat; image-rendering: pixelated; container-type: inline-size; }
.beta-taberna .bv-res-placa > .bv-res-titulo { position: absolute; left: var(--titulo-x); top: var(--titulo-y); width: var(--titulo-w); height: var(--titulo-h); min-width: 0; min-height: 0; margin: 0; padding: 0;
  border-image: none; display: grid; place-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: clamp(14px, 5.6cqw, 22px); color: var(--k-tinta); text-shadow: none; }
.beta-taberna .bv-res-placa .bv-res-arte { position: absolute; top: var(--arte-y); height: var(--arte-h); left: var(--arte-x); width: var(--arte-w); }
.beta-taberna .bv-res-placa > .bv-figura.bv-res-arte > * { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
/* casilla del fragmento, recurso o Sellos: cuadrada, del alto del rectángulo, centrada en él (el rectángulo es simétrico al eje del fondo) */
.beta-taberna .bv-res-placa .k-casilla.bv-res-arte { width: auto; aspect-ratio: 1; left: calc(var(--arte-x) + var(--arte-w) / 2); transform: translateX(-50%); }
.beta-taberna .bv-res-placa .k-casilla.bv-res-arte > :is(.ico, .bv-cara) { width: 62%; height: 62%; }
.beta-taberna .bv-res-placa .k-casilla.bv-res-arte > b { font-size: clamp(14px, 4.6cqw, 18px); right: 6px; bottom: 4px; }
.beta-taberna .bv-res-placa .bv-res-detalle { position: absolute; left: var(--detalle-x); top: var(--detalle-y); width: var(--detalle-w); height: var(--detalle-h); margin: 0; display: grid; place-items: center;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 clamp(12px, 4.1cqw, 16px)/1 var(--k-fuente); color: var(--k-tinta); text-align: center; }