/*!
 * Avroramu Theme - Deep Purple Fantasy MMO
 * Visual theme only. Layout structure unchanged.
 * Uses same HTML/classes as default template.
 =========================================================
*/

/* ========== CSS VARIABLES ========== */
:root {
	--bg-main: #0f0a1f;
	--bg-panel: #1e1238;
	--bg-dark: #1a1033;
	--accent-purple: #6a00ff;
	--glow-purple: #9d4dff;
	--accent-cyan: var(--glow-purple);
	--text-main: #e6dcff;
	--text-heading: #f0ebff;
	--gold-accent: #d4af37;
	--panel-border: rgba(157, 77, 255, 0.4);
	--panel-glow: rgba(157, 77, 255, 0.25);
	--panel-shadow: 0 8px 32px rgba(15, 10, 31, 0.6);
	--font-heading: 'Orbitron', sans-serif;
	--font-body: 'Rajdhani', sans-serif;
	--transition-fast: 0.25s ease;
}

/* ========== BASE & BACKGROUND ========== */
html {
	min-width: 1300px;
	height: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background-color: #0f0a1f !important;
	background-image: var(--hero-bg, none) !important;
	background-position: center 6% !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	color: var(--text-main);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
	min-height: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: var(--text-main);
	text-decoration: none;
	transition: color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

a:hover {
	color: var(--glow-purple);
	text-shadow: 0 0 12px rgba(157, 77, 255, 0.35);
}

img {
	border: 0;
}

/* ========== INPUTS ========== */
input[type=text],
input[type=password],
input[type=number] {
	background: rgba(30, 18, 56, 0.8);
	border: 1px solid var(--panel-border);
	color: var(--text-main);
	border-radius: 4px;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type=text]::placeholder,
input[type=password]::placeholder,
input[type=number]::placeholder {
	color: rgba(157, 77, 255, 0.85);
}

input[type=text]::-ms-input-placeholder,
input[type=password]::-ms-input-placeholder,
input[type=number]::-ms-input-placeholder {
	color: rgba(157, 77, 255, 0.85);
}

input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus {
	border-color: var(--accent-purple);
	box-shadow: 0 0 12px rgba(106, 0, 255, 0.4);
	outline: none;
}

/* ========== HEADER & HERO GLOW ========== */
#header {
	width: 100%;
	margin: 0 auto;
	padding: 80px 0 10px;
	text-align: center;
	color: var(--text-main);
	position: relative;
}

#header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	max-width: 800px;
	height: 200px;
	background: radial-gradient(ellipse at center, rgba(157, 77, 255, 0.2) 0%, transparent 70%);
	pointer-events: none;
}

/* ========== CONTAINER (MAIN PANEL) ========== */
#container {
	background: rgba(28, 18, 52, 0.78) !important;
	width: calc(100% - 120px);
	max-width: 1360px;
	height: auto;
	margin: 350px auto 0;
	padding: 20px 0;
	border-radius: 10px 10px 0 0;
	border: 1px solid var(--panel-border);
	box-shadow: var(--panel-shadow), 0 0 32px var(--panel-glow), inset 0 1px 0 rgba(157, 77, 255, 0.06);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	position: relative;
}

#content {
	width: 100%;
	overflow: auto;
	min-height: 500px;
	padding: 10px 20px 0;
}

body.login-fullscreen-mode {
	background-image: none !important;
}

body.login-fullscreen-mode #header,
body.login-fullscreen-mode .footer,
body.login-fullscreen-mode .newbie-start-banner,
body.login-fullscreen-mode .header-info-container {
	display: none !important;
}

body.login-fullscreen-mode #container {
	width: 100%;
	max-width: none;
	min-height: calc(100vh - 79px);
	margin: 0;
	padding: 0;
	border-radius: 0;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: linear-gradient(180deg, rgba(21, 14, 41, 0.98) 0%, rgba(14, 10, 29, 1) 100%) !important;
}

body.login-fullscreen-mode #content {
	min-height: calc(100vh - 79px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}

body.news-focus-mode {
	background-image: none !important;
	background-color: #100f1d !important;
}

body.news-focus-mode #header {
	display: none !important;
}

body.news-focus-mode #container {
	width: calc(100% - 120px);
	max-width: 1360px;
	margin: 26px auto 0;
	padding: 18px 0;
	background: linear-gradient(180deg, rgba(23, 15, 43, 0.94) 0%, rgba(14, 10, 29, 0.96) 100%) !important;
	border: 1px solid rgba(157, 77, 255, 0.34);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4), 0 0 24px rgba(106, 0, 255, 0.18);
}

body.news-focus-mode #content {
	min-height: auto;
	padding: 10px 26px 18px;
}

body.rankings-focus-mode {
	background-image: none !important;
	background-color: #0f1020 !important;
}

body.rankings-focus-mode #header {
	display: none !important;
}

body.rankings-focus-mode #container {
	width: calc(100% - 80px);
	max-width: 1520px;
	margin: 26px auto 0;
	padding: 18px 0;
	background:
		radial-gradient(circle at 88% 12%, rgba(92, 161, 255, 0.1) 0%, transparent 28%),
		radial-gradient(circle at 10% 90%, rgba(124, 58, 237, 0.1) 0%, transparent 32%),
		linear-gradient(180deg, rgba(23, 15, 43, 0.94) 0%, rgba(14, 10, 29, 0.96) 100%) !important;
	border: 1px solid rgba(125, 144, 176, 0.24);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4), 0 0 24px rgba(106, 0, 255, 0.15);
}

body.rankings-focus-mode #content {
	min-height: auto;
	padding: 10px 26px 18px;
}

body.rankings-wide-footer-mode .footer {
	width: calc(100% - 80px);
	max-width: 1520px;
}

body.profile-focus-mode {
	background-image: none !important;
	background-color: #0f1020 !important;
}

body.profile-focus-mode #header {
	display: none !important;
}

body.profile-focus-mode #container {
	width: calc(100% - 80px);
	max-width: 1520px;
	margin: 26px auto 0;
	padding: 0 18px 0;
	background:
		linear-gradient(180deg, rgba(30, 18, 56, 0.66) 0%, rgba(16, 10, 35, 0.72) 100%),
		radial-gradient(circle at 16% 8%, rgba(157, 77, 255, 0.16) 0%, transparent 60%),
		radial-gradient(circle at 84% 14%, rgba(90, 209, 255, 0.1) 0%, transparent 58%);
	border: 1px solid rgba(157, 77, 255, 0.26);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}

body.profile-focus-mode #content {
	min-height: auto;
	padding: 10px 26px 18px;
}

body.profile-player-focus-mode #content {
	overflow: visible;
	max-height: none;
}

body.profile-player-focus-mode #content::after {
	content: "";
	display: block;
	clear: both;
}

body.profile-guild-focus-mode .footer {
	width: calc(100% - 80px);
	max-width: 1520px;
}

body.profile-player-focus-mode .footer {
	width: calc(100% - 80px);
	max-width: 1520px;
}

body.wiki-focus-mode {
	background-image: none !important;
	background-color: #0f1020 !important;
}

body.wiki-focus-mode #header {
	display: none !important;
}

body.wiki-focus-mode #container {
	width: calc(100% - 80px);
	max-width: 1520px;
	margin: 26px auto 0;
	padding: 18px 0;
	background:
		radial-gradient(circle at 88% 12%, rgba(92, 161, 255, 0.1) 0%, transparent 28%),
		radial-gradient(circle at 10% 90%, rgba(124, 58, 237, 0.1) 0%, transparent 32%),
		linear-gradient(180deg, rgba(23, 15, 43, 0.94) 0%, rgba(14, 10, 29, 0.96) 100%) !important;
	border: 1px solid rgba(125, 144, 176, 0.24);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4), 0 0 24px rgba(106, 0, 255, 0.15);
}

body.wiki-focus-mode #content {
	min-height: auto;
	padding: 10px 26px 18px;
}

body.wiki-wide-footer-mode .footer {
	width: calc(100% - 80px);
	max-width: 1520px;
}

body.downloads-focus-mode {
	background-image: none !important;
	background-color: #0f1020 !important;
}

body.downloads-focus-mode #header {
	display: none !important;
}

body.downloads-focus-mode #container {
	width: calc(100% - 80px);
	max-width: 1520px;
	margin: 26px auto 0;
	padding: 18px 0;
	background:
		radial-gradient(circle at 88% 12%, rgba(92, 161, 255, 0.1) 0%, transparent 28%),
		radial-gradient(circle at 10% 90%, rgba(124, 58, 237, 0.1) 0%, transparent 32%),
		linear-gradient(180deg, rgba(23, 15, 43, 0.94) 0%, rgba(14, 10, 29, 0.96) 100%) !important;
	border: 1px solid rgba(125, 144, 176, 0.24);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4), 0 0 24px rgba(106, 0, 255, 0.15);
}

body.downloads-focus-mode #content {
	min-height: auto;
	padding: 10px 26px 18px;
}

body.downloads-wide-footer-mode .footer {
	width: calc(100% - 80px);
	max-width: 1520px;
}

body.userpanel-dashboard-mode {
	background-image: none !important;
	background-color: #0d1017 !important;
}

body.userpanel-dashboard-mode #header,
body.userpanel-dashboard-mode .newbie-start-banner,
body.userpanel-dashboard-mode .footer,
body.userpanel-dashboard-mode .header-info-container,
body.userpanel-dashboard-mode #navbar .navbar-stage-system,
body.userpanel-dashboard-mode #navbar .navbar-lang,
body.userpanel-dashboard-mode #navbar .navbar-inner > ul {
	display: none !important;
}

body.userpanel-dashboard-mode #navbar {
	background: linear-gradient(180deg, rgba(33, 35, 44, 0.98) 0%, rgba(23, 24, 31, 0.98) 100%);
	border-bottom-color: rgba(143, 164, 198, 0.22);
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
}

body.userpanel-dashboard-mode #container {
	width: 100%;
	max-width: none;
	margin: 0;
	min-height: calc(100vh - 80px);
	padding: 24px;
	border-radius: 0;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background:
		radial-gradient(circle at 88% 12%, rgba(92, 161, 255, 0.12) 0%, transparent 28%),
		radial-gradient(circle at 10% 90%, rgba(124, 58, 237, 0.12) 0%, transparent 32%),
		linear-gradient(180deg, #141924 0%, #0d111a 100%) !important;
}

body.userpanel-dashboard-mode #content {
	min-height: calc(100vh - 130px);
	padding: 0;
}

body.userpanel-dashboard-mode .userpanel-sidebar-col,
body.userpanel-dashboard-mode .userpanel-content-col {
	float: left;
}

body.userpanel-dashboard-mode .userpanel-sidebar-col {
	width: 280px;
	padding-right: 18px;
}

body.userpanel-dashboard-mode .userpanel-content-col {
	width: calc(100% - 280px);
}

body.userpanel-dashboard-mode .userpanel-content-wrap {
	background: rgba(17, 22, 33, 0.88);
	border: 1px solid rgba(125, 144, 176, 0.25);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	min-height: calc(100vh - 160px);
}

body.userpanel-dashboard-mode .panel-usercp {
	background: linear-gradient(180deg, rgba(29, 35, 50, 0.96) 0%, rgba(20, 25, 36, 0.96) 100%) !important;
	border: 1px solid rgba(125, 144, 176, 0.24) !important;
}

body.userpanel-dashboard-mode .panel-usercp .panel-heading {
	background: rgba(29, 35, 50, 0.98) !important;
	border-bottom: 1px solid rgba(125, 144, 176, 0.24) !important;
}

body.userpanel-dashboard-mode .panel-usercp .panel-title {
	font-size: 1rem;
	text-shadow: none;
}

body.userpanel-dashboard-mode .panel-usercp ul li {
	border-bottom-color: rgba(125, 144, 176, 0.17);
}

body.userpanel-dashboard-mode .panel-usercp ul li a {
	color: #dbe8ff;
}

body.userpanel-dashboard-mode .panel-usercp ul li a:hover {
	color: #8fd5ff;
}

body.userpanel-dashboard-mode.userpanel-topbar-mode .newbie-start-banner,
body.userpanel-dashboard-mode.userpanel-topbar-mode .header-info-container,
body.userpanel-dashboard-mode.userpanel-topbar-mode #navbar .navbar-stage-system,
body.userpanel-dashboard-mode.userpanel-topbar-mode #navbar .navbar-lang,
body.userpanel-dashboard-mode.userpanel-topbar-mode #navbar .navbar-inner > ul {
	display: block !important;
}

body.userpanel-dashboard-mode.userpanel-topbar-mode .header-info-container {
	display: inline-flex !important;
}

body.userpanel-dashboard-mode.userpanel-topbar-mode #navbar .navbar-dashboard-locked {
	display: none !important;
}

.login-fullscreen-wrap {
	width: 100%;
	max-width: 760px;
	padding: 34px 38px 30px;
	background: linear-gradient(170deg, rgba(34, 21, 66, 0.96), rgba(21, 13, 43, 0.96));
	border: 1px solid rgba(157, 77, 255, 0.5);
	border-radius: 16px;
	box-shadow: 0 18px 55px rgba(0, 0, 0, 0.55), 0 0 40px rgba(106, 0, 255, 0.32);
}

.login-fullscreen-title {
	text-align: center;
	font-size: 30px;
	margin: 0 0 30px;
}

.login-screen-shell {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.login-panel-accent {
	width: 92px;
	height: 5px;
	margin: 0 auto 22px;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(157, 77, 255, 0.2) 0%, rgba(157, 77, 255, 0.95) 50%, rgba(157, 77, 255, 0.2) 100%);
	box-shadow: 0 0 22px rgba(157, 77, 255, 0.45);
}

.login-panel-body {
	max-width: 480px;
	margin: 0 auto;
}

.login-fullscreen-subtitle {
	margin: -12px 0 28px;
	text-align: center;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(225, 216, 247, 0.74);
}

.login-form {
	width: 100%;
}

.login-form-row {
	margin-bottom: 18px;
}

.login-form-label {
	display: block;
	margin: 0 0 8px;
	color: #f2eaff;
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.login-form-input {
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border-radius: 12px;
	border: 1px solid rgba(157, 77, 255, 0.34);
	background: linear-gradient(180deg, rgba(12, 8, 23, 0.96) 0%, rgba(19, 13, 34, 0.98) 100%);
	color: #ffffff;
	font-size: 15px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.login-form-input::placeholder {
	color: rgba(208, 193, 235, 0.42);
}

.login-form-input:focus {
	outline: none;
	border-color: rgba(157, 77, 255, 0.88);
	box-shadow: 0 0 0 3px rgba(157, 77, 255, 0.16), 0 0 22px rgba(106, 0, 255, 0.18);
	transform: translateY(-1px);
}

.login-form-help {
	display: flex;
	justify-content: center;
	margin: 8px 0 24px;
}

.login-form-link {
	color: #d9c4ff;
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

.login-form-link:hover,
.login-form-link:focus {
	color: #ffffff;
	text-shadow: 0 0 12px rgba(157, 77, 255, 0.55);
}

.login-submit-btn {
	min-width: 220px;
	padding: 12px 28px !important;
	border-radius: 12px !important;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.login-form-meta {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	color: rgba(225, 216, 247, 0.7);
	font-size: 13px;
	text-align: center;
	flex-wrap: wrap;
}

.login-fullscreen-form .form-group {
	margin-bottom: 18px;
}

.login-fullscreen-form .control-label {
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding-top: 10px;
}

.login-fullscreen-form .form-control {
	height: 44px;
	border-radius: 8px;
}

.login-fullscreen-form .help-block {
	margin-top: 10px;
}

.login-fullscreen-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* ========== FOOTER ========== */
.footer {
	background: rgba(22, 14, 44, 0.85) !important;
	font-family: var(--font-body);
	width: calc(100% - 120px);
	max-width: 1360px;
	font-size: 13px;
	color: var(--text-main);
	padding: 40px;
	overflow: auto;
	margin: 0 auto 100px;
	border-radius: 0 0 10px 10px;
	border: 1px solid var(--panel-border);
	border-top: none;
	box-shadow: var(--panel-shadow), 0 0 24px var(--panel-glow);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

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

.footer > .footer-container a:hover {
	color: var(--glow-purple) !important;
	text-decoration: underline !important;
}

.footer > .footer-container > .row:first-child a,
.footer > .footer-container > .row:first-child span {
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.footer > .footer-container > .row:first-child .col-xs-12 {
	text-align: center;
}

.footer hr {
	border-top: 1px solid var(--panel-border);
}

.footer .footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	filter: brightness(1.2);
	transition: filter var(--transition-fast), transform var(--transition-fast);
}

.footer .footer-social-link img {
	width: 60px !important;
	height: 60px;
	object-fit: contain;
	display: block;
}

.footer .footer-social-link:hover {
	filter: brightness(1.5);
	transform: scale(1.08);
}

.footer > .footer-container > .row:nth-of-type(3) .col-xs-8,
.footer > .footer-container > .row:nth-of-type(3) .col-xs-8 p,
.footer > .footer-container > .row:nth-of-type(3) .col-xs-8 a {
	font-family: var(--font-heading);
	color: #d7c2ff;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.45;
}

/* ========== NAVIGATION - Purple underline hover + glow ========== */
#navbar {
	width: 100%;
	position: relative;
	z-index: 2100;
	background: rgba(20, 12, 42, 0.82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--panel-border);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 20px var(--panel-glow);
}

#navbar .navbar-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	overflow: visible;
}

.newbie-start-banner {
	width: 100%;
	margin: 0;
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--newbie-start-glow, #9d4dff) 65%, #ffffff 20%);
	border-bottom: 1px solid color-mix(in srgb, var(--newbie-start-glow, #9d4dff) 50%, #120a26 50%);
	background:
		repeating-linear-gradient(
			-45deg,
			color-mix(in srgb, var(--newbie-start-glow, #9d4dff) 18%, #231242 82%) 0 24px,
			color-mix(in srgb, var(--newbie-start-glow, #9d4dff) 10%, #1b0f36 90%) 24px 48px
		);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
	position: relative;
	z-index: 2200;
}

.newbie-start-banner-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 52px 0 16px;
	position: relative;
}

.newbie-start-banner-icon {
	font-size: 13px;
	line-height: 1;
}

.newbie-start-banner-text {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	color: #f0e8ff;
	text-align: center;
	text-shadow: 0 0 10px color-mix(in srgb, var(--newbie-start-glow, #9d4dff) 40%, transparent 60%);
}

.newbie-start-banner-close {
	width: 30px;
	height: 30px;
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	border-radius: 0;
	background: transparent;
	color: rgba(233, 223, 255, 0.9);
	font-size: 32px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity var(--transition-fast), color var(--transition-fast);
}

.newbie-start-banner-close:hover {
	background: transparent;
	color: #ffffff;
	opacity: 1;
}

#navbar .navbar-lang {
	position: absolute;
	left: 20px;
	top: calc(50% - 19px);
	transform: none;
	z-index: 1200;
}

#navbar .navbar-stage-system {
	position: absolute;
	left: 205px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1200;
}

#navbar .navbar-dashboard {
	position: absolute;
	right: 326px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1200;
}

#navbar .navbar-dashboard-locked {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1300;
}

.dashboard-nav-btn {
	min-width: 118px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 12px;
	padding: 8px 14px;
}

.dashboard-nav-indicator {
	cursor: default !important;
	pointer-events: none;
}

.stage-system {
	position: relative;
}

.stage-system-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 38px;
	padding: 0 12px;
	border-radius: 12px;
	border: 1px solid rgba(157, 77, 255, 0.55);
	background: linear-gradient(135deg, rgba(37, 21, 73, 0.94) 0%, rgba(22, 13, 45, 0.94) 100%);
	color: #f2ecff;
	font-family: var(--font-heading);
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.02em;
	box-shadow: 0 0 16px rgba(106, 0, 255, 0.25);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.stage-system-toggle:hover,
.stage-system-toggle:focus {
	border-color: rgba(157, 77, 255, 0.85);
	box-shadow: 0 0 22px rgba(157, 77, 255, 0.4);
	outline: none;
}

.stage-system-icon {
	font-size: 12px;
	color: #c49bff;
}

.stage-system-label {
	color: #e8ddff;
	white-space: nowrap;
}

.stage-system-progress {
	color: #ffcc29;
	font-weight: 700;
}

.stage-system-caret {
	font-size: 9px;
	color: rgba(236, 223, 255, 0.8);
	transition: transform var(--transition-fast);
}

.stage-system.is-open .stage-system-caret {
	transform: rotate(180deg);
}

.stage-system-dropdown {
	position: absolute;
	left: 0;
	top: calc(100% + 10px);
	width: 940px;
	max-width: 96vw;
	z-index: 2600;
	background: linear-gradient(180deg, rgba(20, 12, 44, 0.98) 0%, rgba(10, 8, 28, 0.98) 100%);
	border: 1px solid rgba(157, 77, 255, 0.48);
	border-radius: 10px;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.58), 0 0 24px rgba(157, 77, 255, 0.22);
	padding: 10px 12px 12px;
	display: none;
}

.stage-system.is-open .stage-system-dropdown {
	display: block;
}

.stage-system-headline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid rgba(157, 77, 255, 0.24);
}

.stage-system-headline-main {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.stage-system-headline-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	min-width: 190px;
}

.stage-system-headline-title {
	font-family: var(--font-heading);
	font-size: 20px;
	letter-spacing: 0.08em;
	color: #eadcff;
	text-transform: uppercase;
	line-height: 1;
}

.stage-system-headline-progress {
	min-width: 66px;
	text-align: center;
	font-family: var(--font-heading);
	font-size: 17px;
	line-height: 1;
	color: #efe6ff;
	padding: 6px 10px;
	border-radius: 8px;
	border: 1px solid rgba(157, 77, 255, 0.62);
	background: linear-gradient(180deg, rgba(102, 48, 173, 0.44), rgba(51, 25, 102, 0.44));
	box-shadow: inset 0 0 12px rgba(157, 77, 255, 0.28);
}

.stage-system-nav {
	width: 34px;
	height: 34px;
	border: 1px solid rgba(157, 77, 255, 0.45);
	background: rgba(26, 16, 53, 0.9);
	color: #e6d8ff;
	border-radius: 7px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.stage-system-nav:hover,
.stage-system-nav:focus {
	border-color: rgba(186, 126, 255, 0.9);
	color: #f3ebff;
	box-shadow: 0 0 14px rgba(157, 77, 255, 0.35);
	outline: none;
}

.stage-system-track {
	min-width: 0;
	position: relative;
}

.stage-system-status-label {
	font-family: var(--font-heading);
	font-size: 13px;
	letter-spacing: 0.06em;
	color: #b588ff;
	margin-bottom: 1px;
}

.stage-system-status-time {
	font-size: 10px;
	letter-spacing: 0.03em;
	color: rgba(206, 189, 237, 0.86);
}

.stage-system-status-time-secondary {
	margin-top: 0;
}

.stage-system-countdown {
	color: #d6b7ff;
	font-weight: 700;
}

.stage-system-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.stage-system-col {
	border: 1px solid rgba(157, 77, 255, 0.28);
	border-radius: 8px;
	padding: 8px 8px 9px;
	background: rgba(10, 8, 28, 0.82);
	min-height: 262px;
}

.stage-system-col-title {
	font-family: var(--font-heading);
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.11em;
	color: #caa2ff;
	font-size: 14px;
	padding: 2px 0 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid rgba(157, 77, 255, 0.22);
}

.stage-system-col-subtitle {
	margin-top: 12px;
}

.stage-system-item {
	padding: 0;
	border-radius: 0;
	border: 0;
	background: transparent;
	margin-bottom: 0;
	display: none;
}

.stage-system-item.is-active {
	display: block;
}

.stage-system-col-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stage-system-col-list li {
	color: rgba(224, 212, 245, 0.94);
	font-size: 13px;
	line-height: 1.3;
	padding: 5px 8px 5px 16px;
	margin-bottom: 5px;
	background: rgba(14, 10, 34, 0.62);
	border-radius: 4px;
	position: relative;
	white-space: normal;
	word-break: break-word;
}

.stage-system-col-list li::before {
	content: '\25B8';
	position: absolute;
	left: 5px;
	top: 5px;
	font-size: 9px;
	color: #bf97ff;
}

.stage-system-col-list li:last-child {
	margin-bottom: 0;
}

#navbar .navbar-inner > ul {
	position: relative;
	text-align: center;
	margin: 0 auto;
	padding: 0 230px 0 400px;
	width: 100%;
	box-sizing: border-box;
	list-style: none;
	white-space: nowrap;
}

#navbar .navbar-inner > ul > li {
	list-style: none;
	display: inline-block;
	font-size: 16px;
	font-family: var(--font-heading);
}

#navbar .navbar-inner > ul > li > a {
	display: inline-block;
	color: var(--text-main) !important;
	text-decoration: none;
	padding: 20px 30px;
	transition: color var(--transition-fast), box-shadow var(--transition-fast);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	position: relative;
}

#navbar .navbar-inner > ul > li > a::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 12px;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--accent-purple), var(--glow-purple));
	transition: width var(--transition-fast), left var(--transition-fast);
	box-shadow: 0 0 10px var(--glow-purple);
}

#navbar .navbar-inner > ul > li > a:hover::after,
#navbar .navbar-inner > ul > li > a:active::after,
#navbar .navbar-inner > ul > li > a:focus::after {
	width: 70%;
	left: 15%;
}

#navbar .navbar-inner > ul > li > a:active,
#navbar .navbar-inner > ul > li > a:focus,
#navbar .navbar-inner > ul > li > a:hover {
	color: var(--glow-purple) !important;
	text-shadow: 0 0 12px rgba(157, 77, 255, 0.6);
}

#navbar .navbar-inner > ul > li > a.navbar-dashboard-link {
	margin-left: 10px;
	padding: 10px 18px;
	border-radius: 10px;
	border: 1px solid rgba(157, 77, 255, 0.8);
	background: linear-gradient(135deg, #7b22ff 0%, #4f12c7 100%);
	color: #f7f2ff !important;
	box-shadow: 0 0 14px rgba(123, 34, 255, 0.4);
}

#navbar .navbar-inner > ul > li > a.navbar-dashboard-link::after {
	display: none;
}

#navbar .navbar-inner > ul > li > a.navbar-dashboard-link:hover,
#navbar .navbar-inner > ul > li > a.navbar-dashboard-link:focus,
#navbar .navbar-inner > ul > li > a.navbar-dashboard-link:active {
	color: #ffffff !important;
	text-shadow: none;
	box-shadow: 0 0 18px rgba(157, 77, 255, 0.65), 0 0 28px rgba(106, 0, 255, 0.45);
	filter: brightness(1.08);
}

/* ========== BUTTONS - Purple gradient, hover glow, smooth transitions ========== */
.btn,
button[type=submit],
input[type=submit] {
	background: linear-gradient(135deg, var(--accent-purple) 0%, #5200cc 100%) !important;
	border: 1px solid var(--glow-purple) !important;
	color: var(--text-main) !important;
	font-family: var(--font-heading);
	font-weight: 600;
	padding: 8px 20px;
	border-radius: 6px;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast), border-color var(--transition-fast) !important;
	box-shadow: 0 0 15px rgba(106, 0, 255, 0.4);
}

.btn:hover,
button[type=submit]:hover,
input[type=submit]:hover,
.btn:focus,
.btn:active {
	transform: scale(1.03);
	box-shadow: 0 0 22px var(--glow-purple), 0 0 36px rgba(157, 77, 255, 0.45) !important;
	filter: brightness(1.08);
}

.btn-primary {
	background: linear-gradient(135deg, var(--accent-purple) 0%, #5200cc 100%) !important;
	border-color: var(--glow-purple) !important;
	color: var(--text-main) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	color: var(--text-main) !important;
	background: linear-gradient(135deg, var(--glow-purple) 0%, var(--accent-purple) 100%) !important;
}

.admincp-button {
	position: absolute;
	top: 10px;
	right: 10px;
	background: var(--bg-panel) !important;
	border: 2px solid var(--gold-accent) !important;
	color: var(--gold-accent) !important;
	font-weight: bold !important;
}

/* ========== PAGE TITLE & TYPOGRAPHY ========== */
.page-title {
	color: var(--text-heading);
	font-family: var(--font-heading);
	font-size: 1.75rem;
	margin-bottom: 10px;
	font-weight: 700;
	text-shadow: 0 0 20px rgba(157, 77, 255, 0.45);
	letter-spacing: 0.02em;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text-heading);
	font-family: var(--font-heading);
	font-weight: 600;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ========== PANELS - Dark purple glass, border glow, soft shadow ========== */
body .panel,
body .panel-default,
.panel,
.panel-news,
.panel-general,
.panel-addstats,
.panel-downloads {
	background: rgba(20, 12, 42, 0.72) !important;
	border: 1px solid var(--panel-border) !important;
	border-radius: 10px !important;
	box-shadow: var(--panel-shadow), 0 0 24px var(--panel-glow), inset 0 1px 0 rgba(157, 77, 255, 0.08) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	color: var(--text-main) !important;
	margin-bottom: 30px;
	padding: 0;
}

body .panel-heading,
.panel-heading {
	background: rgba(26, 16, 51, 0.92) !important;
	border: none !important;
	border-bottom: 1px solid var(--panel-border) !important;
	border-radius: 10px 10px 0 0 !important;
	color: var(--text-heading) !important;
	font-family: var(--font-heading);
	font-weight: 600;
	padding: 12px 15px;
}

body .panel-title,
.panel-title {
	color: var(--text-heading) !important;
	font-family: var(--font-heading);
	font-size: 1.15rem;
	text-shadow: 0 0 15px rgba(157, 77, 255, 0.35);
}

body .panel-body,
.panel-body {
	color: var(--text-main) !important;
	background: transparent !important;
}

body .panel-default .panel-heading,
body .panel-default .panel-body {
	background: rgba(26, 16, 51, 0.92) !important;
	border-color: var(--panel-border) !important;
	color: var(--text-heading) !important;
}

body .panel-default .panel-body {
	background: transparent !important;
	color: var(--text-main) !important;
}

.panel-body .panel-title {
	color: var(--text-main);
	border-bottom-color: var(--panel-border);
}

/* News */
.news-switch-wrap {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0 auto 36px;
	max-width: 1280px;
	justify-content: center;
	padding: 0 14px;
	border-radius: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	overflow-x: auto;
}

.news-switch-wrap .news-switch-menu.rankings_menu {
	justify-content: center;
	margin: 0;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(38, 22, 72, 0.9), rgba(24, 15, 48, 0.9));
	border: 1px solid rgba(157, 77, 255, 0.35);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 20px rgba(10, 6, 24, 0.35);
}

.news-switch-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 126px;
	min-height: 40px;
	padding: 8px 18px;
	border-radius: 10px;
	font-size: 15px;
	font-family: var(--font-heading);
	letter-spacing: 0.02em;
	background: transparent;
	border: 1px solid transparent;
	color: #d8c8ff;
	white-space: nowrap;
	text-decoration: none !important;
	transition: all .2s ease;
}

.news-switch-btn:hover,
.news-switch-btn.active {
	color: #ffffff;
	border-color: rgba(157, 77, 255, 0.7);
	background: linear-gradient(135deg, rgba(102, 49, 194, 0.5), rgba(70, 34, 146, 0.5));
	box-shadow: 0 0 18px rgba(157, 77, 255, 0.28);
}

.panel-news {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 16px;
	border: 1px solid rgba(157, 77, 255, 0.34) !important;
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(165deg, rgba(20, 12, 42, 0.9), rgba(11, 8, 27, 0.94)) !important;
	box-shadow: 0 12px 30px rgba(8, 5, 19, 0.42), 0 0 22px rgba(157, 77, 255, 0.14);
}

.panel-news .panel-heading {
	padding: 14px 18px !important;
	border-bottom: 1px solid rgba(157, 77, 255, 0.26) !important;
	background: linear-gradient(180deg, rgba(34, 21, 66, 0.92), rgba(22, 14, 45, 0.9)) !important;
	position: relative;
	padding-right: 86px !important;
}

.panel-news .panel-title {
	color: var(--accent-cyan);
	font-size: 24px;
	font-family: var(--font-heading);
	letter-spacing: 0.01em;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding-right: 8px;
}

.panel-news .panel-title a {
	color: #f3ebff !important;
	text-decoration: none !important;
	transition: color .2s ease, text-shadow .2s ease;
}

.panel-news .panel-title a:hover {
	color: #ffffff !important;
	text-shadow: 0 0 11px rgba(157, 77, 255, 0.35);
}

.panel-news .panel-body {
	padding: 20px 22px !important;
	display: block;
	min-height: 96px;
	color: rgba(233, 224, 255, 0.95);
	font-size: 17px;
	line-height: 1.72;
}

.panel-news .panel-body p {
	margin: 0 0 14px;
}

.panel-news .panel-body a {
	color: #d2b5ff;
	text-decoration: underline;
	text-decoration-color: rgba(157, 77, 255, 0.35);
}

.panel-news .panel-body img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 16px auto;
	border-radius: 12px;
	border: 1px solid rgba(157, 77, 255, 0.34);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.38), 0 0 16px rgba(157, 77, 255, 0.12);
}

.panel-news .panel-body hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(157, 77, 255, 0), rgba(157, 77, 255, 0.42), rgba(157, 77, 255, 0));
	margin: 18px 0;
}

.news-preview-text {
	margin: 0;
	color: rgba(230, 220, 255, 0.95);
	font-size: 16px;
	line-height: 1.65;
}

.news-readmore {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
	padding: 7px 16px;
	border-radius: 8px;
	border: 1px solid rgba(157, 77, 255, 0.65);
	background: linear-gradient(135deg, rgba(102, 49, 194, 0.5), rgba(70, 34, 146, 0.5));
	color: #ffffff !important;
	font-family: var(--font-heading);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none !important;
}

.news-readmore:hover {
	color: #ffffff !important;
	border-color: rgba(176, 129, 255, 0.9);
	box-shadow: 0 0 16px rgba(157, 77, 255, 0.34);
}

.panel-news .panel-footer {
	border-top: 1px solid rgba(157, 77, 255, 0.24);
	background: rgba(24, 14, 47, 0.7);
	color: rgba(230, 220, 255, 0.82);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 46px;
	padding: 10px 16px 12px;
	overflow: hidden;
	line-height: 1.2;
	font-family: var(--font-heading);
	font-size: 14px;
}

.panel-news .panel-footer .col-xs-6 {
	float: none;
	width: auto;
	padding: 0;
	position: relative;
	top: -1px;
}

.panel-news .panel-footer .col-xs-6:first-child {
	display: none;
}

.panel-news.panel-news-type-notice { border-color: rgba(166, 112, 255, 0.45) !important; }
.panel-news.panel-news-type-news { border-color: rgba(88, 182, 255, 0.45) !important; }
.panel-news.panel-news-type-changelog { border-color: rgba(60, 232, 184, 0.45) !important; }
.panel-news.panel-news-type-update { border-color: rgba(255, 188, 92, 0.45) !important; }

.news-type-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 10px;
	font-family: var(--font-heading);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: middle;
}

.news-type-badge-notice { background: rgba(157, 77, 255, 0.18); border: 1px solid rgba(157, 77, 255, 0.45); color: #d7bbff; }
.news-type-badge-news { background: rgba(88, 182, 255, 0.14); border: 1px solid rgba(88, 182, 255, 0.4); color: #bfe8ff; }
.news-type-badge-changelog { background: rgba(60, 232, 184, 0.14); border: 1px solid rgba(60, 232, 184, 0.42); color: #b7f8e6; }
.news-type-badge-update { background: rgba(255, 188, 92, 0.16); border: 1px solid rgba(255, 188, 92, 0.42); color: #ffe4b8; }

.news-new-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 10px;
	font-family: var(--font-heading);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: middle;
	background: rgba(255, 86, 86, 0.2);
	border: 1px solid rgba(255, 86, 86, 0.65);
	color: #ffd8d8;
	box-shadow: 0 0 10px rgba(255, 86, 86, 0.25);
}

.news-new-badge-corner {
	position: absolute;
	top: 12px;
	right: 12px;
	margin: 0;
	z-index: 2;
}

.news-new-badge-corner-detail {
	top: 14px;
	right: 14px;
}

/* News hub layout: left list + right detail */
.news-hub-layout {
	max-width: 1280px;
	margin: 8px auto 10px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 0 10px;
}

.news-hub-sidebar {
	width: 360px;
	max-height: 76vh;
	overflow-y: auto;
	padding-right: 4px;
}

.news-hub-item {
	display: block;
	text-decoration: none !important;
	padding: 16px 16px 14px;
	margin-bottom: 10px;
	border-radius: 12px;
	border: 1px solid rgba(157, 77, 255, 0.3);
	background: linear-gradient(160deg, rgba(29, 18, 54, 0.9), rgba(15, 10, 31, 0.94));
	box-shadow: 0 8px 24px rgba(8, 5, 19, 0.32);
	position: relative;
}

.news-hub-item:hover {
	border-color: rgba(157, 77, 255, 0.62);
	box-shadow: 0 0 16px rgba(157, 77, 255, 0.22);
}

.news-hub-item.is-active {
	border-color: rgba(157, 77, 255, 0.8);
	box-shadow: 0 0 18px rgba(157, 77, 255, 0.3);
	background: linear-gradient(160deg, rgba(43, 25, 77, 0.92), rgba(21, 12, 39, 0.96));
}

.news-hub-item-title {
	color: #f0e8ff;
	font-family: var(--font-heading);
	font-size: 20px;
	line-height: 1.25;
	margin-bottom: 12px;
	padding-right: 86px;
}

.news-hub-item-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-right: 6px;
}

.news-hub-item-date {
	color: rgba(226, 212, 255, 0.8);
	font-family: var(--font-heading);
	font-size: 13px;
	white-space: nowrap;
	margin-left: auto;
}

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

.news-hub-detail .panel-news {
	margin: 0;
}

.news-hub-detail .panel-news .panel-title {
	font-size: 34px;
}

/* ========== SIDEBAR PANELS (left, center, right) ========== */
.panel-sidebar {
	background: rgba(20, 12, 42, 0.72) !important;
	border: 1px solid var(--panel-border) !important;
	border-radius: 10px;
	box-shadow: var(--panel-shadow), 0 0 24px var(--panel-glow), inset 0 1px 0 rgba(157, 77, 255, 0.08);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	margin-bottom: 20px;
}

/* VIP premium card */
.vip-upgrade-intro {
	max-width: 1200px;
	margin: 0 auto 16px;
}

.vip-upgrade-intro h2 {
	margin: 0 0 8px;
	font-family: var(--font-heading);
	font-size: 34px;
	color: #f3ecff;
}

.vip-upgrade-intro p {
	margin: 0;
	font-size: 18px;
	color: rgba(228, 214, 255, 0.85);
}

.vip-plan-card {
	max-width: 1200px;
	margin: 0 auto 22px;
	padding: 20px 22px;
	border-radius: 14px;
	border: 1px solid rgba(157, 77, 255, 0.35);
	background: linear-gradient(170deg, rgba(34, 21, 66, 0.94), rgba(16, 12, 36, 0.96));
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35), 0 0 24px rgba(106, 0, 255, 0.2);
}

.vip-plan-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.vip-plan-name {
	font-family: var(--font-heading);
	font-size: 30px;
	color: #f7f1ff;
}

.vip-plan-badge {
	padding: 6px 12px;
	border-radius: 999px;
	font-family: var(--font-heading);
	font-size: 13px;
	color: #07253c;
	background: linear-gradient(135deg, #7fe4ff, #7cb8ff);
}

.vip-plan-features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 16px;
	margin-bottom: 18px;
}

.vip-feature-item {
	position: relative;
	padding-left: 24px;
	font-size: 17px;
	color: rgba(240, 232, 255, 0.95);
	line-height: 1.35;
}

.vip-feature-item::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: #4ed3ff;
	font-weight: 700;
}

.vip-plan-packages {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.vip-package-btn {
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	align-items: center;
	gap: 10px;
	text-decoration: none !important;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid rgba(157, 77, 255, 0.45);
	background: linear-gradient(150deg, rgba(28, 18, 53, 0.9), rgba(19, 13, 39, 0.92));
}

.vip-package-btn:hover {
	border-color: rgba(157, 77, 255, 0.85);
	box-shadow: 0 0 16px rgba(157, 77, 255, 0.28);
}

.vip-package-days {
	font-family: var(--font-heading);
	font-size: 16px;
	color: #f0e8ff;
}

.vip-package-cost {
	font-family: var(--font-heading);
	font-size: 16px;
	color: #ffcf5a;
	white-space: nowrap;
}

.vip-package-discount {
	font-family: var(--font-heading);
	font-size: 12px;
	color: #9be2ff;
	white-space: nowrap;
}

.vip-package-action {
	font-family: var(--font-heading);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
	background: linear-gradient(135deg, #7b22ff, #4f12c7);
	padding: 5px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.vip-status-note {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid rgba(157, 77, 255, 0.5);
	background: linear-gradient(140deg, rgba(44, 24, 83, 0.92), rgba(27, 15, 56, 0.95));
	color: #e6dcff;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.45;
	box-shadow: 0 0 16px rgba(157, 77, 255, 0.18);
}

.vip-confirm-overlay {
	position: fixed;
	inset: 0;
	background: rgba(8, 6, 16, 0.78);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 3000;
	padding: 16px;
}

.vip-confirm-overlay.is-open {
	display: flex;
}

.vip-confirm-modal {
	width: 100%;
	max-width: 520px;
	border-radius: 14px;
	border: 1px solid rgba(157, 77, 255, 0.58);
	background: linear-gradient(150deg, rgba(34, 20, 66, 0.96), rgba(20, 12, 43, 0.98));
	box-shadow: 0 0 24px rgba(157, 77, 255, 0.24), 0 12px 30px rgba(0, 0, 0, 0.45);
	padding: 20px 18px 16px;
	text-align: center;
}

.vip-confirm-title {
	margin: 0 0 8px;
	color: #f3ebff;
	font-family: var(--font-heading);
	font-size: 26px;
}

.vip-confirm-text {
	margin: 0;
	color: #d9c9ff;
	font-size: 18px;
}

.vip-confirm-subtext {
	margin: 8px 0 16px;
	color: #bca6e8;
	font-size: 15px;
}

.vip-confirm-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.vip-confirm-btn {
	min-width: 120px;
	padding: 9px 16px;
	border-radius: 10px;
	border: 1px solid rgba(157, 77, 255, 0.6);
	font-family: var(--font-heading);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.vip-confirm-no {
	order: 2;
	background: rgba(43, 32, 66, 0.92);
	color: #dbccfb;
}

.vip-confirm-yes {
	order: 1;
	background: linear-gradient(135deg, #7b22ff, #4f12c7);
	color: #ffffff;
}

/* Home: same size for the 3 panels (Top Level, Top Guilds, Events Schedule) */
.home-three-panels {
	display: flex;
	align-items: stretch;
}

.home-three-panels .col-xs-4 {
	display: flex;
}

.home-three-panels .panel-sidebar {
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 420px;
}

.home-three-panels .panel-sidebar .panel-body {
	flex: 1;
	min-height: 400px;
}

.home-three-panels .panel-sidebar-events .panel-body {
	display: flex;
	flex-direction: column;
	min-height: 400px;
	max-height: 400px;
	overflow: hidden;
}

.panel-sidebar > .panel-heading {
	background: rgba(26, 16, 51, 0.92) !important;
	color: var(--text-heading) !important;
	border: 0;
	border-bottom: 2px solid var(--accent-purple);
	border-radius: 10px 10px 0 0;
	box-shadow: 0 0 15px rgba(106, 0, 255, 0.2);
}

.panel-usercp {
	background: linear-gradient(180deg, rgba(106, 0, 255, 0.15) 0%, rgba(30, 18, 56, 0.9) 100%) !important;
}

.panel-usercp .panel-body {
	padding: 10px 8px 10px 6px !important;
}

.usercp-wallet {
	margin: 0 4px 10px 6px;
	padding: 8px 8px 6px;
	border-radius: 10px;
	border: 1px solid rgba(124, 87, 255, 0.35);
	background: linear-gradient(180deg, rgba(25, 19, 48, 0.92) 0%, rgba(18, 13, 36, 0.92) 100%);
}

.usercp-wallet-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #bfa7ff;
	margin-bottom: 6px;
}

.usercp-wallet-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
}

.usercp-wallet-chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 26px;
	padding: 4px 8px;
	border-radius: 8px;
	border: 1px solid transparent;
	font-size: 12px;
	line-height: 1.2;
}

.usercp-wallet-name {
	color: #e7ddff;
	opacity: .95;
}

.usercp-wallet-value {
	font-weight: 800;
	color: #fff;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}

.usercp-wallet-wcoinc {
	background: linear-gradient(180deg, rgba(36, 86, 220, 0.42), rgba(24, 58, 156, 0.42));
	border-color: rgba(112, 162, 255, 0.78);
}

.usercp-wallet-wcoinp {
	background: linear-gradient(180deg, rgba(32, 156, 74, 0.42), rgba(23, 119, 56, 0.42));
	border-color: rgba(106, 226, 138, 0.76);
}

.usercp-wallet-ruud {
	background: linear-gradient(180deg, rgba(129, 86, 44, 0.44), rgba(94, 62, 31, 0.44));
	border-color: rgba(196, 145, 96, 0.78);
}

.usercp-wallet-goblin {
	background: linear-gradient(180deg, rgba(142, 97, 53, 0.44), rgba(103, 70, 38, 0.44));
	border-color: rgba(202, 156, 110, 0.78);
}

.usercp-wallet-default {
	background: linear-gradient(180deg, rgba(92, 58, 152, 0.35), rgba(68, 42, 114, 0.35));
	border-color: rgba(176, 126, 255, 0.56);
}

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

.panel-usercp ul li {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin-bottom: 4px;
	min-height: 36px;
	padding-left: 2px;
}

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

.panel-usercp ul li img {
	width: 28px;
	height: 28px;
	min-width: 28px;
	min-height: 28px;
	object-fit: contain;
	vertical-align: middle;
	flex-shrink: 0;
}

.panel-usercp ul li a {
	color: var(--text-main) !important;
	flex: 1;
	line-height: 1.4;
	text-align: left;
	margin-left: 0;
}

.panel-usercp ul li a:hover,
.panel-usercp ul li a:active {
	color: var(--glow-purple) !important;
}

.sidebar-banner img {
	box-shadow: 0 0 20px rgba(106, 0, 255, 0.3);
	border-radius: 8px;
	border: 1px solid var(--panel-border);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.sidebar-banner img:hover {
	transform: scale(1.02);
	box-shadow: 0 0 30px var(--glow-purple);
}

/* Home top row: keep left/right cards same height so banners align */
.home-top-row {
	display: flex;
	align-items: stretch;
}

.home-top-row > [class*="col-"] {
	display: flex;
	flex-direction: column;
}

.home-top-row .home-top-primary-panel {
	flex: 1 1 auto;
	min-height: 305px;
	margin-bottom: 14px;
}

.home-rank-main-number {
	color: #e6dcff;
	font-family: var(--font-heading);
	font-weight: 700;
}

.home-rank-sub-number {
	color: #ff667d;
	font-size: 11px;
	text-shadow: 0 0 8px rgba(255, 102, 125, 0.75), 0 0 14px rgba(255, 54, 84, 0.45);
}

.home-ranking-name,
.home-ranking-name a {
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #f1e9ff !important;
}

.home-rank-class-icon {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 10px rgba(157, 77, 255, 0.45);
}

.home-guild-inline-logo {
	display: inline-flex;
	align-items: center;
	margin-right: 6px;
	vertical-align: middle;
}

.home-guild-name-cell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	white-space: nowrap;
}

/* ========== SERVER STATS / HEADER INFO - Neon cyan/purple glow, bold font ========== */
.header-info-container {
	position: absolute;
	top: 50%;
	right: 20px;
	width: auto;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-align: right;
	z-index: 1300;
	transform: translateY(-50%);
}

.header-info-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid rgba(120, 214, 118, 0.5);
	background: linear-gradient(135deg, rgba(26, 55, 31, 0.9), rgba(18, 37, 22, 0.9));
	color: #d9ffe0;
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 0 12px rgba(87, 226, 102, 0.2);
}

.header-info-pill-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #63ff6e;
	box-shadow: 0 0 8px rgba(99, 255, 110, 0.9), 0 0 14px rgba(99, 255, 110, 0.6);
	flex: 0 0 8px;
}

.header-info-pill-label {
	color: rgba(222, 255, 227, 0.92);
}

.header-info-pill-count {
	color: #f4fff6;
	font-weight: 700;
}

.header-dashboard-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border-radius: 10px;
	border: 1px solid rgba(157, 77, 255, 0.8);
	background: linear-gradient(135deg, #7b22ff 0%, #4f12c7 100%);
	color: #f7f2ff !important;
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none !important;
	box-shadow: 0 0 14px rgba(123, 34, 255, 0.4);
}

.header-dashboard-link:hover,
.header-dashboard-link:focus {
	color: #ffffff !important;
	text-shadow: none;
	box-shadow: 0 0 18px rgba(157, 77, 255, 0.65), 0 0 28px rgba(106, 0, 255, 0.45);
	filter: brightness(1.08);
}

.header-notify-btn {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(157, 77, 255, 0.62);
	background: linear-gradient(135deg, rgba(56, 25, 109, 0.95) 0%, rgba(31, 16, 64, 0.95) 100%);
	color: #dfcfff !important;
	text-decoration: none !important;
	border-radius: 10px;
	box-shadow: 0 0 12px rgba(123, 34, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	transition: box-shadow var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast), color var(--transition-fast);
}

.header-notify-btn .glyphicon {
	font-size: 15px;
	line-height: 1;
}

.header-notify-btn:hover,
.header-notify-btn:focus {
	color: #ffffff !important;
	border-color: rgba(157, 77, 255, 0.86);
	box-shadow: 0 0 18px rgba(157, 77, 255, 0.58), 0 0 28px rgba(106, 0, 255, 0.4);
	filter: brightness(1.08);
}

.header-notify-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.header-notify-btn.has-unread {
	border-color: rgba(99, 255, 110, 0.7);
	box-shadow: 0 0 18px rgba(99, 255, 110, 0.2), 0 0 24px rgba(106, 0, 255, 0.25);
}

.header-notify-badge {
	position: absolute;
	top: -6px;
	right: -7px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #63ff6e 0%, #34cf43 100%);
	color: #0b2810;
	font-family: var(--font-heading);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	border: 1px solid rgba(210, 255, 214, 0.65);
	box-shadow: 0 0 10px rgba(99, 255, 110, 0.7);
}

.header-notify-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 360px;
	max-height: 430px;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid rgba(157, 77, 255, 0.42);
	background: linear-gradient(180deg, rgba(29, 18, 54, 0.98) 0%, rgba(16, 10, 33, 0.98) 100%);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 22px rgba(106, 0, 255, 0.2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
	text-align: left;
}

.header-notify-wrap.is-open .header-notify-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.header-notify-menu-head {
	padding: 12px 14px;
	border-bottom: 1px solid rgba(157, 77, 255, 0.28);
}

.header-notify-menu-head h4 {
	margin: 0 0 8px;
	color: #f3ecff;
	font-family: var(--font-heading);
	font-size: 16px;
}

.header-notify-actions {
	display: flex;
	gap: 8px;
}

.header-notify-action {
	padding: 5px 8px;
	border-radius: 8px;
	border: 1px solid rgba(157, 77, 255, 0.38);
	background: rgba(40, 24, 77, 0.85);
	color: rgba(229, 214, 255, 0.95);
	font-family: var(--font-heading);
	font-size: 11px;
	letter-spacing: 0.02em;
}

.header-notify-action:hover {
	border-color: rgba(157, 77, 255, 0.65);
	color: #ffffff;
}

.header-notify-list {
	max-height: 350px;
	overflow-y: auto;
	padding: 10px;
}

.header-notify-item {
	border: 1px solid rgba(157, 77, 255, 0.27);
	border-radius: 10px;
	padding: 10px;
	margin-bottom: 10px;
	background: rgba(23, 14, 45, 0.78);
	text-align: left;
}

.header-notify-item:last-child {
	margin-bottom: 0;
}

.header-notify-item.is-unread {
	border-color: rgba(99, 255, 110, 0.45);
	box-shadow: 0 0 10px rgba(99, 255, 110, 0.12);
}

.header-notify-item-title {
	font-family: var(--font-heading);
	font-size: 15px;
	color: #f2e9ff;
	margin-bottom: 6px;
	line-height: 1.25;
	text-align: left;
}

.header-notify-item-text {
	color: rgba(220, 204, 248, 0.9);
	font-size: 13px;
	line-height: 1.4;
	margin-bottom: 8px;
}

.header-notify-item-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.header-notify-item-right {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.header-notify-read {
	font-family: var(--font-heading);
	font-size: 12px;
	color: #b7f8e6;
	text-decoration: none !important;
}

.header-notify-read:hover {
	color: #d8fff5;
}

.header-notify-time {
	font-size: 11px;
	color: rgba(203, 183, 236, 0.8);
}

.header-notify-delete {
	padding: 2px 6px;
	border: 1px solid rgba(255, 120, 120, 0.45);
	background: rgba(74, 24, 42, 0.8);
	color: #ffc2c2;
	border-radius: 7px;
}

.header-notify-delete:hover {
	background: rgba(96, 26, 50, 0.86);
	color: #ffdada;
}

.header-notify-empty {
	padding: 20px 10px;
	text-align: center;
	color: rgba(219, 201, 249, 0.88);
	font-family: var(--font-heading);
	font-size: 13px;
}

.footer-time-row {
	margin: 4px 0;
	color: rgba(230, 220, 255, 0.9);
}

.footer-time-row strong {
	color: var(--accent-cyan);
	font-family: var(--font-heading);
	font-weight: 600;
	margin-right: 4px;
}

.footer-time-row #tServerTime,
.footer-time-row #tLocalTime {
	color: var(--accent-cyan);
	font-family: var(--font-heading);
	font-weight: 700;
	text-shadow: 0 0 10px rgba(157, 77, 255, 0.45);
}

.footer-time-row #tServerDate,
.footer-time-row #tLocalDate {
	color: #cdb2ff;
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Online bar */
.webengine-online-bar {
	width: 100%;
	background: rgba(20, 12, 42, 0.55);
	border: 1px solid rgba(157, 77, 255, 0.35);
	height: 9px;
	margin-top: 6px;
	margin-bottom: 2px;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.35);
}

.webengine-online-bar .webengine-online-bar-progress {
	height: 10px;
	background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
	border-radius: 4px;
	box-shadow: 0 0 15px var(--accent-cyan);
	transition: width var(--transition-fast);
	animation: onlineBarPulse 1.9s ease-in-out infinite;
}

@keyframes onlineUsersPulse {
	0%, 100% {
		transform: scale(1);
		text-shadow: 0 0 12px rgba(157, 77, 255, 0.72), 0 0 20px rgba(106, 0, 255, 0.45);
	}
	50% {
		transform: scale(1.08);
		text-shadow: 0 0 16px rgba(184, 108, 255, 0.95), 0 0 28px rgba(123, 58, 233, 0.7);
	}
}

@keyframes onlineBarPulse {
	0%, 100% {
		filter: brightness(1);
		box-shadow: 0 0 11px rgba(157, 77, 255, 0.48);
	}
	50% {
		filter: brightness(1.12);
		box-shadow: 0 0 18px rgba(175, 105, 255, 0.78);
	}
}

/* ========== HALL OF FAME / RANKINGS - Circular avatars, glowing border, hover scale ========== */
/* Class filter list: no bullets, proper alignment */
.rankings-class-filter {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 20px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.rankings-class-filter li {
	list-style: none !important;
	display: inline-block;
	margin: 0;
	padding: 0;
}

.rankings-class-filter-selection img,
.rankings-class-image,
.myaccount-character-block img,
.panel-addstats .character-avatar img {
	border-radius: 50%;
	box-shadow: 0 0 15px var(--glow-purple), 0 0 25px rgba(106, 0, 255, 0.4);
	border: 2px solid var(--panel-border);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
	animation: avatar-glow 3s ease-in-out infinite;
}

.rankings-class-filter-selection img,
.rankings-class-filter .rankings-class-filter-image {
	width: 44px;
	height: 44px;
	object-fit: contain;
	display: block;
	margin: 0 auto 6px;
}

.rankings-class-filter-selection img:hover,
.rankings-class-image:hover,
.myaccount-character-block img:hover,
.panel-addstats .character-avatar img:hover {
	transform: scale(1.08);
	box-shadow: 0 0 25px var(--glow-purple), 0 0 40px rgba(157, 77, 255, 0.6);
}

@keyframes avatar-glow {
	0%, 100% { box-shadow: 0 0 15px var(--glow-purple), 0 0 25px rgba(106, 0, 255, 0.4); }
	50% { box-shadow: 0 0 22px var(--glow-purple), 0 0 35px rgba(157, 77, 255, 0.55); }
}

.rankings-class-filter-selection {
	color: var(--text-main);
	display: inline-block;
	width: 72px;
	text-align: center;
	font-size: 12px;
	text-decoration: none !important;
	cursor: pointer;
	transition: color var(--transition-fast);
}

.rankings-class-filter-selection:hover {
	color: var(--glow-purple) !important;
}

.rankings-class-filter-grayscale img {
	filter: grayscale(100%);
}

.rankings-class-filter-selection:hover img {
	filter: grayscale(0%);
}

.rankings-mode-switch {
	display: flex;
	justify-content: center;
	gap: 6px;
	width: 100%;
	max-width: 430px;
	margin: 12px auto 16px;
	padding: 6px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(38, 22, 72, 0.9), rgba(24, 15, 48, 0.9));
	border: 1px solid rgba(157, 77, 255, 0.35);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 20px rgba(10, 6, 24, 0.35);
}

.rankings-mode-btn {
	flex: 1 1 50%;
	height: 40px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: rgba(230, 220, 255, 0.9);
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.rankings-mode-btn:hover {
	color: #f5eeff;
	border-color: rgba(157, 77, 255, 0.4);
	background: rgba(96, 48, 176, 0.15);
}

.rankings-mode-btn.active {
	background: linear-gradient(135deg, rgba(102, 49, 194, 0.5), rgba(70, 34, 146, 0.5));
	border-color: rgba(157, 77, 255, 0.7);
	color: #ffffff;
	box-shadow: 0 0 18px rgba(157, 77, 255, 0.28);
}

.rankings-weekly-score-switch {
	margin-top: 0;
	margin-bottom: 14px;
	max-width: 430px;
}

.rankings-mode-panel {
	display: none;
}

.rankings-mode-panel.is-active {
	display: block;
}

table.rankings-mode-panel.is-active {
	display: table;
}

/* Rankings tables */
.rankings-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	margin-top: 12px;
	background: rgba(20, 12, 42, 0.62);
	border: 2px solid rgba(157, 77, 255, 0.34);
	border-radius: 10px;
	overflow: hidden;
}

.rankings-table tr td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--panel-border);
	color: var(--text-main);
	font-family: var(--font-body);
	vertical-align: middle;
	font-size: 18px;
	line-height: 1.2;
}

.rankings-table tr:not(:first-child):hover td {
	background: rgba(106, 0, 255, 0.08);
}

.rankings-table tr:last-child td {
	border-bottom: none;
}

.rankings-table td:first-child {
	text-align: center;
}

.rankings-table td:last-child {
	text-align: right;
	font-family: var(--font-heading);
	color: var(--accent-cyan);
	font-weight: 700;
}

.rankings-table td a {
	color: #f0ebff !important;
	text-decoration: none !important;
}

.rankings-table td a:hover {
	color: var(--accent-cyan) !important;
	text-shadow: 0 0 12px rgba(157, 77, 255, 0.35);
}

/* Class icon inside table: fixed size, no crop */
.rankings-table .rankings-class-image {
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	object-fit: contain;
	display: block;
	box-sizing: border-box;
}

/* Country flag in table: keep aspect ratio, no squash */
.rankings-table td img:not(.rankings-class-image):not(.online-status-indicator) {
	height: 26px;
	width: auto;
	max-width: 40px;
	object-fit: contain;
	display: inline-block;
	vertical-align: middle;
}

/* Online status indicator in rankings */
.rankings-table .online-status-indicator {
	width: 14px;
	height: 14px;
	margin-left: 4px;
	vertical-align: middle;
}

.rankings-vip-name a,
.rankings-vip-name {
	color: #d8adff !important;
	text-shadow: 0 0 8px rgba(157, 77, 255, 0.85), 0 0 18px rgba(188, 110, 255, 0.58), 0 0 24px rgba(255, 164, 90, 0.28);
	font-weight: 700;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
}

.rankings-vip-name a:hover {
	color: #f0dcff !important;
	text-shadow: 0 0 10px rgba(170, 95, 255, 0.95), 0 0 22px rgba(205, 128, 255, 0.66), 0 0 28px rgba(255, 175, 99, 0.34);
}

.rankings-vip-flame {
	display: inline-block;
	font-size: 13px;
	line-height: 1;
	filter: hue-rotate(240deg) saturate(1.8) brightness(1.15);
	text-shadow: 0 0 8px rgba(177, 95, 255, 0.95), 0 0 16px rgba(126, 63, 233, 0.76), 0 0 24px rgba(255, 144, 99, 0.35);
	animation: vipFlamePulse 1.25s ease-in-out infinite;
}

@keyframes vipFlamePulse {
	0%, 100% { transform: translateY(0) scale(1); opacity: 0.9; }
	50% { transform: translateY(-1px) scale(1.08); opacity: 1; }
}

.rankings-vip-name[data-vip-tooltip]::after {
	content: attr(data-vip-tooltip);
	position: absolute;
	left: calc(100% + 12px);
	top: 50%;
	transform: translateX(-6px) translateY(-50%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	white-space: nowrap;
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid rgba(157, 77, 255, 0.55);
	background: linear-gradient(180deg, rgba(31, 18, 58, 0.98), rgba(18, 11, 38, 0.98));
	color: #f3eaff;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: 0 10px 22px rgba(8, 5, 18, 0.62), 0 0 16px rgba(157, 77, 255, 0.28);
	z-index: 2400;
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.rankings-vip-name[data-vip-tooltip]::before {
	content: '';
	position: absolute;
	left: calc(100% + 7px);
	top: 50%;
	width: 10px;
	height: 10px;
	transform: translateY(-50%) rotate(45deg) translateX(-4px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	background: rgba(24, 14, 46, 0.98);
	border-right: 1px solid rgba(157, 77, 255, 0.55);
	border-bottom: 1px solid rgba(157, 77, 255, 0.55);
	z-index: 2399;
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.rankings-vip-name[data-vip-tooltip]:hover::after {
	opacity: 1;
	visibility: visible;
	transform: translateX(0) translateY(-50%);
}

.rankings-vip-name[data-vip-tooltip]:hover::before {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) rotate(45deg) translateX(0);
}

.rankings-table-place {
	color: var(--accent-cyan);
	font-family: var(--font-heading);
	font-weight: 700;
	text-shadow: 0 0 10px rgba(157, 77, 255, 0.4);
	width: 48px;
}

.rankings-table tr:first-child td {
	padding-top: 12px;
	padding-bottom: 12px;
	color: var(--gold-accent);
	border-bottom: 2px solid var(--gold-accent);
	text-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
	background: rgba(26, 16, 51, 0.92);
	font-family: var(--font-heading);
	font-size: 17px;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.rankings-update-time {
	margin-top: 10px;
	color: rgba(230, 220, 255, 0.75);
	font-size: 13px;
	text-align: right;
}

.rankings-table-compact tr td {
	padding: 8px 8px;
	font-size: 15px;
}

.rankings-table-compact tr:first-child td {
	font-size: 14px;
	letter-spacing: 0;
}

.rankings-table-compact .rankings-table-place {
	font-size: 18px;
	width: 36px;
}

.rankings-topall-table td:last-child {
	font-family: var(--font-body);
	color: var(--text-main);
	font-weight: 600;
}

.rankings-topall-table {
	table-layout: auto;
}

.rankings-topall-table tr:first-child td {
	white-space: normal;
}

.score-rules-info-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-left: 4px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.6);
	font-size: 10px;
	line-height: 1;
	color: #fff;
	opacity: 0.85;
}

.rankings-score-cell {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	min-width: 72px;
}

.rankings-score-value {
	display: inline-block;
	min-width: 44px;
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.rankings-score-cell .score-rules-info-dot {
	margin-left: 0;
}

.score-rules-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease;
	z-index: 2900;
}

.score-rules-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.score-rules-drawer {
	position: fixed;
	top: 16px;
	right: 16px;
	left: auto;
	width: clamp(320px, 30vw, 460px);
	max-width: calc(100vw - 32px);
	height: auto;
	max-height: calc(100vh - 32px);
	background: linear-gradient(180deg, rgba(33, 35, 44, 0.98) 0%, rgba(23, 24, 31, 0.98) 100%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
	display: block;
	opacity: 0;
	transform: translate3d(24px,0,0);
	visibility: hidden;
	pointer-events: none;
	z-index: 3000;
	padding: 20px;
	overflow-y: auto;
	transition: opacity .18s ease, transform .22s ease;
}

.score-rules-drawer.is-open {
	opacity: 1;
	transform: translate3d(0,0,0);
	visibility: visible;
	pointer-events: auto;
}

.score-rules-drawer.is-mobile {
	top: 0 !important;
	right: 0 !important;
	left: auto !important;
	width: 100vw;
	max-width: 100vw;
	height: 100vh !important;
	max-height: none !important;
	border-radius: 0 !important;
	border-top: 0 !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
	transform: translate3d(24px,0,0);
} 

.score-rules-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.score-rules-drawer-head h4 {
	margin: 0;
	font-size: 22px;
	font-family: var(--font-heading);
}

.score-rules-close {
	background: transparent !important;
	border: none !important;
	color: #ccc !important;
	box-shadow: none !important;
	font-size: 24px;
	padding: 0 6px;
	line-height: 1;
}

.score-rules-drawer-desc {
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 14px;
	font-size: 16px;
}

.score-rule-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.score-rule-item-avatar {
	width: 56px;
	height: 56px;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	flex-shrink: 0;
}

.score-rule-item-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.score-rule-item-avatar-placeholder {
	background: radial-gradient(circle at 30% 30%, rgba(157, 77, 255, 0.4), rgba(40, 24, 84, 0.55));
}

.score-rule-item-name {
	flex: 1;
	color: #f2f2f2;
	font-size: 16px;
}

.score-rule-item-points {
	background: rgba(130, 136, 160, 0.3);
	border-radius: 8px;
	padding: 4px 9px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.score-rule-empty {
	opacity: .8;
	font-size: 14px;
	padding: 8px 0;
}

body.score-rules-lock {
	overflow: hidden;
}

@media (max-width: 1200px) {
	.rankings-table tr td {
		padding: 8px 8px;
		font-size: 16px;
	}
	.rankings-table tr:first-child td {
		font-size: 15px;
	}
}

.rankings_menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 8px 0 14px;
	padding: 0;
}

.rankings_menu a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 7px 14px;
	border-radius: 8px;
	background: linear-gradient(135deg, rgba(38, 22, 72, 0.95), rgba(28, 18, 56, 0.9));
	border: 1px solid rgba(157, 77, 255, 0.38);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 16px rgba(12, 8, 26, 0.35);
	color: rgba(230, 220, 255, 0.92) !important;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.rankings_menu a:hover {
	transform: translateY(-1px);
	border-color: rgba(157, 77, 255, 0.75);
	background: linear-gradient(135deg, rgba(58, 28, 106, 0.95), rgba(36, 20, 72, 0.92));
	color: #f0ebff !important;
	box-shadow: 0 0 18px rgba(106, 0, 255, 0.35), 0 8px 20px rgba(10, 6, 24, 0.45);
}

.rankings_menu a.active {
	border-color: rgba(157, 77, 255, 0.7);
	background: linear-gradient(135deg, rgba(72, 30, 135, 0.96), rgba(52, 22, 108, 0.92));
	color: var(--glow-purple) !important;
	box-shadow: 0 0 20px rgba(157, 77, 255, 0.22), 0 0 18px rgba(106, 0, 255, 0.32);
}

.rankings-level-hero-copy {
	text-align: center;
	max-width: 980px;
	margin: 6px auto 14px;
}

.rankings-level-hero-line1 {
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #f0ebff;
	text-shadow: 0 0 16px rgba(157, 77, 255, 0.35);
}

.rankings-level-hero-line2 {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	color: rgba(230, 220, 255, 0.9);
	margin-top: 4px;
}

.rankings-level-menu-wrap {
	display: flex;
	justify-content: center;
	margin: 0;
}

.rankings-level-menu-wrap .rankings_menu {
	justify-content: center;
	margin: 0;
	gap: 6px;
	padding: 6px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(38, 22, 72, 0.9), rgba(24, 15, 48, 0.9));
	border: 1px solid rgba(157, 77, 255, 0.35);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 20px rgba(10, 6, 24, 0.35);
}

.rankings-level-menu-wrap .rankings_menu a {
	min-height: 40px;
	padding: 8px 18px;
	border-radius: 8px;
	border: 1px solid transparent;
	background: transparent;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: none;
	transform: none !important;
}

.rankings-level-menu-wrap .rankings_menu a:hover {
	color: #f5eeff !important;
	border-color: rgba(157, 77, 255, 0.4);
	background: rgba(96, 48, 176, 0.15);
	box-shadow: none;
}

.rankings-level-menu-wrap .rankings_menu a.active {
	background: linear-gradient(135deg, rgba(102, 49, 194, 0.5), rgba(70, 34, 146, 0.5));
	border-color: rgba(157, 77, 255, 0.7);
	color: #ffffff !important;
	box-shadow: 0 0 18px rgba(157, 77, 255, 0.28);
}

.rankings-guild-menu-wrap {
	margin: 0;
}

.rankings-hero-header {
	position: relative;
	padding-top: 2px;
	margin-bottom: 16px;
}

.rankings-hero-header .rankings-level-menu-wrap {
	position: static;
	margin: 8px 0 12px;
	justify-content: center;
}

.rankings-hero-header-guilds {
	margin-bottom: 18px;
}

.rankings-guild-featured {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 16px 18px;
	width: 100%;
	max-width: 860px;
	margin: 16px auto 28px;
	border-radius: 14px;
	border: 1px solid rgba(157, 77, 255, 0.35);
	background: linear-gradient(135deg, rgba(29, 18, 60, 0.9), rgba(16, 12, 36, 0.88));
	box-shadow: 0 12px 28px rgba(8, 5, 20, 0.45), 0 0 24px rgba(106, 0, 255, 0.16);
}

.rankings-guilds-table {
	margin-top: 8px;
	table-layout: auto;
}

.rankings-guilds-table tr td {
	padding-left: 10px;
	padding-right: 10px;
}

.rankings-guilds-table tr:first-child td {
	white-space: nowrap;
	letter-spacing: 0.01em;
	font-size: 14px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.rankings-guilds-table tr:first-child td .score-rules-open {
	margin-left: 4px;
}

.rankings-weekly-table {
	table-layout: auto;
}

.rankings-weekly-table tr td {
	padding-left: 9px;
	padding-right: 9px;
}

.rankings-weekly-table tr:first-child td {
	white-space: nowrap;
	font-size: 13px;
	letter-spacing: 0;
}

.rankings-weekly-table tr:first-child td .score-rules-open {
	margin-left: 4px;
}

.rankings-weekly-reward-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.rankings-weekly-reward-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 138px;
	min-height: 30px;
	padding: 5px 10px;
	border-radius: 999px;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .01em;
	border: 1px solid transparent;
}

.rankings-weekly-reward-pill-wcoinc {
	background: linear-gradient(180deg, rgba(37, 82, 195, 0.5), rgba(27, 62, 152, 0.5));
	color: #dbe9ff;
	border-color: rgba(88, 141, 255, 0.88);
	box-shadow: inset 0 0 0 1px rgba(147, 185, 255, 0.22);
}

.rankings-weekly-reward-pill-wcoinp {
	background: linear-gradient(180deg, rgba(25, 133, 88, 0.5), rgba(20, 105, 71, 0.5));
	color: #dcffe9;
	border-color: rgba(66, 217, 145, 0.88);
	box-shadow: inset 0 0 0 1px rgba(143, 255, 206, 0.2);
}

.rankings-weekly-reward-pill-ruud {
	background: linear-gradient(180deg, rgba(125, 84, 38, 0.56), rgba(95, 62, 25, 0.56));
	color: #ffe9cb;
	border-color: rgba(214, 151, 74, 0.9);
	box-shadow: inset 0 0 0 1px rgba(255, 211, 148, 0.2);
}

.rankings-weekly-reward-pill-goblin {
	background: linear-gradient(180deg, rgba(118, 80, 40, 0.56), rgba(88, 57, 28, 0.56));
	color: #ffe8cc;
	border-color: rgba(193, 140, 86, 0.9);
	box-shadow: inset 0 0 0 1px rgba(244, 201, 152, 0.2);
}

.rankings-weekly-reward-pill-default {
	background: linear-gradient(180deg, rgba(90, 62, 150, 0.56), rgba(66, 45, 112, 0.56));
	color: #efe2ff;
	border-color: rgba(188, 127, 224, 0.7);
}

.weekly-archive-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 1px solid rgba(157, 77, 255, 0.35);
	background: rgba(52, 30, 88, 0.45);
	color: #efe5ff !important;
	font-size: 14px;
	line-height: 1;
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.weekly-archive-link:hover {
	transform: translateY(-1px);
	border-color: rgba(157, 77, 255, 0.75);
	background: rgba(96, 48, 176, 0.3);
	box-shadow: 0 0 14px rgba(106, 0, 255, 0.3);
}

.rankings-archive-page {
	display: flex;
	justify-content: center;
	margin: 14px 0 26px;
}

.rankings-archive-card {
	width: 100%;
	max-width: 980px;
	border-radius: 12px;
	border: 1px solid rgba(157, 77, 255, 0.28);
	background: linear-gradient(135deg, rgba(42, 31, 64, 0.86), rgba(27, 21, 45, 0.9));
	box-shadow: 0 14px 32px rgba(8, 5, 20, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
	padding: 18px 20px;
}

.rankings-archive-title {
	font-family: var(--font-heading);
	font-size: 26px;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 2px;
}

.rankings-archive-subtitle {
	font-size: 15px;
	color: rgba(223, 210, 248, 0.86);
	margin-bottom: 14px;
}

.rankings-archive-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 6px;
	border-radius: 10px;
	background: rgba(170, 145, 208, 0.2);
	margin-bottom: 12px;
}

.rankings-archive-tab {
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #ece2ff;
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 700;
	padding: 9px 8px;
	transition: background .2s ease, color .2s ease;
}

.rankings-archive-tab:hover {
	background: rgba(180, 150, 224, 0.22);
}

.rankings-archive-tab.is-active {
	background: rgba(220, 220, 232, 0.35);
	color: #fff;
}

.rankings-archive-list {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.rankings-archive-week {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rankings-archive-week-head {
	width: 100%;
	background: transparent;
	border: 0;
	padding: 13px 2px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 700;
}

.rankings-archive-week-icon {
	opacity: .9;
	font-size: 14px;
}

.rankings-archive-week-label {
	flex: 1;
	text-align: left;
}

.rankings-archive-week-caret {
	opacity: .85;
	font-size: 12px;
}

.rankings-archive-week-body {
	display: none;
	padding: 0 2px 12px;
}

.rankings-archive-week.is-open .rankings-archive-week-body {
	display: block;
}

.rankings-archive-table-wrap {
	display: none;
}

.rankings-archive-table-wrap.is-active {
	display: block;
}

.rankings-archive-table {
	width: 100%;
	border-collapse: collapse;
}

.rankings-archive-table tr td {
	padding: 8px 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: #f3edff;
	font-size: 14px;
}

.rankings-archive-table tr:first-child td {
	color: #d7c5f8;
	font-size: 13px;
	font-family: var(--font-heading);
	font-weight: 700;
}

.rankings-archive-table tr td:first-child {
	width: 48px;
	color: rgba(227, 210, 248, 0.85);
}

.rankings-archive-reward-points,
.rankings-archive-reward-zen {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	margin-right: 6px;
	margin-top: 2px;
}

.rankings-archive-reward-points {
	background: rgba(167, 95, 214, 0.8);
	color: #f8efff;
}

.rankings-archive-reward-zen {
	background: rgba(172, 134, 24, 0.8);
	color: #fff3b3;
}

.rankings-archive-empty {
	padding: 10px 2px 2px;
	color: rgba(235, 224, 255, 0.75);
	font-size: 14px;
}

.rankings-guild-featured-logo img {
	width: 108px;
	height: 108px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 16px rgba(106, 0, 255, 0.22);
}

.rankings-guild-featured-content {
	flex: 0 1 auto;
	min-width: 0;
}

.rankings-guild-featured-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 8px;
}

.rankings-guild-featured-rank {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	color: #ffcc29;
}

.rankings-guild-featured-name,
.rankings-guild-featured-name a {
	font-family: var(--font-heading);
	font-size: 34px;
	line-height: 1;
	color: #f5edff !important;
	text-decoration: none !important;
}

.rankings-guild-featured-badge {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 4px 12px;
	border-radius: 999px;
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #ffd969;
	background: rgba(120, 86, 0, 0.35);
	border: 1px solid rgba(255, 204, 41, 0.48);
}

.rankings-guild-featured-line {
	font-size: 20px;
	color: rgba(235, 226, 255, 0.95);
}

.rankings-guild-featured-label {
	color: rgba(185, 160, 230, 0.92);
}

.rankings-guild-featured-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 8px;
	font-family: var(--font-heading);
	font-size: 15px;
	color: rgba(231, 220, 255, 0.92);
}

@media (max-width: 820px) {
	.rankings-hero-header {
		padding-top: 0;
	}
	.rankings-hero-header .rankings-level-menu-wrap {
		position: static;
		margin: 10px 0 0;
	}
	.rankings-guild-featured {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.rankings-guild-featured-head,
	.rankings-guild-featured-stats {
		justify-content: center;
	}
	.rankings-guild-featured-name,
	.rankings-guild-featured-name a {
		font-size: 28px;
	}
}

/* Sidebar server info table - numbers with neon glow */
.panel-sidebar .table td {
	color: var(--text-main);
	border-color: var(--panel-border) !important;
}

.panel-sidebar .table td[style*="font-weight:bold"],
.panel-sidebar .table td:last-child {
	font-family: var(--font-heading) !important;
	font-weight: 700 !important;
	color: var(--accent-cyan) !important;
	text-shadow: 0 0 10px rgba(157, 77, 255, 0.5);
}

.panel-sidebar .table tr td[style*="color:#00aa00"] {
	color: var(--accent-cyan) !important;
	text-shadow: 0 0 12px rgba(157, 77, 255, 0.7);
}

/* ========== TABLES ========== */
.general-table-ui,
.myaccount-table {
	background: rgba(26, 16, 51, 0.6) !important;
	border: 1px solid var(--panel-border);
	border-radius: 8px;
	color: var(--text-main);
}

.general-table-ui tr:first-child td,
.myaccount-table tr td:first-child {
	color: var(--accent-cyan);
	font-family: var(--font-heading);
}

.general-table-ui tr:nth-child(2n+2) td {
	background: rgba(106, 0, 255, 0.08);
}

.table > tbody > tr > td,
.table > thead > tr > th {
	border-color: var(--panel-border) !important;
	color: var(--text-main);
}

.myaccount-action-btn {
	background: linear-gradient(180deg, #7b2dff 0%, #5b12d6 100%) !important;
	border: 1px solid #8f49ff !important;
	color: #f7f2ff !important;
	font-weight: 700 !important;
	text-transform: lowercase;
	padding-left: 14px !important;
	padding-right: 14px !important;
	box-shadow: 0 0 12px rgba(106, 0, 255, 0.28);
}

.myaccount-action-btn:hover {
	background: linear-gradient(180deg, #8e45ff 0%, #6922de 100%) !important;
	border-color: #a267ff !important;
	box-shadow: 0 0 18px rgba(157, 77, 255, 0.35);
}

.myaccount-credit-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 4px 12px;
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .01em;
	border: 1px solid transparent;
}

.myaccount-credit-chip-wcoinc {
	background: linear-gradient(180deg, rgba(44, 63, 161, 0.35), rgba(32, 47, 126, 0.35));
	border-color: #4f79ff;
	color: #dfe9ff;
}

.myaccount-credit-chip-wcoinp {
	background: linear-gradient(180deg, rgba(20, 118, 115, 0.35), rgba(16, 91, 90, 0.35));
	border-color: #39cfbf;
	color: #d6fffa;
}

.myaccount-credit-chip-ruud {
	background: linear-gradient(180deg, rgba(148, 86, 25, 0.35), rgba(110, 62, 18, 0.35));
	border-color: #d59b54;
	color: #ffe5bf;
}

.myaccount-credit-chip-default {
	background: linear-gradient(180deg, rgba(86, 52, 145, 0.35), rgba(64, 40, 110, 0.35));
	border-color: #9d6de8;
	color: #f1e6ff;
}

/* S6 Vote ranking table: keep contrast on striped rows */
.s6vote-table > thead > tr > th {
	background: rgba(28, 15, 58, 0.92) !important;
	color: #d8c7ff !important;
}

.s6vote-table > tbody > tr > td {
	color: #e9ddff !important;
}

.s6vote-table.table-striped > tbody > tr:nth-of-type(odd) > td,
.s6vote-table.table-striped > tbody > tr:nth-of-type(odd) > th {
	background: rgba(24, 14, 49, 0.9) !important;
}

.s6vote-table.table-striped > tbody > tr:nth-of-type(even) > td,
.s6vote-table.table-striped > tbody > tr:nth-of-type(even) > th {
	background: rgba(14, 9, 31, 0.9) !important;
}

.s6vote-table.table-hover > tbody > tr:hover > td,
.s6vote-table.table-hover > tbody > tr:hover > th {
	background: rgba(42, 22, 84, 0.92) !important;
}

/* S6 Vote – Voting Rewards horizontal carousel (avroramu theme) */
.s6vote-rewards-panel .panel-body {
	padding-left: 0;
	padding-right: 0;
}
.s6vote-rewards-carousel-wrapper {
	overflow: hidden;
	padding: 12px 0 16px;
}
.s6vote-rewards-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 200%;
	will-change: transform;
	animation: s6vote-scroll 50s linear infinite;
}
.s6vote-rewards-carousel-wrapper:hover .s6vote-rewards-track {
	animation-play-state: paused;
}
@keyframes s6vote-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}
.s6vote-rewards-carousel {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 14px;
	justify-content: flex-start;
	align-items: stretch;
	flex: 0 0 50%;
	min-width: 50%;
	padding: 0 14px;
	box-sizing: border-box;
}
.s6vote-reward-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 auto;
	width: 88px;
	min-height: 98px;
	padding: 10px 6px;
	background: linear-gradient(145deg, rgba(30, 18, 56, 0.95), rgba(28, 15, 58, 0.98));
	border: 1px solid var(--panel-border);
	border-radius: 10px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 20px var(--panel-glow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.s6vote-reward-card:hover {
	transform: scale(1.02);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 28px var(--panel-glow), 0 0 14px rgba(157, 77, 255, 0.35);
}
.s6vote-reward-card-img {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
	flex-shrink: 0;
}
.s6vote-reward-card-img img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}
.s6vote-reward-card-name {
	font-size: 11px;
	line-height: 1.3;
	text-align: center;
	color: var(--text-main);
	word-break: break-word;
}
@media (max-width: 768px) {
	.s6vote-reward-card {
		width: 72px;
		min-height: 86px;
		padding: 8px 4px;
	}
	.s6vote-rewards-carousel {
		gap: 10px;
		padding: 0 10px;
	}
	.s6vote-reward-card-img {
		width: 40px;
		height: 40px;
		margin-bottom: 6px;
	}
	.s6vote-reward-card-name {
		font-size: 10px;
	}
}

/* ========== INFO PAGE ========== */
.info-page h2 {
	margin: 18px 0 12px;
	color: #e3e7ff;
	text-shadow: 0 0 12px rgba(157, 77, 255, 0.22);
}

.info-page .table {
	background: rgba(18, 10, 39, 0.82);
	border: 1px solid rgba(157, 77, 255, 0.4);
	box-shadow: 0 0 18px rgba(106, 0, 255, 0.18);
}

.info-page .table > thead > tr > th {
	background: rgba(28, 15, 58, 0.92);
	color: var(--glow-purple);
	font-family: var(--font-heading);
	font-size: 25px;
	border-bottom: 1px solid rgba(157, 77, 255, 0.45) !important;
}

.info-page .table > tbody > tr > td {
	background: rgba(20, 12, 42, 0.84);
	color: #e7defc;
	border-top: 1px solid rgba(157, 77, 255, 0.22) !important;
}

.info-page .table-striped > tbody > tr:nth-of-type(odd) > td,
.info-page .table-striped > tbody > tr:nth-of-type(odd) > th {
	background: rgba(24, 14, 49, 0.9);
}

.info-page .table-striped > tbody > tr:nth-of-type(even) > td,
.info-page .table-striped > tbody > tr:nth-of-type(even) > th {
	background: rgba(14, 9, 31, 0.9);
}

.info-page .table-hover > tbody > tr:hover > td,
.info-page .table-hover > tbody > tr:hover > th {
	background: rgba(42, 22, 84, 0.92) !important;
}

.info-page .table > tbody > tr > td:first-child {
	color: var(--glow-purple);
	font-weight: 600;
}

.info-page iframe {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 1px solid rgba(157, 77, 255, 0.4);
	border-radius: 10px;
	background: rgba(16, 10, 34, 0.85);
}

/* ========== LOGO ========== */
.webengine-mu-logo {
	transition: filter var(--transition-fast), transform var(--transition-fast);
}

.webengine-mu-logo:hover {
	filter: drop-shadow(0 0 20px var(--glow-purple));
	transform: scale(1.02);
}

/* ========== GLOBAL TOP BAR ========== */
.global-top-bar {
	width: 100%;
	background: rgba(18, 10, 38, 0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: rgba(230, 220, 255, 0.9);
	padding: 8px 0 4px;
	text-transform: uppercase;
	font-size: 12px;
	font-family: var(--font-body);
	border-bottom: 1px solid var(--panel-border);
}

.global-top-bar .global-top-bar-content {
	width: 1220px;
	margin: 0 auto;
}

.global-top-bar a {
	color: var(--text-main) !important;
}

.global-top-bar a:hover {
	color: var(--glow-purple) !important;
}

.global-top-bar a.logout {
	color: #ff6b6b !important;
}

/* ========== LANGUAGE DROPDOWN ========== */
.webengine-language-switcher {
	display: inline-block;
	list-style: none;
	padding: 0 !important;
	margin: 0 !important;
	position: relative;
	z-index: 1300;
	min-width: 64px;
	height: 38px;
	max-height: 38px;
	overflow: hidden;
	border-radius: 8px;
	background: rgba(20, 12, 42, 0.95) !important;
	border: 1px solid var(--panel-border) !important;
	box-shadow: 0 0 16px var(--panel-glow), 0 4px 12px rgba(0, 0, 0, 0.35) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: max-height 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

#navbar .webengine-language-switcher {
	display: inline-block;
}

.webengine-language-switcher.lang-dropdown-open {
	height: auto;
	max-height: 340px;
	overflow: visible;
	min-width: 140px;
	border-color: var(--glow-purple);
	box-shadow: 0 0 24px var(--panel-glow), 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.webengine-language-switcher .lang-trigger-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 14px;
	min-height: 38px;
	margin: 0;
	border: none;
	background: transparent;
	color: var(--text-main);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	text-align: left;
	transition: color var(--transition-fast), background var(--transition-fast);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
}

.webengine-language-switcher .lang-trigger-btn img {
	width: 22px;
	height: auto;
	vertical-align: middle;
	flex-shrink: 0;
}

.webengine-language-switcher .lang-trigger-btn::after {
	content: '';
	display: inline-block;
	margin-left: 6px;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid rgba(230, 220, 255, 0.8);
	vertical-align: middle;
	transition: transform 0.25s ease;
}

.webengine-language-switcher.lang-dropdown-open .lang-trigger-btn::after {
	transform: rotate(180deg);
}

.webengine-language-switcher li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(157, 77, 255, 0.25);
	transition: background var(--transition-fast);
}

#navbar .webengine-language-switcher li {
	display: block;
	float: none;
	width: 100%;
}

#navbar .webengine-language-switcher li:not(.lang-trigger) {
	position: relative;
	min-height: 38px;
}

.webengine-language-switcher li:not(.lang-trigger) {
	display: none;
}

.webengine-language-switcher.lang-dropdown-open li:not(.lang-trigger) {
	display: block;
}

.webengine-language-switcher li:last-child {
	border-bottom: none;
}

.webengine-language-switcher li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	min-height: 38px;
	box-sizing: border-box;
	color: var(--text-main) !important;
	text-decoration: none !important;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: color var(--transition-fast), background var(--transition-fast);
}

#navbar .webengine-language-switcher li a {
	display: flex;
	width: 100%;
	padding: 8px 14px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.webengine-language-switcher li a img {
	width: 22px;
	height: auto;
	vertical-align: middle;
	flex-shrink: 0;
}

#navbar .webengine-language-switcher li a::after {
	display: none !important;
	content: none !important;
}

.webengine-language-switcher li:hover {
	background: rgba(106, 0, 255, 0.18);
}

.webengine-language-switcher li a:hover {
	color: var(--glow-purple) !important;
	background: rgba(106, 0, 255, 0.12);
}

/* ========== HOME NEWS BLOCK ========== */
.hall-fame-home-block {
	margin-bottom: 20px;
	padding: 10px 4px 8px;
}

.hall-fame-home-title {
	margin: 0 0 18px;
	font-size: 34px;
	letter-spacing: 0.04em;
	text-align: center;
	color: #f1ebff;
}

.hall-fame-home-icon {
	color: #ffcc29;
	margin-right: 8px;
}

.hall-fame-home-list {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
}

.hall-fame-home-item {
	width: 14.285%;
	min-width: 68px;
	text-align: center;
}

.hall-fame-home-avatar {
	width: 66px;
	height: 66px;
	margin: 0 auto 6px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid rgba(255, 204, 41, 0.9);
	box-shadow: 0 0 14px rgba(157, 77, 255, 0.38);
}

.hall-fame-home-avatar .hall-fame-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.hall-fame-home-name {
	font-family: var(--font-heading);
	font-size: 13px;
	line-height: 1.2;
	color: #ffcc29;
	text-shadow: 0 0 8px rgba(255, 204, 41, 0.25);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hall-fame-home-name a {
	color: inherit;
	text-decoration: none;
}

.hall-fame-home-name a:hover {
	color: #ffe27c;
	text-decoration: none;
}

.home-news-block-article {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 5px 8px;
	border-radius: 10px;
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(138, 79, 255, 0.12) 0%, rgba(138, 79, 255, 0) 55%),
		radial-gradient(130% 130% at 100% 100%, rgba(106, 54, 214, 0.14) 0%, rgba(106, 54, 214, 0) 58%),
		rgba(15, 9, 32, 0.54);
	backdrop-filter: blur(9px) saturate(120%);
	-webkit-backdrop-filter: blur(9px) saturate(120%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 7px 16px rgba(8, 5, 19, 0.38);
	overflow: visible;
	transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
	text-decoration: none !important;
	color: inherit !important;
}

.home-news-block-article::before {
	content: '';
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(120deg, rgba(132, 72, 255, 0.9) 0%, rgba(174, 126, 255, 0.88) 55%, rgba(112, 64, 227, 0.9) 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.home-news-block-article::after {
	display: none;
}

.home-news-block-article:hover {
	transform: translateY(-2px);
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(138, 79, 255, 0.18) 0%, rgba(138, 79, 255, 0) 58%),
		radial-gradient(130% 130% at 100% 100%, rgba(106, 54, 214, 0.2) 0%, rgba(106, 54, 214, 0) 60%),
		rgba(22, 12, 44, 0.68);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 18px rgba(8, 5, 19, 0.45), 0 0 14px rgba(132, 72, 255, 0.24);
}

.home-news-block-article .home-news-block-article-icon {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	color: #efe5ff;
	background: conic-gradient(from 210deg, rgba(132, 72, 255, 0.75), rgba(176, 129, 255, 0.8), rgba(132, 72, 255, 0.75));
	border: 1px solid rgba(176, 129, 255, 0.5);
	box-shadow: 0 0 8px rgba(132, 72, 255, 0.26), 0 0 14px rgba(112, 64, 227, 0.16);
	transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease;
}

.home-news-block-article .home-news-block-article-icon.is-new {
	font-size: 9px;
	letter-spacing: 0.07em;
	color: #fff7d4;
	background: linear-gradient(135deg, rgba(255, 188, 92, 0.95), rgba(255, 142, 72, 0.95));
	border-color: rgba(255, 214, 153, 0.9);
	box-shadow: 0 0 12px rgba(255, 178, 80, 0.58), 0 0 18px rgba(255, 128, 64, 0.32);
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
}

.home-news-block-article:hover .home-news-block-article-icon {
	transform: scale(1.06);
	box-shadow: 0 0 11px rgba(132, 72, 255, 0.36), 0 0 18px rgba(112, 64, 227, 0.24);
	filter: saturate(1.12);
}

.home-news-block-article .home-news-block-article-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.home-news-block-article .home-news-block-article-title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.home-news-block-article .home-news-block-article-title {
	color: #f3ebff;
	font-family: var(--font-heading);
	font-size: 18px;
	letter-spacing: 0.01em;
	font-weight: 700;
	text-shadow: 0 0 7px rgba(132, 72, 255, 0.2);
	transition: color 0.2s ease, text-shadow 0.2s ease;
}

.home-news-more-btn {
	margin-top: 8px;
	padding: 6px 16px !important;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 8px !important;
}

.home-news-block-article:hover .home-news-block-article-title {
	color: #ffffff;
	text-shadow: 0 0 9px rgba(176, 129, 255, 0.36), 0 0 14px rgba(132, 72, 255, 0.24);
}

.home-news-block-article .home-news-block-article-date-wrap {
	flex: 0 0 auto;
	text-align: right;
	padding-left: 8px;
}

.home-news-block-article .home-news-block-article-date {
	display: inline-block;
	font-size: 15px;
	padding: 4px 10px;
	min-width: 92px;
	text-align: center;
	border-radius: 7px;
	color: rgba(249, 241, 255, 0.96);
	background: transparent;
	border: none;
}

.home-news-block-article .home-news-block-article-tag {
	position: absolute;
	top: -12px;
	right: 10px;
	display: inline-block;
	padding: 2px 7px;
	border-radius: 4px;
	font-size: 9px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	background: #5d2ca3;
	border: 1px solid #9d4dff;
	color: #f0dbff;
	box-shadow: 0 4px 10px rgba(9, 4, 21, 0.42);
	z-index: 2;
}

.home-news-block-article .home-news-block-article-tag-notice { background: #5d2ca3; border-color: #9d4dff; color: #f0dbff; }
.home-news-block-article .home-news-block-article-tag-news { background: #175a92; border-color: #58b6ff; color: #d8f1ff; }
.home-news-block-article .home-news-block-article-tag-changelog { background: #146b58; border-color: #3ce8b8; color: #d4fff2; }
.home-news-block-article .home-news-block-article-tag-update { background: #946029; border-color: #ffbc5c; color: #fff0d2; }

@keyframes homeNewsShimmer {
	0% { transform: translateX(-135%); opacity: 0; }
	15% { opacity: 1; }
	100% { transform: translateX(135%); opacity: 0; }
}

@media (max-width: 767px) {
	.home-news-block-article {
		align-items: flex-start;
	}
	.home-news-block-article .home-news-block-article-date-wrap {
		display: none;
	}
}


/* ========== PAYPAL / DOWNLOADS ========== */
.paypal-gateway-content {
	background: rgba(26, 16, 51, 0.9);
	border-color: var(--gold-accent);
	color: var(--text-main);
}

.paypal-gateway-form input[type=text] {
	border-color: var(--gold-accent);
	color: var(--gold-accent);
}

/* ========== CASTLE SIEGE WIDGET ========== */
.castle-owner-widget .panel-heading {
	border-bottom: 1px solid var(--panel-border);
}

.castle-owner-widget .alt {
	color: var(--accent-cyan);
}

.home-castle-widget-wrap .castle-owner-widget {
	max-width: none;
	width: 100%;
	margin: 0;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.home-castle-widget-wrap .castle-owner-widget .panel-heading,
.home-castle-widget-wrap .castle-owner-widget .panel-body {
	background: rgba(20, 12, 42, 0.86) !important;
	border: 1px solid rgba(157, 77, 255, 0.36) !important;
}

.home-castle-widget-wrap .castle-owner-widget .panel-heading {
	border-bottom: none !important;
	border-radius: 10px 10px 0 0 !important;
	padding: 10px 14px !important;
}

.home-castle-widget-wrap .castle-owner-widget .panel-body {
	border-top: none !important;
	border-radius: 0 0 10px 10px !important;
	padding: 14px 18px !important;
}

.home-castle-widget-wrap .castle-owner-widget .row {
	margin-left: -6px;
	margin-right: -6px;
}

.home-castle-widget-wrap .castle-owner-widget [class*="col-"] {
	padding-left: 6px;
	padding-right: 6px;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-layout {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-art-col {
	min-height: 0;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-art-wrap {
	position: relative;
	display: inline-block;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-art {
	max-width: 250px;
	width: auto;
	max-height: 440px;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 0 14px rgba(157, 77, 255, 0.26));
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-held-logo {
	position: absolute;
	left: 50%;
	top: 43%;
	transform: translate(-50%, -50%);
	width: 58px;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 9, 32, 0.75);
	border: 1px solid rgba(157, 77, 255, 0.65);
	border-radius: 8px;
	box-shadow: 0 0 14px rgba(157, 77, 255, 0.35);
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-held-logo img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-no-logo {
	font-size: 18px;
	color: rgba(230, 220, 255, 0.7);
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-info-col {
	text-align: center;
	font-size: 17px;
	line-height: 1.25;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100%;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-line {
	margin-bottom: 12px;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-line:last-of-type {
	margin-bottom: 16px;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-info-col .alt {
	display: block;
	font-family: var(--font-heading);
	font-size: 25px;
	letter-spacing: 0.03em;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-value {
	display: block;
	font-size: 22px;
	line-height: 1.15;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-line-small .alt {
	font-size: 22px;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-line-small .castle-widget-value {
	font-size: 20px;
}

.home-castle-widget-wrap .castle-owner-widget .btn-castlewidget {
	align-self: center;
	padding: 8px 20px;
	font-size: 16px;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(157, 77, 255, 0.34);
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-title {
	font-family: var(--font-heading);
	font-size: 20px;
	letter-spacing: 0.02em;
	color: var(--glow-purple);
	text-align: center;
	margin-bottom: 10px;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-item {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 6px 14px 6px 8px;
	font-size: 13px;
	color: #efe9ff;
	background: rgba(36, 19, 72, 0.84);
	border: 1px solid rgba(157, 77, 255, 0.35);
	border-radius: 999px;
	line-height: 1.2;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-logo img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	image-rendering: pixelated;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-name {
	display: inline-flex;
	align-items: center;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-content {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.15;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-badge {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(157, 77, 255, 0.35);
	border-radius: 999px;
	overflow: hidden;
	background: rgba(17, 9, 34, 0.85);
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-badge-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: rgba(212, 187, 255, 0.92);
	padding: 2px 6px 2px 8px;
	background: rgba(48, 25, 95, 0.65);
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-badge-value {
	font-size: 11px;
	font-weight: 700;
	color: #f4efff;
	padding: 2px 8px 2px 6px;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-badge-giveup.is-no {
	border-color: rgba(53, 189, 149, 0.45);
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-badge-giveup.is-no .castle-widget-registered-badge-label {
	background: rgba(16, 85, 63, 0.65);
	color: #9ff5d8;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-badge-giveup.is-yes {
	border-color: rgba(244, 97, 123, 0.45);
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-badge-giveup.is-yes .castle-widget-registered-badge-label {
	background: rgba(118, 32, 49, 0.65);
	color: #ffc2cf;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-item a {
	color: inherit;
	text-decoration: none;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-item a:hover {
	color: #ffffff;
	text-decoration: none;
}

.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-empty {
	font-size: 14px;
	color: rgba(230, 220, 255, 0.75);
}

/* ========== EVENT SCHEDULE ========== */
.event-schedule-switcher {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	padding: 5px;
	margin-bottom: 14px;
	border: 1px solid rgba(150, 84, 255, 0.28);
	border-radius: 14px;
	background:
		linear-gradient(180deg, rgba(71, 32, 117, 0.92) 0%, rgba(33, 18, 57, 0.94) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 10px 26px rgba(8, 3, 22, 0.28);
}

.event-schedule-switch {
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 8px 4px;
	background: transparent;
	color: rgba(218, 198, 255, 0.86);
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	letter-spacing: 0;
	text-align: center;
	transition: all 0.2s ease;
}

.event-schedule-switch:hover,
.event-schedule-switch:focus {
	color: #ffffff;
	outline: none;
}

.event-schedule-switch.is-active {
	border-color: rgba(198, 134, 255, 0.55);
	background: linear-gradient(180deg, rgba(111, 47, 196, 0.9) 0%, rgba(82, 35, 148, 0.92) 100%);
	color: #ffffff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		0 0 18px rgba(169, 92, 255, 0.24);
}

.event-schedule-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 6px;
}

.event-schedule-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(146, 103, 214, 0.16);
	border-radius: 10px;
	padding-left: 6px;
	padding-right: 6px;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.event-schedule-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.event-schedule-main,
.event-schedule-meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.event-schedule-meta {
	text-align: right;
	align-items: flex-end;
}

.panel-sidebar-events .table tr td,
.event-schedule-name,
.event-schedule-next {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	color: rgba(236, 227, 255, 0.95);
}

.panel-sidebar-events [id$="_name"],
.event-schedule-name {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 600;
	color: #f2ecff;
	letter-spacing: 0.01em;
}

.panel-sidebar-events .smalltext,
.event-schedule-list .smalltext {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	color: rgba(234, 222, 255, 0.96);
}

.event-schedule-open {
	color: #78ffbc;
	text-shadow: 0 0 16px rgba(58, 255, 151, 0.28);
}

.event-schedule-inprogress {
	color: #78ffbc;
	text-shadow: 0 0 16px rgba(58, 255, 151, 0.28);
}

/* Events schedule: smaller size for hrs, min, sec, days and for time (Fri, PM); layout unchanged */
.event-schedule-units {
	font-size: 0.72em;
	opacity: 0.98;
	vertical-align: baseline;
	display: inline;
}

.panel-sidebar-events [id$="_next"] {
	font-size: 1em;
}

.event-schedule-next {
	font-size: 1em;
	color: #be78ff;
	text-shadow: 0 0 14px rgba(159, 87, 255, 0.22);
}

.event-schedule-row.is-soon {
	background: linear-gradient(90deg, rgba(96, 38, 16, 0.42) 0%, rgba(54, 28, 16, 0.12) 100%);
	border-bottom-color: rgba(255, 171, 86, 0.34);
	box-shadow: inset 0 0 0 1px rgba(255, 171, 86, 0.12);
}

.event-schedule-row.is-soon .event-schedule-name,
.event-schedule-row.is-soon .event-schedule-next,
.event-schedule-row.is-soon .smalltext {
	color: #ffbf73;
	text-shadow: 0 0 14px rgba(255, 156, 64, 0.22);
}

.event-schedule-row.is-active {
	background: linear-gradient(90deg, rgba(18, 74, 49, 0.48) 0%, rgba(13, 39, 28, 0.12) 100%);
	border-bottom-color: rgba(104, 255, 173, 0.34);
	box-shadow: inset 0 0 0 1px rgba(104, 255, 173, 0.14);
}

.event-schedule-row.is-active .event-schedule-name,
.event-schedule-row.is-active .event-schedule-next,
.event-schedule-row.is-active .smalltext {
	color: #8cffc7;
	text-shadow: 0 0 14px rgba(58, 255, 151, 0.2);
}

.event-schedule-empty {
	padding: 14px 0;
	color: rgba(216, 195, 255, 0.76);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

.event-schedule-list::-webkit-scrollbar {
	width: 8px;
}

.event-schedule-list::-webkit-scrollbar-track {
	border-radius: 999px;
	background: rgba(41, 24, 72, 0.7);
}

.event-schedule-list::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(160, 91, 255, 0.95) 0%, rgba(101, 39, 186, 0.95) 100%);
	border: 1px solid rgba(210, 161, 255, 0.28);
	box-shadow: 0 0 10px rgba(134, 52, 255, 0.22);
}

.event-schedule-list {
	scrollbar-width: thin;
	scrollbar-color: rgba(160, 91, 255, 0.95) rgba(41, 24, 72, 0.7);
}

/* ========== WEBENGINE CREDITS ========== */
.webengine-powered {
	color: rgba(230, 220, 255, 0.7) !important;
}

.webengine-powered:hover {
	color: var(--glow-purple) !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 991px) {
	#container,
	.footer,
	.global-top-bar .global-top-bar-content {
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	.header-info-container {
		position: static;
		width: 100%;
		margin-top: 10px;
		padding: 0 10px;
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
		gap: 8px;
		text-align: right;
		transform: none;
	}

	.header-notify-menu {
		right: 0;
		left: auto;
		width: min(360px, calc(100vw - 24px));
	}

	#navbar .navbar-stage-system {
		display: none;
	}

	#navbar .navbar-dashboard {
		position: static;
		transform: none;
		margin-left: 10px;
	}

	#navbar .navbar-dashboard-locked {
		position: static;
		transform: none;
		margin-left: 10px;
	}

	body.userpanel-dashboard-mode #container {
		padding: 14px;
	}

	body.userpanel-dashboard-mode .userpanel-sidebar-col,
	body.userpanel-dashboard-mode .userpanel-content-col {
		width: 100%;
		float: none;
		padding: 0;
	}

	body.userpanel-dashboard-mode .userpanel-content-wrap {
		margin-top: 16px;
		min-height: 0;
	}

	#navbar .navbar-inner > ul {
		position: static;
		padding: 0;
		width: auto;
	}

	.newbie-start-banner { margin: 0; }

	.home-top-row {
		display: block;
	}

	.home-top-row > [class*="col-"] {
		display: block;
	}
}

@media (max-width: 768px) {
	.newbie-start-banner-inner {
		min-height: 36px;
		padding: 0 44px 0 10px;
	}

	.newbie-start-banner-text {
		font-size: 16px;
	}

	.newbie-start-banner-close {
		right: 8px;
		font-size: 28px;
	}

	.news-hub-layout {
		display: block;
	}

	.news-hub-sidebar {
		width: 100%;
		max-height: none;
		margin-bottom: 14px;
		padding-right: 0;
	}

	.news-hub-detail .panel-news .panel-title {
		font-size: 24px;
	}

	.login-fullscreen-wrap {
		padding: 24px 18px 20px;
	}

	.login-panel-body {
		max-width: 100%;
	}

	#navbar .navbar-dashboard-locked {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin: 8px 10px 0;
	}

	.login-fullscreen-title {
		font-size: 24px;
	}

	.login-fullscreen-subtitle {
		margin-bottom: 22px;
		font-size: 13px;
	}

	.login-form-input {
		height: 46px;
	}

	.login-submit-btn {
		width: 100%;
		min-width: 0;
	}

	.rankings-weekly-score-switch {
		max-width: 100%;
	}

	.login-fullscreen-form .control-label,
	.login-fullscreen-form .col-sm-4,
	.login-fullscreen-form .col-sm-8 {
		text-align: left;
		width: 100%;
		float: none;
	}

	.login-fullscreen-form .col-sm-offset-4 {
		margin-left: 0;
	}

	body {
		background-size: cover !important;
		background-position: center top !important;
		background-attachment: scroll;
	}

	.hall-fame-home-list {
		flex-wrap: wrap;
		justify-content: center;
	}

	.hall-fame-home-item {
		width: 72px;
	}

	.home-castle-widget-wrap .castle-owner-widget {
		max-width: 100%;
	}

	.home-castle-widget-wrap .castle-owner-widget .castle-widget-layout {
		display: block;
	}

	.home-castle-widget-wrap .castle-owner-widget .castle-widget-art-col {
		min-height: 0;
		margin-bottom: 10px;
	}

	.home-castle-widget-wrap .castle-owner-widget .castle-widget-art {
		max-width: 160px;
	}

	.home-castle-widget-wrap .castle-owner-widget .castle-widget-info-col {
		text-align: center;
		margin-top: 10px;
	}

	.home-castle-widget-wrap .castle-owner-widget .castle-widget-info-col .alt {
		font-size: 22px;
	}

	.home-castle-widget-wrap .castle-owner-widget .castle-widget-value {
		font-size: 20px;
	}

	.home-castle-widget-wrap .castle-owner-widget .castle-widget-line-small .alt {
		font-size: 20px;
	}

	.home-castle-widget-wrap .castle-owner-widget .castle-widget-line-small .castle-widget-value {
		font-size: 18px;
	}

	.home-castle-widget-wrap .castle-owner-widget .btn-castlewidget {
		align-self: center;
	}

	.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered {
		margin-top: 10px;
		padding-top: 10px;
	}

	.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-title {
		font-size: 18px;
	}

	.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-item {
		font-size: 12px;
		gap: 8px;
		padding: 5px 10px 5px 7px;
	}

	.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-logo {
		width: 28px;
		height: 28px;
		flex-basis: 28px;
	}

	.home-castle-widget-wrap .castle-owner-widget .castle-widget-registered-logo img {
		width: 28px;
		height: 28px;
	}
}



.score-rule-item-meta {
	flex: 1 1 100%;
	margin-top: 2px;
	font-size: 12px;
	opacity: .78;
}