/* css/mundial.css - Edición Copa del Mundo 2026 */

/* Fusión del Patrón Concetrico (Img 1) con el Marcador Píldora (Img 2) */

/* 1. Fondo de la Página Psicodélico Suavizado */
body {
    background-color: #050505 !important;
    /* Usamos el patrón caleidoscópico concéntrico (como img 1) pero ultra-oscuro */
    background-image: linear-gradient(rgba(5, 5, 5, 0.93), rgba(5, 5, 5, 0.98)),
                      repeating-radial-gradient(circle at center, #050505 0, #050505 1px, transparent 1px, transparent 100%),
                      repeating-radial-gradient(circle at center, rgba(160,32,240,0.015) 0, rgba(160,32,240,0.015) 3px, transparent 3px, transparent 100%),
                      repeating-radial-gradient(circle at center, rgba(255,51,102,0.015) 0, rgba(255,51,102,0.015) 5px, transparent 5px, transparent 100%) !important;
    background-size: cover, cover, 10px 10px, 15px 15px, 20px 20px !important;
}

/* 2. Tarjetas HUD: Cristal Negro/Cian con Aura Poligonal */
.hud-wrapper {
    background: rgba(10, 10, 10, 0.6) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(0, 168, 255, 0.15) !important; /* Cian turquesa (img 2) */
    
    /* Borde superior estilo transmisión oficial TV con degradado concéntrico (como img 1) */
    border-top: 3px solid transparent !important;
    border-image: linear-gradient(90deg, #00ff88 0%, #ffd700 25%, #ff8800 50%, #ff3366 75%, #00a8ff 100%) !important;
    border-image-slice: 1 !important;
    
    border-radius: 12px 12px 15px 15px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), inset 0 1px 15px rgba(255, 215, 0, 0.03) !important;
    position: relative;
    overflow: hidden;
}

/* 3. El Nuevo Componente Flotante: MARCADOR TV FX (Inspirado en Img 2) */
.marcador-tv-fx {
    background: #000 !important; /* Negro azabache */
    border: 1px solid rgba(0, 168, 255, 0.3) !important; /* Borde cian turquesa */
    border-radius: 50px !important; /* Diseño de píldora central (img 2) */
    padding: 10px 25px !important;
    margin: -15px auto 30px auto !important; /* Flota justo DEBAJO de la tarjeta HUD */
    width: 80% !important;
    max-width: 320px !important;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.7), 0 0 15px rgba(0, 168, 255, 0.2) !important;
    font-family: 'Montserrat', sans-serif !important;
    color: #fff !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    position: relative;
    z-index: 15;
}

/* El Brillo Poligonal concéntrico flotando sobre el marcador FX */
.marcador-tv-fx::after {
    content: 'FX';
    position: absolute;
    top: -5px; right: -15px;
    background: #FF3366; /* Neón Rojo */
    color: #fff;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(255,51,102,0.5);
    font-weight: 900;
}

.fx-score-pildora {
    background: linear-gradient(135deg, #00ff88 0%, #ffd700 100%) !important; /* Degradado neón concéntrico (img 1) */
    color: #000 !important;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 14px;
    margin: 0 10px;
}