/* =====================================================================
   Mytheria — "Modern Gaming" theme  ·  Znote AAC (Tibia 8.0)
   Dark slate base + violet/cyan neon accents, clean cards, glow hovers.
   Display: Rajdhani · Body: Inter. Class names preserved from the layout
   (.main .layout .sidebar .sidemenu .well .header .body .banner .leftPane
   .rightPane alerts widgets…) so no PHP changes are needed.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
	/* --- surfaces (near-black slate) --- */
	--bg-0:    #070810;   /* page */
	--bg-1:    #0d0f1a;   /* deep panel */
	--panel:   #141826;   /* card base */
	--panel-2: #1b2032;   /* raised / header plate */
	--line:    #262c40;   /* borders */
	--line-2:  #333a54;

	/* --- neon accents --- */
	--violet:   #7c5cff;
	--violet-2: #a48bff;
	--cyan:     #22d3ee;
	--cyan-2:   #67e8f9;
	--accent:   var(--violet);
	--accent-h: var(--violet-2);

	/* --- text --- */
	--text:  #d7dcec;
	--head:  #f2f4fb;
	--muted: #8a91ab;

	/* --- legacy Znote vars (remapped, keep names for compat) --- */
	--primary:   var(--panel-2);
	--secondary: var(--bg-1);
	--third:     #cfd5ea;
	--border:    var(--line);
	--font-color: var(--text);
	--anchor:       var(--cyan);
	--anchor-hover: var(--cyan-2);

	/* alert palette */
	--bg-danger:  #2a1116; --color-danger:  #ff8fa3; --border-danger:  #7d2436;
	--bg-warning: #2a2410; --color-warning: #ffd66b; --border-warning: #7d6620;
	--bg-info:    #0e2230; --color-info:    #6fd6ef; --border-info:    #1d5570;
	--bg-success: #0e2620; --color-success: #6ee7b7; --border-success: #1d6a4f;
	--bg-default: #171b29; --color-default: var(--violet-2); --border-default: var(--line);

	--radius: 12px;
	--radius-sm: 8px;
	--shadow: 0 18px 40px -20px rgba(0,0,0,.85);
	--glow-v: 0 0 0 1px rgba(124,92,255,.35), 0 0 24px -6px rgba(124,92,255,.55);
	--glow-c: 0 0 0 1px rgba(34,211,238,.30), 0 0 22px -6px rgba(34,211,238,.5);
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box;
	transition: color .16s ease, background-color .16s ease, border-color .16s ease,
		box-shadow .16s ease, transform .16s ease, opacity .16s ease; }
body, ul { margin: 0; padding: 0; }
li { list-style: none; }
html { scroll-behavior: smooth; }

body {
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text);
	background-color: var(--bg-0);
	background-image:
		radial-gradient(1100px 560px at 78% -6%, rgba(124,92,255,.16), transparent 60%),
		radial-gradient(900px 520px at 8% 4%, rgba(34,211,238,.10), transparent 55%),
		linear-gradient(180deg, #05060c 0%, #0a0c15 45%, #070810 100%);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
}
/* faint dotted-grid texture over everything */
body::before {
	content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
	background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: radial-gradient(1200px 700px at 50% 0%, #000 40%, transparent 85%);
}

h1,h2,h3,h4,h5 { font-family: 'Rajdhani', 'Inter', sans-serif; color: var(--head);
	letter-spacing: .01em; font-weight: 700; margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

a { text-decoration: none; color: var(--anchor); }
a:hover { color: var(--anchor-hover); }
a:hover, button:hover, input[type="submit"]:hover { cursor: pointer; }

::selection { background: rgba(124,92,255,.35); color: #fff; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: #2b3350; border-radius: 20px; border: 2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover { background: var(--violet); }

/* ---------------------------------------------------------------- layout */
.main { position: relative; z-index: 1; }
.layout {
	display: flex; align-items: flex-start; gap: 22px;
	max-width: 1240px; margin: 0 auto; padding: 22px 18px 40px;
}
.sidebar { flex: 0 0 244px; }
.content { flex: 1 1 auto; min-width: 0; }

.pull-left  { float: left; }
.pull-right { float: right; }
.preventCollapse::after { content: ""; display: block; clear: both; }
.centralizeContent { text-align: center; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- sidebar / brand */
.brand { display: block; text-align: center; padding: 6px 0 14px; }
.brand img { max-width: 190px; height: auto; filter: drop-shadow(0 6px 18px rgba(124,92,255,.35)); }
.brand:hover img { transform: translateY(-2px); filter: drop-shadow(0 10px 26px rgba(124,92,255,.55)); }

.sidemenu {
	background: linear-gradient(180deg, var(--panel) 0%, var(--bg-1) 100%);
	border: 1px solid var(--line); border-radius: var(--radius);
	padding: 14px 12px; box-shadow: var(--shadow);
}
.sidemenu .loginbar { display: flex; gap: 8px; margin-bottom: 14px; }
.sidemenu .loginbar a {
	flex: 1; text-align: center; padding: 9px 6px; border-radius: var(--radius-sm);
	font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: .95rem; letter-spacing: .03em;
	color: #fff; background: linear-gradient(180deg, #232a42, #1a2035);
	border: 1px solid var(--line-2);
}
.sidemenu .loginbar a:first-child { background: linear-gradient(180deg, var(--violet), #5b3fe0); border-color: transparent; }
.sidemenu .loginbar a:hover { transform: translateY(-1px); box-shadow: var(--glow-v); }
.sidemenu .loginbar a i { margin-right: 4px; }

.sidemenu .cat {
	font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: .78rem;
	text-transform: uppercase; letter-spacing: .16em; color: var(--muted);
	margin: 16px 6px 7px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
	display: flex; align-items: center; gap: 8px;
}
.sidemenu .cat:first-of-type { margin-top: 4px; }
.sidemenu .cat i { color: var(--cyan); font-size: .95rem; }
.sidemenu ul { margin-bottom: 4px; }
.sidemenu li a {
	display: block; padding: 7px 12px; border-radius: var(--radius-sm);
	color: var(--text); font-weight: 500; font-size: .92rem;
	border-left: 2px solid transparent;
}
.sidemenu li a:hover {
	color: #fff; background: rgba(124,92,255,.12);
	border-left-color: var(--violet); padding-left: 16px;
}

/* ---------------------------------------------------------------- cards (.well) */
.well {
	background: linear-gradient(180deg, var(--panel) 0%, #11141f 100%);
	border: 1px solid var(--line); border-radius: var(--radius);
	margin-bottom: 20px; box-shadow: var(--shadow); overflow: hidden;
}
.well:hover { border-color: var(--line-2); }

.header {
	font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.05rem;
	letter-spacing: .04em; text-transform: uppercase; color: var(--head);
	padding: 12px 18px; background: linear-gradient(180deg, var(--panel-2), #171b2a);
	border-bottom: 1px solid var(--line); position: relative;
}
.header::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
	background: linear-gradient(180deg, var(--violet), var(--cyan));
}
.body { padding: 16px 18px; color: var(--text); }
.body img { max-width: 100%; height: auto; }

/* feed / panes */
/* The feed wrapper is just a layout container (holds the two float columns) — NOT a card. The center
   content is its own card (.leftPane below) so it reads as a separate box from the right widgets,
   exactly like the sidebar menu is separate from the content. */
.feedContainer { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }

/* center content = its own card */
.leftPane {
	width: calc(68% - 11px); padding: 22px 24px 26px;
	background: linear-gradient(180deg, var(--panel) 0%, #11141f 100%);
	border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
@media (max-width: 560px) { .leftPane { padding: 18px 16px 20px; } }
.rightPane { width: calc(32% - 11px); }
.leftPane img { max-width: 100%; }
.postHolder { margin-bottom: 20px; }
.postHolder iframe { max-width: 100%; border: 0; border-radius: var(--radius-sm); }

/* ---------------------------------------------------------------- banner
   Clean image only. Drop art at layout/img/banner.webp|png (recommended 1920x480,
   ~4:1, cover). If it is missing the neon gradient shows so it is never empty. */
.banner {
	position: relative; height: 260px; margin-bottom: 22px; border-radius: var(--radius);
	border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow);
	background-color: #0e1120;
	background-image:
		image-set(url("../img/banner.webp") type("image/webp"), url("../img/banner.png") type("image/png")),
		radial-gradient(700px 320px at 20% 15%, rgba(124,92,255,.40), transparent 60%),
		radial-gradient(620px 320px at 85% 95%, rgba(34,211,238,.30), transparent 60%),
		linear-gradient(120deg, #10131f 0%, #171b2c 60%, #0e1120 100%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover, auto, auto, auto;
}

/* ---------------------------------------------------------------- server status widget */
.statusWidget { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.statusPill {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 7px 16px; border-radius: 999px;
	background: var(--bg-1); border: 1px solid var(--line-2);
	font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; font-size: .9rem; color: #ff8fa3;
}
.statusPill.online { color: #6ee7b7; }
.statusPill .dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; }
.statusPill.online .dot { background: #34d399; animation: pulse 2s infinite; }
.statusCount { font-size: .92rem; color: var(--muted); }
.statusCount b { color: var(--head); font-family: 'Rajdhani', sans-serif; font-size: 1.35rem; font-weight: 700; margin-right: 4px; }
.saveCountdown { display: flex; flex-direction: column; align-items: center; gap: 3px;
	width: 100%; margin-top: 4px; padding-top: 13px; border-top: 1px solid var(--line); }
.saveCountdown .scLabel { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem;
	text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.saveCountdown .scLabel i { color: var(--cyan); }
.saveCountdown .scTimer { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.5rem;
	letter-spacing: .05em; color: var(--head); font-variant-numeric: tabular-nums; }
@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); }
	70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
	100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

/* ---------------------------------------------------------------- features widget */
.featureList { display: flex; flex-direction: column; gap: 2px; }
.featureList li { display: flex; align-items: flex-start; gap: 11px; padding: 9px 6px; border-radius: var(--radius-sm); }
.featureList li:hover { background: rgba(124,92,255,.09); }
.featureList li i {
	flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 9px;
	background: linear-gradient(180deg, rgba(124,92,255,.18), rgba(34,211,238,.10));
	border: 1px solid var(--line-2); color: var(--violet-2); font-size: .95rem;
}
.featureList li:hover i { color: var(--cyan-2); border-color: var(--violet); box-shadow: var(--glow-v); }
.featureList b { display: block; font-family: 'Rajdhani', sans-serif; font-weight: 700;
	font-size: .96rem; color: var(--head); letter-spacing: .01em; line-height: 1.25; }
.featureList span { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.featureList li { cursor: pointer; }
.featuresAll { display:inline-flex; align-items:center; gap:6px; margin-top: 12px; font-size:.8rem; font-weight:600;
	color: var(--cyan); text-decoration:none; }
.featuresAll:hover { color: var(--cyan-2); }
.featuresAll i { font-size:.72rem; }

/* ---------------------------------------------------------------- news posts */
.newsPost { margin-bottom: 20px; }
.newsPost .header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.newsPost .newsMeta { font-family: 'Inter', sans-serif; font-weight: 500; text-transform: none;
	letter-spacing: 0; font-size: .8rem; color: var(--muted); }
.newsPost .newsMeta i { color: var(--cyan); margin-right: 5px; }
.newsPost .body { line-height: 1.7; }

/* ---------------------------------------------------------------- changelog ticker (home) */
/* compact, collapsed entries with a + toggle so Latest News stays the focus */
.changelogTicker { margin-bottom: 20px; }
.changelogTicker .header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.changelogTicker .clFull { font-family: 'Inter', sans-serif; text-transform: none; letter-spacing: 0;
	font-size: .76rem; font-weight: 600; color: var(--cyan); display: inline-flex; align-items: center; gap: 4px; }
.changelogTicker .clFull:hover { color: var(--cyan-2); }
.changelogTicker .body { padding: 2px 0; }
.clItem { border-bottom: 1px solid var(--line); }
.clItem:last-child { border-bottom: 0; }
.clToggle { display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
	background: none; border: 0; cursor: pointer; padding: 11px 18px; color: var(--text); font: inherit; }
.clToggle:hover { background: rgba(124,92,255,.06); }
.clPlus { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px;
	background: rgba(124,92,255,.14); border: 1px solid var(--line-2); color: var(--violet-2); margin-top: 1px; }
.clPlus i { font-size: .7rem; transition: transform .2s ease; }
.clItem.open .clPlus i { transform: rotate(45deg); }
.clDate { flex: 0 0 auto; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: .84rem;
	color: var(--muted); letter-spacing: .02em; margin-top: 2px; white-space: nowrap; }
.clText { flex: 1 1 auto; min-width: 0; color: var(--text); font-size: .9rem; line-height: 1.55;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clItem.open .clText { white-space: normal; overflow: visible; }

/* countdown / topPane
   Sits directly under the banner, full width of the feed container (which has no padding).
   countdown.js writes "<b>Server starts in:</b> 6d 3h 12m 4s" into #countDownTimer, so the <b>
   is styled as the small caption above the digits. */
.topPane { padding: 0; background: transparent; border: 0; box-shadow: none; margin-bottom: 18px; }
.launchBar {
	display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
	padding: 14px 22px;
	background: linear-gradient(120deg, rgba(124,92,255,.18), rgba(34,211,238,.09));
	border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow);
}
.launchBar .lbLeft { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.35; }
.launchBar .lbLabel {
	font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase;
	letter-spacing: .11em; font-size: .76rem; color: var(--muted);
}
.launchBar .lbDate { color: var(--head); font-weight: 600; font-size: .96rem; }
#countDownTimer {
	font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.6rem;
	letter-spacing: .06em; color: var(--cyan); text-align: right; white-space: nowrap;
	text-shadow: 0 0 20px rgba(34,211,238,.35); font-variant-numeric: tabular-nums;
}
#countDownTimer b {
	display: block; font-family: 'Rajdhani', sans-serif; font-weight: 700;
	text-transform: uppercase; letter-spacing: .11em; font-size: .76rem;
	color: var(--muted); text-shadow: none;
}
@media (max-width: 620px) {
	.launchBar { justify-content: center; text-align: center; }
	.launchBar .lbLeft { align-items: center; }
	#countDownTimer { text-align: center; font-size: 1.4rem; }
}

/* ---------------------------------------------------------------- tables */
.body table, #changelogTable, #characterProfileTable { width: 100%; border-collapse: collapse; }
.body table th, #changelogTable th {
	text-align: left; font-family: 'Rajdhani', sans-serif; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; color: var(--muted);
	padding: 9px 12px; border-bottom: 1px solid var(--line-2);
}
.body table td, #changelogTable td {
	padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: .92rem;
}
.body table tr:last-child td { border-bottom: 0; }
.body table tbody tr:hover td { background: rgba(124,92,255,.08); }
#changelogTable .yellow td { color: var(--cyan-2); }

/* top-player rank cells */
.body table td:first-child { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- My Account: character list */
.tableScroll { overflow-x: auto; max-width: 100%; margin: 4px 0 20px; }
#myaccountTable { width: 100%; border-collapse: collapse; }
#myaccountTable .yellow th {
	text-align: left; font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase;
	letter-spacing: .05em; font-size: .74rem; color: var(--violet-2);
	padding: 9px 10px; border-bottom: 1px solid var(--line-2);
}
#myaccountTable td { padding: 10px 10px; border-bottom: 1px solid var(--line); vertical-align: middle;
	font-size: .9rem; color: var(--text); }
#myaccountTable tr:last-child td { border-bottom: 0; }
#myaccountTable tr:hover td { background: rgba(124,92,255,.07); }
#myaccountTable td:first-child a { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1rem; color: var(--cyan); }
#myaccountTable td:first-child a:hover { color: var(--cyan-2); }
#myaccountTable td:nth-child(2) { font-family: 'Rajdhani', sans-serif; font-weight: 700; color: var(--head); font-variant-numeric: tabular-nums; }
#myaccountTable td:nth-child(5) { color: var(--muted); font-size: .85rem; } /* last login (wraps to fit) */

/* hide pill (visible / hidden) */
.accHide { display: inline-flex; align-items: center; font-family: 'Rajdhani', sans-serif;
	font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem;
	padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-2);
	background: rgba(255,255,255,.03); color: var(--muted); white-space: nowrap; }
.accHide.visible { color: var(--color-info); background: var(--bg-info); border-color: var(--border-info); }

/* character action form: select char / action / submit, laid out inline */
.charActionForm { margin: 0; }
.charActionForm table { width: auto; border-collapse: separate; border-spacing: 0; }
.charActionForm td { padding: 0 10px 0 0; vertical-align: middle; border: 0; }
.charActionForm select { width: auto; min-width: 168px; }
.charActionForm input[type="submit"] { width: auto; }
@media (max-width: 560px) {
	.charActionForm table, .charActionForm tbody, .charActionForm tr, .charActionForm td { display: block; width: 100%; }
	.charActionForm td { padding: 0 0 10px; }
	.charActionForm select, .charActionForm input[type="submit"] { width: 100%; min-width: 0; }
}

/* ---------------------------------------------------------------- forms / buttons */
input, select, textarea {
	font-family: inherit; font-size: .95rem; color: var(--text);
	background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
	padding: 9px 12px; width: 100%; outline: none;
}
input::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus { border-color: var(--violet); box-shadow: var(--glow-v); }

.btn, .loginForm button, button[type="submit"], input[type="submit"] {
	display: inline-block; font-family: 'Rajdhani', sans-serif; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase; font-size: .92rem;
	color: #fff; background: linear-gradient(180deg, var(--violet), #5b3fe0);
	border: 1px solid transparent; border-radius: var(--radius-sm);
	padding: 10px 18px; width: auto; box-shadow: 0 6px 18px -8px rgba(124,92,255,.8);
}
.btn:hover, .loginForm button:hover, button[type="submit"]:hover, input[type="submit"]:hover {
	transform: translateY(-1px); box-shadow: var(--glow-v); color: #fff;
}
.loginForm input, .searchForm input { margin-bottom: 10px; }
.loginForm button { width: 100%; }

/* the login form wraps each label+input in a .well — strip the card look so only the
   label text and the input field show (no box around each field) */
.loginForm .well {
	background: none; border: 0; box-shadow: none; overflow: visible;
	margin: 0 0 12px; padding: 0;
}
.loginForm label { display: block; margin-bottom: 5px; font-size: .84rem; color: var(--muted); }
.loginForm .submitButton { width: 100%; margin-top: 4px; }

/* search widget */
.searchForm input { margin-bottom: 0; }
.search_widget form { position: relative; }
.search_widget input { width: 100%; }
.search_widget label { font-size: .82rem; color: var(--muted); display: block; margin-bottom: 6px; }
.search_widget #name_suggestion { display: none; margin-top: 6px; background: var(--bg-1);
	border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; }
.search_widget #name_suggestion.show { display: block; }
.search_widget .sname { padding: 0; }
.search_widget .sname a { display: block; padding: 7px 12px; border-bottom: 1px solid var(--line); }
.search_widget .sname a:hover { background: rgba(124,92,255,.12); }

/* social media row */
.smedia td a { display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; margin: 0 4px; border-radius: 10px; font-size: 1.1rem;
	color: var(--text); background: var(--bg-1); border: 1px solid var(--line-2); }
.smedia td a:hover { color: #fff; border-color: var(--violet); box-shadow: var(--glow-v); transform: translateY(-2px); }

/* login toggle icons */
.modIcon > i:nth-child(2) { display: none; }
.modIcon:hover > i:nth-child(1) { display: none; }
.modIcon:hover > i:nth-child(2) { display: inline-block; }

/* ---------------------------------------------------------------- alerts */
.alert-box, .alert-default, .alert-danger, .alert-info, .alert-warning, .alert-success {
	border: 1px solid var(--border-default); border-left-width: 4px;
	background: var(--bg-default); color: var(--color-default);
	border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 16px; font-size: .93rem;
}
.alert-danger  { background: var(--bg-danger);  color: var(--color-danger);  border-color: var(--border-danger); }
.alert-warning { background: var(--bg-warning); color: var(--color-warning); border-color: var(--border-warning); }
.alert-info    { background: var(--bg-info);    color: var(--color-info);    border-color: var(--border-info); }
.alert-success { background: var(--bg-success); color: var(--color-success); border-color: var(--border-success); }
.alert-collapse { cursor: pointer; }
.alert-size1 { font-size: .85rem; } .alert-size3 { font-size: 1.05rem; }

/* character profile bits */
.page_characterprofile .outfit { image-rendering: pixelated; }
.page_characterprofile .flag { border-radius: 3px; }

/* ---------------------------------------------------------------- feature pages */
/* the page content sits directly inside a bare .well (no body padding), so inset it here */
/* .leftPane now supplies the page padding for every page; this wrapper is a no-op */
.featurePage { padding: 0; }

/* shared icon capsule */
.fIcon {
	display: grid; place-items: center; border-radius: 12px; color: var(--cyan-2);
	background: radial-gradient(120% 120% at 30% 20%, rgba(124,92,255,.28), rgba(34,211,238,.08));
	border: 1px solid var(--line-2);
}

/* hub (features.php overview) */
.featureLead { color: var(--muted); line-height: 1.7; max-width: 780px; margin: 0 0 22px; }
.featureHub { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.featureHub a.fCard {
	display: flex; flex-direction: column; gap: 10px; text-decoration: none;
	background: linear-gradient(180deg, var(--panel) 0%, #11141f 100%);
	border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px 22px;
	box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.featureHub a.fCard::before { content:""; position:absolute; left:0; top:0; right:0; height:3px;
	background: linear-gradient(90deg, var(--violet), var(--cyan)); opacity:.85; }
.featureHub a.fCard:hover { border-color: var(--violet); transform: translateY(-3px); box-shadow: var(--glow-v), var(--shadow); }
.featureHub .fIcon { width: 48px; height: 48px; font-size: 1.4rem; }
.featureHub h3 { margin: 4px 0 0; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.2rem; letter-spacing:.02em; color: var(--head); }
.featureHub p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.featureHub .fMore { margin-top: auto; padding-top: 10px; color: var(--cyan); font-weight:600; font-size:.85rem; }
.featureHub .fMore i { font-size: .78rem; }

/* detail page */
.featureBack { display:inline-flex; align-items:center; gap:7px; color: var(--muted); text-decoration:none; font-size:.85rem; margin-bottom: 14px; }
.featureBack:hover { color: var(--cyan); }
.featureHero { display:flex; align-items:center; gap:18px; padding: 22px; margin-bottom: 8px;
	background: linear-gradient(120deg, rgba(124,92,255,.12), rgba(34,211,238,.06)), linear-gradient(180deg, var(--panel), #11141f);
	border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.featureHero::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: linear-gradient(180deg, var(--violet), var(--cyan)); }
.featureHero .fIcon { width: 64px; height: 64px; font-size: 2rem; flex: 0 0 auto; }
.featureHero h1 { margin: 0 0 5px; }
.featureHero p { margin: 0; color: var(--muted); line-height: 1.55; }

.fTags { display:flex; flex-wrap:wrap; gap:8px; margin: 16px 0 22px; }
.fTags span { font-size:.76rem; padding: 5px 11px; border-radius: 20px; border:1px solid var(--line-2);
	color: var(--violet-2); background: rgba(124,92,255,.08); }

.fSection { margin: 0 0 24px; }
.fSection > h2 { font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
	font-size: 1.15rem; color: var(--head); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
	display:flex; align-items:center; gap:9px; }
.fSection > h2 i { color: var(--cyan); }
.fSection p { line-height: 1.7; color: var(--text); }
.fSection > ul { margin: 8px 0; padding-left: 20px; }
.fSection > ul li { margin: 6px 0; line-height: 1.6; }

/* numbered steps */
.fSteps { list-style: none; counter-reset: step; padding: 0; margin: 6px 0; }
.fSteps li { counter-increment: step; position: relative; padding: 11px 0 11px 46px; border-bottom: 1px solid var(--line); line-height: 1.6; }
.fSteps li:last-child { border-bottom: 0; }
.fSteps li::before { content: counter(step); position: absolute; left: 0; top: 9px; width: 30px; height: 30px;
	display: grid; place-items: center; border-radius: 8px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size: 1rem;
	color: #0a0c16; background: linear-gradient(135deg, var(--violet-2), var(--cyan)); }

/* rewards callout */
.fRewards { border: 1px solid var(--border-success); background: var(--bg-success); border-radius: var(--radius-sm);
	padding: 15px 18px; margin: 8px 0; }
.fRewards h3 { margin: 0 0 9px; font-family:'Rajdhani',sans-serif; text-transform:uppercase; letter-spacing:.03em;
	color: var(--color-success); font-size: 1rem; display:flex; align-items:center; gap:8px; }
.fRewards ul { margin: 0; padding-left: 20px; } .fRewards li { margin: 5px 0; color: var(--text); line-height:1.55; }

/* data / tier table */
.fTable { width:100%; border-collapse: collapse; margin: 6px 0 4px; }
.fTable th { text-align:left; font-family:'Rajdhani',sans-serif; text-transform:uppercase; letter-spacing:.03em;
	font-size:.82rem; color: var(--violet-2); padding: 9px 12px; border-bottom: 1px solid var(--line-2); }
.fTable td { padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--text); }
.fTable tr:last-child td { border-bottom: 0; }
.fTable tr:hover td { background: rgba(124,92,255,.06); }

/* mini info boxes */
.fCols { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 14px; margin: 8px 0; }
.fCols .fBox { border:1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; background: rgba(255,255,255,.015); }
.fCols .fBox b { font-family:'Rajdhani',sans-serif; color: var(--cyan-2); display:block; margin-bottom: 5px; letter-spacing:.02em; font-size: 1rem; }
.fCols .fBox span { color: var(--muted); font-size:.88rem; line-height:1.55; }

@media (max-width: 560px) { .featureHero { flex-direction: column; text-align:center; } .featureHero::before { display:none; } }

/* ---------------------------------------------------------------- footer */
footer {
	max-width: 1240px; margin: 0 auto; padding: 20px 18px 34px;
	color: var(--muted); font-size: .84rem; border-top: 1px solid var(--line);
}
footer a { color: var(--cyan); }

/* ---------------------------------------------------------------- live cast widget (right pane)
   Sidebar list of who is broadcasting. Data comes from the `live_casts` table via
   layout/widgets/casts.php; the full listing lives in cast.php. */
.castWidget .castList { width: 100%; border-collapse: collapse; }
.castWidget .castList td { padding: 5px 0; vertical-align: middle; border-bottom: 1px solid var(--line); }
.castWidget .castList tr:last-child td { border-bottom: 0; }
.castWidget .castName a { color: var(--text); font-weight: 600; text-decoration: none; }
.castWidget .castName a:hover { color: var(--violet); }
.castWidget .castMeta { display: block; font-size: .76rem; color: var(--muted); margin-top: 1px; }
.castWidget .castDot {
	display: inline-block; width: 7px; height: 7px; border-radius: 50%;
	background: #e03b3b; margin-right: 7px; vertical-align: middle;
	box-shadow: 0 0 6px rgba(224, 59, 59, .9);
}
.castWidget .castLock { color: #d8a53c; margin-left: 5px; font-size: .78rem; }
.castWidget .castViewers { text-align: right; white-space: nowrap; color: var(--muted); font-size: .82rem; }
.castWidget .castFoot { margin-top: 8px; text-align: center; font-size: .82rem; }
.castWidget .castFoot a { color: var(--cyan); text-decoration: none; }
.castWidget .castFoot a:hover { text-decoration: underline; }
.castWidget .castEmpty { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.castWidget .castEmpty span { font-size: .8rem; }

/* ---------------------------------------------------------------- travelling traders (right pane)
   Where Yasir and Rashid are standing today. Data comes from the `trader_locations` table, which
   data/globalevents/scripts/trader_rotation.lua rewrites when it moves them. Layout follows the
   in-game "world changes" panel: portrait on the left, who they are in the middle, sighting on the
   right, so the town reads as the answer to the question the box exists to answer. */
.traderWidget .traderList { list-style: none; margin: 0; padding: 0; }
.traderWidget .traderRow {
	display: flex; align-items: center; gap: 9px;
	padding: 7px 0; border-bottom: 1px solid var(--line);
}
.traderWidget .traderRow:last-child { border-bottom: 0; }

.traderWidget .traderArt {
	flex: none; width: 34px; height: 34px; border-radius: 3px;
	background: var(--bg-1); border: 1px solid var(--line-2);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.traderWidget .traderArt img {
	width: 100%; height: 100%; object-fit: contain;
	image-rendering: pixelated;   /* sprites are 32px; never let the browser smooth them */
}
.traderWidget .traderArt.is-blank {
	font-weight: 700; font-size: 1rem; color: var(--muted);
	background: linear-gradient(160deg, var(--panel-2), var(--bg-1));
}

.traderWidget .traderText { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.traderWidget .traderName {
	color: var(--head); font-weight: 600; line-height: 1.25;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.traderWidget .traderNote { font-size: .74rem; color: var(--muted); line-height: 1.3; }

.traderWidget .traderWhere { flex: none; text-align: right; }
.traderWidget .traderLabel {
	display: block; font-size: .66rem; letter-spacing: .07em;
	text-transform: uppercase; color: var(--muted);
}
.traderWidget .traderTown {
	display: block; color: var(--cyan); font-weight: 600; font-size: .86rem; line-height: 1.3;
	white-space: nowrap;
}

.traderWidget .traderFoot {
	margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line);
	font-size: .74rem; color: var(--muted); text-align: center;
}
.traderWidget .traderEmpty { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.traderWidget .traderEmpty span { font-size: .8rem; }

/* ---------------------------------------------------------------- Discord CTA (centre column)
   Rendered by layout/widgets/discord.php at the top of .leftPane, so it shows on every page.
   The hover animation is a clipped icon window: .dcIcon is a fixed 44px box with overflow
   hidden, and .dcStack holds two 44px icons stacked vertically. On hover the stack slides up
   by exactly one icon height, so halfway through the transition the top icon is half gone and
   the bottom one is half in. */
.discordCta {
	display: flex; align-items: center; gap: 14px;
	padding: 13px 18px; margin: 0 0 16px;
	background: linear-gradient(135deg, rgba(88,101,242,.22), rgba(124,92,255,.08));
	border: 1px solid rgba(88,101,242,.45);
	border-radius: var(--radius); box-shadow: var(--shadow);
	color: var(--head); text-decoration: none;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.discordCta:hover, .discordCta:focus-visible {
	color: var(--head); text-decoration: none; transform: translateY(-1px);
	border-color: #7b86ff;
	box-shadow: 0 0 0 1px rgba(88,101,242,.3), 0 16px 34px -18px rgba(88,101,242,.95);
}

.discordCta .dcIcon {
	flex: none; width: 44px; height: 44px; overflow: hidden;
	border-radius: 12px; background: #5865f2;
}
.discordCta .dcStack {
	display: flex; flex-direction: column;
	transition: transform .4s cubic-bezier(.34,.9,.28,1);
}
.discordCta:hover .dcStack, .discordCta:focus-visible .dcStack { transform: translateY(-44px); }
.discordCta .dcStack > span {
	flex: none; height: 44px;
	display: flex; align-items: center; justify-content: center;
}
.discordCta .dcStack svg { width: 24px; height: 24px; fill: #fff; display: block; }
.discordCta .dcStack .fa { font-size: 19px; color: #fff; }

.discordCta .dcText { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.discordCta .dcText b {
	font-family: 'Rajdhani','Inter',sans-serif; font-size: 1.08rem;
	letter-spacing: .02em; color: var(--head);
}
.discordCta .dcText span {
	font-size: .84rem; color: var(--muted);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.discordCta .dcGo {
	margin-left: auto; flex: none; font-size: 1.35rem; color: var(--muted);
	transition: transform .25s ease, color .25s ease;
}
.discordCta:hover .dcGo { color: var(--anchor); transform: translateX(4px); }

@media (max-width: 560px) {
	.discordCta { padding: 11px 14px; gap: 11px; }
	.discordCta .dcText span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.discordCta, .discordCta .dcStack, .discordCta .dcGo { transition: none; }
	.discordCta:hover { transform: none; }
}