/* =========================================================================
   Theme Pixellor — Modern Dark Gaming
   Oxanium (display) + Inter (body). Rounded panels, soft shadows, thin gold
   accents, glassy translucent cards. Same palette sampled from the logo
   (amber-gold / olive-lime green / cool gray / black). No pixel art.
   ========================================================================= */

:root {
	--pix-black:      #0b0c0f;
	--pix-panel:      rgba(18, 20, 26, .82);
	--pix-panel-2:    rgba(30, 33, 42, .92);
	--pix-panel-tp:   rgba(18, 20, 26, .80);   /* translucent card (~80%) */
	--pix-content-bg: rgba(12, 13, 17, .80);

	--pix-ink:        #e7e9ec;
	--pix-ink-soft:   #9aa2a2;                 /* cool gray from the logo */

	/* amber-gold sampled from the logo */
	--pix-gold:       #eaa100;
	--pix-gold-lt:    #ffc21a;
	--pix-gold-2:     #f0a808;
	--pix-gold-grad:  linear-gradient(135deg, #ffc21a 0%, #eaa100 100%);
	/* olive/moss green from the logo → brighter lime accent */
	--pix-green:      #556b0a;
	--pix-green-lt:   #a4c520;
	--pix-green-hi:   #b6d92a;
	--pix-red:        #fa0a2b;
	--pix-link:       #a4c520;

	--pix-border:     rgba(255, 255, 255, .10);
	--pix-border-gold:rgba(234, 161, 0, .35);
	--pix-hairline:   rgba(255, 255, 255, .08);
	/* neutral panel fills used across content/plugin overrides */
	--pix-fill:       rgba(127, 127, 127, .07);
	--pix-fill-2:     rgba(127, 127, 127, .11);
	--pix-fill-3:     rgba(127, 127, 127, .14);

	--pix-shadow:     0 12px 34px rgba(0, 0, 0, .48);
	--pix-shadow-sm:  0 6px 18px rgba(0, 0, 0, .40);
	--pix-glow-gold:  0 0 24px rgba(255, 194, 26, .30);
	--pix-glow-green: 0 0 22px rgba(164, 197, 32, .35);

	--pix-radius:     14px;
	--pix-radius-sm:  9px;

	--pix-font:       'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--pix-display:    'Oxanium', var(--pix-font);
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

body {
	font-family: var(--pix-font);
	color: var(--pix-ink);
	background-color: var(--pix-black);
	background-image: var(--pix-bg-image);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
@media (max-width: 900px), (max-height: 700px) {
	body { background-position: center top; background-attachment: scroll; }
}

/* Rotating background — two stacked fixed layers that crossfade via JS. */
.pix-bg {
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
}
.pix-bg__layer {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1.4s ease-in-out;
}
.pix-bg__layer.is-active { opacity: 1; }
@media (max-width: 900px), (max-height: 700px) {
	.pix-bg__layer { background-position: center top; }
}

/* Veil: darker top → keeps text legible, lets photo breathe lower down */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		radial-gradient(120% 80% at 50% -10%, rgba(234, 161, 0, .08), transparent 60%),
		linear-gradient(180deg, rgba(8, 9, 12, .72) 0%, rgba(8, 9, 12, .46) 45%, rgba(8, 9, 12, .62) 100%);
	z-index: -1;
	pointer-events: none;
}

a { color: var(--pix-link); text-decoration: none; transition: color .15s; }
a:hover { color: var(--pix-gold-lt); }
img { max-width: 100%; }

h1, h2, h3, h4, .pix-display { font-family: var(--pix-display); font-weight: 700; }

/* ---------- Buttons ---------- */
.pix-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	font-family: var(--pix-display);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .4px;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius-sm);
	background: var(--pix-panel-2);
	color: var(--pix-ink);
	box-shadow: var(--pix-shadow-sm);
	transition: transform .12s ease, box-shadow .18s, background .18s, color .18s, border-color .18s;
}
.pix-btn:hover { transform: translateY(-2px); }
.pix-btn--gold {
	background: var(--pix-gold-grad);
	color: #1a1200;
	border-color: transparent;
}
.pix-btn--gold:hover { box-shadow: var(--pix-shadow-sm), var(--pix-glow-gold); color: #1a1200; }
.pix-btn--ghost {
	background: rgba(255, 255, 255, .04);
	color: var(--pix-ink);
	border-color: var(--pix-border);
	box-shadow: none;
}
.pix-btn--ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; border-color: var(--pix-border-gold); }
.pix-btn--lg { padding: 14px 28px; font-size: 17px; }
.pix-btn--sm { padding: 7px 14px; font-size: 13px; }
.ch-edit-btn { text-decoration: none; gap: 6px; margin: 5px 0; }
.ch-edit-btn--top { margin: 0 0 10px; }
.ch-edit-btn__ico { font-size: 12px; opacity: .85; }

/* =========================================================================
   TOPBAR
   ========================================================================= */
/* The MyAAC admin bar is fixed at top:0 with a huge z-index. JS moves its markup to
   the very start of <body> and flags the root, so our sticky topbar docks *under*
   it instead of sliding behind it. */
:root.pix-has-admin-bar .pix-topbar { top: 32px; }
:root.pix-has-admin-bar .pix-rail { z-index: 850; }

.pix-topbar {
	position: sticky;
	top: 0;
	z-index: 900;
	background: rgba(10, 11, 15, .68);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--pix-border);
	transition: background .2s, box-shadow .2s;
}
.pix-topbar.is-scrolled {
	background: rgba(10, 11, 15, .92);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
/* Small logo in the bar: permanent branding, and the way back to the front page
   from anywhere. Kept on the front page too — the bar is sticky, so once you
   scroll past the hero it is the only logo left on screen. */
.pix-brand { display: flex; align-items: center; flex: 0 0 auto; }
.pix-brand img {
	height: 34px; width: auto; display: block;
	filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .5));
	transition: transform .15s, filter .18s;
}
.pix-brand:hover img { transform: translateY(-1px); filter: drop-shadow(0 5px 12px rgba(234, 161, 0, .45)); }
@media (max-width: 768px) { .pix-brand img { height: 28px; } }

.pix-topbar__inner {
	max-width: 1260px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 62px;
}

.pix-nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; }
.pix-nav__item { position: relative; }
.pix-nav__label {
	position: relative;
	background: none;
	border: 0;
	color: var(--pix-ink);
	font-family: var(--pix-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .3px;
	padding: 10px 14px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: color .15s;
}
/* animated underline */
.pix-nav__label::after {
	content: "";
	position: absolute;
	left: 14px; right: 14px; bottom: 8px;
	height: 2px;
	background: var(--pix-gold-grad);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}
.pix-nav__item:hover .pix-nav__label,
.pix-nav__item.is-open .pix-nav__label { color: #fff; }
.pix-nav__item:hover .pix-nav__label::after,
.pix-nav__item.is-open .pix-nav__label::after { transform: scaleX(1); }
.pix-nav__item.is-active .pix-nav__label { color: var(--pix-gold-lt); }
.pix-nav__item.is-active .pix-nav__label::after { transform: scaleX(1); }
.pix-caret {
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: .6;
	transition: transform .2s;
}
.pix-nav__item:hover .pix-caret,
.pix-nav__item.is-open .pix-caret { transform: rotate(180deg); }

/* Direct (always-visible) nav link, e.g. Wiki — no dropdown */
.pix-nav__label--link { text-decoration: none; color: var(--pix-green-lt); }
.pix-nav__item--direct:hover .pix-nav__label--link { color: var(--pix-gold-lt); }
.pix-nav__item--direct.is-active .pix-nav__label--link { color: var(--pix-gold-lt); }
/* Wiki keeps its book glyph; "Get Coins" carries its own icon element instead. */
.pix-nav__label--link:not(.pix-nav__label--coins)::before { content: "\1F4D6"; margin-right: 6px; font-size: 13px; }
/* "Get Coins" gets the gold treatment so it reads as the shop entry point. */
.pix-nav__label--coins { color: var(--pix-gold-lt); }
.pix-nav__coins-icon { margin-right: 6px; font-size: 13px; }
.pix-nav__item--direct:hover .pix-nav__label--coins { color: var(--pix-gold); }

.pix-nav__dropdown {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 214px;
	background: var(--pix-panel-2);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius-sm);
	box-shadow: var(--pix-shadow);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .16s, transform .16s, visibility .16s;
	z-index: 950;
}
.pix-nav__item:hover .pix-nav__dropdown,
.pix-nav__item.is-open .pix-nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.pix-nav__link {
	display: block;
	padding: 9px 12px;
	color: var(--pix-ink-soft);
	font-size: 14.5px;
	font-weight: 500;
	border-radius: 6px;
	transition: background .14s, color .14s, padding .14s;
}
.pix-nav__link:hover { background: rgba(255, 255, 255, .06); color: var(--pix-gold-lt); padding-left: 16px; }

.pix-topbar__right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.pix-online {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--pix-ink-soft);
	font-size: 14px;
	font-weight: 600;
	font-family: var(--pix-display);
	padding: 8px 14px;
	border: 1px solid var(--pix-border);
	border-radius: 999px;
	background: rgba(255, 255, 255, .03);
	transition: color .15s, border-color .15s;
}
.pix-online:hover { color: #fff; border-color: var(--pix-border-gold); }

/* ---------- Account chip (topbar right) ---------- */
.pix-acct {
	display: flex; align-items: stretch; gap: 1px;
	background: var(--pix-fill-2);
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius-sm);
	overflow: hidden;
	transition: border-color .18s;
}
.pix-acct:hover { border-color: var(--pix-border-gold); }
.pix-acct__link {
	display: flex; align-items: center; gap: 9px;
	padding: 5px 12px 5px 6px;
	text-decoration: none; min-width: 0;
}
.pix-acct__link:hover { background: rgba(234, 161, 0, .10); }
.pix-acct__avatar {
	flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--pix-display); font-weight: 800; font-size: 14px;
	color: #1a1200; background: var(--pix-gold-grad);
}
.pix-acct__meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pix-acct__label {
	font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase;
	color: var(--pix-ink-soft);
}
.pix-acct__name {
	font-family: var(--pix-display); font-weight: 700; font-size: 13.5px; color: #fff;
	max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:root[data-theme="light"] .pix-acct__name { color: #14161c; }
.pix-acct__logout {
	display: flex; align-items: center; justify-content: center;
	width: 34px; flex: 0 0 34px;
	color: var(--pix-ink-soft);
	border-left: 1px solid var(--pix-border);
	transition: background .18s, color .18s;
}
.pix-acct__logout svg { width: 17px; height: 17px; }
.pix-acct__logout:hover { background: rgba(217, 68, 63, .18); color: #ff7a75; }

/* Guest variant: small login button + quiet register link */
.pix-acct--guest { background: transparent; border: 0; gap: 8px; align-items: center; overflow: visible; }
.pix-acct__login {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 15px;
	font-family: var(--pix-display); font-weight: 700; font-size: 13.5px;
	color: #1a1200; background: var(--pix-gold-grad);
	border-radius: var(--pix-radius-sm);
	box-shadow: var(--pix-shadow-sm);
	text-decoration: none;
	transition: transform .12s, box-shadow .18s;
}
.pix-acct__login svg { width: 16px; height: 16px; }
.pix-acct__login:hover { transform: translateY(-1px); box-shadow: var(--pix-shadow-sm), var(--pix-glow-gold); color: #1a1200; }
.pix-acct__register {
	font-size: 13px; font-weight: 600; color: var(--pix-ink-soft); text-decoration: none;
	border-bottom: 1px dashed transparent;
}
.pix-acct__register:hover { color: var(--pix-gold-lt); border-bottom-color: currentColor; }
.pix-online__dot { width: 9px; height: 9px; border-radius: 50%; background: #555; }
.pix-online__dot.is-on { background: var(--pix-green-hi); box-shadow: 0 0 0 4px rgba(182, 217, 42, .18), var(--pix-glow-green); }

/* Hamburger */
.pix-burger {
	display: none;
	margin-left: auto;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
}
.pix-burger span { width: 26px; height: 2px; border-radius: 2px; background: var(--pix-gold); transition: .2s; }
.pix-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pix-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pix-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   HERO
   ========================================================================= */
.pix-hero {
	position: relative;
	/* One height drives the carousel, the logo and the column beside them. */
	--pix-shot-h: clamp(190px, 26vw, 420px);
	--pix-logo-h: calc(var(--pix-shot-h) * 0.7);     /* logo sits at 70% of the frame height */
	--pix-logo-half: calc(var(--pix-logo-h) * 0.04); /* how far the frame starts into the logo */
}
.pix-hero__inner {
	position: relative;
	/* same geometry as .pix-main (1400 / 20px / zoom .9) so the hero's columns
	   line up exactly with the content card and the sidebar boxes below */
	max-width: 1400px;
	margin: 0 auto;
	padding: 48px 20px 34px;
	display: flex;
	align-items: flex-start;   /* both columns start at the top of the carousel */
	justify-content: space-between;
	gap: 34px;
	zoom: 0.9;
}
.pix-hero__text { flex: 1 1 auto; min-width: 0; max-width: none; }
.pix-hero__logo {
	display: block;
	height: clamp(110px, 15vw, 190px);
	width: auto;
	max-width: 100%;
	margin-bottom: 10px;
	filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .55));
}
.pix-hero__eyebrow {
	display: inline-block;
	color: var(--pix-gold);
	font-family: var(--pix-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.pix-hero__title {
	margin: 0 0 22px;
	font-family: var(--pix-display);
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.05;
	color: #fff;
	letter-spacing: .5px;
}
/* Page header — moved out of the hero; it now heads the main column, right
   above the content card, and says where in the site you are. */
.pix-pagehead { display: flex; flex-direction: column; gap: 6px; }
.pix-crumbs {
	display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
	font-size: 12px; letter-spacing: .3px; color: var(--pix-ink-soft);
}
.pix-crumbs__link { color: var(--pix-ink-soft); text-decoration: none; }
.pix-crumbs__link:hover { color: var(--pix-gold-lt); }
.pix-crumbs__sep { opacity: .5; }
.pix-crumbs__cat { color: var(--pix-ink-soft); }
.pix-crumbs__cur { color: var(--pix-gold); font-weight: 600; }
.pix-page-title {
	display: flex; align-items: center; gap: 11px;
	margin: 0; padding-bottom: 12px;
	position: relative;
}
/* short gold rule under the title, echoing the boosted/section accents */
.pix-page-title::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 56px; height: 3px; border-radius: 3px;
	background: var(--pix-gold-grad);
}
.pix-page-title__icon {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 10px;
	font-size: 19px;
	background: rgba(234, 161, 0, .14);
	border: 1px solid var(--pix-border-gold);
}
@media (max-width: 480px) {
	.pix-page-title__icon { width: 32px; height: 32px; font-size: 16px; }
}

.pix-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
/* sits under the logo; 20% up from the shrunken size */
.pix-hero__cta { justify-content: flex-start; }
.pix-hero__cta .pix-btn--lg { padding: 12px 24px; font-size: 14.5px; gap: 7px; }
/* Over the photo background the default ghost fill (4%) almost disappears —
   give the hero pair a more solid panel. */
.pix-hero__cta .pix-btn--ghost {
	background: rgba(18, 20, 26, .62);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-color: rgba(255, 255, 255, .18);
}
.pix-hero__cta .pix-btn--ghost:hover { background: rgba(18, 20, 26, .80); border-color: var(--pix-border-gold); }
:root[data-theme="light"] .pix-hero__cta .pix-btn--ghost {
	background: rgba(255, 255, 255, .80);
	border-color: rgba(0, 0, 0, .16);
	color: #14161c;
}
:root[data-theme="light"] .pix-hero__cta .pix-btn--ghost:hover { background: rgba(255, 255, 255, .92); }
.pix-hero__discord {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--pix-ink-soft);
	font-size: 15px;
	font-weight: 600;
}
.pix-hero__discord::before { content: "\25C9"; color: #7289da; }
.pix-hero__discord:hover { color: var(--pix-gold-lt); }

/* Right-hand hero column: CTA on top, boosted row + events, donation invite below. */
.pix-hero__side {
	display: flex; flex-direction: column; gap: 14px;
	flex: 0 0 auto; min-width: 0;
	/* match the carousel exactly: same height, contents spread to fill it */
	height: var(--pix-shot-h);
	justify-content: space-between;
}
.pix-hero__side > .pix-hero__boosted { flex: 1 1 auto; min-height: 0; }
.pix-hero__side .pix-events__list { overflow: hidden; }
.pix-hero__boosted { display: flex; gap: 12px; flex: 0 0 auto; align-items: stretch; }
.pix-boosted {
	margin: 0;
	text-align: center;
	background: var(--pix-panel-tp);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius);
	box-shadow: var(--pix-shadow-sm);
	padding: 9px 8px 8px;
	min-width: 96px;
	transition: transform .2s, border-color .2s, box-shadow .2s;
}
.pix-boosted::before {
	content: "";
	display: block;
	height: 3px;
	border-radius: 3px;
	margin: -4px -6px 12px;
	background: var(--pix-gold-grad);
	opacity: .85;
}
.pix-boosted:hover {
	transform: translateY(-4px);
	border-color: var(--pix-border-gold);
	box-shadow: var(--pix-shadow), var(--pix-glow-green);
}
.pix-boosted img { height: 78px; width: auto; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.pix-boosted figcaption { display: flex; flex-direction: column; margin-top: 10px; }
.pix-boosted__tag { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--pix-gold); font-family: var(--pix-display); font-weight: 600; }
/* Bigger labels: creature 1.5x, boss 2x the base 11px. Tighter tracking and a
   wrap allowance so they still fit the tile. */
.pix-boosted--creature .pix-boosted__tag { font-size: 14px; letter-spacing: .8px; }
.pix-boosted--boss .pix-boosted__tag { font-size: 18.5px; letter-spacing: .5px; line-height: 1.1; }
.pix-boosted--creature, .pix-boosted--boss { min-width: 100px; }
.pix-boosted__tag { white-space: normal; }
.pix-boosted__name { font-family: var(--pix-display); font-size: 15.5px; font-weight: 700; color: #fff; margin-top: 2px; }

/* The boss is the headline pick — gold ring, warm glow, star badge. */
.pix-boosted--boss {
	position: relative;
	border-color: var(--pix-border-gold);
	background: linear-gradient(160deg, rgba(234, 161, 0, .16), var(--pix-panel-tp) 62%);
	box-shadow: var(--pix-shadow-sm), 0 0 22px rgba(234, 161, 0, .18);
}
/* No top accent line here — the boss gets a full gold ring instead. */
.pix-boosted--boss::before { display: none; }
.pix-boosted--boss {
	border-width: 4px;
	border-color: var(--pix-gold);
	box-shadow: var(--pix-shadow-sm), inset 0 0 0 1px rgba(255, 194, 26, .25), 0 0 22px rgba(234, 161, 0, .22);
	padding-top: 13px;   /* was absorbed by the accent line's margin */
}
.pix-boosted--boss:hover { box-shadow: var(--pix-shadow), var(--pix-glow-gold); }
.pix-boosted__crown {
	position: absolute; top: -9px; right: -9px; z-index: 2;
	width: 24px; height: 24px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; color: #1a1200;
	background: var(--pix-gold-grad);
	box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}
.pix-boosted--boss .pix-boosted__name { color: var(--pix-gold-lt); }
:root[data-theme="light"] .pix-boosted--boss .pix-boosted__name { color: #8a5c00; }

/* Current events pulled from the event calendar — sits next to the boosted pair. */
.pix-events {
	display: flex; flex-direction: column;
	width: 146px; min-width: 0;
	background: var(--pix-panel-tp);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius);
	box-shadow: var(--pix-shadow-sm);
	padding: 10px 12px 9px;
	transition: transform .2s, border-color .2s, box-shadow .2s;
}
.pix-events:hover { transform: translateY(-4px); border-color: var(--pix-border-gold); box-shadow: var(--pix-shadow); }
.pix-events__head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
	text-decoration: none; padding-bottom: 8px; margin-bottom: 8px;
	border-bottom: 1px solid var(--pix-border);
}
.pix-events__tag { font-family: var(--pix-display); font-weight: 600; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--pix-gold); }
.pix-events__all { font-size: 11.5px; color: var(--pix-ink-soft); }
.pix-events__head:hover .pix-events__all { color: var(--pix-gold-lt); }
.pix-events__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pix-events__item { display: flex; align-items: flex-start; gap: 8px; text-align: left; }
.pix-events__dot {
	flex: 0 0 auto; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%;
	background: var(--pix-event-color, var(--pix-ink-soft)); opacity: .55;
}
.pix-events__item.is-active .pix-events__dot { opacity: 1; box-shadow: 0 0 0 3px rgba(164, 197, 32, .22); }
.pix-events__body { display: flex; flex-direction: column; min-width: 0; }
.pix-events__name { font-size: 12.5px; font-weight: 600; color: var(--pix-ink); line-height: 1.25; }
/* running right now — green reads as "live", upcoming stays neutral */
.pix-events__item.is-active .pix-events__name { color: var(--pix-green-lt); font-weight: 700; }
:root[data-theme="light"] .pix-events__item.is-active .pix-events__name { color: #5d7010; }
.pix-events__when { font-size: 11.5px; color: var(--pix-ink-soft); }
.pix-events__empty { font-size: 12.5px; color: var(--pix-ink-soft); text-align: left; }

/* =========================================================================
   SOCIAL RAIL — small tiles fixed to the right edge, slide out on hover
   ========================================================================= */
.pix-rail {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 850;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pix-rail__link {
	display: flex;
	align-items: center;
	height: 42px;
	transform: translateX(calc(100% - 42px));
	background: rgba(14, 15, 20, .85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--pix-border);
	border-right: 0;
	border-radius: 10px 0 0 10px;
	color: var(--pix-ink);
	box-shadow: var(--pix-shadow-sm);
	transition: transform .2s ease, background .2s, color .2s;
	overflow: hidden;
}
.pix-rail__icon {
	flex: 0 0 42px;
	width: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pix-gold);
	transition: color .2s;
}
.pix-rail__icon svg { width: 20px; height: 20px; display: block; }
.pix-rail__label {
	padding: 0 16px 0 2px;
	font-family: var(--pix-display);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}
.pix-rail__link:hover,
.pix-rail__link:focus-visible {
	transform: translateX(0);
	background: var(--pix-gold-grad);
	color: #1a1200;
	outline: none;
}
.pix-rail__link:hover .pix-rail__icon,
.pix-rail__link:focus-visible .pix-rail__icon { color: #1a1200; }

/* Discord — the priority social link: bigger, peeks out further, gentle pulse */
.pix-rail--discord {
	height: 56px;
	transform: translateX(calc(100% - 58px));
	border-color: #5865F2;
	animation: pixDiscordPulse 2.6s ease-in-out infinite;
}
.pix-rail--discord .pix-rail__icon { flex-basis: 58px; width: 58px; color: #8b98f7; }
.pix-rail--discord .pix-rail__icon svg { width: 27px; height: 27px; }
.pix-rail--discord:hover,
.pix-rail--discord:focus-visible { background: linear-gradient(135deg, #5865F2, #4752c4); color: #fff; }
.pix-rail--discord:hover .pix-rail__icon,
.pix-rail--discord:focus-visible .pix-rail__icon { color: #fff; }
@keyframes pixDiscordPulse {
	0%, 100% { box-shadow: var(--pix-shadow-sm), 0 0 0 0 rgba(88, 101, 242, .45); }
	50%      { box-shadow: var(--pix-shadow-sm), 0 0 0 7px rgba(88, 101, 242, 0); }
}

/* Sliding invites (bottom-right). One shared component; each entry only supplies
   copy, a link and an accent colour via nudges.php. */
.pix-nudge {
	position: fixed; right: 18px; bottom: 78px; z-index: 860;
	width: 304px; max-width: calc(100vw - 36px);
	background: var(--pix-panel-2);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--pix-nudge-accent, var(--pix-gold));
	border-radius: var(--pix-radius);
	box-shadow: var(--pix-shadow), 0 0 26px color-mix(in srgb, var(--pix-nudge-accent, #eaa100) 40%, transparent);
	transform: translateX(130%); opacity: 0; pointer-events: none;
	transition: transform .55s cubic-bezier(.2, .9, .3, 1.15), opacity .4s;
}
.pix-nudge.is-shown { transform: translateX(0); opacity: 1; pointer-events: auto; }
.pix-nudge__link { display: flex; align-items: center; gap: 12px; padding: 15px 16px; text-decoration: none; }
.pix-nudge__icon {
	flex: 0 0 42px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
	font-size: 22px; border-radius: 11px;
	color: var(--pix-nudge-accent, var(--pix-gold));
	background: color-mix(in srgb, var(--pix-nudge-accent, #eaa100) 18%, transparent);
}
.pix-nudge__icon svg { width: 26px; height: 26px; }
.pix-nudge__text { display: flex; flex-direction: column; gap: 2px; }
.pix-nudge__text strong { font-family: var(--pix-display); color: #fff; font-size: 15px; }
:root[data-theme="light"] .pix-nudge__text strong { color: #14161c; }
.pix-nudge__text small { color: var(--pix-ink-soft); font-size: 12.5px; }
.pix-nudge__close {
	position: absolute; top: 5px; right: 7px; background: none; border: 0;
	color: var(--pix-ink-soft); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.pix-nudge__close:hover { color: var(--pix-gold-lt); }
@media (max-width: 768px) { .pix-nudge { bottom: 68px; } }

/* Donation invite under the boosted row — green ring, blinks like the Discord rail */
.pix-donate-mini {
	display: flex; align-items: center; gap: 11px;
	padding: 10px 14px; text-decoration: none;
	border: 1px solid var(--pix-green-lt);
	border-radius: var(--pix-radius);
	background: linear-gradient(135deg, rgba(164, 197, 32, .16), rgba(18, 20, 26, .70));
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	animation: pixDonatePulse 2.6s ease-in-out infinite;
	transition: transform .15s, background .18s, border-color .18s;
}
.pix-donate-mini:hover {
	transform: translateY(-2px);
	background: linear-gradient(135deg, rgba(164, 197, 32, .26), rgba(18, 20, 26, .78));
	border-color: #c9ee3a;
}
/* Light mode: the dark half of the gradient reads as a black slab — swap it for
   a light panel and keep only the green tint. */
:root[data-theme="light"] .pix-donate-mini {
	background: linear-gradient(135deg, rgba(164, 197, 32, .22), rgba(255, 255, 255, .92));
	border-color: #8ba81a;
}
:root[data-theme="light"] .pix-donate-mini:hover {
	background: linear-gradient(135deg, rgba(164, 197, 32, .34), rgba(255, 255, 255, .96));
	border-color: #6f8614;
}
:root[data-theme="light"] .pix-donate-mini__cta { color: #5d7010; }
.pix-donate-mini__icon { flex: 0 0 auto; font-size: 24px; line-height: 1; }
.pix-donate-mini__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pix-donate-mini__text strong { font-family: var(--pix-display); font-size: 15px; color: #fff; }
:root[data-theme="light"] .pix-donate-mini__text strong { color: #14161c; }
.pix-donate-mini__text small { font-size: 12.5px; color: var(--pix-ink-soft); line-height: 1.35; }
.pix-donate-mini__cta {
	margin-left: auto; flex: 0 0 auto;
	font-family: var(--pix-display); font-weight: 700; font-size: 13.5px;
	color: var(--pix-green-lt); white-space: nowrap;
}
@keyframes pixDonatePulse {
	0%, 100% { box-shadow: var(--pix-shadow-sm), 0 0 0 0 rgba(164, 197, 32, .45); }
	50%      { box-shadow: var(--pix-shadow-sm), 0 0 0 8px rgba(164, 197, 32, 0); }
}
@media (prefers-reduced-motion: reduce) { .pix-donate-mini { animation: none; } }

/* =========================================================================
   CONTENT GRID
   ========================================================================= */
.pix-main { max-width: 1400px; margin: 24px auto; padding: 0 20px; zoom: 0.9; }
.pix-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 312px;
	gap: 24px;
	align-items: start;
}
.pix-content { min-width: 0; display: grid; gap: 20px; }

/* Independent columns: sidebar sticks under the topbar and scrolls on its own. */
.pix-aside {
	display: grid;
	gap: 20px;
	align-self: start;
	margin-top: -24px;   /* lift the box column slightly, but clear of the hero's donate invite */
	/* Shared page scroll — the sidebar scrolls together with the main column. */
}

.pix-card {
	background: var(--pix-content-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius);
	box-shadow: var(--pix-shadow);
}
.pix-card--content { padding: 26px 30px; overflow-x: auto; color: var(--pix-ink); }
.pix-card--box { padding: 0; overflow: hidden; }

/* =========================================================================
   NORMALIZE MyAAC CORE CONTENT ($content) — modern dark skin
   ========================================================================= */
.pix-card--content { font-size: 15.5px; }
.pix-card--content img { max-width: 100%; height: auto; }

.pix-card--content .TableShadowContainer,
.pix-card--content .TableShadowContainerRightTop,
.pix-card--content .TableContentAndRightShadow,
.pix-card--content .TableShadowRightTop,
.pix-card--content .TableBottomShadow,
.pix-card--content .TableBottomRightShadow,
.pix-card--content .TableBottomLeftShadow,
.pix-card--content .CaptionContainer,
.pix-card--content .CaptionInner {
	background-image: none !important;
}

.pix-card--content .TableContainer { margin-bottom: 20px; }

/* Section header for the classic Tibia table shell (account, characters, guilds…) */
.pix-card--content .CaptionInnerContainer {
	background: rgba(255, 255, 255, .05) !important;
	border-bottom: 1px solid var(--pix-border);
	border-left: 3px solid var(--pix-green-lt);
	padding: 11px 16px !important;
	height: auto !important; width: auto !important;
}
.pix-card--content .Caption {
	display: block;
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid var(--pix-border);
	border-left: 3px solid var(--pix-green-lt);
	border-radius: var(--pix-radius-sm);
	padding: 10px 16px !important;
	height: auto !important; width: auto !important;
}
.pix-card--content .Caption,
.pix-card--content .CaptionInner,
.pix-card--content .CaptionInnerContainer .Text,
.pix-card--content .CaptionContainer .Text {
	color: #fff !important;
	font-family: var(--pix-display);
	font-weight: 700;
	letter-spacing: .3px;
	font-size: 16px;
	padding: 0 !important;
}
/* GIF corner/edge spans of the Tibia caption → hidden */
.pix-card--content .CaptionEdgeLeftTop,
.pix-card--content .CaptionEdgeRightTop,
.pix-card--content .CaptionEdgeLeftBottom,
.pix-card--content .CaptionEdgeRightBottom,
.pix-card--content .CaptionBorderTop,
.pix-card--content .CaptionBorderBottom,
.pix-card--content .CaptionVerticalLeft,
.pix-card--content .CaptionVerticalRight { display: none !important; }

.pix-card--content .TableContent,
.pix-card--content table.TableContent {
	width: 100%;
	background: rgba(255, 255, 255, .015) !important;
	border: 1px solid var(--pix-hairline);
	border-collapse: collapse;
	border-radius: var(--pix-radius-sm);
	overflow: hidden;
	color: var(--pix-ink);
}
.pix-card--content .TableContent td,
.pix-card--content .TableContent th { padding: 8px 12px; }

.pix-card--content table[bgcolor] { background: transparent !important; }
.pix-card--content tr[bgcolor] { background: transparent !important; }
.pix-card--content td[bgcolor], .pix-card--content th[bgcolor] { background: transparent !important; }
.pix-card--content .TableContent tr:nth-child(even) > td { background: rgba(255, 255, 255, .03); }
.pix-card--content .TableContent tr:hover > td { background: rgba(164, 197, 32, .10); }

.pix-card--content .LabelV { color: var(--pix-gold); font-weight: 600; }
.pix-card--content h1,
.pix-card--content h2,
.pix-card--content h3 {
	color: #fff;
	font-family: var(--pix-display);
	letter-spacing: .3px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--pix-green);   /* green accent underline */
}
.pix-card--content a { color: var(--pix-green-lt); }
.pix-card--content a:hover { color: var(--pix-gold-lt); }

/* Content form controls */
.pix-card--content input:not([type]),
.pix-card--content input[type="text"],
.pix-card--content input[type="password"],
.pix-card--content input[type="email"],
.pix-card--content input[type="number"],
.pix-card--content select,
.pix-card--content textarea {
	padding: 9px 12px;
	/* Sit on the panel rather than punching a dark hole in it — the border does
	   the work of marking the field. */
	background: transparent;
	border: 1px solid var(--pix-border-gold);
	border-radius: var(--pix-radius-sm);
	color: var(--pix-ink);
	font-family: inherit;
	font-size: 15px;
	max-width: 100%;
	transition: border-color .18s, box-shadow .18s;
}
.pix-card--content input:not([type])::placeholder,
.pix-card--content input[type="text"]::placeholder,
.pix-card--content input[type="password"]::placeholder,
.pix-card--content input[type="email"]::placeholder,
.pix-card--content input[type="number"]::placeholder,
.pix-card--content textarea::placeholder { color: var(--pix-ink-soft); opacity: .65; }
.pix-card--content input:not([type]):hover,
.pix-card--content input[type="text"]:hover,
.pix-card--content input[type="password"]:hover,
.pix-card--content input[type="email"]:hover,
.pix-card--content input[type="number"]:hover,
.pix-card--content select:hover,
.pix-card--content textarea:hover { border-color: var(--pix-gold); }
/* selects still need a solid backdrop or the native dropdown list is unreadable */
.pix-card--content select { background: var(--pix-panel-2); }
.pix-card--content textarea { min-height: 110px; line-height: 1.5; }
.pix-card--content input:focus,
.pix-card--content select:focus,
.pix-card--content textarea:focus { outline: none; border-color: var(--pix-border-gold); box-shadow: 0 0 0 3px rgba(234, 161, 0, .12); }
.pix-card--content button,
.pix-card--content input[type="submit"] {
	padding: 10px 20px;
	border: 0;
	border-radius: var(--pix-radius-sm);
	background: var(--pix-gold-grad);
	color: #1a1200;
	font-family: var(--pix-display);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: box-shadow .18s, transform .12s;
}
.pix-card--content button:hover,
.pix-card--content input[type="submit"]:hover { box-shadow: var(--pix-glow-gold); transform: translateY(-1px); }

/* Classic "tables.headline" wrapper — modern card (see tables.headline.html.twig) */
.pix-card--content .pix-headline {
	margin-bottom: 20px;
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius-sm);
	overflow: hidden;
	/* neutral grey works on both themes; the callers' hardcoded darkborder is
	   ignored in tables.headline.html.twig */
	background: var(--pix-fill);
}
.pix-card--content .pix-headline__title {
	font-family: var(--pix-display);
	font-weight: 700;
	letter-spacing: .5px;
	color: #fff;
	background: var(--pix-fill-2);
	border-bottom: 1px solid var(--pix-border);
	border-left: 3px solid var(--pix-green-lt);
	padding: 11px 16px;
}
.pix-card--content .pix-headline__body { padding: 16px 18px; }

/* Legacy Tibia table shell containers → transparent (kill parchment/scroll bg) */
.pix-card--content .InnerTableContainer,
.pix-card--content .TableContentContainer,
.pix-card--content .TableContentAndRightShadow,
.pix-card--content .TableShadowContainer,
.pix-card--content .TableShadowContainerRightTop { background: transparent !important; }

/* Download page account images: frame them so they don't float raw on the dark bg */
.pix-card--content img[src*="download_"],
.pix-card--content img[src*="successful_download"] {
	border-radius: var(--pix-radius-sm);
	box-shadow: var(--pix-shadow-sm);
	background: rgba(255, 255, 255, .03);
}

/* =========================================================================
   LEGACY TIBIA SECTIONS → CARDS (account manage, characters, guilds)
   ========================================================================= */
.pix-card--content .TableContainer {
	background: rgba(255, 255, 255, .02);
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius);
	overflow: hidden;
	margin-bottom: 16px;
}
.pix-card--content [style*="table-headline-border"],
.pix-card--content [style*="circle-symbol"] { background-image: none !important; }
.pix-card--content .Table5,
.pix-card--content .TableContentContainer { background: transparent !important; padding: 0; }
.pix-card--content .Table5 { width: 100%; }
.pix-card--content .Table5 > tbody > tr > td { padding: 14px 16px; }
/* Accordion section content (quests, achievements, deaths, experience history)
   must fill the card width. The tibia wrapper tables (Table3/Table5) default to
   auto width and shrink to content — force every table in the shell to 100%. */
.pix-card--content .TableContainer table,
.pix-card--content .InnerTableContainer,
.pix-card--content .InnerTableContainer .TableContent { width: 100% !important; }
/* nested content tables inside a section shouldn't double-border */
.pix-card--content .TableContainer .TableContent { border: 0; }
.pix-card--content .TableContainer .TableContent td,
.pix-card--content .TableContainer .TableContent th { border-bottom: 1px solid var(--pix-hairline); }

/* Accordion: the caption header itself is the toggle (JS adds .pix-accordion-head) */
.pix-card--content .pix-accordion-head { cursor: pointer; position: relative; }
.pix-card--content .pix-accordion-head .CaptionInnerContainer { padding-right: 40px !important; }
.pix-card--content .pix-accordion-head::after {
	content: "\25B8"; /* ▸ */
	position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
	color: var(--pix-gold); font-size: 13px; pointer-events: none;
}
.pix-card--content .pix-accordion-head.is-open::after { content: "\25BE"; } /* ▾ */
.pix-card--content .pix-accordion-head:hover .CaptionInnerContainer { background: rgba(255, 255, 255, .08) !important; }

/* Account "vertical-menu" — core twig hardcodes black text on config.lightborder;
   override with theme vars so it's visible and reacts to dark/light mode. */
.pix-card--content .vertical-menu {
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius-sm);
	overflow: hidden;
}
.pix-card--content .vertical-menu a {
	background: var(--pix-panel-tp) !important;
	color: var(--pix-ink) !important;
	border-bottom: 1px solid var(--pix-hairline);
	font-family: var(--pix-display); font-weight: 600;
	padding: 11px 14px !important;
	transition: background .15s, color .15s;
}
.pix-card--content .vertical-menu a:last-child { border-bottom: 0; }
.pix-card--content .vertical-menu a:hover {
	background: var(--pix-gold-grad) !important;
	color: #1a1200 !important;
}
@media (max-width: 620px) {
	.pix-card--content #one { width: 100% !important; float: none !important; }
	.pix-card--content #two { margin-left: 0 !important; }
}

/* Generic content tables with bgcolor rows (news archive, bans, team, highscores)
   — separate rows and give the header row a distinct look. */
/* account.management.html.twig paints its rows with inline background-color taken
   from config.ini (dark by design) — in light mode that leaves dark text on a dark
   row. Drop the inline paint and let our own zebra + ink colours take over. */
.pix-card--content table[style*="background-color"],
.pix-card--content td[style*="background-color"],
.pix-card--content tr[style*="background-color"] { background-color: transparent !important; }
.pix-card--content tr[style*="background-color"] > td { border-bottom: 1px solid var(--pix-hairline); padding: 8px 10px; color: var(--pix-ink); }
.pix-card--content tr[style*="background-color"]:nth-child(even) > td { background: var(--pix-fill); }
.pix-card--content tr[style*="background-color"]:hover > td { background: rgba(164, 197, 32, .08); }

.pix-card--content tr[bgcolor] > td { border-bottom: 1px solid var(--pix-hairline); padding: 8px 10px; }
.pix-card--content tr[bgcolor]:hover > td { background: rgba(164, 197, 32, .08); }
.pix-card--content td.white { color: var(--pix-gold-lt) !important; font-family: var(--pix-display); font-weight: 700; }
.pix-card--content tr:has(> td.white) { background: rgba(255, 255, 255, .05); }
.pix-card--content tr:has(> td.white):hover > td { background: rgba(255, 255, 255, .05); }

/* Highscores/guild cropped outfit avatars: the outfit <img> is position:absolute
   with negative margins → give its cell a fixed, cropped box so it doesn't spill. */
.pix-card--content td:has(> img[style*="position:absolute"]) {
	position: relative;
	flex: 0 0 80px;
	width: 80px; min-width: 80px; height: 80px;
	overflow: hidden;
}
/* outfit.php returns a 64x64 sprite; the core -45px/-25px offsets were made for
   128px sprites and cut the character — show the full outfit filling the box. */
.pix-card--content td > img[style*="position:absolute"] {
	position: static !important;
	margin: 0 !important;
	width: 100% !important; height: 100% !important;
	object-fit: contain;
}

/* Character info tables — labels gold, tidy rows */
.pix-card--content .LabelV,
.pix-card--content .LabelV80,
.pix-card--content .LabelH { color: var(--pix-gold) !important; font-weight: 600; white-space: nowrap; }

/* Clickable hero logo */
.pix-hero__logo-link { display: inline-block; text-decoration: none; transition: transform .15s; }
.pix-hero__logo-link:hover { transform: translateY(-2px); }

/* Buttons (input[type=submit]) wrapped in an <a> (e.g. "Edit Character" in the
   admin panel link) capture the click and, having no form, do nothing — let the
   click fall through to the anchor so it navigates. */
.pix-card--content a > input[type="submit"],
.pix-card--content a > input[type="button"],
.pix-card--content a input.BigButtonText,
.pix-card--content a input[type="submit"],
.pix-card--content a input[type="button"] { pointer-events: none; }
.pix-card--content a:has(> input[type="submit"]),
.pix-card--content a:has(input[type="submit"]) { display: inline-block; cursor: pointer; }

/* =========================================================================
   NEWS ARTICLES (custom HTML posts) — match the dark modern theme
   ========================================================================= */
.pix-card--content .news { max-width: 860px; margin: 0 auto; }
.pix-card--content .news-hero { text-align: center; margin-bottom: 20px; }
.pix-card--content .news-hero__emoji { display: block; font-size: 42px; line-height: 1; margin-bottom: 8px; }
.pix-card--content .news-hero__title {
	font-family: var(--pix-display); font-size: clamp(24px, 3.4vw, 32px); font-weight: 800;
	color: #fff; border: 0 !important; padding: 0 !important; margin: 0; letter-spacing: .3px;
}
:root[data-theme="light"] .pix-card--content .news-hero__title { color: #14161c; }
.pix-card--content .news-hero__sub { font-family: var(--pix-display); font-size: 18px; color: var(--pix-gold-lt); margin-top: 4px; }
.pix-card--content .news-lead { font-size: 16px; color: var(--pix-ink); text-align: center; max-width: 720px; margin: 0 auto; line-height: 1.6; }
.pix-card--content .news-divider { height: 1px; border: 0; background: var(--pix-hairline); margin: 26px 0; }
.pix-card--content .news h2 {
	font-family: var(--pix-display); font-size: 20px; color: var(--pix-gold-lt);
	border: 0 !important; padding: 0 !important; margin: 26px 0 12px; letter-spacing: .3px;
}
.pix-card--content .news p { line-height: 1.65; }
.pix-card--content .news ul { line-height: 1.7; padding-left: 22px; }
.pix-card--content .news ul li { margin-bottom: 7px; }
.pix-card--content .news ul li strong,
.pix-card--content .news p strong { color: var(--pix-gold); }
.pix-card--content .news a { color: var(--pix-green-lt); font-weight: 600; }
.pix-card--content .news a:hover { color: var(--pix-gold-lt); }
.pix-card--content .news-cta { text-align: center; margin: 14px 0; }

.pix-card--content .news-gallery { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin: 18px 0; }
.pix-card--content .news-figure { flex: 1 1 220px; max-width: 260px; margin: 0; text-align: center; }
.pix-card--content .news-figure--lg { flex-basis: 460px; max-width: 520px; }
.pix-card--content .news-frame {
	width: 100%; height: auto; border: 1px solid var(--pix-border-gold);
	border-radius: var(--pix-radius); box-shadow: var(--pix-shadow); background: rgba(0, 0, 0, .2);
	transition: transform .18s ease, box-shadow .2s;
}
.pix-card--content .news-figure:hover .news-frame { transform: translateY(-3px); box-shadow: var(--pix-shadow), var(--pix-glow-gold); }
.pix-card--content .news-figure figcaption { margin-top: 6px; font-size: 13px; color: var(--pix-ink-soft); font-family: var(--pix-display); }
.pix-card--content .news-figure--fixed { flex: 0 0 auto; }
.pix-card--content .news-figure--fixed .news-frame { height: 180px; object-fit: contain; }

.pix-card--content .news-foot { text-align: center; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--pix-hairline); }
.pix-card--content .news-foot img { max-width: 160px; height: auto; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .5)); }
.pix-card--content .news-foot p { margin: 12px 0 0; font-weight: 700; font-family: var(--pix-display); }

/* =========================================================================
   CHARACTER PAGE — modern div layout (info + equipment + skills/bars)
   ========================================================================= */
.pix-card--content .pix-section {
	border: 1px solid var(--pix-border); border-radius: var(--pix-radius);
	background: rgba(255, 255, 255, .02); overflow: hidden; margin-bottom: 16px;
}
.pix-card--content .pix-section__head {
	font-family: var(--pix-display); font-weight: 700; color: #fff;
	background: rgba(255, 255, 255, .05); border-bottom: 1px solid var(--pix-border);
	border-left: 3px solid var(--pix-green-lt); padding: 11px 16px;
}
:root[data-theme="light"] .pix-card--content .pix-section__head { color: #14161c; }
.pix-card--content .pix-section__body { padding: 14px 16px; }

.pix-card--content .ch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pix-card--content .ch-grid > .ch-info { margin-bottom: 0; }
.pix-card--content .ch-side { display: flex; flex-direction: column; gap: 16px; }
.pix-card--content .ch-side .pix-section { margin-bottom: 0; }

.pix-card--content .ch-row { display: flex; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--pix-hairline); font-size: 14.5px; }
.pix-card--content .ch-row:last-child { border-bottom: 0; }
.pix-card--content .ch-k { flex: 0 0 42%; color: var(--pix-gold); font-weight: 600; }
.pix-card--content .ch-v { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.pix-card--content .ch-v img { vertical-align: middle; }

.pix-card--content .ch-comment { word-break: break-word; color: var(--pix-ink-soft); font-style: italic; }

.pix-card--content .ch-eq { text-align: center; }
.pix-card--content .ch-outfit { margin-bottom: 14px; }
.pix-card--content .ch-outfit img { width: 96px; height: 96px; image-rendering: auto; }
.pix-card--content .ch-paperdoll { display: flex; gap: 10px; justify-content: center; }
.pix-card--content .ch-pd-col { display: flex; flex-direction: column; gap: 10px; }
.pix-card--content .ch-slot {
	width: 68px; height: 68px; display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--pix-border); border-radius: 8px; background: rgba(0, 0, 0, .28);
	transition: transform .14s ease, border-color .14s, box-shadow .18s;
}
.pix-card--content .ch-slot:hover { transform: scale(1.12); border-color: var(--pix-border-gold); box-shadow: var(--pix-shadow-sm); z-index: 2; }
.pix-card--content .ch-slot img { width: 60px !important; height: 60px !important; }
.pix-card--content .ch-eq-meta { display: flex; gap: 20px; justify-content: center; margin-top: 12px; font-size: 13px; color: var(--pix-ink-soft); }
.pix-card--content .ch-eq-meta b { color: var(--pix-gold-lt); }

.pix-card--content .ch-bars { display: grid; gap: 14px; margin-bottom: 18px; }
.pix-card--content .ch-bar__top { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 5px; font-family: var(--pix-display); font-weight: 600; }
.pix-card--content .ch-bar__top span:first-child { color: var(--pix-ink); }
.pix-card--content .ch-bar__top span:last-child { color: var(--pix-ink-soft); }
.pix-card--content .ch-bar__track { height: 14px; background: rgba(0, 0, 0, .30); border: 1px solid var(--pix-border); border-radius: 8px; overflow: hidden; }
.pix-card--content .ch-bar__fill { height: 100%; border-radius: 8px; transition: width .4s ease; }
.pix-card--content .ch-bar__fill--hp { background: linear-gradient(90deg, #a3271b, #e74c3c); }
.pix-card--content .ch-bar__fill--mp { background: linear-gradient(90deg, #1f5fa0, #3498db); }
.pix-card--content .ch-bar__fill--xp { background: var(--pix-gold-grad); }
.pix-card--content .ch-bar__note { margin-top: 4px; font-size: 12.5px; color: var(--pix-ink-soft); }
.pix-card--content .ch-bar__note b { color: var(--pix-gold-lt); }

.pix-card--content .ch-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.pix-card--content .ch-skill {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 6px;
	border: 1px solid var(--pix-border); border-top: 3px solid var(--pix-green-lt);
	border-radius: var(--pix-radius-sm); background: var(--pix-panel-tp);
	transition: transform .14s ease, border-color .14s, box-shadow .18s;
}
.pix-card--content .ch-skill:hover { transform: scale(1.08); border-color: var(--pix-border-gold); box-shadow: var(--pix-shadow-sm); z-index: 2; }
/* faint item icon in the tile background (set inline per skill) */
.pix-card--content .ch-skill[style*="--ch-skill-icon"]::before {
	content: ""; position: absolute; right: 4px; bottom: 4px; width: 34px; height: 34px;
	background-image: var(--ch-skill-icon); background-size: contain; background-repeat: no-repeat; background-position: center;
	opacity: .16; pointer-events: none;
}
.pix-card--content .ch-skill__name { position: relative; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--pix-ink-soft); font-family: var(--pix-display); font-weight: 600; text-align: center; }
.pix-card--content .ch-skill__val { position: relative; font-family: var(--pix-display); font-size: 19px; font-weight: 800; color: var(--pix-gold-lt); }

@media (max-width: 720px) {
	.pix-card--content .ch-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   SUPPORT LIST (team) — cards grouped by rank
   ========================================================================= */
.pix-card--content .team-group { margin-bottom: 26px; }
.pix-card--content .team-group__title {
	font-family: var(--pix-display); color: var(--pix-gold-lt);
	font-size: 18px; margin: 0 0 12px; padding-bottom: 8px;
	border-bottom: 2px solid var(--pix-green);
}
.pix-card--content .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pix-card--content .team-card {
	display: flex; align-items: center; gap: 14px; padding: 12px 14px;
	border: 1px solid var(--pix-border); border-radius: var(--pix-radius);
	background: var(--pix-panel-tp); transition: transform .15s, border-color .15s, box-shadow .18s;
}
.pix-card--content .team-card:hover { transform: translateY(-3px); border-color: var(--pix-border-gold); box-shadow: var(--pix-shadow); }
.pix-card--content .team-card.is-online { border-left: 3px solid var(--pix-green-lt); }
.pix-card--content .team-card__avatar {
	position: relative; flex: 0 0 62px; width: 62px; height: 62px; overflow: hidden;
	border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--pix-border);
	display: flex; align-items: center; justify-content: center;
}
.pix-card--content .team-card__avatar img { width: 100%; height: 100%; object-fit: contain; }
.pix-card--content .team-card__info { min-width: 0; }
.pix-card--content .team-card__name { font-family: var(--pix-display); font-weight: 700; font-size: 15px; }
.pix-card--content .team-card__name a { color: var(--pix-ink); }
.pix-card--content .team-card__name a:hover { color: var(--pix-gold-lt); }
.pix-card--content .team-card__meta { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--pix-ink-soft); }
.pix-card--content .team-status { font-weight: 700; }
.pix-card--content .team-status.is-on { color: var(--pix-green-lt); }
.pix-card--content .team-status.is-off { color: var(--pix-ink-soft); }

/* =========================================================================
   HIGHSCORES — vocation counts + clean filters
   ========================================================================= */
.pix-card--content .hs-vocbar { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 0 0 22px; }
.pix-card--content .hs-voc {
	flex: 1 1 120px; min-width: 108px; text-align: center; padding: 14px 10px;
	border: 1px solid var(--pix-border); border-top: 3px solid var(--pix-green-lt);
	border-radius: var(--pix-radius); background: var(--pix-panel-tp);
	transition: transform .15s, border-color .15s;
}
.pix-card--content .hs-voc:hover { transform: translateY(-3px); border-color: var(--pix-border-gold); }
.pix-card--content .hs-voc__count { display: block; font-family: var(--pix-display); font-size: 28px; font-weight: 800; color: var(--pix-gold-lt); line-height: 1; }
.pix-card--content .hs-voc__name { display: block; margin-top: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--pix-ink-soft); font-family: var(--pix-display); font-weight: 600; }

.pix-card--content .hs-filters {
	display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; padding: 14px 16px;
	border: 1px solid var(--pix-border); border-radius: var(--pix-radius); background: rgba(255, 255, 255, .02);
}
.pix-card--content .hs-filters label {
	display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px;
	font-family: var(--pix-display); font-weight: 700; font-size: 12px; letter-spacing: .5px;
	text-transform: uppercase; color: var(--pix-gold);
}
.pix-card--content .hs-filters select { width: 100%; }
.pix-card--content .hs-pager { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* =========================================================================
   WIKI — tiled index
   ========================================================================= */
.wiki-head { text-align: center; margin-bottom: 22px; }
.wiki-head h1 { margin: 0 0 6px; font-size: clamp(26px, 3.6vw, 36px); color: #fff; border: 0; }
.wiki-head p { margin: 0; color: var(--pix-ink-soft); }
.wiki-back { margin-bottom: 18px; }
.wiki-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.wiki-tile {
	display: flex; flex-direction: column; gap: 6px;
	padding: 20px 18px;
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius);
	background: var(--pix-panel-tp);
	color: var(--pix-ink);
	transition: transform .15s, border-color .15s, box-shadow .18s;
}
.wiki-tile:hover {
	transform: translateY(-4px);
	border-color: var(--pix-border-gold);
	box-shadow: var(--pix-shadow), var(--pix-glow-green);
	color: var(--pix-ink);
}
.wiki-tile__icon {
	width: 52px; height: 52px; margin-bottom: 6px;
	display: flex; align-items: center; justify-content: center;
	font-size: 28px; border-radius: 14px;
	background: rgba(255, 255, 255, .04); border: 1px solid var(--pix-border);
}
.wiki-tile__title { font-family: var(--pix-display); font-weight: 700; font-size: 18px; color: #fff; }
:root[data-theme="light"] .wiki-tile__title,
:root[data-theme="light"] .wiki-head h1 { color: #14161c; }
.wiki-tile__desc { font-size: 13.5px; color: var(--pix-ink-soft); line-height: 1.45; }

/* -------------------------------------------------------------------------
   Single wiki article. Each wiki twig ships its own <style> with a hardcoded
   parchment palette (#7c5331 headers, #a48e7b cells, #000 borders/text). Those
   blocks live in the body, so they'd win on equal specificity — every rule here
   is scoped to .wiki-page to out-specify them, and inline background-colors
   (forge's #d4eaff / #b2fcd2 rows) need !important.
   ------------------------------------------------------------------------- */
.wiki-page { color: var(--pix-ink); font-size: 14.5px; line-height: 1.6; }
.wiki-page__title {
	margin: 0 0 18px; padding-bottom: 12px;
	font-size: clamp(24px, 3.2vw, 32px); color: #fff;
	border: 0; border-bottom: 1px solid var(--pix-border);
}
:root[data-theme="light"] .wiki-page__title { color: #14161c; }
.wiki-page h1, .wiki-page h2, .wiki-page h3 { color: var(--pix-gold-lt); border: 0; }
:root[data-theme="light"] .wiki-page h1,
:root[data-theme="light"] .wiki-page h2,
:root[data-theme="light"] .wiki-page h3 { color: #8a5c00; }
.wiki-page h2 { font-size: 21px; margin: 26px 0 10px; }
.wiki-page h3 { font-size: 17px; margin: 20px 0 8px; }
.wiki-page p { color: var(--pix-ink); }
.wiki-page a { color: var(--pix-gold-lt); }
.wiki-page a:hover { color: var(--pix-gold); }

/* Board grids (addon tasks, one-time / daily tasks, raids) */
.wiki-page .addon-board-grid,
.wiki-page .task-board-grid {
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius-sm);
	overflow: hidden;
}
/* Dark neutral header (matches the repeatable-tasks page the user liked) —
   gold-on-gold made the text unreadable. Force the text and any links white. */
.wiki-page .addon-board-header,
.wiki-page .task-board-header,
.wiki-page .addons-header,
.wiki-page .table-header,
.wiki-page .pixellor-table th {
	background: var(--pix-panel-2);
	color: #fff;
	border: 1px solid var(--pix-border);
	font-family: var(--pix-display);
	font-weight: 700;
	letter-spacing: .4px;
}
:root[data-theme="light"] .wiki-page .addon-board-header,
:root[data-theme="light"] .wiki-page .task-board-header,
:root[data-theme="light"] .wiki-page .addons-header,
:root[data-theme="light"] .wiki-page .table-header,
:root[data-theme="light"] .wiki-page .pixellor-table th { color: #14161c; }
.wiki-page .addon-board-header *,
.wiki-page .task-board-header *,
.wiki-page .addons-header *,
.wiki-page .table-header *,
.wiki-page .pixellor-table th * { color: inherit; }
.wiki-page .addon-board-cell,
.wiki-page .task-board-cell,
.wiki-page .pixellor-table td {
	background: var(--pix-fill);
	color: var(--pix-ink);
	border: 1px solid var(--pix-border);
}
.wiki-page .addon-name,
.wiki-page .task-name { color: var(--pix-gold-lt); font-family: var(--pix-display); font-weight: 700; }
:root[data-theme="light"] .wiki-page .addon-name,
:root[data-theme="light"] .wiki-page .task-name { color: #8a5c00; }

/* Info panels */
.wiki-page .monster-list-box,
.wiki-page .note-box,
.wiki-page .pixellor-frame,
.wiki-page .rb-container,
.wiki-page .vip-container,
.wiki-page .soulpit-container,
.wiki-page .wheel-container,
.wiki-page .fusion-container {
	background: var(--pix-fill) !important;
	color: var(--pix-ink) !important;
	border: 1px solid var(--pix-border) !important;
	border-radius: var(--pix-radius-sm);
}
.wiki-page .note-box { border-left: 3px solid var(--pix-gold) !important; }
.wiki-page .pixellor-divider { border: 0; border-top: 1px solid var(--pix-border); margin: 22px 0; height: 1px; background: none; }
.wiki-page .cta { color: var(--pix-gold-lt); }
.wiki-page .rare { color: var(--pix-gold-lt); }

/* Selects (addon tasks level filter) */
.wiki-page .custom-select {
	background: var(--pix-panel-2) !important;
	color: var(--pix-ink) !important;
	border: 1px solid var(--pix-border) !important;
	border-radius: var(--pix-radius-sm);
}
.wiki-page .custom-select:hover,
.wiki-page .custom-select:focus { border-color: var(--pix-border-gold) !important; background: var(--pix-panel-2) !important; }

/* Legacy tables + any element painted inline with the old parchment palette */
.wiki-page table { width: 100%; border-collapse: collapse; }
.wiki-page td[style*="background-color"],
.wiki-page th[style*="background-color"],
.wiki-page tr[style*="background-color"],
.wiki-page div[style*="background-color"] { background-color: var(--pix-fill) !important; color: var(--pix-ink) !important; }
/* forge keeps its two-tone rows — keep the distinction, just theme-tinted */
.wiki-page td[style*="#b2fcd2"] { background-color: rgba(164, 197, 32, .13) !important; }
.wiki-page td[style*="#d4eaff"] { background-color: rgba(120, 170, 255, .12) !important; }
.wiki-page td, .wiki-page th { border-color: var(--pix-border) !important; }

/* =========================================================================
   DOWNLOADS PAGE (pixellor override of better-downloads-page views)
   ========================================================================= */
.dl-wrap { display: grid; gap: 22px; }
.dl-hero { text-align: center; padding: 8px 0 2px; }
.dl-hero__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; margin-bottom: 10px;
	font-size: 30px; border-radius: 16px;
	background: var(--pix-gold-grad); color: #1a1200;
	box-shadow: var(--pix-shadow-sm), var(--pix-glow-gold);
}
.dl-hero h2 { margin: 0 0 6px; font-size: clamp(24px, 3.4vw, 34px); color: #fff; border: 0; }
.dl-hero p { margin: 0; color: var(--pix-ink-soft); }

.dl-panel { border: 1px solid var(--pix-border); border-radius: var(--pix-radius); overflow: hidden; background: rgba(255, 255, 255, .02); }
.dl-panel__head {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 18px; background: rgba(255, 255, 255, .05);
	border-bottom: 1px solid var(--pix-border); border-left: 3px solid var(--pix-green-lt);
}
.dl-panel__head h2 { margin: 0; font-size: 19px; color: #fff; border: 0; padding: 0; }
.dl-panel__icon { font-size: 20px; }
.dl-panel__body { padding: 16px 20px; }
.dl-agreement p { margin: 0 0 12px; color: var(--pix-ink); }
.dl-agreement p:last-child { margin-bottom: 0; }

.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.dl-item {
	display: flex; align-items: center; gap: 14px;
	padding: 16px; border: 1px solid var(--pix-border); border-radius: var(--pix-radius);
	background: var(--pix-panel-tp);
	transition: transform .15s, border-color .15s, box-shadow .18s;
}
.dl-item:hover { transform: translateY(-3px); border-color: var(--pix-border-gold); box-shadow: var(--pix-shadow); }
.dl-item__badge {
	flex: 0 0 52px; width: 52px; height: 52px;
	display: flex; align-items: center; justify-content: center;
	font-size: 26px; border-radius: 12px;
	background: rgba(255, 255, 255, .04); border: 1px solid var(--pix-border);
}
.dl-item__meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.dl-item__os { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--pix-gold); font-family: var(--pix-display); font-weight: 600; }
.dl-item__name { font-family: var(--pix-display); font-weight: 700; color: #fff; font-size: 16px; }
.dl-item .pix-btn { flex: 0 0 auto; }

.dl-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0; padding: 0; }

.dl-req {
	border: 1px solid var(--pix-border); border-radius: var(--pix-radius);
	background: rgba(255, 255, 255, .02); overflow: hidden;
}
.dl-req > summary {
	cursor: pointer; list-style: none; padding: 13px 18px;
	font-family: var(--pix-display); font-weight: 700; color: #fff;
	background: rgba(255, 255, 255, .04);
}
.dl-req > summary::-webkit-details-marker { display: none; }
.dl-req > summary::after { content: "▾"; float: right; color: var(--pix-gold); transition: transform .2s; }
.dl-req[open] > summary::after { transform: rotate(180deg); }
.dl-req__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 28px; padding: 16px 20px; }
.dl-req__cols strong { color: var(--pix-gold-lt); font-family: var(--pix-display); display: block; margin-bottom: 6px; }
.dl-req__cols ul { margin: 0; padding-left: 18px; color: var(--pix-ink-soft); font-size: 14px; }
.dl-req__cols li { margin-bottom: 4px; }

.dl-disclaimer {
	border: 1px solid var(--pix-border); border-left: 3px solid var(--pix-gold);
	border-radius: var(--pix-radius-sm); padding: 14px 18px; background: rgba(255, 255, 255, .02);
}
.dl-disclaimer strong { display: block; margin-bottom: 6px; color: var(--pix-gold-lt); font-family: var(--pix-display); }
.dl-disclaimer p { margin: 0; color: var(--pix-ink-soft); font-size: 14px; }

/* =========================================================================
   SIDEBAR BOX CARDS
   ========================================================================= */
.pix-card--box { background: var(--pix-panel-tp); border: 1px solid var(--pix-border); }
.pix-card--box:hover { border-color: var(--pix-border-gold); }
.pix-box { color: var(--pix-ink); }
.pix-box__header {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, .03);
	color: #fff;
	font-family: var(--pix-display);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .4px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--pix-border);
	border-left: 3px solid var(--pix-green-lt);   /* green accent */
}
.pix-box__body { padding: 14px 16px; }
.pix-box__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 4px;
	border-bottom: 1px solid var(--pix-hairline);
}
.pix-box__row:last-of-type { border-bottom: 0; }
.pix-box__outfit {
	width: 64px; height: 64px; flex: 0 0 64px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;   /* show the whole 64px outfit — no cropping/overlap */
}
.pix-box__meta { min-width: 0; font-size: 14.5px; }
.pix-box__meta a { font-weight: 600; color: var(--pix-ink); }
.pix-box__meta a:hover { color: var(--pix-gold-lt); }
.pix-box__meta small { color: var(--pix-ink-soft); font-size: 13px; }
.pix-box__btn {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 11px 14px;
	border: 0;
	border-radius: var(--pix-radius-sm);
	background: var(--pix-gold-grad);
	color: #1a1200;
	font-family: var(--pix-display);
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: .4px;
	cursor: pointer;
	text-align: center;
	transition: box-shadow .18s, transform .12s;
}
.pix-box__btn:hover { box-shadow: var(--pix-glow-gold); transform: translateY(-1px); color: #1a1200; }
.pix-box__input {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius-sm);
	font-family: inherit;
	font-size: 15px;
	background: rgba(0, 0, 0, .35);
	color: var(--pix-ink);
}
.pix-box__input:focus { outline: none; border-color: var(--pix-border-gold); box-shadow: 0 0 0 3px rgba(234, 161, 0, .12); }
.pix-box__countdown {
	font-family: var(--pix-display);
	font-size: 32px;
	font-weight: 700;
	text-align: center;
	color: var(--pix-gold-lt);
	background: rgba(0, 0, 0, .35);
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius-sm);
	padding: 8px 0;
	letter-spacing: 2px;
}
.pix-box__note { text-align: center; font-size: 14px; color: var(--pix-ink-soft); margin-bottom: 10px; }
.pix-box__img { display: block; margin: 0 auto 12px; border-radius: var(--pix-radius-sm); }
.pix-templatebox { padding: 16px; color: var(--pix-ink); }

/* =========================================================================
   FOOTER + BACK TO TOP
   ========================================================================= */
.pix-footer {
	margin-top: 36px;
	background: rgba(8, 9, 12, .82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--pix-border);
	color: var(--pix-ink-soft);
}
.pix-footer__inner {
	max-width: 1260px;
	margin: 0 auto;
	padding: 24px 20px;
	font-size: 14.5px;
	text-align: center;
}
.pix-footer__inner a { color: var(--pix-gold-lt); }

.pix-totop {
	position: fixed;
	right: 18px; bottom: 18px;
	width: 46px; height: 46px;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--pix-gold-grad);
	color: #1a1200;
	border: 0;
	border-radius: 12px;
	box-shadow: var(--pix-shadow-sm);
	z-index: 800;
	font-size: 16px;
	transition: transform .15s, box-shadow .18s;
}
.pix-totop.is-visible { display: flex; }
.pix-totop:hover { transform: translateY(-3px); box-shadow: var(--pix-shadow-sm), var(--pix-glow-gold); }

/* Legacy Tibia hover tooltip (better-downloads "system requirements") → dark */
#HelperDivContainer {
	background-image: none !important;
	background: var(--pix-panel-2) !important;
	color: var(--pix-ink) !important;
	border: 1px solid var(--pix-border-gold) !important;
	border-radius: var(--pix-radius-sm);
	box-shadow: var(--pix-shadow);
	font-family: var(--pix-font) !important;
}
#HelperDivContainer .Ornament,
#HelperDivContainer .HelperDivArrow { display: none !important; }
#HelperDivContainer #HelperDivHeadline {
	color: var(--pix-gold-lt);
	font-family: var(--pix-display);
	font-size: 13.5px;
	font-weight: 700;
	padding: 10px 12px 0;
}
/* The event-calendar tooltips arrive as raw markup with no padding and inherit
   the page font size — keep them small and readable. */
#HelperDivContainer #HelperDivText {
	padding: 10px 12px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--pix-ink);
}
#HelperDivContainer #HelperDivHeadline:not(:empty) + #HelperDivText { padding-top: 6px; }
#HelperDivContainer .activated {
	color: var(--pix-gold-lt);
	font-family: var(--pix-display);
	font-size: 13px;
	margin-bottom: 4px;
}
/* generateIndicator() hardcodes margin-bottom:20px on the description block */
#HelperDivContainer #HelperDivText > div[style] { margin-bottom: 0 !important; }

/* =========================================================================
   THEME TOGGLE BUTTON
   ========================================================================= */
.pix-theme-toggle {
	width: 40px; height: 40px; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 18px; line-height: 1; cursor: pointer;
	color: var(--pix-gold); background: rgba(255, 255, 255, .04);
	border: 1px solid var(--pix-border); border-radius: 999px;
	transition: color .15s, border-color .15s, background .15s, transform .1s;
}
.pix-theme-toggle:hover { color: var(--pix-gold-lt); border-color: var(--pix-border-gold); background: rgba(255, 255, 255, .08); transform: translateY(-1px); }

/* =========================================================================
   NEWS HEADLINES (core news.html.twig) — modern header strip
   ========================================================================= */
.pix-card--content .NewsHeadlineBackground {
	background-image: none !important;
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--pix-border);
	border-left: 3px solid var(--pix-green-lt);
	border-radius: var(--pix-radius-sm);
	padding: 10px 14px; margin: 20px 0 10px;
	height: auto !important; width: auto !important; min-height: 0 !important;
}
.pix-card--content .NewsHeadlineIcon {
	width: 32px; height: 32px; margin: 0 !important; position: static !important;
	border-radius: 8px; flex: 0 0 auto;
}
.pix-card--content .NewsHeadlineText {
	order: 1; flex: 1 1 auto;
	font-family: var(--pix-display); font-weight: 700; font-size: 17px; color: #fff;
	white-space: normal;
}
.pix-card--content .NewsHeadlineDate { order: 2; color: var(--pix-ink-soft); font-size: 13px; white-space: nowrap; }
.pix-card--content .NewsHeadlineAuthor { order: 3; color: var(--pix-ink-soft); font-size: 13px; white-space: nowrap; }
.pix-card--content .NewsHeadlineAuthor b { color: var(--pix-gold); font-weight: 600; }

/* =========================================================================
   LEGACY TIBIA SCAFFOLDING (server-info etc.) — kill frames, style accordions
   ========================================================================= */
/* Nuke Tibia box-frame / scroll / table-shadow background images wherever inline */
.pix-card--content [style*="box-frame"],
.pix-card--content [style*="scroll.gif"],
.pix-card--content [style*="table-shadow"],
.pix-card--content [style*="newsheadline"] { background-image: none !important; }

/* Accordion "expand" bar (server-info experience/skill/magic/game params) */
.pix-card--content .BigToggleButton {
	position: static !important;
	cursor: pointer; display: flex; align-items: center; gap: 10px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--pix-border);
	border-left: 3px solid var(--pix-green-lt);
	border-radius: var(--pix-radius-sm);
	padding: 11px 16px; margin: 12px 0;
	color: #fff; font-family: var(--pix-display); font-weight: 700;
	transition: border-color .15s;
}
.pix-card--content .BigToggleButton:hover { border-color: var(--pix-border-gold); }
.pix-card--content [id^="Indicator_"] {
	position: static !important; background-image: none !important;
	width: 16px; height: 16px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
}
.pix-card--content [id^="Indicator_"]::before { content: "\25B8"; color: var(--pix-gold); font-size: 12px; }
.pix-card--content [id^="Indicator_"].is-open::before { content: "\25BE"; }

/* Safety net: legacy inline black text on our dark surfaces → readable ink */
.pix-card--content [style*="color:#000"],
.pix-card--content [style*="color: #000"],
.pix-card--content [style*="color:black"],
.pix-card--content [style*="color: black"] { color: var(--pix-ink) !important; }

/* Account management — tighter, more compact spacing */
.pix-card--content .TableContainer { margin-bottom: 12px; }
.pix-card--content .TableContent td,
.pix-card--content .TableContent th { padding: 6px 10px; }
.pix-card--content form p { margin: 6px 0; }

/* =========================================================================
   LIGHT THEME (toggled via .pix-theme-toggle → html[data-theme="light"])
   ========================================================================= */
:root[data-theme="light"] {
	--pix-black:      #e9ecf1;
	--pix-panel:      rgba(255, 255, 255, .88);
	--pix-panel-2:    rgba(255, 255, 255, .97);
	--pix-fill:       rgba(255, 255, 255, .92);
	--pix-fill-2:     rgba(255, 255, 255, 1);
	--pix-fill-3:     rgba(255, 255, 255, 1);
	--pix-panel-tp:   rgba(255, 255, 255, .84);
	--pix-content-bg: rgba(255, 255, 255, .88);
	--pix-ink:        #1b1e25;
	--pix-ink-soft:   #55606a;
	--pix-border:     rgba(0, 0, 0, .12);
	--pix-border-gold:rgba(200, 140, 0, .5);
	--pix-hairline:   rgba(0, 0, 0, .08);
	--pix-link:       #5f7a0a;
	--pix-shadow:     0 12px 30px rgba(0, 0, 0, .16);
	--pix-shadow-sm:  0 6px 16px rgba(0, 0, 0, .12);
	--pix-glow-gold:  0 0 18px rgba(234, 161, 0, .25);
}
:root[data-theme="light"] body::before {
	background:
		radial-gradient(120% 80% at 50% -10%, rgba(234, 161, 0, .10), transparent 60%),
		linear-gradient(180deg, rgba(238, 240, 245, .86) 0%, rgba(238, 240, 245, .66) 45%, rgba(238, 240, 245, .84) 100%);
}
:root[data-theme="light"] .pix-topbar { background: rgba(255, 255, 255, .82); }
:root[data-theme="light"] .pix-topbar.is-scrolled { background: rgba(255, 255, 255, .95); }
:root[data-theme="light"] .pix-nav__dropdown { background: rgba(255, 255, 255, .96); }
/* headings hardcoded white for the dark skin → dark on light */
:root[data-theme="light"] .pix-hero__title,
:root[data-theme="light"] .pix-boosted__name,
:root[data-theme="light"] .pix-box__header,
:root[data-theme="light"] .pix-headline__title,
:root[data-theme="light"] .dl-hero h2,
:root[data-theme="light"] .dl-item__name,
:root[data-theme="light"] .dl-panel__head h2,
:root[data-theme="light"] .dl-req > summary,
:root[data-theme="light"] .BigToggleButton,
:root[data-theme="light"] .NewsHeadlineText,
:root[data-theme="light"] .wiki-tile__title,
:root[data-theme="light"] .pix-card--content .Caption,
:root[data-theme="light"] .pix-card--content .CaptionInner,
:root[data-theme="light"] .pix-card--content .CaptionInnerContainer .Text,
:root[data-theme="light"] .pix-card--content .CaptionContainer .Text,
:root[data-theme="light"] .pix-card--content h1,
:root[data-theme="light"] .pix-card--content h2,
:root[data-theme="light"] .pix-card--content h3 { color: #14161c !important; }
/* mobile nav drawer in light mode → light bg so dark labels are readable */
:root[data-theme="light"] .pix-topbar__right .pix-online { color: var(--pix-ink); }
:root[data-theme="light"] .pix-nav__item:hover .pix-nav__label,
:root[data-theme="light"] .pix-nav__item.is-open .pix-nav__label { color: #14161c; }
:root[data-theme="light"] .pix-hero__logo { filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .25)); }
@media (max-width: 768px) {
	:root[data-theme="light"] .pix-nav { background: rgba(255, 255, 255, .98); }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 992px) {
	.pix-grid { grid-template-columns: 1fr; }
	.pix-aside {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		position: static;
		max-height: none;
		overflow: visible;
		top: auto;
		padding-right: 0;
		/* stacked under the main column now — the negative lift would glue the
		   boxes straight onto the content card */
		margin-top: 20px;
	}
	/* match .pix-main's 20px so the hero (boosted, events, donate) lines up with
	   the content card and the sidebar boxes below it */
	.pix-hero__inner { flex-direction: column; align-items: flex-start; padding-left: 20px; padding-right: 20px; }
	/* stacked layout: the side column no longer matches the carousel height —
	   let it flow, or its fixed height + space-between overlaps everything */
	.pix-hero__side {
		align-self: stretch;
		height: auto !important;
		width: 100%;
		justify-content: flex-start;
		gap: 12px;
	}
	.pix-hero__side > .pix-hero__boosted { flex: 0 0 auto; }
	.pix-hero__boosted { align-self: stretch; flex-wrap: wrap; justify-content: center; }
	.pix-hero__boosted .pix-boosted { flex: 1 1 140px; }
	.pix-events { width: 100%; min-width: 0; }
	.pix-hero__side .pix-events { min-width: 0; flex: 1 1 100%; }
	.pix-hero__side .pix-events__list { overflow: visible; }
	.pix-donate-mini { width: 100%; }
	/* front-page boosted tiles were vertically centred against the tall column;
	   not needed once the column is auto-height */
	.pix-hero:not(.pix-hero--compact) .pix-boosted img { margin-top: 0; }
	.pix-hero:not(.pix-hero--compact) .pix-boosted figcaption { margin-bottom: 0; }
}

@media (max-width: 768px) {
	.pix-burger { display: flex; }
	.pix-nav {
		position: fixed;
		top: 62px;
		left: 0; right: 0; bottom: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: rgba(10, 11, 15, .97);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-right: 1px solid var(--pix-border);
		padding: 10px;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform .22s ease;
		z-index: 899;
	}
	.pix-nav.is-open { transform: translateX(0); }
	.pix-nav__item { width: 100%; }
	.pix-nav__label { width: 100%; justify-content: space-between; }
	.pix-nav__label::after { display: none; }
	/* direct links (Wiki, Get Coins): icon + text kept together on the left,
	   not pushed apart by space-between */
	.pix-nav__label--link { justify-content: flex-start; gap: 8px; }
	.pix-nav__dropdown {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		background: rgba(255, 255, 255, .03);
		display: none;
		margin: 4px 0 8px;
	}
	.pix-nav__item.is-open .pix-nav__dropdown { display: block; }

	/* CRITICAL: the topbar's backdrop-filter makes it the containing block for
	   its fixed descendants, so the nav drawer was being clipped to the topbar's
	   ~62px height instead of the viewport. Drop the filter here (solid bg
	   instead) so the drawer is positioned against the viewport again. */
	.pix-topbar {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(10, 11, 15, .97);
	}
	:root[data-theme="light"] .pix-topbar { background: rgba(255, 255, 255, .97); }

	/* Keep the essentials reachable on mobile (language, theme, login) instead of
	   hiding the whole right cluster. Burger sits at the far right via order. */
	.pix-topbar__inner { flex-wrap: nowrap; }
	.pix-topbar__right { display: flex; order: 2; margin-left: auto; gap: 8px; }
	.pix-burger { order: 3; margin-left: 8px; }
	.pix-online { display: none; }                 /* the online counter needs the room */
	.pix-acct__meta { display: none; }             /* avatar + logout stay, name drops */
	.pix-acct__link { padding: 5px 6px; }
	.pix-lang__cur { display: none; }              /* globe only on mobile */
	.pix-lang__btn { padding: 0 9px; }
}

@media (max-width: 480px) {
	.pix-acct__register { display: none; }         /* register lives in the menu */
}

/* Phones (up to the hamburger breakpoint): stack the boosted tiles full-width
   and make them noticeably bigger. Covers wider phones, not just <=560. */
@media (max-width: 768px) {
	/* column + the inherited flex-wrap:wrap would wrap overflow into a second
	   column on the right (events flew off-screen) — force a single column.
	   The compact selector (subpages) needs matching specificity to beat
	   `.pix-hero--compact .pix-hero__boosted { flex-wrap: wrap }`. */
	.pix-hero__boosted,
	.pix-hero.pix-hero--compact .pix-hero__boosted {
		flex-direction: column; align-items: stretch; flex-wrap: nowrap;
		justify-content: flex-start;
	}
	/* subpage events: full-width block, not the right-aligned strip. Extra class
	   on the hero (.pix-hero.pix-hero--compact) outranks the strip rules that
	   sit later in the file. */
	.pix-hero.pix-hero--compact .pix-events {
		flex: 0 0 auto; width: 100%; max-width: none; margin-left: 0;
	}
	.pix-hero__side .pix-boosted {
		flex: 0 0 auto; width: 100%; min-width: 0;
		padding: 18px 14px 14px;
	}
	/* events: plain full-width block, not a grow-item with a 100% (height) basis */
	.pix-hero__side .pix-events { flex: 0 0 auto; width: 100%; min-width: 0; }
	.pix-hero__side .pix-boosted img { height: 128px; }
	.pix-hero__side .pix-boosted figcaption { margin-top: 12px; }
	.pix-hero__side .pix-boosted__name { font-size: 21px; }
	.pix-hero__side .pix-boosted--creature .pix-boosted__tag { font-size: 15px; }
	.pix-hero__side .pix-boosted--boss .pix-boosted__tag { font-size: 21px; }
	.pix-hero__side .pix-boosted--boss { border-width: 3px; }
}

@media (max-width: 480px) {
	.pix-aside { grid-template-columns: 1fr; }
	/* NB: do not re-enable flex-wrap here — the <=560 block stacks the boosted
	   tiles in a single column; wrap would send events into a second column. */
}

/* On touch/small screens the hover rail can't slide — dock it as a small
   horizontal strip along the bottom with icons only. */
@media (max-width: 768px), (hover: none) {
	.pix-rail {
		top: auto;
		bottom: 0;
		right: 0;
		left: 0;
		transform: none;
		flex-direction: row;
		justify-content: center;
		gap: 0;
		background: rgba(8, 9, 12, .94);
		border-top: 1px solid var(--pix-border);
	}
	.pix-rail__link {
		height: 46px;
		transform: none;
		border: 0;
		border-radius: 0;
		border-right: 1px solid var(--pix-hairline);
		box-shadow: none;
	}
	.pix-rail__label { display: none; }
	.pix-rail__icon { flex-basis: 52px; width: 52px; }
	.pix-totop { bottom: 58px; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
	.pix-bg__layer { transition: none !important; }
}

/* =========================================================================
   VOUCHER PAGE (theme override of plugins/voucher)
   ========================================================================= */
.vc-wrap { display: grid; gap: 18px; max-width: 720px; margin: 0 auto; }
.vc-lead { margin: 0 0 14px; color: var(--pix-ink-soft); font-size: 14.5px; line-height: 1.55; }
.vc-label {
	display: block; margin-bottom: 7px;
	font-family: var(--pix-display); font-weight: 600; font-size: 12px;
	letter-spacing: 1.2px; text-transform: uppercase; color: var(--pix-gold);
}
.vc-row { display: flex; gap: 10px; flex-wrap: wrap; }
.vc-input {
	flex: 1 1 240px; min-width: 0;
	padding: 11px 14px;
	font-family: var(--pix-display); font-size: 16px; letter-spacing: 1.5px;
	color: var(--pix-ink);
	background: var(--pix-fill-2);
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius-sm);
	outline: none;
	transition: border-color .18s, box-shadow .18s;
}
.vc-input::placeholder { color: var(--pix-ink-soft); opacity: .6; letter-spacing: 1px; }
.vc-input:focus { border-color: var(--pix-border-gold); box-shadow: 0 0 0 3px rgba(234, 161, 0, .15); }

.vc-alert {
	display: flex; align-items: flex-start; gap: 14px;
	padding: 15px 18px; border-radius: var(--pix-radius);
	border: 1px solid var(--pix-border);
	background: var(--pix-panel-tp);
	box-shadow: var(--pix-shadow-sm);
}
.vc-alert__icon { flex: 0 0 auto; font-size: 20px; line-height: 1.3; }
.vc-alert strong { display: block; font-family: var(--pix-display); font-size: 16px; color: #fff; margin-bottom: 3px; }
:root[data-theme="light"] .vc-alert strong { color: #14161c; }
.vc-alert p { margin: 0; color: var(--pix-ink-soft); font-size: 14px; line-height: 1.5; }
.vc-alert--success { border-color: var(--pix-green-lt); background: linear-gradient(135deg, rgba(164, 197, 32, .14), var(--pix-panel-tp)); }
.vc-alert--success .vc-alert__icon { color: var(--pix-green-lt); }
.vc-alert--error { border-color: #d9443f; background: linear-gradient(135deg, rgba(217, 68, 63, .14), var(--pix-panel-tp)); }
.vc-alert--error .vc-alert__icon { color: #ff7a75; }
.vc-actions { display: flex; justify-content: center; }

.vc-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.vc-steps li { display: flex; align-items: center; gap: 12px; color: var(--pix-ink); font-size: 14.5px; }
.vc-step__n {
	flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--pix-display); font-weight: 700; font-size: 13px;
	color: #1a1200; background: var(--pix-gold-grad);
}
.vc-note { margin: 0; padding-top: 12px; border-top: 1px solid var(--pix-hairline); color: var(--pix-ink-soft); font-size: 13.5px; line-height: 1.55; }

/* =========================================================================
   CHAR BAZAAR (plugins/char-bazaar) — the views ship their own <style> with a
   hardcoded parchment palette (#d4c0a1 panels, #faf0d7 tiles, #b59b73 borders,
   #2b1b0f text). Those blocks sit in the body so they would win on equal
   specificity; every rule below is prefixed with .pix-card--content to out-rank
   them, and !important is used only where the plugin itself used it.
   ========================================================================= */
.pix-card--content .cb-box,
.pix-card--content .char-bazaar-form-container,
.pix-card--content .char-bazaar-info-box .TableContent {
	background: var(--pix-panel-tp);
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius);
	overflow: hidden;
}
.pix-card--content .cb-box__head {
	background: var(--pix-gold-grad);
	color: #1a1200;
	font-family: var(--pix-display);
	font-weight: 700;
	letter-spacing: .4px;
	border-bottom: 0;
	padding: 9px 14px;
}
.pix-card--content .cb-box__body { background: transparent; padding: 14px; }
.pix-card--content .cb-table-content { border-color: var(--pix-border); }
.pix-card--content .cb-muted,
.pix-card--content .cb-price,
.pix-card--content .cb-sep,
.pix-card--content .cb-house-headline,
.pix-card--content .cb-auction__meta,
.pix-card--content .cb-auction__ends,
.pix-card--content .char-bazaar-small-text { color: var(--pix-ink-soft); }
.pix-card--content .cb-divider-top { border-top-color: var(--pix-border); }

/* Item / outfit / equipment tiles */
.pix-card--content .cb-slot,
.pix-card--content .cb-item-tile,
.pix-card--content .cb-outfit-tile,
.pix-card--content .cb-auction__outfit,
.pix-card--content .cb-items-grid {
	background: var(--pix-fill-2);
	border: 1px solid var(--pix-border);
	border-radius: 7px;
	color: var(--pix-ink);
}
.pix-card--content .cb-slot--empty,
.pix-card--content .cb-slot--label { background: var(--pix-fill); }
.pix-card--content .cb-slot__badge--tier,
.pix-card--content .cb-tile-badge--tier { background: var(--pix-gold); color: #1a1200; border-radius: 4px; }
.pix-card--content .cb-slot__badge--count,
.pix-card--content .cb-tile-badge--count { background: rgba(10, 11, 15, .85); color: var(--pix-gold-lt); border-radius: 4px; }

/* Key/value table */
.pix-card--content .cb-kv-table__k,
.pix-card--content .cb-kv-table__v { border: 1px solid var(--pix-border) !important; color: var(--pix-ink); }
.pix-card--content .cb-kv-table__k { background: var(--pix-fill-2); font-weight: 600; }
.pix-card--content .cb-kv-table__v { background: var(--pix-fill); }

/* Gem cards */
.pix-card--content .cb-gem-card {
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius-sm);
	background: var(--pix-panel-2);
	box-shadow: var(--pix-shadow-sm);
	overflow: hidden;
}
.pix-card--content .cb-gem-top,
.pix-card--content .cb-gem-modifiers { background: var(--pix-fill-2); border-bottom: 1px solid var(--pix-border); }
.pix-card--content .cb-gem-stats-list { background: transparent; color: var(--pix-ink); }
.pix-card--content .cb-lock-badge { background: rgba(10, 11, 15, .85); color: var(--pix-gold-lt); border: 1px solid var(--pix-border); border-radius: 4px; }
.pix-card--content .cb-mod-icon-wrapper.cb-supreme { border-color: var(--pix-border-gold); box-shadow: 0 0 8px rgba(234, 161, 0, .3); }
.pix-card--content .cb-stat-item.cb-supreme-stat { color: var(--pix-gold-lt); }
.pix-card--content :is(.cb-gem-card, .cb-auction__outfit, .cb-outfit-tile):hover,
.pix-card--content :is(.cb-item-tile, .cb-slot):hover { box-shadow: var(--pix-shadow), var(--pix-glow-gold); }

/* Filters, inputs, tabs */
.pix-card--content .cb-input,
.pix-card--content .cb-propose__input,
.pix-card--content .char-bazaar-input,
.pix-card--content .char-bazaar-select {
	background: var(--pix-fill-2) !important;
	color: var(--pix-ink) !important;
	border: 1px solid var(--pix-border) !important;
	border-radius: var(--pix-radius-sm);
	padding: 7px 10px;
}
.pix-card--content .cb-input:focus { border-color: var(--pix-border-gold) !important; outline: none; }
.pix-card--content .cb-label,
.pix-card--content .char-bazaar-form-label {
	color: var(--pix-gold); font-family: var(--pix-display); font-weight: 600;
}
.pix-card--content .cb-filters { background: var(--pix-fill); border: 1px solid var(--pix-border); border-radius: var(--pix-radius-sm); }
.pix-card--content .cb-chip { background: var(--pix-fill-3); color: var(--pix-ink); border: 1px solid var(--pix-border); border-radius: 999px; }
.pix-card--content .cb-tab {
	background: var(--pix-fill-2); color: var(--pix-ink);
	border: 1px solid var(--pix-border); border-radius: var(--pix-radius-sm) var(--pix-radius-sm) 0 0;
}
.pix-card--content .cb-tab-active { background: var(--pix-gold-grad); color: #1a1200; border-color: transparent; font-weight: 700; }

/* The GIF-backed buttons: drop the images, keep the label as a themed button */
.pix-card--content .cb-bigbutton,
.pix-card--content .char-bazaar-button-container .BigButton { background-image: none !important; }
.pix-card--content .LinkBigButtonText {
	position: static !important;
	width: auto !important; height: auto !important;
	padding: 9px 18px !important;
	color: #1a1200 !important;
	text-shadow: none !important;
	font-family: var(--pix-display) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	background: var(--pix-gold-grad) !important;
	border: 0 !important;
	border-radius: var(--pix-radius-sm) !important;
	cursor: pointer;
}
.pix-card--content .LinkBigButtonText:hover { top: auto !important; left: auto !important; filter: brightness(1.08); }

/* sell-character page: rows, warnings, requirements */
.pix-card--content .char-bazaar-form-row-odd { background: var(--pix-fill); }
.pix-card--content .char-bazaar-form-row-even { background: var(--pix-fill-2); }
.pix-card--content .char-bazaar-form-row-button { background: transparent; }
.pix-card--content .char-bazaar-form-value,
.pix-card--content .char-bazaar-text-center { color: var(--pix-ink); }
.pix-card--content .char-bazaar-text-center b,
.pix-card--content .char-bazaar-requirements-list strong { color: var(--pix-gold-lt); }
.pix-card--content .char-bazaar-warning-title,
.pix-card--content .char-bazaar-warning-list { color: #ff7a75; }
.pix-card--content .char-bazaar-requirements-title { color: #63b0ff; }
.pix-card--content .char-bazaar-requirements-list { color: var(--pix-ink-soft); }
.pix-card--content .char-bazaar-success-message { color: var(--pix-green-lt); }
.pix-card--content .char-bazaar-two-columns,
.pix-card--content .char-bazaar-column + .char-bazaar-column { border-color: var(--pix-border); }

/* -------------------------------------------------------------------------
   Legacy "BigButton": a div with a GIF background, a hidden hover GIF on top
   and the real control inside. Kill the images and let the inner control be
   the button. Applies everywhere (bazaar, voucher plugin, core forms).
   ------------------------------------------------------------------------- */
.pix-card--content .BigButton {
	background-image: none !important;
	display: inline-block;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	border: 0 !important;
}
.pix-card--content .BigButtonOver { display: none !important; }
.pix-card--content input.BigButtonText,
.pix-card--content .BigButton input[type="submit"],
.pix-card--content .BigButton input[type="button"] {
	position: static !important;
	width: auto !important;
	height: auto !important;
	padding: 9px 18px !important;
	font-family: var(--pix-display) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	color: #1a1200 !important;
	text-shadow: none !important;
	background: var(--pix-gold-grad) !important;
	border: 0 !important;
	border-radius: var(--pix-radius-sm) !important;
	box-shadow: var(--pix-shadow-sm);
	cursor: pointer;
	transition: filter .15s, transform .12s;
}
.pix-card--content input.BigButtonText:hover,
.pix-card--content .BigButton input[type="submit"]:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* -------------------------------------------------------------------------
   Char Bazaar, part 2: the offer listing paints its cards with INLINE styles
   generated in PHP (plugins/char-bazaar/pages/char-offers.php), not with
   classes — so the class remap above never reaches them. Match on the literal
   parchment colours instead and repaint them in theme tokens.
   ------------------------------------------------------------------------- */
/* card / panel bodies */
.pix-card--content [style*="#d4c0a1"] {
	background: var(--pix-panel-tp) !important;
	border-radius: var(--pix-radius-sm);
}
/* filled item + outfit tiles */
.pix-card--content [style*="#faf0d7"] { background: var(--pix-fill-2) !important; border-radius: 7px; }
/* empty tiles */
.pix-card--content [style*="#e7d8bf"] { background: var(--pix-fill) !important; border-radius: 7px; }
/* every parchment border in the listing */
.pix-card--content [style*="#b59b73"] { border-color: var(--pix-border) !important; }
.pix-card--content [style*="#5f4d41"] { border-color: var(--pix-border) !important; }
/* inline body text */
.pix-card--content [style*="#2b1b0f"] { color: var(--pix-ink-soft) !important; }
/* tier badges */
.pix-card--content [style*="#ff9610"] {
	background: var(--pix-gold) !important;
	color: #1a1200 !important;
	border-radius: 4px;
}
/* the listing's outer TableContent keeps a parchment 1px frame */
.pix-card--content table.TableContent[style*="#faf0d7"] { background: transparent !important; border-color: var(--pix-border) !important; }
/* the auction cards themselves — give them the card treatment */
.pix-card--content [style*="width: 380px"] {
	box-shadow: var(--pix-shadow-sm);
	transition: transform .15s, box-shadow .18s;
}
.pix-card--content [style*="width: 380px"]:hover {
	transform: translateY(-3px);
	box-shadow: var(--pix-shadow), var(--pix-glow-gold);
}
/* character name inside a card */
.pix-card--content [style*="width: 380px"] a { color: var(--pix-gold-lt); text-decoration: none; }
.pix-card--content [style*="width: 380px"] a:hover { color: var(--pix-gold); }
/* the plugin's own filter bar (class-based, but its <style> loads after ours) */
.pix-card--content .cb-filters { box-shadow: none !important; border-color: var(--pix-border) !important; }

/* -------------------------------------------------------------------------
   Char Bazaar, part 3: layout fixes on top of the plugin's own <style>.
   ------------------------------------------------------------------------- */

/* sell-character?step=form — the plugin caps the form at 700px and its inner
   table at 80%, leaving it floating in the middle of a wide card. Let it use
   the full width of the content card. */
.pix-card--content .char-bazaar-form-container,
.pix-card--content .char-bazaar-info-box {
	max-width: none !important;
	width: 100% !important;
	margin: 15px 0 !important;
}
.pix-card--content .char-bazaar-form-container .TableContent {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	display: table !important;
}
.pix-card--content .char-bazaar-form-label { width: 32%; vertical-align: middle; }
.pix-card--content .char-bazaar-form-value { vertical-align: middle; }
.pix-card--content .char-bazaar-select-character,
.pix-card--content .char-bazaar-select-duration,
.pix-card--content .char-bazaar-input-number { max-width: 100%; }
.pix-card--content .char-bazaar-button-container { text-align: center; padding: 18px 15px; }

/* Buttons that wrap a <button>/<a> around the gold label: the wrapper kept a
   fixed 150x35 box, so it painted a second, larger surface behind the label. */
.pix-card--content .cb-propose__button,
.pix-card--content .cb-bigbutton,
.pix-card--content .BigButton > div > a,
.pix-card--content .BigButton > div > button {
	all: unset;
	display: inline-block;
	cursor: pointer;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
.pix-card--content .LinkBigButtonText { display: inline-block; }

/* Filter bar: the plugin locks inputs/chips to 22px tall, which clips them once
   they get real padding, and the action buttons had no wrapping/gap. */
.pix-card--content .cb-filters-row { gap: 12px 14px; align-items: flex-end; }
.pix-card--content .cb-input,
.pix-card--content .cb-propose__input,
.pix-card--content .cb-chip {
	height: auto !important;
	min-height: 34px;
	line-height: 1.2;
	font-size: 13px !important;
	box-sizing: border-box;
}
.pix-card--content .cb-chip { padding: 6px 10px !important; gap: 8px; }
.pix-card--content .cb-num, .pix-card--content .cb-dir { width: 84px !important; }
.pix-card--content .cb-label { font-size: 11.5px; line-height: 1.3; }
.pix-card--content .cb-field { min-width: 160px; gap: 6px; }
.pix-card--content .cb-actions {
	display: flex !important;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.pix-card--content .cb-actions .BigButton,
.pix-card--content .cb-actions__btn { margin: 0 !important; }
.pix-card--content .cb-propose { gap: 10px; flex-wrap: wrap; }

/* Back link injected by theme.js on the single-auction view */
.pix-card--content .cb-back { margin-bottom: 16px; text-decoration: none; }

/* =========================================================================
   LOST ACCOUNT (theme override of system/pages/account/lost.php)
   ========================================================================= */
.la-wrap { max-width: 760px; margin: 0 auto; }
.la-lead { margin: 0 0 18px; color: var(--pix-ink); font-size: 15px; line-height: 1.6; }
.la-steps { display: grid; gap: 14px; margin-bottom: 22px; }
.la-step { display: flex; align-items: flex-start; gap: 13px; }
.la-step__n {
	flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--pix-display); font-weight: 700; font-size: 13px;
	color: #1a1200; background: var(--pix-gold-grad);
}
.la-step strong { display: block; font-family: var(--pix-display); font-size: 15px; color: #fff; margin-bottom: 2px; }
:root[data-theme="light"] .la-step strong { color: #14161c; }
.la-step p { margin: 0; color: var(--pix-ink-soft); font-size: 14px; line-height: 1.5; }

/* The big call to action */
.la-discord {
	display: flex; align-items: center; gap: 16px;
	padding: 18px 22px; text-decoration: none;
	border: 1px solid #5865F2;
	border-radius: var(--pix-radius);
	background: linear-gradient(135deg, rgba(88, 101, 242, .22), rgba(18, 20, 26, .70));
	box-shadow: var(--pix-shadow), 0 0 26px rgba(88, 101, 242, .25);
	transition: transform .15s, box-shadow .18s, background .18s;
}
.la-discord:hover {
	transform: translateY(-2px);
	background: linear-gradient(135deg, rgba(88, 101, 242, .34), rgba(18, 20, 26, .78));
	box-shadow: var(--pix-shadow), 0 0 34px rgba(88, 101, 242, .45);
}
:root[data-theme="light"] .la-discord { background: linear-gradient(135deg, rgba(88, 101, 242, .20), rgba(255, 255, 255, .92)); }
:root[data-theme="light"] .la-discord:hover { background: linear-gradient(135deg, rgba(88, 101, 242, .30), rgba(255, 255, 255, .96)); }
.la-discord__icon {
	flex: 0 0 52px; width: 52px; height: 52px; border-radius: 13px;
	display: flex; align-items: center; justify-content: center;
	color: #fff; background: #5865F2;
}
.la-discord__icon svg { width: 30px; height: 30px; }
.la-discord__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.la-discord__text strong { font-family: var(--pix-display); font-size: 19px; color: #fff; }
:root[data-theme="light"] .la-discord__text strong { color: #14161c; }
.la-discord__text small { font-size: 13.5px; color: var(--pix-ink-soft); line-height: 1.4; }
.la-discord__cta {
	margin-left: auto; flex: 0 0 auto;
	font-family: var(--pix-display); font-weight: 700; font-size: 15px;
	color: #8b98f7; white-space: nowrap;
}
.la-note {
	margin: 20px 0 0; padding-top: 14px;
	border-top: 1px solid var(--pix-hairline);
	color: var(--pix-ink-soft); font-size: 13.5px; line-height: 1.55;
}
@media (max-width: 560px) {
	.la-discord { flex-wrap: wrap; }
	.la-discord__cta { margin-left: 0; }
}

/* -------------------------------------------------------------------------
   Account pages — layout tweaks on the core twigs.
   ------------------------------------------------------------------------- */
/* Account Logs / Character list in account/manage are bare <table>s, so they
   shrink-wrap to their content. Let them use the full card width. */
.pix-card--content h2 + table { width: 100%; }

/* account/characters/create — the name field inherits a tiny `size` attribute */
.pix-card--content #character_name {
	min-width: 320px;
	max-width: 100%;
	font-size: 15px;
	padding: 9px 12px;
	letter-spacing: .3px;
}
@media (max-width: 560px) {
	.pix-card--content #character_name { min-width: 0; width: 100%; }
}

/* -------------------------------------------------------------------------
   Account forms inside a headline card (change-email, change-info, change
   password, character create/delete, register…). The core twigs lay these out
   as label/value tables with a `size` attribute on every input, which gives
   ragged, arbitrary field widths. Normalise them into one consistent form.
   ------------------------------------------------------------------------- */
.pix-card--content .pix-headline__body table { width: 100%; border-collapse: collapse; }
.pix-card--content .pix-headline__body td { padding: 7px 0; vertical-align: middle; }
/* label column: fixed, right-aligned gutter next to the field */
.pix-card--content .pix-headline__body td.LabelV,
.pix-card--content .pix-headline__body td.LabelV80,
.pix-card--content .pix-headline__body td.LabelH {
	width: 210px;
	padding-right: 16px;
	font-family: var(--pix-display);
	font-size: 13.5px;
	letter-spacing: .3px;
	vertical-align: middle;
	white-space: normal;
}
/* the `size` attribute wins over our padding otherwise — let fields fill the row */
.pix-card--content .pix-headline__body input:not([type]),
.pix-card--content .pix-headline__body input[type="text"],
.pix-card--content .pix-headline__body input[type="password"],
.pix-card--content .pix-headline__body input[type="email"],
.pix-card--content .pix-headline__body input[type="number"],
.pix-card--content .pix-headline__body select,
.pix-card--content .pix-headline__body textarea {
	width: 100%;
	max-width: 420px;
	box-sizing: border-box;
}
/* radios/checkboxes must not stretch */
.pix-card--content .pix-headline__body input[type="radio"],
.pix-card--content .pix-headline__body input[type="checkbox"] { width: auto; margin-right: 7px; }
.pix-card--content .pix-headline__body label { cursor: pointer; }
/* small helper text under a field */
.pix-card--content .pix-headline__body small,
.pix-card--content .pix-headline__body .Text small { color: var(--pix-ink-soft); font-size: 12.5px; }

@media (max-width: 600px) {
	.pix-card--content .pix-headline__body table,
	.pix-card--content .pix-headline__body tbody,
	.pix-card--content .pix-headline__body tr,
	.pix-card--content .pix-headline__body td { display: block; width: 100% !important; }
	.pix-card--content .pix-headline__body td.LabelV,
	.pix-card--content .pix-headline__body td.LabelV80,
	.pix-card--content .pix-headline__body td.LabelH { padding: 0 0 4px; }
	.pix-card--content .pix-headline__body input,
	.pix-card--content .pix-headline__body select,
	.pix-card--content .pix-headline__body textarea { max-width: none; }
}

/* =========================================================================
   POINTS / SHOP (theme override of gesior-shop-system points.html.twig)
   ========================================================================= */
.pts { max-width: 900px; margin: 0 auto; }

/* --- Important notice: the one thing players must read before paying --- */
.pts-notice {
	display: flex; align-items: flex-start; gap: 16px;
	padding: 18px 20px; margin-bottom: 28px;
	border: 1px solid rgba(217, 68, 63, .55);
	border-left: 4px solid #d9443f;
	border-radius: var(--pix-radius);
	background: linear-gradient(135deg, rgba(217, 68, 63, .12), var(--pix-panel-tp));
	box-shadow: var(--pix-shadow-sm);
}
.pts-notice__icon {
	flex: 0 0 auto; font-size: 24px; line-height: 1.2; color: #ff8a85;
}
.pts-notice__body { min-width: 0; }
.pts-notice__title {
	display: block; margin-bottom: 5px;
	font-family: var(--pix-display); font-size: 17px; letter-spacing: .3px;
	color: #fff;
}
:root[data-theme="light"] .pts-notice__title { color: #14161c; }
.pts-notice p { margin: 0 0 10px; color: var(--pix-ink); font-size: 14.5px; line-height: 1.55; }
.pts-notice__hot { color: #ff7a75; text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="light"] .pts-notice__hot { color: #b3231e; }
.pts-notice__list { margin: 0; padding-left: 18px; color: var(--pix-ink-soft); font-size: 13.5px; line-height: 1.65; }

/* --- Section heading above the gateways --- */
.pts-head { text-align: center; margin-bottom: 20px; }
.pts-head__title {
	margin: 0 0 5px; border: 0;
	font-family: var(--pix-display); font-size: 22px; color: #fff;
}
:root[data-theme="light"] .pts-head__title { color: #14161c; }
.pts-head__sub { margin: 0; color: var(--pix-ink-soft); font-size: 14px; }

/* --- Gateway cards. The plugin's gateway twigs keep their .floating-box
       markup; only the presentation changes here. --- */
.pts-grid.main-box {
	/* fixed-width tiles, centred — auto-fit with 1fr stretched a lone gateway
	   across the whole card */
	display: flex !important;
	flex-wrap: wrap;
	gap: 18px;
	align-items: stretch !important;
	justify-content: center !important;
	margin: 0 0 22px !important;
}
.pts-grid .floating-box {
	margin: 0 !important;
	flex: 0 0 236px; width: 236px; max-width: 100%;
	display: flex; flex-direction: column; gap: 10px;
	padding: 20px 18px !important;
	border: 1px solid var(--pix-border) !important;
	border-radius: var(--pix-radius) !important;
	background: var(--pix-fill);
	box-shadow: var(--pix-shadow-sm) !important;
	transition: transform .15s, border-color .18s, box-shadow .18s;
}
.pts-grid .floating-box:hover {
	transform: translateY(-4px);
	border-color: var(--pix-border-gold) !important;
	box-shadow: var(--pix-shadow), var(--pix-glow-gold) !important;
}
.pts-grid .floating-logo-box {
	min-height: 62px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--pix-hairline);
}
.pts-grid .floating-logo-box a { display: inline-flex; }
.pts-grid .floating-logo { max-height: 46px; width: auto; }
.pts-grid .floating-logo-box br { display: none; }
.pts-grid .info-box {
	height: auto !important;
	display: block !important;
	text-align: center;
	color: var(--pix-ink-soft);
	font-size: 13px;
	line-height: 1.5;
}
.pts-grid .info-box b { color: var(--pix-gold-lt); font-family: var(--pix-display); letter-spacing: .3px; }
/* the whole card is clickable via its logo link — make that obvious */
.pts-grid .floating-box { cursor: pointer; }

.pts-foot {
	margin: 0; padding-top: 16px;
	border-top: 1px solid var(--pix-hairline);
	text-align: center; color: var(--pix-ink-soft); font-size: 13px; line-height: 1.55;
}

@media (max-width: 560px) {
	.pts-notice { flex-direction: column; gap: 10px; }
}

/* --- Points page: language switcher (same idea as the rules page) --- */
.pts-flags { display: flex; justify-content: center; gap: 10px; margin-bottom: 18px; }
.pts-flag {
	padding: 0; border: 1px solid var(--pix-border); border-radius: 5px;
	background: none; cursor: pointer; line-height: 0;
	opacity: .45; filter: grayscale(.6);
	transition: opacity .18s, filter .18s, border-color .18s, transform .12s;
}
.pts-flag img { display: block; width: 46px; height: 30px; object-fit: cover; border-radius: 4px; }
.pts-flag:hover { opacity: .85; filter: none; transform: translateY(-1px); }
.pts-flag.is-active { opacity: 1; filter: none; border-color: var(--pix-gold); box-shadow: 0 0 0 2px rgba(234, 161, 0, .22); }

/* Only the selected language is visible. Nothing is shown until the inline
   script sets data-lang, which avoids a flash of both languages. */
.pts .pts-pl, .pts .pts-en { display: none; }
.pts[data-lang="pl"] .pts-pl,
.pts[data-lang="en"] .pts-en { display: revert; }

/* the gateway descriptions are spans inside a centred line */
.pts[data-lang="pl"] .info-box .pts-pl,
.pts[data-lang="en"] .info-box .pts-en { display: block; }
.pts-grid .floating-logo-box { display: flex; justify-content: center; align-items: center; }
.pts-grid .info-box, .pts-grid .info-box * { text-align: center; }

/* =========================================================================
   HERO SHOWCASE — carousel (images/pixellor/carousel) with the logo pinned to
   the left. The frame is pushed right by half the logo width, so the carousel
   visually starts at the logo's midpoint and the logo overlaps its edge.
   ========================================================================= */
.pix-showcase {
	position: relative;
	width: 100%;
	max-width: none;   /* fills the hero's left column */
	margin-bottom: calc(18px + var(--pix-shot-h) * 0.10);
}
.pix-showcase__frame {
	position: relative;
	margin-left: var(--pix-logo-half);
	height: var(--pix-shot-h);
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius);
	background: var(--pix-panel-tp);
	box-shadow: var(--pix-shadow);
	overflow: hidden;
}
/* no images in the folder → just the logo, no frame at all */
.pix-showcase--bare { max-width: none; }

.pix-showcase__stage { position: absolute; inset: 0; }
.pix-showcase__slide {
	position: absolute; inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 1s ease, transform 6s ease-out;
}
.pix-showcase__slide.is-active { opacity: 1; transform: scale(1); }
/* darkens the left side so the overlapping logo stays legible on any screenshot */
.pix-showcase__scrim {
	position: absolute; inset: 0;
	background:
		linear-gradient(to right, rgba(8, 9, 12, .80) 0%, rgba(8, 9, 12, .30) 42%, rgba(8, 9, 12, .10) 70%),
		linear-gradient(to top, rgba(8, 9, 12, .60), rgba(8, 9, 12, 0) 45%);
}

/* the logo sits on the left edge, vertically centred, over the frame */
.pix-showcase .pix-hero__logo-link {
	position: absolute;
	left: 0; top: 75%;
	transform: translateY(-50%);
	z-index: 2;
}
.pix-showcase .pix-hero__logo {
	height: var(--pix-logo-h);
	width: auto;
	margin-bottom: 0;
	filter: drop-shadow(0 12px 34px rgba(0, 0, 0, .75));
}
/* bare mode: back to the plain, static logo */
.pix-showcase--bare .pix-hero__logo-link { position: static; transform: none; }
.pix-showcase--bare .pix-hero__logo { width: auto; height: clamp(110px, 15vw, 190px); margin-bottom: 10px; }

/* arrows */
.pix-showcase__nav {
	position: absolute; top: 50%; z-index: 3;
	transform: translateY(-50%);
	width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--pix-display); font-size: 21px; line-height: 1;
	color: var(--pix-ink);
	background: rgba(10, 11, 15, .55);
	border: 1px solid var(--pix-border);
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s, background .2s, border-color .2s;
}
.pix-showcase__nav--prev { left: calc(var(--pix-logo-half) + 12px); }
.pix-showcase__nav--next { right: 12px; }
.pix-showcase:hover .pix-showcase__nav,
.pix-showcase__nav:focus-visible { opacity: 1; }
.pix-showcase__nav:hover { background: rgba(10, 11, 15, .82); border-color: var(--pix-border-gold); color: var(--pix-gold-lt); }

/* dots — kept clear of the logo */
.pix-showcase__dots {
	position: absolute; right: 14px; bottom: 12px; z-index: 3;
	display: flex; gap: 7px;
}
.pix-showcase__dot {
	width: 8px; height: 8px; padding: 0;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .38);
	cursor: pointer;
	transition: background .2s, transform .2s, width .2s;
}
.pix-showcase__dot:hover { background: rgba(255, 255, 255, .7); }
.pix-showcase__dot.is-active { width: 20px; border-radius: 4px; background: var(--pix-gold); }

@media (prefers-reduced-motion: reduce) {
	.pix-showcase__slide { transition: opacity .01s; transform: none; }
}
@media (max-width: 992px) {
	.pix-showcase { max-width: none; }
}
@media (max-width: 560px) {
	.pix-showcase__nav { display: none; }
	.pix-hero { --pix-shot-h: 150px; }
}

/* =========================================================================
   COMPACT HERO — every page except the front one. The carousel is skipped in
   PHP (no slides → the showcase renders in its bare, logo-only mode), and
   everything else scales down so subpages start with their content, not with
   a full-height banner.
   ========================================================================= */
/* nothing but the page header on the left now, so the band can be shallow */
.pix-hero--compact .pix-hero__inner { padding-top: 14px; padding-bottom: 12px; gap: 20px; align-items: center; }
.pix-hero--compact .pix-pagehead { margin-top: 0; }
/* subpages carry the two boosted tiles with a wide events strip underneath —
   the server-save bar and the donation invite are front-page only (index.php) */
/* the side column matches the sidebar width, so both edges line up */
.pix-hero--compact .pix-hero__side { width: 312px; flex: 0 0 312px; height: auto; }
.pix-hero--compact .pix-hero__boosted { flex-wrap: wrap; justify-content: space-between; }
.pix-hero--compact .pix-events {
	flex: 1 0 100%;
	width: auto;
	min-width: 0;
	max-width: none;         /* the column itself is already 312px wide */
	/* one line: label, the single event, link to the calendar */
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
}
/* let the head's children join the row instead of forming their own block */
.pix-hero--compact .pix-events__head { display: contents; }
.pix-hero--compact .pix-events__tag { display: none; }
.pix-hero--compact .pix-events__all { order: 3; margin-left: auto; white-space: nowrap; }
.pix-hero--compact .pix-events__list { order: 2; min-width: 0; }
.pix-hero--compact .pix-events__item { align-items: center; }
.pix-hero--compact .pix-events__body { flex-direction: row; align-items: baseline; gap: 7px; min-width: 0; }
.pix-hero--compact .pix-events__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pix-hero--compact .pix-events__dot { margin-top: 0; }

/* small logo */
.pix-hero--compact .pix-showcase { margin-bottom: 0; }
.pix-hero--compact .pix-showcase--bare .pix-hero__logo {
	height: clamp(70px, 8.4vw, 106px);
	margin-bottom: 12px;
}

/* smaller call-to-action row */
.pix-hero--compact .pix-hero__cta { gap: 8px; margin-bottom: 0; }
.pix-hero--compact .pix-hero__cta .pix-btn--lg { padding: 10px 19px; font-size: 15px; gap: 7px; }

/* tighter boosted tiles */
.pix-hero--compact .pix-hero__side { gap: 9px; }
.pix-hero--compact .pix-hero__boosted { gap: 9px; }
.pix-hero--compact .pix-boosted { padding: 7px 8px 6px; min-width: 92px; }
.pix-hero--compact .pix-boosted--creature,
.pix-hero--compact .pix-boosted--boss { min-width: 100px; }
.pix-hero--compact .pix-boosted img { height: 52px; }
.pix-hero--compact .pix-boosted figcaption { margin-top: 6px; }
.pix-hero--compact .pix-boosted__tag { font-size: 9.5px; letter-spacing: 1px; }
.pix-hero--compact .pix-boosted--creature .pix-boosted__tag { font-size: 10.5px; }
.pix-hero--compact .pix-boosted--boss .pix-boosted__tag { font-size: 12px; }
.pix-hero--compact .pix-boosted__name { font-size: 12px; }
.pix-hero--compact .pix-boosted--boss { border-width: 2px; padding-top: 8px; }
.pix-hero--compact .pix-boosted__crown { width: 18px; height: 18px; font-size: 9px; top: -7px; right: -7px; }

/* tighter events card */
.pix-hero--compact .pix-events { width: 168px; padding: 8px 10px 7px; }
.pix-hero--compact .pix-events__head { padding-bottom: 6px; margin-bottom: 6px; }
.pix-hero--compact .pix-events__tag { font-size: 9.5px; }
.pix-hero--compact .pix-events__all { font-size: 10px; }
.pix-hero--compact .pix-events__list { gap: 6px; }
.pix-hero--compact .pix-events__name { font-size: 11px; }
.pix-hero--compact .pix-events__when { font-size: 10px; }
.pix-hero--compact .pix-events__dot { width: 6px; height: 6px; margin-top: 4px; }

/* tighter donation invite */
.pix-hero--compact .pix-donate-mini { padding: 8px 12px; gap: 10px; }
.pix-hero--compact .pix-donate-mini__icon { font-size: 18px; }
.pix-hero--compact .pix-donate-mini__text strong { font-size: 12.5px; }
.pix-hero--compact .pix-donate-mini__text small { font-size: 11px; }
.pix-hero--compact .pix-donate-mini__cta { font-size: 11.5px; }

/* Subpages: the page header lives inside the hero (see index.php), lining up
   with the donation card, so the content card follows straight after it — no
   negative margins, nothing overlapping. `~` (not `+`) because the social rail
   and the nudges sit between the hero and <main> in the markup. */
.pix-hero--compact ~ .pix-main { margin-top: 0; }
.pix-hero--compact ~ .pix-main .pix-aside { margin-top: 0; }

/* the header inside the hero: same component, tuned for that context */
.pix-hero--compact .pix-page-title { font-size: clamp(22px, 3vw, 30px); }

/* Server-save countdown strip, above the boosted tiles in the hero */
.pix-save {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 14px;
	background: var(--pix-panel-tp);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius-sm);
	box-shadow: var(--pix-shadow-sm);
}
.pix-save__dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--pix-green-lt);
	box-shadow: 0 0 0 3px rgba(164, 197, 32, .18);
	animation: pixSavePulse 2.4s ease-in-out infinite;
}
@keyframes pixSavePulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(164, 197, 32, .18); }
	50%      { box-shadow: 0 0 0 6px rgba(164, 197, 32, 0); }
}
.pix-save__label {
	font-family: var(--pix-display); font-weight: 600;
	font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
	color: var(--pix-ink-soft);
}
.pix-save__time {
	margin-left: auto;
	font-family: var(--pix-display); font-weight: 700; font-size: 20px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .5px;
	color: var(--pix-gold-lt);
}
:root[data-theme="light"] .pix-save__time { color: #8a5c00; }
@media (prefers-reduced-motion: reduce) { .pix-save__dot { animation: none; } }

/* subpages keep the same strip, just small */
.pix-hero--compact .pix-save { padding: 6px 11px; gap: 8px; }
.pix-hero--compact .pix-save__dot { width: 6px; height: 6px; }
.pix-hero--compact .pix-save__label { font-size: 9.5px; letter-spacing: 1.2px; }
.pix-hero--compact .pix-save__time { font-size: 13px; letter-spacing: 0; }

/* Ring around the carousel stage. Drawn as an overlay on the frame rather than
   a border on the stage itself — the scrim sits inside the stage and would
   otherwise paint straight over it. z-index keeps it under the arrows/dots. */
.pix-showcase__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid #311700;
	border-radius: inherit;
	pointer-events: none;
	z-index: 1;
}

/* =========================================================================
   HIGHSCORES / LEADERBOARD ROWS
   Shared by highscores and powergamers — same markup, same classes.
   ========================================================================= */
.pix-card--content .hs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pix-card--content .hs-empty {
	padding: 26px; text-align: center; color: var(--pix-ink-soft);
	border: 1px dashed var(--pix-border); border-radius: var(--pix-radius);
}

.pix-card--content .hs-row {
	/* flex, not grid: the outfit column and the experience column are both
	   optional, and a fixed grid template pushed the extra cell into an
	   implicit column that broke the alignment */
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px 16px 9px 10px;
	background: var(--pix-fill);
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius-sm);
	transition: transform .14s, border-color .18s, background .18s;
}
.pix-card--content .hs-row:hover {
	transform: translateX(3px);
	border-color: var(--pix-border-gold);
	background: var(--pix-fill-2);
}

/* rank + flag */
.pix-card--content .hs-rank {
	flex: 0 0 46px;
	display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.pix-card--content .hs-rank b {
	font-family: var(--pix-display); font-weight: 800; font-size: 19px;
	font-variant-numeric: tabular-nums;
	color: var(--pix-ink-soft); line-height: 1;
}
.pix-card--content .hs-flag img { display: block; border-radius: 2px; }

/* outfit — core ships 128px-sprite offsets on a 64px image, so undo them */
.pix-card--content .hs-avatar {
	width: 56px; height: 56px; flex: 0 0 56px;
	display: flex; align-items: center; justify-content: center;
	background: var(--pix-fill-2);
	border: 1px solid var(--pix-border);
	border-radius: 10px;
	overflow: hidden;
}
.pix-card--content .hs-avatar img {
	position: static !important;
	margin: 0 !important;
	width: 100%; height: 100%;
	object-fit: contain;
}

/* name block */
.pix-card--content .hs-id { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pix-card--content .hs-name {
	font-family: var(--pix-display); font-weight: 700; font-size: 16px;
	color: var(--pix-ink); text-decoration: none;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pix-card--content .hs-name:hover { color: var(--pix-gold-lt); }
.pix-card--content .hs-meta {
	display: flex; align-items: center; gap: 8px;
	font-size: 12.5px; color: var(--pix-ink-soft);
}
.pix-card--content .hs-online {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 1px 8px 1px 6px;
	font-family: var(--pix-display); font-weight: 600; font-size: 10.5px;
	letter-spacing: .8px; text-transform: uppercase;
	color: var(--pix-green-lt);
	background: rgba(164, 197, 32, .14);
	border: 1px solid rgba(164, 197, 32, .38);
	border-radius: 999px;
}
.pix-card--content .hs-online::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: var(--pix-green-lt);
}
:root[data-theme="light"] .pix-card--content .hs-online { color: #5d7010; }

/* value column(s) */
.pix-card--content .hs-val { flex: 0 0 auto; min-width: 110px; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.pix-card--content .hs-val b {
	font-family: var(--pix-display); font-weight: 800; font-size: 19px;
	font-variant-numeric: tabular-nums;
	color: var(--pix-gold-lt); line-height: 1.1;
}
.pix-card--content .hs-val small {
	font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
	color: var(--pix-ink-soft); font-family: var(--pix-display);
}
.pix-card--content .hs-val--exp b { font-size: 15px; color: var(--pix-ink-soft); }

/* ---- podium: the top three read at a glance ---- */
.pix-card--content .hs-row--podium { padding-top: 12px; padding-bottom: 12px; }
.pix-card--content .hs-row--podium .hs-avatar { width: 68px; height: 68px; flex-basis: 68px; }
.pix-card--content .hs-row--podium .hs-name { font-size: 18px; }
.pix-card--content .hs-row--podium .hs-rank b { font-size: 23px; }

.pix-card--content .hs-row--1 {
	border-color: var(--pix-gold);
	background: linear-gradient(100deg, rgba(234, 161, 0, .16), var(--pix-fill) 60%);
	box-shadow: var(--pix-shadow-sm), 0 0 20px rgba(234, 161, 0, .14);
}
.pix-card--content .hs-row--1 .hs-rank b { color: var(--pix-gold-lt); }
.pix-card--content .hs-row--1 .hs-avatar { border-color: var(--pix-border-gold); }

.pix-card--content .hs-row--2 {
	border-color: rgba(198, 205, 215, .5);
	background: linear-gradient(100deg, rgba(198, 205, 215, .12), var(--pix-fill) 60%);
}
.pix-card--content .hs-row--2 .hs-rank b { color: #c6cdd7; }
:root[data-theme="light"] .pix-card--content .hs-row--2 .hs-rank b { color: #6b727c; }

.pix-card--content .hs-row--3 {
	border-color: rgba(197, 130, 74, .5);
	background: linear-gradient(100deg, rgba(197, 130, 74, .12), var(--pix-fill) 60%);
}
.pix-card--content .hs-row--3 .hs-rank b { color: #c5824a; }

@media (max-width: 560px) {
	.pix-card--content .hs-row { flex-wrap: wrap; gap: 10px; padding: 8px 12px 8px 8px; }
	.pix-card--content .hs-rank { flex-basis: 34px; }
	.pix-card--content .hs-val { min-width: 0; }
	.pix-card--content .hs-val--exp { display: none; }
}

/* ---- powergamers: same rows, plus a relative bar and the daily breakdown ---- */
.pix-card--content .pg-head { text-align: center; margin-bottom: 20px; }
.pix-card--content .pg-head__title { margin: 0 0 4px; border: 0; font-size: clamp(20px, 2.6vw, 26px); }
.pix-card--content .pg-head__sub { margin: 0; color: var(--pix-ink-soft); font-size: 14px; }


.pix-card--content .pg-val { min-width: 150px; }
.pix-card--content .pg-bar {
	display: block; width: 100%; height: 4px; margin-top: 6px;
	background: var(--pix-fill-2);
	border-radius: 3px; overflow: hidden;
}
.pix-card--content .pg-bar i {
	display: block; height: 100%;
	background: var(--pix-gold-grad);
	border-radius: 3px;
}
.pix-card--content .hs-row--1 .pg-bar i { box-shadow: 0 0 10px rgba(234, 161, 0, .5); }

.pix-card--content .pg-days { display: flex; flex-wrap: wrap; gap: 4px; }
.pix-card--content .pg-day {
	display: inline-flex; align-items: baseline; gap: 4px;
	padding: 1px 7px;
	font-size: 11.5px; font-variant-numeric: tabular-nums;
	color: var(--pix-ink);
	background: var(--pix-fill-2);
	border: 1px solid var(--pix-border);
	border-radius: 999px;
}
.pix-card--content .pg-day i {
	font-style: normal; font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase;
	color: var(--pix-ink-soft);
}
@media (max-width: 700px) {
	.pix-card--content .pg-days { display: none; }
}

/* ---- Highscores box (sidebar): podium treatment matching the full page ---- */
.pix-box__row--rank {
	gap: 10px;
	padding: 8px 8px;
	margin-bottom: 6px;
	border-bottom: 0;
	border: 1px solid var(--pix-border);
	border-radius: var(--pix-radius-sm);
	background: var(--pix-fill);
	transition: transform .14s, border-color .18s, background .18s;
}
.pix-box__row--rank:last-of-type { margin-bottom: 10px; }
.pix-box__row--rank:hover { transform: translateX(3px); border-color: var(--pix-border-gold); background: var(--pix-fill-2); }

.pix-box__pos {
	flex: 0 0 20px;
	font-family: var(--pix-display); font-weight: 800; font-size: 17px;
	font-variant-numeric: tabular-nums;
	color: var(--pix-ink-soft); text-align: center;
}
.pix-box__row--rank .pix-box__outfit { width: 46px; height: 46px; flex-basis: 46px; }
.pix-box__row--rank .pix-box__meta { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.25; }
.pix-box__row--rank .pix-box__meta a { font-family: var(--pix-display); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pix-box__row--rank .pix-box__meta small { font-size: 11.5px; }
.pix-box__lvl { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.pix-box__lvl b {
	font-family: var(--pix-display); font-weight: 800; font-size: 16px;
	font-variant-numeric: tabular-nums; color: var(--pix-gold-lt);
}
.pix-box__lvl small { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--pix-ink-soft); font-family: var(--pix-display); }

.pix-box__row--1 {
	border-color: var(--pix-gold);
	background: linear-gradient(100deg, rgba(234, 161, 0, .16), var(--pix-fill) 62%);
}
.pix-box__row--1 .pix-box__pos { color: var(--pix-gold-lt); }
.pix-box__row--2 { border-color: rgba(198, 205, 215, .45); background: linear-gradient(100deg, rgba(198, 205, 215, .12), var(--pix-fill) 62%); }
.pix-box__row--2 .pix-box__pos { color: #c6cdd7; }
:root[data-theme="light"] .pix-box__row--2 .pix-box__pos { color: #6b727c; }
.pix-box__row--3 { border-color: rgba(197, 130, 74, .45); background: linear-gradient(100deg, rgba(197, 130, 74, .12), var(--pix-fill) 62%); }
.pix-box__row--3 .pix-box__pos { color: #c5824a; }

/* Front page: the side column is as tall as the carousel, so the boosted tiles
   stretch and their artwork sits at the very top. Keep the gold accent at the
   top edge but centre the outfit + name in the space below it. */
.pix-hero:not(.pix-hero--compact) .pix-boosted { display: flex; flex-direction: column; align-items: center; }
.pix-hero:not(.pix-hero--compact) .pix-boosted img { margin-top: auto; }
.pix-hero:not(.pix-hero--compact) .pix-boosted figcaption { margin-bottom: auto; }

/* --- Wiki: bigger NPC location popup (addoners "where to find" hover) --- */
.wiki-page .hover-container { color: var(--pix-gold-lt); }
.wiki-page .hover-image {
	width: 460px !important;
	max-width: 80vw;
	background: var(--pix-panel-2) !important;
	border: 1px solid var(--pix-border-gold) !important;
	border-radius: var(--pix-radius) !important;
	box-shadow: var(--pix-shadow) !important;
	padding: 6px;
}

/* --- Wiki: item/loot tables (mega-pixel, wheel-of-destiny) — roomier --- */
.wiki-page .pixellor-table { border-collapse: separate; border-spacing: 0; font-size: 14px; }
.wiki-page .pixellor-table th,
.wiki-page .pixellor-table td {
	padding: 12px 16px !important;
	border-color: var(--pix-border) !important;
	vertical-align: middle;
}
.wiki-page .pixellor-table tr:nth-child(even) td { background: var(--pix-fill); }
.wiki-page .pixellor-table td strong { color: var(--pix-gold-lt); }
/* the scroll / tile thumbnails in those tables were tiny */
.wiki-page .scroll-img { width: 48px !important; height: 48px !important; }
.wiki-page .pixellor-table .required-img,
.wiki-page .pixellor-table .reward-img { width: 44px !important; height: 44px !important; vertical-align: middle; }

/* =========================================================================
   LANGUAGE SWITCHER (globe + dropdown) driving Google Translate
   ========================================================================= */
.pix-lang { position: relative; flex: 0 0 auto; }
.pix-lang__btn {
	display: inline-flex; align-items: center; gap: 6px;
	height: 40px; padding: 0 11px; cursor: pointer;
	color: var(--pix-gold); background: rgba(255, 255, 255, .04);
	border: 1px solid var(--pix-border); border-radius: 999px;
	font-family: var(--pix-display); font-weight: 700; font-size: 12.5px;
	transition: color .15s, border-color .15s, background .15s, transform .1s;
}
.pix-lang__btn:hover { color: var(--pix-gold-lt); border-color: var(--pix-border-gold); background: rgba(255, 255, 255, .08); transform: translateY(-1px); }
.pix-lang__globe { width: 18px; height: 18px; }
.pix-lang__cur { letter-spacing: .5px; }
:root[data-theme="light"] .pix-topbar__right .pix-lang__btn { color: var(--pix-gold); }

.pix-lang__menu {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 950;
	min-width: 172px; padding: 6px;
	background: var(--pix-panel-2);
	border: 1px solid var(--pix-border); border-radius: var(--pix-radius-sm);
	box-shadow: var(--pix-shadow);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	display: flex; flex-direction: column; gap: 2px;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .16s, transform .16s, visibility .16s;
}
.pix-lang.is-open .pix-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.pix-lang__opt {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 10px; cursor: pointer; text-align: left;
	background: none; border: 0; border-radius: 7px;
	font-family: var(--pix-display); font-weight: 600; font-size: 13.5px;
	color: var(--pix-ink);
	transition: background .14s, color .14s;
}
.pix-lang__opt:hover { background: rgba(234, 161, 0, .12); color: var(--pix-gold-lt); }
.pix-lang__opt.is-active { color: var(--pix-gold-lt); background: rgba(234, 161, 0, .08); }
.pix-lang__flag { font-size: 17px; line-height: 1; }

/* --- Neutralize Google Translate's injected chrome (banner, tooltip, logo) --- */
.goog-te-banner-frame, .goog-te-balloon-frame, #goog-gt-tt, .goog-tooltip,
.goog-te-gadget-icon, .goog-logo-link, .goog-te-spinner-pos { display: none !important; }
.goog-te-gadget { height: 0 !important; overflow: hidden !important; font-size: 0 !important; }
.skiptranslate { display: none !important; }
/* Google shifts the page down by the banner height — undo it */
body { top: 0 !important; position: static !important; }
/* Google wraps translated runs in <font> and sometimes highlights them */
font { background: transparent !important; box-shadow: none !important; }