:root {
    --doggy-width: 320px;
    --doggy-height: 237px;
}
.win-block-interactions:before {
    content: " ";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

#doggy {
	position: absolute;
	right: 0;
	top: calc(var(--win-title-height) + 20px);
    width: var(--doggy-width);
    height: var(--doggy-height);
	z-index: 9;
	background-image: url(../img/draconigen_by_rexdex.png);
	background-size: contain;
	background-repeat: no-repeat;
}

#doggy > #body {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	user-select: none;
}

#doggy > .zone {
	display: block;
	position: absolute;
	z-index: 2;
	width: 30px;
	height: 30px;
	border-radius: 100%;
    cursor: pointer;
	/* border: 3px dotted red; */
}
#doggy > #head.zone {
	top: 19px;
	left: 78px;
}
#doggy > #nose.zone {
	top: 64px;
	left: 58px;
	width: 18px;
	height: 15px;
}
#doggy > #neck.zone {
	top: 67px;
	left: 79px;
	width: 68px;
	height: 33px;
	rotate: 142deg;
}
#doggy > #forepaws.zone {
	top: 181px;
	left: 47px;
	width: 48px;
	height: 37px;
}
#doggy > #hindpaws.zone {
	top: 160px;
	left: 221px;
}
#doggy > #butt.zone {
	top: 99px;
	left: 239px;
	width: 40px;
	height: 58px;
	rotate: 154deg;
}
#doggy > #nono.zone {
	top: 130px;
	left: 203px;
}
#doggy > .zone:hover ~ #body > img {
	filter: drop-shadow(0 0 6px #fff);
}
#nono.zone:hover ~ #body > img {
	filter: drop-shadow(0 0 6px #770024);
}
#doggy #tip {
	display: none;
	position: absolute;
	top: 143px;
	left: 211px;
	width: 8px;
	height: 5px;
	z-index: 1;
	border-radius: 80%;
	transform: rotate(160deg);
	opacity: .85;
	background: #ec3658;
}
.nsfw-mode #doggy #tip {
	display: block;
}

/* #doggy img, */
#doggy #nono.zone ~ #body > img {
	transition: filter .25s ease-in;
}
#doggy-bubble {
    display: none;
	position: absolute;
	z-index: 9;
	width: fit-content;
	height: fit-content;
	padding: 8px 12px;
	background-color: #fff;
	color: #000;
	left: auto;
	top: auto;
	right: 268px;
	bottom: 164px;
	border-radius: 16px 16px 0 16px;
	box-shadow: 0 0 10px #111;
	white-space: nowrap;
}
#doggy.doggy-rip-1 {
	background-image: url(../img/rip.png);
	background-position: center;
}
#doggy.doggy-rip-2 {
	filter: grayscale(1);
	animation: fadeout 3s forwards;
}
#doggy.doggy-rip-3 > #body > img {
    position: absolute;
    animation: angel 2s forwards, wiggle 1.5s linear infinite;
    filter: grayscale(1);
}

@keyframes fadeout {
	from {opacity: 1}
	to {opacity: 0}
}
@keyframes wiggle {
    0% {left: 0}
    25% {left: -12px}
    75% {left: 12px}
    100% {left: 0}
}
@keyframes angel {
    from {top: 0; opacity: 1;}
    to {top: calc(var(--doggy-height) * -1); opacity: 0;}
}