:root{
	--yellow-40:#fffe9c;
	--yellow-50: #ffebd0;
	--yellow-80:#fdbc01;
	--yellow-300:#fbe3a1;
	--yellow-350:#ffe5a5;
	--yellow-500:#ffd800;
	--yellow-600:#ffaa00;
	--yellow-700:#ffcc00;
	--yellow-800:#ffbf00;


	--black-800:#000;

	--gray-50:#141414;
	--gray-300:#bfbfbf;
	--gray-400:#2d2a2a;
	--gray-500:#1c1818;
	--gray-600:#211c1c;
	--gray-700:#221d17;
	--gray-750:#272116;
	--gray-780:#2a2117;
	--gray-800:#1e120b;

	--purple-300:#4c4eb1;
	--purple-400:#3e3fa1;
	--purple-500:#4849a0;

	--green-600: #586800;
	--green-500: #d1ffa5;
	--green-700: #588700;

	--black:#000;
	--white: #FFF;
	--yellow: #ffd200;

	--red-700:#ff0000;

	--blue-700:#0070ff;

}



body main img{
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;	

}

.fa, .fa-brands, .fa-chisel, .fa-classic, .fa-duotone, .fa-etch, .fa-graphite, .fa-jelly, .fa-jelly-duo, .fa-jelly-fill, .fa-light, .fa-notdog, .fa-notdog-duo, .fa-regular, .fa-semibold, .fa-sharp, .fa-sharp-duotone, .fa-slab, .fa-slab-press, .fa-solid, .fa-thin, .fa-thumbprint, .fa-utility, .fa-utility-duo, .fa-utility-fill, .fa-whiteboard, .fab, .far, .fas {
    width: auto !important;
}

.swal2-popup button:focus {
    outline: none !important;
    box-shadow: none !important;
}




body{
	background: #3c2d20;
	background: linear-gradient(360deg, rgba(255, 107, 2, 0.97) 10%, rgb(255, 129, 0) 30%, rgb(255 153 0) 59%, rgb(255, 198, 1) 73%);

	
}



.stop-scrolling {
	height: 100%;
	overflow-y: hidden;
}


main{

	
}

main section.center-container{
	background-image: url('../img/fondo.webp');
	background-repeat: repeat-y;
	background-position: center top;
	background-size: 100% auto;
	padding-bottom: 20px;




	    



}

/* Home fixed social circles — appear after hero scroll */
.home-social-float{
	position: fixed;
	left: 61px;
	top: 50%;
	z-index: 40;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 34px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-50%);
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.home-social-float.is-visible{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.home-social-float-link{
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.65rem;
	text-decoration: none;
	border: 3px solid #111;
	background: linear-gradient(160deg, #ff4700 0%, #d10000 55%, #8f0000 100%);
	box-shadow:
		0 0 0 3px #ffd000,
		0 10px 0 #111,
		0 16px 26px rgba(255, 50, 0, 0.45);
	opacity: 0;
	transform: scale(1.65);
	transition:
		transform 0.45s cubic-bezier(0.22, 1.4, 0.36, 1),
		opacity 0.3s ease,
		box-shadow 0.25s ease,
		background 0.25s ease,
		color 0.25s ease,
		border-color 0.25s ease,
		filter 0.25s ease;
}

.home-social-float.is-visible .home-social-float-link{
	opacity: 1;
	transform: scale(1);
}

.home-social-float.is-visible .home-social-float-link:nth-child(1){
	transition-delay: 0.04s;
}

.home-social-float.is-visible .home-social-float-link:nth-child(2){
	transition-delay: 0.12s;
}

.home-social-float.is-visible .home-social-float-link:nth-child(3){
	transition-delay: 0.2s;
}

.home-social-float-link:hover,
.home-social-float-link:focus{
	color: #fff;
	background: linear-gradient(160deg, #ff6a1a 0%, #ff2a00 55%, #a00000 100%);
	border-color: #111;
	box-shadow:
		0 0 0 3px #ffd000,
		0 10px 0 #111,
		0 18px 28px rgba(255, 50, 0, 0.55);
	text-decoration: none;
	outline: none;
	transition-delay: 0s;
	animation: home-social-float-pulse 1.1s ease-in-out infinite;
}

.home-social-float-link--facebook:hover,
.home-social-float-link--facebook:focus,
.home-social-float-link--whatsapp:hover,
.home-social-float-link--whatsapp:focus,
.home-social-float-link--youtube:hover,
.home-social-float-link--youtube:focus{
	background: linear-gradient(160deg, #ff6a1a 0%, #ff2a00 55%, #a00000 100%);
	border-color: #111;
	box-shadow:
		0 0 0 3px #ffd000,
		0 10px 0 #111,
		0 18px 28px rgba(255, 50, 0, 0.55);
}

@keyframes home-social-float-pulse{
	0%, 100%{
		transform: scale(1.06) translateY(-2px);
		filter: brightness(1.05);
		box-shadow:
			0 0 0 3px #ffd000,
			0 10px 0 #111,
			0 16px 24px rgba(255, 50, 0, 0.4);
	}
	50%{
		transform: scale(1.14) translateY(-5px);
		filter: brightness(1.18);
		box-shadow:
			0 0 0 5px #ffe14a,
			0 12px 0 #111,
			0 22px 34px rgba(255, 50, 0, 0.65);
	}
}

.home-social-float-link--whatsapp i{
	font-size: 1.95rem;
}

@media (max-width: 1600px){
	.home-social-float{
		left: 28px;
	}

	.home-social-float-link{
		width: 64px;
		height: 64px;
		font-size: 1.5rem;
	}

	.home-social-float-link--whatsapp i{
		font-size: 1.75rem;
	}
}

@media (max-width: 1599px){
	.home-social-float{
		display: none;
	}
}

main .news-wraper{
	width: 100%;
	min-height: 560px;
	border-width: 7px 5px 5px 5px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 1.0);
	background: #ffb400;
	display: flex;
}

main .news-wraper .content-new{
	flex:3;
	background: var(--black);
}

main .news-wraper .header-title{
	min-height: 70px;
	width: 100%;
	font-family: 'anime-800';
	color: var(--black);
	background: linear-gradient(280deg, rgb(255 141 0) 0%, rgb(251, 186, 2) 100%);
/*	background: var(--white);*/
	clip-path: polygon(0 0, 100% 0%, 100% 89%, 0% 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block:10px;
	padding-inline:25px;
	border-right:3px solid var(--black);
	border-top:2px solid yellow;
}

main .news-wraper .header-title h3{
	font-size: 2.4rem;
	margin: 0;
	font-style: italic;
	line-height: 1;
}

main .news-wraper .header-title .home-header-aside,
main .ranking-wraper .header-title .home-header-aside,
main .characters-wraper .header-title .home-header-aside{
	font-family: 'anime-700';
	font-size: 1rem;
	color: var(--black);
	text-transform: uppercase;
	white-space: nowrap;
}

main .news-wraper .section-news{
	display: flex;
	margin-top: 13px;
	padding-bottom: 10px;
}

main .news-wraper .section-news .main-new{
	flex:0.9;
}

main .news-wraper .section-news .list-news{
	flex:1;
}



main .news-wraper .section-news .main-new{
	padding: 10px 10px 0 10px;
}


main .news-wraper .section-news .main-new .contain-img{
	width: 100%;
	min-height: 400px;
	overflow: hidden;
	/*border: 2px solid #d99321;*/

}

main .news-wraper .section-news .main-new .contain-img img{
    object-fit: cover;
    
}

main .news-wraper .section-news .main-new .viewmore-wraper{
	width: 100%;
	display: flex;
	justify-content: end;
}

main .news-wraper .section-news .main-new .viewmore-content{
    /* --- TUS PROPIEDADES ORIGINALES --- */
    width: 100%;
    max-width: 160px;
    transform: skewX(-15deg);
    border: 1px solid #ff0000;
    min-height: 40px;
    background: linear-gradient(240deg, rgb(161 7 0), transparent) rgb(209 68 0);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 500ms ease-in;

    /* --- PROPIEDADES NUEVAS REQUERIDAS --- */
    position: relative;  /* Necesario para posicionar el reflejo adentro */
    overflow: hidden;   /* Necesario para ocultar el reflejo cuando está 'fuera' */
}

main .news-wraper .section-news .main-new .viewmore-content::before {
    content: '';
    position: absolute;
    top: 0;
    /* Empezamos totalmente a la izquierda, oculto */
    left: -50%; 
    width: 80px; /* Ancho de la franja de brillo */
    height: 100%;
    
    /* El degradado blanco brillante y transparente */
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.7) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    
    /* Contrarrestamos el skew del padre para un brillo elegante */
    transform: skewX(15deg); 
    
    /* Definimos la velocidad de la animación */
    transition: left 600ms ease-in-out;
}
main .news-wraper .section-news .main-new .viewmore-content:hover{
  /* Tu hover original de color */
  background-color: rgb(241 79 0);
}

/* --- NUEVO: Activación de la animación del brillo --- */
main .news-wraper .section-news .main-new .viewmore-content:hover::before {
    /* Movemos el brillo hasta el final derecho */
    left: 150%; 
}

main .news-wraper .section-news .main-new .viewmore-content a{
	width: 100%;
	height: 100%;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'anime-700';
	transform: skewX(8deg);
	text-transform: uppercase;
	font-size:20px;
	text-decoration: none;
	text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
}

main .news-wraper .section-news .list-news{
	margin-top: 10px;
}

main .news-wraper .section-news .list-news .content-boxlist{
	display: flex;
	border-bottom: 1px solid var(--gray-50);

}

main .news-wraper .section-news .list-news .content-boxlist:nth-child(1){


}

main .news-wraper .section-news .list-news .content-boxlist:nth-child(2){

	margin-top: 8px;

}

main .news-wraper .section-news .list-news .content-boxlist:nth-child(3){
	margin-top: 8px;

}

main .news-wraper .section-news .list-news .content-boxlist .box-prevImage{
	max-width: 130px;
	min-width: 130px;
	height: 130px;
	overflow: hidden;
	
	
}
main .news-wraper .section-news .list-news .content-boxlist .box-prevImage img{
	object-fit: contain;	
	width: 100%;
	height: 100%;
	
	
}


main .news-wraper .section-news .list-news .content-boxlist .box-listNotice{
	color: white;
	padding-inline: 15px;
	padding-block: 10px;
}

main .news-wraper .section-news .list-news .content-boxlist .box-listNotice .label-notice{
	width: 100px;
	height: 25px;
	padding: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;

	span{
		font-weight: 600;
		font-size: 14px;
	}
}


main .news-wraper .section-news .list-news .content-boxlist .box-listNotice .label-notice.event{
	background: #ff4700;
}

main .news-wraper .section-news .list-news .content-boxlist .box-listNotice .label-notice.update{
	background: var(--blue-700);
}
main .news-wraper .section-news .list-news .content-boxlist .box-listNotice .label-notice.advert{
	background: var(--green-700);
}

main .news-wraper .section-news .list-news .content-boxlist .box-listNotice .label-notice.new{
	background: var(--yellow-800);
	color: var(--black);
}


main .news-wraper .section-news .list-news .content-boxlist .box-listNotice h3{
	font-family: 'anime-700';
	margin: 8px 0 0 0;
	font-size: 24px;
} 

main .news-wraper .section-news .list-news .content-boxlist .box-listNotice h3 a {
	text-decoration: none;
	color: var(--white);
}

main .news-wraper .section-news .list-news .content-boxlist .box-listNotice p{
	font-family: 'anime-600';
	padding: 0;
	margin: 0;
/*	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width:300px;*/
	color: #9f9f9f;

} 

main .news-wraper .section-news .list-news .content-boxlist .box-listNotice h5{
	font-family: 'anime-900';
	padding: 0;
	margin: 0;
	text-transform: uppercase;
	color: var(--yellow-800);
} 

main .news-wraper .promo-new{
	flex:1.2;
	overflow: hidden;
	position: relative;
}

main .news-wraper .promo-new img{
	object-fit: contain;
	position: relative;
	z-index: 0;


}

main .news-wraper .promo-new .btn-register {
	position: absolute;
	bottom: 80px;
	left: 50%;
	width: 180px;
	height: 50px;
	background: #ffa600;
	/*background: linear-gradient(240deg, rgb(161 7 0), transparent) rgb(209 68 0);*/
	background: linear-gradient(268deg, rgb(255, 166, 0), transparent), rgb(255, 208, 0);
	/* El truco aquí: Primero movemos al centro, luego aplicamos el skew */
	transform: translateX(-50%) skewX(-8deg); 
	outline:4px solid var(--black);
	border-top: 2px solid yellow;
	transition: 500ms ease all;

}

main .news-wraper .promo-new .btn-register:hover {
	background-color:rgb(255 242 0);
	box-shadow: 1px 1px 18px 15px #ff2f00;
	transform: translateX(-50%) skewX(-8deg) translateY(-4px);
}

main .news-wraper .promo-new .btn-register a {
	display: flex; /* Movido arriba para asegurar que el elemento sea bloque/flex antes de transformar */
	justify-content: center;
	align-items: center;
	height: 100%;
	color: var(--black);
	font-family: 'anime-800';
	text-transform: uppercase;
	font-size: 20px;
	text-decoration: none;
	transform: skewX(8deg); 
}


/*==========================================================================
	News Detail Page (/new/{id})
/*==========================================================================*/

main  .news-detail-page{
	background:  rgba(255, 198, 1, 1);
}

main .news-detail-page .news-detail-wraper{
	width: 100%;
	min-height: 560px;
	border-width: 7px 5px 5px 5px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 1.0);
	background: #ffb400;
	display: flex;
	gap: 0;
	align-items: stretch;
}

main .news-detail-page .news-detail-main{
	flex: 1;
	min-width: 0;
}

main .news-detail-page .news-detail-sidebar{
	flex: 0 0 360px;
	max-width: 360px;
	border-left: 5px solid var(--black);
}

main .news-detail-page .news-detail-main .content-new{
	background: #1a1111;
	height: 100%;
}

main .news-detail-page .news-detail-sidebar .content-new{
	background: #231410;
	height: 100%;
}

main .news-detail-page .news-detail-sidebar .header-title{
	min-height: 70px;
	width: 100%;
	font-family: 'anime-700';
	color: var(--black);
	background: linear-gradient(280deg, rgb(255 122 0) 0%, rgb(255 172 0) 100%);
	clip-path: polygon(0 0, 100% 0%, 100% 89%, 0% 100%);
	display: flex;
	align-items: center;
	padding-block: 10px;
	padding-inline: 25px;
	border-top: 2px solid yellow;
	border-bottom: 10px solid var(--black);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.65);

	h3{
		font-size: 1.8rem;
		margin: 0;
	}
}

main .news-detail-page .news-detail-main .news-detail-header{
	padding: 12px 28px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	background: #0c0a0a;
}

main .news-detail-page .news-detail-main .news-detail-header-top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

main .news-detail-page .label-notice{
	width: 100px;
	height: 25px;
	padding: 8px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	transform: none;
	border-radius: 0;

	span{
		display: inline-block;
		font-weight: 600;
		font-size: 14px;
		color: var(--white);
		transform: none;
	}
}

main .news-detail-page .label-notice.event{
	background: var(--red-700);
}

main .news-detail-page .label-notice.update{
	background: var(--blue-700);
}

main .news-detail-page .label-notice.advert{
	background: var(--green-700);
}

main .news-detail-page .label-notice.new{
	background: #ff5400;
}

main .news-detail-page .news-detail-main .news-detail-title{
	font-family: 'anime-920', sans-serif;
	color: var(--white);
	font-size: clamp(1.8rem, 3vw, 2.8rem);
	margin: 10px 0 0;
	line-height: 1.1;
	text-transform: uppercase;
}

main .news-detail-page .news-detail-main .news-detail-date{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-left: auto;
	color: var(--yellow-800);
	font-family: 'anime-920', sans-serif;
	font-size: 1.2rem;
	text-transform: uppercase;
}

main .news-detail-page .news-detail-main .news-detail-body{
	padding: 22px 28px 30px;
	color: var(--white);
	background: #120c0c;
}

main .news-detail-page .news-detail-main .news-detail-hero{
	width: 100%;
	margin-bottom: 20px;
	border: 2px solid #d99321;
	overflow: hidden;

	img{
		width: 100%;
		display: block;
		object-fit: cover;
	}
}

main .news-detail-page .news-detail-main .news-detail-intro{
	font-family: 'anime-600', sans-serif;
	font-size: 1.05rem;
	color: #d7d7d7;
	margin-bottom: 18px;
	line-height: 1.5;
}

main .news-detail-page .news-detail-main .news-detail-empty{
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'quicksand-medium', sans-serif;
	font-weight: 500;
	font-size: 1rem;
	color: #a8a8a8;
	margin: 0;
	line-height: 1.6;

	i{
		font-size: 1.15rem;
		color: #c9a227;
		flex-shrink: 0;
	}
}

main .news-detail-page .news-sidebar-scroll{
	max-height: 720px;
	overflow-y: auto;
	padding: 8px 0 12px;
	scrollbar-width: thin;
	scrollbar-color: #ffb400 #2a0804;
}

main .news-detail-page .news-sidebar-scroll::-webkit-scrollbar{
	width: 8px;
}

main .news-detail-page .news-sidebar-scroll::-webkit-scrollbar-thumb{
	background: #ffb400;
	border-radius: 8px;
}

main .news-detail-page .news-sidebar-scroll::-webkit-scrollbar-track{
	background: #2a0804;
}

main .news-detail-page .news-sidebar-item{
	display: flex;
	gap: 14px;
	padding: 14px 16px;
	text-decoration: none;
	border-bottom: 2px solid #140a09;
	/*box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.35);*/
	transition: background 0.2s ease;
	color: inherit;
}

main .news-detail-page .news-sidebar-item:hover,
main .news-detail-page .news-sidebar-item.is-active{
	background: rgb(45 31 23);
}

main .news-detail-page .news-sidebar-thumb{
	width: 88px;
	min-width: 88px;
	height: 88px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.45);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);

	img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

main .news-detail-page .news-sidebar-info{
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;

	.label-notice{
		width: auto;
		min-width: 88px;
		height: 22px;
		padding: 0 8px;
		margin-bottom: 0;
	}

	h4{
		margin: 6px 0 0;
		font-family: 'quicksand-medium', sans-serif;
		font-size: 0.9rem;
		color: var(--white);
		line-height: 1.25;
	}
}

main .news-detail-page .news-sidebar-top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

main .news-detail-page .news-sidebar-date{
	flex-shrink: 0;
	margin-left: auto;
	font-size: 0.75rem;
	color: var(--yellow-800);
	font-family: 'anime-600', sans-serif;
}

main .news-detail-page .news-sidebar-empty{
	color: #999;
	padding: 16px;
	margin: 0;
}

@media (max-width: 991px){
	main .news-detail-page .news-detail-wraper{
		flex-direction: column;
	}

	main .news-detail-page .news-detail-sidebar{
		flex: 1;
		max-width: 100%;
		width: 100%;
		border-left: none;
		border-top: 5px solid var(--black);
	}

	main .news-detail-page .news-sidebar-scroll{
		max-height: 420px;
	}
}

/* Userpanel dashboard */
main .userpanel-page{
	background: rgba(255, 198, 1, 1);
}

main .userpanel-page .userpanel-wraper{
	width: 100%;
	min-height: 900px;
	border-width: 7px 5px 5px 5px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 1);
	background: #ffb400;
	display: flex;
	gap: 0;
	align-items: stretch;
}

main .userpanel-page .userpanel-sidebar{
	flex: 0 0 378px;
	max-width: 400px;
	border-right: 5px solid var(--black);
}

main .userpanel-page .userpanel-main{
	flex: 1;
	min-width: 0;
}

main .userpanel-page .userpanel-sidebar-panel,
main .userpanel-page .userpanel-main-panel{
	background: #0c0a0a;
	height: 100%;
}

main .userpanel-page .userpanel-sidebar-panel{
	padding: 22px 18px 24px;
}

main .userpanel-page .userpanel-profile{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 180, 0, 0.22);
}

main .userpanel-page .userpanel-profile-name{
	margin: 0;
	font-family: 'anime-950', sans-serif;
	font-size: 2rem;
	line-height: 1;
	color: #fff;
}

main .userpanel-page .userpanel-profile-level{
	margin: 0;
	font-family: 'anime-950', sans-serif;
	font-size: 1.65rem;
	line-height: 1;
	color: #ffb400;
	text-transform: uppercase;
	white-space: nowrap;
}

main .userpanel-page .userpanel-stats{
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	font-family: 'anime-940', sans-serif;
}

main .userpanel-page .userpanel-stats li{
	display: grid;
	grid-template-columns: 28px 112px minmax(0, 1fr);
	column-gap: 10px 28px;
	align-items: center;
	padding-block: 11px;
	border-bottom: 1px solid rgba(255, 180, 0, 0.18);
}

main .userpanel-page .userpanel-stats li:last-child{
	border-bottom: none;
}

main .userpanel-page .userpanel-stats-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	color: #ffb400;
	font-size: 1rem;
}

main .userpanel-page .userpanel-stats-label{
	font-family: 'anime-940', sans-serif;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.88);
		letter-spacing: 0.02em;
	white-space: nowrap;
}

main .userpanel-page .userpanel-stats-value{
	font-family: 'anime-940', sans-serif;
	font-size: 0.92rem;
	line-height: 1.35;
	color: #ffb400;
	text-align: left;
	word-break: break-word;
}

main .userpanel-page .userpanel-password-box{
	margin-bottom: 18px;
	padding: 16px 14px;
	border:1px solid rgb(87 49 15);
	background: rgba(255, 122, 0, 0.08);
}

main .userpanel-page .userpanel-password-head{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
}

main .userpanel-page .userpanel-password-icon{
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffb400;
	font-size: 1.35rem;
}

main .userpanel-page .userpanel-password-head h3{
	margin: 0 0 4px;
	font-family: 'anime-950', sans-serif;
	font-size: 1.05rem;
	color: #ffb400;
}

main .userpanel-page .userpanel-password-head p{
	margin: 0;
	font-family: 'anime-600', sans-serif;
	font-size: 0.82rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.78);
}

main .userpanel-page .userpanel-password-btn{
	display: block;
	width: 100%;
	padding: 12px 14px;
	border: 2px solid #000;
	background: linear-gradient(180deg, #ffd000 0%, #ffb400 100%);
	color: #000;
	font-family: 'anime-950', sans-serif;
	font-size: 1rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
	transition: transform 0.2s ease, filter 0.2s ease;
}

main .userpanel-page .userpanel-password-btn:hover{
	filter: brightness(1.05);
	transform: translateY(-1px);
	color: #000;
	text-decoration: none;
}

main .userpanel-page .userpanel-password-page{
	padding: 0 28px 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

main .userpanel-page .userpanel-password-intro{
	display: flex;
	align-items: center;
	gap: 18px;
	width: 70%;
	max-width: 70%;
	margin: 0 0 22px;
	padding: 16px 18px;
	border: 1px solid rgb(87 49 15);
	background: rgba(255, 122, 0, 0.08);
}

main .userpanel-page .userpanel-password-intro-icon{
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgb(87 49 15);
	border-radius: 50%;
	background: rgba(255, 180, 0, 0.08);
	color: #ffb400;
	font-size: 1.65rem;
}

main .userpanel-page .userpanel-password-intro p{
	margin: 0;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
}

main .userpanel-page .userpanel-password-intro strong{
	color: #ffb400;
	font-family: 'quicksand-bold', sans-serif;
}

main .userpanel-page .userpanel-password-form{
	width: 70%;
	max-width: 70%;
	padding: 22px 22px 24px;
	border: 1px solid rgb(87 49 15);
	background: rgba(0, 0, 0, 0.28);
}

main .userpanel-page .userpanel-password-form-grid{
	display: grid;
	gap: 18px;
	margin-bottom: 14px;
}

main .userpanel-page .userpanel-password-help{
	margin: 0 0 18px;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.84rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.62);
}

main .userpanel-page .userpanel-password-submit{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 240px;
	padding: 14px 22px;
	border: 2px solid #000;
	background: linear-gradient(180deg, #ffd000 0%, #ffb400 100%);
	color: #000;
	font-family: 'anime-950', sans-serif;
	font-size: 1rem;
	text-transform: uppercase;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
	transition: transform 0.2s ease, filter 0.2s ease;
}

main .userpanel-page .userpanel-password-submit:hover{
	filter: brightness(1.05);
	transform: translateY(-1px);
}

main .userpanel-page .userpanel-support-box{
	margin-bottom: 18px;
	padding: 16px 14px;
	border: 1px solid rgb(15 60 87);
	background: rgba(0, 160, 255, 0.08);
}

main .userpanel-page .userpanel-support-head{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
}

main .userpanel-page .userpanel-support-icon{
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #5ecbff;
	font-size: 1.35rem;
}

main .userpanel-page .userpanel-support-head h3{
	margin: 0 0 4px;
	font-family: 'anime-950', sans-serif;
	font-size: 1.05rem;
	color: #5ecbff;
}

main .userpanel-page .userpanel-support-head p{
	margin: 0;
	font-family: 'anime-600', sans-serif;
	font-size: 0.82rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.78);
}

main .userpanel-page .userpanel-support-btn{
	position: relative;
	display: block;
	width: 100%;
	padding: 12px 14px;
	border: 2px solid #000;
	background: linear-gradient(180deg, #7dd3ff 0%, #3daee9 100%);
	color: #000;
	font-family: 'anime-950', sans-serif;
	font-size: 1rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
	transition: transform 0.2s ease, filter 0.2s ease;
}

main .userpanel-page .userpanel-support-btn:hover{
	filter: brightness(1.05);
	transform: translateY(-1px);
	color: #000;
	text-decoration: none;
}

main .userpanel-page .userpanel-support-badge{
	position: absolute;
	top: -8px;
	right: -8px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border: 2px solid #000;
	border-radius: 999px;
	background: #ff3b30;
	color: #fff;
	font-family: 'anime-950', sans-serif;
	font-size: 0.78rem;
	line-height: 18px;
	text-align: center;
}

main .userpanel-page .userpanel-support-page{
	padding: 0 28px 28px;
	--support-border: #4d2802;
}

main .userpanel-page .userpanel-support-intro{
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 22px;
	padding: 16px 18px;
	border: 1px solid var(--support-border);
	background: #1a100a;
}

main .userpanel-page .userpanel-support-intro-icon{
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--support-border);
	border-radius: 50%;
	background: #2a1608;
	color: #ff940f;
	font-size: 1.65rem;
}

main .userpanel-page .userpanel-support-intro p{
	margin: 0;
	font-family: sans-serif;
	font-size: 0.9rem;
	line-height: 1.55;
	color: rgb(179 179 179 / 88%);
}

main .userpanel-page .userpanel-support-empty{
	padding: 36px 24px;
	border: 1px dashed var(--support-border);
	background: #14100c;
	text-align: center;
	color: rgba(255, 255, 255, 0.78);
}

main .userpanel-page .userpanel-support-empty i{
	display: block;
	margin: 0 auto 14px;
	font-size: 2.2rem;
	color: #ff940f;
}

main .userpanel-page .userpanel-support-empty p{
	margin: 0;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.9rem;
	line-height: 1.5;
}

main .userpanel-page .userpanel-support-empty-link{
	display: inline-block;
	margin-top: 16px;
	padding: 10px 18px;
	border: 1px solid var(--support-border);
	background: #ff940f;
	color: #000;
	font-family: 'quicksand-bold', sans-serif;
	font-size: 0.82rem;
	text-decoration: none;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-support-empty-link:hover{
	color: #000;
	text-decoration: none;
	background: #ffaa33;
}

main .userpanel-page .userpanel-support-accordion{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

main .userpanel-page .userpanel-support-accordion-item{
	border: 1px solid var(--support-border);
	background: #14100c;
	overflow: hidden;
}

main .userpanel-page .userpanel-support-accordion-item.has-unread{
	border-color: var(--support-border);
}

main .userpanel-page .userpanel-support-accordion-toggle{
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 0;
	background: #1c120c;
	color: #fff;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s ease;
}

main .userpanel-page .userpanel-support-accordion-toggle:hover,
main .userpanel-page .userpanel-support-accordion-toggle.is-open{
	background: #26180f;
}

main .userpanel-page .userpanel-support-accordion-toggle:focus,
main .userpanel-page .userpanel-support-accordion-toggle:focus-visible,
main .userpanel-page .userpanel-support-reveal-btn:focus,
main .userpanel-page .userpanel-support-reveal-btn:focus-visible{
	outline: none;
	box-shadow: none;
}

main .userpanel-page .userpanel-support-accordion-chevron{
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--support-border);
	border-radius: 6px;
	background: #0f0a07;
	color: #ff940f;
	font-size: 0.78rem;
	transition: transform 0.22s ease, background 0.2s ease;
}

main .userpanel-page .userpanel-support-accordion-toggle.is-open .userpanel-support-accordion-chevron{
	transform: rotate(90deg);
	background: #2a1608;
}

main .userpanel-page .userpanel-support-accordion-main{
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

main .userpanel-page .userpanel-support-accordion-kicker{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'quicksand-semibold', sans-serif;
	font-size: 0.72rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #ff940f;
}

main .userpanel-page .userpanel-support-accordion-subject{
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.95rem;
	line-height: 1.35;
	color: #fff;
	word-break: break-word;
}

main .userpanel-page .userpanel-support-accordion-side{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	flex-shrink: 0;
}

main .userpanel-page .userpanel-support-status-badge{
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border: 1px solid var(--support-border);
	border-radius: 999px;
	font-family: 'quicksand-bold', sans-serif;
	font-size: 0.68rem;
	line-height: 1.2;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-support-status-badge.is-open{
	background: #2a1608;
	color: #ffb86a;
}

main .userpanel-page .userpanel-support-status-badge.is-closed{
	background: #1a1a1a;
	color: #bbb;
}

main .userpanel-page .userpanel-support-status-badge.is-done{
	background: #0f1a22;
	color: #8fdcff;
}

main .userpanel-page .userpanel-support-accordion-date{
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.72rem;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.55);
}

main .userpanel-page .userpanel-support-unread-dot{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ff4700;
}

main .userpanel-page .userpanel-support-accordion-panel{
	padding: 0 16px 18px;
	border-top: 1px solid var(--support-border);
	background: #0f0b08;
}

main .userpanel-page .userpanel-support-panel-meta{
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 16px;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.82rem;
	line-height: 1.3;
	color: rgba(255, 180, 120, 0.88);
}

main .userpanel-page .userpanel-support-panel-meta i{
	color: #ff940f;
}

main .userpanel-page .userpanel-support-waiting{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px dashed var(--support-border);
	background: #1a100a;
}

main .userpanel-page .userpanel-support-waiting i{
	font-size: 1.2rem;
	color: #ff940f;
}

main .userpanel-page .userpanel-support-waiting p{
	margin: 0;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.9rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.78);
}

main .userpanel-page .userpanel-support-chat{
	display: flex;
	flex-direction: column;
	gap: 0;
}

main .userpanel-page .userpanel-support-chat-item{
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 12px;
	align-items: start;
}

main .userpanel-page .userpanel-support-chat-marker{
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--support-border);
	background: #2a1608;
	color: #ff940f;
	font-size: 0.95rem;
}

main .userpanel-page .userpanel-support-chat-marker.is-staff{
	background: #2a0f08;
	color: #ffb86a;
}

main .userpanel-page .userpanel-support-chat-bubble{
	position: relative;
	padding: 12px 14px;
	border: 1px solid transparent;
	border-radius: 8px;
}

main .userpanel-page .userpanel-support-chat-bubble.is-user{
	border-color: var(--support-border);
	background: #1a100a;
}

main .userpanel-page .userpanel-support-chat-bubble.is-user::before{
	content: '';
	position: absolute;
	left: -8px;
	top: 14px;
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-right: 8px solid var(--support-border);
}

main .userpanel-page .userpanel-support-chat-bubble.is-staff{
	margin-left: 8px;
	border: 1px solid var(--support-border);
	background: #160c0c;
}

main .userpanel-page .userpanel-support-chat-bubble.is-staff::before{
	content: '';
	position: absolute;
	left: -8px;
	top: 14px;
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-right: 8px solid var(--support-border);
}

main .userpanel-page .userpanel-support-chat-bridge{
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 10px 46px;
	padding-left: 4px;
	font-family: 'quicksand-semibold', sans-serif;
	font-size: 0.78rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: rgba(255, 180, 120, 0.82);
}

main .userpanel-page .userpanel-support-chat-bridge i{
	color: #ff940f;
	font-size: 0.95rem;
	transform: rotate(90deg);
}

main .userpanel-page .userpanel-support-chat-head{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.82rem;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.72);
}

main .userpanel-page .userpanel-support-chat-head strong{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'quicksand-semibold', sans-serif;
	font-size: 0.84rem;
	color: #fff;
}

main .userpanel-page .userpanel-support-chat-head strong i{
	color: #ff940f;
	font-size: 0.82rem;
}

main .userpanel-page .userpanel-support-chat-bubble.is-staff .userpanel-support-chat-head strong i{
	color: #ffb86a;
}

main .userpanel-page .userpanel-support-chat-body{
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.9rem;
	line-height: 1.55;
	color: rgb(161 161 161 / 92%);
	word-break: break-word;
}

main .userpanel-page .userpanel-support-chat-images{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

main .userpanel-page .userpanel-support-chat-images img{
	width: 84px;
	height: 84px;
	object-fit: cover;
	border: 1px solid var(--support-border);
	border-radius: 4px;
}

main .userpanel-page .userpanel-support-reveal-btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	padding: 10px 14px;
	border: 1px solid var(--support-border);
	background: #ff940f;
	color: #000;
	font-family: 'quicksand-bold', sans-serif;
	font-size: 0.78rem;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
}

main .userpanel-page .userpanel-support-reveal-btn:hover{
	background: #ffaa33;
}

main .userpanel-page .userpanel-support-reveal-btn:disabled{
	opacity: 0.65;
	cursor: wait;
}

main .userpanel-page .userpanel-support-response-body.is-visible{
	margin-top: 2px;
}

main .userpanel-page .userpanel-vip-banner{
	position: relative;
	overflow: hidden;
	border: 2px solid #000;
	background: #111;
}

main .userpanel-page .userpanel-vip-banner-art{
	display: block;
	width: 100%;
	height: 110px;
	background:
		linear-gradient(135deg, rgba(255, 180, 0, 0.25) 0%, rgba(255, 60, 0, 0.18) 100%),
		url('../img/userpanel/emblem6.webp') center / contain no-repeat,
		#111;
}

main .userpanel-page .userpanel-vip-banner-content{
	padding: 14px 16px 16px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.92) 100%);
}

main .userpanel-page .userpanel-vip-banner-content h3{
	margin: 0 0 8px;
	font-family: 'anime-950', sans-serif;
	font-size: 1.55rem;
	line-height: 1.1;
	color: #fff;
}

main .userpanel-page .userpanel-vip-status{
	margin: 0 0 6px;
	font-family: 'anime-920', sans-serif;
	font-size: 1.15rem;
	line-height: 1.2;
	color: #ff5a5a;
}

main .userpanel-page .userpanel-vip-status.is-active{
	color: #39ff7a;
}

main .userpanel-page .userpanel-vip-expire{
	margin: 0;
	font-family: 'anime-920', sans-serif;
	font-size: 1.05rem;
	line-height: 1.2;
	color: #ffb400;
}

main .userpanel-page .userpanel-main-panel{
	padding: 0;
	/*background:#21140d;*/
}

main .userpanel-page .userpanel-main-panel .header-title{
	min-height: 70px;
	width: 100%;
	font-family: 'anime-950', sans-serif;
	color: var(--white);
	background: linear-gradient(180deg, #ff4700 0%, #8f0000 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-block: 10px;
	padding-inline: 25px;
	margin-bottom: 30px;
	border-top:2px solid #ff940f;
	border-bottom: 4px solid #100804;
}

main .userpanel-page .userpanel-main-panel .header-title h3{
	font-size: 2.4rem;
	margin: 0;
	flex: 1;
	min-width: 0;
}

main .userpanel-page .userpanel-header-back-link{
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	font-family: 'anime-920', sans-serif;
	font-size: 0.82rem;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

main .userpanel-page[data-active-module="dashboard"] .userpanel-header-back-link{
	display: none;
}

main .userpanel-page .userpanel-header-back-link:hover,
main .userpanel-page .userpanel-header-back-link:focus{
	color: #ffd000;
	text-decoration: none;
	outline: none;
	box-shadow: none;
}

main .userpanel-page .userpanel-modules-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 13px;
	padding: 0 40px 22px;
}

main .userpanel-page .userpanel-module-card{
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr) auto;
	align-items: stretch;
	min-height: 0;
	width: 100%;
	border:1px solid #832400;
	background: #180f06;
	overflow: hidden;
	padding: 0 16px 0 0;
	gap: 0 14px;
	transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

main .userpanel-page .userpanel-module-card:hover{
	border-color: #ff6a00;
	background: #221408;
	box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.25), 0 10px 28px rgba(0, 0, 0, 0.45);
	transform: translateY(-2px);
}

main .userpanel-page .userpanel-module-card:hover .userpanel-module-media{
	background: linear-gradient(180deg, #3a2410 0%, #2c1a0c 100%);
}

main .userpanel-page .userpanel-module-card:hover .userpanel-module-title{
	color: #ffd000;
}

main .userpanel-page .userpanel-module-card:hover .userpanel-module-btn{
	filter: brightness(1.1);
}

main .userpanel-page .userpanel-module-media{
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	min-height: 128px;
	height: 100%;
	padding: 10px 12px;
	background: linear-gradient(180deg, #2a1a0c 0%, #22150a 100%);
	border-right: 1px solid rgba(131, 36, 0, 0.55);
}

main .userpanel-page .userpanel-module-media img{
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 118px;
	object-fit: contain;
}

main .userpanel-page .userpanel-module-body{
	flex: 1;
	padding: 8px 8px 8px 18px;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-width: 0;
}

main .userpanel-page .userpanel-module-title{
	margin: 0;
	font-family: 'quicksand-semibold', sans-serif;
	font-size: 1.1rem;
	line-height: 1.2;
	color: #ffb400;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-module-body p{
	margin: 0;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.82rem;
	line-height: 1.4;
	color: rgb(215 215 215 / 90%);
}

main .userpanel-page .userpanel-module-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: auto;
	min-width: 0;
	height: auto;
	margin-top: 0;
	padding: 9px 18px;
	border: 1px solid #000;
	border-left: 1px solid #000;
	border-top: 1px solid #000;
	border-radius: 8px;
	background: linear-gradient(180deg, #ff4700 0%, #8f0000 100%);
	color: #fff;
	font-family: 'quicksand-semibold', sans-serif;
	font-size: 0.88rem;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
}

main .userpanel-page .userpanel-module-btn.mf-btn-loader-target{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

main .userpanel-page .userpanel-module-btn:hover{
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: #fff;
	text-decoration: none;
}

main .userpanel-page .userpanel-vip-page{
	padding: 0 40px 28px;
}

main .userpanel-page .userpanel-vip-intro{
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 22px;
	padding: 16px 18px;
	border: 1px solid #832400;
	background: rgba(255, 122, 0, 0.08);
}

main .userpanel-page .userpanel-vip-intro-icon{
	width: 72px;
	height: 72px;
	object-fit: contain;
	flex: 0 0 72px;
}

main .userpanel-page .userpanel-vip-intro p{
	margin: 0;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
}

main .userpanel-page .userpanel-vip-compare{
	margin-bottom: 26px;
	border: 1px solid #832400;
	background: #120e0d;
	overflow: hidden;
}

main .userpanel-page .userpanel-vip-compare-head,
main .userpanel-page .userpanel-vip-compare-row{
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) 120px 120px;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
}

main .userpanel-page .userpanel-vip-compare-head{
	background: linear-gradient(180deg, #ff4700 0%, #8f0000 100%);
	border-bottom: 2px solid #100804;
}

main .userpanel-page .userpanel-vip-compare,
main .userpanel-page .userpanel-vip-compare span,
main .userpanel-page .userpanel-vip-compare .userpanel-vip-compare-label,
main .userpanel-page .userpanel-vip-compare .userpanel-vip-compare-col,
main .userpanel-page .userpanel-vip-compare .userpanel-vip-compare-col span,
main .userpanel-page .userpanel-vip-compare-row .userpanel-vip-compare-col.is-vip{
	font-family: 'quicksand-medium', sans-serif;
}

main .userpanel-page .userpanel-vip-compare-head span{
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.95rem;
	color: #fff;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-vip-compare-row{
	border-bottom: 1px solid rgba(255, 180, 0, 0.16);
}

main .userpanel-page .userpanel-vip-compare-row:last-child{
	border-bottom: none;
}

main .userpanel-page .userpanel-vip-compare-label{
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.82rem;
	color: #ffb400;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-vip-compare-col{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
}

main .userpanel-page .userpanel-vip-compare-row .userpanel-vip-compare-col.is-vip{
	color: rgba(255, 255, 255, 0.75);
	font-family: 'quicksand-medium', sans-serif;
}

main .userpanel-page .userpanel-vip-compare-col .fa-check{
	color: #39ff7a;
}

main .userpanel-page .userpanel-vip-compare-col .fa-xmark{
	color: #ff5a5a;
}

main .userpanel-page .userpanel-vip-plans{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	max-width: 940px;
	margin: 0 auto;
}

main .userpanel-page .userpanel-vip-plan-card{
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0;
	border: 1px solid rgba(255, 180, 0, 0.22);
	border-radius: 16px;
	background:
		radial-gradient(circle at 50% 0%, rgba(255, 140, 0, 0.14) 0%, transparent 55%),
		linear-gradient(180deg, #15100c 0%, #0a0806 100%);
	overflow: hidden;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
	transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

main .userpanel-page .userpanel-vip-plan-card:hover{
	transform: translateY(-4px);
	border-color: rgba(255, 180, 0, 0.4);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
}

main .userpanel-page .userpanel-vip-plan-card.is-featured{
	border-color: rgba(255, 212, 80, 0.58);
	box-shadow:
		0 0 0 1px rgba(255, 212, 80, 0.22),
		0 16px 42px rgba(255, 140, 0, 0.14);
}

main .userpanel-page .userpanel-vip-plan-badge{
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	padding: 6px 12px;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffe066 0%, #ffb400 100%);
	border: 1px solid rgba(0, 0, 0, 0.65);
	font-family: 'quicksand-bold', sans-serif;
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	color: #1a1208;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-vip-plan-head{
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 22px 18px;
	border-bottom: 1px solid rgba(255, 180, 0, 0.12);
}

main .userpanel-page .userpanel-vip-plan-media{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 92px;
	width: 92px;
	height: 92px;
	border-radius: 18px;
	border: 1px solid rgba(255, 180, 0, 0.24);
	background:
		radial-gradient(circle at 50% 35%, rgba(255, 160, 0, 0.22) 0%, transparent 68%),
		rgba(0, 0, 0, 0.35);
}

main .userpanel-page .userpanel-vip-plan-media img{
	display: block;
	width: 64px;
	height: 64px;
	object-fit: contain;
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}

main .userpanel-page .userpanel-vip-plan-head-copy{
	flex: 1;
	min-width: 0;
	text-align: left;
}

main .userpanel-page .userpanel-vip-plan-tag{
	display: inline-block;
	margin-bottom: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 180, 0, 0.24);
	background: rgba(255, 122, 0, 0.1);
	font-family: 'quicksand-semibold', sans-serif;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	color: #ffb400;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-vip-plan-title{
	margin: 0 0 4px;
	font-family: 'quicksand-bold', sans-serif;
	font-size: clamp(1.25rem, 2vw, 1.45rem);
	line-height: 1.15;
	color: #fff;
	text-transform: none;
}

main .userpanel-page .userpanel-vip-plan-duration{
	margin: 0;
	font-family: 'quicksand-light', sans-serif;
	font-size: 0.92rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.72);
}

main .userpanel-page .userpanel-vip-plan-body{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 22px 20px;
}

main .userpanel-page .userpanel-vip-plan-price-box{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid rgba(131, 36, 0, 0.75);
	background: rgba(0, 0, 0, 0.28);
}

main .userpanel-page .userpanel-vip-plan-price-label{
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.82rem;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
}

main .userpanel-page .userpanel-vip-plan-price-row{
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
}

main .userpanel-page .userpanel-vip-plan-price-amount{
	font-family: 'quicksand-bold', sans-serif;
	font-size: clamp(1.65rem, 2.4vw, 1.95rem);
	line-height: 1;
	color: #fff;
}

main .userpanel-page .userpanel-vip-plan-price-currency{
	font-family: 'quicksand-semibold', sans-serif;
	font-size: 0.92rem;
	letter-spacing: 0.08em;
	color: #ffb400;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-vip-plan-desc{
	margin: 0;
	font-family: 'quicksand-light', sans-serif;
	font-size: 0.92rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
	text-align: left;
}

main .userpanel-page .userpanel-vip-plan-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: calc(100% - 32px);
	margin: 0 16px 16px;
	padding: 13px 18px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(180deg, #e04a00 0%, #a82800 52%, #7a1200 100%);
	color: #fff;
	font-family: 'quicksand-semibold', sans-serif;
	font-size: 0.98rem;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: none;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(122, 18, 0, 0.35);
	transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

main .userpanel-page .userpanel-vip-plan-btn:hover{
	filter: brightness(1.06);
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(122, 18, 0, 0.42);
}

main .userpanel-page .userpanel-vip-plan-card.is-featured .userpanel-vip-plan-btn{
	background: linear-gradient(180deg, #ffb400 0%, #e06a00 48%, #9a2200 100%);
	box-shadow: 0 8px 20px rgba(255, 140, 0, 0.28);
}

main .userpanel-page .userpanel-vip-plan-btn:focus,
main .userpanel-page .userpanel-vip-plan-btn:focus-visible,
main .userpanel-page .userpanel-vip-plan-btn:active{
	outline: none;
	box-shadow: none;
}

main .userpanel-page .userpanel-vip-plan-btn.mf-btn-loader-target{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

main .userpanel-page .userpanel-vip-plan-btn:disabled:not(.is-loading){
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
	filter: none;
}

main .userpanel-page .userpanel-webshop-page{
	padding: 0 24px 28px;
}

main .userpanel-page .userpanel-webshop-tabs{
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 2px solid rgba(255, 180, 0, 0.22);
}

main .userpanel-page .userpanel-webshop-tab{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 42px;
	padding: 8px 6px;
	border: 2px solid #000;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.82);
	font-family: 'anime-950', sans-serif;
	font-size: clamp(0.68rem, 0.72vw, 0.88rem);
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

main .userpanel-page .userpanel-webshop-tab:hover{
	color: #ffb400;
	transform: translateY(-1px);
	text-decoration: none;
}

main .userpanel-page .userpanel-webshop-tab.is-active{
	background: linear-gradient(180deg, #ff4700 0%, #8f0000 100%);
	border-top: none;
	border-bottom-color: #100804;
	color: #fff;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
}

main .userpanel-page .userpanel-webshop-toolbar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

main .userpanel-page .userpanel-webshop-section-title{
	margin: 0;
	font-family: 'anime-950', sans-serif;
	font-size: 1.55rem;
	font-style: italic;
	color: #ffb400;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-webshop-sort{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: 'anime-940', sans-serif;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.75);
	text-transform: uppercase;
}

main .userpanel-page .userpanel-webshop-sort-select{
	min-width: 150px;
	padding: 8px 10px;
	border: 2px solid #000;
	background: #111;
	color: #ffb400;
	font-family: 'anime-940', sans-serif;
	font-size: 0.82rem;
}

main .userpanel-page .userpanel-webshop-grid{
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

main .userpanel-page .userpanel-webshop-card{
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 248px;
	min-width: 0;
	padding: 12px 10px 10px;
	border: 3px solid #000;
	background:
		radial-gradient(circle at 50% 0%, rgba(255, 180, 0, 0.08) 0%, transparent 55%),
		linear-gradient(180deg, #1a120c 0%, #0a0806 100%);
	text-align: center;
	overflow: hidden;
	transition: transform 0.2s ease;
}

main .userpanel-page .userpanel-webshop-card::before{
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
			-45deg,
			rgba(255, 180, 0, 0.03) 0 2px,
			transparent 2px 8px
		);
	pointer-events: none;
}

main .userpanel-page .userpanel-webshop-card:hover{
	transform: translateY(-3px);
}

main .userpanel-page .userpanel-webshop-card-top{
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	min-width: 0;
	min-height: 0;
	padding-bottom: 12px;
}

main .userpanel-page .userpanel-webshop-card-frame{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 112px;
	padding: 8px 6px;
	border: 2px solid rgba(255, 180, 0, 0.22);
	background: rgba(0, 0, 0, 0.35);
	box-shadow: none;
	cursor: help;
}

main .userpanel-page .userpanel-webshop-card-frame img{
	display: block;
	width: 78px;
	height: 98px;
	object-fit: contain;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

main .userpanel-page .userpanel-webshop-card-name{
	margin: 0;
	width: 100%;
	max-width: 100%;
	padding: 0 4px 2px;
	font-family: 'anime-920', sans-serif;
	font-size: 0.92rem;
	line-height: 1.15;
	color: #fff;
	text-transform: uppercase;
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.85);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

main .userpanel-page .userpanel-webshop-card-foot{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	margin-top: auto;
	padding-top: 10px;
	border-top: 2px solid rgba(255, 180, 0, 0.22);
}

main .userpanel-page .userpanel-webshop-price{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 6px 10px;
	border: 2px solid rgba(255, 180, 0, 0.35);
	background: rgba(255, 122, 0, 0.12);
	font-family: 'anime-950', sans-serif;
}

main .userpanel-page .userpanel-webshop-price-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: linear-gradient(180deg, #ffd000 0%, #ffb400 100%);
	color: #000;
	font-size: 0.72rem;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.75);
}

main .userpanel-page .userpanel-webshop-price-value{
	font-size: 1.15rem;
	line-height: 1;
	color: #ffb400;
}

main .userpanel-page .userpanel-webshop-price-label{
	font-size: 0.72rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.72);
	letter-spacing: 0.06em;
}

main .userpanel-page .userpanel-webshop-buy{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 36px;
	padding: 7px 8px;
	border: 2px solid #000;
	background: linear-gradient(180deg, #ffd000 0%, #ff7a00 100%);
	color: #000;
	font-family: 'anime-950', sans-serif;
	font-size: 1rem;
	text-transform: uppercase;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
	cursor: pointer;
	transition: transform 0.2s ease, filter 0.2s ease;
}

main .userpanel-page .userpanel-webshop-buy:hover{
	filter: brightness(1.06);
	transform: translateY(-1px);
}

main .userpanel-page .userpanel-webshop-buy:focus,
main .userpanel-page .userpanel-webshop-buy:focus-visible,
main .userpanel-page .userpanel-webshop-buy:active,
main .userpanel-page .userpanel-webshop-tab:focus,
main .userpanel-page .userpanel-webshop-tab:focus-visible,
main .userpanel-page .userpanel-webshop-tab:active,
main .userpanel-page .userpanel-webshop-sort-select:focus,
main .userpanel-page .userpanel-webshop-sort-select:focus-visible{
	outline: none;
	box-shadow: none;
	border-color: #000;
	-webkit-tap-highlight-color: transparent;
}

main .userpanel-page .userpanel-webshop-empty{
	margin: 0;
	padding: 24px 0;
	font-family: 'anime-940', sans-serif;
	color: rgba(255, 255, 255, 0.72);
	text-align: center;
}

main .userpanel-page .userpanel-webshop-card.is-hidden{
	display: none;
}

main .userpanel-page .userpanel-webshop-footer{
	width: 100%;
	margin-top: 8px;
	padding-bottom: 12px;
}

main .userpanel-page .userpanel-webshop-pagination{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 18px 0 0;
	width: 100%;
	background: transparent;
	border: 0;
	font-size: inherit;
	z-index: auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

main .userpanel-page .userpanel-webshop-pagination::-webkit-scrollbar{
	display: none;
}

main .userpanel-page .userpanel-webshop-pagination button{
	width: auto;
	max-width: none;
	flex: 0 0 auto;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 2px solid #ffb400;
	background: transparent;
	color: #ffb400;
	font-family: 'anime-900', sans-serif;
	font-size: 16px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, box-shadow 0.2s;
	box-shadow:
		0 3px 6px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 200, 0, 0.08);
}

main .userpanel-page .userpanel-webshop-pagination button:hover,
main .userpanel-page .userpanel-webshop-pagination button.is-active{
	background: #ffb400;
	color: #111;
	box-shadow:
		0 5px 12px rgba(0, 0, 0, 0.45),
		0 0 10px rgba(255, 180, 0, 0.25);
}

main .userpanel-page .userpanel-webshop-pagination button:focus,
main .userpanel-page .userpanel-webshop-pagination button:focus-visible,
main .userpanel-page .userpanel-webshop-pagination button:active{
	outline: none;
	box-shadow: none;
}

main .userpanel-page .userpanel-webshop-pagination button:disabled{
	opacity: 0.45;
	cursor: default;
}

main .userpanel-page .userpanel-webshop-pagination .pagination-ellipsis{
	color: #ffb400;
	font-family: 'anime-900', sans-serif;
	font-size: 18px;
	line-height: 38px;
	padding: 0 4px;
}

.popover.userpanel-webshop-popover{
	max-width: 260px;
	border: 2px solid #000;
	border-radius: 0;
	background: #111;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.85);
}

.popover.userpanel-webshop-popover .arrow::before{
	border-top-color: #000;
}

.popover.userpanel-webshop-popover .arrow::after{
	border-top-color: #111;
}

.popover.userpanel-webshop-popover.bs-popover-bottom .arrow::before{
	border-bottom-color: #000;
}

.popover.userpanel-webshop-popover.bs-popover-bottom .arrow::after{
	border-bottom-color: #111;
}

.popover.userpanel-webshop-popover .popover-header{
	padding: 8px 12px;
	border-bottom: 2px solid rgba(255, 180, 0, 0.35);
	border-radius: 0;
	background: linear-gradient(180deg, #ffd000 0%, #ffb400 100%);
	color: #000;
	font-family: 'anime-940', sans-serif;
	font-size: 0.82rem;
	text-transform: uppercase;
}

.popover.userpanel-webshop-popover .popover-body{
	padding: 10px 12px;
	background: #111;
	color: rgba(255, 255, 255, 0.88);
	font-family: 'anime-940', sans-serif;
	font-size: 0.78rem;
	line-height: 1.4;
}

main .userpanel-page .userpanel-level-rewards-page{
	padding: 0 28px 28px;
}

main .userpanel-page .userpanel-level-rewards-intro{
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 24px;
	padding: 18px 20px;
	border: 2px solid rgba(255, 180, 0, 0.28);
	background:
		radial-gradient(circle at 0% 50%, rgba(255, 71, 0, 0.12) 0%, transparent 55%),
		linear-gradient(180deg, rgba(26, 18, 12, 0.95) 0%, rgba(10, 8, 6, 0.95) 100%);
}

main .userpanel-page .userpanel-level-rewards-intro-icon{
	width: 72px;
	height: 72px;
	object-fit: contain;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

main .userpanel-page .userpanel-level-rewards-intro p{
	margin: 0;
	font-family: 'quicksand-light', sans-serif;
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
}

main .userpanel-page .userpanel-mygold-page{
	padding: 0 30px 28px;
}

main .userpanel-page .userpanel-mygold-hero{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	margin-bottom: 22px;
	padding: 22px 24px;
	border: 1px solid #b33000;
	background: linear-gradient(0deg, rgba(13, 8, 4, 1) 0%, rgba(43, 27, 20, 1) 100%);
}

main .userpanel-page .userpanel-mygold-hero-art{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

main .userpanel-page .userpanel-mygold-hero-icon{
	display: block;
	width: auto;
	height: auto;
	max-width: none;
	object-fit: none;
}

main .userpanel-page .userpanel-mygold-hero-main{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

main .userpanel-page .userpanel-mygold-hero-badge{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	padding: 5px 10px;
	border: 1px solid rgba(255, 180, 0, 0.35);
	background: rgba(255, 122, 0, 0.12);
	font-family: 'anime-950', sans-serif;
	font-size: 0.8rem;
	color: #ffb400;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-mygold-hero-heading{
	display: block;
	width: 100%;
	max-width: 100%;
	margin-bottom: 2px;
}

main .userpanel-page .userpanel-mygold-hero-title{
	margin: 0;
	font-family: 'anime-950', sans-serif;
	font-size: clamp(1.85rem, 3vw, 2.55rem);
	line-height: 1.05;
	color: #fff;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-mygold-hero-title span{
	display: inline-block;
	background: linear-gradient(180deg, #ffe45e 0%, #ffb400 48%, #ff7a00 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

main .userpanel-page .userpanel-mygold-hero-divider{
	position: relative;
	width: 72%;
	height: 2px;
	margin: 12px auto 0;
	background: linear-gradient(
		90deg,
		rgba(255, 180, 0, 0) 0%,
		rgba(255, 180, 0, 0.18) 12%,
		rgba(255, 180, 0, 0.85) 50%,
		rgba(255, 180, 0, 0.18) 88%,
		rgba(255, 180, 0, 0) 100%
	);
}

main .userpanel-page .userpanel-mygold-hero-desc{
	margin: 14px 0 0;
	font-family: 'quicksand-light', sans-serif;
	font-size: 0.92rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
}

main .userpanel-page .userpanel-mygold-hero-desc strong{
	color: #ffb400;
	font-family: 'quicksand-semibold', sans-serif;
}

main .userpanel-page .userpanel-mygold-inventory{
	margin-bottom: 18px;
}

main .userpanel-page .userpanel-mygold-inventory-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 22px;
	padding: 18px 20px;
	border: 1px solid rgba(255, 180, 0, 0.22);
	background: rgba(0, 0, 0, 0.24);
}

main .userpanel-page .userpanel-mygold-inventory-title{
	margin: 0 0 6px;
	font-family: 'quicksand-bold', sans-serif;
	font-size: 1rem;
	color: #fff;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-mygold-inventory-title span{
	color: #ffb400;
}

main .userpanel-page .userpanel-mygold-inventory-desc{
	margin: 0;
	max-width: 620px;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.76);
}

main .userpanel-page .userpanel-mygold-consult-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex: 0 0 auto;
	min-width: 240px;
	padding: 13px 18px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(180deg, #ffb400 0%, #e06a00 48%, #9a2200 100%);
	color: #fff;
	font-family: 'quicksand-bold', sans-serif;
	font-size: 0.95rem;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	box-shadow: none;
	transition: transform 0.2s ease, filter 0.2s ease;
}

main .userpanel-page .userpanel-mygold-consult-btn .mf-btn-text,
main .userpanel-page .userpanel-mygold-consult-btn .mf-btn-suffix{
	text-shadow: inherit;
}

main .userpanel-page .userpanel-mygold-consult-btn:hover{
	filter: brightness(1.08);
	transform: translateY(-1px);
}

main .userpanel-page .userpanel-mygold-consult-btn:focus,
main .userpanel-page .userpanel-mygold-consult-btn:focus-visible,
main .userpanel-page .userpanel-mygold-consult-btn:active{
	outline: none;
	box-shadow: none;
}

main .userpanel-page .userpanel-mygold-stats{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 18px;
}

main .userpanel-page .userpanel-mygold-stat-card{
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 118px;
	padding: 18px 20px;
	border: 1px solid rgba(255, 180, 0, 0.45);
	border-radius: 14px;
	background:
		radial-gradient(circle at 100% 0%, rgba(255, 122, 0, 0.16) 0%, transparent 55%),
		rgba(0, 0, 0, 0.34);
	box-shadow: inset 0 0 0 1px rgba(255, 180, 0, 0.08);
}

main .userpanel-page .userpanel-mygold-stat-card.is-highlight{
	border-color: rgba(255, 180, 0, 0.45);
}

main .userpanel-page .userpanel-mygold-stat-label{
	font-family: 'quicksand-semibold', sans-serif;
	font-size: 0.84rem;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

main .userpanel-page .userpanel-mygold-stat-value{
	font-family: 'quicksand-bold', sans-serif;
	font-size: clamp(2rem, 3vw, 2.6rem);
	line-height: 1;
	color: #fff;
}

main .userpanel-page .userpanel-mygold-stat-value.is-pending{
	color: rgba(255, 255, 255, 0.42);
}

main .userpanel-page .userpanel-mygold-stat-card.is-highlight .userpanel-mygold-stat-value{
	color: #ffb400;
}

main .userpanel-page .userpanel-mygold-stat-note{
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.9rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.68);
}

main .userpanel-page .userpanel-mygold-exchange{
	padding: 22px 24px 20px;
	margin-bottom: 16px;
	border: 1px solid rgba(179, 48, 0, 0.85);
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(26, 16, 10, 0.96) 0%, rgba(8, 6, 5, 0.98) 100%);
}

main .userpanel-page .userpanel-mygold-exchange-head{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

main .userpanel-page .userpanel-mygold-exchange-title{
	margin: 0 0 6px;
	font-family: 'quicksand-bold', sans-serif;
	font-size: 1.35rem;
	color: #fff;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-mygold-exchange-subtitle{
	margin: 0;
	font-family: 'quicksand-light', sans-serif;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.78);
}

main .userpanel-page .userpanel-mygold-exchange-subtitle strong{
	color: #ffb400;
	font-family: 'quicksand-semibold', sans-serif;
}

main .userpanel-page .userpanel-mygold-info-btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid rgba(255, 180, 0, 0.35);
	border-radius: 999px;
	background: rgba(255, 122, 0, 0.1);
	color: #ffb400;
	font-family: 'quicksand-semibold', sans-serif;
	font-size: 0.88rem;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

main .userpanel-page .userpanel-mygold-info-btn:hover,
main .userpanel-page .userpanel-mygold-info-btn.is-active{
	background: rgba(255, 122, 0, 0.2);
	border-color: rgba(255, 180, 0, 0.55);
}

main .userpanel-page .userpanel-mygold-exchange-body{
	padding: 24px 20px;
	margin-bottom: 16px;
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

main .userpanel-page .userpanel-mygold-exchange-visual{
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 28px;
	margin-bottom: 18px;
}

main .userpanel-page .userpanel-mygold-exchange-side{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-width: 220px;
	min-height: 260px;
	padding: 22px 24px 20px;
	border-radius: 18px;
	border: 1px solid rgba(255, 180, 0, 0.24);
	background: linear-gradient(180deg, rgba(255, 122, 0, 0.08) 0%, rgba(0, 0, 0, 0.34) 100%);
}

main .userpanel-page .userpanel-mygold-exchange-side.is-coin{
	border-color: rgba(255, 180, 0, 0.34);
}

main .userpanel-page .userpanel-mygold-exchange-coin-art{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	width: 100%;
	min-height: 150px;
}

main .userpanel-page .userpanel-mygold-exchange-coin-art img,
main .userpanel-page .userpanel-mygold-exchange-cash-art img{
	display: block;
	width: auto;
	height: auto;
	max-width: none;
	object-fit: none;
	filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
}

main .userpanel-page .userpanel-mygold-exchange-side.is-cash{
	border-color: rgba(255, 180, 0, 0.42);
	background: linear-gradient(180deg, rgba(255, 180, 0, 0.12) 0%, rgba(0, 0, 0, 0.34) 100%);
}

main .userpanel-page .userpanel-mygold-exchange-cash-art{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	width: 100%;
	min-height: 150px;
}

main .userpanel-page .userpanel-mygold-exchange-side-meta{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding-top: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

main .userpanel-page .userpanel-mygold-exchange-qty{
	font-family: 'quicksand-bold', sans-serif;
	font-size: clamp(2rem, 3vw, 2.5rem);
	line-height: 1;
	color: #fff;
}

main .userpanel-page .userpanel-mygold-exchange-qty.is-pending{
	color: rgba(255, 255, 255, 0.42);
}

main .userpanel-page .userpanel-mygold-exchange-side-meta small{
	font-family: 'quicksand-semibold', sans-serif;
	font-size: 0.88rem;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

main .userpanel-page .userpanel-mygold-exchange-arrow{
	display: flex;
	align-items: center;
	align-self: center;
	color: #ffb400;
	font-size: 2rem;
}

main .userpanel-page .userpanel-mygold-exchange-status{
	margin: 0;
	text-align: center;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.98rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

main .userpanel-page .userpanel-mygold-exchange-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 18px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(180deg, #e04a00 0%, #a82800 52%, #7a1200 100%);
	color: #fff;
	font-family: 'quicksand-semibold', sans-serif;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(122, 18, 0, 0.35);
}

main .userpanel-page .userpanel-mygold-exchange-btn:disabled{
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
}

main .userpanel-page .userpanel-mygold-info-panel{
	padding: 18px 20px;
	margin-bottom: 16px;
	border: 1px solid rgba(255, 180, 0, 0.24);
	border-radius: 14px;
	background: rgba(255, 122, 0, 0.06);
}

main .userpanel-page .userpanel-mygold-info-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

main .userpanel-page .userpanel-mygold-info-block h5{
	margin: 0 0 10px;
	font-family: 'quicksand-bold', sans-serif;
	font-size: 1rem;
	color: #ffb400;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-mygold-info-block ol,
main .userpanel-page .userpanel-mygold-info-block ul{
	margin: 0;
	padding-left: 18px;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.94rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

main .userpanel-page .userpanel-mygold-info-block li + li{
	margin-top: 6px;
}

main .userpanel-page .userpanel-mygold-info-block a{
	color: #ffb400;
	text-decoration: none;
}

main .userpanel-page .userpanel-mygold-info-block a:hover{
	text-decoration: underline;
}

main .userpanel-page .userpanel-mygold-footer{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

main .userpanel-page .userpanel-mygold-footer-card{
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 118px;
	padding: 22px 24px;
	border: 1px solid rgba(179, 48, 0, 0.85);
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(26, 16, 10, 0.96) 0%, rgba(8, 6, 5, 0.98) 100%);
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

main .userpanel-page .userpanel-mygold-footer-card:hover{
	transform: translateY(-2px);
	border-color: rgba(255, 180, 0, 0.45);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

main .userpanel-page .userpanel-mygold-footer-card.is-vip{
	border-color: rgba(255, 180, 0, 0.35);
}

main .userpanel-page .userpanel-mygold-footer-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: 18px;
	background: rgba(255, 122, 0, 0.14);
	color: #ffb400;
	font-size: 2.2rem;
}

main .userpanel-page .userpanel-mygold-footer-card.is-vip .userpanel-mygold-footer-icon{
	background: rgba(255, 180, 0, 0.16);
	color: #ffd45a;
}

main .userpanel-page .userpanel-mygold-footer-copy{
	min-width: 0;
	flex: 1;
}

main .userpanel-page .userpanel-mygold-footer-copy strong{
	display: block;
	margin-bottom: 6px;
	font-family: 'quicksand-bold', sans-serif;
	font-size: 1.08rem;
	color: #fff;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-mygold-footer-copy span{
	display: block;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.94rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.74);
}

main .userpanel-page .userpanel-mygold-footer-arrow{
	flex: 0 0 auto;
	color: #ffb400;
	font-size: 1.35rem;
}

main .userpanel-page .userpanel-mygold-uses,
main .userpanel-page .userpanel-mygold-use-card,
main .userpanel-page .userpanel-mygold-use-icon,
main .userpanel-page .userpanel-mygold-use-arrow{
	display: none;
}

main .userpanel-page .userpanel-level-rewards-grid{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

main .userpanel-page .userpanel-level-reward-card{
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 16px 14px 12px;
	border: 3px solid #000;
	background:
		radial-gradient(circle at 50% 0%, rgba(255, 180, 0, 0.1) 0%, transparent 58%),
		linear-gradient(180deg, #1a120c 0%, #0a0806 100%);
	overflow: hidden;
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

main .userpanel-page .userpanel-level-reward-card::before{
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
			-45deg,
			rgba(255, 180, 0, 0.03) 0 2px,
			transparent 2px 8px
		);
	pointer-events: none;
}

main .userpanel-page .userpanel-level-reward-card:hover{
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
}

main .userpanel-page .userpanel-level-reward-card.is-locked{
	opacity: 0.82;
}

main .userpanel-page .userpanel-level-reward-card.is-claimed{
	opacity: 0.92;
}

main .userpanel-page .userpanel-level-reward-card__badge{
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	align-self: flex-start;
	margin-bottom: 10px;
	padding: 8px 14px 6px;
	border: 2px solid #000;
	background: linear-gradient(180deg, #ffd000 0%, #ffb400 100%);
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
}

main .userpanel-page .userpanel-level-reward-card__level-label{
	font-family: 'quicksand-semibold', sans-serif;
	font-size: 0.92rem;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.78);
	letter-spacing: 0.04em;
}

main .userpanel-page .userpanel-level-reward-card__badge strong{
	font-family: 'quicksand-bold', sans-serif;
	font-size: 2rem;
	line-height: 1;
	color: #111;
}

main .userpanel-page .userpanel-level-reward-card__media{
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 112px;
	margin-bottom: 12px;
	perspective: 800px;
}

main .userpanel-page .userpanel-level-reward-card__image-wrap{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 112px;
	padding: 8px 6px;
	border: 2px solid rgba(255, 180, 0, 0.22);
	background: rgba(0, 0, 0, 0.35);
	transform-style: preserve-3d;
	transition:
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.3s ease,
		box-shadow 0.3s ease;
	overflow: hidden;
}

main .userpanel-page .userpanel-level-reward-card:hover .userpanel-level-reward-card__image-wrap{
	transform: rotateY(-14deg) rotateX(8deg);
	border-color: rgba(255, 196, 0, 0.65);
	box-shadow:
		0 10px 22px rgba(0, 0, 0, 0.45),
		0 0 18px rgba(255, 180, 0, 0.22);
}

main .userpanel-page .userpanel-level-reward-card__shine{
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		115deg,
		transparent 0%,
		transparent 40%,
		rgba(255, 220, 120, 0.35) 50%,
		transparent 60%,
		transparent 100%
	);
	background-size: 220% 100%;
	background-position: 130% 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
	mix-blend-mode: screen;
}

main .userpanel-page .userpanel-level-reward-card:hover .userpanel-level-reward-card__shine{
	opacity: 1;
	animation: userpanel-level-reward-shine 1.2s ease-in-out infinite;
}

@keyframes userpanel-level-reward-shine{
	0%{ background-position: 130% 0; }
	100%{ background-position: -30% 0; }
}

main .userpanel-page .userpanel-level-reward-card__image{
	position: relative;
	z-index: 1;
	display: block;
	width: 78px;
	height: 98px;
	object-fit: contain;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

main .userpanel-page .userpanel-level-reward-card__body{
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	text-align: center;
	padding: 0 6px 12px;
}

main .userpanel-page .userpanel-level-reward-card__name{
	margin: 0 0 8px;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.85rem;
	line-height: 1.25;
	color: #ffb400;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-level-reward-card__desc{
	margin: 0;
	font-family: 'quicksand-light', sans-serif;
	font-size: 0.82rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.72);
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

main .userpanel-page .userpanel-level-reward-card__btn{
	position: relative;
	z-index: 1;
	width: 100%;
	margin-top: auto;
	padding: 12px 10px;
	border: 0;
	border-top: 2px solid #000;
	background: linear-gradient(180deg, #ff4700 0%, #8f0000 100%);
	color: #fff;
	font-family: 'quicksand-bold', sans-serif;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.2s ease;
}

main .userpanel-page .userpanel-level-reward-card__btn:hover:not(:disabled){
	filter: brightness(1.08);
	transform: translateY(-1px);
}

main .userpanel-page .userpanel-level-reward-card__btn:focus,
main .userpanel-page .userpanel-level-reward-card__btn:focus-visible,
main .userpanel-page .userpanel-level-reward-card__btn:active{
	outline: none;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
}

main .userpanel-page .userpanel-level-reward-card__btn:disabled{
	background: linear-gradient(180deg, #3a3a3a 0%, #1f1f1f 100%);
	color: rgba(255, 255, 255, 0.55);
	cursor: not-allowed;
	transform: none;
	filter: none;
}

main .userpanel-page .userpanel-level-reward-card.is-claimed .userpanel-level-reward-card__btn:disabled,
main .userpanel-page .userpanel-level-reward-card__btn.is-claimed-btn:disabled{
	background: linear-gradient(180deg, #3a3a3a 0%, #1f1f1f 100%);
	color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 1199px){
	main .userpanel-page .userpanel-level-rewards-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px){
	main .userpanel-page .userpanel-level-rewards-grid{
		grid-template-columns: 1fr;
	}

	main .userpanel-page .userpanel-level-rewards-page{
		padding: 0 16px 24px;
	}

	main .userpanel-page .userpanel-level-rewards-intro{
		flex-direction: column;
		text-align: center;
	}

	main .userpanel-page .userpanel-support-page{
		padding: 0 16px 24px;
	}

	main .userpanel-page .userpanel-support-intro{
		flex-direction: column;
		text-align: center;
	}
}

main .userpanel-page .userpanel-buycoins-page{
	padding: 0 30px 28px;
}

main .userpanel-page .userpanel-buycoins-hero{
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr) minmax(220px, 280px);
	align-items: center;
	gap: 28px;
	margin-bottom: 24px;
	padding: 22px 24px;
	border:1px solid #b33000;
background: linear-gradient(0deg,rgba(13, 8, 4, 1) 0%, rgba(43, 27, 20, 1) 100%);


}

main .userpanel-page .userpanel-buycoins-hero-art{
	display: flex;
	align-items: center;
	justify-content: center;
}

main .userpanel-page .userpanel-buycoins-hero-icon{
	display: block;
	width: 150px;
	height: 150px;
	object-fit: contain;
}

main .userpanel-page .userpanel-buycoins-hero-main{
	min-width: 0;
}

main .userpanel-page .userpanel-buycoins-hero-badge{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	padding: 5px 10px;
	border: 1px solid rgba(255, 180, 0, 0.35);
	background: rgba(255, 122, 0, 0.12);
	font-family: 'anime-950', sans-serif;
	font-size: 0.8rem;
	color: #ffb400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

main .userpanel-page .userpanel-buycoins-hero-heading{
	display: inline-block;
	max-width: 100%;
	margin-bottom: 2px;
}

main .userpanel-page .userpanel-buycoins-hero-title{
	margin: 0;
	font-family: 'anime-950', sans-serif;
	font-size: clamp(2.1rem, 3.2vw, 2.85rem);
	font-style: normal;
	font-weight: normal;
	line-height: 1.05;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

main .userpanel-page .userpanel-buycoins-hero-title span{
	display: inline-block;
	background: linear-gradient(180deg, #ffe45e 0%, #ffb400 48%, #ff7a00 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

main .userpanel-page .userpanel-buycoins-hero-divider{
	position: relative;
	width: 72%;
	height: 2px;
	margin: 12px auto 0;
	background: linear-gradient(
		90deg,
		rgba(255, 180, 0, 0) 0%,
		rgba(255, 180, 0, 0.18) 12%,
		rgba(255, 180, 0, 0.85) 50%,
		rgba(255, 180, 0, 0.18) 88%,
		rgba(255, 180, 0, 0) 100%
	);
}

main .userpanel-page .userpanel-buycoins-hero-desc{
	margin: 14px 0 0;
	font-family: 'anime-600', sans-serif;
	font-size: 0.92rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
}

main .userpanel-page .userpanel-buycoins-hero-desc span,
main .userpanel-page .userpanel-buycoins-hero-desc .text-b{
	color: rgba(255, 255, 255, 0.86);
}

main .userpanel-page .userpanel-buycoins-hero-features{
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-left: 40px;
	border-left: 1px solid rgba(255, 180, 0, 0.18);
}

main .userpanel-page .userpanel-buycoins-hero-feature{
	display: flex;
	align-items: center;
	gap: 8px;
}

main .userpanel-page .userpanel-buycoins-hero-feature-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	border: 0;
	background: transparent;
	line-height: 1;
}

main .userpanel-page .userpanel-buycoins-hero-feature-icon i{
	color: #ffa500;
	font-size: 1.5rem;
	font-style: normal;
}

main .userpanel-page .userpanel-buycoins-hero-feature strong{
	display: block;
	margin-bottom: 2px;
	font-family: 'anime-700', sans-serif;
	font-size: 0.98rem;
	font-weight: normal;
	font-style: normal;
	color: #ffb300;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

main .userpanel-page .userpanel-buycoins-hero-feature span{
	display: block;
	font-family: 'anime-600', sans-serif;
	font-size: 0.84rem;
	font-style: normal;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.78);
}

main .userpanel-page .userpanel-buycoins-methods{
	margin-bottom: 24px;
	border: 1px solid #832400;
	background: #120e0d;
	overflow: hidden;
}

main .userpanel-page .userpanel-buycoins-methods-header{
	padding: 10px 16px;
	background: linear-gradient(180deg, #ff4700 0%, #8f0000 100%);
	border-bottom: 1px solid #100804;
}

main .userpanel-page .userpanel-buycoins-methods-header h4{
	margin: 0;
	font-family: 'anime-920', sans-serif;
	font-size: 1.05rem;
	line-height: 1.2;
	color: #fff;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-buycoins-packages-header{
	padding: 10px 16px;
	background: #141010;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

main .userpanel-page .userpanel-buycoins-packages-header h4{
	margin: 0;
	font-family: 'anime-920', sans-serif;
	font-size: 1.05rem;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.92);
	text-transform: uppercase;
}

main .userpanel-page .userpanel-buycoins-packages-header h4 i{
	margin-right: 10px;
	color: #ffb400;
}

main .userpanel-page .userpanel-buycoins-packages{
	margin-bottom: 24px;
}

main .userpanel-page .userpanel-buycoins-packages .userpanel-buycoins-plans{
	margin-top: 22px;
}

main .userpanel-page .userpanel-buycoins-methods-list{
	display: flex;
	width: 100%;
	border: 0;
	background: #120e0d;
}

main .userpanel-page .userpanel-buycoins-method{
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 78px;
	padding: 14px 12px;
	border: 0;
	border-right: 1px solid rgba(255, 180, 0, 0.18);
	background: #0c0a0a;
	text-decoration: none;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

main .userpanel-page .userpanel-buycoins-method:last-child{
	border-right: 0;
}

main .userpanel-page .userpanel-buycoins-method:hover{
	background: rgba(255, 122, 0, 0.08);
}

main .userpanel-page .userpanel-buycoins-method.is-active{
	background: rgb(171 82 0 / 14%);

}

main .userpanel-page .userpanel-buycoins-method.is-disabled{
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

main .userpanel-page .userpanel-buycoins-method img{
	display: block;
	width: auto;
	max-width: 120px;
	max-height: 42px;
	object-fit: contain;
}

main .userpanel-page .userpanel-buycoins-plans{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

main .userpanel-page .userpanel-buycoins-plan-card{
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid #832400;
	background: #0a0806;
	overflow: hidden;
}

main .userpanel-page .userpanel-buycoins-plan-badge{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	padding: 5px 9px;
	background: linear-gradient(180deg, #ffd000 0%, #ffb400 100%);
	border: 1px solid #000;
	font-family: 'anime-950', sans-serif;
	font-size: 0.68rem;
	color: #000;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-buycoins-plan-media{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 150px;
	padding: 24px 16px 10px;
	background:
		radial-gradient(circle at 50% 38%, rgba(255, 120, 0, 0.32) 0%, rgba(255, 120, 0, 0.08) 38%, transparent 68%),
		repeating-radial-gradient(circle at center, rgba(255, 140, 0, 0.07) 0 1px, transparent 1px 7px),
		#0c0a0a;
}

main .userpanel-page .userpanel-buycoins-plan-media img{
	position: relative;
	z-index: 1;
	display: block;
	width: auto;
	max-width: 150px;
	max-height: 120px;
	object-fit: contain;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
}

main .userpanel-page .userpanel-buycoins-plan-body{
	flex: 1;
	padding: 6px 14px 14px;
}

main .userpanel-page .userpanel-buycoins-plan-title{
	margin: 0 0 12px;
	font-family: 'anime-950', sans-serif;
	font-size: clamp(1.55rem, 2vw, 1.85rem);
	line-height: 1.05;
	text-align: center;
	text-transform: uppercase;
	background: linear-gradient(180deg, #ffe45e 0%, #ffb400 52%, #ff7a00 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

main .userpanel-page .userpanel-buycoins-plan-row{
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin-bottom: 8px;
	padding: 8px 10px;
	border: 1px solid rgba(131, 36, 0, 0.85);
	background: rgba(12, 10, 10, 0.88);
	clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}

main .userpanel-page .userpanel-buycoins-plan-row.is-price{
	min-height: 56px;
	align-items: center;
}

main .userpanel-page .userpanel-buycoins-plan-row-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(255, 180, 0, 0.35);
	border-radius: 50%;
	background: rgba(255, 122, 0, 0.1);
	color: #ffb400;
	font-size: 0.78rem;
}

main .userpanel-page .userpanel-buycoins-plan-row-text{
	flex: 1;
	font-family: 'anime-950', sans-serif;
	font-size: 1.0rem;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.82);
	text-transform: uppercase;
}

main .userpanel-page .userpanel-buycoins-plan-row-text strong{
	font-family: 'anime-920', sans-serif;
	font-weight: normal;
	color: #ffb400;
}

main .userpanel-page .userpanel-buycoins-plan-row.is-price .userpanel-buycoins-plan-row-text{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

main .userpanel-page .userpanel-buycoins-plan-row.is-price .userpanel-buycoins-plan-row-text small{
	font-family: 'anime-920', sans-serif;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.55);
}

main .userpanel-page .userpanel-buycoins-plan-row.is-price .userpanel-buycoins-plan-row-text strong{
	font-size: 1.45rem;
	color: #fff;
}

main .userpanel-page .userpanel-buycoins-plan-btn{
	display: block;
	width: 100%;
	margin-top: auto;
	padding: 12px 16px;
	border: 0;
	border-top: 2px solid #100804;
	background: linear-gradient(180deg, #c43500 0%, #a82800 52%, #dd6800 100%);
	color: #fff;
	font-family: 'anime-920', sans-serif;
	font-size: 1.25rem;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.85);
	cursor: pointer;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
	transition: filter 0.2s ease, transform 0.2s ease;
}

main .userpanel-page .userpanel-buycoins-plan-btn:hover{
	filter: brightness(1.05);
	transform: translateY(-1px);
	color: #fff;
	text-decoration: none;
}

main .userpanel-page .userpanel-buycoins-info{
	padding: 16px 18px;
	border: 1px solid #832400;
	background: rgba(255, 122, 0, 0.08);
}

main .userpanel-page .userpanel-buycoins-info h4{
	margin: 0 0 10px;
	font-family: 'quicksand-semibold', sans-serif;
	font-size: 0.95rem;
	color: #ffb400;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-buycoins-info h4 i{
	margin-right: 8px;
	color: #fff;
}

main .userpanel-page .userpanel-buycoins-info p{
	margin: 0;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.78rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

main .userpanel-page .userpanel-buycoins-checkout-page{
	padding: 0 40px 28px;
}

main .userpanel-page .userpanel-buycoins-checkout-back{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	font-family: 'anime-940', sans-serif;
	font-size: 0.9rem;
	color: #ffb400;
	text-decoration: none;
}

main .userpanel-page .userpanel-buycoins-checkout-back:hover{
	color: #fff;
	text-decoration: none;
}

main .userpanel-page .userpanel-buycoins-checkout-grid{
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 22px;
}

main .userpanel-page .userpanel-buycoins-checkout-details,
main .userpanel-page .userpanel-buycoins-checkout-pay{
	width: 100%;
	margin-bottom: 0;
}

main .userpanel-page .userpanel-buycoins-checkout-details .userpanel-buycoins-checkout-table{
	width: 100%;
	margin-top: 22px;
	border: 1px solid #832400;
	background: #120e0d;
	overflow: hidden;
	padding: 0;
}

main .userpanel-page .userpanel-buycoins-checkout-head,
main .userpanel-page .userpanel-buycoins-checkout-row{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
	padding: 12px 16px;
}

main .userpanel-page .userpanel-buycoins-checkout-head{
	background: linear-gradient(180deg, #ff4700 0%, #8f0000 100%);
	border-bottom: 1px solid #100804;
}

main .userpanel-page .userpanel-buycoins-checkout-head span{
	font-family: 'quicksand-bold', sans-serif;
	font-size: 1rem;
	color: #fff;
	text-transform: uppercase;
	text-align: left;
}

main .userpanel-page .userpanel-buycoins-checkout-row{
	border-bottom: 1px solid rgba(255, 180, 0, 0.12);
}

main .userpanel-page .userpanel-buycoins-checkout-row:last-child{
	border-bottom: 0;
}

main .userpanel-page .userpanel-buycoins-checkout-row span:first-child,
main .userpanel-page .userpanel-buycoins-checkout-row span:last-child{
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.86rem;
	text-align: left;
}

main .userpanel-page .userpanel-buycoins-checkout-row span:first-child{
	color: rgba(255, 255, 255, 0.72);
}

main .userpanel-page .userpanel-buycoins-checkout-row span:last-child{
	color: #fff;
}

main .userpanel-page .userpanel-buycoins-checkout-row.is-total{
	background: rgba(255, 122, 0, 0.08);
}

main .userpanel-page .userpanel-buycoins-checkout-row.is-total span:last-child{
	color: #ffb400;
	font-size: 0.92rem;
}

main .userpanel-page .userpanel-buycoins-checkout-paybox{
	padding: 40px 18px 18px;
	text-align: center;
}

main .userpanel-page .userpanel-buycoins-checkout-pay-label{
	margin: 0 0 6px;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.82rem;
	color: rgb(255 255 255);
	text-transform: uppercase;
}

main .userpanel-page .userpanel-buycoins-checkout-pay-total{
	margin: 0 0 8px;
	font-family: 'quicksand-bold', sans-serif; 
	font-size: clamp(1.8rem, 2.5vw, 2.2rem);
	line-height: 1.1;
	color: #ffe8b2;
}

main .userpanel-page .userpanel-buycoins-checkout-pay-sub{
	margin: 0 0 16px;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.78);
}

main .userpanel-page .userpanel-buycoins-checkout-pay-note{
	margin: 0 0 16px;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.84rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.72);
}

main .userpanel-page .userpanel-buycoins-checkout-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 50%;
	padding: 12px 16px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(180deg, #0097c4 0%, #027bd1 52%, #006e99 100%);
	color: #fff;
	font-family: 'quicksand-bold';
	font-size: 1.15rem;
	cursor: pointer;
}

main .userpanel-page .userpanel-buycoins-checkout-btn:hover{
	filter: brightness(1.05);
}

main .userpanel-page .userpanel-buycoins-checkout-btn:focus,
main .userpanel-page .userpanel-buycoins-checkout-btn:focus-visible,
main .userpanel-page .userpanel-buycoins-checkout-btn:active{
	outline: none;
	box-shadow: none;
}

main .userpanel-page .userpanel-buycoins-checkout-mp-logo{
	width: 46px;
	height: auto;
}

main .userpanel-page .userpanel-buycoins-checkout-paypal{
	display: block;
	width: 50%;
	max-width: 100%;
	margin: 4px auto 0;
}

main .userpanel-page .userpanel-buycoins-checkout-paypal > div{
	width: 100%;
}

main .userpanel-page .userpanel-buycoins-checkout-secure{
	margin: 14px 0 0;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.78rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.72);
}

main .userpanel-page .userpanel-buycoins-checkout-secure i{
	margin-right: 6px;
	color: #ffb400;
}

main .userpanel-page .userpanel-buycoins-checkout-info{
	margin-top: 0;
}

main .userpanel-page .userpanel-payment-page{
	padding: 0 40px 28px;
}

main .userpanel-page .userpanel-payment-status{
	margin-bottom: 24px;
	padding: 28px 20px;
	border: 1px solid #832400;
	background: #120e0d;
	text-align: center;
}

main .userpanel-page .userpanel-payment-status-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: 14px;
	border-radius: 50%;
	border: 1px solid rgba(255, 180, 0, 0.35);
	background: rgba(255, 122, 0, 0.12);
	font-size: 2rem;
	color: #ffb400;
}

main .userpanel-page .userpanel-payment-status.is-success .userpanel-payment-status-icon{
	color: #7dff9a;
	border-color: rgba(125, 255, 154, 0.35);
	background: rgba(45, 120, 70, 0.2);
}

main .userpanel-page .userpanel-payment-status.is-pending .userpanel-payment-status-icon{
	color: #ffb400;
}

main .userpanel-page .userpanel-payment-status.is-failure .userpanel-payment-status-icon{
	color: #ff6b6b;
	border-color: rgba(255, 107, 107, 0.35);
	background: rgba(120, 30, 30, 0.2);
}

main .userpanel-page .userpanel-payment-status-title{
	margin: 0 0 10px;
	font-family: 'quicksand-bold', sans-serif;
	font-size: clamp(1.4rem, 2.2vw, 1.85rem);
	line-height: 1.15;
	color: #fff;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-payment-status-title span,
main .userpanel-page .userpanel-payment-status-title span.failure{
	color: #ffb400;
}

main .userpanel-page .userpanel-payment-status-desc{
	margin: 0;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.85rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.82);
}

main .userpanel-page .userpanel-payment-block{
	margin-bottom: 22px;
}

main .userpanel-page .userpanel-payment-block .userpanel-buycoins-packages-header{
	padding: 12px 16px;
	background: linear-gradient(180deg, #ff4700 0%, #8f0000 100%);
	border-top: 2px solid #ff940f;
	border-bottom: 1px solid #100804;
}

main .userpanel-page .userpanel-payment-block .userpanel-buycoins-packages-header h4{
	font-family: 'quicksand-semibold', sans-serif;
	font-size: 0.9rem;
	color: #fff;
	text-transform: uppercase;
}

main .userpanel-page .userpanel-payment-block .userpanel-buycoins-packages-header h4 i{
	color: #ffe8b2;
}

main .userpanel-page .userpanel-payment-box{
	margin-top: 22px;
	padding: 16px 18px;
	border: 1px solid #832400;
	background: #120e0d;
}

main .userpanel-page .userpanel-payment-box p{
	margin: 0 0 10px;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.85rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.82);
}

main .userpanel-page .userpanel-payment-box p strong,
main .userpanel-page .userpanel-payment-page strong{
	color: #ffb400;
	font-family: 'quicksand-bold', sans-serif;
}

main .userpanel-page .userpanel-payment-box p:last-child{
	margin-bottom: 0;
}

main .userpanel-page .userpanel-payment-list{
	margin: 0;
	padding-left: 18px;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.85rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.82);
}

main .userpanel-page .userpanel-payment-list li{
	margin-bottom: 6px;
}

main .userpanel-page .userpanel-payment-list li:last-child{
	margin-bottom: 0;
}

main .userpanel-page .userpanel-payment-list + p{
	margin-top: 14px;
}

main .userpanel-page .userpanel-payment-actions{
	display: flex;
	justify-content: center;
	margin-bottom: 22px;
}

main .userpanel-page .userpanel-payment-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	padding: 12px 24px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(180deg, #ffa500 0%, #ffd000 48%, #d79d00 100%);
	color: #1a1208;
	font-family: 'anime-950', sans-serif;
	font-size: 1.2rem;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: none;
}

main .userpanel-page .userpanel-payment-btn:hover{
	filter: brightness(1.04);
	color: #1a1208;
	text-decoration: none;
}

main .userpanel-page .userpanel-payment-btn:focus,
main .userpanel-page .userpanel-payment-btn:focus-visible,
main .userpanel-page .userpanel-payment-btn:active{
	outline: none;
	box-shadow: none;
}

main .userpanel-page .userpanel-payment-footer p{
	text-align: center;
	font-size: 0.85rem;
}

main .userpanel-page #credential{
	display: none;
}

main .userpanel-page .userpanel-module-btn:focus,
main .userpanel-page .userpanel-module-btn:focus-visible,
main .userpanel-page .userpanel-module-btn:active,
main .userpanel-page .userpanel-password-btn:focus,
main .userpanel-page .userpanel-password-btn:focus-visible,
main .userpanel-page .userpanel-password-btn:active,
main .userpanel-page .userpanel-password-submit:focus,
main .userpanel-page .userpanel-password-submit:focus-visible,
main .userpanel-page .userpanel-password-submit:active{
	outline: none;
	box-shadow: none;
}

@media (max-width: 1199px){
	main .userpanel-page .userpanel-modules-grid{
		grid-template-columns: 1fr;
	}

	main .userpanel-page .userpanel-vip-plans{
		grid-template-columns: 1fr;
	}

	main .userpanel-page .userpanel-webshop-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	main .userpanel-page .userpanel-webshop-tabs{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	main .userpanel-page .userpanel-webshop-toolbar{
		flex-direction: column;
		align-items: flex-start;
	}

main .userpanel-page .userpanel-buycoins-plans{
		grid-template-columns: 1fr;
	}

main .userpanel-page .userpanel-buycoins-hero{
		grid-template-columns: 1fr;
		gap: 20px;
	}

main .userpanel-page .userpanel-buycoins-hero-art{
		justify-content: flex-start;
	}

main .userpanel-page .userpanel-buycoins-hero-features{
		padding-left: 0;
		border-left: 0;
		padding-top: 6px;
		border-top: 1px solid rgba(255, 180, 0, 0.18);
	}

	main .userpanel-page .userpanel-mygold-hero{
		grid-template-columns: 1fr;
		gap: 18px;
		text-align: center;
	}

	main .userpanel-page .userpanel-mygold-hero-main{
		align-items: center;
	}

	main .userpanel-page .userpanel-mygold-hero-art{
		justify-content: center;
	}

	main .userpanel-page .userpanel-mygold-inventory-head{
		flex-direction: column;
		align-items: stretch;
	}

	main .userpanel-page .userpanel-mygold-consult-btn{
		width: 100%;
		min-width: 0;
	}

	main .userpanel-page .userpanel-mygold-stats,
	main .userpanel-page .userpanel-mygold-footer,
	main .userpanel-page .userpanel-mygold-info-grid{
		grid-template-columns: 1fr;
	}

	main .userpanel-page .userpanel-mygold-exchange-head{
		flex-direction: column;
		align-items: stretch;
	}

	main .userpanel-page .userpanel-mygold-exchange-visual{
		flex-direction: column;
		align-items: center;
	}

	main .userpanel-page .userpanel-mygold-exchange-side{
		width: 100%;
		max-width: 320px;
		min-height: 240px;
	}

	main .userpanel-page .userpanel-mygold-exchange-arrow{
		transform: rotate(90deg);
	}

	main .userpanel-page .userpanel-vip-compare-head,
	main .userpanel-page .userpanel-vip-compare-row{
		grid-template-columns: minmax(0, 1fr) 90px 90px;
	}

	main .userpanel-page .userpanel-main-panel .header-title{
		min-height: 58px;
		padding-inline: 20px;
		margin-bottom: 22px;
	}

	main .userpanel-page .userpanel-main-panel .header-title h3{
		font-size: 1.85rem;
	}
}

@media (max-width: 991px){
	main .userpanel-page .userpanel-wraper{
		flex-direction: column;
	}

	main .userpanel-page .userpanel-sidebar{
		flex: 1;
		max-width: 100%;
		width: 100%;
		border-right: none;
		border-bottom: 4px solid var(--black);
	}

	main .userpanel-page .userpanel-main-panel .header-title{
		min-height: 52px;
		padding-inline: 18px;
		margin-bottom: 20px;
	}

	main .userpanel-page .userpanel-main-panel .header-title h3{
		font-size: 1.55rem;
	}
}

@media (max-width: 575px){
	main .userpanel-page .userpanel-main-panel .header-title{
		min-height: 48px;
		padding-block: 9px;
		padding-inline: 14px;
		margin-bottom: 16px;
	}

	main .userpanel-page .userpanel-main-panel .header-title h3{
		font-size: 1.45rem;
		line-height: 1.2;
	}

	main .userpanel-page .userpanel-modules-grid{
		grid-template-columns: 1fr;
		padding: 0 16px 16px;
		gap: 12px;
	}

	main .userpanel-page .userpanel-module-card{
		grid-template-columns: 1fr;
		padding: 0 0 16px;
		gap: 0;
	}

	main .userpanel-page .userpanel-module-media{
		min-height: 120px;
		border-right: 0;
		border-bottom: 1px solid rgba(131, 36, 0, 0.55);
		padding: 14px 12px 12px;
	}

	main .userpanel-page .userpanel-module-media img{
		max-height: 108px;
	}

	main .userpanel-page .userpanel-module-body{
		text-align: center;
		padding: 14px 16px 8px;
	}

	main .userpanel-page .userpanel-module-title{
		font-size: 1.05rem;
	}

	main .userpanel-page .userpanel-module-btn{
		width: auto;
		max-width: none;
		min-width: 0;
		margin: 0 auto;
		padding: 8px 14px;
		font-size: 0.75rem;
		border: 1px solid #000;
	}

	main .userpanel-page .userpanel-webshop-tabs{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

main .userpanel-page .userpanel-buycoins-page,
main .userpanel-page .userpanel-buycoins-checkout-page,
main .userpanel-page .userpanel-payment-page,
main .userpanel-page .userpanel-mygold-page{
		padding: 0 20px 28px;
	}

	main .userpanel-page .userpanel-password-intro,
	main .userpanel-page .userpanel-password-form{
		width: 100%;
		max-width: 100%;
	}

main .userpanel-page .userpanel-buycoins-hero{
		text-align: center;
	}

main .userpanel-page .userpanel-buycoins-hero-art{
		justify-content: center;
	}

main .userpanel-page .userpanel-buycoins-hero-main{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

main .userpanel-page .userpanel-buycoins-hero-heading{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

main .userpanel-page .userpanel-buycoins-hero-features{
		align-items: center;
		width: 100%;
	}

main .userpanel-page .userpanel-buycoins-hero-feature{
		justify-content: center;
		max-width: 320px;
	}

main .userpanel-page .userpanel-buycoins-hero-feature div{
		text-align: left;
	}

main .userpanel-page .userpanel-buycoins-checkout-btn,
main .userpanel-page .userpanel-buycoins-checkout-paypal{
		width: 100%;
	}

main .userpanel-page .userpanel-buycoins-checkout-paypal > div{
		width: 100%;
	}

	main .userpanel-page .userpanel-vip-page{
		padding: 0 16px 20px;
	}

	main .userpanel-page .userpanel-vip-intro{
		flex-direction: column;
		text-align: center;
	}

	main .userpanel-page .userpanel-vip-plan-head{
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 20px 18px 16px;
	}

	main .userpanel-page .userpanel-vip-plan-head-copy{
		text-align: center;
	}

	main .userpanel-page .userpanel-vip-plan-body{
		padding: 16px 18px 18px;
	}

	main .userpanel-page .userpanel-vip-plan-price-box{
		flex-direction: column;
		align-items: flex-start;
	}

	main .userpanel-page .userpanel-vip-plan-price-row{
		justify-content: flex-start;
	}

	main .userpanel-page .userpanel-vip-plan-desc{
		text-align: center;
	}

	main .userpanel-page .userpanel-vip-plan-btn{
		width: calc(100% - 28px);
		margin: 0 14px 14px;
	}

	main .userpanel-page .userpanel-vip-compare-head,
	main .userpanel-page .userpanel-vip-compare-row{
		grid-template-columns: 1fr;
		gap: 6px;
		text-align: center;
	}

	main .userpanel-page .userpanel-vip-compare-label{
		margin-bottom: 4px;
	}

	main .userpanel-page .userpanel-sidebar-panel{
		padding: 16px;
	}
}

/*==========================================================================
	Section Ranking
/*==========================================================================*/

main .ranking-wraper{
	width: 100%;
	min-height: 560px;
	border-width: 7px 5px 5px 5px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 1.0);
	background: #ffb400;
	display: flex;
}

main .ranking-wraper .content-ranking{
	flex:2;
	background: var(--black);
}

main .ranking-wraper .header-title{
	min-height: 70px;
	width: 100%;
	font-family: 'anime-800';
	color: var(--black);
	background:linear-gradient(280deg, rgb(255 177 0) 0%, rgb(251 186 2) 100%);
/*	background: var(--white);*/
	clip-path: polygon(0 0, 100% 0%, 100% 89%, 0% 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block:10px;
	padding-inline:25px;
	border-left:5px solid var(--black);
	border-top:2px solid yellow;

	h3{
		font-size: 2.4rem;
		margin: 0;
		font-style: italic;
	}	

}

main .ranking-wraper .section-ranking{
	margin-top: 13px;
	padding-bottom: 10px;
}


main .ranking-wraper .promo-ranking{
	flex:0.96;
	overflow: hidden;
	position: relative;
}

main .ranking-wraper .promo-ranking img{
	object-fit: contain;
}


main .ranking-wraper .promo-ranking .btn-register {
	position: absolute;
	bottom: 80px;
	left: 50%;
	width: 180px;
	height: 50px;
	background: #ffa600;
	/*background: linear-gradient(240deg, rgb(161 7 0), transparent) rgb(209 68 0);*/
	background: linear-gradient(268deg, rgb(255, 166, 0), transparent), rgb(255, 208, 0);
	/* El truco aquí: Primero movemos al centro, luego aplicamos el skew */
	transform: translateX(-50%) skewX(-8deg); 
	outline:4px solid var(--black);
	border-top: 2px solid yellow;
	transition: 500ms ease all;

}

main .ranking-wraper .promo-ranking .btn-register:hover {
	background-color:rgb(255 242 0);
	box-shadow: 1px 1px 18px 15px #ff2f00;
	transform: translateX(-50%) skewX(-8deg) translateY(-4px);
}

main .ranking-wraper .promo-ranking .btn-register a {
	display: flex; /* Movido arriba para asegurar que el elemento sea bloque/flex antes de transformar */
	justify-content: center;
	align-items: center;
	height: 100%;
	color: var(--black);
	font-family: 'anime-800';
	text-transform: uppercase;
	font-size: 20px;
	text-decoration: none;
	transform: skewX(8deg); 
}

main .ranking-wraper .section-ranking .menu-ranking{
	display: flex;
	width: 100%;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
}

main .ranking-wraper .section-ranking .menu-ranking button {
    padding: 8px 15px;
    width: 100%; /* Ocupa el espacio disponible... */
    max-width: 250px; /* ...pero detente al llegar a 300px */
    transform: skewX(-5deg);
    border: none;
    background: #856240;
	background: radial-gradient(circle, rgba(133, 98, 64, 1) 3%, rgba(74, 59, 41, 1) 96%);
	color: #ffebcd;
	font-family: 'anime-700';
	font-size: 18px;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
	border-bottom: 2px solid #8b7255;
	cursor: pointer;
}

main .ranking-wraper .section-ranking .menu-ranking button.is-active{
	background: linear-gradient(240deg, rgb(161 7 0), transparent) rgb(209 68 0);
	border-bottom-color:#ff5200;
}

main .ranking-wraper .section-ranking .menu-ranking button:focus,
main .ranking-wraper .section-ranking .menu-ranking button:focus-visible,
main .ranking-wraper .section-ranking .menu-ranking button:active{
	outline: none;
	box-shadow: none;
	border: none;
	border-bottom: 2px solid #8b7255;
}

main .ranking-wraper .section-ranking .menu-ranking button.is-active:focus,
main .ranking-wraper .section-ranking .menu-ranking button.is-active:focus-visible,
main .ranking-wraper .section-ranking .menu-ranking button.is-active:active{
	border-bottom-color: #ffb400;
}

main .rank-total{
	position: relative;
}

main .rank-total .rank-panel{
	display: none;
}

main .rank-total .rank-panel.is-active{
	display: block;
}

main .rank-total .rank-panel.is-animating.is-active{
	animation: rank-panel-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

main .rank-total .rank-panel.is-animating.is-active tbody tr[data-rank-row]:not(.is-hidden){
	animation: rank-row-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

main .rank-total .rank-panel.is-animating.is-active tbody tr[data-rank-row]:not(.is-hidden):nth-child(1){ animation-delay: 0.03s; }
main .rank-total .rank-panel.is-animating.is-active tbody tr[data-rank-row]:not(.is-hidden):nth-child(2){ animation-delay: 0.06s; }
main .rank-total .rank-panel.is-animating.is-active tbody tr[data-rank-row]:not(.is-hidden):nth-child(3){ animation-delay: 0.09s; }
main .rank-total .rank-panel.is-animating.is-active tbody tr[data-rank-row]:not(.is-hidden):nth-child(4){ animation-delay: 0.12s; }
main .rank-total .rank-panel.is-animating.is-active tbody tr[data-rank-row]:not(.is-hidden):nth-child(5){ animation-delay: 0.15s; }
main .rank-total .rank-panel.is-animating.is-active tbody tr[data-rank-row]:not(.is-hidden):nth-child(6){ animation-delay: 0.18s; }
main .rank-total .rank-panel.is-animating.is-active tbody tr[data-rank-row]:not(.is-hidden):nth-child(7){ animation-delay: 0.21s; }
main .rank-total .rank-panel.is-animating.is-active tbody tr[data-rank-row]:not(.is-hidden):nth-child(8){ animation-delay: 0.24s; }
main .rank-total .rank-panel.is-animating.is-active tbody tr[data-rank-row]:not(.is-hidden):nth-child(9){ animation-delay: 0.27s; }
main .rank-total .rank-panel.is-animating.is-active tbody tr[data-rank-row]:not(.is-hidden):nth-child(10){ animation-delay: 0.30s; }

@keyframes rank-panel-in{
	from{
		opacity: 0;
		transform: translateY(16px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes rank-row-in{
	from{
		opacity: 0;
		transform: translateX(-12px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}

main .ranking-wraper .section-ranking .menu-ranking button,
main .ranking-general-page .section-ranking .menu-ranking button{
	transition: background 0.28s ease, box-shadow 0.28s ease, transform 0.2s ease, border-bottom-color 0.28s ease;
}

main .ranking-wraper .section-ranking .menu-ranking button.is-active,
main .ranking-general-page .section-ranking .menu-ranking button.is-active{
	transform: skewX(-5deg) scale(1.02);
}

@media (max-width: 575px){
	main .ranking-general-page .section-ranking .menu-ranking button.is-active{
		transform: none;
	}
}


main .container-rank{
	padding-inline:30px ;
	margin-top: 12px;
	position: relative;
}

main .container-rank table.rank-table{
	width: 100%;
	border-collapse: collapse;
}

main .container-rank table.rank-table tbody tr{
	position: relative;
}


main .container-rank table.rank-table tbody tr::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px; /* Grosor fino idéntico a la imagen shadowX */
    
    /* El degradado: inicia invisible, se vuelve sólido al 15%, y muere invisible en el 100% */
    background: linear-gradient(to right, 
        rgba(133, 98, 64, 0) 0%, 
        rgba(133, 98, 64, 1) 15%, 
        rgba(133, 98, 64, 1) 85%, 
        rgba(133, 98, 64, 0) 100%
    );
}

main .container-rank table.rank-table tbody tr td{
	font-family: 'anime-900', sans-serif;
	color: var(--white);
	font-size:20px;
	padding-block:15px;
}


main .container-rank table.rank-table tbody tr td:nth-child(1){
	padding: 0 10px;
	font-family: 'anime-900';
	font-size: 25px;
	text-align: center;
	img{
		width: 55px;	
	}
} 
main .container-rank table.rank-table tbody tr td:nth-child(4) {
	color: #ffe9be;
	span{
		font-family: 'anime-900';
		font-size: 21px;	
	}
}

main .container-rank table.rank-table tbody tr td:nth-child(7) img {
	width: 35px;
}




main .container-rank table.rank-table tbody tr td:nth-child(5) span,
main .container-rank table.rank-table tbody tr td:nth-child(6) span{
	font-family: 'anime-900', sans-serif;
	font-size: 21px;
}

main .container-rank table.rank-table tbody tr td.rank-status.is-vip{
	color: #b2ff79;
}


main .container-rank .viewmore-content{
    /* --- TUS PROPIEDADES ORIGINALES --- */
    width: 100%;
    max-width: 210px;
    transform: skewX(-15deg);
    border: 1px solid #ff0000;
    min-height: 40px;
    background: linear-gradient(240deg, rgb(161 7 0), transparent) rgb(209 68 0);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 500ms ease-in;
    margin: 20px auto 0px auto;

    /* --- PROPIEDADES NUEVAS REQUERIDAS --- */
    position: relative;  /* Necesario para posicionar el reflejo adentro */
    overflow: hidden;   /* Necesario para ocultar el reflejo cuando está 'fuera' */
}

main .container-rank .viewmore-content::before {
    content: '';
    position: absolute;
    top: 0;
    /* Empezamos totalmente a la izquierda, oculto */
    left: -40%; 
    width: 80px; /* Ancho de la franja de brillo */
    height: 100%;
    
    /* El degradado blanco brillante y transparente */
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.7) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    
    /* Contrarrestamos el skew del padre para un brillo elegante */
    transform: skewX(15deg); 
    
    /* Definimos la velocidad de la animación */
    transition: left 600ms ease-in-out;
}
main .container-rank .viewmore-content:hover{
  /* Tu hover original de color */
  background-color: rgb(241 79 0);
}

/* --- NUEVO: Activación de la animación del brillo --- */
main .container-rank .viewmore-content:hover::before {
    /* Movemos el brillo hasta el final derecho */
    left: 100%; 
}

main .container-rank .viewmore-content a{
	width: 100%;
	height: 100%;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'anime-700';
	transform: skewX(8deg);
	text-transform: uppercase;
	font-size:18px;
	text-decoration: none;
	text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
}

/* Home ranking responsive */
@media (max-width: 991px){
	main .ranking-wraper{
		flex-direction: column;
		min-height: auto;
	}

	main .ranking-wraper .promo-ranking{
		display: none;
	}

	main .ranking-wraper .section-ranking .menu-ranking{
		flex-wrap: wrap;
		padding-inline: 16px;
	}

	main .ranking-wraper .section-ranking .menu-ranking button{
		flex: 1 1 180px;
		max-width: none;
		font-size: 16px;
	}

	main .ranking-wraper .container-rank{
		padding-inline: 16px;
	}

	main .ranking-wraper .content-ranking .header-title h3{
		font-size: 1.8rem;
	}
}

@media (max-width: 500px){
	main .ranking-wraper .rank-table-scroll{
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: #ffb400 #1a120c;
		margin-inline: -4px;
		padding-bottom: 4px;
	}

	main .ranking-wraper .rank-table-scroll::-webkit-scrollbar{
		height: 8px;
	}

	main .ranking-wraper .rank-table-scroll::-webkit-scrollbar-track{
		background: #1a120c;
	}

	main .ranking-wraper .rank-table-scroll::-webkit-scrollbar-thumb{
		background: #ffb400;
		border-radius: 4px;
	}

	main .ranking-wraper .rank-table-scroll .rank-table{
		min-width: 660px;
	}

	main .ranking-wraper .container-rank{
		padding-inline: 12px;
	}

	main .ranking-wraper .container-rank table.rank-table tbody tr td{
		font-size: 17px;
		padding-block: 12px;
		white-space: nowrap;
	}

	main .ranking-wraper .container-rank table.rank-table tbody tr td:nth-child(1){
		font-size: 22px;
	}

	main .ranking-wraper .container-rank table.rank-table tbody tr td:nth-child(1) img{
		width: 46px;
	}

	main .ranking-wraper .container-rank table.rank-table tbody tr td:nth-child(5) span,
	main .ranking-wraper .container-rank table.rank-table tbody tr td:nth-child(6) span{
		font-size: 18px;
	}

	main .ranking-wraper .section-ranking .menu-ranking{
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding-inline: 12px;
	}

	main .ranking-wraper .section-ranking .menu-ranking button{
		flex: 0 0 auto;
		align-self: stretch;
		max-width: 100%;
		width: 100%;
		height: auto;
		min-height: unset;
		font-size: 15px;
		padding: 10px 12px;
		transform: none;
	}

	main .ranking-wraper .section-ranking .menu-ranking button.is-active{
		transform: none;
	}

	main .ranking-wraper .section-ranking .menu-ranking button span{
		display: inline-block;
		transform: none;
	}
}

/* Ranking general (/ranking) */
main section.center-container.ranking-general-page{
    position: relative;
    background: linear-gradient(
        360deg,
        rgb(255, 140, 0) 23%,
        rgb(255, 198, 1) 100%
    );
}

main section.center-container.ranking-general-page::before{
    content: '';
    position: absolute;
    inset: 0;

    background-image: url('../img/fondo.webp');
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 100% auto;

    pointer-events: none;
}

main .ranking-general-page .ranking-general-wraper{
	width: 100%;
	min-height: 560px;
	border-width: 7px 5px 5px 5px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 1.0);
	background: #ffb400;
	display: flex;
	gap: 0;
	align-items: stretch;
}

main .ranking-general-page .ranking-general-main{
	flex: 1;
	min-width: 0;
}

main .ranking-general-page .ranking-general-sidebar{
	flex: 0 0 360px;
	max-width: 360px;
	border-left: 5px solid var(--black);
}

main .ranking-general-page .ranking-general-main .content-ranking{
	background: var(--black);
	height: 100%;
}

main .ranking-general-page .ranking-general-sidebar .content-new{
	background: #231410;
	height: 100%;
}

main .ranking-general-page .content-ranking .header-title{
	min-height: 70px;
	width: 100%;
	font-family: 'anime-800';
	color: var(--black);
	background: linear-gradient(280deg, rgb(255 122 0) 0%, rgb(251 186 2) 100%);
	clip-path: polygon(0 0, 100% 0%, 100% 89%, 0% 100%);
	display: flex;
	align-items: center;
	padding-block: 10px;
	padding-inline: 25px;
	border-right: 5px solid var(--black);
	border-top: 2px solid yellow;

	h3{
		font-size: 2.4rem;
		margin: 0;
	}
}

main .ranking-general-page .ranking-general-sidebar .header-title{
	min-height: 70px;
	width: 100%;
	font-family: 'anime-700';
	color: var(--black);
	background: linear-gradient(280deg, rgb(255 122 0) 0%, rgb(255 172 0) 100%);
	clip-path: polygon(0 0, 100% 0%, 100% 89%, 0% 100%);
	display: flex;
	align-items: center;
	padding-block: 10px;
	padding-inline: 25px;
	border-top: 2px solid yellow;
	border-bottom: 10px solid var(--black);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.65);

	h3{
		font-size: 1.8rem;
		margin: 0;
	}
}

main .ranking-general-page .section-ranking{
	margin-top: 13px;
	padding-bottom: 24px;
}

main .ranking-general-page .section-ranking .menu-ranking{
	display: flex;
	width: 100%;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
	padding-inline: 24px;
}

main .ranking-general-page .section-ranking .menu-ranking button{
	padding: 8px 15px;
	width: 100%;
	max-width: 250px;
	transform: skewX(-5deg);
	border: none;
	background: radial-gradient(circle, rgba(133, 98, 64, 1) 3%, rgba(74, 59, 41, 1) 96%);
	color: #ffebcd;
	font-family: 'anime-700';
	font-size: 18px;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
	border-bottom: 2px solid #8b7255;
	cursor: pointer;
	box-shadow:
		0 4px 8px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 220, 160, 0.1);
}

main .ranking-general-page .section-ranking .menu-ranking button.is-active{
	background: linear-gradient(240deg, rgb(161 7 0), transparent) rgb(209 68 0);
	border-bottom-color: #ffb400;
	box-shadow:
		0 6px 14px rgba(0, 0, 0, 0.5),
		0 0 12px rgba(209, 68, 0, 0.3),
		inset 0 1px 0 rgba(255, 140, 60, 0.25);
}

main .ranking-general-page .section-ranking .menu-ranking button:focus,
main .ranking-general-page .section-ranking .menu-ranking button:focus-visible,
main .ranking-general-page .section-ranking .menu-ranking button:active{
	outline: none;
	box-shadow: none;
	border: none;
	border-bottom: 2px solid #8b7255;
}

main .ranking-general-page .section-ranking .menu-ranking button.is-active:focus,
main .ranking-general-page .section-ranking .menu-ranking button.is-active:focus-visible,
main .ranking-general-page .section-ranking .menu-ranking button.is-active:active{
	border-bottom-color: #ffb400;
}

main .ranking-general-page .ranking-general-updated{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin: 10px 30px 0;
	font-family: 'anime-700', sans-serif;
	font-size: 13px;
	color: #ffb400;
	letter-spacing: 0.5px;
}

main .ranking-general-page .ranking-general-motivation{
	margin: 18px 30px 0;
	text-align: center;
	font-family: 'anime-700', sans-serif;
	font-size: 17px;
	color: #d4b896;
}

main .ranking-general-page .container-rank{
	display: flex;
	flex-direction: column;
}

main .ranking-general-page .ranking-general-footer{
	width: 100%;
	margin-top: 8px;
	padding-bottom: 20px;
}

main .ranking-general-page .ranking-general-pagination{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 18px 0 0;
	width: 100%;
	position: static;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

main .ranking-general-page .ranking-general-pagination::-webkit-scrollbar{
	display: none;
}

main .ranking-general-page .ranking-general-pagination button{
	width: auto;
	max-width: none;
	flex: 0 0 auto;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 2px solid #ffb400;
	background: transparent;
	color: #ffb400;
	font-family: 'anime-900', sans-serif;
	font-size: 16px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, box-shadow 0.2s;
	box-shadow:
		0 3px 6px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 200, 0, 0.08);
	transform: none;
}

main .ranking-general-page .ranking-general-pagination button:hover,
main .ranking-general-page .ranking-general-pagination button.is-active{
	background: #ffb400;
	color: #111;
	box-shadow:
		0 5px 12px rgba(0, 0, 0, 0.45),
		0 0 10px rgba(255, 180, 0, 0.25);
}

main .ranking-general-page .ranking-general-pagination button:focus,
main .ranking-general-page .ranking-general-pagination button:focus-visible,
main .ranking-general-page .ranking-general-pagination button:active{
	outline: none;
	box-shadow: none;
}

main .ranking-general-page .ranking-general-pagination button:disabled{
	opacity: 0.45;
	cursor: default;
}

main .ranking-general-page .ranking-general-pagination .pagination-ellipsis{
	color: #ffb400;
	font-family: 'anime-900', sans-serif;
	font-size: 18px;
	padding: 0 4px;
	user-select: none;
}

main .ranking-general-page .rank-panel tbody tr.is-hidden{
	display: none;
}

main .ranking-general-page .rank-table-scroll{
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #ffb400 #1a120c;
}

main .ranking-general-page .rank-table-scroll::-webkit-scrollbar{
	height: 8px;
}

main .ranking-general-page .rank-table-scroll::-webkit-scrollbar-track{
	background: #1a120c;
}

main .ranking-general-page .rank-table-scroll::-webkit-scrollbar-thumb{
	background: #ffb400;
	border-radius: 4px;
}

main .ranking-general-page .rank-table-scroll .rank-table{
	min-width: 740px;
}

main .ranking-general-page .container-rank table.rank-table thead{
	background: linear-gradient(180deg, #2a1f14 0%, #1a120c 100%);
	box-shadow:
		0 4px 10px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 180, 0, 0.1);
}

main .ranking-general-page .container-rank table.rank-table thead th{
	font-family: 'anime-700', sans-serif;
	font-size: 17px;
	color: #ffe9be;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-weight: normal;
	white-space: nowrap;
	text-align: left;
	padding-block: 15px;
}

main .ranking-general-page .container-rank table.rank-table thead th:nth-child(1){
	padding: 0 10px;
	text-align: center;
}

main .ranking-general-page .container-rank table.rank-table thead th:nth-child(7){
	width: 56px;
}

main .ranking-general-page .ranking-rewards-list{
	padding: 18px 16px 24px;
}

main .ranking-general-page .ranking-reward-item{
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
	padding: 12px;
	background:#18100e;
	border-radius: 2px;
	border: 1px solid #37240e;
}

main .ranking-general-page .ranking-reward-item__img{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

main .ranking-general-page .ranking-reward-item__img img{
	width: auto;
	height: auto;
	max-width: none;
	display: block;
}

main .ranking-general-page .ranking-reward-item__body{
	flex: 1;
}

main .ranking-general-page .ranking-reward-item__place{
	display: block;
	font-family: 'anime-940', sans-serif;
	font-size: 17px;
	margin-bottom: 6px;
	font-weight: bold;
}

main .ranking-general-page .ranking-reward-item__body p{
	margin: 0 0 4px;
	font-family: 'anime-940', sans-serif;
	font-size: 14px;
	color: #e8d5b5;
	line-height: 1.4;
}

main .ranking-general-page .ranking-reward-item__body p:last-child{
	margin-bottom: 0;
}

/*main .ranking-general-page .ranking-reward-item--gold{
	box-shadow:
		0 8px 18px rgba(0, 0, 0, 0.7),
		0 3px 6px rgba(0, 0, 0, 0.5),
		0 0 18px rgba(255, 200, 0, 0.15),
		inset 0 1px 0 rgba(255, 215, 0, 0.2),
		inset 0 -4px 10px rgba(0, 0, 0, 0.4);
}*/

/*main .ranking-general-page .ranking-reward-item--silver{
	box-shadow:
		0 8px 18px rgba(0, 0, 0, 0.7),
		0 3px 6px rgba(0, 0, 0, 0.5),
		0 0 16px rgba(140, 190, 220, 0.12),
		inset 0 1px 0 rgba(180, 210, 230, 0.18),
		inset 0 -4px 10px rgba(0, 0, 0, 0.4);
}*/

/*main .ranking-general-page .ranking-reward-item--bronze{
	box-shadow:
		0 8px 18px rgba(0, 0, 0, 0.7),
		0 3px 6px rgba(0, 0, 0, 0.5),
		0 0 14px rgba(205, 127, 50, 0.14),
		inset 0 1px 0 rgba(205, 140, 70, 0.18),
		inset 0 -4px 10px rgba(0, 0, 0, 0.4);
}*/

main .ranking-general-page .ranking-reward-item--gold .ranking-reward-item__place{
	color: #ffd700;
}

main .ranking-general-page .ranking-reward-item--silver .ranking-reward-item__place{
	color: #c0d8e8;
}

main .ranking-general-page .ranking-reward-item--bronze .ranking-reward-item__place{
	color: #cd7f32;
}

main .ranking-general-page .ranking-rewards-note{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	margin: 4px 0 0;
	padding: 12px;
	border: none;
	background: none;
	box-shadow: none;
}

main .ranking-general-page .ranking-rewards-note i{
	flex: 0 0 auto;
	margin-top: 3px;
	font-size: 20px;
	color: #ffb400;
}

main .ranking-general-page .ranking-rewards-note__text{
	flex: 1;
	min-width: 0;
}

main .ranking-general-page .ranking-rewards-note__text p{
	margin: 0 0 8px;
	font-family: 'anime-930', sans-serif;
	font-size: 14px;

	color: #e8d5b5;
}

main .ranking-general-page .ranking-rewards-note__text p:last-child{
	margin-bottom: 0;
}

@media (max-width: 991px){
	main .ranking-general-page .ranking-general-wraper{
		flex-direction: column;
		min-height: auto;
	}

	main .ranking-general-page .ranking-general-sidebar{
		flex: 1;
		max-width: 100%;
		width: 100%;
		border-left: none;
		border-top: 5px solid var(--black);
	}

	main .ranking-general-page .section-ranking .menu-ranking{
		flex-wrap: wrap;
		padding-inline: 16px;
	}

	main .ranking-general-page .section-ranking .menu-ranking button{
		flex: 1 1 180px;
		max-width: none;
		font-size: 16px;
	}

	main .ranking-general-page .container-rank{
		padding-inline: 16px;
	}

	main .ranking-general-page .ranking-general-updated{
		margin-inline: 16px;
	}

	main .ranking-general-page .ranking-general-footer{
		padding-inline: 16px;
	}

	main .ranking-general-page .ranking-general-motivation{
		margin-inline: 0;
	}

	main .ranking-general-page .ranking-general-pagination{
		margin-inline: 0;
		justify-content: flex-start;
	}

	main .ranking-general-page .content-ranking .header-title h3{
		font-size: 2rem;
	}

	main .ranking-general-page .ranking-general-sidebar .header-title h3{
		font-size: 1.6rem;
	}
}

@media (max-width: 767px){
	main .ranking-general-page .ranking-general-wraper{
		border-width: 5px 4px 4px 4px;
	}

	main .ranking-general-page .rank-table-scroll .rank-table{
		min-width: 700px;
	}

	main .ranking-general-page .container-rank table.rank-table thead th{
		font-size: 15px;
		padding-block: 12px;
	}

	main .ranking-general-page .container-rank table.rank-table tbody tr td{
		font-size: 18px;
		padding-block: 12px;
	}

	main .ranking-general-page .container-rank table.rank-table tbody tr td:nth-child(1){
		font-size: 22px;
	}

	main .ranking-general-page .ranking-reward-item{
		align-items: flex-start;
	}

	main .ranking-general-page .ranking-reward-item__body p,
	main .ranking-general-page .ranking-rewards-note__text p{
		font-size: 13px;
	}
}

@media (max-width: 575px){
	main .ranking-general-page .section-ranking .menu-ranking{
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	main .ranking-general-page .section-ranking .menu-ranking button{
		flex: 0 0 auto;
		align-self: stretch;
		max-width: 100%;
		width: 100%;
		height: auto;
		min-height: unset;
		font-size: 15px;
		padding: 10px 12px;
		transform: none;
	}

	main .ranking-general-page .section-ranking .menu-ranking button span{
		display: inline-block;
		transform: none;
	}

	main .ranking-general-page .ranking-general-updated{
		justify-content: center;
		font-size: 12px;
		flex-wrap: wrap;
		text-align: center;
	}

	main .ranking-general-page .container-rank{
		padding-inline: 12px;
	}

	main .ranking-general-page .rank-table-scroll{
		margin-inline: -4px;
		padding-bottom: 4px;
	}

	main .ranking-general-page .rank-table-scroll .rank-table{
		min-width: 660px;
	}

	main .ranking-general-page .container-rank table.rank-table thead th{
		font-size: 14px;
	}

	main .ranking-general-page .container-rank table.rank-table tbody tr td{
		font-size: 17px;
	}

	main .ranking-general-page .container-rank table.rank-table tbody tr td:nth-child(1) img{
		width: 46px;
	}

	main .ranking-general-page .ranking-general-footer{
		padding-inline: 12px;
	}

	main .ranking-general-page .ranking-general-motivation{
		font-size: 15px;
		margin-inline: 0;
	}

	main .ranking-general-page .ranking-general-pagination{
		gap: 6px;
		margin-inline: 0;
		padding-bottom: 2px;
	}

	main .ranking-general-page .ranking-general-pagination button{
		width: auto;
		max-width: none;
		flex: 0 0 auto;
		min-width: 32px;
		height: 32px;
		font-size: 14px;
		padding: 0 8px;
	}

	main .ranking-general-page .content-ranking .header-title,
	main .ranking-general-page .ranking-general-sidebar .header-title{
		min-height: 58px;
		padding-inline: 16px;
	}

	main .ranking-general-page .content-ranking .header-title h3{
		font-size: 1.7rem;
	}

	main .ranking-general-page .ranking-general-sidebar .header-title h3{
		font-size: 1.4rem;
	}

	main .ranking-general-page .ranking-rewards-list{
		padding: 14px 12px 20px;
	}

	main .ranking-general-page .ranking-reward-item{
		padding: 10px;
		gap: 10px;
	}

	main .ranking-general-page .ranking-rewards-note{
		padding: 10px;
	}
}

/* Home - Personajes */
main .characters-wraper{
	width: 100%;
	border-width: 7px 5px 5px 5px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 1);
	background: #ffb400;
}

main .characters-wraper .content-characters{
	background: var(--black);
}

main .characters-wraper .header-title{
	min-height: 70px;
	width: 100%;
	font-family: 'anime-800';
	color: var(--black);
	background:linear-gradient(280deg, rgb(255 177 0) 0%, rgb(251 186 2) 100%);
	clip-path: polygon(0 0, 100% 0%, 100% 89%, 0% 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 10px;
	padding-inline: 25px;
	border-left: 5px solid var(--black);
	border-top: 2px solid yellow;
}

main .characters-wraper .header-title h3{
	font-size: 2.4rem;
	margin: 0;
	font-style: italic;
}

main .characters-wraper .section-characters{
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 18px 10px 22px;
}

main .characters-wraper .characters-swiper{
	flex: 1;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	padding-top: 8px;
	padding-bottom: 6px;
	box-sizing: border-box;
}

main .characters-wraper .characters-swiper .swiper-wrapper{
	align-items: stretch;
}

main .characters-wraper .characters-swiper .swiper-slide{
	height: auto;
	box-sizing: border-box;
	padding-top: 4px;
}

main .characters-wraper .character-card{
	position: relative;
	width: 100%;
	max-width: 100%;
	border: 1px solid currentColor;
	background: #111;
	overflow: hidden;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.85);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

main .characters-wraper .characters-nav{
	flex: 0 0 34px;
	width: 34px;
	height: 52px;
	border: none;
	background: transparent;
	color: #ffb400;
	font-family: 'anime-800';
	font-size: 2.6rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: transform 0.2s ease, color 0.2s ease;
}

main .characters-wraper .characters-nav:hover{
	color: #ffd000;
	transform: scale(1.08);
}

main .characters-wraper .characters-nav:focus,
main .characters-wraper .characters-nav:focus-visible{
	outline: none;
}

main .characters-wraper .character-card:hover{
	transform: translateY(-4px);
	box-shadow: 6px 8px 0 rgba(0, 0, 0, 0.9);
}

main .characters-wraper .character-card-image{
	aspect-ratio: 3 / 4;
	width: 100%;
	max-height: 320px;
	background: #1a1a1a;
	overflow: hidden;
}

main .characters-wraper .character-card-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

main .characters-wraper .character-card-info{
	position: relative;
	min-height: 72px;
	padding: 10px 38px 10px 12px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.92) 18%);
	margin-top: -42px;
}

main .characters-wraper .character-card-info h4{
	margin: 0 0 2px;
	font-family: 'anime-920', sans-serif;
	font-size: 1.55rem;
	line-height: 1;
	font-style: italic;
	color: currentColor;
	text-shadow: 1px 1px 0 #000;
}

main .characters-wraper .character-card-info .character-role{
	display: block;
	font-family: 'anime-700';
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: #fff;
	text-transform: uppercase;
}

main .characters-wraper .character-icon{
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 18px;
	height: 18px;
	background: currentColor;
}

main .characters-wraper .character-icon.icon-pentagon{
	clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

main .characters-wraper .character-icon.icon-star{
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

main .characters-wraper .character-icon.icon-diamond{
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

main .characters-wraper .character-icon.icon-cross{
	clip-path: polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%);
}

main .characters-wraper .char-theme-red{ color: #ff2a2a; }
main .characters-wraper .char-theme-orange{ color: #ff7a00; }
main .characters-wraper .char-theme-lime{ color: #b8ff2e; }
main .characters-wraper .char-theme-green{ color: #39d66b; }
main .characters-wraper .char-theme-yellow{ color: #ffd400; }
main .characters-wraper .char-theme-purple{ color: #b44dff; }
main .characters-wraper .char-theme-violet{ color: #9b5cff; }
main .characters-wraper .char-theme-blue{ color: #3d8bff; }
main .characters-wraper .char-theme-cyan{ color: #42d9ff; }
main .characters-wraper .char-theme-sky{ color: #7ecbff; }

@media (max-width: 767px){
	main .news-wraper .header-title,
	main .ranking-wraper .header-title,
	main .characters-wraper .header-title{
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		min-height: 52px;
		padding-block: 0;
		padding-inline: 16px;
	}

	main .news-wraper .header-title h3,
	main .ranking-wraper .header-title h3,
	main .ranking-wraper .content-ranking .header-title h3,
	main .characters-wraper .header-title h3{
		font-size: 1.8rem;
		line-height: 1;
		margin: 0;
	}

	main .news-wraper .header-title .home-header-aside,
	main .ranking-wraper .header-title .home-header-aside,
	main .characters-wraper .header-title .home-header-aside{
		display: none !important;
	}

	main .characters-wraper .section-characters{
		padding-inline: 4px;
	}

	main .characters-wraper .characters-nav{
		flex-basis: 28px;
		width: 28px;
		font-size: 2.1rem;
	}
}

/* Home - Castle Land evento */
main .castleland-wraper{
	width: 100%;
	margin-bottom: 12px;
	border: 7px solid var(--black);
	background: #000;
	box-sizing: border-box;
}

main .castleland-stage{
	position: relative;
	height: 320px;
	overflow: hidden;
}

main .castleland-body{
	position: relative;
	display: flex;
	align-items: stretch;
	height: 100%;
	box-sizing: border-box;
}

main .castleland-visual{
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	background: #000;
}

main .castleland-visual::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.92) 0%,
		rgba(0, 0, 0, 0.55) 28%,
		rgba(0, 0, 0, 0.15) 52%,
		transparent 68%
	);
	pointer-events: none;
}

main .castleland-bg{
	position: absolute;
	top: 0;
	right: 0;
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: right center;
	display: block;
	pointer-events: none;
}

main .castleland-header-title{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: auto;
	max-width: calc(100% - 20px);
	min-height: 58px;
	font-family: 'anime-800';
	color: var(--black);
	background: linear-gradient(280deg, rgb(255 177 0) 0%, rgb(251 186 2) 100%);
	clip-path: polygon(0 0, 100% 0%, 96% 100%, 0% 100%);
	display: flex;
	align-items: center;
	padding-block: 10px;
	padding-inline: 22px 34px;
	border-left: 5px solid var(--black);
	border-top: 2px solid yellow;
	box-sizing: border-box;
}

main .castleland-header-title h3{
	margin: 0;
	font-family: inherit;
	font-size: 2.1rem;
	font-style: italic;
	text-transform: uppercase;
	line-height: 1.1;
}

main .castleland-countdown-block{
	position: absolute;
	top: 50%;
	left: 108px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 12px;
	width: fit-content;
	transform: translateY(-42%);
}

main .castleland-countdown-label{
	margin: 0;
	font-family: 'anime-920', sans-serif;
	font-size: 1.55rem;
	font-style: italic;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.03em;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

main .castleland-countdown{
	display: flex;
	align-items: stretch;
	gap: 7px;
}

main .castleland-time-box{
	flex: 0 0 86px;
	width: 86px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: skewX(-12deg);
	transform-origin: center center;
}

main .castleland-time-value{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 76px;
	padding: 10px 10px 8px;
	background: #000;
}

main .castleland-time-label{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 6px 8px;
	background: #3a3a3a;
}

main .castleland-time-value strong{
	font-family: 'anime-950', sans-serif;
	font-size: 2.85rem;
	line-height: 1;
	color: #fff;
	transform: skewX(12deg);
	display: block;
}

main .castleland-time-label span{
	font-family: 'anime-920', sans-serif;
	font-size: 0.78rem;
	line-height: 1;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	transform: skewX(12deg);
	display: block;
}

main .castleland-clan-panel{
	flex: 0 0 340px;
	width: 340px;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px 22px;
	border: none;
	background-color: #262626;
	background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 10px), linear-gradient(180deg, #212121 0%, #000000 100%);
	box-sizing: border-box;
	text-align: center;
	z-index: 2;
}

main .castleland-clan-name{
	margin: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
	font-family: 'anime-950', sans-serif;
	font-size: 2rem;
	font-style: italic;
	text-transform: uppercase;
	line-height: 1.05;
	white-space: nowrap;
}

main .castleland-clan-tag{
	font-family: inherit;
	font-size: inherit;
	color: #fff;
	letter-spacing: 0.02em;
}

main .castleland-clan-value{
	font-family: inherit;
	font-size: inherit;
	color: #ffb400;
	text-shadow: 0 0 18px rgba(255, 180, 0, 0.25);
}

main .castleland-clan-main{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 12px;
	width: 100%;
	flex: 0 0 auto;
}

main .castleland-logo-ref{
	width: 100%;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	border: none;
	background: transparent;
	box-sizing: border-box;
}

main .castleland-logo-ref img{
	width: auto;
	height: 44px;
	max-width: 100%;
	object-fit: contain;
}

main .castleland-score{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
}

main .castleland-score-label{
	font-family: 'anime-920', sans-serif;
	font-size: 0.82rem;
	color: #d0d0d0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

main .castleland-score-value{
	font-family: 'anime-950', sans-serif;
	font-size: 2.35rem;
	line-height: 1;
	color: #fff;
}

main .castleland-score-value small{
	font-family: 'anime-950', sans-serif;
	font-size: 1.35rem;
	color: #ffb400;
}

main .castleland-btn-rank{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	min-width: 220px;
	width: 100%;
	max-width: 260px;
	padding: 12px 20px;
	background: linear-gradient(180deg, #ffe833 0%, #ffc800 52%, #ffae00 100%);
	border: 3px solid var(--black);
	color: var(--black);
	font-family: 'anime-950', sans-serif;
	font-size: 1rem;
	font-style: italic;
	text-decoration: none;
	text-transform: uppercase;
	transform: skewX(-8deg);
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
	transition: filter 0.2s ease, transform 0.2s ease;
}

main .castleland-btn-rank:hover{
	filter: brightness(1.06);
	transform: skewX(-8deg) translateY(-1px);
	color: var(--black);
}

@media (max-width: 991px){
	main .castleland-stage{
		height: auto;
	}

	main .castleland-body{
		flex-direction: column;
		min-height: 320px;
	}

	main .castleland-visual{
		min-height: 320px;
	}

	main .castleland-bg{
		inset: 0;
		top: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		transform: none;
		object-fit: cover;
		object-position: center center;
	}

	main .castleland-countdown-block{
		left: 50%;
		right: auto;
		width: calc(100% - 40px);
		max-width: 400px;
		transform: translate(-50%, -42%);
		align-items: stretch;
	}

	main .castleland-time-box{
		transform: none;
	}

	main .castleland-time-value strong,
	main .castleland-time-label span{
		transform: none;
	}

	main .castleland-clan-panel{
		width: 100%;
		flex: none;
		height: auto;
		min-height: 280px;
		padding: 28px 20px 24px;
		border: none;
	}
}

@media (max-width: 767px){
	main .castleland-header-title h3{
		font-size: 1.5rem;
	}

	main .castleland-header-title{
		min-height: 48px;
		padding-inline: 16px 24px;
	}

	main .castleland-visual{
		min-height: 300px;
	}

	main .castleland-countdown-block{
		left: 50%;
		right: auto;
		width: calc(100% - 32px);
		max-width: 360px;
		transform: translate(-50%, -40%);
		align-items: stretch;
	}

	main .castleland-countdown-label{
		font-size: 1.2rem;
		text-align: center;
	}

	main .castleland-countdown{
		width: 100%;
		max-width: none;
		gap: 6px;
	}

	main .castleland-time-box{
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		transform: none;
	}

	main .castleland-time-value strong,
	main .castleland-time-label span{
		transform: none;
	}

	main .castleland-time-value strong{
		font-size: 2.2rem;
	}

	main .castleland-clan-value{
		font-size: 1.6rem;
	}

	main .castleland-score-value{
		font-size: 1.9rem;
	}
}

/* Home - separacion entre bloques (personajes / features / video) */
main .home-block-gap{
	padding-top: 12px;
}

main .characters-wraper + .home-features-wraper{
	margin-top: 0;
	border-top-width: 0;
}

/* Home - Accion sin limites */
main .home-features-wraper{
	width: 100%;
	margin-top: 0;
	border: 5px solid rgba(0, 0, 0, 1);
	background: #ffb400;
	box-sizing: border-box;
}

main .home-features-strip{
	width: 100%;
	padding: 18px 24px 26px;
	background:
		radial-gradient(circle at 20% 20%, rgba(0, 0, 0, 0.07) 0 2px, transparent 3px) 0 0 / 18px 18px,
		linear-gradient(180deg, #ffb400 0%, #ff9a00 100%);
	box-sizing: border-box;
}

main .home-features-title-wrap{
	display: inline-block;
	padding: 8px 22px;
	background: linear-gradient(180deg, #ff3b30 0%, #b80000 100%);
	border: 3px solid var(--black);
	/*box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.85);*/
	transform: skewX(-8deg);
}

main .home-features-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

main .home-features-head-line{
	flex: 1;
	height: 1px;
	min-width: 12px;
	background: var(--black);
	align-self: center;
}

main .home-features-phrase{
	flex: 0 1 auto;
	max-width: 42%;
	margin: 0;
	padding: 0 8px;
	font-family: 'anime-950', sans-serif;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--black);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-align: right;
}

main .home-features-title{
	margin: 0;
	font-family: 'anime-950', sans-serif;
	font-size: 2rem;
	color: #fff;
	text-transform: uppercase;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
}

main .home-features-title span{
	display: inline-block;
	transform: skewX(8deg);
}

main .home-features-grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px 22px;
}

main .home-feature-item{
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
}

main .home-feature-icon{
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--black);
	font-size: 2.35rem;
	line-height: 1;
}

main .home-feature-text h4{
	margin: 0 0 6px;
	font-family: 'anime-700', sans-serif;
	font-size: 1.5rem;
	line-height: 1.15;
	color: var(--black);
	text-transform: uppercase;
}

main .home-feature-text p{
	margin: 0;
	font-family: 'anime-940', sans-serif;
	font-size: 1.1rem;
	line-height: 1.35;
	color: #2b1400;
	max-width: 15.5em;
}

@media (max-width: 991px){
	main .home-features-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 18px;
	}

	main .home-features-title{
		font-size: 2.1rem;
	}

	main .home-features-title-wrap{
		padding: 7px 18px;
	}

	main .home-features-phrase{
		font-size: 1.15rem;
		text-align: right;
	}
}

@media (max-width: 575px){
	main .home-features-strip{
		padding: 18px 16px 22px;
	}

	main .home-features-head{
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 14px;
	}

	main .home-features-head-line{
		display: none;
	}

	main .home-features-phrase{
		padding: 0;
		max-width: none;
		font-size: 1rem;
		text-align: left;
	}

	main .home-features-grid{
		grid-template-columns: 1fr;
		gap: 16px;
	}

	main .home-features-title{
		font-size: 1.75rem;
	}

	main .home-features-title-wrap{
		padding: 6px 14px;
	}

	main .home-feature-text h4{
		font-size: 1.08rem;
	}
}

/* Home - Video destacado */
main .featured-video-wraper{
	width: 100%;
	display: flex;
	border-width: 7px 5px 5px 5px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 1);
	background: var(--black);
	overflow: hidden;
}

main .featured-video-player-col{
	flex: 1.45;
	min-width: 0;
	padding: 18px;
	background:
		radial-gradient(circle at 20% 20%, rgba(0, 0, 0, 0.12) 0 2px, transparent 3px) 0 0 / 18px 18px,
		linear-gradient(180deg, #ffb400 0%, #ff9a00 100%);
	border-right: 5px solid var(--black);
}

main .featured-video-player{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #111;
	border: 4px solid var(--black);
	box-shadow: 6px 4px 0 rgba(0, 0, 0, 0.85);
	overflow: hidden;
}

main .featured-video-poster{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

main .featured-video-element{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: none;
	background: #000;
	object-fit: contain;
}

main .featured-video-player.is-playing .featured-video-element{
	display: block;
}

main .featured-video-play{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 88px;
	height: 62px;
	border: none;
	border-radius: 14px;
	background: linear-gradient(180deg, #ff3b30 0%, #c40000 100%);
/*	box-shadow:
		0 0 0 3px rgba(0, 0, 0, 0.85),
		0 8px 18px rgba(0, 0, 0, 0.45);*/
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

main .featured-video-play:hover{
	transform: translate(-50%, -50%) scale(1.06);
	box-shadow:
		0 0 0 3px rgba(0, 0, 0, 0.85),
		0 10px 22px rgba(0, 0, 0, 0.55);
}

main .featured-video-play:focus,
main .featured-video-play:focus-visible{
	outline: none;
}

main .featured-video-play-icon{
	display: block;
	width: 0;
	height: 0;
	margin: 0 auto;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-left: 24px solid #fff;
	transform: translateX(4px);
}

main .featured-video-brandbar{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 10px 14px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.88) 100%);
	font-family: 'anime-700', sans-serif;
	font-size: 0.95rem;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

main .featured-video-brandbar i{
	color: #ff0000;
	font-size: 1.35rem;
}

main .featured-video-info{
	flex: 1;
	min-width: 280px;
	padding: 15px 26px 28px 24px;
	background: var(--black);
	display: flex;
	flex-direction: column;
}

main .featured-video-badge{
	display: inline-block;
	padding: 12px 20px;
	background: linear-gradient(180deg, #ff3b30 0%, #b80000 100%);
	color: #fff;
	font-family: 'anime-700', sans-serif;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.75);
	transform: skewX(-8deg);


}

main .featured-video-title{
	margin: 16px 0 12px;
	font-family: 'anime-920', sans-serif;
	line-height: 1;
}

main .featured-video-title-main{
	display: block;
	font-size: 3.6rem;
	color: #fff;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.85);
	font-style: italic;
}

main .featured-video-title-sub{
	display: block;
	margin-top: 8px;
	font-size: 3.4rem;
	color: #ffd000;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.85);
	font-style: italic;
}

main .featured-video-channel{
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-family: 'anime-700', sans-serif;
	font-size: 0.95rem;
	color: #fff;
}

main .featured-video-channel i{
	color: #ff0000;
	font-size: 1.1rem;
}

main .featured-video-desc{
	margin: 0;
	font-family: 'anime-600', sans-serif;
	font-size: 1rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.92);
	max-width: 420px;
}

main .featured-video-actions{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-top: 18px;
}

main .featured-video-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border: 3px solid var(--black);
	font-family: 'anime-950', sans-serif;
	font-size: 1.5rem;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.85);
}

main .featured-video-btn-channel{
	background: linear-gradient(180deg, #ffb700 0%, #ffb400 100%);
	color: var(--black);
	transform: skewX(-8deg);
	min-width: 240px;
}

main .featured-video-btn-channel .featured-video-btn-inner{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transform: skewX(8deg);
}

main .featured-video-btn-channel .featured-video-btn-inner i{
	color: #ff0000;
}

main .featured-video-btn-channel:hover{
	transform: skewX(-8deg) translateY(-2px);
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.9);
	background: linear-gradient(180deg, #fff566 0%, #ffc107 100%);
}

main .featured-video-share-link{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	border: none;
	background: transparent;
	color: #fff;
	font-family: 'anime-800', sans-serif;
	font-size: 1rem;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.2s ease, transform 0.2s ease;
}

main .featured-video-share-link i{
	font-size: 1.05rem;
}

main .featured-video-share-link:hover{
	color: #ffb400;
	transform: translateX(3px);
}

main .featured-video-btn:focus,
main .featured-video-btn:focus-visible,
main .featured-video-share-link:focus,
main .featured-video-share-link:focus-visible{
	outline: none;
}

@media (max-width: 991px){
	main .featured-video-wraper{
		flex-direction: column;
	}

	main .featured-video-player-col{
		border-right: none;
		border-bottom: 5px solid var(--black);
		padding: 16px;
	}

	main .featured-video-info{
		padding: 22px 18px 26px;
	}
}

@media (max-width: 575px){
	main .featured-video-title-main{
		font-size: 2rem;
	}

	main .featured-video-title-sub{
		font-size: 2.35rem;
	}

	main .featured-video-btn-channel{
		width: 100%;
		min-width: 0;
	}
}

/* Site footer */
.site-footer{
	background: var(--black);
	color: #fff;
	margin-top: 0;
	font-family: sans-serif;
}

.site-footer :where(p, a, li, button, input, span, label){
	font-family: inherit;
}

.site-footer > .container-screen,
.site-footer-copy > .container-screen{
	padding-inline: 24px;
	box-sizing: border-box;
}

.site-footer-grid{
	display: grid;
	grid-template-columns: 1.35fr 0.85fr 0.85fr 1.15fr;
	gap: 36px;
	padding: 48px 0 36px;
}

.site-footer-logo{
	display: inline-block;
	margin-bottom: 16px;
}

.site-footer-logo img{
	max-width: 100%;
	height: auto;
	display: block;
}

.site-footer-desc{
	margin: 0 0 22px;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.82);
	max-width: 320px;
}

.site-footer-social{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.site-footer-social-link{
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #1f1f1f;
	border: 1px solid #333;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.site-footer-social-link:hover{
	background: #ffb400;
	color: var(--black);
	transform: translateY(-2px);
}

.site-footer-title{
	margin: 0;
	font-family: sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: #fff;
	text-transform: uppercase;
}

.site-footer-toggle{
	display: block;
	width: 100%;
	margin: 0 0 18px;
	padding: 0;
	border: none;
	background: transparent;
	color: inherit;
	font-family: sans-serif;
	text-align: left;
	cursor: default;
	outline: none;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
}

.site-footer-toggle:focus,
.site-footer-toggle:focus-visible,
.site-footer-toggle:active{
	outline: none;
	box-shadow: none;
	border: none;
}

.site-footer-toggle-icon{
	display: none;
	font-size: 0.85rem;
	color: #ffb400;
	transition: transform 0.25s ease;
}

.site-footer-panel{
	display: block;
}

.site-footer-links{
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer-links li{
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer-links li:last-child{
	border-bottom: none;
}

.site-footer-links a{
	display: block;
	padding: 10px 0;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-footer-links a:hover{
	color: #ffb400;
}

.site-footer-newsletter-text{
	margin: 0 0 16px;
	font-size: 0.92rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.82);
}

.site-footer-newsletter-form{
	display: flex;
	align-items: stretch;
	max-width: 100%;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
}

.site-footer-newsletter-form input{
	flex: 1;
	min-width: 0;
	height: 46px;
	padding: 0 14px;
	border: none;
	border-radius: 0;
	background: #fff;
	color: #222;
	font-size: 0.92rem;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

.site-footer-newsletter-form input::placeholder{
	color: #888;
}

.site-footer-newsletter-form input:focus{
	outline: none;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 0 0 2px #ffb400;
}

.site-footer-newsletter-btn{
	flex: 0 0 auto;
	height: 46px;
	padding: 0 18px;
	border: none;
	border-radius: 0;
	background: linear-gradient(180deg, #fff200 0%, #ffb400 100%);
	color: var(--black);
	font-size: 0.9rem;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: none;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.site-footer-newsletter-btn span{
	display: inline-block;
}

.site-footer-newsletter-form:focus-within{
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.9);
}

.site-footer-newsletter-btn:focus,
.site-footer-newsletter-btn:focus-visible{
	outline: none;
}

.site-footer-legal{
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer-legal-note{
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.52);
}

.site-footer-legal-note strong{
	color: rgba(255, 196, 96, 0.9);
	font-weight: inherit;
}

.site-footer-copy{
	border-top: 1px solid #222;
	background: #050505;
	padding: 14px 0 18px;
}

.site-footer-copy-text{
	margin: 0;
	text-align: center;
	font-size: 0.84rem;
	color: rgba(255, 255, 255, 0.55);
}

.site-footer-copy p{
	margin: 0;
	text-align: center;
	font-size: 0.84rem;
	color: rgba(255, 255, 255, 0.55);
}

.sr-only{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 991px){
	.site-footer-grid{
		grid-template-columns: 1fr 1fr;
		gap: 28px;
		padding: 36px 0 28px;
	}

	.site-footer-brand{
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px){
	.site-footer > .container-screen,
	.site-footer-copy > .container-screen{
		padding-inline: 20px;
	}

	.site-footer-grid{
		grid-template-columns: 1fr;
		gap: 0;
		padding: 28px 0 18px;
	}

	.site-footer-brand{
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 22px;
		margin-bottom: 8px;
		border-bottom: 1px solid #2a2a2a;
	}

	.site-footer-desc{
		max-width: 100%;
	}

	.site-footer-social{
		justify-content: center;
	}

	.site-footer-accordion{
		border-bottom: 1px solid #2a2a2a;
	}

	.site-footer-title{
		font-size: 0.9rem;
	}

	.site-footer-toggle{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0;
		padding: 16px 0;
		cursor: pointer;
		outline: none;
		box-shadow: none;
		border: none;
		-webkit-tap-highlight-color: transparent;
	}

	.site-footer-toggle:focus,
	.site-footer-toggle:focus-visible,
	.site-footer-toggle:active{
		outline: none;
		box-shadow: none;
		border: none;
	}

	.site-footer-toggle-icon{
		display: inline-block;
		flex: 0 0 auto;
	}

	.site-footer-accordion.is-open .site-footer-toggle-icon{
		transform: rotate(180deg);
	}

	.site-footer-panel{
		padding-bottom: 8px;
	}

	.site-footer-panel[hidden]{
		display: none;
	}

	.site-footer-links a{
		padding: 12px 0;
		text-align: center;
	}

	.site-footer-newsletter-text{
		text-align: center;
	}

	.site-footer-newsletter-form{
		flex-direction: column;
		gap: 12px;
		border-radius: 10px;
		overflow: visible;
		box-shadow: none;
	}

	.site-footer-newsletter-form:focus-within{
		box-shadow: none;
	}

	.site-footer-newsletter-form input{
		border: 2px solid rgba(255, 255, 255, 0.12);
		border-radius: 10px;
		text-align: center;
		height: 48px;
		box-shadow:
			inset 0 2px 4px rgba(0, 0, 0, 0.1),
			0 4px 14px rgba(0, 0, 0, 0.35);
	}

	.site-footer-newsletter-form input:focus{
		border-color: #ffb400;
		box-shadow:
			inset 0 1px 3px rgba(0, 0, 0, 0.08),
			0 0 0 3px rgba(255, 180, 0, 0.22);
	}

	.site-footer-newsletter-btn{
		width: 100%;
		border-radius: 10px;
		box-shadow: 0 3px 0 rgba(0, 0, 0, 0.85);
	}
}

@media (max-width: 575px){
	.site-footer > .container-screen,
	.site-footer-copy > .container-screen{
		padding-inline: 16px;
	}

	.site-footer-copy{
		padding: 12px 0 16px;
	}

	.site-footer-legal-note{
		font-size: 0.78rem;
	}
}

/*==========================================================================
	Download page
/*==========================================================================*/

main section.center-container.download-page{
    position: relative;
    background: linear-gradient(
        360deg,
        rgb(255, 140, 0) 23%,
        rgb(255, 198, 1) 100%
    );
}

main section.center-container.download-page::before{
    content: '';
    position: absolute;
    inset: 0;

    background-image: url('../img/fondo.webp');
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 100% auto;

    pointer-events: none;
}



main .download-page{
	position: relative;
}

main .download-wraper{
	position: relative;
	width: 100%;
	padding: 8px 0 24px;
}

main .download-splash{
	position: absolute;
	inset: 8% 0 auto;
	height: 420px;
	background:
		radial-gradient(circle at 18% 40%, rgba(255, 70, 0, 0.28) 0%, transparent 42%),
		radial-gradient(circle at 72% 18%, rgba(255, 160, 0, 0.22) 0%, transparent 36%),
		radial-gradient(circle at 55% 78%, rgba(180, 20, 0, 0.18) 0%, transparent 40%);
	pointer-events: none;
	z-index: 0;
}

main .download-servers-wraper{
	position: relative;
	z-index: 1;
	width: 100%;
	margin-bottom: 28px;
	border-width: 7px 5px 5px 5px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 1);
	background: #ffb400;
}

main .download-servers-wraper .content-download-servers{
	background: var(--black);
}

main .download-servers-wraper .header-title{
	min-height: 70px;
	width: 100%;
	font-family: 'anime-950', sans-serif;
	color: var(--black);
	background: linear-gradient(280deg, rgb(255 153 0) 0%, rgb(251 142 2) 100%);
	clip-path: polygon(0 0, 100% 0%, 100% 89%, 0% 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 10px;
	padding-inline: 25px;
	border-left: 5px solid var(--black);
	border-top: 2px solid yellow;
}

main .download-servers-wraper .header-title h3{
	margin: 0;
	font-family: 'anime-950', sans-serif;
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	font-style: italic;
	text-transform: uppercase;
}

main .download-servers-wraper .header-title .download-servers-hint{
	font-family: 'anime-700', sans-serif;
	font-size: clamp(0.95rem, 1.5vw, 1.15rem);
	color: var(--black);
	text-transform: uppercase;
	white-space: nowrap;
}

main .download-servers-panel{
	background: #111;
}

main .download-components-wraper{
	position: relative;
	z-index: 1;
	width: 100%;
	margin-bottom: 28px;
	border-width: 7px 5px 5px 5px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 1);
	background: #ffb400;
}

main .download-components-wraper .content-download-components{
	background: var(--black);
}

main .download-components-wraper .header-title{
	min-height: 70px;
	width: 100%;
	font-family: 'anime-950', sans-serif;
	color: var(--white);
	background: linear-gradient(280deg, rgb(157 0 255) 0%, rgb(123 2 251) 100%);
	clip-path: polygon(0 0, 100% 0%, 100% 89%, 0% 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 10px;
	padding-inline: 25px;
	border-left: 5px solid var(--black);
	border-top: 2px solid yellow;
}

main .download-components-wraper .header-title h3{
	margin: 0;
	font-family: 'anime-950', sans-serif;
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	font-style: italic;
	text-transform: uppercase;
}

main .download-components-panel{
	background: #111;
	padding: 16px 18px 20px;
	overflow: visible;
}

main .download-requirements-wraper{
	position: relative;
	z-index: 1;
	width: 100%;
	margin-bottom: 28px;
	border-width: 7px 5px 5px 5px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 1);
	background: #ffb400;
}

main .download-requirements-wraper .content-download-requirements{
	background: var(--black);
}

main .download-requirements-wraper .header-title{
	min-height: 70px;
	width: 100%;
	font-family: 'anime-950', sans-serif;
	color: var(--white);
	background: linear-gradient(280deg, rgb(0 75 187) 0%, rgb(2 145 251) 100%);
	clip-path: polygon(0 0, 100% 0%, 100% 89%, 0% 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 10px;
	padding-inline: 25px;
	border-left: 5px solid var(--black);
	border-top: 2px solid #00d9ff;
}

main .download-requirements-wraper .header-title h3{
	margin: 0;
	font-family: 'anime-950', sans-serif;
	font-size: clamp(1.8rem, 3vw, 2rem);
	font-style: italic;
	text-transform: uppercase;
}

main .download-requirements-panel{
	background: #111;
	padding-bottom: 4px;
}

main .download-block{
	position: relative;
	z-index: 1;
	margin-bottom: 28px;
	border-top: 4px solid #ffb400;
	border-right: 5px solid #ffb400;
	background: rgba(8, 8, 8, 0.92);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85);
}

main .download-block-head{
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 58px;
	padding: 10px 18px;
	background:
		radial-gradient(circle at 22% 50%, rgba(255, 120, 0, 0.35) 0%, transparent 48%),
		linear-gradient(90deg, #120e0d 0%, #0a0a0a 100%);
	border-bottom: 1px solid rgba(255, 180, 0, 0.18);
	overflow: hidden;
}

main .download-block-head::after{
	content: '';
	position: absolute;
	top: 0;
	right: -18px;
	width: 42px;
	height: 100%;
	background: #ffb400;
	transform: skewX(-18deg);
}

main .download-block-head-icon{
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 180, 0, 0.45);
	background: rgba(255, 122, 0, 0.18);
	color: #ffb400;
	font-size: 1rem;
}

main .download-block-head-icon.is-orange{
	color: #ff6a00;
	background: rgba(255, 90, 0, 0.18);
}

main .download-block-head h4{
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: 'anime-950', sans-serif;
	font-style: italic;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	line-height: 1;
	color: #ffb400;
	text-transform: uppercase;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.65);
}

main .download-block-body{
	background: #111;
}

main .download-server-row{
	display: grid;
	grid-template-columns: 72px minmax(120px, 1fr) minmax(95px, 0.85fr) minmax(180px, 1.35fr) minmax(85px, 0.75fr) minmax(200px, 1.15fr);
	align-items: center;
	gap: 12px 18px;
	padding: 18px 28px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

main .download-server-row:last-child{
	border-bottom: 0;
}

main .download-server-brand{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	font-size: 1.65rem;
}

main .download-server-brand.is-mega{
	color: #d9272e;
}

main .download-server-brand.is-mediafire{
	color: #ff7a00;
}

main .download-server-brand.is-drive{
	color: #34a853;
}

main .download-server-name{
	font-family: 'anime-920', sans-serif;
	font-style: italic;
	font-size: clamp(1.25rem, 2.1vw, 1.65rem);
	color: #fff;
	text-transform: uppercase;
	align-self: stretch;
	display: flex;
	align-items: center;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
	padding-right: 18px;
}

main .download-server-detail{
	font-family: 'quicksand-light', sans-serif;
	font-size: 1rem;
	color: rgb(255 255 255);
	text-align: left;
	white-space: nowrap;
	align-self: stretch;
	display: flex;
	align-items: center;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
	padding-right: 18px;
}

main .download-server-os{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	max-width: 100%;
}

main .download-server-os > i{
	flex-shrink: 0;
	font-size: 1.65rem;
	color: #00a4ef;
}

main .download-server-os-copy{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

main .download-server-os-label{
	font-family: 'quicksand-light', sans-serif;
	font-size: 0.78rem;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.55);
}

main .download-server-os-value{
	font-family: sans-serif;
	font-size: 0.92rem;
	line-height: 1.25;
	color: #fff;
}

main .download-server-size{
	font-family: 'anime-920', sans-serif;
	font-style: italic;
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	color: #ffeed4;
	text-align: center;
	justify-self: center;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
	padding-right: 18px;
}

main .download-servers-panel .download-btn-yellow{
	width: 100%;
	min-height: 50px;
	padding: 0 18px;
	border: 1px solid #000;
	border-radius: 0;
	background: linear-gradient(180deg, #e38e00 0%, #ffae00 52%, #ff8d00 100%);
	color: #111;
	transform: skewX(-14deg);
	transition: filter 0.2s ease, transform 0.2s ease;
}

main .download-servers-panel .download-btn-yellow:hover{
	filter: brightness(1.06);
	transform: skewX(-14deg) translateY(-1px);
	color: #111;
	text-decoration: none;
}

main .download-servers-panel .download-btn-inner{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transform: skewX(14deg);
	font-family: 'anime-950', sans-serif;
	font-style: italic;
	font-size: clamp(0.95rem, 1.4vw, 1.12rem);
	line-height: 1.1;
	text-transform: uppercase;
}

main .download-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	padding: 10px 16px;
	border: 0;
	border-radius: 8px;
	font-family: 'anime-920', sans-serif;
	font-style: italic;
	font-size: 0.88rem;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter 0.2s ease, transform 0.2s ease;
}

main .download-btn:hover{
	filter: brightness(1.04);
	transform: translateY(-1px);
	text-decoration: none;
}

main .download-btn-yellow{
	background: linear-gradient(180deg, #ffe978 0%, #ffd000 48%, #e6a800 100%);
	color: #111;
}

main .download-btn-purple{
	background: linear-gradient(180deg, #9b59ff 0%, #6f2dbd 52%, #4a148c 100%);
	color: #fff;
}

main .download-block-body-components,
main .download-components-panel{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

main .download-component-card{
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid #9b59ff;
	box-shadow: inset 0 0 0 1px rgba(155, 89, 255, 0.18);
	transform: skewX(-12deg);
}

main .download-component-logo{
	display: flex;
	align-items: center;
	justify-content: center;
	transform: skewX(12deg);
}

main .download-component-logo img{
	display: block;
	width: 76px;
	height: auto;
	max-height: 76px;
	object-fit: contain;
}

main .download-component-copy{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	transform: skewX(12deg);
}

main .download-component-copy h5{
	margin: 0 0 4px;
	font-family: 'anime-920', sans-serif;
	font-style: italic;
	font-size: clamp(1.05rem, 1.7vw, 1.35rem);
	line-height: 1.15;
	color: #fff;
	text-transform: uppercase;
}

main .download-component-copy p{
	margin: 0 0 10px;
	font-family: 'quicksand-light', sans-serif;
	font-size: 0.85rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.72);
}

main .download-component-copy .download-btn{
	margin-top: 0;
	align-self: flex-start;
	width: auto;
}

main .download-components-panel .download-btn-purple{
	width: auto;
	min-width: 168px;
	max-width: 100%;
	min-height: 42px;
	padding: 0 18px;
	border: 1px solid #2a0845;
	border-radius: 0;
	background: linear-gradient(180deg, #9b59ff 0%, #6f2dbd 52%, #4a148c 100%);
	color: #fff;
	transform: skewX(-14deg);
	transition: filter 0.2s ease, transform 0.2s ease;
}

main .download-components-panel .download-btn-purple:hover{
	filter: brightness(1.08);
	transform: skewX(-14deg) translateY(-1px);
	color: #fff;
	text-decoration: none;
}

main .download-components-panel .download-btn-inner{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transform: skewX(14deg);
	font-family: 'anime-920', sans-serif;
	font-style: italic;
	font-size: clamp(0.9rem, 1.3vw, 1.05rem);
	line-height: 1.1;
	text-transform: uppercase;
}

main .download-req-head,
main .download-req-row{
	display: grid;
	grid-template-columns: minmax(210px, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
	align-items: stretch;
}

main .download-req-head{
	padding: 14px 16px 10px;
}

main .download-req-head-label,
main .download-req-head-min,
main .download-req-head-rec{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 8px 12px;
	background: #2f3e61;
	border: 1px solid #3d5f73;
}

main .download-req-head-label span,
main .download-req-head-min span,
main .download-req-head-rec span{
	display: block;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.85rem;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
}

main .download-req-row{
	padding: 0 16px 12px;
}

main .download-req-row + .download-req-row{
	padding-top: 0;
}

main .download-req-label{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 54px;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 180, 0, 0.08);
}

main .download-req-label i{
	color: #ffb400;
	font-size: 1rem;
}

main .download-req-label span{
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.82rem;
	color: #fff;
	text-transform: uppercase;
}

main .download-req-cell{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 180, 0, 0.08);
	font-family: 'quicksand-light', sans-serif;
	font-size: 0.85rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.86);
	text-align: center;
}

@media (max-width: 991px){
	main .download-block-body-components,
	main .download-components-panel{
		grid-template-columns: 1fr;
	}

	main .download-server-row{
		grid-template-columns: 58px minmax(0, 1fr);
		gap: 8px 12px;
		padding: 16px 18px;
	}

	main .download-server-brand{
		grid-row: 1;
		grid-column: 1;
		align-self: center;
	}

	main .download-server-name{
		grid-row: 1;
		grid-column: 2;
		align-self: center;
		border-right: 0;
		padding-right: 0;
	}

	main .download-server-detail{
		grid-column: 1 / -1;
		justify-content: center;
		text-align: center;
		border-right: 0;
		padding-right: 0;
	}

	main .download-server-os{
		grid-column: 1 / -1;
		justify-content: center;
		width: 100%;
	}

	main .download-server-os-copy{
		text-align: left;
	}

	main .download-server-size{
		grid-column: 1 / -1;
		justify-content: center;
		text-align: center;
		border-right: 0;
		padding: 8px 0 4px;
		font-size: clamp(1.85rem, 6vw, 2.35rem);
	}

	main .download-server-row .download-btn{
		grid-column: 1 / -1;
		margin-top: 4px;
	}

	main .download-servers-panel .download-btn-yellow{
		transform: none;
	}

	main .download-servers-panel .download-btn-yellow:hover{
		transform: translateY(-1px);
	}

	main .download-servers-panel .download-btn-inner{
		transform: none;
	}

	main .download-components-panel .download-btn-purple{
		transform: none;
	}

	main .download-components-panel .download-btn-purple:hover{
		transform: translateY(-1px);
	}

	main .download-components-panel .download-btn-inner{
		transform: none;
	}

	main .download-component-card{
		transform: none;
	}

	main .download-component-logo,
	main .download-component-copy{
		transform: none;
	}

	main .download-component-copy{
		align-items: center;
	}

	main .download-component-copy .download-btn{
		align-self: center;
	}
}

@media (max-width: 767px){
	main .download-requirements-panel{
		padding: 12px 12px 16px;
	}

	main .download-req-head{
		display: none;
	}

	main .download-req-row{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"label label"
			"min rec";
		gap: 8px;
		padding: 0 0 14px;
		margin-bottom: 12px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	main .download-req-row:last-child{
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}

	main .download-req-label{
		grid-area: label;
		width: 100%;
		min-height: 44px;
		padding: 10px 14px;
		background: #4b5d73;
		border: 1px solid rgba(255, 255, 255, 0.08);
	}

	main .download-req-label span{
		font-family: 'quicksand-medium', sans-serif;
		font-size: 0.8rem;
	}

	main .download-req-row .download-req-cell:nth-child(2){
		grid-area: min;
	}

	main .download-req-row .download-req-cell:nth-child(3){
		grid-area: rec;
	}

	main .download-req-cell{
		min-height: auto;
		padding: 10px 8px;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 4px;
		font-family: 'quicksand-light', sans-serif;
		font-size: 1rem;
		line-height: 1.35;
	}

	main .download-req-cell::before{
		display: block;
		margin-bottom: 2px;
		font-family: 'quicksand-medium', sans-serif;
		font-style: normal;
		font-size: 0.68rem;
		color: #ffb400;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	main .download-req-row .download-req-cell:nth-child(2)::before{
		content: 'Requisitos mínimos';
	}

	main .download-req-row .download-req-cell:nth-child(3)::before{
		content: 'Requisitos recomendados';
	}
}

@media (max-width: 575px){
	main .download-servers-wraper .header-title,
	main .download-components-wraper .header-title,
	main .download-requirements-wraper .header-title{
		padding-inline: 16px;
	}

	main .download-servers-wraper .header-title h3,
	main .download-components-wraper .header-title h3,
	main .download-requirements-wraper .header-title h3{
		font-size: 1.8rem;
	}

	main .download-servers-wraper .header-title .download-servers-hint{
		font-size: 0.72rem;
	}

	main .download-servers-wraper .header-title{
		flex-wrap: wrap;
		row-gap: 4px;
	}

	main .download-req-row{
		grid-template-columns: 1fr;
		grid-template-areas:
			"label"
			"min"
			"rec";
		gap: 6px;
	}

	main .download-req-cell{
		align-items: flex-start;
		text-align: left;
		padding: 10px 12px;
	}

	main .download-server-row{
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 8px 10px;
		padding: 14px 14px 16px;
	}

	main .download-server-brand{
		width: 48px;
		height: 48px;
		font-size: 1.4rem;
	}

	main .download-server-name{
		font-size: 1.35rem;
	}

	main .download-server-detail{
		font-size: 0.92rem;
	}

	main .download-server-size{
		font-size: clamp(2rem, 8vw, 2.5rem);
		padding: 10px 0 6px;
	}

	main .download-component-card{
		grid-template-columns: 1fr;
		min-height: 0;
		text-align: center;
	}

	main .download-component-logo img{
		margin: 0 auto;
	}
}

/* Register page */
main section.center-container.register-page{
	position: relative;
  	background: linear-gradient(
        360deg,
        rgb(255, 140, 0) 23%,
        rgb(255, 198, 1) 100%
    );
}


main section.center-container.register-page::before{
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../img/fondo.webp');
	background-repeat: repeat-y;
	background-position: center top;
	background-size: 100% auto;
	pointer-events: none;
}

main .register-page{
	position: relative;
	padding-bottom: 48px;
}

main .register-wraper{
	position: relative;
	z-index: 1;
	width: 100%;
	margin-bottom: 36px;
	border-width: 7px 5px 5px 5px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 1);
	background: #ffb400;
}

main .register-splash{
	position: absolute;
	inset: 8% 0 auto;
	height: 360px;
	background:
		radial-gradient(circle at 18% 40%, rgba(255, 70, 0, 0.28) 0%, transparent 42%),
		radial-gradient(circle at 72% 18%, rgba(255, 160, 0, 0.22) 0%, transparent 36%),
		radial-gradient(circle at 55% 78%, rgba(180, 20, 0, 0.18) 0%, transparent 40%);
	pointer-events: none;
	z-index: 0;
}

main .register-content{
	position: relative;
	z-index: 1;
	background: var(--black);
}

main .register-form-panel{
	position: relative;
	padding: 0 48px 72px;
	background:
		radial-gradient(circle at 18% 35%, rgba(0, 0, 0, 0.16) 0 1px, transparent 2px) 0 0 / 10px 10px,
		linear-gradient(180deg, #141414 0%, #0a0a0a 100%);
}

main .register-form-header{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 24px;
	flex-wrap: wrap;
	margin: 0 -48px 32px;
	padding: 28px 48px;
	background: #0c0b0b;
	border-bottom: 6px solid rgba(0,0,0);
	overflow: hidden;
}

main .register-form-header::after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(132px, 20vw, 210px);
	height: clamp(52px, 68%, 74px);
	background: #ffa700;
	clip-path: polygon(100% 0, 0 0, 100% 100%);
	pointer-events: none;
	z-index: 0;
}

main .register-form-header-left{
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 18px;
	min-width: 0;
	width: 100%;
	padding-right: clamp(96px, 14vw, 160px);
}

main .register-form-header-title{
	margin: 0;
	flex-shrink: 0;
	font-family: 'anime-950', sans-serif;
	font-size: clamp(1.65rem, 3.2vw, 2.6rem);
	font-weight: normal;
	line-height: 1.15;
	text-transform: uppercase;
	color: #f2f2f2;
	letter-spacing: 0.03em;
}

main .register-form-header-accent{
	color: #ffb400;
}

main .register-form-header-tagline{
	margin: 0;
	flex: 0 1 auto;
	max-width: min(100%, 420px);
	font-family: 'anime-920', sans-serif;
	font-size: clamp(0.95rem, 1.8vw, 1.15rem);
	font-style: italic;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.78);
}

main .register-form-header-icon{
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	color: #ffb400;
	font-size: clamp(1.85rem, 3vw, 2.25rem);
	line-height: 1;
}

main .register-form-mf{
	width: 100%;
	max-width: none;
	margin: 0;
	padding-top: 8px;
	min-height: 520px;
}

main .register-form-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 16px 36px;
}

main .register-field{
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
}

main .register-field .register-help{
	min-height: 28px;
	margin: 4px 0 0;
}

main .register-label{
	display: block;
	margin-bottom: 6px;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.84rem;
	color: #ffb400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

main .register-required{
	color: #ff4d4d;
}

main .register-field-row{
	display: flex;
	align-items: stretch;
	min-width: 0;
	border:1px solid #916a00;
	background: #121212;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65);
	overflow: visible;
}

main .register-field-icon{
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 58px;
	min-height: 54px;
	background: linear-gradient(180deg, #ffd000 0%, #ffb400 52%, #e69500 100%);
	border-right: 2px solid #000;
	color: #111;
	font-size: 1.28rem;
}

main .register-field-input{
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: stretch;
	overflow: visible;
}

main .register-input{
	width: 100%;
	min-height: 54px;
	padding: 12px 16px;
	border: 0;
	background: transparent;
	color: #fff;
	font-family: 'quicksand-light', sans-serif;
	font-size: 0.95rem;
	transition: background 0.2s ease;
}

main .register-input::placeholder{
	color: rgba(255, 255, 255, 0.42);
}

main .register-field-row:focus-within{
	border-color: rgba(255, 180, 0, 0.55);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.65),
		0 0 0 1px rgba(255, 180, 0, 0.18);
}

main .register-field-row:focus-within .register-field-input{
	background: rgba(255, 255, 255, 0.03);
}

main .register-input:focus{
	outline: none;
}

main .register-input-password{
	padding-right: 46px;
}

main .register-input.register-select{
	background-color: #121212;
	color: #fff;
}

main .register-select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #121212;
	color: #fff;
	color-scheme: dark;
	background-image:
		linear-gradient(45deg, transparent 50%, #ffb400 50%),
		linear-gradient(135deg, #ffb400 50%, transparent 50%);
	background-position:
		calc(100% - 18px) calc(50% - 3px),
		calc(100% - 12px) calc(50% - 3px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 34px;
	cursor: pointer;
}

main .register-select:invalid{
	color: rgba(255, 255, 255, 0.42);
}

main .register-select option{
	background: #181818;
	color: #fff;
}

main .register-select option[disabled]{
	color: rgba(255, 255, 255, 0.72);
}

main .register-select option:checked{
	background: #2a2a2a;
	color: #fff;
}

main .register-toggle-password{
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: #ffb400;
	font-size: 0.95rem;
	cursor: pointer;
	padding: 0;
	outline: none;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
}

main .register-toggle-password:hover{
	color: #ffd000;
}

main .register-toggle-password:focus,
main .register-toggle-password:focus-visible,
main .register-toggle-password:active{
	outline: none;
	box-shadow: none;
	border: 0;
	background: transparent;
}

main .register-submit:focus,
main .register-submit:focus-visible{
	outline: none;
	box-shadow: none;
}

main .register-input:focus,
main .register-input:focus-visible,
main .register-select:focus,
main .register-select:focus-visible{
	outline: none;
	box-shadow: none;
}

main .register-login-link a:focus,
main .register-login-link a:focus-visible{
	outline: none;
	color: #ffd000;
}

main .register-help{
	margin: 6px 0 0;
	color: rgba(255, 255, 255, 0.48);
}

main .register-help small{
	font-family: 'quicksand-light', sans-serif;
	font-size: 0.88rem;
}

main .register-field-recaptcha{
	margin-top: 20px;
	text-align: center;
}

main .register-field-recaptcha .register-label{
	display: block;
	text-align: center;
}

main .register-field-recaptcha .register-recaptcha{
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

main .register-field-recaptcha .register-help{
	text-align: center;
}

main .register-input.register-input-disabled{
	color: rgba(255, 255, 255, 0.55);
	cursor: not-allowed;
	opacity: 1;
}

main .register-input.register-input-disabled:disabled{
	-webkit-text-fill-color: rgba(255, 255, 255, 0.55);
}

main .register-terms{
	margin-top: 32px;
	padding: 20px 22px;
	border: 1px solid rgba(255, 180, 0, 0.22);
	background: rgba(255, 255, 255, 0.03);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65);
}

main .register-terms-check{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	cursor: pointer;
}

main .register-terms-input{
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

main .register-terms-box{
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border: 2px solid rgba(255, 180, 0, 0.55);
	background: #121212;
	position: relative;
	transition: border-color 0.2s ease, background 0.2s ease;
}

main .register-terms-box::after{
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	background: #ffb400;
	transform: translate(-50%, -50%) scale(0);
	transition: transform 0.15s ease;
}

main .register-terms-input:checked + .register-terms-box{
	border-color: #ffb400;
	background: rgba(255, 180, 0, 0.12);
}

main .register-terms-input:checked + .register-terms-box::after{
	transform: translate(-50%, -50%) scale(1);
}

main .register-terms-input:focus-visible + .register-terms-box{
	outline: 1px solid rgba(255, 180, 0, 0.65);
	outline-offset: 2px;
}

main .register-terms-copy{
	font-family: 'quicksand-light', sans-serif;
	font-size: 0.9rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.72);
}

main .register-terms-copy a{
	color: #ffb400;
	text-decoration: none;
	font-family: 'quicksand-medium', sans-serif;
}

main .register-terms-copy a:hover{
	color: #ffd000;
	text-decoration: underline;
}

main .register-terms-copy a:focus,
main .register-terms-copy a:focus-visible{
	outline: none;
	color: #ffd000;
}

main .register-terms .register-help{
	margin-top: 12px;
	padding-left: 34px;
}

main .register-submit-wrap{
	position: relative;
	margin: 36px auto 0;
	max-width: 420px;
	width: 100%;
}

main .register-submit{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 0 20px;
	border: 2px solid #000;
	border-radius: 0;
	background: linear-gradient(180deg, #ffd000 0%, #ffb400 52%, #e69500 100%);
	color: #111;
	transform: skewX(-12deg);
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.2s ease;
	font-family: 'anime-950', sans-serif;
	font-size: clamp(1.05rem, 2vw, 1.2rem);
	text-transform: uppercase;
}

main .register-submit-inner{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	transform: skewX(12deg);
	font: inherit;
	line-height: 1.1;
}

main .register-submit-label{
	display: inline-block;
	line-height: 1.1;
}

main .register-submit-spinner{
	position: static;
	margin: 0;
	flex-shrink: 0;
}

main .register-submit .register-loading{
	display: none;
	position: static;
	left: auto;
	top: auto;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 3px solid #111;
	border-top-color: transparent;
	border-radius: 50%;
	animation: register-submit-spin 1s linear infinite;
	transform: none;
}

@keyframes register-submit-spin{
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

main .register-loading{
	display: none;
	width: 22px;
	height: 22px;
	border: 3px solid #111;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

main .register-submit:hover{
	filter: brightness(1.06);
	transform: skewX(-12deg) translateY(-1px);
}

main .register-submit:disabled{
	opacity: 0.72;
	cursor: not-allowed;
	filter: grayscale(0.15);
	transform: skewX(-12deg);
}

main .register-submit:disabled:hover{
	filter: grayscale(0.15);
	transform: skewX(-12deg);
}

main .register-errors{
	margin-top: 16px;
	text-align: center;
}

main .register-login-link{
	margin: 28px auto 0;
	padding-bottom: 12px;
	max-width: 420px;
	text-align: center;
	font-family: 'quicksand-light', sans-serif;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.62);
}

main .register-login-link a{
	color: #ffb400;
	text-decoration: none;
	font-family: 'quicksand-medium', sans-serif;
	text-transform: uppercase;
}

main .register-login-link a:hover{
	color: #ffd000;
	text-decoration: underline;
}

main .register-form-mf .error_text_form,
main .register-form-mf .error_text_form small{
	color: #ff5a5a !important;
}

main .register-form-mf .error_input{
	box-shadow: inset 0 0 0 1px #a52a2a;
}

@media (max-width: 991px){
	main .register-form-grid{
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

@media (max-width: 575px){
	main .register-form-panel{
		padding: 0 14px 24px;
	}

	main .register-form-header{
		margin: 0 -14px 24px;
		padding: 16px 14px;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	main .register-form-header::after{
		width: 96px;
		height: 46px;
	}

	main .register-form-header-left{
		gap: 10px 12px;
		padding-right: 72px;
	}

	main .register-form-header-title{
		font-size: 1.45rem;
	}

	main .register-form-header-tagline{
		font-size: 0.92rem;
	}

	main .register-form-header-icon{
		font-size: 1.65rem;
	}

	main .register-field-icon{
		width: 52px;
		min-height: 50px;
		font-size: 1.15rem;
	}

	main .register-input{
		min-height: 50px;
		font-size: 0.9rem;
	}

	main .register-submit-wrap{
		max-width: none;
	}

	main .register-submit{
		transform: none;
	}

	main .register-submit-inner{
		transform: none;
	}

	main .register-submit:hover{
		transform: translateY(-1px);
	}
}

/* Soporte page */
main .soporte-page .register-form-header-title{
	margin: 0;
}

main .soporte-page .register-submit-inner{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

main .soporte-page .soporte-submit-spinner{
	position: static;
	margin: 0;
	flex-shrink: 0;
}

main .soporte-page .soporte-submit-label{
	display: inline-block;
	line-height: 1.1;
}

main .soporte-login-notice{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 24px;
	padding: 14px 16px;
	border: 1px solid rgba(255, 180, 0, 0.28);
	background: rgba(255, 180, 0, 0.08);
	color: rgba(255, 255, 255, 0.88);
}

main .soporte-login-notice i{
	flex-shrink: 0;
	margin-top: 2px;
	color: #ffb400;
	font-size: 1.1rem;
}

main .soporte-login-notice p{
	margin: 0;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.95rem;
	line-height: 1.45;
}

main .soporte-login-notice a{
	color: #ffb400;
	text-decoration: none;
}

main .soporte-login-notice a:hover{
	color: #ffd000;
	text-decoration: underline;
}

main .soporte-field-message{
	margin-top: 8px;
}

main .soporte-message-row{
	align-items: stretch;
}

main .soporte-message-icon{
	align-self: stretch;
	min-height: 100%;
}

main .register-textarea{
	min-height: 160px;
	padding: 14px 16px;
	resize: vertical;
	line-height: 1.5;
}

main .soporte-upload-block{
	margin-top: 28px;
}

main .soporte-upload-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

main .soporte-upload-optional{
	color: rgba(255, 255, 255, 0.45);
	font-family: 'quicksand-light', sans-serif;
	font-size: 0.78rem;
	text-transform: none;
	letter-spacing: 0;
}

main .soporte-upload-counter{
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.82rem;
	color: #ffb400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

main .soporte-upload-zone{
	position: relative;
	border: 1px dashed rgba(255, 180, 0, 0.45);
	background:
		radial-gradient(circle at 18% 35%, rgba(255, 180, 0, 0.05) 0 1px, transparent 2px) 0 0 / 10px 10px,
		rgba(255, 255, 255, 0.02);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

main .soporte-upload-zone:hover,
main .soporte-upload-zone:focus,
main .soporte-upload-zone.is-dragover{
	border-color: #ffb400;
	background-color: rgba(255, 180, 0, 0.06);
	outline: none;
}

main .soporte-upload-zone-inner{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 28px 20px;
	text-align: center;
}

main .soporte-upload-zone-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid rgba(255, 180, 0, 0.35);
	background: rgba(255, 180, 0, 0.08);
	color: #ffb400;
	font-size: 1.35rem;
}

main .soporte-upload-zone-title{
	margin: 0;
	font-family: 'quicksand-medium', sans-serif;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.9);
}

main .soporte-upload-zone-hint{
	margin: 0;
	font-family: 'quicksand-light', sans-serif;
	font-size: 0.86rem;
	color: rgba(255, 255, 255, 0.5);
}

main .soporte-upload-zone-hint kbd{
	padding: 1px 6px;
	border: 1px solid rgba(255, 180, 0, 0.35);
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.35);
	color: #ffb400;
	font-family: inherit;
	font-size: 0.78rem;
}

main .soporte-upload-zone-hint--paste{
	color: rgba(255, 180, 0, 0.72);
}

main .soporte-upload-preview{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

main .soporte-upload-preview-item{
	position: relative;
	width: 92px;
	height: 92px;
	border: 1px solid rgba(255, 180, 0, 0.35);
	background: #101010;
	overflow: hidden;
}

main .soporte-upload-preview-img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

main .soporte-upload-remove{
	position: absolute;
	top: 4px;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	cursor: pointer;
}

main .soporte-upload-remove:hover{
	background: rgba(180, 20, 20, 0.85);
	color: #fff;
}

main .soporte-footer-link .soporte-link-disabled{
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

@media (max-width: 575px){
	main .soporte-upload-zone-inner{
		padding: 22px 14px;
	}

	main .soporte-upload-preview-item{
		width: 78px;
		height: 78px;
	}
}

/* Términos y condiciones / Política de privacidad */
main .terminos-page .register-form-header-title,
main .privacidad-page .register-form-header-title{
	margin: 0;
}

main .register-legal-panel{
	display: flex;
	flex-direction: column;
}

main .register-legal-content{
	max-height: min(62vh, 720px);
	overflow-y: auto;
	padding: 4px 4px 8px;
	margin-bottom: 20px;
	color: rgb(181 181 181 / 86%);
	font-family: 'quicksand-medium', sans-serif;
	font-size: 0.95rem;
	line-height: 1.65;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 180, 0, 0.45) rgba(0, 0, 0, 0.25);
}

main .register-legal-content::-webkit-scrollbar{
	width: 8px;
}

main .register-legal-content::-webkit-scrollbar-thumb{
	background: rgba(255, 180, 0, 0.45);
	border-radius: 999px;
}

main .register-legal-intro{
	margin: 0 0 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255, 180, 0, 0.18);
	font-family: 'quicksand-medium', sans-serif;
	color: rgb(181 181 181 / 86%);
}

main .register-legal-section{
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 180, 0, 0.12);
}

main .register-legal-section:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

main .register-legal-content h2{
	margin: 0 0 12px;
	font-family: 'quicksand-semibold', sans-serif;
	font-size: 1.05rem;
	line-height: 1.35;
	color: #ffb400;
	text-transform: none;
}

main .register-legal-content h3{
	margin: 18px 0 10px;
	font-family: 'quicksand-semibold', sans-serif;
	font-size: 0.98rem;
	line-height: 1.35;
	color: #ffd56a;
}

main .register-legal-content p{
	margin: 0 0 12px;
}

main .register-legal-content p:last-child{
	margin-bottom: 0;
}

main .register-legal-content ul{
	margin: 0 0 12px;
	padding-left: 1.2rem;
}

main .register-legal-content li{
	margin-bottom: 8px;
}

main .register-legal-content li:last-child{
	margin-bottom: 0;
}

main .register-legal-content strong{
	font-family: 'quicksand-bold', sans-serif;
	font-weight: normal;
	color: #fff;
}

main .register-legal-note{
	padding: 12px 14px;
	border: 1px solid rgba(255, 180, 0, 0.24);
	border-radius: 10px;
	background: rgba(255, 122, 0, 0.08);
}

main .register-legal-actions{
	margin-top: auto;
}

main .register-legal-back{
	display: inline-flex;
	width: 100%;
	text-decoration: none;
}

main .register-legal-back .register-submit-inner{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

main .register-legal-back:hover,
main .register-legal-back:focus{
	color: #fff;
	text-decoration: none;
}

@media (max-width: 767px){
	main .register-legal-content{
		max-height: none;
		overflow: visible;
	}
}