/* ==========================================================================
   PRIME CHAMPIONS · CANCHA DEL DRAFT — "ESTADIO NOCTURNO"
   --------------------------------------------------------------------------
   ARCHIVO NUEVO: css/prime-cancha.css
   ENLAZAR ÚLTIMO en index.html, después de la línea 25 (prime-impostor.css).

   Sirve para el ÚNICO draft de la app: Champions, Duelo 1v1, Supervivencia y
   TOTW entran todos a #draft (index.html:1019) y a crearCampo().

   CÓMO GANA LA CASCADA. La piel vieja está escrita con !important en tres
   sitios: css/prime-theme.css:1003-1022 (fondo de #campo y de .posicion),
   css/prime-claro.css:36-38 + css/prime-theme.css:1160-1172 (tema claro) y
   css/style.css:7200-7235 / 7286-7320 (tamaños móviles). Todo acá cuelga de
   `#campo.pcCancha` (1,1,0) o de `html.modo-claro #campo.pcCancha` (1,2,1),
   que le ganan por especificidad, y se repite !important SÓLO donde el legacy
   lo usa. Además los textos del slot estrenan clases (.pcSlotNombre,
   .pcSlotMedia, .pcSlotPos, .pcSlotCod), así que las reglas legacy de
   .posicion .jugadorNombre (css/style.css:7221, 7313) y la corrección WCAG de
   css/prime-pantallas.css:1027-1035 directamente ya no matchean.

   NO TOCA LA SELECCIÓN DE CARTAS: .cartaEquipo y .playerCard quedan igual.
   Sin imágenes, sin librerías, sin fuentes nuevas. Sólo tokens --pc-*.
   ========================================================================== */

/* ==========================================================================
   1 · TOKENS DE LA CANCHA — NOCHE (tema oscuro, el de por defecto)
   --------------------------------------------------------------------------
   SI EL DUEÑO NO QUIERE VERDE: cambiando los cuatro primeros tokens
   (--cn-cesped-a/b/luz y --cn-franja) por violetas de la rampa
   (var(--pc-superficie-2), var(--pc-fondo-elevado)...) la misma cancha queda
   violeta como .totwCampo, sin tocar ninguna otra regla.
   ========================================================================== */
#campo.pcCancha {
    /* Césped nocturno, desaturado para convivir con el violeta de la marca */
    --cn-cesped-a: #0f3d2c;
    --cn-cesped-b: #071f17;
    --cn-cesped-luz: #17563c;
    --cn-franja: rgba(226, 255, 238, 0.045);
    --cn-franja-cruce: rgba(226, 255, 238, 0.014);

    /* Cal */
    --cn-linea: rgba(233, 255, 243, 0.72);
    --cn-linea-suave: rgba(233, 255, 243, 0.34);
    --cn-linea-grosor: 2px;

    /* Luz de estadio */
    --cn-foco: rgba(198, 255, 224, 0.13);
    --cn-rebote: rgba(160, 98, 221, 0.20);
    --cn-vineta: rgba(2, 8, 6, 0.60);
    --cn-niebla: rgba(150, 220, 190, 0.09);

    /* Chapa de la ficha */
    --cn-chapa: linear-gradient(180deg, rgba(11, 28, 21, 0.94), rgba(4, 13, 9, 0.97));
    --cn-chapa-vacia: linear-gradient(180deg, rgba(9, 26, 19, 0.44), rgba(3, 12, 9, 0.58));
    --cn-borde: rgba(233, 255, 243, 0.22);
    --cn-borde-vacio: rgba(233, 255, 243, 0.30);
    --cn-texto: var(--pc-texto);
    --cn-sombra: rgba(1, 7, 5, 0.55);

    /* Marca de acción: el oro del juego. Reemplaza al verde --pc-exito, que
       chocaba con el césped y no es de la paleta (css/prime-theme.css:1011). */
    --cn-marca: var(--pc-oro);
    --cn-marca-halo: var(--pc-oro-glow);
    --cn-marca-tinte: rgba(242, 193, 78, 0.18);
    --cn-marca-texto: #1a1205;

    /* Geometría del slot */
    --pcSlot-ancho: clamp(76px, 8.6vw, 112px);
    --pcSlot-alto: clamp(66px, 8.2vh, 94px);
    --pcSlot-gap: clamp(6px, 1.2vw, 16px);
    --pcSlot-radio: 12px;

    /* Inclinación de las marcas. PONER 0deg si en un teléfono real las líneas
       se ven sucias: la cancha sigue funcionando entera. */
    --cn-inclinacion: 16deg;
}

/* Menos filas = fichas más grandes; seis filas (los 433 y el rombo 4-1-2-1-2)
   = más chicas. Es lo que hace que el mismo CSS sirva para 4, 5 y 6 filas. */
#campo.pcCancha[data-filas="4"] { --pcSlot-ancho: clamp(80px, 9.2vw, 120px); }
#campo.pcCancha[data-filas="6"] { --pcSlot-ancho: clamp(70px, 7.8vw, 100px); --pcSlot-alto: clamp(60px, 7.4vh, 84px); }

/* Línea de cinco (el 5-3-2 nuevo): las fichas de ESA fila se achican solas. */
#campo.pcCancha .pcCanchaFila[data-slots="5"] { --pcSlot-ancho: clamp(64px, 7vw, 92px); }

/* ==========================================================================
   2 · TOKENS — DÍA (tema claro)
   El mismo estadio a las cuatro de la tarde. Gana a css/prime-claro.css:36-38
   y a css/prime-theme.css:1160-1172 por especificidad (1,2,1) contra (1,1,1).
   ========================================================================== */
html.modo-claro #campo.pcCancha {
    --cn-cesped-a: #59a06f;
    --cn-cesped-b: #47875a;
    --cn-cesped-luz: #6cb684;
    --cn-franja: rgba(255, 255, 255, 0.11);
    --cn-franja-cruce: rgba(255, 255, 255, 0.04);

    --cn-linea: rgba(255, 255, 255, 0.95);
    --cn-linea-suave: rgba(255, 255, 255, 0.58);

    --cn-foco: rgba(255, 255, 255, 0.24);
    --cn-rebote: rgba(112, 20, 204, 0.10);
    --cn-vineta: rgba(24, 58, 40, 0.18);
    --cn-niebla: rgba(255, 255, 255, 0.15);

    --cn-chapa: linear-gradient(180deg, #ffffff, #f1f6f2);
    --cn-chapa-vacia: linear-gradient(180deg, rgba(255, 255, 255, 0.70), rgba(240, 248, 242, 0.78));
    --cn-borde: rgba(24, 58, 40, 0.22);
    --cn-borde-vacio: rgba(255, 255, 255, 0.88);
    --cn-sombra: rgba(24, 58, 40, 0.26);

    /* En claro --pc-oro vale #7a5400 (css/prime-theme.css:142): perfecto como
       texto, ilegible como aro sobre blanco. El aro usa un ámbar propio. */
    --cn-marca: #b07d00;
    --cn-marca-halo: rgba(176, 125, 0, 0.28);
    --cn-marca-tinte: rgba(176, 125, 0, 0.16);
}

/* ==========================================================================
   3 · EL CAMPO
   ========================================================================== */
#campo.pcCancha {
    position: relative;
    isolation: isolate;
    display: flex !important;
    flex-direction: column;          /* ataque arriba, arco abajo */
    justify-content: space-between;
    gap: clamp(6px, 1.2vh, 16px);
    width: 100%;
    box-sizing: border-box;
    min-height: clamp(420px, 60vh, 660px) !important;
    /* El padding superior deja aire para el marcador, que es absoluto. */
    padding: clamp(34px, 5vh, 52px) clamp(8px, 1.6vw, 22px) clamp(14px, 2.2vh, 26px) !important;

    /* El arquero ya no se puede cortar: quien recorta es .pcCanchaCesped, que
       es decorativo. Hoy es overflow:hidden (css/prime-pantallas.css:171) con
       min-height:480px !important en móvil (css/style.css:7202), y la última
       fila desaparecía sin scroll posible. */
    overflow: visible !important;
    scroll-margin-top: 12px;         /* para el scrollIntoView de móvil */

    background: var(--cn-cesped-a) !important;   /* fallback plano */
    border: 1px solid var(--pc-borde) !important;
    border-radius: var(--pc-radio-lg) !important;
    box-shadow: var(--pc-sombra-3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* El rectángulo y el círculo viejos (css/prime-pantallas.css:174-193) sobran:
   ahora las marcas son elementos reales dentro del césped. */
#campo.pcCancha::before,
#campo.pcCancha::after {
    content: none !important;
    display: none !important;
}

/* Once completo: el marco se vuelve dorado. Lo enciende actualizarCampo(). */
#campo.pcCancha.pcCancha--completo {
    border-color: color-mix(in srgb, var(--pc-oro) 55%, transparent) !important;
    box-shadow: var(--pc-sombra-3), 0 0 44px var(--pc-oro-glow) !important;
}

/* Fallback si crearCampo() no encuentra la formación (guarda nueva). */
.pcCanchaError {
    padding: var(--pc-e5);
    text-align: center;
    color: var(--pc-texto-suave);
}

/* ==========================================================================
   4 · CÉSPED, LUZ Y MARCAS
   ========================================================================== */

/* --- 4.1 · Césped: franjas de corte con paradas NO uniformes. Finas arriba
   (lejos) y anchas abajo (cerca): la perspectiva vive en el propio corte del
   pasto, sin una sola imagen. Es el criterio que el proyecto ya documentó para
   el campo del TOTW (css/prime-modos.css:224-225). --- */
.pcCanchaCesped {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;                 /* el único que recorta */
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            var(--cn-franja) 0 4%,    transparent 4% 9%,
            var(--cn-franja) 9% 15%,  transparent 15% 22%,
            var(--cn-franja) 22% 31%, transparent 31% 41%,
            var(--cn-franja) 41% 53%, transparent 53% 67%,
            var(--cn-franja) 67% 83%, transparent 83% 100%),
        repeating-linear-gradient(90deg,
            var(--cn-franja-cruce) 0 44px, transparent 44px 88px),
        radial-gradient(130% 85% at 50% 108%,
            var(--cn-cesped-luz) 0%, var(--cn-cesped-a) 46%, var(--cn-cesped-b) 100%);
}

/* Neblina: aleja el fondo del campo. */
.pcCanchaCesped::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 26%;
    background: linear-gradient(180deg, var(--cn-niebla), transparent);
}

/* --- 4.2 · Luz: dos torres arriba, rebote violeta de marca abajo, viñeta de
   tribuna. El rebote es lo que ata la cancha verde a la paleta violeta. --- */
.pcCanchaLuz {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(58% 44% at 12% -8%, var(--cn-foco) 0%, transparent 66%),
        radial-gradient(58% 44% at 88% -8%, var(--cn-foco) 0%, transparent 66%),
        radial-gradient(90% 58% at 50% 118%, var(--cn-rebote) 0%, transparent 72%),
        radial-gradient(142% 104% at 50% 46%, transparent 40%, var(--cn-vineta) 100%);
}

/* --- 4.3 · Las marcas, en una sola capa inclinada: los rectángulos se vuelven
   trapecios y el círculo una elipse, para CUALQUIER formación y sin un solo
   cálculo por slot. Las fichas quedan FUERA de esta capa, así que ningún
   nombre se deforma. Es hija del césped, que la recorta. --- */
.pcCanchaLineas {
    position: absolute;
    inset: -14% -5% -2% -5%;
    transform: perspective(1100px) rotateX(var(--cn-inclinacion));
    transform-origin: 50% 100%;
    pointer-events: none;
}

.pcCanchaLineas > span {
    position: absolute;
    box-sizing: border-box;
    border: var(--cn-linea-grosor) solid var(--cn-linea);
}

/* Perímetro */
.pcCanchaBorde {
    inset: 3% 4% 2% 4%;
    border-radius: 4px;
    border-color: var(--cn-linea-suave);
}

/* Línea de medio campo: el campo se ve desde detrás de TU arco, así que el
   medio queda arriba. La asimetría es intencional: es lo que hoy falta para
   entender de qué lado defendés. */
.pcCanchaMedio {
    left: 4%;
    right: 4%;
    top: 30%;
    height: 0;
    border-width: var(--cn-linea-grosor) 0 0 0;
}

/* Círculo central, cortado por la línea de medio */
.pcCanchaCentro {
    left: 50%;
    top: 30%;
    width: clamp(110px, 24%, 230px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

/* Área grande del rival, arriba, más tenue: da fondo sin robar atención */
.pcCanchaAreaLejos {
    left: 50%;
    top: 3%;
    width: clamp(180px, 52%, 430px);
    height: clamp(50px, 15%, 110px);
    transform: translateX(-50%);
    border-top: 0;
    border-radius: 0 0 3px 3px;
    border-color: var(--cn-linea-suave);
    opacity: 0.55;
}

/* Tu área grande */
.pcCanchaArea {
    left: 50%;
    bottom: 2%;
    width: clamp(190px, 56%, 460px);
    height: clamp(76px, 24%, 180px);
    transform: translateX(-50%);
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
}

/* Tu área chica */
.pcCanchaAreaChica {
    left: 50%;
    bottom: 2%;
    width: clamp(96px, 27%, 220px);
    height: clamp(32px, 10%, 72px);
    transform: translateX(-50%);
    border-bottom: 0;
    border-radius: 2px 2px 0 0;
}

/* Punto de penal */
.pcCanchaPenal {
    left: 50%;
    bottom: clamp(54px, 17%, 128px);
    width: 5px;
    height: 5px;
    transform: translateX(-50%);
    border: 0;
    border-radius: 50%;
    background: var(--cn-linea);
}

/* Tu arco, con red */
.pcCanchaArco {
    left: 50%;
    bottom: calc(2% - 9px);
    width: clamp(72px, 19%, 150px);
    height: clamp(13px, 3.2%, 24px);
    transform: translateX(-50%);
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    background:
        repeating-linear-gradient(90deg, var(--cn-linea-suave) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(0deg,  var(--cn-linea-suave) 0 1px, transparent 1px 7px);
    opacity: 0.72;
}

/* Los dos córners de tu lado */
.pcCanchaLineas::before,
.pcCanchaLineas::after {
    content: "";
    position: absolute;
    bottom: 2%;
    width: 24px;
    height: 24px;
    border: var(--cn-linea-grosor) solid var(--cn-linea-suave);
    border-radius: 50%;
    clip-path: inset(0 0 50% 0);
}
.pcCanchaLineas::before { left: 4%;  transform: translate(-50%, 50%); }
.pcCanchaLineas::after  { right: 4%; transform: translate(50%, 50%); }

/* ==========================================================================
   5 · MARCADOR DE PROGRESO
   Absoluto: no le roba alto a las filas. Sólo números, cero i18n.
   ========================================================================== */
.pcCanchaMarcador {
    position: absolute;
    top: clamp(8px, 1.4vh, 14px);
    right: clamp(10px, 1.6vw, 18px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(3, 12, 9, 0.55);
    border: 1px solid var(--cn-borde);
    pointer-events: none;
}

html.modo-claro #campo.pcCancha .pcCanchaMarcador { background: rgba(255, 255, 255, 0.78); }

.pcCanchaMarcadorDato {
    font-family: var(--pc-fuente-datos);
    font-size: var(--pc-t-2xs);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--pc-texto-suave);
}

.pcCanchaMarcadorDato b { color: var(--pc-oro); font-weight: 800; }

.pcCanchaMarcadorBarra {
    position: relative;
    display: block;
    width: clamp(44px, 8vw, 88px);
    height: 4px;
    border-radius: 99px;
    overflow: hidden;
    background: var(--cn-linea-suave);
}

.pcCanchaMarcadorBarra > i {
    display: block;
    height: 100%;
    /* --pcHechas lo escribe actualizarCampo() */
    width: calc(var(--pcHechas, 0) / 11 * 100%);
    border-radius: 99px;
    background: linear-gradient(90deg, var(--pc-primario), var(--pc-oro));
    transition: width var(--pc-lento) var(--pc-salida);
}

/* ==========================================================================
   6 · LAS FILAS
   Salen 1:1 del array de FORMACIONES (js/config.js:73). Nada cableado: 4, 5 o
   6 filas se reparten el alto solas, y de 1 a 5 slots por fila.
   ========================================================================== */
#campo.pcCancha .fila.pcCanchaFila {
    position: relative;
    z-index: 1;
    display: flex !important;
    flex: 1 1 0;
    min-height: 0;
    align-items: center;
    justify-content: center !important;   /* gana al space-around de css/style.css:7210 */
    /* La línea de 4 o de 5 NUNCA se parte: mismo recurso ya validado en el
       proyecto para .totwLinea (css/prime-modos.css:404-420). */
    flex-wrap: nowrap !important;
    gap: var(--pcSlot-gap) !important;
}

/* Rótulo de línea, vertical, al canto izquierdo. Sólo en pantallas anchas.
   TEXTO NUEVO: "Ataque", "Medio", "Defensa", "Arco" -> hay que darlos de alta
   en js/i18n-diccionario.js:191 y en su gemelo PT de la línea 623. */
.pcCanchaFilaRotulo {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--pc-fuente-datos);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cn-linea-suave);
    pointer-events: none;
    user-select: none;
}

#campo.pcCancha .pcCanchaFila[data-zona="arco"] .pcCanchaFilaRotulo {
    color: color-mix(in srgb, var(--pc-oro) 60%, var(--cn-linea-suave));
}

/* ==========================================================================
   7 · EL SLOT
   Es un <button>: teclado, foco y Enter/Espacio gratis, igual que .totwFicha
   (js/totw.js:182). Conserva class="posicion" y data-id, así que
   seleccionarJugador (js/game.js:22-27) y actualizarCampo siguen intactos.
   --prof: 0 = línea de ataque (lejos) · 1 = arquero (cerca).
   ========================================================================== */
#campo.pcCancha .posicion.pcSlot {
    --prof: 0.5;
    --esc: calc(0.94 + 0.06 * var(--prof));
    --nivel: var(--pc-texto-suave);

    position: relative;
    z-index: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    box-sizing: border-box;
    width: calc(var(--pcSlot-ancho) * var(--esc)) !important;
    min-width: 0;
    min-height: calc(var(--pcSlot-alto) * var(--esc)) !important;
    padding: 8px 5px 7px !important;

    /* Los cuatro !important de acá abajo son para vencer, en este orden:
       css/prime-theme.css:1004-1006 (fondo, borde y radio con !important) y
       css/style.css:532-546 / 7213-7219 / 7308-7311. */
    background: var(--cn-chapa) !important;
    border: 1px solid var(--cn-borde) !important;
    border-radius: var(--pcSlot-radio) !important;
    color: var(--cn-texto) !important;

    font-family: var(--pc-fuente-ui);
    text-align: center;
    cursor: pointer;
    overflow: visible;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;

    /* La profundidad se sugiere con la sombra, no con el tamaño: es lo que
       hace que la ficha APOYE sobre el césped en vez de flotar. */
    box-shadow:
        0 calc(2px + 6px * var(--prof)) calc(6px + 12px * var(--prof)) var(--cn-sombra),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;

    transition:
        transform var(--pc-rapido) var(--pc-salida),
        border-color var(--pc-normal),
        box-shadow var(--pc-normal),
        background var(--pc-normal),
        opacity var(--pc-normal);
}

/* Galón superior con el color del nivel: mismo recurso que .playerCard::before
   (css/prime-pantallas.css:2192-2210). */
#campo.pcCancha .pcSlot::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: var(--pcSlot-radio) var(--pcSlot-radio) 0 0;
    background: linear-gradient(90deg, transparent, var(--nivel) 24%, var(--nivel) 76%, transparent);
    opacity: 0;
    transition: opacity var(--pc-normal);
    pointer-events: none;
}

/* Aro exterior del estado "acá entra". Late en OPACIDAD: no repinta, no
   recompone y no tiembla, a diferencia del `animation: pulse` con
   transform:scale de css/style.css:1442-1451. */
#campo.pcCancha .pcSlot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid var(--cn-marca);
    border-radius: calc(var(--pcSlot-radio) + 4px);
    opacity: 0;
    pointer-events: none;
}

#campo.pcCancha .pcSlot:hover { transform: translateY(-2px); }

#campo.pcCancha .pcSlot:focus-visible {
    outline: 2px solid var(--pc-primario-alt);
    outline-offset: 3px;
}

/* --- 7.1 · SLOT VACÍO --------------------------------------------------- */
#campo.pcCancha .pcSlot[data-estado="vacio"] {
    background: var(--cn-chapa-vacia) !important;
    border: 1px dashed var(--cn-borde-vacio) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Silueta de jugador dibujada con dos pseudo-elementos: ya no son tres letras
   grises perdidas en una caja, es una camiseta esperando. */
.pcSlotSilueta {
    position: relative;
    width: 19px;
    height: 21px;
    color: var(--cn-linea-suave);
    flex: 0 0 auto;
}

.pcSlotSilueta::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 9px;
    height: 9px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: currentColor;
}

.pcSlotSilueta::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 19px;
    height: 11px;
    transform: translateX(-50%);
    border-radius: 10px 10px 3px 3px;
    background: currentColor;
}

/* El código de posición del hueco vacío. Sube de tamaño y de contraste: la
   corrección WCAG que lo forzaba a --pc-texto-tenue (css/prime-pantallas.css:
   1027-1035) apuntaba a `.posicion .pos`, una clase que este slot ya no usa,
   y estaba pensada contra el fondo violeta, no contra una chapa opaca. */
.pcSlotCod {
    font-family: var(--pc-fuente-datos);
    font-size: var(--pc-t-xs);
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1;
    color: var(--cn-linea);
}

html.modo-claro #campo.pcCancha .pcSlotSilueta,
html.modo-claro #campo.pcCancha .pcSlotCod { color: rgba(16, 46, 31, 0.78); }

/* Badge "+": aparece sólo cuando el slot es válido. Sin texto traducible. */
.pcSlotMas {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cn-marca);
    color: var(--cn-marca-texto);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--pc-normal), transform var(--pc-normal) var(--pc-salida);
    pointer-events: none;
}

/* --- 7.2 · SLOT VÁLIDO / EN FOCO ---------------------------------------
   `.activa` es la clase que ya pone seleccionarJugador (js/game.js:29): el
   rediseño no necesita renombrar nada. Los !important vencen a
   css/prime-theme.css:1011-1012 (borde verde + glow) y el `animation` gana por
   especificidad al `pulse` de css/style.css:1443. --- */
#campo.pcCancha .posicion.pcSlot.activa {
    border-style: solid !important;
    border-color: var(--cn-marca) !important;
    background:
        linear-gradient(180deg, var(--cn-marca-tinte), rgba(4, 13, 9, 0.94)) !important;
    box-shadow:
        0 0 0 1px var(--cn-marca-halo),
        0 0 24px var(--cn-marca-halo),
        0 6px 16px var(--cn-sombra) !important;
    animation: none;                 /* mata el pulse legacy */
    transform: none;                 /* mata el scale(1.04) de prime-theme:1013 */
}

html.modo-claro #campo.pcCancha .posicion.pcSlot.activa {
    background: linear-gradient(180deg, #fff6df, #ffffff) !important;
}

#campo.pcCancha .pcSlot.activa::after {
    opacity: 0.9;
    animation: pcLatido 1.8s ease-in-out infinite;
}

#campo.pcCancha .pcSlot.activa .pcSlotSilueta,
#campo.pcCancha .pcSlot.activa .pcSlotCod { color: var(--cn-marca); }

#campo.pcCancha .pcSlot.activa .pcSlotMas { opacity: 1; transform: scale(1); }

@keyframes pcLatido {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.95; }
}

/* Con un jugador elegido, los huecos donde NO entra se apagan: la cancha te
   muestra dónde va. Los ocupados no se tocan: son tu equipo, no ruido. */
#campo.pcCancha[data-seleccion="si"] .pcSlot[data-estado="vacio"]:not(.activa) {
    opacity: 0.38;
}

/* --- 7.3 · SLOT OCUPADO (el cromo) --------------------------------------
   Misma escala de rareza que la carta del panel izquierdo, con los MISMOS
   valores: css/prime-pantallas.css:2172-2175 y 2313 (leyenda), y
   css/prime-pantallas.css:2270-2274 en tema claro. El oro que viste al elegir
   es el oro que ves en el campo. --- */
#campo.pcCancha .pcSlot[data-estado="ocupado"] { border-style: solid !important; }
#campo.pcCancha .pcSlot[data-estado="ocupado"]::before { opacity: 1; }

/* Va por data-attribute y no por clase para NO heredar el
   `.card-gold{border-color:...!important}` de css/prime-theme.css:1000-1001. */
#campo.pcCancha .pcSlot[data-nivel="card-blue"]   { --nivel: var(--pc-primario-alt); }
#campo.pcCancha .pcSlot[data-nivel="card-gold"]   { --nivel: var(--pc-oro); }
#campo.pcCancha .pcSlot[data-nivel="card-legend"] { --nivel: #e3c6ff; }
#campo.pcCancha .pcSlot[data-nivel="card-totw"]   { --nivel: #ffd76a; }

html.modo-claro #campo.pcCancha .pcSlot[data-nivel="card-blue"]   { --nivel: var(--pc-primario); }
html.modo-claro #campo.pcCancha .pcSlot[data-nivel="card-gold"]   { --nivel: #8a5f00; }
html.modo-claro #campo.pcCancha .pcSlot[data-nivel="card-legend"] { --nivel: var(--pc-primario-hondo); }
html.modo-claro #campo.pcCancha .pcSlot[data-nivel="card-totw"]   { --nivel: #7a5400; }

#campo.pcCancha .pcSlot[data-nivel="card-gold"],
#campo.pcCancha .pcSlot[data-nivel="card-legend"],
#campo.pcCancha .pcSlot[data-nivel="card-totw"] {
    border-color: color-mix(in srgb, var(--nivel) 50%, transparent) !important;
}

/* Leyenda y TOTW llevan halo, no foil animado: la misma jerarquía sin cuatro
   animaciones infinitas corriendo en un teléfono de gama baja. */
#campo.pcCancha .pcSlot[data-nivel="card-legend"],
#campo.pcCancha .pcSlot[data-nivel="card-totw"] {
    box-shadow:
        0 calc(2px + 6px * var(--prof)) calc(6px + 12px * var(--prof)) var(--cn-sombra),
        0 0 22px color-mix(in srgb, var(--nivel) 26%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

.pcSlotEscudo {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 16px;
    height: 16px;
    display: block;
    opacity: 0.9;
    pointer-events: none;
}

.pcSlotEscudo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.pcSlotMedia {
    font-family: var(--pc-fuente-datos);
    font-size: clamp(1.02rem, 2.4vw, 1.42rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--nivel);
    text-shadow: 0 0 14px color-mix(in srgb, var(--nivel) 40%, transparent);
}

html.modo-claro #campo.pcCancha .pcSlotMedia { text-shadow: none; }

/* Una sola línea SIEMPRE. Hoy `.posicion .jugadorNombre` usa
   `overflow-wrap: anywhere` (css/prime-pantallas.css:227-233) y un nombre
   largo hace crecer la caja y empuja al arquero fuera del campo. */
.pcSlotNombre {
    max-width: 100%;
    font-family: var(--pc-fuente-display);
    font-size: clamp(0.58rem, 1.5vw, 0.7rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--cn-texto);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.modo-claro #campo.pcCancha .pcSlotNombre { text-shadow: none; }

.pcSlotPos {
    font-family: var(--pc-fuente-datos);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    padding: 1px 6px;
    border-radius: 999px;
    color: var(--nivel);
    background: color-mix(in srgb, var(--nivel) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--nivel) 34%, transparent);
}

html.modo-claro #campo.pcCancha .pcSlotPos {
    background: color-mix(in srgb, var(--nivel) 12%, #ffffff);
}

/* --- 7.4 · EL ARQUERO. Mismo criterio que el croquis del menú de formaciones
   (css/prime-pantallas.css:1834): el arco es dorado. Además queda parado justo
   delante del arco dibujado, así que ya nunca se lee igual que un delantero. */
#campo.pcCancha .pcSlot[data-pos="POR"] {
    border-color: color-mix(in srgb, var(--pc-oro) 46%, transparent) !important;
}

#campo.pcCancha .pcSlot[data-pos="POR"][data-estado="vacio"] .pcSlotSilueta,
#campo.pcCancha .pcSlot[data-pos="POR"][data-estado="vacio"] .pcSlotCod {
    color: var(--pc-oro);
}

/* --- 7.5 · Entrada del jugador recién colocado. La clase la pone
   actualizarCampo() SÓLO en el slot que se acaba de llenar. --- */
#campo.pcCancha .pcSlot--recien {
    animation: pcEntraFicha 420ms var(--pc-salida) both;
}

@keyframes pcEntraFicha {
    0%   { opacity: 0; transform: translateY(-9px) scale(0.90); }
    60%  { opacity: 1; transform: translateY(0) scale(1.04); }
    100% { opacity: 1; transform: none; }
}

/* ==========================================================================
   8 · RESPONSIVE
   ========================================================================== */

/* Una sola columna: el draft ya apila #jugadores arriba y #campo abajo
   (css/prime-pantallas.css:1003-1006). La cancha se achica para que quepa. */
@media (max-width: 1000px) {
    #campo.pcCancha {
        min-height: clamp(380px, 50vh, 520px) !important;
        padding-top: clamp(30px, 4.5vh, 42px) !important;
        --cn-inclinacion: 12deg;
    }
    .pcCanchaFilaRotulo { display: none; }
}

/* Tramo donde css/style.css:7200-7235 pisa todo con !important. */
@media (max-width: 768px) {
    #campo.pcCancha {
        padding: 30px 8px 14px !important;
        min-height: 420px !important;
        border-width: 1px !important;
        --pcSlot-gap: 5px;
    }
    .pcCanchaMarcadorBarra { display: none; }
    .pcCanchaMarcador { padding: 4px 9px; }
}

/* Teléfono: los slots dejan el ancho fijo y se reparten la fila. Es lo que
   garantiza que la línea de 4 —y la de 5 del 5-3-2 nuevo— NUNCA se parta. */
@media (max-width: 620px) {
    #campo.pcCancha .posicion.pcSlot {
        flex: 1 1 0;
        width: auto !important;
        max-width: 96px;
        min-height: 68px !important;
        padding: 7px 3px 6px !important;
        border-radius: 11px !important;
    }
    #campo.pcCancha .pcSlot::after { inset: -3px; border-radius: 14px; }
    .pcSlotEscudo { width: 14px; height: 14px; top: 4px; left: 4px; }
    .pcSlotSilueta { width: 17px; height: 19px; }
    .pcSlotMedia { font-size: 1.05rem; }
    .pcSlotNombre { font-size: 0.56rem; }
}

/* Teléfono chico con línea de cinco: se va la píldora de posición del slot
   ocupado (el código sigue en el aria-label y en el rótulo de la línea) y, en
   la fila de 5, también el escudo. El slot no baja de 44px de lado: se respeta
   --pc-tap (css/prime-ui.css:44). */
@media (max-width: 430px) {
    #campo.pcCancha { --pcSlot-gap: 4px; --cn-inclinacion: 10deg; }
    #campo.pcCancha .posicion.pcSlot {
        max-width: 80px;
        min-height: 62px !important;
        padding: 6px 2px 5px !important;
    }
    #campo.pcCancha .pcSlot[data-estado="ocupado"] .pcSlotPos { display: none; }
    #campo.pcCancha .pcCanchaFila[data-slots="5"] .pcSlotEscudo { display: none; }
    .pcSlotNombre { font-size: 0.53rem; }
    .pcSlotMedia { font-size: 1rem; }
    .pcSlotMas { width: 17px; height: 17px; font-size: 0.7rem; }
}

/* Teléfono acostado: sobra ancho y falta alto. */
@media (max-height: 540px) and (orientation: landscape) {
    #campo.pcCancha {
        min-height: 280px !important;
        padding-top: 26px !important;
        gap: 4px;
    }
    #campo.pcCancha .posicion.pcSlot { min-height: 54px !important; }
}

/* ==========================================================================
   9 · MOVIMIENTO REDUCIDO — OBLIGATORIO
   Mismo patrón que css/prime-modos.css:655-676. De paso se tapan las TRES
   animaciones de esta misma pantalla que hoy no tienen guarda:
   .posicion.activa (css/style.css:1443), .ruletaEscudosReel img
   (css/style.css:2886) y .entradaOpcionDraft (css/style.css:2906).
   El estado "acá entra" NO puede depender del movimiento: queda un aro fijo.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    #campo.pcCancha .posicion.pcSlot,
    #campo.pcCancha .pcSlot::before,
    #campo.pcCancha .pcSlot::after,
    #campo.pcCancha .pcSlot--recien,
    #campo.pcCancha .pcSlotMas,
    .pcCanchaMarcadorBarra > i {
        animation: none !important;
        transition: none !important;
    }

    #campo.pcCancha .pcSlot--recien { opacity: 1; transform: none !important; }
    #campo.pcCancha .pcSlot:hover { transform: none; }

    /* Señal estática, más marcada para compensar la falta de latido. */
    #campo.pcCancha .pcSlot.activa::after { opacity: 1; inset: -5px; border-width: 2px; }
    #campo.pcCancha .pcSlot.activa .pcSlotMas { opacity: 1; transform: scale(1); }

    /* Deuda previa de esta misma pantalla. */
    .posicion.activa { animation: none !important; }
    .ruletaEscudosReel img { animation: none !important; }
    .entradaOpcionDraft { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   10 · CONTRASTE FORZADO (Windows / alto contraste)
   El césped desaparece; lo que importa es que el slot siga siendo un botón.
   ========================================================================== */
@media (forced-colors: active) {
    .pcCanchaCesped,
    .pcCanchaLuz,
    .pcCanchaLineas { display: none; }

    #campo.pcCancha .posicion.pcSlot {
        border: 1px solid ButtonBorder !important;
        background: ButtonFace !important;
        color: ButtonText !important;
    }

    #campo.pcCancha .posicion.pcSlot.activa {
        border: 2px solid Highlight !important;
        box-shadow: none !important;
    }
}