/*
 * LaMOWeb – Rankings: estilos para status (online/offline) e VIP (tier)
 * Garantir existência no template para uso nas informações do tipo.
 */

/* --- Navegação por categoria/tipos na página de rankings --- */
.we-rankings-nav-wrap {
	padding: 14px;
	border-radius: 14px;
	border: 1px solid rgba(255, 80, 80, 0.28);
	background: linear-gradient(180deg, rgba(70, 10, 10, 0.2), rgba(10, 10, 10, 0.72));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	margin-bottom: 14px;
}
.we-rankings-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.we-rankings-nav-list .we-rankings-nav-category {
	width: 100%;
	list-style: none;
	margin: 8px 0 0 0;
	padding: 0 2px 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 184, 184, 0.9);
	border-bottom: 1px solid rgba(255, 80, 80, 0.22);
}
.we-rankings-nav-list .we-rankings-nav-category:first-child {
	margin-top: 0;
}
.we-rankings-nav-wrap li.menu {
	float: none !important;
	background: none !important;
	padding: 0 !important;
}
.we-rankings-nav-wrap li.menu a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 14px;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.92);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.18s ease;
}
.we-rankings-nav-wrap li.menu a:hover {
	background: rgba(255, 55, 55, 0.2);
	border-color: rgba(255, 70, 70, 0.4);
}
.we-rankings-nav-wrap li.menu a.is-active {
	background: linear-gradient(180deg, rgba(220, 35, 35, 0.55), rgba(110, 0, 0, 0.7));
	border-color: rgba(255, 90, 90, 0.62);
	color: #fff;
	box-shadow: 0 0 0 1px rgba(255, 90, 90, 0.2);
}
.we-rankings-block .rankings_current_title {
	margin: 2px 0 10px;
	font-size: 22px;
	font-weight: 700;
}

.rankings_mode_tabs {
	margin: 0 0 10px;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	border-radius: 10px;
	border: 1px solid rgba(255, 120, 120, 0.18);
	background: rgba(120, 20, 20, 0.14);
}
.rankings_mode_tabs a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 0 14px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.92);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.18s ease;
}
.rankings_mode_tabs a:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.32);
}
.rankings_mode_tabs a.active {
	background: linear-gradient(180deg, rgba(220, 35, 35, 0.6), rgba(110, 0, 0, 0.75));
	border-color: rgba(255, 80, 80, 0.62);
	color: #fff;
}

.rankings_division_tabs {
	margin: 0 0 14px;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.03);
}
.rankings_division_tabs a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 0 14px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.92);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.18s ease;
}
.rankings_division_tabs a:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.32);
}
.rankings_division_tabs a.active {
	background: linear-gradient(180deg, rgba(220, 35, 35, 0.55), rgba(110, 0, 0, 0.7));
	border-color: rgba(255, 80, 80, 0.6);
	color: #fff;
}

/* --- Online/Offline (bolinha) --- */
.status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: middle;
}
.status-online {
	background: #22c55e;
}
.status-offline {
	background: #ef4444;
}

/* --- VIP0 a VIP4 (cores no nome/célula) --- */
/* BRONZE */
.ranking-vip-0 {
    color: #FFF;
    text-shadow: 0 0 4px rgba(205,127,50,0.4);
}

/* GOLD */
.ranking-vip-1 {
    color: #facc15;
    text-shadow: 0 0 6px rgba(250,204,21,0.5);
}

/* GOLD II (mais forte) */
.ranking-vip-2 {
    color: #eab308;
    text-shadow:
        0 0 6px rgba(234,179,8,0.7),
        0 0 12px rgba(234,179,8,0.5);
}

.ranking-vip-3 {
    color: #eab308;
    text-shadow:
        0 0 6px rgba(234,179,8,0.7),
        0 0 12px rgba(234,179,8,0.5);
}

/* LEGENDARY */
.ranking-vip-4,
.ranking-vip-4 a {
    /* fallback (caso o clip falhe, não some) */
    color: #fff;

    /* RGB passando */
    background: linear-gradient(
        90deg,
        #ff004c,
        #ff7a00,
        #ffe600,
        #3dff00,
        #00ffd5,
        #008cff,
        #7a00ff,
        #ff00d4,
        #ff004c
    );
    background-size: 400% 100%;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* “fumaça/glow” */
    text-shadow:
        0 0 6px rgba(255,255,255,0.35),
        0 0 14px rgba(0,255,213,0.35),
        0 0 26px rgba(122,0,255,0.35),
        0 0 40px rgba(255,0,212,0.25);

    /* movimento contínuo tipo RGB */
    animation: legendary-rgb 5.2s linear infinite;
}

/* movimento do gradiente */
@keyframes legendary-rgb {
    0%   { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.ranking-vip-4,
	.ranking-vip-4 a {
		color: transparent;
	}
}
.ranking-vip-4 a:hover {
	opacity: 0.95;
}
@keyframes ranking-diamond-shine {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* --- Prime (coroa premium para exibir no nome) --- */
.ranking-prime,
.ranking-prime a {
	position: relative;
	display: inline-block;
	padding-left: 18px;
	color: #ffe9a3;
	font-weight: 700;
	text-shadow:
		0 0 6px rgba(255, 226, 120, 0.45),
		0 0 12px rgba(255, 162, 0, 0.35);
}
.ranking-prime::before,
.ranking-prime a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 13px;
	height: 10px;
	transform: translateY(-52%);
	border-radius: 2px 2px 3px 3px;
	background: linear-gradient(180deg, #fff4bf 0%, #ffd65a 46%, #c58309 100%);
	clip-path: polygon(
		0% 100%,
		8% 42%,
		22% 62%,
		34% 14%,
		50% 58%,
		66% 14%,
		78% 62%,
		92% 42%,
		100% 100%
	);
	box-shadow:
		0 0 6px rgba(255, 205, 74, 0.45),
		0 0 10px rgba(255, 170, 40, 0.35);
	animation: ranking-prime-crown-glow 2.4s ease-in-out infinite;
}
.ranking-prime::after,
.ranking-prime a::after {
	/* joia no centro da coroa */
	content: "";
	position: absolute;
	left: 5px;
	top: calc(50% - 2px);
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #7df8ff;
	box-shadow:
		0 0 6px rgba(125, 248, 255, 0.9),
		0 0 10px rgba(56, 156, 255, 0.55);
}
@keyframes ranking-prime-crown-glow {
	0%, 100% {
		filter: brightness(1);
		transform: translateY(-52%) scale(1);
	}
	50% {
		filter: brightness(1.18);
		transform: translateY(-52%) scale(1.06);
	}
}