* { touch-action: manipulation; }

.wordle-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 50px;
    user-select: none;
    gap: 5px;
}

.round {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-width: 500px;
}

.letter-group {
    display: flex;
    gap: 5px;
}

.letter {
    border: 2px solid gray;
    min-height: 55px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 220%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

@keyframes pop {
    50% { transform: scale(110%); }
    100% { transform: scale(100%); }
}

.none:active,
.correct:active,
.misplaced:active,
.wrong:active {
    animation: pop 0.5s;
}

.correct {
    color: white;
    background-color: rgb(106, 170, 100);
    border-color: rgb(106, 170, 100);
}

.misplaced {
    color: white;
    background-color: rgb(201, 180, 88);
    border-color: rgb(201, 180, 88);
}

.wrong {
    color: white;
    background-color: rgb(120, 124, 126);
    border-color: rgb(120, 124, 126);
}

button {
    min-width: 30px;
    cursor: pointer;
    border: 0;
    background-color: lightblue;
    color: white;
    font-weight: 900;
    font-size: 30px;
    border-radius: 5px;
    padding: 0 15px;
}

button:active {
    transform: translateY(5px);
}

button:hover {
    transition: all 0.5s ease;
    background-color: rgb(173, 191, 230);
}

.round.two,
.round.three,
.round.four,
.round.five,
.round.six {
    visibility: hidden;
}

@media screen and (max-width: 480px) {
    .letter {
        min-height: 40px;
        font-size: 160%;
    }

    button {
        font-size: 20px;
        padding: 0 5px;
    }
}