<?php
header('Content-Type: text/html; charset=utf-8');
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🌀 NEBULA GAMING ZONE 🌀</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #000;
            font-family: 'Orbitron', 'Poppins', 'Segoe UI', sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            position: relative;
            overflow-x: hidden;
        }

        /* EFEITO NEBULOSA HIPER-REALISTA */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 30% 40%, #ff00ff55 0%, transparent 30%),
                        radial-gradient(circle at 70% 60%, #00ffff55 0%, transparent 35%),
                        radial-gradient(circle at 10% 80%, #ffff0055 0%, transparent 25%),
                        radial-gradient(circle at 90% 20%, #ff990055 0%, transparent 40%),
                        repeating-linear-gradient(45deg, #000 0px, #000 2px, #111 2px, #111 4px);
            filter: blur(3px);
            animation: nebulosa 20s ease-in-out infinite;
            z-index: -1;
        }

        @keyframes nebulosa {
            0%, 100% { opacity: 0.5; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.1); }
        }

        /* ESTRELAS CADENTES */
        .estrela {
            position: fixed;
            width: 2px;
            height: 2px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 0 10px white, 0 0 20px cyan;
            animation: estrelaCaindo 3s linear infinite;
            z-index: -1;
        }

        @keyframes estrelaCaindo {
            0% { transform: translateY(-100vh) translateX(0) rotate(45deg); opacity: 1; }
            100% { transform: translateY(100vh) translateX(20vw) rotate(45deg); opacity: 0; }
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
            z-index: 10;
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        .header h1 {
            font-size: 6rem;
            background: linear-gradient(135deg, #ff00ff, #00ffff, #ffff00, #ff9900, #ff0066);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 900;
            letter-spacing: 15px;
            text-transform: uppercase;
            position: relative;
            animation: titulo3d 3s ease-in-out infinite;
            text-shadow: 0 0 30px #ff00ff, 0 0 60px #00ffff;
            transform: rotateX(10deg) rotateY(-5deg);
        }

        @keyframes titulo3d {
            0%, 100% { transform: rotateX(10deg) rotateY(-5deg) translateZ(0); }
            50% { transform: rotateX(20deg) rotateY(5deg) translateZ(50px); }
        }

        .header h1::before {
            content: '🌀 NEBULA GAMING ZONE 🌀';
            position: absolute;
            top: 5px;
            left: 5px;
            background: linear-gradient(135deg, #00ffff, #ff00ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: blur(15px);
            opacity: 0.7;
            z-index: -1;
        }

        .header p {
            color: transparent;
            font-size: 1.8rem;
            font-weight: 600;
            letter-spacing: 8px;
            background: linear-gradient(90deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
            -webkit-background-clip: text;
            background-clip: text;
            text-transform: uppercase;
            position: relative;
            animation: piscaRapido 1.5s steps(2) infinite;
        }

        @keyframes piscaRapido {
            0%, 100% { opacity: 1; text-shadow: 0 0 20px magenta; }
            50% { opacity: 0.5; text-shadow: 0 0 40px cyan; }
        }

        .container {
            width: 100%;
            max-width: 1800px;
            height: 750px;
            position: relative;
            overflow: hidden;
            border-radius: 60px 60px 30px 30px;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(20px);
            border: 4px solid;
            border-image: repeating-linear-gradient(45deg, #ff00ff, #00ffff, #ffff00, #ff9900, #ff0066) 1;
            box-shadow: 0 0 80px #ff00ff, 0 0 160px #00ffff, inset 0 0 80px rgba(255, 0, 255, 0.3);
            z-index: 5;
            transform: rotateX(2deg) rotateY(-2deg);
            transition: all 0.5s;
        }

        .container:hover {
            transform: rotateX(0deg) rotateY(0deg) scale(1.02);
            box-shadow: 0 0 100px cyan, 0 0 200px magenta;
        }

        .cards-wrapper {
            display: flex;
            flex-direction: column;
            height: 100%;
            animation: rolarRapido 30s linear infinite; /* MAIS RÁPIDO POSSÍVEL */
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            cursor: grab;
        }

        .cards-wrapper:active {
            cursor: grabbing;
        }

        .cards-wrapper::-webkit-scrollbar {
            display: none;
        }

        @keyframes rolarRapido {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-50%);
            }
        }

        .cards-content {
            display: grid;
            grid-template-columns: repeat(5, 1fr); /* 5 colunas */
            gap: 25px;
            padding: 30px;
            min-height: 100%;
            flex-shrink: 0;
        }

        .card {
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid transparent;
            border-radius: 50px 20px 50px 20px; /* FORMA IRREGULAR */
            padding: 25px;
            position: relative;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            backdrop-filter: blur(15px);
            box-shadow: 0 25px 40px -15px black;
            overflow: hidden;
            min-height: 350px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transform: rotate(0deg) scale(1);
            animation: cardFlutua 4s ease-in-out infinite;
            animation-delay: calc(var(--i) * -0.5s);
        }

        .card:nth-child(1) { --i: 1; }
        .card:nth-child(2) { --i: 2; }
        .card:nth-child(3) { --i: 3; }
        .card:nth-child(4) { --i: 4; }
        .card:nth-child(5) { --i: 5; }
        .card:nth-child(6) { --i: 6; }
        .card:nth-child(7) { --i: 7; }
        .card:nth-child(8) { --i: 8; }
        .card:nth-child(9) { --i: 9; }
        .card:nth-child(10) { --i: 10; }

        @keyframes cardFlutua {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-5px) rotate(0.5deg); }
            75% { transform: translateY(5px) rotate(-0.5deg); }
        }

        .card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg, #ff00ff, #00ffff, #ffff00, #ff9900, #ff0066, #ff00ff);
            animation: spinRapido 4s linear infinite;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .card:hover::before {
            opacity: 0.3;
        }

        @keyframes spinRapido {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .card::after {
            content: '';
            position: absolute;
            inset: 3px;
            background: linear-gradient(145deg, #1a0b2e, #0a0f1e);
            border-radius: 48px 18px 48px 18px;
            z-index: -1;
        }

        .card:hover {
            transform: scale(1.05) rotate(1deg) translateY(-10px);
            box-shadow: 0 0 50px #ff00ff, 0 0 100px #00ffff;
            border-color: transparent;
        }

        .card-content {
            position: relative;
            z-index: 2;
        }

        .competition {
            font-size: 0.8rem;
            color: #00ffff;
            text-transform: uppercase;
            letter-spacing: 4px;
            margin-bottom: 15px;
            font-weight: 800;
            text-shadow: 0 0 15px cyan;
            display: inline-block;
            padding: 8px 20px;
            background: rgba(255, 0, 255, 0.2);
            border-radius: 30px 10px 30px 10px;
            border-left: 3px solid #ff00ff;
            border-bottom: 3px solid #ffff00;
            transform: skew(-5deg);
            animation: compBrilha 2s infinite;
        }

        @keyframes compBrilha {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.5); }
        }

        .teams-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            gap: 10px;
            position: relative;
        }

        .teams-container::before {
            content: '⚡⚡⚡';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            color: #ffff00;
            text-shadow: 0 0 30px yellow, 0 0 60px orange;
            animation: explode 1s infinite;
            z-index: 3;
        }

        @keyframes explode {
            0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
            50% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
        }

        .team {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
        }

        .team-logo {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #ff00ff, #00ffff);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; /* FORMA ORGÂNICA */
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            border: 4px solid #ffff00;
            overflow: hidden;
            box-shadow: 0 0 40px magenta, 0 0 80px cyan;
            transition: all 0.3s;
            animation: logoDistorce 8s ease-in-out infinite;
        }

        @keyframes logoDistorce {
            0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
            25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
            50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
            75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
        }

        .card:hover .team-logo {
            animation: logoPula 0.5s infinite;
            border-color: #ff00ff;
        }

        @keyframes logoPula {
            0%, 100% { transform: scale(1) rotate(0deg); }
            25% { transform: scale(1.2) rotate(10deg); }
            75% { transform: scale(0.9) rotate(-10deg); }
        }

        .team-logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: contrast(1.2) saturate(1.5);
        }

        .team-name {
            font-size: 1rem;
            color: #fff;
            font-weight: 900;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-shadow: 0 0 10px magenta, 0 0 20px cyan;
            background: linear-gradient(90deg, #ffff00, #ff00ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            transform: rotate(-2deg);
        }

        .score {
            font-size: 2.8rem;
            font-weight: 900;
            text-align: center;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            background: linear-gradient(135deg, #ffff00, #ff00ff, #00ffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 40px yellow, 0 0 80px magenta;
            letter-spacing: 8px;
            transform: perspective(500px) rotateX(10deg);
            animation: scoreLate 2s infinite;
        }

        @keyframes scoreLate {
            0%, 100% { transform: perspective(500px) rotateX(10deg) scale(1); }
            50% { transform: perspective(500px) rotateX(20deg) scale(1.1); }
        }

        .time-status {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 15px 0;
            padding: 15px 20px;
            background: linear-gradient(90deg, rgba(255, 0, 255, 0.3), rgba(0, 255, 255, 0.3), rgba(255, 255, 0, 0.3));
            border-radius: 40px 10px 40px 10px;
            border: 2px solid;
            border-color: #ffff00 #ff00ff #00ffff #ff9900;
            backdrop-filter: blur(20px);
            position: relative;
            overflow: hidden;
        }

        .time-status::before {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            width: 30px;
            height: 30px;
            background: #ffff00;
            border-radius: 50%;
            filter: blur(15px);
            animation: bolhaMove 3s linear infinite;
        }

        .time-status::after {
            content: '';
            position: absolute;
            bottom: -10px;
            right: -10px;
            width: 40px;
            height: 40px;
            background: #ff00ff;
            border-radius: 50%;
            filter: blur(20px);
            animation: bolhaMove 4s linear infinite reverse;
        }

        @keyframes bolhaMove {
            0% { transform: translate(0, 0); }
            25% { transform: translate(20px, -20px); }
            50% { transform: translate(40px, 0); }
            75% { transform: translate(20px, 20px); }
            100% { transform: translate(0, 0); }
        }

        .time {
            font-size: 1.4rem;
            color: #ffff00;
            font-weight: bold;
            font-family: 'Courier New', monospace;
            text-shadow: 0 0 20px yellow;
            position: relative;
            z-index: 2;
        }

        .status {
            font-size: 1rem;
            color: #00ffff;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 3px;
            padding: 8px 20px;
            background: rgba(255, 0, 255, 0.3);
            border-radius: 30px 5px 30px 5px;
            border: 2px dashed #00ffff;
            box-shadow: 0 0 30px cyan;
            animation: statusPisca 0.5s infinite;
            position: relative;
            z-index: 2;
        }

        @keyframes statusPisca {
            0%, 100% { opacity: 1; background: rgba(255, 0, 255, 0.3); }
            50% { opacity: 0.8; background: rgba(0, 255, 255, 0.3); }
        }

        .channels {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 15px;
            justify-content: center;
        }

        .channel-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.8rem;
            color: #000;
            background: linear-gradient(135deg, #ffff00, #ff00ff, #00ffff);
            padding: 8px 18px;
            border-radius: 40px 10px 40px 10px;
            border: 2px solid white;
            text-transform: uppercase;
            font-weight: 900;
            letter-spacing: 1.5px;
            box-shadow: 0 0 20px yellow, 0 0 40px magenta;
            transition: all 0.2s;
            position: relative;
            overflow: hidden;
            transform: rotate(0deg) scale(1);
        }

        .channel-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
            animation: canalBrilha 2s infinite;
        }

        @keyframes canalBrilha {
            0% { left: -100%; }
            20% { left: 100%; }
            100% { left: 100%; }
        }

        .channel-item:hover {
            transform: scale(1.15) rotate(5deg);
            box-shadow: 0 0 40px cyan, 0 0 80px magenta;
            border-color: black;
        }

        .channel-logo {
            width: 22px;
            height: 22px;
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            object-fit: contain;
            background: white;
            padding: 2px;
            animation: logoMini 3s infinite;
        }

        @keyframes logoMini {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(180deg); }
        }

        .error {
            color: #ffff00;
            text-align: center;
            padding: 60px;
            font-size: 2rem;
            text-transform: uppercase;
            letter-spacing: 5px;
            text-shadow: 0 0 30px yellow, 0 0 60px red;
            background: rgba(255, 0, 255, 0.2);
            border-radius: 50px 20px 50px 20px;
            border: 4px dashed #ff00ff;
            animation: erroLouco 1s infinite;
        }

        @keyframes erroLouco {
            0%, 100% { transform: scale(1) rotate(0deg); }
            25% { transform: scale(1.05) rotate(1deg); }
            75% { transform: scale(0.95) rotate(-1deg); }
        }

        .floating-badge {
            position: absolute;
            top: 30px;
            right: 40px;
            background: linear-gradient(135deg, #000, #111);
            color: #00ffff;
            padding: 15px 35px;
            border-radius: 80px 20px 80px 20px;
            font-size: 1.2rem;
            font-weight: 900;
            border: 4px solid;
            border-color: #ff00ff #00ffff #ffff00 #ff9900;
            backdrop-filter: blur(20px);
            z-index: 20;
            animation: flutuaLouco 2s ease-in-out infinite;
            text-transform: uppercase;
            letter-spacing: 4px;
            box-shadow: 0 0 50px cyan, 0 0 100px magenta;
            transform: rotate(5deg);
        }

        @keyframes flutuaLouco {
            0%, 100% { transform: translateY(0) rotate(5deg); }
            25% { transform: translateY(-15px) rotate(8deg); }
            75% { transform: translateY(15px) rotate(2deg); }
        }

        /* Responsividade */
        @media (max-width: 1400px) {
            .cards-content {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (max-width: 1100px) {
            .cards-content {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .header h1 {
                font-size: 4rem;
                letter-spacing: 8px;
            }
        }

        @media (max-width: 800px) {
            .cards-content {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 500px) {
            .cards-content {
                grid-template-columns: 1fr;
            }
            
            .container {
                height: 600px;
            }
            
            .header h1 {
                font-size: 2.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- ESTRELAS CADENTES ALEATÓRIAS -->
    <script>
        for (let i = 0; i < 50; i++) {
            const estrela = document.createElement('div');
            estrela.className = 'estrela';
            estrela.style.left = Math.random() * 100 + '%';
            estrela.style.animationDelay = Math.random() * 5 + 's';
            estrela.style.animationDuration = (2 + Math.random() * 3) + 's';
            document.body.appendChild(estrela);
        }
    </script>

    <div class="floating-badge">
        🌀 LIVE: DIMENSÃO NEBULA 🌀
    </div>

    <div class="header">
        <h1>🌀 NEBULA GAMING</h1>
        <p>⚡ 5ª DIMENSÃO ⚡</p>
    </div>

    <div class="container">
        <div class="cards-wrapper" id="cardsWrapper">
            <div class="cards-content" id="cardsContainer"></div>
            <div class="cards-content" id="cardsContainerDuplicate"></div>
        </div>
    </div>

    <script>
        // MAPEAMENTO COMPLETO DE LOGOS DOS CANAIS (O MESMO DO ANTERIOR, MAS VOU MANTER IGUAL)
        const channelLogos = {
            'sportv': 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/SporTV_logo.svg/1200px-SporTV_logo.svg.png',
            'sportv2': 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/SporTV_logo.svg/1200px-SporTV_logo.svg.png',
            'sportv3': 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/SporTV_logo.svg/1200px-SporTV_logo.svg.png',
            'sportv 2': 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/SporTV_logo.svg/1200px-SporTV_logo.svg.png',
            'sportv 3': 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/SporTV_logo.svg/1200px-SporTV_logo.svg.png',
            'espn': 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/ESPN_wordmark.svg/1200px-ESPN_wordmark.svg.png',
            'espn2': 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/ESPN_wordmark.svg/1200px-ESPN_wordmark.svg.png',
            'espn 2': 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/ESPN_wordmark.svg/1200px-ESPN_wordmark.svg.png',
            'fox sports': 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/FOX_Sports_logo.svg/1200px-FOX_Sports_logo.svg.png',
            'band': 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Logo_Band.svg/1200px-Logo_Band.svg.png',
            'bandsports': 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Logo_Band.svg/1200px-Logo_Band.svg.png',
            'globo': 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Rede_Globo_logo.svg/1200px-Rede_Globo_logo.svg.png',
            'record': 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Logo_Rede_Record.svg/1200px-Logo_Rede_Record.svg.png',
            'sbt': 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/SBT_logo.svg/1200px-SBT_logo.svg.png',
            'tnt sports': 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/TNT_Sports_2018_logo.svg/1200px-TNT_Sports_2018_logo.svg.png',
            'tnt': 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/TNT_Sports_2018_logo.svg/1200px-TNT_Sports_2018_logo.svg.png',
            'premiere': 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Premiere_FC_logo.svg/1200px-Premiere_FC_logo.svg.png',
            'combate': 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Combate_logo.svg/1200px-Combate_logo.svg.png',
            'youtube': 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Logo_of_YouTube_%282015-2017%29.svg/1200px-Logo_of_YouTube_%282015-2017%29.svg.png',
            'twitch': 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Twitch_logo_2019.svg/1200px-Twitch_logo_2019.svg.png',
            'facebook': 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Facebook_Logo_%282019%29.png/1200px-Facebook_Logo_%282019%29.png',
            'futemax': 'https://i.postimg.cc/brWz0QGd/futemax-logo.png',
            'multicanais': 'https://i.postimg.cc/0yy0W9bV/multicanais-logo.png',
            'star plus': 'https://i.postimg.cc/nLqWqVvT/star-plus-logo.png',
            'paramount+': 'https://i.postimg.cc/T3yB0yT1/paramount-plus-logo.png',
            'amazon prime': 'https://i.postimg.cc/NGRYxw7h/amazon-prime-logo.png',
            'netflix': 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Netflix_icon.svg/1200px-Netflix_icon.svg.png',
            'disney+': 'https://i.postimg.cc/2yVQzP2M/disney-plus-logo.png',
            'hbo max': 'https://i.postimg.cc/T2RQh3TM/hbo-max-logo.png',
            'apple tv': 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Apple_TV_Plus_Logo.svg/1200px-Apple_TV_Plus_Logo.svg.png',
            'directv': 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/DirecTV_logo.svg/1200px-DirecTV_logo.svg.png',
            'sky': 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Sky_Sports_logo.svg/1200px-Sky_Sports_logo.svg.png',
            'bein sports': 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/BeIN_Sports_logo.svg/1200px-BeIN_Sports_logo.svg.png',
            'dazn': 'https://i.postimg.cc/sx2p4JtN/dazn-logo.png',
            'caze tv': 'https://i.postimg.cc/YqbjqQqy/caze-tv-logo.png',
        };

        const defaultChannelLogo = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2245%22 fill=%22%23ff00ff%22/%3E%3Ctext x=%2250%22 y=%2265%22 font-size=%2240%22 text-anchor=%22middle%22 fill=%22%23fff%22%3E🌀%3C/text%3E%3C/svg%3E';

        function getChannelLogo(channelName) {
            if (!channelName) return defaultChannelLogo;
            const channelLower = channelName.toLowerCase().trim();
            
            for (const [key, value] of Object.entries(channelLogos)) {
                if (channelLower.includes(key)) {
                    return value;
                }
            }
            return defaultChannelLogo;
        }

        async function loadGames() {
            try {
                const response = await fetch('https://meusjogos.shop/dados_api.json');
                const data = await response.json();

                const container = document.getElementById('cardsContainer');
                const duplicate = document.getElementById('cardsContainerDuplicate');
                const wrapper = document.getElementById('cardsWrapper');

                container.innerHTML = '';
                duplicate.innerHTML = '';

                let games = Array.isArray(data) ? data : (data.jogos || []);

                if (games.length === 0) {
                    container.innerHTML = '<div class="error">🌀 DIMENSÃO VAZIA 🌀</div>';
                    return;
                }

                games.forEach(game => {
                    const card = createCard(game);
                    container.appendChild(card);
                    duplicate.appendChild(card.cloneNode(true));
                });

                wrapper.scrollTop = 0;

            } catch (error) {
                console.error('Erro:', error);
                document.getElementById('cardsContainer').innerHTML = 
                    '<div class="error">🔥 COLAPSO DIMENSIONAL 🔥</div>';
            }
        }

        function createCard(game) {
            const card = document.createElement('div');
            card.className = 'card';

            const placar = `${game.placar_time1 || '0'} x ${game.placar_time2 || '0'}`;
            const status = game.status || '🌀 NEBULA';
            const horario = game.horario || '--:--';

            let channelsHtml = '';
            if (game.canais && Array.isArray(game.canais)) {
                game.canais.forEach(canal => {
                    const nomeCanal = canal.nome || 'Canal';
                    const logoUrl = getChannelLogo(nomeCanal);
                    
                    channelsHtml += `
                        <div class="channel-item">
                            <img src="${logoUrl}" alt="${nomeCanal}" class="channel-logo" 
                                 onerror="this.onerror=null; this.src='${defaultChannelLogo}'">
                            <span>${nomeCanal}</span>
                        </div>
                    `;
                });
            } else {
                channelsHtml = '<div class="channel-item">🌀 PORTAL FECHADO</div>';
            }

            card.innerHTML = `
                <div class="card-content">
                    <div class="competition">${game.competicao || '🌀 DIMENSÃO NEBULA'}</div>
                    
                    <div class="teams-container">
                        <div class="team">
                            <div class="team-logo">
                                <img src="${game.img_time1_url || ''}" alt="${game.time1}" 
                                     onerror="this.onerror=null; this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2245%22 fill=%22%23ff00ff%22/%3E%3Ctext x=%2250%22 y=%2265%22 font-size=%2240%22 text-anchor=%22middle%22 fill=%22%23fff%22%3E🌀%3C/text%3E%3C/svg%3E'">
                            </div>
                            <div class="team-name">${game.time1 || 'PORTAL A'}</div>
                        </div>
                        <div class="team">
                            <div class="team-logo">
                                <img src="${game.img_time2_url || ''}" alt="${game.time2}" 
                                     onerror="this.onerror=null; this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2245%22 fill=%22%2300ffff%22/%3E%3Ctext x=%2250%22 y=%2265%22 font-size=%2240%22 text-anchor=%22middle%22 fill=%22%23fff%22%3E🌀%3C/text%3E%3C/svg%3E'">
                            </div>
                            <div class="team-name">${game.time2 || 'PORTAL B'}</div>
                        </div>
                    </div>

                    <div class="score">${placar}</div>

                    <div class="time-status">
                        <span class="time">${horario}</span>
                        <span class="status">${status}</span>
                    </div>

                    <div class="channels">
                        ${channelsHtml}
                    </div>
                </div>
            `;

            return card;
        }

        document.addEventListener('DOMContentLoaded', loadGames);
        setInterval(loadGames, 3 * 60 * 1000); // RECARREGA A CADA 3 MINUTOS

        // CONTROLES DE ROLAGEM
        const wrapper = document.getElementById('cardsWrapper');
        
        wrapper.addEventListener('wheel', () => {
            wrapper.style.animationPlayState = 'paused';
        });

        wrapper.addEventListener('touchstart', () => {
            wrapper.style.animationPlayState = 'paused';
        });

        let scrollTimeout;
        wrapper.addEventListener('scroll', () => {
            wrapper.style.animationPlayState = 'paused';
            
            clearTimeout(scrollTimeout);
            scrollTimeout = setTimeout(() => {
                if (!wrapper.matches(':hover')) {
                    wrapper.style.animationPlayState = 'running';
                }
            }, 1500);
        });

        wrapper.addEventListener('mouseenter', () => {
            wrapper.style.animationPlayState = 'paused';
        });

        wrapper.addEventListener('mouseleave', () => {
            if (wrapper.scrollTop === 0) {
                wrapper.style.animationPlayState = 'running';
            }
        });

        // EFEITO DE GRAVIDADE ZERO NO TÍTULO
        document.addEventListener('mousemove', (e) => {
            const titulo = document.querySelector('.header h1');
            const x = (e.clientX / window.innerWidth - 0.5) * 20;
            const y = (e.clientY / window.innerHeight - 0.5) * 20;
            titulo.style.transform = `rotateX(${y}deg) rotateY(${x}deg) translateZ(50px)`;
        });
    </script>
</body>
</html>