.ransom-card {
	color: #FFF;
}

.ransom-card h1, .ransom-card h3 {
	font-family: "Personified UX";
}

.ransom-card h1 > span, .ransom-card h3 > span {
	margin: 0 2px;
	padding: 0 4px;
	white-space: pre;
}

.ransom-card h1 > span, .ransom-card h3 > span, .ransom-card .d-flex h5, .ransom-card p {
	background-color: #000;
}

.ransom-card #badges {
	border: .25rem solid #000;
}

.ransom-card #badges h5 {
	font-family: "Helvetica Now Display";
	text-shadow: 1px 1px #000;
}

.player-avatar {
	transform: rotate(-5deg);
	border: 1px solid #000;
}

.player-avatar img {
	transform: rotate(10deg);
	border: 1px solid #000;
}

/* See global.css */
.player-avatar-rank-1 {
	background-color: rgb(var(--color-player-rank-1));
}
.player-avatar-rank-2 {
	background-color: rgb(var(--color-player-rank-2));
}
.player-avatar-rank-3 {
	background-color: rgb(var(--color-player-rank-3));
}
.player-avatar-rank-4 {
	background-color: rgb(var(--color-player-rank-4));
}
.player-avatar-rank-5 {
	background-color: rgb(var(--color-player-rank-5));
}
.player-avatar-rank-6 {
	background-color: rgb(var(--color-player-rank-6));
}
.player-avatar-rank-7 {
	background-color: rgb(var(--color-player-rank-7));
}
.player-avatar-rank-8 {
	background-color: rgb(var(--color-player-rank-8));
}

.player-color-rank-1 {
	color: rgb(var(--color-player-rank-1));
}
.player-color-rank-2 {
	color: rgb(var(--color-player-rank-2));
}
.player-color-rank-3 {
	color: rgb(var(--color-player-rank-3));
}
.player-color-rank-4 {
	color: rgb(var(--color-player-rank-4));
}
.player-color-rank-5 {
	color: rgb(var(--color-player-rank-5));
}
.player-color-rank-6 {
	color: rgb(var(--color-player-rank-6));
}
.player-color-rank-7 {
	color: rgb(var(--color-player-rank-7));
}
.player-color-rank-8 {
	color: rgb(var(--color-player-rank-8));
}

.statusbox-body::before {
	background-color: rgb(var(--color-panel)) !important;
}

.statusbox-body h4 {
	font-family: "After Disaster" !important;
	text-shadow: 2px 2px black;
}

.inv-item {
	display: inline-block;
	position: relative;
	background: rgb(var(--color-panel-light));
	width: 64px;
	height: 64px;
	margin: 5px;
	font-weight: bold;
	overflow: hidden;
}

.inv-item:hover {
	background: rgb(var(--color-panel-light-fade));
}

.inv-item-label {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 20px;
	background: rgba(var(--color-panel), 0.5);
	pointer-events: none;
}

.equipped {
	background: rgb(var(--color-highlight));
}

.inv-header.equipped {
	display: inline;
	padding: 2px;
}

.inv-item-info {
	visibility: hidden;
}

.inv-item-info.item-count {
	position: absolute;
	top: 0;
	left: 0;
	padding-left: 2px;
	padding-right: 2px;
	background: rgba(var(--color-panel), 0.5);
	pointer-events: none;
}

.inv-item > p {
	position: absolute;
	bottom: 0;
	margin: 0;
	animation: textBounce 3s linear infinite alternate;
	white-space: nowrap;
	padding-left: 4px;
	padding-right: 4px;
	pointer-events: none;
}

/*
	The reason the second transform is two translateX functions is because some browers don't support calc() here
	Equivalent to: translateX(calc(64px - 100%))
*/
@keyframes textBounce {
	0% {
		transform: translateX(0px);
	}
	100% {
		transform: translateX(64px) translateX(-100%);
	}
}

#item-tooltip {
	position: absolute;
	min-width: 128px;
	border-left: 2px solid rgb(var(--color-highlight));
	background: rgb(var(--color-panel-light));
	color: #fff;
	font-weight: bold;
	padding: 8px;
	font-size: 0px;
	visibility: hidden;
	z-index: 1;
	pointer-events: none;
}

.item-tooltip-count {
	display: table-cell;
	background: rgb(var(--color-panel-light-superfade));
	padding-left: 4px;
	padding-right: 4px;
	font-size: 14px;
}

.item-tooltip-price {
	display: table-cell;
	background: rgb(var(--color-panel-light-fade));
	padding-left: 4px;
	padding-right: 4px;
	font-size: 14px;
}

.item-tooltip-name {
	display: table-cell;
	background: rgb(var(--color-panel));
	padding-left: 4px;
	padding-right: 4px;
	font-size: 14px;
}

.item-tooltip-desc {
	font-size: 14px;
	margin-top: 4px;
}

.item-tooltip-apartment {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 14px;
	background: rgb(var(--color-panel-light-superfade));
	visibility: hidden;
}

.achievement {
	white-space: nowrap;
}

.achievement h4 {
	text-shadow: none;
}

.achievement-complete {
	font-family: "After Disaster";
	font-size: 22px;
	line-height: 22px;
}

/* Bootstrap doesn't provide this built-in... */
@media (min-width: 992px) {
	.w-lg-50 {
		width: 50% !important;
	}
}