:root {
  --block-size: clamp(14px, 4vw, 28px);
  --preview-size: clamp(12px, 3vw, 18px);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background: #120d1f;
  color: #f0f0f0;
}

.game-block {
  margin: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  width: var(--block-size);
  height: var(--block-size);
  border: 0.1px solid rgba(65, 52, 78, 0.35);
  background-color: rgba(27, 19, 44, 0.18);
  border-radius: 4px;
}

.piece-view {
  margin-bottom: 12px;
}
.piece-view:first-child {
  margin-top: 4px;
}
.piece-view .game-block {
  aspect-ratio: 1 / 1;
  width: var(--preview-size);
  height: var(--preview-size);
}

.piece-i {
  background-color: #42c8f4; /* celeste suave */
}
.piece-j {
  background-color: #5d9bf5; /* azul medio */
}
.piece-l {
  background-color: #f2b63c; /* naranja más cálido */
}
.piece-o {
  background-color: #e7d84b; /* amarillo opaco */
}
.piece-s {
  background-color: #84d686; /* verde claro pero no neón */
}
.piece-t {
  background-color: #bb84e8; /* violeta equilibrado */
}
.piece-z {
  background-color: #f36f6f; /* rojo suave pero visible */
}