@charset "UTF-8";
@keyframes drop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  touch-action: manipulation;
}
*:focus-visible {
  outline: none;
}

body {
  background-color: #ffeff3;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
body button {
  background-color: #fdd9ee;
  border: 1px solid #333;
  border-radius: 50px;
  font-size: 16px;
  box-shadow: 2px 2px 5px 2px #cccccc;
  transition: all 0.3s ease-in-out;
  color: #000000;
}
body button.pressed {
  box-shadow: none;
}
body .modal {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #faf6f7;
  padding: 20px;
  margin: 20px auto;
  border: 1px solid #333;
  border-radius: 40px;
  width: 90%;
  max-width: 400px;
  z-index: 2;
  margin: 10px auto;
  padding: 15px;
  align-self: center;
  text-align: center;
}
body .modal::backdrop {
  background: rgba(0, 0, 0, 0.8);
}
body .modal.error-dialog {
  background-color: #ffb3ba;
}
body .modal > * {
  margin: 20px 10px;
}
body .modal .password {
  font-size: 30px;
  font-weight: 700;
  color: #9b557d;
  padding: 10px 0 20px;
}
body .modal .button-wrapper {
  display: flex;
  justify-content: space-around;
  gap: 10px;
}
body .modal .button-wrapper button {
  padding: 10px 20px;
}
body .modal .button-wrapper .play-again-btn {
  background-color: #baffc9;
}
@media (min-width: 768px) {
  body .modal .button-wrapper .play-again-btn:not(:disabled):hover {
    cursor: pointer;
    background-color: #87ffa1;
  }
}
body .modal .loader {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}
body .modal .loader .loader-animation {
  border: 5px solid #ffeff3;
  border-top: 5px solid #9b557d;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  animation: spin 2s linear infinite;
}
body .modal .loader .loader-text {
  font-size: 16px;
  font-weight: 700;
  color: #9b557d;
}
body .dialog {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #faf6f7;
  padding: 20px;
  margin: 20px auto;
  border: 1px solid #333;
  border-radius: 40px;
  width: 90%;
  max-width: 400px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease-in-out;
  transform: translateX(-100vw);
  text-align: center;
}
body .dialog.show {
  transform: translateX(0);
}
body .dialog.info-dialog img {
  height: 12px;
}
body .dialog.info-dialog .logo-text {
  color: #ba54d9;
  font-weight: 700;
}
body .dialog.instructions-dialog {
  font-size: 14px;
}
body .dialog > * {
  margin: 10px;
}
body .dialog a {
  color: #9b557d;
  text-decoration: none;
  font-weight: 700;
}
body .dialog button {
  padding: 10px 20px;
}
@media (min-width: 768px) {
  body .dialog button:not(:disabled):hover {
    cursor: pointer;
    background-color: #faa9d8;
  }
}
body .dialog .instruction-point {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 30px;
  text-align: left;
}
body .dialog .instruction-point img {
  height: 40px;
}
body header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  width: 100vw;
  max-width: 1024px;
  height: 10dvh;
  max-height: 80px;
  padding: 10px;
  z-index: 1;
}
body header:after {
  content: "";
  position: absolute;
  bottom: -49px;
  width: 100vw;
  height: 50px;
  z-index: 1;
  background: linear-gradient(to bottom, #ffeff3, transparent);
  pointer-events: none;
}
body header .logo {
  display: flex;
  align-items: center;
  gap: 5px;
}
body header .logo h1 {
  margin: 0;
  color: #ba54d9;
}
body header button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fdd9ee;
  border: 1px solid #333;
  border-radius: 50%;
  box-shadow: 2px 2px 5px 2px #cccccc;
  transition: all 0.3s ease-in-out;
  width: 48px;
  height: 48px;
}
body header button.pressed {
  box-shadow: none;
}
@media (min-width: 768px) {
  body header button:not(:disabled):hover {
    cursor: pointer;
    background-color: #faa9d8;
  }
}
body header button img {
  height: 20px;
}
body .output {
  position: fixed;
  top: 10dvh;
  min-height: 45dvh;
  max-height: 45dvh;
  width: 100vw;
  max-width: 1024px;
  padding: 20px 10px;
  overflow-y: auto;
  overflow-x: hidden;
}
body .output .guess-word {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  transition: all 1s ease-in-out;
}
body .output .guess-word .letter {
  font-size: 3.8vw;
  line-height: 1.35;
  font-weight: 500;
  border: 1px solid #333;
  border-radius: 50%;
  margin: 0.25vw;
  width: 6vw;
  max-width: 50px;
  height: 6vw;
  max-height: 50px;
  text-align: center;
  background-color: #cccccc;
  animation: drop 0.2s ease;
}
body .output .guess-word .letter.used {
  background-color: #ffffba;
}
body .output .guess-word .letter.first {
  border-radius: 0 50% 50% 0;
}
body .output .guess-word .letter.last {
  border-radius: 50% 0 0 50%;
}
body .output .guess-word .letter.correct-order {
  background-color: #baffc9;
}
body .output .guess-word .letter.middle-in-sequence {
  margin: 0.25vw 0;
  border-radius: 0;
}
body .output .guess-word .letter.first-in-sequence {
  margin: 0.25vw 0 0.25vw 0.25vw;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
body .output .guess-word .letter.last-in-sequence {
  margin: 0.25vw 0.25vw 0.25vw 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
body .input-keyboard-wrapper {
  position: fixed;
  width: 100vw;
  max-height: 45dvh;
  bottom: 0;
  padding: 2px 0 20px 0;
  background-color: #ffeff3;
  z-index: 1;
}
body .input-keyboard-wrapper:before {
  content: "";
  position: absolute;
  top: -49px;
  width: 100vw;
  height: 50px;
  z-index: 1;
  background: linear-gradient(to top, #ffeff3, transparent);
}
body .input-keyboard-wrapper .input-wrapper {
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 768px;
  margin: 0 auto 10px;
  position: relative;
}
body .input-keyboard-wrapper .input-wrapper .input {
  background-color: #fdd9ee;
  border: 1px solid #333;
  border-radius: 50px;
  font-size: 16px;
  box-shadow: 2px 2px 5px 2px #cccccc;
  transition: all 0.3s ease-in-out;
  color: #000000;
  box-shadow: none;
  padding: 10px 20px;
  outline: none;
  transition: none;
  width: 65%;
  text-align: center;
  background-color: #faf6f7;
}
body .input-keyboard-wrapper .input-wrapper .input.pressed {
  box-shadow: none;
}
body .input-keyboard-wrapper .input-wrapper .input:focus-visible {
  border: 1px solid #9b557d;
}
body .input-keyboard-wrapper .input-wrapper .input:focus-visible::placeholder {
  color: #9b557d;
}
body .input-keyboard-wrapper .input-wrapper .input-bubble {
  opacity: 0;
  position: absolute;
  top: -40%;
  z-index: -1;
  padding: 10px 20px;
  border-radius: 50px;
  background: #ffb3ba;
  border: 1px solid #333;
  transition: all 0.3s ease-in-out;
  text-align: center;
}
body .input-keyboard-wrapper .input-wrapper .input-bubble.visible {
  z-index: 1;
  opacity: 1;
  animation: shake 0.2s ease;
  transition: none;
}
body .input-keyboard-wrapper .input-wrapper .input-bubble span {
  font-weight: 700;
}
body .input-keyboard-wrapper .input-wrapper .enter-btn {
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  body .input-keyboard-wrapper .input-wrapper .enter-btn:not(:disabled):hover {
    cursor: pointer;
    background-color: #faa9d8;
  }
}
body .input-keyboard-wrapper .input-wrapper .enter-btn img {
  height: 25px;
}
body .input-keyboard-wrapper .keyboard {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin,
body .input-keyboard-wrapper .keyboard .keyboard-polish {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty {
  display: grid;
  grid-template-areas: "q q w w e e r r t t y y u u i i o o p p" ". a a s s d d f f g g h h j j k k l l ." ". . z z x x c c v v b b n n m m § § § §";
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #q-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #q-btn {
  grid-area: q;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #w-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #w-btn {
  grid-area: w;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #e-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #e-btn {
  grid-area: e;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #r-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #r-btn {
  grid-area: r;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #t-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #t-btn {
  grid-area: t;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #y-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #y-btn {
  grid-area: y;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #u-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #u-btn {
  grid-area: u;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #i-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #i-btn {
  grid-area: i;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #o-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #o-btn {
  grid-area: o;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #p-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #p-btn {
  grid-area: p;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #a-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #a-btn {
  grid-area: a;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #s-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #s-btn {
  grid-area: s;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #d-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #d-btn {
  grid-area: d;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #f-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #f-btn {
  grid-area: f;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #g-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #g-btn {
  grid-area: g;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #h-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #h-btn {
  grid-area: h;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #j-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #j-btn {
  grid-area: j;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #k-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #k-btn {
  grid-area: k;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #l-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #l-btn {
  grid-area: l;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #z-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #z-btn {
  grid-area: z;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #x-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #x-btn {
  grid-area: x;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #c-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #c-btn {
  grid-area: c;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #v-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #v-btn {
  grid-area: v;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #b-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #b-btn {
  grid-area: b;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #n-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #n-btn {
  grid-area: n;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #m-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #m-btn {
  grid-area: m;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin.qwerty #backspace-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish.qwerty #backspace-btn {
  grid-area: §;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin .key,
body .input-keyboard-wrapper .keyboard .keyboard-latin .backspace-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish .key,
body .input-keyboard-wrapper .keyboard .keyboard-polish .backspace-btn {
  width: 8vw;
  max-width: 60px;
  height: 8vw;
  max-height: 60px;
  margin: 1vw;
  border-radius: 5px;
  font-size: 20px;
  background-color: #fdd9ee;
}
@media (min-width: 768px) {
  body .input-keyboard-wrapper .keyboard .keyboard-latin .key:not(:disabled):hover,
  body .input-keyboard-wrapper .keyboard .keyboard-latin .backspace-btn:not(:disabled):hover,
  body .input-keyboard-wrapper .keyboard .keyboard-polish .key:not(:disabled):hover,
  body .input-keyboard-wrapper .keyboard .keyboard-polish .backspace-btn:not(:disabled):hover {
    cursor: pointer;
    background-color: #faa9d8;
  }
}
body .input-keyboard-wrapper .keyboard .keyboard-latin .backspace-btn,
body .input-keyboard-wrapper .keyboard .keyboard-polish .backspace-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18vw;
  max-width: 120px;
}
body .input-keyboard-wrapper .keyboard .keyboard-latin .backspace-btn img,
body .input-keyboard-wrapper .keyboard .keyboard-polish .backspace-btn img {
  height: 35px;
}
body .input-keyboard-wrapper .keyboard .key.letter {
  background-color: #cccccc;
}
@media (min-width: 768px) {
  body .input-keyboard-wrapper .keyboard .key.letter:not(:disabled):hover {
    cursor: pointer;
    background-color: #b3b3b3;
  }
}
body .input-keyboard-wrapper .keyboard .key.used, body .input-keyboard-wrapper .keyboard .key.correct-order {
  background-color: #baffc9;
}
@media (min-width: 768px) {
  body .input-keyboard-wrapper .keyboard .key.used:not(:disabled):hover, body .input-keyboard-wrapper .keyboard .key.correct-order:not(:disabled):hover {
    cursor: pointer;
    background-color: #87ffa1;
  }
}

@media (min-width: 834px) {
  body .output .guess-word .letter {
    font-size: 32px;
    margin: 3px;
  }
  body .input-keyboard-wrapper .keyboard .keyboard-latin .key,
  body .input-keyboard-wrapper .keyboard .keyboard-latin .backspace-btn,
  body .input-keyboard-wrapper .keyboard .keyboard-polish .key,
  body .input-keyboard-wrapper .keyboard .keyboard-polish .backspace-btn {
    font-size: 20px;
    margin: 5px;
  }
}

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