/* ============================================================
   M5 - ACESSO SEGURO (Kids 2) — Carrinho + área cinza retangular
   Baseado em acesso_middle.css
   ============================================================ */

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

/* ── Área cinza retangular (alvo) ─────────────────────────────
   ⚠️  AJUSTE top/left/width/height/rotate para o tapete k2
   ──────────────────────────────────────────────────────────── */
#m5k2-alvo {
  position: absolute;
  top: 32.7%;    /* ← AJUSTE */
  left: 85%;   /* ← AJUSTE */
  width: 12.8%;   /* ← AJUSTE */
  height: 6.1%;  /* ← AJUSTE */

  background: rgba(100, 100, 100, 1);
  box-sizing: border-box;

  pointer-events: none;
}

/* Feedback: carrinho parcialmente dentro → amarelo */
#m5k2-alvo.m5k2-ok-parcial {
  background: rgba(255, 220, 0, 0.45);
  outline-color: rgba(220, 180, 0, 0.95);
}

/* Feedback: carrinho totalmente dentro → verde */
#m5k2-alvo.m5k2-ok-total {
  background: rgba(0, 200, 0, 0.40);
  outline-color: rgba(0, 180, 0, 0.95);
}

/* ── Carrinho (peça arrastável) ───────────────────────────────
   Drag via CSS custom properties --tx/--ty (sem teleporte)
   ⚠️  AJUSTE top/left/rotate para posição inicial no tapete k2
   ──────────────────────────────────────────────────────────── */
#m5k2-carrinho {
  position: absolute;
  top: 38.5%;    /* ← AJUSTE posição inicial */
  left: 67.8%;   /* ← AJUSTE posição inicial */
  width: 6.8%;
  height: 3.4%;

  background: rgb(78, 8, 8);
  border-radius: 0.45vw;
  outline: 0.20vw solid rgba(255, 255, 255, 0.35);
  box-sizing: border-box;
  box-shadow: 0 0.35vw 0.55vw rgba(0, 0, 0, 0.35);

  /* Drag via CSS vars (sem teleporte) */
  --tx: 0px;
  --ty: 0px;
  --rot: -27deg;                                    /* rotação inicial */
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
  transform-origin: 50% 50%;
  will-change: transform;

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

#m5k2-carrinho:active { cursor: grabbing; }