/*
 * Ranking lateral: identidade Tibia com hierarquia e estados modernos.
 * Os três fragmentos da moldura pertencem ao tema Canary e evitam uma
 * reprodução artificial do acabamento presente nos demais themeboxes.
 */

.nexus-ranking-box {
	position: relative;
	width: 180px;
	min-height: 218px;
	margin: 0 0 12px;
	padding: 34px 8px 29px;
	border: 0;
	border-radius: 0;
	background:
		url("images/themeboxes/box_top.png") top center / 180px 45px no-repeat,
		url("images/themeboxes/box_bottom.png") bottom center / 180px 35px no-repeat,
		url("images/themeboxes/box_bg.png") center 34px / 180px 400px repeat-y;
	box-shadow: none;
	color: #f3e3c3;
	filter: drop-shadow(0 7px 8px rgba(0, 0, 0, .42));
	font-family: var(--nx-font-ui, "Segoe UI", Arial, sans-serif);
	text-align: left;
}

.nexus-ranking-box,
.nexus-ranking-box * {
	box-sizing: border-box;
}

.nexus-ranking-box__header,
.nexus-ranking-box__list,
.nexus-ranking-box__empty,
.nexus-ranking-box__footer {
	position: relative;
	z-index: 1;
	margin-right: 1px;
	margin-left: 1px;
}

.nexus-ranking-box__header {
	padding: 9px 9px 8px;
	border: 1px solid #7a6036;
	border-bottom-color: #b08b47;
	background:
		radial-gradient(circle at 92% 20%, rgba(222, 179, 91, .18), transparent 34%),
		linear-gradient(135deg, rgba(24, 71, 63, .98), rgba(9, 35, 33, .98));
	box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 2px 5px rgba(0, 0, 0, .35);
}

.nexus-ranking-box__header span,
.nexus-ranking-box__header strong,
.nexus-ranking-box__header small {
	display: block;
}

.nexus-ranking-box__header span {
	color: #e6bd67;
	font-size: 7px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.nexus-ranking-box__header strong {
	margin-top: 1px;
	color: #fff0cd;
	font: 700 14px/1.18 var(--nx-font-display, Georgia, serif);
	text-shadow: 0 2px #060b09;
}

.nexus-ranking-box__header small {
	margin-top: 3px;
	color: #bfb39d;
	font-size: 7px;
	letter-spacing: .04em;
}

.nexus-ranking-box__list {
	margin-top: 4px;
	margin-bottom: 4px;
	padding: 3px 5px;
	border: 1px solid #4d4436;
	background: rgba(5, 7, 7, .52);
	box-shadow: inset 0 0 10px rgba(0, 0, 0, .58);
	list-style: none;
}

.nexus-ranking-box__entry {
	display: grid;
	min-height: 45px;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 7px;
	align-items: center;
	padding: 3px 3px;
	border-bottom: 1px solid rgba(177, 143, 78, .28);
}

.nexus-ranking-box__entry:last-child {
	border-bottom: 0;
}

.nexus-ranking-box__medal {
	display: block;
	width: 19px;
	height: 38px;
	margin: 0 auto;
	image-rendering: auto;
}

.nexus-ranking-box__identity {
	min-width: 0;
}

.nexus-ranking-box__identity a {
	display: block;
	overflow: hidden;
	color: #f0d18c;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .01em;
	text-decoration: none;
	text-overflow: ellipsis;
	text-shadow: 0 1px 1px #000;
	white-space: nowrap;
}

.nexus-ranking-box__identity a:hover,
.nexus-ranking-box__identity a:focus-visible {
	color: #fff1c6;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.nexus-ranking-box__identity small {
	display: block;
	margin-top: 2px;
	overflow: hidden;
	color: #bfb4a4;
	font-size: 7px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nexus-ranking-box__status {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 4px;
	border: 1px solid #4d4840;
	border-radius: 50%;
	background: #817a70;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}

.nexus-ranking-box__status.is-online {
	border-color: #75c68d;
	background: #3ec469;
	box-shadow: 0 0 5px rgba(62, 196, 105, .72);
}

.nexus-ranking-box__empty {
	margin-top: 4px;
	margin-bottom: 4px;
	padding: 14px 9px;
	border: 1px solid #4d4436;
	background: rgba(5, 7, 7, .52);
	color: #c7bba8;
	font-size: 8px;
	line-height: 1.45;
	text-align: center;
}

.nexus-ranking-box__footer {
	padding: 5px;
	border: 1px solid #4d4436;
	background: rgba(6, 8, 8, .66);
}

.nexus-ranking-box__footer a {
	display: block;
	min-height: 31px;
	padding: 8px 6px;
	border: 1px solid #9a763d;
	border-radius: 3px;
	background: linear-gradient(180deg, #2b665b, #153f3a);
	box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 2px 4px rgba(0, 0, 0, .42);
	color: #fff0d1;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .02em;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px #000;
	transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.nexus-ranking-box__footer a::after {
	margin-left: 5px;
	color: #e8c26f;
	content: "›";
	font-size: 11px;
	line-height: 0;
}

.nexus-ranking-box__footer a:hover,
.nexus-ranking-box__footer a:focus-visible {
	border-color: #e0b75e;
	background: linear-gradient(180deg, #36786c, #1d5049);
	color: #fff7e8;
}

@media (prefers-reduced-motion: reduce) {
	.nexus-ranking-box__footer a {
		transition: none;
	}
}