<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quebra-Cabeça Mágico das Princesas</title>
  <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap');

    :root {
      --primary-pink: #ff66c4;
      --accent-yellow: #ffde59;
      --purple-bg: #8c52ff;
      --mint-green: #7ed957;
      --sky-blue: #5271ff;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Fredoka', sans-serif;
      user-select: none;
    }

    body {
      background: radial-gradient(circle, #ff9ebb 0%, var(--purple-bg) 100%);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px;
      overflow-x: hidden;
    }

    header {
      text-align: center;
      margin-bottom: 15px;
    }

    h1 {
      font-size: 2.2rem;
      color: var(--accent-yellow);
      text-shadow: 4px 4px 0px #ff3b00, -2px -2px 0px #000;
      letter-spacing: 1px;
    }

    p.subtitle {
      color: #fff;
      font-size: 1.1rem;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }

    /* Game Container */
    .game-board {
      background: rgba(255, 255, 255, 0.9);
      border: 6px solid var(--accent-yellow);
      border-radius: 25px;
      padding: 15px;
      box-shadow: 0 15px 30px rgba(0,0,0,0.3);
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
    }

    /* Puzzle Area */
    .puzzle-grid {
      width: 300px;
      height: 300px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 6px;
      background: #ffd6e8;
      border: 4px dashed var(--primary-pink);
      border-radius: 18px;
      padding: 6px;
      position: relative;
    }

    .puzzle-slot {
      background: rgba(255, 255, 255, 0.5);
      border-radius: 12px;
      border: 2px dashed #ff91a4;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* Pieces Bench */
    .pieces-container {
      display: flex;
      gap: 12px;
      justify-content: center;
      width: 100%;
      min-height: 140px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 20px;
      padding: 10px;
      flex-wrap: wrap;
    }

    .piece {
      width: 135px;
      height: 135px;
      border-radius: 15px;
      cursor: grab;
      border: 3px solid #fff;
      box-shadow: 0 6px 12px rgba(0,0,0,0.2);
      transition: transform 0.2s, box-shadow 0.2s;
      background-size: 270px 270px;
      background-repeat: no-repeat;
    }

    .piece:active {
      cursor: grabbing;
      transform: scale(1.08) rotate(3deg);
    }

    /* Character Selection */
    .selector {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;
    }

    .selector-btn {
      background: #fff;
      border: 3px solid var(--sky-blue);
      border-radius: 15px;
      padding: 8px 12px;
      font-size: 1.5rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .selector-btn.active {
      background: var(--accent-yellow);
      border-color: var(--primary-pink);
      transform: scale(1.15);
    }

    /* Custom Dialog */
    .win-banner {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--accent-yellow);
      border: 6px solid var(--primary-pink);
      border-radius: 30px;
      padding: 25px;
      text-align: center;
      box-shadow: 0 0 50px rgba(0,0,0,0.5);
      z-index: 100;
      width: 85%;
      max-width: 320px;
    }

    .win-banner h2 {
      font-size: 2rem;
      color: #d6006e;
      margin-bottom: 10px;
    }

    .btn-next {
      background: var(--mint-green);
      border: 4px solid #fff;
      color: #005214;
      font-size: 1.3rem;
      font-weight: 700;
      padding: 12px 24px;
      border-radius: 20px;
      cursor: pointer;
      box-shadow: 0 6px 0 #008a22;
      margin-top: 15px;
    }

    .btn-next:active {
      transform: translateY(4px);
      box-shadow: 0 2px 0 #008a22;
    }
  </style>
</head>
<body>

  <header>
    <h1>QUEBRA-CABEÇA MÁGICO 👑</h1>
    <p class="subtitle">Monte a imagem da princesa e do sapinho!</p>
  </header>

  <div class="selector">
    <button class="selector-btn active" onclick="loadPuzzle('princesa')">👸</button>
    <button class="selector-btn" onclick="loadPuzzle('sapo')">🐸</button>
    <button class="selector-btn" onclick="loadPuzzle('unicornio')">🦄</button>
  </div>

  <div class="game-board">
    <!-- Grade Onde Monta -->
    <div class="puzzle-grid" id="grid">
      <div class="puzzle-slot" data-index="0"></div>
      <div class="puzzle-slot" data-index="1"></div>
      <div class="puzzle-slot" data-index="2"></div>
      <div class="puzzle-slot" data-index="3"></div>
    </div>

    <!-- Peças Soltas -->
    <div class="pieces-container" id="piecesBench"></div>
  </div>

  <!-- Tela de Vitória -->
  <div class="win-banner" id="winBanner">
    <h2>PARABÉNS! 🎉</h2>
    <p style="font-size: 1.2rem; color: #333;">Você é muito inteligente!</p>
    <div style="font-size: 3rem; margin: 10px 0;">⭐ 👑 ⭐</div>
    <button class="btn-next" onclick="nextPuzzle()">JOGAR DE NOVO ✨</button>
  </div>

<script>
  // Imagens Ilustrativas em SVG Colorido para Crianças
  const puzzles = {
    princesa: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><rect width='100%' height='100%' fill='%23ffc2e2'/><circle cx='150' cy='120' r='60' fill='%23ffe0bd'/><path d='M90 260 Q150 160 210 260 Z' fill='%23ff3b9d'/><circle cx='130' cy='110' r='8' fill='%23000'/><circle cx='170' cy='110' r='8' fill='%23000'/><path d='M135 135 Q150 150 165 135' stroke='%23ff0055' stroke-width='4' fill='none'/><path d='M110 70 L150 30 L190 70 Z' fill='%23ffde59'/><circle cx='150' cy='30' r='8' fill='%23ff0055'/></svg>",
    sapo: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><rect width='100%' height='100%' fill='%23b5f7a5'/><ellipse cx='150' cy='170' rx='90' ry='70' fill='%2352c433'/><circle cx='110' cy='100' r='30' fill='%2352c433'/><circle cx='190' cy='100' r='30' fill='%2352c433'/><circle cx='110' cy='100' r='12' fill='%23fff'/><circle cx='190' cy='100' r='12' fill='%23fff'/><circle cx='110' cy='100' r='6' fill='%23000'/><circle cx='190' cy='6' fill='%23000'/><path d='M120 180 Q150 210 180 180' stroke='%2300520b' stroke-width='5' fill='none'/><polygon points='140,50 150,30 160,50' fill='%23ffde59'/></svg>",
    unicornio: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><rect width='100%' height='100%' fill='%23cbebff'/><path d='M100 250 C100 150 200 150 200 250' fill='%23fff'/><path d='M120 100 L150 20 L180 100' fill='%23ffde59'/><circle cx='135' cy='150' r='6' fill='%23000'/><circle cx='165' cy='150' r='6' fill='%23000'/><path d='M140 170 Q150 180 160 170' stroke='%23ff66c4' stroke-width='3' fill='none'/></svg>"
  };

  let currentPuzzle = 'princesa';
  let fittedPieces = 0;

  function loadPuzzle(key) {
    currentPuzzle = key;
    fittedPieces = 0;
    document.getElementById('winBanner').style.display = 'none';

    // Atualizar botões
    document.querySelectorAll('.selector-btn').forEach(btn => btn.classList.remove('active'));
    event.target.classList.add('active');

    const slots = document.querySelectorAll('.puzzle-slot');
    slots.forEach(slot => {
      slot.innerHTML = '';
      slot.style.border = '2px dashed #ff91a4';
    });

    const bench = document.getElementById('piecesBench');
    bench.innerHTML = '';

    // Posições das 4 peças (2x2)
    const positions = [
      { x: '0px', y: '0px', id: 0 },
      { x: '-135px', y: '0px', id: 1 },
      { x: '0px', y: '-135px', id: 2 },
      { x: '-135px', y: '-135px', id: 3 }
    ];

    // Embaralhar peças
    const shuffled = [...positions].sort(() => Math.random() - 0.5);

    shuffled.forEach(pos => {
      const piece = document.createElement('div');
      piece.className = 'piece';
      piece.draggable = true;
      piece.style.backgroundImage = `url("${puzzles[key]}")`;
      piece.style.backgroundPosition = `${pos.x} ${pos.y}`;
      piece.dataset.id = pos.id;

      piece.addEventListener('dragstart', dragStart);
      bench.appendChild(piece);
    });

    setupSlots();
  }

  function setupSlots() {
    const slots = document.querySelectorAll('.puzzle-slot');
    slots.forEach(slot => {
      slot.addEventListener('dragover', dragOver);
      slot.addEventListener('drop', dropPiece);
    });
  }

  function dragStart(e) {
    e.dataTransfer.setData('text/plain', e.target.dataset.id);
  }

  function dragOver(e) {
    e.preventDefault();
  }

  function dropPiece(e) {
    e.preventDefault();
    const pieceId = e.dataTransfer.getData('text/plain');
    const slotIndex = e.currentTarget.dataset.index;

    // Se a peça encaixar no lugar certo
    if (pieceId === slotIndex && e.currentTarget.children.length === 0) {
      const piece = document.querySelector(`.piece[data-id='${pieceId}']`);
      e.currentTarget.appendChild(piece);
      piece.draggable = false;
      piece.style.border = 'none';
      piece.style.transform = 'scale(1)';
      e.currentTarget.style.border = 'none';

      fittedPieces++;

      if (fittedPieces === 4) {
        showWin();
      }
    }
  }

  function showWin() {
    setTimeout(() => {
      confetti({
        particleCount: 150,
        spread: 100,
        origin: { y: 0.5 }
      });
      document.getElementById('winBanner').style.display = 'block';
    }, 300);
  }

  function nextPuzzle() {
    const keys = Object.keys(puzzles);
    const nextIndex = (keys.indexOf(currentPuzzle) + 1) % keys.length;
    const btn = document.querySelectorAll('.selector-btn')[nextIndex];
    btn.click();
  }

  // Inicializar primeiro jogo
  loadPuzzle('princesa');
</script>
</body>
</html>
