/* La mesa más vistosa (public/table-fx.js; docs/diseno.md → Mesa: efectos de Arena). Prefijo tb-, como la mesa. */

/* la capa de los efectos: fija, encima de la mesa y de las flechas, sin tomar clicks */
.tb-fx { position: fixed; inset: 0; pointer-events: none; z-index: calc(var(--z-arrows) + 1); overflow: hidden; contain: strict; }

/* una tira de cuadros de Arena: la caja recorta y el <i> (columnas × filas veces la caja) se corre de a un cuadro */
.tb-fx-tira { position: absolute; overflow: hidden; transform: rotate(var(--rot, 0deg)); will-change: transform, opacity; }
.tb-fx-tira > i { position: absolute; left: 0; top: 0; background-size: 100% 100%; background-repeat: no-repeat; will-change: transform; }
/* la tira blanca usada de máscara sobre un color: las cintas del exilio, en el azul de las cintas de Arena */
.tb-fx-tinte > i { background-color: color-mix(in srgb, var(--u) 70%, var(--w)); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* la copia de una carta que ya se fue (se apaga donde estaba, o se lanza al atacar): con las reglas del campo */
.tb-fx-clon.tb-coords { inset: auto; overflow: visible; isolation: auto; border-radius: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
.tb-fx-clon > .tb-card { transition: none; }
/* una imagen suelta (la onda, el estallido) */
.tb-fx-suelta { position: absolute; background-size: 100% 100%; background-repeat: no-repeat; will-change: transform, opacity; }

/* la estela del ataque: corre por la curva de la flecha (offset-path, que pone table-fx.js) con la chispa adelante */
.tb-fx-estela { position: absolute; left: 0; top: 0; offset-rotate: auto; background: url(/mtga/mesa/estela.png) center / 100% 100% no-repeat; will-change: offset-distance, opacity; }
.tb-fx-chispa { position: absolute; right: -8%; top: 50%; height: 200%; aspect-ratio: 1; transform: translate(40%, -50%); background: url(/mtga/mesa/chispa.png) center / 100% 100% no-repeat; }

/* la carta que vuela (del mazo a la mano, de la mano al campo): la entera, con su cara y su dorso para darse vuelta */
.tb-fx-vuelo { position: absolute; transform-origin: 50% 50%; perspective: 900px; will-change: transform; }
.tb-fx-vuelo-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.tb-fx-vuelo .card { position: absolute; inset: 0; box-shadow: var(--sh-3); backface-visibility: hidden; }
.tb-fx-gira > .tb-fx-atras { transform: rotateY(180deg); }
/* la carta de verdad espera escondida hasta que llega la que vuela */
.tb-card.tb-fx-espera { visibility: hidden; }

/* "Tu turno": aparece y se va al empezar el tuyo, en el medio de donde jugás. Solo la palabra, sin óvalo ni fondo (Gus,
   29/9: "un óvalo contra un texto con una font cualquiera"): letras en imagen con la letra de la marca (Iowan Old Style
   Black, como "Entrar" de la portada; public/brand/turno-es|en.png, alto 130) usadas de máscara en dorado, con una
   sombra oscura suave para que se lea sobre cualquier fondo. El alto (--alto) y la imagen (--letras) los pone tuTurno. */
.tb-yourturn { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: calc(var(--z-arrows) + 2); pointer-events: none;
  filter: drop-shadow(0 2px 1px color-mix(in srgb, var(--card-black) 85%, transparent)) drop-shadow(0 0 14px color-mix(in srgb, var(--card-black) 70%, transparent)); }
.tb-yourturn > span { display: block; height: var(--alto, 64px); aspect-ratio: var(--prop, 5.93);
  -webkit-mask: var(--letras) center / contain no-repeat; mask: var(--letras) center / contain no-repeat; background-color: var(--gold-2); }

/* el nombre del que tiene el turno: un borde fino dorado con su resplandor, con la misma forma de la píldora
   (border-radius: inherit) y que respira como el casillero de fila y lateral. Gus, 29/9: el óvalo de Arena
   (turno.png) detrás de una caja rectangular "no es profesional" y las alas del combate (combate.png) tapaban todo;
   ninguna pieza de Arena tiene la forma de la píldora. En el combate, el mismo borde apenas teñido de brasa. */
.tb-fxturn .tb-turnglow { position: relative; }
.tb-fxturn .tb-turnglow::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; --tg: var(--gold-2);
  box-shadow: 0 0 0 1px var(--tg), 0 0 8px color-mix(in srgb, var(--tg) 45%, transparent); animation: tb-turno-late var(--t-ambiente) ease-in-out infinite; }
.tb-fxturn .tb-turnglow.tb-turncombat::after { --tg: color-mix(in srgb, var(--gold-2) 60%, var(--ember-2)); }
@keyframes tb-turno-late { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
/* en fila y lateral, el casillero chico del que tiene el turno: además de su borde dorado, un resplandor que respira (se
   anima la opacidad de una capa, que no obliga a repintar) */
.tb-fxturn:is(.tb-layout-row, .tb-layout-sidebar) .tb-other.tb-active::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px var(--gold-2), 0 0 22px color-mix(in srgb, var(--gold) 55%, transparent); animation: tb-turno-late var(--t-ambiente) ease-in-out infinite; }

/* ----- las marcas de la mesa asistida sobre la carta del campo (table-assist.js → marcasAyuda) ----- */
/* el galón naranja de Arena sobre el atacante y el arco azul sobre el bloqueador, montados en el borde de arriba */
.tb-card > .tb-atkmark, .tb-card > .tb-blkmark { position: absolute; pointer-events: none; z-index: 6; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
.tb-card > .tb-atkmark { left: calc(var(--cw, 80px) * -.1); width: calc(var(--cw, 80px) * 1.2); top: calc(var(--cw, 80px) * -.36); height: calc(var(--cw, 80px) * .533); background-image: url(/mtga/mesa/atacante.png); }
.tb-card > .tb-blkmark { left: calc(var(--cw, 80px) * -.08); width: calc(var(--cw, 80px) * 1.16); top: calc(var(--cw, 80px) * -.2); height: calc(var(--cw, 80px) * .353); background-image: url(/mtga/mesa/bloqueador.png); }
/* el portador del Anillo: el primer cuadro del anillo de Arena, arriba a la izquierda */
.tb-card > .tb-rb { position: absolute; pointer-events: none; z-index: 6; left: calc(var(--cw, 80px) * -.11); top: calc(var(--cw, 80px) * .02); width: calc(var(--cw, 80px) * .32); aspect-ratio: 1;
  background: url(/mtga/mesa/anillo.png) 0 0 / 400% 400% no-repeat; }
/* la carta que se puede elegir (el portador, un objetivo): el contorno celeste de Arena, quieto */
.tb-card.tb-elegible { box-shadow: 0 0 0 2px var(--elegible), 0 0 14px color-mix(in srgb, var(--elegible) 65%, transparent); cursor: pointer; }
/* la vista previa del emblema de The Ring: una oración (cuántas veces te tentó) y, sobre la imagen, el rectángulo que
   rodea las habilidades que ya tenés (T.marcoAnillo). La carta es un contenedor con la proporción exacta de la imagen
   (488×680, no la 80/112 de las demás), así el rectángulo, en cqw, cae justo sobre el marco dorado impreso. */
.tb-ring-n { font-size: var(--fs-2); font-weight: 700; color: var(--gold-2); padding: 0 var(--s1); line-height: 1.4; }
.tb-preview .card.tb-ring-pv { position: relative; container-type: inline-size; aspect-ratio: 488 / 680; }
/* el rectángulo es un relleno (--g: los grosores de arriba, derecha, abajo e izquierda) recortado con una máscara: un
   border se redondearía a píxeles enteros y dejaría de calzar. El resplandor, el azul de la flecha de objetivo (Gus,
   29/9: "que el marcador cambie a azul así contrasta más"; mismas capas que la flecha: centro casi blanco, halo
   --arrow-azul-2 y el azul fuerte afuera), es un drop-shadow del contenedor, así sigue la forma del marco para afuera
   y para adentro. */
.tb-ring-marco { position: absolute; pointer-events: none;
  filter: drop-shadow(0 0 .5cqw var(--arrow-azul-2)) drop-shadow(0 0 1.6cqw color-mix(in srgb, var(--arrow-azul-1) 85%, transparent)); }
.tb-ring-marco::before { content: ''; position: absolute; inset: 0; box-sizing: border-box; padding: var(--g);
  background: color-mix(in srgb, var(--arrow-azul-3) 70%, var(--arrow-azul-core));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* ----- el combate asistido ----- */
/* el grupo que va a atacar (click en mis criaturas en el combate): el resplandor naranja de Arena, como la que tiene flecha */
.tb-card.tb-agrupada::before { content: ''; position: absolute; inset: calc(var(--cw, 80px) * -.09); z-index: -1; pointer-events: none;
  background: url(/mtga/textures-bucket-card-highlight/cardshape-opaque-orange-a01.png) 0 0 / 100% 100% no-repeat; }
.tb-card.tb-tapped.tb-agrupada > :not(.tb-tapmark) { filter: none; }
/* la que moriría si se acepta el combate propuesto */
.tb-card.tb-va-morir { box-shadow: 0 0 0 2px var(--wine-2), 0 0 16px color-mix(in srgb, var(--wine-2) 70%, transparent); }
/* "Resolver el combate", debajo del turno */
.tb-resolver { margin-top: var(--s2); gap: var(--s1); }
/* la propuesta del combate: arriba al medio, como los pedidos, con lo que pasaría */
.tb-cb { pointer-events: auto; padding: var(--s3) var(--s4); border-radius: var(--r-3); font-size: var(--fs-3); max-width: 100%; animation: pop var(--t-base) var(--ease); }
.tb-cb-head { display: flex; align-items: center; gap: var(--s2); color: var(--gold-2); margin-bottom: var(--s2); }
.tb-cb-list { margin: 0 0 var(--s2); padding-left: 1.2em; color: var(--text); line-height: 1.45; }
.tb-cb-list li.tb-cb-muere { color: var(--rojo-vida); }
.tb-cb-list li.tb-cb-aviso { color: var(--ember-2); }
.tb-cb-list li.tb-cb-nota { color: var(--text-2); }
.tb-cb-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap; }
.tb-cb-wait { margin-right: auto; font-size: var(--fs-2); color: var(--text-2); }

/* ----- el asistente de maná ----- */
/* las tierras que habría que girar para pagar la carta de la mano bajo el mouse (solo en mi pantalla) */
.tb-card.tb-a-girar { box-shadow: 0 0 0 2px var(--forest-2), 0 0 14px color-mix(in srgb, var(--forest-2) 70%, transparent); }
.tb-pago .pips { --pip-size: 15px; vertical-align: -3px; }