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

/* ======= ÁREA ALVO (buraco) ======= */
#m5-alvo{
  position:absolute;

  /* AJUSTE FINO AQUI (posição do “quadradinho faltante” no quebra-cabeça) */
  top: 38.8%;
  left: 56.1%;
  width: 4.6%;
  height: 9.6%;

  pointer-events:none;

  /* Visual: área branca com borda discreta */
  background: rgba(255,255,255,0.85);
  border: 0.22vw solid rgba(0,0,0,1);
  border-radius: 0.35vw;

  box-shadow: 0 0.6vw 1.0vw rgba(0,0,0,0.22);
  transform: rotate(-26deg);
}

/* ======= PEÇA (um pouco menor que o alvo) ======= */
#m5-peca{
  position:absolute;

  /* AJUSTE FINO AQUI (posição inicial da peça na “base”) */
  top: 29%;
  left: 25.2%;

  /* peça levemente menor que o alvo, para facilitar encaixe */
  width: 3.8%;
  height: 7.8%;
  transform: rotate(-32deg);

  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: 0.35vw;

  box-shadow: 0 0.7vw 1.2vw rgba(0,0,0,0.28);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

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

/* detalhe interno opcional para “parecer peça” */
.m5-peca-miolo{
  position:absolute;
  inset: 18%;
  border-radius: 0.25vw;
  background: rgba(0,0,0,0.06);
  border: 0.12vw dashed rgba(0,0,0,0.25);
}

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