@charset "UTF-8";
*, :after, :before {
  box-sizing: border-box;
}

body {
  line-height: 1;
  background-color: #f5f6f0;
  color: #fffbf4;
  user-select: none;
}

.result, body {
  font: 10px/1.5 Ubuntu-Light, sans-serif;
}

input {
  text-align: center;
}

html, body {
  width: 100%;
  height: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

@font-face {
  font-family: "Ubuntu-Light";
  src: url("Ubuntu-Light.ttf");
  font-weight: 400;
  font-style: normal;
}
.game {
  position: relative;
  height: 100%;
}

.mainMenu {
  width: 100%;
}

.name {
  color: #132f63;
  font-size: 10em;
  left: 50%;
  top: 10%;
  transform: translate(-50%, 0);
  position: absolute;
}

.property {
  height: 100%;
  width: 100%;
}

.content {
  width: 100%;
  min-height: 100%;
}

.tip {
  font-size: 1rem;
  text-align: center;
  margin: 5px 0;
  color: #474d54;
}

.start, .blackout {
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.start {
  background-color: #fdac45;
  background: linear-gradient(90deg, #fdac45 0%, #ffc06f 50%, #fdac45 100%);
  z-index: 9999999999;
}

.blackout {
  opacity: 0.5;
  background: black;
}

.playerMessageBlackout {
  opacity: 0.99;
}

.playerMessage {
  width: 300px;
  z-index: 10000;
}

/*Уровни*/
.levelHead {
  display: flex;
  color: #34393e;
  justify-content: space-around;
  align-items: baseline;
  margin: 15px auto 10px auto;
  width: 100%;
  text-align: center;
  font-size: 3.5rem;
}

.levelHead_big {
  margin-top: 40px;
}

.allLevels .levelHead {
  font-size: 3.2rem;
  margin-top: 15px;
}

.levels, .allLevels {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-content: flex-start;
  background: url(images/book.svg) center bottom no-repeat, linear-gradient(90deg, #fac581 0%, #ffd99e 50%, #fac581 100%) left center;
  background-size: 200px, 100%;
}

.levelsProperty {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.levels .menu {
  position: absolute;
  left: 5px;
  top: 5px;
}

.allLevels {
  animation: showResult 0.7s linear;
  justify-content: center;
}

.levelsNames {
  width: 100%;
}

/*Чекбокс*/
.forTwoPlayers {
  text-align: center;
  margin-bottom: 15px;
}

.forTwoPlayers, .checkbox, .checkbox label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.checkbox {
  position: absolute;
  z-index: -1;
  opacity: 0;
  margin: 10px 0 0 20px;
}

.checkbox + label {
  font-size: 2.5rem;
  color: #34393e;
  position: relative;
  padding-right: 75px;
  cursor: pointer;
  margin-bottom: 15px;
}

.checkbox + label:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 205px;
  width: 60px;
  height: 30px;
  border-radius: 15px;
  background: #CDD1DA;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
  transition: 0.2s;
}

.checkbox + label:after {
  content: "";
  position: absolute;
  top: 7px;
  left: 205px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #fcf3ed;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: 0.2s;
}

.checkbox:checked + label:before {
  background: #23c93d;
}

.checkbox:checked + label:after {
  left: 240px;
}

.mainMenu .levelsNames {
  margin-top: 10px;
}

.menuItem {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 2.4rem;
  line-height: 2.4rem;
  background: linear-gradient(90deg, #fdac45 0%, #ffc06f 50%, #fdac45 100%);
  margin: 5px auto 30px auto;
  box-shadow: -4px -4px 11px #34393e;
  width: 75%;
  height: 70px;
  padding: 3px;
  cursor: pointer;
  color: #34393e;
}

.menuItem:active {
  box-shadow: -2px -2px 2px #474d54;
  transform: scale(0.97);
}

/*Игра*/
.bottomWrapper {
  width: 100%;
}

.futureScore {
  min-width: 40px;
  text-align: center;
  font-size: 1rem;
  color: #313135;
}

.messages {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #313135;
  font-size: 0.8rem;
  text-align: center;
  padding: 2px;
  width: 100%;
  height: 93px;
  border-top: 5px solid #6e4628;
  background-color: #f7f7f7;
  overflow: auto;
}

.showBadTip {
  animation: showBadTip 1.2s linear;
}

.showGoodTip {
  animation: showGoodTip 1.2s linear;
}

@keyframes showGoodTip {
  0% {
    background-color: #f7f7f7;
  }
  25% {
    background-color: #acd0fe;
  }
  50% {
    background-color: #93b9fe;
  }
  75% {
    background-color: #acd0fe;
  }
  100% {
    background-color: #f7f7f7;
  }
}
@keyframes showBadTip {
  0% {
    background-color: #f7f7f7;
  }
  25% {
    background-color: #ff7667;
  }
  50% {
    background-color: #ff5e50;
  }
  75% {
    background-color: #ff7667;
  }
  100% {
    background-color: #f7f7f7;
  }
}
.bottomMenu {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.5rem;
  padding: 2px;
  background: linear-gradient(90deg, #fdac45 0%, #ffc06f 50%, #fdac45 100%);
  box-shadow: 0 0 11px #474d54;
  z-index: 2;
}

.score {
  margin-right: 10px;
  color: #313135;
}

.botScore {
  color: #ff4b31;
}

.playerScore {
  color: #609dfe;
}

.numOfLevel {
  margin-right: 10px;
}

.menu {
  background: url(images/menu.svg) center center no-repeat;
  background-size: 100%;
  width: 50px;
  height: 50px;
  margin-left: 10px;
  cursor: pointer;
}

.alphabet {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #313135;
}

.fieldWrapper {
  position: relative;
  margin: 0 auto;
}

.field {
  width: 100vw;
  height: 105vw;
  max-width: 720px;
  max-height: 720px;
  border-collapse: collapse;
  table-layout: fixed;
}

.botStroke {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ebeaea;
  font-size: 2rem;
  text-align: center;
  z-index: 10000;
}

.content {
  position: relative;
  background-color: #f5f6f0;
}

.cell {
  position: relative;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #363636;
  background-color: #f7f7f7;
  color: #313135;
  font-size: 0.3rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.cell .letter {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.9rem;
  width: 100%;
  height: 100%;
  margin: 0;
  text-transform: uppercase;
}

.cell .letterScore {
  font-size: 0.4rem;
  line-height: 0.5rem;
  bottom: 0;
  right: 1px;
}

.field9 .cell .letter {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.field9 .cell .letterScore {
  font-size: 0.8rem;
  line-height: 0.8rem;
}

.field9 .extra {
  font-size: 0.8rem;
  line-height: 0.8rem;
}

.field9 .extraWord {
  font-size: 0.6rem;
  line-height: 0.6rem;
}

.tip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 320px;
  border: 1px solid #808080;
  padding: 16px;
  background-color: #ffd29d;
  font-size: 1.6rem;
  text-align: center;
  color: #808080;
  z-index: 10000;
}

.playerLetters {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin-top: 15px;
  cursor: pointer;
}

.playerLetters .letter {
  cursor: pointer;
}

.letter {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin: 0 2px;
  font-size: 1.65rem;
  line-height: 1.65rem;
  color: #313135;
  background: linear-gradient(90deg, #fdac45 0%, #ffc06f 50%, #fdac45 100%);
}

.letterScore {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 0.65rem;
  line-height: 0.65rem;
}

.selectedLetter {
  transform: scale(1.07);
  background: linear-gradient(90deg, #fd8924 0%, #ffa148 50%, #fd8924 100%);
  cursor: pointer;
}

.cell .newBotLetter {
  background: linear-gradient(90deg, #e07529 0%, #f6842d 50%, #e07529 100%);
}

.selectedLetterOnField {
  border: 1px solid #5492f9;
}

.cell .selectedLetter {
  transform: none;
}

/*x2 x3 слова и буквы*/
.word_x2 {
  background: #5492f9;
  background: linear-gradient(90deg, #5492f9 0%, #609dfe 50%, #5492f9 100%);
}

.word_x3 {
  background: #e94932;
  background: linear-gradient(90deg, #e94932 0%, #ff4b31 50%, #e94932 100%);
}

.letter_x2 {
  background: #23c93d;
  background: linear-gradient(90deg, #23c93d 0%, #3ad553 50%, #23c93d 100%);
}

.letter_x3 {
  background: #f9c454;
  background: linear-gradient(90deg, #f9c454 0%, #ffd039 50%, #f9c454 100%);
}

.middle {
  background: #b0b0b0;
  background: linear-gradient(90deg, #d8d8d8 0%, #e0e0e0 50%, #d8d8d8 100%);
}

.extra {
  font-size: 0.6rem;
  line-height: 0.6rem;
}

.extraWord {
  font-size: 0.4rem;
  line-height: 0.4rem;
  text-transform: uppercase;
}

/*Кнопки взаимодействия*/
.buttons {
  position: relative;
  top: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.change, .move {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #f7f7f7;
}

.change {
  background: url(images/change.svg) no-repeat center center, linear-gradient(90deg, #f9c454 0%, #ffd039 50%, #f9c454 100%) no-repeat center center;
  background-size: 70%, 100%;
}

.move {
  background: url(images/next.svg) no-repeat 62% 50%, linear-gradient(90deg, #f9c454 0%, #ffd039 50%, #f9c454 100%) no-repeat center center;
  background-size: 68%, 100%;
}

.timer {
  background: url(images/timer.svg) no-repeat center center, linear-gradient(90deg, #f9c454 0%, #ffd039 50%, #f9c454 100%) no-repeat center center;
  background-size: 75%, 100%;
}

.move, .timer, .change {
  cursor: pointer;
}

/*Результат игры*/
.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  background: linear-gradient(90deg, #fdac45 0%, #ffc06f 50%, #fdac45 100%);
  text-align: center;
  font-size: 1rem;
  color: #313135;
  border: 1px solid #313135;
  padding: 5px;
  z-index: 10000;
  animation: showResult 1s forwards;
}

.modal h2 {
  font-size: 2rem;
}

.modal h3 {
  font-size: 1.7rem;
}

.marginBottom {
  margin-bottom: 10px;
}

.closeEnd {
  font-size: 1.3rem;
  padding: 4px 14px;
  margin-top: 10px;
  background: linear-gradient(90deg, #5492f9 0%, #609dfe 50%, #5492f9 100%);
  cursor: pointer;
}

@keyframes showResult {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.passStroke button {
  width: 45%;
  margin-right: auto;
}

.passStrokeBlackout {
  cursor: pointer;
}

/*Правила*/
.rules {
  position: absolute;
  overflow: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  background: linear-gradient(90deg, #fac581 0%, #ffd99e 50%, #fac581 100%) left center;
  background-size: 100%;
  border: 1px solid;
  text-align: center;
  font-size: 1rem;
  color: #313135;
  z-index: 10000;
}

.rulesBlackout {
  cursor: pointer;
}

.closeRules {
  position: absolute;
  top: 25px;
  right: 15px;
  border: none;
  box-shadow: none;
  width: 38px;
  height: 38px;
  background: url(images/cross.svg) center center no-repeat;
  background-size: 100%;
  cursor: pointer;
}

.closeRules:hover {
  transform: scale(0.98);
}

.closeRules:active {
  transform: scale(0.96);
}

.rules p {
  margin-bottom: 10px;
  text-align: left;
}

.rules h2 {
  font-size: 3rem;
  line-height: 3rem;
  padding: 10px 0;
  text-align: left;
}

.rules img {
  max-width: 80%;
  margin: 0 auto;
}

.openRules {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.6rem;
  color: white;
  background-color: #6692F2;
  border-radius: 50%;
  box-shadow: 4px -4px 5px rgba(195, 195, 195, 0.3);
  cursor: pointer;
}

.dict__input {
  width: 90%;
  height: 30px;
  border-radius: 12px;
  background-color: #f5f6f0;
  outline: none;
  margin-top: 10px;
}

.dict__buttons {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 15px;
}

.dict__button {
  cursor: pointer;
  width: 120px;
  height: 30px;
  background: linear-gradient(90deg, #fdac45 0%, #ffc06f 50%, #fdac45 100%);
  border-radius: 5px;
}

.dict__words {
  border: 1px solid black;
  margin-top: 15px;
  height: 400px;
  background-color: #f5f6f0;
  border-radius: 25px;
  overflow: auto;
}

.dict__allWords {
  padding: 5px 10px;
}

.dict__word {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.deleteWord {
  width: 20px;
  height: 20px;
  background-color: #d54532;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
}

.dict__selected {
  background-color: #fdac45;
}

.dict__switcher {
  display: flex;
  border-bottom: 1px solid black;
  height: 35px;
}

.dict__switcher .dict__switch:first-child {
  border-right: 1px solid black;
}

.dict__switch {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-height: 641px) and (orientation: portrait) {
  .bottomWrapper {
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .content {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
  }

  .playerLetters {
    margin-bottom: 200px;
  }
}
/*Рекорды*/
.desktopAppear {
  display: none;
}

@media (min-width: 700px) {
  .futureScore {
    font-size: 1.3rem;
  }

  .menuBackground {
    background-size: 300px, 100%;
  }

  .checkbox + label {
    font-size: 4rem;
    padding-right: 85px;
  }

  .checkbox + label:before {
    top: 13px;
    left: 315px;
    width: 80px;
    height: 45px;
    border-radius: 23px;
  }

  .checkbox + label:after {
    top: 13px;
    left: 315px;
    width: 42px;
    height: 42px;
  }

  .checkbox:checked + label:before {
    background: #23c93d;
  }

  .checkbox:checked + label:after {
    left: 360px;
  }

  .levelHead {
    font-size: 7rem;
  }

  .modal {
    width: 500px;
    font-size: 1.3rem;
  }

  .modal h2 {
    font-size: 2.5rem;
  }

  .modal h3 {
    font-size: 2.2rem;
  }

  .closeEnd {
    font-size: 1.7rem;
    padding: 6px 20px;
  }

  .openRules {
    bottom: auto;
    top: 15px;
    right: 15px;
  }
}
@media (min-width: 700px) and (orientation: portrait) {
  .cell .letter {
    font-size: 1.5rem;
  }

  .cell .letterScore {
    font-size: 0.6rem;
    line-height: 0.6rem;
    bottom: 3px;
    right: 3px;
  }

  .extra {
    font-size: 0.9rem;
    line-height: 0.9rem;
  }

  .extraWord {
    font-size: 0.6rem;
    line-height: 0.6rem;
  }

  .field9 .cell .letter {
    font-size: 2.4rem;
    line-height: 2.4rem;
  }

  .field9 .cell .letterScore {
    font-size: 1.3rem;
    line-height: 1.3rem;
  }

  .field9 .extra {
    font-size: 1.2rem;
    line-height: 1.2rem;
  }

  .field9 .extraWord {
    font-size: 1rem;
    line-height: 1rem;
  }

  .playerLetters {
    height: 60px;
  }

  .playerLetters .letter {
    width: 50px;
    height: 50px;
    font-size: 2rem;
    line-height: 2rem;
    margin: 0 5px;
  }

  .letterScore {
    font-size: 1rem;
    line-height: 1rem;
  }

  .change, .move {
    width: 65px;
    height: 65px;
  }

  .bottomMenu {
    font-size: 2rem;
  }

  .messages {
    font-size: 1.1rem;
  }
}
@media (min-width: 900px) and (orientation: portrait) {
  .levelHead {
    font-size: 9rem;
  }

  .field {
    max-width: 900px;
    max-height: 900px;
  }

  .cell {
    border: 2px solid #363636;
  }

  .messages {
    height: 150px;
    font-size: 1.8rem;
  }

  .bottomMenu {
    font-size: 3rem;
  }

  .menu {
    width: 65px;
    height: 65px;
  }

  .change, .move {
    width: 100px;
    height: 100px;
  }

  .menuItem {
    font-size: 5rem;
    line-height: 5rem;
    padding: 40px 5px;
    height: auto;
  }
}
@media screen and (min-width: 600px) and (orientation: landscape) {
  .desktopDisappear {
    display: none;
  }

  .field {
    width: 90vh;
    height: 90vh;
    max-width: none;
    max-height: none;
  }

  .fieldWrapper {
    margin-top: 60px;
    margin-left: 15px;
  }

  .content {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
  }

  .bottomWrapper {
    align-self: normal;
  }

  .playerLetters {
    margin: 0;
    flex-flow: column nowrap;
    height: 100%;
    min-height: 90vh;
    min-width: 100px;
    width: auto;
  }

  .playerLetters .letter {
    width: 50px;
    height: 50px;
    margin: 10px 25px 0 25px;
  }

  .buttons.desktopAppear, .messages.desktopAppear {
    display: flex;
  }

  .buttons.desktopAppear {
    flex-flow: column nowrap;
    top: 0;
    left: 15px;
  }

  .change, .move {
    margin: 0;
    width: 80px;
    height: 80px;
  }

  .messages.desktopAppear {
    border: 1px solid #6e4628;
    border-left: 5px solid #6e4628;
    padding: 5px;
    height: 500px;
    font-size: 1.3rem;
    margin-right: 15px;
  }

  .letterScore {
    font-size: 1rem;
    line-height: 1rem;
  }

  .cell .letter {
    font-size: 1.6rem;
  }

  .cell .letterScore {
    font-size: 0.7rem;
    line-height: 0.7rem;
  }

  .extra {
    font-size: 0.7rem;
    line-height: 0.7rem;
  }

  .extraWord {
    font-size: 0.5rem;
    line-height: 0.5rem;
  }

  .field9 .cell .letter {
    font-size: 2rem;
    line-height: 2rem;
  }

  .field9 .cell .letterScore {
    font-size: 1.1rem;
    line-height: 1.1rem;
    right: 5px;
    bottom: 5px;
  }

  .field9 .extra {
    font-size: 1rem;
    line-height: 1rem;
  }

  .field9 .extraWord {
    font-size: 0.8rem;
    line-height: 0.8rem;
  }

  .bottomWrapper {
    position: absolute;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    top: 0;
    left: 50%;
    max-height: 60px;
    transform: translateX(-50%);
  }

  .desktopWrapper {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
  }

  .menuItem {
    width: 400px;
  }

  .rules {
    width: 32%;
    height: 70%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
@media (min-width: 800px) and (orientation: landscape) {
  .allLevels {
    max-width: 1200px;
    margin: 0 auto;
  }

  .levelHead {
    font-size: 5rem;
  }

  .mainMenu {
    background-size: 300px, 100%;
  }

  .menuItem {
    width: 400px;
  }
}
@media (min-width: 1200px) and (orientation: landscape) {
  .futureScore {
    font-size: 1.6rem;
  }

  .levelHead {
    font-size: 7rem;
  }

  .cell .letter {
    font-size: 1.7rem;
    line-height: 1.7rem;
  }

  .cell .letterScore {
    font-size: 0.8rem;
    line-height: 0.8rem;
    bottom: 2px;
    right: 2px;
  }

  .extra {
    font-size: 0.8rem;
    line-height: 0.8rem;
  }

  .extraWord {
    font-size: 0.6rem;
    line-height: 0.6rem;
  }

  .field9 .cell .letter {
    font-size: 2.2rem;
    line-height: 2.2rem;
  }

  .field9 .cell .letterScore {
    font-size: 1.3rem;
    line-height: 1.3rem;
  }

  .field9 .extra {
    font-size: 1.1rem;
    line-height: 1.1rem;
  }

  .field9 .extraWord {
    font-size: 0.9rem;
    line-height: 0.9rem;
  }
}
@media screen and (min-width: 900px) and (max-width: 1000px) and (orientation: landscape) {
  .field {
    width: 65vh;
    height: 65vh;
  }
}
@media screen and (min-width: 1000px) and (max-width: 1150px) and (orientation: landscape) {
  .field {
    width: 75vh;
    height: 75vh;
  }
}
@media (min-width: 1800px) and (orientation: landscape) {
  .levelHead {
    font-size: 11rem;
  }

  .cell .letter {
    font-size: 2rem;
  }

  .letterScore {
    bottom: 5px;
    right: 5px;
  }

  .cell .letterScore {
    font-size: 1rem;
    line-height: 1rem;
    bottom: 3px;
    right: 2px;
  }

  .extra {
    font-size: 1rem;
    line-height: 1rem;
  }

  .extraWord {
    font-size: 0.8rem;
    line-height: 0.8rem;
  }

  .field9 .cell .letter {
    font-size: 2.6rem;
    line-height: 2.6rem;
  }

  .field9 .cell .letterScore {
    font-size: 1.5rem;
    line-height: 1.5rem;
    right: 8px;
    bottom: 8px;
  }

  .field9 .extra {
    font-size: 1.4rem;
    line-height: 1.4rem;
  }

  .field9 .extraWord {
    font-size: 1.1rem;
    line-height: 1.1rem;
  }

  .bottomMenu {
    font-size: 2rem;
    padding: 6px;
  }

  .menuItem {
    height: auto;
    width: 600px;
    font-size: 3.5rem;
    line-height: 3.5rem;
    padding: 25px 5px;
  }

  .playerLetters .letter {
    width: 70px;
    height: 70px;
    font-size: 2.5rem;
  }

  .letterScore {
    font-size: 1.3rem;
    line-height: 1.3rem;
  }

  .messages {
    font-size: 1.5rem;
  }
}
.letter, .change, .move, .playerLetters {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

button {
  cursor: pointer;
}

button:hover {
  transform: scale(0.99);
}

button:active {
  transform: scale(0.98);
}

.menu:hover {
  transform: scale(0.98);
}

.menu:active {
  transform: scale(0.96);
}

.none {
  display: none;
}

@media (max-height: 650px) and (orientation: portrait) {
  .content {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
  }

  .field {
    width: 100vw;
    height: 100vw;
  }

  .change, .move {
    width: 45px;
    height: 45px;
  }

  .playerLetters {
    margin-top: 10px;
    margin-bottom: auto;
  }

  .messages {
    height: 62px;
    font-size: 0.75rem;
  }

  .letter {
    margin: 0 3px;
    font-size: 1.55rem;
    line-height: 1.55rem;
  }

  .menu {
    width: 40px;
    height: 40px;
  }
}
@media (orientation: portrait) and (min-width: 500px) {
  .field {
    width: 80vw;
    height: 80vw;
  }
}
@media (orientation: portrait) and (min-width: 700px) {
  .field {
    width: 70vw;
    height: 70vw;
  }
}
@media (orientation: portrait) and (min-width: 850px) {
  .field {
    width: 65vw;
    height: 65vw;
  }
}
@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
  .field {
    width: 70vw;
    height: 70vw;
  }
}

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