@font-face {
	font-family: 'Trajan Pro Regular';
	font-style: normal;
	font-display: swap;
	font-weight: normal;
	src: local('Trajan Pro Regular'), url('../fonts/TrajanPro-Regular.woff') format('woff');
}


@font-face {
	font-family: 'Trajan Pro Bold';
	font-style: normal;
	font-display: swap;
	font-weight: normal;
	src: local('Trajan Pro Bold'), url('../fonts/TrajanPro-Bold.woff') format('woff');
}

@font-face {
	font-family: 'Open Sans Regular';
	font-style: normal;
	font-display: swap;
	font-weight: normal;
	src: local('Open Sans Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
}


@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-display: swap;
	font-weight: normal;
	src: local('Open Sans'), url('../fonts/OpenSans-Regular.woff') format('woff');
}


@font-face {
	font-family: 'Open Sans Italic';
	font-style: normal;
	font-display: swap;
	font-weight: normal;
	src: local('Open Sans Italic'), url('../fonts/OpenSans-Italic.woff') format('woff');
}


@font-face {
	font-family: 'Open Sans Light';
	font-style: normal;
	font-display: swap;
	font-weight: normal;
	src: local('Open Sans Light'), url('../fonts/OpenSans-Light.woff') format('woff');
}


@font-face {
	font-family: 'Open Sans Light Italic';
	font-style: normal;
	font-display: swap;
	font-weight: normal;
	src: local('Open Sans Light Italic'), url('../fonts/OpenSans-LightItalic.woff') format('woff');
}


@font-face {
	font-family: 'Open Sans SemiBold';
	font-style: normal;
	font-display: swap;
	font-weight: normal;
	src: local('Open Sans SemiBold'), url('../fonts/OpenSans-SemiBold.woff') format('woff');
}


@font-face {
	font-family: 'Open Sans SemiBold Italic';
	font-style: normal;
	font-display: swap;
	font-weight: normal;
	src: local('Open Sans SemiBold Italic'), url('../fonts/OpenSans-SemiBoldItalic.woff') format('woff');
}


@font-face {
	font-family: 'Open Sans Bold';
	font-style: normal;
	font-display: swap;
	font-weight: normal;
	src: local('Open Sans Bold'), url('../fonts/OpenSans-Bold.woff') format('woff');
}


@font-face {
	font-family: 'Open Sans Bold Italic';
	font-style: normal;
	font-display: swap;
	font-weight: normal;
	src: local('Open Sans Bold Italic'), url('../fonts/OpenSans-BoldItalic.woff') format('woff');
}


@font-face {
	font-family: 'Open Sans ExtraBold';
	font-style: normal;
	font-display: swap;
	font-weight: normal;
	src: local('Open Sans ExtraBold'), url('../fonts/OpenSans-ExtraBold.woff') format('woff');
}


@font-face {
	font-family: 'Open Sans ExtraBold Italic';
	font-style: normal;
	font-display: swap;
	font-weight: normal;
	src: local('Open Sans ExtraBold Italic'), url('../fonts/OpenSans-ExtraBoldItalic.woff') format('woff');
}


@font-face {
	font-family: 'Open Sans Light Regular';
	font-style: normal;
	font-display: swap;
	font-weight: normal;
	src: local('Open Sans Light Regular'), url('../fonts/OpenSans-Light-webfont.woff') format('woff');
}


@font-face {
	font-family: 'Open Sans Condensed Bold';
	font-style: normal;
	font-display: swap;
	font-weight: normal;
	src: local('Open Sans Condensed Bold'), url('../fonts/OpenSans-CondBold.woff') format('woff');
}

/* bg-bottom.png used to sit here, but body::before now covers the whole viewport at every
   scroll position, so it was 311KB downloaded and never seen. */
body{
	background: #061315;
	font-family: "Open Sans Light", sans-serif;
}

/* The header artwork now backs the whole page instead of being a strip at the top. It is
   fixed and cover-sized so it never tiles or stretches, with a scrim on top of it - clear
   around the logo, solid further down - so the panels stay readable over it. */
body::before,
body::after{
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
}

/* JPEG, not the PNG: the artwork is fully opaque, so the PNG was spending 952KB on
   lossless encoding of a photographic image. Same picture at 146KB. */
body::before{
	z-index: -3;
	background: url("../images/bg-header-clean.jpg") center top / cover no-repeat;
	/* Very slow push-in so the scene never sits perfectly still. */
	animation: bg-drift 60s ease-in-out infinite alternate;
}

body::after{
	z-index: -2;
	background: linear-gradient(180deg,
		rgba(6, 19, 21, 0) 0%,
		rgba(6, 19, 21, .35) 22%,
		rgba(6, 19, 21, .85) 58%,
		#061315 100%);
}

@keyframes bg-drift{
	from{ transform: scale(1); }
	to{ transform: scale(1.07) translateY(-1.5%); }
}

/* ==================== AMBIENT BACKGROUND ====================
   Motes and fog are tiled gradients rather than hundreds of elements: each layer is one
   box whose background tile repeats, and the loop translates by exactly one tile height,
   so it never seams and the whole thing stays on the compositor. */
.ambient{
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.ambient-motes{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 200%;
	background-repeat: repeat;
	will-change: transform;
}

.ambient-motes-far{
	background-image:
		radial-gradient(1px 1px at 12% 8%,  rgba(69, 243, 195, .55), transparent),
		radial-gradient(1px 1px at 63% 17%, rgba(69, 243, 195, .40), transparent),
		radial-gradient(1px 1px at 31% 42%, rgba(100, 255, 218, .50), transparent),
		radial-gradient(1px 1px at 84% 55%, rgba(69, 243, 195, .35), transparent),
		radial-gradient(1px 1px at 47% 71%, rgba(100, 255, 218, .45), transparent),
		radial-gradient(1px 1px at 8%  88%, rgba(69, 243, 195, .40), transparent),
		radial-gradient(1px 1px at 92% 33%, rgba(100, 255, 218, .30), transparent),
		radial-gradient(1px 1px at 55% 27%, rgba(69, 243, 195, .35), transparent),
		radial-gradient(1px 1px at 21% 64%, rgba(100, 255, 218, .40), transparent),
		radial-gradient(1px 1px at 73% 84%, rgba(69, 243, 195, .30), transparent);
	background-size: 380px 380px;
	animation: motes-rise 58s linear infinite;
	opacity: .8;
}

.ambient-motes-near{
	background-image:
		radial-gradient(2px 2px at 22% 15%, rgba(100, 255, 218, .95), transparent),
		radial-gradient(2px 2px at 75% 34%, rgba(69, 243, 195, .80), transparent),
		radial-gradient(2px 2px at 41% 58%, rgba(100, 255, 218, .90), transparent),
		radial-gradient(3px 3px at 88% 78%, rgba(56, 228, 183, .70), transparent),
		radial-gradient(2px 2px at 57% 92%, rgba(100, 255, 218, .75), transparent),
		radial-gradient(2px 2px at 9%  47%, rgba(170, 215, 255, .80), transparent),
		radial-gradient(3px 3px at 66% 6%,  rgba(69, 243, 195, .65), transparent),
		radial-gradient(2px 2px at 33% 81%, rgba(100, 255, 218, .70), transparent),
		radial-gradient(2px 2px at 50% 40%, rgba(255, 190, 80, .75), transparent),
		radial-gradient(3px 3px at 80% 20%, rgba(255, 170, 50, .65), transparent);
	background-size: 480px 480px;
	animation: motes-rise 34s linear infinite, motes-pulse 7s ease-in-out infinite;
}

/* Exactly one tile height per cycle - anything else shows a jump on wrap. The midpoint
   sway is what stops it reading as a straight vertical scroll. */
@keyframes motes-rise{
	0%{ transform: translate3d(0, 0, 0); }
	50%{ transform: translate3d(16px, -25%, 0); }
	100%{ transform: translate3d(0, -50%, 0); }
}

@keyframes motes-pulse{
	0%, 100%{ opacity: .55; }
	50%{ opacity: 1; }
}

.ambient-fog{
	position: absolute;
	left: -25%;
	right: -25%;
	top: 8%;
	height: 60%;
	background:
		radial-gradient(60% 55% at 25% 45%, rgba(26, 188, 156, .16), transparent 70%),
		radial-gradient(45% 50% at 72% 60%, rgba(13, 79, 67, .14), transparent 70%);
	filter: blur(22px);
	animation: fog-drift 48s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes fog-drift{
	from{ transform: translate3d(-4%, 0, 0); }
	to{ transform: translate3d(4%, -2%, 0); }
}

@media (prefers-reduced-motion: reduce) {
	body::before,
	.ambient-motes,
	.ambient-fog,
	.site-header-logo img{
		animation: none !important;
	}
}

/* Just the band the logo sits in - the artwork behind it comes from body::before. The logo
   is laid out in flow and the gaps are padding, so they are stated in pixels instead of
   falling out of a percentage offset: 135px top = 75px navbar + 60px clear above the logo,
   125px bottom = 70px clear below it + the 55px the content pulls back up. */
.site-header{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 80px 0 50px;
}

/* Scaled down to a balanced 360px so it doesn't overwhelm the viewport */
.site-header-logo{
	position: relative;
	z-index: 2;
	width: 360px;
	max-width: 85vw;
	display: inline-block;
	text-decoration: none !important;
}

.site-header-logo img{
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .75)) drop-shadow(0 0 10px rgba(56, 228, 183, .25));
	animation: logo-float 6s ease-in-out infinite;
	transition: filter .3s ease, transform .3s ease;
	will-change: transform, filter;
}

.site-header-logo:hover img{
	filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .8)) drop-shadow(0 0 20px rgba(69, 243, 195, .55));
}

/* Gentle floating levitation with a calm, subtle breathing glow */
@keyframes logo-float{
	0%, 100%{
		transform: translateY(0);
		filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .75)) drop-shadow(0 0 10px rgba(56, 228, 183, .25));
	}
	50%{
		transform: translateY(-7px);
		filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .65)) drop-shadow(0 0 18px rgba(69, 243, 195, .45));
	}
}

.main-container{
	margin-top: -55px;
}

.main-page{
	background-color: #081a1c;
}

.page-title h2{
	color: #fff;
	font-family: "Trajan Pro Regular", serif;
	border-bottom: 1px solid #0d282b;
	padding: 10px 0;
	font-size: 1.6rem;
}

.article-title{
	background: url("../images/article-title.png") center top no-repeat;
	width: 100%;
	height: 64px;
	background-size: cover;
	line-height: 64px;
	text-transform: uppercase;
	color: #fff!important;
	font-family: "Trajan Pro Bold", serif;
	text-decoration: none;
}

.article-title a{
	color: #fff!important;
	font-family: "Trajan Pro Bold", serif;
	text-decoration: none;
	font-size: .9rem;
}

.article-date{
	float: right;
	text-transform: none;
	color: #ffffff !important;
	font-size: 12px;
}

.article-body .text{
	color: #689793;
	font-family: "Open Sans", sans-serif;
	font-size: .8rem;
	padding: 5px;
}

.page, .nextpostslink{
	background: #192929;
	padding: 1px 7px;
	color: #fff;
	text-decoration: none;
}

.current, .page:hover, .nextpostslink:hover{
	background: #051315;
	border-bottom: 1px solid #26a69a;
	padding: 1px 7px;
	color: #fff;
	text-decoration: none;
	-webkit-box-shadow: 0 0 5px #2a0c4c;
	-moz-box-shadow: 0 0 5px #f15b1461;
	box-shadow: 0 0 5px #9ec4c4;
}

.wp-pagenavi{
	text-align: center;
	color: #ffffff;
}

.side-panel{
	border-style: solid;
	border-image-slice: 27 27 27 27;
	border-image-width: 20px 20px 20px 20px;
	border-image-outset: 0px 0px 0px 0px;
	border-image-repeat: stretch stretch;
	border-image-source: url("../images/border.png");
	padding: 5px 8px 8px 8px;
}

.panel-bg{
	background-image: url("../images/panel-bg.png");
	background-size: cover;
}


.panel-title{
	background: url("../images/header.png") center top no-repeat;
	width: 327px;
	height: 113px;
	background-size: cover;
	line-height: 113px;
	text-transform: uppercase;
	color: #fff !important;
	font-family: "Trajan Pro Bold", serif;
	text-decoration: none;
	text-align: center;
	padding-top: 7px;
	font-size: 14px;
	text-shadow: 0 1px 0 #000;
	margin: auto;
	transform: translateY(-60px);
	margin-bottom: -75px;
}

table{
	color: #ffffff!important;
}

.table-hover > tbody > tr:hover > *{
	color: #fff!important;
}

.empire-1{
	color: #ff0e0e
}

.empire-2{
	color: #fff700
}

.empire-3{
	color: #0043ff
}

/* on ranking table make odd rows darker */
.table-hover > tbody > tr:nth-child(odd){
	/* gradient from 040e26 to 020816  left to right*/
	background: -moz-linear-gradient(left,  rgba(6, 22, 25,1) 0%, rgba(3, 11, 13,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(6, 22, 25,1)), color-stop(100%,rgba(3, 11, 13,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgb(6 22 25) 0%, rgb(10 34 38) 100%)
	/*background: -webkit-linear-gradient(left,  rgb(43 71 71) 0%,rgb(8 3 12) 100%)/* Chrome10+,Safari5.1+ */
}

/* on ranking table make even rows darker */
.table-hover > tbody > tr:nth-child(even){
	/* gradient from 050a17 to 020816  left to right*/
	background: -moz-linear-gradient(left,  rgba(5, 15, 17,1) 0%, rgba(3, 11, 13,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(5, 15, 17,1)), color-stop(100%,rgba(3, 11, 13,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgb(4 15 17) 0%, rgb(8 27 30) 100%) /* Chrome10+,Safari5.1+ */
	/*background: -webkit-linear-gradient(left,  rgb(55 93 93) 0%,rgb(8 3 12) 100%) /* Chrome10+,Safari5.1+ */
}



table > :not(caption) > * > * {
	border-bottom-width: 0!important;
}

.top10-table > *{
	font-size: 0.9rem;
}

.btn-image{
	background: url("../images/image-btn.png") center top no-repeat;
	width: 103px;
	height: 31px;
	line-height: 31px;
	color:#fff;
	border: none;
	font-family: "Trajan Pro Regular", serif;
	font-size: 0.8rem;
	display: block;
	text-align: center;
}

.btn-image:hover{
	filter: brightness(120%);
}


a{
	text-decoration: none!important;
	color: #fff;
}

a:hover{
	color: #45f3c3 !important;
}

/* Same field dress as the login panel (.login-input) so every form on the site reads as
   one set: filled box with a full border, not an underline. */
.form-control{
	background: #0d2326;
	border: 1px solid rgba(38, 166, 154, .35);
	border-radius: 6px;
	margin-bottom: 10px;
	color: #ffffff;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.form-control:focus{
	background: #112d30;
	border: 1px solid rgba(69, 243, 195, .7);
	border-radius: 6px;
	margin-bottom: 10px;
	color: #ffffff;
	box-shadow: 0 0 0 3px rgba(56, 228, 183, .18);
}

/* Chrome and Edge repaint an autofilled field near-white and ignore background-color; only
   a huge inset shadow holds the colour. Mirrors the .login-input fix below. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover{
	-webkit-text-fill-color: #ffffff;
	-webkit-box-shadow: 0 0 0 1000px #0d2326 inset;
	        box-shadow: 0 0 0 1000px #0d2326 inset;
	caret-color: #ffffff;
}

.form-control:-webkit-autofill:focus{
	-webkit-text-fill-color: #ffffff;
	-webkit-box-shadow: 0 0 0 1000px #112d30 inset, 0 0 0 3px rgba(56, 228, 183, .18);
	        box-shadow: 0 0 0 1000px #112d30 inset, 0 0 0 3px rgba(56, 228, 183, .18);
	caret-color: #ffffff;
}

.navbar-nav{
	justify-content: space-around;
	flex: 1;
}

.footer-logo{
	padding: 1.5rem 0;
}

.footer-copyright{
	background: #051315;
	border-top: 1px solid #0d282b;
}

.footer-parcerias{
	background: #051315;
	border-top: 1px solid #0d282b;
}

.highlight{
	color: #1abc9c;
}

.lv{
	color: #ffffff;
}
body{
	color: #ffffff;
}
.btn-info{
	border-radius: 0;
	margin: auto !important;
	display: block;
	background: #400904;
	border: 1px solid #26a69a;
	color: #fff;
	font-family: "Trajan Pro Regular", serif;
	font-size: 0.8rem;
}

.list-group-new .list-group-item{
	padding: 5px;
}

.statistics-table td:first-child{
	padding-left: 1.5rem;
}

.statistics-table td:last-child{
	padding-right: 1.5rem;
}

.download-btn {
    top: 0px;
    left: 25px;
}

.download-btn-content {
    top: 20px;
    left: 75px;
}

.download-btn-content span {
    font-size: 14px;
}

.text-primary{
    color: #ffd12ac9  !important

}

.text-secondary{
    color: #ffffff  !important
}
.nav-link-text{
	font-size: 0.8rem;
	text-align: center;
	margin-bottom: 1.1rem;
	color: #ffffff;
}
.panel-login{
	font-size: 0.8rem;
	text-align: center;
	margin-bottom: 1.1rem;
	color: #ffffff;
}

.panel-subtitle{
	font-size: 0.8rem;
	text-align: center;
	margin-bottom: 1.1rem;
}

.first-player{
	padding: 1rem;
	background: url("../images/first-bg.png") center top no-repeat;
	background-size: cover;
	margin: 0 10%;
}

.first-player p{
	font-size: .8rem;
}

.player-stats{
	display: flex;
	align-items: center;
	justify-content: center;
}

.stats{
	vertical-align: middle;
	display: inline-block;
}

.logo {
	position:fixed;
	right:20%;
	top:25%;
	z-index:9;
	transition:all .5s ease-in-out 0s
}
#mini-icons {
	position:fixed;
	left:0;
	top:30%;
	z-index:9;
	transition:all .5s ease-in-out 0s
}
#mini-icons .languagewrapper,
#mini-icons>* {
	position:relative
}
#mini-icons>* {
	width:56px;
	height:56px;
	margin-bottom:2px;
	display:block;
	line-height:56px
}
#mini-icons a {
	display:block;
	color:#fff;
	font-size:24px;
	background-color:#051416;
	transition:all .2s ease-in-out 0s
}
#mini-icons .languagewrapper .current-language {
	position:relative;
	z-index:2;
	width:100%;
	height:100%;
	display:block;
	background-size:32px
}
#mini-icons .languagewrapper a:hover {
	background-color:#0d282b
}
#mini-icons .languagewrapper .languages {
	opacity:0;
	position:absolute;
	top:0;
	transition:all .5s ease-in-out 0s;
	z-index:1;
	height:100%
}
#mini-icons .languagewrapper .languages a {
	float:left;
	height:100%;
	display:block;
	background-size:32px
}
#mini-icons .twitch .twitch-live-info,
#mini-icons .youtube .youtube-live-info {
	font-size:12px;
	transform:rotate(-90deg);
	position:absolute;
	width:100%;
	height:15px;
	right:-35px;
	top:20px;
	line-height:15px;
	font-family:Roboto,Arial,sans-serif;
	text-transform:uppercase;
	color:#fff
}
#mini-icons .languagewrapper:hover .languages {
	opacity:1
}
#mini-icons .twitch.active a,
#mini-icons .twitch:hover a {
	//*background-color:#6441a5*//
}
#mini-icons .twitch .twitch-live-info,
#mini-icons .youtube .youtube-live-info,
#mini-icons .youtube.active a,
#mini-icons .youtube:hover a {
	//*background-color:#cc110c*//
}
#twitch-sidebar,
#youtube-sidebar {
	left:-300px;
	width:300px;
	transition:all .5s ease-in-out 0s;
	padding:20px;
	bottom:0
}
#mini-icons .facebook:hover a {
	//*background-color:#3b5998*//
}
#mini-icons .toplist:hover a {
	background-color:#dfd1af
}
#mini-icons .discord:hover a {
	//*background-color:#738adb*//
}
#mini-icons .trovo:hover a {
	background-color:#1bbb72
}
#mini-icons .tiktok:hover a {
	background-color:#ee1d52
}
#mini-icons .instagram:hover a {
	//*background-color:#a63780*//
}
#twitch-sidebar {
	position:fixed;
	top:0;
	background-color:#6441a5
}
#twitch-sidebar .close {
	position:absolute;
	top:15px;
	right:15px;
	color:#fff
}
#youtube-sidebar {
	position:fixed;
	top:0;
	background-color:#cc110c
}
#youtube-sidebar .close {
	position:absolute;
	top:15px;
	right:15px;
	color:#fff
}

@media only screen and (max-width:992px) {
	.blank {
		display: block
	}

	#mini-icons,
	.discord-widget,
	.noblank {
		display: none
	}
}

.login-links{
	font-size: 0.7rem;
}

@media only screen and (min-width:992px) {
	.main-container .row .col-md-3 {
		padding-right: 0;
		padding-left: 0;
	}
}
/* With the right-hand column gone there is room to breathe: let the shell grow on wide
   screens instead of leaving the freed space empty. Bootstrap centres .container itself. */
@media (min-width: 1400px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		max-width: 1220px;
	}
}

@media (min-width: 1700px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		max-width: 1380px;
	}
}

@media (min-width: 1900px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		max-width: 1480px;
	}
}

.main-container > .row{
	justify-content: center;
}

@media(max-width: 1400px) {
	.panel-title{
		width: 245px;
		height: 84px;
		line-height: 84px;
		font-size: .75rem;
		transform: translateY(-45px);
		margin-bottom: -45px;
		padding-top: 5px;
	}
}

@media(max-width: 1200px) {
	.panel-title{
		width: 245px;
		height: 84px;
		line-height: 84px;
		font-size: .75rem;
		transform: translateY(-45px);
		margin-bottom: -45px;
		padding-top: 5px;
		margin-left: -25px;
	}
}

@media(max-width: 992px) {
	.panel-title{
		width: 327px;
		height: 113px;
		background-size: cover;
		line-height: 113px;
		text-transform: uppercase;
		color: #fff !important;
		font-family: "Trajan Pro Bold", serif;
		text-decoration: none;
		text-align: center;
		padding-top: 7px;
		font-size: 14px;
		text-shadow: 0 1px 0 #000;
		margin: auto;
		transform: translateY(-60px);
		margin-bottom: -75px;
	}
}
.blogroll .list-group-item:not(.active){
	color: #fff;
	text-decoration: none;
	background-color: #092225;
}

.blogroll .list-group-item:hover:not(.active){
	color: #fff;
	text-decoration: none;
	background-color: #0d2c2f;
}


/* One solid strip across the full width, tall enough to enclose the whole row: logo left,
   links after it, language switch pinned right. */
.nav-top-center{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	width: 100%;
	z-index: 3;
	padding: 0;
	background: linear-gradient(180deg, rgba(7, 28, 30, .97) 0%, rgba(3, 11, 22, .98) 100%);
	border-bottom: 1px solid rgba(38, 166, 154, .38);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .55);
}

.nav-top-center > .container{
	min-height: 74px;
}

.nav-top-center .navbar-collapse{
	justify-content: space-between;
}

/* Links are centred on the page itself, not in whatever room the logo and the language
   switch leave over - so they stay put when either of those changes width. Taking the list
   out of the flow means it centres on .nav-top-center, which spans the full width. */
@media (min-width: 992px) {
	.nav-top-center .navbar-nav{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		flex: 0 0 auto;
		justify-content: center;
		margin: 0;
	}
	/* With the list out of the flow the switch is the only child left, so it has to be
	   pushed right explicitly - space-between would park it on the left. */
	.nav-top-center .navbar-collapse{
		justify-content: flex-end;
	}
}

/* Bare text, no button box - the only chrome is the rule underneath. */
.nav-top-center .nav-link{
	position: relative;
	font-family: "Trajan Pro Regular", serif;
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: .8rem;
	padding: .5rem .15rem;
	margin: 0 .85rem;
	color: #a9c8c5 !important;
	border: 0;
	background: none;
	transition: color .2s ease, text-shadow .2s ease, transform .2s ease;
}

/* The rule: pinned on the page you are on, wiped out from the centre on hover. It is a
   scaleX on a pseudo-element rather than a real border so the animation never reflows the
   row - a growing border would shove every link after it sideways. */
.nav-top-center .nav-link::after{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(69, 243, 195, 0) 0%, #38e4b7 50%, rgba(69, 243, 195, 0) 100%);
	transform: scaleX(0);
	transition: transform .25s ease;
}

.nav-top-center .nav-link:hover{
	color: #ffffff !important;
	text-shadow: 0 0 14px rgba(69, 243, 195, .85);
	transform: translateY(-2px);
}

.nav-top-center .nav-link:hover::after,
.nav-top-center .nav-link.active::after{
	transform: scaleX(1);
}

.nav-top-center .nav-link.active{
	color: #ffffff !important;
	text-shadow: 0 0 12px rgba(69, 243, 195, .5);
}

.nav-top-center .navbar-brand{
	position: relative;
	padding: 0;
	margin: 0;
	line-height: 0;
	filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .8));
}

.nav-top-center .navbar-brand::before{
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 110px;
	height: 110px;
	z-index: -1;
	pointer-events: none;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(56, 228, 183, .28) 0%, rgba(56, 228, 183, 0) 65%);
}

/* PT / EN switch - replaces the flag rail that used to float on the left of the page. */
.nav-language{
	display: flex;
	align-items: center;
	gap: 1px;
	padding: 2px;
	border: 1px solid rgba(38, 166, 154, .45);
	border-radius: 3px;
	background: rgba(5, 18, 20, .75);
}

.nav-language-item{
	padding: .3rem .6rem;
	font-family: "Trajan Pro Regular", serif;
	font-size: .72rem;
	letter-spacing: .06em;
	color: #8eb5b2 !important;
	border-radius: 2px;
	transition: color .2s ease, background .2s ease;
}

.nav-language-item:hover{
	color: #ffffff !important;
	background: rgba(38, 166, 154, .2);
}

.nav-language-item.active{
	color: #ffffff !important;
	background: linear-gradient(180deg, rgba(20, 75, 72, .95) 0%, rgba(12, 42, 45, .95) 100%);
	box-shadow: inset 0 1px 0 rgba(100, 255, 218, .25);
}

@media (max-width: 992px) {
	.nav-top-center > .container{
		min-height: 0;
	}
	.nav-top-center .navbar-nav{
		margin-left: 0;
	}
	.nav-top-center .nav-link{
		display: block;
		text-align: center;
		margin: .2rem 0;
	}
	.nav-top-center .navbar-collapse{
		padding-bottom: .75rem;
	}
	.nav-language{
		justify-content: center;
		width: max-content;
		margin: .5rem auto 0;
	}
}

@media (max-width: 992px) {
	.site-header{
		padding: 100px 0 35px;
	}
	/* No width override for the logo here - max-width:100% already clamps it on narrow
	   viewports, and anything else would scale it off its native size. */
	/* Stacked panels bring .panel-title's -60px lift with them, so the first one would
	   climb into the logo without this clearance. */
	.main-container{
		margin-top: 35px;
	}
	.navbar:not(.collapsed) {
		background-color: rgba(0, 0, 0, 0.6);
	}
}

.panel-bg .form-control{
	margin-bottom: 0;
}

.input-group-text{
	background-color: #051315;
	border-radius: 0px;
	border-color: #fff0;
	border-bottom: 1px solid #26a69a;
	color: #ffffff;
}

.input-group-text::after {
	content: '';
	display: inline-block;
	height: 80%;
	width: 1px;
	background-color: #ffffff;
	margin-left: 8px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #fff;
	opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #fff;
}

::-ms-input-placeholder { /* Microsoft Edge */
	color: #fff;
}
/* Muted against the filled field, so a hint no longer reads as typed text. */
.form-control::placeholder {
	color: #7ca3a0;
	opacity: 1;
}
@media (min-width: 992px) {
	.main-container .col-lg-3 {
		padding: 0 !important;
	}
}

/* ==================== FORUM ====================
   Announcement board. Same card language as the reference layout, recoloured to the site's
   blues: a slightly raised panel per row, breadcrumbs above, count badge on the left and
   the latest topic on the right. */
.forum{
	padding: .25rem;
}

.forum-crumbs{
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	padding-bottom: .9rem;
	margin-bottom: 1.1rem;
	border-bottom: 1px solid #0d282b;
	font-size: .95rem;
}

/* The whole trail is one typeface at one size - only the colour separates the crumb you
   are on from the ones you can click back to. 1.6rem matches .page-title h2, since this
   row is the forum's page heading, not a sub-label. */
.forum-crumbs a{
	font-family: "Trajan Pro Regular", serif;
	font-size: 1.6rem;
	letter-spacing: .03em;
	color: #9fc4c1;
}

.forum-crumbs a:hover{
	color: #ffffff !important;
}

.forum-crumbs i{
	font-size: .75rem;
	color: #486483;
}

.forum-crumbs-current{
	font-family: "Trajan Pro Regular", serif;
	font-size: 1.6rem;
	letter-spacing: .03em;
	color: #ffffff;
}

.forum-card{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.35rem;
	margin-bottom: .8rem;
	border: 1px solid rgba(38, 166, 154, .25);
	border-radius: 8px;
	background: linear-gradient(180deg, rgba(10, 35, 38, .85) 0%, rgba(7, 22, 24, .9) 100%);
	box-shadow: inset 0 1px 0 rgba(69, 243, 195, .06);
	color: #cdeeed !important;
	transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

a.forum-card:hover{
	border-color: rgba(69, 243, 195, .55);
	background: linear-gradient(180deg, rgba(14, 52, 55, .9) 0%, rgba(9, 32, 35, .93) 100%);
	transform: translateX(3px);
	color: #ffffff !important;
}

.forum-card-main{
	display: flex;
	align-items: center;
	gap: .75rem;
	min-width: 0;
}

.forum-card-icon{
	font-size: 1.15rem;
	color: #38e4b7;
}

.forum-card-name{
	font-family: "Trajan Pro Regular", serif;
	font-size: 1.05rem;
	letter-spacing: .03em;
	color: #ffffff;
}

.forum-badge{
	min-width: 30px;
	padding: .1rem .45rem;
	border: 1px solid rgba(38, 166, 154, .4);
	border-radius: 5px;
	background: rgba(5, 18, 20, .8);
	font-size: .8rem;
	text-align: center;
	color: #9fc4c1;
}

.forum-card-side{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .25rem;
	text-align: right;
	min-width: 0;
}

.forum-card-last{
	font-weight: 600;
	color: #ffffff;
}

.forum-card-meta{
	font-size: .8rem;
	color: #7ea8a5;
}

.forum-card-empty{
	font-size: .85rem;
	color: #6d829b;
}

.forum-card-title{
	font-size: 1.05rem;
	font-weight: 600;
	color: #ffffff;
}

.forum-card-blank{
	justify-content: center;
	color: #7ea8a5;
}

.forum-topic-head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.4rem;
}

.forum-topic-title{
	margin: 0;
	font-family: "Trajan Pro Bold", serif;
	font-size: 1.5rem;
	color: #ffffff;
}

.forum-topic-body{
	color: #b9cbdf;
	line-height: 1.65;
}

/* Section heading inside a post - gold, underlined, the anchor for each block of text. */
.forum-topic-body h3{
	margin: 1.8rem 0 1rem;
	padding-bottom: .4rem;
	border-bottom: 1px solid rgba(240, 192, 90, .3);
	font-family: "Trajan Pro Regular", serif;
	font-size: 1.15rem;
	color: #ffc861;
}

.forum-topic-body h3:first-child{
	margin-top: 0;
}

.forum-topic-body p{
	margin-bottom: 1rem;
}

.forum-topic-body strong{
	color: #e4eefb;
	font-weight: 700;
}

.forum-topic-body ul{
	padding-left: 1.2rem;
	margin-bottom: 1.4rem;
}

.forum-topic-body li{
	margin-bottom: .45rem;
}

.forum-topic-body li::marker{
	color: #ffc861;
}

.forum-topic-body a{
	color: #7fb4ea;
	text-decoration: underline !important;
}

/* Section tags inside a post: <span class="forum-tag forum-tag-new">NEW</span> */
.forum-tag{
	display: inline-block;
	margin: .6rem 0 .7rem;
	padding: .3rem .8rem;
	border-radius: 5px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #ffffff;
}

.forum-tag::before{
	content: '\25C6\00a0\00a0';
	font-size: .6rem;
	opacity: .8;
}

.forum-tag-new{ background: #8c2f3d; }
.forum-tag-fixed{ background: #2f6b52; }
.forum-tag-gameplay{ background: #38507f; }
.forum-tag-info{ background: #6b5a2f; }

.forum-topic-foot{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.8rem;
	padding-top: 1rem;
	border-top: 1px solid #0d282b;
}

.forum-back{
	font-size: .85rem;
	color: #9fc4c1;
}

@media (max-width: 576px) {
	.forum-card{
		flex-direction: column;
		align-items: flex-start;
		gap: .6rem;
	}
	.forum-card-side{
		align-items: flex-start;
		text-align: left;
	}
}

/* Landing-page category tabs. The forum index (the cards) stays behind the Forum link;
   this is the quick "what's new" strip on the home page. */
.forum-tabs{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding-bottom: 1.1rem;
	margin-bottom: 1.2rem;
	border-bottom: 1px solid #0d282b;
}

.forum-tab{
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .9rem;
	border: 1px solid rgba(38, 166, 154, .28);
	border-radius: 7px;
	background: linear-gradient(180deg, rgba(10, 35, 38, .8) 0%, rgba(7, 22, 24, .88) 100%);
	font-size: .82rem;
	color: #b3d4d1 !important;
	white-space: nowrap;
	transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.forum-tab i{
	font-size: .95rem;
	color: #38e4b7;
}

.forum-tab:hover{
	color: #ffffff !important;
	border-color: rgba(69, 243, 195, .55);
	background: linear-gradient(180deg, rgba(14, 52, 55, .88) 0%, rgba(9, 32, 35, .92) 100%);
}

.forum-tab.active{
	color: #ffffff !important;
	border-color: rgba(69, 243, 195, .75);
	background: linear-gradient(180deg, rgba(20, 75, 72, .95) 0%, rgba(12, 42, 45, .95) 100%);
	box-shadow: inset 0 1px 0 rgba(100, 255, 218, .22);
}

.forum-tab.active i{
	color: #64ffda;
}

/* Feed entries stack, so each needs its own separator - the single-topic view does not. */
.forum-post + .forum-post{
	margin-top: 1.6rem;
	padding-top: 1.6rem;
	border-top: 1px solid #0d282b;
}

.forum-post .forum-topic-title a{
	color: #ffffff;
}

.forum-post .forum-topic-title a:hover{
	color: #38e4b7 !important;
}

/* Newest-topic banner cards, in place of the old carousel. */
/* Each card is its own framed board now, so the row is pure layout - no panel of its own. */
.forum-highlights{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-bottom: 1.2rem;
}

/* background-image rather than the shorthand - see .sidebar-board for why. */
.forum-highlight{
	display: flex;
	flex-direction: column;
	background-image: linear-gradient(180deg, rgba(8, 28, 30, .92) 0%, rgba(4, 12, 22, .96) 100%);
	transition: transform .2s ease, box-shadow .2s ease;
}

/* The banner runs right up to the inside of the frame instead of floating in the middle of
   it. .ornate-frame's padding clears the full 18px of artwork, but the drawn line ends at
   ~11px - the rest is empty overhang - so 4px on top of the 7px border lands the image
   exactly on the inner edge. Two classes to outrank .ornate-frame, which comes later in
   the file. The caption keeps its own padding, so only the image goes edge to edge. */
.forum-highlight.ornate-frame{
	position: relative;
	padding: 2px 3px 4px;
	border-image-source: none;
}

/* The banner now runs under the frame, and an element paints its own border before its
   descendants - so the image was covering the artwork. Repainting the frame as an overlay
   puts it back on top. The element keeps its 7px transparent border to reserve the space
   but draws nothing (border-image-source:none above), otherwise the frame would render
   twice and every semi-transparent part of it would double up.
   The -7px offsets are the border width: absolute positioning resolves against the padding
   box, so backing out by exactly that lands the overlay on the border box. */
.forum-highlight.ornate-frame::after{
	content: '';
	position: absolute;
	top: -7px;
	right: -7px;
	bottom: -7px;
	left: -7px;
	border: 7px solid transparent;
	border-image-source: url("../images/border-lines.png");
	border-image-slice: 50;
	border-image-width: 33px;
	border-image-repeat: stretch;
	pointer-events: none;
	z-index: 2;
}

/* Everywhere else the frame is the element's own border, painted before ::before, so the
   centre flourishes land on top of the line for free. Here the frame is the ::after overlay
   above, which as a positive z-index outranks an auto one - so the marks have to be lifted
   past it or the line draws straight across them. */
.forum-highlight.ornate-frame::before{
	z-index: 3;
}

/* No border-color shift on hover: .ornate-frame paints a border-image, which overrides
   border-color outright, so it would be a dead declaration. The lift carries the state. */
.forum-highlight:hover{
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}

.forum-highlight-image{
	display: block;
	overflow: hidden;
	aspect-ratio: 29 / 15;
}

.forum-highlight-image img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.forum-highlight:hover .forum-highlight-image img{
	transform: scale(1.06);
}

.forum-highlight-body{
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: .75rem .85rem .9rem;
}

.forum-highlight-date{
	display: flex;
	align-items: center;
	gap: .35rem;
	font-size: .75rem;
	color: #7ea8a5;
}

.forum-highlight-date i{
	color: #38e4b7;
}

.forum-highlight-title{
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
}

.forum-highlight:hover .forum-highlight-title{
	color: #38e4b7;
}

@media (max-width: 768px) {
	.forum-highlights{
		grid-template-columns: 1fr;
	}
}

/* ==================== CHAMPIONS LIST (TOP 10) ====================
   Top 10 players compact podium & ranking list in the sidebar. */
.champions{
	margin-top: 0;
	padding: 0 .15rem;
	border: 0;
	background: none;
}

.champions-head{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding-bottom: .6rem;
	margin-bottom: .6rem;
	border-bottom: 1px solid rgba(26, 188, 156, .2);
}

.champions-trophy-icon{
	color: #f1c40f;
	font-size: 1rem;
	filter: drop-shadow(0 0 6px rgba(241, 196, 15, .5));
}

.champions-title{
	font-family: "Trajan Pro Regular", serif;
	font-size: .85rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #ffffff;
	font-weight: 700;
	text-shadow: 0 0 10px rgba(56, 228, 183, .3);
}

.champions-list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.champions-list li{
	margin: 0;
	padding: 0;
}

.champion{
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .32rem .5rem;
	border-radius: 6px;
	background: rgba(12, 28, 30, 0.45);
	border: 1px solid rgba(26, 188, 156, .12);
	text-decoration: none !important;
	transition: all .2s ease;
}

.champion:hover{
	background: rgba(20, 55, 52, .65);
	border-color: rgba(56, 228, 183, .4);
	transform: translateX(3px);
}

.champion-place{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	font-size: .75rem;
	font-weight: 700;
	transition: all .2s ease;
}

.champion-place i{
	font-size: .85rem;
	line-height: 1;
}

.champion-rank-img{
	display: block;
	width: 18px;
	height: 18px;
	object-fit: contain;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
	transition: transform .2s ease;
}

.champion:hover .champion-rank-img{
	transform: scale(1.15);
}

.champion-id{
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
	flex: 1 1 auto;
	gap: .4rem;
}

.champion-name{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.2;
	color: #ffffff;
	min-width: 0;
}

.champion:hover .champion-name{
	color: #38e4b7;
}

.champion-level-pill{
	font-size: .65rem;
	font-weight: 600;
	color: #38e4b7;
	background: rgba(26, 188, 156, .12);
	border: 1px solid rgba(56, 228, 183, .25);
	padding: 1px 5px;
	border-radius: 4px;
	white-space: nowrap;
	flex-shrink: 0;
}

.champion-job{
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid rgba(56, 228, 183, .3);
	background: rgba(5, 18, 20, .8);
	padding: 1px;
	object-fit: cover;
}

/* Podium & Standard styling */
.champion-1{
	border-left: 3px solid #ffd700;
	background: linear-gradient(90deg, rgba(255, 215, 0, .14) 0%, rgba(12, 28, 30, .55) 100%);
}
.champion-1 .champion-place{
	background: linear-gradient(135deg, rgba(255, 215, 0, .25) 0%, rgba(15, 25, 25, .9) 100%);
	border: 1px solid rgba(255, 215, 0, .75);
	color: #ffd700;
	box-shadow: 0 0 10px rgba(255, 215, 0, .35);
}
.champion-1 .champion-place i{
	color: #ffd700;
	filter: drop-shadow(0 0 4px rgba(255, 215, 0, .6));
}
.champion-1:hover .champion-name{
	color: #ffd700;
}
.champion-1 .champion-level-pill{
	color: #ffd700;
	background: rgba(255, 215, 0, .12);
	border-color: rgba(255, 215, 0, .35);
}
.champion-1 .champion-job{
	border-color: rgba(255, 215, 0, .7);
	box-shadow: 0 0 6px rgba(255, 215, 0, .3);
}

.champion-2{
	border-left: 3px solid #d9e3ec;
	background: linear-gradient(90deg, rgba(217, 227, 236, .12) 0%, rgba(12, 28, 30, .55) 100%);
}
.champion-2 .champion-place{
	background: linear-gradient(135deg, rgba(220, 230, 240, .22) 0%, rgba(15, 25, 25, .9) 100%);
	border: 1px solid rgba(220, 230, 240, .7);
	color: #e3ecf5;
	box-shadow: 0 0 10px rgba(220, 230, 240, .25);
}
.champion-2 .champion-place i{
	color: #e3ecf5;
	filter: drop-shadow(0 0 4px rgba(220, 230, 240, .5));
}
.champion-2:hover .champion-name{
	color: #e3ecf5;
}
.champion-2 .champion-level-pill{
	color: #e3ecf5;
	background: rgba(220, 230, 240, .12);
	border-color: rgba(220, 230, 240, .35);
}
.champion-2 .champion-job{
	border-color: rgba(220, 230, 240, .6);
	box-shadow: 0 0 6px rgba(220, 230, 240, .25);
}

.champion-3{
	border-left: 3px solid #e67e22;
	background: linear-gradient(90deg, rgba(230, 126, 34, .14) 0%, rgba(12, 28, 30, .55) 100%);
}
.champion-3 .champion-place{
	background: linear-gradient(135deg, rgba(230, 126, 34, .25) 0%, rgba(15, 25, 25, .9) 100%);
	border: 1px solid rgba(230, 126, 34, .75);
	color: #f39c12;
	box-shadow: 0 0 10px rgba(230, 126, 34, .3);
}
.champion-3 .champion-place i{
	color: #f39c12;
	filter: drop-shadow(0 0 4px rgba(230, 126, 34, .6));
}
.champion-3:hover .champion-name{
	color: #f39c12;
}
.champion-3 .champion-level-pill{
	color: #f39c12;
	background: rgba(230, 126, 34, .12);
	border-color: rgba(230, 126, 34, .35);
}
.champion-3 .champion-job{
	border-color: rgba(230, 126, 34, .7);
	box-shadow: 0 0 6px rgba(230, 126, 34, .3);
}

.champion-standard{
	border-left: 3px solid rgba(26, 188, 156, .25);
}
.champion-standard .champion-place{
	background: rgba(6, 18, 20, .75);
	border: 1px solid rgba(38, 166, 154, .25);
	color: #7ea8a5;
}

.champions-cta{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	margin-top: .75rem;
	padding: .5rem .75rem;
	border: 1px solid rgba(38, 166, 154, .45);
	border-radius: 6px;
	background: linear-gradient(180deg, rgba(20, 75, 72, .95) 0%, rgba(12, 42, 45, .95) 100%);
	font-family: "Trajan Pro Regular", serif;
	font-size: .7rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: center;
	color: #dceef0 !important;
	text-decoration: none !important;
	transition: all .2s ease;
}

.champions-cta:hover{
	color: #ffffff !important;
	border-color: rgba(69, 243, 195, .8);
	background: linear-gradient(180deg, rgba(28, 102, 95, .95) 0%, rgba(15, 58, 60, .95) 100%);
	box-shadow: 0 0 14px rgba(56, 228, 183, .4);
	transform: translateY(-1px);
}

.champions-offline{
	margin: 0;
	text-align: center;
	font-size: .8rem;
	color: #7ea8a5;
}

/* Players / Guilds selector on the ranking pages. */
.ranking-switch{
	display: flex;
	gap: .5rem;
	margin-bottom: 1.2rem;
}

.ranking-switch-item{
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .5rem 1rem;
	border: 1px solid rgba(38, 166, 154, .28);
	border-radius: 7px;
	background: linear-gradient(180deg, rgba(10, 35, 38, .8) 0%, rgba(7, 22, 24, .88) 100%);
	font-family: "Trajan Pro Regular", serif;
	font-size: .78rem;
	color: #b3d4d1 !important;
	transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.ranking-switch-item i{ color: #38e4b7; }

.ranking-switch-item:hover{
	color: #ffffff !important;
	border-color: rgba(69, 243, 195, .55);
}

.ranking-switch-item.active{
	color: #ffffff !important;
	border-color: rgba(69, 243, 195, .75);
	background: linear-gradient(180deg, rgba(20, 75, 72, .95) 0%, rgba(12, 42, 45, .95) 100%);
	box-shadow: inset 0 1px 0 rgba(100, 255, 218, .22);
}

.ranking-switch-item.active i{ color: #64ffda; }

/* Category tabs on the players ranking - one per in-game statistic. Sidebar on the left,
   list on the right; stacks on small screens. */
.ranking-layout{
	display: flex;
	gap: 1.2rem;
	align-items: flex-start;
}

.ranking-cats{
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.ranking-content{
	flex: 1 1 auto;
	min-width: 0;
}

.ranking-cat{
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .55rem .7rem;
	border-radius: 10px;
	border: 1px solid rgba(38, 166, 154, .35);
	background: rgba(5, 18, 20, .55);
	text-decoration: none !important;
	transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.ranking-cat:hover{
	border-color: rgba(69, 243, 195, .55);
	transform: translateX(2px);
}

.ranking-cat-icon{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid rgba(38, 166, 154, .35);
	background: rgba(5, 18, 20, .8);
}

.ranking-cat-icon i{
	color: #38e4b7;
	font-size: .85rem;
}

.ranking-cat-text{
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ranking-cat-title{
	color: #cfe2f7;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .03em;
}

.ranking-cat-desc{
	color: #6f89a8;
	font-size: .7rem;
	line-height: 1.25;
}

.ranking-cat.active{
	border-color: rgba(240, 192, 90, .65);
	background: linear-gradient(180deg, rgba(20, 75, 72, .95) 0%, rgba(12, 42, 45, .95) 100%);
	box-shadow: inset 0 1px 0 rgba(100, 255, 218, .22);
}

.ranking-cat.active .ranking-cat-title{ color: #ffffff; }
.ranking-cat.active .ranking-cat-icon{ border-color: rgba(240, 192, 90, .65); }
.ranking-cat.active .ranking-cat-icon i{ color: #f0c05a; }

/* Player search above the list - pill input plus gold action button. */
.ranking-search{
	display: flex;
	gap: .6rem;
	margin-bottom: 1.2rem;
}

.ranking-search input{
	flex: 1 1 auto;
	min-width: 0;
	padding: .6rem .9rem;
	border-radius: 6px;
	border: 1px solid rgba(38, 166, 154, .35);
	background: #0d2326;
	color: #ffffff;
	font-size: .85rem;
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.ranking-search input::placeholder{
	color: #7ca3a0;
	opacity: 1;
}

.ranking-search input:focus{
	background: #112d30;
	border-color: rgba(69, 243, 195, .7);
	box-shadow: 0 0 0 3px rgba(56, 228, 183, .18);
}

/* Same dress as .login-submit, just inline next to the input instead of full width. */
.ranking-search button{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .6rem 1.4rem;
	border: 1px solid rgba(38, 166, 154, .5);
	border-radius: 7px;
	background: linear-gradient(180deg, rgba(24, 88, 82, .95) 0%, rgba(13, 50, 52, .95) 100%);
	color: #e0f7f5;
	font-family: "Trajan Pro Regular", serif;
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}

.ranking-search button:hover{
	border-color: rgba(69, 243, 195, .75);
	background: linear-gradient(180deg, rgba(32, 118, 108, .95) 0%, rgba(18, 68, 70, .95) 100%);
	box-shadow: 0 0 16px rgba(56, 228, 183, .4);
	color: #ffffff;
}

@media (max-width: 992px) {
	.ranking-layout{ flex-direction: column; }
	.ranking-cats{
		flex: 1 1 auto;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.ranking-cat{ flex: 1 1 45%; }
}

/* Footer sits at the end of the page - keep the three blocks centred on their own column
   and vertically aligned with each other instead of drifting to the edges. */
.footer-copyright .row{
	align-items: center;
}

.footer-copyright .col-md-4{
	text-align: center;
}

.footer-logo{
	padding: 1.5rem 0 .5rem;
}

/* Account menu in the sidebar: same framed-plate treatment as the navbar links, so the two
   sets of navigation on the page read as one system. */
.list-group-new{
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: .25rem 0 .5rem;
}

.list-group-new .list-group-item{
	padding: .5rem .75rem;
	border: 1px solid rgba(38, 166, 154, .22);
	border-radius: 4px;
	background: rgba(10, 35, 38, .45);
	box-shadow: inset 0 1px 0 rgba(69, 243, 195, .07);
	font-size: .82rem;
	text-align: center;
	color: #cdeeed !important;
	text-shadow: 0 0 10px rgba(56, 228, 183, .25);
	transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.list-group-new .list-group-item:hover{
	color: #ffffff !important;
	border-color: rgba(69, 243, 195, .6);
	background: rgba(16, 62, 65, .6);
	box-shadow: 0 0 12px rgba(56, 228, 183, .3), inset 0 1px 0 rgba(100, 255, 218, .18);
}

/* Logout keeps its warning colour but picks up a matching red frame. */
.list-group-new .list-group-item.text-danger{
	border-color: rgba(200, 80, 80, .35);
	color: #e07070 !important;
	text-shadow: 0 0 10px rgba(220, 90, 90, .25);
}

.list-group-new .list-group-item.text-danger:hover{
	color: #ff9090 !important;
	border-color: rgba(230, 110, 110, .75);
	background: rgba(74, 22, 22, .55);
	box-shadow: 0 0 12px rgba(200, 70, 70, .3), inset 0 1px 0 rgba(255, 170, 170, .15);
}

/* The web_admin badge is a label, not a destination - keep it flat. */
.list-group-new .list-group-item.disabled{
	border-style: dashed;
	background: rgba(5, 18, 20, .5);
	color: #6d829b !important;
	text-shadow: none;
}

/* ==================== ORNATE FRAME ====================
   The border the side panels used to carry, now shared by every board on the page.
   border-image makes border-radius a no-op, so these corners are square by design.

   Source is border-lines.png: border.png with the centre flourish on the top and bottom
   edges painted out, so every middle slice is plain line - and a uniform line stretched
   along its own axis is indistinguishable from an unstretched one. The flourishes come
   back at a fixed size in ::before, which is what stops them smearing as a board widens.

   Slice 50 because the corner ornaments run to ~49px in the source; anything smaller left
   part of them in the middle strip, stretched along the edge with it.

   The artwork does not draw its lines at the edge of the file either - they sit ~9-11px in,
   which at the 33/50 scale lands them 6-7px inside the border box. Hence a 7px layout
   border: it ends where the line actually renders, so background-clip: padding-box stops
   the fill exactly there instead of letting it spill past the frame. Clip and origin are
   both padding-box (origin by default); mismatching them leaves a darker band inside the
   frame, because the gradient gets sized to the padding box and then tiled outward. */
.ornate-frame{
	position: relative;
	border: 7px solid transparent;
	border-image-source: url("../images/border-lines.png");
	border-image-slice: 50;
	border-image-width: 33px;
	border-image-repeat: stretch;
	border-radius: 0;
	background-clip: padding-box;
	padding: 26px 24px;
}

/* The two centre flourishes, held at natural size and centred on their own edge. The
   negative inset backs out the border width so this covers the border box rather than the
   padding box, putting the marks on the frame instead of inside it. */
.ornate-frame::before{
	content: '';
	position: absolute;
	top: -7px;
	right: -7px;
	bottom: -7px;
	left: -7px;
	pointer-events: none;
	background-image: url("../images/border-mark-top.png"), url("../images/border-mark-bottom.png");
	background-repeat: no-repeat, no-repeat;
	background-position: center top, center bottom;
	/* Stretched 50% wide, height left alone. The flourish has the frame's own line running
	   through it, and that line sits at a fixed spot in the source - scaling the height too
	   would walk it down off the frame's line, which renders at 6-7px. */
	background-size: 68px 15px, 68px 15px;
}

/* One board per sidebar section - login, then the ranking - each framed on its own.
   background-image, not the background shorthand: the shorthand resets background-clip,
   which would silently undo .ornate-frame's padding-box clip and let the fill spill past
   the frame again. */
.sidebar-board{
	background-image: linear-gradient(180deg, rgba(8, 28, 30, .92) 0%, rgba(4, 12, 22, .96) 100%);
}

.sidebar-board + .sidebar-board{
	margin-top: 1.2rem;
}

/* ==================== PLAIN SIDE PANEL ====================
   The user panel drops the ornate dragon frame (border.png / header.png / panel-bg.png)
   for the same flat card the champions podium and the highlight row use. The other
   sidebar panels keep the framed look, so this is a modifier and not a rewrite of
   .side-panel - and it must stay last in the file, since .panel-title's responsive
   overrides above have the same specificity and would otherwise win. */
/* No card of its own - it sits straight on the sidebar board. border-image:none is still
   needed here to cancel the dragon frame .side-panel brings along. */
.side-panel-plain{
	border: 0;
	border-image: none;
	background: none;
	padding: .25rem .2rem 0;
}

.panel-bg-plain{
	background-image: none;
}

/* ==================== LOGIN FORM ====================
   Labelled fields instead of icon-prefixed inputs: the label carries the meaning, so the
   recovery link can sit beside it on the same row rather than being stacked under the
   whole form. Left aligned against the panel's own text-center. */
.login-form{
	text-align: left;
}

.login-field{
	margin-bottom: .9rem;
}

.login-field-head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .35rem;
}

.login-label{
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9fc4c1;
}

.login-link{
	flex: 0 0 auto;
	font-size: .7rem;
	color: #38e4b7 !important;
	transition: color .2s ease;
}

.login-link:hover{
	color: #64ffda !important;
}

/* The reveal button is layered over the input, so the input needs room on the right for
   it - hence the padding rather than a flex row, which would break the full-width field. */
.login-input-wrap{
	position: relative;
}

.login-input{
	display: block;
	width: 100%;
	padding: .55rem .7rem;
	border: 1px solid rgba(38, 166, 154, .35);
	border-radius: 6px;
	background: #0d2326;
	color: #ffffff;
	font-size: .85rem;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.login-input-wrap .login-input{
	padding-right: 2.4rem;
}

.login-input:focus{
	outline: 0;
	border-color: rgba(69, 243, 195, .7);
	background: #112d30;
	box-shadow: 0 0 0 3px rgba(56, 228, 183, .18);
}

.login-input:disabled{
	opacity: .5;
}

/* Chrome and Edge repaint an autofilled field with their own near-white background and
   ignore background-color outright - a huge inset shadow is the only thing that holds the
   colour. This is what makes a saved login look white on an otherwise dark panel. */
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover{
	-webkit-text-fill-color: #ffffff;
	-webkit-box-shadow: 0 0 0 1000px #0d2326 inset;
	        box-shadow: 0 0 0 1000px #0d2326 inset;
	caret-color: #ffffff;
}

.login-input:-webkit-autofill:focus{
	-webkit-text-fill-color: #ffffff;
	-webkit-box-shadow: 0 0 0 1000px #112d30 inset, 0 0 0 3px rgba(56, 228, 183, .18);
	        box-shadow: 0 0 0 1000px #112d30 inset, 0 0 0 3px rgba(56, 228, 183, .18);
	caret-color: #ffffff;
}

.login-reveal{
	position: absolute;
	top: 50%;
	right: .3rem;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: none;
	color: #7ea8a5;
	font-size: .9rem;
	cursor: pointer;
	transition: color .2s ease, background .2s ease;
}

.login-reveal:hover{
	color: #ffffff;
	background: rgba(38, 166, 154, .2);
}

.login-captcha{
	/* The widget is scaled to .77 from its top-left corner, so its box still reserves the
	   unscaled height - this clips the dead space back off. */
	height: 62px;
	overflow: hidden;
	margin-bottom: .9rem;
}

.login-submit{
	display: block;
	width: 100%;
	padding: .6rem;
	border: 1px solid rgba(38, 166, 154, .5);
	border-radius: 7px;
	background: linear-gradient(180deg, rgba(24, 88, 82, .95) 0%, rgba(13, 50, 52, .95) 100%);
	font-family: "Trajan Pro Regular", serif;
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #e0f7f5;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}

.login-submit:hover:not(:disabled){
	border-color: rgba(69, 243, 195, .75);
	background: linear-gradient(180deg, rgba(32, 118, 108, .95) 0%, rgba(18, 68, 70, .95) 100%);
	box-shadow: 0 0 16px rgba(56, 228, 183, .4);
	color: #ffffff;
}

.login-submit:disabled{
	opacity: .5;
	cursor: not-allowed;
}

.login-register{
	margin: .9rem 0 0;
	font-size: .75rem;
	color: #8eb5b2;
}

.login-register a{
	color: #38e4b7 !important;
}

.login-register a:hover{
	color: #64ffda !important;
}

.panel-title-plain{
	width: auto;
	height: auto;
	background: none;
	line-height: 1.2;
	font-family: "Trajan Pro Regular", serif;
	font-size: .85rem;
	letter-spacing: .03em;
	padding: 0 0 .75rem;
	margin: 0 0 1rem;
	border-bottom: 1px solid #0d282b;
	transform: none;
	text-shadow: none;
}