body, html {
	margin: 0; padding: 0;
	width: 100%; height: 100%;
	overflow: hidden;
	background-color: #f0f0f0; 
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	overscroll-behavior: none;
}

#viewport { 
	width: 100vw; height: 100vh; 
	position: relative; 
	perspective: 1000px;
}

#grid-canvas {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	transform-style: preserve-3d;
}

.tile {
	position: absolute;
	/* Width and Height are set by JS now */
	will-change: transform;
	cursor: pointer;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.tile img {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	opacity: 0;
	transition: opacity 0.4s ease-out;
	display: block;
}

.tile img.loaded { opacity: 1; }

/* --- DARK OVERLAY --- */
#overlay {
	position: fixed; inset: 0; 
	background: rgba(15, 15, 15, 0.95); /* Deep dark background */
	z-index: 100; 
	display: flex; flex-direction: column; 
	align-items: center; justify-content: center; 
	padding: 20px;
	opacity: 1; transition: opacity 0.3s;
}

#overlay.hidden { 
	opacity: 0; pointer-events: none; 
}

/* Remove old white box styling */
.overlay-content { 
	display: flex; flex-direction: column; 
	align-items: center; justify-content: center;
	width: 100%; height: 100%; 
	background: transparent; 
	box-shadow: none;
}

.image-area { 
	flex: 0 1 auto;
	background: transparent; 
	display: flex; align-items: center; justify-content: center; 
	overflow: hidden;
	max-height: 85vh;
}

.image-area img { 
	max-width: 90vw; 
	max-height: 80vh; 
	object-fit: contain; 
	box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.text-area { 
	flex: 0 0 auto; 
	padding: 20px; 
	border: none; 
	text-align: center;
	width: 100%;
	max-width: 700px;
}

.label { display: none; } /* Hide the label */

#caption-text { 
	font-size: 16px; 
	line-height: 1.5; 
	color: #fff; /* White text */
	margin-top: 15px; 
	text-shadow: 0 1px 2px rgba(0,0,0,0.8);
	font-weight: 400;
}

#close-btn { 
	position: absolute; top: 20px; right: 20px; 
	font-size: 40px; border: none; background: none; 
	cursor: pointer; color: #fff; z-index: 110; 
	opacity: 0.8;
}
#close-btn:hover { opacity: 1; }

@media (max-width: 768px) { 
	.image-area img { max-width: 100%; max-height: 70vh; }

/* --- LOADING SPINNER --- */
	#loading {
		position: fixed;
		top: 0; left: 0; 
		width: 100%; height: 100%;
		display: flex; align-items: center; justify-content: center;
		z-index: 50;
		pointer-events: none;
		transition: opacity 0.5s ease;
	}
	
	#loading.hidden {
		opacity: 0;
	}
	
	.spinner {
		width: 30px; 
		height: 30px;
		border: 2px solid #ddd; /* Light grey ring */
		border-top-color: #333; /* Dark spinning part */
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
	}
	
	@keyframes spin {
		to { transform: rotate(360deg); }
	}
/* Add to your style.css */
	#grid-canvas {
		opacity: 0;
		transition: opacity 0.8s ease;
	}
	
	#grid-canvas.ready {
		opacity: 1;
	}
/* --- INTERACTIVE CURSORS --- */
	
	/* Default grid cursor is an open hand */
	body {
		cursor: grab;
	}
	
	/* When the user clicks and drags, change to a closed fist */
	body.dragging {
		cursor: grabbing !important;
	}
	
	/* Let users know the images are clickable */
	.tile {
		cursor: pointer;
	}
	
	/* Let users know clicking the dark background will close it */
	#overlay {
		cursor: pointer; 
	}
	
	/* Optional: keep the normal text cursor for the caption so people can highlight/copy the text if they want */
	#caption-text {
		cursor: text; 
	}
}