/* /KeyboardKey.razor.rz.scp.css */
.key[b-vd9fhnrs19] {
    height: 58px;
    background-color: #d3d6da;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    transition: background-color 0.1s;
}

    .key:hover[b-vd9fhnrs19] {
        background-color: #bbbfc4;
    }

    .key.letter[b-vd9fhnrs19] {
        width: 43px;
    }

    .key.enter[b-vd9fhnrs19] {
        width: 65px;
        font-size: 12px;
    }

    .key.backspace[b-vd9fhnrs19] {
        width: 65px;
        font-size: 18px;
    }

.spacer[b-vd9fhnrs19] {
    width: 32px;
}
/* /LetterBox.razor.rz.scp.css */
.tile[b-goiryyzgao] {
    width: 62px;
    height: 62px;
    border: 2px solid #d3d6da;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    color: #000000;
    text-transform: uppercase;
}

    .tile.finalwrong[b-goiryyzgao] {
        --background-color: #AB6565;
        --border-color: #AB6565;
        border-color: #565758;
        animation: flip-b-goiryyzgao 0.5s ease forwards;
    }

    .tile.right[b-goiryyzgao] {
        --background-color: #6aaa64;
        --border-color: #6aaa64;
        border-color: #565758;
        animation: flip-b-goiryyzgao 0.5s ease forwards;
    }

    .tile.wrong_space[b-goiryyzgao] {
        --background-color: #c9b458;
        --border-color: #c9b458;
        border-color:#565758;
        animation: flip-b-goiryyzgao 0.5s ease forwards;
    }

    .tile.wrong_letter[b-goiryyzgao] {
        --background-color: #787c7e;
        --border-color: #787c7e;
        border-color: #565758;
        animation: flip-b-goiryyzgao 0.5s ease forwards;
    }

    .tile.unsubmitted[b-goiryyzgao] {
        border-color: #565758;
        animation: bloom-b-goiryyzgao 0.2s ease-in-out forwards;
    }

    .tile.unused[b-goiryyzgao]{
        border-color:#e5e5e5;
        background-color:#f5f5f5;
    }

    .tile.copmlete.firstcolumn[b-goiryyzgao]{
        animation-delay:0s;
    }
    .tile.complete.secondcolumn[b-goiryyzgao] {
        animation-delay: 0.2s;
    }
    .tile.complete.thirdcolumn[b-goiryyzgao] {
        animation-delay: 0.4s;
    }
    .tile.complete.fourthcolumn[b-goiryyzgao] {
        animation-delay: 0.6s;
    }
    .tile.complete.fifthcolumn[b-goiryyzgao] {
        animation-delay: 0.8s;
    }

@keyframes bloom-b-goiryyzgao {
    0% {
        transform: scale(0.8);
        opacity:0;
        
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        
    }
}

    @keyframes flip-b-goiryyzgao {
        0% {
            transform: rotateX(0);
            background-color: #fff;
            border-color: #565758;
            color: #000;
        }
        45% {
            transform: rotateX(90deg);
            background-color: #fff;
            border-color: #565758;
            color: #000;
        }
        55% {
            transform: rotateX(90deg);
            background-color: var(--background-color);
            border-color: var(--border-color);
            color: #fff;
        }
        100% {
            transform: rotateX(0);
            background-color: var(--background-color);
            border-color: var(--border-color);
            color: #fff;
        }
    }