left face from right neighbour

css/stereo.css

@@ -1,7 +1,6 @@
 body {
   background-image: url(stereo/bg.jpg),
-        radial-gradient(
+    radial-gradient(circle at center,
-            circle at center,
       #39444f 0%,
       #2c323b 25%,
       #293036 28%,
@@ -12,8 +11,7 @@ body {
       #151519 63%,
       #141418 65%,
       #0f0f12 74%,
-            #0a0c0d 100%
+      #0a0c0d 100%);
-        );
   background-repeat: round;
 }
 
@@ -54,7 +52,7 @@ body {
   background-image: none;
 }
 
-#screenRow .card > * {
+#screenRow .card>* {
   transform: translateZ(var(--cell-side));
 }
 
@@ -94,108 +92,128 @@ tr.matrix td:not(.mino) {
 .minoes-table td {
   width: var(--cell-side) !important;
   height: var(--cell-side);
+  overflow: visible;
 }
 
 .minoes-table .mino {
   background: radial-gradient(circle at -150% -200%, #fffb 0%, var(--background-color) 100%);
-    overflow: visible;
+
   border-radius: 2px;
 }
 
-.mino::before,
+.minoes-table .mino::before,
-.mino::after {
+.minoes-table .mino + :not(.mino)::before,
+.minoes-table .mino::after {
   content: '';
   position: absolute;
-    display: block;
   top: 0;
   left: 0;
+  display: block;
   width: inherit;
   height: inherit;
   border-radius: 2px;
 }
 
-:not(.mino) + .mino::before {
+.minoes-table .mino::before,
+.minoes-table .mino + :not(.mino)::before {
   background: var(--light-color);
   transform: translateZ(calc(-1 * var(--cell-side))) rotateY(-90deg);
   transform-origin: left;
 }
 
-.mino::before {
+.minoes-table .mino::after {
-    background: var(--dark-color);
-    transform: translateZ(calc(-1 * var(--cell-side))) rotateY(90deg);
-    transform-origin: right;
-}
-
-.mino::after {
   background: var(--light-color);
   transform: translateZ(calc(-1 * var(--cell-side))) rotateX(90deg);
   transform-origin: top;
 }
 
-.bottom .mino::after {
+.bottom .minoes-table .mino::after {
   background: var(--dark-color);
   transform: translateZ(calc(-1 * var(--cell-side))) rotateX(-90deg);
   transform-origin: bottom;
 }
 
-.I.mino {
+.I.mino,
+.I.mino + :not(.mino) {
   --background-color: #42afe1b0;
   --light-color: #6ceaff80;
   --dark-color: #00a4b0b0;
 }
 
-.J.mino {
+.J.mino,
+.J.mino + :not(.mino) {
   --background-color: #1165b5b0;
   --light-color: #339bff80;
   --dark-color: #00009db0;
 }
 
-.L.mino {
+.L.mino,
+.L.mino + :not(.mino) {
   --background-color: #f38927b0;
   --light-color: #ffba5980;
   --dark-color: #c54800b0;
 }
 
-.O.mino {
+.O.mino,
+.O.mino + :not(.mino) {
   --background-color: #f6d03cb0;
   --light-color: #ffff7f80;
   --dark-color: #ca9501b0;
 }
 
-.S.mino {
+.S.mino,
+.S.mino + :not(.mino) {
   --background-color: #51b84db0;
   --light-color: #84f88080;
   --dark-color: #1cbc02b0;
 }
 
-.T.mino {
+.T.mino,
+.T.mino + :not(.mino) {
   --background-color: #9739a2b0;
   --light-color: #d958e980;
   --dark-color: #6e019ab0;
 }
 
-.Z.mino {
+.Z.mino,
+.Z.mino + :not(.mino) {
   --background-color: #eb4f65b0;
   --light-color: #ff7f7980;
   --dark-color: #ad1936b0;
 }
 
-.ghost.mino {
+.ghost.mino,
+.ghost.mino + :not(.mino) {
   --background-color: #8886;
   --light-color: #ccc6;
   --dark-color: #6666;
 }
 
-.locking.mino {
+.locking.mino,
+.locking.mino + :not(.mino) {
   --background-color: #eeeb;
   --light-color: #fffb;
   --dark-color: #dddb;
 }
 
-.disabled.mino {
+.disabled.mino,
+.disabled.mino + :not(.mino) {
   --background-color: #888b;
   --light-color: #cccb;
-    --dark-color: #333b;
+  --dark-color: #6666;
+}
+
+#holdTable .J + :not(.mino),
+#holdTable .L + :not(.mino),
+#holdTable .S + :not(.mino),
+#holdTable .T + :not(.mino),
+#holdTable .Z + :not(.mino),
+#nextTable .J + :not(.mino),
+#nextTable .L + :not(.mino),
+#nextTable .S + :not(.mino),
+#nextTable .T + :not(.mino),
+#nextTable .Z + :not(.mino) {
+  transform: translateX(50%);
 }
 
 @keyframes cleared-line-animation {
@@ -203,6 +221,7 @@ tr.matrix td:not(.mino) {
     background-color: #ceffff66;
     box-shadow: -200px 0 5px white, 200px 0 5px white;
   }
+
   to {
     background-color: transparent;
   }
@@ -213,10 +232,12 @@ tr.matrix td:not(.mino) {
     opacity: 1;
     transform: translateY(200%);
   }
+
   50% {
     transform: translateY(0) scaleY(1);
     line-height: var(--bs-body-line-height);
   }
+
   to {
     opacity: 1;
     transform: translateY(-100%) scaleY(0);
@@ -230,13 +251,16 @@ tr.matrix td:not(.mino) {
     transform: scale3d(0.3, 0.3, 0.3);
     line-height: var(--bs-body-line-height);
   }
+
   30% {
     transform: scale3d(1, 1, 1);
   }
+
   80% {
     transform: scale3d(1, 1, 1);
     line-height: var(--bs-body-line-height);
   }
+
   to {
     opacity: 1;
     transform: scale3d(1.5, 0, 1);
@@ -250,14 +274,17 @@ tr.matrix td:not(.mino) {
     transform: rotate(200deg);
     line-height: var(--bs-body-line-height);
   }
+
   30% {
     transform: translateZ(0);
     transform: scale3d(1, 1, 1);
   }
+
   80% {
     transform: scale3d(1, 1, 1);
     line-height: var(--bs-body-line-height);
   }
+
   to {
     opacity: 1;
     transform: scale3d(1.5, 0, 1);
@@ -270,6 +297,7 @@ tr.matrix td:not(.mino) {
     opacity: 1;
     transform: translateY(200%);
   }
+
   to {
     opacity: 1;
     transform: translateY(0) scaleY(1);