/* ============================================================
   M3 - EDIFICAÇÃO DO CAMPUS (High School)
   Arrasto padrão por --tx e --ty
   ============================================================ */

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

/* ── BASE ───────────────────────────────────────────────────── */
#m3h-base {
  position: absolute;
  top: 4%;
  left: 46.6%;
  width: 15%;
  height: 45%;

  /* Fundo sólido normalmente */
  background: #c8b08a;
  border: 0.25vw dashed rgba(255, 255, 255, 0.45);
  border-radius: 0.5vw;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 5;
  transition: background 0.3s ease;
}

/* Feedback visual na base (apenas muda a cor da borda, mantém fundo sólido) */
#m3h-base.base-transparente {
  background: #c8b08a; /* Mantém a cor sólida */
  border-color: rgba(255, 255, 255, 0.9);
  border-style: solid;
}

/* ── LINHAS MULTIPLICADORAS ─────────────────────────────────── */
.m3h-line {
  position: absolute;
  left: 46.6%;
  width: 15%;
  height: 0.35vw;
  border-radius: 999px;
  pointer-events: none;
  z-index: 6;
  opacity: 0.85;
}

#m3h-line-red    { top: 33%; background: rgba(255, 60, 60, 0.85); }
#m3h-line-yellow { top: 21%; background: rgba(255, 210, 0, 0.85); }
#m3h-line-green  { top: 9%; background: rgba(50, 200, 80, 0.85); }

/* ── BLOCOS ARRASTÁVEIS (Padrão Middle/K2) ─────────────────── */
.m3h-bloco {
  position: absolute;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  touch-action: none;
  box-sizing: border-box;

  /* Transforms padrão */
  --tx: 0px;
  --ty: 0px;
  --s: 1; /* Escala inicial */
  transform: translate(var(--tx), var(--ty)) scale(var(--s));
  transform-origin: 50% 50%;
  will-change: transform;

  z-index: 20;
  transition: filter 0.2s ease, transform 0.1s ease;
  /* Borda escura base e sombra pequena */
  filter: drop-shadow(0 0 0.12vw rgba(0,0,0,0.8)) drop-shadow(0 0.4vw 0.8vw rgba(0,0,0,0.4));
}
.m3h-bloco:active {
  cursor: grabbing;
  z-index: 99;
  --s: 1.06; /* Aumenta ligeiramente a escala ao pegar, sem mexer no filter */
}
.m3h-bloco.falling {
  /* Animação de queda suave acelerando */
  transition: transform 0.35s cubic-bezier(0.4, 0.0, 1, 1), filter 0.2s ease;
}

.m3h-bloco .shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  box-sizing: border-box;
}

/* Bolinha branca (detalhe visual no centro) */
.m3h-bloco .shape::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.2vw;
  height: 1.2vw;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
}

/* Formas baseadas em clip-path */
.m3h-tri {
  width: 6.5%;
  aspect-ratio: 1 / 0.88;
}
.m3h-tri .shape {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: #2ecc71;
}
.m3h-tri .shape::after {
  top: 60%; /* Desce a bolinha branca para ficar no centro visual do triângulo */
}

.m3h-hex {
  width: 6.5%;
  aspect-ratio: 1 / 0.88;
}
.m3h-hex .shape {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: #3498db;
}

.m3h-qua {
  width: 5.5%;
  aspect-ratio: 1 / 1;
}
.m3h-qua .shape {
  border-radius: 3px;
  background: #e74c3c;
}

.m3h-gold {
  width: 6.5%;
  aspect-ratio: 1 / 0.88;
}

/* O ouro tem 90 graus apenas enquanto não foi movido, para não sobreescrever os vars de arrasto. */
.m3h-gold:not(.moved) {
  transform: translate(var(--tx), var(--ty)) scale(var(--s)) rotate(78deg);
}
.m3h-gold .shape {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: linear-gradient(135deg, #f9d423 0%, #e8a600 60%, #f9d423 100%);
}
.m3h-gold .shape::after {
  top: 60%; /* Desce a bolinha assim como no triângulo normal */
}

/* ── FEEDBACK DE VALIDAÇÃO (CONTORNO DO BLOCO) ─────────── */
/* Para criar um efeito de borda em elementos com clip-path, empilhamos drop-shadows */
.m3h-bloco.valido-red {
  filter: drop-shadow(0 0 0.15vw rgba(255, 60, 60, 1)) drop-shadow(0 0 0.15vw rgba(255, 60, 60, 1)) drop-shadow(0 0.4vw 0.8vw rgba(0,0,0,0.4));
}
.m3h-bloco.valido-yellow {
  filter: drop-shadow(0 0 0.15vw rgba(255, 210, 0, 1)) drop-shadow(0 0 0.15vw rgba(255, 210, 0, 1)) drop-shadow(0 0.4vw 0.8vw rgba(0,0,0,0.4));
}
.m3h-bloco.valido-green {
  filter: drop-shadow(0 0 0.15vw rgba(50, 200, 80, 1)) drop-shadow(0 0 0.15vw rgba(50, 200, 80, 1)) drop-shadow(0 0.4vw 0.8vw rgba(0,0,0,0.4));
}
.m3h-bloco.valido-gold {
  filter: drop-shadow(0 0 0.2vw rgba(255, 210, 0, 1)) drop-shadow(0 0 0.2vw rgba(255, 210, 0, 1)) drop-shadow(0 0.4vw 0.8vw rgba(0,0,0,0.4));
}
.m3h-bloco.valido-white {
  filter: drop-shadow(0 0 0.15vw rgba(255, 255, 255, 0.95)) drop-shadow(0 0 0.15vw rgba(255, 255, 255, 0.95)) drop-shadow(0 0.4vw 0.8vw rgba(0,0,0,0.4));
}

/* Posições iniciais */
#m3h-tri-1  { top: 1%; left: 33.4%;  }
#m3h-tri-2  { top: 75%; left: 75.5%; }
#m3h-hex-1  { top: 3%; left: 10%; }
#m3h-hex-2  { top: 86%; left: 61.6%; }
#m3h-qua-1  { top: 33%; left: 24%; }
#m3h-qua-2  { top: 74%; left: 53%; }
#m3h-gold   { top: 34%; left: 93%; }