/* EL TERRENO DE JUEGO: el césped y los once huecos.
   Portado del Mundial, donde el once se veía SOBRE EL CAMPO y no en una lista — el césped, las
   líneas y el degradado de la imagen son la mitad del ambiente.

   ── POR QUE ESTA EN SU PROPIA HOJA ────────────────────────────────────────────────────
   Vivía dentro de `draft-ui.css`, o sea en la hoja de UNA pantalla, y en cuanto la Jornada
   necesitó el mismo campo se repitió el patrón que este proyecto ha pisado cuatro veces en un
   día: `@keyframes girar`, la caja de herramientas, `.dev-fila` y la insignia de línea. Siempre
   igual — una pieza compartida guardada donde solo la ve quien la escribió, y la segunda
   pantalla que la usa no recibe nada y no falla: se ve rara.

   Aquí va SOLO el campo y los huecos. Lo que es del Draft y de nadie más —los halos de química,
   el arrastre de cartas, el hueco vacío que late— se queda en `draft-ui.css`: una hoja
   compartida que arrastra lo específico de una pantalla es el mismo error al revés. */

.campo {
  position: relative;
  width: 100%;
  aspect-ratio: 940 / 1180;
  overflow: hidden;
  background: var(--negro) url("/assets@f08561b48e/img/campo-draft.webp") center / 100% 100% no-repeat;
}

.filas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* Filas del prototipo: SE ATACA HACIA ARRIBA. La delantera arriba y la portería abajo, que es
   como se lee un campo en un móvil sujetado con una mano. */
.campo-fila {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-evenly;
  padding: 0 8px;
  pointer-events: auto;
}
#fila-DL { top: 5%; }
#fila-MC { top: 29%; }
#fila-DF { top: 55%; }
#fila-PT { top: 77%; justify-content: center; }

/* El hueco. `position: relative` porque lo que se cuelga encima —la burbuja de puntos, el punto
   de directo— se ancla a él. El cursor NO se declara aquí: en el Draft se toca y en la Jornada
   se mira, así que cada pantalla dice si el suyo se pulsa. */
.slot {
  width: 65px;
  height: 99px;
  flex-shrink: 0;
  position: relative;
  /* EL HUECO ENTERO, NO SOLO LA CARTA. Encima de la carta van la burbuja de química (`+7`) y,
     cuando está vacío, la carta negra. Son texto e imagen sueltos: sin esto, arrastrar desde
     ahí selecciona el número en azul o intenta llevarse la imagen, y en Android el resalte se
     queda pegado hasta que tocas en otro sitio. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.slot img { -webkit-user-drag: none; }
.slot .carta { width: 65px; }

/* ── LA SOMBRA DE LA QUIMICA ───────────────────────────────────────────────────────────
   Sombreado de la carta por tramo: de un vistazo se ve quien esta bien conectado. Los drop-shadow
   cortos apilados engordan el contorno, el largo hace el halo.

   Lo usan el Draft —donde montas y ves la quimica cambiar— y la Jornada —donde ves con que
   quimica jugo cada uno—, asi que vive aqui con el campo. */
.slot.quimica-verde .carta {
  filter:
    drop-shadow(0 0 2px var(--quimica-verde)) drop-shadow(0 0 2px var(--quimica-verde))
    drop-shadow(0 0 2px var(--quimica-verde)) drop-shadow(0 0 10px color-mix(in srgb, var(--quimica-verde) 80%, transparent));
}
.slot.quimica-naranja .carta {
  filter:
    drop-shadow(0 0 2px var(--quimica-naranja)) drop-shadow(0 0 2px var(--quimica-naranja))
    drop-shadow(0 0 2px var(--quimica-naranja)) drop-shadow(0 0 9px color-mix(in srgb, var(--quimica-naranja) 75%, transparent));
}
/* Tramo nulo: rojo apagado. Se ve que ese jugador no esta enganchado a nada. */
.slot.quimica-rojo .carta {
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--quimica-rojo) 85%, transparent)) drop-shadow(0 0 8px color-mix(in srgb, var(--quimica-rojo) 45%, transparent));
}

/* ── LA BURBUJA DE PUNTOS ──────────────────────────────────────────────────────────────
   Los puntos de ese jugador, encima de su carta y arriba a la derecha. Del Mundial, donde era
   `score-bubble`: mirar el campo y ver de un golpe quién te está dando la jornada.

   El color sale de los cinco tramos de marca.css (>=10 azul, >=6 verde, >=1 ámbar, 0 gris,
   negativo rojo). Y el texto puede ser `?`: mientras la jornada rueda, un jugador sin datos NO
   lleva un cero — es la lección del Mundial, donde los ceros creíbles hacían desconfiar del
   marcador entero. */
.slot-puntos {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 4;
  min-width: 22px;
  padding: 1px 4px;
  border-radius: 6px;
  background: var(--negro);
  border: 1px solid var(--borde);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
}
.slot-puntos.alto { color: var(--pts-alto); border-color: var(--pts-alto); }
.slot-puntos.bueno { color: var(--pts-bueno); border-color: var(--pts-bueno); }
.slot-puntos.algo { color: var(--pts-algo); border-color: var(--pts-algo); }
.slot-puntos.cero { color: var(--pts-cero); }
.slot-puntos.negativo { color: var(--pts-negativo); border-color: var(--pts-negativo); }
/* Sin datos todavía: se ve que el hueco existe y que su cifra está por venir. */
.slot-puntos.sin-datos { color: var(--crema-suave); }

/* ── EL PUNTO DEL DIRECTO ───────────────────────────────────────────────────────────
   Calcado del Mundial: un punto en la esquina de arriba a la izquierda —la contraria a la de los
   puntos, para que no se estorben— que dice si ese jugador está en el campo AHORA MISMO.

   Verde y latiendo: jugando. Rojo y quieto: su partido rueda y él no juega. Y nada de nada cuando
   su partido no está en marcha, que es cuando no hay directo del que informar.

   El latido es lo que lo hace mirable de reojo mientras hay fútbol, y por eso se apaga con
   `prefers-reduced-motion`: quien no quiera movimiento sigue viendo el color, que es el dato. */
.slot-directo {
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 5;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.5);
}
.slot-directo.jugando {
  background: var(--pts-bueno);
  box-shadow: 0 0 6px color-mix(in srgb, var(--pts-bueno) 90%, transparent);
  animation: latir-directo 1.1s ease-in-out infinite;
}
.slot-directo.sin-jugar {
  background: var(--rojo);
  box-shadow: 0 0 5px color-mix(in srgb, var(--rojo) 75%, transparent);
}
@keyframes latir-directo {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  .slot-directo.jugando { animation: none; }
}

/* El mismo punto en la clasificación, junto al mánager: cuántos tiene en el campo y cuántos
   esperando. Aquí lleva número porque un once puede tener varios a la vez. */
.clasif-directo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
}
.clasif-directo::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.clasif-directo.jugando {
  color: var(--pts-bueno);
  background: color-mix(in srgb, var(--pts-bueno) 14%, transparent);
}
.clasif-directo.banquillo {
  color: var(--rojo);
  background: color-mix(in srgb, var(--rojo) 14%, transparent);
}

/* Los eventos de ese jugador, debajo de la carta: dos goles son dos balones. */
.slot-eventos {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 1px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

/* ── LAS CONEXIONES ENTRE CARTAS ──────────────────────────────────────────
   De que carta a que carta engancha la quimica. Las pintan el Draft —donde ves la red cambiar
   mientras montas— y la Jornada —donde ves con que red se jugo—, asi que viven aqui con el campo
   y no en la hoja de una de las dos. */
/* shape-rendering + overflow: sin ellos las líneas casi horizontales se ven finísimas
   o recortadas en iPhone (docs/DRAFT_MUNDIAL_ANATOMIA.md §8). */
.lineas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  shape-rendering: geometricPrecision;
}
/* El tramo de cada enlace lo dice el contrato (connection.tier). El halo va con
   filter de CSS y NUNCA con filter="url(#glow)" de SVG: en iOS Safari desaparece. */
.lineas .linea { stroke-linecap: round; }
.lineas .linea.verde {
  stroke: var(--quimica-verde);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--quimica-verde) 55%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--quimica-verde) 30%, transparent));
}
.lineas .linea.naranja {
  opacity: 0.95;
  stroke: var(--quimica-naranja);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--quimica-naranja) 50%, transparent)) drop-shadow(0 0 10px color-mix(in srgb, var(--quimica-naranja) 28%, transparent));
}
.lineas .linea.rojo {
  opacity: 0.7;
  stroke: var(--quimica-rojo);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--quimica-rojo) 45%, transparent));
}
/* Conexión potencial: uno de los dos huecos aún está vacío. Enseña la forma de la red. */
.lineas .linea.potencial { stroke: var(--quimica-potencial); stroke-dasharray: 4 5; }

/* ── LO QUE OCUPA EL ONCE ─────────────────────────────────────────────────
   Dentro del campo, abajo a la derecha, como en el prototipo. El total, partido en lo que ponen
   los jugadores y lo que se lleva la quimica —que TAMBIEN ocupa tope—, y cuanto sobra.
   Lo pintan el Draft —mientras montas— y la Jornada —para ver con que lo jugaste—. */
/* NUMEROS EN BEBAS, como en el resto de la pantalla (Jepi, 31-ago-2026: "esta tipografia no me
   suena"): el widget entero heredaba la fuente del texto corrido, no la de marca. Se pone aqui, en
   el contenedor, para que las cuatro piezas de abajo la lleven sin repetirla cuatro veces. */
/* EN EL HUECO DE CESPED, no sobre una linea. `campo-draft.webp` mide 940×1180: la banda derecha
   esta en x≈865.5 (7.9% desde la derecha) y el borde del area grande en x≈721.5 (23.3% desde la
   derecha) — medido a pixel con sharp el 1-sep-2026. `right: 4%` caia MAS ALLA de la banda, o sea
   encima de ella. `right: 10%` deja el marcador dentro de esos ~15 puntos de hueco, pegado al
   lado de la banda con margen (Jepi: "ahora esta sobre la linea"). */
.campo-overall {
  position: absolute;
  right: 10%;
  bottom: 6%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  font-family: "Bebas Neue", Impact, sans-serif;
}
.campo-overall-label { font-size: 9px; letter-spacing: 2px; color: rgba(255, 255, 255, 0.7); }
.campo-overall-total { font-size: min(11vw, 45px); line-height: 1; color: var(--oro-claro); }
.campo-overall-total.pasado { color: var(--rojo); }
.campo-overall-desglose { font-size: 12px; letter-spacing: 1px; display: flex; gap: 5px; }
.campo-overall-desglose .base { color: rgba(255, 255, 255, 0.55); }
.campo-overall-desglose .quimica { color: var(--quimica-verde); }
.campo-overall-desglose .cap { color: rgba(255, 255, 255, 0.35); }
.campo-overall-restante { font-size: 11px; letter-spacing: 1px; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; }
.campo-overall-restante.pasado { color: var(--rojo); font-weight: 700; }