/* Tetris SVG Colors
------------------------------------*/
:root {
  --tetris-bg: oklch(0.15 0.04 270);
  --tetris-grid: oklch(0 0 0);
  --tetris-yellow: oklch(0.97 0.21 102);
  --tetris-cyan: oklch(0.91 0.15 195);
  --tetris-red: oklch(0.55 0.23 27);
  --tetris-magenta: oklch(0.70 0.32 328);
  --tetris-green: oklch(0.87 0.29 142);
  --tetris-orange: oklch(0.70 0.19 50);
  --tetris-blue: oklch(0.45 0.31 264);
  --tetris-violet: oklch(0.55 0.29 300);
  --tetris-salad: oklch(0.85 0.18 165);
  --tetris-pink: oklch(0.62 0.27 350);
}

/* Tetris Pieces Initial State
------------------------------------*/
#SquarePink,
#LineBlue,
#ZShapeBlue,
#TShapePink,
#LShapeRed,
#LShapeOrange,
#ZShapeGreen,
#TShapeVilolet,
#LineSalad,
#SquareYellow {
  opacity: 0;
}

/* Tetris Piece Animations
------------------------------------*/
#SquarePink {
  animation: fall1 10s infinite linear;
  animation-delay: 0.5s;
}

#LineBlue {
  animation: fall2 10s infinite linear;
  animation-delay: 0.5s;
}

#ZShapeBlue {
  animation: fall3 10s infinite linear;
  animation-delay: 0.5s;
}

#TShapePink {
  animation: fall4 10s infinite linear;
  animation-delay: 0.5s;
}

#LShapeRed {
  animation: fall5 10s infinite linear;
  animation-delay: 0.5s;
}

#LShapeOrange {
  animation: fall6 10s infinite linear;
  animation-delay: 0.5s;
}

#ZShapeGreen {
  animation: fall7 10s infinite linear;
  animation-delay: 0.5s;
}

#TShapeVilolet {
  animation: fall8 10s infinite linear;
  animation-delay: 0.5s;
}

#LineSalad {
  animation: fall9 10s infinite linear;
  animation-delay: 0.5s;
}

#SquareYellow {
  animation: fall10 10s infinite linear;
  animation-delay: 0.5s;
}

/* Keyframe Animations
------------------------------------*/
@keyframes fall1 {
  0% { transform: translateY(-640px); opacity: 1; }
  7% { transform: translateY(0); opacity: 1; }
  21% { transform: translateY(0); opacity: 1; }
  23% { transform: translateY(0); opacity: 0; }
  24% { transform: translateY(32px); opacity: 1; }
  42% { transform: translateY(32px); opacity: 1; }
  44% { transform: translateY(32px); opacity: 0; }
  45% { transform: translateY(64px); opacity: 1; }
  67% { transform: translateY(64px); opacity: 1; }
  69% { transform: translateY(64px); opacity: 0; }
  70% { transform: translateY(96px); opacity: 1; }
  88% { transform: translateY(96px); opacity: 1; }
  90% { transform: translateY(96px); opacity: 0; }
  91% { transform: translateY(128px); opacity: 1; }
  93% { transform: translateY(128px); opacity: 1; }
  94% { transform: translateY(128px); opacity: 0; }
  95% { transform: translateY(160px); opacity: 1; }
  97% { transform: translateY(160px); opacity: 1; }
  98% { transform: translateY(160px); opacity: 0; }
  99% { transform: translateY(800px); opacity: 0; }
  100% { transform: translateY(-640px); opacity: 0; }
}

@keyframes fall2 {
  0%, 6.99% { transform: translateY(-640px); opacity: 0; }
  7% { transform: translateY(-640px); opacity: 1; }
  14% { transform: translateY(0); opacity: 1; }
  21% { transform: translateY(0); opacity: 1; }
  23% { transform: translateY(0); opacity: 0; }
  98% { transform: translateY(0); opacity: 0; }
  99% { transform: translateY(800px); opacity: 0; }
  100% { transform: translateY(-640px); opacity: 0; }
}

@keyframes fall3 {
  0%, 13.99% { transform: translateY(-640px); opacity: 0; }
  14% { transform: translateY(-640px); opacity: 1; }
  21% { transform: translateY(0); opacity: 1; }
  23% { transform: translateY(0); opacity: 0; }
  24% { transform: translateY(32px); opacity: 1; }
  42% { transform: translateY(32px); opacity: 1; }
  44% { transform: translateY(32px); opacity: 0; }
  45% { transform: translateY(64px); opacity: 1; }
  67% { transform: translateY(64px); opacity: 1; }
  69% { transform: translateY(64px); opacity: 0; }
  70% { transform: translateY(96px); opacity: 1; }
  88% { transform: translateY(96px); opacity: 1; }
  90% { transform: translateY(96px); opacity: 0; }
  91% { transform: translateY(128px); opacity: 1; }
  93% { transform: translateY(128px); opacity: 1; }
  94% { transform: translateY(128px); opacity: 0; }
  95% { transform: translateY(160px); opacity: 1; }
  97% { transform: translateY(160px); opacity: 1; }
  98% { transform: translateY(160px); opacity: 0; }
  99% { transform: translateY(800px); opacity: 0; }
  100% { transform: translateY(-640px); opacity: 0; }
}

@keyframes fall4 {
  0%, 23.99% { transform: translateY(-640px); opacity: 0; }
  24% { transform: translateY(-640px); opacity: 1; }
  31% { transform: translateY(32px); opacity: 1; }
  42% { transform: translateY(32px); opacity: 1; }
  44% { transform: translateY(32px); opacity: 0; }
  45% { transform: translateY(64px); opacity: 1; }
  67% { transform: translateY(64px); opacity: 1; }
  69% { transform: translateY(64px); opacity: 0; }
  70% { transform: translateY(96px); opacity: 1; }
  88% { transform: translateY(96px); opacity: 1; }
  90% { transform: translateY(96px); opacity: 0; }
  91% { transform: translateY(128px); opacity: 1; }
  93% { transform: translateY(128px); opacity: 1; }
  94% { transform: translateY(128px); opacity: 0; }
  95% { transform: translateY(160px); opacity: 1; }
  97% { transform: translateY(160px); opacity: 1; }
  98% { transform: translateY(160px); opacity: 0; }
  99% { transform: translateY(800px); opacity: 0; }
  100% { transform: translateY(-640px); opacity: 0; }
}

@keyframes fall5 {
  0%, 30.99% { transform: translateY(-640px); opacity: 0; }
  31% { transform: translateY(-640px); opacity: 1; }
  38% { transform: translateY(32px); opacity: 1; }
  42% { transform: translateY(32px); opacity: 1; }
  44% { transform: translateY(32px); opacity: 0; }
  45% { transform: translateY(64px); opacity: 1; }
  67% { transform: translateY(64px); opacity: 1; }
  69% { transform: translateY(64px); opacity: 0; }
  70% { transform: translateY(96px); opacity: 1; }
  88% { transform: translateY(96px); opacity: 1; }
  90% { transform: translateY(96px); opacity: 0; }
  91% { transform: translateY(128px); opacity: 1; }
  93% { transform: translateY(128px); opacity: 1; }
  94% { transform: translateY(128px); opacity: 0; }
  95% { transform: translateY(160px); opacity: 1; }
  97% { transform: translateY(160px); opacity: 1; }
  98% { transform: translateY(160px); opacity: 0; }
  99% { transform: translateY(800px); opacity: 0; }
  100% { transform: translateY(-640px); opacity: 0; }
}

@keyframes fall6 {
  0%, 44.99% { transform: translateY(-640px); opacity: 0; }
  45% { transform: translateY(-640px); opacity: 1; }
  52% { transform: translateY(64px); opacity: 1; }
  67% { transform: translateY(64px); opacity: 1; }
  69% { transform: translateY(64px); opacity: 0; }
  70% { transform: translateY(96px); opacity: 1; }
  88% { transform: translateY(96px); opacity: 1; }
  90% { transform: translateY(96px); opacity: 0; }
  91% { transform: translateY(128px); opacity: 1; }
  93% { transform: translateY(128px); opacity: 1; }
  94% { transform: translateY(128px); opacity: 0; }
  95% { transform: translateY(160px); opacity: 1; }
  97% { transform: translateY(160px); opacity: 1; }
  98% { transform: translateY(160px); opacity: 0; }
  99% { transform: translateY(800px); opacity: 0; }
  100% { transform: translateY(-640px); opacity: 0; }
}

@keyframes fall7 {
  0%, 51.99% { transform: translateY(-640px); opacity: 0; }
  52% { transform: translateY(-640px); opacity: 1; }
  59% { transform: translateY(64px); opacity: 1; }
  67% { transform: translateY(64px); opacity: 1; }
  69% { transform: translateY(64px); opacity: 0; }
  70% { transform: translateY(96px); opacity: 1; }
  88% { transform: translateY(96px); opacity: 1; }
  90% { transform: translateY(96px); opacity: 0; }
  91% { transform: translateY(128px); opacity: 1; }
  93% { transform: translateY(128px); opacity: 1; }
  94% { transform: translateY(128px); opacity: 0; }
  95% { transform: translateY(160px); opacity: 1; }
  97% { transform: translateY(160px); opacity: 1; }
  98% { transform: translateY(160px); opacity: 0; }
  99% { transform: translateY(800px); opacity: 0; }
  100% { transform: translateY(-640px); opacity: 0; }
}

@keyframes fall8 {
  0%, 58.99% { transform: translateY(-640px); opacity: 0; }
  59% { transform: translateY(-640px); opacity: 1; }
  66% { transform: translateY(64px); opacity: 1; }
  67% { transform: translateY(64px); opacity: 1; }
  69% { transform: translateY(64px); opacity: 0; }
  70% { transform: translateY(96px); opacity: 1; }
  88% { transform: translateY(96px); opacity: 1; }
  90% { transform: translateY(96px); opacity: 0; }
  91% { transform: translateY(128px); opacity: 1; }
  93% { transform: translateY(128px); opacity: 1; }
  94% { transform: translateY(128px); opacity: 0; }
  95% { transform: translateY(160px); opacity: 1; }
  97% { transform: translateY(160px); opacity: 1; }
  98% { transform: translateY(160px); opacity: 0; }
  99% { transform: translateY(800px); opacity: 0; }
  100% { transform: translateY(-640px); opacity: 0; }
}

@keyframes fall9 {
  0%, 69.99% { transform: translateY(-640px); opacity: 0; }
  70% { transform: translateY(-640px); opacity: 1; }
  80% { transform: translateY(96px); opacity: 1; }
  88% { transform: translateY(96px); opacity: 1; }
  90% { transform: translateY(96px); opacity: 0; }
  91% { transform: translateY(128px); opacity: 1; }
  93% { transform: translateY(128px); opacity: 1; }
  94% { transform: translateY(128px); opacity: 0; }
  95% { transform: translateY(160px); opacity: 1; }
  97% { transform: translateY(160px); opacity: 1; }
  98% { transform: translateY(160px); opacity: 0; }
  99% { transform: translateY(800px); opacity: 0; }
  100% { transform: translateY(-640px); opacity: 0; }
}

@keyframes fall10 {
  0%, 79.99% { transform: translateY(-640px); opacity: 0; }
  80% { transform: translateY(-640px); opacity: 1; }
  87% { transform: translateY(96px); opacity: 1; }
  88% { transform: translateY(96px); opacity: 1; }
  90% { transform: translateY(96px); opacity: 0; }
  91% { transform: translateY(128px); opacity: 1; }
  93% { transform: translateY(128px); opacity: 1; }
  94% { transform: translateY(128px); opacity: 0; }
  95% { transform: translateY(160px); opacity: 1; }
  97% { transform: translateY(160px); opacity: 1; }
  98% { transform: translateY(160px); opacity: 0; }
  99% { transform: translateY(800px); opacity: 0; }
  100% { transform: translateY(-640px); opacity: 0; }
}