@font-face {
	font-family: 'teeny_tiny_pixlsregular';
	src: url('fonts/teenytinypixls-o2zo-webfont.woff2') format('woff2'),
		 url('fonts/teenytinypixls-o2zo-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

html {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	background: transparent;
	line-height: 1.8;
	overflow: hidden;
	font-family: 'teeny_tiny_pixlsregular';
	font-size: 10px;
	text-rendering: geometricPrecision;
	height: 80px;
}

.cat {
	width: 100%;
	background: transparent;
	height: 80px;
	position: relative;
	user-select: none;
}

.cat .catPet {
	height: 80px;
	width: 80px;
	position: absolute;
	bottom: -14px;
	cursor: grab;
	position: relative;
	z-index: 100;
}

.cat .catPet img.pet {
	height: 80px;
	width: 80px;
	object-fit: contain;
	image-rendering: pixelated;
	display: block;
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.cat .catPet img.emote {
	height: 32px;
	width: 30px;
	object-fit: contain;
	image-rendering: pixelated;
	display: block;
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	position: absolute;
	top: 2px;
	left: 50px;
}

.cat .catPet:active {
	cursor: grabbing;
}

.cat .catBowl {
	width: 22px;
	height: 22px;
	position: absolute;
	bottom: 0;
	right: 40px;
	z-index: 10;
}

.cat .catBowl img {
	width: 22px;
	height: 22px;
	image-rendering: pixelated;
	position: absolute;
	bottom: 0;
	left: 0;
}

.cat .catBowl-empty:hover {
	bottom: -2px;
	cursor: pointer;
}

.cat .catStats {
	position: absolute;
	bottom: 5px;
	left: 0;
	padding: 2px 0;
	display: flex;
	gap: 1rem;
	color: #64748b;
	z-index: 10;
}

.cat .catStats .catStats-pets:before {
	content: 'cat pets: ';
}

.cat .catStats .catStats-food:before {
	content: 'food: ';
}

.cat .catStats .catStats-notice {
	color: #ea580c;
}

.cat .catScore {
	position: absolute;
	font-size: 10px;
	color: #f472b6;
	pointer-events: none;
	z-index: 200;
	animation: scoreFloat 0.6s ease-out forwards;
}

@keyframes scoreFloat {
	0%   { opacity: 0.8; transform: translateY(0); }
	60%  { opacity: 0.4; }
	100% { opacity: 0; transform: translateY(-18px); }
}