/* ============================================================
   M1 - AJUSTE GEOMÉTRICO (High School)
   3 áreas alvo (triângulo, hexágono, quadrado) + 3 blocos móveis
   Posições em % → ajuste top/left/width/height conforme o tapete high.jpg
   ============================================================ */

/* Wrapper geral da missão (cobre todo o tapete) */
.m1h-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── ÁREAS ALVO (fixas no tapete) ─────────────────────────────
   ⚠️  AJUSTE top/left/width/height para bater com o tapete high.jpg
   ──────────────────────────────────────────────────────────── */

/* Triângulo — verde */
#m1h-alvo-tri {
  position: absolute;
  top: 88.2%;     /* ← AJUSTE */
  left: 25%;    /* ← AJUSTE */
  width: 4.3%;    /* ← AJUSTE */
  aspect-ratio: 1 / 0.88;
  pointer-events: none;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: rgba(46, 204, 113, 0.3);
  outline: 2px dashed rgba(46, 204, 113, 0.8);
}

/* Hexágono — azul */
#m1h-alvo-hex {
  position: absolute;
  top: 82.9%;     /* ← AJUSTE */
  left: 29.35%;    /* ← AJUSTE */
  width: 4.5%;    /* ← AJUSTE */
  aspect-ratio: 1 / 0.88;
  pointer-events: none;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: rgba(52, 152, 219, 0.3);
  outline: 2px dashed rgba(52, 152, 219, 0.8);
  
}

/* Quadrado — vermelho */
#m1h-alvo-qua {
  position: absolute;
  top: 81.4%;     /* ← AJUSTE */
  left: 20.56%;    /* ← AJUSTE */
  width: 3.6%;    /* ← AJUSTE */
  aspect-ratio: 1 / 1;
  pointer-events: none;
  background: rgba(231, 76, 60, 0.3);
}

/* Feedback visual nas áreas quando alinhadas */
.m1h-alvo-ok-total  { outline: 3px solid rgba(39, 174, 96, 0.95) !important; background-color: rgba(39, 174, 96, 0.45) !important; }
.m1h-alvo-ok-parcial { outline: 3px solid rgba(243, 156, 18, 0.95) !important; background-color: rgba(243, 156, 18, 0.35) !important; }

/* ── BLOCOS MÓVEIS ────────────────────────────────────────────
   ⚠️  AJUSTE top/left para posição inicial (área de espera)
   ──────────────────────────────────────────────────────────── */

.m1h-bloco {
  position: absolute;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  touch-action: none;
  z-index: 10;
  transition: box-shadow 0.08s ease;
  box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.3);
}

.m1h-bloco:active {
  cursor: grabbing;
  box-shadow: 0 0.8vw 1.5vw rgba(0, 0, 0, 0.4);
}

/* Triângulo verde */
#m1h-bloco-tri {
  top: 86.5%;    /* ← AJUSTE */
  left: 8.45%;   /* ← AJUSTE */
  width: 3.2%;   /* ← AJUSTE */
  aspect-ratio: 1 / 0.88;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: #2ecc71;
}

/* Hexágono azul */
#m1h-bloco-hex {
  top: 79%;    /* ← AJUSTE */
  left: 4.3%;   /* ← AJUSTE */
  width: 3.2%;   /* ← AJUSTE */
  aspect-ratio: 1 / 0.88;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: #3498db;
}

/* Quadrado vermelho */
#m1h-bloco-qua {
  top: 79.6%;    /* ← AJUSTE */
  left: 13.1%;   /* ← AJUSTE */
  width: 2.7%;   /* ← AJUSTE */
  aspect-ratio: 1 / 1;
  background: #e74c3c;
}