#board {
    position: relative;
    background-image: url('../png/ui/grass.png');
    background-size: 20%;
    border: 2px solid #5f00ff;
    border-radius: var(--board-border-radius);
    box-shadow: 0 0 64px #5f00ff7f;
    transition: all 100ms ease;
}

#board-container {
    transition: all 100ms ease;
}

.card {
    position: absolute;
    display: grid;
    width: var(--card-width);
    height: var(--card-height);
    border-radius: var(--card-border-radius);
    box-shadow: 0 0 4px black;
    transition: all 100ms ease, opacity 250ms ease, transform 250ms ease;
    user-select: none;
    container-type: size;
    grid: var(--card-height) / var(--card-width);

    &.hidden {
        opacity: 0;
        transform: scale(0.8) translateY(calc(-0.5 * var(--card-height)));
    }

    & .background {
        width: 100cqw;
        height: 100cqh;
    }

    & .fill {
        width: 100%;
        height: 100%;
    }

    &.red {
        & .tint {
            filter: hue-rotate(0deg);
        }
    }

    &.orange {
        & .tint {
            filter: hue-rotate(40deg);
        }
    }

    &.yellow {
        & .tint {
            filter: hue-rotate(68deg) saturate(5);
        }
    }

    &.yellow-green {
        & .tint {
            filter: hue-rotate(71deg) saturate(5);
        }
    }

    &.green {
        & .tint {
            filter: hue-rotate(120deg);
        }
    }

    &.turquoise {
        & .tint {
            filter: hue-rotate(170deg);
        }
    }

    &.cyan {
        & .tint {
            filter: hue-rotate(190deg);
        }
    }

    &.blue {
        & .tint {
            filter: hue-rotate(225deg);
        }
    }

    &.violet {
        & .tint {
            filter: hue-rotate(260deg);
        }
    }

    &.purple {
        & .tint {
            filter: hue-rotate(275deg);
        }
    }

    &.pink {
        & .tint {
            filter: hue-rotate(300deg);
        }
    }

    &.magenta {
        & .tint {
            filter: hue-rotate(330deg);
        }
    }

    &.locked {
        box-shadow: calc(-1 * var(--card-border)) var(--card-border) var(--card-border) black, var(--card-border) var(--card-border) var(--card-border) black;

        &[data-z="0"] {
            box-shadow: calc(-1 * var(--card-border)) calc(-1 * var(--card-border)) var(--card-border) black, var(--card-border) calc(-1 * var(--card-border)) var(--card-border) black, calc(-1 * var(--card-border)) var(--card-border) var(--card-border) black, var(--card-border) var(--card-border) var(--card-border) black;
        }
    }

    &:not(.locked):hover {
        box-shadow: 0 0 16px black;
    }

    & .stats {
        opacity: 0;
        transition: all 100ms ease;
        background-color: #0000007f;

        & img.stat {
            width: 16cqw;
            height: 16cqw;
            position: relative;
        }

        & span.stat {
            font-size: 16cqw;
            color: white;
        }
    }

    &:hover {
        & .stats {
            opacity: 1;
        }
    }

    & .contents {
        background-color: #0000003f;

        & img.content {
            width: 24cqw;
            height: 24cqw;
            position: relative;
        }

        & span.content {
            font-size: 24cqw;
            color: white;
        }
    }

    & .progress {
        background-color: transparent;
        width: 0;
        transition: all 50ms ease;

        &.red {
            background-color: #ff00004f;
        }

        &.orange {
            background-color: #ffdf004f;
        }

        &.yellow {
            background-color: #ffbf004f;
        }

        &.yellowgreen {
            background-color: #7fbf004f;
        }

        &.green {
            background-color: #00bf004f;
        }

        &.turquoise {
            background-color: #00ffbf4f;
        }

        &.cyan {
            background-color: #00ffbf4f;
        }

        &.blue {
            background-color: #003fff4f;
        }

        &.violet {
            background-color: #0000df4f;
        }

        &.pink {
            background-color: #bf00bf4f;
        }

        &.magenta {
            background-color: #ff007f4f;
        }
    }

    &[data-child] {
        & .background:not(.tint) > div {
            & div:not(.progress):not(.centered-text) {
                display: none;
            }
        }
    }
}

#preview {
    opacity: 0;
    z-index: 999;
    transition: left 250ms ease, top 250ms ease;
    pointer-events: none;
    backdrop-filter: blur(4px);

    &.valid {
        border: 2px solid #3fff3f;
        background-color: #3f7f3f7f;
    }

    &.invalid {
        border: 2px solid #ff3f3f;
        background-color: #7f3f3f7f;
    }
}

.centered-text {
    text-align: center;
}

b {
    &.colored {
        font-weight: 500;
        margin: 0 1.079cqw;
        text-shadow: -0.25cqw -0.25cqw 0.25cqw black, 0.25cqw -0.25cqw 0.25cqw black, -0.25cqw 0.25cqw 0.25cqw black, 0.25cqw 0.25cqw 0.25cqw black;

        &.red {
            color: #ff0000;
        }

        &.yellow {
            color: #ffbf00;
        }

        &.green {
            color: #00bf00;
        }

        &.turquoise {
            color: #00ffbf;
        }

        &.cyan {
            color: #00ffbf;
        }

        &.blue {
            color: #0000bf;
        }

        &.pink {
            color: #bf00bf;
        }

        &.magenta {
            color: #ff007f;
        }

        &.violet {
            color: #7f00ff;
        }
    }
}

.shop {
    & > .grid {
        background-image: url('../png/ui/book.png');
        background-size: contain;
        display: grid;
        width: var(--shop-width);
        height: var(--shop-height);
        transition: all 100ms ease;
        padding: calc(6 * var(--zoom-16)) calc(7 * var(--zoom-16)) calc(7 * var(--zoom-16)) calc(6 * var(--zoom-16));
        grid-template: repeat(3, var(--card-height) 1fr) / repeat(7, var(--card-width) 1fr);
    }
}

.card-slot {
    position: absolute;
    width: var(--card-width);
    height: var(--card-height);
    transition: all 100ms ease;
    border-radius: var(--zoom-16);
    border: calc(var(--zoom-16) * 0.2) dashed #ffffff3f;
    pointer-events: none;
    opacity: var(--card-slot-opacity);
}