/* ===== UnRealMU Overrides for Webzen Template ===== */
/* This file contains all custom CSS overrides */

/* Dark body background */
body.wz {
	background-color: #1a1a1a;
}

/* Global Header (Black top bar) */
.global-header-container {
	width: 100%;
	height: 44px;
	background: #0b0b0b;
	position: absolute !important;
	top: 0 !important;
	left: 0;
	z-index: 1000;
	border-bottom: 1px solid #1a1a1a;
	display: block !important;
}

.unreal-global-header {
	width: 100% !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 0 20px !important;
}

.unreal-global-header h1 {
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
}

.unreal-global-header h1 a {
	color: #e12729;
	font-weight: 900;
	font-size: 16px;
	text-decoration: none;
	letter-spacing: 2px;
	display: flex;
	align-items: center;
}

.unreal-global-header menu {
	display: flex;
	list-style: none;
	margin: 0 0 0 15px;
	padding: 0;
	flex: 1;
	gap: 20px;
}

.unreal-global-header menu a {
	color: #888;
	text-decoration: none;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

.unreal-global-header menu a:hover {
	color: #fff;
}

.unreal-global-header article {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-direction: row !important;
}

.unreal-global-header article a {
	color: #888;
	text-decoration: none;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 600;
}

.unreal-global-header article a.register {
	color: #e12729;
	border: 1px solid #e12729;
	padding: 4px 12px;
	border-radius: 3px;
}

.unreal-global-header article a.register:hover {
	background: #e12729;
	color: #fff;
}

/* ===== MAIN NAV — Webzen-style full-bar expansion ===== */
.wz-nav {
	position: absolute !important;
	top: 44px !important;
	left: 0 !important;
	width: 100% !important;
	z-index: 999 !important;
	background: url("../images/bg_nav.png") 0 0 repeat-x, linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 100%) !important;
	height: 80px !important;
	overflow: hidden !important;
	margin-left: 0 !important;
	transition: height 0.35s ease !important;
}

/* Expand nav when hovering over the gnb list area (shows submenus) */
/* Only expand when mouse is over the menu items, NOT the DOWNLOAD button */
.wz-nav:has(.wz-gnb__list:hover) {
	height: 220px !important;
	overflow: visible !important;
}
/* Fallback for browsers without :has() support — JS adds this class */
.wz-nav.wz-nav--submenu-open {
	height: 220px !important;
	overflow: visible !important;
}

/* Dark overlay for expanded submenu area (below the 80px main bar) */
.wz-nav:after {
	content: '' !important;
	display: block !important;
	width: 100% !important;
	height: calc(100% - 80px) !important;
	background: rgba(0, 0, 0, 0.92) !important;
	position: absolute !important;
	top: 80px !important;
	left: 0 !important;
	z-index: 0 !important;
	pointer-events: none !important;
	opacity: 0 !important;
	transition: opacity 0.35s ease !important;
}

.wz-nav:has(.wz-gnb__list:hover):after,
.wz-nav.wz-nav--submenu-open:after {
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* Separator line between main nav and submenus */
.wz-nav:before {
	content: '' !important;
	display: block !important;
	width: 100% !important;
	height: 1px !important;
	background: rgba(255, 255, 255, 0.08) !important;
	position: absolute !important;
	top: 80px !important;
	left: 0 !important;
	z-index: 1 !important;
	opacity: 0 !important;
	transition: opacity 0.35s ease !important;
}

.wz-nav:has(.wz-gnb__list:hover):before,
.wz-nav.wz-nav--submenu-open:before {
	opacity: 1 !important;
}

/* Disabled sticky nav on scroll to keep it at the top */
.wz-nav.wz-nav--fixed {
	position: absolute !important;
	top: 44px !important;
	left: 0 !important;
	width: 100% !important;
	z-index: 999 !important;
	background: url("../images/bg_nav.png") 0 0 repeat-x, linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 100%) !important;
	margin-left: 0 !important;
}

/* The nav-content is the flex container inside the nav */
.wz-nav-content {
	width: 100% !important;
	position: relative !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	display: flex !important;
	z-index: 1 !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	padding: 0 20px !important;
}

.wz-nav--main {
	display: block !important;
	height: 80px !important;
	line-height: 80px !important;
}

.wz__bi--nav {
	height: 65px !important;
	width: auto !important;
	display: inline-block !important;
	vertical-align: middle !important;
	transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
	animation: navLogoGlow 3s infinite ease-in-out !important;
}

.wz__bi--nav:hover {
	transform: scale(1.08) !important;
}

@keyframes navLogoGlow {
	0% {
		filter: drop-shadow(0 0 4px rgba(0, 150, 255, 0.35)) !important;
	}
	50% {
		filter: drop-shadow(0 0 12px rgba(0, 180, 255, 0.75)) brightness(1.08) !important;
	}
	100% {
		filter: drop-shadow(0 0 4px rgba(0, 150, 255, 0.35)) !important;
	}
}

.wz-container {
	padding-top: 0 !important;
}

.wz-contents {
	padding-top: 0px !important;
}

/* ===== NAVIGATION MENU ITEMS (GNB) ===== */
.wz-gnb__list {
	max-width: 900px !important;
	display: flex !important;
	justify-content: center !important;
	align-items: flex-start !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 1;
	gap: 45px !important;
}

.wz-gnb__item {
	position: relative !important;
	text-align: center !important;
	list-style: none !important;
	height: auto !important;
}

.wz-gnb__link {
	position: relative !important;
	display: block !important;
	height: 80px !important;
	padding: 0 25px !important;
	box-sizing: border-box !important;
	font-size: 16px !important;
	color: rgba(255, 255, 255, 0.5) !important;
	text-decoration: none !important;
	transition: all 0.3s ease !important;
	word-break: keep-all !important;
	line-height: 80px !important;
}

/* Orange underline indicator on hover (Webzen style) */
.wz-gnb__link:after {
	content: '' !important;
	width: 36% !important;
	height: 4px !important;
	background: #d76440 !important;
	position: absolute !important;
	bottom: 0 !important;
	left: 50% !important;
	margin-left: -18% !important;
	transform: translateX(-100%) !important;
	opacity: 0 !important;
	transition: all 0.5s ease !important;
}

.wz-gnb__item:hover .wz-gnb__link,
.wz-gnb__link.current {
	color: #fff !important;
}

.wz-gnb__item:hover .wz-gnb__link:after,
.wz-gnb__link.current:after {
	transform: translateX(0) !important;
	opacity: 1 !important;
}

.wz-gnb__text {
	white-space: nowrap;
	display: inline-block !important;
	vertical-align: middle !important;
	max-width: calc(100% - 1px) !important;
}

/* Hide any default ::before/::after on items */
.wz-gnb__item::before {
	display: none !important;
	content: none !important;
}

/* ===== SUBMENU (LNB) — Webzen-style (flows inside expanded nav) ===== */
.wz-lnb__list {
	max-width: 160px !important;
	width: 100% !important;
	text-align: center !important;
	margin: 0 auto !important;
	padding: 15px 5px 30px !important;
	list-style: none !important;
	list-style-type: none !important;
	position: relative !important;
	z-index: 2 !important;
	opacity: 0 !important;
	transform: translateY(-5px) !important;
	transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Show submenus when hovering over the gnb list area (not DOWNLOAD) */
.wz-nav:has(.wz-gnb__list:hover) .wz-lnb__list,
.wz-nav.wz-nav--submenu-open .wz-lnb__list {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

.wz-lnb__item {
	list-style: none !important;
	list-style-type: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.wz-lnb__link {
	display: inline-block !important;
	padding: 4px 0 8px !important;
	font-size: 13px !important;
	color: #777 !important;
	text-decoration: none !important;
	word-break: keep-all !important;
	transition: color 0.2s ease !important;
}

.wz-lnb__link:hover,
.wz-lnb__link.current {
	color: #d76440 !important;
}

.wz-lnb__text {
	color: inherit !important;
}

/* Remove bullet points from all nav lists */
#gnb,
.wz-gnb__list,
.wz-lnb__list {
	list-style: none !important;
	list-style-type: none !important;
}

/* ===== DOWNLOAD BUTTON (Webzen style) ===== */
.wz-nav--download {
	display: block !important;
	height: 80px !important;
	line-height: 80px !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #ae3b17 !important;
	background: transparent !important;
	transition: transform 0.3s ease !important;
	white-space: nowrap !important;
	padding: 0 0 0 15px !important;
}

.wz-nav--download:hover {
	color: #d76440 !important;
	transform: scale(1.1) !important;
}

/* ===== SLIDER ===== */
.mz-promotion {
	position: relative;
	height: 760px;
	overflow: hidden;
	background: #000;
	margin-top: 0;
	width: 100%;
}

.mz-slider {
	position: absolute;
	left: 50%;
	top: 0;
	width: 1920px;
	margin-left: -960px;
	height: 100%;
}

/* Artificial edge fade to mimic Webzen's native image edges */
.mz-slider::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 85%, #000 100%);
	pointer-events: none;
	z-index: 5;
}

.mz-slider-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.5s;
}

.mz-slider-item.active {
	opacity: 1;
	z-index: 1;
}

.mz-slider-item img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

/* === LIGHT THEME OVERRIDES FOR MAIN CONTENT === */
body {
	margin: 0;
	padding: 0;
}

body.wz {
	background-color: #ffffff !important;
	overflow-x: hidden;
}

.wz-container,
.wz-contents {
	background-color: #ffffff !important;
}

/* Text and Headings */
.main {
	padding: 40px 0 0 0;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	color: #333 !important;
}

.main__latest .latest-title {
	color: #333 !important;
	font-family: 'Open Sans', Arial, sans-serif !important;
	font-weight: 600 !important;
	font-style: italic !important;
	font-size: 20px !important;
	border-bottom: 1px solid #ddd !important;
	padding-bottom: 5px !important;
	margin-bottom: 10px !important;
}

.board-list__link .title {
	color: #555 !important;
	font-family: 'Open Sans', Arial, sans-serif !important;
	font-weight: 400 !important;
}

.board-list__link:hover .title {
	color: #d76440 !important;
}

.board-list__item {
	border-bottom: 1px solid #f0f0f0 !important;
}

/* Specific component backgrounds */
.main__latest-news,
.main__latest-shop {
	background: #fff !important;
}

.main__info__box {
	background: transparent !important;
}

/* Category tags */
.board-list__link .category {
	color: #d76440 !important;
	border: 1px solid #d76440 !important;
	background: #fff !important;
	font-weight: normal;
}

/* Text inside ranking boxes */
.main_ranking {
	color: #333 !important;
}

.main_ranking table th {
	color: #666 !important;
	border-bottom: 1px solid #ddd !important;
}

.main_ranking table td {
	color: #444 !important;
	border-bottom: 1px solid #eee !important;
}

.main_ranking .no-players {
	color: #888 !important;
}

/* Homepage Ranking Tables Webzen Style */
.main__info .ranking__table {
	border-collapse: collapse !important;
	border: none !important;
	box-shadow: none !important;
}

.main__info .ranking__table th,
.main__info .ranking__table td {
	border-left: none !important;
	border-right: none !important;
	border-top: none !important;
	border-bottom: 1px solid #d0d0d0 !important;
	box-shadow: none !important;
	background: none !important;
}

.main__info .ranking__table tbody tr:hover {
	box-shadow: none !important;
	background-color: #f9f9f9 !important;
}

.mz-slider-info {
	position: absolute;
	left: 50%;
	bottom: 120px;
	margin-left: -600px;
	width: 1200px;
	z-index: 2;
	pointer-events: none;
}

.mz-slider-info h3 {
	font-size: 36px;
	color: #fff;
	font-weight: 800;
	margin: 0 0 5px 0;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	font-style: italic;
}

.mz-slider-info span {
	font-size: 16px;
	color: #fff;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.mz-paging-wrapper {
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -600px;
	width: 1200px;
	height: 80px;
	display: flex;
	z-index: 10;
	align-items: center;
}

.mz-prev,
.mz-next {
	width: 40px;
	height: 80px;
	background: #111;
	color: #d76440;
	border: none;
	font-size: 18px;
	cursor: pointer;
	transition: 0.3s;
	border-left: 1px solid #222;
	border-right: 1px solid #222;
}

.mz-prev:hover,
.mz-next:hover {
	background: #000;
}

.mz-paging-list {
	flex: 1;
	display: flex;
	height: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mz-paging-item {
	flex: 1;
	height: 100%;
	cursor: pointer;
	display: flex;
	border-right: 1px solid rgba(0, 0, 0, 0.3);
	position: relative;
	overflow: hidden;
	transition: filter 0.3s;
	filter: brightness(0.7);
}

.mz-paging-item.active,
.mz-paging-item:hover {
	filter: brightness(1.1);
}

.mz-paging-item:nth-child(1) { background-color: #2b3040; }
.mz-paging-item:nth-child(2) { background-color: #d76440; }
.mz-paging-item:nth-child(3) { background-color: #63473f; }
.mz-paging-item:nth-child(4) { background-color: #313543; }
.mz-paging-item:nth-child(5) { background-color: #15171f; }

.mz-paging-text {
	padding: 15px 10px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 13px;
	font-weight: 600;
	font-style: italic;
	z-index: 2;
	line-height: 1.2;
	width: 50%;
	pointer-events: none;
}

.mz-paging-img {
	position: absolute;
	right: 5px;
	top: 0;
	height: 100%;
	width: 55%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center right;
	z-index: 1;
	pointer-events: none;
}

.mz-counter {
	position: absolute;
	right: 0;
	bottom: 100px;
	color: #888;
	font-size: 14px;
	font-weight: bold;
	background: rgba(0, 0, 0, 0.6);
	padding: 5px 20px;
	border-radius: 20px;
	z-index: 10;
}

.mz-counter span {
	color: #d76440;
	font-size: 20px;
}

/* Rankings light theme matching Webzen */
.main__info-ranking {
	background: transparent !important;
	padding: 0 !important;
}

.main__info-ranking select,
.ranking__select .select-items {
	background-color: #5d67b1 !important;
	border: none !important;
	color: #fff !important;
}

.main__info .hall-of .ranking__select .select-items {
	background-color: #5d9fb1 !important;
	border: none !important;
}

.main__info .ranking__select {
	border-left: none !important;
}

/* Package Shop link button styling */
.main__latest-shop .shop-items__slider .slider-cycle__list .btn-link {
	background-color: #d76440 !important;
	color: #fff !important;
	text-transform: uppercase;
	font-weight: bold;
	border-radius: 3px;
	display: block;
	text-align: center;
	line-height: 26px;
	text-decoration: none;
	box-sizing: content-box;
}

.main__latest-shop .shop-items__slider .slider-cycle__list .btn-link:hover {
	background-color: #e5734f !important;
}

/* Guide Text Colors (Matches Webzen's exact tone) */
.main__info .guide__link sup { color: #333 !important; font-weight: bold !important; font-style: normal !important; }
.main__info .guide__link .latest-title { color: #213a4d !important; font-weight: 500 !important; }

/* News list overrides */
.board-list {
	list-style: none !important;
	list-style-type: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}

.board-list__item {
	list-style: none !important;
	list-style-type: none !important;
	border: none !important;
	border-bottom: 1px solid #e5e5e5 !important;
	padding: 2px 0 !important;
	margin: 0 !important;
}

.board-list__item::before,
.board-list__item::after {
	display: none !important;
	content: none !important;
}

.board-list__link {
	color: #555 !important;
	display: flex !important;
	align-items: center !important;
	text-decoration: none !important;
	width: 100% !important;
}

.board-list__link:hover .title { color: #d76440 !important; }

.board-list__link .datetime {
	color: #999 !important;
	font-size: 13px !important;
	font-style: italic !important;
	margin-left: auto !important;
}

.board-list .category {
	border: 1px solid #d76440 !important;
	color: #d76440 !important;
	padding: 3px 10px !important;
	font-size: 11px !important;
	font-weight: normal !important;
	text-transform: uppercase !important;
	margin-right: 15px !important;
	display: inline-block !important;
	width: 130px !important;
	text-align: center !important;
}

.board-list__link .preview {
	display: inline-block !important;
	vertical-align: middle !important;
}

.board-list__link .title {
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: normal !important;
	color: #444 !important;
	font-style: normal !important;
}

/* Alert override */
.alert-info {
	background: rgba(215, 100, 64, 0.1);
	border: 1px solid rgba(215, 100, 64, 0.3);
	color: #d76440;
}

/* Event timers */
.event-timers { list-style: none; padding: 0; margin: 0; }
.event-timers li { padding: 8px 0; border-bottom: 1px solid #2a2a2a; color: #ccc; font-size: 13px; }

/* MU Introduction dark override & Full Width Breakout */
.main__intro {
	width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	margin-left: -50vw !important;
	background-color: transparent !important;
	height: 540px !important;
}

.main__intro::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: transparent !important;
	pointer-events: none;
	z-index: 1;
	display: none !important;
}

.main__intro--title {
	color: #fff !important;
	font-size: 32px !important;
	font-weight: bold;
	position: relative;
	z-index: 2;
	margin-bottom: 20px !important;
	font-style: italic;
}

.main__intro--desc {
	color: rgba(255, 255, 255, 0.8) !important;
	position: relative;
	z-index: 2;
	max-width: 800px;
	margin: 0 auto !important;
	line-height: 1.6;
}

/* Dropdown (My Account) */
.my { position: relative !important; display: inline-block !important; }
.nickname.selected {
	color: #d76440 !important;
	font-weight: bold !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	cursor: pointer !important;
	display: inline-block !important;
	position: relative !important;
	font-size: 13px !important;
	height: 80px;
	line-height: 80px;
	white-space: nowrap;
}
.nickname.selected::after { content: ' ˅' !important; display: inline-block !important; margin-left: 6px !important; font-size: 11px !important; vertical-align: middle !important; }
.my:hover .nickname.selected::after { content: ' ˄' !important; }
.my-contents.list {
	position: absolute !important;
	top: 80px !important;
	right: 0 !important;
	background-color: #252525 !important;
	border: 1px solid #383838 !important;
	border-radius: 4px !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	min-width: 180px !important;
	z-index: 99999 !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
.my:hover .my-contents.list { display: block !important; }
.my-contents.list li { border-bottom: 1px solid #333333 !important; margin: 0 !important; padding: 0 !important; }
.my-contents.list li:last-child { border-bottom: none !important; }
.my-contents.list li a {
	display: block !important;
	padding: 10px 15px !important;
	color: #b0b0b0 !important;
	font-size: 13px !important;
	text-decoration: none !important;
	font-weight: normal !important;
	text-align: left !important;
	transition: background 0.2s, color 0.2s !important;
	line-height: normal !important;
}
.my-contents.list li a:hover { background-color: #353535 !important; color: #ffffff !important; }

.acp-coins { padding: 8px 20px; display: flex; justify-content: space-between; }
.coins-title { color: #888; font-size: 12px; }
.coins { color: #d76440; font-weight: 700; font-size: 12px; }

/* Specific Ranking Switch Buttons */
.ranking-list .btn-primary {
	background: #d76440 !important; border: none !important; color: #fff !important;
	padding: 6px 15px !important; border-radius: 3px !important; text-decoration: none !important;
	display: inline-block !important; margin: 5px 2px !important; font-size: 12px !important;
	font-family: 'Open Sans', sans-serif !important; font-weight: 600 !important; cursor: pointer !important;
}
.ranking-list .btn-primary:hover { background: #e5734f !important; }

/* Modals */
#overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 500; }
#select_server { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #222; border: 1px solid #333; border-radius: 8px; z-index: 501; min-width: 300px; }
#select_server .modal-header { padding: 15px 20px; border-bottom: 1px solid #333; }
#select_server .modal-header h2 { color: #fff; font-size: 16px; margin: 0; }
#select_server .close { color: #999; float: right; text-decoration: none; }
#loading { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; z-index: 600; }

/* Forms */
.form-control { background: #333; border: 1px solid #444; color: #fff; padding: 8px 12px; border-radius: 4px; width: 100%; }

/* Page-specific: Login, Registration, Account Panel */
.wz-contents .panel { background: #1e1e1e; border: 1px solid #2a2a2a; border-radius: 5px; }
.wz-contents .panel-heading { background: #252525; border-bottom: 1px solid #2a2a2a; padding: 15px 20px; }
.wz-contents .panel-heading h3 { color: #fff; font-size: 16px; margin: 0; }
.wz-contents .panel-body { padding: 20px; }
.wz-contents label { color: #ccc; }
.wz-contents input[type="text"],
.wz-contents input[type="password"],
.wz-contents input[type="email"] {
	background: #2a2a2a; border: 1px solid #3a3a3a; color: #fff; padding: 10px 15px; border-radius: 4px; width: 100%;
}
.wz-contents h2, .wz-contents h3 { color: #fff; }
.wz-contents p { color: #ccc; }

/* Footer dark theme */
.footer .link { color: #888 !important; }
.footer .link:hover { color: #fff !important; }
.footer .copyright span { color: #666 !important; }
.footer .time { color: #666 !important; }
.footer .time strong { color: #888 !important; }

/* Banner Notice Responsiveness Override */
.board-view--banner { width: 100% !important; max-width: 100% !important; margin: 0 0 20px 0 !important; background-size: cover !important; background-position: center !important; }

/* News Reader page overrides */
.news-reader-page .board-view { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; width: 100% !important; }
.news-reader-page .board-view__header { padding: 0 0 15px 0 !important; border-bottom: 1px solid #eee !important; margin-bottom: 25px !important; }
.news-reader-page .board-view__header .title { font-family: 'Open Sans', sans-serif !important; font-size: 28px !important; font-weight: 700 !important; color: #333 !important; }
.news-reader-page .board-view__section { padding: 0 !important; color: #333 !important; }
.news-reader-page .board-view__section img { max-width: 100% !important; height: auto !important; }

/* Homepage Ranking Tables Webzen Style overrides */
.main__info-ranking table { width: 100% !important; border-collapse: collapse !important; border: none !important; box-shadow: none !important; margin-bottom: 30px !important; }
.main__info-ranking table th,
.main__info-ranking table td {
	border-left: none !important; border-right: none !important; border-top: none !important;
	border-bottom: 1px solid #e5e5e5 !important; box-shadow: none !important; background: none !important;
	padding: 8px 0 !important; font-size: 14px !important; text-align: center !important;
	font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #555 !important;
}
.main__info-ranking table th { color: #5d67b1 !important; font-weight: 600 !important; padding: 10px 0 !important; }
.main__info-ranking table td a { color: #555 !important; font-weight: 400 !important; text-decoration: none !important; }
.main__info-ranking table tbody tr:hover { box-shadow: none !important; background-color: #f9f9f9 !important; }
.main__info .hall-of table th { color: #5d9fb1 !important; }

/* Styled Dropdowns in Header Boxes */
.ranking__select select.select-items {
	border: none !important; outline: none !important; cursor: pointer !important; color: #fff !important;
	-webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
	font-weight: bold !important; font-family: 'Open Sans', sans-serif !important;
	padding-right: 35px !important; height: 100% !important; width: 100% !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='3' fill='none' stroke='black' stroke-opacity='0.4' stroke-width='1.5'/%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z' fill='white'/%3E%3C/svg%3E") !important;
	background-size: 24px 24px !important; background-position: calc(100% - 8px) 50% !important;
	background-repeat: no-repeat !important; text-transform: none !important;
}
.ranking__select select.select-items option { color: #fff !important; }

/* ===== VISUAL LAYOUT CORRECTIONS ===== */
html, body { overflow-x: hidden !important; }

/* Spacing / Whitespace reduction */
.mz-promotion { height: 600px !important; }
.mz-slider { height: 600px !important; }
.main__latest { padding: 30px 0 20px !important; }
.main__info { margin-top: 20px !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
.main__intro { margin-top: 0 !important; padding-top: 40px !important; }
#container, #contents, .wz-container, .wz-contents, .main { padding-top: 0 !important; margin-top: 0 !important; }

/* Container Widths */
.wz-container { max-width: 1200px !important; margin: 0 auto !important; padding-top: 0 !important; position: relative !important; }
/* wz-nav-content is now defined in the nav section above */

/* Rankings and Hall of Fame Alignment - Webzen faithful */
.main__info__box {
	width: 1200px !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	overflow: hidden !important;
	padding: 0 !important;
}
.main_ranking {
	float: left !important;
	width: 400px !important;
	margin-left: 20px !important;
	margin-right: 10px !important;
}
.main_hall_of_fame {
	float: left !important;
	width: 400px !important;
	margin-left: 10px !important;
	margin-right: 10px !important;
}
.main__info-ranking {
	position: relative !important;
	margin-top: 70px !important;
	width: 100% !important;
	float: none !important;
	font-style: italic !important;
}
.main__info-ranking .latest-title {
	margin-bottom: -25px !important;
	font-size: 32px !important;
}
.main__info-ranking .latest-more {
	position: absolute !important;
	top: 5px !important;
	right: 0 !important;
	font-size: 14px !important;
	color: #999 !important;
	text-decoration: none !important;
	font-style: italic !important;
}
.main__info-ranking .latest-more:hover {
	color: #d76440 !important;
}
.main__info .ranking-info {
	padding: 0 !important;
	margin-bottom: -40px !important;
}
.main__info .ranking__items {
	display: none !important;
}
.main__info .ranking__select {
	width: 100% !important;
	float: left !important;
	border-left: none !important;
	margin-left: 0 !important;
}
.main__info .ranking__select .select-items {
	min-width: 100% !important;
	height: 49px !important;
	line-height: 49px !important;
	font-size: 14px !important;
	background-color: #5d67b1 !important;
	border: none !important;
	color: #fff !important;
	border-radius: 0 !important;
}
.main__info .hall-of .ranking__select .select-items {
	background-color: #5d9fb1 !important;
}
.main__info .ranking__table {
	border-bottom: 2px solid #5d67b1 !important;
	width: 100% !important;
	border-collapse: collapse !important;
	box-shadow: none !important;
	background: transparent !important;
}
.main__info .hall-of .ranking__table {
	border-bottom-color: #5d9fb1 !important;
}
.main__info .ranking__table th,
.main__info .ranking__table td {
	padding: 15px 0 !important;
	font-size: 16px !important;
	border: none !important;
	border-bottom: 1px solid #d0d0d0 !important;
	box-shadow: none !important;
	background: transparent !important;
	text-align: center !important;
	font-style: italic !important;
	color: #555 !important;
	font-weight: 400 !important;
}
.main__info .ranking__table th {
	color: #5d67b1 !important;
	font-weight: 400 !important;
	border-top: 1px solid #d0d0d0 !important;
	border-bottom: 1px solid #d0d0d0 !important;
}
.main__info .hall-of .ranking__table th {
	color: #5d9fb1 !important;
}
.main__info .ranking__table td a {
	color: #555 !important;
	text-decoration: none !important;
	font-weight: 400 !important;
}
.main__info .ranking__table td a:hover {
	color: #d76440 !important;
}
.main__info .ranking__table tbody tr:hover {
	box-shadow: none !important;
	transform: none !important;
}
.main__info .ranking__table tbody tr:hover td {
	background: rgba(93, 103, 177, 0.03) !important;
}
.main__info-guide {
	float: right !important;
	width: 300px !important;
	margin-top: 83px !important;
}

/* Remove Sidebar Banner override to restore Webzen original position */

/* Elf background */
.main__info { background-color: transparent !important; opacity: 1 !important; filter: none !important; background-blend-mode: normal !important; }

/* Contrast, borders, shadows */
.slider-cycle__item { border: 1px solid #bbb !important; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12) !important; }
.slider-cycle__item:hover { border-color: #d76440 !important; box-shadow: 0 12px 24px rgba(215, 100, 64, 0.25) !important; }
.main__info-ranking table th { font-weight: 600 !important; color: #4a528e !important; border-bottom: 2px solid #5d67b1 !important; }
.main__info-ranking table td { color: #555 !important; font-weight: 400 !important; }
.main__info .hall-of table th { color: #4a7f8e !important; border-bottom: 2px solid #5d9fb1 !important; }

/* Adjust floating banner size */
.side-promotion { transform: scale(0.9); transform-origin: right top; }

/* ===== CUSTOM FOOTER LOGO OVERRIDE ===== */
.footer {
    background-color: #000000 !important;
}

/* Fix language dropdown hover gap */
.footer .language .list,
.global-footer .language .list {
    padding-bottom: 25px !important;
    bottom: 20px !important;
}

.footer .copyright .ci {
    background-image: url('../images/unrealmu_logo_dark.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center left !important;
    width: 70px !important;
    height: 45px !important;
}

/* Rankings Dropdown Premium Styling */
div[id^="rankings_select_"] {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 20px 0 25px 0 !important;
	padding: 10px 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

div[id^="rankings_select_"] .btn-primary,
div[id^="rankings_select_"] .dropdown-toggle {
	background: #f8f9fa !important;
	color: #5d67b1 !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 6px !important;
	padding: 10px 24px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.8px !important;
	transition: all 0.25s ease !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

div[id^="rankings_select_"] .btn-primary:hover,
div[id^="rankings_select_"] .dropdown-toggle:hover {
	background: #5d67b1 !important;
	color: #ffffff !important;
	border-color: #5d67b1 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 8px rgba(93, 103, 177, 0.2) !important;
}

div[id^="rankings_select_"] .btn-primary.active,
div[id^="rankings_select_"] .btn-primary:active,
div[id^="rankings_select_"] .dropdown-toggle.active {
	background: #d76440 !important;
	color: #ffffff !important;
	border-color: #d76440 !important;
	box-shadow: 0 4px 10px rgba(215, 100, 64, 0.3) !important;
}

/* Dropdown menu overrides */
div[id^="rankings_select_"] .dropdown {
	position: relative !important;
}

div[id^="rankings_select_"] .dropdown-menu {
	display: none;
	position: absolute !important;
	top: 100% !important;
	right: 0 !important;
	left: auto !important;
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	padding: 8px 0 !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
	margin-top: 8px !important;
	width: 220px !important;
	z-index: 1050 !important;
}

/* Show dropdown when open */
div[id^="rankings_select_"] .dropdown.show .dropdown-menu,
div[id^="rankings_select_"] .dropdown:hover .dropdown-menu {
	display: block !important;
}

div[id^="rankings_select_"] .dropdown-item {
	display: block !important;
	width: 100% !important;
	clear: both !important;
	color: #5d67b1 !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.8px !important;
	padding: 11px 20px !important;
	transition: all 0.2s ease !important;
	text-align: left !important;
	border: none !important;
	background: transparent !important;
}

div[id^="rankings_select_"] .dropdown-item:hover {
	background: #f8f9fa !important;
	color: #d76440 !important;
	padding-left: 24px !important;
}

.dropdown-toggle::after {
	margin-left: 0.6em !important;
	vertical-align: 0.15em !important;
}

/* Podium Layout styling for Rankings */
.ranking-ranker__item.ranking-ranker--rank1 {
	background-position-x: 0 !important;
	transform: translateY(-25px) !important;
	position: relative !important;
	z-index: 10 !important;
	filter: drop-shadow(0 12px 20px rgba(215, 100, 64, 0.45)) !important;
}

.ranking-ranker__item.ranking-ranker--rank2 {
	background-position-x: -310px !important;
	transform: translateY(5px) !important;
	position: relative !important;
	z-index: 5 !important;
}

.ranking-ranker__item.ranking-ranker--rank3 {
	background-position-x: -620px !important;
	transform: translateY(15px) !important;
	position: relative !important;
	z-index: 5 !important;
}

/* Page Title Styling - Modern Accent */
.dmn-page-title {
	margin-bottom: 35px !important;
}

.dmn-page-title h1 {
	font-family: 'Open Sans', sans-serif !important;
	font-weight: 800 !important;
	font-size: 42px !important;
	text-transform: uppercase !important;
	letter-spacing: 3px !important;
	color: #1f1f1f !important;
	position: relative;
	display: inline-block;
	background: linear-gradient(135deg, #111111 0%, #d76440 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.dmn-page-title h1::after {
	content: '' !important;
	display: block !important;
	width: 60px !important;
	height: 4px !important;
	background: #d76440 !important;
	margin: 8px auto 0 auto !important;
	border-radius: 2px !important;
}

/* Subtitle Styling */
.dmn-page-content h2.title {
	font-family: 'Open Sans', sans-serif !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	color: #5d67b1 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	border-bottom: 2px solid #f1f5f9 !important;
	padding-bottom: 15px !important;
	margin-bottom: 30px !important;
}

/* Podium Text Overrides */
.ranking-ranker .rank {
	font-family: 'Open Sans', sans-serif !important;
	font-size: 13px !important;
	color: #d76440 !important;
	text-transform: uppercase !important;
	letter-spacing: 1.5px !important;
	font-weight: 800 !important;
	margin-top: 15px !important;
}

.ranking-ranker .char {
	font-family: 'Open Sans', sans-serif !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	color: #1f1f1f !important;
	margin-top: 5px !important;
	letter-spacing: -0.5px !important;
}

.ranking-ranker .lvl {
	font-size: 12px !important;
	color: #5d67b1 !important;
	font-weight: 700 !important;
	background: #f1f3f9 !important;
	display: inline-block !important;
	padding: 4px 12px !important;
	border-radius: 12px !important;
	margin-top: 8px !important;
	width: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.ranking-ranker .shame {
	font-size: 11px !important;
	color: #777777 !important;
	margin-top: 6px !important;
	font-weight: 600 !important;
}

/* Modern Premium Table Styling */
.ranking__table {
	margin-top: 25px !important;
	border-collapse: separate !important;
	border-spacing: 0 8px !important;
	width: 100% !important;
}

.ranking__table th {
	color: #5d67b1 !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	padding: 16px 12px !important;
	border-bottom: 2px solid #5d67b1 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.ranking__table tbody tr {
	background: #ffffff !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
	transition: all 0.25s ease !important;
}

.ranking__table td {
	padding: 16px 12px !important;
	border: 1px solid #f1f5f9 !important;
	border-left: none !important;
	border-right: none !important;
	background: #ffffff !important;
	box-shadow: none !important;
}

.ranking__table td:first-child {
	border-left: 1px solid #f1f5f9 !important;
	border-top-left-radius: 8px !important;
	border-bottom-left-radius: 8px !important;
	font-weight: 700 !important;
	color: #5d67b1 !important;
}

.ranking__table td:last-child {
	border-right: 1px solid #f1f5f9 !important;
	border-top-right-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
}

.ranking__table tbody tr:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(93, 103, 177, 0.08) !important;
}

.ranking__table tbody tr:hover td {
	background: #f8fafc !important;
	border-color: #e2e8f0 !important;
}

/* Homepage Sidebar / Widget Rankings Tables Override - Webzen faithful */
.main__info-ranking .ranking__table {
	margin-top: 0 !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	width: 100% !important;
	background: transparent !important;
	box-shadow: none !important;
	border-bottom: 2px solid #5d67b1 !important;
}

.main__info-ranking.hall-of .ranking__table {
	border-bottom: 2px solid #5d9fb1 !important;
}

.main__info-ranking .ranking__table tbody tr {
	background: transparent !important;
	box-shadow: none !important;
}

.main__info-ranking .ranking__table th,
.main__info-ranking .ranking__table td,
.main__info-ranking .ranking__table td:first-child,
.main__info-ranking .ranking__table td:last-child {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid #d0d0d0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 15px 0 !important;
	font-size: 16px !important;
	font-style: italic !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-align: center !important;
	color: #555 !important;
}

.main__info-ranking .ranking__table th {
	color: #5d67b1 !important;
	font-weight: 400 !important;
	border-top: 1px solid #d0d0d0 !important;
	border-bottom: 1px solid #d0d0d0 !important;
}

.main__info-ranking.hall-of .ranking__table th {
	color: #5d9fb1 !important;
}

/* Character links in widget tables */
.main__info-ranking .ranking__table td a {
	color: #555 !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	transition: color 0.15s ease !important;
}

.main__info-ranking .ranking__table td a:hover {
	color: #d76440 !important;
}

/* Hover effect on table rows on homepage */
.main__info-ranking .ranking__table tbody tr:hover td {
	background: rgba(93, 103, 177, 0.03) !important;
}

/* Reset row translate effect from main rankings page */
.main__info-ranking .ranking__table tbody tr:hover {
	transform: none !important;
	box-shadow: none !important;
}