@font-face {
    font-family: "Necto Mono";
    src: url("/assets/NectoMono-Regular.woff2");
}

:root {
    font-family: "Necto Mono", monospace;
}

span,
button,
input,
select {
    font-family: "Necto Mono";
    color: black;
}

button {
    border: 1px solid black;
    background: none;
    background-color: #ddd;
    border-radius: 5px;
    padding: 0.1rem 0.3rem;
}

* {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
p {
    font-weight: normal;
    font-variant-ligatures: none;
    font-size: 1rem;
}

body {
    width: 100vw;
    height: 100svh;
    touch-action: none;

    & > div {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 1rem;
    align-items: center;

    h1 {
        font-size: 1.5rem;
    }

    form {
        display: flex;
        gap: 10px;
        align-items: stretch;
        flex-wrap: wrap;

        input,
        select {
            font-size: 1rem;
            border-radius: 5px;
            border: 1px solid black;
            background-color: #eee;
            padding: 0 0.3rem;
        }
    }
}

#placeholder {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    --cell-size: min(
        calc(100vw / var(--playfield-width)),
        calc(50svh / var(--playfield-height)),
        100px
    );

    @media (min-width: 700px) {
        flex-direction: row;
        --cell-size: min(
            calc(60vw / var(--playfield-width)),
            calc(80svh / var(--playfield-height)),
            100px
        );
    }
}

#playfield {
    display: grid;
    grid-template-columns: repeat(var(--playfield-width), 1fr);
    grid-template-rows: repeat(var(--playfield-height), 1fr);
    width: calc(var(--playfield-width) * var(--cell-size));
    height: calc(var(--playfield-height) * var(--cell-size));
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.cell {
    background-color: #bbb;
    position: relative;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    top: -4px;
    left: -4px;

    &.n.e {
        border-top-right-radius: 5px;
    }

    &.n.w {
        border-top-left-radius: 5px;
    }

    &.s.e {
        border-bottom-right-radius: 5px;
    }

    &.s.w {
        border-bottom-left-radius: 5px;
    }

    .hitbox-e,
    .hitbox-s {
        position: absolute;
        width: 90%;
        height: 90%;
        cursor: pointer;
        z-index: 1;
        pointer-events: all;
    }

    .hitbox-e {
        right: calc(-45% + 4px);
        top: 5%;
    }

    .hitbox-s {
        bottom: calc(-45% + 4px);
        right: 5%;
    }
}

.region-container {
    display: contents;
}

.region {
    position: absolute;
    border: 0px dashed black;
    inset: 5px;
    border-radius: 2px;
    z-index: 3;
    pointer-events: none;

    &.n {
        border-top-width: 2px;
    }

    &.s {
        border-bottom-width: 2px;
    }

    &.e {
        border-right-width: 2px;
    }

    &.w {
        border-left-width: 2px;
    }
}

.badge {
    z-index: 4;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid black;
    background-color: white;
    margin-top: -14px;
    margin-left: -14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.invalid-region .badge {
    border-color: red;
    background-color: pink;
}

.domino {
    background-color: white;
    border: 2px solid black;
    border-radius: 5px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: min(calc(0.66 * var(--cell-size)), 32px);
    position: absolute;

    .divider {
        height: 80%;
        width: 2px;
        background-color: gray;
    }

    &.selected {
        border-color: cornflowerblue;
        transform: scale(1.05, 1.1);
        opacity: 0.8;
    }

    .left,
    .right {
        transform: rotate(calc(-1 * var(--rotation)));
        width: calc(50% - 1px);
    }
}

.domino-container {
    position: relative;
    border: none;
    touch-action: manipulation;
    cursor: pointer;

    &.dragging {
        pointer-events: none;
    }
}

#played-dominoes {
    display: contents;

    .domino-container {
        width: calc(var(--cell-size) * 2);
        height: calc(var(--cell-size));
        background-color: transparent;
        transform-origin: 25% center;
        grid-column: var(--pos-x) / span 2;
        grid-row: var(--pos-y);
        z-index: 2;
        transform: rotate(var(--rotation));
    }

    .domino {
        inset: 1px;
    }
}

#dominoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    max-width: 500px;

    .domino-container {
        background-color: lightgray;
        width: calc(var(--cell-size) * 2 + 10px);
        height: calc(var(--cell-size) + 10px);
        border-radius: 5px;

        .domino {
            transform: rotate(var(--rotation));
            position: absolute;
            inset: 5px;
            z-index: 2;

            &.selected {
                transform: rotate(var(--rotation)) scale(1.05, 1.1);
                z-index: 3;
            }
        }

        &.placed {
            pointer-events: none;

            .domino {
                display: none;
            }
        }
    }
}

#popup-container {
    position: absolute;
    inset: 0;
    background-color: #0004;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;

    &.hidden {
        display: none;
    }

    #popup-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        border-radius: 5px;
        background-color: white;
        align-items: center;
        max-width: min(70%, 300px);

        p {
            text-align: center;
        }

        h1 {
            font-size: 1.5rem;
        }

        div {
            display: flex;
            gap: 1rem;
        }
    }
}