Futebol Internacional Copa do Mundo Especiais

Simulador da Copa: Escale sua seleção com os melhores das oitavas

Redação 365Scores08/07/2026 - 08:35 am

Quem nunca quis estar na pele de um treinador e ter que resolver aquela “dor de cabeça boa” de escalar os melhores do planeta? A Copa do Mundo está entregando tudo, e agora a decisão é sua.

Com base na nossa Nota de Impacto 365Scores — que avalia o desempenho real dos atletas em campo e aponta os destaques da Copa até aqui —, reunimos os melhores jogadores das oitavas de final.

Haaland, Mbappé, Bellingham e outras estrelas estão à sua disposição. E agora, quem joga e quem fica fora desse esquadrão?

➡️ Simulador da Seleção: escale o Brasil para as oitavas!
➡️ Simulador do mata-mata da Copa: preveja o campeão!

Como funciona o Simulador da Seleção das oitavas?

Para criar o seu time é muito simples: o nosso simulador exclusivo permite que você defina a estratégia escolhendo entre os esquemas táticos 4-4-2 ou 4-3-3.

Depois, basta clicar sobre a posição e selecionar o jogador para preencher a vaga. Ao finalizar a escalação, o seu time personalizado aparece montado diretamente em um campinho.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Roboto', sans-serif; background-color: #151E22; color: #FFFFFF; margin: 0; padding: 0; }
        .main-blue { color: #2194FF; }
        .bg-main-blue { background-color: #2194FF; }
        .text-red { color: #FF495C; }
        .text-yellow { color: #FFB800; }
        .text-green { color: #5BB849; }
        
        .player-card { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; border: 2px solid transparent; position: relative; -webkit-tap-highlight-color: transparent; }
        .player-card:hover { transform: translateY(-4px); background-color: #1f2b31; }
        .player-card:active { transform: scale(0.95); }
        .player-card.selected { border-color: #2194FF; background-color: rgba(33, 148, 255, 0.2); }
        .player-card.selected::after { content: '✓'; position: absolute; top: 4px; right: 8px; color: #2194FF; font-weight: 900; font-size: 16px; }

.sticky-summary { position: sticky; top: 0; z-index: 50; background: rgba(21, 30, 34, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid #2d3e46; }

#pitch-container { position: relative; background: linear-gradient(to bottom, #2d5a27 0%, #1e3c1a 100%); border: 3px solid rgba(255,255,255,0.2); border-radius: 16px; overflow: hidden; width: 100%; aspect-ratio: 2/3; max-width: 480px; margin: 0 auto; box-shadow: 0 15px 40px rgba(0,0,0,0.6); }
        .pitch-line { position: absolute; border: 1.5px solid rgba(255,255,255,0.25); }
        .center-circle { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25%; aspect-ratio: 1; border-radius: 50%; }
        .penalty-area-top { top: 0; left: 50%; transform: translateX(-50%); width: 50%; height: 14%; border-top: 0; }
        .penalty-area-bottom { bottom: 0; left: 50%; transform: translateX(-50%); width: 50%; height: 14%; border-bottom: 0; }
        .mid-line { top: 50%; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,0.25); border: 0; }

/* Ajuste Nomes no Campo - 100% alinhados */
        .pitch-row { display: flex; justify-content: space-evenly; align-items: flex-start; gap: 4px; width: 100%; padding: 4px; flex-wrap: nowrap; transition: all 0.3s ease; }
        .pitch-player { display: flex; flex-direction: column; align-items: center; text-align: center; width: auto; z-index: 10; margin-bottom: 8px; transition: transform 0.3s ease-out; }
        
        .pitch-player img { width: 52px; height: 52px; border-radius: 50%; border: 2px solid #2194FF; background: #151E22; object-fit: cover; box-shadow: 0 4px 8px rgba(0,0,0,0.5); }
        @media (min-width: 400px) { .pitch-player img { width: 66px; height: 66px; } }
        
        .pitch-player span { font-size: 8px; font-weight: 900; text-transform: uppercase; margin-top: 6px; line-height: 1.1; background: rgba(0,0,0,0.85); padding: 4px 6px; border-radius: 4px; color: white; white-space: normal; word-break: break-word; max-width: 100%; display: inline-block; }
        @media (min-width: 400px) { .pitch-player span { font-size: 10px; } }

@keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .animate-coach { animation: slideUp 0.5s ease-out forwards; }
        .hidden { display: none !important; }
        @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
        .shake { animation: shake 0.2s ease-in-out; }
    </style>
</head>
<body class="bg-[#151E22]">

<div id="main-wrapper" class="pb-10">
        
        <div class="max-w-[1200px] mx-auto">
            <header id="app-header" class="p-3 sm:p-4 flex items-center justify-between border-b border-gray-800 bg-[#1a252a]">
                <img decoding="async" src="https://imagecache.365scores.com/image/upload/f_png,c_limit,q_auto:eco,dpr_1/Website/logo_new" alt="365Scores" class="h-6 sm:h-8">
                <div class="flex items-center gap-2 sm:gap-3">
                    <span class="font-black text-xs sm:text-lg tracking-tighter text-white uppercase italic">SELEÇÃO DAS OITAVAS</span>
                </div>
            </header>

<div id="selection-view">
                <div class="sticky-summary p-3 sm:p-4 shadow-xl">
                    <div class="max-w-5xl mx-auto">
                        <div class="flex flex-col md:flex-row justify-between items-center gap-3">
                            <div class="w-full md:flex-1">
                                <div class="flex justify-between mb-1">
                                    <span class="text-[9px] sm:text-[10px] font-black uppercase tracking-widest text-gray-400">Craques Escolhidos</span>
                                    <span id="total-count" class="text-xs sm:text-sm font-black">0 / 11</span>
                                </div>
                                <div class="w-full bg-gray-800 h-1.5 sm:h-2 rounded-full overflow-hidden">
                                    <div id="progress-bar" class="h-full bg-main-blue transition-all duration-500" style="width: 0%"></div>
                                </div>
                            </div>
                            <div class="grid grid-cols-4 gap-3 sm:gap-6 text-center w-full md:w-auto">
                                <div class="flex flex-col"><span class="text-[8px] uppercase font-bold text-gray-500">GOL (1)</span><span id="gk-count" class="font-black text-yellow text-sm sm:text-base">0</span></div>
                                <div class="flex flex-col"><span class="text-[8px] uppercase font-bold text-gray-500">DEF (4)</span><span id="def-count" class="font-black text-yellow text-sm sm:text-base">0</span></div>
                                <div class="flex flex-col"><span class="text-[8px] uppercase font-bold text-gray-500">MEI (3 a 4)</span><span id="mid-count" class="font-black text-yellow text-sm sm:text-base">0</span></div>
                                <div class="flex flex-col"><span class="text-[8px] uppercase font-bold text-gray-500">ATA (2 a 3)</span><span id="att-count" class="font-black text-yellow text-sm sm:text-base">0</span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="alert-box" class="fixed top-20 left-1/2 -translate-x-1/2 z-[100] w-[90%] max-w-xs hidden">
                    <div class="bg-red-500 text-white px-4 py-2 rounded-full text-[10px] font-black uppercase tracking-wider text-center shadow-2xl">
                        Limite Atingido!
                    </div>
                </div>
                <main class="max-w-5xl mx-auto p-3 sm:p-4 mt-4">
                    <div id="player-lists" class="space-y-8 sm:space-y-12">
                        </div>

<div class="mt-12 sm:mt-16 text-center p-6 sm:p-10 bg-[#1a252a] rounded-2xl sm:rounded-3xl border border-gray-800 shadow-2xl">
                        <h3 class="text-lg sm:text-xl font-black mb-2 uppercase italic tracking-tighter text-white">Esquemas 4-4-2 ou 4-3-3</h3>
                        <div id="validation-messages" class="text-sm sm:text-base space-y-1 mb-6 sm:mb-8 min-h-[30px]"></div>
                        <button id="finalize-btn" disabled class="w-full sm:w-auto px-10 py-3 sm:py-4 rounded-full font-black text-base sm:text-lg bg-gray-700 text-gray-500 transition-all uppercase tracking-widest cursor-not-allowed">
                            ESCALAR TIME
                        </button>
                    </div>
                </main>
            </div>
            <div id="final-view" class="hidden max-w-4xl mx-auto p-3 sm:p-4 pt-6 sm:pt-10 animate-coach">
                <div class="text-center mb-6">
                    <h1 class="text-2xl sm:text-5xl font-black italic tracking-tighter uppercase leading-tight text-white">SELEÇÃO DAS OITAVAS</h1>
                    <p class="text-main-blue font-black tracking-widest mt-1 text-[10px] sm:text-sm uppercase">Os 11 melhores do mata-mata!</p>
                </div>
                <div id="pitch-container" class="flex flex-col justify-between py-6 px-1">
                    <div class="pitch-line center-circle"></div>
                    <div class="pitch-line penalty-area-top"></div>
                    <div class="pitch-line penalty-area-bottom"></div>
                    <div class="pitch-line mid-line"></div>
                    
                    <div class="flex flex-col h-full justify-between gap-2">
                        <div id="pitch-attackers" class="pitch-row w-full px-2"></div>
                        <div id="pitch-midfielders" class="pitch-row"></div>
                        <div id="pitch-defenders" class="pitch-row"></div>
                        <div id="pitch-goalkeepers" class="pitch-row"></div>
                    </div>
                </div>

<div class="mt-6 sm:mt-8 bg-[#1a252a] p-4 sm:p-6 rounded-2xl sm:rounded-3xl border border-gray-800 shadow-xl flex justify-center">
                    <button onclick="resetApp()" class="flex flex-col items-center justify-center p-3 bg-[#151E22] rounded-xl hover:bg-red-500 transition-colors group w-32">
                        <svg class="w-5 h-5 mb-1 text-red-500 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
                        <span class="text-[9px] font-black uppercase text-white">Refazer Time</span>
                    </button>
                </div>
            </div>

</div>

</div> <script>
        const POSITION_ID_MAP = { 'GOLEIRO': 'gk', 'DEFENSOR': 'def', 'MEIO-CAMPISTA': 'mid', 'ATACANTE': 'att' };
        const POS_PLURAL = { 'GOLEIRO': 'goleiro', 'DEFENSOR': 'defensores', 'MEIO-CAMPISTA': 'meio-campistas', 'ATACANTE': 'atacantes' };

// Dicionário invisível para tentar manter laterais nas pontas e zagueiros no centro na exibição
        const defWeights = {
            'Hakimi': 1, 'Johnston': 1,
            'Van Dijk': 2, 'Gabriel Magalhães': 2, 'Laporte': 2, 'Cubarsí': 2, 'Ajer': 2, 'Diney Borges': 2,
            'Koundé': 3, 'Pedro Porro': 3
        };

const attWeights = {
            'Vinicius Júnior': 1, 'Dembélé': 1, 'Barcola': 1,
            'Kane': 2, 'Haaland': 2, 'Matheus Cunha': 2, 'Mbappé': 2,
            'Yamal': 3, 'Messi': 3, 'Trossard': 3
        };

const playersData = `Player name,ID,Position,Team,Link
Pickford,3,GOLEIRO,ING,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/16140"
Nyland,35,GOLEIRO,NOR,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/9214"
Bounou,36,GOLEIRO,MAR,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/5755"
Kobel,37,GOLEIRO,SUI,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/48401"
Ajer,10,DEFENSOR,NOR,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/44084"
Koundé,15,DEFENSOR,FRA,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/55138"
Martínez,38,DEFENSOR,ARG,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/51322"
Upamecano,39,DEFENSOR,FRA,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/45046"
Diop,40,DEFENSOR,MAR,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/39807"
Romero,41,DEFENSOR,ARG,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/44331"
Mazraoui,42,DEFENSOR,MAR,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/55208"
Elvedi,43,DEFENSOR,SUI,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/9666"
Freeman,44,DEFENSOR,EUA,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/153703"
Rodri,16,MEIO-CAMPISTA,ESP,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/39961"
Bellingham,21,MEIO-CAMPISTA,ING,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/73000"
Ounahi,45,MEIO-CAMPISTA,MAR,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/100831"
Kone,46,MEIO-CAMPISTA,FRA,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/67364"
Berge,47,MEIO-CAMPISTA,NOR,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/47214"
De Ketelaere,48,MEIO-CAMPISTA,BEL,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/71637"
Vanaken,49,MEIO-CAMPISTA,BEL,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/1332"
Odegaard,50,MEIO-CAMPISTA,NOR,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/11583"
Messi,24,ATACANTE,ARG,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/874"
Mbappé,26,ATACANTE,FRA,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/39820"
Trossard,27,ATACANTE,BEL,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/27537"
Kane,28,ATACANTE,ING,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/1669"
Haaland,29,ATACANTE,NOR,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/65760"
Dembélé,30,ATACANTE,FRA,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/39779"
Brahim Díaz,51,ATACANTE,MAR,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/53800"
Schjelderup,52,ATACANTE,NOR,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/87931"
Raul Jimenez,53,ATACANTE,MEX,"https://imagecache.365scores.com/image/upload/Athletes/NationalTeam/23"`;

// Limites Dinâmicos (4-4-2 ou 4-3-3)
        const state = {
            selectedPlayers: new Set(),
            limits: {
                'GOLEIRO': { min: 1, max: 1 },
                'DEFENSOR': { min: 4, max: 4 },
                'MEIO-CAMPISTA': { min: 3, max: 4 },
                'ATACANTE': { min: 2, max: 3 }
            },
            totalNeeded: 11
        };

function showAlert(message) {
            const alertBox = document.getElementById('alert-box');
            if (!alertBox) return;
            alertBox.firstElementChild.textContent = message;
            alertBox.classList.remove('hidden');
            alertBox.classList.add('shake');
            setTimeout(() => { alertBox.classList.remove('shake'); alertBox.classList.add('hidden'); }, 2000);
        }

function updateUI() {
            const players = parseCSV(playersData);
            const counts = { 'GOLEIRO': 0, 'DEFENSOR': 0, 'MEIO-CAMPISTA': 0, 'ATACANTE': 0 };
            
            state.selectedPlayers.forEach(id => {
                const p = players.find(x => x.id === id);
                if (p && counts[p.position] !== undefined) counts[p.position]++;
            });

let isValid = true;
            if (state.selectedPlayers.size !== state.totalNeeded) {
                isValid = false;
            }
            Object.entries(state.limits).forEach(([pos, lim]) => {
                if (counts[pos] < lim.min || counts[pos] > lim.max) isValid = false;
            });

function renderPitchPlayer(p) {
            return `
                <div class="pitch-player">
                    <img decoding="async" src="${p.image}" alt="${p.name}" onerror="this.src='https://imagecache.365scores.com/image/upload/f_png,w_80,h_80,c_limit,q_auto:eco,dpr_2/Athletes/NationalTeam/0'">
                    <span>${p.name}</span>
                </div>
            `;
        }

let attackers = selected.filter(p => p.position === 'ATACANTE');
            attackers.sort((a, b) => {
                const wA = attWeights[a.name] || 2; 
                const wB = attWeights[b.name] || 2;
                return wA - wB;
            });

const pitchAttackers = document.getElementById('pitch-attackers');
            pitchAttackers.innerHTML = attackers.map(renderPitchPlayer).join('');
            
            // Lógica para aproximar os atacantes se o esquema for 4-4-2
            if (attackers.length === 2) {
                pitchAttackers.style.justifyContent = 'center';
                pitchAttackers.style.gap = '15%'; // Deixa eles bem mais próximos na grande área
            } else {
                pitchAttackers.style.justifyContent = 'space-evenly';
                pitchAttackers.style.gap = '4px';
            }

document.getElementById('pitch-goalkeepers').innerHTML = selected.filter(p => p.position === 'GOLEIRO').map(renderPitchPlayer).join('');
            document.getElementById('pitch-defenders').innerHTML = defenders.map(renderPitchPlayer).join('');
            document.getElementById('pitch-midfielders').innerHTML = selected.filter(p => p.position === 'MEIO-CAMPISTA').map(renderPitchPlayer).join('');
            
            if (typeof window.reportHeight === 'function') setTimeout(window.reportHeight, 100);
        }

window.resetApp = function() {
            state.selectedPlayers.clear();
            document.querySelectorAll('.player-card').forEach(el => el.classList.remove('selected'));
            
            document.getElementById('final-view').classList.add('hidden');
            document.getElementById('selection-view').classList.remove('hidden');
            document.getElementById('app-header').classList.remove('hidden');
            
            if (window.parent) window.parent.postMessage({ type: 'sim-scroll-top' }, '*');
            updateUI();
            if (typeof window.reportHeight === 'function') setTimeout(window.reportHeight, 100);
        };

async function handleNativeShare() {
            const text = getSquadText();
            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            
            if (isMobile && navigator.share) {
                try { 
                    await navigator.share({ title: 'Minha Seleção da Copa', text: text, url: window.location.href }); 
                } catch (err) {
                    console.log("Compartilhamento nativo cancelado ou falhou", err);
                }
            } else {
                handleClipboardCopy();
            }
        }

function handleClipboardCopy() {
            const text = getSquadText();
            const textArea = document.createElement("textarea");
            textArea.value = text;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);
            showAlert("Seleção copiada para a área de transferência!");
        }

function init() {
            const players = parseCSV(playersData);
            const container = document.getElementById('player-lists');
            if(!container) return;

section.innerHTML = `
                    <h2 class="text-xl sm:text-2xl font-black italic tracking-tighter border-l-8 border-main-blue pl-4 mb-4 sm:mb-6 uppercase text-white">
                        ${POS_PLURAL[pos].toUpperCase()} <span class="text-[10px] text-gray-500 font-bold ml-2 tracking-normal not-italic">${limitText}</span>
                    </h2>
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 sm:gap-4">
                        ${filtered.map(p => `
                            <div data-player-id="${p.id}" onclick="togglePlayer('${p.id}')" class="player-card bg-[#1a252a] p-3 sm:p-4 rounded-xl sm:rounded-[20px] flex flex-col items-center text-center shadow-lg">
                                <div class="w-16 h-16 sm:w-20 sm:h-20 mb-2 sm:mb-3 relative">
                                    <img decoding="async" src="${p.image}" alt="${p.name}" class="w-full h-full rounded-full bg-[#151E22] border-2 border-gray-800 object-cover shadow-inner" onerror="this.src='https://imagecache.365scores.com/image/upload/f_png,w_80,h_80,c_limit,q_auto:eco,dpr_2/Athletes/NationalTeam/0'">
                                </div>
                                <div class="font-black text-xs sm:text-sm uppercase italic tracking-tighter text-white leading-tight">${p.name}</div>
                                <div class="text-[9px] sm:text-[10px] text-gray-500 font-bold uppercase mt-1 truncate w-full">${p.team}</div>
                            </div>
                        `).join('')}
                    </div>
                `;
                container.appendChild(section);
            });

document.getElementById('finalize-btn').addEventListener('click', showFinalSquad);

updateUI();
        }
        
        window.addEventListener('load', init);