* {
	font-family: "Cinzel", serif;
	font-size: 1;
}

html {
	font-size: 62.5%;
	scroll-behavior: smooth;
	background-color: black;
}

body {
	margin: 0;
	padding: 0;
	font-size: 1.6rem;
}

/* Styl dla ekranów początkowych */
/* Główny kontener */
#startup-sequence {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: black;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	overflow: hidden; /* Zapobiega pojawianiu się przewijania */
	z-index: 999;
}
/* Ekrany startowe INTRO*/
#startup-sequence .screen {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 1.8rem;
	text-align: center;
	padding: 40px;
}
#startup-sequence .logo {
	max-width: 80%;
	max-height: 80%;
}

.prolog-text {
	max-width: 800px; /* Ograniczenie szerokości dla lepszej czytelności */
	margin: 0 auto; /* Wyśrodkowanie poziome */
	line-height: 1.5; /* Większa czytelność */
}

@media (max-width: 936px) {
	#startup-sequence .screen {
		font-size: 1.2rem;
		padding: 15px;
	}
}

#game {
	display: none;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;
	margin: 0; /* Na wszelki wypadek */
	padding: 0;
}

#video-container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden; /* by wideo nie wystawało */
	transition: transform 0.5s ease;
}

#background-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 0.5s ease; /* Efekt przejścia */
	background-color: black;
	object-fit: contain;
	background-color: black; /* Jak wolisz */
	z-index: 0; /* wideo z tyłu */
	/* object-fit: contain; */
}

#overlay-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 1920px; /* Bazowa szerokość */
	height: 1080px; /* Bazowa wysokość */
	transform-origin: top left; /* Ważne dla skalowania */
	z-index: 20; /* Nad obrazkiem */
}

/* Obszary interaktywne */
.interactive-area {
	position: absolute;
	cursor: pointer;
	opacity: 0.5; /* Domyślnie delikatnie widoczne */
	border: 1px dashed rgba(255, 255, 255, 0.5); /* Styl areny */
	border-radius: 15px;
	transition: opacity 0.3s ease, transform 0.3s ease;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 60;
}

/* Strzałka dodawana przez CSS */
.interactive-area::after {
	content: "";
	position: absolute;
	width: var(--icon-size, 30px); /* Domyślnie 30px */
	height: var(--icon-size, 30px);
	background-image: var(--icon);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	opacity: 0.9;
	transition: opacity 1s ease;
	z-index: 60;
}

/* Efekt najechania na arenę */
.interactive-area:hover {
	opacity: 1; /* Pełna widoczność na hover */
	transform: scale(1.1); /* Lekkie powiększenie */
	z-index: 60;
}

.interactive-area:hover::after {
	opacity: 1; /* Widoczność strzałki */
	z-index: 60;
}
.item {
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 30;
}
/* do pomocniczej funcji sryptu w index.  */
.preview-box {
	border: 2px dashed red;
	position: absolute;
	background: rgba(255, 0, 0, 0.2);
	pointer-events: none;
	z-index: 9999;
}

.preview-text {
	position: absolute;
	color: white;
	background: rgba(0, 0, 0, 0.7);
	padding: 5px;
	border-radius: 5px;
	font-size: 14px;
	font-family: Arial, sans-serif;
	pointer-events: none;
	z-index: 9999;
}

/* CSS dla kontenera wideo */
#video-display-game {
	position: absolute; /* Upewnij się, że kontener ma relative */
	width: 100%;
	height: 100%; /* lub inna stała wartość */
}

#video-display-game video {
	width: 100%;
	height: 100%;
	object-fit: contain; /* lub cover, w zależności od efektu */
	display: block;
}

/* =======================================
   Z-INDEX CHEAT SHEET (WARSTWY W GRZE)

   0    – #background-video (tło wideo, mapa)
   60 – #transition-overlay (efekt przejścia między lokacjami)
   30  – .item (przedmioty w lokacji)
   50  – #flashlight-overlay (ciemne pomieszczenia)
   60  – .interaction-area (obszary nawigacji/klikalne)
   80  - Monster
   100  – #dialog-overlay (przyciemnienie ekranu pod okienko dialogowe)
   110  – #dialog-box
   110  – #INWENTARZ
   120  - #inventory, latarka switch
   130  - #inventory panel
   140  - #inventory-context-menu
   150  - opcje w grze
   0  - menu -video
   200  - menu
   200	-ustawienia w menu
   210  - menu-confirmation-dialog
   999 – #flashlight-effect (okrąg latarki), startup-sequence (intro)
   9999 - preload
======================================= */