/* Everthal · el tablero de combate sobre el relato (lo dibuja combate.js) y sus efectos. */

/* --- Combate: el tablero sobre el relato (lo dibuja combate.js) ---------------------------------- */
.tablero { max-width: 900px; width: calc(100% - 40px); margin: 14px auto 0; border-radius: var(--radio); position: relative; background: var(--hoja); }
.tablero::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--trazo); border-radius: var(--radio); filter: var(--pluma); pointer-events: none; z-index: 2; }
.turnos { display: flex; align-items: center; gap: 10px; padding: 8px 14px 6px; }
.turnos .ronda { font: 500 14px var(--f-titulo); letter-spacing: 0.12em; color: var(--rubrica); white-space: nowrap; }
.turnos ol { list-style: none; margin: 0; padding: 2px; display: flex; gap: 8px; align-items: center; overflow-x: auto; }
.turnos li .medallon { --t: 28px; }
.turnos li.actua .medallon { --t: 34px; }
.turnos li.actua .medallon::after { border-color: var(--acento); border-width: 2.5px; }
.turnos li.fuera { opacity: 0.4; }
.turnos .pie { margin-left: auto; font: italic 14px var(--f-texto); color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tablero .campo { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); min-height: clamp(170px, 17vw, 210px); overflow: hidden; }
.tablero .campo .lienzo { position: absolute; inset: 0; pointer-events: none; }
.tablero .campo .fondo { position: absolute; inset: 0; background: center 62% / cover no-repeat; opacity: 0.42; filter: saturate(0.75) sepia(0.15); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 70%, transparent); }
.tablero .campo .cielo { position: absolute; inset: 0 0 38% 0; background: radial-gradient(70% 90% at 30% 20%, color-mix(in srgb, var(--cielo) 85%, transparent), transparent 70%), radial-gradient(60% 80% at 80% 30%, color-mix(in srgb, var(--cielo) 70%, transparent), transparent 70%); filter: var(--acuarela-grande); }
.tablero .campo .monte { position: absolute; left: -5%; right: -5%; bottom: 30%; height: 26%; background: var(--monte); opacity: 0.55; border-radius: 50% 60% 0 0 / 100% 100% 0 0; filter: var(--acuarela-grande); }
.tablero .campo .suelo { position: absolute; inset: auto -5% -6% -5%; height: 42%; background: radial-gradient(80% 70% at 50% 30%, var(--suelo), color-mix(in srgb, var(--suelo) 50%, transparent) 75%, transparent); filter: var(--acuarela-grande); opacity: 0.85; }
.col { position: relative; display: flex; justify-content: center; align-items: flex-end; padding: 8px 2px 22px; min-width: 0; z-index: 1; }
.col .dist { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font: 11px var(--f-titulo); letter-spacing: 0.12em; color: var(--tenue); }
.col.frente::after { content: ""; position: absolute; right: 0; top: 14%; bottom: 12%; border-right: 1.5px dashed color-mix(in srgb, var(--rubrica) 45%, transparent); }
/* Los que están a la misma distancia, en fila (la columna se ensancha con ellos: ver campo() en combate.js). */
.luchador { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: end; gap: 3px; flex: 1 1 0; max-width: 132px; min-width: 0; background: none; border: 0; padding: 0; color: inherit; position: relative; }
.luchador.fuera { order: 1; flex-grow: 0.6; }
.luchador:disabled { cursor: default; }
.figura { width: min(clamp(52px, 8.5vw, 96px), 100%); aspect-ratio: 1; position: relative; display: grid; place-items: end center; }
.figura::before { content: ""; position: absolute; bottom: 3%; width: 62%; height: 10%; border-radius: 50%; background: rgb(60 40 15 / 0.22); filter: blur(3px); }
.figura img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.figura .medallon { --t: 74%; margin-bottom: 9%; background: var(--elevada); font-size: clamp(20px, 3.6vw, 40px); }
.figura .medallon.aliado { color: var(--bien); }
.figura:has(img) { aspect-ratio: 4 / 5; }
.figura img.espejo { transform: scaleX(-1); }
.luchador .nombre { font: 500 14px/1.1 var(--f-texto); max-width: 100%; padding: 0 2px; text-align: center; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; hyphens: auto; }
.luchador .carril { width: min(96px, 88%); height: 7px; }
.luchador .vida { font: 12px var(--f-ui); color: var(--tenue); font-variant-numeric: lining-nums; }
.luchador .marcas { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.luchador .marcas .etiqueta { font-size: 10.5px; padding: 0 5px; }
.luchador.actua .nombre { color: var(--acento); font-weight: 700; }
/* Fuera de combate: pequeño y apagado; una ilustración, además, tendida en el suelo. */
.luchador.fuera { opacity: 0.45; }
.luchador.fuera .figura { width: min(56px, 90%); filter: grayscale(0.7); }
.luchador.caido .figura:has(img) { aspect-ratio: 5 / 4; }
.luchador.caido .figura img { rotate: 90deg; scale: 0.8; }
/* Quien huye o se rinde sigue de pie, de espaldas y desvaído: no está tendido en el suelo. */
.luchador.huido .figura img { transform: scaleX(-1); }
.luchador.huido .figura img.espejo { transform: none; }
.luchador.huido { opacity: 0.3; }
.luchador.fuera .carril, .luchador.fuera .marcas { display: none; }
/* Elegir a quién: los objetivos válidos se marcan; los que no, se apagan. */
.tablero.eligiendo .luchador.valido { cursor: crosshair; }
.tablero.eligiendo .luchador.valido .figura::after { content: ""; position: absolute; bottom: 0; width: 78%; height: 16%; border: 2px solid var(--rubrica); border-radius: 50%; filter: var(--pluma); }
.tablero.eligiendo .luchador.valido.amigo .figura::after { border-color: var(--bien); }
.tablero.eligiendo .luchador.valido:hover .nombre, .tablero.eligiendo .luchador.valido:focus-visible .nombre { color: var(--rubrica); }
.tablero.eligiendo .luchador:not(.valido) { opacity: 0.35; }
.luchador.ordenable { cursor: pointer; }
.luchador.ordenable:hover .nombre { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
/* Lo que pasa en la ronda: el número que sale del golpe y el rótulo de quien actúa. */
.cifra { position: absolute; top: 18%; left: 50%; translate: -50% 0; font: 700 clamp(18px, 2.4vw, 26px) var(--f-titulo); color: var(--rubrica); pointer-events: none; z-index: 3; text-shadow: 0 0 6px var(--hoja), 0 0 2px var(--hoja); }
.cifra.cura { color: var(--bien); }
.cifra.falla { color: var(--tenue); font: italic 500 16px var(--f-texto); }
.rotulo { position: absolute; left: 50%; top: 8px; translate: -50% 0; z-index: 3; background: var(--hoja); padding: 3px 12px 4px; border-radius: 999px; font: italic 15px var(--f-texto); color: var(--tinta); box-shadow: var(--sombra); pointer-events: none; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
/* Efectos: lo que vuela, estalla, para o cura (efectos.js); el color es el del elemento (--c). */
.fx { position: absolute; inset: -8% -18% 6%; width: auto; height: auto; pointer-events: none; z-index: 2; overflow: visible; }
.fx-estallido .mancha { opacity: 0.55; stroke: none; filter: var(--acuarela); }
.fx-estallido .rayas { fill: none; stroke-width: 3; stroke-linecap: round; filter: var(--pluma); }
.fx-escudo path { fill: none; stroke-width: 8; stroke-linecap: round; filter: var(--pluma); }
.fx-escudo.espejo { transform: scaleX(-1); }
.fx-motas path { fill: none; stroke-width: 4; stroke-linecap: round; filter: var(--pluma); }
.fx-bola { position: absolute; width: 22px; height: 22px; border-radius: 50%; pointer-events: none; z-index: 4; background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--c) 35%, var(--hoja)) 0 30%, var(--c) 65%, transparent 72%); filter: var(--acuarela); }
.fx-marca { position: absolute; top: -6px; left: 50%; translate: -50% 0; z-index: 3; display: grid; justify-items: center; pointer-events: none; font: italic 600 13px var(--f-texto); color: var(--c); text-shadow: 0 0 4px var(--hoja), 0 0 2px var(--hoja); white-space: nowrap; }
.fx-espiral { width: 30px; height: 15px; fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linecap: round; filter: var(--pluma); }
/* Lo que viaja (flecha, corte, arma), lo que se dibuja de un tirón (tajos, zarpazos) y lo que suelta un elemento. */
.fx-vuela { position: absolute; pointer-events: none; z-index: 4; overflow: visible; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: var(--pluma); }
.fx-flecha { width: 46px; height: 10px; }
.fx-corte { width: 26px; height: 40px; stroke-width: 1.5; fill-opacity: 0.55; filter: var(--acuarela); }
.fx-arma { width: 40px; height: 12px; }
.fx-bola.pequeña { width: 12px; height: 12px; }
.fx-rayo { position: absolute; pointer-events: none; z-index: 4; overflow: visible; fill: none; stroke-width: 3; stroke-linecap: round; filter: var(--pluma); }
.fx-onda { position: absolute; width: 60px; height: 60px; pointer-events: none; z-index: 2; overflow: visible; fill: none; stroke-width: 3; filter: var(--pluma); }
.fx-brota path { stroke-width: 3; stroke-linejoin: round; filter: var(--pluma); }
.fx-trazo { inset: -10% -24% 0%; }
.fx-trazo path { fill: none; stroke-linecap: round; stroke-dasharray: 1; filter: var(--pluma); }
.fx-trazo.al-aire { opacity: 0.6; }
.fx-particula { position: absolute; pointer-events: none; z-index: 3; overflow: visible; }
.fx-particula.difusa { filter: blur(1.5px); opacity: 0.7; }
.fx-halo { position: absolute; inset: -10% -30% -4%; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 70%, transparent), color-mix(in srgb, var(--c) 25%, transparent) 60%, transparent); filter: var(--acuarela); }
.fx-sello { position: absolute; top: -14%; left: 50%; z-index: 4; pointer-events: none; white-space: nowrap; padding: 1px 8px 2px; font: 700 clamp(13px, 1.6vw, 17px) var(--f-titulo); letter-spacing: 0.06em; color: var(--rubrica); background: var(--hoja); border: 2px solid var(--rubrica); border-radius: 3px; filter: var(--pluma); }
.cifra.critica { font-size: clamp(24px, 3.2vw, 34px); }
/* Lo que puede hacer el PJ: la botonera y, desplegadas, sus cartas. */
.acciones { padding: 10px 14px 14px; display: grid; gap: 10px; border-top: 1.5px dashed color-mix(in srgb, var(--trazo) 70%, transparent); }
.acciones-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 15px var(--f-ui); color: var(--tinta-2); flex-wrap: wrap; }
.acciones-cab strong { font: 500 16px var(--f-titulo); letter-spacing: 0.06em; color: var(--acento); }
.acciones-cab .boton-texto { font-size: 14px; padding: 0; }
/* Cada acción es un sello del cuaderno: recuadro a pluma, versalitas y su icono a trazo; la que se
   pulsa o se despliega se tiñe con una aguada de la tinta del jugador. Atacar va en esa tinta. */
.botonera { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 7px; }
.botonera button { position: relative; display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 42px; padding: 6px 6px 7px; background: var(--papel); border: 0; border-radius: var(--radio); font: 500 14.5px var(--f-titulo); letter-spacing: 0.02em; white-space: nowrap; color: var(--tinta); }
.botonera button::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--trazo); border-radius: var(--radio); filter: var(--pluma); pointer-events: none; }
.botonera button::after { content: ""; position: absolute; inset: 3px; border-radius: var(--radio); background: var(--acento); opacity: 0; filter: var(--acuarela); pointer-events: none; transition: opacity 0.15s; }
.botonera button > * { position: relative; z-index: 1; }
.botonera .icono { width: 19px; height: 19px; color: var(--tinta-2); }
.botonera .flecha { width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg; translate: 0 -2px; opacity: 0.7; transition: rotate 0.15s, translate 0.15s; }
.botonera button[aria-expanded="true"] .flecha { rotate: 225deg; translate: 0 2px; }
.botonera button.atacar { color: var(--acento); }
.botonera button.atacar::before { border-color: var(--acento); border-width: 2px; }
.botonera button.atacar .icono { color: var(--acento); }
.botonera button:hover:not(:disabled)::before, .botonera button[aria-expanded="true"]::before { border-color: var(--acento); }
.botonera button:hover:not(:disabled), .botonera button[aria-expanded="true"] { color: var(--acento); }
.botonera button:hover:not(:disabled) .icono, .botonera button[aria-expanded="true"] .icono { color: var(--acento); }
.botonera button:hover:not(:disabled)::after { opacity: 0.08; }
.botonera button[aria-expanded="true"]::after, .botonera button:active:not(:disabled)::after { opacity: 0.2; }
.botonera button:disabled { opacity: 0.45; cursor: not-allowed; }
.luchador .nombre .corto { display: none; }
/* Mientras el Narrador cuenta lo que se ha mandado: la frase y una espera tranquila. */
.acciones.esperando { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font: 15px var(--f-ui); }
.acciones.esperando em { font: italic 16px var(--f-texto); color: var(--acento); }
.acciones.esperando .puntos { display: inline-block; animation: parpadeo 1.2s steps(2) infinite; }
/* Cómo acabó: se queda hasta que se cierra o se juega otra cosa. */
.acciones.desenlace { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.acciones.desenlace strong { font: 500 20px var(--f-titulo); letter-spacing: 0.08em; color: var(--tinta); }
.acciones.desenlace.victoria strong { color: var(--bien); }
.acciones.desenlace.derrota strong { color: var(--rubrica); }
.acciones.desenlace .boton-texto { margin-left: auto; }
.tablero.terminado .turnos ol { opacity: 0.5; }
.cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.carta { text-align: left; display: grid; gap: 2px; align-content: start; padding: 9px 12px 10px; background: var(--papel); border: 0; border-radius: var(--radio); position: relative; color: inherit; }
.carta::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--trazo); border-radius: var(--radio); filter: var(--pluma); pointer-events: none; }
.carta:hover:not(:disabled)::before, .carta[aria-pressed="true"]::before { border-color: var(--acento); }
.carta[aria-pressed="true"] { background: var(--acento-suave); }
.carta:disabled { opacity: 0.5; cursor: not-allowed; }
.carta .coste { font: 500 12.5px var(--f-titulo); letter-spacing: 0.08em; color: var(--aviso); }
.carta strong { font: 500 17px var(--f-texto); }
.carta .texto { font: 14px/1.35 var(--f-ui); color: var(--tinta-2); }
.carta .falta { font: italic 13.5px var(--f-texto); color: var(--mal); }
.consejo { margin: 0; font: italic 15px var(--f-texto); color: var(--tinta-2); }

/* --- La escena (G22): la lámina del sitio es el tablero. Tinta azul = tú; bermellón = lo que te va a caer. ------- */
.mesa:has(#tablero:not([hidden])) .historial { min-height: 0; padding-block: 6px; }
.escena { position: relative; width: min(100%, calc((100dvh - 395px) * 1.5)); min-width: min(100%, 420px); aspect-ratio: 3 / 2; margin: 0 auto; overflow: hidden; isolation: isolate; border-radius: var(--radio); background: #1a140d; }
.escena.temblor { animation: temblor-escena .38s; }
@keyframes temblor-escena { 15% { transform: translate(-7px, 3px); } 35% { transform: translate(7px, -3px); } 55% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }
.escena .mundo { position: absolute; inset: 0; }
.escena .lamina { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.12) contrast(1.03) brightness(.95); }
.escena .lamina.sin { background: radial-gradient(70% 90% at 30% 20%, var(--cielo), transparent 70%), linear-gradient(to bottom, transparent 55%, var(--suelo)); }
.escena .de-noche .lamina { filter: brightness(.5) saturate(.55) contrast(1.05) hue-rotate(195deg) sepia(.12); }
.escena .vinieta { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 90% at 50% 55%, transparent 55%, #1a0f0577 100%); }
.escena .capa { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.escena .manchas { mix-blend-mode: multiply; }
.escena .chispas { z-index: 450; }
.lazo { stroke: #2b1d0f; stroke-width: 2.6; stroke-dasharray: 1 9; stroke-linecap: round; opacity: .55; fill: none; }
.lazo.vale { stroke: #123f6e; opacity: 1; stroke-width: 3.5; }
.circulo { fill: #2b1d0f22; stroke: #2b1d0f; stroke-width: 2.4; opacity: .75; }
.circulo.ir { fill: #3d6f9955; stroke: #16507f; stroke-width: 3.2; opacity: 1; animation: tinta-ir 1.7s ease-in-out infinite; }
.circulo.aqui { fill: #3d6f9988; stroke: #0f3f69; stroke-width: 3.4; opacity: 1; }
.circulo.amenaza { fill: #c7321a88; stroke: #8d1f0d; stroke-width: 4; opacity: 1; animation: tinta-pulso .85s ease-in-out infinite; }
@keyframes tinta-ir { 50% { fill: #3d6f9922; } }
@keyframes tinta-pulso { 50% { fill: #c7321a44; } }
.linea, .linea-fondo { fill: none; stroke-linecap: round; }
.linea-fondo { stroke: #fff8; stroke-width: 6; }
.linea { stroke: #a02612; stroke-width: 2.5; }
.linea.paso { stroke: #3a2c18; stroke-dasharray: 2 7; }
.linea-fin { fill: #a02612; stroke: #fff; stroke-width: 2; }
.linea-fin.paso { fill: #3a2c18; }
.escena .puesto { position: absolute; transform: translate(-50%, -50%); width: 17%; height: 13%; border-radius: 50%; z-index: 1; background: none; border: 0; padding: 0; }
.escena .puesto:not(:disabled) { cursor: pointer; }
.rotulo-puesto { position: absolute; transform: translate(-50%, 0); z-index: 300; pointer-events: none; display: flex; align-items: center; gap: 4px; white-space: nowrap; padding: 0 7px 1px; border-radius: 6px; background: #f3ead6e8; color: #2b2013; font: 500 clamp(11px, 1.3vw, 15px)/1.25 var(--f-titulo); box-shadow: 0 1px 3px #0006; }
.rotulo-puesto svg { width: 1em; height: 1em; fill: none; stroke: #6b4a14; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rotulo-puesto .cuanto { font: 700 clamp(11px, 1.3vw, 15px) var(--f-ui); margin-left: 3px; color: #16507f; }
.rotulo-puesto .cuanto.mal { color: #b02a12; }
.rotulo-puesto .cuanto.bien { color: #2f7a2c; }
.rotulo-puesto.ir { background: #fff; box-shadow: 0 0 0 2px #16507f, 0 2px 5px #0007; }
.rotulo-puesto.amenaza { box-shadow: 0 0 0 2px #b02a12, 0 2px 5px #0007; }

.fig { position: absolute; transform: translate(-50%, -100%); height: calc(26% * var(--e, 1)); aspect-ratio: var(--ratio, .55); padding: 0; background: none; border: 0; display: block; transition: left .5s cubic-bezier(.35,.75,.3,1), top .5s cubic-bezier(.35,.75,.3,1), height .5s; }
.fig.ancho { height: calc(16% * var(--e, 1)); }
.fig:disabled { cursor: default; }
.fig .figura { position: absolute; inset: 0; width: auto; aspect-ratio: auto; display: block; transform-origin: 50% 96%; transition: rotate .35s, translate .35s, filter .4s; }
.fig .figura::before { content: none; }
.fig .figura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 2px #0005); transform-origin: 50% 100%; animation: respira 3.2s ease-in-out infinite; animation-delay: var(--retardo, 0s); }
@keyframes respira { 50% { scale: 1 1.016; } }
.fig .figura .medallon { --t: 100%; }
.fig.espejo .figura img { transform: scaleX(-1); }
.fig .sombra { position: absolute; left: 12%; right: 12%; bottom: -3%; height: 9%; border-radius: 50%; background: #1a0f0599; filter: blur(3px); }
.fig.anda .figura { animation: anda .26s ease-in-out infinite; }
.fig.corre .figura { animation: corre .2s ease-in-out infinite; }
.fig.rodando .figura { animation: rueda .32s linear infinite; }
@keyframes anda { 25% { transform: translateY(-3%) rotate(-2.2deg); } 75% { transform: translateY(-3%) rotate(2.2deg); } }
@keyframes corre { 50% { transform: translateY(-8%) rotate(-5deg); } }
@keyframes rueda { to { transform: rotate(360deg); } }
.fig.elegible { cursor: crosshair; }
.fig.elegible .sombra { background: transparent; filter: none; border: 3px solid #c7321a; box-shadow: 0 0 8px 1px #ff7a55; height: 12%; bottom: -5%; animation: mira-rival 1.2s ease-in-out infinite; }
@keyframes mira-rival { 50% { border-color: #ff8d6e; } }
.fig.elegible:hover img, .fig.elegible:focus-visible img { filter: drop-shadow(0 0 7px #ff6a43) drop-shadow(0 3px 2px #0005); }
.fig.aliado.elegible .sombra { border-color: #3f7a33; box-shadow: 0 0 8px 1px #8cc37a; }
.fig.ordenable { cursor: pointer; }
.fig.suelo .figura { rotate: 72deg; translate: 8% -2%; }
.fig.en-guardia img { filter: drop-shadow(0 0 7px #8fb8e8) drop-shadow(0 0 2px #cfe4ff); }
.fig.en-guardia .sombra { background: #8fb8e866; box-shadow: 0 0 12px 3px #8fb8e8; filter: none; border: 2px solid #cfe4ff; height: 12%; bottom: -5%; }
.fig.alzado .figura { translate: 0 -5%; }
.fig.alzado img { filter: drop-shadow(0 0 9px #ff5a32) drop-shadow(0 0 3px #ff5a32); }
.fig.caido { pointer-events: none; }
.fig.caido .figura { rotate: 86deg; translate: 12% 0; filter: grayscale(.8) brightness(.8); }
.fig.caido img, .fig.rendido img { animation: none; }
.fig.caido .sobre, .fig.rendido .sobre, .fig.huido .sobre { display: none; }
.fig.rendido .figura { rotate: -4deg; translate: 0 10%; filter: saturate(.3) brightness(.85); }
.fig.huido { opacity: 0; pointer-events: none; }
.fig .sobre { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); display: grid; justify-items: center; gap: 1px; width: max-content; pointer-events: none; }
.fig .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: clamp(110px, 16vw, 190px); }
.chip { display: inline-flex; align-items: center; gap: 2px; padding: 0 5px 0 3px; border-radius: 6px; font: 700 clamp(10px, 1.1vw, 13px)/1.45 var(--f-ui); white-space: nowrap; box-shadow: 0 1px 3px #0008; }
.chip svg, .intencion svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chip.bueno { background: #17507f; color: #fff; }
.chip.malo { background: #5a3a12; color: #ffe2a8; }
.chip.nuevo { animation: chip-entra .45s cubic-bezier(.2,1.5,.4,1); }
@keyframes chip-entra { from { scale: .2; opacity: 0; } }
.intencion { display: flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 7px; font: 700 clamp(12px, 1.4vw, 15px)/1.3 var(--f-ui); white-space: nowrap; background: #f3ead6; color: #4a3a22; box-shadow: 0 1px 4px #0008; }
.intencion[hidden] { display: none; }
.intencion.mal { background: #b02a12; color: #fff; }
.intencion.grave { background: #e23d1c; color: #fff; font-size: clamp(14px, 1.8vw, 19px); animation: late-grave .7s ease-in-out infinite; }
@keyframes late-grave { 50% { scale: 1.13; } }
.vidilla { width: clamp(38px, 6vw, 70px); height: 6px; border-radius: 3px; background: #2b1d0fcc; overflow: hidden; box-shadow: 0 0 0 1px #0007; display: block; }
.vidilla i { display: block; height: 100%; background: #d9492c; transition: width .3s; }
.fig.aliado .vidilla i { background: #5ea1dd; }
.fig .num { position: absolute; z-index: 60; left: 50%; top: 18%; transform: translateX(-50%); font: 800 clamp(24px, 3.6vw, 42px)/1 var(--f-titulo); color: #fff; -webkit-text-stroke: 1.5px #5d1508; paint-order: stroke; pointer-events: none; animation: cifra-salta 1s cubic-bezier(.2,.8,.3,1) forwards; white-space: nowrap; text-shadow: 0 2px 6px #000a; }
.fig .num.critico { font-size: clamp(36px, 5.4vw, 62px); color: #ffd768; }
.fig .num.falla { color: #e9dfca; font-size: clamp(17px, 2.4vw, 26px); font-style: italic; -webkit-text-stroke: 1px #3a2c18; }
.fig .num.cura { color: #b7f0a4; -webkit-text-stroke-color: #1e4d17; }
.fig .num.azul { color: #bcdcff; font-size: clamp(15px, 2vw, 22px); -webkit-text-stroke: 1px #12365a; top: 0; }
.fig .num.yo { color: #ff8d6e; }
@keyframes cifra-salta { 0% { opacity: 0; margin-top: 18px; scale: .6; } 18% { opacity: 1; scale: 1.15; margin-top: -8px; } 35% { scale: 1; } 80% { opacity: 1; margin-top: -30px; } 100% { opacity: 0; margin-top: -48px; } }
.tajo-fx { position: absolute; z-index: 400; pointer-events: none; transform: translate(-50%, -50%); width: 18%; aspect-ratio: 1; }
.tajo-fx path { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 150; stroke-dashoffset: 150; animation: raja .28s ease-out forwards; filter: drop-shadow(0 0 4px #ffb08a); }
.tajo-fx .estela { stroke: #ffb08a; stroke-width: 11; opacity: .55; filter: blur(2.5px); }
.tajo-fx.tecnica path { stroke: #fff4c9; } .tajo-fx.tecnica .estela { stroke: #ffc94d; stroke-width: 17; opacity: .8; }
.tajo-fx.fallo { opacity: .5; }
@keyframes raja { to { stroke-dashoffset: 0; } }
.icono-lanza { position: absolute; z-index: 420; width: 8%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 0 8px #ffc94d); }
.icono-lanza img { width: 100%; height: 100%; object-fit: contain; }
.onda { position: absolute; z-index: 300; width: 26%; aspect-ratio: 3; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; }
.onda.roja { border: 6px solid #ffb08a; box-shadow: 0 0 24px 5px #e23d1c, inset 0 0 18px #e23d1c; }
.onda.azul { aspect-ratio: 1; width: 16%; border: 4px solid #cfe4ff; box-shadow: 0 0 22px 4px #8fb8e8, inset 0 0 18px #8fb8e8; }
.banner { position: absolute; left: 0; right: 0; top: 40%; z-index: 430; text-align: center; font: 700 clamp(28px, 5vw, 56px)/1.2 var(--f-titulo); color: #fff5dd; text-shadow: 0 2px 16px #000, 0 0 3px #000; pointer-events: none; background: linear-gradient(90deg, transparent, #1a0f05aa 25%, #1a0f05aa 75%, transparent); }
.pie-escena { min-height: 1.9em; padding: 4px 14px; font: 15px/1.3 var(--f-ui); color: var(--tinta-2); display: block; }
.pie-escena .dicho { font: italic 16px/1.3 var(--f-texto); }
.pie-escena .amenaza { display: block; font-weight: 600; color: var(--tinta); }
.pie-escena .otra-vez { color: var(--acento); }
.estado-yo { display: none; color: var(--rubrica); font-weight: 600; }
.pie-escena.ayuda { font: 14.5px/1.3 var(--f-ui); }
.pie-escena.ayuda strong { font-weight: 700; color: var(--acento); }
.rotulo-puesto .en-juego { font: 700 .95em var(--f-ui); color: #16507f; margin-left: 3px; }
.botonera .de-sitio { outline: 1.5px solid var(--rubrica); }
.botonera .acabar { background: var(--acento); color: var(--sobre-acento); border: 0; border-radius: var(--radio); font: 500 15px var(--f-titulo); padding: 8px 10px; }
.botonera .acabar.llama { animation: acabar-llama 1.2s infinite; }
@keyframes acabar-llama { 50% { filter: brightness(1.3); } }
@media (max-width: 760px) {
  .escena { width: 100%; }
  .botonera { display: flex; flex-wrap: wrap; }
  .botonera button { flex: 1 1 0; min-width: 52px; }
  .botonera .acabar { flex: 1 0 100%; min-height: 40px; }
  .rotulo-puesto svg { display: none; }
  .fig .chips { display: none; }
  .estado-yo { display: inline; }
  .acciones-cab .arma, .acciones-cab > .tenue { display: none; }
  .rotulo-puesto:not(.ir):not(.amenaza) { opacity: .75; font-size: 10px; }
  .intencion { font-size: 12px; padding: 0 5px; }
  .vidilla { height: 4px; }
  .pie-escena { font-size: 15px; padding: 4px 10px; }
}
@media (prefers-reduced-motion: reduce) { .escena *, .escena { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* El objetivo de una batalla: se llena según avanza (aguantar) o se vacía según se pierde (proteger). */
.objetivo-batalla { position: relative; overflow: hidden; padding: 3px 10px; border-radius: 999px; font: 700 .85em var(--f-ui); color: #fff3d6; background: #3b1d12; border: 1px solid #e0912f; isolation: isolate; }
.objetivo-batalla::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--avance); background: linear-gradient(90deg, #b5451b, #e0912f); z-index: -1; transition: width .5s ease; }
.pelea-desigual { padding: 3px 10px; border: 1px solid #e0654a; border-radius: 999px; background: #3d1612; color: #ffc9ba; font: 700 .85em var(--f-ui); animation: pelea-desigual 1.2s ease-in-out 2; }
@keyframes pelea-desigual { 50% { background: #7a2a1e; } }
@media (max-width: 600px) { .turnos:has(.pelea-desigual) { flex-wrap: wrap; } .pelea-desigual { order: 3; flex-basis: 100%; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .pelea-desigual { animation: none; } }
.objetivo-batalla.proteger { border-color: #4aa3df; background: #0f2a3d; }
.objetivo-batalla.proteger::before { background: linear-gradient(90deg, #1b6ea5, #4aa3df); }
.objetivo-batalla.llegar { border-color: #5fd38d; background: #0f2f20; }
.objetivo-batalla.llegar::before { background: linear-gradient(90deg, #1f8a54, #5fd38d); }
.objetivo-batalla.romper { border-color: #e2536b; background: #3a0f1a; }
.objetivo-batalla.romper::before { background: linear-gradient(90deg, #a51f3a, #e2536b); }
.en-juego.meta { color: #0f2f20; background: #5fd38d; }