/* ============================================================
   M1 - EXPANSÃO DO NOVO SETOR INDUSTRIAL (Technic)
   ============================================================ */

.m1t-wrap {
  position: absolute;
  top: 35%;  /* placeholder, o user muda depois */
  left: 41.7%; /* placeholder, o user muda depois */
  width: 9%; 
  height: 20%;
  z-index: 10;
  pointer-events: none; /* Apenas blocos recebem pointer-event */
  transform: rotate(-16deg);
}

/* Base grande - quadrado vazado ou marcando o local inteiro */
.m1t-base-grande {
  position: absolute;
  top: 0;
  left: 0;
  width: 105%;
  height: 105%;
  background-color: #8B7355; /* Cor sólida cinza-marrom */
  border: 0.2vw solid #5D4037;
  border-radius: 0.5vw;
}

/* Quadrante alvo (1/4 da base grande) */
.m1t-alvo-quadrante {
  position: absolute;
  bottom: -2.5%; /* Avança um tiquinho pra cobrir a borda de 0.2vw da base grande */
  right: -2.5%;
  width: 60%;
  height: 60%;
  background-color: #6A543D; /* Mais escuro e sólido para destacar */
  border: 0.2vw solid #111; /* Borda preta sólida */
  border-bottom-right-radius: 0.5vw; /* Acompanha o shape da base por baixo */
  border-top-left-radius: 0.2vw;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

/* Fica verde quando o bloco encaixa perfeitamente (fully inside) */
.m1t-alvo-quadrante.valido {
  border-color: #2ecc71;
  background-color: rgba(46, 204, 113, 0.4);
  box-shadow: 0 0 1vw rgba(46, 204, 113, 0.8) inset;
}

/* O bloquinho físico móvel que vai ser arrastado */
.m1t-bloco {
  position: absolute;
  /* Tamanho exato pra preencher 1/4 (mantendo o aspecto quadrado fisicamente na tela) */
  width: 4.8%;
  height: 10.4%;
  /* Cor igual a base */
  background: #8B7355; /* Mesma cor da base m1t-wrap */
  border: 0.25vw solid #4e342e;
  border-radius: 0.3vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0,0,0,0.5);
  box-sizing: border-box;
  touch-action: none;
  cursor: grab;
  pointer-events: auto; /* Permite arrastar */
  transition: filter 0.2s ease, transform 0.1s;
  z-index: 15; /* Força ficar na frente de todas as bases */
  
  /* Posição inicial no tapete geral (em % para você poder editar o local) */
  top: 13.6%;
  left: 10.8%;
  transform: rotate(-30deg); /* Posição torta original */
}

/* Quando foi movido, mantem cravado nos -16 pra ficar igual a base */
.m1t-bloco.moved {
  transform: rotate(-16deg);
}

.m1t-bloco:active {
  cursor: grabbing;
  transform: rotate(-16deg) scale(1.05); /* Mantém os -16deg enquanto agarra */
  box-shadow: 0 0.8vw 1.2vw rgba(0,0,0,0.6);
}