/* ==========================================================================
   MysticQest – design system stylesheet
   DmN MuCMS template "MysticQest" · premium dark-fantasy MU Online
   Sections:
     0. Imports
     1. @font-face (self-hosted variable fonts)
     2. Design tokens (+ legacy --mq-* contract)
     3. Reset / base / utilities
     4. Shell (topbar, nav, hero, band, countdown, grid, footer)
     5. Cards (block, blockTitle, download, server, social, account, login)
     6. Buttons & forms
     7. Content (section heads, frames A/B/C, news, downloads, about, showcase,
        notices, pagination, lists, ranking selectors)
     8. Tables
     9. Modals / overlays / tooltip / jQuery UI
    10. Animations & reduced motion
   Media queries live in style-mobile.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Imports (modules.css last so it can rely on the tokens below)
   -------------------------------------------------------------------------- */
@import url("ui.css");
@import url("validation.css");
@import url("notice.css");
@import url("modules.css");

/* --------------------------------------------------------------------------
   1. @font-face – Cinzel (display) and Inter (body), variable woff2
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Cinzel";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/cinzel-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Cinzel";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/cinzel-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
	/* palette (design-spec) */
	--mq-bg-0: #05070d;
	--mq-bg-1: #0a0f1f;
	--mq-bg-2: #101a33;
	--mq-surface: rgba(10, 15, 31, 0.78);
	--mq-surface-2: rgba(16, 24, 48, 0.85);
	--mq-line: rgba(201, 162, 39, 0.18);
	--mq-line-strong: rgba(201, 162, 39, 0.45);
	--mq-gold: #C9A227;
	--mq-gold-light: #F2D06B;
	--mq-gold-deep: #8C6B1F;
	--mq-red: #C8102E;
	--mq-red-light: #FF4D5E;
	--mq-blue: #4FB3FF;
	--mq-green: #3DD27A;
	--mq-text: #E9E4D6;
	--mq-text-muted: #9DA1B4;
	--mq-text-dim: #6B7088;
	--mq-glow-gold: 0 0 24px rgba(201, 162, 39, .35);
	--mq-glow-red: 0 0 24px rgba(200, 16, 46, .35);
	--mq-shadow: 0 18px 40px rgba(0, 0, 0, .55);
	--mq-shadow-sm: 0 8px 20px rgba(0, 0, 0, .35);
	--mq-radius: 10px;
	--mq-radius-sm: 6px;

	/* typography */
	--mq-font-display: "Cinzel", "Trajan Pro", Georgia, serif;
	--mq-font-body: "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
	--mq-gold-gradient: linear-gradient(180deg, var(--mq-gold-light), var(--mq-gold-deep));
	--mq-btn-gradient: linear-gradient(180deg, #F2D06B 0%, #C9A227 55%, #A8842A 100%);
	--mq-red-gradient: linear-gradient(180deg, #E8324A 0%, #C8102E 55%, #8E0B20 100%);
	--mq-transition: 180ms ease;

	/* legacy contract read by custom views / plugins (rules, paypal, jewel bank…) */
	--mq-bg: var(--mq-bg-1);
	--mq-card: var(--mq-surface);
	--mq-card-2: var(--mq-surface-2);
	--mq-line-soft: rgba(201, 162, 39, 0.10);
	--mq-txt: var(--mq-text);
	--mq-dim: var(--mq-text-muted);
	--mq-gold-2: var(--mq-gold-light);
	--mq-gold-3: var(--mq-gold-deep);
	--mq-gold-soft: rgba(201, 162, 39, 0.14);
	--mq-on-gold: #1A1206;
	--mq-red-2: var(--mq-red-light);
	--mq-red-soft: rgba(200, 16, 46, 0.16);
	--mq-good: var(--mq-green);
	--mq-bad: var(--mq-red-light);
	--mq-r: var(--mq-radius);
	--mq-r-sm: var(--mq-radius-sm);
	--mq-nadpis: var(--mq-font-display);
	--mq-btn-gold: var(--mq-gold);
	--mq-btn-gold-2: var(--mq-gold-light);
}

/* --------------------------------------------------------------------------
   3. Reset / base / utilities
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;
	overflow-x: hidden;
	font-family: var(--mq-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--mq-text);
	background-color: var(--mq-bg-0);
	background-image:
		radial-gradient(ellipse 70% 40% at 50% -5%, rgba(200, 16, 46, .22), transparent 70%),
		linear-gradient(180deg, var(--mq-bg-1) 0%, var(--mq-bg-0) 60%, #03050a 100%);
	background-repeat: no-repeat;
	background-attachment: scroll;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* fixed vignette over everything */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 55%, rgba(3, 5, 12, .55) 100%);
}

body > * {
	position: relative;
	z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	font-family: var(--mq-font-display);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .04em;
	color: var(--mq-gold);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	h1, h2, h3, h4, h5, h6 {
		background: var(--mq-gold-gradient);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		text-shadow: none;
	}
}

h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4, h5, h6 { font-size: 14px; }

p {
	margin: 0 0 16px;
}

a {
	color: var(--mq-gold);
	text-decoration: none;
	transition: color var(--mq-transition), border-color var(--mq-transition), background-color var(--mq-transition), box-shadow var(--mq-transition), transform var(--mq-transition), opacity var(--mq-transition);
}
a:hover {
	color: var(--mq-gold-light);
}

img, svg, video {
	max-width: 100%;
	height: auto;
}
svg {
	height: auto;
}

ul, ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

strong, b {
	font-weight: 600;
}

small {
	font-size: 85%;
}

hr {
	border: 0;
	height: 1px;
	background: var(--mq-line);
	margin: 20px 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
table td, table th {
	padding: 8px 10px;
	vertical-align: middle;
}

:focus {
	outline: none;
}
:focus-visible {
	outline: 2px solid var(--mq-blue);
	outline-offset: 2px;
	border-radius: 3px;
}

::selection {
	background: rgba(201, 162, 39, .35);
	color: #fff;
}

::placeholder {
	color: var(--mq-text-dim);
	opacity: 1;
}

/* utilities */
.flex        { display: flex; flex-wrap: wrap; }
.flex-c      { display: flex; flex-wrap: wrap; align-items: center; }
.flex-s      { display: flex; flex-wrap: wrap; justify-content: space-between; }
.flex-c-c    { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.flex-s-c    { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.flex-c-s    { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
.clearfix::after { content: ""; display: table; clear: both; }
.left  { float: left; }
.right { float: right; }

.mq-skip {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--mq-gold);
	color: var(--mq-on-gold);
	font-family: var(--mq-font-display);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: var(--mq-radius-sm);
	transition: top var(--mq-transition);
}
.mq-skip:focus {
	top: 16px;
	color: var(--mq-on-gold);
}

.mq-divider {
	position: relative;
	height: 1px;
	margin: 24px 0;
	background: linear-gradient(90deg, transparent, var(--mq-line-strong) 30%, var(--mq-line-strong) 70%, transparent);
}
.mq-divider::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	transform: translate(-50%, -50%) rotate(45deg);
	background: var(--mq-gold);
	box-shadow: 0 0 10px rgba(201, 162, 39, .6);
}

.mq-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--mq-line-strong);
	background: var(--mq-gold-soft);
	color: var(--mq-gold-light);
	font-family: var(--mq-font-display);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.5;
}

.mq-table-scroll,
.mq-tabulka-posun {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--mq-gold-deep) transparent;
}

/* --------------------------------------------------------------------------
   4. Shell
   -------------------------------------------------------------------------- */

/* 4.1 Top bar ------------------------------------------------------------- */
.mq-topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	height: 72px;
	background: rgba(10, 15, 31, .72);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid var(--mq-line);
	transition: background-color var(--mq-transition), box-shadow var(--mq-transition);
}
body.mq-scrolled .mq-topbar {
	background: rgba(8, 12, 24, .94);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.mq-topbar__inner {
	max-width: 1360px;
	height: 100%;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	gap: 18px;
}

.mq-topbar__brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	height: 100%;
}
.mq-topbar__brand img {
	height: 44px;
	width: auto;
	filter: drop-shadow(0 0 10px rgba(201, 162, 39, .25));
	transition: filter var(--mq-transition);
}
.mq-topbar__brand:hover img {
	filter: drop-shadow(0 0 14px rgba(201, 162, 39, .5));
}

/* 4.2 Navigation ----------------------------------------------------------- */
.mq-nav {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}
.mq-nav ul.menu,
.topMenu ul.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}
.mq-nav .menu li {
	position: relative;
}
.mq-nav .menu li a {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 11px;
	font-family: var(--mq-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mq-text-muted);
	white-space: nowrap;
	border-radius: var(--mq-radius-sm);
}
.mq-nav .menu li a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 6px;
	height: 2px;
	border-radius: 2px;
	background: var(--mq-gold-gradient);
	opacity: 0;
	transform: scaleX(.4);
	transition: opacity var(--mq-transition), transform var(--mq-transition);
}
.mq-nav .menu li a:hover {
	color: var(--mq-text);
	background: rgba(255, 255, 255, .04);
}
.mq-nav .menu li.active a {
	color: var(--mq-gold-light);
	text-shadow: 0 0 12px rgba(242, 208, 107, .45);
}
.mq-nav .menu li.active a::after,
.mq-nav .menu li a:hover::after {
	opacity: 1;
	transform: scaleX(1);
	box-shadow: 0 0 10px rgba(201, 162, 39, .6);
}

.mq-nav__mobile-actions {
	display: none;
}

/* language switcher injected by mysticqest.js into .mq-topbar__actions */
.mq-jazyky {
	position: relative;
	flex-shrink: 0;
}
.mq-jazyk-tl {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--mq-line);
	background: rgba(255, 255, 255, .03);
	color: var(--mq-text-muted);
	font-family: var(--mq-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	cursor: pointer;
}
.mq-jazyk-tl:hover,
.mq-jazyky.mq-otevreno .mq-jazyk-tl {
	color: var(--mq-gold-light);
	border-color: var(--mq-line-strong);
}
.mq-jazyk-tl .mq-vlajka {
	display: none;
}
.mq-jazyk-seznam {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 150px;
	padding: 6px;
	border-radius: var(--mq-radius-sm);
	border: 1px solid var(--mq-line-strong);
	background: rgba(8, 12, 24, .97);
	box-shadow: var(--mq-shadow);
	z-index: 60;
}
.mq-jazyky.mq-otevreno .mq-jazyk-seznam {
	display: block;
}
.mq-jazyk-seznam button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--mq-text);
	font: inherit;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
}
.mq-jazyk-seznam button:hover {
	background: rgba(201, 162, 39, .12);
}
.mq-jazyk-seznam button.mq-on {
	color: var(--mq-gold-light);
}

/* ranking tables: meta lines and search forms rendered by the EJS templates */
.mq-rank-meta {
	margin: 12px 0 4px;
	font-size: 12px;
	color: var(--mq-text-dim);
	text-align: center;
}
.mq-rank-meta--pagination {
	font-size: 14px;
}
.mq-rank-search {
	margin-top: 26px;
	padding: 18px 20px;
	border-radius: var(--mq-radius);
	border: 1px solid var(--mq-line);
	background: rgba(255, 255, 255, .02);
}
.mq-rank-search__title {
	margin: 0 0 12px;
	font-family: var(--mq-font-display);
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mq-gold-light);
}
.mq-rank-search form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.mq-rank-search table,
.mq-rank-search tbody,
.mq-rank-search tr,
.mq-rank-search td {
	display: contents;
}
.mq-rank-search input[type="text"] {
	flex: 1 1 220px;
	min-width: 0;
}

/* pages that hide both sidebars (workshop) get the full content width */
body.mq-page-workshop .container_web.mq-grid {
	grid-template-columns: minmax(0, 1fr);
}
body.mq-page-workshop main.content {
	grid-column: 1;
}

/* plugin char_logout (odhlášení účtu ze hry) */
.mq-logout-action {
	margin: 18px 0 24px;
	padding: 18px 20px;
	border-radius: var(--mq-radius);
	border: 1px solid rgba(255, 77, 94, .35);
	background: rgba(200, 16, 46, .08);
}
.mq-logout-note {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--mq-text-muted);
}
.mq-logout-chars {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.mq-logout-chars li {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--mq-line);
	background: rgba(255, 255, 255, .03);
	font-size: 13px;
}
.mq-logout-chars li span {
	color: var(--mq-text-dim);
}

/* "Už máš účet?" helper under the registration form (mysticqest.js) */
.mq-prepni {
	margin-top: 14px;
	padding: 10px 14px;
	border-radius: var(--mq-radius-sm);
	border: 1px dashed var(--mq-line-strong);
	color: var(--mq-text-muted);
	font-size: 14px;
	text-align: center;
}

/* 4.3 Top bar actions ------------------------------------------------------ */
.mq-topbar__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.mq-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--mq-line);
	background: rgba(255, 255, 255, .03);
	color: var(--mq-text-muted);
}
.mq-icon-btn:hover {
	color: var(--mq-gold-light);
	border-color: var(--mq-line-strong);
	box-shadow: var(--mq-glow-gold);
}
.mq-icon-btn--danger:hover {
	color: var(--mq-red-light);
	border-color: rgba(255, 77, 94, .5);
	box-shadow: var(--mq-glow-red);
}

.mq-account-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px 0 12px;
	border-radius: 999px;
	border: 1px solid var(--mq-line-strong);
	background: var(--mq-gold-soft);
	color: var(--mq-gold-light);
	font-family: var(--mq-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	max-width: 200px;
}
.mq-account-chip span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mq-account-chip:hover {
	box-shadow: var(--mq-glow-gold);
	color: #fff;
}
.mq-account-chip__dot,
.mq-status__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mq-green);
	box-shadow: 0 0 0 0 rgba(61, 210, 122, .6);
	animation: mq-pulse 2.2s ease-out infinite;
	flex-shrink: 0;
}

.mq-topbar__login {
	font-family: var(--mq-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mq-text-muted);
	padding: 0 6px;
	white-space: nowrap;
}
.mq-topbar__login:hover {
	color: var(--mq-gold-light);
}
.mq-topbar__cta {
	white-space: nowrap;
}

/* 4.4 Burger --------------------------------------------------------------- */
.mq-burger {
	display: none;
	position: relative;
	width: 42px;
	height: 42px;
	padding: 0;
	margin-left: auto;
	border: 1px solid var(--mq-line);
	border-radius: var(--mq-radius-sm);
	background: rgba(255, 255, 255, .03);
	cursor: pointer;
	flex-shrink: 0;
}
.mq-burger span {
	position: absolute;
	left: 10px;
	right: 10px;
	height: 2px;
	border-radius: 2px;
	background: var(--mq-gold);
	transition: transform var(--mq-transition), opacity var(--mq-transition), top var(--mq-transition);
}
.mq-burger span:nth-child(1) { top: 13px; }
.mq-burger span:nth-child(2) { top: 20px; }
.mq-burger span:nth-child(3) { top: 27px; }
.mq-burger.active span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.mq-burger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mq-burger.active span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

/* 4.5 Hero ------------------------------------------------------------------ */
.wrapper_web {
	position: relative;
}

.mq-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	color: var(--mq-text);
}

.mq-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--mq-bg-1) url("../images/hero-bg.jpg") center 30% / cover no-repeat;
	animation: mq-hero-zoom 20s ease-in-out infinite alternate;
	will-change: transform;
}
.mq-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(10, 15, 31, .85) 0%, rgba(10, 15, 31, .15) 22%, rgba(10, 15, 31, 0) 45%, rgba(5, 7, 13, .75) 85%, var(--mq-bg-0) 100%),
		linear-gradient(90deg, rgba(5, 7, 13, .78) 0%, rgba(5, 7, 13, .35) 35%, rgba(5, 7, 13, .05) 60%, rgba(5, 7, 13, .55) 100%);
}

/* embers – two drifting pseudo layers of radial dots */
.mq-hero__embers {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
	opacity: .35;
}
.mq-hero__embers::before,
.mq-hero__embers::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 200%;
	background-repeat: repeat;
	will-change: transform;
}
.mq-hero__embers::before {
	background-image:
		radial-gradient(circle, rgba(242, 208, 107, .9) 0 1.2px, transparent 2px),
		radial-gradient(circle, rgba(255, 140, 60, .8) 0 1px, transparent 2px),
		radial-gradient(circle, rgba(242, 208, 107, .7) 0 1.5px, transparent 2.5px);
	background-size: 260px 340px, 190px 270px, 420px 520px;
	background-position: 20px 40px, 110px 190px, 300px 80px;
	animation: mq-embers 26s linear infinite;
}
.mq-hero__embers::after {
	background-image:
		radial-gradient(circle, rgba(255, 77, 94, .75) 0 1px, transparent 2px),
		radial-gradient(circle, rgba(242, 208, 107, .85) 0 1.4px, transparent 2.4px);
	background-size: 330px 410px, 230px 300px;
	background-position: 60px 120px, 160px 30px;
	opacity: .7;
	animation: mq-embers 38s linear infinite reverse;
}

.mq-hero__inner {
	position: relative;
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 32px;
	height: 100%;
}

/* full hero (home) */
.mq-hero--full {
	min-height: clamp(560px, 78vh, 760px);
	display: flex;
	flex-direction: column;
}
.mq-hero--full .mq-hero__inner {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 40px;
	padding-bottom: 56px;
}
.mq-hero__content {
	max-width: 640px;
	animation: mq-fade-up .7s ease both;
}

.mq-hero__logo {
	margin: 0 0 18px -6px;
}
.mq-hero__logo img {
	max-width: 520px;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 0 18px rgba(201, 162, 39, .35)) drop-shadow(0 8px 22px rgba(0, 0, 0, .6));
}

.mq-hero__eyebrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 12px;
	font-family: var(--mq-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mq-gold);
}
.mq-hero__eyebrow i {
	display: inline-block;
	width: 6px;
	height: 6px;
	transform: rotate(45deg);
	background: var(--mq-gold);
	box-shadow: 0 0 8px rgba(201, 162, 39, .7);
}

.mq-hero__title {
	margin: 0 0 14px;
	font-family: var(--mq-font-display);
	font-weight: 700;
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.1;
	letter-spacing: .02em;
	color: #fff;
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	text-shadow: 0 4px 24px rgba(0, 0, 0, .6);
}
.mq-hero__title em {
	font-style: normal;
	color: var(--mq-gold);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.mq-hero__title em {
		background: var(--mq-gold-gradient);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		text-shadow: none;
		filter: drop-shadow(0 0 16px rgba(201, 162, 39, .35));
	}
}

.mq-hero__lead {
	margin: 0 0 22px;
	max-width: 560px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--mq-text-muted);
}

.mq-hero__status {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 22px;
}
.mq-status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px 8px 12px;
	border-radius: 999px;
	border: 1px solid var(--mq-line-strong);
	background: rgba(5, 7, 13, .55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: 13px;
	color: var(--mq-text);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.mq-status__name {
	font-family: var(--mq-font-display);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: 12px;
}
.mq-status__sep {
	width: 1px;
	height: 14px;
	background: var(--mq-line-strong);
}
.mq-status__online {
	color: var(--mq-text-muted);
}
.mq-status__online strong {
	color: var(--mq-gold-light);
	font-variant-numeric: tabular-nums;
}

.mq-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 30px;
}

.mq-hero__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	max-width: 760px;
}
.mq-hero__features li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border-radius: var(--mq-radius);
	border: 1px solid var(--mq-line);
	background: rgba(5, 7, 13, .5);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
	transition: border-color var(--mq-transition), box-shadow var(--mq-transition), transform var(--mq-transition);
}
.mq-hero__features li:hover {
	border-color: var(--mq-line-strong);
	box-shadow: var(--mq-glow-gold);
	transform: translateY(-2px);
}
.mq-hero__features b {
	font-family: var(--mq-font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--mq-gold-light);
}
.mq-hero__features span {
	font-size: 12px;
	color: var(--mq-text-muted);
}

/* compact band (all other pages) */
.mq-hero--compact {
	height: 200px;
}
.mq-hero--compact .mq-hero__bg {
	background-position: center 35%;
}
.mq-hero--compact .mq-hero__inner {
	display: flex;
	align-items: center;
}
.mq-band {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
	animation: mq-fade-up .6s ease both;
}
.mq-band__logo {
	margin: 0;
	flex-shrink: 0;
}
.mq-band__logo img {
	height: 56px;
	width: auto;
	filter: drop-shadow(0 0 14px rgba(201, 162, 39, .3));
}
.mq-band__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 24px;
	border-left: 1px solid var(--mq-line-strong);
	min-width: 0;
}
.mq-band__eyebrow {
	font-family: var(--mq-font-display);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mq-gold);
}
.mq-band__title {
	font-family: var(--mq-font-display);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.15;
	color: #fff;
	text-shadow: 0 4px 18px rgba(0, 0, 0, .6);
}

/* 4.6 Grand-open countdown -------------------------------------------------- */
.mq-countdown {
	position: absolute;
	right: 32px;
	top: 28px;
	z-index: 2;
	text-align: center;
	padding: 14px 18px;
	border-radius: var(--mq-radius);
	border: 1px solid var(--mq-line-strong);
	background: rgba(5, 7, 13, .6);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: var(--mq-shadow-sm);
}
.mq-hero--compact .mq-countdown {
	top: 50%;
	transform: translateY(-50%);
	padding: 10px 14px;
}
#timer_div_title {
	margin-bottom: 8px;
	font-family: var(--mq-font-display);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mq-gold);
}
#timer_div_time {
	display: flex;
	gap: 8px;
	justify-content: center;
}
.timmer_inner_block {
	min-width: 56px;
	padding: 6px 8px;
	border-radius: var(--mq-radius-sm);
	border: 1px solid var(--mq-line);
	background: rgba(16, 24, 48, .7);
}
.timmer_inner_block .title {
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mq-text-dim);
}
.timmer_inner_block .count {
	font-family: var(--mq-font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--mq-gold-light);
	font-variant-numeric: tabular-nums;
}

/* 4.7 Content grid ------------------------------------------------------------ */
.container_web.mq-grid {
	max-width: 1360px;
	margin: 0 auto;
	padding: 32px;
	display: grid;
	grid-template-columns: 290px minmax(0, 1fr) 290px;
	gap: 28px;
	align-items: start;
	position: relative;
	z-index: 2;
}
main.content {
	min-width: 0;
}
.content-wrapper,
.content-wrapper .row,
.content-wrapper .col-sm-12 {
	min-width: 0;
}
.mq-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* 4.8 Footer ------------------------------------------------------------------ */
.mq-footer {
	position: relative;
	margin-top: 40px;
	padding: 56px 32px 28px;
	background: linear-gradient(180deg, rgba(10, 15, 31, .6) 0%, var(--mq-bg-0) 100%);
	border-top: 1px solid var(--mq-line);
}
.mq-footer::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -1px;
	width: min(560px, 80%);
	height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, var(--mq-gold) 30%, var(--mq-gold-light) 50%, var(--mq-gold) 70%, transparent);
}
.mq-footer::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -5px;
	width: 9px;
	height: 9px;
	transform: translateX(-50%) rotate(45deg);
	background: var(--mq-gold-light);
	box-shadow: 0 0 12px rgba(242, 208, 107, .8);
}

.mq-footer__inner {
	max-width: 1360px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 32px;
}
.mq-footer__brand .footer-logo img {
	height: 52px;
	width: auto;
	opacity: .9;
}
.mq-footer__brand p {
	margin: 14px 0 18px;
	max-width: 440px;
	font-size: 14px;
	color: var(--mq-text-muted);
}
.mq-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.mq-social-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--mq-line);
	background: rgba(255, 255, 255, .03);
	color: var(--mq-text-muted);
	font-family: var(--mq-font-display);
	font-size: 12px;
	letter-spacing: .06em;
}
.mq-social-btn:hover {
	color: var(--mq-gold-light);
	border-color: var(--mq-line-strong);
	box-shadow: var(--mq-glow-gold);
}

.mq-footer__col h3 {
	margin: 6px 0 14px;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mq-gold);
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
}
ul.f-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
ul.f-menu li a {
	display: inline-block;
	padding: 2px 0;
	font-size: 14px;
	color: var(--mq-text-muted);
}
ul.f-menu li a:hover {
	color: var(--mq-gold-light);
	transform: translateX(3px);
}

.mq-footer__bottom {
	max-width: 1360px;
	margin: 36px auto 0;
	padding-top: 20px;
	border-top: 1px solid var(--mq-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--mq-text-dim);
}
.footer-block-coperite {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 760px;
}
.footer-block-coperite .copyright {
	color: var(--mq-text-muted);
}
.footer-block-coperite .copyright a {
	color: var(--mq-gold);
}
.footer-block-r .templstock img {
	height: 30px;
	width: auto;
	opacity: .5;
	transition: opacity var(--mq-transition);
}
.footer-block-r .templstock:hover img {
	opacity: .9;
}

.mq-totop {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--mq-btn-gradient);
	color: var(--mq-on-gold);
	box-shadow: var(--mq-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--mq-transition), transform var(--mq-transition), visibility var(--mq-transition), box-shadow var(--mq-transition);
}
body.mq-scrolled .mq-totop {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.mq-totop:hover {
	color: var(--mq-on-gold);
	box-shadow: var(--mq-glow-gold), inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */
.block,
.mq-card,
.serverBlock,
.socBlock {
	position: relative;
	border-radius: var(--mq-radius);
	border: 1px solid var(--mq-line);
	background: var(--mq-surface);
	box-shadow: var(--mq-shadow), inset 0 1px 0 rgba(255, 255, 255, .04);
	transition: border-color var(--mq-transition), box-shadow var(--mq-transition), transform var(--mq-transition);
}
.block,
.mq-card {
	padding: 20px;
	overflow: hidden;
}
.block::before,
.mq-card::before {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--mq-gold) 50%, transparent);
	opacity: .7;
}
.block:hover,
.mq-card:hover,
.serverBlock:hover,
.socBlock:hover {
	border-color: var(--mq-line-strong);
	box-shadow: var(--mq-shadow), var(--mq-glow-gold), inset 0 1px 0 rgba(255, 255, 255, .05);
	transform: translateY(-2px);
}

.blockTitle {
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--mq-line);
}
.blockTitle p {
	margin: 0;
	font-family: var(--mq-font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mq-gold);
}
.blockTitle span {
	display: block;
	font-size: 12px;
	color: var(--mq-text-muted);
}
.blockTitle span b {
	color: var(--mq-gold-light);
}

.mq-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mq-text-muted);
}
.mq-card__more::after {
	content: "\2192";
	transition: transform var(--mq-transition);
}
.mq-card__more:hover {
	color: var(--mq-gold-light);
}
.mq-card__more:hover::after {
	transform: translateX(3px);
}

.mq-card__switches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

/* download button (left sidebar) */
.mq-download,
.download-button {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border-radius: var(--mq-radius);
	background: var(--mq-btn-gradient);
	color: var(--mq-on-gold);
	box-shadow: var(--mq-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .18);
	border: 1px solid rgba(242, 208, 107, .55);
}
.mq-download svg {
	flex-shrink: 0;
	filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .3));
}
.mq-download span,
.download-button span {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	color: var(--mq-on-gold);
}
.mq-download b {
	font-family: var(--mq-font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.mq-download small {
	font-size: 12px;
	opacity: .8;
}
.mq-download:hover,
.download-button:hover {
	color: var(--mq-on-gold);
	filter: brightness(1.08);
	box-shadow: var(--mq-glow-gold), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .18);
	transform: translateY(-2px);
}

/* server status card */
.mq-server,
.serverBlock {
	padding: 16px 18px;
}
.mq-server__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}
.mq-server__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mq-font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mq-gold-light);
}
.mq-server__version {
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--mq-text-dim);
}
.server-progress,
.mq-server__bar {
	position: relative;
	height: 6px;
	border-radius: 3px;
	background: rgba(0, 0, 0, .45);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
	overflow: hidden;
}
.server-progress .progress-bar {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--mq-gold) 0%, var(--mq-gold-light) 55%, var(--mq-red) 100%);
	box-shadow: 0 0 8px rgba(201, 162, 39, .6);
	transition: width .6s ease;
}
.mq-server__online {
	margin-top: 8px;
	font-size: 13px;
	color: var(--mq-text-muted);
	font-variant-numeric: tabular-nums;
}
.mq-server__online span {
	color: var(--mq-green);
	font-weight: 700;
	font-size: 15px;
}
.mq-server__online small {
	color: var(--mq-text-dim);
	margin-left: 4px;
}

/* social */
.mq-social,
.socBlock {
	display: flex;
	gap: 10px;
	padding: 12px;
}
.mq-social__item {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 999px;
	border: 1px solid var(--mq-line);
	background: rgba(255, 255, 255, .03);
	color: var(--mq-text-muted);
	font-family: var(--mq-font-display);
	font-size: 12px;
	letter-spacing: .06em;
}
.mq-social__item .icon {
	display: inline-flex;
}
.mq-social__item--discord:hover {
	color: #fff;
	background: rgba(88, 101, 242, .28);
	border-color: rgba(88, 101, 242, .7);
	box-shadow: 0 0 20px rgba(88, 101, 242, .35);
}
.mq-social__item--facebook:hover {
	color: #fff;
	background: rgba(24, 119, 242, .28);
	border-color: rgba(24, 119, 242, .7);
	box-shadow: 0 0 20px rgba(24, 119, 242, .35);
}

/* fast links */
ul.fast-links {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.fast-links li + li {
	border-top: 1px solid var(--mq-line-soft);
}
ul.fast-links li a {
	position: relative;
	display: block;
	padding: 9px 22px 9px 0;
	font-size: 14px;
	color: var(--mq-text);
}
ul.fast-links li a::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--mq-gold);
	border-top: 2px solid var(--mq-gold);
	transform: translateY(-50%) rotate(45deg);
	opacity: .55;
	transition: transform var(--mq-transition), opacity var(--mq-transition);
}
ul.fast-links li a:hover {
	color: var(--mq-gold-light);
	padding-left: 4px;
}
ul.fast-links li a:hover::after {
	opacity: 1;
	transform: translate(3px, -50%) rotate(45deg);
}

/* account card (logged in) */
.mq-account__balances {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: 8px;
	margin-bottom: 14px;
}
.mq-balance,
.lk-coins {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 12px 8px;
	border-radius: var(--mq-radius-sm);
	border: 1px solid var(--mq-line);
	background: var(--mq-surface-2);
	text-align: center;
}
.mq-balance .coins,
.lk-coins .coins {
	font-family: var(--mq-font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--mq-gold-light);
	font-variant-numeric: tabular-nums;
}
.mq-balance .username,
.lk-coins .username {
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mq-text-dim);
}
ul.mq-account__links {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.mq-account__links li + li {
	border-top: 1px solid var(--mq-line-soft);
}
ul.mq-account__links li a {
	display: block;
	padding: 8px 0;
	font-size: 14px;
	color: var(--mq-text);
}
ul.mq-account__links li a:hover {
	color: var(--mq-gold-light);
	padding-left: 4px;
}
ul.mq-account__links li.mq-account__logout a {
	color: var(--mq-red-light);
}
ul.mq-account__links li.mq-account__logout a:hover {
	color: #fff;
}

/* login card */
.mq-login {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.mq-field {
	display: block;
}
.mq-field__label {
	display: block;
	margin-bottom: 5px;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mq-text-muted);
}
.mq-login input {
	width: 100%;
	max-width: none;
}
.mq-login__submit {
	width: 100%;
	margin-top: 4px;
}
.mq-login__links {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin: 4px 0 0;
	font-size: 12px;
}
.mq-login__links a {
	color: var(--mq-text-muted);
}
.mq-login__links a:hover,
.mq-login__links a.registration {
	color: var(--mq-gold);
}
.mq-login__links a.registration:hover {
	color: var(--mq-gold-light);
}

/* --------------------------------------------------------------------------
   6. Buttons & forms
   -------------------------------------------------------------------------- */
.button,
.custom_button,
.button-style,
.button-style2,
input[type="submit"].button-style,
button.btn.btn-primary,
button.btn.btn-secondary,
.btn.btn-primary,
.btn.btn-secondary,
.jb-btn,
.buy_button,
.buttonn,
#vote-options li button,
#sell_item_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--mq-radius-sm);
	border: 1px solid rgba(242, 208, 107, .6);
	background: var(--mq-btn-gradient);
	color: var(--mq-on-gold);
	font-family: var(--mq-font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 4px 14px rgba(0, 0, 0, .35);
	transition: filter var(--mq-transition), box-shadow var(--mq-transition), transform var(--mq-transition), color var(--mq-transition), background-color var(--mq-transition), border-color var(--mq-transition);
	-webkit-appearance: none;
	appearance: none;
}
.button:hover,
.custom_button:hover,
.button-style:hover,
input[type="submit"].button-style:hover,
button.btn.btn-primary:hover,
.btn.btn-primary:hover,
.jb-btn:hover,
.buy_button:hover,
.buttonn:hover,
#vote-options li button:hover,
#sell_item_button:hover {
	color: var(--mq-on-gold);
	filter: brightness(1.1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .2), var(--mq-glow-gold);
	transform: translateY(-1px);
}
.button:active,
.custom_button:active,
.button-style:active,
.button-style2:active,
input[type="submit"].button-style:active,
button.btn:active,
.jb-btn:active {
	transform: translateY(1px);
	filter: brightness(.95);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3);
}
.button:disabled,
.button[disabled],
button:disabled,
input[type="submit"]:disabled,
.custom_button[disabled] {
	opacity: .5;
	cursor: not-allowed;
	filter: grayscale(.4);
	transform: none;
	box-shadow: none;
}

.button-small,
.custom_button {
	padding: 7px 14px;
	font-size: 11px;
	letter-spacing: .08em;
}
.button-medium {
	padding: 9px 18px;
	font-size: 12px;
}
.button-large {
	padding: 15px 28px;
	font-size: 15px;
	letter-spacing: .1em;
}

.button-ghost,
.button-style2,
.btn.btn-secondary,
button.btn.btn-secondary {
	background: rgba(201, 162, 39, .06);
	border-color: var(--mq-line-strong);
	color: var(--mq-gold);
	box-shadow: none;
}
.button-ghost:hover,
.button-style2:hover,
.btn.btn-secondary:hover,
button.btn.btn-secondary:hover {
	background: var(--mq-gold-soft);
	border-color: var(--mq-gold);
	color: var(--mq-gold-light);
	filter: none;
	box-shadow: var(--mq-glow-gold);
}

.button-red,
.btn.btn-danger,
button.btn.btn-danger {
	background: var(--mq-red-gradient);
	border-color: rgba(255, 77, 94, .55);
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .35);
}
.button-red:hover,
.btn.btn-danger:hover,
button.btn.btn-danger:hover {
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .3), var(--mq-glow-red);
}

/* custom_button in a selected/active state (JS toggles .active/.selected) */
.custom_button.active,
.custom_button.selected {
	filter: brightness(1.15);
	box-shadow: var(--mq-glow-gold), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
select,
textarea,
.input-main,
.text,
.custom-select,
.form-control,
.jb-input,
.jb-select {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	border-radius: var(--mq-radius-sm);
	border: 1px solid var(--mq-line);
	background: rgba(0, 0, 0, .35);
	color: var(--mq-text);
	font-family: var(--mq-font-body);
	font-size: 14px;
	line-height: 1.4;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
	transition: border-color var(--mq-transition), box-shadow var(--mq-transition), background-color var(--mq-transition);
	-webkit-appearance: none;
	appearance: none;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus,
.input-main:focus,
.text:focus,
.custom-select:focus,
.form-control:focus,
.jb-input:focus,
.jb-select:focus {
	outline: none;
	border-color: var(--mq-gold);
	background: rgba(0, 0, 0, .45);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 0 0 3px var(--mq-gold-soft);
}
textarea {
	min-height: 120px;
	resize: vertical;
}
/* browser autofill would paint a white field with black text – keep the dark field */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-text-fill-color: var(--mq-text);
	caret-color: var(--mq-text);
	-webkit-box-shadow: 0 0 0 1000px #0c1226 inset;
	box-shadow: 0 0 0 1000px #0c1226 inset;
	transition: background-color 9999s ease-out 0s;
}
/* disabled fields (e.g. #price_tax) – UA grey text is unreadable on the dark field */
input:disabled,
select:disabled,
textarea:disabled,
.form-control:disabled {
	color: var(--mq-text-muted);
	-webkit-text-fill-color: var(--mq-text-muted);
	opacity: .75;
	cursor: not-allowed;
}
select,
.custom-select,
select.form-control {
	padding-right: 36px;
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23C9A227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
}
select option {
	background: var(--mq-bg-2);
	color: var(--mq-text);
}
select[multiple],
select[size] {
	background-image: none;
	padding-right: 12px;
}
input[type="checkbox"],
input[type="radio"] {
	width: 16px;
	height: 16px;
	margin: 0 6px 0 0;
	vertical-align: middle;
	accent-color: var(--mq-gold);
	cursor: pointer;
}
input[type="file"] {
	color: var(--mq-text-muted);
	font-size: 13px;
}
input[type="file"]::file-selector-button {
	margin-right: 10px;
	padding: 7px 14px;
	border-radius: var(--mq-radius-sm);
	border: 1px solid var(--mq-line-strong);
	background: var(--mq-gold-soft);
	color: var(--mq-gold);
	font-family: var(--mq-font-display);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}
input[type="submit"],
input[type="button"],
button {
	font-family: var(--mq-font-display);
	cursor: pointer;
}
label {
	color: var(--mq-text);
	cursor: pointer;
}

/* legacy table-based forms (.form > form > table) */
.form table {
	width: 100%;
}
.form table td {
	padding: 8px 6px;
	vertical-align: middle;
	border: 0;
}
.form table tr td:first-child {
	width: 160px;
	color: var(--mq-text-muted);
	font-size: 13px;
}
.form table tr td:only-child {
	width: auto;
	color: var(--mq-text);
}
.form p,
.entry form p {
	color: var(--mq-text-muted);
}

/* validationEngine prompts (override validation.css) */
.formError .formErrorContent {
	background: linear-gradient(180deg, #2a0b12, #1a060b) !important;
	border: 1px solid rgba(255, 77, 94, .6) !important;
	color: #FFD9DD !important;
	font-family: var(--mq-font-body);
	font-size: 12px !important;
	border-radius: var(--mq-radius-sm) !important;
	box-shadow: var(--mq-glow-red), var(--mq-shadow-sm) !important;
	padding: 6px 12px !important;
}
.formError .formErrorArrow div {
	background: #1f080e !important;
	border-color: rgba(255, 77, 94, .6) !important;
	box-shadow: none !important;
}
.formError .formErrorArrow .line1,
.formError .formErrorArrow .line2 {
	background: rgba(255, 77, 94, .6) !important;
}
.greenPopup .formErrorContent {
	background: linear-gradient(180deg, #0f2a1a, #071a0f) !important;
	border-color: rgba(61, 210, 122, .6) !important;
	color: #D6F7E3 !important;
	box-shadow: 0 0 20px rgba(61, 210, 122, .3) !important;
}
.greenPopup .formErrorArrow div {
	background: #0b2015 !important;
	border-color: rgba(61, 210, 122, .6) !important;
}
.blackPopup .formErrorContent {
	background: var(--mq-bg-2) !important;
	border-color: var(--mq-line-strong) !important;
	color: var(--mq-text) !important;
	box-shadow: var(--mq-shadow-sm) !important;
}
.blackPopup .formErrorArrow div {
	background: var(--mq-bg-2) !important;
	border-color: var(--mq-line-strong) !important;
}

/* QapTcha slider captcha */
.QapTcha {
	margin: 10px 0;
}
.QapTcha .bgSlider {
	position: relative;
	width: 100%;
	max-width: 300px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid var(--mq-line);
	background: rgba(0, 0, 0, .4);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}
.QapTcha .bgSlider::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(201, 162, 39, .08) 14px 16px);
	pointer-events: none;
}
.QapTcha .slider {
	position: relative;
	width: 58px;
	height: 38px;
	border-radius: 999px;
	background: var(--mq-btn-gradient);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 8px rgba(0, 0, 0, .5);
	cursor: grab;
	z-index: 1;
}
.QapTcha .slider::after {
	content: "\203A\203A";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	color: var(--mq-on-gold);
	letter-spacing: -2px;
}
.QapTcha .clr {
	clear: both;
}
.QapTcha .txtStatus {
	margin-top: 8px;
	font-size: 12px;
	letter-spacing: .04em;
}
.QapTcha .txtStatus.dropError {
	color: var(--mq-red-light);
}
.QapTcha .txtStatus.dropSuccess {
	color: var(--mq-green);
}

/* --------------------------------------------------------------------------
   7. Content
   -------------------------------------------------------------------------- */
.mq-page {
	min-width: 0;
}

/* 7.1 Section head ---------------------------------------------------------- */
.mq-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 18px;
}
.mq-section-head__title,
.content .h1,
span.h1 {
	position: relative;
	display: inline-block;
	padding-bottom: 12px;
	font-family: var(--mq-font-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.2;
	color: var(--mq-gold);
}
.mq-section-head__title::after,
.content .h1::after,
span.h1::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--mq-gold-light), var(--mq-gold-deep));
	box-shadow: 0 0 10px rgba(201, 162, 39, .5);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.mq-section-head__title,
	.content .h1,
	span.h1 {
		background: var(--mq-gold-gradient);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}
.mq-section-head__sub {
	font-family: var(--mq-font-display);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mq-text-muted);
	padding-bottom: 12px;
}
.mq-section-head__link {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mq-text-muted);
	padding-bottom: 14px;
}
.mq-section-head__link::after {
	content: "\00a0\2192";
}
.mq-section-head__link:hover {
	color: var(--mq-gold-light);
}
section.mq-showcase,
section.mq-news,
section.mq-siege {
	margin-bottom: 28px;
}

/* 7.2 Frame A (#content > #box1) ----------------------------------------------- */
#content,
#content_center,
#content_left,
#content_right {
	min-width: 0;
	color: var(--mq-text);
}
#box1 .title1 {
	margin: 0 0 18px;
}
#box1 .title1 h1,
#box1 .title1 h2 {
	position: relative;
	display: inline-block;
	margin: 0;
	padding-bottom: 12px;
	font-size: 26px;
	letter-spacing: .05em;
}
#box1 .title1 h1::after,
#box1 .title1 h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--mq-gold-light), var(--mq-gold-deep));
	box-shadow: 0 0 10px rgba(201, 162, 39, .5);
}

.box-style1,
.box-style2,
.box-style3,
.box-style4 {
	position: relative;
	margin: 0 0 20px;
	border-radius: var(--mq-radius);
	border: 1px solid var(--mq-line);
	background: var(--mq-surface);
	box-shadow: var(--mq-shadow), inset 0 1px 0 rgba(255, 255, 255, .04);
	overflow: hidden;
}
.box-style1 > h2.title,
.box-style2 > h2.title,
.box-style3 > h2.title,
.box-style4 > h2.title,
h2.title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
	padding: 14px 20px;
	border-bottom: 1px solid var(--mq-line);
	background: var(--mq-surface-2);
	font-size: 15px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mq-gold);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	h2.title {
		-webkit-background-clip: initial;
		background-clip: initial;
		background: var(--mq-surface-2);
		color: var(--mq-gold);
	}
}
h2.title div[style*="float"] {
	float: none !important;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.entry {
	padding: 20px;
	color: var(--mq-text);
}
.entry p {
	margin-bottom: 14px;
}
.entry p:last-child {
	margin-bottom: 0;
}
.entry a {
	color: var(--mq-gold);
}
.entry a:hover {
	color: var(--mq-gold-light);
}
/* Buttons rendered as <a> anywhere on the site: force readable text (link rules must never win) */
body.mq a.button,
body.mq a.custom_button,
body.mq a.button-style,
body.mq a.btn.btn-primary,
body.mq .plans a.select,
body.mq .entry .custom_button,
body.mq .entry .button,
body.mq .dmn-content .btn-primary,
body.mq a.button:hover,
body.mq a.custom_button:hover,
body.mq a.button-style:hover,
body.mq a.btn.btn-primary:hover,
body.mq .plans a.select:hover {
	color: var(--mq-on-gold) !important;
}
body.mq a.button-ghost,
body.mq a.button-style2,
body.mq a.btn.btn-secondary,
body.mq a.button-ghost:hover,
body.mq a.button-style2:hover {
	color: var(--mq-gold-light) !important;
}
body.mq a.button-red,
body.mq a.btn.btn-danger,
body.mq a.button-red:hover {
	color: #fff !important;
}
/* Jewel Bank (.jb-btn): the plugin view's inline <style> paints a dark red/black gradient
   over the generic gold button, so the text must stay LIGHT here, never --mq-on-gold */
body.mq a.jb-btn {
	color: var(--mq-gold-light) !important;
}
body.mq a.jb-btn:hover {
	color: var(--mq-text) !important;
}
/* Guild Leave (.gl-btn): inline style = red pill, hover = gold pill – text follows the background */
body.mq a.gl-btn,
body.mq a.gl-btn.gl-leave {
	color: #fff !important;
}
body.mq a.gl-btn:hover,
body.mq a.gl-btn.gl-leave:hover {
	color: var(--mq-on-gold) !important;
}
/* links styled as buttons must keep the dark-on-gold text inside .entry / cards */
.entry a.custom_button,
.entry a.button,
.entry a.button-style,
.mq-card a.custom_button,
.mq-card a.button,
#content a.custom_button,
#content a.button,
.dmn-content a.btn.btn-primary,
.entry a.custom_button:hover,
.entry a.button:hover,
#content a.custom_button:hover,
#content a.button:hover {
	color: var(--mq-on-gold);
}
.entry a.button-ghost,
.entry a.button-style2,
#content a.button-ghost,
.mq-card a.button-ghost {
	color: var(--mq-gold);
}
.entry a.button-red,
#content a.button-red,
.entry a.btn.btn-danger {
	color: #fff;
}
.entry h2,
.entry h3 {
	margin-top: 8px;
}
.entry table td {
	border-bottom: 1px solid var(--mq-line-soft);
}
.meta-bg .meta {
	font-size: 12px;
	color: var(--mq-text-dim);
}

/* 7.3 Frame C (bootstrap-like) --------------------------------------------- */
.dmn-content,
.dmn-page-box,
.dmn-page-content {
	min-width: 0;
}
.dmn-page-title {
	margin: 0 0 18px;
}
.dmn-page-title h1 {
	position: relative;
	display: inline-block;
	margin: 0;
	padding-bottom: 12px;
	font-size: 26px;
}
.dmn-page-title h1::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--mq-gold-light), var(--mq-gold-deep));
	box-shadow: 0 0 10px rgba(201, 162, 39, .5);
}
.dmn-page-content {
	padding: 20px;
	border-radius: var(--mq-radius);
	border: 1px solid var(--mq-line);
	background: var(--mq-surface);
	box-shadow: var(--mq-shadow), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.dmn-page-content h2.title {
	margin: -20px -20px 20px;
	border-radius: var(--mq-radius) var(--mq-radius) 0 0;
}
.row {
	display: block;
}
.col-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
	display: block;
	width: 100%;
	min-width: 0;
}
.d-flex { display: flex; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.float-right { float: right; }
.float-left { float: left; }
.text-center { text-align: center; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.mb-5 { margin-bottom: 40px; }
.mt-3 { margin-top: 16px; }
.p-2 { padding: 8px; }
.form-group {
	margin-bottom: 14px;
}
.form-group label {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mq-text-muted);
}
.form-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.form-inline .form-control,
.form-inline input,
.form-inline select {
	width: auto;
	flex: 1 1 160px;
}

.alert {
	position: relative;
	margin: 0 0 16px;
	padding: 12px 16px 12px 18px;
	border-radius: var(--mq-radius-sm);
	border: 1px solid var(--mq-line);
	background: var(--mq-surface-2);
	color: var(--mq-text);
	overflow: hidden;
}
.alert::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--mq-gold);
}
.alert-danger {
	background: rgba(200, 16, 46, .14);
	border-color: rgba(255, 77, 94, .35);
}
.alert-danger::before { background: var(--mq-red-light); }
.alert-success {
	background: rgba(61, 210, 122, .1);
	border-color: rgba(61, 210, 122, .35);
}
.alert-success::before { background: var(--mq-green); }
.alert-warning {
	background: rgba(201, 162, 39, .1);
	border-color: var(--mq-line-strong);
}
.alert-warning::before { background: var(--mq-gold); }
.alert-info {
	background: rgba(79, 179, 255, .1);
	border-color: rgba(79, 179, 255, .35);
}
.alert-info::before { background: var(--mq-blue); }

ul.nav-tabs,
.nav.nav-tabs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--mq-line);
}
.nav-tabs .nav-link,
.nav-tabs li a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--mq-line);
	background: rgba(255, 255, 255, .03);
	font-family: var(--mq-font-display);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mq-text-muted);
}
.nav-tabs .nav-link:hover,
.nav-tabs li a:hover {
	color: var(--mq-gold-light);
	border-color: var(--mq-line-strong);
}
.nav-tabs .nav-link.active,
.nav-tabs li.active a {
	background: var(--mq-btn-gradient);
	border-color: rgba(242, 208, 107, .6);
	color: var(--mq-on-gold);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.tab-content > .tab-pane {
	display: none;
}
.tab-content > .tab-pane.active,
.tab-content > .tab-pane.show.active {
	display: block;
}
.fade { transition: opacity .2s ease; }
.fade:not(.show) { opacity: 1; }

/* 7.4 News list --------------------------------------------------------------- */
.mq-news-card {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 20px;
	margin: 0 0 18px;
	padding: 22px;
	border-radius: var(--mq-radius);
	border: 1px solid var(--mq-line);
	background: var(--mq-surface);
	box-shadow: var(--mq-shadow), inset 0 1px 0 rgba(255, 255, 255, .04);
	transition: border-color var(--mq-transition), box-shadow var(--mq-transition), transform var(--mq-transition);
}
.mq-news-card:hover {
	border-color: var(--mq-line-strong);
	box-shadow: var(--mq-shadow), var(--mq-glow-gold), inset 0 1px 0 rgba(255, 255, 255, .05);
	transform: translateY(-2px);
}
.mq-news-card__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	align-self: start;
	padding: 10px 6px 12px;
	border-radius: var(--mq-radius-sm);
	border: 1px solid var(--mq-line-strong);
	background: var(--mq-surface-2);
	text-align: center;
	line-height: 1;
}
.mq-news-card__date .icon {
	display: block;
	font-family: var(--mq-font-display);
	font-size: 28px;
	font-weight: 700;
	color: var(--mq-gold-light);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.mq-news-card__month {
	margin-top: 4px;
	font-family: var(--mq-font-display);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mq-gold);
}
.mq-news-card__year {
	margin-top: 5px;
	font-size: 10px;
	letter-spacing: .06em;
	color: var(--mq-text-dim);
}
.mq-news-card__body {
	min-width: 0;
}
.mq-news-card__img {
	margin: 0 0 14px;
}
.mq-news-card__img img {
	display: block;
	width: 100%;
	max-height: 260px;
	object-fit: cover;
	border-radius: var(--mq-radius-sm);
	border: 1px solid var(--mq-line);
}
.mq-news-card__img img[src=""],
.mq-news-card__img img[src="http://"],
.mq-news-card__img img[src="https://"] {
	display: none;
}
.mq-news-card__title {
	margin: 0 0 10px;
	font-size: 18px;
	letter-spacing: .03em;
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
}
.mq-news-card__title a {
	color: var(--mq-text);
}
.mq-news-card__title a:hover {
	color: var(--mq-gold-light);
}
.mq-news-card__content {
	font-size: 14px;
	line-height: 1.65;
	color: var(--mq-text);
	overflow-wrap: anywhere;
}
.mq-news-card__content p {
	margin-bottom: 12px;
}
.mq-news-card__content p:last-child {
	margin-bottom: 0;
}
.mq-news-card__content strong,
.mq-news-card__content b {
	color: var(--mq-gold-light);
}
.mq-news-card__content a {
	color: var(--mq-gold);
	text-decoration: underline;
	text-decoration-color: rgba(201, 162, 39, .4);
	text-underline-offset: 2px;
}
.mq-news-card__content ul,
.mq-news-card__content ol {
	margin: 0 0 12px;
	padding-left: 20px;
}
.mq-news-card__content img {
	border-radius: var(--mq-radius-sm);
}
.mq-news-card__content table td {
	border-bottom: 1px solid var(--mq-line-soft);
}
.mq-news-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--mq-line-soft);
}
.mq-news-card__meta {
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--mq-text-dim);
}

/* single article */
.mq-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--mq-line);
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--mq-text-muted);
}
.mq-article__author b {
	color: var(--mq-gold);
}
.mq-article__body {
	font-size: 15px;
	line-height: 1.7;
	overflow-wrap: anywhere;
}
.mq-article__body h2,
.mq-article__body h3 {
	margin: 24px 0 10px;
}
.mq-article__body h2 { font-size: 20px; }
.mq-article__body h3 { font-size: 16px; }
.mq-article__body ul,
.mq-article__body ol {
	margin: 0 0 16px;
	padding-left: 22px;
}
.mq-article__body li {
	margin-bottom: 4px;
}
.mq-article__body img {
	display: block;
	max-width: 100%;
	margin: 12px 0;
	border-radius: var(--mq-radius-sm);
	border: 1px solid var(--mq-line);
}
.mq-article__body table {
	margin: 0 0 16px;
}
.mq-article__body table td,
.mq-article__body table th {
	padding: 8px 10px;
	border-bottom: 1px solid var(--mq-line-soft);
}
.mq-article__body table th {
	font-family: var(--mq-font-display);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mq-gold);
	text-align: left;
}
.mq-article__body blockquote {
	margin: 16px 0;
	padding: 12px 18px;
	border-left: 3px solid var(--mq-gold);
	border-radius: 0 var(--mq-radius-sm) var(--mq-radius-sm) 0;
	background: var(--mq-surface-2);
	color: var(--mq-text-muted);
	font-style: italic;
}
.mq-article__body strong,
.mq-article__body b {
	color: var(--mq-gold-light);
}
.mq-article__foot {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--mq-line);
}

/* 7.5 Downloads ------------------------------------------------------------------ */
.mq-dl-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0 0 28px;
}
.mq-dl-card {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 20px;
	border-radius: var(--mq-radius);
	border: 1px solid var(--mq-line);
	background: var(--mq-surface);
	box-shadow: var(--mq-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .04);
	transition: border-color var(--mq-transition), box-shadow var(--mq-transition), transform var(--mq-transition);
}
.mq-dl-card:hover {
	border-color: var(--mq-line-strong);
	box-shadow: var(--mq-shadow-sm), var(--mq-glow-gold);
	transform: translateY(-2px);
}
.mq-dl-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: var(--mq-radius);
	border: 1px solid var(--mq-line-strong);
	background: var(--mq-gold-soft);
	color: var(--mq-gold-light);
}
.mq-dl-card__text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.mq-dl-card__text b {
	font-family: var(--mq-font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--mq-gold-light);
	overflow-wrap: anywhere;
}
.mq-dl-card__text span {
	font-size: 13px;
	color: var(--mq-text-muted);
	overflow-wrap: anywhere;
}
.mq-dl-card__action {
	flex-shrink: 0;
}
.mq-dl-card--primary {
	position: relative;
	overflow: hidden;
	padding: 24px;
	border-color: rgba(200, 16, 46, .45);
	background:
		linear-gradient(135deg, rgba(200, 16, 46, .16), transparent 50%),
		var(--mq-surface);
	box-shadow: var(--mq-shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.mq-dl-card--primary::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	border-radius: var(--mq-radius) 0 0 var(--mq-radius);
	background: linear-gradient(180deg, var(--mq-gold-light), var(--mq-red));
}
.mq-dl-card--primary .mq-dl-card__icon {
	width: 64px;
	height: 64px;
	background: var(--mq-btn-gradient);
	color: var(--mq-on-gold);
	border-color: rgba(242, 208, 107, .6);
	box-shadow: var(--mq-glow-gold);
}
.mq-dl-card--primary .mq-dl-card__text b {
	font-size: 18px;
}
.mq-dl-card--primary:hover {
	border-color: rgba(255, 77, 94, .6);
	box-shadow: var(--mq-shadow), var(--mq-glow-red);
}

.mq-steps {
	list-style: none;
	counter-reset: mq-step;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.mq-steps li {
	counter-increment: mq-step;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px 14px 64px;
	border-radius: var(--mq-radius);
	border: 1px solid var(--mq-line);
	background: var(--mq-surface);
}
.mq-steps li::before {
	content: counter(mq-step);
	position: absolute;
	left: 16px;
	top: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--mq-btn-gradient);
	color: var(--mq-on-gold);
	font-family: var(--mq-font-display);
	font-size: 14px;
	font-weight: 700;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 12px rgba(201, 162, 39, .35);
}
.mq-steps li b {
	font-family: var(--mq-font-display);
	font-size: 14px;
	letter-spacing: .04em;
	color: var(--mq-gold-light);
}
.mq-steps li span {
	font-size: 14px;
	color: var(--mq-text-muted);
}
.mq-steps li span b {
	font-family: var(--mq-font-body);
	color: var(--mq-text);
}
.mq-steps__link {
	align-self: flex-start;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.mq-steps__link::after {
	content: "\00a0\2192";
}

/* 7.6 About ---------------------------------------------------------------------- */
.mq-about__intro {
	margin: 0 0 20px;
	padding: 22px 24px;
	border-radius: var(--mq-radius);
	border: 1px solid var(--mq-line);
	background: var(--mq-surface);
	box-shadow: var(--mq-shadow), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.mq-about__intro p {
	font-size: 15px;
	line-height: 1.7;
}
.mq-about__intro p b {
	color: var(--mq-gold-light);
}
.mq-about__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}

.mq-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin: 0 0 22px;
}
.mq-info-card {
	padding: 18px 20px;
	border-radius: var(--mq-radius);
	border: 1px solid var(--mq-line);
	background: var(--mq-surface);
	box-shadow: var(--mq-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .04);
	transition: border-color var(--mq-transition), box-shadow var(--mq-transition), transform var(--mq-transition);
}
.mq-info-card:hover {
	border-color: var(--mq-line-strong);
	box-shadow: var(--mq-shadow-sm), var(--mq-glow-gold);
	transform: translateY(-2px);
}
.mq-info-card__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--mq-line);
	font-size: 15px;
	letter-spacing: .06em;
	color: var(--mq-gold);
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
}
.mq-info-card__title svg {
	flex-shrink: 0;
	color: var(--mq-gold-light);
}
.mq-info-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mq-info-card li {
	position: relative;
	padding: 4px 0 4px 18px;
	font-size: 14px;
	color: var(--mq-text);
}
.mq-info-card li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 12px;
	width: 6px;
	height: 6px;
	transform: rotate(45deg);
	background: var(--mq-gold);
	box-shadow: 0 0 6px rgba(201, 162, 39, .6);
}

.mq-about__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 24px 28px;
	border-radius: var(--mq-radius);
	border: 1px solid var(--mq-line-strong);
	background:
		radial-gradient(ellipse at top left, rgba(200, 16, 46, .28), transparent 55%),
		radial-gradient(ellipse at bottom right, rgba(201, 162, 39, .22), transparent 55%),
		linear-gradient(135deg, var(--mq-bg-2), var(--mq-bg-1));
	box-shadow: var(--mq-shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.mq-about__cta > div:first-child {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.mq-about__cta b {
	font-family: var(--mq-font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .03em;
	color: #fff;
}
.mq-about__cta span {
	font-size: 14px;
	color: var(--mq-text-muted);
}
.mq-about__cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex-shrink: 0;
}

/* 7.7 Showcase (swiper) ------------------------------------------------------- */
.mq-showcase__slider {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--mq-radius);
	border: 1px solid var(--mq-line-strong);
	background: var(--mq-bg-0);
	box-shadow: var(--mq-shadow), 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(242, 208, 107, .12);
	overflow: hidden;
}
.mq-showcase__slider .swiper-wrapper,
.mq-showcase__slider .swiper-slide {
	height: 100%;
}
.mq-showcase__slide {
	display: block;
	width: 100%;
	height: 100%;
}
.mq-showcase__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mq-showcase__slider .swiper-button-prev,
.mq-showcase__slider .swiper-button-next {
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border-radius: 50%;
	border: 1px solid var(--mq-line-strong);
	background: rgba(5, 7, 13, .7);
	color: var(--mq-gold);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color var(--mq-transition), box-shadow var(--mq-transition), color var(--mq-transition);
}
.mq-showcase__slider .swiper-button-prev { left: 14px; }
.mq-showcase__slider .swiper-button-next { right: 14px; }
.mq-showcase__slider .swiper-button-prev::after,
.mq-showcase__slider .swiper-button-next::after {
	font-size: 14px;
	font-weight: 700;
}
.mq-showcase__slider .swiper-button-prev:hover,
.mq-showcase__slider .swiper-button-next:hover {
	color: var(--mq-gold-light);
	background: rgba(16, 24, 48, .9);
	box-shadow: var(--mq-glow-gold);
}
.mq-showcase__slider .swiper-pagination {
	bottom: 12px;
}
.mq-showcase__slider .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0 4px;
	border-radius: 4px;
	background: var(--mq-gold);
	opacity: .45;
	transition: width var(--mq-transition), opacity var(--mq-transition);
}
.mq-showcase__slider .swiper-pagination-bullet-active {
	width: 24px;
	opacity: 1;
	background: var(--mq-gold-light);
	box-shadow: 0 0 8px rgba(242, 208, 107, .8);
}

/* castle siege wrapper (inner .mqcs-* styled by castlesiege.css) */
.mq-siege {
	margin-bottom: 24px;
}
.mq-siege:empty,
.mq-siege #mqcs-box:empty {
	display: none;
}

/* 7.8 Notices --------------------------------------------------------------------- */
.i_note,
.e_note,
.s_note,
.w_note,
.alert-box,
.mq-note {
	position: relative;
	margin: 0 0 16px;
	padding: 12px 16px 12px 20px;
	border-radius: var(--mq-radius-sm);
	border: 1px solid rgba(79, 179, 255, .3);
	background: rgba(79, 179, 255, .09);
	color: var(--mq-text);
	font-size: 14px;
	line-height: 1.55;
	overflow: hidden;
}
.i_note::before,
.e_note::before,
.s_note::before,
.w_note::before,
.alert-box::before,
.mq-note::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--mq-blue);
}
.e_note,
.alert-box.e_note,
.mq-note--danger {
	border-color: rgba(255, 77, 94, .35);
	background: rgba(200, 16, 46, .13);
}
.e_note::before,
.mq-note--danger::before { background: var(--mq-red-light); }
.s_note {
	border-color: rgba(61, 210, 122, .35);
	background: rgba(61, 210, 122, .1);
}
.s_note::before { background: var(--mq-green); }
.w_note {
	border-color: var(--mq-line-strong);
	background: rgba(201, 162, 39, .1);
}
.w_note::before { background: var(--mq-gold); }
.mq-note--soft {
	background: var(--mq-surface-2);
	border-color: var(--mq-line);
	color: var(--mq-text-muted);
}
.mq-note--soft::before { background: var(--mq-gold-deep); }
.mq-note--soft b,
.i_note b {
	color: var(--mq-gold-light);
}
.tableBlock-body .i_note,
.mq-rank-list .i_note,
#lattest_items .i_note {
	margin: 4px 0 0;
	padding: 10px 12px 10px 16px;
	font-size: 13px;
}

/* 7.9 Pagination --------------------------------------------------------------------- */
.mq-pagination,
#pagination {
	margin: 20px 0 0;
}
#pagination ul,
.mq-pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}
#pagination ul li {
	display: inline-flex;
}
#pagination a,
.mq-pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 999px;
	border: 1px solid var(--mq-line);
	background: rgba(255, 255, 255, .03);
	color: var(--mq-text-muted);
	font-family: var(--mq-font-display);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
#pagination a:hover,
.mq-pagination a:hover {
	color: var(--mq-gold-light);
	border-color: var(--mq-line-strong);
}
#pagination a.on,
.mq-pagination a.on,
.mq-pagination .current {
	background: var(--mq-btn-gradient);
	border-color: rgba(242, 208, 107, .6);
	color: var(--mq-on-gold);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 12px rgba(201, 162, 39, .3);
}
#pagination #prev,
#pagination #next {
	font-size: 16px;
	line-height: 1;
}
#pagination #prev::before { content: "\2039"; }
#pagination #next::before { content: "\203A"; }
#pagination #prev span,
#pagination #next span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* 7.10 Lists ----------------------------------------------------------------------- */
ul.style1,
ul.style2,
ul.style3 {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}
ul.style1 li,
ul.style2 li,
ul.style3 li {
	position: relative;
	padding: 8px 0 8px 20px;
	border-bottom: 1px solid var(--mq-line-soft);
}
ul.style1 li::before,
ul.style2 li::before,
ul.style3 li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 16px;
	width: 6px;
	height: 6px;
	transform: rotate(45deg);
	background: var(--mq-gold);
}
ul.style2 li.first {
	border-top: 1px solid var(--mq-line-soft);
}
ul.style3 li {
	padding-left: 0;
	border: 0;
}
ul.style3 li::before {
	display: none;
}

/* server tab row (rankings, online, ban list…) */
ul.tabrow {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--mq-line);
}
ul.tabrow li a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--mq-line);
	background: rgba(255, 255, 255, .03);
	font-family: var(--mq-font-display);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mq-text-muted);
}
ul.tabrow li a:hover {
	color: var(--mq-gold-light);
	border-color: var(--mq-line-strong);
}
ul.tabrow li.selected a {
	background: var(--mq-btn-gradient);
	border-color: rgba(242, 208, 107, .6);
	color: var(--mq-on-gold);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* rankings page */
.rankings {
	display: none;
}
#top_list {
	min-width: 0;
}
div[id^="rankings_select_"],
#rank_by_class,
#rank_by_npc {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 18px;
}
#rank_by_class br,
div[id^="rankings_select_"] br {
	display: none;
}
div[id^="rankings_content_"],
div[id^="plugin_rankings_content_"] {
	min-width: 0;
}
div[id^="rankings_content_"] h2 {
	margin-top: 22px;
	font-size: 16px;
}
div[id^="rankings_content_"] form table {
	width: auto;
}

/* --------------------------------------------------------------------------
   8. Tables
   -------------------------------------------------------------------------- */
table.ranking-table,
table.table,
table.add_to_card,
table.ticket,
table.sidebar_rank {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0 0 16px;
	border-radius: var(--mq-radius-sm);
	border: 1px solid var(--mq-line);
	background: rgba(5, 7, 13, .35);
	overflow: hidden;
	font-size: 14px;
}
table.ranking-table thead th,
table.ranking-table thead td,
table.ranking-table tr.main-tr th,
table.ranking-table tr.main-tr td,
table.table thead th,
table.add_to_card thead th,
table.add_to_card th,
table.ticket th,
table.sidebar_rank th {
	padding: 10px 12px;
	border-bottom: 1px solid var(--mq-line-strong);
	background: var(--mq-surface-2);
	font-family: var(--mq-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: left;
	color: var(--mq-gold);
	white-space: nowrap;
}
table.ranking-table td,
table.table td,
table.add_to_card td,
table.ticket td,
table.sidebar_rank td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--mq-line-soft);
	color: var(--mq-text);
	vertical-align: middle;
}
table.ranking-table tbody tr:last-child td,
table.table tbody tr:last-child td,
table.sidebar_rank tr:last-child td {
	border-bottom: 0;
}
table.ranking-table tbody tr:nth-child(even) td,
table.table-striped tbody tr:nth-child(even) td,
table.add_to_card tr.even td,
table.sidebar_rank tr:nth-child(even) td {
	background: rgba(255, 255, 255, .025);
}
table.ranking-table tbody tr:hover td,
table.table tbody tr:hover td,
table.add_to_card tbody tr:hover td,
table.sidebar_rank tr:hover td {
	background: rgba(201, 162, 39, .08);
}
table.ranking-table tbody td:first-child,
table.sidebar_rank td:first-child {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--mq-text-muted);
	white-space: nowrap;
}
table.ranking-table tbody tr:nth-child(1) td:first-child { color: var(--mq-gold-light); text-shadow: 0 0 8px rgba(242, 208, 107, .5); }
table.ranking-table tbody tr:nth-child(2) td:first-child { color: #D7DCE6; }
table.ranking-table tbody tr:nth-child(3) td:first-child { color: #D08A4E; }
table.ranking-table td.end,
table.ranking-table th.end {
	text-align: right;
}
table.ranking-table a {
	color: var(--mq-text);
	font-weight: 500;
}
table.ranking-table a:hover {
	color: var(--mq-gold-light);
}
table.ranking-table img {
	vertical-align: middle;
}
table.ranking-table sup,
.ranking-table sup {
	font-size: 65%;
	font-weight: 700;
	vertical-align: super;
	margin-left: 2px;
	color: var(--mq-red-light);
}
table.ranking-table tbody td span[style*="color:red"],
table.ranking-table tbody td span[style*="color: red"] {
	color: var(--mq-red-light) !important;
}
table.ranking-table tbody td span[style*="color:green"],
table.ranking-table tbody td span[style*="color: green"] {
	color: var(--mq-green) !important;
}

/* shop / warehouse item tables – keep the CMS layout, tint only */
table.item_table {
	width: auto;
	border: 0;
	background: none;
}
table.item_table td {
	padding: 6px;
	border: 0;
	vertical-align: top;
}
table.each_item {
	width: 136px;
	border-radius: var(--mq-radius-sm);
	border: 1px solid var(--mq-line);
	background: var(--mq-surface-2);
	overflow: hidden;
	transition: border-color var(--mq-transition), box-shadow var(--mq-transition);
}
table.each_item:hover {
	border-color: var(--mq-line-strong);
	box-shadow: var(--mq-glow-gold);
}
table.each_item td {
	padding: 4px 6px;
	border: 0;
	text-align: center;
}
table.each_item td.item_name {
	font-size: 12px;
	line-height: 1.3;
}
table.each_item td.item_name a {
	color: var(--mq-gold-light);
}

/* sidebar flex "tables" (EJS) */
.tableBlock {
	min-width: 0;
}
.tableBlock-thead {
	margin-bottom: 4px;
	border-bottom: 1px solid var(--mq-line);
}
.tableBlock-thead .tableBlock-td {
	padding: 4px 6px 8px;
	font-family: var(--mq-font-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mq-text-muted);
}
.tableBlock-tr {
	display: flex;
	align-items: center;
	gap: 6px;
}
.tableBlock-body .tableBlock-tr {
	border-bottom: 1px solid var(--mq-line-soft);
	border-radius: 4px;
	transition: background-color var(--mq-transition);
}
.tableBlock-body .tableBlock-tr:last-child {
	border-bottom: 0;
}
.tableBlock-body .tableBlock-tr:hover {
	background: rgba(201, 162, 39, .07);
}
.tableBlock-td {
	padding: 8px 6px;
	font-size: 13px;
	line-height: 1.35;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--mq-text);
}
.td-15 { flex: 0 0 15%; width: 15%; }
.td-25 { flex: 0 0 25%; width: 25%; }
.td-50 { flex: 0 0 50%; width: 50%; }
.td-65 { flex: 0 0 65%; width: 65%; }
.tableBlock-body .tableBlock-td:first-child {
	font-variant-numeric: tabular-nums;
	color: var(--mq-text-muted);
	font-weight: 600;
}
.tableBlock-body .tableBlock-tr:nth-child(1) .tableBlock-td:first-child { color: var(--mq-gold-light); }
.tableBlock-body .tableBlock-tr:nth-child(2) .tableBlock-td:first-child { color: #D7DCE6; }
.tableBlock-body .tableBlock-tr:nth-child(3) .tableBlock-td:first-child { color: #D08A4E; }
.tableBlock-body .tableBlock-td:last-child {
	text-align: right;
}
.tableBlock-body .tableBlock-td:last-child:first-child {
	text-align: left;
}
.tableBlock-thead .tableBlock-td:last-child {
	text-align: right;
}
.text-td a,
.mq-rank-list a,
#lattest_items a {
	color: var(--mq-text);
}
.text-td a:hover,
.mq-rank-list a:hover,
#lattest_items a:hover {
	color: var(--mq-gold-light);
}
.tableBlock-td img {
	vertical-align: middle;
	margin-right: 4px;
}
.plvl {
	margin-left: 3px;
	font-size: 10px;
	font-weight: 600;
	color: var(--mq-text-dim);
	vertical-align: super;
}

/* flag sprite wrapper (positions live in modules.css) */
.f16 {
	display: inline-block;
	vertical-align: middle;
	margin-right: 4px;
}
.f16 .flag {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url("../images/flags.png") no-repeat;
	vertical-align: middle;
}

/* events (left sidebar, rows built by App.events(), bells by mysticqest.js) */
#events .tableBlock-tr {
	display: flex;
	align-items: center;
	gap: 8px;
}
#events .tableBlock-td {
	white-space: normal;
}
#events .tableBlock-td:first-child {
	flex: 1 1 auto;
	font-weight: 500;
	color: var(--mq-text);
	font-variant-numeric: normal;
}
#events .tableBlock-td[id^="event"] {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--mq-gold-light);
	font-weight: 600;
}
.mq-ev-bell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--mq-line);
	background: rgba(255, 255, 255, .03);
	color: var(--mq-text-muted);
	cursor: pointer;
	transition: color var(--mq-transition), border-color var(--mq-transition), box-shadow var(--mq-transition), background-color var(--mq-transition);
}
.mq-ev-bell svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
}
.mq-ev-bell:hover {
	color: var(--mq-gold-light);
	border-color: var(--mq-line-strong);
}
.mq-ev-bell.mq-on {
	color: var(--mq-on-gold);
	background: var(--mq-btn-gradient);
	border-color: rgba(242, 208, 107, .6);
	box-shadow: 0 0 10px rgba(201, 162, 39, .4);
}
.mq-ev-nastaveni {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--mq-line-soft);
	font-size: 12px;
	color: var(--mq-text-muted);
}
.mq-ev-nastaveni label {
	color: var(--mq-text-muted);
}
.mq-ev-nastaveni select {
	width: auto;
	flex: 1 1 90px;
	padding: 5px 28px 5px 8px;
	font-size: 12px;
	background-position: right 8px center;
}
.mq-ev-test {
	padding: 5px 10px;
	border-radius: var(--mq-radius-sm);
	border: 1px solid var(--mq-line);
	background: rgba(255, 255, 255, .03);
	color: var(--mq-text-muted);
	font-family: var(--mq-font-display);
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}
.mq-ev-test:hover {
	color: var(--mq-gold-light);
	border-color: var(--mq-line-strong);
}
.mq-ev-hlaska {
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--mq-text-dim);
}
.mq-ev-hlaska:empty {
	display: none;
}
.mq-varovani,
.mq-ev-hlaska.mq-varovani {
	color: var(--mq-red-light);
}
.mq-zvyrazneno {
	animation: mq-blink 2.2s ease-out 1;
	border-radius: var(--mq-radius-sm);
}

/* --------------------------------------------------------------------------
   9. Modals / overlays / tooltip / jQuery UI
   -------------------------------------------------------------------------- */
#lean_overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(3, 5, 12, .7);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
#overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 998;
	background: rgba(3, 5, 12, .75);
}

#select_server,
#buy_windows,
#add_to_card_windows,
#auction_bet,
.modal_div {
	display: none;
	position: fixed;
	z-index: 11000;
	width: 420px;
	max-width: calc(100vw - 32px);
	border-radius: var(--mq-radius);
	border: 1px solid var(--mq-line-strong);
	background: linear-gradient(180deg, #121a33, #0a0f1f);
	box-shadow: var(--mq-shadow), var(--mq-glow-gold), inset 0 1px 0 rgba(255, 255, 255, .06);
	color: var(--mq-text);
	overflow: hidden;
}
.modal-header,
.modal-header2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--mq-line);
	background: var(--mq-surface-2);
	cursor: default;
}
.modal-header2 {
	cursor: move;
}
.modal-header h2,
.modal-header2 h2 {
	margin: 0;
	font-size: 16px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mq-gold);
}
.modal-header a.close,
.modal-header2 a.close,
a.close {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--mq-line);
	color: var(--mq-text-muted);
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}
a.close::before {
	content: "\00d7";
	font-size: 20px;
	line-height: 1;
	font-family: var(--mq-font-body);
	color: currentColor;
}
a.close:hover {
	color: var(--mq-gold-light);
	border-color: var(--mq-line-strong);
	box-shadow: var(--mq-glow-gold);
}
.mq-modal__body,
#select_server .form,
#buy_windows > div:not(.modal-header),
#add_to_card_windows > div:not(.modal-header) {
	padding: 18px;
}
.mq-modal__note {
	display: block;
	font-size: 13px;
	color: var(--mq-text-muted);
	font-weight: 400;
}
#select_server select {
	width: 100%;
}
.payment-method-button {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.payment-method-button label {
	flex: 1 1 140px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: var(--mq-radius-sm);
	border: 1px solid var(--mq-line);
	background: rgba(255, 255, 255, .03);
	font-size: 13px;
}
.payment-method-button label:hover {
	border-color: var(--mq-line-strong);
}
.payment-method-button .span_red {
	color: var(--mq-gold-light);
}
.btn-fld {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

#loading {
	display: none;
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 1000;
	align-items: center;
	gap: 10px;
	padding: 10px 16px 10px 12px;
	border-radius: 999px;
	border: 1px solid var(--mq-line-strong);
	background: rgba(10, 15, 31, .95);
	box-shadow: var(--mq-shadow-sm), var(--mq-glow-gold);
	color: var(--mq-gold-light);
	font-family: var(--mq-font-display);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
#loading img {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	margin-right: 8px;
}

/* tooltip (jquery.tooltip.js) */
#tooltip {
	position: absolute;
	z-index: 3000;
	max-width: 320px;
	padding: 10px 12px;
	border-radius: var(--mq-radius-sm);
	border: 1px solid var(--mq-line-strong);
	background: rgba(8, 12, 24, .97);
	box-shadow: var(--mq-shadow-sm), var(--mq-glow-gold);
	color: var(--mq-text);
	font-size: 12px;
	line-height: 1.45;
	opacity: .98;
}
#tooltip h3 {
	margin: 0 0 6px;
	font-size: 13px;
	letter-spacing: .04em;
}
#tooltip h3:empty {
	display: none;
}
#tooltip .body {
	font-family: var(--mq-font-body);
}
#tooltip .url {
	display: none;
}

/* market item filter (draggable panel) */
#item_filter_overlay {
	position: fixed;
	right: 24px;
	top: 100px;
	z-index: 9999;
	width: 300px;
	max-width: calc(100vw - 32px);
	border-radius: var(--mq-radius);
	border: 1px solid var(--mq-line-strong);
	background: linear-gradient(180deg, #121a33, #0a0f1f);
	box-shadow: var(--mq-shadow), var(--mq-glow-gold);
	overflow: hidden;
}
#item_filter {
	max-height: 70vh;
	overflow-y: auto;
}
.item_filter_content {
	padding: 14px 16px;
}

/* jQuery UI overrides (ui.css imported first – these need !important) */
.ui-widget-overlay {
	background: rgba(3, 5, 12, .75) !important;
	opacity: 1 !important;
}
.ui-widget,
.ui-widget button,
.ui-widget input,
.ui-widget select,
.ui-widget textarea {
	font-family: var(--mq-font-body) !important;
	font-size: 14px !important;
}
.ui-dialog {
	padding: 0 !important;
	border-radius: var(--mq-radius) !important;
	border: 1px solid var(--mq-line-strong) !important;
	background: linear-gradient(180deg, #121a33, #0a0f1f) !important;
	box-shadow: var(--mq-shadow), var(--mq-glow-gold) !important;
	color: var(--mq-text) !important;
	overflow: hidden;
}
.ui-dialog .ui-dialog-titlebar {
	padding: 14px 52px 14px 18px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--mq-line) !important;
	border-radius: 0 !important;
	background: var(--mq-surface-2) !important;
	color: var(--mq-gold) !important;
	font-family: var(--mq-font-display) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
}
.ui-dialog .ui-dialog-title {
	color: var(--mq-gold) !important;
}
.ui-dialog .ui-dialog-titlebar-close {
	right: 12px !important;
	top: 50% !important;
	margin: -14px 0 0 !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	border: 1px solid var(--mq-line) !important;
	background: rgba(255, 255, 255, .03) !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
	border-color: var(--mq-line-strong) !important;
	box-shadow: var(--mq-glow-gold) !important;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
	filter: brightness(2) sepia(1) hue-rotate(5deg) saturate(3);
}
.ui-dialog .ui-dialog-content {
	padding: 18px !important;
	background: transparent !important;
	color: var(--mq-text) !important;
	border: 0 !important;
}
.ui-dialog .ui-dialog-buttonpane {
	margin: 0 !important;
	padding: 12px 18px !important;
	border: 0 !important;
	border-top: 1px solid var(--mq-line) !important;
	background: var(--mq-surface-2) !important;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: 0 0 0 8px !important;
	padding: 9px 18px !important;
	border-radius: var(--mq-radius-sm) !important;
	border: 1px solid rgba(242, 208, 107, .6) !important;
	background: var(--mq-btn-gradient) !important;
	color: var(--mq-on-gold) !important;
	font-family: var(--mq-font-display) !important;
	font-size: 12px !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
}
.ui-widget-content {
	border-color: var(--mq-line) !important;
	background: var(--mq-bg-2) !important;
	color: var(--mq-text) !important;
}
.ui-widget-content a {
	color: var(--mq-gold) !important;
}
.ui-autocomplete {
	max-height: 260px;
	overflow-y: auto;
	padding: 6px !important;
	border-radius: var(--mq-radius-sm) !important;
	border: 1px solid var(--mq-line-strong) !important;
	background: rgba(10, 15, 31, .98) !important;
	box-shadow: var(--mq-shadow-sm) !important;
}
.ui-menu .ui-menu-item a,
.ui-menu .ui-menu-item {
	color: var(--mq-text) !important;
	border-radius: 4px;
}
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active,
.ui-state-hover,
.ui-state-focus {
	margin: 0 !important;
	border: 1px solid var(--mq-line-strong) !important;
	background: var(--mq-gold-soft) !important;
	color: var(--mq-gold-light) !important;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border-color: var(--mq-line) !important;
	background: var(--mq-surface-2) !important;
	color: var(--mq-text) !important;
}
.ui-widget-header {
	border-color: var(--mq-line) !important;
	background: var(--mq-surface-2) !important;
	color: var(--mq-gold) !important;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
	color: var(--mq-gold-light) !important;
}

/* App.trowJsException target */
#exception {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 9999;
	padding: 10px 16px;
	background: var(--mq-red);
	color: #fff;
	font-size: 13px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   10. Animations & reduced motion
   -------------------------------------------------------------------------- */
@keyframes mq-embers {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(0, -50%, 0); }
}
@keyframes mq-hero-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}
@keyframes mq-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(61, 210, 122, .6); }
	70%  { box-shadow: 0 0 0 7px rgba(61, 210, 122, 0); }
	100% { box-shadow: 0 0 0 0 rgba(61, 210, 122, 0); }
}
@keyframes mq-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes mq-blink {
	0%   { box-shadow: 0 0 0 0 rgba(201, 162, 39, .7); }
	50%  { box-shadow: 0 0 0 6px rgba(201, 162, 39, .25); }
	100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
}

/* gentle reveal of cards on the home page (mysticqest.js may add .mq-reveal) */
body.mq-is-home .mq-card,
body.mq-is-home .mq-news-card {
	animation: mq-fade-up .55s ease both;
}
body.mq-is-home .mq-news-card:nth-child(2) { animation-delay: .06s; }
body.mq-is-home .mq-news-card:nth-child(3) { animation-delay: .12s; }
body.mq-is-home .mq-news-card:nth-child(4) { animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: .001s !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001s !important;
	}
	.mq-hero__bg {
		animation: none;
		transform: none;
	}
	.mq-hero__embers {
		display: none;
	}
	.mq-status__dot,
	.mq-account-chip__dot {
		animation: none;
		box-shadow: 0 0 0 3px rgba(61, 210, 122, .25);
	}
	.block:hover,
	.mq-card:hover,
	.mq-news-card:hover,
	.mq-dl-card:hover,
	.mq-info-card:hover,
	.mq-hero__features li:hover,
	.button:hover,
	.mq-download:hover {
		transform: none;
	}
}