/* ============================================================
   PENALIDADES (Kids 2)
   ============================================================ */

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

/* Área Triângulo Retângulo (no tapete) */
.penalidade-triangulo {
  position: absolute;
  top: 77.1%;       /* ← AJUSTE: Onde fica no tapete */
  left: 80.12%;      /* ← AJUSTE */
  width: 19%;    /* ← AJUSTE */
  height: 22.2%;   /* ← AJUSTE */
  background: rgba(218, 48, 48, 0.4);
  /* Faz um triângulo retângulo onde a base reta fica embaixo e reta à direita */
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 5;
}

/* Os 4 Blocos da Penalidade */
.penalidade-bloco {
  position: relative; /* Mudado para relative para fluir no flexbox da mão do juiz */
  width: 2.4vw;
  height: 2.4vw;
  border: 0.2vw solid #333;
  border-radius: 0.4vw;
  cursor: grab;
  pointer-events: auto;
  user-select: none;
  touch-action: none;
  box-shadow: 0 0.4vw 0.8vw rgba(0,0,0,0.5);
  z-index: 30;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8vw;
  font-weight: bold;
  color: white;
  text-shadow: 0 0.1vw 0.2vw rgba(0,0,0,0.8);

  --tx: 0px;
  --ty: 0px;
  --rot: 0deg;
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
  transition: box-shadow 0.1s;
}

.penalidade-bloco:active {
  cursor: grabbing;
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.95);
  box-shadow: 0 0.2vw 0.4vw rgba(0,0,0,0.5);
  z-index: 40;
}

/* Cores Iniciais dos Blocos */
.p-amarelo  { background: #ffcc00; }
.p-vermelho { background: #ff3333; }
.p-azul     { background: #3366ff; }
.p-verde    { background: #33cc33; }