.character-panel {

	display: inline-block;
	max-width: 160px;
	
	cursor: pointer;
	border: 3px var(--highlight-dark) solid;
	
	background-color: #0003;
	box-shadow: 5px 5px 20px 0 inset #0006;
	padding: 3% 2%;
	transition: 0.1s border linear;

	margin: 0 10px;
	margin-bottom: 10px;
	
}

.character-panel.evolve {
	max-width: 25%;
}

.character-row.count-2 {
	padding-left: 25%;
}

.character-panel:hover {
	border-color: var(--highlight);
}

@keyframes bounce {
	
	from { transform: scale(1, 1); }
	to { transform: scale(0.98, 0.98); }
	
}

.character-panel .icon {
	transition: transform 0.1s linear;
}

.character-panel .icon:hover {
	transform: scale(1.1, 1.1);
}

.character-panel.selected {

	background-color: var(--highlight);
	border-color: var(--highlight);
	
}

.character-panel > * {
	text-align: center;
}

.classes {

	height: 100%;
	width: 600px;
	
	border: 3px solid var(--highlight-dark);
	/* border-radius: 20px; */
	
	box-shadow: 0 0 15px 0 rgba(0,0,0,0.3) inset;

}

.classes > .info-class {
	position: absolute;
	background-color: var(--highlight-dark);
	text-align: center;
}

.profile-right {
	width: 460px;
}

.profile-icon {
	
	cursor: pointer;
	width: 200px;
	height: 100%;
	
}

.profile-btn {
	cursor: pointer;

	background-size: cover;
	image-rendering: crisp-edges;
	
	width: 50px;
	height: 50px;
	
	margin-bottom: 15px;
	
}

.big-btn {
	width: 120px;
	height: 120px;
}

.learnable-skills {
	--hover-left: -10px;
	margin-left: calc(-1 * var(--hover-left));
	border-spacing: 0 5px;
	border-collapse: separate;
}

.learnable-skill {
	background-color: var(--highlight-dark);
	transition: transform 0.2s ease-in-out;
	box-shadow: 3px 1px 5px #0008;
	overflow: visible;
	transform: translate(-3px, 0);
}

.learnable-skill.disabled {
	background-color: #444;
}

.disabled .cost {
	background-color: var(--red);
}

.learnable-skill:hover {
	transform: translate(var(--hover-left), 0);
}

.cost {
	width: 10%;
	background-color: var(--highlight-light);
}

.learnable-skill > td {
	padding: 7px 15px;
	cursor: pointer;
}

.stat {
	padding: 4px 0;
}

.stat:first-child {
	padding-right: 40px;
}

.journey > * {
	text-align: center;
	position: relative;
	transition: color 0.1s linear;
}

.journey > p:not(:last-child) {
	--distance: 12px;
	--arrow-length: 12px;
	margin-bottom: calc(var(--arrow-length) * 2 + var(--distance) * 2);
}

.journey > p:not(:last-child)::after {
	content: '';
	position: absolute;
	top: calc(100% + var(--distance));
	left: calc(50% - var(--arrow-length) / 2);
	width: var(--arrow-length);
	height: var(--arrow-length);
	background-color: #0003;
	transition: background-color 0.1s linear;
}

.journey > p:not(:last-child)::before {
	content: '';
	position: absolute;
	top: calc(100% + var(--distance) + var(--arrow-length));
	left: calc(50% - var(--arrow-length));
	width: 0;
	height: 0;

	border-left: var(--arrow-length) solid transparent;
	border-right: var(--arrow-length) solid transparent;
	border-top: var(--arrow-length) solid #0002;
	transition: border-color 0.1s linear;
}

.journey > p:hover {
	color: var(--highlight);
}

.journey > p:hover::after {
	background-color: var(--highlight);
}

.journey > p:hover::before {
	border-top-color: var(--highlight);
}

.evolve-description {
	padding: 5px 0;
	height: 50px;
	max-width: 500px;
}

.greeter {

	width: 150px;

}