/* ============================================================
   M5 - REMUNERAÇÃO EQUITATIVA (Technic)
   ============================================================ */

/* 1. Cofre de Origem (Onde as bolinhas nascem) */
/* Retângulo mais comprido dividido 50/50 em Azul e Verde */
.m5t-base-origem {
  position: absolute;
  top: 2%;
  left: 66.2%;
  width: 18%; /* Metade do tamanho de antes */
  height: 9%;
  background: linear-gradient(to right, #27ae60 50%, #2c3e50 50%); /* Verde na esquerda, Azul na direita */
  border: 0.3vw solid #34495e;
  border-radius: 0.5vw;
  box-shadow: 0 0.5vw 1vw rgba(0,0,0,0.4);
  box-sizing: border-box;
  z-index: 5;
}

/* 2. Retângulo Alvo (Onde elas deverão ir) */
.m5t-alvo-container {
  position: absolute;
  top: 76%;
  left: 87%;
  width: 12%;
  height: 16%;
  background: linear-gradient(to right, #27ae60 50%, #2c3e50 50%); /* Cor sólida igual o cofre invés de opaco! */
  border: 0.2vw dashed #7f8c8d;
  border-radius: 0.5vw;
  box-sizing: border-box;
  z-index: 5;
  display: flex;
  transform: rotate(132deg);
}

/* Sub-alvos lógicos exatos de colisão pra cada cor, contidos no container pai em proporção 50% */
.m5t-alvo-verde {
  width: 50%;
  height: 100%;
  border-right: 0.1vw dashed #7f8c8d;
  box-sizing: border-box;
}

.m5t-alvo-azul {
  width: 50%;
  height: 100%;
  box-sizing: border-box;
}

/* Feedbacks de validação do alvo */
.m5t-alvo-verde.ativo {
  background-color: rgba(39, 174, 96, 0.5); /* Leve feedback caso de acerto */
  box-shadow: inset 0 0 1vw rgba(0, 0, 0, 0.8);
}
.m5t-alvo-azul.ativo {
  background-color: rgba(44, 62, 80, 0.5);
  box-shadow: inset 0 0 1vw rgba(0, 0, 0, 0.8);
}

/* 3. As Moedas / Bolinhas Universais */
.m5t-moeda {
  position: absolute;
  width: 1.5%; /* Tamanho das moedinhas reduzido brutalmente */
  aspect-ratio: 1 / 1;
  border-radius: 50%; /* Esfera 100% perfeita */
  box-shadow: 0 0.2vw 0.5vw rgba(0,0,0,0.5), inset -0.3vw -0.3vw 0.5vw rgba(0,0,0,0.3); /* volume e profundidade 3D */
  box-sizing: border-box;
  touch-action: none;
  cursor: grab;
  z-index: 20;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.m5t-moeda:active {
  cursor: grabbing;
  z-index: 50;
  transform: scale(1.15);
  box-shadow: 0 1vw 1.5vw rgba(0,0,0,0.6), inset -0.1vw -0.1vw 0.5vw rgba(0,0,0,0.2);
}

/* Cores M5 */
/* Moedas Azuis (Metade Esquerda) */
.m5t-moeda-azul {
  background-color: #3498db;
  border: 0.15vw solid #2980b9;
}
.m5t-moeda-azul.salva {
  border-color: #2c3e50;
  box-shadow: 0 0 1.2vw rgba(44, 62, 80, 0.9), inset 0 0 0.5vw rgba(255,255,255,0.4);
}

/* Moedas Verdes (Metade Direita) */
.m5t-moeda-verde {
  background-color: #2ecc71;
  border: 0.15vw solid #27ae60;
}
.m5t-moeda-verde.salva {
  border-color: #145a32;
  box-shadow: 0 0 1.2vw rgba(39, 174, 96, 0.9), inset 0 0 0.5vw rgba(255,255,255,0.4);
}

/* Array de Posições (Horizontal line starting in the Origin Base - Base starts at Left:66.2 and width 18) */

/* Origem Green: Esquerda (Left 66.2% a 75.2%) */
#m5t-bv1 { top: 5.7%; left: 67.5%; }
#m5t-bv2 { top: 5.7%; left: 69.5%; }
#m5t-bv3 { top: 5.7%; left: 71.5%; }
#m5t-bv4 { top: 5.7%; left: 73.5%; }

/* Origem Blue: Direita (Left 75.2% a 84.2%) */
#m5t-bz1 { top: 5.7%; left: 76.2%; }
#m5t-bz2 { top: 5.7%; left: 78.2%; }
#m5t-bz3 { top: 5.7%; left: 80.2%; }
#m5t-bz4 { top: 5.7%; left: 82.2%; }