/* Responsive layer for the legacy three-column template. Desktop rules remain
   untouched; this file only takes over when the viewport no longer fits them. */

html,
body {
	max-width: 100%;
}

img,
iframe,
video {
	max-width: 100%;
}

/* High-contrast text on the dark blue legacy tables (shop, characters, etc.). */
.main_content .offer_table td,
.main_content tr[bgcolor="#053e7a"] > td,
.main_content tr[bgcolor="#062b56"] > td {
	color: #eefaff !important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
}

.main_content .offer_table td a,
.main_content tr[bgcolor="#053e7a"] > td a,
.main_content tr[bgcolor="#062b56"] > td a {
	color: #6fe4ff;
}

/* Minimal ninja-style section bars replace the glossy legacy image strip. */
.main_content tr[background*="bg1_06.png"] {
	background: linear-gradient(90deg, #071a28, #0b4f69 50%, #071a28) !important;
}

.main_content tr[background*="bg1_06.png"] > td {
	padding-top: 7px;
	padding-bottom: 7px;
	border-top: 1px solid rgba(67, 211, 246, .55);
	border-bottom: 1px solid rgba(67, 211, 246, .3);
	color: #edfaff !important;
	letter-spacing: .35px;
	text-shadow: 0 1px 2px #000;
}

.main_content tr[background*="bg1_06.png"] h3 {
	color: #edfaff !important;
}

.main_content td[background*="bg1_06.png"] {
	padding-top: 7px;
	padding-bottom: 7px;
	border-top: 1px solid rgba(67, 211, 246, .55);
	border-bottom: 1px solid rgba(67, 211, 246, .3);
	background: linear-gradient(90deg, #071a28, #0b4f69 50%, #071a28) !important;
	color: #edfaff !important;
	letter-spacing: .35px;
	text-shadow: 0 1px 2px #000;
}

.main_content tr[background*="bg1_06.png"] a,
.main_content td[background*="bg1_06.png"] a {
	color: #83e9ff !important;
}

.main_content table[bgcolor="#258cfa"],
.main_content table[bgcolor="258cfa"],
.main_content table[bgcolor="#FFA500"] {
	border: 1px solid rgba(48, 172, 215, .35);
	border-collapse: separate;
	border-spacing: 1px;
	background: rgba(4, 31, 47, .96) !important;
}

.main_content tr[bgcolor="#F0E68C"] > td,
.main_content tr[bgcolor="#F4A460"] > td {
	border-bottom: 1px solid rgba(44, 151, 190, .2);
	background: linear-gradient(135deg, rgba(8, 58, 82, .96), rgba(5, 39, 60, .96)) !important;
	color: #dff5ff !important;
}

.main_content tr[bgcolor="#F0E68C"] a,
.main_content tr[bgcolor="#F4A460"] a {
	color: #62dcff !important;
}

.main_content form table input[type="text"] {
	border: 1px solid rgba(65, 183, 224, .55);
	border-radius: 5px;
	background: rgba(3, 24, 38, .92);
	color: #eefaff;
}

/* Compact server-status card; state and server logic remain unchanged. */
#box4 .entry {
	display: flex;
	position: relative;
	left: 0;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	min-height: 82px;
	border: 1px solid rgba(61, 199, 235, .45);
	border-radius: 0 0 8px 8px;
	background: linear-gradient(145deg, rgba(5, 42, 62, .98), rgba(4, 20, 32, .98)) !important;
	box-shadow: inset 0 1px rgba(116, 224, 255, .08), 0 5px 12px rgba(0, 0, 0, .28);
	overflow: hidden;
}

#box4 .entry center {
	position: static !important;
	left: auto !important;
	top: auto !important;
	width: 100%;
	padding: 12px 6px;
	box-sizing: border-box;
	line-height: 1.45;
}

#box4 .entry font[color="red"] {
	position: static !important;
	left: auto !important;
	top: auto !important;
	color: #ff6675 !important;
	font-size: 13px;
	letter-spacing: .3px;
	text-shadow: 0 0 8px rgba(255, 69, 87, .28);
}

#box4 .entry:has(font[color="red"])::before {
	content: "";
	width: 7px;
	height: 7px;
	margin-right: -1px;
	border-radius: 50%;
	background: #ff5263;
	box-shadow: 0 0 8px rgba(255, 82, 99, .65);
	flex: 0 0 7px;
}

/* Consistent action buttons across login, recovery and account forms. */
.main_content .btn-group {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.main_content .btn-group input[type="submit"],
.main_content .btn-group input[type="button"],
.main_content .btn-group button {
	width: 100%;
	min-width: 0;
	min-height: 36px;
	margin: 0;
	padding: 7px 12px;
	box-sizing: border-box;
	border: 1px solid #168fbb;
	border-radius: 7px;
	background: linear-gradient(180deg, #159bc5, #086387) !important;
	box-shadow: inset 0 1px rgba(255, 255, 255, .2), 0 3px 7px rgba(0, 0, 0, .25);
	color: #f4fcff !important;
	font-weight: 700;
	cursor: pointer;
}

.main_content .btn-group input[type="submit"]:hover,
.main_content .btn-group input[type="button"]:hover,
.main_content .btn-group button:hover {
	border-color: #52d8ff;
	background: linear-gradient(180deg, #21b6df, #08779e) !important;
}

@media (max-width: 900px) {
	html,
	body {
		height: auto;
		overflow-x: hidden;
	}

	.container,
	#bar .container {
		width: 100%;
		max-width: none;
		margin-right: 0;
		margin-left: 0;
	}

	#bg2 {
		background-size: 100% auto;
	}

	#header {
		height: 56.25vw;
		min-height: 190px;
		max-height: 506px;
	}

	#logo,
	#topmenu {
		float: none;
		max-width: 100%;
	}

	#logo {
		display: none;
	}

	#menu ul.container {
		display: flex;
		position: static;
		align-items: stretch;
		justify-content: center;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 8px;
		background: rgba(3, 24, 38, .94);
		box-sizing: border-box;
		flex-wrap: wrap;
		gap: 6px;
	}

	#menu li,
	#menu li.first {
		display: block;
		padding: 0;
		border: 0;
	}

	#menu a {
		display: block;
		padding: 9px 11px;
		border: 1px solid rgba(56, 185, 230, .45);
		border-radius: 6px;
		background: rgba(7, 77, 111, .72);
		white-space: nowrap;
	}

	#bar .container {
		top: 0;
		height: 42px;
		background-position: center;
		background-size: 100% 100%;
	}

	#bg3 {
		top: 0;
	}

	#page {
		display: flex;
		align-items: flex-start;
		column-gap: clamp(2px, .8vw, 8px);
		width: 100%;
		padding: 8px;
		box-sizing: border-box;
		background-color: rgba(4, 29, 45, .96);
		background-image: none;
		flex-direction: row;
	}

	#content,
	#sidebar,
	#sidebar2,
	#sidebar3 {
		float: none;
		width: 100%;
		max-width: none;
		padding: 0;
		box-sizing: border-box;
	}

	#content {
		display: flex;
		align-items: flex-start;
		column-gap: clamp(2px, .8vw, 8px);
		order: 2;
		flex: 1 1 70%;
		width: auto;
		min-width: 0;
		flex-direction: row;
	}

	#sidebar2 {
		flex: 1 1 57.15%;
		width: auto;
		min-width: 0;
		order: 1;
	}

	#sidebar3 {
		align-self: flex-start;
		flex: 0 1 42.85%;
		order: 2;
		width: auto !important;
		min-width: 0;
		max-width: none;
		margin-top: 0;
		padding-left: 0;
	}

	#sidebar {
		align-self: flex-start;
		flex: 0 1 30%;
		order: 1;
		width: auto !important;
		min-width: 0;
		max-width: none;
		margin-top: 0;
		padding-right: 0;
	}

	#page > div[style*="clear: both"] {
		display: none;
	}

	#sidebar3 .menu-box-esquerda,
	#sidebar .menu-container,
	#sidebar .box-style2,
	#sidebar .menu-box-direita {
		width: 100% !important;
		max-width: none !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	#sidebar,
	#sidebar *,
	#sidebar3,
	#sidebar3 * {
		box-sizing: border-box;
	}

	#sidebar .menu-link.custom-button {
		width: calc(100% - 8px) !important;
		max-width: 170px;
		margin-right: 4px !important;
		margin-left: 4px !important;
		padding-right: 5px !important;
		padding-left: 5px !important;
		white-space: normal;
	}

	.box-style2 .title,
	.box-style4 .title {
		left: 0;
		width: 100%;
		box-sizing: border-box;
		background-position: center;
		background-size: 100% 100%;
	}

	#sidebar .title,
	#sidebar3 .title {
		height: auto;
		min-height: 25px;
		padding: 6px 2px 3px;
		font-size: clamp(7px, 2.3vw, 14px);
		line-height: 1.15;
		letter-spacing: 0;
	}

	#sidebar3 .search-box {
		width: calc(100% - 8px);
		max-width: 198px;
		height: 28px;
		padding: 3px;
	}

	#sidebar3 .search-txt,
	#sidebar3 .search-box:hover > form .search-txt {
		width: calc(100% - 24px);
		height: 20px;
		padding: 0 2px;
		font-size: clamp(7px, 2vw, 11px);
		line-height: 20px;
	}

	#sidebar3 .search-btn {
		width: 20px;
		height: 20px;
	}

	#box15 {
		margin-bottom: 14px !important;
		padding-bottom: 4px;
	}

	.highscores-skill-nav {
		gap: 2px;
	}

	.highscores-skill-link {
		grid-template-rows: minmax(22px, 7vw) minmax(18px, auto);
		padding: 2px 1px;
		border-radius: 4px;
	}

	.highscores-skill-icon {
		width: min(26px, 6vw);
		height: min(26px, 6vw);
	}

	.highscores-skill-icon img {
		width: 100%;
		height: 100%;
	}

	.highscores-skill-link strong {
		padding: 2px 0;
		font-size: clamp(4px, 1.3vw, 8px);
	}

	#sidebar .menu-link.custom-button {
		min-height: 24px;
		padding: 3px 2px !important;
		font-size: clamp(7px, 2vw, 11px) !important;
		line-height: 1.15;
	}

	#sidebar3 .entry,
	#sidebar3 td,
	#sidebar3 a {
		font-size: clamp(7px, 2vw, 10px) !important;
	}

	#sidebar3 .server-status-content {
		gap: 3px;
		padding: 8px 2px;
		font-size: clamp(7px, 2vw, 10px);
	}

	#sidebar3 .server-status-content .status-dot {
		width: 5px;
		height: 5px;
		flex-basis: 5px;
	}

	#sidebar3 .server-save-box > span {
		padding: 5px 1px 2px;
		font-size: clamp(7px, 2vw, 10px) !important;
	}

	#sidebar3 .ranking-card,
	#sidebar3 .top-guild-card {
		width: 100%;
		gap: 3px;
		padding: 3px 2px;
	}

	#sidebar3 .ranking-box,
	#sidebar3 .top-guild-list {
		gap: 3px;
		padding: 3px 2px 5px;
	}

	#sidebar3 .ranking-card img,
	#sidebar3 .top-guild-card img {
		width: clamp(22px, 7vw, 38px);
		height: clamp(22px, 7vw, 38px);
		border-width: 1px;
	}

	#sidebar3 .ranking-card img { padding: 1px; border-radius: 4px; }

	#sidebar3 .ranking-card strong,
	#sidebar3 .top-guild-card strong,
	#sidebar3 .ranking-card small,
	#sidebar3 .top-guild-card small {
		font-size: clamp(6px, 1.85vw, 9px);
		line-height: 1.15;
	}

	#sidebar3 .ranking-card small,
	#sidebar3 .top-guild-card small {
		margin-top: 2px;
	}

	.box-style2 .title ul,
	.box-style4 .title ul {
		padding-left: 0;
	}

	.box-style2 td {
		padding-left: 0;
	}

	.main_content {
		min-width: 0;
		padding-right: 10px;
		padding-left: 10px;
	}

	.main_content table {
		max-width: 100%;
	}

	.main_content > table,
	.main_content > form > table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.main_content input,
	.main_content select,
	.main_content textarea {
		max-width: 100%;
		box-sizing: border-box;
	}

	.download-card,
	#my-account-manage,
	.login-container,
	.container-criar-conta {
		width: auto;
		max-width: 100%;
		margin-right: auto;
		margin-left: auto;
		box-sizing: border-box;
	}

	.welcome-panel {
		align-items: stretch;
		flex-direction: column;
	}

	/* The center column is intentionally narrow on mobile; scale its feature
	   panels to the same visual density as the two sidebars. */
	#sidebar2 .box-style3 > .title {
		height: auto;
		min-height: 25px;
		padding: 6px 3px 3px;
		font-size: clamp(8px, 2.5vw, 14px);
		line-height: 1.15;
		letter-spacing: 0;
	}

	#sidebar2 .main_content {
		min-height: 0;
		margin: 0 1px 5px;
		padding: 5px 4px 7px;
		font-size: clamp(7px, 2vw, 10px);
	}

	#sidebar2 .character-profile-hero { gap: 4px; margin-bottom: 5px; padding: 4px; border-radius: 5px; }
	#sidebar2 .character-profile-hero img { width: clamp(42px, 12vw, 68px); height: clamp(42px, 12vw, 68px); flex-basis: clamp(42px, 12vw, 68px); }
	#sidebar2 .character-profile-hero small { font-size: clamp(6px, 1.6vw, 8px); }
	#sidebar2 .character-profile-hero strong { margin-top: 2px; font-size: clamp(7px, 2vw, 11px); }

	#sidebar2 .welcome-panel {
		gap: 4px;
		margin: 0 1px 5px;
		padding: 6px 5px !important;
		border-radius: 0 0 4px 4px;
	}

	#sidebar2 .welcome-panel strong {
		font-size: clamp(7px, 2.2vw, 10px);
		line-height: 1.2;
	}

	#sidebar2 .welcome-panel span {
		margin-top: 2px;
		font-size: clamp(6px, 1.8vw, 9px);
		line-height: 1.2;
	}

	#sidebar2 .welcome-cta {
		padding: 4px 3px;
		border-radius: 4px;
		font-size: clamp(7px, 2vw, 10px);
		line-height: 1.15;
		text-align: center;
	}

	#sidebar2 .NewsHeadlineBackground,
	#sidebar2 .NewsHeadlineBackground table {
		height: auto;
		min-height: 21px;
	}

	#sidebar2 .NewsHeadlineBackground td {
		padding: 3px 2px;
		font-size: clamp(7px, 2vw, 10px);
		line-height: 1.15;
	}

	#sidebar2 .powerful-guilds-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3px;
		margin-bottom: 6px;
		padding: 4px;
		border-radius: 0 0 4px 4px;
	}

	#sidebar2 .powerful-guild-card {
		display: flex;
		min-height: 0;
		padding: 3px 2px;
		flex-direction: column;
		gap: 2px;
	}

	#sidebar2 .powerful-guild-card img,
	#sidebar2 #most-powerful-guilds-table img {
		width: clamp(18px, 5vw, 30px) !important;
		height: clamp(18px, 5vw, 30px) !important;
		border-width: 1px;
	}

	#sidebar2 .powerful-guild-card strong,
	#sidebar2 .powerful-guild-card span,
	#sidebar2 #most-powerful-guilds-table td,
	#sidebar2 #most-powerful-guilds-table a {
		font-size: clamp(6px, 1.8vw, 9px);
		line-height: 1.15;
	}

	#sidebar2 #most-powerful-guilds-table {
		max-width: 100%;
		margin-top: 0;
	}

	#sidebar2 #most-powerful-guilds-table td {
		padding: 2px;
	}

	#float_discord_plugin {
		display: none;
	}

	#footer p.container {
		width: 100%;
		padding: 42px 12px;
		box-sizing: border-box;
		background-position: center top;
		background-size: 100% 100%;
	}
}

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

	#header {
		min-height: 170px;
	}

	#menu ul.container {
		justify-content: stretch;
	}

	#menu li {
		flex: 1 1 calc(50% - 6px);
	}

	#menu a {
		padding-right: 6px;
		padding-left: 6px;
		text-align: center;
	}

	#page {
		padding: 6px;
	}

	.main_content {
		margin-right: 0;
		margin-left: 0;
	}

	.box-style3 > .title {
		font-size: 16px;
	}

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

	.accordion-controls__button {
		width: 100%;
	}
}

/* NSL component scaling inside the intentionally compact 30/40/30 mobile grid. */
@media (max-width: 768px) {
	.nsl-home-hero { grid-template-columns: 1fr; min-height: 0; margin-bottom: 4px; padding: 7px 6px; border-radius: 5px; }
	.nsl-home-hero__seal,
	.nsl-home-hero__glow { display: none; }
	.nsl-home-hero h1 { margin: 5px 0 4px; font-size: clamp(10px, 3vw, 15px); line-height: 1.05; letter-spacing: -.5px; }
	.nsl-home-hero p { font-size: clamp(6px, 1.7vw, 8px); line-height: 1.3; }
	.nsl-eyebrow { gap: 3px; font-size: clamp(5px, 1.4vw, 7px); letter-spacing: .5px; }
	.nsl-eyebrow::before { width: 7px; height: 1px; }
	.nsl-home-hero__actions { gap: 3px; margin-top: 6px; }
	.nsl-button { min-height: 19px; padding: 0 5px; border-radius: 3px; font-size: clamp(5px, 1.5vw, 7px); }
	.nsl-button--primary span { font-size: 10px; }
	.nsl-home-stats { gap: 2px; margin-bottom: 7px; }
	.nsl-stat-card { gap: 2px; padding: 3px 2px; border-radius: 3px; }
	.nsl-stat-card > span { display: none; }
	.nsl-stat-card small { font-size: clamp(4px, 1.2vw, 6px); letter-spacing: 0; }
	.nsl-stat-card strong { margin-top: 1px; font-size: clamp(5px, 1.5vw, 7px); }
	.nsl-home-section-head { margin-bottom: 3px; }
	.nsl-home-section-head h3 { margin-top: 1px; font-size: clamp(7px, 2vw, 10px); }
	.nsl-home-section-head > a { font-size: clamp(5px, 1.3vw, 7px); }
	.nsl-home-events { gap: 2px; margin-bottom: 6px; }
	.nsl-home-event { grid-template-columns: 20px minmax(0,1fr); gap: 3px; min-height: 31px; padding: 2px 3px; border-left-width: 2px; border-radius: 3px; }
	.nsl-home-event > .fa-chevron-right,
	.nsl-event-countdown { display: none; }
	.nsl-home-event-date { min-height: 24px; }
	.nsl-home-event-date b { font-size: 9px; }
	.nsl-home-event-date span,
	.nsl-home-event-info small,
	.nsl-home-event-info span { font-size: clamp(4px, 1.15vw, 6px); }
	.nsl-home-event-info strong { margin: 1px 0; font-size: clamp(5px, 1.55vw, 8px); }
	.nsl-home-paths { gap: 2px; margin-bottom: 7px; }
	.nsl-home-paths a { display: block; min-height: 31px; padding: 3px; border-radius: 3px; }
	.nsl-home-paths a > i { width: 14px; height: 14px; margin-bottom: 2px; border-radius: 3px; font-size: 7px; }
	.nsl-home-paths strong { font-size: clamp(5px, 1.4vw, 7px); }
	.nsl-home-paths span,
	.nsl-home-paths a > b { display: none; }
	.nsl-news-heading { padding-top: 4px; }
	.nsl-page-hero { grid-template-columns: 1fr; gap: 4px; margin-bottom: 4px; padding: 5px; border-radius: 4px; }
	.nsl-page-hero h2 { margin: 2px 0; font-size: clamp(8px, 2.2vw, 11px); }
	.nsl-page-hero p,
	.nsl-next-event span { font-size: clamp(5px, 1.4vw, 7px); }
	.nsl-next-event { padding: 4px; border-radius: 3px; }
	.nsl-next-event small { font-size: 5px; }
	.nsl-next-event strong { margin: 1px 0; font-size: 7px; }
	.nsl-calendar-toolbar { display: block; margin-bottom: 5px; font-size: 5px; }
	.nsl-calendar-legend { display: none; }
	.nsl-event-timeline { gap: 2px; }
	.nsl-timeline-date { gap: 3px; margin-top: 3px; padding-bottom: 2px; }
	.nsl-timeline-date > span { width: 17px; height: 17px; border-radius: 3px; font-size: 8px; }
	.nsl-timeline-date b { font-size: 6px; }
	.nsl-timeline-date small { font-size: 5px; }
	.nsl-event-card { grid-template-columns: 38px 20px minmax(0,1fr); gap: 3px; padding: 4px 3px; border-left-width: 2px; border-radius: 3px; }
	.nsl-event-time { padding: 3px 3px 3px 0; }
	.nsl-event-time b { font-size: clamp(11px, 3.2vw, 15px); line-height: 1; }
	.nsl-event-time span { margin-top: 4px; font-size: clamp(6px, 1.8vw, 8px); line-height: 1.1; white-space: nowrap; }
	.nsl-event-icon { width: 19px; height: 19px; border-radius: 4px; font-size: 8px; }
	.nsl-event-body h3 { margin: 1px 0 2px; font-size: clamp(6px, 1.6vw, 8px); }
	.nsl-event-body p { font-size: clamp(5px, 1.3vw, 6px); line-height: 1.2; }
	.nsl-event-meta,
	.nsl-event-details { gap: 2px; font-size: 4px; }
}