.content {
  // padding: 20px;
  /* Platz für das feste Menü am unteren Bildschirmrand reservieren */
  // padding-bottom: 60px; /* Höhe des festen Menüs + zusätzlicher Abstand */
}

.fixed-menu {
  /* position: fixed; /* klebt am unteren bildschirmrand */
  bottom: 0;
  max-width: 500px; /* 100%? */
  background-color: black;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  margin: auto; /* center */
  border: 2px solid white;
}

.fixed-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fixed-menu li {
  display: inline-block;
  margin: 5px 5px;
}

.fixed-menu a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

/* Dark Button Styles */
.fixed-menu button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  // border-radius: 5px;
  color: #fff;
  background-color: #333; /* Dark background color */
  border: 1px solid #333; /* Border color same as background for a seamless look */
  transition: background-color 0.3s ease, color 0.3s ease;
  width: 140px;
}

/* Hover State */
.fixed-menu button:hover {
  background-color: #555; /* Darken the background color on hover */
  color: #fff; /* Lighten the text color on hover */
}

/* Click (Active) State */
.fixed-menu button:active {
  background-color: #777; /* Darken the background color on click */
}

/* Optional: Disabled State */
.fixed-menu button:disabled {
  opacity: 0.6; /* Reduce opacity for a disabled look */
  cursor: not-allowed; /* Change cursor to not-allowed for a disabled button */
}


body {
	font-family: 'Arial', sans-serif;
	text-align: center;
	margin: 20px;
	background-image: url('images/Hnrkf3Pk0NP3yBisO9x1--4--p7itg.jpg');
	background-size: cover;
}

h1 {
	color: white;
	font: italic small-caps bold 2.8em/40px Georgia, serif;
	background-color: black;
	max-width: 500px;
	min-width: 250px;
	margin: auto;
	padding: 2px;
}

hr {
	margin: 20px;
	margin-top: 0px;
	border: 1px dashed gray;
}

#settings {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

label {
	margin-right: 10px;
	font-size: 16px;
	/* color: #333; */
	color: white;
}

input {
	width: 40px;
	font-size: 14px;
	padding: 5px;
}

button {
	//background-color: #4CAF50;
	background-color: black;
	color: white;
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
	border: none;
	width: 140px;
}

button:hover {
	/* background-color: #45a049; */
	background-color: blue;
}

button:disabled {
	background-color: #888888;
}

.container {
	position: relative;
}

/* Am besten je nach Screenbreite anders aufteilen */
#board {
	display: grid;
	grid-template-columns: repeat(10, 50px);
	grid-template-rows: repeat(10, 50px);
	gap: 0px;
	position: relative;
	margin: 20px auto; /* Center the board */
	max-width: 500px; /* Add a maximum width to prevent the board from extending too wide */
	background-color: black;
	padding: 2px;
}

.cell {
	border: 1px dashed grey; /* solid white? */
	position: relative;
	text-align: center;
	font-size: 12px;
	background-color: #eee;
	color: grey;

}

.player, .snake, .ladder, .dice, .spiderweb, .shield, .star, .power, .question, .ice, .magnet, .trap, .goback, .stop, .hammer, .fishing, .fight, .medal, .dragon, .dragon2, .finish, .gift, .question2, .start, .broom {
	font-size: 18px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.power {
	font-size: 12px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.player {
	color: black;
}

.snake, .ladder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
}

.start::before {
	content: "🔘";
}

.snake::before {
	content: "🐍";
}

.ladder::before {
	content: "🚀";
}

.dice::before {
	content: "🎲";
}

.spiderweb::before {
	content: "🕸️";
}

.shield::before {
	content: "🛡️";
}

.star::before {
	content: "⭐";
}

.power::before {
	content: "⚡";
}

.question::before {
	content: "❓";
}

.question2::before {
	content: "❔";
}

.ice::before {
	content: "❄️";
}

.magnet::before {
	content: "🧲";
}

.trap::before {
	content: "🪤";
}

.goback::before {
	content: "↩️";
}

.stop::before {
	content: "🛑";
}

.hammer::before {
	content: "🔨";
}

.fishing::before {
	content: "🎣";
}

.fight::before {
	content: "⚔️";
}

.medal::before {
	content: "🎖️";
}

.dragon::before {
	content: "🐲";
}

.dragon2::before {
	content: "🐉";
}

.gift::before {
	content: "🎁";
}

.broom::before {
	content: "🧹";
}

.finish::before {
	content: "🏁";
}

.end-position {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	//color: #333;
	color: grey;
}

.highlight {
	background-color: yellow;
}

.collected {
	background-color: orange;
}


#result {
	/* margin-top: 20px; */
	font-size: 12px;
	color: white;
	background-color: black;
	width: 100%;
	/* margin-left: 33%; 

	border: 2px solid black; */
	padding-bottom: 8px;
}

@keyframes playerMove {
	0% {
		transform: translate(-50%, -50%);
	}
	100% {
		transform: translate(-50%, -50%) translateX(100%);
	}
}

@keyframes cellGlow {
	0%, 100% {
		background-color: #eee;
	}
	50% {
		background-color: yellow;
	}
}

.player.move {
	animation: playerMove 1s linear forwards;
}

.cell.glow {
	animation: cellGlow 1s ease-in-out;
}

/* #dice, #dice2 {
	/*line-height: 1;
	/*opacity: 0; /* Initially hidden */
	/*transition: opacity 0.5s ease-in-out; /* Fade transition effect
	background-color: purple;
	padding: 1px;
	color: white;
	font: italic small-caps bold 25px/20px Georgia, serif;
} */

#dice, #dice2 {
	line-height: 1;
	opacity: 0; /* Initially hidden */
	transition: opacity 0.5s ease-in-out; /* Fade transition effect */
	/* background-color: purple; */
	padding: 1px;
	color: white;
	/* font: italic small-caps bold 25px/20px Georgia, serif; */
}

#dice-container {
	position: absolute;	
	line-height: 1;
	opacity: 0; /* Initially hidden */
	transition: opacity 0.5s ease-in-out; /* Fade transition effect */
	color: white;
	cursor: default;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2; /* Ensure the dice container is above the board */
	background: rgba(0, 0, 0, 0.7);
	padding: 20px; /* Adjust padding as needed */
	border-radius: 10px; /* Add rounded corners for a nicer look */
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#dice-container2 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 60%);
	z-index: 2; /* Ensure the dice container is above the board */
	opacity: 0; /* Initially hidden */
	/*transition: opacity 0.5s ease-in-out; /* Fade transition effect */
	background: rgba(0, 0, 0, 0.7);
	padding: 20px; /* Adjust padding as needed */
	border-radius: 10px; /* Add rounded corners for a nicer look */
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#game-over-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3; /* Ensure the dice container is above the board */
	opacity: 0; /* Initially hidden */
	/*transition: opacity 0.5s ease-in-out; /* Fade transition effect */
	background: rgba(0, 0, 0, 0.85);
	padding: 20px; /* Adjust padding as needed */
	border-radius: 10px; /* Add rounded corners for a nicer look */
	width: 400px; /* doch eher Kartenformat wie powerup? */
	min-height: 200px;
	/*display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;*/
}

#powerup-activated-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3; /* Ensure the dice container is above the board */
	opacity: 0; /* Initially hidden */
	/*transition: opacity 0.5s ease-in-out; /* Fade transition effect */
	background: rgba(0, 0, 0, 0.85);
	padding: 20px; /* Adjust padding as needed */
	border-radius: 10px; /* Add rounded corners for a nicer look */
	width: 220px;
	min-height: 150px;
	/*max-height: 300px;
	/*display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;*/
}

#powerup-activated-message, #powerup-activated-message2 {
	line-height: 1;
	opacity: 0; /* Initially hidden */
	transition: opacity 0.5s ease-in-out; /* Fade transition effect */
	background-color: orange;
	padding: 1px;
	color: white;
	font: italic small-caps bold 25px/20px Georgia, serif;
}

#activated-powerup {
	line-height: 1;
	/*opacity: 0; /* Initially hidden */
	transition: opacity 0.5s ease-in-out; /* Fade transition effect */
	padding: 1px;
	color: white;
	font-size: 80px;
	font-weight: bold;
}

#game-over-container button:hover {
	background-color: purple;
}

#game-over-message {
	/*line-height: 1;
	/*opacity: 0; /* Initially hidden */
	/*transition: opacity 0.5s ease-in-out; /* Fade transition effect */
	background-color: purple;
	padding: 1px;
	color: white;
	font: italic small-caps bold 25px/20px Georgia, serif;
}

.settings-page {
	position: absolute; /* fixed? */
	top: 0%;
	left: 50%;
	transform: translate(-50%, 0%);
	padding: 20px;
	/* background-color: #fff; */
	background: rgba(0, 0, 0, 0.9);
	color: white;
	border: 2px solid #ccc;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	z-index: 3;
	/* max-height: 850px; /* Adjust as needed */
	width: 460px;
	height: 550px;
	/* overflow: auto; 
	margin-bottom: 60px; */
}

.settings-content {
	position: relative;
	max-height: 400px;
	overflow-y: auto;
	margin-bottom: 30px;
}

#playerSettings{
	min-height: 150px;
	max-height: 150px;
	/* overflow-y: auto; /* scrollbalken für mehr als 3 spieler */
}
	

.hidden {
	display: none;
}


.button-container button {
	margin-right: 30px; /* Adjust margin as needed */
}

.emoji {
  font-size: 24px;
  cursor: pointer;
}

.box {
    display: flex;
    justify-content: space-between;
	margin-left: 20px;
	margin-right: 20px;
}

.box .name {
	min-width: 160px;
}

.box ol select, .startingPosition {
	max-width: 50px;
	margin-right: 10px;
	margin-left: 5px;
}

.box ol checkbox {
	padding: 0px;
	margin: 0px;
}


.box select {
    max-width: 150px; /* Adjust as needed */
}

.box ol input[type="checkbox"] {
	min-width: 15px;
	max-width: 15px;
}

.box label {
	margin-top: 5px;
}

.settings-page input,
.settings-page select {
    width: 20%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

#playerSettingsHeader{
	color: grey;
	font-size: 6px;
	text-align: left;
	width: 80%;
	display: flex;
    justify-content: center;
    margin-left: 65px;
    align-items: center;
}

#labelName{
	display: inline-block;
	min-width: 160px;
}

#fileInput {
	width: 70%;
}

#closeSettings {
	position: sticky;
	margin: 0px;
}

/* wird ignoriert */
#closeSettings button:hover{
	color: blue;
}

#editorContainer {
	position: fixed;
	left: 67%;
	top: 10%;
	background-color: black;
	padding: 1px;
}

@keyframes snakeAnimation {
  0% {
	transform: scale(1);
  }
  50% {
    /* transform: translateY(-1px); /* Beispiel: Bewegung nach unten */
	transform: scale(2.5);
  }
  100% {
	transform: scale(1);
  }
}

@keyframes ladderAnimation {
  0% {
    /* transform: translateY(0); /* funktioniert nicht?! */
	transform: scale(1);
  }
  50% {
    /* transform: translateY(-50px); */
	transform: scale(2.5);
  }
  100% {
    /* transform: translateY(0); */
	transform: scale(1);
  }
}

.snake-animation, .ladder-animation {
	position: absolute;
	top: 12px; /* ugly workaround damit das emoji in der mitte bleibt während der animation */
	left: 12px;
	animation: snakeAnimation 1s;
	animation-timing-function: ease-out;
	z-index: 3;
}

@media screen and (max-width: 600px) {
	body {
		
		background-image: url('images/bg-small.jpg');
	}

	h1 {
		font: italic small-caps bold 1.7em/20px Georgia, serif;
		max-width: 300px;
		min-width: 300px;
	}

	#board {
		grid-template-columns: repeat(6, 50px);
		grid-template-rows: repeat(17, 50px); /* Adjust rows accordingly */
		max-width: 300px; /* Adjust max-width for smaller screens */
	}
	
	.settings-page {
		width: 300px;
		top: 50px;
		height: 650px;
	}
	
	.settings-content {
		max-height: 500px;
		overflow-x: hidden; /* nervt sonst */
	}
	
	#fileInput {
		width: 145px;
	}
	
	button {
		font-size: 14px
	}
	
	label {
		font-size: 14px;
		margin-right: 15px;
	}
	
	.startingPosition, .box ol select {
		margin-left: 0px;
		margin-right: 0px;
	}
	
	.box {
		margin-left: 8px;
		margin-right: 8px;
	}
	
	.box .name {
		min-width: 80px;
	}
	
	.box select {
		width: 140px;
	}
	
	#labelName{
		display: inline-block;
		min-width: 70px;
	}
	
	#editorContainer{
		left: auto;
		top: 10%;
	}
}