/* ==========================================================================
   PRIME CHAMPIONS · MODOS DE JUEGO
   --------------------------------------------------------------------------
   Capa que se carga la última y se ocupa de lo que los seis modos tenían
   distinto sin motivo. Lo que arregla, en orden de lo que más se notaba:

   1. NAVEGACIÓN. Seis modos con cuatro tratamientos del "volver": arriba a la
      izquierda, arriba a la derecha, abajo centrado y con cuatro textos
      distintos ("Volver al Menú", "Volver al menú", "← Menú Principal",
      "Volver al Menú Principal"). Aquí el botón queda siempre arriba a la
      izquierda y con el mismo aspecto.

   2. BOTONES. En la misma fila convivían un botón violeta y uno dorado para
      acciones del mismo peso (crear sala / unirse a sala). El dorado es el
      color de Champions y leerlo como "principal" en subasta o copero era
      arbitrario. Ahora: violeta el que avanza, contorno el alternativo, y el
      dorado se reserva para Champions.

   3. HUECOS. Tarjetas hermanas con el contenido pegado arriba y el botón
      abajo dejaban agujeros de 100 px. Se reparte el espacio.

   4. VIDA. Entradas escalonadas y foco visible, con los mismos tiempos que la
      pantalla de acceso. Puertos de AnimatedContent y SpotlightCard de
      reactbits.dev, en CSS.

   Todo respeta `prefers-reduced-motion` al final del archivo.
   ========================================================================== */

/* ==========================================================================
   1 · NAVEGACIÓN COHERENTE
   ========================================================================== */

.cabeceraPanel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pc-e3, 16px);
    flex-wrap: wrap;
    margin-bottom: clamp(16px, 2.5vw, 26px);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pc-borde-suave);
}

/* Los cuatro botones de volver que había, con el mismo aspecto. */
.volverPanel,
.volverSuperBtn,
.btnVolverModo,
.volverTorneoBtn {
    order: -1;                 /* siempre primero, aunque el HTML lo ponga después */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 16px;
    border-radius: var(--pc-radio-sm, 10px);
    background: var(--pc-superficie-2);
    border: 1px solid var(--pc-borde);
    color: var(--pc-texto-suave);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background var(--pc-normal),
        border-color var(--pc-normal),
        color var(--pc-normal),
        transform var(--pc-rapido) var(--pc-salida);
}

.volverPanel:hover,
.volverSuperBtn:hover,
.btnVolverModo:hover,
.volverTorneoBtn:hover {
    background: var(--pc-superficie-3);
    border-color: var(--pc-primario);
    color: var(--pc-texto);
    transform: translateX(-2px);
}

/* El rótulo del modo, a la derecha de la cabecera. */
.cabeceraPanel > span,
.badgeTOTWRibbon {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--pc-texto-tenue);
}

/* El "volver" del pie de subasta y copero pasa a ser un enlace discreto: el
   botón de verdad ya está arriba. Así no hay dos formas de volver con dos
   pesos visuales distintos en la misma pantalla. */
.volverMenuPie {
    display: block;
    width: fit-content;
    margin: clamp(20px, 3vw, 32px) auto 0;
    padding: 10px 18px;
    background: transparent;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio-sm, 10px);
    color: var(--pc-texto-tenue);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--pc-normal), border-color var(--pc-normal);
}

.volverMenuPie:hover {
    color: var(--pc-texto);
    border-color: var(--pc-primario);
}

/* ==========================================================================
   2 · JERARQUÍA DE BOTONES
   --------------------------------------------------------------------------
   El dorado queda para Champions. En subasta, copero y torneo la acción
   principal es violeta y la alternativa, de contorno.
   ========================================================================== */

.btnModoPrincipal {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--pc-500), var(--pc-300)) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 800;
    letter-spacing: 0.3px;
    box-shadow: 0 10px 26px var(--pc-glow-suave) !important;
    transition:
        transform var(--pc-rapido) var(--pc-salida),
        box-shadow var(--pc-normal),
        filter var(--pc-normal) !important;
}

.btnModoPrincipal:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 16px 36px var(--pc-glow) !important;
}

.btnModoSecundario {
    background: transparent !important;
    border: 1px solid var(--pc-borde-fuerte) !important;
    color: var(--pc-texto-suave) !important;
    font-weight: 700;
    box-shadow: none !important;
    transition:
        background var(--pc-normal),
        border-color var(--pc-normal),
        color var(--pc-normal),
        transform var(--pc-rapido) var(--pc-salida) !important;
}

.btnModoSecundario:hover {
    background: var(--pc-borde-suave) !important;
    border-color: var(--pc-primario) !important;
    color: var(--pc-texto) !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   3 · TARJETAS DE ENTRADA A SALA
   --------------------------------------------------------------------------
   Las tarjetas de "crear / unirse" de subasta, copero y torneo comparten
   forma: cabecera, texto, campos y una acción abajo del todo. Empujar la
   acción al fondo con `margin-top:auto` es lo que alinea los botones entre
   tarjetas sin dejar el hueco en el medio.
   ========================================================================== */

.tarjetaSalaModo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(20px, 3vw, 28px);
    border-radius: var(--pc-radio-lg, 22px);
    background: var(--pc-panel);
    border: 1px solid var(--pc-borde);
    box-shadow: var(--pc-sombra-2);
    transition: border-color var(--pc-normal), box-shadow var(--pc-normal), transform var(--pc-normal) var(--pc-salida);
}

.tarjetaSalaModo:hover {
    border-color: var(--pc-borde-fuerte);
    box-shadow: var(--pc-sombra-3);
    transform: translateY(-2px);
}

.tarjetaSalaModo > *:last-child { margin-top: auto; }

/* ==========================================================================
   4 · TOTW · EL ONCE SOBRE EL CAMPO
   ========================================================================== */

.totwResumen {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(14px, 3vw, 40px);
    margin-top: 18px;
}

.totwResumenDato {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.totwResumenDato b {
    font-family: var(--pc-fuente-datos, "Barlow Condensed", sans-serif);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    line-height: 1;
    color: var(--pc-oro);
}

.totwResumenDato span {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--pc-texto-tenue);
}

/* El campo. El césped es un degradado con franjas: una imagen encarece la
   carga y esto se adapta solo al tema. */
.totwCampo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(10px, 2vw, 20px);
    padding: clamp(18px, 3vw, 34px) clamp(10px, 2vw, 26px);
    margin-bottom: clamp(18px, 3vw, 28px);
    border-radius: var(--pc-radio-lg, 22px);
    background:
        linear-gradient(180deg, rgba(47, 211, 154, 0.09) 0%, transparent 45%),
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.022) 0px,
            rgba(255, 255, 255, 0.022) 52px,
            transparent 52px,
            transparent 104px
        ),
        linear-gradient(165deg, var(--pc-superficie-2) 0%, var(--pc-fondo-elevado) 100%);
    border: 1px solid var(--pc-borde);
    box-shadow: var(--pc-sombra-3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

/* Marcas del campo: círculo central y áreas. Puro borde, sin imágenes. */
.totwCampoLineas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
}

.totwCampoLineas::before,
.totwCampoLineas::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid var(--pc-borde-fuerte);
}

/* Círculo central. */
.totwCampoLineas::before {
    top: 50%;
    width: clamp(110px, 22vw, 190px);
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Área grande. Va detrás del portero, no debajo: dibujada al ras del borde
   inferior sobresalía por fuera del panel y se leía como una caja suelta. */
.totwCampoLineas::after {
    bottom: 0;
    width: clamp(180px, 44%, 380px);
    height: clamp(80px, 20%, 150px);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    opacity: 0.75;
}

.totwLinea {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: clamp(8px, 1.6vw, 18px);
    flex-wrap: wrap;
}

/* Las fichas del campo. */
.totwFicha {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: clamp(84px, 15vw, 132px);
    padding: 10px 8px 9px;
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(242, 193, 78, 0.14), rgba(10, 8, 19, 0.55));
    border: 1px solid color-mix(in srgb, var(--pc-oro) 34%, transparent);
    color: var(--pc-texto);
    text-align: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(6, 4, 12, 0.4);
    transition:
        transform var(--pc-rapido) var(--pc-salida),
        border-color var(--pc-normal),
        box-shadow var(--pc-normal);
    /* Entrada escalonada, port de AnimatedContent. */
    opacity: 0;
    animation: totwFichaEntra 500ms var(--pc-salida) forwards;
    animation-delay: var(--retraso, 0ms);
}

@keyframes totwFichaEntra {
    from { opacity: 0; transform: translateY(14px) scale(0.94); }
    to   { opacity: 1; transform: none; }
}

.totwFicha:hover,
.totwFicha:focus-visible {
    transform: translateY(-4px);
    border-color: var(--pc-oro);
    box-shadow: 0 12px 30px var(--pc-oro-glow);
    outline: none;
}

.totwFichaMedia {
    font-family: var(--pc-fuente-datos, "Barlow Condensed", sans-serif);
    font-size: clamp(1.4rem, 3.4vw, 1.9rem);
    font-weight: 800;
    line-height: 1;
    color: var(--pc-oro);
}

.totwFichaNombre {
    font-size: clamp(0.6rem, 1.5vw, 0.72rem);
    font-weight: 700;
    line-height: 1.2;
    /* Dos líneas como máximo: "Erling Braut Haaland" no puede estirar la
       ficha y romper la línea del campo. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}

.totwFichaPos {
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pc-oro) 20%, transparent);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--pc-oro);
}

/* La rejilla de fichas completas, ahora plegable. */
.totwPitchGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(188px, 100%), 1fr));
    gap: clamp(12px, 2vw, 18px);
    margin-top: clamp(16px, 2.5vw, 24px);
}

.totwPitchGrid.oculto { display: none; }

.card-totw.totwResaltada {
    border-color: var(--pc-oro) !important;
    box-shadow: 0 0 0 2px var(--pc-oro-glow), var(--pc-sombra-3) !important;
}

.totwAccionesBar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.totwBtnSecundario {
    background: transparent !important;
    border: 1px solid var(--pc-borde-fuerte) !important;
    color: var(--pc-texto-suave) !important;
    box-shadow: none !important;
}

.totwBtnSecundario:hover {
    border-color: var(--pc-primario) !important;
    color: var(--pc-texto) !important;
}

/* En pantallas estrechas la línea deja de envolverse y las fichas se reparten
   el ancho que haya. Con un ancho fijo, la línea de cuatro defensas se partía
   3 + 1 en un teléfono de 390 px y el lateral quedaba solo en su propia fila,
   que es justo lo que este rediseño venía a quitar. */
@media (max-width: 560px) {
    .totwCampo { padding: 16px 8px; }

    .totwLinea {
        gap: 5px;
        flex-wrap: nowrap;
    }

    .totwFicha {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 104px;
        padding: 8px 4px;
    }

    .totwFichaNombre { font-size: 0.58rem; }
    .totwFichaPos { padding-inline: 6px; }
}

/* ==========================================================================
   5 · SUPERVIVENCIA
   --------------------------------------------------------------------------
   Las tres métricas eran cajas sueltas centradas con `display:flex`: en
   escritorio quedaban perdidas en el medio de un panel de 1.000 px y en móvil
   caían 2 + 1, con la tercera huérfana. Pasan a rejilla de tres columnas
   iguales, que es lo que son.
   ========================================================================== */

/* La barra de métricas lleva 3 en el menú y 4 en el Game Over (ahí se suma
   "goles en contra"). Con un número fijo de columnas, la cuarta quedaba sola
   en su fila; `auto-fit` reparte las que haya. */
.survivalStatsBar {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(148px, 100%), 1fr));
    gap: clamp(10px, 2vw, 18px);
    width: min(720px, 100%);
    margin: clamp(18px, 3vw, 26px) auto 0 !important;
}

/* En un telefono el minimo de 148 px deja una sola columna y las metricas
   salen estiradas de lado a lado. Con 116 entran de a dos. */
@media (max-width: 520px) {
    .survivalStatsBar {
        grid-template-columns: repeat(auto-fit, minmax(min(116px, 100%), 1fr));
        gap: 8px;
    }
    .survivalStat { padding: 12px 8px !important; }
}

.survivalStat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: clamp(14px, 2.4vw, 20px) 10px !important;
    border-radius: var(--pc-radio, 16px) !important;
    background: rgba(10, 8, 19, 0.45) !important;
    border: 1px solid var(--pc-borde) !important;
    transition: border-color var(--pc-normal), transform var(--pc-normal) var(--pc-salida);
}

.survivalStat:hover {
    border-color: color-mix(in srgb, var(--pc-peligro) 45%, transparent) !important;
    transform: translateY(-2px);
}

.survivalStat b {
    font-size: clamp(1.6rem, 4.5vw, 2.4rem) !important;
    line-height: 1;
}

.survivalStat small {
    font-size: 0.66rem !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.25;
}

/* Los dos botones de acción: mismo alto, mismo ancho mínimo. Antes uno era
   `.btnSurvivalPlay` y el otro traía su gradiente en un atributo `style`, así
   que salían de distinto tamaño y color. */
.survivalAcciones {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: clamp(20px, 3vw, 28px);
}

.survivalAcciones > button {
    flex: 0 1 auto;
    min-width: 220px;
    min-height: 52px;
    padding: 14px 26px !important;
    border-radius: var(--pc-radio-sm, 10px) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
}

/* Los botones del Game Over comparten el tratamiento de los del menu: sin
   esto "Volver al menu" se partia en dos lineas y quedaba mas bajo que
   "Revancha", con las dos cajas de distinto tamano una al lado de la otra. */
.survivalControls {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.survivalControls > button {
    flex: 0 1 auto;
    min-width: 190px;
    min-height: 52px;
    padding: 14px 24px !important;
    border-radius: var(--pc-radio-sm, 10px) !important;
    font-size: 0.98rem !important;
    font-weight: 800 !important;
}

@media (max-width: 520px) {
    .survivalAcciones > button,
    .survivalControls > button { flex: 1 1 100%; min-width: 0; }
}

/* ==========================================================================
   6 · TORNEO
   --------------------------------------------------------------------------
   El hero venía en azul índigo, fuera de la paleta violeta del juego y del
   acento que el propio menú le asigna al modo (#a96bef). Se alinea.
   ========================================================================== */

.torneoHeaderHero,
.heroTorneo {
    background:
        radial-gradient(120% 130% at 50% -20%, color-mix(in srgb, var(--pc-primario) 34%, transparent), transparent 62%),
        linear-gradient(160deg, var(--pc-superficie-2), var(--pc-fondo-elevado)) !important;
    border: 1px solid color-mix(in srgb, var(--pc-primario) 30%, transparent) !important;
}

/* La tarjeta del duelo 1v1 estaba resaltada en dorado sin motivo: las tres
   opciones pesan lo mismo. */
.tarjetaDuelo1v1 {
    border-color: var(--pc-borde) !important;
    box-shadow: var(--pc-sombra-2) !important;
}

/* ==========================================================================
   7 · SELECTOR DE FORMACIONES
   --------------------------------------------------------------------------
   El diagrama estaba arriba a la derecha y el nombre abajo a la izquierda,
   con alturas distintas entre tarjetas de la misma fila. Ahora el diagrama es
   el protagonista, centrado, y las tarjetas miden igual.
   ========================================================================== */

.tarjetaFormacion {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: clamp(18px, 2.6vw, 26px) 16px !important;
    text-align: center;
    transition:
        border-color var(--pc-normal),
        box-shadow var(--pc-normal),
        transform var(--pc-normal) var(--pc-salida);
}

.tarjetaFormacion:hover {
    border-color: var(--pc-primario) !important;
    box-shadow: 0 14px 34px var(--pc-glow-suave) !important;
    transform: translateY(-3px);
}

/* El mini-campo, con su césped, para que el dibujo se lea. */
.tarjetaFormacion .miniFormacion,
.miniFormacion {
    width: 100% !important;
    max-width: 190px;
    aspect-ratio: 3 / 4;
    margin: 0 auto !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background:
        linear-gradient(180deg, rgba(47, 211, 154, 0.07), transparent 55%),
        linear-gradient(165deg, var(--pc-superficie-3), var(--pc-fondo-elevado)) !important;
    border: 1px solid var(--pc-borde) !important;
}

/* ==========================================================================
   8 · ENTRADA DE LAS PANTALLAS
   --------------------------------------------------------------------------
   Port de AnimatedContent: al abrir un modo, su contenido sube en lugar de
   aparecer de golpe. Las tarjetas de una rejilla entran escalonadas.
   ========================================================================== */

.pantalla:not(.oculto) > .contenidoSocial,
.pantalla:not(.oculto) > .modoWrapper {
    animation: modoEntra 460ms var(--pc-salida);
}

@keyframes modoEntra {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* Escalonado de las rejillas de tarjetas. Se limita a las nueve primeras: a
   partir de ahí el retraso acumulado se nota como lentitud, no como ritmo. */
.rejillaModo > *:nth-child(1) { --retraso: 60ms; }
.rejillaModo > *:nth-child(2) { --retraso: 120ms; }
.rejillaModo > *:nth-child(3) { --retraso: 180ms; }
.rejillaModo > *:nth-child(4) { --retraso: 240ms; }
.rejillaModo > *:nth-child(5) { --retraso: 300ms; }
.rejillaModo > *:nth-child(6) { --retraso: 360ms; }
.rejillaModo > *:nth-child(7) { --retraso: 420ms; }
.rejillaModo > *:nth-child(8) { --retraso: 480ms; }
.rejillaModo > *:nth-child(n+9) { --retraso: 540ms; }

.rejillaModo > * {
    opacity: 0;
    animation: modoTarjetaEntra 480ms var(--pc-salida) forwards;
    animation-delay: var(--retraso, 0ms);
}

@keyframes modoTarjetaEntra {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   9 · FOCO VISIBLE
   --------------------------------------------------------------------------
   Se navega con teclado y con mando: sin anillo de foco no se sabe dónde
   está uno.
   ========================================================================== */

.pantalla button:focus-visible,
.pantalla a:focus-visible,
.pantalla input:focus-visible,
.pantalla select:focus-visible {
    outline: 2px solid var(--pc-primario-alt);
    outline-offset: 2px;
}

/* ==========================================================================
   10 · MOVIMIENTO REDUCIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .totwFicha,
    .rejillaModo > * {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .pantalla:not(.oculto) > .contenidoSocial,
    .pantalla:not(.oculto) > .modoWrapper { animation: none; }

    .volverPanel:hover,
    .volverSuperBtn:hover,
    .btnModoPrincipal:hover,
    .btnModoSecundario:hover,
    .totwFicha:hover,
    .tarjetaFormacion:hover,
    .tarjetaSalaModo:hover,
    .survivalStat:hover { transform: none; }
}

/* ==========================================================================
   11 · HERO DE LOS MODOS
   --------------------------------------------------------------------------
   Subasta tenía el título dentro de `.cabeceraPanel`, que ahora es la barra
   de navegación. El titular pasa a su propio bloque, con el mismo tratamiento
   que el hero de supervivencia, torneo y TOTW.
   ========================================================================== */

.heroModo {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 4vw, 44px) clamp(18px, 3vw, 40px);
    margin-bottom: clamp(18px, 3vw, 28px);
    border-radius: var(--pc-radio-lg, 22px);
    text-align: center;
    background:
        radial-gradient(120% 130% at 50% -20%, color-mix(in srgb, var(--pc-primario) 30%, transparent), transparent 62%),
        linear-gradient(160deg, var(--pc-superficie-2), var(--pc-fondo-elevado));
    border: 1px solid color-mix(in srgb, var(--pc-primario) 28%, transparent);
    box-shadow: var(--pc-sombra-3);
}

.heroModo h2 {
    margin: 0 0 8px;
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 900;
    letter-spacing: 0.5px;
    color: var(--pc-texto);
}

.heroModo p {
    margin: 0 auto;
    max-width: 62ch;
    color: var(--pc-texto-suave);
    font-size: 0.95rem;
}

/* La subasta tiene su propio acento: el dorado del martillo. */
.heroModo--subasta {
    background:
        radial-gradient(120% 130% at 50% -20%, color-mix(in srgb, var(--pc-oro) 26%, transparent), transparent 62%),
        linear-gradient(160deg, var(--pc-superficie-2), var(--pc-fondo-elevado));
    border-color: color-mix(in srgb, var(--pc-oro) 26%, transparent);
}