/* Reduce key image size in modern cards */
.event-card-modern img.key-icon-small {
	width: 64px;
	height: 64px;
	border-radius: 12px;
	box-shadow: 0 2px 8px #0006;
	object-fit: cover;
	margin-bottom: 12px;
}

/* Larger quest icon for quests page */
.quest-icon-large {
	width: 120px;
	height: 120px;
	border-radius: 16px;
	box-shadow: 0 4px 16px #0006;
	object-fit: cover;
	margin-bottom: 12px;
}
/* 3-column grid for event cards */
.events-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	justify-items: center;
}
/* Modern Event Cards Styling */
.events-modern-container {
	gap: 32px;
	justify-content: center;
	margin-top: 32px;
}
.event-card-modern {
	background: linear-gradient(135deg, #232a4d 60%, #76c7ff 100%);
	border-radius: 18px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.18);
	padding: 24px 32px;
	min-width: 320px;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	color: #fff;
	font-family: 'Segoe UI', 'Roboto', sans-serif;
	transition: transform 0.18s;
}
.event-card-modern:hover {
	transform: translateY(-6px) scale(1.03);
	box-shadow: 0 8px 32px rgba(118,199,255,0.18);
}
.event-card-header {
	display: flex;
	align-items: center;
	gap: 18px;
}
.event-icon-modern {
	width: 64px;
	height: 64px;
	border-radius: 12px;
	box-shadow: 0 2px 8px #0006;
	background: #1a1d2b;
	object-fit: cover;
}
.event-title-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.event-title-modern {
	font-size: 1.6em;
	font-weight: 700;
	margin: 0;
	color: #fff;
}
.event-map-modern {
	font-size: 1em;
	color: #76c7ff;
	font-weight: 500;
}
.event-card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.event-desc-modern {
	font-size: 1.1em;
	color: #e0eaff;
	margin-bottom: 8px;
}
.event-times-modern {
	font-size: 1em;
	color: #c2d6f6;
	margin-bottom: 6px;
}
.event-time-label {
	font-weight: 600;
	color: #76c7ff;
}
.event-countdown-modern {
	margin: 10px 0;
	font-size: 1.2em;
	font-weight: 700;
	color: #ffeb3b;
	background: rgba(34,42,77,0.18);
	padding: 8px 12px;
	border-radius: 8px;
	display: inline-block;
}
.event-countdown-label {
	color: #fff;
	margin-right: 6px;
}
.event-countdown-value {
	font-size: 1.2em;
	font-weight: 700;
	color: #ffeb3b;
}
.event-rewards-modern {
	font-size: 1em;
	color: #aaffc7;
	margin-top: 8px;
}
.event-rewards-label {
	font-weight: 600;
	color: #76c7ff;
	margin-right: 4px;
}

.home-center-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100vw;
	min-height: 100vh;
	text-align: center;
}
/* Sidebar Navigation for Mobile */
#sidebar-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.45);
	z-index: 1001;
	transition: opacity 0.2s;
}
#sidebar-overlay.show {
	display: block;
}
#sidebar-nav {
	position: fixed;
	top: 0; left: -260px;
	width: 240px;
	height: 100vh;
	background: rgba(24, 26, 27, 0.85) !important;
	box-shadow: 2px 0 16px #0008;
	z-index: 1002;
	padding: 24px 18px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	transition: left 0.22s cubic-bezier(.68,-0.55,.27,1.55);
}
#sidebar-nav.open {
	left: 0;
}
#sidebar-nav a {
	color: #76c7ff;
	text-decoration: none;
	font-size: 1.1em;
	padding: 8px 0;
	border-bottom: 1px solid #232a4d44;
}
#sidebar-nav a:last-child {
	border-bottom: none;
}
#sidebar-close-btn {
	background: none;
	border: none;
	color: #fff;
	font-size: 2em;
	align-self: flex-end;
	margin-bottom: 12px;
	cursor: pointer;
}
.sidebar-hamburger {
	display: none;
	background: none;
	border: none;
	flex-direction: column;
	gap: 4px;
	margin-right: 16px;
	margin-left: 8px;
	cursor: pointer;
	z-index: 1100;
}
.sidebar-hamburger span {
	display: block;
	width: 28px;
	height: 4px;
	background: #76c7ff;
	border-radius: 2px;
}
.sidebar-search {
	margin-top: 18px;
	display: flex;
	gap: 6px;
}
.sidebar-search input {
	flex: 1;
	padding: 6px 10px;
	border-radius: 5px;
	border: 1px solid #232a4d;
	background: #232a4d;
	color: #76c7ff;
}
.sidebar-search button {
	padding: 6px 12px;
	border-radius: 5px;
	background: #1e90ff;
	color: #fff;
	border: none;
	font-weight: 500;
	cursor: pointer;
}
@media (max-width: 800px) {
	.main-topnav .topnav-links {
		display: none;
	}
	.sidebar-hamburger {
		display: flex;
	}
	#sidebar-nav {
		display: flex;
	}
}
@media (min-width: 801px) {
		.content {
			margin-left: auto !important;
			margin-right: auto !important;
			max-width: 1200px !important;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.home-features {
			margin-left: auto !important;
			margin-right: auto !important;
			max-width: 1400px !important;
			justify-content: center;
			display: grid;
			grid-template-columns: repeat(5, 1fr);
		}
	#sidebar-nav, #sidebar-overlay, .sidebar-hamburger {
		display: none !important;
	}
	.main-topnav .topnav-links {
		display: flex;
	}
}
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* removed extra closing brace */
body {
    font-family: 'Montserrat', Arial, sans-serif;
    background: #151a24;
}


/* Remove animated background */


.feature-card, .topnav-box {
	border-radius: 16px;
	box-shadow: 0 4px 32px #1e90ff22, 0 2px 8px #76c7ff22;
}


/* Remove card hover animation */

/* Accent color for buttons/links */
.feature-link, .topnav-box {
	background: rgba(34, 43, 51, 0.82) !important;
	color: #1e90ff;
	border: 1px solid #1e90ff44;
}
.feature-link:hover, .topnav-box:hover {
	background: #222b;
	color: #1e90ff;
}

/* Section divider */
.section-divider {
	width: 80%;
	margin: 32px auto;
	border-top: 2px solid #1e90ff44;
}

/* Responsive design tweaks */
@media (max-width: 1200px) {
	.home-features {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 24px;
		justify-content: center;
		justify-items: center;
		align-items: flex-start;
		margin: 32px 0 0 0;
	}
}
@media (max-width: 800px) {
	.home-features {
		grid-template-columns: 1fr;
	}
	.feature-card {
		padding: 18px 8px 16px 12px;
	}
}

/* Smooth page transitions */

/* Remove page fade transitions */

/* Dark/Light mode toggle */
.toggle-mode {
		position: static;
		float: right;
		margin-left: auto;
		margin-right: 12px;
		top: auto;
		right: auto;
		background: #222b;
		color: #1e90ff;
		border: 1px solid #1e90ff44;
		border-radius: 8px;
		padding: 8px 18px;
		cursor: pointer;
		z-index: 1200;
		font-size: 1em;
		font-family: 'Montserrat', Arial, sans-serif;
		box-shadow: 0 2px 8px #1e90ff22;
}

@media (max-width: 800px) {
	.toggle-mode {
		position: static;
		float: right;
		margin: 8px 12px 8px auto;
		display: block;
	}
}
.toggle-mode:hover {
	background: #222b;
	color: #1e90ff;
}

body.light-mode {
	background: linear-gradient(120deg, #f8faff 0%, #76c7ff 100%);
	color: #222;
}
.feature-card.light-mode, .topnav-box.light-mode {
	background: #fff;
	color: #1e90ff;
	box-shadow: 0 4px 32px #76c7ff22;
}


/* Remove all icon and card animations */
/* Arrange event/key cards left-to-right */
@media (min-width: 801px) {
	.events-container {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 24px;
		justify-content: center;
		justify-items: center;
		align-items: flex-start;
		margin: 32px 0 0 0;
		width: 100%;
		overflow-x: unset;
	}
}

@media (max-width: 800px) {
	.events-container {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 16px !important;
		width: 100vw !important;
		padding-bottom: 12px;
		overflow-x: unset !important;
	}
	.events-container .event-card {
		width: 98vw !important;
		max-width: 99vw !important;
		min-width: 0 !important;
		flex: 1 1 auto !important;
	}
}
/* Universal sticky page title for all main pages */
.sticky-page-title {
	position: sticky;
	top: 56px; /* height of nav bar */
	z-index: 120;
	background: #181a1b;
	padding: 14px 0 8px 0;
	box-shadow: 0 2px 16px #1e90ff22;
	text-align: center;
}
/* Sticky Map Events Page Title */
.sticky-map-events-title {
	position: sticky;
	top: 56px; /* height of nav bar */
	z-index: 120;
	background: #181a1b;
	padding: 14px 0 8px 0;
	box-shadow: 0 2px 16px #1e90ff22;
	text-align: center;
}
/* Sticky Map Events Header */
.sticky-map-events-header {
	position: sticky;
	top: 108px; /* nav bar + title height */
	z-index: 100;
	background: #181a1b;
	padding: 8px 0 4px 0;
	box-shadow: 0 2px 12px #1e90ff22;
	text-align: center;
}
/* Sticky Weekly Trials Title */
.sticky-weekly-title {
	position: sticky;
	top: 90px; /* .topbar (50px) + .topnav-boxes (40px) */
	z-index: 1100;
	background: #0a0a0aee;
	padding: 10px 0 6px 0;
	box-shadow: 0 2px 16px #1e90ff11;
	text-align: center;
}
.sticky-weekly-title .title {
	margin-bottom: 2px;
}
.sticky-weekly-title .updated {
	font-size: 1em;
	color: #76c7ff;
	margin-bottom: 0;
}
/* Topnav Boxes */
.topnav-boxes {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	background: #181a1b;
	padding: 10px 0 6px 0;
	border-bottom: 2px solid #1e90ff;
	position: relative;
	z-index: 10;
	outline: 2px solid red; /* DEBUG: Remove after confirming visibility */
}
.topnav-box {
	display: flex;
	visibility: visible;
	opacity: 1;
	align-items: center;
	gap: 6px;
	background: rgba(34, 43, 51, 0.82) !important;
	color: #1e90ff;
	border: 1px solid #1e90ff44;
	padding: 7px 16px;
	font-size: 1em;
	text-decoration: none;
	font-weight: 500;
	box-shadow: 0 2px 8px #1e90ff11;
	border: 1px solid #222b;
	transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.topnav-box.flash-on-click {
	animation: navFlashJump 0.45s cubic-bezier(.68,-0.55,.27,1.55);
}

@keyframes navFlashJump {
	0% { box-shadow: 0 0 8px #1e90ff11; transform: scale(1) translateY(0); background: #181a1b; }
	20% { box-shadow: 0 0 32px #1e90ffcc; transform: scale(1.10) translateY(-10px); background: #1e90ff44; }
	50% { box-shadow: 0 0 16px #76c7ffcc; transform: scale(0.97) translateY(6px); background: #76c7ff44; }
	80% { box-shadow: 0 0 8px #1e90ff88; transform: scale(1.04) translateY(-4px); background: #181a1b; }
	100% { box-shadow: 0 0 8px #1e90ff11; transform: scale(1) translateY(0); background: #181a1b; }
}
.topnav-box:hover {
	background: #1e90ff33;
	color: #fff;
	box-shadow: 0 4px 16px #1e90ff33;
}
.topnav-box .nav-icon {
	width: 22px;
	height: 22px;
	margin-right: 2px;
	border-radius: 4px;
}
/* Sticky Home Title and Image */
.home-sticky-header {
	position: sticky;
	top: 60px;
	z-index: 10;
	background: #0a0a0aee;
	padding-top: 12px;
	padding-bottom: 12px;
	box-shadow: 0 2px 24px #1e90ff22;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.home-sticky-header .title {
	margin-bottom: 8px;
}
.home-sticky-header .main-home-img-wrapper {
	margin-bottom: 0;
}
.main-home-img-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
}
/* Main Home Image Pulsate Effect */
.main-home-img-wrapper {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 28px;
}
.main-home-img {
	width: 100%;
	max-width: 380px;
	border-radius: 12px;
	display: block;
	position: relative;
	z-index: 1;
}

@keyframes main-img-pulse {
	0%, 100% {
		opacity: 0.7;
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.13);
	}
}
/* Main Home Image */
/* Home Page Styles */
.home-welcome {
	text-align: center;
	margin-top: 0;
	background: none;
	padding-top: 0;
	padding-bottom: 0;
	box-shadow: none;
	margin-bottom: 24px;
}
.home-welcome .title {
	font-size: 2.8em;
	color: #1e90ff;
	margin-bottom: 10px;
	font-weight: 900;
	letter-spacing: 2px;
	text-shadow: 0 0 12px #76c7ff99, 0 2px 8px #222;
	text-transform: uppercase;
}
.home-welcome .subtitle {
	font-size: 1.2em;
	color: #aaa;
	margin-bottom: 30px;
}
.home-features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	justify-content: center;
	justify-items: center;
	align-items: flex-start;
	margin: 32px 0 0 0;
	margin-bottom: 40px;
}
@media (max-width: 1200px) {
	.home-features {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 24px;
		justify-content: center;
		justify-items: center;
		align-items: flex-start;
		margin: 32px 0 0 0;
	}
}
@media (max-width: 800px) {
	.home-features {
		grid-template-columns: 1fr;
		justify-items: center;
		width: 100vw;
		margin-left: 0;
		margin-right: 0;
	}
	.feature-card {
		width: 96vw !important;
		max-width: 420px !important;
		min-width: 220px;
		min-height: 180px;
		margin: 0 auto 18px auto;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-left-width: 3px;
	}
	.feature-icon {
		width: 38px;
		height: 38px;
		margin-bottom: 8px;
	}
	.feature-card h2 {
		font-size: 1em;
	}
	.feature-card p {
		font-size: 0.95em;
	}
}
.feature-card {
	background: rgba(34, 43, 51, 0.82) !important;
	border-left: 4px solid #76c7ff;
	border-radius: 12px;
	box-shadow: 0 0 24px #1e90ff33, 0 0 0 #76c7ff;
	padding: 28px 18px 24px 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	position: relative;
	overflow: hidden;
	transition: box-shadow 0.3s, border-color 0.3s;
}

.feature-card::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 16px;
	background: linear-gradient(120deg, #1e90ff55, #76c7ff33, #1e90ff55, #1e90ff55);
	background-size: 200% 200%;
	background-position: 0% 50%;
	filter: blur(16px);
	opacity: 0.5;
	z-index: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	animation: flourish-move 3.5s linear infinite;
}

@keyframes flourish-move {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.feature-card:hover {
	box-shadow: 0 0 32px #1e90ff88, 0 0 0 #76c7ff;
	border-left: 4px solid #1e90ff;
}

.feature-card.move-on-click {
	animation: cardMove 0.5s cubic-bezier(.68,-0.55,.27,1.55);
}

@keyframes cardMove {
	0% { transform: scale(1) translateY(0); }
	30% { transform: scale(1.08) translateY(-10px); }
	60% { transform: scale(0.97) translateY(6px); }
	100% { transform: scale(1) translateY(0); }
}
.feature-card:hover::before {
	opacity: 0.9;
}

.feature-card > * {
	position: relative;
	z-index: 1;
}
.feature-icon {
	width: 54px;
	height: 54px;
	margin-bottom: 12px;
	width: 44px;
	height: 44px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.feature-card h2 {
	margin: 0 0 8px 0;
	color: #76c7ff;
	font-size: 1.15em;
}
.feature-card p {
	color: #ccc;
	font-size: 1em;
	margin-bottom: 14px;
}
.feature-link {
	color: #76c7ff;
	text-decoration: none;
	font-size: 1em;
	background: #222;
	padding: 6px 18px;
	border-radius: 4px;
	transition: background 0.2s;
	font-weight: 500;
}
.feature-link:hover {
	background: #1e90ff33;
}
/* Weekly Trials Grid */
.weekly-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	padding: 20px 10px 20px 10px;
}

@media (max-width: 1200px) {
	.weekly-grid {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

@media (max-width: 800px) {
	.weekly-grid {
		grid-template-columns: 1fr;
	}
}

.weekly-card {
	background: #181a1b;
	border-left: 4px solid #76c7ff;
	border-radius: 8px;
	box-shadow: 0 0 12px rgba(30, 144, 255, 0.15);
	padding: 12px 10px 12px 16px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	max-width: 380px;
	height: auto;
}

.weekly-card.has-guide {
	grid-column: 1 / -1;
	max-width: none;
	width: 100%;
}

.weekly-card.has-guide .weekly-guide {
	max-width: 980px;
	margin: 0 auto;
	width: 100%;
}

.weekly-card.has-guide .guide-description,
.weekly-card.has-guide .guide-section,
.weekly-card.has-guide .weekly-img {
	max-width: 980px;
	width: 100%;
}

.weekly-card.has-guide .guide-section h3,
.weekly-card.has-guide .loadout-list,
.weekly-card.has-guide .strategy-list {
	max-width: 980px;
}

.weekly-header {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 10px;
}

.weekly-img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
	width: 54px;
	height: 54px;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	transform-origin: center center;
}

@media (hover: hover) {
	.weekly-card:not(.has-guide):hover .weekly-img {
		transform: scale(1.08);
		box-shadow: 0 10px 22px rgba(30, 144, 255, 0.24);
	}
}

.weekly-info h2 {
	margin: 0 0 4px 0;
	color: #76c7ff;
	font-size: 1.15em;
}

.status {
	font-size: 0.95em;
	padding: 2px 8px;
	border-radius: 4px;
	margin-left: 2px;
	background: #222;
	color: #aaa;
	font-weight: 500;
}
.status.active {
	background: #1eff8e22;
	color: #1eff8e;
}
.status.upcoming {
	background: #1e90ff22;
	color: #76c7ff;
}
.status.inactive {
	background: #222;
	color: #888;
}

.weekly-links {
	display: flex;
	gap: 10px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}
.guide-link, .video-link, .db-link {
	color: #76c7ff;
	text-decoration: none;
	font-size: 0.98em;
	background: #222;
	padding: 3px 10px;
	border-radius: 4px;
	transition: background 0.2s;
}
.guide-link:hover, .video-link:hover, .db-link:hover {
	background: #1e90ff33;
}
.db-icon {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	margin-right: 3px;
	border-radius: 3px;
}
.weekly-updated {
	font-size: 0.95em;
	color: #b3e0ff;
	margin-top: 4px;
	margin-bottom: 2px;
}

/* Weekly Trial Guide Styling */
.weekly-card.has-guide .weekly-header {
	cursor: pointer;
	user-select: none;
}

.expand-indicator {
	margin-left: auto;
	transition: transform 0.3s ease;
	display: inline-block;
	font-size: 1.2em;
	color: #76c7ff;
}

.weekly-guide {
	width: 100%;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #1e90ff44;
	animation: slideDown 0.3s ease;
	overflow: visible;
	height: auto;
	max-height: none;
}

@keyframes slideDown {
	from {
		opacity: 0;
		max-height: 0;
	}
	to {
		opacity: 1;
		max-height: 1000px;
	}
}

.guide-description {
	color: #d0d8e0;
	font-size: 0.95em;
	line-height: 1.6;
	margin-bottom: 12px;
	white-space: pre-wrap;
	word-wrap: break-word;
}
.weekly-guide {
	width: 100%;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #1e90ff44;
	animation: slideDown 0.3s ease;
	overflow: visible;
	height: auto;
	max-height: none;
}

@keyframes slideDown {
	from {
		opacity: 0;
		max-height: 0;
		overflow: hidden;
	}
	to {
		opacity: 1;
		max-height: 2000px;
		overflow: visible;
	}
}

.guide-description {
	color: #d0d8e0;
	font-size: 0.95em;
	line-height: 1.6;
	margin-bottom: 12px;
	white-space: pre-wrap;
	word-wrap: break-word;
	word-break: break-word;
	overflow-wrap: break-word;
	width: 100%;
}

.weekly-card {
	height: auto !important;
	overflow: visible !important;
	max-height: none !important;
}

.weekly-card .weekly-guide {
	overflow: visible !important;
	height: auto !important;
	max-height: none !important;
}

.weekly-card.has-guide .weekly-guide img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: cover;
	border-radius: 8px;
	margin-top: 12px;
}

.weekly-image-zoom {
	max-width: 980px;
	width: 100%;
	margin-top: 12px;
}

.weekly-image-frame {
	width: 100%;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid #1e90ff33;
	background: #11161c;
	cursor: default;
	touch-action: none;
}

.weekly-image-frame.is-zoomed {
	cursor: grab;
}

.weekly-image-frame.is-dragging {
	cursor: grabbing;
}

.weekly-guide-img {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 0 !important;
	transform-origin: center center;
}

.weekly-image-controls {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

.zoom-btn {
	width: 34px;
	height: 34px;
	border: 1px solid #1e90ff55;
	border-radius: 999px;
	background: #16212c;
	color: #bfe3ff;
	font-size: 1.1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.zoom-reset-btn {
	height: 34px;
	padding: 0 12px;
	border: 1px solid #1e90ff55;
	border-radius: 999px;
	background: #16212c;
	color: #bfe3ff;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.zoom-btn:hover,
.zoom-reset-btn:hover {
	background: #1e90ff33;
	transform: scale(1.06);
}

.zoom-level {
	min-width: 56px;
	text-align: center;
	font-size: 0.9rem;
	color: #b3e0ff;
}
.guide-section {
	margin-bottom: 12px;
}

.guide-section h3 {
	color: #76c7ff;
	font-size: 1em;
	margin: 0 0 8px 0;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.loadout-list,
.strategy-list {
	color: #b3d9ff;
	font-size: 0.9em;
	margin: 0;
	padding: 0 0 0 20px;
	line-height: 1.5;
}

.loadout-list li,
.strategy-list li {
	margin-bottom: 6px;
}

.strategy-list {
	padding: 0 0 0 20px;
	list-style: none;
}

.strategy-list li {
	margin-bottom: 8px;
}

/* Embed Card Grid */
.embed-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding: 20px 10px 20px 60px;
}

@media (max-width: 1200px) {
	.embed-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 800px) {
	.embed-grid {
		grid-template-columns: 1fr;
	}
	.embed-card-icon {
		margin-left: -32px !important;
	}
}
/* End of @media (max-width: 800px) block */

.embed-card {
	background: rgba(17,17,17,0.82) !important;
	border-left: 4px solid #1e90ff;
	padding: 24px 18px 24px 32px;
	border-radius: 6px;
	box-shadow: 0 0 12px rgba(30, 144, 255, 0.2);
}

.embed-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

@media (max-width: 800px) {
	.embed-card-header {
		gap: 4px;
		justify-content: flex-start;
	}
	.embed-card-icon {
		margin-left: 6px !important;
	}
}

.embed-card-header h3 {
	margin: 0;
	color: #76c7ff;
	font-size: 1.2em;
}

.embed-card-icon {
	width: 28px;
	height: 28px;
	opacity: 0.9;
	margin-left: -10px;
}

.embed-list {
	margin-left: 10px;
	line-height: 1.5;
	display: flex;
	flex-direction: row;
	gap: 16px;
	flex-wrap: wrap;
	align-items: center;
}
body {
	background: #0a0a0a;
	color: #e0e0e0;
	font-family: Arial, sans-serif;
	margin: 0;
}


.sidebar.hidden {
	left: -240px;
	width: 0;
	padding: 0;
	overflow: hidden;
}

.sidebar-toggle {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 1001;
	background: #222;
	color: #76c7ff;
	border: none;
	border-radius: 4px;
	padding: 8px 12px;
	font-size: 1.5em;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(30,144,255,0.15);
	transition: background 0.2s;
}
.sidebar-toggle.show {
	left: 10px;
}

.sidebar h2 {
	color: #76c7ff;
	margin-top: 0;
	margin-bottom: 1.5em;
	font-size: 1.5em;
	text-align: center;
}

.sidebar a {
	display: block;
	color: #ccc;
	padding: 10px 0;
	text-decoration: none;
	transition: color 0.2s;
}
.sidebar a:hover {
	color: #76c7ff;
}

.content {
	margin-left: 240px;
	padding: 140px 20px 20px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: margin-left 0.3s;
}

.sidebar.hidden ~ .content {
    margin-left: 0 !important;
}
.topbar {
	position: fixed;
	top: 0;
	left: 240px;
	right: 0;
	height: 50px;
	background: #0f0f0f;
	border-bottom: 1px solid #222;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	z-index: 1000;
}
.topbar-left .uplink-title {
	color: #76c7ff;
	font-size: 1.3em;
	letter-spacing: 1px;
}
.topbar-right {
	display: flex;
	align-items: center;
	gap: 8px;
}
.status-dot {
	width: 10px;
	height: 10px;
	background: #1eff8e;
	border-radius: 50%;
	box-shadow: 0 0 8px #1eff8e;
	width: 28px;
	height: 28px;
	color: #aaa;
	font-size: 0.9em;
}
.topbar::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, #1e90ff, #76c7ff, #1e90ff);
	opacity: 0.3;
}
.content {
	margin-left: 280px;
	padding: 140px 30px 30px 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: margin-left 0.3s, padding 0.3s;
}
.sidebar.hidden ~ .content {
	margin-left: 0 !important;
}

.title {
	text-align: center;
	margin-top: 20px;
	/* Removed fixed positioning to avoid conflict with sticky headers */
	background: none;
	border-radius: 8px;
	box-shadow: none;
	transition: 0.2s;
	width: 100%;
	max-width: 1200px;
}
.event-card:hover {
	box-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
	transform: translateY(-3px);
	/* Remove old event-card style, use modern shimmer */
}

@media (max-width: 800px) {
	.sidebar {
		width: 180px;
	}
	.content {
		margin-left: 0;
		padding-left: 0;
		padding-right: 0;
	}
	/* Make active events full width, upcoming events thinner */
	.active-events-section .embed-card {
		width: 98vw;
		max-width: 99vw;
	}
	.upcoming-events-section .embed-card {
		width: 90vw;
		max-width: 92vw;
	}
	/* Home page: make all feature-cards the same size (thinner) */
	.home-features-section .feature-card {
		width: auto;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}
	.home-welcome, .home-features-section {
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.home-welcome .title, .home-welcome .subtitle {
		text-align: center;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.events-container {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 16px !important;
		width: 100vw !important;
		padding-bottom: 12px;
		overflow-x: unset !important;
	}
	.events-container .event-card {
		width: 98vw !important;
		max-width: 99vw !important;
		min-width: 0 !important;
		flex: 1 1 auto !important;
	}
}
.event-card {
	background: linear-gradient(135deg, rgba(24,26,27,0.82) 70%, rgba(35,39,46,0.82) 100%) !important;
	border: 1.5px solid #1e90ff55;
	padding: 24px 18px 18px 18px;
	width: 340px;
	height: 440px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	border-radius: 14px;
	color: #e0e6ed;
	font-size: 1.05em;
	position: relative;
	overflow-y: auto;
}
	/* Blue shimmer effect for all cards */
	.event-card,
	.weekly-card,
	.enemy-card,
	.trader-card,
	.blueprint-card,
	.weapon-card,
	.feature-card,
	.embed-card {
		position: relative;
		background: linear-gradient(135deg, rgba(24,26,27,0.82) 70%, rgba(35,39,46,0.82) 100%) !important;
		border: 1.5px solid #1e90ff55;
		padding: 24px 18px 18px 18px;
		width: 340px;
		min-width: 220px;
		max-width: 340px;
		height: 440px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		border-radius: 14px;
		color: #e0e6ed;
		font-size: 1.05em;
		overflow-y: auto;
		box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	}
	.event-card::before,
	.weekly-card::before,
	.enemy-card::before,
	.event-card::before,
	.weekly-card::before,
	.enemy-card::before,
	.trader-card::before,
	.blueprint-card::before,
	.weapon-card::before,
	.feature-card::before,
	.embed-card::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(120deg, #1e90ff 0%, #76c7ff 40%, #222 100%);
		opacity: 0.18;
		z-index: 1;
		pointer-events: none;
		/* No animation, shimmer is static */
	}

.event-card h2 {
	margin-top: 0;
	color: #76c7ff;
	font-size: 1.3em;
	margin-bottom: 10px;
	letter-spacing: 0.5px;
	text-shadow: 0 2px 8px #1e90ff22;
}
	.event-card h2,
	.weekly-card h2,
	.enemy-card h2,
	.trader-card h2,
	.blueprint-card h2,
	.weapon-card h2,
	.feature-card h2,
	.embed-card h2 {
		margin-top: 0;
		color: #76c7ff;
		font-size: 1.3em;
		margin-bottom: 10px;
		letter-spacing: 0.5px;
		text-shadow: 0 2px 8px #1e90ff22;
		z-index: 2;
	}

.event-icon {
	width: 44px;
	height: 44px;
	display: block;
	opacity: 0.92;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 8px;
}
	.event-card img,
	.weekly-card img,
	.enemy-card img,
	.trader-card img,
	.blueprint-card img,
	.weapon-card img,
	.feature-card img,
	.embed-card img {
		width: 220px;
		height: 220px;
		object-fit: cover;
		border-radius: 8px;
		margin-bottom: 1em;
		box-shadow: 0 2px 8px #0006;
		z-index: 2;
	}
/* No shimmer animation, static gradient */

@media (max-width: 800px) {
    .event-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left: 18px !important;
        padding-right: 18px !important;
        overflow: visible !important;
        border-left: none !important;
        width: 98vw !important;
        max-width: 99vw !important;
        box-sizing: border-box;
    }
    .event-card p, .event-card ul, .event-card li {
        margin-left: 8px;
    }
    .event-icon {
        width: 48px;
        height: 48px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 8px;
        float: none;
    }
    .event-card h2 {
        text-align: center;
    }
    .weekly-card, .feature-card, .event-card, .enemy-card, .blueprint-card, .weapon-card, .trader-card, .embed-card {
        background: rgba(34,34,34,0.85) !important;
    }
    .content {
        padding: 0;
        border-radius: 0;
        margin: 0;
        width: 100vw !important;
        max-width: 100vw !important;
    }
	.event-card,
	.feature-card,
	.blueprint-card,
	.enemy-card,
	.weapon-card,
	.trader-card,
	.embed-card,
	.weekly-card {
		width: 99vw !important;
		max-width: 99vw !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}
}
/* <-- All blocks properly closed */

	/* Traders index + detail pages */
	.traders-grid {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 14px;
		margin-top: 24px;
		width: 100%;
		align-items: stretch;
	}

	.trader-summary-card {
		background: linear-gradient(135deg, rgba(24,26,27,0.82) 70%, rgba(35,39,46,0.82) 100%);
		border: 1.5px solid #1e90ff55;
		border-radius: 12px;
		padding: 16px;
		text-decoration: none;
		color: #e0e6ed;
		display: block;
		min-width: 0;
		height: 100%;
	}

	.trader-summary-card:hover {
		transform: translateY(-2px);
		border-color: #76c7ff;
	}

	.trader-summary-card img {
		width: 100%;
		height: 140px;
		object-fit: cover;
		border-radius: 8px;
		margin-bottom: 10px;
	}

	.trader-summary-card h2 {
		font-size: 1.1rem;
		margin: 0 0 6px 0;
		color: #76c7ff;
	}

	.trader-summary-card p {
		margin: 0 0 10px 0;
		color: #c6d2df;
	}

	.ermal-meta {
		font-size: 0.82rem;
		color: #a8b4c2;
	}

	.trader-summary-link {
		color: #ffd700;
		font-weight: 600;
	}

	.rarity-badges {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin: 8px 0 12px;
	}

	.rarity-chip {
		display: inline-block;
		padding: 3px 8px;
		border-radius: 999px;
		font-size: 0.76rem;
		line-height: 1.1;
		border: 1px solid #4a5a6a;
		background: #1f2a36;
		color: #dce8f5;
	}

	.rarity-chip-common {
		background: #3a3f46;
		border-color: #59626d;
	}

	.rarity-chip-uncommon {
		background: #1f4f2a;
		border-color: #34a853;
	}

	.rarity-chip-rare {
		background: #15345b;
		border-color: #3b82f6;
	}

	.rarity-chip-epic {
		background: #4a2162;
		border-color: #a855f7;
	}

	.rarity-chip-legendary,
	.rarity-chip-exotic,
	.rarity-chip-mythic {
		background: #5a4313;
		border-color: #f59e0b;
	}

	.trader-detail-header {
		display: flex;
		gap: 18px;
		align-items: center;
		margin: 12px 0 20px;
	}

	.trader-detail-header img {
		width: 180px;
		height: 120px;
		object-fit: cover;
		border-radius: 10px;
		box-shadow: 0 2px 8px #0006;
	}

	.trader-items-grid {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 16px;
	}

	.trader-item-card {
		background: rgba(24,26,27,0.88);
		border: 1px solid #1e90ff44;
		border-radius: 10px;
		padding: 14px;
	}

	.trader-item-top {
		display: flex;
		gap: 10px;
		align-items: center;
		margin-bottom: 10px;
	}

	.trader-item-top img {
		width: 52px;
		height: 52px;
		object-fit: contain;
		background: #111;
		border-radius: 8px;
		padding: 4px;
	}

	.trader-item-top h3 {
		margin: 0;
		font-size: 1rem;
	}

	.trader-item-card .rarity {
		margin: 2px 0 0 0;
		color: #ffd700;
		font-size: 0.9rem;
	}

	.trader-item-card p {
		margin: 6px 0;
	}

	.trader-item-card .description {
		color: #c6d2df;
	}

	.back-link {
		color: #76c7ff;
		text-decoration: none;
	}

	.back-link:hover {
		text-decoration: underline;
	}

	.error-message {
		color: #ff7675;
		font-weight: 600;
	}

	@media (max-width: 1200px) {
		.traders-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.trader-items-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	@media (max-width: 700px) {
		.traders-grid {
			grid-template-columns: repeat(1, minmax(0, 1fr));
		}

		.trader-items-grid {
			grid-template-columns: repeat(1, minmax(0, 1fr));
		}

		.trader-detail-header {
			flex-direction: column;
			align-items: flex-start;
		}

		.trader-detail-header img {
			width: 100%;
			height: auto;
		}
	}