/* KEYBOARD */

.keyboard {
    color: #062034;
    touch-action: manipulation;
    display: flex;
    flex-direction: column;

    padding-top: 0.5rem;
}

.keyboard-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.keyboard-key {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: #062034;
    background-color: #dce3ee;
    border-radius: 3px;
    margin: 0.1rem;
    cursor: pointer;

    font-size: 2rem;
    width: 5rem;
    height: 5rem;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.enter-key {
    width: 10rem;
    font-size: 1.5rem;
}

/* END KEYBOARD */

/* GEM GAME */

#patnactka {
    display: flex;
    justify-content: center;
}

.gem-game {
    display: flex;
    flex-direction: column;
    touch-action: manipulation;
}

.gem-row {
    display: flex;
    flex-direction: row;
}

.gem-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    border: 3px solid #124578;
    color: #124578;
    border-radius: 10px;
    margin: 0.25rem;
    font-weight: bold;
    width: 5rem;
    height: 5rem;
    cursor: pointer;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

/* END GEM GAME */

/* WORDLE */
#slovo-dne {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wordle-text {
    font-size: 2rem;
    padding-top: 1.5rem;
}

.wordle-game {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
}

.colors-hint {
    list-style: none;
}

.hint-item {
    display: flex;
    flex-direction: row;
    align-items: baseline;

}

.hint-box {
    padding: 0.5rem;
    max-width: 8rem;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0.5rem 0.5rem 0 0;

    border-radius: 3px;
}

.wordle-row {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.wordle-cell {
    color: #124578;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    border: 3px solid #99badd;
    border-radius: 3px;
    margin: 0.1rem;
    width: 20%;
    aspect-ratio: 1 / 1;
    cursor: pointer;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

@media (max-width: 850px) {
    .keyboard-key {
        font-size: 1.5rem;
        width: 3.25rem;
        height: 4rem;
    }

    .enter-key {
        width: 7.5rem;
        font-size: 1.5rem;
    }
}

@media (max-width: 500px) {
    .wordle-cell {
        font-size: 2rem;
    }

    .keyboard-key {
        font-size: 1rem;
        width: 2rem;
        height: 3.5rem;
    }

    .enter-key {
        width: 5rem;
        font-size: 1rem;
    }
}

@media (max-width: 300px) {
    .wordle-cell {
        font-size: 1rem;
    }
}

.right-guess {
    color: #fff;
    background-color: #124578;
    border-color: #124578;
}

.right-letter {
    color: #fff;
    background-color: #faaa32;
    border-color: #faaa32;
}

.wrong-letter {
    color: #124578;
    background-color: #99badd;
}

.hit {
    color: #fff;
    background-color: #124578;
}

.miss {
    color: #124578;
    background-color: #99badd;
}

.almost {
    color: #fff;
    background-color: #faaa32;
}

/* SUDOKU */

.sudoku-game {
    display: flex;
    justify-content: center;
    margin: 1rem;
    touch-action: manipulation;
}

.sudoku-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    border: 1px solid #062034;
    color: #062034;
    background-color: #fff;
    width: 4rem;
    height: 4rem;
    cursor: pointer;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

@media (max-width: 850px) {
    .sudoku-key {
        font-size: 2rem;
        width: 5rem;
        height: 5rem;
    }
}


@media (max-width: 650px) {
    .sudoku-cell {
        font-size: 2rem;
        width: 3rem;
        height: 3rem;
    }
}

@media (max-width: 500px) {
    .sudoku-cell {
        font-size: 1.5rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .sudoku-key {
        font-size: 2rem;
        width: 4rem;
        height: 4rem;
    }
}

@media (max-width: 400px) {
    .sudoku-cell {
        font-size: 1rem;
        width: 2rem;
        height: 2rem;
    }
}

@media (max-width: 320px) {
    .sudoku-cell {
        font-size: 0.75rem;
        width: 1.5rem;
        height: 1.5rem;
    }

    .sudoku-key {
        font-size: 1rem;
        width: 3rem;
        height: 3rem;
    }
}

#sudoku-submit {
    display: flex;
    justify-content: center;
    margin: 1rem;
}

.sudoku-column:nth-child(3n) .sudoku-cell {
  border-right: 3px solid #062034;
}

.sudoku-column:nth-child(1) .sudoku-cell {
  border-left: 3px solid #062034;
}

.sudoku-column .sudoku-cell:nth-child(3n) {
  border-bottom: 3px solid #062034;
}

.sudoku-column .sudoku-cell:nth-child(1) {
  border-top: 3px solid #062034;
}

.filled {
    color: #062034;
    background-color: #dce3ed;
}

.active {
    background-color: #faaa32;
}

/* END SUDOKU */