.mapla-login-enhanced {
	box-sizing: border-box;
	overflow: visible;
}

.mapla-scene {
	--mapla-eye-x: 0px;
	--mapla-eye-y: 0px;
	height: 126px;
	margin: -14px auto 8px;
	position: relative;
	width: 150px;
}

.mapla-character {
	height: 118px;
	left: 50%;
	position: absolute;
	top: 2px;
	transform: translateX(-50%);
	transform-origin: 50% 100%;
	width: 126px;
}

.mapla-roof {
	align-items: center;
	background: var(--portal-primary, #1e3a5f);
	clip-path: polygon(50% 0, 100% 72%, 90% 72%, 90% 100%, 10% 100%, 10% 72%, 0 72%);
	height: 58px;
	left: 8px;
	position: absolute;
	top: 0;
	width: 110px;
	z-index: 2;
}

.mapla-building {
	background: #eef3fa;
	border: 2px solid var(--portal-primary, #1e3a5f);
	border-radius: 8px 8px 16px 16px;
	box-shadow: 0 12px 25px rgba(30, 58, 95, 0.16);
	box-sizing: border-box;
	height: 72px;
	left: 14px;
	position: absolute;
	top: 46px;
	transition: border-color 180ms ease, background-color 180ms ease;
	width: 98px;
	z-index: 3;
}

.mapla-eye {
	background: #ffffff;
	border: 2px solid #9fb2ca;
	border-radius: 50%;
	box-sizing: border-box;
	height: 24px;
	overflow: hidden;
	position: absolute;
	top: 12px;
	width: 24px;
}

.mapla-eye::after {
	background: #d9e4f1;
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: -100%;
	transition: transform 160ms ease;
	width: 100%;
	z-index: 2;
}

.mapla-eye-left {
	left: 20px;
}

.mapla-eye-right {
	right: 20px;
}

.mapla-eye i {
	background: var(--portal-primary, #1e3a5f);
	border-radius: 50%;
	display: block;
	height: 8px;
	left: 6px;
	position: absolute;
	top: 6px;
	transform: translate(var(--mapla-eye-x), var(--mapla-eye-y));
	transition: transform 90ms linear;
	width: 8px;
}

.mapla-door {
	background: var(--portal-primary, #1e3a5f);
	border-radius: 7px 7px 2px 2px;
	bottom: -2px;
	height: 25px;
	left: 37px;
	position: absolute;
	transition: background-color 180ms ease;
	width: 20px;
}

.mapla-door::before {
	background: #ffffff;
	border-radius: 50%;
	content: '';
	height: 3px;
	position: absolute;
	right: 4px;
	top: 12px;
	width: 3px;
}

.mapla-arm {
	background: #eef3fa;
	border: 2px solid var(--portal-primary, #1e3a5f);
	border-radius: 12px;
	box-sizing: border-box;
	height: 17px;
	position: absolute;
	top: 39px;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
	width: 42px;
	z-index: 4;
}

.mapla-arm-left {
	left: -27px;
	transform: rotate(20deg);
	transform-origin: 100% 50%;
}

.mapla-arm-right {
	right: -27px;
	transform: rotate(-20deg);
	transform-origin: 0 50%;
}

.mapla-is-secret .mapla-arm-left {
	transform: translate(29px, -17px) rotate(-12deg);
}

.mapla-is-secret .mapla-arm-right {
	transform: translate(-29px, -17px) rotate(12deg);
}

.mapla-is-secret .mapla-eye::after {
	transform: translateY(100%);
}

.mapla-email-focus {
	--mapla-eye-y: 3px;
}

.mapla-password-visible {
	--mapla-eye-x: 2px;
}

.mapla-is-recovery {
	--mapla-eye-x: -2px;
	--mapla-eye-y: 2px;
}

.mapla-is-working .mapla-character {
	animation: mapla-working 800ms ease-in-out infinite alternate;
}

.mapla-is-success .mapla-building {
	background: #e9f8f2;
	border-color: #1a7f4b;
}

.mapla-is-success .mapla-door {
	background: #1a7f4b;
}

.mapla-is-success .mapla-door::before {
	background: transparent;
	border-bottom: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
	border-radius: 0;
	height: 8px;
	right: 6px;
	top: 6px;
	transform: rotate(45deg);
	width: 4px;
}

.mapla-is-error .mapla-character {
	animation: mapla-error 360ms ease-in-out;
}

@keyframes mapla-working {
	from { transform: translateX(-50%) translateY(0); }
	to { transform: translateX(-50%) translateY(-4px); }
}

@keyframes mapla-error {
	0%, 100% { transform: translateX(-50%); }
	25% { transform: translateX(calc(-50% - 5px)); }
	75% { transform: translateX(calc(-50% + 5px)); }
}

@media (max-width: 480px) {
	.mapla-scene {
		height: 116px;
		margin-top: -18px;
		transform: scale(0.92);
		transform-origin: 50% 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mapla-character,
	.mapla-building,
	.mapla-eye i,
	.mapla-eye::after,
	.mapla-arm,
	.mapla-door {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}
