/* ==========================================================================
   PRIME CHAMPIONS · CAPA RETRO-MODERNA
   --------------------------------------------------------------------------
   La referencia es "retro, pero no tanto": el gesto arcade se nota en los
   detalles (marcos de HUD, líneas de barrido, tipografía técnica, brillo de
   fósforo) sobre una base que sigue siendo limpia y actual — el mismo tono
   que la rueda de selección de modos.

   Reglas que se respetan para no caer en el pastiche:
     · Nada de pixel-art ni bordes dentados.
     · El efecto CRT vive por debajo del 4 % de opacidad.
     · Los marcos son esquinas, no cajas cerradas.
     · Todo se desactiva con prefers-reduced-motion.
   ========================================================================== */

:root {
    /* La display pasa a una grotesca técnica: retro por herencia (Space Mono),
       contemporánea por dibujo. La rueda conserva Barlow Condensed. */
    --pc-fuente-display: "Space Grotesk", "Bricolage Grotesque", system-ui, sans-serif;

    --pc-scanline: rgba(184, 138, 230, 0.045);
    --pc-hud: color-mix(in srgb, var(--pc-primario-alt) 55%, transparent);
    --pc-hud-tenue: color-mix(in srgb, var(--pc-primario-alt) 22%, transparent);
}

html.modo-claro {
    --pc-scanline: rgba(72, 46, 119, 0.035);
    --pc-hud: color-mix(in srgb, var(--pc-primario) 45%, transparent);
    --pc-hud-tenue: color-mix(in srgb, var(--pc-primario) 18%, transparent);
}

/* ==========================================================================
   TIPOGRAFÍA
   ========================================================================== */
h1, h2, h3, h4, h5,
.eaSectionTitle,
.appBrandTitle,
.managerNombre,
.tarjetaTexto strong,
#previewTitulo,
.equipoHeader h2 {
    font-family: var(--pc-fuente-display);
    font-weight: 700;   /* Space Grotesk llega hasta 700 */
    letter-spacing: -0.015em;
}

/* Brillo de fósforo, muy leve, sólo en los títulos grandes. */
h1,
#champions #listaEquipos h1,
.tituloCampeonGlorioso {
    text-shadow: 0 0 34px color-mix(in srgb, var(--pc-primario-alt) 28%, transparent);
}

html.modo-claro h1,
html.modo-claro .tituloCampeonGlorioso { text-shadow: none; }

/* Micro-etiquetas en mono: el detalle que da el aire de consola. */
.metricaEtiqueta,
.previewEtiqueta,
.eyebrow,
.selectorHint,
.appBrandSub,
.equipoBadge,
.invitadoBadge,
.avisoPenaltis,
.equipoSeccionTitulo {
    font-family: var(--pc-fuente-datos);
    font-weight: 700;
}

/* ==========================================================================
   LÍNEAS DE BARRIDO (CRT)
   Se pintan sobre las superficies grandes, nunca sobre texto pequeño.
   ========================================================================== */
.appBar::after,
.managerBar::after,
.selectorJuegosRueda::after,
.selectorJuegosPreview .previewVelo::after,
.modalContenido::after,
.panelResultados::after,
.authBox::after,
.clubBox::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background: repeating-linear-gradient(
        180deg,
        var(--pc-scanline) 0px,
        var(--pc-scanline) 1px,
        transparent 1px,
        transparent 3px
    );
}

.appBar,
.managerBar,
.authBox,
.clubBox { position: relative; }

/* El contenido debe quedar por encima del barrido. Se excluyen los elementos
   posicionados en absoluto (el botón de cierre), que si no se recolocaban. */
.appBar > *:not(.cerrar):not(.cerrarCelebracionBtn),
.managerBar > *:not(.cerrar),
.authBox > *:not(.cerrar),
.clubBox > *:not(.cerrar),
.modalContenido > *:not(.cerrar):not(.cerrarCelebracionBtn),
.panelResultados > *:not(.cerrar) { position: relative; z-index: 1; }

/* ==========================================================================
   MARCOS DE HUD
   Esquinas en ángulo, como el visor de una máquina recreativa.
   ========================================================================== */
.hudMarco,
.selectorJuegosPreview,
.selectorJuegosRueda,
.managerBar,
.modalContenido,
.panelResultados,
.authBox,
.clubBox,
.coperoCardBox,
.panelJugadores,
.panelCancha {
    position: relative;
}

.hudMarco::before,
.selectorJuegosPreview::before,
.selectorJuegosRueda::before,
.managerBar::before,
.modalContenido::before,
.panelResultados::before,
.authBox::before,
.clubBox::before,
.coperoCardBox::before,
.panelJugadores::before,
.panelCancha::before {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: 2;
    pointer-events: none;
    border: 1px solid transparent;
    border-radius: 6px;
    /* Sólo se dibujan las cuatro esquinas. */
    background:
        linear-gradient(var(--pc-hud), var(--pc-hud)) left top / 14px 1px no-repeat,
        linear-gradient(var(--pc-hud), var(--pc-hud)) left top / 1px 14px no-repeat,
        linear-gradient(var(--pc-hud), var(--pc-hud)) right top / 14px 1px no-repeat,
        linear-gradient(var(--pc-hud), var(--pc-hud)) right top / 1px 14px no-repeat,
        linear-gradient(var(--pc-hud), var(--pc-hud)) left bottom / 14px 1px no-repeat,
        linear-gradient(var(--pc-hud), var(--pc-hud)) left bottom / 1px 14px no-repeat,
        linear-gradient(var(--pc-hud), var(--pc-hud)) right bottom / 14px 1px no-repeat,
        linear-gradient(var(--pc-hud), var(--pc-hud)) right bottom / 1px 14px no-repeat;
    opacity: 0.55;
}

/* En cajas pequeñas el marco molesta más de lo que aporta. */
.metricaTile::before,
.tarjetaAccion::before { content: none; }

/* ==========================================================================
   CROMO: doble filo en la barra superior y en los modales
   ========================================================================== */
.appBar,
.modalContenido,
.panelResultados {
    box-shadow:
        var(--pc-sombra-2),
        inset 0 1px 0 color-mix(in srgb, var(--pc-primario-alt) 22%, transparent),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

html.modo-claro .appBar,
html.modo-claro .modalContenido,
html.modo-claro .panelResultados {
    box-shadow:
        var(--pc-sombra-2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 color-mix(in srgb, var(--pc-primario) 10%, transparent);
}

/* ==========================================================================
   BOTONES CON PULSACIÓN "ARCADE"
   Se hunden con una sombra dura en lugar de sólo escalar.
   ========================================================================== */
.btnPrime--primario,
.btnAccionPrime,
.btnStartChampions,
.btnSurvivalPlay,
.c-action-btn,
.btnJugarModo {
    box-shadow:
        0 4px 0 color-mix(in srgb, var(--pc-700) 90%, #000),
        0 8px 22px var(--pc-glow-suave);
    transition:
        transform 90ms var(--pc-entrada),
        box-shadow 90ms var(--pc-entrada),
        filter var(--pc-normal) var(--pc-entrada);
}

.btnJugarModo {
    box-shadow:
        0 4px 0 color-mix(in srgb, var(--modo-acento) 55%, #000),
        0 10px 26px color-mix(in srgb, var(--modo-acento) 32%, transparent);
}

.btnPrime--primario:not(:disabled):active,
.btnAccionPrime:not(:disabled):active,
.btnStartChampions:not(:disabled):active,
.btnSurvivalPlay:not(:disabled):active,
.c-action-btn:not(:disabled):active,
.btnJugarModo:not(:disabled):active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--pc-700) 90%, #000);
}

.btnPrime--primario:not(:disabled):hover,
.btnAccionPrime:not(:disabled):hover,
.btnStartChampions:not(:disabled):hover,
.btnSurvivalPlay:not(:disabled):hover,
.c-action-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow:
        0 5px 0 color-mix(in srgb, var(--pc-700) 90%, #000),
        0 12px 30px var(--pc-glow);
}

/* ==========================================================================
   INDICADOR DE LA RUEDA
   Un cursor de HUD en lugar de una barra plana.
   ========================================================================== */
.selectorIndicador::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 9px;
    height: 9px;
    transform: translateY(-50%) rotate(45deg);
    background: var(--pc-primario-alt);
    box-shadow: 0 0 14px var(--pc-glow);
}

html.modo-claro .selectorIndicador::after { background: var(--pc-primario); }

/* ==========================================================================
   MARCADORES: dígitos con aire de tablero
   ========================================================================== */
.golesMarcador,
.marcadorGrande,
.torneoScoreBadge,
.metricaValor,
.torneoCodigoVal {
    text-shadow: 0 0 18px color-mix(in srgb, var(--pc-primario-alt) 24%, transparent);
}

html.modo-claro .golesMarcador,
html.modo-claro .marcadorGrande,
html.modo-claro .torneoScoreBadge,
html.modo-claro .metricaValor,
html.modo-claro .torneoCodigoVal { text-shadow: none; }

/* ==========================================================================
   ACCESIBILIDAD
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .btnPrime--primario,
    .btnAccionPrime,
    .btnStartChampions,
    .btnSurvivalPlay,
    .c-action-btn,
    .btnJugarModo { transition: none !important; }
}

/* Quien pide menos transparencia no quiere un CRT encima. */
@media (prefers-contrast: more) {
    .appBar::after,
    .managerBar::after,
    .selectorJuegosRueda::after,
    .modalContenido::after,
    .panelResultados::after,
    .authBox::after,
    .clubBox::after { display: none; }

    .hudMarco::before,
    .selectorJuegosPreview::before,
    .selectorJuegosRueda::before,
    .managerBar::before,
    .modalContenido::before,
    .panelResultados::before,
    .authBox::before,
    .clubBox::before { opacity: 1; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 600px) {
    .hudMarco::before,
    .selectorJuegosPreview::before,
    .selectorJuegosRueda::before,
    .managerBar::before,
    .modalContenido::before,
    .panelResultados::before,
    .authBox::before,
    .clubBox::before,
    .coperoCardBox::before,
    .panelJugadores::before,
    .panelCancha::before {
        inset: 5px;
        background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px;
    }
}