/* BRASA 0.1 · R35 · bloque C · «Gremio» (js/beta-r35.js; sólo con ?betaR35=1). Composición de la pantalla: las PIEZAS son las del
   kit (css/kit-r34.css); aquí sólo se colocan. Una sola superficie: cabecera de madera, pergamino y pestañas al pie.
   Nada de cajas dentro de cajas ni de fondos verdes. Probado a 320, 390, 690×320 y 1280. */
dialog.beta-juego { box-sizing: border-box; inset: 0; width: 100vw; height: 100dvh; max-width: 480px; max-height: none; margin: 0 auto; padding: 0; border: 0; overflow: hidden; }
dialog.beta-juego[open] { display: flex; flex-direction: column; }
dialog.beta-juego::backdrop { background: #0d0703; }
.beta-juego .k-cabecera { flex: none; padding-top: env(safe-area-inset-top, 0); }
.beta-juego .bt-saldo { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px 10px 0; }
.beta-juego .bt-aviso { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 22px; margin: 0; padding: 4px 12px 0; font: 400 15px/1.1 var(--k-fuente); color: var(--k-rojo); text-align: center; }
.beta-juego .bt-aviso .k-btn { min-height: 40px; }
.beta-juego .bt-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 10px 18px; display: grid; gap: 10px; align-content: start; }
.beta-juego .bt-pestanas { flex: none; padding: 0 6px calc(14px + env(safe-area-inset-bottom, 0px)); background: #3a2110; gap: 4px; }
.beta-juego .bt-pestanas .k-pestana { min-width: 0; flex: 1 1 0; padding-inline: 4px; font-size: 15px; }
.beta-juego .bt-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-auto-rows: max-content; }
.beta-juego .k-tira { min-width: 0; }
.beta-juego .k-tira > .k-btn { flex: none; }
.beta-juego .k-tira .k-dato > b { overflow-wrap: anywhere; }
.beta-juego .k-tira.bt-libre { min-height: 52px; opacity: .75; }
.beta-juego .k-tira.bt-libre .k-dato > small { color: var(--k-tinta2); }
.beta-juego .k-tira.bt-reserva > .k-heroe { filter: grayscale(.9) brightness(.8); }
.beta-juego .bt-quieto { cursor: default; pointer-events: none; }
.beta-juego .k-tira .bt-quieto { width: 44px; height: 44px; }
/* almacén: cinco casillas con su cantidad y lo que espera; UNA acción al final */
.beta-juego .bt-almacen { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.beta-juego .bt-almacen .k-casilla { width: 44px; height: 48px; }
.beta-juego .bt-almacen .k-casilla > .ico { width: 24px; height: 24px; margin-bottom: 10px; }
.beta-juego .bt-almacen .k-btn { margin-left: 2px; }
.beta-juego .bt-mas { position: absolute; left: 0; right: 0; top: -9px; font: 400 12px/1 var(--k-fuente); font-style: normal; text-align: center; color: #b8f08a; --k-c: #10131c; text-shadow: var(--k-contorno-fino); }
.beta-juego .bt-px > svg, .beta-juego .bt-tinte > svg { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.beta-juego .bt-tinte { filter: hue-rotate(var(--bt-h, 0deg)) saturate(1.5); }
.beta-juego .k-coste > .ico, .beta-juego .k-recurso > .ico { display: inline-block; }
/* técnicas y regiones: fila de casillas; la elegida va en oro (código de color: brasa/oro = lo elegido) */
.beta-juego .bt-tecnicas { display: flex; justify-content: center; gap: 4px; }
.beta-juego .bt-tecnicas .k-casilla { width: 44px; height: 44px; cursor: pointer; }
.beta-juego .bt-tecnicas .k-casilla > b { position: static; font-size: 16px; }
.beta-juego .bt-tecnicas .k-casilla > .ico { position: absolute; right: 1px; top: 1px; width: 14px; height: 14px; }
.beta-juego .bt-tecnicas .k-casilla.activa, .beta-juego .bt-rejilla .k-casilla.activa { outline: 2px solid #fff6dc; outline-offset: -2px; }
.beta-juego .bt-costes { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--k-tinta); }
.beta-juego .k-btn.doble { min-width: 84px; padding-inline: 14px; font-size: 18px; }
.beta-juego .k-btn.doble .k-coste { font-size: 14px; }
.beta-juego .k-btn .bt-reloj { width: 14px; height: 14px; background: var(--k-g-reloj) center / 14px 14px no-repeat; }
/* mochila */
.beta-juego .bt-rejilla { display: grid; grid-template-columns: repeat(auto-fill, 52px); justify-content: center; gap: 6px; }
.beta-juego .bt-rejilla .k-casilla { cursor: pointer; }
.beta-juego .bt-puesta { position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: var(--k-g-visto) center / 16px 16px no-repeat; }
.beta-juego .bt-aptos, .beta-juego .bt-formacion { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.beta-juego .bt-aptos .k-heroe.puesta::after { content: ''; position: absolute; inset: 0; background: var(--k-marca) center 60% / 39px 33px no-repeat, #0b0f1466; }
.beta-juego .bt-formacion > * { width: 56px; height: 56px; }
.beta-juego .bt-formacion > .k-heroe > :is(img, canvas, svg, .portrait) { width: 40px; height: 40px; }
/* dos delante y tres detrás: un hueco separa las filas (sin rótulos) */
.beta-juego .bt-formacion > :nth-child(2) { margin-right: 14px; }
.beta-juego .bt-equipo { display: flex; gap: 4px; align-items: center; min-height: 22px; }
.beta-juego .bt-mini > * { display: block; width: 22px; height: 22px; image-rendering: pixelated; }
.beta-juego .bt-nada, .beta-juego .bt-vacio { margin: 12px 0 0; font: 400 16px/1.2 var(--k-fuente); text-align: center; color: var(--k-tinta2); }
.beta-juego .bt-alta { margin: 8px auto 0; }
.beta-juego .bt-centro { display: grid; justify-items: center; }
/* capa de elegir duración y de resultado: un pliego sobre la pantalla atenuada */
.beta-juego .bt-velo { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; }
.beta-juego .bt-pliego { width: min(100%, 320px); display: grid; gap: 12px; justify-items: center; }
.beta-juego .bt-duraciones { display: grid; gap: 8px; width: 100%; }
.beta-juego .bt-duraciones .k-btn { width: 100%; flex-direction: row; justify-content: space-between; min-height: 52px; padding-inline: 26px; }
.beta-juego .bt-duraciones .k-coste { font-size: 18px; }
.beta-juego .bt-premios { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.beta-juego .bt-premios .k-casilla { width: 60px; height: 60px; }
.beta-juego .bt-premios .k-casilla > .ico { width: 36px; height: 36px; }
.beta-juego .bt-calidad { flex-basis: 100%; margin: 0; font: 400 18px/1.15 var(--k-fuente); text-align: center; color: var(--k-tinta); }
.beta-juego .bt-calidad.q1 { color: #2f7d3a; } .beta-juego .bt-calidad.q2 { color: #7a3fa8; } .beta-juego .bt-calidad.q3, .beta-juego .bt-calidad.q4 { color: #a3611c; }
/* apaisado bajo (690×320): cabecera y pie más finos; el cuerpo se desplaza */
@media (max-height: 420px) {
  dialog.beta-juego { max-width: 720px; }
  .beta-juego .k-cabecera { min-height: 46px; }
  .beta-juego .bt-pestanas { padding-bottom: 10px; }
  .beta-juego .bt-pestanas .k-pestana, .beta-juego .bt-pestanas .k-pestana.activa { min-height: 44px; padding-top: 2px; }
  .beta-juego .bt-lista { grid-template-columns: 1fr 1fr; column-gap: 10px; }
}
@media (min-width: 900px) { dialog.beta-juego { max-width: 520px; height: min(100dvh, 860px); margin: auto; outline: 2px solid #3a2110; } }
/* 320 px: cuatro rótulos de pestaña sin tocarse */
.beta-juego .bt-pestanas .k-pestana { overflow: hidden; white-space: nowrap; }
@media (max-width: 359px) { .beta-juego .bt-pestanas { gap: 2px; padding-inline: 4px; } .beta-juego .bt-pestanas .k-pestana { font-size: 13px; letter-spacing: 0; padding-inline: 2px; } }
@media (max-width: 359px) { .beta-juego .bt-formacion { gap: 4px; } .beta-juego .bt-formacion > * { width: 50px; height: 50px; } .beta-juego .bt-formacion > .k-heroe > :is(img, canvas, svg, .portrait) { width: 36px; height: 36px; } .beta-juego .bt-formacion > :nth-child(2) { margin-right: 10px; } }
/* quien ya lleva la pieza: su casilla marcada, no apagada */
.beta-juego .bt-aptos .k-heroe.puesta { cursor: default; }
/* lo que falta, legible sobre la tira clara (el rosa del kit es para fondo oscuro de botón) */
.beta-juego .bt-costes .k-coste.falta > b { color: var(--k-rojo); }
/* ---- cierre del bloque C ---- */
/* la pantalla se pinta dentro de .bt-raiz (sin caja propia) para que el combate a la vista, hermano suyo, sobreviva a los repintados */
.beta-juego .bt-raiz { display: contents; }
/* COMBATE A LA VISTA: la escena del juego ocupa la pantalla; arriba el rótulo de la etapa y la vida del rival, abajo la compañía
   con su vida y dos botones. Nada de cajas: piezas del kit apoyadas sobre la escena. */
.beta-juego .bt-escena { position: absolute; inset: 0; z-index: 4; background: #0d0703; overflow: hidden; }
.beta-juego .bt-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.beta-juego .bt-esc-cab { position: absolute; left: 0; right: 0; top: 0; display: grid; justify-items: center; gap: 2px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 0; pointer-events: none; }
.beta-juego .bt-esc-cab .k-rotulo-pliego { margin-bottom: 0; }
.beta-juego .bt-esc-rival { width: min(100%, 300px); height: 22px; }
.beta-juego .bt-esc-rival > em { font-size: 15px; color: #fff6dc; --k-c: #2a0d08; text-shadow: var(--k-contorno-fino); }
.beta-juego .bt-esc-pie { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 8px; padding: 8px 8px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(#0d070300, #0d0703cc 38%); }
.beta-juego .bt-esc-comp { display: flex; justify-content: center; gap: 6px; }
.beta-juego .bt-esc-comp .k-heroe { width: 56px; height: 62px; cursor: default; }
.beta-juego .bt-esc-comp .k-heroe > :is(img, canvas, svg, .portrait) { width: 40px; height: 40px; margin-bottom: 8px; }
.beta-juego .bt-esc-vida { position: absolute; left: 3px; right: 3px; bottom: 2px; height: 12px; min-width: 0; }
.beta-juego .bt-esc-vida > i { left: 3px; top: 3px; bottom: 3px; max-width: calc(100% - 6px); }
.beta-juego .bt-esc-btn { display: flex; gap: 10px; min-height: 44px; }
.beta-juego .bt-esc-btn[hidden] { display: flex; visibility: hidden; }
.beta-juego .bt-esc-btn .k-btn { min-width: 76px; }
/* resultado sobre la escena: dos acciones, la que sigue jugando en turquesa */
.beta-juego .bt-dos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* mochila: mostrador (ámbar = lleva a otro sitio) y fama */
.beta-juego .bt-al-mostrador { display: grid; justify-items: center; }
.beta-juego .bt-fama { color: var(--k-tinta); }
.beta-juego .bt-estrella { display: inline-block; width: 16px; height: 16px; background: var(--k-g-estandarte) center / 16px 16px no-repeat; }
@media (max-height: 420px) {
  .beta-juego .bt-esc-cab { padding-top: 4px; grid-template-columns: auto minmax(120px, 260px); justify-content: center; align-items: center; gap: 10px; }
  .beta-juego .bt-esc-cab .k-rotulo-pliego { min-width: 0; margin: 0; }
  .beta-juego .bt-esc-pie { grid-template-columns: auto auto; justify-content: center; align-items: end; gap: 12px; padding-bottom: 6px; }
  .beta-juego .bt-esc-comp .k-heroe { width: 48px; height: 54px; }
  .beta-juego .bt-esc-comp .k-heroe > :is(img, canvas, svg, .portrait) { width: 34px; height: 34px; }
}
@media (max-width: 359px) { .beta-juego .bt-esc-comp { gap: 3px; } .beta-juego .bt-esc-comp .k-heroe { width: 52px; } }
/* Lonja en modo beta (js/ui.js · shopHtmlBeta): sin estantes de equipo; tres tiras sobre el pergamino de la ficha */
.k-lonja-beta { display: grid; gap: 10px; align-content: start; padding: 8px 10px 18px; }
.k-lonja-cab { display: flex; justify-content: center; align-items: center; gap: 12px; }
.k-lonja-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-auto-rows: max-content; }
.k-lonja-lista .k-tira > .k-btn { flex: none; }
.k-lonja-lista .k-tira .k-dato > small { color: var(--k-tinta2); }
/* ---- encaje: «Combatir» en la escena de Aventura (js/ui.js · adventureView en modo beta) ---- */
.advacts .beta-combatir { order: 3; align-self: center; min-width: 124px; }
.advacts .beta-combatir > span { pointer-events: none; }
.advacts .beta-combatir { pointer-events: auto; position: relative; }
/* confirmación de la entrega al mostrador: quien avisa es el personaje; la pieza y lo que cobra, unidas por una flecha */
.beta-juego .bt-aviso-mostrador { margin: 0; }
.beta-juego .bt-aviso-mostrador .k-globo p { text-align: left; }
.beta-juego .bt-flecha { width: 20px; height: 20px; background: var(--k-g-flecha) center / 20px 20px no-repeat; }
.beta-juego .bt-aviso-mostrador { width: 100%; max-width: 100%; box-sizing: border-box; }
.beta-juego .bt-aviso-mostrador .k-globo { min-width: 0; max-width: 100%; box-sizing: border-box; }
.beta-juego .bt-aviso-mostrador .k-globo p { overflow-wrap: anywhere; }
/* ---- Aventura apaisada y baja (690×320) en modo beta: cabecera en una línea y una sola fila abajo; la escena queda libre ---- */
@media (max-height: 420px) {
  html[data-beta-r35] .advhead .stage { display: none; }
  html[data-beta-r35] .advhead { gap: 2px 6px; padding-top: 4px; }
  html[data-beta-r35] .advhead .advtop h2 { font-size: 13px; }
  html[data-beta-r35] .advbot { flex-direction: row; align-items: flex-end; justify-content: center; gap: 6px; padding-top: 4px; padding-bottom: 4px; }
  html[data-beta-r35] .advbot > * { width: auto; margin: 0; }
  html[data-beta-r35] .advacts { display: contents; }
  html[data-beta-r35] .advbot .chest { order: 1; }
  html[data-beta-r35] .advbot .party { order: 2; }
  html[data-beta-r35] .advbot .fmbtn { order: 3; min-width: 48px; padding-inline: 8px; }
  html[data-beta-r35] .advbot .fmbtn > span { display: none; }
  html[data-beta-r35] .advbot .beta-combatir { order: 4; min-width: 104px; }
}
/* apaisado bajo: la escena de Aventura usa todo el ancho del teléfono tumbado (cabecera a las esquinas, combate al centro) */
@media (max-height: 420px) and (min-width: 600px) {
  html[data-beta-r35] .app:has(.advscene) { max-width: none; }
}

/* ---- bloque D · «Pruebas» (js/beta-pruebas.js): la pestaña Desafíos en modo beta. Una superficie; piezas del kit ---- */
.beta-pruebas { position: relative; box-sizing: border-box; display: flex; flex-direction: column; min-height: 100%; padding: 0; overflow: hidden; }
.beta-pruebas .k-cabecera { flex: none; }
.beta-pruebas .bp-intentos { flex: none; padding: 8px 10px 0; }
.beta-pruebas .bp-aviso { flex: none; margin: 0; padding: 4px 12px 0; font: 400 15px/1.1 var(--k-fuente); color: var(--k-rojo); text-align: center; }
.beta-pruebas .bp-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px 18px; display: grid; gap: 10px; align-content: start; }
.beta-pruebas .bp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-auto-rows: max-content; }
.beta-pruebas .k-tira { min-width: 0; } .beta-pruebas .k-tira > .k-btn { flex: none; }
.beta-pruebas .k-tira .k-dato > small { color: var(--k-tinta2); }
.beta-pruebas .k-coste > .ico, .beta-pruebas .k-casilla > .ico { display: inline-block; }
.beta-pruebas .bp-tinte { filter: hue-rotate(var(--bp-h, 0deg)) saturate(1.5); }
.beta-pruebas .bp-llaves { display: flex; align-items: center; justify-content: center; gap: 8px; }
.beta-pruebas .k-btn.doble { min-width: 84px; padding-inline: 14px; font-size: 18px; } .beta-pruebas .k-btn.doble .k-coste { font-size: 14px; }
.beta-pruebas .bp-velo { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; }
.beta-pruebas .bp-pliego { width: min(100%, 320px); display: grid; gap: 10px; justify-items: center; }
.beta-pruebas .bp-rival { margin: 0; font: 400 16px/1.15 var(--k-fuente); color: var(--k-tinta); text-align: center; }
.beta-pruebas .bp-opciones { display: grid; gap: 8px; width: 100%; }
.beta-pruebas .bp-opciones .k-btn { width: 100%; flex-direction: row; justify-content: space-between; min-height: 52px; padding-inline: 22px; }
.beta-pruebas .bp-premios { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.beta-pruebas .bp-premios .k-casilla { width: 60px; height: 60px; } .beta-pruebas .bp-premios .k-casilla > .ico { width: 36px; height: 36px; }
@media (max-height: 420px) { .beta-pruebas .bp-lista { grid-template-columns: 1fr 1fr; column-gap: 10px; } .beta-pruebas .k-cabecera { min-height: 46px; } }

/* durante una prueba la Aventura no enseña la ruta de campaña ni el cofre: sólo la puerta, la fase y la compañía */
.advscene[data-beta-prueba] .stage, .advscene[data-beta-prueba] .chest, .advscene[data-beta-prueba] #mapBtn, .advscene[data-beta-prueba] .fmbtn { visibility: hidden; }

/* ---- bloque E · «Pueblo»: familias en casillas, un edificio por fila con su nivel, y la ficha única en un pliego ---- */
.beta-juego .bt-familias { flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 359px) { .beta-juego .bt-familias { max-width: 196px; margin-inline: auto; } }   /* 4 + 3 en vez de 6 + 1 */   /* siete familias: en 320 px pasan a dos filas (cada casilla sigue en 44 px) */
.beta-juego .bt-familias .k-casilla > .ico { position: static; width: 24px; height: 24px; }
.beta-juego .bt-nivel > b { position: static; font-size: 20px; }
.beta-juego .bt-ficha { gap: 12px; }
.beta-juego .bt-efecto { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; color: var(--k-tinta); }
.beta-juego .bt-efecto .k-coste { font-size: 18px; gap: 4px; }
.beta-juego .bt-efecto .bt-sig { color: #2f7d3a; }
.beta-juego .bt-efecto .bt-reloj { display: inline-block; width: 14px; height: 14px; background: var(--k-g-reloj) center / 14px 14px no-repeat; margin-left: 6px; }
.beta-juego .bt-ficha .k-barra { width: 100%; }
.beta-juego .bt-aportes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.beta-juego .bt-aportes .k-btn { min-width: 86px; }
/* cinco pestañas: rótulos más prietos */
.beta-juego .bt-pestanas .k-pestana { font-size: 14px; padding-inline: 2px; }
@media (max-width: 359px) { .beta-juego .bt-pestanas .k-pestana { font-size: 12px; } }

/* ---- bloque F · «Mercado» (js/beta-mercado.js): misma superficie del Gremio; precio con − y + (sin campos de formulario) ---- */
.beta-mercado .bm-precio { display: flex; align-items: center; justify-content: center; gap: 10px; }
.beta-mercado .bm-precio .k-redondo { position: static; flex: none; }
.beta-mercado .bm-cifra .k-coste { font-size: 24px; color: var(--k-tinta); }
.beta-mercado .bm-banda { width: 100%; } .beta-mercado .bm-banda .k-barra { width: 100%; }
.beta-mercado .bm-neto .k-coste { font-size: 18px; color: var(--k-tinta2); }
.beta-mercado .bt-costes .bt-reloj, .beta-mercado .k-coste .bt-reloj { display: inline-block; width: 14px; height: 14px; background: var(--k-g-reloj) center / 14px 14px no-repeat; }
.beta-mercado .bt-familias .k-casilla > .ico { position: static; width: 24px; height: 24px; }
.beta-juego .bt-al-mostrador.bt-dos { display: flex; }

/* R35 · bloque G · kit del héroe en la ficha (beta): una lista sobre la misma superficie, sin cajas. */
.bt-kit { list-style: none; margin: 0 0 8px; padding: 0; display: grid; }
.bt-kit li { display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; align-items: center; padding: 6px 0; border-bottom: 2px solid rgba(58, 36, 18, .55); }
.bt-kit li:last-child { border-bottom: 0; }
.bt-kit i { grid-row: 1 / span 2; font: 400 18px/1 var(--k-fuente, inherit); font-style: normal; text-align: center; color: #ffe9b8; }
.bt-kit b { font: 400 17px/1.1 var(--k-fuente, inherit); color: #ffe9b8; }
.bt-kit span { font-size: .8125rem; line-height: 1.25; color: #d9c39a; }
.bt-kit li.cerrada b, .bt-kit li.cerrada span { opacity: .6; }
.bt-kit li.cerrada i { font-size: 14px; color: #c9a66c; }
.bt-kit li.epica.abierta i { color: #ffb347; }

/* R35 · bloque G · Taberna (beta): reutiliza la pantalla de Pruebas; sólo la llegada del héroe es propia. */
.beta-taberna .bv-figura { width: 132px; height: 132px; display: grid; place-items: center; }
.beta-taberna .bv-figura > * { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
@media (max-height: 420px) { .beta-taberna .bp-lista { grid-template-columns: minmax(0, 520px); justify-content: center; } }

/* R35 · bloque H · Arena (beta): la misma superficie de Pruebas. */
.beta-arena .ba-estado { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; }
.beta-arena .ba-estado .k-barra { flex: 0 1 120px; }
.beta-arena .k-cabecera .k-redondo.volver { margin-left: auto; }
.beta-arena .ba-bandos { display: grid; gap: 8px; justify-items: center; }
.beta-arena .ba-bando { display: flex; gap: 4px; justify-content: center; }
.beta-arena .ba-u { width: 44px; height: 44px; } .beta-arena .ba-u > * { width: 36px; height: 36px; image-rendering: pixelated; }
.beta-arena .ba-u.caido > * { opacity: .28; filter: grayscale(1); }
.beta-arena .ba-puestos { list-style: none; margin: 0; padding: 0; width: 100%; max-height: min(52vh, 360px); overflow-y: auto; display: grid; }
.beta-arena .ba-puestos li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 44px; gap: 6px; align-items: center; min-height: 30px; padding: 2px 4px; border-bottom: 2px solid rgba(90, 60, 30, .25); font: 400 16px/1.1 var(--k-fuente); color: var(--k-tinta); }
.beta-arena .ba-puestos li.yo { background: rgba(255, 190, 90, .35); }
.beta-arena .ba-puestos i { font-style: normal; text-align: right; color: var(--k-tinta2); } .beta-arena .ba-puestos b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta-arena .ba-puestos span { font-size: 13px; color: var(--k-tinta2); } .beta-arena .ba-puestos em { font-style: normal; text-align: right; }
.beta-arena .ba-canje .bp-lista { width: 100%; }
@media (max-height: 420px) { .beta-arena .ba-puestos { max-height: 38vh; } .beta-arena .ba-u { width: 38px; height: 38px; } .beta-arena .ba-u > * { width: 30px; height: 30px; } }

/* R35 · guía con personaje (REF-36…38): una frase corta, lo señalado iluminado, un toque para seguir. Sin paneles de texto. */
.bg-guia { position: fixed; inset: 0; z-index: 90; cursor: pointer; outline: 0; -webkit-tap-highlight-color: transparent; }
.bg-guia-velo { position: absolute; inset: 0; background: #0d0703b8; }
.bg-guia-foco { position: absolute; box-sizing: border-box; border-radius: 6px; box-shadow: 0 0 0 200vmax #0d0703c7, 0 0 0 3px #fff6dc inset; pointer-events: none; animation: bg-guia-late 1.1s steps(2, end) infinite; }
@keyframes bg-guia-late { 50% { box-shadow: 0 0 0 200vmax #0d0703c7, 0 0 0 3px #ffb347 inset; } }
.bg-guia-habla { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(94vw, 420px); pointer-events: none; }
.bg-guia.arriba .bg-guia-habla { bottom: auto; top: max(10px, env(safe-area-inset-top)); }
.bg-guia .k-personaje { width: min(40vw, 150px); margin-bottom: -34px; }
.bg-guia .k-globo { padding: 14px 40px 16px 16px; }
.bg-guia .k-globo p { margin: 0; font: 400 19px/1.15 var(--k-fuente); color: var(--k-tinta); }
.bg-guia-sigue { position: absolute; right: 14px; bottom: 12px; font: 400 14px/1 var(--k-fuente); font-style: normal; color: #a3481c; animation: bg-guia-pulso .8s steps(2, end) infinite; }
@keyframes bg-guia-pulso { 50% { opacity: .25; } }
@media (max-height: 420px) { .bg-guia .k-personaje { width: 96px; margin-bottom: -26px; } .bg-guia-habla { width: min(70vw, 420px); } .bg-guia .k-globo p { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .bg-guia-foco, .bg-guia-sigue { animation: none; } }

/* R35 · cartas (REF-39…50): rejilla de tres; cada carta es UN botón del kit (la misma tira de papel), sin cajas dentro. */
.k-cartas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.k-cartas > li { display: flex; min-width: 0; }
.k-carta { position: relative; box-sizing: border-box; flex: 1; min-width: 0; min-height: 138px; margin: 0; padding: 8px 4px 9px; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; align-content: start; row-gap: 4px;
  border: 0 solid transparent; border-image: var(--k-tira-normal) 4 fill / 8px / 0 stretch; border-radius: 0; background: none; box-shadow: none; color: var(--k-crema); font-family: var(--k-fuente); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.k-carta.lista { border-image-source: var(--k-tira-lista); }
.k-carta:active:not(:disabled) { transform: translateY(2px); }
.k-carta:focus-visible { outline: 4px solid #fff6dc; outline-offset: 2px; }
.k-carta:disabled { cursor: default; }
.k-carta.cerrada { border-image-source: var(--k-tira-hundida); }
.k-carta.cerrada > *, .k-carta:disabled:not(.en-curso):not(.cerrada) > .kc-pie { opacity: .5; }
.k-carta .kc-nivel { position: absolute; left: 4px; top: 4px; min-width: 22px; height: 22px; box-sizing: border-box; padding: 3px 4px 0; border-radius: 50%; background: #3b2412; box-shadow: 0 0 0 2px #c99a4a; font: 400 15px/1 var(--k-fuente); font-style: normal; text-align: center; color: #ffe9b8; }
.k-carta .kc-disco { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, #f3dca8 0 58%, #c79a57 60% 100%); }
.k-carta.cerrada .kc-disco { background: radial-gradient(circle at 50% 42%, #8d8474 0 58%, #5e564a 60% 100%); }
.k-carta .kc-disco > * { width: 40px; height: 40px; image-rendering: pixelated; }
.k-carta .kc-nombre { width: 100%; box-sizing: border-box; padding: 2px 3px 3px; background: #3b2412cc; font: 400 14px/1.05 var(--k-fuente); color: #ffe9b8; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.k-carta .kc-medio { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; width: 100%; min-width: 0; color: var(--k-tinta); }
.k-carta .kc-medio > small { font: 400 13px/1.05 var(--k-fuente); color: var(--k-rojo); text-align: center; }
.k-carta .kc-medio .k-coste { font-size: 14px; } .k-carta .kc-medio .k-coste.falta > b { color: var(--k-rojo); }
.k-carta .kc-medio .k-barra { width: 100%; }
.k-carta .kc-pie { display: inline-flex; align-items: center; gap: 4px; font: 400 15px/1 var(--k-fuente); color: #24513f; }
.k-carta .kc-pie .bt-reloj { display: inline-block; width: 12px; height: 12px; }
@media (max-width: 340px) { .k-cartas { gap: 5px; } .k-carta .kc-nombre { font-size: 13px; } .k-carta .kc-disco { width: 50px; height: 50px; } }
@media (max-height: 420px) { .k-cartas { grid-template-columns: repeat(6, minmax(0, 1fr)); } .k-carta { min-height: 124px; } }
/* Fragua: puestos como fila de casillas (antes, una tira por puesto) y pestañas de icono por tipo y familia */
.beta-juego .bt-puestos { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0; padding: 0; }
.beta-juego .bt-puesto { position: relative; padding: 0; cursor: default; } .beta-juego .bt-puesto.lista { cursor: pointer; }
.beta-juego .bt-puesto.libre { opacity: .55; }
.beta-juego .bt-puesto > .k-barra { position: absolute; left: 3px; right: 3px; bottom: -9px; min-width: 0; height: 12px; } .beta-juego .bt-puesto > .k-barra > em { font-size: 10px; }
.beta-juego .bt-puestos { padding-bottom: 8px; }
.beta-juego .bt-fams { gap: 4px; }
.k-carta .kc-pie .bt-reloj { background: var(--k-g-reloj) center / 12px 12px no-repeat; }
.k-carta.cerrada > * { opacity: 1; } .k-carta.cerrada { filter: saturate(.35); } .k-carta.cerrada .kc-nombre { color: #d8cdb6; } .k-carta.cerrada .kc-nivel { box-shadow: 0 0 0 2px #8d8474; }
.k-carta:disabled { opacity: 1; }
.beta-juego .bt-puesto:disabled { opacity: 1; filter: none; }
.beta-juego .bt-fams { flex-wrap: nowrap; justify-content: center; gap: 4px; padding-inline: 0; }
.beta-juego .bt-fams > .k-casilla { flex: 0 1 42px; width: auto; min-width: 30px; height: 42px; aspect-ratio: auto; } .beta-juego .bt-fams > .k-casilla > * { width: 26px; height: 26px; }
.k-carta .kc-disco.fino { background: radial-gradient(circle at 50% 42%, #cfe8c0 0 58%, #6ea05a 60% 100%); } .k-carta .kc-disco.notable { background: radial-gradient(circle at 50% 42%, #d9c8f0 0 58%, #8a64c0 60% 100%); } .k-carta .kc-disco.excelente { background: radial-gradient(circle at 50% 42%, #ffe9a8 0 58%, #e0a330 60% 100%); }
.k-carta .kc-pie .k-coste { font-size: 16px; color: #24513f; } .k-carta .kc-pie .k-coste.falta > b { color: var(--k-rojo); }
.beta-juego .bt-fams { flex-wrap: wrap; gap: 2px; } .beta-juego .bt-fams > .k-casilla { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; }
/* guía: recuadro con el nombre de quien habla sobre el pergamino (REF-06/07/35); el pergamino ocupa una franja pequeña */
.bg-guia .k-globo { padding-top: 22px; } .bg-guia .k-globo > .k-nombre { display: block; margin: 0; letter-spacing: 0; text-transform: none; }
.bg-guia .k-globo::before { display: none; }
.bg-guia .k-globo > .k-nombre { color: #ffe9b8; }

/* R35 · bloque I-2 · Guerra en tiempo real (beta): MAPA de rejilla 5 × 9 con tu Cuartel abajo (a la izquierda en apaisado),
   barra de mando debajo y botones flotantes (liga, evento, investigación). Terreno y edificios por código (ARTE-R35-16). */
.beta-guerra .bg-estado { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 4px 8px; } .beta-guerra .bg-estado .bg-marcador { margin-left: auto; } .beta-guerra .bg-estado .bg-queda { margin-left: auto; white-space: nowrap; }
.beta-guerra .bg-marcador { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; } .beta-guerra .bg-marcador i { font-style: normal; font-size: 15px; color: var(--k-tinta); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta-guerra .bg-marcador .propio { color: #1f6b4f; } .beta-guerra .bg-marcador .rival { color: #7a3fa8; }
.beta-guerra .bg-liga li { grid-template-columns: 28px minmax(0, 1fr) auto 44px; }
.beta-guerra.en-campo { height: 100%; min-height: 0; }
.beta-guerra.en-campo .bp-cuerpo { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.beta-guerra.en-campo .bg-estado { margin: 0; padding: 4px 8px; }
.beta-guerra .bg-mapa { position: relative; display: flex; flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden; background: #5d9150; }
.beta-guerra .bg-vista { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; } .beta-guerra .bg-vista::-webkit-scrollbar { display: none; }
.beta-guerra .bg-terreno { --bg-lado: 64px; position: relative; display: grid; grid-template-columns: repeat(var(--bg-cols), minmax(var(--bg-lado), 1fr)); grid-template-rows: repeat(var(--bg-filas), minmax(var(--bg-lado), 1fr)); min-width: 100%; min-height: 100%; max-width: calc(var(--bg-cols) * 110px); margin: 0 auto; box-sizing: border-box;
  background: linear-gradient(#4f8245 0 0) 0 0 / 100% 100%, #5d9150; background-image: repeating-conic-gradient(#5d9150 0 25%, #588b4c 0 50%); background-size: 32px 32px; }
.beta-guerra .bg-terreno > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.beta-guerra .bg-parcela { position: relative; display: grid; place-items: center; min-width: 0; padding: 0; border: 0; background: none; cursor: default; -webkit-tap-highlight-color: transparent; box-shadow: inset 0 0 0 1px #3e6a3640; }
.beta-guerra .bg-parcela.mia.unida { background: #2f9e8f55; box-shadow: inset 0 0 0 2px #1f6b6290; } .beta-guerra .bg-parcela.mia:not(.unida) { background: #2f9e8f22; }
.beta-guerra .bg-parcela.suya { background: #8a4fc04d; box-shadow: inset 0 0 0 2px #5d328590; }
.beta-guerra .bg-parcela .bg-edif { width: min(52px, 84%); height: auto; aspect-ratio: 1; image-rendering: pixelated; shape-rendering: crispEdges; filter: drop-shadow(0 3px 0 #0005); pointer-events: none; }
.beta-guerra .bg-parcela.cuartel .bg-edif, .beta-guerra .bg-parcela.central .bg-edif { width: min(60px, 96%); }
.beta-guerra .bg-parcela.obra .bg-edif { opacity: .85; } .beta-guerra .bg-parcela.dormida .bg-edif { opacity: .5; filter: grayscale(1); }
.beta-guerra .bg-parcela.puede { cursor: pointer; }
.beta-guerra .bg-parcela.puede-construir::before { content: ''; width: 22px; height: 22px; background: linear-gradient(#fff6dc, #fff6dc) 50% 50% / 100% 6px no-repeat, linear-gradient(#fff6dc, #fff6dc) 50% 50% / 6px 100% no-repeat; opacity: .8; filter: drop-shadow(0 2px 0 #2f5a2a); animation: bg-puede 1.2s steps(2, end) infinite; }
.beta-guerra .bg-parcela.puede-atacar .bg-edif { animation: bg-puede 1.2s steps(2, end) infinite; }
@keyframes bg-puede { 50% { opacity: .45; } }
.beta-guerra .bg-parcela.activa { outline: 4px solid #ff7a3d; outline-offset: -4px; }
.beta-guerra .bg-parcela:focus-visible { outline: 4px solid #fff6dc; outline-offset: -4px; }
.beta-guerra .bg-reloj { font: 400 13px/1 var(--k-fuente); color: #ffe9b8; background: #3b2412; padding: 3px 4px 2px; box-shadow: 0 0 0 2px #1f1208; white-space: nowrap; font-variant-numeric: tabular-nums; }
.beta-guerra .bg-parcela .bg-reloj { position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); z-index: 1; pointer-events: none; }
.beta-guerra .bg-parcela .bg-reloj.escudo { background: #1f5f8a; box-shadow: 0 0 0 2px #0e324a; } .beta-guerra .bg-parcela .bg-reloj.toma { background: #c2501f; box-shadow: 0 0 0 2px #5c2208; }
.beta-guerra .bg-parcela .bg-reloj.duerme { background: #55504a; box-shadow: 0 0 0 2px #2b2824; color: #d8d0c0; }
.beta-guerra .bg-guar, .beta-guerra .bg-rally, .beta-guerra .bg-nivel { position: absolute; min-width: 20px; height: 18px; box-sizing: border-box; padding: 3px 4px 0; font: 400 13px/1 var(--k-fuente); color: #ffe9b8; background: #1f6b62; box-shadow: 0 0 0 2px #0d3a35; pointer-events: none; }
.beta-guerra .bg-guar { right: 2px; top: 2px; } .beta-guerra .bg-guar.rival { right: auto; left: 2px; background: #5d3285; box-shadow: 0 0 0 2px #2f1848; }
.beta-guerra .bg-rally { left: 2px; top: 2px; background: #c2501f; box-shadow: 0 0 0 2px #5c2208; }
.beta-guerra .bg-nivel { right: 2px; top: 2px; background: #7a1f1f; box-shadow: 0 0 0 2px #3a0c0c; }
.beta-guerra .bg-aqui { position: absolute; left: 50%; top: 0; width: 14px; height: 12px; margin-left: -7px; background: #ffe9b8; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 2px 0 #3b2412); pointer-events: none; }
.beta-guerra .bg-marcha { fill: none; stroke: #fff6dc; stroke-width: 3px; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; opacity: .85; animation: bg-marcha .9s linear infinite; }
.beta-guerra .bg-marcha.rival { stroke: #d9a6ff; } .beta-guerra .bg-marcha.atacar, .beta-guerra .bg-marcha.rally { stroke: #ff7a3d; } .beta-guerra .bg-marcha.vuelve { stroke: #cfe8c4; opacity: .55; } .beta-guerra .bg-marcha.mia { stroke-width: 5px; }
@keyframes bg-marcha { to { stroke-dashoffset: -12; } }
.beta-guerra .bg-ficha { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; box-sizing: border-box; background: #2f9e8f; box-shadow: 0 0 0 2px #0d3a35, 0 3px 0 2px #0004; display: grid; place-items: center; pointer-events: none; z-index: 2; }
.beta-guerra .bg-ficha.rival { background: #8a4fc0; box-shadow: 0 0 0 2px #2f1848, 0 3px 0 2px #0004; } .beta-guerra .bg-ficha.vuelve { opacity: .7; } .beta-guerra .bg-ficha.mia { box-shadow: 0 0 0 2px #fff6dc, 0 3px 0 2px #0004; }
.beta-guerra .bg-ficha b { font: 400 12px/1 var(--k-fuente); color: #fff6dc; } .beta-guerra .bg-ficha .bg-reloj { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); }
.beta-guerra .bg-hud { position: relative; flex: none; width: 46px; height: 46px; padding: 0; cursor: pointer; } .beta-guerra .bg-hud.toca { animation: bg-puede 1s steps(2, end) infinite; }
.beta-guerra .bg-mando { flex: none; box-sizing: border-box; min-height: 68px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 10px; background: #3b2412; color: #ffe9b8; font: 400 17px/1.1 var(--k-fuente); border-top: 4px solid #1f1208; }
.beta-guerra .bg-mando.quieta b { font-weight: 400; } .beta-guerra .bg-mando .k-coste { color: #ffe9b8; }
.beta-guerra .bg-mando .bg-paso { display: inline-flex; align-items: center; gap: 6px; } .beta-guerra .bg-mando output { min-width: 30px; text-align: center; font: 400 20px/1 var(--k-fuente); color: #ffe9b8; }
.beta-guerra .bg-mando .bg-ordenes { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.beta-guerra .bg-fila-rally { display: inline-flex; align-items: center; gap: 8px; }
.beta-guerra .bg-mando > .bg-reloj, .beta-guerra .bg-fila-rally .bg-reloj, .beta-guerra .bg-lineas .bg-reloj { font-size: 16px; padding: 4px 6px 3px; background: #1f1208; }
.beta-guerra .bg-fama { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font: 400 22px/1 var(--k-fuente); color: var(--k-tinta); } .beta-guerra .bg-fama .ico { width: 24px; height: 24px; } .beta-guerra .bg-fama span { font-size: 14px; color: #a3481c; }
.beta-guerra .bg-hitos { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; justify-content: center; } .beta-guerra .bg-hitos li { display: grid; gap: 4px; justify-items: center; } .beta-guerra .bg-hitos i { font: 400 14px/1 var(--k-fuente); font-style: normal; color: var(--k-tinta2); } .beta-guerra .bg-hitos .cobrado { opacity: .55; }
.beta-guerra .bg-fondo { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; font-size: 18px; }
@media (max-width: 340px) { .beta-guerra .bg-estado { gap: 4px; padding-left: 4px; padding-right: 4px; } .beta-guerra .bg-hud { width: 44px; height: 44px; } .beta-guerra .bg-marcador { font-size: 15px; gap: 3px; } .beta-guerra .bg-marcador i { font-size: 13px; max-width: 64px; } .beta-guerra .bg-estado .bg-queda { font-size: 13px; } .beta-guerra .bg-terreno { --bg-lado: 58px; } .beta-guerra .bg-mando { gap: 6px 8px; padding: 6px; } }
/* apaisado bajo: el estado sube a la cabecera (sin rótulo) y el mapa queda a la izquierda con toda la altura; el mando, a la derecha */
@media (max-height: 420px) { .beta-guerra.en-campo { display: grid; grid-template-columns: minmax(0, 1fr) 236px; grid-template-rows: auto minmax(0, 1fr); } .beta-guerra.en-campo > .k-cabecera, .beta-guerra.en-campo > .bp-aviso { grid-column: 1 / -1; }
  .beta-guerra.en-campo > .k-cabecera { grid-row: 1; min-height: 56px; } .beta-guerra.en-campo > .k-cabecera .k-titulo { display: none; }
  .beta-guerra.en-campo > .bg-estado { grid-column: 1 / -1; grid-row: 1; z-index: 1; align-self: center; justify-self: center; margin: 0 64px; padding: 0; background: none; }
  .beta-guerra.en-campo > .bg-estado .bg-marcador, .beta-guerra.en-campo > .bg-estado .bg-queda { margin-left: 8px; } .beta-guerra.en-campo > .bg-estado .bg-marcador i { color: #ffe9b8; } .beta-guerra.en-campo > .bg-estado .bg-marcador .propio { color: #8ff0d0; } .beta-guerra.en-campo > .bg-estado .bg-marcador .rival { color: #dcb0ff; }
  .beta-guerra.en-campo .bp-cuerpo { display: contents; } .beta-guerra.en-campo .bg-mapa { grid-column: 1; grid-row: 2; width: auto; min-width: 0; }
  .beta-guerra .bg-terreno { --bg-lado: 50px; grid-template-columns: repeat(var(--bg-cols), minmax(44px, 1fr)); }
  .beta-guerra .bg-mando { grid-column: 2; grid-row: 2; min-height: 0; flex-wrap: wrap; align-content: center; gap: 4px 6px; padding: 4px 6px; border-top: 0; border-left: 4px solid #1f1208; overflow: hidden auto; }
  .beta-guerra .bp-pliego.bg-inv { width: min(100%, 640px); gap: 4px 12px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "arbol fondo" "arbol ramas" "arbol tarjeta" "arbol volver"; align-items: center; } .beta-guerra .bg-inv .k-rotulo-pliego { display: none; }
  .beta-guerra .bg-inv .bg-arbol { grid-area: arbol; --bg-alto: 78px; } .beta-guerra .bg-inv .bg-fondo { grid-area: fondo; } .beta-guerra .bg-inv .bg-ramas { grid-area: ramas; } .beta-guerra .bg-inv .bg-tarjeta { grid-area: tarjeta; min-height: 0; } .beta-guerra .bg-inv > .k-btn { grid-area: volver; justify-self: center; }
  .beta-guerra .bp-velo { position: fixed; inset: 0; z-index: 80; padding: 4px; } }
@media (prefers-reduced-motion: reduce) { .beta-guerra .bg-marcha, .beta-guerra .bg-parcela.puede-construir::before, .beta-guerra .bg-parcela.puede-atacar .bg-edif, .beta-guerra .bg-hud.toca { animation: none; } }
/* R35 · historia en formato PEQUEÑO (orden del usuario del 11 nov, REF-06, 07, 35…38): el texto va sobre el juego, con el recuadro
   de quien habla y un pergamino que ocupa una parte pequeña de la pantalla. Un toque pasa a la siguiente intervención.
   Es el lector de siempre (js/lector.js · opts.chico) sin viñeta, sin página y sin boceto. */
.visual-r34 dialog#modal.lector-chico { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: min(100vw, 480px); max-width: 100vw; max-height: 62svh; box-sizing: border-box; padding: 0 10px max(10px, env(safe-area-inset-bottom)); border: 0; border-image: none; background: none; box-shadow: none; overflow: visible; text-align: left; }
.visual-r34 #modal.lector-chico::backdrop { background: #0d070373; }
#modal.lector-chico #modalBody { padding: 0; overflow: visible; }
#modal.lector-chico .lc { gap: 0; }
#modal.lector-chico .lc-barra { justify-content: flex-end; min-height: 0; } #modal.lector-chico .lc-eyebrow, #modal.lector-chico [data-lc-pagina], #modal.lector-chico [data-lc-lineal], #modal.lector-chico .lc-pagina { display: none !important; }
#modal.lector-chico .lc-marco { width: 100%; border: 0; border-radius: 0; background: none !important; overflow: visible; aspect-ratio: auto !important; }
#modal.lector-chico .lc-arte, #modal.lector-chico .lc-colas { display: none !important; }
#modal.lector-chico .lc-capa { position: static; display: flex; flex-direction: column; gap: 22px; margin-top: 18px; pointer-events: auto; cursor: pointer; }
#modal.lector-chico .lc-bocadillo, #modal.lector-chico .lc-documento { position: relative; left: auto !important; top: auto !important; right: auto; bottom: auto; width: auto !important; max-width: none; box-sizing: border-box; min-height: 86px; padding: 22px 18px 18px 88px; border: 0 solid transparent; border-image: var(--k-bocadillo) 7 7 9 7 fill / 14px 14px 18px 14px / 0 stretch; border-radius: 0; background: none; box-shadow: none; align-items: center; }
#modal.lector-chico .lc-bocadillo p, #modal.lector-chico .lc-documento p { margin: 0; font: 400 18px/1.2 var(--k-fuente); color: var(--k-tinta); font-style: normal; }
#modal.lector-chico .lc-retrato { display: block; position: absolute; left: 12px; bottom: 12px; width: 64px; height: 64px; } #modal.lector-chico .lc-retrato .frame { width: 64px; height: 64px; }
#modal.lector-chico .lc-quien { position: absolute; left: 12px; top: -18px; margin: 0; padding: 5px 20px 9px; min-height: 34px; box-sizing: border-box; border: 0 solid transparent; border-image: var(--k-btn-madera) 8 12 11 12 fill / 16px 24px 22px 24px / 0 stretch; --k-c: #24130a; font: 400 14px/1 var(--k-fuente); letter-spacing: 0; text-transform: none; color: #ffe9b8; text-shadow: var(--k-contorno-fino); white-space: nowrap; }
#modal.lector-chico .lc-quien .npc-historia { display: none; }
#modal.lector-chico .lc-bocadillo.tipo-cartela, #modal.lector-chico .lc-documento { min-height: 0; padding: 14px 18px 16px; } #modal.lector-chico .lc-bocadillo.tipo-cartela p { font-style: italic; color: var(--k-tinta2); }
#modal.lector-chico .lc-bocadillo.tipo-primera, #modal.lector-chico .lc-bocadillo.tipo-pensamiento, #modal.lector-chico .lc-bocadillo.tipo-fuera { border-width: 0; padding-left: 18px; }
#modal.lector-chico .lc-estado { min-height: 0; margin: 4px 0 0; text-align: center; color: #ffe9b8; text-shadow: var(--k-contorno-fino); --k-c: #24130a; }
#modal.lector-chico .lc-pie:empty { display: none; }
.visual-r34 #modal.lector-chico .modalbuttons { justify-content: flex-end; padding-top: 6px; gap: 8px; }
@media (max-height: 420px) { .visual-r34 dialog#modal.lector-chico { width: min(100vw, 560px); max-height: 92svh; } #modal.lector-chico .lc-bocadillo { min-height: 72px; padding: 18px 14px 14px 80px; } #modal.lector-chico .lc-bocadillo p { font-size: 16px; } #modal.lector-chico .lc-capa { gap: 18px; margin-top: 14px; } }
/* R35 · bloque L · Eventos (beta): filas del kit; hitos como casillas en un pliego pequeño. */
.beta-eventos .be-lista .k-dato small { display: block; }
.beta-eventos .be-hitos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .beta-eventos .be-hitos li { display: grid; grid-auto-flow: row; gap: 4px; justify-items: center; }
.beta-eventos .be-hitos i { font: 400 14px/1 var(--k-fuente); font-style: normal; color: var(--k-tinta2); } .beta-eventos .be-hitos .cobrado { opacity: .55; }
.beta-eventos .be-top li { grid-template-columns: 28px minmax(0, 1fr) 56px; }
/* m125 · evento de alianza: suma de la plantilla y lo que ingresa en el Banco (casillas azules = va al Banco, no a ti) */
.beta-eventos .be-filas { display: grid; gap: 8px; } .beta-eventos .be-banco .be-al i { color: var(--k-tinta); }
@media (max-height: 420px) { .beta-eventos .be-filas { grid-auto-flow: column; justify-content: center; gap: 20px; } }
.beta-eventos .be-pliego { max-height: 100%; overflow: hidden auto; }
@media (max-height: 420px) { .beta-eventos .bp-cuerpo, .beta-eventos .bp-lista { grid-template-columns: minmax(0, 1fr); } .beta-eventos .bp-velo { position: fixed; inset: 0; z-index: 80; padding: 4px; } .beta-eventos .be-pliego { gap: 6px; width: min(100%, 520px); } .beta-eventos .be-pliego .k-rotulo-pliego { display: none; } }
/* Árbol de investigación de alianza: ramas en pestañas, nodos colocados en su sitio con líneas de requisito y tarjeta del nodo. */
.beta-guerra .bp-pliego.bg-inv { width: min(100%, 400px); max-height: 100%; overflow: hidden auto; gap: 8px; }
.beta-guerra .bg-fondo { flex-wrap: wrap; gap: 6px 10px; font-size: 16px; }
.beta-guerra .bg-ramas { display: flex; justify-content: center; gap: 8px; } .beta-guerra .bg-ramas .k-casilla { width: 46px; height: 46px; cursor: pointer; }
.beta-guerra .bg-arbol { --bg-alto: 92px; position: relative; width: 100%; height: calc(var(--bg-filas) * var(--bg-alto)); }
.beta-guerra .bg-arbol > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.beta-guerra .bg-arbol line { stroke: #8a6d3b; stroke-width: 3px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; } .beta-guerra .bg-arbol line.ok { stroke: #1f6b62; stroke-dasharray: none; }
.beta-guerra .bg-nodo-inv { position: absolute; width: 56px; height: 56px; margin: -36px 0 0 -28px; padding: 0; display: grid; place-items: center; cursor: pointer; }
.beta-guerra .bg-nodo-inv > b { position: static; font: 400 15px/1 var(--k-fuente); }
.beta-guerra .bg-nodo-inv > small { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); font: 400 12px/1 var(--k-fuente); color: var(--k-tinta); white-space: nowrap; text-shadow: none; }
.beta-guerra .bg-nodo-inv.cerrado { opacity: .75; } .beta-guerra .bg-nodo-inv.activa { outline: 3px solid #ff7a3d; outline-offset: 1px; }
.beta-guerra .bg-aro { position: absolute; left: 5px; right: 5px; bottom: 4px; height: 5px; background: linear-gradient(to right, #7fe0d0 var(--p), #0007 0); }
.beta-guerra .bg-rec { position: absolute; right: -6px; top: -6px; width: 16px; height: 16px; background: #ffd24a; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); filter: drop-shadow(0 1px 0 #5c3b12); }
.beta-guerra .bg-nodo-inv .bg-reloj { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); font-size: 12px; z-index: 1; }
.beta-guerra .bg-tarjeta { margin: 0; width: 100%; min-height: 104px; display: grid; gap: 6px; justify-items: center; align-content: center; font: 400 17px/1.1 var(--k-fuente); color: var(--k-tinta); }
.beta-guerra .bg-tarjeta.quieta { color: var(--k-tinta2); }
.beta-guerra .bg-efecto { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; font-size: 14px; } .beta-guerra .bg-efecto b { font-weight: 400; } .beta-guerra .bg-efecto .sig { color: #1f6b4f; }
.beta-guerra .bg-efecto i { width: 0; height: 0; border: 5px solid transparent; border-left: 8px solid #a3481c; border-right: 0; }
.beta-guerra .bg-reqs { display: inline-flex; gap: 10px; font-size: 14px; }
.beta-guerra .bg-tarjeta .bg-ordenes { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.beta-guerra .bg-aportes li { grid-template-columns: 28px minmax(0, 1fr) 64px; }
@media (max-height: 700px) and (min-height: 421px) { .beta-guerra .bg-arbol { --bg-alto: 80px; } .beta-guerra .bp-pliego.bg-inv { gap: 5px; } .beta-guerra .bg-inv .k-rotulo-pliego { display: none; } .beta-guerra .bg-tarjeta { min-height: 92px; gap: 4px; } }
.beta-guerra .bg-ramas .bg-ver-aportes { margin-left: 10px; }
.beta-guerra .bg-inv .bg-fondo { flex-wrap: nowrap; white-space: nowrap; font-size: 15px; }
@media (max-height: 700px) and (min-height: 421px) { .beta-guerra .bg-arbol { --bg-alto: 74px; } .beta-guerra .bg-nodo-inv { width: 50px; height: 50px; margin: -34px 0 0 -25px; } .beta-guerra .bg-tarjeta { min-height: 84px; } .beta-guerra .bp-pliego.bg-inv { gap: 4px; } }
@media (max-height: 420px) { .beta-guerra .bp-pliego.bg-inv { width: min(100%, 640px); max-height: 100%; gap: 2px 14px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "arbol fondo" "arbol ramas" "arbol tarjeta" "arbol volver"; align-items: center; justify-items: center; overflow: hidden; }
  .beta-guerra .bg-inv .bg-arbol { grid-area: arbol; --bg-alto: 96px; align-self: center; } .beta-guerra .bg-inv .bg-fondo { grid-area: fondo; margin: 0; } .beta-guerra .bg-inv .bg-ramas { grid-area: ramas; gap: 6px; } .beta-guerra .bg-inv .bg-ramas .k-casilla { width: 44px; height: 44px; }
  .beta-guerra .bg-inv .bg-tarjeta { grid-area: tarjeta; min-height: 0; gap: 3px; font-size: 15px; } .beta-guerra .bg-inv .bg-efecto { font-size: 13px; } .beta-guerra .bg-inv > .k-btn { grid-area: volver; } }
/* Mapa de guerra, segunda pasada (PLAN §7; propuesta §4): terreno por zonas, borde continuo de territorio, caminos, edificios
   más grandes, lejanía atenuada, barra de puntos y última actividad. Todo por código (ARTE-R35-16). */
.beta-guerra .bg-terreno { background-image: none; background-color: #5d9150; }
.beta-guerra .bg-parcela { box-shadow: none; background-image: repeating-conic-gradient(#0000 0 25%, #0000000d 0 50%); background-size: 32px 32px; }
.beta-guerra .bg-parcela.z-casa { background-color: #6aa35a; } .beta-guerra .bg-parcela.z-medio { background-color: #8c9a55; } .beta-guerra .bg-parcela.z-lejana { background-color: #5f8f63; }
.beta-guerra .bg-parcela.mia.unida { background-color: #3fae9c; box-shadow: none; } .beta-guerra .bg-parcela.suya.unida { background-color: #9a6bc4; box-shadow: none; }
.beta-guerra .bg-parcela.mia:not(.unida), .beta-guerra .bg-parcela.suya:not(.unida) { background-color: #8f8778; }
.beta-guerra .bg-parcela.aislada .bg-edif { filter: grayscale(.8) drop-shadow(0 3px 0 #0005); }
.beta-guerra .bg-parcela.b-n { border-top: 4px solid #0d3a35; } .beta-guerra .bg-parcela.b-s { border-bottom: 4px solid #0d3a35; } .beta-guerra .bg-parcela.b-o { border-left: 4px solid #0d3a35; } .beta-guerra .bg-parcela.b-e { border-right: 4px solid #0d3a35; }
.beta-guerra .bg-parcela.suya.b-n, .beta-guerra .bg-parcela.suya.b-s, .beta-guerra .bg-parcela.suya.b-o, .beta-guerra .bg-parcela.suya.b-e { border-color: #2f1848; }
.beta-guerra .bg-parcela.lejos { filter: saturate(.7) brightness(.9); }
.beta-guerra .bg-parcela.arbol::after, .beta-guerra .bg-parcela.arbol2::after { content: ''; width: 16px; height: 22px; background: linear-gradient(#2f6a3a, #2f6a3a) 3px 0 / 10px 13px no-repeat, linear-gradient(#245730, #245730) 0 5px / 16px 8px no-repeat, linear-gradient(#5a3d22, #5a3d22) 7px 13px / 2px 9px no-repeat; opacity: .85; pointer-events: none; }
.beta-guerra .bg-parcela.arbol2::after { transform: translate(-14px, 8px); box-shadow: none; }
.beta-guerra .bg-parcela.roca::after { content: ''; width: 18px; height: 12px; background: linear-gradient(#8d8676, #8d8676) 2px 0 / 12px 4px no-repeat, linear-gradient(#77705f, #77705f) 0 4px / 18px 8px no-repeat; opacity: .85; pointer-events: none; }
.beta-guerra .bg-parcela .bg-edif { width: min(58px, 90%); } .beta-guerra .bg-parcela.cuartel .bg-edif, .beta-guerra .bg-parcela.central .bg-edif { width: min(66px, 100%); }
.beta-guerra .bg-camino { stroke: #d9c28a; stroke-width: 8px; stroke-linecap: square; vector-effect: non-scaling-stroke; opacity: .75; } .beta-guerra .bg-camino.rival { stroke: #cdb7e6; }
.beta-guerra .bg-marcador { position: relative; padding-bottom: 7px; } .beta-guerra .bg-pulso { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: #7a3fa8; text-decoration: none; box-shadow: 0 0 0 1px #3b2412; } .beta-guerra .bg-pulso s { display: block; height: 100%; background: #2f9e8f; }
.beta-guerra .bg-actividad { flex: none; margin: 0; padding: 3px 10px 2px; display: flex; justify-content: center; align-items: baseline; gap: 8px; background: #1f1208; color: #ffe9b8; font: 400 14px/1.1 var(--k-fuente); } .beta-guerra .bg-actividad b { font-weight: 400; } .beta-guerra .bg-actividad.rival b { color: #dcb0ff; } .beta-guerra .bg-actividad small { font-size: 12px; opacity: .75; }
@media (max-height: 420px) { .beta-guerra .bg-actividad { display: none; } .beta-guerra .bg-parcela .bg-edif { width: min(44px, 88%); } .beta-guerra .bg-parcela.cuartel .bg-edif, .beta-guerra .bg-parcela.central .bg-edif { width: min(48px, 96%); } }
.beta-guerra .bg-avance { display: inline-flex; align-items: center; gap: 8px; } .beta-guerra .bg-horas { font-size: 14px; }
.beta-guerra .bg-nodo-inv > small { font-size: 11px; }
@media (max-height: 700px) and (min-height: 421px) { .beta-guerra .bg-arbol { --bg-alto: 66px; } .beta-guerra .bg-nodo-inv { width: 46px; height: 46px; margin: -31px 0 0 -23px; } .beta-guerra .bg-tarjeta { min-height: 78px; gap: 3px; font-size: 15px; } .beta-guerra .bg-ramas .k-casilla { width: 44px; height: 44px; } }
@media (max-height: 420px) { .beta-guerra .bg-inv .bg-arbol { --bg-alto: 84px; } .beta-guerra .bg-inv .bg-tarjeta .bg-ordenes { gap: 4px 6px; } .beta-guerra .bp-pliego.bg-inv { padding-bottom: 6px; } }
@media (max-width: 340px) { .beta-guerra .bg-arbol { --bg-alto: 58px; } .beta-guerra .bg-nodo-inv { width: 44px; height: 44px; margin: -30px 0 0 -22px; } .beta-guerra .bg-nodo-inv > small { font-size: 10px; top: calc(100% + 1px); } .beta-guerra .bg-tarjeta { min-height: 0; gap: 2px; } .beta-guerra .bg-tarjeta .bg-ordenes { gap: 4px 6px; } .beta-guerra .bp-pliego.bg-inv { gap: 3px; padding-top: 10px; padding-bottom: 10px; } .beta-guerra .bg-efecto { font-size: 13px; } }
/* R35 · bloque M · Estudio (investigación personal) en el Pueblo: escalones en pestañas, rombo de nodos con líneas y tarjeta. */
.beta-juego .bt-escalones { display: flex; justify-content: center; gap: 8px; } .beta-juego .bt-escalones .k-casilla { display: grid; place-items: center; cursor: pointer; } .beta-juego .bt-escalones .k-casilla b { position: static; font: 400 16px/1 var(--k-fuente); }
.beta-juego .bt-arbol { position: relative; width: min(100%, 360px); height: 370px; margin: 0 auto; }
.beta-juego .bt-arbol > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.beta-juego .bt-arbol line { stroke: #8a6d3b; stroke-width: 3px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; } .beta-juego .bt-arbol line.ok { stroke: #1f6b62; stroke-dasharray: none; }
.beta-juego .bt-nodo { position: absolute; width: 52px; height: 52px; margin: -34px 0 0 -26px; padding: 0; display: grid; place-items: center; cursor: pointer; }
.beta-juego .bt-nodo > b { position: static; font: 400 15px/1 var(--k-fuente); } .beta-juego .bt-nodo > small { position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%); font: 400 11px/1 var(--k-fuente); color: var(--k-tinta); white-space: nowrap; text-shadow: none; }
.beta-juego .bt-nodo.cerrado { opacity: .75; } .beta-juego .bt-nodo.activa { outline: 3px solid #ff7a3d; outline-offset: 1px; }
.beta-juego .bt-tarjeta { margin: 0; min-height: 132px; display: grid; gap: 6px; justify-items: center; align-content: center; font: 400 17px/1.1 var(--k-fuente); color: var(--k-tinta); } .beta-juego .bt-tarjeta.quieta { color: var(--k-tinta2); min-height: 60px; }
/* (sólo la tarjeta del Estudio: fuera de ella, .bt-efecto es la fila de efecto de la ficha de edificio, con sus iconos) */
.beta-juego .bt-tarjeta .bt-efecto { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; font-size: 14px; } .beta-juego .bt-tarjeta .bt-efecto b { font-weight: 400; } .beta-juego .bt-tarjeta .bt-efecto .sig { color: #1f6b4f; }
.beta-juego .bt-tarjeta .bt-efecto i { width: 0; height: 0; border: 5px solid transparent; border-left: 8px solid #a3481c; border-right: 0; }
.beta-juego .bt-ficha .bt-efecto .k-coste > .ico { width: 20px; height: 20px; }
.beta-juego .bt-ficha .bt-costes { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.beta-juego .bt-tarjeta .bt-costes { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; } .beta-juego .bt-reqs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: 14px; }
@media (max-height: 700px) { .beta-juego .bt-arbol { height: 300px; } .beta-juego .bt-nodo { width: 46px; height: 46px; margin: -31px 0 0 -23px; } .beta-juego .bt-tarjeta { min-height: 112px; gap: 4px; } }
@media (max-height: 420px) { .beta-juego .bt-arbol { height: 250px; } }
.beta-juego .bt-arbol { margin-bottom: 18px; }

/* ---- m61 · tropas por clase y tier: ficha del tipo con sus cifras y una acción por fila; ramas del Estudio ---- */
.beta-juego .bt-clases { margin-top: 6px; }
.beta-juego .bt-ramas { margin-bottom: 6px; } .beta-juego .bt-ramas .k-casilla > .ico { position: static; width: 24px; height: 24px; }
.beta-juego .bt-cifras { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 4px 16px; color: var(--k-tinta); }
.beta-juego .bt-cifras > span { display: grid; justify-items: center; } .beta-juego .bt-cifras small { font: 400 13px/1.1 var(--k-fuente); color: var(--k-tinta2); } .beta-juego .bt-cifras b { font: 400 20px/1.1 var(--k-fuente); }
.beta-juego .bt-accion { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; width: 100%; } .beta-juego .bt-accion .bt-costes { justify-content: flex-start; }
.beta-juego .bt-accion .k-btn { min-width: 132px; }
/* Estudio: ramas y escalón en UNA fila; el árbol de tropas ocupa sólo las filas que tiene (una por tier a la vista) */
.beta-juego .bt-fila-estudio { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 20px; margin-top: 4px; } .beta-juego .bt-fila-estudio .bt-ramas { margin: 0; }
.beta-juego .bt-arbol.corto { height: calc(var(--filas) * 84px + 8px); margin-top: 14px; }

/* ---- m64 · habilidades con nivel: héroes en casillas y pliego con una habilidad por fila ---- */
.beta-juego .bt-heroes-hab { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 6px 0 10px; }
.beta-juego .bt-hab-tabs { margin-bottom: 4px; } .beta-juego .bt-hab-tabs .k-casilla > .ico { position: static; width: 22px; height: 22px; }
.beta-juego .bt-hab { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'niv dato dato' 'niv antes accion'; align-items: center; gap: 4px 8px; width: 100%; padding: 6px 0; border-top: 2px dotted rgba(90, 60, 20, .35); }
.beta-juego .bt-hab > .k-casilla { grid-area: niv; } .beta-juego .bt-hab > .k-dato { grid-area: dato; } .beta-juego .bt-hab > .bt-antes { grid-area: antes; white-space: nowrap; } .beta-juego .bt-hab > .bt-hab-accion { grid-area: accion; justify-self: end; }
.beta-juego .bt-hab .k-dato { display: grid; gap: 2px; min-width: 0; text-align: left; } .beta-juego .bt-hab .k-dato > b { font: 400 17px/1.1 var(--k-fuente); color: var(--k-tinta); }
.beta-juego .bt-hab .k-dato > small { font: 400 12px/1.15 var(--k-fuente); color: var(--k-tinta2); }
.beta-juego .bt-hab .bt-antes { display: inline-flex; align-items: center; gap: 6px; font: 400 15px/1 var(--k-fuente); color: var(--k-tinta); } .beta-juego .bt-hab .bt-antes .sig { color: #1f6b4f; } .beta-juego .bt-hab .bt-antes .bt-flecha { width: 14px; height: 14px; background-size: 14px 14px; }
.beta-juego .bt-hab.cerrada .k-dato { opacity: .7; } .beta-juego .bt-hab .k-btn { min-width: 96px; }

/* ---- m67 · desgaste: durabilidad y reparación de la pieza elegida en la Mochila ---- */
.beta-juego .bt-desgaste { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 4px 0; } .beta-juego .bt-desgaste .k-barra { flex: 1 1 140px; max-width: 220px; }
.beta-juego .bt-reparar { max-width: 340px; margin: 2px auto 6px; } .beta-juego .bt-reparar .bt-reloj { display: inline-block; width: 14px; height: 14px; background: var(--k-g-reloj) center / 14px 14px no-repeat; }

/* m68 · estancia del jugador: poder de la estancia y de cada edificio, y tabla por niveles («Más», distribución de REF-82) */
.beta-juego .bt-poder-estancia { display: flex; align-items: center; justify-content: center; gap: 6px; } .beta-juego .bt-poder-estancia .ico { width: 18px; height: 18px; }
.beta-juego .bt-ficha .bt-poder .k-coste { font-size: 16px; }
.beta-juego .bt-niveles { width: 100%; border-collapse: collapse; color: var(--k-tinta); font: 400 16px/1.2 var(--k-fuente); text-align: center; }
.beta-juego .bt-niveles th { font-weight: 400; color: var(--k-tinta2); font-size: 13px; padding: 2px 6px; }
.beta-juego .bt-niveles td { padding: 3px 6px; border-top: 2px solid rgba(90, 58, 34, .18); }
.beta-juego .bt-niveles tr.mio td { background: rgba(47, 125, 58, .22); }
.beta-juego .bt-ficha-botones { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.beta-juego .bt-poder-estancia .ico { width: 22px; height: 22px; }
@media (max-height: 420px) { .beta-juego .bt-ficha { gap: 6px; } .beta-juego .bt-ficha .bt-efecto.bt-poder { margin-top: -4px; } .beta-juego .bt-ficha .bt-efecto .bt-nivel { width: 44px; height: 44px; } }

/* m69 · gremios de los jugadores en la guerra: cuántos hay tras cada Cuartel y su lista (nivel, muralla, guarnición y una acción) */
.beta-guerra .bg-gremios-n { left: 2px; right: auto; top: 2px; background: #1d3f7a; box-shadow: 0 0 0 2px #0c1c3a; }
.beta-guerra .bg-pliego-gremios { max-height: calc(100dvh - 24px); overflow: auto; } .beta-guerra .bg-pliego-gremios .bg-paso { justify-content: center; }
.beta-guerra .bg-gremios { width: 100%; display: grid; gap: 6px; } .beta-guerra .bg-gremios + .bg-gremios { border-top: 3px solid rgba(90, 58, 34, .25); padding-top: 8px; }
.beta-guerra .bg-gremio .bt-costes { display: flex; gap: 10px; flex-wrap: wrap; } .beta-guerra .bg-gremio .bt-nivel b { font-size: 20px; }

/* m70 · la escena del campamento es la estancia del jugador (beta): entradas y lo que está en marcha, en flujo sobre la escena */
.beta-estancia { position: relative; z-index: 4; flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; background: #2a1d14; }
.beta-estancia-ir, .beta-estancia-marcha { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.beta-en-marcha { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px; border: 0; background: rgba(20, 14, 8, .78); box-shadow: 0 0 0 2px #5a3a22; color: #ffe9b8; font: 400 15px/1.1 var(--k-fuente, monospace); cursor: pointer; }
.beta-en-marcha time { color: #9fe0b0; }
@media (max-height: 420px) { .beta-estancia { padding: 3px 8px; flex-wrap: nowrap; } .beta-estancia-marcha { flex-wrap: nowrap; } }
.beta-estancia-ir { flex: none; flex-wrap: nowrap; } .beta-estancia-ir .k-btn { flex: none; }
@media (max-width: 360px) { .beta-estancia-ir { gap: 2px; } .beta-estancia-ir .k-btn { font-size: 14px; } .beta-en-marcha { padding: 2px 8px; font-size: 13px; } }

/* m72 · Taberna por dos tiradas: saldos, «Probabilidades» de cada invocación, tabla por tiers y lo que salió */
.beta-taberna .bv-saldo { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
.beta-taberna .bv-ver { min-height: 44px; margin: 0; padding: 0 2px; border: 0; background: none; color: #8a4a1a; font: 400 14px/1 var(--k-fuente); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; }
.beta-taberna .bv-cara { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; } .beta-taberna .bv-cara > * { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.beta-taberna .bv-cosa { display: inline-grid; justify-items: center; gap: 2px; } .beta-taberna .bv-cosa small { font: 400 12px/1 var(--k-fuente); color: var(--k-tinta2); }
.beta-taberna .bv-frag { outline: 2px dashed rgba(255, 233, 184, .8); outline-offset: -5px; }
.beta-taberna .bv-tabla { width: min(96vw, 520px); max-height: calc(100dvh - 24px); } .beta-taberna .bv-tiers { width: 100%; display: grid; gap: 10px; overflow: auto; max-height: calc(100dvh - 340px); }
.beta-taberna .bv-tier h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 400 16px/1 var(--k-fuente); color: var(--k-tinta); } .beta-taberna .bv-tier h3 em { margin-left: auto; font-style: normal; color: #2f7d3a; } .beta-taberna .bv-tier h3 .k-casilla { width: 18px; height: 18px; min-width: 0; }
.beta-taberna .bv-cosas { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px 4px; justify-items: center; } .beta-taberna .bv-cosas .k-casilla { width: 48px; height: 48px; }
.beta-taberna .bv-fragmentos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 10px; } .beta-taberna .bv-premio { display: flex; justify-content: center; }

/* m73 · tareas y aceleradores */
.beta-juego .bt-acel { position: relative; background: var(--k-g-reloj) center / 14px 14px no-repeat; } .beta-juego .bt-acel::after { content: attr(data-t); position: absolute; right: -6px; bottom: -5px; font: 400 10px/1 var(--k-fuente); color: #1f6b62; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.beta-juego .bt-tareas .k-dato { display: grid; gap: 3px; } .beta-juego .bt-tareas .bt-costes { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.beta-en-marcha.tareas.toca { box-shadow: 0 0 0 2px #2fae9c; } .beta-en-marcha.tareas.toca time { color: #ffe9b8; }

/* m75 · informes de combate */
.beta-guerra .bg-informes { width: 100%; display: grid; gap: 6px; } .beta-guerra .bg-informes .bt-costes { display: flex; flex-wrap: wrap; gap: 4px 12px; } .beta-guerra .bg-hace { font: 400 12px/1 var(--k-fuente); color: var(--k-tinta2); white-space: nowrap; }

/* m76 · menú de la alianza (REF-94…102: distribución, piezas del kit propio) */
.beta-juego .bt-al-cab { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 4px 6px 8px; color: var(--k-tinta); }
.beta-juego .bt-estandarte { position: relative; display: grid; place-items: center; width: 76px; height: 88px; background: linear-gradient(#b8452c, #8f2f1e); clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); filter: hue-rotate(var(--bt-h, 0deg)); box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .25); }
.beta-juego .bt-estandarte .ico { width: 44px; height: 44px; filter: hue-rotate(calc(-1 * var(--bt-h, 0deg))) brightness(1.6) saturate(.4); }
.beta-juego .bt-al-datos { display: grid; gap: 4px; min-width: 0; } .beta-juego .bt-al-nombre { font: 400 20px/1.1 var(--k-fuente); overflow-wrap: anywhere; } .beta-juego .bt-al-nombre i { font-style: normal; color: #8a4a1a; }
.beta-juego .bt-al-datos .bt-costes { display: flex; flex-wrap: wrap; gap: 4px 14px; } .beta-juego .bt-al-datos .k-coste { font-size: 16px; }
.beta-juego .bt-al-nivel { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; padding: 0 6px 8px; } .beta-juego .bt-al-nivel .bt-nivel { width: 40px; height: 40px; }
.beta-juego .bt-al-aviso { margin: 0 6px 8px; padding: 6px 10px; background: rgba(90, 58, 34, .12); color: var(--k-tinta); font: 400 15px/1.25 var(--k-fuente); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.beta-juego .bt-al-accesos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 6px 8px; }
.beta-juego .bt-acceso { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-height: 72px; margin: 0; padding: 8px 10px; border: 0; text-align: left; cursor: pointer; background: #c9a56a; box-shadow: inset 0 -4px 0 rgba(90, 58, 34, .35), 0 0 0 2px #5a3a22; color: var(--k-tinta); font: 400 18px/1.1 var(--k-fuente); }
.beta-juego .bt-acceso .k-casilla { grid-row: 1 / 3; width: 48px; height: 48px; } .beta-juego .bt-acceso b { font-weight: 400; align-self: end; } .beta-juego .bt-acceso small { align-self: start; display: inline-flex; align-items: center; gap: 4px; font: 400 14px/1 var(--k-fuente); color: var(--k-tinta2); } .beta-juego .bt-acceso small i { font-style: normal; color: var(--k-tinta); } .beta-juego .bt-acceso small .ico { width: 16px; height: 16px; }
.beta-juego .bt-acceso.toca { background: #6fc9b8; box-shadow: inset 0 -4px 0 rgba(13, 58, 53, .4), 0 0 0 2px #0d3a35; } .beta-juego .bt-acceso.hecha { opacity: .6; cursor: default; }
.beta-juego .bt-acceso:focus-visible { outline: 4px solid #fff6dc; outline-offset: 2px; }
.beta-juego .bt-al-rango { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: #1f6b62; color: #ffe9b8; font: 400 16px/1 var(--k-fuente); } .beta-juego .bt-al-rango b { font-weight: 400; } .beta-juego .bt-al-rango .k-coste { color: #ffe9b8; }
.beta-juego .bt-al-miembros .bt-costes { display: flex; flex-wrap: wrap; gap: 4px 12px; } .beta-juego .bt-tu { font-style: normal; font-size: 13px; color: #2f7d3a; } .beta-juego .bt-al-visto { font: 400 13px/1 var(--k-fuente); color: var(--k-tinta2); white-space: nowrap; } .beta-juego .bt-al-visto.ahora { color: #2f7d3a; }
.beta-juego .bt-al-liga { display: flex; align-items: center; justify-content: center; gap: 6px; } .beta-juego .bt-al-liga .ico { width: 20px; height: 20px; } .beta-juego .bt-al-liga span { color: var(--k-tinta2); font-size: 14px; }
@media (max-width: 340px) { .beta-juego .bt-estandarte { width: 60px; height: 70px; } .beta-juego .bt-acceso { font-size: 16px; padding: 6px; column-gap: 6px; } .beta-juego .bt-acceso .k-casilla { width: 40px; height: 40px; } }
@media (max-height: 420px) { .beta-juego .bt-al-accesos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .beta-juego .bt-al-cab { padding-bottom: 4px; } }

/* m77 · alianza completa: mensaje fijado, agenda, rangos, clasificación y campo de texto del kit */
/* el campo es la pieza `.k-campo` del kit (madera oscura, letra clara); aquí sólo lo que necesita por ser editable y no un <input> */
.beta-juego .k-campo { flex: none; width: 100%; padding: 10px 12px; font: 400 17px/1.25 var(--k-fuente); outline: none; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.beta-juego .k-campo:focus { outline: 3px solid #6fc9b8; outline-offset: 1px; } .beta-juego .k-campo:empty::before { content: attr(aria-label); color: #e0c79a; }
.beta-juego .bt-al-fijado { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin: 0 6px 8px; padding: 6px 10px; background: #f6e7c4; box-shadow: 0 0 0 2px #5a3a22; color: var(--k-tinta); } .beta-juego .bt-al-fijado p { margin: 0; font: 400 15px/1.25 var(--k-fuente); overflow-wrap: anywhere; } .beta-juego .bt-al-fijado.vacio p { color: var(--k-tinta2); } .beta-juego .bt-al-fijado .ico { width: 22px; height: 22px; }
.beta-juego .bt-al-pliego { gap: 10px; } .beta-juego .bt-al-rangos, .beta-juego .bt-al-reloj { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .beta-juego .bt-al-rangos .k-casilla { width: 52px; height: 52px; cursor: pointer; }
.beta-juego .bt-rango b { position: static; font-size: 18px; } .beta-juego .bt-al-cuando { font: 400 18px/1.1 var(--k-fuente); color: var(--k-tinta); text-align: center; }
.beta-juego .bt-puesto { display: grid; place-items: center; min-width: 26px; font: 400 18px/1 var(--k-fuente); color: var(--k-tinta2); }
.beta-juego .bt-estandarte.chico { width: 40px; height: 48px; } .beta-juego .bt-estandarte.chico .ico { width: 24px; height: 24px; }
.beta-juego .bt-al-lista .k-tira, .beta-juego .bt-al-miembros .k-tira { grid-template-columns: auto auto 1fr auto; } .beta-juego .bt-al-miembros .k-tira:not(:has(.bt-puesto)) { grid-template-columns: auto 1fr auto; }
.beta-juego .bt-sigla { font-style: normal; color: #8a4a1a; } .beta-juego .bt-metrica b { color: #2f7d3a; }
.beta-juego .bt-al-sin, .beta-juego .bt-al-entrar { align-items: center; padding: 4px 6px 8px; } .beta-juego .bt-al-sin b { font: 400 20px/1 var(--k-fuente); color: var(--k-tinta); }
.beta-juego .bt-al-dejar { padding: 10px 0 4px; } .beta-juego .bt-al-agenda .bt-costes, .beta-juego .bt-al-lista .bt-costes { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.beta-juego .bt-al-rangos { flex-wrap: nowrap; gap: 6px; } .beta-juego .bt-al-rangos .k-casilla { width: 48px; height: 48px; flex: none; }
.beta-juego .bt-al-reloj { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 6px 10px; }
@media (max-width: 360px) { .beta-juego .bt-al-rangos .k-casilla { width: 44px; height: 44px; } }

/* m78 · chat por canales: tira de canales, mensajes y línea para escribir */
.beta-chat .bt-raiz { display: grid; grid-template-rows: auto auto auto auto 1fr auto; height: 100%; min-height: 0; }
.beta-chat .bc-canales { display: flex; flex-wrap: wrap; gap: 6px; max-height: 148px; overflow-y: auto; padding: 6px 8px; }
.beta-chat .bc-canal { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 150px; margin: 0; padding: 4px 12px; border: 0; cursor: pointer; background: #c9a56a; box-shadow: inset 0 -3px 0 rgba(90, 58, 34, .35), 0 0 0 2px #5a3a22; color: var(--k-tinta); font: 400 16px/1 var(--k-fuente); }
.beta-chat .bc-canal b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .beta-chat .bc-canal .ico { width: 18px; height: 18px; flex: none; }
.beta-chat .bc-canal.activa { background: #e8873a; box-shadow: inset 0 -3px 0 rgba(90, 30, 10, .4), 0 0 0 2px #5a2410; color: #fff3da; } .beta-chat .bc-canal.mas { background: #6fc9b8; box-shadow: inset 0 -3px 0 rgba(13, 58, 53, .4), 0 0 0 2px #0d3a35; }
.beta-chat .bc-idiomas { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 2px 8px 4px; } .beta-chat .bc-idiomas .k-casilla { width: 44px; height: 44px; cursor: pointer; } .beta-chat .bc-idiomas .k-casilla b { position: static; font-size: 14px; }
.beta-chat .bc-mensajes { list-style: none; margin: 0; padding: 6px 10px; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.beta-chat .bc-mensajes li { position: relative; align-self: flex-start; max-width: 86%; padding: 6px 10px 6px; background: #f6e7c4; box-shadow: 0 0 0 2px rgba(90, 58, 34, .55); color: var(--k-tinta); }
.beta-chat .bc-mensajes li.yo { align-self: flex-end; background: #cfe9d6; } .beta-chat .bc-mensajes li.oculto p { color: var(--k-tinta2); font-style: italic; } .beta-chat .bc-mensajes li.vacio { align-self: center; background: none; box-shadow: none; color: var(--k-tinta2); }
.beta-chat .bc-mensajes b { display: block; font: 400 13px/1.1 var(--k-fuente); color: #8a4a1a; } .beta-chat .bc-mensajes li.yo b { color: #1f6b62; } .beta-chat .bc-mensajes p { margin: 2px 0 0; font: 400 16px/1.25 var(--k-fuente); overflow-wrap: anywhere; } .beta-chat .bc-mensajes time { display: block; text-align: right; font: 400 11px/1 var(--k-fuente); color: var(--k-tinta2); }
.beta-chat .bc-mensajes li:has(.bc-retirar) { padding-right: 48px; min-height: 44px; box-sizing: border-box; }
.beta-chat .bc-retirar { position: absolute; right: 0; top: 0; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #8f2f1e; font: 400 22px/1 var(--k-fuente); cursor: pointer; }
.beta-chat .bc-pie { display: flex; align-items: flex-end; gap: 8px; padding: 6px 8px 10px; } .beta-chat .bc-pie .k-campo { flex: 1; width: auto; max-height: 96px; overflow-y: auto; }
.beta-chat .bc-miembros { margin: 0; font: 400 15px/1.3 var(--k-fuente); color: var(--k-tinta); text-align: center; overflow-wrap: anywhere; }
.beta-en-marcha.chat { box-shadow: 0 0 0 2px #c9a56a; }

/* m79: mando de la alianza */
.beta-juego .bt-al-mando { padding: 6px 0 2px; justify-content: center; } .beta-juego .bt-al-mandos { margin-bottom: 6px; }
.beta-juego .bt-al-entradas { display: grid; gap: 8px; } .beta-juego .bt-al-entradas .k-btn { width: 100%; }
.beta-juego .bt-al-pliego .k-habla { width: 100%; min-width: 0; } .beta-juego .bt-al-pliego .k-personaje { width: min(36vw, 130px); margin-bottom: -30px; } .beta-juego .bt-al-pliego .k-globo { min-width: 0; max-width: 100%; padding: 14px 14px 16px; } .beta-juego .bt-al-pliego .k-globo p { overflow-wrap: anywhere; }
/* m80: Banco en pantalla */
.beta-juego .bt-al-mueve { display: flex; align-items: center; justify-content: center; gap: 12px; } .beta-juego .bt-al-paso { display: inline-flex; align-items: center; gap: 8px; } .beta-juego .bt-al-paso output { display: inline-block; min-width: 56px; text-align: center; font: 400 22px/1 var(--k-fuente); color: var(--k-tinta); }
.beta-juego .bt-al-dest { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 176px; overflow: auto; } .beta-juego .bt-al-dest .k-btn { width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta-juego .bt-al-error { color: #a3481c; text-align: center; }
/* m81: elegir tropas en la guerra */
.beta-guerra .bg-elige { min-width: 60px; min-height: 44px; padding: 0 8px; border: 0; background: #0005; border-radius: 6px; cursor: pointer; justify-content: center; box-shadow: inset 0 0 0 2px #c9a25a88; } .beta-guerra .bg-elige.elegida { box-shadow: inset 0 0 0 2px #5fd0c0; } .beta-guerra .bg-elige:disabled { box-shadow: none; background: none; cursor: default; }
.beta-guerra .bg-pliego-tropas { max-height: calc(100dvh - 24px); overflow: auto; } .beta-guerra .bg-pliego-tropas .bg-paso { display: inline-flex; gap: 6px; } .beta-guerra .bg-tropas { margin: 6px 0 10px; }
/* m83: operación cooperativa */
.beta-guerra .bg-pliego-coop { max-height: calc(100dvh - 24px); overflow: auto; display: grid; gap: 10px; justify-items: stretch; width: min(92vw, 380px); box-sizing: border-box; }
.beta-guerra .bg-pliego-coop .k-rotulo-pliego { justify-self: center; }
.beta-guerra .bg-coop-vida .k-barra { display: block; width: 100%; height: 26px; box-sizing: border-box; }
.beta-guerra .bg-coop-hitos { display: flex; justify-content: center; gap: 14px; } .beta-guerra .bg-coop-hito { display: grid; justify-items: center; gap: 2px; } .beta-guerra .bg-coop-hito .k-casilla { width: 56px; height: 56px; } .beta-guerra .bg-coop-hito small { font: 400 14px/1 var(--k-fuente); color: var(--k-tinta); }
.beta-guerra .bg-pliego-coop .k-contador { justify-self: center; color: var(--k-tinta); } .beta-guerra .bg-pliego-coop .k-contador b { color: #a3481c; }
.beta-guerra .bg-coop-aportes { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; } .beta-guerra .bg-coop-aportes .k-tira { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; min-height: 44px; } .beta-guerra .bg-coop-aportes .k-dato { flex: 1; min-width: 0; }
.beta-guerra .bg-pliego-coop .bt-dos { position: sticky; bottom: -2px; display: flex; justify-content: center; gap: 10px; padding: 6px 0 2px; background: #ecd9a8; z-index: 2; }
@media (max-height: 420px) { .beta-guerra .bg-pliego-coop { gap: 6px; width: min(92vw, 460px); } .beta-guerra .bg-coop-hito .k-casilla { width: 44px; height: 44px; } .beta-guerra .bg-coop-vida .k-barra { height: 20px; } }
/* m85: combate manual. La casilla del héroe con la activa cargada brilla y se toca. */
.advacts .beta-manual { order: 4; align-self: center; min-width: 92px; pointer-events: auto; position: relative; } .advacts .beta-manual > span { pointer-events: none; }
#advHud.beta-mando .party .punit { transition: transform .08s; } #advHud.beta-mando .party .punit.beta-lista { outline: 3px solid #5fd0c0; outline-offset: 1px; box-shadow: 0 0 0 2px #0b3b36, 0 0 14px 4px #5fd0c0aa; animation: beta-lista 0.7s steps(2) infinite; cursor: pointer; }
#advHud.beta-mando .party .punit.beta-pulsada { transform: translateY(2px) scale(.96); outline: 3px solid #f0c060; }
@keyframes beta-lista { 50% { box-shadow: 0 0 0 2px #0b3b36, 0 0 6px 2px #5fd0c066; } }
@media (prefers-reduced-motion: reduce) { #advHud.beta-mando .party .punit.beta-lista { animation: none; } }
html[data-beta-r35] .advbot .beta-manual { order: 5; }
@media (max-width: 360px) { .advacts { gap: 4px; } .advacts .beta-combatir { min-width: 96px; padding-inline: 6px; } .advacts .beta-manual { min-width: 70px; padding-inline: 4px; } .advacts .fmbtn > span { display: none; } }
@media (max-width: 360px) { .advacts .beta-combatir, .advacts .beta-manual { font-size: 14px; letter-spacing: 0; } .advacts .beta-combatir { min-width: 100px; } .advacts .beta-manual { min-width: 76px; } }
/* m86: moderación de eventos */
.beta-eventos .be-modo { padding: 12px 0 6px; } .beta-eventos .be-admin-pie { justify-content: center; padding: 10px 0 4px; }
.beta-eventos .be-ajuste { display: grid; gap: 10px; justify-items: center; } .beta-eventos .be-cuando { font: 400 16px/1.2 var(--k-fuente); color: var(--k-tinta); text-align: center; }
.beta-eventos .be-reloj { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; } .beta-eventos .be-reloj .k-btn { width: 100%; min-width: 0; }
.beta-eventos .be-tipos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .beta-eventos .be-tipos .k-casilla { width: 48px; height: 48px; cursor: pointer; }
.beta-eventos .be-ajuste .bt-dos { display: flex; justify-content: center; gap: 10px; }
.beta-eventos .be-modo, .beta-eventos .be-admin-pie { display: flex; justify-content: center; gap: 10px; }
/* m89: alianza en 320 y apaisado bajo */
.beta-juego .bt-al-liga { flex-wrap: wrap; min-height: 24px; margin: 4px 0 10px; position: relative; z-index: 1; } .beta-juego .bt-al-liga span { text-shadow: none; -webkit-text-stroke: 0; }
.beta-juego .bt-al-pliego { max-height: calc(100dvh - 16px); overflow: auto; box-sizing: border-box; }
@media (max-height: 420px) { .beta-juego .bt-al-pliego { gap: 6px; padding-top: 12px; padding-bottom: 16px; width: min(92vw, 560px); max-width: none; } .beta-juego .bt-al-pliego .bt-al-rangos .k-casilla { width: 44px; height: 44px; } .beta-juego .bt-al-reloj { display: flex; flex-wrap: nowrap; gap: 6px; } .beta-juego .bt-al-reloj .k-btn { flex: 1; min-width: 0; } .beta-juego .bt-al-entradas { grid-template-columns: 1fr 1fr 1fr; } .beta-juego .bt-al-entradas .k-btn { min-width: 0; font-size: 14px; padding-inline: 4px; } }
@media (max-height: 420px) { .beta-juego .bt-al-entradas { width: 100%; justify-self: stretch; } .beta-juego .bt-al-entradas .k-btn { white-space: nowrap; overflow: visible; } }
/* m90: mensajes sin leer */
.bc-punto { position: absolute; top: -4px; right: -4px; min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 7px; background: #e0562c; box-shadow: 0 0 0 2px #2a1608; color: #fff; font: 400 11px/14px var(--k-fuente); font-style: normal; text-align: center; } .beta-chat .bc-canal { position: relative; } .beta-en-marcha.chat { position: relative; }
/* m90: la cabecera de la guerra no se sale nunca del ancho (fallaba según lo largo del tiempo restante y de los puntos) */
.beta-guerra .bg-estado { justify-content: flex-start; min-width: 0; max-width: 100%; box-sizing: border-box; } .beta-guerra .bg-estado .bg-hud { flex: none; } .beta-guerra .bg-estado .bg-marcador { flex: 1 1 auto; min-width: 0; justify-content: center; margin-left: 2px; } .beta-guerra .bg-marcador i { flex: 0 1 auto; min-width: 20px; } .beta-guerra .bg-estado .bg-queda { flex: none; margin-left: 2px; }
/* m93: mejora = estadística · antes → después */
.beta-guerra .bg-efecto em { flex-basis: 100%; text-align: center; font-style: normal; color: var(--k-tinta); }
/* m94: bono de compañía activo */
.dynasty-reference li.activo { outline: 2px solid #5fd0c0; outline-offset: 2px; }
/* m95: los cuatro números de poder y su suma */
.beta-juego .bt-poderes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 0 0 8px; } .beta-juego .bt-poderes .k-coste { font-size: 15px; } .beta-juego .bt-poderes .bt-poder-total { flex-basis: 100%; justify-content: center; font-size: 18px; }
.beta-juego .bt-poder-estancia:has(+ .bt-poderes) { display: none; }   /* el número de estancia ya va entre los cuatro; se conserva en el DOM por su etiqueta */ .beta-juego .bt-poderes .bt-poder-total { order: -1; }
/* m97: marcas del mando en el mapa de guerra */
.beta-guerra .bg-parcela .bg-marca { position: absolute; left: 50%; top: -6px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; display: grid; place-items: center; z-index: 3; box-shadow: 0 0 0 2px #2a1608, 0 2px 0 2px #0006; animation: bg-marca 1s steps(2) infinite; }
.beta-guerra .bg-parcela .bg-marca.atacar { background: #e0562c; } .beta-guerra .bg-parcela .bg-marca.defender { background: #2f9e8f; } .beta-guerra .bg-parcela .bg-marca svg { width: 14px; height: 14px; }
@keyframes bg-marca { 50% { transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .beta-guerra .bg-parcela .bg-marca { animation: none; } }
.beta-guerra .bg-parcela .bg-marca { width: 28px; height: 28px; margin-left: -14px; top: -14px; z-index: 6; } .beta-guerra .bg-parcela .bg-marca svg { width: 18px; height: 18px; }
/* m102: gremios de los jugadores junto a su Cuartel (sustituto por código; arte pendiente: ARTE-R35-GREMIOS) */
.beta-guerra .bg-parcela .bg-casitas { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 16px; pointer-events: none; z-index: 1; }
.beta-guerra .bg-casita { position: absolute; bottom: 0; width: 10px; height: 8px; background: #8a5a34; box-shadow: 0 0 0 1px #2a1608; }
.beta-guerra .bg-casita::before { content: ''; position: absolute; left: -2px; right: -2px; top: -4px; height: 4px; background: #b3402a; box-shadow: 0 0 0 1px #2a1608; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.beta-guerra .bg-casita.n2 { height: 10px; } .beta-guerra .bg-casita.n3 { height: 12px; width: 11px; }
.beta-guerra .bg-casita.muro::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: -1px; height: 3px; background: repeating-linear-gradient(90deg, #9a9a8e 0 3px, #5d5d55 3px 4px); box-shadow: 0 0 0 1px #2a1608; }
.beta-guerra .bg-casita.escudo { box-shadow: 0 0 0 1px #2a1608, 0 0 5px 2px #5fd0c0; } .beta-guerra .bg-casita.mia { background: #c98a4b; }
.beta-guerra .bg-casita.l0 { left: 0; } .beta-guerra .bg-casita.l1 { right: 0; } .beta-guerra .bg-casita.l2 { left: 13px; } .beta-guerra .bg-casita.l3 { right: 13px; }
.beta-guerra .bg-parcela.suya .bg-casita::before { background: #7a3fa8; } .beta-guerra .bg-parcela.mia .bg-casita::before { background: #2f9e8f; }
/* m104: títulos (cosmético) */
.beta-juego .bt-titulo { display: block; font: 400 13px/1.1 var(--k-fuente); color: #a3481c; } .beta-chat .bc-titulo { font-style: normal; font-size: 12px; color: #a3481c; margin-left: 6px; }
@media (max-height: 420px) { .beta-juego .bt-al-titulos { grid-template-columns: 1fr 1fr; } }
/* m105: mejora de la Academia = estadística · antes → después */
.beta-juego .bt-efecto-est { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; } .beta-juego .bt-efecto-est em { flex-basis: 100%; text-align: center; font-style: normal; color: var(--k-tinta); }
/* m107: estandarte de la alianza campeona: insignia dorada con estrella junto al estandarte (sustituto por código; arte pendiente) */
.beta-juego .bt-est-caja { position: relative; display: inline-flex; flex: none; }
.beta-juego .bt-est-caja .bt-corona { position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: #f0c060; box-shadow: 0 0 0 2px #2a1608, 0 2px 0 2px #0005; z-index: 2; }
.beta-juego .bt-est-caja .bt-corona::after { content: ''; position: absolute; inset: 3px; background: #7a4a12; clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 35%); }
.beta-juego .bt-est-caja.chico .bt-corona { width: 18px; height: 18px; right: -5px; top: -5px; }
/* m109 · registro para la próxima guerra, dentro del pliego de la liga: una línea y su botón (sin caja dentro del pergamino) */
.beta-guerra .bg-reg-linea { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 10px 4px 6px; font: 400 16px/1.2 var(--k-fuente); color: var(--k-tinta); } .beta-guerra .bg-reg-linea span { opacity: .7; font-size: 14px; }
/* m115 · moderación dentro del chat (sólo moderadores) y aviso de cuenta suspendida */
.beta-chat .bc-canal.mod { background: #b9a7d6; box-shadow: inset 0 -3px 0 rgba(40, 20, 70, .4), 0 0 0 2px #2c1a4a; } .beta-chat .bc-canal.mod.activa { background: #e8873a; box-shadow: inset 0 -3px 0 rgba(90, 30, 10, .4), 0 0 0 2px #5a2410; }
.beta-chat .bc-mod-barra { padding: 6px 8px 2px; align-items: center; } .beta-chat .bc-mod-filtros { flex-wrap: wrap; }
.beta-chat .bc-log li.log { align-self: stretch; max-width: none; padding: 0; } .beta-chat .bc-log li.log.oculto { background: #ead2c2; } .beta-chat .bc-log li.log.oculto p { text-decoration: line-through; }
.beta-chat .bc-log-fila { display: block; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; } .beta-chat .bc-log-fila time { position: static; display: block; text-align: right; }
.beta-chat .bc-mod-cita { margin: 0; padding: 6px 10px; background: #f6e7c4; box-shadow: 0 0 0 2px rgba(90, 58, 34, .55); font: 400 15px/1.25 var(--k-fuente); color: var(--k-tinta); overflow-wrap: anywhere; max-height: 96px; overflow-y: auto; }
.beta-chat .bc-mod-dias { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } .beta-chat .bc-mod-dias > b { flex-basis: 100%; text-align: center; font: 400 15px/1 var(--k-fuente); color: var(--k-tinta); }
dialog.beta-suspendida { box-sizing: border-box; width: min(360px, calc(100vw - 32px)); padding: 0; border: 0; background: none; overflow: visible; } dialog.beta-suspendida::backdrop { background: rgba(20, 12, 6, .78); }
dialog.beta-suspendida .k-pliego { display: flex; flex-direction: column; align-items: center; gap: 10px; } dialog.beta-suspendida p { margin: 0; text-align: center; font: 400 17px/1.25 var(--k-fuente); color: var(--k-tinta); overflow-wrap: anywhere; } dialog.beta-suspendida .bs-motivo { font-size: 15px; color: var(--k-tinta2); }
dialog.beta-suspendida .k-pliego:focus { outline: none; }
/* m116 · perfil del jugador (propio y ajeno): una superficie; la figura es el retrato del héroe-avatar a tamaño grande (sustituto) */
.beta-perfil .bt-raiz { display: grid; grid-template-rows: auto 1fr auto; height: 100%; min-height: 0; }
.beta-perfil .pf-cuerpo { min-height: 0; overflow-y: auto; padding: 8px 12px 4px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.beta-perfil .pf-figura { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 6px 0 2px; background: radial-gradient(ellipse at 50% 70%, rgba(255, 246, 220, .75), rgba(255, 246, 220, 0) 68%); }
.beta-perfil .pf-heroe { --pf: clamp(112px, 28dvh, 224px); display: grid; place-items: center; width: var(--pf); height: var(--pf); } .beta-perfil .pf-heroe > * { width: var(--pf); height: var(--pf); border: 0; border-radius: 0; background: none; box-shadow: none; image-rendering: pixelated; }
.beta-perfil .pf-nombre { font: 400 22px/1.1 var(--k-fuente); color: var(--k-tinta); text-align: center; overflow-wrap: anywhere; } .beta-perfil .pf-nombre > i { font-style: normal; color: #8a4a1a; } .beta-perfil .pf-figura .bt-titulo { font: 400 15px/1 var(--k-fuente); color: #1f6b62; }
.beta-perfil .pf-bio { margin: 0; width: 100%; box-sizing: border-box; padding: 8px 12px; background: #f6e7c4; box-shadow: 0 0 0 2px rgba(90, 58, 34, .55); font: 400 16px/1.25 var(--k-fuente); color: var(--k-tinta); text-align: center; overflow-wrap: anywhere; } .beta-perfil .pf-bio.vacia { color: var(--k-tinta2); font-style: italic; }
.beta-perfil .pf-poder { margin: 0; }
.beta-perfil .pf-datos { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; } .beta-perfil .pf-datos li { display: flex; align-items: center; gap: 8px; min-width: 0; } .beta-perfil .pf-datos .k-casilla { flex: none; width: 40px; height: 40px; }
.beta-perfil .pf-datos .k-dato { min-width: 0; display: flex; flex-direction: column; } .beta-perfil .pf-datos small { font: 400 13px/1 var(--k-fuente); color: var(--k-tinta2); } .beta-perfil .pf-datos b { font: 400 16px/1.15 var(--k-fuente); color: var(--k-tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta-perfil .pf-heroes { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; } .beta-perfil .k-heroe { position: relative; width: 56px; height: 56px; padding: 0; } .beta-perfil .k-heroe > :is(img, canvas, svg, .portrait) { width: 40px; height: 40px; margin-top: 4px; border: 0; border-radius: 0; background: none; box-shadow: none; image-rendering: pixelated; } .beta-perfil .k-heroe > em { font-size: 12px; }
.beta-perfil .pf-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px 10px 12px; }
.beta-perfil .pf-rejilla { display: grid; grid-template-columns: repeat(4, 56px); gap: 8px; justify-content: center; max-height: 46vh; overflow-y: auto; padding: 4px; } .beta-perfil .pf-rejilla .k-heroe { cursor: pointer; } .beta-perfil .pf-rejilla .k-heroe.activa { outline: 4px solid #e8873a; outline-offset: 0; }
.beta-perfil .bt-al-pliego .k-campo { width: 100%; box-sizing: border-box; min-height: 64px; }
/* entradas al perfil: la casilla de rango de un miembro es un botón; en el chat, un botón a la derecha del mensaje ajeno */
.beta-juego .bt-ver-perfil { flex: none; display: grid; place-items: center; min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.beta-chat .bc-perfil { position: absolute; right: 0; top: 0; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } .beta-chat .bc-perfil .ico { width: 22px; height: 22px; opacity: .75; }
/* m124 · denunciar un mensaje ajeno: a la izquierda del perfil (y de «retirar» si lo hay) */
.beta-chat .bc-denunciar { position: absolute; right: 44px; top: 0; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #8a5a1c; font: 700 20px/1 var(--k-fuente); cursor: pointer; opacity: .8; }
.beta-chat .bc-mensajes li:has(.bc-denunciar) { padding-right: 92px; min-height: 44px; box-sizing: border-box; } .beta-chat .bc-mensajes li:has(.bc-retirar):has(.bc-denunciar) { padding-right: 136px; } .beta-chat .bc-mensajes li:has(.bc-retirar) .bc-denunciar { right: 88px; }
.beta-chat .bc-mensajes li:has(.bc-perfil) { padding-right: 48px; min-height: 44px; box-sizing: border-box; } .beta-chat .bc-mensajes li:has(.bc-retirar):has(.bc-perfil) { padding-right: 92px; } .beta-chat .bc-mensajes li:has(.bc-retirar) .bc-perfil { right: 44px; }
/* m117 · barra de arriba de la beta: recuadro del jugador a la izquierda (abre el perfil); monedas y opciones a la derecha; sin botón de regalos */
.app.beta-barra > header.hud #openGifts, .app.beta-barra > header.hud .res:has(#gems) { display: none; }
.app.beta-barra > header.hud .hud-jugador { order: 0; flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 8px 0 0; border: 0; background: none; color: var(--k-crema, #fff6dc); font: inherit; text-align: left; cursor: pointer; }
.app.beta-barra > header.hud .hj-cara { flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: #3a2110; box-shadow: 0 0 0 2px #e7b85a, 0 0 0 4px #2a1608; overflow: hidden; } .app.beta-barra > header.hud .hj-cara > * { width: 36px; height: 36px; border: 0; border-radius: 0; background: none; box-shadow: none; image-rendering: pixelated; }
.app.beta-barra > header.hud .hj-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .app.beta-barra > header.hud .hj-txt b { font: 400 16px/1 var(--k-fuente, inherit); max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 0 #2a1608; }
.app.beta-barra > header.hud .hj-txt small { display: flex; align-items: center; gap: 3px; font: 400 14px/1 var(--k-fuente, inherit); color: #f0c060; text-shadow: 0 2px 0 #2a1608; } .app.beta-barra > header.hud .hj-txt .ico { width: 14px; height: 14px; }
.app.beta-barra > header.hud .hudspace { order: 1; } .app.beta-barra > header.hud .res { order: 2; } .app.beta-barra > header.hud #openPuerta { order: 3; } .app.beta-barra > header.hud #openSettings { order: 4; }
@media (max-width: 359px) { .app.beta-barra > header.hud .hj-txt b { max-width: 72px; } .app.beta-barra > header.hud .res { padding-right: 8px; } }
/* m118 · perfil: número de ID y pliego del nick */
.beta-perfil .pf-id { font: 400 14px/1 var(--k-fuente); color: var(--k-tinta2); } .beta-perfil .pf-nick-coste { margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font: 400 16px/1.2 var(--k-fuente); color: var(--k-tinta); } .beta-perfil .pf-tengo { opacity: .7; }
.beta-perfil .bt-al-pliego [data-pf-campo="nick"] { min-height: 44px; }
.beta-chat .bc-mod-ident { margin: 0; font: 400 14px/1.25 var(--k-fuente); color: var(--k-tinta2); text-align: center; overflow-wrap: anywhere; }
/* m119 · correo del juego y código en opciones */
.beta-correo .bt-raiz { display: grid; grid-template-rows: auto 1fr auto; height: 100%; min-height: 0; } .beta-correo .bm-cuerpo { min-height: 0; overflow-y: auto; padding: 6px 10px; }
.beta-correo .bm-lista .k-dato small { white-space: normal; overflow-wrap: anywhere; } .beta-correo .bm-pie { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px 10px 12px; }
.beta-correo .bm-premio { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; font-size: 20px; }
.beta-correo .bm-admin { width: min(100%, 340px); max-height: 84dvh; overflow-y: auto; } .beta-correo .bm-admin .k-campo { width: 100%; box-sizing: border-box; min-height: 44px; } .beta-correo .bm-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.beta-correo .bm-codigos { width: 100%; max-height: 30dvh; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.beta-codigo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .beta-codigo .k-campo { flex: 1; min-width: 120px; min-height: 44px; box-sizing: border-box; text-transform: uppercase; } .beta-codigo-res { flex-basis: 100%; margin: 0; min-height: 0; display: flex; flex-wrap: wrap; gap: 10px; font: 400 16px/1.2 var(--k-fuente, inherit); }
body:has(.app.beta-barra) #toGifts { display: none; }
.beta-en-marcha.correo time:empty { display: none; }
/* m120 · guerra: torre que arde, campamentos teleportados */
.beta-guerra .bg-parcela.arde { filter: saturate(1.3) brightness(.92); box-shadow: inset 0 0 0 3px #e8873a; animation: bg-arde 1.2s steps(2) infinite; } @keyframes bg-arde { 50% { box-shadow: inset 0 0 0 3px #f0c060; } } .reduced .beta-guerra .bg-parcela.arde { animation: none; }
.beta-guerra .bg-reloj.arde { color: #ffd9a8; }
.beta-guerra .bg-campos { position: absolute; left: 2px; bottom: 2px; display: flex; gap: 2px; pointer-events: none; } .beta-guerra .bg-campo { width: 10px; height: 10px; background: #6fc9b8; box-shadow: 0 0 0 2px #0d3a35; } .beta-guerra .bg-campo.rival { background: #b9a7d6; box-shadow: 0 0 0 2px #2c1a4a; } .beta-guerra .bg-campo.yo { background: #f0c060; box-shadow: 0 0 0 2px #5a2410; }
/* m121 · marcos de recompensa (sustituto por código: el arte es de Codex): «guerra» una semana, «liga» un mes. En el avatar de la
   barra, en la figura del perfil y en los mensajes de chat de quien lo lleva. */
.app.beta-barra > header.hud .hj-cara.marco-guerra { box-shadow: 0 0 0 2px #d9d9e6, 0 0 0 4px #7a2a1a, 0 0 0 6px #2a1608; } .app.beta-barra > header.hud .hj-cara.marco-liga { box-shadow: 0 0 0 2px #fff3a8, 0 0 0 4px #e0a020, 0 0 0 6px #5a2410; }
.beta-perfil .pf-heroe.marco-guerra { box-shadow: inset 0 0 0 4px #d9d9e6, inset 0 0 0 8px #7a2a1a; } .beta-perfil .pf-heroe.marco-liga { box-shadow: inset 0 0 0 4px #fff3a8, inset 0 0 0 8px #e0a020; }
.beta-chat .bc-mensajes li.marco-guerra { box-shadow: 0 0 0 2px #d9d9e6, 0 0 0 4px #7a2a1a; } .beta-chat .bc-mensajes li.marco-liga { box-shadow: 0 0 0 2px #fff3a8, 0 0 0 4px #e0a020; }
.beta-perfil .pf-n { font-style: normal; display: inline-block; min-width: 18px; padding: 0 4px; background: #e8873a; color: #fff3da; } .beta-perfil .pf-amigos { width: 100%; max-height: 46dvh; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.beta-chat .bc-id { margin-left: 6px; font-style: normal; font-size: 12px; color: var(--k-tinta2); }