#menu {
	display: none; /* na starcie ukryte */
	position: relative;
	width: 100vw;
	height: 100vh;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	color: white;
	font-family: "Cinzel", serif;
	font-size: 14px;
	letter-spacing: 1px;
	z-index: 200;
	text-transform: uppercase;
}
#menu .background-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}
#game-title p {
	position: relative;
	display: inline-block; /* Umożliwia ustawienie Chapter z prawej strony */
	font-family: "Cinzel", serif;
	font-size: 2.4rem; /* Większy rozmiar, żeby wyróżniał się jako tytuł */
	font-weight: bold;
	color: #ffffff; /* Jasnoczerwony, mroczny akcent pasujący do horroru */
	text-transform: uppercase; /* Zachowujemy wielkie litery dla spójności */
	letter-spacing: 1.6px; /* Lekko zwiększony odstęp liter dla dramatycznego efektu */
	text-shadow: 0 0 10px rgba(255, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.9); /* Mroczny, krwisty efekt cienia */
	margin-bottom: 0px; /* Odstęp od przycisków */
	animation: flicker 1.5s infinite alternate; /* Subtelne migotanie dla klimatu horroru */
}
#chapter {
	display: block; /* Ustawia Chapter obok tytułu */
	position: relative;
	top: 0px; /* Lekkie przesunięcie w górę, żeby był bliżej tytułu */
	left: 78%; /* Przesunięcie w prawo od tytułu */
	font-family: "Cinzel", serif; /* Zachowaj spójność czcionki */
	font-size: 1rem; /* Mniejsze litery, jak chciałeś "małe" */
	color: #ffffff; /* Biały kolor, jak prosiłeś */
	letter-spacing: 1px; /* Lekki odstęp liter dla spójności */
	text-transform: uppercase; /* Wielkie litery, żeby pasowały do stylu */
}

/* Animacja migotania (nie zmieniam, bo działa dobrze) */
@keyframes flicker {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.8;
	}
	100% {
		opacity: 1;
	}
}
#menu #content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	position: absolute;
	top: 40%;
	left: 51%;
	transform: translate(-50%, -50%);
	width: 100%;
}
/* Styl przycisków menu */
#menu .button {
	background-color: rgba(0, 0, 0, 0.7);
	border: none;
	color: white;
	padding: 5px 15px;
	font-size: 1.4rem;
	cursor: pointer;
	border-radius: 5px;
	transition: background-color 0.3s ease, color 0.3s ease;
	width: 188px;
	text-align: center;
}
#menu .button:hover {
	background-color: rgba(24, 23, 23, 0.737);
	color: rgb(136, 2, 2);
}
/* Ustawienia – początkowo ukryte, ale bez własnego tła */
#settings {
	position: fixed;
	top: 48%;
	left: 51%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.7);
	width: 80%;
	max-width: 400px;
	color: white;
	padding: 20px;
	font-size: 1.5rem; /* pamiętaj o jednostce */
	border-radius: 8px;
	text-align: center;
	display: none; /* Domyślnie ukryte */
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	display: none;
	z-index: 200;
}
#settings h2 {
	margin-bottom: 20px;
}
#settings label {
	display: block;
	margin-bottom: 10px;
}
#settings input[type="range"] {
	width: 100%;
	margin-bottom: 20px;
}

#settings button {
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
	background-color: #555;
	border: none;
	border-radius: 4px;
	color: white;
}

#settings #walking-sound-toggle {
	margin: 0 0 0 20px; /* odstęp między checkboxem a tekstem */
	/* Opcjonalnie możesz ustawić rozmiar checkboxa */
	width: 16px;
	height: 16px;
}

#settings button:hover {
	background-color: #777;
}

#settings #main-options {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

/* koło opcje w grze  */
#game-settings-button {
	position: fixed; /* Fixed, żeby był zawsze w tym samym miejscu względem okna przeglądarki */
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	z-index: 150; /* Wysoki, żeby był na wierzchu */
	display: none; /* Domyślnie ukryty */
}
#game-settings-button img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
#settings .menu-door {
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	background: url("../img/icons/menu_door_icon.png") no-repeat center/contain;
	cursor: pointer;
	transition: transform 0.2s ease-in-out;
}

#settings .menu-door:hover {
	transform: scale(1.2);
}

/* Styl okienka potwierdzenia */
#menu-confirmation-dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.8); /* Ciemne tło */
	color: white; /* Tekst w białym kolorze */
	padding: 20px 40px;
	border-radius: 10px;
	text-align: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Delikatny cień */
	z-index: 210; /* Na wierzchu */
}

/* Tekst pytania */
#menu-confirmation-dialog p {
	font-size: 1.5rem;
	margin-bottom: 20px;
}

/* Przycisk TAK i NIE */
#menu-confirmation-dialog button {
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	border: none;
	padding: 10px 20px;
	margin: 0 10px;
	font-size: 1.2rem;
	cursor: pointer;
	border-radius: 5px;
	transition: background-color 0.3s ease;
}

/* Hover efekt dla przycisków */
#menu-confirmation-dialog button:hover {
	background-color: rgba(136, 2, 2, 0.8); /* Czerwonawe podświetlenie */
	color: white;
}

@media (max-width: 926px) {
	#game-title p {
		font-size: 1.8rem;
	}
	#chapter {
		left: 72%;
	}
}