/* ============================================================
   M2 - CONEXÃO DO CONHECIMENTO (Kids 2) — Quebra-cabeça
   Adaptado de quebracabeca_middle.css
   Posições em % → ajuste top/left/width/height conforme o tapete k2.jpeg
   ============================================================ */

/* Wrapper da missão */
.m2k2-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none; /* só a peça recebe pointer */
}

/* ── Área alvo (buraco do quebra-cabeça) ──────────────────────
   ⚠️  AJUSTE top/left/width/height para bater com o tapete k2
   ──────────────────────────────────────────────────────────── */
#m2k2-alvo {
  position: absolute;

  top: 54.7%;    /* ← AJUSTE */
  left: 38%;   /* ← AJUSTE */
  width: 9.7%; /* ← AJUSTE */
  height: 9.7%;/* ← AJUSTE */

  pointer-events: none;

  background: rgba(255, 255, 255, 0.85);
  border: 0.22vw solid rgba(0, 0, 0, 1);
  border-radius: 10%;
  box-shadow: 0 10% 10% rgba(0, 0, 0, 0.22);
  transform: rotate(0deg); /* ← AJUSTE a rotação se necessário */
}

/* ── Peça (arrastável) ────────────────────────────────────────
   ⚠️  AJUSTE top/left para posição inicial no tapete k2
   ──────────────────────────────────────────────────────────── */
#m2k2-peca {
  position: absolute;

  top: 70%;    /* ← AJUSTE */
  left: 2%;   /* ← AJUSTE */

  width: 6.4%;  /* ← AJUSTE (levemente menor que o alvo) */
  height: 6.8%; /* ← AJUSTE */
  transform: rotate(8deg); /* ← AJUSTE a rotação se necessário */

  pointer-events: auto;
  cursor: grab;
  user-select: none;
  touch-action: none;

  background: rgba(185, 216, 72, 0.95);
  border: 0.22vw solid rgba(0, 0, 0, 1);
  border-radius: 20%;
  box-shadow: 0 10% 10% rgba(0, 0, 0, 0.28);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

#m2k2-peca:active {
  cursor: grabbing;
  transform: scale(1.03);
  box-shadow: 0 1.0vw 1.6vw rgba(0, 0, 0, 0.34);
}

/* Detalhe interno (visual de peça) */
.m2k2-peca-miolo {
  position: absolute;
  inset: 18%;
  border-radius: 20%;
  background: rgba(0, 0, 0, 0.06);
  border: 0.12vw dashed rgba(0, 0, 0, 0.25);
}

/* Feedback visual do alvo */
.m2k2-alvo-ok-total {
  outline: 0.30vw solid rgba(0, 255, 0, 0.85);
}
.m2k2-alvo-ok-parcial {
  outline: 0.30vw solid rgba(255, 200, 0, 0.90);
}