/* ============================================================
   M3 - INTEGRAÇÃO DO PAINEL DE CONTROLE (Technic)
   ============================================================ */

/* Base primária retangular no chão */
.m3t-base-retangulo {
  position: absolute;
  /* Espaço e largura manipuláveis pra você */
  top: 38.7%;
  left: 0.5%;
  width: 10%;
  height: 17%;
  /* Linha vermelha deslocada pra baixo (visualmente, aumentando a % no eixo que foi tombado em 90deg) */
  background: linear-gradient(transparent 30%, #e74c3c 30%, #e74c3c 40%, transparent 40%), #6a6c6d;
  border: 0.3vw solid #34495e; /* Borda cor chumbo remetendo a chassi industrial */
  border-radius: 0.4vw;
  box-sizing: border-box;
  z-index: 5;
  transform: rotate(90deg);
}

/* Área Alvo onde realmente o bloco deve tocar pra acender a luz */
.m3t-alvo {
  position: absolute;
  top: 1%;
  left: 19.5%;
  /* Tamanho interno dentro do retângulo (também manipulável) */
  width: 60%;
  height: 75.2%; /* Relativo à altura retangular dele prum formato quadrado real na tela */
  background-color: #9ea0a1; /* Cinza mais claro pra destacar a zona demarcada */
  border: 0.2vw dashed #34495e; /* Target interno marcado com tracejado chumbo */
  border-radius: 0.2vw;
  box-sizing: border-box;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Colorização transparente Amarela de sobreposição (Parcial) */
.m3t-alvo.parcial {
  background-color: rgba(255, 235, 59, 0.5);
  border-color: #f1c40f;
  box-shadow: 0 0 1vw rgba(255, 235, 59, 0.4) inset;
}

/* Colorização transparente Verde de validação total (Integral) */
.m3t-alvo.total {
  background-color: rgba(46, 204, 113, 0.5); 
  border-color: #2ecc71;
  box-shadow: 0 0 1vw rgba(46, 204, 113, 0.6) inset;
}

/* O bloquinho elétrico independente da missão pintado com CSS */
.m3t-bloco {
  position: absolute;
  top: 18%;
  left: 90%;
  width: 4.4%; /* Tamanho próximo do bloco da m1 e da àrea target m3 */
  height: 10%; /* Compensa Aspect Ratio da tela pra seguir quadrado */
  border: 0.2vw solid #2c3e50; 
  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;
  transition: transform 0.1s ease, filter 0.2s ease;
  z-index: 15;
  
  /* Pintura da placa sólida com 1 Fio vermelho no meio atravessando vertical */
  background: 
    linear-gradient(90deg, transparent 40%, #e74c3c 40%, #e74c3c 60%, transparent 60%),
    #7f8c8d; /* fundo cinza base da placa */
}

.m3t-bloco:active {
  cursor: grabbing;
  transform: scale(1.05); /* Efeito 3D da mão levantando ele do tapete */
  z-index: 50;
  box-shadow: 0 0.8vw 1.2vw rgba(0,0,0,0.6);
}