/* D-CAPAS fase 3 — el combate con el héroe entero (mesa claude/_CLAUDE_D_CAPAS_3_MESA.md).
   Tres disposiciones (.cv-vista--linea | --salon | --cine) y dos estilos (.cv-estilo-A | -B).
   La escena se mide en unidades de su contenedor (cqh/cqw): la misma vale para el escenario de
   1920 (1656×848) y el de 1366 (1146×600). Componentes en replay-adapter.jsx (Cv*). */

/* ───────── D-GC-7 (claude/_CLAUDE_D_GUARDADO_COMBATE_MESA.md) — un menú abierto con el combate en segundo plano: sólo la × y el aviso. La escena sigue corriendo debajo ───────── */
.combate-tapado-cierre { position: fixed; z-index: 9200; display: flex; align-items: center; gap: 10px; max-width: 60vw; padding: 4px 6px 4px 12px; border: 1px solid rgba(200,168,96,.45); border-radius: 4px; background: rgba(10,7,4,.92); color: #f3dfa0; font-size: 12px; }
.combate-tapado-cierre__ayuda { opacity: .7; }
.combate-tapado-cierre__aviso { font-weight: 600; }
.combate-tapado-cierre__aviso:empty { display: none; }
.combate-tapado-cierre button { background: none; border: 0; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; }
/* D-GC-9 — lo cerrado durante el combate: se ve, apagado, y dice por qué */
.en-combate-apagado { opacity: .45; filter: grayscale(.6); cursor: not-allowed !important; }

/* ───────── Vista ───────── */
.combat-screen.cv-vista {
  overflow: hidden;
  background: #07090e;
  --cv-oro: #8a6e30;
  --cv-oro-luz: #f3dfa0;
  --cv-borde: #3a4256;
  --cv-panel: rgba(8, 10, 16, 0.84);
}
/* La vista es contenedor: con un escenario estrecho (móvil, ventana pequeña) la barra se compacta. */
.combat-screen.cv-vista { container: cv-vista / size; }

.cv-vista.cv-estilo-B {
  --cv-oro: #7a2a24;
  --cv-oro-luz: #f2d0c0;
  --cv-borde: #5a2420;
}

.cv-escena {
  position: absolute;
  inset: 0;
  container-type: size;
  overflow: hidden;
}

/* D-COMBATE-UI D-CUI-1 — la barra compacta de D-CAPAS-19 (y sus rombos y su botón de disposición) sale: ver el bloque D-COMBATE-UI al final. */
.cv-estados-globales { position: absolute; top: 46px; left: 12px; right: 12px; z-index: 25; pointer-events: none; }
.cv-estados-globales > * { pointer-events: auto; }

/* ───────── Unidad: figura entera + placa ───────── */
/* D-FONDOS-SUELO D-FS-2 (claude/_CLAUDE_D_FONDOS_SUELO_MESA.md) — el fondo se encaja por su dato de suelo (src/ui/fondos_suelo.ts,
   `encajeFondo`): el hook `useEncajeFondo` (replay-adapter.jsx) pone en su caja (la escena, el arco o el hueco del marco) el ancho de la
   imagen en veces el de la caja (`--fondo-escala`) y la fila que queda arriba (`--fondo-arriba`), sin enseñar nunca una esquina de la
   viñeta pintada. Antes, `.zone-bg-wrap { inset: -13% }` y anclado arriba: escondía la viñeta, y también el suelo. Sin variables (el
   hook no corre), como antes en una escena ancha: ×1,26 y anclado arriba. Sin el `opacity: 0.8` de styles.css. La pantalla de combate
   vieja (`.combat-screen` sin `.cv-escena`) no cambia. */
.cv-escena .zone-bg-image img {
  position: absolute;
  left: 50%;
  top: var(--fondo-arriba, -13%);
  width: calc(var(--fondo-escala, 1.26) * 100%);
  height: auto;
  max-width: none;
  max-height: none;
  translate: -50% 0;
  opacity: 1;
}

.cv-actor {
  position: absolute;
  transform: translateX(-50%);
  cursor: pointer;
  --cv-dx: 4cqw;
  --cv-dy: 0;
}
.cv-actor--enemigo { --cv-dx: -4cqw; }
.cv-arte { height: 100%; display: flex; justify-content: center; }
.cv-cuerpo {
  height: 100%;
  width: auto;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}
img.cv-cuerpo {
  transform-origin: 50% 100%;
  animation: cv-respira 3.8s ease-in-out infinite;
  animation-delay: var(--cv-d, 0s);
}
@keyframes cv-respira { 50% { scale: 1 1.012; } }
.cv-mover { height: 100%; position: relative; transition: opacity 0.6s, filter 0.6s; }

/* sombra en el suelo, héroe elegido (F1-F4) y objetivo (Tab) */
/* D-FONDOS-SUELO D-FS-4 (claude/_CLAUDE_D_FONDOS_SUELO_MESA.md) — la sombra de contacto, con el ancho de los pies de la figura
   (`--cv-pie-ancho`: lo pone figura_capas.ts con su esqueleto, o replay-adapter.jsx midiendo la imagen; sin medida, 46 %) y doble:
   un núcleo pegado de 1,2 cqh y un halo ×1,6 más ancho y suave. Su opacidad, la de la luz de la zona (`--cv-sombra-op`, de
   luz_escena.ts por la escena): con la de día (0,34), núcleo 0,7 y halo 0,3. */
.cv-escena {
  --cv-sombra-nucleo: min(0.85, calc(var(--cv-sombra-op, 0.35) * 2));
  --cv-sombra-halo: calc(var(--cv-sombra-op, 0.35) * 0.88);
}
/* D-PULIDOS-31 D-P31-1 (claude/_CLAUDE_D_PULIDOS_31_MESA.md) — los pies, justo sobre su sombra. Medido en prod (0.9.5.992) en las tres
   disposiciones: la planta ya caía a ±5 px del centro de la sombra (≤ 1,5 % del alto; las imágenes de enemigo no tienen margen bajo los
   pies), pero el núcleo medía lo mismo que los pies (×1,0 de `--cv-pie-ancho`): su mitad de arriba quedaba tapada por los propios pies
   y sólo se veía la de abajo, colgando bajo la planta — de ahí que pareciera que levitan. Ahora el núcleo asoma a los dos lados de los
   pies (×1,65) y la elipse, más baja (2 cqh), se centra en la línea de la planta: `--cv-pie-suelo` (lo que el dibujo deja transparente
   bajo los pies, en % del alto del actor; lo pone replay-adapter.jsx al medir la imagen; sin medida, 0). Barras y clic no cambian. */
.cv-actor::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(var(--cv-pie-suelo, 0%) - 1cqh);
  width: calc(var(--cv-pie-ancho, 46%) * 2.2);
  height: 2cqh;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(0, 0, 0, var(--cv-sombra-nucleo, 0.7)), transparent) center / 75% 60% no-repeat,
    radial-gradient(closest-side, rgba(0, 0, 0, var(--cv-sombra-halo, 0.3)), transparent);
  z-index: -1;
  pointer-events: none;
}
/* el anillo del elegido y del objetivo, con su tamaño de siempre, centrado también en la planta (D-P31-1) */
.cv-actor.cv-sel::before, .cv-actor.cv-objetivo::before { bottom: calc(var(--cv-pie-suelo, 0%) - 1.7cqh); width: 70%; height: 3.4cqh; }
/* P-6 — el que flota por diseño (ARTE_QUE_FLOTA): la sombra se queda en el suelo, más tenue y más pequeña; la figura, 3 cqh arriba.
   D-P31-1: como estaba (no se apoya en el suelo, así que ni la planta ni el núcleo ancho). */
.cv-actor--flota::before { bottom: -1cqh; width: calc(var(--cv-pie-ancho, 46%) * 1.1); height: 2.4cqh; --cv-sombra-nucleo: 0.35; --cv-sombra-halo: 0.15;
  background:
    radial-gradient(closest-side, rgba(0, 0, 0, var(--cv-sombra-nucleo, 0.7)), transparent) center / 62.5% 50% no-repeat,
    radial-gradient(closest-side, rgba(0, 0, 0, var(--cv-sombra-halo, 0.3)), transparent); }
.cv-actor--flota.cv-sel::before, .cv-actor--flota.cv-objetivo::before { bottom: -1.2cqh; }
.cv-actor--flota .cv-arte { translate: 0 -3cqh; }
/* D-FONDOS-SUELO D-FS-5 — oscurecido de pies de las imágenes planas: el 9 % inferior de la figura (desde su fila opaca más baja,
   `--cv-pie-margen`), multiplicado hacia el negro y recortado a su silueta con la misma imagen como máscara (`--cv-arte-url`, la pone
   FiguraCombate). Sin `mask`, nada (mejora progresiva). Las figuras por capas lo hacen en su lienzo (reposo_capas.ts). */
.cv-arte--plana { position: relative; }
@supports (mask-image: none) or (-webkit-mask-image: none) {
  .cv-arte--plana::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, transparent var(--cv-pie-margen, 0%), rgba(0, 0, 0, 0.35) var(--cv-pie-margen, 0%), transparent calc(var(--cv-pie-margen, 0%) + 9%));
    mix-blend-mode: multiply;
    -webkit-mask-image: var(--cv-arte-url);
    mask-image: var(--cv-arte-url);
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
    -webkit-mask-position: bottom center;
    mask-position: bottom center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}
.cv-actor.cv-sel::before { background: radial-gradient(closest-side, rgba(243, 223, 160, 0.55), rgba(200, 168, 96, 0.18) 60%, transparent); }
.cv-actor.cv-objetivo::before {
  background: radial-gradient(closest-side, transparent 62%, rgba(255, 120, 80, 0.75) 70%, transparent 78%);
}
.cv-actor.cv-amenaza::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(var(--cv-pie-suelo, 0%) - 2.1cqh); /* D-P31-1 — centrado en la planta, como la sombra */
  width: 78%;
  height: 4.2cqh;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 2px solid rgba(230, 70, 50, 0.85);
  box-shadow: 0 0 14px rgba(230, 70, 50, 0.7);
  animation: cv-amenaza 0.9s ease-out forwards;
  pointer-events: none;
}
.cv-actor--flota.cv-amenaza::after { bottom: -1.7cqh; }
@keyframes cv-amenaza {
  from { opacity: 0; scale: 0.6; }
  30% { opacity: 1; }
  to { opacity: 0; scale: 1.1; }
}
.cv-mover.cv-embiste { animation: cv-embiste 0.38s ease-out; }
@keyframes cv-embiste { 35% { translate: var(--cv-dx) var(--cv-dy); } }
/* D-EFECTOS-T1 (D-EF1-8) — el golpeado retrocede hacia atrás de SU lado (antes el enemigo se echaba hacia el grupo), con un aplastado
   de un instante; el crítico, más. --cv-dx apunta al enemigo: el retroceso es su contrario. */
.cv-mover { transform-origin: 50% 100%; }
.cv-mover.cv-herido { animation: cv-herido 0.33s; }
@keyframes cv-herido {
  18% { translate: calc(var(--cv-dx) * -0.13) 0; scale: 1.03 0.97; filter: brightness(1.7) drop-shadow(0 0 12px #f33); }
  60% { translate: calc(var(--cv-dx) * 0.05) 0; scale: 1; }
}
.cv-mover.cv-herido-fuerte { animation: cv-herido-fuerte 0.46s; }
@keyframes cv-herido-fuerte {
  14% { translate: calc(var(--cv-dx) * -0.28) 0; scale: 1.05 0.94; filter: brightness(2) drop-shadow(0 0 16px #f33); }
  55% { translate: calc(var(--cv-dx) * 0.07) 0; scale: 1; }
}
/* D-EF1-8 — el que llega entra deslizándose desde su lado (antes add-entering sólo existía para la tarjeta vieja) */
.cv-actor.add-entering .cv-mover { animation: cv-entra 0.7s ease-out both; }
@keyframes cv-entra { from { translate: calc(var(--cv-dx) * -1.8) 0; opacity: 0; } 60% { opacity: 1; } to { translate: 0 0; opacity: 1; } }
body.ui-efectos-reducidos .cv-actor.add-entering .cv-mover { animation: none; }
.cv-mover.cv-lanza { filter: drop-shadow(0 0 18px rgba(140, 230, 160, 0.9)); }
.cv-actor.cv-muerto .cv-mover { opacity: 0.22; filter: grayscale(1) brightness(0.5); }
.cv-actor--enemigo.cv-muerto { pointer-events: none; }
/* D-EFECTOS-T1 (D-EF1-9) — el enemigo que cae se hunde, se inclina hacia atrás, se apaga y desaparece (la ceniza la pone el director);
   antes quedaba un fantasma al 22 %. Mínimos: se funde sin más. */
.cv-actor--enemigo.cv-muerto .cv-mover { animation: cv-ceniza 1.3s ease-in forwards; }
@keyframes cv-ceniza {
  0% { opacity: 1; filter: none; }
  25% { opacity: 0.95; translate: 0 1cqh; rotate: 2deg; filter: grayscale(0.6) brightness(0.8); }
  100% { opacity: 0; translate: 0 4cqh; rotate: 5deg; scale: 1 0.94; filter: grayscale(1) brightness(0.4); }
}
body.ui-efectos-reducidos .cv-actor--enemigo.cv-muerto .cv-mover { animation: none; opacity: 0; }
.cv-actor--enemigo.cv-muerto .cv-placa { opacity: 0; }

.cv-placa {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.6cqh);
  transform: translateX(-50%);
  width: clamp(130px, 15.5cqw, 240px); /* D-IMPACTOS D-IMP-5 — 13cqw/110-210 px: con el medallón y la gema, el nombre no cabía */
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  z-index: 3;
  transition: opacity 0.4s;
}
.cv-placa .status-icon-row,
.cv-placa .replay-status-row { justify-content: center; }
/* D-PULIDOS-31 D-P31-6 — los nombres de las fichas de combate, en la letra de texto en negrita (Cinzel sólo en títulos cortos y rótulos) */
.cv-placa__nombre {
  font-family: var(--ui-fuente-texto) !important; font-weight: 700;
  font-size: 13px;
  color: #efe9d7;
  text-shadow: 0 1px 3px #000, 0 0 8px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-actor--enemigo .cv-placa__nombre { color: #f2c4b4; }
.cv-placa__nombre small { margin-left: 5px; font-size: 11px; color: #c8c1ac; }

/* D-IMPACTOS D-IMP-5/6 (claude/_CLAUDE_D_IMPACTOS_MESA.md) — medallón y placa: placa oscura translúcida SIN desenfoque (no se mueve con
   el temblor ni cuesta GPU), el medallón del nivel a la izquierda, el nombre y la gema de rareza arriba y la barra integrada abajo.
   Sin colores de rareza escritos aquí: la gema los recibe de la fuente única (src/ui/rotulos_combate.ts, --gema). */
.cv-rotulo {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 3px 7px 4px 3px; border-radius: 9px;
  background: rgba(10, 8, 6, 0.62); border: 1px solid rgba(214, 178, 94, 0.22);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.cv-rotulo__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cv-rotulo__linea { display: flex; align-items: center; gap: 5px; min-width: 0; }
.cv-rotulo .cv-placa__nombre { flex: 1 1 auto; min-width: 0; text-align: left; font-size: 14px; text-shadow: 0 1px 2px #000; }
.cv-placa--jefe .cv-rotulo { border-color: rgba(232, 193, 90, 0.7); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.55); }
.cv-placa--jefe { width: clamp(150px, 18cqw, 280px); }
.cv-nivel-med {
  position: relative; flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-family: var(--ui-fuente-texto) !important; font-weight: 800; font-size: 14px; line-height: 1;
}
.cv-nivel-med--con { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), transparent 60%), var(--med-fondo, #8d8773); color: var(--med-texto, #16110a); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.85), 0 0 0 3px rgba(255, 255, 255, 0.16); }
.cv-nivel-med--heroe { background: #15110b; box-shadow: 0 0 0 2px var(--med-aro, #c9b27a), 0 0 0 3.5px rgba(0, 0, 0, 0.8); color: #f3ead7; }
.cv-nivel-med--heroe img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; }
.cv-nivel-med__nivel {
  position: absolute; right: -7px; bottom: -5px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; border-radius: 8px;
  display: grid; place-items: center; font-size: 10px; background: #0e0b08; color: #f3ead7; border: 1px solid var(--med-aro, #c9b27a);
}
.cv-nivel-med--mini { width: 17px; height: 17px; font-size: 10px; }
.cv-nivel-med--mini.cv-nivel-med--heroe { box-shadow: 0 0 0 1.5px var(--med-aro, #c9b27a), 0 0 0 2.5px rgba(0, 0, 0, 0.8); }
/* la rareza: la palabra dentro de una gema tallada de su color, con la letra que se lea sobre él (--gema-texto) */
.cv-gema-rareza {
  flex: none; padding: 1px 8px; font-family: var(--ui-fuente-texto) !important; font-weight: 800; font-size: 10px; line-height: 14px;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; text-shadow: none;
  color: var(--gema-texto, #16110a);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.18)), var(--gema, #8d8773);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
}
.cv-placa .enemy-cast-telegraph-slot,
.cv-placa .enemy-cast-telegraph { width: 100%; margin: 2px 0 0; }

.cv-placa--minima {
  bottom: auto;
  top: 100%;
  margin-top: 1.2cqh;
  width: clamp(70px, 8cqw, 130px);
}
.cv-placa--minima .cv-barra--vida { height: 4px; opacity: 0.9; }
/* D-IMP-5/6 — en Cine, el medallón pequeño junto a la barra, sobre una placa mínima */
.cv-placa--minima .cv-rotulo { gap: 4px; padding: 2px 5px 2px 2px; border-radius: 10px; background: rgba(10, 8, 6, 0.5); border-color: transparent; box-shadow: none; }

/* D-ODIO (D-OD-11) — a quién va el enemigo, con el color de su clase.
   D-IMPACTOS D-IMP-5 — sin píldora ni borde: una línea tenue en el color de clase del objetivo, más discreta que el nombre. */
.cv-vaa {
  align-self: center;
  max-width: 100%;
  padding: 0 4px;
  color: var(--cv-vaa-color, #c9b27a);
  font-family: var(--ui-fuente-texto) !important;
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000, 0 0 6px #000;
}
.cv-vaa__flecha { margin-right: 3px; }

/* barras */
.cv-barra { position: relative; height: 9px; border-radius: 3px; background: #05060a; border: 1px solid #262c3a; overflow: hidden; }
.cv-barra > i { position: absolute; inset: 0 auto 0 0; background: var(--cv-c, #c43c3c); transition: width 0.3s ease-out; }
/* D-IMPACTOS D-IMP-4 — el rastro del daño: una franja clara debajo de la vida que la sigue un momento después (al curar, tapada) */
.cv-barra > b.cv-barra__rastro { position: absolute; inset: 0 auto 0 0; background: rgba(255, 232, 196, 0.85); transition: width 0.45s ease-in calc(var(--rastro-espera, 0ms) + 450ms); }
@media (prefers-reduced-motion: reduce) { .cv-barra > b.cv-barra__rastro { transition: width 0s linear calc(var(--rastro-espera, 0ms) + 600ms); } }
body.ui-efectos-reducidos .cv-barra > b.cv-barra__rastro { transition: width 0s linear calc(var(--rastro-espera, 0ms) + 600ms); }
.cv-barra > i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 55%); }
.cv-barra > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; line-height: 1; color: #fff; text-shadow: 0 1px 2px #000; } /* D-CO-OBJ-8: line-height 1, la letra no mide más que la barra */
.cv-barra--vida { --cv-c: linear-gradient(90deg, #8e2323, #d24a3c); }
.cv-barra--mana { --cv-c: linear-gradient(90deg, #2a4f9e, #5fa0e8); height: 6px; }
.cv-barra--cast { --cv-c: linear-gradient(90deg, #6a4cc8, #c8a0ff); height: 5px; }
.cv-barra.cv-oculta { visibility: hidden; }
.cv-placa .cv-barra--vida { height: 8px; }

/* botón Auto / Manual por héroe (secundarias) */
.cv-auto {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 3px;
  border: 1px solid #4a5268;
  background: rgba(0, 0, 0, 0.5);
  color: #c8c1ac;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 15px;
  cursor: pointer;
  vertical-align: 2px;
}
.cv-auto.on { border-color: #4f8a4f; color: #9fe09f; }

/* P90 — selector de perfil y modo de IA por héroe (sólo 'eq' con reglas); ocupa el sitio del botón Auto */
.cv-ia {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  vertical-align: 2px;
}
.cv-ia select {
  max-width: 92px;
  padding: 0 2px;
  border-radius: 3px;
  border: 1px solid #4f8a4f;
  background: rgba(0, 0, 0, 0.6);
  color: #9fe09f;
  font-size: 9px;
  line-height: 15px;
  height: 17px;
  cursor: pointer;
}
.cv-ia select option { background: #15181f; color: #e8e2cc; }
.cv-ia.manual select { border-color: #4a5268; color: #c8c1ac; }
.cv-ia-aviso {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #8a6a2a;
  color: #fff3d0;
  font-size: 9px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}
#rpg-root .cv-consola .cv-ia { margin: 0; }
/* en el marco del Salón va en su fila, debajo del nombre: los dos desplegables a lo ancho del marco */
.cv-marco__datos .cv-ia {
  display: flex;
  margin: 2px 0 1px;
  width: 100%;
  vertical-align: baseline;
}
.cv-marco__datos .cv-ia select { flex: 1 1 0; min-width: 0; max-width: none; }

/* dock de habilidades flotando abajo (Línea, Cine) */
.cv-dock {
  position: absolute;
  left: 50%;
  bottom: 1cqh;
  /* translate (no transform): así scale encoge sobre su centro y el dock sigue centrado */
  translate: -50% 0;
  transform-origin: bottom center;
  z-index: 20;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--cv-panel);
  border: 1px solid var(--cv-borde);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
  max-width: 96%;
}
.cv-estilo-B .cv-dock { border-radius: 2px; border-top: 3px solid var(--cv-oro); }
.cv-dock .v3-dock-lootun { margin: 0; padding: 2px 0 4px; gap: 18px; flex-wrap: nowrap; width: auto; }
.cv-dock .v3-dock-pj-label { font-size: 10px; }
@container (max-height: 700px) {
  .cv-dock { scale: 0.74; }
}

/* D-COMBATE-UI D-CUI-2 — la barra del jugador de D-COMBATE-PROPIO y su libro de la cuenta atrás salen: ver el bloque D-COMBATE-UI. */

/* números flotantes dentro de la figura: las píldoras de siempre (retrato + icono + cifra) se pensaron para
   tarjetas de 252 px; sobre una figura tapaban medio cuerpo. Más pequeñas y más transparentes. */
.cv-actor .replay-float-wrap { z-index: 6; }
.cv-actor .dmg-float--enriched { scale: 0.72; }
.cv-actor .dmg-float-pill { background: rgba(8, 10, 18, 0.45); border-color: rgba(255, 255, 255, 0.08); }
@container (max-height: 420px) {
  .cv-actor .dmg-float--enriched { scale: 0.55; }
}

/* ───────── D-CAPAS fase 4: acciones de la malla y efectos ───────── */
/* La figura con acciones ocupa el 90 % del alto de su lienzo (src/ui/figura_capas.ts MARCO_ACCIONES): el lienzo
   crece para que la figura siga midiendo lo mismo, apoyada abajo. */
.cv-arte { align-items: flex-end; }
.cv-cuerpo.cv-cuerpo--acciones { height: calc(100% / 0.9); flex: none; }
/* D-ALTURAS — cada raza a su altura (src/data/razas.ts escalaDeRaza: gnomo 0,70 · humano 1 · ogro 1,20), apoyada en el suelo */
.cv-cuerpo.cv-cuerpo--capas { height: calc(100% * var(--escala-raza, 1)); flex: none; }
.cv-cuerpo.cv-cuerpo--capas.cv-cuerpo--acciones { height: calc(100% / 0.9 * var(--escala-raza, 1)); }
/* D-MALLA-ENEMIGOS D-MEF-1 — el enemigo animado (src/ui/figura_plana.ts): su lienzo va encima de su <img>, que se queda invisible
   y da el tamaño del actor (clic, ficha y sombra no cambian). Fuera del flujo, centrado y apoyado abajo por el flex de .cv-arte;
   la figura ocupa --cv-marco-alto de su alto, así que mide lo mismo que la imagen. */
.cv-arte--malla { position: relative; }
.cv-cuerpo.cv-cuerpo--capas.cv-cuerpo--plana { position: absolute; height: calc(100% / var(--cv-marco-alto, 0.92)); width: auto; max-width: none; }
img.cv-cuerpo.cv-cuerpo--oculta { visibility: hidden; animation: none; }
/* sólo donde salen juntos (línea y cine): en el salón cada uno va en su marco, y la consola es su ventana — ahí, sin escala */
.cv-marco .cv-cuerpo.cv-cuerpo--capas, .cv-consola__fig .cv-cuerpo.cv-cuerpo--capas { --escala-raza: 1 !important; }
.cv-mover.cv-esquiva { animation: cv-esquiva 0.45s ease-out; }
@keyframes cv-esquiva { 35% { translate: calc(var(--cv-dx) * -0.8) 0; opacity: 0.7; } }

.cv-fx { position: absolute; inset: 0; z-index: 12; pointer-events: none; overflow: hidden; }
.cv-tajo {
  position: absolute; width: 22cqh; height: 22cqh; margin: -11cqh 0 0 -11cqh; border-radius: 50%;
  border-top: 0.8cqh solid rgba(255, 248, 220, 0.95); filter: drop-shadow(0 0 10px #ffd27a);
  animation: cv-tajo 0.32s ease-out forwards;
}
@keyframes cv-tajo { from { opacity: 0; rotate: var(--r0); scale: 0.7; } 30% { opacity: 1; } to { opacity: 0; rotate: var(--r1); scale: 1.05; } }
.cv-circulo {
  position: absolute; width: 22cqh; height: 6cqh; margin: -3cqh 0 0 -11cqh; border-radius: 50%; border: 3px dashed var(--c);
  box-shadow: 0 0 24px var(--c), inset 0 0 18px var(--c); animation: cv-circulo 1.6s linear forwards;
}
@keyframes cv-circulo { from { opacity: 0; scale: 0.5; } 20% { opacity: 0.95; } 85% { opacity: 0.9; } to { opacity: 0; scale: 1.15; } }
.cv-chispa {
  position: absolute; width: 0.9cqh; height: 0.9cqh; margin: -0.45cqh; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 10px var(--c); animation: cv-chispa 1.1s ease-out forwards;
}
@keyframes cv-chispa { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: var(--vx) -16cqh; } }
.cv-destello {
  position: absolute; width: 12cqh; height: 12cqh; margin: -6cqh; border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(200, 220, 255, 0.6) 30%, transparent 65%); animation: cv-destello 0.3s ease-out forwards;
}
@keyframes cv-destello { from { opacity: 1; scale: 0.3; } to { opacity: 0; scale: 1.4; } }
.cv-escena.cv-sacude { animation: cv-sacude 0.35s; }
@keyframes cv-sacude { 20% { translate: -0.5cqw 0.3cqh; } 40% { translate: 0.4cqw -0.4cqh; } 60% { translate: -0.3cqw 0.2cqh; } 80% { translate: 0.2cqw 0; } }
body.ui-efectos-reducidos .cv-fx { display: none; }

/* ═══════════ D-EFECTOS-T1 (claude/_CLAUDE_D_EFECTOS_T1_MESA.md) — lo que viaja, los impactos y los momentos ═══════════════════
   Todo en .cv-fx (dentro de la escena), movido con Web Animations por el director (replay-adapter.jsx); aquí sólo la forma.
   Procedural, sin arte: degradados y recortes; nada de box-shadow animado. */
.cv-pry {
  position: absolute; left: 0; top: 0; width: 3.4cqh; height: 3.4cqh; margin: -1.7cqh 0 0 -1.7cqh; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 16%, var(--c) 40%, transparent 70%); will-change: transform;
}
.cv-pry--estela::before {
  content: ''; position: absolute; right: 45%; top: 50%; width: 6cqh; height: 1.3cqh; margin-top: -0.65cqh; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--c)); opacity: 0.6;
}
.cv-pry--bola { width: 4cqh; height: 4cqh; margin: -2cqh 0 0 -2cqh; background: radial-gradient(circle at 60% 50%, #fff 0 14%, #ffd27a 26%, var(--c) 46%, transparent 70%); }
.cv-pry--bola.cv-pry--estela::before { width: 7cqh; height: 2cqh; margin-top: -1cqh; background: linear-gradient(90deg, transparent, #c8321a 50%, var(--c)); opacity: 0.75; }
.cv-pry--esquirla { width: 5.2cqh; height: 2cqh; margin: -1cqh 0 0 -2.6cqh; border-radius: 0; clip-path: polygon(0 50%, 30% 12%, 100% 50%, 30% 88%); background: linear-gradient(90deg, var(--c), #fff); }
.cv-pry--orbe::after { content: ''; position: absolute; inset: -18%; border-radius: 50%; border: 0.3cqh dashed var(--c); opacity: 0.85; }
.cv-pry--humo { width: 4.2cqh; height: 4.2cqh; margin: -2.1cqh 0 0 -2.1cqh; background: radial-gradient(circle at 45% 50%, #1a0f24 0 26%, var(--c) 48%, transparent 72%), radial-gradient(circle at 20% 35%, rgba(60, 30, 90, 0.7) 0 20%, transparent 40%); }
.cv-pry--nube { width: 4.4cqh; height: 4.4cqh; margin: -2.2cqh 0 0 -2.2cqh; background: radial-gradient(circle at 35% 40%, var(--c) 0 18%, transparent 36%), radial-gradient(circle at 65% 62%, var(--c) 0 16%, transparent 34%), radial-gradient(circle, rgba(216, 214, 94, 0.45) 0 38%, transparent 66%); }
.cv-pry--gota { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 60% 40%, #f4ffd0 0 14%, var(--c) 42%, transparent 72%); }
.cv-pry--lanza { width: 7.5cqh; height: 1cqh; margin: -0.5cqh 0 0 -3.75cqh; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--c) 55%, #fff); }
.cv-pry--espina { width: 4.6cqh; height: 2cqh; margin: -1cqh 0 0 -2.3cqh; border-radius: 0; clip-path: polygon(0 30%, 100% 50%, 0 70%, 18% 50%); background: linear-gradient(90deg, #2f6b2a, var(--c)); }
.cv-pry--cura { width: 3.8cqh; height: 3.8cqh; margin: -1.9cqh 0 0 -1.9cqh; background: radial-gradient(circle, #f2fff4 0 20%, var(--c) 44%, transparent 72%); }
.cv-pry--destello { width: 4.4cqh; height: 4.4cqh; margin: -2.2cqh 0 0 -2.2cqh; background: radial-gradient(circle, #fffbe6 0 14%, var(--c) 34%, transparent 66%); }
.cv-pry--flecha { width: 6.4cqh; height: 0.55cqh; margin: -0.28cqh 0 0 -3.2cqh; border-radius: 0; background: linear-gradient(90deg, #d8d0c0 0 10%, #7a5a32 10% 84%, #e8e8e8 84%); }
/* con icono: un orbe del color de su escuela con el icono dentro (derecho: contrarrota lo que gira el proyectil) */
.cv-pry.cv-pry--icono { width: 4.6cqh; height: 4.6cqh; margin: -2.3cqh 0 0 -2.3cqh; border-radius: 50%; clip-path: none; background: radial-gradient(circle, transparent 0 52%, var(--c) 60%, transparent 76%); }
.cv-pry__icono { position: absolute; left: 50%; top: 50%; width: 2.9cqh; height: 2.9cqh; margin: -1.45cqh 0 0 -1.45cqh; border-radius: 50%; object-fit: cover; rotate: calc(var(--ang, 0deg) * -1); outline: 0.25cqh solid var(--c); }

.cv-imp { position: absolute; width: 12cqh; height: 12cqh; margin: -6cqh 0 0 -6cqh; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff 0 9%, var(--c) 26%, transparent 60%); }
.cv-imp--esquirla { background: conic-gradient(from 10deg, transparent 0 6%, var(--c) 6% 9%, transparent 9% 22%, #fff 22% 24%, transparent 24% 40%, var(--c) 40% 43%, transparent 43% 58%, #fff 58% 60%, transparent 60% 75%, var(--c) 75% 78%, transparent 78%); -webkit-mask: radial-gradient(circle, #000 25%, transparent 62%); mask: radial-gradient(circle, #000 25%, transparent 62%); }
.cv-imp--orbe { background: radial-gradient(circle, transparent 0 34%, var(--c) 40%, transparent 50%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 12%, transparent 30%); }
.cv-imp--humo, .cv-imp--nube, .cv-imp--gota { background: radial-gradient(circle at 40% 45%, var(--c) 0 16%, transparent 34%), radial-gradient(circle at 62% 58%, var(--c) 0 14%, transparent 32%), radial-gradient(circle, rgba(20, 10, 30, 0.35) 0 30%, transparent 56%); }
.cv-imp--lanza { background: linear-gradient(var(--c), var(--c)) center / 0.9cqh 80% no-repeat, linear-gradient(var(--c), var(--c)) center / 80% 0.9cqh no-repeat, radial-gradient(circle, #fff 0 10%, transparent 40%); }
.cv-imp--flecha { width: 6cqh; height: 6cqh; margin: -3cqh 0 0 -3cqh; background: radial-gradient(circle, #fff 0 14%, rgba(255, 240, 210, 0.6) 30%, transparent 60%); }
.cv-imp-chispa { position: absolute; width: 0.8cqh; height: 0.8cqh; margin: -0.4cqh 0 0 -0.4cqh; border-radius: 50%; background: var(--c); pointer-events: none; }
.cv-aro { position: absolute; width: 16cqh; height: 4.4cqh; margin: -2.2cqh 0 0 -8cqh; border-radius: 50%; border: 0.45cqh solid var(--c); pointer-events: none; }
.cv-columna { position: absolute; width: 10cqh; height: 38cqh; margin: -38cqh 0 0 -5cqh; transform-origin: 50% 100%; pointer-events: none; background: linear-gradient(0deg, var(--c), rgba(255, 240, 200, 0.35) 55%, transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 30% 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30% 70%, transparent); }
.cv-ceniza { position: absolute; width: 0.9cqh; height: 0.9cqh; margin: -0.45cqh 0 0 -0.45cqh; border-radius: 50%; background: #6f655a; pointer-events: none; }
.cv-ceniza.cv-polvo { width: 2.2cqh; height: 1.2cqh; background: radial-gradient(closest-side, rgba(170, 150, 120, 0.7), transparent); }
.cv-vineta { position: absolute; left: 0 !important; top: 0 !important; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 42%, rgba(170, 20, 10, 0.75) 100%); }
.cv-velo { position: absolute; left: 0 !important; top: 0 !important; inset: 0; pointer-events: none; background: #fff; }
.cv-onda { position: absolute; width: 26cqh; height: 7cqh; margin: -3.5cqh 0 0 -13cqh; border-radius: 50%; border: 0.6cqh solid rgba(255, 90, 60, 0.9); pointer-events: none; }
/* D-EF1-11 — la presentación del jefe: el velo con hueco en el jefe y su contraluz rojo */
.cv-presenta-velo {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--x, 70%) var(--y, 50%), transparent 0 13cqh, rgba(0, 0, 0, 0.3) 26cqh);
  animation: cv-presenta-velo 2.9s ease-in-out forwards;
}
@keyframes cv-presenta-velo { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
.cv-actor.cv-jefe-presenta .cv-arte { filter: drop-shadow(0 0 16px rgba(255, 40, 20, 0.85)) drop-shadow(0 0 5px rgba(255, 110, 70, 0.9)); transition: filter 0.4s; }

/* presentación del jefe (D-CAPAS-17) */
.cv-presenta {
  position: absolute;
  left: 0;
  right: 0;
  top: 32%;
  z-index: 40;
  text-align: center;
  pointer-events: none;
  animation: cv-presenta 2.8s ease-out forwards;
}
.cv-presenta::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  bottom: -22px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(60, 8, 4, 0.78) 25%, rgba(60, 8, 4, 0.78) 75%, transparent);
}
.cv-presenta__t1 { font-family: 'Cinzel', serif !important; font-size: clamp(28px, 6cqh, 54px); letter-spacing: 0.18em; color: #ffd0b0; text-shadow: 0 0 30px #a02010, 0 2px 0 #000; }
.cv-presenta__t2 { font-size: 13px; letter-spacing: 0.4em; color: #e8b0a0; text-transform: uppercase; }
@keyframes cv-presenta {
  0% { opacity: 0; transform: scaleX(1.4); }
  12% { opacity: 1; transform: none; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ───────── Cine: bandas y escena limpia ───────── */
.cv-escena--cine::before,
.cv-escena--cine::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 6cqh;
  background: #000;
  z-index: 15;
  pointer-events: none;
}
.cv-escena--cine::before { top: 0; }
.cv-escena--cine::after { bottom: 0; }
.cv-escena--cine .cv-dock { bottom: 0.4cqh; padding: 1px 10px; background: rgba(0, 0, 0, 0.6); }

/* ───────── Salón dorado: arco de enemigos + cuatro marcos ───────── */
.cv-arco {
  position: absolute;
  left: 5%;
  right: 5%;
  top: max(7cqh, 56px);
  /* lo que deja libre la fila de marcos (38cqh + márgenes), también con escenarios muy bajos */
  height: calc(58cqh - max(7cqh, 56px));
  overflow: hidden;
  border: 2px solid var(--cv-oro);
  border-radius: 45% 45% 6px 6px / 22% 22% 6px 6px;
  box-shadow: 0 0 0 6px rgba(20, 16, 8, 0.95), 0 0 0 7px var(--cv-oro), 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 0 60px rgba(0, 0, 0, 0.85);
}
.cv-estilo-B .cv-arco { border-radius: 4px; box-shadow: 0 0 0 4px rgba(26, 10, 12, 0.95), 0 0 0 5px var(--cv-oro), 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 0 60px rgba(0, 0, 0, 0.85); }
.cv-arco .cv-placa { width: clamp(100px, 11cqw, 180px); }
.cv-escena--salon > .zone-backdrop { display: none; }
.cv-escena--salon { background: radial-gradient(ellipse at 50% 30%, #2a2214, #0a0806 70%); }
.cv-estilo-B .cv-escena--salon { background: radial-gradient(ellipse at 50% 30%, #2a1418, #0a0607 70%); }

.cv-salon-fila {
  position: absolute;
  left: 1%;
  right: 1%;
  bottom: 1.4cqh;
  height: 38cqh;
  display: grid;
  grid-template-columns: repeat(var(--cv-n, 4), minmax(0, 24.2%));
  justify-content: center;
  gap: 1%;
}
.cv-marco {
  position: relative;
  display: grid;
  grid-template-columns: 40% 1fr;
  /* la fila es el alto del marco: si los datos no caben, se recortan ellos, no la figura */
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--cv-oro);
  border-radius: 6px;
  background: radial-gradient(ellipse at 30% 80%, rgba(200, 168, 96, 0.12), transparent 60%), linear-gradient(180deg, #17130c, #0a0907);
  box-shadow: inset 0 0 0 1px rgba(255, 230, 160, 0.12), 0 8px 20px rgba(0, 0, 0, 0.6);
}
.cv-estilo-B .cv-marco {
  border: 0;
  border-top: 4px solid var(--cv-oro);
  border-radius: 2px;
  background: linear-gradient(180deg, #2a1418, #0e0a0c);
}
.cv-marco.sel { box-shadow: 0 0 20px rgba(243, 223, 160, 0.35), inset 0 0 0 1px rgba(255, 230, 160, 0.3); }
.cv-marco.cv-muerto { filter: grayscale(0.8) brightness(0.6); }
.cv-marco__hueco { position: relative; }
.cv-marco__hueco .cv-actor { cursor: inherit; }
.cv-marco__datos { padding: 10px 10px 8px 4px; display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 0; overflow: hidden; }
.cv-marco__datos > * { flex-shrink: 0; }
.cv-marco__nombre { font-family: var(--ui-fuente-texto) !important; font-weight: 700; /* D-P31-6 */ font-size: 16px; color: var(--cv-oro-luz); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* D-IMPACTOS D-IMP-6 — clase y nivel legibles (13 px crema, no 11 px gris) junto a su medallón; a la derecha, lo último que pegó (D-IMP-4) */
.cv-marco__clase { display: flex; align-items: center; gap: 9px; min-width: 0; margin: 1px 0 2px 2px; font-family: var(--ui-fuente-texto) !important; font-weight: 600; font-size: 13px; color: #d8cfb8; }
.cv-marco__clase-texto { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-marco__clase .cv-golpe { margin-left: auto; }
.cv-marco .cv-barra--vida { height: 13px; }
.cv-marco .cv-barra--mana { height: 13px; } /* D-CO-OBJ-8 (P-6/P-8): el alto de la de vida; la letra sigue en 9 px */
.cv-habs { display: flex; gap: 4px; margin-top: auto; transform-origin: left bottom; }
@container (max-height: 700px) {
  .cv-marco__datos { padding: 5px 5px 4px 2px; gap: 2px; }
  .cv-marco__nombre { font-size: 12px; }
  .cv-habs { scale: 0.62; margin-bottom: -18px; }
}

/* ───────── Chat: pestañas durante el combate (D-CAPAS-14) ───────── */
#chroniclesSection .cv-chat-pestanas { display: flex; gap: 2px; margin: 2px 0 4px; flex-shrink: 0; }
#chroniclesSection .cv-chat-pestanas button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #8d8773;
  padding: 1px 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
#chroniclesSection .cv-chat-pestanas button.on { color: #f3dfa0; border-bottom-color: #c8a860; }
#chroniclesSection .cv-cnt { display: inline-block; min-width: 16px; margin-left: 5px; padding: 0 4px; border-radius: 8px; background: #7a2a24; color: #fff; font-size: 9px; }
#chroniclesSection .cv-chat-panel { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
#chroniclesSection:not(.cv-chat-otra) .cv-chat-panel { display: none; }
#chroniclesSection.cv-chat-otra #logBox { display: none !important; }
#chroniclesSection .cv-chat-registro { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 6px; font-size: 12px; line-height: 1.45; border: 1px solid rgba(55, 65, 81, 0.7); border-radius: 8px; }
#chroniclesSection .cv-chat-dano { flex: 1; min-height: 0; overflow-y: auto; }
#chroniclesSection .cv-chat-dano .combat-dps-panel { position: static; width: auto; height: auto; max-height: none; margin: 0; border: 0; background: transparent; box-shadow: none; }

/* ───────── Franja: la vida de los cuatro, la consola de grupo y el botín (D-CAPAS-15) ───────── */
#rpg-root .cv-mini-grupo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; width: 100%; margin-top: 4px; }
#rpg-root .cv-mini { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: none; color: #8d8773; font-size: 10px; text-align: left; cursor: pointer; min-width: 0; }
#rpg-root .cv-mini span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rpg-root .cv-mini.sel { color: #f3dfa0; }
#rpg-root .cv-mini .cv-barra { height: 7px; }
#rpg-root .cv-mini.cv-muerto { opacity: 0.45; }

#rpg-root #uiPieIzq.cv-pie-consola > :not(.cv-franja-pieza):not(.ui-esquina) { display: none; }
#rpg-root #uiPieIzq.cv-pie-consola .cv-franja-pieza { width: 100%; height: 100%; }
#rpg-root .cv-consola-grupo { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 3px; height: 100%; width: 100%; }
#rpg-root .cv-consola {
  display: grid;
  grid-template-columns: 34px minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.8fr) auto;
  gap: 6px;
  align-items: center;
  min-height: 0;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  color: #c8c1ac;
}
#rpg-root .cv-consola.sel { border-color: rgba(200, 168, 96, 0.5); background: rgba(200, 168, 96, 0.06); }
#rpg-root .cv-consola.cv-muerto { opacity: 0.45; }
#rpg-root .cv-consola__fig { height: 100%; min-height: 0; overflow: hidden; display: flex; justify-content: center; }
#rpg-root .cv-consola__fig .cv-arte { height: 280%; }
#rpg-root .cv-consola__nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--ui-fuente-texto) !important; font-weight: 700; } /* D-P31-6 */
/* D-IMPACTOS D-IMP-4 — el nombre se recorta y lo último que pegó queda entero a su lado */
#rpg-root .cv-consola__nombre { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
#rpg-root .cv-consola__nombre-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#rpg-root .cv-consola .cv-auto { margin: 0; }

/* D-BOTIN-FLOAT D-BF-5 (claude/_CLAUDE_D_BOTIN_FLOAT_MESA.md) — el panel ocupa su hueco de la franja: título arriba y la lista abajo,
   con las líneas más nuevas pegadas al pie; lo que no cabe se recorta por arriba (unas 8 líneas en 232 px). Letra de 14 px, iconos de 26. */
#rpg-root #uiPieDer > .cv-franja-pieza { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#rpg-root .cv-botin { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; flex: 1; min-height: 0; font-size: var(--ui-letra-m); line-height: 1.3; }
#rpg-root .cv-botin__titulo { font-family: 'Cinzel', serif !important; font-size: var(--ui-letra-s); letter-spacing: 0.12em; text-transform: uppercase; color: #a08840; flex: none; }
/* la hoja de la franja (barra.css: #rpg-root .bi-pie *:not(...)) pone la letra de texto con !important y más peso: el título gana aquí */
#rpg-root .bi-pie .cv-botin > .cv-botin__titulo:not(.ui-pie__nombre) { font-family: 'Cinzel', serif !important; text-transform: uppercase !important; }
#rpg-root .cv-botin__lista { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
#rpg-root .cv-botin__linea { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* la xp y el pp de una baja, juntos y tenues: no compiten con el objeto */
#rpg-root .cv-botin__linea--baja { font-size: 13px; opacity: 0.62; }
#rpg-root .cv-botin__vacio { color: #5a5645; }
/* D-SMOKE-6 D-SM6-3 — el icono del objeto al lado del nombre (la ficha, al pasar el ratón); D-BF-5: con el color de su rareza */
#rpg-root .cv-botin__linea--objeto { display: flex; align-items: center; gap: 7px; cursor: help; color: var(--ui-rc, #e8e8e8); font-weight: 600; }
#rpg-root .cv-botin__icono { flex: 0 0 26px; width: 26px; height: 26px; display: inline-flex; border-radius: 4px; box-shadow: 0 0 0 1px var(--ui-rc, transparent); }
#rpg-root .cv-botin__icono > img, #rpg-root .cv-botin__icono > span { width: 26px; height: 26px; object-fit: contain; display: block; }
#rpg-root .cv-botin__icono > span { background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
#rpg-root .cv-botin__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* D-SMOKE-6 D-SM6-2 — la experiencia del líder, encima de la vida de los cuatro (y de la consola en Cine) */
#rpg-root .cv-pie-izq { display: flex; flex-direction: column; gap: 3px; width: 100%; height: 100%; min-height: 0; }
#rpg-root .cv-pie-izq--consola > .cv-consola-grupo { flex: 1; min-height: 0; height: auto; }
#rpg-root .cv-xp { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
#rpg-root .cv-xp__fila { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; color: #c8c1ac; white-space: nowrap; }
#rpg-root .cv-xp__nivel { font-family: 'Cinzel', serif !important; color: #f3dfa0; }
#rpg-root .cv-xp__texto { overflow: hidden; text-overflow: ellipsis; }
#rpg-root .cv-xp .ui-barra--fina { height: 6px; }
#rpg-root .cv-objetivo-pie { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
#rpg-root .cv-objetivo-pie img { width: 42px; height: 42px; object-fit: contain; border: 1px solid #3a2424; border-radius: 4px; background: #05060a; }
#rpg-root .cv-objetivo-pie > div { flex: 1; min-width: 0; }
#rpg-root .cv-objetivo-pie__n { font-family: var(--ui-fuente-texto) !important; font-weight: 700; /* D-P31-6 */ font-size: 12px; color: #f0c0b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ───────── Efectos reducidos ───────── */
body.ui-efectos-reducidos img.cv-cuerpo,
body.ui-efectos-reducidos .cv-presenta { animation: none; }
body.ui-efectos-reducidos .cv-presenta { opacity: 1; }

/* Escenario estrecho (móvil, ventana pequeña): barra compacta y dock más pequeño. Al final: gana a las reglas de arriba. */
@container cv-vista (max-width: 1000px) {
  /* D-COMBATE-UI D-CUI-1 — la barra nueva, compacta */
  .cv-arriba { padding: 4px 6px 0; gap: 4px; }
  .cv-placa-zona { min-width: 0; padding: 4px 8px; }
  .cv-placa-zona__nombre { font-size: 13px; }
  .cv-placa-zona__sub { display: none; }
  /* D-RELOJ-24H D-R24-3 — el reloj de la placa, más pequeño */
  .cv-placa-zona--reloj { gap: 6px; }
  .cv-placa-zona--reloj .cv-placa-zona__textos { padding-left: 6px; }
  .cv-placa-zona .ui-reloj--en-placa { gap: 4px; }
  .cv-placa-zona .ui-reloj--en-placa .ui-reloj__svg { width: 22px; height: 22px; }
  .cv-placa-zona .ui-reloj--en-placa .ui-reloj__hora { font-size: 13px; }
  .cv-placa-zona .ui-reloj--en-placa .ui-reloj__franja { display: none; }
  .cv-estandarte__tela { min-width: 0; padding: 8px 14px 20px; }
  .cv-estandarte__nombre { font-size: 15px; }
  .cv-estandarte__camino { gap: 6px; }
  .cv-medallon { width: 24px; height: 24px; }
  .cv-medallon--actual { width: 30px; height: 30px; }
  .cv-estandarte__pista, .cv-arriba__der .timer, .cv-redondo__rotulo { display: none; }
  .cv-redondo { width: 30px; height: 30px; }
  .cv-salir { height: 28px; padding: 0 10px; font-size: 11px; }
  .cv-vista .cv-estados-globales { top: 56px; }
}
@container (max-width: 820px) {
  .cv-dock { scale: 0.56; max-width: 170%; }
  .cv-dock .v3-dock-lootun { gap: 10px; }
}
/* Marco estrecho: la franja tiene alto automático; lo que se añade en combate no debe estirarla. */
@media (max-width: 1000px) {
  #rpg-root .cv-botin { display: none; }
  #rpg-root .cv-mini-grupo { margin-top: 0; }
}
@container cv-vista (max-width: 1000px) {
  .cv-marco { grid-template-columns: 36% 1fr; }
  .cv-marco__clase, .cv-marco .status-icon-row { display: none; }
  .cv-marco__datos { padding: 4px 4px 3px 0; gap: 2px; }
  .cv-marco__nombre { font-size: 11px; }
  .cv-habs { scale: 0.5; margin-bottom: -28px; }
}

/* ───────── Cuenta atrás entre oleadas (D-UI-CUENTA-ATRAS) ─────────
   El aviso de replay-adapter.jsx (.replay-wave-transition-msg) con el estilo de combate elegido; texto y pulso, los de siempre. */
.cv-vista .replay-wave-transition-msg { position: relative; font-family: 'Cinzel', serif !important; }
/* D-PULIDOS-31 (añadido a D-P31-6) — con caídos que esperar: la cuenta atrás, rótulo corto en Cinzel; debajo, la frase «Esperáis a que…»
   en la letra de texto en negrita, sin versalitas (replay-adapter.jsx cvAvisoPartido) */
.replay-wave-transition-msg--largo { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: min(720px, 86%); text-align: center; }
.replay-wave-transition-msg .replay-wave-transition-msg__frase {
  font-family: var(--ui-fuente-texto) !important; font-weight: 700; font-size: clamp(15px, 1.25vw, 20px);
  letter-spacing: normal; text-transform: none; line-height: 1.3;
}
/* A · Salón dorado: placa oscura cálida con doble filete dorado */
.cv-estilo-A .replay-wave-transition-msg {
  color: #e9c46a; border-radius: 5px; border: 1px solid rgba(200, 168, 96, 0.6);
  background: linear-gradient(180deg, rgba(24, 18, 10, 0.94), rgba(10, 8, 5, 0.96));
  box-shadow: inset 0 0 0 4px rgba(10, 8, 5, 0.96), inset 0 0 0 5px rgba(200, 168, 96, 0.25), 0 12px 32px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 0 #000, 0 0 16px rgba(233, 196, 106, 0.3);
}
/* B · Estandartes: cinta carmesí con muesca a los dos lados y barra dorada arriba */
.cv-estilo-B .replay-wave-transition-msg {
  color: #fff3c4; border: 0; border-radius: 0; padding: 14px 52px;
  background: linear-gradient(180deg, #6b2418, #3a120c);
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 50%, 100% 100%, 0 100%, 20px 50%);
  box-shadow: inset 0 3px 0 #e9c46a, inset 0 0 0 1px rgba(233, 196, 106, 0.45);
}

/* D-TACTICAS-HABILIDADES D-TAC-HAB-10 (claude/_CLAUDE_D_TACTICAS_HABILIDADES_MESA.md) — iconos de habilidad en el combate:
   lo que se lanza, el libro entre oleadas, el registro «Combate» y el medidor «Daño». */
.cv-icono-hab { display: inline-block; flex: none; vertical-align: middle; border-radius: 4px; overflow: hidden; }
.cv-icono-hab > svg, .cv-icono-hab > img { width: 100% !important; height: 100% !important; display: block; }
.cv-lanzamiento { position: relative; }
.cv-lanzamiento__icono { position: absolute; left: -25px; top: 50%; transform: translateY(-50%); box-shadow: 0 0 0 1px #c8a0ff, 0 0 8px rgba(200, 160, 255, 0.6); }
.combat-log-entry__icono { margin-right: 6px; }
.combat-dps-skill-icono { margin-right: 5px; }

/* D-INVENTARIO-COMBATE D-INV-5 — el brillo del botín sobre el enemigo caído (lo pone el puente de recompensas en .cv-fx) */
.cv-botin-brillo {
  position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 226, 140, 0.95) 0%, rgba(255, 196, 70, 0.55) 30%, rgba(255, 170, 40, 0) 70%);
  mix-blend-mode: screen; animation: cv-botin-brillo 2.1s ease-out forwards;
}
@keyframes cv-botin-brillo {
  0% { transform: scale(0.3); opacity: 0; }
  18% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.9) translateY(-40px); opacity: 0; }
}

/* D-COMBATE-ARREGLOS D-CA-1 (claude/_CLAUDE_D_COMBATE_ARREGLOS_MESA.md) — los flotantes rediseñados: carriles por objetivo
   (fila --carril, de abajo arriba), icono + número con contorno, color por tipo; sin píldora ni retrato. */
/* D-IMPACTOS D-IMP-1/3 (claude/_CLAUDE_D_IMPACTOS_MESA.md) — «La Firma»: cada autor en su columna (--col, de su puesto en el grupo,
   × --flot-col) con su mini-retrato y el aro de su color de clase; la cifra un 20 % más grande, en la letra de texto en negrita
   (Cinzel sólo en el crítico); el golpe físico en el color de clase del autor (--flot-color), el hechizo en el de su escuela. */
.cv-flots { position: absolute; left: 50%; width: 0; height: 0; pointer-events: none; z-index: 30; --flot-fila: clamp(26px, 2.3vw, 40px); --flot-col: clamp(52px, 4.6vw, 86px); }
.cv-flot {
  /* la fila: 0 en el ancla, y luego arriba, abajo, más arriba (--fila, de CvFlotante); el alto de fila es del contenedor,
     igual para todos los tamaños de letra (un fallo pequeño no se mete en la fila de al lado) */
  position: absolute; left: calc(var(--col, 0) * var(--flot-col)); bottom: calc(var(--fila, 0) * var(--flot-fila));
  display: flex; align-items: center; gap: 0.28em; white-space: nowrap; transform: translateX(-50%);
  font-family: var(--ui-fuente-texto), 'Nunito', sans-serif !important; font-weight: 800; font-size: clamp(17px, 1.5vw, 26px); line-height: 1; letter-spacing: 0.01em;
  color: #f5e6c8; -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.85); paint-order: stroke fill;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.7);
  opacity: 0; animation: cv-flot 1.8s ease-out both;
}
@keyframes cv-flot {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.7); }
  10% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.12); }
  20% { transform: translateX(-50%) translateY(-2px) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.96); }
}
/* el icono, sólo en habilidades: pequeño, tras la cifra, algo subido (ya no dice el resultado ni el tipo) */
.cv-flot__icono {
  flex: none; width: 0.8em; height: 0.8em; margin-left: 0.05em; align-self: flex-start; border-radius: 3px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 18, 0.55); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 1px 3px rgba(0, 0, 0, 0.8);
}
.cv-flot__icono > svg, .cv-flot__icono > img { width: 100% !important; height: 100% !important; display: block; }
/* la marca del autor: su mini-retrato en un círculo con el aro de su color de clase (los enemigos, un aro rojizo); sin píldora detrás */
.cv-flot__autor {
  flex: none; width: 1.05em; height: 1.05em; border-radius: 50%; overflow: hidden; background: #15110b;
  box-shadow: 0 0 0 2px var(--autor, #b4503f), 0 0 0 3px rgba(0, 0, 0, 0.85);
}
.cv-flot__autor > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-flot__veces { font-size: 0.62em; opacity: 0.9; margin-left: 0.05em; }
.cv-flot--sale { color: #f7e8c9; }
.cv-flot--entra { color: #ff6f5e; }
.cv-flot--autor { color: var(--flot-color, #f7e8c9); }
.cv-flot--escuela { color: var(--flot-color, #d9b3ff); }
.cv-flot--escuela .cv-flot__icono { color: var(--flot-color, #d9b3ff); }
/* el crítico: en el color de su autor o de su escuela (dorado sin ninguno), más grande, en Cinzel, con brillo dorado y la estrella */
.cv-flot--critico { color: var(--flot-color, #ffd24a); font-family: 'Cinzel Decorative', 'Cinzel', serif !important; font-size: clamp(23px, 2vw, 36px); text-shadow: 0 0 10px rgba(255, 190, 40, 0.75), 0 1px 0 #000, 0 2px 8px rgba(0, 0, 0, 0.8); }
.cv-flot--critico .cv-flot__icono { box-shadow: 0 0 0 1px #ffd24a, 0 0 8px rgba(255, 200, 60, 0.7); }
.cv-flot--critico .cv-flot__autor { width: 0.95em; height: 0.95em; box-shadow: 0 0 0 2px var(--autor, #b4503f), 0 0 0 3.5px #ffd24a; }
/* D-EFECTOS-T1 (D-EF1-6) — el crítico salta a 1,8× y se asienta («pop»), con una estrella detrás; sin micro-pausa (Miguel) */
.cv-flot--critico { animation-name: cv-flot-crit; }
@keyframes cv-flot-crit {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.6); }
  7% { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1.8); }
  14% { transform: translateX(-50%) translateY(0) scale(1.12); }
  21% { transform: translateX(-50%) translateY(-1px) scale(1.28); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(1.2); }
}
.cv-flot--critico::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 3.4em; height: 3.4em; margin: -1.7em 0 0 -1.7em; z-index: -1; pointer-events: none;
  background: conic-gradient(transparent 0 9%, rgba(255, 210, 74, 0.6) 9% 13%, transparent 13% 34%, rgba(255, 210, 74, 0.6) 34% 38%, transparent 38% 59%, rgba(255, 210, 74, 0.6) 59% 63%, transparent 63% 84%, rgba(255, 210, 74, 0.6) 84% 88%, transparent 88%);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
}
@media (prefers-reduced-motion: reduce) { .cv-flot.cv-flot--critico { animation-name: cv-flot-quieto; } }
body.ui-efectos-reducidos .cv-flot--critico::before { display: none; }
.cv-flot--cura { color: #66ec92; }
/* D-IMP-2 — el fallo: la palabra de lo que pasó (Esquiva, Parada, Bloqueo, Contraataque, Falla), gris, en cursiva y más discreta que un golpe */
.cv-flot--fallo { color: #b9c0cc; font-size: clamp(13px, 1vw, 17px); font-weight: 700; font-style: italic; letter-spacing: 0.02em; opacity: 0.92; }
.cv-flot--tic { font-size: clamp(13px, 1.1vw, 19px); }
.cv-flot--fuera { animation: none; opacity: 0; transition: opacity 0.15s; }
@media (prefers-reduced-motion: reduce) { .cv-flot { animation-name: cv-flot-quieto; } }
body.ui-efectos-reducidos .cv-flot, body.ui-efectos-reducidos .cv-flot.cv-flot--critico { animation-name: cv-flot-quieto; }
@keyframes cv-flot-quieto { 0% { opacity: 0; } 10%, 75% { opacity: 1; } 100% { opacity: 0; } }

/* D-IMPACTOS D-IMP-4 — en la tarjeta del héroe, lo último que pegó: se enciende con cada golpe y se apaga solo (sólo opacidad) */
.cv-golpe {
  flex: none; font-family: var(--ui-fuente-texto) !important; font-weight: 800; font-size: 13px; line-height: 1; white-space: nowrap;
  color: #f7e8c9; text-shadow: 0 1px 2px #000; animation: cv-golpe 1.8s ease-out both;
}
.cv-golpe--autor, .cv-golpe--escuela, .cv-golpe--critico { color: var(--flot-color, #f7e8c9); }
.cv-golpe--critico { color: var(--flot-color, #ffd24a); text-shadow: 0 0 6px rgba(255, 190, 40, 0.7), 0 1px 2px #000; }
.cv-golpe--cura { color: #66ec92; }
.cv-golpe--fallo { color: #b9c0cc; font-style: italic; font-weight: 700; }
@keyframes cv-golpe { 0% { opacity: 0; } 8%, 70% { opacity: 1; } 100% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .cv-golpe { animation: none; } }
body.ui-efectos-reducidos .cv-golpe { animation: none; }

/* D-PARADOS D-PA-2 (claude/_CLAUDE_D_PARADOS_MESA.md) — el registro en el hueco de la tarjeta del héroe (Salón): sus últimas líneas, la
   más nueva abajo y las viejas desvaneciéndose (--reg-edad: 0 la nueva); lo que hace, en el color de su clase (--reg-color); lo que
   recibe, más tenue y en el de quien se lo hace; el motivo de espera, en cursiva. En Línea y Cine, sólo la última (.cv-reg--una). */
.cv-marco__datos > .cv-reg { flex: 1 1 auto; }
.cv-reg {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; min-height: 0; overflow: hidden; margin-top: 2px;
  font-family: var(--ui-fuente-texto), 'Nunito', sans-serif !important; font-size: 12px; line-height: 1.25;
}
.cv-reg__linea {
  flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--reg-color, #e6dcc4);
  text-shadow: 0 1px 2px #000; opacity: calc(1 - var(--reg-edad, 0) * 0.17);
}
.cv-reg__linea--entra { font-weight: 600; opacity: calc(0.74 - var(--reg-edad, 0) * 0.12); }
.cv-reg__linea--espera { color: #cfc6ae; font-style: italic; font-weight: 600; }
.cv-reg__linea:last-child { animation: cv-reg-nueva 0.35s ease-out both; }
@keyframes cv-reg-nueva { from { transform: translateY(4px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cv-reg__linea:last-child { animation: none; } }
body.ui-efectos-reducidos .cv-reg__linea:last-child { animation: none; }
#rpg-root .cv-reg--una { flex: none; margin: 0; font-size: 10px; line-height: 1.2; }
#rpg-root .cv-reg--una .cv-reg__linea { animation: none; }
#rpg-root .cv-consola__quien { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; overflow: hidden; }
@container cv-vista (max-width: 1000px) { .cv-reg { font-size: 10px; } }
@media (max-width: 1000px) { #rpg-root .cv-mini .cv-reg { display: none; } }

/* ───────── D-BOTIN-FLOAT D-BF-2/3/6 (claude/_CLAUDE_D_BOTIN_FLOAT_MESA.md) — el botín que cae ─────────
   Capa fija propia (portal en el body: fuera de .cv-escena, que recorta, y de .cv-fx, que se oculta con efectos reducidos). Cada float
   nace en (left, top) y sus capas que se mueven (.cv-bflot__mueve: el cuerpo y las copias del rastro) animan sólo transform y opacity;
   los halos son degradados cuya opacidad se anima (nada de box-shadow ni filter animados). El color, siempre var(--ui-rc) por data-rareza:
   aquí no hay ningún color de tier escrito (lo vigila rarezas_fuente_unica.test.ts). La vida (--bf-vida) la pone la escalera. */
.cv-botin-flots { position: fixed; inset: 0; pointer-events: none; z-index: 950; overflow: hidden; }
.cv-bflot { position: absolute; width: 0; height: 0; pointer-events: none; }
.cv-bflot__mueve {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity;
  animation: cv-bflot-sube var(--bf-vida, 1.6s) cubic-bezier(0.2, 0.7, 0.3, 1) var(--bf-retraso, 0ms) both;
}
.cv-bflot--vuela .cv-bflot__mueve { animation-name: cv-bflot-vuela; animation-timing-function: ease-in-out; }
/* el rastro: copias del icono que siguen al cuerpo con 60 ms de retraso cada una, cada vez más tenues */
.cv-bflot__mueve--fantasma { animation-delay: calc(var(--bf-retraso, 0ms) + var(--bf-i, 1) * 60ms); }
.cv-bflot__cuerpo.cv-bflot__fantasma { opacity: calc(0.5 - var(--bf-i, 1) * 0.07); }
.cv-bflot__texto--oculto { visibility: hidden; }
.cv-bflot__cuerpo {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap;
  color: var(--ui-rc, #e8e8e8);
  font-family: var(--ui-fuente-texto), 'Inter', sans-serif !important; font-weight: 700; font-size: clamp(13px, 1.05vw, 17px);
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.8);
}
.cv-bflot__iconos { display: flex; align-items: center; gap: 3px; }
.cv-bflot__icono { display: block; width: 30px; height: 30px; border-radius: 5px; background: rgba(8, 6, 4, 0.82); box-shadow: 0 0 0 2px var(--ui-rc, #e8e8e8), 0 2px 8px rgba(0, 0, 0, 0.7); overflow: hidden; }
.cv-bflot__icono > img, .cv-bflot__icono > span { width: 100%; height: 100%; object-fit: contain; display: block; }
.cv-bflot[data-escalon="1"] .cv-bflot__icono, .cv-bflot[data-escalon="2"] .cv-bflot__icono { width: 34px; height: 34px; }
.cv-bflot[data-escalon="3"] .cv-bflot__icono, .cv-bflot[data-escalon="4"] .cv-bflot__icono, .cv-bflot[data-escalon="5"] .cv-bflot__icono { width: 40px; height: 40px; }
.cv-bflot__mas { font-size: 0.85em; color: #f3ead2; }
.cv-bflot__texto { padding: 1px 8px; border-radius: 4px; background: rgba(6, 5, 3, 0.62); }
.cv-bflot[data-escalon="3"] .cv-bflot__texto { font-size: 1.12em; }
.cv-bflot[data-escalon="4"] .cv-bflot__texto, .cv-bflot[data-escalon="5"] .cv-bflot__texto { font-family: 'Cinzel', serif !important; font-size: 1.2em; letter-spacing: 0.03em; }
/* brillo: un halo radial de su color que late (sólo su opacidad), desde amarillo */
.cv-bflot__halo {
  position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--ui-rc) 75%, white) 0%, color-mix(in srgb, var(--ui-rc) 45%, transparent) 35%, transparent 70%);
  opacity: 0; animation: cv-bflot-pulso calc(var(--bf-vida, 2.8s) / 7) ease-in-out calc(var(--bf-retraso, 0ms) + 120ms) var(--bf-pulsos, 4) alternate both;
}
/* morado: un anillo que se abre */
.cv-bflot__anillo {
  position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; z-index: -1;
  border: 3px solid var(--ui-rc); opacity: 0; transform: scale(0.3);
  animation: cv-bflot-anillo 0.9s ease-out calc(var(--bf-retraso, 0ms) + 150ms) both;
}
/* naranja (y set): rayos cónicos que giran detrás */
.cv-bflot__rayos {
  position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; z-index: -2;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--ui-rc) 60%, transparent) 0deg 7deg, transparent 7deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 68%); mask-image: radial-gradient(circle, #000 18%, transparent 68%);
  animation: cv-bflot-gira 5s linear var(--bf-retraso, 0ms) infinite;
}
/* rojo: niebla quieta de su color en el sitio donde cae */
.cv-bflot__niebla {
  position: absolute; left: 0; top: 0; width: 260px; height: 200px; margin: -100px 0 0 -130px; border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--ui-rc) 42%, transparent) 0%, color-mix(in srgb, var(--ui-rc) 16%, transparent) 45%, transparent 72%);
  opacity: 0; animation: cv-bflot-niebla var(--bf-vida, 4.6s) ease-in-out var(--bf-retraso, 0ms) both;
}
/* efectos reducidos (nivel «mínimos»): un aro quieto de su color desde amarillo */
.cv-bflot__aro { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 2px solid var(--ui-rc); z-index: -1; }
.cv-bflot__chispa {
  position: absolute; left: 50%; top: 50%; border-radius: 50%; background: color-mix(in srgb, var(--ui-rc) 55%, white);
  opacity: 0; transform: translate(-50%, -50%);
  animation: cv-bflot-chispa 0.95s ease-out calc(var(--bf-retraso, 0ms) + 200ms + var(--bf-cr, 0ms)) both;
}
/* rojo: la cinta centrada «¡Has conseguido X!», 2 s */
.cv-bflot-cinta {
  position: fixed; left: 50%; top: 24%; transform: translate(-50%, 0); opacity: 0; pointer-events: none; z-index: 2;
  padding: 10px 46px; color: var(--ui-rc); white-space: nowrap;
  font-family: 'Cinzel', serif !important; font-size: clamp(18px, 1.8vw, 30px); letter-spacing: 0.06em;
  text-shadow: 0 1px 0 #000, 0 0 12px rgba(0, 0, 0, 0.9);
  background: linear-gradient(90deg, transparent, rgba(10, 6, 4, 0.9) 18%, rgba(10, 6, 4, 0.9) 82%, transparent);
  border-top: 1px solid var(--ui-rc); border-bottom: 1px solid var(--ui-rc);
  animation: cv-bflot-cinta 2s ease-out calc(var(--bf-retraso, 0ms) + 300ms) both;
}
@keyframes cv-bflot-sube {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  14% { opacity: 1; transform: translate(-50%, calc(-50% - 22px)) scale(var(--bf-escala, 1)); }
  72% { opacity: 1; transform: translate(-50%, calc(-50% - 46px)) scale(var(--bf-escala, 1)); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 60px)) scale(var(--bf-escala, 1)); }
}
/* de azul arriba: sube, se queda arriba y, en el último 30 %, vuela al panel encogiendo al 40 % */
@keyframes cv-bflot-vuela {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  12% { opacity: 1; transform: translate(-50%, calc(-50% - 34px)) scale(var(--bf-escala, 1)); }
  70% { opacity: 1; transform: translate(-50%, calc(-50% - 52px)) scale(var(--bf-escala, 1)); }
  94% { opacity: 0.85; transform: translate(calc(-50% + var(--bf-dx, 0px)), calc(-50% + var(--bf-dy, 0px))) scale(0.4); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--bf-dx, 0px)), calc(-50% + var(--bf-dy, 0px))) scale(0.4); }
}
@keyframes cv-bflot-quieto { 0% { opacity: 0; } 10%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cv-bflot-pulso { 0% { opacity: 0.15; } 100% { opacity: 0.95; } }
@keyframes cv-bflot-anillo { 0% { opacity: 0.95; transform: scale(0.3); } 100% { opacity: 0; transform: scale(2); } }
@keyframes cv-bflot-gira { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cv-bflot-niebla { 0% { opacity: 0; } 15%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cv-bflot-chispa {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--bf-cx, 0px)), calc(-50% + var(--bf-cy, 0px))) scale(0.2); }
}
@keyframes cv-bflot-cinta {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  12%, 80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}
/* D-BF-6 — efectos reducidos: aparece y se apaga en su sitio (sólo opacidad), con la misma vida; sin rastro, chispas, brillo ni vuelo
   (el perfil «mínimos» ya no los pinta; esto es la red por si quedara alguno) */
.cv-bflot--quieto .cv-bflot__mueve { animation-name: cv-bflot-quieto; transform: translate(-50%, calc(-50% - 30px)); }
body.ui-efectos-reducidos .cv-bflot .cv-bflot__mueve { animation-name: cv-bflot-quieto; transform: translate(-50%, calc(-50% - 30px)); }
body.ui-efectos-reducidos .cv-bflot__mueve--fantasma, body.ui-efectos-reducidos .cv-bflot__chispa, body.ui-efectos-reducidos .cv-bflot__rayos,
body.ui-efectos-reducidos .cv-bflot__halo, body.ui-efectos-reducidos .cv-bflot__anillo, body.ui-efectos-reducidos .cv-bflot__niebla { display: none; }
body.ui-efectos-reducidos .cv-bflot-cinta { animation-name: cv-bflot-quieto; transform: translate(-50%, 0); }
/* reducir movimiento del sistema: como mucho «suaves» (el perfil quita chispas, rayos, niebla y vuelo); red de seguridad en CSS */
@media (prefers-reduced-motion: reduce) {
  .cv-bflot--vuela .cv-bflot__mueve { animation-name: cv-bflot-sube; }
  .cv-bflot__chispa, .cv-bflot__rayos, .cv-bflot__niebla { display: none; }
}

/* ═══════════ D-COMBATE-UI (claude/_CLAUDE_D_COMBATE_UI_MESA.md, adendas A-1..A-3) ═══════════════════════════════════
   D-CUI-1 la barra de arriba (sin barra: placa, estandarte con medallones, botones redondos); D-CUI-2 las gemas del
   jugador a los pies; D-CUI-3/4 los estados cuadrados y su ficha; D-CUI-5 la ficha de hechizo (marco en style_v0.8.9.css);
   D-CUI-7 el Salón con la caja A. Vale en las tres disposiciones y en los estilos A (oro) y B (carmesí). */

/* ───────── D-CUI-1 · arriba: sin barra, se ve el cielo ───────── */
.cv-arriba {
  position: absolute; top: 0; left: 0; right: 0; z-index: 32; pointer-events: none;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 8px 12px 0;
}
.cv-arriba > * { pointer-events: auto; }
.cv-placa-zona {
  justify-self: start; padding: 6px 12px 7px; border-radius: 6px; min-width: 150px;
  background: linear-gradient(180deg, rgba(28, 20, 10, 0.88), rgba(14, 10, 6, 0.82));
  border: 1px solid rgba(214, 178, 94, 0.55); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}
.cv-estilo-B .cv-placa-zona { border-color: rgba(190, 90, 70, 0.6); background: linear-gradient(180deg, rgba(40, 14, 16, 0.9), rgba(16, 8, 9, 0.85)); }
.cv-placa-zona__nombre { font-family: 'Germania One', 'Cinzel', serif !important; text-transform: none; font-size: 17px; color: #f3dfa0; letter-spacing: 0.02em; text-shadow: 0 1px 3px #000; }
.cv-placa-zona__sub { display: flex; gap: 6px; align-items: center; margin-top: 2px; font-size: 11px; color: #cfc4a4; }
/* D-RELOJ-24H D-R24-3 — la hora del mundo va en la placa, a la izquierda del nombre: el mismo indicador que en la ciudad
   (.ui-reloj, public/ui/marco.css), sin su caja (la caja es la placa). Fuera la pastilla .cv-hora. */
.cv-placa-zona--reloj { display: flex; align-items: center; gap: 10px; }
.cv-placa-zona--reloj .cv-placa-zona__textos { min-width: 0; padding-left: 10px; border-left: 1px solid rgba(214, 178, 94, 0.35); }

.cv-estandarte { position: relative; justify-self: center; display: flex; flex-direction: column; align-items: center; margin-top: -8px; }
.cv-estandarte__tela {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: min(410px, 40cqw); padding: 12px 26px 26px;
  border: 0; cursor: pointer; color: inherit; font: inherit;
  background: linear-gradient(180deg, #7a1c18, #4e0f0d 75%);
  border-top: 4px solid #d8b45c;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
  box-shadow: inset 0 0 0 1px rgba(216, 180, 92, 0.35);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}
.cv-estilo-B .cv-estandarte__tela { background: linear-gradient(180deg, #5a1418, #2c080b 75%); border-top-color: #c9776a; }
.cv-estandarte__nombre { font-family: 'Germania One', 'Cinzel', serif !important; text-transform: none; font-size: 22px; color: #f6dc8a; text-shadow: 0 2px 3px #000; line-height: 1.1; }
.cv-estandarte__pista { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(246, 220, 160, 0.7); }
.cv-estandarte__camino { display: flex; align-items: center; gap: 14px; position: relative; }
.cv-estandarte__camino::before { content: ''; position: absolute; left: 14px; right: 14px; top: 50%; border-top: 2px dashed rgba(216, 180, 92, 0.6); }
.cv-medallon {
  position: relative; width: 34px; height: 34px; border-radius: 50%; overflow: visible; flex: none;
  border: 2px solid #b89a52; background: #1a1208; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
}
.cv-medallon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.cv-medallon__n { display: grid; place-items: center; height: 100%; color: #f3dfa0; font-size: 12px; }
.cv-medallon--hecho img { filter: grayscale(1) brightness(0.55); }
.cv-medallon--hecho { border-color: #6d6656; }
.cv-medallon__ok { position: absolute; right: -4px; bottom: -4px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; background: #2c3a1c; color: #c8f0a0; border: 1px solid #7fa860; }
.cv-medallon--actual { width: 44px; height: 44px; border-color: #f3d27a; box-shadow: 0 0 0 2px #000, 0 0 14px rgba(255, 210, 110, 0.8); }
.cv-medallon--falta img { filter: brightness(0.7) saturate(0.6); }
.cv-medallon--nombrado { border-color: #e2584a; box-shadow: 0 0 0 2px #d8b45c, 0 0 12px rgba(226, 88, 74, 0.7); }
.cv-medallon--jefe { width: 50px; height: 50px; }

/* textos de lectura: sin las mayúsculas de la cabecera de combate */
.cv-estandarte__detalle, .cv-ventana-barra, .cv-libro, .cv-placa-zona__sub, .ui-reloj--en-placa { font-family: var(--ui-fuente-texto) !important; text-transform: none !important; letter-spacing: normal; }
.cv-estandarte__detalle *, .cv-ventana-barra *, .cv-libro *, .cv-placa-zona__sub *, .ui-reloj--en-placa * { text-transform: none !important; font-family: var(--ui-fuente-texto) !important; }
.cv-ventana-barra__cabeza span, .cv-libro__cabeza span { font-family: 'Cinzel', serif !important; }
.cv-estandarte__detalle {
  margin-top: 8px; min-width: min(340px, 90cqw); padding: 8px 12px; border-radius: 8px; font-size: 13px; color: #efe6cf;
  background: rgba(14, 11, 7, 0.94); border: 1px solid rgba(214, 178, 94, 0.6); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7);
}
.cv-detalle-linea { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.cv-detalle-linea img, .cv-detalle-linea__punto { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid #8a7a50; }
.cv-detalle-linea--hecho { color: #8f8a7d; text-decoration: line-through; }
.cv-detalle-linea--hecho img { filter: grayscale(1); }
.cv-detalle-linea--actual { color: #fff; font-weight: 700; }
.cv-detalle-linea.nombrado { color: #ff9c8c; }
.cv-detalle-linea.nombrado img { border-color: #e2584a; }
.cv-detalle-linea--puede { font-size: 12px; font-style: italic; }
.cv-detalle-linea--ganado { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(214, 178, 94, 0.3); color: #d6c290; font-size: 12px; }

.cv-arriba__der { position: relative; justify-self: end; display: flex; gap: 12px; align-items: flex-start; }
.cv-arriba__der .timer { transform: scale(0.85); transform-origin: right top; margin-top: 8px; }
/* D-DP-13 — lo que falta para abrir el siguiente camp, colgando bajo los botones de arriba a la derecha */
.cv-requisitos {
  position: absolute; top: 100%; right: 0; margin-top: 8px; max-width: 260px; pointer-events: none; text-align: right;
  padding: 5px 9px; border-radius: 5px; background: rgba(10, 8, 6, 0.72); border: 1px solid rgba(214, 178, 94, 0.45);
  font-family: var(--ui-fuente-texto, inherit); font-size: 12.5px; line-height: 1.35; color: #f1e6c8; text-transform: none; letter-spacing: normal;
}
.cv-requisitos__titulo { font-size: 11.5px; color: #c9b27a; margin-bottom: 2px; }
.cv-requisitos__linea.hecho { color: #9a9280; }
@container (max-width: 699px) { .cv-requisitos { display: none; } }
.cv-redondo {
  position: relative; width: 42px; height: 42px; border-radius: 50%; padding: 0; cursor: pointer; color: #f1dca0;
  display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #3a2a14, #140e06);
  border: 2px solid #b89a52; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}
.cv-estilo-B .cv-redondo { border-color: #a4504a; background: radial-gradient(circle at 40% 35%, #3a1418, #12070a); }
.cv-redondo svg { width: 20px; height: 20px; }
.cv-redondo:hover, .cv-redondo.activo { border-color: #f3d27a; box-shadow: 0 0 0 1px #000, 0 0 10px rgba(255, 210, 110, 0.6); }
.cv-redondo--rep-no { opacity: 0.6; }
/* D-PULIDO D-PUL-3 — la mochila casi llena o llena: el contador sobre el botón (ámbar casi, rojo llena) */
.cv-redondo__insignia { position: absolute; right: -10px; top: -7px; min-width: 18px; padding: 1px 4px; border-radius: 8px; font-size: 9px; font-weight: 700; line-height: 12px;
  font-variant-numeric: tabular-nums; pointer-events: none; color: #1b1406; background: #fbbf24; border: 1px solid #000; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.cv-redondo--mochila-casi { border-color: #fbbf24; }
.cv-redondo--mochila-llena { border-color: #f87171; }
.cv-redondo--mochila-llena .cv-redondo__insignia { color: #fff; background: #b91c1c; }
.cv-redondo--rep-seguro::after { content: '✓'; position: absolute; right: -3px; top: -3px; width: 14px; height: 14px; border-radius: 50%; font-size: 9px; display: grid; place-items: center; background: #2c3a1c; color: #c8f0a0; border: 1px solid #7fa860; }
.cv-redondo__rotulo { position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; white-space: nowrap; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: #e9dcb4; text-shadow: 0 1px 2px #000, 0 0 4px #000; pointer-events: none; }
.cv-salir {
  height: 34px; margin-top: 4px; padding: 0 16px; border-radius: 17px; cursor: pointer; font-family: 'Cinzel', serif !important; font-size: 13px; letter-spacing: 0.08em;
  color: #ffe7d8; background: linear-gradient(180deg, #8e2a20, #5a140e); border: 2px solid #d07a5a; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}
.cv-ventana-barra {
  position: absolute; top: calc(100% + 22px); right: 0; z-index: 40; width: min(380px, 80cqw); padding: 10px 12px; border-radius: 8px;
  background: rgba(14, 11, 7, 0.96); border: 1px solid rgba(214, 178, 94, 0.6); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.75); color: #efe6cf; font-size: 13px;
}
.cv-ventana-barra__cabeza { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-family: 'Cinzel', serif !important; color: #f3dfa0; }
.cv-ventana-barra__cabeza button { background: none; border: 0; color: #cfc4a4; cursor: pointer; font-size: 14px; }
.cv-ventana-barra__fila { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(214, 178, 94, 0.15); }
.cv-ventana-barra__nombre { flex: 0 0 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-ventana-barra__fila .cv-ia { flex: 1; display: flex; gap: 4px; margin: 0; }
.cv-ventana-barra__fila .cv-ia select { flex: 1; min-width: 0; }
.cv-ventana-barra p { margin: 0 0 8px; line-height: 1.45; }
.cv-ventana-barra__nota { color: #a89f86; font-size: 12px; }
.cv-ventana-barra__no { color: #ffb4a0; }
.cv-ventana-barra__accion { width: 100%; padding: 8px; border-radius: 6px; cursor: pointer; font-family: 'Cinzel', serif !important; color: #1c1206; background: linear-gradient(180deg, #f1d58a, #c99a3e); border: 1px solid #fff0b8; }
.cv-ventana-barra__vacio { color: #a89f86; }

/* los estados de grupo bajan para dejar sitio a la placa y al estandarte */
.cv-estados-globales { top: 74px; right: auto; max-width: 30cqw; }

/* ───────── D-CUI-3/4 · los estados, cuadrados ───────── */
.cv-estados { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 3px; pointer-events: auto; }
.cv-estado {
  position: relative; flex: none; border-radius: 5px; overflow: hidden; cursor: help; background: #0b0906;
  border: 2px solid #4fbf5a; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.6);
}
.cv-estado--malo { border-color: #d6453a; }
.cv-estado__icono, .cv-estado__icono > * { display: block; width: 100%; height: 100%; }
.cv-estado__icono img, .cv-estado__icono svg { width: 100% !important; height: 100% !important; border-radius: 0 !important; object-fit: cover; }
.cv-estado__nada { display: grid; place-items: center; color: #f3dfa0; font-size: 14px; }
.cv-estado__barrido { position: absolute; left: 0; right: 0; top: 0; background: rgba(0, 0, 0, 0.55); pointer-events: none; }
.cv-estado__t { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9px; line-height: 11px; text-align: center; color: #fff; background: rgba(0, 0, 0, 0.6); font-weight: 700; }
.cv-estado__pilas { position: absolute; top: 0; right: 1px; font-size: 9px; color: #ffe08a; text-shadow: 0 1px 2px #000; }
.cv-estados--grupo { justify-content: flex-start; }
.cv-estados--cabeza { position: absolute; left: 50%; bottom: calc(100% + 0.6cqh); translate: -50% 0; width: max-content; max-width: 16cqw; z-index: 3; }
.cv-estados--marco { position: absolute; top: 4px; left: 4px; right: 4px; justify-content: flex-start; z-index: 5; }
/* D-PILDORAS D-PI-5 — en el Salón la fila crece hacia abajo, encima de la figura: dos filas como mucho (el marco pide tope y
   CvEstados pone «+N»); si el hueco es más estrecho, lo que no cabe en dos filas no se pinta. */
.cv-estados--marco { max-height: calc(2 * 30px + 4px); overflow: hidden; }
.cv-estados__mas {
  flex: none; display: grid; place-items: center; border-radius: 5px; background: rgba(11, 9, 6, 0.85);
  border: 2px solid #a89f86; color: #f3dfa0; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8);
}

/* ───────── D-CUI-4/5 · la ficha flotante ───────── */
.cv-ficha, .cv-ficha * { text-transform: none !important; letter-spacing: normal; }
/* D-SMOKE-9 D-SM9-10 — left/top son la esquina (los pone colocarFicha tras medirla): sin translate */
.cv-ficha { position: fixed; z-index: 10050; pointer-events: none; }
/* D-COMBATE-OBJETIVO (D-CO-OBJ-7) — la ficha del enemigo: barras (sin números hasta descubrirlo), resistencias y habilidades */
.ficha-enemigo .fe-nivel { font-family: var(--ui-fuente-texto); font-size: 12px; font-weight: 600; margin-left: 4px; }
.ficha-enemigo .fe-barras { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 6px; }
.ficha-enemigo .fe-barra { position: relative; height: 12px; border-radius: 3px; background: #05060a; border: 1px solid #262c3a; overflow: hidden; }
.ficha-enemigo .fe-barra > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8e2323, #d24a3c); }
.ficha-enemigo .fe-barra--mana > i { background: linear-gradient(90deg, #2a4f9e, #5fa0e8); }
.ficha-enemigo .fe-barra > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; line-height: 1; color: #fff; text-shadow: 0 1px 2px #000; }
.ficha-enemigo .fe-bloque { margin-top: 6px; }
.ficha-enemigo .fe-titulo { font-size: 11px; color: #e3b341; }
.ficha-enemigo .fe-resists { display: grid; grid-template-columns: repeat(3, auto auto); column-gap: 4px; justify-content: start; font-size: 11px; }
.ficha-enemigo .fe-resists span:nth-child(odd) { color: #9d957f; }
.ficha-enemigo .fe-resists span:nth-child(even) { color: #f2efe6; margin-right: 6px; }

/* ───────── D-CUI-2 · las gemas del jugador, a los pies (franja fija en las tres disposiciones) ───────── */
.cv-pies {
  position: absolute; left: 50%; bottom: 4px; translate: -50% 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 10px 4px; border-radius: 10px;
  background: rgba(8, 7, 5, 0.58); border: 1px solid rgba(214, 178, 94, 0.35);
}
.cv-estilo-B .cv-pies { border-color: rgba(190, 90, 70, 0.45); }
.cv-pies__gemas { display: flex; gap: 6px; }
.cv-gema {
  position: relative; width: 50px; height: 50px; padding: 0; border-radius: 7px; cursor: pointer; overflow: hidden;
  background: #0b0906; border: 2px solid #b89a52; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.cv-estilo-B .cv-gema { border-color: #a4504a; }
.cv-gema__icono { position: absolute !important; inset: 1px; width: auto !important; height: auto !important; }
.cv-gema__sombra { position: absolute; left: 0; right: 0; top: 0; background: rgba(0, 0, 0, 0.62); pointer-events: none; transition: height 0.2s linear; }
.cv-gema__s { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000, 0 0 6px #000; pointer-events: none; }
.cv-gema__n { position: absolute; left: 3px; top: 1px; font-size: 10px; font-weight: 700; color: #f3dfa0; text-shadow: 0 1px 2px #000; pointer-events: none; }
.cv-gema--vacia { border-style: dashed; border-color: rgba(214, 178, 94, 0.55); background: rgba(0, 0, 0, 0.35); }
.cv-gema__mas { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; color: rgba(243, 223, 160, 0.6); }
.cv-gema--vacia:hover { border-color: #f3d27a; }
.cv-gema--vacia:hover .cv-gema__mas { color: #f3d27a; }
.cv-gema--memo { border-color: #8aa8ff; }
.cv-gema--memo .cv-gema__icono { filter: grayscale(0.6) brightness(0.8); }
.cv-gema.sin-mana .cv-gema__icono { filter: grayscale(0.85) brightness(0.6); }
.cv-gema.sin-mana::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px rgba(80, 120, 255, 0.7); pointer-events: none; }
.cv-gema.casteando { border-color: #f3d27a; box-shadow: 0 0 10px rgba(255, 210, 110, 0.8); }
.cv-pies__habs { display: flex; gap: 4px; }
.cv-pies__hab { position: relative; display: inline-flex; scale: 0.72; margin: -7px -5px; }
.cv-pies__hab.sin-mana .v3-dock-icon { filter: grayscale(0.85) brightness(0.7); }
.cv-pies__hab.casteando .v3-dock-icon { outline: 2px solid #e8c25a; outline-offset: 1px; border-radius: 6px; }
.cv-pies__aviso {
  position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; white-space: nowrap; padding: 3px 10px; border-radius: 4px;
  background: rgba(60, 14, 14, 0.92); border: 1px solid #8a3a2a; color: #ffd9c8; font-size: 12px; pointer-events: none;
}
@container (max-height: 700px) {
  .cv-gema { width: 42px; height: 42px; }
  .cv-pies__hab { scale: 0.6; margin: -10px -7px; }
}
/* D-SMOKE-3 D-S3-1 — en una vista baja la franja no va encima de las figuras: la escena se acorta lo que mide la franja
   (`--cv-pies-alto`, lo pone CvGemasJugador) y la franja queda debajo. La fila del Salón ya no necesita subir. */
@container cv-vista (max-height: 640px) {
  .cv-vista--pies > .cv-escena { bottom: var(--cv-pies-alto, 0px); }
  .cv-vista--pies > .cv-pies { bottom: 2px; }
  .cv-vista--pies .cv-salon-fila--pies { bottom: 1.4cqh; height: 38cqh; }
  /* D-FONDOS-SUELO D-FS-1 — la escena avisa de que va con la franja en una vista baja: las figuras no suben (posicionesEscena, conPies) */
  .cv-vista--pies > .cv-escena { --cv-con-pies: 1; }
}
/* D-FONDOS-SUELO D-FS-1 — lo que suben las figuras de Línea y Cine para dejar sitio a la franja (antes, tres `margin-bottom` aquí y
   su anulación arriba) va ya sumado en su `bottom`: src/ui/disposicion_combate.ts, `LINEAS_PIES[…].subida`. */

/* ───────── D-CUI-2 · el libro de hechizos (al pulsar una gema vacía) ───────── */
.cv-libro-capa { position: fixed; inset: 0; z-index: 10040; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); }
.cv-libro {
  width: min(620px, 92vw); max-height: 70vh; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; color: #efe6cf;
  background: linear-gradient(180deg, #2a1d0e, #160f07); border: 2px solid #b89a52; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
}
.cv-libro__cabeza { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-family: 'Cinzel', serif !important; color: #f3dfa0; border-bottom: 1px solid rgba(214, 178, 94, 0.35); }
.cv-libro__cerrar { background: none; border: 0; color: #cfc4a4; cursor: pointer; font-size: 16px; }
.cv-libro__tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; padding: 12px; overflow-y: auto; }
.cv-libro__tarjeta {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 6px; cursor: pointer; color: inherit;
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(214, 178, 94, 0.35); font: inherit;
}
.cv-libro__tarjeta:hover { border-color: #f3d27a; background: rgba(60, 40, 14, 0.5); }
.cv-libro__nombre { font-size: 13px; text-align: center; color: #f6ead0; }
.cv-libro__nivel { font-size: 11px; color: #a89f86; }
.cv-libro__vacio { padding: 18px 14px; color: #a89f86; }
.cv-libro__pie { padding: 8px 14px; font-size: 11px; color: #a89f86; border-top: 1px solid rgba(214, 178, 94, 0.2); }

/* ───────── D-CUI-7 · el Salón con la caja A ───────── */
/* SA-1 — el paisaje de la zona vuelve a toda la vista, con el suelo oscurecido abajo */
.cv-escena--salon > .zone-backdrop { display: block; }
.cv-escena--salon { background: #07090e; }
.cv-estilo-B .cv-escena--salon { background: #07090e; }
.cv-escena--salon::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, transparent, rgba(4, 4, 6, 0.85) 45%, rgba(4, 4, 6, 0.95)); pointer-events: none; z-index: 0; }
.cv-escena--salon > .cv-arco, .cv-escena--salon > .cv-salon-fila { z-index: 1; }
/* SA-2 — con pocos, las cajas crecen (24,2 / 32 / 36 %) y se centran, sin huecos */
.cv-salon-fila { grid-template-columns: repeat(var(--cv-n, 4), minmax(0, var(--cv-ancho, 24.2%))); }
/* A-2 — con las gemas a los pies, la fila sube lo justo para dejarles sitio */
.cv-salon-fila--pies { bottom: 112px; height: calc(38cqh - 70px); }
/* SA-3 — caja A: el paisaje detrás de la figura, oscurecido hacia los datos, y su sombra en el suelo */
.cv-marco { background: #0a0907; }
.cv-marco__hueco { overflow: hidden; }
.cv-marco__paisaje { position: absolute; inset: 0; }
/* D-FONDOS-SUELO D-FS-3 — el paisaje del marco se encaja como la escena (`--fondo-escala`/`--fondo-arriba`, CvMarcoPaisaje): el héroe pisa
   el suelo de su fondo. Antes, `object-fit: cover; object-position: 50% 62%`; sin variables, algo parecido (cubre un hueco de 0,58:1). */
.cv-marco__paisaje img {
  position: absolute; left: 50%; top: var(--fondo-arriba, -20%); width: calc(var(--fondo-escala, 3.3) * 100%); height: auto;
  max-width: none; max-height: none; translate: -50% 0; filter: brightness(0.85);
}
.cv-marco__paisaje::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(10, 9, 7, 0.95)), linear-gradient(180deg, transparent 65%, rgba(0, 0, 0, 0.55)); }
.cv-marco__sombra { position: absolute; left: 22%; right: 22%; bottom: 3%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.75), transparent 70%); z-index: 1; }
.cv-marco__hueco .cv-actor { z-index: 2 !important; }
/* D-SMOKE-6 D-SM6-1b — la figura del marco se mide por su hueco (antes, 30cqh de la escena: no cabía en `38cqh − 70px`): el alto que
   calcula replay-adapter.jsx (`altoFiguraEnMarco`: el 86 % del hueco o lo que deja su ancho) y, sin él, el 86 %; a un 3 % del suelo. */
/* la embestida y la esquiva (`--cv-dx`), cortas en el marco: 4cqw de la escena son media caja y la figura se salía al golpear */
.cv-marco__hueco > .cv-actor { height: var(--cv-fig-alto, 86%) !important; bottom: 3% !important; --cv-dx: 1cqw; }
/* D-FONDOS-SUELO D-FS-1 — el pie de la figura del marco viene de la tabla (`LINEAS_PIES.salon.marco`, `--cv-marco-pie` en la fila) */
.cv-salon-fila .cv-marco__hueco > .cv-actor { bottom: var(--cv-marco-pie, 3%) !important; }
.cv-marco__datos { position: relative; background: linear-gradient(90deg, rgba(10, 9, 7, 0.95), rgba(10, 9, 7, 0.88)); }
.cv-estilo-B .cv-marco { background: #0e0a0c; }
.cv-estilo-B .cv-marco__paisaje::after { background: linear-gradient(90deg, transparent 55%, rgba(14, 10, 12, 0.95)), linear-gradient(180deg, transparent 65%, rgba(0, 0, 0, 0.55)); }
.cv-estilo-B .cv-marco__datos { background: linear-gradient(90deg, rgba(14, 10, 12, 0.95), rgba(14, 10, 12, 0.88)); }

/* ───────── D-MASCOTAS D-MA-9 — la mascota junto a su dueño ───────── */
.cv-mascota { cursor: default; }
.cv-placa--mascota { width: clamp(80px, 8cqw, 140px); }
.cv-placa--mascota .cv-placa__nombre { font-size: 11px; }
.cv-placa--mascota .cv-placa__nombre small { margin-left: 4px; opacity: 0.75; }
.cv-mascota--animacion .cv-cuerpo { height: 70%; margin-top: 30%; transform: rotate(-35deg); }
/* D-ARTE-SIMAS D-ASV-5: el aire ya tiene arte propio (mascota_elemental_aire.webp), sin filtro de lavado.
   A1-4: el espíritu de lobo del chamán tiene arte propio (mascota_lobo_espiritu.webp, mira a la derecha): fuera el espejo
   provisional de D-ASV-6.4. Aire de espíritu por CSS (el recorte es opaco): algo translúcido y un halo azul pálido suave, que se
   SUMA a la sombra de cada sitio (la de .cv-cuerpo en combate y la del marco del Salón), para no pisarla como pisaba el aire. */
.cv-mascota--espiritu .cv-cuerpo { opacity: 0.85; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 8px rgba(170, 205, 255, 0.55)); }
/* D-SMOKE-12 D-SM12-2 — la mascota del marco se mide por el hueco (la mitad del alto de la figura de su dueño, `--cv-fig-alto`) y va a
   su lado y DETRÁS (z 1 < z 2 del actor del hueco). Antes: 13cqh de la escena, a la derecha y z 3, delante del dueño, que no se veía. */
/* D-PULIDOS-29 D-P29-2 — con 2 % el dibujo (salpicaduras, cola) tocaba el borde dorado y su sombra se cortaba en el `overflow` del
   hueco: margen de 8 % (10 px como poco) y un 44 % de ancho como mucho, para no meterse más bajo su dueño. */
.cv-marco__mascota-figura { position: absolute; left: max(8%, 10px); bottom: var(--cv-marco-pie, 3%); height: calc(var(--cv-fig-alto, 86%) * 0.5); max-width: 44%; width: auto; object-fit: contain; object-position: left bottom; z-index: 1; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }
img.cv-marco__mascota-figura.cv-mascota--espiritu { opacity: 0.85; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 6px rgba(170, 205, 255, 0.55)); }
.cv-marco__mascota { display: flex; flex-direction: column; gap: 1px; font-size: 10px; color: #b9b29a; }
.cv-marco__mascota .cv-barra--vida { height: 6px; }

/* ───────── D-PLANO PL-1 (claude/_CLAUDE_D_PLANO_PL1_MESA.md, D-PL1-3/4/5) — la escena «Plano» ─────────
   El lienzo (src/ui/escena_plano.ts) llena la escena; encima, la columna de enemigos. Clases cvp- (ninguna de ui/marco.css). */
.cv-escena--plano { background: #14100b; }
.cvp-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; cursor: pointer; z-index: 0; }
.cvp-lista {
  position: absolute; top: 86px; right: 12px; width: 248px; z-index: 4; display: flex; flex-direction: column; gap: 4px;
  max-height: calc(100% - 86px - 116px); overflow: hidden; pointer-events: none;
}
.cvp-lista > * { pointer-events: auto; }
.cvp-fila {
  display: grid; grid-template-columns: 38px 1fr; gap: 7px; align-items: center; width: 100%; padding: 4px 7px 4px 4px; text-align: left;
  border-radius: 6px; cursor: pointer; color: #efe6cf; font: inherit; font-size: 12px;
  background: linear-gradient(90deg, rgba(20, 15, 9, 0.92), rgba(14, 11, 7, 0.86)); border: 1px solid rgba(184, 154, 82, 0.55);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}
.cvp-fila:hover { border-color: #e2c573; }
.cvp-fila.sel { border-color: #f3dfa0; box-shadow: 0 0 0 1px #000, 0 0 10px rgba(255, 210, 110, 0.45); }
.cvp-fila__cara { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; border: 2px solid #c0392b; background: #2a1412; }
.cvp-fila__cara img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.cvp-fila__datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cvp-fila__nombre { display: flex; gap: 5px; align-items: baseline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--ui-fuente-texto) !important; font-weight: 700; /* D-P31-6 */ font-size: 12px; color: #f3e6c4; }
.cvp-fila__nivel { flex: 0 0 auto; font-weight: 700; font-size: 11px; }
.cvp-fila .cv-barra--vida { height: 7px; }
.cvp-fila__pie { min-height: 13px; font-size: 11px; line-height: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #cfc4a4; }
.cvp-fila__lanza { color: #ffb27a; }
.cvp-caidos, .cvp-llegan {
  padding: 4px 9px; border-radius: 5px; font-size: 11.5px; color: #cfc4a4; background: rgba(14, 11, 7, 0.8); border: 1px solid rgba(184, 154, 82, 0.3);
}
.cvp-llegan { color: #ffc58a; border-color: rgba(230, 126, 34, 0.6); }
.cvp-cerca {
  height: 34px; margin-top: 4px; padding: 0 14px; border-radius: 17px; cursor: pointer; white-space: nowrap;
  font-family: 'Cinzel', serif !important; font-size: 12.5px; letter-spacing: 0.06em; color: #f3dfa0;
  background: radial-gradient(circle at 40% 35%, #3a2a14, #140e06); border: 2px solid #b89a52; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}
.cvp-cerca:hover { border-color: #f3d27a; box-shadow: 0 0 0 1px #000, 0 0 10px rgba(255, 210, 110, 0.6); }
.cvp-cerca--jefe { border-color: #f3d27a; animation: cvp-latido 1.6s ease-in-out infinite; }
@keyframes cvp-latido { 0%, 100% { box-shadow: 0 0 0 1px #000, 0 0 6px rgba(255, 210, 110, 0.35); } 50% { box-shadow: 0 0 0 1px #000, 0 0 16px rgba(255, 210, 110, 0.85); } }
.cv-estilo-B .cvp-fila { border-color: rgba(190, 90, 70, 0.6); background: linear-gradient(90deg, rgba(40, 14, 16, 0.92), rgba(16, 8, 9, 0.86)); }
.cv-estilo-B .cvp-fila.sel { border-color: #f2d0c0; }
.cv-estilo-B .cvp-cerca { border-color: #a4504a; background: radial-gradient(circle at 40% 35%, #3a1418, #12070a); color: #f2d0c0; }
.cv-estilo-B .cvp-caidos { border-color: rgba(190, 90, 70, 0.35); background: rgba(16, 8, 9, 0.8); }
body.ui-efectos-reducidos .cvp-cerca--jefe { animation: none; }
/* muchos a la vez (las llegadas): filas de una línea, sin pie */
.cvp-lista--apretada { gap: 3px; }
.cvp-lista--apretada .cvp-fila { grid-template-columns: 26px 1fr; padding: 2px 6px 2px 3px; }
.cvp-lista--apretada .cvp-fila__cara { width: 26px; height: 26px; border-width: 1.5px; }
.cvp-lista--apretada .cvp-fila__pie { display: none; }
.cvp-lista--apretada .cvp-fila__nombre { font-size: 11px; }
@container (max-width: 899px) { .cvp-lista { width: 200px; } .cvp-lista--filas .cvp-fila__cara { width: 30px; height: 30px; } .cvp-lista--filas .cvp-fila { grid-template-columns: 30px 1fr; } }
@container (max-height: 640px) { .cvp-lista { top: 70px; max-height: calc(100% - 70px - 20px); } }

/* ───────── D-PLANO PL-2 (claude/_CLAUDE_D_PLANO_PL2_MESA.md) — pulido y móvil ─────────
   La lista de enemigos sin scroll (D-PL2-5): filas (≤ 7), rejilla de dos columnas (8-16) o tira arriba en el estrecho (D-PL2-1),
   con «+N» para lo que no cabe; el jefe y el mez/miedo (D-PL2-9/10); el aviso grande del centro (D-PL2-7). Clases cvp-. */
.cvp-lista__fichas { display: flex; flex-direction: column; gap: inherit; min-height: 0; }
.cvp-lista__pie { display: flex; flex-direction: column; gap: 4px; }
.cvp-fila--jefe { border-color: #f3d27a; box-shadow: 0 0 0 1px #000, 0 0 12px rgba(255, 205, 90, 0.5); }
.cvp-fila--jefe .cvp-fila__nombre { font-size: 13.5px; color: #ffe7a8; }
.cvp-fila--jefe .cvp-fila__cara { border-color: #f3d27a; }
.cvp-fila--quieto .cvp-fila__cara { border-color: #a78bfa; filter: grayscale(0.5) brightness(0.85); }
.cvp-fila__control { color: #c4b5fd; font-style: italic; }
.cvp-mas {
  display: flex; align-items: center; justify-content: center; min-height: 26px; padding: 2px 8px; border-radius: 6px;
  font-family: 'Cinzel', serif !important; font-size: 12px; color: #f3e6c4; background: rgba(14, 11, 7, 0.86); border: 1px dashed rgba(184, 154, 82, 0.6);
}
/* rejilla: dos columnas de fichas compactas */
.cvp-lista--rejilla .cvp-lista__fichas { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.cvp-lista--rejilla .cvp-fila { grid-template-columns: 24px 1fr; gap: 4px; padding: 2px 4px 2px 2px; }
.cvp-lista--rejilla .cvp-fila__cara { width: 24px; height: 24px; border-width: 1.5px; }
.cvp-lista--rejilla .cvp-fila__nombre { font-size: 10.5px; gap: 3px; }
.cvp-lista--rejilla .cvp-fila__pie { display: none; }
.cvp-lista--rejilla .cvp-fila .cv-barra--vida { height: 5px; }
/* tira (estrecho): arriba, de lado a lado, justo debajo de la barra de arriba */
.cvp-lista--tira { top: calc(var(--cvp-arriba, 48px) + 4px); left: 6px; right: 6px; width: auto; max-height: none; gap: 3px; }
.cvp-lista--tira .cvp-lista__fichas { flex-direction: row; flex-wrap: nowrap; gap: 4px; overflow: hidden; }
.cvp-lista--tira .cvp-fila {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 34px; flex: 0 0 34px;
  padding: 2px 2px 3px; border-radius: 6px;
}
.cvp-lista--tira .cvp-fila__cara { width: 26px; height: 26px; border-width: 1.5px; }
.cvp-lista--tira .cvp-fila__nivel {
  position: absolute; top: -1px; right: -1px; min-width: 13px; padding: 0 2px; border-radius: 6px; font-size: 9.5px; line-height: 12px; text-align: center;
  background: rgba(0, 0, 0, 0.85); font-family: 'Cinzel', serif !important;
}
.cvp-lista--tira .cvp-fila .cv-barra--vida { width: 100%; height: 4px; }
.cvp-lista--tira .cvp-mas { min-height: 0; height: 34px; padding: 0 6px; font-size: 11px; }
.cvp-lista--tira .cvp-lista__pie { flex-direction: row; flex-wrap: wrap; gap: 4px; }
.cvp-lista--tira .cvp-caidos, .cvp-lista--tira .cvp-llegan { padding: 1px 6px; font-size: 10.5px; }
.cv-estilo-B .cvp-fila--jefe { border-color: #f2c48a; }
.cv-estilo-B .cvp-mas { border-color: rgba(190, 90, 70, 0.6); background: rgba(16, 8, 9, 0.86); color: #f2d0c0; }
/* el aviso grande del centro */
.cvp-aviso {
  position: absolute; left: 50%; top: 38%; z-index: 6; pointer-events: none; transform: translate(-50%, -50%);
  padding: 10px 26px; border-radius: 6px; white-space: nowrap; text-align: center;
  font-family: 'Cinzel', serif !important; font-weight: 700; font-size: 26px; letter-spacing: 0.04em; color: #ffe2b0;
  background: linear-gradient(180deg, rgba(24, 16, 8, 0.92), rgba(10, 7, 4, 0.94)); border: 1px solid rgba(230, 160, 70, 0.75);
  box-shadow: inset 0 0 0 3px rgba(10, 7, 4, 0.95), inset 0 0 0 4px rgba(230, 160, 70, 0.3), 0 10px 30px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 0 #000, 0 0 14px rgba(255, 170, 70, 0.45);
  animation: cvp-aviso 2.4s ease-out both;
}
.cvp-aviso--ronda { color: #ffd38a; border-color: rgba(245, 158, 11, 0.9); }
.cv-estilo-B .cvp-aviso {
  color: #f6e6d0; border-radius: 2px; border-color: rgba(200, 120, 90, 0.8);
  background: linear-gradient(180deg, rgba(92, 20, 26, 0.95), rgba(46, 10, 14, 0.96));
  box-shadow: inset 0 3px 0 rgba(233, 196, 106, 0.85), 0 10px 30px rgba(0, 0, 0, 0.6);
}
@keyframes cvp-aviso { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.86); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } 20% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
body.ui-efectos-reducidos .cvp-aviso { animation: none; }
@media (prefers-reduced-motion: reduce) { .cvp-aviso { animation: none; } }
@container (max-width: 699px) { .cvp-aviso { font-size: 16px; padding: 6px 14px; top: 46%; } }
/* D-JEFE-MECANICA (D-JM-3) — la Arremetida del jefe: en todas las disposiciones, por debajo del aviso del Plano (38 %) y del rótulo de entrada, en rojo */
.cv-aviso-jefe { top: 47%; z-index: 30; font-size: 22px; }
.cvp-aviso--jefe { color: #ffd0c4; border-color: rgba(220, 70, 50, 0.9); text-shadow: 0 1px 0 #000, 0 0 14px rgba(255, 80, 50, 0.5); }
@container (max-width: 699px) { .cv-aviso-jefe { font-size: 14px; top: 52%; white-space: normal; max-width: 92%; } }
/* D-NIVEL-EN-COMBATE (D-NEC-10) — subir de nivel a mitad de combate: en todas las disposiciones, debajo del aviso del jefe (arriba
   lo tapa el rótulo del camp), en verde */
/* D-DP-15 — arriba de las tarjetas y por encima de todo, en las 3 disposiciones: abajo salía tapado y tenue */
.cv-aviso-nivel { top: 28%; z-index: 200; font-size: 22px; white-space: normal; max-width: 86%; animation-duration: 3.6s; }
/* D-PRIMERA-HORA-3 D-PH3-7 — Repetir en «No»: el camp limpio y la vuelta a la puerta, antes de salir */
.cv-aviso-limpio { position: fixed; left: 50%; top: 30%; z-index: 210; font-size: 20px; white-space: normal; max-width: 86%; animation-duration: 3.2s; }
.cvp-aviso--limpio { color: #d9f7c4; border-color: rgba(120, 200, 90, 0.9); }
@container (max-width: 699px) { .cv-aviso-limpio { font-size: 13px; max-width: 92%; } }
.cvp-aviso--nivel { color: #d9f7c4; border-color: rgba(120, 200, 90, 0.9); text-shadow: 0 1px 0 #000, 0 0 14px rgba(140, 230, 100, 0.5); }
.cv-estilo-B .cvp-aviso--nivel { color: #e6f6d6; border-color: rgba(150, 200, 110, 0.85); }
@container (max-width: 699px) { .cv-aviso-nivel { font-size: 13px; top: 64%; max-width: 92%; } }
/* en el Plano con la tira arriba, los estados del grupo bajan al pie del lienzo (encima de las gemas) */
@container cv-vista (max-width: 1000px) {
  .cv-vista--plano .cv-estados-globales { top: auto; bottom: calc(var(--cv-pies-alto, 96px) + 6px); }
}
/* «Ver de cerca»: el texto corto en el estrecho */
.cvp-cerca__corto { display: none; }
@container cv-vista (max-width: 560px) {
  .cvp-cerca { height: 26px; margin-top: 2px; padding: 0 9px; font-size: 10.5px; letter-spacing: 0.03em; border-width: 1.5px; }
  .cvp-cerca__largo { display: none; }
  .cvp-cerca__corto { display: inline; }
}
/* D-PL2-1 — la barra de arriba, compacta por debajo de 560 px de escena (en todas las disposiciones: hoy no cabe en ninguna) */
@container cv-vista (max-width: 560px) {
  .cv-arriba { padding: 3px 4px 0; gap: 3px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .cv-placa-zona { padding: 3px 5px; min-width: 0; }
  .cv-placa-zona__textos { display: none; }
  .cv-placa-zona--reloj .cv-placa-zona__textos { display: none; }
  .cv-estandarte { min-width: 0; justify-self: stretch; margin-top: -3px; overflow: hidden; }
  .cv-estandarte__tela { min-width: 0; width: 100%; padding: 5px 8px 10px; }
  .cv-estandarte__nombre { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .cv-estandarte__camino { display: none; }
  .cv-arriba__der { gap: 3px; flex: 0 1 auto; flex-wrap: nowrap; }
  .cv-redondo { width: 26px; height: 26px; }
  .cv-salir { height: 26px; padding: 0 7px; font-size: 10px; }
}

/* D-HUIDA-ORDENES D-HO-3 — el menú de órdenes de clase (va en el body: coordenadas de ventana) */
.cv-ordenes { position: fixed; z-index: 9000; width: 290px; max-height: 70vh; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 3px; background: #1b1610; border: 1px solid #8a6d2f; border-radius: 6px; box-shadow: 0 6px 22px rgba(0,0,0,.65); color: #efe6cf; font-size: 13px; }
.cv-ordenes__titulo { padding: 2px 6px 5px; color: #f3dfa0; font-weight: 700; border-bottom: 1px solid rgba(138,109,47,.5); }
.cv-ordenes__fila { display: flex; flex-direction: column; gap: 1px; padding: 5px 7px; background: none; border: 0; border-radius: 4px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cv-ordenes__fila:hover:not(:disabled) { background: rgba(232,191,74,.16); }
.cv-ordenes__fila:disabled { opacity: .55; cursor: default; }
.cv-ordenes__que { font-size: 11px; color: #b9ad8f; }
.cv-ordenes__nada { padding: 6px 7px; color: #b9ad8f; }
.cv-actor--enemigo, .cvp-fila, .cvp-lienzo { -webkit-touch-callout: none; }

/* D-HUIDA-ORDENES D-HO-8 — el aviso de la huida */
.cv-huida { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); z-index: 40; min-width: 230px; padding: 7px 14px; background: rgba(27,22,16,.92); border: 1px solid #b4532a; border-radius: 6px; text-align: center; color: #f6dcc0; font-weight: 700; pointer-events: none; }
.cv-huida__barra { height: 7px; margin-top: 5px; background: rgba(255,255,255,.14); border-radius: 4px; overflow: hidden; }
.cv-huida__barra > span { display: block; height: 100%; background: #e0894a; }