/* =========================================================================
   Ranking - padrao Amba Carregado junto com css/person-profile.css
   ========================================================================= */

@keyframes bzcRise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Abas de periodo ---------- */

.bzc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
	padding: 6px;
	background: var(--pf-panel, #1b1712);
	border: 1px solid var(--pf-line, rgba(240, 177, 51, .14));
	border-radius: 14px;
	position: sticky;
	top: 0;
	z-index: 4;
}

.bzc-tabs__tab {
	flex: 1 1 auto;
	display: block;
	padding: 10px 14px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .4px;
	color: var(--pf-mut, #a3988a);
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: 10px;
	transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.bzc-tabs__tab:hover {
	color: #fff3d4;
	background: rgba(240, 177, 51, .10);
	border-color: var(--pf-line, rgba(240, 177, 51, .14));
}

.bzc-tabs__tab.is-active {
	color: #1b1206;
	background: linear-gradient(180deg, var(--pf-gold-2, #ffd97a), var(--pf-gold, #f0b133));
	border-color: var(--pf-gold, #f0b133);
	box-shadow: 0 10px 24px -14px rgba(240, 177, 51, .9);
}

/* ---------- Podio ---------- */

.bzc-podium {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.bzc-podium__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 34px 14px 16px;
	text-align: center;
	background: var(--pf-panel-2, #221d17);
	border: 1px solid var(--pf-line-2, rgba(255, 255, 255, .07));
	border-radius: var(--pf-r, 18px);
	overflow: hidden;
}

.bzc-podium__item::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--podium-color, #a3988a), transparent);
}

.bzc-podium__item--gold {
	--podium-color: #ffd97a;
	border-color: rgba(240, 177, 51, .45);
	background: linear-gradient(180deg, rgba(240, 177, 51, .14), var(--pf-panel-2, #221d17) 55%);
}

.bzc-podium__item--silver {
	--podium-color: #d8d8d8;
	border-color: rgba(216, 216, 216, .30);
	background: linear-gradient(180deg, rgba(216, 216, 216, .10), var(--pf-panel-2, #221d17) 55%);
}

.bzc-podium__item--bronze {
	--podium-color: #d9945a;
	border-color: rgba(217, 148, 90, .32);
	background: linear-gradient(180deg, rgba(217, 148, 90, .12), var(--pf-panel-2, #221d17) 55%);
}

.bzc-podium__place {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 800;
	color: #1b1206;
	background: var(--podium-color, #a3988a);
	border: 3px solid var(--pf-panel, #1b1712);
	border-radius: 50%;
	padding-top: 18px;
	box-sizing: content-box;
}

.bzc-podium__ico {
	image-rendering: auto;
	opacity: .9;
}

.bzc-podium__name {
	font-size: 17px;
	font-weight: 800;
	color: #fff;
	text-decoration: none;
	word-break: break-all;
}

.bzc-podium__name:hover {
	color: var(--pf-gold-2, #ffd97a);
}

.bzc-podium__ev {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: var(--pf-mut, #a3988a);
}

.bzc-podium__lvl {
	font-size: 14px;
	font-weight: 700;
	color: var(--pf-blue, #7ab8ff);
}

.bzc-podium__lvl i {
	font-style: normal;
	opacity: .5;
	padding: 0 2px;
}

.bzc-podium__val,
.bzc-podium__pts {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	margin-top: 2px;
}

.bzc-podium__val b {
	font-size: 19px;
	font-weight: 800;
	color: var(--pf-gold-2, #ffd97a);
}

.bzc-podium__pts b {
	font-size: 15px;
	font-weight: 700;
	color: var(--pf-green, #4ade80);
}

.bzc-podium__val em,
.bzc-podium__pts em {
	font-style: normal;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--pf-mut, #a3988a);
}

.bzc-podium__guild {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding-top: 8px;
	width: 100%;
	justify-content: center;
	text-decoration: none;
	border-top: 1px solid var(--pf-line-2, rgba(255, 255, 255, .07));
}

.bzc-podium__guild img {
	width: 48px;
	height: 36px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--pf-line-2, rgba(255, 255, 255, .07));
	image-rendering: auto;
}

.bzc-podium__guild span {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--pf-green, #4ade80);
	word-break: break-all;
}

.bzc-podium__guild:hover span {
	color: #fff3d4;
}

/* ---------- Cabecalho da classificacao ---------- */

.bzc-rankhead {
	display: grid;
	grid-template-columns: 44px 24px minmax(0, 1fr) 356px 72px;
	gap: 12px;
	align-items: center;
	padding: 0 4px 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: var(--pf-mut, #a3988a);
}

.bzc-rankhead .bzc-rank__meta {
	display: grid;
	grid-template-columns: 74px 96px 78px 82px;
	gap: 10px;
}

/* ---------- Linhas ---------- */

.bzc-ranks {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bzc-rank {
	display: grid;
	grid-template-columns: 44px 24px minmax(0, 1fr) 356px 72px;
	gap: 12px;
	align-items: center;
	padding: 10px 14px;
	background: var(--pf-panel-2, #221d17);
	border: 1px solid var(--pf-line-2, rgba(255, 255, 255, .07));
	border-radius: var(--pf-r-sm, 12px);
	transition: border-color .18s ease, background .18s ease;
}

.bzc-rank:hover {
	border-color: var(--pf-line, rgba(240, 177, 51, .14));
	background: #262018;
}

.bzc-rank.is-new {
	animation: bzcRise .5s cubic-bezier(.2, .8, .3, 1) both;
}

.bzc-rank__pos {
	font-size: 14px;
	font-weight: 800;
	color: var(--pf-gold, #f0b133);
	text-align: center;
}

.bzc-rank__pos i {
	font-style: normal;
	font-size: 10px;
	opacity: .7;
}

.bzc-rank__ico {
	width: 16px;
	height: 16px;
	image-rendering: auto;
}

.bzc-rank__name {
	font-size: 14.5px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bzc-rank__name:hover {
	color: var(--pf-gold-2, #ffd97a);
}

.bzc-rank__meta {
	display: grid;
	grid-template-columns: 74px 96px 78px 82px;
	gap: 10px;
	align-items: center;
	font-size: 13.5px;
}

.bzc-rank__ev {
	font-weight: 700;
	color: var(--pf-gold-2, #ffd97a);
	white-space: nowrap;
}

.bzc-rank__lvl {
	font-weight: 700;
	color: var(--pf-blue, #7ab8ff);
	white-space: nowrap;
}

.bzc-rank__lvl i {
	font-style: normal;
	opacity: .5;
	padding: 0 1px;
}

.bzc-rank__val {
	font-weight: 700;
	color: var(--pf-gold, #f0b133);
	white-space: nowrap;
}

.bzc-rank__pts {
	font-weight: 700;
	color: var(--pf-green, #4ade80);
	white-space: nowrap;
}

.bzc-rank__guild {
	justify-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 24px;
}

.bzc-rank__guild img {
	width: 32px;
	height: 24px;
	object-fit: cover;
	border-radius: 5px;
	border: 1px solid var(--pf-line-2, rgba(255, 255, 255, .07));
	image-rendering: auto;
	transition: transform .16s ease;
}

.bzc-rank__guild a:hover img {
	transform: scale(1.08);
	border-color: var(--pf-line, rgba(240, 177, 51, .14));
}

/* ---------- Responsivo ---------- */

@media (max-width: 980px) {
	.bzc-rankhead,
	.bzc-rank {
		grid-template-columns: 40px 24px minmax(0, 1fr) 320px 64px;
		gap: 10px;
	}

	.bzc-rankhead .bzc-rank__meta,
	.bzc-rank__meta {
		grid-template-columns: 66px 88px 72px 78px;
		gap: 8px;
	}
}

@media (max-width: 860px) {
	.bzc-podium {
		grid-template-columns: minmax(0, 1fr);
	}

	.bzc-rankhead {
		display: none;
	}

	.bzc-rank {
		grid-template-columns: 36px 24px minmax(0, 1fr) auto;
		row-gap: 10px;
	}

	.bzc-rank__meta {
		grid-column: 1 / -1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px 12px;
		font-size: 13px;
	}

	.bzc-rank__meta > span[data-label]::before {
		content: attr(data-label) ": ";
		color: rgba(255, 255, 255, .38);
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: .5px;
	}

	.bzc-rank__guild {
		grid-row: 1;
	}
}

@media (max-width: 560px) {
	.bzc-tabs {
		gap: 6px;
		padding: 5px;
	}

	.bzc-tabs__tab {
		flex: 1 1 40%;
		font-size: 12px;
		padding: 9px 8px;
	}
}
/* =========================================================================
   TOP 10 - caixa lateral (.art-block = 233px, .art-blockcontent padding 22px)
   Grid util: 189px - 8px de padding = 181px
   colunas 16 + 1fr + 24 + 13 + 32 | 4 gaps de 3px (12px) => nome = 84px
   ========================================================================= */

.art-blockcontent ol.bzc-top10 {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-family: Arial, Helvetica, sans-serif;
}

/* legenda (mesmas colunas do item, tom bem discreto) */
.art-blockcontent .bzc-top10__head {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr) 24px 13px 32px;
	gap: 3px;
	align-items: end;
	margin: 0 0 5px;
	padding: 0 4px 5px;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
	color: #6f675b;
}

.bzc-top10__head span:nth-child(1),
.bzc-top10__head span:nth-child(4) {
	text-align: center;
}

.bzc-top10__head span:nth-child(5) {
	text-align: right;
}


.art-blockcontent ol.bzc-top10 > li.bzc-top10__item {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr) 24px 13px 32px;
	gap: 3px;
	align-items: center;
	padding: 3px 4px;
	border: 0;
	border-radius: 6px;
	background: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: #c2c1bc;
	overflow: hidden;
}

.art-blockcontent ol.bzc-top10 > li.bzc-top10__item:hover {
	background: rgba(255, 255, 255, .05);
}

.bzc-top10__pos {
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	color: #f0b133;
	text-align: center;
	white-space: nowrap;
}

.bzc-top10__pos i {
	font-style: normal;
	font-size: 8px;
}

.art-blockcontent ol.bzc-top10 > li .bzc-top10__name {
	min-width: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: -.1px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.art-blockcontent ol.bzc-top10 > li .bzc-top10__name:link,
.art-blockcontent ol.bzc-top10 > li .bzc-top10__name:visited,
.art-blockcontent ol.bzc-top10 > li .bzc-top10__name:active {
	color: #fff;
}

.art-blockcontent ol.bzc-top10 > li .bzc-top10__name:hover {
	color: #ffd97a;
}

.bzc-top10__guild {
	display: block;
	width: 24px;
	line-height: 0;
}

.art-blockcontent ol.bzc-top10 > li a.bzc-top10__guild:link,
.art-blockcontent ol.bzc-top10 > li a.bzc-top10__guild:visited {
	color: inherit;
	text-decoration: none;
}

.bzc-top10__guild img {
	display: block;
	width: 24px;
	height: 18px;
	border: 0;
	border-radius: 3px;
	vertical-align: top;
}

.bzc-top10__ev {
	font-size: 9.5px;
	font-weight: 700;
	color: #a3988a;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
}

.bzc-top10__pts {
	font-size: 11px;
	font-weight: 800;
	color: #4ade80;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
}

.bzc-top10__pts i {
	font-style: normal;
	font-size: 9px;
	font-weight: 700;
	color: #4ade80;
	opacity: .75;
}

.bzc-top10__pts i:empty {
	display: none;
}

.bzc-top10__empty {
	font-size: 12.5px;
	color: #a3988a;
	text-align: center;
	padding: 8px 0;
}

/* link "Ver ranking completo" */
.bzc-top10__more {
	margin: 9px 0 0;
	text-align: center;
}

.art-blockcontent .bzc-top10__more a {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .2px;
	text-decoration: none;
	white-space: nowrap;
	color: #f0b133;
}

.art-blockcontent .bzc-top10__more a:link,
.art-blockcontent .bzc-top10__more a:visited,
.art-blockcontent .bzc-top10__more a:active {
	color: #f0b133;
}

.art-blockcontent .bzc-top10__more a:hover {
	color: #ffd97a;
}

.art-blockcontent .bzc-top10__more a i {
	font-style: normal;
	margin-left: 3px;
}