.game {
  user-select: none; }
  .game .game__info {
    user-select: none;
    color: #15202b; }
  .game__container {
    display: flex;
    justify-content: center;
    width: 100%; }
  .game__content {
    position: relative;
    background: #fff;
    border: 1px solid; }

.game-container {
  min-height: 690px; }

.widget__game {
  gap: .5rem; }

.widget__field {
  border: 1px solid;
  padding: .5rem;
  display: flex;
  flex-direction: column;
  margin: auto;
  width: fit-content;
  background: #fff; }

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

.wordle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: .5rem; }
  .wordle.rtl {
    direction: rtl; }
  .wordle.wrong .word {
    outline: 2px solid #ff003d; }
  .wordle .word {
    background: #f3f4f7;
    width: 67px;
    aspect-ratio: 1 / 1;
    font-size: 28px;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center; }
    .wordle .word.current {
      outline: 2px solid #fc0; }

.key {
  border: 1px solid;
  min-width: 50px;
  height: 50px;
  margin: 2px;
  display: block;
  text-align: center;
  line-height: 45px;
  background: #fff; }
  .key:hover {
    color: black !important;
    opacity: 1 !important;
    background-color: gray; }
  .key.in-word {
    background-color: yellow;
    font-weight: bold; }
  .key.exact {
    background-color: green;
    font-weight: bold; }
  .key.miss {
    background-color: lightgray;
    font-weight: bold; }

.key-backspace {
  min-width: 110px; }

.key-enter {
  min-width: 100px; }

.finish .word {
  background-color: #fff;
  color: #15202b; }

.finish .in-word {
  background-color: #f2be00; }

.finish .exact {
  background-color: #10d100; }

.hide {
  display: none; }


/*# sourceMappingURL=wordle.css.map*/