/*************/
/* Variables */
/*************/

.tetris-container {
  --animation-duration: 10s;
  --grid-size-x: 6;
  --grid-size-y: 9;

  --square-size: 1rem;
}

/*********/
/* Style */
/*********/

/* Container */
/*************/

/* Container */
.tetris-container {
  background: rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-sizing: content-box;
  height: calc(var(--grid-size-y) * var(--square-size));
  overflow: hidden;
  position: relative;
  width: calc(var(--grid-size-x) * var(--square-size));
}
/* Container - Grid */
.tetris-container::before {
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: var(--square-size) var(--square-size);
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Blocks */
/**********/

/* Block */
.block {
  animation-duration: var(--animation-duration);
  animation-iteration-count: infinite;
  animation-name: fallBlock;
  animation-timing-function: linear;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(var(--grid-size-x), var(--square-size));
  grid-template-rows: repeat(var(--grid-size-y), var(--square-size));
  position: absolute;
}
.block-I {
  color: #00ffff;
}
.block-L {
  color: #ff3e3e;
}
.block-O {
  color: #ffff00;
}
.block-S {
  color: #ff9d00;
}
.block-Z {
  color: #00ff9d;
}

/* Block's square */
.square {
  --shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.4),
    inset -2px -2px 2px rgba(0, 0, 0, 0.4);

  animation-duration: var(--animation-duration);
  animation-iteration-count: infinite;
  animation-name: clearSquare;
  animation-timing-function: ease-out;
  background-color: currentColor;
  box-shadow: var(--shadow);
  grid-column-start: var(--square-pos-x);
  grid-row-start: calc(var(--grid-size-y) - var(--square-pos-y) + 1);
  height: var(--square-size);
  width: var(--square-size);
}

/***********/
/* Mapping */
/***********/

/* Block */
/*********/

.block:nth-child(1) {
  --block-index: 1;
}
.block:nth-child(2) {
  --block-index: 2;
}
.block:nth-child(3) {
  --block-index: 3;
}
.block:nth-child(4) {
  --block-index: 4;
}
.block:nth-child(5) {
  --block-index: 5;
}
.block:nth-child(6) {
  --block-index: 6;
}

/* Block's squares */
/*******************/

/* Block I - Line */
.block-I .square:nth-child(1) {
  --square-pos-x: calc(var(--pos-x) + 0);
  --square-pos-y: calc(var(--pos-y) + 0);
}
.block-I .square:nth-child(2) {
  --square-pos-x: calc(var(--pos-x) + 0);
  --square-pos-y: calc(var(--pos-y) + 1);
}
.block-I .square:nth-child(3) {
  --square-pos-x: calc(var(--pos-x) + 0);
  --square-pos-y: calc(var(--pos-y) + 2);
}
.block-I .square:nth-child(4) {
  --square-pos-x: calc(var(--pos-x) + 0);
  --square-pos-y: calc(var(--pos-y) + 3);
}

/* Block L - 90° */
.block-L-90 .square:nth-child(1) {
  --square-pos-x: calc(var(--pos-x) + 0);
  --square-pos-y: calc(var(--pos-y) + 0);
}
.block-L-90 .square:nth-child(2) {
  --square-pos-x: calc(var(--pos-x) + 1);
  --square-pos-y: calc(var(--pos-y) + 0);
}
.block-L-90 .square:nth-child(3) {
  --square-pos-x: calc(var(--pos-x) + 2);
  --square-pos-y: calc(var(--pos-y) + 0);
}
.block-L-90 .square:nth-child(4) {
  --square-pos-x: calc(var(--pos-x) + 2);
  --square-pos-y: calc(var(--pos-y) + 1);
}
/* Block L - 270° */
.block-L-270 .square:nth-child(1) {
  --square-pos-x: calc(var(--pos-x) + 0);
  --square-pos-y: calc(var(--pos-y) + 0);
}
.block-L-270 .square:nth-child(2) {
  --square-pos-x: calc(var(--pos-x) + 0);
  --square-pos-y: calc(var(--pos-y) + 1);
}
.block-L-270 .square:nth-child(3) {
  --square-pos-x: calc(var(--pos-x) + 1);
  --square-pos-y: calc(var(--pos-y) + 1);
}
.block-L-270 .square:nth-child(4) {
  --square-pos-x: calc(var(--pos-x) + 2);
  --square-pos-y: calc(var(--pos-y) + 1);
}

/* Block O - Square */
.block-O .square:nth-child(1) {
  --square-pos-x: calc(var(--pos-x) + 0);
  --square-pos-y: calc(var(--pos-y) + 0);
}
.block-O .square:nth-child(2) {
  --square-pos-x: calc(var(--pos-x) + 1);
  --square-pos-y: calc(var(--pos-y) + 0);
}
.block-O .square:nth-child(3) {
  --square-pos-x: calc(var(--pos-x) + 0);
  --square-pos-y: calc(var(--pos-y) + 1);
}
.block-O .square:nth-child(4) {
  --square-pos-x: calc(var(--pos-x) + 1);
  --square-pos-y: calc(var(--pos-y) + 1);
}

/* Block Z - Snake to left */
.block-Z .square:nth-child(1) {
  --square-pos-x: calc(var(--pos-x) + 1);
  --square-pos-y: calc(var(--pos-y) + 0);
}
.block-Z .square:nth-child(2) {
  --square-pos-x: calc(var(--pos-x) + 2);
  --square-pos-y: calc(var(--pos-y) + 0);
}
.block-Z .square:nth-child(3) {
  --square-pos-x: calc(var(--pos-x) + 0);
  --square-pos-y: calc(var(--pos-y) + 1);
}
.block-Z .square:nth-child(4) {
  --square-pos-x: calc(var(--pos-x) + 1);
  --square-pos-y: calc(var(--pos-y) + 1);
}

/**************/
/* Animations */
/**************/

/* Block - Makes block fall */
@keyframes fallBlock {
  0% {
    bottom: calc(100% * max(0, calc(var(--block-index) - 0)));
  }
  13% {
    bottom: calc(100% * max(0, calc(var(--block-index) - 1)));
  }
  26% {
    bottom: calc(100% * max(0, calc(var(--block-index) - 2)));
  }
  39% {
    bottom: calc(100% * max(0, calc(var(--block-index) - 3)));
  }
  52% {
    bottom: calc(100% * max(0, calc(var(--block-index) - 4)));
  }
  65% {
    bottom: calc(100% * max(0, calc(var(--block-index) - 5)));
  }
  78% {
    bottom: calc(100% * max(0, calc(var(--block-index) - 6)));
  }

  90% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* Square - Clear squares */
@keyframes clearSquare {
  0% {
    background: currentColor;
    box-shadow: var(--shadow);
  }

  85% {
    background: currentColor;
    box-shadow: var(--shadow);
  }
  95% {
    background: #fff;
    box-shadow: none;
  }

  100% {
    background: #fff;
    box-shadow: none;
  }
}