:root {
  --rbw: 4px;
  --tl: calc(-1 * var(--rbw));
  --cell-size-opposite: calc(-1 * var(--cell-size));
  --t3d: translate3d(var(--tl), var(--tl), var(--cell-size-opposite));
}

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: space;
    background-position: center;
    background-size: cover;
}

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

#sceneDiv:active {
    cursor: grabbing;
}

#screenRow {
  --light-rX: calc(-1 * var(--rY) / 30);
  --light-rY: calc(var(--rX) / 20);
    display: block;
    transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg))
        rotateY(calc((var(--rY)) * 1deg));
    transition: transform ease-in-out .3s;
}

#sceneDiv,
#screenRow,
#screenRow .col,
#screenRow .card,
#screenRow .card-body,
.minoes-table,
.minoes-table tbody,
.minoes-table tr,
.minoes-table td {
    display: block;
    transform-style: preserve-3d;
}

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

.card {
    background: #36394180;
}

#matrixCard {
    background-image: none;
    transform-origin: bottom;
}

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

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

.card,
.card-header {
    text-shadow: calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
    transition: text-shadow ease-in-out .3s;
}

#holdTable .mino {
  --row: 7;
  --column: -5;
}

#nextTable .mino {
  --row: 15;
  --column: 15;
}

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

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

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

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

tr.matrix td:not(.mino) {
    border: 0;
}

.minoes-table td {
    width: var(--cell-size);
    height: var(--cell-size);
    overflow: visible;
    position: relative;
}

.mino,
.mino::before,
.mino + :not(.mino)::before,
.mino::after {
  --light-pX: calc(0.5 - var(--column) / 10);
  --light-pY: calc(3.5 - var(--row) / 6);
  --light-x: calc(var(--light-rX) + var(--light-pX));
  --light-y: calc(var(--light-rY) + var(--light-pY));
  --center-color: hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.1), var(--a));
  --edge-color: hsla(var(--h), var(--s), calc(var(--l) * (var(--light) * 0.9)), var(--a));
    background: var(--center-color);
    border-radius: 4px;
    border: 2px outset var(--center-color);
}

.mino::before,
.mino + :not(.mino)::before,
.mino::after,
td.trail-animation::before,
td.trail-animation::after,
tr.cleared-line-animation td::before,
tr.cleared-line-animation td::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: var(--cell-size);
    height: var(--cell-size);
}

/* Front face */
.mino,
td.trail-animation {
  --light: calc(1 + (var(--light-y) * 0.3) + (var(--light-x) * 0.2));
  --center-x: calc(35% + var(--light-x) * 10%);
  --center-y: calc(35% + var(--light-y) * 10%);
    background: radial-gradient(
        circle at var(--center-x) var(--center-y),
        var(--center-color) 15%,
        var(--edge-color) 100%
    );
    box-shadow: 0 0 6px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 40%);
    border-style: ridge;
    border-width: var(--rbw);
}

/* Left face */
.mino::before,
td.trail-animation::before,
tr.cleared-line-animation td::before,
.mino + .mino::before {
  --light: calc(1.1 + (var(--light-x) * -0.2) + (var(--light-y) * 0.15));
    transform: var(--t3d) rotateY(-90deg);
    transform-origin: left;
}

/* Right face */
.mino + :not(.mino)::before,
.right .mino + .mino::before,
.right td.trail-animation::before,
.right tr.cleared-line-animation td::before {
  --light: calc(0.85 + (var(--light-x) * -0.2) + (var(--light-y) * -0.15));
  --center-x: calc(65% + var(--light-x) * 10%);
  --center-y: calc(35% + var(--light-y) * 10%);
    filter: saturate(0.95);
    transform: translate3d(0, 0, var(--cell-size-opposite)) rotateY(-90deg);
    transform-origin: left;
}

.right .mino:last-child::before {
    transform: var(--t3d) rotateY(90deg) !important;
    transform-origin: right !important;
}

/* Top face */
.mino::after,
td.trail-animation::after,
tr.cleared-line-animation td::after {
  --light: calc(1.5 + (var(--light-y) * 0.2));
    transform: var(--t3d) rotateX(90deg);
    transform-origin: top;
}

/* Bottom face */
.bottom .mino::after,
.bottom td.trail-animation::after,
.bottom tr.cleared-line-animation td::after {
  --light: calc(1.1 + (var(--light-y) * -0.3));
  --center-x: calc(65% + var(--light-x) * 10%);
  --center-y: calc(65% + var(--light-y) * 10%);
    filter: saturate(0.95);
    transform: var(--t3d) rotateX(-90deg);
    transform-origin: bottom;
}

.J,
.J + :not(.mino) {
  --h: 210deg;
  --s: 78%;
  --l: 52%;
  --a: 0.75;
}
.L,
.L + :not(.mino) {
  --h: 28deg;
  --s: 85%;
  --l: 52%;
  --a: 0.75;
}
.O,
.O + :not(.mino) {
  --h: 48deg;
  --s: 88%;
  --l: 52%;
  --a: 0.75;
}
.I,
.I + :not(.mino) {
  --h: 200deg;
  --s: 70%;
  --l: 52%;
  --a: 0.75;
}
.S,
.S + :not(.mino) {
  --h: 118deg;
  --s: 45%;
  --l: 52%;
  --a: 0.75;
}
.T,
.T + :not(.mino) {
  --h: 293deg;
  --s: 48%;
  --l: 52%;
  --a: 0.75;
}
.Z,
.Z + :not(.mino) {
  --h: 352deg;
  --s: 75%;
  --l: 52%;
  --a: 0.75;
}

.ghost.mino,
.ghost.mino + :not(.mino) {
  --h: 0deg;
  --s: 0%;
  --l: 55%;
  --a: 0.4;
}
.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 trail-animation {
    from {
        background-color: hsla(180, 100%, 100%, 0.1);
        border-color: hsla(180, 100%, 100%, 0.1);
    }
    to {
        background-color: transparent;
        border-color: transparent;
    }
}

td.trail-animation::before,
td.trail-animation::after {
    animation: trail-animation ease-out 0.3s;
}

@keyframes hard-dropped-table-animation {
    50% {
        transform: translateY(10px) rotateX(-3deg);
    }
}

@keyframes locked-animation {
    from {
      --h: 0deg;
      --s: 0%;
      --l: 100%;
      --a: 1;
        box-shadow: 0 0 10px hsla(180, 100%, 100%, 0.2);
    }
}

.locked.mino::before,
.locked.mino::after {
    animation: locked-animation;
    animation-duration: 0.2s;
}

@keyframes cleared-line-animation {
    from {
        background-color: white !important;
        box-shadow: 0 0 0 white;
    }
    to {
        background-color: #fff0;
        box-shadow: 0 0 100px transparent;
    }
}

tr.cleared-line-animation td::before,
tr.cleared-line-animation td::after {
    animation: cleared-line-animation ease-out 0.3s;
}

@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) 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);
    }
}
