/* ============================================================
   M4 - TRANSPORTE SEGURO (Technic) - REBOOT
   ============================================================ */

/* 1. Suportes em formato de canulo (canudos retangulares finos) */
.m4t-suporte {
  position: absolute;
  width: 1.6%;
  height: 9%;
  background-color: #95a5a6; /* Cinza claro dos canudos/pilares */
  box-shadow: inset -0.2vw 0 0.5vw rgba(0,0,0,0.2); /* Sombreado interno pra dar relevo 3D de cano */
  box-sizing: border-box;
  z-index: 5;
  transition: all 0.3s ease;
}

/* Feedback visual de quando a base ficar por cima (suporte seguro) */
.m4t-suporte.ativo {
  border-color: #2ecc71;
  box-shadow: 0 0 1vw rgba(46, 204, 113, 0.8) inset;
}

/* 2. Base Azul Principal */
/* Dimensões do m3t-alvo solicitadas na base inteira */
.m4t-base-azul {
  position: absolute;
  top: 82%;
  left: 5%;
  width: 7%;
  height: 13%;
  background-color: #2980b9; /* Azul bem forte pra diferenciar se precisar do macaquinho do worker */
  border: 0.2vw solid #1f618d;
  border-radius: 0.3vw;
  box-sizing: border-box;
  touch-action: none;
  cursor: grab;
  z-index: 10;
  transition: box-shadow 0.2s ease, transform 0.1s;
  transform: rotate(17deg);
}

.m4t-base-azul:active {
  cursor: grabbing;
  z-index: 30;
  box-shadow: 0 1vw 1.5vw rgba(0,0,0,0.5);
  transform: scale(1.05);
}

/* 2.1 Alça lateral riscada para dar dica visual de "arrastável" */
.m4t-base-azul::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.8vw; /* Projeta só um pouquinho pra fora na direita */
  transform: translateY(-50%);
  width: 0.8vw;
  height: 1.8vw; /* Tamanho bem diminuto como um apêndice */
  background-color: #95a5a6; /* Cinza metálico */
  /* Relevo riscado mais delicado (0.2vw) */
  background-image: repeating-linear-gradient(0deg, transparent, transparent 0.2vw, #34495e 0.2vw, #34495e 0.4vw);
  border: 0.1vw solid #2c3e50;
  border-left: none; /* Funde com a prancha visualmente */
  border-radius: 0 0.2vw 0.2vw 0;
  box-shadow: 0.2vw 0 0.3vw rgba(0,0,0,0.3);
  cursor: inherit; /* Pega o cursor de grab da base */
}

/* 3. Pessoas - Exatamente o clone de .maker-worker do Middle mas menores pra caberem os 4 */
.m4t-pessoa {
  position: absolute;
  width: 2%;
  height: 4.2%;
  pointer-events: auto; /* IMPORTANTE: torná-los interativos! */
  cursor: grab;
  z-index: 60; /* Acima da base azul nativamente e em movimento */
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* cabeça */
.m4t-pessoa::before {
  content: "";
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  width: 42%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(245,214,178,0.96);
  outline: 0.12vw solid rgba(0,0,0,0.15);
}

/* corpo (Macacão) */
.m4t-pessoa::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 58%;
  height: 52%;
  border-radius: 0.45vw;
  background: rgba(52, 152, 219, 0.96); /* O azul do Maker Middle */
  outline: 0.12vw solid rgba(0,0,0,0.12);
  box-shadow: 0 0.25vw 0.55vw rgba(0,0,0,0.18);
}

.m4t-pessoa:active {
  cursor: grabbing;
  transform: scale(1.1);
  z-index: 60; /* Fica acima de tudo pra levitar da base */
}

/* Estado seguro do worker: Fica com o macacão e contorno verdes */
.m4t-pessoa.salva::after {
  background: rgba(46, 204, 113, 0.96);
  box-shadow: 0 0 1vw rgba(46, 204, 113, 0.5);
}

/* Classe engatilhada via JS para zerar a angulação após o usuário encostar */
.m4t-movido {
  transform: rotate(0deg) !important;
}

/* Matriz 2x2 das Pessoas na Base Azul inicial tombadas a 17deg (Base em left: 5%, top: 82%) */
#m4t-p1 { top: 83%; left: 6%; transform: rotate(17deg); }
#m4t-p2 { top: 84.8%; left: 9.5%; transform: rotate(17deg); }
#m4t-p3 { top: 88.5%; left: 5.5%; transform: rotate(17deg); }
#m4t-p4 { top: 90.6%; left: 9%; transform: rotate(17deg); }

/* Posição dos 2 Canudos/Suportes no Tapete (Bem próximos para equilibrar a base de 7%) */
#m4t-suporte-1 { top: 2%; left: 50.5%; }
#m4t-suporte-2 { top: 2%; left: 46.8%; }