/*!
    
 =========================================================
 * WebEngine CMS
 * https://webenginecms.org/
 =========================================================
 
 * Author Lautaro Angelico (https://lautaroangelico.com/)
 * Copyright (c) 2013-2026 Lautaro Angelico, All Rights Reserved
 
 * Licensed under the MIT license
 * https://opensource.org/licenses/MIT
 
 =========================================================
 
*/
:root {
	--webenginebg1: #000000; /* background color */
	--webenginebg2: #fefefe; /* container background color */
	--webenginebg3: #efefef; /* footer background color */
	
	--webenginecolor1: #990000; /* primary highlight color */
	--webenginecolor2: #000000; /* default text color */
	
	--webenginecolor3: #777777; /* links */
	--webenginecolor4: #000000; /* links hover */
	
	--webenginecolor5: #333333; /* panel header */
	--webenginecolor6: #cccccc; /* panel header text */
	--webenginecolor7: #990000; /* panel header border */
	
	--webenginecolor8: #444444; /* button background */
	--webenginecolor9: #cccccc; /* button text */
	--webenginecolor10: #777777; /* button border */
	
	--webenginecolor11: #990000; /* button background hover */
	--webenginecolor12: #ffffff; /* button text hover */
	--webenginecolor13: #dcbdbd; /* button border hover */
	
	--webenginecolor14: #666666; /* footer text color, alt text color, drop shadows */
	--webenginecolor63: #cacaca; /* footer hr color */
	
	--webenginecolor15: #fafafa; /* input background */
	--webenginecolor16: #e3e3e3; /* input border, borders, shadows */
	--webenginecolor17: #666666; /* input text color */
	--webenginecolor18: #cccccc; /* input border hover */
	
	--webenginecolor19: #cccccc; /* navbar link */
	--webenginecolor20: #ffffff; /* navbar link hover */
	
	--webenginecolor21: #e7e7e7; /* news footer border */
	--webenginecolor22: #ffffff; /* news background */
	--webenginecolor23: #777777; /* news footer text color */
	
	--webenginecolor24: #f1f1f1; /* rankings menu bg */
	--webenginecolor25: #cccccc; /* rankings menu link color */
	--webenginecolor26: #333333; /* rankings menu link color active, border color */
	
	--webenginecolor27: #f1f1f1; /* table background, panel background */
	--webenginecolor28: #fafafa; /* alt table background */
	
	--webenginecolor29: #fef2da; /* paypal gateway bg */
	--webenginecolor30: #f79433; /* paypal gateway border */
	--webenginecolor31: #fff9ec; /* paypal gateway alt bg */
	--webenginecolor32: #f79433; /* paypal gateway input text and border */
	
	--webenginecolor33: #444444; /* usercp sidebar link color */
	
	--webenginecolor34: #101010; /* global top bar background */
	--webenginecolor35: #777777; /* global top bar text color */
	--webenginecolor36: #ff0000; /* global top bar logout link color */
	--webenginecolor37: #999999; /* global top bar link color */
	--webenginecolor38: #ffffff; /* global top bar link color hover */
	
	--webenginecolor39: #333333; /* language selection background */
	--webenginecolor40: #999999; /* language selection link color */
	--webenginecolor41: #ffffff; /* language selection link hover */
	
	--webenginecolor42: rgba(0, 0, 0, 0.3); /* header server info background */
	--webenginecolor43: rgba(255,255,255,0.1); /* header server info border */
	--webenginecolor44: #aaaaaa; /* header server info text color */
	--webenginecolor45: rgba(0,0,0,0.7); /* header server info box shadow */
	--webenginecolor46: #000000; /* header server info text shadow */
	--webenginecolor47: #ffffff; /* header server info time text */
	--webenginecolor48: #cccccc; /* header server info date text */
	--webenginecolor49: #00ff00; /* header server info online count text */
	--webenginecolor50: #000000; /* header server info online bar bg */
	--webenginecolor51: #555555; /* header server info online bar border */
	--webenginecolor52: #00ff00; /* header server info online progress bar bg */
	--webenginecolor53: #000000; /* header server info */
	
	--webenginecolor54: #333333; /* my account character block bg */
	--webenginecolor55: rgba(0,0,0,0.5); /* my account character block box shadow */
	--webenginecolor56: #000000; /* my account character block img box shadow */
	--webenginecolor57: #000000; /* my account character block location text color */
	--webenginecolor58: rgba(0,0,0,0.5); /* my account character block level bg */
	--webenginecolor59: #ffffff; /* my account character block level text color */
	--webenginecolor60: #000000; /* my account character block name text color */
	
	--webenginecolor61: #000000; /* rankings class filter text color */
	--webenginecolor62: rgba(0,0,0,0.45); /* rankings class filter image box shadow */
	
}

html {
	min-width: 1040px;
}

body {
	background: var(--webenginebg1) url('../img/background.jpg') no-repeat top center;
	color: var(--webenginecolor2);
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	margin: 0;
}

@media only screen and (min-width: 2000px) {
	body {
		background: var(--webenginebg1) url('../img/background-2600.jpg') no-repeat top center;
	}
}

a {
	color: var(--webenginecolor3);
	text-decoration: none;
    transition: all .2s ease-in;
}

a:hover {
	color: var(--webenginecolor4);
}

img {
	border: 0px;
}

input[type=text], input[type=password], input[type=number] {
	background: var(--webenginecolor15);
	border: 1px solid var(--webenginecolor16);
	color: var(--webenginecolor17);
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus {
	border: 1px solid var(--webenginecolor18);
}

#header {
	width: 100%;
	margin: 0px auto;
	padding: 80px 0px 10px 0px;
	text-align: center;
}

#container {
	background: var(--webenginebg2);
	width: 1040px;
	height: auto;
	margin: 0px auto;
	padding: 20px 0px;
	border-radius: 5px 5px 0px 0px;
}

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

.footer {
	background: var(--webenginebg3);
	font-family: 'Segoe UI', 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', 'Arial', 'sans-serif';
	width: 1040px;
	font-size: 12px;
	color: var(--webenginebg14);
	padding: 40px;
	overflow: auto;
	margin: 0px auto 100px auto;
	border-radius: 0px 0px 5px 5px;
}
	.footer > .footer-container {
		width: 100%;
		margin: 0px auto;
	}
		.footer > .footer-container a:hover {
			text-decoration: underline !important;
		}
	.footer hr {
		border-top: 1px solid var(--webenginecolor63);
	}
	.footer .footer-social-link {
		filter: grayscale(100%);
		transition: all .3s ease;
	}
	.footer .footer-social-link:hover {
		filter: grayscale(0%);
	}

#navbar {
	width: 100%;
	backdrop-filter: blur(5px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

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

#navbar ul li a {
	display: inline-block;
	color: var(--webenginecolor19) !important;
	text-decoration: none;
	padding: 20px 30px;
	transition: all .3s ease;
	text-transform: uppercase;
}

#navbar ul li a:active, #navbar ul li a:focus, #navbar ul li a:hover {
	color: var(--webenginecolor20) !important;
	text-decoration: none;
}

.admincp-button {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #ffffff !important;
	border: 2px solid #000000 !important;
	color: #000000 !important;
	font-weight: bold !important;
}

.page-title {
	color: var(--webenginecolor1);
	font-family: 'PT Sans', sans-serif;
	font-size: 32px;
	margin-bottom: 10px;
	font-weight: bold;
	text-align: center;
}

/* NEWS MODULE */
.panel-news {
	margin-bottom: 30px;
	color: var(--webenginecolor2);
	border: 0px;
	border-radius: 0px;
	box-shadow: 0 0 0px var(--webenginecolor16);
}
.panel-news .panel-heading {
	padding-top: 10px;
	padding-bottom: 10px;
}
.panel-news .panel-title {
	color: var(--webenginecolor2);
	font-size: 24px;
	font-weight: bold;
}
.panel-news .panel-body {
	padding: 10px;
}
.panel-news .panel-footer {
	border-top: 1px solid var(--webenginecolor21);
	background: var(--webenginecolor22);
	font-style: italic;
	font-size: 11px;
	height: 40px;
	color: var(--webenginecolor23);
}

/* RANKINGS MODULE */
.rankings-table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}

.rankings-class-image {
	width: 30px;
	height: auto;
	box-shadow: 0 0 5px var(--webenginecolor14);
	border-radius: 50%;
}
.rankings-table tr td {
	border-bottom: 1px solid var(--webenginecolor16);
	padding: 10px;
	font-size: 18px;
	vertical-align: middle !important;
	text-align: center;
}
.rankings-table-place {
	color: var(--webenginecolor14);
	font-weight: bold;
	font-size: 24px;
	text-align: center;
}
.rankings-table tr:first-child td {
	color: var(--webenginecolor1);
	border-bottom: 3px solid var(--webenginecolor1);
}
.rankings-update-time {
	text-align: right;
	font-size: 11px;
	color: var(--webenginecolor14);
	padding: 10px 0px;
}
.rankings_menu {
	width: 100%;
	overflow: auto;
	text-align: center;
	margin-bottom: 10px;
}
.rankings_menu span {
	width: 100%;
	display: inline-block;
	padding: 10px 0px;
	font-size: 24px;
}
.rankings_menu a {
	display: inline-block;
	width: 150px;
	border: 1px solid var(--webenginecolor16);
	text-align: center;
	padding: 2px 0px;
	margin: 2px;
	background: var(--webenginecolor24);
	border-radius: 2px;
	color: var(--webenginecolor25);
}
.rankings_menu a.active {
	color: var(--webenginecolor26);
	border-color: var(--webenginecolor26);
}
.rankings_guild_logo tr td {
	border: 0px !important;
	padding: 0px !important;
	margin: 0px !important;
}
.rankings-gens-img {
	width: auto !important;
	height: 30px !important;
	border: 0 !important;
	box-shadow: 0 0 0px #000 !important;
	border-radius: 0px !important;
}

/* MY ACCOUNT MODULE */
.myaccount-table {
	width: 100%;
	background: var(--webenginecolor27);
	border: 1px solid var(--webenginecolor16);
}
.myaccount-table tr td:first-child {
	color: var(--webenginecolor14);
	font-weight: bold;
}
.myaccount-table tr td {
	border-bottom: 1px solid var(--webenginecolor16);
	padding: 15px !important;
}
.myaccount-table tr:last-child td {
	border: 0px;
}

/* GENERAL TABLE UI */
.general-table-ui {
	width: 100%;
	table-layout: fixed;
	background: var(--webenginecolor27);
	border: 1px solid var(--webenginecolor16);
	padding: 10px;
	margin: 10px 0px;
}
.general-table-ui tr td {
	padding: 5px;
	vertical-align: middle !important;
}
.general-table-ui tr:first-child td {
	color: var(--webenginecolor1);
}
.general-table-ui tr:nth-child(2n+2) td {
	background: var(--webenginecolor28);
}
.general-table-ui tr td {
	text-align: center;
}
.general-table-ui img {
	width: 50px;
	height: auto;
	box-shadow: 0 0 5px var(--webenginecolor14);
	border-radius: 0px;
}

/* PAYPAL */
.paypal-gateway-container {
	width: 100%;
}

.paypal-gateway-content {
	background: var(--webenginecolor29);
	border: 3px solid var(--webenginecolor30);
	padding: 15px;
	overflow: auto;
	border-radius: 5px;
	font-weight: bold;
}

.paypal-gateway-logo {
	width: 100%;
	height: 100px;
	background: var(--webenginecolor31) url('../img/paypal-logo-200-68.png') no-repeat center;
	background-size: contain;
	margin-bottom: 15px;
	border-radius: 5px;
}

.paypal-gateway-conversion-rate {
	margin: 0px auto;
	text-align: center;
	color: var(--webenginecolor2);
	font-size: 18px;
	padding: 10px 0px;
}

.paypal-gateway-form {
	width: 100%;
	margin: 20px auto;
	text-align: center;
}

.paypal-gateway-form div {
	display: inline-block;
	padding: 0px 10px;
	color: var(--webenginecolor2);
	font-size: 24px;
}

.paypal-gateway-form input[type=text] {
	width: 60px;
	font-size: 24px;
	border: 3px solid var(--webenginecolor32);
	border-radius: 5px;
	color: var(--webenginecolor32);
}

.paypal-gateway-continue {
	margin: 0px auto;
	text-align: center;
}

.paypal-gateway-continue input[type=submit] {
	background: url('../img/paypal-submit.jpg') no-repeat;
	width: 200px;
	height: 40px;
	border: 0px;
}

.module-requirements {
	font-size: 12px;
	margin-top: 20px;
}

/* SIDEBAR */
.panel-sidebar {
	background: var(--webenginecolor27);
	border: 0px;
	border-radius: 0px;
	box-shadow: 0 0 10px var(--webenginecolor16);
}

.panel-sidebar > .panel-heading {
	background: var(--webenginecolor5) !important;
	color: var(--webenginecolor6) !important;
	font-family: 'PT Sans', sans-serif;
	border: 0px;
	border-radius: 0px;
	border-bottom: 3px solid var(--webenginecolor7) !important;
}

.panel-usercp {
	background: url('../img/usercp_bg.jpg') no-repeat top center;
	background-size: cover;
}

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

.panel-usercp ul li {
	display: table;
	width: 100%;
	vertical-align: middle;
	line-height: 30px;
}

.panel-usercp ul li a {
	color: var(--webenginecolor33) !important;
	font-weight: bold;
}
.panel-usercp ul li a:active, .panel-usercp ul li a:hover {
	color: var(--webenginecolor1) !important;
}

.panel-usercp ul li img {
	position: relative;
	top: -2px;
	width: 25px;
	height: 25px;
	margin-right: 5px;
}

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

.sidebar-banner img {
	box-shadow: 0 0 10px var(--webenginecolor16);
	border: 0px;
    border-radius: 5px;
}

/* GENERAL PANEL STYLING */
.panel-general {
	margin-bottom: 30px;
	background: var(--webenginecolor27);
	border: 1px solid var(--webenginecolor16);
	border-radius: 0px;
	color: var(--webenginecolor2);
}

.panel-body .panel-title {
	color: var(--webenginecolor14);
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	border-bottom: 1px solid var(--webenginecolor16);
	margin-bottom: 20px !important;
	font-weight: bold;
}

/* ADD STATS MODULE */
.panel-addstats {
	margin-bottom: 30px;
	background: var(--webenginecolor27);
	border: 1px solid var(--webenginecolor16);
	border-radius: 0px;
	color: var(--webenginecolor2);
}
.panel-addstats .character-avatar img {
	width: 100px;
	height: auto;
	box-shadow: 0 0 5px var(--webenginecolor14);
	border-radius: 0px;
}
.panel-addstats .character-name {
	color: var(--webenginecolor14);
	font-family: 'PT Sans', sans-serif;
	font-size: 18px;
	border-bottom: 1px solid var(--webenginecolor16);
	padding: 20px 0px;
	margin-bottom: 20px !important;
	font-weight: bold;
}

/* DOWNLOADS */
.panel-downloads {
	margin-bottom: 30px;
	background: var(--webenginecolor27);
	border: 1px solid var(--webenginecolor16);
	border-radius: 0px;
	color: var(--webenginecolor2);
}
	.download-description {
		font-size: 11px;
		position: relative;
		top: -7px;
		color: var(--webenginecolor14);
	}

.online-status-indicator {
	margin-left: 5px;
}

/* WEBENGINE CMS */
.webengine-powered { color: var(--webenginecolor14) !important; }
.webengine-powered:active, .webengine-powered:hover { color: #ff3214 !important; }

/* GLOBAL TOP BAR */
.global-top-bar {
	width: 100%;
	background: var(--webenginecolor34);
	color: var(--webenginecolor35);
	padding: 7px 0px 2px 0px;
	text-transform: uppercase;
	font-size: 12px;
}
	.global-top-bar .global-top-bar-content {
		width: 1040px;
		margin: 0px auto;
	}
		.global-top-bar .global-top-bar-content .row {
			margin: 0px;
			padding: 0px;
		}
	.global-top-bar a.logout {
		color: var(--webenginecolor36) !important;
	}
	.global-top-bar a {
		color: var(--webenginecolor37) !important;
	}
	.global-top-bar a:hover {
		color: var(--webenginecolor38) !important;
	}
.global-top-bar-nopadding {
	padding: 0px !important;
}
.global-top-bar-separator {
	padding: 0px 5px;
}

/* LANGUAGE PICKER */
.webengine-language-switcher {
	display: inline-block;
	list-style: none;
	padding: 0px !important;
	margin: 0px !important;
	width: 46px;
	height: 19px;
	overflow: hidden;
	transition: all .3s ease;
}
.webengine-language-switcher:hover {
	width: 400px;
}
	.webengine-language-switcher li {
		display: inline-block;
		list-style-type: none;
		background: var(--webenginecolor39);
		padding: 0px 5px 2px 5px;
		border-radius: 3px;
		transition: all .3s ease;
	}
	.webengine-language-switcher li:hover {
		filter: brightness(120%);
	}
	.webengine-language-switcher li a {
		color: var(--webenginecolor40);
	}
	.webengine-language-switcher li a:hover {
		color: var(--webenginecolor41) !important;
	}

/* WEBSITE LOGO */
.webengine-mu-logo {
	transition: all .3s ease;
}
	.webengine-mu-logo:hover {
		filter: brightness(120%);
	}

/* HEADER INFO */
.header-info-container {
	width: 1040px;
	margin: 0px auto;
	text-align: right;
}
	.header-info-container .header-info {
		display: inline-block;
		width: 350px;
		background: var(--webenginecolor42);
		backdrop-filter: blur(5px);
		margin: 0px;
		padding: 20px;
		overflow: auto;
		box-shadow: 0 0 15px var(--webenginecolor45);
		border-radius: 5px;
		text-shadow: 1px 1px 3px var(--webenginecolor46);
		color: var(--webenginecolor44);
		border: 1px solid var(--webenginecolor43);
		font-size: 12px;
	}
		.header-info-container .header-info .header-info-block {
			padding: 0px;
			color: var(--webenginecolor44);
		}
		.header-info-container .header-info .header-info-block #tServerTime, .header-info-container .header-info .header-info-block #tLocalTime {
			color: var(--webenginecolor47);
		}
		.header-info-container .header-info .header-info-block #tServerDate, .header-info-container .header-info .header-info-block #tLocalDate {
			color: var(--webenginecolor48);
		}
		.header-info-container .header-info .header-info-block .online-count {
			color: var(--webenginecolor49);
		}
	
/* ONLINE BAR */
.webengine-online-bar {
	width: 100%;
	background: var(--webenginecolor50);
	border: 1px solid var(--webenginecolor51);
	height: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0px;
    border-radius: 4px;
	overflow: hidden;
	transition: all .3s ease;
}
	.webengine-online-bar .webengine-online-bar-progress {
		height: 8px;
		background: var(--webenginecolor52) url('../img/online_progress_bar.jpg') no-repeat left center;
		border-radius: 0px 1px 1px 0px;
	}
	.webengine-online-bar:hover {
		filter: brightness(120%);
	}

/* MY ACCOUNT CHARACTER LIST */
.myaccount-character-block {
	background: var(--webenginecolor54);
	border: 1px solid var(--webenginecolor14);
	padding: 5px;
	border-radius: 3px;
	display: inline-block;
	margin: 0px auto;
	box-shadow: 0 0 10px var(--webenginecolor55);
}
	.myaccount-character-block img {
		width: 100px;
		height: auto;
		border-radius: 3px;
		box-shadow: 0 0 5px var(--webenginecolor56);
		transition: all 0.3s ease;
	}
		.myaccount-character-block img:hover {
			filter: brightness(120%);
		}
.myaccount-character-block-location {
	font-size: 12px;
	color: var(--webenginecolor57);
	margin-bottom: 20px;
	margin-top: 2px;
	line-height: 1.2;
}
.myaccount-character-block-level {
	position: relative;
	top: -77px;
	display: inline-block;
	background: var(--webenginecolor58);
	padding: 0px 5px;
	border-radius: 3px;
	color: var(--webenginecolor59);
	font-size: 10px;
}
.myaccount-character-name a {
	font-weight: bold;
	color: var(--webenginecolor60);
	font-size: 16px;
}

/* RANKINGS FILTER BY CLASS */
.rankings-class-filter {
	display: inline-block;
	list-style-type: none;
	margin: 20px auto;
	padding: 10px 20px;
	border-radius: 10px;
}

	.rankings-class-filter li {
		display: inline-block;
		transition: all 0.3s ease;
		margin-bottom: 10px;
	}
	
	.rankings-class-filter li:hover {
		filter: grayscale(0%);
	}

.rankings-class-filter-selection {
	display: inline-block;
	width: 75px;
	text-align: center;
	color: var(--webenginecolor61);
	font-size: 11px;
	cursor: pointer;
}

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

	.rankings-class-filter-selection:hover img {
		filter: brightness(120%);
	}

.rankings-class-filter-selection img {
	width: 40px;
	height: auto;
	border-radius: 50%;
	margin-bottom: 5px;
    transition: all 0.3s ease;
	box-shadow: 0px 0px 10px 0px var(--webenginecolor62);
}

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

/* Home - News List */
.home-news-block .home-news-block-header h2 {
	padding: 0px !important;
	margin: 0px 0px 20px 0px !important;
	font-style: italic;
}

.home-news-block .home-news-block-header a {
	display: inline-block;
	padding-top: 5px;
	font-style: italic;
	font-size: 16px;
}

.home-news-block-article {
	margin-top: 10px;
}

.home-news-block-article .home-news-block-article-type {
	display: block;
	border: 1px solid var(--webenginecolor1);
	padding: 5px;
	text-align: center;
	color: var(--webenginecolor1);
}

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

.home-news-block-article .home-news-block-article-title, .home-news-block-article .home-news-block-article-date {
	line-height: 30px;
}

/* Event Timer Block */
.event-schedule-open {
	color: green;
}

.event-schedule-inprogress {
	color: orange;
}

.panel-sidebar-events .smalltext {
	font-size: 11px;
	position: relative;
	top: -5px;
}

/* =========================================================
 * Legion MU — dark fantasy theme
 * ========================================================= */
:root {
	--legion-black: #070504;
	--legion-ink: #0e0a08;
	--legion-panel: rgba(18, 12, 9, 0.96);
	--legion-panel-soft: rgba(29, 18, 13, 0.92);
	--legion-red: #a70f12;
	--legion-red-bright: #ec2b24;
	--legion-crimson: #5b0b0b;
	--legion-gold: #d9a84c;
	--legion-gold-pale: #f3d28d;
	--legion-text: #ddd2c0;
	--legion-muted: #8f8171;
	--legion-line: rgba(217, 168, 76, 0.22);
	--legion-green: #52d273;
	--legion-zoom-compensation: 1;
}

html {
	min-width: 0;
	background: #120e0c;
}

body {
	min-height: 100vh;
	background:
		linear-gradient(to bottom,
			rgba(2,1,1,0.08) 0,
			rgba(2,1,1,0.12) 360px,
			rgba(3,2,2,0.17) 820px,
			rgba(3,2,2,0.2) 100%
		),
		url('../img/legionmu-page-bg.webp?v=3') no-repeat,
		#120e0c;
	background-position:
		center top,
		center calc(34px * var(--legion-zoom-compensation)),
		center top;
	background-size:
		auto,
		calc(1920px * var(--legion-zoom-compensation)) auto,
		auto;
	background-attachment: scroll;
	color: var(--legion-text);
	font-family: 'PT Sans', sans-serif;
	overflow-x: hidden;
}

.legion-zoom-shell {
	position: relative;
	z-index: 2;
	width: 100%;
}

.legion-ambient-effects {
	position: fixed;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.legion-atmosphere {
	position: absolute;
	inset: -8%;
	background:
		radial-gradient(ellipse at 18% 42%, rgba(99, 39, 20, 0.2) 0%, rgba(45, 28, 22, 0.12) 23%, transparent 48%),
		radial-gradient(ellipse at 82% 36%, rgba(117, 42, 17, 0.18) 0%, rgba(43, 27, 21, 0.11) 24%, transparent 50%),
		radial-gradient(ellipse at 50% 72%, rgba(197, 66, 16, 0.09) 0%, transparent 42%);
	filter: blur(18px);
	opacity: 0.7;
	animation: legion-atmosphere-drift 15s ease-in-out infinite alternate;
}

.legion-embers {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	background: #ff9b32;
	box-shadow:
		7vw 104vh 0 0 #df421c,
		15vw 82vh 0 1px #ffb23f,
		24vw 112vh 0 0 #f76b24,
		37vw 94vh 0 0 #ffcc65,
		49vw 108vh 0 1px #e8401b,
		62vw 87vh 0 0 #ff9e31,
		73vw 116vh 0 1px #d93619,
		84vw 91vh 0 0 #ffc257,
		94vw 106vh 0 1px #ef5b20;
	filter: drop-shadow(0 0 4px rgba(255, 91, 24, 0.9));
}

.legion-embers-back {
	width: 2px;
	height: 2px;
	opacity: 0.42;
	animation: legion-embers-rise 18s linear infinite;
}

.legion-embers-front {
	width: 3px;
	height: 3px;
	opacity: 0.66;
	animation: legion-embers-rise 12s -7s linear infinite;
}

@keyframes legion-atmosphere-drift {
	from {
		transform: translate3d(-1.5%, 0, 0) scale(1);
		opacity: 0.55;
	}
	to {
		transform: translate3d(1.5%, -1%, 0) scale(1.04);
		opacity: 0.78;
	}
}

@keyframes legion-embers-rise {
	0% {
		transform: translate3d(0, 5vh, 0) rotate(0deg);
	}
	100% {
		transform: translate3d(2vw, -125vh, 0) rotate(18deg);
	}
}

.global-top-bar .global-top-bar-content,
#navbar,
.header-info-container,
#container,
.footer,
.legion-community-float {
	zoom: var(--legion-zoom-compensation);
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse at center top, transparent 20%, rgba(0,0,0,0.62) 88%),
		repeating-linear-gradient(135deg, rgba(255,255,255,0.008) 0 1px, transparent 1px 5px);
	opacity: 0.8;
}

a {
	color: var(--legion-gold);
}

a:hover {
	color: var(--legion-gold-pale);
}

.global-top-bar {
	position: relative;
	z-index: 60;
	padding: 8px 0;
	background: rgba(3, 2, 2, 0.96);
	border-bottom: 1px solid rgba(217, 168, 76, 0.16);
	color: var(--legion-muted);
	letter-spacing: 0.08em;
}

.global-top-bar .global-top-bar-content {
	width: min(940px, calc(100% - 24px));
}

.legion-top-status {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 19px;
}

.legion-top-season {
	padding-left: 9px;
	border-left: 1px solid #3a2a20;
	color: #bca98e;
}

.legion-status-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--legion-green);
	box-shadow: 0 0 0 3px rgba(82, 210, 115, 0.12), 0 0 12px rgba(82, 210, 115, 0.8);
}

.global-top-bar .webengine-language-switcher {
	width: 46px;
	margin-right: 14px !important;
	vertical-align: middle;
}

.global-top-bar .webengine-language-switcher:hover {
	width: 320px;
}

#header.legion-hero {
	position: relative;
	width: min(940px, calc(100% - 24px));
	height: calc(320px * var(--legion-zoom-compensation));
	margin: 0 auto;
	padding: 0;
	overflow: visible;
	background: transparent;
	border: 0;
	box-shadow: none;
}

#header.legion-hero::before {
	content: none;
}

#header.legion-hero::after {
	content: "";
	position: absolute;
	right: 215px;
	bottom: -235px;
	z-index: 51;
	width: 300px;
	height: 170px;
	pointer-events: none;
	background:
		radial-gradient(ellipse at center, rgba(255, 211, 103, 0.38) 0%, rgba(255, 91, 20, 0.22) 34%, rgba(167, 10, 3, 0.08) 58%, transparent 74%);
	filter: blur(7px);
	mix-blend-mode: screen;
	transform-origin: center;
	animation: legion-impact-glow 1.7s ease-in-out infinite;
}

@keyframes legion-impact-glow {
	0%, 100% {
		opacity: 0.58;
		transform: scale(0.92);
	}
	50% {
		opacity: 0.92;
		transform: scale(1.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.legion-atmosphere,
	.legion-embers,
	.legion-logo-smoke,
	.legion-logo-ash,
	.legion-hero-logo,
	.legion-impact-crack,
	#header.legion-hero::after {
		animation: none !important;
	}

	.legion-hero-home::before,
	.legion-hero-home::after {
		animation: none !important;
	}

	.legion-hero-home::after {
		display: none;
	}
}

.legion-hero-home {
	--legion-logo-fx-size: 278px;
	position: absolute;
	inset: 4px 300px 52px 18px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
	overflow: visible;
}

.legion-hero-home::before,
.legion-hero-home::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--legion-logo-fx-size);
	height: var(--legion-logo-fx-size);
	pointer-events: none;
}

.legion-hero-home::before {
	z-index: 0;
	width: calc(var(--legion-logo-fx-size) * 1.82);
	height: calc(var(--legion-logo-fx-size) * 1.82);
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 52%, transparent 0 24%, rgba(255, 214, 108, 0.5) 34%, rgba(255, 121, 28, 0.58) 45%, rgba(192, 34, 10, 0.5) 56%, rgba(88, 8, 3, 0.28) 68%, transparent 80%),
		conic-gradient(from 18deg, transparent, rgba(255, 75, 18, 0.46), transparent 24%, rgba(255, 201, 85, 0.42), transparent 54%, rgba(221, 43, 13, 0.42), transparent 78%, rgba(255, 158, 56, 0.28), transparent);
	box-shadow: 0 0 44px rgba(237, 58, 12, 0.42), inset 0 0 42px rgba(255, 183, 64, 0.28);
	filter: blur(16px) saturate(1.38);
	mix-blend-mode: screen;
	animation: legion-logo-aura 3.2s ease-in-out infinite;
}

.legion-hero-home::after {
	z-index: 2;
	background-image: linear-gradient(
		110deg,
		transparent 20%,
		rgba(255, 217, 132, 0.04) 37%,
		rgba(255, 249, 230, 0.96) 47%,
		rgba(255, 169, 90, 0.56) 53%,
		rgba(255, 105, 44, 0.28) 59%,
		transparent 68%
	);
	background-position: 140% center;
	background-size: 300% 100%;
	-webkit-mask: url('../img/legionmu-logo-v2.png?v=3') center / contain no-repeat;
	mask: url('../img/legionmu-logo-v2.png?v=3') center / contain no-repeat;
	mix-blend-mode: screen;
	opacity: 0;
	transform: translate(-50%, -50%);
	animation: legion-logo-sheen 4.8s ease-in-out infinite;
}

@keyframes legion-logo-aura {
	0%, 100% {
		opacity: 0.72;
		transform: translate(-50%, -50%) scale(0.94) rotate(-3deg);
	}
	50% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.06) rotate(3deg);
	}
}

@keyframes legion-logo-sheen {
	0%, 36% {
		background-position: 140% center;
		opacity: 0;
	}
	45% {
		opacity: 0.94;
	}
	60% {
		background-position: -45% center;
		opacity: 0;
	}
	100% {
		background-position: -45% center;
		opacity: 0;
	}
}

.legion-logo-smoke {
	position: absolute;
	top: 56%;
	left: 50%;
	z-index: 0;
	width: 760px;
	height: 330px;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(18px);
	transform-origin: center;
	will-change: transform, opacity, filter;
}

.legion-logo-smoke::before,
.legion-logo-smoke::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	will-change: transform, opacity;
}

.legion-logo-smoke-back {
	background:
		radial-gradient(ellipse at 10% 68%, rgba(158, 148, 141, 0.84) 0%, rgba(69, 53, 48, 0.64) 22%, rgba(27, 19, 18, 0.26) 44%, transparent 68%),
		radial-gradient(ellipse at 32% 44%, rgba(167, 153, 144, 0.72) 0%, rgba(78, 60, 54, 0.58) 24%, rgba(30, 20, 18, 0.22) 48%, transparent 70%),
		radial-gradient(ellipse at 54% 32%, rgba(181, 164, 150, 0.7) 0%, rgba(88, 67, 61, 0.54) 25%, rgba(35, 25, 23, 0.2) 50%, transparent 72%),
		radial-gradient(ellipse at 76% 54%, rgba(155, 140, 127, 0.76) 0%, rgba(65, 48, 42, 0.58) 24%, rgba(26, 18, 17, 0.24) 48%, transparent 69%),
		radial-gradient(ellipse at 92% 70%, rgba(134, 121, 109, 0.72) 0%, rgba(49, 36, 32, 0.56) 24%, rgba(22, 16, 14, 0.24) 47%, transparent 68%);
	opacity: 1;
	animation: legion-logo-smoke-back 5.2s ease-in-out infinite;
}

.legion-logo-smoke-back::before {
	background:
		radial-gradient(ellipse at 18% 76%, rgba(214, 191, 170, 0.4) 0%, rgba(74, 56, 49, 0.26) 30%, transparent 60%),
		radial-gradient(ellipse at 48% 62%, rgba(162, 145, 132, 0.3) 0%, rgba(58, 44, 40, 0.22) 28%, transparent 56%),
		radial-gradient(ellipse at 81% 78%, rgba(203, 167, 141, 0.28) 0%, rgba(74, 54, 46, 0.22) 28%, transparent 58%);
	filter: blur(12px);
	opacity: 0.78;
	animation: legion-logo-smoke-drift 7.4s -1.2s ease-in-out infinite;
}

.legion-logo-smoke-back::after {
	background:
		radial-gradient(ellipse at 26% 42%, rgba(255, 163, 86, 0.2) 0%, rgba(110, 56, 33, 0.16) 28%, transparent 60%),
		radial-gradient(ellipse at 68% 34%, rgba(255, 143, 77, 0.18) 0%, rgba(98, 50, 31, 0.16) 28%, transparent 58%);
	filter: blur(10px);
	opacity: 0.66;
	mix-blend-mode: screen;
	animation: legion-logo-smoke-ember 4.8s ease-in-out infinite;
}

.legion-logo-smoke-front {
	width: 590px;
	height: 250px;
	background:
		radial-gradient(ellipse at 22% 64%, rgba(255, 184, 111, 0.48) 0%, rgba(133, 64, 38, 0.36) 22%, rgba(77, 36, 25, 0.18) 42%, transparent 66%),
		radial-gradient(ellipse at 50% 46%, rgba(255, 164, 94, 0.4) 0%, rgba(125, 60, 36, 0.34) 24%, rgba(68, 33, 23, 0.18) 45%, transparent 66%),
		radial-gradient(ellipse at 78% 58%, rgba(255, 176, 98, 0.44) 0%, rgba(124, 58, 34, 0.32) 22%, rgba(70, 34, 24, 0.18) 43%, transparent 65%);
	filter: blur(12px);
	mix-blend-mode: screen;
	opacity: 0.96;
	animation: legion-logo-smoke-front 4s -1.1s ease-in-out infinite;
}

.legion-logo-smoke-front::before {
	background:
		radial-gradient(ellipse at 36% 78%, rgba(255, 230, 191, 0.24) 0%, rgba(255, 149, 77, 0.16) 24%, transparent 52%),
		radial-gradient(ellipse at 63% 66%, rgba(255, 219, 166, 0.2) 0%, rgba(255, 122, 56, 0.14) 24%, transparent 52%);
	filter: blur(8px);
	opacity: 0.76;
	animation: legion-logo-smoke-drift 5.1s -.8s ease-in-out infinite reverse;
}

.legion-logo-smoke-front::after {
	background:
		radial-gradient(ellipse at 44% 50%, rgba(255, 122, 59, 0.28) 0%, rgba(163, 58, 21, 0.2) 24%, transparent 54%),
		radial-gradient(ellipse at 78% 40%, rgba(255, 172, 91, 0.24) 0%, rgba(138, 58, 26, 0.18) 24%, transparent 54%);
	filter: blur(10px);
	opacity: 0.72;
	mix-blend-mode: screen;
	animation: legion-logo-smoke-ember 4.2s -1.8s ease-in-out infinite;
}

@keyframes legion-logo-smoke-back {
	0%, 100% {
		transform: translate(-53%, -40%) scale(0.86) rotate(-4deg);
		opacity: 0.62;
	}
	25% {
		transform: translate(-48%, -49%) scale(1.02) rotate(-1deg);
		opacity: 0.92;
	}
	50% {
		transform: translate(-44%, -66%) scale(1.22) rotate(4deg);
		opacity: 1;
	}
	75% {
		transform: translate(-51%, -53%) scale(0.97) rotate(1deg);
		opacity: 0.84;
	}
}

@keyframes legion-logo-smoke-front {
	0%, 100% {
		transform: translate(-47%, -32%) rotate(-4deg) scale(0.84);
		opacity: 0.42;
	}
	25% {
		transform: translate(-55%, -45%) rotate(-1deg) scale(0.98);
		opacity: 0.82;
	}
	55% {
		transform: translate(-49%, -70%) rotate(5deg) scale(1.18);
		opacity: 0.98;
	}
	75% {
		transform: translate(-44%, -54%) rotate(2deg) scale(1.02);
		opacity: 0.72;
	}
}

@keyframes legion-logo-smoke-drift {
	0%, 100% {
		transform: translate(-8%, 8%) scale(0.9);
		opacity: 0.36;
	}
	50% {
		transform: translate(10%, -15%) scale(1.08);
		opacity: 0.68;
	}
}

@keyframes legion-logo-smoke-ember {
	0%, 100% {
		opacity: 0.3;
		transform: translate(0, 8px) scale(0.92);
	}
	50% {
		opacity: 0.74;
		transform: translate(0, -14px) scale(1.08);
	}
}

.legion-hero-logo {
	position: relative;
	z-index: 1;
	display: block;
	width: min(515px, 98%);
	max-height: 250px;
	object-fit: contain;
	filter:
		drop-shadow(0 22px 34px rgba(0,0,0,0.9))
		drop-shadow(0 0 28px rgba(184,18,12,0.42))
		drop-shadow(0 0 62px rgba(255, 168, 50, 0.28));
	transition: transform 220ms ease, filter 220ms ease;
	animation: legion-logo-glow 3.4s ease-in-out infinite;
}

@keyframes legion-logo-glow {
	0%, 100% {
		filter:
			drop-shadow(0 14px 22px rgba(0,0,0,0.84))
			drop-shadow(0 0 12px rgba(203, 35, 13, 0.38))
			drop-shadow(0 0 22px rgba(255, 134, 36, 0.18));
	}
	50% {
		filter:
			drop-shadow(0 17px 26px rgba(0,0,0,0.88))
			drop-shadow(0 0 24px rgba(235, 47, 14, 0.68))
			drop-shadow(0 0 38px rgba(255, 174, 58, 0.36));
	}
}

.legion-hero-home:hover .legion-hero-logo {
	transform: translateY(-2px) scale(1.012);
	filter:
		drop-shadow(0 18px 28px rgba(0,0,0,0.86))
		drop-shadow(0 0 22px rgba(196,29,20,0.3));
}

.legion-hero-character {
	position: absolute;
	top: -20px;
	right: 55px;
	bottom: auto;
	z-index: 52;
	width: auto;
	height: 600px;
	pointer-events: none;
	filter:
		drop-shadow(-18px 18px 24px rgba(0,0,0,0.86))
		drop-shadow(-8px 12px 15px rgba(119, 8, 2, 0.34))
		drop-shadow(0 0 12px rgba(255, 126, 36, 0.18));
}

.legion-impact-crack {
	position: absolute;
	right: 365px;
	bottom: -150px;
	z-index: 53;
	width: 1px;
	height: 1px;
	pointer-events: none;
	filter: drop-shadow(0 0 5px rgba(255, 82, 20, 0.72));
	transform: scale(1.45);
	animation: legion-crack-pulse 2.2s ease-in-out infinite;
}

.legion-impact-crack::before,
.legion-impact-crack::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.legion-impact-crack::before {
	z-index: 2;
	width: 14px;
	height: 14px;
	background:
		radial-gradient(circle, #fff4b0 0 8%, #ff9c24 18%, #c62b0d 38%, rgba(48, 4, 2, 0.92) 58%, transparent 74%);
	box-shadow: 0 0 9px rgba(255, 120, 29, 0.9), 0 0 22px rgba(192, 31, 10, 0.58);
}

.legion-impact-crack::after {
	z-index: 0;
	width: 68px;
	height: 40px;
	background: radial-gradient(ellipse, rgba(255, 91, 19, 0.22), rgba(142, 20, 8, 0.08) 42%, transparent 72%);
	filter: blur(7px);
}

.legion-impact-crack > i {
	--crack-angle: 0deg;
	--crack-length: 90px;
	--crack-fork-angle: 28deg;
	position: absolute;
	top: -2px;
	left: 0;
	z-index: 1;
	display: block;
	width: var(--crack-length);
	height: 4px;
	background:
		linear-gradient(to bottom,
			rgba(255, 112, 24, 0.72) 0%,
			rgba(50, 5, 2, 0.96) 34%,
			#030101 58%,
			rgba(225, 48, 13, 0.56) 100%);
	clip-path: polygon(0 22%, 15% 0, 31% 58%, 48% 14%, 64% 76%, 82% 24%, 100% 42%, 100% 72%, 82% 55%, 65% 100%, 48% 46%, 31% 88%, 15% 38%, 0 78%);
	transform: rotate(var(--crack-angle));
	transform-origin: 0 50%;
	opacity: 0.92;
}

.legion-impact-crack > i::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 58%;
	width: 42%;
	height: 3px;
	background: linear-gradient(90deg, rgba(37, 3, 2, 0.96), rgba(224, 48, 13, 0.5), transparent);
	clip-path: polygon(0 18%, 28% 0, 54% 68%, 76% 22%, 100% 45%, 100% 78%, 75% 52%, 53% 100%, 27% 38%, 0 75%);
	transform: rotate(var(--crack-fork-angle));
	transform-origin: 0 50%;
}

.legion-impact-crack > i::before {
	content: "";
	position: absolute;
	top: var(--debris-y, -18px);
	left: var(--debris-x, 66%);
	width: var(--debris-size, 12px);
	height: calc(var(--debris-size, 12px) * 0.72);
	background:
		linear-gradient(145deg, #756455 0%, #302720 38%, #100c0a 72%, #b44922 100%);
	border: 1px solid rgba(237, 112, 47, 0.34);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.72), 0 0 6px rgba(219, 59, 19, 0.26);
	clip-path: polygon(12% 8%, 74% 0, 100% 38%, 76% 100%, 21% 84%, 0 43%);
	transform: rotate(var(--debris-angle, 24deg));
}

.legion-impact-crack > i:nth-child(1) {
	--crack-angle: -8deg;
	--crack-length: 112px;
	--crack-fork-angle: 29deg;
	--debris-x: 74%;
	--debris-y: -25px;
	--debris-size: 16px;
	--debris-angle: 38deg;
}

.legion-impact-crack > i:nth-child(2) {
	--crack-angle: 33deg;
	--crack-length: 82px;
	--crack-fork-angle: -37deg;
	--debris-x: 58%;
	--debris-y: 13px;
	--debris-size: 11px;
	--debris-angle: -21deg;
}

.legion-impact-crack > i:nth-child(3) {
	--crack-angle: 73deg;
	--crack-length: 67px;
	--crack-fork-angle: 31deg;
	--debris-x: 76%;
	--debris-y: -17px;
	--debris-size: 13px;
	--debris-angle: 52deg;
}

.legion-impact-crack > i:nth-child(4) {
	--crack-angle: 118deg;
	--crack-length: 58px;
	--crack-fork-angle: -28deg;
	--debris-x: 52%;
	--debris-y: 12px;
	--debris-size: 10px;
	--debris-angle: -35deg;
}

.legion-impact-crack > i:nth-child(5) {
	--crack-angle: 164deg;
	--crack-length: 96px;
	--crack-fork-angle: 34deg;
	--debris-x: 68%;
	--debris-y: -28px;
	--debris-size: 17px;
	--debris-angle: 17deg;
}

.legion-impact-crack > i:nth-child(6) {
	--crack-angle: 213deg;
	--crack-length: 72px;
	--crack-fork-angle: -32deg;
	--debris-x: 62%;
	--debris-y: 15px;
	--debris-size: 12px;
	--debris-angle: -48deg;
}

.legion-impact-crack > i:nth-child(7) {
	--crack-angle: 268deg;
	--crack-length: 54px;
	--crack-fork-angle: 36deg;
	--debris-x: 78%;
	--debris-y: -21px;
	--debris-size: 14px;
	--debris-angle: 63deg;
}

@keyframes legion-crack-pulse {
	0%, 100% {
		filter: drop-shadow(0 0 4px rgba(255, 82, 20, 0.58));
	}
	50% {
		filter: drop-shadow(0 0 8px rgba(255, 120, 25, 0.88));
	}
}

/* Wide layout: keep the castle clear and move the artwork to the side gutters. */
@media only screen and (min-width: 1280px) {
	#header.legion-hero {
		width: calc(100% - 20px);
		overflow: visible;
	}

	.legion-hero-home {
		--legion-logo-fx-size: calc(170px * var(--legion-zoom-compensation));
		inset:
			calc(115px * var(--legion-zoom-compensation))
			auto
			auto
			calc(50% - (185px * var(--legion-zoom-compensation)));
		width: calc(170px * var(--legion-zoom-compensation));
		height: calc(170px * var(--legion-zoom-compensation));
	}

	.legion-logo-smoke {
		width: calc(285px * var(--legion-zoom-compensation));
		height: calc(150px * var(--legion-zoom-compensation));
		filter: blur(calc(13px * var(--legion-zoom-compensation)));
	}

	.legion-logo-smoke-front {
		width: calc(250px * var(--legion-zoom-compensation));
		height: calc(125px * var(--legion-zoom-compensation));
		filter: blur(calc(9px * var(--legion-zoom-compensation)));
	}

	.legion-hero-logo {
		width: calc(170px * var(--legion-zoom-compensation));
		max-height: calc(170px * var(--legion-zoom-compensation));
		filter:
			drop-shadow(0 6px 9px rgba(0,0,0,0.48))
			drop-shadow(0 0 12px rgba(153,16,12,0.18));
	}

	.legion-hero-home:hover .legion-hero-logo {
		filter:
			drop-shadow(0 8px 12px rgba(0,0,0,0.52))
			drop-shadow(0 0 15px rgba(196,29,20,0.24));
	}

	.legion-hero-character {
		top: calc(-35px * var(--legion-zoom-compensation));
		/*
		 * Keep the hammer landing near the upper-right content edge while the
		 * warrior remains mostly in the outer gutter. The UI sits above this
		 * artwork, so account and navigation controls stay fully visible.
		 */
		right: calc(50% - (842px * var(--legion-zoom-compensation)));
		bottom: auto;
		height: calc(740px * var(--legion-zoom-compensation));
		filter:
			drop-shadow(-12px 15px 19px rgba(0,0,0,0.68))
			drop-shadow(-8px 12px 14px rgba(119, 8, 2, 0.3))
			drop-shadow(0 0 13px rgba(255, 126, 36, 0.18));
	}

	.legion-impact-crack {
		right: calc(570px * var(--legion-zoom-compensation));
		bottom: calc(-280px * var(--legion-zoom-compensation));
		transform: scale(calc(1.9 * var(--legion-zoom-compensation)));
	}

	#header.legion-hero::after {
		right: calc(360px * var(--legion-zoom-compensation));
		bottom: calc(-400px * var(--legion-zoom-compensation));
		width: calc(420px * var(--legion-zoom-compensation));
		height: calc(240px * var(--legion-zoom-compensation));
	}

}

.legion-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 2px;
	font-family: 'Cinzel', serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	transition: transform 160ms ease, filter 160ms ease, background 160ms ease, border-color 160ms ease;
}

.legion-button:hover,
.legion-button:focus {
	color: #fff !important;
	transform: translateY(-2px);
	filter: brightness(1.15);
}

.legion-button-primary {
	background: linear-gradient(#d0221f, #760708);
	border-color: #ec4940;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), 0 8px 24px rgba(118, 7, 8, 0.3);
	color: #fff;
}

.legion-button-ghost {
	background: rgba(4, 3, 2, 0.72);
	border-color: rgba(217, 168, 76, 0.65);
	color: var(--legion-gold-pale);
}

#navbar {
	position: relative;
	z-index: 60;
	width: min(940px, calc(100% - 24px));
	margin: 0 auto;
	background: transparent;
	backdrop-filter: none;
	border: 0;
	box-shadow: none;
}

#navbar::before,
#navbar::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 30px;
	height: 1px;
	background: var(--legion-gold);
	opacity: 0.45;
}

#navbar::before { left: 14px; }
#navbar::after { right: 14px; }

#navbar ul li {
	font-family: 'Cinzel', serif;
	font-size: 12px;
	letter-spacing: 0.08em;
}

#navbar ul li a {
	position: relative;
	padding: 13px 22px;
	color: #b9a78c !important;
	text-shadow: 0 2px 6px rgba(0,0,0,0.95);
}

#navbar ul li a::after {
	content: "";
	position: absolute;
	right: 22px;
	bottom: 7px;
	left: 22px;
	height: 1px;
	background: var(--legion-red-bright);
	transform: scaleX(0);
	transition: transform 160ms ease;
}

#navbar ul li a:hover {
	color: #fff3db !important;
	text-shadow: 0 0 18px rgba(236, 43, 36, 0.5);
}

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

.legion-nav-toggle {
	display: none;
	width: 100%;
	padding: 14px 18px;
	background: transparent;
	border: 0;
	color: var(--legion-gold-pale);
	font-family: 'Cinzel', serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.legion-nav-toggle-icon {
	float: right;
	font-size: 18px;
}

.header-info-container {
	position: relative;
	z-index: 60;
	width: min(940px, calc(100% - 24px));
	margin: 0 auto;
}

.header-info-container .header-info {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr 1.4fr;
	width: 100%;
	padding: 9px 14px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--legion-muted);
	font-size: 11px;
	text-align: left;
	text-shadow: 0 2px 5px rgba(0,0,0,0.95);
}

.legion-server-state,
.legion-online-state,
.legion-time-state {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 0 18px;
	border-right: 0;
}

.legion-server-state { padding-left: 0; }
.legion-time-state {
	justify-content: flex-end;
	padding-right: 0;
	border: 0;
}

.legion-server-state strong {
	color: var(--legion-green);
	font-size: 12px;
	text-transform: uppercase;
}

.legion-online-state {
	display: grid;
	grid-template-columns: auto auto minmax(80px, 1fr);
}

.legion-online-state strong,
.legion-time-state time {
	color: #f2e7d6;
}

.header-info-container .webengine-online-bar {
	margin: 0;
}

#container {
	position: relative;
	z-index: 60;
	width: min(940px, calc(100% - 24px));
	margin: 10px auto 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 2px 2px 0 0;
	box-shadow: none;
}

#content {
	min-height: 520px;
	padding: 12px;
	overflow: visible;
}

.legion-home-grid {
	display: grid;
	grid-template-columns: 165px minmax(0, 1fr) 200px;
	gap: 11px;
	align-items: start;
}

.legion-left-rail,
.legion-right-rail,
.legion-main-column {
	display: grid;
	gap: 11px;
	min-width: 0;
}

.legion-panel {
	position: relative;
	margin: 0;
	overflow: hidden;
	background:
		linear-gradient(145deg, rgba(255,255,255,0.018), transparent 42%),
		var(--legion-panel);
	border: 0;
	border-radius: 0;
	box-shadow:
		inset 0 0 30px rgba(0,0,0,0.42),
		inset 0 1px rgba(255,255,255,0.025),
		0 8px 22px rgba(0,0,0,0.28);
}

.legion-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	display: none;
}

.legion-panel > * {
	position: relative;
	z-index: 1;
}

.legion-panel-title {
	position: relative;
	min-height: 36px;
	padding: 10px 11px 8px;
	background:
		linear-gradient(90deg, rgba(145, 13, 13, 0.82), rgba(49, 9, 7, 0.55) 56%, transparent),
		linear-gradient(#25120e, #100a08);
	border-bottom: 0;
	box-shadow: inset 0 -1px rgba(217, 168, 76, 0.12);
	color: #f7e7c5;
	font-family: 'Cinzel', serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.legion-panel-title::before {
	content: "◆";
	margin-right: 8px;
	color: var(--legion-gold);
	font-size: 8px;
}

.legion-panel-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.legion-panel-title-row a,
.legion-panel-title-row small {
	color: #bd9a60;
	font-family: 'PT Sans', sans-serif;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.legion-quick-menu {
	padding: 7px;
}

.legion-quick-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0;
	padding: 8px 9px;
	background: linear-gradient(90deg, rgba(85, 9, 8, 0.72), rgba(23, 11, 9, 0.88));
	border: 0;
	box-shadow: inset 0 0 12px rgba(0,0,0,0.45);
	color: #dbcdb9;
	font-family: 'Cinzel', serif;
	font-size: 9px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.legion-quick-menu a:hover {
	padding-left: 12px;
	background: linear-gradient(90deg, rgba(174, 15, 18, 0.88), rgba(45, 12, 9, 0.92));
	color: #fff !important;
}

.legion-menu-glyph {
	width: 18px;
	color: var(--legion-gold);
	text-align: center;
}

.legion-stats-list {
	margin: 0;
	padding: 7px 11px 9px;
}

.legion-stats-list div {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px dotted rgba(217, 168, 76, 0.18);
	font-size: 11px;
}

.legion-stats-list div:last-child {
	border-bottom: 0;
}

.legion-stats-list dt {
	color: var(--legion-muted);
	font-weight: 400;
}

.legion-stats-list dd {
	margin: 0;
	color: #eee1cf;
	font-weight: 700;
}

.legion-community-links {
	padding: 8px 11px;
}

.legion-community-links a {
	display: block;
	padding: 9px 0;
	border-bottom: 1px solid rgba(217,168,76,0.12);
}

.legion-community-links a:last-child { border: 0; }
.legion-community-links span {
	display: block;
	color: #ead7b6;
	font-size: 12px;
	font-weight: 700;
}
.legion-community-links small { color: var(--legion-muted); }

.legion-battle-callout {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 112px;
	padding: 17px 19px;
	overflow: hidden;
	background:
		linear-gradient(90deg, rgba(20,7,5,0.72), rgba(20,7,5,0.94)),
		url('../img/castle_owner_bg.jpg') no-repeat center;
	background-size: cover;
	border: 0;
	box-shadow: inset 0 0 45px rgba(0,0,0,0.75), 0 12px 30px rgba(0,0,0,0.35);
}

.legion-battle-callout::after {
	content: "";
	position: absolute;
	inset: 4px;
	z-index: 0;
	pointer-events: none;
	display: none;
}

.legion-battle-callout::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(115deg, rgba(166, 16, 14, 0.18), transparent 50%);
}

.legion-battle-callout > * {
	position: relative;
	z-index: 1;
}

.legion-kicker {
	color: var(--legion-gold);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.legion-battle-callout h1 {
	margin: 4px 0 5px;
	color: #f4e4c8;
	font-family: 'Cinzel', serif;
	font-size: clamp(20px, 2.5vw, 29px);
	line-height: 1.05;
	text-shadow: 0 2px 15px #000;
	text-transform: uppercase;
}

.legion-battle-callout p {
	max-width: 510px;
	margin: 0;
	color: #aa9b87;
	font-size: 10px;
}

.legion-news-list {
	padding: 5px 11px 9px;
}

.legion-news-item {
	display: grid;
	grid-template-columns: 8px minmax(0, 1fr) auto;
	gap: 11px;
	align-items: center;
	min-height: 42px;
	border-bottom: 1px solid rgba(217, 168, 76, 0.11);
}

.legion-news-item:last-child {
	border-bottom: 0;
}

.legion-news-mark {
	width: 5px;
	height: 5px;
	background: var(--legion-red-bright);
	box-shadow: 0 0 9px rgba(236, 43, 36, 0.7);
	transform: rotate(45deg);
}

.legion-news-copy {
	min-width: 0;
}

.legion-news-copy a {
	display: block;
	overflow: hidden;
	color: #ded1bf;
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.legion-news-copy a:hover {
	color: var(--legion-gold-pale) !important;
}

.legion-news-category {
	display: block;
	color: #95523d;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.legion-news-item time {
	color: #6f6256;
	font-size: 10px;
}

.legion-empty-state {
	padding: 35px 15px;
	color: var(--legion-muted);
	text-align: center;
}

.legion-event-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: rgba(217,168,76,0.09);
}

.legion-event {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	min-height: 58px;
	padding: 8px 10px;
	background: var(--legion-panel);
}

.legion-event-icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background: radial-gradient(circle, #7e1512, #220807);
	border: 1px solid rgba(217,168,76,0.38);
	border-radius: 50%;
	color: var(--legion-gold-pale);
	font-family: 'Cinzel', serif;
	font-size: 9px;
	font-weight: 700;
}

.legion-event strong,
.legion-event small {
	display: block;
}

.legion-event strong {
	overflow: hidden;
	color: #d7c9b5;
	font-size: 11px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.legion-event small {
	overflow: hidden;
	color: #796b5e;
	font-size: 9px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.legion-event b {
	color: var(--legion-gold);
	font-size: 11px;
}

.legion-ranking-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px;
}

.legion-feature-grid {
	display: grid;
	grid-template-columns: 1.35fr 0.65fr;
	gap: 11px;
}

.legion-feature-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 150px;
	padding: 17px;
	overflow: hidden;
	background:
		linear-gradient(to top, rgba(5,3,2,0.96), rgba(8,4,3,0.08) 72%),
		url('../img/castle_owner_bg.jpg') no-repeat center;
	background-size: cover;
	border: 0;
	box-shadow: inset 0 0 35px rgba(0,0,0,0.48);
}

.legion-feature-card::before,
.legion-small-feature::before {
	content: "";
	position: absolute;
	inset: 5px;
	display: none;
	pointer-events: none;
}

.legion-feature-card span,
.legion-small-feature span {
	position: relative;
	color: var(--legion-gold);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.legion-feature-card strong,
.legion-small-feature strong {
	position: relative;
	margin: 2px 0;
	color: #f6e8cf;
	font-family: 'Cinzel', serif;
	text-transform: uppercase;
}

.legion-feature-card strong { font-size: 18px; }
.legion-feature-card small,
.legion-small-feature small {
	position: relative;
	color: #9b8b79;
	font-size: 9px;
}

.legion-small-feature-stack {
	display: grid;
	gap: 11px;
}

.legion-small-feature {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 69px;
	padding: 12px;
	overflow: hidden;
	background:
		linear-gradient(115deg, rgba(98,8,8,0.66), rgba(9,5,4,0.96)),
		url('../img/sidebar_banner_join.jpg') no-repeat center;
	background-size: cover;
	border: 0;
}

.legion-small-feature:last-child {
	background:
		linear-gradient(115deg, rgba(55,8,6,0.62), rgba(9,5,4,0.96)),
		url('../img/sidebar_banner_download.jpg') no-repeat center;
	background-size: cover;
}

.legion-feature-card:hover,
.legion-small-feature:hover {
	filter: brightness(1.12);
}

.legion-mini-ranking ol {
	margin: 0;
	padding: 6px 13px 11px;
	list-style: none;
	counter-reset: legion-rank;
}

.legion-mini-ranking li {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
	min-height: 34px;
	border-bottom: 1px solid rgba(217,168,76,0.1);
	counter-increment: legion-rank;
	font-size: 11px;
}

.legion-mini-ranking li::before {
	content: counter(legion-rank, decimal-leading-zero);
	color: #815036;
	font-family: 'Cinzel', serif;
	font-size: 9px;
}

.legion-mini-ranking li:last-child { border: 0; }
.legion-mini-ranking li span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.legion-mini-ranking li a { color: #d4c5b1; }
.legion-mini-ranking li b {
	color: var(--legion-gold);
	font-size: 9px;
}

.legion-login-panel form {
	padding: 14px;
}

.legion-login-panel label {
	margin: 0 0 4px;
	color: #8e7b69;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.legion-login-panel .form-control,
.panel-sidebar .form-control {
	height: 36px;
	margin-bottom: 10px;
	background: rgba(4, 3, 2, 0.78);
	border: 1px solid rgba(217, 168, 76, 0.2);
	border-radius: 1px;
	color: #eadfce;
	box-shadow: inset 0 1px 9px rgba(0,0,0,0.55);
}

.legion-login-panel .form-control:focus,
.panel-sidebar .form-control:focus {
	border-color: var(--legion-gold);
	box-shadow: 0 0 0 2px rgba(217,168,76,0.08);
}

.legion-login-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.legion-login-actions .legion-button {
	min-height: 34px;
	padding: 0 16px;
	font-size: 10px;
}

.legion-login-actions a {
	font-size: 10px;
}

.legion-login-panel > p {
	margin: 0;
	padding: 11px 14px;
	background: rgba(255,255,255,0.015);
	border-top: 1px solid rgba(217,168,76,0.1);
	color: #7c6e60;
	font-size: 10px;
}

.legion-user-panel > ul {
	margin: 0;
	padding: 10px 14px;
	list-style: none;
}

.legion-user-panel > ul li {
	padding: 6px 0;
}

.legion-user-panel > ul img {
	width: 20px;
	margin-right: 8px;
}

.legion-online-hero {
	padding: 18px 12px 14px;
	text-align: center;
}

.legion-online-hero strong,
.legion-online-hero small {
	display: block;
}

.legion-online-hero strong {
	margin-top: 5px;
	color: #f0e1c6;
	font-family: 'Cinzel', serif;
	font-size: 30px;
	line-height: 1;
}

.legion-online-hero small {
	margin-top: 4px;
	color: var(--legion-green);
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.legion-world-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 0;
}

.legion-world-stats div {
	padding: 10px 4px;
	border-right: 0;
	background: rgba(255,255,255,0.012);
	text-align: center;
}

.legion-world-stats div:last-child { border: 0; }
.legion-world-stats strong,
.legion-world-stats span { display: block; }
.legion-world-stats strong {
	color: #d7c7b1;
	font-size: 11px;
}
.legion-world-stats span {
	color: #75685c;
	font-size: 8px;
	text-transform: uppercase;
}

.legion-download-card {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 145px;
	padding: 18px;
	background:
		linear-gradient(to top, rgba(7,5,4,0.98), rgba(7,5,4,0.28)),
		url('../img/sidebar_banner_download.jpg') no-repeat 68% center;
	background-size: cover;
	border: 0;
	color: #fff;
	box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
}

.legion-download-card:hover {
	filter: brightness(1.1);
}

.legion-download-card span {
	color: var(--legion-gold);
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.legion-download-card strong {
	margin: 2px 0;
	color: #fff1d6;
	font-family: 'Cinzel', serif;
	font-size: 14px;
	text-transform: uppercase;
}

.legion-download-card small { color: #a99b88; }

/* Existing WebEngine modules inside the new visual system */
.page-title {
	margin: 5px 0 22px;
	color: var(--legion-gold-pale);
	font-family: 'Cinzel', serif;
	font-size: 28px;
	text-transform: uppercase;
}

.panel-news,
.panel-general,
.panel-downloads,
.panel-addstats,
.panel-sidebar {
	background: var(--legion-panel);
	border: 0;
	color: var(--legion-text);
	box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

.panel-news .panel-heading,
.panel-sidebar > .panel-heading {
	background: linear-gradient(90deg, rgba(142,13,13,0.78), rgba(25,10,8,0.9)) !important;
	border-bottom: 0 !important;
	box-shadow: inset 0 -1px rgba(217,168,76,0.12);
	color: #f2dfbf !important;
}

.panel-news .panel-title,
.panel-news .panel-title a,
.panel-sidebar > .panel-heading .panel-title {
	color: #f2dfbf;
	font-family: 'Cinzel', serif;
}

.panel-news .panel-body,
.panel-sidebar .panel-body {
	color: #c4b6a3;
}

.panel-news .panel-footer {
	background: rgba(255,255,255,0.02);
	border-color: rgba(217,168,76,0.12);
	color: var(--legion-muted);
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > thead > tr > th {
	border-color: rgba(217,168,76,0.12) !important;
	color: #bcae9b;
}

.general-table-ui,
.myaccount-table {
	background: var(--legion-panel-soft);
	border-color: var(--legion-line);
	color: var(--legion-text);
}

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

.btn-primary {
	background: linear-gradient(#b81918, #680707);
	border-color: #bd3029;
	color: #fff;
}

.footer {
	width: min(940px, calc(100% - 24px));
	margin: 0 auto 70px;
	padding: 30px 36px;
	background: rgba(5, 4, 3, 0.94);
	border: 0;
	border-radius: 0 0 2px 2px;
	color: #776a5d;
}

.footer hr {
	border-color: rgba(217,168,76,0.15);
}

.legion-community-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 70;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	background: linear-gradient(#a51415, #650809);
	border: 1px solid #d24239;
	border-radius: 2px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.55);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.legion-community-float:hover {
	color: #fff !important;
	filter: brightness(1.18);
	transform: translateY(-2px);
}

@media only screen and (max-width: 920px) {
	#header.legion-hero {
		height: min(43vw, 360px);
		min-height: 290px;
	}

	.legion-home-grid {
		grid-template-columns: 170px minmax(0, 1fr);
	}

	.legion-hero-home {
		right: 270px;
	}

	.legion-hero-character {
		top: auto;
		right: 15px;
		bottom: -160px;
		height: 520px;
	}

	.legion-impact-crack {
		right: 285px;
		bottom: -64px;
		transform: scale(1.15);
	}

	#header.legion-hero::after {
		right: 180px;
		bottom: -122px;
		width: 210px;
		height: 116px;
	}

	.legion-right-rail {
		grid-column: 1 / -1;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.legion-right-rail > :last-child:nth-child(3n + 1) {
		grid-column: 1 / -1;
	}
}

@media only screen and (max-width: 760px) {
	body {
		background-attachment: scroll;
		background-size: auto, auto 2600px, auto;
		background-position: center top, center 34px, center top;
	}

	.global-top-bar .global-top-bar-content,
	#header.legion-hero,
	#navbar,
	.header-info-container,
	#container,
	.footer {
		width: calc(100% - 20px);
	}

	.global-top-bar .global-top-bar-content .row {
		display: flex;
		align-items: center;
	}

	.legion-top-season,
	.global-top-bar-separator,
	.global-top-bar .webengine-language-switcher {
		display: none;
	}

	#header.legion-hero {
		height: 58vw;
		min-height: 270px;
		background-position: center;
	}

	.legion-nav-toggle {
		display: block;
	}

	#legion-main-navigation {
		display: none;
	}

	#legion-main-navigation.is-open {
		display: block;
	}

	#navbar::before,
	#navbar::after {
		display: none;
	}

	#navbar ul li {
		display: block;
		border-top: 1px solid rgba(217,168,76,0.1);
	}

	#navbar ul li a {
		display: block;
		padding: 13px 18px;
	}

	.header-info-container .header-info {
		grid-template-columns: 1fr 1fr;
	}

	.legion-online-state {
		display: none;
	}

	.legion-time-state {
		flex-direction: column;
		align-items: flex-end;
		gap: 2px;
	}

	.legion-server-state {
		border-right: 0;
	}

	#content {
		padding: 10px;
	}

	.legion-home-grid,
	.legion-right-rail {
		grid-template-columns: 1fr;
	}

	.legion-main-column {
		grid-row: 1;
	}

	.legion-left-rail {
		grid-row: 2;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.legion-left-rail > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.legion-right-rail {
		grid-column: auto;
		grid-row: 3;
	}

	.legion-right-rail > :last-child:nth-child(3n + 1) {
		grid-column: auto;
	}

	.legion-battle-callout {
		flex-direction: column;
		align-items: flex-start;
		min-height: 0;
	}

	.legion-event-grid,
	.legion-ranking-grid,
	.legion-feature-grid {
		grid-template-columns: 1fr;
	}

	.footer {
		padding: 24px 20px;
	}

	.footer .col-xs-8,
	.footer .col-xs-4 {
		width: 100%;
		text-align: center;
	}

	.legion-community-float {
		right: 14px;
		bottom: 14px;
	}

	#content > .col-xs-8,
	#content > .col-xs-4 {
		width: 100%;
	}
}

@media only screen and (max-width: 480px) {
	#header.legion-hero {
		min-height: 230px;
	}

	.legion-hero-logo {
		width: min(390px, 76%);
		max-height: 195px;
	}

	.legion-hero-home {
		--legion-logo-fx-size: 195px;
		inset: 2px 135px 50px 0;
	}

	.legion-logo-smoke {
		width: 255px;
		height: 120px;
		filter: blur(9px);
	}

	.legion-logo-smoke-front {
		width: 220px;
		height: 100px;
		filter: blur(7px);
	}

	.legion-hero-character {
		top: auto;
		right: -15px;
		bottom: -85px;
		height: 330px;
		opacity: 0.92;
	}

	.legion-impact-crack {
		right: 155px;
		bottom: -25px;
		transform: scale(0.8);
	}

	#header.legion-hero::after {
		right: 78px;
		bottom: -73px;
		width: 155px;
		height: 96px;
	}

	.legion-top-status {
		font-size: 9px;
	}

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

	.legion-left-rail {
		grid-template-columns: 1fr;
	}

	.legion-left-rail > :last-child:nth-child(odd) {
		grid-column: auto;
	}

	.legion-news-item {
		grid-template-columns: 8px minmax(0, 1fr);
	}

	.legion-news-item time {
		display: none;
	}

	.legion-event {
		grid-template-columns: 34px minmax(0, 1fr);
	}

	.legion-event b {
		display: none;
	}
}


/* === LEGION LOGO: SMOKE, ASH AND EMBER PARTICLES === */
.legion-logo-ash {
	--ash-drift-x: 22px;
	--ash-rise: -168px;
	--ash-size: 5px;
	position: absolute;
	z-index: 3;
	width: var(--ash-size);
	height: var(--ash-size);
	border-radius: 50%;
	background: radial-gradient(circle, #fff6d0 0 18%, #ffc768 34%, #ff8f2a 56%, #e12b0c 84%);
	box-shadow: 0 0 8px rgba(255, 212, 125, 0.98), 0 0 16px rgba(255, 109, 32, 0.88), 0 0 24px rgba(226, 49, 13, 0.6);
	pointer-events: none;
	opacity: 0;
	will-change: transform, opacity, filter;
	filter: saturate(1.15);
	animation: legion-ash-float 3.4s infinite cubic-bezier(0.18, 0.64, 0.24, 1);
}

.legion-logo-ash::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 241, 192, 0.95) 0%, rgba(255, 153, 64, 0.42) 54%, transparent 76%);
	filter: blur(2px);
	opacity: 0.88;
}

.legion-logo-ash-1 { left: 24%; top: 72%; --ash-drift-x: -32px; --ash-rise: -148px; --ash-size: 4px; animation-delay: -0.4s; }
.legion-logo-ash-2 { left: 35%; top: 77%; --ash-drift-x: 19px; --ash-rise: -176px; --ash-size: 6px; animation-delay: -2.1s; animation-duration: 4.8s; }
.legion-logo-ash-3 { left: 48%; top: 70%; --ash-drift-x: 34px; --ash-rise: -168px; --ash-size: 4px; animation-delay: -3.2s; animation-duration: 3.8s; }
.legion-logo-ash-4 { left: 64%; top: 74%; --ash-drift-x: -18px; --ash-rise: -186px; --ash-size: 5px; animation-delay: -1.3s; animation-duration: 5.3s; }
.legion-logo-ash-5 { left: 44%; top: 84%; --ash-drift-x: 46px; --ash-rise: -208px; --ash-size: 3px; animation-delay: -4.5s; animation-duration: 5.8s; }
.legion-logo-ash-6 { left: 71%; top: 81%; --ash-drift-x: 22px; --ash-rise: -142px; --ash-size: 4px; animation-delay: -2.8s; animation-duration: 4.4s; }
.legion-logo-ash-7 { left: 29%; top: 85%; --ash-drift-x: -39px; --ash-rise: -196px; --ash-size: 3px; animation-delay: -3.7s; animation-duration: 5.2s; }
.legion-logo-ash-8 { left: 56%; top: 79%; --ash-drift-x: -16px; --ash-rise: -161px; --ash-size: 5px; animation-delay: -0.9s; animation-duration: 4.1s; }
.legion-logo-ash-9 { left: 40%; top: 67%; --ash-drift-x: 11px; --ash-rise: -214px; --ash-size: 3px; animation-delay: -5.1s; animation-duration: 6s; }
.legion-logo-ash-10 { left: 19%; top: 79%; --ash-drift-x: 29px; --ash-rise: -172px; --ash-size: 6px; animation-delay: -1.7s; animation-duration: 4.9s; }
.legion-logo-ash-11 { left: 79%; top: 73%; --ash-drift-x: -31px; --ash-rise: -184px; --ash-size: 5px; animation-delay: -4.2s; animation-duration: 5.5s; }
.legion-logo-ash-12 { left: 33%; top: 63%; --ash-drift-x: -19px; --ash-rise: -226px; --ash-size: 4px; animation-delay: -2.4s; animation-duration: 6.1s; }
.legion-logo-ash-13 { left: 62%; top: 64%; --ash-drift-x: 39px; --ash-rise: -202px; --ash-size: 6px; animation-delay: -3.4s; animation-duration: 5s; }
.legion-logo-ash-14 { left: 51%; top: 88%; --ash-drift-x: -48px; --ash-rise: -236px; --ash-size: 4px; animation-delay: -0.6s; animation-duration: 6.2s; }

@keyframes legion-ash-float {
	0% {
		transform: translate3d(0, 20px, 0) scale(0.35) rotate(0deg);
		opacity: 0;
	}
	12% {
		opacity: 1;
	}
	28% {
		transform: translate3d(calc(var(--ash-drift-x) * 0.22), calc(var(--ash-rise) * 0.22), 0) scale(1) rotate(42deg);
		opacity: 0.95;
	}
	55% {
		transform: translate3d(calc(var(--ash-drift-x) * 0.62), calc(var(--ash-rise) * 0.58), 0) scale(0.78) rotate(126deg);
		opacity: 0.72;
	}
	78% {
		opacity: 0.44;
	}
	100% {
		transform: translate3d(var(--ash-drift-x), var(--ash-rise), 0) scale(0.18) rotate(220deg);
		opacity: 0;
	}
}

.legion-logo-smoke-back {
	filter: blur(20px);
}

/* === LEGION HOME: OPEN, BACKGROUND-FIRST DASHBOARD === */
.legion-home-grid {
	color: #f5ead8;
	text-shadow:
		0 1px 2px rgba(0,0,0,1),
		0 2px 6px rgba(0,0,0,0.98),
		0 0 12px rgba(0,0,0,0.82);
}

.legion-home-grid .legion-panel,
.legion-home-grid .legion-battle-callout,
.legion-home-grid .legion-feature-card,
.legion-home-grid .legion-small-feature,
.legion-home-grid .legion-download-card {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.legion-home-grid .legion-panel {
	overflow: visible;
}

.legion-home-grid .legion-panel::after,
.legion-home-grid .legion-battle-callout::before,
.legion-home-grid .legion-battle-callout::after,
.legion-home-grid .legion-feature-card::before,
.legion-home-grid .legion-small-feature::before {
	display: none;
}

.legion-home-grid .legion-panel-title {
	min-height: 31px;
	padding: 7px 4px 8px;
	background: transparent;
	border-bottom: 1px solid rgba(245, 193, 92, 0.38);
	box-shadow: none;
	color: #ffe5a6;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-shadow:
		0 1px 1px #000,
		0 2px 5px #000,
		0 0 12px rgba(255, 153, 40, 0.4);
}

.legion-home-grid .legion-panel-title::before {
	color: #ffc75c;
	text-shadow: 0 0 8px rgba(255, 91, 20, 0.85);
}

.legion-home-grid .legion-panel-title-row a,
.legion-home-grid .legion-panel-title-row small {
	color: #f3c66d;
	font-weight: 700;
	text-shadow: 0 1px 3px #000, 0 0 8px #000;
}

.legion-home-grid .legion-quick-menu {
	padding: 3px 4px 0;
}

.legion-home-grid .legion-quick-menu a {
	margin: 0;
	padding: 9px 4px;
	background: transparent;
	border-bottom: 1px solid rgba(244, 201, 112, 0.2);
	box-shadow: none;
	color: #fff1d8;
	font-size: 10px;
	font-weight: 700;
	text-shadow: 0 1px 2px #000, 0 2px 5px #000, 0 0 9px #000;
}

.legion-home-grid .legion-quick-menu a:hover {
	padding-left: 9px;
	background: transparent;
	color: #ffd16f !important;
	text-shadow: 0 1px 3px #000, 0 0 12px rgba(255, 75, 24, 0.95);
}

.legion-home-grid .legion-menu-glyph {
	color: #ffc75c;
	text-shadow: 0 0 8px rgba(255, 75, 24, 0.95);
}

.legion-home-grid .legion-stats-list {
	padding: 5px 4px 8px;
}

.legion-home-grid .legion-stats-list div {
	border-bottom-color: rgba(245, 205, 124, 0.24);
	font-size: 11px;
}

.legion-home-grid .legion-stats-list dt {
	color: #f1e6d5;
}

.legion-home-grid .legion-stats-list dd {
	color: #ffe6a9;
	text-shadow: 0 1px 3px #000, 0 0 8px #000;
}

.legion-home-grid .legion-community-links {
	padding: 4px;
}

.legion-home-grid .legion-community-links a {
	border-bottom-color: rgba(245, 205, 124, 0.22);
}

.legion-home-grid .legion-community-links span {
	color: #fff0d2;
}

.legion-home-grid .legion-community-links small {
	color: #e0d2bf;
}

.legion-home-grid .legion-battle-callout {
	min-height: 112px;
	padding: 14px 8px 18px;
	overflow: visible;
}

.legion-home-grid .legion-kicker {
	color: #ffcb61;
	text-shadow: 0 1px 3px #000, 0 0 10px rgba(255, 92, 20, 0.72);
}

.legion-home-grid .legion-battle-callout h1 {
	color: #fff1d2;
	-webkit-text-stroke: 0.3px rgba(35, 12, 4, 0.9);
	text-shadow:
		0 2px 2px #000,
		0 4px 9px #000,
		0 0 18px rgba(0,0,0,0.88);
}

.legion-home-grid .legion-battle-callout p {
	color: #f1e5d4;
	font-size: 11px;
	text-shadow: 0 1px 2px #000, 0 2px 6px #000;
}

.legion-home-grid .legion-news-list {
	padding: 3px 4px 10px;
}

.legion-home-grid .legion-news-item {
	border-bottom-color: rgba(245, 205, 124, 0.22);
}

.legion-home-grid .legion-news-copy a {
	color: #fff0d8;
	font-weight: 700;
	text-shadow: 0 1px 2px #000, 0 2px 6px #000;
}

.legion-home-grid .legion-news-category {
	color: #ffad61;
}

.legion-home-grid .legion-news-item time {
	color: #dfcba8;
}

.legion-home-grid .legion-empty-state {
	color: #f1e5d4;
	font-size: 12px;
	text-shadow: 0 1px 2px #000, 0 2px 7px #000;
}

.legion-home-grid .legion-event-grid {
	gap: 0 14px;
	background: transparent;
}

.legion-home-grid .legion-event {
	padding-right: 4px;
	padding-left: 4px;
	background: transparent;
	border-bottom: 1px solid rgba(245, 205, 124, 0.22);
}

.legion-home-grid .legion-event strong {
	color: #fff0d5;
	font-weight: 700;
}

.legion-home-grid .legion-event small {
	color: #d9c9b4;
}

.legion-home-grid .legion-event b {
	color: #ffd16f;
	text-shadow: 0 1px 3px #000, 0 0 7px #000;
}

.legion-home-grid .legion-mini-ranking li {
	border-bottom-color: rgba(245, 205, 124, 0.2);
}

.legion-home-grid .legion-mini-ranking li::before {
	color: #e3a85f;
}

.legion-home-grid .legion-mini-ranking li a {
	color: #fff0d7;
	font-weight: 700;
}

.legion-home-grid .legion-mini-ranking li b {
	color: #ffd16f;
}

.legion-home-grid .legion-login-panel form {
	padding: 10px 4px;
}

.legion-home-grid .legion-login-panel label {
	color: #f1dfc7;
	text-shadow: 0 1px 3px #000, 0 0 7px #000;
}

.legion-home-grid .legion-login-panel .form-control {
	background: rgba(8, 5, 3, 0.62) !important;
	border-color: rgba(255, 205, 108, 0.48);
	color: #fff4e2 !important;
	box-shadow: inset 0 1px 8px rgba(0,0,0,0.7), 0 3px 12px rgba(0,0,0,0.35);
	text-shadow: none;
	backdrop-filter: blur(2px);
}

.legion-home-grid .legion-login-panel > p {
	padding: 9px 4px;
	background: transparent;
	border-top-color: rgba(245, 205, 124, 0.22);
	color: #e5d5c0;
}

.legion-home-grid .legion-login-actions a,
.legion-home-grid .legion-login-panel > p a {
	color: #ffd16f;
	font-weight: 700;
}

.legion-home-grid .legion-online-hero strong {
	color: #fff0d2;
	text-shadow: 0 2px 4px #000, 0 0 12px rgba(255, 159, 45, 0.36);
}

.legion-home-grid .legion-online-hero small {
	color: #6cff8e;
	font-weight: 700;
	text-shadow: 0 1px 3px #000, 0 0 10px rgba(82, 210, 115, 0.52);
}

.legion-home-grid .legion-world-stats {
	border-top: 1px solid rgba(245, 205, 124, 0.22);
}

.legion-home-grid .legion-world-stats div {
	background: transparent;
}

.legion-home-grid .legion-world-stats strong {
	color: #fff0d7;
}

.legion-home-grid .legion-world-stats span {
	color: #dfccb3;
}

.legion-home-grid .legion-feature-card,
.legion-home-grid .legion-small-feature,
.legion-home-grid .legion-download-card {
	border-top: 1px solid rgba(245, 205, 124, 0.28);
}

.legion-home-grid .legion-feature-card span,
.legion-home-grid .legion-small-feature span,
.legion-home-grid .legion-download-card span {
	color: #ffce69;
}

.legion-home-grid .legion-feature-card strong,
.legion-home-grid .legion-small-feature strong,
.legion-home-grid .legion-download-card strong {
	color: #fff0d4;
	text-shadow: 0 2px 4px #000, 0 0 10px #000;
}

.legion-home-grid .legion-feature-card small,
.legion-home-grid .legion-small-feature small,
.legion-home-grid .legion-download-card small {
	color: #dfcfb9;
}

/* =========================================================
 * Legion MU — Premium MMORPG interface
 * Final production layer. Supersedes the open-dashboard mode.
 * ========================================================= */
:root {
	--mu-coal: #080808;
	--mu-coal-soft: rgba(10, 10, 10, 0.75);
	--mu-gold: #c9953d;
	--mu-gold-light: #e7c475;
	--mu-blood: #8b1118;
	--mu-blood-dark: #560000;
	--mu-bronze: #5a3515;
	--mu-ivory: #eadfca;
	--mu-muted: #b8aa95;
	--mu-line: rgba(210, 160, 70, 0.35);
	--mu-panel-shadow:
		0 0 25px rgba(0, 0, 0, 0.8),
		inset 0 0 15px rgba(255, 180, 60, 0.08);
	--legion-black: var(--mu-coal);
	--legion-panel: var(--mu-coal-soft);
	--legion-panel-soft: rgba(20, 13, 9, 0.82);
	--legion-red: var(--mu-blood);
	--legion-gold: var(--mu-gold);
	--legion-gold-pale: var(--mu-gold-light);
	--legion-text: var(--mu-ivory);
	--legion-muted: var(--mu-muted);
	--legion-line: var(--mu-line);
}

body {
	color: var(--mu-ivory);
	font-family: 'PT Sans', Arial, sans-serif;
}

.global-top-bar {
	background:
		linear-gradient(90deg, rgba(20, 9, 5, 0.88), rgba(8, 8, 8, 0.82), rgba(20, 9, 5, 0.88));
	border-bottom: 1px solid rgba(201, 149, 61, 0.32);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.global-top-bar .global-top-bar-content,
#navbar,
.header-info-container,
#container,
.footer {
	width: min(1240px, calc(100% - 32px));
}

#navbar {
	margin-top: 4px;
	background:
		linear-gradient(180deg, rgba(22, 18, 14, 0.76), rgba(8, 8, 8, 0.82)),
		repeating-linear-gradient(90deg, transparent 0 32px, rgba(255, 255, 255, 0.012) 32px 33px);
	border-top: 1px solid rgba(201, 149, 61, 0.34);
	border-bottom: 1px solid rgba(201, 149, 61, 0.5);
	border-radius: 4px;
	box-shadow:
		0 8px 28px rgba(0, 0, 0, 0.72),
		inset 0 1px rgba(255, 220, 140, 0.08);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

#navbar ul li {
	position: relative;
	border-right: 1px solid rgba(201, 149, 61, 0.12);
}

#navbar ul li:last-child {
	border-right: 0;
}

#navbar ul li a {
	padding: 15px 24px;
	color: #d8c29a !important;
	font-family: 'Cinzel', 'Trajan Pro', serif;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-shadow: 0 2px 4px #000;
}

#navbar ul li a::before {
	content: "";
	position: absolute;
	top: 5px;
	right: 8px;
	bottom: 5px;
	left: 8px;
	border: 1px solid transparent;
	border-radius: 3px;
	transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

#navbar ul li a:hover {
	color: #f5d98f !important;
	text-shadow: 0 0 12px rgba(231, 196, 117, 0.75), 0 2px 4px #000;
}

#navbar ul li a:hover::before {
	background: linear-gradient(180deg, rgba(201, 149, 61, 0.08), rgba(90, 53, 21, 0.12));
	border-color: rgba(201, 149, 61, 0.45);
	box-shadow: inset 0 0 12px rgba(255, 194, 89, 0.08), 0 0 12px rgba(201, 149, 61, 0.14);
}

.header-info-container .header-info {
	box-sizing: border-box;
	margin-top: 5px;
	padding: 10px 16px;
	background: rgba(8, 8, 8, 0.5);
	border: 1px solid rgba(201, 149, 61, 0.2);
	border-radius: 4px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #cbbb9f;
}

#container {
	margin-top: 16px;
}

#content {
	padding: 0;
}

.legion-home-grid {
	grid-template-columns: 250px minmax(0, 1fr) 280px;
	gap: 16px;
	color: var(--mu-ivory);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

.legion-left-rail,
.legion-main-column,
.legion-right-rail {
	gap: 16px;
}

.legion-home-grid .legion-panel,
.legion-home-grid .legion-battle-callout,
.legion-home-grid .legion-feature-card,
.legion-home-grid .legion-small-feature,
.legion-home-grid .legion-download-card {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 42%),
		rgba(10, 10, 10, 0.75);
	border: 1px solid rgba(210, 160, 70, 0.35);
	border-radius: 6px;
	box-shadow: var(--mu-panel-shadow);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	animation: mu-panel-arrive 460ms ease both;
}

.legion-home-grid .legion-panel::after,
.legion-home-grid .legion-battle-callout::after,
.legion-home-grid .legion-feature-card::before,
.legion-home-grid .legion-small-feature::before {
	display: block;
	content: "";
	position: absolute;
	inset: 4px;
	z-index: 0;
	border: 1px solid rgba(231, 196, 117, 0.07);
	border-radius: 3px;
	pointer-events: none;
}

.legion-home-grid .legion-panel > *,
.legion-home-grid .legion-battle-callout > *,
.legion-home-grid .legion-feature-card > *,
.legion-home-grid .legion-small-feature > *,
.legion-home-grid .legion-download-card > * {
	position: relative;
	z-index: 1;
}

.legion-home-grid .legion-panel-title {
	min-height: 42px;
	padding: 12px 14px 10px;
	background:
		linear-gradient(90deg, rgba(139, 17, 24, 0.9), rgba(48, 8, 7, 0.82) 62%, rgba(8, 8, 8, 0.72)),
		repeating-linear-gradient(135deg, transparent 0 4px, rgba(255, 255, 255, 0.018) 4px 5px);
	border-bottom: 1px solid rgba(210, 160, 70, 0.42);
	border-radius: 5px 5px 0 0;
	box-shadow:
		inset 0 1px rgba(255, 207, 110, 0.1),
		inset 0 -8px 15px rgba(0, 0, 0, 0.3);
	color: var(--mu-gold-light);
	font-family: 'Cinzel', 'Trajan Pro', 'MedievalSharp', serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-shadow: 0 2px 3px #000, 0 0 8px rgba(201, 149, 61, 0.28);
}

.legion-home-grid .legion-panel-title::before {
	color: #e7b958;
	text-shadow: 0 0 8px rgba(231, 185, 88, 0.72);
}

.legion-home-grid .legion-panel-title-row a,
.legion-home-grid .legion-panel-title-row small {
	color: #d7b46c;
	text-shadow: 0 1px 3px #000;
}

.legion-home-grid .legion-quick-menu {
	padding: 9px;
}

.legion-home-grid .legion-quick-menu a {
	margin: 5px 0;
	padding: 10px 11px;
	background:
		linear-gradient(180deg, rgba(54, 47, 39, 0.78), rgba(13, 12, 11, 0.9)),
		repeating-linear-gradient(90deg, transparent 0 13px, rgba(255, 255, 255, 0.018) 13px 14px);
	border: 1px solid rgba(90, 53, 21, 0.7);
	border-radius: 3px;
	box-shadow:
		inset 0 1px rgba(231, 196, 117, 0.08),
		inset 0 0 12px rgba(0, 0, 0, 0.58);
	color: #d9ccb9;
	font-family: 'Cinzel', 'Trajan Pro', serif;
	font-size: 10px;
	text-shadow: 0 2px 4px #000;
	transition: transform 170ms ease, border-color 170ms ease, color 170ms ease, box-shadow 170ms ease;
}

.legion-home-grid .legion-quick-menu a:hover {
	padding-left: 15px;
	background: linear-gradient(180deg, rgba(113, 22, 20, 0.92), rgba(35, 9, 8, 0.96));
	border-color: rgba(231, 196, 117, 0.62);
	color: #f4d98e !important;
	box-shadow:
		inset 0 0 15px rgba(255, 180, 60, 0.08),
		0 0 14px rgba(139, 17, 24, 0.35);
	transform: translateX(2px);
}

.legion-home-grid .legion-menu-glyph {
	color: var(--mu-gold);
	text-shadow: 0 0 7px rgba(201, 149, 61, 0.65);
}

.legion-home-grid .legion-stats-list,
.legion-home-grid .legion-community-links {
	padding: 10px 14px 13px;
}

.legion-home-grid .legion-stats-list div,
.legion-home-grid .legion-community-links a {
	border-bottom-color: rgba(210, 160, 70, 0.18);
}

.legion-home-grid .legion-stats-list dt,
.legion-home-grid .legion-community-links small {
	color: var(--mu-muted);
}

.legion-home-grid .legion-stats-list dd,
.legion-home-grid .legion-community-links span {
	color: var(--mu-ivory);
}

.legion-home-grid .legion-battle-callout {
	min-height: 170px;
	padding: 24px 26px;
	background:
		linear-gradient(90deg, rgba(8, 8, 8, 0.94), rgba(23, 8, 5, 0.78) 58%, rgba(8, 8, 8, 0.58)),
		url('../img/castle_owner_bg.jpg') center / cover no-repeat;
}

.legion-home-grid .legion-battle-callout::before {
	display: block;
	background:
		radial-gradient(circle at 78% 52%, rgba(255, 92, 20, 0.18), transparent 30%),
		linear-gradient(115deg, rgba(139, 17, 24, 0.2), transparent 52%);
}

.legion-home-grid .legion-kicker {
	color: var(--mu-gold);
	font-family: 'Cinzel', 'Trajan Pro', serif;
	font-size: 11px;
	text-shadow: 0 2px 4px #000, 0 0 9px rgba(201, 149, 61, 0.35);
}

.legion-home-grid .legion-battle-callout h1 {
	margin: 7px 0 9px;
	color: #f0dfbc;
	font-family: 'Cinzel', 'Trajan Pro', 'MedievalSharp', serif;
	font-size: clamp(27px, 3vw, 42px);
	letter-spacing: 0.025em;
	-webkit-text-stroke: 0;
	text-shadow: 0 3px 4px #000, 0 0 18px rgba(0, 0, 0, 0.9);
}

.legion-home-grid .legion-battle-callout p {
	max-width: 540px;
	color: #c9baa5;
	font-size: 12px;
	line-height: 1.55;
}

.legion-button-primary,
.legion-home-grid .legion-button-primary {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 36%),
		linear-gradient(#b52b22, #560000);
	border: 1px solid #c9953d;
	border-radius: 3px;
	box-shadow:
		0 0 15px rgba(200, 50, 20, 0.5),
		inset 0 1px rgba(255, 210, 130, 0.2),
		inset 0 -10px 18px rgba(25, 0, 0, 0.38);
	color: #fff2d1;
	font-family: 'Cinzel', 'Trajan Pro', serif;
	text-shadow: 0 2px 3px #280000;
	animation: mu-button-fire 2.8s ease-in-out infinite;
}

.legion-button-primary:hover,
.legion-button-primary:focus {
	border-color: #e7c475;
	box-shadow:
		0 0 22px rgba(205, 53, 21, 0.72),
		0 0 10px rgba(231, 196, 117, 0.3),
		inset 0 1px rgba(255, 230, 165, 0.28);
}

.legion-home-grid .legion-news-list {
	padding: 8px 14px 14px;
}

.legion-home-grid .legion-news-item {
	border-bottom-color: rgba(210, 160, 70, 0.16);
}

.legion-home-grid .legion-news-copy a,
.legion-home-grid .legion-event strong,
.legion-home-grid .legion-mini-ranking li a {
	color: #ded2bf;
}

.legion-home-grid .legion-news-category {
	color: #a86541;
}

.legion-home-grid .legion-news-item time,
.legion-home-grid .legion-event small {
	color: #9f907e;
}

.legion-home-grid .legion-empty-state {
	color: #bfb19e;
}

.legion-home-grid .legion-event-grid {
	gap: 1px;
	padding: 8px;
	background: rgba(201, 149, 61, 0.08);
}

.legion-home-grid .legion-event {
	padding: 10px;
	background:
		linear-gradient(145deg, rgba(41, 28, 19, 0.58), rgba(8, 8, 8, 0.72));
	border: 1px solid rgba(210, 160, 70, 0.1);
	border-radius: 3px;
}

.legion-home-grid .legion-event-icon {
	background: radial-gradient(circle at 35% 30%, #a92420, #3b0607 72%);
	border-color: rgba(201, 149, 61, 0.62);
	box-shadow: inset 0 0 8px rgba(255, 174, 70, 0.08), 0 0 10px rgba(139, 17, 24, 0.3);
}

.legion-home-grid .legion-event b,
.legion-home-grid .legion-mini-ranking li b {
	color: var(--mu-gold-light);
}

.legion-home-grid .legion-mini-ranking li {
	border-bottom-color: rgba(210, 160, 70, 0.14);
}

.legion-home-grid .legion-mini-ranking li::before {
	color: #9e6932;
}

.legion-home-grid .legion-login-panel form {
	padding: 16px;
}

.legion-home-grid .legion-login-panel label {
	color: #c0af97;
}

.legion-home-grid .legion-login-panel .form-control {
	height: 40px;
	background:
		linear-gradient(180deg, rgba(32, 27, 22, 0.9), rgba(8, 8, 8, 0.94)) !important;
	border: 1px solid rgba(201, 149, 61, 0.42);
	border-radius: 3px;
	color: #f0e3ce !important;
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
	backdrop-filter: none;
}

.legion-home-grid .legion-login-panel .form-control:focus {
	border-color: var(--mu-gold);
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.75), 0 0 10px rgba(201, 149, 61, 0.24);
}

.legion-home-grid .legion-login-panel > p {
	padding: 12px 16px;
	background: rgba(8, 8, 8, 0.34);
	border-top: 1px solid rgba(210, 160, 70, 0.14);
	color: #9d8e7b;
}

.legion-home-grid .legion-login-actions a,
.legion-home-grid .legion-login-panel > p a {
	color: #d5a94e;
}

.legion-home-grid .legion-online-hero strong {
	color: #ead9b9;
}

.legion-home-grid .legion-online-hero small {
	color: #72d889;
}

.legion-home-grid .legion-world-stats {
	border-top: 1px solid rgba(210, 160, 70, 0.15);
}

.legion-home-grid .legion-world-stats div {
	background: rgba(8, 8, 8, 0.32);
	border-right: 1px solid rgba(210, 160, 70, 0.1);
}

.legion-home-grid .legion-world-stats strong {
	color: #d9c9ad;
}

.legion-home-grid .legion-world-stats span {
	color: #8f806d;
}

.legion-home-grid .legion-feature-card {
	background:
		linear-gradient(to top, rgba(8, 8, 8, 0.96), rgba(8, 8, 8, 0.18) 72%),
		url('../img/castle_owner_bg.jpg') center / cover no-repeat;
}

.legion-home-grid .legion-small-feature {
	background:
		linear-gradient(115deg, rgba(92, 10, 12, 0.62), rgba(8, 8, 8, 0.93)),
		url('../img/sidebar_banner_join.jpg') center / cover no-repeat;
}

.legion-home-grid .legion-small-feature:last-child,
.legion-home-grid .legion-download-card {
	background:
		linear-gradient(115deg, rgba(61, 8, 7, 0.58), rgba(8, 8, 8, 0.94)),
		url('../img/sidebar_banner_download.jpg') 68% center / cover no-repeat;
}

.legion-home-grid .legion-feature-card,
.legion-home-grid .legion-small-feature,
.legion-home-grid .legion-download-card {
	border-top: 1px solid rgba(210, 160, 70, 0.35);
}

.legion-home-grid .legion-feature-card span,
.legion-home-grid .legion-small-feature span,
.legion-home-grid .legion-download-card span {
	color: var(--mu-gold);
}

.legion-home-grid .legion-feature-card strong,
.legion-home-grid .legion-small-feature strong,
.legion-home-grid .legion-download-card strong {
	color: #f0dfbd;
}

.legion-home-grid .legion-feature-card small,
.legion-home-grid .legion-small-feature small,
.legion-home-grid .legion-download-card small {
	color: #ad9d89;
}

.legion-hero-character {
	opacity: 0.96;
}

.legion-community-float {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 38%),
		linear-gradient(#a92320, #590205);
	border-color: var(--mu-gold);
	border-radius: 4px;
	box-shadow: 0 0 18px rgba(139, 17, 24, 0.48);
	font-family: 'Cinzel', 'Trajan Pro', serif;
}

@keyframes mu-panel-arrive {
	from {
		opacity: 0;
		transform: translateY(7px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes mu-button-fire {
	0%, 100% {
		box-shadow:
			0 0 12px rgba(200, 50, 20, 0.42),
			inset 0 1px rgba(255, 210, 130, 0.18),
			inset 0 -10px 18px rgba(25, 0, 0, 0.38);
	}
	50% {
		box-shadow:
			0 0 21px rgba(213, 61, 20, 0.66),
			0 0 7px rgba(201, 149, 61, 0.22),
			inset 0 1px rgba(255, 225, 160, 0.26),
			inset 0 -10px 18px rgba(25, 0, 0, 0.38);
	}
}

@media only screen and (max-width: 1180px) {
	.global-top-bar .global-top-bar-content,
	#navbar,
	.header-info-container,
	#container,
	.footer {
		width: calc(100% - 24px);
	}

	.legion-home-grid {
		grid-template-columns: 220px minmax(0, 1fr) 250px;
		gap: 12px;
	}

	.legion-left-rail,
	.legion-main-column,
	.legion-right-rail {
		gap: 12px;
	}
}

@media only screen and (max-width: 1024px) {
	.legion-home-grid {
		grid-template-columns: 220px minmax(0, 1fr);
	}

	.legion-right-rail {
		grid-column: 1 / -1;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.legion-right-rail > :last-child:nth-child(3n + 1) {
		grid-column: 1 / -1;
	}

	.legion-home-grid .legion-battle-callout h1 {
		font-size: clamp(24px, 3.5vw, 36px);
	}
}

@media only screen and (max-width: 760px) {
	#navbar {
		background: rgba(8, 8, 8, 0.88);
	}

	#navbar ul li {
		border-right: 0;
		border-top: 1px solid rgba(201, 149, 61, 0.14);
	}

	.legion-home-grid {
		grid-template-columns: 1fr;
	}

	.legion-main-column {
		grid-row: 1;
	}

	.legion-left-rail {
		grid-row: 2;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.legion-left-rail > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.legion-right-rail {
		grid-column: auto;
		grid-row: 3;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.legion-right-rail > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.legion-home-grid .legion-battle-callout {
		align-items: flex-start;
		min-height: 0;
		padding: 21px;
	}

	.legion-event-grid,
	.legion-ranking-grid,
	.legion-feature-grid {
		grid-template-columns: 1fr;
	}
}

@media only screen and (max-width: 520px) {
	.global-top-bar .global-top-bar-content,
	#header.legion-hero,
	#navbar,
	.header-info-container,
	#container,
	.footer {
		width: calc(100% - 16px);
	}

	.global-top-bar {
		font-size: 8px;
		letter-spacing: 0.05em;
	}

	.global-top-bar .global-top-bar-content .row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px;
		margin: 0;
	}

	.global-top-bar .global-top-bar-content .col-xs-6 {
		width: auto;
		padding: 0;
		white-space: nowrap;
	}

	#content {
		padding: 0;
	}

	.legion-left-rail,
	.legion-right-rail {
		grid-template-columns: 1fr;
	}

	.legion-left-rail > :last-child:nth-child(odd),
	.legion-right-rail > :last-child:nth-child(odd) {
		grid-column: auto;
	}

	.legion-home-grid .legion-panel,
	.legion-home-grid .legion-battle-callout,
	.legion-home-grid .legion-feature-card,
	.legion-home-grid .legion-small-feature,
	.legion-home-grid .legion-download-card {
		border-radius: 4px;
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}

	.legion-home-grid .legion-battle-callout h1 {
		font-size: 25px;
	}

	.legion-home-grid .legion-battle-callout .legion-button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.legion-home-grid .legion-panel,
	.legion-home-grid .legion-battle-callout,
	.legion-home-grid .legion-feature-card,
	.legion-home-grid .legion-small-feature,
	.legion-home-grid .legion-download-card,
	.legion-button-primary {
		animation: none !important;
	}
}

/* =========================================================
 * Classic MU persistent module architecture
 * Based on the analyzed reference: fixed rails + central module.
 * ========================================================= */
.legion-module-layout {
	align-items: start;
}

.legion-module-column {
	min-width: 0;
}

.legion-module-banner {
	position: relative;
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: 10px;
	align-items: end;
	min-height: 116px;
	padding: 20px 24px;
	overflow: hidden;
	background:
		linear-gradient(90deg, rgba(8, 8, 8, 0.92), rgba(58, 9, 8, 0.6) 58%, rgba(8, 8, 8, 0.78)),
		url('../img/legionmu-hero.webp') center 34% / cover no-repeat;
	border: 1px solid rgba(210, 160, 70, 0.42);
	border-radius: 6px;
	box-shadow: var(--mu-panel-shadow);
	color: var(--mu-gold-light);
	font-family: 'Cinzel', 'Trajan Pro', serif;
	text-shadow: 0 2px 5px #000;
}

.legion-module-banner::before,
.legion-module-banner::after {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	width: 42px;
	border-top: 2px solid rgba(231, 196, 117, 0.42);
	border-bottom: 2px solid rgba(231, 196, 117, 0.28);
	pointer-events: none;
}

.legion-module-banner::before {
	left: 10px;
	border-left: 2px solid rgba(231, 196, 117, 0.34);
}

.legion-module-banner::after {
	right: 10px;
	border-right: 2px solid rgba(231, 196, 117, 0.34);
}

.legion-module-banner span,
.legion-module-banner strong,
.legion-module-banner small {
	position: relative;
	z-index: 1;
}

.legion-module-banner span {
	color: #f1c45c;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.legion-module-banner strong {
	color: #fff0c6;
	font-size: 16px;
	letter-spacing: 0.08em;
}

.legion-module-banner small {
	justify-self: end;
	color: #c0a982;
	font-family: 'PT Sans', sans-serif;
	font-size: 11px;
}

.legion-module-tabs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	overflow: hidden;
	background: rgba(8, 8, 8, 0.82);
	border: 1px solid rgba(210, 160, 70, 0.38);
	border-radius: 5px;
	box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.7), 0 7px 18px rgba(0, 0, 0, 0.45);
}

.legion-module-tabs a {
	padding: 10px 8px;
	background: linear-gradient(180deg, rgba(125, 15, 19, 0.84), rgba(38, 6, 6, 0.9));
	border-right: 1px solid rgba(210, 160, 70, 0.24);
	color: #e4d4b6;
	font-family: 'Cinzel', 'Trajan Pro', serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	text-shadow: 0 2px 3px #000;
	text-transform: uppercase;
}

.legion-module-tabs a:last-child {
	border-right: 0;
}

.legion-module-tabs a:hover {
	background: linear-gradient(180deg, rgba(169, 35, 29, 0.94), rgba(62, 8, 7, 0.96));
	color: #ffe4a3 !important;
	box-shadow: inset 0 0 12px rgba(255, 180, 60, 0.1);
}

.legion-module-frame {
	min-height: 420px;
	padding: 14px;
	overflow-x: auto;
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.02), transparent 38%),
		rgba(5, 5, 5, 0.8);
	border: 1px solid rgba(210, 160, 70, 0.36);
	border-radius: 6px;
	box-shadow: var(--mu-panel-shadow);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #d8ccb9;
}

.legion-module-frame .page-title {
	position: relative;
	margin: 0 0 16px;
	padding: 13px 16px 11px;
	background:
		linear-gradient(90deg, rgba(139, 17, 24, 0.84), rgba(45, 7, 6, 0.72) 68%, rgba(8, 8, 8, 0.4));
	border: 1px solid rgba(210, 160, 70, 0.3);
	border-radius: 4px;
	color: #e8c978;
	font-family: 'Cinzel', 'Trajan Pro', serif;
	font-size: 20px;
	letter-spacing: 0.07em;
	text-shadow: 0 2px 4px #000;
}

.legion-module-frame .panel-news,
.legion-module-frame .panel-general,
.legion-module-frame .panel-downloads,
.legion-module-frame .panel-addstats,
.legion-module-frame .panel-sidebar,
.legion-module-frame .profiles_player_card,
.legion-module-frame .profiles_guild_card {
	background: rgba(7, 7, 7, 0.82);
	border: 1px solid rgba(210, 160, 70, 0.28);
	border-radius: 4px;
	box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.7);
	color: #d8ccb9;
}

.legion-module-frame .panel-heading,
.legion-module-frame .panel-news .panel-heading,
.legion-module-frame .panel-sidebar > .panel-heading {
	background: linear-gradient(180deg, rgba(124, 16, 19, 0.86), rgba(40, 6, 6, 0.92)) !important;
	border-bottom: 1px solid rgba(210, 160, 70, 0.32) !important;
	color: #e9d5a7 !important;
}

.legion-module-frame .panel-title,
.legion-module-frame .panel-title a {
	color: #ead5a5;
	font-family: 'Cinzel', 'Trajan Pro', serif;
	text-shadow: 0 2px 4px #000;
}

.legion-module-frame .panel-body,
.legion-module-frame .panel-footer {
	background: rgba(5, 5, 5, 0.48);
	border-color: rgba(210, 160, 70, 0.14);
	color: #cfc2ae;
}

.legion-module-frame .table,
.legion-module-frame table {
	width: 100%;
	margin-bottom: 14px;
	background: rgba(3, 3, 3, 0.82);
	border-collapse: collapse;
	color: #d7cbb8;
	font-size: 12px;
}

.legion-module-frame .table > thead > tr > th,
.legion-module-frame table thead th,
.legion-module-frame table tr:first-child td[style*="font-weight"] {
	background: linear-gradient(180deg, rgba(111, 14, 17, 0.86), rgba(37, 5, 5, 0.94));
	border-color: rgba(210, 160, 70, 0.28);
	color: #e6c875;
	font-family: 'Cinzel', 'Trajan Pro', serif;
	font-size: 10px;
	text-shadow: 0 2px 3px #000;
}

.legion-module-frame .table > tbody > tr > td,
.legion-module-frame .table > tbody > tr > th,
.legion-module-frame table td,
.legion-module-frame table th {
	padding: 8px 9px;
	border: 1px solid rgba(210, 160, 70, 0.11);
	vertical-align: middle;
}

.legion-module-frame .table > tbody > tr:nth-child(even),
.legion-module-frame table tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.018);
}

.legion-module-frame .table > tbody > tr:hover,
.legion-module-frame table tbody tr:hover {
	background: rgba(139, 17, 24, 0.12);
}

.legion-module-frame .rankings_menu {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin: 0 0 14px;
	padding: 5px;
	box-sizing: border-box;
	overflow: visible;
	background: rgba(5, 5, 5, 0.8);
	border: 1px solid rgba(210, 160, 70, 0.24);
}

.legion-module-frame .rankings_menu span {
	flex: 1 1 90px;
	padding: 0;
}

.legion-module-frame .rankings_menu a {
	display: block;
	padding: 9px 8px;
	background: linear-gradient(180deg, rgba(87, 12, 14, 0.8), rgba(24, 5, 5, 0.92));
	border: 1px solid rgba(210, 160, 70, 0.18);
	color: #cdbb9e;
	font-size: 9px;
	text-align: center;
}

.legion-module-frame .rankings_menu a:hover,
.legion-module-frame .rankings_menu a.active {
	background: linear-gradient(180deg, #a52221, #570507);
	border-color: rgba(231, 196, 117, 0.48);
	color: #ffe3a0 !important;
}

.legion-module-frame input[type="text"],
.legion-module-frame input[type="password"],
.legion-module-frame input[type="email"],
.legion-module-frame input[type="number"],
.legion-module-frame select,
.legion-module-frame textarea,
.legion-module-frame .form-control {
	background: linear-gradient(180deg, rgba(35, 31, 27, 0.96), rgba(8, 8, 8, 0.98));
	border: 1px solid rgba(201, 149, 61, 0.42);
	border-radius: 3px;
	color: #eadfca;
	box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.75);
}

.legion-module-frame input:focus,
.legion-module-frame select:focus,
.legion-module-frame textarea:focus,
.legion-module-frame .form-control:focus {
	border-color: var(--mu-gold);
	box-shadow: 0 0 9px rgba(201, 149, 61, 0.26);
	outline: none;
}

.legion-module-frame .btn-primary,
.legion-module-frame button[type="submit"],
.legion-module-frame input[type="submit"] {
	background: linear-gradient(#b52b22, #560000);
	border: 1px solid var(--mu-gold);
	color: #fff0ca;
	text-shadow: 0 2px 3px #260000;
}

.legion-rail-rankings .legion-panel-title {
	margin-bottom: 0;
}

.legion-rail-ranking-group {
	padding: 9px 11px 7px;
	border-bottom: 1px solid rgba(210, 160, 70, 0.18);
}

.legion-rail-ranking-group:last-child {
	border-bottom: 0;
}

.legion-rail-ranking-group h4 {
	margin: 0 0 6px;
	color: #c9953d;
	font-family: 'Cinzel', 'Trajan Pro', serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.legion-rail-ranking-group ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rail-rank;
}

.legion-rail-ranking-group li {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr) auto;
	gap: 6px;
	align-items: center;
	min-height: 24px;
	border-bottom: 1px dotted rgba(210, 160, 70, 0.12);
	counter-increment: rail-rank;
	font-size: 9px;
}

.legion-rail-ranking-group li:last-child {
	border-bottom: 0;
}

.legion-rail-ranking-group li::before {
	content: counter(rail-rank);
	display: grid;
	place-items: center;
	width: 14px;
	height: 14px;
	background: #5c0b0d;
	border: 1px solid rgba(201, 149, 61, 0.44);
	border-radius: 50%;
	color: #f0ce78;
	font-size: 8px;
}

.legion-rail-ranking-group li span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.legion-rail-ranking-group li a {
	color: #d8c9b2;
}

.legion-rail-ranking-group li b {
	color: #b84b3e;
	font-size: 8px;
}

@media only screen and (max-width: 1024px) {
	.legion-module-banner {
		min-height: 100px;
	}

	.legion-module-banner small {
		display: none;
	}

	.legion-persistent-rail.legion-right-rail {
		align-items: start;
	}
}

@media only screen and (max-width: 760px) {
	.legion-module-banner {
		grid-template-columns: 1fr;
		gap: 2px;
		min-height: 92px;
		padding: 18px;
	}

	.legion-module-banner span {
		font-size: 18px;
	}

	.legion-module-banner strong {
		font-size: 12px;
	}

	.legion-module-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.legion-module-tabs a:nth-child(2) {
		border-right: 0;
	}

	.legion-module-tabs a:nth-child(-n + 2) {
		border-bottom: 1px solid rgba(210, 160, 70, 0.2);
	}

	.legion-module-frame {
		min-height: 300px;
		padding: 10px;
	}
}

@media only screen and (max-width: 520px) {
	.legion-module-frame .page-title {
		font-size: 17px;
	}

	.legion-module-frame .table,
	.legion-module-frame table {
		min-width: 560px;
	}

	.legion-module-frame .panel-news .table,
	.legion-module-frame .panel-general .table {
		min-width: 0;
	}
}

/* ==========================================================================
 * Legion account modules and persistent user panel
 * ========================================================================== */

.legion-home-grid .legion-user-panel {
	background:
		linear-gradient(180deg, rgba(8, 8, 8, 0.56), rgba(4, 4, 4, 0.84)),
		url('../img/usercp_bg.jpg') no-repeat top center;
	background-size: cover;
}

.legion-account-overview {
	padding: 13px;
	border-bottom: 1px solid rgba(210, 160, 70, 0.22);
	background: rgba(3, 3, 3, 0.44);
}

.legion-account-identity {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 2px 8px;
	padding-bottom: 10px;
}

.legion-account-identity span {
	grid-column: 1 / -1;
	color: #9c8e7b;
	font-size: 8px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.legion-account-identity strong {
	overflow: hidden;
	color: #ead29a;
	font-family: 'Cinzel', 'Trajan Pro', serif;
	font-size: 14px;
	text-overflow: ellipsis;
	text-shadow: 0 2px 4px #000;
	white-space: nowrap;
}

.legion-account-identity small {
	color: #c9953d;
	font-size: 8px;
	text-align: right;
	text-transform: uppercase;
}

.legion-account-overview-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
}

.legion-account-overview-stats a {
	display: grid;
	place-items: center;
	min-height: 48px;
	padding: 7px;
	background: rgba(5, 5, 5, 0.68);
	border: 1px solid rgba(210, 160, 70, 0.2);
	border-radius: 3px;
	text-align: center;
}

.legion-account-overview-stats strong {
	color: #e3bd64;
	font: 700 15px/1 'Cinzel', 'Trajan Pro', serif;
}

.legion-account-overview-stats span {
	color: #998d7a;
	font-size: 8px;
	text-transform: uppercase;
}

.legion-account-wallet-mini {
	display: grid;
	gap: 4px;
	margin-top: 7px;
}

.legion-account-wallet-mini a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 7px;
	background: rgba(90, 53, 21, 0.13);
	border-left: 2px solid rgba(201, 149, 61, 0.48);
	color: #a99a85;
	font-size: 8px;
}

.legion-account-wallet-mini strong {
	color: #d9bd78;
	font-size: 9px;
}

.legion-account-module-list {
	padding: 10px 12px 13px;
}

.legion-account-module-label {
	display: block;
	margin-bottom: 6px;
	color: #8f806d;
	font-size: 8px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.legion-home-grid .legion-account-module-list ul {
	display: grid;
	gap: 3px;
}

.legion-home-grid .legion-account-module-list li {
	display: flex;
	align-items: center;
	min-height: 32px;
	padding: 3px 7px;
	background: rgba(4, 4, 4, 0.56);
	border: 1px solid rgba(210, 160, 70, 0.1);
	border-radius: 2px;
	line-height: 24px;
	transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.legion-home-grid .legion-account-module-list li:hover {
	background: rgba(92, 11, 13, 0.38);
	border-color: rgba(210, 160, 70, 0.34);
	transform: translateX(2px);
}

.legion-home-grid .legion-account-module-list li img {
	flex: 0 0 24px;
	margin-right: 7px;
}

.legion-home-grid .legion-account-module-list li a {
	flex: 1 1 auto;
	color: #cdbfa8 !important;
	font-family: 'Cinzel', 'Trajan Pro', serif;
	font-size: 9px;
}

.legion-module-frame .legion-account-module {
	color: #cfc3b2;
}

.legion-module-intro {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 14px;
	padding: 12px 14px;
	background: rgba(4, 4, 4, 0.68);
	border-left: 3px solid #8b1118;
	box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.58);
}

.legion-module-intro strong {
	color: #e0c47e;
	font-family: 'Cinzel', 'Trajan Pro', serif;
	font-size: 12px;
}

.legion-module-intro span {
	color: #918777;
	font-size: 10px;
	text-align: right;
}

.legion-table-scroll {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid rgba(210, 160, 70, 0.18);
}

.legion-module-frame .legion-character-table {
	min-width: 620px;
	margin: 0;
	font-size: 9px;
}

.legion-module-frame .legion-character-table th,
.legion-module-frame .legion-character-table td {
	padding: 7px 5px;
}

.legion-module-frame .legion-character-table td strong a {
	color: #e2c77e;
}

.legion-module-status {
	display: inline-block;
	min-width: 48px;
	padding: 3px 6px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 8px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}

.legion-module-status.is-online {
	background: rgba(24, 126, 66, 0.18);
	border-color: rgba(74, 202, 115, 0.34);
	color: #56d17f;
}

.legion-module-status.is-offline {
	background: rgba(120, 23, 23, 0.18);
	border-color: rgba(190, 67, 58, 0.3);
	color: #c8786f;
}

.legion-account-hero {
	display: grid;
	gap: 5px;
	margin-bottom: 14px;
	padding: 20px;
	background:
		radial-gradient(circle at 80% 20%, rgba(187, 75, 25, 0.22), transparent 34%),
		linear-gradient(120deg, rgba(99, 12, 15, 0.58), rgba(5, 5, 5, 0.84));
	border: 1px solid rgba(210, 160, 70, 0.3);
	border-radius: 4px;
	box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.68);
}

.legion-account-hero span {
	color: #b79c62;
	font-size: 9px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.legion-account-hero strong {
	color: #f0d18b;
	font: 700 20px/1.2 'Cinzel', 'Trajan Pro', serif;
	text-shadow: 0 2px 4px #000, 0 0 12px rgba(201, 149, 61, 0.2);
}

.legion-account-hero small {
	color: #a99d8c;
}

.legion-data-grid,
.legion-wallet-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
	margin-bottom: 14px;
}

.legion-data-grid article,
.legion-wallet-grid article {
	display: grid;
	gap: 5px;
	min-height: 76px;
	padding: 13px;
	background: rgba(4, 4, 4, 0.7);
	border: 1px solid rgba(210, 160, 70, 0.2);
	border-radius: 3px;
	box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.56);
}

.legion-data-grid span,
.legion-wallet-grid span {
	color: #988b79;
	font-size: 9px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.legion-data-grid strong,
.legion-wallet-grid strong {
	align-self: end;
	color: #e0bf70;
	font: 700 17px/1.1 'Cinzel', 'Trajan Pro', serif;
}

.legion-wallet-grid .legion-wallet-empty {
	grid-column: 1 / -1;
}

.legion-module-notice {
	padding: 17px;
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.018), transparent 42%),
		rgba(7, 7, 7, 0.74);
	border: 1px solid rgba(210, 160, 70, 0.22);
	border-radius: 4px;
}

.legion-module-notice > strong {
	color: #dfc37d;
	font-family: 'Cinzel', 'Trajan Pro', serif;
	font-size: 13px;
}

.legion-module-notice p {
	margin: 8px 0 14px;
	color: #a79b8a;
	line-height: 1.55;
}

.legion-module-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.legion-module-frame .legion-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 8px 15px;
	font: 700 9px/1 'Cinzel', 'Trajan Pro', serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.legion-module-frame .legion-button-secondary {
	background: linear-gradient(180deg, rgba(55, 47, 38, 0.94), rgba(15, 13, 11, 0.98));
	border: 1px solid rgba(210, 160, 70, 0.3);
	color: #dac496 !important;
	box-shadow: inset 0 1px rgba(255, 224, 160, 0.08);
}

.legion-module-frame .legion-button-secondary:hover {
	background: linear-gradient(180deg, rgba(90, 60, 30, 0.94), rgba(28, 16, 9, 0.98));
	border-color: rgba(231, 196, 117, 0.54);
}

@media only screen and (max-width: 760px) {
	.legion-module-intro {
		align-items: flex-start;
		flex-direction: column;
		gap: 5px;
	}

	.legion-module-intro span {
		text-align: left;
	}
}

@media only screen and (max-width: 520px) {
	.legion-data-grid,
	.legion-wallet-grid {
		grid-template-columns: 1fr;
	}

	.legion-wallet-grid .legion-wallet-empty {
		grid-column: auto;
	}

	.legion-module-actions .legion-button {
		width: 100%;
	}
}

/* ==========================================================================
 * Symmetric three-column composition
 * ========================================================================== */

.legion-home-grid {
	grid-template-columns: 270px minmax(0, 1fr) 270px;
	gap: 14px;
	align-items: start;
}

.legion-left-rail,
.legion-main-column,
.legion-right-rail {
	gap: 14px;
	align-content: start;
}

.legion-left-rail > *,
.legion-main-column > *,
.legion-right-rail > * {
	width: 100%;
	box-sizing: border-box;
}

.legion-home-grid .legion-panel-title {
	display: flex;
	align-items: center;
	min-height: 44px;
	box-sizing: border-box;
}

.legion-home-grid .legion-panel-title-row {
	justify-content: space-between;
}

.legion-information-rail .legion-server-panel,
.legion-information-rail .legion-world-panel,
.legion-information-rail .legion-links-panel {
	margin: 0;
}

.legion-information-rail .legion-stats-list,
.legion-information-rail .legion-community-links {
	min-height: 0;
}

.legion-information-rail .legion-world-panel {
	background:
		radial-gradient(circle at 50% 35%, rgba(146, 48, 18, 0.14), transparent 42%),
		rgba(10, 10, 10, 0.75);
}

@media only screen and (max-width: 1180px) {
	.legion-home-grid {
		grid-template-columns: 230px minmax(0, 1fr) 230px;
		gap: 12px;
	}

	.legion-left-rail,
	.legion-main-column,
	.legion-right-rail {
		gap: 12px;
	}
}

@media only screen and (max-width: 1024px) {
	.legion-home-grid {
		grid-template-columns: 230px minmax(0, 1fr);
	}

	.legion-right-rail {
		grid-column: 1 / -1;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 760px) {
	.legion-home-grid {
		grid-template-columns: 1fr;
	}

	.legion-right-rail {
		grid-column: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 520px) {
	.legion-left-rail,
	.legion-right-rail {
		grid-template-columns: 1fr;
	}
}

/* Home ranking pair: equal columns and equal panel height. */
.legion-ranking-grid {
	align-items: stretch;
}

.legion-ranking-grid > .legion-panel {
	height: 100%;
	box-sizing: border-box;
}

.legion-home-rankings {
	display: flex;
	flex-direction: column;
}

.legion-home-rankings .legion-panel-title {
	flex: 0 0 auto;
}

.legion-home-rankings-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.legion-home-rankings-body h4 {
	margin: 0;
	padding: 11px 13px 5px;
	color: #c9953d;
	font-family: 'Cinzel', 'Trajan Pro', serif;
	font-size: 9px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.legion-home-rankings-body > ol {
	flex: 1 1 auto;
	padding-top: 0;
}

.legion-home-ranking-links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid rgba(210, 160, 70, 0.16);
}

.legion-home-ranking-links a {
	padding: 9px 5px;
	border-right: 1px solid rgba(210, 160, 70, 0.14);
	color: #bca779;
	font-family: 'Cinzel', 'Trajan Pro', serif;
	font-size: 8px;
	text-align: center;
	text-transform: uppercase;
}

.legion-home-ranking-links a:last-child {
	border-right: 0;
}

.legion-home-ranking-links a:hover {
	background: rgba(139, 17, 24, 0.2);
	color: #f0cf7d !important;
}

.legion-home-rankings .legion-ranking-empty {
	grid-template-columns: 1fr;
}

/* Let the panoramic castle remain visible behind the main battle message. */
.legion-home-grid .legion-battle-callout {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.legion-home-grid .legion-battle-callout::before,
.legion-home-grid .legion-battle-callout::after {
	display: none;
}

.legion-home-grid .legion-battle-callout h1 {
	color: #fff0cf;
	text-shadow:
		0 2px 2px #000,
		0 4px 10px #000,
		0 0 20px rgba(0, 0, 0, 0.92),
		0 0 5px rgba(201, 149, 61, 0.34);
}

.legion-home-grid .legion-battle-callout p {
	color: #f2e6d4;
	text-shadow:
		0 1px 2px #000,
		0 2px 7px #000,
		0 0 14px rgba(0, 0, 0, 0.94);
}

/* ==========================================================================
 * Mobile stability and touch layout
 * ========================================================================== */

html {
	width: 100%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body,
.legion-zoom-shell {
	width: 100%;
	max-width: 100%;
}

#content img,
.footer img {
	max-width: 100%;
	height: auto;
}

.legion-home-grid > *,
.legion-module-frame,
.legion-panel,
.legion-news-copy,
.legion-event > div {
	min-width: 0;
}

@media only screen and (max-width: 760px) {
	html,
	body {
		overflow-x: hidden;
	}

	.global-top-bar {
		padding-top: max(8px, env(safe-area-inset-top));
	}

	.global-top-bar .global-top-bar-content,
	#header.legion-hero,
	#navbar,
	.header-info-container,
	#container,
	.footer {
		width: calc(100% - 16px);
		max-width: 100%;
	}

	.global-top-bar .global-top-bar-content .col-xs-6 {
		min-width: 0;
	}

	.legion-top-status {
		overflow: hidden;
	}

	.legion-top-status > span:not(.legion-status-dot) {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	#header.legion-hero {
		height: clamp(220px, 60vw, 300px);
		min-height: 220px;
	}

	.legion-hero-home {
		--legion-logo-fx-size: 220px;
		inset: 0 34% 40px 0;
	}

	.legion-hero-logo {
		width: min(360px, 100%);
		max-height: 200px;
		object-fit: contain;
	}

	.legion-hero-character {
		top: auto;
		right: -28px;
		bottom: -84px;
		width: auto;
		max-width: none;
		height: clamp(320px, 70vw, 470px);
	}

	#header.legion-hero::after {
		right: 21%;
		bottom: -72px;
		width: 170px;
		height: 104px;
	}

	.legion-nav-toggle {
		min-height: 48px;
		padding: 13px 16px;
		text-align: left;
		touch-action: manipulation;
	}

	#legion-main-navigation.is-open {
		max-height: calc(100vh - 72px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	#navbar ul li a {
		min-height: 46px;
		padding: 14px 18px;
	}

	.header-info-container .header-info {
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 9px 10px;
	}

	.legion-server-state,
	.legion-time-state {
		padding: 0;
	}

	.legion-time-state {
		font-size: 9px;
		white-space: nowrap;
	}

	#container {
		margin-top: 8px;
	}

	#content {
		padding: 0;
	}

	#content > .col-xs-12 {
		float: none;
		padding-right: 0;
		padding-left: 0;
	}

	.legion-home-grid,
	.legion-left-rail,
	.legion-main-column,
	.legion-right-rail {
		gap: 10px;
	}

	.legion-home-grid .legion-battle-callout {
		padding: 18px;
	}

	.legion-home-grid .legion-battle-callout h1 {
		margin-top: 6px;
		font-size: clamp(24px, 7.5vw, 32px);
		line-height: 1.12;
	}

	.legion-news-copy a,
	.legion-event strong,
	.legion-event small {
		overflow-wrap: anywhere;
	}

	.legion-module-frame {
		max-width: 100%;
		-webkit-overflow-scrolling: touch;
	}

	.legion-module-frame .form-horizontal .form-group {
		margin-right: 0;
		margin-left: 0;
	}

	.legion-module-frame input,
	.legion-module-frame select,
	.legion-module-frame textarea,
	.legion-login-panel input {
		max-width: 100%;
		font-size: 16px;
	}

	.legion-button,
	.legion-login-panel button,
	.legion-module-frame .btn {
		min-height: 44px;
		touch-action: manipulation;
	}

	.footer {
		margin-bottom: 84px;
		padding: 22px 16px;
	}

	.footer .row {
		margin-right: 0;
		margin-left: 0;
	}

	.footer .col-xs-8,
	.footer .col-xs-4,
	.footer .col-xs-12 {
		padding-right: 0;
		padding-left: 0;
	}

	.legion-community-float {
		right: max(12px, env(safe-area-inset-right));
		bottom: max(12px, env(safe-area-inset-bottom));
		max-width: calc(100vw - 24px);
		min-height: 44px;
	}
}

@media only screen and (max-width: 520px) {
	#header.legion-hero {
		height: clamp(210px, 62vw, 260px);
		min-height: 210px;
	}

	.legion-hero-home {
		--legion-logo-fx-size: 185px;
		inset: 0 29% 34px 0;
	}

	.legion-hero-logo {
		width: min(300px, 100%);
		max-height: 170px;
	}

	.legion-hero-character {
		right: -42px;
		bottom: -78px;
		height: clamp(290px, 78vw, 360px);
	}

	#header.legion-hero::after {
		right: 14%;
		bottom: -58px;
		width: 140px;
		height: 88px;
	}

	.legion-server-state-label,
	.legion-news-item time {
		display: none;
	}

	.legion-server-state {
		gap: 7px;
	}

	.legion-time-state {
		align-items: flex-end;
	}

	.legion-module-banner {
		min-height: 82px;
		padding: 15px;
	}

	.legion-module-tabs a {
		min-height: 44px;
		padding: 12px 6px;
	}

	.legion-module-frame {
		padding: 8px;
	}

	.legion-module-frame .page-title {
		padding: 11px 12px 9px;
		font-size: 16px;
		line-height: 1.25;
	}

	.legion-panel-title-row {
		gap: 8px;
	}
}

@media only screen and (max-width: 380px) {
	.global-top-bar .global-top-bar-content .row {
		gap: 4px;
	}

	.global-top-bar .global-top-bar-content .col-xs-6 {
		font-size: 8px;
	}

	#header.legion-hero {
		height: 216px;
	}

	.legion-hero-home {
		right: 25%;
	}

	.legion-hero-character {
		right: -58px;
	}

	.header-info-container .header-info {
		padding-right: 8px;
		padding-left: 8px;
	}

	.legion-time-state {
		font-size: 8px;
	}

	.legion-home-grid .legion-battle-callout {
		padding: 16px 14px;
	}

	.legion-home-grid .legion-battle-callout h1 {
		font-size: 23px;
	}
}