/*
 * The game's blocks: rounded squares with a light top edge and a dark bottom edge, in the
 * pieces' colours; --cell sets their size. With blocks--glow each block glows in its colour,
 * like the block logo of the game's home screen.
 */

.blocks {
  --cell: 12px;
  display: inline-grid;
  grid-auto-rows: var(--cell);
  flex: none;
}

.blocks--w2 {
  grid-template-columns: repeat(2, var(--cell));
}

.blocks--w3 {
  grid-template-columns: repeat(3, var(--cell));
}

.blocks--w4 {
  grid-template-columns: repeat(4, var(--cell));
}

.blocks--w9 {
  grid-template-columns: repeat(9, var(--cell));
}

.blocks__cell {
  margin: calc(var(--cell) / 26);
  border-radius: calc(var(--cell) * 4 / 26);
  background: var(--block);
  box-shadow:
    inset 0 calc(var(--cell) * 2 / 26) 0 rgb(255 255 255 / 33%),
    inset 0 calc(var(--cell) * -3 / 26) 0 rgb(0 0 0 / 25%);
}

.blocks--glow .blocks__cell {
  box-shadow:
    0 0 calc(var(--cell) * 0.55) color-mix(in srgb, var(--block) 60%, transparent),
    inset 0 calc(var(--cell) * 2 / 26) 0 rgb(255 255 255 / 33%),
    inset 0 calc(var(--cell) * -3 / 26) 0 rgb(0 0 0 / 25%);
}

.blocks__cell--i {
  --block: var(--piece-i);
}

.blocks__cell--o {
  --block: var(--piece-o);
}

.blocks__cell--t {
  --block: var(--piece-t);
}

.blocks__cell--s {
  --block: var(--piece-s);
}

.blocks__cell--z {
  --block: var(--piece-z);
}

.blocks__cell--j {
  --block: var(--piece-j);
}

.blocks__cell--l {
  --block: var(--piece-l);
}