.tangram-board {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(34,99,77,.14), rgba(197,139,43,.2));
  border: 1px solid var(--line);
}
.target-frame {
  position: absolute;
  left: 170px;
  top: 40px;
  width: 440px;
  height: 240px;
  display: grid;
  place-items: center;
  border: 3px dashed var(--green);
  color: var(--muted);
  font-weight: 900;
}
.tan-piece {
  position: absolute;
  width: 84px;
  height: 84px;
  border: 0;
  color: #fff;
  font-weight: 900;
  touch-action: none;
}
.tan-piece.tri {
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.tan-piece.big {
  width: 116px;
  height: 116px;
}
.tan-piece.mid {
  width: 96px;
  height: 96px;
}
.tan-piece.small {
  width: 76px;
  height: 76px;
}
.tan-piece.square {
  width: 78px;
  height: 78px;
}
.tan-piece.para {
  width: 110px;
  height: 70px;
  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}
@media (max-width: 640px) {
  .target-frame { left: 44px; width: 280px; }
}