#sea-layout {
	display: flex;
	align-items: flex-start;
}

#sea-container {
	position: relative;
	flex: 1;
}

#depth-bar {
	position: relative;
	top: 0px;

	width: 80px;
	height: 110400px;

	margin-right: 20px;
	border-right: 2px solid rgba(255, 255, 255, 0.4);

	font-family: monospace;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
}

.depth-label {
	position: absolute;
	right: 8px;
	transform: translateY(-50%);
	white-space: nowrap;
}

#sea-container {
	position: relative;
	flex: 1;
}

#creatures {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 110400px; /* must match sea height */

	pointer-events: none; /* creatures do not block scroll */
}

.creature-image {
	position: absolute;
	cursor: pointer;
	pointer-events: auto;
	transition: transform 0.2s ease;
}

.creature-image-tiny {
	max-width: 5%;
}

.creature-image-small {
	max-width: 10%;
}

.creature-image-medium {
	max-width: 20%;
}

.creature-image-big {
	max-width: 30%;
}

.creature-image:hover {
	transform: scale(1.05);
}

#creature-dialog {
	position: absolute;
  width: 40%;
}

.dialog-box {
	position: absolute;
	background: #0b1620;
	color: #e8f1ff;
	padding: 14px 16px;
	border-radius: 8px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);

	pointer-events: auto; /* allow clicking close */
	visibility: hidden;
}

.dialog-close {
	position: absolute;
	top: 4px;
	right: 6px;
	background: none;
	border: none;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
}

#heaven-container {
	height: 400px;

	background: linear-gradient(
		to bottom,

		/* Zenith – deep sky blue */ rgb(45, 110, 190) 0%,

		/* Upper sky */ rgb(80, 150, 220) 30%,

		/* Mid sky */ rgb(120, 190, 235) 60%,

		/* Near horizon – pale cyan */ rgb(180, 230, 245) 85%,

		/* Horizon glow */ rgb(210, 245, 255) 100%
	);
}

#euphotic-container {
	height: 2000px;

	background: linear-gradient(
		to bottom,

		/* 0 m – surface (cyan / full-spectrum light) */ rgb(170, 240, 255) 0%,

		/* ~10 m – red mostly absorbed */ rgb(120, 220, 255) 5%,

		/* ~30 m – yellow gone, green dominant */ rgb(70, 200, 230) 15%,

		/* ~60 m – green fading */ rgb(40, 150, 210) 30%,

		/* ~100 m – blue dominant */ rgb(20, 90, 180) 50%,

		/* ~150 m – deep blue */ rgb(10, 45, 120) 75%,

		/* ~200 m – bottom of euphotic zone */ rgb(5, 20, 60) 100%
	);
}

#dysphotic-container {
	height: 8000px;

	background: linear-gradient(
		to bottom,

		/* 200 m – transition from euphotic (very dark blue) */ rgb(5, 20, 60) 0%,

		/* ~300 m – faint blue */ rgb(4, 16, 45) 12.5%,

		/* ~400 m – twilight blue */ rgb(3, 12, 35) 25%,

		/* ~500 m – extremely dim */ rgb(2, 8, 25) 37.5%,

		/* ~600 m – near-black blue */ rgb(1, 5, 18) 50%,

		/* ~700 m – photon-limited vision */ rgb(1, 3, 12) 62.5%,

		/* ~850 m – almost no ambient light */ rgb(0, 2, 8) 81.25%,

		/* 1000 m – end of dysphotic zone */ rgb(0, 0, 4) 100%
	);
}

#aphotic-container {
	height: 100000px;
	background-color: black;
}