:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-blue: #006cb1;
  --color-red: #e40521;
  --color-orange: #ff6f00;
}
html,
body {
  margin: 0;
  padding: 0;
  font-family: GPN_DIN, helvetica, sans-serif;
  font-weight: 400;
  /* font-size: 16px; */
  /* font-size: 1.1111111111svh; */
   font-size: calc(100vh / 1925 * 16);
  line-height: 1;
  color: #000;
  cursor: default;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}


*,
*:before,
*:after {
  box-sizing: border-box;
}
* {
  outline: none !important;
}

.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background-color: transparent;
}

/*  MODAL PAUSE */
.modal-pause {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(7px);
  background-image: url('./bgModalPause.png');
  background-size: 48.5rem auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.modal-pause.active {
  display: flex!important;
}

.modal-pause__close-button {
  position: absolute;
  top: calc(50% - 21rem);
  left: calc(50% - -14rem);
  width: 4.5rem;
  height: 4.5rem;
  background-image: url('./iconModalClose.png');
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  /*  */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.modal-pause__close-button:focus,
.modal-pause__close-button:active {
  box-shadow: none !important;
  outline: none !important;
  background-color: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}

.modal-pause__replay-button {
  position: absolute;
  top: calc(50% - 9.5rem);
  left: calc(50% - 18.65rem);
  width: 10rem;
  height: 10rem;
  background-image: url('./iconReplay.png');
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  /*  */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.modal-pause__replay-button:focus,
.modal-pause__replay-button:active {
  box-shadow: none !important;
  outline: none !important;
  background-color: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}

.modal-pause__sound-button {
  position: absolute;
  top: calc(50% + 7.25rem);
  left: calc(50% - 19rem);
  width: 10rem;
  height: 10rem;
  background-image: url('./iconSound.png');
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  /*  */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.modal-pause__sound-button:focus,
.modal-pause__sound-button:active {
  box-shadow: none !important;
  outline: none !important;
  background-color: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}

.modal-pause__sound-button.disabled {
  filter: sepia(1);
}

.modal-pause__sound-message {
  position: absolute;
  top: calc(50% + 7.75rem);
  left: calc(50% - 4.75rem);
  width: 21.875rem;
  height: 8.9375rem;
  background-image: url('./textOffModalSound.png');
  background-size: auto 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.modal-pause__sound-button.disabled + .modal-pause__sound-message {
  background-image: url('./textOnModalSound.png');
}

/*  MODAL WIN */
.modal-win {
  display: none !important;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(7px);
  background-image: url('./bgModalWin.png');
  background-size: 7rem auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  transition: background-size 1s;
  z-index: 998;
}

.modal-win.active {
  display: flex!important;
}

.modal-win.animate {
  background-size: 70rem auto;
}

/* LOADING */
.loading-modal {
  display: none !important;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  background: url(./modal-load-bg.jpg);
  background-size: auto 100%;
  background-position: 50% 0;
  background-repeat: no-repeat;
  z-index: 998;
}
.loading-modal.active {
  display: block !important;
}


/* VERTICAL */
 .check-for-vertical {
  position: fixed !important;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,99%);
  z-index: 999;
}

.check-for-vertical p {
  font-size: 50px;
  color: #fff;
  text-align: center;
}

/*
@media screen and (orientation: landscape) {
  .check-for-vertical {
    display: flex;
  }
} */