<?php
// ------------------------------------------
// 1) Funções de codificação/decodificação
// ------------------------------------------
function codificarURL($url)
{
    return base64_encode($url);
}

function decodificarURL($urlCodificado)
{
    return base64_decode($urlCodificado);
}

// Redirecionamento caso acesse ?img=...
if (isset($_GET['img'])) {
    $url = decodificarURL($_GET['img']);
    header("Location: $url");
    exit;
}

$imagens = [];
$contadorImg = 0;

function ocultarLinksDeImagensNoHTML($html)
{
    global $imagens, $contadorImg;
    return preg_replace_callback(
        '/src=["\'](https:\/\/.*?)["\']/i',
        function ($matches) use (&$imagens, &$contadorImg) {
            $urlCodificado = codificarURL($matches[1]);
            $idImagem = 'img' . $contadorImg++;
            $imagens[$idImagem] = $urlCodificado;
            return 'id="' . $idImagem . '" src="#"';
        },
        $html
    );
}

// ------------------------------------------
// 2) Iniciar Buffer e Config. Timezone
// ------------------------------------------
ob_start();
date_default_timezone_set('America/Sao_Paulo');

// ------------------------------------------
// 3) Mapeamento de Dias e Meses
// ------------------------------------------
$diaSemanaMap = array(
    'Sunday'    => 'Domingo',
    'Monday'    => 'Segunda',
    'Tuesday'   => 'Terça',
    'Wednesday' => 'Quarta',
    'Thursday'  => 'Quinta',
    'Friday'    => 'Sexta',
    'Saturday'  => 'Sábado'
);

$meses = array(
    'January'   => 'Janeiro',
    'February'  => 'Fevereiro',
    'March'     => 'Março',
    'April'     => 'Abril',
    'May'       => 'Maio',
    'June'      => 'Junho',
    'July'      => 'Julho',
    'August'    => 'Agosto',
    'September' => 'Setembro',
    'October'   => 'Outubro',
    'November'  => 'Novembro',
    'December'  => 'Dezembro'
);

// ------------------------------------------
// 4) Obter Data Atual em Português
// ------------------------------------------
$dataAtual = $diaSemanaMap[date('l')] . ', ' . date('d') . ' de ' . $meses[date('F')] . ' de ' . date('Y');

// ------------------------------------------
// 5) URL do JSON com os Jogos
// ------------------------------------------
$api_url = 'https://meusjogos.shop/dados_api.json';

// Tenta obter o conteúdo do JSON
$api_json_content = @file_get_contents($api_url);

if ($api_json_content === false) {
    $jogos = []; 
} else {
    // Tenta decodificar o JSON
    $jogos = json_decode($api_json_content, true);

    // Verifica se houve erro na decodificação
    if (json_last_error() !== JSON_ERROR_NONE) {
        $jogos = [];
    }
}

// ------------------------------------------
// 6) Configurações (cores neon modernas)
// ------------------------------------------
session_start();

// Cores neon modernas (padrão)
$neonPrimary    = isset($_SESSION['neonPrimary']) ? $_SESSION['neonPrimary'] : '#00ff9d'; // Verde neon
$neonSecondary  = isset($_SESSION['neonSecondary']) ? $_SESSION['neonSecondary'] : '#00b8ff'; // Azul neon
$neonAccent     = isset($_SESSION['neonAccent']) ? $_SESSION['neonAccent'] : '#ff00aa'; // Rosa neon
$darkBg         = isset($_SESSION['darkBg']) ? $_SESSION['darkBg'] : '#0a0a0f'; // Preto azulado
$cardDark       = isset($_SESSION['cardDark']) ? $_SESSION['cardDark'] : '#14141f'; // Cinza escuro
$textNeon       = isset($_SESSION['textNeon']) ? $_SESSION['textNeon'] : '#ffffff'; // Branco
$scrollSpeed    = isset($_SESSION['scrollSpeed']) ? (int)$_SESSION['scrollSpeed'] : 3; // Velocidade do scroll (1-5)

// Se o formulário foi enviado, salva as configurações na sessão
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['neonPrimary'])) {
        $_SESSION['neonPrimary'] = $_POST['neonPrimary'];
    }
    if (isset($_POST['neonSecondary'])) {
        $_SESSION['neonSecondary'] = $_POST['neonSecondary'];
    }
    if (isset($_POST['neonAccent'])) {
        $_SESSION['neonAccent'] = $_POST['neonAccent'];
    }
    if (isset($_POST['darkBg'])) {
        $_SESSION['darkBg'] = $_POST['darkBg'];
    }
    if (isset($_POST['cardDark'])) {
        $_SESSION['cardDark'] = $_POST['cardDark'];
    }
    if (isset($_POST['textNeon'])) {
        $_SESSION['textNeon'] = $_POST['textNeon'];
    }
    if (isset($_POST['scrollSpeed'])) {
        $_SESSION['scrollSpeed'] = (int)$_POST['scrollSpeed'];
    }
    echo "<script>alert('Configurações neon salvas!');</script>";
}

if (!isset($_SERVER['HTTP_USER_AGENT'])) {
    die("Acesso negado. O código-fonte desta página está protegido.");
}

// ------------------------------------------
// 7) Separar jogos por status
// ------------------------------------------
$jogos_andamento = [];
$jogos_finalizados = [];

foreach ($jogos as $jogo) {
    $status = strtoupper(trim($jogo['status'] ?? ''));
    if (strpos($status, 'FIM DE JOGO') !== false || strpos($status, 'FINALIZADO') !== false || strpos($status, 'ENCERRADO') !== false) {
        $jogos_finalizados[] = $jogo;
    } else {
        $jogos_andamento[] = $jogo;
    }
}

// Função para verificar se uma URL de imagem é válida
function imagemExiste($url) {
    if (empty($url)) return false;
    $headers = @get_headers($url);
    return $headers && strpos($headers[0], '200') !== false;
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JOGOS NEON • Ao Vivo</title>
    <style>
        /* RESET E FONTES */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: <?php echo $darkBg; ?>;
            color: <?php echo $textNeon; ?>;
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }

        /* EFEITO DE GRID DIGITAL */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(<?php echo $neonPrimary; ?>20 1px, transparent 1px),
                linear-gradient(90deg, <?php echo $neonPrimary; ?>20 1px, transparent 1px);
            background-size: 50px 50px;
            pointer-events: none;
            z-index: 0;
        }

        /* EFEITO DE SCANLINE */
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to bottom,
                transparent 0%,
                <?php echo $neonPrimary; ?>05 50%,
                transparent 100%
            );
            animation: scan 8s linear infinite;
            pointer-events: none;
            z-index: 0;
        }

        @keyframes scan {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100%); }
        }

        /* HEADER CYBERPUNK */
        .cyber-header {
            position: relative;
            z-index: 10;
            padding: 2rem 1rem;
            text-align: center;
            background: <?php echo $cardDark; ?>e6;
            backdrop-filter: blur(10px);
            border-bottom: 2px solid <?php echo $neonPrimary; ?>;
            box-shadow: 0 0 30px <?php echo $neonPrimary; ?>40;
            margin-bottom: 2rem;
        }

        .glitch-text {
            font-size: 3rem;
            font-weight: 800;
            text-transform: uppercase;
            position: relative;
            text-shadow: 
                0.05em 0 0 <?php echo $neonPrimary; ?>80,
                -0.05em -0.025em 0 <?php echo $neonSecondary; ?>80,
                0.025em 0.05em 0 <?php echo $neonAccent; ?>80;
            animation: glitch 725ms infinite;
        }

        @keyframes glitch {
            0% { text-shadow: 0.05em 0 0 <?php echo $neonPrimary; ?>80, -0.05em -0.025em 0 <?php echo $neonSecondary; ?>80, -0.025em 0.05em 0 <?php echo $neonAccent; ?>80; }
            14% { text-shadow: 0.05em 0 0 <?php echo $neonPrimary; ?>80, -0.05em -0.025em 0 <?php echo $neonSecondary; ?>80, -0.025em 0.05em 0 <?php echo $neonAccent; ?>80; }
            15% { text-shadow: -0.05em -0.025em 0 <?php echo $neonPrimary; ?>80, 0.025em 0.025em 0 <?php echo $neonSecondary; ?>80, -0.05em -0.05em 0 <?php echo $neonAccent; ?>80; }
            49% { text-shadow: -0.05em -0.025em 0 <?php echo $neonPrimary; ?>80, 0.025em 0.025em 0 <?php echo $neonSecondary; ?>80, -0.05em -0.05em 0 <?php echo $neonAccent; ?>80; }
            50% { text-shadow: 0.025em 0.05em 0 <?php echo $neonPrimary; ?>80, 0.05em 0 0 <?php echo $neonSecondary; ?>80, 0 -0.05em 0 <?php echo $neonAccent; ?>80; }
            99% { text-shadow: 0.025em 0.05em 0 <?php echo $neonPrimary; ?>80, 0.05em 0 0 <?php echo $neonSecondary; ?>80, 0 -0.05em 0 <?php echo $neonAccent; ?>80; }
            100% { text-shadow: 0.05em 0 0 <?php echo $neonPrimary; ?>80, -0.05em -0.025em 0 <?php echo $neonSecondary; ?>80, -0.025em 0.05em 0 <?php echo $neonAccent; ?>80; }
        }

        .cyber-date {
            font-size: 1.2rem;
            color: <?php echo $textNeon; ?>;
            background: <?php echo $neonPrimary; ?>20;
            display: inline-block;
            padding: 0.5rem 2rem;
            border: 1px solid <?php echo $neonPrimary; ?>;
            border-radius: 30px;
            margin-top: 1rem;
            letter-spacing: 2px;
            backdrop-filter: blur(5px);
        }

        /* BOTÃO CONFIG NEON */
        .neon-btn {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: <?php echo $neonPrimary; ?>;
            border: none;
            color: <?php echo $darkBg; ?>;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 0 20px <?php echo $neonPrimary; ?>;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: pulse-neon 2s infinite;
        }

        @keyframes pulse-neon {
            0%, 100% { box-shadow: 0 0 20px <?php echo $neonPrimary; ?>; }
            50% { box-shadow: 0 0 40px <?php echo $neonPrimary; ?>, 0 0 60px <?php echo $neonSecondary; ?>; }
        }

        .neon-btn:hover {
            transform: rotate(180deg) scale(1.1);
            background: <?php echo $neonAccent; ?>;
            box-shadow: 0 0 30px <?php echo $neonAccent; ?>;
        }

        /* TÍTULOS DAS SEÇÕES */
        .section-title {
            position: relative;
            z-index: 10;
            font-size: 2rem;
            font-weight: 800;
            text-transform: uppercase;
            margin: 2rem 2rem 1rem;
            padding-left: 1rem;
            border-left: 4px solid <?php echo $neonPrimary; ?>;
            text-shadow: 0 0 10px <?php echo $neonPrimary; ?>;
            letter-spacing: 3px;
        }

        .section-title.andamento {
            border-left-color: <?php echo $neonPrimary; ?>;
            color: <?php echo $neonPrimary; ?>;
        }

        .section-title.finalizados {
            border-left-color: <?php echo $neonAccent; ?>;
            color: <?php echo $neonAccent; ?>;
        }

        /* CONTAINER PRINCIPAL */
        .cyber-grid {
            position: relative;
            z-index: 10;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
            padding: 2rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        /* CARD CYBERPUNK */
        .cyber-card {
            background: <?php echo $cardDark; ?>;
            border: 1px solid <?php echo $neonPrimary; ?>40;
            border-radius: 8px;
            padding: 1.5rem;
            position: relative;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
        }

        .cyber-card.finalizado {
            border-color: <?php echo $neonAccent; ?>40;
            opacity: 0.9;
        }

        .cyber-card.finalizado:hover {
            border-color: <?php echo $neonAccent; ?>;
            box-shadow: 0 10px 30px -10px <?php echo $neonAccent; ?>80;
        }

        .cyber-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                45deg,
                transparent 30%,
                <?php echo $neonPrimary; ?>10 50%,
                transparent 70%
            );
            transform: translateX(-100%);
            transition: transform 0.6s;
        }

        .cyber-card:hover::before {
            transform: translateX(100%);
        }

        .cyber-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, <?php echo $neonPrimary; ?>, <?php echo $neonAccent; ?>, <?php echo $neonSecondary; ?>);
            transform: scaleX(0);
            transition: transform 0.3s;
        }

        .cyber-card:hover::after {
            transform: scaleX(1);
        }

        .cyber-card:hover {
            transform: translateY(-5px);
            border-color: <?php echo $neonPrimary; ?>;
            box-shadow: 
                0 10px 30px -10px <?php echo $neonPrimary; ?>80,
                0 0 0 1px <?php echo $neonPrimary; ?>20 inset;
        }

        /* CORNER DECORATIONS */
        .corner {
            position: absolute;
            width: 15px;
            height: 15px;
            border: 2px solid <?php echo $neonPrimary; ?>;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .cyber-card:hover .corner {
            opacity: 1;
        }

        .corner-tl {
            top: 10px;
            left: 10px;
            border-right: none;
            border-bottom: none;
        }

        .corner-tr {
            top: 10px;
            right: 10px;
            border-left: none;
            border-bottom: none;
        }

        .corner-bl {
            bottom: 10px;
            left: 10px;
            border-right: none;
            border-top: none;
        }

        .corner-br {
            bottom: 10px;
            right: 10px;
            border-left: none;
            border-top: none;
        }

        /* TIMES */
        .cyber-teams {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            margin: 1rem 0 1.5rem;
            position: relative;
        }

        .team-neon {
            flex: 1;
            text-align: center;
            padding: 1rem 0.5rem;
            background: <?php echo $darkBg; ?>;
            border: 1px solid <?php echo $neonPrimary; ?>40;
            position: relative;
            overflow: hidden;
        }

        .team-neon img {
            width: 70px;
            height: 70px;
            object-fit: contain;
            filter: drop-shadow(0 0 10px <?php echo $neonPrimary; ?>);
            transition: all 0.3s;
        }

        .team-neon:hover img {
            transform: scale(1.1) rotate(5deg);
            filter: drop-shadow(0 0 20px <?php echo $neonAccent; ?>);
        }

        .team-neon p {
            font-weight: 700;
            font-size: 1rem;
            margin: 0.5rem 0 0.2rem;
            color: <?php echo $textNeon; ?>;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .score-neon {
            font-size: 2rem;
            font-weight: 800;
            font-family: 'Courier New', monospace;
            color: <?php echo $neonPrimary; ?>;
            text-shadow: 0 0 10px <?php echo $neonPrimary; ?>;
            margin-top: 0.3rem;
        }

        .finalizado .score-neon {
            color: <?php echo $neonAccent; ?>;
            text-shadow: 0 0 10px <?php echo $neonAccent; ?>;
        }

        /* VS NEOFUTURISTA */
        .vs-neon {
            font-size: 1.2rem;
            font-weight: 800;
            color: <?php echo $neonAccent; ?>;
            text-shadow: 0 0 10px <?php echo $neonAccent; ?>;
            background: <?php echo $darkBg; ?>;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid <?php echo $neonAccent; ?>;
            animation: pulse-vs 2s infinite;
        }

        @keyframes pulse-vs {
            0%, 100% { box-shadow: 0 0 10px <?php echo $neonAccent; ?>; }
            50% { box-shadow: 0 0 30px <?php echo $neonAccent; ?>; }
        }

        /* INFO DO JOGO */
        .cyber-info {
            text-align: center;
            padding: 1rem;
            background: <?php echo $darkBg; ?>80;
            border: 1px solid <?php echo $neonPrimary; ?>40;
            margin: 1rem 0;
        }

        .league-neon {
            font-size: 0.9rem;
            font-weight: 600;
            color: <?php echo $neonSecondary; ?>;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 0.5rem;
        }

        .time-neon {
            font-size: 2.5rem;
            font-weight: 800;
            font-family: 'Courier New', monospace;
            color: <?php echo $neonPrimary; ?>;
            text-shadow: 0 0 20px <?php echo $neonPrimary; ?>;
            letter-spacing: 3px;
        }

        .finalizado .time-neon {
            color: <?php echo $neonAccent; ?>;
            text-shadow: 0 0 20px <?php echo $neonAccent; ?>;
        }

        /* CANAIS HOLOGRAFICOS - CORRIGIDO */
        .channels-holo {
            display: flex;
            justify-content: center;
            gap: 0.8rem;
            flex-wrap: wrap;
            margin: 1rem 0;
        }

        .holo-channel {
            background: <?php echo $darkBg; ?>;
            border: 1px solid <?php echo $neonSecondary; ?>60;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .holo-channel::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                45deg,
                transparent,
                <?php echo $neonSecondary; ?>20,
                transparent
            );
            transform: rotate(45deg);
            animation: holo-shine 3s infinite;
        }

        @keyframes holo-shine {
            0% { transform: translateX(-100%) rotate(45deg); }
            100% { transform: translateX(100%) rotate(45deg); }
        }

        .holo-channel:hover {
            border-color: <?php echo $neonSecondary; ?>;
            box-shadow: 0 0 20px <?php echo $neonSecondary; ?>80;
            transform: scale(1.05);
        }

        .holo-channel img {
            width: 20px;
            height: 20px;
            object-fit: contain;
            display: inline-block;
            vertical-align: middle;
        }

        .holo-channel .channel-name {
            margin: 0;
            font-size: 0.9rem;
            font-weight: 500;
            color: <?php echo $textNeon; ?>;
            display: inline-block;
            vertical-align: middle;
        }

        /* STATUS NEO */
        .status-neon {
            display: inline-block;
            padding: 0.5rem 1.5rem;
            font-weight: 700;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            border: 1px solid;
            margin-top: 1rem;
            animation: blink 1.5s infinite;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .status-fim {
            background: <?php echo $neonAccent; ?>20;
            border-color: <?php echo $neonAccent; ?>;
            color: <?php echo $neonAccent; ?>;
            box-shadow: 0 0 15px <?php echo $neonAccent; ?>80;
        }

        .status-andamento {
            background: <?php echo $neonPrimary; ?>20;
            border-color: <?php echo $neonPrimary; ?>;
            color: <?php echo $neonPrimary; ?>;
            box-shadow: 0 0 15px <?php echo $neonPrimary; ?>80;
        }

        /* BADGE DE CONTAGEM */
        .count-badge {
            display: inline-block;
            background: <?php echo $neonPrimary; ?>;
            color: <?php echo $darkBg; ?>;
            padding: 0.2rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            margin-left: 1rem;
            font-weight: 700;
            vertical-align: middle;
        }

        .finalizados .count-badge {
            background: <?php echo $neonAccent; ?>;
        }

        /* SEPARADOR NEON */
        .neon-separator {
            position: relative;
            z-index: 10;
            height: 2px;
            background: linear-gradient(90deg, transparent, <?php echo $neonPrimary; ?>, <?php echo $neonAccent; ?>, <?php echo $neonSecondary; ?>, transparent);
            margin: 3rem 0;
            width: 100%;
            opacity: 0.5;
        }

        /* MODAL NEO */
        .modal-neon {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: <?php echo $darkBg; ?>e6;
            backdrop-filter: blur(10px);
        }

        .modal-content-neon {
            background: <?php echo $cardDark; ?>;
            margin: 5% auto;
            padding: 2.5rem;
            border: 2px solid <?php echo $neonPrimary; ?>;
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 0 50px <?php echo $neonPrimary; ?>80;
            position: relative;
            animation: modalAppear 0.4s;
        }

        @keyframes modalAppear {
            from {
                opacity: 0;
                transform: translateY(-50px) perspective(600px) rotateX(10deg);
            }
            to {
                opacity: 1;
                transform: translateY(0) perspective(600px) rotateX(0);
            }
        }

        .modal-close {
            position: absolute;
            top: 15px;
            right: 20px;
            color: <?php echo $neonPrimary; ?>;
            font-size: 28px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .modal-close:hover {
            color: <?php echo $neonAccent; ?>;
            transform: rotate(90deg);
        }

        .modal-title {
            font-size: 2rem;
            font-weight: 800;
            color: <?php echo $neonPrimary; ?>;
            text-align: center;
            margin-bottom: 2rem;
            text-transform: uppercase;
            letter-spacing: 3px;
        }

        .neon-input-group {
            margin-bottom: 1.5rem;
        }

        .neon-input-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: <?php echo $textNeon; ?>;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.9rem;
            letter-spacing: 1px;
        }

        .neon-input-group input[type="color"],
        .neon-input-group input[type="range"] {
            width: 100%;
            height: 50px;
            background: <?php echo $darkBg; ?>;
            border: 2px solid <?php echo $neonPrimary; ?>60;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .neon-input-group input[type="range"] {
            height: 10px;
            padding: 0;
        }

        .neon-input-group input[type="color"]:hover,
        .neon-input-group input[type="range"]:hover {
            border-color: <?php echo $neonPrimary; ?>;
            box-shadow: 0 0 20px <?php echo $neonPrimary; ?>80;
        }

        .btn-neon-save {
            width: 100%;
            padding: 1rem;
            background: transparent;
            border: 2px solid <?php echo $neonPrimary; ?>;
            color: <?php echo $neonPrimary; ?>;
            font-weight: 700;
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .btn-neon-save:hover {
            background: <?php echo $neonPrimary; ?>;
            color: <?php echo $darkBg; ?>;
            box-shadow: 0 0 30px <?php echo $neonPrimary; ?>;
        }

        .btn-neon-save::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, <?php echo $textNeon; ?>40, transparent);
            transition: left 0.5s;
        }

        .btn-neon-save:hover::before {
            left: 100%;
        }

        /* NO GAMES */
        .no-games-neon {
            text-align: center;
            padding: 4rem;
            font-size: 2rem;
            color: <?php echo $neonPrimary; ?>;
            text-shadow: 0 0 20px <?php echo $neonPrimary; ?>;
            border: 2px dashed <?php echo $neonPrimary; ?>60;
            grid-column: 1 / -1;
        }

        /* SCROLLBAR CYBER */
        ::-webkit-scrollbar {
            width: 10px;
            background: <?php echo $darkBg; ?>;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(<?php echo $neonPrimary; ?>, <?php echo $neonAccent; ?>);
            border-radius: 0;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(<?php echo $neonAccent; ?>, <?php echo $neonPrimary; ?>);
        }

        /* CONTROLE DE SCROLL */
        .scroll-control {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            background: <?php echo $cardDark; ?>;
            border: 1px solid <?php echo $neonPrimary; ?>;
            padding: 0.5rem;
            border-radius: 8px;
            display: flex;
            gap: 0.5rem;
            backdrop-filter: blur(10px);
        }

        .scroll-btn {
            width: 40px;
            height: 40px;
            border: 1px solid <?php echo $neonPrimary; ?>;
            background: transparent;
            color: <?php echo $neonPrimary; ?>;
            cursor: pointer;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .scroll-btn:hover {
            background: <?php echo $neonPrimary; ?>;
            color: <?php echo $darkBg; ?>;
            box-shadow: 0 0 20px <?php echo $neonPrimary; ?>;
        }

        .scroll-btn.active {
            background: <?php echo $neonPrimary; ?>;
            color: <?php echo $darkBg; ?>;
        }

        /* RESPONSIVE */
        @media (max-width: 768px) {
            .glitch-text {
                font-size: 2rem;
            }
            
            .cyber-grid {
                grid-template-columns: 1fr;
                padding: 1rem;
            }
            
            .time-neon {
                font-size: 2rem;
            }
            
            .scroll-control {
                bottom: 10px;
                right: 10px;
            }
            
            .section-title {
                font-size: 1.5rem;
                margin: 1.5rem 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- HEADER CYBERPUNK -->
    <header class="cyber-header">
        <h1 class="glitch-text">JOGOS NEON</h1>
        <div class="cyber-date">
            <?php echo $dataAtual; ?>
        </div>
    </header>

    <!-- BOTÃO CONFIG NEON -->
    <button class="neon-btn" onclick="openModal()">⚡</button>

    <!-- CONTROLE DE SCROLL -->
    <div class="scroll-control">
        <button class="scroll-btn" onclick="toggleScroll()" id="scrollToggle">⏸️</button>
        <button class="scroll-btn" onclick="changeSpeed(-0.5)">-</button>
        <button class="scroll-btn" onclick="changeSpeed(0.5)">+</button>
    </div>

    <!-- MODAL NEON -->
    <div id="modal" class="modal-neon">
        <div class="modal-content-neon">
            <span class="modal-close" onclick="closeModal()">&times;</span>
            <h2 class="modal-title">▶ NEON CONFIG</h2>
            <form action="" method="POST" id="configForm">
                <div class="neon-input-group">
                    <label>VERDE NEON</label>
                    <input type="color" name="neonPrimary" value="<?php echo htmlspecialchars($neonPrimary); ?>">
                </div>
                <div class="neon-input-group">
                    <label>AZUL NEON</label>
                    <input type="color" name="neonSecondary" value="<?php echo htmlspecialchars($neonSecondary); ?>">
                </div>
                <div class="neon-input-group">
                    <label>ROSA NEON</label>
                    <input type="color" name="neonAccent" value="<?php echo htmlspecialchars($neonAccent); ?>">
                </div>
                <div class="neon-input-group">
                    <label>FUNDO ESCURO</label>
                    <input type="color" name="darkBg" value="<?php echo htmlspecialchars($darkBg); ?>">
                </div>
                <div class="neon-input-group">
                    <label>FUNDO CARD</label>
                    <input type="color" name="cardDark" value="<?php echo htmlspecialchars($cardDark); ?>">
                </div>
                <div class="neon-input-group">
                    <label>TEXTO</label>
                    <input type="color" name="textNeon" value="<?php echo htmlspecialchars($textNeon); ?>">
                </div>
                <div class="neon-input-group">
                    <label>VELOCIDADE SCROLL (<?php echo $scrollSpeed; ?>)</label>
                    <input type="range" name="scrollSpeed" min="1" max="5" value="<?php echo $scrollSpeed; ?>" oninput="this.nextElementSibling.value = this.value">
                    <output style="color: <?php echo $neonPrimary; ?>;"><?php echo $scrollSpeed; ?></output>
                </div>
                <button type="submit" class="btn-neon-save">SALVAR CONFIG</button>
            </form>
        </div>
    </div>

    <!-- SEÇÃO DE JOGOS EM ANDAMENTO -->
    <?php if (!empty($jogos_andamento)) : ?>
        <h2 class="section-title andamento">
            🔴 JOGOS EM ANDAMENTO 
            <span class="count-badge"><?php echo count($jogos_andamento); ?></span>
        </h2>
        <div class="cyber-grid">
            <?php foreach ($jogos_andamento as $jogo) : ?>
                <div class="cyber-card">
                    <div class="corner corner-tl"></div>
                    <div class="corner corner-tr"></div>
                    <div class="corner corner-bl"></div>
                    <div class="corner corner-br"></div>
                    
                    <div class="cyber-teams">
                        <div class="team-neon">
                            <img src="<?= $jogo['img_time1_url']; ?>" alt="<?= $jogo['time1']; ?>">
                            <p><?= $jogo['time1']; ?></p>
                            <div class="score-neon"><?= $jogo['placar_time1']; ?></div>
                        </div>
                        
                        <div class="vs-neon">VS</div>
                        
                        <div class="team-neon">
                            <img src="<?= $jogo['img_time2_url']; ?>" alt="<?= $jogo['time2']; ?>">
                            <p><?= $jogo['time2']; ?></p>
                            <div class="score-neon"><?= $jogo['placar_time2']; ?></div>
                        </div>
                    </div>

                    <div class="cyber-info">
                        <div class="league-neon"><?= $jogo['competicao']; ?></div>
                        <div class="time-neon"><?= $jogo['horario']; ?></div>
                    </div>

                    <?php if (!empty($jogo['canais'])) : ?>
                        <div class="channels-holo">
                            <?php foreach ($jogo['canais'] as $canal) : ?>
                                <div class="holo-channel">
                                    <?php if (!empty($canal['img_url'])): ?>
                                        <img src="<?= $canal['img_url']; ?>" alt="<?= $canal['nome']; ?>" 
                                             onerror="this.style.display='none'; this.parentElement.classList.add('no-image');">
                                    <?php endif; ?>
                                    <span class="channel-name"><?= $canal['nome']; ?></span>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>

                    <?php if (!empty($jogo['status'])) : ?>
                        <div style="text-align: center;">
                            <div class="status-neon status-andamento">
                                <?= $jogo['status']; ?>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>
        </div>
        
        <!-- SEPARADOR NEON ENTRE SEÇÕES -->
        <?php if (!empty($jogos_finalizados)) : ?>
            <div class="neon-separator"></div>
        <?php endif; ?>
    <?php endif; ?>

    <!-- SEÇÃO DE JOGOS FINALIZADOS -->
    <?php if (!empty($jogos_finalizados)) : ?>
        <h2 class="section-title finalizados">
            ⚫ JOGOS FINALIZADOS 
            <span class="count-badge"><?php echo count($jogos_finalizados); ?></span>
        </h2>
        <div class="cyber-grid">
            <?php foreach ($jogos_finalizados as $jogo) : ?>
                <div class="cyber-card finalizado">
                    <div class="corner corner-tl"></div>
                    <div class="corner corner-tr"></div>
                    <div class="corner corner-bl"></div>
                    <div class="corner corner-br"></div>
                    
                    <div class="cyber-teams">
                        <div class="team-neon">
                            <img src="<?= $jogo['img_time1_url']; ?>" alt="<?= $jogo['time1']; ?>">
                            <p><?= $jogo['time1']; ?></p>
                            <div class="score-neon"><?= $jogo['placar_time1']; ?></div>
                        </div>
                        
                        <div class="vs-neon">VS</div>
                        
                        <div class="team-neon">
                            <img src="<?= $jogo['img_time2_url']; ?>" alt="<?= $jogo['time2']; ?>">
                            <p><?= $jogo['time2']; ?></p>
                            <div class="score-neon"><?= $jogo['placar_time2']; ?></div>
                        </div>
                    </div>

                    <div class="cyber-info">
                        <div class="league-neon"><?= $jogo['competicao']; ?></div>
                        <div class="time-neon"><?= $jogo['horario']; ?></div>
                    </div>

                    <?php if (!empty($jogo['canais'])) : ?>
                        <div class="channels-holo">
                            <?php foreach ($jogo['canais'] as $canal) : ?>
                                <div class="holo-channel">
                                    <?php if (!empty($canal['img_url'])): ?>
                                        <img src="<?= $canal['img_url']; ?>" alt="<?= $canal['nome']; ?>" 
                                             onerror="this.style.display='none'; this.parentElement.classList.add('no-image');">
                                    <?php endif; ?>
                                    <span class="channel-name"><?= $canal['nome']; ?></span>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>

                    <?php if (!empty($jogo['status'])) : ?>
                        <div style="text-align: center;">
                            <div class="status-neon status-fim">
                                <?= $jogo['status']; ?>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <!-- MENSAGEM SE NÃO HOUVER JOGOS -->
    <?php if (empty($jogos)) : ?>
        <div class="cyber-grid">
            <div class="no-games-neon">
                <span style="font-size: 4rem;">⚠</span><br>
                SINAL PERDIDO<br>
                <small style="font-size: 1rem;">NENHUM JOGO ENCONTRADO</small>
            </div>
        </div>
    <?php endif; ?>

    <script>
        // SISTEMA DE AUTO SCROLL CORRIGIDO
        let scrollInterval;
        let scrollSpeed = <?php echo $scrollSpeed; ?>;
        let scrollDirection = 1; // 1 para baixo, -1 para cima
        let isScrolling = true;
        let scrollToggle = document.getElementById('scrollToggle');

        function startScroll() {
            if (scrollInterval) {
                clearInterval(scrollInterval);
            }
            
            scrollInterval = setInterval(() => {
                if (!isScrolling) return;
                
                const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
                const currentScroll = window.scrollY;
                
                // Verifica se chegou no final ou no início
                if (currentScroll >= maxScroll - 5 && scrollDirection === 1) {
                    scrollDirection = -1; // Muda direção para cima
                } else if (currentScroll <= 5 && scrollDirection === -1) {
                    scrollDirection = 1; // Muda direção para baixo
                }
                
                // Faz o scroll suave
                window.scrollBy({
                    top: scrollSpeed * scrollDirection,
                    behavior: 'smooth'
                });
            }, 50); // Atualiza a cada 50ms para scroll suave
        }

        function toggleScroll() {
            isScrolling = !isScrolling;
            if (scrollToggle) {
                scrollToggle.textContent = isScrolling ? '⏸️' : '▶️';
            }
        }

        function changeSpeed(change) {
            scrollSpeed = Math.max(1, Math.min(10, scrollSpeed + change));
            // Atualiza o valor no modal se estiver aberto
            const speedInput = document.querySelector('input[name="scrollSpeed"]');
            const speedOutput = document.querySelector('output');
            if (speedInput && speedOutput) {
                speedInput.value = scrollSpeed;
                speedOutput.value = scrollSpeed;
                speedOutput.textContent = scrollSpeed;
            }
        }

        // Pausa o scroll quando o usuário interage
        function pauseOnUserInteraction() {
            if (isScrolling) {
                toggleScroll();
                // Volta a scrollar após 3 segundos sem interação
                clearTimeout(window.scrollTimeout);
                window.scrollTimeout = setTimeout(() => {
                    if (!isScrolling) {
                        toggleScroll();
                    }
                }, 3000);
            }
        }

        // Eventos do usuário
        document.addEventListener('mousedown', pauseOnUserInteraction);
        document.addEventListener('touchstart', pauseOnUserInteraction);
        document.addEventListener('wheel', pauseOnUserInteraction);
        document.addEventListener('keydown', pauseOnUserInteraction);

        // Inicia o scroll automático quando a página carrega
        document.addEventListener('DOMContentLoaded', () => {
            startScroll();
            
            // Adiciona efeito de glitch nos cards
            const cards = document.querySelectorAll('.cyber-card');
            cards.forEach(card => {
                card.addEventListener('mouseenter', () => {
                    const glitch = document.createElement('div');
                    glitch.style.cssText = `
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: linear-gradient(45deg, 
                            <?php echo $neonPrimary; ?>10 0%, 
                            transparent 20%,
                            <?php echo $neonSecondary; ?>10 40%,
                            transparent 60%,
                            <?php echo $neonAccent; ?>10 80%,
                            transparent 100%
                        );
                        pointer-events: none;
                        z-index: 2;
                        animation: glitchOverlay 0.3s infinite;
                    `;
                    card.appendChild(glitch);
                    
                    setTimeout(() => {
                        glitch.remove();
                    }, 300);
                });
            });
        });

        // MODAL FUNCTIONS
        function openModal() {
            document.getElementById("modal").style.display = "block";
            document.body.style.overflow = "hidden";
            // Pausa o scroll enquanto o modal está aberto
            if (isScrolling) {
                toggleScroll();
            }
        }

        function closeModal() {
            document.getElementById("modal").style.display = "none";
            document.body.style.overflow = "auto";
        }

        // CLICK OUTSIDE MODAL
        window.onclick = function(event) {
            const modal = document.getElementById("modal");
            if (event.target == modal) {
                closeModal();
            }
        }

        // DISABLE RIGHT CLICK
        document.addEventListener("contextmenu", e => e.preventDefault());

        // EFEITO DE GLITCH OVERLAY
        const style = document.createElement('style');
        style.textContent = `
            @keyframes glitchOverlay {
                0% { transform: translate(0); opacity: 1; }
                20% { transform: translate(-2px, 2px); opacity: 0.8; }
                40% { transform: translate(2px, -2px); opacity: 0.9; }
                60% { transform: translate(-1px, 1px); opacity: 0.7; }
                80% { transform: translate(1px, -1px); opacity: 0.8; }
                100% { transform: translate(0); opacity: 1; }
            }
        `;
        document.head.appendChild(style);

        // Adiciona CSS para canais sem imagem
        const channelStyle = document.createElement('style');
        channelStyle.textContent = `
            .holo-channel.no-image {
                padding-left: 1rem;
                padding-right: 1rem;
            }
            .holo-channel.no-image img {
                display: none;
            }
        `;
        document.head.appendChild(channelStyle);
    </script>
</body>
</html>