:root
{
    --max-keyboard-width: 600px;
}


body
{
    width: 100vw;
    height: 100vh;

    background-color: var(--bg-colour);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}














div.header
{
    padding: 20px 0 0 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;

    color: var(--text-colour);
}















div.game-space
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


div.board
{
    width: fit-content;
    height: fit-content;

    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

div.row
{
    width: fit-content;
    height: fit-content;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

div.cell
{
    width: 60px;
    height: 60px;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    transition: border-color 200ms;
    border: 2px solid var(--lighten);
    border-radius: 1px;

    background-color: var(--neutral-colour);

    cursor: pointer;
}

div.cell.yellow
{
    background-color: var(--medium-colour);
}
div.cell.green
{
    background-color: var(--good-colour);
}
div.cell.selected
{
    border: 3px solid var(--text-colour);
}
div.cell.selected.locked
{
    border: 3px solid var(--text-colour-disabled);
}

div.cell p.char
{
    display: block;

    /* font-family: sans-serif; */
    font-size: 42px;
    font-weight: bold;
    text-align: center;
    color: var(--text-colour);

    user-select: none;
}

div.cell p.value
{
    display: block;
    position: absolute;
    bottom: 0px;
    right: 2px;

    /* font-family: sans-serif; */
    font-size: 12px;
    text-align: right;
    color: var(--text-colour);

    user-select: none;
}

div.cell.duplicate-letter p.value
{
    color: var(--bad-colour);
}
div.cell.green p.value
{
    color: var(--heavy-lighten);
}

div.cell.locked p.char
{
    color: var(--text-colour-disabled);
}




/* ANIMATIONS */
.anim-cell-pulse
{
    animation-name: cell-pulse;
    animation-duration: 200ms;
    animation-iteration-count: 1;
}
@keyframes cell-pulse
{
    0%
    {
        transform: scale(100%);
    }
    50%
    {
        transform: scale(105%);
    }
    100%
    {
        transform: scale(100%);
    }
}

.anim-bad-guess
{
    animation-name: bad-guess;
    animation-duration: 400ms;
    animation-iteration-count: 1;
}
@keyframes bad-guess
{
    0%
    {
        transform: translateX(0px);
        filter: drop-shadow(0 0 0 var(--deep-bad-colour));
    }
    12.5%
    {
        transform: translateX(-5px);
    }
    37.5%
    {
        transform: translateX(5px);
        filter: drop-shadow(0 0 10px var(--deep-bad-colour));
    }
    62.5%
    {
        transform: translateX(-5px);
        filter: drop-shadow(0 0 10px var(--deep-bad-colour));
    }
    87.5%
    {
        transform: translateX(5px);
    }
    100%
    {
        transform: translateX(0px);
        filter: drop-shadow(0 0 0 var(--deep-bad-colour));
    }
}

div.cell.lock-anim
{
    transition: transform 100ms;
    transform: scale(90%);
    animation: lock-shake;
    animation-delay: 100ms;
    animation-duration: 100ms;
    animation-iteration-count: 1;
}

@keyframes lock-shake
{
    0% { transform: translate(0px, 0px) scale(90%); }
    25% { transform: translate(1px, -1px) scale(90%); }
    75% { transform: translate(-1px, 1px) scale(90%); }
    100% { transform: translate(0px, 0px) scale(90%); }
}

div.cell.mistake
{
    border-color: var(--bad-colour);
}






















div.menu-bar
{
    padding: 0 0 20px 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;

    color: var(--text-colour);
}













div.keyboard-section
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div.keyboard
{
    width: 100%;
    max-width: var(--max-keyboard-width);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 5px;
}

div.keyboard-row
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

div.key
{
    cursor: pointer;

    flex-grow: 1;
    min-width: 30px;
    max-width: 50px;
    height: 50px;
    padding: 5px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-radius: 5px;

    background-color: var(--bg-colour-lighter);
}
div.key.valid-key
{
    background-color: var(--bg-colour-very-light);
}
div.key.wide
{
    flex-grow: 1.5;
    min-width: 45px;
    max-width: 75px;
}
div.key:active
{
    background-color: var(--bg-colour);
}

div.key p
{
    font-size: 24px;
    font-weight: bold;
    color: var(--text-colour-disabled);
    text-align: center;
    user-select: none;
}
div.key.valid-key p
{
    color: var(--text-colour);
}