@font-face {
    font-family: "Tetris";
    src: url("../fonts/Tetris-2dLLw1X.ttf") format("opentype") tech(color-COLRv1);
}

:root {
    --border-color: rgba(241, 241, 241, 0.5);
    --spacing-xs: 3px;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 18px;
    --spacing-5: 24px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --light: white;
    --dark: black;
    box-sizing: border-box;
    --linear-bg: linear-gradient(
        0,
        rgba(15, 26, 38, 1) 0%,
        rgba(39, 67, 97, 1) 100%
    );
    --size: min(5vw, 20px);
}

body {
    margin: 0;
    background-image: url("../images/tetris-bB38Ii6.jpg");
    width: 100%;
    font-family: Tetris;
    background-size: cover;
    height: 100%;
}

h1 {
    text-transform: uppercase;
    font-size: clamp(1rem, 4vw, 2.5rem);
    margin-bottom: 0;
    position: fixed;
    inset: var(--spacing-5);
    color: var(--light);
}

input[type="text"] {
    --bg: #fafafa25;
    padding: var(--spacing-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--light);
    background-color: var(--bg);
    color: var(--light);
    font-size: 1.2rem;
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: rgb(221, 225, 230);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: black;
    padding: var(--spacing-1);
    &:hover {
        filter: brightness(95%);
    }
    &:active {
        filter: brightness(105%);
    }
}

dialog {
    display: flex;
    flex-direction: column;
    z-index: 2;
    top: 20vh;
    min-width: 30vw;
    gap: var(--spacing-2);
    padding: var(--spacing-5);
    border-radius: var(--radius-md);
    border: 5px outset var(--border-color);
    text-align: center;
    background: var(--linear-bg);
    color: var(--light);
    height: fit-content;
    font-family: "Courier New", Courier, monospace;
    .instructions {
        margin-bottom: var(--spacing-3);
        p {
            text-align: left;
            font-size: 0.8rem;
        }
    }
    .header {
        margin-bottom: var(--spacing-1);
    }
    &::after {
        content: "";
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - var(--spacing-2) * 2);
    margin-inline: var(--spacing-2);
    & > .game-wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-1);
    }
}

footer {
    margin-block-start: var(--spacing-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Courier New", Courier, monospace;
    width: calc(100% - var(--spacing-4) * 2);
    color: var(--dark);
    font-size: 0.8em;
    & a:link, a:visited {
        color: var(--dark);
    }
    & a:hover {
        color: var(--dark);
    }

    .credits {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-1);
        color: var(--dark);
        text-decoration: none;
        height: min-content;
        > div {
            justify-content: center;
            display: inherit;
            align-items: inherit;
            gap: var(--spacing-1);
        }
    }
}

.gameboard {
    position: relative;
    display: flex;
    width: 100%;

    &::before {
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--light);
        z-index: 1;
        inset: 0;
        position: absolute;
        font-size: 1.5rem;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
    }
    &.pause::before {
        content: "Pause";
    }
    &.pause.waiting::before {
        content: "Waiting for other player";
    }
    &.pause.gameover::before {
        content: "Game Over";
    }
    &.pause.waiting.youwin::before {
        content: "You win";
    }
}

.board-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    width: 100%;

    .board {
        display: flex;
    }

    .controls {
        background: var(--linear-bg);
        color: var(--light);
        font-family: "Courier New", Courier, monospace;
        div {
            display: grid;
            grid-template-columns: repeat(10, 25px);
            grid-template-rows: repeat(4, 25px);
            max-width: 100%;
            justify-content: center;
            gap: var(--spacing-1);
            border-radius: var(--radius-md) 0 0 var(--radius-md);
            padding: var(--spacing-2);
            button {
                font-size: 2em;
                &:nth-child(1) {
                    grid-column: 1 / span 2;
                    grid-row: 2 / span 2;
                }
                &:nth-child(2) {
                    grid-column: 3 / span 2;
                    grid-row: 2 / span 2;
                }

                &:nth-child(3) {
                    grid-column: -5 / span 2;
                    grid-row: 1 / span 2;
                }
                &:nth-child(4) {
                    grid-column: -4 / span 2;
                    grid-row: 3 / span 2;
                }
                &:nth-child(5) {
                    grid-column: -3 / span 2;
                    grid-row: 1 / span 2;
                }
            }
        }
        small {
            width: 100%;
            margin: var(--spacing-3);
            text-align: center;
        }
    }
}

.game-info {
    display: flex;
    width: fit-content;
    justify-content: space-center;
    align-self: center;

    font-family: "Courier New", Courier, monospace;
    border: 5px inset var(--light);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    padding: var(--spacing-2);
    color: var(--light);
    background: var(--linear-bg);
}

.game {
    background: #0f1a26;
    background: linear-gradient(
        0,
        rgba(15, 26, 38, 1) 0%,
        rgba(39, 67, 97, 1) 100%
    );
    width: 100%;
    border: 5px inset var(--light);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    display: grid;
    gap: var(--spacing-xs);
    grid-template-columns: repeat(var(--width), var(--size));
    grid-template-rows: repeat(var(--height), var(--size));
}

.left {
    display: flex;
    flex-direction: column;
    width: 150px;
    justify-content: space-between;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-right: 3px inset var(--light);
    height: 100%;
    & > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--spacing-2);
        color: var(--light);
        padding: var(--spacing-2);
        height: 100%;
        background: linear-gradient(
            0,
            rgba(15, 26, 38, 1) 0%,
            rgba(39, 67, 97, 1) 100%
        );
        border-radius: var(--radius-md);
        place-items: center;
        border: 3px inset var(--light);
        font-size: 1.8rem;
        font-weight: 500;
        span {
            border: 1px inset var(--light);
            border-radius: var(--radius-md);
            text-transform: uppercase;
            padding-inline: var(--spacing-2);
            padding-block: var(--spacing-1);
            font-size: 1rem;
        }
    }

    .next {
        display: grid;
        grid-template-columns: repeat(6, var(--size));
        grid-template-rows: repeat(3, var(--size));
        gap: 6px;
        .tetromino {
            display: contents;
            .brick {
                width: 100%;
                height: 100%;
                border: 2px outset var(--border-color);
                grid-row: calc(var(--y) + 1);
                grid-column: calc(var(--x) - 3);
            }
        }
    }
}

.tetromino {
    display: contents;
}

.brick {
    border: 2px outset var(--border-color);
    background-color: var(--color, "grey");
    --light-color: color-mix(in srgb, var(--color) 75%, black 25%);
    background: linear-gradient(0, var(--light-color) 20%, var(--color) 100%);
    grid-column: var(--x);
    grid-row: var(--y);
}

.youwin {
    color: #31c7ef;
    font-weight: bold;
    padding-inline-start: var(--spacing-1);
}