/* Match (Emparejar) — dos rieles de tarjetas unidas con cuerdas, sobre el ANDAMIO
   de regiones (styles/scaffold.css): columnas laterales (ancho) ↔ filas arriba/
   abajo (alto), así en móvil vertical las tarjetas se agrandan. El corredor central
   (.ww-match-gap = ww-stage vacío) es por donde cruzan las cuerdas. El tamaño de
   tarjeta 16/10 lo calcula el player (fitLayout, consciente de la orientación).
   El scaffold aporta la columna raíz, las barras y el reflujo del field. */
.ww-match-col { gap: 8px; overflow: visible; }
.ww-match-gap { flex: 1 1 auto; min-width: 6cqmin; min-height: 6cqmin; }
.ww-match-field { touch-action: none; }   /* el arrastre nunca hace scroll (táctil) */

.ww-lines-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}

/* Cards */
.ww-match .ww-card {
  position: relative;
  border: 2px solid var(--ww-card-border, #dee2e6);
  border-radius: 10px;
  background: var(--ww-card-bg, #fff);
  color: var(--ww-card-fg, var(--ww-fg, #1f2937));
  padding: 10px;
  text-align: center;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;                 /* TODA la tarjeta es zona de arrastre */
  touch-action: none;
  transition: border-color .15s, background .15s, box-shadow .15s, opacity .25s;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;   /* contenido centrado en el cuadro */
  box-sizing: border-box;
}
.ww-match .ww-card:active { cursor: grabbing; }
.ww-match .ww-card:hover { border-color: #94a3b8; }

/* Tarjetas con imagen (estilo "card de perfil"): la imagen LLENA el recuadro,
   SIN margen ni padding, más alta (no una tira ancha), y el texto es un BADGE
   flotante sobre la parte baja de la foto. */
.ww-match .ww-card-img { padding: 0; }
.ww-match .ww-card-img img {
  width: 100%;
  height: 100%;                          /* llena la celda que reparte el flex (sin scroll) */
  object-fit: cover;                     /* sin caja blanca ni deformar */
  display: block;
  pointer-events: none;
  border-radius: 8px;
}
/* Velo inferior para que el badge se lea sobre cualquier foto. */
.ww-match .ww-card-img::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 54px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
  pointer-events: none;
}
.ww-match .ww-card-img .ww-card-label {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  margin: 0; z-index: 2;
  background: rgba(17,24,39,.9);
  color: #fff; font-weight: 700; font-size: .9rem;
  padding: 4px 14px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  max-width: 88%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Texto (tarjetas sin imagen): negrita, ajusta dentro del cuadro 16/10. */
.ww-match .ww-card-label {
  display: block;
  font-weight: 700;
  font-size: .82rem;
  line-height: 1.15;
  white-space: normal;
  word-break: break-word;
  pointer-events: none;
}

/* Estados: conectado (neutro) y, tras Enviar, correcto / incorrecto. */
.ww-match .ww-card-linked  { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,.18); }
.ww-match .ww-card-correct { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.22); }
.ww-match .ww-card-wrong   { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.22); }

/* Connector dots */
.ww-dot {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #94a3b8;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  cursor: crosshair;
  z-index: 10;
  pointer-events: all;
  touch-action: none;
  transition: background .15s, transform .15s;
  display: block;
}
.ww-dot:hover {
  background: #6366f1;
  transform: translateY(-50%) scale(1.3);
}
.ww-dot[data-side="L"] { right: -10px; }
.ww-dot[data-side="R"] { left:  -10px; }
/* Portrait: Emparejar NO se reordena a filas arriba/abajo (a diferencia del resto
   del andamio). Mantiene DOS COLUMNAS laterales SIEMPRE. Motivo: con filas, una
   cuerda entre dos tarjetas de la MISMA columna es vertical y cruza POR ENCIMA de
   las tarjetas intermedias (se solapaban). Con dos columnas, las cuerdas cruzan el
   pasillo central en horizontal y nunca pisan otra tarjeta. Los puntos se quedan en
   el borde interior (regla base, no se reposicionan). El tamaño lo calcula fitLayout
   (rama portrait: ancho por columna + alto para apilar las N). */
@container player (aspect-ratio < 1/1) {
  .ww-match-field { flex-direction: row; align-items: stretch; }
  .ww-match-col   { flex-direction: column; flex-wrap: nowrap; justify-content: space-evenly; }
  .ww-match-gap   { flex: 1 1 auto; }
}