body {
	font-family: Arial, sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	margin: 0;
	background-color: #f0f0f0;
	flex-direction: column;
}
h2 { font-size: 18px; font-weight: bolder; }

#orkaPic {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transition: transform 0.1s ease, opacity 0.3s ease;
	object-fit: cover;
	user-select: none;
}

.clickable:hover:not(.disabled) { transform: translateY(-2px); }
.clickable:active:not(.disabled) { transform: translateY(1px); }
.disabled { !important; opacity: 0.5; filter: grayscale(100%); }

.bg-green { background-color:#52b48b; }
.bg-orange { background-color:#f0603f; }
#map { width: 100px; height: 100px;  display: none; }
#statusinfo { font-weight:normal; color:#fff; padding:7px 13px; width: 300px; }
#statusinfo img { width:24px; height:24px; float:left; margin:-2px 2px 0 -3px; }

#map_canvas {
	-webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;
	width:100%; height:250px; position:relative; background:rgb(229,227,223); overflow:hidden;
}

.extra-buttons { gap: 20px; }

.sub-button {
	width: 80px; height: 80px; border-radius: 15px; cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.1s ease, opacity 0.3s ease;
	object-fit: cover;
}