@charset "utf8";

/* ==========================================================
   NEON THEME
   Only assets/img/bg/bg.jpg (page background) and
   assets/img/logo/logo-to.png (logo) are used as images here.
   Everything else (borders, buttons, panels, dividers, icons)
   is drawn with pure CSS. Rank-page character/position icons
   are left as-is (allowed exception).
   ========================================================== */

:root{
	--neon-cyan: #05f2ff;
	--neon-pink: #ff2bd6;
	--neon-purple: #b26bff;
	--neon-lime: #baff29;
	--ink: #cfe3ff;
	--ink-dim: #93a4c4;
	--panel-bg: rgba(8, 11, 22, 0.82);
	--panel-bg-strong: rgba(6, 8, 18, 0.92);
	--panel-border: rgba(5, 242, 255, 0.35);
}

body{
	background:
		linear-gradient(rgba(4,6,14,0.72), rgba(4,6,14,0.92)),
		url("../../assets/img/bg/bg.jpg") top center no-repeat #05070f;
	background-size: cover;
	background-attachment: fixed;
	font-family: 'Roboto', sans-serif;
	color: var(--ink);
}
*{
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	text-decoration: none;
}

@font-face{
	src: url(../../dist/fonts/beaufortforlol-medium.otf);
	font-family: beaufort;
	font-weight: 500;
}
@font-face{
	src: url(../../dist/fonts/beaufortforlol-bold.otf);
	font-family: beaufort;
	font-weight: bold;
}
@font-face{
	src: url(../../dist/fonts/Roboto-Regular.ttf);
	font-family: roboto;
	font-weight: 300;
}
@font-face{
	src: url(../../dist/fonts/Roboto-Medium.ttf);
	font-family: roboto;
	font-weight: 500;
}

/* Cursor */
body,
html,
label,
input, p span a{cursor: url("../../assets/img/cursor/default.cur"), default;}
a, button[type=submit],
select, option, span, p span a{
	cursor:url("../../assets/img/cursor/pointer.cur"),
	pointer !important; outline: none;
}

.container{width: 100%; margin: 0 auto;}
.content{max-width: 1240px; margin: 0 auto;}
.fluido{width: 100%;}

/* ================= section / logo ================= */
.section{height: 450px; position: relative;}
.section .top{display: block; position: relative; z-index: 2;}
.sociais{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	padding-top: 15px;
}
.sociais li{display: inline-flex;}
.sociais li a{
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--neon-cyan);
	background: rgba(5,242,255,0.08);
	border: 1px solid var(--neon-cyan);
	box-shadow: 0 0 8px rgba(5,242,255,0.55), inset 0 0 6px rgba(5,242,255,0.25);
	transition: all 0.35s;
	font-size: 1.1em;
}
.sociais li a svg{width: 18px; height: 18px; fill: currentColor;}
.sociais li a:hover{
	color: #001014;
	background: var(--neon-cyan);
	box-shadow: 0 0 18px var(--neon-cyan), 0 0 34px rgba(5,242,255,0.6);
}
.logo{
	float: left;
	width: 100%;
	max-width: 400px;
	height: 239px;
	display: block;
	position: relative;
	top: 100px;
}
.logo img{
	width: 100%;
	max-width: 400px;
	filter: drop-shadow(0 0 12px rgba(255,43,214,0.55)) drop-shadow(0 0 26px rgba(5,242,255,0.35));
}

/* ================= nav ================= */
.nav{
	display: flex;
	padding: 15px;
	position: relative;
	top: 14px;
	justify-content: space-between;
	background: linear-gradient(180deg, rgba(10,14,28,0.9), rgba(6,8,18,0.85));
	border-top: 1px solid rgba(5,242,255,0.5);
	border-bottom: 1px solid rgba(255,43,214,0.4);
	box-shadow: 0 0 22px rgba(5,242,255,0.18), inset 0 0 30px rgba(178,107,255,0.06);
}
.nav ul{height: 50px; line-height: 3px; display: flex; align-items: center;}
.nav li{display: inline;}
.nav li a{
	float: left;
	text-transform: uppercase;
	padding: 30px 31px;
	font-weight: bold;
	transition: all 0.4s;
	font-family: beaufort;
}
.item_nav{
	color: var(--ink);
	margin-left: 20px;
	margin-top: 3px;
	font-size: 1.1em;
	position: relative;
}
.item_nav:hover{
	color: var(--neon-cyan);
	text-shadow: 0 0 8px var(--neon-cyan), 0 0 18px rgba(5,242,255,0.6);
}
.nav_d{margin-right: 13px;}
.nav_r{position: relative; left: -7px;}
.nav_v{position: relative; left: 24px;}
.item_acc{
	float: none;
	color: #04141a;
	width: 260px;
	height: 60px;
	position: relative;
	top: 8px;
	left: 15px;
	text-align: center;
	font-size: 1.4em;
	text-transform: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 30px;
	background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
	box-shadow: 0 0 16px rgba(5,242,255,0.6), 0 0 30px rgba(255,43,214,0.35);
	font-family: beaufort;
	font-weight: bold;
	transition: all 0.4s;
	padding: 0;
	line-height: 1.15;
}
.item_acc span{
	display: block;
	font-size: 0.42em;
	text-transform: uppercase;
	color: #04141a;
	opacity: 0.75;
	line-height: 1;
	margin-top: 4px;
}
.item_acc:hover{
	box-shadow: 0 0 26px var(--neon-cyan), 0 0 46px var(--neon-pink);
	transform: translateY(-2px);
}

/* ================= main ================= */
.main{
	display: grid;
	grid-template-columns: 230px 1fr;
	margin-top: 5px;
	margin-bottom: 10px;
	gap: 20px;
}
@media (max-width: 860px){
	.main{grid-template-columns: 1fr;}
}

/* ================= aside ================= */
.aside{
	margin-bottom: 20px;
	margin-top: 13px;
	min-width: 0;
}
.download{
	color: #04141a;
	width: 195px;
	height: 125px;
	background: linear-gradient(135deg, var(--neon-lime), var(--neon-cyan));
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.4);
	box-shadow: 0 0 16px rgba(186,255,41,0.55), 0 0 28px rgba(5,242,255,0.3);
	font-weight: bold;
	text-align: center;
	font-family: beaufort;
	font-size: 2em;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-content: center;
	transition: all 0.4s;
	margin-bottom: 5px;
}
.download:hover{
	box-shadow: 0 0 26px var(--neon-lime), 0 0 44px var(--neon-cyan);
	transform: translateY(-2px);
}
.download span{
	font-size: 0.4em;
	text-transform: uppercase;
	opacity: 0.75;
}
.aside .bx{
	border-radius: 8px;
	margin-bottom: 12px;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	box-shadow: 0 0 14px rgba(5,242,255,0.15), inset 0 0 20px rgba(5,242,255,0.03);
	overflow: hidden;
}
.aside .bx .title{
	padding: 12px 14px;
	position: relative;
	background: linear-gradient(90deg, rgba(5,242,255,0.16), rgba(255,43,214,0.08));
	border-bottom: 1px solid rgba(5,242,255,0.4);
}
.aside .bx .title h1{
	color: var(--neon-cyan);
	font-weight: bold;
	font-size: 1.15em;
	text-indent: 18px;
	font-family: beaufort;
	position: relative;
	text-shadow: 0 0 8px rgba(5,242,255,0.6);
}
.aside .bx .title h1::before{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 9px;
	height: 9px;
	transform: translateY(-50%) rotate(45deg);
	background: var(--neon-pink);
	box-shadow: 0 0 8px var(--neon-pink), 0 0 16px var(--neon-pink);
}
.aside .bx .desc{
	width: 100%;
	margin: 0 auto;
}
.aside_bottom, .aside_top{
	width: 100%;
	height: 3px;
	margin: 0 auto;
	position: relative;
	background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
	opacity: 0.7;
}
.aside .bx .desc{padding: 8px 5px;}
.aside .bx .desc p{
	color: var(--ink);
	font-weight: bold;
	font-size: 0.9em;
	text-indent: 15px;
	padding: 6px 5px;
}
.aside .bx .desc p span{
	margin-left: 6px;
	font-size: 0.8em;
	text-transform: uppercase;
}
.aside .bx .desc p .on, .aside .bx .desc p .off{
	border-radius: 4px;
	padding: 2px 9px;
}
.aside .bx .desc p .on{
	background-color: rgba(186,255,41,0.15);
	color: var(--neon-lime);
	border: 1px solid var(--neon-lime);
	box-shadow: 0 0 8px rgba(186,255,41,0.6);
}
.aside .bx .desc p .off{
	background-color: rgba(255,43,90,0.15);
	color: #ff2b5a;
	border: 1px solid #ff2b5a;
	box-shadow: 0 0 8px rgba(255,43,90,0.6);
}
.aside .bx .desc ul li{display: block;}
.aside .bx .desc ul li a{
	color: var(--ink);
	margin: 0 auto;
	width: 95%;
	display: block;
	padding: 12px 0;
	text-align: center;
	font-weight: bold;
	text-indent: -10px;
	border-bottom: 1px solid rgba(5,242,255,0.12);
	transition: all 0.3s;
}
.aside .bx .desc ul li:last-child a{border-bottom: initial;}
.aside .bx .desc ul li a:hover{
	color: var(--neon-cyan);
	text-shadow: 0 0 8px rgba(5,242,255,0.7);
}

.aside .bx .desc table{width: 80%; margin: 0 auto;}
.aside .bx .desc table .tr{
	color: var(--neon-pink);
	font-size: 0.9em;
	text-align: center;
}
.aside .bx .desc table tr td{
	color: var(--ink);
	font-size: 0.9em;
	text-align: center;
	padding: 3px;
}
.aside .bx .title .imgaside{
	position: absolute;
	top: -16px;
	right: 0;
	z-index: 2;
	filter: drop-shadow(0 0 6px rgba(5,242,255,0.7));
}

/* ================= main-content ================= */
.main-content{flex: 1 1 auto; min-width: 0;}

/* content wrapper panel (was conteu_top/middle/bottom PNGs) */
.conteudo{
	padding: 35px;
	border-radius: 10px;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	box-shadow: 0 0 24px rgba(5,242,255,0.18), 0 0 50px rgba(178,107,255,0.08);
}
.content-main{}
.content-main p{
	color: var(--ink-dim);
	font-size: 1em;
	margin-bottom: 7px;
	line-height: 1.5;
}
.conteu_top, .conteu_bottom{
	width: 100%;
	height: 4px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	background: linear-gradient(90deg, transparent, var(--neon-pink), var(--neon-cyan), transparent);
	box-shadow: 0 0 12px rgba(5,242,255,0.6);
	border-radius: 4px;
}
.conteu_top{top: 6px;}
.conteu_bottom{top: -6px;}

.conteudo .title{
	display: block;
	width: 100%;
	padding: 15px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(5,242,255,0.35);
	position: relative;
}
.conteudo .title::after{
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink), transparent);
	box-shadow: 0 0 8px rgba(5,242,255,0.7);
}
.conteudo .title h2{
	color: var(--neon-cyan);
	font-size: 1.5em;
	font-family: beaufort;
	text-shadow: 0 0 10px rgba(5,242,255,0.55);
}
.conteudo .title h2 img{
	float: left;
	position: relative;
	top: 3px;
	left: -5px;
	filter: drop-shadow(0 0 6px rgba(255,43,214,0.7));
}

/* ================= economy / donate item cards ================= */
.donate{
	padding: 15px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}
.donate h2{color: var(--neon-cyan); width: 100%; text-align: center; margin-bottom: 5px; text-shadow: 0 0 8px rgba(5,242,255,0.5);}
.donate p{text-align: center; width: 100%;}
.donate > img{width: 100%; margin: 0 auto; filter: drop-shadow(0 0 10px rgba(5,242,255,0.4));}
.item_donate{
	flex: 1 1 170px;
	max-width: 260px;
	background: rgba(10,14,26,0.75);
	padding: 12px;
	border-radius: 8px;
	margin: 0;
	border: 1px solid rgba(5,242,255,0.3);
	box-shadow: 0 0 12px rgba(5,242,255,0.15);
	transition: all 0.3s;
}
.item_donate:hover{
	border-color: var(--neon-pink);
	box-shadow: 0 0 18px rgba(255,43,214,0.35);
}
.item_donate h3{
	color: var(--neon-cyan);
	font-size: 1.15em;
	padding-bottom: 7px;
	text-shadow: 0 0 6px rgba(5,242,255,0.4);
}
.item_donate p{
	color: var(--ink-dim);
	font-size: 0.9em;
}
.item_donate .valor{
	color: var(--neon-lime);
	font-size: 1.4em;
	font-weight: bold;
	text-align: left;
	text-shadow: 0 0 8px rgba(186,255,41,0.6);
}
.item_donate a{
	padding: 9px 14px;
	background: linear-gradient(135deg, var(--neon-lime), #04c46a);
	color: #04140a;
	border-radius: 20px;
	margin: 8px 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: bold;
	box-shadow: 0 0 10px rgba(186,255,41,0.45);
	transition: all 0.3s;
}
.item_donate a:hover{
	box-shadow: 0 0 18px var(--neon-lime);
	transform: translateY(-1px);
}
.item_donate a img.buy{display: none;} /* legacy buy icon retired in favor of CSS button */

/* ================= ranking / tables ================= */
.content-main table{
	width: 100%;
	padding: 15px;
	border-collapse: collapse;
}
.content-main .bg-tr{
	width: 100%;
	color: var(--neon-cyan);
	text-align: center;
	margin: 15px 0;
	font-size: 1.1em;
	text-shadow: 0 0 6px rgba(5,242,255,0.5);
}
.content-main .bg-tr th{padding: 10px 4px; border-bottom: 1px solid rgba(5,242,255,0.35);}
.content-main .tr{
	color: var(--ink);
	text-align: center;
	position: relative;
	top: 5px;
}
.content-main .tr img{filter: drop-shadow(0 0 5px rgba(5,242,255,0.6));}

/* ================= forms ================= */
.formRegister{
	width: 60%;
	margin: 0 auto;
	position: relative;
}
.formRegister .span{text-align:center; color: var(--ink-dim);}
.formRegister .span a{color: var(--neon-cyan);}
.formRegister .span a:hover{text-decoration:underline; text-shadow: 0 0 6px rgba(5,242,255,0.6);}
.formRegister input{
	display:block;
	width: 100%;
	outline: 0;
	padding: 12px 0;
	text-indent: 25px;
	border-radius: 4px;
	border: 1px solid rgba(5,242,255,0.35);
	margin: 0 auto;
	background-color: rgba(5,8,16,0.85);
	margin-top: 8px;
	color: var(--ink);
	font-weight: 600;
	transition: all 0.3s;
}
.formRegister input:focus{
	border-color: var(--neon-cyan);
	box-shadow: 0 0 12px rgba(5,242,255,0.55);
}
.formRegister .bnt-create,
.notices button[type=submit]{
	display: block;
	padding: 15px 25px;
	width: 203px;
	height: 55px;
	background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
	text-transform: uppercase;
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	transition: all 0.4s;
	border: initial;
	border-radius: 6px;
	cursor: pointer;
	font-family: beaufort;
	margin-top: 12px;
	box-shadow: 0 0 14px rgba(178,107,255,0.55);
}
.formRegister .bnt-create:hover,
.notices button[type=submit]:hover{
	color: #fff;
	box-shadow: 0 0 24px var(--neon-pink), 0 0 40px rgba(178,107,255,0.5);
	transform: translateY(-1px);
}

/* register ok / erro */
.ok, .erro{
	display: block;
	width:70%;
	text-align: center;
	margin: 0 auto;
	margin-top: 10px;
	padding:10px;
	font-size: 1.1em;
}
.ok{color: var(--neon-lime); text-shadow: 0 0 6px rgba(186,255,41,0.5);}
.erro{color: #ffb020; text-shadow: 0 0 6px rgba(255,176,32,0.5);}
.ok span, .erro span{
	display: block;
	font-weight:100;
	font-size: 0.9em;
}

/* ================= slideshow (currently unused, kept clean) ================= */
.slide{
	width: 637px;
	max-width: 100%;
	height: 344px;
	margin: 0 auto;
	display: block;
	padding: 15px;
	background: rgba(8,11,22,0.7);
	border: 1px solid var(--panel-border);
	border-radius: 8px;
}
.slideshow-container{
	float: left;
	width: 515px;
	height: 300px;
	border-radius: 6px;
	position: relative;
	top: 7px;
	left: 15px;
	margin: auto;
}
.slideshow-container img{border-radius: 6px;}
.mySlides {display: none;}
.text{
  color: #f2f2f2;
  font-size: 0.9em;
  padding: 15px 12px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: left;
  background-color: rgba(0,0,0,0.85);
  border-radius: 0 0 6px 6px;
}
.text h2{
  color: var(--neon-cyan);
  font-size: 1.3em;
  text-shadow: 0 0 6px rgba(5,242,255,0.5);
}
.text a{
	color: var(--neon-pink);
	display: inline-block;
}
.text a:hover{
	color: var(--neon-pink);
	text-decoration: underline;
}
.numbertext{
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.fade{
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* ================= info blocks (rules / videos / donate / downloads intro) ================= */
.info{margin-top: 15px;}
.info header{
	width: 100%;
	padding: 10px 10px;
	border-bottom: 1px solid rgba(5,242,255,0.3);
	position: relative;
}
.info header::after{
	content: "";
	position: absolute;
	left: 10px;
	bottom: -1px;
	width: 120px;
	height: 2px;
	background: linear-gradient(90deg, var(--neon-pink), transparent);
	box-shadow: 0 0 8px rgba(255,43,214,0.6);
}
.info header h2{
	padding: 10px;
	color: var(--neon-cyan);
	font-size: 1.5em;
	font-family: beaufort;
	text-shadow: 0 0 8px rgba(5,242,255,0.5);
}
.info .desc{padding: 10px 20px;}
.info .desc-inf{padding: 10px 20px;}
.info .desc-inf h2{
	color: var(--neon-cyan);
	font-family: beaufort;
	font-weight: 100;
	font-size: 1em;
	padding-bottom: 5px;
}
.info .desc-inf p a{color: var(--neon-cyan);}
.info .desc-inf p a:hover{
	color: var(--neon-pink);
	text-decoration: underline;
}

.info .desc p{
	text-align: left;
	color: var(--neon-cyan);
	font-size: 1em;
	font-weight: bold;
}
.info .desc p span{
	color: var(--ink);
	margin-left: 6px;
}
.info .video{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
}
.info .video .item_videos{
	border: 2px solid var(--neon-cyan);
	border-radius: 6px;
	margin-bottom: 8px;
	box-shadow: 0 0 14px rgba(5,242,255,0.35);
}

/* ================= download page buttons ================= */
.download_file{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.download_file a{
	width: 238px;
	padding: 18px;
	color: #fff;
	display: block;
	text-align: center;
	background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
	border-radius: 8px;
	font-size: 1.4em;
	font-weight: bold;
	font-family: beaufort;
	text-transform: uppercase;
	margin: 0 10px;
	box-shadow: 0 0 14px rgba(5,242,255,0.45);
	transition: all 0.35s;
}
.download_file a:hover{
	box-shadow: 0 0 26px var(--neon-cyan), 0 0 40px rgba(178,107,255,0.5);
	transform: translateY(-2px);
}
.download_file a span{
	display: block;
	font-size: 0.9em;
	text-transform: none;
	opacity: 0.85;
}
.g-recaptcha{
	margin: 7px 0;
	transform:scale(1.05);
	-webkit-transform:scale(1.05);
	transform-origin:0 0;
	-webkit-transform-origin:0 0;
}

/* ================= footer ================= */
.footer{
	background: linear-gradient(180deg, rgba(8,10,20,0.6), rgba(4,6,12,0.95));
	border-top: 1px solid var(--neon-cyan);
	box-shadow: 0 -6px 24px rgba(5,242,255,0.15);
	padding: 50px;
}
.footer .rodape{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.footer .rodape .bx{
	width: 100%;
	max-width: 350px;
}
.footer .rodape .uteis{width: 100%; max-width: 150px;}
.ttdev{margin-top: 20px;}
.footer .rodape .bx .title{padding-bottom: 10px;}
.footer .rodape .bx .title h2{color: var(--neon-cyan); text-shadow: 0 0 6px rgba(5,242,255,0.5);}
.footer .rodape .bx .desc{}
.footer .rodape .bx .desc p{color: var(--ink-dim);}
.footer .rodape .bx .desc ul li a{color: var(--ink-dim);}
.footer .rodape .bx .desc ul li a:hover{
	color: var(--neon-pink);
	text-decoration: underline;
}
.autorais{
	padding: 8px;
	border-top: 1px solid rgba(5,242,255,0.15);
	background-color: rgba(0,0,0,0.4);
}
.autorais span{display: block;}
.autorais span a{
	color: var(--neon-cyan);
	display: inline-block;
}
.autorais span a:hover{text-decoration: underline;}
.direitos{}
.direitos p{
	text-align: center;
	color: var(--ink-dim);
	font-size: 0.8em;
}
.fb-page{
	width: 100%;
	border: 1px solid var(--neon-cyan);
	box-shadow: 0 0 12px rgba(5,242,255,0.3);
	border-radius: 4px;
	display: block;
}