/* ============================================================
   M2 - ACESSO SEGURO (High School)
   Retângulo alvo (preto, transparente) + carrinho arrastável
   Posições em % → ajuste top/left/width/height conforme o tapete high.jpg
   ============================================================ */

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

/* ── ÁREA ALVO (retângulo preto transparente) ──────────────────
   ⚠️  AJUSTE top/left/width/height para bater com o tapete high.jpg
   ──────────────────────────────────────────────────────────── */
#m2h-alvo {
  position: absolute;
  top: 51.9%;     /* ← AJUSTE */
  left: 46.4%;    /* ← AJUSTE */
  width: 5.1%;   /* ← AJUSTE */
  height: 8.4%;   /* ← AJUSTE */

  background: transparent;
  border: 0.22vw solid rgba(0, 0, 0, 0.9);
  box-sizing: border-box;

  pointer-events: none;
}

/* Feedback visual quando carrinho está alinhado */
#m2h-alvo.m2h-ok-total {
  background: rgba(39, 174, 96, 0.4);
  border-color: rgba(39, 174, 96, 0.95);
}
#m2h-alvo.m2h-ok-parcial {
  background: rgba(243, 156, 18, 0.35);
  border-color: rgba(243, 156, 18, 0.95);
}

/* ── CARRINHO (peça arrastável) ───────────────────────────────
   ⚠️  AJUSTE top/left para posição inicial no tapete high.jpg
   ──────────────────────────────────────────────────────────── */
#m2h-carrinho {
  position: absolute;
  top: 54%;    /* ← AJUSTE */
  left: 28.8%;   /* ← AJUSTE */
  width: 3.6%;   /* ← AJUSTE */
  height: 4.3%;  /* ← AJUSTE */

  background: #c0392b;
  border-radius: 0.3vw;
  border: 0.15vw solid rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.3);

  pointer-events: auto;
  cursor: grab;
  user-select: none;
  touch-action: none;

  /* CSS custom properties para drag sem teleporte */
  --tx: 0px;
  --ty: 0px;
  transform: translate(var(--tx), var(--ty));
  transform-origin: 50% 50%;
  will-change: transform;
}
#m2h-carrinho:active { cursor: grabbing; }