quatuor/css/stereo.css

body {
  background-image: url(stereo/bg.jpg),
    radial-gradient(circle at center,
      #39444f 0%,
      #2c323b 25%,
      #293036 28%,
      #252b32 34%,
      #242930 38%,
      #1a1d22 52%,
      #191c22 53%,
      #151519 63%,
      #141418 65%,
      #0f0f12 74%,
      #0a0c0d 100%);
  background-repeat: round;
}

#sceneDiv {
  perspective: 500px;
  cursor: grab;
}

#sceneDiv:active {
  cursor: grabbing;
}

#sceneDiv * {
  transform-style: preserve-3d;
}

#screenRow {
  --light-x: calc(0.5 - var(--rY) / 90);
  --light-y: calc(0.5 - var(--rX) / 90);
  --light-z: 1;
  display: block;
  transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg)) rotateY(calc((var(--rY)) * 1deg));
}

#screenRow * {
  display: block;
}

#screenRow .col {
  display: inline-block !important;
  width: max-content;
  height: 100%;
  vertical-align: top;
}

.card {
  background: #36394180;
}

#matrixCard {
  background-image: none;
}

#screenRow .card>* {
  transform: translateZ(var(--cell-side));
}

#screenRow .card-header {
  background-color: transparent;
  border: none;
}

.minoes-table th,
.minoes-table td {
  display: inline-block !important;
  width: max-content;
}

.minoes-table tr {
  width: max-content;
  height: var(--cell-side);
}

#statsTable tr {
  display: table;
  width: 100%;
}

#statsTable th,
#statsTable td {
  display: table-cell;
  border: 0;
}

tr.matrix td:not(.mino) {
  border: 0;
  will-change: transform;
  transform: translateZ(0);
}

.minoes-table td {
  width: var(--cell-side) !important;
  height: var(--cell-side);
  overflow: visible;
}

.minoes-table .mino,
.minoes-table .mino::before,
.minoes-table .mino + :not(.mino)::before,
.minoes-table .mino::after {
  --light: calc(
    0.9
    + (var(--light-y) * 0.3)
    + (var(--light-x) * 0.2)
  );
  --center-color: hsla(var(--h), var(--s), calc(var(--l) * var(--light)), var(--a));
  --edge-color: hsla(var(--h), var(--s), calc(var(--l) * (var(--light) * 0.8)), var(--a));
  background: radial-gradient(
    circle at calc(35% + var(--light-x) * 10%) calc(35% + var(--light-y) * 10%),
    var(--center-color) 0%,
    var(--edge-color) 100%
  );
  border-radius: 2px;
}

.minoes-table .mino::before,
.minoes-table .mino + :not(.mino)::before,
.minoes-table .mino::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--cell-side);
  height: var(--cell-side);
}

.minoes-table .mino::before,
.minoes-table .mino + :not(.mino)::before {
  --light: calc(
    1.1
    + (var(--light-x) * 0.5)
    + (var(--light-y) * 0.1)
  );
  transform: translateZ(calc(-1 * var(--cell-side))) rotateY(-90deg);
  transform-origin: left;
}

.right .minoes-table .mino::before,
.right .minoes-table .mino + :not(.mino)::before {
  --light: calc(
    0.85
    + (var(--light-x) * -0.5)
    + (var(--light-y) * -0.1)
  );
  filter: saturate(0.95);
  transform: translateZ(calc(-1 * var(--cell-side))) rotateY(-90deg);
  transform-origin: left;
}

.right .minoes-table .mino:last-child::before {
  transform: translateZ(calc(-1 * var(--cell-side))) rotateY(90deg) !important;
  transform-origin: right !important;
}

.minoes-table .mino::after {
  --light: calc(
    0.9
    + (var(--light-y) * 0.6)
  );
  transform: translateZ(calc(-1 * var(--cell-side))) rotateX(90deg);
  transform-origin: top;
}

.bottom .minoes-table .mino::after {
  --light: calc(
    0.75
    + (var(--light-y) * -0.6)
  );
  filter: saturate(0.95);
  transform: translateZ(calc(-1 * var(--cell-side))) rotateX(-90deg);
  transform-origin: bottom;
}

.I.mino,
.I.mino + :not(.mino) {
  --h: 200deg;
  --s: 70%;
  --l: 52%;
  --a: 0.85;
}

.J.mino,
.J.mino + :not(.mino) {
  --h: 210deg;
  --s: 78%;
  --l: 52%;
  --a: 0.85;
}

.L.mino,
.L.mino + :not(.mino) {
  --h: 28deg;
  --s: 85%;
  --l: 52%;
  --a: 0.85;
}

.O.mino,
.O.mino + :not(.mino) {
  --h: 48deg;
  --s: 88%;
  --l: 52%;
  --a: 0.85;
}

.S.mino,
.S.mino + :not(.mino) {
  --h: 118deg;
  --s: 45%;
  --l: 52%;
  --a: 0.85;
}

.T.mino,
.T.mino + :not(.mino) {
  --h: 293deg;
  --s: 48%;
  --l: 52%;
  --a: 0.85;
}

.Z.mino,
.Z.mino + :not(.mino) {
  --h: 352deg;
  --s: 75%;
  --l: 52%;
  --a: 0.85;
}

.ghost.mino,
.ghost.mino + :not(.mino) {
  --h: 0deg;
  --s: 0%;
  --l: 55%;
  --a: 0.40;
}

.locking.mino,
.locking.mino + :not(.mino) {
  --h: 0deg;
  --s: 0%;
  --l: 92%;
  --a: 0.72;
}

.disabled.mino,
.disabled.mino + :not(.mino) {
  --h: 0deg;
  --s: 0%;
  --l: 45%;
  --a: 0.72;
}

.I.mino,
.I.mino + :not(.mino) {
  --h: 200deg;
  --s: 70%;
  --l: 52%;
  --a: 0.85;
}

.J.mino,
.J.mino + :not(.mino) {
  --h: 210deg;
  --s: 78%;
  --l: 52%;
  --a: 0.85;
}

.L.mino,
.L.mino + :not(.mino) {
  --h: 28deg;
  --s: 85%;
  --l: 52%;
  --a: 0.85;
}

.O.mino,
.O.mino + :not(.mino) {
  --h: 48deg;
  --s: 88%;
  --l: 52%;
  --a: 0.85;
}

.S.mino,
.S.mino + :not(.mino) {
  --h: 118deg;
  --s: 45%;
  --l: 52%;
  --a: 0.85;
}

.T.mino,
.T.mino + :not(.mino) {
  --h: 293deg;
  --s: 48%;
  --l: 52%;
  --a: 0.85;
}

.Z.mino,
.Z.mino + :not(.mino) {
  --h: 352deg;
  --s: 75%;
  --l: 52%;
  --a: 0.85;
}

.ghost.mino,
.ghost.mino + :not(.mino) {
  --h: 0deg;
  --s: 0%;
  --l: 55%;
  --a: 0.40;
}

.locking.mino,
.locking.mino + :not(.mino) {
  --h: 0deg;
  --s: 0%;
  --l: 92%;
  --a: 0.72;
}

.disabled.mino,
.disabled.mino + :not(.mino) {
  --h: 0deg;
  --s: 0%;
  --l: 45%;
  --a: 0.72;
}

#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 {
  from {
    background-color: #ceffff66;
    box-shadow: -200px 0 5px white, 200px 0 5px white;
  }

  to {
    background-color: transparent;
  }
}

@keyframes show-level-animation {
  from {
    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);
    line-height: 0;
  }
}

@keyframes zoom-in-animation {
  from {
    opacity: 1;
    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);
    line-height: 0;
  }
}

@keyframes rotate-in-animation {
  0% {
    opacity: 1;
    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);
    line-height: 0;
  }
}

@keyframes game-over-animation {
  from {
    opacity: 1;
    transform: translateY(200%);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    line-height: var(--bs-body-line-height);
  }
}