/* ============================================================
   M3 - ALVENARIA EDUCACIONAL (Kids 2)
   6 blocos de tijolo arrastáveis → área verde ou área cinza
   ============================================================ */

/* Wrapper geral (inset 0 = cobre o tapete inteiro) */
.m3k2-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── SVG área verde ───────────────────────────────────────────
   ⚠️  AJUSTE top/left/width para posicionar no tapete k2
   ──────────────────────────────────────────────────────────── */
.m3k2-area-verde-svg {
  position: absolute;
  top: 1%;    /* ← AJUSTE */
  left: 72.3%;   /* ← AJUSTE */
  width: 27%; /* ← AJUSTE */
  height: auto;
  pointer-events: none;
  overflow: visible;
}

.m3k2-area-verde-svg path {
  fill: rgb(27, 138, 60);
  stroke: rgba(0, 160, 0, 1);
  stroke-width: 1.5;
}

/* Feedback quando bloco está dentro */
.m3k2-area-verde-svg.ativa path {
  fill: rgba(64, 153, 64, 0.9);
}

/* ── SVG área cinza ───────────────────────────────────────────
   ⚠️  AJUSTE top/left/width para posicionar no tapete k2
   ──────────────────────────────────────────────────────────── */
.m3k2-area-cinza-svg {
  position: absolute;
  top: 1%;    /* ← AJUSTE */
  left: 82%;   /* ← AJUSTE */
  width: 17.2%; /* ← AJUSTE */
  height: auto;
  pointer-events: none;
  overflow: visible;
}

.m3k2-area-cinza-svg path {
  fill: rgba(160, 160, 160, 1);
  stroke-width: 1.5;
}

.m3k2-area-cinza-svg.ativa path {
  fill: rgb(185, 185, 185);
}

/* ── Blocos de tijolo ─────────────────────────────────────────
   6 blocos empilhados na posição inicial (os 3 quadrados brancos)
   ⚠️  AJUSTE top/left de cada bloco
   ──────────────────────────────────────────────────────────── */
.m3k2-bloco {
  position: absolute;
  width: 3.3%;    /* ← AJUSTE proporcional ao tapete */
  height: 2.4%; /* ← AJUSTE proporcional ao tapete */
  transform: rotate(14deg);

  /* Cor tijolo */
  background: linear-gradient(135deg, #c1502e 0%, #a0381a 60%, #8b2e12 100%);
  border: 0.15vw solid rgba(0, 0, 0, 0.55);
  border-radius: 0.2vw;

  /* Linhas de argamassa (visual de tijolo) */
  box-shadow:
    inset 0 0.15vw 0 rgba(200, 100, 60, 0.5),   /* brilho topo */
    inset 0 -0.12vw 0 rgba(0, 0, 0, 0.30),       /* sombra base */
    0 0.3vw 0.6vw rgba(0, 0, 0, 0.30);            /* sombra externa */

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

  transition: box-shadow 0.08s ease, filter 0.08s ease;
}

.m3k2-bloco:active,
.m3k2-bloco.dragging {
  cursor: grabbing;
  z-index: 50;
  filter: brightness(1.15);
  box-shadow:
    inset 0 0.15vw 0 rgba(200, 100, 60, 0.5),
    0 0.8vw 1.4vw rgba(0, 0, 0, 0.40);
}

/* Bloco dentro da área verde → borda amarela */
.m3k2-bloco.em-verde {
  outline: 0.20vw solid rgba(255, 200, 0, 0.90);
}

/* Bloco dentro da área cinza/amarela → borda verde (área de 18pts) */
.m3k2-bloco.em-cinza {
  outline: 0.20vw solid rgba(0, 200, 0, 0.90);
}

/* ── Posições iniciais empilhadas (coluna dupla) ────────────── */
#m3k2-bloco-1 { top: 89.5%;  left: 40.2%; z-index:14 }
#m3k2-bloco-2 { top: 91%;  left: 40%; z-index:12}
#m3k2-bloco-3 { top: 87.3%;  left: 40.78%; z-index:13 }
#m3k2-bloco-4 { top: 92.2%;  left: 39.6%; }
#m3k2-bloco-5 { top: 89.1%;  left: 40.35%; }
#m3k2-bloco-6 { top: 86%;  left: 41%; }

/* ── Quadrado decorativo amarelo (em cima do SVG cinza) ────────
   ⚠️  AJUSTE top/left/width/height para cobrir o cinza no tapete
   ──────────────────────────────────────────────────────────── */
#m3k2-deco-amarelo {
  position: absolute;
  top: 1%;       /* ← AJUSTE */
  left: 91%;     /* ← AJUSTE (mesmo left do SVG cinza) */
  width: 8%;  /* ← AJUSTE (mesma largura do SVG cinza) */
  aspect-ratio: 1 / 1; /* quadrado perfeito */

  background: #f5c518;

  pointer-events: none; /* puramente decorativo */
  z-index: 1;           /* fica atrás dos blocos e do SVG cinza */
}