improve styles

css/electro.css

@@ -8,10 +8,11 @@ body {
 }
 
 .mino:not(.ghost):not(.locking) {
-    padding: 0;
+    padding: 1px;
     position: relative;
     z-index: 0;
-    box-shadow: -1px -1px 4px rgba(128, 128, 128, 25%),
+    box-shadow:
+        -1px -1px 4px rgba(128, 128, 128, 25%),
         -1px  1px 4px rgba(128, 128, 128, 25%),
          1px -1px 4px rgba(128, 128, 128, 25%),
          1px  1px 4px rgba(128, 128, 128, 25%);
@@ -22,14 +23,15 @@ body {
     position: absolute;
     z-index: -1;
     inset: 0;
-    padding: 1px;
-    border-radius: 0.3vmin;
+    margin: 1px;
+    padding: 2px;
+    border-radius: 4px;
     --glint-x: calc(50% + 50% * (var(--piece-column) - var(--column))/10);
     --glint-y: calc(50% + 50% * (var(--piece-row) - var(--row))/25);
     background: radial-gradient(
         at var(--glint-x) var(--glint-y),
-        rgba(204, 238, 247, 0.9)   0%,
-        rgba(0, 159, 218, 0.9) 150%);
+        rgba(204, 238, 247, 0.7)   0%,
+        rgba(0, 159, 218, 0.7) 150%);
     mask: 
        linear-gradient(#666 0 0) content-box, 
        linear-gradient(#fff 0 0);
@@ -46,6 +48,7 @@ body {
         -1px  1px 8px rgba(242, 255, 255, 16%),
          1px -1px 8px rgba(242, 255, 255, 16%),
          1px  1px 8px rgba(242, 255, 255, 16%);
+    filter: blur(1px);
 }
 
 .moving.mino {
@@ -58,7 +61,8 @@ body {
     border-width: 1px;
     background: rgba(186, 211, 255, 70%);
     border-color: rgba(242, 255, 255, 0.7);
-    box-shadow: -1px -1px 4px rgba(186, 211, 255, 27%),
+    box-shadow:
+        -1px -1px 4px rgba(186, 211, 255, 27%),
         -1px  1px 4px rgba(186, 211, 255, 27%),
          1px -1px 4px rgba(186, 211, 255, 27%),
          1px  1px 4px rgba(186, 211, 255, 27%);

css/minimal.css

@@ -71,7 +71,7 @@ tr.matrix td:not(.mino) {
 }
 
 .ghost.mino {
-    --background-color: rgba(175, 175, 175, 80%);
+    opacity: 50%;
     box-shadow: none;
 }
 
@@ -99,6 +99,6 @@ tr.matrix td:not(.mino) {
         background-color: #eeeeee;
     }
     to {
-        background-color: #363941;
+        background-color: transparent;
     }
 }

css/pop.css

@@ -15,40 +15,41 @@ body {
 }
 
 .mino {
-    background: rgba(255, 255, 255, 10%);
-    border: 5px solid;
+    background: rgba(255, 255, 255, 33%);
+    border: 6px solid var(--color);
     padding: 0;
     opacity: 100%;
     border-radius: 4px;
-    filter: blur(1px)
+    filter: blur(1px);
+    box-shadow: 0 0 10px var(--color);
 }
 
 .I.mino {
-    border-color: #9bf6ff;
+    --color: #9bf6ff;
 }
 
 .J.mino {
-    border-color: #a0c4ff;
+    --color: #a0c4ff;
 }
 
 .L.mino {
-    border-color: #ffd6a5;
+    --color: #ffd6a5;
 }
 
 .O.mino {
-    border-color: #fdffb6;
+    --color: #fdffb6;
 }
 
 .T.mino {
-    border-color: #bdb2ff;
+    --color: #bdb2ff;
 }
 
 .S.mino {
-    border-color: #caffbf;
+    --color: #caffbf;
 }
 
 .Z.mino {
-    border-color: #ffadad;
+    --color: #ffadad;
 }
 
 .ghost.mino {
@@ -61,14 +62,14 @@ body {
 }
 
 .locking.mino {
-    border-color: white;
+    --color: white;
     filter: blur(2px);
 }
 
 @keyframes locked-animation {
     from {
         background: white;
-        border-color: white;
+        --color: white;
     }
 }