#game-board {
    display: grid;
    grid-template-columns: repeat(5, 80px);
    grid-template-rows: repeat(8, 80px);

    margin: 15px auto;
  }
  
  .cell {
    background: rgb(112,129,142);
	background: radial-gradient(circle, rgba(112,129,142,1) 17%, rgba(144,164,174,1) 87%);
    border: 1px solid #546e7a ;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    cursor: pointer;
  }
  .Player{
    width: 100%;
    height: 100%;
  }
  .player-image {
    width: 100%;
    height: 100%;
  }
  .enemy{
	width: 100%;
    height: 100%;
    background-size: contain;
    background-color: rgb(112 129 142 / 0%);
    border: none;
    cursor: pointer;
   
  }
  .rest-image{
    width: 100%;
    height: 100%;
  }
  .visited{
    
  }
#Level{
	font-family: 'PRESS START 2P';
  display: flex;
  justify-content: center;
  font-size: 25px;
  margin-top:25px;
    background: white;
    border-radius: 30px;
    width: 40px;
    height: 40px;
    align-items: center;
    padding:12px;
}

 .Elemvalue{
	background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border-radius: 30px;
  padding:10px;
 }
.HPElem{
  display: flex;
  align-items: center;
  margin-right: 10px;
  margin-left: 5px;
}
.health-item{
	width: 100%;
    height: 100%;
    background-size: contain;
    background-color: rgb(112 129 142 / 0%);
    border: none;
    cursor: pointer;
}
.money-item{
	width: 100%;
    height: 100%;
    background-size: contain;
    background-color: rgb(112 129 142 / 0%);
    border: none;
    cursor: pointer;
}
.WPElem{
  display: flex;
  align-items: center;
  margin-right: 10px;
  margin-left: 5px;
}
.weapon{
	width: 100%;
    height: 100%;
    background-size: contain;
    background-color: rgb(112 129 142 / 0%);
    border: none;
    cursor: pointer;
}
/* Общие стили для input */
input[type="text"] {
	font-family: 'Press Start 2P';
    width: 100%; /* Занять всю ширину родительского контейнера */
    padding: 12px 15px; /* Отступы внутри поля */
    border: 2px solid #78909c; /* Цвет границы */
    border-radius: 8px; /* Округление углов */
    font-size: 16px; /* Размер шрифта */
    color: #333; /* Цвет текста */
    background-color: #f9f9f9; /* Цвет фона */
    transition: all 0.3s ease; /* Плавные переходы для эффектов */
	margin:15px;
}

/* Эффект при наведении */
input[type="text"]:hover {
    border-color: #357ab8; /* Изменение цвета границы при наведении */
}

/* Эффект при фокусировке */
input[type="text"]:focus {
    border-color: #5ab8ef; /* Цвет границы при фокусировке */
    background-color: #ffffff; /* Цвет фона при фокусировке */
    box-shadow: 0 0 5px rgba(90, 184, 239, 0.5); /* Тень при фокусировке */
    outline: none; /* Убираем стандартный контур */
}

/* Плейсхолдер */
input[type="text"]::placeholder {
    color: #aaa; /* Цвет плейсхолдера */
    opacity: 1; /* Делаем плейсхолдер более заметным */
}

/* Плейсхолдер при фокусировке */
input[type="text"]:focus::placeholder {
    color: #888; /* Изменение цвета плейсхолдера при фокусировке */
}

/* Общие стили для кнопки с id "UT" */
.bt_UT {
	font-family: 'Press Start 2P';
    padding: 12px 20px; /* Отступы внутри кнопки */
    font-size: 20px; /* Размер шрифта */
    color: #0c1153; /* Цвет текста */
    background-color: #dfde48; /* Цвет фона */
    border: none; /* Убираем стандартную границу */
    border-radius: 8px; /* Округление углов */
    cursor: pointer; /* Изменение курсора при наведении */
    transition: all 0.3s ease; /* Плавные переходы для эффектов */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Тень для глубины */
}

/* Эффект при наведении */
.bt_UT:hover {
    background-color: #ca351b; /* Изменение цвета фона при наведении */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Увеличение тени при наведении */
}

/* Эффект при фокусировке */
.bt_UT:focus {
    outline: none; /* Убираем стандартный контур */
    box-shadow: 0 0 0 3px rgba(90, 184, 239, 0.5); /* Тень при фокусировке */
}

@media screen and (max-width:1440px) {
		#Level{
		font-size: 15px;
		padding:5px;
		width:20px;
		height: 20px;
		margin-top:22px;
	}
	#game-board {
		grid-template-columns: repeat(5, 60px);
    grid-template-rows: repeat(8, 60px);
	}
	.full #game-board{
		grid-template-columns: repeat(5, 70px);
    	grid-template-rows: repeat(8, 70px);
	}
	 .Elemvalue{
	 	font-size: 16px;
	 }
	.full .Elemvalue{
		margin-top:5px;
	 	font-size: 18px;
	 }
}

@media screen and (max-width:1080px) {
	.gameisover{
		top:111px;
	}
		#Level{
		font-size: 15px;
		padding:5px;
		width:20px;
		height: 20px;
		margin-top:32px;
	}
	#game-board {
		grid-template-columns: repeat(5, 50px);
    grid-template-rows: repeat(8, 50px);
	}
	.full #game-board{
		grid-template-columns: repeat(5, 60px);
    	grid-template-rows: repeat(8, 60px);
	}
	 .Elemvalue{
	 	font-size: 16px;
	 }
	 .full .Elemvalue{
	 	font-size: 18px;
	 }
	
}
@media screen and (min-width:0px) and (max-width:500px) {
	#Level{
		font-size: 15px;
		padding:5px;
		width:20px;
		height: 20px;
		margin-top:17px;
	}
	#game-board {
		grid-template-columns: repeat(5, 45px);
    grid-template-rows: repeat(8, 45px);
	}
	.full #game-board{
		grid-template-columns: repeat(5, 60px);
    	grid-template-rows: repeat(8, 60px);
	}
	.full .Elemvalue{
		font-size: 25px;
	}

}
@media screen and (max-width:320px) {
	#game-board{
			grid-template-columns: repeat(5, 35px);
    	grid-template-rows: repeat(8, 35px);
    	margin: 9px auto;
	}
	#Level{
	font-size: 10px;
    width: 15px;
    height: 15px;
   
	}
	.Uscore{
		margin:4px;
	}
	.Elemvalue{
		font-size: 11px;
	}
	.gameisover{
		font-size: 50px;
		top:87px;
	}
	.rstrbutt{
		margin:6px;
		font-size: 30px;
	}
	.full 	#game-board{
			grid-template-columns: repeat(5, 45px);
    	grid-template-rows: repeat(8, 45px);
    	margin: 9px auto;
	}
	.full .Elemvalue{
		font-size: 15px;
	}
	
}