/* =====================================================================
   NOVX THEME (azal2 CMS)
   Colors / sizes: edit the variables below.
   Images: replace the files inside images/theme/ (see include/theme/config.php)
   ===================================================================== */
:root {
	/* NOVX palette - taken from the NOVX launcher (olive black + lightning gold + green status) */
	--bg:            #0a0904;
	--bg-overlay:    rgba(10, 9, 4, .72);
	--bg-center-shade: rgba(10, 9, 4, .30);
	--topbar:        rgba(13, 12, 5, .90);
	--panel:         rgba(20, 18, 9, .94);
	--panel-2:       rgba(30, 27, 13, .97);
	--panel-head-1:  #2d2a14;
	--panel-head-2:  #16140a;
	--input:         #0d0c06;
	--border:        #3a3519;
	--border-2:      #5c5226;
	--gold:          #e6c34a;
	--gold-light:    #f8e38c;
	--gold-dark:     #a58a2c;
	--gold-rgb:      230, 195, 74;
	--orange:        #f2d25c;   /* "lightning" accent */
	--text:          #eee6c6;
	--muted:         #a9a17c;
	--muted-2:       #78714c;
	--danger:        #d9534f;
	--success:       #35b45a;   /* launcher green (online / channel lights) */
	--success-rgb:   53, 180, 90;
	--radius:        6px;
	--layout-width:  1150px;
	--sidebar-width: 280px;
	--font:          'Cairo', 'Kanit', system-ui, sans-serif;
	--font-head:     Georgia, 'Cairo', serif;
	--btn-gold:      linear-gradient(180deg, #fbe9a0 0%, #e6c34a 50%, #b18f26 100%);
	--btn-gold-hover:linear-gradient(180deg, #fff1b8 0%, #f0cf58 50%, #c39e2e 100%);
	--btn-green:     linear-gradient(180deg, #1c8a3c 0%, #0f6a2a 50%, #014518 100%);
	--surface-panel: linear-gradient(160deg, rgba(24, 22, 11, .96), rgba(12, 11, 5, .97));
	--surface-head:  linear-gradient(180deg, rgba(255, 240, 180, .07) 0%, rgba(255, 240, 180, 0) 30%), linear-gradient(180deg, #2d2a14 0%, #16140a 100%);
	--bevel:         inset 0 1px 0 rgba(255, 236, 160, .08);
	--glow-gold:     0 0 18px rgba(230, 195, 74, .28);
	--ease-out:      cubic-bezier(.22, 1, .36, 1);
	--ease-back:     cubic-bezier(.34, 1.56, .5, 1);
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 14px;
	color: var(--text);
	background: var(--bg);
	min-height: 100vh;
	overflow-x: hidden;
}
.site-bg {
	position: fixed; inset: 0; z-index: -1;
	background:
		radial-gradient(ellipse 30% 26% at 50% 27%, var(--bg-center-shade) 0%, var(--bg-center-shade) 35%, transparent 100%),
		linear-gradient(180deg, rgba(10, 9, 4, .5) 0%, var(--bg-overlay) 38%, rgba(6, 5, 2, .96) 100%),
		var(--bg-image) center top / cover no-repeat, var(--bg);
}
a { color: var(--gold); text-decoration: none; transition: color .15s; }
a:hover { color: var(--gold-light); }
img { max-width: 100%; }
h1, h2, h3, h4, h5 { font-family: var(--font); color: var(--text); }
p { margin-bottom: .75rem; }
code { color: var(--gold-light); }
.center { text-align: center; }
.muted { color: var(--muted); }
.muted-sm { color: var(--muted); font-size: 12px; }
.gold { color: var(--gold); }
.gold-sm { color: var(--gold); font-size: 13px; font-weight: 500; }
.gold-caps { color: var(--gold); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
.kicker { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.link-gold { color: var(--gold); font-weight: 500; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 100; background: var(--topbar); border-bottom: 1px solid #000; box-shadow: 0 2px 14px rgba(0,0,0,.6); }
.topbar-inner { height: 66px; display: flex; align-items: center; justify-content: center; padding: 0 20px; position: relative; }
.topbar-logo { display: none; }
.topnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-items: center; }
.topnav a {
	display: flex; align-items: center; gap: 8px; padding: 9px 16px; position: relative;
	color: #e2d6b2; font-weight: 600; font-size: 13.5px; letter-spacing: .6px;
	border: 1px solid transparent; border-radius: 3px;
}
.topnav a i { font-size: 13px; color: var(--gold-dark); transition: color .15s; }
.topnav a:hover { color: var(--gold-light); border-color: rgba(92,86,49,.55); }
.topnav a:hover i, .topnav a.active i { color: var(--gold); }
.topnav a.highlight i { color: #2a2104; }
.topnav a.active { color: var(--gold-light); border-color: var(--border-2); background: linear-gradient(180deg, rgba(230,195,74,.12), rgba(230,195,74,.03)); box-shadow: inset 0 1px rgba(242,221,144,.12); }
.topnav a.active::after { display: none; }
.topnav a.highlight { background: var(--btn-gold); color: #221c04; border-radius: 3px; box-shadow: 0 0 0 1px #6f6236, 0 4px 14px rgba(230,195,74,.25); font-weight: 600; }
.topnav a.highlight.active::after { display: none; }
.topnav a.highlight:hover { filter: brightness(1.08); color: #1a1503; }
.nav-toggle { display: none; background: none; border: 1px solid var(--border-2); color: var(--gold); font-size: 18px; width: 42px; height: 38px; border-radius: 4px; }

.lang-select { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }
.lang-current { background: rgba(0,0,0,.4); border: 1px solid var(--border); color: var(--text); padding: 9px 14px; border-radius: 4px; font: 500 13px var(--font); }
.lang-current b { margin-right: 4px; }
.lang-current i { font-size: 10px; color: var(--muted); margin-left: 4px; }
.lang-list { display: none; position: absolute; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px; min-width: 170px; background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.lang-select.open .lang-list { display: block; }
.lang-list a { display: block; padding: 7px 10px; border-radius: 4px; color: var(--text); font-size: 13px; }
.lang-list a b { display: inline-block; width: 28px; color: var(--gold); }
.lang-list a:hover, .lang-list a.active { background: rgba(230,195,74,.1); }

/* ---------- page frame ---------- */
.site-main { width: 100%; max-width: var(--layout-width); margin: 0 auto; padding: 0 16px; }
.site-logo { text-align: center; padding: 26px 0 30px; }
.site-logo img { max-height: 150px; width: 340px; object-fit: contain; filter: drop-shadow(0 8px 22px rgba(0,0,0,.85)) drop-shadow(0 0 28px rgba(230,195,74,.12)); }
.layout { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); gap: 18px; align-items: start; }
.layout-full { grid-template-columns: minmax(0, 1fr); }
.sidebar, .content { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.site-footer { text-align: center; color: var(--muted); font-size: 12.5px; padding: 60px 16px 26px; }

/* ---------- panels ---------- */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.45); overflow: hidden; }
.panel-head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 16px 16px 15px; min-height: 56px;
	background: linear-gradient(180deg, var(--panel-head-1), var(--panel-head-2));
	border-bottom: 1px solid var(--border-2);
}
.panel-head h3 {
	margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold);
	padding-left: 12px; position: relative;
}
.panel-head h3::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; background: var(--gold); border-radius: 2px; }
.panel-head.center { justify-content: center; }
.panel-head h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #f3e6c0; }
.panel-head h2 i { color: var(--gold); margin-right: 8px; font-size: 16px; }
.panel-body { padding: 20px; }
.panel-main .panel-body { padding: 24px 26px; }
.panel-foot { padding: 16px 20px 20px; border-top: 1px solid var(--border); }
.panel-foot .btn-dark { white-space: nowrap; font-size: 13px; padding: 12px 10px; }
.btn-mini { font-size: 12px; color: var(--text); border: 1px solid var(--border-2); background: rgba(0,0,0,.35); padding: 5px 11px; border-radius: 3px; }
.btn-mini:hover { color: var(--gold); border-color: var(--gold-dark); }

/* section title with lines: ─── ALL NEWS ─── */
.section-title { display: flex; align-items: center; gap: 16px; margin: 24px 0 20px; font-size: 13.5px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; color: #e6dcb8; }
.section-title::before, .section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-2), transparent); }
.panel-body > .section-title:first-child { margin-top: 4px; }
.bar-title { font-size: 16px; font-weight: 600; padding-left: 12px; border-left: 3px solid var(--gold); margin-bottom: 14px; }

/* ---------- buttons ---------- */
.btn-gold, .btn-dark {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 22px; border-radius: 4px; font: 600 14px var(--font); cursor: pointer; transition: filter .15s, border-color .15s, color .15s;
}
.btn-gold { background: var(--btn-gold); color: #221c04; border: 1px solid #9c8530; box-shadow: 0 6px 18px rgba(230,195,74,.18), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-gold:hover { filter: brightness(1.08); color: #1a1503; }
.btn-gold[disabled] { opacity: .5; cursor: not-allowed; }
.btn-dark { background: rgba(0,0,0,.35); color: #f3e6c0; border: 1px solid var(--border-2); }
.btn-dark:hover { border-color: var(--gold-dark); color: var(--gold-light); }
.btn-block { display: flex; width: 100%; }
.btn-lg { padding: 15px 22px; font-size: 15px; }
.btn-caps { text-transform: uppercase; letter-spacing: 1.8px; }
.btn-wide { min-width: 300px; }
.btn-sm-pad { padding: 9px 18px; font-size: 13px; }

.pill { display: inline-block; padding: 2px 9px; border: 1px solid var(--border-2); border-radius: 20px; font-size: 11px; font-weight: 600; color: #eadfb8; background: rgba(0,0,0,.35); white-space: nowrap; }
.pill-gold { background: var(--btn-gold); color: #221c04; border-color: #9c8530; text-transform: uppercase; letter-spacing: 1px; font-size: 10px; padding: 3px 10px; }
.pill-sq { border-radius: 3px; color: var(--gold); padding: 3px 7px; }
.tag-gold { position: absolute; left: 16px; top: 16px; z-index: 2; background: var(--btn-gold); color: #221c04; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 3px; box-shadow: 0 0 0 1px #6f6236, 0 4px 14px rgba(0,0,0,.4); }
.news-read .tag-gold { position: static; display: inline-block; margin-bottom: 14px; }

/* ---------- forms ---------- */
.field-label { display: block; font-size: 13px; font-weight: 500; color: #eadfb8; margin: 14px 0 8px; }
.field-label.caps { text-transform: uppercase; letter-spacing: 1.2px; font-size: 12.5px; margin-top: 18px; }
.panel-body > .field-label:first-child, .side-login .field-label:first-of-type { margin-top: 0; }
.field-help { display: block; font-size: 11px; color: var(--muted); margin-top: 8px; }
.field-help:hover { color: var(--gold); }
.input-icon { position: relative; }
.input-icon input, .select-theme, .form-control, .rank-search input, .legacy-page input[type=text], .legacy-page input[type=password], .legacy-page input[type=email], .legacy-page select, .legacy-page textarea {
	width: 100%; background: var(--input); border: 1px solid var(--border); color: var(--text);
	padding: 13px 44px 13px 14px; border-radius: 4px; font: 400 14px var(--font); outline: none; transition: border-color .15s, box-shadow .15s;
}
.select-theme, .legacy-page select, .legacy-page textarea, .form-control { padding-right: 14px; }
.input-icon input::placeholder, .form-control::placeholder, .rank-search input::placeholder { color: var(--muted-2); }
.input-icon input:focus, .select-theme:focus, .form-control:focus, .rank-search input:focus, .legacy-page input:focus, .legacy-page select:focus, .legacy-page textarea:focus {
	border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(230,195,74,.12); background: var(--input); color: var(--text);
}
.input-icon i { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; }
.side-login .btn-gold { margin-top: 22px; }
.form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-theme .btn-gold.btn-block { margin-top: 22px; }

.notice { background: rgba(0,0,0,.3); border: 1px solid var(--border-2); border-radius: 4px; padding: 12px 16px; font-size: 12.5px; color: #d1c4a1; margin: 12px 0; }
.notice i { color: var(--gold); margin-right: 6px; }
.notice-danger { border-color: #6b2a24; color: #f0b6ae; background: rgba(90,20,15,.25); }
.notice-success { border-color: #2f5c33; color: #b8e2ba; background: rgba(20,70,25,.25); }

.page-intro { text-align: center; padding: 4px 0 22px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.page-intro p { margin: 16px 0 0; font-size: 15px; font-weight: 500; }
.icon-box { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border: 1px solid var(--gold-dark); border-radius: 8px; color: var(--gold-light); font-size: 20px; background: rgba(0,0,0,.4); box-shadow: 0 0 22px rgba(230,195,74,.25), inset 0 0 12px rgba(230,195,74,.12); }
.icon-box-lg { width: 90px; height: 90px; font-size: 34px; border-radius: 12px; }
.page-lead { color: var(--muted); max-width: 560px; margin: -6px 0 16px; line-height: 1.7; }

/* ---------- sidebar ---------- */
.side-welcome { margin-bottom: 12px; color: var(--muted); }
.side-welcome b { color: var(--gold); }
.side-menu { list-style: none; margin: 0; padding: 0; }
.side-menu a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid transparent; border-radius: 4px; color: var(--text); font-weight: 500; }
.side-menu a i { color: var(--gold); width: 18px; text-align: center; }
.side-menu a:hover { border-color: var(--border-2); background: rgba(0,0,0,.3); color: var(--gold-light); }
.side-menu a.logout i { color: var(--danger); }

.side-events { list-style: none; margin: 0; padding: 0; }
.side-events li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(58,53,25,.6); }
.side-events li.is-extra { display: none; }
.side-events.show-all li.is-extra { display: flex; }
.ev-text b { display: block; font-size: 14px; font-weight: 500; color: #f1e6c4; }
.ev-text span { font-size: 11.5px; color: var(--muted); }
.ev-text em { font-style: normal; color: var(--orange); font-weight: 500; }
.ev-icon { width: 54px; height: 48px; flex: none; object-fit: contain; }
.divider-btn { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 12px 16px 14px; color: var(--gold); font: 600 11.5px var(--font); letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; }
.divider-btn::before, .divider-btn::after { content: ""; flex: 1; height: 1px; background: var(--border-2); }
.divider-btn.open i { transform: rotate(180deg); }

/* podium */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding: 30px 12px 16px; border-bottom: 1px solid var(--border); }
.podium-col { flex: 1; max-width: 90px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.podium-crown { color: var(--gold); font-size: 18px; margin-bottom: 6px; }
.podium-avatar { position: relative; width: 50px; height: 50px; border: 1px solid var(--border-2); border-radius: 6px; background: #17150a; }
.podium-avatar > img:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.place-1 .podium-avatar { width: 62px; height: 62px; border-color: var(--gold); box-shadow: 0 0 18px rgba(230,195,74,.35); }
.podium-flag { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 14px; border-radius: 2px; border: 1px solid #000; object-fit: cover; }
.podium-name { margin-top: 10px; font-size: 13px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-guild { font-size: 11px; color: var(--muted); margin: 3px 0 6px; }
.place-1 .pill { border-color: var(--gold-dark); color: var(--gold-light); }
.podium-step { width: 100%; margin-top: 10px; border: 1px solid var(--border-2); border-bottom-width: 3px; background: linear-gradient(180deg, #2a2612, #0f0d06); font-size: 17px; font-weight: 700; color: #f3e6c0; padding: 3px 0; }
.place-1 .podium-step { padding: 7px 0; border-color: var(--gold-dark); color: var(--gold-light); font-size: 20px; }
.place-3 .podium-step { padding: 0; font-size: 14px; color: var(--gold-dark); }

.side-rank { list-style: none; margin: 0; padding: 6px 0; }
.side-rank li { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.side-rank li:nth-child(odd) { background: rgba(0,0,0,.18); }
.rank-no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--border-2); border-radius: 50%; font-size: 11px; font-weight: 600; color: #d1c4a1; flex: none; }
.rank-avatar { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); flex: none; }
.rank-name { flex: 1; font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-lv { font-size: 11px; color: var(--muted); font-weight: 500; }
.rank-flag { width: 24px; height: 14px; object-fit: cover; border-radius: 2px; border: 1px solid #000; }

/* ---------- home top ---------- */
.home-top { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; margin-bottom: 44px; }
.home-top.no-card { grid-template-columns: 1fr; }
.hero { position: relative; border: 1px solid var(--gold-dark); border-radius: 4px; overflow: hidden; min-height: 280px; background: #000; box-shadow: 0 12px 34px rgba(0,0,0,.6); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease; }
.hero:hover .hero-img { transform: scale(1.04); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.15) 55%, transparent 100%), linear-gradient(0deg, rgba(0,0,0,.6), transparent 50%); }
.hero-caption { position: absolute; left: 26px; bottom: 26px; z-index: 2; }
.hero-caption h2 { margin: 0 0 8px; font-size: 24px; font-weight: 700; text-shadow: 0 2px 10px #000; }
.hero-meta { display: flex; gap: 20px; font-size: 13px; color: #d1c4a1; }
.hero-meta a { color: var(--orange); font-weight: 600; }
.hero-corner { position: absolute; z-index: 2; width: 16px; height: 16px; border-color: var(--gold); border-style: solid; }
.c-tl { left: 6px; top: 6px; border-width: 2px 0 0 2px; } .c-tr { right: 6px; top: 6px; border-width: 2px 2px 0 0; }
.c-bl { left: 6px; bottom: 6px; border-width: 0 0 2px 2px; } .c-br { right: 6px; bottom: 6px; border-width: 0 2px 2px 0; }

.server-card .panel-head { min-height: 52px; padding: 14px; }
.live-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(242,210,92,.18); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(242,210,92,.05); } }
.server-online { text-align: center; padding: 20px 10px 16px; margin: 0 16px; border-bottom: 1px solid var(--border-2); position: relative; }
.server-online b { display: block; font-size: 32px; font-weight: 600; line-height: 1.1; }
.server-online span { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); margin-right: 4px; vertical-align: 1px; }
.server-rows div { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid rgba(58,53,25,.6); font-size: 13px; }
.server-rows b { color: var(--gold); font-size: 16px; font-weight: 600; }
.server-rows div:last-child b { color: #f4e9c6; font-size: 18px; }
.server-card .panel-body { padding: 14px 14px 16px; }
.server-card .btn-gold { white-space: nowrap; letter-spacing: 1.2px; font-size: 13px; padding: 13px 10px; }

/* ---------- news ---------- */
.tabs-head { padding: 14px; }
.tabs { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tabs a { display: block; padding: 10px 22px; border: 1px solid var(--border-2); background: rgba(0,0,0,.3); color: #e6dcb8; border-radius: 3px; font-size: 13.5px; font-weight: 500; }
.tabs a:hover { border-color: var(--gold-dark); color: var(--gold-light); }
.tabs a.active { background: linear-gradient(180deg, #3a3519, #24200e); border-color: var(--gold-dark); color: #fff; }
.news-list { display: flex; flex-direction: column; }
.news-item { padding: 20px 6px 26px; border-bottom: 1px solid var(--border); }
.news-item:last-child { border-bottom: 0; }
.news-item h3 { font-size: 19px; font-weight: 600; margin: 0 0 10px; }
.news-item h3 a { color: #f4e9c6; }
.news-item h3 a:hover { color: var(--gold-light); }
.news-admin { font-size: 14px; margin-left: 8px; color: var(--muted) !important; }
.news-admin.danger:hover { color: var(--danger) !important; }
.news-date { font-size: 12.5px; color: #c4b994; margin-bottom: 12px; }
.news-date i { color: #c0504a; margin-right: 6px; }
.news-tag { color: var(--orange); font-weight: 600; font-size: 12.5px; letter-spacing: .5px; margin-bottom: 16px; }
.news-read h1 { font-size: 26px; font-weight: 700; margin-bottom: 10px; }
.news-content { margin: 20px 0 28px; line-height: 1.8; color: #d6cba8; overflow-wrap: anywhere; }
.news-content img { border-radius: 4px; height: auto; }

.pagination { display: flex; justify-content: center; margin-top: 20px; }
.pagination .buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--border-2); border-radius: 3px; background: rgba(0,0,0,.3); color: var(--text); font-size: 13px; }
.pagination a:hover { border-color: var(--gold-dark); color: var(--gold-light); }
.pagination span.active { background: var(--btn-gold); color: #221c04; border-color: #9c8530; }

/* ---------- download ---------- */
.launcher-block { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 0 16px; }
.launcher-block .icon-box { margin-bottom: 12px; }
.launcher-block h3 { margin: 0 0 10px; font-size: 26px; font-weight: 600; }
.launcher-block p { margin: 8px 0 0; }
.mirror-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
.mirror { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--border-2); border-radius: 6px; background: rgba(0,0,0,.3); color: var(--text); }
.mirror:hover { border-color: var(--gold-dark); color: var(--text); }
.mirror-icon, .method-icon, .req-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border-2); border-radius: 6px; color: var(--gold); font-size: 18px; flex: none; background: rgba(0,0,0,.35); }
.mirror-text { flex: 1; display: flex; flex-direction: column; }
.mirror-text b { font-weight: 600; font-size: 15px; }
.mirror-text small { color: var(--muted); font-size: 12px; }
.mirror-dl { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-2); border-radius: 4px; color: var(--gold); }
.box { border: 1px solid var(--border-2); border-radius: 6px; padding: 18px 20px; background: rgba(0,0,0,.25); color: #d1c4a1; line-height: 1.7; }
.box p:last-child { margin-bottom: 0; }
.steps-plain { margin: 10px 0 0; padding-left: 18px; }
.steps-plain b { color: var(--orange); font-weight: 500; }
.code-line { display: block; padding: 14px 16px; margin: 12px 0; background: var(--input); border: 1px solid var(--border); border-radius: 4px; color: var(--gold-light); font-size: 13px; overflow-x: auto; white-space: nowrap; }
.code-inline { display: inline-block; padding: 3px 10px; background: var(--input); border: 1px solid var(--border-2); border-radius: 3px; color: #fff; font-weight: 600; }
.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.req { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border-2); border-radius: 6px; background: rgba(0,0,0,.25); }
.req b { display: block; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; }
.req span { color: var(--muted); font-size: 13px; }

/* ---------- rankings ---------- */
.rank-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.seg { display: inline-flex; padding: 4px; border: 1px solid var(--border-2); border-radius: 6px; background: rgba(0,0,0,.35); }
.seg a { padding: 9px 22px; border-radius: 4px; color: var(--text); font-weight: 500; }
.seg a i { margin-right: 6px; font-size: 12px; }
.seg a.active { background: var(--btn-gold); color: #221c04; }
.rank-search { position: relative; width: 210px; }
.rank-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; }
.rank-search input { padding: 11px 14px 11px 36px; font-size: 13px; }
.podium-lg { gap: 14px; padding: 46px 0 26px; border-bottom: 0; }
.podium-lg .podium-col { max-width: 180px; padding: 16px 12px 12px; border: 1px solid var(--border-2); border-radius: 6px; background: rgba(0,0,0,.28); }
.podium-lg .place-1 { max-width: 200px; padding-top: 20px; border-color: var(--gold-dark); background: linear-gradient(180deg, rgba(230,195,74,.08), rgba(0,0,0,.3)); margin-bottom: 0; }
.podium-lg .place-2 { margin-top: 40px; } .podium-lg .place-3 { margin-top: 50px; }
.podium-lg .podium-avatar { width: 64px; height: 64px; }
.podium-lg .place-1 .podium-avatar { width: 76px; height: 76px; }
.podium-lg .podium-name { font-size: 16px; }
.podium-meta { margin: 8px 0 12px; }
.podium-value { font-size: 18px; font-weight: 600; color: var(--gold-light); }
.podium-lg .podium-step { font-size: 20px; padding: 6px 0; }
.table-wrap { overflow-x: auto; margin: 0 -26px; }
.rank-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.rank-table th { font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: #d1c4a1; font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--border-2); }
.rank-table td { padding: 11px 16px; border-bottom: 1px solid rgba(58,53,25,.55); vertical-align: middle; }
.rank-table tr:hover td { background: rgba(230,195,74,.04); }
.rank-table th:first-child, .rank-table td:first-child { padding-left: 26px; width: 60px; }
.rank-player { display: flex; align-items: center; gap: 10px; }
.rank-player b { font-weight: 500; }

/* ---------- events ---------- */
.day-title { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 600; margin-bottom: 14px; }
.ev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.ev-card { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--border-2); border-radius: 6px; background: rgba(0,0,0,.25); min-width: 0; }
.ev-card img { width: 48px; height: 42px; flex: none; object-fit: contain; }
.ev-card b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.ev-card span { font-size: 11.5px; color: var(--muted); }
.ev-card em { font-style: normal; color: var(--orange); font-weight: 600; margin-right: 6px; }
.week { display: flex; flex-direction: column; }
.week-row { display: grid; grid-template-columns: 130px 1fr; border-bottom: 1px solid var(--border); }
.week-row.is-today { background: rgba(230,195,74,.05); box-shadow: inset 3px 0 0 var(--gold); }
.week-day { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 16px 18px; border-right: 1px solid var(--border); }
.week-day b { font-size: 16px; font-weight: 600; }
.week-events { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 12px; padding: 12px 16px; }
.week-events .ev-card { border: 0; background: none; padding: 6px 4px; }
.week-events .ev-card img { width: 40px; height: 35px; }
.rules { padding-left: 20px; line-height: 2; color: #e2d6b2; }
.rules li::marker { color: var(--gold); font-weight: 700; }

/* ---------- donate ---------- */
.donate-layout { display: grid; grid-template-columns: 280px 1fr; }
.donate-methods { padding: 20px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.method { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 14px; background: rgba(0,0,0,.3); border: 1px solid var(--border-2); border-radius: 6px; color: var(--text); font-family: var(--font); cursor: pointer; transition: border-color .15s; }
.method:hover { border-color: var(--gold-dark); }
.method.active { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(230,195,74,.3); }
.method-text { flex: 1; display: flex; flex-direction: column; }
.method-text b { font-weight: 600; }
.method-text small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.method-icon { width: 36px; height: 36px; border-radius: 50%; font-size: 15px; }
.method-foot { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px; font-size: 13px; }
.method-foot a { text-decoration: underline; }
.donate-panes { padding: 20px 24px 24px; }
.pane { display: none; }
.pane.active { display: block; }
.pane-title { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 14px; }
.pay-strip { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 10px; padding: 16px; border: 1px solid var(--border-2); border-radius: 6px; background: rgba(0,0,0,.3); margin-bottom: 12px; }
.pay-strip span { color: #b8ad86; font-weight: 700; font-size: 15px; opacity: .8; }
.num-steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 6px; }
.num-steps li { counter-increment: s; display: flex; align-items: center; gap: 12px; padding: 5px 0; flex-wrap: wrap; }
.num-steps li::before { content: counter(s); width: 22px; height: 22px; border-radius: 50%; background: var(--btn-gold); color: #221c04; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.donate-panes .box { margin: 12px 0 16px; }

/* ---------- presentation ---------- */
.page-presentation .site-bg { filter: brightness(.45); }
.pres { display: grid; grid-template-columns: 290px 1fr; min-height: calc(100vh - 66px); }
.pres-side { background: rgba(12,11,5,.94); border-right: 1px solid var(--border); padding: 28px; position: sticky; top: 66px; height: calc(100vh - 66px); overflow-y: auto; }
.pres-current { padding-bottom: 16px; border-bottom: 1px solid var(--border-2); margin-bottom: 26px; }
.pres-current b { display: block; font-size: 19px; font-weight: 700; text-transform: uppercase; margin-top: 4px; }
.pres-group { margin-bottom: 22px; }
.pres-group-title { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 0; color: var(--gold); font: 600 14px var(--font); letter-spacing: 1.8px; text-transform: uppercase; cursor: pointer; }
.pres-group-title .fa-diamond { font-size: 8px; }
.pres-group-title .caret { margin-left: auto; font-size: 10px; color: var(--muted); transition: transform .2s; }
.pres-group:not(.open) .caret { transform: rotate(180deg); }
.pres-group ul { list-style: none; margin: 14px 0 0 3px; padding: 0 0 0 16px; border-left: 1px solid var(--border-2); }
.pres-group:not(.open) ul { display: none; }
.pres-group li a { display: block; padding: 7px 0; color: #c4b994; font-size: 13.5px; position: relative; }
.pres-group li a::before { content: ""; position: absolute; left: -19px; top: 50%; width: 5px; height: 5px; background: var(--border-2); transform: translateY(-50%) rotate(45deg); }
.pres-group li a:hover, .pres-group li a.active { color: var(--gold-light); }
.pres-group li a.active::before { background: var(--gold); }
.pres-main { display: flex; flex-direction: column; padding: 24px 6% 20px; min-width: 0; }
.pres-top, .pres-bottom { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--border); color: var(--orange); font-size: 13.5px; }
.pres-top b { color: var(--gold); }
.pres-bottom { border-bottom: 0; border-top: 1px solid var(--border); padding: 16px 0 0; margin-top: auto; }
.pres-bottom a { color: var(--gold); }
.pres-bottom .fa-diamond { font-size: 8px; color: var(--orange); margin: 0 4px; }
.pres-body { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 60px 0 40px; }
.pres-title { font-size: 32px; font-weight: 600; color: var(--gold); margin: 0; text-align: center; }
.pres-diamond { color: var(--orange); font-size: 13px; margin: 14px 0 40px; }
.pres-text { max-width: 760px; text-align: center; }
.pres-text img { border-radius: 8px; border: 1px solid var(--gold-dark); box-shadow: 0 16px 40px rgba(0,0,0,.6); margin-bottom: 24px; max-height: 380px; object-fit: cover; width: 100%; }
.pres-text p { font-size: 16px; line-height: 1.9; color: #e2d6b2; }
.card-carousel { position: relative; width: 100%; max-width: 980px; display: flex; flex-direction: column; align-items: center; }
.cc-track { position: relative; width: 100%; height: 420px; }
.cc-card { position: absolute; top: 50%; left: 50%; width: 360px; border: 1px solid var(--border-2); border-radius: 8px; overflow: hidden; background: #13110a; transition: transform .4s ease, opacity .4s ease, filter .4s ease; transform: translate(-50%, -50%) scale(.7); opacity: 0; pointer-events: none; }
.cc-card img { width: 100%; height: 270px; object-fit: cover; display: block; }
.cc-info { padding: 14px 18px 18px; text-align: center; }
.cc-info b { font-size: 18px; font-weight: 600; }
.cc-info .kicker { color: var(--gold); margin: 4px 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-2); }
.cc-info p { font-size: 13.5px; color: #d1c4a1; margin: 0; }
.cc-card.is-active { transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 3; border-color: var(--gold-dark); box-shadow: 0 0 30px rgba(230,195,74,.25); pointer-events: auto; }
.cc-card.is-prev { transform: translate(-112%, -50%) scale(.82); opacity: .35; filter: blur(1px); z-index: 2; }
.cc-card.is-next { transform: translate(12%, -50%) scale(.82); opacity: .35; filter: blur(1px); z-index: 2; }
.cc-nav { position: absolute; top: 210px; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-2); background: rgba(0,0,0,.6); color: var(--gold); cursor: pointer; }
.cc-nav:hover { border-color: var(--gold); }
.cc-prev { left: 0; } .cc-next { right: 0; }
.cc-dots { display: flex; gap: 8px; margin-top: 22px; }
.cc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-2); cursor: pointer; }
.cc-dots i.active { background: var(--gold); }

/* ---------- discord widget ---------- */
.discord-widget { position: fixed; left: 28px; bottom: 28px; z-index: 90; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 16px; background: rgba(14,13,6,.95); border: 1px solid var(--border-2); border-radius: 6px; box-shadow: 0 12px 34px rgba(0,0,0,.7); }
.discord-widget.hidden { display: none; }
.dw-badge { position: relative; width: 42px; height: 42px; flex: none; }
.dw-badge img { width: 100%; height: 100%; object-fit: contain; }
.dw-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--orange); border: 2px solid #0d0c06; }
.dw-text { display: flex; flex-direction: column; padding-right: 14px; border-right: 1px solid var(--border-2); }
.dw-text b { font: 700 14px var(--font-head); letter-spacing: 1.6px; text-transform: uppercase; color: #eadba8; }
.dw-text span { font-size: 12px; color: #c4b994; }
.dw-btn { padding: 9px 16px; font-size: 13.5px; }
.dw-btn .fa-chevron-right { font-size: 10px; margin-left: 4px; }
.dw-close { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-2); background: #13110a; color: var(--muted); font-size: 11px; display: none; cursor: pointer; }
.discord-widget:hover .dw-close { display: block; }

/* ---------- legacy CMS pages (account, characters, admin, login...) ---------- */
.legacy-page .page-hd, .legacy-page .pre-social:first-child { display: none; }
.legacy-page .container { max-width: 100%; padding: 0; }
.legacy-page .row { margin-left: 0; margin-right: 0; }
.legacy-page .padding-container { padding: 0; }
.legacy-page table, .legacy-page .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(0,0,0,.2); --bs-table-color: var(--text); --bs-table-striped-color: var(--text); --bs-table-hover-bg: rgba(230,195,74,.05); color: var(--text); border-color: var(--border); width: 100% !important; margin-left: 0 !important; }
.legacy-page .table > :not(caption) > * > * { border-bottom-color: var(--border); padding: 12px 14px; background-color: var(--bs-table-bg); color: var(--text); text-shadow: none !important; vertical-align: middle; }
.legacy-page th { color: #d1c4a1; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.legacy-page hr { border-color: var(--border-2); opacity: 1; }
.legacy-page .btn, .legacy-page input[type=submit] { border-radius: 4px; font: 600 14px var(--font); padding: 11px 20px; }
.legacy-page .btn-primary, .legacy-page .btn-success, .legacy-page .btn-danger, .legacy-page input[type=submit] { background: var(--btn-gold) !important; color: #221c04 !important; border: 1px solid #9c8530 !important; box-shadow: none; }
.legacy-page .btn-primary:hover, .legacy-page .btn-success:hover, .legacy-page .btn-danger:hover, .legacy-page input[type=submit]:hover { filter: brightness(1.08); }
.legacy-page .btn-secondary, .legacy-page .btn-info, .legacy-page .btn-warning, .legacy-page .btn-default { background: rgba(0,0,0,.35); border: 1px solid var(--border-2); color: var(--text); }
.legacy-page .btn-block, .legacy-page input.btn-block { display: block; width: 100%; }
.legacy-page .card { background: rgba(0,0,0,.25); border: 1px solid var(--border-2); color: var(--text); margin-bottom: 12px; }
.legacy-page .card-header { background: rgba(0,0,0,.25); border-bottom: 1px solid var(--border-2); }
.legacy-page .card-block, .legacy-page .card-body { padding: 16px; }
.legacy-page .jumbotron { background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: 6px; }
.legacy-page .list-group-item { background: rgba(0,0,0,.25); border-color: var(--border); color: var(--text); }
.legacy-page .blogroll { padding: 0; list-style: none; }
.legacy-page a:not(.btn) { color: var(--gold); }
.legacy-page .text-danger { color: #f0928a !important; }
.legacy-page .modal-content { background: var(--panel-2); border: 1px solid var(--border-2); color: var(--text); }
.legacy-page .nav-tabs, .legacy-page .nav-pills { border-color: var(--border-2); gap: 6px; }
.legacy-page .nav-link { color: var(--text); border: 1px solid var(--border-2) !important; border-radius: 3px !important; }
.legacy-page .nav-link.active { background: var(--btn-gold) !important; color: #221c04 !important; }
.alert { border-radius: 4px; font-size: 13px; padding: 12px 16px; margin-bottom: 14px; position: relative; }
.alert-danger { background: rgba(90,20,15,.3); border: 1px solid #6b2a24; color: #f0b6ae; }
.alert-success { background: rgba(20,70,25,.3); border: 1px solid #2f5c33; color: #b8e2ba; }
.alert-info, .alert-warning { background: rgba(0,0,0,.3); border: 1px solid var(--border-2); color: #d1c4a1; }
.alert-heading { color: inherit; font-size: 16px; }
.alert .close, .alert .btn-close { position: absolute; right: 10px; top: 10px; background: none; border: 0; color: inherit; opacity: .7; }
.alert .btn-close::before { content: "\f00d"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.collapse:not(.show) { display: none; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0904; }
::-webkit-scrollbar-thumb { background: #3a3519; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #6b5f2a; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
	.topnav a { padding: 10px 12px; font-size: 12.5px; }
	.topnav a.active::after { left: 12px; right: 12px; }
}
@media (max-width: 1100px) {
	.topbar-inner { justify-content: space-between; }
	.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.topbar-logo { display: block; height: 46px; }
	.topbar-logo img { height: 46px; width: auto; }
	.topnav { display: none; position: absolute; top: 66px; left: 0; right: 0; background: var(--topbar); border-bottom: 1px solid var(--border-2); padding: 10px 16px 16px; }
	.topnav.open { display: block; }
	.topnav ul { flex-direction: column; align-items: stretch; gap: 4px; }
	.topnav a { padding: 12px 14px; }
	.topnav a.active::after { display: none; }
	.topnav a.active { background: rgba(230,195,74,.08); }
	.lang-select { position: static; transform: none; }
}
@media (max-width: 900px) {
	.layout { grid-template-columns: 1fr; }
	.content { order: 1; }
	.sidebar { order: 2; }
	.home-top { grid-template-columns: 1fr; margin-bottom: 18px; }
	.ev-grid, .week-events { grid-template-columns: repeat(2, 1fr); }
	.donate-layout { grid-template-columns: 1fr; }
	.donate-methods { border-right: 0; border-bottom: 1px solid var(--border); }
	.pres { grid-template-columns: 1fr; }
	.pres-side { position: static; height: auto; }
	.site-logo img { max-height: 110px; }
}
@media (max-width: 640px) {
	.site-main { padding: 0 16px; }
	.site-logo { padding: 18px 0; }
	.panel-main .panel-body { padding: 18px 16px; }
	.table-wrap { margin: 0 -16px; }
	.rank-table th:first-child, .rank-table td:first-child { padding-left: 16px; }
	.form-cols, .req-grid { grid-template-columns: 1fr; gap: 0; }
	.req-grid { gap: 10px; }
	.ev-grid, .week-events { grid-template-columns: 1fr; }
	.week-row { grid-template-columns: 1fr; }
	.week-day { flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--border); padding: 12px 16px; }
	.hero { min-height: 220px; }
	.hero-caption h2 { font-size: 19px; }
	.rank-search { width: 100%; }
	.podium-lg { gap: 6px; }
	.podium-lg .podium-col { padding: 12px 6px 8px; }
	.podium-lg .podium-name { font-size: 13px; }
	.podium-lg .podium-value { font-size: 14px; }
	.btn-wide { min-width: 0; width: 100%; }
	.tabs a { padding: 9px 14px; }
	.discord-widget { left: 10px; right: 10px; bottom: 10px; gap: 10px; }
	.dw-text { flex: 1; border-right: 0; padding-right: 0; }
	.dw-text b { font-size: 13px; }
	.cc-card { width: 78%; }
	.cc-card img { height: 200px; }
	.cc-track { height: 380px; }
	.cc-nav { top: 190px; }
	.pres-main { padding: 20px 16px; }
	.pres-title { font-size: 24px; }
	.site-footer { padding-bottom: 110px; }
}

.page-presentation .discord-widget { display: none; }

/* ---------- NOVX heading font ---------- */
.panel-head h2, .panel-head h3, .section-title, .day-title, .hero-caption h2, .pres-title, .pres-current b,
.launcher-block h3, .news-item h3, .news-read h1, .podium-step, .server-online b, .tabs a, .seg a, .bar-title { font-family: var(--font-head); }
.panel-head h2, .panel-head h3 { letter-spacing: 2px; }

/* =====================================================================
   NOVX POLISH + MOTION  (History2-style animations)
   All animations are switched off for visitors who ask for reduced motion.
   ===================================================================== */

/* ---- surfaces: richer panels, bevel + gold edge ---- */
.panel { background: var(--surface-panel); border-color: var(--border); box-shadow: 0 14px 34px rgba(0,0,0,.5), var(--bevel); position: relative; }
.panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .55), transparent); }
.panel-head { background: var(--surface-head); border-bottom-color: rgba(var(--gold-rgb), .22); }
.panel-head h3 { color: var(--gold); text-shadow: 0 0 12px rgba(var(--gold-rgb), .25); }
.panel-head h3::before { background: linear-gradient(180deg, var(--gold-light), var(--gold-dark)); box-shadow: 0 0 8px rgba(var(--gold-rgb), .6); }
.panel-head h2 { color: var(--gold-light); text-shadow: 0 2px 12px rgba(0,0,0,.8), 0 0 18px rgba(var(--gold-rgb), .18); }

/* ---- top bar ---- */
.topbar { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(var(--gold-rgb), .18); }
.topbar::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .6), transparent); }
.topnav a { transition: color .2s, border-color .2s, background .2s, transform .15s, box-shadow .2s; }
.topnav a:not(.highlight)::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 0; height: 2px; border-radius: 1px; transform: translateX(-50%);
	background: var(--gold); box-shadow: 0 0 6px rgba(var(--gold-rgb), .6); transition: width .25s var(--ease-out); display: block; }
.topnav a:not(.highlight):hover::after { width: 60%; }
.topnav a.active:not(.highlight)::after { display: block; width: 60%; }
.topnav a:hover { border-color: transparent; }
.topnav a.active { border-color: rgba(var(--gold-rgb), .35); }
.topnav a.highlight { background: var(--btn-gold); border: 1px solid rgba(251,233,160,.5); box-shadow: 0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3); }
.topnav a.highlight:hover { filter: none; background: var(--btn-gold-hover); transform: translateY(-1px); box-shadow: 0 2px 16px rgba(var(--gold-rgb), .45), inset 0 1px 0 rgba(255,255,255,.35); }
.topnav a.highlight:active { transform: none; }
.lang-current { transition: border-color .2s, color .2s; }
.lang-current:hover { border-color: var(--gold-dark); color: var(--gold-light); }
.lang-current i { transition: transform .2s; }
.lang-select.open .lang-current i { transform: rotate(180deg); }
.lang-select.open .lang-list { animation: nx-drop .18s var(--ease-out); }

/* ---- logo: rise in, then a slow "lightning" glow ---- */
.site-logo img { animation: nx-logo-in .9s var(--ease-out) both, nx-logo-glow 4.5s ease-in-out 1s infinite; }

/* ---- buttons: lift, glow, shine sweep ---- */
.btn-gold { position: relative; overflow: hidden; border-color: rgba(251,233,160,.45); transition: background .2s, box-shadow .2s, transform .15s; }
.btn-gold::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-180%) skewX(-18deg); transition: transform .7s var(--ease-out); }
.btn-gold:hover { filter: none; background: var(--btn-gold-hover); transform: translateY(-1px); box-shadow: 0 4px 18px rgba(var(--gold-rgb), .4), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-gold:hover::after { transform: translateX(320%) skewX(-18deg); }
.btn-gold:active { transform: none; box-shadow: inset 0 2px 4px rgba(0,0,0,.3); }
.btn-dark, .btn-mini { transition: border-color .2s, color .2s, background .2s, box-shadow .2s; }
.btn-dark:hover, .btn-mini:hover { background: rgba(var(--gold-rgb), .06); box-shadow: 0 0 12px rgba(var(--gold-rgb), .15); }
.side-login .btn-gold, .form-theme .btn-gold.btn-block { letter-spacing: 1px; }

/* ---- inputs ---- */
.input-icon input:focus, .form-control:focus, .rank-search input:focus { box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .14), 0 0 14px rgba(var(--gold-rgb), .12); }
.input-icon input:focus + i, .input-icon:focus-within i { color: var(--gold); }

/* ---- page enter + panels rising in order ---- */
.site-main { animation: nx-page .45s var(--ease-out) both; }
.sidebar > .panel, .content > .panel, .home-top > * { animation: nx-rise .6s var(--ease-out) both; }
.sidebar > .panel:nth-child(2) { animation-delay: .08s; }
.sidebar > .panel:nth-child(3) { animation-delay: .16s; }
.content > .panel:nth-child(2), .home-top > *:nth-child(2) { animation-delay: .1s; }
.content > .panel:nth-child(3) { animation-delay: .18s; }

/* ---- sidebar events: staggered rise, hover bar, live dot ---- */
.side-events li { position: relative; opacity: 0; animation: nx-rise-sm .5s var(--ease-out) forwards; animation-delay: calc(.25s + var(--i, 0) * 70ms);
	border-left: 2px solid transparent; transition: background .18s, border-color .18s; }
.side-events li:hover { background: rgba(var(--gold-rgb), .05); border-left-color: rgba(var(--gold-rgb), .55); }
.side-events li:hover .ev-icon { transform: scale(1.08) rotate(-3deg); filter: drop-shadow(0 0 8px rgba(var(--gold-rgb), .45)); }
.ev-icon, .ev-card img { transition: transform .25s var(--ease-back), filter .25s; }
.ev-text em::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 1px;
	background: var(--success); box-shadow: 0 0 6px rgba(var(--success-rgb), .8); animation: nx-ember 1.8s ease-in-out infinite; }
.divider-btn i { transition: transform .2s; }
.divider-btn:hover span { color: var(--gold-light); text-shadow: 0 0 10px rgba(var(--gold-rgb), .5); }

/* ---- toplist: podium pops up, crown drops, champion glows, rows rise ---- */
.podium-col { animation: nx-slot .55s var(--ease-back) both; }
.podium-col.place-2 { animation-delay: .35s; } .podium-col.place-1 { animation-delay: .45s; } .podium-col.place-3 { animation-delay: .55s; }
.podium-crown { text-shadow: 0 0 10px rgba(var(--gold-rgb), .8); animation: nx-crown .7s var(--ease-back) 1s both, nx-float 3.4s ease-in-out 1.8s infinite; }
.podium-avatar { transition: transform .18s; }
.podium-col:hover .podium-avatar { transform: translateY(-2px) scale(1.05); }
.place-1 .podium-avatar { border-color: var(--gold); animation: nx-champ-arrive .7s ease-out 1s both, nx-champ 3s ease-in-out 1.8s infinite; }
.place-2 .podium-avatar { border-color: rgba(200,200,200,.45); }
.place-3 .podium-avatar { border-color: rgba(176,120,60,.55); }
.side-rank li { position: relative; overflow: hidden; animation: nx-rise-row .5s var(--ease-back) both; animation-delay: calc(.9s + var(--i, 0) * 65ms); transition: background .15s; }
.side-rank li::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(var(--gold-rgb), .14), transparent); transform: translateX(-160%) skewX(-18deg); transition: transform .6s; }
.side-rank li:hover { background: rgba(var(--gold-rgb), .06); }
.side-rank li:hover::after { transform: translateX(420%) skewX(-18deg); }

/* ---- home hero: slow ken-burns + corner glint ---- */
.hero { border-color: rgba(var(--gold-rgb), .5); }
.hero-img { animation: nx-kenburns 14s ease-in-out infinite alternate; transition: none; }
.hero:hover .hero-img { transform: none; }
.hero-caption { animation: nx-rise .7s var(--ease-out) .35s both; }
.hero-corner { box-shadow: 0 0 8px rgba(var(--gold-rgb), .5); animation: nx-ember 3s ease-in-out infinite; }
.tag-gold { animation: nx-drop .5s var(--ease-out) .5s both; }

/* ---- server card: green live ping ---- */
.live-dot, .dot, .dw-dot { background: var(--success); }
.live-dot { position: relative; box-shadow: 0 0 8px rgba(var(--success-rgb), .8); animation: none; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--success); animation: nx-ping 2.2s ease-out infinite; }
.server-online b { background: linear-gradient(180deg, #fff6cf, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.server-rows div { transition: background .15s; }
.server-rows div:hover { background: rgba(var(--gold-rgb), .04); }

/* ---- news ---- */
.tabs a { transition: border-color .2s, color .2s, background .2s, box-shadow .2s; }
.tabs a:hover { box-shadow: 0 0 12px rgba(var(--gold-rgb), .15); }
.tabs a.active { background: linear-gradient(180deg, rgba(var(--gold-rgb), .2), rgba(var(--gold-rgb), .05)); border-color: var(--gold); color: var(--gold-light); box-shadow: inset 0 1px 0 rgba(255,236,160,.15); }
.news-item { transition: background .2s; border-radius: 4px; }
.news-item:hover { background: rgba(var(--gold-rgb), .025); }
.news-item h3 a { transition: color .2s, text-shadow .2s; }
.news-item h3 a:hover { text-shadow: 0 0 14px rgba(var(--gold-rgb), .35); }

/* ---- cards that lift on hover ---- */
.ev-card, .mirror, .req, .method, .podium-lg .podium-col { transition: border-color .18s, transform .18s, box-shadow .18s, background .18s; }
.ev-card:hover, .mirror:hover, .req:hover, .method:hover, .podium-lg .podium-col:hover { border-color: rgba(var(--gold-rgb), .6); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 14px rgba(var(--gold-rgb), .12); }
.ev-card:hover img { transform: scale(1.08) rotate(-3deg); filter: drop-shadow(0 0 8px rgba(var(--gold-rgb), .45)); }
.ev-grid .ev-card, .week-row { animation: nx-rise-sm .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }
.week-events .ev-card:hover { transform: none; box-shadow: none; }
.week-row { transition: background .2s; }
.week-row:hover { background: rgba(var(--gold-rgb), .03); }
.week-row.is-today { background: linear-gradient(90deg, rgba(var(--gold-rgb), .1), rgba(var(--gold-rgb), .02)); }
.pill-gold { box-shadow: 0 0 10px rgba(var(--gold-rgb), .35); }
.rank-table tbody tr { transition: background .15s; }
.icon-box { animation: nx-champ 3.5s ease-in-out infinite; }

/* ---- discord widget: slides in, floats, pulsing ring ---- */
.discord-widget { background: var(--surface-panel); border-color: rgba(var(--gold-rgb), .35); box-shadow: 0 12px 34px rgba(0,0,0,.7), var(--bevel);
	animation: nx-slide-in .7s var(--ease-out) .8s both, nx-float-6 3.5s ease-in-out 1.6s infinite; transition: border-color .3s, box-shadow .3s; }
.discord-widget:hover { border-color: var(--gold); box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 20px rgba(var(--gold-rgb), .2), var(--bevel); animation-play-state: running, paused; }
.dw-dot { animation: nx-ring 2.5s ease-in-out infinite; }
.dw-btn .fa-chevron-right { transition: transform .25s; }
.discord-widget:hover .dw-btn .fa-chevron-right { transform: translateX(3px); }

/* ---- scroll reveal (class added by js/theme.js) ---- */
.nx-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.nx-reveal.nx-in { opacity: 1; transform: none; }

/* ---- presentation ---- */
.cc-nav { transition: border-color .2s, box-shadow .2s, transform .15s; }
.cc-nav:hover { box-shadow: 0 0 14px rgba(var(--gold-rgb), .35); transform: translateY(-50%) scale(1.06); }
.pres-body { animation: nx-rise .6s var(--ease-out) both; }

/* ---- keyframes ---- */
@keyframes nx-page { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nx-rise-sm { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nx-rise-row { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes nx-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes nx-slot { from { opacity: 0; transform: translateY(26px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes nx-crown { from { opacity: 0; transform: translateY(-26px) scale(.7) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes nx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes nx-float-6 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes nx-champ-arrive { 0% { box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .2), 0 0 6px rgba(var(--gold-rgb), .2); } 40% { box-shadow: 0 0 0 2px rgba(251,233,160,.8), 0 0 28px rgba(var(--gold-rgb), .85); } 100% { box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .35), 0 0 14px rgba(var(--gold-rgb), .3); } }
@keyframes nx-champ { 0%, 100% { box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .25), 0 0 10px rgba(var(--gold-rgb), .25); } 50% { box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .5), 0 0 22px rgba(var(--gold-rgb), .5); } }
@keyframes nx-ember { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes nx-ping { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }
@keyframes nx-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--success-rgb), .5); } 50% { box-shadow: 0 0 0 4px rgba(var(--success-rgb), 0); } }
@keyframes nx-kenburns { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@keyframes nx-slide-in { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes nx-logo-in { from { opacity: 0; transform: translateY(-12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes nx-logo-glow {
	0%, 100% { filter: drop-shadow(0 8px 22px rgba(0,0,0,.85)) drop-shadow(0 0 14px rgba(var(--gold-rgb), .15)); }
	50%      { filter: drop-shadow(0 8px 22px rgba(0,0,0,.85)) drop-shadow(0 0 30px rgba(var(--gold-rgb), .45)); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.side-events li, .nx-reveal { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 1100px) {
	.topnav a:not(.highlight)::after { display: none !important; }
	.topnav.open { animation: nx-drop .2s var(--ease-out); }
}

/* =====================================================================
   3-COLUMN LAYOUT: account (left) | content (center) | events + toplist (right)
   Column widths: change --sidebar-width / --sidebar-right-width / --layout-wide
   ===================================================================== */
:root { --layout-wide: 1480px; --sidebar-left-width: 260px; --sidebar-right-width: 280px; }
.site-main:has(.layout-3) { max-width: var(--layout-wide); }
.layout-3 {
	grid-template-columns: var(--sidebar-left-width) minmax(0, 1fr) var(--sidebar-right-width);
	grid-template-areas: "left content right";
}
.layout-3 .sidebar-left  { grid-area: left; }
.layout-3 .content       { grid-area: content; }
.layout-3 .sidebar-right { grid-area: right; }
.content > .home-top { margin-bottom: 0; grid-template-columns: minmax(0, 1fr) 240px; }
.sidebar-right > .panel:nth-child(1) { animation-delay: .12s; }
.sidebar-right > .panel:nth-child(2) { animation-delay: .22s; }

/* medium screens: right column moves under the left one */
@media (max-width: 1280px) {
	.layout-3 {
		grid-template-columns: var(--sidebar-left-width) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "left content" "right content";
	}
}
/* small screens: one column - content, then account, then events/toplist */
@media (max-width: 900px) {
	.layout-3 { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "content" "left" "right"; }
	.content > .home-top { grid-template-columns: 1fr; }
}
/* server card lives in the left column; home hero uses the full center width */
.content > .home-top.no-card { grid-template-columns: 1fr; }
.content > .home-top .hero { min-height: 330px; }
.sidebar .server-card .server-online b { font-size: 30px; }

/* ---------- Admin > Theme settings ---------- */
.theme-admin .ts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; align-items: start; }
.theme-admin .ts-grid-images { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.theme-admin .field-label { margin-top: 10px; }
.theme-admin .ts-image { padding: 12px; border: 1px solid var(--border-2); border-radius: 6px; background: rgba(0,0,0,.25); }
.theme-admin .ts-image .field-label { margin-top: 0; }
.theme-admin .ts-preview { height: 90px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; border-radius: 4px;
	background: repeating-conic-gradient(#1a180c 0% 25%, #12110a 0% 50%) 50% / 16px 16px; }
.theme-admin .ts-preview img { max-height: 80px; max-width: 100%; object-fit: contain; }
.theme-admin input[type=file].form-control { padding: 8px 10px; font-size: 12.5px; }
.theme-admin .ts-switch, .theme-admin .ts-check { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; cursor: pointer; font-size: 13.5px; }
.theme-admin .ts-check { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.theme-admin .ts-switch input, .theme-admin .ts-check input, .theme-admin .ts-table input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--gold); }
.theme-admin .ts-table { margin: 0; }
.theme-admin .ts-table .rank-table { min-width: 640px; }
.theme-admin .ts-table td { padding: 8px 10px; }
.theme-admin .ts-table .form-control { padding: 9px 10px; font-size: 13px; }
.theme-admin .ts-table td:first-child { width: 56px; text-align: center; }
.theme-admin .ts-ev-icon { width: 38px; height: 34px; object-fit: contain; }
.theme-admin .ts-ev-pick { min-width: 210px; display: grid; gap: 6px; }
.theme-admin .ts-save { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: center; padding: 16px 0 6px; margin-top: 18px;
	background: linear-gradient(180deg, transparent, rgba(12,11,5,.95) 35%); }
@media (max-width: 900px) {
	.theme-admin .ts-grid, .theme-admin .ts-grid-images { grid-template-columns: 1fr; }
}
/* no scroll-reveal animation inside admin pages */
.legacy-page .nx-reveal { opacity: 1; transform: none; transition: none; }