/*!
 * Mu STK — Striker Theme v1
 * Theme path: public/themes/mustk/
 * Base: DarkCore default theme
 * Goal: premium dark fantasy / competitive Mu Online identity
 */

/* =========================================================
   01. Base / Variables
========================================================= */

:root {
	--stk-bg: #05070d;
	--stk-bg-2: #080d18;
	--stk-bg-3: #0d1424;

	--stk-card: rgba(9, 14, 26, 0.88);
	--stk-card-2: rgba(13, 20, 36, 0.94);
	--stk-card-soft: rgba(255, 255, 255, 0.045);

	--stk-border: rgba(91, 158, 255, 0.22);
	--stk-border-soft: rgba(255, 255, 255, 0.08);

	--stk-blue: #38a8ff;
	--stk-blue-2: #67d4ff;
	--stk-red: #ff2e4f;
	--stk-red-2: #ff6a7d;
	--stk-gold: #d7aa4a;
	--stk-gold-2: #ffd778;

	--stk-text: #eef5ff;
	--stk-muted: #9eaac0;
	--stk-muted-2: #6f7b92;

	--stk-shadow-blue: 0 0 28px rgba(56, 168, 255, 0.24);
	--stk-shadow-red: 0 0 28px rgba(255, 46, 79, 0.18);
	--stk-shadow-card: 0 18px 60px rgba(0, 0, 0, 0.46);

	--stk-radius: 16px;
	--stk-radius-sm: 10px;
	--stk-max: 1320px;
}

html {
	min-width: 320px;
	height: 100%;
	scroll-behavior: smooth;
}

body {
	min-height: 100%;
	margin: 0;
	color: var(--stk-text);
	font-family: "PT Sans", "Segoe UI", Tahoma, Arial, sans-serif;
	font-size: 14px;
	background:
		radial-gradient(circle at 18% 8%, rgba(56, 168, 255, 0.22), transparent 30%),
		radial-gradient(circle at 82% 2%, rgba(255, 46, 79, 0.20), transparent 28%),
		linear-gradient(180deg, rgba(5, 7, 13, 0.35), rgba(5, 7, 13, 0.98) 620px),
		#000 url('../img/background-dark.jpg') no-repeat top center;
	background-size: cover, cover, cover, auto;
	background-attachment: fixed;
	overflow-x: hidden;
}

@media only screen and (min-width: 2000px) {
	body {
		background:
			radial-gradient(circle at 18% 8%, rgba(56, 168, 255, 0.22), transparent 30%),
			radial-gradient(circle at 82% 2%, rgba(255, 46, 79, 0.20), transparent 28%),
			linear-gradient(180deg, rgba(5, 7, 13, 0.35), rgba(5, 7, 13, 0.98) 620px),
			#000 url('../img/background-dark-2600.jpg') no-repeat top center !important;
		background-size: cover, cover, cover, auto !important;
		background-attachment: fixed !important;
	}
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(56,168,255,0.05) 1px, transparent 1px),
		linear-gradient(180deg, rgba(56,168,255,0.035) 1px, transparent 1px);
	background-size: 68px 68px;
	mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 70%);
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.66) 74%, rgba(0,0,0,.92) 100%);
}

a {
	color: var(--stk-blue-2);
	text-decoration: none;
	transition: color .18s ease, opacity .18s ease, filter .18s ease;
}

a:hover,
a:focus {
	color: var(--stk-gold-2);
	text-decoration: none;
}

img {
	border: 0;
	max-width: 100%;
}

hr {
	border: 0;
	border-top: 1px solid var(--stk-border-soft);
}

::selection {
	background: rgba(56, 168, 255, 0.35);
	color: #fff;
}

/* =========================================================
   02. Inputs / Forms
========================================================= */

input[type=text],
input[type=password],
input[type=number],
input[type=email],
textarea,
select,
.form-control {
	background: rgba(3, 8, 17, 0.88) !important;
	border: 1px solid rgba(103, 212, 255, 0.18) !important;
	color: var(--stk-text) !important;
	border-radius: 10px !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=email]:focus,
textarea:focus,
select:focus,
.form-control:focus {
	background: rgba(5, 12, 25, 0.96) !important;
	border-color: rgba(103, 212, 255, 0.55) !important;
	box-shadow: 0 0 0 3px rgba(56, 168, 255, 0.16), inset 0 0 0 1px rgba(255,255,255,0.03) !important;
	outline: none !important;
}

label {
	color: #cbd6ea;
	font-weight: 700;
}

.btn,
button,
input[type=submit],
input[type=button] {
	border-radius: 999px;
	border: 1px solid rgba(103, 212, 255, 0.25);
	background: linear-gradient(135deg, rgba(56,168,255,0.92), rgba(32,88,210,0.92));
	color: #fff;
	font-weight: 700;
	letter-spacing: .02em;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease;
}

.btn:hover,
button:hover,
input[type=submit]:hover,
input[type=button]:hover {
	transform: translateY(-1px);
	filter: brightness(1.08);
	box-shadow: var(--stk-shadow-blue);
	color: #fff;
}

.btn-danger {
	background: linear-gradient(135deg, rgba(255,46,79,0.95), rgba(128,17,38,0.95)) !important;
	border-color: rgba(255,106,125,0.45) !important;
}

.btn-warning {
	background: linear-gradient(135deg, rgba(215,170,74,0.96), rgba(132,83,18,0.96)) !important;
	border-color: rgba(255,215,120,0.45) !important;
	color: #170d04 !important;
}

/* =========================================================
   03. Global Top Bar
========================================================= */

.global-top-bar {
	width: 100%;
	background:
		linear-gradient(90deg, rgba(56,168,255,.10), transparent 25%, rgba(255,46,79,.10) 75%, transparent),
		rgba(3, 6, 12, 0.92);
	color: var(--stk-muted);
	padding: 9px 0 6px;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .04em;
	border-bottom: 1px solid rgba(103, 212, 255, 0.12);
	backdrop-filter: blur(10px);
	position: relative;
	z-index: 20;
}

.global-top-bar .global-top-bar-content {
	width: 100%;
	max-width: var(--stk-max);
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}

.global-top-bar .global-top-bar-content .row {
	margin: 0;
	padding: 0;
}

.global-top-bar a {
	color: #b8c6df !important;
	font-weight: 700;
}

.global-top-bar a:hover {
	color: var(--stk-blue-2) !important;
}

.global-top-bar a.logout {
	color: var(--stk-red-2) !important;
}

.global-top-bar a.global-top-bar-admincp {
	color: var(--stk-gold-2) !important;
}

.global-top-bar-separator {
	color: rgba(255,255,255,.18);
	padding: 0 8px;
}

.global-top-bar-nopadding {
	padding: 0 !important;
}

.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	margin-left: 4px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(255,255,255,.04);
	color: var(--stk-blue-2);
	box-shadow: none;
}

.theme-toggle:hover {
	box-shadow: 0 0 14px rgba(103,212,255,.25);
}

.theme-icon {
	line-height: 1;
}

html.dark-mode .theme-icon-dark,
.theme-icon-light {
	display: none;
}

html.dark-mode .theme-icon-light {
	display: inline-block;
}

/* =========================================================
   04. Navbar
========================================================= */

#navbar {
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 19;
	background:
		linear-gradient(180deg, rgba(10, 15, 27, 0.94), rgba(4, 8, 16, 0.88));
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(103, 212, 255, 0.16);
	box-shadow: 0 12px 34px rgba(0,0,0,.34);
}

#main-nav {
	width: 100%;
	max-width: var(--stk-max);
	margin: 0 auto;
}

#navbar ul {
	text-align: center;
	margin: 0;
	padding-left: 0;
}

#navbar ul li {
	list-style-type: none;
	display: inline-block;
	font-size: 14px;
	position: relative;
}

#navbar ul li a {
	display: inline-block;
	color: #dce8ff !important;
	text-decoration: none;
	padding: 19px 22px;
	transition: color .18s ease, background .18s ease, text-shadow .18s ease;
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: .06em;
	position: relative;
}

#navbar ul li a::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 10px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--stk-blue-2), var(--stk-red-2), transparent);
	opacity: 0;
	transform: scaleX(.35);
	transition: opacity .2s ease, transform .2s ease;
}

#navbar ul li a:hover,
#navbar ul li a:focus,
#navbar ul li a:active {
	color: #ffffff !important;
	background: rgba(56,168,255,.07);
	text-shadow: 0 0 12px rgba(103,212,255,.55);
}

#navbar ul li a:hover::after,
#navbar ul li a:focus::after {
	opacity: 1;
	transform: scaleX(1);
}

/* =========================================================
   05. Header / Logo / Hero
========================================================= */

#header {
	width: 100%;
	margin: 0 auto;
	padding: 92px 20px 34px;
	text-align: center;
	color: #fff;
	position: relative;
	box-sizing: border-box;
}

#header::before {
	content: "MU STRIKER";
	position: absolute;
	left: 50%;
	top: 24px;
	transform: translateX(-50%);
	font-family: "Cinzel", Georgia, serif;
	font-size: clamp(32px, 8vw, 112px);
	font-weight: 700;
	letter-spacing: .12em;
	color: rgba(255,255,255,.035);
	white-space: nowrap;
	pointer-events: none;
	text-shadow: 0 0 40px rgba(56,168,255,.16);
}

#header::after {
	content: "Season 6 • High Rates • PvP • Castle Siege";
	display: block;
	margin: 18px auto 0;
	color: #b8c7df;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-shadow: 0 0 18px rgba(0,0,0,.9);
}

.dh-logo {
	display: inline-block;
	max-height: 145px;
	transition: transform .22s ease, filter .22s ease;
	filter:
		drop-shadow(0 0 18px rgba(56,168,255,.35))
		drop-shadow(0 0 28px rgba(255,46,79,.14));
	position: relative;
	z-index: 1;
}

.dh-logo:hover {
	transform: translateY(-2px) scale(1.025);
	filter:
		drop-shadow(0 0 24px rgba(103,212,255,.55))
		drop-shadow(0 0 32px rgba(255,46,79,.22));
}

/* =========================================================
   06. Header Info Box
========================================================= */

.header-info-container {
	width: 100%;
	max-width: var(--stk-max);
	margin: 0 auto 18px;
	text-align: right;
	padding: 0 16px;
	box-sizing: border-box;
}

.header-info-container .header-info {
	display: inline-block;
	width: 390px;
	background:
		linear-gradient(135deg, rgba(11, 18, 33, 0.92), rgba(5, 9, 18, 0.90)),
		radial-gradient(circle at top right, rgba(56,168,255,.22), transparent 38%);
	backdrop-filter: blur(12px);
	margin: 0;
	padding: 18px 20px;
	overflow: auto;
	box-shadow: var(--stk-shadow-card), var(--stk-shadow-blue);
	border-radius: var(--stk-radius);
	text-shadow: 1px 1px 3px #000000;
	color: #ffffff;
	border: 1px solid rgba(103, 212, 255, 0.22);
	font-size: 12px;
	position: relative;
}

.header-info-container .header-info::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(103,212,255,.35), transparent 35%, rgba(255,46,79,.25));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.header-info-container .header-info .header-info-block {
	padding: 0;
	color: var(--stk-muted);
}

.header-info-container .header-info .header-info-block #tServerTime,
.header-info-container .header-info .header-info-block #tLocalTime {
	color: #ffffff;
	font-weight: 800;
}

.header-info-container .header-info .header-info-block #tServerDate,
.header-info-container .header-info .header-info-block #tLocalDate {
	color: #aab7ce;
}

.header-info-container .header-info .header-info-block .online-count {
	color: #4cff9e;
	font-weight: 900;
	text-shadow: 0 0 12px rgba(76,255,158,.42);
}

/* =========================================================
   07. Online Bar
========================================================= */

.dh-online-bar {
	width: 100%;
	background: rgba(0, 0, 0, 0.62);
	border: 1px solid rgba(103, 212, 255, 0.20);
	height: 9px;
	margin: 11px 0 12px;
	padding: 0;
	border-radius: 999px;
	overflow: hidden;
	transition: filter .2s ease, border-color .2s ease;
	box-shadow: inset 0 0 10px rgba(0,0,0,.55);
}

.dh-online-bar .dh-online-bar-progress {
	height: 9px;
	background:
		linear-gradient(90deg, #29ff9d, #38a8ff 55%, #ff2e4f),
		url('../img/online_progress_bar.jpg') no-repeat left center;
	border-radius: 999px;
	box-shadow: 0 0 18px rgba(56,168,255,.38);
}

.dh-online-bar:hover {
	filter: brightness(1.12);
	border-color: rgba(103, 212, 255, 0.42);
}

/* =========================================================
   08. Main Layout
========================================================= */

#container {
	width: 100%;
	max-width: var(--stk-max);
	margin: 0 auto;
	padding: 26px 22px 0;
	border-radius: var(--stk-radius) var(--stk-radius) 0 0;
	box-sizing: border-box;
	background:
		linear-gradient(180deg, rgba(6, 11, 21, 0.86), rgba(6, 9, 17, 0.94)),
		radial-gradient(circle at top left, rgba(56,168,255,.11), transparent 42%);
	border: 1px solid rgba(103, 212, 255, 0.14);
	box-shadow: var(--stk-shadow-card);
	backdrop-filter: blur(10px);
	position: relative;
}

#container::before {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(103,212,255,.55), rgba(255,46,79,.35), transparent);
}

#content {
	width: 100%;
	overflow: visible;
	min-height: 500px;
	padding: 10px 0 24px;
	box-sizing: border-box;
}

#content::after {
	content: "";
	display: table;
	clear: both;
}

#content .col-xs-8,
#content .col-xs-4,
#content .col-xs-12,
#content .col-sm-8,
#content .col-sm-4,
#content .col-md-8,
#content .col-md-4 {
	box-sizing: border-box;
}

/* Bootstrap columns in old layouts */
@media (min-width: 768px) {
	#content .col-xs-8 {
		width: 66.66666667%;
		float: left;
	}

	#content .col-xs-4 {
		width: 33.33333333%;
		float: left;
	}
}

/* =========================================================
   09. Generic Panels / Modules
========================================================= */

.panel,
.panel-default,
.panel-sidebar {
	background: var(--stk-card);
	border: 1px solid var(--stk-border);
	border-radius: var(--stk-radius);
	box-shadow: 0 12px 36px rgba(0,0,0,.28);
	color: var(--stk-text);
	overflow: hidden;
}

.panel > .panel-heading,
.panel-default > .panel-heading,
.panel-sidebar > .panel-heading {
	background:
		linear-gradient(90deg, rgba(56,168,255,.18), rgba(255,46,79,.10)),
		rgba(255,255,255,.025);
	color: #ffffff;
	font-family: "Cinzel", Georgia, serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border: 0;
	border-bottom: 1px solid rgba(103, 212, 255, 0.18);
	border-radius: 0;
	padding: 14px 16px;
}

.panel-body {
	color: #cbd6ea;
	background: transparent;
}

.panel-footer {
	background: rgba(255,255,255,.035);
	border-top: 1px solid rgba(255,255,255,.08);
	color: var(--stk-muted);
}

.well,
.alert,
.table,
.list-group-item {
	background: rgba(255,255,255,.035);
	border-color: rgba(255,255,255,.08);
	color: #dce8ff;
}

.alert-success {
	border-color: rgba(76,255,158,.28);
	background: rgba(76,255,158,.08);
	color: #bfffe0;
}

.alert-danger {
	border-color: rgba(255,46,79,.28);
	background: rgba(255,46,79,.08);
	color: #ffd1d8;
}

.alert-warning {
	border-color: rgba(215,170,74,.35);
	background: rgba(215,170,74,.08);
	color: #ffe6a9;
}

.alert-info {
	border-color: rgba(56,168,255,.28);
	background: rgba(56,168,255,.08);
	color: #cfeeff;
}

/* Tables */
.table > thead > tr > th {
	border-bottom: 1px solid rgba(103,212,255,.22);
	color: #ffffff;
	background: rgba(56,168,255,.08);
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
	border-top: 1px solid rgba(255,255,255,.06);
	color: #d9e5f8;
}

.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: rgba(255,255,255,.025);
}

.table-hover > tbody > tr:hover {
	background-color: rgba(56,168,255,.07);
}

/* =========================================================
   10. Sidebar
========================================================= */

.panel-sidebar {
	background:
		linear-gradient(180deg, rgba(12, 19, 34, 0.94), rgba(8, 12, 24, 0.95));
	margin-bottom: 18px;
}

.panel-sidebar > .panel-heading {
	color: #ffffff;
	border-bottom: 1px solid rgba(103, 212, 255, 0.20);
}

.panel-usercp {
	background:
		linear-gradient(180deg, rgba(6, 12, 23, .58), rgba(6, 12, 23, .92)),
		url('../img/usercp_bg.jpg') no-repeat top center;
	background-size: cover;
	border: 1px solid rgba(103, 212, 255, 0.18);
}

.panel-usercp ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.panel-usercp ul li {
	display: table;
	width: 100%;
	vertical-align: middle;
	line-height: 30px;
	border-bottom: 1px solid rgba(255,255,255,.055);
}

.panel-usercp ul li:last-child {
	border-bottom: 0;
}

.panel-usercp ul li a {
	display: block;
	color: #dbe8ff !important;
	font-weight: 800;
	padding: 6px 8px;
	border-radius: 8px;
}

.panel-usercp ul li a:hover,
.panel-usercp ul li a:active {
	color: #ffffff !important;
	background: rgba(56,168,255,.11);
	text-shadow: 0 0 12px rgba(103,212,255,.32);
}

.panel-usercp ul li img {
	position: relative;
	top: -2px;
	width: 25px;
	height: 25px;
	margin-right: 7px;
	filter: drop-shadow(0 0 6px rgba(56,168,255,.22));
}

.sidebar-banner {
	margin: 18px 0;
	border: 0;
}

.sidebar-banner img {
	width: 100%;
	box-shadow: 0 16px 38px rgba(0,0,0,.34);
	border: 1px solid rgba(103, 212, 255, 0.16);
	border-radius: var(--stk-radius);
	transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.sidebar-banner img:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: var(--stk-shadow-blue);
}

/* =========================================================
   11. Footer
========================================================= */

.footer {
	width: 100%;
	max-width: var(--stk-max);
	margin: 0 auto 80px;
	padding: 34px 36px;
	overflow: auto;
	box-sizing: border-box;
	border-radius: 0 0 var(--stk-radius) var(--stk-radius);
	background:
		linear-gradient(180deg, rgba(9, 14, 25, 0.96), rgba(4, 7, 13, 0.98));
	border: 1px solid rgba(103, 212, 255, 0.12);
	border-top: 0;
	font-family: "Segoe UI", Tahoma, Arial, sans-serif;
	font-size: 12px;
	color: var(--stk-muted);
	box-shadow: 0 22px 60px rgba(0,0,0,.36);
}

.footer > .footer-container {
	width: 100%;
	margin: 0 auto;
}

.footer a {
	color: #b8c9e8;
	font-weight: 700;
}

.footer a:hover {
	color: var(--stk-gold-2);
	text-decoration: none !important;
}

.footer hr {
	border-top: 1px solid rgba(255,255,255,.08);
}

.footer .footer-social-link {
	filter: grayscale(100%) brightness(.85);
	transition: all .25s ease;
}

.footer .footer-social-link:hover {
	filter: grayscale(0%) brightness(1.08) drop-shadow(0 0 12px rgba(103,212,255,.35));
}

.dh-powered {
	color: #8d9bb2 !important;
}

.dh-powered:hover,
.dh-powered:active {
	color: var(--stk-red-2) !important;
}

/* =========================================================
   12. Language picker
========================================================= */

.dh-lang-switcher {
	display: inline-block;
	list-style: none;
	padding: 0 !important;
	margin: 0 !important;
	width: 46px;
	height: 21px;
	overflow: hidden;
	transition: width .3s ease;
}

.dh-lang-switcher:hover {
	width: 400px;
}

.dh-lang-switcher li {
	display: inline-block;
	list-style-type: none;
	background: rgba(255,255,255,.06);
	padding: 0 5px 2px;
	border-radius: 5px;
	border: 1px solid rgba(255,255,255,.08);
	transition: filter .2s ease, background .2s ease;
}

.dh-lang-switcher li:hover {
	filter: brightness(120%);
	background: rgba(56,168,255,.13);
}

.dh-lang-switcher li a {
	color: #b8c6df;
}

.dh-lang-switcher li a:hover {
	color: #ffffff !important;
}

/* =========================================================
   13. Hamburger / Mobile Nav
========================================================= */

#menu-toggle {
	display: none;
	background: rgba(8, 14, 26, .92);
	color: #fff;
	border: 1px solid rgba(103, 212, 255, .24);
	border-radius: 12px;
	padding: 10px 13px;
	margin: 10px auto;
	font-size: 22px;
	line-height: 1;
	box-shadow: none;
}

#menu-toggle:hover {
	box-shadow: var(--stk-shadow-blue);
}

/* =========================================================
   14. Utility / Compatibility
========================================================= */

.text-muted {
	color: var(--stk-muted) !important;
}

.text-success {
	color: #4cff9e !important;
}

.text-danger {
	color: var(--stk-red-2) !important;
}

.text-warning {
	color: var(--stk-gold-2) !important;
}

.text-info {
	color: var(--stk-blue-2) !important;
}

.badge {
	background: linear-gradient(135deg, var(--stk-blue), #1854ca);
	border: 1px solid rgba(255,255,255,.14);
	color: #fff;
}

.progress {
	background: rgba(255,255,255,.07);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.progress-bar {
	background: linear-gradient(90deg, var(--stk-blue), var(--stk-red));
	box-shadow: 0 0 18px rgba(56,168,255,.28);
}

/* Old content may output white boxes */
.thumbnail,
.modal-content,
.dropdown-menu {
	background: var(--stk-card-2);
	border: 1px solid var(--stk-border);
	color: var(--stk-text);
}

.dropdown-menu > li > a {
	color: #dbe8ff;
}

.dropdown-menu > li > a:hover {
	background: rgba(56,168,255,.12);
	color: #fff;
}

/* =========================================================
   15. Responsive
========================================================= */

@media (max-width: 1190px) {
	.global-top-bar .global-top-bar-content,
	#main-nav,
	.header-info-container,
	#container,
	.footer {
		max-width: calc(100% - 28px);
	}
}

@media (max-width: 991px) {
	#header {
		padding-top: 58px;
	}

	.dh-logo {
		max-height: 118px;
	}

	.header-info-container {
		text-align: center;
	}

	.header-info-container .header-info {
		width: 100%;
		max-width: 440px;
	}

	#content .col-xs-8,
	#content .col-xs-4 {
		width: 100%;
		float: none;
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 768px) {
	body {
		background-attachment: scroll;
	}

	.global-top-bar {
		font-size: 11px;
	}

	.global-top-bar .col-xs-6 {
		width: 100%;
		text-align: center !important;
		margin: 2px 0;
	}

	#menu-toggle {
		display: block;
	}

	#navbar {
		position: sticky;
	}

	#main-nav {
		display: none;
		padding-bottom: 10px;
	}

	#navbar.active #main-nav {
		display: block;
	}

	#navbar ul li {
		display: block;
		width: 100%;
	}

	#navbar ul li a {
		display: block;
		padding: 14px 16px;
		text-align: center;
	}

	#navbar ul li a::after {
		left: 36%;
		right: 36%;
	}

	#header {
		padding: 42px 14px 18px;
	}

	#header::before {
		top: 16px;
		letter-spacing: .08em;
	}

	#header::after {
		font-size: 11px;
		letter-spacing: .10em;
		line-height: 1.55;
	}

	.dh-logo {
		max-height: 96px;
	}

	.header-info-container,
	#container,
	.footer {
		max-width: calc(100% - 20px);
		padding-left: 12px;
		padding-right: 12px;
	}

	.header-info-container .header-info {
		padding: 16px;
	}

	#container {
		padding-top: 14px;
	}

	.footer {
		padding: 28px 18px;
		margin-bottom: 40px;
	}
}

@media (max-width: 480px) {
	body {
		font-size: 13px;
	}

	.dh-logo {
		max-height: 78px;
	}

	.header-info-container .header-info {
		font-size: 11px;
	}

	.panel > .panel-heading,
	.panel-default > .panel-heading,
	.panel-sidebar > .panel-heading {
		font-size: 13px;
		padding: 12px 14px;
	}

	#content {
		padding-bottom: 16px;
	}
}

/* =========================================================
   Mu STK v2.3 — Ajustes consolidados do tema
   Limpa sobrescritas acumuladas e corrige botões de ranking
========================================================= */

/* Hero centralizado e limpo */
.stk-hero {
	padding: 60px 20px 36px !important;
	text-align: center !important;
}

.stk-hero::before,
.stk-hero::after {
	display: none !important;
}

.stk-hero-inner {
	display: block !important;
	max-width: var(--stk-max);
	margin: 0 auto;
	text-align: center;
}

.stk-hero-copy {
	text-align: center !important;
	padding-left: 0 !important;
	margin: 0 auto;
	position: relative;
}

.stk-hero-copy::before,
.stk-kicker,
.stk-hero-title,
.stk-hero-status {
	display: none !important;
}

.stk-logo-link {
	display: inline-block;
}

.stk-hero .dh-logo {
	max-height: 165px !important;
	margin: 0 auto 12px !important;
	display: block;
	filter:
		drop-shadow(0 0 18px rgba(56,168,255,.32))
		drop-shadow(0 0 28px rgba(255,180,70,.18));
}

.stk-hero-subtitle {
	margin-top: 8px !important;
	color: #ffffff;
	font-size: 13px !important;
	font-weight: 900;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-shadow:
		0 0 14px rgba(56,168,255,.25),
		0 0 18px rgba(0,0,0,.90);
}

.stk-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center !important;
	margin-top: 22px !important;
}

.stk-hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 18px;
	border-radius: 10px;
	border: 1px solid rgba(103,212,255,.26);
	background: rgba(7, 14, 27, .82);
	color: #dceeff !important;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: 0 12px 28px rgba(0,0,0,.28);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.stk-hero-btn:hover {
	transform: translateY(-2px);
	background: rgba(56,168,255,.15);
	color: #fff !important;
	box-shadow: 0 0 24px rgba(56,168,255,.25);
}

.stk-hero-btn-primary {
	background: linear-gradient(135deg, #38a8ff, #244fdb);
	border-color: rgba(103,212,255,.46);
	color: #ffffff !important;
}

.stk-hero-btn-discord {
	border-color: rgba(215,170,74,.35);
	color: #ffe3a2 !important;
}

/* Login: link "Esqueceu sua senha?" na linha do botão */
.panel-sidebar .panel-title {
	position: relative;
	padding-right: 0;
}

.panel-sidebar .panel-title .btn-xs.pull-right,
.panel-usercp .panel-title .btn-xs.pull-right {
	float: none !important;
	display: inline-block;
	position: absolute;
	right: 20px;
	bottom: -151px;
	z-index: 3;
	margin: 0;
	min-width: 155px;
	text-align: center;
	padding: 7px 12px !important;
	border-radius: 8px !important;
	font-size: 10px !important;
	line-height: 1.2 !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: rgba(7, 14, 27, 0.92) !important;
	border: 1px solid rgba(103, 212, 255, 0.34) !important;
	color: #cfeeff !important;
	box-shadow: none !important;
	transform: none !important;
}

.panel-sidebar .panel-title .btn-xs.pull-right:hover,
.panel-usercp .panel-title .btn-xs.pull-right:hover {
	background: rgba(56, 168, 255, 0.16) !important;
	color: #ffffff !important;
	box-shadow: 0 0 12px rgba(56,168,255,.20) !important;
}

/* Botões pequenos de ranking (+) não podem herdar o alinhamento do login */
.panel-sidebar .panel-title a.btn-xs.pull-right[style*="width:22px"],
.panel-sidebar .panel-title a.btn-xs.pull-right[style*="width: 22px"] {
	position: static !important;
	float: right !important;
	right: auto !important;
	bottom: auto !important;
	z-index: auto !important;
	min-width: 0 !important;
	width: 22px !important;
	height: 22px !important;
	margin: -1px 0 0 8px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 7px !important;
	font-size: 12px !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	background: rgba(7, 14, 27, 0.92) !important;
	border: 1px solid rgba(103, 212, 255, 0.34) !important;
	color: #dceeff !important;
	box-shadow: none !important;
	transform: none !important;
}

.panel-sidebar .panel-title a.btn-xs.pull-right[style*="width:22px"]:hover,
.panel-sidebar .panel-title a.btn-xs.pull-right[style*="width: 22px"]:hover {
	background: rgba(56, 168, 255, 0.18) !important;
	color: #ffffff !important;
	box-shadow: 0 0 12px rgba(56,168,255,.22) !important;
}

/* Corpo do login */
.panel-sidebar .panel-body,
.panel-usercp .panel-body {
	position: relative;
	padding: 18px 18px 30px;
}

.panel-sidebar input[type=text],
.panel-sidebar input[type=password],
.panel-usercp input[type=text],
.panel-usercp input[type=password] {
	height: 36px;
	margin-bottom: 10px;
}

.panel-sidebar input[type=submit],
.panel-usercp input[type=submit],
.panel-sidebar button[type=submit],
.panel-usercp button[type=submit] {
	min-width: 82px;
	height: 39px;
	padding: 0 18px !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	background: linear-gradient(135deg, #3aa8ff, #2264d6);
}

/* Status do servidor na lateral */
.stk-sidebar-status-panel {
	margin-top: 16px;
}

.stk-sidebar-status-panel .panel-body {
	padding: 16px 18px;
}

.stk-sidebar-status-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #cbd6ea;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.stk-sidebar-status-row .online-count {
	color: #4cff9e;
	font-size: 15px;
	text-shadow: 0 0 12px rgba(76,255,158,.42);
}

.stk-sidebar-status-panel .dh-online-bar {
	margin: 11px 0 12px;
}

.stk-sidebar-status-note {
	color: #8fa0ba;
	font-size: 11px;
	line-height: 1.5;
}

/* Remove banners antigos se algum include legado renderizar */
.sidebar-banner {
	display: none !important;
}

/* Layout principal */
#container {
	margin-top: 0 !important;
}

/* Responsivo do hero */
@media (max-width: 991px) {
	.stk-hero {
		padding: 42px 14px 28px !important;
	}

	.stk-hero .dh-logo {
		max-height: 120px !important;
	}

	.stk-hero-subtitle {
		font-size: 11px !important;
		letter-spacing: .10em;
	}
}