/* explorer_city.css */

/* --- MAIN CARD --- */
#explorer_card {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 95vw;
	height: 95vh;
	background-color: #000;
	border: 3px solid #fff;
	border-radius: 10px;
	z-index: 10000; 
	display: none;
	font-family: sans-serif;
}

#close_explorer {
	position: absolute;
	top: 20px;
	right: 20px;
	background: red;
	color: white;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
	z-index: 10002; 
}

/* --- 3D VIEWPORT --- */
#explorer_3d_container {
	width: 100%;
	height: 100%;
	perspective: 600px; /* Standard FPS FOV */
	overflow: hidden;
	background: linear-gradient(to bottom, #87CEEB 0%, #E0F7FA 100%); /* Sky background */
}

/* --- CAMERA RIG --- */
/* 1. ROTATION RIG: Sits at screen center, rotates the world around the player */
#camera_rotation_rig {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	transform-style: preserve-3d;
	/* This will be rotated by JS (rotateY) */
}

/* 2. POSITION RIG: Moves the world so the player is at (0,0) */
#world_translation_rig {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	transform-style: preserve-3d;
	/* This will be translated by JS (translateX, translateZ) */
}

/* --- WORLD OBJECTS --- */

/* The Ground Plane - The reference surface */
#ground_plane {
	position: absolute;
	/* Giant floor centered on (0,0) */
	width: 40000px; 
	height: 40000px;
	transform: translate(-20000px, -20000px) rotateX(90deg);
	background-color: #3b3b3b; /* Dark asphalt/ground color */
	pointer-events: none;
	/* Ensure it is behind everything else but visible */
	z-index: -1; 
}

.city-object-3d {
	position: absolute;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

/* FACES & STYLES */

/* Building/Tower Walls */
#explorer_card .wall {
	position: absolute;
	opacity: 1;
	box-shadow: inset 0 0 10px rgba(0,0,0,0.5); /* Inner shadow for definition */
	/* Base color provided by JS */
}

/* Building Roofs */
#explorer_card .roof {
	position: absolute;
	filter: brightness(120%);
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* Roads - Must sit slightly above ground */
.road-surface {
	position: absolute;
	background-color: #999; /* Light gray road */
	transform-origin: center center;
	box-shadow: 0 0 0 1px #777; /* Subtle border */
}

/* Trees - Specific shape to look less like green buildings */
.tree-trunk {
	background-color: #5D4037;
}
.tree-foliage {
	background-color: #2E7D32;
	border-radius: 5px; /* Softer edges */
}

#controls_overlay {
	position: absolute;
	bottom: 20px;
	width: 100%;
	text-align: center;
	color: white;
	font-size: 14px;
	text-shadow: 1px 1px 0 #000;
	pointer-events: none;
}