/* ============================================================
   M8 - ESPAÇO MAKER (Kids 2)
   ============================================================ */

.m8k2-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Retângulo Azul */
.m8k2-area {
  position: absolute;
  top: 1.55%;       /* ← AJUSTE: Onde fica a área Azul */
  left: 3.7%;      /* ← AJUSTE */
  width: 21.4%;     /* ← AJUSTE */
  height: 9.8%;    /* ← AJUSTE */
  border: 0.35vw dashed #1a5080;
  background: rgba(0, 136, 255, 1);
  border-radius: 0.1vw;
  pointer-events: none;
}

/* Bloco Maker (com material escolar) */
.m8k2-bloco {
  position: absolute;
  top: 90%;       /* ← AJUSTE: Onde o bloco inicia (Base) */
  left: 16%;      /* ← AJUSTE */
  width: 7%;
  height: 7%;
  background: #f0f0f0;
  border: 0.2vw solid #333;
  border-radius: 0.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2vw;
  cursor: grab;
  pointer-events: auto;
  user-select: none;
  touch-action: none;
  box-shadow: 0 0.4vw 0.8vw rgba(0,0,0,0.3);
  z-index: 20;

  --tx: 0px;
  --ty: 0px;
  --rot: 0deg;
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
}

.m8k2-bloco:active {
  cursor: grabbing;
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.95);
  box-shadow: 0 0.2vw 0.4vw rgba(0,0,0,0.3);
}

/* Feedback visual: na área azul mas CANCELA M7 FECHADA */
.m8k2-bloco.invalido {
  border-color: #ff3333;
  background: #ffaaaa;
  box-shadow: 0 0 1vw #ff3333;
}

/* Feedback visual: na área azul com CANCELA M7 ABERTA (Sucesso) */
.m8k2-bloco.valido {
  border-color: #00cc00;
  background: #ccffcc;
  box-shadow: 0 0 1vw #00cc00;
}