.elementor-2682 .elementor-element.elementor-element-2538fc9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;overflow:visible;}/* Start custom CSS for html, class: .elementor-element-8428921 */.card {
width: 70px;
height: 70px;
margin: 5px;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: transform 0.5s;
position: relative;
perspective: 1000px;
}

.card img {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

.card .back {
transform: rotateY(180deg);
}

.card.flip .front {
transform: rotateY(180deg);
}

.card.flip .back {
transform: rotateY(360deg);
}

#message {
text-align: center;
}

#message h2, #lossMessage h2 {
color: green;
font-size: 1.5em;
}

#lossMessage h2 {
color: red;
}/* End custom CSS */
/* Start custom CSS */let cards = document.querySelectorAll('.card');
let firstCard, secondCard;
let lockBoard = false;
let matchedPairs = 0;
const totalPairs = 8;
let memorizationTime = 5000; // 05 segundos para memorização
let playTime = 30000; // 30 segundos para jogar
let timerInterval;
let memorizationPhase = true;

// Embaralhamento das cartas
function shuffleCards() {
let shuffledCards = Array.from(cards);
shuffledCards.sort(() => Math.random() - 0.5);
shuffledCards.forEach(card => document.getElementById('game').appendChild(card));
}

// Mostrar as cartas durante a fase de memorização
function startMemorizationPhase() {
let memorizationTimeLeft = memorizationTime / 1000;
document.getElementById('timer').textContent = `Memorize: ${memorizationTimeLeft}s`;
document.getElementById('timer').style.display = 'block';

let memorizationInterval = setInterval(() => {
    memorizationTimeLeft--;
    document.getElementById('timer').textContent = `Memorize: ${memorizationTimeLeft}s`;

    if (memorizationTimeLeft <= 0) {
     clearInterval(memorizationInterval);
     cards.forEach(card => card.classList.remove('flip'));
     memorizationPhase = false;
     startPlayPhase();
    }
}, 1000);

cards.forEach(card => card.classList.add('flip'));
}

// Iniciar a fase de jogo
function startPlayPhase() {
let timeLeft = playTime;
document.getElementById('timer').textContent = `Tempo restante: ${Math.floor(timeLeft / 1000)}s`;

timerInterval = setInterval(() => {
    timeLeft -= 1000;
    document.getElementById('timer').textContent = `Tempo restante: ${Math.floor(timeLeft / 1000)}s`;
    
    if (timeLeft <= 0) {
     clearInterval(timerInterval);
     endGame(false);
    }
}, 1000);
}

// Lógica do jogo
function flipCard() {
if (lockBoard || this === firstCard) return;

this.classList.add('flip');

if (!firstCard) {
    firstCard = this;
    return;
}

secondCard = this;
lockBoard = true;

checkForMatch();
}

function checkForMatch() {
if (firstCard.dataset.object === secondCard.dataset.object) {
    matchedPairs++;
    resetBoard();
    if (matchedPairs === totalPairs) {
     clearInterval(timerInterval);
     endGame(true);
    }
} else {
    setTimeout(() => {
     firstCard.classList.remove('flip');
     secondCard.classList.remove('flip');
     resetBoard();
    }, 1000);
}
}

function resetBoard() {
[firstCard, secondCard] = [null, null];
lockBoard = false;
}

function endGame(won) {
document.getElementById('game').style.display = 'none';
document.getElementById('timer').style.display = 'none';

if (won) {
    document.getElementById('message').style.display = 'block';
    startConfetti();
} else {
    document.getElementById('lossMessage').style.display = 'block';
    setTimeout(() => {
     window.location.href = 'https://casidigital.com.br/jogodamemoria01';
    }, 2000); // Tempo para mostrar a mensagem antes de redirecionar
}
}

// Função para iniciar a animação de confetes
function startConfetti() {
let canvas = document.getElementById("confettiCanvas");
canvas.style.display = "block";
let ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let confettiParticles = [];
for (let i = 0; i < 100; i++) {
    confettiParticles.push({
     x: Math.random() * canvas.width,
     y: Math.random() * canvas.height - canvas.height,
     r: Math.random() * 10 + 2,
     d: Math.random() * 10,
     color: `hsl(${Math.random() * 360}, 100%, 50%)`,
     tilt: Math.random() * 10 - 10
    });
}

function drawConfetti() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    confettiParticles.forEach((p, index) => {
     ctx.beginPath();
     ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, false);
     ctx.fillStyle = p.color;
     ctx.fill();
     p.y += 3 + p.d / 10;
     p.x += Math.sin(p.tilt) * 2;
     if (p.y > canvas.height) {
        confettiParticles[index] = { ...p, y: -p.r };
     }
    });
    requestAnimationFrame(drawConfetti);
}

drawConfetti();
}

// Adicionar evento de clique às cartas
cards.forEach(card => card.addEventListener('click', flipCard));

// Função para iniciar o jogo
function startGame() {
document.getElementById('welcomeScreen').style.display = 'none';
document.getElementById('game').style.display = 'flex';
shuffleCards();
startMemorizationPhase();
}

// Adicionar evento de clique ao botão de iniciar jogo
document.getElementById('startButton').addEventListener('click', startGame);/* End custom CSS */