A Copa do Mundo de 2026 começou com o número recorde de 48 seleções, mas somente 16 delas ainda estão vivas no torneio e apenas uma vai levantar a taça no dia 19 de julho.

As oitavas de final do Mundial começaram neste sábado (4) e vão apontar as duas primeiras classificadas para as quartas de final.

Algumas favorita já ficaram pelo caminho, como Alemanha e Holanda.

Único pentacampeão mundial, o Brasil encara a Noruega neste domingo (5) para manter vivo o sonho do hexa. E pra você, quem será o campeão mundial?

Simule os resultados das oitavas de final e os confrontos até a decisão da Copa de 2026.

.cwc2026 {
–bg: #ffffff;
–ink: #1c1c1c;
–dim: #8f958d;
–line: #d7dad3;
–line-fill: #eceee9;
–green: #1ea64c;
–green-dark: #14833b;
–green-soft: #eaf8ef;
–gold: #d9a53d;
–gold-dark: #8a6416;
–gold-soft: #fbf1dc;
background: var(–bg);
color: var(–ink);
font-family: system-ui, -apple-system, “Segoe UI”, Helvetica, Arial, sans-serif;
padding: 26px 18px 34px;
border-radius: 10px;
box-sizing: border-box;
max-width: 100%;
border: 1px solid var(–line);
touch-action: manipulation;
}
.cwc2026 *, .cwc2026 *::before, .cwc2026 *::after { box-sizing: border-box; }

.cwc2026 .cwc-head { text-align: center; margin-bottom: 18px; }
.cwc2026 .cwc-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(–green-dark);
border: 1px solid var(–green);
background: var(–green-soft);
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 12px;
}
.cwc2026 h2 {
margin: 0;
font-size: clamp(20px, 4vw, 28px);
font-weight: 800;
letter-spacing: 0.01em;
text-wrap: balance;
color: var(–ink);
}

.cwc2026 .cwc-toolbar {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin: 16px 0 22px;
flex-wrap: wrap;
}
.cwc2026 .cwc-btn {
font: inherit;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.02em;
color: #ffffff;
background: var(–green);
border: none;
border-radius: 7px;
padding: 10px 16px;
cursor: pointer;
transition: background 0.12s ease, transform 0.12s ease;
}
.cwc2026 .cwc-btn:hover { background: var(–green-dark); }
.cwc2026 .cwc-btn:active { transform: translateY(1px); }
.cwc2026 .cwc-btn:focus-visible { outline: 3px solid var(–green-dark); outline-offset: 2px; }
.cwc2026 .cwc-btn.cwc-ghost {
background: #ffffff;
color: var(–ink);
border: 1px solid var(–line);
}
.cwc2026 .cwc-btn.cwc-ghost:hover { border-color: var(–dim); background: #fafafa; }

.cwc2026 .cwc-scroll {
overflow: hidden;
position: relative;
}
.cwc2026 .cwc-wrap {
position: relative;
width: max-content;
padding: 26px 4px 6px;
transform-origin: top left;
}
.cwc2026 .cwc-connectors {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}

.cwc2026 .cwc-bracket {
display: flex;
align-items: stretch;
position: relative;
z-index: 1;
}
.cwc2026 .cwc-chain {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 84px;
flex: 0 0 84px;
margin: 0 10px;
height: 620px;
position: relative;
}
.cwc2026 .cwc-round-label {
position: absolute;
top: -19px;
left: 0;
width: 100%;
text-align: center;
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(–dim);
white-space: nowrap;
}

.cwc2026 .cwc-match {
background: #ffffff;
border: 1px solid var(–line);
border-radius: 7px;
overflow: hidden;
height: 64px;
display: flex;
flex-direction: column;
}
.cwc2026 .cwc-slot {
display: flex;
align-items: center;
gap: 5px;
padding: 0 6px;
height: 32px;
font-size: 10.5px;
background: #ffffff;
border: none;
width: 100%;
text-align: left;
cursor: pointer;
font-family: inherit;
transition: background 0.12s ease, opacity 0.12s ease;
}
.cwc2026 .cwc-slot.cwc-mirror { flex-direction: row-reverse; }
.cwc2026 .cwc-slot + .cwc-slot { border-top: 1px solid var(–line); }
.cwc2026 .cwc-slot:hover { background: var(–green-soft); }
.cwc2026 .cwc-slot.cwc-empty { cursor: default; }
.cwc2026 .cwc-slot.cwc-empty:hover { background: #ffffff; }
.cwc2026 .cwc-slot.cwc-winner { background: var(–green-soft); }
.cwc2026 .cwc-slot.cwc-loser { opacity: 0.5; }
.cwc2026 .cwc-slot.cwc-locked { cursor: default; }
.cwc2026 .cwc-slot.cwc-locked:hover { background: #ffffff; }
.cwc2026 .cwc-slot.cwc-locked.cwc-winner:hover { background: var(–green-soft); }

.cwc2026 .cwc-flagwrap {
width: 26px;
height: 18px;
border-radius: 4px;
overflow: hidden;
flex: none;
border: 1.5px solid var(–line);
background: var(–line-fill);
}
.cwc2026 .cwc-flagwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cwc2026 .cwc-slot.cwc-winner .cwc-flagwrap {
border-color: var(–green);
box-shadow: 0 0 0 2px var(–green-soft);
}
.cwc2026 .cwc-slot.cwc-empty .cwc-flagwrap { background: var(–line-fill); }

.cwc2026 .cwc-code {
font-weight: 700;
letter-spacing: 0.01em;
text-transform: uppercase;
color: var(–ink);
white-space: nowrap;
flex: 1 1 auto;
font-size: 10.5px;
}
.cwc2026 .cwc-slot.cwc-winner .cwc-code { color: var(–green-dark); }
.cwc2026 .cwc-slot.cwc-empty .cwc-code { color: var(–dim); font-weight: 500; }

.cwc2026 .cwc-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
width: 130px;
flex: 0 0 130px;
height: 620px;
margin: 0 10px;
}
.cwc2026 .cwc-center-msg {
text-align: center;
font-size: 10.5px;
font-weight: 600;
line-height: 1.4;
color: var(–green-dark);
max-width: 118px;
}
.cwc2026 .cwc-center .cwc-match { width: 84px; }
.cwc2026 .cwc-champ {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
border: 1.5px dashed var(–line);
border-radius: 12px;
padding: 12px 8px;
width: 108px;
text-align: center;
background: #fbfbfa;
}
.cwc2026 .cwc-champ.cwc-filled {
border: 1.5px solid var(–gold);
background: var(–gold-soft);
box-shadow: 0 6px 16px -8px rgba(217, 165, 61, 0.55);
}
.cwc2026 .cwc-champ-icon { font-size: 20px; line-height: 1; }
.cwc2026 .cwc-champ-label {
font-size: 8px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(–dim);
}
.cwc2026 .cwc-champ.cwc-filled .cwc-champ-label { color: var(–gold-dark); }
.cwc2026 .cwc-champ-flagwrap {
width: 34px;
height: 24px;
border-radius: 5px;
overflow: hidden;
border: 1.5px solid var(–line);
background: var(–line-fill);
}
.cwc2026 .cwc-champ-flagwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cwc2026 .cwc-champ.cwc-filled .cwc-champ-flagwrap { border-color: var(–gold); }
.cwc2026 .cwc-champ-name {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
color: var(–dim);
}
.cwc2026 .cwc-champ.cwc-filled .cwc-champ-name { color: var(–gold-dark); }

.cwc2026 .cwc-logo {
display: block !important;
height: 30px !important;
width: auto !important;
max-width: 120px !important;
max-height: 30px !important;
object-fit: contain;
margin: 18px auto 0 !important;
}

@media (max-width: 640px) {
.cwc2026 { padding: 16px 8px 20px; }
.cwc2026 .cwc-scroll-hint {
display: block;
text-align: center;
font-size: 11px;
font-weight: 600;
color: var(–green-dark);
margin: 0 0 10px;
}
.cwc2026 .cwc-scroll {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(–green) var(–line-fill);
}
.cwc2026 .cwc-scroll::after {
content: ”;
position: absolute;
top: 0;
right: 0;
bottom: 8px;
width: 26px;
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.95));
pointer-events: none;
}
.cwc2026 .cwc-scroll::-webkit-scrollbar { height: 7px; }
.cwc2026 .cwc-scroll::-webkit-scrollbar-track { background: var(–line-fill); border-radius: 999px; }
.cwc2026 .cwc-scroll::-webkit-scrollbar-thumb { background: var(–green); border-radius: 999px; }
.cwc2026 .cwc-chain { width: 78px; flex: 0 0 78px; margin: 0 8px; height: 560px; }
.cwc2026 .cwc-round-label { font-size: 8.5px; top: -16px; letter-spacing: 0.05em; }
.cwc2026 .cwc-match { height: 60px; border-radius: 7px; }
.cwc2026 .cwc-slot { height: 30px; font-size: 10.5px; gap: 5px; padding: 0 6px; }
.cwc2026 .cwc-flagwrap { width: 24px; height: 17px; border-radius: 4px; }
.cwc2026 .cwc-code { font-size: 10.5px; }
.cwc2026 .cwc-center { width: 108px; flex: 0 0 108px; margin: 0 8px; height: 560px; gap: 8px; }
.cwc2026 .cwc-center-msg { font-size: 9.5px; max-width: 98px; }
.cwc2026 .cwc-center .cwc-match { width: 78px; }
.cwc2026 .cwc-champ { width: 90px; padding: 10px 7px; gap: 4px; }
.cwc2026 .cwc-champ-icon { font-size: 17px; }
.cwc2026 .cwc-champ-label { font-size: 7px; }
.cwc2026 .cwc-champ-flagwrap { width: 28px; height: 20px; }
.cwc2026 .cwc-champ-name { font-size: 9.5px; }
}
@media (min-width: 641px) {
.cwc2026 .cwc-scroll-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
.cwc2026 .cwc-btn, .cwc2026 .cwc-slot { transition: none; }
}

(function () {
var BASE = ‘https://uploads.folhavitoria.com.br/imagens/2026/07/’;
var TEAMS = [
{ code: ‘ALE’, name: ‘Alemanha’, img: BASE + ‘Alemanha-scaled.png’ },
{ code: ‘PAR’, name: ‘Paraguai’, img: BASE + ‘Paraguai-scaled.png’ },
{ code: ‘FRA’, name: ‘Franu00E7a’, img: BASE + ‘Franca-scaled.png’ },
{ code: ‘SUE’, name: ‘Suu00E9cia’, img: BASE + ‘suecia-scaled.png’ },
{ code: ‘AFS’, name: ‘u00C1frica do Sul’, img: BASE + ‘Africa_do_Sul-scaled.png’ },
{ code: ‘CAN’, name: ‘Canadu00E1’, img: BASE + ‘Canada-scaled.png’ },
{ code: ‘HOL’, name: ‘Holanda’, img: BASE + ‘Holanda-scaled.png’ },
{ code: ‘MAR’, name: ‘Marrocos’, img: BASE + ‘Marrocos-scaled.png’ },
{ code: ‘POR’, name: ‘Portugal’, img: BASE + ‘portugal-scaled.png’ },
{ code: ‘CRO’, name: ‘Crou00E1cia’, img: BASE + ‘Croacia-scaled.png’ },
{ code: ‘ESP’, name: ‘Espanha’, img: BASE + ‘Espanha-scaled.png’ },
{ code: ‘AUT’, name: ‘u00C1ustria’, img: BASE + ‘Austria-scaled.png’ },
{ code: ‘EUA’, name: ‘Estados Unidos’, img: BASE + ‘Estados_Unidos.png’ },
{ code: ‘BOS’, name: ‘Bu00F3snia e Herzegovina’, img: BASE + ‘Bosnia.png’ },
{ code: ‘BEL’, name: ‘Bu00E9lgica’, img: BASE + ‘Belgica.png’ },
{ code: ‘SEN’, name: ‘Senegal’, img: BASE + ‘Senegal.png’ },
{ code: ‘BRA’, name: ‘Brasil’, img: BASE + ‘Brasil_rgYHF6Z.png’ },
{ code: ‘JAP’, name: ‘Japu00E3o’, img: BASE + ‘Japao.png’ },
{ code: ‘CDM’, name: ‘Costa do Marfim’, img: BASE + ‘Costa_do_Marfim.png’ },
{ code: ‘NOR’, name: ‘Noruega’, img: BASE + ‘Noruega.png’ },
{ code: ‘MEX’, name: ‘Mu00E9xico’, img: BASE + ‘Mexico.png’ },
{ code: ‘EQU’, name: ‘Equador’, img: BASE + ‘Equador.png’ },
{ code: ‘ING’, name: ‘Inglaterra’, img: BASE + ‘Inglaterra.png’ },
{ code: ‘RDC’, name: ‘RD Congo’, img: BASE + ‘RD_Congo.png’ },
{ code: ‘ARG’, name: ‘Argentina’, img: BASE + ‘Argentina.png’ },
{ code: ‘CAB’, name: ‘Cabo Verde’, img: BASE + ‘Cabo_Verde.png’ },
{ code: ‘AUS’, name: ‘Austru00E1lia’, img: BASE + ‘Australia.png’ },
{ code: ‘EGI’, name: ‘Egito’, img: BASE + ‘Egito.png’ },
{ code: ‘SUI’, name: ‘Suu00EDu00E7a’, img: BASE + ‘Suica.png’ },
{ code: ‘AGL’, name: ‘Argu00E9lia’, img: BASE + ‘Argelia.png’ },
{ code: ‘COL’, name: ‘Colu00F4mbia’, img: BASE + ‘Colombia.png’ },
{ code: ‘GAN’, name: ‘Gana’, img: BASE + ‘Gana.png’ }
];

var ROUND_LABELS = [‘Fase de 32’, ‘Oitavas de Final’, ‘Quartas de Final’, ‘Semifinal’];
var GREEN = ‘#1ea64c’;
var GRAY = ‘#d7dad3’;
var rounds = [];

// Resultados reais da fase de 32 (0 = venceu o time “a”, 1 = venceu o time “b”), na ordem dos confrontos.
var WINNERS_32 = [1, 0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0];

function buildRounds() {
rounds = [];
var count = TEAMS.length / 2;
for (var r = 0; r < 5; r++) {
var matches = [];
for (var i = 0; i < count; i++) {
if (r === 0) {
matches.push({ a: TEAMS[i * 2], b: TEAMS[i * 2 + 1], winner: null });
} else {
matches.push({ a: null, b: null, winner: null });
}
}
rounds.push(matches);
count = count / 2;
}
applyRoundOf32Results();
}

function applyRoundOf32Results() {
for (var i = 0; i < WINNERS_32.length; i++) {
var match = rounds[0][i];
var side = WINNERS_32[i] === 0 ? 'a' : 'b';
match.winner = match[side];
var nextIdx = Math.floor(i / 2);
var slot = i % 2 === 0 ? 'a' : 'b';
rounds[1][nextIdx][slot] = match.winner;
}
}

function clearDownstream(r, i) {
var match = rounds[r][i];
if (match.winner) {
match.winner = null;
if (r + 1 < rounds.length) {
var nextIdx = Math.floor(i / 2);
var slot = i % 2 === 0 ? 'a' : 'b';
rounds[r + 1][nextIdx][slot] = null;
clearDownstream(r + 1, nextIdx);
}
}
}

function setWinner(r, i, side) {
var match = rounds[r][i];
var team = match[side];
if (!team) return;
match.winner = team;
if (r + 1 < rounds.length) {
var nextIdx = Math.floor(i / 2);
var slot = i % 2 === 0 ? 'a' : 'b';
var nextMatch = rounds[r + 1][nextIdx];
if (nextMatch[slot] !== team) {
nextMatch[slot] = team;
clearDownstream(r + 1, nextIdx);
}
}
refresh();
}

var matchRefs = [];
var finalRef = null;
var champRefs = null;
var linePool = [];
var lineUsed = 0;

function makeSlotRefs(mirror) {
var el = document.createElement('div');
el.className = 'cwc-slot' + (mirror ? ' cwc-mirror' : '');
var code = document.createElement('span');
code.className = 'cwc-code';
var flagwrap = document.createElement('span');
flagwrap.className = 'cwc-flagwrap';
var img = document.createElement('img');
img.crossOrigin = 'anonymous';
flagwrap.appendChild(img);
el.appendChild(code);
el.appendChild(flagwrap);
return { el: el, code: code, flagwrap: flagwrap, img: img };
}

function buildMatchBox(r, i, mirror) {
var box = document.createElement('div');
box.className = 'cwc-match';
var a = makeSlotRefs(mirror);
var b = makeSlotRefs(mirror);
if (r === 0) {
a.el.classList.add('cwc-locked');
b.el.classList.add('cwc-locked');
} else {
a.el.addEventListener('click', function () { setWinner(r, i, 'a'); });
b.el.addEventListener('click', function () { setWinner(r, i, 'b'); });
}
box.appendChild(a.el);
box.appendChild(b.el);
matchRefs[r][i] = { box: box, a: a, b: b };
return box;
}

function buildChainDOM(half) {
var wrapper = document.createElement('div');
wrapper.style.display = 'flex';
var order = half === 'left' ? [0, 1, 2, 3] : [3, 2, 1, 0];
order.forEach(function (r) {
var chain = document.createElement('div');
chain.className = 'cwc-chain';

var label = document.createElement('div');
label.className = 'cwc-round-label';
label.textContent = ROUND_LABELS[r];
chain.appendChild(label);

var count = rounds[r].length;
var halfLen = count / 2;
var start = half === 'left' ? 0 : halfLen;
for (var local = 0; local < halfLen; local++) {
var globalIndex = start + local;
chain.appendChild(buildMatchBox(r, globalIndex, half === 'right'));
}
wrapper.appendChild(chain);
});
return wrapper;
}

function buildStaticDOM() {
matchRefs = [];
for (var r = 0; r < 5; r++) matchRefs[r] = [];

var bracket = document.getElementById('cwc-bracket');
bracket.innerHTML = '';

var leftWrapper = buildChainDOM('left');
var rightWrapper = buildChainDOM('right');

var center = document.createElement('div');
center.className = 'cwc-center';

var msg = document.createElement('div');
msg.className = 'cwc-center-msg';
msg.textContent = 'A fase de 32 ju00E1 aconteceu. Clique nos vencedores a partir das oitavas de final para fazer a sua simulau00E7u00E3o.';
center.appendChild(msg);

var finalBox = buildMatchBox(4, 0, false);
center.appendChild(finalBox);
finalRef = matchRefs[4][0];

var champ = document.createElement('div');
champ.className = 'cwc-champ';
var champIcon = document.createElement('span');
champIcon.className = 'cwc-champ-icon';
var champLabel = document.createElement('span');
champLabel.className = 'cwc-champ-label';
champLabel.textContent = 'Campeu00E3o';
var champFlagwrap = document.createElement('span');
champFlagwrap.className = 'cwc-champ-flagwrap';
var champImg = document.createElement('img');
champImg.crossOrigin = 'anonymous';
champFlagwrap.appendChild(champImg);
var champName = document.createElement('span');
champName.className = 'cwc-champ-name';
champ.appendChild(champIcon);
champ.appendChild(champLabel);
champ.appendChild(champFlagwrap);
champ.appendChild(champName);
center.appendChild(champ);
champRefs = { el: champ, icon: champIcon, flagwrap: champFlagwrap, img: champImg, name: champName };

bracket.appendChild(leftWrapper);
bracket.appendChild(center);
bracket.appendChild(rightWrapper);
}

function updateSlotRef(ref, match, side) {
var team = match[side];
var el = ref.el;
el.classList.remove('cwc-empty', 'cwc-winner', 'cwc-loser');
if (!team) {
el.classList.add('cwc-empty');
ref.code.textContent = '';
ref.img.style.display = 'none';
el.removeAttribute('title');
return;
}
var isWinner = match.winner === team;
var isLoser = false;
if (match.winner) { isLoser = match.winner !== team; }
if (isWinner) el.classList.add('cwc-winner');
if (isLoser) el.classList.add('cwc-loser');
ref.code.textContent = team.code;
ref.img.style.display = '';
ref.img.src = team.img;
ref.img.alt = team.code;
el.title = team.name;
}

function updateChampion() {
var champion = rounds[4][0].winner;
champRefs.el.classList.remove('cwc-filled');
if (champion) champRefs.el.classList.add('cwc-filled');
champRefs.icon.textContent = champion ? 'uD83CuDFC6' : 'u26BD';
if (champion) {
champRefs.img.style.display = '';
champRefs.img.src = champion.img;
champRefs.img.alt = champion.code;
} else {
champRefs.img.style.display = 'none';
}
champRefs.name.textContent = champion ? champion.name : 'u2014';
}

function updateAllMatches() {
for (var r = 0; r < 5; r++) {
for (var i = 0; i < rounds[r].length; i++) {
var match = rounds[r][i];
var ref = matchRefs[r][i];
updateSlotRef(ref.a, match, 'a');
updateSlotRef(ref.b, match, 'b');
}
}
updateChampion();
}

function refresh() {
updateAllMatches();
requestAnimationFrame(function () {
var wrapEl = document.getElementById('cwc-wrap');
wrapEl.style.transform = 'none';
drawConnectors();
fitToWidth();
});
}

var MOBILE_BREAKPOINT = 640;

function fitToWidth() {
var scrollEl = document.querySelector('#cwc2026-root .cwc-scroll');
var wrapEl = document.getElementById('cwc-wrap');
if (window.innerWidth availableWidth) {
ratio = availableWidth / naturalWidth;
}
wrapEl.style.transform = ‘scale(‘ + ratio + ‘)’;
scrollEl.style.height = (naturalHeight * ratio) + ‘px’;
}

function getLine() {
var d;
if (lineUsed < linePool.length) {
d = linePool[lineUsed];
d.style.display = 'block';
} else {
d = document.createElement('div');
d.style.position = 'absolute';
document.getElementById('cwc-connectors').appendChild(d);
linePool.push(d);
}
lineUsed++;
return d;
}

function drawConnectors() {
var wrap = document.getElementById('cwc-wrap');
var wrapRect = wrap.getBoundingClientRect();
lineUsed = 0;

function hLine(x1, x2, y, color, dashed) {
var d = getLine();
d.style.left = (Math.min(x1, x2) – wrapRect.left) + 'px';
d.style.top = (y – wrapRect.top) + 'px';
d.style.width = Math.abs(x2 – x1) + 'px';
d.style.height = '0';
d.style.borderTop = '2px ' + (dashed ? 'dashed' : 'solid') + ' ' + color;
d.style.borderLeft = '0';
}
function vLine(x, y1, y2, color, dashed) {
var d = getLine();
d.style.left = (x – wrapRect.left) + 'px';
d.style.top = (Math.min(y1, y2) – wrapRect.top) + 'px';
d.style.width = '0';
d.style.height = Math.abs(y2 – y1) + 'px';
d.style.borderLeft = '2px ' + (dashed ? 'dashed' : 'solid') + ' ' + color;
d.style.borderTop = '0';
}
function midY(rect) { return rect.top + rect.height / 2; }

function connectHalf(half, direction) {
for (var r = 1; r <= 3; r++) {
var countPrev = rounds[r – 1].length;
var halfLenPrev = countPrev / 2;
var countCur = rounds[r].length;
var halfLenCur = countCur / 2;
var startPrev = half === 'left' ? 0 : halfLenPrev;
var startCur = half === 'left' ? 0 : halfLenCur;
for (var localI = 0; localI < halfLenCur; localI++) {
var globalCur = startCur + localI;
var globalPrev1 = startPrev + localI * 2;
var globalPrev2 = startPrev + localI * 2 + 1;

var s1Box = matchRefs[r – 1][globalPrev1].box;
var s2Box = matchRefs[r – 1][globalPrev2].box;
var mBox = matchRefs[r][globalCur].box;
var s1Data = rounds[r – 1][globalPrev1];
var s2Data = rounds[r – 1][globalPrev2];
var mData = rounds[r][globalCur];

var s1Rect = s1Box.getBoundingClientRect();
var s2Rect = s2Box.getBoundingClientRect();
var mRect = mBox.getBoundingClientRect();

var srcX = direction === 'ltr' ? s1Rect.right : s1Rect.left;
var tgtX = direction === 'ltr' ? mRect.left : mRect.right;
var midX = (srcX + tgtX) / 2;
var y1 = midY(s1Rect), y2 = midY(s2Rect), yTarget = midY(mRect);
var mergeColor = mData.winner ? GREEN : GRAY;

hLine(srcX, midX, y1, s1Data.winner ? GREEN : GRAY, !s1Data.winner);
hLine(srcX, midX, y2, s2Data.winner ? GREEN : GRAY, !s2Data.winner);
vLine(midX, y1, y2, mergeColor, !mData.winner);
hLine(midX, tgtX, yTarget, mergeColor, !mData.winner);
}
}
}

connectHalf('left', 'ltr');
connectHalf('right', 'rtl');

var leftSemiBox = matchRefs[3][0].box;
var rightSemiBox = matchRefs[3][1].box;
var leftSemiData = rounds[3][0];
var rightSemiData = rounds[3][1];
var slotA = finalRef.a.el;
var slotB = finalRef.b.el;

var lRect = leftSemiBox.getBoundingClientRect();
var slotARect = slotA.getBoundingClientRect();
var midXL = (lRect.right + slotARect.left) / 2;
var yL = midY(lRect), ySlotA = midY(slotARect);
hLine(lRect.right, midXL, yL, leftSemiData.winner ? GREEN : GRAY, !leftSemiData.winner);
vLine(midXL, yL, ySlotA, leftSemiData.winner ? GREEN : GRAY, !leftSemiData.winner);
hLine(midXL, slotARect.left, ySlotA, leftSemiData.winner ? GREEN : GRAY, !leftSemiData.winner);

var rRect = rightSemiBox.getBoundingClientRect();
var slotBRect = slotB.getBoundingClientRect();
var midXR = (slotBRect.right + rRect.left) / 2;
var yR = midY(rRect), ySlotB = midY(slotBRect);
hLine(slotBRect.right, midXR, ySlotB, rightSemiData.winner ? GREEN : GRAY, !rightSemiData.winner);
vLine(midXR, ySlotB, yR, rightSemiData.winner ? GREEN : GRAY, !rightSemiData.winner);
hLine(midXR, rRect.left, yR, rightSemiData.winner ? GREEN : GRAY, !rightSemiData.winner);

for (var k = lineUsed; k < linePool.length; k++) { linePool[k].style.display = 'none'; }
}

document.querySelector('#cwc2026-root [data-action="reset"]').addEventListener('click', function () {
buildRounds();
refresh();
});

document.querySelector('#cwc2026-root [data-action="save"]').addEventListener('click', function () {
if (typeof html2canvas === 'undefined') {
alert('Nu00E3o foi possu00EDvel carregar a ferramenta de exportau00E7u00E3o de imagem. Verifique sua conexu00E3o e tente novamente.');
return;
}
var root = document.getElementById('cwc2026-root');
html2canvas(root, { backgroundColor: '#ffffff', useCORS: true, scale: 2 }).then(function (canvas) {
var link = document.createElement('a');
link.download = 'meu-chaveamento-copa-2026.png';
link.href = canvas.toDataURL('image/png');
link.click();
}).catch(function () {
alert('Nu00E3o foi possu00EDvel gerar a imagem. Isso pode ocorrer se as imagens das bandeiras nu00E3o permitirem exportau00E7u00E3o entre domu00EDnios (CORS).');
});
});

var lastWinWidth = window.innerWidth;
var resizeTimer = null;
window.addEventListener('resize', function () {
if (window.innerWidth === lastWinWidth) return;
lastWinWidth = window.innerWidth;
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(refresh, 150);
});

buildRounds();
buildStaticDOM();
refresh();
})();

FONTE: Folha Vitória