/* Character hover cards: names look like normal text */
.character-name{
	position:relative;
	display:inline;
	color:inherit;
	font:inherit;
	font-weight:inherit;
	text-decoration:none;
	border:0;
	cursor:default;
}

.character-pop{
	position:absolute;
	left:50%;
	bottom:1.8em;
	z-index:50;
	width:190px;
	padding:12px;
	transform:translateX(-50%) translateY(6px);
	background:linear-gradient(180deg, #fff0ca, #e7c98f);
	border:1px solid #9f6c28;
	border-radius:12px;
	box-shadow:0 14px 35px rgba(0,0,0,.35);
	color:#2b160d;
	text-align:center;
	opacity:0;
	pointer-events:none;
	transition:opacity .18s ease, transform .18s ease;
	white-space:normal;
}

.character-pop:after{
	content:"";
	position:absolute;
	left:50%;
	bottom:-8px;
	width:14px;
	height:14px;
	background:#e7c98f;
	border-right:1px solid #9f6c28;
	border-bottom:1px solid #9f6c28;
	transform:translateX(-50%) rotate(45deg);
}

.character-name:hover .character-pop{
	opacity:1;
	transform:translateX(-50%) translateY(0);
}

.character-pop img{
	display:block;
	width:100%;
	height:170px;
	object-fit:cover;
	object-position:top center;
	border-radius:8px;
	margin-bottom:10px;
	border:1px solid rgba(85, 49, 16, .35);
	background:#d8bd84;
}

.character-pop strong{
	display:block;
	font-size:20px;
	line-height:1.1;
	margin-bottom:6px;
	color:#41140e;
}

.character-pop em{
	display:block;
	font-style:normal;
	font-size:14px;
	line-height:1.35;
	color:#5e3820;
}

/* Telepathy styling */
.telepathy{
	font-style:italic;
	font-weight:600;
	text-shadow:0 0 10px rgba(255,255,255,.18);
}

.telepathy-azure{
	color:#3e6fc2;
}

.telepathy-pink{
	color:#a72b43;
}

@media(max-width:760px){
	.character-pop{
		left:0;
		transform:translateX(0) translateY(6px);
	}

	.character-name:hover .character-pop{
		transform:translateX(0) translateY(0);
	}

	.character-pop:after{
		left:24px;
	}
}