/* wrapper geral (camada das missões) */
.m4-wrap {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none; /* libera cliques no tapete */
}

/* ===== ESTRUTURA GOL (VIGAS E HASTES) ===== */
.m4-estrutura {
  position: absolute;
  top: 12%;
  left: 36%;
  width: 15%;
  height: 10%;
  pointer-events: none;
  transform: rotate(52deg);
}

/* Colunas Metálicas */
.m4-barra-vertical {
  position: absolute;
  top: 0;
  width: 13.1%;
  height: 160%;
  background: linear-gradient(to right, #dcdde1 0%, #718093 100%);
  border-radius: 0.2vw;
  box-shadow: 
    inset 0.2vw 0 0.3vw rgba(255,255,255,0.6),
    0.5vw 0.5vw 1vw rgba(0, 0, 0, 0.5);
}

.m4-barra-esq { left: 0; }
.m4-barra-dir { right: 0; }

/* Barra Conectora */
.m4-barra-horizontal {
  position: absolute;
  top: 10%;
  left: 3.5%;
  right: 3.5%;
  height: 15%;
  background: linear-gradient(to bottom, #dcdde1 0%, #718093 100%);
  border-radius: 0.5vw;
  box-shadow: 
    inset 0 0.3vw 0.3vw rgba(255,255,255,0.7),
    0 1vw 1vw rgba(0, 0, 0, 0.4);
  
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

/* Hastes/Ganchos para pendurar */
.m4-haste {
  width: 6.5%;
  height: 250%; /* sai da barra e desce */
  margin-top: 3%; /* Aproxima e cola as pontas da aste na barra de metal */
  border-radius: 0.4vw;
  border: 0.2vw solid rgba(0,0,0,0.5);
  box-sizing: border-box;
  box-shadow: 
    inset 0 0 0.5vw rgba(0,0,0,0.5),
    0.3vw 0.3vw 0.5vw rgba(0,0,0,0.4);
}

.m4-haste-red { background: linear-gradient(135deg, #ff7675, #d63031); }
.m4-haste-blue { background: linear-gradient(135deg, #74b9ff, #0984e3); }
.m4-haste-green { background: linear-gradient(135deg, #55efc4, #00b894); }

.m4-haste.ativo {
  box-shadow: 0 0 1vw 0.3vw currentColor, inset 0 0 0.5vw rgba(255,255,255,0.8);
}
.m4-haste-red.ativo { color: #d63031; }
.m4-haste-blue.ativo { color: #0984e3; }
.m4-haste-green.ativo { color: #00b894; }

/* ===== BLOQUINHOS ARRASTÁVEIS ===== */
.m4-bloco {
  position: absolute;
  width: 2.2%;
  height: 3.8%;
  border-radius: 0.5vw;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;

  /* 3D Box Look */
  box-shadow: 
    0.4vw 0.5vw 0.8vw rgba(0,0,0,0.4),
    inset 0.2vw 0.2vw 0.5vw rgba(255, 255, 255, 0.4),
    inset -0.2vw -0.2vw 0.5vw rgba(0, 0, 0, 0.3);
  
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  text-shadow: 0 0.1vw 0.2vw rgba(0,0,0,0.8);
}

.m4-bloco:active, .m4-bloco.is-dragging {
  cursor: grabbing;
  z-index: 50;
  transform: scale(1.1);
  box-shadow: 
    1vw 1vw 1.5vw rgba(0,0,0,0.5),
    inset 0.2vw 0.2vw 0.5vw rgba(255, 255, 255, 0.4);
}

.m4-bloco.is-snapped {
  transform: scale(0.9) rotate(52deg);
  box-shadow: 0 0.1vw 0.2vw rgba(0,0,0,0.6);
}

.m4-bloco-red { 
  background: linear-gradient(135deg, #ff7675, #d63031); 
  top: 42%; left: 2%; 
}
.m4-bloco-blue { 
  background: linear-gradient(135deg, #74b9ff, #0984e3); 

    top: 52%; left: 2%; 
}
.m4-bloco-green { 
  background: linear-gradient(135deg, #55efc4, #00b894); 
  top: 47%; left: 2%; 
}