/* ============================================================
   MONCHIS · css/juegos.css
   Estilos de los juegos. Sesion 4: Pictionary.
   Usa los tokens de tokens.css (todo el branding pasa por --acento).
   ============================================================ */

/* Contenedor de escena */
#pic-cuerpo { gap: 12px; }
.pic-centro { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6vh; }

/* ---------- Chips de categoria / dificultad ---------- */
.pic-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  background: var(--surface-2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 999px;
  padding: 4px 12px; font-size: var(--fs-sm); font-weight: 600;
}
.chip.tenue { color: var(--texto-mut); font-weight: 500; }

/* ---------- Carrusel de juegos ---------- */
.pic-juegos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.pic-juego-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 18px 10px; cursor: pointer;
  color: var(--texto); transition: transform var(--t-rapida), border-color var(--t-rapida);
}
.pic-juego-card:not(.inactivo):active { transform: scale(.97); }
.pic-juego-card:not(.inactivo) { border-color: var(--acento-borde); }
.pic-juego-card.inactivo { opacity: .45; cursor: not-allowed; }
.pic-juego-icono { font-size: 2rem; line-height: 1; }

/* ---------- Segmented control (modo / dificultad) ---------- */
.pic-seg { display: flex; background: var(--surface); border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 4px; gap: 4px; }
.pic-seg-op {
  flex: 1; border: none; background: transparent; color: var(--texto-mut);
  padding: 10px 8px; border-radius: 8px; font-weight: 600; font-size: var(--fs-sm);
  cursor: pointer; min-height: var(--tap-min);
}
.pic-seg-op.activo { background: var(--acento); color: #fff; }
.pic-seg-op.inactivo { opacity: .4; cursor: not-allowed; }

/* ---------- Chips de rondas ---------- */
.pic-rondas { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.pic-ronda-chip {
  border: 1px solid var(--borde); background: var(--surface); color: var(--texto);
  border-radius: 10px; padding: 10px 0; font-weight: 700; cursor: pointer; min-height: var(--tap-min); /* 48px, §15 (8F-3) */
}
.pic-ronda-chip.activo { background: var(--acento); color: #fff; border-color: var(--acento); }

/* ---------- Grid de categorias ---------- */
.pic-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pic-cat {
  border: 1px solid var(--borde); background: var(--surface); color: var(--texto);
  border-radius: var(--radio-sm); padding: 14px 10px; font-weight: 600; cursor: pointer;
  min-height: var(--tap-min); text-align: center;
}
.pic-cat:active { transform: scale(.97); border-color: var(--acento-borde); }

/* ---------- Cabecera del turno ---------- */
.pic-cab-turno { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pic-palabra { font-size: var(--fs-xl); font-weight: 800; letter-spacing: .5px; color: var(--acento-2); }
.pic-palabra.dibujante { color: var(--texto); font-size: var(--fs-lg); }

/* ---------- Cronometro ---------- */
.pic-timer {
  font-size: var(--fs-xxl); font-weight: 800; min-width: 56px; text-align: center;
  color: var(--texto); font-variant-numeric: tabular-nums; line-height: 1;
}
.pic-timer.urgente { color: var(--peligro); animation: pic-late 1s steps(2) infinite; }
@keyframes pic-late { 50% { opacity: .45; } }

/* ---------- Lienzo ---------- */
.pic-lienzo-wrap {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden;
}
.pic-lienzo-wrap .lienzo { width: 100%; height: 100%; display: block; touch-action: none; }
.pic-nota { text-align: center; }

/* ---------- Toolbar de dibujo ---------- */
.pic-toolbar { display: flex; flex-direction: column; gap: 10px; }
.pic-colores { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pic-color {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--borde);
}
.pic-color.activo { border-color: #fff; box-shadow: 0 0 0 2px var(--acento); }
.pic-acciones { display: flex; gap: 8px; }
.pic-acciones .pic-grosor { flex: 1; min-height: 44px; }
.pic-grosor.activo { border-color: var(--acento); color: var(--acento); }
.pic-util { display: flex; gap: 8px; }
.pic-util .btn { flex: 1; min-height: 44px; }

/* ---------- Reveal ---------- */
.pic-reveal { text-align: center; margin-top: 4vh; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pic-reveal-palabra { font-size: var(--fs-xxl); font-weight: 800; color: var(--acento-2); margin: 2px 0; }

/* ---------- Marcador ---------- */
.pic-marcador {
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 12px 14px; margin-top: 12px;
}
.pic-marca-fila {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--borde);
}
.pic-marca-fila:last-child { border-bottom: none; }
.pic-pts { font-weight: 800; font-size: var(--fs-lg); color: var(--acento); font-variant-numeric: tabular-nums; }

/* ============================================================
   Sesión 4B — adivinanzas (espectador) y lista de aciertos
   ============================================================ */

/* Caja de adivinanza del espectador */
.pic-adivina { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.pic-adivina-fila { display: flex; gap: 8px; }
.pic-adivina-input {
  flex: 1; min-width: 0;
  height: var(--tap-min);
  padding: 0 14px;
  background: var(--surface-2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio-sm);
  font-size: var(--fs-lg); font-weight: 600; letter-spacing: .3px;
  text-transform: uppercase;
}
.pic-adivina-input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-borde, var(--acento)); }
.pic-adivina-input:disabled { opacity: .6; }
.pic-adivina-btn { min-width: 96px; height: var(--tap-min); padding: 0 16px; }
.pic-adivina-fb { min-height: 1.2em; margin: 0; font-size: var(--fs-sm); }
.pic-adivina-fb.ok { color: var(--ok); font-weight: 700; }
.pic-adivina-fb.error { color: var(--peligro); }

/* Lista de aciertos en el reveal */
.pic-aciertos {
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 12px 14px; margin-top: 14px;
}
.pic-acierto-fila {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid var(--borde);
}
.pic-acierto-fila:last-child { border-bottom: none; }
.pic-acierto-fila .pic-pts { color: var(--ok); }

/* ---------- (4C) Equipos: draft + presentación ---------- */
.pic-eq-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 10px;
}
.pic-eq-card {
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  background: var(--surface); border: 2px solid var(--borde);
  border-radius: var(--radio); padding: 12px; min-height: 120px;
  color: var(--texto); width: 100%;
}
button.pic-eq-card { cursor: pointer; }
button.pic-eq-card:not(.lleno):active { transform: scale(.98); }
.pic-eq-card.eq-a.mio { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-borde); }
.pic-eq-card.eq-b.mio { border-color: var(--acento-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento-2) 45%, transparent); }
.pic-eq-card.lleno { opacity: .45; cursor: not-allowed; }
.pic-eq-cab { display: flex; align-items: center; justify-content: space-between; }
.pic-eq-cab strong { font-size: var(--fs-lg); }
.pic-eq-miembros { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-content: flex-start; }
.pic-eq-chip {
  background: var(--surface-2); border: 1px solid var(--borde);
  border-radius: 999px; padding: 3px 10px; font-size: var(--fs-sm); font-weight: 600;
}
.pic-eq-card.eq-a .pic-eq-chip { border-color: var(--acento-borde); }
.pic-eq-card.eq-b .pic-eq-chip { border-color: color-mix(in srgb, var(--acento-2) 45%, transparent); }
.pic-eq-accion { font-size: var(--fs-sm); }
.pic-eq-sin {
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: var(--radio-sm); padding: 8px 12px; margin-bottom: 8px;
}

/* Badge permanente "Tu equipo: A/B" durante el juego */
.pic-mi-equipo { font-weight: 700; border: none; }
.pic-mi-equipo.eq-a { background: var(--acento); color: #fff; }
.pic-mi-equipo.eq-b { background: var(--acento-2); color: #06201c; }

/* ============================================================
   ANAGRAMAS (Sesion 5C)
   ============================================================ */

.ana-reloj {
  font-size: 44px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 1px;
  margin: 6px 0 2px;
  color: var(--texto);
}
.ana-reloj.bajo { color: var(--peligro); }

.ana-msg { min-height: 22px; font-size: var(--fs-sm); text-align: center; margin: 2px 0 8px; }
.ana-msg.ok  { color: var(--ok); }
.ana-msg.no  { color: var(--peligro); }
.ana-msg.mut { color: var(--texto-mut); }

.ana-teclado-zona { margin: 4px 0 10px; }

.ana-stats {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-top: 6px;
}
.ana-stats b { display: block; font-size: 22px; font-weight: 800; }
.ana-stats span { font-size: 11px; color: var(--texto-mut); }

.ana-lista {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  max-height: 34vh;
  overflow: auto;
}
.ana-lista li {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--borde);
  font-size: 16px;
}
.ana-lista li b { color: var(--ok); }

/* ---- Reveal ---- */
.ana-reveal-titulo { text-align: center; margin: 6px 0 10px; }

.ana-rack-mini { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ana-ficha-mini {
  width: 32px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800;
  background: var(--surface-2);
  border: 1px solid var(--borde);
  border-radius: 8px;
}

.ana-marcador { display: flex; flex-direction: column; gap: 6px; }
.ana-marca-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm, 10px);
}
.ana-marca-fila.yo { border-color: var(--acento); }
.ana-pos {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  background: var(--surface-2);
  border-radius: 999px;
  color: var(--texto-mut);
  flex: 0 0 auto;
}
.ana-pal { font-size: var(--fs-sm); color: var(--texto-mut); }
.ana-pts {
  font-size: 20px; font-weight: 800;
  color: var(--acento);
  min-width: 40px; text-align: right;
}

/* (5D) Banner de ganador / empate en el reveal final */
.ana-ganador {
  text-align: center;
  font-weight: 800;
  font-size: var(--fs-lg, 18px);
  padding: 10px 12px;
  margin: 4px 0 8px;
  border: 1px solid var(--acento);
  border-radius: var(--radio-sm, 10px);
  background: color-mix(in srgb, var(--acento) 14%, transparent);
  color: var(--texto);
}

/* (5D) Aviso de autoavance entre rondas */
.ana-auto,
.opc-auto {
  font-size: var(--fs-sm);
  min-height: 18px;
  margin-top: 2px;
}

/* ============================================================
   Conteo de inicio de Anagramas: "¿Preparados? 3..2..1"
   (paréntesis de pulido) — overlay sincronizado por el servidor.
   ============================================================ */
.ana-prep {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50vh;
  text-align: center;
}
.ana-prep-titulo {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--texto);
  letter-spacing: -0.01em;
}
.ana-prep-num {
  font-size: clamp(5rem, 32vw, 9rem);
  font-weight: 900;
  line-height: 1;
  color: var(--acento);
  text-shadow: 0 0 28px var(--acento-tenue);
}
.ana-prep-num.pop { animation: ana-prep-pop 380ms ease-out; }
.ana-prep-pista { font-size: var(--fs-sm); max-width: 22ch; }

@keyframes ana-prep-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  45%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ana-prep-num.pop { animation: none; }
}

/* (8E-1) Regla del juego mostrada DENTRO del conteo, solo en la 1.ª ronda.
   Igual que .ana-prep-pista pero con más ancho para el texto completo. */
.ana-prep-regla {
  font-size: var(--fs-sm);
  line-height: 1.5;
  max-width: 30ch;
  color: var(--texto-mut);
}

/* ============================================================
   OPERACIONES (Sesión 6A — Cimientos)
   Pantalla de selección de modo + base visual compartida por los
   tres juegos (Carrera 6B · Captura 6C · Intruso 6D · Maratón 6E).
   ============================================================ */
.op-cabecera { text-align: center; margin: 4px 0 10px; }
.op-titulo { margin: 0; font-size: var(--fs-xl, 1.4rem); }
.op-sub { margin: 4px 0 0; }

/* Rejilla de modos (mismo lenguaje que las tarjetas del carrusel). */
.op-modos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.op-modo-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px 10px; cursor: pointer; color: var(--texto);
  min-height: 132px; transition: transform var(--t-rapida), border-color var(--t-rapida);
}
.op-modo-card:not(.inactivo):active { transform: scale(.97); }
.op-modo-card:not(.inactivo) { border-color: var(--acento-borde); }
.op-modo-card.inactivo { opacity: .5; cursor: not-allowed; }
.op-modo-icono { font-size: 2rem; line-height: 1; }
.op-modo-nombre { font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; }
.op-modo-desc { font-size: .72rem; line-height: 1.25; }
.op-modo-estado {
  margin-top: 2px; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px;
}
.op-modo-estado.ok    { background: var(--acento); color: #fff; }
.op-modo-estado.pronto{ background: var(--surface-2); color: var(--texto-mut); }

.op-nota { font-size: var(--fs-sm); text-align: center; margin: 14px 2px 0; line-height: 1.4; }
.op-nota code {
  background: var(--surface-2); border: 1px solid var(--borde);
  border-radius: 6px; padding: 1px 6px; font-size: .85em;
}
.op-volver { margin-top: 16px; }

/* ============================================================
   OPERACIONES · LA CARRERA DEL CRONÓMETRO   (Sesión 6B-1)
   ============================================================ */

/* --- Config: chips de dificultad --- */
.op-dif-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.op-dif-chip {
  flex: 1 1 0; min-width: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 8px; border-radius: var(--radio-sm);
  background: var(--surface); border: 2px solid var(--borde); color: var(--texto);
  cursor: pointer; touch-action: manipulation;
}
.op-dif-chip span { font-size: .72rem; }
.op-dif-chip.activo { border-color: var(--acento); background: var(--surface-2); }
.op-dif-chip:active { transform: scale(.97); }

/* --- Operación actual (grande) --- */
.opc-operacion {
  text-align: center; font-weight: 800; line-height: 1.1;
  font-size: clamp(2rem, 11vw, 3.2rem);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  margin: 6px 0 2px; color: var(--texto);
}
.opc-msg { text-align: center; min-height: 1.2em; font-size: var(--fs-sm); margin: 2px 0 8px; }
.opc-msg.ok { color: var(--ok, var(--acento-2)); }
.opc-msg.no { color: var(--peligro); }

.opc-teclado-zona { margin: 4px 0 8px; }

/* --- Stats privados --- */
.opc-stats {
  display: flex; gap: 8px; justify-content: space-around;
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: var(--radio-sm); padding: 8px 6px;
}
.opc-stats > div { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.opc-stats b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.opc-stats span { font-size: .68rem; color: var(--texto-mut); }

/* --- Pista compartida --- */
.opc-pista { display: flex; flex-direction: column; gap: 8px; }
.opc-carril {
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: var(--radio-sm); padding: 8px 10px;
}
.opc-carril.yo { border-color: var(--acento); background: var(--surface-2); }
.opc-carril-track {
  position: relative; height: 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-2), var(--surface-2)) padding-box;
  /* línea de pista punteada */
  background-image: repeating-linear-gradient(
    90deg, var(--borde) 0 2px, transparent 2px 14px);
  background-size: 100% 2px; background-position: 0 50%; background-repeat: no-repeat;
}
.opc-meta {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-size: 1.05rem; line-height: 1;
}
.opc-avatar {
  position: absolute; top: 50%; left: 0;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 6px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--borde);
  white-space: nowrap; max-width: 80%;
  transition: left .35s cubic-bezier(.22,.61,.36,1);
}
.opc-carril.yo .opc-avatar { border-color: var(--acento); background: var(--acento); color: #fff; }
.opc-avatar-flecha { font-size: .8rem; line-height: 1; }
.opc-avatar-nombre {
  font-size: .74rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; max-width: 12ch;
}
/* Flash al avanzar / retroceder */
.opc-avatar.avanza   { animation: opc-avanza .5s ease-out; }
.opc-avatar.retrocede{ animation: opc-retro  .5s ease-out; }
@keyframes opc-avanza {
  0% { box-shadow: 0 0 0 0 var(--ok, var(--acento-2)); }
  30%{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok, var(--acento-2)) 55%, transparent); }
  100%{ box-shadow: 0 0 0 0 transparent; }
}
@keyframes opc-retro {
  0% { box-shadow: 0 0 0 0 var(--peligro); }
  30%{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--peligro) 55%, transparent); }
  100%{ box-shadow: 0 0 0 0 transparent; }
}

.opc-reveal-titulo { text-align: center; margin: 4px 0 8px; }

@media (prefers-reduced-motion: reduce) {
  .opc-avatar { transition: none; }
  .opc-avatar.avanza, .opc-avatar.retrocede { animation: none; }
}

/* ============================================================
   Captura el Número (6C-1)
   ============================================================ */

/* Banner del número objetivo (arriba, grande, con acento). */
.opcap-objetivo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  background: var(--surface);
  border: 1.5px solid var(--acento);
  border-radius: var(--radio);
  padding: 8px 14px;
  margin: 6px 0 10px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}
.opcap-objetivo-etq {
  font-size: var(--fs-sm); color: var(--texto-mut); letter-spacing: .04em;
  text-transform: uppercase;
}
.opcap-objetivo-num {
  font-weight: 900; line-height: 1;
  font-size: clamp(2.6rem, 14vw, 4rem);
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

/* Tablero: contenedor relativo con altura proporcional. Las burbujas
   se posicionan en %, así escala bien entre 360px y desktop. */
.opcap-tablero {
  position: relative;
  width: 100%;
  /* aspect-ratio cercana al móvil; con min-height para que en pantallas
     anchas no se infle de más */
  aspect-ratio: 5 / 6;
  max-height: 64vh;
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin: 4px 0 10px;
  overflow: hidden;
  transition: box-shadow .2s ease, opacity .2s ease;
}
/* Cooldown global del jugador: tablero ligeramente atenuado y no clickeable. */
.opcap-tablero.cooldown {
  opacity: .68;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--peligro) 40%, transparent);
}
.opcap-tablero.cooldown-flash {
  animation: opcap-flash .28s ease-out;
}
@keyframes opcap-flash {
  0%   { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--peligro) 70%, transparent); }
  100% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--peligro) 40%, transparent); }
}

/* Burbuja: círculo absoluto, centrado en (left, top). */
.opcap-burbuja {
  position: absolute;
  /* Tamaño: ajusta al ancho del tablero (clamp para móvil grande). */
  width:  clamp(64px, 22%, 96px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    color-mix(in srgb, var(--surface-2) 80%, white 8%) 0%,
    var(--surface-2) 60%,
    color-mix(in srgb, var(--surface-2) 80%, black 12%) 100%);
  color: var(--texto);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, .35),
    inset 0 1px 0 color-mix(in srgb, white 14%, transparent);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; user-select: none;
  transition: transform .12s ease, box-shadow .12s ease, opacity .25s ease;
}
.opcap-burbuja:active { transform: translate(-50%, -50%) scale(.92); }
.opcap-burbuja.en-vuelo {
  opacity: .85;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35),
              0 0 0 2px color-mix(in srgb, var(--acento) 55%, transparent);
}
.opcap-burbuja-op {
  font-weight: 800;
  font-size: clamp(.86rem, 3.4vw, 1.05rem);
  line-height: 1.1;
  text-align: center;
  padding: 0 4px;
}

/* Animación de captura correcta (sale del tablero). */
.opcap-burbuja.saliendo {
  pointer-events: none;
  animation: opcap-pop .36s ease-out forwards;
}
.opcap-burbuja.saliendo.por-mi {
  animation: opcap-pop-mio .36s ease-out forwards;
}
@keyframes opcap-pop {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(1.18); opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(.2);   opacity: 0; }
}
@keyframes opcap-pop-mio {
  0%   { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 0 0 0 var(--ok, var(--acento-2)); opacity: 1; }
  40%  { transform: translate(-50%, -50%) scale(1.22); box-shadow: 0 0 0 12px color-mix(in srgb, var(--ok, var(--acento-2)) 55%, transparent); opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(.2);   box-shadow: 0 0 0 0 transparent; opacity: 0; }
}

/* Animación de señuelo (shake rojo, la burbuja permanece). */
.opcap-burbuja.fallo {
  animation: opcap-shake .55s ease-out;
}
@keyframes opcap-shake {
  0%   { box-shadow: 0 4px 10px rgba(0,0,0,.35), 0 0 0 0 var(--peligro); }
  20%  { transform: translate(calc(-50% - 6px), -50%) rotate(-3deg); box-shadow: 0 4px 10px rgba(0,0,0,.35), 0 0 0 6px color-mix(in srgb, var(--peligro) 55%, transparent); }
  40%  { transform: translate(calc(-50% + 6px), -50%) rotate(3deg); }
  60%  { transform: translate(calc(-50% - 4px), -50%) rotate(-2deg); }
  80%  { transform: translate(calc(-50% + 4px), -50%) rotate(2deg); }
  100% { transform: translate(-50%, -50%) rotate(0); box-shadow: 0 4px 10px rgba(0,0,0,.35), 0 0 0 0 transparent; }
}

/* Marcador en vivo durante la ronda. */
.opcap-marcador-vivo {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 2px 0 4px;
}
.opcap-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: 999px; padding: 4px 10px;
  font-size: var(--fs-sm);
}
.opcap-chip.yo { border-color: var(--acento); background: var(--surface-2); }
.opcap-chip-nombre {
  font-weight: 600; max-width: 14ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opcap-chip-pts {
  font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--acento);
}

.opcap-reveal-titulo { text-align: center; margin: 4px 0 4px; }

@media (prefers-reduced-motion: reduce) {
  .opcap-burbuja { transition: none; }
  .opcap-burbuja.saliendo,
  .opcap-burbuja.saliendo.por-mi,
  .opcap-burbuja.fallo,
  .opcap-tablero.cooldown-flash { animation: none; }
  .opcap-burbuja.saliendo { opacity: 0; }
}

/* ============================================================
   El Intruso Matemático (6D-1)
   ============================================================ */

/* Consigna superior (qué hay que encontrar). */
.opint-consigna {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  background: var(--surface);
  border: 1.5px solid var(--acento);
  border-radius: var(--radio);
  padding: 8px 14px;
  margin: 6px 0 12px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 16%, transparent);
}
.opint-consigna-etq {
  font-size: var(--fs-sm); color: var(--texto-mut); letter-spacing: .04em;
  text-transform: uppercase;
}
.opint-consigna-num {
  font-weight: 900; line-height: 1.05;
  font-size: clamp(1.7rem, 9vw, 2.6rem);
  color: var(--acento);
  letter-spacing: .01em;
}
.opint-consigna-sub { font-size: var(--fs-sm); }

/* Rejilla de opciones: 2 columnas en móvil; tarjetas grandes (zona de pulgar). */
.opint-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 4px 0 10px;
  transition: opacity .2s ease;
}
/* Bloqueado: rejilla atenuada y no clickeable. */
.opint-grid.bloqueado {
  opacity: .55;
  pointer-events: none;
  filter: grayscale(.35);
}
.opint-grid.bloqueo-flash { animation: opint-flash .28s ease-out; }
@keyframes opint-flash {
  0%   { filter: grayscale(.35) brightness(1.25); }
  100% { filter: grayscale(.35) brightness(1); }
}
/* Pregunta ya resuelta: atenúa las que no son el intruso. */
.opint-grid.resuelto .opint-card:not(.es-intruso) { opacity: .4; }

/* Tarjeta de opción. */
.opint-card {
  min-height: clamp(64px, 16vw, 88px);
  display: flex; align-items: center; justify-content: center;
  padding: 10px 8px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
  background: var(--surface-2);
  color: var(--texto);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .28),
              inset 0 1px 0 color-mix(in srgb, white 10%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; user-select: none;
  transition: transform .1s ease, box-shadow .12s ease, border-color .12s ease, opacity .2s ease;
}
.opint-card:active { transform: scale(.95); }
.opint-card.en-vuelo {
  box-shadow: 0 3px 8px rgba(0, 0, 0, .28),
              0 0 0 2px color-mix(in srgb, var(--acento) 55%, transparent);
}
.opint-card-op {
  font-weight: 800;
  font-size: clamp(1.05rem, 5.2vw, 1.6rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  text-align: center;
}

/* Acierto: la tarjeta del intruso se ilumina en verde. */
.opint-card.es-intruso {
  border-color: var(--ok, var(--acento-2));
  background: color-mix(in srgb, var(--ok, var(--acento-2)) 22%, var(--surface-2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok, var(--acento-2)) 45%, transparent);
  animation: opint-acierto .4s ease-out;
}
@keyframes opint-acierto {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Fallo: shake rojo (la tarjeta permanece). */
.opint-card.fallo { animation: opint-shake .5s ease-out; border-color: var(--peligro); }
@keyframes opint-shake {
  0%   { transform: translateX(0); box-shadow: 0 3px 8px rgba(0,0,0,.28), 0 0 0 0 var(--peligro); }
  20%  { transform: translateX(-6px); box-shadow: 0 3px 8px rgba(0,0,0,.28), 0 0 0 4px color-mix(in srgb, var(--peligro) 50%, transparent); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
  100% { transform: translateX(0); box-shadow: 0 3px 8px rgba(0,0,0,.28), 0 0 0 0 transparent; }
}

/* Recap del intruso en el reveal. */
.opint-reveal-intruso {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface);
  border: 1.5px solid var(--ok, var(--acento-2));
  border-radius: var(--radio);
  padding: 12px 14px;
  margin: 4px 0 12px;
}
.opint-reveal-op {
  font-weight: 900;
  font-size: clamp(1.3rem, 6.5vw, 2rem);
  color: var(--ok, var(--acento-2));
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .opint-card { transition: none; }
  .opint-card.es-intruso,
  .opint-card.fallo,
  .opint-grid.bloqueo-flash { animation: none; }
}

/* ============================================================
   MARATÓN (6E) — config (orden + dificultad) y pantalla de paso
   ============================================================ */
.mar-label {
  font-weight: 700; color: var(--texto-mut);
  margin: 16px 2px 8px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .5px;
}
.mar-orden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mar-juego {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--surface); border: 1.5px solid var(--borde);
  border-radius: var(--radio); padding: 14px 6px; cursor: pointer;
  color: var(--texto); transition: transform .08s ease, border-color .12s ease;
  min-height: var(--tap-min);
}
.mar-juego:active { transform: scale(.96); }
.mar-juego.on { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-borde, var(--acento)); }
.mar-juego.off { opacity: .45; cursor: not-allowed; }
.mar-juego-num {
  position: absolute; top: -8px; left: -8px;
  min-width: 22px; height: 22px; line-height: 22px;
  background: var(--acento); color: #fff; border-radius: 50%;
  font-weight: 800; font-size: var(--fs-sm); text-align: center;
}
.mar-juego-num:empty { display: none; }
.mar-juego-ico { font-size: 1.7rem; }
.mar-juego-nom { font-size: var(--fs-sm); font-weight: 600; text-align: center; }

.mar-fila-acc { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.mar-chip {
  border: 1.5px solid var(--borde); background: var(--surface); color: var(--texto);
  border-radius: var(--radio-sm); padding: 10px 14px; font-weight: 600; cursor: pointer;
  min-height: var(--tap-min);
}
.mar-chip:active { transform: scale(.97); }
.mar-chip.on { background: var(--acento); color: #fff; border-color: var(--acento); }
.mar-chip.ghost { background: transparent; color: var(--texto-mut); }
.mar-nota { font-size: var(--fs-sm); margin: 6px 2px; }

.mar-siguiente {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface); border: 1.5px solid var(--acento-borde, var(--acento));
  border-radius: var(--radio); padding: 12px 14px; margin: 8px 0 4px;
}
.mar-sig-ico { font-size: 1.5rem; }
.mar-sig-nom { font-weight: 800; color: var(--acento-2); }

/* ============================================================
   BATALLA NAVAL (Sesion 7B-1 · Colocacion)
   Tablero de Defensa 8x8, bandeja de barcos, tocar-para-colocar.
   ============================================================ */

/* --- Config (resumen + Lanzar) --- */
.bn-resumen {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 12px; margin-top: 10px;
}
.bn-resumen-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bn-aviso {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radio-sm);
  background: color-mix(in srgb, var(--peligro) 14%, transparent);
  color: var(--peligro); font-size: var(--fs-sm); text-align: center;
}
.bn-aviso.ok {
  background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok);
}

/* --- Cabecera de colocacion --- */
.bn-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.bn-cab-titulo { font-weight: 700; font-size: var(--fs-lg); }
.bn-listos {
  font-size: var(--fs-sm); color: var(--acento-2); font-weight: 700;
  white-space: nowrap;
}
/* 7C-2 · reloj de turno visible (cuenta regresiva sellada por servidor) */
.bn-reloj {
  font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: var(--fs-sm);
  color: var(--texto); background: var(--surface-2);
  border: 1px solid var(--borde); border-radius: 999px;
  padding: 2px 10px; white-space: nowrap;
}
.bn-reloj::before { content: "⏱ "; }
.bn-reloj.urgente {
  color: var(--peligro); border-color: var(--peligro);
  animation: bn-reloj-late 1s ease-in-out infinite;
}
@keyframes bn-reloj-late {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .bn-reloj.urgente { animation: none; }
}

/* --- Roster de jugadores con flag listo --- */
.bn-roster { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bn-chip {
  font-size: var(--fs-xs); padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--borde); color: var(--texto-mut);
}
.bn-chip.listo {
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  border-color: var(--ok); color: var(--ok); font-weight: 700;
}
.bn-chip.yo { outline: 2px solid color-mix(in srgb, var(--acento) 60%, transparent); }

/* --- Tablero de Defensa 8x8 (7B-1U: responsive a ancho de viewport) ---
   Las celdas escalan solas con grid (repeat(8,1fr)) + aspect-ratio 1, sin
   tamanos fijos en px. El tablero ocupa el ancho disponible y se topa en
   desktop para no quedar gigante. La columna de ejes (A-H/1-8) tambien va
   por el grid, asi que queda siempre alineada al escalar. */
.bn-tab {
  display: grid;
  grid-template-columns: 5% repeat(8, 1fr);
  gap: 3px;
  width: 100%;
  max-width: 440px;            /* tope en desktop: comodo, no gigante */
  margin: 0 auto 4px;
  touch-action: manipulation; user-select: none;
}
/* En moviles, el tablero rompe parte del padding lateral de .pantalla (20px)
   para ganar ancho, dejando ~8px de margen real al borde del viewport. */
@media (max-width: 480px) {
  .bn-tab {
    width: calc(100% + 2 * (var(--gap-lg) - 8px));
    max-width: none;
    margin-left: calc(-1 * (var(--gap-lg) - 8px));
    margin-right: calc(-1 * (var(--gap-lg) - 8px));
  }
}
/* 7B-2: tablero en fase de COMBATE — un poco mas chico que el de colocacion,
   priorizando la precision al elegir cuadrante. Reutilizable por la Fase 2 (7C). */
.bn-tab.combate { max-width: 400px; }
@media (max-width: 480px) {
  /* En movil NO ocupa todo el ancho (a diferencia del de colocacion): deja un
     margen ligero para diferenciarlo y que quepan dos tableros en 7C. */
  .bn-tab.combate {
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}
.bn-eje {
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); color: var(--texto-mut);
  min-width: 0;                /* permite que la columna de ejes se encoja */
}
.bn-eje.esq { visibility: hidden; }
.bn-celda {
  aspect-ratio: 1 / 1;
  background: #0c1019;
  border: 1px solid #1b2230;
  border-radius: 5px;
  cursor: pointer;
  transition: background 80ms, box-shadow 80ms;
}
.bn-celda.ocupada {
  background: var(--bcolor, var(--acento));
  border-color: color-mix(in srgb, var(--bcolor, var(--acento)) 70%, #000);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.bn-celda.prev-ok {
  background: color-mix(in srgb, var(--ok) 55%, #0c1019);
  border-color: var(--ok);
}
.bn-celda.prev-mal {
  background: color-mix(in srgb, var(--peligro) 55%, #0c1019);
  border-color: var(--peligro);
}
/* 7B-1U: cuando el fantasma esta "armado" por toque, resalta y pulsa para
   indicar que un segundo toque en esa casilla confirma. */
.bn-tab.armada .bn-celda.prev-ok {
  box-shadow: inset 0 0 0 1px var(--ok),
              0 0 8px color-mix(in srgb, var(--ok) 55%, transparent);
  animation: bnPulso 1s ease-in-out infinite;
}
.bn-tab.armada .bn-celda.prev-mal {
  animation: bnPulso 1s ease-in-out infinite;
}
@keyframes bnPulso {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.3); }
}
.bn-hint-toque {
  margin: 8px auto 0; max-width: 440px;
  text-align: center; font-size: var(--fs-sm);
  color: var(--acento-2); font-weight: 600;
}

/* --- Bandeja de barcos --- */
.bn-bandeja { margin-top: 14px; }
.bn-bandeja-tit { font-size: var(--fs-sm); margin-bottom: 8px; }
.bn-barcos { display: flex; flex-direction: column; gap: 8px; }
.bn-barco-card {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 10px 12px;
  min-height: var(--tap-min); cursor: pointer;
  transition: border-color 100ms, background 100ms, transform 80ms;
}
.bn-barco-card:active { transform: scale(0.98); }
.bn-barco-card.sel {
  border-color: var(--bcolor, var(--acento));
  background: color-mix(in srgb, var(--bcolor, var(--acento)) 14%, var(--surface));
  box-shadow: 0 0 0 1px var(--bcolor, var(--acento));
}
.bn-barco-info { display: flex; flex-direction: column; gap: 2px; }
/* color explicito para que el nombre nunca herede el texto oscuro del <button> (8F-3) */
.bn-barco-info strong { font-size: var(--fs-sm); color: var(--texto); }

/* Mini-forma del barco (rejilla) */
.bn-mini { display: grid; gap: 2px; flex: none; }
.bn-mini i {
  width: 10px; height: 10px; border-radius: 2px;
  background: transparent;
}
.bn-mini i.on { background: var(--bcolor, var(--acento)); }

/* --- Controles --- */
.bn-controles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 14px; }
.bn-ctrl { min-height: var(--tap-min); }

/* --- Pantalla "Todos listos" (placeholder transicion 7B-1) --- */
.bn-todos-listos {
  text-align: center; padding: 28px 16px;
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: var(--radio); margin-top: 10px;
}
.bn-todos-listos-icono {
  font-weight: 800; color: var(--ok); font-size: var(--fs-xl);
  letter-spacing: 1px; margin-bottom: 6px;
}

/* ===================== 7C-1 · Combate (Fase 2) ===================== */
.bn-sec { margin-bottom: 10px; }
.bn-sub { font-size: var(--fs-sm); margin: 12px 0 6px; text-align: center; }

/* Carrusel de rivales del Tablero de Ataque (◁ rival ▷) */
.bn-carr {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  max-width: 400px; margin: 0 auto 6px;
}
.bn-carr-fl {
  min-width: 44px; min-height: 40px; padding: 0 10px;
  font-size: var(--fs-lg); line-height: 1;
}
.bn-carr-fl:disabled { opacity: 0.35; }
.bn-carr-tit { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: center; }
.bn-carr-tit strong { font-size: var(--fs-md); }

/* Tablero de Ataque: casillas de disparo */
.bn-celda.bn-ac { cursor: pointer; }
/* Agua (fallo) — punto azul */
.bn-celda.agua {
  background: #0c1019;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #4aa8ff 70%, transparent);
}
.bn-celda.agua::after {
  content: ''; display: block; width: 26%; height: 26%;
  margin: 37% auto; border-radius: 50%;
  background: #4aa8ff; opacity: 0.9;
}
/* Impacto (acierto) — rojo/fuego */
.bn-celda.impacto {
  background: color-mix(in srgb, var(--peligro) 62%, #0c1019);
  border-color: var(--peligro);
  box-shadow: inset 0 0 0 1px var(--peligro),
              0 0 8px color-mix(in srgb, var(--peligro) 55%, transparent);
}
.bn-celda.impacto::after {
  content: '✸'; display: flex; align-items: center; justify-content: center;
  height: 100%; color: #fff2c8; font-size: 0.8em; line-height: 1;
}
/* Casilla armada (parte de la volea aun sin disparar) */
.bn-celda.armado {
  background: color-mix(in srgb, var(--acento) 45%, #0c1019);
  border-color: var(--acento);
  box-shadow: inset 0 0 0 1px var(--acento),
              0 0 8px color-mix(in srgb, var(--acento) 55%, transparent);
  animation: bnPulso 1s ease-in-out infinite;
}

/* Tablero de Defensa: daño recibido */
.bn-celda.tocado {                    /* impacto sobre un barco propio */
  box-shadow: inset 0 0 0 2px var(--peligro),
              0 0 6px color-mix(in srgb, var(--peligro) 50%, transparent);
}
.bn-celda.tocado::after {
  content: '✸'; display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--peligro); font-size: 0.85em; text-shadow: 0 0 3px #000;
}
.bn-celda.agua-def {                  /* misil enemigo caido en tu agua */
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #4aa8ff 60%, transparent);
}
.bn-celda.agua-def::after {
  content: ''; display: block; width: 22%; height: 22%;
  margin: 39% auto; border-radius: 50%; background: #4aa8ff; opacity: 0.75;
}

/* Fin de ronda (7C-1 · pausa + siguiente ronda desde 7D-1) */
.bn-fin {
  text-align: center; padding: 22px 16px 14px;
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: var(--radio); margin-bottom: 12px;
}
.bn-fin-icono { font-size: var(--fs-xl); margin-bottom: 4px; }
.bn-fin-tit { margin: 0 0 6px; }
.bn-fin-cuenta {          /* 7D-1: cuenta de la pausa entre rondas */
  margin-top: 8px; font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--acento-2);
}

/* 7D-2 · Banner público de bajas de la ronda */
.bn-bajas {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; padding: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--peligro);
  border-radius: var(--radio-sm);
}
.bn-bajas-icono { font-size: var(--fs-lg); line-height: 1; color: var(--peligro); }
.bn-bajas-txt { font-size: var(--fs-sm); font-weight: 600; text-align: left; }

/* 7D-2 · Pantalla de resultados: clasificación por puesto */
.bn-final { padding-bottom: 18px; }
.bn-puestos { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.bn-puesto-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
}
.bn-puesto-fila.yo { border-color: var(--acento); background: var(--surface-2); }
.bn-puesto-num {
  min-width: 34px; text-align: center;
  font-size: var(--fs-lg); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bn-puesto-noms { font-size: var(--fs-sm); font-weight: 600; text-align: left; }

/* 7E · puntaje por jugador dentro de cada fila de puesto
   7E-1 · el TOTAL de la sesión es el número protagonista; el "+X" de la batalla
   queda como delta pequeño y tenue debajo. */
.bn-puesto-jugs { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.bn-puesto-jug {
  display: flex; align-items: center; gap: 8px;
}
.bn-puesto-jug .bn-puesto-noms { flex: 1; }
.bn-puntos {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 1px; line-height: 1.05; white-space: nowrap;
}
.bn-puntos-total {
  font-size: var(--fs-lg); font-weight: 800;
  color: var(--acento-2, var(--acento));
  font-variant-numeric: tabular-nums;
}
.bn-puntos-num { font-size: 1.15em; }
.bn-puntos-cap {
  font-size: var(--fs-xs, 11px); font-weight: 600;
  color: var(--texto-mut);
}
.bn-puntos-delta {
  font-size: var(--fs-xs, 11px);
  color: var(--texto-mut);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   7F-2a · Sprites SVG de los barcos (overlay sobre la matriz)
   El sprite es un grid-item que abarca la caja del barco (por
   lineas de grid, ver batalla_naval.js). La matriz de celdas
   sigue debajo (la verdad); el sprite solo la viste.
   ============================================================ */
.bn-sprite {
  position: relative;
  width: 100%; height: 100%;
  align-self: stretch; justify-self: stretch;   /* llena su area de grid */
  pointer-events: none;                          /* no estorba al colocar */
  z-index: 1;                                    /* sobre las celdas ocupadas */
  color: var(--bcolor, var(--acento));
}
.bn-sprite-svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 1px 1.4px rgba(0,0,0,0.55));
}
.bn-sprite-svg .bnh  { fill: var(--bcolor, var(--acento)); }
.bn-sprite-svg .bnl  { fill: rgba(255,255,255,0.18); }       /* brillo superior */
.bn-sprite-svg .bnl2 { fill: rgba(255,255,255,0.42); }       /* detalle solido */
.bn-sprite-svg .bnd  {                                        /* detalle a trazo */
  fill: none; stroke: rgba(255,255,255,0.55);
  stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;
}

/* Barco hundido: aspecto "en ruinas" (estatico en 7F-2a; la animacion de
   hundimiento llega en 7F-2b). El dano ✸ de las celdas queda por encima. */
.bn-sprite.hundido .bn-sprite-svg { filter: grayscale(0.9) brightness(0.46); }
.bn-sprite.hundido .bnl,
.bn-sprite.hundido .bnl2,
.bn-sprite.hundido .bnd { opacity: 0.22; }

/* Fantasma de vista previa (colocacion): solo contorno, ok/mal. */
.bn-sprite.ghost { opacity: 0.92; }
.bn-sprite.ghost .bn-sprite-svg { filter: none; }
.bn-sprite.ghost .bnh { fill: color-mix(in srgb, currentColor 22%, transparent); stroke: currentColor; stroke-width: 1; }
.bn-sprite.ghost .bnl, .bn-sprite.ghost .bnl2 { display: none; }
.bn-sprite.ghost .bnd { stroke: currentColor; opacity: 0.85; }
.bn-sprite.ghost.ok  { color: var(--ok); }
.bn-sprite.ghost.mal { color: var(--peligro); }

/* Con sprites encima, la celda ocupada baja a un tinte tenue (la matriz sigue
   visible como "verdad", pero el sprite manda visualmente). */
.bn-tab.con-sprites .bn-celda.ocupada {
  background: color-mix(in srgb, var(--bcolor, var(--acento)) 20%, #0c1019);
  box-shadow: none;
}
/* El dano recibido debe verse SOBRE el sprite. */
.bn-tab .bn-celda.tocado,
.bn-tab .bn-celda.agua-def { z-index: 3; }

/* La mini-forma de la bandeja ahora aloja el mismo sprite (no la rejilla). */
.bn-mini { display: block; flex: none; }

/* ============================================================
   7F-2b · ANIMACION DE IMPACTO (fuego/humo) al aparecer un acierto NUEVO
   ------------------------------------------------------------
   La clase .recien-impacto la pone el cliente (batalla_naval.js) SOLO la
   primera vez que se pinta un acierto nuevo (guarda anti-re-animacion por
   snapshot). Sirve para dos casos, ambos con glifo ✸:
     · Tablero de Ataque:  .bn-celda.impacto.recien-impacto  (mis aciertos)
     · Tablero de Defensa: .bn-celda.tocado.recien-impacto   (dano en mi barco)
   El AGUA no se anima aqui (llega en 7F-2c). Estetica: sutil y elegante —
   un destello calido que crece y se disipa como humo, y un "pop" del glifo.
   Es una animacion de una sola pasada (both): al terminar, la celda queda con
   su marca estatica de siempre; los re-render posteriores no la reproducen
   porque el cliente ya no vuelve a poner la clase.
   ============================================================ */
.bn-celda.recien-impacto { position: relative; }

/* Destello -> humo: pseudo-elemento propio (::before), por ENCIMA del sprite
   (el dano ya vive en z-index:3; el destello va a 4 para no quedar tapado). */
.bn-celda.recien-impacto::before {
  content: ''; position: absolute; inset: 0; z-index: 4;
  pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 50% 45%,
      #fff6d8 0%, #ffc061 34%,
      color-mix(in srgb, var(--peligro) 82%, transparent) 60%,
      transparent 74%);
  animation: bn-impacto-burst 0.6s ease-out both;
}
@keyframes bn-impacto-burst {
  0%   { opacity: 0;   transform: scale(0.35); filter: blur(0);   }
  22%  { opacity: 1;   transform: scale(1.05); filter: blur(0);   }
  55%  { opacity: 0.5; transform: scale(1.4);  filter: blur(1px); }
  100% { opacity: 0;   transform: scale(1.85); filter: blur(3px); }
}

/* "Pop" del glifo ✸ que ya dibuja .impacto::after / .tocado::after. */
.bn-celda.recien-impacto::after {
  animation: bn-x-pop 0.42s ease-out both;
  transform-origin: center;
}
@keyframes bn-x-pop {
  0%   { transform: scale(0);   opacity: 0; }
  60%  { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ============================================================
   7F-2c · SALPICADURA DE AGUA (ondas concentricas) al aparecer un agua NUEVA
   ------------------------------------------------------------
   La clase .recien-agua la pone el cliente (batalla_naval.js) SOLO la primera
   vez que se pinta un agua nueva (misma guarda anti-re-animacion que 7F-2b).
   Sirve para dos casos, ambos con el punto azul de siempre:
     · Tablero de Ataque:  .bn-celda.agua.recien-agua      (mis fallos)
     · Tablero de Defensa: .bn-celda.agua-def.recien-agua  (misil enemigo en tu agua)
   Estetica sutil: un par de ondas que crecen y se disipan + un "pop" suave del
   punto. Una sola pasada (both): al terminar queda la marca estatica de siempre.
   ============================================================ */
.bn-celda.recien-agua { position: relative; }

/* Ondas: anillos concentricos que se expanden (::before, sobre el sprite).
   8C: se reforzaron para que se PERCIBAN (antes casi no se veian): mas contraste
   en los anillos, un poco mas grandes y ~0.8 s en vez de 0.5 s. Siguen siendo
   sutiles (una sola pasada 'both' → al terminar queda la marca estatica). */
.bn-celda.recien-agua::before {
  content: ''; position: absolute; inset: -8%; z-index: 4;   /* 8C: desborda un pelin la celda */
  pointer-events: none; border-radius: inherit;
  background:
    /* anillo exterior (nitido, mas ancho y contrastado) */
    radial-gradient(circle at 50% 48%, transparent 0 28%,
      color-mix(in srgb, #9bd4ff 90%, transparent) 31% 45%, transparent 49%),
    /* anillo interior brillante */
    radial-gradient(circle at 50% 48%, transparent 0 8%,
      color-mix(in srgb, #eef8ff 96%, transparent) 11% 23%, transparent 27%),
    /* leve halo de relleno para dar cuerpo a la salpicadura */
    radial-gradient(circle at 50% 48%,
      color-mix(in srgb, #cfe8ff 34%, transparent) 0 26%, transparent 40%);
  animation: bn-agua-onda 0.8s ease-out both;
}
@keyframes bn-agua-onda {
  0%   { opacity: 0;    transform: scale(0.22); }
  22%  { opacity: 1;    transform: scale(0.80); }
  55%  { opacity: 0.9;  transform: scale(1.35); }
  100% { opacity: 0;    transform: scale(2.15); }
}

/* "Pop" del punto azul que ya dibujan .agua::after / .agua-def::after. */
.bn-celda.recien-agua::after {
  animation: bn-agua-punto 0.8s ease-out both;
  transform-origin: center;
}
@keyframes bn-agua-punto {
  0%   { transform: scale(0.2);  opacity: 0; }
  40%  { transform: scale(1.32); opacity: 1; }
  70%  { transform: scale(0.94); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* ============================================================
   7F-2c · HUNDIMIENTO ANIMADO del sprite (sano -> ruinas), una sola pasada
   ------------------------------------------------------------
   Al hundirse un barco propio, el sprite "se asienta" (baja un pelin + inclina
   levemente) y desatura a gris-ruinas en ~0.8 s. La clase .recien-hundido la
   pone el cliente SOLO la primera vez (guarda por snapshot). El estado FINAL
   coincide con el estatico .hundido (definido abajo), asi que no hay salto al
   siguiente re-render: la animacion desemboca justo en el reposo permanente.
   ============================================================ */
/* Reposo permanente del barco hundido: ligeramente asentado e inclinado.
   (Antes de 7F-2c .hundido no movia; ahora el reposo es "en ruinas" tambien de
   pose, para que la animacion termine sin dar un tumbo al re-renderizar.) */
.bn-sprite.hundido { transform: translateY(6%) rotate(1.5deg); }

.bn-sprite.recien-hundido { animation: bn-hundir-asentar 0.8s ease-in both; }
.bn-sprite.recien-hundido .bn-sprite-svg { animation: bn-hundir-fundir 0.8s ease-in both; }
@keyframes bn-hundir-asentar {
  0%   { transform: translateY(0)   rotate(0);      }
  45%  { transform: translateY(1.5%) rotate(-1.2deg); }
  100% { transform: translateY(6%)  rotate(1.5deg); }   /* = reposo .hundido */
}
@keyframes bn-hundir-fundir {
  0%   { filter: drop-shadow(0 1px 1.4px rgba(0,0,0,0.55)); }
  100% { filter: grayscale(0.9) brightness(0.46);          }   /* = reposo .hundido */
}

@media (prefers-reduced-motion: reduce) {
  .bn-celda, .bn-barco-card { transition: none; }
  .bn-tab.armada .bn-celda.prev-ok,
  .bn-tab.armada .bn-celda.prev-mal,
  .bn-celda.armado { animation: none; }
  /* 7F-2b: sin destello ni pop; la marca aparece directamente. */
  .bn-celda.recien-impacto::before { display: none; animation: none; }
  .bn-celda.recien-impacto::after  { animation: none; }
  /* 7F-2c: sin ondas de agua ni asentamiento; el estado final aparece directo
     (el reposo .hundido ya deja el barco en ruinas e inclinado). */
  .bn-celda.recien-agua::before { display: none; animation: none; }
  .bn-celda.recien-agua::after  { animation: none; }
  .bn-sprite.recien-hundido,
  .bn-sprite.recien-hundido .bn-sprite-svg { animation: none; }
}